/* ------------------------- STANDARD ------------------------- */

@charset "utf-8";

/* RESET */
*,*:before,*:after{
margin:0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.containers {
	float: left;
	width: 100%;
}

.contents {
	display: block;
	margin: 0 auto;
	width: 80%;
	max-width: 1200px;
}

.clear {
	clear:both;
}

h1 {
	font-size: 2em;
	font-family: 'Work Sans', sans-serif;
	letter-spacing: 2px;
	font-weight: 700;
	text-transform: uppercase;
	color: #333333;
}

h2 {
	font-size: 1.2em;
	font-family: 'Work Sans', sans-serif;
	letter-spacing: 2px;
	font-weight: 700;
	text-transform: uppercase;
	color: #333333;
}

h3 {
	font-size: 1em;
	font-family: 'Work Sans', sans-serif;
	letter-spacing: 2px;
	color: #333333;
}

p {
	font-family: 'Work Sans', sans-serif;
	letter-spacing: 2px;
	color: #333333;
}

b,strong {
	font-weight: bold;
}

mark {
	padding: 5px 10px; 
	background: #eee;
}

ul {
	list-style: none;
	font-family: 'Work Sans', sans-serif;
}

img {
	border:none;
	vertical-align: middle;
}

a {
	text-decoration: none;
	font-family: 'Work Sans', sans-serif;
	letter-spacing: 2px;
	color: #333333;
}

a img {
	border: 0;
}

/* ------------------------- STANDARD END ------------------------- */


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

.main_header {
	background-color: #ffffff;
	position: fixed;
	z-index: 10;
	max-height: auto;
	border-bottom-style: solid;
	border-bottom-color: #f2f2f2;
	border-bottom-width: 8px;
	height: 60px;
}

.main_logo {
	max-width: 20%;
	padding-top: 1%;
	float: left;
}

.main_logo img {
	max-width: 100%;
}

.main_menu {
	max-width: 75%;
	float: right;
	padding: 0.7% 0;
}
.main_ul{
	margin-top: 1.2%;
}

.main_menu li {
	display: inline-block;
}

.main_menu a{
	padding:0 25px;
	color: #333333;
	font-size: 1em;
	text-decoration: none;
}

.main_menu a:hover {
	color: #990000;
	transition: 0.5s;
	text-decoration: none;
}

#dropdownMenuButton{
	font-size: 1em;
	background-color: #990000;
	margin: 0 0;
}

/* ------------------------- MAIN HEADER END ------------------------- */


/* -------------------------SPOTLIGHT ------------------------- */

.spotlight {
	z-index: 9;
	margin-top: 60px;
	background-image: url(img/2014_Setra.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	background-attachment: fixed;
	padding: 12% 0;
}

.spotlight img {
	width: 80%;
	margin-left: 10%;
	margin-right: 10	%;
}

.spotlight p {
	padding-top: 2%;
	display: block;
	text-align: center;
	color: #FFFFFF;
	font-size: 1.7em;
	text-shadow: 2px 2px 2px #000000;
	letter-spacing: 5px;
}

/* -------------------------SPOTLIGHT END ------------------------- */


/* -------------------------QUEM SOMOS ------------------------- */

.quemsomos article {
	margin: 3% auto;
	padding: 4% 0;
	text-align: center;
	border-bottom-style: double;
	border-bottom-width: 4px;
	border-bottom-color: #333333;
	border-top-style: double;
	border-top-width: 4px;
	border-top-color: #333333;
}

.quemsomos h1{
	font-size: 2em;
}

.quemsomos p{
	padding-left: 20%;
	padding-right: 20%;
	margin: 2% 0;
	font-size: 1.3em;
	line-height: 35px;

}


/* -------------------------QUEM SOMOS END------------------------- */


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

.servicos {
	background-color: #f2f2f2;
	padding: 0 5%;
}

.servicos article {
	width: 100%;
	margin-top: 0;
	margin-bottom: 4%;
	background-color: #ffffff;
	padding: 2% 5%;
	box-shadow: 5px 10px #660000;
}

.servicos h1{
	text-align: center;
	font-size: 2em;
	padding: 3% 0;
	color: #990000;
}

.servicos h2{
	color: #990000;
	font-size: 1.5em;
	padding: 1% 0;
}

.servicos h3{
	text-align: center;
	padding-bottom: 3%;
	font-size: 1.5em;
}

.servicos p{
	font-size: 1.2em;
	line-height: 25px;
}

.servicos li{
	list-style-type: square;
	font-size: 1.2em;
	line-height: 25px;
	letter-spacing: 2px;
	padding: 1% 0;
	margin-left: 3%;	
}

.servicos article:last-of-type li{
	margin-left: 5%;
}

.servicos img{
	max-width: 70%;
	margin: 1% 15%;
}

.anime-init {
	animation-name: myanimation;
  	animation-duration: 1s;
  	animation-delay: -0.2s;
}

@keyframes myanimation {
	0% {margin-bottom: 100%;}
	5% {margin-bottom: 95%;}
	10% {margin-bottom: 90%;}
	15% {margin-bottom: 85%;}
	20% {margin-bottom: 80%;}
	25% {margin-bottom: 75%;}
	30% {margin-bottom: 70%;}
	35% {margin-bottom: 65%;}
	40% {margin-bottom: 60%;}
	45% {margin-bottom: 55%;}
	50% {margin-bottom: 50%;}
	55% {margin-bottom: 45%;}
	60% {margin-bottom: 40%;}
	65% {margin-bottom: 35%;}
	70% {margin-bottom: 30%;}
	75% {margin-bottom: 25%;}
	80% {margin-bottom: 20%;}
	85% {margin-bottom: 15%;}
	90% {margin-bottom: 10%;}
	95% {margin-bottom: 10%;}
	100% {margin-bottom: 10%;}
}

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


/* -------------------------CLIENTES------------------------- */

.clientes{
	padding: 0 0;
	background-color: #ffffff;
	margin: 3% 0;
}

.clientessec {
	max-width: 100%;
	border-bottom-style: double;
	border-bottom-width: 4px;
	border-bottom-color:  #333333;
	border-top-style: double;
	border-top-width: 4px;
	border-top-color:  #333333;
	padding: 3% 0;
}

.clientes h1{
	text-align: center;
	padding-bottom: 2%;
	font-size: 2em;
}

.carousel-item {
	padding: 0 0;
	background-color: #ffffff;
}

.clientes img{
	width: 40%;
	max-height: 300px;
	margin-right: 30%;
	margin-left: 30%;
}

.clientes p{
	text-align: center;
	padding: 0 0;
	font-size: 1.4em;
}

.carousel-control-prev-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23800000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23800000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

/* -------------------------CLIENTES END------------------------- */


/* -------------------------CONTATO------------------------- */

.contato{
	padding: 3% 6%;
	background-image: url(img/background-contato.jpg);
	background-position: center;
	background-attachment: fixed;
}

.contato h1{
	text-align: center;
	padding: 1% 1%;
	font-size: 2em;
	color: #ffffff;
	text-shadow: 2px 2px 2px #000000;
	background-image: url(img/filete.png);
	background-position: center;
	background-repeat: no-repeat;
}

.contato article{
	float: left;	
	width: 50%;
	margin-top: 1%;
	margin-right: 0;
	padding: 0 0;
}

.contato article:last-of-type{
	margin-right: 0;
	padding: 7% 0;
}

.contato h2{
	font-size: 1.7em;
	text-align: center;
	margin-top: 5%;
}

.contato p{
	text-align: center;
	font-size: 1.5em;

}
.contato a{
	text-decoration: none;
	color: #660000;
}

.smfirst{
	width: 15%;
	margin-bottom: 5%;
	margin-left: 15%;
	margin-right: 10%;
	padding: 0 0;
}

.smscnd{
	width: 15%;
	margin-bottom: 5%;
	margin-right: 10%;
	margin-left: 0;
	padding: 0 0;
}

.smslast{
	width: 15%;
	margin-bottom: 5%;
	margin-right: 15%;
	margin-left: 0;
	padding: 0 0;
}

.contato img:hover{
	filter:contrast(150%);
}

/* -------------------------CONTATO END------------------------- */


/* -------------------------FOOTER------------------------- */

.footer{
	margin-top: 3%;
	padding: 0 0;
	background-color: #990000;
}

.footer article{
	width: 45%;
	float: left;
}

.info {
	padding-top: 3%;
	padding-bottom: 1%;
	margin-right: 10%;
}

.info img{
	width: 50%;
	max-width: 1200px;
	display: block;
	margin-bottom: 1%;
}

.info h3{
	font-size: 0.9em;
	color: #ffffff;
	padding: 1% 0;
}

.info a{
	text-decoration: none;
	color: #ffffff;
	font-size: 0.8em;
}

.dev{
	margin-right: 0;
	text-align: right;
	padding-top: 8.5%;
	padding-bottom: 0;
}

.dev p{
	padding: 0 0 ;
	color: #ffffff;
	font-size: 0.8em;
}

.dev a{
	font-size: 1em;
	padding: 0 0 ;
	text-decoration: none;
	color: #ffffff;
}

.dev a:hover{
	text-decoration: none;
	color: #ff6666;
}

/* -------------------------FOOTER END------------------------- */

@media only screen and (max-width: 1170px) {
	.main_menu a{
		padding:0 20px;
	}

	.main_header {
		height: 50px;
	}

	.spotlight {
		margin-top: 50px;
	}

	.main_menu {
		padding: 0.3% 0;
	}
}

@media only screen and (max-width: 1100px) {

	.main_menu {
		padding-top: 0.5%;
	}
	.main_menu a{
		padding:0 15px;
		font-size: 0.9em;
}

@media only screen and (max-width: 1000px) {
	.main_menu {
		padding-top: 0.3%;
	}
	.main_menu a{
		padding:0 10px;
		font-size: 0.9em;
	}
	.main_header {
		height: 45px;
	}
	.spotlight {
		margin-top: 45px;
	}
}

@media only screen and (max-width: 900px) {
	.main_menu {
		padding-top: 0.2%;
	}

	.main_menu a{
		padding:0 7px;
		font-size: 0.8em;
	}

	.spotlight{
		background-size: 110%;
	}
	.servicos article {
		float: none;
		width: 100%;
	}

	#demo {
		min-height: 230px;
	}

	.contato h1{
		text-align: center;
		padding: 0 0;
		color: #990000;
		text-shadow: none;
		background-image: none;
	}

	.contato article {
		float: none;
		width: 100%;
		margin-top: 8%;
		padding: 0 0;
	}

	.contato article:last-of-type{
		padding-top: 7%;
		padding-bottom: 0;
	}
}

@media only screen and (max-width: 765px) {

	.main_header {
		height: 55px;
		position: relative;
	}

	.main_logo {
		max-width: 40%;
		padding: 1% 0;
		float: left;
	}

	.main_logo img {
		max-width: 100%;
	}

	#dropdownMenuButton{
		font-size: 1em;
		background-color: #990000;
		margin-right: 5%;
		padding: 8% 18%;
	}

	.main_menu{
		position: fixed;
		z-index: 11;
		float: right;
		margin-left: 65%;
		padding: 1% 0;
	}

	.main_menu a{
		padding: 5px 25px;
		color: #333333;
		font-size: 1em;
		text-decoration: none;
	}

	.main_menu a:hover {
		color: #990000;
		transition: 0.5s;
		text-decoration: none;
	}

	.spotlight{
		margin-top: 0;
		padding: 20% 0;
		background-size: 130%;
		background-position: top;
	}

	.spotlight img{
		width: 90%;
		margin: 0 5%;
	}

	.spotlight p{
		font-size: 1.2em;
	}
		
	.quemsomos h1 {
		font-size: 1.5em;
		padding: 3% 0;
	}

	.quemsomos p{
		font-size: 1em;
		line-height: 25px;
		padding-left: 5%;
		padding-right: 5%;
	}
	
	.servicos{
		padding: 0 1%;
	}

	.servicos article {
		float: none;
		width: 100%;
		margin-bottom: 10%;
		padding: 5% 10%;
	}

	.servicos h1 {
		font-size: 1.5em;
		padding: 7% 0;
	}

	.servicos h2{
		padding: 2% 0;
		font-size: 1.2em;
	}

	.servicos p{
		font-size: 0.8em;
		line-height: 20px;
		letter-spacing: 1px;
		padding: 0 0;
	}

	.servicos li{
		font-size: 0.8em;
		line-height: 20px;
		letter-spacing: 1px;
		margin-left: 5%;
	}

	.servicos article:last-of-type li{
		margin-left: 7%;
	}

	.clientes {
		padding: 0 0;
	}

	.clientessec{
		padding: 0 0;
	}

	.clientes h1 {
		font-size: 1.5em;
		padding-top: 5%;
		margin-bottom: 0;
	}

	#demo {
		margin: 3% 0;
		min-height: 190px;
	}

	.clientes img{
		width: 70%;
		max-height: 300px;
		margin-right: 15%;
		margin-left: 15%;
		margin-bottom: 0;
	}

	.clientes p{
		font-size: 1em;
		letter-spacing: 1px;
		padding: 1% 0;
		margin: 0 0;
		line-height: 20px;
	}

	.contato article {
		float: none;
		width: 100%;
		margin-top: 8%;
		padding: 0 0;
	}

	.contato article:last-of-type{
		padding-top: 7%;
		padding-bottom: 0;
		margin-top: 0;
	}

	.contato h1{
		font-size: 1.5em;
		margin: 3% 0;
	}

	.contato h2{
		font-size: 1.1em;
	}

	.contato p{
		font-size: 1em;
		letter-spacing: 1px;
	}

	.contato a{
		color: #008ae6;
	}

	.footer article{
		width: 100%;
		float: none;
	}

	.info {
		padding-top: 5%;
		margin-right: 10%;
	}

	.info img{
		width: 50%;
	}

	.info h3{
		font-size: 0.7em;
	}

	.info a{
		font-size: 0.7em;
	}

	.dev{
		text-align: left;
		padding-top: 2%;
	}

	.dev p{
		font-size: 0.8em;
	}

	.dev a{
		color: #b3e0ff;
	}

	.dev a:hover{
		color: #ffffff;
	}

}

@media only screen and (max-width: 690px) {

	.main_header {
		height: 55px;
	}

	.main_logo {
		max-width: 40%;
		padding: 2% 0;
	}

	.clientes h1 {
		font-size: 1.5em;
		padding-top: 10%;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	#demo {
		margin: 5% 0;
		min-height: 160px;
	}
}

@media only screen and (max-width: 525px) {

	.main_header {
		height: 50px;
	}

	.main_logo {
		max-width: 50%;
		padding: 2% 0;
	}

	.quemsomos p{
		font-size: 0.9em;
		line-height: 20px;
	}

	.servicos p{
		font-size: 0.9em;
		line-height: 20px;
	}
}

@media only screen and (max-width: 450px) {
	.main_logo {
		padding: 4% 0;
	}

	.spotlight {
		background-size: 130%;
	}

	.spotlight img{
		width: 95%;
		margin: 0 2.5%;
	}

	.spotlight p{
		font-size: 1em;
	}

	.smfirst{
		width: 20%;
		margin-left: 7.8%;
	}

	.smscnd{
		width: 20%;
	}

	.smslast{
		width: 20%;
		margin-right: 7.8%;
	}
}

@media only screen and (max-width: 380px) {

	.main_logo {
		max-width: 60%;
		padding: 4% 0;
	}
}

@media only screen and (max-width: 340px) {

	.spotlight {
		background-size: 150%;
		background-position: top;
	}

	.spotlight img{
		width: 100%;
		margin: 0 0;
	}

	.contato a{
		font-size: 0.9em;
	}
}