/*===================================RESET ==================================*/
		* { margin: 0;
			padding: 0;
			font-size: 100%;
			border: none;
			outline: none;
			font-weight: 300;
			box-sizing: border-box;
			font-family: 'Lato', sans-serif;
		}

		body{background-color: #636363;
		}

		a{text-decoration: none;
		}

		ul{list-style: none;
		}

		img{
			max-width: 100%
		}
/*================================CABEÇALHO==================================*/

		.cabeçalho{
			width: 100%;
			float: left;
			padding:  3% 4%;
		}

		.logo{
			width: 56px;
			height: 56px;
			float: left;
			background: url(../img/logo1.jpg) center center/ 56px no-repeat;
			font-size: 0; 
		}

		.btn-menu{
			width: 56px;
			height: 56px;
			float: right;
			text-align: center;
			color: #fff;
			border-radius: 56px;
			cursor: pointer;
			background: linear-gradient(to right, #000000, red);
		}

/*===================================MENU====================================*/

		.menu{
			display: none;
			width: 100%;
			height: 100%;
			position: fixed;
			background: rgba(0,0,0,0.9);
			top: 0; 
			left: 0;
		}

		.btn-close{
			font-size: 1.5em;
			color: #fff;
			float: right;
			cursor: pointer; 
			margin: 2% 3% 0 0;
		}

		.menu ul{
			width: 100%;
			float: left;
			text-align: center;
		}

		.menu li{
			padding: 1.5%;
		}

		.menu li a{
			font-size: 2em;
			color: #fff;
			padding: 1.5% 3%;
		}

		.menu li a:hover{
			border: 1px solid #FF0000;
			color: #FF0000
		}

/*===================================BANNER==================================*/

.banner{
	width: 100%;
	float: left;
	text-align: center;
	padding: 3% 4%;
	background-color: black;
}

.banner h2 {
	font-size: 2em;
	color: #fff;
	font-weight: 700;
}

.banner h3 {
	font-size: 1.5em;
	color: #fff;

}
/*===================================SERVIÇOS==================================*/

.servicos {
	width: 100%;
	float: left;
	padding: 3% 4%;}

.servico {
	width: 100%;
	background-color: #f5f5f5;
	text-align: left;
	border-radius: 7px;
	margin-bottom: 3%;}

.topicos{
	width: 100%;
	float: left;
	padding: 3% 4%;}
.topico{
	width: 100%;
	background-color: #636363;
	text-align: left;
	border-radius: 7px;
	margin-bottom: 3%;
}
.servico img{
	border-radius: 7px 7px 0 0; 
}

.inner{
	padding: 7%;
	height: 300px;
}

.inner a{
	font-size: 1.5em; 
	color: #130400;
	font-weight: 700; 
}

.inner h4 {
	font-size: 1.2em;
	color: #130400;
	margin-top: 2%; 
}

.inner p{
	margin-top: 6%;
	color: #130400;
	line-height: 1.5em;
}

/*================================NEWS LETTER====================================*/
.newsletter{
	width: 100%;
	float: left;
	text-align: center;
	padding: 3% 4%;
	background-color: #000000;
}
.newsletter h2{
	font-size: 1.5em;
	color: #fff;
	font-weight: 700;
}
.newsletter h3{
	color: #fff;
}
.newsletter form{
	margin-top: 2%;
}
.newsletter input{
	width: 100%;
	background-color: #000000;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.3);
	padding: 5%;
	border-radius: 5px;
	text-align: center;

}
.newsletter button{
	width: 100%;
	color: #000000;
	background-color: #fff;
	padding: 5%;
	border-radius: 5px;
	margin-top: 2%;

}

/*===================================RODAPOPÉ====================================*/
.rodape {
	width: 100%;
	float: left;
	padding: 3% 4%;
	text-align: center;
	background: linear-gradient(to right, #000000, red);
}

.social-icons a{
	font-size: 1.5em; 
	color: rgba(255,255,255,0.7);
	margin-right: 3%;
}

.social-icons a:last-child{
		margin-right: 0;
}

.social-icons a:hover{
		color: rgba(255,255,255);
}

.social-icons p{
	margin-top: 3%;
	color: rgba(255,255,255,0.7);
}

/*MEDIA TYPES
screen
Para monitores ou dispositivos com telas coloridas e resolução adequada.

print
para impressoras. Muito usado para dar uma versão d impressão do site. 
*/
/*===================================MOBILE FIRST================================*/
/*////////////small Devices - smartfones;/////////////*/
@media screen and (min-width: 480px){
	.logo{width: 214px;
		  height: 100px;
		  float: left;
		  background: url(../img/est.png) center center/ 214px no-repeat;}
    .btn-menu{
			margin: 17px;}
}
/*////////////////////tablets/////////////////////////*/
@media screen and (min-width: 768px){
	.servico {
	width: 49%;
	float: left;
	margin-right: 2%;}

	.servico:nth-child(2){margin-right: 0%;} /* tira a margem de 2% do segudo elemento */
	.servico:nth-child(4){margin-right: 0%;} 
	.servico:nth-child(6){margin-right: 0%;} 

	.newsletter h2{font-size: 2em;}
	.newsletter h3{font-size: 1.5em;}

	.newsletter input{ width: 70%; padding: 2%; float: left; margin-right: 1%}
	.newsletter button{ width: 29%; padding: 2%; float: right; margin-top: 0}
}

/*////////////////////MEDIUM DEVICES - TABLETS E DESKTOPS /////////////////////////*/
@media screen and (min-width: 960px){
	.servico { width: 32%}

	.servico:nth-child(2){margin-right: 2%;} /* tira a margem de 2% do segudo elemento */
	.servico:nth-child(3){margin-right: 0%;} 
	.servico:nth-child(4){margin-right: 2%;} 
	.servico:nth-child(6){margin-right: 0%;} 


	.newsletter h2{font-size: 3em;}
	.newsletter h3{font-size: 2em;}

	.newsletter input{ width: 60%; float: none;}
	.newsletter button{ width: 20%; float: none;}
}

/*////////////////////MEDIUM DEVICES - TABLETS E DESKTOPS /////////////////////////*/
@media screen and (min-width: 1280px){
	
	.banner{background-image: url(../img/pistol.jpg);}

	.btn-menu{display: none;}
	.btn-close{display: none;}
	.menu{width: auto; 
		  height: 56px; 
		  line-height: 100px; 
		  float: right; 
		  background-color: #636363; 
		  display: block!important; 
		  position: static;
		  margin-right: 5%}
	.menu li{padding: 0; float: left;}
	.menu li a{ color: #130400; font-size: 1em; padding: 15px}
	.menu li a:hover{border: none; color: red	}

}