html{
    height: 100% !important;
}

body{
    font-family: sans-serif !important;
    font-size: 1.2rem !important; /* puede que se requiera poner en cada texto mejor*/
    min-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
/*Diseños generales de movil*/
.grid-container > * {
    border-radius: 0% !important;
    text-align: center !important;
}
.encabezado{
    grid-area: encabezado !important;
}
.contenido1{
    grid-area: contenido1 !important;
    background-color: #fcc302;
}
.contenido2{
    grid-area: contenido2 !important;
    background-color: white;
}
.contenido3{
    grid-area: contenido3 !important;
    background-color: #fcc302;
    z-index: -1 !important;
}
.contenido4{
    grid-area: contenido4 !important;
    background-color: white;
}
.contenido5{
    grid-area: contenido5 !important;
    background-color: #fcc302;
}
.piedepagina{
    grid-area: piedepagina !important;
    background-color: #343434;
}



/*este diseño es para moviles*/
.grid-container{
    display: grid !important;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 
    "encabezado"
    "contenido1"
    "contenido2"
    "contenido3"
    "contenido4"
    "contenido5 "
    "piedepagina";
}
 @media only screen and (max-device-width : 760px){
    .grid-container{
        display: grid !important;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-template-areas: 
        "encabezado"
        "contenido1"
        "contenido2"
        "contenido3"
        "contenido4"
        "contenido5 "
        "piedepagina";
    }
    .placaN{
        display: none !important;
    }
    /*----------COMPONENTES DEL DISEÑO---------------*/
.Texto{
    text-align: center !important;
    float: left !important;
    width: 100% !important;
    margin-top: 20% !important;
 }
 .Texto h1{
     width: 100% !important;
     font-size: 1.5rem !important;
     font-weight: 800 !important;
     padding: 2% !important;
 }
 .Texto h2{
     width: 100% !important;
     font-size: 1.5rem !important;
     font-weight: 400 !important;
     padding: 2% !important;
 }
 .guardia{
     width: 100% !important;
     float: left !important;
 }
 .guardia img{
     width: 90% !important;
     margin-left: 5% !important;
     margin-top: 7% !important;
 }
 .TextoVision{
     text-align: justify !important;
    float: left !important;
    width: 100% !important;
    margin-top: 2% !important;
 }
 
 .TextoVision h1{
     width: 100% !important;
     font-size: 1.5rem !important;
     font-weight: 800 !important;
     padding: 2% !important;
 }
 
 .TextoVision h2{
     width: 100% !important;
     font-size: 1.3rem !important;
     font-weight: 400 !important;
     padding: 2% !important;
 }
 
 .fotoVision{
     width: 100% !important;
     float: left !important;
 }
 .fotoVision img{
     width: 90% !important;
     margin-left: 5% !important;
     margin-top: 7% !important;
     padding-bottom: 2% !important;
 }
 
 .Titulo{
     width: 100% !important;
     color: white !important;
     text-align: center !important;
 }
 
 .Titulo h1{
     font-size: 2.0rem !important;
     font-weight: 700 !important;
     letter-spacing: 0.4rem !important;
     padding-top: 5% !important;
     padding-bottom: 2% !important;
 }
 
 .tercio{
     width: 100% !important;
     float: left !important;
     text-align: center !important;
 }
 .imgtercio{
     width: 100% !important;
     float: left !important;
 }
 .imgtercio img{
    width: 100% !important;
    padding: 2% !important;
 }
 .textotercio{
   width: 100% !important;
   float: left !important;
 }
 .textotercio h1{
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    text-align: center !important;
 }
 
 .Titulo2{
     width: 100% !important;
     color: black !important;
     text-align: center !important;
 }
 
 .Titulo2 h1{
     font-size: 2.0rem !important;
     font-weight: 700 !important;
     letter-spacing: 0.4rem !important;
     padding-top: 5% !important;
     padding-bottom: 2% !important;
 }
 
 .textotercio2{
     width: 100% !important;
     float: left !important;
 }
 .textotercio2 h1{
     font-size: 1.2rem !important;
    font-weight: 800 !important;
    text-align: center !important;
 }
 .boton{
     width: 100% !important;
     float: left !important;
     padding: 4% !important;
 }
 .datoscontacto{
     width: 100% !important;
     float: left !important;
 }
 .iconodatos{
     width: 10% !important;
     float: left !important;
     padding-left: 11% !important;
     margin-top: 2% !important;
 }
 .info{
     width: 80% !important;
     float: left !important;
     text-align: left !important;
     padding-left: 7% !important;
     margin-top: 2% !important;
 }
 
 .info h1{
     float: left !important;
     font-size: 1.4rem !important;
     font-weight: 600 !important;
 }
 
 .mapacontacto{
     float: left !important;
     width: 100% !important;
     height: 40% !important;
     padding-bottom: 30% !important;
 }
 
 .terciopie{
    width: 25% !important;
    float: left !important;
 
 }
 .terciopie img{
    width: 90% !important;
    padding-top: 5% !important;
 }
 
 .terciopie2{
     width: 25% !important;
     float: left !important;
 }
 .terciopie2 img{
     float: left !important;
     margin-left: 2% !important;
     width: 30% !important;
     padding-top: 5% !important;
 }
 
 .terciopieC{
     width: 50% !important;
     float: left !important;
     padding-top: 1% !important;
 }
 .terciopieC h1{
     color: white !important;
     font-size: 0.7rem !important;
 }
 .terciopieC h2{
     font-size: 0.8rem !important;
 }
 
 /*------------Diseño interiores ---------------------*/
 .bloquecuatro{
    width: 50% !important;
    float: left !important;
    text-align: center !important;
}
.imagcuatro{
    width: 100% !important;
    padding-top: 14% !important;
    padding-left: 14% !important;
    padding-right: 14% !important;
    
}
.imagcuatro img{
    width: 100% !important;
    object-fit: cover !important;
}

.textocuatro{
    width: 100% !important;
    text-align: center !important;
}

.textocuatro h1{
    padding-top: 2% !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
    
}

.textocuatroBajo{
    width: 100% !important;
    text-align: center !important;
}

.textocuatroBajo h1{
    padding-top: 3% !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
    padding-bottom: 12% !important;
}

.Titulo2Serv{
    width: 100% !important;
    color: black !important;
    text-align: center !important;
}

.Titulo2Serv h1{
    font-size: 2.0rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4rem !important;
    padding-top: 25% !important;
    padding-bottom: 1% !important;
}

.dobles{
    width: 100% !important;
    text-align: center !important;
    float: left !important;
}
.imgpermisos{
    float: left !important;
    width: 100% !important;
    text-align: center !important;
    padding-bottom: 10% !important;
}
.imgpermisos img{
    width: 100% !important;
}

.mitadNosotros{
    width: 100% !important;
    float: left !important;
    margin-top: 0% !important;
}

.bloquetextoNos{
    width: 100% !important;
    text-align: left !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    padding-top: 3% !important;
    padding-bottom: 2% !important;
}

.bloquetextoNos h1{
    font-weight: 700 !important;
    padding-top: 18% !important;
    font-size: 1.8rem !important;
}

.bloquetextoNos h2{
    font-weight: 400 !important;
    font-size: 1.6rem !important;
}

.bloquetextoNos img{
    width: 80% !important;
    margin-left: 10% !important;
}

/*---------------------------------------------------*/

 
 /*----------FIN COMPONENTES DEL DISEÑO---------------*/
 }

/* diseño tabletas en vertical */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
    .grid-container{
        grid-template-columns: 100% auto;
        grid-template-rows: auto;
        grid-template-areas: 
        "encabezado "
        "contenido1 "
        "contenido2 "
        "contenido3 "
        "contenido4 "
        "contenido5 "
        "piedepagina ";
    }
}

/* diseño Escritorio */
@media only screen and (min-device-width : 1025px) {
   
    .grid-container{
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-template-areas: 
        "encabezado "
        "contenido1 "
        "contenido2 "
        "contenido3 "
        "contenido4 "
        "contenido5 "
        "piedepagina ";
    }
    .placaN{
        width: 100% !important;
        position: absolute !important;
        z-index: -1 !important;
    }
    .placaN img{
        width: 100% !important;
        padding: 2% !important;
        height: 70vh !important;
    }
/*----------COMPONENTES DEL DISEÑO---------------*/

    .Texto{
        float: left !important;
        width: 60% !important;
        text-align: left !important;
        padding-left: 11% !important;
        padding-top: 15% !important;
    }
    .Texto h1{
        font-size: 3.5rem !important;
        font-weight: 900 !important;
        color: black !important;
    }
    .Texto h2{
        font-size: 1.5rem !important;
        font-weight: 200 !important;
        color: white !important;
        margin-top: 3% !important;
    }
    .guardia{
        float: left !important;
        width: 40% !important;
        padding-top: 6% !important;
    }
    .guardia img{
        width: 100% !important;
    }
    .TextoVision{
        float: left !important;
        width: 50% !important;
        color: black !important;
        text-align: left !important;
        padding-left: 11% !important;
        padding-top: 15% !important;
    }
    
    .TextoVision h1{
        font-size: 2.8rem !important;
        font-weight: 700 !important;
        color: black !important;
    }

    .TextoVision h2{
        font-size: 1.5rem !important;
    }

    .fotoVision{
        width: 50% !important;
        float: left !important;
    }
    .fotoVision img{
        width: 80% !important;
        padding-top: 10% !important;
        padding-bottom: 10% !important;
    }

    .Titulo{
        width: 100% !important;
        color: white !important;
        text-align: center !important;
        z-index: 1 !important;
    }

    .Titulo h1{
        font-size: 3.5rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.4rem !important;
        padding-top: 5% !important;
        padding-bottom: 5% !important;
    }

    .tercio{
        width: 33.33% !important;
        float: left !important;
        text-align: center !important;
    }
    .imgtercio{
        width: 100% !important;
        padding-left: 15% !important;
        padding-right: 15% !important;
    }
    .imgtercio img{
        width: 100% !important;
    }
    .textotercio{
        width: 100% !important;
        text-align: center !important;
        color: white !important;
        padding-left: 16% !important;
        padding-right: 15% !important;
        padding-top: 5% !important;
        padding-bottom: 11% !important;
    }
    .textotercio h1{
        font-weight: 500 !important;
        font-size: 2.2rem !important;
        text-align: center !important;
    }

    .Titulo2{
        width: 100% !important;
        color: black !important;
        text-align: center !important;
    }

    .Titulo2 h1{
        font-size: 3.5rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.4rem !important;
        padding-top: 5% !important;
        padding-bottom: 2% !important;
    }

    .textotercio2{
        width: 100% !important;
        text-align: center !important;
        color: black !important;
        padding-top: 5% !important;
        padding-bottom: 5% !important;
    }
    .textotercio2 h1{
        font-weight: 700 !important;
        font-size: 1.5rem !important;
    }
    .boton{
        width: 100% !important;
        text-align: center !important;
        padding-top: 3% !important;
        padding-bottom: 2% !important;
    }
    .datoscontacto{
        width: 50% !important;
        float: left !important;
        padding-bottom: 7% !important;
    }
    .iconodatos{
        width: 10% !important;
        float: left !important;
        padding-left: 20% !important;
        margin-top: 2% !important;
    }
    .info{
        width: 80% !important;
        float: left !important;
        text-align: left !important;
        padding-left: 5% !important;
        margin-top: 2% !important;
    }
    
    .info h1{
        float: left !important;
        font-size: 1.4rem !important;
        font-weight: 600 !important;
    }

    .mapacontacto{
        float: left !important;
        width: 50% !important;
        height: 65% !important;
    }

    .terciopie{
        width: 25% !important;
        float: left !important;
        padding-top: 1% !important;
    }
    .terciopie img{
        width: 50% !important;
    }

    .terciopie2{
        width: 25% !important;
        float: left !important;
        padding-top: 1% !important;
        padding-left: 5% !important;
    }
    .terciopie2 img{
        float: left !important;
        margin-left: 2% !important;

    }

    .terciopieC{
        width: 50% !important;
        float: left !important;
        padding-top: 1% !important;
    }
    .terciopieC h1{
        color: white !important;
        font-size: 1.2rem !important;
    }
    .terciopieC h2{
        font-size: 1.2rem !important;
    }

    /*------------Diseño interiores ---------------------*/
    .bloquecuatro{
        width: 25% !important;
        float: left !important;
        text-align: center !important;
    }
    .imagcuatro{
        width: 100% !important;
        padding-top: 14% !important;
        padding-left: 14% !important;
        padding-right: 14% !important;
        
    }
    .imagcuatro img{
        width: 100% !important;
        object-fit: cover !important;
    }

    .textocuatro{
        width: 100% !important;
        text-align: center !important;
    }

    .textocuatro h1{
        padding-top: 3% !important;
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        
    }

    .textocuatroBajo{
        width: 100% !important;
        text-align: center !important;
    }

    .textocuatroBajo h1{
        padding-top: 3% !important;
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        padding-bottom: 12% !important;
    }

    .Titulo2Serv{
        width: 100% !important;
        color: black !important;
        text-align: center !important;
    }

    .Titulo2Serv h1{
        font-size: 3.5rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.4rem !important;
        padding-top: 7% !important;
        padding-bottom: 1% !important;
    }

    .dobles{
        width: 100% !important;
        text-align: center !important;
        float: left !important;
    }
    .imgpermisos{
        float: left !important;
        width: 50% !important;
        text-align: center !important;
        padding-bottom: 10% !important;
    }

    .mitadNosotros{
        width: 50% !important;
        float: left !important;
        margin-top: 7% !important;
    }

    .bloquetextoNos{
        width: 100% !important;
        text-align: left !important;
        padding-left: 5% !important;
        padding-right: 5% !important;
        padding-top: 3% !important;
        padding-bottom: 2% !important;
    }

    .bloquetextoNos h1{
        font-weight: 700 !important;
        padding-top: 2% !important;
        font-size: 1.8rem !important;
    }

    .bloquetextoNos h2{
        font-weight: 400 !important;
        font-size: 1.6rem !important;
    }

    .bloquetextoNos img{
        width: 60% !important;
        margin-left: 20% !important;
    }
   
    /*---------------------------------------------------*/


    /*----------FIN COMPONENTES DEL DISEÑO---------------*/
}
/* Diseño pantllas arriba de los 1700px */
/*solo cambio la parte del tamaño de las letras */ 
@media only screen and (min-device-width : 1700px) {
    body{
        font-family: sans-serif !important;
        font-size: 2.5rem !important; /* puede que se requiera poner en cada texto mejor*/
        min-height: 100% !important;
    }
}

/* diseño tabletas en horizontal en caso de ser necesario */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){

}