@font-face{
	font-family: "Source Sans 3";
    src: url(../fonts/SourceSans3-Light.woff2),
         url(../fonts/SourceSans3-Light.woff),
	     url(../fonts/SourceSans3-Light.ttf);
    font-weight: 300; font-display: swap;}
@font-face{
	font-family: "Source Sans 3";
    src: url(../fonts/SourceSans3-Regular.woff2),
         url(../fonts/SourceSans3-Regular.woff),
	     url(../fonts/SourceSans3-Regular.ttf);
    font-weight: 400; font-display: swap;}
@font-face{
	font-family: "Source Sans 3";
    src: url(../fonts/SourceSans3-Bold.woff2),
         url(../fonts/SourceSans3-Bold.woff),
	     url(../fonts/SourceSans3-Bold.ttf);
    font-weight: 700; font-display: swap;}
@font-face{
	font-family: "Teko";
    src: url(../fonts/Teko-Regular.woff2),
         url(../fonts/Teko-Regular.woff),
	     url(../fonts/Teko-Regular.ttf);
    font-weight: normal; font-display: swap;}
*{
	margin: 0; padding: 0;}
body{
	font-family: 'Source Sans Pro', sans-serif; line-height: 2em; background: #1a1a1e; color: #333;}
.contenido{
	background: #fff;}
img a, a, a img{
	text-decoration: none;}
img{height: auto;}
#imagen img, img{
	width: 100%; height: auto;}
#imagen img{
	display: block;}
.neg{
	font-weight: bold;}
.noneg{
	font-weight: normal;}
.may{
	text-transform:uppercase;}
#menu ul li{
	list-style-type: none; text-align: center;}
#menu ul li a{
	color: #aaa; padding: 20px 0; display: block; font-size: 23px;}
#menu ul li a:hover{
	color: #d0061e; }
.banda{
	background: #d0061e; color: #000; text-align: right; font-weight: 700;}
.banda a{
	color: #fff;}
.banda .telefono{
	font-size: 22px; padding: 12px; letter-spacing: 1px; display: inline-block;}
p{
	margin: 15px 0 0 0; font-size: 20px;}
.frase{
	color: #d0061e; font-size: 32px; margin-top: 100px; text-align: center;}
.destacado{
	background: #333; color: #fff; text-align: center; padding: 15px 0 10px 0; letter-spacing: 5px; 
	font-size: 30px; font-family: 'Teko', sans-serif; text-transform: uppercase;}
h1{
	font-size: 36px; font-weight: 700; line-height: 30px; color: #d0061e;}
.subt{
	font-size: 16px; font-weight: 400; color: #777; display: block; }
.centrado{
	text-align: center; margin: 0 auto; width: 100%; max-width: 900px;}
.boton a{
	background: #313439; color: #fff; display: block; font-size: 17px; letter-spacing: 2px;
	padding: 10px 5px; text-align: center; }
.gris{
	background: #efefef; padding: 100px 0; }
.gris h3{
	color: #fff; background: #d0061e; font-size: 40px; display: inline-table; padding: 12px;
	border: 12px solid #fff; margin-bottom: 30px; line-height: 40px;}
.gris h3 span{
	font-weight: 300;}
.gris p, .gris ul{
	font-size: 1.3em;}
.gris ul{
	margin-left: 20px;}
.gris ul li{
	margin-top: 10px;}
.trio{
	margin-top: 80px;}
.trio a{
	display: block; font-size: 36px; color: #d0061e; font-weight: 300; text-align: center; 
	padding: 10px 0; content: ""; position: absolute; transition: transform 0.5s ease;  }
.trio a, .trio a > span {
  position: relative; color: #d0061e; padding-top: 16px;}
.trio a:before, .trio a:after, .trio a > span:before, .trio a > span:after {
  content: ""; position: absolute; transition: transform 0.5s ease;}
.trio a:before, .trio a:after {
  left: 0; top: 0; width: 100%; height: 100%; border-style: solid; border-color: #d0061e;}
.trio a:before {
  border-width: 1px 0 1px 0; transform: scaleX(0);}
.trio a:after {
  border-width: 0 1px 0 1px; transform: scaleY(0);}
.trio a:hover:before, .trio a:hover:after {
  transform: scale(1, 1);}
.furgos h4{
	font-size: 24px; color: #d0061e; margin-top: 60px;}
.neumaticos .texto-fondo h3{
	color: #fff; font-size: 42px; line-height: 50px; font-weight: normal; font-weight: 300;}
.neumaticos h4{
	color: #d0061e; font-size: 24px; font-family: 'Teko', sans-serif; letter-spacing: 1px;
	margin-top: 10px;}
.neumaticos p{
	font-size: 1.4em; color: #fff; font-weight: 300;}
.bloque {
	position: relative;}
.bloque img{
	width: 55%; float: right;}
.bloque p{
	color: #fff; width: 35%; padding: 5%; background: #d0061e; font-size: 22px; float: left;
	font-weight: 300;}
.recogida{
	background: #d0061e;}
.f-itv{
	margin-top: 60px; background: #000;}
.f-itv p{
	background: #000;}
.presu{
	margin-top: 60px; background: #eee !important; border: 2px solid #d0061e;}
.presu p{
	background: none; width: 90%; text-align: center; color: #000; padding: 1% 5%; float: none;}
.presu .menor{
	font-size: 18px; padding: 0 5%; margin-top: 8px;}
.presu .tit{
	font-weight: 600; color: #d0061e;}
.boton .enviar{
	text-transform: uppercase; margin: 20px; border: 1px solid #ccc; 
	color: #313439; background: #fff;}
.boton .enviar:hover{
	background: #313439; color: #fff;}
footer .boton a:hover{
	background: #d0061e; }
footer{
	background: #1d1e21; color: #ccc; text-align: center; opacity: 0.8;}
footer h3, footer h4{
	color: #fff; font-size: 20px;}
footer h3{
	color: #777; font-weight: 400;}
footer h4{
	margin-bottom: 10px; font-weight: 400;}
footer h5{
	font-size: 18px; line-height: 33px; font-weight: 400;}
.infooter{
	padding: 50px 0; font-weight: 300; font-size: 17px;}
.infooter .boton{
	padding-top: 15px;}
address{
	font-style: normal; display: block;}	
.borra{
	clear: both;}
#aviso{ 
	font-size: 14px; clear: both; text-align: right; letter-spacing: 0.5px;}
#aviso a{
	color: #ccc; display: inline-block; padding: 5px 0;}
iframe{
	border: none; width: 100%; display: block;}
.redes a img{
	border-radius: 25px; opacity: 0.5;}
.redes a:hover img{
	opacity: 1;}
.top{
	color:#000; padding-top:10px; display:block; text-align: center; width: 45px;
	margin-top: 10px; position:relative; text-decoration:none;
	transition:all .3s ease-out;}
.top:before{
	content:'▲'; font-size:20px; position:absolute; top:0; left:50%; margin-left:-.7em;
	border-radius:25px; background: #fff; padding: 6px;
	width:1.4em; height:1.4em; line-height:1.3em; transition:transform .5s ease-in;}
.top:hover{
	color:#d0061e;}
.infooter .flecha{
	width: 50px; float:right;} 
.infooter .boton{
	clear: both;}
.telefono{
	color: #fff;}
.centrado .telefono{
	color: #d0061e; font-size: 26px;}
.fin{
	padding-bottom: 100px;}
.mapa{padding: 200px 0; background: url( "../imagenes/mapa.jpg") no-repeat left top; background-size: 100% auto; margin: 100px 0;}
.mapa a{margin: 0 auto; width: 280px; text-transform: uppercase; font-size: 0.8em;}

@media only screen 
and (max-width : 560px){
.pantalla, .tablet, .banda-text{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 20px;}
.banda .telefono {
    font-size: 20px;}
.banda{
	text-align: center;}
body{
	background: #1a1a1e url(../imagenes/fondo-ruedas-m.jpg) no-repeat center bottom;
	background-size: 100% auto; text-align: center;}
#cabecera .todo{
	margin: 0 20px;}
#logo{
	width: 120px; margin: 40px auto 0 auto;}
#menu{
	font-weight: 300; }
#menu ul{
	padding: 20px 0;}
#menu ul li a{
	font-size: 28px; }
.contenido{
	padding: 80px 0 0 0; }
.trio{
	width: 100%; max-width: 260px; margin: 0 auto;}
.trio a {
    font-size: 28px;}
.trio .trio-central{
	margin: 30px 0;}
.frase {
    font-size: 26px;}
.destacado{
	margin-bottom: 80px; font-size: 26px;}
.m-top-t, .furgos{
	margin-top: 80px;}
.gris{
	background: #cecece; padding: 60px 0 30px 0;}
.gris .foto-fondo, .bloques, .neumaticos .foto-fondo{
	margin-top: 40px;}
.gris p, .f-itv p{
	font-size: 20px;}
.bloques .neg{
	font-size: 27px; display: block; margin-bottom: 10px;}
.f-itv .tit-mov{
	font-size: 30px; padding-bottom: 0;}
.gris ul {
    margin-left: 0; list-style-type: none; font-size: 1.2em; opacity: 0.9;}
.gris h3 {
    font-size: 26px; margin: 0 auto 30px auto; display: table;}
.neumaticos .foto-fondo{
	margin-top: 100px; }
.neumaticos{
	background: #111; padding: 90px 0 20px 0;}
.itv{
	background: #22262c; color: #ccc;}
.bloques{
	margin-top: 60px;}
.bloque img {
    width: 100%; float: none;}
.bloque p{
	width: 90%; float: none; }
.infooter {
    padding: 50px;}
footer .izdo{
	width: 110px; margin: 0 auto;}
footer .cent{
	display: none; }
footer .dcho{
	margin: 0 auto;}
footer .telefono{
	font-size: 36px; font-weight: 200; line-height: 50px; letter-spacing: 2px; 
	margin-bottom: 0px; display: block;}
footer .ocu{
	display: none;}
#aviso{
	margin-right: 50px;}
.mapa{padding: 260px 0; background: url( "../imagenes/mapa-m.jpg") no-repeat left top; background-size: 100% auto; }

}

@media only screen 
and (min-width : 561px)
and (max-width : 800px) {
.pantalla, .movil, .banda-text{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 30px;}
.banda{
	text-align: center;}
body{
	background: #1a1a1e url(../imagenes/fondo-ruedas-t.jpg) no-repeat center bottom;
	background-size: 100% auto; text-align: center;}
#cabecera .todo{
	margin: 0 20px;}
#logo{
	width: 130px; margin: 30px auto 0 auto;}
#menu{
	font-weight: 400; margin: 0 auto 0 auto; width: 100%; max-width: 550px;}
#menu ul li{
	float: left; width: 14%;}
#menu ul .uno{
	width: 12%;}
#menu ul .tres{
	width: 22%;}
#menu ul .cuatro{
	width: 28%;}
#menu ul .cinco{
	width: 24%;}
#menu ul li li{
	width: 100%;}
#menu ul li a{
	font-size: 17px; }
.contenido{
	padding: 100px 0 0 0; }
.trio a {
    font-size: 25px;}
.destacado{
	margin-bottom: 80px;}
.m-top-t, .furgos{
	margin-top: 80px;}
.gris{
	background: #cecece; padding: 60px 0 30px 0;}
.gris .foto-fondo, .bloques, .neumaticos .foto-fondo{
	margin-top: 40px;}
.gris p, .gris ul {
    font-size: 1.2em;}
.f-itv p{
	font-size: 17px;}
.gris ul {
    text-align: left; display: inline-block;}
.gris h3 {
    font-size: 30px; margin: 0 auto 30px auto; display: table;}
.neumaticos .foto-fondo{
	margin-top: 100px; }
.neumaticos{
	background: #111; padding: 90px 0 20px 0;}
.itv{
	background: #22262c; color: #ccc;}
.trio .ter{
	width: 50%; float: left;}
.trio .trio-cara{
	margin-top: 30px; clear: both; margin-left: 25%;}
.bloques{
	margin-top: 60px;}
.infooter {
    padding: 50px;}
footer .izdo{
	width: 110px; margin: 0 auto;}
footer .cent{
	display: none; }
footer .dcho{
	margin: 0 auto;}
footer .telefono{
	font-size: 30px; font-weight: 200; line-height: 60px; letter-spacing: 2px; 
	margin-bottom: 10px; display: inline-block;}
#aviso{
	margin-right: 50px;}
.mapa{padding: 200px 0; background: url( "../imagenes/mapa-t.jpg") no-repeat left top; background-size: 100% auto; margin: 100px 0;}

}

@media only screen 
and (min-width : 650px)
and (max-width : 800px) {
.gris p, .f-itv p{
	font-size: 1.4em;}}

@media only screen 
and (min-width : 801px)
and (max-width : 1199px) {
.movil, .tablet, .ocu{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 60px;}
.banda{
	text-align: center;}
body{
	background: #1a1a1e url(../imagenes/fondo-ruedas-tt.jpg) no-repeat center bottom;	background-size: 100% auto;}
#cabecera .todo{
	margin: 0 20px;}
#logo{
	width: 150px; margin: 15px auto;}
#menu{
	width: 745px; font-weight: 300; margin: 0 auto 0 auto;}
#menu ul li{
	float: left; width: 14%;}
#menu ul .uno{
	width: 12%;}
#menu ul .tres{
	width: 22%;}
#menu ul .cuatro{
	width: 28%;}
#menu ul .cinco{
	width: 24%;}
#menu ul li li{
	width: 100%;}
.contenido{
	padding: 100px 0 0 0; }
.trio a {
    font-size: 25px;}
.gris{
	background: #cecece url(../imagenes/blanco.jpg) repeat-x center top; padding-bottom: 80px;}
.gris .texto-fondo, .neumaticos .texto-fondo{
	width: 44%; float: left; margin-top: 0px;}
.gris .foto-fondo, .bloques, .neumaticos .foto-fondo{
	width: 50%; float: right; margin-top: 140px;}
.gris p, .gris ul {
    font-size: 1.2em;}
.gris h3 {
    font-size: 36px;}
.neumaticos .foto-fondo{
	margin: 100px 0;}
.neumaticos{
	background: url(../imagenes/fondo-neumaticos.jpg) no-repeat center center;
	background-size: cover; background-attachment: fixed;}
.neumaticos .texto-fondo h3{
	margin-top: 150px;}
.itv{
	background: #22262c url(../imagenes/blanco.jpg) repeat-x center top; color: #ccc;}
.itv, .gris{
	background-size: auto 130px;}
.itv p, .gris p{
	font-size: 22px; line-height: 34px;}
.trio .ter{
	width: 32%; float: left;}
.trio .trio-coche{
	width: 26%; margin-top: 4%;}
.trio .trio-central{
	margin: 0 5%;}
.bloques{
	margin-top: 200px;}
.bloque img {
    width: 100%; float: none;}
.bloque p{
	width: 80%; float: none; padding: 1% 10% 8% 10%; font-size: 20px;}
.infooter {
    padding: 60px;}
footer .izdo{
	width: 150px; float: left;}
footer .cent{
	display: none; }
footer .dcho{
	width: 350px; float: right;}
footer .telefono{
	font-size: 30px; font-weight: 200; line-height: 60px; letter-spacing: 2px; 
	margin-bottom: 10px; display: inline-block;}
#aviso{
	margin-right: 50px;}
.mapa{padding: 200px 0; background: url( "../imagenes/mapa-t.jpg") no-repeat left top; background-size: 100% auto; margin: 100px 0;}

}
	
@media only screen 
and (min-width : 1200px){ 
.movil, .tablet, .ocu{
	display: none;}
body{
	background: #1a1a1e url(../imagenes/fondo-ruedas.jpg) no-repeat center bottom;
	background-size: 100% auto;}
.container, #imagen, .infooter, #aviso {
	width: 88%; margin: 0 auto;}
.todo {
	margin: 0 100px;}
#cabecera .todo{
	margin: 0 20px;}
#logo{
	width: 150px; float: left; margin: 15px 0 0 0;}
#menu{
	width: 780px; float: right; font-weight: 300; margin-top: 45px;}
#menu ul li{
	float: left; width: 14%;}
#menu ul .uno{
	width: 12%;}
#menu ul .tres{
	width: 22%;}
#menu ul .cuatro{
	width: 28%;}
#menu ul .cinco{
	width: 24%;}
#menu ul li li{
	width: 100%;}
#cabecera{
	position: relative; z-index: 10;}
#imagen{
	position: relative; z-index: 1; margin-left: auto; top: -100px;}
.contenido{
	padding: 100px 0 0 0; top: -80px; position: relative;}
.gris{
	background: #cecece url(../imagenes/blanco.jpg) repeat-x center top;}
.gris .texto-fondo, .neumaticos .texto-fondo{
	width: 40%; float: left; margin-top: 60px;}
.gris .foto-fondo, .bloques, .neumaticos .foto-fondo{
	width: 50%; float: right;}
.neumaticos .foto-fondo{
	margin: 100px 0;}
.neumaticos{
	background: url(../imagenes/fondo-neumaticos.jpg) no-repeat center center;
	background-size: cover; background-attachment: fixed;}
.neumaticos .texto-fondo h3{
	margin-top: 150px;}
.itv{
	background: #22262c url(../imagenes/blanco.jpg) repeat-x center top; color: #ccc;}
.trio .ter{
	width: 30%; float: left;}
.trio .trio-central{
	margin: 0 5%;}
.bloques{
	margin-top: 200px;}
footer .izdo{
	width: 150px; float: left;}
footer .cent{
	width: calc(100% - 500px); float: left; }
footer .dcho{
	width: 350px; float: left;}
footer .telefono{
	font-size: 30px; font-weight: 200; line-height: 60px; letter-spacing: 2px; 
	margin-bottom: 10px; display: inline-block;}

}
@media only screen 
and (min-width : 1200px)
and (max-width : 1450px) {
.itv, .gris{
	background-size: auto 150px;}
.gris .texto-fondo, .neumaticos .texto-fondo {
    margin-top: 1px;}	
.gris h3 {
    font-size: 36px;}
}
@media only screen 
and (min-width : 1350px)
and (max-width : 1550px) {
.bloques p{
	font-size: 18px;}
}
@media only screen 
and (min-width : 1200px)
and (max-width : 1349px) {
.bloques p{
	font-size: 16px; padding: 2% 5%;}
}