@charset "UTF-8";
/* CSS document */
/* Descripcion: estilo para Casas Trío
Autor: Omar De Luna
actualización: oct 2023 */


* { font-family: "neue-haas-grotesk-display", sans-serif;}


.blancoC{
	color: white;
}



html{
	height: 100%;
}

body{
	/*background: url("images/slide-home.jpg") no-repeat center;
	background-size: cover;*/
	height: 100%;
	color: #555;
	overflow: hidden;
	}

body.done{
	background: #F5F1EF;
	background-size: cover;
	height: 100%;
	color: #555;
	overflow: auto;
	}


main {
	width: 100%;
	}


header{
	width: 100%;
	position: relative;
	text-align: center;
}


nav{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	z-index: 99;
	display: flex;
	justify-content: space-between;
	padding: 20px 3%;
	background: #F5F1EF;
	opacity: 0;
	width: 100%;
	position: fixed;
	top: 0;
	animation: appear 0.5s 4.5s forwards ease-in-out;    
}

.done nav{
	animation: none;
	opacity: 1;
}

@keyframes appear{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}


nav ul, .subNav1 ul, .subNav2 ul, .subNav3 ul{
	list-style: none;
	padding-top: 5px;
	text-align: left;
}

nav ul li, .subNav1 ul li, .subNav2 ul li, .subNav3 ul li{
	display: inline-block;
	margin-right: 20px;
	position: relative;
}

nav ul li a, .subNav1 ul li a, .subNav2 ul li a, .subNav3 ul li a{
	font-size: 15px;
	line-height: 24px;
	font-weight: 300;
	color: #666;
	padding: 5px 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

nav ul li a:hover, .subNav1 ul li a:hover, .subNav2 ul li a:hover, .subNav3 ul li a:hover, nav ul li a.active, .subNav1 ul li a.active, .subNav2 ul li a.active, .subNav3 ul li a.active{
	color: #000;
}

.subNav2 ul li a{
	font-size: 13px;
	line-height: 21px;
	
}


nav a img{
	margin-bottom: -3px;
}

.redes a{
	margin-left: 20px;
}

.redes a:first-child{
	display: none;
}



.logo{
}

.logo img{
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}


footer{
	width: 100%;
	list-style: none;
	padding: 25px 3%;
	background: #F5F1EF;
	position: absolute;
	bottom: 0;
	opacity: 0;
	animation: appear 0.5s 4.5s forwards ease-in-out;
	z-index: 2;
}

.done footer{
	animation: none;
	opacity: 1;
	position: relative;
}

footer p, footer a{
	font-size: 15px;
	line-height: 22px;
	text-decoration: none;
	border: 0;
}

footer img{
	margin-bottom: -5px;
	margin-right: 5px;
	display: inline-block;
}



strong{
	font-weight: 700;
}


form{
	width: 100%;
}

hr{
	width: 100%;
	margin: 40px 0;
	border-bottom: 0;
	border-top: 1px solid #999;
	display: block;
}

input[type=text], input[type=email], select{
	padding: 10px 2%;
	width: 100%;
	background: #f2f2f2;
	border: 0;
	border-radius: 5px;
	outline: none;
	color: gray;
	margin-bottom: 15px;
	line-height: 35px;
	opacity: 0.9;
}

input[type=text]:focus, input[type=email]:focus, textarea:focus{
	background: #97d700;
	color: #333;
}

textarea{
	padding: 20px 2%;
	width: 100%;
	background: #f2f2f2;
	height: 150px;
	border: 0;
	border-radius: 5px;
	outline: none;
	color: gray;
	margin-bottom: 15px;
	line-height: 35px;
	opacity: 0.9;
}

input[type=submit]{
	padding: 15px 2%;
	background: #97d700;
	width: 100%;
	border: 0;
	border-radius: 5px;
	outline: none;
	color: #333;
	cursor: pointer;
	margin-bottom: 15px;
	text-align: center;
}

input[type=submit]:hover{
	background: #096c37;
	color: white;
}

select{
	padding: 20px 2%;
	width: 100%;
	background: #f2f2f2;
	border: 0;
	border-radius: 5px;
	outline: none;
	color: gray;
	margin-bottom: 15px;
	line-height: 35px;
	opacity: 0.9;
}


	
h1{
	font-size:50px;
	line-height:55px;
	font-weight: 300;
	}



p {
	font-size:16px;
	line-height:22px;
	font-weight: 300;
	}

.big{
	font-size:19px;
	line-height:27px;
}
	
a {
	font-size:16px;
	line-height:22px;
	text-decoration: none;
	font-weight: 300;
	color: #666;
	}
	
a:hover {
	color:#000;
	}

.btn{
	display: inline-block;
	padding: 10px 20px;
	letter-spacing: 1px;
	background: #97d700;
}

.btn:hover{
	color: #fff;
	background: #096c37;
}

#menuiphone{
	display: none;
}

.whatsapp{
	position: fixed;
	right: 30px;
	bottom: 50px;
	z-index: 99999999;
}

.whatsapp:hover{
	transform: scale(1.1);
}


.Ellogo{
	position: absolute;
	z-index: 2000000000;
	top: 45%;
	text-align: center;
	overflow: hidden;
	opacity: 0;
	width: 4vw;
	left: 48vw;
	margin: 0 auto;
	animation: fade 1s 0.3s forwards ease-in-out, showing 2.5s 0.8s forwards ease-in-out, away 1s 4s forwards ease-in-out;
}

.Ellogo img{
	width: 30vw;
	
}


.subNav1{
	background: #F5F1EF;
	width: 100%;
	padding: 8px 3%;
	position: fixed;
	z-index: 3;
	top:-70px;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.subNav1.active{
	top:65px;
}

.subNav2, .subNav3{
	background: #F5F1EF;
	width: 100%;
	padding: 3px 3%;
	position: fixed;
	z-index: 2;
	top:-70px;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.subNav2.active, .subNav3.active{
	top:110px;
}


@keyframes fade{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

@keyframes showing{
	from{
		width: 4vw;
	}
	to{
		width: 30vw;
		left: 35vw;
	}
}

@keyframes moveUp{
	from{
		left:35vw;
	}
	to{
		top:20px;
		left: 3%;
	}

}

@keyframes scales{
	from{
		width: 30vw;
	}
	to{
		width: 160px;
		top: 20px;
	}
}

@keyframes scales2{
	from{
		width: 30vw;
	}
	to{
		width: 160px;
		filter: brightness(20%);
	}
}

@keyframes away{
	from{
		opacity: 1
	}
	to{
		opacity: 0;
	}
}


.slider-container {
  position: relative;
  width: 100%;
  height: 100vh; /* O la altura que prefieras */
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* Transición suave para el efecto fade (1.5 segundos) */
  transition: opacity 1.5s ease-in-out; 
  z-index: 1;
}

.slide.active {
  opacity: 1;
}



/*---------------------------------------------somos--------------------------------------*/


.proyecto{
	width: 100%;
}

.proyectoFotos{
	width: 100%;
	white-space:nowrap;
    overflow-x:auto;
	display: flex;
	padding-top: 240px;
	scroll-behavior: smooth; /* Desplazamiento fluido */
}

.proyectoFotos img{
	width: auto;
	height: 66vh;
	margin-right: 15px;
	flex-shrink: 0; /* Evita que las imágenes se compriman */
}

.done ::-webkit-scrollbar {
  width: 3px;
	height: 4px;
}
.done ::-webkit-scrollbar-track {
  border: 0;
  background-color: #fff;
}
.done ::-webkit-scrollbar-thumb {
  background: #a2a2a2;
}



/* Contenedor relativo para posicionar los botones absolutos */
.slider-wrapper {
	position: relative;
	width: 100%;
}

/* Estilo general de los botones */
.slider-btn {
	position: absolute;
	bottom: -80px;
	transform: translateY(-50%);
	z-index: 10;
	background: #F5F1EF;
	color: #666;
	border: none;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease;
}

.slider-btn:hover {
	opacity: 0.7;
}

.prev-btn { right: 75px; }
.next-btn { right: 25px; }



.SubInfo{
	position: absolute;
	top:150px;
	width: 100%;
	background: #F5F1EF;
	padding: 20px 3% 15px 3%;
	display: flex;
	z-index: 1;
}

.SubInfo div{
	margin-right: 20px;
}

.SubInfo div:first-child{
	padding-left: 10px;
}

.SubInfo p{
	font-size: 13px;
	line-height: 21px;
}


.col40{
	width: 35%;
}

#myBtn {
	visibility: hidden;
}

/*---------------------------------------------estudio--------------------------------------*/

.estudio{
	padding: 100px 3% 0 3% !important;
	justify-content: flex-start !important;
}

.estudio .col50{
	margin: 0 50px;
}


.estudio .col100{
	margin-bottom: 80px;
}

body.blancoB{
	background: #F5F1EF;
}


.menu-oculto {
  display: none;
}

.menu-oculto.active {
  display: block;
}

.estudioMovil{
	display: none !important;
}



/*---------------------------------------------contacto--------------------------------------*/


.contact{
	position: relative;
	width: 100%;
	height: 90vh;
	padding-top: 15%;
}

.contact .F-lex div:first-child{
	text-align: right;
}


.contact div img{
	margin-bottom: -4px;
	margin-right: 5px;
}



.log{
	opacity: 0;
	top:40%;
	position: absolute;
	left: calc(50% - 100px);
	animation: fade 1s 0.1s forwards ease-in-out, toRight 1s 1.1s forwards ease-in-out;
}

.dat{
	opacity: 0;
	top: 40%;
	padding-top: 50px;
	position: absolute;
	left: 50%;
	animation: fade 1s 2s forwards ease-in-out;
}

@keyframes toRight{
	from{
		transform: translateX(0px);
	}
	to{
		transform: translateX(-150px);
	}
}



.off{
	display: block;
}
	
.onMovil{
	display: none;
}

.offB{
	display: none;
}
	
.onMovilB{
	display: none;
}



@media only screen and (min-width:0px) and (max-width:767px){

header{
	width: 100%;
}


nav{
	padding: 18px 3%;
	background: white;
	opacity: 0;
	width: 100%;
	top: 0;
	animation: appear 0.5s 4.5s forwards ease-in-out;    
}

@keyframes appear{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
	
	.logo{
		width: 100%;
	}
	
	.logo img{
		width: 140px;
	}


nav ul, .subNav1 ul, .subNav2 ul{
	list-style: none;
	padding-top: 5px;
	width: 120px;
	text-align: left;
	position: fixed;
	background: transparent;
}
	
nav > ul{
	top:59px;
	left: -140px;
	background: #f2efed;
}
	
nav > ul.active{
	left: 0;
}
	
.subNav1 ul{
	background: #ede9e7;
	position: relative;
	width: auto;
}
	
.subNav2 ul{
	background: #e8e5e3;
	position: relative;
	width: auto;
	padding-left: 10px;
}

nav ul li, .subNav1 ul li, .subNav2 ul li{
	display: block;
	margin-right: 0px;
	position: relative;
	word-break: normal;
}

nav ul li a, .subNav1 ul li a, .subNav2 ul li a{
	font-size: 13px;
	line-height: 30px;
	font-weight: 300;
	color: #666;
	padding: 5px 10px;
	letter-spacing: 0.5px;
	word-break:normal;
}
	
.subNav2 ul li a{
	line-height: 15px;
	padding: 0;
}
	
.subNav2 ul li{
	margin-bottom: 10px;
}

nav ul li a:hover, .subNav1 ul li a:hover, .subNav2 ul li a:hover{
	color: #000;
}


nav a img{
	margin-bottom: -3px;
}

.redes{
	text-align: left;
	width: 120px;
	padding-left: 3%;
	position: absolute;
	left: -140px;
	top: 152px;
	background: #f2efed;
	padding-bottom: 10px;
	padding-top: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
	
.redes.active{
	left: 0;
}
	
.redes a{
	margin-left: 0px;
	display: block;
	text-align: left;
	line-height: 30px;
}

footer{
	width: 100%;
	list-style: none;
	padding: 20px 3%;
	animation: appear 0.5s 4.5s forwards ease-in-out;
}


footer p, footer a{
	font-size: 15px;
	line-height: 22px;
}

footer img{
	margin-bottom: -5px;
	margin-right: 5px;
}
	
	.project footer{
		z-index: 1;
	}

	
h1{
	font-size:50px;
	line-height:55px;
	font-weight: 300;
	}


p {
	font-size:17px;
	line-height:23px;
	font-weight: 300;
	}

.big{
	font-size:19px;
	line-height:27px;
}
	
a {
	font-size:15px;
	line-height:23px;
	text-decoration: none;
	font-weight: 300;
	color: #666;
	}
	
.btn{
	padding: 10px 20px;
}


#menuiphone{
	display: block;
	padding-right: 3%;
}

.whatsapp{
	right: 30px;
	bottom: 50px;
}


.Ellogo{
	position: absolute;
	top: 45%;
	opacity: 0;
	width: 6.5vw;
	left: 46.7vw;
	margin: 0 auto;
	animation: fade 1s 0.3s forwards ease-in-out, showing 2.5s 0.8s forwards ease-in-out, away 1s 4s forwards ease-in-out;
}

.Ellogo img{
	width: 50vw;
}


.subNav1{
	background: #ede9e7;
	width: 132px;
	padding: 20px;
	position: fixed;
	margin: 0;
	z-index: 2;
	top:50px;
	left: -145px;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.subNav1.active{
	top:50px;
	left: 108px;
}

.subNav2{
	background: #e8e5e3;
	width: 155px;
	padding: 20px 10px;
	position: fixed;
	z-index: 1;
	top:50px;
	left: -240px;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.subNav2.active{
	top:50px;
	left: 240px
}
	
.project .subNav1{
	position: absolute;
	width: 100%;
	top: 55px;
	left: 0;
	padding: 15px;
}
	
.project .subNav2{
	position: absolute;
	width: 100%;
	left: 0;
	top:100px;
}
	
.project .subNav1 ul, .project .subNav2 ul{
	margin: 0;
	padding: 0;
	background: none;
	text-align: center;
	overflow: auto;
}
	
.project .subNav1 ul li, .project .subNav2 ul li{
	display: inline-block;
	margin: 0 1px;
}
	
.project .subNav1 ul li a, .project .subNav2 ul li a{
	font-size: 10px;
	padding: 5px;
}
	
.project .subNav2 ::-webkit-scrollbar{
	display: none;
}
	
.off{
	display: none;
}
	
.onMovil{
	display: block;
}
	
@keyframes fade{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

@keyframes showing{
	from{
		width: 6.5vw;
	}
	to{
		width: 50vw;
		left: 25vw;
	}
}

@keyframes moveUp{
	from{
		left:25vw;
	}
	to{
		top:20px;
		left: 3%;
	}

}

@keyframes scales{
	from{
		width: 50vw;
	}
	to{
		width: 140px;
		top: 20px;
	}
}

@keyframes scales2{
	from{
		width: 50vw;
	}
	to{
		width: 140px;
		filter: brightness(20%);
	}
}

@keyframes away{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
	

/*---------------------------------------------estudio--------------------------------------*/

.estudio{
	padding: 100px 7% 0 7% !important;
	justify-content: flex-start !important;
}

.estudio .col50{
	width: 70% !important;
	margin: 0 50px 0 0;
}
	
.estudioMovil{
	display: block !important;
}

#InfoText{
	display: none;
}

.estudio .col100{
	margin-bottom: 40px;
}
	
.estudio .col20:nth-child(2){
	width: 100%;
	margin-bottom: 40px;
}


.menu-oculto {
  display: none;
}

.menu-oculto.active {
  display: block;
}
	
	
/*---------------------------------------------somos--------------------------------------*/


.proyecto{
	width: 100%;
}

.proyectoFotos{
	width: 100%;
	white-space:normal;
    overflow-x:auto;
	display: block;
	padding-top: 200px;
}

.proyectoFotos img{
	width: 100%;
	height: auto;
	margin-right: 0px;
	margin-bottom: 15px;
}

.done ::-webkit-scrollbar {
  width: 3px;
	height: 4px;
}
.done ::-webkit-scrollbar-track {
  border: 0;
  background-color: #fff;
}
.done ::-webkit-scrollbar-thumb {
  background: #a2a2a2;
}

.SubInfo{
	position: relative;
	top:180px;
	width: 100%;
	background: #F5F1EF;
	padding: 20px 3%;
	display: flex;
	flex-wrap: wrap;
	z-index: 0;
}

.SubInfo div{
	margin-right: 20px;
	width: 100%;
	margin-bottom: 10px;
}

.SubInfo div:first-child{
	padding-left: 0px;
}

.SubInfo p{
	font-size: 13px;
}


.col40{
	width: 35%;
}
	
.slider-btn {
	display: none;
}
	
html {
  scroll-behavior: smooth; /* Desplazamiento suave nativo */
}

#myBtn {
	visibility: visible;
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  font-size: 14px;
  border: none;
  outline: none;
  background-color: white;
  color: #666;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
	color: white;
}
	
	
/*---------------------------------------------contacto--------------------------------------*/


.contact{
	position: relative;
	width: 100%;
	height: 90vh;
	padding-top: 35%;
}

.contact .F-lex div:first-child, .contact .F-lex div:last-child{
	text-align: center;
}


.contact div img{
	margin-bottom: -4px;
	margin-right: 5px;
}



.log{
	opacity: 0;
	animation: fade 1s 0.1s forwards ease-in-out;
	position: relative;
	width: 100%;
	text-align: center;
	left: 0;
}

.log img{
	width: 100px;
}

.dat{
	opacity: 0;
	animation: fade 1s 1s forwards ease-in-out;
}
	
.dat{
	opacity: 0;
	top: 0%;
	padding-top: 50px;
	position: relative;
	text-align: center;
	width: 100%;
	left: 0%;
	animation: fade 1s 2s forwards ease-in-out;
}


}

@media only screen and (min-width:768px) and (max-width:1024px){



header{
	width: 100%;
}


nav{
	padding: 18px 3%;
	opacity: 0;
	width: 100%;
	top: 0;
	animation: appear 0.5s 4.5s forwards ease-in-out;    
}

@keyframes appear{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
	
	.logo img{
		width: 140px;
	}


nav ul, .subNav1 ul, .subNav2 ul{
	list-style: none;
	padding-top: 0px;
	text-align: left;
}

nav ul li, .subNav1 ul li, .subNav2 ul li{
	display: inline-block;
	margin-right: 15px;
	position: relative;
}

nav ul li a, .subNav1 ul li a, .subNav2 ul li a{
	font-size: 14px;
	line-height: 24px;
	font-weight: 300;
	color: #666;
	padding: 5px 10px;
	letter-spacing: 0.5px;
}

nav ul li a:hover, .subNav1 ul li a:hover, .subNav2 ul li a:hover{
	color: #000;
}


nav a img{
	margin-bottom: -3px;
}

.redes a{
	margin-left: 20px;
}

footer{
	width: 100%;
	list-style: none;
	padding: 20px 3%;
	animation: appear 0.5s 4.5s forwards ease-in-out;
}


footer p, footer a{
	font-size: 15px;
	line-height: 22px;
}

footer img{
	margin-bottom: -5px;
	margin-right: 5px;
}

	
h1{
	font-size:50px;
	line-height:55px;
	font-weight: 300;
	}


p {
	font-size:17px;
	line-height:23px;
	font-weight: 300;
	}

.big{
	font-size:19px;
	line-height:27px;
}
	
a {
	font-size:15px;
	line-height:23px;
	text-decoration: none;
	font-weight: 300;
	color: #666;
	}
	
.btn{
	padding: 10px 20px;
}


#menuiphone{
	display: none;
}

.whatsapp{
	right: 30px;
	bottom: 50px;
}


.Ellogo{
	position: absolute;
	top: 45%;
	opacity: 0;
	width: 6.5vw;
	left: 46.7vw;
	margin: 0 auto;
	animation: fade 1s 0.3s forwards ease-in-out, showing 2.5s 0.8s forwards ease-in-out, away 1s 4s forwards ease-in-out;
}

.Ellogo img{
	width: 50vw;
}


.subNav1{
	width: 100%;
	padding: 8px 3%;
	position: absolute;
	z-index: 2;
	top:-70px;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.subNav1.active{
	top:60px;
}

.subNav2{
	width: 100%;
	padding: 8px 3%;
	position: absolute;
	z-index: 1;
	top:-70px;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.subNav2.active{
	top:100px;
}
	
@keyframes fade{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

@keyframes showing{
	from{
		width: 6.5vw;
	}
	to{
		width: 50vw;
		left: 25vw;
	}
}

@keyframes moveUp{
	from{
		left:25vw;
	}
	to{
		top:20px;
		left: 3%;
	}

}

@keyframes scales{
	from{
		width: 50vw;
	}
	to{
		width: 140px;
		top: 20px;
	}
}

@keyframes scales2{
	from{
		width: 50vw;
	}
	to{
		width: 140px;
		filter: brightness(20%);
	}
}

@keyframes away{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
	
	
/*---------------------------------------------estudio--------------------------------------*/

.estudio{
	padding: 100px 7% 0 7% !important;
	justify-content: flex-start !important;
}

.estudio .col50{
	width: 70% !important;
	margin: 0 50px 0 0;
}
	
.estudioMovil{
	display: flex !important;
}

#InfoText{
	display: none;
}

.estudio .col100{
	margin-bottom: 80px;
}
	
.estudio .col20:nth-child(2){
	width: 100%;
	margin-bottom: 50px;
}


.menu-oculto {
  display: none;
}

.menu-oculto.active {
  display: block;
}
	
/*---------------------------------------------somos--------------------------------------*/


.proyecto{
	width: 100%;
}

.proyectoFotos{
	width: 100%;
	white-space:nowrap;
    overflow-x:auto;
	display: flex;
	padding-top: 300px;
}

.proyectoFotos img{
	width: auto;
	height: 63vh;
	margin-right: 15px;
}

.done ::-webkit-scrollbar {
  width: 3px;
	height: 4px;
}
.done ::-webkit-scrollbar-track {
  border: 0;
  background-color: #fff;
}
.done ::-webkit-scrollbar-thumb {
  background: #a2a2a2;
}

.SubInfo{
	position: absolute;
	top:150px;
	width: 100%;
	background: #F5F1EF;
	padding: 20px 3%;
	display: flex;
}

.SubInfo div{
	margin-right: 20px;
}

.SubInfo div:first-child{
	padding-left: 10px;
}

.SubInfo p{
	font-size: 13px;
}


.col40{
	width: 35%;
}


}

@media only screen and (min-width:1025px) and (max-width:1250px){
	
/*---------------------------------------------estudio--------------------------------------*/

.estudio{
	padding: 100px 3% 0 3% !important;
	justify-content: flex-start !important;
}

.estudio .col50{
	width: 70% !important;
	margin: 0 50px 0 0;
}


.estudio .col100{
	margin-bottom: 80px;
}
	
.estudio .col20:nth-child(2){
	width: 80%;
	margin-bottom: 50px;
}


.menu-oculto {
  display: none;
}

.menu-oculto.active {
  display: block;
}
	
	
}