* {margin: 0; padding: 0}

body {
    background-color: #ffe4f6;
}
#Cabecera {
    width: 100%;
    height: 150px;
    background-color: #e48679;
    
}
#Cuerpo {
    width: 950px;
    height: 1841.25px;
    margin-left: auto;
    margin-right: auto;
    background-color: #470d3b;
}
#Cuerpo2 {
    width: 950px;
    height: 1393px;
    margin-left: auto;
    margin-right: auto;
    background-color: #470d3b;
}
#Pie {
    width: 100%;
    height: 100px;
    background-color: #c0576f;
}
#cabb {
    width: 950px;
    height: 150px;
    background-color: #e48679;
    margin-left: auto;
    margin-right: auto;
}
#ppie {
    width: 950px;
    height: 100px;
    background-color: #c0576f;
    margin-left: auto;
    margin-right: auto;
}
#logo {
    width: 120px;
    height: 120px;
    background-color: #7e2f56;
    margin: 15px;
    float: left;
    border-radius: 100%;
    background-image: url("ITC.png");
    background-size: cover;
}
#titulo {
    width: 785px;
    height: 75px;
    background-color: #7e2f56;
    float: right;
    margin-top: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 15px;
}
#navegacion {
    height: 30px;
    width: 785px;
    background-color: #7e2f56;
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 15px;
}
#tercio {
    height: 231.25px;
    width: 296.66px;
    float: left;
    margin-left: 15px;
    margin-top: 15px;
    background-color: #febd84;
    border-radius: 10px;
    padding: 5px;
    box-sizing: border-box; /*Esta línea de código permite que el padding desplace el contenido de la caja hacia adentro, en vez de agrandarla*/
    box-shadow: 5px 5px 2.5px #c0576f; /*Creamos una sombra, indicando el tamaño, offset, disipación y color*/
}
#tercio2 {
    height: 231.25px;
    width: 296.66px;
    float: left;
    margin-left: 15px;
    margin-top: 15px;
    background-color: #febd84;
    border-radius: 10px;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: 5px 5px 2.5px #c0576f;
}
#tercio3 {
    height: 231.25px;
    width: 296.66px;
    float: left;
    margin-left: 15px;
    margin-top: 15px;
    background-color: #febd84;
    border-radius: 10px;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: 5px 5px 2.5px #c0576f;
}
#completo {
    width: 920px;
    float: left;
    margin: 15px;
    background-color: #febd84;
    height: 231.25px;
    border-radius: 10px;
    background-image: url(ondas.png);
    background-size: cover;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    box-shadow: 5px 5px 2.5px #c0576f;
}
#completo:hover {
    transform:scale(1.05);
}
#completo2 {
    width: 920px;
    float: left;
    margin: 15px;
    background-color: #febd84;
    height: 531.25px;
    border-radius: 10px;
    box-shadow: 5px 5px 2.5px #c0576f;
}
    #completo2 iframe {
        width: 100%;
        height:100%;
        object-fit:cover;
        border-radius:10px;

    }
#mitad {
    height: 231.25px;
    width: 256.66px;
    float: left;
    margin-left: 15px;
    background-color: #febd84;
    border-radius: 10px;
    background-image: url(diodos.jpg);
    background-size: cover;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    box-shadow: 5px 5px 2.5px #c0576f;
}
#mitad:hover {
    transform: scale(1.05);
}
#mitad2 {
    height: 231.25px;
    width: 256.66px;
    float: left;
    margin-left: 15px;
    background-color: #febd84;
    border-radius: 10px;
    background-image: url(resistencias.jpeg);
    background-size: cover;
    background-position: center;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    box-shadow: 5px 5px 2.5px #c0576f;
}
#mitad2:hover {
    transform: scale(1.05);
}
#mitadgrande {
    height: 231.25px;
    width: 371.66px;
    float: left;
    margin-left: 15px;
    background-color: #febd84;
    border-radius: 10px;
    background-image: url(capacitores.jpeg);
    background-size: cover;
    background-position: center;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    box-shadow: 5px 5px 2.5px #c0576f;
}

#mitadgrande:hover {
    transform: scale(1.05);
}
#mitad3 {
    height: 241.25px;
    width: 412.5px;
    float: left;
    margin-left: 15px;
    margin-top: 15px;
    background-color: #febd84;
    border-radius: 10px;
    box-shadow: 5px 5px 2.5px #c0576f;
    padding: 5px;
    box-sizing: border-box; 
}
#mitad4 {
    height: 241.25px;
    width: 492.5px;
    float: left;
    margin-left: 15px;
    margin-top: 15px;
    background-color: #febd84;
    border-radius: 10px;
    background-image: url(fuentecc2.jpg);
    background-size: cover;
    background-position: center left;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    box-shadow: 5px 5px 2.5px #c0576f;
}
#mitad4:hover {
    transform: scale(1.05);
}

#cuarto {
    height: 231.25px;
    width: 218.75px;
    margin-left: 15px;
    margin-top: 15px;
    background-color: #febd84;
    float: left;
    border-radius: 10px;
}
#izqpie {
    height: 70px;
    background-color: #7e2f56;
    float: left;
    width: 607px;
    margin: 15px;
    border-radius: 15px;
    padding: 5px;
    box-sizing: border-box;
}
#derpie {
    height: 70px;
    margin-top: 15px;
    background-color: #7e2f56;
    float: left;
    width: 303px;
    border-radius: 15px;
    padding: 5px;
    box-sizing: border-box;
}
#cajatitulo {
    padding: 5px;
    box-sizing: border-box;
    height: 60px;
    width: 400px;
    float: left;
    margin: 15px;
    background-color: #febd84;
    border-radius: 10px;
    box-shadow: 5px 5px 2.5px #c0576f;
}
#cajaimg {
    height: 340px;
    width: 505px;
    float: right;
    margin-top: 15px;
    margin-right: 15px;
    background-color: #febd84;
    border-radius: 10px;
    background-image: url(ondatrafo.jpg);
    background-size: 505px 380px;
    background-position: right;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    box-shadow: 5px 5px 2.5px #c0576f;
}
#cajaimg:hover {
    transform:scale(1.05);
}
#cajatexto {
    padding: 5px;
    box-sizing: border-box;
    height: 265px;
    width: 400px;
    float: left;
    margin-left: 15px;
    background-color: #febd84;
    border-radius: 10px;    
    box-shadow: 5px 5px 2.5px #c0576f;
}
#cajaimg2 {
    height: 250px;
    width: 452.5px;
    float: left;
    margin-top: 15px;
    margin-left: 15px;
    background-color: #febd84;
    border-radius: 10px;
    background-image: url(ondadiodos.jpg);
    background-size: cover;
    background-position: center left;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    box-shadow: 5px 5px 2.5px #c0576f;
}
#cajaimg2:hover {
    transform:scale(1.05);
}
#cajaimg3 {
    height: 250px;
    width: 452.5px;
    float: left;
    margin-top: 15px;
    margin-left: 15px;
    background-color: #febd84;
    border-radius: 10px;
    background-image: url(ondacapacitor.png);
    background-size: cover;
    background-position: center left;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    box-shadow: 5px 5px 2.5px #c0576f;
}
#cajaimg3:hover {
    transform:scale(1.05);
}
#cajatxt2 {
    height: 300px;
    width: 452.5px;
    float: left;
    margin-top: 15px;
    margin-left: 15px;
    background-color: #febd84;
    border-radius: 10px;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: 5px 5px 2.5px #c0576f;
}
#cajatxt3 {
    padding: 5px;
    box-sizing: border-box;
    height: 465px;
    width: 452.5px;
    float: right;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    background-color: #febd84;
    border-radius: 10px;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: 5px 5px 2.5px #c0576f;
}

p {
    font-size: large;
    text-align: justify;
    margin: 5px;
    font-family: Arial;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.formato_lista {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
}
li {
    display: inline;
    background-color:;
    text-align: center;
    font-size: 15px;
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    width: 377.5px;
    height: 20px;
    background-color: #febd84;
    border-radius: 5px;
    text-decoration:none;
}
a {
    display: block;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #470d3b;
    vertical-align: auto;
}
.subtitulosizq {
    text-align: left;
    font-family: 'Verdana';
}
.titgrande {
    font-size: 45px;
    text-align: center;
    font-family: 'Verdana';
    margin: 5px;
}
.titmediano {
    font-size: 30px;
    text-align:center;
    font-family:Verdana;
    margin:5px;
}
.subtt {
    font-size:20px;
    text-align: center;
    font-family:Verdana;
    
}
.subtituloscent {
    text-align: center;
    font-family: 'Verdana';
}
#cajatexto4 {
    padding: 5px;
    box-sizing: border-box;
    height: 270px;
    width: 400px;
    float: left;
    margin-left: 15px;
    margin-top: 15px;
    background-color: #febd84;
    border-radius: 10px;
    box-shadow: 5px 5px 2.5px #c0576f;
    
}
#cajaimg4 {
    height: 270px;
    width: 505px;
    float: right;
    margin-top: 15px;
    margin-right: 15px;
    background-color: #febd84;
    border-radius: 10px;
    background-image: url(trafo.jpg);
    background-size: cover;
    background-position: center;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    box-shadow: 5px 5px 2.5px #c0576f;
}
#cajaimg4:hover {
    transform:scale(1.05);
}
#completo3 {
    width: 920px;
    float: left;
    margin: 15px;
    background-color: #febd84;
    height: 263px;
    border-radius: 10px;
    box-shadow: 5px 5px 2.5px #c0576f;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
}
#completo3:hover {
    transform:scale(1.05);
}
#cajatxt5 {
    padding: 5px;
    box-sizing: border-box;
    height: 150px;
    width: 452.5px;
    float: left;
    margin-top: 15px;   
    margin-left: 15px;
    background-color: #febd84;
    border-radius: 10px;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: 5px 5px 2.5px #c0576f;
}
#completo3 iframe {
    width: 100%;
    height: 100%;
    
    border-radius: 10px;
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
    #Cuerpo {
        width: calc(950px*0.75);
        height: calc(1841.25px*0.75);
    }

    #Cuerpo2 {
        width: calc(950px*0.75);
        height: calc(1393px * 0.75);
    }

    #Pie {
        width: 100%;
        height: calc(100px * 0.75);
    }
    #cabb {
        width: calc(950px * 0.75);
        height: calc(150px * 0.75);
    }

    #ppie {
        width: calc(950px * 0.75);
        height: calc(100px * 0.75);
    }

    #logo {
        width: calc(120px * 0.75);
        height: calc(120px * 0.75);
        margin: calc(15px * 0.75);
    }

    #titulo {
        width: calc(785px * 0.75);
        height: calc(75px * 0.75);
        margin-top: calc(15px * 0.75);
        margin-right: calc(15px * 0.75);
        margin-bottom: calc(15px * 0.75);
        border-radius: calc(15px * 0.75);
    }

    #navegacion {
        height: calc(30px * 0.75);
        width: calc(785px * 0.75);
        margin-right: calc(15px * 0.75);
        margin-bottom: calc(15px * 0.75);
        border-radius: calc(15px * 0.75);
    }

    #tercio {
        height: calc(231.25px * 0.75);
        width: calc(296.66px * 0.75);
        margin-left: calc(15px * 0.75);
        margin-top: calc(15px * 0.75);
        border-radius: calc(15px * 0.75);
        padding: calc(5px * 0.75);
    }

    #tercio2 {
        height: calc(231.25px * 0.75);
        width: calc(296.66px * 0.75);
        margin-left: calc(15px * 0.75);
        margin-top: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
        padding: calc(5px * 0.75);
    }

    #tercio3 {
        height: calc(231.25px * 0.75);
        width: calc(296.66px * 0.75);
        margin-left: calc(15px * 0.75);
        margin-top: calc(15px * 0.75);
        border-radius: calc(10 * 0.75);
        padding: calc(5px * 0.75); 
    }

    #completo {
        width: calc(920px * 0.75);
        margin: calc(15px * 0.75);
        height: calc(231.25px * 0.75);
        border-radius: calc(10px * 0.75);
    }
    #completo2 {
        width: calc(920px * 0.75);
        margin: calc(15px * 0.75);
        height: calc(531.25px * 0.75);
        border-radius: calc(10px * 0.75);
    }

        #completo2 iframe {
            border-radius: calc(10px * 0.75);
        }

    #mitad {
        height: calc(231.25px * 0.75);
        width: calc(256.66px * 0.75);
        margin-left: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
    }
    #mitad2 {
        height: calc(231.25px * 0.75);
        width: calc(256.66px * 0.75);
        margin-left: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
    }
    #mitadgrande {
        height: calc(231.25px * 0.75);
        width: calc(371.66px * 0.75);
        margin-left: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
    }
    #mitad3 {
        height: calc(241.25px * 0.75);
        width: calc(412.5px * 0.75);
        margin-left: calc(15px * 0.75);
        margin-top: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
        padding: calc(5px * 0.75);
    }

    #mitad4 {
        height: calc(241.25px * 0.75);
        width: calc(492.5px * 0.75);
        margin-left: calc(15px * 0.75);
        margin-top: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
    }
    #cuarto {
        height: calc(231.25px * 0.75);
        width: calc(218.75px * 0.75);
        margin-left: calc(15px * 0.75);
        margin-top: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
    }

    #izqpie {
        height: calc(70px * 0.75);
        width: calc(607px * 0.75);
        margin: calc(15px * 0.75);
        border-radius: calc(15px * 0.75);
        padding: calc(5px * 0.75);
    }

    #derpie {
        height: calc(70px * 0.75);
        margin-top: calc(15px * 0.75);
        width: calc(303px * 0.75);
        border-radius: calc(15px * 0.75);
        padding: calc(5px * 0.75);
    }

    #cajatitulo {
        padding: calc(5px * 0.75);
        height: calc(60px * 0.75);
        width: 300px;
        margin: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
    }
    #cajaimg {
        height: calc(340px * 0.75);
        width: calc(505px * 0.75);
        margin-top: calc(15px * 0.75);
        margin-right: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
        background-size: calc(505px* 0.75) calc(380px * 0.75);
    }
    #cajatexto {
        padding: calc(5px * 0.75);
        height: calc(265px * 0.75);
        width: calc(400px * 0.75);
        margin-left: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
    }

    #cajaimg2 {
        height: calc(250px * 0.75);
        width: calc(452.5px * 0.75);
        margin-top: calc(15px * 0.75);
        margin-left: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
    }
    #cajaimg3 {
        height: calc(250px * 0.75);
        width: calc(452.5px * 0.75);
        margin-top: calc(15px * 0.75);
        margin-left: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
    }
    #cajatxt2 {
        height: calc(300px * 0.75);
        width: calc(452.5px * 0.75);
        margin-top: calc(15px * 0.75);
        margin-left: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
        padding: calc(5px * 0.75);
    }

    #cajatxt3 {
        padding: calc(5px * 0.75);
        box-sizing: border-box;
        height: calc(465px * 0.75);
        width: calc(452.5px * 0.75);
        margin-top: calc(15px * 0.75);
        margin-left: calc(15px * 0.75);
        margin-right: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
        padding: calc(5px * 0.75);
    }
    p {
        font-size: calc(17.5px * 0.75);
        text-align: justify;
        margin: calc(5px * 0.75);
        font-family: Arial;
    }
    .formato_lista {
        font-size: calc(15px * 0.75);
    }

    li {
        font-size: calc(15px * 0.75);
        margin-left: calc(10px* 0.75);
        margin-top: calc(5px * 0.75);
        width: calc(377.5px * 0.75);
        height: calc(20px * 0.75);
        border-radius: calc(5px * 0.75);
    }

    a {
        font-size: calc(18px * 0.75);
    }
    .titgrande {
        font-size: calc(45px * 0.75);
        margin: calc(5px*0.75);
    }

    .titmediano {
        font-size: calc(30px0.75);
        margin: calc(5px*0.75);
    }

    .subtt {
        font-size: calc(20px*0.75);
    }
    #cajatexto4 {
        padding: calc(5px*0.75);
        height: calc(270px*0.75);
        width: calc(400px*0.75);
        margin-left: calc(15px * 0.75);
        margin-top: calc(15px * 0.75);
        border-radius: calc(10px*0.75);
    }

    #cajaimg4 {
        height: calc(270px*0.75);
        width: calc(505px*0.75);
        margin-top: calc(15px * 0.75);
        margin-right: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
    }
    #completo3 {
        width: calc(920px*0.75);
        margin: calc(15px * 0.75);
        height: calc(263px*0.75);
        border-radius: calc(10px * 0.75);
    }
    #cajatxt5 {
        padding: calc(5px*0.75);
        height: calc(150px*0.75);
        width: calc(452.5px*0.75);
        margin-top: calc(15px * 0.75);
        margin-left: calc(15px * 0.75);
        border-radius: calc(10px * 0.75);
        padding: calc(5px * 0.75);
    }

    #completo3 iframe {

        border-radius: calc(10px*0.75);
    }
    .subtituloscent {
        text-align: center;
        font-family: 'Verdana';
        font-size: calc(30px*0.75);
    }
    .subtitulosizq {
        text-align: left;
        font-family: 'Verdana';
        font-size: calc(30px*0.75);
    }
}