* {
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: black;
    font-family: "Questrial", sans-serif;
}

#pag1 {
    background-image: url(/imagens/h1_hero1.jpg.webp);
    background-color: rgba(0, 0, 0, 45%);
    background-blend-mode: multiply;
    background-size: cover;
    height: 110vh;
}

.logo {
    margin-left: 9%;
    margin-top: 4vh;
    vertical-align: middle;
    margin-bottom: 4vh;
}

.tel {
    color: white;
    text-decoration: none;
    font-size: 18px;
    margin-left: 40%;
}

.btn_free {
    padding: 14px 24px;
    background-color: #D6AB4C;
    color: white;
    text-decoration: none;
    margin-left: 2%;
    border: 1px solid #D6AB4C;
    transition: 0.4s;
}

.btn_free:hover {
    background-color: transparent;
    color: #D6AB4C;
}

#icon_barras {
    display: inline-block;
    width: 60px;
    margin-left: 2%;
    height: 40px;
}

#icon_barras span {
    border: solid 1px white;
    display: inline-block;
    width: 40px;
    margin: auto;
    margin-top: 8px;
}

.container {
    position: absolute;
    color: white;
    background-color: transparent;
    font-size: 18px;
    top: 325px;
    left: 300px
}

.Homeownership {
    margin-top: 1vh;
    font-size: 50px;

}

#playreel {
    position: absolute;
    bottom: 70px;
    left: 880px;
    font-size: 20px;
    width: 85px;
}
aside{
    width: 335px;
    height: 100vh;
    background-color: #111111;
    position: fixed;
    top: 0;
    right: -335px;
    z-index: 99;
    transition: 0.5s;
}
#check{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#check:checked+aside{right: 0;}
#check2{
    width: 25px;
    height: 25px;
    position: absolute;
    top: 5%;
    left: 3%;
    z-index: 2;
}

#playbutton {
    background-color: rgb(255, 255, 255);
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: solid 3px #D6AB4C;
    text-align: center;
    transition: 0.5s;
    position: absolute;
    bottom: 45px;
    left: 1000px;
}

#playbutton:hover {
    background-color: #D6AB4C;
}

#imgplay {
    width: 30px;
    margin-top: 25%;
}

#floaterpag1 {
    background-color: #D6AB4C;
    height: 100px;
    width: 350px;
    padding: 30px 20px;
    font-size: 18px;
    position: absolute;
    bottom: -280px;
    left: 600px;

}

#floaterpag {
    background-color: #D6AB4C;
    height: 100px;
    width: 350px;
    padding: 30px 20px;
    font-size: 18px;
    position: absolute;
    bottom: -280px;
    left: 900px;
}

#floaterblock {
    background-color: #D6AB4C;
    height: 100px;
    width: 35px;
    position: absolute;
    bottom: -280px;
    left: 1250px;
}

#floaterblockblack {
    width: 1585px;
    height: 78px;
    background-color: rgb(0, 0, 0);
    position: absolute;
    top: 100%;
}


/*pag 2*/

#pag2 {
    color: white;
    background-color: black;
    height: 83vh;
}

#learnmore {
    background-color: transparent;
    width: 146px;
    height: 54px;
    padding: 18px 30px;
    border: solid 1px #D6AB4C;
    transition: 0.5s;
    position: absolute;
    left: 55%;
    bottom: -44%;
}

#learnmore:hover {
    background-color: #D6AB4C;
}

#aboutustittle {
    font-size: 35px;
    position: absolute;
    left: 15%;
}

#aboutustext {
    font-size: 22px;
    line-height: 35px;
    position: absolute;
    left: 20%;
    bottom: -35%;
}

#loirin {
    width: 350px;
    position: absolute;
    left: 20%;
    bottom: -82%;
}

#studiotext {
    font-size: 17px;
    width: 350px;
    position: absolute;
    bottom: -35%;
    left: 55%;
}

#studiopic {
    position: absolute;
    left: 55%;
    bottom: -82%;
    width: 350px;
}

/*what we do*/
#whatwedo {
    color: white;
    background-color: black;
    height: 67vh;
}

#whatwedotittle {
    font-size: 44px;
    position: absolute;
    left: 15%;
    bottom: -95%;
}

#whatwedospace {
    width: 80%;
    height: 420px;
    position: absolute;
    left: 13%;
    bottom: -150%;
}
#comercial{
    position: absolute;
    top: 0;
    transition: 0.5s;
}
#comercial:hover{
    top: 10%;
    #comercialtittle {
        color: #D6AB4C;
    }
#imgcommercial:hover{
    filter: contrast(40%);
}
}
#comercialtittle {
    font-size: 32px;
    line-height: 44px;
}
#imgresidential:hover{
    filter: contrast(40%);
}
#comercialdescription {
    font-size: 14px;
}

#residential {
    position: absolute;
    top: 0;
    transition: 0.5s;
    left: 33%;
    bottom: 5.3%;
}
#residential:hover{
    top: 10%;
    #residentialtittle {
        color: #D6AB4C;
    }
}

#residentialtittle {
    font-size: 32px;
    line-height: 45px;
}

#residentialdescription {
    font-size: 14px;
}

#architecture {
    position: absolute;
    top: 0;
    transition: 0.5s;
    left: 66%;
    bottom: 6%;      
}
#imgarchitecture:hover{
    filter: contrast(40%);
}
#architecture:hover{
    top: 10%;
    #architecturetittle {
        color: #D6AB4C;
    }
}
#architecturetittle {
    font-size: 32px;
    line-height: 42px;
}

#architecturedescription {
    font-size: 14px;
}

/*projects*/
#projects {
    background-color: rgb(107, 107, 107);
    height: 96 vh;
}

#titleproject {
    font-size: 215px;
    -webkit-text-stroke: 1px white;
    -webkit-text-fill-color: transparent;
    position: absolute;
    bottom: -194%;
    left: 14%;
    z-index: 1;
}

#imgproject {
    width: 1100px;
    position: absolute;
    left: 15%;
    bottom: -256%;
    z-index: 2;
}

#casalaperla {
    margin: 0px 0px 30px;
    padding: 30px;
    color: white;
    width: 700px;
    height: 195px;
    z-index: 3;
    background-color: #D6AB4C;
    position: absolute;
    left: 15%;
    bottom: -265%;
    transition: 0.5s;
}

#casalaperla:hover {
    background-color: rgb(54, 54, 54);
    color: #D6AB4C;

    #laperla {
        color: white
    }
}

#casalaperladescription {
    font-size: 32px
}

#laperla {
    font-size: 14px;
    margin-top: 40px;
}

#projectbutton {
    background-color: #D6AB4C;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    left: 85%;
    bottom: 30%;
}

#imgseta {
    width: 30px;
    margin-left: 13px;
    margin-top: 14px;
}

/* why us */
#whyus {
    color: white;
    height: 40vh;
}

#whyuspace {

    width: 1300px;
    height: 500px;
    position: absolute;
    bottom: -340%;
    left: 15%;
}

#whyusimg {
    width: 600px;
    text-align: left;
}

#whyustittle {
    font-size: 45px;
    text-align: right;
    margin-top: -32%;
    margin-right: 33%;
}

#whyustext {
    font-size: 25px;
    position: absolute;
    right: 16%;
    top: 25%;
}

#learnmorewhyus {
    background-color: transparent;
    width: 146px;
    height: 54px;
    padding: 18px 30px;
    border: solid 1px #D6AB4C;
    transition: 0.5s;
    position: absolute;
    right: 34%;
    top: 70%;
}

#learnmorewhyus:hover {
    background-color: #D6AB4C;
}

#founder {
    text-align: center;
    margin-top: 100%;
}

#belaratext {
    margin-bottom: 50px;
    font-size: 24px;
}

#buck {
    margin-top: 15px;
    font-size: 14px;
}

/*archicture*/

#architectureworkplace {
    border: solid 1px white;
    width: 1000px;
    height: 200px;
    margin: 30px;
    color: white;
    position: absolute;
    left: 15%;
    transition: 0.5s;
}

#architectureworkplace:hover {
    background-color: rgb(39, 39, 39);

    #curating {
        color: #D6AB4C
    }

    #architecturebutton {
        background-color: #D6AB4C;
    }
}

#architecturedesing {
    height: 70vh;
    background-color: rgb(0, 0, 22);
}

#Architecturetext {
    font-size: 15px;
}

#curating {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 32px;
}

#roomimg {
    position: absolute;
    left: 5%;
    margin-top: 1%;
    width: 175px;
}

#textcurating {
    position: absolute;
    left: 30%;
    margin-top: 3%;
}

#architecturebutton {
    background-color: gray;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    left: 85%;
    margin-top: 75px;
}

#architectureworkplace2{
    border: solid 1px white;
    width: 1000px;
    height: 200px;
    margin: 30px;
    color: white;
    position: absolute;
    bottom: -470%;
    left: 15%;
    transition: 0.5s;
}
#architectureworkplace2:hover{
    background-color: rgb(39, 39, 39);

    #curating {
        color: #D6AB4C
    }

    #architecturebutton {
        background-color: #D6AB4C;
    }
}

/*rodape*/
#rodape{
    height: 75vh;
    background-color: rgb(20, 20, 20);
    color: white;
}
#logo {
    margin-left: 9%;
    margin-top: 10%;
    vertical-align: middle;   
}
#tittlefooter{
    font-size: 20px;
    margin-bottom: 25px;
    font-weight: bold;
}
#linksfooter{
    font-size: 16px;
    text-decoration: none;
    color: white;
}
#linksfooter:hover{
    text-decoration: underline;
}
#linksdiv{
    line-height: 40px;
}
#linksareafooter{
    position: absolute;
    left: 24%;
    margin-top: -5vh;
}
#linksareafooter2{
    margin-top: -5vh;
    position: absolute;
    left: 40%;
}
#newlettertittle{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 25px;
}
#newlettertext{
    color: gray;
    margin-bottom: 15px;
}
#emailfooter{
    width: 300px;
    height: 55px;
    border-radius: 5%;
}
#newsletterfooter{
    margin-top: -5vh;
    position: absolute;
    right: 15%;
}
#colorlib{
    color: #D6AB4C;
}
#footertext{
    font-size: 15px;
    position: absolute;
    left: 30%;
    margin-top: 20%;
}