@font-face{
	font-family: 'Museo700';
	src: url(../fonts/Museo/Museo700-Regular.otf);
}
@font-face{
	font-family: 'Museo500';
	src: url(../fonts/Museo/Museo500-Regular.otf);
}
@font-face{
	font-family: 'Amble';
	src: url(../fonts/Amble/Amble-Regular.ttf);
}


/*Paleta de cores Premier*/
:root {
 --branco-premier: #f7f7f8;
 --branco-cinza: #d8d9dd;
 --amarelo-claro: #efcb07;
 --amarelo-escuro: #e7b600;
 --cinza-escuro: #211915;
 --cinza-claro: #5b5b5f;
}



/***********************************PRE LOADER****************************************************/
#loading{
	background-color: white;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 1;
	margin-top: 0px;
	top: 0px;
}
#loading-center{
	width: 100%;
	height: 100%;
	position: relative;
}
#loading-center-absolute {
	position: absolute;
	left: 0;
	right: 0;
	top: 35vh;
	margin: 0 auto;
}
#object{
	max-width: 15vh;
	margin: auto;
	overflow: hidden;
}




/*****************************************CORPO****************************************/

body{ overflow-x: hidden; }

#parallax-topo {
	background-image: url(../img/home-bg.jpg);
	padding-top: 1%;
	padding-bottom: 1%;
	background-attachment: fixed;
	background-position: top;
	overflow: hidden;
	height: 100vh;
	background-color: #fff;
	background-size: cover;
	position: relative;
}
div.rascunho{
	background: url(../img/rascunho.png) no-repeat;
	background-size: 100%;
    display: block;
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: -300px;
    top: 0;
    z-index: 0;
    background-position-x: 0 !important;
    margin-top: 70px;
}


div.logo{
	text-align: center;
	width: 100%;
	overflow: hidden;
  	max-width: 700px;
  	display: block;
  	position: absolute;
  	margin: auto;
  	top: 20vh;
  	left: 0;
	right: 0;
}
div.logo svg{
	width: 100%;
}
div.questoes{
	max-width: 350px;
	overflow: hidden;
	display: block;
	text-align: center;
	position: absolute;
	top: 55vh;
	margin: auto;
	left: 0;
	right: 0;
}
div.questoes img{
	width: 100%;
}
.saiba-mais{
	width: 150px;
	border: solid 2px white;
	background: var(--branco-premier);
	color: var(--cinza-escuro);
	transition: 0.3s linear;
	font-family: 'Museo500';
	font-size: 20px;
	position: absolute;
	left: 0;
	right: 0;
	top: 75vh;
}

h2.servico{
	text-align: center;
	font-family: 'Museo500';
	color: var(--cinza-escuro);
	font-size: 44px;
}
div#servicos{
	background-color: white;
	padding: 45px 0;
}
div#servicos p{
	text-align: center;
	color: var(--cinza-escuro);
	font-family: 'Amble';
	font-size: 18px;
	line-height: 30px;
}

.icone-servico{ width: 100%; max-width: 250px; }

div#banner{
	background-image: url(../img/Chuva1.jpg);
	text-align: center;
	color: white;
	background-position: bottom center;
	background-size: cover;
	position: relative;
	height: 480px;
	background-repeat: repeat-y !important;
	background-position-x: 0 !important;
}
div.chuva{
	background-image: url(../img/Chuva2.png);
	background-size: cover;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 0;
    /*background-position-x: 0 !important;*/
    -webkit-animation: backgroundScroll 25s linear infinite;
	animation: backgroundScroll 25s linear infinite;  
}

@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}  
to {background-position: 0 800px;}  
}

@keyframes backgroundScroll {
from {background-position: 0 0;}  
to {background-position:  0 800px;}  
}

div.oportunidade{
	text-align: center;
	overflow: hidden;
	max-width: 950px;
	margin: auto;
	padding: 0 20px;
	vertical-align: center;
	line-height: 480px;
}
div.oportunidade svg{ width: 100%; }
div#contato{
	background-image: url(../img/pessoas.jpg);
	padding-top: 20vh;
	padding-bottom: 20vh;
	text-align: center;
	color: var(--cinza-escuro);
	position: relative;
	background-size: cover;
}
	div#contato h3{
		font-size: 40px; 
		font-family: 'Museo500'; 
		padding: 20px;
		color: var(--cinza-escuro);
	}

div#cases{
	text-align: center;
	background-color: var(--branco-premier);
}
div#cases h3{
	font-size: 40px;
	line-height: 120px;
	color: var(--cinza-escuro);
	font-family: 'Museo500';
	margin: 0 15px;
}
figure.box-img{
	display: block;
	overflow: hidden;
	transition: transform 0.6s;
	padding: 
}
figure.box-img img{
	max-width: 250px;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
figure.box-img img:hover{
	-webkit-filter: none; /* Safari 6.0 - 9.0 */
    filter: none;
    transition: 0.3s linear;
}
figcaption.box-legenda{
	overflow: hidden;
	font-size: 20px;
	background-color: black;
	color: #C2B41D;
	text-align: center;
	opacity: 0;
	transition: transform 0.6s, opacity 0.1s 0.3s;
	padding: 15px;
	font-family: 'Roboto-Light';
}
figure.box-img:hover img{
    transform: translateY(-50px);
    transition: transform 0.6s;
}
figure.box-img:hover figcaption {
    opacity: 1;
    transform: translateY(-100%);
    transition: transform 0.6s, opacity 0.1s;
}


div.box-logo{
	max-width: 200px;
	overflow: hidden;
	text-align: right;
	margin-left: 50%;
}
div.fale{
	font-size: 55px;
	font-family: 'Museo500';
	color: #fbb315;
	line-height: 55px;
}

/**************************************Portfolio**********************************/
ul#portfolio{
	margin: 0;
	overflow: hidden;
	list-style: none;
	padding: 0;
	background-color: black;
}
	ul#portfolio li{
		float: left;
		list-style: none;
		width: 20%;
	}
	ul#portfolio li a{
		display: block;
		overflow: hidden;
	}
	ul#portfolio li img{
		width: 100%;
		-webkit-transition: 0.5s linear;
      	transition: 0.5s linear;
	}
	ul#portfolio:hover li img {
      opacity:0.2;
      -moz-opacity: 0.2;
      filter: alpha(opacity=2);
      -webkit-transition: 0.5s linear;
      transition: 0.5s linear;
    }
    ul#portfolio a:hover img {
        opacity: inherit;
        -moz-opacity: inherit;
        filter: alpha(opacity=inherit);

        transform: scale(1.1);
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);

        -webkit-transition: 0.5s linear;
        transition: 0.5s linear;
    }

/******************************************************FORMULARIO CONTATO***********************************/
#mensagem{ 
	width: 100%; 
	padding: 24px 12px;
	border: none;
	margin-top: 12px;
	color: #555;
}
#mensagem:focus{
	color: var(--amarelo-escuro);
}
input.form-control:focus{
	color: var(--amarelo-escuro);
}
input.form-control:active{
	color: var(--amarelo-escuro);
}
div.sociais {
	margin-left: 20px;
	margin-top: 12px;
	overflow: hidden;
	line-height: 59px;
}
div.sociais a{
	display: block;
	width: 28px;
	margin-right: 8px;
	float: left;
}
div.sociais a img{ width: 100%; }
input.form-control{
	border-radius: 0;
	height: 58px;
	border: none;
}
button.enviar{
	padding: 10px 50px;
	font-size: 19px;
	font-family: 'Museo700';
	color: var(--cinza-escuro);
	background-color: var(--amarelo-escuro);
	border-radius: 0;
	text-align: center;
	transition: 0.3s linear;
	border: 5px var(--amarelo-escuro) solid;
	float: right;
}
button.enviar:hover{
	transition: 0.3s linear;
	background-color: transparent;
	border: 5px var(--amarelo-escuro) solid;

}
span.emailcontato{
	display: block;
	float: left;
	font-family: 'Amble';
	font-size: 12px;
	line-height: 59px;
	color: #58595b;
}
div.enviar{margin-top: 12px;}
::placeholder {
  color: #d1d3d4 !important;
  font-family: 'Amble' !important;
  font-size: 12px !important;
  opacity: 1 !important;
}
#mensagem::-moz-placeholder, #mensagem::-webkit-input-placeholder {
  color: #d1d3d4 !important;
  font-family: 'Amble' !important;
  font-size: 12px !important;
  opacity: 1 !important;
}
textarea#mensagem:-moz-placeholder {
  color: #d1d3d4;
  font-family: 'Amble';
  font-size: 12px;
  opacity: 1 !important;
}
.placeholder{
  color: #d1d3d4;
  font-family: 'Amble';
  font-size: 12px;
  opacity: 1 !important;
}
#mensagem:-moz-placeholder {
  color: #d1d3d4;
  font-family: 'Amble';
  font-size: 12px;
  opacity: 1 !important;
}

*::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #d1d3d4;
  font-family: 'Amble';
  font-size: 12px;
  opacity: 1 !important;
}
*::-moz-placeholder { /* Firefox 19+ */
  color: #d1d3d4;
  font-family: 'Amble';
  font-size: 12px;
  opacity: 1 !important;
}
*:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */
  color: #d1d3d4;
  font-family: 'Amble';
  font-size: 12px;
  opacity: 1 !important;
}
*:-moz-placeholder, textarea::-moz-placeholder  { /* Firefox 18- */
  color: #d1d3d4;
  font-family: 'Amble';
  font-size: 12px;
  opacity: 1 !important;
}




/*****************Footer*******************/
footer{
	background-color: #f1f2f2;
	color: #9e9e9e;
	padding-top: 60px;
	padding-bottom: 60px;
	border-top: 7px solid #fbb315;
}

a.footer-icon{
	display: block;
	font-family: 'Museo700';
	pointer-events: none;
}
a.footer-icon:hover{
	text-decoration: none;
}
div.contato{
	margin: 13px 0;
	max-width: 255px;
}
span.icone-footer{
	height: 60px;
	width: 60px;
	display: block;
	margin: auto;
	float: left;
}
span.numero{
	color: #221e1f;
	font-size: 25px;
	line-height: 60px;
	margin-left: 20px;
}
span.detalhe-contato{
	border-bottom: 2px solid #fbb315;
	width: 170px;
	display: block;
	margin-left: 80px;
}
.copyright {
	font-size: 12px !important;
	color: var(--branco-premier);
	background-color: var(--cinza-escuro);
	font-family: 'Amble';
	line-height: 130px;
}
.copyright a svg{ width: 100%; }
.copyright a{ 
	opacity: 0.5; 
	display: block;
	max-width: 125px;
	transition: 0.3s linear;
}
.copyright a:hover{ 
	opacity: 1;
	transition: 0.3s linear;
}
/****************************************Google Maps*************************************/
#map{
	height: 500px;
	width: 100%;
}


/************************************************PRELOADER*****************************************************************/




.cor1,.cor2 {
			animation: 4s animacaoloader;
    		animation-iteration-count: infinite;
    		stroke-width: 3;
    		animation-delay: 0;
    		stroke-dasharray: 900;
    		stroke:#E7B700;
		}

		@keyframes animacaoloader {
		    0% {
			    fill-opacity: 0;
			    stroke-dashoffset: 900;
			}
			30% {
			    fill-opacity: 0;

			}
			50% {
			    fill-opacity: 1;
			    stroke-dashoffset: 0;
			}
			70% {
				fill-opacity: 0;
			}
			100% {
				fill-opacity: 0;
				stroke-dashoffset: 900;
			}
		}

/************************************************Animação Logo*****************************************************************/
.cls-4,.cls-2, .cls-5 {
			animation: 4s animacao;
    		animation-iteration-count: 1;
    		stroke-width: 3;
    		animation-delay: 2s;
		}
		.cls-4,.cls-2 { /*Amarelo Escuro , Amarelo Claro*/
    		stroke-dasharray: 1700;
    		stroke:#E7B700;
		}
		
		.cls-5 { /*Letras pretas*/
    		stroke-dasharray: 1400;
    		animation: 4s animacaoLetras;
    		animation-iteration-count: 1;
    		stroke-width: 3;
    		animation-delay: 2s;
		}
		.premier { /*SVG*/
			width: 100%;
    		height: auto;
    		padding: 5px;
		}

		@keyframes animacao {
		    0% {
			    fill-opacity: 0;
			    stroke-dashoffset: 1700;
			}
			70% {
			    fill-opacity: 0;
			}
			100% {
			    fill-opacity: 1;
			    stroke-dashoffset: 0;
			}
		}
		@keyframes animacaoLetras {
		    0% {
			    fill-opacity: 0;
			    stroke-dashoffset: 1700;
			    stroke:#211915;
			}
			70% {
			    fill-opacity: 0;
			    stroke:#211915;
			}
			100% {
			    fill-opacity: 1;
			    stroke-dashoffset: 0;
			    stroke:#211915;
			}
		}


/*=====================================================
=            Bootstrap 2.3.2 Media Queries            =
=====================================================*/
@media only screen and (max-width : 1200px) {

	div#banner{ background-image: url(../img/Chuva1M.jpg); }
}

@media only screen and (max-width : 979px) {
	div.box-logo{ margin-left: 0;}
	div.contato{
	margin-bottom: 20px;
	margin-top: 20px;
	}
	div.rascunho {
    display: none;}
    a.footer-icon{
	pointer-events: all;
	}
}

@media only screen and (max-width : 768px) {
	h2.titulo-site {
    font-size: 40px;
    line-height: 50px;
	}
	.icone-servico{ width: 100%; max-width: 170px; }
	ul#portfolio li{ width: 50%; }
	div#cases h3 {font-size: 28px; line-height: 100px;}
	div#banner{height: 460px;}
}

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

	div#banner{
		height: 200px;
		background-position-y: center !important;
	}
	div.oportunidade {
    vertical-align: middle;
    line-height: 200px;
	}
	div#contato {
    padding-top: 10vh;
    padding-bottom: 10vh;
	background-position: center !important;
	}
	div#contato h3 { font-size: 25px; margin: 30px auto;}
	.copyright {
	    font-size: 10px !important;
	    line-height: 70px;
	    text-align: center;
	}
    button.enviar {
	    display: block;
	    margin: auto;
	    float: none;
	}
	div.enviar {
		text-align: center;
	}
	span.emailcontato {
    	float: none;
	}
	#parallax-topo {height: 100vh;}
	#map {height: 350px;}
	.copyright a {
    line-height: 0;
    margin: 0 auto 20px;
	}
	div.questoes {
    max-width: 240px;
    top: 50vh;
	}
	input.form-control {
    border-radius: 0;
    height: 58px;
    border: none;
    margin-bottom: 12px;
	}
	#mensagem{ margin-top: 0; }
}

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

}