@media screen and (max-width:992px){
	header #menu-principal .menu > li > a{
		padding: 0px 9.5px
	}
}


@media screen and (max-width:820px){
	header .logotipo img{
		width: 130px;
	}
    
	header .row-container{
		position: relative;
	}


	header #menu-responsive{
		color: #2e343a;
		display: inline-block;
		cursor: pointer;
	}


	header #menu-principal{
		max-width: 90%;
        transition: all .3s;
        position: fixed;
        top: 0;
        left: -100%;
        box-shadow: none;
        z-index: 9999;
        background: rgba(46, 52, 58,1);
        min-height: 100vh;
        overflow-y: scroll;
	}

	header #menu-principal #cerrar{
        border-bottom: 1px solid rgba(255,255,255,.13);
        color: #fff;
        display: flex;
        text-align: center;
	}
    
    header #menu-principal #cerrar > i {
        font-size: 20px;
        padding: 15px;
        border-right: 1px solid rgba(255,255,255,.4);
        cursor: pointer;
    }
    
    header #menu-principal #cerrar > h2 {
        text-align: center;
        font-size: 16px;
        font-weight: 300;
        padding: 0 20px;
    }

	header #menu-principal.mostrar-menu{
		left: 0
	}
	
	header #menu-principal .menu{
		flex-direction: column;
		padding: 0;
		margin: 0;
		justify-content: flex-start;
		background: rgba(46, 52, 58,1);
	}

	header #menu-principal .menu > li {
    	position: static;
	}
	
	header #menu-principal .menu > li > a{
		    text-align: left;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.13);
    position: relative;
    font-size: 13px;
    padding: 12px 12px 12px 18px;
    line-height: 1;
	}
    
    header.header-fixed #menu-principal .menu > li > a{
        line-height: 1;
    }
    
    
    header #menu-principal .menu > li > a:hover{
        border-bottom: 1px solid rgba(255,255,255,.13);
    }
	

	
	header #menu-principal .menu > li > a > i{
		position: absolute;
		right: 10px;
		font-size: 16px;
		transform:rotate(-90deg);
	}
	
	header #menu-principal .submenu > h3, 
	header #menu-principal .sub-submenu > h3,
	header #menu-principal .submenu > p, 
	header #menu-principal .sub-submenu > p{
		display: block;
	}

	header #menu-principal .submenu .titulo-link {
	    background: #fff;
		padding: 10px 20px;
		font-weight: 400;
		font-size: 18px;

	}

	header #menu-principal .submenu .titulo-link i {
    	margin-right: 10px;
	}

	header #menu-principal .submenu .regresar {
	    background: #f4f4f4;
	    padding: 10px 10px 10px 40px;
	    cursor: pointer;
	}

	header #menu-principal .submenu, header #menu-principal  .sub-submenu{
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
		border-top:none;
		background:#007AE8;
		box-shadow: none;
		width: 100%;
		position: absolute;
		top: 0%;
		left: -100%;
		z-index: 999;
		transition:all .3s;
		background: rgba(46, 52, 58,1);
         min-height: 100vh;
	}

	



	header #menu-principal .submenu.mostrar-submenu, 
	header #menu-principal .menu li > .submenu > li > .sub-submenu.mostrar-sub-submenu
	{
		left: 0;
	}


	header #menu-principal  .submenu > li{
		position: static;
	}

	header #menu-principal .menu li > .submenu > li > .sub-submenu {
    	z-index: 9999;
    	position: absolute;
    	top: 0;
		left: -100%;
    }
	
	header #menu-principal .submenu > li a, 
	header #menu-principal .menu li > .submenu > li > .sub-submenu a{
		color:#fff;
		font-size: 13px;
		padding: 10px 10px 10px 40px;
		border-bottom: 1px solid rgba(255,255,255,.2);
		text-align: left
	}
    
    header #menu-principal .submenu > li > a:hover, 
header #menu-principal .sub-submenu > li > a:hover,
header #menu-principal .sub-submenu-2 > li > a:hover{
   border-bottom: 1px solid rgba(255,255,255,.2);
}

	
	header #menu-principal .sub-submenu-2 {
    position: static;
    left:0;
    z-index: 99999;
    background:#111;
    width: 100%;
    visibility: visible;
    opacity: 1;
    transition: all .3s;
    transform: translateY(0px);
    box-shadow: 0 0 1px 1px rgba(0,0,0,.15);
  }
	
	


}


@media screen and (max-width:585px) {
	.titulo-section h1.titulo
{text-align: center;
    font-size: 32px;
 }
	
	.titulo-section.lin-negro > hr.lin-arriba,
.titulo-section.lin-negro > hr.lin-abajo{
    width: 100px;
    height: 1px;
}
	
	.titulo-section.lin-blanco > hr.lin-arriba,
.titulo-section.lin-blanco > hr.lin-abajo{
    width: 100px;
    height: 1px;
}
    
    #destacado .pregunta{
        margin-bottom: 20px
    }
    
    #destacado .pregunta > h3{
        font-size: 20px;
    }
    
   

}

@media screen and (max-width:576px) {
     #contacto .col-contac .formulario .input-group{
        padding-right:0;
        margin-bottom: 20px
    }
    
    #contacto .col-contac .formulario .input-group:nth-child(3){
        margin-top:0px;
    }

    .productos-descripcion .descrp-pro .descrp-pro-item{
        padding: 20px;
    }
    
    .productos-descripcion .btn-catalogo{
        margin: 25px 0;
    }
    
    .razones > li > i {
        margin-right: 12px;
        border-radius: 50%;
        padding: 7px;
        color: #E86343;
        background: #f4f4f4;
        font-size: 13px;
    }
    
    .productos-descripcion{
        padding: 15px
    }
    
    .subtitulo{
        font-size: 18px;
    }
}



@media screen and (max-width:400px) {
	.titulo-section h1.titulo
{text-align: center;
    font-size: 26px;
 }
    
    .ant-header{
        padding: 20px 0
            
    }
    
    .ant-header .brochure-redes{
        margin-top: 20px
    }
    
    
    
    .boton_arriba{
        position: fixed;
        right: 20%;
    }
}

@media screen and (max-width:950px){
    .descrp-pro-img {
        padding-right: 0px;
    }
}

@media screen and (max-width:300px){
	.titulo-section.lin-negro > hr.lin-arriba,
	.titulo-section.lin-negro > hr.lin-abajo{
    width: 70px;
    height: 1px;
}
	
	.titulo-section.lin-blanco > hr.lin-arriba,
	.titulo-section.lin-blanco > hr.lin-abajo{
    width: 70px;
    height: 1px;
}
    
    #destacado .pregunta > h3{
        font-size: 18px;
    }
}