* {
    margin: 0%;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    }

a{
    font-family: 'Lato';
    color: #3C3C3B;
}

img{
    max-width: 100%;
    height: auto;
}


/* HEADER */


h1{
    font-family: 'Lato';
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    color: #6f6f6e;
    padding: 2% 0% 0% 0%;
}

/* MAIN */


#imagen{
    padding: 0% 40% 0% 40%;
}


#box-alumnas{
    background-color: #FBBA0E;
    padding: 2%;
}

h2{
    font-family: 'Lato';
    text-align: center;
    color: white;
    font-weight: 900;
    font-size: 30px;
}

h3{
    font-family: 'Lato';
    text-align: left;
    color: white;
    font-weight: 300;
    font-size: 20px;
    padding: 25% 0% 0% 2%;
}

#alumnas{
    display: flex;
    width: 100%;
}

#alumnas div{
    display: flex;
    text-align: center;
    width: 50%;
}

#wanda{
    padding: 0% 0% 0% 15%;
}

#marina{
    padding: 0% 15% 0% 0%;
}

    .alumnas{
        filter: alpha(opacity=40);
        -moz-opacity: 0.4;
        opacity: 0.4;
        -khtml-opacity: 0.4;
        -webkit-transition: all 0.75s ease;
        transition: all 0.75s ease;
    }

    .alumnas:hover{
        filter: alpha(opacity=100);  
        -moz-opacity: 1.0;  
        opacity: 1.0;
        -khtml-opacity: 1.0; 
        -webkit-transition: all 0.75s ease;
        transition: all 0.75s ease;
    }


#menu{
    padding: 2%;
}

#menu ul{
    display: flex;
}

#menu ul li{
    width: 25%;
    text-align: center;
}

#menu ul li a{
    color: #E72585;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    padding: 4% 30%;
    width: 100%;
}

    #menu ul li a:hover{
        color: white;
        font-weight: 700;
        background-color: #E72585;
        -webkit-transition: all 0.75s ease;
        transition: all 0.75s ease;
    }


#datosacademicos{
    background-color: #674192;
    padding: 2%;
}

#datos{
    display: flex;
    background-color: white;
    border-radius: 10px;
    margin: 2%;
    padding: 0% 3% 3% 3%;
}

.datos{
    font-family: 'Lato';
    color: #6f6f6e;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    margin: 3% 0% 0% 4%;
    width: 33%;
}

span{
    font-style: normal;
}

h4{
    color: #674192;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    margin: 0% 0% 3% 0%;
}

h5{
    font-family: 'Lato';
    color: white;
    font-size: 14px;
    font-weight: 300;
    text-align: center;
}


/* FOOTER */


footer{
    background-color: white;
    padding: 3% 4% 3% 4%;
}

footer p{
    padding: 2%;
    font-family: 'Lato';
    font-size: 12px;
    font-style: italic;
    color: #6f6f6e;
    text-align: center;
    border-style: solid;
    border-color: #B2B2B1;
    border-width: 1px;
    border-left-color: white;
    border-right-color: white;
}

/* RESPONSIVE */

    /* TABLET: 480px - 800px */

    @media (max-width:50em) {
    
        h1{
            font-size: 11px;
        }
        
        #imagen{
            padding: 0% 30% 0% 30%;
        }
        
        #box-alumnas{
            padding: 1%;
        }
        
        h2{
            font-size: 26px;
        }
        
        h3{
            font-size: 16px;
            padding: 20% 0% 0% 1%;
        }
        
        #wanda{
            padding: 0% 0% 0% 10%;
        }

        #marina{
            padding: 0% 10% 0% 0%;
        }
        
        #datosacademicos{
            padding: 5%;
        }
        
        #datos{
            display: block;
            padding: 3%;
            margin: 5%;
        }

        .datos{
            font-size: 10px;
            margin: 3% 0% 3% 10%;
            width: 100%;
        }

        h4{
            font-size: 12px;
        }

        h5{
            font-size: 11px;
        }
        
        footer{
            padding: 5% 7% 5% 7%;
        }

        footer p{
            padding: 0%;
            font-size: 11px;
            border-style: none;
        }
        
    }


    /* MOBILE: 320px - 480px */

    @media (max-width:30em) {
        
        h1{
            font-size: 10px;
        }
        
        #imagen{
            padding: 0% 20% 0% 20%;
        }
        
        #box-alumnas{
            padding: 3%;
        }
        
        h2{
            font-size: 18px;
        }
        
        #alumnas div{
            display: block;
        }
        
        h3{
            font-size: 12px;
            padding: 0%;
            text-align: center;
            font-weight: 400;
        }
        
        #wanda{
            padding: 0% 0% 0% 5%;
        }

        #marina{
            padding: 0% 5% 0% 0%;
        }
        
            .alumnas{
                filter: alpha(opacity=100);  
                -moz-opacity: 1.0;  
                opacity: 1.0;
                -khtml-opacity: 1.0;
            }

            .alumnas:hover{
                filter: alpha(opacity=100);  
                -moz-opacity: 1.0;  
                opacity: 1.0;
                -khtml-opacity: 1.0;
            }
        
        #menu{
            padding: 0%;
            margin: 5% 10% 5% 0%;
        }
        
        #menu ul{
            display: block;
        }
        
        #menu ul li{
            width: 100%;
            margin: 3% 0% 3% 0%;
            padding: 3%;
            background-color: #E72585;
            color: #E72585;
            border-radius: 10px;
        }
        
        #menu ul li a{
            color: white;
            font-weight: 300;
            border-radius: 0px;
            font-size: 16px;
            padding: 0%;
            width: 100%;
        }
        
            #menu ul li a:hover{
                font-weight: 300;
                border-radius: 0px;
                font-size: 16px;
                padding: 0%;
                width: 100%;
                color: white;
            }

        #datosacademicos{
            padding: 5%;
        }
        
        #datos{
            display: block;
            padding: 3%;
            margin: 5%;
        }

        .datos{
            font-size: 10px;
            margin: 3% 20% 3% 10%;
            width: 100%;
        }

        h4{
            font-size: 12px;
            padding: 5% 20% 0% 0%;
        }

        h5{
            font-size: 11px;
        }
        
        footer{
            padding: 5% 7% 5% 7%;
        }

        footer p{
            padding: 0%;
            font-size: 11px;
            border-style: none;
        }
        
    }