@import url(https://fonts.googleapis.com/css?family=Cormorant+Garamond:300|Lato:300);

/* RESET */
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, a, picture, img, ul, li, section{
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline
}

/* HTML5 display-role reset for older browsers */
figcaption, figure, nav, section{display: block}

html, body{
	margin: 0;
	padding: 0;
	overflow:hidden;
	background:none;
	text-rendering: optimizeLegibility /* https://css-tricks.com/almanac/properties/t/text-rendering/, http://caniuse.com/#search=text-rendering */
}

/*Customed reset*/
*, *::before, *::after{
	box-sizing:border-box;
	-webkit-font-smoothing: antialiased; /* http://smad.jmu.edu/shen/webtype/antialiasing.html, http://caniuse.com/#feat=font-smooth */
	-moz-osx-font-smoothing: grayscale; /* https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth */
	-webkit-tap-highlight-color:rgba(0,0,0,0) /* https://developer.mozilla.org/fr/docs/Web/CSS/-webkit-tap-highlight-color */
}

ul, ol{list-style-type: none}
a{text-decoration: none}
/* End Customed reset* /
/* End RESET */

#box{
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: #000;
	overflow: hidden
}

/* NAVIGATION */
@media(max-width:1023px){
	nav,
	nav ul {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0
	}

	nav ul {
		display: flex;
		flex-flow: column wrap;
		list-style: none
	}

	nav ul li{
		width: 100%;
		height: 33.33%;
		
		justify-content: center;
		align-items: center;
		overflow: hidden;
		transform: translateX(-100%)
	}

	nav ul li a{
		display: block;
		position: relative;
		top: 46%;
		color: #FFFFFF;
		text-transform: uppercase;
		font-family: 'Lato', sans-serif;
		font-weight: 300;
		font-size: .6rem;
		letter-spacing: .3rem;
		text-align: center;
	}
  
  .nav_layer{
		position: fixed;
		z-index: 97;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #2f0968;
		transform: translateX(-100%)
	}
  
	.layer_down{
		transition: all .4s ease-in-out;
		transform: translateX(0)
	}

	.layer_up{
		transition: all .8s ease-in-out;
		transform: translateX(-100%)
	}
}

@media(min-width:1024px){
	nav,
	nav ul {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0
	}

	nav ul {
		display: flex;
		list-style: none
	}

	nav ul li{
		flex-basis: 33.33%;
		justify-content: center;
		align-items: center;
		height: 100%;
		overflow: hidden;
		transform: translateY(-100%)
	}

	nav ul li a{
		display: block;
		position: relative;
		top: 46%;
		color: #FFFFFF;
		text-transform: uppercase;
		font-family: 'Lato', sans-serif;
		font-weight: 300;
		font-size: .6rem;
		letter-spacing: .3rem;
		text-align: center;
	}

	nav li a:before {
		content: '';
		width: 10px;
		height: 2px;
		background-color: #FFFFFF;
		position: absolute;
		top:50%;
		left: 0%;
		z-index: 97;
		transform: translateY(-100%);
		opacity: 0;
		transition: all .2s linear	
	}

	nav li a:after {
		content: attr(data-content);
		font-size: .6rem;
		transition: all .2s linear;
		opacity: 0;
		position: absolute;
		z-index: 97;
		color: #FFFFFF;
		display: block;
		margin-right: auto;
		margin-left: auto;
		left: 0;
		right: 0;
		bottom: -3rem;
		text-transform: none;
		font-family: 'Cormorant Garamond', serif;
		font-weight: 300;
		font-style: italic;
		letter-spacing: 0.3
	}
    
  .nav_layer{
		position: fixed;
		z-index: 97;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #2f0968;
		transform: translateX(-100%)
	}

	.layer_down{
		transition: all .4s ease-in-out;
		transform: translateY(0)
	}

	.layer_up{
		transition: all .8s ease-in-out;
		transform: translateY(-100%)
	}
}

@media(min-width:769px)and(max-width:1035px){
	nav ul li a {font-size: .7rem}
	nav ul li a:before {width: 50px}
	nav ul li a:after {font-size:.6rem}
}

@media(min-width:1366px){
	nav ul li a {font-size: .8rem}
	nav ul li a:before {width: 5rem}
	nav ul li a:after {font-size:.9rem}
}

nav ul li a:hover:before {
	transform: translateY(20%);
	opacity: 1;
}

nav ul li a:hover:after {
	transform: translateY(15px);
	opacity: 1;
}

#item_1{background: url(visionf80.jpg);
    background-repeat: no-repeat;
    background-size: auto;
}
#item_2{background: url(visionf82.jpg);
    background-repeat: no-repeat;
    background-size: auto;}
#item_3{background: url(visionf101.jpg);
    background-repeat: no-repeat;
    background-size: auto;}

.anim_out_item_1{animation: anim_out_item 0.4s linear 1 .2s both}
.anim_out_item_2{animation: anim_out_item 0.4s linear 1 .4s both}
.anim_out_item_3{animation: anim_out_item 0.4s linear 1 .6s both}
.anim_out_item_4{animation: anim_out_item 0.4s linear 1 .8s both}
.anim_out_item_5{animation: anim_out_item 0.4s linear 1 1s both}
.anim_item_1{animation: anim_item .3s linear 1 .5s both}
.anim_item_2{animation: anim_item.3s linear 1 .4s both}
.anim_item_3{animation: anim_item .3s linear 1 .3s both}
.anim_item_4{animation: anim_item .3s linear 1 .2s both}
.anim_item_5{animation: anim_item .3s linear 1 both}

/* NAV ANIMATION */
@media(max-width:1023px){
	
	
	
	#item_1{background: url(visionf80-yatay.jpg);
    background-repeat: no-repeat;
    background-size: auto;
}
#item_2{background: url(visionf82-yatay.jpg);
    background-repeat: no-repeat;
    background-size: auto;}
#item_3{background: url(visionf101-yatay.jpg);
    background-repeat: no-repeat;
    background-size: auto;}
	
	
	
	@keyframes anim_out_item{
		from {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%)
		}
		to {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
	}

	@keyframes anim_item{
		from {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		to {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%)
		}
	}
}

@media(min-width:1024px){
	@keyframes anim_out_item{
		from {
			-webkit-transform: translateY(-100%);
			transform: translateY(-100%)
		}
		to {
			-webkit-transform: translateY(0);
			transform: translateY(0)
		}
	}

	@keyframes anim_item{
		from {
			-webkit-transform: translateY(0);
			transform: translateY(0)
		}
		to {
			-webkit-transform: translateY(-100%);
			transform: translateY(-100%)
		}
	}
}

/* HUMBURGER */
@media(max-width:1023px){
	#humburger{
		width: 44px;
		display: block;
		position: fixed;
		top:.5rem;
		right:.5rem;
		z-index:100;
		cursor: pointer;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		transition: all .3s ease;
	}
}

@media(min-width:1024px){
	#humburger{
		width: 44px;
		display: block;
		position: fixed;
		top:2rem;
		right:3rem;
		z-index:100;
		cursor: pointer;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		transition: all .3s ease;
	}
}

#humburger div {
	display: block;
	height: 2px;
	background: #fff;
	cursor: pointer;
	margin-top: 8px;
	transition-duration: 0.3s;
}

/* HUMBURGER ANIMATION */
.anim_bar_1{margin-left:14px; animation: anim_bar_1 .6s linear 1 both}
.anim_bar_2{margin-left:14px; animation: anim_bar_2 .6s linear 1 both}
.anim_bar_3{margin-left:14px; animation: anim_bar_3 .6s linear 1 both}

.anim_out_bar_1{animation: anim_out_bar_1 .6s linear 1 both}
.anim_out_bar_2{animation: anim_out_bar_2 .6s linear 1 both}
.anim_out_bar_3{animation: anim_out_bar_3 .6s linear 1 both}

/* Keyframes for humburger bars */
@keyframes anim_bar_1{
	0% {
		background: #2F2F2F;
	}
	80% {
		transform: rotate(405deg) translateY(14px) scale(1.1);
		-webkit-transform: rotate(405deg) translateY(14px) scale(1.1);
		background-color: #FFFFFF
	}
	100% {
		transform: rotate(405deg) translateY(14px) scale(1.2);
		-webkit-transform: rotate(405deg) translateY(14px) scale(1.2);
		background-color: #FFFFFF;
	}
}

@keyframes anim_bar_2{
	0% {background: #2F2F2F}
	20% {background: transparent}
	100% {background-color: transparent}
}

@keyframes anim_bar_3{
	0% {
		background: #2F2F2F;
	}
	80% {
		transform: rotate(-405deg) translateY(-14px) scale(1.1);
		-webkit-transform: rotate(-405deg) translateY(-14px) scale(1.1);
	}
	100% {
		transform: rotate(-405deg) translateY(-14px) scale(1.2);
		-webkit-transform: rotate(-405deg) translateY(-14px) scale(1.2);
		background-color: #FFFFFF;
	}
}

@keyframes anim_out_bar_1
{
	0% {
		transform: rotate(405deg) scale(.8);
		-webkit-transform: rotate(405deg)scale(.8);
		background: #FFFFFF
	}
	80% {
		transform: rotate(5deg) scale(.9);
		-webkit-transform: rotate(5deg) scale(.9);
	}
	100% {
		transform: rotate(0deg) scale(1);
		-webkit-transform: rotate(0deg) scale(1);
		background: #2F2F2F;
	}
}

@keyframes anim_out_bar_3
{
	0% {
		transform: rotate(-405deg) scale(.8);
		-webkit-transform: rotate(-405deg) scale(.8);
		background: #FFFFFF
	}
	80% {
		transform: rotate(-5deg) scale(.9);
		-webkit-transform: rotate(-5deg) scale(.9);
		background: #FFFFFF
	}
	100% {
		transform: rotate(0deg) scale(1);
		-webkit-transform: rotate(0deg) scale(1);
		background: #2F2F2F;
	}
}

@keyframes anim_out_bar_2{
	0% {background: transparent}
	60% {background: transparent}
	100% {background: #2F2F2F}
}
/* End Keyframes for humburger bars */

/* MAIN CONTENT */
#content_box{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

#lightbox_1,
#lightbox_2,
#lightbox_3,
#lightbox_4,
#lightbox_5{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	position: absolute;
	background: #ddd;
	bottom: 0;
	left: 0;
	z-index: 2;
	transition-duration: 0.3s;
	overflow: hidden
}

.lightbox{
	width:100%;
	height:auto;
	display:flex;
	justify-content:center;
	align-content:center;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:-1;
	transform: scale(.001);
}

.picture_box{
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-content:center;
	text-align:center;
	transform: scale(.001);
	overflow:hidden;
}

.picture_box{margin-top:5rem;}
picture{
	display:block;
	width:100%;
	height:100%;
	overflow:hidden;
}

@media(min-width:1025px){
	.picture_box{margin-top:3remrem;}
}

@media(min-width:1367px){
	.picture_box{margin-top:0rem;}
}

.auto{
	transform: scale(1);
	-webkit-transform:scale(1);
}

.expand{animation: expand .8s linear 1 both}
@keyframes expand
{
	0% {
		transform: scale(.4);
		-webkit-transform:scale(.4);
		filter: grayscale(100%);
		background: transparent;
	}
	100% {
		transform:scale(1);
		-webkit-transform:scale(1);
		filter: grayscale(0%);
		background: rgba(205,139,135,.8);
	}
}

.expand_2{animation: expand_2 .8s linear 1 both}
@keyframes expand_2
{
	0% {
		background:rgba(205,139,135,.8);
		filter: grayscale(100%);
		-webkit-transform:scale(1.3);
		transform: scale(1.3);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		filter: grayscale(0%);
	}
}

.expand_3{animation: expand_3 .8s linear 1 both}
@keyframes expand_3
{
	0% {
		transform: scale(.2);
		-webkit-transform:scale(.2);
		background: rgba(205,139,135,.8);
		filter: grayscale(100%);
		clip-path: circle(1% at 50% 50%);
	}
	30%{
		clip-path: circle(1% at 50% 50%);
	}
	100% {
		transform:scale(1);
		-webkit-transform:scale(1);
		clip-path: circle(100% at 50% 50%);
		filter: grayscale(0%);
	}
}

.expand_4{animation: expand_4 .8s linear 1 both}
@keyframes expand_4
{
	0% {
		transform:skew(45deg, 45deg);
		-webkit-transform:skew(45deg, 45deg);
		background: rgba(205,139,135,.8);
	}
	100% {
		transform:skew(0deg, 0deg);
		-webkit-transform:skew(0deg, 0deg);
	}
}

.expand_5{animation: expand_5 1s linear 1 both}
@keyframes expand_5
{
	0% {
		filter: grayscale(100%);
		-webkit-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-perspective: 100%;
		-ms-perspective: 100%;
		-webkit-transform-origin: 0% 0%;
		transform-origin: 0% 0%;
		-webkit-transform: scale(.5,1) skew(0deg,45deg);
		transform: scale(.5,1) skew(0deg,45deg);
		background: rgba(205,139,135,.8);
	}
	100% {
		filter: grayscale(0%);
		-webkit-transform-origin: 100% 80%;
		transform-origin: 100% 80%;
		transform:scale(1) skew(0deg, 0deg);
		-webkit-transform:scale(1) skew(0deg, 0deg);
	}
}

.hide{animation: hide .8s linear 1 both}
@keyframes hide
{
	0% {
		transform: scale(.4);
		-webkit-transform:scale(.4);
		background: rgba(205,139,135,.8);
	}
	1%{
		transform:scale(.001);
		-webkit-transform:scale(.001);
		background: transparent;
	}
	100% {
		transform:scale(.001);
		-webkit-transform:scale(.001);
		background: transparent;
		z-index:-1;
	}
}