@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text&display=swap');

*{ margin: 0; padding: 0; box-sizing:border-box; transition: all 0.5s;}

html {scroll-behavior: smooth; min-height: 100%; position: relative;}
body {margin: 0; margin-bottom: 23rem;}




/* HOME */

.logo-home-contenedor {display: flex; justify-content: center; align-content: center; flex-direction: column;}
.logo-home {margin-top: 2rem; text-align: center;}

.bajar {display: flex; justify-content: center; flex-direction: column; height: 10vh;}
.abajo {color: black; transition: all 0s; font-size: 3rem;}
a.abajo:hover {color: red !important;}

.pasador {margin-top: 3rem; border-top: 7px solid black;}



/* HOME BARRA */

.barra {position: fixed; top: 0; right: 0; left: 0; background-color: black; z-index: 1}

.nav-item a {font-family: 'Catamaran', sans-serif; font-weight: bold; font-size: 1rem; line-height: 85%; letter-spacing: 2px; color: grey !important; margin: 0px 20px 0px 20px;}
.nav-item:hover a {color: red !important;}
.navbar-toggler {width: 70px; float: none; margin: 0 auto;}



/* HOME INTRO */

.intro-tit {font-family: 'Red Hat Text', sans-serif; font-size: 1.5rem; line-height: 100%; margin-top: 3.5rem; text-align: center; color: #96bf0a}
.intro {font-family: 'Catamaran', sans-serif; font-size: 1.2rem; line-height: 170%; margin-top: 2rem; padding: 0rem 0rem; text-align: center; color: grey}

.whatsapp-frase {font-family: 'Catamaran', sans-serif; font-weight: bold; font-size: 1rem; letter-spacing: 2px; margin-top: 2.7rem; margin-bottom: 0rem; text-align: center; color: grey}
.whatsapp {font-family: 'Red Hat Text', sans-serif; font-size: 2rem; letter-spacing: 0.2rem; line-height: 1rem; text-align: center; color:#96bf0a}
.whatsapp:hover a {color: red; text-decoration: none;}

.instruccion {font-family: 'Catamaran', sans-serif; font-size: 1rem; text-align: center; line-height: 100%;}
.contenedor #oculto {color: white}
.contenedor:hover #oculto {color: #D0D3D4;}

.mail-intro {font-family: 'Red Hat Text', sans-serif; font-size: 1.5rem; text-align: center; margin-top: 2rem; color: grey;}
.mail-intro a {color: #96bf0a;}
.mail-intro a:hover {color: red;}

.intro-facebook {font-family: 'Red Hat Text', sans-serif; font-size: 1rem; text-align: center; margin: 1rem 0rem 0rem; color: grey;}
.intro-facebook a {color: grey;}
.intro-facebook a:hover {color: red; text-decoration: none;}
.icon-blue {color: #3b5998}

.intro-instagram {font-family: 'Red Hat Text', sans-serif; font-size: 1rem; text-align: center; color: grey;}
.intro-instagram a {color: grey;}
.intro-instagram a:hover {color: red; text-decoration: none;}
.icon-orange {color: #e87009}



/* SECCIONES GENERAL */

.logo-secciones {width: 108px; margin-bottom: 0.5rem;}
.tit-seccion {font-family: 'Raleway', sans-serif; font-size: 4rem !important; line-height: 100%; margin-top: 8rem; text-align: center; color: #8eb829}



/* SERVICIOS */

.serv-intro {font-family: 'Catamaran', sans-serif; font-size: 1.2rem; line-height: 170%; margin-top: 1.3rem; padding: 0rem 0rem; text-align: center; color: grey}
.sub-menu-serv {text-align: center}
.boton-serv-menu {color: grey; background-color: #ffffff; border-color: #8eb829; margin: 1rem 0.5rem;}

:target {display: block; position: relative; top: -3rem; visibility: hidden;}

.linea {margin-top: 3rem;}
.tit-serv {font-family: 'Raleway', sans-serif; font-size: 2.5rem; line-height: 100%; margin-top: 2.5rem; text-align: center; color: grey}
#galeria-serv {display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1rem; margin-bottom: 2rem; padding: 0 60px;}
.serv-descripcion {font-family: 'Catamaran', sans-serif; font-size: 1rem; line-height: 150%; margin-top: 0.2rem; text-align: center; color: grey}
.boton-serv-contenedor {text-align: center}
.boton-serv {background-color: #b1b1b5; border-color: #b1b1b5}

.contenedor-img {overflow: hidden; position: relative; cursor: default; background: #fff; flex: 25%; padding: 0 4px; max-width: 355px;}
.contenedor-img .mascara,.contenedor-img .contenido {position: absolute; overflow: hidden; top: 0; left: 0;}
.contenedor-img img {margin-top: 8px; display: block; position: relative; vertical-align: middle;}
.efecto .mascara {background-color: rgba(250, 250, 250, 0.3); width: 700px; padding: 60px; height: 700px; opacity: 1; transform: translate(300px, 200px) rotate(45deg); transition: all 0.3s ease-in-out;}
.efecto:hover .mascara {opacity:1; transform: translate(-96px, -120px) rotate(45deg);}


/* FOTOS */

.tit-fotos {font-family: 'Raleway', sans-serif; font-size: 2.5rem; line-height: 100%; margin-top: 2.5rem; text-align: center; color: grey}

#galeria-fotos {display: flex; flex-wrap: wrap; justify-content: center; margin-top: 2rem; margin-bottom: 2.5rem; padding: 0 60px;}
.contenedor-img-fotos {overflow: hidden; position: relative; cursor: default; background: #fff; flex: 33%; padding: 0 4px; max-width: 406px;}
.contenedor-img-fotos .mascara,.contenedor-img-fotos .contenido {position: absolute; overflow: hidden; top: 0; left: 0;}
.contenedor-img-fotos img {margin-top: 8px; display: block; position: relative; vertical-align: middle;}
.efecto .mascara {background-color: rgba(250, 250, 250, 0.3); width: 700px; padding: 60px; height: 700px; opacity: 1; transform: translate(300px, 200px) rotate(45deg); transition: all 0.3s ease-in-out;}
.efecto:hover .mascara {opacity:1; transform: translate(-96px, -120px) rotate(45deg);}



/* CONTACTO */

.formulario {max-width: 35%; text-align: center;}
.formulario article {margin-top: 1rem; margin-bottom: 3rem;}
.form-group {text-align: left !important;}
.form-tit {font-family: 'Catamaran', sans-serif; font-size: 1.1rem; color: black !important; margin-bottom: 0rem;}
.btn-primary {background-color: #8eb829; border-color: #b4e244 #8eb829 #7c9c2d; margin-top: 1.5rem; margin-bottom: 1.5rem;}
.btn-primary:hover {background-color: #a8da30; border-color: #c9f75a #a8da30 #a8d833;}
.btn-primary:active {background-color: #a8da30 !important; border-color: #c9f75a #a8da30 #a8d833 !important;}
.gracias {font-family: 'Catamaran', sans-serif; font-size: 3rem; line-height: 110%; color: black !important; margin-top: 4rem; margin-bottom: 4rem;}





/* PIE */

.pie-contenedor {position: absolute; bottom: 0; right: 0; left: 0; background-color: #fff5c9; margin-top: 4rem; padding: 3rem 0rem 2rem;}
.pie-isotipo {text-align: center;}
.pie-txt {font-family: 'Red Hat Text', sans-serif; font-size: 1rem; color: grey; text-align: center; line-height: 140%; margin-top: 1rem}
.pie-txt a {color: grey;}
.pie-txt a:hover {color: red;}
.pie-creditos {font-family: 'Red Hat Text', sans-serif; font-size: 0.75rem; color: grey !important; text-align: center; line-height: 120%; margin-top: 1rem}










@media(max-width: 1200px){

.formulario {max-width: 100%; text-align: center;}

}


@media(max-width: 992px){

/* ----- CONTACTO */

.formulario {max-width: 100%; text-align: center;}


}



@media(max-width: 768px){

/* ----- GALERIA */

#galeria-serv {margin-top: 2rem; padding: 0 10px; }

#galeria-fotos {margin-top: 2rem; padding: 0 10px; }
.contenedor-img-fotos {flex: 50%; padding: 0 8px;}

}



@media(max-width: 576px){

.navbar-nav {
	padding-top: 1rem;
    float:none;
    margin: 0rem auto;
    display: block;
    text-align: center;}

.logo-header {text-align: center}

.intro-tit {margin-top: 1.1rem;}
.intro {padding: 0rem; margin-top: 1.2rem;}


/* ----- SERVICIOS */

#galeria-serv {margin-top: 2rem; padding: 0 2px; }
.contenedor-img {flex: 100%; padding: 0 8px;}


/* ----- FOTOS */

#galeria-fotos {margin-top: 2rem; padding: 0 2px; }
.contenedor-img-fotos {flex: 100%; padding: 0 8px;}


/* ----- CONTACTO */

.formulario {max-width: 100%; text-align: center;}


}