@import url('https://fonts.googleapis.com/css?family=Contrail+One');
@import url('https://fonts.googleapis.com/css?family=Sunflower:300');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

body{
	width: 100%;
	height: auto;
	margin: 0;
}

.servicos{
	position: relative;
	width: 100%;
	height: auto;
	text-align: center;
	display: inline-block;
	padding: 100px 0;
	background: rgb(220, 220, 220);
	box-shadow: 0 0 4px #000;
}

.servicos h1{
  font-size: 25pt;
  font-family: 'Source Sans Pro', sans-serif;
  text-align: center;
  line-height: 30pt;
  color: rgba(80,80,80, 1);
}

.servicos h2{
  font-size: 18pt;
  font-family: 'Source Sans Pro', sans-serif;
  text-align: center;
  line-height: 30pt;
  color: rgba(80,80,80, 1);
}

.servicos a, .servicos figcaption{
  font-size: 12pt;
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 20pt;
  color: rgba(80,80,80, 1);
}

.servicos .tracoE{
	position: relative;
	width: 5%;
	height: 4px;
	background: rgb(200, 200, 0);
	display: inline-block;
	top: -30px;
	vertical-align: middle;
}

.servicos .tracoD{
	position: relative;
	width: 10%;
	height: 4px;
	background: rgba(80,80,80, 1);
	display: inline-block;
	top: -30px;
	vertical-align: middle;
}

.servicos article{
	position: relative;
	width: 300px;
	height: 350px;
	display: inline-block;
	background: rgb(255, 255, 255);
	box-shadow: 0 0 4px rgba(80, 80, 80, 0.8);
	margin: 100px 1%;
	vertical-align: top;
}

.imgServicos{
	position: absolute;
	width: 150px;
	height: 150px;
	border-radius: 300px;
	top: -130px;
	left: 80px;
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	transition: 1s all;
}

.imgTestes{
	background: url('img/testes.png') no-repeat;
	background-size: 100%;
}

.imgRecrutamento{
	background: url('img/recrutamento.png') no-repeat;
	background-size: 100%;
}

.imgEntrevista{
	background: url('img/entrevista.jpg');
	background-size: 100%;
}

.imgDinamica{
	background: url('img/dinamica.png') no-repeat;
	background-size: 100%;
}

.imgSipat{
	background: url('img/sipat.jpg') no-repeat;
	background-size: 100%;
}

.imgTreinamento{
	background: url('img/treinamento.jpg') no-repeat;
	background-size: 100%;
}

.imgGestao{
	background: url('img/gestao.png') no-repeat;
	background-size: 100%;
}

.imgPesquisa{
	background: url('img/pesquisa.jpg') no-repeat;
	background-size: 100%;
}

.imgComportamental{
	background: url('img/comportamental.jpg') no-repeat;
	background-size: 100%;
}

.servicos figcaption{
	margin: 20px;
	text-align: left;
}

.servicos article:hover{
	background: rgba(80,80,80, 1);
	transition: 1s all;
}

.servicos article:hover .imgServicos{
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transition: 1s all;
}

.servicos article:hover  figcaption h2, .servicos article:hover  figcaption p{
	color: #fff;
	transition: 1s all;
}

@media (max-width: 980px) {

	.servicos article{
		position: relative;
		width: 600px;
		height: 550px;
		display: inline-block;
		background: rgb(255, 255, 255);
		box-shadow: 0 0 4px rgba(80, 80, 80, 0.8);
		margin: 100px 1%;
		vertical-align: top;
	}

	.imgServicos{
		position: absolute;
		width: 150px;
		height: 150px;
		border-radius: 300px;
		top: -130px;
		left: 230px;
		-moz-transform: rotate(-360deg);
		-webkit-transform: rotate(-360deg);
		-o-transform: rotate(-360deg);
		transition: 1s all;
	}

	.servicos h1{
	  font-size: 35pt;
	  font-family: 'Source Sans Pro', sans-serif;
	  text-align: center;
	  line-height: 30pt;
	  color: rgba(80,80,80, 1);
	}

	.servicos h2{
	  font-size: 28pt;
	  font-family: 'Source Sans Pro', sans-serif;
	  text-align: center;
	  line-height: 30pt;
	  color: rgba(80,80,80, 1);
	}

	.servicos a, .servicos figcaption{
	  font-size: 22pt;
	  font-family: 'Source Sans Pro', sans-serif;
	  line-height: 28pt;
	  color: rgba(80,80,80, 1);
	}

	.servicos .tracoE{
		position: relative;
		width: 7%;
		height: 4px;
		background: rgb(200, 200, 0);
		display: inline-block;
		top: -30px;
		vertical-align: middle;
	}

	.servicos .tracoD{
		position: relative;
		width: 13%;
		height: 4px;
		background: rgba(80,80,80, 1);
		display: inline-block;
		top: -30px;
		vertical-align: middle;
	}



}