body {background: linear-gradient(white, rgb(126, 126, 126));}


h1 {font-size: 1000%; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bold; margin-top: 0%;}
h2 {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bold; font-size: 300%; margin-left: 2%; padding: 2%;margin-top: 0;} 
h4 {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bold; font-size: 200%; margin-left: 2%; padding: 2%; padding-left: 10%;}
h5 {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;  font-size: 150%; margin-left: 2%; padding: 2%; padding-left: 10%;}

nav a {text-decoration-line: none; color: dimgrey;}
nav a:hover{color: black; font-weight: bold; font-style: italic;}


article a {text-decoration-line: none; color: dimgrey;}


section p {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 140%; 
        margin-left: 7%; margin-right: 7% ;text-align: justify; line-height: 180%;}    

aside a {transition: 0.5s ;text-decoration: none; color: white; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bold; font-size: 250%; 
        margin-left: 8%;}
aside a:hover {font-style: italic; color: rgb(0, 0, 0); transition: 0.5s;}
aside {transition: 0.1s ;background: black; border-radius: 10px; margin-left: 60%; margin-right: 15%; padding: 2%;}
aside:hover {background: rgba(255, 255, 255, 0);}
footer h3 {font-family: sans-serif; font-weight: bold; color: rgb(44, 44, 44); text-align: center; padding: 5%; font-size: 120%;}
footer p {color: #a7a7a7; font-size: 90%; font-family: sans-serif; padding-bottom: 2%; padding-left: 5%; padding-right: 5% ;text-align: center; font-style: italic;}



.navClase  {font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 120%; 
    justify-content: left; color: dimgray;font-weight: lighter; padding-bottom: 5%; margin-top: -7.5%; margin-left: 2%;}

.seccionUno {margin-top: 5%; color:white;border-width: 50%;background-color:rgb(54, 54, 54);border-radius: 2rem; padding-bottom: 5%; column-count: 2; column-gap: 5%;}
.seccionBench{margin-top: 10%;}
.textoBench{padding-left: 10%;text-align: justify;}
.div{margin-left: 50%;margin-top: -138.8%;}
.botonEsquicio {margin-top: -12%; margin-left: 50%;}
.proyectoPadding {padding: 1%;border-width:80%;background-color: black;border-radius: 20rem;text-align: center;}
.ocampoLogo {filter: grayscale(10%); margin-left: 38%; padding: 5%; padding-bottom: 1%; padding-top: 20%;}
.imgBenchFb {width:  10%; margin-left: 15%; border-radius: 20px; border: 100px;display: block;}
.imgBenchMl {width:  10%; margin-left: 15%; border-radius: 20px; border: 100px;display: block;}
.imgBenchAir {width:  10%; margin-left: 15%; border-radius: 20px; border: 100px;display: block;}
.imgUser {width:  80%; margin-left: 10%; border-radius: 20px; border: 100px;}
.ytBox {margin-left: 15%; }

.aArtClase  {font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 250%; 
        justify-content: left; color: rgb(0, 0, 0);font-weight: lighter; padding-bottom: 5%; margin-top: -7.5%;}
.aArtClase:hover {color: black; font-weight: bold; font-style: italic;}
.textoA {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 140%; 
        margin-left: 7%; margin-right: 7% ;text-align: justify; line-height: 180%;}    

.benchTitulo{color:white}

.tituloApp{margin-left: 5%;}

.embedded{margin-left: 26%;margin-top: -45%;border-width: 200%;background: black;border-radius: 5%;width: 50%;}

.imagenWire{margin-left: 10%;width: 80%;padding: 2%;}

.imagenApp{margin-left: 10%;width: 80%;padding: 2%;}

.divEmb{margin-top: -15%;}

.divImagenLogo{display: flex; justify-content: right; margin-top: -18%;margin-right: 5%;}
.imgLogo{width:20%;}
.separacion{margin-top: 50%;}







 


@media (max-width: 1600px) {aside {font-size: 50%; transition: .1s;} .ytBox{width: 80%;}.proyectoPadding{transition:.1s;font-size: 180%;}}
@media (max-width: 1400px){.embedded{width: 40%;} .separacion{margin-top: 80%;}}
@media (max-width: 1250px){.embedded{width: 40%;} .media{padding: 10%;}}
@media (max-width: 800px){.div{margin-top: -300%;} .embedded{width: 40%;height: 40%;}}
@media (max-width: 750px) {aside {font-size: 30%; transition: .1s;} h1 {font-size: 500%;} h2{font-size: 200%;} section p{font-size: 90%;} footer {font-size: 50%;} 
.ocampoLogo{margin-left: 12%;}.ytBox{width: 50%;}.proyectoPadding{transition:.1s;font-size: 120%;} nav a{font-size: 90%;} .div{margin-top: -400%;}}
@media (max-width: 500px) {aside {font-size: 20%; transition: .1s;}.ytBox{width: 50%;} .div{margin-top:-524.5%} nav a{font-size: 80%;}}