/*
  Controlador de rolls 
  Lo Items incluidos en el roll deben estar en skin.css
  
*/
.cls_roll{
  padding:0;margin:0;position: relative;
 	width: 90vw; float: left; display:block;
  margin-left:5%; height:30rem;
  margin-top:4rem!important;
  & *{padding:0; margin:0;}

  .roll_mov{
    position:absolute; width:auto;top: 40%;	height: 4vh;z-index: 2;color:var(--btn_bk);
    & i{font-size: 45px!important; cursor:pointer; opacity:0.5;}
  }
  .to_left{left: -45px;}
  .to_right{right: -45px;}
  .roll_scroll{
    position: relative; overflow: hidden; z-index: 1; padding:0rem;margin:0;
    display:flex; width: auto; flex-wrap: nowrap;
    height:25rem;
  }
  .roll_nav{
    position: absolute; bottom: 0vh; 
    width: 100%;
    display: flex; justify-content: center; cursor: pointer;
    list-style: none;
    & i{font-size: 18px!important; color:var(--btn_bk); padding-right:5px; opacity:0.5; scale:0.7;}
    & i:hover{scale:1;}
  }

}
.rolls{
  position: relative; overflow: hidden; z-index: 1; 
  width: 100%;  height:25rem;
  overflow: visible; display:flex;
  white-space: nowrap; float:left;
  object-fit:cover;
}

._load{animation: loading 1s linear infinite alternate;}


/* ESTO SE REPITE EN HOME y es elque manda
.cls_roll section{

  width:100%; height:2rem; position:relative; background-color:#000;
  border-bottom:2px solid  rgb(154 154 154);
}
.cls_roll section label{
  display:inline-block; width:15%; height:2rem; float:left;background: rgb(154 154 154);
  padding:7px; text-align:center;
}
.cls_roll section .roll_sub{
  display:inline-flex; justify-content:space-around;  align-items:center; 
  width:20%; height:2rem; float:right;
  font-size:0.8rem;
}
*/
@keyframes loading {
  /*
  0% { background: radial-gradient(90.07% 90.07% at 22.04% 7.13%, #62636D 0%, #181A1E 100%);}
  100% {background: radial-gradient(90.07% 90.07% at 22.04% 7.13%, #181A1E 0%, #62636D 100%);}
  */
  0% { background: #62636D;}
  100% {  background: #181A1E;}
}