/* 
    Folha de estilo
    Criada por Thiago Corrêa - 22/03/2016
    www.legulas.com.br
*/

@font-face {
    font-family: 'Opensans-Semibold';
    src: url('../css/fonts/OpenSans-Semibold.eot');
    src: url('../css/fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../css/fonts/OpenSans-Semibold.woff') format('woff'),
        url('../css/fonts/OpenSans-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

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

@font-face {
    font-family: 'OpenSans-Extrabold';
    src: url('../css/fonts/OpenSans-Extrabold.eot');
    src: url('../css/fonts/OpenSans-Extrabold.eot?#iefix') format('embedded-opentype'),
        url('../css/fonts/OpenSans-Extrabold.woff') format('woff'),
        url('../css/fonts/OpenSans-Extrabold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Opensans-Regular';
    src: url('../css/fonts/OpenSans.eot');
    src: url('../css/fonts/OpenSans.eot?#iefix') format('embedded-opentype'),
        url('../css/fonts/OpenSans.woff') format('woff'),
        url('../css/fonts/OpenSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*
=========
==RESET==
=========
*/
* { color: #000000; font-family:"Opensans-Regular", Helvetica; font-size: 100%; font-weight: 300; line-height: 22px;}
p { border: 0; font-size: 14px; line-height: 22px; color:#072733; margin: 0; padding: 0; outline: 0; font-family:"Opensans-Regular", Helvetica;}
strong{font-family: "OpenSans-Bold"; color: #072733}
ul { margin: 0; padding: 0;}
fieldset { border: 0; margin: 0; outline: 0; padding: 0;}
textarea { resize: none;}
a { color: #072733; font-family: "Opensans-Regular", Helvetica; text-decoration: none; outline: none; font-size: 16px; display: block;}
a.active{ color: #000}
hr { border: none;}
img{max-width: 100%}
div{box-sizing: border-box;;}
input, button, textarea { outline:none;}
h1{font-size: 22px; margin: 5px 0; font-family: "OpenSans-Extrabold", Helvetica; color: #072733; display: block;}
h2{font-size: 20px; line-height: 24px; font-family: "OpenSans-Bold", Helvetica; color: #072733; margin: 5px 0; display: block;}
h3{font-size: 16px; margin: 0; line-height: 100%}
.clearfix {overflow: auto;}

/*
=========
==TOOLS==
=========
*/

::-webkit-input-placeholder { color: #000; font-size: 14px} /*cbcbcb*/
:-moz-placeholder { color: #000; font-size: 14px}
::-moz-placeholder { color: #000; font-size: 14px}
:-ms-input-placeholder { color: #000; font-size: 14px}
body {width: 100%; background: #f8f6eb; font-size: 100%}
#main-container{margin: 0 auto; position: relative; width: 100%;}
.container { display: table; margin: auto; position: relative; width: 960px;}
.content{width: 100%; float: left; transition: all .5s ease-in-out;}
.hide{display: none;}
.mg-top20{width: 100%; float: left; height: 20px}
.clear{width: 100%; float: left; clear: both; height: 1px}
.floatleft{float: left;}
.floatright{float: right;}
.active{background: #45bcba !important; color: #fff !important; box-shadow:  inset 0px 0px 10px 0px rgba(50, 50, 50, 0.3);}

/*
==========
==HEADER==
==========
*/

.header-top{background: #072733; width: 100%; float: left; position: fixed; z-index: 1000}
.logo{width: 18%; float: right; margin-top: 15px}
.header-tt{width: 45%; float: left}
    .header-tt h2{color: #99d8dd;line-height: 80px; margin: 0; font-size: 22px}
.menu-dropdown{width: 20%; float: right;} 
    .menu-dropdown ul{width: 100%; float: left;}
        .menu-dropdown ul li{display: block; list-style: none; width: 100%; float: left;}
            .menu-dropdown ul li a{width: 100%; float: left;} 
                .menu-dropdown ul li ul{position: absolute; width: 192px; right: 80px; top: 83px; display: none;}
                    .menu-dropdown ul li ul li{display: block; list-style: none;}
                        .menu-dropdown ul li ul li a{color: #fff; background: #072733; text-align: right; padding: 7px 5px; box-sizing:border-box; border-top: 1px solid #99d8dd}
                        .menu-dropdown ul li ul li a:hover{background: #99d8dd; color: #072733; }                       
.menu-dd{height: 83px; background: url(../img/icon-menu.png);}  

.header-bottom{width: 73%; float: left; margin-top: 83px; background: #99d8dd;}
    .header-bottom nav{width: 672px; float: right; background: #358889}
        .header-bottom nav a{float: left; padding: 25px 21.7px; font-family: "Opensans-Semibold"; text-align: center; background: #99d8dd; transition: all .5s ease-in-out;}
        .header-bottom nav a:hover{background: #45bcba; color: #fff;}

#menu-loja{background: #358889; color: #fff; transition: all .5s ease-in-out;}
#menu-loja:hover{background: #266f70}

.projeto-cura{width: 27%; margin-top: 83px; background: #ff9601; float: left;}
    .projeto-cura a{float: left; padding: 25px 20px; font-family: "Opensans-Semibold"; color: #fff}

/*
=========
==INDEX==
=========
*/

.bg-index{width: 100%; float: left; margin: 0; background: url(../img/bg-index.png) top left no-repeat;}
.info-proj-cura{width: 50%; float: right; background: rgba(255,255,255,0.7); padding: 20px 20px 0 20px; margin: 49px 10px 0}
    .info-proj-cura h1{width: 80%; margin: auto; display: table; clear: both}
    .info-proj-cura h1 span{font-size: 22px; margin: 5px 0; font-family: "OpenSans-Extrabold", Helvetica; color: #072733; display: block; text-align: right;}
    .info-proj-cura figure{width: 95%; float: none; margin: 0 auto; display: table; clear: both;}
        .info-proj-cura figure img{width: 100%}
    .info-proj-cura p{text-align: right;}
    .info-proj-cura a{width: 171px; height: 98px; background: url(../img/mark2.png); float: none; margin: auto; display: table; clear: both; text-align: center; font-family: "OpenSans-Bold"; box-sizing: border-box; padding-top: 46px; transition: all .5s ease-in-out;}
    .info-proj-cura a:hover{color: #45bcba}

.marcador{width: 171px; height: 78px; float: left; margin: 0; clear: both; background: url(../img/mark3.png);}    
.retrofit{width: 50%; float: left; padding: 20px;}
    .retrofit h1, .retrofit h2{color: #51c7c8}
.index-serv{width: 50%; float: left; padding: 20px}    
    .index-serv a{float: left; width: 100%; font-family: "OpenSans-Bold"; text-align: right; padding: 30px 0 15px;}
    .index-serv a:hover{color: #45bcba}
.icon-serv{width: 100px !important; height: 100px !important; float: left; background: url(../img/icon-serv.png); margin: 0 5px; padding: 0 !important;}

.serv1{}
.serv1:hover{background-position: 0 -100px;}
.serv2{background-position: -100px 0;}
.serv2:hover{background-position: -100px -99px;}
.serv3{background-position: -200px 0;}
.serv3:hover{background-position: -200px -99px;}
.serv4{background-position: -300px 0;}
.serv4:hover{background-position: -300px -99px;}

/*
==========
==ASIDE===
==========
*/

.lista{width: 100%; float: left; margin: 0; background: url(../img/bg-blue.png) top center no-repeat; transition: all .3s ease-in-out;}
.lista10{width: 65%; float: right; padding: 40px 60px 20px; background: rgba(255,255,255,0.7); transition: all .3s ease-in-out;}
    .lista10 h1{width: 40px; float: left; cursor: default; transition: all .3s ease-in-out;}
    .lista10 p{float: right; width: 90%; text-align: left; padding-top: 5px; cursor: default; transition: all .3s ease-in-out;}
    .lista10 .content:hover h1{transform: scale(1.5);}
    .lista10 .content:hover p{font-family: 'OpenSans-Bold'}

.tt-lista10{position: absolute; width: 428px; left: -50px; background: url(../img/tt-lista10.jpg);}    
    .tt-lista10 h1{color: #fff; width: 55%; float: right; margin-top: 40px; padding: 20px 0; font-size: 20px}
    .tt-lista10 h2{color: #99d8dd; width: 65%; float: right; margin-top: 0; padding: 20px 0}

.gao{width: 50%; padding: 40px 20px}  
    .gao span{width: 86px; height: 88px; background: url(../img/nature.png) top left no-repeat; float: right;}
    .gao p{width: 100%; float: left; display: block; margin: 20px 0; text-align: right;}
.tt-gao{width: 80%; float: left; margin: 10px 0}  
    .tt-gao h1{font-size: 28px}
    .tt-gao h2{font-size: 26px}

.vantagens{width: 100%; float: left; background: #99d8dd; padding: 20px 0; text-align: center;} 
    .txt-vantagens{width: 50%; float: left;}
    .txt-vantagens span{width: 30px; height: 33px; background: url(../img/check.png); float: left; margin-right: 5px}   
    .txt-vantagens h2{width:70%;float: left;}

/*
==========
==FOOTER==
==========
*/    

footer{width: 100%; float: left; background: #072733; padding: 20px 0 0}
    .footer-contato{width: 80%; float: left; text-align: right;}
        .footer-contato h2{color: #99d8dd; line-height: 28px}
.footer-logo{width: 18%;float: right; text-align: center; padding: 10px 0}    
.rodape{width: 100%; float: left; margin: 0; padding: 5px 0; background: #f8f6eb}
    .rodape p, .rodape a{float: left; display: block; font-size: 14px; margin-left: 5px}
    .rodape a:hover{text-decoration: underline;}

/*
===========
==EMPRESA==
===========
*/      

.video{width: 100%; float: left; padding: 70px; background: url(../img/river.jpg) top left no-repeat; background-position: -450px -1000px; display: none;}
.col-video{width: 50%;float: left; padding: 50px 0}
    .col-video h1{font-size: 25px; line-height: 25px;}
    .col-video span{width: 60px; height: 60px; background: url(../img/video.png); display: table; float: left; margin-right: 25px;}
    .col-video span:hover{background-position: -60px 0}
    .col-video span a{width: 100%; height: 100%; float: left;}
#video-cura{width: 800px; height: 515px; background: #999; display: none;}    

.ideia-verde{width: 100%; margin: 0 auto; display: table; text-align: center; display: none}

.empresa-col{width: 48%; text-align: justify; display: none;}
    .empresa-col p{float: left;}

.txt-empresa{text-align: justify;}
.txt-empresa h2{display: table; clear: both; float: left; border-bottom: 1px solid #51c7c8; padding: 7px 0; color: #51c7c8}
.txt-empresa h2 span{width: auto; height: 30px; position: absolute; display: table; margin: 32px 0}

.publico-alvo li{display: block; width: 100%; padding: 2px 0; text-align: center; list-style: none; transition: all .5s ease-in-out;}
.publico-alvo li p{display: table; margin: auto; clear: both; padding: 3px; transition: all .5s ease-in-out;}
.publico-alvo li p:before{content: "✓"; color: #51c7c8; font-size: 26px; margin-right: 5px; transition: all .5s ease-in-out;}
.publico-alvo li:hover{transform: scale(1.1, 1.1);}
.publico-alvo li:hover p{background: #51c7c8; color: #fff}
.publico-alvo li:hover p:before{color: #fff}

.mark-empresa{width: 30%; margin: auto; display: table; clear: both; border-top: 1px solid #51c7c8; height: 20px; text-align: center;}

.btn-showroom{width: 30%; margin: auto; display: table; clear: both; text-align: center; padding: 10px; background: #51c7c8; color: #fff; border: 1px solid #51c7c8; transition: all .5s ease-in-out;}
.btn-showroom span{width: 36px; height: 50px; margin: auto; display: table; clear: both; background: url(../img/icon-showroom.png); background-position:-36px 0; transition: all .5s ease-in-out; }
.btn-showroom:hover{transform: scale(1.15, 1.15);; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);}

/*
===========
==CONTATO==
===========
*/     

.form{width: 100%; float: left; margin: 20px 0}
    .form form{width: 100%; margin: auto; display: table; clear: both; padding: 80px 0}
    .form form h2{width: 100%; float: left;margin: 3px 0}
    .form form input{width: 100%; float: left; box-sizing: border-box; padding: 7px; height: 40px; border: 1px solid #99d8dd; background: none}
    .form form input:hover, .form form input:focus{border: 1px solid #072733}
    .form form textarea{width: 100%; float: left; box-sizing: border-box; padding: 7px; height: 100px; border: 1px solid #99d8dd; background: none}
    .form form textarea:hover, .form form textarea:focus{border: 1px solid #072733}
    .form form button{width: 20%; margin: auto; display: table; padding: 15px 0; background: #99d8dd; border: 0; font-family: "OpenSans-Bold"; transition: all .5s ease-in-out;}
    .form form button:hover{background: #072733; color: #fff}
.input-col{width: 49%; margin: 5px 0}
    .input-col a{width: 45px; height: 45px; float: left; background: url(../img/social.png); transition: all .5s ease-in-out;}

.facebook{}
.twitter{background-position: -45px 0 !important;}
.youtube{background-position: -90px 0 !important;}
.skype{background-position: -135px 0 !important;}
.plus{background-position: -180px 0 !important;}

.facebook:hover{background-position: 0 -45px !important}
.twitter:hover{background-position: -45px -45px !important;}
.youtube:hover{background-position: -90px -45px !important;}
.skype:hover{background-position: -135px -45px !important;}
.plus:hover{background-position: -180px -45px !important;}

.input{width: 100%; margin: 5px 0; text-align: center;} 
.button{margin-top: -35px}

.tt-map{display: table; width: 20%; margin: auto; clear: both; padding: 15px 0; background: #99d8dd; text-align: center; position: relative; z-index: 999}
.map{width: 100%; float: left; margin-top: -25px; border-top: 1px solid #99d8dd;}

/*
=========
==MÍDIA==
=========
*/ 

.midia-videos{width: 100%; float: left; margin: 20px 0}
    .midia-videos h1{margin: 20px 0}
.box-video{width: 33%; height: 237px; overflow: hidden; margin: 5px 1px; float: left; overflow: hidden; position: relative; z-index: 100; background: #444}
.box-video:hover{transform: scale(1.1, 1.1); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7); transition: all .5s ease-in-out;  z-index: 999}
    .box-video a{width: 100%; height: 100%; float: left; overflow: hidden; transition: all .5s ease-in-out;}
    .box-video a img{opacity: 0.6}
    .box-video a:hover .tt-video{margin-top: -250px; background: #072733; z-index: 101;}
    .box-video a:hover .tt-video p{padding: 120px 0; color: #fff; font-family: "OpenSans-Bold";}
    .box-video a:hover .tt-video p span{width: 40%}
.tt-video{width: 100%; float: left; margin-top: -68px; position: relative; z-index: 100; background: #99d8dd url(../img/bg-blue.png); text-align: center; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7); transition: all .5s ease-in-out;}
    .tt-video p{padding: 20px 0; transition: all .5s ease-in-out;}
    .tt-video p span{width: 0%; display: table; margin: auto; clear: both; height: 1px; border-bottom: 5px solid #ff9601; transition: all .5s ease-in-out;}
.video-fancy{width: 800px; height: 515px; display: none;}    

/*
============
==SERVIÇOS==
============
*/ 

.servicos{width: 100%; float: left; margin: 20px 0 0}
.box-servicos{width: 30%; float: left; text-align: center; padding: 20px 0 50px; margin: 0 15px;}
    .box-servicos span{width: 60px; height: 60px; margin: auto; display: table; clear: both; background: url(../img/icon-serv2.png) no-repeat;}
    .box-servicos p{padding: 7px 0}
.icon2{background-position: -60px 0 !important}  
.icon3{background-position: -120px 0 !important}  

.retrofit-cit{width: 100%; float: left; text-align: justify; box-sizing: border-box; padding: 20px; background: #51c7c8; color: #fff; margin: 20px 0}    

.serv-col{width: 48%; margin: 20px 0}
    .serv-col figure{width: 100%; float: left; margin: 0}

.bg-serv{background: url(../img/river.jpg) top left no-repeat; background-position: -450px -1000px}    

.servico1{padding: 60px 0; margin-top: 0 !important; border-bottom: 1px solid #51c7c8; border-top: 1px solid #51c7c8;}
.servico1 span{width: 100px; height: 100px; margin: auto; display: block; clear: both; background: url(../img/icon-serv.png); background-position: -100px 0}

.servico2{padding: 60px 0; border-bottom: 1px solid #51c7c8}
.servico2 span{width: 100px; height: 100px; margin: auto; display: block; clear: both; background: url(../img/icon-serv.png);}

.servico3{padding: 60px 0;}
.servico3 span{width: 100px; height: 100px; margin: auto; display: block; clear: both; background: url(../img/icon-serv.png);}

.btn-loja{display: table; margin: auto; clear: both; padding: 15px 100px;background: #ff9601; color: #fff; text-align: center; transition: all .5s ease-in-out;}
.btn-loja:hover{transform: scale(1.1, 1.1); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7); }

/*
============
==PRODUTOS==
============
*/ 

.valores li{width: 100%; display: block; float: left; list-style: none}
.valores li p{display: block;float: left;}
.valores li p:before{content: "✓"; color: #51c7c8; font-size: 25px; margin-right: 3px}

.conheca{width: 100%; float: left; background: #99d8dd; padding: 20px 40px; margin: 20px 0 0}

.confira{width: 100%; float:  left; margin-bottom: 20px; text-align: center;}
.confira li{width: 100%; display: block; float: left; list-style: none}
.confira li p:before{content: "✓"; color: #51c7c8; font-size: 25px; margin-right: 3px}
.confira p strong{font-size: 16px; font-family: "OpenSans-Extrabold"}
.confira p a{font-family: "OpenSans-Extrabold"}
.confira p a:hover{text-decoration: underline;}

/*
===========
==ARTIGOS==
===========
*/ 

.artigo-princ{width: 60%; float: left; padding: 20px 0; text-align: justify;}
    .artigo-princ small{width: 100%; float: left; margin: 3px 0; display: block;}
.share{width: 100%; float: left; margin: 5px 0;}
    .share a{float: left; display: table; padding: 10px; text-align: center; border: 1px solid #444; margin: 0 1px}
    .share a:hover{background: #51c7c8; color: #fff; border: 1px solid #51c7c8}

.artigo-old{width: 30%; float: right; padding: 20px 0; text-align: justify;}    
.box-old{width: 100%; float: left; margin: 5px 0; border-bottom: 1px dashed #ddd; padding: 10px 0}
.box-old h2{margin: 0}
.box-old a{color: #51c7c8}
.box-old a:hover{font-weight: bold; text-decoration: underline;}

.paginacao{width: 100%; float: left;}
    .paginacao a{float: left; display: table; padding: 7px 0; margin: 0 10px; transition: all .5s ease-in-out;}
    .paginacao a:hover{padding: 4px 0 10px;}
    .paginacao a:hover span{color: #51c7c8}