@import url('reset.css');
@import 'https://fonts.googleapis.com/css?family=Poppins:200,300,400,600" rel="stylesheet';




html, body { height:100%; width:100%; }
/*body { position:relative; }*/
/* { font-family:'Poppins', sans-serif; }*/

.page_sobre         { background-color:#D8A18B; }
.page_projetos  { background-color:white; }
.page_projeto   { background-color:white; }


h1,h2,h3,h4,h5,p,a {
    font-family:Poppins, sans-serif;
    color:white;
}




a { font:inherit; color:#89584E; transition: opacity .2s ease-in-out; }
/*a:hover {opacity:.4;}*/

h3 a:hover  { border-bottom:2px solid white; }






header {
    width: 90%;
    margin: 50px auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}
header a {
    font-family:Poppins, sans-serif;
    color: black;
}
header #logo       { width:250px; height: 150px; }





/*----------------*/
/*----SOBRE---*/
/*----------------*/
.page_sobre         {  }
.page_sobre header a {
    color: white;
}
@media screen and (min-width: 741px) {
    .page_sobre h1 { font-size:15px; }
    .page_sobre h2 { font-size:22px; }
    .page_sobre h3 { font-size:15px; }
}

@media screen and (max-width: 740px) {
    .page_sobre h1 { font-size:15px; }
    .page_sobre h2 { font-size:22px; }
    .page_sobre h3 { font-size:15px; }
}

@media screen and (max-width: 600px) {
    .page_sobre h1 { font-size:15px; }
    .page_sobre h2 { font-size:15px; }
    .page_sobre h3 { font-size:15px; }
}

.page_sobre .part1 {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 100px;
    font-weight: 200;
}
.page_sobre .part1 > div {
    width: 46%;
    display: inline-block;
    vertical-align: top;
}
.page_sobre .part1 > .partLeft {
    margin-right: 4%;
}
.page_sobre .part1 > .partLeft img {
    width:100%;
}
.page_sobre .part1 .partRight p {
    line-height: 1.7;
    font-size: 14px;
}

@media screen and (max-width:740px) {
    .page_sobre .part1 > div {
        width: 100%;
    }
    .page_sobre .part1 > .partLeft {
        margin-right: 0;
        margin-bottom: 40px;
    }
}




.page_sobre .part2 {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 100px;
    text-align: center;

}
.page_sobre .part2 h1 {
    font-size:13px;
    line-height: 2;
    font-weight: 300;
}


.page_sobre .part3 {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 100px;
    padding-bottom: 0px;
    text-align: center;

}
.page_sobre .part3 h2 {
    font-size: 17px;
    margin-bottom: 20px;
    font-weight: 300;
}
.page_sobre .part3 h3 a {
    margin: 15px;
    font-size: 13px;
    letter-spacing:.14em;
    transition: opacity .3s ease-in-out;
}
.page_sobre .part3 h3 a:hover {
    opacity: .6;
    }




/*----------------*/
/*----PROJETOS---*/
/*----------------*/
.page_projetos          {  }
.lista_projetos             { width:90%; max-width:1400px; margin:40px auto 0; }
.lista_projetos > a         { display:inline-block; width:32.32%; margin-right:1%; margin-bottom:40px; background-size:cover; background-position:center;  }



.lista_projetos > a > div           {  }
.lista_projetos > a:hover > div         {  }


.lista_projetos > a > .imageWrap                 { width:100%; background-size:cover; background-position:center; }
.lista_projetos > a > .imageWrap > .image          { width:100%; transition:opacity .3s ease-in-out; background-size:cover; background-position:center; }
.lista_projetos > a:hover > .imageWrap > .image    { opacity:0; }
.lista_projetos > a > .title            { padding-top:20px; }
.lista_projetos > a > .title h2           { font-size:12px; color:black; text-align:left; display:inline-block; vertical-align:middle; width:100%; letter-spacing: 1px; }



@media screen and (min-width:1301px) {
    .lista_projetos > a > .imageWrap > .image         { height:500px; }
}
@media screen and (max-width:1300px) {
    .lista_projetos > a > .imageWrap > .image         { height:450px; }
}
@media screen and (max-width:1000px) {
    .lista_projetos > a > .imageWrap > .image         { height:400px; }
}
@media screen and (max-width:740px) {
    .lista_projetos > a > .imageWrap > .image         { height:350px; }
}
@media screen and (max-width:600px) {
    .lista_projetos > a > .imageWrap > .image         { height:300px; }
}
@media screen and (max-width:500px) {
    .lista_projetos > a > .imageWrap > .image         { height:250px; }
}





.page_projeto .lista_projetos           { width:90%; max-width:1200px; margin:40px auto 0; }




@media screen and (min-width: 741px) {
    .lista_projetos > a:nth-child(3n)           { margin-right:0;  }
}
@media screen and (max-width: 740px) {
    .lista_projetos > a         { width:48%; margin-right:4%; }
    .lista_projetos > a:nth-child(2n)           { margin-right:0; }
}
@media screen and (max-width: 600px) {

}


.grid-item  { width:50% }
.grid-item img  { width:100% }





/*---------------*/
/*----PROJETO---*/
/*---------------*/
.page_projeto                       {  }

#prev, #next {
    position: fixed;
    top: 50%;
    width: 50px;
    height: 50px;
}
#prev   {
    left: 2%;
}
#next   {
    right: 2%;
}
#prev img, #next img {
    width: 100%;
    transition: all .3s ease-in-out;
}
#prev:hover img, #next:hover img {
    opacity: .4;
}
#prev:hover img {
    margin-left: -10px;
}
#next:hover img {
    margin-left: 10px;
}

.page_projeto #description {
    width: 90%;
    max-width: 1200px;
    margin: 100px auto;
}
.page_projeto #description h1                  {
    font-size:18px;
    font-weight:600;
    letter-spacing:6px;
    margin-bottom: 30px;
}
.page_projeto #description h2                  {
    font-size:12px;
    font-weight:400;
    margin-bottom: 30px;
    letter-spacing: 1px;
}
.page_projeto #description p                   {
    font-size:13px;
    font-weight:300;
    letter-spacing:1px;
    line-height: 1.7;
}



.page_projeto #imgContainer {
    width:90%;
    max-width: 1200px;
    margin:0 auto;
}
.page_projeto #imgContainer img {
    width: 49%;
    display: inline-block;
    margin-bottom: 2%;
    vertical-align: top;
}
.page_projeto #imgContainer img:nth-child(3n - 2) {
    width: 100%;
}

.page_projeto #imgContainer img:nth-child(3n) {
    margin-left: 2%;
}








.centerParent                           { text-align:center; width:100%; height:100%; }
.centerParent:before                    { content:''; display:inline-block; height:100%; vertical-align:middle; margin-right:-.29em; }
.centerChild                            { display:inline-block; vertical-align:middle; width:100%;}