@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/opensans-bold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'open_sansbold_italic';
    src: url('../fonts/opensans-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/opensans-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansextrabold';
    src: url('../fonts/opensans-extrabold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansextrabold_italic';
    src: url('../fonts/opensans-extrabolditalic-webfont.woff2') format('woff2'),
         url('../fonts/opensans-extrabolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansitalic';
    src: url('../fonts/opensans-italic-webfont.woff2') format('woff2'),
         url('../fonts/opensans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/opensans-light-webfont.woff2') format('woff2'),
         url('../fonts/opensans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanslight_italic';
    src: url('../fonts/opensans-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/opensans-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/opensans-regular_0-webfont.woff2') format('woff2'),
         url('../fonts/opensans-regular_0-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/opensans-semibold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanssemibold_italic';
    src: url('../fonts/opensans-semibolditalic-webfont.woff2') format('woff2'),
         url('../fonts/opensans-semibolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Square721 BT Bold';
    src: url('../fonts/Square721BT-Bold.eot');
    src: url('../fonts/Square721BT-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Square721BT-Bold.woff') format('woff'),
        url('../fonts/Square721BT-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Square721 BT';
    src: url('../fonts/Square721BT-Roman.eot');
    src: url('../fonts/Square721BT-Roman.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Square721BT-Roman.woff') format('woff'),
        url('../fonts/Square721BT-Roman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* { outline: 0 none; }
body { background: #cfb262; margin: 0; font-family: 'open_sansregular'; color: #444; font-size: 14px; overflow-x: hidden; }
a { text-decoration: none; color: #444; } a:hover { text-decoration: underline; }
a span { display: none; }
a img { border: none; }
input, select, textarea { font-family: 'open_sansregular'; color: #444; font-size: 14px; }
* { background-repeat: no-repeat; }

.wrapper { width: 1170px; margin: 0 auto; }

#img_topo { float: left; width: 100%; margin-top: -30px;}
#topo { width: 100%; position: absolute; top: 40px; z-index: 1000; height: 635px; }
#topo #logo { float: left; margin: 0 0 0 30px; }
#topo #logo a { background: url(../../imagens/logo.png); width: 231px; height: 83px; display: block; }
#topo .lingua { float: right; margin-top: 30px; }
#topo .lingua a { background: url(../../imagens/lingua.png) left; width: 16px; height: 11px; display: block; float: left; margin-left: 4px; }
#topo .lingua a.esp { background-position: right; }
#topo .lingua a.bra { background-position: center; }

#menu { list-style: none; padding: 0; margin: 25px 0 0 40px; float: left; }
#menu li { float: left; margin: 0 9px; }
#menu li a { display: block; font-family: 'open_sansbold'; text-transform: uppercase; color: #111; font-size: 15px; text-decoration: none; padding: 0 0 6px; border-bottom: 4px solid transparent; }
#menu li a:hover, #menu li a.active { border-bottom: 4px solid #cfb262; }

#topo_fixo { background: #cfb262; position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; }
#topo_fixo #logo_fixo { float: left; margin: 10px 0 0 30px; }
#topo_fixo #logo_fixo a { background: url(../../imagens/logo_fixo.png); width: 100px; height: 36px; display: block; }
#topo_fixo #menu { float: right; margin: 15px 20px 0 0; }
#topo_fixo #menu li a { padding-bottom: 12px; }
#topo_fixo .lingua { float: right; margin: 20px 30px 0 0; }
#topo_fixo .lingua a { background: url(../../imagens/lingua.png) left; width: 16px; height: 11px; display: block; float: left; margin-left: 4px; }
#topo_fixo .lingua a.esp { background-position: right; }
#topo_fixo .lingua a.bra { background-position: center; }

#topo_fixo_extranet { background: #cfb262; position: relative; top: 0; left: 0; width: 100%; }
#topo_fixo_extranet #logo_fixo { float: left; margin: 10px 0 0 30px; }
#topo_fixo_extranet #logo_fixo a { background: url(../../imagens/logo_fixo.png); width: 100px; height: 36px; display: block; }
#topo_fixo_extranet #menu { float: right; margin: 15px 20px 0 0; }
#topo_fixo_extranet #menu li a { padding-bottom: 12px; }
#topo_fixo_extranet .lingua { float: right; margin: 20px 30px 0 0; }
#topo_fixo_extranet .lingua a { background: url(../../imagens/lingua.png) left; width: 16px; height: 11px; display: block; float: left; margin-left: 4px; }
#topo_fixo_extranet .lingua a.esp { background-position: right; }
#topo_fixo_extranet .lingua a.bra { background-position: center; }


#banner { float: left; width: 100%; }
#banner .slide { float: left; width: 100%; }
#banner .slide ul { list-style: none; padding: 0; margin: 0; }
#banner .slide ul li { display: block; width: 100%; height: 997px; }
#banner .slide ul li a { display: block; width: 100%; height: 1006px; background-repeat: no-repeat; }
#banner .slide ul li a img { display: none; }
#banner .nav { position: absolute; width: 100%; z-index: 1000; top: 450px; }
#banner .nav a { background: url(../../imagens/nav_banner.png) left; width: 50px; height: 50px; display: block; float: left; margin: 0 5%; }
#banner .nav a.next { background-position: right; float: right; }

#banner .onda { width: 100%; position: absolute; top: 650px; z-index: 900; text-align: center; margin-left: -50px; }

.content { background: url(../../imagens/clamom.jpg) center no-repeat; width: 100%; float: left; font-size: 16px; height: 910px; color: #fff; text-align: justify; overflow: hidden; }
.content#historico { background: url(../../imagens/historico.jpg) center no-repeat; height: 874px; }
.content#servicos { background: url(../../imagens/servicos.jpg) center no-repeat; }
.content#pesquisas { background: url(../../imagens/pesquisa.jpg) center no-repeat; }
.content#responsabilidade { background: url(../../imagens/responsabilidade.jpg) center no-repeat; }
.content .wrapper { width: 685px; }
.content .area { background: url(../../imagens/op.png); width: 86%; height: 850px; padding: 60px 7% 0; }
.content .title { float: left; width: 100%; }
.content ul { 
    max-height: 757px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; 
    padding-inline-start: 20px !important;
    grid-column-gap: 25px;
}
.content .title img { float: left; }
.content .title h3 { color: #fff; margin: 11px 0 0 20px; float: left; font-size: 40px; font-family: 'open_sanssemibold'; text-transform: uppercase; }
.content#responsabilidade .title h3 { width: 480px; line-height: 40px; margin: 0 0 15px 20px; }
.content .txt { float: left; width: 100%; line-height: 24px; }
.content .txt h4 { margin: 0; text-transform: uppercase; }
.content .txt p { margin: 0 0 20px; }
.content h3.tit_txt { font-family: 'open_sanssemibold'; font-size: 24px; }
.content .img { width: 100%; text-align: center; float: left; margin: 15px 0 30px; }

#contato_home { background: url(../../imagens/bg_contato.png) center top no-repeat #cfb262; text-align: center; color: #111; padding: 40px 0 0; font-size: 26px; width: 100%; float: left; border-top: 10px solid #fff; height: 91px; }
#contato_home .projeto { background: url(../../imagens/link_projeto.png) center bottom no-repeat; display: block; font-family: 'open_sansitalic'; text-transform: uppercase; color: #111; font-size: 14px; padding: 0 0 20px; }

#portfolio { background: #cfb262; float: left; padding: 80px 0; width: 100%; }
#portfolio .title { float: left; width: 100%; margin-bottom: 30px; }
#portfolio .title img { float: left; }
#portfolio .title h3 { color: #111; margin: 11px 0 0 20px; float: left; font-size: 40px; font-family: 'open_sanssemibold'; text-transform: uppercase; }
#portfolio .categorias { float: left; width: 100%; }
#portfolio .categorias a { display: block; padding: 8px 30px; float: left; font-family: 'open_sansbold'; margin-right: 10px; font-size: 15px; color: #111; text-decoration: none; text-transform: uppercase; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; }
#portfolio .categorias a:hover, #portfolio .categorias a.active { background: #bca051; }
#portfolio .area { float: left; width: 102%; margin: 40px 0 0; min-height: 200px; }
#portfolio .item { float: left; overflow: hidden; width: 381px; height: 254px; display: block; margin: 0 14px 14px 0; position: relative; }
#portfolio .item .title { background: #634e15; width: 100%; display: none; opacity: 0.9; height: 100%; top: 0; left: 0; position: absolute; text-align: center; font-size: 18px; }
#portfolio .item:hover .title { display: table; }
#portfolio .item .title div { color: #fff; display: table-cell; vertical-align: middle; }
#portfolio .item .title div img { margin-bottom: 5px; float: none; }
#portfolio .item .title div span { display: block; }
#portfolio .mais { float: left; width: 100%; text-align: center; margin: 20px 0 0; }
#portfolio .mais a { background: transparent; display: inline-block; padding: 8px 30px; font-family: 'open_sansbold'; border: 1px solid #111; margin-right: 10px; font-size: 15px; color: #111; text-decoration: none; text-transform: uppercase; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; }
.load { position: absolute; width: 26%; height: 40%; float: left; display: block; text-align:center; padding: 20% 37%; background: #cfb262; }

#galeria_extranet { background: #cfb262; float: left; padding: 50px 2%; width: 96%; border-top: 3px solid #b19750; }
#galeria_extranet .title { float: left; width: 100%; margin-bottom: 30px; }
#galeria_extranet .title img { float: left; }
#galeria_extranet .title h3 { color: #111; margin: 0; float: left; font-size: 28px; font-family: 'open_sanssemibold'; text-transform: uppercase; }
#galeria_extranet .categorias { float: left; width: 100%; }
#galeria_extranet .categorias a { display: block; padding: 8px 30px; float: left; font-family: 'open_sansbold'; margin-right: 10px; font-size: 15px; color: #111; text-decoration: none; text-transform: uppercase; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; }
#galeria_extranet .categorias a:hover, #galeria_extranet .categorias a.active { background: #bca051; }
#galeria_extranet .area { float: left; width: 102%; margin: 40px 0 0; min-height: 200px; }
#galeria_extranet .item { float: left; overflow: hidden; width: 381px; height: 211px; display: block; margin: 0 14px 14px 0; position: relative; }
#galeria_extranet .item .title { background: #634e15; width: 100%; display: none; opacity: 0.9; height: 100%; top: 0; left: 0; position: absolute; text-align: center; font-size: 18px; }
#galeria_extranet .item:hover .title { display: table; }
#galeria_extranet .item .title div { color: #fff; display: table-cell; vertical-align: middle; }
#galeria_extranet .item .title div img { margin-bottom: 5px; float: none; }
#galeria_extranet .item .title div span { display: block; }
#galeria_extranet .mais { float: left; width: 100%; text-align: center; margin: 20px 0 0; }
#galeria_extranet .mais a { background: transparent; display: inline-block; padding: 8px 30px; font-family: 'open_sansbold'; border: 1px solid #111; margin-right: 10px; font-size: 15px; color: #111; text-decoration: none; text-transform: uppercase; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; }
#galeria_extranet .texto { width: 100%; float:left; display: block;}
#galeria_extranet .texto p { float:left; width: 100%; margin: 0 0 20px; word-wrap: break-word;}

.form_login { width: 500px; margin: 0 auto; }
#area_contact .form_login input[type=text], #area_contact .form_login input[type=password] { background: #fff !important; height: 45px; width: 94%; padding: 0 3%; }
#area_contact .form_login input[type=submit] { margin-right: 0; }


#clientes { background: #cfb262; float: left; padding: 80px 0 120px; width: 100%; }
#clientes .title { float: left; width: 100%; margin-bottom: 30px; }
#clientes .title img { float: left; }
#clientes .title h3 { color: #111; margin: 11px 0 0 20px; float: left; font-size: 40px; font-family: 'open_sanssemibold'; text-transform: uppercase; }
#clientes .area { float: left; width: 100%; background: #fff; min-height: 514px; margin-top: 30px; overflow: hidden; }
#clientes .item { width: 195px; height: 171px; float: left; display: block; background: #fff; text-align: center; display: table-cell; }
#clientes .item a { vertical-align: middle; }
#clientes .mais { float: left; width: 100%; text-align: center; margin: 40px 0 0; }
#clientes .mais a { background: transparent; display: inline-block; padding: 8px 30px; font-family: 'open_sansbold'; border: 1px solid #111; margin-right: 10px; font-size: 15px; color: #111; text-decoration: none; text-transform: uppercase; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; }

#galeria { background: url(../../imagens/op2.png); position: fixed; width: 100%; height: 100%; padding: 1%; left: 0; z-index: 2001; margin-top: -21px !important; }
#galeria .wrapper { position: relative; height: 100%; }
/* #galeria .close { margin-left: 15px; color: white; font-size: 27px; cursor: pointer; } */
/* #galeria .mid { float: left; width: 80%; text-align: center; } */
/* #galeria .mid img { max-width: 100%; height: auto; } */
/* #galeria .nav { position: absolute; width: 100%; min-height: 50px; z-index: 1000; bottom: 10%; text-align: center; } */
#galeria .nav .titulo-galeria { width: 100%; text-align: center; float: left; border-bottom: solid white 1px; color: white; font-size: 28px; padding: 10px; margin-bottom: 10px; }
#galeria .nav .prev, #galeria .nav .next { background: url(../../imagens/nav_banner.png) left; width: 50px; height: 50px;  margin: 35px 10px 0; display: block; float: left; }
#galeria .nav .next { background-position: right; }
#galeria .slide { float: left; }
#galeria .slide li { border: none; display: block; float: left; width: 157px; height: 104px; cursor: pointer; margin: 0 3px; }
#galeria .slide li img { width: 100%; }


#localizacao { float: left; width: 100%; height: 425px; }

#rodape { background: #cfb262; float: left; padding: 50px 0 180px; width: 100%; }
#rodape .title { float: left; width: 100%; margin-bottom: 30px; }
#rodape .title img { float: left; }
#rodape .title h3 { color: #111; margin: 11px 0 0 20px; float: left; font-size: 40px; font-family: 'open_sanssemibold'; text-transform: uppercase; }
#rodape .left { float: left; width: 455px; font-size: 16px; color: #222; }
#rodape .left h4 { font-family: 'open_sansbold'; }
#rodape .left h4.trabalhe { margin: 30px 0 0; }
#rodape .left a { color: #222; }
#rodape .form_right { width: 552px; float: right; }
#rodape .form_right input[type=text],#rodape .form_right input[type=email].email, .form_right input[type=password].email { background: url(../../imagens/input_nome.png) 15px no-repeat #fff; width: 200px; font-size: 15px; height: 43px; border: none; padding: 0 10px 0 45px; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5); }
#rodape .form_right input[type=text].email,#rodape .form_right input[type=email].email, .form_right input[type=password].email { background: url(../../imagens/input_email.png) 10px no-repeat #fff; float: right; }
#rodape .form_right textarea { background: #fff; border: none; width: 522px; height: 107px; padding: 15px; font-size: 15px; float: left; margin-top: 33px; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5); }
#rodape .form_right input[type=submit] { background: transparent; float: right; padding: 8px 30px; font-family: 'open_sansbold'; margin-top: 20px; border: 1px solid #111; margin-right: 10px; font-size: 15px; color: #111; text-decoration: none; text-transform: uppercase; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; }
#rodape .form_right .error { border: solid 1px red !important; }

#rodape.interna { background: #cfb262; border-top: 3px solid #b19750; }
#rodape.interna .title h3 { font-size: 28px; margin: 0; }
#rodape.interna .title.center h3 { text-align: center; display: block; }



.erro{ color:#ff0000; text-align: center;}
.error input[type=text], .error input[type=password], .error select, .error textarea{border: 1px solid #ff0000 !important}

#area_contact { float: left; width: 100%; }
#area_contact input[type=text], #area_contact input[type=password] { background: #fff; width: 419px; height: 33px; border: 1px solid #ddd; margin-bottom: 5px; padding: 0 10px; float: left; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
#area_contact select { background: #fff; width: 441px; height: 33px; border: 1px solid #ddd; padding: 0 10px; float: left; margin-bottom: 5px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
#area_contact textarea { background: #fff; width: 92%; height: 173px; border: 1px solid #ddd; padding: 10px 4%; float: left; margin-bottom: 5px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
#area_contact input[type=submit] { background: transparent; float: right; padding: 8px 30px; font-family: 'open_sansbold'; margin-top: 20px; border: 1px solid #111; margin-right: 10px; font-size: 15px; color: #111; text-decoration: none; text-transform: uppercase; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; }


.comentario { background: #eee; float: left; padding: 15px 4%; width: 92%; margin-bottom: 15px; }
.comentario .title { float: left!important; width: 100%!important; margin-bottom: 15px!important; font-size: 12px!important; }
.comentario .text { float: left!important; width: 100%!important; margin-bottom: 15px!important; font-size: 12px!important; }

.content .corpo_da_lista { 
    background: url(../../imagens/op.png); 
    width: 1079px;
    height: 850px;
    padding: 60px 7% 0;
    margin-left: -243px; 
}

/* GALERIA */

.image{
    max-width: 100% !important;
    min-width: 100% !important;
    max-height: 100% !important;
    min-height: 100% !important;
}


/* FOOTER */
footer{
    width: 960px;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    padding: 20px;
}

footer ul li{
    list-style: none;
    display: inline-block;
    margin: 3px;
}

.facebook, .whatsapp, .instagram, .skype, .linkedin{
    width: 24px;
    cursor: pointer;
}

.facebook:hover, .whatsapp:hover, .instagram:hover, .skype:hover, .linkedin:hover{
    width: 24px;
    cursor: pointer;
    box-shadow: 1px 8px 6px -6px black;
    border-radius: 3px;
}

.copyrigth{
    float: right;
    margin: auto;
    font-size: 16px;
    color: #222;
    margin-left: 230px;
}

/* CLIENTES */

.client{
    height: 820px;
    background: white;
    display: flex;
}

.client-box{
    width: 430px;
    height: auto;
    margin: 0;
    padding: 11px;

}

.group{
    margin: 10px;
    padding: 50px;
}

.client-name{
    font-size: 1.28rem;
    line-height: 1;
    color: #000;
}

.client-img-R{
    width: 146px;
    height: 92px;
}

.image-quote{
    float: right;
}

.title_c{
    color: #111;
    font-size: 20px;
    font-family: 'open_sanssemibold';
    text-transform: uppercase;
}

.jempson{
    width: 1400px !important;
}

.lista{
    width: 100%;
    height: auto;
    /* margin: auto; */
    display: flex;
    font-size: 14px;
    color: white;
}

ul{
    padding-inline-start: 65px !important;
}

ul li{
    padding: 4px;
}




@media only screen and (max-width: 1044px){
    div .wrapper {
        width: 100%;
        
    }

}

@media only screen and (max-width: 360px){
    #banner .slide { height: auto; width: 356px; left: -7px !important; }
    .title_c {
        color: #111;
        font-size: 16px;
        font-family: 'open_sanssemibold';
        text-transform: uppercase;
        margin: 0;
        margin-left: 40px !important;
    }

    .lista {
        width: 90% !important;
        font-size: 13px !important;
        display: block !important;
        left: 0px;
        right: 0px;
    }

    .content .corpo_da_lista {
        background: url(../../imagens/op.png);
        width: 850px !important;
        height: 850px;
        padding: 60px 7% 0;
        margin-left: 0px !important;
        overflow-y: auto;
    }

}
/* #banner .slide { height: auto; width: 100%; left: -7px !important; } */

@media only screen and (max-width: 890px){
    .wrapper {
        width: 96%;
        margin: 0;
    }

    #galeria .nav {
        display: inline-block;
        position: relative;
        bottom: 0;
    }

    
    /* CLIENTES */

    .client{
        height: auto;
        background: white;
        display: block;
    }

    .client-box{
        width: 86%;
        height: auto;
        margin: 0;
        padding: 11px;

    }

    .group{
        margin: 10px;
        padding: 5px;
    }

    .title_c {
        color: #111;
        font-size: 16px;
        font-family: 'open_sanssemibold';
        text-transform: uppercase;
        margin: 0;
        margin-left: 170px;
    }

    .group {
        margin: 10px;
        padding: 30px;
    }
}

#topo_mobile, .categorias_mobile { display: none; }

@media only screen and (max-width: 640px)  {
    #topo, #topo_fixo { display: none; }
    #topo_fixo #menu { display: none; }
    .wrapper { width: 100%; }

    #img_topo { height: auto; }
    #galeria { width: 98%; padding: 1%; margin: 0; overflow: auto; }
    /* #galeria .mid {  display: block; position: relative; bottom: 0; } */
    /* #galeria .nav {  display: inline-block; position: relative; bottom: 0; } */
    #galeria .nav ul { padding: 0; }
    /* #galeria .close {  font-size: 38px; padding: 10px; text-decoration: none; } */
    #galeria .nav .prev, #galeria .nav .next { display: none; }

    #topo_mobile { background: #fff; width: 100%; float: left; height: 80px; display: block; margin-top: 30px; }
    #topo_mobile #logo2 { position: absolute; width: 100%; height: 0; text-align: center; margin: 0; }
    #topo_mobile #logo2 a { background: url(../../imagens/logo2.png); width: 139px; height: 50px; display: inline-block; margin-top: 20px; }
    #topo_mobile .lingua { float: right; margin: 30px 15px 0 0; }
    #topo_mobile .lingua a { background: url(../../imagens/lingua.png) left; width: 16px; height: 11px; display: block; float: left; margin-left: 4px; }
    #topo_mobile .lingua a.esp { background-position: right; }
    #topo_mobile .lingua a.bra { background-position: center; }

    #menu_mob { float: left; }
    #menu_mob .link { float: left; margin: 25px 0 0 15px; }
    #menu_mob ul { position: absolute; width: 100%; background: #cfb262; z-index: 1010; margin: 0; padding: 0; top: 80px; display: none; }
    #menu_mob ul li { float: left; width: 100%; border-bottom: 1px solid #fff; }
    #menu_mob ul li a { display: block; padding: 8px; text-align: center; font-family: 'open_sansbold'; text-transform: uppercase; color: #111; text-decoration: none; }

    #banner { position: relative; }
    #banner .slide { height: auto; left: -8px !important; }
    #banner .slide ul li { height: auto; }
    #banner .slide ul li a { height: auto; }
    #banner .slide ul li a img { display: block; width: 100%; }
    #banner .nav { top: 38%; }
    #banner .onda { display: none; }

    #portfolio .categorias { display: none; }
    .categorias_mobile { float: left; width: 100%; display: block; }
    .categorias_mobile select { background: transparent; float: right; text-align: center; width: 100%; padding: 8px 30px; font-family: 'open_sansbold'; border: 1px solid #111; font-size: 15px; color: #111; text-decoration: none; text-transform: uppercase; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; }
    .categorias_mobile select option { width: 100%; text-align: center; }

    .content .wrapper { width: 100%; }
    .content .area { width: 86%; padding: 40px 7%; }
    .content .title img { height: 30px; }
    .content .title h3 { font-size: 30px; margin-top: 0; }
    .content .txt { font-size: 14px; line-height: 18px; }
    .content h3.tit_txt { line-height: 30px; text-align: left; font-size: 16px; }

    #galeria .slide ul { float: left; width: 100%; text-align: center; }
    #galeria .slide li { width: 32%; height: auto; margin: 0 0.5%; float: none; display: inline-block; }
    #galeria .slide li img { width: 100%; }

    #portfolio { width: 90%; padding: 40px 5%; }
    #portfolio .title img { height: 30px; }
    #portfolio .title h3 { font-size: 30px; margin-top: 0; }
    #portfolio .area { width: 100%; }
    #portfolio .area a { width: 100%; height: auto; }
    #portfolio .area a img { width: 100%; }
    #portfolio .item:hover .title { display: none; }

    .content#responsabilidade .title h3 { width: auto; float: none; margin: 0 0 15px 45px; line-height: 30px; }

    #clientes { width: 90%; padding: 40px 5%; }
    #clientes .title img { height: 30px; }
    #clientes .title h3 { font-size: 30px; margin-top: 0; }
    #clientes .area { width: 100%; margin: 0; min-height: 475px; height: auto; }
    #clientes .item { width: 50%; height: auto; }
    #clientes .area a img { width: 100%; }

    #rodape { width: 90%; padding: 40px 5% 60px; }
    #rodape .title img { height: 30px; }
    #rodape .title h3 { font-size: 30px; margin-top: 0; }
    #rodape .left { width: 100%; }
    #rodape .form_right { width: 100%; margin: 30px 0 0; }
    #rodape .form_right input[type=text],#rodape .form_right input[type=email].email { width: 80%; padding: 0 5% 0 15%; margin-top: 6px; }
    #rodape .form_right textarea { width: 90%; padding: 15px 5%; margin-top: 6px; }
    #rodape .form_right input[type=submit] { width: 100%; padding: 8px 0; margin: 10px 0 0; }

    .container {
        width: 100% !important;
        margin: 0;
    }
    
    .content ul { 
        max-height: initial !important;
        
    }

    .lista div{
        margin-bottom: 30px;

    }

    ul {
        padding-inline-start: 8px !important;
    }

    footer{
        width: 93% !important;
        margin: auto;
        display: grid !important;
        text-align: center;
    }

    .facebook, .whatsapp, .instagram, .skype, .linkedin{
        width: 20px !important;
        cursor: pointer;
    }

    .copyrigth{
        margin: auto;
        padding: 10px;
    }

    .section {
        background-image: url(../img/servicos.jpg);
        background-size: cover;
        object-fit: cover;
        height: 2056px;
        width: 400px;
    }

    /* CLIENTES */

    .client{
        height: auto;
        background: white;
        display: block;
    }

    .client-box{
        width: 86%;
        height: auto;
        margin: 0;
        padding: 11px;

    }

    .group{
        margin: 10px;
        padding: 5px;
    }

    .title_c {
        color: #111;
        font-size: 16px;
        font-family: 'open_sanssemibold';
        text-transform: uppercase;
        margin: 0;
        margin-left: 95px;
    }

    .group {
        margin: 10px;
        padding: 30px;
    }


}

/* MATHEUS */
/* MATHEUS */
/* MATHEUS */
/* MATHEUS */
/* MATHEUS */
/* MATHEUS */
/* MATHEUS */

 /* SmarthPhone 1ª geração */
/*@media screen and (max-width:480px){
    .galeria_filho{
        font-family: 'open_sansregular';
        padding: 0px !important;
        margin: 20px auto !important;
        width: 100%;
        border-radius: 3px;
        background: #f8f9fa;
        display: grid;
        grid-template-areas: 
            'photo-close'
            'photo-content'
        ; 
    }
    
    .photo-content{
        box-sizing: border-box !important;
        grid-area: photo-content;
        display: grid;
        grid-template-areas:
            'description'
            'photo'
            'nav';
        padding: 20px !important;
        grid-gap: 20px;
        padding-top: 0px !important;
    
    }
    
    .photo-content .photo{
        grid-area: photo;
        text-align: center;
        max-width: 100% !important;
        width: 100%;
    }
    
    .photo-content .photo img{
        max-width: 100% !important;
        max-height: 100% !important;
        border: 1px solid rgba(219,219,219);
        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
        border-radius: 3px;
    }
    
    .photo-content .description{
        min-width: 100%;
        border: 1px solid rgba(219,219,219);
        grid-area: description;
        background: white !important;
        color: #495057 !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
        border-radius: 3px !important;
        display: grid;
        grid-gap: 10px;
        grid-template-areas:
            'titulo'
            'texto'
            'tipo'
            'arquitetura'
            ;
    }
    
    .photo-content .description .description-title{
        font-weight: bold !important;
        font-size: x-large !important;
        grid-area: titulo;
    }
    
    .photo-content .description .description-text{
        max-height: 100%;
        height: 100%;
        overflow-y: auto;
        grid-area: texto;
    }
    
    .photo-content .description hr{
        border: 1px solid rgba(219,219,219);
    }
    
    .photo-content .description .description-tipo{
        grid-area: tipo;
    }
    
    .photo-content .description .description-arquitetura{
        grid-area: arquitetura;
    }
    
    .photo-content .nav{
        grid-area: nav;
    }
    
    .photo-content .nav .area{
        justify-items: center;
        display: flex !important;
        grid-template-columns: 10% 80% 10%;
    }
    
    .photo-close{
        grid-area: photo-close;
        text-align: right;
        margin-right: 7px;
    }
    
    .photo-close a{
        color: rgb(99 95 95);
        font-size: 20px;
        cursor: pointer;
        font-weight: bold;
    }
    
    div.area div.slide img{
        max-width: 100% !important;
        min-width: 100% !important;
        max-height: 100% !important;
        min-height: 100% !important;
    }
    
}*/

/* Tablets e SmartPhones 2º geração */
/* @media screen and (min-width: 480px) and (max-width:768px){ */
@media screen and (max-width:768px){

    .content .corpo_da_lista {
        background: url(../../imagens/op.png);
        width: 1079px;
        height: 850px;
        padding: 60px 7% 0;
        margin-left: 0px !important;
        overflow-y: auto;
    }

    .lista { 
        width: 90% !important;
        font-size: 15px;
        display: block !important;
        left: 0px;
        right: 0px;
    }

    .galeria_filho{
        font-family: 'open_sansregular';
        padding: 0px !important;
        margin: 20px auto !important;
        width: 100%;
        border-radius: 3px;
        background: #f8f9fa;
        display: grid;
        /* grid-template-columns: 1200px 50px; */
        grid-template-areas: 
            'photo-close'
            'photo-content'; 
    }

    #galeria .nav {  display: inline-block; position: relative; bottom: 0; }
    
    .photo-content{
        box-sizing: border-box !important;
        grid-area: photo-content;
        display: grid;
        grid-template-areas:
            'description'
            'photo'
            'nav';
        padding: 20px !important;
        grid-gap: 20px;
        padding-top: 0px !important;
    
    }
    
    .photo-content .photo{
        grid-area: photo;
        text-align: center;
        max-width: 100% !important;
        width: 100%;
    }
    
    .photo-content .photo img{
        max-width: 100% !important;
        max-height: 100% !important;
        border: 1px solid rgba(219,219,219);
        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
        border-radius: 3px;
    }
    
    .photo-content .description{
        min-width: 100%;
        border: 1px solid rgba(219,219,219);
        grid-area: description;
        background: white !important;
        color: #495057 !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
        border-radius: 3px !important;
        display: grid;
        grid-gap: 10px;
        grid-template-areas:
            'titulo'
            'texto'
            'tipo'
            'arquitetura';
    }
    
    .photo-content .description .description-title{
        font-weight: bold !important;
        font-size: x-large !important;
        grid-area: titulo;
    }
    
    .photo-content .description .description-text{
        max-height: 100%;
        height: 100%;
        overflow-y: auto;
        grid-area: texto;
    }
    
    .photo-content .description hr{
        border: 1px solid rgba(219,219,219);
    }
    
    .photo-content .description .description-tipo{
        grid-area: tipo;
    }
    
    .photo-content .description .description-arquitetura{
        grid-area: arquitetura;
    }
    
    .photo-content .nav{
        grid-area: nav;
    }
    
    .photo-content .nav .area{
        justify-items: center;
        display: grid !important;
        grid-template-columns: 100%;
    }
    
    .photo-close{
        grid-area: photo-close;
        text-align: right;
        margin-right: 7px;
    }
    
    .photo-close a{
        color: rgb(99 95 95);
        font-size: 20px;
        cursor: pointer;
        font-weight: bold;
    }
    
    div.area div.slide img{
        max-width: 100% !important;
        min-width: 100% !important;
        max-height: 100% !important;
        min-height: 100% !important;
    }
    
}

/* notebooks, desktops, tvs, etc... */
@media screen and (min-width: 768px){
    .galeria_filho{
        font-family: 'open_sansregular';
        padding: 0px !important;
        margin: 0 auto !important;
        width: min-content;
        height: min-content;
        border-radius: 3px;
        background: #f8f9fa;
        display: grid;
        /* grid-template-columns: 1200px 50px; */
        grid-template-areas: 
            'photo-close'
            'photo-content'; 
    }
    
    .photo-content{
        box-sizing: border-box !important;
        grid-area: photo-content;
        display: grid;
        grid-template-areas:
            'photo description'
            'nav description';
        padding: 20px !important;
        grid-gap: 20px;
        padding-top: 0px !important;
    
    }
    
    .photo-content .photo{
        grid-area: photo;
        text-align: center;
        max-width: 700px !important;
        width: 100%;
    }
    
    .photo-content .photo img{
        max-width: 700px !important;
        max-height: 500px !important;
        border: 1px solid rgba(219,219,219);
        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
        border-radius: 3px;
    }
    
    .photo-content .description{
        min-width: 300px;
        border: 1px solid rgba(219,219,219);
        grid-area: description;
        background: white !important;
        color: #495057 !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
        border-radius: 3px !important;
        /* display: grid; */
        grid-template-areas:
            'titulo'
            'texto'
            'tipo'
            'arquitetura'
        ;
    }
    
    
    .photo-content .description .description-title{
        font-weight: bold !important;
        font-size: x-large !important;
        grid-area: titulo;
    }
    
    .photo-content .description .description-text{
        max-height: 400px;
        height: 100%;
        overflow-y: auto;
        grid-area: texto;
    }
    
    .photo-content .description hr{
        border: 1px solid rgba(219,219,219);
    }
    
    .photo-content .description .description-tipo{
        grid-area: tipo;
    }
    
    .photo-content .description .description-arquitetura{
        grid-area: arquitetura;
    }
    
    .photo-content .nav{
        grid-area: nav;
    }
    
    .photo-content .nav .area{
        justify-items: center;
        display: grid !important;
        grid-template-columns: 10% 80% 10%;
    }
    
    .photo-close{
        grid-area: photo-close;
        text-align: right;
        margin-right: 7px;
    }
    
    .photo-close a{
        color: rgb(99 95 95);
        font-size: 20px;
        cursor: pointer;
        font-weight: bold;
    }
    
    div.area div.slide img{
        max-width: 120px !important;
        min-width: 120px !important;
        max-height: 120px !important;
        min-height: 120px !important;
    }

    #topo .lingua {
        float: right;
        margin-top: 30px;
        margin-right: 171px;
    }

    #menu {
        list-style: none;
        padding: 0;
        margin: 25px 0 0 -60px;
        float: left;
    }

    #topo #logo {
        float: left;
        margin: 0px 0 0 -26px;
    }

    #banner .slide ul li a {
        display: block;
        width: 95%;
        height: 1006px;
        background-repeat: no-repeat;
    }

}