/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */


/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */


/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}


/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}


/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}


/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/*body----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

html {
    
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 300;
    overflow-x: hidden;
    
}


*,
*:before,
*:after {
    box-sizing: inherit;
}

img {
    width: 100%;
}

.contenedor {

    max-width: 1200px;
    margin: 50px auto;
    
}

@media (max-width: 1200px) {

    .contenedor {
       
        margin: 50px 10px;
        
    }
    
}

h1 {

    margin: 0;
    font-size: 60px;

}

/*header------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.header-principal {

    position: fixed;
    z-index: 50;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: white;
    width: 100%;
    transition: 1s;
    

}

.header-principal.abajo {

    position: fixed;
    z-index: 50;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: rgba(221, 221, 221, 0.95);
    width: 100%;
    transition: .5s;
    

}



@media (max-width: 968px) {

    .contenido-header {
        flex-direction: column;
        height: 500px;       
    }
    
}

.logo {
    
    margin: 0;
    flex-basis: 25%;
    padding: 0;
}

@media (max-width: 1500px) {

    .logo {    

        margin: auto;       
        
    }
}


.logo img {
    
    width: 75%;
    margin: 25px 0 25px 45px;
    transition: .5s;
   
}

.header-principal.abajo .logo img {
    
    width: 60%;
    margin: 15px 0 15px 45px;
    transition: .5s;
   
}

@media (max-width: 968px) {

    .logo img {
        
        margin-top: 50px;
        width: 400px;
       
    }
}

@media (max-width: 480px) {

    .logo img {
    
        width: 250px;
       
    }
}


.navegacion {
    flex-basis: 75%;
    text-align: right;
    margin: auto;
}


.navegacion ul{
    list-style: none;
    padding: 0;
}


.menu a {
    margin-right: 30px;
    font-size: 25px;
    color: rgb(0, 0, 0);
    text-decoration: none;
}

.menu span, .menu-servicios span {

    color: #b93030;
    font-weight: 900;
    text-decoration-color: #b93030;
}

@media (max-width: 1500px) {

    .menu a {
        margin-right: 0px;
               
    }
}

@media (max-width: 968px) {

    .menu a {
        margin-right: 1px;
        font-size: 20px;
        
    }
}

.menu li a:hover {
    
    color: #b93030;      
    
}



@media (max-width: 968px) {

    .menu li a:hover {    
        
        font-size: 20px;
        
    }
}

.menu li:hover .submenu {
    
    display: block;
    font-size: 25px;
    
}

.menu > li {
    position: relative;    
    display: inline-block;
    text-align: left;
    margin-right: 50px;
}

@media (max-width: 968px) {

    .menu > li {
        margin-right: 10px;
    }
}

.submenu {
    position: absolute;
    padding: 0;
    display: none;
    list-style: none;
   }

.submenu li a {
    display: block;
    padding: 15px 0;
    width: 150%;
    font-size: 20px;
    background-color: rgba(221, 221, 221, 0.911);
    text-align: center;
    border-bottom: rgb(255, 255, 255) solid 3px;
    
   }

   @media (max-width: 968px) {

    .submenu li a {
        padding: 2px;
        font-size: 20px;
        width: 250%;        
       }
}

.submenu li a:hover {
    
    color: #b93030;
    font-weight: bold;
    
    
}

/*banner-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.banner {
    
    height: 100vh;
    background-image: url(../img/jezael-melgoza-KbR06h9dNQw-unsplash.jpg);
    background-position: center bottom;
    background-size: cover;
}


/* nosotros----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.nosotrosDes {

    text-align: justify;

}

.nosotrosDes .titulo{
  font-size: 60px;
}

@media (max-width: 968px) {

    .columna-izquierda .titulo {
        
        font-size: 50px;
        width: 100%;
       
    }
    
}


@media (max-width: 968px) {

    .columna-derecha img {
        height: 350px;
        object-fit: cover;
               
    }
    
}

.nosotros {
    margin: 100px auto 150px auto;
    height: 100%;
    flex-direction: row;
    justify-content: space-between;
}

@media (max-width: 968px) {

    .nosotros {
        margin: 25px auto;
        display: flex;
        flex-direction: column;
        
    }
    
}


/* preguntas ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.contenedor-preguntas{
    position: relative;
    display: flex;
    margin: 50px 0;
    justify-content: center;
    
}

@media (max-width: 968px) {

    .contenedor-preguntas{
        
        height: 600px;
    }
    
}

@media (max-width: 480px) {

    .contenedor-preguntas{
        
        height: 700px;
    }
}

.preguntas {
    flex-basis: 50%;
    max-width: 100%;
    background-image: url(../img/museum-g662cdd29c_1920.jpg);
    color: white;
    margin: 0;
    padding: 0;
    background-size: cover;
    /*animation: movimiento 40s infinite ease-in-out alternate;*/
    height:600px;
    /* clip-path: polygon(0 0, 45% 0, 40% 100%, 0 100%); */
}

@media (max-width: 968px) {

    .preguntas {
        height: 200px;
        /*clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);*/
        margin-top: 50px;
    }
    
}

.preguntas::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    background-color: rgba(255, 244, 232, 0.37);
}

@keyframes movimiento {
    from {
        background-position: bottom left;
    }
    to {
        background-position: top right;
    }
}

.secciones-preguntas {
    
    justify-content: space-between;
    flex-basis: 50%;
    text-align: justify;
    padding: 0 45px;
    margin: 0;
    
}

@media (max-width: 968px) {

    .secciones-preguntas {
    
        position: absolute;
        top: 200px;
        left: 50%;
        width: 90%;
        transform: translate(-50%);

    }
    
}

.secciones-preguntas p {
    color: rgb(0, 0, 0);
    position: relative;
    
}

.secciones-preguntas h1 {
    color: rgb(0, 0, 0);
    position: relative;
    text-shadow: 1px 3px 4px rgb(87, 87, 87);
    font-size: 60px;
}

.secciones-preguntas h2{
    
    color: rgb(0, 0, 0);
    font-size: 25px;
    margin-top: 15px;
}


/* seccion servicios*/

.lista-servicios {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.lista-servicios img {
    max-width: 25%;
}


/*especialidades--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.servicios {
    /*background-image: url(../img/city-g7200263eb_1920.jpg);*/
    padding: 0;
    margin: 45px 0 0 0;
    background-size: cover;
    /*background-color: rgb(233, 233, 233);*/
    height: 700px;
}

.servicios hr {

    margin: 10px auto 10px 50px;
    border: none;
    height: 7px;
    width: 90%;
    justify-content: center;
    background-color: #a22c2c;
    
}

.proyectos-index hr {

    margin: 0 0 10px auto;
    border: none;
    height: 7px;
    width: 80%;
    justify-content: center;
    background-color: #a22c2c;
    
}

.nosotrosDes hr {

    margin: 0 auto 50px auto;
    border: none;
    height: 7px;
    width: 60%;
    justify-content: center;
    background-color: #a22c2c;
    
}

.contenedor-preguntas hr {

    margin: 0 auto 30px auto;
    border: none;
    height: 7px;
    width: 100%;
    justify-content: center;
    background-color: #a22c2c;
    
}

.serviciosT {

    position: relative;
    
}

.contenido-servicios {

    position: relative;
    bottom: 60px;
    left: 55%;
    background-color: rgb(209, 209, 209);
    width: 350px;
    text-align: center;
    color: white;
    font-size: 15px;
    text-shadow: 1px 2px 4px rgb(80, 80, 80);
    padding: 5px;


}

.contenido-servicios h2, .contenido-serviciosI h2 {

    margin: 0px;

}

.contenido-serviciosI {

    position: absolute;
    bottom: 20px;
    left: 55%;
    background-color: rgb(209, 209, 209);
    width: 350px;
    text-align: center;
    color: white;
    font-size: 15px;
    text-shadow: 1px 2px 4px rgb(80, 80, 80);
    padding: 5px;

}


.serviciosSecI {

    max-height: 600px;

}

.serviciosSec {

    max-height: 200px;

}

.serviciosD {
    
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 33.2% 100%);
}

.serviciosI {

    position: relative;
    top: 0;
    left: 0;
    width: 60%;
    clip-path: polygon(0 0, 90% 0, 100% 110%, 0 100%);
        
}

.serviciosI:hover img {

    opacity: 80%;
    transition: 1s;
    /* filter: grayscale(1); */
    
}

.imgD:hover {
    
    opacity: 80%;
    transition: 1s;

}

.imgD {
    
    height: 200px;
    object-fit: cover;
    object-position: center;
    padding: 3.5px;
    

}



.imgI {
    
    height: 600px;
    object-fit: cover;
    object-position: left;
    padding: 5px;
}


.especialidades {

display: flex;
height: 500px;
margin: 50px 0;

}

.especialidades img{

    height: 500px;
    object-fit: cover;
    object-position: center center;    
}

.imgEspecialidadI {

    flex-basis: 35%;
       
}

.contenedorEspecialidadD {

    flex-basis: 65%;
    margin: 0 50px;
    
}

.imgEspecialidadD {

    flex-basis: 35%;
       
}

.contenedorEspecialidadI {

    flex-basis: 65%;
    margin: 0 50px;
    
}

.galeria-especialidades hr {

    margin: 0 0 10px 0;
    border: none;
    height: 3px;
    background-color: #b93030;
    width: 75%;
    margin: 0 auto;
}
/*.servicios::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(252, 252, 252, 0.37);
}*/

.servicios .titulo {
    width: 100%;
    text-align: left;
    margin: 0 0 0 50px;
    font-size: 40px;
    color: rgb(0, 0, 0);
    text-shadow: 1px 2px 4px rgb(80, 80, 80);
    position: relative;
}

.titulo {
    width: 35%;
    text-align: center;
    margin: auto;
    font-size: 40px;
    color: rgb(0, 0, 0);
    text-shadow: 1px 2px 4px rgb(80, 80, 80);
    position: relative;
}

@media (max-width: 968px) {

    .titulo {
        
        font-size: 30px;
        width: 100%;
       
    }
    
}


.galeria {
    height: 650px;
    width: 65%;
    display: flex;
    margin: 0 auto ;
    box-sizing: border-box;
    align-content: center;
}

@media (max-width: 968px) {

    .galeria {
        height: 350px;
        width: 95%;
        
    }
    
}

.galeria-especialidades h2 {

    text-align: justify;

}

/*footer especialidades-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


.footerEsp img {

    height: 550px;
    object-fit: cover;
    object-position: center;
    margin: 0;
    opacity: 95%;
    
}


.footerEsp-sec {

    display: flex;
    text-align: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}

.footerEsp {

    position: relative;
    
}

.brochure {

    background-color: rgba(99, 99, 99, 0.7);
    padding: 35px 100px;

}

/* @media (max-width: 1200px) {

    .brochure {

        padding: 35px 100px;
    
    }
    
    
} */

.brochure h2 {

    font-size: 50px;
    margin: 0;
    color: white;
    
}

.brochure hr {

    width: 100%;
    background-color: #a22c2c;
    height: 5px;
    border: none;

}

.brochure p {

    font-size: 20px;
    margin: 0;   
    color: white;     
}

.botonCon {

        background-color: #a22c2c;
        padding: 15px;
        font-weight: bold;
        font-size: 20px;
        border: none;
        border-radius: 10px;
        color: white;
        margin: 10px 0;
        cursor: pointer;        
}

.botonDes {

    background-color: #ffffff;
    padding: 15px;
    font-weight: bold;
    font-size: 20px;
    border: none;
    border-radius: 10px;
    margin: 10px 0;
    
}


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

.contacto-index {

display: flex;
margin-top: 20px;

}

@media (max-width: 968px) {

    .contacto-index {

        display: block;
              
        }
    
}



.mapa {

    flex-basis: 50%;
    display: flex;
    justify-content: center;

}

.contacto .t-secciones {

    color: rgb(253, 252, 252, 1);
    text-shadow: 1px 3px 4px rgb(2, 2, 2);
    font-size: 30px;
    margin: 0 auto;
    background-color: rgb(209, 209, 209);
    text-align: center;
    box-shadow: 5px 5px 10px rgb(160, 160, 160);
    width: 300px;
    padding: 10px;
    
    
}

.contacto .t-secciones h1{

  margin: 0px;
    
    
}

.contacto {

    margin: 100px 0;

}

.contacto-index .telefono {

    flex-basis: 50%;
    margin: 0;
    
}


/* ==========================================================================
   servicios
   ========================================================================== */

   /* HEADER ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.site-header {

 position: relative;
 top: 0;
   

}


.header-servicios {

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin: 2% auto;
    background-position: center center;
    background-size: cover;

}

@media (max-width: 968px) {

    .header-servicios {

        display: block;
        height: 5%;
        margin-top: 75px;
        
    }
    
}

.logo-servicios {
   
    margin: auto;
    flex-basis: 25%;
        
}

.logo-servicios img {
    
    width: 100%;
    padding: 0 10%;
    
}


.menu-servicios > li {
       
    display: inline-block;
    text-align: center;
    margin-right: 50px;
}

@media (max-width: 968px) {

    .menu-servicios > li {
       
    margin-right: 5px;

    }
    
}

.menu-servicios {

    padding: 0;
}

.menu-servicios a {

    margin-right: 30px;
    font-size: 25px;
    color: rgb(0, 0, 0);
    text-decoration: none;   
    
}

@media (max-width: 1300px) {

    .menu-servicios a {
        margin-right: 0px;
        font-size: 25px;
    }
    
}

@media (max-width: 968px) {

    .menu-servicios a {
        margin-right: 0px;
        font-size: 20px;
    }
    
}



.menu-servicios li a:hover {
    
    color: #b93030;
       
    
}

@media (max-width: 1300px) {

    .menu-servicios li a:hover {
    
        font-size: 25px;
                
    }
    
}

@media (max-width: 968px) {

    .menu-servicios li a:hover {
    
        font-size: 20px;
                
    }
    
}


.submenu-servicios li a:hover {
    
    color: #b93030;
    font-weight: bold;
    
    
}

@media (max-width: 968px) {

    .submenu-servicios li a:hover {
    
        
        font-size: 20px;
       
    }
    
    
}

.submenu-servicios {
    position: absolute;
    padding: 0;
    display: none;
    list-style: none;
   }

.submenu-servicios li a {

    display: block;
    padding: 15px 5px;
    width: 150%;
    font-size: 20px;
    background-color: rgba(221, 221, 221, 0.911);
    text-align: center;
    border-bottom: rgb(255, 255, 255) solid 3px;
    
   }

@media (max-width: 968px) {

    .submenu-servicios li a {
        
        font-size: 20px;       
        
       }
    
}



.menu-servicios li:hover .submenu-servicios {
    
    display: block;
    background-color: rgba(245, 245, 245, 0.884);
    width: 200px;
    z-index: 5;
       
}


.navegacion-servicios {
    flex-basis: 75%;
    text-align: right;
    margin: auto;
    z-index: 3;
}

@media (max-width: 968px) {

    .navegacion-servicios {
        
        text-align: center;
       
    }
    
    
}


/* SLIDE -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.header-branding {
    
    margin: auto;
    height: 500px;
        
}

@media (max-width: 968px) {

    .header-branding {
    
        height: 380px;
                    
    }
    
    
}

.header1, .header2 {

    position: relative;
    width: 100%;
    
    
   
    
}

.img-slide {
    
    position: absolute;    
    width: 110%;
    height: 500px;
    object-fit: cover;
    animation: zoom-out 6s linear infinite;

        
}

@media (max-width: 968px) {

    .img-slide {
    
        height: 400px;
                    
    }
    
    
}

@keyframes zoom-out {

    100%{

        width: 100%;
    }

}


.slide1 p, .slide2 p{

    position: absolute;
    left: 5%;
    top: 300px;
    width: 35%;
    background-color: rgba(245, 245, 245, 0.75);
    padding: 50px;
    font-size: 25px;
    
}

@media (max-width: 968px) {

    .slide1 p, .slide2 p{

    width: 90%;
    top: 100px;
        
    }
    
    
}

.header1 {

animation: slide1 12s linear infinite;

}

.header2 {

    animation: slide2 12s linear infinite;
    
    }


@keyframes slide1 {
    0%{
        visibility: hidden;
    }
    50%{
        visibility: hidden;
    }

    100%{
        visibility: visible;
    }
}

@keyframes slide2 {
    0%{
        visibility: visible;
    }

    50%{
        visibility: hidden;
    }

    100%{
        visibility: hidden;
    }
}

.branding-proyectos {
    
    position: relative;
}

.barra-etapasInd {

    display: block;
    
    
}

@media (max-width: 968px) {

    .barra-etapasInd {

        display: block;
                
    }
    
}

.etapaInd {

    margin: 10px auto; 
    display: flex;
    align-items: center;

}

.iconoInd {
    
flex-basis: 15%;
width: 100%;   
text-align: center;
font-size: 50px;
color: #b93030;
  
}

.descripcionInd {

    text-align: justify;
    flex-basis: 85%;
    
}

.barra-etapas {

    display: flex;
    
    
}

@media (max-width: 968px) {

    .barra-etapas {

        display: block;
                
    }
    
}

.etapa {

    margin: 50px; 
    flex-basis: 33%;
    
        
}

.icono {
    
width: 100%;   
text-align: center;
font-size: 50px;
color: #b93030;
  
}

.descripcion {

    text-align: justify;
}


.paquetes {

    display: flex;
    
}

@media (max-width: 968px) {

    .paquetes {

        display: block;
        
    }
    
}

.paquete {

    flex-basis: 33%;
    border: solid black;
    margin: 10px 20px;
    padding: 30px 15px 70px 15px;
    position: relative;  
    transition: all .2s ease-in-out;
    border-radius: 50px;  

}

@media (max-width: 968px) {

    .paquete {

        margin: 5% 10%;
        
    }
    
}

.paquete:hover {

    transform: scale(1.2);

}

@media (max-width: 968px) {

    .paquete:hover {

        transform: scale(1);
    
    }
    
}



.paquete p{

    text-align: center;
    

}

.paquete h3 {

    text-align: center;
    font-size: 30px;
    color: #EC8119;

}

.cantidad{

    font-size: 40px;
    font-weight: bold;
    
}

.paquete button {
    position: absolute;
    left: 50%;
    bottom: 4%;
    font-size: 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    color: white;
    background-color: rgb(54, 96, 173);
    transform: translate(-50%);
    cursor: pointer;
   
    

}

.precios a {

    color:  rgb(54, 96, 173);
    text-decoration: none;


    }

.galeria-p {

    display: flex;
    justify-content: space-between;
     
    
}

@media (max-width: 968px) {

    .galeria-p {

        display: block;
        
        
    }
    
}



.galeria-p img {

   height: 100%;
   object-fit: cover;
   /*border-radius: 5px;*/
   
      
}

.proyecto:hover img {

    height: 100%;
    object-fit: cover;
   /*border-radius: 5px;*/
    opacity: .6;
    
       
 }


.proyecto {

    flex-basis: 25%;
    margin: 10px;
    position: relative;
    /* box-shadow: 5px 5px 10px rgb(160, 160, 160);  */
    border: rgba(231, 231, 231, 0.637) solid 2px;
     

}

@media (max-width: 968px) {

    .proyecto {

        height: 450px;
    
    }
     
}



.contenido-proyecto {
    /*transform: rotate(360deg);*/
    display: block;
    justify-content: center;
    text-align: center;
    bottom: 5%;
    right: 5%;
    opacity: 0;
    width: 80%;
    background-color: rgb(241, 189, 143);
    position: absolute;
    margin: 0;
    border: snow 1px solid;
    /*font-weight: bold;*/
    color: rgb(0, 0, 0);
}




.proyecto:hover .contenido-proyecto {
    opacity: 100%;
    transition: all .3s ease-in-out;
}

.naranja {

    color: rgb(240, 155, 81);
    font-size: 20px;
    font-weight: bold;
}

.azul {

    color: rgb(54, 96, 173);
    font-size: 20px;
    font-weight: bold;
}


/*Seccion-nosotros------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.metodologiaE {

    margin-bottom: 150px;

}

.headerNosotros {

    position: relative;
    
}

.fondoNosotros img{

    height: 500px;
    object-fit: cover;
    object-position: center center;
    opacity: .40;
    
}

.tituloNosotros {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    
}

.ili{

    color: #a22c2c;
    
}

.desNosotros {

    display: flex;
    justify-content: center;
    align-items: center;
    
}

.Oferta h1 {

    text-align: center;
    font-size: 50px;
    
}

.Oferta hr {

    text-align: center;
    margin: 0 auto 60px auto;
    border: none;
    height: 5px;
    width: 50%;
    background-color: #a22c2c;
    
}

.nosotrosDes {

    flex-basis: 60%;

}

.imagenDes {

    flex-basis: 40%;   

}

.imagenDes img{

    height: 550px;
    padding: 0 30px;
    object-fit: cover;  

}


.etapas-meto {

    display: flex;
}

.etapa-meto {

    flex-basis: 50%;
    margin: 2px 50px;
}

@media (max-width: 968px) {

    .etapa-meto {

        flex-basis: 100%;
        margin: 0px;
    }
     
}

.etapa-metoEsp {

    flex-basis: 50%;
    margin: 2px 50px;
}

@media (max-width: 968px) {

    .etapa-metoEsp {

        flex-basis: 0%;
        margin: 0px;
    }
     
}

.icono-meto{

width: 100%;   
text-align: center;
font-size: 60px;
color: rgb(54, 96, 173);

}

.proyectos p{
    text-align: justify;
}

.urbilium {

    font-weight: lighter;
    color: black;
    
}

/*cotizador-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.titulo.cotizador {
    width: 35%;
    text-align: center;
    margin: auto;
    font-size: 70px;
    color: rgb(253, 252, 252, 1);
    text-shadow: 1px 3px 6px rgb(2, 2, 2);
    position: relative;
}

@media (max-width: 490px) {

    .titulo.cotizador {

        width: 100%;
        font-size: 50px;  

    }
     
}

.fila-calc {

    display: flex;
          
}

@media (max-width: 968px) {

    .fila-calc {

        display: block;
              
    }
     
}

.seccion-calc{

    flex-basis: 50%;
    background-color: rgb(231, 231, 231);
    margin: 10px;
    padding: 0 20px;
    box-shadow: 5px 5px 10px rgb(160, 160, 160);
    border: solid rgb(231, 231, 231) 1px;
    position: relative;
    height: 450px;
}



.variable {

    margin-bottom: 15px;
    display: block;
       
    
}


.variable p {

    
    display: inline-block;
    margin: 0px;
    
    
}

.variable label {

    
    margin-right: 25px;
    
    
}

.variable.plantilla label {

    margin: 0px;

}

.variable.plantilla input {

    margin: 0px 20px 0 0;

}

.Total {
    position: absolute;
    bottom: 0px;
    display: flex;
    width: 100%;

}

.Total h3{

    flex-basis: 50%;
    text-align: center;

}

.totalNumero {

    margin: auto;
    flex-basis: 50%;
    color: rgb(219, 116, 19);
    font-weight: bolder;
    font-size: 30px;

}

.botonCot {

margin: 25px auto 0;
width: 15%;
position: relative;
left: 50%;
transform: translate(-50%);
padding: 10px 15px;
background-color: #160099;
border: rgb(0, 0, 0) 1px solid;
border-radius: 35px;
color: white;
font-size: 25px;
box-shadow: 5px 5px 10px rgb(160, 160, 160);
cursor: pointer;
    
}


@media (max-width: 968px) {

    .botonCot {

        margin: 25px auto 0;
        width: 35%;     
            
        }
     
}

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

.contacto-page {

position: relative;
height: 750px;

}

@media (max-width: 968px) {

    .contacto-page {

        position: relative;
        height: 1200px;
        
        }
     
}

.contacto-secc {

    display: flex;
    width: 100%;  
       
}

@media (max-width: 968px) {

    .contacto-secc {

        display: block;
                           
    }
     
}

.fondo-cont {
    width: 100%;
    height: 800px;
    background-image: url(/img/pedestrians-g58629081c_1920.jpg);
    background-size: cover;
    background-position: right;
    padding: 5px 0;
    clip-path: polygon(0 0, 71% 0, 60% 100%, 0 100%);
    position: absolute;  
    
    
}

@media (max-width: 968px) {

    .fondo-cont {
        
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                        
    }
     
}

.fondo-cont::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(252, 252, 252, 0.60);
}

.contenedor-cont {
    width: 100%;
    margin: 50px auto;
    position: absolute;   
    
}

.campo {
    
    margin-bottom: 10px;

}

.campo input {

width: 100%;

}

textarea {

    width: 100%;
}

.contenedor-cont h1 {
    
    text-align: center;
    font-size: 60px;
    margin: 0 0 30px 0;
}


@media (max-width: 968px) {

    .contenedor-cont h1 {
    
        font-size: 50px;
        margin: 0 10px;
    }
     
}

@media (max-width: 490px) {

    .contenedor-cont h1 {
    
        font-size: 40px;
        
    }
     
}

.telefono {

    text-align: center; 
    font-size: 30px;
    margin-right: 5%;
    flex-basis: 50%;
    
}

@media (max-width: 968px) {

    .telefono {
       
        margin: 200px 0px 0px 0px;
        
    }
     
}

@media (max-width: 490px) {

    .telefono {
       
        margin: 150px 0px 0px 0px;
        
    }
     
}

.telefono i {

    color: rgb(130, 201, 30);
    margin-right: 15px;
    
}  

.iconos-contacto {
    display: flex;
    margin: 0;
}

.iconos-contacto h3{
    flex-basis: 33%;
    margin-top: 0;
}

.iconos-contacto i{
    flex-basis: 33%;
    color: #a22c2c;
    margin: 0;
    font-size: 60px;
    
}

/*formulario---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.formulario {
    
    background-color: rgb(209, 209, 209); 
    margin: 0 30% 0 10%;
    padding: 25px;
    flex-basis: 50%;
    border-radius: 20px;
}

@media (max-width: 968px) {

    .formulario {          
      
        margin: 5% 10% 0 10%;
        
    }
     
}

.formulario button{
    width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #a22c2c; 
    padding: 15px;
    border-radius: 20px;
    color: white;
    border: none;
}


/* footer --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.estructura-footer {

    color: white;
    width: 100%;
    height: 325px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    
}



.estructura-footer h2{

   
  margin-bottom: 0;
  font-size: 25px;
  font-weight: 550;

}

.redesS-footer {
    
    text-align: center;    

}

.footer-derecha {

    flex-basis: 70%;
    
}


.redesS-footer i{

    font-size: 65px;
    color: #000000;
    
    

}

@media (max-width: 968px) {

    .redesS-footer i {
     
    font-size: 40px;
     
    }
     
}

.menu-footer {

    
    flex-basis: 30%;
    padding-left: 10%;   
    

}

@media (max-width: 968px) {

    .menu-footer {
    
        
        padding-left: 0%;          
    
    }
    
}




.menu-footer ul{

    list-style: none;
}

@media (max-width: 968px) {

    .menu-footer ul {    
        
        padding-left: 10%;          
    
    }
    
}

.menu-footer a {

    
    color: white;
    text-decoration: none;
    font-size: 15px;
    
}

.menu-footer li {

    margin-top: 3px;

}

.menu-footer h2 {

    
    text-align: center;
    
}

.menu-footer nav {

    margin-top: 25px;

}

.corp {

    text-align: center;
    color: white;
    padding: 10px 0;
    margin: 0;
    background-color: black;
    font-size: 15px;

}

.site-footer {
    
    position: relative;
    background-color: rgb(114, 114, 114);
    bottom: 100%;
    
}

.contacto-footer {

    
    text-align: center;
    display: flex;
    font-size: 14px;

}

@media (max-width: 968px) {

    .contacto-footer {
    
        margin: 0 5px 0 20px;
    
    }
    
    
}


.logo-footer {
    flex-basis: 50%;
    margin: 25px auto;
}

.logo-footer img {

    width: 60%;

}
.datos-footer {

    flex-basis: 50%;

}

@media (max-width: 968px) {

    .logo-footer {

        width: 100%;
        margin: 25px auto;
    }
    
}

.iconos-footer {
    display: flex;
    margin: 5px 0;
    justify-content: center;
}

@media (max-width: 968px) {

    .iconos-footer {
        justify-content: space-between;
    }
    
}



.iconos-footer h3{

    flex-basis: 20%;
    
}




/* galeria - proyectos */

.proyectos-index {

    width: 100%;
    position: relative;
}

@media (max-width: 968px) {

    .proyectos-index {

        margin-top: 200px;
        display: block;
        width: 100%;
    }
    
}

.proyectos-index .t-secciones {

    text-align: right;
    /*background-color: #a22c2c;*/
    height: 100px;
    padding: 0 35px 0 0 ;
    color: rgb(5, 5, 5);
    text-shadow: 1px 2px 4px rgb(80, 80, 80);
    font-size: 35px;
    width: 100%;
}


@media (max-width: 968px) {

    .proyectos-index .t-secciones {
       
        height: 200px;        
        font-size: 40px;
        margin: 0;
    }
    
}

.proyectos-grid {
    
    width: 100%;
    display: grid;
    height: 700px;
    grid-template-columns: repeat(4,25%);
    grid-template-rows: repeat(3,33%);
    grid-template-areas: 
    "img1 img2 img2 img3"
    "img1 img5 img5 img6"
    "img4 img4 img4 img6"    
    ;
    gap: 5px;
    flex-basis: 81%;
    margin-right: 15px;
    
   
}

@media (max-width: 968px) {

    .proyectos-grid {
    
        width: 95%;
        margin:  0 auto;
        justify-content: center;         
    }
    
}

.proyectos-grid img{

    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale();
}

.proyectos-grid img:hover {

    filter: none;
    transition-duration: 1s;
}

.img-1 {

    grid-area: img1;

}

.img-2 {

    grid-area: img2;

}

.img-3 {

    grid-area: img3;

}

.img-4 {

    grid-area: img4;

}

.img-5 {

    grid-area: img5;

}

.img-6 {

    grid-area: img6;

}



/* ==========================================================================
   Helper classes
   ========================================================================== */


/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}


/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
}


/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
}


/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
    visibility: hidden;
}


/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.clearfix:after {
    clear: both;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster */
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }
    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {
        display: table-header-group;
    }
    tr,
    img {
        page-break-inside: avoid;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}