@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto Black'), local('Roboto-Black'), url(http://fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIltXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'moyo';
  src:url(moyo.otf);
}

@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'), url(https://fonts.gstatic.com/s/titilliumweb/v7/NaPecZTIAOhVxoMyOr9n_E7fdM3mDbRS.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'), url(https://fonts.gstatic.com/s/titilliumweb/v7/NaPecZTIAOhVxoMyOr9n_E7fdMPmDQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  src: local('Titillium Web SemiBold'), local('TitilliumWeb-SemiBold'), url(https://fonts.gstatic.com/s/titilliumweb/v7/NaPDcZTIAOhVxoMyOr9n_E7ffBzCGIVzY4SY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  src: local('Titillium Web SemiBold'), local('TitilliumWeb-SemiBold'), url(https://fonts.gstatic.com/s/titilliumweb/v7/NaPDcZTIAOhVxoMyOr9n_E7ffBzCGItzYw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

 ul#ejm2 li a{
        position: relative;
        font-weight:400;
		color:#000;
		font-family: "Titillium Web";

    }
    ul#ejm2 li a:after{
        position: absolute;
		bottom: 6px;
        left: 0px;
        width: 100%;
        height: 2px;
        background-color: #000;
        content: "";
        opacity: 0;
        transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
        transform: translateY(20px);        
    }
    ul#ejm2 li a:hover:after{
        opacity:1;
        transform: translateY(10px);
    
	}
	ul#ejm2{
       list-style:none;
       }


ul#menufooter li a{
        position: relative;
        font-weight:300;
		font-size:13px;
        color:#999;
		font-family: "Roboto";

    }
    ul#menufooter li a:before{
        position: absolute;
        color:#fff;
        content:attr(title);
        left:0px;
        top:0px;
        max-width:0%;
        white-space: nowrap;
        overflow:hidden;
        transition: max-width 0.3s linear
    }
    ul#menufooter li a:hover:before{
        max-width:100%;
    }
    
	ul#menufooter{
       list-style:none;
       }


    #ejm5 li a{
        position: relative;
        color:#999;
		font-family:"Roboto";
		font-size:14px;
		background-color:#4a4a4a;
		border-radius:30px;
		padding: 12px 20px 12px 20px;
        font-weight:500;
    }
    

    #ejm5 li a:hover{
        max-width:100%;
		color:#CCC;
		background: rgba(255, 255, 255, 0.15);
        transition: all 0.2s ease;
    }
    
	#ejm5{
       list-style:none;
       }
/* -------------- MOVILES -----------------*/



	   
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
	
	.f-nav{
		position:absolute;
		
		
		}
	#logo{
	padding:14px 0px 0px 0px;
	float:left; 
	width:100%;
     }
			
			
	#banner{

		overflow:hidden;
	}
	
    
	.zoom{
    transform:scale(1.02);
	margin:30px;

	}

    .texto_clientes{
		font-size:300%;
	}
	 .texto_clientes2{
		font-size:250%;
	}
	
   	#footer{
		width:100%;
		line-height:inherit;
	}
	#ejm5 li a{
		font-size:110%;
	}
	
	ul#menufooter li a{
		font-size:120%;
	}
	#main-menu-container {
		height:100%;
		position:relative
	}
	#menu {
		padding-top: 5px;
		padding-right:0px;
		float:left;
		width:100%;
		height:auto;
        position:relative;
		display:none;
		animation:animatezoom 0.6s;	
	}
	@keyframes animatezoom{
  from {
    opacity: 0;
      transform: scale(0);
  }
  to{
   opacity: 1;
      transform: scale(1);
  }
}
    #respicon{
		display:block;
		cursor:pointer;
		padding-right:20px;
	}
    #barrafijamenu{display:none}
	#horario9{display:none}
	.horario{font-size:18px;font-weight:400}
	#horario{font-size:12px;padding:5px}
	#telefono{width:200px;}
	#comentario{width:200px;}
	#parallax2{width:100%;padding-bottom: 2em;}
        #parallax{padding: 40px 25px 40px 25px;}
	.spacer{display:none}
	#qhacemos2{padding:20px;}
	#top{position:relative}
	#footerweb{width:100%}
	.campo_form10 {width:100%}
	.zoombeneficios2 {min-height:auto}
	#adicionalform {padding:15px 35px}
	#elegirnos{width:70%}
	#logo2{padding-top:5px}
	#formu{width:100%}
	#telefono{width:100%}
	#comentario{width:100%}
	.sellito{padding-top:35px;}
	#footerporcentaje1 {padding:25px;width:100%;text-align:center}
	#footerporcentaje2 {padding:25px;width:100%;text-align:center}
	#sirmeccanica{width:100%;}
	#servicioazul{padding:auto;justify-content:center}
	.pedirpresupuesto{width: 100%;height: 2em;}
        .titi2{width:100%}
    .servicioactivo{
	width:100%;
	height:100%;
	padding:0px; } 
	ul#ejm2 {
    margin-top:5px;
    padding: 0;
	

}
    ul#ejm2 li {
    padding-top:10px;
	padding-bottom:10px;
    width:100%;
	height:auto;
    clear: both;
    background-color:#313131;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px    2px rgba(0,0,0,0.24);

		
}
     ul#ejm2 li a{
		 color:#fff;
		 font-size:190%;
		 font-weight:600;
		 
		 }
		 
	ul#ejm2 li:hover {
    background-color: #0CF;
}

    ul#ejm2 li a:after{
	height:0px;
	

}
.col-1 {
	
      width:100%;
      float:left;
}
.col-2{
	float:left; 
	width:100%;
}
.col-3{
	float:left; 
	width:100%;
}

.col-4{
	float:left;
	border:none;
	width:100%;
}

#footerweb2
{
	padding-right:0px;
	padding-bottom:20px;
	float:left;

	
}
#formulario {
	width:90%;
}

.zoom{padding:40px 0px 20px 0px;width:80%;height:auto}
}
@media only screen and (min-width: 769px) and (max-width: 1100px){

#menu{
	padding-right:10px;
}

.col-2{
width:130px;
}
.col-3{
width:100px;
}

.col-4{
width:100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 950px){
	#logo{
		width:100px;
		padding-left:20px;
	}

}