@charset "utf-8";

body {
    margin: auto;
    align-items: center;
}

#container_1 {
    width: 1024px;
    height: auto;
    display: flex;
    flex-direction: column;
    background-position: center;
    margin: auto;
}

#catch_n1 {
    width: 81px;
    height: 24px;
    background-image: url(images/catch_n1.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 28px;
    margin-left: 17px;
}

#tab {
    width: 143px;
    height: 798px;
    background-image: url(images/tab/Tab.svg);
    display: flex;
    flex-direction: column;
    position: absolute;
   }

.tabiv{
    visibility: hidden;
    overflow-x: hidden;
	max-width: 0px;
    transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.tabv{
    visibility: visible;
    overflow-x: hidden;
	max-width: 150px;
    transition-property:all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    
}

#home_icon {
    width: 56px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/tab/home_icon.svg);
    margin-top: 100px;
    margin-left: 44px;
}

#extending_directions {
    width: 143px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/tab/Extending_Directions.svg);
    margin-top: 50px;
}

#house {
    width: 70px;
    height: 9px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/tab/house.svg);
    margin-top: 20px;
    margin-left: 10px;
}

#communes {
    width: 95px;
    height: 7px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/tab/communes.svg);
    margin-top: 20px;
    margin-left: 10px;
    
}

#individual {
    width: 143px;
    height: 44px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/tab/Individual.svg);
    margin-top: 20px;
    
}

#rethinking {
    width: 112px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/tab/rethinking.svg);
    margin-top: 20px;
    margin-left: 10px;
    
}

#under {
    width: 101px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/tab/under.svg);
    margin-top: 20px;
    margin-left: 10px;
    
}

#remodelling {
    width: 143px;
    height: 44px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/tab/remodelling.svg);
    margin-top: 20px;
    
}

#home_mind {
    width: 119px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/tab/home_mind.svg);
    margin-top: 20px;
    margin-left: 10px;
    
}

#communicating {
    width: 143px;
    height: 44px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/tab/Communicating.svg);
    margin-top: 20px;
    
}

#open {
    width: 143px;
    height: 44px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/tab/Open_Directions.svg);
    margin-top: 20px;
}

#close {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/tab/cross_icon.svg);
    margin-top: 50px;
    margin-left: 65px;
}
#back_to_top{
    width: 37px;
    height: 37px;
    margin-left: 24px;
    margin-top: 695px;
    background-image: url(images/back_to_top.svg);
    position: fixed;
}
#container_2{
    width: 1024px;
    height: 697px;
    display: flex;
    flex-direction: column;
    background-image: url(images/linhas.png);
}
#first_box{
    width: 1024px;
    height: 148px;
    display: flex;
    flex-direction: row;
}

#box_entrada {
    width: 286px;
    height: 57px;
    margin-left: 60px;
}

.entrada_cap {
    width: 286px;
    height: 57px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/entrada_cap.png);
}

.entrada_cap:hover {
    width: 286px;
    height: 57px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/entrada_cap_2.png);
}
#whole_system{
    width: 252px;
    height: 118px;
    margin-left: 310px;
    margin-top: 30px;
}
.whole_system{
    background-image: url(images/whole.png);
}
.whole_system:hover{
    background-image: url(images/whole_2.png);
}
#another_box{
    width: 1024px;
    height: 101px;
    margin-top: 81px;
    display: flex;
    flex-direction: row;
}
#connectedness{
    width: 259px;
    height: 101px;
    margin-left: 87px;
}
.connectedness{
    background-image: url(images/connectedness.png);
}
.connectedness:hover{
    background-image: url(images/connectedness_2.png);
}

#cultural_space{
    width: 207px;
    height: 77px;
    margin-left: 382px;
}
.cultural_space{
    background-image: url(images/cultural.png);
}
.cultural_space:hover{
    background-image: url(images/cultural_2.png);
}
#wtf_box{
    width: 1024px;
    height: 150px;
    margin-top: 143px;
    display: flex;
    flex-direction: row;
}
#environmental{
    width: 306px;
    height: 87px;
    margin-left: 4px;
}
.environmental{
    background-image: url(images/environmental.png);
}
.environmental:hover{
    background-image: url(images/environmental_2.png);
}
#spaceship_earth{
    width: 245px;
    height: 107px;
    margin-left: 190px;
    margin-top: 43px;
}
.spaceship_earth{
    background-image: url(images/spaceship.png);
}
.spaceship_earth:hover{
    background-image: url(images/spaceship_2.png);
}
#reach_the_stars{
    width: 182px;
    height: 17px;
    margin-top: 13px;
    margin-left: 10px;
}
.reach_the_stars{
    background-image: url(images/reach.png);
}
.reach_the_stars:hover{
    background-image: url(images/reach_2.png);
}
#container_3{
    width: 1024px;
    height: auto;
    display: flex;
    flex-direction: column;
}
#the_place{
    width: 381px;
    height: 237px;
    margin-left: 147px;
    margin-top: 80px;
    background-image: url(images/title.png)
}
#set_1{
    width: 909px;
    height: 2052px;
    margin-top: 53px;
    margin-left: 68px;
    background-image: url(images/set_1.png);
}
#plus_1{
    width: 340px;
    height: 24px;
    margin-top: 1892px;
    margin-left: 21px;
    background-image: url(images/plus_icon.svg);
    background-repeat: no-repeat;
    background-position: right center;
}
#legenda_1{
    width: 307px;
    height: 24px;
    background-image: url(images/legenda_1.png);
    visibility: hidden;
}

#set_2{
    width: 764px;
    height: 961px;
    margin-top: 144px;
    margin-left: 130px;
    background-image: url(images/set_2.png);
}
#plus_2{
    width: 315px;
    height: 37px;
    margin-top: 733px;
    margin-left: 557px;
    background-image: url(images/plus_icon.svg);
    background-repeat: no-repeat;
    background-position: left top;
}
#legenda_2{
    width: 283px;
    height: 37px;
    margin-left: 30px;
    background-image: url(images/legenda_2.png);
    visibility: hidden;
}
#set_3{
    width: 849px;
    height: 1802px;
    margin-top: 88px;
    margin-left: 132px;
    background-image: url(images/set_3.png);
}

#set_4{
    width: 854px;
    height: 2114px;
    margin-top: 138px;
    margin-left: 33px;
    background-image: url(images/set_4.png);
}
#plus_3{
    width: 294px;
    height: 40px;
    margin-top: 1715px;
    margin-left: 141px;
    background-image: url(images/plus_icon.svg);
    background-repeat: no-repeat;
    background-position: left top;
}
#legenda_3{
    width: 294px;
    height: 40px;
    background-image: url(images/legenda_3.png);
    background-repeat: no-repeat;
    background-position: bottom;
    visibility: hidden;
}

#set_5{
    width: 712px;
    height: 2113px;
    margin-top: 209px;
    margin-left: 156px;
    background-image: url(images/set_5.png);
}

#set_6{
    width: 850px;
    height: 1615px;
    margin-top: 61px;
    margin-left: 87px;
    background-image: url(images/set_6.png);
}
#plus_4{
    width: 300px;
    height: 24px;
    margin-top: 548px;
    margin-left: 381px;
    background-image: url(images/plus_icon.svg);
    background-repeat: no-repeat;
    background-position: left top;
}
#legenda_4{
    width: 270px;
    height: 24px;
    margin-left: 30px;
    background-image: url(images/legenda_4.png);
    visibility: hidden;
}

#plus_5{
    width: 200px;
    height: 22px; 
    margin-top: 10px;
    margin-left: 160px;
    background-image: url(images/plus_icon.svg);
    background-repeat: no-repeat;
    background-position: left;
}
#legenda_5{
    width: 170px;
    height: 10px;
    margin-top: 5px;
    margin-left: 30px;
    background-image: url(images/legenda_5.png);
    background-repeat: no-repeat;
    background-position: bottom;
    visibility: hidden;
}

#final_box{
    width: 850px;
    height: 95px;
    margin-top: 100px;
    margin-left: 86px;
    margin-bottom: 21px;
    display: flex;
    flex-direction: row;
}
#seta_retroceder{
    width: 81px; 
    height: 24px;
    background-image: url(images/seta_prev.svg);
}

#assinatura{
    width: 276px;
    height: 11px;
    margin-top: 80px;
    margin-left: 201px;
    background-image: url(images/down_header.png);
}

#seta_avançar{
    width: 81px;
    height: 24px;
    margin-left: 211px;
    background-image: url(images/seta_next.svg);
}