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



body {
    overflow-x: hidden;
}

p {
    font-size: 1.5vw;
}

h1 {
    font-size: 2vw;
}



#principal {

    height: 100vh;
    position: relative;
    width: 100%;
    top: 0;

}

.div_top {
    /* background: none; */
    background-color: rgba(4,7,7,0.87);
    position: relative;
    z-index: 30;
}



.bg-top {

    background-attachment: fixed;
    background-image: url(../../backgournds/topRule/tatame-de-cima-lagoa.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    width: 100%;
    z-index: 20;




}

#modal-menu-fullscreen{
    display: none;
}

#modal-menu-fullscreen:target {
    
    background-color: var(--shadow-black-04);
    bottom: 0;
    display: block;
    left: 0;
    overflow: unset;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999999999999;
}

#container-fullscreen-nav {
 
    background-color: var(--atos-blue-ligth);
    display: block;
    height: 99%;
    margin: 0.3% auto;
    overflow: auto;
    position: relative;
    width: 99%;
}

#fullscreen-nav {
    display: grid;
    justify-content: center;
    justify-items: center;
    padding: 3vh;
    margin: auto;
}

.close-bt-fullscreen {
    right: 2vw;
    top: 2vh;
    font-size: 2.5vw;
    position: absolute;
    color: white;
    cursor: pointer;
    text-decoration: none;

}

#fullscreen-nav a {
    color: white;
    font-size: 3.5vh;
    padding-left: 7vh;
    padding-right: 7vh ;
    padding-top: 2.5vh;
    padding-bottom: 2.5vh;
    text-decoration: none;
}

#fullscreen-nav a:hover {
    /* border: solid white; */
    border-radius: 30px;
    transition: 0.09s;
    transform: translate3d(0, -0.2vw, 1vw);

    background-color: white;
    color: var(--atos-blue-ligth) ;

}


.logo-principal {
    background-image: url(../../backgournds/topRule/logo-atos-florianopolis.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80vh;
    height: 100%;
    opacity: 1;
    position: absolute;
    position: absolute;
    width: 100%;
    z-index: 60;
}

nav.top-minibar-nav {
    
    align-items: center;
    background-color: var(--atos-blue-ligth);
    display: flex;
    height: 5vh;
    justify-content: center;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: .8s;
    width: 100%;
    z-index: 400;

}

nav.top-minibar-nav.revel {
    opacity: 1;
    position: sticky;

}


nav.top-minibar-nav:hover {
    transform: translate3d(0, 0, 0.1vw);
    height: 8vh;
}

nav.top-nav {

    align-items: center;
    background-color: var(--shadow-black-04);
    display: flex;
    height: 11vh;
    justify-content: center;
    position: absolute;
    top: 0;
    top: 0;
    width: 100%;
    z-index: 400;



}

#menu-hamburger-bt {
    align-content: center;
    align-items: center;
    display: flex;
    height: 70%;
    justify-content: center;
    justify-items: center;
    margin-bottom: auto;
    margin-top: auto;
    position: absolute;
    width: 5vw;
    transition: 0.5s;
    text-decoration: none;
    cursor: pointer;
}

/* #menu-hamburger-bt:hover {
    transform: translate3d(0, 0.1vw, 0.1vw);
} */


#container-bt-expand-minibar {
    background-image: url(../../icon/down-arrow-white.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 2.5vh;
    opacity: 1;
    width: 1vw;
}

#span-menu-minibar {
    align-items: center;
    color: white;
    display: flex;
    font-size: 0.9vw;
    height: 5vh;
    justify-content: center;
    width: 3vw;
}







a.top-nav {

    color: #f2f2f2;
    margin-right: 10px;
    padding-right: 7.5px;
    padding: 5px;
    text-decoration: none;


}

a.top-nav:hover {
    
    align-items: center;
    border: none;
    color:  var(--shadow-black);
    display: flex;
    height: 45px;   
    justify-content: center;
    font-weight: 600;

}


a.top-nav:active {
    
    align-items: center;
    background-color: var(--white);;
    border: none;
    color:  var(--shadow-black);
    display: flex;
    height: 45px;   
    justify-content: center;
}

.box-shadow-img {
    box-shadow: var(--shadow);
    border-radius: 1.5%;
    background-color: var(--white);;

}

.text-shadow {
    text-shadow: var(--shadow);
}


.container-bio{
    position: relative;
    height: 290vh;

}



#container-self {

    height: 76%;
    overflow: hidden;
}

#container-self.extend-text {
    display: inline-block;
    height: 100%;
    width: 100%;
}





p.bio{

    padding-bottom: 2vh;
    position: relative;
}

.container-self-professor {
    float: left;
    height: 57vh;
    position: relative;
    top: 0vh;
    width: 39vw;
}

.bio.self-description {

    align-items: center;
    height: 49vh;
    justify-content: center;
    overflow: hidden;
    padding-top: 6vh;
    position: relative;
    text-align: justify;

}

.bio.self-description.extend-text{
    height: 100%;

}


.self-img-description {

    align-items: center;
    bottom: 6vh;
    height: 4vh;
    justify-content: center;
    position: absolute;
    text-align: center;
    width: 100%;
    margin-top: 4vh;
}


.self-principal-bio {
    background-image: url(../../backgournds/biografia/self_pedro_mello.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 37vw;
    height: 80%;
    left: 1vw;
    position: absolute;
    top: 0vh;
    width: 90%;

}

#container-self-text  {
    
    background-color: var(--shadow-black-09);
    color: var(--white);
    height: 80%;
    max-height: 74vh;
    padding: 1vh;
    position: relative;
    text-align: center;
    width: 100%;

}

#container-self-text.space-extend-self-container {

    top: 15vh;
}

#contaier-self-text.extend-text {
    /* max-height: 132vh; */
}

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

}

#container-text-bio{

    height: 71%;
    overflow: hidden;
    position: relative;
}


#container-text-bio.extend-text{

    height: 100%;
    display: inline;

}



a.extend-text {

    align-items: center;
    background-color: var(--atos-blue-dark);
    border-radius: 2%;
    bottom: 20vh;
    box-shadow: var(--shadow);
    display: flex;
    font-size: 1.5vw;
    height: 7vh;
    justify-content: center;
    left: 39vw;
    position: absolute;
    transition: 1s;
    width: 15vw;
    z-index: 20;
}

a.extend-text:hover {
    background-color: var(--atos-blue-ligth);
    transform: translate3d(0.1vw, 0, 0);
    
}

a.extend-text.hidden {
    visibility: hidden;
    transition: none;
}

h1.bio{
    position: relative;
    display: inline-block;

}

h1.bio.self-title {
    
    padding-bottom: 2vh;
    left: 7vw;
    
}

div.bio.self-description {

    color: var(--white);
    display: inline-block;
    height: 100%;
    padding-top: 3vh;
    padding: 0;
    top: 1vh;
    width: 90%;
}
    


.transition1 {
    transition: 1s;
}