// variables
$skeleton-grey: #ededed;
$skeleton-line-height: 6px;
// brillo
$brillo-image: linear-gradient( 90deg, rgba(#fff, 0), rgba(#fff, 0.5) 50%, rgba(#fff, 0) 100% );
$brillo-size: 50% 100%;
$brillo-position-start: -100% 0;
$brillo-position-end: 150% 0;



//Elementos de skeleton
// titulo componente
$componenttitletext-image: linear-gradient(90deg, rgba(237,237,237,1) 0%, rgba(237,237,237,1) 60px, rgba(255,255,255,1) 61px, rgba(255,255,255,1) 100%);
$componenttitletext-position: 15px 15px;
$componenttitletext-size: 100% 6px;

// texto componente
$componenttext-image: linear-gradient(180deg, rgba($skeleton-grey,1) 0, rgba($skeleton-grey,1) 5px, rgba(255, 255, 255 ,1) 6px, rgba(255, 255, 255 ,1) 21px);
$componenttext-position: 15px 36px;
$componenttext-size: 88% 21px;

// list componente
$componentlist-image: linear-gradient(180deg, rgba($skeleton-grey,1) 0, rgba($skeleton-grey,1) 5px, rgba(255, 255, 255 ,0) 6px, rgba(255, 255, 255 ,0) 41px);
$componentlist-position: 15px 56px;
$componentlist-size: 88% 41px;

//Elementos de skeleton general
// circulo paso 3 interior
$stepcirc3-image: radial-gradient(circle 12.5px at 12.5px 12.5px, $skeleton-grey 99%, transparent 0);
$stepcirc3-size: 25px 25px;
$stepcirc3-position-desktop: calc(100% - 33px) 25px;
$stepcirc3-position-mobile: calc(100% - 12px) 25px;
// circulo paso 2 interior
$stepcirc2-image: radial-gradient(circle 12.5px at 12.5px 12.5px, $skeleton-grey 99%, transparent 0);
$stepcirc2-size: 25px 25px;
$stepcirc2-position-desktop: 50% 25px;
$stepcirc2-position-mobile: 50% 25px;
// circulo paso 1 interior
$stepcirc1-image: radial-gradient(circle 12.5px at 12.5px 12.5px, $skeleton-grey 99%, transparent 0);
$stepcirc1-size: 25px 25px;
$stepcirc1-position-desktop: 33px 25px;
$stepcirc1-position-mobile: 15px 25px;
// linea de los steps
$stepline-image: linear-gradient($colorBordes 1px, transparent 0);
$stepline-size-desktop: calc(100% - 66px) 1px;
$stepline-size-mobile: calc(100% - 30px) 1px;
$stepline-position-desktop: 33px 37px;
$stepline-position-mobile: 15px 37px;
// texto review
$reviewtext-image: linear-gradient($skeleton-grey 12px, transparent 0);
$reviewtext-size-desktop: 394px 6px;
$reviewtext-size-mobile: 200px 6px;
$reviewtext-position-3steps-desktop: 50px 124px;
$reviewtext-position-1step-desktop: 50px 43px;
$reviewtext-position-3steps-mobile: 50px 99px;
$reviewtext-position-1step-mobile: 50px 39px;
// icono review
$reviewicon-image: radial-gradient(circle 12.5px at 12.5px 12.5px, $skeleton-grey 99%, transparent 0);
$reviewicon-size: 25px 25px;
$reviewicon-position-3steps-desktop: 15px 115px;
$reviewicon-position-1step-desktop: 15px 34px;
$reviewicon-position-3steps-mobile: 15px 90px;
$reviewicon-position-1step-mobile: 15px 30px;
// caja review
$reviewbox-image-desktop: linear-gradient(#ffffff 60px, transparent 0);
$reviewbox-image-mobile: linear-gradient(#ffffff 76px, transparent 0);
$reviewbox-size-desktop: 100% 60px;
$reviewbox-size-mobile: 100% 76px;
$reviewbox-position-3steps-desktop: 0 96px;
$reviewbox-position-1step-desktop: 0 15px;
$reviewbox-position-3steps-mobile: 0 75px;
$reviewbox-position-1step-mobile: 0 15px;
// titulo modulo
$modtitle-image: linear-gradient($skeleton-grey 6px, transparent 0);
$modtitle-size: 60px 6px;
// linea modulo
$modline-image: linear-gradient($skeleton-grey 12px, transparent 0);
$modline-size-desktop: 355px 12px;
$modline-size-mobile: 88% 12px;

// caja modulo
$modbox-image: linear-gradient(#ffffff 115px, transparent 0);
$modbox-size: 100% 115px;

// modulo 1 posiciones
$mod1title-position-3steps-desktop: 15px 196px;
$mod1title-position-1step-desktop: 15px 115px;
$mod1title-position-3steps-mobile: 15px 191px;
$mod1title-position-1step-mobile: 15px 131px;

$mod1line1-position-3steps-desktop: 15px 222px;
$mod1line1-position-1step-desktop: 15px 141px;
$mod1line1-position-3steps-mobile: 15px 217px;
$mod1line1-position-1step-mobile: 15px 157px;

$mod1line2-position-3steps-desktop: 15px 249px;
$mod1line2-position-1step-desktop: 15px 168px;
$mod1line2-position-3steps-mobile: 15px 244px;
$mod1line2-position-1step-mobile: 15px 184px;

$mod1box-position-3steps-desktop: 0 171px;
$mod1box-position-1step-desktop: 0 90px;
$mod1box-position-3steps-mobile: 0 166px;
$mod1box-position-1step-mobile: 0 106px;

// modulo 2 posiciones
$mod2title-position-3steps-desktop: 15px 326px;
$mod2title-position-1step-desktop: 15px 245px;
$mod2title-position-3steps-mobile: 15px 321px;
$mod2title-position-1step-mobile: 15px 261px;

$mod2line1-position-3steps-desktop: 15px 352px;
$mod2line1-position-1step-desktop: 15px 271px;
$mod2line1-position-3steps-mobile: 15px 347px;
$mod2line1-position-1step-mobile: 15px 287px;

$mod2line2-position-3steps-desktop: 15px 379px;
$mod2line2-position-1step-desktop: 15px 298px;
$mod2line2-position-3steps-mobile: 15px 374px;
$mod2line2-position-1step-mobile: 15px 314px;

$mod2box-position-3steps-desktop: 0 301px;
$mod2box-position-1step-desktop: 0 220px;
$mod2box-position-3steps-mobile: 0 296px;
$mod2box-position-1step-mobile: 0 236px;

// modulo 3 posiciones
$mod3title-position-3steps-desktop: 15px 456px;
$mod3title-position-1step-desktop: 15px 375px;
$mod3title-position-3steps-mobile: 15px 451px;
$mod3title-position-1step-mobile: 15px 391px;

$mod3line1-position-3steps-desktop: 15px 482px;
$mod3line1-position-1step-desktop: 15px 401px;
$mod3line1-position-3steps-mobile: 15px 477px;
$mod3line1-position-1step-mobile: 15px 417px;

$mod3line2-position-3steps-desktop: 15px 509px;
$mod3line2-position-1step-desktop: 15px 428px;
$mod3line2-position-3steps-mobile: 15px 504px;
$mod3line2-position-1step-mobile: 15px 444px;

$mod3box-position-3steps-desktop: 0 431px;
$mod3box-position-1step-desktop: 0 350px;
$mod3box-position-3steps-mobile: 0 426px;
$mod3box-position-1step-mobile: 0 366px;

// modulo 4 posiciones
$mod4title-position-3steps-desktop: 15px 586px;
$mod4title-position-1step-desktop: 15px 505px;
$mod4title-position-3steps-mobile: 15px 581px;
$mod4title-position-1step-mobile: 15px 521px;

$mod4line1-position-3steps-desktop: 15px 612px;
$mod4line1-position-1step-desktop: 15px 531px;
$mod4line1-position-3steps-mobile: 15px 607px;
$mod4line1-position-1step-mobile: 15px 547px;

$mod4line2-position-3steps-desktop: 15px 639px;
$mod4line2-position-1step-desktop: 15px 558px;
$mod4line2-position-3steps-mobile: 15px 634px;
$mod4line2-position-1step-mobile: 15px 574px;

$mod4box-position-3steps-desktop: 0 561px;
$mod4box-position-1step-desktop: 0 480px;
$mod4box-position-3steps-mobile: 0 556px;
$mod4box-position-1step-mobile: 0 496px;

// button next
$nextbutton-image: linear-gradient($skeleton-grey 45px, transparent 0);
$nextbutton-size-desktop: 150px 45px;
$nextbutton-size-mobile:  calc(100% - 30px) 45px;
$nextbutton-position-3steps-desktop: 0 691px;
$nextbutton-position-1step-desktop: 0 610px;
$nextbutton-position-3steps-mobile: 15px 686px;
$nextbutton-position-1step-mobile: 15px 626px;


// bloques desktop
$background-image-3steps-desktop: $brillo-image, $stepcirc3-image, $stepcirc2-image, $stepcirc1-image, $stepline-image, $reviewtext-image, $reviewicon-image, $reviewbox-image-desktop, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $nextbutton-image;
$background-image-2steps-desktop: $brillo-image, $stepcirc3-image, $stepcirc1-image, $stepline-image, $reviewtext-image, $reviewicon-image, $reviewbox-image-desktop, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $nextbutton-image;
$background-image-1step-desktop: $brillo-image, $reviewtext-image, $reviewicon-image, $reviewbox-image-desktop, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $nextbutton-image;

$background-size-3steps-desktop: $brillo-size, $stepcirc3-size, $stepcirc2-size, $stepcirc1-size, $stepline-size-desktop, $reviewtext-size-desktop, $reviewicon-size, $reviewbox-size-desktop, $modtitle-size, $modline-size-desktop, $modline-size-desktop, $modbox-size, $modtitle-size, $modline-size-desktop, $modline-size-desktop, $modbox-size, $modtitle-size, $modline-size-desktop, $modline-size-desktop, $modbox-size, $modtitle-size, $modline-size-desktop, $modline-size-desktop, $modbox-size, $nextbutton-size-desktop;
$background-size-2steps-desktop: $brillo-size, $stepcirc3-size, $stepcirc1-size, $stepline-size-desktop, $reviewtext-size-desktop, $reviewicon-size, $reviewbox-size-desktop, $modtitle-size, $modline-size-desktop, $modline-size-desktop, $modbox-size, $modtitle-size, $modline-size-desktop, $modline-size-desktop, $modbox-size, $modtitle-size, $modline-size-desktop, $modline-size-desktop, $modbox-size, $modtitle-size, $modline-size-desktop, $modline-size-desktop, $modbox-size, $nextbutton-size-desktop;
$background-size-1step-desktop: $brillo-size, $reviewtext-size-desktop, $reviewicon-size, $reviewbox-size-desktop, $modtitle-size, $modline-size-desktop, $modline-size-desktop, $modbox-size, $modtitle-size, $modline-size-desktop, $modline-size-desktop, $modbox-size, $modtitle-size, $modline-size-desktop, $modline-size-desktop, $modbox-size, $modtitle-size, $modline-size-desktop, $modline-size-desktop, $modbox-size, $nextbutton-size-desktop;

$background-position-3steps-desktop: /*falta la variable de posicion del brillo*/ $stepcirc3-position-desktop, $stepcirc2-position-desktop, $stepcirc1-position-desktop, $stepline-position-desktop, $reviewtext-position-3steps-desktop, $reviewicon-position-3steps-desktop, $reviewbox-position-3steps-desktop, $mod1title-position-3steps-desktop, $mod1line1-position-3steps-desktop, $mod1line2-position-3steps-desktop, $mod1box-position-3steps-desktop, $mod2title-position-3steps-desktop, $mod2line1-position-3steps-desktop, $mod2line2-position-3steps-desktop, $mod2box-position-3steps-desktop, $mod3title-position-3steps-desktop, $mod3line1-position-3steps-desktop, $mod3line2-position-3steps-desktop, $mod3box-position-3steps-desktop, $mod4title-position-3steps-desktop, $mod4line1-position-3steps-desktop, $mod4line2-position-3steps-desktop, $mod4box-position-3steps-desktop, $nextbutton-position-3steps-desktop;
$background-position-2steps-desktop: /*falta la variable de posicion del brillo*/ $stepcirc3-position-desktop, $stepcirc1-position-desktop, $stepline-position-desktop, $reviewtext-position-3steps-desktop, $reviewicon-position-3steps-desktop, $reviewbox-position-3steps-desktop, $mod1title-position-3steps-desktop, $mod1line1-position-3steps-desktop, $mod1line2-position-3steps-desktop, $mod1box-position-3steps-desktop, $mod2title-position-3steps-desktop, $mod2line1-position-3steps-desktop, $mod2line2-position-3steps-desktop, $mod2box-position-3steps-desktop, $mod3title-position-3steps-desktop, $mod3line1-position-3steps-desktop, $mod3line2-position-3steps-desktop, $mod3box-position-3steps-desktop, $mod4title-position-3steps-desktop, $mod4line1-position-3steps-desktop, $mod4line2-position-3steps-desktop, $mod4box-position-3steps-desktop, $nextbutton-position-3steps-desktop;
$background-position-1step-desktop: /*falta la variable de posicion del brillo*/ $reviewtext-position-1step-desktop, $reviewicon-position-1step-desktop, $reviewbox-position-1step-desktop, $mod1title-position-1step-desktop, $mod1line1-position-1step-desktop, $mod1line2-position-1step-desktop, $mod1box-position-1step-desktop, $mod2title-position-1step-desktop, $mod2line1-position-1step-desktop, $mod2line2-position-1step-desktop, $mod2box-position-1step-desktop, $mod3title-position-1step-desktop, $mod3line1-position-1step-desktop, $mod3line2-position-1step-desktop, $mod3box-position-1step-desktop, $mod4title-position-1step-desktop, $mod4line1-position-1step-desktop, $mod4line2-position-1step-desktop, $mod4box-position-1step-desktop, $nextbutton-position-1step-desktop;

// bloques mobile
$background-image-3steps-mobile: $brillo-image, $stepcirc3-image, $stepcirc2-image, $stepcirc1-image, $stepline-image, $reviewtext-image, $reviewicon-image, $reviewbox-image-mobile, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $nextbutton-image;
$background-image-2steps-mobile: $brillo-image, $stepcirc3-image, $stepcirc1-image, $stepline-image, $reviewtext-image, $reviewicon-image, $reviewbox-image-mobile, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $nextbutton-image;
$background-image-1step-mobile: $brillo-image, $reviewtext-image, $reviewicon-image, $reviewbox-image-mobile, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $modtitle-image, $modline-image, $modline-image, $modbox-image, $nextbutton-image;

$background-size-3steps-mobile: $brillo-size, $stepcirc3-size, $stepcirc2-size, $stepcirc1-size, $stepline-size-mobile, $reviewtext-size-mobile, $reviewicon-size, $reviewbox-size-mobile, $modtitle-size, $modline-size-mobile, $modline-size-mobile, $modbox-size, $modtitle-size, $modline-size-mobile, $modline-size-mobile, $modbox-size, $modtitle-size, $modline-size-mobile, $modline-size-mobile, $modbox-size, $modtitle-size, $modline-size-mobile, $modline-size-mobile, $modbox-size, $nextbutton-size-mobile;
$background-size-2steps-mobile: $brillo-size, $stepcirc3-size, $stepcirc1-size, $stepline-size-mobile, $reviewtext-size-mobile, $reviewicon-size, $reviewbox-size-mobile, $modtitle-size, $modline-size-mobile, $modline-size-mobile, $modbox-size, $modtitle-size, $modline-size-mobile, $modline-size-mobile, $modbox-size, $modtitle-size, $modline-size-mobile, $modline-size-mobile, $modbox-size, $modtitle-size, $modline-size-mobile, $modline-size-mobile, $modbox-size, $nextbutton-size-mobile;
$background-size-1step-mobile: $brillo-size, $reviewtext-size-mobile, $reviewicon-size, $reviewbox-size-mobile, $modtitle-size, $modline-size-mobile, $modline-size-mobile, $modbox-size, $modtitle-size, $modline-size-mobile, $modline-size-mobile, $modbox-size, $modtitle-size, $modline-size-mobile, $modline-size-mobile, $modbox-size, $modtitle-size, $modline-size-mobile, $modline-size-mobile, $modbox-size, $nextbutton-size-mobile;

$background-position-3steps-mobile: /*falta la variable de posicion del brillo*/ $stepcirc3-position-mobile, $stepcirc2-position-mobile, $stepcirc1-position-mobile, $stepline-position-mobile, $reviewtext-position-3steps-mobile, $reviewicon-position-3steps-mobile, $reviewbox-position-3steps-mobile, $mod1title-position-3steps-mobile, $mod1line1-position-3steps-mobile, $mod1line2-position-3steps-mobile, $mod1box-position-3steps-mobile, $mod2title-position-3steps-mobile, $mod2line1-position-3steps-mobile, $mod2line2-position-3steps-mobile, $mod2box-position-3steps-mobile, $mod3title-position-3steps-mobile, $mod3line1-position-3steps-mobile, $mod3line2-position-3steps-mobile, $mod3box-position-3steps-mobile, $mod4title-position-3steps-mobile, $mod4line1-position-3steps-mobile, $mod4line2-position-3steps-mobile, $mod4box-position-3steps-mobile, $nextbutton-position-3steps-mobile;
$background-position-2steps-mobile: /*falta la variable de posicion del brillo*/ $stepcirc3-position-mobile, $stepcirc1-position-mobile, $stepline-position-mobile, $reviewtext-position-3steps-mobile, $reviewicon-position-3steps-mobile, $reviewbox-position-3steps-mobile, $mod1title-position-3steps-mobile, $mod1line1-position-3steps-mobile, $mod1line2-position-3steps-mobile, $mod1box-position-3steps-mobile, $mod2title-position-3steps-mobile, $mod2line1-position-3steps-mobile, $mod2line2-position-3steps-mobile, $mod2box-position-3steps-mobile, $mod3title-position-3steps-mobile, $mod3line1-position-3steps-mobile, $mod3line2-position-3steps-mobile, $mod3box-position-3steps-mobile, $mod4title-position-3steps-mobile, $mod4line1-position-3steps-mobile, $mod4line2-position-3steps-mobile, $mod4box-position-3steps-mobile, $nextbutton-position-3steps-mobile;
$background-position-1step-mobile: /*falta la variable de posicion del brillo*/ $reviewtext-position-1step-mobile, $reviewicon-position-1step-mobile, $reviewbox-position-1step-mobile, $mod1title-position-1step-mobile, $mod1line1-position-1step-mobile, $mod1line2-position-1step-mobile, $mod1box-position-1step-mobile, $mod2title-position-1step-mobile, $mod2line1-position-1step-mobile, $mod2line2-position-1step-mobile, $mod2box-position-1step-mobile, $mod3title-position-1step-mobile, $mod3line1-position-1step-mobile, $mod3line2-position-1step-mobile, $mod3box-position-1step-mobile, $mod4title-position-1step-mobile, $mod4line1-position-1step-mobile, $mod4line2-position-1step-mobile, $mod4box-position-1step-mobile, $nextbutton-position-1step-mobile;

/* skeleton inicial mientras carga la app */
#app {
  &:empty, & router-view:empty {
    display: block;
    opacity: 1;
    margin: auto;
    @media (min-width: $grid-float-breakpoint) {
      height: 1000px;
      max-width: 768px;
    }
    @media (max-width: $grid-float-breakpoint-max) {
      height: 800px;
    }
  }
  &.app-3-steps {
    &:empty, & router-view:empty {
      @media (min-width: $grid-float-breakpoint) {
        /*rtl:ignore*/
        background-image: $background-image-3steps-desktop;
        background-size: $background-size-3steps-desktop;
        /*rtl:ignore*/
        background-position: $brillo-position-start, $background-position-3steps-desktop;
        background-repeat: no-repeat;
        animation: shine3stepsdesktop 2s infinite;
      }
      @media (max-width: $grid-float-breakpoint-max) {
        /*rtl:ignore*/
        background-image: $background-image-3steps-mobile;
        background-size: $background-size-3steps-mobile;
        /*rtl:ignore*/
        background-position: $brillo-position-start, $background-position-3steps-mobile;
        background-repeat: no-repeat;
        animation: shine3stepsmobile 2s infinite;
      }
    }
  }
  &.app-2-steps {
    &:empty, & router-view:empty {
      @media (min-width: $grid-float-breakpoint) {
        /*rtl:ignore*/
        background-image: $background-image-2steps-desktop;
        background-size: $background-size-2steps-desktop;
        /*rtl:ignore*/
        background-position: $brillo-position-start, $background-position-2steps-desktop;
        background-repeat: no-repeat;
        animation: shine2stepsdesktop 2s infinite;
      }
      @media (max-width: $grid-float-breakpoint-max) {
        /*rtl:ignore*/
        background-image: $background-image-2steps-mobile;
        background-size: $background-size-2steps-mobile;
        /*rtl:ignore*/
        background-position: $brillo-position-start, $background-position-2steps-mobile;
        background-repeat: no-repeat;
        animation: shine2stepsmobile 2s infinite;
      }
    }
  }
  &.app-1-step {
    &:empty, & router-view:empty {
      @media (min-width: $grid-float-breakpoint) {
        /*rtl:ignore*/
        background-image: $background-image-1step-desktop;
        background-size: $background-size-1step-desktop;
        /*rtl:ignore*/
        background-position: $brillo-position-start, $background-position-1step-desktop;
        background-repeat: no-repeat;
        animation: shine1stepdesktop 2s infinite;
      }
      @media (max-width: $grid-float-breakpoint-max) {
        /*rtl:ignore*/
        background-image: $background-image-1step-mobile;
        background-size: $background-size-1step-mobile;
        /*rtl:ignore*/
        background-position: $brillo-position-start, $background-position-1step-mobile;
        background-repeat: no-repeat;
        animation: shine1stepmobile 2s infinite;
      }
    }
  }
}
@keyframes shine3stepsdesktop {
  to {
    /*rtl:ignore*/
    background-position: $brillo-position-end, $background-position-3steps-desktop;
  }
}
@keyframes shine3stepsmobile {
  to {
    /*rtl:ignore*/
    background-position: $brillo-position-end, $background-position-3steps-mobile;
  }
}
@keyframes shine2stepsdesktop {
  to {
    /*rtl:ignore*/
    background-position: $brillo-position-end, $background-position-2steps-desktop;
  }
}
@keyframes shine2stepsmobile {
  to {
    /*rtl:ignore*/
    background-position: $brillo-position-end, $background-position-2steps-mobile;
  }
}
@keyframes shine1stepdesktop {
  to {
    /*rtl:ignore*/
    background-position: $brillo-position-end, $background-position-1step-desktop;
  }
}
@keyframes shine1stepmobile {
  to {
    /*rtl:ignore*/
    background-position: $brillo-position-end, $background-position-1step-mobile;
  }
}


/* Modulos para skeleton de distintos componentes */
.scr-skeleton {
  padding: 25px 15px;
  background: #fff;
}
.skeleton-module {
  margin-bottom: 15px;
  width: 100%;
  position: relative;
  @media (min-width: $grid-float-breakpoint) {
    width: 50%;
  }
  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: $brillo-image;
    background-size: $brillo-size;
    background-position: $brillo-position-start;
    animation: shine 2s infinite;
  }
}
.skeleton-module-text {
   background: $skeleton-grey;
   height: 6px;
 }
.skeleton-module-forminput {
  background: $skeleton-grey;
  height: 55px;
}
.skeleton {
  &__title, &__image, &__paragraph, &__list, &__button, &__price {
    position:relative;
    &:after {
      content:'';
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      background-image: $brillo-image;
      background-position: $brillo-position-start;
      background-size: $brillo-size;
      background-repeat: no-repeat;
      animation: shineanimation 1s infinite;
    }
  }
  &__title, &__image, &__price, &__button {
    background: $skeleton-grey;
    display: inline-block;
  }
  &__title {
    width: 100px;
    height: $skeleton-line-height;
    margin: 9px 0;
  }
  &__paragraph, &__list {
    width: 100%;
    height: 90px;
  }
  &__paragraph {
    background-repeat: repeat-y;
    background-image: $componenttext-image;
    background-position: $componenttext-position;
    background-size: $componenttext-size;
  }
  &__list {
    background-repeat: repeat-y;
    background-image: $componentlist-image;
    background-position: $componentlist-position;
    background-size: $componentlist-size;
  }
  &__price, &__button {
    width: 100px;
    height: 40px;
    display: inline-block;
  }
}
/* Travellers skeleton */
.scr-skeleton-travellers {
  min-height: 300px;
  @media (min-width: $grid-float-breakpoint) {
    .form-2-col & {
      display: flex;
      min-height: 0;
      justify-content: space-between;
      flex-wrap: wrap;
      .skeleton-module-text {
        flex: 0 0 60%;
        margin-bottom: 25px;
      }
      .skeleton-module-forminput {
        flex: 0 0 48%;
      }
    }
  }
}

/* Seats skeleton */
.seats-element-skeleton {
  .seats-blocktext {
    @media (min-width: $grid-float-breakpoint) {
      margin-left: 100px;
    }
  }
  .skeleton__paragraph {
    height: 42px;
  }
}

/* Luggage skeleton */
.luggage-element {
  .skeleton__title {
    vertical-align: middle;
    margin: 0;
  }
  .luggage-title .luggage-company .skeleton__image.company-logo {
    height: 20px;
  }
  .luggage-add-button-container .skeleton__button {
    vertical-align: top;
  }
}
/* Insurance skeleton */
.insurance-element {
  .skeleton__price {
    width: 60px;
    height: 20px;
  }
}

/* customized attention */
.custom-service-table {
  .skeleton__price {
    width: 42px;
    height: 20px;
  }
}
/* customized attention */
.transfers-loading-box {
  .skeleton__title {
    margin: 0;
  }
}

/* cancellation */
.product-comments {
  width: 100%;
  .skeleton__paragraph {
    height: 42px;
    background-position: 0 30px;
    background-size: 100% 21px;
  }
}
/* Important info */
.scr-details-important-info {
  .skeleton__paragraph {
    height: 156px;
    background-position: 0 30px;
    background-size: 100% 21px;
    margin-bottom: 15px;
  }
}
/* descuento residentes */
.upselling-module-skeleton {
  .scr-module-subtitle .subtitle-text {
    padding-left: 0;
  }
  .skeleton__title {
    width: 200px;
  }
  .upselling-element .upselling-content .upselling-title {
    margin-bottom: 0;
  }
  .upselling-copy .skeleton__title {
    width: 250px;
  }
}

/* Annotations */
.scr-price-annotations, .scr-price-description {
  .scr-skeleton {
    padding: 0;
    .skeleton__paragraph {
      height: 63px;
    }
  }
}

/* module sms */
.sms-element.sms-element-skeleton {
  .sms-content .sms-title {
    margin-bottom: 0;
  }
  .sms-copy .skeleton__title {
    width: 250px;
  }
}
.scr-module-sms {
  .form-control-block .skeleton__title {
    width: 300px;
  }
}

@keyframes shine {
  to {
    background-position: $brillo-position-end;
  }
}