@charset "UTF-8";
/* CSS Document */
*{margin: 0; padding: 0;}

/*Regaras Compartilhadas*/
.float100 {float: left; width: 100%;}

.float50 {float: left; width: 49%;}

.float50:nth-child(even) {margin-left: 1%;}

.float50:nth-child(odd) {margin-right: 1%;}

.txtCenter {text-align: center;}

.marginBottom {margin-bottom: 42px;}

.raleway {font-family: 'Raleway', sans-serif;}

span {font-size: 125%;}

h1 {
	float: left;
	width: 92%;
	margin: 0 4%;
	color: #fff;
	font-size: 21px;
	text-align: center;
	background-image:url(img/divisor.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}

/*Regras Específicas*/
header {
	float: left;
	position: fixed;
	top: 0;
	background-color: #fff;
	background-repeat: repeat;
	z-index: 5;
}
.geral {
	float: left;
	background: #252525;
}
.slider img {
	width: 100%;
}
#chamada{
	padding: 15px 0;
	background: #001a90;
	color: #fff;
	font-size: 20px;
	line-height: 25px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	box-shadow: 5px 0px 6px #000;
}

.boxHome{
	float: left;
	position: relative;
	width: 28%;
	margin: 21px 0 0 4%;
	background-color: white;
	box-shadow: 2px 2px 8px #222;
}
.boxHome img {width: 100%;}

.boxHome div{
	float: left;
	width: 100%;
	padding: 8px 0;
	position: absolute;
	bottom: 0;
	z-index: 2;
	color: white;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	background: rgba(0,26,144,0.9);
	text-align: center;
}
.clientes img {margin: 0 25px; border-radius: 10px;}

.slider2 {margin-top: 21px;}

#texto {
	float: left;
	width: 92%;
	margin: 21px 4% 0;
	color: #fff;
	text-align: justify;
}

#texto img {width: 76%; border-radius: 20px;}

#txtIntro {float: left; width: 80%; margin: 0 10% 42px; color: #ffffff;}

#txtIntro p {float: left; width: 50%; margin-right: 10%;}

#txtIntro img {float: left; width: 40%; border-radius: 10px;}

.pgclientes .row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.pgclientes .column {
  flex: 32%;
  max-width: 32%;
  padding: 0 4px;
  text-align: center;
}

.pgclientes .column img {
  margin: 8px 0;
  vertical-align: middle;
  border-radius: 10px;
}

.mapsContainer {
	margin-top: 21px;
	height: 300px;
	background-image:url(img/maps.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	background-color: #f7f7f7;
}

.mapsBox {
	width: 30%;
	min-width: 256px;
	top:20px;
	left: 20px;
	position: relative;
	z-index: 3;
	box-shadow: 2px 2px 2px #bbb;
}
footer{
	float: left;
	color: white;
	text-align: center;
}

#copyright{
	float: left;
	width: 100%;
	padding: 15px 0;
	background: #001a90;	
}

#developby{
	float: left;
	width: 100%;
	height: 25px;
	padding: 10px 0;
	background: #252525;
}

#developby p{
	display: inline-block;
	height: 25px;
	line-height: 25px;
	vertical-align: top;
}

#developby img {
	height: 25px;
	margin: 0 3px
}
@media screen and (min-device-width : 1025px){
	header {
		width: 20%;
		height: 100%;
		left: 0;
		background-image: url("img/fundo.png");
		overflow-x: hidden;
	}
	
	.geral{
		width: 80%;
		margin-left: 20%;
	}
	
	.mapsBox{max-width: 300px;}
	
	footer {
		width: 80%;
		margin-left: 20%;
	}
}

@media screen and (max-device-width : 1024px){
	header {
		width: 100%;
		height: 10%;
	}
	
	.geral {
		width: 100%;
		margin-top: 16%;
	}
	
	#chamada {
		font-size: 1.7em;
		line-height: 2em;
	}
	
	
	h1 {
		font-size: 1.8em;
		background-size: 140%;
	}
	
	.pgclientes .column {
    	flex: 50%;
    	max-width: 50%;
  	}
	
	.mapsContainer {
		height: 400px;
		background-size: cover;
	}
	
	.mapsBox {width: 40%;}
	
	footer {
		width: 100%;
	}
}

@media screen and (max-device-width : 1024px) and (orientation : landscape) {
	header {height: 15%;}	
}

@media screen and (max-device-width : 768px){
	#txtIntro p {width: 100%; margin: 0 0 2em;}
	
	#txtIntro img {width: 100%;}
	
	.pgclientes .column {
		flex: 100%;
		max-width: 100%;
  }
}