body{
  padding: 0%;
}

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
/*===== VARIABLES CSS Y SASS =====*/
/*Varibles sass*/
/*Variables css*/
/*===== Colores =====*/
:root {
  --first-color: #12192C;
  --second-color: #F5A623;
  --white-color: #EDEDED;
}

/*===== Fuente y tipografia =====*/
:root {
  --body-font: 'Quicksand', sans-serif;
  --small-font-size: 0.875rem;
}



/*===== z index =====*/
:root {
  --z-back: -10;
  --z-normal: 1;
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

/*===== BASE =====*/
*, ::before, ::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}



/*--------RETRASO DE ANIMATE------------*/

.retraso-1{
  webkit-animation-delay: 0.5s; /*especifica*/
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.retraso-2{
  webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

.retraso-3{
  webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.retraso-4{
  webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}

/*---------VERTICAL SLIDER---------*/

.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100% 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
        transform: translate3d(0,-100%, 0);
}

/*===============CARROUSEL SABIAS QUE ?=================*/

/* boton atras */
.carousel-control-prev-icon{
  border-radius: 50px;
  padding: 20px 20px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #041F54;
}

/* boton adelante */
.carousel-control-next-icon{
border-radius: 50px;
padding: 20px 20px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
border: 1px solid #124bbe;
}

/* boton gradient enterado/modal */
.button-gradient{
  transition: all 1s cubic-bezier(0.52, 1.6, 0.49, -0.58);
  background: -webkit-linear-gradient(#69D9FA, #245A8A)/*linear-gradient sirve para agregar degradados*/;
    background: -o-linear-gradient(#69D9FA, #245A8A)/*linear-gradient sirve para agregar degradados*/;
    background: linear-gradient(#69D9FA, #245A8A)/*linear-gradient sirve para agregar degradados*/;
  background-size: 200px, 100%;
  border-radius:7rem;
}

.button-gradient:hover{
  background-size: 2000px, 100%;
}

/*=====================================================*/




/*-----------boton gradient enterado/modal-------------*/
.button-gradient{
  transition: all 1s cubic-bezier(0.52, 1.6, 0.49, -0.58);
  background: -webkit-linear-gradient(#69D9FA, #245A8A)/*linear-gradient sirve para agregar degradados*/;
    background: -o-linear-gradient(#69D9FA, #245A8A)/*linear-gradient sirve para agregar degradados*/;
    background: linear-gradient(#69D9FA, #245A8A)/*linear-gradient sirve para agregar degradados*/;
  background-size: 200px, 100%;
}

.button-gradient:hover{
  background-size: 2000px, 100%;
}
/*=====================================================*/



/*==============BANNER SABIAS QUE===========================*/
a {
  text-decoration: none;
}



/*-----------------BANNERA LATERAL DESKTOP------------------*/
.slideshow {
    top: 60px;
    right:0%;
    position: fixed;
    overflow: hidden;
    z-index: 99;
    width:10%;
    height:100%;
  }

 
  .slider-ul{
    padding: 0;
    width: 100%;
    height: 100%;
    animation: slidey  infinite;
    animation-timing-function:ease-out;
    animation-duration: 240s;
  }

  .slider-li{
    width: 100%;
    height: 100%;
    list-style: none;
  }

  .slider-img {
    width: 100%;
    height: 100%;
  }

  
  
  @-webkit-keyframes slidey {
   
   
    0%{ transform: translateY(0); }
    11%{ transform: translateY(0); }
    
    22%{ transform: translateY(-100%); }
    22%{ transform: translateY(-100%); }
    

    33%{ transform: translateY(-100%); }
    33%{ transform: translateY(-100%); }
    
    44%{ transform: translateY(-100%); }
    44%{ transform: translateY(-100%); }


    55%{ transform: translateY(-100%); }
    55%{ transform: translateY(-100%); }

    66%{ transform: translateY(-100%); }
    66%{ transform: translateY(-100%); }

    77%{ transform: translateY(-100%); }
    77%{ transform: translateY(-100%); }

    88%{ transform: translateY(-100%); }
    88%{ transform: translateY(-100%); }

    99%{ transform: translateY(-100%); }
    99%{ transform: translateY(-100%); }

    100%{ transform: translateY(-100%); }
    100%{ transform: translateY(-100%); }

    
  }
  
  @keyframes slidey {
   
    /* Sliding animation of last image back to first image here 
       Then the tray resets to 0% X position at new zero time */

       0%{ transform: translateY(0); }
       11%{ transform: translateY(0); }
       
       22%{ transform: translateY(-100%); }
       22%{ transform: translateY(-100%); }
       
   
       33%{ transform: translateY(-200%); }
       33%{ transform: translateY(-200%); }
       
       44%{ transform: translateY(-300%); }
       44%{ transform: translateY(-300%); }
   
   
       55%{ transform: translateY(-400%); }
       55%{ transform: translateY(-400%); }
   
       66%{ transform: translateY(-500%); }
       66%{ transform: translateY(-500%); }
   
       77%{ transform: translateY(-600%); }
       77%{ transform: translateY(-600%); }
   
       88%{ transform: translateY(-700%); }
       88%{ transform: translateY(-700%); }
   
       99%{ transform: translateY(-800%); }
       99%{ transform: translateY(-800%); }
   
       100%{ transform: translateY(-900%); }
       100%{ transform: translateY(-900%); }
   
  }