* {
    margin: 0;
    padding: 0; /*margenes que agrega google por defecto*/
}
body {/*las clases que comienzan con punto son clases creadas, lo demas no*/
    font-family: Arial;
    background-color: #333333;
    font-size: 16px;
}
.contenedor > nav {
    display: block;
    padding-top: 20px;
    padding-right: 50px;
    color: white;
}
.contenedor {
    display: grid;
    grid-template-columns: 2fr 3fr; /*el tamaño de las columnas*/
    grid-template-rows: 1fr 4fr 2fr; /*el tamaño de las filas*/
    grid-gap: 5px; /*espacio entre los box*/
    grid-auto-flow: row;
    padding-right: 70px;
}
.contenedor .CuadroMenu {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    border-color: #333333;
    widht: 5px;
    border-style: solid;
}
.contenedor .ImagenIndex {
    grid-row-start: 1;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 2;
    border-color: #333333;
    border-widht: 5px;
    border-style: solid;
}
.contenedor .CuadroPrincipalIndex {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
    border-color: #333333;
    border-widht: 5px;
    border-style: solid;
}
.contenedor .Footer {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 3;
    border-color: #333333;
    border-widht: 5px;
    border-style: solid;
}
.p1{
    float: right;
    max-height: 800px;
    max-width: 500px;
    padding-top: 45px; 
    padding-right: 0px;
    min-height: 800px;
    min-width: 500px;
}
.p2{
    display: none;  
}
.contenedor .CuadroMenu h1{
    display: none;
}
.contenedor .CuadroPrincipalIndex h1{
    text-align: left;
    font-weight: 800;
    font-size: 60px;
    padding-left: 16%;
    padding-top: 16%;
}
.contenedor .CuadroPrincipalIndex h2{
    padding-top: 40px;
    padding-left: 16%;
    padding-right: 40%;
    padding-bottom: 5%;
}
.verpro{
    width: 120px; 
    height: 50px;    
    text-decoration: none;
    text-align: center;
    margin-left: 16%;
    padding: 15px;
    font-weight: 600;
    font-size: 22px;
    background-color: red;
    color: white;
    border-radius: 50px;
    border: 2px solid red;
}
.verpro:hover{
    color: white;
    background-color: #d00000;
}
.contenedor .Footer img{
    float: right;
    padding: 20px;
    padding-top: 85px;
    width: 130px; 
    height: 110px;
}
.social{
    padding-left: 16%;
    padding-top: 35px;
}



.contenedor1{
    display: grid;
    grid-template-columns: 2fr 3fr; /*el tamaño de las columnas*/
    grid-template-rows: 1fr 1fr 4fr 3fr; /*el tamaño de las filas*/
    grid-gap: 10px; /*espacio entre los box*/
    background-color: white;
}
.contenedor1 .Header {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    border-color: #333333;
    widht: 5px;
    border-style: solid;
    padding-right: 95px;
    background-color: #333333;
}
.contenedor1 .Titulo {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    border-color: white;
    widht: 5px;
    border-style: solid;
    background-color: white;
}
.contenedor1 .ImagenPrincipal {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
    border-color: white;
    widht: 5px;
    border-style: solid;
    background-color: white;
}
.contenedor1 .Texto {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    border-color: white;
    widht: 5px;
    border-style: solid;
    background-color: white;
}
.contenedor1 .ImagenesSecundarias {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    border-color: #cccbcb;
    widht: 5px;
    border-style: solid;
    background-color: #cccbcb;
    padding-left: 18%;
    padding-right: 15%;
}
.contenedor1 .Header img{
    float: left;
    padding: 20px;
    width: 110px; 
    height: 80px;
    padding-top: 18px;
    padding-right: 37%;
}
.contenedor1 .Titulo h1{
    text-align: center;
    font-size: 55px;
    padding-top: 18px;
    text-decoration: underline;
}
.contenedor1 .ImagenPrincipal img{
    max-width: 600px;
    max-height: 400px;
    padding: 0px;
    float: right;
    border: 4px solid black;
}
.contenedor1 .Texto p{
    padding-left: 60px;
    padding-right: 170px;
    padding-top: 8%;
    font-family: calibri;
    font-family: sans-serif;
    font-size: 19px;
    line-height: 1.5;
    text-indent: 35px;
}
.contenedor1 .ImagenesSecundarias img{
    max-whidth: 150px;
    max-height: 300px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5%;
    padding-right: 5%;
}

.menuPC{
    display:block;
}
.menuPhone{
    display: none;
}

.contenedor2{
    display: grid;
    grid-template-rows: 4fr 4fr 10fr 10fr 10fr; /*el tamaño de las filas*/
    grid-template-columns: 6fr 7fr;
    grid-gap: 10px; /*espacio entre los box*/
    background-color: #d8d8d8;
}
.contenedor2 .HeaderToldos {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    border-color: #333333;
    widht: 5px;
    border-style: solid;
    background-color: #333333;
    padding-right: 95px;
}
.contenedor2 .TituloToldos {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
    border-color: white;
    widht: 5px;
    border-style: solid;
    background-color: white;
}
.contenedor2 .PrimerImagenToldos {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 2;
    border-color: #d8d8d8;
    widht: 5px;
    border-style: solid;
    background-color: #d8d8d8;
}
.contenedor2 .PrimerTextoToldos {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 3;
    border-color: #d8d8d8;
    widht: 5px;
    border-style: solid;
    background-color: #d8d8d8;
}
.contenedor2 .SegundaImagenToldos {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 2;
    border-color: #d8d8d8;
    widht: 5px;
    border-style: solid;
    background-color: #d8d8d8;
}
.contenedor2 .SegundoTextoToldos {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 2;
    grid-column-end: 3;
    border-color: #d8d8d8;
    widht: 5px;
    border-style: solid;
    background-color: #d8d8d8;
}
.contenedor2 .TerceraImagenToldos {
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start: 1;
    grid-column-end: 2;
    border-color: #d8d8d8;
    widht: 5px;
    border-style: solid;
    background-color: #d8d8d8;
}
.contenedor2 .tercerTextoToldos {
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start: 2;
    grid-column-end: 3;
    border-color: #d8d8d8;
    widht: 5px;
    border-style: solid;
    background-color: #d8d8d8;
}
.contenedor2 .HeaderToldos img{
    float: left;
    padding: 20px;
    width: 110px; 
    height: 80px;
    padding-top: 20px;
    padding-right: 37%;
}
.contenedor2 .TituloToldos h1{
    text-align: center;
    font-size: 55px;
    padding-top: 18px;
    text-decoration: underline;
}
.contenedor2 .PrimerImagenToldos img{
    max-width: 500px;
    max-height: 300px;
    padding: 0px;
    float: right;
    border: 4px solid black;
}
.contenedor2 .PrimerTextoToldos h1{
    padding-left: 50px;
    padding-right: 160px;
    padding-top: 70px;
    font-size: 25px;
    font-stretch: extra-expanded;
    font-family: calibri;
    font-family: sans-serif;
}
.contenedor2 .PrimerTextoToldos p{
    padding-left: 50px;
    padding-right: 160px;
    padding-top: 20px;
    font-size: 18px;
    font-stretch: extra-expanded;
    font-family: calibri;
    font-family: sans-serif;
}
.contenedor2 .SegundaImagenToldos img{
    max-width: 500px;
    max-height: 300px;
    padding: 0px;
    float: right;
    border: 4px solid black;
}
.contenedor2 .SegundoTextoToldos h1{
    padding-left: 50px;
    padding-right: 160px;
    padding-top: 70px;
    font-size: 25px;
    font-stretch: extra-expanded;
    font-family: calibri;
    font-family: sans-serif;
}
.contenedor2 .SegundoTextoToldos p{
    padding-left: 50px;
    padding-right: 160px;
    padding-top: 20px;
    font-size: 18px;
    font-stretch: extra-expanded;
    font-family: calibri;
    font-family: sans-serif;
}
.contenedor2 .TerceraImagenToldos img{
    max-width: 500px;
    max-height: 300px;
    padding: 0px;
    float: right;
    border: 4px solid black;
}
.contenedor2 .tercerTextoToldos h1{
    padding-left: 50px;
    padding-right: 160px;
    padding-top: 70px;
    font-size: 25px;
    font-stretch: extra-expanded;
    font-family: calibri;
    font-family: sans-serif;
}
.contenedor2 .tercerTextoToldos p{
    padding-left: 50px;
    padding-right: 160px;
    padding-top: 20px;
    font-size: 18px;
    font-stretch: extra-expanded;
    font-family: calibri;
    font-family: sans-serif;
}




.btn-menu{
    display: none;
}
label{
    display:none;
    /*border: 1px solid #fff;*/
}
label:hover{
    cursor: pointer;
    //background: rgba(0,0,0,0.3); 
}
.texto4 {
    font-family: cursive;
    font-size: 20px;
}
menu{
    padding-top: 18px;
    padding-left: 65px;
}
li {
    float: left;
    display: inline-block;
    color: white;
    font-size: 20px;
    font-family: calibri;
    margin-right: 20px;
    font-weight: 600;
    font-family: sans-serif;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 20px;
    text-decoration: none;
}
li a:hover { /* cambia el color cuando apoyas el maus encima (todo el menu menos cortinas) */
    background-color: #5c5c5c;
}
.dropbtn {
    color: white;
    padding: 20px;
    font-size: 20px;
    font-family: calibri; 
    font-weight: 600;
    font-family: sans-serif;
}
.dropdown {
    position: relative;
    display: inline-block;
    margin-right: 5px;
    padding-bottom: 20px;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgb(160,160,160);
    min-width: 300px; /*tamaño del rectangulo donde van los items de abajo*/
    z-index: 1;
    top: 63px; /*espacio entre cortinas y el texto de abajo*/
}
.dropdown-content a { /* Links inside the dropdown */
    color: white;
    padding-left: 20px;  
    padding-right: 20px;
    padding-top: 17px;
    padding-bottom: 15px;
    text-align: left;
    font-size: 18px; /*tamaño letra del contenido del dropdown*/
    font-family: calibri;
    text-decoration: none;
    display: block;
    font-weight: 600;
    font-family: sans-serif;
    border-bottom: 1px solid grey;
}
.dropdown-content a:hover {background-color: #777;} /* Change color of dropdown links on hover */
.dropdown:hover .dropdown-content {display: block;} /* Show the dropdown menu on hover */
.dropdown:hover .dropbtn {background-color: #5c5c5c;} /* Change the background color of the dropdown button when the dropdown content is shown */

section {
    padding:20px;
}




@media screen and (min-width: 901px) and (max-width: 1794px){ //tablet
    
    .contenedor > nav {
        display: block;
        padding-top: 20px;
        padding-right: 50px;
        color: white;
    }
    .contenedor {
        display: grid;
        grid-template-columns: 4fr 4fr; /*el tamaño de las columnas*/
        grid-template-rows: 1fr 4fr 2fr; /*el tamaño de las filas*/
        grid-gap: 0px; /*espacio entre los box*/
        grid-auto-flow: row;
        padding-right: 0px;
    }
    .contenedor .CuadroMenu {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        border-color: #333333;
        widht: 5px;
        border-style: solid;
    }
    .contenedor .ImagenIndex {
        grid-row-start: 2;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #333333;
        border-widht: 5px;
        border-style: solid;
    }
    .contenedor .CuadroPrincipalIndex {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 2;
        grid-column-end: 3;
        border-color: #333333;
        border-widht: 5px;
        border-style: solid;
    }
    .contenedor .Footer {
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 2;
        grid-column-end: 3;
        border-color: #333333;
        border-widht: 5px;
        border-style: solid;
    }
    .p1{
        float: right;
        max-height: 650px;
        max-width: 400px;
        margin-left: 0%;
        padding-top: 10px; 
        padding-right: 0px;
        min-height: 640px;
        min-width: 390px;
    }
    .p2{
        display: none;  
    }
    .contenedor .CuadroMenu h1{
        display: none;
    }
    .contenedor .CuadroPrincipalIndex h1{
        text-align: left;
        font-weight: 800;
        font-size: 50px;
        padding-left: 10%;
        padding-top: 16%;
    }
    .contenedor .CuadroPrincipalIndex h2{
        padding-top: 40px;
        padding-left: 10%;
        padding-right: 20px;
        padding-bottom: 10%;
    }
    .verpro{
        width: 120px; 
        height: 50px;    
        text-decoration: none;
        text-align: center;
        margin-left: 10%;
        margin-top: 10%;
        padding: 15px;
        font-weight: 600;
        font-size: 22px;
        background-color: red;
        color: white;
        border-radius: 50px;
        border: 2px solid red;
    }
    .verpro:hover{
        color: white;
        background-color: #d00000;
    }
    .contenedor .Footer img{
        float: bottom;
        padding: 20px;
        padding-top: 85px;
        width: 110px; 
        height: 90px;
    }
    .menuPC{
        display:block;
    }
    .menuPhone{
        display: none;
    }


    .contenedor1{
        display: grid;
        grid-template-columns: 3fr 2fr; /*el tamaño de las columnas*/
        grid-template-rows: 1fr 1fr 4fr 3fr; /*el tamaño de las filas*/
        grid-gap: 0px; /*espacio entre los box*/
        background-color: white;
    }
    .contenedor1 .Header {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        border-color: #333333;
        widht: 5px;
        border-style: solid;
        padding-right: 0px;
        background-color: #333333;
    }
    .contenedor1 .Titulo {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        border-color: white;
        widht: 5px;
        border-style: solid;
        background-color: white;
    }
    .contenedor1 .ImagenPrincipal {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
        border-color: white;
        widht: 5px;
        margin-left: 10px;
        border-style: solid;
        background-color: white;
    }
    .contenedor1 .Texto {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
        border-color: white;
        widht: 5px;
        border-style: solid;
        background-color: white;
    }
    .contenedor1 .ImagenesSecundarias {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 4;
        grid-row-end: 5;
        border-color: #cccbcb;
        widht: 5px;
        border-style: solid;
        background-color: #cccbcb;
        padding-left: 2%;
        padding-right: 2%;
    }
    .contenedor1 .Header img{
        float: left;
        padding: 20px;
        width: 90px; 
        height: 70px;
        padding-top: 18px;
        padding-right: 0%;
    }
    .contenedor1 .Titulo h1{
        text-align: center;
        font-size: 55px;
        padding-top: 18px;
        text-decoration: underline;
    }
    .contenedor1 .ImagenPrincipal img{
        max-width: 95%;
        padding: 0px;
        float: right;
        border: 4px solid black;
    }
    .contenedor1 .Texto p{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 0px;
        font-family: calibri;
        font-family: sans-serif;
        font-size: 17px;
        line-height: 1.5;
        text-indent: 35px;
    }
    .contenedor1 .ImagenesSecundarias img{
        max-whidth: 15%;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 2%;
        padding-right: 2%;
    }



    .contenedor2{
        display: grid;
        grid-template-rows: 3fr 3fr 9fr 9fr 9fr; /*el tamaño de las filas*/
        grid-template-columns: 6fr 7fr;
        grid-gap: 10px; /*espacio entre los box*/
        background-color: #d8d8d8;
    }
    .contenedor2 .HeaderToldos {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 1;
        grid-column-end: 3;
        border-color: #333333;
        widht: 5px;
        border-style: solid;
        background-color: #333333;
        padding-right: 0px;
    }
    .contenedor2 .TituloToldos {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 3;
        border-color: white;
        widht: 5px;
        border-style: solid;
        background-color: white;
    }
    .contenedor2 .PrimerImagenToldos {
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #d8d8d8;
        widht: 5px;
        border-style: solid;
        background-color: #d8d8d8;
    }
    .contenedor2 .PrimerTextoToldos {
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 2;
        grid-column-end: 3;
        border-color: #d8d8d8;
        widht: 5px;
        border-style: solid;
        background-color: #d8d8d8;
    }
    .contenedor2 .SegundaImagenToldos {
        grid-row-start: 4;
        grid-row-end: 5;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #d8d8d8;
        widht: 5px;
        border-style: solid;
        background-color: #d8d8d8;
    }
    .contenedor2 .SegundoTextoToldos {
        grid-row-start: 4;
        grid-row-end: 5;
        grid-column-start: 2;
        grid-column-end: 3;
        border-color: #d8d8d8;
        widht: 5px;
        border-style: solid;
        background-color: #d8d8d8;
    }
    .contenedor2 .TerceraImagenToldos {
        grid-row-start: 5;
        grid-row-end: 6;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #d8d8d8;
        widht: 5px;
        border-style: solid;
        background-color: #d8d8d8;
    }
    .contenedor2 .tercerTextoToldos {
        grid-row-start: 5;
        grid-row-end: 6;
        grid-column-start: 2;
        grid-column-end: 3;
        border-color: #d8d8d8;
        widht: 5px;
        border-style: solid;
        background-color: #d8d8d8;
    }
    .contenedor2 .HeaderToldos img{
        float: left;
        padding: 20px;
        width: 90px; 
        height: 70px;
        padding-top: 20px;
        padding-right: 0%;
    }
    .contenedor2 .TituloToldos h1{
        text-align: center;
        font-size: 50px;
        padding-top: 18px;
        text-decoration: underline;
    }
    .contenedor2 .PrimerImagenToldos img{
        max-width: 400px;
        max-height: 220px;
        padding: 0px;
        float: right;
        border: 4px solid black;
    }
    .contenedor2 .PrimerTextoToldos h1{
        padding-left: 20px;
        padding-right: 160px;
        padding-top: 20px;
        font-size: 20px;
        font-stretch: extra-expanded;
        font-family: calibri;
        font-family: sans-serif;
    }
    .contenedor2 .PrimerTextoToldos p{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        font-size: 15px;
        font-stretch: extra-expanded;
        font-family: calibri;
        font-family: sans-serif;
    }
    .contenedor2 .SegundaImagenToldos img{
        max-width: 400px;
        max-height: 220px;
        padding: 0px;
        float: right;
        border: 4px solid black;
    }
    .contenedor2 .SegundoTextoToldos h1{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        font-size: 20px;
        font-stretch: extra-expanded;
        font-family: calibri;
        font-family: sans-serif;
    }
    .contenedor2 .SegundoTextoToldos p{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        font-size: 15px;
        font-stretch: extra-expanded;
        font-family: calibri;
        font-family: sans-serif;
    }
    .contenedor2 .TerceraImagenToldos img{
        max-width:400px;
        max-height: 220px;
        padding: 0px;
        float: right;
        border: 4px solid black;
    }
    .contenedor2 .tercerTextoToldos h1{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        font-size: 20px;
        font-stretch: extra-expanded;
        font-family: calibri;
        font-family: sans-serif;
    }
    .contenedor2 .tercerTextoToldos p{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        font-size: 15px;
        font-stretch: extra-expanded;
        font-family: calibri;
        font-family: sans-serif;
    }




    .btn-menu{
        display: none;
    }
    label{
        display:none;
        /*border: 1px solid #fff;*/
    }
    label:hover{
        cursor: pointer;
        //background: rgba(0,0,0,0.3); 
    }
    .texto4 {
        font-family: cursive;
        font-size: 20px;
    }
    menu{
        text-align: center;
        padding-top: 20px;
        padding-left: 15px;
    }
    li {       
        text-align: center;
        float: none;
        color: white;
        font-size: 20px;
        font-family: calibri;
        margin-right: 15px;
        font-weight: 600;
        font-family: sans-serif;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 15px;
        text-decoration: none;
    }
    li a:hover { /* cambia el color cuando apoyas el maus encima (todo el menu menos cortinas) */
        background-color: #5c5c5c;
    }
    .dropbtn {
        color: white;
        padding: 15px;
        font-size: 20px;
        font-family: calibri; 
        font-weight: 600;
        font-family: sans-serif;
    }
    .dropdown {
        position: relative;
        display: inline-block;
        margin-right: 5px;
        padding-bottom: 20px;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: rgb(160,160,160);
        min-width: 300px; /*tamaño del rectangulo donde van los items de abajo*/
        z-index: 1;
        top: 54px; /*espacio entre cortinas y el texto de abajo*/
    }
    .dropdown-content a { /* Links inside the dropdown */
        color: white;
        padding-left: 20px;  
        padding-right: 20px;
        padding-top: 17px;
        padding-bottom: 15px;
        text-align: left;
        font-size: 18px; /*tamaño letra del contenido del dropdown*/
        font-family: calibri;
        text-decoration: none;
        display: block;
        font-weight: 600;
        font-family: sans-serif;
        border-bottom: 1px solid grey;
    }
    .dropdown-content a:hover {background-color: #777;} /* Change color of dropdown links on hover */
    .dropdown:hover .dropdown-content {display: block;} /* Show the dropdown menu on hover */
    .dropdown:hover .dropbtn {background-color: #5c5c5c;} /* Change the background color of the dropdown button when the dropdown content is shown */

    section {
        padding:20px;
    }
}





@media screen and (max-width: 900px){ //celu
    .checkboxmenu{
        display: inline-block;
        justify-content: space-between;
    }
    .contenedor .nav {
        display: inline-block;
        color: white;
    }
    .contenedor {
        display: grid;
        grid-template-columns: 1fr; /*el tamaño de las columnas*/
        grid-template-rows: 2fr 6fr 7fr 4fr; /*el tamaño de las filas*/
        grid-gap: 0px; /*espacio entre los box*/
        grid-auto-flow: row;
        padding-right: 0px;
    }
    .contenedor .CuadroMenu {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        border-color: #333333;
        widht: 5px;
        border-style: none;
        padding-top: 0px;
        padding-right: 0px;
        background-color: #333333;
        max-width: 500px;
    }
    .contenedor .ImagenIndex {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #333333;
        border-widht: 5px;
        border-style: solid;
        padding-top: 0px;
        padding-right: 0px;
        background-color: #333333;
    }
    .contenedor .CuadroPrincipalIndex {
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #333333;
        border-widht: 5px;
        border-style: solid;
        padding-top: 0px;
        padding-right: 0px;
        border-bottom-color: grey;
    }
    .contenedor .Footer {
        grid-row-start: 4;
        grid-row-end: 5;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #333333;
        border-widht: 5px;
        border-style: solid;
        padding-top: 0px;
        padding-right: 0px;
    }
    .p1{
        display: none;
    }
    .p2{
        /*float: none;*/
        margin-left: 0px;
        margin-right: 0px;
        display: block;
        width: 100%;
        margin-bottom: 30px;
    }   
    .contenedor .CuadroPrincipalIndex img{
        margin-left: auto;
        margin-right:auto;
        display: block;
        width: 115px; 
        height: 40px; 
        padding-top: 20px;
    }
    .contenedor .CuadroPrincipalIndex h1{
        display: none;          
    }
    .contenedor .CuadroPrincipalIndex h2{
        text-align: center;
        font-size: 20px;
        padding: 15px;
        padding-bottom: 25px;
        padding-top: 25px;
    }
    .contenedor .Footer img{
        float: none;
        margin-left: auto;
        margin-right:auto;
        margin-top: 30px;
        display: block;
        padding: 20px;
        width: 90px; 
        height: 70px;       
    }        
    .verpro{
        margin-left: auto;
        margin-right:auto;
        display: block;
        width: 140px; 
        height: 20px;    
        text-decoration: none;
        text-align: center;
        padding: 10px;
        padding-bottom: 13px;
        font-weight: 600;
        font-size: 20px;
        margin-bottom: 10px;
        background-color: red;
        color: white;
        border-radius: 50px;
        border: 2px solid red;
    }
    .verpro:hover{
        color: white;
        background-color: #d00000;
    }
    .social{
        padding-left: 0%;
        padding-top: 0px;
    }
    .contenedor1{
        display: grid;
        grid-template-columns: 1fr; /*el tamaño de las columnas*/
        grid-template-rows: 4fr 9fr 5fr 13fr 30fr; /*el tamaño de las filas*/
        grid-gap: 0px; /*espacio entre los box*/
        background-color: #333333;
        grid-auto-flow: row;
    }
    .contenedor1 .Header {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        border-color: #333333;
        widht: 5px;
        border-style: solid;
        background-color: #333333;
    }
    .contenedor1 .Titulo {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
        border-color: #333333;
        widht: 5px;
        margin-top: 10px;
        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 30px;
        border-style: solid;
        background-color: white;
        border-radius: 20px;
    }
    .contenedor1 .ImagenPrincipal {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
        border-color: #333333;
        widht: 5px;
        border-style: solid;
        background-color: #333333;
    }
    .contenedor1 .Texto {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 4;
        grid-row-end: 5;
        border-color: #333333;
        widht: 5px;
        border-style: solid;
        background-color: #333333;
    }
    .contenedor1 .ImagenesSecundarias {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 5;
        grid-row-end: 6;
        border-color: #333333;
        widht: 5px;
        border-style: solid;
        background-color: #333333;
        padding-left: 0%;
        padding-right: 0%;
    }
    .contenedor1 .Header{
        margin-left: auto;
        margin-right:auto;
        display: block;
        width: 100%;
        height: 100%;
        max-width: 500px;
        padding-right: 0px;
    }
    .contenedor1 .Header img{
        padding-right: 0%;
    }
    .contenedor1 .Header nav img{
        display: none;
    }
    .menuPC{
        display:none;
    }
    .menuPhone{
        display: block;
    }     
    .contenedor1 .Titulo h1{
        text-align: center;
        font-size: 35px;
        padding: 13%;
        color: black;
        text-decoration: none;
    }
    .contenedor1 .ImagenPrincipal img{
        margin-left: auto;
        margin-right:auto;
        display: block;
        width: 100%;
        float: none;
        border: none;
    }
    .rollert{
        font-size: 17px;
    }
    .contenedor1 .Texto p{
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
        padding-top: 0px;
        color: white;
        text-align: center;
        font-family: calibri;
        font-family: sans-serif;
        font-size: 19px;
        line-height: 1.5;
        text-indent: 0px;
    }
    
    .contenedor1 .ImagenesSecundarias img{
        margin-left: auto;
        margin-right:auto;
        display: block;
        max-whidth: 100px;
        max-height: 250px;
        padding-top: 1px;
        padding-bottom: 20px;
        padding-left: 0%;
        padding-right: 0%;
        justify-content: center;
    }
    .contenedor2{
        display: grid;
        grid-template-rows: 5fr 4fr 12fr 8fr 12fr 10fr 12fr 10fr; /*el tamaño de las filas*/
        grid-template-columns: 1fr;
        grid-gap: 0px; /*espacio entre los box*/
        background-color: #d8d8d8;
    }
    .contenedor2 .HeaderToldos {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #333333;
        widht: 5px;
        border-style: solid;
        background-color: #333333;
        padding-right: 0px;
        border-bottom: 2px solid grey;
    }
    .contenedor2 .TituloToldos {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: white;
        widht: 5px;
        border-style: solid;
        background-color: white;
    }
    .contenedor2 .PrimerImagenToldos {
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #d8d8d8;
        widht: 5px;
        border-style: solid;
        background-color: #d8d8d8;
    }
    .contenedor2 .PrimerTextoToldos {
        grid-row-start: 4;
        grid-row-end: 5;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #d8d8d8;
        widht: 5px;
        border-style: solid;
        background-color: #d8d8d8;
    }
    .contenedor2 .SegundaImagenToldos {
        grid-row-start: 5;
        grid-row-end: 6;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #d8d8d8;
        widht: 5px;
        border-style: solid;
        background-color: #d8d8d8;
    }
    .contenedor2 .SegundoTextoToldos {
        grid-row-start: 6;
        grid-row-end: 7;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #d8d8d8;
        widht: 5px;
        border-style: solid;
        background-color: #d8d8d8;
    }
    .contenedor2 .TerceraImagenToldos {
        grid-row-start: 7;
        grid-row-end: 8;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #d8d8d8;
        widht: 5px;
        border-style: solid;
        background-color: #d8d8d8;
    }
    .contenedor2 .tercerTextoToldos {
        grid-row-start: 8;
        grid-row-end: 9;
        grid-column-start: 1;
        grid-column-end: 2;
        border-color: #d8d8d8;
        widht: 5px;
        border-style: solid;
        background-color: #d8d8d8;
    }
        /*float: left;
        padding: 20px;
        width: 110px; 
        height: 80px;
        padding-top: 0px;
        padding-right: 37%;*/
    .contenedor2 .HeaderToldos nav img{
        display: none;
    }
    .contenedor2 .TituloToldos h1{
        text-align: center;
        font-size: 35px;
        padding: 20px;
        text-decoration: none;
    }
    .contenedor2 .PrimerImagenToldos img{
        margin-left: auto;
        margin-right:auto;
        display: block;
        width: 100%;
        padding: 0px;
        float: none;
        border: none;
    }
    .contenedor2 .PrimerTextoToldos h1{
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 17px;
        padding: 10px;
        text-align: center;
        font-size: 24px;
        font-stretch: normal;
        font-family: calibri;
        font-family: sans-serif;
    }
    .contenedor2 .PrimerTextoToldos p{
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 17px;
        padding: 20px;
        text-align: center;
        font-size: 18px;
        font-stretch: normal;
        font-family: calibri;
        font-family: sans-serif;
    }
    .contenedor2 .SegundaImagenToldos img{
        margin-left: auto;
        margin-right:auto;
        display: block;
        width: 100%;
        padding: 0px;
        float: none;
        border: none;
    }
    .contenedor2 .SegundoTextoToldos h1{
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 17px;
        padding: 10px;
        text-align: center;
        font-size: 24px;
        font-stretch: normal;
        font-family: calibri;
        font-family: sans-serif;
    }
    .contenedor2 .SegundoTextoToldos p{
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 17px;
        padding: 20px;
        text-align: center;
        font-size: 18px;
        font-stretch: normal;
        font-family: calibri;
        font-family: sans-serif;
    }
    .contenedor2 .TerceraImagenToldos img{
        margin-left: auto;
        margin-right:auto;
        display: block;
        width: 100%;
        padding: 0px;
        float: none;
        border: none;
    }
    .contenedor2 .tercerTextoToldos h1{
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 17px;
        padding: 10px;
        text-align: center;
        font-size: 24px;
        font-stretch: normal;
        font-family: calibri;
        font-family: sans-serif;
    }
    .contenedor2 .tercerTextoToldos p{
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 17px;
        padding: 20px;
        text-align: center;
        font-size: 18px;
        font-stretch: normal;
        font-family: calibri;
        font-family: sans-serif;
    }
    li {
        float: left;
        text-shadow: 1px 0 black;
        display: inline-block;
        color: white;
        font-size: 20px;
        font-family: calibri;
        margin-right: 70px;
        text-align: center;
        font-weight: 600;
        font-family: sans-serif;
        border-bottom: 1px solid lightgrey;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 17px;
        text-decoration: none;
    }
    li a:hover { /* cambia el color cuando apoyas el maus encima (todo el menu menos cortinas) */
        background-color: rgba(35, 35, 35, .8);
    }   
    menu {
        padding-top: 3%;
        padding-left: 5%;
        max-width: 200px;
        position: absolute;
        background-color: rgba(81, 81, 81, .9);
        transition: all 0.4s;
        display: none;
    }
    menu ol{
        flex-direction: column;
    }
    .crumb{
        display: block;
        float:none;
    }
    .menuicon{ //la barra gris de menu
        display: block;
        width: 10%;
        background: #ccc;
    }
    label{
        display:block;
    }
    .btn-menu:checked ~*.menu{
        margin: 0;
    }
    .menuicon span{
        float:right;
        font-size: 40px;
    }
    .dropbtn {
        color: white;
        padding: 17px;
        font-size: 20px;
        font-family: calibri; 
        font-weight: 600;
        font-family: sans-serif;
    }
    .dropdown {
        position: relative;
        display: inline-block;
        margin-right: 0px;
        padding-bottom: 0px;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: rgb(160,160,160);
        min-width: 300px; /*tamaño del rectangulo donde van los items de abajo*/
        z-index: 1;
        top: 58px; /*espacio entre cortinas y el texto de abajo*/
    }
    .dropdown-content a { /* Links inside the dropdown */
        color: white;
        padding-left: 20px;  
        padding-right: 20px;
        padding-top: 17px;
        padding-bottom: 15px;
        text-align: left;
        font-size: 18px; /*tamaño letra del contenido del dropdown*/
        font-family: calibri;
        text-decoration: none;
        display: block;
        font-weight: 600;
        font-family: sans-serif;
    }
    .dropdown-content a:hover {background-color: #777;} /* Change color of dropdown links on hover */
    .dropdown:hover .dropdown-content {display: block;} /* Show the dropdown menu on hover */
    .dropdown:hover .dropbtn {background-color: rgba(35, 35, 35, .8);} /* Change the background color of the dropdown button when the dropdown content is shown */

}