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

/*--------------RESET------------*/

*{
	margin:0;
	padding:0;
	border:0;}

html, body, div, span, h1, h2, h3,
h4, h5, h6, p, a, cite, code, em, font, img, 
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, 
form, label, legend, table, caption, tbody, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;}
	
	
/*HTML5display-roleresetforolderbrowsers*/
article, aside, details,
figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;}

body {
    line-height: 1;}

ol, ul {
    list-style: none;}

blockquote, q {
    quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;}

table {
    border-collapse: collapse;
    border-spacing: 0;}
	
@font-face {
    font-family: 'calibriregular';
    src: url('../fontes/calibri_3.eot');
    src: url('../fontes/calibri_3.eot?#iefix') format('embedded-opentype'),
         url('../fontes/calibri_3.woff2') format('woff2'),
         url('../fontes/calibri_3.woff') format('woff'),
         url('../fontes/calibri_3.ttf') format('truetype'),
         url('../fontes/calibri_3.svg#calibriregular') format('svg');
    font-weight: normal;
    font-style: normal;}
	
@font-face {
    font-family: 'montserratlight';
    src: url('../fontes/montserrat-light-webfont.woff2') format('woff2'),
         url('../fontes/montserrat-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
	
@font-face {
    font-family: 'montserratbold';
    src: url('../fontes/montserrat-bold-webfont.woff2') format('woff2'),
         url('../fontes/montserrat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

	
	
a{
	text-decoration:none;}
	
body{
	font-family:'montserratlight';
	line-height:26px;
	text-align:justify;
	font-size:8px;
	-webkit-animation: abertura 1s; /* Safari and Chrome */
    -moz-animation: abertura 1s; /* Firefox */
    -ms-animation: abertura 1s; /* Internet Explorer */
    -o-animation: abertura 1s; /* Opera */
    animation: abertura 1s;
	color:#656565;
	overflow-x: hidden; }
	
	
h1{
	
	font-family:'montserratbold';
	font-size:30px;
	color:#FFFFFF;
	text-align:center;
	line-height:36px;}
	
h2{
	font-family:'montserratbold';
	font-size:20px;
	font-weight:100px;
	color:#1F95C5;
	text-align:left;}
	
	
h3{
	
	font-family:'montserratbold';
	font-size:27px;
	font-weight:100px;
	color:#1F95C5;
	text-align:left;
	padding-bottom:10px;
	text-transform:lowercase;}
	
h4{
	
	font-family:'montserratbold';
	font-size:27px;
	color:#1F95C5;
	text-align:center;
	padding-bottom:10px;}
	
h5{
	
	font-family:'montserratbold';
	font-size:23px;
	color:#000000;
	padding-bottom:10px;}


/*--------------HEADER------------*/

header{
	width:100%;
	height:130px;
	background:#FFFFFF;}

#header{
	width:90%;
	margin:0 auto;}
	
#logo{
	width:34%;
	height:100px;
	/*background:#EA3526;*/
	float:left;}
	
.logo{
	width:40%;
	margin:0 auto;
	margin-top:13px;
	margin-left:20%;}
	
.selo{
	width:20%;
	}
	
.menu-bar ul{
	width:auto;
	float:right;
	margin:20px 0 0 0;}
	
.menu-bar ul li{
	width:auto;
	padding:25px 20px 15px 20px;
	float:left;}
	
.menu-bar ul li a{
	font-family:'montserratlight';
	font-size:18px;
	color:#000000;
	text-transform:lowercase;}
	
.menu-bar a:hover{
	-webkit-transition:all 0.4s linear;
	-moz-transition:all 0.4s linear;
	-o-transition:all 0.4s linear;
	-ms-transition:all 0.4s linear;
	border-bottom:solid 1px #000000;}
	
ul.egmenu { 
	z-index:99999;}

ul.egmenu > li { 
    float: left; 
    position: relative;
	z-index:99999;}

ul.egmenu ul {
	overflow:hidden;
	transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	-webkit-transition:all 0.4s ease;
	display: none; 
    position: absolute;
	z-index:99999;}

ul.egmenu a{
    display: block;}

.egmenu li ul li a:hover  {
	list-style: none;
	color:#FFFFFF; }

ul.egmenu li:hover a {
	-webkit-transition:all 0.4s linear;
	-moz-transition:all 0.4s linear;
	-o-transition:all 0.4s linear;
	-ms-transition:all 0.4s linear;
	text-transform:lowercase; }
	
ul.egmenu li:hover ul { display: block;  }



/*--------------PORTFOLIO------------*/


#portfolio{
	width:100%;}
	
#portfolio li{
	width:25%;
	float:left;
	margin:0px;
	margin-top:-10px;}
	
.hoverzoom {
	position: relative;
    overflow: hidden;}
	
#portfolio li img{
	width:100%;
	height:100%;}

.retina{
	position: absolute;
	padding-top:70px;
	top:0;
    left: 0;
    opacity: 0;
	width:100%;
	height:100%;   
    text-align: center;
	-webkit-transition:all 0.4s linear;
	-moz-transition:all 0.4s linear;
	-o-transition:all 0.4s linear;
	-ms-transition:all 0.4s linear;
}
.retina:hover {
    opacity: 1;
	background-color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.7);
	color: rgba(255, 255, 255, 0.7); 
	
    
}
.hoverzoom .retina p {
	color: #000000;;
	text-align:center;
	font-size:14px;
}
.hoverzoom .retina a {
	display: block;
	color: #fff;
	text-decoration: none;
	text-align: center;
	margin: 0 auto;
}

/*--------------SERVIÇOS------------*/

#agencia{
	width:100%;
	margin:0 auto;
	margin-top:0px;}

#banner{
	width:100%;
	height:700px;
	background:url(../images/fachada-gian.jpg) top center;
	background-attachment:fixed;
	background-size:cover;
	-webkit-transition:all 0.4s linear;
	-moz-transition:all 0.4s linear;
	-o-transition:all 0.4s linear;
	-ms-transition:all 0.4s linear;
	 transform: translateZ(-100px) scale(1.05);}
	 
#boxtxt{
	width:35%;
	float:left;
	margin-top:6%;
	/*background:#023561;*/
	background:#F4A834;
	padding:50px;
	color:#FFFFFF;}
	
#boxtxt p{
	width:90%;
	margin:0 auto;}

#conteudo{
	width:90%;
	margin:0 auto;
	margin-top:20px;}
	
p{
	line-height:20px;
	font-size:13px;}
	
#conteudo ul{
	width:90%;
	margin:auto;}
	
.servicos{
	width:29%;
	float:left;
	margin-bottom:30px;
	height:320px;
	margin-right:35px;}
	
.servicos p{
	text-align:justify;}
	
.fa-code{
	width:38px;
	height:38px;
	border-radius:50%;
	background:#1F95C5;
	padding:12px 0px 0px 12px;
	color:#FFFFFF;}
	
.fa-desktop{
	width:38px;
	height:35px;
	border-radius:50%;
	/*background:#37355A;*/
	background:#1F95C5;
	padding:15px 0px 0px 13px;
	color:#FFFFFF;}
	
.fa-google{
	width:36px;
	height:35px;
	border-radius:50%;
	background:#1F95C5;
	padding:15px 0px 0px 16px;
	color:#FFFFFF;}
	
.fa-print{
	width:38px;
	height:37px;
	border-radius:50%;
	background:#1F95C5;
	padding:14px 0px 0px 14px;
	color:#FFFFFF;}
	
.fa-star{
	width:38px;
	height:37px;
	border-radius:50%;
	background:#1F95C5;
	padding:14px 0px 0px 15px;
	color:#FFFFFF;}
	
.fa-bullseye{
	width:36px;
	height:38px;
	border-radius:50%;
	background:#1F95C5;
	padding:13px 0px 0px 16px;
	color:#FFFFFF;}


#bannerServicos{
	width:100%;
	height:200px;
	background:url(../images/pessoas.jpg) top center;
	background-attachment:fixed;
	background-size:cover;
	-webkit-transition:all 0.4s linear;
	-moz-transition:all 0.4s linear;
	-o-transition:all 0.4s linear;
	-ms-transition:all 0.4s linear;
	 transform: translateZ(-100px) scale(1.09);
	 padding-top:14%;}
	
#servicos{
	width:82%;
	margin:0 auto;}
/*--------------DESCRIÇÃO------------*/	

#voltar{
	margin-left:80%;
	font-size:12px;
	position:fixed;
	
	}
	
#voltar a{
	text-decoration:none;
	color:#4B4B4B;}

#descricao{
	width:80%;
	margin-top:20px;
	margin:0 auto;
	text-align:left;
	margin-bottom:20px;
	color:#656565;}
	
#fotos{
	width:80%;
	border-right:solid 1px #D1D1D1;
	margin-top:10px;
	margin:0 auto;}
	
#fotos ul{
	float:left;
	margin:0px;}
	
#fotos img{
	width:100%;}
	
/*--------------CONTATO------------*/
	
#contato{
	width:80%;
	margin:0 auto;
	margin-top:50px;}
	
	
#contato input{
	width:48%;
	float:left;
	height:32px;
	border:solid 1px #A5A5A5;
	margin-right:1%;
	margin-bottom:10px;
	color:#A5A5A5;}
	
#contato textarea{
	width:97%;
	height:100px;
	border:solid 1px #A5A5A5;
	margin-bottom:10px;
	color:#A5A5A5;
	float:left;}
	
#bannerContato{
	width:100%;
	height:100px;
	background:url(../images/banner-contato.jpg) top center;
	background-attachment:fixed;
	background-size:cover;
	-webkit-transition:all 0.4s linear;
	-moz-transition:all 0.4s linear;
	-o-transition:all 0.4s linear;
	-ms-transition:all 0.4s linear;
	 transform: translateZ(-100px) scale(1.09);
	 padding-top:14%;}
	 
#left{
	width:65%;
	float:left;}
	
#right{
	width:25%;
	margin-left:10px;
	float:right;
	padding-top:40px;}
	
.botao{
	float:left;}
	
/*--------------FOOTER------------*/

footer{
	width:100%;
	height:40px;
	background:#353739;
	color:#FFFFFF;
	font-size:10px;
	padding-top:20px;
	line-height:26px;}
	
#footer{
	width:85%;
	margin: 0 auto;}

	

	
	
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 678px) {
	
#portfolio li{
	width:50%;
	float:left;
	margin:0px;
	margin-top:-10px;}
	
#header{
	width:95%;
	margin:0 auto;}
	
#logo{
	width:70%;
	height:auto;
	/*background:#EA3526;*/
	float:left;}
	
.logo{
	
	margin:0 auto;
	margin-top:13px;
	margin-left:10%;}
	
.selo{
	width:20%;}
	
.egmenu.js {
	display: none;}
	
#menu {
	width:50px;
	background:#ddd;
	font-size:1.35em;
	text-align: center;
	float:right;
	margin-top:20px;}
	
.menu-bar ul {
	width:100%;
	display:block;
	margin-top:60px;}
	
.menu-bar ul li{
	padding:15px 20px 15px 20px;
	border:solid 1px #F1F1F1;
	width:100%;
	float:none;}

.menu-bar {
	float:none;}
	
.egmenu {
	background:#FFFFFF;
	position: absolute;
	z-index:99;}
	
ul.egmenu ul{
	width:100%;
	padding:0;
	overflow:visible;
	transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	-webkit-transition:all 0.4s ease;
	display: none; 
    position: relative;
	top: 0;
	z-index:9999999;}

ul.egmenu a{
	color:#585858;
	text-transform:uppercase;
	display:block;}

.egmenu li ul li a:hover{
	list-style: none;
	color:#FFFFFF;}
	
#boxtxt{
	width:55%;
	float:left;
	margin-top:6%;
	/*background:#023561;*/
	background:#F4A834;
	padding:50px;
	color:#FFFFFF;}
	
.servicos{
	width:90%;
	float:none;
	margin-bottom:30px;
	height:auto;
	margin-right:20px;}
	
#left{
	width:95%;
	float:left;}
	
#right{
	width:100%;
	margin-left:10px;
	float:right;
	padding-top:40px;
	margin-bottom:20px;}
	
}
	

@media screen and (min-width: 768px) {
		#menu {
			display: none;
		}
	}
	
/* Ipad (portrait) ———– */
@media screen and (min-width: 679px) and (max-width: 900px) { 
	

}

	
/* ABERTURA */
@keyframes abertura {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes abertura {
   from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes abertura {
     from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes abertura {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes abertura {
   from { opacity: 0; }
    to   { opacity: 1; }
}​