/* -----------------------------------------------------------------------------
 * CONFIG
 */
/* -----------------------------------------------------------------------------
 * SETTINGS
 */
/* -----------------------------------------------------------------------------
 * CONFIG
 */
/* -----------------------------------------------------------------------------
 * Font size base for functions, etc. (not document font size)
 */
/* -----------------------------------------------------------------------------
 * Paths
 */
/* -----------------------------------------------------------------------------
 * Special chars
 */
/* -----------------------------------------------------------------------------
 * Mediaqueries
 */
/* -----------------------------------------------------------------------------
 * PX TO EM
 */
/* -----------------------------------------------------------------------------
 * TOOLS
 */
/* -----------------------------------------------------------------------------
 * MEDIAQUERIES
 */
/* -----------------------------------------------------------------------------
 * BASE
 */
/* -----------------------------------------------------------------------------
 * GENERIC
 */
/* -----------------------------------------------------------------------------
 * FONTS
 */
@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/fa-brands-400.eot);
  src: url(../fonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(../fonts/fa-brands-400.woff2) format("woff2"), url(../fonts/fa-brands-400.woff) format("woff"), url(../fonts/fa-brands-400.ttf) format("truetype"), url(../images/fa-brands-400.svg#fontawesome) format("svg"); }

.fab {
  font-family: "Font Awesome 5 Brands"; }

.far {
  font-weight: 400; }

@font-face {
  font-family: "Font Awesome 5 Pro";
  font-style: normal;
  font-weight: 900;
  src: url(../fonts/fa-solid-900.eot);
  src: url(../fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(../fonts/fa-solid-900.woff2) format("woff2"), url(../fonts/fa-solid-900.woff) format("woff"), url(../fonts/fa-solid-900.ttf) format("truetype"), url(../images/fa-solid-900.svg#fontawesome) format("svg"); }

.fa, .fas {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900; }

@font-face {
  font-family: "Font Awesome 5 Pro";
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/fa-light-300.eot);
  src: url(../fonts/fa-light-300.eot?#iefix) format("embedded-opentype"), url(../fonts/fa-light-300.woff2) format("woff2"), url(../fonts/fa-light-300.woff) format("woff"), url(../fonts/fa-light-300.ttf) format("truetype"), url(../images/fa-light-300.svg#fontawesome) format("svg"); }

.fal {
  font-weight: 300; }

@font-face {
  font-family: "Font Awesome 5 Pro";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/fa-regular-400.eot);
  src: url(../fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(../fonts/fa-regular-400.woff2) format("woff2"), url(../fonts/fa-regular-400.woff) format("woff"), url(../fonts/fa-regular-400.ttf) format("truetype"), url(../images/fa-regular-400.svg#fontawesome) format("svg"); }

.fal, .far {
  font-family: "Font Awesome 5 Pro"; }

.fa,
.fab,
.fal,
.far,
.fas {
  font-style: normal; }

/* -----------------------------------------------------------------------------
 * FOUNDATIONS
 */
/* -----------------------------------------------------------------------------
 * FONT FAMILIES
 */
:root {
  --font-family-primary: 'Poppins', sans-serif; }

/* -----------------------------------------------------------------------------
 * CONTENT
 */
/* -----------------------------------------------------------------------------
 * COMPONENTS
 */
.c-roulette {
  width: 800px;
  margin: 0 auto;
  font-family: var(--font-family-primary);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transform-origin: left top; }
  .c-roulette__base {
    background-color: #e83d6c;
    overflow: hidden;
    border-radius: 50%; }
  .c-roulette__categories-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%; }
  .c-roulette__groups {
    position: absolute;
    width: 50%;
    left: 50%;
    top: 50%;
    height: 0;
    transform-origin: left center;
    pointer-events: none;
    transition: rotate 0.6s cubic-bezier(0, 0, 0, 1); }
  .c-roulette__groups-item {
    padding-left: 129px;
    padding-right: 177px;
    text-align: center;
    color: white;
    font-weight: 500;
    position: absolute;
    top: -50%;
    left: 0;
    transform-origin: left;
    line-height: 1em;
    font-size: 10px;
    height: 1px;
    width: 93px;
    box-sizing: unset !important;
    word-break: break-word; }
    .c-roulette__groups-item:nth-of-type(2) {
      transform: rotateZ(32.7272deg); }
    .c-roulette__groups-item:nth-of-type(3) {
      transform: rotateZ(65.4544deg); }
    .c-roulette__groups-item:nth-of-type(4) {
      transform: rotateZ(98.1816deg); }
    .c-roulette__groups-item:nth-of-type(5) {
      transform: rotateZ(130.9088deg); }
    .c-roulette__groups-item:nth-of-type(6) {
      transform: rotateZ(163.636deg); }
    .c-roulette__groups-item:nth-of-type(7) {
      transform: rotateZ(196.3632deg); }
    .c-roulette__groups-item:nth-of-type(8) {
      transform: rotateZ(229.0904deg); }
    .c-roulette__groups-item:nth-of-type(9) {
      transform: rotateZ(261.8176deg); }
    .c-roulette__groups-item:nth-of-type(10) {
      transform: rotateZ(294.5448deg); }
    .c-roulette__groups-item:nth-of-type(11) {
      transform: rotateZ(327.272deg); }
  .c-roulette__categories {
    position: absolute;
    width: 50%;
    left: 50%;
    top: 50%;
    height: 0; }
    .c-roulette__categories a {
      display: block;
      transition: 0.6s all; }
      .c-roulette__categories a:hover {
        color: black; }
  .c-roulette__categories-item {
    height: 170px;
    width: 100%;
    padding-left: 248px;
    box-sizing: border-box;
    font-size: 10.6px;
    text-decoration: none;
    top: -80px;
    position: absolute;
    transform-origin: left center;
    overflow: hidden;
    pointer-events: none; }
    .c-roulette__categories-item.is-active {
      pointer-events: all; }
    .c-roulette__categories-item a {
      color: #ffffff;
      text-decoration: none;
      line-height: 2em;
      padding-right: 38px;
      white-space: nowrap; }
      .c-roulette__categories-item a:first-of-type {
        transform: rotateZ(-13deg); }
      .c-roulette__categories-item a:nth-of-type(2) {
        transform: rotateZ(-11deg);
        padding-left: 3px; }
      .c-roulette__categories-item a:nth-of-type(3) {
        transform: rotateZ(-7deg);
        padding-left: 6px; }
      .c-roulette__categories-item a:nth-of-type(4) {
        transform: rotateZ(-2deg);
        padding-left: 9px; }
      .c-roulette__categories-item a:nth-of-type(5) {
        transform: rotateZ(2deg);
        padding-left: 9px; }
      .c-roulette__categories-item a:nth-of-type(6) {
        transform: rotateZ(7deg);
        padding-left: 6px; }
      .c-roulette__categories-item a:nth-of-type(7) {
        transform: rotateZ(11deg);
        padding-left: 3px; }
      .c-roulette__categories-item a:nth-of-type(8) {
        transform: rotateZ(13deg); }
    .c-roulette__categories-item:nth-of-type(2) {
      transform: rotateZ(-32.7272deg); }
    .c-roulette__categories-item:nth-of-type(3) {
      transform: rotateZ(-65.4544deg); }
    .c-roulette__categories-item:nth-of-type(4) {
      transform: rotateZ(-98.1816deg); }
    .c-roulette__categories-item:nth-of-type(5) {
      transform: rotateZ(-130.9088deg); }
    .c-roulette__categories-item:nth-of-type(6) {
      transform: rotateZ(-163.636deg); }
    .c-roulette__categories-item:nth-of-type(7) {
      transform: rotateZ(-196.3632deg); }
    .c-roulette__categories-item:nth-of-type(8) {
      transform: rotateZ(-229.0904deg); }
    .c-roulette__categories-item:nth-of-type(9) {
      transform: rotateZ(-261.8176deg); }
    .c-roulette__categories-item:nth-of-type(10) {
      transform: rotateZ(-294.5448deg); }
    .c-roulette__categories-item:nth-of-type(11) {
      transform: rotateZ(-327.272deg); }
  .c-roulette__aro-exterior {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; }
  .c-roulette #centro {
    transition: 0.6s all;
    pointer-events: all;
    cursor: pointer; }
    .c-roulette #centro:hover {
      filter: brightness(1.2); }
  .c-roulette__tapa {
    position: absolute;
    top: 50%;
    transform: translateY(-48%);
    width: 130px;
    right: 169px; }
  .c-roulette__aro {
    position: absolute;
    top: 45px;
    left: 41px;
    width: 720px;
    height: 720px;
    transform: rotate(0);
    pointer-events: none;
    transition: rotate 0.6s cubic-bezier(0, 0, 0, 1); }
    .c-roulette__aro .js-spin {
      pointer-events: all;
      cursor: pointer; }
      .c-roulette__aro .js-spin:hover {
        filter: brightness(1.4); }
      .c-roulette__aro .js-spin.is-active {
        filter: brightness(1.2); }
    .c-roulette__aro #iconos g.js-spin-icon {
      transform: scale(0.8);
      transform-origin: center;
      transform-box: fill-box;
      pointer-events: bounding-box;
      cursor: pointer; }
      .c-roulette__aro #iconos g.js-spin-icon path {
        transition: fill .4s ease; }
      .c-roulette__aro #iconos g.js-spin-icon:hover path, .c-roulette__aro #iconos g.js-spin-icon.is-active path {
        fill: #f37da6; }

.c-recipients {
  display: grid;
  grid-template-columns: repeat(11, 8.6%);
  grid-gap: 2px;
  justify-content: space-between;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  margin-top: -38px;
  transform-origin: center top; }
  .c-recipients__recipient-maximun {
    transition: 1s all;
    transform: translateY(100px);
    opacity: 0; }
  .c-recipients__recipient-minimun {
    transition: 1s all;
    transform: translateY(100px);
    opacity: 0; }
  .c-recipients__recipient {
    width: 57px;
    height: 144px;
    position: relative;
    overflow: hidden;
    margin: 0 auto; }
    .c-recipients__recipient img {
      width: 100%; }
    .c-recipients__recipient > svg {
      width: 100%;
      height: 144.77px; }
    .c-recipients__recipient.type1 .c-recipients__recipient-maximun path {
      fill: #28486f !important; }
    .c-recipients__recipient.type1 .c-recipients__recipient-maximun ellipse {
      fill: #28416e !important; }
    .c-recipients__recipient.type1 .c-recipients__recipient-minimun path {
      fill: #558dbc !important; }
    .c-recipients__recipient.type2 .c-recipients__recipient-maximun path {
      fill: #697049 !important; }
    .c-recipients__recipient.type2 .c-recipients__recipient-maximun ellipse {
      fill: #464c45 !important; }
    .c-recipients__recipient.type2 .c-recipients__recipient-minimun path {
      fill: #648951 !important; }
    .c-recipients__recipient.type3 .c-recipients__recipient-maximun path {
      fill: #709bd2 !important; }
    .c-recipients__recipient.type3 .c-recipients__recipient-maximun ellipse {
      fill: #475f8f !important; }
    .c-recipients__recipient.type3 .c-recipients__recipient-minimun path {
      fill: #88c2ea !important; }
    .c-recipients__recipient.type4 .c-recipients__recipient-maximun path {
      fill: #5fbfbe !important; }
    .c-recipients__recipient.type4 .c-recipients__recipient-maximun ellipse {
      fill: #138f85 !important; }
    .c-recipients__recipient.type4 .c-recipients__recipient-minimun path {
      fill: #5c9ac0 !important; }
    .c-recipients__recipient.type5 .c-recipients__recipient-maximun path {
      fill: #f08022 !important; }
    .c-recipients__recipient.type5 .c-recipients__recipient-maximun ellipse {
      fill: #c66922 !important; }
    .c-recipients__recipient.type5 .c-recipients__recipient-minimun path {
      fill: #ca7554 !important; }
    .c-recipients__recipient.type6 .c-recipients__recipient-maximun path {
      fill: #f9b016 !important; }
    .c-recipients__recipient.type6 .c-recipients__recipient-maximun ellipse {
      fill: #c0841b !important; }
    .c-recipients__recipient.type6 .c-recipients__recipient-minimun path {
      fill: #cd965b !important; }
    .c-recipients__recipient.type7 .c-recipients__recipient-maximun path {
      fill: #bc7056 !important; }
    .c-recipients__recipient.type7 .c-recipients__recipient-maximun ellipse {
      fill: #9a7a78 !important; }
    .c-recipients__recipient.type7 .c-recipients__recipient-minimun path {
      fill: #c79483 !important; }
    .c-recipients__recipient.type8 .c-recipients__recipient-maximun path {
      fill: #878787 !important; }
    .c-recipients__recipient.type8 .c-recipients__recipient-maximun ellipse {
      fill: #706f6f !important; }
    .c-recipients__recipient.type8 .c-recipients__recipient-minimun path {
      fill: #b2b2b2 !important; }
    .c-recipients__recipient.type9 .c-recipients__recipient-maximun path {
      fill: #dd6691 !important; }
    .c-recipients__recipient.type9 .c-recipients__recipient-maximun ellipse {
      fill: #c05681 !important; }
    .c-recipients__recipient.type9 .c-recipients__recipient-minimun path {
      fill: #f191b0 !important; }
    .c-recipients__recipient.type10 .c-recipients__recipient-maximun path {
      fill: #7864a3 !important; }
    .c-recipients__recipient.type10 .c-recipients__recipient-maximun ellipse {
      fill: #65568f !important; }
    .c-recipients__recipient.type10 .c-recipients__recipient-minimun path {
      fill: #ab5d8d !important; }
    .c-recipients__recipient.type11 .c-recipients__recipient-maximun path {
      fill: #5f8e8e !important; }
    .c-recipients__recipient.type11 .c-recipients__recipient-maximun ellipse {
      fill: #4a7272 !important; }
    .c-recipients__recipient.type11 .c-recipients__recipient-minimun path {
      fill: #63c1c6 !important; }
  .c-recipients__recipient-contain {
    position: relative; }
  .c-recipients__recipient-maximun {
    position: absolute;
    left: 0;
    bottom: 37px;
    z-index: -1;
    width: 100%;
    height: 100px; }
    .c-recipients__recipient-maximun span {
      position: absolute;
      top: 15px;
      color: white;
      z-index: 10000;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-family-primary);
      font-size: 10px; }
  .c-recipients__recipient-minimun {
    position: absolute;
    left: 0;
    bottom: 37px;
    z-index: -1;
    width: 100%;
    height: 100px; }
    .c-recipients__recipient-minimun span {
      position: absolute;
      top: 10px;
      color: white;
      z-index: 10000;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-family-primary);
      font-size: 10px; }
  .c-recipients__name {
    margin-top: 4px;
    text-align: center;
    font-size: 9px;
    font-weight: 500;
    color: #88c2ea;
    font-family: var(--font-family-primary);
    word-break: break-word; }
  @media screen and (max-width: 850px) {
    .c-roulette {
      transform: scale(0.9); }
    .c-recipients {
      grid-template-columns: repeat(6, 14%);
      grid-gap: 16px;
      margin-top: -64px; } }
  @media screen and (max-width: 770px) {
    .c-roulette {
      transform: scale(0.8); }
    .c-recipients {
      margin-top: -124px; } }
  @media screen and (max-width: 690px) {
    .c-roulette {
      transform: scale(0.7); }
    .c-recipients {
      margin-top: -206px; } }
  @media screen and (max-width: 610px) {
    .c-roulette {
      transform: scale(0.6); }
    .c-recipients {
      margin-top: -278px;
      transform: scale(0.9);
      grid-template-columns: repeat(4, 22%);
      grid-gap: 16px; } }
  @media screen and (max-width: 530px) {
    .c-roulette {
      transform: scale(0.52); }
    .c-recipients {
      margin-top: -365px;
      transform: scale(0.8); } }
  @media screen and (max-width: 400px) {
    .c-roulette {
      transform: scale(0.45); }
    .c-recipients {
      margin-top: -420px; } }


/*# sourceMappingURL=app.css.map*/