/*--------------------------------------
 *	RESET
 *--------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
	zoom:1; /* For IE 6/7 (trigger hasLayout) */
}


/*--------------------------------------
 *	MAIN STYLES & LAYOUT
 *--------------------------------------*/

body {
	background: #fafafa;
	color: #666;
	font: normal 100% 'Lato', 'Open-Sans', 'Helvetica', sans-serif;
	line-height: 1.5em;
	text-rendering: optimizeLegibility;
}
	@media screen and (max-width: 1000px) {
		body {
			font-size: 90%;
		}
	}
	@media screen and (max-width: 770px) {
		body {
			font-size: 80%;
		}
	}
	@media screen and (max-width: 650px) {
		body {
			font-size: 75%;
		}
	}

a {
	color: #1caf9a;
	text-decoration: none;
	-webkit-transition: all .1s ease-in;
	   -moz-transition: all .1s ease-in;
	    -ms-transition: all .1s ease-in;
	     -o-transition: all .1s ease-in;
	        transition: all .1s ease-in;
}
	a:hover, a:active {
		color: #ee4f4b;
	}

h2 {
	font-size: 2.75em;
	font-weight: 700;
	line-height: 1.05em;
	margin-bottom: .75em;
}
	@media screen and (max-width: 350px) {
		h2 {
			font-size: 2.25em;
		}
	}

h3 {
	color: #10315c;
	font-size: 2em;
	font-style: italic;
	line-height: 1.25em;
	margin-bottom: 1em;
	opacity: .75;
}

h4 {
	color: #10315c;
	font-size: 1.325em;
	font-weight: 700;
	font-style: italic;
	margin-bottom: .75em;
}

.wrap {
	margin: 0 auto;
	max-width: 73.25em;
	width: 100%;
}

.section {
	clear: both;
	padding: 8em 4em;
}
	.alt {
		background-color: #e4edf8;
		border-top: 0.5em solid #6e839e;
		border-bottom: 0.5em solid #6e839e;
	}
	@media screen and (max-width: 770px) {
		.section {
			padding: 4em 5%;
		}
	}

.col {
	float: left;
	margin-bottom: 1em;
	width: 47.5%;
}
	.col-left {
		margin-right: 2.5%;
	}
	.col-right {
		margin-left: 2.5%;
	}
	.col p {
		margin-bottom: 1em;
	}
	@media screen and (max-width: 650px) {
		.col {
			clear: left;
			width: 100%
		}
			.col-left {
				margin-right: 0;
			}
			.col-right {
				margin-left: 0;
			}
	}

.txt-intro {
	font-size: 1.125em;
	line-height: 1.5em;
	margin-bottom: 2em;
}

.thumb-list {
	margin-bottom: 2em;
}
	.thumb-list .media {
		float: left;
		height: 6.25em;
		margin-right: 5%;
		width: 25%;
	}
	.thumb-list h4, .thumb-list p {
		margin-left: 30%;
	}


/*--------------------------------------
 *	HEROE / NAV / SERVICIOS
 *--------------------------------------*/


.heroe {
	background-image: url(../i/heroe00.jpg);
	background-size: cover;
	height: 34.375em;
	padding-top: 0;
}
	@media screen and (max-width: 1000px) {
		.heroe {
			height: 22.5em;
		}
	}

nav {
	display: inline-block;
	height: 4em;
	margin: 1em 0;
	width: 100%;
	-webkit-animation: fadein 5s;	
		 -moz-animation: fadein 5s;	
			 -o-animation: fadein 5s;	
			-ms-animation: fadein 5s;	
					animation: fadein 5s;	
}
	@media screen and (max-width: 650px) {
		nav {
			display: block;
			height: auto;
		}
	}
	.logo {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		float: left;
		height: 5.0625em;
		padding: .5em;
		width: 19.5em;
	}
		.logo img {
			width: 100%;
		}
		@media screen and (max-width: 650px) {
			.logo {
				float: none;
				margin: 0 auto;
			}
		}

	nav ul {
		float: right;
		margin-top: 2.25em;
	}
		@media screen and (max-width: 650px) {
			nav ul {
				text-align: center;
				height: auto;
				margin-top: 1em;
				width: 100%;
			}
		}
		nav li {
			display: inline-block;
			height: auto;
		}
			nav li:nth-child(2) {
				padding: 0 2em;
			}
			nav a {
				color: #fafafa;
				color: rgba(255, 255, 255, .65);
				display: inline-block;
				font-size: 1.125em;
				font-weight: 700;
				height: auto;
				letter-spacing: 0.05em;
				vertical-align: middle;
			}
				nav a:hover {
					color: #fff;
					color: rgba(255, 255, 255, .95);
				}
				nav a:before {
				  content: '';
				  display: inline-block;
				  height: 100%;
				  vertical-align: middle;
				}

.slogan {
	color: #fafafa;
	color: rgba(255, 255, 255, .75);
	font-size: 2.5em;
	font-style: normal;
	font-weight: 400;
	line-height: 1.15em;
	margin: 0 auto;
	margin-top: 3em;
	text-align: center;
	width: 80%;
	-webkit-animation: fadein 2s;	
		 -moz-animation: fadein 2s;	
			 -o-animation: fadein 2s;	
			-ms-animation: fadein 2s;	
					animation: fadein 2s;	
}
	.slogan span {
		color: rgba(255, 255, 255, .9);
		font-size: 1.5em;
		font-style: italic;
		font-weight: 700;
		line-height: 1.15em;
		top: .1em;
		position: relative;
	}
	@media screen and (max-width: 1000px) {
		.slogan {
			font-size: 2em;
			margin-top: 1em;
		}
	}
	@media screen and (max-width: 650px) {
		.slogan {
			font-size: 1.25em;
			margin-top: 1em;
		}
	}

.servicios {
	margin-top: -2.5em;
	padding-bottom: 0;
	padding-top: 0;
}

.servicios ul {
	background-color: #fafafa;
	border-radius: 2px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: table;
	height: auto;
	padding: 1em;
}
	.servicio {
		background-color: #d6dde6;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-left: 0.0625em solid #c7d2e0;
		display: table-cell;
		vertical-align: middle;
		width: 25%;	
		-webkit-transition: all .1s ease-in;
	  	 -moz-transition: all .1s ease-in;
	    	-ms-transition: all .1s ease-in;
	     	 -o-transition: all .1s ease-in;
	      	  transition: all .1s ease-in;	   	
	}
		@media screen and (max-width: 650px) {
			.servicios ul {
				display: block;
				width: 100%;
			}
			.servicio {
				border-left: none;
				border-bottom: 1px solid #c7d2e0;
				display: block;
				height: auto;
				width: 100%;
			}
				.servicio:nth-child(1) {
					border-top-left-radius: 2px;
					border-bottom-left-radius: 0;	
					border-top-right-radius: 2px;
				}
				.servicio:last-child {
					border-bottom: none;
					border-top-right-radius: 0;
					border-bottom-left-radius: 2px;
				}
		}
		.servicio:nth-child(1) {
			border-left: 0;
			border-top-left-radius: 2px;
			border-bottom-left-radius: 2px;	
		}
		.servicio:last-child {
			border-top-right-radius: 2px;
			border-bottom-right-radius: 2px;
		}
		.servicio:hover {
			background-color: rgb(16, 49, 92);
			background-color: rgba(16, 49, 92, .25);
		}
		.servicios .active {
			background-color: #ee4f4b;
		}
			.servicios .active a {
				color: #fff;
			}
		/*.servicio-01 {
			background-color: #ee4f4b;
			-webkit-animation: swipein forwards .5s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.5s;
			   -moz-animation: swipein forwards .5s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.5s;
			     -o-animation: swipein forwards .5s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.5s;
							animation: swipein forwards .5s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.5s;
		}
		.servicio-02 {
			background-color: #2eb3a1;
			-webkit-animation: swipein forwards .7s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.55s;
				 -moz-animation: swipein forwards .7s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.55s;
				   -o-animation: swipein forwards .7s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.55s;
							animation: swipein forwards .7s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.55s;
		}
		.servicio-03 {
			background-color: #d2dc57;
			-webkit-animation: swipein forwards .9s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.6s;
				 -moz-animation: swipein forwards .9s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.6s;
					 -o-animation: swipein forwards .9s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.6s;
							animation: swipein forwards .9s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.6s;
		}
		.servicio-04 {
			background-color: #2eb3a1;
			-webkit-animation: swipein forwards .7s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.65s;
				 -moz-animation: swipein forwards .7s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.65s;
				   -o-animation: swipein forwards .7s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.65s;
							animation: swipein forwards .7s cubic-bezier(0.25, 1.25, 0.25, 1.0) 1.65s;
		}*/
		.servicio a {
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			color: #10315C;
			color: rgba(16, 49, 92, .85);
			display: block;
			font-size: 1.175em;
			height: 100%;
			line-height: 1.15em;
			padding: 1em;
			text-align: center;
			width: 100%;
		}
			@media screen and (max-width: 770px) {
				.servicio a {
					font-size: 1em;
				}
			}
			@media screen and (max-width: 770px) {
				.servicio a {
					font-size: 1.25em;
					height: auto;
				}
			}


/*--------------------------------------
 *	SERVICIO DETALLE
 *--------------------------------------*/

.servicios-detalle {
	padding-top: 3.5em;
}
	.servicio-title {
		color: #ee4f4b;
	}
	.servicio-intro {
		font-size: 1.5em;
		line-height: 1.25em;
	}
	.servicio-detalle img {
		background-color: #ccc;
		border-bottom: .25em solid #ee4f4b;
		height: auto;
		margin-bottom: 1.5em;
		width: 100%;
	}
	@media screen and (max-width: 770px) {
		.servicio-desglose {
			margin-bottom: 0;
		}
	}
	.servicio-desglose li {
		color: #10315c;
		font-size: 1.15em;
		font-weight: 700;
		font-style: italic;
		line-height: 1.15em;
		list-style-type: disc;
		margin-bottom: .75em;
		margin-left: 1em;
		opacity: .85;
	}
	
.nuve {
	background: url(../i/nuve.png) no-repeat bottom left;
	background-size: contain;
	display: inline-block;
	height: 1em;
	width: 2em;
}	


/*--------------------------------------
 *	NOSOTROS	
 *--------------------------------------*/

.mision-vision {
	margin-top: 1em;
}
	.mision-vision img {
		background-color: #ccc;
		height: 160px;
		margin-bottom: 1em;
		width: 100%;
	}

.clientes-marcas {
	margin-bottom: 3em;
}	

	.clientes-marcas img {
		float: left;
		margin-bottom: 2em;
		margin-right: 5%;
		opacity: .85;
	}
	.cliente-cfe {
		margin-top: .25em;
	}
	.cliente-modelo {
		height: 4em;
		width: 4em;
	}
	.cliente-gg {
		margin-top: .625em;
	}
	.cliente-tr {
		clear: left;
		width: 12.5em;
	}
	.cliente-immex {
		width: 9.375em;
	}
	.marca-cummins {
		width: 3.125em;
	}
	.marca-caterpillar {
		width: 5em;
	}
	.marca-gm {
		width: 3.5em;
	}
	.marca-eaton {
		clear: left;
	}
		@media screen and (max-width: 1000px) {
		.marca-eaton {
			clear: none;
		}
	}
	.marca-fuller {
		margin-top: .625em;
	}
	.marca-vw {
		width: 4em;
	}
	.marca-jd {
		width: 4em;
	}
	.marca-trackmobile {
		clear: left;
		width: 3em;
	}
	.marca-rk {
		margin-top: .625em;
		width: 8em;
	}
	.marca-detroit {
		clear: left;
		width: 5em;
	}
	.marcas-mas {
		clear: left;
	}




/*--------------------------------------
 *	CONTACTO	
 *--------------------------------------*/

.media img {
	border-bottom: .25em solid #ee4f4b;
	width: 100%;
}

.facebook {
	background: #3b5998 url(../i/facebook.png) no-repeat 1em 50%;
	background-size: 1.5em;
	border-radius: 2px;
	-moz-box-sizing: border-box;
			 box-sizing: border-box;
	color: #fff;
	display: inline-block;
	font-size: 1.25em;
	margin-bottom: 2em;
	padding: 1em 1em 1em 3.5em;
	width: 100%;
}

form div {
	margin-bottom: 1em;
}
	form label, .requiredNote  {
		display: block;
		font-size: 1em;
		font-style: italic;
	}
		em {
			color: #ee4f4b;
		}
	form input, form textarea {
		background-color: #e4edf8;
		border: none;
		border-bottom: .125em solid #6e839e;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		font: normal 100% 'Lato', 'Open-Sans', 'Helvetica', sans-serif;
		font-size: 1.125em;
		height: 2em;
		padding: 0 .5em;
		width: 100%;
		margin-bottom: .125em;
		-webkit-appearance: none;
		-webkit-border-radius: 0;
	}
		form textarea {
			height: 8em;
			margin-bottom: 0;
			padding: .5em;
		}
	.submit-button {
		background-color: #6e839e;
		border: none;
		border-radius: 2px;
		color: #fff;
		cursor: pointer;
		height: 2.5em;
		-webkit-transition: all .15s ease-in;
	   -moz-transition: all .15s ease-in;
	    -ms-transition: all .15s ease-in;
	     -o-transition: all .15s ease-in;
	        transition: all .15s ease-in;
	}
		.submit-button:hover {
			background-color: #10315c;
		}

.success {
	background-color: #3a9c3a;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #fff;
	padding: 1em;
}		

.error {
	background-color: red;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #fff;
	padding: 1em;
}		


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

footer.section {
	padding: 4em; 
}
	@media screen and (max-width: 650px) {
		footer {
			text-align: center;
		}
	}

.tinto {
	float: right;
	font-size: .875em;
	font-weight: 700;
}
	@media screen and (max-width: 650px) {
		.tinto {
			clear: both;
			display: block;
			float: none;
		}
	}


/*--------------------------------------
 *	ANIMATIONS
 *--------------------------------------*/

@-webkit-keyframes fadein {
    from { opacity: 0; }
      to { opacity: 1; }
}
@-moz-keyframes fadein {
    from { opacity: 0; }
      to { opacity: 1; }
}
@-o-keyframes fadein {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadein {
    from { opacity: 0; }
      to { opacity: 1; }
}

@-webkit-keyframes swipein {
    from { left: 1500px; opacity: 0; }
      to { left: 0; opacity: 1; }
}
@-moz-keyframes swipein {
    from { left: 1500px; opacity: 0; }
      to { left: 0; opacity: 1; }
}
@-o-keyframes swipein {
    from { left: 1500px; opacity: 0; }
      to { left: 0; opacity: 1; }
}
@keyframes swipein {
    from { left: 1500px; opacity: 0; }
      to { left: 0; opacity: 1; }
}