@charset "utf-8";

/*
COR GERAL DO SITE #007200
COR BUTTOM FORM CONTATO #A82529
*/

/* GERAL */
* {list-style:none; margin:0; padding:0; text-decoration:none;}
[onClick] {cursor:pointer;}
img { border:0; border-radius:2px;}
html, body { height:100%; min-height:100%; 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%; opacity: 0.7; height:100%; top:0; background: black url(../imagens/dots.png);}

#inicial { margin: 20px auto 0; height: calc(100% - 40px); min-height: 560px; border-bottom: 20px solid #007200; 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 { max-width: 270px; height: auto;}

#menu { text-align: right; margin-top: 50px;}
#menu li { display: inline-block; margin-left: 10px; cursor: pointer;}
#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, .9);}
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;}

#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: #007200; 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:"\f0d4";}

/* UTILITARIOS */
#layout1 { overflow: hidden; padding: 10px 0; background: #3A424C; font-size: 0;}
#layout1 h2 { font: 600 16px/25px 'Open Sans', sans-serif; color:white; text-align: left;}
#layout1 p { font: 300 14px/20px 'Open Sans', sans-serif; color: #f7f7f7; text-align: justify;}
#layout1 .blocos { width: calc(100% / 2 - 10px); display: inline-block; margin: 5px; padding: 20px 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 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:#007200; 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";}

/* 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:#007200; 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: 30px;}
#programacoes h2 { font: 600 27px/30px 'Open Sans', sans-serif; margin-bottom: 30px; color:white; text-align:left;}
#programacoes h2 span { display: block; font: 300 19px/20px '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: 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: #007200; 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: 5px auto; padding: 5px 0; color: white; background-color: #007200; border-radius: 2px; -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 { font-size: 18px; line-height: 20px; margin-bottom: 0; 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);}

/* LINKS IMPORTANTES */
#layout4 { overflow: hidden; padding: 30px 0; background: #2B3138;}
#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:#7a848f; 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:#007200; -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:#fff;}
#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: #A82529; 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: #252b32; color: #59636f; padding: 20px; text-align: center;}
#rodape a { color: #007200;}

/* 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:#007200; border-radius:5px;}
#conteudo .contato h3.icone1:after { content: "\f041";}
#conteudo .contato h3.icone2:after { content: "\f095";}
#conteudo .contato h3.icone3:after { content: "\f0e0";}
#conteudo .contato p { margin-bottom: 20px;}


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

@media screen and (max-width: 800px) {
    #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: 600px) {
    nav select { display:block;}
	#menu li { display:none;}
    
    #layout1 .blocos { width: calc(100% - 10px);}
    
    #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;}  
}