@import url('https://fonts.googleapis.com/css?family=Exo+2|Special+Elite');

iframe{ min-height: 10rem; width: auto; height: auto;}
html {font-size:100%}
body {font-size:1rem;background: #000000;}

.sectionInfoPersonal h5, h3{
    text-align: center;
}

header {
    margin:0% 0% 0% 0%; padding: 0% 0% 0% 0%;box-sizing: border-box; width:100%; height: 3rem; 
}

.imgfondo {margin:0% 0% 0% 0%; padding: 0% 0% 0% 0%;box-sizing: border-box; width:100%;}

.frase {text-align: center}

.sectionSubtitulo {
font-family: 'Special Elite';
    text-align: center;
    margin: 0% 0% 0% 0%; 
    padding: 5%; 
    color: #70DACA;
    font-size: 8rem;
    font-weight: bold;
}

.infoseccion1 {
    /* display: flex; */
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
    align-content: stretch;
    text-align: center;
}

.iphonefoto { flex-direction: column; width: 90%; }

.sobre {
    display: inline-block;
    vertical-align: top;
    margin: 0.5rem;
    padding: 1rem;
    color: #70DACA;
    align-content: center;
}

.sobre h2 {
    text-align: left;
    padding-bottom: 1rem;
}

.sobre p {
    text-align: left;
    width: 95%;
}

.botondescarga {
    display: flex;
    padding: 1rem;
    text-align: center;
}

.fa-ticket-alt {align-content: center;box-sizing: border-box; width:100%; height: 1rem; color: #fff;font-size: 50px; }

.fa-video {align-content: center;box-sizing: border-box; width:100%; height: 1rem; color: #fff;font-size: 50px;}

.fa-calendar-alt {align-content: center;box-sizing: border-box; width:100%; height: 1rem; color: #fff;font-size: 50px; }

h1 {
    font-family: 'Special Elite', sans-serif;
    text-align: center;
    margin: 0% 0% 0% 0%; 
    padding: 5%; 
    color: #70DACA;
    font-size: 4rem;
    font-weight: bold;
}

h2 {font-family: 'Special Elite', cursive;color: #70DACA;text-align: center;font-size: 1.5rem; font-weight: bold; margin-top: 15px}

h3 {font-family: 'Special Elite', cursive;color: #70DACA}

.avatarDescription {
    font-family: 'Special Elite', cursive;
    text-align: center;
    margin-top: 15px;
    font-size: 1.3rem;
}

.nombre {
    font-family: 'Special Elite', cursive;
    color: #70DACA;
    text-align: center;
    font-size: 1.5rem; 
    font-weight: bold; 
    margin-top: 15px
}

.carrera {
    font-size: 2rem;
    text-align: center;
    

}

.tituloMaterias {
    font-size: 1.75rem; 

}

.materias{
    font-family: 'Exo 2', regular;
    color: #96C1DF;
    font-size: 1rem; 
    margin-top: 15px
}


.li ul materias {font-family: 'Exo 2', regular;
    color: #96C1DF;
    font-size: 1rem; 
    margin-top: 15px;
    list-style-type: none;
}

.a li ul {font-family: 'Exo 2', regular;
    color: #0cfb8b;
    font-size: 1rem; 
    margin-top: 15px;
    list-style-type: none}


.menuItem {
    font-family: 'Special Elite', cursive; color: #0CFB8B; list-style-type: none; font-size: 2rem; ;
}

.sectionMenu{
    margin-top: 50px;
}

.sectionIntegrantes{
    margin-top: 100px;
}

.fondoEstrellas{
    margin-top: 50px;
}

.sectionFooter{
     background-color: #0f0213;
     margin-top: 100px;
     padding: 25px;
}

.copyright{
    color: #96C1DF;
    font-size: 0.8rem;
    text-align: center;
    font-family: 'Exo 2', 'regular';
}


a:link {
    text-decoration:none; 
    color:#0cfb8b;
    transition: color 1s;
}

a:hover {
    color:#96C1DF;
}

.avatar {
    width:65%;
    border-radius: 50%;
    background: #bab8bc;
    cursor: pointer;
}

.sectionTituloGrafico{
    margin-top:50px;   
}

.sectionTitulo{
    margin-top:50px;   
}


.sectionPlan{
    margin-top:50px;   
}

.sectionInfoPlan{
    margin-top:50px;   
}

.sectionInfoPersonal{
    margin-top:50px;   
}

.videoyout {
    align-content: center;
    box-sizing: border-box;
    padding:10%; 
    margin-top: 2rem;
}

/*
Si la pantalla tiene como maximo 720, sobreescribe la clase agregandole la siguiente definicion
*/
@media (max-width: 720px) {
    .avatarResponsive{
        height:280px;   
    }

    .sectionFooter{
        margin-top:40px;
    }

    .sobretema{
        text-align: center !important;
    }
    
    .textosobre{
        text-align: center !important;
    }
}

/*
Si la pantalla es aun mas chica, sobreescribe la clase agregandole la siguiente definicion
*/
@media (max-width: 400px) {
    .avatarResponsive{
        height:180px;   
    }

    .sectionFooter{
        margin-top:40px;
    }
    .row {margin-left: 0px; margin-right: 0px}
    
    @media (min-width: 60rem){
        .iphonefoto {flex-direction: row}
    }

    .sectionInfoPersonal > div {
        margin-top: 3rem;
    }

    .textosobre{
        text-align: center !important;
        width: 80%;
    }
    
    .sectionInfoPersonal{
        margin: 0;
    }
}