/* ---------- RESET ---------- */

*, a, button {
  -webkit-tap-highlight-color: transparent;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

}

html,
body {
	width: 100%;
	min-height: 100%;
	font-family: Arial, sans-serif;
	color: white;
}
#wrapper {

	width:100%;
	

    margin: 0 auto;
	display:block;
	position:relative;


	.container {
		
		
		width: 100%;
		max-width:1400px;		

		min-height:600px;

		position:relative;

		

		&:nth-last-child(2) {
			margin-bottom:0px !important;
		}

	}
}


.line {
	position:absolute;
	top:1100px;
	left:50%;
	transform: translateX(-50%);
	background-image:url('../img/arrow.png');
	background-repeat:repeat-y;
	background-size:100% auto;

	width:40px;
	height:40px;
}


h3 a {
	color:#000;
	text-decoration:none;

}

.header {
	
	background:#000;

	img {
		position:absolute;
	 	top:50%;
	 	left:50%;
	 	transform:translateX(-50%) translateY(-50%);
		max-width:50%;
		height:auto;

	}


	h1 {
	 	position:absolute;
	 	top:50%;
	 	left:50%;
	 	transform:translateX(-50%) translateY(-50%);
	 	color:#000;
	 	margin:0;
	 	padding:0;
	 	font-family: "Barlow", sans-serif;
	 	font-weight:800;
	 	font-size:8em;
	 	line-height:0.8em;
	 }

}

.description {



	h2 {
	 	position:absolute;
	 	top:50%;
	 	left:50%;
	 	transform:translateX(-50%) translateY(-50%);
	 	color:#000;
	 	width:700px;
	 	margin:0;
	 	padding:0;
	 	font-family: "Barlow", sans-serif;
	 	font-weight:800;
	 	font-size:2.5em;
	 	text-align:center;
	 }

}

.contact {

	h3 {
	 	position:absolute;
	 	top:50%;
	 	left:50%;
	 	transform:translateX(-50%) translateY(-50%);
	 	color:#000;
	 	margin:0;
	 	padding:0;
	 	font-family: "Barlow", sans-serif;
	 	font-weight:800;
	 	font-size:2.5em;
	 	text-align:right;
	 }

}



.item {
	width:100%;
	height:300px;
	display:block;
	box-sizing:border-box;

	border:5px solid #000;
	border-bottom:0px;

	&:nth-last-child(2) {
		border-bottom:5px solid #000;
	}

	background-position: center;
	background-size: cover;
	background-repeat:no-repeat;

	transition: all .3s ease;

	min-height:300px !important;


	.image {
		width:100%;
		height:300px;
		display:block;
		
		background-position: center;
		background-size: cover cover;
		background-repeat:no-repeat;
		transition: all .3s ease;		

		/*		object-fit: cover;
		  display: block;*/


	}

	h1 {
	 	position:absolute;
	 	top:0px;
	 	left:0px;
	 	color:#fff;
	 	margin:0;
	 	padding:25px;
	 	font-family: "Barlow", sans-serif;
	 	font-weight:800;
	 	font-size:3em;
	 	z-index:999;
	}

	.short {
		position:absolute;
	 	bottom:0px;
	 	left:0px;
	 	padding:25px;
	
		color:#fff;
	 	margin:0;
	 	transition: all .3s ease;
	 	opacity:0;

	 	background: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0) 100%
);

	 	h2 {
	 		font-family: "Barlow", sans-serif;
	 	font-weight:800;
	 	font-size:2em;
	 	max-width:50%;
	 	}

	 	p {
	 		font-family: "Barlow", sans-serif;
			font-weight:200;
			font-size:1.2em;
			line-height:1.5em;
			padding-top:20px;
			max-width:50%;

			/*text-shadow:0px 0px 10px rgba(0,0,0,1);*/
	 	}
	}

	a.link { 
		position:absolute;
		bottom:0px;
		right:0px;
		color:#fff;
	 	margin:0;
	 	padding:25px;
	 	font-family: "Barlow", sans-serif;
		font-weight:400;
		font-size:1.35em;
		line-height:1.5em;
		transition:all .3s ease;
		opacity:0;
		z-index:9999;
	}

	
	 .plus {
	 	opacity:0;
	 	position:absolute;
	 	bottom:0px;

	 	right:0%;
	 	margin:0;
	 	padding:25px;
	 	display:block;
	 	color:#fff;
	 	font-size:6em;
	 	font-weight:100;
	 	cursor:pointer;	
	 	transition: all .1s ease;
	 	font-family: "Barlow", sans-serif;

	 	&:hover {
	 		transform:scale(1.3);
	 	}
	 }



	 &:hover, &.expand {
	 	cursor:pointer;

	 	a.link {
	 		opacity:1;
	 	}

	 	.short {
	 		opacity:1;
	 	}

	 	
	 	height:500px !important;
	 	


	 }

	 &.expand .plus {
	 	opacity:0;
	 }


	.desc {
	position:relative;
	background:#000;
	display:block;
	width:100%;
	box-sizing:border-box;
		p {
			position:absolute;
			width:50%;
			margin:0;
			padding:20px;
			right:0px;
			color:#fff;
			font-family: "Barlow", sans-serif;
			font-weight:100;
			font-size:1.2em;
			line-height:1.5em;
		}

		&.expand {
			height:200px;	
		}
	}

	 
}


/*@media (max-aspect-ratio: 1/1) {
  .item .image {
  	background-size:auto 100%;
  	
  }
}*/



/* ---------- PAGE LAYOUT ---------- */

#wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;

}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 768px) {

	.item .image {
		width:100%;
		height:100%;
  		background-size:100% 100%;  	
    }

	#wrapper {
	}

	.header img {
		max-width:100%;
	}

	.description h2 {
		max-width:400px;
		font-size:2em;
	}

	.item .image h2 {
		max-width:100%;
	}

	.item .desc p {
		width:100%;
		clear:both;
	}



	.item .short {
		

	 	h2 {
	 	font-size:1.2em;
	 	max-width:100%;
	 	}

	 	p {
			font-size:0.9em;
			max-width:80%;
	 	}
	}

	
}