* {margin: 0em;padding: 0em; box-sizing: border-box;text-decoration: none;}


body {
    font-family: "roboto";
    background-image: url(./img/cielonuevo.jpg);
    display: flex; 
    justify-content: space-between;
    flex-direction: column;}






header p {color: white; font-family: 'Roboto', sans-serif;}
header {background-image: url(./img/armazon100233.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; 
    display: flex; 
    flex-direction: column;
    justify-content: center;}

.disenograficodg {display: flex;
    flex-direction: row; 
    justify-content: space-around;}

.disenograficodg p {font-size: 4em; 
    text-transform: uppercase;
    font-family: 'roboto';
    font-weight: 300;color: white;
    }
#d {display: flex; 
    flex-direction: column; 
    justify-content: center;
    background-color: rgba(50, 0, 0, 0.8);
    letter-spacing: 2em;
    border-radius: 50%;
    position: relative; 
    left: 2.4em; 
    max-width: 4em;
    max-height: 4em;}

#d p{position: relative; left: 0.2em;}
#g p{position: relative; left: 0.1em ;}

#g{display: flex; 
    flex-direction: column; 
    justify-content: center;
    background-color: rgba(50,60, 0, 0.8);
    letter-spacing: 2em;
    border-radius: 50%;
    position: relative; 
    right: 2em; 
    max-width: 4em;
    max-height: 4em;}



.cajaimagen {display: flex;
    justify-content: center;
    flex-direction: row;
    z-index: 1; 
    position:relative; 
    bottom: 2.7em;}

.nachofoto {border-radius: 50%;
    max-width: 3.5em;
    max-height: 3.5em; 
    position:relative; 
    box-shadow: 0px 19px 94px 35px rgba(255,247,255,1);); 
    left: 0.25em}

.cajadelcuatro{display: flex; 
    justify-content: center;
    flex-direction: row;
    position: relative;
    top: 4.98em; 
    z-index: 2;}

.numerocuatro {
    font-family: 'roboto';
    font-size: 4em; 
    font-weight: 300;}

.presentacion {font-size: 0.8em;}

.pre {display: flex; 
     justify-content: center; 
     position: relative;
     top: 1.9em;}

.pre p {font-family: 'roboto'; 
    font-weight: 300;
    font-size: 0.72em; 
    letter-spacing: 0.09em;}

nav{position: relative;top: 2.5em;z-index: 7;}
nav li{display: flex; justify-content: center;}
nav * li a{font-size: 0.6em;}


.contenedor {list-style: none;
    font-size: 1.5em;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    height: 2em;
    justify-content: center;
    font-weight:700;}

.caja {display: flex; 
    justify-content: flex-start;
    margin: 0.07em;}

.elemento {padding: 0.6em;
    display: flex; 
    flex-basis: 25%; 
    align-items: center; 
    flex-direction: row;
    background-color:rgba(0,0, 0, 0.1);
    max-height: 1.8em; 
    max-width: 2.7em;
   box-shadow: none;border: solid; border-color: white; border-width: 0.05em;
}


.item {display: flex;
    flex-direction: row;
    justify-content: flex-start; 
    align-items: center;}
.item3 {margin: 0.1em;}



a {color:white;
text-decoration: none; font-family: 'roboto'; font-weight: 300;}





h1{color: white; 
    height: 10vh;
    display: flex; 
    justify-content: center;
    position: relative; 
    top: 0.4em;
    z-index: 3;
    text-transform: uppercase;
    font-family: 'roboto';
    font-weight: 300;
    letter-spacing: 0.20em;
    font-size: 1.7em;
}
h1 span{margin: 0.2em}









main {
    background-color: rgba(15,15, 15, 0.3);
    display: flex; 
    flex-direction: column;
    align-items: center;
    position: relative; 
    top: 3em;}

main ul li {color: white;
    font-family: 'roboto';
    font-weight: 300;}

.cuerpo {top:2em; z-index: 2;display: flex; flex-direction: column;}



h3{font-size: 1.2em; height: 7vh;color: white;font-family: 'roboto'; font-weight: 300;text-transform: uppercase;letter-spacing: 0.05em;}

h4{font-size: 1.2em; height: 7vh;color: white; font-family: 'roboto'; font-weight: 300;text-transform: uppercase;letter-spacing: 0.05em;}


.cuerpo {top:2em; 
    display: flex;
    justify-content: space-between;
    z-index: 2;}

.article2{margin: 1em; 
    padding: 2em;
    
    }

.article1{
    background: -moz-linear-gradient(left, rgba(204,113,43,1) 0%, rgba(9,1,1,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(204,113,43,1)), color-stop(100%, rgba(9,1,1,1)));
    background: -webkit-linear-gradient(left, rgba(204,113,43,1) 0%, rgba(9,1,1,1) 100%);
    background: -o-linear-gradient(left, rgba(204,113,43,1) 0%, rgba(9,1,1,1) 100%);
    background: -ms-linear-gradient(left, rgba(204,113,43,1) 0%, rgba(9,1,1,1) 100%);
    background: linear-gradient(to right, rgba(204,113,43,1) 0%, rgba(9,1,1,1) 100%);
    margin: 1em; 
    padding: 2em;
    box-shadow: inset -5px -45px 165px 51px rgba(0,0,0,1);}

ul p {color: white;
    font-family: 'roboto';
    font-weight: 300;
    height: 1.8em; 
    font-size: 0.8em;
    letter-spacing: 0.03em;}

.article2 ul p {color: white;}



.cajaimagen2 {display: none; z-index: 1;}

.cajavideo {display: none;}




footer {background-color: rgba(0,0, 0, 0.8) ; 
    margin: 5.5em;
    height: 12em;
    display: flex; 
    flex-direction: column;
    align-content: center;
    color: white; 
    font-family: 'roboto';
    font-weight: 300;
    font-size: 0.6em; 
     z-index: -1;
    position: relative; 
    top: 0.8em;}

.compu {font-family: 'roboto';
    font-weight: 500; 
    font-size: 1em;}

.textofooter{position: relative; top: 0.5em;}


.nachofoto2 {border-radius: 50%;
    max-width: 2.5em;
    max-height: 2.5em; 
    position:relative; opacity: 0;transition: all 1.5s ease;}
.cajaimagen2 {display: flex; z-index: 1; position:absolute;margin-left: 6.5em; bottom:3.5em;}
.cajaimagen4 {display: flex; z-index: 1; position:absolute;margin-left: 3.2em; bottom:3.3em;}
.cajaimagen3 {display: flex; z-index: 1; position: absolute;bottom: 3.5em; left: 20.5em} 






@media all and (min-width: 35em) {
    
 .cuerpo {top:2em; z-index: 2;display: flex; flex-direction: row;}
    
.article1{box-shadow: none;
    background:none;}

footer{margin-left: 45.4em; margin-right: 61em;}
    
.elemento {padding: 0.6em;
    display: flex; 
    flex-basis: 25%; 
    align-items: center; 
    flex-direction: row;
    background-color: rgba(0,0, 0, 0.1);
    max-height: 1.8em; 
    max-width: 2.7em;
    box-shadow: none;border: solid; border-color: white; border-width: 0.05em;}

.elemento:hover { background-color: white; box-shadow: 0px 5px 84px 10px rgba(255,247,255,1);); transition: all .7s ease; }
.elemento { transition: all 1.2s ease; }

nav a {color: white;
text-decoration: none; font-family: 'roboto'; font-weight: 300; letter-spacing: 0.05em;}
    
nav .elemento:hover a {color: black;
text-decoration: none; font-family: 'roboto'; font-weight:600;}


.caja {display: flex; 
    justify-content: flex-start;
    margin-left: 0.3em;}

#caja3{min-width: 3.2em;position: relative;right: 0.47em}

#caja33{margin-left: 0.8em;}
    
#d {
    background-color: rgba(150, 150, 150, 0.2);
    border: solid; border-color: white; 
    border-width: 0.09em;}
    
    #g{
    background-color: rgba(150,150, 150, 0.2);
    border: solid; border-color: white; 
    border-width: 0.09em;}
    
.pre p {font-family: 'roboto'; 
    font-weight: 300;
    font-size: 0.8em; 
    letter-spacing: 0.12em;}
h3 {border-bottom: solid; border-color: white; border-width: 0.05em;}

.cajaimagen {bottom: 3em;}

    h3{height: 1.6em; margin-bottom: 1em;}
    h4{height: 1.6em; margin-bottom: 1em;}

.nachofoto {left: 0.2em}
    
.cuerpo {margin-left: 1.6em;}
    
.cajavideo {border: solid; border-color: white; border-width: 0.05em;position: relative;margin-top: 4.8em; display: flex; justify-content: center;z-index: 8;}
    
h5 {color: white;font-family: 'roboto'; font-weight: 300;display: block;line-height: 1.55em; letter-spacing: 0.04em;margin-top: 0.4em}
    
#weeknd {font-weight: 500; font-size: 1.24em;}
    
    .titulovideo {height: 3.3em; position: absolute;width: 12.6em;margin-top: 1.52em; background-color:rgba(0,0, 0, 0.7); z-index: 6;}    
    
#materias2 {border-bottom: solid; border-color: white; border-width: 0.05em;height: 3.5em;}
    
#video {color: white;position: absolute; margin-left: 12.6em; margin-top: 0.3em; font-size: 0.8em; font-family: 'roboto';}
    
   
iframe{z-index: 99;}
    

    
h3 {display: block;}
    


    
.article1 #materias1 p{display: block; color:rgba(40,40, 40, 1) ; transition: all 2s ease;}
.article1 #materias1:hover p{color: darkgrey; transition: all 1.5s ease;}
.article1 #materias1 p:hover{color: white; transition: all .5s ease;}

.article2 #materias2 p {color:rgba(100,100, 100, 1);transition: all 2s ease; }  
.article2 #materias2:hover p{color: darkgrey; transition: all 1.5s ease;}
.article2 #materias2 p:hover{color: white; transition: all .5s ease;}  

h1{letter-spacing: 0.3em; margin-left: 1em}


    
.nachofoto2 {border-radius: 50%;
    max-width: 2.5em;
    max-height: 2.5em; 
    position:relative; opacity: 0;transition: all 1.5s ease;}
.cajaimagen2 {display: flex; z-index: 1; position:absolute;margin-left: 6.5em; bottom:3.5em;}
.cajaimagen4 {display: flex; z-index: 1; position:absolute;margin-left: 3.2em; bottom:3.3em;}
.cajaimagen3 {display: flex; z-index: 1; position: absolute;bottom: 3.5em; left: 20.5em} 

nav .elemento:hover .cajaimagen3 .nachofoto2 {display:block; opacity: 1;transition: all 2s ease;}
nav .elemento:hover .cajaimagen4 .nachofoto2 {display:block; opacity: 1;transition: all 2s ease;}
nav .elemento:hover .cajaimagen2 .nachofoto2 {display:block; opacity: 1;transition: all 2s ease;}
}