/* especiall logo */ 
*{ box-sizing: border-box; }

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?6lixlk');
  src:  url('fonts/icomoon.eot?6lixlk#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?6lixlk') format('truetype'),
    url('fonts/icomoon.woff?6lixlk') format('woff'),
    url('fonts/icomoon.svg?6lixlk#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* portadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */

#accesorios-portada{ width: 100%;background: url(img/accesorios/portada-accesorios.jpg);
					 background-size: cover;
					 background-position: center center;
	                 position: relative;}


.accesorios-portada-titulo{ width: 100%;
						    height: 600px;
						    position: relative;
						     }


.accesorios-portada-titulo-contenido{
									width: 100%;					
									position: absolute;
									top: 75%;
									left: 50%;
									transform:translateX(-50%) translateY(-75%);
									text-align: center;
									
									 }

.accesorios-portada-titulo-contenido h1{ font-family: "renogare";
									   font-size: 50px;
									   color:#111;
									   margin: 0;
									   line-height: 50px;
									   position: relative;letter-spacing: -1px;
									   	width:360px;
									   	margin: 0 auto;
									   
									   z-index: 2
									    }
.accesorios-portada-titulo-contenido h1 img{ width: 100%;
											 max-width: 70px;
											 position: absolute;
											 top: -50px;
											 right: -20px;
											 z-index: -1 }



.accesorios-portada-titulo-contenido h2{ font-family: "mangalregular",sans-serif;
									     font-size: 24px;
									     color:#111;
									     margin: 0;
									     position: relative;
									     letter-spacing: -1px;
									     line-height: 18px;
									     z-index: 2 }



/* formaaaaaaaaaaaa */
.forma-accesorios-principal{ width: 100%;
							 position: absolute;
							 bottom: 0;
							 left: 0
	   
}

.forma-accesorios-principal-contenido{ width: 50%;
				                       float: left;}


.forma-accesorios-principal-contenido-trapecio{ width: 100%;
											    height: 0px;
											    border-right: 50px solid transparent;
											    border-left: 50px solid #fff;
											    border-bottom: 30px solid #fff; }


.forma-accesorios-principal-contenido-trapecio2{   width: 100%;
												   height: 0px;
												   border-right: 50px solid #fff;
												   border-left: 50px solid transparent;
												   border-bottom: 30px solid #fff; }









/*guiaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
#accesorios-guia{ width: 100%;
				  margin: 0px 0px 20px 0px;
				  padding: 0px 15px 0px 15px}

.accesorios-guia{ width: 100%;
				 padding: 10px 0px 10px 0px;
				 position: relative;}

.accesorios-guia ul{ padding: 0;
					margin: 0;
					display: flex;}

.accesorios-guia ul li{ list-style: none; }

.accesorios-guia ul li a{text-decoration: none;
						padding: 0px 5px 0px 5px;
						display: block;
					    font-family: "Montserrat";
					    color: #444;
					    font-size: 13px}
					    

.resaltar{ color: #222;font-weight: 600 }					    

.accesorios-guia ul li a:hover{ color: #ff0000 }




/*btnn griddddddddddd*/
.suministros-grid{  width: 60px;
					height: 30px;
					background-color: #efefef;
					border-radius: 10px;
					position: absolute;
					top: 0;
					right: 0;
					cursor: pointer;
					z-index: 6}

/*iconoo grid*/
.suministros-grid-icono{ width: 30px;
						 float: left;
						 height: 30px;
						 text-align: center;}

.suministros-grid-icono span{ font-family: 'icomoon' !important;
							  line-height: 30px;
							  color: #222}					 

/*iconoo numeroo*/
.suministros-grid-texto{ width: 30px;
						 float: left;
						 height: 30px;
						 text-align: center;
						 position: relative;
						}

.suministros-grid-texto li{ position: absolute;
	                        width: 30px;
	                        height: 30px;
	                        font-family: "Montserrat";
							font-size: 12px;
						    color: #222;
						    list-style: none;
						    background-color:#efefef;
						    padding: 7px 0px 0px 0px;
						    text-align: center;}

.suministros-grid-texto li span{ font-size: 10px;}

/*menuu gridd*/
.suministros-grid-menu{ width: 60px;
						height: 60px;
						background-color: #222;
						position: absolute;
						top: 35px;
						left: 0}

.suministros-grid-menu-btn{ width: 100%;
							height: 30px;
							text-align: center;
						    border-bottom: 1px solid#ddd;
						    color: #fff;
						    cursor: pointer;}

.suministros-grid-menu-btn:nth-child(2){border-bottom: 0px solid#ddd}

.suministros-grid-menu-btn:hover{ background-color: #ff0000;
								  color: #fff }
						    
.suministros-grid-menu-btn p{ font-family: "Montserrat";
							  font-size: 12px;
							  margin: 0;
							  line-height:30px }


/*griddd22222*/
#grid2{ display: none; }













/* accesorioooooooooooooooooooooooooooooooooooooooooooooossssssssssssssssssssssssssssssssssssssssssssss */

#accesorios{ width: 100%;
			 margin: 0px 0px 50px 0px}



/* sector111111111111111111111111111111111111111111111111111111111 contenido de botones y buscador */
.accesorios-sector1{ width: 30%;
					 float: left;
					 padding: 20px;
					 background-color: #efefef}


/*buscadorrrrrrrrrrrrrrrrr */
.accesorios-sector1-buscador{ width: 100%;
	                          position: relative;
	                          height: 60px;}




/* menuuuu verticallllllll */	
.accesorios-sector1-menu { width: 100%;font-family: "Montserrat"}

.accesorios-sector1-menu-titulo{ width: 100%;
								 background-color: #ff1111;
								 padding: 10px 0px 10px 10px;
								 margin: 5px 0px 5px 0px}

/* titulooooooooooo*/
.accesorios-sector1-menu-titulo h1{ font-size: 13px;
									color: #fff;
									margin: 0}
/*iconoooo*/
.accesorios-sector1-menu-titulo h1 span{ color: #fff;
									     font-size: 17px;
	                                     margin: 0px 0px 0px 10px }													   

/*listaaaaaaaaa*/
.accesorios-sector1-menu-lista { margin: 0;
								 padding: 0; }

.accesorios-sector1-menu-lista li { list-style: none; }

.accesorios-sector1-menu-lista h1{ font-size: 12px;
									color: #000;
									padding: 8px 0px 8px 15px;
									margin: 2px 0px 2px 0px;}

.accesorios-sector1-menu-lista li a{ display: block;
									 width: 100%;
									 padding: 8px 0px 8px 12px;
									 font-size: 13px;
									 text-decoration: none;
									 background-color:#fff;
									 color: #333;
									 border: 1px solid#efefef;
									 letter-spacing: -0.3px}

.accesorios-sector1-menu-lista li a span{ background: #ff0000;
									      padding: 3px;
									      color: #fff;
									      font-size: 12px;
									      border-radius:5px;
									      margin: 0px 0px 0px 5px}									 

.accesorios-sector1-menu-lista li a:hover{ border:1px solid#ff0000; }
















/* sectorrrrr 222222222222222222222222222222222222222222222222222222222 */
.accesorios-sector2{ width: 70%;
					 float: left;
					 padding: 0px 20px 0px 20px;}

/*titulooooooooooooooo*/
.accesorios-sector2-titulo{ width: 100%;
							padding:10px 0px 0px 0px;
							border-bottom: 2px solid#ff0000;
							margin: 80px 0px 20px 0px}

.accesorios-sector2-titulo:nth-child(1){margin: 10px 0px 20px 0px}							

.accesorios-sector2-titulo h1{ font-family: "Montserrat";
							   font-size: 16px;
							   color: #FF0000;
							   margin: 0; }

/*wrappp gridddddddddd*/
.accesorios-sector2-grid{ display: grid;
						  grid-gap: 20px;
						  grid-template-columns: repeat(4,1fr)}


.accesorios-sector2-grid a{ display: block;
							text-decoration: none;
							text-align: center;}

.accesorios-sector2-grid a img{ width: 100%;
								 max-width: 200px}

.accesorios-sector2-grid a h1{  font-family: "Montserrat";
								font-size: 13px;
								color: #222;
								margin: 0;
								padding: 10px 0px 0px 0px}

.accesorios-sector2-grid a h2{  font-family: "Montserrat";
								font-size: 13px;
								color: #555;
								margin: 0;
								padding: 0px 0px 10px 0px}

.accesorios-sector2-grid a:hover{ background-color: #f3f3f3 }