/*CSS Document */
/*@import url(http://fonts.googleapis.com/css?family=Cinzel);*/
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,300);
html {
    min-height:100%;
}


body, menu, ul, li{ margin:0; padding:0; font-family: 'Titillium Web';}
div.clear{ clear: both; float: none; }
body{ }
section{ position: relative; z-index: 2;}
h1{ color: #2A507B; font-size: x-large; font-weight: 400; }
h2{ color: #39393F; font-size: x-large; font-weight: 400;}
a{ text-decoration: none; }
p{ font-weight: 300; }
section.banner{ position: relative; z-index: 1; width: 100%; margin-top: -0.4%;}
img.cover{ position: fixed; top:0; width: 100%; z-index: 2;}
img.logo{ position: absolute; top:0; width: 39.3%; z-index:6;}
a.link-sistema{position: absolute;top: 50%;left: 40%;right: auto;padding: 10px 32px;background: #0F4075;color: #FFB900;border:2px solid;z-index: 7;font-size: 20px;}
a.link-sistema:before{content: 'Acesse aqui o nosso:';color: #FFF;font-size: 16px;position: absolute;top: -23px;left: 0;}
section.lead{ position: absolute; right: 10%; bottom: 22%; width: 66%; }

header{ position: relative; top: 0; z-index:5; width: 100%; margin: auto; left: 0; right: 0; background-color:#0F4075; text-align: center; border-bottom: solid #FFB900 10px}
header menu {  display: block; width: 80%; margin-left: 20%;  }
header menu ul li{ display: inline-block; list-style:none; text-align: center; padding: 1.5% 2.47%; margin: 1.5% 0; position: relative;border-right: solid #FFB900 4px; }
header menu ul li.mobile{ display:none; }
header menu ul li:last-child {border-right:none;}
header menu ul li a{ text-decoration: none; color: #FFF; display: block; display: block;  width: 100%;  text-align: center; font-size: 15px}
header menu ul li:hover{ color:#FFF; transition:all 1s; }
header menu ul li div.hover{ height: 0; width: 100%; background-color: rgba(42,80,122, 0.6); position: absolute; top: 0; z-index: 9; left: 0;  transition: all 0.5s;}
header menu ul li:hover div.hover { height: 100%;  width: 100% ; transition: all 0.5s; }

header menu ul li:hover a{ color: #fff; position: relative; z-index: 10; }
section#qmsomos{ background: #FFF; color: #0F4075;}
section#qmsomos img{ width: 55%; vertical-align: middle; display: inline-block; }
section#qmsomos div{ width: 34%; vertical-align: middle; display: inline-block; padding: 5%;  } 
section#qmsomos div h1{font-size: 24px;color: #0F4075;background-image: none;padding: 0;}
section#qmsomos div p{ font-size: 18px; line-height: 140%; color: #0F4075; }
section#qmsomos div a{ font-size: 18px; line-height: 140%; background-color: #FFB900; color: inherit; padding:  10px 25px; display: inline-block;}


section#servicos{ background: #DBDBEA; padding:5% 10%; position: relative; z-index: 4}
section#servicos img.logo_right{ position: absolute; top: 0; right: 0; width: 39%; }
section#servicos div.col {width: 90%;display: block;margin: 0 0.5%;}
section#servicos div.col img{height: 4vw;display: inline-block;vertical-align: middle;}
section#servicos div.col h1{width: 75%;margin-left: 2%;margin-top: 0;color: #39393F;display: inline-block;vertical-align: middle;}
section#servicos div.col p{ width: 100%; color: #39393F; font-size: 18px; line-height: 140% }
section#servicos div.col ul{padding: 2% 5%; list-style: none;}
section#servicos div.col ul div{ max-height:0px;  overflow: hidden; }
section#servicos div.col ul span{ color: inherit; display: block; padding:0.5% 0}
section#servicos div.col ul li:hover span{ color:#0f4075; font-weight: bold; font-size: 20px; transition: all 1s}
section#servicos div.col ul li:hover{ padding: 2% 0; transition: all 1s; }
section#servicos div.col ul li:hover div{ max-height:1000px; transition: all 1s; width: 60%}
section#servicos div.col ul li:hover div a{ padding: 15px; background-color: #FFB900; display: inline-block;}

section.chamada{ background-image: url(../images/bgchamada.jpg); background-size: 100%; padding: 17% 0; background-position: center; background-attachment: fixed; background-repeat: no-repeat; text-align: center; position: relative;z-index: 3}
section.chamada div{padding: 3%; padding-left: 10%; background: rgba(13,66,121,0.78); color: #FFF; font-size: 35px; text-shadow: 2px 2px 2px #000; width: 30%; text-align: right;}
section.chamada a{ margin-left: 17%; margin-top: 2%; background: rgba(255,185,0,0.50); color: #fff; border: 1px solid; width: 20%; padding: 2% 3%; text-align: center; display: block;}

section#loteamento{ background-image: url(../images/bgloteamento.jpg); background-size: 50% 100%; background-repeat: no-repeat; background-position: right; padding: 2% 10%  }
section#loteamento div.col img{ width: 80%; margin-bottom: 5%; box-shadow: 5px 5px 50px #000;}
section#loteamento p{ color: #6684A4;}

section#obra{ padding: 4% 10% 0; z-index: 4;}
section#obra form{ display: inline-block; vertical-align: top; width: 33%; padding:3%; background: rgba(18,59,108,0.63); border: 1px solid #FFF; }
section#obra form input{ padding: 2%; width: 96%; border: none; margin: 1% 0;}
section#obra form input[type="password"]{ padding: 2%; width: 46%; border: none; display: inline-block; vertical-align: middle; }
section#obra form button{ background: #FFCC00; border: none; color: #FFF; width: 49%; padding: 2% 0; display: inline-block; vertical-align: middle;}
section#obra form h1{ color: #FFCC00; font-size: 35px}
section#obra form p{ color: #FFF}
section#obra form p a{ color: #FFCC00; text-decoration: underline;}
section#obra img.tablet{ display: inline-block; vertical-align: top; width: 59%; }
section#obra section.obra{ padding: 2% 0; display: none;}
section#obra h3{  background-image: url(../images/ico1.png); background-repeat: no-repeat; background-position: left center; padding: 2% 0 2% 5%; background-size: auto 100%; color: #39393F; font-size: large}

section#obra div.acompanhar{ width: 82%; border-radius: 21px; -webkit-border-radius: 21px; -moz-border-radius: 21px; 
	height: 21px; border: 1px solid #B9B9C8; position: relative; margin-top: 3%}
section#obra div.acompanhar div{ background: rgba(255,185,0,0.50); border-radius: 21px; -webkit-border-radius: 21px; -moz-border-radius: 21px; height: 69%; left: 0.5%; top:0; bottom:0; position: absolute; margin:  auto ; }
section#obra div.acompanhar p.cento{float: right;  margin: 0.3% 1%; color: #2A507A;}


section#contato{ background-image: url(../images/bgcontato.jpg); background-size: 100%; background-repeat: no-repeat; background-position: bottom; background-attachment: fixed; padding: 3% 10% }
section#contato form{ width: 61%; margin: 1.4%; padding: 2%; background-color: transparent; text-align: center; display: inline-block; vertical-align: top }
section#contato form input{ width: 25%; margin: 1.4%; padding: 2%; background-color: transparent;  border: 1px solid #FFF; color: #FFF}
section#contato form textarea{ width: 90.5%; margin: 1.4%; padding: 2%;  background-color: transparent; border: 1px solid #FFF; font-family: 'Titillium'; color: #FFF }
section#contato form button{ background:none; border: 1px solid #FFCC00; padding: 2% 0; color: #FFF; font-size: x-large; margin: 1.4%; width: 97%;   }
section#contato form h1{ background:none; border: 1px solid #FFCC00; padding: 2% 0; color: #FFF; font-size: x-large; margin: 1.4%; width: 97%; text-align: center;  }
section#contato>div{ width: 24%; margin: 1.4%; padding: 2%; background-color: transparent; color: #FFF; display: inline-block; vertical-align: top}
section#contato>div img{width: 18%; display: inline-block; vertical-align: top;}
section#contato div p:nth-child(5){ display: inline-block; width: 75%; }
section#contato div p span{ font-size: x-large; }
section#contato div div.social{ margin: 4% 0;}
section#contato div img:last-child{ width: 65%}
section#contato div div.social img{ display: inline-block; width: 16%; margin: 1%}
section#contato>p{ color: #FFF; text-align: center; }
section#contato>p a{ color: #FFF; }
section#contato ::-webkit-input-placeholder {
   color: #fff;
}

section#contato :-moz-placeholder { /* Firefox 18- */
   color: #fff;  
}

section#contato ::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
}

section#contato :-ms-input-placeholder {  
   color: #fff;  
}
div.popup p{ color: #728CA9; font-family: 'Cinzel'; font-size: 15pt; text-align: center;}
div.popup p span{ color: #C49259; font-size: 27pt;}

 div.video_viewer{
			display: inline-block;
			width: 100%;
			height: 400px;
		}

		 div.video_viewer .viewer {
			display: inline-block;
			vertical-align: top;
			width: calc(100% - 200px);
			min-width: 400px;
			height: 400px;
			border: 1px solid #ccc;
            text-align: center;
            background-color: #222;
		}

		 div.video_viewer .video_thumb {
			display: inline-block;
			vertical-align: top;
			width: 100%;
			height: 120px;
			overflow: hidden;
			text-align: left;
			position: relative;
		}

		 div.video_viewer .video_thumb .container {
			width: 6000px;
			height: 100%;
			position: relative;
		}

		 div.video_viewer .video_thumb img {
			display: inline-block;
			width: 185px;
			height: 100px;
			margin:	5px 0px;
			cursor: pointer;
		}

		 .video_thumb #thumb_before,  .video_thumb #thumb_after {
			color: #fff;
			background-color: rgba( 0,0,0, 0.7 );
			font-weight: bold;
			text-align: center;
			position: absolute;
			cursor: pointer;
			z-index: 2;
		}

         .video_thumb #thumb_before::before {
            content:'^';
        }

         .video_thumb #thumb_after::before {
            content:'v';
        }

		@media screen and ( min-width: 760px ) {

			 div.video_viewer .video_thumb {
				display: inline-block;
				float: right;
				vertical-align: top;
				width: 190px;
				height: 400px;
				text-align: center;
			}

			 div.video_viewer .video_thumb .container {
				width: 100%;
				height: 1000px;
			}

			 .video_thumb #thumb_before,  .video_thumb #thumb_after {
				padding: 10px 0px;
				width: 100%;
				left: 0px;
			}

			 .video_thumb #thumb_before{
				top: -50px;
				transition: top 0.3s;
			}

			 .video_thumb:hover #thumb_before {
				top: 0px;
				transition: top 0.3s;
			}

			 .video_thumb #thumb_after{
				bottom: -50px;
				transition: bottom 0.3s;
			}

			 .video_thumb:hover #thumb_after {
				bottom: 0px;
				transition: bottom 0.3s;
			}



		}

		@media screen and ( max-width: 760px ) {

	         h1 {
	        	width: 100%;
	        }

	         article {
	        	width: 100%;
	        }

	         div.video_viewer .viewer {
				width: 100%;
			}

	         .centralizador {
				padding-bottom: 200px;
	        }

             .video_thumb #thumb_before::before {
                content:'<';
            }

             .video_thumb #thumb_after::before {
                content:'>';
            }

             .video_thumb #thumb_before {
                width: 40px;
                height: 100%;

                left: 0px;
                top: 0px;
            }

             .video_thumb #thumb_after {
                width: 40px;
                height: 100%;

                right: 0px;
                top: 0px;
            }
        }




@media only screen and (max-width: 1440px) {
	section#qmsomos div p{ font-size: 16px}
	section#servicos div.col h1{ font-size: 20px}
	section#servicos div.col p{ font-size: 16px }

	}
@media only screen and (max-width: 1392px) {
	section#servicos div.col h1{ font-size: 19px;}
		section#qmsomos div p{ font-size: 14px}
	section#servicos div.col p { font-size: 14px }
	section#qmsomos div{ padding: 2% 3%; width: 43%}
	section#qmsomos img{ width: 50%}
}

@media only screen and (max-width: 1024px) {
	section#contato div img:last-child{ width: 87%}
	section#contato > div img{ vertical-align: baseline;}
	section#contato div p span{ font-size: large}
	section#qmsomos div { padding: 0 3%}
	section#qmsomos div h1{ font-size: 24px}
	section.chamada{ padding: 9% 0; }
	section#obra h3{padding: 2% 0px 2% 8%}
}

@media only screen and (max-width: 768px) {
	header menu ul li a{ font-size: 12px }
	section#qmsomos img{ display: none;}
	section#qmsomos div{ width: 71%; margin: 0 2% 0 20%; padding: 3%}
	section#servicos div.col{ width: 50%; margin: 30px 3.5%;}
	section.chamada{ background-size:  auto 100%; background-position: left; }
	

}

@media only screen and (max-width: 480px) {
	header menu ul li.mobile{ display:block;  }
	header menu ul li{ display:none; padding: 6.5% 2.47%; margin: 0 0px; border-right: none; border-bottom: 1px solid rgb(255, 185, 0); width: 50%}
	header menu ul li a{ font-size: 14px }
	img.logo{ position: fixed;}
	header menu { display: block; width: 66%; margin-left: 48%; }

}