body{margin: 0; font-family: 'Lato', sans-serif !important;}

.section{display: flex;}

.head{background: #fff; text-align: center; padding: 0px 15px; box-shadow: -3px -5px 3px 0px #000; height: 120px; max-height: 120px; display: flex; position: relative; z-index: 99; justify-content: center; align-items: center; -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5); box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);}
.head img{width: 210px;}
.home1{position: relative;background: url('../archivos/lago.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; width: 50%;     height: calc(100vh - 120px);}
.home2{position: relative;background: url('../archivos/interlomas.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; width: 50%;     height: calc(100vh - 120px);}

.blend-left{position: absolute; width: 100%; height: 100%; background: rgba(11, 108, 65, .80); top: 0; left: 0; mix-blend-mode: multiply;}
.border-left{position: absolute; width: 100%; height: 100%; background: transparent; top: 0; left: 0; opacity: 0;}

.blend-right{position: absolute; width: 100%; height: 100%; background: rgba(0, 51, 28, .80); top: 0; left: 0; mix-blend-mode: multiply;}
.border-right{position: absolute; width: 100%; height: 100%; background: transparent; top: 0; left: 0; opacity: 0;}

/*Logos*/
.cont-logo{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99;}
.logo-lago, .logo-interlomas{width: 260px; height: 140px;}
.btn-transparent{text-decoration: none; color: #FFF; position: relative; padding: 10px 20px; border: 1px solid #fff; display: block; top: 40px; text-align: center; max-width: 180px; margin: 0 auto;}
.btn-transparent:hover{color: #0b6c41; background: #fff; transition: all .5s ease-in-out; text-decoration: none;}



/*hover*/
.home1:hover .blend-left{width: 70%; height: 70%; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .1s ease-in-out;}
.home1:hover .border-left{opacity: 1; width: 70%; height: 70%; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid #fff; transition: all .1s ease-in-out;}
.home1:hover .logo-lago, .home1:hover .btn-transparent{transform: scale(1.1); transition: all .1s ease-in-out;}

.home2:hover .blend-right{width: 70%; height: 70%; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .1s ease-in-out;}
.home2:hover .border-right{opacity: 1; width: 70%; height: 70%; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid #fff; transition: all .1s ease-in-out;}
.home2:hover .logo-interlomas, .home2:hover .btn-transparent{transform: scale(1.1); transition: all .1s ease-in-out;}

@media only screen and (max-width: 800px){
	.head{height: 16vh; max-height: 16vh;}
	.head img{max-width: 100%;}
	.section{display: block;}
	.home1, .home2{width: 100%;}
	.home1:hover .blend-left, .home2:hover .blend-right{width: 100%; height: 100%;}
	.border-left, .border-right{display: none;}
	.head img{width: 175px;}
	.home1:hover .logo-lago, .home1:hover .btn-transparent, .home2:hover .logo-interlomas, .home2:hover .btn-transparent{transform: none;}
	.cont-logo{width: 100%; text-align: center; margin-top: -10px;}

}


/* Mobile */
@media only screen and (max-width: 767px) {

	.home1 {
    height: 42vh;
}

.home2 {
    height: 42vh;
}
.logo-lago, .logo-interlomas{
    width: 190px !important;
}
.btn-transparent {
    max-width: 180px !important;
    top: 0px !important;
}
}
