body{
	font-size: 16px;
	font-family:"Roboto", arial;
	background:#fff;
	
}
@font-face {
    font-family: 'mike';
    src: url('../fonts/modern_m-webfont.eot');
    src: url('../fonts/modern_m-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/modern_m-webfont.woff2') format('woff2'),
         url('../fonts/modern_m-webfont.woff') format('woff'),
         url('../fonts/modern_m-webfont.ttf') format('truetype'),
         url('../fonts/modern_m-webfont.svg #mike') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1, h2, h3, h4, h5{
	font-family: "mike" ,arial;
	color:#37673d;
}
h1{
	font-size: 2em;
}
.center{
	max-width:1000px; margin: auto; 
	position: relative; 
}
.width-33 {
	width: 31.5%;
	margin-top:20px;
	display:inline-block;
	vertical-align:top;
	color: #fff;

}

.width-33 + .width-33 {
	margin-left: 0.85%;
}
.vertical_cent{
	vertical-align:top;
}
.width-20{
	width: 22%;
	
	display: inline-block;
	vertical-align: top;
	background: #000;
}
.width-20 + .width-20{
	margin-left:3.5%;

}
.width-20{
	vertical-align: middle;
}

main{
	padding:170px 0px;

}
.no_pading{
	padding-top:140px;

}
header,nav{
z-index: 10;
position: fixed;
width: 100%;
}

header {
	background-color:#fff;
	top: 0;
	height:100px;
 }

nav {
	background-color:#37673d;
	top: 100px;
	display: block;
	height: 40px;
	box-shadow: 0 9px 9px 0 rgba(0,0,0,0.4);

}


footer{
	min-height:150px;
	background-color:#37673d;
}
     /*el elemento center  con la propiedad relativa es  la que  manipula
     los ID  dentro  del perimetro (header) los id deben llevar la propiedad
     absoluta*/

 	#logo {
		position: absolute;
		
		left:0; 
 	}
 	#logo img{
 		border-radius: 5px;
 	}

 	#logo2 {
		
		border-radius: 5px; 
 	}
 	.tel{
 	position: absolute;
 	top:10px;
 	display:inline-block;
 	right: 0px;
 	font:bold;
 	font-size:20px;
 	color: #666;
 	line-height:2; 
 	}
 	
	#navbtn{
		display:none;
		background-color: #f00;
		border: 2px solid #fff;
		text-align: center;
		width: 35px;
		height: 35px;
		border-radius: 5px;
	}
	#navbtn i{
	color: #fff;
	font-size: 2em;

	}
 	#menu {
 		height:40px;
 		text-align:center;

 	}

 	#menu li{
 	 display: inline-block;
 	}
 	#menu a{ padding: 10px 60px; 
	 		line-height:40px;
	 		background:#37673d;
	 		font-size: 14px;
	 		font-weight:bold;  
	 		text-transform: uppercase;
	 		text-decoration: none;
	 		color: #fff;
	 		transition-duration: 0.5s;
	 	}
	 	#menu a:hover{
			background:#ec1a23; 
	 	}
	 	#precios {
	 		min-height: 100px;
	 		background-color: #4a4a4a;
	 		text-align: center;
	 		margin-bottom: 50px;
	 	}
	 	#precios ul{
			padding:25px;
		}
	 	#precios  li{
	 		display: inline-block;
			color: #fff;
			text-transform: uppercase;
	 		border-radius: 5px;
			padding: 15px;
	 		border: 2px solid;
	 	}

	 	#precios li:first-child{
		 	border: none;
		 	font-weight: bold;
		 	
	 	}
	 	.magna{
			background-color:#0E8E30;
	 	}
	 	
	 	.premium{
		background-color:#F00; 
	 	}
	 	.diesel{
		background-color:#000; 
	 	}

	 	#slider2{

	 	}



#noticias, #topten,#galeria-serv{
		display: inline-block;
		vertical-align: top;
}
#noticias{
	width: 600px;

}

#noticias article{

}
#noticias article + article{
	margin-top: 40px;
	/* cuando  este un articulo a la izquierda o arriba 
	tomara segun lo que pongamos en la propiedad
	en este caso fue la altura "top". tomando 40 px*/
}

#noticias h2{
font-size:2em;
color:#37673d;
}
#noticias time{
	display:block;
	margin: 10px;
	font-style: italic;
}
#noticias p{
	text-align: justify;
	line-height:2;

}
#noticias p + p{
	
}
section h3, aside h3{
	font-size:1.5em;
	border-bottom:2px solid #37673d;
	padding-bottom: 7px;
	margin-bottom: 20px;

}

#topten {
	width: 300px;
	margin-left:9%; 		
	text-transform: uppercase;
	color: #37673d;
	padding: 25px;
	border-radius: 5px;
	box-shadow: 1px 8px 9px #37673d;
	text-align: center;
}

#topten img{
	display: block;
	width: 230px;
	margin: auto;
	border-radius: 5px;
}

#topten h3{
	text-align: center;
}
/* codigo de mike*/

#nosotros h3{
	
}

#nosotros article {
	width: 470px;
	height: 150px;
	display: inline-block;
	background-color: #ECEDED;
	margin: 20px 13px;
	vertical-align: top;
	border-top: 10px;
	padding: 20px;
	border-radius:5px; 
		
	
}
#nosotros h3{
	line-height: 1;
	color: #FF5A17;
	border-bottom: 2px solid #37673d;
	
}
#nosotros article  + article{
	

		
}
#nosotros p{
	text-align: justify;
}
#galeria-serv {
	width: 100%;
	margin: 20px 0;

	
}
.servicio{
	width: 47%;
	display:inline-block;
	margin: 0 10px;
	padding: 4px;
	text-align: center;
	vertical-align: top;
	line-height:2;

}
.servicio i{
	font-size: 2em;
	margin-bottom: 10px;
	color: #37673d;
}
.servicio p{
	text-align:justify;
}
.servicio h3{
	color: #FF5A17;
}
.servicio:hover i{
	color: #f00;
}
#galeria-serv article + article {
	margin-bottom: 40px;
}


#servicios{
	display: inline-block;
	width: 100%;
	vertical-align: top;
	line-height: 2;
	text-align:center;

}
#servicios i{
	font-size:10em;
	margin-bottom: 10px;
	color: #37673d;

}
#servicios h3{
	text-align: center;
	color:#FF5A17;
}
#servicios h2{
	text-align:center;
	color: #37673d;
}

#servicios article p{
	font-size: 16px;
}

#servicios img{

	display: inline-block;
	border-radius: 5px;
	width: 100%;
	height:auto;
}


#fotos{
	margin: 50px 0;
}
#fotos img{
	
	   margin: 0 8px;
	   border-radius: 5px;

	}
	
	#tarjetas{
		margin: 50px 0;
	}
	#tarjetas img{
		display: inline-block;
		margin: 0 48px;
		
	}

	#videos video{
		
	   display: inline-block;
	   margin: 0 23px;
	}
	.formcontacto{
		width: 470px;
		display: inline-block;
		vertical-align: top;
	}

	.formcontacto div{
		margin-top: 20px;
	}
	.formcontacto label{
		display: block;
		cursor: pointer;
		margin-bottom: 3px;
	}
	.formcontacto input,.formcontacto select,.formcontacto textarea{
		border: 2px solid #37673d;
		padding: 5px;
		border-radius: 5px;
	}
	.formcontacto input:focus,.formcontacto select:focus,.formcontacto textarea:focus{
		border: 2px solid #FF5A17;

	}
	.formcontacto input,.formcontacto select{
		width: 50%;
	}
	.formcontacto textarea{
		width: 100%;
		height: 200px;
	}
	.formcontacto input[type="submit"]{
		border:none;
		background-color: #37673d;
		border-bottom: 3px solid #009686;
		color:#fff;
		padding: 7px 0;
		font-weight: bold;
		cursor: pointer;
		transition-duration: 0.5s;
	}
	.formcontacto input[type="submit"]:hover{
		transform:translate(0px,4px);
		border:none;
	}

		#mapa{
		display: inline-block;
		vertical-align: top;
		width: 450px;
		min-height:500px;
		margin-left:10px;
	}

.menu2	{
border-bottom: 2px solid #37673d;
margin-bottom: 20px;
padding: 20px 0;
}

.menu2	li{
display: inline-block;
margin: 0 69px;
}

.menu2 a{
	  
	line-height:40px;
	
	font-size:13px;
	
	text-decoration: none;
	color: #fff;
	
}

.menu2	a:hover{
	text-decoration: underline;
}
footer address, footer span{
	font-size: 20px;
	line-height: 1.5;/* esta linea  miltiplica el tamaño de la fuente, declarada en 20px*/
}
.rsociales {
	border-top: 2px solid #37673d;
	margin-top: 20px;
	padding: 20px 0;
	text-align: right;
}

.rsociales li{
	display: inline-block;
	margin: 0 20px;

	
}
.rsociales a {
	padding: 5px;
	font-size: 20px;
	text-decoration: none;
	color: #fff;
}
.rsociales a:hover{
	background: #fff;
	border-radius: 5px;
}
.rsociales a[href*="facebook.com"]:hover{
color:#4862a3;
}

.rsociales a[href*="youtube.com"]:hover{
	color:#E62117;
}
.rsociales a[href*="twitter"]:hover{
color:#54AAEB;
}

main a[href*="facebook.com"]{
color:#4862a3;
}

main a[href*="youtube.com"]{
	color:#E62117;
}
main a[href*="twitter"]{
color:#54AAEB;
}
/*Responsive */
img,video { max-width:100%; height:auto; }

@media screen and (max-width: 1010px) {
	.center{
		width: 95%;
	}
	#fotos img{
		margin: 0 0 10px 0;

	}
	#fotos{
		text-align: center;
	}
	#fotos h3{
		text-align: left;
	}
	#fotos_gale{
		text-align: center;
	}
}

@media screen and (max-width: 995px) {
	#navbtn{
		display: block;
		position: absolute;
		right: 5px;



	}
	#menu li{
		display: block;
	border-top: 2px solid #fff;


	}
	
	#menu a{
	width: 300px;
	display: block;
	background-color: rgba(0, 0, 14, 0.7);

	}
	
	#menu {
		position: absolute;
		right: 5px;
		top: 40px;
	}
	
}

@media screen and (max-width: 988px){
	.menu2 li{
	display: block;
	text-align: center;

	}
	.width-33{
		display: block;
		margin: 0 0 15px 0;
		text-align: center;
		width: 100%;
	}

	#tarjetas h3{
		text-align: left;

	}
	#tarjetas img {
		display: block;
		margin: auto;
		width: 150px;
	}


}
@media screen and (max-width: 975px){
	#topten{
		margin: 50px auto;
		display: block;
	}
	#noticias{
		width: 100%;
	}
	/*#noticias article p{
		display: block;
		text-align: justify;
		
	}*/
}
@media screen and (max-width: 835px){
	
	#titulo{
		visibility: hidden;
		
	}
	
}

@media screen and (max-width: 775px){
	.servicio{
	width: 100%;
	margin: 0;
	}
	
}

@media screen and (max-width: 725px){
	#precios li{
		display: block;
	}
}

@media screen and (max-width: 500px){
	#nosotros article{
		width: 100%;
		margin: 20px 0;
	}
}