/*
CSS DE INTERFACE GERAL
*/

*{
    margin: 0;
    box-sizing: border-box;
}
body{
    font-size: 20px;
    overflow-x: hidden;
    background-color: #fff;
}
a{
    font-family: 'Montsserat' , sans-serif;
    text-decoration: none;
    color: #000;
}
a:visited{
    color: #000;
}
.wa-me img{
    width: 65px;
    position: fixed;
    bottom: 45px;
    right: 45px;
}
/*
 HEADER
*/
header{
    
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat' , sans-serif;
    font: bold;
    height:80px;
    background-color: #fff;
    color: #5f5654;
}
.header{
    background-color: #fff;
    position: fixed;
    width: 100vw;
    height: 80px;
    padding-left: 50px;
    padding-right: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.logoimg img{
    width: 190px;
    height: 60px;
    margin-left: 10px;
   
    border-radius: 30px;
}

.contato a{
    
   color: #000;
    text-decoration: none;
}
.contato img {
    width: 35px;
    
}
.menu ul{
    padding: 0;
}
.barra {
    height: 30px;
    width: 3px;
    background-color: #5f5654;
    margin: 7px;
}

.menu{
    flex:1;
    display: flex;
    justify-content: center;
}
.menu ul,
.menu li{
    list-style: none;
}
.menu ul{
    display: flex;
    
}

.menu li a{
    color: #5f5654;
    font-size: 18px;
    
    height: 70px;
    font-weight:bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    
    
}
/* DROPDOWN MENU */

.dropdown{
    position: relative;
}
.dropdown-content{
    display: none;
    
    position: absolute;
    z-index: 1;
    background-color: #ffffff;
}
.contentflex{
    text-transform: uppercase;
}
.menuborder{
    border-bottom: 1px #000 solid;
}
.dropdown-content a{
    display: block;
    padding: 10px;
    font-family: 'Montserrat', sans-serif;
    
}
.dropdown:hover .dropdown-content{
    display: block;
}
.menu li a:hover, 
.menu .active a
{
    border-bottom: 2px solid #555350;
    
}
/*
 BANNER
*/
.banner{
    width: 100vw;
    height: calc(100vh - 25vh);
    
}
.slidecomand{
   display: flex;
    height: inherit;
    justify-content: space-between;
    align-items: center;
    
    padding-right: 10px;
}
.slidecontent h1{
    width: 940px;
    font-family: 'Oswald', sans-serif;
    font-size: 90px;
    color: #ffffff;
}
.slidecontent button{
    border: 0;
    background-color: #fff;
    padding: 10px 25px;
    text-transform: uppercase;
    margin-top: 25px;
    font-family:'Oswald', sans-serif ;
}
[data-component="slideshow"] .slide {
    display: none;
  }

  [data-component="slideshow"] .slide.active {
    display: block;
  }
.slider-control{
    width: 97px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  
    
}
.slider-control:hover{
    width: 97px;
}
.img-selo{
    height: inherit;
    
}
.img-selo img{
    width: 200px;
    height: 200px;
    
   
    
}


#ct1, .ct1{
    background-image: url('../images/icone_ARQ.png');
    background-position: center;
    background-size: cover;
}   
#ct2, .ct2{
   
}

#ct2, .ct2{
    background-image: url('../images/icone_SOL.png');
    background-position: center;
    background-size: cover;
}    
#ct3{
    background-color: #6f9db2;    
}
#ct3, .ct3{
    background-image: url('../images/icone_IMP.png');
    background-position: center;
    background-size: cover;

}


/*
 DEFAULT
*/
.default{
   padding-top: 50px;
    padding-bottom: 50px;
}
.default .section-title,
.default .section-desc,
.default .section-body{
    text-align: left;
    padding-left: 10px;
    font-weight: 600;
    margin-bottom: 5px;
    
}

.default .section-title{
    font-size: 42px;
    color: #66625d;
    justify-content: flex-start;
    font-family: 'Oswald' , sans-serif;
    font: 400;

}   
.default .section-desc{
    font-size: 24px;
    margin-top: 9px;
    margin-bottom: 35px;
    color: #b5b5bb;
}
.default .section-body{
    max-width: 1240px;
    margin: auto;
    min-height: 100px;

}
/*
SOBRE
*/
#sobre h4, h5 {
    text-align: left;
    padding-bottom: 10px;
    font-family: 'Titillium Web' , sans-serif;
}
#sobre h4{
    font-size: 15px;
    color: #959190;
    padding-top: 50px;
    
}
#sobre h5{
    font-size: 19px;
    color: #000;
    font-weight: 400;
}
/*
    SERVIÇOS
*/
/*
 PROJETOS
*/
#title-project{
    font-size: 28px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-left: 95px;
}
#projetos h2{
    font-size: 65px;
    width: 840px;
    margin-left: 95px;
    margin-bottom: 15px;
    font-family: 'Titillium Web' , sans-serif;
    font: 400;
}
.barra-projeto{
    width: 75px;
    margin-left: 10px;
    height: 4px;
    background-color: rgba(243, 112, 33,0.5);
    color: #f37021;
}
.section-projects{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section-projects-photos{
    width: 100vw;
    max-width: 1240px;
    margin-top: 20px;
    flex-wrap: wrap;
    display: flex;
    justify-content:space-around;
}
.section-projects-photoitem{
    width: 350px;
    margin-bottom: 20px;
}
.areaphoto{
    
    width: 350px;
    height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;

    
}
.areaphoto a{
    width: 350px;
}
.areaphoto img{
    width: inherit;
    height: inherit;
}
.areaphoto .photoinfo{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    width: inherit;
    height: inherit;
    display: none;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    
    color: #ffffff;
}
.section-projects-photoitem h6{
    padding-top: 15px;
    font-family: 'Titilium Web', sans-serif;
}
.section-projects-photoitem  h5{
    font-size: 20px;
    
    font-weight: bold;
}

/*
 FOOTER
*/

.section-map-area{
    width: 100vw;
    max-width: 1240px;
    margin: auto;
    display: flex;
   
}
.section-map-info{
  
    padding: 5px;
   position: relative;
   
   font-family: 'Titillium Web' , sans-serif;

    color: #fff;
}
.section-map-info h1{
    padding: 30px;
    font-size: 85px;
    width: 450px;
    padding-right: 0px;
}
.section-map-info-item{
    display: flex;
    align-items: center;
    color: #fff;
    margin: 10px;
}

.section-map-info-item-img{
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    background-color: #bbb5b5;
    border-radius: 20px;
    margin-right: 20px;
}
.section-map-info-item img{
    width: 15px;
    height: auto;
}

footer{
    background-color: #fefefe;
    width: 100vw;
    height: 60px;
    display: flex;
}
main a{
    text-decoration: none;
}
footer a{
    text-decoration: none;
}
.infofinal{
    display: flex;
    width: 100vw;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    margin-bottom: 30px;
    padding-bottom: 0px;
}
.termosfinais{
    display: flex;
  
}
.termosfinais img{
    width: 30px;
}
.social{
    display: flex;
}
.socialitem{
    margin-right: 30px;
}
.termos{
    padding-right: 30px;
}

.section-maps{
    margin-top: 30px;
    background-image: url('../images/vamos_trabalhar.jpg');
    background-size: cover;
    background-position: center;
    padding-top: 10px;
    padding-bottom: 10px;
   
    
   
}
.section-maps2{
    background-image: url('../images/redefinimos.jpeg');
    background-size: cover;
    background-position:bottom;
    padding-top: 30px;
    padding-bottom: 30px;
    height: 500px;
    display: flex;
    align-items:center;
    justify-content: center;
}
.section-maps2 h1{
    font-family: 'Titilium Web', sans-serif;
    color: #fff;
    font-size: 90px;
   width: 1250px;
   font-weight:900
}
/*
CSS DE SERVICES GERAIS
*/
p{
    font-family: 'Titillium Web' , sans-serif;
}
.section-services{
    display: flex; 
    flex-wrap: wrap;
}
.section-aboutus{
    display: flex;
}
.section-services1{
    display: flex; 
    flex-wrap: wrap;
    justify-content: center;
    align-items:flex-start;
}
.section-services1 button  {
    background-color: #000000;
    padding: 10px 35px;
    
    
    color: #fff;
}
.section-services-item1 {
flex: 1; 


color: #5f5654;
}
.section-services-item1 h1{
   padding: 50px 0px;
}
.section-services-item1 h4{
    font-size:26px ; 
    padding-top: 50px;
}
.section-services-item1 h5{
    font-size: 18px;
    
}
.section-services-item1 p{
    font-size: 16px;
    padding-top: 20px;
}
.section-services-item1 img{
    width:390px;
    height: 420px;
    padding: 0;
}
.section-services-item{
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
   
    padding: 15px;
    
}
.service-button{
    display: block;
    justify-content: flex-end;
    
    border: 0;
    cursor: pointer;
    
    text-decoration: none;
    background-color: #fff;

}
 #mais{
    
    width: 35px;
    height: 35px;
}


.popup-wrapper{
    display: none;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.popup{
    font-family: arial;
    text-align: center;
    width: 100%;
    max-width: 1180px;
    margin: 10% auto;
    padding: 20px;
    background: white;
    position: relative;
}

.popup-close{
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
}
#servico{
    background-color: #5f5654;
    
}
#servico h2{
   font-family: 'Oswald' , sans-serif;
}
#servico1{
    background-color: #000;
}

#title-service{
    color: #fff;
    padding-bottom: 30px;
    font-size: 35px
}


.section-services-item h2{
  
    font-size: 25px;
    color: #fff;
    padding-bottom: 30px;
}
.section-services-item p{
    color: #b5b5bb;
    text-align: center;
    font-size: 19px;
}
.section-services-item img{
    width:230px;
    margin-bottom: 30px;
}
/*
MEDIA TABLET
*/
@media (min-width:450px) and (max-width:820px){
    header{
        padding: 0;
    }
    .header{
        padding-right: 20px;
        padding-left: 20px;
        height: 70px;
    }
    .contato{
        width: 120px;
    }
    .banner{
        height: calc(100vh - 35vh);        
    }
    
   
    .banner h1{
       
        width: 450px;
        font-size: 65px;
        
    }
    
    .logo{
        margin-left: 30px;
    }
    .logoimg img{
        width: 100px;
        height: 40px;
    }
    .menu-opener{
        width: 50px;
        margin-right: 30px;
        display: block;
    }
    
    
    .menu li a{
        justify-content:center;
        align-items: center;
        font-weight: bold;
        height: 40px;
        font-size: 19px;
        
        border: 0;
    }
    .menu li.active a{
        border: 0;
        color: #5f5654;
    }
    
    .section-services{
        flex-wrap: wrap;
    }
    .section-services-item{
        min-width: 50%;
        margin-bottom: 10px;
    }
    .section-services-item1{
        min-width: 50%;
        margin-bottom: 10px;
    }
    .section-maps2 h1{
        width: 620px;
        font-size: 65px;
    }
    .section-services-item:first-child{
        border-left: 0;
    }
    .section-map-info{
        width: 50%;
    }
    #title-project{
        font-size: 18px;
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        margin-left: 75px;
    }
    .photoinfo img{
        width: 350px;
    }
    #projetos h2{
        font-size: 65px;
        width: 640px;
        margin-left: 75px;
        margin-bottom: 15px;
        font-family: 'Titillium Web' , sans-serif;
    }
}
/*
MEDIA TELEFONE
*/

@media (min-width:200px) and (max-width:450px){
   header{
   height:  80px;
   }
   .header{
    padding: 0;
   }
   .dropdown-content a{
    font-size: 15px;
   }
   .contato{
    display: none;
   }
    .logoimg img{
    width: 100px;
    height: 30px;
   }
    #title-project{
        font-size: 18px;
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        margin-left: 75px;
    }
    #projetos h2{
        font-size: 35px;
        width: 300px;
        margin-left: 85px;
        margin-bottom: 15px;
    }
    .section-projects-photoitem{
        padding-bottom: 10px;
    }
    
    
    
    .slider-control{
        width: 60px;
        height: 60px;
    }
    .slidecomand{
        padding: 0;
    }
    .slidecontent{
        width: 260px;
    }
    .img-selo{
        width: 90px;
    }
    .img-selo img{
        width: 90px;
        height: 90px;
    }
    .banner h1 {
        font-size: 38px;
        width: 260px;
        text-transform: uppercase;
    }
    .banner button{
        padding: 5px 15px;
        margin-left: 10px;
    }
    #sobre  h4{
        padding-top: 0px;
    }
    
   
    
    .logo{
        margin-left: 15px;
    }
    .menu a{
        padding: 0;
    }
    .menu-opener{
        width: 50px;
        margin-right: 30px;
        display: block;
    }
    
    
    .menu li a{
        justify-content:center;
        align-items: center;
        font-weight: bold;
        height: 40px;
        font-size: 15px;
        padding: 5px;
        border: 0;
        margin: 0;
    }
    .menu li.active a{
        border: 0;
        color: #5f5654;
    }
    .section-aboutus{
        flex-direction: row;
        padding: 10px;
    
    }
    
    .section-services{
        flex-wrap: wrap;
    }
    .section-services-item{
        min-width: 75%;
        margin-bottom: 10px;
    }
   .section-services-item1{
    margin-bottom: 20px;
   }
    .section-services-item:first-child{
        border-left: 0;
    }
    .section-maps{
        display: flex;
        flex-direction: column;
    }
    .section-map-info{
        width: 100%;
    
    }
    .section-maps2 h1{
        font-size: 40px;
        width: 380px;
    }
    .section-map-info-item{
        font-size: 25px;
    }
    .section-map-info h1{
        padding: 30px;
        font-size: 55px;
        display: none;
        padding-right: 0px;
    }
    
    .section-map-info-item-img{
        width: 30px;
        height: 30px;
    }

}