html{background: #DADBD6;}
body{display: none;}

html,body{
	font-family: 'Muli', sans-serif;
}
.alinha{
	width: 60em;
	margin: 0em auto;
	position: relative;
}
.l1,
.banner-principal,
.banner-principal ul,
.banner-01,
.banner-02,
.banner-03,
.banner-04,
.l2,
.l3,
.contextual,
.l4{
	float: left;
	width: 100% !important;
}
h1,h2,h3,h4,h5,h6{
	font-family: 'Muli', sans-serif;
}
/*  Menu  */
.menu-topo{
	position: fixed;
	top:-3em;
	width: 100%;
	height: 3em;
	background: rgba(0,0,0,.85);
	box-shadow: 0em 0em .5em rgba(0,0,0,.75);
	z-index: 50;
	}
	.mostra-menu{
		opacity: 1;
		position: fixed;
		top: 0em !important;
		animation-name: exibeMenu;
		animation-duration: 1s;
		}
		@keyframes exibeMenu {
		0% {
			opacity: 0;
			top: -3em;
		}
		100% {
			opacity: 1;
			top: 0em;
		}
	}
	.oculta-menu{
		opacity: 1;
		animation-name: ocultaMenu;
		animation-duration: .5s;
		}
		@keyframes ocultaMenu {
		0% {
			opacity: 1;
			top: 0em;
		}
		100% {
			opacity: 0;
			top: -3em;
		}
	}
	.logo-menu{
		float: left;
	}
	.menu-topo nav{
		float: right;
		}
		.menu-topo li{
			float: left;
			}
			.menu-topo a{
				color: #999;
				line-height: 3em;
				padding: 0em .5em 0em 1em;
				}
				.menu-topo a:hover{
					color: #FFF;
				}
			a.btn-inicial{
				float: left;
				font-size: 1.75em;
				font-weight: lighter;
				letter-spacing: .-1em !important;
				line-height: 1.65em;
				color: #FFF;
				padding: 0em .25em;
				-webkit-transform: scale(1);
				   -moz-transform: scale(1);
				    -ms-transform: scale(1);
				     -o-transform: scale(1);
				        transform: scale(1);
				}
				a.btn-inicial:hover{
					text-shadow: 0em 0em .5em rgba(255,255,255,.5);
					-webkit-transform: scale(.95);
					   -moz-transform: scale(.95);
					    -ms-transform: scale(.95);
					     -o-transform: scale(.95);
					        transform: scale(.95);
				}

/*  Dispositivos moveis  */
.menu-mobile{
	float: right;
	width: 26px;
	height: 23px;
	background: url(../img/icon-menu-mobile.png) 0px 0px no-repeat;
	visibility: hidden;
	margin: 10px 10px 0px 0px;
	cursor: pointer;
	transition: all .25s ease;
	transform: scale(1);
	position: relative;
	}
	.menu-mobile:hover{
		box-shadow: 0em 0em .5em #000;
		transform: scale(1.05);
		}
		.exibe-menu-mobile{
			display: none;
			position: absolute;
			width: 140px;
			min-height: 20px;
			top: 1.95em;
			right: 0em;
			background: #000;
			box-shadow: 0em 0em .5em rgba(0,0,0,.75);
			}
			.exibe-menu-mobile ul{
				min-height: 200px;
				height: auto;
				min-height: 140px;
				margin: 5px 10px 20px 10px;
				}
				.exibe-menu-mobile ul li{
					width: 100%;
					margin-top: 5px;
				}
				.exibe-menu-mobile ul li a{
					width: 170px !important;
					height: 30px !important;
					line-height: 30px !important;
					font-size: 18px !important;
					padding-left: 0em !important;
					text-align: right;
					text-indent: 0px;
					}
					.exibe-menu-mobile ul li a:hover{
						color: #FFF;
						text-shadow: 0em 0em .5em rgba(0,0,0,.5);
						-webkit-transform: translate(-.5em, 0em) !important;
						   -moz-transform: translate(-.5em, 0em) !important;
						    -ms-transform: translate(-.5em, 0em) !important;
						     -o-transform: translate(-.5em, 0em) !important;
						        transform: translate(-.5em, 0em) !important;
					}

/*  Topo  */
.l1{
	background: url(../img/bg-textura-01.png) 0em 0em repeat fixed;
	min-height: 15em;
	position: relative;
	}
	.logo{
		position: absolute;
		top: 2.5em;
		left: 50%;
		width: 24em;
		height: 10em;
		margin-left: -12em;
		text-align: center;
		}
		.logo h1{
			color: #FFF;
			font-size: 4.85em;
			font-weight: lighter;
			text-transform: none;
			letter-spacing: -.05em;
		}
		.logo p{
			color: #72E327;
			font-size: 1.25em;
			font-weight: lighter;
			letter-spacing: .060em;
		}
	.banner-principal{
		height: 30em;
		}
		.banner-principal ul{
		height: 30em;
		overflow: hidden;
		position: relative;
		}
		/*  Banner 01  */
		.banner-01{
			height: 30em !important;
			text-align: center;
			}
			.banner-01 h3{
				color: #FFF;
				font-size: 2em;
				font-weight: lighter;
				padding-top: 8em;
				text-transform: none;
				animation-name: chegaFrase01;
				animation-duration: .75s;
			}
			@keyframes chegaFrase01{
				0%{
				opacity: 0;
				padding-top: 12.5em;
				}
				100%{
				opacity: 1;
				}
			}

		/*  Banner 02  */
		.banner-02{
			background: url(../img/banner/bg-textura-03.png) 0em 0em repeat fixed;
			height: 30em !important;
			position: relative;
			}
			.banner-02 a{

				}
				.banner-02 a:hover{
					
				}
			.banner-02 h1{
				text-align: center;
				font-size:3.5em;
				letter-spacing:-.05em;
				font-weight: lighter;
				color: #CCF;
				padding-top: .5em;
				}
				.banner-02 a:hover h1{
					color: #FFF;
				}
			.banner-02 h2{
				text-align: center;
				font-size: 1.5em;
				font-weight: 400;
				color: #002346;
				-webkit-transition: all .25s ease;
				   -moz-transition: all .25s ease;
				    -ms-transition: all .25s ease;
				     -o-transition: all .25s ease;
				        transition: all .25s ease;
			}
			.banner-02 a:hover h2{
				text-shadow: 0em 0em .5em rgba(0,0,0,.75);
			}
			.banner-02 span.icon1,
			.banner-02 span.icon2,
			.banner-02 span.icon3{
				position: absolute;
				width: 17.188em;
				height: 14.063em;
				top: 12em;
				-webkit-transition: all .25s ease;
				   -moz-transition: all .25s ease;
				    -ms-transition: all .25s ease;
				     -o-transition: all .25s ease;
				        transition: all .25s ease;
				-webkit-transform: scale(1);
				   -moz-transform: scale(1);
				    -ms-transform: scale(1);
				     -o-transform: scale(1);
				        transform: scale(1);
				animation-name: chegaIcones01;
				animation-duration: 1s;
				}
				@keyframes chegaIcones01{
					0%{
					opacity: 0;
					top: 16em;
					}
					50%{
					top: 10em;
					}
					100%{
					opacity: 1;
					top: 12em;
					}
				}
				.banner-02 a:hover span.icon1,
				.banner-02 a:hover span.icon2,
				.banner-02 a:hover span.icon3{
					-webkit-transform: scale(.95);
					   -moz-transform: scale(.95);
					    -ms-transform: scale(.95);
					     -o-transform: scale(.95);
					        transform: scale(.95);
				}
				.banner-02 span.icon1{
					left: 0px;
					background: url(../img/banner/icon-cel.png)0px 0px no-repeat;
					background-size: 100% auto;
					}
					.banner-02 a:hover span.icon1{
						
					}
				.banner-02 span.icon2{
					left: 50%;
					margin-left:-8.563em;
					background: url(../img/banner/icon-note.png)0px 0px no-repeat;
					background-size: 100% auto;
					}
					.banner-02 a:hover span.icon2{
						
					}
				.banner-02 span.icon3{
					right: 0px;
					background: url(../img/banner/icon-screen.png)0px 0px no-repeat;
					background-size: 100% auto;
					}
					.banner-02 a:hover span.icon3{
						
					}

		/*  Banner 03  */
		.banner-03{
			background: #73E328 0em 0em repeat fixed;
			height: 30em !important;
		}

		/*  Banner 04  */
		.banner-04{
			background: url(../img/banner/bg-textura-05.png) 0em 0em repeat fixed; /* #FF2A0C*/
			height: 30em !important;
		}
	.posl1{
		position: absolute;
		left: 0em;
		bottom: -3em;
		width: 100%;
		height: 1em;
		background: #DADBD6;
		padding: 1em 0em;
		margin: 1em 0em;
		z-index: 30;
		box-shadow: 0em -.5em .5em rgba(0,0,0,.075);
		-webkit-transform: skewY(-.75deg);
		   -moz-transform: skewY(-.75deg);
		    -ms-transform: skewY(-.75deg);
		     -o-transform: skewY(-.75deg);
		        transform: skewY(-.75deg);
	}

/*  Corpo  */
.l2{
	min-height: 10em;
	padding-top: 3em;
	}
	/*  Página Inicial  */
	.l2a,
	.l2b,
	.l2c{
		float: left;
		width: 60em;
		min-height: 25em;
		padding: 1.75em 0em;
		position: relative;
		}
		.l2a div.quadro-destaque,
		.l2b div.quadro-destaque,
		.l2c div.quadro-destaque{
			position: absolute;
			top: 0em;
			width: 30em;
			height: 25em;
			z-index: 1;
			-webkit-transition: all .25s ease;
			   -moz-transition: all .25s ease;
			    -ms-transition: all .25s ease;
			     -o-transition: all .25s ease;
			        transition: all .25s ease;
		}
		.l2a div.quadro-content,
		.l2b div.quadro-content,
		.l2c div.quadro-content{
			position: absolute;
			top: 1em;
			width: 26em;
			height: 19em;
			padding: 2em;
			background: #110F12;	
			}
			.l2a div.quadro-content h2,
			.l2b div.quadro-content h2,
			.l2c div.quadro-content h2{
				font-size: 2.18em;
				font-weight: lighter;
			}
			.l2a div.quadro-content a,
			.l2b div.quadro-content a,
			.l2c div.quadro-content a{
				font-size: 1.25em;
				color: #DADBD6;

			}
			.l2a:hover div.quadro-destaque,
			.l2b:hover div.quadro-destaque,
			.l2c:hover div.quadro-destaque{
				box-shadow: 0em 0em 1em rgba(0,0,0,.5);
			}
		/*  Front-end  */
		.l2a{

			}
			.l2a div.quadro-destaque{
				left: 0em;
				background: #0060BF url(../img/ini-front-end.jpg) center top no-repeat;
				background-size: auto 100%;
			}
				
			.l2a div.quadro-content{
				opacity: 0;
				right: 0em;
				}
				.l2a div.quadro-content h2{
					color: #0060BF;
				}
				.l2a div.quadro-content a:hover{
					color: #0060BF;	
				}
		/*  Geração de conteúdo  */
		.l2b{

			}
			.l2b div.quadro-destaque{
				right: 0em;
				background: #73E328 url(../img/ini-geracao-conteudo.jpg) center top no-repeat;
				background-size: auto 100%;
			}
			.l2b div.quadro-content{
				opacity: 0;
				left: 0em;
				}
				.l2b div.quadro-content h2{
					color: #73E328;
				}
				.l2b div.quadro-content a:hover{
					color: #73E328;
				}
		/*  Ilustração  */
		.l2c{

			}
			.l2c div.quadro-destaque{
				left: 0em;
				background: #FF2A0C url(../img/ini-ilustracao.jpg) center top no-repeat;
				background-size: auto 100%;
			}
			.l2c div.quadro-content{
				opacity: 0;
				right: 0em;
				}
				.l2c div.quadro-content h2{
					color: #FF2A0C;
				}
				.l2c div.quadro-content a:hover{
					color: #FF2A0C;
				}
		.l2a div.exibe-quadro-content,
		.l2c div.exibe-quadro-content{
			right: 0em;
			opacity: 1;
			animation-name: exibeQuadroA;
			animation-duration: .75s;
			}
			@keyframes exibeQuadroA {
			0% {
				opacity: 0;
				right: 30em;
			}
			100% {
				opacity: 1;
				right: 0em;
			}
		}
		.l2b div.exibe-quadro-content{
			right: 0em;
			opacity: 1;
			animation-name: exibeQuadroB;
			animation-duration: .75s;
			}
			@keyframes exibeQuadroB {
			0% {
				opacity: 0;
				left: 30em;
			}
			100% {
				opacity: 1;
				left: 0em;
			}
		}
	
	/*  Páginas Internas  */
	.conteudo{
		float: left;
		width: 60em;
		min-height:30em;
		}
		.conteudo h1{
			font-size: 3em;
			line-height: 1.25em;
			font-weight: lighter;
			padding-bottom: .5em;
		}
		.conteudo h2{
			font-size: 1.5em;
			font-weight: lighter;
			color: #0060BF;
			padding-bottom: .75em;
		}
		.conteudo h3{
			font-size: 2.25em;
			font-weight: lighter;
			color: #4FA615;
			padding: 1em 0em .25em 0em;
		}
		.conteudo p{
			font-size: 1.05em;
			color: #444;
			padding-bottom: .75em;
			}
			.conteudo p strong{
				font-size: 1.15em;
			}
		/*  Quem sou  */
		.img-perfil{
			float: left;
			width: 20em;
			height: 28em;
			margin: 0em 2em 1em 0em;
			text-align: center;
			}
			.img-perfil img{
				width: auto;
				height: 100%;
			}

			.cinco-motivos{
				float: left;
				width: 62.5em;
				min-height: 10em;
				padding: 0em 0em 1.9em 0em;
				margin: 1em 0em 1em -2.5em;
				}
				.cinco-motivos li{
					float: left;
					width: 28.75em;
					margin: 0em 0em 2em 2.5em;
					}
					.cinco-motivos a{
						float: left;
						font-size: 1.25em;
						color: #FF2A0C;
					}
					.cinco-motivos a:hover{
						text-indent: 16px;
					}
				.cinco-motivos h4{
					font-size: 2em;
					color: #0060BF;
					padding-bottom: .25em;
					font-weight: lighter;
				}

		/*  O que faço  */
		.exibe-principais{
			float: left;
			width: 63em;
			min-height: 10em;
			margin: 1em 0em 0em -3em;
	    	}
	    	.exibe-principais li{
				float: left;
				width: 18em;
				min-height:10em;
				margin: 0em 0em 1em 3em;
				-webkit-transition: all .25s ease-in-out;
				   -moz-transition: all .25s ease-in-out;
				    -ms-transition: all .25s ease-in-out;
				     -o-transition: all .25s ease-in-out;
				        transition: all .25s ease-in-out;
				-webkit-transform: scale(1);
				   -moz-transform: scale(1);
				    -ms-transform: scale(1);
				     -o-transform: scale(1);
				        transform: scale(1);
	    		}
	    		.exibe-principais li:hover{
					-webkit-transform: scale(.95);
					   -moz-transform: scale(.95);
					    -ms-transform: scale(.95);
					     -o-transform: scale(.95);
					        transform: scale(.95);
	    		}
	    		.exibe-principais li h4{
					font-size: 1.35em;
	    		}
	    		.exibe-principais li a{
	    			float: left;
	    			width: 18em;
					min-height:10em;
	    			color: #444;
	    			}
	    			.destaque-servicos{
						float: left;
						width: 100%;
						height: 12em;
						overflow: hidden;
						margin: .75em 0em;
						cursor: pointer;
						text-align: center;
	    				}
	    				.destaque-servicos img{
	    					width: auto;
	    					height: 100%;
	    				}

		/*  secundarias  */
		.exibe-secundarias{
			float: left;
			width: 61.33em;
			min-height: 10em;
			margin: 1em 0em 0em -1.33em;
			}
			.exibe-secundarias li{
				float: left;
				width: 14em;
				min-height: 10em;
				margin: 0em 0em 1em 1.33em;
				}
				.exibe-secundarias li div.ball{
    				float: left;
    				width: 8em;
    				height: 8em;
    				line-height:8em;
    				border-radius: 5em;
    				margin: 0em 3em 1.20em 3em;
    				}
    				div.ball-a{
						background: #0060BF;
    				}
    				div.ball-b{
						background: #73E328;
    				}
    				div.ball-c{
						background: #FF2A0C;
    				}
    				.exibe-secundarias li div.ball p{
    					text-align: center;
    					font-size:3em;
    					font-family:'Arial', sans-serif;
    					font-weight: lighter;
    					color: #FFF;
    				}
				.exibe-secundarias h5{
					text-align: center;
					font-size: 1.5em;
				}

		/*  O que ofereço  */
		.lista-a{
			float: left;
			}
			.lista-a li{
				font-size: 1.25em;
				line-height: 1.5em;
				color: #454545;
				padding-bottom: 1em;
			}

		/*  Contato  */
		.form-contato{
			float: left;
			width: 90%;
			min-height: 10em;
			position: relative;
			padding: 1em 5%;
			border: none;
			}

			.caixa{
				float: left;
				width: 100%;
				padding-bottom: .65em;
				}
				.caixa2{
				float: left;
				width: 48%;
				padding-bottom: .65em;
				}
				.caixa3{
				float: right;
				width: 48%;
				padding-bottom: .65em;
				}

			.caixa label,
			.caixa textarea,
			.caixa2 label,
			.caixa3 label{
				float: left;
				text-align: left;
				width: 100%;
				color: #555;
				font-family: 'Muli', sans-serif;
				padding-top: .625em;
				font-size: .65em;
				letter-spacing: .06em;
				}
				.caixa select,
				.caixa2 select,
				.caixa3 select,
				.caixa input,
				.caixa2 input,
				.caixa3 input,
				.caixa textarea{
					float: left;
					width: 98%;
					font-size: .75em;
					margin: .1em 0em .1em 0em;
					overflow:auto;
					height: 1.5em;
					background: #EEE;
					border: 1px solid #666;
					border-radius: .45em;
					outline: none;
					padding: .25em 1%;
					transition:  all .2s ease-in;
					}
					.caixa textarea{
						height: 10em;
						resize: none;
					}

					.caixa select,
					.caixa2 select,
					.caixa3 select{
						width: 100.5%;
						height: 2.15em;	
					}
					.selecione:focus,
					.caixa input:focus,
					.caixa2 input:focus,
					.caixa3 input:focus,
					.caixa select:focus,
					.caixa2 select:focus,
					.caixa3 select:focus,
					.caixa textarea:focus{
						float:left;
						width: 98%;
						border: 1px solid #73E328;
						overflow: auto;
						background: #D6F7BF;
						height: 1.5em;
						box-shadow: 0em 0em .5em rgba(115,227,40,.65);
						}
						.caixa2 select:focus,
						.caixa3 select:focus{
							width: 100.5%;
							height: 2.15em;	
						}
						.caixa textarea:focus{
							height: 10em;
						}
						.caixa option,
						.caixa2 option,
						.caixa3  option{
							background: #FFF;
							padding: .5em;
							border-left: 1px solid #999;
							border-right:1px solid #999;
							  transition: all .25s ease;
							}
							::-webkit-input-placeholder {font-size: 11px; color: #555;}
								 :-ms-input-placeholder {font-size: 11px; color: #555;}
									 ::-moz-placeholder {font-size: 11px; color: #555;}
									  :-moz-placeholder {font-size: 11px; color: #555;}
					

			input.btn-enviar{
				float: right;
				width: 6.875em;
				line-height: 2em;
				margin: .5em 0em 0em 0em;
				cursor:pointer;
				background: #111;
				color: #CCC;
				overflow:hidden;
				border:none;
				border-radius: .45em;
				font-family: 'Muli', sans-serif;
				font-weight: lighter;
				font-size: 1.188em;
				letter-spacing: 1px;
				text-transform: uppercase;
				outline: none;
				transition:  all .3s ease-in;
				}
				input.btn-enviar:hover{
					color: #FFF;
					background: #000;
				}

			span.error{
				float: right;
				width: 100%;
				font-size: .65em;
				text-align: right;
				font-style: italic;
				color: #FC0;
				font-family: 'Muli', sans-serif;
				margin-top: -14px;
				display:inline;
			}
			.resposta{
				position: fixed;
			    left: 0em;
			    top: 0em;
			    width: 100%;
			    height: 2.5em;
				background: #FF9;
			    border-bottom: 1px solid #FC0;
			    box-shadow: 0em 0em .5em rgba(0,0,0,.5);
			    color: #000;
			    text-align: center;
				font-family:'Muli', sans-serif;
			    line-height: 2.5em;
			    padding: 0em .5em;
			    z-index: 10;
				display: none;
				animation-name: chega-retorno;
				animation-duration: 1s;
				}
				@keyframes chega-retorno{
					0% {
						opacity: 0;
						top: -3em;
					}
					100% {
						opacity: 1;
						top: 0px;
					}
			}




/*  Contextual  */
.l3{
	min-height: 10em;
	}
	.contextual{
		min-height: 10em;
		padding: 0em 0em 1.9em 0em;
		margin: 1em 0em;
		background: url(../img/bg-textura-01.png) 0em 0em repeat fixed;
		-webkit-transform: skewY(-.75deg);
		   -moz-transform: skewY(-.75deg);
		    -ms-transform: skewY(-.75deg);
		     -o-transform: skewY(-.75deg);
		        transform: skewY(-.75deg);
		}
		.contextual ul{
			-webkit-transform: skewY(.75deg);
			   -moz-transform: skewY(.75deg);
			    -ms-transform: skewY(.75deg);
			     -o-transform: skewY(.75deg);
			        transform: skewY(.75deg);
		}
		.contextual h3{
			color: #FFF;
			font-size: 2.75em;
			font-weight: lighter;
			line-height: 1.65em;
			border-bottom: 1px solid #73E328;
			text-transform: none;
			letter-spacing: -.05em;
			margin-bottom: .40em;
		}
		.contextual li{
			float: left;
			width: 28.75em;
			margin: 0em 0em .30em 2.5em;
			}
			.contextual li:first-child{
				margin: 0em 0em .30em 0em;
			}
			.contextual h4{
				font-size: 2em;
				line-height: 1.75em;
				font-weight: lighter;
				color: #73E328;
				text-transform:lowercase;
			}
			.contextual a{
				font-size: 1.05em;
				color: #AAA;
				}
				.contextual a:hover{
					color: #FFF;
				}

/*  Rodape */
.l4{
	min-height: 10em;
	padding: 1.25em 0em;
	}
	.redes-sociais{
		position: absolute;
		top: 0em;
		left: 50%;
		margin-left: -10.875em;
		}
		.redes-sociais a{
			float: left;
			width: 6.25em;
			height: 6.25em;
			margin: 0em .5em;
			background: #CCC;
			border-radius: 3.125em;
			overflow: hidden;
			text-indent: -999em;
			-webkit-transform: scale(.75);
			-ms-transform: scale(.75);
			-o-transform: scale(.75);
			transform: scale(.75);
			}
			.redes-sociais a:hover{
				-webkit-transform: scale(.95);
				-ms-transform: scale(.95);
				-o-transform: scale(.95);
				transform: scale(.95);
			}
			.redes-sociais a.r1{
				background:#0077B5 url(../img/icon-in.png) 0em 0em no-repeat;
				background-size: 100% auto;
			}
			.redes-sociais a.r2{
				background:#3C5A98 url(../img/icon-face.png) 0em 0em no-repeat;
				background-size: 100% auto;
			}
			.redes-sociais a.r3{
				background:#28AAE1 url(../img/icon-twitter.png) 0em 0em no-repeat;
				background-size: 100% auto;
			}

/*  900px  */
@media only screen and (max-width: 900px) {
    body{
     	font-size: 14px;  
    }
    .alinha,
    /*  Conteúdo  */
    .l2a,
	.l2b,
	.l2c{
    	width: 100%;
    }
    .quadro-destaque{
		width: 40% !important;
		height: 20em !important;
		padding: 5% !important;
    }
    .quadro-content{
		width: 40% !important;
		height: 18em !important;
		padding: 5% !important;
    	}
    	.quadro-content h2{
    		font-size: 2em !important;
    	}
    	.quadro-content a{
    		font-size: 1.10em !important;
    	}

    /*  Banner 02  */
	.banner-02 h1{
		font-size: 2em;
	}
	.banner-02 h2{
		font-size: 1.5em;
	}

	.banner-02 span.icon1,
	.banner-02 span.icon2,
	.banner-02 span.icon3{
		width: 175px;
		height: 144px;
	}
	.banner-02 span.icon2{
		margin-left: -87px;
	}
	.banner-02 span.icon3{
		right: 5px;
	}

    /*  Páginas Internas  */
    .conteudo{
    	width: 90%;
    	padding: 0% 5%;	
    }

    /*  quem-sou  */
    .cinco-motivos{
		width: 110%;
		padding: 0em 0em 1.9em 0em;
		margin: 1em 0em 1em -10%;
		}
		.cinco-motivos li{
			width: 40%  !important;
			margin: 0em 0em .30em 10% !important;
			}
	
	/*  O que faço  */
    .exibe-principais{
		width: 103%;
		min-height: 10em;
		margin: 1em 0em 0em -3%;
    	}
    	.exibe-principais li{
			width: 30%;
			min-height:10em;
			margin: 0em 0em 1em 3%;
    		}
    		.exibe-principais li a{
    			width: 100%;
    		}
    .exibe-secundarias{
		width: 103%;
		min-height: 10em;
		margin: 1em 0em 0em -3%;
    	}
    	.exibe-secundarias li{
			width: 47%;
			min-height:17em;
			margin: 0em 0em 1em 3%;
    		}
    		.exibe-secundarias li div.ball{
				width: 6em;
				height: 6em;
				line-height:6em;
				border-radius: 3em;
				margin: 0em 3em 9em 0em;
			}
			.exibe-secundarias h5{
					text-align: left;
					font-size: 1.5em;
				}

    /*  Contato  */
		.form-contato{
			width: 100%;
			padding: 1em 0em;
		}
		input.btn-enviar{
			margin: 0em -0.125em 0em 0em;
		}

    /*  Contextual  */
    .contextual li,
    .contextual li:first-child{
    	width: 40% !important;
    	margin: 0em 5% .30em 5% !important;
    }
}

/*  Mobile  */
@media only screen and (max-width: 700px) {
    body{
    	min-width: 290px; 	 
    }
	/*  Global  */
	.banner-principal,
	.banner-principal ul,
	.banner-01,
	.banner-02,
	.banner-03,
	.banner-04{
		height: 20em;
	}

    /*  Logo  */
    .logo{
		position: absolute;
		top: 1.5em;
		left: 50%;
		width: 18.125em;
		height: 8em;
		margin-left: -9.06em;
		text-align: center;
		}
		.logo h1{
			color: #FFF;
			font-size: 3.75em;
			font-weight: lighter;
			text-transform: none;
			letter-spacing: -.05em;
		}
		.logo p{
			color: #72E327;
			font-size: 1em;
			font-weight: lighter;
			letter-spacing: .060em;
		}
	
	/*  Menu  */
    .menu-topo nav{display: none;}
	.menu-mobile{visibility: visible;}

	/* Banner 01  */
	.banner-01 h3{
		font-size: 1.1em;
		font-weight: lighter;
		padding-top: 10em;
		text-transform: none; 
	}

	/*  Banner 02  */
	.banner-02 h1{
		font-size: 1.75em;
	}
	.banner-02 h2{
		padding-top: .85em;
		font-size: 1.15em;
	}

	.banner-02 span.icon1,
	.banner-02 span.icon2,
	.banner-02 span.icon3{
		width: 90px;
		height: 73px;
	}
	.banner-02 span.icon2{
		margin-left: -50px;
	}
	.banner-02 span.icon3{
		right: 5px;
	}

	/*  Conteudo  */
	.quadro-destaque{
		width: 4% !important;
		padding: 0% !important;
    }
    .quadro-content{
		width: 86% !important;
		height: 14em !important;
		padding: 5% !important;
    	}
    	.quadro-content h2{
    		font-size: 1.5em !important;
    	}
    	.quadro-content a{
    		font-size: 1em !important;
    	}
    	.l2a div.quadro-destaque{
    		background: #0060BF;
    	}
    	.l2b div.quadro-destaque{
    		background: #73E328;
    	}
    	.l2c div.quadro-destaque{
    		background: #FF2A0C;
    	}

    	/*  Páginas internas  */

    	/*  Quem Sou  */
    	.img-perfil{
    		width: 100%;
    		height: 20em;
    		margin: 0em 0em 1em 0em;
    	}

	    .cinco-motivos{
			width: 100%;
			margin: 1em 0em;
			}
			.cinco-motivos li{
				width: 100%  !important;
				margin: 0em 0em .30em 0em !important;
				}

    	/*  O que faço  */

    /*  O que faço  */
    .exibe-principais,
    .exibe-secundarias{
		width: 100%;
		min-height: 10em;
		margin: 1em 0em 0em 0em;
    	}
    	.exibe-principais li,
    	.exibe-principais li a,
    	.exibe-secundarias li{
			width: 100%;
			min-height: 10em !important;
			margin: 0em 0em 1em 0em;
    		}
    		.exibe-secundarias li div.ball{
				width: 4em;
				height: 4em;
				line-height:4em;
				border-radius: 2em;
				margin: 0em 2em 10em 0em;
			}
			.exibe-secundarias li div.ball p{
    			font-size:2em;
    		}
    

    /*  Contato  */

    /*  Contextual  */
    .contextual li,
    .contextual li:first-child{
    	width: 90% !important;
    	margin: 0em 5% .30em 5% !important;
	    }
	    .contextual h4{
			font-size: 1.5em;
			line-height: 1.75em;
		}
		.contextual a{
			font-size: .85em;
			color: #AAA;
		}
}