/*                              SINCERELY,
HHH  HHH  HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
AAA  AAA  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
RRR       RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR
EEE  EEE  EEEEEEEEEEEEEEEEEEEEPHOTOGRAPHHYEEE
NNN  NNN  NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
_____________________________________________  

HHHHHHHHHH   HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH                                            A
AAAAAAAA   A   AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA                                            S
RRRRRRRR       RRRRRRRRRRRRRRRRRRRRRRRRRRRRRR                                            C
EEEEEEEE  RRR  EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE                                            I
NNNNNNNN  NNN  NNNNNNNNNNNNNNNDESIGNNNNNNNNNN                                            I

_____________________________________________

HHHHHHHHHHHHHHH     HHHHHHHHHHHHHHHHHHHHHHHHH                                            M
AAAAAAAAAAAAAAA  AA  AAAAAAAAAARTDIRECTIONAAA                                            A
RRRRRRRRRRRRRRR     RRRRRRRRRRRRRRRRRRRRRRRRR                                            R
EEEEEEEEEEEEEEE  EE  EEEEEEEEEEEEEEEEEEEEEEEE                                            K
NNNNNNNNNNNNNNN  NNN  NNNNNNNNNNNNNNNNNNNNNNN

_____________________________________________

HHHHHHHHHHHHHHHHHHHHH       HHHHHHHHHHHHHHHHH
AAAAAAAAAAAAAAAAAAAAA  AAAAAAAAAAAAAAAAAAAAAA
RRRRRRRRRRRRRRRRRRRRR     RRRRRRRRRRRRRRRRRRR
EEEEEEEEEEEEEEEEEEEEE  EEEEEEEUSEREXPERIENCEE
NNNNNNNNNNNNNNNNNNNNN       NNNNNNNNNNNNNNNNN 

_____________________________________________

HHHHHHHHHHHHHHHHHHHHHHHHHHHH   HHH  HHHHHHHHH
AAAAAAAAAAAAAAAAAAAAAAAAAAAA    AA  AAAAAAAAA
RRRRINTERACTIONRRRRRRRRRRRRR  R  R  RRRRRRRRR
EEEEEEEEEEEEEEEEEEEEEEEEEEEE  EE    EEEE20EEE 
NNNNNNNNNNNNNNNNNNNNNNNNNNNN  NNN   NNNN18NNN   
@harensoril                               */

/* KEYFRAMES, ANIMATIONS, TRANSITIONS, ANYTHING ELSE */
@keyframes fade-in {
	0%		{opacity: 0;}
	100%	{opacity: 1;}
}
@-moz-keyframes fade-in {
	0%		{opacity: 0;}
	100%	{opacity: 1;}
}

@-o-keyframes fade-in {
	0%		{opacity: 0;}
	100%	{opacity: 1;}
}
	
@-webkit-keyframes fade-in {
	0%		{opacity: 0;}
	100%	{opacity: 1;}
}
.fade-in {
	animation-name: fade-in;
	-moz-animation-name: fade-in;
	-ms-animation-name: fade-in;
	-o-animation-name: fade-in;
	-webkit-animation-name: fade-in;
	animation-duration: 0.5s;
	-moz-animation-duration: 0.5s;
	-o-animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	animation-fill-mode: backwards;
	-moz-animation-fill-mode: backwards;
	-o-animation-fill-mode: backwards;
	-webkit-animation-fill-mode: backwards;
}
.fade-one {
	animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-o-animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
}
.fade-two {
	animation-delay: 1s;
	-moz-animation-delay: 1s;
	-o-animation-delay: 1s;
	-webkit-animation-delay: 1s;
}
.fade-three {
	animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
	-o-animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
}
.fade-four {
	animation-delay: 2s;
	-moz-animation-delay: 2s;
	-o-animation-delay: 2s;
	-webkit-animation-delay: 2s;
}
.fade-five {
	animation-delay: 2.5s;
	-moz-animation-delay:2.5s;
	-o-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.fade-six {
	animation-delay: 3s;
	-moz-animation-delay: 3s;
	-o-animation-delay: 3s;
	-webkit-animation-delay: 3s;
}
.fade-seven {
	animation-delay: 3.5s;
	-moz-animation-delay: 3.5s;
	-o-animation-delay: 3.5s;
	-webkit-animation-delay: 3.5s;
}






/*  MOBILE DISPLAY  (0px WIDE - 479px WIDE) */

@media screen and (max-width: 479px) {

	figure#mobile {
		width: 375px;
		height: 627px;
		margin: 2vh auto 0 auto;
	}


}

/* PHABLET (LARGE MOBILE) SCREEN DISPLAY (480px WIDE - 512px WIDE) */

@media screen and (min-width: 480px) and (max-width: 511px) {

	figure#phablet {
		width: 480px;
		height: 768px;
		margin: 2vh auto 0 auto;
	}


}

/* ORIGINAL MACINTOSH SCREEN DISPLAY (512px WIDE - 768px WIDE) */

@media screen and (min-width: 512px) and (max-width: 767px) {

	figure#original-macintosh {
		width: 512px;
		height: 342px;
		margin: 2vh auto 0 auto;
	}
		


}

/* TABLET SCREEN DISPLAY (768px WIDE - 1366px WIDE) */

@media screen and (min-width: 768px) and (max-width: 1365px) {

	figure#tablet {
		width: 768px;
		height: 1024px;
		margin: 2vh auto 0 auto;
	}


}

/*  LAPTOP DISPLAY (1366px WIDE - 1920px WIDE) */

@media screen and (min-width: 1366px) and (max-width: 1919px) {

	figure#laptop {
		width: 1366px;
		height: 768px;
		margin: 2vh auto 0 auto;
	}


}

/* DESKTOP OR TELEVISION DISPLAY (1920px OR WIDER BREAKPOINT) */

@media screen and (min-width: 1920px) {

	figure#desktop {
		width: 1920px;
		height: 1080px;
		margin: 2vh auto 0 auto;
	}



}