@charset "UTF-8";
/****************************************************  
        CSS RESPONSIVO
****************************************************/

/****************************************************  
        MEDIA QUERIES
****************************************************/

/******************
        MÁXIMO 1350px 
******************/
@media screen and (max-width: 1350px) {

    /* INTERNA - PORTFOLIO */
    .projeto-capa .infos01 {
        width: 38%;
    }

    .projeto-capa .infos02 {
        width: 40%;
    }
}

/******************
        MÁXIMO 1250px 
******************/
@media screen and (max-width: 1250px) {

    .topo .menu-principal li {
        margin-left: 30px;
    }

    .destaques-principais section ~ section:before {
        content: normal;
    }

    /* INTERNA - PORTFOLIO */
    .projeto-capa .infos02 {
        width: 42%;
    }

    .projeto-capa .infos01 {
        width: 45%;
    }

    .projeto .infos02 .dados01 {
        margin-left: 12%;
    }

    .projeto .infos02 .dados02 {
        margin-left: 6%;
    }

    .projeto-descricao .infos {
        width: 50%;
    }

    .projeto-descricao .img-destaque-descricao {
        width: 45%;
    }

}

/******************
        MÁXIMO 1050px 
******************/
@media screen and (max-width: 1050px) {

    /* INTERNA - PORTFOLIO */
    .projeto-capa .infos02 {
        width: 44%;
    }

    .projeto .infos02 .dados01 {
        margin-left: 8%;
    }

    .projeto .infos02 .dados02 {
        margin-left: 4%;
    }

}

/******************
        MÁXIMO 1000px 
******************/
@media screen and (max-width: 1000px) {

    /* GERAL */
    .conteudo {
        padding: 60px 0;	
    }

    .subtitulo-destaque br {
        display: none;
    }

    .separador,
    #big-video-wrap,
    .btn-topo,
    .rodape .facebook,
    .orcamento,
    .btn-rolar,
    .btn-rolar02 {
        display: none;
    }

    /* TOPO */
	
	.col-md-3 {
		float:left;
	}
	
	.row {
		min-height:84px;
	}
	
    .topo {
        /*height: 82px !important;*/
        position: relative;
        display: block !important;
    }

    .topo .menu-principal {
        width: 50%;
        margin-top: 20px;
    }

    .topo .menu-principal ul {
        display: none;
    }

    .topo .menu-principal select {
        display: block;
    }

    /* INTRODUÇÃO */
    .introducao {
        position: relative;
        height: auto !important;
        min-height: 0;
    }

    .introducao .conteudo {
        position: relative;
        top: 0;
        left: 0;
        width: auto;
        height: auto;
        margin: 0 auto;
        padding: 60px;
    }

    .introducao h2 br {
        display: none;
    }

    .introducao .frase-destaque {
        margin-bottom: 0;
    }

    /* PROJETOS */
    .portfolio .ciranda-portfolio li {
        width: 87.6%;
    }

    .portfolio .ciranda-portfolio li:first-child {
        left: 0.6%;
    }

    .portfolio .ciranda-portfolio li ~ li {
        width: 43%;
    }

    /* CLIENTES */
    .clientes .ciranda-clientes {
        margin-bottom: 0;
    }

    /* RODAPÉ */

    .rodape:after {
        display:none;	
    }

    .rodape .infos .conteudo {
        padding: 35px 0;	
    }

    .rodape .infos-container {
        padding: 0;
    }

    .rodape .infos-container:after {
        content: "";
        display: block;
        clear: both;
        margin-bottom: 40px;
    }

    .rodape .infos-adicionais {
        text-align: center;
    }

    .rodape .infos-adicionais .info {
        border: none;
        float: none;
        display: inline-block;
    }

    .rodape .infos-adicionais .info03 {
        margin: 0;
        padding: 0;	
    }

    .rodape .infos-adicionais .info03:after {
        content: normal;
    }

    .rodape .infos-telefone {
        float: none;
        clear: both;
        margin: 0 auto;
    }

    /* INTERNA - PORTFOLIO */
    .projeto-capa {
        position: relative;
        background-image:none;
        width: auto;
        height: auto;
    }

    .projeto-destaque {
        margin-top: 0;
    }

    .projeto-capa .infos01 {
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }

    .projeto-capa .infos h1 {
        font-size: 6em;	
    }

    .projeto-capa .infos h2 {
        margin-bottom: 30px;
    }

    .projeto-capa .infos p {
        margin-bottom: 6px;
        display: inline;
        line-height: 123%;
    }

    .projeto-capa .infos02 {
        width: 100%;
        margin-top: 30px;
    }

    .projeto-capa .infos02 div {
        float: left;
        clear: none;
        width: 28% !important;		
        margin: 0 2% !important;
        text-align: center;
    }

    .projeto .infos02 div span {
        float: none !important;
        margin: 0 auto !important;
    }

    .projeto-capa .infos02 .dados h3 {
        width: 100%;
        margin: 15px 0 0;
        font-size: 2em;
    }

    /* INTERNA - PORTFOLIO */
    .projeto-descricao .infos {
        width: 100%;
        text-align: center;
        margin-bottom: 50px;
    }

    .projeto-descricao .infos h4 {
        right: 0;
    }

    .projeto-descricao .tamanhos-tela img {
        float: none;
        width: auto;
        display: inline-block;
    }

    .projeto-descricao .tamanhos-tela {
        text-align: center;
    }

    .projeto-descricao .img-destaque-descricao {
        width: 70%;
        float: none;
        margin: 0 auto;
    }

    /* INTERNA - CNF */

    .cnf .projeto-capa .infos01 {
        width: 100%;
        margin-top:0;
    }

    .cnf .projeto-capa .infos01 h1 img {
        margin:0 auto; 
    }

    .cnf .infos01 .loja {
        text-align:center; 
    }

    .cnf .projeto-capa .infos h2 {
        text-align:center; 	
    }

    .cnf .projeto-descricao .img-destaque-descricao {
        width: 47%;
        float: none;
        margin: 0 auto;
    }

    .cnf .projeto-descricao .infos {
        width: 100%;
    }

    /* INTERNA - THERMAS */

    .thermas .projeto-capa {
        height: 574px;
        background: url(/assets/img/site/projetos/projeto-thermas-capa-site.jpg) center;
    }

    .thermas .projeto-capa .infos01 {
        margin: 0 auto;		
    }

    .thermas .projeto-descricao {
        padding:0;
    }
    .thermas .projeto-descricao .infos {
        width: 100%;
    }


    /* INTERNA - ESTIVANELLI */

    .estivanelli .projeto-capa {
        height: 390px;
        background: url(/assets/img/site/projetos/projeto-estivanelli-capa-site.jpg) #d5e1e5 no-repeat center top;
    }

    .projeto-capa .infos h1 img {
        margin:0 auto;	
    }

    .estivanelli .projeto-capa .infos01 {
        width:100%;
        margin: 0 auto;		
    }

    .estivanelli .projeto-descricao {
        padding:0;
    }

    .estivanelli .projeto-descricao .infos {
        width: 100%;
        margin-bottom:0;
    }

    .estivanelli .projeto-descricao .conteudo {
        padding: 53px 45px;
    }

    /* INTERNA - CANTINELLA */

    .cantinella .projeto-capa {
        height: 363px;
        background: url(/assets/img/site/projetos/projeto-cantinella-capa-site.jpg) no-repeat center top;
    }

    .cantinella h1 {
        margin-top: 0px;
    }

    .cantinella .projeto-destaque h3 { 
        font-size: 2.5em;
    }

    .cantinella .projeto-capa .infos01 {
        width:80%;
        margin:0 auto;
        padding:0;
    }
    .cantinella .projeto-capa .infos h1 img {
        width:300px;
    }

    .cantinella .projeto-destaque {
        margin-top: -16px;
    }

    .cantinella .projeto-descricao .conteudo {
        padding:50px 0;	
    }
    
    .cantinella .projeto-descricao .infos h3 {
        font-size: 3em;
    }
    .cantinella .projeto-descricao .infos {
        width: 100%;
    }

    .cantinella .projeto-descricao .infos h4 {
        right: 0;	
    }

    .cantinella .projeto-descricao img {
        position: relative;
        float: none;
        width: 80%;
        margin:0 auto;
    }
}

/******************
        MÁXIMO 900px 
******************/
@media screen and (max-width: 900px) {


    /* INTRODUÇÃO */
    .introducao h2 {
        padding-bottom: 0;
        font-size: 2em;
    }

    .introducao h2:after {
        content: normal;
    }

    /* DESTAQUES */
    .destaques-principais .conteudo {
        padding-bottom: 10px !important;
    }

    .destaques-principais section {
        width: 40%;
        margin: 0 4% 30px;
        min-height: 350px;
    }

    /* CLIENTES */
    .clientes .ciranda-clientes li {
        width: 25%;
        margin-bottom: 25px;
    }

    /* INTERNA - PORTFOLIO */
    .mais-projetos .chamada {
        width: 100%;
        height: 90px;
        margin-bottom: 30px;
        padding: 0;
        text-align: center;
        background: none;
    }

    .mais-projetos .chamada-titulo {
        font-size: 2em !important;
    }

    .mais-projetos li ~ li {
        width: 29%;
        margin: 0 2%;
    }

    .mais-projetos .chamada:after {
        content: normal;
    }
	
	.header-menu-link {
		margin: 0 10px!important;	
	}
}

/******************
        MÁXIMO 700px 
******************/
@media screen and (max-width: 700px) {

	header {
		overflow:hidden;	
	}

    .header-menu-link {
        padding: 0 !important;
        border: none;
		color:#FFF!important;
		
    }

    .header-menu-link:hover {
        border: none;
    }
	
	.row {
		min-height: 95px!important;
		margin-right: -19px!important;
		margin-left: -19px!important;
	}
	
	.col-md-9 {
		margin:20px 0 0 0!important;		
	}
	
	.col-md-3 {
		position:absolute;
		width:150px;
		top:22px;
		left:50%;
		margin-left:-75px!important;
		
	}
	
	.navbar-nav {
		margin: 0!important;	
	}
	
	.navbar-collapse {
		margin-top: 20px!important;
		padding:0!important;
	}
	
	.navbar-toggle {
		margin-right: 25px!important;	
	}
	
	.nav > li {
		background:#26ad79!important;	
		padding:13px 0 10px 18px!important;
		border-bottom:1px solid #25a674!important;
	}
	
	.navbar-default .navbar-toggle .icon-bar {
		background:#25a674!important;
	}
	
    /* TOPO */
    .topo {
        /*height: 154px !important;*/
    }

    .topo .logo {
        float: none;
       	margin:0;
        width: 150px;
    }

    .topo .logo img {
        width:100%;	
    }

    .topo .menu-principal {
        width: 100%;
        margin-top: 26px;
        float: none;
    }

    /* PORTFOLIO */
    .portfolio .ciranda-portfolio li span {
        font-size: 1.3em;
    }

    /* CLIENTES */
    .clientes .ciranda-clientes li {
        width: 35%;
    }

    /* RODAPÉ */
    .rodape .infos-adicionais .info01 {
        width: 35.5%;
    }

    /* INTERNA - PORTFOLIO */
    .projeto-capa .infos02 .dados h3 {
        font-size: 1.5em;
    }

    /* INTERNA - CNF */
    .cnf .projeto-descricao .img-destaque-descricao {
        width: 60%;
        float: none;
        margin: 0 auto;
    }
	
	
}

/******************
        MÁXIMO 550px 
******************/
@media screen and (max-width: 550px) {

    /* INTRODUÇÃO */
    .introducao h2 {
        font-size: 1.6em;
        margin: 25px 0 0px;
    }

    .introducao .frase-destaque {
        display:none;	
    }

    /* PORTFOLIO */
    .portfolio .ciranda-portfolio li ~ li {
        width: 88%;
        margin: 10px 0;
    }

    /* DESTAQUES */
    .destaques-principais section {
        width: 90%;
        margin: 0 auto 50px !important;
        min-height: 0;
        float: none;
    }

    /* CLIENTES */
    .clientes .ciranda-clientes li {
        width: 45%;
    }

    /* RODAPÉ */

    .rodape .infos-telefone {
        width:100%;	
    }

    .rodape .infos-telefone .icone {
        display:none;	
    }

    .rodape .infos-adicionais .info:after {
        background:none;
    }

    .rodape .infos-adicionais .info01, .rodape .infos-adicionais .info02, .rodape .infos-adicionais .info03 {
        width:100%; 
        margin:0;
        padding:0;
        border:none;
    }

    .rodape .infos-adicionais .info03 {
        margin-top: 15px;
    }

    .rodape .infos-adicionais .info01 img, .rodape .infos-adicionais .info02 img {
        margin:10px auto;   
        width: 50%;
    }

    .rodape .infos-telefone .telefones {
        width:100%;	
    }

    .rodape .infos-telefone .titulo-cidades {
        height:55px;	
    }

    .rodape .infos-telefone .titulo-cidades span, .rodape .infos-telefone .numero-telefones span {
        width: 100%;

    }

    .rodape .infos-telefone .titulo-cidades span ~ span, .rodape .infos-telefone .numero-telefones span ~ span {
        border-left:none;
    }

    .rodape .infos-telefone .numero-telefones {
        height:100px;	
    }

    .rodape .infos-contato {
        margin:35px 0 0 0;	
    }

    /* INTERNA - PORTFOLIO */
    .mais-projetos li ~ li {
        width: 100%;
        margin: 10px 0;
    }

    .mais-projetos li img {
        max-width: 100%!important;
        width: 100%;
    }

    /* INTERNA - LESSO */

    .lesso .projeto-capa .infos h1 {
        font-size: 5.2em!important; 
    }

    .projeto .infos02 .dados01 span {
        padding-top: 20px;
        font-size: 2.3em;
    }

    .projeto-capa .infos02 span {
        width: 85px;
        height: 85px;
    }

    .projeto-capa .infos02 .dados h3 {
    font-size: 1.2em;
    }

    .projeto .infos02 .dados02 span {
    padding-top: 33px;
    font-size: 1.2em;
    }

    .projeto .infos02 .dados03 span {
    padding-top: 25px;
    font-size: 2.0em;
    }

    .projeto-descricao .tamanhos-tela img {
    width: 28%;
    }
    
    /* INTERNA - CANTINELLA */

    .cantinella h1 {
        margin-top: 20px;
    }

    /* INTERNA - CNF */
    .cnf .projeto-descricao .img-destaque-descricao {
        width: 80%;
        float: none;
        margin: 0 auto;
    }

    .cnf .projeto-descricao .infos h3 {
    font-size: 2.5em;
    }

    /* INTERNA - THERMAS */


    .thermas .projeto-capa {
        height:424px;		
    }

    .thermas .projeto-destaque h3 {
        font-size: 2.6em;
    }

    .thermas .projeto-capa .infos01 {
    width: 283px!important;
    height: 272px!important;
    }

    .thermas .projeto-capa .infos01 {
        width: 350px;
        height: 337px;
        background-size:100%;
    }

    .thermas .projeto-capa .infos h1 {	
        margin: 153px 7.5% 0 7.5%;
        font-size: 1.2em;
        line-height: 24px;
    }

    .thermas .conteudo-geral {
        padding:0 20px;	
    }

   .thermas .projeto-descricao .infos h3 {
    font-size: 2.1em!important;
    }