@import url('https://fonts.googleapis.com/css?family=Oswald:400,500'); 
/* @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap'); */

/* <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap" rel="stylesheet"> */

body{
	margin: 0; padding: 0; font-family: 'Oswald', sans-serif;

}
a{text-decoration:none; color:inherit;}
a:hover{text-decoration:none; color:inherit;}
a:link{text-decoration:none; color:inherit;}
a:visited{text-decoration:none; color:inherit;}
.container{
	width: 100%;
	height: 100%;
	position:relative;
}
.logo{
	width: 262px;
	height: 262px;
	position: absolute;
	z-index: 999;
	left:50%;
	margin-left:-131px;
}
.logo img{width: 100%;}
.foto1{
	position: absolute;
	width: 50%;
	height: 100vh;
	
	background-size: cover;
	
	display: -webkit-flex;
  		display:flex;
  		-webkit-align-items: center;
        align-items: center;
 		-webkit-justify-content: center;
        justify-content: center;
	
}
.foto2{
	position: absolute;
	vertical-align: middle;
	width: 50%;
	height: 100vh;
	right: 0;
	
	background-size: cover;
	
	display: -webkit-flex;
  		display:flex;
  		-webkit-align-items: center;
        align-items: center;
 		-webkit-justify-content: center;
        justify-content: center;
	
	
}
.overlay{
	position: absolute;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, .5);
	opacity: 1;
	z-index: 2;
	 -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
	
	display: -webkit-flex;
  		display:flex;
  		-webkit-align-items: center;
        align-items: center;
 		-webkit-justify-content: center;
        justify-content: center;
	
	
}
img{margin: 0; padding: 0;}
.link{
	position: absolute; 
	text-align: center; 
	z-index: 999;
	color:#fff;
	font-size: 25px;
	vertical-align:super!important;
	
}

@media (min-width: 220px) and (max-width: 600px) and (orientation:portrait) { 
	*{font-size:18px!important;}

	.logo{
	width: 160px;
	height: 160px;
	margin-left:-80px;
	}
	
	.foto1{
	position: relative;
	width: 100%;
	height: 50vh;
		background-size: 100% 100%!important;
	}
	
	.foto2{
	position: relative;
	width: 100%;
	height: 50vh;
		
		background-size: 100% 100%!important;
	}
	
	.overlay{
	position: relative;
	width: 100%;
	height: 50vh;
    }
	
	.link{
	position: absolute; 
	text-align: center; 
	z-index: 999;
	color:#fff;
	font-size: 25px;
	vertical-align:super!important;
    }
}
@media (min-width: 768px) and (orientation: portrait) { 
	
	.logo{
	width: 200px;
	height: 200px;
	margin-left:-100px;
	}
	
	.foto1{
	position: relative;
	width: 100%;
	height: 50vh;
		background-size: 100% 160%!important;
		
		background-position: 100% -120px!important;
	}
	
	.foto2{
	position: relative;
	width: 100%;
	height: 50vh;
		background-size: 100% 150%!important;
		
		
		background-position: 100% -80px!important;
	}
	
	.overlay{
	position: relative;
	width: 100%;
	height: 50vh;
    }

}