@charset "utf-8";

/*

COR GERAL DO SITE #571759
COR BUTTOM FORM CONTATO #eb4141

*/

.flex, .flex2 { display: flex; }
.wrap { flex-wrap: wrap; }
.ai-c{ align-items: center; }
.jc-c{ justify-content: center; }
.jc-sb{ justify-content:space-between; }
.ac-c{ align-content: space-between; }
.as-fs{ align-self: flex-start; }
.as-c{ align-self: center; }
.as-fe{ align-self: flex-end; }

/* GERAL */
* {list-style:none; margin:0; padding:0; text-decoration:none; box-sizing: border-box; }
[onClick] {cursor:pointer;}
img { border:0; border-radius:2px;}
html, body { height:100%; min-height:100%; /*font: 300 15px/20px 'Open Sans', sans-serif;*/ font: 15px/20px 'Open Sans', sans-serif;}
h1, h2, h3 { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; }
button { cursor: pointer; outline: none; border: none; -o-transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}

button.saibamais { padding: 0 20px; background: #dadada; margin-top: 20px; font: 600 15px/40px 'Open Sans', sans-serif; color: gray; border-radius: 3px; box-shadow: 0 15px 30px 0 rgba( 255, 255, 255, 0.1) inset;}
button.saibamais:hover { background: #b7b7b7; color: whitesmoke; }

.largura_site { max-width: 1200px; margin: 0 auto; width: 98%; }

/* TOPO */
#banner { position:fixed; z-index:-1; width:100%; height:100%; left:0; top:0; }
#banner .fotos { width:100%; height:100%;}
#dots { position:absolute; /* z-index:999; */ width:100%; height:100%; opacity:0.5; top:0; background:black url(imagens/dots.png);}

#inicial { margin: 20px auto 0; height: calc(100% - 40px); min-height: 700px; border-bottom: 20px solid #571759; position: relative;}
#inicial.topo_menu { height: auto; min-height: 0; border-bottom: none; margin-bottom: 20px; }

#topo { position: relative; /* overflow: hidden */}
#logo { float: left;}
#logo img { width: 100%; max-width: 280px; height: auto;}

#menu { margin-top: 50px; }
#menu li { display: inline-block; margin: 5px; position: relative; }
#menu li a { display: block; font: 600 15px/30px 'Open Sans', sans-serif; color: white; text-transform: uppercase; padding: 0 5px; border-radius:2px; -o-transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
#menu li a:hover { color:black; background: rgba( 255, 255, 255, 0.8); }
nav select { display:none; background: white; text-transform: uppercase; border-radius:3px; padding:10px; width:95%; margin: 0 auto; outline:none; z-index:999; position:relative; }
nav select option { padding: 2px 10px; }

#menu li:hover .sm{ display:block !important; }

.sm { position:absolute; display:none; border:none;  margin:0; padding:0;  transform: translatex( -50% ); left: 50%; list-style:none; background: rgba( 0, 0, 0, 0.3); padding: 5px; border-radius:2px; }
.sm li{ display:list-item; box-sizing: border-box; position: relative; width: 100%; text-align: center; margin: 0 !important; }
.sm li a { z-index:10; white-space: nowrap; margin: 2px 0; display: inline-block !important; }
.sm a{ padding: 0; }

#slogan { position:absolute; width:65%; bottom:25%; left:5%;}
#slogan h2 { width: 100%; color:white; font: 300 60px/60px 'Open Sans', sans-serif;}
#slogan h2 span { display: block; font: 300 40px/45px 'Open Sans', sans-serif;}
#slogan h2 p { font: 300 20px/25px 'Open Sans', sans-serif; text-transform: uppercase; margin-top: 20px;}
#slogan #slogan_pag span { font-size: 40px; text-align: left; display: inline-block; color: rgba( 255, 255, 255, 0.3); cursor: pointer; margin-top: 2%;}
#slogan #slogan_pag span:hover, #slogan #slogan_pag span.cycle-pager-active { color: white !important;}

#social { position: absolute; bottom: 0; right: 0; background: #571759; padding: 20px 20px 0 20px; border-radius: 10px 10px 0 0;}
#social > div { display: inline-block; margin: 0 5px;}
#social > div:before { font:33px 'FontAwesome'; color:white; cursor:pointer;}
#social div.icone1:before { content:"\f082";}
#social div.icone2:before { content:"\f08c";}
#social div.icone3:before { content:"\f081";}
#social div.icone4:before { content:"\f16a";}


/* UTILITARIOS */
#layout1 { overflow: hidden; padding: 40px 0; background: #7c7d7d; font-size: 0;}
#layout1 h2 { font: 600 16px/35px 'Open Sans', sans-serif; color:white; text-align: left;}
#layout1 p { font: 300 14px/20px 'Open Sans', sans-serif; color: #f7f7f7; text-align: left;}
#layout1 .blocos { width: calc(100% / 4 - 10px); display: inline-block; margin:5px; padding: 10px; box-sizing: border-box; cursor: pointer; border-radius:3px; vertical-align: top; -o-transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
#layout1 .blocos:hover { background: rgba( 255, 255, 255, 0.04);}
#layout1 .blocos:before { font:30px/50px 'FontAwesome'; color:darkslategray; background: #ffffff; width: 50px; border-radius:5px; float:left; text-align:center; margin-right:10px;}
#layout1 .blocos.icone1:before { content: "\f017";}
#layout1 .blocos.icone2:before { content: "\f10a";}
#layout1 .blocos.icone3:before { content: "\f007";}
#layout1 .blocos.icone4:before { content: "\f128";}

/* SOBRE NOS */
#layout2 { overflow:hidden; background: white url(imagens/sombra.png) top center no-repeat; background-position-y:2px; padding:50px 0;}
/*#layout2 .blocos { width: 49%;}*/
/*#layout2 .blocos.esquerda { float: left;}*/
/*#layout2 .blocos.direita { float: right; margin-top:50px;}*/
/*#layout2 .blocos.direita p { margin-bottom: 15px;}*/
#layout2 .blocos { margin: 0 10px 50px; }
#layout2 .blocos.esquerda { flex: 1 350px; }
#layout2 .blocos.direita { flex: 1 350px; }
#layout2 h2 { font: 300 35px/50px 'Open Sans', sans-serif; margin-bottom: 20px;}
#layout2 h2 span { display: block; font: 300 25px/30px 'Open Sans', sans-serif;}
#layout2 h3:before { font:20px/50px 'FontAwesome'; display:inline-block; width: 50px; text-align: center; margin-right:15px; color:white; background-color:#571759; border-radius:5px;}
#layout2 h3.icone1:before { content: "\f024";}
#layout2 h3.icone2:before { content: "\f0ac";}
#layout2 h3.icone3:before { content: "\f200";}
#layout2 h3.icone4:before { content: "\f0c0";}

.box{ display: flex; flex-direction: column; justify-content: space-around; align-items: center; flex: 1 200px; margin: 20px; padding: 10px; background: whiteSmoke; border-radius: 5px; border-bottom: 5px solid #571759;  -webkit-transition:all ease-out 150ms; }
.box:hover{ background: white; -webkit-transition:all ease-out 150ms; }
.box div img{ max-height: 90px; height: 100%; }
.box div h2{ line-height: 30px !important; text-align: center; font-size: 25px !important; margin: 0 !important; }
.box div h2 a { padding: 10px; border-radius: 3px; display: inline-block; color: #571759; -webkit-transition:all ease-out 150ms; }
.box div h2 a:hover{ background: whiteSmoke; -webkit-transition:all ease-out 150ms; }

/*
.box:nth-child(1){ border-bottom-color: #09F; }
.box:nth-child(2){ border-bottom-color: #F90; }
.box:nth-child(3){ border-bottom-color: #C5CF38; }
.box:nth-child(4){ border-bottom-color: #F03; }
*/

/* SERVICOS */
#layout3 { background: url(imagens/textura.png) repeat; border-top:1px solid #dbdbdb; position:relative;}
#layout3:before { content:""; display:block; position:absolute; top:0; left:50%; width:0; height:0; margin-left:-25px; border-width:25px; border-style:solid; border-color: #dbdbdb transparent transparent;}
#layout3:after { content:""; display:block; position:absolute; top:-1px; left:50%; width:0; height:0; margin-left:-25px; border-width:25px; border-style:solid; border-color:#fff transparent transparent;}
#layout3 .largura_site { position:relative; overflow:hidden; padding:70px 0;}
#layout3 .blocos { width:49%; min-height:350px;} /*para não cortar a imagem ao lado*/
#layout3 img.img_servicos { position:absolute; width:48%; height:auto; max-width:300px; bottom:0; left:60%;}
#layout3 h2 {text-align:center; width: 80%; margin: 0 auto; font: 300 35px/50px 'Open Sans', sans-serif;}
#layout3 h2 span {display: block; font: 300 25px/30px 'Open Sans', sans-serif; margin-bottom: 30px;}
#layout3 ul { margin:20px 0 20px 20px;}
#layout3 ul li {font:300 14px/25px 'Open Sans';}
#layout3 ul li:before { font:15px/25px 'FontAwesome'; content:"\f046"; margin-right:10px; color:#571759; float:left;}

/* PROGRAMAÇÕES */
#programacoes { padding:70px 0; overflow: hidden; }
/*#programacoes .blocos { width:48%;}*/
/*#programacoes .blocos.esquerda { float: left;}*/
/*#programacoes .blocos.direita { float: right;  margin-top: 40px; }*/
#programacoes .blocos { margin: 0 10px 50px; }
#programacoes .blocos.esquerda { flex: 1 350px; }
#programacoes .blocos.direita { flex: 1 350px; }
#programacoes h2 { font: 600 27px/30px 'Open Sans', sans-serif; color:white; text-align:left; /* margin-bottom: 15px; */ padding: 5px 0;}
#programacoes h2 span { display: block; font: 300 19px/25px 'Open Sans', sans-serif; color:#f7f7f7; text-align:left;}
#programacoes form input{ width: 100%; outline: none; font:300 15px/25px 'Open Sans', sans-serif; padding: 5px 10px; margin-bottom: 5px; background: rgba( 255, 255, 255, 0.8); border: 1px solid #ddd; border-radius: 2px;}
#programacoes form button { padding: 0 20px; background: #571759; margin-top: 20px; font: 600 16px/40px 'Open Sans', sans-serif; color: #fff; border-radius: 3px; box-shadow: 0 15px 30px 0 rgba( 255, 255, 255, 0.1) inset; text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5);}
#programacoes form button:hover { box-shadow: 0 -15px 10px 0 rgba( 255, 255, 255, 0.1) inset;}
#programacoes form a { font: 600 15px/40px 'Open Sans', sans-serif; color:white; margin-left: 10px; display: inline-block;}

#programacoes div.prog { /* width: 90%; */ /* margin: 0 auto; */ color:white; background-color:#571759; border-radius: 2px; margin: 10px; -o-transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
#programacoes div.prog h2, #programacoes div.prog h2 span { text-align: center !important;}
#programacoes div.prog:hover { -webkit-transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1);}

.ff1{ flex: 1 150px; margin: 10px !important; }

/* LINKS IMPORTANTES */
#layout4 { overflow: hidden; padding: 30px 0; background: #7c7d7d;}
#layout4 .blocos { width:49%;}
#layout4 .blocos.esquerda { float: left;}
#layout4 .blocos.direita { float: right;}
#layout4 h2 { font: 600 27px/30px 'Open Sans', sans-serif; color:white; text-align:left; margin: 20px 0;}
#layout4 h2 span { display: block; font: 300 19px/25px 'Open Sans', sans-serif; color:#f7f7f7; text-align:left;}
#layout4 ul { width:50%; float: left; padding: 0 10px; box-sizing: border-box;}
#layout4 ul li { position:relative; font:300 13px/25px 'Open Sans', sans-serif; margin-bottom:5px; color: white; text-transform:uppercase; cursor: pointer; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;}
#layout4 ul li:before { display: inline-block; font:13px/13px 'FontAwesome'; content:"\f054"; margin-right: 10px; color:#571759; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;}
#layout4 ul li:hover { color:#571759;}
#layout4 ul li:hover:before { color:#fff; -webkit-transform:scale(1.3); -moz-transform:scale(1.3); -ms-transform:scale(1.3); -o-transform:scale(1.3); transform:scale(1.3);}

#layout4 form label{ font:300 13px/25px 'Open Sans', sans-serif; color:#f7f7f7; text-transform:uppercase;}
#layout4 form input, #layout4 form textarea { width: 100%; outline: none; font:300 15px/25px 'Open Sans', sans-serif; padding: 5px 10px; background: #fcfcfc; border: 1px solid #ddd; border-radius: 2px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset; resize: none;}
#layout4 form button { width: 60%; background: #571759; margin-top: 20px; font: 600 16px/40px 'Open Sans', sans-serif; color: #fff; border-radius: 3px; box-shadow: 0 15px 30px 0 rgba( 255, 255, 255, 0.1) inset; text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5); }
#layout4 form button:hover { box-shadow: 0 -15px 10px 0 rgba( 255, 255, 255, 0.1) inset;}


/* RODAPE */
#rodape { background: #571759; color: white; padding: 20px; text-align: center;}
#rodape a { color: white;}


/* CONTEUDO */
#conteudo { overflow:hidden; background: white url(imagens/sombra.png) top center no-repeat; background-position-y:2px; padding:50px 0;}
#conteudo h2 { font: 300 35px/50px 'Open Sans', sans-serif; margin-bottom: 20px;}
#conteudo h2 span { display: block; font: 300 25px/30px 'Open Sans', sans-serif; letter-spacing: -2px;}
#conteudo a { color: black; text-decoration: underline }

#conteudo .contato { width: 49%;}
#conteudo .contato.esquerda { float: left;}
#conteudo .contato.direita { float: right;}
#conteudo .contato p, #conteudo .contato h3 { text-align: right;}
#conteudo .contato h3:after { font:20px/50px 'FontAwesome'; display:inline-block; width: 50px; text-align: center; margin-left:15px; color:white; background-color:#571759; border-radius:5px;}
#conteudo .contato h3.icone1:after { content: "\f041";}
#conteudo .contato h3.icone2:after { content: "\f095";}
#conteudo .contato h3.icone2a:after { content: "\f232";}
#conteudo .contato h3.icone3:after { content: "\f0e0";}
#conteudo .contato p { margin-bottom: 20px;}

.wh {
    width: 100%;
    height: 100%;
    position: relative.;
}
.wh:before {
    background-image: linear-gradient(135deg, rgba(255,255,255,.5) 0%,rgba(155,155,155,.5) 30%,rgba(255,255,255,0) 0%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    content: "";
    z-index: 900;
}

@media screen and (max-width: 1000px) {
    #slogan { width: 90%; bottom: 15%;}
    
    #logo { width: 100%; float: none;}
    #logo img { margin: 0 auto; display: block;}
    
    #topo{ justify-content: center; }
    
    #menu { width: 100%; text-align: center;}
    #menu li { margin: 0 5px;}
}

@media screen and (max-width: 800px) {
    #layout1 .largura_site { width: 600px;}
    #layout1 .blocos { width: calc(50% - 20px);}
    
    #slogan h2 { font: 300 45px/55px 'Open Sans', sans-serif;}
    #slogan h2 span { font: 300 35px/45px 'Open Sans', sans-serif;}
    #slogan h2 p { font: 300 15px/25px 'Open Sans', sans-serif; margin-top: 10px;}  
    
    #layout2 .blocos, #layout3 .blocos, #layout4 .blocos { width: 100%;}
	#layout3 h2 { width: 100%; text-align: left;}
	#layout3 img.img_servicos { display: none;}
    #layout3 .blocos { min-height: auto;}
    
    #conteudo .contato { width: 100%;}
    #conteudo .contato p, #conteudo .contato h3 { text-align: left;}
    #conteudo .contato h3:after {display: none; }
    
    #programacoes .blocos { width:100%;}
}

@media screen and (max-width: 659px) {
    nav select { display:block;}
	#menu li { display:none;}
    
    #layout1 .largura_site { width: 90%;}
    #layout1 .blocos { width: calc(100% - 20px);}
    
    #layout4 ul { width:100%; float: none; }
}

@media screen and (max-width: 500px) {
	#slogan h2 { font: 300 32px/40px 'Open Sans', sans-serif;}
    #slogan h2 span { font: 300 27px/30px 'Open Sans', sans-serif;}
    #slogan h2 p { font: 300 13px/25px 'Open Sans', sans-serif;}  
}