@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
html{font-size: 15px;}

html,body{
    height: 100%;
    width: 100%;
    margin: 0;
}
/* ,,,,,,,,,,,,,,,,,CABECERA,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */

.cabecera{transition: all .5s ease;padding-top:1rem;padding-bottom:1rem;position:fixed;top:0; 	background-color: rgba(7,19,48,0.8);
  left:0;width:100%;z-index:999;}
.cabecera.fondo{
	background-color:#0c2c7c;
}

.cabecera  a{
   text-decoration: none;
   color: #fff;
}

.logo_nav_container{
  display: flex;
  justify-content:space-between;
  align-items: center;
  flex-wrap: wrap;
}
.logo1:hover{
  width:5.5rem;height:auto; transition: all .5s ease;
  border-radius:50%;
  -webkit-border-radius:50%;
 
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
 }

/* ,,,,,,,,,,,MENU,,,,,,,,,,,,,,,,,,,,,,,,,  */
.ul1 {list-style: none;padding: 0px;margin: 0px;}
.ul1 li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
.ul1 li a {display: block;
  background: #000;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  white-space: nowrap;color: #fff;}

ul li a:hover {background: RGB(3, 105, 56);}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: RGB(3, 105, 56);}
li:hover li a:hover {background: #000;}
li ul li {border-top: 0px;}
.menu-icon{
  display: none;
}
/* ,,,,,,,,,,,,,,,,,footer,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */

.container_footer{
	max-width: 1170px;
	margin:auto;
    line-height: 1.5;
	font-family: 'Poppins', sans-serif;
}
.row{
	display: flex;
	flex-wrap: wrap;
}
ul{
	list-style: none;
}
.footer{
	background-color:#0c2c7c;
    padding: 70px 0;
}
.footer-col{
   width: 25%;
   padding: 0 15px;
}
.footer-col h4{
	font-size: 18px;
	color: #fff;
	text-transform: capitalize;
	margin-bottom: 35px;
	font-weight: 500;
	position: relative;
}
.footer-col h4::before{
	content: '';
	position: absolute;
	left:0;
	bottom: -10px;
	background-color: rgb(0, 0, 0);
	height: 2px;
	box-sizing: border-box;
	width: 50px;
}
.footer-col ul li:not(:last-child){
	margin-bottom: 10px;
}
.footer-col ul li a{
	font-size: 16px;
	text-transform: capitalize;
	color: #ffffff;
	text-decoration: none;
	font-weight: 300;
	color: #bbbbbb;
	display: block;
	transition: all 0.3s ease;
}
.footer-col ul li a:hover{
	color: #ffffff;
	padding-left: 8px;
}
.footer-col .social-links a{
	display: inline-block;
	height: 40px;
	width: 40px;
	background-color: rgba(255,255,255,0.2);
	margin:0 10px 10px 0;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	color: #ffffff;
	transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
	color: #24262b;
	background-color: #ffffff;
}

/*responsive*/
@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
   
}
}
@media(max-width: 574px){
  .footer-col{
    width: 50%;
    
}
}


/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
.banner{
  background-image: url(../img/); /*imagen de fondo banner*/
  background-size: cover; /*la imagen se expande a la pantalla*/
  min-height:75vh;/*altura del 100 del viewport del dispositivo*/
  background-color: rgb(0, 0, 0); /*color de fondo*/
  /*background-blend-mode: soft-light; propiedad de color*/
  animation: banner 25s infinite linear; /*animación que llama a banner, 25seg, infinito */
  }
  .banner .banner_text{
  width: 100%;
  height: 80px;
  font-weight: bold;
  color: white;
  display: flex;
  justify-content: center;
  line-height:80px;
  font-size: 60px;
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
  }
.img_baner{
  width: 35rem;
      }

  .titulo_ca1{
    padding-left: inherit;
    font-family: "Roboto Condensed", Sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 48.3px;
    color: #fff;
    text-shadow: 2px 2px red;
    margin-bottom: 2rem
      }
  .titulo_ca{
  font-family: "Roboto Condensed", Sans-serif; 
      font-size: 64.4px;
       font-weight: 700; 
      line-height: 64.4px;
      color: blue;
      text-shadow: 2px 2px #000;
      text-align:center;
     
    }
    .banner .logo_cuadrado{
       width: 22rem;
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 2;
  
    }
   .fila_banner{ padding-left: 0; display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-top: 5rem;}
/* ,,,,,,,,,,,,,,,,,,,DISEÑO PRINCIPAL BANER ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
    
h1 {
  font-family: sans-serif;
}
.olcards,
.olcards * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.olcards {
  list-style: none;
  counter-reset: cardCount;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  --cardsGap: 1rem;
  gap: var(--cardsGap);
  padding-bottom: var(--cardsGap);
}
.olcards li {
  counter-increment: cardCount;
  display: flex;
  color: white;
  --labelOffset: 1rem;
  --arrowClipSize: 1.5rem;
  margin-top: var(--labelOffset);
}

.olcards li::before {
  content: counter(cardCount, decimal-leading-zero);
  background: white;
  color: var(--cardColor);
  font-size: 2em;
  font-weight: 700;
  transform: translateY(calc(-1 * var(--labelOffset)));
  margin-right: calc(-1 * var(--labelOffset));
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 0.5em;
}

.olcards li .content {
  background-color: var(--cardColor);
  --inlinePadding: 1em;
  --boxPadding: 0.5em;
  display: grid;
  padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize))
    var(--boxPadding) calc(var(--inlinePadding) + var(--labelOffset));
  grid-template-areas:
    "icon title"
    "icon text";
  gap: 0.25em 1em;
  clip-path: polygon(
    0 0,
    calc(100% - var(--arrowClipSize)) 0,
    100% 50%,
    calc(100% - var(--arrowClipSize)) 100%,
    calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)),
    0 calc(100% + var(--cardsGap))
  );
  position: relative;
}
.olcards li .content::before {
  content: "";
  position: absolute;
  width: var(--labelOffset);
  height: var(--labelOffset);
  background: var(--cardColor);
  left: 0;
  bottom: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  filter: brightness(0.75);
}
.olcards li .content::after {
  content: "";
  position: absolute;
  height: var(--cardsGap);
  width: var(--cardsGap);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent 50%);
  left: 0;
  top: 100%;
}
.olcards li .icon {
  grid-area: icon;
  align-self: center;
  font-size: 2em;
}
.olcards li .content .title {
  grid-area: title;
  font-size: 1.25em;
  /* font-weight: 700; */
}
.olcards li .content .text {
  grid-area: text;
}

#banner .container{position:absolute;top:50%;left:0;right:0;-webkit-transform:translateY(-50%);
  -ms-transform:translateY(-50%);transform:translateY(-50%);}
  #banner .container h1{font-size:4.8rem;color:#f70202;margin:0;}
#banner .container p{font-size:1.3rem;color:#01ff41;line-height:1.5;}
#banner .banner-home{width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;}


/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */

#banner .container{position:absolute;top:40%;left:0;right:0;-webkit-transform:translateY(-40%);-ms-transform:translateY(-40%);transform:translateY(-40%);}
#banner_c{padding-top: 4rem;  height:calc(100vh - 7); }
.banner_home_c{ width:100%; height: 20rem;display:block;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;}
#banner_c .container{z-index: index 1; position:absolute;top:40%;left:0;right:0;-webkit-transform:translateY(-40%);-ms-transform:translateY(-40%);transform:translateY(-40%);}
#banner_c.container p{font-size:1.3rem;color:#FFF492;line-height:1.5;}
.container_full{width:100%;padding:0 2rem;}
.container{width:85.74%;padding:0 2rem;margin:0 auto;}
/*.centra la fila..*/
.columna_video { padding-left: 3rem;padding-right: 1rem;}
.columna{padding-left:1rem;padding-right:1rem;}
.columna_100{width:100%;}
.columna_75{width:75%;}
.columna_50{width:50%;}
.columna_41{width:41.66%;}
.columna_33{width:33.33%;}
.columna_25{width:25%;}
.columna_16{width:16.66%;}
.columna_8{width:8.33%;}
.seccion{padding-top:2rem;padding-bottom:2rem; background-color:#0e0d0da2;}
.orden{-webkit-box-ordinal-group:4;-ms-flex-order:2;order:2;}
.conteendor_cuadrado{width:100%;padding-bottom:100%;position:relative;overflow:hidden;background-color:rgb(7,19,48);cursor:pointer;}
.centrar_texto{text-align:center;}
.derecha_texto{text-align:right;}
.sin_padding{padding-right:0;padding-left:0;}
.fila{margin-left:-1rem;margin-right:-1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;}

.fila_amarilla{ background-color: #fff; border-radius: 1rem;  margin-left:-1rem;margin-right:-1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.fila.fila_centrada{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.centrar_texto{text-align: center;}
 hr {border: 3px solid #666; border-radius: 300px/10px; height: 0px; text-align: center;}
.hr2 {border: 2px solid red; border-radius: 200px/6px; height: 0px; text-align: center;}
.menu-icon{
  color:blue;
  font-size:2rem;
  padding-bottom: 0;
  margin-top: 0;
 

}
.titulo1{
  font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: #03017a;
  line-height: 48px;
}
.titulo2{
  font-size: 18px;
  line-height: 2rem;	
  font-weight: bold;
  color: #000;
 	
}

/*Formato titulos */
.titulos{
margin-top:0;
margin-bottom: 2.8rem;
text-align: center;
font-size: 2.8rem;
/*dar sombra a los titulos 
text-shadow: 20px 18px 3px rgba(182, 189, 245, 0.548); */
}
.titulo_verde {
font-size: 4rem;
text-align:center; 
font-family: Arial Black; 
color: rgb(255, 255, 255);
  -webkit-text-stroke: 2px #000;
  padding-bottom: 4rem;
}
.bnt_amarillo {
      background-color:RGB(3,105,56);
      font-family: "Open Sans", Sans-serif;
      font-size: 20px;
      font-weight: 700;
      fill: #000000;
      color: #ffffff;
      border-style: solid;
      border-radius: 8px 8px 8px 8px;
      padding: 15px 30px; 
      text-decoration: none;  
    }
    .bnt_amarillo:hover {
      background-color:RGB(0,33,89);
      fill:#030303;
      color:#ffffff;
    
    }
/* ,,,,,,,,,,,,,,,,,video,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
#proyecto_a{
	background-color:rgb(158 186 181 / 30%);
}
.video_general{
  padding-top:2rem;
  width:35rem;height: 30rem;}
  /* ,,,,,,,,,,,,,,,,,CUERPO,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
#proyecto{
	background-color:white;
    
}
#proyecto .color{
	color:black;
  margin-top: 1rem;
  
}
#proyecto .espacio{
	 
  margin-top: 1.5rem;
  
}
#proyecto .color:hover{
	color:  #013d0b;
}
#proyecto .img_p {
	width: auto;
	height: 20rem; 
   
}
/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */

/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
#proyecto1{
	background-color:rgb(227, 239, 248);  
}
#proyecto1 .color{
	color:blue ;
 padding-bottom: 1rem;
}
#proyecto1 .color:hover{
	color: #013d0b;
}
#proyecto1 .img_p {
	width: 35rem;
  height: 24rem;
  border-radius:10px ;  
}
#proyecto1 .img_p2 {
	width: 20rem;
  height: 20rem;
  border-radius:10px ;  
}
#proyecto1 .puntos {
  padding-left: 2rem;
  padding-top: 1rem;
list-style: disc;
color: #1d1d1d;
}

/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
#proyecto_exterio{padding-top: 0.7rem;background-color:#bbbbbb;}
#proyecto_exterio .contenedor_serv {width: 100%;height: 100%;font-family: sans-serif;letter-spacing: 0.03em;line-height: 1.6;font-family: 'Open Sans', sans-serif;}
#proyecto_exterio .contenedor_serv .letra_p {
  font-size: 22px;
  padding-top: 2rem;
  text-align: center;
  font-family: Roboto, Sans-serif;
  font-weight: 600;
  color: #e3eb23;
}
#proyecto_exterio .contenedor_serv .card{
   	width:auto;
    background-color:#193357;
    height:410px;
    border-radius: 8px;
    box-shadow: 0 2px 2px rgba(247, 243, 243, 0.2);
    overflow: hidden;
    margin: 2px;
    text-align: center;
    transition: all 0.25s;
}
#proyecto_exterio .contenedor_serv .card:hover{
	
	box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
	}
#proyecto_exterio .card_img{
	width: 400px;
  height: 250px;
}
#proyecto_exterio img{
	width: 370px;
  height: 250px;
}
#proyecto_exterio .contenedor_serv p{
	margin-left: 1rem;
	margin-right: 1.2rem;
	text-align: justify;
	font-size: 1rem;
  position: relative;
}
#proyecto_exterio .contenedor_serv .card_img:hover{
  transform: scale(1.2);
	
}
#proyecto_exterio .contenedor_serv .letra_p_siding {
  font-size: 15px;
  padding-top: 1.5rem;
  text-align: left;
  font-family: Roboto, Sans-serif;
  font-weight: 500;
  color:white;
}
/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
#proyecto_exterio3{padding-top: 0.7rem;background-color:#94f3b1;}
#proyecto_exterio3 .contenedor_serv {width: 100%;height: 100%;font-family: sans-serif;letter-spacing: 0.03em;line-height: 1.6;font-family: 'Open Sans', sans-serif;}
#proyecto_exterio3 .contenedor_serv .letra_p {
  font-size: 22px;
  padding-top: 2rem;
  text-align: center;
  font-family: Roboto, Sans-serif;
  font-weight: 600;
  color: #e3eb23;
}
#proyecto_exterio3 .contenedor_serv .card{
   	width:auto;
    background-color:#292828;
    height:330px;
    border-radius: 8px;
    box-shadow: 0 2px 2px rgba(247, 243, 243, 0.2);
    overflow: hidden;
    margin: 2px;
    text-align: center;
    transition: all 0.25s;
}
#proyecto_exterio3 .card_img{
	width: 400px;
  height: 250px;
}
#proyecto_exterio3 img{
	width: 370px;
  height: 250px;
}
#proyecto_exterio3 .contenedor_serv p{
	margin-left: 1rem;
	margin-right: 1.2rem;
	text-align: justify;
	font-size: 1rem;
  position: relative;
}
#proyecto_exterio3 .contenedor_serv .card_img:hover{
  transform: scale(1.1);
	
}
/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
/* ,,,,,,,,,,,,,,,,,contacto,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
#contacto_form .bnt_azul {
 
   text-align: center;
   font-size: 2.5rem;
   color: #000;  
}
#contacto_form .bnt_azul:hover {
  background-color: #013d0b;
  color: white; 
}
#contacto_form  {  
  background: linear-gradient(rgba(0 0 0 / .8),rgba(0 0 0 / .8));
    display:flex;
  justify-content: center;
  align-items: center;
 
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }
#contacto_form{ margin-top: 0; padding-top: 6rem;}
.img_contacto{ width: 28rem; padding-left: 0 ;     }

#contacto_form a{
    font-size: 2rem;
    display: block;
    text-decoration: none;
   
    margin-bottom: 1rem;
    color: rgb(248, 245, 245);
    font-weight: 700;
}
#contacto_form a i{
    color: rgb(38, 0, 255);
    margin-right: 10px;
}
#contacto_form h1{
color:#ffffff;
letter-spacing: 5px;
padding-bottom: 1rem;
font-size: 2rem;
  }

#contacto_form .num_contactos{
padding-left:2rem;
padding-top: 4rem;
}

/* ,,,,,,,,,,,,,,,,,estimate,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */

form {
  
  display:flex;
  flex-direction: column;
  text-align: center;
  gap:15px;
}

.input-box {
  position:relative;
}

.input-box > input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  outline:none;
  background: rgba(255 255 255 / .1);
  border:3px solid transparent;
  letter-spacing: 1px;
  transition:.3s;
  color:#ff0000;
  
}

.input-box > input::placeholder,
.input-box > textarea::placeholder {
  color:#ffffff;
  
}

.input-box > input:focus::placeholder,
.input-box > textarea:focus::placeholder {
  color:transparent;
}

.input-box > input:focus,
.input-box > textarea:focus {
  border-bottom:3px solid crimson;
  animation: shake .2s;
}

.input-box > textarea {
  width: 100%;
  height: 130px;
  padding: 10px;
  background: rgba(255 255 255 / .1);
  border:3px solid transparent;
  letter-spacing: 1px;
  outline: none;
  transition:.3s;
  color:#fff;
  letter-spacing: 1.5px;
}


.input-box > i {
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  right: 10px;
  color:rgba(255 255 255 / .3);
  transition: .3s;
}

.input-box > input:focus ~ i {
  color:crimson;
}

form > button {
  width: 100%;
  padding: 10px;
  outline: none;
  background: crimson;
  color:#fff;
  border:none;
  transition: .1s;
  cursor: pointer;
  font-size: 1rem;
}
form > button:hover,
.links > a:hover {
  background: rgb(172, 16, 47);
}
@keyframes shake { 
  0%, 100% {transform: translateX(0);} 
  10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 
  20%, 40%, 60%, 80% {transform: translateX(10px);} 
}
/* ,,,,,,,,,GALERIA DE IMAGENES,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
#galeria_img{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
background-color: #ecf4fb;
}
.h1g{
  text-align: center;
  position: relative;
  width: 60%;
  margin: 20px auto;
}

.h1g::before{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  background-color: black;
  top: 50%;
  z-index: -1;
}
.h1g span{
  background-color:#0088ffc0;
  padding: 0 15px;
}
.img-gallery{
  width: 80%;
  margin: 50px auto 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 30px;
}
.img-gallery img{
  width: 100%;
  cursor: pointer;
  transition: 1s;
}
.img-gallery img:hover{
  transform: scale(1.2);
}
.ful-img{
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0,0, 0.9);
  position: fixed;
  top: 0;
  left: 2;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99;
}
.ful-img span{
  position: absolute;
  top: 15%;
  right: 5%;
  font-size: 35px;
  color: #fb0505;
  cursor: pointer;
}
.ful-img img{
  width: 90%;
  max-width: 600px;
}

/* ,,,,,,,,,,,,,,galeria scroll,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
body {
	
	margin: 0;
	font-family: monospace;
}

h1 {
	color: #fff;
	text-align: center;
}

/*Estilos de la galeria*/
.galeria {
	width: 100%;
	margin: auto;
	list-style: none;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
  
}

.galeria li {
	margin: 5px;
}

.galeria img {
	width: 150px;
	height: 100px;
  
}
/* ,,,,,,,,,,,,,,,,,FORMULARIO MODAL,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */

 
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: all 0.2s ease;
	height: 100%;
	width: 100%;
	background: #0000004a;
}
 
.modal-overlay:target {
	opacity: 1;
	pointer-events: all;
}
 
.modal {
	position: fixed;
	top: 50%;
	left: 50%;
	max-width: 600px;
	width: 80%;
	transform: translate(-50%, -50%) scale(0.8);
	background: rgb(0, 0, 0);
	padding: 20px 30px;
	font-family: 'segoe ui', sans-serif;
	border-radius: 4px;
	transition: all 2s ease;
	box-shadow: 0px 8px 40px -20px black;
}
 
.modal-overlay:target .modal {
	transform: translate(-50%, -50%) scale(1);
	transition: all 0.2s ease;
}
form { display:flex; flex-direction: column; text-align: center; gap:15px;}
.input-box { position:relative;}
.input-box > input {width: 100%;height: 40px;padding: 0 10px;outline:none;background: rgba(255 255 255 / .1);border:3px solid transparent; letter-spacing: 1px;transition:.3s;color:#fff;}
.input-box > input::placeholder,.input-box > textarea::placeholder {color:#a3a3a3;}
.input-box > input:focus::placeholder,.input-box > textarea:focus::placeholder { color:transparent;}
.input-box > input:focus,.input-box > textarea:focus {border-bottom:3px solid crimson;animation: shake .2s;}
.input-box > textarea {width: 100%; height: 130px; padding: 10px; background: rgba(255 255 255 / .1); border:3px solid transparent; letter-spacing: 1px; outline: none;transition:.3s;color:#fff; letter-spacing:1.5px;}
.input-box > i { position:absolute; top:50%;transform: translateY(-50%);right: 10px;color:rgba(255 255 255 / .3);transition: .3s;}
.input-box > input:focus ~ i { color:crimson;}
 form > button {width: 100%;padding: 10px; outline: none; background: crimson; color:#fff; border:none; transition: .1s; cursor: pointer;font-size: 1rem;}
 form > button:hover,.links > a:hover {background: rgb(172, 16, 47);}

 
.modal-btn {
	margin-top: 10px;
	background: #ff0101;
	padding: 8px 14px;
	display: inline-block;
	color: #ffffff;
	text-decoration: none;
	transition: all 0.2s ease;
	border-radius: 3px;
	font-weight: 600;
	font-size: 14px;
	border: 1px solid #7fff29;
	user-select: none;
	position: relative;
	
}
 
.modal-btn:hover {
	background: #000000;
}
 
.modal-btn:focus {
	background: #ff0000;
	color: white;
}

/* ,,,,,,,,,,,,,,,,,MENU FRRE STIMATE,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
#contacto_form{background-color: #000;}
.frmcontacto .estimate {background: rgba(247, 4, 4, 0.979); border:3px solid transparent; color: #f3f0f0;font-size: 25px; text-align: center;text-transform: uppercase;}	
.frmcontacto .estimate :hover{background: rgba(247, 4, 4, 0.979); color:#000;}	
form { display:flex; flex-direction: column; text-align: center; gap:15px;}
.input-box { position:relative;}
.input-box > input {width: 100%;height: 40px;padding: 0 10px;outline:none;background: rgba(255 255 255 / .1);border:3px solid transparent; letter-spacing: 1px;transition:.3s;color:#fff;}
.input-box > input::placeholder,.input-box > textarea::placeholder {color:#a3a3a3;}
.input-box > input:focus::placeholder,.input-box > textarea:focus::placeholder { color:transparent;}
.input-box > input:focus,.input-box > textarea:focus {border-bottom:3px solid crimson;animation: shake .2s;}
.input-box > textarea {width: 100%; height: 130px; padding: 10px; background: rgba(255 255 255 / .1); border:3px solid transparent; letter-spacing: 1px; outline: none;transition:.3s;color:#fff; letter-spacing:1.5px;}
.input-box > i { position:absolute; top:50%;transform: translateY(-50%);right: 10px;color:rgba(255 255 255 / .3);transition: .3s;}
.input-box > input:focus ~ i { color:crimson;}
 form > button {width: 100%;padding: 10px; outline: none; background: crimson; color:#fff; border:none; transition: .1s; cursor: pointer;font-size: 1rem;}
form > button:hover,.links > a:hover {background: rgb(172, 16, 47);}

/* ,,,,MENU INICIO,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
.menu-horizontal{list-style: none;display: flex;}
.menu-horizontal > li > a{color: white;text-decoration: none;	}
.menu-horizontal > li:hover{background-color: red;}
.menu-vertical{position: absolute;display: none;list-style: none;width: auto;background-color:black;padding-left: 0;	}
.menu-horizontal li:hover .menu-vertical{display: block;}
.menu-vertical li:hover{background-color: rgb(245, 3, 3);}
.menu-vertical li a{display: block;color: white;text-decoration: none;padding: 15px 10px 15px 15px;left: 0;}
/* ,,,,,,,,,GALERIA DE IMAGENES,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
.image-gallery {
    
	margin-top: 0;
    text-align: center;
	background-color: rgba(248, 248, 242, 0.911);
}
.image-gallery .titulos {
   color: #000;
}
.image-gallery .titulos:hover {
	color: #fa0505;
 }
.image-gallery > div {
    columns: 4;
    gap:1rem;
    padding-top: 0.5rem;
}
.image-gallery img {
    display: block;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 1rem;
}
.image-gallery img:hover {
   display: block;
	border-radius: 5PX;
	padding: 5PX;
	border: 1PX solid #000;
	transform: scale3d(1.5rem);

}

/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */





/* ,,,,,,,,,,codigo ,,,,,celular ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */

@media (min-width:1200px){}
/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
@media (max-width:1199px){.container{width:960px;}

}
/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */

@media (max-width:991px){.container{width:750px;}
.cabecera{padding-top:0.1rem;
  padding-bottom:0.1rem;
  position:fixed;

}
}
/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
@media (max-width:767px){html{font-size:4vw;}
/* ,,,,,,,,,,,,,,,,,CELULARL GALERIA,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */

  .img-gallery{
    columns: 2;
    width:80%;
    margin: 25px auto 25px;
    display:block;
   
  }

.h1g{
  text-decoration: none;
}
.h1g::before{
  display: none;
}
.h1g span{
  padding: 0;
}
.ful-img{

height: 70vh;

}
/* ,,,,,,,,,,,,,,,,,CELULARL CABEZERA,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
.cabecera{padding-top:0.2rem;
  padding-bottom:0.2rem;
  position:fixed;

}
.ul1 {display: none; }
.ul1.show { display: block;}
.ul1 li{display: block;}
 ul li a{
  display:block;
    padding: 0.5rem 0;
    transition: all 0.4s  linear;
    border-radius: 5px;
  }
  ul li a:hover {background:RGB(3, 105, 56);}
li:hover ul {display: block; position: relative;}
li:hover li {float: none;}
li:hover a {background:RGB(3, 105, 56);}
li:hover li a:hover {background: #000;}
li ul li {border-top: 0px;}
.menu-icon{
    display: block;
    cursor: pointer;
    padding: 0.5rem 1rem;
}
/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,  */
#banner{height:70vh;}
.banner{
  background-position:center; /*posición de imagen de fondo*/
  background-blend-mode:normal; /*propiedad de color*/
}
.banner .banner-text{
  font-size: 48px;
 
}
.fila_banner{ padding-left:0;padding-top:8.5rem;}
.img_fondo_logo{ padding-left:0;padding-top:1rem;}
.img_baner{
  width: 23rem;
  
      }
.cabecera .link_logo .logo{width: 4rem;}
.container{width:100%;padding-top: 0;}
.columna_mb_100{width:100%;}

.columna_mb_50{width:50%;}
.columna_mb_41{width:41.66%;}
.columna_mb_33{width:33.33%;}
.columna_mb_25{width:25%;}
.columna_mb_16{width:16.66%;}
.columna_mb_8{width:8.33%;}
.empujar_mb_0{margin-left:0;}
.orden{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;}
.sin_padding{padding-right:0;padding-left:0;}
.titulo_ca1{
 display: none;
  
    }
.titulo_ca{
      font-size: 35px;
     font-weight: 700; 
    line-height: 45px;
  }
.titulo1{
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    font-weight:2rem;
    font-size: 2rem;
    color: #054671;
    line-height: 2rem;
}
.titulo2{font-size: 1rem; font-weight: 1.5rem; color: #000; line-height: 2remx;}
.titulo1{font-size:auto;text-align: center;padding-top: 0;}
.titulo_verde {font-size: 2.5rem;text-align:center; font-family: Arial Black; color: rgb(6, 253, 59); -webkit-text-stroke: 2px #000; padding-bottom: 16rem;}
.main{
  padding-top:0;
}
#banner_c{padding-top: 4rem;  height:calc(100vh - 7);}
#banner {padding-top: 4rem;  height:calc(100vh - 7);}
.banner_home_c{  height: 10rem;display:block;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;}

.columna_video { padding-left:0;padding-right: 3rem;}
.video_general{width:11rem;height: 12rem; padding-top: 0; margin-bottom: 0;margin-top: 0}   
#proyecto{background-color:rgba(211, 245, 224, 0.801);}
#proyecto .img_p {	width: 22rem; text-align: center;}

#proyecto1 .img_p {padding-top: 2rem;	width: 22rem; text-align: center;}

#proyecto3 .img_p {padding-top: 2rem;	width: 22rem; text-align: center;}

  #proyecto_exterio .contenedor_serv .letra_p_siding {
    font-size: 12px;
    padding-top: 1rem;
    font-weight: 300;
    color:white;
  }
  #proyecto_exterio4 .contenedor_serv .letra_p_siding {
    font-size: 13px;
   text-align: left;
    font-weight: 300;
    padding-left: 8px;
   
  }
  #proyecto_exterio4 .contenedor_serv .card{
    width:auto;
   background-color:#2f5ffa;
   height:450px;
   border-radius: 8px;  
   overflow: hidden;
   margin: 2px;
   text-align: center;
   transition: all 0.25s;
}
  
  .titulo_p3{
    font-family: "Roboto Condensed", Sans-serif;
    font-size: 35.997px;
    font-weight: 700;
    color: #fff;

      }
      .color_white{
       font-size: 1rem;
        font-family: "Open Sans", Sans-serif;
        color: #ffffff;
        padding-right: 1rem;
          }
          #contacto_form { height:auto; margin-top: 0;}
         
         
          #contacto_form .bnt_azul {
             font-size: 1.5rem;
          }
          .img_contacto{
              width: 22rem;
              margin-bottom: 0;  
           }
           #contacto_form a{
             font-size: 1.3rem;
          }
          .box-info {
            gap:15px;
        }
      
        .box-info > h1 {
            font-size: 1.5rem;
        }
            
}