:root {
    --clr-selected: rgba(0, 0, 0, 1);
    --clr-unselected: rgba(0, 0, 0, 0.4);
  
    --numSlides: 10;
  /*
    El tiempo de cada slide es de 7.8s
    El tiempo total es de 7800ms por el número de slides
  */
    --totalTime: calc( var(--numSlides) * 7.8s );
  
    --spin: rotateY(70deg);
    --unspin: rotateY(-70deg);
  
    --porcentaje: calc( 100% / var(--numSlides) );
  
    /* 100% / 9 = 11.111 */
  
  
    --pos-10: -60vw;
    --pos-9: -57vw;
    --pos-8: -54vw;
    --pos-7: -51vw;
    --pos-6: -48vw;
    --pos-5: -45vw;
    --pos-4: -42vw;
    --pos-3: -39vw;
    --pos-2: -35vw;
    --pos-1: -30vw;;
    --pos-0: 0;
    --pos1: 30vw;
    --pos2: 35vw;
    --pos3: 39vw;
    --pos4: 42vw;
    --pos5: 45vw;
    --pos6: 48vw;
    --pos7: 51vw;
    --pos8: 54vw;
    --pos9: 57vw;
    --pos10: 60vw;
  }
  
  *, *:after, *:before{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html, body {
    width: 100%;
    height: 100%;
  }
  .header{
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  .carousel{
    height: 100%;
    pointer-events: none;
    position: absolute;
    width: 100%;
  }
  .cr_ancla{
    display: none;
  }
  
  /* ------ Indicadores ------ */
  .cr_indicadores{
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    pointer-events: auto;
    position: absolute;
    right: 0;
  }
  .cr_indicadores .raya{
    background-color: var(--clr-unselected);
    border-radius: 50%;
    cursor: pointer;
    height: 0.8em;
    margin: 0 0.3em;
    transition: background-color 300ms ease;
    width: 0.8em;
    z-index: 20;
  }
  
  /* @keyframes tiempos_Para_9_Slides {
    0%
    10%
  
    12%
    21%
  
    23%
    32%
  
    34%
    43‬%
  
    45%
    54‬%
  
    56%
    65‬%
  
    67%
    76‬%
  
    78%
    87%
  
    89%
    99‬%
  
    100%
  }
  */
  
  
  @keyframes indica0 {
    0%, 87%{ background-color: var(--clr-unselected) }
  
    89%, 98% { background-color: var(--clr-selected) }
  
    100% { background-color: var(--clr-unselected) }
  }
  .carousel > #cr_play:checked ~ .cr_indicadores > .raya.num0 {
    animation-name: indica0;
    animation-duration: var(--totalTime);
    animation-iteration-count: infinite;
  }
  
  
  @keyframes indica1 {
    0%, 10% { background-color: var(--clr-selected); }
  
    12%, 98% { background-color: var(--clr-unselected); }
  
    100%    { background-color: var(--clr-selected); }
  }
  .carousel > #cr_play:checked ~ .cr_indicadores > .raya.num1 {
    animation-name: indica1;
    animation-duration: var(--totalTime);
    animation-iteration-count: infinite;
  }
  
  
  @keyframes indica2 {
    0%        { background-color: var(--clr-unselected); }
    10%  { background-color: var(--clr-unselected); }
  
    12%  { background-color: var(--clr-selected); }
    21%  { background-color: var(--clr-selected); }
  
    23%  { background-color: var(--clr-unselected); }
    100%      { background-color: var(--clr-unselected); }
  }
  .carousel > #cr_play:checked ~ .cr_indicadores > .raya.num2 {
    animation-name: indica2;
    animation-duration: var(--totalTime);
    animation-iteration-count: infinite;
  }
  
  
  @keyframes indica3 {
    0%        { background-color: var(--clr-unselected); }
    21%  { background-color: var(--clr-unselected); }
  
    23%  { background-color: var(--clr-selected); }
    32%  { background-color: var(--clr-selected); }
  
    34%  { background-color: var(--clr-unselected); }
    100%      { background-color: var(--clr-unselected); }
  }
  .carousel > #cr_play:checked ~ .cr_indicadores > .raya.num3 {
    animation-name: indica3;
    animation-duration: var(--totalTime);
    animation-iteration-count: infinite;
  }
  
  
  @keyframes indica4 {
    0%        { background-color: var(--clr-unselected); }
    32%  { background-color: var(--clr-unselected); }
  
    34%  { background-color: var(--clr-selected); }
    43% { background-color: var(--clr-selected); }
  
    45%  { background-color: var(--clr-unselected); }
    100%      { background-color: var(--clr-unselected); }
  }
  .carousel > #cr_play:checked ~ .cr_indicadores > .raya.num4 {
    animation-name: indica4;
    animation-duration: var(--totalTime);
    animation-iteration-count: infinite;
  }
  
  
  @keyframes indica5 {
    0%        { background-color: var(--clr-unselected); }
    43% { background-color: var(--clr-unselected); }
  
    45%  { background-color: var(--clr-selected); }
    54% { background-color: var(--clr-selected); }
  
    56%  { background-color: var(--clr-unselected); }
    100%      { background-color: var(--clr-unselected); }
  
  }
  .carousel > #cr_play:checked ~ .cr_indicadores > .raya.num5 {
    animation-name: indica5;
    animation-duration: var(--totalTime);
    animation-iteration-count: infinite;
  }
  
  
  
  @keyframes indica6 {
    0%        { background-color: var(--clr-unselected); }
    54% { background-color: var(--clr-unselected); }
  
    56%  { background-color: var(--clr-selected); }
    65% { background-color: var(--clr-selected); }
  
    67%  { background-color: var(--clr-unselected); }
    100%      { background-color: var(--clr-unselected); }
  }
  .carousel > #cr_play:checked ~ .cr_indicadores > .raya.num6 {
    animation-name: indica6;
    animation-duration: var(--totalTime);
    animation-iteration-count: infinite;
  }
  
  
  
  @keyframes indica7 {
    0%        { background-color: var(--clr-unselected); }
    65% { background-color: var(--clr-unselected); }
  
    67%  { background-color: var(--clr-selected); }
    76% { background-color: var(--clr-selected); }
  
    78%  { background-color: var(--clr-unselected); }
    100%      { background-color: var(--clr-unselected); }
  }
  .carousel > #cr_play:checked ~ .cr_indicadores > .raya.num7 {
    animation-name: indica7;
    animation-duration: var(--totalTime);
    animation-iteration-count: infinite;
  }
  
  
  
  
  @keyframes indica8 {
    0%  { background-color: var(--clr-unselected); }
    76% { background-color: var(--clr-unselected); }
  
    78%  { background-color: var(--clr-selected); }
    87%  { background-color: var(--clr-selected); }
  
    89%  { background-color: var(--clr-unselected); }
    100% { background-color: var(--clr-unselected); }
  }
  .carousel > #cr_play:checked ~ .cr_indicadores > .raya.num8 {
    animation-name: indica8;
    animation-duration: var(--totalTime);
    animation-iteration-count: infinite;
  }


  @keyframes indica9 {
    0%  { background-color: var(--clr-unselected); }
    87% { background-color: var(--clr-unselected); }
  
    89%  { background-color: var(--clr-selected); }
    98%  { background-color: var(--clr-selected); }
  
    99%  { background-color: var(--clr-unselected); }
    100% { background-color: var(--clr-unselected); }
  }
  .carousel > #cr_play:checked ~ .cr_indicadores > .raya.num9 {
    animation-name: indica9;
    animation-duration: var(--totalTime);
    animation-iteration-count: infinite;
  }
  
  
  .carousel > #cr_item_0:checked ~ .cr_indicadores > .raya.num0,
  .carousel > #cr_pause_0:checked ~ .cr_indicadores > .raya.num0,
  .carousel > #cr_item_1:checked ~ .cr_indicadores > .raya.num1,
  .carousel > #cr_pause_1:checked ~ .cr_indicadores > .raya.num1,
  .carousel > #cr_item_2:checked ~ .cr_indicadores > .raya.num2,
  .carousel > #cr_pause_2:checked ~ .cr_indicadores > .raya.num2,
  .carousel > #cr_item_3:checked ~ .cr_indicadores > .raya.num3,
  .carousel > #cr_pause_3:checked ~ .cr_indicadores > .raya.num3,
  .carousel > #cr_item_4:checked ~ .cr_indicadores > .raya.num4,
  .carousel > #cr_pause_4:checked ~ .cr_indicadores > .raya.num4,
  .carousel > #cr_item_5:checked ~ .cr_indicadores > .raya.num5,
  .carousel > #cr_pause_5:checked ~ .cr_indicadores > .raya.num5,
  .carousel > #cr_item_6:checked ~ .cr_indicadores > .raya.num6,
  .carousel > #cr_pause_6:checked ~ .cr_indicadores > .raya.num6,
  .carousel > #cr_item_7:checked ~ .cr_indicadores > .raya.num7,
  .carousel > #cr_pause_7:checked ~ .cr_indicadores > .raya.num7,
  .carousel > #cr_item_8:checked ~ .cr_indicadores > .raya.num8,
  .carousel > #cr_pause_8:checked ~ .cr_indicadores > .raya.num8,
  .carousel > #cr_item_9:checked ~ .cr_indicadores > .raya.num9,
  .carousel > #cr_pause_9:checked ~ .cr_indicadores > .raya.num9{
    background-color: var(--clr-selected);
  }
  
  /* ------ /Indicadores ------ */
  
  
  
  
  
  /* ------ Slides ------ */
  
  ul{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    perspective: 100em;
    transform-style: preserve-3d;
  }
  .cr_item{
    position: absolute;
    width: 50%;
    backface-visibility: visible;
    /* background: lightgrey; */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
    pointer-events: auto;
  }
  .item{
    width: 100%;
    height: 100%;
  }
  .item .item_tit{
    color: white;
    width: 90%;
    font-family: 'Fira Sans Extra Condensed', sans-serif;
    font-size: 0;
    letter-spacing: 0.0625em;
    opacity: 0;
    text-transform: uppercase;
    text-align: left;
    transition: opacity 200ms ease, font-size 50ms ease;
  }
  .item .item_desc{
    position: absolute;
    background-color: #222045;
    bottom: 0;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 1%;
    box-sizing: border-box;
    opacity: 0.5;
    padding: 0 3vw;
    font-family: 'Exo 2', sans-serif;
    text-decoration: none;
    transition: all 300ms ease;
  }
  .item .item_desc p{
    font-size: 0;
    font-weight: 200;
    opacity: 0;
    transition: all 200ms ease;
  }
  .item img{
    width: 100%;
    height: 100%;
  }
  .item:hover .item_desc{
    background-color: rgba(0, 0, 0, 0.7);
    height: 25%;
    padding: 2vh 3vw;
    opacity: 1;
  }
  .item:hover .item_tit{
    font-size: 1.5em;
    opacity: 1;
  }
  .item:hover .item_desc p{
    opacity: 1;
    font-size: 0.9em;
  }
  
  
  /* ------ Animación ------ */
  
  @keyframes paseo {
    0%   { transform: translate3d(-30vw, 0, -420px) var(--spin)}
    10%  { transform: translate3d(-30vw, 0, -420px) var(--spin)}
  
    12%  { transform: translate3d(-35vw, 0, -480px) var(--spin)}
    21%  { transform: translate3d(-35vw, 0, -480px) var(--spin)}
  
    23%  { transform: translate3d(-39vw, 0, -540px) var(--spin)}
    32%  { transform: translate3d(-39vw, 0, -540px) var(--spin)}
  
    34%  { transform: translate3d(-42vw, 0, -600px) var(--spin)}
    43%  { transform: translate3d(-42vw, 0, -600px) var(--spin)}
  
    45%  { transform: translate3d(-45vw, 0, -660px) var(--spin)}
    54%  { transform: translate3d(-45vw, 0, -660px) var(--spin)}
  
    56%  { transform: translate3d(-48vw, 0, -720px) var(--spin)}
    65%  { transform: translate3d(-48vw, 0, -720px) var(--spin)}
  
    67%  { transform: translate3d(-51vw, 0, -750px) var(--spin)}
    76%  { transform: translate3d(-51vw, 0, -750px) var(--spin)}
  
    78%  { transform: translate3d(-54vw, 0, -780px) var(--spin)}
    87%  { transform: translate3d(-54vw, 0, -780px) var(--spin)}
  
    89%  { transform: translate3d(0, 0, 10px)}
    98%  { transform: translate3d(0, 0, 10px)}
  
    100% { transform: translate3d(-30vw, 0, -420px) var(--spin)}
  }
  .carousel > #cr_play:checked ~ ul > .slide.num0 {
    animation: paseo var(--totalTime) infinite ease-in-out;
    transition: transform 1000ms ease-in-out;
  }
  
  @keyframes paseo1 {
    0%     { transform: translate3d(0, 0, 10px)}
    10%    { transform: translate3d(0, 0, 10px)}
  
    12%    { transform: translate3d(-30vw, 0, -420px) var(--spin)}
    21%    { transform: translate3d(-30vw, 0, -420px) var(--spin)}
  
    23%    { transform: translate3d(-35vw, 0, -480px) var(--spin)}
    32%    { transform: translate3d(-35vw, 0, -480px) var(--spin)}
  
    34%    { transform: translate3d(-39vw, 0, -540px) var(--spin)}
    43%    { transform: translate3d(-39vw, 0, -540px) var(--spin)}
  
    45%    { transform: translate3d(-42vw, 0, -600px) var(--spin)}
    54%    { transform: translate3d(-42vw, 0, -600px) var(--spin)}
  
    56%    { transform: translate3d(-45vw, 0, -660px) var(--spin)}
    65%    { transform: translate3d(-45vw, 0, -660px) var(--spin)}
  
    67%    { transform: translate3d(-48vw, 0, -720px) var(--spin)}
    76%    { transform: translate3d(-48vw, 0, -720px) var(--spin)}
  
    78%    { transform: translate3d(-51vw, 0, -750px) var(--spin)}
    87%    { transform: translate3d(-51vw, 0, -750px) var(--spin)}
  
    89%    { transform: translate3d(30vw, 0, -420px) var(--unspin)}
    98%    { transform: translate3d(30vw, 0, -420px) var(--unspin)}
  
    100%   { transform: translate3d(0, 0, 10px)}
  }
  
  .carousel > #cr_play:checked ~ ul > .slide.num1 {
    animation: paseo1 var(--totalTime) infinite ease-in-out;
    transition: transform 1000ms ease-in-out;
  }
  
  @keyframes paseo2 {
    0%          { transform: translate3d(30vw, 0, -420px) var(--unspin)}
    10%     { transform: translate3d(30vw, 0, -420px) var(--unspin)}
  
    12%    { transform: translate3d(0, 0, 10px)}
    21%    { transform: translate3d(0, 0, 10px)}
  
    23%    { transform: translate3d(-30vw, 0, -420px) var(--spin)}
    32%    { transform: translate3d(-30vw, 0, -420px) var(--spin)}
  
    34%    { transform: translate3d(-35vw, 0, -480px) var(--spin)}
    43%    { transform: translate3d(-35vw, 0, -480px) var(--spin)}
  
    45%    { transform: translate3d(-39vw, 0, -540px) var(--spin)}
    54%    { transform: translate3d(-39vw, 0, -540px) var(--spin)}
  
    56%    { transform: translate3d(-42vw, 0, -600px) var(--spin)}
    65%    { transform: translate3d(-42vw, 0, -600px) var(--spin)}
  
    67%    { transform: translate3d(-45vw, 0, -660px) var(--spin)}
    76%    { transform: translate3d(-45vw, 0, -660px) var(--spin)}
  
    78%    { transform: translate3d(-48vw, 0, -720px) var(--spin)}
    87%    { transform: translate3d(-48vw, 0, -720px) var(--spin)}
  
    89%    { transform: translate3d(35vw, 0, -480px) var(--unspin)}
    98%    { transform: translate3d(35vw, 0, -480px) var(--unspin)}
  
    100%        { transform: translate3d(30vw, 0, -420px) var(--unspin)}
  }
  
  .carousel > #cr_play:checked ~ ul > .slide.num2 {
    animation: paseo2 var(--totalTime) infinite ease-in-out;
    transition: transform 1000ms ease-in-out;
  }
  
  @keyframes paseo3 {
    0%          { transform: translate3d(35vw, 0, -480px) var(--unspin)}
    10%     { transform: translate3d(35vw, 0, -480px) var(--unspin)}
  
    12%    { transform: translate3d(30vw, 0, -420px) var(--unspin)}
    21%    { transform: translate3d(30vw, 0, -420px) var(--unspin)}
  
    23%    { transform: translate3d(0, 0, 10px)}
    32%    { transform: translate3d(0, 0, 10px)}
  
    34%    { transform: translate3d(-30vw, 0, -420px) var(--spin)}
    43%    { transform: translate3d(-30vw, 0, -420px) var(--spin)}
  
    45%    { transform: translate3d(-35vw, 0, -480px) var(--spin)}
    54%    { transform: translate3d(-35vw, 0, -480px) var(--spin)}
  
    56%    { transform: translate3d(-39vw, 0, -540px) var(--spin)}
    65%    { transform: translate3d(-39vw, 0, -540px) var(--spin)}
  
    67%    { transform: translate3d(-42vw, 0, -600px) var(--spin)}
    76%    { transform: translate3d(-42vw, 0, -600px) var(--spin)}
  
    78%    { transform: translate3d(-45vw, 0, -660px) var(--spin)}
    87%    { transform: translate3d(-45vw, 0, -660px) var(--spin)}
  
    89%    { transform: translate3d(39vw, 0, -540px) var(--unspin)}
    98%    { transform: translate3d(39vw, 0, -540px) var(--unspin)}
  
    100%        { transform: translate3d(35vw, 0, -480px) var(--unspin)}
  }
  
  .carousel > #cr_play:checked ~ ul > .slide.num3 {
    animation: paseo3 var(--totalTime) infinite ease-in-out;
    transition: transform 1000ms ease-in-out;
  }
  
  @keyframes paseo4 {
    0%          { transform: translate3d(39vw, 0, -540px) var(--unspin)}
    10%     { transform: translate3d(39vw, 0, -540px) var(--unspin)}
  
    12%    { transform: translate3d(35vw, 0, -480px) var(--unspin)}
    21%    { transform: translate3d(35vw, 0, -480px) var(--unspin)}
  
    23%    { transform: translate3d(30vw, 0, -420px) var(--unspin)}
    32%    { transform: translate3d(30vw, 0, -420px) var(--unspin)}
  
    34%    { transform: translate3d(0, 0, 10px)}
    43%    { transform: translate3d(0, 0, 10px)}
  
    45%    { transform: translate3d(-30vw, 0, -420px) var(--spin)}
    54%    { transform: translate3d(-30vw, 0, -420px) var(--spin)}
  
    56%    { transform: translate3d(-35vw, 0, -480px) var(--spin)}
    65%    { transform: translate3d(-35vw, 0, -480px) var(--spin)}
  
    67%    { transform: translate3d(-39vw, 0, -540px) var(--spin)}
    76%    { transform: translate3d(-39vw, 0, -540px) var(--spin)}
  
    78%    { transform: translate3d(-42vw, 0, -600px) var(--spin)}
    87%    { transform: translate3d(-42vw, 0, -600px) var(--spin)}
  
    89%    { transform: translate3d(42vw, 0, -600px) var(--unspin)}
    98%    { transform: translate3d(42vw, 0, -600px) var(--unspin)}
  
    100%        { transform: translate3d(39vw, 0, -540px) var(--unspin)}
  }
  
  .carousel > #cr_play:checked ~ ul > .slide.num4 {
    animation: paseo4 var(--totalTime) infinite ease-in-out;
    transition: transform 1000ms ease-in-out;
  }
  
  @keyframes paseo5 {
    0%      { transform: translate3d(42vw, 0, -600px) var(--unspin)}
    10%     { transform: translate3d(42vw, 0, -600px) var(--unspin)}
  
    12%    { transform: translate3d(39vw, 0, -540px) var(--unspin)}
    21%    { transform: translate3d(39vw, 0, -540px) var(--unspin)}
  
    23%    { transform: translate3d(35vw, 0, -480px) var(--unspin)}
    32%    { transform: translate3d(35vw, 0, -480px) var(--unspin)}
  
    34%    { transform: translate3d(30vw, 0, -420px) var(--unspin)}
    43%    { transform: translate3d(30vw, 0, -420px) var(--unspin)}
  
    45%    { transform: translate3d(0, 0, 10px)}
    54%    { transform: translate3d(0, 0, 10px)}
  
    56%    { transform: translate3d(-30vw, 0, -420px) var(--spin)}
    65%    { transform: translate3d(-30vw, 0, -420px) var(--spin)}
  
    67%    { transform: translate3d(-35vw, 0, -480px) var(--spin)}
    76%    { transform: translate3d(-35vw, 0, -480px) var(--spin)}
  
    78%    { transform: translate3d(-39vw, 0, -540px) var(--spin)}
    87%    { transform: translate3d(-39vw, 0, -540px) var(--spin)}
  
    89%    { transform: translate3d(45vw, 0, -660px) var(--unspin)}
    98%    { transform: translate3d(45vw, 0, -660px) var(--unspin)}
  
    100%        { transform: translate3d(42vw, 0, -600px) var(--unspin)}
  }
  
  .carousel > #cr_play:checked ~ ul > .slide.num5 {
    animation: paseo5 var(--totalTime) infinite ease-in-out;
    transition: transform 1000ms ease-in-out;
  }
  
  @keyframes paseo6 {
    0%          { transform: translate3d(45vw, 0, -660px) var(--unspin)}
    10%     { transform: translate3d(45vw, 0, -660px) var(--unspin)}
  
    12%    { transform: translate3d(42vw, 0, -600px) var(--unspin)}
    21%    { transform: translate3d(42vw, 0, -600px) var(--unspin)}
  
    23%    { transform: translate3d(39vw, 0, -540px) var(--unspin)}
    32%    { transform: translate3d(39vw, 0, -540px) var(--unspin)}
  
    34%    { transform: translate3d(35vw, 0, -480px) var(--unspin)}
    43%    { transform: translate3d(35vw, 0, -480px) var(--unspin)}
  
    45%    { transform: translate3d(30vw, 0, -420px) var(--unspin)}
    54%    { transform: translate3d(30vw, 0, -420px) var(--unspin)}
  
    56%    { transform: translate3d(0, 0, 10px)}
    65%    { transform: translate3d(0, 0, 10px)}
  
    67%    { transform: translate3d(-30vw, 0, -420px) var(--spin)}
    76%    { transform: translate3d(-30vw, 0, -420px) var(--spin)}
  
    78%    { transform: translate3d(-35vw, 0, -480px) var(--spin)}
    87%    { transform: translate3d(-35vw, 0, -480px) var(--spin)}
  
    89%    { transform: translate3d(48vw, 0, -720px) var(--unspin)}
    98%    { transform: translate3d(48vw, 0, -720px) var(--unspin)}
  
    100%        { transform: translate3d(45vw, 0, -660px) var(--unspin)}
  }
  
  .carousel > #cr_play:checked ~ ul > .slide.num6 {
    animation: paseo6 var(--totalTime) infinite ease-in-out;
    transition: transform 1000ms ease-in-out;
  }
  
  @keyframes paseo7 {
    0%        { transform: translate3d(48vw, 0, -720px) var(--unspin)}
    10%   { transform: translate3d(48vw, 0, -720px) var(--unspin)}
  
    12%  { transform: translate3d(45vw, 0, -660px) var(--unspin)}
    21%  { transform: translate3d(45vw, 0, -660px) var(--unspin)}
  
    23%  { transform: translate3d(42vw, 0, -600px) var(--unspin)}
    32%  { transform: translate3d(42vw, 0, -600px) var(--unspin)}
  
    34%  { transform: translate3d(39vw, 0, -540px) var(--unspin)}
    43%  { transform: translate3d(39vw, 0, -540px) var(--unspin)}
  
    45%  { transform: translate3d(35vw, 0, -480px) var(--unspin)}
    54%  { transform: translate3d(35vw, 0, -480px) var(--unspin)}
  
    56%  { transform: translate3d(30vw, 0, -420px) var(--unspin)}
    65%  { transform: translate3d(30vw, 0, -420px) var(--unspin)}
  
    67%  { transform: translate3d(0, 0, 10px)}
    76%  { transform: translate3d(0, 0, 10px)}
  
    78%  { transform: translate3d(-30vw, 0, -420px) var(--spin)}
    87%  { transform: translate3d(-30vw, 0, -420px) var(--spin)}
  
    89%  { transform: translate3d(51vw, 0, -750px) var(--unspin)}
    98%  { transform: translate3d(51vw, 0, -750px) var(--unspin)}
  
    100%      { transform: translate3d(48vw, 0, -720px) var(--unspin)}
  }
  
  .carousel > #cr_play:checked ~ ul > .slide.num7 {
    animation: paseo7 var(--totalTime) infinite ease-in-out;
    transition: transform 1000ms ease-in-out;
  }
  
  @keyframes paseo8 {
    0%        { transform: translate3d(51vw, 0, -750px) var(--unspin)}
    10%   { transform: translate3d(51vw, 0, -750px) var(--unspin)}
  
    12%  { transform: translate3d(48vw, 0, -720px) var(--unspin)}
    21%  { transform: translate3d(48vw, 0, -720px) var(--unspin)}
  
    23%  { transform: translate3d(45vw, 0, -660px) var(--unspin)}
    32%  { transform: translate3d(45vw, 0, -660px) var(--unspin)}
  
    34%  { transform: translate3d(42vw, 0, -600px) var(--unspin)}
    43%  { transform: translate3d(42vw, 0, -600px) var(--unspin)}
  
    45%  { transform: translate3d(39vw, 0, -540px) var(--unspin)}
    54%  { transform: translate3d(39vw, 0, -540px) var(--unspin)}
  
    56%  { transform: translate3d(35vw, 0, -480px) var(--unspin)}
    65%  { transform: translate3d(35vw, 0, -480px) var(--unspin)}
  
    67%  { transform: translate3d(30vw, 0, -420px) var(--unspin)}
    76%  { transform: translate3d(30vw, 0, -420px) var(--unspin)}
  
    78%  { transform: translate3d(0, 0, 10px)}
    87%  { transform: translate3d(0, 0, 10px)}
  
    89%  { transform: translate3d(54vw, 0, -780px) var(--unspin)}
    98%  { transform: translate3d(54vw, 0, -780px) var(--unspin)}
  
    100%      { transform: translate3d(51vw, 0, -750px) var(--unspin)}
  }
  
  .carousel > #cr_play:checked ~ ul > .slide.num8 {
    animation: paseo8 var(--totalTime) infinite ease-in-out;
    transition: transform 1000ms ease-in-out;
  }

  @keyframes paseo9 {
    0%        { transform: translate3d(51vw, 0, -750px) var(--unspin)}
    10%   { transform: translate3d(51vw, 0, -750px) var(--unspin)}
  
    12%  { transform: translate3d(48vw, 0, -720px) var(--unspin)}
    21%  { transform: translate3d(48vw, 0, -720px) var(--unspin)}
  
    23%  { transform: translate3d(45vw, 0, -660px) var(--unspin)}
    32%  { transform: translate3d(45vw, 0, -660px) var(--unspin)}
  
    34%  { transform: translate3d(42vw, 0, -600px) var(--unspin)}
    43%  { transform: translate3d(42vw, 0, -600px) var(--unspin)}
  
    45%  { transform: translate3d(39vw, 0, -540px) var(--unspin)}
    54%  { transform: translate3d(39vw, 0, -540px) var(--unspin)}
  
    56%  { transform: translate3d(35vw, 0, -480px) var(--unspin)}
    65%  { transform: translate3d(35vw, 0, -480px) var(--unspin)}
  
    67%  { transform: translate3d(30vw, 0, -420px) var(--unspin)}
    76%  { transform: translate3d(30vw, 0, -420px) var(--unspin)}
  
    78%  { transform: translate3d(0, 0, 10px)}
    87%  { transform: translate3d(0, 0, 10px)}
  
    89%  { transform: translate3d(54vw, 0, -780px) var(--unspin)}
    98%  { transform: translate3d(54vw, 0, -780px) var(--unspin)}
  
    100%      { transform: translate3d(51vw, 0, -750px) var(--unspin)}
  }
  
  .carousel > #cr_play:checked ~ ul > .slide.num9 {
    animation: paseo9 var(--totalTime) infinite ease-in-out;
    transition: transform 1000ms ease-in-out;
  }
  
  
  
  
  
  
  .carousel > #cr_item_0:checked ~ ul > .slide.num0,
  .carousel > #cr_pause_0:checked ~ ul > .slide.num0,
  .carousel > #cr_item_1:checked ~ ul > .slide.num1,
  .carousel > #cr_pause_1:checked ~ ul > .slide.num1,
  .carousel > #cr_item_2:checked ~ ul > .slide.num2,
  .carousel > #cr_pause_2:checked ~ ul > .slide.num2,
  .carousel > #cr_item_3:checked ~ ul > .slide.num3,
  .carousel > #cr_pause_3:checked ~ ul > .slide.num3,
  .carousel > #cr_item_4:checked ~ ul > .slide.num4,
  .carousel > #cr_pause_4:checked ~ ul > .slide.num4,
  .carousel > #cr_item_5:checked ~ ul > .slide.num5,
  .carousel > #cr_pause_5:checked ~ ul > .slide.num5,
  .carousel > #cr_item_6:checked ~ ul > .slide.num6,
  .carousel > #cr_pause_6:checked ~ ul > .slide.num6,
  .carousel > #cr_item_7:checked ~ ul > .slide.num7,
  .carousel > #cr_pause_7:checked ~ ul > .slide.num7,
  .carousel > #cr_item_8:checked ~ ul > .slide.num8,
  .carousel > #cr_pause_8:checked ~ ul > .slide.num8,
  .carousel > #cr_item_9:checked ~ ul > .slide.num9,
  .carousel > #cr_pause_9:checked ~ ul > .slide.num9 {
    transform: translate3d(0, 0, 10px);
    transition: transform 1000ms ease-in-out;
    z-index: 15;
  }
  
  
  
  
  
  .carousel > #cr_item_0:checked ~ ul > .slide.num1,
  .carousel > #cr_pause_0:checked ~ ul > .slide.num1{
    transform: translate3d(30vw, 0, -420px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_0:checked ~ ul > .slide.num2,
  .carousel > #cr_pause_0:checked ~ ul > .slide.num2{
    transform: translate3d(35vw, 0, -480px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_0:checked ~ ul > .slide.num3,
  .carousel > #cr_pause_0:checked ~ ul > .slide.num3{
    transform: translate3d(39vw, 0, -540px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_0:checked ~ ul > .slide.num4,
  .carousel > #cr_pause_0:checked ~ ul > .slide.num4{
    transform: translate3d(42vw, 0, -600px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_0:checked ~ ul > .slide.num5,
  .carousel > #cr_pause_0:checked ~ ul > .slide.num5{
    transform: translate3d(45vw, 0, -660px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_0:checked ~ ul > .slide.num6,
  .carousel > #cr_pause_0:checked ~ ul > .slide.num6{
    transform: translate3d(48vw, 0, -720px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_0:checked ~ ul > .slide.num7,
  .carousel > #cr_pause_0:checked ~ ul > .slide.num7{
    transform: translate3d(51vw, 0, -750px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_0:checked ~ ul > .slide.num8,
  .carousel > #cr_pause_0:checked ~ ul > .slide.num8{
    transform: translate3d(54vw, 0, -780px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_0:checked ~ ul > .slide.num9,
  .carousel > #cr_pause_0:checked ~ ul > .slide.num9{
    transform: translate3d(57vw, 0, -820px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  
  
  
  
  .carousel > #cr_item_1:checked ~ ul > .slide.num0,
  .carousel > #cr_pause_1:checked ~ ul > .slide.num0{
    transform: translate3d(-30vw, 0, -420px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_1:checked ~ ul > .slide.num2,
  .carousel > #cr_pause_1:checked ~ ul > .slide.num2{
    transform: translate3d(30vw, 0, -420px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_1:checked ~ ul > .slide.num3,
  .carousel > #cr_pause_1:checked ~ ul > .slide.num3{
    transform: translate3d(35vw, 0, -480px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_1:checked ~ ul > .slide.num4,
  .carousel > #cr_pause_1:checked ~ ul > .slide.num4{
    transform: translate3d(39vw, 0, -540px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_1:checked ~ ul > .slide.num5,
  .carousel > #cr_pause_1:checked ~ ul > .slide.num5{
    transform: translate3d(42vw, 0, -600px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_1:checked ~ ul > .slide.num6,
  .carousel > #cr_pause_1:checked ~ ul > .slide.num6{
    transform: translate3d(45vw, 0, -660px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_1:checked ~ ul > .slide.num7,
  .carousel > #cr_pause_1:checked ~ ul > .slide.num7{
    transform: translate3d(48vw, 0, -720px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_1:checked ~ ul > .slide.num8,
  .carousel > #cr_pause_1:checked ~ ul > .slide.num8{
    transform: translate3d(51vw, 0, -750px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_1:checked ~ ul > .slide.num9,
  .carousel > #cr_pause_1:checked ~ ul > .slide.num9{
    transform: translate3d(54vw, 0, -780px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  
  
  
  .carousel > #cr_item_2:checked ~ ul > .slide.num0,
  .carousel > #cr_pause_2:checked ~ ul > .slide.num0{
    transform: translate3d(-35vw, 0, -480px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_2:checked ~ ul > .slide.num1,
  .carousel > #cr_pause_2:checked ~ ul > .slide.num1{
    transform: translate3d(-30vw, 0, -420px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_2:checked ~ ul > .slide.num3,
  .carousel > #cr_pause_2:checked ~ ul > .slide.num3{
    transform: translate3d(30vw, 0, -420px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_2:checked ~ ul > .slide.num4,
  .carousel > #cr_pause_2:checked ~ ul > .slide.num4{
    transform: translate3d(35vw, 0, -480px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_2:checked ~ ul > .slide.num5,
  .carousel > #cr_pause_2:checked ~ ul > .slide.num5{
    transform: translate3d(39vw, 0, -540px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_2:checked ~ ul > .slide.num6,
  .carousel > #cr_pause_2:checked ~ ul > .slide.num6{
    transform: translate3d(42vw, 0, -600px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_2:checked ~ ul > .slide.num7,
  .carousel > #cr_pause_2:checked ~ ul > .slide.num7{
    transform: translate3d(45vw, 0, -660px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_2:checked ~ ul > .slide.num8,
  .carousel > #cr_pause_2:checked ~ ul > .slide.num8{
    transform: translate3d(48vw, 0, -720px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_2:checked ~ ul > .slide.num9,
  .carousel > #cr_pause_2:checked ~ ul > .slide.num9{
    transform: translate3d(51vw, 0, -780px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  
  
  
  
  .carousel > #cr_item_3:checked ~ ul > .slide.num0,
  .carousel > #cr_pause_3:checked ~ ul > .slide.num0{
    transform: translate3d(-39vw, 0, -540px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_3:checked ~ ul > .slide.num1,
  .carousel > #cr_pause_3:checked ~ ul > .slide.num1{
    transform: translate3d(-35vw, 0, -480px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_3:checked ~ ul > .slide.num2,
  .carousel > #cr_pause_3:checked ~ ul > .slide.num2{
    transform: translate3d(-30vw, 0, -420px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_3:checked ~ ul > .slide.num4,
  .carousel > #cr_pause_3:checked ~ ul > .slide.num4{
    transform: translate3d(30vw, 0, -420px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_3:checked ~ ul > .slide.num5,
  .carousel > #cr_pause_3:checked ~ ul > .slide.num5{
    transform: translate3d(35vw, 0, -480px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_3:checked ~ ul > .slide.num6,
  .carousel > #cr_pause_3:checked ~ ul > .slide.num6{
    transform: translate3d(39vw, 0, -540px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_3:checked ~ ul > .slide.num7,
  .carousel > #cr_pause_3:checked ~ ul > .slide.num7{
    transform: translate3d(42vw, 0, -600px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_3:checked ~ ul > .slide.num8,
  .carousel > #cr_pause_3:checked ~ ul > .slide.num8{
    transform: translate3d(45vw, 0, -660px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_3:checked ~ ul > .slide.num9,
  .carousel > #cr_pause_3:checked ~ ul > .slide.num9{
    transform: translate3d(48vw, 0, -720px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  
  
  
  
  .carousel > #cr_item_4:checked ~ ul > .slide.num0,
  .carousel > #cr_pause_4:checked ~ ul > .slide.num0{
    transform: translate3d(-42vw, 0, -600px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_4:checked ~ ul > .slide.num1,
  .carousel > #cr_pause_4:checked ~ ul > .slide.num1{
    transform: translate3d(-39vw, 0, -540px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_4:checked ~ ul > .slide.num2,
  .carousel > #cr_pause_4:checked ~ ul > .slide.num2{
    transform: translate3d(-35vw, 0, -480px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_4:checked ~ ul > .slide.num3,
  .carousel > #cr_pause_4:checked ~ ul > .slide.num3{
    transform: translate3d(-30vw, 0, -420px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_4:checked ~ ul > .slide.num5,
  .carousel > #cr_pause_4:checked ~ ul > .slide.num5{
    transform: translate3d(30vw, 0, -420px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_4:checked ~ ul > .slide.num6,
  .carousel > #cr_pause_4:checked ~ ul > .slide.num6{
    transform: translate3d(35vw, 0, -480px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_4:checked ~ ul > .slide.num7,
  .carousel > #cr_pause_4:checked ~ ul > .slide.num7{
    transform: translate3d(39vw, 0, -540px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_4:checked ~ ul > .slide.num8,
  .carousel > #cr_pause_4:checked ~ ul > .slide.num8{
    transform: translate3d(42vw, 0, -600px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_4:checked ~ ul > .slide.num9,
  .carousel > #cr_pause_4:checked ~ ul > .slide.num9{
    transform: translate3d(45vw, 0, -660px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  
  
  
  .carousel > #cr_item_5:checked ~ ul > .slide.num0,
  .carousel > #cr_pause_5:checked ~ ul > .slide.num0{
    transform: translate3d(-45vw, 0, -660px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_5:checked ~ ul > .slide.num1,
  .carousel > #cr_pause_5:checked ~ ul > .slide.num1{
    transform: translate3d(-42vw, 0, -600px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_5:checked ~ ul > .slide.num2,
  .carousel > #cr_pause_5:checked ~ ul > .slide.num2{
    transform: translate3d(-39vw, 0, -540px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_5:checked ~ ul > .slide.num3,
  .carousel > #cr_pause_5:checked ~ ul > .slide.num3{
    transform: translate3d(-35vw, 0, -480px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_5:checked ~ ul > .slide.num4,
  .carousel > #cr_pause_5:checked ~ ul > .slide.num4{
    transform: translate3d(-30vw, 0, -420px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_5:checked ~ ul > .slide.num6,
  .carousel > #cr_pause_5:checked ~ ul > .slide.num6{
    transform: translate3d(30vw, 0, -420px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_5:checked ~ ul > .slide.num7,
  .carousel > #cr_pause_5:checked ~ ul > .slide.num7{
    transform: translate3d(35vw, 0, -480px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_5:checked ~ ul > .slide.num8,
  .carousel > #cr_pause_5:checked ~ ul > .slide.num8{
    transform: translate3d(39vw, 0, -540px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_5:checked ~ ul > .slide.num9,
  .carousel > #cr_pause_5:checked ~ ul > .slide.num9{
    transform: translate3d(43vw, 0, -600px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  
  
  
  
  
  .carousel > #cr_item_6:checked ~ ul > .slide.num0,
  .carousel > #cr_pause_6:checked ~ ul > .slide.num0{
    transform: translate3d(-48vw, 0, -720px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_6:checked ~ ul > .slide.num1,
  .carousel > #cr_pause_6:checked ~ ul > .slide.num1{
    transform: translate3d(-45vw, 0, -660px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_6:checked ~ ul > .slide.num2,
  .carousel > #cr_pause_6:checked ~ ul > .slide.num2{
    transform: translate3d(-42vw, 0, -600px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_6:checked ~ ul > .slide.num3,
  .carousel > #cr_pause_6:checked ~ ul > .slide.num3{
    transform: translate3d(-39vw, 0, -540px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_6:checked ~ ul > .slide.num4,
  .carousel > #cr_pause_6:checked ~ ul > .slide.num4{
    transform: translate3d(-35vw, 0, -480px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_6:checked ~ ul > .slide.num5,
  .carousel > #cr_pause_6:checked ~ ul > .slide.num5{
    transform: translate3d(-30vw, 0, -420px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_6:checked ~ ul > .slide.num7,
  .carousel > #cr_pause_6:checked ~ ul > .slide.num7{
    transform: translate3d(30vw, 0, -420px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_6:checked ~ ul > .slide.num8,
  .carousel > #cr_pause_6:checked ~ ul > .slide.num8{
    transform: translate3d(35vw, 0, -480px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_6:checked ~ ul > .slide.num9,
  .carousel > #cr_pause_6:checked ~ ul > .slide.num9{
    transform: translate3d(39vw, 0, -540px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }  
  
  
  
  .carousel > #cr_item_7:checked ~ ul > .slide.num0,
  .carousel > #cr_pause_7:checked ~ ul > .slide.num0{
    transform: translate3d(-51vw, 0, -750px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_7:checked ~ ul > .slide.num1,
  .carousel > #cr_pause_7:checked ~ ul > .slide.num1{
    transform: translate3d(-48vw, 0, -720px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_7:checked ~ ul > .slide.num2,
  .carousel > #cr_pause_7:checked ~ ul > .slide.num2{
    transform: translate3d(-45vw, 0, -660px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_7:checked ~ ul > .slide.num3,
  .carousel > #cr_pause_7:checked ~ ul > .slide.num3{
    transform: translate3d(-42vw, 0, -600px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_7:checked ~ ul > .slide.num4,
  .carousel > #cr_pause_7:checked ~ ul > .slide.num4{
    transform: translate3d(-39vw, 0, -540px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_7:checked ~ ul > .slide.num5,
  .carousel > #cr_pause_7:checked ~ ul > .slide.num5{
    transform: translate3d(-35vw, 0, -480px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_7:checked ~ ul > .slide.num6,
  .carousel > #cr_pause_7:checked ~ ul > .slide.num6{
    transform: translate3d(-30vw, 0, -420px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_7:checked ~ ul > .slide.num8,
  .carousel > #cr_pause_7:checked ~ ul > .slide.num8{
    transform: translate3d(30vw, 0, -420px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_7:checked ~ ul > .slide.num9,
  .carousel > #cr_pause_7:checked ~ ul > .slide.num9{
    transform: translate3d(39vw, 0, -480px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }
  
  
  
  
  .carousel > #cr_item_8:checked ~ ul > .slide.num0,
  .carousel > #cr_pause_8:checked ~ ul > .slide.num0{
    transform: translate3d(-54vw, 0, -780px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_8:checked ~ ul > .slide.num1,
  .carousel > #cr_pause_8:checked ~ ul > .slide.num1{
    transform: translate3d(-51vw, 0, -750px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_8:checked ~ ul > .slide.num2,
  .carousel > #cr_pause_8:checked ~ ul > .slide.num2{
    transform: translate3d(-48vw, 0, -720px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_8:checked ~ ul > .slide.num3,
  .carousel > #cr_pause_8:checked ~ ul > .slide.num3{
    transform: translate3d(-45vw, 0, -660px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_8:checked ~ ul > .slide.num4,
  .carousel > #cr_pause_8:checked ~ ul > .slide.num4{
    transform: translate3d(-42vw, 0, -600px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_8:checked ~ ul > .slide.num5,
  .carousel > #cr_pause_8:checked ~ ul > .slide.num5{
    transform: translate3d(-39vw, 0, -540px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_8:checked ~ ul > .slide.num6,
  .carousel > #cr_pause_8:checked ~ ul > .slide.num6{
    transform: translate3d(-35vw, 0, -480px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_8:checked ~ ul > .slide.num7,
  .carousel > #cr_pause_8:checked ~ ul > .slide.num7{
    transform: translate3d(-30vw, 0, -420px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_8:checked ~ ul > .slide.num9,
  .carousel > #cr_pause_8:checked ~ ul > .slide.num9{
    transform: translate3d(35vw, 0, -480px) var(--unspin);
    transition: transform 1000ms ease-in-out;
  }




  .carousel > #cr_item_9:checked ~ ul > .slide.num0,
  .carousel > #cr_pause_9:checked ~ ul > .slide.num0{
    transform: translate3d(-54vw, 0, -780px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_9:checked ~ ul > .slide.num1,
  .carousel > #cr_pause_9:checked ~ ul > .slide.num1{
    transform: translate3d(-51vw, 0, -750px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_9:checked ~ ul > .slide.num2,
  .carousel > #cr_pause_9:checked ~ ul > .slide.num2{
    transform: translate3d(-48vw, 0, -720px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_9:checked ~ ul > .slide.num3,
  .carousel > #cr_pause_9:checked ~ ul > .slide.num3{
    transform: translate3d(-45vw, 0, -660px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_9:checked ~ ul > .slide.num4,
  .carousel > #cr_pause_9:checked ~ ul > .slide.num4{
    transform: translate3d(-42vw, 0, -600px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_9:checked ~ ul > .slide.num5,
  .carousel > #cr_pause_9:checked ~ ul > .slide.num5{
    transform: translate3d(-39vw, 0, -540px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_9:checked ~ ul > .slide.num6,
  .carousel > #cr_pause_9:checked ~ ul > .slide.num6{
    transform: translate3d(-35vw, 0, -480px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_9:checked ~ ul > .slide.num7,
  .carousel > #cr_pause_9:checked ~ ul > .slide.num7{
    transform: translate3d(-30vw, 0, -420px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  .carousel > #cr_item_9:checked ~ ul > .slide.num8,
  .carousel > #cr_pause_9:checked ~ ul > .slide.num8{
    transform: translate3d(-27vw, 0, -420px) var(--spin);
    transition: transform 1000ms ease-in-out;
  }
  
  /* ------ /Animación ------ */
  
  
  
  
  
  @media screen and (min-width: 1500px){
    .item:hover .item_tit{
    font-size: 2em;
    }
    .item:hover .item_desc p{
      font-size: 1.1em;
    }
  }
  @media screen and (max-width: 1024px) {
    .item .item_tit{
      text-align: center;
      margin: auto;
      width: auto;
    }
    .item .item_desc{
      height: auto;
    }
    .cr_item{
      width: 60%;
    }
    .cr_indicadores .raya{
      height: 1.2em;
      width: 1.2em;
      margin: 0 1em;
    }
  }
  
  @media screen and (max-width: 768px) {
    .item .item_tit{
      text-align: center;
      margin: auto;
      width: auto;
    }
    .item .item_desc{
      max-height: 50%;
      height: auto;
    }
    .item .item_desc p{
      display: none;
      text-align: center;
    }
    .cr_item{
      width: 60%;
    }
    .cr_indicadores .raya{
      height: 0.6em;
      width: 0.6em;
      margin: 0 0.4em;
    }
  }
  
  @media screen and (max-width: 414px) {
    .header{
      /* height: 80vw; */
      width: 100vw;
    }
    .item .item_tit{
      text-align: center;
      margin: auto;
      width: auto;
    }
    .item .item_desc{
      max-height: 60%;
      height: auto;
    }
    .item .item_desc p{
      display: none;
      text-align: center;
    }
    .cr_item{
      width: 100%;
    }
    .cr_indicadores .raya{
      height: 0.9em;
      width: 0.9em;
      margin: 0 0.6em;
    }
    ul{
      align-items: unset;
    }
  }
  strong {
    color: #54c3ff !important;
    text-decoration: underline;
    font-size: 1.2rem;
  }
linkmak {
    color: #00ff2a !important;
    text-decoration: underline;
    font-size: 1.2rem;
	font-weight: bold;
  }
  
  .num3 .item:hover .item_desc {
    background-color: inital
  }