*,
*::before,
*::after {
    
    box-sizing: border-box;
    font-family: 'Comfortaa', Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

:root{
    --atos-blue-dark-01: rgba(35,69,179,0.1);
    --atos-blue-dark: rgba(35,69,179,1);
    --atos-blue-lightness: rgba(127, 219, 255, 0.84);
    --atos-blue-ligth-04:rgba(0,155,216,0.4);
    --atos-blue-ligth-08:rgba(0,155,216,0.8);
    --atos-blue-ligth: rgba(0,155,216,1) ;
    --atos-blue-medium: rgba(37, 93, 178,1);
    --shadow-black-04: rgba(4,7,7,0.4);
    --shadow-black-07: rgba(4,7,7,0.9);
    --shadow-black-09: rgba(4,7,7,0.9);
    --shadow-black: rgba(4,7,7);
    --shadow: 0 15px 10px rgba(0,0,0,0.5);
    --white-09: rgba(242, 242, 242, 0.9);
    --white:rgba(242, 242, 242, 1);
    
}


body {
    overflow-x: hidden;
}

p {
    font-size: 1.5vw;
}

h1 {
    font-size: 2vw;
}


@media all and (min-width:320px) and (max-width:479px)  {
    /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 

       html {
           overflow-x: hidden;
       }
       #top-nav {
           display: none;
       }

       .logo-principal {
           background-size: 53vh;
       }

       nav.top-minibar-nav {
           opacity: 1;
           top: unset;
           bottom: 0;
           position: fixed;
           height: 9vh;
       }
       

       #menu-hamburger-bt {
           width: 100%;
           height: 100%;
       }

       #span-menu-minibar {
           font-size: 4.9vw;
           width: 18vw;
       }

       #container-bt-expand-minibar {
           width: 5vw;
           height: 7.5vh;
           background-image: url(../../icon/down-arrow-white-up.png)
       }

       #wpp-contact {
           width: 24vw;
           height: 13vh;
           bottom: 9vh;
       }

       #fullscreen-nav a {
           font-size: 6.5vw;
           padding-left: 3vh;
           padding-right: 3vh;
       }
   
       .close-bt-fullscreen {
           right: 3vw;
           font-size: 8.5vw;
       }

       #container-self {
           display:grid;
           height: 83%;
       }

       #container-self-text {
           width: 100%;
           height: 100%;
           max-height: 120vh;
       }

       .container-self-professor {
           width: 100%;
           margin: auto;
       }

       .self-principal-bio {
           position: relative;
           margin-left: auto;
           margin-right: auto;
           background-size: cover;
       }

       

       h1.bio.self-title {
           margin-left: auto;
           margin-right: auto;
           font-size: 10vw;
           margin-bottom: 3vh;
           left: unset;
           text-align: center;
       }

       .self-img-description {
           height: fit-content;
           position: relative;
           bottom: unset;
           margin-top: 3vh;
       }

       p.bio {
           font-size: 5.5vw;
       }

       a.extend-text {
           bottom: 0;
           font-size: 6vw;
           height: 12vh;
           left: unset;
           margin-left: auto;
           margin-right: auto;
           position: relative;
           width: 45vw;
       }

       #container-self-text.extend-text {
           max-height: 329vh;
       }


       .container-bio {
           height: 397vh;
       }

       .container-bio.extend-text {
           height: 605vh;
       }

      
   }

@media all and (min-width:480px) and (max-width:599px)  { 
    /* smartphones, Android phones, landscape iPhone */

    
    html {
        overflow-x: hidden;
    }

    #top-nav {
        display: none;
    }

    .logo-principal {
        background-size: 66vh;
    }

    nav.top-minibar-nav {
        opacity: 1;
        top: unset;
        bottom: 0;
        position: fixed;
        height: 8vh;
    }
    

    #menu-hamburger-bt {
        width: 100%;
        height: 100%;
    }

    #span-menu-minibar {
        font-size: 4.9vw;
        width: 18vw;

    }

    #container-bt-expand-minibar {
        width: 5vw;
        height: 7.5vh;
        background-image: url(icon/down-arrow-white-up.png)
    }



    #fullscreen-nav a {
        font-size: 3vh;
    }

    .close-bt-fullscreen {
        right: 3vw;
        font-size: 8.5vw;
    }

    #wpp-contact {
        width: 24vw;
        height: 13vh;
        bottom: 9vh;
        right: 5.5vw;
    }

    h1.bio.self-title {
        left: unset;
    }



}
@media all and (min-width:600px) and (max-width:800px) {
     /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
     #top-nav {
        display: none;
    }

    .logo-principal {
        background-size: 66vh;
    }

    nav.top-minibar-nav {
        bottom: unset;
        opacity: 1;
        position: fixed;
        top: 0;
        height: 10vh;
    }
    

    #menu-hamburger-bt {
        width: 100%;
    }

    #span-menu-minibar {
        font-size: 3.3vw;
        width: 12vw;
    
    }

    #container-bt-expand-minibar {
        width: 3vw;
        height: 6.5vh;
        background-image: url(icon/down-arrow-white.png);
    }


    #fullscreen-nav a {
        font-size: 4.2vw;
        padding-left: 3vh;
        padding-right: 3vh;
    }

    .close-bt-fullscreen {
        right: 3vw;
        font-size: 4vw;
    }

    
    #wpp-contact {
        width: 14vh;
        height: 11vh;
        bottom: 6vh;
    }


    #container-self-text.extend-text  {
        max-height: 311vh;
    
    }

    .container-bio {
        height: 384vh;
    }

     }
@media (min-width:801px) and (max-width:1020px)  { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 

    #top-nav {
        display: none;
    }

    .logo-principal {
        background-size: 66vh;
    }

    nav.top-minibar-nav {
        bottom: unset;
        opacity: 1;
        position: fixed;
        top: 0;
        height: 10vh;
    }
    

    #menu-hamburger-bt {
        width: 100%;
    }

    #span-menu-minibar {
        font-size: 3.3vw;
        width: 12vw;
    
    }

    #container-bt-expand-minibar {
        width: 3vw;
        height: 6.5vh;
        background-image: url(icon/down-arrow-white.png);
    }


    #fullscreen-nav a {
        font-size: 2.2vw;
        padding-left: 3vh;
        padding-right: 3vh;
    }

    .close-bt-fullscreen {
        right: 3vw;
        font-size: 4vw;
    }

    #wpp-contact {
        width: 14vh;
        height: 13vh;
        bottom: 6vh;
    }

}
@media (min-width:1025px) and (max-width:1280px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }