@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);
}
/* latin-ext */
@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;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

 ul#ejm2 li a{
        position: relative;
        font-weight:600;
        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;
	}
	
    
    .texto_clientes{
		font-size:300%;
	}
	 .texto_clientes2{
		font-size:250%;
	}
	
    #footerweb1{
		font-size:130%;
	}
	#footer{
		line-height:inherit;
	}
	#ejm5 li a{
		font-size:110%;
	}
	
	ul#menufooter li a{
		font-size:120%;
	}
	#main-menu-container {
		height:100%;
		background-color:#fff;
		position:relative;
	}
	#menu {
		display:none;
		padding-top: 5px;
		padding-right:0px;
		float:left;
		width:100%;
		height:auto;
        position:relative;
		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}
	#footerporcentaje1 {padding:25px;width:100%;text-align:center}
	#footerporcentaje2 {padding:25px;width:100%;text-align:center}
    #logo2{width:200px;height:40px;padding-top:10px;}
    #horario9{display:none}
	.horario{font-size:18px;font-weight:400}
	#horario{font-size:12px;padding:5px}
	#parallax2{width:100%;margin-bottom: 2em;}
	.spacer{display:none}
	#top{position:relative}
	#seccionseco{width:100%;height:100%;margin:0px;}
	.pedirpresupuesto{width: 100%;height: 2.5em;align-content: center;padding-top: 0px;}
	.campo_form10{width: 100%;}
	#comentario{width:100%;}
	#telefono{width:100%;}
	#formu{width:100%;}
	#contenido {padding:38px;}
	.contenidotelefono{margin: 0px 45px;}
	.fotoseco{width:100%;height:300px}
	.oculto2{width:90%;height:100%;margin:0px;padding:5px}
	
	.vidresp{width:100%}
	
	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;
	width:100%;
}
.col-5{
	float:left;
	width:100%;
}
#footerweb2
{
	padding-right:0px;
	padding-bottom:20px;
	float:left;

	
}
#formulario {
	width:90%;
}
#formulario2 {
	width:100%;
	float:left;
	display:inline-block; 
	padding:25px
}
#qhacemos{
    display: inline-table;
    justify-content: center;
    margin: 0px;
    width: 100%;
    background: #f9f9f978;
    padding-top: 40px;
  }


.opacidad{
	width:100%;
}
.titi2{
	 width:100%;
	 text-align: justify;
}
.productoparallax{
	width:100%;display}
	
#parallax5{padding:25px}
	
}
@media only screen and (min-width: 769px) and (max-width: 1100px){
#logo{ width:80px}
#menu{
	padding-right:10px;
}

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

.col-4{
	width:90px;
}
.col-5{
	width:90px;
}
#qhacemos{
	display:block;
    justify-content: center;

}


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