@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%20N1.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 28px;
    margin-left: 17px;
}

#box_entrada {
    width: 340px;
    height: 80px;
}

.entrada_cap {
    width: 340px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/textointrodutorio.png);
    margin-left: 595px;
}

.entrada_cap:hover {
    width: 340px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/Textointrodutoriohover.png);
    margin-left: 595px;
}

#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;
}

#container_2 {
    width: 1024px;
    height: 594px;
    display: flex;
    -webkit- display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    margin-top: 25px;
    background-image: url(images/linhas.png);
    background-repeat: no-repeat;
}

#sharing {
    width: 154px;
    height: 58px;
    margin-left: 266px;

}

.sharing {
    background-image:url(images/indicio1.png);
    
}

.sharing:hover {
    background-image:url(images/indi1laranja.png);
}

#box_1{
    width: 1024px;
    height: 66px;
    margin-top: 108px;
    display: flex;
    flex-direction: row;    
}
#new_people{
    width: 116px;
    height: 20px;
    margin-left: 98px;
    margin-top: 17px;
}

.new_people{
    background-image:url(images/indicio2.png);
}
.new_people:hover{
    background-image:url(images/indi2laranja.png);
}

#tecnology{
    width: 138px;
    height: 66px;
    margin-left: 545px;
}
.tecnology{
    background-image: url(images/indicio7.png);
}
.tecnology:hover{
    background-image:url(images/indi7laranja.png);
}

#achievements{
    width: 166px;
    height: 74px;
    margin-left: 285px;
    margin-top: 50px;
}

.achievements{
    background-image: url(images/indicio4.png);
}
.achievements:hover{
    background-image:url(images/indi4laranja.png);
}

#box_2{
    width: 1024px;
    height: 85px;
    margin-top: 3px;
    display: flex;
    flex-direction: row;
}

#small_things{
    width: 205px;
    height: 68px;
    margin-top: 14px;
    margin-left: 146px;
    position: relative;
}
.small_things{
    background-image: url(images/indicio3.png);
    background-size: contain;
    background-repeat: no-repeat;
        
}
.small_things:hover{
    background-image: url(images/indi3laranja.png);
}

#a_home{
    width: 110px;
    height: 50px;
    margin-top: 21px;
    margin-left: 261px;
}
.a_home{
    background-image: url(images/indicio6.png);
}
.a_home:hover{
    background-image:url(images/indi6laranja.png);
}

#utopic{
    width: 102px;
    height: 70px;
    margin-left: 84px;
}
.utopic{
    background-image: url(images/indicio8.png);
}
.utopic:hover{
    background-image: url(images/indi8laranja.png);
}

#be_free{
    width: 139px;
    height: 39px;
    margin-left: 460px;
    margin-top: 76px;
}
.be_free{
    background-image: url(images/indicio5.png);
}
.be_free:hover{
    background-image: url(images/indi5laranja.png);
}

#container_3{
    width: 1024px;
    height: auto;
    display: flex;
    -webkit- display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    margin-top: 82px;
}

#freedom{
    width: 263px;
    height: 54px;
    margin-left: 667px;
    background-image: url(images/Title%201.png);
}

#set_1{
    width: 744px;
    height: 658px;
    margin-top: 58px;
    margin-left: 192px;
    background-image: url(images/imagem1.png);
    background-repeat: no-repeat;
}
.video{
    margin-top: 263px;
}

#plus_1{
    width: 450px;
    height: 23px;
    margin-top: 10px;
    margin-left: 193px;
    background-image: url(images/plus1.svg);
    background-repeat: no-repeat;
    
}
#legenda_1{
    width: 408px;
    height: 11px;
    margin-left: 28px;
    background-image: url(images/legenda1.png);
    background-repeat: no-repeat;
    background-position: center;
    visibility: hidden;
}

#set_2{
    width: 596px;
    height: 737px;
    margin-top: 151px;
    margin-left: 160px;
    background-image: url(images/imagem2.png);
}

#plus_2{
    width: 200px;
    height: 72px;
    margin-top: 10px;
    margin-left: 519px;
    background-image: url(images/plus2.svg);
    background-repeat: no-repeat;
    background-position: top left;
}

#legenda_2{
    width: 166px;
    height: 62px;
    margin-left: 28px;
    background-image: url(images/legenda2.png);
    background-repeat: no-repeat;
    visibility: hidden;
}

#set_3{
    width: 850px;
    height: 1232px;
    margin-top: 76px;
    margin-left: 86px;
    background-image: url(images/imagem3.png);
}
#plus_3{
    width: 315px;
    height: 88px;
    margin-top: 1050px;
    margin-left: 520px;
    background-image: url(images/plus3.svg);
    background-repeat: no-repeat;
    background-position: left top;
}
#legenda_3{
    width: 290px;
    height: 88px;
    margin-left: 28px;
    background-image: url(images/legenda3.png);
    visibility: hidden;
}

#set_4{
    width: 822px;
    height: 821px;
    margin-top: 138px;
    margin-left: 86px;
    background-image: url(images/imagem4.png);
}
#pixel_estupido{
    width: 1px;
    height: 1px;
    margin-top: 200px
}
#plus_4{
    width: 320px;
    height: 62px;
    margin-top: 10px;
    margin-left: 622px;
    background-image: url(images/plus4.svg);
    background-repeat: no-repeat;
    background-position: left top;
}
#legenda_4{
    width: 280px;
    height: 62px;
    margin-left: 28px;
    background-image: url(images/legenda4.png);
    visibility: hidden;
}

#set_5{
    width: 853px;
    height: 1256px;
    margin-top: 27px;
    margin-left: 86px;
    background-image: url(images/imagem5.png);
}

#plus_5{
    width: 320px;
    height: 36px;
    margin-top: 10px;
    margin-left: 86px;
    background-image: url(images/plus5.svg);
    background-repeat: no-repeat;
    background-position: left top;
}

#legenda_5{
    width: 279px;
    height: 36px;
    margin-left: 28px;
    background-image: url(images/legenda5.png);
    visibility: hidden;
}

#set_6{
    width: 828px;
    height: 439px;
    margin-top: 135px;
    margin-left: 95px;
    background-image: url(images/imagem6.png);
}

#plus_6{
    width: 355px;
    height: 23px;
    margin-top: 10px;
    margin-left: 335px;
    background-image: url(images/plus5.svg);
    background-repeat: no-repeat;
    background-position: left;
}

#legenda_6{
    width: 314px;
    height: 11px;
    margin-left: 28px;
    background-image: url(images/legenda6.png);
    background-repeat: no-repeat;
    background-position: center;
    visibility: hidden;
}

#set_7{
    width: 690px;
    height: 585px;
    margin-top: 183px;
    margin-left: 86px;
    background-image: url(images/imagem7.png);
}
#plus_7{
    width: 320px;
    height: 23px;
    margin-top: 10px;
    margin-left: 422px;
    background-image: url(images/plus7.svg);
    background-repeat: no-repeat;
    background-position: left;
}

#legenda_7{
    width: 282px;
    height: 22px;
    margin-left: 28px;
    background-image: url(images/legenda7.png);
    visibility: hidden;
}

#set_8{
    width: 784px;
    height: 683px;
    margin-top: 63px;
    margin-left: 86px;
    background-image: url(images/imagem8.png);
}

#plus_8{
    width: 215px;
    height: 23px;
    margin-top: 10px;
    margin-left: 508px;
    background-image: url(images/plus7.svg);
    background-repeat: no-repeat;
    background-position: left;
}

#legenda_8{
    width: 183px;
    height: 11px;
    margin-left: 28px;
    background-image: url(images/legenda8.png);
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 5px;
    visibility: hidden;
}

#back_to_top{
    width: 37px;
    height: 37px;
    margin-left: 23px;
    margin-top: 615px;
    background-image: url(images/back_to_top.svg);
    position: fixed;
    
}

#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_Previousley.svg);
}

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

#seta_avancar{
    width: 81px;
    height: 24px;
    margin-left: 211px;
    background-image: url(images/Seta_Next.svg);
}