@charset "UTF-8";@import url("https://fonts.googleapis.com/css?family=Gruppo");@import url("https://fonts.googleapis.com/css?family=Titillium+Web:200");@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");@import url("https://fonts.googleapis.com/css?family=Kadwa");@import url("https://fonts.googleapis.com/css?family=Cormorant+Infant:300,400,500,600,700");





/*------------------------------------*\
    $STYLE GUIDELINES
\*------------------------------------*/
/**
 * Aquí incluímos todos los módulos (archivos .scss) que se van
 * a compilar en el CSS definitivo: /css/style.css.
 */
/**
* Librerías
**/
/*------------------------------------*\
    $SETTINGS
\*------------------------------------*/
/*------------------------------------*\
    $OBJETOS Y ABSTRACCIONES
\*------------------------------------*/
/**
 * Qué objetos y abstracciones vamos a usar? (true: se usa, false: no se usa)
 */
/**
 *
 * Definimos y configuramos las variables CSS que vamos a utilizar
 *
 */
/*------------------------------------*\
    $BREAKPOINTS
\*------------------------------------*/
/**

.text {
  color: pink;
  @include respond-to(medium) {
    color: maroon;
  }
}
 *
 */
/*------------------------------------*\
    $Z-INDEX
\*------------------------------------*/
/**
 * Podemos controlar los z-index con variables más reconocibles.
 * Para usarlo, implementamos la función z($layers):
 .element {
  z-index: z(z-index-1);
 }
 *
 */
/*------------------------------------*\
    $FONTS-DIR
\*------------------------------------*/
/**
 * Con agregar esta variable a las imágenes declaradas en CSS apañamos:
 */
/*------------------------------------*\
    $LAYOUT
\*------------------------------------*/
/**
 * Definimos elementos constantes del layout
 */
/*------------------------------------*\
    $grid
\*------------------------------------*/
/*------------------------------------*\
    $FONT-FACE
\*------------------------------------*/
/**
 * Definimos las fuentes a utilizar:
 * $basefont para todos los textos inline
 * $altfont para textos alternativos, como citas, intro, etc...
 * $codefont para código
 */
/*------------------------------------*\
    $TAMAÑOS
\*------------------------------------*/
/**
 * Definimos los tamaños de fuentes:

 */
/*
 * Las variables de tamaño las definimos en un MAP, puedes añadir, quitar o cambiarlas.
 * Vienen dadas en REM. Esto creará una clase con el mismo nombre de la variable:

  .x-small { font-size: .8rem}

 * También podemos asignar tamaños con un función llamada fs:

    .selector { font-size: fs(x-small);}

 *
 */
/*------------------------------------*\
    $COLORS
\*------------------------------------*/
/**
 * Escala de grises
 * A veces no queremos que el negro sea "negro" o el blanco "blanco", puedes cambiarlos.
 */
/**
 * Variable map colors
 * Para usar un color:
 * .className {color: color(blue);}
 */
/**
 * Brand stuff
 */
/*------------------------------------*\
    $TEXTURAS
\*------------------------------------*/
/**
 * Definimos Colores y elementos de popups, mensajes de alerta, etc...
 */
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/*
* Fácil de usar: las variables a usar están en settings.scss y son:

  'small'  : 20em,
  'medium' : 48em,
  'large'  : 60em,


/* Y el uso va como sigue:

.foo {
  color: red;
  @include respond-to('small') {
    color: blue;
  }
}
*/
/**
* Centrar y dar un ancho máximo igual a $pagemaxwidth.
*/
/**
 * Definimos el MIXIN para las cajas de MARS:
 * $color para el borde de la caja
 * $borderwidth para el ancho del border
 * @include border-shape($red,$gap)
 */
/*------------------------------------*\
    $FUNCIONES
\*------------------------------------*/
/*
 * Función para controlar el index

 	.selector { z-index: z(min);}

 * compila:

	.selector { z-index: 9001;}

 * Puedes ver las variables en el MAP en settings.scss
 */
/*
 * Función para mantener el tamaño de fuente consistente

 .selector { font-size: fs(x-small);}

 * Puedes ver en settings.scss las variables que se utilizan.
 */
/*------------------------------------*\
    $PLACEHOLDERS
\*------------------------------------*/
/**
  * The ghost, nudged to maintain perfect centering
  */
/**
* Escondemos el texto solo VISUALMENTE
*/
/**
* Escondemos pero mantenemos layout.
*/
/**
* Clear floats.
* http://bit.ly/1e3YaBH
*/
/*------------------------------------*\
    $ANIMATIONS
\*------------------------------------*/
/**
* Libreria de animaciones CSS3
*/
@keyframes fadeIn-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut-animation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes open {
  25% {
    opacity: 1;
  }
  45% {
    transform: scale(1, 1) rotateY(89.7deg);
  }
  100% {
    transform: scale(1, 1) rotateY(0);
    opacity: 1;
  }
}
@keyframes close {
  65% {
    transform: scale(1, 1) rotateY(89.7deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.5, 0.5) rotateY(89.7deg);
    opacity: 0;
  }
}
@keyframes gradient-animation {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes location-animation {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes bounce-animation {
  0% {
    opacity: 0;
    transform: translateY(-2000px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    transform: translateY(5px) rotate(-45deg);
  }
  80% {
    transform: translateY(-10px) rotate(-45deg);
  }
  100% {
    transform: translateY(0) rotate(-45deg);
  }
}
@keyframes bounce-up {
  0% {
    opacity: 0;
    transform: translateY(2000px) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: translateY(0deg) rotate(0deg);
  }
  100% {
    transform: translateY(0deg) rotate(0deg);
  }
}
@keyframes fly-object {
  0% {
    opacity: 0;
    transform: translateX(-2500px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    transform: translateX(5px) rotate(-25deg);
  }
  80% {
    transform: translateX(-10px) rotate(-15deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}
@keyframes bounce-up2 {
  60% {
    opacity: 0;
    transform: translateY(2000px) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0deg) rotate(0deg);
  }
}
@keyframes bounce-down {
  0% {
    transform: translateY(0deg) rotate(0deg);
  }
  50% {
    transform: translateY(0deg) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(2000px) rotate(0deg);
    opacity: 0;
  }
}
@keyframes bright-box {
  0% {
    box-shadow: 0 1px 30px 0 #ff8f00;
  }
  80% {
    box-shadow: 0 1px 30px 0 #ff8f00;
  }
  100% {
    box-shadow: none;
  }
}
@keyframes loading {
  0% {
    transform: translateY(100px) scale(1);
  }
  50% {
    transform: translateY(-30px) scale(1);
  }
  100% {
    transform: translateY(-150px) scale(1);
  }
}
@keyframes loading-mini {
  0% {
    transform: translateY(25px) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1);
  }
  100% {
    transform: translateY(-50px) scale(1);
  }
}
@keyframes shake-animation {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}
@keyframes shakeUp-animation {
  0%, 100% {
    transform: translateY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateY(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateY(5px);
  }
}
/**********
* Grow in *
***********/
@keyframes growIn-animation {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.growIn-animation {
  transform: scale(0.2);
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: growIn-animation;
}
/*************
* FadeInLeft *
*************/
@keyframes fadeInLeft-animation {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInLeft-animation {
  opacity: 0;
  transform: translateX(-2000px);
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInLeft-animation;
}
/*************
* FadeInLeft *
*************/
@keyframes fadeInRight-animation {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInRight-animation {
  opacity: 0;
  transform: translateX(2000px);
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInRight-animation;
}
/*********************
* fadeInUpShort
*********************/
@keyframes fadeInUpShort-animation {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*********************
* bounceOut-animation
*********************/
@keyframes bounceOut-animation {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}
.bounceOut-animation {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: bounceOut-animation;
}
.fadeInCenter-animation {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeIn-animation;
}
/**
	* Clases de animaciones CSS3 style guide
*/
.animation {
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;
  width: 100%;
  display: block;
  height: 50px;
  margin-bottom: 6px;
}
.fadeIn-animation {
  background-color: #ff8f00;
}
.fadeIn-animation.fadeIn-play {
  animation-name: fadeIn-animation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-direction: normal;
  -o-animation-name: fadeIn-animation;
  -o-animation-duration: 0.5s;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: 1;
  -o-animation-timing-function: linear;
  -o-animation-direction: normal;
  -moz-animation-name: fadeIn-animation;
  -moz-animation-duration: 0.5s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: linear;
  -moz-animation-direction: normal;
  -webkit-animation-name: fadeIn-animation;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: normal;
  animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.fadeOut-animation {
  background-color: #8020bb;
}
.fadeOut-animation.fadeOut-play {
  animation-name: fadeOut-animation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-direction: normal;
  -o-animation-name: fadeOut-animation;
  -o-animation-duration: 0.5s;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: 1;
  -o-animation-timing-function: linear;
  -o-animation-direction: normal;
  -moz-animation-name: fadeOut-animation;
  -moz-animation-duration: 0.5s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: linear;
  -moz-animation-direction: normal;
  -webkit-animation-name: fadeOut-animation;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: normal;
  animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.open-animation {
  background-color: #009dda;
}
.open-animation.open-play {
  transform: scale(0.5, 0.5) rotateY(90deg);
  animation-name: open;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-direction: normal;
  -o-animation-name: open;
  -o-animation-duration: 0.5s;
  -o-animation-fill-mode: none;
  -o-animation-iteration-count: 1;
  -o-animation-timing-function: ease;
  -o-animation-direction: normal;
  -moz-animation-name: open;
  -moz-animation-duration: 0.5s;
  -moz-animation-fill-mode: none;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-direction: normal;
  -webkit-animation-name: open;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: none;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-direction: normal;
  animation-delay: 0s;
  -o-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.closed-animation {
  background-color: rgb(102, 102, 102);
}
.closed-animation.closed-play {
  transform: scale(1, 1) rotateY(0deg);
  animation-name: close;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-direction: normal;
  -o-animation-name: close;
  -o-animation-duration: 1s;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: 1;
  -o-animation-timing-function: linear;
  -o-animation-direction: normal;
  -moz-animation-name: close;
  -moz-animation-duration: 1s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: linear;
  -moz-animation-direction: normal;
  -webkit-animation-name: close;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: normal;
  animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.rotateY-animation {
  background-color: #ef5350;
}
.rotateY-animation.rotate-play {
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  transform: rotateY(180deg);
}
.gradient-animation {
  background: linear-gradient(-45deg, rgb(255, 255, 255), #009dda, #6aa84f, #009dda);
  background-size: 400% 400%;
}
.gradient-animation.gradient-play {
  animation-name: gradient-animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: normal;
  -o-animation-name: gradient-animation;
  -o-animation-duration: 5s;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: ease;
  -o-animation-direction: normal;
  -moz-animation-name: gradient-animation;
  -moz-animation-duration: 5s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease;
  -moz-animation-direction: normal;
  -webkit-animation-name: gradient-animation;
  -webkit-animation-duration: 5s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
  -webkit-animation-direction: normal;
  animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.fadeIn--animation {
  animation-name: fadeIn-animation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-direction: normal;
  -o-animation-name: fadeIn-animation;
  -o-animation-duration: 0.5s;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: 1;
  -o-animation-timing-function: linear;
  -o-animation-direction: normal;
  -moz-animation-name: fadeIn-animation;
  -moz-animation-duration: 0.5s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: linear;
  -moz-animation-direction: normal;
  -webkit-animation-name: fadeIn-animation;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: normal;
  animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.fadeOut--animation {
  animation-name: fadeOut-animation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-direction: normal;
  -o-animation-name: fadeOut-animation;
  -o-animation-duration: 0.5s;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: 1;
  -o-animation-timing-function: linear;
  -o-animation-direction: normal;
  -moz-animation-name: fadeOut-animation;
  -moz-animation-duration: 0.5s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: linear;
  -moz-animation-direction: normal;
  -webkit-animation-name: fadeOut-animation;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: normal;
  animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.open--animation {
  animation-name: open;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-direction: normal;
  -o-animation-name: open;
  -o-animation-duration: 0.5s;
  -o-animation-fill-mode: none;
  -o-animation-iteration-count: 1;
  -o-animation-timing-function: ease;
  -o-animation-direction: normal;
  -moz-animation-name: open;
  -moz-animation-duration: 0.5s;
  -moz-animation-fill-mode: none;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-direction: normal;
  -webkit-animation-name: open;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: none;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-direction: normal;
  animation-delay: 0s;
  -o-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.closed--animation {
  transform: scale(1, 1) rotateY(0deg);
  animation-name: close;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-direction: normal;
  -o-animation-name: close;
  -o-animation-duration: 1s;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: 1;
  -o-animation-timing-function: linear;
  -o-animation-direction: normal;
  -moz-animation-name: close;
  -moz-animation-duration: 1s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: linear;
  -moz-animation-direction: normal;
  -webkit-animation-name: close;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: normal;
  animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.rotateY--animation {
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  transform: rotateY(180deg);
}
.gradient--animation {
  background: linear-gradient(-45deg, rgb(255, 255, 255), #009dda, #6aa84f, #009dda);
  background-size: 400% 400%;
  animation-name: gradient-animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: normal;
  -o-animation-name: gradient-animation;
  -o-animation-duration: 5s;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: ease;
  -o-animation-direction: normal;
  -moz-animation-name: gradient-animation;
  -moz-animation-duration: 5s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease;
  -moz-animation-direction: normal;
  -webkit-animation-name: gradient-animation;
  -webkit-animation-duration: 5s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
  -webkit-animation-direction: normal;
  animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.location-animation .icon {
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 50% 50% 50% 0;
  background-color: #009dda;
  transform: rotate(-45deg);
  margin: -20px 0 0 -20px;
  position: absolute;
  left: 50%;
  top: 50%;
  animation-name: bounce-animation;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-direction: normal;
  -o-animation-name: bounce-animation;
  -o-animation-duration: 1s;
  -o-animation-fill-mode: both;
  -o-animation-iteration-count: 1;
  -o-animation-timing-function: ease;
  -o-animation-direction: normal;
  -moz-animation-name: bounce-animation;
  -moz-animation-duration: 1s;
  -moz-animation-fill-mode: both;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-direction: normal;
  -webkit-animation-name: bounce-animation;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-direction: normal;
  animation-delay: 0s;
  -o-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.location-animation .icon:after {
  content: "";
  width: 14px;
  height: 14px;
  margin: 8px 0 0 8px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  position: absolute;
}
.location-animation .effect {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 11px 0 0 -12px;
  transform: rotateX(55deg);
  z-index: -2;
}
.location-animation .effect:after {
  content: "";
  border-radius: 50%;
  width: 40px;
  height: 40px;
  position: absolute;
  margin: -13px 0 0 -13px;
  opacity: 0;
  box-shadow: 0 0 1px 2px #009dda;
  animation-name: location-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-direction: normal;
  -o-animation-name: location-animation;
  -o-animation-duration: 1s;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: ease-out;
  -o-animation-direction: normal;
  -moz-animation-name: location-animation;
  -moz-animation-duration: 1s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-out;
  -moz-animation-direction: normal;
  -webkit-animation-name: location-animation;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-direction: normal;
  animation-delay: 1.1s;
  -o-animation-delay: 1.1s;
  -moz-animation-delay: 1.1s;
  -webkit-animation-delay: 1.1s;
}
.fly-animation {
  animation-name: fly-object;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-direction: normal;
  -o-animation-name: fly-object;
  -o-animation-duration: 1s;
  -o-animation-fill-mode: both;
  -o-animation-iteration-count: 1;
  -o-animation-timing-function: ease;
  -o-animation-direction: normal;
  -moz-animation-name: fly-object;
  -moz-animation-duration: 1s;
  -moz-animation-fill-mode: both;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-direction: normal;
  -webkit-animation-name: fly-object;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-direction: normal;
  animation-delay: 0s;
  -o-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.shake-animation {
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  animation-name: shake-animation;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-direction: normal;
  -o-animation-name: shake-animation;
  -o-animation-duration: 2s;
  -o-animation-fill-mode: both;
  -o-animation-iteration-count: 1;
  -o-animation-timing-function: ease;
  -o-animation-direction: normal;
  -moz-animation-name: shake-animation;
  -moz-animation-duration: 2s;
  -moz-animation-fill-mode: both;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-direction: normal;
  -webkit-animation-name: shake-animation;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-direction: normal;
  animation-delay: 0s;
  -o-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
/**
* Bases
**/
/*------------------------------------*\
    $CONTENIDO
\*------------------------------------*/
/**
 * Contenido..................... Esto que lees

 * Variables..................... Configuramos todas las variables del framework

 * Mixins........................ Mixins de SASS

 * Helpers....................... Clases de ayuda

 * Reset......................... Reinicio de valores CSS

 * Fuentes....................... Fuentes que vamos a importar

 * Links......................... Formas y estilos de los links

 * Tablas........................ Estilos de las tablas

 * Botones....................... Estilos de Botones, skins y variantes

 * Elementos..................... Elementos varios como Imagen, HR, etc...

 * Tipografía.................... Encabezados, small, párrafos, listas, etc...

 * Navegación.................... Una navegación, por si quieres usar esta y no la tuya propia

 * Formularios................... Estilos de todos los elementos de formularios y sus variantes

 * Sitio......................... Aquí escribes tus estilos para la web se vea como tú quieres ;)

 * Paginación.................... Estilos básicos para las paginaciones

 * Texturas...................... Badges, cajas y wells

 * Breakpoints................... Importamos breakpoints basados en las variables @bp$

 */
/*------------------------------------*\
    $RESET
\*------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, main, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}
*, *::before, *::after {
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
img {
  max-width: 100%;
  border-width: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}
/**
* Selectores de elemento: un super "normalize":
**/
/*------------------------------------*\
    $ELEMENTOS-FIGURE
\*------------------------------------*/
figure {
  margin-bottom: 1.3em;
}
figure img {
  margin-bottom: 0.325em;
}
figure figcaption {
  display: block;
  font-weight: normal;
  font-size: 0.75rem;
  font-style: normal;
  color: rgb(153, 153, 153);
}
/*------------------------------------*\
    $FORMULARIOS
\*------------------------------------*/
form {
  display: block;
  margin-bottom: 24px;
}
form .form--error {
  border-bottom: 1px solid #ec0000;
}
form .form--error + label {
  color: #ec0000;
}
form .message--error {
  width: 100%;
  display: block;
  text-align: center;
  color: #ec0000;
  font-size: 0.75rem;
}
.label,
.input,
.select,
.textarea {
  font-family: "Titillium Web", sans-serif;
  font-size: 1rem;
  line-height: normal;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  font-size: 1rem;
  cursor: text;
  transition: all 0.2s ease-out;
  transform-origin: 0% 100%;
  text-align: initial;
  transform: translateY(12px);
  pointer-events: none;
}
.label.active {
  transform: translateY(-14px) scale(0.9);
  transform-origin: 0 0;
}
.input, .textarea {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgb(204, 204, 204);
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  margin: 0 0 24px 0;
  padding: 0;
  box-shadow: none;
}
.input:focus, .textarea:focus {
  border-bottom: 1px solid #009dda;
  box-shadow: 0 1px 0 0 #009dda;
}
.input:focus + label, .textarea:focus + label {
  color: #009dda;
}
.textarea {
  overflow-y: hidden;
  padding: 6px 0;
  min-height: 3rem;
  height: auto;
}
.checkbox {
  margin: 12px 0;
}
.checkbox label {
  cursor: pointer;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox] + label:before {
  content: "\eb15";
  font-family: "icomoon";
  color: transparent;
  font-size: 0.75rem;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid rgb(153, 153, 153);
  margin-right: 6px;
  position: relative;
  top: 2px;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
input[type=checkbox]:checked + label:before {
  content: "\eb15";
  font-family: "icomoon";
  color: #009dda;
  font-size: 0.75rem;
  border: 1px solid transparent;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.radiobutton {
  margin: 12px 0;
}
.radiobutton label {
  cursor: pointer;
}
input[type=radio] {
  display: none;
}
input[type=radio] + label:before {
  content: "\eb15";
  font-family: "icomoon";
  color: transparent;
  font-size: 0.75rem;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid rgb(153, 153, 153);
  margin-right: 6px;
  position: relative;
  top: 2px;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
input[type=radio]:checked + label:before {
  content: "\eb15";
  font-family: "icomoon";
  color: #009dda;
  font-size: 0.75rem;
  border: 1px solid transparent;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.input--login {
  width: 100%;
  display: block;
  border-radius: 36px;
  padding: 18px 24px;
  margin-bottom: 24px;
  border: 1px solid rgb(153, 153, 153);
}
input[type=file] {
  display: none;
}
input[type=file] + label {
  cursor: pointer;
  margin: 0;
}
.switch label {
  position: relative;
  width: 75px;
  height: 36px;
  background-color: rgb(228, 233.4, 241.5);
  border-radius: 18px;
  padding: 6px;
  display: block;
  cursor: pointer;
}
.switch label:before {
  content: "";
  position: relative;
  left: 0;
  top: 2px !important;
  width: 22px;
  height: 22px;
  display: block;
  background-color: rgb(153, 153, 153);
  border-radius: 100%;
  opacity: 0.4;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.switch .input--switch {
  display: none;
}
.switch .input--switch:checked + label {
  background-color: rgba(0, 157, 218, 0.2);
}
.switch .input--switch:checked + label:before {
  content: "";
  background-color: #009dda;
  left: calc(100% - 22px);
  opacity: 1;
  top: 2px;
}
.select--wrapper {
  width: 100%;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
}
.select--wrapper select {
  display: none;
}
.select {
  width: 100%;
  position: relative;
}
.select.opened .select--arrow:after {
  transform: rotate(-135deg) translateY(-50%);
}
.select.opened .select--options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}
.select--arrow {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 0 12px 0;
  border-bottom: 1px solid rgb(204, 204, 204);
  cursor: pointer;
}
.select--arrow:after {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  top: 50%;
  right: 12px;
  font-weight: bold;
  border-bottom: 2px solid rgb(204, 204, 204);
  border-right: 2px solid rgb(204, 204, 204);
  transform: rotate(45deg) translateY(-50%);
  transition: all 0.4s ease-in-out;
  transform-origin: 50% 0;
}
.select--options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 100%;
  margin: 6px 0;
  box-sizing: border-box;
  background: rgb(255, 255, 255);
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
}
.select--option__item {
  position: relative;
  display: block;
  padding: 12px;
  color: #009dda;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}
.select--option__item:last-of-type {
  border-bottom: 0;
}
.select--option__item:hover, .select--option__item.selection {
  background: #f5f7fa;
}
.dropdown {
  position: relative;
}
.dropdown.opened .dropdown--content {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}
.dropdown--button {
  width: 100%;
}
.dropdown--button:hover {
  color: inherit;
}
.dropdown--content {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  padding: 12px;
  margin-top: 12px;
  background-color: rgb(255, 255, 255);
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
}
.dropdown--content li {
  width: 100%;
  display: block;
  padding-bottom: 6px;
}
.dropdown--content:before {
  position: absolute;
  display: block;
  content: "";
  bottom: 100%;
  right: calc(50% - 10px);
  width: 10px;
  height: 10px;
  margin-bottom: -4px;
  border-top: 1px solid rgb(204, 204, 204);
  border-left: 1px solid rgb(204, 204, 204);
  background-color: rgb(255, 255, 255);
  transform: rotate(45deg);
  transition: all 0.4s ease-in-out;
}
select[multiple],
select[size] {
  height: auto;
}
input[type=hidden] {
  display: none;
}
.formfield {
  position: relative;
  margin: 12px 0;
}
.formsearch {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.search {
  position: relative;
  display: inline-block;
  height: 30px;
  width: 0;
  background: none;
  padding: 6px 24px;
  font-family: "Titillium Web", sans-serif;
  font-size: 1rem;
  outline: none;
  border: none;
  cursor: pointer;
  z-index: 3;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.search:focus {
  position: relative;
  width: calc(100% - 10px);
  left: 0px;
  padding: 0 0 6px 6px;
  margin-right: 0px;
  border-bottom: 1px solid rgb(204, 204, 204);
  cursor: text;
}
.search--icon {
  position: absolute;
  top: -6px;
  display: inline-block;
  background: none;
  height: 35px;
  width: 35px;
  font-size: 1.75rem;
  color: #ff8f00;
  border: none;
  outline: none;
  z-index: 2;
  transform: translateX(-100%);
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  cursor: not-allowed;
}
input[type=file]:focus,
input[type=radio]:focus,
input[type=checkbox]:focus,
select:focus {
  box-shadow: none;
}
::-webkit-input-placeholder {
  font-size: 1rem;
}
input:-moz-placeholder {
  font-size: 1rem;
}
/*Eliminar el amarillo de autocomplete en chrome*/
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
}
/**
* Validamos los formularios que son "required":
* http://coolvillage.es/ayuda-al-usuario-a-rellenar-formularios-con-css/
**/
input:required:focus:invalid {
  background-color: rgb(255, 6.5, 6.5);
  border: 1px solid #ec0000;
}
input:required:focus:valid {
  background-color: rgb(237.1714285714, 247.2285714286, 166.7714285714);
  border: 1px solid #abc111;
}
input::-ms-clear {
  display: none;
}
/*------------------------------------*\
    $LINKS
\*------------------------------------*/
a {
  text-decoration: none;
  color: #009dda;
}
a:visited {
  color: #009dda;
}
a:hover {
  text-decoration: none;
  color: #ff8f00;
}
a:focus {
  outline: none;
  color: #009dda;
}
a:hover, a:active {
  outline: 0;
}
/*------------------------------------*\
    $TIPOGRAFÍA
\*------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: inherit;
  font-weight: normal;
  color: inherit;
  text-rendering: optimizelegibility;
}
h1 small,
h2 small,
h3 small {
  font-weight: normal;
  display: block;
  color: rgb(102, 102, 102);
}
h1, .h1 {
  margin-bottom: 12px;
  font-size: 2.5rem;
  line-height: 1.5;
}
h2, .h2 {
  margin-bottom: 12px;
  font-size: 1.75rem;
  line-height: 1.5;
}
h3, .h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
  line-height: 1.5;
}
h4, .h4 {
  margin-bottom: 12px;
  font-size: 1rem;
  line-height: 1.5;
}
h5, .h5 {
  margin-bottom: 12px;
  font-size: 1rem;
  line-height: 1.5;
}
h6, .h6 {
  margin-bottom: 12px;
  font-size: 1rem;
  line-height: 1.5;
}
p,
ol,
ul,
dl,
address {
  margin-bottom: 1.3em;
  line-height: 1.3em;
}
small {
  font-size: 0.625rem;
  color: rgb(102, 102, 102);
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li ul {
  margin: 0;
}
blockquote {
  margin: 0 0 1.3em 0;
  padding-left: 24px;
  border-left: 2px solid rgb(204, 204, 204);
  font-family: Georgia, Times, "Times New Roman";
  font-style: normal;
}
blockquote p {
  font-size: 2.5rem;
  color: rgb(153, 153, 153);
  font-style: italic;
}
q {
  quotes: none;
  font-style: italic;
}
blockquote p::before,
blockquote p::after,
q:before,
q:after {
  content: "";
}
cite {
  font-style: normal;
}
dl,
dd {
  margin-bottom: 1.3em;
}
dt {
  font-weight: bold;
}
abbr[title] {
  border-bottom: 1px dotted rgb(204, 204, 204);
  cursor: help;
}
b, strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
ins {
  background-color: white;
  color: rgb(102, 102, 102);
  text-decoration: none;
}
mark {
  background-color: yellow;
  color: rgb(102, 102, 102);
}
pre,
code,
kbd,
samp {
  font-family: "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.3em;
}
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
sub,
sup {
  position: relative;
  font-size: 0.625rem;
  line-height: 0;
  vertical-align: 1.3em;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
hr {
  clear: both;
  display: block;
  margin: 1em 0;
  padding: 0;
  height: 1px;
  border: 0;
  border-top: 1px solid rgb(204, 204, 204);
}
/*------------------------------------*\
    $TABLAS
\*------------------------------------*/
table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1.3em;
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  display: table;
  table-layout: fixed;
}
table td,
table th {
  vertical-align: middle;
  border-bottom: 1px solid rgb(204, 204, 204);
  font-size: 1rem;
  line-height: 1.3em;
  text-align: left;
}
table td {
  padding: 6px 0;
}
table th {
  padding-bottom: 12px;
  font-weight: bold;
  border-bottom: 1px solid #009dda;
}
table thead td,
table thead th {
  vertical-align: bottom;
  background-color: rgb(255, 255, 255);
  color: rgb(102, 102, 102);
  cursor: pointer;
}
table colgroup + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table thead:first-child tr:first-child td,
table thead:first-child tr:first-child th {
  border-top: 0;
}
table tbody tr td,
table tbody tr th {
  background-color: rgb(255, 255, 255);
}
table tbody tr:hover td,
table tbody tr:hover th {
  background-color: rgb(255, 255, 255);
}
table [class^=icon-], table [class*=icon-] {
  font-size: 1.25rem;
}
/*------------------------------------*\
    $LIST
\*------------------------------------*/
.list {
  margin: 0;
  padding: 0 0 0 24px;
  list-style: none;
}
.list__item {
  padding-bottom: 6px;
}
.list--objects {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  padding: 24px;
  margin-top: 24px;
  background-color: #f5f7fa;
  border: 1px solid rgb(204, 204, 204);
  z-index: 0;
}
.list--objects.list--objects__left {
  -moz-justify-content: flex-start;
  justify-content: flex-start;
}
.list--objects.list--objects__right {
  -moz-justify-content: flex-end;
  justify-content: flex-end;
}
.list--objects.list--objects__center {
  -moz-justify-content: center;
  justify-content: center;
}
.list--objects.list--objects__between {
  -moz-justify-content: space-between;
  justify-content: space-between;
}
.list--objects.list--objects__wrap {
  flex-wrap: wrap;
}
.list--objects.list--objects__wrap .list--objects__item {
  padding-bottom: 24px;
}
.list--objects__item {
  padding: 0 6px;
}
.list--objects__item.full--width {
  width: 100%;
}
.list--objects__item .icons [class^=icon-], .list--objects__item .icons [class*=icon-] {
  width: 100%;
  display: block;
  text-align: center;
  font-size: 1.25rem;
}
.list--objects__item .title {
  width: 100%;
  display: block;
  color: rgb(0, 0, 0);
  text-align: center;
  padding-top: 6px;
  text-transform: lowercase;
}
.list--objects__item .link [class^=icon-], .list--objects__item .link [class*=icon-] {
  text-align: left;
  padding-top: 3px;
  padding-right: 3px;
  float: left;
}
/*------------------------------------*\
    $VISUALES
\*------------------------------------*/
/**
* Layout del sitio
**/
/*------------------------------------*\
    $GRID FLEXBOX
\*------------------------------------*/
.grid {
  display: -moz-flex;
  display: flex;
  flex-wrap: wrap;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: -6px;
  margin-right: -6px;
}
.grid.grid-start {
  -moz-justify-content: flex-start;
  justify-content: flex-start;
}
.grid.grid-center {
  -moz-justify-content: center;
  justify-content: center;
}
.grid.grid-end {
  -moz-justify-content: flex-end;
  justify-content: flex-end;
}
.grid.grid-around {
  -moz-justify-content: space-around;
  justify-content: space-around;
}
.grid.grid-between {
  -moz-justify-content: space-between;
  justify-content: space-between;
}
.grid.grid-top {
  -moz-align-items: flex-start;
  align-items: flex-start;
}
.grid.grid-middel {
  -moz-align-items: center;
  align-items: center;
}
.grid.grid-bottom {
  -moz-align-items: flex-end;
  align-items: flex-end;
}
.grid.grid-reverse {
  -moz-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
@media (min-width: 18em) {
  .s-1 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
    padding: 0 6px;
  }
  .s-2 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
    padding: 0 6px;
  }
  .s-3 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 25%;
    max-width: 25%;
    padding: 0 6px;
  }
  .s-4 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
    padding: 0 6px;
  }
  .s-5 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
    padding: 0 6px;
  }
  .s-6 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 50%;
    max-width: 50%;
    padding: 0 6px;
  }
  .s-7 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
    padding: 0 6px;
  }
  .s-8 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
    padding: 0 6px;
  }
  .s-9 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 75%;
    max-width: 75%;
    padding: 0 6px;
  }
  .s-10 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
    padding: 0 6px;
  }
  .s-11 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
    padding: 0 6px;
  }
  .s-12 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 100%;
    max-width: 100%;
    padding: 0 6px;
  }
}
@media (min-width: 48em) {
  .m-1 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
    padding: 0 6px;
  }
  .m-2 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
    padding: 0 6px;
  }
  .m-3 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 25%;
    max-width: 25%;
    padding: 0 6px;
  }
  .m-4 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
    padding: 0 6px;
  }
  .m-5 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
    padding: 0 6px;
  }
  .m-6 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 50%;
    max-width: 50%;
    padding: 0 6px;
  }
  .m-7 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
    padding: 0 6px;
  }
  .m-8 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
    padding: 0 6px;
  }
  .m-9 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 75%;
    max-width: 75%;
    padding: 0 6px;
  }
  .m-10 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
    padding: 0 6px;
  }
  .m-11 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
    padding: 0 6px;
  }
  .m-12 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 100%;
    max-width: 100%;
    padding: 0 6px;
  }
}
@media (min-width: 60em) {
  .l-1 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
    padding: 0 6px;
  }
  .l-2 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
    padding: 0 6px;
  }
  .l-3 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 25%;
    max-width: 25%;
    padding: 0 6px;
  }
  .l-4 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
    padding: 0 6px;
  }
  .l-5 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
    padding: 0 6px;
  }
  .l-6 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 50%;
    max-width: 50%;
    padding: 0 6px;
  }
  .l-7 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
    padding: 0 6px;
  }
  .l-8 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
    padding: 0 6px;
  }
  .l-9 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 75%;
    max-width: 75%;
    padding: 0 6px;
  }
  .l-10 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
    padding: 0 6px;
  }
  .l-11 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
    padding: 0 6px;
  }
  .l-12 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 100%;
    max-width: 100%;
    padding: 0 6px;
  }
}
@media (min-width: 80em) {
  .d-1 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
    padding: 0 6px;
  }
  .d-2 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
    padding: 0 6px;
  }
  .d-3 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 25%;
    max-width: 25%;
    padding: 0 6px;
  }
  .d-4 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
    padding: 0 6px;
  }
  .d-5 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
    padding: 0 6px;
  }
  .d-6 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 50%;
    max-width: 50%;
    padding: 0 6px;
  }
  .d-7 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
    padding: 0 6px;
  }
  .d-8 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
    padding: 0 6px;
  }
  .d-9 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 75%;
    max-width: 75%;
    padding: 0 6px;
  }
  .d-10 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
    padding: 0 6px;
  }
  .d-11 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
    padding: 0 6px;
  }
  .d-12 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    flex-basis: 100%;
    max-width: 100%;
    padding: 0 6px;
  }
}
@media (min-width: 18em) {
  .s-offset-1 {
    margin-left: 8.3333333333%;
  }
  .s-offset-2 {
    margin-left: 16.6666666667%;
  }
  .s-offset-3 {
    margin-left: 25%;
  }
  .s-offset-4 {
    margin-left: 33.3333333333%;
  }
  .s-offset-5 {
    margin-left: 41.6666666667%;
  }
  .s-offset-6 {
    margin-left: 50%;
  }
  .s-offset-7 {
    margin-left: 58.3333333333%;
  }
  .s-offset-8 {
    margin-left: 66.6666666667%;
  }
  .s-offset-9 {
    margin-left: 75%;
  }
  .s-offset-10 {
    margin-left: 83.3333333333%;
  }
  .s-offset-11 {
    margin-left: 91.6666666667%;
  }
  .s-offset-12 {
    margin-left: 100%;
  }
}
@media (min-width: 48em) {
  .m-offset-1 {
    margin-left: 8.3333333333%;
  }
  .m-offset-2 {
    margin-left: 16.6666666667%;
  }
  .m-offset-3 {
    margin-left: 25%;
  }
  .m-offset-4 {
    margin-left: 33.3333333333%;
  }
  .m-offset-5 {
    margin-left: 41.6666666667%;
  }
  .m-offset-6 {
    margin-left: 50%;
  }
  .m-offset-7 {
    margin-left: 58.3333333333%;
  }
  .m-offset-8 {
    margin-left: 66.6666666667%;
  }
  .m-offset-9 {
    margin-left: 75%;
  }
  .m-offset-10 {
    margin-left: 83.3333333333%;
  }
  .m-offset-11 {
    margin-left: 91.6666666667%;
  }
  .m-offset-12 {
    margin-left: 100%;
  }
}
@media (min-width: 60em) {
  .l-offset-1 {
    margin-left: 8.3333333333%;
  }
  .l-offset-2 {
    margin-left: 16.6666666667%;
  }
  .l-offset-3 {
    margin-left: 25%;
  }
  .l-offset-4 {
    margin-left: 33.3333333333%;
  }
  .l-offset-5 {
    margin-left: 41.6666666667%;
  }
  .l-offset-6 {
    margin-left: 50%;
  }
  .l-offset-7 {
    margin-left: 58.3333333333%;
  }
  .l-offset-8 {
    margin-left: 66.6666666667%;
  }
  .l-offset-9 {
    margin-left: 75%;
  }
  .l-offset-10 {
    margin-left: 83.3333333333%;
  }
  .l-offset-11 {
    margin-left: 91.6666666667%;
  }
  .l-offset-12 {
    margin-left: 100%;
  }
}
@media (min-width: 80em) {
  .d-offset-1 {
    margin-left: 8.3333333333%;
  }
  .d-offset-2 {
    margin-left: 16.6666666667%;
  }
  .d-offset-3 {
    margin-left: 25%;
  }
  .d-offset-4 {
    margin-left: 33.3333333333%;
  }
  .d-offset-5 {
    margin-left: 41.6666666667%;
  }
  .d-offset-6 {
    margin-left: 50%;
  }
  .d-offset-7 {
    margin-left: 58.3333333333%;
  }
  .d-offset-8 {
    margin-left: 66.6666666667%;
  }
  .d-offset-9 {
    margin-left: 75%;
  }
  .d-offset-10 {
    margin-left: 83.3333333333%;
  }
  .d-offset-11 {
    margin-left: 91.6666666667%;
  }
  .d-offset-12 {
    margin-left: 100%;
  }
}
.grid-auto {
  -moz-flex-grow: 1;
  flex-grow: 1;
  flex-basis: 0;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 6px;
  max-width: 100%;
}
.order-first {
  -moz-order: -1;
  order: -1;
}
.order-last {
  -moz-order: 1;
  order: 1;
}
/*------------------------------------*\
    $TOPBAR
\*------------------------------------*/
/**
* Estilos genéricos para topbar
*/
.header--guidelines {
  width: 100%;
  display: block;
  padding: 48px 12.5%;
  background-color: #f5f7fa;
  border-bottom: 1px solid #009dda;
}
@media (min-width: 18em) {
  .header--guidelines {
    position: static;
  }
}
.header--guidelines .h1 {
  font-size: 3.5rem;
  margin: 0;
  padding-top: 6px;
  text-transform: Capitalize;
  line-height: 1.3em;
}
.header--guidelines .subtitle {
  width: 100%;
  display: block;
  font-size: 1rem;
  margin: -12px 0;
  padding-left: 3px;
}
/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
/**
* Estilos genéricos para el footer
*/
.footer--guidelines {
  width: 100%;
  display: block;
  padding: 12px;
  text-align: center;
}
/*------------------------------------*\
    $NAVEGACIÓN
\*------------------------------------*/
/**
* Estilos para la navegación de la web (nav,menu)
*/
.nav--guidelines {
  position: fixed;
  width: 100%;
  padding: 0;
  margin-top: 24px;
  font-family: "Gruppo", cursive;
}
.nav--guidelines .nav--title {
  color: #009dda;
  text-align: left;
  font-size: 1rem;
  font-weight: bold;
  padding-left: 24px;
  margin-bottom: 6px;
}
.nav--guidelines a {
  position: relative;
  color: rgb(102, 102, 102);
  font-weight: bold;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.nav--guidelines a:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 3px;
  display: block;
  background-color: #009dda;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.nav--guidelines a:hover, .nav--guidelines a:focus, .nav--guidelines a:active {
  color: rgb(0, 0, 0);
}
.nav--guidelines a:hover:before, .nav--guidelines a:focus:before, .nav--guidelines a:active:before {
  content: "";
  width: 100%;
}
.nav--button {
  width: 30px;
  height: 30px;
  position: fixed;
  left: 170px;
  color: #009dda;
  font-size: 1.25rem;
  text-align: center;
  z-index: 5;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .nav--button {
    left: calc(100% - 30px);
  }
}
@media (min-width: 60em) {
  .nav--button {
    left: 170px;
  }
}
.nav--button:hover {
  color: rgb(255, 255, 255);
  background-color: #009dda;
}
.nav--button.nav--button__closed {
  left: 0px;
}
.nav--scroll__top {
  text-decoration: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: none;
  font-size: 2.5rem;
  color: rgb(102, 102, 102);
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
/*------------------------------------*\
    $sidebar
\*------------------------------------*/
/**
* Estilos para sidebar
*/
.aside--guidelines {
  width: 100%;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  background-color: rgb(255, 255, 255);
}
@media (min-width: 18em) {
  .aside--guidelines {
    max-width: 100%;
    height: auto;
    position: absolute;
    z-index: 4;
  }
}
@media (min-width: 60em) {
  .aside--guidelines {
    max-width: 200px;
    height: calc(100vh - 75px);
    position: relative;
    z-index: 0;
  }
}
.aside--guidelines.aside__closed {
  transform: translate(-100%, 0);
  overflow: inherit;
  display: none;
}
/*------------------------------------*\
    $SITIO
\*------------------------------------*/
@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}
html {
  font-size: 100%;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Titillium Web", sans-serif;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  body {
    overflow: auto;
  }
}
@media (min-width: 60em) {
  body {
    overflow: hidden;
  }
}
/**
* A partir de aquí es donde debes escribir los estilos de posicionamiento
* y detalles que forman tu web. Disfruta!
*/
.main--guidelines {
  width: 100%;
  padding: 0;
  margin: 0;
  display: -moz-flex;
  display: flex;
}
.section {
  width: 100%;
  display: block;
  padding-bottom: 48px;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.article {
  width: 100%;
  display: block;
  padding: 0 12.5%;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.article--heading {
  position: relative;
  margin-top: 48px;
}
.article--heading:before {
  content: "";
  width: 5rem;
  height: 0.3rem;
  display: block;
  background-color: #009dda;
  position: absolute;
  top: -0.5rem;
  left: 0;
}
.article--subtitle {
  margin: 0;
  padding: 12px 0 6px;
  color: #009dda;
  font-size: 1.25rem;
  text-transform: lowercase;
  font-weight: bold;
}
.background-container,
.game-container,
.game-scene-container,
.interactions-container,
.scene-container,
.screens-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
}
@media (min-width: 60em) {
  .background-container,
  .game-container,
  .game-scene-container,
  .interactions-container,
  .scene-container,
  .screens-container {
    overflow: hidden;
  }
}
/**
* Abstracciones y objetos
**/
/*------------------------------------*\
    $FONTS
\*------------------------------------*/
/*
* Definimos las fuentes de uso
*/
@font-face {
  font-family: "MyriadPro-Light";
  src: url("/assets/fonts//MyriadPro-Light.eot");
  src: url("/assets/fonts//MyriadPro-Light.woff") format("woff"), url("/assets/fonts//MyriadPro-Light.ttf") format("truetype"), url("/assets/fonts//MyriadPro-Light.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ds-digi";
  src: url("/assets/fonts//ds-digi.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "torqueweb-light";
  src: url("/assets/fonts/game/torqueweb-light.eot");
  src: url("/assets/fonts/game/torqueweb-light.woff") format("woff"), url("/assets/fonts/game/torqueweb-light.ttf") format("truetype"), url("/assets/fonts/game/torqueweb-light.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "torqueweb-bold";
  src: url("/assets/fonts/game/torqueweb-bold.eot");
  src: url("/assets/fonts/game/torqueweb-bold.woff") format("woff"), url("/assets/fonts/game/torqueweb-bold.ttf") format("truetype"), url("/assets/fonts/game/torqueweb-bold.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "torqueweb-book";
  src: url("/assets/fonts/game/torqueweb-book.eot");
  src: url("/assets/fonts/game/torqueweb-book.woff") format("woff"), url("/assets/fonts/game/torqueweb-book.ttf") format("truetype"), url("/assets/fonts/game/torqueweb-book.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "torqueweb-inline";
  src: url("/assets/fonts/game/torqueweb-inline.eot");
  src: url("/assets/fonts/game/torqueweb-inline.woff") format("woff"), url("/assets/fonts/game/torqueweb-inline.ttf") format("truetype"), url("/assets/fonts/game/torqueweb-inline.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "torqueweb-medium";
  src: url("/assets/fonts/game/torqueweb-medium.eot");
  src: url("/assets/fonts/game/torqueweb-medium.woff") format("woff"), url("/assets/fonts/game/torqueweb-medium.ttf") format("truetype"), url("/assets/fonts/game/torqueweb-medium.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}
/*------------------------------------*\
    $FONTICON
\*------------------------------------*/
/*
 * Definimos las fuentes de iconos
 */
@font-face {
  font-family: "icomoon";
  src: url("/assets/fonts//icomoon.eot?v4mceb");
  src: url("/assets/fonts//icomoon.eot?v4mceb#iefix") format("embedded-opentype"), url("/assets/fonts//icomoon.ttf?v4mceb") format("truetype"), url("/assets/fonts//icomoon.woff?v4mceb") format("woff"), url("/assets/fonts//icomoon.svg?v4mceb#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-reply3:before {
  content: "\eb17";
}
.icon-mochila:before {
  content: "\eb18";
}
.icon-map3:before {
  content: "\eb19";
}
.icon-nav:before {
  content: "\eb1a";
}
.icon-brazalete:before {
  content: "\eb1b";
}
.icon-x:before {
  content: "\eb1c";
}
.icon-penalizacion:before {
  content: "\eb16";
}
.icon-check2:before {
  content: "\eb15";
}
.icon-exit2:before {
  content: "\eb14";
}
.icon-CloseIcon:before {
  content: "\eb13";
}
.icon-location3:before {
  content: "\eb12";
}
.icon-help:before {
  content: "\eb02";
}
.icon-nuevo:before {
  content: "\eb10";
}
.icon-objective:before {
  content: "\eb0f";
}
.icon-sound:before {
  content: "\eb0e";
}
.icon-delete-keyboard:before {
  content: "\eb0d";
}
.icon-zoquete:before {
  content: "\eb0c";
}
.icon-star-o2:before {
  content: "\eb0b";
}
.icon-ranking:before {
  content: "\eb0a";
}
.icon-docs:before {
  content: "\eb09";
}
.icon-pistas:before {
  content: "\eb08";
}
.icon-close3:before {
  content: "\eb07";
}
.icon-tick-ok:before {
  content: "\eb06";
}
.icon-tick-fail:before {
  content: "\eb05";
}
.icon-altavoz:before {
  content: "\eb04";
}
.icon-calendar3:before {
  content: "\eb03";
}
.icon-clavija:before {
  content: "\eb11";
}
.icon-candado:before {
  content: "\eb01";
}
.icon-mano:before {
  content: "\eb00";
}
.icon-ajustes:before {
  content: "\eafa";
}
.icon-conexion:before {
  content: "\eafb";
}
.icon-lupa:before {
  content: "\eafc";
}
.icon-ojo:before {
  content: "\eafd";
}
.icon-puerta_1:before {
  content: "\eafe";
}
.icon-wifi:before {
  content: "\eaff";
}
.icon-estrella-01:before {
  content: "\eaf3";
}
.icon-estrella-02:before {
  content: "\eaf4";
}
.icon-estrella-03:before {
  content: "\eaf5";
}
.icon-estrella-04:before {
  content: "\eaf6";
}
.icon-estrella-05:before {
  content: "\eaf7";
}
.icon-estrella-06:before {
  content: "\eaf8";
}
.icon-estrella-07:before {
  content: "\eaf9";
}
.icon-bracelet:before {
  content: "\eaf0";
}
.icon-stats-bars:before {
  content: "\e99c";
}
.icon-stats-bars2:before {
  content: "\e99d";
}
.icon-cross:before {
  content: "\ea0f";
}
.icon-connection:before {
  content: "\e91b";
}
.icon-trophy:before {
  content: "\e99e";
}
.icon-lock2:before {
  content: "\eaf2";
}
.icon-warning22:before {
  content: "\eaf1";
}
.icon-home:before {
  content: "\e900";
}
.icon-home2:before {
  content: "\e901";
}
.icon-home3:before {
  content: "\e902";
}
.icon-office:before {
  content: "\e903";
}
.icon-newspaper:before {
  content: "\e904";
}
.icon-pencil:before {
  content: "\e905";
}
.icon-pencil2:before {
  content: "\e906";
}
.icon-quill:before {
  content: "\e907";
}
.icon-pen:before {
  content: "\e908";
}
.icon-blog:before {
  content: "\e909";
}
.icon-eyedropper:before {
  content: "\e90a";
}
.icon-droplet:before {
  content: "\e90b";
}
.icon-paint-format:before {
  content: "\e90c";
}
.icon-image:before {
  content: "\e90d";
}
.icon-images:before {
  content: "\e90e";
}
.icon-camera:before {
  content: "\e90f";
}
.icon-headphones:before {
  content: "\e910";
}
.icon-music:before {
  content: "\e911";
}
.icon-play:before {
  content: "\e912";
}
.icon-film:before {
  content: "\e913";
}
.icon-video-camera:before {
  content: "\e914";
}
.icon-dice:before {
  content: "\e915";
}
.icon-pacman:before {
  content: "\e916";
}
.icon-spades:before {
  content: "\e917";
}
.icon-clubs:before {
  content: "\e918";
}
.icon-diamonds:before {
  content: "\e919";
}
.icon-bullhorn:before {
  content: "\e91a";
}
.icon-connection2:before {
  content: "\e91c";
}
.icon-podcast:before {
  content: "\e91d";
}
.icon-feed:before {
  content: "\e91e";
}
.icon-mic:before {
  content: "\e91f";
}
.icon-book:before {
  content: "\e920";
}
.icon-books:before {
  content: "\e921";
}
.icon-library:before {
  content: "\e922";
}
.icon-file-text:before {
  content: "\e923";
}
.icon-profile:before {
  content: "\e924";
}
.icon-file-empty:before {
  content: "\e925";
}
.icon-files-empty:before {
  content: "\e926";
}
.icon-file-text2:before {
  content: "\e927";
}
.icon-file-picture:before {
  content: "\e928";
}
.icon-file-music:before {
  content: "\e929";
}
.icon-file-play:before {
  content: "\e92a";
}
.icon-file-video:before {
  content: "\e92b";
}
.icon-file-zip:before {
  content: "\e92c";
}
.icon-copy:before {
  content: "\e92d";
}
.icon-paste:before {
  content: "\e92e";
}
.icon-stack:before {
  content: "\e92f";
}
.icon-folder:before {
  content: "\e930";
}
.icon-folder-open:before {
  content: "\e931";
}
.icon-folder-plus:before {
  content: "\e932";
}
.icon-folder-minus:before {
  content: "\e933";
}
.icon-folder-download:before {
  content: "\e934";
}
.icon-folder-upload:before {
  content: "\e935";
}
.icon-price-tag:before {
  content: "\e936";
}
.icon-price-tags:before {
  content: "\e937";
}
.icon-barcode:before {
  content: "\e938";
}
.icon-qrcode:before {
  content: "\e939";
}
.icon-ticket:before {
  content: "\e93a";
}
.icon-cart:before {
  content: "\e93b";
}
.icon-coin-dollar:before {
  content: "\e93c";
}
.icon-coin-euro:before {
  content: "\e93d";
}
.icon-coin-pound:before {
  content: "\e93e";
}
.icon-coin-yen:before {
  content: "\e93f";
}
.icon-credit-card:before {
  content: "\e940";
}
.icon-calculator:before {
  content: "\e941";
}
.icon-lifebuoy:before {
  content: "\e942";
}
.icon-phone:before {
  content: "\e943";
}
.icon-phone-hang-up:before {
  content: "\e944";
}
.icon-address-book:before {
  content: "\e945";
}
.icon-envelop:before {
  content: "\e946";
}
.icon-pushpin:before {
  content: "\e947";
}
.icon-location:before {
  content: "\e948";
}
.icon-location2:before {
  content: "\e949";
}
.icon-compass:before {
  content: "\e94a";
}
.icon-compass2:before {
  content: "\e94b";
}
.icon-map:before {
  content: "\e94c";
}
.icon-map2:before {
  content: "\e94d";
}
.icon-history:before {
  content: "\e94e";
}
.icon-clock:before {
  content: "\e94f";
}
.icon-clock2:before {
  content: "\e950";
}
.icon-alarm:before {
  content: "\e951";
}
.icon-bell:before {
  content: "\e952";
}
.icon-stopwatch:before {
  content: "\e953";
}
.icon-calendar:before {
  content: "\e954";
}
.icon-printer:before {
  content: "\e955";
}
.icon-keyboard:before {
  content: "\e956";
}
.icon-display:before {
  content: "\e957";
}
.icon-laptop:before {
  content: "\e958";
}
.icon-mobile:before {
  content: "\e959";
}
.icon-mobile2:before {
  content: "\e95a";
}
.icon-tablet:before {
  content: "\e95b";
}
.icon-tv:before {
  content: "\e95c";
}
.icon-drawer:before {
  content: "\e95d";
}
.icon-drawer2:before {
  content: "\e95e";
}
.icon-box-add:before {
  content: "\e95f";
}
.icon-box-remove:before {
  content: "\e960";
}
.icon-download:before {
  content: "\e961";
}
.icon-upload:before {
  content: "\e962";
}
.icon-floppy-disk:before {
  content: "\e963";
}
.icon-drive:before {
  content: "\e964";
}
.icon-database:before {
  content: "\e965";
}
.icon-undo:before {
  content: "\e966";
}
.icon-redo:before {
  content: "\e967";
}
.icon-undo2:before {
  content: "\e968";
}
.icon-redo2:before {
  content: "\e969";
}
.icon-forward:before {
  content: "\e96a";
}
.icon-reply:before {
  content: "\e96b";
}
.icon-bubble:before {
  content: "\e96c";
}
.icon-bubbles:before {
  content: "\e96d";
}
.icon-bubbles2:before {
  content: "\e96e";
}
.icon-bubble2:before {
  content: "\e96f";
}
.icon-bubbles3:before {
  content: "\e970";
}
.icon-bubbles4:before {
  content: "\e971";
}
.icon-user:before {
  content: "\e972";
}
.icon-users:before {
  content: "\e973";
}
.icon-user-plus:before {
  content: "\e974";
}
.icon-user-minus:before {
  content: "\e975";
}
.icon-user-check:before {
  content: "\e976";
}
.icon-user-tie:before {
  content: "\e977";
}
.icon-quotes-left:before {
  content: "\e978";
}
.icon-quotes-right:before {
  content: "\e979";
}
.icon-hour-glass:before {
  content: "\e97a";
}
.icon-spinner:before {
  content: "\e97b";
}
.icon-spinner2:before {
  content: "\e97c";
}
.icon-spinner3:before {
  content: "\e97d";
}
.icon-spinner4:before {
  content: "\e97e";
}
.icon-spinner5:before {
  content: "\e97f";
}
.icon-spinner6:before {
  content: "\e980";
}
.icon-spinner7:before {
  content: "\e981";
}
.icon-spinner8:before {
  content: "\e982";
}
.icon-spinner9:before {
  content: "\e983";
}
.icon-spinner10:before {
  content: "\e984";
}
.icon-spinner11:before {
  content: "\e985";
}
.icon-binoculars:before {
  content: "\e986";
}
.icon-search2:before {
  content: "\e987";
}
.icon-zoom-in:before {
  content: "\e988";
}
.icon-zoom-out:before {
  content: "\e989";
}
.icon-enlarge:before {
  content: "\e98a";
}
.icon-shrink:before {
  content: "\e98b";
}
.icon-enlarge2:before {
  content: "\e98c";
}
.icon-shrink2:before {
  content: "\e98d";
}
.icon-key:before {
  content: "\e98e";
}
.icon-key2:before {
  content: "\e98f";
}
.icon-lock:before {
  content: "\e990";
}
.icon-unlocked:before {
  content: "\e991";
}
.icon-wrench:before {
  content: "\e992";
}
.icon-equalizer:before {
  content: "\e993";
}
.icon-equalizer2:before {
  content: "\e994";
}
.icon-cog:before {
  content: "\e995";
}
.icon-cogs:before {
  content: "\e996";
}
.icon-hammer:before {
  content: "\e997";
}
.icon-magic-wand:before {
  content: "\e998";
}
.icon-aid-kit:before {
  content: "\e999";
}
.icon-bug:before {
  content: "\e99a";
}
.icon-pie-chart:before {
  content: "\e99b";
}
.icon-stats-dots:before {
  content: "\e99f";
}
.icon-stats-bars3:before {
  content: "\e9a0";
}
.icon-stats-bars22:before {
  content: "\e9a1";
}
.icon-trophy2:before {
  content: "\e9a2";
}
.icon-gift:before {
  content: "\e9a3";
}
.icon-glass2:before {
  content: "\e9a4";
}
.icon-glass22:before {
  content: "\e9a5";
}
.icon-mug:before {
  content: "\e9a6";
}
.icon-spoon-knife:before {
  content: "\e9a7";
}
.icon-leaf:before {
  content: "\e9a8";
}
.icon-rocket:before {
  content: "\e9a9";
}
.icon-meter:before {
  content: "\e9aa";
}
.icon-meter2:before {
  content: "\e9ab";
}
.icon-hammer2:before {
  content: "\e9ac";
}
.icon-fire:before {
  content: "\e9ad";
}
.icon-lab:before {
  content: "\e9ae";
}
.icon-magnet:before {
  content: "\e9af";
}
.icon-bin:before {
  content: "\e9b0";
}
.icon-bin2:before {
  content: "\e9b1";
}
.icon-briefcase:before {
  content: "\e9b2";
}
.icon-airplane:before {
  content: "\e9b3";
}
.icon-truck:before {
  content: "\e9b4";
}
.icon-road2:before {
  content: "\e9b5";
}
.icon-accessibility:before {
  content: "\e9b6";
}
.icon-target:before {
  content: "\e9b7";
}
.icon-shield:before {
  content: "\e9b8";
}
.icon-power:before {
  content: "\e9b9";
}
.icon-switch:before {
  content: "\e9ba";
}
.icon-power-cord:before {
  content: "\e9bb";
}
.icon-clipboard:before {
  content: "\e9bc";
}
.icon-list-numbered:before {
  content: "\e9bd";
}
.icon-list2:before {
  content: "\e9be";
}
.icon-list22:before {
  content: "\e9bf";
}
.icon-tree:before {
  content: "\e9c0";
}
.icon-menu:before {
  content: "\e9c1";
}
.icon-menu2:before {
  content: "\e9c2";
}
.icon-menu3:before {
  content: "\e9c3";
}
.icon-menu4:before {
  content: "\e9c4";
}
.icon-cloud:before {
  content: "\e9c5";
}
.icon-cloud-download:before {
  content: "\e9c6";
}
.icon-cloud-upload:before {
  content: "\e9c7";
}
.icon-cloud-check:before {
  content: "\e9c8";
}
.icon-download22:before {
  content: "\e9c9";
}
.icon-upload2:before {
  content: "\e9ca";
}
.icon-download3:before {
  content: "\e9cb";
}
.icon-upload3:before {
  content: "\e9cc";
}
.icon-sphere:before {
  content: "\e9cd";
}
.icon-earth:before {
  content: "\e9ce";
}
.icon-link:before {
  content: "\e9cf";
}
.icon-flag2:before {
  content: "\e9d0";
}
.icon-attachment:before {
  content: "\e9d1";
}
.icon-eye:before {
  content: "\e9d2";
}
.icon-eye-plus:before {
  content: "\e9d3";
}
.icon-eye-minus:before {
  content: "\e9d4";
}
.icon-eye-blocked:before {
  content: "\e9d5";
}
.icon-bookmark2:before {
  content: "\e9d6";
}
.icon-bookmarks:before {
  content: "\e9d7";
}
.icon-sun:before {
  content: "\e9d8";
}
.icon-contrast:before {
  content: "\e9d9";
}
.icon-brightness-contrast:before {
  content: "\e9da";
}
.icon-star-empty:before {
  content: "\e9db";
}
.icon-star-half:before {
  content: "\e9dc";
}
.icon-star-full:before {
  content: "\e9dd";
}
.icon-heart2:before {
  content: "\e9de";
}
.icon-heart-broken:before {
  content: "\e9df";
}
.icon-man:before {
  content: "\e9e0";
}
.icon-woman:before {
  content: "\e9e1";
}
.icon-man-woman:before {
  content: "\e9e2";
}
.icon-happy:before {
  content: "\e9e3";
}
.icon-happy2:before {
  content: "\e9e4";
}
.icon-smile:before {
  content: "\e9e5";
}
.icon-smile2:before {
  content: "\e9e6";
}
.icon-tongue:before {
  content: "\e9e7";
}
.icon-tongue2:before {
  content: "\e9e8";
}
.icon-sad:before {
  content: "\e9e9";
}
.icon-sad2:before {
  content: "\e9ea";
}
.icon-wink:before {
  content: "\e9eb";
}
.icon-wink2:before {
  content: "\e9ec";
}
.icon-grin:before {
  content: "\e9ed";
}
.icon-grin2:before {
  content: "\e9ee";
}
.icon-cool:before {
  content: "\e9ef";
}
.icon-cool2:before {
  content: "\e9f0";
}
.icon-angry:before {
  content: "\e9f1";
}
.icon-angry2:before {
  content: "\e9f2";
}
.icon-evil:before {
  content: "\e9f3";
}
.icon-evil2:before {
  content: "\e9f4";
}
.icon-shocked:before {
  content: "\e9f5";
}
.icon-shocked2:before {
  content: "\e9f6";
}
.icon-baffled:before {
  content: "\e9f7";
}
.icon-baffled2:before {
  content: "\e9f8";
}
.icon-confused:before {
  content: "\e9f9";
}
.icon-confused2:before {
  content: "\e9fa";
}
.icon-neutral:before {
  content: "\e9fb";
}
.icon-neutral2:before {
  content: "\e9fc";
}
.icon-hipster:before {
  content: "\e9fd";
}
.icon-hipster2:before {
  content: "\e9fe";
}
.icon-wondering:before {
  content: "\e9ff";
}
.icon-wondering2:before {
  content: "\ea00";
}
.icon-sleepy:before {
  content: "\ea01";
}
.icon-sleepy2:before {
  content: "\ea02";
}
.icon-frustrated:before {
  content: "\ea03";
}
.icon-frustrated2:before {
  content: "\ea04";
}
.icon-crying:before {
  content: "\ea05";
}
.icon-crying2:before {
  content: "\ea06";
}
.icon-point-up:before {
  content: "\ea07";
}
.icon-point-right:before {
  content: "\ea08";
}
.icon-point-down:before {
  content: "\ea09";
}
.icon-point-left:before {
  content: "\ea0a";
}
.icon-warning2:before {
  content: "\ea0b";
}
.icon-notification:before {
  content: "\ea0c";
}
.icon-question:before {
  content: "\ea0d";
}
.icon-plus2:before {
  content: "\ea0e";
}
.icon-minus2:before {
  content: "\ea10";
}
.icon-info:before {
  content: "\ea11";
}
.icon-cancel-circle:before {
  content: "\ea12";
}
.icon-blocked:before {
  content: "\ea13";
}
.icon-cross2:before {
  content: "\ea14";
}
.icon-checkmark:before {
  content: "\ea15";
}
.icon-checkmark2:before {
  content: "\ea16";
}
.icon-spell-check:before {
  content: "\ea17";
}
.icon-enter:before {
  content: "\ea18";
}
.icon-exit:before {
  content: "\ea19";
}
.icon-play22:before {
  content: "\ea1a";
}
.icon-pause2:before {
  content: "\ea1b";
}
.icon-stop2:before {
  content: "\ea1c";
}
.icon-previous:before {
  content: "\ea1d";
}
.icon-next:before {
  content: "\ea1e";
}
.icon-backward2:before {
  content: "\ea1f";
}
.icon-forward22:before {
  content: "\ea20";
}
.icon-play3:before {
  content: "\ea21";
}
.icon-pause22:before {
  content: "\ea22";
}
.icon-stop22:before {
  content: "\ea23";
}
.icon-backward22:before {
  content: "\ea24";
}
.icon-forward3:before {
  content: "\ea25";
}
.icon-first:before {
  content: "\ea26";
}
.icon-last:before {
  content: "\ea27";
}
.icon-previous2:before {
  content: "\ea28";
}
.icon-next2:before {
  content: "\ea29";
}
.icon-eject2:before {
  content: "\ea2a";
}
.icon-volume-high:before {
  content: "\ea2b";
}
.icon-volume-medium:before {
  content: "\ea2c";
}
.icon-volume-low:before {
  content: "\ea2d";
}
.icon-volume-mute:before {
  content: "\ea2e";
}
.icon-volume-mute2:before {
  content: "\ea2f";
}
.icon-volume-increase:before {
  content: "\ea30";
}
.icon-volume-decrease:before {
  content: "\ea31";
}
.icon-loop:before {
  content: "\ea32";
}
.icon-loop2:before {
  content: "\ea33";
}
.icon-infinite:before {
  content: "\ea34";
}
.icon-shuffle:before {
  content: "\ea35";
}
.icon-arrow-up-left:before {
  content: "\ea36";
}
.icon-arrow-up2:before {
  content: "\ea37";
}
.icon-arrow-up-right:before {
  content: "\ea38";
}
.icon-arrow-right2:before {
  content: "\ea39";
}
.icon-arrow-down-right:before {
  content: "\ea3a";
}
.icon-arrow-down2:before {
  content: "\ea3b";
}
.icon-arrow-down-left:before {
  content: "\ea3c";
}
.icon-arrow-left2:before {
  content: "\ea3d";
}
.icon-arrow-up-left2:before {
  content: "\ea3e";
}
.icon-arrow-up22:before {
  content: "\ea3f";
}
.icon-arrow-up-right2:before {
  content: "\ea40";
}
.icon-arrow-right22:before {
  content: "\ea41";
}
.icon-arrow-down-right2:before {
  content: "\ea42";
}
.icon-arrow-down22:before {
  content: "\ea43";
}
.icon-arrow-down-left2:before {
  content: "\ea44";
}
.icon-arrow-left22:before {
  content: "\ea45";
}
.icon-circle-up:before {
  content: "\ea46";
}
.icon-circle-right:before {
  content: "\ea47";
}
.icon-circle-down:before {
  content: "\ea48";
}
.icon-circle-left:before {
  content: "\ea49";
}
.icon-tab:before {
  content: "\ea4a";
}
.icon-move-up:before {
  content: "\ea4b";
}
.icon-move-down:before {
  content: "\ea4c";
}
.icon-sort-alpha-asc:before {
  content: "\ea4d";
}
.icon-sort-alpha-desc:before {
  content: "\ea4e";
}
.icon-sort-numeric-asc:before {
  content: "\ea4f";
}
.icon-sort-numberic-desc:before {
  content: "\ea50";
}
.icon-sort-amount-asc:before {
  content: "\ea51";
}
.icon-sort-amount-desc:before {
  content: "\ea52";
}
.icon-command:before {
  content: "\ea53";
}
.icon-shift:before {
  content: "\ea54";
}
.icon-ctrl:before {
  content: "\ea55";
}
.icon-opt:before {
  content: "\ea56";
}
.icon-checkbox-checked:before {
  content: "\ea57";
}
.icon-checkbox-unchecked:before {
  content: "\ea58";
}
.icon-radio-checked:before {
  content: "\ea59";
}
.icon-radio-checked2:before {
  content: "\ea5a";
}
.icon-radio-unchecked:before {
  content: "\ea5b";
}
.icon-crop:before {
  content: "\ea5c";
}
.icon-make-group:before {
  content: "\ea5d";
}
.icon-ungroup:before {
  content: "\ea5e";
}
.icon-scissors2:before {
  content: "\ea5f";
}
.icon-filter2:before {
  content: "\ea60";
}
.icon-font2:before {
  content: "\ea61";
}
.icon-ligature:before {
  content: "\ea62";
}
.icon-ligature2:before {
  content: "\ea63";
}
.icon-text-height2:before {
  content: "\ea64";
}
.icon-text-width2:before {
  content: "\ea65";
}
.icon-font-size:before {
  content: "\ea66";
}
.icon-bold2:before {
  content: "\ea67";
}
.icon-underline2:before {
  content: "\ea68";
}
.icon-italic2:before {
  content: "\ea69";
}
.icon-strikethrough2:before {
  content: "\ea6a";
}
.icon-omega:before {
  content: "\ea6b";
}
.icon-sigma:before {
  content: "\ea6c";
}
.icon-page-break:before {
  content: "\ea6d";
}
.icon-superscript:before {
  content: "\ea6e";
}
.icon-subscript:before {
  content: "\ea6f";
}
.icon-superscript2:before {
  content: "\ea70";
}
.icon-subscript2:before {
  content: "\ea71";
}
.icon-text-color:before {
  content: "\ea72";
}
.icon-pagebreak:before {
  content: "\ea73";
}
.icon-clear-formatting:before {
  content: "\ea74";
}
.icon-table2:before {
  content: "\ea75";
}
.icon-table22:before {
  content: "\ea76";
}
.icon-insert-template:before {
  content: "\ea77";
}
.icon-pilcrow:before {
  content: "\ea78";
}
.icon-ltr:before {
  content: "\ea79";
}
.icon-rtl:before {
  content: "\ea7a";
}
.icon-section:before {
  content: "\ea7b";
}
.icon-paragraph-left:before {
  content: "\ea7c";
}
.icon-paragraph-center:before {
  content: "\ea7d";
}
.icon-paragraph-right:before {
  content: "\ea7e";
}
.icon-paragraph-justify:before {
  content: "\ea7f";
}
.icon-indent-increase:before {
  content: "\ea80";
}
.icon-indent-decrease:before {
  content: "\ea81";
}
.icon-share2:before {
  content: "\ea82";
}
.icon-new-tab:before {
  content: "\ea83";
}
.icon-embed:before {
  content: "\ea84";
}
.icon-embed2:before {
  content: "\ea85";
}
.icon-terminal:before {
  content: "\ea86";
}
.icon-share22:before {
  content: "\ea87";
}
.icon-mail:before {
  content: "\ea88";
}
.icon-mail2:before {
  content: "\ea89";
}
.icon-mail3:before {
  content: "\ea8a";
}
.icon-mail4:before {
  content: "\ea8b";
}
.icon-amazon:before {
  content: "\ea8c";
}
.icon-google:before {
  content: "\ea8d";
}
.icon-google2:before {
  content: "\ea8e";
}
.icon-google3:before {
  content: "\ea8f";
}
.icon-google-plus2:before {
  content: "\ea90";
}
.icon-google-plus22:before {
  content: "\ea91";
}
.icon-google-plus3:before {
  content: "\ea92";
}
.icon-hangouts:before {
  content: "\ea93";
}
.icon-google-drive:before {
  content: "\ea94";
}
.icon-facebook2:before {
  content: "\ea95";
}
.icon-facebook22:before {
  content: "\ea96";
}
.icon-instagram:before {
  content: "\ea97";
}
.icon-whatsapp:before {
  content: "\ea98";
}
.icon-spotify:before {
  content: "\ea99";
}
.icon-telegram:before {
  content: "\ea9a";
}
.icon-twitter2:before {
  content: "\ea9b";
}
.icon-vine:before {
  content: "\ea9c";
}
.icon-vk:before {
  content: "\ea9d";
}
.icon-renren:before {
  content: "\ea9e";
}
.icon-sina-weibo:before {
  content: "\ea9f";
}
.icon-rss2:before {
  content: "\eaa0";
}
.icon-rss22:before {
  content: "\eaa1";
}
.icon-youtube:before {
  content: "\eaa2";
}
.icon-youtube2:before {
  content: "\eaa3";
}
.icon-twitch:before {
  content: "\eaa4";
}
.icon-vimeo:before {
  content: "\eaa5";
}
.icon-vimeo2:before {
  content: "\eaa6";
}
.icon-lanyrd:before {
  content: "\eaa7";
}
.icon-flickr:before {
  content: "\eaa8";
}
.icon-flickr2:before {
  content: "\eaa9";
}
.icon-flickr3:before {
  content: "\eaaa";
}
.icon-flickr4:before {
  content: "\eaab";
}
.icon-dribbble:before {
  content: "\eaac";
}
.icon-behance:before {
  content: "\eaad";
}
.icon-behance2:before {
  content: "\eaae";
}
.icon-deviantart:before {
  content: "\eaaf";
}
.icon-500px:before {
  content: "\eab0";
}
.icon-steam:before {
  content: "\eab1";
}
.icon-steam2:before {
  content: "\eab2";
}
.icon-dropbox:before {
  content: "\eab3";
}
.icon-onedrive:before {
  content: "\eab4";
}
.icon-github2:before {
  content: "\eab5";
}
.icon-npm:before {
  content: "\eab6";
}
.icon-basecamp:before {
  content: "\eab7";
}
.icon-trello:before {
  content: "\eab8";
}
.icon-wordpress:before {
  content: "\eab9";
}
.icon-joomla:before {
  content: "\eaba";
}
.icon-ello:before {
  content: "\eabb";
}
.icon-blogger:before {
  content: "\eabc";
}
.icon-blogger2:before {
  content: "\eabd";
}
.icon-tumblr:before {
  content: "\eabe";
}
.icon-tumblr2:before {
  content: "\eabf";
}
.icon-yahoo:before {
  content: "\eac0";
}
.icon-yahoo2:before {
  content: "\eac1";
}
.icon-tux:before {
  content: "\eac2";
}
.icon-appleinc:before {
  content: "\eac3";
}
.icon-finder:before {
  content: "\eac4";
}
.icon-android:before {
  content: "\eac5";
}
.icon-windows:before {
  content: "\eac6";
}
.icon-windows8:before {
  content: "\eac7";
}
.icon-soundcloud:before {
  content: "\eac8";
}
.icon-soundcloud2:before {
  content: "\eac9";
}
.icon-skype:before {
  content: "\eaca";
}
.icon-reddit:before {
  content: "\eacb";
}
.icon-hackernews:before {
  content: "\eacc";
}
.icon-wikipedia:before {
  content: "\eacd";
}
.icon-linkedin2:before {
  content: "\eace";
}
.icon-linkedin22:before {
  content: "\eacf";
}
.icon-lastfm:before {
  content: "\ead0";
}
.icon-lastfm2:before {
  content: "\ead1";
}
.icon-delicious:before {
  content: "\ead2";
}
.icon-stumbleupon:before {
  content: "\ead3";
}
.icon-stumbleupon2:before {
  content: "\ead4";
}
.icon-stackoverflow:before {
  content: "\ead5";
}
.icon-pinterest2:before {
  content: "\ead6";
}
.icon-pinterest22:before {
  content: "\ead7";
}
.icon-xing2:before {
  content: "\ead8";
}
.icon-xing22:before {
  content: "\ead9";
}
.icon-flattr:before {
  content: "\eada";
}
.icon-foursquare:before {
  content: "\eadb";
}
.icon-yelp:before {
  content: "\eadc";
}
.icon-paypal:before {
  content: "\eadd";
}
.icon-chrome:before {
  content: "\eade";
}
.icon-firefox:before {
  content: "\eadf";
}
.icon-IE:before {
  content: "\eae0";
}
.icon-edge:before {
  content: "\eae1";
}
.icon-safari:before {
  content: "\eae2";
}
.icon-opera:before {
  content: "\eae3";
}
.icon-file-pdf:before {
  content: "\eae4";
}
.icon-file-openoffice:before {
  content: "\eae5";
}
.icon-file-word:before {
  content: "\eae6";
}
.icon-file-excel:before {
  content: "\eae7";
}
.icon-libreoffice:before {
  content: "\eae8";
}
.icon-html-five:before {
  content: "\eae9";
}
.icon-html-five2:before {
  content: "\eaea";
}
.icon-css32:before {
  content: "\eaeb";
}
.icon-git:before {
  content: "\eaec";
}
.icon-codepen:before {
  content: "\eaed";
}
.icon-svg:before {
  content: "\eaee";
}
.icon-IcoMoon:before {
  content: "\eaef";
}
.icon-angle-right2:before {
  content: "\f108";
}
.icon-angle-left2:before {
  content: "\f10a";
}
.icon-star2:before {
  content: "\f00f";
}
.icon-close2:before {
  content: "\f01f";
}
.icon-remove2:before {
  content: "\f01f";
}
.icon-times2:before {
  content: "\f01f";
}
.icon-signal2:before {
  content: "\f03f";
}
.icon-download23:before {
  content: "\f020";
}
.icon-headphones22:before {
  content: "\f05f";
}
.icon-volume-up2:before {
  content: "\f04f";
}
.icon-bar-chart2:before {
  content: "\f08f";
}
.icon-bar-chart-o2:before {
  content: "\f08f";
}
.icon-bullhorn22:before {
  content: "\f0af";
}
.icon-play-circle-o2:before {
  content: "\f06f";
}
.icon-glass:before {
  content: "\f000";
}
.icon-music2:before {
  content: "\f001";
}
.icon-search:before {
  content: "\f002";
}
.icon-envelope-o:before {
  content: "\f003";
}
.icon-heart:before {
  content: "\f004";
}
.icon-star:before {
  content: "\f005";
}
.icon-star-o:before {
  content: "\f006";
}
.icon-user2:before {
  content: "\f007";
}
.icon-film2:before {
  content: "\f008";
}
.icon-th-large:before {
  content: "\f009";
}
.icon-th:before {
  content: "\f00a";
}
.icon-th-list:before {
  content: "\f00b";
}
.icon-check:before {
  content: "\f00c";
}
.icon-close:before {
  content: "\f00d";
}
.icon-remove:before {
  content: "\f00d";
}
.icon-times:before {
  content: "\f00d";
}
.icon-search-plus:before {
  content: "\f00e";
}
.icon-search-minus:before {
  content: "\f010";
}
.icon-power-off:before {
  content: "\f011";
}
.icon-signal:before {
  content: "\f012";
}
.icon-cog2:before {
  content: "\f013";
}
.icon-gear:before {
  content: "\f013";
}
.icon-trash-o:before {
  content: "\f014";
}
.icon-home4:before {
  content: "\f015";
}
.icon-file-o:before {
  content: "\f016";
}
.icon-clock-o:before {
  content: "\f017";
}
.icon-road:before {
  content: "\f018";
}
.icon-download2:before {
  content: "\f019";
}
.icon-arrow-circle-o-down:before {
  content: "\f01a";
}
.icon-arrow-circle-o-up:before {
  content: "\f01b";
}
.icon-inbox:before {
  content: "\f01c";
}
.icon-play-circle-o:before {
  content: "\f01d";
}
.icon-repeat:before {
  content: "\f01e";
}
.icon-rotate-right:before {
  content: "\f01e";
}
.icon-refresh:before {
  content: "\f021";
}
.icon-list-alt:before {
  content: "\f022";
}
.icon-lock3:before {
  content: "\f023";
}
.icon-flag:before {
  content: "\f024";
}
.icon-headphones2:before {
  content: "\f025";
}
.icon-volume-off:before {
  content: "\f026";
}
.icon-volume-down:before {
  content: "\f027";
}
.icon-volume-up:before {
  content: "\f028";
}
.icon-qrcode2:before {
  content: "\f029";
}
.icon-barcode2:before {
  content: "\f02a";
}
.icon-tag:before {
  content: "\f02b";
}
.icon-tags:before {
  content: "\f02c";
}
.icon-book2:before {
  content: "\f02d";
}
.icon-bookmark:before {
  content: "\f02e";
}
.icon-print:before {
  content: "\f02f";
}
.icon-camera2:before {
  content: "\f030";
}
.icon-font:before {
  content: "\f031";
}
.icon-bold:before {
  content: "\f032";
}
.icon-italic:before {
  content: "\f033";
}
.icon-text-height:before {
  content: "\f034";
}
.icon-text-width:before {
  content: "\f035";
}
.icon-align-left:before {
  content: "\f036";
}
.icon-align-center:before {
  content: "\f037";
}
.icon-align-right:before {
  content: "\f038";
}
.icon-align-justify:before {
  content: "\f039";
}
.icon-list:before {
  content: "\f03a";
}
.icon-dedent:before {
  content: "\f03b";
}
.icon-outdent:before {
  content: "\f03b";
}
.icon-indent:before {
  content: "\f03c";
}
.icon-video-camera2:before {
  content: "\f03d";
}
.icon-image2:before {
  content: "\f03e";
}
.icon-photo:before {
  content: "\f03e";
}
.icon-picture-o:before {
  content: "\f03e";
}
.icon-pencil3:before {
  content: "\f040";
}
.icon-map-marker:before {
  content: "\f041";
}
.icon-adjust:before {
  content: "\f042";
}
.icon-tint:before {
  content: "\f043";
}
.icon-edit:before {
  content: "\f044";
}
.icon-pencil-square-o:before {
  content: "\f044";
}
.icon-share-square-o:before {
  content: "\f045";
}
.icon-check-square-o:before {
  content: "\f046";
}
.icon-arrows:before {
  content: "\f047";
}
.icon-step-backward:before {
  content: "\f048";
}
.icon-fast-backward:before {
  content: "\f049";
}
.icon-backward:before {
  content: "\f04a";
}
.icon-play2:before {
  content: "\f04b";
}
.icon-pause:before {
  content: "\f04c";
}
.icon-stop:before {
  content: "\f04d";
}
.icon-forward2:before {
  content: "\f04e";
}
.icon-fast-forward:before {
  content: "\f050";
}
.icon-step-forward:before {
  content: "\f051";
}
.icon-eject:before {
  content: "\f052";
}
.icon-chevron-left:before {
  content: "\f053";
}
.icon-chevron-right:before {
  content: "\f054";
}
.icon-plus-circle:before {
  content: "\f055";
}
.icon-minus-circle:before {
  content: "\f056";
}
.icon-times-circle:before {
  content: "\f057";
}
.icon-check-circle:before {
  content: "\f058";
}
.icon-question-circle:before {
  content: "\f059";
}
.icon-info-circle:before {
  content: "\f05a";
}
.icon-crosshairs:before {
  content: "\f05b";
}
.icon-times-circle-o:before {
  content: "\f05c";
}
.icon-check-circle-o:before {
  content: "\f05d";
}
.icon-ban:before {
  content: "\f05e";
}
.icon-arrow-left:before {
  content: "\f060";
}
.icon-arrow-right:before {
  content: "\f061";
}
.icon-arrow-up:before {
  content: "\f062";
}
.icon-arrow-down:before {
  content: "\f063";
}
.icon-mail-forward:before {
  content: "\f064";
}
.icon-share:before {
  content: "\f064";
}
.icon-expand:before {
  content: "\f065";
}
.icon-compress:before {
  content: "\f066";
}
.icon-plus:before {
  content: "\f067";
}
.icon-minus:before {
  content: "\f068";
}
.icon-asterisk:before {
  content: "\f069";
}
.icon-exclamation-circle:before {
  content: "\f06a";
}
.icon-gift2:before {
  content: "\f06b";
}
.icon-leaf2:before {
  content: "\f06c";
}
.icon-fire2:before {
  content: "\f06d";
}
.icon-eye2:before {
  content: "\f06e";
}
.icon-eye-slash:before {
  content: "\f070";
}
.icon-exclamation-triangle:before {
  content: "\f071";
}
.icon-warning:before {
  content: "\f071";
}
.icon-plane:before {
  content: "\f072";
}
.icon-calendar2:before {
  content: "\f073";
}
.icon-random:before {
  content: "\f074";
}
.icon-comment:before {
  content: "\f075";
}
.icon-magnet2:before {
  content: "\f076";
}
.icon-chevron-up:before {
  content: "\f077";
}
.icon-chevron-down:before {
  content: "\f078";
}
.icon-retweet:before {
  content: "\f079";
}
.icon-shopping-cart:before {
  content: "\f07a";
}
.icon-folder2:before {
  content: "\f07b";
}
.icon-folder-open2:before {
  content: "\f07c";
}
.icon-arrows-v:before {
  content: "\f07d";
}
.icon-arrows-h:before {
  content: "\f07e";
}
.icon-bar-chart:before {
  content: "\f080";
}
.icon-bar-chart-o:before {
  content: "\f080";
}
.icon-twitter-square:before {
  content: "\f081";
}
.icon-facebook-square:before {
  content: "\f082";
}
.icon-camera-retro:before {
  content: "\f083";
}
.icon-key3:before {
  content: "\f084";
}
.icon-cogs2:before {
  content: "\f085";
}
.icon-gears:before {
  content: "\f085";
}
.icon-comments:before {
  content: "\f086";
}
.icon-thumbs-o-up:before {
  content: "\f087";
}
.icon-thumbs-o-down:before {
  content: "\f088";
}
.icon-star-half2:before {
  content: "\f089";
}
.icon-heart-o:before {
  content: "\f08a";
}
.icon-sign-out:before {
  content: "\f08b";
}
.icon-linkedin-square:before {
  content: "\f08c";
}
.icon-thumb-tack:before {
  content: "\f08d";
}
.icon-external-link:before {
  content: "\f08e";
}
.icon-sign-in:before {
  content: "\f090";
}
.icon-trophy22:before {
  content: "\f091";
}
.icon-github-square:before {
  content: "\f092";
}
.icon-upload4:before {
  content: "\f093";
}
.icon-lemon-o:before {
  content: "\f094";
}
.icon-phone2:before {
  content: "\f095";
}
.icon-square-o:before {
  content: "\f096";
}
.icon-bookmark-o:before {
  content: "\f097";
}
.icon-phone-square:before {
  content: "\f098";
}
.icon-twitter:before {
  content: "\f099";
}
.icon-facebook:before {
  content: "\f09a";
}
.icon-facebook-f:before {
  content: "\f09a";
}
.icon-github:before {
  content: "\f09b";
}
.icon-unlock:before {
  content: "\f09c";
}
.icon-credit-card2:before {
  content: "\f09d";
}
.icon-feed2:before {
  content: "\f09e";
}
.icon-rss:before {
  content: "\f09e";
}
.icon-hdd-o:before {
  content: "\f0a0";
}
.icon-bullhorn2:before {
  content: "\f0a1";
}
.icon-bell-o:before {
  content: "\f0a2";
}
.icon-certificate:before {
  content: "\f0a3";
}
.icon-hand-o-right:before {
  content: "\f0a4";
}
.icon-hand-o-left:before {
  content: "\f0a5";
}
.icon-hand-o-up:before {
  content: "\f0a6";
}
.icon-hand-o-down:before {
  content: "\f0a7";
}
.icon-arrow-circle-left:before {
  content: "\f0a8";
}
.icon-arrow-circle-right:before {
  content: "\f0a9";
}
.icon-arrow-circle-up:before {
  content: "\f0aa";
}
.icon-arrow-circle-down:before {
  content: "\f0ab";
}
.icon-globe:before {
  content: "\f0ac";
}
.icon-wrench2:before {
  content: "\f0ad";
}
.icon-tasks:before {
  content: "\f0ae";
}
.icon-filter:before {
  content: "\f0b0";
}
.icon-briefcase2:before {
  content: "\f0b1";
}
.icon-arrows-alt:before {
  content: "\f0b2";
}
.icon-group:before {
  content: "\f0c0";
}
.icon-users2:before {
  content: "\f0c0";
}
.icon-chain:before {
  content: "\f0c1";
}
.icon-link2:before {
  content: "\f0c1";
}
.icon-cloud2:before {
  content: "\f0c2";
}
.icon-flask:before {
  content: "\f0c3";
}
.icon-cut:before {
  content: "\f0c4";
}
.icon-scissors:before {
  content: "\f0c4";
}
.icon-copy2:before {
  content: "\f0c5";
}
.icon-files-o:before {
  content: "\f0c5";
}
.icon-paperclip:before {
  content: "\f0c6";
}
.icon-floppy-o:before {
  content: "\f0c7";
}
.icon-save:before {
  content: "\f0c7";
}
.icon-square:before {
  content: "\f0c8";
}
.icon-bars:before {
  content: "\f0c9";
}
.icon-navicon:before {
  content: "\f0c9";
}
.icon-reorder:before {
  content: "\f0c9";
}
.icon-list-ul:before {
  content: "\f0ca";
}
.icon-list-ol:before {
  content: "\f0cb";
}
.icon-strikethrough:before {
  content: "\f0cc";
}
.icon-underline:before {
  content: "\f0cd";
}
.icon-table:before {
  content: "\f0ce";
}
.icon-magic:before {
  content: "\f0d0";
}
.icon-truck2:before {
  content: "\f0d1";
}
.icon-pinterest:before {
  content: "\f0d2";
}
.icon-pinterest-square:before {
  content: "\f0d3";
}
.icon-google-plus-square:before {
  content: "\f0d4";
}
.icon-google-plus:before {
  content: "\f0d5";
}
.icon-money:before {
  content: "\f0d6";
}
.icon-caret-down:before {
  content: "\f0d7";
}
.icon-caret-up:before {
  content: "\f0d8";
}
.icon-caret-left:before {
  content: "\f0d9";
}
.icon-caret-right:before {
  content: "\f0da";
}
.icon-columns:before {
  content: "\f0db";
}
.icon-sort:before {
  content: "\f0dc";
}
.icon-unsorted:before {
  content: "\f0dc";
}
.icon-sort-desc:before {
  content: "\f0dd";
}
.icon-sort-down:before {
  content: "\f0dd";
}
.icon-sort-asc:before {
  content: "\f0de";
}
.icon-sort-up:before {
  content: "\f0de";
}
.icon-envelope:before {
  content: "\f0e0";
}
.icon-linkedin:before {
  content: "\f0e1";
}
.icon-rotate-left:before {
  content: "\f0e2";
}
.icon-undo3:before {
  content: "\f0e2";
}
.icon-gavel:before {
  content: "\f0e3";
}
.icon-legal:before {
  content: "\f0e3";
}
.icon-dashboard:before {
  content: "\f0e4";
}
.icon-tachometer:before {
  content: "\f0e4";
}
.icon-comment-o:before {
  content: "\f0e5";
}
.icon-comments-o:before {
  content: "\f0e6";
}
.icon-bolt:before {
  content: "\f0e7";
}
.icon-flash:before {
  content: "\f0e7";
}
.icon-sitemap:before {
  content: "\f0e8";
}
.icon-umbrella:before {
  content: "\f0e9";
}
.icon-clipboard2:before {
  content: "\f0ea";
}
.icon-paste2:before {
  content: "\f0ea";
}
.icon-lightbulb-o:before {
  content: "\f0eb";
}
.icon-exchange:before {
  content: "\f0ec";
}
.icon-cloud-download2:before {
  content: "\f0ed";
}
.icon-cloud-upload2:before {
  content: "\f0ee";
}
.icon-user-md:before {
  content: "\f0f0";
}
.icon-stethoscope:before {
  content: "\f0f1";
}
.icon-suitcase:before {
  content: "\f0f2";
}
.icon-bell2:before {
  content: "\f0f3";
}
.icon-coffee:before {
  content: "\f0f4";
}
.icon-cutlery:before {
  content: "\f0f5";
}
.icon-file-text-o:before {
  content: "\f0f6";
}
.icon-building-o:before {
  content: "\f0f7";
}
.icon-hospital-o:before {
  content: "\f0f8";
}
.icon-ambulance:before {
  content: "\f0f9";
}
.icon-medkit:before {
  content: "\f0fa";
}
.icon-fighter-jet:before {
  content: "\f0fb";
}
.icon-beer:before {
  content: "\f0fc";
}
.icon-h-square:before {
  content: "\f0fd";
}
.icon-plus-square:before {
  content: "\f0fe";
}
.icon-angle-double-left:before {
  content: "\f100";
}
.icon-angle-double-right:before {
  content: "\f101";
}
.icon-angle-double-up:before {
  content: "\f102";
}
.icon-angle-double-down:before {
  content: "\f103";
}
.icon-angle-left:before {
  content: "\f104";
}
.icon-angle-right:before {
  content: "\f105";
}
.icon-angle-up:before {
  content: "\f106";
}
.icon-angle-down:before {
  content: "\f107";
}
.icon-desktop:before {
  content: "\f10c";
}
.icon-laptop2:before {
  content: "\f109";
}
.icon-tablet2:before {
  content: "\f10d";
}
.icon-mobile3:before {
  content: "\f10e";
}
.icon-mobile-phone:before {
  content: "\f10e";
}
.icon-circle-o:before {
  content: "\f10f";
}
.icon-quote-left:before {
  content: "\f110";
}
.icon-quote-right:before {
  content: "\f111";
}
.icon-spinner12:before {
  content: "\f112";
}
.icon-circle:before {
  content: "\f113";
}
.icon-mail-reply:before {
  content: "\f114";
}
.icon-reply2:before {
  content: "\f114";
}
.icon-github-alt:before {
  content: "\f115";
}
.icon-folder-o:before {
  content: "\f116";
}
.icon-folder-open-o:before {
  content: "\f117";
}
.icon-smile-o:before {
  content: "\f118";
}
.icon-frown-o:before {
  content: "\f119";
}
.icon-meh-o:before {
  content: "\f11a";
}
.icon-gamepad:before {
  content: "\f11b";
}
.icon-keyboard-o:before {
  content: "\f11c";
}
.icon-flag-o:before {
  content: "\f11d";
}
.icon-flag-checkered:before {
  content: "\f11e";
}
.icon-terminal2:before {
  content: "\f120";
}
.icon-code:before {
  content: "\f121";
}
.icon-mail-reply-all:before {
  content: "\f122";
}
.icon-reply-all:before {
  content: "\f122";
}
.icon-star-half-empty:before {
  content: "\f123";
}
.icon-star-half-full:before {
  content: "\f123";
}
.icon-star-half-o:before {
  content: "\f123";
}
.icon-location-arrow:before {
  content: "\f124";
}
.icon-crop2:before {
  content: "\f125";
}
.icon-code-fork:before {
  content: "\f126";
}
.icon-chain-broken:before {
  content: "\f127";
}
.icon-unlink:before {
  content: "\f127";
}
.icon-question2:before {
  content: "\f128";
}
.icon-info2:before {
  content: "\f129";
}
.icon-exclamation:before {
  content: "\f12a";
}
.icon-superscript3:before {
  content: "\f12b";
}
.icon-subscript3:before {
  content: "\f12c";
}
.icon-eraser:before {
  content: "\f12d";
}
.icon-puzzle-piece:before {
  content: "\f12e";
}
.icon-microphone:before {
  content: "\f130";
}
.icon-microphone-slash:before {
  content: "\f131";
}
.icon-shield2:before {
  content: "\f132";
}
.icon-calendar-o:before {
  content: "\f133";
}
.icon-fire-extinguisher:before {
  content: "\f134";
}
.icon-rocket2:before {
  content: "\f135";
}
.icon-maxcdn:before {
  content: "\f136";
}
.icon-chevron-circle-left:before {
  content: "\f137";
}
.icon-chevron-circle-right:before {
  content: "\f138";
}
.icon-chevron-circle-up:before {
  content: "\f139";
}
.icon-chevron-circle-down:before {
  content: "\f13a";
}
.icon-html5:before {
  content: "\f13b";
}
.icon-css3:before {
  content: "\f13c";
}
.icon-anchor:before {
  content: "\f13d";
}
.icon-unlock-alt:before {
  content: "\f13e";
}
.icon-bullseye:before {
  content: "\f140";
}
.icon-ellipsis-h:before {
  content: "\f141";
}
.icon-ellipsis-v:before {
  content: "\f142";
}
.icon-rss-square:before {
  content: "\f143";
}
.icon-play-circle:before {
  content: "\f144";
}
.icon-ticket2:before {
  content: "\f145";
}
.icon-minus-square:before {
  content: "\f146";
}
.icon-minus-square-o:before {
  content: "\f147";
}
.icon-level-up:before {
  content: "\f148";
}
.icon-level-down:before {
  content: "\f149";
}
.icon-check-square:before {
  content: "\f14a";
}
.icon-pencil-square:before {
  content: "\f14b";
}
.icon-external-link-square:before {
  content: "\f14c";
}
.icon-share-square:before {
  content: "\f14d";
}
.icon-compass3:before {
  content: "\f14e";
}
.icon-caret-square-o-down:before {
  content: "\f150";
}
.icon-toggle-down:before {
  content: "\f150";
}
.icon-caret-square-o-up:before {
  content: "\f151";
}
.icon-toggle-up:before {
  content: "\f151";
}
.icon-caret-square-o-right:before {
  content: "\f152";
}
.icon-toggle-right:before {
  content: "\f152";
}
.icon-eur:before {
  content: "\f153";
}
.icon-euro:before {
  content: "\f153";
}
.icon-gbp:before {
  content: "\f154";
}
.icon-dollar:before {
  content: "\f155";
}
.icon-usd:before {
  content: "\f155";
}
.icon-inr:before {
  content: "\f156";
}
.icon-rupee:before {
  content: "\f156";
}
.icon-cny:before {
  content: "\f157";
}
.icon-jpy:before {
  content: "\f157";
}
.icon-rmb:before {
  content: "\f157";
}
.icon-yen:before {
  content: "\f157";
}
.icon-rouble:before {
  content: "\f158";
}
.icon-rub:before {
  content: "\f158";
}
.icon-ruble:before {
  content: "\f158";
}
.icon-krw:before {
  content: "\f159";
}
.icon-won:before {
  content: "\f159";
}
.icon-bitcoin:before {
  content: "\f15a";
}
.icon-btc:before {
  content: "\f15a";
}
.icon-file:before {
  content: "\f15b";
}
.icon-file-text3:before {
  content: "\f15c";
}
.icon-sort-alpha-asc2:before {
  content: "\f15d";
}
.icon-sort-alpha-desc2:before {
  content: "\f15e";
}
.icon-sort-amount-asc2:before {
  content: "\f160";
}
.icon-sort-amount-desc2:before {
  content: "\f161";
}
.icon-sort-numeric-asc2:before {
  content: "\f162";
}
.icon-sort-numeric-desc:before {
  content: "\f163";
}
.icon-thumbs-up:before {
  content: "\f164";
}
.icon-thumbs-down:before {
  content: "\f165";
}
.icon-youtube-square:before {
  content: "\f166";
}
.icon-youtube3:before {
  content: "\f167";
}
.icon-xing:before {
  content: "\f168";
}
.icon-xing-square:before {
  content: "\f169";
}
.icon-youtube-play:before {
  content: "\f16a";
}
.icon-dropbox2:before {
  content: "\f16b";
}
.icon-stack-overflow:before {
  content: "\f16c";
}
.icon-instagram2:before {
  content: "\f16d";
}
.icon-flickr5:before {
  content: "\f16e";
}
.icon-adn:before {
  content: "\f170";
}
.icon-bitbucket:before {
  content: "\f171";
}
.icon-bitbucket-square:before {
  content: "\f172";
}
.icon-tumblr3:before {
  content: "\f173";
}
.icon-tumblr-square:before {
  content: "\f174";
}
.icon-long-arrow-down:before {
  content: "\f175";
}
.icon-long-arrow-up:before {
  content: "\f176";
}
.icon-long-arrow-left:before {
  content: "\f177";
}
.icon-long-arrow-right:before {
  content: "\f178";
}
.icon-apple:before {
  content: "\f179";
}
.icon-windows2:before {
  content: "\f17a";
}
.icon-android2:before {
  content: "\f17b";
}
.icon-linux:before {
  content: "\f17c";
}
.icon-dribbble2:before {
  content: "\f17d";
}
.icon-skype2:before {
  content: "\f17e";
}
.icon-foursquare2:before {
  content: "\f180";
}
.icon-trello2:before {
  content: "\f181";
}
.icon-female:before {
  content: "\f182";
}
.icon-male:before {
  content: "\f183";
}
.icon-gittip:before {
  content: "\f184";
}
.icon-gratipay:before {
  content: "\f184";
}
.icon-sun-o:before {
  content: "\f185";
}
.icon-moon-o:before {
  content: "\f186";
}
.icon-archive:before {
  content: "\f187";
}
.icon-bug2:before {
  content: "\f188";
}
.icon-vk2:before {
  content: "\f189";
}
.icon-weibo:before {
  content: "\f18a";
}
.icon-renren2:before {
  content: "\f18b";
}
.icon-pagelines:before {
  content: "\f18c";
}
.icon-stack-exchange:before {
  content: "\f18d";
}
.icon-arrow-circle-o-right:before {
  content: "\f18e";
}
.icon-arrow-circle-o-left:before {
  content: "\f190";
}
.icon-caret-square-o-left:before {
  content: "\f191";
}
.icon-toggle-left:before {
  content: "\f191";
}
.icon-dot-circle-o:before {
  content: "\f192";
}
.icon-wheelchair:before {
  content: "\f193";
}
.icon-vimeo-square:before {
  content: "\f194";
}
.icon-try:before {
  content: "\f195";
}
.icon-turkish-lira:before {
  content: "\f195";
}
.icon-plus-square-o:before {
  content: "\f196";
}
.icon-space-shuttle:before {
  content: "\f197";
}
.icon-slack:before {
  content: "\f198";
}
.icon-envelope-square:before {
  content: "\f199";
}
.icon-wordpress2:before {
  content: "\f19a";
}
.icon-openid:before {
  content: "\f19b";
}
.icon-bank:before {
  content: "\f19c";
}
.icon-institution:before {
  content: "\f19c";
}
.icon-university:before {
  content: "\f19c";
}
.icon-graduation-cap:before {
  content: "\f19d";
}
.icon-mortar-board:before {
  content: "\f19d";
}
.icon-yahoo3:before {
  content: "\f19e";
}
.icon-google4:before {
  content: "\f1a0";
}
.icon-reddit2:before {
  content: "\f1a1";
}
.icon-reddit-square:before {
  content: "\f1a2";
}
.icon-stumbleupon-circle:before {
  content: "\f1a3";
}
.icon-stumbleupon3:before {
  content: "\f1a4";
}
.icon-delicious2:before {
  content: "\f1a5";
}
.icon-digg:before {
  content: "\f1a6";
}
.icon-pied-piper:before {
  content: "\f1a7";
}
.icon-pied-piper-alt:before {
  content: "\f1a8";
}
.icon-drupal:before {
  content: "\f1a9";
}
.icon-joomla2:before {
  content: "\f1aa";
}
.icon-language:before {
  content: "\f1ab";
}
.icon-fax:before {
  content: "\f1ac";
}
.icon-building:before {
  content: "\f1ad";
}
.icon-child:before {
  content: "\f1ae";
}
.icon-paw:before {
  content: "\f1b0";
}
.icon-spoon:before {
  content: "\f1b1";
}
.icon-cube:before {
  content: "\f1b2";
}
.icon-cubes:before {
  content: "\f1b3";
}
.icon-behance3:before {
  content: "\f1b4";
}
.icon-behance-square:before {
  content: "\f1b5";
}
.icon-steam3:before {
  content: "\f1b6";
}
.icon-steam-square:before {
  content: "\f1b7";
}
.icon-recycle:before {
  content: "\f1b8";
}
.icon-automobile:before {
  content: "\f1b9";
}
.icon-car:before {
  content: "\f1b9";
}
.icon-cab:before {
  content: "\f1ba";
}
.icon-taxi:before {
  content: "\f1ba";
}
.icon-tree2:before {
  content: "\f1bb";
}
.icon-spotify2:before {
  content: "\f1bc";
}
.icon-deviantart2:before {
  content: "\f1bd";
}
.icon-soundcloud3:before {
  content: "\f1be";
}
.icon-database2:before {
  content: "\f1c0";
}
.icon-file-pdf-o:before {
  content: "\f1c1";
}
.icon-file-word-o:before {
  content: "\f1c2";
}
.icon-file-excel-o:before {
  content: "\f1c3";
}
.icon-file-powerpoint-o:before {
  content: "\f1c4";
}
.icon-file-image-o:before {
  content: "\f1c5";
}
.icon-file-photo-o:before {
  content: "\f1c5";
}
.icon-file-picture-o:before {
  content: "\f1c5";
}
.icon-file-archive-o:before {
  content: "\f1c6";
}
.icon-file-zip-o:before {
  content: "\f1c6";
}
.icon-file-audio-o:before {
  content: "\f1c7";
}
.icon-file-sound-o:before {
  content: "\f1c7";
}
.icon-file-movie-o:before {
  content: "\f1c8";
}
.icon-file-video-o:before {
  content: "\f1c8";
}
.icon-file-code-o:before {
  content: "\f1c9";
}
.icon-vine2:before {
  content: "\f1ca";
}
.icon-codepen2:before {
  content: "\f1cb";
}
.icon-jsfiddle:before {
  content: "\f1cc";
}
.icon-life-bouy:before {
  content: "\f1cd";
}
.icon-life-buoy:before {
  content: "\f1cd";
}
.icon-life-ring:before {
  content: "\f1cd";
}
.icon-life-saver:before {
  content: "\f1cd";
}
.icon-support:before {
  content: "\f1cd";
}
.icon-circle-o-notch:before {
  content: "\f1ce";
}
.icon-ra:before {
  content: "\f1d0";
}
.icon-rebel:before {
  content: "\f1d0";
}
.icon-empire:before {
  content: "\f1d1";
}
.icon-ge:before {
  content: "\f1d1";
}
.icon-git-square:before {
  content: "\f1d2";
}
.icon-git2:before {
  content: "\f1d3";
}
.icon-hacker-news:before {
  content: "\f1d4";
}
.icon-y-combinator-square:before {
  content: "\f1d4";
}
.icon-yc-square:before {
  content: "\f1d4";
}
.icon-tencent-weibo:before {
  content: "\f1d5";
}
.icon-qq:before {
  content: "\f1d6";
}
.icon-wechat:before {
  content: "\f1d7";
}
.icon-weixin:before {
  content: "\f1d7";
}
.icon-paper-plane:before {
  content: "\f1d8";
}
.icon-send:before {
  content: "\f1d8";
}
.icon-paper-plane-o:before {
  content: "\f1d9";
}
.icon-send-o:before {
  content: "\f1d9";
}
.icon-history2:before {
  content: "\f1da";
}
.icon-circle-thin:before {
  content: "\f1db";
}
.icon-header:before {
  content: "\f1dc";
}
.icon-paragraph:before {
  content: "\f1dd";
}
.icon-sliders:before {
  content: "\f1de";
}
.icon-share-alt:before {
  content: "\f1e0";
}
.icon-share-alt-square:before {
  content: "\f1e1";
}
.icon-bomb:before {
  content: "\f1e2";
}
.icon-futbol-o:before {
  content: "\f1e3";
}
.icon-soccer-ball-o:before {
  content: "\f1e3";
}
.icon-tty:before {
  content: "\f1e4";
}
.icon-binoculars2:before {
  content: "\f1e5";
}
.icon-plug:before {
  content: "\f1e6";
}
.icon-slideshare:before {
  content: "\f1e7";
}
.icon-twitch2:before {
  content: "\f1e8";
}
.icon-yelp2:before {
  content: "\f1e9";
}
.icon-newspaper-o:before {
  content: "\f1ea";
}
.icon-wifi2:before {
  content: "\f1eb";
}
.icon-calculator2:before {
  content: "\f1ec";
}
.icon-paypal2:before {
  content: "\f1ed";
}
.icon-google-wallet:before {
  content: "\f1ee";
}
.icon-cc-visa:before {
  content: "\f1f0";
}
.icon-cc-mastercard:before {
  content: "\f1f1";
}
.icon-cc-discover:before {
  content: "\f1f2";
}
.icon-cc-amex:before {
  content: "\f1f3";
}
.icon-cc-paypal:before {
  content: "\f1f4";
}
.icon-cc-stripe:before {
  content: "\f1f5";
}
.icon-bell-slash:before {
  content: "\f1f6";
}
.icon-bell-slash-o:before {
  content: "\f1f7";
}
.icon-trash:before {
  content: "\f1f8";
}
.icon-copyright:before {
  content: "\f1f9";
}
.icon-at:before {
  content: "\f1fa";
}
.icon-eyedropper2:before {
  content: "\f1fb";
}
.icon-paint-brush:before {
  content: "\f1fc";
}
.icon-birthday-cake:before {
  content: "\f1fd";
}
.icon-area-chart:before {
  content: "\f1fe";
}
.icon-pie-chart2:before {
  content: "\f200";
}
.icon-line-chart:before {
  content: "\f201";
}
.icon-lastfm3:before {
  content: "\f202";
}
.icon-lastfm-square:before {
  content: "\f203";
}
.icon-toggle-off:before {
  content: "\f204";
}
.icon-toggle-on:before {
  content: "\f205";
}
.icon-bicycle:before {
  content: "\f206";
}
.icon-bus:before {
  content: "\f207";
}
.icon-ioxhost:before {
  content: "\f208";
}
.icon-angellist:before {
  content: "\f209";
}
.icon-cc:before {
  content: "\f20a";
}
.icon-ils:before {
  content: "\f20b";
}
.icon-shekel:before {
  content: "\f20b";
}
.icon-sheqel:before {
  content: "\f20b";
}
.icon-meanpath:before {
  content: "\f20c";
}
.icon-buysellads:before {
  content: "\f20d";
}
.icon-connectdevelop:before {
  content: "\f20e";
}
.icon-dashcube:before {
  content: "\f210";
}
.icon-forumbee:before {
  content: "\f211";
}
.icon-leanpub:before {
  content: "\f212";
}
.icon-sellsy:before {
  content: "\f213";
}
.icon-shirtsinbulk:before {
  content: "\f214";
}
.icon-simplybuilt:before {
  content: "\f215";
}
.icon-skyatlas:before {
  content: "\f216";
}
.icon-cart-plus:before {
  content: "\f217";
}
.icon-cart-arrow-down:before {
  content: "\f218";
}
.icon-diamond:before {
  content: "\f219";
}
.icon-ship:before {
  content: "\f21a";
}
.icon-user-secret:before {
  content: "\f21b";
}
.icon-motorcycle:before {
  content: "\f21c";
}
.icon-street-view:before {
  content: "\f21d";
}
.icon-heartbeat:before {
  content: "\f21e";
}
.icon-venus:before {
  content: "\f221";
}
.icon-mars:before {
  content: "\f222";
}
.icon-mercury:before {
  content: "\f223";
}
.icon-intersex:before {
  content: "\f224";
}
.icon-transgender:before {
  content: "\f224";
}
.icon-transgender-alt:before {
  content: "\f225";
}
.icon-venus-double:before {
  content: "\f226";
}
.icon-mars-double:before {
  content: "\f227";
}
.icon-venus-mars:before {
  content: "\f228";
}
.icon-mars-stroke:before {
  content: "\f229";
}
.icon-mars-stroke-v:before {
  content: "\f22a";
}
.icon-mars-stroke-h:before {
  content: "\f22b";
}
.icon-neuter:before {
  content: "\f22c";
}
.icon-genderless:before {
  content: "\f22d";
}
.icon-facebook-official:before {
  content: "\f230";
}
.icon-pinterest-p:before {
  content: "\f231";
}
.icon-whatsapp2:before {
  content: "\f232";
}
.icon-server:before {
  content: "\f233";
}
.icon-user-plus2:before {
  content: "\f234";
}
.icon-user-times:before {
  content: "\f235";
}
.icon-bed:before {
  content: "\f236";
}
.icon-hotel:before {
  content: "\f236";
}
.icon-viacoin:before {
  content: "\f237";
}
.icon-train:before {
  content: "\f238";
}
.icon-subway:before {
  content: "\f239";
}
.icon-medium:before {
  content: "\f23a";
}
.icon-y-combinator:before {
  content: "\f23b";
}
.icon-yc:before {
  content: "\f23b";
}
.icon-optin-monster:before {
  content: "\f23c";
}
.icon-opencart:before {
  content: "\f23d";
}
.icon-expeditedssl:before {
  content: "\f23e";
}
.icon-battery-4:before {
  content: "\f240";
}
.icon-battery-full:before {
  content: "\f240";
}
.icon-battery-3:before {
  content: "\f241";
}
.icon-battery-three-quarters:before {
  content: "\f241";
}
.icon-battery-2:before {
  content: "\f242";
}
.icon-battery-half:before {
  content: "\f242";
}
.icon-battery-1:before {
  content: "\f243";
}
.icon-battery-quarter:before {
  content: "\f243";
}
.icon-battery-0:before {
  content: "\f244";
}
.icon-battery-empty:before {
  content: "\f244";
}
.icon-mouse-pointer:before {
  content: "\f245";
}
.icon-i-cursor:before {
  content: "\f246";
}
.icon-object-group:before {
  content: "\f247";
}
.icon-object-ungroup:before {
  content: "\f248";
}
.icon-sticky-note:before {
  content: "\f249";
}
.icon-sticky-note-o:before {
  content: "\f24a";
}
.icon-cc-jcb:before {
  content: "\f24b";
}
.icon-cc-diners-club:before {
  content: "\f24c";
}
.icon-clone:before {
  content: "\f24d";
}
.icon-balance-scale:before {
  content: "\f24e";
}
.icon-hourglass-o:before {
  content: "\f250";
}
.icon-hourglass-1:before {
  content: "\f251";
}
.icon-hourglass-start:before {
  content: "\f251";
}
.icon-hourglass-2:before {
  content: "\f252";
}
.icon-hourglass-half:before {
  content: "\f252";
}
.icon-hourglass-3:before {
  content: "\f253";
}
.icon-hourglass-end:before {
  content: "\f253";
}
.icon-hourglass:before {
  content: "\f254";
}
.icon-hand-grab-o:before {
  content: "\f255";
}
.icon-hand-rock-o:before {
  content: "\f255";
}
.icon-hand-paper-o:before {
  content: "\f256";
}
.icon-hand-stop-o:before {
  content: "\f256";
}
.icon-hand-scissors-o:before {
  content: "\f257";
}
.icon-hand-lizard-o:before {
  content: "\f258";
}
.icon-hand-spock-o:before {
  content: "\f259";
}
.icon-hand-pointer-o:before {
  content: "\f25a";
}
.icon-hand-peace-o:before {
  content: "\f25b";
}
.icon-trademark:before {
  content: "\f25c";
}
.icon-registered:before {
  content: "\f25d";
}
.icon-creative-commons:before {
  content: "\f25e";
}
.icon-gg:before {
  content: "\f260";
}
.icon-gg-circle:before {
  content: "\f261";
}
.icon-tripadvisor:before {
  content: "\f262";
}
.icon-odnoklassniki:before {
  content: "\f263";
}
.icon-odnoklassniki-square:before {
  content: "\f264";
}
.icon-get-pocket:before {
  content: "\f265";
}
.icon-wikipedia-w:before {
  content: "\f266";
}
.icon-safari2:before {
  content: "\f267";
}
.icon-chrome2:before {
  content: "\f268";
}
.icon-firefox2:before {
  content: "\f269";
}
.icon-opera2:before {
  content: "\f26a";
}
.icon-internet-explorer:before {
  content: "\f26b";
}
.icon-television:before {
  content: "\f26c";
}
.icon-tv2:before {
  content: "\f26c";
}
.icon-contao:before {
  content: "\f26d";
}
.icon-500px2:before {
  content: "\f26e";
}
.icon-amazon2:before {
  content: "\f270";
}
.icon-calendar-plus-o:before {
  content: "\f271";
}
.icon-calendar-minus-o:before {
  content: "\f272";
}
.icon-calendar-times-o:before {
  content: "\f273";
}
.icon-calendar-check-o:before {
  content: "\f274";
}
.icon-industry:before {
  content: "\f275";
}
.icon-map-pin:before {
  content: "\f276";
}
.icon-map-signs:before {
  content: "\f277";
}
.icon-map-o:before {
  content: "\f278";
}
.icon-map32:before {
  content: "\f279";
}
.icon-commenting:before {
  content: "\f27a";
}
.icon-commenting-o:before {
  content: "\f27b";
}
.icon-houzz:before {
  content: "\f27c";
}
.icon-vimeo3:before {
  content: "\f27d";
}
.icon-black-tie:before {
  content: "\f27e";
}
.icon-fonticons:before {
  content: "\f280";
}
/*------------------------------------*\
    $SPECIFICS
\*------------------------------------*/
/*
*
* Abstracciones usadas a lo largo del layout.
*/
.float--none {
  float: none;
}
.float--right {
  float: right;
}
.float--left {
  float: left;
}
/*------------------------------------*\
    $DISPLAY
\*------------------------------------*/
.inline--block {
  display: inline-block;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.table {
  display: table;
}
.table--cell {
  display: table-cell;
}
.display--none {
  display: none;
}
.visibility--hidden {
  visibility: hidden;
}
/*------------------------------------*\
    $MARGIN
\*------------------------------------*/
.margin {
  margin: 24px;
}
.margin--left {
  margin-left: 24px;
}
.margin--top {
  margin-top: 24px;
}
.margin--right {
  margin-right: 24px;
}
.margin--bottom {
  margin-bottom: 24px;
}
.margin--none {
  margin: 0;
}
.margin--auto {
  margin: 0 auto;
}
/*------------------------------------*\
    $PADDING
\*------------------------------------*/
.padding {
  padding: 24px;
}
.padding--left {
  padding-left: 24px;
}
.padding--bottom {
  padding-bottom: 24px;
}
.padding--top {
  padding-top: 24px;
}
.padding--right {
  padding-right: 24px;
}
.padding--none {
  padding: 0;
}
/*------------------------------------*\
    $GAP
\*------------------------------------*/
.gap {
  padding: 6px;
}
.gap--left {
  padding-left: 12px;
}
.gap--bottom {
  padding-bottom: 12px;
}
.gap--top {
  padding-top: 12px;
}
.gap--right {
  padding-right: 12px;
}
/*------------------------------------*\
    $ANCHOS
\*------------------------------------*/
.width--xlarge {
  width: 100%;
}
.width--large {
  width: 75%;
}
.width--medium {
  width: 50%;
}
.width--xsmall {
  width: 33.333%;
}
.width--small {
  width: 25%;
}
/*------------------------------------*\
    $BOTONES-CENTRADOS
\*------------------------------------*/
.btn--centered {
  text-align: center;
  margin: 0 auto;
}
/*------------------------------------*\
    $CAPAS VISIBLES Y OCULTAS
\*------------------------------------*/
.hide {
  display: none;
}
@media (min-width: 18em) {
  .hide--mobile {
    display: none;
  }
}
@media (min-width: 48em) {
  .hide--mobile {
    display: block;
  }
}
@media (min-width: 18em) {
  .hide--tablet {
    display: block;
  }
}
@media (min-width: 48em) {
  .hide--tablet {
    display: none;
  }
}
@media (min-width: 80em) {
  .hide--tablet {
    display: block;
  }
}
@media (min-width: 18em) {
  .hide--desktop {
    display: block;
  }
}
@media (min-width: 80em) {
  .hide--desktop {
    display: none;
  }
}
@media (min-width: 18em) {
  .show--mobile {
    display: block;
  }
}
@media (min-width: 48em) {
  .show--mobile {
    display: none;
  }
}
@media (min-width: 18em) {
  .show--tablet {
    display: none;
  }
}
@media (min-width: 48em) {
  .show--tablet {
    display: block;
  }
}
@media (min-width: 80em) {
  .show--tablet {
    display: none;
  }
}
@media (min-width: 18em) {
  .show--desktop {
    display: none;
  }
}
@media (min-width: 80em) {
  .show--desktop {
    display: block;
  }
}
.disabled {
  opacity: 0.5;
}
/*------------------------------------*\
    $HELPERS
\*------------------------------------*/
.overflow--hidden {
  overflow: hidden;
}
.overflow--auto {
  overflow: auto;
}
.overflow--x {
  overflow-x: scroll;
}
.overflow--y {
  overflow-y: scroll;
}
.text--ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*------------------------------------*\
    $ALINEACION de TEXTOS
\*------------------------------------*/
.text--center {
  text-align: center;
}
.text--right {
  text-align: right;
}
.text--left {
  text-align: left;
}
/*------------------------------------*\
    $VERTICAL ALIGN
\*------------------------------------*/
.valign--top {
  vertical-align: top;
}
.valign--middle {
  vertical-align: middle;
}
.valign--baseline {
  vertical-align: baseline;
}
/*------------------------------------*\
    $COLORES
\*------------------------------------*/
.color--base {
  color: #009dda;
}
.color--secondary {
  color: #ff8f00;
}
.color--success {
  color: #abc111;
}
.color--error {
  color: #ec0000;
}
/*Clases generadas con los valores de colores definidos en settings.scss*/
.color--black {
  color: rgb(0, 0, 0);
}
.color--white {
  color: rgb(255, 255, 255);
}
.color--grey {
  color: rgb(153, 153, 153);
}
.color--darkgrey {
  color: rgb(102, 102, 102);
}
.color--lightgrey {
  color: rgb(204, 204, 204);
}
.color--lightergrey {
  color: #f5f7fa;
}
.color--red {
  color: #ef5350;
}
.color--green {
  color: #6aa84f;
}
.color--orange {
  color: #ff8f00;
}
.color--blue {
  color: #009dda;
}
.color--violet {
  color: #8020bb;
}
/*Clases generadas con los valores de colores definidos en settings.scss*/
.background--black {
  color: rgb(0, 0, 0);
}
.background--white {
  color: rgb(255, 255, 255);
}
.background--grey {
  color: rgb(153, 153, 153);
}
.background--darkgrey {
  color: rgb(102, 102, 102);
}
.background--lightgrey {
  color: rgb(204, 204, 204);
}
.background--lightergrey {
  color: #f5f7fa;
}
.background--red {
  color: #ef5350;
}
.background--green {
  color: #6aa84f;
}
.background--orange {
  color: #ff8f00;
}
.background--blue {
  color: #009dda;
}
.background--violet {
  color: #8020bb;
}
/*------------------------------------*\
    $WEIGHT de TEXTOS
\*------------------------------------*/
.font--bold {
  font-weight: bold;
}
.font--normal {
  font-weight: normal;
}
/*------------------------------------*\
    $LINE HEIGHT
\*------------------------------------*/
.line--height {
  line-height: 24px;
}
/*------------------------------------*\
    $TEXT-DECORATION
\*------------------------------------*/
.underline {
  text-decoration: underline;
}
.line--through {
  text-decoration: line-through;
}
/*------------------------------------*\
    $TEXT-TRANSFORM
\*------------------------------------*/
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
/*------------------------------------*\
    $BACKGROUND COLORS
\*------------------------------------*/
.background--sidebar {
  background-color: #ccccff;
}
/*------------------------------------*\
    $CURSOR
\*------------------------------------*/
.cursor--pointer {
  cursor: pointer;
}
/*------------------------------------*\
    $FONTS
\*------------------------------------*/
/*Clases generadas con las variables de fuentes definidas en settings.scss*/
.basefont {
  font-family: "Titillium Web", sans-serif;
}
.secondfont {
  font-family: "Gruppo", cursive;
}
.alternativefont {
  font-family: "MyriadPro-Light", sans-serif;
}
/*------------------------------------*\
    $FONT-SIZES
\*------------------------------------*/
/*Clases generadas con los valores de tamaño definidos en settings.scss*/
.font--s-small {
  font-size: 10px;
  font-size: 0.625rem;
}
.font--small {
  font-size: 12px;
  font-size: 0.75rem;
}
.font--normal {
  font-size: 16px;
  font-size: 1rem;
}
.font--medium {
  font-size: 20px;
  font-size: 1.25rem;
}
.font--large {
  font-size: 24px;
  font-size: 1.5rem;
}
.font--s-big {
  font-size: 28px;
  font-size: 1.75rem;
}
.font--big {
  font-size: 40px;
  font-size: 2.5rem;
}
.font--icon-huge {
  font-size: 56px;
  font-size: 3.5rem;
}
/*------------------------------------*\
    $LAYOUT
\*------------------------------------*/
.wrapper {
  width: 100%;
  height: 100vh;
  padding: 24px;
}
.wrapper--center {
  width: 100%;
  height: 100vh;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
.wrapper--left {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
}
.wrapper--right {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
}
/*------------------------------------*\
    $POSITION
\*------------------------------------*/
.position--absolute {
  position: absolute;
}
.position--relative {
  position: relative;
}
.position--left {
  left: 0;
}
.position--right {
  right: 0;
}
.position--top {
  top: 0;
}
.position--bottom {
  bottom: 0;
}
.center--absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*------------------------------------*\
    $Z-INDEX
\*------------------------------------*/
/*Clases generadas con los valores de tamaño definidos en settings.scss*/
.z-index0 {
  z-index: 0;
}
.z-index1 {
  z-index: 1;
}
.z-index2 {
  z-index: 2;
}
.z-index3 {
  z-index: 3;
}
.z-index4 {
  z-index: 4;
}
.z-index5 {
  z-index: 5;
}
.z-index6 {
  z-index: 6;
}
.z-index-1 {
  z-index: -1;
}
.z-index-2 {
  z-index: -2;
}
.z-index-3 {
  z-index: -3;
}
.z-index-4 {
  z-index: -4;
}
.z-index-5 {
  z-index: -5;
}
.z-index-6 {
  z-index: -6;
}
.pointer--event__none {
  pointer-events: none;
}
/**
* Componentes
**/
/*------------------------------------*\
    $BOTONES
\*------------------------------------*/
/*
* Definimos los botones y sus variantes
*/
/**
* .btn es la clase principal para definir un botón
*/
.btn, input[type=file] + label {
  position: relative;
  display: -moz-flex;
  display: flex;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
  outline: 0;
  padding: 1px;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  background: #828282;
  background: linear-gradient(135deg, transparent 3px, #828282 0) top left, linear-gradient(225deg, transparent 3px, #828282 0) top right, linear-gradient(315deg, transparent 3px, #828282 0) bottom right, linear-gradient(45deg, transparent 3px, #828282 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  color: #828282;
}
@media (min-width: 18em) {
  .btn, input[type=file] + label {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }
}
@media (min-width: 48em) {
  .btn, input[type=file] + label {
    width: 35px;
    height: 34px;
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .btn, input[type=file] + label {
    width: 46px;
    height: 46px;
    font-size: 1.9rem;
  }
}
.btn.hover, input[type=file] + label.hover, .btn:hover, input[type=file] + label:hover {
  background: #383838;
  background: linear-gradient(135deg, transparent 3px, #383838 0) top left, linear-gradient(225deg, transparent 3px, #383838 0) top right, linear-gradient(315deg, transparent 3px, #383838 0) bottom right, linear-gradient(45deg, transparent 3px, #383838 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  color: #383838;
}
@media (min-width: 60em) {
  .btn .icon-colonia, input[type=file] + label .icon-colonia {
    font-size: 1.5rem;
  }
}
.btn--primary, input[type=file] + label {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 3px, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, transparent 3px, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 3px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, transparent 3px, rgb(255, 255, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}
.btn--primary.active, input[type=file] + label.active, .btn--primary:active, input[type=file] + label:active {
  background: #F7F7F7;
  background: linear-gradient(135deg, transparent 3px, #F7F7F7 0) top left, linear-gradient(225deg, transparent 3px, #F7F7F7 0) top right, linear-gradient(315deg, transparent 3px, #F7F7F7 0) bottom right, linear-gradient(45deg, transparent 3px, #F7F7F7 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.btn--primary.disabled, input[type=file] + label.disabled {
  opacity: 0.5;
}
.btn--secondary {
  background-color: rgb(255, 255, 255);
  border: 1px solid #009dda;
  border-bottom: 3px solid #009dda;
  border-radius: 3px;
  color: #009dda;
  font-size: 1rem;
  line-height: 1rem;
  padding: 12px 24px;
}
@media (min-width: 18em) {
  .btn--secondary {
    font-size: 0.75rem;
    line-height: 0.75rem;
  }
}
@media (min-width: 48em) {
  .btn--secondary {
    font-size: 1rem;
    line-height: 1rem;
  }
}
.btn--secondary.active, .btn--secondary:active {
  box-shadow: 0 0 0 1px #009dda;
}
.btn--secondary.disabled, .btn--secondary:disabled {
  opacity: 0.5;
}
.btn--info {
  cursor: pointer;
  display: inline-block;
  margin-top: 24px;
  font-size: 1rem;
  padding: 12px;
  border: 1px solid #009dda;
  color: #009dda;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
.btn--info:hover {
  background-color: #009dda;
  color: rgb(255, 255, 255);
}
.btn--info [class^=icon-],
.btn--info [class*=icon-] {
  float: right;
  padding: 3px 0 0 6px;
}
.btn--grey {
  min-width: 85px;
  position: relative;
  display: -moz-inline-flex;
  display: inline-flex;
  -moz-align-items: center;
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(153, 153, 153);
  border-radius: 4px;
  font-family: torqueweb-medium;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: rgb(153, 153, 153);
  cursor: pointer;
  margin: 0 6px;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .btn--grey {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .btn--grey {
    padding: 12px;
    font-size: 1.25rem;
  }
}
.btn--grey [class^=icon-],
.btn--grey [class*=" icon-"] {
  padding-right: 24px;
}
.btn--grey [class^=icon-]:after,
.btn--grey [class*=" icon-"]:after {
  content: "";
  border-right: 1px dashed rgb(153, 153, 153);
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  transform: rotate(10deg);
}
@media (min-width: 18em) {
  .btn--grey [class^=icon-]:after,
  .btn--grey [class*=" icon-"]:after {
    left: 35px;
  }
}
@media (min-width: 60em) {
  .btn--grey [class^=icon-]:after,
  .btn--grey [class*=" icon-"]:after {
    left: 44px;
  }
}
.btn--darkgrey {
  min-width: 85px;
  position: relative;
  display: -moz-inline-flex;
  display: inline-flex;
  -moz-align-items: center;
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(102, 102, 102);
  border-radius: 4px;
  font-family: torqueweb-medium;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: rgb(102, 102, 102);
  cursor: pointer;
  margin: 0 6px;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .btn--darkgrey {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .btn--darkgrey {
    padding: 12px;
    font-size: 1.25rem;
  }
}
.btn--darkgrey [class^=icon-],
.btn--darkgrey [class*=" icon-"] {
  padding-right: 24px;
}
.btn--darkgrey [class^=icon-]:after,
.btn--darkgrey [class*=" icon-"]:after {
  content: "";
  border-right: 1px dashed rgb(102, 102, 102);
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  transform: rotate(10deg);
}
@media (min-width: 18em) {
  .btn--darkgrey [class^=icon-]:after,
  .btn--darkgrey [class*=" icon-"]:after {
    left: 35px;
  }
}
@media (min-width: 60em) {
  .btn--darkgrey [class^=icon-]:after,
  .btn--darkgrey [class*=" icon-"]:after {
    left: 44px;
  }
}
.btn--orange {
  min-width: 85px;
  position: relative;
  display: -moz-inline-flex;
  display: inline-flex;
  -moz-align-items: center;
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid #ff8f00;
  border-radius: 4px;
  font-family: torqueweb-medium;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: #ff8f00;
  cursor: pointer;
  margin: 0 6px;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .btn--orange {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .btn--orange {
    padding: 12px;
    font-size: 1.25rem;
  }
}
.btn--orange [class^=icon-],
.btn--orange [class*=" icon-"] {
  padding-right: 24px;
}
.btn--orange [class^=icon-]:after,
.btn--orange [class*=" icon-"]:after {
  content: "";
  border-right: 1px dashed #ff8f00;
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  transform: rotate(10deg);
}
@media (min-width: 18em) {
  .btn--orange [class^=icon-]:after,
  .btn--orange [class*=" icon-"]:after {
    left: 35px;
  }
}
@media (min-width: 60em) {
  .btn--orange [class^=icon-]:after,
  .btn--orange [class*=" icon-"]:after {
    left: 44px;
  }
}
.btn--orange:hover {
  background: #FFF5E8;
}
.btn--orange:active {
  min-width: 85px;
  position: relative;
  display: -moz-inline-flex;
  display: inline-flex;
  -moz-align-items: center;
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid #BA8643;
  border-radius: 4px;
  font-family: torqueweb-medium;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: #BA8643;
  cursor: pointer;
  margin: 0 6px;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
  color: #BA8643;
}
@media (min-width: 18em) {
  .btn--orange:active {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .btn--orange:active {
    padding: 12px;
    font-size: 1.25rem;
  }
}
.btn--orange:active [class^=icon-],
.btn--orange:active [class*=" icon-"] {
  padding-right: 24px;
}
.btn--orange:active [class^=icon-]:after,
.btn--orange:active [class*=" icon-"]:after {
  content: "";
  border-right: 1px dashed #BA8643;
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  transform: rotate(10deg);
}
@media (min-width: 18em) {
  .btn--orange:active [class^=icon-]:after,
  .btn--orange:active [class*=" icon-"]:after {
    left: 35px;
  }
}
@media (min-width: 60em) {
  .btn--orange:active [class^=icon-]:after,
  .btn--orange:active [class*=" icon-"]:after {
    left: 44px;
  }
}
.btn--orange.disabled {
  opacity: 0.5;
}
.btn--blue {
  min-width: 85px;
  position: relative;
  display: -moz-inline-flex;
  display: inline-flex;
  -moz-align-items: center;
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid #009dda;
  border-radius: 4px;
  font-family: torqueweb-medium;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: #009dda;
  cursor: pointer;
  margin: 0 6px;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .btn--blue {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .btn--blue {
    padding: 12px;
    font-size: 1.25rem;
  }
}
.btn--blue [class^=icon-],
.btn--blue [class*=" icon-"] {
  padding-right: 24px;
}
.btn--blue [class^=icon-]:after,
.btn--blue [class*=" icon-"]:after {
  content: "";
  border-right: 1px dashed #009dda;
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  transform: rotate(10deg);
}
@media (min-width: 18em) {
  .btn--blue [class^=icon-]:after,
  .btn--blue [class*=" icon-"]:after {
    left: 35px;
  }
}
@media (min-width: 60em) {
  .btn--blue [class^=icon-]:after,
  .btn--blue [class*=" icon-"]:after {
    left: 44px;
  }
}
.btn--blue:hover {
  background: rgb(243.5, 251.7821100917, 255);
}
.btn--blue:active {
  min-width: 85px;
  position: relative;
  display: -moz-inline-flex;
  display: inline-flex;
  -moz-align-items: center;
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid #BA8643;
  border-radius: 4px;
  font-family: torqueweb-medium;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: #BA8643;
  cursor: pointer;
  margin: 0 6px;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
  color: #BA8643;
}
@media (min-width: 18em) {
  .btn--blue:active {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .btn--blue:active {
    padding: 12px;
    font-size: 1.25rem;
  }
}
.btn--blue:active [class^=icon-],
.btn--blue:active [class*=" icon-"] {
  padding-right: 24px;
}
.btn--blue:active [class^=icon-]:after,
.btn--blue:active [class*=" icon-"]:after {
  content: "";
  border-right: 1px dashed #BA8643;
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  transform: rotate(10deg);
}
@media (min-width: 18em) {
  .btn--blue:active [class^=icon-]:after,
  .btn--blue:active [class*=" icon-"]:after {
    left: 35px;
  }
}
@media (min-width: 60em) {
  .btn--blue:active [class^=icon-]:after,
  .btn--blue:active [class*=" icon-"]:after {
    left: 44px;
  }
}
.btn--blue.disabled {
  opacity: 0.5;
}
.btn--green {
  min-width: 85px;
  position: relative;
  display: -moz-inline-flex;
  display: inline-flex;
  -moz-align-items: center;
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid #6aa84f;
  border-radius: 4px;
  font-family: torqueweb-medium;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: #6aa84f;
  cursor: pointer;
  margin: 0 6px;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .btn--green {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .btn--green {
    padding: 12px;
    font-size: 1.25rem;
  }
}
.btn--green [class^=icon-],
.btn--green [class*=" icon-"] {
  padding-right: 24px;
}
.btn--green [class^=icon-]:after,
.btn--green [class*=" icon-"]:after {
  content: "";
  border-right: 1px dashed #6aa84f;
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  transform: rotate(10deg);
}
@media (min-width: 18em) {
  .btn--green [class^=icon-]:after,
  .btn--green [class*=" icon-"]:after {
    left: 35px;
  }
}
@media (min-width: 60em) {
  .btn--green [class^=icon-]:after,
  .btn--green [class*=" icon-"]:after {
    left: 44px;
  }
}
.btn--back {
  color: rgb(255, 255, 255);
  font-weight: bold;
  cursor: pointer;
  position: absolute;
}
@media (min-width: 18em) {
  .btn--back {
    left: -3px;
    top: 18px;
    font-size: 1.5rem;
  }
}
@media (min-width: 60em) {
  .btn--back {
    left: -6px;
    top: 12px;
    font-size: 1.75rem;
  }
}
.btn--random {
  color: #ff8f00;
  border: 1px solid #ff8f00;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  border-radius: 3px;
  font-weight: bold;
  cursor: pointer;
}
@media (min-width: 18em) {
  .btn--random {
    width: 30px;
    height: 30px;
    font-size: 1.5rem;
  }
}
@media (min-width: 60em) {
  .btn--random {
    width: 45px;
    height: 45px;
    font-size: 1.75rem;
  }
}
[class^=btn--],
[class*=btn--] {
  outline: 0;
}
.btn--paginator {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  background: rgb(255, 255, 255);
  border: 1px solid rgb(153, 153, 153);
  border-radius: 3px;
  color: rgb(153, 153, 153);
  cursor: pointer;
  padding: 0;
  margin: 0;
}
@media (min-width: 18em) {
  .btn--paginator {
    width: 35px;
    height: 35px;
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .btn--paginator {
    width: 45px;
    height: 45px;
    font-size: 1.5rem;
  }
}
.btn--paginator:hover {
  transform: scale(1.1);
}
.btn--paginator.disabled {
  opacity: 0.5;
}
.btn--shape {
  cursor: pointer;
  margin: 0 6px;
  text-align: center;
  text-transform: uppercase;
  line-height: 0;
  padding: 1px;
  letter-spacing: 2px;
  font-family: "torqueweb-book";
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
  background: rgb(0, 0, 0);
  background: linear-gradient(135deg, transparent 3px, rgb(0, 0, 0) 0) top left, linear-gradient(225deg, transparent 3px, rgb(0, 0, 0) 0) top right, linear-gradient(315deg, transparent 3px, rgb(0, 0, 0) 0) bottom right, linear-gradient(45deg, transparent 3px, rgb(0, 0, 0) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  color: rgb(0, 0, 0);
}
.btn--shape.shape--orange {
  background: #ff8f00;
  background: linear-gradient(135deg, transparent 3px, #ff8f00 0) top left, linear-gradient(225deg, transparent 3px, #ff8f00 0) top right, linear-gradient(315deg, transparent 3px, #ff8f00 0) bottom right, linear-gradient(45deg, transparent 3px, #ff8f00 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  color: #ff8f00;
}
.btn--shape.shape--blue {
  background: #009dda;
  background: linear-gradient(135deg, transparent 3px, #009dda 0) top left, linear-gradient(225deg, transparent 3px, #009dda 0) top right, linear-gradient(315deg, transparent 3px, #009dda 0) bottom right, linear-gradient(45deg, transparent 3px, #009dda 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  color: #009dda;
}
.btn--shape.shape--blue .btn--shape__canvas:hover {
  background: rgb(243.5, 251.7821100917, 255);
  background: linear-gradient(135deg, transparent 3px, rgb(243.5, 251.7821100917, 255) 0) top left, linear-gradient(225deg, transparent 3px, rgb(243.5, 251.7821100917, 255) 0) top right, linear-gradient(315deg, transparent 3px, rgb(243.5, 251.7821100917, 255) 0) bottom right, linear-gradient(45deg, transparent 3px, rgb(243.5, 251.7821100917, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.btn--shape.shape--darkgrey {
  background: rgb(102, 102, 102);
  background: linear-gradient(135deg, transparent 3px, rgb(102, 102, 102) 0) top left, linear-gradient(225deg, transparent 3px, rgb(102, 102, 102) 0) top right, linear-gradient(315deg, transparent 3px, rgb(102, 102, 102) 0) bottom right, linear-gradient(45deg, transparent 3px, rgb(102, 102, 102) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  color: rgb(102, 102, 102);
}
.btn--shape.shape--darkgrey .btn--shape__canvas:hover {
  background: rgb(242.25, 242.25, 242.25);
  background: linear-gradient(135deg, transparent 3px, rgb(242.25, 242.25, 242.25) 0) top left, linear-gradient(225deg, transparent 3px, rgb(242.25, 242.25, 242.25) 0) top right, linear-gradient(315deg, transparent 3px, rgb(242.25, 242.25, 242.25) 0) bottom right, linear-gradient(45deg, transparent 3px, rgb(242.25, 242.25, 242.25) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.btn--shape.shape--violet {
  background: #8020bb;
  background: linear-gradient(135deg, transparent 3px, #8020bb 0) top left, linear-gradient(225deg, transparent 3px, #8020bb 0) top right, linear-gradient(315deg, transparent 3px, #8020bb 0) bottom right, linear-gradient(45deg, transparent 3px, #8020bb 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  color: #8020bb;
}
.btn--shape.shape--violet .btn--shape__canvas:hover {
  background: rgb(250.6369863014, 246.0342465753, 253.4657534247);
  background: linear-gradient(135deg, transparent 3px, rgb(250.6369863014, 246.0342465753, 253.4657534247) 0) top left, linear-gradient(225deg, transparent 3px, rgb(250.6369863014, 246.0342465753, 253.4657534247) 0) top right, linear-gradient(315deg, transparent 3px, rgb(250.6369863014, 246.0342465753, 253.4657534247) 0) bottom right, linear-gradient(45deg, transparent 3px, rgb(250.6369863014, 246.0342465753, 253.4657534247) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.btn--shape.shape--red {
  background: #ef5350;
  background: linear-gradient(135deg, transparent 3px, #ef5350 0) top left, linear-gradient(225deg, transparent 3px, #ef5350 0) top right, linear-gradient(315deg, transparent 3px, #ef5350 0) bottom right, linear-gradient(45deg, transparent 3px, #ef5350 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  color: #ef5350;
}
.btn--shape.shape--red .btn--shape__canvas:hover {
  background: white;
  background: linear-gradient(135deg, transparent 3px, white 0) top left, linear-gradient(225deg, transparent 3px, white 0) top right, linear-gradient(315deg, transparent 3px, white 0) bottom right, linear-gradient(45deg, transparent 3px, white 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.btn--shape:active {
  background: #BA8643;
  background: linear-gradient(135deg, transparent 3px, #BA8643 0) top left, linear-gradient(225deg, transparent 3px, #BA8643 0) top right, linear-gradient(315deg, transparent 3px, #BA8643 0) bottom right, linear-gradient(45deg, transparent 3px, #BA8643 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  color: #BA8643;
}
.btn--shape .btn--shape__canvas {
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 3px, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, transparent 3px, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 3px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, transparent 3px, rgb(255, 255, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  position: relative;
}
@media (min-width: 18em) {
  .btn--shape .btn--shape__canvas {
    padding: 12px;
    font-size: 0.75rem;
    min-width: 120px;
  }
}
@media (min-width: 60em) {
  .btn--shape .btn--shape__canvas {
    padding: 20px;
    font-size: 1rem;
  }
}
.btn--shape .btn--shape__canvas.shape--lightergrey {
  background: #f5f7fa;
  background: linear-gradient(135deg, transparent 3px, #f5f7fa 0) top left, linear-gradient(225deg, transparent 3px, #f5f7fa 0) top right, linear-gradient(315deg, transparent 3px, #f5f7fa 0) bottom right, linear-gradient(45deg, transparent 3px, #f5f7fa 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.btn--shape .btn--shape__canvas:hover {
  background: #FFF5E8;
  background: linear-gradient(135deg, transparent 3px, #FFF5E8 0) top left, linear-gradient(225deg, transparent 3px, #FFF5E8 0) top right, linear-gradient(315deg, transparent 3px, #FFF5E8 0) bottom right, linear-gradient(45deg, transparent 3px, #FFF5E8 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.btn--shape .btn--shape__canvas:active {
  background: #F7F7F7;
  background: linear-gradient(135deg, transparent 3px, #F7F7F7 0) top left, linear-gradient(225deg, transparent 3px, #F7F7F7 0) top right, linear-gradient(315deg, transparent 3px, #F7F7F7 0) bottom right, linear-gradient(45deg, transparent 3px, #F7F7F7 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  color: #BA8643;
}
.btn--shape .btn--shape__canvas [class^=icon-],
.btn--shape .btn--shape__canvas [class*=icon-] {
  padding-right: 12px;
}
.btn--link {
  cursor: pointer;
  text-align: center;
  padding: 6px;
}
.btn--collapse {
  display: block;
}
/*------------------------------------*\
    $TOOLTIP DE PÁGINA
\*------------------------------------*/
/*
 * Esto contiene los estilos para los tooltips de la web.
 */
.tooltip--text {
  position: relative;
}
.tooltip--text:hover .tooltip--text__item {
  display: inline;
}
.tooltip--text__item {
  width: 450px;
  position: absolute;
  z-index: 5;
  top: 24px;
  left: 0;
  padding: 24px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(153, 153, 153);
  border-radius: 6px;
  color: rgb(0, 0, 0);
  display: none;
}
.tooltip--text__item b {
  width: 100%;
  display: block;
  color: rgb(153, 153, 153);
  padding-bottom: 6px;
}
/*------------------------------------*\
    $PROGRESSBAR
\*------------------------------------*/
/*
 * Esto contiene los estilos para los progressbar games.
 */
.progress {
  width: 100%;
  max-width: 450px;
  display: -moz-flex;
  display: flex;
  border-radius: 9px;
  box-shadow: 0 0 24px 0 rgba(153, 153, 153, 0.4);
}
.progress--bar {
  background-color: #ff8f00;
  padding: 12px;
  border-radius: 9px;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
/*------------------------------------*\
    $LOADINGBAR
\*------------------------------------*/
/*
 * Esto contiene los estilos para los loadingbar games.
 */
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 100%;
  max-width: 33%;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0 24px 0 rgba(0, 157, 218, 0.4);
}
.loading--bar {
  position: absolute;
  height: 100%;
  overflow: hidden;
  background-color: #009dda;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.loading--bar__label {
  position: relative;
  color: rgb(255, 255, 255);
}
/*------------------------------------*\
    $GRADIENTS
\*------------------------------------*/
/*
 * Esto contiene los estilos para los gradients games.
 */
.gradient {
  width: 120px;
  height: 50px;
}
.gradient--pacific {
  background-color: #216ca7;
  background-image: linear-gradient(to right, #49b2c3, #216ca7);
  background-repeat: repeat-x;
}
.gradient--triskelion {
  background-color: #e74630;
  background-image: linear-gradient(to right, #f7b431, #e74630);
  background-repeat: repeat-x;
}
.gradient--2100 {
  background-color: #632157;
  background-image: linear-gradient(to right, #e94730, #632157);
  background-repeat: repeat-x;
}
.gradient--merchants {
  background-color: #91c684;
  background-image: linear-gradient(to right, #49b2c3, #91c684);
  background-repeat: repeat-x;
}
.gradient--ada {
  background-color: #00f690;
  background-image: linear-gradient(to right, #33c9c0, #00f690);
  background-repeat: repeat-x;
}
.gradient--gdpr {
  background-color: #709AD1;
  background-image: linear-gradient(to right, rgb(73.4126984127, 126.746031746, 196.5873015873), #709AD1);
  background-repeat: repeat-x;
}
.gradient--circle {
  background-image: radial-gradient(circle farthest-corner at bottom, #3c3b52 0%, #252233 80%);
}
.gradient--ellipse {
  background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%);
}
.gradient--default {
  background-image: linear-gradient(#8b9da9, #fff6e4);
}
.gradient--left {
  background: radial-gradient(ellipse at top left, rgb(105, 155, 200) 0%, rgb(181, 197, 216) 57%);
}
.gradient--right {
  background-image: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
}
/*------------------------------------*\
    $SHADOWS
\*------------------------------------*/
/*
* Esto contiene los estilos para los shadows games.
*/
.box--shadow {
  position: relative;
  width: 120px;
  height: 50px;
  background-color: rgb(255, 255, 255);
}
.shadow-1 {
  box-shadow: 0 10px 6px -6px rgb(102, 102, 102);
}
.shadow-2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgb(102, 102, 102);
  z-index: -1;
}
.shadow-3 {
  box-shadow: 0 15px 38px rgb(102, 102, 102), 0 5px 12px rgb(102, 102, 102);
}
.shadow-4 {
  box-shadow: 0 1px 4px rgba(102, 102, 102, 0.3), 0 0 40px rgba(102, 102, 102, 0.1) inset;
}
.shadow-4:after, .shadow-4:before {
  content: "";
  position: absolute;
  z-index: -1;
  box-shadow: 0 0 20px rgba(102, 102, 102, 0.8);
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 0;
  border-radius: 100px/10px;
}
.shadow-4:after {
  right: 10px;
  left: auto;
  transform: skew(8deg, 0);
  transform: rotate(3deg);
}
.shadow-5, .select--options, .dropdown--content {
  box-shadow: 0 0 12px 0 rgb(102, 102, 102);
}
.shadow-6 {
  box-shadow: 0 0 6px 0 rgb(102, 102, 102);
}
/*------------------------------------*\
    $COLORS
\*------------------------------------*/
/*
 * Esto contiene los estilos para los colors games.
 */
.color {
  width: 150px;
  height: 50px;
  display: table-cell;
  color: rgb(255, 255, 255);
  text-align: center;
  vertical-align: middle;
}
.bg--black {
  background-color: rgb(0, 0, 0);
}
.bg--grey {
  background-color: rgb(153, 153, 153);
}
.bg--darkgrey {
  background-color: rgb(102, 102, 102);
}
.bg--lightgrey {
  background-color: rgb(204, 204, 204);
}
.bg--lightergrey {
  background-color: #f5f7fa;
}
.bg--red {
  background-color: #ef5350;
}
.bg--green {
  background-color: #6aa84f;
}
.bg--orange {
  background-color: #ff8f00;
}
.bg--blue {
  background-color: #009dda;
}
.bg--violet {
  background-color: #8020bb;
}
/*------------------------------------*\
    $POPUPS
\*------------------------------------*/
/*
 * Esto contiene los estilos para los popups games.
 */
.popup--background {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.5);
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  z-index: 5;
}
.popup {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  border: 1px solid rgb(153, 153, 153);
  border-left: 6px solid #009dda;
  border-radius: 4.5px;
  background-color: rgb(255, 255, 255);
}
@media (min-width: 18em) {
  .popup {
    padding: 48px 24px;
  }
}
.popup.popup--error {
  border-left: 6px solid #ec0000;
}
.popup.popup--error .popup--title, .popup.popup--error .btn, .popup.popup--error input[type=file] + label {
  color: #ec0000;
  border-color: #ec0000;
}
.popup--title {
  color: rgb(102, 102, 102);
  font-family: "Gruppo", cursive;
}
@media (min-width: 18em) {
  .popup--title {
    font-size: 24px;
    line-height: 24px;
  }
}
@media (min-width: 80em) {
  .popup--title {
    font-size: 1.75rem;
    line-height: 1.75rem;
  }
}
.popup--message {
  width: 80%;
  font-weight: 100;
  text-align: center;
}
@media (min-width: 18em) {
  .popup--message {
    font-size: 1rem;
    padding: 24px 0;
  }
}
@media (min-width: 80em) {
  .popup--message {
    font-size: 1rem;
  }
}
.popup--message .box--info {
  margin-top: 24px;
}
.popup--message .box--info * {
  font-size: 75%;
}
/*------------------------------------*\
    $ALERTS
\*------------------------------------*/
/*
 * Esto contiene los estilos para los alerts games.
 */
/*------------------------------------*\
    $TOOLTIP DE PÁGINA
\*------------------------------------*/
/*
 * Esto contiene los estilos para los tooltips de la web.
 */
.tooltip--text {
  position: relative;
}
.tooltip--text:hover .tooltip--text__item {
  display: inline;
}
.tooltip--text__item {
  width: 450px;
  position: absolute;
  z-index: 5;
  top: 24px;
  left: 0;
  padding: 24px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(153, 153, 153);
  border-radius: 6px;
  color: rgb(0, 0, 0);
  display: none;
}
.tooltip--text__item b {
  width: 100%;
  display: block;
  color: rgb(153, 153, 153);
  padding-bottom: 6px;
}
/*------------------------------------*\
    $BOXES
\*------------------------------------*/
/*
 * Esto contiene los estilos para los boxes games.
 */
.box--grid {
  position: relative;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 1rem;
  padding: 1rem;
  background: #009dda;
  border: 1px solid rgb(255, 255, 255);
  overflow: hidden;
  text-align: center;
  color: rgb(255, 255, 255);
}
/*------------------------------------*\
    $HEADINGS
\*------------------------------------*/
/*
 * Esto contiene los estilos para los headings games.
 */
/*------------------------------------*\
    $CARROUSEL
\*------------------------------------*/
/*
* Esto contiene los estilos para los carrousel games.
*/
.carrousel {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  font-size: 2.5rem;
  color: rgb(255, 255, 255);
  perspective: 900px;
  transform-style: preserve-3d;
}
.carrousel__item {
  width: 150px;
  height: 150px;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  transform: rotateY(45deg);
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  margin: 0 -50px;
  border: 1px dashed rgb(255, 255, 255);
  background-color: #009dda;
  cursor: pointer;
  perspective: 300px;
}
.carrousel__item.active {
  background-color: #ff8f00;
  margin: 0;
  transform: none;
}
.carrousel__item.active ~ .carrousel__item {
  transform: rotateY(-45deg);
}
/**
* vendor / Archivos externos CSS
**/
/*------------------------------------*\
    $PRETIFY
\*------------------------------------*/
/**
* Estilos genéricos para pretify
*/
pre.prettyprint {
  border: 1px solid rgb(204, 204, 204) !important;
  background-color: rgb(255, 255, 255);
  padding: 18px 0 0 0 !important;
}
/*------------------------------------*\
    $STYLE SPECIFIC GAME
\*------------------------------------*/
/**
 * Aquí incluímos todos los módulos (archivos .scss) que se van
 * a compilar en el CSS definitivo: /css/style.css y que son especificos del juego.
 */
/**
 * Lib
 **/
/*------------------------------------*\
    $SETTINGS GAME
\*------------------------------------*/
/*------------------------------------*\
    $OBJETOS Y ABSTRACCIONES
\*------------------------------------*/
/**
 * Qué objetos y abstracciones vamos a usar? (true: se usa, false: no se usa)
 */
/*------------------------------------*\
    $FONTS-ICONS
\*------------------------------------*/
/**
 * Con agregar esta variable en CSS apañamos:
 */
/*$image-dir: "//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics"; */
/*------------------------------------*\
    $COLORS
\*------------------------------------*/
/**
 * Escala de colores espécificos del juego
 * Colores base, colores de error, colores brand stuff
 */
/**
 * Variable map colors
 * Para usar un color:
 * .className {color: color(blue);}
 */
/**
 * Variable map shields colors
 * Para usar un color:
 * .className {color: color(blue);}
 */
/**
 * Variable map flags colors
 * Para usar un color:
 * .className {color: color(blue);}
 */
/*------------------------------------*\
    $FONT-FACE
\*------------------------------------*/
/**
 * Definimos las fuentes a utilizar:
 * $basefont para todos los textos inline
 * $altfont para textos alternativos, como citas, intro, etc...
 * $codefont para código
 */
/**
 * Abstractions
 **/
/*------------------------------------*\
    $BACKGROUNDS
\*------------------------------------*/
/*
 * Esto contiene los estilos para backgrounds game.
 */
.background {
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: auto 100%;
}
.background--challenge {
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/Fase1_BK_1.png");
}
.background--mina {
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/Fase2_BK_1.png");
}
.background--mina__canvas {
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/Fase2_BK_3.png");
}
.background--data {
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/Fase1-data.png");
}
.background--mars {
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/mars-skyline.jpg");
}
/*------------------------------------*\
    $FONTICONS
\*------------------------------------*/
/*
* Definimos las fuentes de iconos para el game
*/
@font-face {
  font-family: "icomoon";
  src: url("/assets/fonts/game/icomoon.eot?v4mceb");
  src: url("/assets/fonts/game/icomoon.eot?v4mceb#iefix") format("embedded-opentype"), url("/assets/fonts/game/icomoon.ttf?v4mceb") format("truetype"), url("/assets/fonts/game/icomoon.woff?v4mceb") format("woff"), url("/assets/fonts/game/icomoon.svg?v4mceb#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^=icon-],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering ========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-antimateria-medium:before {
  content: "\e9df";
}
.icon-penalizada:before {
  content: "\e9de";
}
.icon-auto:before {
  content: "\e9dc";
}
.icon-hd:before {
  content: "\e9dd";
}
.icon-panels-show:before {
  content: "\e9da";
}
.icon-panels-collapse:before {
  content: "\e9db";
}
.icon-repeat-button:before {
  content: "\e9d9";
}
.icon-flag-base:before {
  content: "\e9d8";
}
.icon-flag-1:before {
  content: "\e900";
}
.icon-flag-2:before {
  content: "\e901";
}
.icon-flag-3:before {
  content: "\e902";
}
.icon-flag-4:before {
  content: "\e903";
}
.icon-flag-5:before {
  content: "\e904";
}
.icon-flag-6:before {
  content: "\e905";
}
.icon-flag-7:before {
  content: "\e906";
}
.icon-flag-8:before {
  content: "\e907";
}
.icon-flag-9:before {
  content: "\e908";
}
.icon-flag-10:before {
  content: "\e909";
}
.icon-flag-11:before {
  content: "\e90a";
}
.icon-flag-12:before {
  content: "\e90b";
}
.icon-flag-13:before {
  content: "\e90c";
}
.icon-flag-14 .path1:before {
  content: "\e90d";
  color: rgb(0, 0, 0);
}
.icon-flag-14 .path2:before {
  content: "\e90e";
  margin-left: -1.240234375em;
  color: rgb(252, 252, 252);
}
.icon-flag-15:before {
  content: "\e90f";
}
.icon-flag-16:before {
  content: "\e910";
}
.icon-flag-17:before {
  content: "\e911";
}
.icon-flag-18:before {
  content: "\e912";
}
.icon-flag-19:before {
  content: "\e913";
}
.icon-flag-20:before {
  content: "\e914";
}
.icon-flag-21:before {
  content: "\e915";
}
.icon-flag-22:before {
  content: "\e916";
}
.icon-flag-23:before {
  content: "\e917";
}
.icon-flag-24:before {
  content: "\e918";
}
.icon-flag-25:before {
  content: "\e919";
}
.icon-flag-26:before {
  content: "\e91a";
}
.icon-flag-27:before {
  content: "\e91b";
}
.icon-flag-28:before {
  content: "\e91c";
}
.icon-flag-29:before {
  content: "\e91d";
}
.icon-flag-30:before {
  content: "\e91e";
}
.icon-flag-31:before {
  content: "\e91f";
}
.icon-flag-32:before {
  content: "\e920";
}
.icon-flag-33:before {
  content: "\e921";
}
.icon-flag-34:before {
  content: "\e922";
}
.icon-flag-35:before {
  content: "\e923";
}
.icon-flag-36:before {
  content: "\e924";
}
.icon-flag-37:before {
  content: "\e925";
}
.icon-flag-38:before {
  content: "\e926";
}
.icon-flag-39:before {
  content: "\e927";
}
.icon-flag-40:before {
  content: "\e928";
}
.icon-flag-41:before {
  content: "\e929";
}
.icon-flag-42:before {
  content: "\e92a";
}
.icon-flag-43:before {
  content: "\e92b";
}
.icon-flag-44:before {
  content: "\e92c";
}
.icon-flag-45:before {
  content: "\e92d";
}
.icon-flag-46:before {
  content: "\e92e";
}
.icon-flag-47:before {
  content: "\e92f";
}
.icon-flag-48:before {
  content: "\e930";
}
.icon-flag-49:before {
  content: "\e931";
}
.icon-flag-50:before {
  content: "\e932";
}
.icon-flag-forma-1:before {
  content: "\e933";
}
.icon-flag-forma-2:before {
  content: "\e934";
}
.icon-flag-forma-3:before {
  content: "\e935";
}
.icon-flag-forma-4:before {
  content: "\e936";
}
.icon-flag-forma-5:before {
  content: "\e937";
}
.icon-flag-forma-6:before {
  content: "\e938";
}
.icon-flag-forma-7:before {
  content: "\e939";
}
.icon-flag-forma-8:before {
  content: "\e93a";
}
.icon-flag-forma-9:before {
  content: "\e93b";
}
.icon-flag-forma-10:before {
  content: "\e93c";
}
.icon-flag-forma-11:before {
  content: "\e93d";
}
.icon-flag-forma-12:before {
  content: "\e93e";
}
.icon-colonos:before {
  content: "\e997";
}
.icon-gcoins1:before {
  content: "\e998";
}
.icon-history:before {
  content: "\e977";
}
.icon-antimateria:before {
  content: "\e941";
}
.icon-antimateria-hex:before {
  content: "\e93f";
}
.icon-dislike:before {
  content: "\e996";
}
.icon-max-hover:before {
  content: "\e994";
}
.icon-min-hover:before {
  content: "\e995";
}
.icon-circle:before {
  content: "\e993";
}
.icon-trophy:before {
  content: "\e992";
}
.icon-lightbulb:before {
  content: "\e991";
}
.icon-ball:before {
  content: "\e990";
}
.icon-crane:before {
  content: "\e98f";
}
.icon-self-question:before {
  content: "\e98e";
}
.icon-upgrade:before {
  content: "\e98d";
}
.icon-rocket-loading:before {
  content: "\e98b";
}
.icon-rocket-loading1:before {
  content: "\e98a";
}
.icon-hex-background:before {
  content: "\e989";
  color: #fff;
}
.icon-hex-border:before {
  content: "\e98c";
}
.icon-answer:before {
  content: "\e982";
}
.icon-back:before {
  content: "\e983";
}
.icon-bulldozer:before {
  content: "\e984";
}
.icon-debate:before {
  content: "\e985";
}
.icon-question:before {
  content: "\e986";
}
.icon-zoom-max:before {
  content: "\e987";
}
.icon-zoom-min:before {
  content: "\e988";
}
.icon-content:before {
  content: "\e981";
}
.icon-like:before {
  content: "\e980";
}
.icon-id:before {
  content: "\e97d";
}
.icon-point:before {
  content: "\e97e";
}
.icon-zoom:before {
  content: "\e97b";
}
.icon-zoom-active:before {
  content: "\e97c";
}
.icon-center:before {
  content: "\e978";
}
.icon-full-screen:before {
  content: "\e979";
}
.icon-zoom1:before {
  content: "\e97a";
}
.icon-colonia:before {
  content: "\e940";
}
.icon-comodin:before {
  content: "\e96d";
}
.icon-desafio:before {
  content: "\e96e";
}
.icon-mejorar:before {
  content: "\e972";
}
.icon-pass:before {
  content: "\e973";
}
.icon-premium:before {
  content: "\e974";
}
.icon-send:before {
  content: "\e975";
}
.icon-visit:before {
  content: "\e976";
}
.icon-audio:before {
  content: "\e942";
}
.icon-doc:before {
  content: "\e94f";
}
.icon-image:before {
  content: "\e96f";
}
.icon-video:before {
  content: "\e970";
}
.icon-web:before {
  content: "\e971";
}
.icon-dron:before {
  content: "\e94d";
}
.icon-energy:before {
  content: "\e963";
}
.icon-feed:before {
  content: "\e964";
}
.icon-gcoins:before {
  content: "\e965";
}
.icon-happiness:before {
  content: "\e966";
}
.icon-houses:before {
  content: "\e967";
}
.icon-o2:before {
  content: "\e968";
}
.icon-settlers:before {
  content: "\e969";
}
.icon-water:before {
  content: "\e96a";
}
.icon-emblem-8:before {
  content: "\e96b";
}
.icon-emblem-6:before {
  content: "\e96c";
}
.icon-shield-9:before {
  content: "\e943";
}
.icon-shield-12:before {
  content: "\e944";
}
.icon-emblem-11:before {
  content: "\e961";
}
.icon-emblem-12:before {
  content: "\e962";
}
.icon-random:before {
  content: "\e960";
}
.icon-cubic:before {
  content: "\e95a";
}
.icon-shield:before {
  content: "\e945";
}
.icon-ranking1:before {
  content: "\e95e";
}
.icon-rrhh:before {
  content: "\e95f";
}
.icon-badge:before {
  content: "\e959";
}
.icon-cross:before {
  content: "\e95d";
}
.icon-clock:before {
  content: "\e956";
}
.icon-satellite-dish:before {
  content: "\e948";
}
.icon-alien:before {
  content: "\e946";
}
.icon-shield-bg:before {
  content: "\e947";
}
.icon-coin:before {
  content: "\e949";
}
.icon-planet:before {
  content: "\e94a";
}
.icon-rocket:before {
  content: "\e94b";
}
.icon-satelite:before {
  content: "\e94c";
}
.icon-access-denied:before {
  content: "\e94e";
}
.icon-access-granted:before {
  content: "\e950";
}
.icon-objectives:before {
  content: "\e951";
}
.icon-empty:before {
  content: "\e952";
}
.icon-faqs:before {
  content: "\e953";
}
.icon-execute:before {
  content: "\e954";
}
.icon-faqs-read:before {
  content: "\e955";
}
.icon-print:before {
  content: "\e957";
}
.icon-alarm:before {
  content: "\e958";
}
.icon-battery:before {
  content: "\e95b";
}
.icon-demo:before {
  content: "\e95c";
}
.icon-dialogue-off:before {
  content: "\e999";
}
.icon-dialogue-on:before {
  content: "\e99a";
}
.icon-effects-off:before {
  content: "\e99b";
}
.icon-effects-on:before {
  content: "\e99c";
}
.icon-exit:before {
  content: "\e99d";
}
.icon-language:before {
  content: "\e99f";
}
.icon-mobile-landscape:before {
  content: "\e9a0";
}
.icon-pause:before {
  content: "\e9a1";
}
.icon-reading:before {
  content: "\e9a2";
}
.icon-rewind:before {
  content: "\e9a3";
}
.icon-signal:before {
  content: "\e9a4";
}
.icon-support:before {
  content: "\e9a5";
}
.icon-tutorial:before {
  content: "\e9a6";
}
.icon-wifi:before {
  content: "\e9a7";
}
.icon-arrow-left:before {
  content: "\e9a8";
}
.icon-arrow-right:before {
  content: "\e9a9";
}
.icon-back2:before {
  content: "\e9aa";
}
.icon-check:before {
  content: "\e9ab";
}
.icon-close:before {
  content: "\e9ac";
}
.icon-delegate:before {
  content: "\e9ad";
}
.icon-delete-keyboard:before {
  content: "\e9ae";
}
.icon-delete:before {
  content: "\e9af";
}
.icon-device:before {
  content: "\e9b0";
}
.icon-doing:before {
  content: "\e9b1";
}
.icon-download:before {
  content: "\e9b2";
}
.icon-enter:before {
  content: "\e9b3";
}
.icon-file-open:before {
  content: "\e9b4";
}
.icon-file:before {
  content: "\e9b5";
}
.icon-gallery:before {
  content: "\e9b6";
}
.icon-info-close:before {
  content: "\e9b7";
}
.icon-info:before {
  content: "\e9b8";
}
.icon-locked:before {
  content: "\e9b9";
}
.icon-mail:before {
  content: "\e9ba";
}
.icon-map:before {
  content: "\e9bb";
}
.icon-meeting:before {
  content: "\e9bc";
}
.icon-menu:before {
  content: "\e9bd";
}
.icon-play:before {
  content: "\e9be";
}
.icon-ranking:before {
  content: "\e9bf";
}
.icon-read-2:before {
  content: "\e9c0";
}
.icon-read:before {
  content: "\e9c1";
}
.icon-speak:before {
  content: "\e9c2";
}
.icon-view:before {
  content: "\e9c3";
}
.icon-work:before {
  content: "\e9c4";
}
.icon-hexagon:before {
  content: "\e9c5";
}
.icon-shield-1:before {
  content: "\e9c6";
}
.icon-shield-2:before {
  content: "\e9c7";
}
.icon-shield-3:before {
  content: "\e9c8";
}
.icon-shield-4:before {
  content: "\e9c9";
}
.icon-shield-5:before {
  content: "\e9ca";
}
.icon-shield-6:before {
  content: "\e9cb";
}
.icon-shield-7:before {
  content: "\e9cc";
}
.icon-shield-8:before {
  content: "\e9cd";
}
.icon-shield-10:before {
  content: "\e9ce";
}
.icon-shield-11:before {
  content: "\e9cf";
}
.icon-emblem-1:before {
  content: "\e9d0";
}
.icon-emblem-2:before {
  content: "\e9d1";
}
.icon-emblem-3:before {
  content: "\e9d2";
}
.icon-emblem-4:before {
  content: "\e9d3";
}
.icon-emblem-5:before {
  content: "\e9d4";
}
.icon-emblem-7:before {
  content: "\e9d5";
}
.icon-emblem-9:before {
  content: "\e9d6";
}
.icon-emblem-10:before {
  content: "\e9d7";
}
.icon-help:before {
  content: "?";
  font-family: "torqueweb-light";
}
.icon-information:before {
  content: "i";
  font-family: "torqueweb-book";
}
/**
 * Componentes
 **/
/*------------------------------------*\
    $TOOLS CHALLENGE
\*------------------------------------*/
/*
 * Esto contiene los estilos para los desafios del juego.
 */
.challenge {
  width: 100%;
  height: 100vh;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  font-family: "torqueweb-light";
}
.challenge--title {
  position: relative;
  color: #2ce7a8;
  text-align: center;
  text-transform: uppercase;
}
@media (min-width: 18em) {
  .challenge--title {
    font-size: 1.25rem;
    margin: 6px 0;
  }
}
@media (min-width: 60em) {
  .challenge--title {
    font-size: 2.5rem;
    margin: 24px 0;
  }
}
.challenge--title .bullet {
  position: relative;
}
@media (min-width: 18em) {
  .challenge--title .bullet {
    padding-right: 16px;
  }
}
@media (min-width: 60em) {
  .challenge--title .bullet {
    padding-right: 24px;
  }
}
.challenge--title .bullet:before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #2ce7a8;
  border-radius: 100%;
  position: absolute;
  top: calc(50% - 3px);
}
@media (min-width: 18em) {
  .challenge--title .bullet:before {
    right: 0px;
  }
}
@media (min-width: 60em) {
  .challenge--title .bullet:before {
    right: 2px;
  }
}
.challenge--content {
  display: -moz-flex;
  display: flex;
  background-color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 18em) {
  .challenge--content {
    width: 100%;
    min-height: 85vh;
    max-height: 85vh;
  }
}
@media (min-width: 60em) {
  .challenge--content {
    width: 75%;
    min-height: 75vh;
    max-height: 75vh;
  }
}
.challenge--subtitle {
  display: -moz-inline-flex;
  display: inline-flex;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .challenge--subtitle {
    font-size: 1.25rem;
    padding: 12px 12px 12px 24px;
  }
}
@media (min-width: 60em) {
  .challenge--subtitle {
    font-size: 1.75rem;
    padding: 24px 24px 24px 32px;
  }
}
@media (min-width: 18em) {
  .challenge--subtitle [class^=icon-], .challenge--subtitle [class*=" icon-"] {
    font-size: 1.75rem;
    padding: 0 12px 0 0;
  }
}
@media (min-width: 60em) {
  .challenge--subtitle [class^=icon-], .challenge--subtitle [class*=" icon-"] {
    font-size: 2.5rem;
    padding: 0 24px 0 0;
  }
}
.challenge--results {
  width: 70%;
  overflow-y: auto;
  margin-right: 24px;
}
@media (min-width: 18em) {
  .challenge--results {
    min-height: 80vh;
    max-height: 80vh;
  }
}
@media (min-width: 60em) {
  .challenge--results {
    min-height: 75vh;
    max-height: 75vh;
  }
}
@media (min-width: 18em) {
  .challenge--results .box--border {
    margin: 16px 32px 24px 16px;
  }
}
@media (min-width: 60em) {
  .challenge--results .box--border {
    margin: 16px 64px 48px;
  }
}
.challenge--list {
  width: 30%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  justify-content: center;
  border-left: 1px dashed #2ce7a8;
}
@media (min-width: 18em) {
  .challenge--list {
    padding: 16px;
  }
}
@media (min-width: 60em) {
  .challenge--list {
    padding: 32px;
  }
}
.challenge--list .box--border {
  color: #44505B;
  cursor: pointer;
  text-align: center;
  background: #44505B;
  background: linear-gradient(135deg, transparent 6px, #44505B 0) top left, linear-gradient(225deg, transparent 6px, #44505B 0) top right, linear-gradient(315deg, transparent 6px, #44505B 0) bottom right, linear-gradient(45deg, transparent 6px, #44505B 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
@media (min-width: 18em) {
  .challenge--list .box--border {
    font-size: 0.75rem;
    margin-bottom: 8px;
  }
}
@media (min-width: 60em) {
  .challenge--list .box--border {
    font-size: 1.25rem;
    margin-bottom: 16px;
  }
}
.challenge--list .box--border .box--border__canvas {
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 6px, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, transparent 6px, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 6px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, transparent 6px, rgb(255, 255, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
@media (min-width: 18em) {
  .challenge--list .box--border .box--border__canvas {
    padding: 8px;
  }
}
@media (min-width: 60em) {
  .challenge--list .box--border .box--border__canvas {
    padding: 16px;
  }
}
.challenge--list .box--border .box--border__canvas span {
  display: block;
  padding: 2px 0;
}
.challenge--info {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  text-align: center;
}
.challenge--info:first-child {
  border-bottom: 1px dotted #44505B;
}
.challenge--info__item {
  width: 100%;
}
@media (min-width: 18em) {
  .challenge--info__item {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .challenge--info__item {
    font-size: 1.75rem;
  }
}
.challenge--info__item:first-child {
  width: 40px;
  border-right: 1px dotted #44505B;
  padding: 16px 12px;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  letter-spacing: 0;
}
@media (min-width: 18em) {
  .challenge--info__item:first-child {
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .challenge--info__item:first-child {
    font-size: 1rem;
  }
}
.challenge--info__item.failed {
  color: #D52125;
}
.challenge--info__item.success {
  color: #2ce7a8;
}
.challenge--info__item .time {
  font-size: 0.75rem;
  padding-bottom: 6px;
}
@media (min-width: 18em) {
  .challenge--info__item .value {
    font-size: 1.75rem;
  }
}
@media (min-width: 60em) {
  .challenge--info__item .value {
    font-size: 3.5rem;
  }
}
@media (min-width: 18em) {
  .challenge--info__item .result {
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .challenge--info__item .result {
    font-size: 1.25rem;
  }
}
.challenge--box__title {
  color: #2ce7a8;
  font-family: "torqueweb-bold";
  text-transform: uppercase;
  text-align: center;
  padding: 1px;
  background: #2ce7a8;
  background: linear-gradient(135deg, transparent 6px, #2ce7a8 0) top left, linear-gradient(225deg, #2ce7a8 6px, #2ce7a8 0) top right, linear-gradient(315deg, transparent 6px, #2ce7a8 0) bottom right, linear-gradient(45deg, #2ce7a8 6px, #2ce7a8 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
@media (min-width: 18em) {
  .challenge--box__title {
    font-size: 1.25rem;
    margin-bottom: 8px;
  }
}
@media (min-width: 60em) {
  .challenge--box__title {
    font-size: 2.5rem;
    margin-bottom: 16px;
  }
}
.challenge--box__title .challenge--box__title--canvas {
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 6px, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, rgb(255, 255, 255) 6px, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 6px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, rgb(255, 255, 255) 6px, rgb(255, 255, 255) 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
@media (min-width: 18em) {
  .challenge--box__title .challenge--box__title--canvas {
    padding: 12px;
  }
}
@media (min-width: 60em) {
  .challenge--box__title .challenge--box__title--canvas {
    padding: 24px;
  }
}
.challenge--button__icon {
  position: relative;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  border: 1px solid #2ce7a8;
  border-radius: 4px;
  text-transform: uppercase;
  text-align: center;
  color: #2ce7a8;
  cursor: pointer;
  padding: 12px;
}
@media (min-width: 18em) {
  .challenge--button__icon {
    max-width: 100%;
    margin: 0 auto;
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .challenge--button__icon {
    max-width: 85%;
    margin: 32px auto 0;
    font-size: 1rem;
  }
}
.challenge--button__icon [class^=icon-], .challenge--button__icon [class*=" icon-"] {
  padding-right: 24px;
}
.challenge--button__icon [class^=icon-]:after, .challenge--button__icon [class*=" icon-"]:after {
  content: "";
  border-right: 1px dashed #2ce7a8;
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 38px;
  transform: rotate(10deg);
}
/*------------------------------------*\
    $SIGNALS
\*------------------------------------*/
/*
* Esto contiene los estilos para las signals.
*/
.signals--list {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
}
@media (min-width: 18em) {
  .signals--list {
    margin-top: 0;
    margin-bottom: 6px;
  }
}
@media (min-width: 60em) {
  .signals--list {
    margin-top: 0;
    margin-bottom: 12px;
  }
}
.signals--list__item {
  position: relative;
  width: 100%;
  text-align: center;
  cursor: pointer;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  transform-style: preserve-3d;
  perspective: 1000px;
}
@media (min-width: 18em) {
  .signals--list__item {
    min-height: 200px;
    max-height: 200px;
    font-size: 1rem;
    margin-left: 12px;
  }
}
@media (min-width: 60em) {
  .signals--list__item {
    min-height: 350px;
    max-height: 350px;
    font-size: 1.75rem;
  }
}
@media (min-width: 60em) and (max-height: 45em) {
  .signals--list__item {
    min-height: 300px;
    max-height: 300px;
    font-size: 1.5rem;
  }
}
.signals--list__item.show--info {
  transform: rotateY(180deg);
}
.signals--list__item:first-child {
  margin-left: 0;
}
.signals--list__item.disabled .signal--back,
.signals--list__item.disabled .signal--front {
  cursor: default;
}
.signals--list__item .btn--shape [class^=icon-],
.signals--list__item .btn--shape [class*=icon-] {
  padding: 0;
}
.signals--list__item .btn--shape__canvas {
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .signals--list__item .btn--shape__canvas {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .signals--list__item .btn--shape__canvas {
    font-size: 1.5rem;
  }
}
@media (min-width: 18em) {
  .signals--list__item .btn--orange [class^=icon-]:first-child:after,
  .signals--list__item .btn--orange [class*=icon-]:first-child:after {
    left: 30px;
  }
}
@media (min-width: 60em) {
  .signals--list__item .btn--orange [class^=icon-]:first-child:after,
  .signals--list__item .btn--orange [class*=icon-]:first-child:after {
    left: 38px;
  }
}
.signal--back,
.signal--front {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid #CBCBCB;
  border-radius: 3px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
@media (min-width: 18em) {
  .signal--back,
  .signal--front {
    padding: 12px;
  }
}
@media (min-width: 60em) {
  .signal--back,
  .signal--front {
    padding: 32px 24px;
  }
}
.signal--front {
  z-index: 1;
  transform: rotateY(0deg);
}
.signal--front .icon-answer,
.signal--front .icon-debate,
.signal--front .icon-question {
  color: #828282;
}
@media (min-width: 18em) {
  .signal--front .icon-answer,
  .signal--front .icon-debate,
  .signal--front .icon-question {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .signal--front .icon-answer,
  .signal--front .icon-debate,
  .signal--front .icon-question {
    font-size: 3.5rem;
  }
}
@media (min-width: 60em) and (max-height: 45em) {
  .signal--front .icon-answer,
  .signal--front .icon-debate,
  .signal--front .icon-question {
    font-size: 2.5rem;
  }
}
.signal--back {
  z-index: 0;
  transform: rotateY(180deg);
}
@media (min-width: 18em) {
  .signal--back .signal--type {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}
@media (min-width: 60em) {
  .signal--back .signal--type {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}
@keyframes signal-wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  25% {
    transform: translateX(0%) translateZ(0) scaleY(0.6);
  }
  50% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  75% {
    transform: translateX(0%) translateZ(0) scaleY(0.6);
  }
  75% {
    transform: translateX(0) translateZ(0) scaleY(0.6);
  }
}
.signals--waves {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.signal-1 {
  position: relative;
  width: 100%;
  height: 120px;
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/wave-1.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% auto;
  animation: signal-wave 10s linear infinite;
  position: absolute;
  left: 0;
  top: 50%;
}
.signal-1:before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: rgb(196.2145748988, 200.2226720648, 203.7854251012);
  position: absolute;
  left: 0;
  top: 50%;
}
.signal--name:hover {
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
  text-shadow: 6px 6px 32px rgb(255, 255, 255);
}
.signal--title {
  position: relative;
  z-index: 1;
  font-family: "torqueweb-medium";
  text-transform: uppercase;
  color: #F17824;
}
@media (min-width: 18em) {
  .signal--title {
    font-size: 1.25rem;
    padding-top: 36px;
  }
}
@media (min-width: 60em) {
  .signal--title {
    font-size: 2.5rem;
    padding-top: 6px;
  }
}
.signal--title .signal--subtitle {
  font-family: "torqueweb-light";
  text-transform: none;
  display: block;
  color: #44505B;
}
@media (min-width: 18em) {
  .signal--title .signal--subtitle {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .signal--title .signal--subtitle {
    font-size: 1.25rem;
    margin-top: 10px;
  }
}
.signal--get {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  font-family: "torqueweb-book";
  text-transform: uppercase;
  color: #CBCBCB;
}
@media (min-width: 18em) {
  .signal--get {
    font-size: 1rem;
    padding: 12px 0;
  }
}
@media (min-width: 60em) {
  .signal--get {
    font-size: 1.25rem;
    padding: 12px 0;
  }
}
.signal--get:before {
  content: "";
  width: 45%;
  height: 1px;
  background-color: #CBCBCB;
  position: absolute;
  left: 0;
  top: 50%;
}
.signal--get:after {
  content: "";
  width: 45%;
  height: 1px;
  background-color: #CBCBCB;
  position: absolute;
  right: 0;
  top: 50%;
}
.signal--num {
  min-width: 50px;
  position: relative;
  padding: 6px;
  background-color: rgb(255, 255, 255);
  border: 1px solid #CBCBCB;
}
.signal--num:before {
  content: "";
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-top: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 6px solid rgb(255, 255, 255);
  position: absolute;
  top: -12px;
  left: calc(50% - 6px);
  z-index: 1;
}
.signal--num:after {
  content: "";
  width: 0;
  height: 0;
  border-right: 8px solid transparent;
  border-top: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 8px solid #CBCBCB;
  position: absolute;
  top: -16px;
  left: calc(50% - 8px);
  z-index: 0;
}
.signal--topic {
  position: relative;
  color: #44505B;
  font-family: "torqueweb-book";
  padding-bottom: 6px;
}
@media (min-width: 18em) {
  .signal--topic {
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .signal--topic {
    font-size: 1rem;
  }
}
.signal--topic b {
  font-weight: bold;
}
/*------------------------------------*\
    $SHIELDS
\*------------------------------------*/
/*
* Esto contiene los estilos para los escudos de mars.
*/
.shield {
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.shield--item {
  position: relative;
  width: 50px;
  height: 50px;
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/shield.png");
  background-repeat: no-repeat;
  background-size: 50px 50px;
  z-index: 1;
}
.shield--icon {
  font-size: 1.25rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 45%;
  z-index: 1;
}
.shield--background {
  font-size: 2.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.shield--name {
  color: rgb(255, 255, 255);
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
}
.shield--position {
  position: absolute;
  top: 6px;
}
@media (min-width: 18em) {
  .shield--position {
    left: 24px;
  }
}
@media (min-width: 60em) {
  .shield--position {
    left: 32px;
  }
}
/*Clases generadas con los valores de shiled-colors definidos en scss/game/lib/settings.scss*/
.shield--black {
  color: #383838;
}
.shield--white {
  color: #FFFFFF;
}
.shield--orange {
  color: #F17824;
}
.shield--green {
  color: #6aa84f;
}
.shield--violet {
  color: #7c6db4;
}
.shield--lightviolet {
  color: #b867a1;
}
.shield--lightgreen {
  color: #2ce7a8;
}
.shield--yellow {
  color: #fff507;
}
.shield--darkyellow {
  color: #d7bb29;
}
.shield--lightgrey {
  color: #e8e8e8;
}
.shield--grey {
  color: #606060;
}
.shield--lightblue {
  color: #3c92ca;
}
.shield--red {
  color: #e83d25;
}
.shield--blue {
  color: #4b5b76;
}
.settings {
  width: 100%;
  height: 100vh;
  display: -moz-flex;
  display: flex;
  font-family: "torqueweb-light";
}
@media (min-width: 18em) {
  .settings {
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .settings {
    padding: 12px;
  }
}
.settings--title {
  position: relative;
  margin: 0 auto;
}
.settings--title__name {
  color: #44505B;
  font-family: "torqueweb-book";
  text-transform: capitalize;
}
@media (min-width: 18em) {
  .settings--title__name {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .settings--title__name {
    font-size: 1.75rem;
    padding-bottom: 6px;
  }
}
.settings--content {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-flex-direction: column;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4.5px;
}
.settings--subtitle {
  display: -moz-inline-flex;
  display: inline-flex;
  -moz-align-items: center;
  align-items: center;
  color: #737C84;
}
@media (min-width: 18em) {
  .settings--subtitle {
    font-size: 1.25rem;
    padding: 12px;
  }
}
@media (min-width: 60em) {
  .settings--subtitle {
    font-size: 1.75rem;
    padding: 24px 24px 24px 32px;
  }
}
@media (min-width: 18em) {
  .settings--subtitle [class^=icon-],
  .settings--subtitle [class*=" icon-"] {
    font-size: 1.75rem;
    padding: 0 12px 0 0;
  }
}
@media (min-width: 60em) {
  .settings--subtitle [class^=icon-],
  .settings--subtitle [class*=" icon-"] {
    font-size: 2.5rem;
    padding: 0 24px 0 0;
  }
}
.settings--customization {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .settings--customization {
    padding: 12px;
  }
}
@media (min-width: 60em) {
  .settings--customization {
    padding: 0 32px;
  }
}
.settings--customization__shield {
  width: 30%;
  min-height: 50vh;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
}
.settings--customization__shield .shield {
  position: relative;
}
@media (min-width: 18em) {
  .settings--customization__shield .shield {
    width: 150px;
    height: 150px;
  }
}
@media (min-width: 60em) {
  .settings--customization__shield .shield {
    width: 300px;
    height: 300px;
  }
}
.settings--customization__shield .shield--item {
  position: relative;
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/shield.png");
  background-repeat: no-repeat;
  background-position: left top;
  z-index: 1;
}
@media (min-width: 18em) {
  .settings--customization__shield .shield--item {
    width: 150px;
    height: 150px;
    background-size: 150px 150px;
  }
}
@media (min-width: 60em) {
  .settings--customization__shield .shield--item {
    width: 300px;
    height: 300px;
    background-size: 300px 300px;
  }
}
.settings--customization__shield .shield--icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 45%;
  z-index: 1;
  text-shadow: 0 4px rgba(0, 0, 0, 0.4);
}
@media (min-width: 18em) {
  .settings--customization__shield .shield--icon {
    font-size: 3.5rem;
  }
}
@media (min-width: 60em) {
  .settings--customization__shield .shield--icon {
    font-size: 7rem;
  }
}
.settings--customization__shield .shield--background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (min-width: 18em) {
  .settings--customization__shield .shield--background {
    font-size: 7.665rem;
  }
}
@media (min-width: 60em) {
  .settings--customization__shield .shield--background {
    margin-top: 11px;
    font-size: 17.15rem;
  }
}
.settings--customization__shield .shield--canvas__texture {
  background-color: none;
  padding: 0;
  position: static;
}
.settings--customization__flag {
  width: 30%;
  min-height: 50vh;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
}
.settings--federations {
  width: 100%;
  overflow: auto;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  flex-wrap: wrap;
}
@media (min-width: 18em) {
  .settings--federations {
    max-height: 70vh;
    padding: 3%;
    margin-bottom: 12px;
  }
}
@media (min-width: 60em) {
  .settings--federations {
    max-height: 75vh;
    padding: 5%;
    margin-bottom: 32px;
  }
}
.settings--federations__item {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  padding: 8px;
  margin-bottom: 12px;
  cursor: pointer;
}
@media (min-width: 18em) {
  .settings--federations__item {
    width: 32%;
  }
}
@media (min-width: 60em) {
  .settings--federations__item {
    width: 23%;
  }
}
.settings--federations__item.settings--federations__selected, .settings--federations__item:hover {
  border: 1px solid #F17824;
  border-radius: 6px;
}
.settings--federations__name {
  color: #737C84;
  font-family: "torqueweb-book";
  text-transform: uppercase;
  padding-top: 6px;
}
@media (min-width: 18em) {
  .settings--federations__name {
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .settings--federations__name {
    font-size: 1rem;
  }
}
.settings--federations__message {
  width: 90%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  margin: 6px auto 0;
  border-radius: 18px;
  background-color: #f0eeef;
  color: #44505B;
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .settings--federations__message {
    padding: 6px;
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .settings--federations__message {
    padding: 12px;
    font-size: 1.25rem;
  }
}
.settings--federations__message [class^=icon-],
.settings--federations__message [class*=" icon-"] {
  padding-right: 12px;
}
@media (min-width: 18em) {
  .settings--federations__message [class^=icon-],
  .settings--federations__message [class*=" icon-"] {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .settings--federations__message [class^=icon-],
  .settings--federations__message [class*=" icon-"] {
    font-size: 1.5rem;
  }
}
.settings--federation__members {
  width: 70%;
  color: #737C84;
  overflow: auto;
  max-height: 60vh;
}
@media (min-width: 18em) {
  .settings--federation__members {
    padding: 12px;
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .settings--federation__members {
    padding: 0 0 0 48px;
    font-size: 1.75rem;
  }
}
.settings--federation__members .title {
  padding-bottom: 12px;
}
.settings--federation__items {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  flex-wrap: wrap;
}
.settings--federation__items li {
  position: relative;
  width: 50%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .settings--federation__items li {
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .settings--federation__items li {
    padding: 12px;
  }
}
.settings--federation__items li.active {
  background-color: #fbfbfb;
  border: 1px solid #F17824;
  border-radius: 3px;
}
.settings--federation__items li .shield--canvas__texture {
  background: none;
  position: static;
}
.settings--federation__items .settings--member__info {
  font-family: "torqueweb-book";
  font-size: 1.25rem;
  line-height: 1.25rem;
  color: #737C84;
}
@media (min-width: 18em) {
  .settings--federation__items .settings--member__info {
    font-size: 0.75rem;
    line-height: 0.75rem;
  }
}
@media (min-width: 60em) {
  .settings--federation__items .settings--member__info {
    font-size: 1.25rem;
    line-height: 1.25rem;
  }
}
.settings--federation__items .settings--member__info div:first-child {
  color: #44505B;
  font-family: "torqueweb-medium";
  text-transform: uppercase;
}
@media (min-width: 18em) {
  .settings--federation__items .settings--member__info div:first-child {
    font-size: 1rem;
    line-height: 1rem;
  }
}
@media (min-width: 60em) {
  .settings--federation__items .settings--member__info div:first-child {
    font-size: 1.25rem;
    line-height: 1.25rem;
  }
}
.settings--federation__name {
  font-family: "torqueweb-book";
  color: #737C84;
}
@media (min-width: 18em) {
  .settings--federation__name {
    font-size: 1rem;
    padding-top: 12px;
  }
}
@media (min-width: 60em) {
  .settings--federation__name {
    font-size: 1.5rem;
    padding-top: 24px;
  }
}
.settings--customization__options {
  width: 70%;
  color: #737C84;
}
@media (min-width: 18em) {
  .settings--customization__options {
    padding: 12px;
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .settings--customization__options {
    padding: 0 0 0 48px;
    font-size: 1.75rem;
  }
}
.settings--block {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: flex-start;
  align-items: flex-start;
}
@media (min-width: 18em) {
  .settings--block:first-child {
    width: 100%;
  }
}
@media (min-width: 60em) {
  .settings--block:first-child {
    width: 89%;
  }
}
@media (min-width: 100em) {
  .settings--block:first-child {
    width: 64%;
  }
}
.settings--selector {
  width: 100%;
}
@media (min-width: 18em) {
  .settings--selector {
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .settings--selector {
    padding: 24px;
  }
}
.settings--selector.active {
  background-color: rgb(255, 255, 255);
  border: 1px solid #737C84;
  border-radius: 10px;
}
.settings--selector.picker {
  padding: 0;
  background-color: transparent;
  border: none;
}
@media (min-width: 18em) {
  .settings--selector.picker {
    padding-top: 8px;
  }
}
@media (min-width: 60em) {
  .settings--selector.picker {
    padding-top: 32px;
  }
}
.settings--selector.picker [class^=icon-],
.settings--selector.picker [class*=" icon-"] {
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .settings--selector.picker [class^=icon-],
  .settings--selector.picker [class*=" icon-"] {
    font-size: 1.25rem;
    padding-right: 6px;
    padding-bottom: 0;
  }
}
@media (min-width: 60em) {
  .settings--selector.picker [class^=icon-],
  .settings--selector.picker [class*=" icon-"] {
    font-size: 3.5rem;
    padding-right: 16px;
  }
}
.settings--selector.picker [class^=icon-]:hover,
.settings--selector.picker [class*=" icon-"]:hover {
  transform: scale(1.2);
}
@media (min-width: 18em) {
  .settings--name {
    padding-bottom: 12px;
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .settings--name {
    padding-bottom: 24px;
    font-size: 1.5rem;
  }
}
.settings--items {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  flex-wrap: wrap;
}
.settings--items [class^=icon-],
.settings--items [class*=" icon-"] {
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .settings--items [class^=icon-],
  .settings--items [class*=" icon-"] {
    font-size: 1.25rem;
    padding-right: 12px;
    padding-bottom: 6px;
  }
}
@media (min-width: 60em) {
  .settings--items [class^=icon-],
  .settings--items [class*=" icon-"] {
    font-size: 2.5rem;
    padding-right: 16px;
    padding-bottom: 12px;
  }
}
.settings--items [class^=icon-]:hover,
.settings--items [class*=" icon-"]:hover {
  transform: scale(1.2);
}
.settings--items .shield--white {
  text-shadow: 0 0 1px #44505B;
}
.settings--buttons {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .settings--buttons {
    padding: 0 0 12px;
  }
}
@media (min-width: 60em) {
  .settings--buttons {
    padding: 0 0 64px;
  }
}
.shield--canvas__texture {
  position: absolute;
  z-index: 3;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 0 0 50% 50%;
}
@media (min-width: 18em) {
  .shield--canvas__texture {
    left: 24px;
    top: 0;
    padding: 3px;
  }
}
@media (min-width: 60em) {
  .shield--canvas__texture {
    left: 32px;
    top: 0;
    padding: 8px;
  }
}
.shield--canvas__texture .shield--name {
  display: none;
}
/*------------------------------------*\
    $MARKERS
\*------------------------------------*/
/*
* Esto contiene los estilos para los marcadores del juego.
*/
.markers--layer {
  display: -moz-flex;
  display: flex;
  -moz-align-items: flex-start;
  align-items: flex-start;
}
.markers {
  position: relative;
  top: -7px;
  background: rgb(0, 0, 0);
  background: linear-gradient(135deg, rgb(0, 0, 0) 6px, rgb(0, 0, 0) 0) top left, linear-gradient(225deg, rgb(0, 0, 0) 6px, rgb(0, 0, 0) 0) top right, linear-gradient(315deg, transparent 6px, rgb(0, 0, 0) 0) bottom right, linear-gradient(45deg, transparent 6px, rgb(0, 0, 0) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 1px;
  text-align: center;
}
.markers:nth-child(1) {
  padding-right: 0;
}
.markers:nth-child(2) {
  padding-right: 0;
  padding-left: 0;
}
.markers:nth-child(2) .markers--table {
  position: relative;
}
.markers:nth-child(2) .markers--table:before {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 0;
  left: -1px;
}
.markers:nth-child(2) .markers--table:after {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 0;
  right: 0;
}
.markers:nth-child(3) {
  padding-right: 0;
  padding-left: 0;
}
.markers:nth-child(3) .markers--table {
  position: relative;
}
.markers:nth-child(3) .markers--table:before {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 0;
  left: -1px;
}
.markers:nth-child(3) .markers--table:after {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 0;
  right: 0;
}
.markers:nth-child(4) {
  padding-left: 0;
}
.markers--footer .markers {
  top: 8px;
  background: rgb(0, 0, 0);
  background: linear-gradient(135deg, transparent 6px, rgb(0, 0, 0) 0) top left, linear-gradient(225deg, transparent 6px, rgb(0, 0, 0) 0) top right, linear-gradient(315deg, rgb(0, 0, 0) 6px, rgb(0, 0, 0) 0) bottom right, linear-gradient(45deg, rgb(0, 0, 0) 6px, rgb(0, 0, 0) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 1px;
}
.markers--footer .markers:nth-child(1) {
  padding-right: 0;
}
.markers--footer .markers:nth-child(2) {
  padding-right: 0;
  padding-left: 0;
}
.markers--footer .markers:nth-child(2) .markers--table {
  position: relative;
}
.markers--footer .markers:nth-child(2) .markers--table:before {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 7px;
  left: -1px;
}
.markers--footer .markers:nth-child(2) .markers--table:after {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 7px;
  right: 0;
}
.markers--footer .markers:nth-child(3) {
  padding-right: 0;
  padding-left: 0;
}
.markers--footer .markers:nth-child(3) .markers--table {
  position: relative;
}
.markers--footer .markers:nth-child(3) .markers--table:before {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 7px;
  left: -1px;
}
.markers--footer .markers:nth-child(3) .markers--table:after {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 7px;
  right: 0;
}
.markers--footer .markers:nth-child(4) {
  padding-left: 0;
}
.markers--footer .markers--canvas {
  background: #f0eeef;
  background: linear-gradient(135deg, transparent 6px, #f0eeef 0) top left, linear-gradient(225deg, transparent 6px, #f0eeef 0) top right, linear-gradient(315deg, #f0eeef 6px, #f0eeef 0) bottom right, linear-gradient(45deg, #f0eeef 6px, #f0eeef 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.markers--canvas {
  display: -moz-flex;
  display: flex;
  background: #f0eeef;
  background: linear-gradient(135deg, #f0eeef 6px, #f0eeef 0) top left, linear-gradient(225deg, #f0eeef 6px, #f0eeef 0) top right, linear-gradient(315deg, transparent 6px, #f0eeef 0) bottom right, linear-gradient(45deg, transparent 6px, #f0eeef 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.markers--table {
  display: table;
  border-right: 1px solid #DAD5D7;
}
.markers--table:last-child {
  border: none;
}
.markers--table__row {
  display: table-row;
}
.markers--table__row:first-child .markers--table__row--item {
  border-bottom: 1px solid #DAD5D7;
}
.markers--table__row--item {
  display: table-cell;
  text-align: center;
}
@media (min-width: 18em) {
  .markers--table__row--item {
    font-size: 9px;
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .markers--table__row--item {
    font-size: 1rem;
    padding: 6px 16px;
  }
}
@media (min-width: 18em) {
  .markers--table__row--item [class^=icon-],
  .markers--table__row--item [class*=icon-] {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .markers--table__row--item [class^=icon-],
  .markers--table__row--item [class*=icon-] {
    font-size: 1.75rem;
  }
}
/*------------------------------------*\
    $MINA
\*------------------------------------*/
/*
* Esto contiene los estilos para la mina de mars.
*/
.mina {
  width: 100%;
  height: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  font-family: "torqueweb-light";
  color: #44505B;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
}
@media (min-width: 18em) {
  .mina {
    position: fixed;
  }
}
@media (min-width: 60em) {
  .mina {
    position: absolute;
  }
}
.mina.historial {
  -moz-justify-content: flex-end;
  justify-content: flex-end;
}
@media (min-width: 18em) {
  .mina.fase-2 .markers--layer {
    display: none;
  }
}
@media (min-width: 60em) {
  .mina.fase-2 .markers--layer {
    display: -moz-flex;
    display: flex;
  }
}
@media (min-width: 18em) {
  .mina.fase-2 .mina--buttons.disabled {
    opacity: 0.5;
  }
}
@media (min-width: 60em) {
  .mina.fase-2 .mina--buttons.disabled {
    opacity: 1;
  }
}
.mina--layer {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-flex-grow: 1;
  flex-grow: 1;
}
.mina--layer:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.75);
}
@media (min-width: 18em) {
  .mina--layer {
    max-width: 100%;
    padding: 2%;
  }
}
@media (min-width: 60em) {
  .mina--layer {
    max-width: 98%;
    padding: 2% 5%;
    margin-top: 120px;
    margin-bottom: 12px;
  }
}
@media (min-width: 100em) {
  .mina--layer {
    margin-bottom: 24px;
  }
}
@media (min-width: 60em) and (max-height: 45em) {
  .mina--layer {
    margin-top: 100px;
  }
}
.mina--layer.vertical--center {
  -moz-justify-content: center;
  justify-content: center;
}
.mina--layer.vertical--top {
  -moz-justify-content: flex-start;
  justify-content: flex-start;
}
@media (min-width: 18em) {
  .mina--layer.questions {
    -moz-justify-content: flex-start;
    justify-content: flex-start;
  }
}
@media (min-width: 60em) {
  .mina--layer.questions {
    -moz-justify-content: space-between;
    justify-content: space-between;
  }
}
.mina--message, .mina--question {
  width: 100%;
  position: relative;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  flex-wrap: wrap;
  color: #44505B;
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .mina--message, .mina--question {
    font-size: 1.25rem;
    padding-bottom: 12px;
    padding-top: 48px;
  }
}
@media (min-width: 60em) {
  .mina--message, .mina--question {
    font-size: 2rem;
    padding-bottom: 24px;
  }
}
.mina--message .value, .mina--question .value {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  color: #891593;
}
.mina--message .value span:first-child, .mina--question .value span:first-child {
  padding-right: 3px;
}
.mina--message .amount, .mina--question .amount {
  width: auto;
  display: -moz-flex;
  display: flex;
  position: absolute;
  right: 0;
  color: #891593;
}
@media (min-width: 18em) {
  .mina--message .amount, .mina--question .amount {
    top: 50%;
    font-size: 1.5rem;
  }
}
@media (min-width: 60em) {
  .mina--message .amount, .mina--question .amount {
    font-size: 1.75rem;
  }
}
.mina--message div, .mina--question div {
  max-width: 85%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: flex-start;
  align-items: flex-start;
}
.mina--message.active, .active.mina--question {
  color: #F17824;
}
.mina--type__questions {
  position: absolute;
  left: 5%;
  bottom: 7%;
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .mina--type__questions {
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .mina--type__questions {
    font-size: 1.25rem;
  }
}
.mina--type__questions .certified {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  color: #6aa84f;
}
.mina--type__questions .penalized {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  color: #D52125;
}
.mina--type__questions span {
  padding-right: 6px;
}
.mina--subtitle {
  position: relative;
  color: #F17824;
  font-family: "torqueweb-medium";
}
@media (min-width: 18em) {
  .mina--subtitle {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mina--subtitle {
    font-size: 1.25rem;
  }
}
.mina--question {
  position: relative;
  max-width: 100%;
}
@media (min-width: 18em) {
  .mina--question {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .mina--question {
    font-size: 1.5rem;
  }
}
.mina--response {
  position: relative;
  width: 100%;
  margin: 8px 0 0;
  background-color: rgba(255, 255, 255, 0.5);
  border: transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .mina--response {
    font-size: 1rem;
    padding: 8px;
    margin: 8px 0 0;
  }
}
@media (min-width: 60em) {
  .mina--response {
    font-size: 1.75rem;
    padding: 32px;
    margin: 0;
  }
}
@media (min-width: 60em) and (max-height: 45em) {
  .mina--response {
    padding: 24px;
  }
}
.mina--response.success {
  background-color: #6aa84f;
  color: rgb(255, 255, 255);
  border-color: transparent;
  font-family: "torqueweb-book";
}
.mina--response.failed {
  background-color: #D52125;
  color: rgb(255, 255, 255);
  border-color: transparent;
  font-family: "torqueweb-book";
}
.mina--response.review--success {
  background-color: #6aa84f;
  border-color: transparent;
  color: rgb(255, 255, 255);
}
.mina--response.review--failed {
  background-color: #D52125;
  border-color: transparent;
  color: rgb(255, 255, 255);
}
.mina--response:active {
  border: 1px solid transparent;
  box-shadow: 0 0 6px #737C84;
  opacity: 0.8;
}
@media (min-width: 18em) {
  .mina--response.small {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mina--response.small {
    font-size: 1.25rem;
  }
}
@media (min-width: 18em) {
  .mina--response.medium {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mina--response.medium {
    font-size: 1.5rem;
  }
}
.mina--questions {
  width: 100%;
}
.mina--buttons {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .mina--buttons {
    margin-top: 12px;
  }
}
@media (min-width: 60em) {
  .mina--buttons {
    margin-top: 24px;
  }
}
@media (min-width: 60em) {
  .mina--buttons.paginator {
    display: -moz-flex;
    display: flex;
  }
}
.mina--buttons.paginator [class^=icon-],
.mina--buttons.paginator [class*=" icon-"] {
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0;
}
.mina--buttons.paginator .btn--shape__canvas {
  padding: 8px;
}
.mina--button__form {
  position: relative;
  border: 1px dotted #44505B;
  background-color: rgb(255, 255, 255);
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .mina--button__form {
    padding: 8px 16px;
    margin: 0 6px;
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .mina--button__form {
    padding: 16px 32px;
    margin: 6px;
    font-size: 1rem;
  }
}
.mina--button__form:hover {
  color: inherit;
  text-shadow: 0 0 3px rgb(255, 255, 255);
  opacity: 0.8;
}
.mina--button__form.success {
  color: rgb(255, 255, 255);
  background-color: #6aa84f;
}
.mina--button__form.failed {
  color: rgb(255, 255, 255);
  background-color: #D52125;
}
.mina--button__form.selected {
  color: #F17824;
  border-color: #F17824;
}
.mina--button__form.normal {
  min-width: 130px;
  color: #F17824;
  border-color: #F17824;
  border-style: solid;
  font-weight: bold;
}
.mina--textarea {
  position: relative;
  width: 100%;
  background: transparent;
  border: 1px solid #737C84;
  border-radius: 1px;
  color: #44505B;
  font-family: "torqueweb-light";
  outline: 0;
}
@media (min-width: 18em) {
  .mina--textarea {
    height: 20vh;
    font-size: 1rem;
    margin-top: 16px;
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .mina--textarea {
    height: 25vh;
    font-size: 1.25rem;
    margin-top: 32px;
    padding: 12px;
  }
}
.mina--textarea.failed {
  border-color: #D52125;
}
.mina--satelite {
  position: relative;
  background: #44505B;
  background: linear-gradient(135deg, transparent 3px, #44505B 0) top left, linear-gradient(225deg, transparent 3px, #44505B 0) top right, linear-gradient(315deg, transparent 3px, #44505B 0) bottom right, linear-gradient(45deg, transparent 3px, #44505B 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 1px;
}
.mina--satelite__button {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 3px, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, transparent 3px, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 3px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, transparent 3px, rgb(255, 255, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  cursor: pointer;
  line-height: 0;
}
@media (min-width: 18em) {
  .mina--satelite__button {
    width: 30px;
    height: 30px;
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .mina--satelite__button {
    width: 45px;
    height: 45px;
    font-size: 1.5rem;
  }
}
.mina--block {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  position: relative;
  width: 100%;
  background: transparent;
  border: 1px solid #737C84;
  border-radius: 1px;
  color: #44505B;
}
@media (min-width: 18em) {
  .mina--block {
    margin-top: 6px;
    padding: 6px;
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mina--block {
    margin-top: 16px;
    padding: 16px;
    font-size: 1.25rem;
  }
}
.mina--block.success {
  box-shadow: 0 0 6px #2ce7a8;
  border-color: transparent;
}
.mina--block.failed {
  box-shadow: 0 0 6px #D52125;
  border-color: transparent;
}
.mina--block.active {
  background-color: rgba(255, 255, 255, 0.4);
}
.mina--block .checkbox,
.mina--block .radiobutton {
  margin: 0;
}
.mina--block .mina--textarea {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  max-height: 9vh;
}
.mina--block input[type=checkbox] + label:before,
.mina--block input[type=radio] + label:before {
  top: -2px;
}
.mina--block input[type=checkbox]:checked + label:before,
.mina--block input[type=radio]:checked + label:before {
  color: #F17824;
}
.mina--block input[type=text] {
  width: 95%;
  background: transparent;
  border: none;
  color: #44505B;
  font-family: "torqueweb-light";
  outline: 0;
}
@media (min-width: 18em) {
  .mina--block input[type=text] {
    font-size: 1rem;
    height: 20px;
  }
}
@media (min-width: 60em) {
  .mina--block input[type=text] {
    font-size: 1.25rem;
    height: 25px;
  }
}
.mina--block input::-webkit-input-placeholder,
.mina--block textarea::-webkit-input-placeholder {
  color: #44505B;
}
@media (min-width: 18em) {
  .mina--block input::-webkit-input-placeholder,
  .mina--block textarea::-webkit-input-placeholder {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mina--block input::-webkit-input-placeholder,
  .mina--block textarea::-webkit-input-placeholder {
    font-size: 1.25rem;
  }
}
.mina--block input:-moz-placeholder,
.mina--block textarea::-webkit-input-placeholder {
  color: #44505B;
}
@media (min-width: 18em) {
  .mina--block input:-moz-placeholder,
  .mina--block textarea::-webkit-input-placeholder {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mina--block input:-moz-placeholder,
  .mina--block textarea::-webkit-input-placeholder {
    font-size: 1.25rem;
  }
}
.mina--block input:-ms-input-placeholder,
.mina--block textarea::-webkit-input-placeholder {
  color: #44505B;
}
@media (min-width: 18em) {
  .mina--block input:-ms-input-placeholder,
  .mina--block textarea::-webkit-input-placeholder {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mina--block input:-ms-input-placeholder,
  .mina--block textarea::-webkit-input-placeholder {
    font-size: 1.25rem;
  }
}
.mina--upload {
  position: absolute;
  cursor: pointer;
}
@media (min-width: 18em) {
  .mina--upload {
    font-size: 0.625rem;
    right: 3px;
    top: 3px;
  }
}
@media (min-width: 60em) {
  .mina--upload {
    font-size: 1rem;
    right: 6px;
    top: 6px;
  }
}
.mina--caracteres {
  position: absolute;
}
@media (min-width: 18em) {
  .mina--caracteres {
    font-size: 0.625rem;
    right: 3px;
    bottom: 3px;
  }
}
@media (min-width: 60em) {
  .mina--caracteres {
    font-size: 0.75rem;
    right: 6px;
    bottom: 6px;
  }
}
.mina--discussion {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: flex-start;
  align-items: flex-start;
  text-align: left;
}
@media (min-width: 18em) {
  .mina--discussion {
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .mina--discussion {
    font-size: 1.25rem;
  }
}
.mina--discussion .success {
  color: #2ce7a8;
}
.mina--discussion .failed {
  color: #D52125;
}
.mina--discussion ol {
  padding: 0 0 0 16px;
}
@media (min-width: 18em) {
  .mina--discussion ol {
    line-height: 22px;
    margin: 6px 0 0;
  }
}
@media (min-width: 60em) {
  .mina--discussion ol {
    line-height: 32px;
    margin: 12px 0 0;
  }
}
.mina--discussion p {
  margin: 0;
}
.mina--discussion.scroll {
  overflow-y: auto;
  flex-wrap: wrap;
  align-content: flex-start;
}
@media (min-width: 18em) {
  .mina--discussion.scroll {
    min-height: 45vh;
    max-height: 45vh;
    padding: 0;
  }
}
@media (min-width: 60em) {
  .mina--discussion.scroll {
    min-height: 50vh;
    max-height: 50vh;
    padding: 32px;
  }
}
.mina--discussion__item {
  position: relative;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px dotted #737C84;
}
.mina--discussion__item:last-child {
  border: none;
}
.mina--discussion__item .title {
  width: 100%;
  display: block;
  color: #F17824;
  font-family: "torqueweb-book";
  text-transform: uppercase;
  padding-bottom: 6px;
}
@media (min-width: 18em) {
  .mina--discussion__question {
    width: 30%;
    padding: 0 12px;
  }
}
@media (min-width: 60em) {
  .mina--discussion__question {
    width: 30%;
    padding: 0 24px;
  }
}
.mina--discussion__reason {
  border-left: 1px dotted #737C84;
}
@media (min-width: 18em) {
  .mina--discussion__reason {
    width: 70%;
    max-height: 52vh;
    overflow-y: auto;
    padding: 0 12px;
  }
}
@media (min-width: 60em) {
  .mina--discussion__reason {
    width: 70%;
    padding: 0 24px;
    max-height: auto;
    overflow-y: hidden;
  }
}
.mina--discussion__title {
  font-weight: bold;
}
@media (min-width: 18em) {
  .mina--discussion__title {
    font-size: 1rem;
    padding: 0 0 8px;
  }
}
@media (min-width: 60em) {
  .mina--discussion__title {
    font-size: 1.75rem;
    padding: 0 0 16px;
  }
}
.mina--discussion__response {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -moz-align-items: center;
  align-items: center;
  border: 1px dotted #44505B;
}
@media (min-width: 18em) {
  .mina--discussion__response {
    min-height: 40px;
    font-size: 0.75rem;
    padding: 6px 8px;
    margin-top: 6px;
  }
}
@media (min-width: 60em) {
  .mina--discussion__response {
    min-height: 75px;
    font-size: 1rem;
    padding: 0 16px;
    margin-top: 12px;
  }
}
.mina--discussion__response.success {
  border-color: #6aa84f;
  color: #6aa84f;
}
.mina--discussion__response [class^=icon-],
.mina--discussion__response [class*=" icon-"] {
  position: absolute;
  bottom: 6px;
  right: 6px;
}
.mina--paginator {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .mina--paginator {
    margin: 12px auto 6px;
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .mina--paginator {
    margin: 32px auto 12px;
    font-size: 1.25rem;
  }
}
.mina--paginator__pages {
  min-width: 25%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  position: relative;
}
.mina--paginator__pages .bullet {
  display: block;
  background-color: #CBCBCB;
  border-radius: 100%;
}
@media (min-width: 18em) {
  .mina--paginator__pages .bullet {
    width: 12px;
    height: 12px;
  }
}
@media (min-width: 60em) {
  .mina--paginator__pages .bullet {
    width: 15px;
    height: 15px;
  }
}
.mina--paginator__pages .bullet.active {
  background-color: #13658E;
}
.mina--paginator__pages [class^=icon-],
.mina--paginator__pages [class*=" icon-"] {
  cursor: pointer;
}
.mina--paginator__questions {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  position: relative;
}
@media (min-width: 18em) {
  .mina--paginator__questions {
    padding-bottom: 8px;
  }
}
@media (min-width: 60em) {
  .mina--paginator__questions {
    padding-bottom: 16px;
  }
}
.mina--paginator__questions [class^=icon-],
.mina--paginator__questions [class*=" icon-"] {
  cursor: pointer;
}
@media (min-width: 18em) {
  .mina--paginator__questions [class^=icon-],
  .mina--paginator__questions [class*=" icon-"] {
    font-size: 1.75rem;
  }
}
@media (min-width: 60em) {
  .mina--paginator__questions [class^=icon-],
  .mina--paginator__questions [class*=" icon-"] {
    font-size: 2.5rem;
  }
}
.mina--paginator__questions--item {
  color: #44505B;
}
@media (min-width: 18em) {
  .mina--paginator__questions--item {
    font-size: 1rem;
    padding: 0 24px;
  }
}
@media (min-width: 60em) {
  .mina--paginator__questions--item {
    font-size: 1.5rem;
    padding: 0 32px;
  }
}
.mina--event {
  width: 75%;
  position: relative;
}
@media (min-width: 18em) {
  .mina--event {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .mina--event {
    font-size: 1.75rem;
  }
}
.mina--event .amount {
  position: absolute;
  right: 0;
  top: 0;
}
.mina--event__title {
  font-family: "torqueweb-medium";
  text-transform: uppercase;
  font-size: 2.5rem;
  color: #F17824;
}
@media (min-width: 18em) {
  .mina--event__title {
    font-size: 1.75rem;
    line-height: 1.5rem;
    letter-spacing: 1px;
  }
}
@media (min-width: 60em) {
  .mina--event__title {
    font-size: 2.5rem;
    line-height: 1.75rem;
    letter-spacing: 2px;
  }
}
.mina--event__title.green {
  color: #2ce7a8;
}
.mina--event__title.violet {
  color: #891593;
}
.mina--event__title.red {
  color: #D52125;
}
.mina--event__subtitle {
  color: #F17824;
}
@media (min-width: 18em) {
  .mina--event__subtitle {
    padding: 12px 0;
  }
}
@media (min-width: 60em) {
  .mina--event__subtitle {
    padding: 24px 0;
  }
}
.mina--event__subtitle.green {
  color: #2ce7a8;
}
.mina--event__subtitle.violet {
  color: #891593;
}
.mina--event__subtitle.red {
  color: #D52125;
}
.mina--event__text {
  padding: 12px 0;
}
.mina--text, .mina--number__questions {
  border-bottom: 1px dotted rgb(0, 0, 0);
  color: #44505B;
  position: relative;
}
@media (min-width: 18em) {
  .mina--text, .mina--number__questions {
    font-size: 1rem;
    padding: 12px 0;
  }
}
@media (min-width: 60em) {
  .mina--text, .mina--number__questions {
    font-size: 1.25rem;
    padding: 24px 0;
  }
}
.mina--number__questions {
  border: none;
}
.mina--historial {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-flex-grow: 1;
  flex-grow: 1;
  background-color: rgba(240, 238, 239, 0.5);
  border-radius: 3px;
}
@media (min-width: 18em) {
  .mina--historial {
    padding: 75px 48px 0;
  }
}
@media (min-width: 60em) {
  .mina--historial {
    padding: 118px 64px 0;
  }
}
.mina--historial__container {
  width: 100%;
  background-color: #f0eeef;
  overflow: auto;
  -moz-flex-grow: 1;
  flex-grow: 1;
}
@media (min-width: 18em) {
  .mina--historial__container {
    min-height: 60vh;
    max-height: 60vh;
  }
}
@media (min-width: 60em) {
  .mina--historial__container {
    min-height: 70vh;
    max-height: 70vh;
  }
}
.mina--historial__item {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  border-bottom: 1px dotted #737C84;
  cursor: pointer;
}
@media (min-width: 18em) {
  .mina--historial__item {
    padding: 8px;
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mina--historial__item {
    padding: 12px;
    font-size: 1.25rem;
  }
}
.mina--historial__item.mine {
  color: rgb(0, 0, 0);
}
.mina--historial__item .text {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
}
.mina--historial__item .text [class^=icon-],
.mina--historial__item .text [class*=" icon-"] {
  padding-right: 6px;
}
@media (min-width: 18em) {
  .mina--historial__item .btn--shape__canvas {
    padding: 8px;
  }
}
@media (min-width: 60em) {
  .mina--historial__item .btn--shape__canvas {
    padding: 12px;
  }
}
.mina--historial__info .icons {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
.mina--historial__info .icons--item {
  padding: 0 6px;
}
/*------------------------------------*\
    $BOXES
\*------------------------------------*/
/*
* Esto contiene los estilos para las cajas del juego.
*/
/**
* Definimos el MIXIN para las cajas de MARS:
* $color para el borde de la caja
* $borderwidth para el ancho del border
* @include border-shape($red,$gap)
*/
.box--border {
  background: #737C84;
  background: linear-gradient(135deg, transparent 10px, #737C84 0) top left, linear-gradient(225deg, transparent 10px, #737C84 0) top right, linear-gradient(315deg, transparent 10px, #737C84 0) bottom right, linear-gradient(45deg, transparent 10px, #737C84 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 1px;
}
.box--border.success {
  background: #2ce7a8;
  background: linear-gradient(135deg, transparent 10px, #2ce7a8 0) top left, linear-gradient(225deg, transparent 10px, #2ce7a8 0) top right, linear-gradient(315deg, transparent 10px, #2ce7a8 0) bottom right, linear-gradient(45deg, transparent 10px, #2ce7a8 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.box--border.failed {
  background: #D52125;
  background: linear-gradient(135deg, transparent 10px, #D52125 0) top left, linear-gradient(225deg, transparent 10px, #D52125 0) top right, linear-gradient(315deg, transparent 10px, #D52125 0) bottom right, linear-gradient(45deg, transparent 10px, #D52125 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.box--border .box--border__canvas {
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 10px, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, transparent 10px, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 10px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, transparent 10px, rgb(255, 255, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.box--likes {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-around;
  justify-content: space-around;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  width: 50px;
  height: 20vh;
  background-color: rgb(255, 255, 255);
  border: 2px solid #828282;
  border-right: none;
  border-radius: 12px 0 0 12px;
  color: #44505B;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: calc(50% - 10vh);
  z-index: 1;
}
@media (min-width: 18em) {
  .box--likes {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .box--likes {
    font-size: 1.5rem;
  }
}
.box--likes .success {
  color: #6aa84f;
}
.box--likes .failed {
  color: #D52125;
}
.box--money {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  padding: 12px 24px;
  font-family: "torqueweb-book";
  background-color: #891593;
  color: rgb(255, 255, 255);
  z-index: 6;
  border: 1px solid #891593;
  border-radius: 3px;
}
@media (min-width: 18em) {
  .box--money {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .box--money {
    font-size: 1.5rem;
  }
}
/*------------------------------------*\
    $MARKERS
\*------------------------------------*/
/*
* Esto contiene los estilos para los marcadores del juego.
*/
.markers--layer {
  display: -moz-flex;
  display: flex;
  -moz-align-items: flex-start;
  align-items: flex-start;
}
.markers {
  position: relative;
  top: -7px;
  background: rgb(0, 0, 0);
  background: linear-gradient(135deg, rgb(0, 0, 0) 6px, rgb(0, 0, 0) 0) top left, linear-gradient(225deg, rgb(0, 0, 0) 6px, rgb(0, 0, 0) 0) top right, linear-gradient(315deg, transparent 6px, rgb(0, 0, 0) 0) bottom right, linear-gradient(45deg, transparent 6px, rgb(0, 0, 0) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 1px;
  text-align: center;
}
.markers:nth-child(1) {
  padding-right: 0;
}
.markers:nth-child(2) {
  padding-right: 0;
  padding-left: 0;
}
.markers:nth-child(2) .markers--table {
  position: relative;
}
.markers:nth-child(2) .markers--table:before {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 0;
  left: -1px;
}
.markers:nth-child(2) .markers--table:after {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 0;
  right: 0;
}
.markers:nth-child(3) {
  padding-right: 0;
  padding-left: 0;
}
.markers:nth-child(3) .markers--table {
  position: relative;
}
.markers:nth-child(3) .markers--table:before {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 0;
  left: -1px;
}
.markers:nth-child(3) .markers--table:after {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 0;
  right: 0;
}
.markers:nth-child(4) {
  padding-left: 0;
}
.markers--footer .markers {
  top: 8px;
  background: rgb(0, 0, 0);
  background: linear-gradient(135deg, transparent 6px, rgb(0, 0, 0) 0) top left, linear-gradient(225deg, transparent 6px, rgb(0, 0, 0) 0) top right, linear-gradient(315deg, rgb(0, 0, 0) 6px, rgb(0, 0, 0) 0) bottom right, linear-gradient(45deg, rgb(0, 0, 0) 6px, rgb(0, 0, 0) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 1px;
}
.markers--footer .markers:nth-child(1) {
  padding-right: 0;
}
.markers--footer .markers:nth-child(2) {
  padding-right: 0;
  padding-left: 0;
}
.markers--footer .markers:nth-child(2) .markers--table {
  position: relative;
}
.markers--footer .markers:nth-child(2) .markers--table:before {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 7px;
  left: -1px;
}
.markers--footer .markers:nth-child(2) .markers--table:after {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 7px;
  right: 0;
}
.markers--footer .markers:nth-child(3) {
  padding-right: 0;
  padding-left: 0;
}
.markers--footer .markers:nth-child(3) .markers--table {
  position: relative;
}
.markers--footer .markers:nth-child(3) .markers--table:before {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 7px;
  left: -1px;
}
.markers--footer .markers:nth-child(3) .markers--table:after {
  content: "";
  width: 1px;
  height: calc(100% - 8px);
  background-color: #DAD5D7;
  position: absolute;
  top: 7px;
  right: 0;
}
.markers--footer .markers:nth-child(4) {
  padding-left: 0;
}
.markers--footer .markers--canvas {
  background: #f0eeef;
  background: linear-gradient(135deg, transparent 6px, #f0eeef 0) top left, linear-gradient(225deg, transparent 6px, #f0eeef 0) top right, linear-gradient(315deg, #f0eeef 6px, #f0eeef 0) bottom right, linear-gradient(45deg, #f0eeef 6px, #f0eeef 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.markers--canvas {
  display: -moz-flex;
  display: flex;
  background: #f0eeef;
  background: linear-gradient(135deg, #f0eeef 6px, #f0eeef 0) top left, linear-gradient(225deg, #f0eeef 6px, #f0eeef 0) top right, linear-gradient(315deg, transparent 6px, #f0eeef 0) bottom right, linear-gradient(45deg, transparent 6px, #f0eeef 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.markers--table {
  display: table;
  border-right: 1px solid #DAD5D7;
}
.markers--table:last-child {
  border: none;
}
.markers--table__row {
  display: table-row;
}
.markers--table__row:first-child .markers--table__row--item {
  border-bottom: 1px solid #DAD5D7;
}
.markers--table__row--item {
  display: table-cell;
  text-align: center;
}
@media (min-width: 18em) {
  .markers--table__row--item {
    font-size: 9px;
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .markers--table__row--item {
    font-size: 1rem;
    padding: 6px 16px;
  }
}
@media (min-width: 18em) {
  .markers--table__row--item [class^=icon-],
  .markers--table__row--item [class*=icon-] {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .markers--table__row--item [class^=icon-],
  .markers--table__row--item [class*=icon-] {
    font-size: 1.75rem;
  }
}
/*------------------------------------*\
    $MARS START TURN
\*------------------------------------*/
/*
* Esto contiene los estilos para el inicio de turno MARS.
*/
.mars {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #44505B;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: space-between;
  justify-content: space-between;
  position: absolute;
  left: 0;
  top: 0;
}
@media (min-width: 18em) {
  .mars.fase-1 .counter--position {
    display: none;
  }
}
@media (min-width: 60em) {
  .mars.fase-1 .counter--position {
    display: block;
  }
}
.mars--canvas, .mars--challenges, .mars--challenges__info, .mars--misions, .mars--resources, .mars--cologne, .mars--results {
  background-color: rgba(251, 251, 251, 0.6);
  border-radius: 3px;
}
.mars--header {
  width: 100%;
  height: 10vh;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .mars--header {
    padding: 24px 12px;
  }
}
@media (min-width: 60em) {
  .mars--header {
    padding: 24px;
  }
}
.fase-1 .mars--header {
  padding: 0;
  height: 0;
}
.mars--header .h1 {
  position: relative;
  width: 100%;
  color: #F17824;
  font-family: "torqueweb-book";
  margin: 0;
  padding: 0;
  text-align: center;
}
@media (min-width: 18em) {
  .mars--header .h1 {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .mars--header .h1 {
    font-size: 1.75rem;
  }
}
.mars--header .h1 .mars--header__title {
  position: absolute;
  left: 0;
  top: 0;
  color: #737C84;
  font-family: "torqueweb-light";
}
@media (min-width: 18em) {
  .mars--header .h1 .mars--header__title {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mars--header .h1 .mars--header__title {
    font-size: 1.5rem;
  }
}
@media (min-width: 18em) {
  .mars--header .h1 .mars--header__title span:nth-child(2) {
    padding-left: 6px;
  }
}
@media (min-width: 60em) {
  .mars--header .h1 .mars--header__title span:nth-child(2) {
    padding-left: 24px;
  }
}
.mars--header .h1 > span:last-child {
  text-transform: uppercase;
  font-family: "torqueweb-medium";
}
@media (min-width: 18em) {
  .mars--header .h1 > span:last-child {
    font-size: 1rem;
    letter-spacing: 1px;
  }
}
@media (min-width: 60em) {
  .mars--header .h1 > span:last-child {
    font-size: 1.95rem;
    letter-spacing: 2px;
  }
}
.mars--content {
  width: 100%;
  height: 74vh;
}
@media (min-width: 18em) {
  .mars--content {
    padding: 0 8px;
  }
}
@media (min-width: 60em) {
  .mars--content {
    padding: 24px;
  }
}
@media (min-width: 18em) {
  .fase-1 .mars--content {
    padding: 0 8px;
    margin-bottom: 32px;
  }
}
@media (min-width: 60em) {
  .fase-1 .mars--content {
    padding: 0 24px;
    margin-bottom: 48px;
  }
}
.mars--content.data {
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  padding: 0;
}
.mars--content.misions {
  display: -moz-flex;
  display: flex;
}
.mars--content.challenges {
  display: -moz-flex;
  display: flex;
}
.mars--content.challenges--info {
  display: -moz-flex;
  display: flex;
  padding: 0;
}
.mars--content.feed {
  display: -moz-flex;
  display: flex;
  padding: 0;
}
.mars--results {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-around;
  justify-content: space-around;
  font-family: "torqueweb-light";
}
@media (min-width: 18em) {
  .mars--results {
    max-height: 55px;
  }
}
@media (min-width: 60em) {
  .mars--results {
    max-height: 140px;
  }
}
.mars--results__item {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  text-transform: uppercase;
}
@media (min-width: 18em) {
  .mars--results__item {
    padding: 8px;
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .mars--results__item {
    padding: 12px;
    font-size: 1.25rem;
  }
}
@media (min-width: 18em) {
  .mars--results__item .mars--border {
    max-width: 75px;
  }
}
@media (min-width: 60em) {
  .mars--results__item .mars--border {
    max-width: 150px;
  }
}
.mars--results__item:nth-child(2) .value {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .mars--results__item:nth-child(2) .value {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .mars--results__item:nth-child(2) .value {
    font-size: 3rem;
  }
}
.mars--results__item:nth-child(2) .value .small {
  font-family: "torqueweb-light";
  font-size: 0.75rem;
  color: #737C84;
  padding: 0 6px;
}
.mars--results__item:nth-child(2) .value .small > span {
  font-size: 0.75rem;
}
.mars--results__item:nth-child(2) .value .separator {
  color: #CBCBCB;
  font-family: "torqueweb-light";
}
.mars--results__item .value {
  font-family: "torqueweb-book";
}
.mars--results__item span {
  display: block;
  text-align: center;
}
@media (min-width: 18em) {
  .mars--results__item span:last-child {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mars--results__item span:last-child {
    font-size: 1.95rem;
  }
}
.mars--footer {
  width: 100%;
  display: -moz-flex;
  display: flex;
  background-image: linear-gradient(to top, white, transparent 100%);
  font-family: "torqueweb-medium";
}
@media (min-width: 18em) {
  .mars--footer {
    margin-bottom: 6px;
    height: 10vh;
  }
}
@media (min-width: 60em) {
  .mars--footer {
    margin-bottom: 12px;
  }
}
@media (min-width: 80em) {
  .mars--footer {
    height: 13vh;
  }
}
.mars--paginator {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
}
@media (min-width: 18em) {
  .mars--paginator {
    font-size: 0.75rem;
  }
}
@media (min-width: 48em) {
  .mars--paginator {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mars--paginator {
    font-size: 1.25rem;
  }
}
.mars--paginator__item {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
  color: #CBCBCB;
  cursor: pointer;
  padding-top: 6px;
  text-transform: uppercase;
}
.mars--paginator__item.arrows {
  -moz-flex-direction: row;
  flex-direction: row;
  color: #F17824;
}
.mars--paginator__item.arrows [class^=icon-],
.mars--paginator__item.arrows [class*=icon-] {
  transform: rotate(-90deg);
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .mars--paginator__item.arrows [class^=icon-],
  .mars--paginator__item.arrows [class*=icon-] {
    font-size: 0.5rem;
  }
}
@media (min-width: 60em) {
  .mars--paginator__item.arrows [class^=icon-],
  .mars--paginator__item.arrows [class*=icon-] {
    font-size: 0.75rem;
  }
}
.mars--paginator__item.arrows [class^=icon-]:nth-child(1),
.mars--paginator__item.arrows [class*=icon-]:nth-child(1) {
  animation-name: fadeOut-animation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  -o-animation-name: fadeOut-animation;
  -o-animation-duration: 3s;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: ease-in-out;
  -o-animation-direction: normal;
  -moz-animation-name: fadeOut-animation;
  -moz-animation-duration: 3s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-direction: normal;
  -webkit-animation-name: fadeOut-animation;
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: normal;
  animation-delay: 0s;
  -o-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.mars--paginator__item.arrows [class^=icon-]:nth-child(2),
.mars--paginator__item.arrows [class*=icon-]:nth-child(2) {
  animation-name: fadeOut-animation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  -o-animation-name: fadeOut-animation;
  -o-animation-duration: 3s;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: ease-in-out;
  -o-animation-direction: normal;
  -moz-animation-name: fadeOut-animation;
  -moz-animation-duration: 3s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-direction: normal;
  -webkit-animation-name: fadeOut-animation;
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: normal;
  animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.mars--paginator__item.arrows [class^=icon-]:nth-child(3),
.mars--paginator__item.arrows [class*=icon-]:nth-child(3) {
  animation-name: fadeOut-animation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  -o-animation-name: fadeOut-animation;
  -o-animation-duration: 3s;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: ease-in-out;
  -o-animation-direction: normal;
  -moz-animation-name: fadeOut-animation;
  -moz-animation-duration: 3s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-direction: normal;
  -webkit-animation-name: fadeOut-animation;
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: normal;
  animation-delay: 1s;
  -o-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
}
.mars--paginator__item:before {
  content: "";
  width: 0;
  height: 3px;
  background-color: #F17824;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
.mars--paginator__item:hover {
  color: #F17824;
}
.mars--paginator__item:hover:before {
  width: 100%;
}
.mars--paginator__item.active {
  color: #F17824;
  opacity: 1;
}
.mars--paginator__item.active:before {
  width: 100%;
}
.mars--paginator__item.disabled {
  opacity: 0.4;
}
.mars--paginator__item.disabled:hover {
  color: inherit;
}
.mars--paginator__item.disabled:hover:before {
  width: 0;
}
.mars--block {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-flex-grow: 1;
  flex-grow: 1;
}
.mars--cologne {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .mars--cologne {
    margin: 6px 6px 0 0;
    padding: 8px;
  }
}
@media (min-width: 60em) {
  .mars--cologne {
    margin: 12px 12px 12px 0;
    padding: 24px;
  }
}
.mars--cologne.robot {
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/robot.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: auto 60%;
}
@media (min-width: 18em) {
  .mars--cologne.robot {
    margin: 6px 0 0 6px;
  }
}
@media (min-width: 60em) {
  .mars--cologne.robot {
    margin: 12px 0 12px 12px;
  }
}
.mars--cologne .heading .mars--list__item .value {
  margin-left: 0;
}
.mars--cologne .heading .mars--list__item:first-child {
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .mars--cologne .heading .mars--list__item:first-child {
    padding-bottom: 8px;
  }
}
@media (min-width: 60em) {
  .mars--cologne .heading .mars--list__item:first-child {
    padding-bottom: 12px;
  }
}
.mars--cologne .mars--cologne__num {
  -moz-justify-content: center;
  justify-content: center;
}
.mars--cologne .mars--cologne__num .success {
  position: relative;
  color: #2ce7a8;
  min-width: 30px;
  text-align: left;
  margin-left: 12px;
  padding-left: 8px;
  font-family: "torqueweb-book";
}
.mars--cologne .mars--cologne__num .success:before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: 0;
  width: 0;
  height: 0;
  border-right: 3px solid transparent;
  border-top: 3px solid transparent;
  border-left: 3px solid transparent;
  border-bottom: 5px solid #2ce7a8;
}
.mars--cologne .mars--cologne__num .failed {
  position: relative;
  color: #D52125;
  min-width: 30px;
  text-align: left;
  margin-left: 12px;
  padding-left: 8px;
  font-family: "torqueweb-book";
}
.mars--cologne .mars--cologne__num .failed:before {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  left: 0;
  width: 0;
  height: 0;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 3px solid transparent;
  border-top: 5px solid #D52125;
}
.mars--cologne .mars--cologne__num .value.important {
  color: #F17824;
  margin: 0;
}
@media (min-width: 18em) {
  .mars--cologne .mars--cologne__num .value.important {
    font-size: 1.5rem;
  }
}
@media (min-width: 60em) {
  .mars--cologne .mars--cologne__num .value.important {
    font-size: 3rem;
    padding-top: 6px;
  }
}
.mars--resources {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .mars--resources {
    margin: 6px 0 0 0;
    padding: 8px;
  }
}
@media (min-width: 60em) {
  .mars--resources {
    margin: 12px 0;
    padding: 24px;
  }
}
.mars--resources .mars--list__item {
  -moz-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.mars--resources .mars--list__item .value {
  margin-left: 8px;
  margin-right: 0;
}
.mars--resources .mars--list__item .success {
  position: relative;
  color: #2ce7a8;
  min-width: 30px;
  text-align: left;
  margin-left: 12px;
  padding-left: 8px;
  font-family: "torqueweb-book";
}
.mars--resources .mars--list__item .success:before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: 0;
  width: 0;
  height: 0;
  border-right: 3px solid transparent;
  border-top: 3px solid transparent;
  border-left: 3px solid transparent;
  border-bottom: 5px solid #2ce7a8;
}
.mars--resources .mars--list__item .failed {
  position: relative;
  color: #D52125;
  min-width: 30px;
  text-align: left;
  margin-left: 12px;
  padding-left: 8px;
  font-family: "torqueweb-book";
}
.mars--resources .mars--list__item .failed:before {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  left: 0;
  width: 0;
  height: 0;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 3px solid transparent;
  border-top: 5px solid #D52125;
}
.mars--border {
  position: relative;
  width: 100%;
  height: 1px;
  display: block;
  border-top: 1px solid #CBCBCB;
  margin: 0 auto;
}
@media (min-width: 18em) {
  .mars--border {
    margin: 6px 0;
  }
}
@media (min-width: 60em) {
  .mars--border {
    margin: 12px 0;
  }
}
.mars--border:before {
  content: "";
  width: 16px;
  height: 1px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: -1px;
  left: calc(50% - 8px);
  z-index: 1;
}
.mars--border:after {
  content: "";
  width: 4px;
  height: 4px;
  background-color: #CBCBCB;
  border-radius: 100%;
  position: absolute;
  top: -2px;
  left: calc(50% - 2px);
  z-index: 2;
}
@media (min-width: 18em) {
  .mars--list {
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .mars--list {
    font-size: 1.5rem;
  }
}
@media (min-width: 60em) and (max-height: 45em) {
  .mars--list {
    font-size: 1rem;
  }
}
@media (min-width: 18em) {
  .mars--list.heading {
    margin-top: 0;
  }
}
@media (min-width: 60em) {
  .mars--list.heading {
    margin-top: 12px;
  }
}
.mars--list.heading .mars--list__item:first-child {
  font-family: "torqueweb-book";
  text-transform: uppercase;
  -moz-justify-content: center;
  justify-content: center;
}
@media (min-width: 18em) {
  .mars--list.heading .mars--list__item:first-child {
    padding-bottom: 3px;
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mars--list.heading .mars--list__item:first-child {
    padding-bottom: 12px;
    font-size: 1.5rem;
  }
}
.mars--list__item {
  display: -moz-flex;
  display: flex;
}
@media (min-width: 18em) {
  .mars--list__item {
    padding-bottom: 6px;
  }
}
@media (min-width: 60em) {
  .mars--list__item {
    padding-bottom: 12px;
  }
}
.mars--list__item.range {
  -moz-justify-content: center;
  justify-content: center;
  font-family: "torqueweb-medium";
  text-transform: uppercase;
}
.mars--list__item.justify--center {
  -moz-justify-content: center;
  justify-content: center;
}
.mars--list__item .value {
  font-family: "torqueweb-book";
  font-weight: bold;
  color: #44505B;
  margin-left: 8px;
}
.mars--list__item .value.orange {
  color: #F17824;
}
.mars--list__item .value.orangeBottom {
  color: #F17824 !important;
  margin: 0;
}
.mars--list__item .value.important {
  color: #44505B;
}
@media (min-width: 18em) {
  .mars--list__item .value.important {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .mars--list__item .value.important {
    font-size: 1.5rem;
  }
}
.mars--list__item .mars--border {
  margin: 6px 0;
}
.mars--list__item .mars--results__item {
  padding: 0;
}
.mars--list__item .mars--results__item .mars--border {
  margin: 0;
}
.mars--list__item .mars--results__item .value {
  color: #44505B;
}
@media (min-width: 18em) {
  .mars--list__item .mars--results__item .value {
    margin: 6px 0;
  }
}
@media (min-width: 60em) {
  .mars--list__item .mars--results__item .value {
    margin: 12px 0;
  }
}
.mars--list__item.arrow--down:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 2px;
  height: 30px;
  border-left: 1px dashed #F17824;
}
@media (min-width: 18em) {
  .mars--list__item.arrow--down:before {
    height: 20px;
  }
}
@media (min-width: 60em) {
  .mars--list__item.arrow--down:before {
    height: 30px;
  }
}
.mars--misions {
  width: 100%;
  display: -moz-flex;
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 18em) {
  .mars--misions {
    padding: 24px;
    -moz-align-items: stretch;
    align-items: stretch;
  }
}
@media (min-width: 60em) {
  .mars--misions {
    padding: 72px;
    -moz-align-items: center;
    align-items: center;
    align-content: flex-start;
  }
}
.mars--misions__list {
  width: 100%;
  display: -moz-flex;
  display: flex;
}
.mars--misions__list .box--border {
  width: 100%;
  display: -moz-flex;
  display: flex;
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 12px, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, transparent 12px, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 12px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, transparent 12px, rgb(255, 255, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
  padding: 1px;
  cursor: pointer;
}
@media (min-width: 18em) {
  .mars--misions__list .box--border {
    margin: 0 12px;
    min-height: 120px;
  }
}
@media (min-width: 60em) {
  .mars--misions__list .box--border {
    margin: 0 24px;
    min-height: 250px;
  }
}
.mars--misions__list .box--border.active {
  background: #F17824;
  background: linear-gradient(135deg, transparent 10px, #F17824 0) top left, linear-gradient(225deg, transparent 10px, #F17824 0) top right, linear-gradient(315deg, transparent 10px, #F17824 0) bottom right, linear-gradient(45deg, transparent 10px, #F17824 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  transform: scale(1.1);
}
.mars--misions__list .box--border.active .box--border__transparent {
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/martian.png");
}
.mars--misions__list .box--border__canvas {
  width: 100%;
  display: -moz-flex;
  display: flex;
}
.mars--misions__list .box--border__transparent {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/martian-normal.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.mars--misions__name {
  width: 100%;
  text-align: center;
  font-family: "torqueweb-bold";
  padding: 6px;
  color: #44505B;
}
@media (min-width: 18em) {
  .mars--misions__name {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mars--misions__name {
    font-size: 1.25rem;
  }
}
.mars--mision__text {
  position: relative;
  width: 100%;
  text-align: center;
  font-family: "torqueweb-book";
  border-top: 1px dotted #F17824;
}
@media (min-width: 18em) {
  .mars--mision__text {
    padding-top: 16px;
    margin: 24px 12px 0;
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mars--mision__text {
    padding-top: 32px;
    margin: 64px 0 0 0;
    font-size: 1.5rem;
  }
}
.mars--mision__text:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: calc(50% - 3px);
  border-top: 6px solid #F17824;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}
.mars--mision__text:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: -1px;
  left: calc(50% - 3px);
  border-top: 6px solid rgb(240.8, 240.8, 240.8);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}
.mars--challenges, .mars--challenges__info {
  width: 100%;
  display: -moz-flex;
  display: flex;
}
@media (min-width: 18em) {
  .mars--challenges, .mars--challenges__info {
    padding: 8px;
    margin-bottom: 0;
  }
}
@media (min-width: 60em) {
  .mars--challenges, .mars--challenges__info {
    padding: 32px;
    margin-bottom: 12px;
  }
}
.mars--challenges__info {
  padding: 0;
}
@media (min-width: 18em) {
  .mars--challenges__info {
    margin-bottom: 0;
  }
}
@media (min-width: 60em) {
  .mars--challenges__info {
    margin-bottom: 12px;
  }
}
.mars--challenge__results {
  overflow: auto;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  font-family: "torqueweb-medium";
}
@media (min-width: 18em) {
  .mars--challenge__results {
    width: 75%;
    padding-right: 8px;
    font-size: 0.75rem;
    line-height: 0.75rem;
  }
}
@media (min-width: 60em) {
  .mars--challenge__results {
    width: 80%;
    padding-right: 16px;
    font-size: 1.25rem;
    line-height: 1.25rem;
  }
}
.mars--challenge__results::-webkit-scrollbar {
  display: none;
}
.mars--challenge__results::-moz-scrollbar {
  display: none;
}
.mars--challenge__results .box--border {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-grow: 1;
  flex-grow: 1;
  background: #CBCBCB;
}
.mars--challenge__results .box--border__canvas {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
}
.mars--challenges__head {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  color: rgb(255, 255, 255);
  text-align: center;
}
@media (min-width: 18em) {
  .mars--challenges__head {
    min-height: 25px;
    max-height: 25px;
  }
}
@media (min-width: 60em) {
  .mars--challenges__head {
    min-height: 40px;
    max-height: 40px;
  }
}
.mars--challenges__head.success {
  background: #6aa84f;
}
.mars--challenges__head.failed {
  background-color: #D52125;
}
.mars--challenges__head.failed.void {
  background: #D52125;
}
.mars--challenges__head--item {
  width: 40%;
}
.mars--challenges__head--item:nth-child(2) {
  width: 20%;
}
.mars--challenges__row {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-grow: 1;
  flex-grow: 1;
  text-align: center;
}
.mars--challenges__row.border {
  border-top: 1px dotted #44505B;
  background: #fbfbfb;
}
.mars--challenges__row.void .mars--challenges__col {
  width: 100%;
  -moz-justify-content: center;
  justify-content: center;
}
.mars--challenges__col {
  width: 40%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-flex-direction: column;
  flex-direction: column;
}
@media (min-width: 18em) {
  .mars--challenges__col {
    padding: 8px;
  }
}
@media (min-width: 60em) {
  .mars--challenges__col {
    padding: 16px;
  }
}
.mars--challenges__col:nth-child(2) {
  width: 20%;
  font-family: "torqueweb-light";
  border-right: 1px solid #44505B;
  border-left: 1px solid #44505B;
}
@media (min-width: 18em) {
  .mars--challenges__col:nth-child(2) {
    padding: 8px;
  }
}
@media (min-width: 60em) {
  .mars--challenges__col:nth-child(2) {
    padding: 16px;
  }
}
.mars--challenges__col .name {
  text-transform: uppercase;
}
@media (min-width: 18em) {
  .mars--challenges__col .name {
    font-size: 0.75rem;
    line-height: 0.75rem;
  }
}
@media (min-width: 60em) {
  .mars--challenges__col .name {
    font-size: 1.25rem;
    line-height: 1.25rem;
  }
}
.mars--challenges__col .text {
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .mars--challenges__col .text {
    font-size: 0.75rem;
    line-height: 0.75rem;
  }
}
@media (min-width: 60em) {
  .mars--challenges__col .text {
    font-size: 1rem;
    line-height: 1rem;
  }
}
@media (min-width: 18em) {
  .mars--challenges__col .result {
    font-size: 1.25rem;
    line-height: 1.25rem;
    padding-bottom: 6px;
  }
}
@media (min-width: 60em) {
  .mars--challenges__col .result {
    font-size: 2.5rem;
    line-height: 2.5rem;
    padding-bottom: 12px;
  }
}
.mars--challenges__col .time {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
}
.mars--challenge__info {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-grow: 1;
  flex-grow: 1;
  text-align: center;
}
.mars--challenge__info:first-child {
  border-bottom: 1px dotted #44505B;
}
.mars--challenge__info.important {
  border: none;
}
.mars--challenge__info.important .mars--arrow__left,
.mars--challenge__info.important .mars--arrow__right {
  border-color: #44505B;
}
.mars--challenge__info.important .mars--arrow__left:after, .mars--challenge__info.important .mars--arrow__left:before,
.mars--challenge__info.important .mars--arrow__right:after,
.mars--challenge__info.important .mars--arrow__right:before {
  color: #44505B;
}
.mars--challenge__info.important .mars--challenge__info--item {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
}
@media (min-width: 18em) {
  .mars--challenge__info.important .mars--challenge__info--item .value {
    line-height: 1.75rem;
  }
}
@media (min-width: 60em) {
  .mars--challenge__info.important .mars--challenge__info--item .value {
    line-height: 5rem;
  }
}
.mars--challenge__info.important .info {
  margin: 0;
}
@media (min-width: 18em) {
  .mars--challenge__info.important .info {
    font-size: 0.75rem;
    padding: 6px 6px 0 6px;
  }
}
@media (min-width: 60em) {
  .mars--challenge__info.important .info {
    font-size: 1rem;
    padding: 6px 0 0 0;
  }
}
.mars--challenge__info.important .info span {
  padding-left: 6px;
}
.mars--challenge__info--item {
  width: 100%;
}
@media (min-width: 18em) {
  .mars--challenge__info--item {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .mars--challenge__info--item {
    font-size: 1.75rem;
  }
}
.mars--challenge__info--item.failed {
  color: #D52125;
}
.mars--challenge__info--item.success {
  color: #2ce7a8;
}
.mars--challenge__info--item .time {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  -moz-justify-content: center;
  justify-content: center;
  line-height: 0;
}
@media (min-width: 18em) {
  .mars--challenge__info--item .time {
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .mars--challenge__info--item .time {
    font-size: 1rem;
  }
}
.mars--challenge__info--item .time [class^=icon-],
.mars--challenge__info--item .time [class*=icon-] {
  padding: 0 12px;
}
.mars--challenge__info--item .value {
  line-height: 0;
}
@media (min-width: 18em) {
  .mars--challenge__info--item .value {
    font-size: 1.75rem;
  }
}
@media (min-width: 60em) {
  .mars--challenge__info--item .value {
    font-size: 5.25rem;
  }
}
.mars--challenge__info--item .result {
  font-family: "torqueweb-book";
  font-weight: bold;
  color: #F17824;
  line-height: 0;
}
@media (min-width: 18em) {
  .mars--challenge__info--item .result {
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .mars--challenge__info--item .result {
    font-size: 1.25rem;
  }
}
.mars--challenge__info--item .result.failed {
  color: #D52125;
}
.mars--challenge__info--item .text {
  font-family: "torqueweb-book";
  text-transform: capitalize;
}
@media (min-width: 18em) {
  .mars--challenge__info--item .text {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mars--challenge__info--item .text {
    font-size: 1.25rem;
  }
}
.mars--arrow__right {
  position: relative;
  width: 100%;
  height: 2px;
  border-top: 2px dashed #F17824;
}
.mars--arrow__right:after {
  content: ">";
  font-weight: bold;
  font-size: 1.25rem;
  position: absolute;
  right: -12px;
  top: -19.5px;
  color: #F17824;
}
.mars--arrow__left {
  position: relative;
  width: 100%;
  height: 2px;
  border-top: 2px dashed #F17824;
}
.mars--arrow__left:after {
  content: "<";
  font-weight: bold;
  font-size: 1.25rem;
  position: absolute;
  left: -12px;
  top: -19px;
  color: #F17824;
}
.mars--challenge__list {
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
}
@media (min-width: 18em) {
  .mars--challenge__list {
    width: 25%;
    margin-left: 8px;
  }
}
@media (min-width: 60em) {
  .mars--challenge__list {
    width: 20%;
    margin-left: 16px;
  }
}
.mars--challenge__list .box--border {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-grow: 1;
  flex-grow: 1;
  background: #CBCBCB;
}
.mars--challenge__list .box--border__canvas {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  -moz-justify-content: space-around;
  justify-content: space-around;
  -moz-flex-direction: column;
  flex-direction: column;
  background: rgb(255, 255, 255);
}
@media (min-width: 18em) {
  .mars--challenge__list .box--border__canvas {
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .mars--challenge__list .box--border__canvas {
    padding: 18px;
  }
}
.mars--challenge__list .btn--orange {
  width: 100%;
  margin: 0;
}
@media (min-width: 18em) {
  .mars--challenge__list .btn--orange {
    font-size: 0.6rem;
    margin-top: 6px;
  }
}
@media (min-width: 60em) {
  .mars--challenge__list .btn--orange {
    font-size: 1rem;
    margin-top: 12px;
  }
}
.mars--challenge__list .btn--orange:hover {
  transform: scale(1);
}
.mars--challenge__list .btn--orange span {
  width: 100%;
  text-align: center;
}
.mars--challenge__list .btn--orange [class^=icon-],
.mars--challenge__list .btn--orange [class*=icon-] {
  width: auto;
  text-align: left;
}
@media (min-width: 18em) {
  .mars--challenge__list .shield {
    width: 40px;
    height: 40px;
  }
}
@media (min-width: 60em) {
  .mars--challenge__list .shield {
    width: 75px;
    height: 75px;
  }
}
@media (min-width: 18em) {
  .mars--challenge__list .shield--item {
    width: 40px;
    height: 40px;
    background-size: 40px 40px;
  }
}
@media (min-width: 60em) {
  .mars--challenge__list .shield--item {
    width: 75px;
    height: 75px;
    background-size: 75px 75px;
  }
}
@media (min-width: 18em) {
  .mars--challenge__list .shield--icon {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .mars--challenge__list .shield--icon {
    font-size: 2.625rem;
  }
}
@media (min-width: 18em) {
  .mars--challenge__list .shield--background {
    font-size: 1.925rem;
  }
}
@media (min-width: 60em) {
  .mars--challenge__list .shield--background {
    font-size: 3.85rem;
  }
}
.mars--challenge__list--item {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  -moz-justify-content: center;
  justify-content: center;
  -moz-flex-direction: column;
  flex-direction: column;
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(246, 246, 246) 47%, rgb(240, 240, 240) 100%);
  box-shadow: inset 0 -5px 0 0 rgb(196, 196, 196);
  border: 2px solid #c4c4c4;
  border-radius: 10px;
  cursor: pointer;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .mars--challenge__list--item {
    padding: 12px;
  }
}
@media (min-width: 60em) {
  .mars--challenge__list--item {
    padding: 16px;
  }
}
.mars--challenge__list--item:hover {
  transform: scale(1.1);
}
.mars--challenge__list--item.disabled {
  opacity: 0.5;
}
.mars--challenge__list--item .shield--canvas__texture {
  position: static;
  z-index: 0;
  background-color: transparent;
}
.mars--challenge__list--title {
  font-family: "torqueweb-bold";
  color: #44505B;
  text-align: center;
}
@media (min-width: 18em) {
  .mars--challenge__list--title {
    font-size: 1rem;
    margin: 0 auto 6px;
  }
}
@media (min-width: 60em) {
  .mars--challenge__list--title {
    font-size: 1.25rem;
    margin: 0 auto 12px;
  }
}
.mars--challenge__list--subtitle {
  font-family: "torqueweb-book";
  color: #44505B;
  text-align: center;
}
@media (min-width: 18em) {
  .mars--challenge__list--subtitle {
    font-size: 1rem;
    margin: 6px auto;
  }
}
@media (min-width: 60em) {
  .mars--challenge__list--subtitle {
    font-size: 1.25rem;
    margin: 8px auto;
  }
}
.mars--challenge__list--go {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  -moz-justify-content: center;
  justify-content: center;
  flex-basis: 40px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  background: #F17824;
  background: linear-gradient(135deg, #F17824 12px, #F17824 0) top left, linear-gradient(225deg, #F17824 12px, #F17824 0) top right, linear-gradient(315deg, transparent 12px, #F17824 0) bottom right, linear-gradient(45deg, transparent 12px, #F17824 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 0;
}
@media (min-width: 18em) {
  .mars--challenge__list--go {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mars--challenge__list--go {
    font-size: 1.25rem;
  }
}
.mars--challenges__info--content {
  width: 70%;
  overflow-y: auto;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -moz-align-items: center;
  align-items: center;
}
.mars--challenges__info--content.void {
  -moz-justify-content: center;
  justify-content: center;
  text-align: center;
}
.mars--challenges__info--item {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  background-color: #fbfbfb;
  border-bottom: 1px dotted #44505B;
  color: #44505B;
}
@media (min-width: 18em) {
  .mars--challenges__info--item {
    padding: 8px;
  }
}
@media (min-width: 60em) {
  .mars--challenges__info--item {
    padding: 24px 0;
  }
}
.mars--challenges__info--item.success {
  color: #6aa84f;
}
.mars--challenges__info--item.failed {
  color: #D52125;
}
.mars--challenges__info--item .icons {
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  text-align: center;
}
@media (min-width: 18em) {
  .mars--challenges__info--item .icons {
    flex-basis: 20%;
    font-size: 1rem;
    padding: 0 6px;
  }
}
@media (min-width: 60em) {
  .mars--challenges__info--item .icons {
    flex-basis: 45px;
    font-size: 1.5rem;
    padding: 0 12px;
  }
}
.mars--challenges__info--item .icons.success {
  color: #6aa84f;
}
.mars--challenges__info--item .icons.failed {
  color: #D52125;
}
@media (min-width: 18em) {
  .mars--challenges__info--item .icons .text {
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .mars--challenges__info--item .icons .text {
    font-size: 1rem;
  }
}
.mars--challenges__info--item .text {
  width: 100%;
}
@media (min-width: 18em) {
  .mars--challenges__info--item .text {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mars--challenges__info--item .text {
    font-size: 1.25rem;
  }
}
.mars--challenges__info--item .result {
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  color: #6aa84f;
}
@media (min-width: 18em) {
  .mars--challenges__info--item .result {
    font-size: 0.8rem;
    line-height: 0.8rem;
    flex-basis: 20%;
  }
}
@media (min-width: 60em) {
  .mars--challenges__info--item .result {
    font-size: 1.25rem;
    line-height: 1.25rem;
    flex-basis: 15%;
  }
}
.mars--challenges__info--item .result.failed {
  color: #D52125;
}
.mars--challenges__nav {
  width: 30%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
}
.mars--challenges__nav--item {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  -moz-flex-grow: 1;
  flex-grow: 1;
  background-color: #fbfbfb;
  opacity: 0.4;
  cursor: pointer;
}
@media (min-width: 18em) {
  .mars--challenges__nav--item {
    line-height: 20px;
  }
}
@media (min-width: 60em) {
  .mars--challenges__nav--item {
    line-height: 1.5rem;
    margin-bottom: 12px;
    margin-right: 12px;
  }
}
.mars--challenges__nav--item:last-child {
  border: none;
  margin-bottom: 0;
}
.mars--challenges__nav--item.active {
  background-color: #fbfbfb;
  opacity: 1;
}
.mars--challenges__nav--item .text {
  width: 100%;
  color: #F17824;
  font-family: "torqueweb-book";
  text-transform: capitalize;
  text-align: center;
}
@media (min-width: 18em) {
  .mars--challenges__nav--item .text {
    font-size: 1.2rem;
  }
}
@media (min-width: 60em) {
  .mars--challenges__nav--item .text {
    font-size: 1.75rem;
  }
}
.mars--challenges__nav--item .value {
  color: #6aa84f;
  font-family: "torqueweb-medium";
  font-weight: bold;
}
@media (min-width: 18em) {
  .mars--challenges__nav--item .value {
    font-size: 0.75rem;
    padding: 0 6px;
  }
}
@media (min-width: 60em) {
  .mars--challenges__nav--item .value {
    font-size: 1.5rem;
  }
}
.mars--challenges__nav--item .value:nth-child(2) {
  color: #279FDC;
}
.mars--challenges__nav--item .value [class^=icon-],
.mars--challenges__nav--item .value [class*=" icon-"] {
  padding-right: 6px;
}
.mars--challenges__nav--item .value.failed {
  color: #D52125;
}
.mars--challenges__values {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  padding-top: 6px;
}
.mars--create__name, .mars--welcome, .mars--init {
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  background-color: rgba(251, 251, 251, 0.9);
  border-radius: 4.5px;
  position: absolute;
  left: 0;
  top: 0;
}
@media (min-width: 18em) {
  .mars--create__name, .mars--welcome, .mars--init {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    margin: 12px;
  }
}
@media (min-width: 60em) {
  .mars--create__name, .mars--welcome, .mars--init {
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    margin: 24px;
  }
}
.mars--title, .settings--title {
  width: 90%;
  color: #F17824;
  border-bottom: 1px dotted #CBCBCB;
  text-align: center;
  text-transform: uppercase;
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .mars--title, .settings--title {
    font-size: 1.25rem;
    padding: 12px;
  }
}
@media (min-width: 60em) {
  .mars--title, .settings--title {
    font-size: 1.75rem;
    padding: 32px;
  }
}
.mars--cologne__name {
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-grow: 1;
  flex-grow: 1;
}
.mars--cologne__name .text {
  font-family: "torqueweb-light";
}
@media (min-width: 18em) {
  .mars--cologne__name .text {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mars--cologne__name .text {
    font-size: 1.25rem;
  }
}
.mars--cologne__name .text.error {
  color: #D52125;
  padding-top: 6px;
}
.mars--cologne__name .btn--orange {
  margin-top: 24px;
}
.mars--input__name {
  font-family: "torqueweb-book";
  width: 300px;
  background: rgb(255, 255, 255);
  border: 1px solid #DAD5D7;
  border-radius: 10px;
  margin: 12px 0 0;
  outline: 0;
  text-align: center;
}
@media (min-width: 18em) {
  .mars--input__name {
    font-size: 1.25rem;
    padding: 12px;
  }
}
@media (min-width: 60em) {
  .mars--input__name {
    font-size: 1.75rem;
    padding: 24px;
  }
}
.mars--feed {
  width: 100%;
  background-color: #fbfbfb;
  overflow-y: auto;
}
@media (min-width: 18em) {
  .mars--feed {
    margin-bottom: 0;
  }
}
@media (min-width: 60em) {
  .mars--feed {
    margin-bottom: 12px;
  }
}
.mars--feed__item {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .mars--feed__item {
    padding: 0 24px;
    margin-top: 12px;
    font-size: 1rem;
    line-height: 1.25rem;
  }
}
@media (min-width: 60em) {
  .mars--feed__item {
    margin-top: 24px;
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}
.mars--feed__item [class^=icon-],
.mars--feed__item [class*=icon-] {
  color: #F17824;
}
.mars--feed__item.important [class^=icon-],
.mars--feed__item.important [class*=icon-] {
  color: #6aa84f;
}
.mars--feed__item.important .text {
  border: 1px solid #6aa84f;
  padding: 8px;
}
.mars--feed__item .text {
  margin-left: 12px;
}
.mars--init {
  position: absolute;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
}
@media (min-width: 18em) {
  .mars--init {
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .mars--init {
    padding: 24px;
  }
}
.mars--init__info {
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-grow: 1;
  flex-grow: 1;
}
.mars--logo__company {
  width: 100%;
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/logo-gamelearn.png");
  background-position: left top;
  background-repeat: no-repeat;
  position: absolute;
}
@media (min-width: 18em) {
  .mars--logo__company {
    height: 100px;
    background-size: 100px auto;
    left: 12px;
    top: 24px;
  }
}
@media (min-width: 60em) {
  .mars--logo__company {
    height: 200px;
    background-size: 200px auto;
    left: 24px;
    top: 24px;
  }
}
.mars--logo {
  width: 100%;
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/logo.png");
  background-position: right top;
  background-repeat: no-repeat;
}
@media (min-width: 18em) {
  .mars--logo {
    height: 40px;
    background-size: 40px auto;
  }
}
@media (min-width: 48em) {
  .mars--logo {
    height: 50px;
    background-size: 50px auto;
  }
}
@media (min-width: 60em) {
  .mars--logo {
    height: 100px;
    background-size: 100px auto;
  }
}
.mars--init__title {
  text-align: center;
  display: block;
  color: #F17824;
  font-family: "torqueweb-medium";
  text-transform: uppercase;
  letter-spacing: 2px;
}
@media (min-width: 18em) {
  .mars--init__title {
    font-size: 1.5rem;
    margin-bottom: 12px;
  }
}
@media (min-width: 60em) {
  .mars--init__title {
    font-size: 2.5rem;
    margin-bottom: 16px;
  }
}
.mars--init__subtitle {
  text-align: center;
  display: block;
  color: #737C84;
  font-family: "torqueweb-light";
}
@media (min-width: 18em) {
  .mars--init__subtitle {
    font-size: 1rem;
    margin-top: 0;
    padding-bottom: 6px;
  }
}
@media (min-width: 60em) {
  .mars--init__subtitle {
    font-size: 1.25rem;
    margin-top: 24px;
  }
}
.mars--topic {
  width: 100%;
  background: #F17824;
  background: linear-gradient(135deg, transparent 6px, #F17824 0) top left, linear-gradient(225deg, transparent 6px, #F17824 0) top right, linear-gradient(315deg, transparent 6px, #F17824 0) bottom right, linear-gradient(45deg, transparent 6px, #F17824 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 2px;
}
@media (min-width: 18em) {
  .mars--topic {
    margin-bottom: 8px;
  }
}
@media (min-width: 60em) {
  .mars--topic {
    margin-bottom: 24px;
  }
}
.mars--init__topic {
  text-align: center;
  color: #44505B;
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .mars--init__topic {
    font-size: 1rem;
    margin-bottom: 6px;
  }
}
@media (min-width: 60em) {
  .mars--init__topic {
    font-size: 1.75rem;
    margin-bottom: 24px;
  }
}
.mars--topic__canvas {
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 6px, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, transparent 6px, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 6px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, transparent 6px, rgb(255, 255, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  text-transform: uppercase;
  text-align: center;
  color: #F17824;
  font-weight: bold;
}
@media (min-width: 18em) {
  .mars--topic__canvas {
    font-size: 1rem;
    padding: 6px;
    min-width: 475px;
  }
}
@media (min-width: 60em) {
  .mars--topic__canvas {
    font-size: 1.75rem;
    padding: 12px;
    min-width: 650px;
  }
}
.mars--info {
  width: 100%;
  background: #737C84;
  background: linear-gradient(135deg, transparent 6px, #737C84 0) top left, linear-gradient(225deg, transparent 6px, #737C84 0) top right, linear-gradient(315deg, transparent 6px, #737C84 0) bottom right, linear-gradient(45deg, transparent 6px, #737C84 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 1px;
}
@media (min-width: 18em) {
  .mars--info {
    margin: 0 0 8px;
    min-width: 0;
  }
}
@media (min-width: 60em) {
  .mars--info {
    margin: 0 0 24px;
  }
}
.mars--info__canvas {
  display: -moz-flex;
  display: flex;
  -moz-flex-grow: 1;
  flex-grow: 1;
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 6px, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, transparent 6px, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 6px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, transparent 6px, rgb(255, 255, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  color: #737C84;
  padding: 0 24px;
}
.mars--info__canvas .text,
.mars--info__canvas .title {
  width: 100%;
  display: block;
}
@media (min-width: 18em) {
  .mars--info__canvas .text,
  .mars--info__canvas .title {
    font-size: 1rem;
    padding-bottom: 0;
  }
}
@media (min-width: 60em) {
  .mars--info__canvas .text,
  .mars--info__canvas .title {
    font-size: 1.25rem;
    padding-bottom: 6px;
  }
}
.mars--info__canvas .value {
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .mars--info__canvas .value {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}
@media (min-width: 60em) {
  .mars--info__canvas .value {
    font-size: 5rem;
    line-height: 5rem;
  }
}
.mars--info__list {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  margin: 0;
}
.mars--info__list--item {
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
}
@media (min-width: 18em) {
  .mars--info__list--item {
    padding: 8px 0;
  }
}
@media (min-width: 60em) {
  .mars--info__list--item {
    padding: 32px 0;
  }
}
.mars--info__list--item:first-child {
  border-right: 1px dashed #737C84;
  padding-right: 24px;
  margin-right: 24px;
}
.mars--welcome {
  -moz-justify-content: center;
  justify-content: center;
  padding: 0 24px 24px;
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/ship.png");
  background-repeat: no-repeat;
  background-position: 5% 95%;
  background-size: auto 35%;
}
.mars--welcome__message {
  width: 100%;
  font-family: "torqueweb-book";
  color: #44505B;
  text-align: center;
}
@media (min-width: 18em) {
  .mars--welcome__message {
    font-size: 1rem;
    max-width: 100%;
  }
}
@media (min-width: 60em) {
  .mars--welcome__message {
    font-size: 1.5rem;
    max-width: 60%;
    padding: 24px 0;
  }
}
@media (min-width: 100em) {
  .mars--welcome__message {
    font-size: 1.75rem;
    max-width: 50%;
  }
}
@media (min-width: 18em) {
  .mars--welcome__message .text {
    margin-bottom: 12px;
  }
}
@media (min-width: 60em) {
  .mars--welcome__message .text {
    margin-bottom: 24px;
  }
}
.mars--confirmation {
  width: 100%;
  height: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  font-family: "torqueweb-light";
}
.mars--buttons {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
.mars--confirmation__box {
  width: 100%;
  display: -moz-flex;
  display: flex;
  background: #CBCBCB;
  background: linear-gradient(135deg, transparent 8px, #CBCBCB 0) top left, linear-gradient(225deg, transparent 8px, #CBCBCB 0) top right, linear-gradient(315deg, transparent 8px, #CBCBCB 0) bottom right, linear-gradient(45deg, transparent 8px, #CBCBCB 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 1px;
}
@media (min-width: 18em) {
  .mars--confirmation__box {
    max-width: 75%;
    margin-top: 48px;
  }
}
@media (min-width: 60em) {
  .mars--confirmation__box {
    max-width: 600px;
    margin-top: 0;
  }
}
.mars--confirmation__canvas {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 8px, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, transparent 8px, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 8px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, transparent 8px, rgb(255, 255, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 24px;
  text-align: center;
}
@media (min-width: 18em) {
  .mars--confirmation__canvas .text {
    font-size: 1.5rem;
    max-width: 100%;
    margin-bottom: 12px;
  }
}
@media (min-width: 60em) {
  .mars--confirmation__canvas .text {
    font-size: 1.75rem;
    max-width: 95%;
  }
}
.mars--confirmation__canvas p:nth-child(2) {
  font-size: 1.25rem;
  line-height: 1.45rem;
}
@media (min-width: 18em) {
  .mars--confirmation__canvas p:nth-child(2) {
    max-width: 95%;
  }
}
@media (min-width: 60em) {
  .mars--confirmation__canvas p:nth-child(2) {
    max-width: 75%;
  }
}
.mars--confirmation__canvas .link {
  cursor: pointer;
  margin-top: 12px;
  color: #44505B;
  margin-bottom: 0;
}
@media (min-width: 18em) {
  .mars--confirmation__canvas .link {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mars--confirmation__canvas .link {
    font-size: 1.25rem;
  }
}
.mars--last__colognes {
  width: 100%;
  text-align: center;
}
.mars--button__position {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
@media (min-width: 18em) {
  .mars--button__position {
    bottom: 6px;
  }
}
@media (min-width: 60em) {
  .mars--button__position {
    bottom: 18px;
  }
}
/*------------------------------------*\
    $PANELS DE PÁGINA
\*------------------------------------*/
/*
* Esto contiene los estilos para los panels game.
*/
.panels {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .panels {
    width: calc(100% - 12px);
    left: 6px;
  }
}
@media (min-width: 60em) {
  .panels {
    width: auto;
    left: 40px;
  }
}
@keyframes icon-mail-animation {
  0% {
    opacity: 0.3;
    top: -100px;
  }
  50% {
    opacity: 0.6;
    top: 0;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
.notification {
  transition: 3s;
  animation-name: icon-mail-animation;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  -o-animation-name: icon-mail-animation;
  -o-animation-duration: 2s;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: ease-in-out;
  -o-animation-direction: normal;
  -moz-animation-name: icon-mail-animation;
  -moz-animation-duration: 2s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-direction: normal;
  -webkit-animation-name: icon-mail-animation;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: normal;
  animation-delay: 1;
  -o-animation-delay: 1;
  -moz-animation-delay: 1;
  -webkit-animation-delay: 1;
  color: #891593;
}
.notification.reward {
  color: rgb(255, 255, 255);
  font-size: 0.75rem !important;
}
.panels--box {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  background: #fff5e8;
  background: linear-gradient(135deg, transparent 6px, #fff5e8 0) top left, linear-gradient(225deg, transparent 6px, #fff5e8 0) top right, linear-gradient(315deg, transparent 6px, #fff5e8 0) bottom right, linear-gradient(45deg, transparent 6px, #fff5e8 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .panels--box {
    min-height: 0;
  }
}
@media (min-width: 60em) {
  .panels--box {
    min-height: 400px;
  }
}
@media (min-width: 18em) {
  .panels--box.contextual {
    max-width: 275px;
    min-height: 0 !important;
  }
}
@media (min-width: 60em) {
  .panels--box.contextual {
    max-width: 100%;
  }
}
.panels--box.contextual .panels--box {
  min-height: 0;
}
.panels--box.active .panels--header {
  background: #6aa84f;
  background: linear-gradient(135deg, transparent 6px, #6aa84f 0) top left, linear-gradient(225deg, transparent 6px, #6aa84f 0) top right, linear-gradient(315deg, transparent 0px, #6aa84f 0) bottom right, linear-gradient(45deg, transparent 0px, #6aa84f 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.panels--box.active .list--panel {
  background-color: rgba(44, 231, 168, 0.1);
}
.panels--box.active .btn--orange {
  min-width: 85px;
  position: relative;
  display: -moz-inline-flex;
  display: inline-flex;
  -moz-align-items: center;
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid #6aa84f;
  border-radius: 4px;
  font-family: torqueweb-medium;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: #6aa84f;
  cursor: pointer;
  margin: 0 6px;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .panels--box.active .btn--orange {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .panels--box.active .btn--orange {
    padding: 12px;
    font-size: 1.25rem;
  }
}
.panels--box.active .btn--orange [class^=icon-],
.panels--box.active .btn--orange [class*=" icon-"] {
  padding-right: 24px;
}
.panels--box.active .btn--orange [class^=icon-]:after,
.panels--box.active .btn--orange [class*=" icon-"]:after {
  content: "";
  border-right: 1px dashed #6aa84f;
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  transform: rotate(10deg);
}
@media (min-width: 18em) {
  .panels--box.active .btn--orange [class^=icon-]:after,
  .panels--box.active .btn--orange [class*=" icon-"]:after {
    left: 35px;
  }
}
@media (min-width: 60em) {
  .panels--box.active .btn--orange [class^=icon-]:after,
  .panels--box.active .btn--orange [class*=" icon-"]:after {
    left: 44px;
  }
}
@media (min-width: 60em) {
  .panels--box.active .btn--orange [class^=icon-]:after,
  .panels--box.active .btn--orange [class*=" icon-"]:after {
    left: 50px;
  }
}
.panels--box.void .list--panel {
  max-width: 100%;
  min-height: 250px;
}
.panels--box.void .list--panel .list--panel__item {
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
.panels--box.void .list--panel .list--panel__item:hover {
  background-color: transparent;
  color: #737C84;
}
.panels--box.void .list--panel .list--panel__item [class^=icon-],
.panels--box.void .list--panel .list--panel__item [class*=icon-] {
  font-size: 1.5rem;
  padding-bottom: 6px;
}
.panels--header {
  position: relative;
  width: 100%;
  min-height: 50px;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  background: #F17824;
  background: linear-gradient(135deg, transparent 6px, #F17824 0) top left, linear-gradient(225deg, transparent 6px, #F17824 0) top right, linear-gradient(315deg, transparent 0px, #F17824 0) bottom right, linear-gradient(45deg, transparent 0px, #F17824 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  color: rgb(255, 255, 255);
  font-family: "torqueweb-medium";
  text-transform: uppercase;
}
.panels--header [class^=icon-],
.panels--header [class*=icon-] {
  font-size: 1.5rem;
  padding: 0 6px;
  cursor: pointer;
}
.panels--header .switch {
  margin: 0 12px;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.panels--header .switch label {
  background-color: rgb(255, 255, 255);
}
.panels--header .switch label:before {
  background-color: #F17824;
  border: 1px solid #F17824;
  opacity: 0.5;
  display: block;
}
.panels--header .switch .input--switch:checked + label {
  background-color: rgb(255, 255, 255);
}
.panels--header .switch .input--switch:checked + label:before {
  background-color: #6aa84f;
  opacity: 0.8;
}
.panels--header .icon-cross {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translate(0%, -50%);
  cursor: pointer;
}
.panels--header__block {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
.panels--body {
  width: 100%;
  display: -moz-flex;
  display: flex;
  color: #737C84;
  font-family: "torqueweb-medium";
  text-transform: uppercase;
  letter-spacing: 1px;
}
@media (min-width: 18em) {
  .panels--body {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .panels--body {
    font-size: 1.25rem;
  }
}
.panel--context {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .panel--context {
    max-width: 350px;
    padding-bottom: 6px;
  }
}
@media (min-width: 60em) {
  .panel--context {
    max-width: 350px;
    min-width: 350px;
    padding-bottom: 12px;
  }
}
.panel--context .list--panel__info {
  padding: 12px 0;
}
.panel--context .list--panel__info .column.single {
  border: none;
}
.panel--context__header {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  border-bottom: 1px dotted #737C84;
}
@media (min-width: 18em) {
  .panel--context__header {
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .panel--context__header {
    padding: 12px 6px;
  }
}
.panel--context__header .icon-cross {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translate(0%, -50%);
  cursor: pointer;
}
.panel--context__header [class^=icon-],
.panel--context__header [class*=icon-] {
  padding: 0 6px;
}
.panel--tabs {
  width: 100%;
  display: -moz-flex;
  display: flex;
}
.panel--tabs__item {
  width: 100%;
  background-color: rgb(255, 255, 255);
  text-align: center;
  font-family: "torqueweb-light";
  cursor: pointer;
}
@media (min-width: 18em) {
  .panel--tabs__item {
    font-size: 0.75rem;
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .panel--tabs__item {
    font-size: 1rem;
    padding: 8px;
  }
}
.panel--tabs__item.active {
  border-bottom: 3px solid #F17824;
}
.panel--tabs__container {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  border-bottom: 1px dotted #737C84;
}
@media (min-width: 18em) {
  .panel--tabs__container {
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .panel--tabs__container {
    padding: 12px;
    margin-bottom: 12px;
  }
}
.panel--tabs__container .panel--background {
  margin: 0;
}
.panel--tabs__container .btn, .panel--tabs__container input[type=file] + label {
  width: 35px;
  height: 35px;
  font-size: 1.25rem;
}
.panel--context__info {
  width: 100%;
  padding: 0 0 0 12px;
}
@media (min-width: 18em) {
  .panel--context__info {
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .panel--context__info {
    font-size: 1rem;
  }
}
.panel--content {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
}
.panel--content:first-child {
  border-bottom: 1px dotted #737C84;
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.panel--content.noborder {
  border-bottom: none;
}
.panel--content__text {
  font-family: "torqueweb-light";
  padding: 6px;
}
.list--panel {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-flex-grow: 1;
  flex-grow: 1;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .list--panel {
    max-width: 50%;
  }
}
@media (min-width: 60em) {
  .list--panel {
    max-width: 350px;
    min-width: 350px;
  }
}
.list--panel__item {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-grow: 1;
  flex-grow: 1;
  border-bottom: 1px dotted #737C84;
  cursor: pointer;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .list--panel__item {
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .list--panel__item {
    padding: 12px;
  }
}
.list--panel__item:last-child {
  border-bottom: none;
}
.list--panel__item.active {
  background-color: rgb(255, 255, 255);
  color: #44505B;
}
.list--panel__item:hover {
  background-color: rgb(255, 255, 255);
  color: #44505B;
}
.list--panel__item .level {
  font-size: 0.75rem;
}
@media (min-width: 60em) {
  .list--panel__item .btn--orange [class^=icon-]:after,
  .list--panel__item .btn--orange [class*=" icon-"]:after {
    left: 50px;
  }
}
.panel--text {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-grow: 1;
  flex-grow: 1;
}
.panel--text [class^=icon-],
.panel--text [class*=icon-] {
  padding-right: 6px;
}
@media (min-width: 60em) {
  .panel--text [class^=icon-],
  .panel--text [class*=icon-] {
    font-size: 1.5rem;
  }
}
.panel--text .win {
  display: block;
  line-height: 0.75rem;
  font-size: 0.75rem;
  text-transform: none;
}
.list--panel__submenu {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 0, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, transparent 0, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 6px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, transparent 0, rgb(255, 255, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  color: #44505B;
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .list--panel__submenu {
    padding: 12px;
    max-width: 50%;
  }
}
@media (min-width: 60em) {
  .list--panel__submenu {
    padding: 24px;
    max-width: 350px;
    min-width: 350px;
  }
}
.panel--background {
  width: 100%;
  background: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/mountain.png") no-repeat;
  background-size: contain;
  background-position: center;
  min-height: 100px;
}
@media (min-width: 18em) {
  .panel--background {
    margin-bottom: 12px;
  }
}
@media (min-width: 60em) {
  .panel--background {
    margin-bottom: 24px;
  }
}
.list--panel__info {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .list--panel__info {
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .list--panel__info {
    font-size: 1rem;
    padding: 12px 0;
  }
}
.list--panel__info .column {
  width: 100%;
  text-align: center;
  text-transform: none;
}
.list--panel__info .column:first-child {
  border-right: 1px dotted #737C84;
}
@media (min-width: 18em) {
  .list--panel__info .column:first-child {
    padding-right: 6px;
    margin-right: 6px;
  }
}
@media (min-width: 60em) {
  .list--panel__info .column:first-child {
    padding-right: 12px;
    margin-right: 12px;
  }
}
.list--panel__info .column .text {
  font-family: "torqueweb-light";
  color: #737C84;
}
.list--panel__info .column .value {
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .list--panel__info .column .value {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .list--panel__info .column .value {
    font-size: 1.5rem;
  }
}
.panel--challenge {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  padding: 6px 0;
}
.panel--challenge .shield--canvas__texture {
  position: static;
  background-color: transparent;
}
.panel--challenge__text {
  font-size: 1rem;
  line-height: 1rem;
}
.panel--challenge__text li {
  text-transform: lowercase;
}
.panel--challenge__text li:first-child {
  color: #44505B;
  text-transform: uppercase;
}
.panel--challenge__text li:last-child {
  font-family: "torqueweb-book";
  color: #737C84;
}
.panel--right {
  right: 40px;
  float: right;
  left: auto;
}
/*------------------------------------*\
    $COUNTER
\*------------------------------------*/
/*
* Esto contiene los estilos para el contador.
*/
.counter--position {
  position: absolute;
  top: -1px;
  z-index: 1;
}
@media (min-width: 18em) {
  .counter--position {
    right: 45px;
  }
}
@media (min-width: 60em) {
  .counter--position {
    right: 65px;
  }
}
.counter--border {
  background: #737C84;
  background: linear-gradient(135deg, transparent 0, #737C84 0) top left, linear-gradient(225deg, transparent 0, #737C84 0) top right, linear-gradient(315deg, transparent 3px, #737C84 0) bottom right, linear-gradient(45deg, transparent 3px, #737C84 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 1px;
}
.counter {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  color: #737C84;
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 0, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, transparent 0, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 3px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, transparent 3px, rgb(255, 255, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.counter--block {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: flex-start;
  align-items: flex-start;
  -moz-flex-direction: column;
  flex-direction: column;
  border-left: 1px dashed #CBCBCB;
  border-right: 1px dashed #CBCBCB;
}
@media (min-width: 18em) {
  .counter--block {
    padding: 6px 3px;
  }
}
@media (min-width: 60em) {
  .counter--block {
    padding: 6px 12px;
  }
}
.counter--block.last--time {
  background: #D52125;
  color: rgb(255, 255, 255);
}
.counter--title {
  font-family: "torqueweb-medium";
  padding-bottom: 4px;
}
@media (min-width: 18em) {
  .counter--title {
    font-size: 0.45rem;
  }
}
@media (min-width: 60em) {
  .counter--title {
    font-size: 0.75rem;
  }
}
.counter--item {
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .counter--item {
    font-size: 0.75rem;
    min-width: 0;
  }
}
@media (min-width: 60em) {
  .counter--item {
    font-size: 1.25rem;
    min-width: 110px;
  }
}
.counter--turn {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
}
@media (min-width: 18em) {
  .counter--turn {
    padding: 6px 3px;
    font-size: 0.75rem;
    line-height: 0.75rem;
  }
}
@media (min-width: 60em) {
  .counter--turn {
    padding: 12px 12px;
    font-size: 0.95rem;
    line-height: 0.95rem;
  }
}
/*------------------------------------*\
    $ZOOM
\*------------------------------------*/
/*
* Esto contiene los estilos para el zoom.
*/
.zoom {
  background-color: rgba(0, 0, 0, 0.5);
  color: rgb(255, 255, 255);
  border-radius: 5px;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  padding: 6px 0;
  position: absolute;
}
@media (min-width: 18em) {
  .zoom {
    width: 30px;
    min-height: 25vh;
    top: calc(50% - 18vh);
    right: 6px;
    font-size: 1.5rem;
  }
}
@media (min-width: 60em) {
  .zoom {
    width: 40px;
    min-height: 16vh;
    top: calc(50% - 8vh);
    right: 6px;
    font-size: 1.75rem;
  }
}
@media (min-width: 18em) {
  .frame .zoom {
    right: 16px;
  }
}
@media (min-width: 60em) {
  .frame .zoom {
    right: 24px;
  }
}
.zoom [class^=icon-],
.zoom [class*=" icon-"] {
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.zoom [class^=icon-]:hover,
.zoom [class*=" icon-"]:hover {
  text-shadow: 0 0 2px rgb(255, 255, 255);
}
.zoom:before {
  content: "";
  height: calc(100% - 70px);
  width: 1px;
  border-left: 1px dashed rgb(255, 255, 255);
  position: absolute;
  top: 33px;
  left: 50%;
  opacity: 0.6;
}
.zoom .zoom--nivel {
  cursor: pointer;
}
.zoom .zoom--nivel:first-child {
  opacity: 0.6;
}
.zoom .zoom--nivel:nth-child(2) {
  opacity: 1;
}
.zoom.active .zoom--nivel:first-child {
  opacity: 1;
}
.zoom.active .zoom--nivel:nth-child(2) {
  opacity: 0.6;
}
.zoom.active:before {
  opacity: 1;
}
.zoom--centered {
  background-color: rgba(0, 0, 0, 0.5);
  color: rgb(255, 255, 255);
  border-radius: 5px;
  cursor: pointer;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
}
@media (min-width: 18em) {
  .zoom--centered {
    width: 30px;
    height: 30px;
    font-size: 1.5rem;
  }
}
@media (min-width: 60em) {
  .zoom--centered {
    width: 40px;
    height: 40px;
  }
}
/*------------------------------------*\
    $END SESSION
\*------------------------------------*/
/*
* Esto contiene los estilos para el fin de sesión.
*/
.endsession {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  background-color: rgb(255, 255, 255);
  border-radius: 6px;
  box-shadow: 0 0 2px #737C84;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
.endsession--title {
  color: #F17824;
  font-family: "torqueweb-medium";
  text-transform: uppercase;
  letter-spacing: 2px;
}
@media (min-width: 18em) {
  .endsession--title {
    font-size: 1.5rem;
    margin-bottom: 16px;
  }
}
@media (min-width: 60em) {
  .endsession--title {
    font-size: 2.5rem;
    margin-bottom: 32px;
  }
}
.endsession--hour {
  color: #44505B;
  font-family: "torqueweb-book";
  letter-spacing: 2px;
}
@media (min-width: 18em) {
  .endsession--hour {
    font-size: 1.5rem;
    margin-bottom: 16px;
  }
}
@media (min-width: 60em) {
  .endsession--hour {
    font-size: 2.5rem;
    margin-bottom: 32px;
  }
}
.endsession--text {
  color: #44505B;
  font-family: "torqueweb-book";
  text-align: center;
}
@media (min-width: 18em) {
  .endsession--text {
    font-size: 1rem;
    margin-bottom: 32px;
  }
}
@media (min-width: 60em) {
  .endsession--text {
    font-size: 1.25rem;
    margin-bottom: 64px;
  }
}
/*------------------------------------*\
    $DOCUMENTS GAME
\*------------------------------------*/
/*
* Esto contiene los estilos para los documentos del juego.
*/
.documents--layer {
  padding: 0 3%;
}
.documents {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .documents {
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    padding-bottom: 24px;
  }
}
@media (min-width: 60em) {
  .documents {
    -moz-justify-content: center;
    justify-content: center;
    padding-bottom: 0;
  }
}
.documents--title {
  width: 100%;
  border-bottom: 1px dotted #737C84;
  color: #44505B;
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .documents--title {
    font-size: 1rem;
    padding: 12px 0;
  }
}
@media (min-width: 60em) {
  .documents--title {
    font-size: 1.5rem;
    padding: 24px 0;
  }
}
@media (min-width: 18em) {
  .documents--title .text {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 100%;
    display: block;
  }
}
@media (min-width: 60em) {
  .documents--title .text {
    margin-left: auto;
    margin-right: auto;
    max-width: 50%;
    width: 100%;
    display: block;
  }
}
.documents--folder {
  width: 100%;
  display: -moz-flex;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}
@media (min-width: 18em) {
  .documents--folder {
    max-height: 42vh;
  }
}
@media (min-width: 60em) {
  .documents--folder {
    max-height: 52vh;
  }
}
.documents--folder__item {
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -moz-align-items: center;
  align-items: center;
  color: rgb(0, 0, 0);
  cursor: pointer;
}
@media (min-width: 18em) {
  .documents--folder__item {
    width: 25%;
    font-size: 0.75rem;
    padding: 12px;
  }
}
@media (min-width: 60em) {
  .documents--folder__item {
    width: 20%;
    font-size: 1.25rem;
    padding: 24px;
  }
}
.documents--folder__item [class^=icon-],
.documents--folder__item [class*=" icon-"] {
  color: #44505B;
}
@media (min-width: 18em) {
  .documents--folder__item [class^=icon-],
  .documents--folder__item [class*=" icon-"] {
    font-size: 2.5rem;
  }
}
@media (min-width: 60em) {
  .documents--folder__item [class^=icon-],
  .documents--folder__item [class*=" icon-"] {
    font-size: 4.55rem;
  }
}
.documents--folder__item .name {
  padding-top: 12px;
}
.documents--subtitle {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  border-bottom: 1px dotted #44505B;
}
@media (min-width: 18em) {
  .documents--subtitle {
    font-size: 0.75rem;
    padding: 6px 0;
  }
}
@media (min-width: 60em) {
  .documents--subtitle {
    font-size: 1.25rem;
    padding: 12px 0;
  }
}
.documents--subtitle .file--name {
  padding-left: 12px;
}
.documents--subtitle .btn--back {
  background-color: rgb(255, 255, 255);
  border-color: #44505B;
  color: #44505B;
}
/*------------------------------------*\
    $SEARCH
\*------------------------------------*/
/*
* Esto contiene los estilos para el buscador del juego
*/
.search--game {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  color: rgb(255, 255, 255);
}
@media (min-width: 18em) {
  .search--game {
    margin: 6px 0;
  }
}
@media (min-width: 60em) {
  .search--game {
    margin: 12px 0;
  }
}
.search--game .icon-search {
  font-size: 1.75rem;
  cursor: pointer;
}
.search--game .input--search {
  font-family: "torqueweb-book";
  width: 100%;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 36px;
  background: #CBCBCB;
  outline: 0;
  margin: 0;
  color: rgb(255, 255, 255);
  text-align: center;
}
@media (min-width: 18em) {
  .search--game .input--search {
    padding: 6px 12px;
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .search--game .input--search {
    padding: 12px;
    font-size: 1.25rem;
  }
}
.search--game input::-moz-input-placeholder {
  color: rgb(255, 255, 255);
}
@media (min-width: 18em) {
  .search--game input::-moz-input-placeholder {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .search--game input::-moz-input-placeholder {
    font-size: 1.25rem;
  }
}
.search--game input::-ms-input-placeholder {
  color: rgb(255, 255, 255);
}
@media (min-width: 18em) {
  .search--game input::-ms-input-placeholder {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .search--game input::-ms-input-placeholder {
    font-size: 1.25rem;
  }
}
.search--game input::-webkit-input-placeholder {
  color: rgb(255, 255, 255);
}
@media (min-width: 18em) {
  .search--game input::-webkit-input-placeholder {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .search--game input::-webkit-input-placeholder {
    font-size: 1.25rem;
  }
}
/*------------------------------------*\
    $MAP
\*------------------------------------*/
/*
* Esto contiene los estilos para el mapa del juego.
*/
.map--perspective__view {
  perspective: 1000px;
  height: 100%;
  width: 100%;
  background: url("/assets/maps/ter.png");
  background-size: 810px;
}
.map--perspective__view > .map--perspective__background {
  width: 500%;
  height: 500%;
  top: -150%;
  left: -80%;
  transform: rotateX(45deg);
  position: absolute;
  background: url("/assets/maps/ter.png");
  background-size: 810px;
}
.map--debug,
.map--std__text,
.map--zoom {
  position: absolute;
  text-align: left;
  background-color: white;
}
.map--debug {
  top: auto;
  left: 0;
  bottom: 0;
}
.map--zoom {
  top: 0;
  right: 0;
}
.canvas--view {
  cursor: pointer;
}
.map {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  background: #F17824;
}
.map.collapse {
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.map.collapse .map--header {
  top: -100px;
}
.map.collapse .map--footer {
  bottom: -100px;
}
.map.collapse .map--picture {
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  top: 8px;
  left: 8px;
  transform: none;
}
.map.collapse .markers {
  top: -100px;
}
.map.collapse .markers--footer {
  bottom: -100px;
}
.map.collapse .markers--footer .markers {
  top: 100px;
}
.map .map--header {
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  top: 0;
}
.map .map--footer {
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  bottom: 0;
}
@media (min-width: 18em) {
  .map .mis--feed {
    display: none;
  }
}
@media (min-width: 60em) {
  .map .mis--feed {
    display: -moz-flex;
    display: flex;
  }
}
.map--block {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  background: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/Fase2_BK_1.png") no-repeat center top;
}
@media (min-width: 18em) {
  .map--block {
    padding: 0 24px;
    font-size: 0.75rem;
    height: 75px;
  }
}
@media (min-width: 60em) {
  .map--block {
    padding: 8px 32px;
    font-size: 1rem;
    height: 100px;
  }
}
.map--block.map--header {
  position: absolute;
  left: 0;
  top: 0;
}
.map--block.map--footer {
  position: absolute;
  left: 0;
  bottom: 0;
}
.map--block .shield--canvas__texture {
  padding: 0;
  position: static;
  background: none;
}
.map--block__info {
  width: 100%;
}
.map--block__info .text {
  display: block;
  color: rgb(255, 255, 255);
}
.map--block__info .text.username {
  font-family: "torqueweb-medium";
  text-transform: uppercase;
  padding-top: 3px;
}
.map--block__info .num {
  display: block;
  color: rgb(255, 255, 255);
  font-family: "torqueweb-medium";
  font-size: 0.75rem;
  line-height: 0;
  font-weight: bold;
  padding-top: 3px;
}
.map--block__info .num [class^=icon-],
.map--block__info .num [class*=icon-] {
  padding-right: 6px;
}
.map--picture {
  position: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 6px solid rgba(226, 48, 48, 0.8);
  pointer-events: none;
}
@media (min-width: 18em) {
  .map--picture {
    width: 98%;
    height: calc(100% - 170px);
  }
}
@media (min-width: 60em) {
  .map--picture {
    width: calc(98.5% - 40px);
    height: calc(100% - 230px);
    left: calc(50% + 20px);
  }
}
.map--picture:before {
  content: "";
  width: 50px;
  height: 50px;
  border-top: 3px solid rgba(255, 245, 232, 0.8);
  border-left: 3px solid rgba(255, 245, 232, 0.8);
  position: absolute;
  left: -12px;
  top: -12px;
}
.map--picture:after {
  content: "";
  width: 50px;
  height: 50px;
  border-top: 3px solid rgba(255, 245, 232, 0.8);
  border-right: 3px solid rgba(255, 245, 232, 0.8);
  position: absolute;
  right: -12px;
  top: -12px;
}
.map--picture__borders:before {
  content: "";
  width: 50px;
  height: 50px;
  border-bottom: 3px solid rgba(255, 245, 232, 0.8);
  border-left: 3px solid rgba(255, 245, 232, 0.8);
  position: absolute;
  left: -12px;
  bottom: -12px;
  display: block;
}
.map--picture__borders:after {
  content: "";
  width: 50px;
  height: 50px;
  border-bottom: 3px solid rgba(255, 245, 232, 0.8);
  border-right: 3px solid rgba(255, 245, 232, 0.8);
  position: absolute;
  right: -12px;
  bottom: -12px;
  display: block;
}
.map--buttons {
  position: absolute;
  bottom: 104px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
}
@media (min-width: 18em) {
  .map--buttons {
    bottom: 76px;
  }
}
@media (min-width: 60em) {
  .map--buttons {
    bottom: 104px;
  }
}
/*------------------------------------*\
    $MIS
\*------------------------------------*/
/*
* Esto contiene los estilos para el componente M.I.S.
*/
.mis {
  width: 100%;
  height: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
}
.mis .shield--canvas__texture {
  background-color: transparent;
  position: static;
}
@media (min-width: 18em) {
  .mis .shield--canvas__texture {
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .mis .shield--canvas__texture {
    padding: 8px;
  }
}
.mis--header {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .mis--header {
    padding: 8px 24px;
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mis--header {
    padding: 12px 24px;
    font-size: 1.25rem;
    min-height: 120px;
  }
}
.mis--header__info .text {
  display: block;
  color: rgb(255, 255, 255);
}
.mis--header__info .text.username {
  font-family: "torqueweb-medium";
  text-transform: uppercase;
  padding-top: 3px;
}
.mis--header__info .num {
  display: block;
  color: rgb(255, 255, 255);
  font-family: "torqueweb-medium";
  font-size: 0.75rem;
  line-height: 0;
  font-weight: bold;
  padding-top: 3px;
}
.mis--header__info .num [class^=icon-],
.mis--header__info .num [class*=icon-] {
  padding-right: 6px;
}
.mis--header__position {
  font-family: "torqueweb-medium";
  color: rgb(255, 255, 255);
  text-align: center;
  border-left: 1px dashed rgb(255, 255, 255);
}
@media (min-width: 18em) {
  .mis--header__position {
    padding-left: 12px;
    margin-left: 12px;
  }
}
@media (min-width: 60em) {
  .mis--header__position {
    padding-left: 24px;
    margin-left: 24px;
  }
}
@media (min-width: 18em) {
  .mis--header__position .text--position {
    font-size: 1.5rem;
  }
}
@media (min-width: 60em) {
  .mis--header__position .text--position {
    font-size: 2.5rem;
  }
}
.mis--gradient, .mis--item.active, .mis--challenge__confirmation, .mis--profile, .mis--body {
  background-image: linear-gradient(90deg, rgba(203, 203, 203, 0.8), rgba(203, 203, 203, 0.8) 1px, rgba(240, 238, 239, 0.5) 1px, rgba(240, 238, 239, 0.5) 2px, rgba(203, 203, 203, 0.8) 2px);
  background-image: -webkit-linear-gradient(90deg, rgba(203, 203, 203, 0.8), rgba(203, 203, 203, 0.8) 1px, rgba(240, 238, 239, 0.5) 1px, rgba(240, 238, 239, 0.5) 2px, rgba(203, 203, 203, 0.8) 2px);
  background-repeat: repeat;
  background-size: 1px 2px;
}
.mis--body {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: -moz-flex;
  display: flex;
  -moz-align-items: flex-start;
  align-items: flex-start;
  -moz-flex-grow: 1;
  flex-grow: 1;
  box-shadow: inset 0 0 48px rgb(255, 255, 255);
}
.mis--content {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
}
@media (min-width: 18em) {
  .mis--content {
    margin: 0 6px 0 48px;
  }
}
@media (min-width: 60em) {
  .mis--content {
    margin: 0 6px 0 48px;
  }
}
.mis--challenge__confirmation, .mis--profile {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-flex-grow: 1;
  flex-grow: 1;
  box-shadow: inset 0 0 48px rgb(255, 255, 255);
}
.mis--challenge__confirmation .h1, .mis--profile .h1 {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  font-family: "torqueweb-medium";
  color: #F17824;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 6px;
}
@media (min-width: 18em) {
  .mis--challenge__confirmation .h1, .mis--profile .h1 {
    font-size: 1.5rem;
    padding: 6px 0;
  }
}
@media (min-width: 60em) {
  .mis--challenge__confirmation .h1, .mis--profile .h1 {
    font-size: 2.5rem;
    padding: 16px 0;
  }
}
.mis--challenge__confirmation [class^=icon-], .mis--profile [class^=icon-],
.mis--challenge__confirmation [class*=icon-],
.mis--profile [class*=icon-] {
  padding: 0 18px;
}
.mis--challenge__confirmation [class^=icon-]:first-child, .mis--profile [class^=icon-]:first-child,
.mis--challenge__confirmation [class*=icon-]:first-child,
.mis--profile [class*=icon-]:first-child {
  transform: rotateY(180deg);
}
.mis--challenge__confirmation [class^=icon-]:last-child, .mis--profile [class^=icon-]:last-child,
.mis--challenge__confirmation [class*=icon-]:last-child,
.mis--profile [class*=icon-]:last-child {
  padding: 0 12px;
}
.mis--challenge__info {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-flex-grow: 1;
  flex-grow: 1;
  background-color: rgba(241.25, 241.25, 241.25, 0.8);
  border-radius: 4.5px;
}
@media (min-width: 18em) {
  .mis--challenge__info {
    width: 100%;
    padding: 0;
  }
}
@media (min-width: 60em) {
  .mis--challenge__info {
    width: 98%;
    margin-bottom: 12px;
    padding: 24px;
  }
}
.mis--challenge__info .title {
  color: #737C84;
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .mis--challenge__info .title {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mis--challenge__info .title {
    font-size: 1.5rem;
  }
}
.mis--challenge__info .shield--canvas__texture {
  padding: 0;
  position: static;
  background: none;
}
@media (min-width: 18em) {
  .mis--challenge__info .shield {
    width: 75px;
    height: 75px;
  }
}
@media (min-width: 60em) {
  .mis--challenge__info .shield {
    width: 150px;
    height: 150px;
  }
}
@media (min-width: 18em) {
  .mis--challenge__info .shield--item {
    width: 75px;
    height: 75px;
    background-size: 75px 75px;
  }
}
@media (min-width: 60em) {
  .mis--challenge__info .shield--item {
    width: 150px;
    height: 150px;
    background-size: 150px 150px;
  }
}
@media (min-width: 18em) {
  .mis--challenge__info .shield--icon {
    font-size: 1.925rem;
  }
}
@media (min-width: 60em) {
  .mis--challenge__info .shield--icon {
    font-size: 3.5rem;
  }
}
@media (min-width: 18em) {
  .mis--challenge__info .shield--background {
    font-size: 3.85rem;
  }
}
@media (min-width: 60em) {
  .mis--challenge__info .shield--background {
    font-size: 7.7rem;
  }
}
@media (min-width: 18em) {
  .mis--profile {
    font-size: 0.75rem;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
  }
}
@media (min-width: 60em) {
  .mis--profile {
    font-size: 1.25rem;
    -moz-justify-content: center;
    justify-content: center;
  }
}
.mis--profile__table {
  width: 100%;
  max-width: 90%;
  background-color: rgba(203, 203, 203, 0.6);
  border: 1px solid rgb(255, 255, 255);
  border-radius: 3px;
}
@media (min-width: 18em) {
  .mis--profile__table {
    margin-top: 12px;
  }
}
@media (min-width: 60em) {
  .mis--profile__table {
    margin-top: 0;
  }
}
.mis--profile__header {
  position: relative;
  width: 100%;
  color: #F17824;
  text-transform: uppercase;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5);
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .mis--profile__header {
    padding: 8px;
  }
}
@media (min-width: 60em) {
  .mis--profile__header {
    padding: 12px;
  }
}
.mis--profile__header .num {
  width: 25px;
  height: 25px;
  background: #279FDC;
  background: linear-gradient(135deg, transparent 6px, #279FDC 0) top left, linear-gradient(225deg, transparent 6px, #279FDC 0) top right, linear-gradient(315deg, transparent 6px, #279FDC 0) bottom right, linear-gradient(45deg, transparent 6px, #279FDC 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  color: rgb(255, 255, 255);
  line-height: 0;
  position: absolute;
  left: 55%;
  top: -12px;
}
.mis--profile__body {
  overflow: auto;
}
@media (min-width: 18em) {
  .mis--profile__body {
    padding: 0 8px;
    max-height: 60vh;
  }
}
@media (min-width: 60em) {
  .mis--profile__body {
    padding: 0 12px;
    max-height: 65vh;
  }
}
.mis--profile__body.void {
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  color: #737C84;
  padding: 5%;
  text-align: center;
}
.mis--profile__row {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  border-bottom: 1px dotted rgb(255, 255, 255);
  font-family: "torqueweb-medium";
  font-weight: normal;
  color: #737C84;
}
@media (min-width: 18em) {
  .mis--profile__row {
    padding: 8px 12px;
  }
}
@media (min-width: 60em) {
  .mis--profile__row {
    padding: 16px 24px;
  }
}
.mis--profile__row:last-child {
  border: none;
}
.mis--profile__row b {
  text-transform: uppercase;
}
.mis--profile__row .text:last-child {
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .mis--profile__row .text:last-child {
    padding-top: 3px;
  }
}
@media (min-width: 60em) {
  .mis--profile__row .text:last-child {
    padding-top: 6px;
  }
}
.mis--profile__row .result {
  font-family: "torqueweb-book";
  text-transform: uppercase;
}
.mis--profile__info {
  position: relative;
}
.mis--profile__info.active:before {
  content: "";
  background: #279FDC;
  background: linear-gradient(135deg, transparent 3px, #279FDC 0) top left, linear-gradient(225deg, transparent 3px, #279FDC 0) top right, linear-gradient(315deg, transparent 3px, #279FDC 0) bottom right, linear-gradient(45deg, transparent 3px, #279FDC 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  position: absolute;
}
@media (min-width: 18em) {
  .mis--profile__info.active:before {
    width: 8px;
    height: 8px;
    left: -12px;
    top: calc(50% - 4px);
  }
}
@media (min-width: 60em) {
  .mis--profile__info.active:before {
    width: 12px;
    height: 12px;
    left: -24px;
    top: calc(50% - 6px);
  }
}
.mis--profile__footer {
  width: 100%;
  background-color: #cdd1d9;
  border-top: 1px solid rgb(255, 255, 255);
  color: #44505B;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 0;
}
@media (min-width: 18em) {
  .mis--profile__footer {
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .mis--profile__footer {
    padding: 12px;
  }
}
.mis--players {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  color: #44505B;
}
@media (min-width: 18em) {
  .mis--players {
    padding: 2% 0;
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mis--players {
    padding: 2% 0;
    font-size: 1.25rem;
  }
}
.mis--players__item {
  position: relative;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
}
.mis--players__item:first-child {
  text-align: right;
  z-index: 4;
}
@media (min-width: 18em) {
  .mis--players__item:first-child {
    right: -18px;
  }
}
@media (min-width: 60em) {
  .mis--players__item:first-child {
    right: -32px;
  }
}
@media (min-width: 18em) {
  .mis--players__item:last-child {
    left: -18px;
    margin-top: 24px;
  }
}
@media (min-width: 60em) {
  .mis--players__item:last-child {
    left: -32px;
    margin-top: 48px;
  }
}
.mis--players__item .data {
  padding: 0 12px;
}
@media (min-width: 60em) {
  .mis--players__item .data li:first-child {
    font-size: 1.5rem;
  }
}
.mis--players__item .data--name {
  font-family: "torqueweb-medium";
  text-transform: uppercase;
}
@media (min-width: 60em) {
  .mis--players__item .data--name {
    font-size: 2rem;
    padding: 6px 0;
    letter-spacing: 2px;
  }
}
.mis--challenges {
  color: #737C84;
  text-align: center;
}
@media (min-width: 18em) {
  .mis--challenges {
    width: 40px;
    padding-top: 32px;
  }
}
@media (min-width: 60em) {
  .mis--challenges {
    width: 60px;
  }
}
.mis--challenges .number {
  display: block;
}
.mis--feed {
  position: absolute;
  height: 100%;
  bottom: 0;
  right: calc(100% - 37px);
  z-index: 6;
  background-color: #44505B;
  border-radius: 3px 0 0 3px;
  padding: 6px 0 6px 6px;
  display: -moz-flex;
  display: flex;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .mis--feed {
    width: 100%;
  }
}
@media (min-width: 60em) {
  .mis--feed {
    width: 45%;
  }
}
@media (min-width: 18em) {
  .map .mis--feed {
    height: calc(100% - 150px);
    bottom: 75px;
  }
}
@media (min-width: 60em) {
  .map .mis--feed {
    height: calc(100% - 200px);
    bottom: 100px;
  }
}
@media (min-width: 18em) {
  .mis--feed.active {
    right: 0;
  }
}
@media (min-width: 60em) {
  .mis--feed.active {
    right: 55%;
  }
}
.mis--feed__button {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  flex-basis: 40px;
  cursor: pointer;
  color: rgb(255, 255, 255);
  font-family: "torqueweb-medium";
  letter-spacing: 4px;
  line-height: 0;
  text-transform: uppercase;
  padding-bottom: 12px;
}
.mis--feed__button [class^=icon-],
.mis--feed__button [class*=icon-] {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0;
  padding-bottom: 16px;
  text-align: center;
}
.mis--feed__button .vertical--text {
  writing-mode: vertical-lr;
  text-orientation: sideways;
}
.mis--feed__container {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
}
.mis--feed__container input {
  width: 100%;
  height: 40px;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 36px;
  color: #44505B;
  margin: 12px 0 6px;
  outline: 0;
  padding: 0 12px;
  font-size: 1.25rem;
  font-family: "torqueweb-light";
}
.mis--feed__layer {
  width: 100%;
  background-color: rgb(255, 255, 255);
  border-radius: 9px;
  padding: 12px;
  color: #737C84;
  font-family: "torqueweb-light";
  overflow: auto;
  -moz-flex-grow: 1;
  flex-grow: 1;
}
.mis--feed__item {
  width: calc(100% - 90px);
  display: -moz-flex;
  display: flex;
  -moz-align-items: flex-start;
  align-items: flex-start;
}
@media (min-width: 18em) {
  .mis--feed__item {
    font-size: 1rem;
    line-height: 1rem;
    padding-bottom: 12px;
  }
}
@media (min-width: 60em) {
  .mis--feed__item {
    font-size: 1.25rem;
    line-height: 1.25rem;
    padding-bottom: 24px;
  }
}
.mis--feed__item.important {
  color: rgb(0, 0, 0);
  font-family: "torqueweb-book";
  font-weight: bold;
}
.mis--feed__item [class^=icon-],
.mis--feed__item [class*=icon-] {
  padding-right: 12px;
}
.mis--feed__item .icon-send {
  color: #737C84;
  padding-left: 12px;
  cursor: pointer;
}
.mis--layer {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  overflow-y: auto;
  background-color: rgb(241.25, 241.25, 241.25);
  border-radius: 0 0 4.5px 4.5px;
}
@media (min-width: 18em) {
  .mis--layer {
    min-height: 55vh;
    max-height: 55vh;
    padding-top: 6px;
  }
}
@media (min-width: 60em) {
  .mis--layer {
    min-height: 70vh;
    max-height: 70vh;
    padding: 12px;
  }
}
.mis--item {
  position: relative;
  font-family: "torqueweb-light";
  color: #828282;
  z-index: 1;
}
@media (min-width: 18em) {
  .mis--item {
    width: 33.3%;
    padding: 8px;
  }
}
@media (min-width: 60em) {
  .mis--item {
    width: 25%;
    padding: 24px;
  }
}
.mis--item.active {
  border: 2px solid #F17824;
  border-radius: 6px;
  box-shadow: inset 0 0 24px rgb(255, 255, 255);
}
.mis--item.online .position:before {
  background: #6aa84f;
}
.mis--item__info {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
}
.mis--item__info:first-child {
  border-bottom: 1px solid rgb(255, 255, 255);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.mis--item__info .flag {
  cursor: pointer;
}
.mis--item__info .position {
  position: relative;
  font-weight: bold;
  padding-left: 12px;
}
@media (min-width: 18em) {
  .mis--item__info .position {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .mis--item__info .position {
    font-size: 1.75rem;
  }
}
.mis--item__info .position:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: #D52125;
  position: absolute;
  top: calc(50% - 3px);
  left: 0;
}
@media (min-width: 18em) {
  .mis--item__info .icons {
    font-size: 0.75rem;
  }
}
@media (min-width: 60em) {
  .mis--item__info .icons {
    font-size: 1rem;
  }
}
.mis--item__info .icons [class^=icon-],
.mis--item__info .icons [class*=icon-] {
  cursor: pointer;
  background-color: #f0eeef;
  border: 1px solid #737C84;
  border-radius: 3px;
  padding: 6px;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .mis--item__info .icons [class^=icon-],
  .mis--item__info .icons [class*=icon-] {
    margin-left: 3px;
  }
}
@media (min-width: 60em) {
  .mis--item__info .icons [class^=icon-],
  .mis--item__info .icons [class*=icon-] {
    margin-left: 12px;
  }
}
.mis--item__info .icons [class^=icon-]:hover,
.mis--item__info .icons [class*=icon-]:hover {
  opacity: 0.6;
}
.mis--item__info .icons .blocked {
  color: #D52125;
}
.mis--item__info .identity {
  width: 100%;
}
.mis--item__info .identity .text {
  text-align: left;
  display: block;
  padding: 2px 6px;
}
@media (min-width: 18em) {
  .mis--item__info .identity .text {
    font-size: 0.75rem;
    padding: 2px 0;
  }
}
@media (min-width: 60em) {
  .mis--item__info .identity .text {
    font-size: 1rem;
    padding: 2px 6px;
  }
}
.mis--item__info .identity .text.username {
  font-family: "torqueweb-book";
  font-weight: bold;
  text-transform: uppercase;
}
.mis--item__info .identity .num {
  font-family: "torqueweb-medium";
  font-size: 0.75rem;
  font-weight: bold;
  padding-left: 6px;
}
.mis--battle {
  width: 100%;
}
@media (min-width: 18em) {
  .mis--battle {
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .mis--battle {
    padding: 24px;
  }
}
.mis--battle__title {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  font-family: "torqueweb-book";
  color: rgb(255, 255, 255);
  letter-spacing: 2px;
}
@media (min-width: 18em) {
  .mis--battle__title {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .mis--battle__title {
    font-size: 2.5rem;
  }
}
.mis--battle__text {
  text-transform: uppercase;
  color: #44505B;
}
@media (min-width: 18em) {
  .mis--battle__text {
    font-size: 1.25rem;
    padding-bottom: 6px;
  }
}
@media (min-width: 60em) {
  .mis--battle__text {
    font-size: 1.75rem;
    padding-bottom: 24px;
  }
}
.mis--battle__text.small {
  text-transform: lowercase;
  font-size: 1rem;
}
.mis--battle__layer {
  position: relative;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 4.5px;
}
@media (min-width: 18em) {
  .mis--battle__layer {
    min-height: 50vh;
    max-height: 50vh;
    padding: 12px 0;
  }
}
@media (min-width: 60em) {
  .mis--battle__layer {
    min-height: 65vh;
    max-height: 65vh;
    padding: 0;
  }
}
.mis--battle__buttons {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
.mis--button {
  padding: 6px 12px;
  margin: 0 6px;
  min-width: 175px;
  text-align: center;
  background: #f0eeef;
  border: 1px solid #737C84;
  border-radius: 3px;
  color: #737C84;
  cursor: pointer;
}
.mis--button.green {
  border-color: #2ce7a8;
  color: #2ce7a8;
}
.mis--battle__head {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  font-family: "torqueweb-book";
}
.mis--battle__timer {
  position: relative;
  font-family: "torqueweb-book";
  color: #44505B;
}
@media (min-width: 18em) {
  .mis--battle__timer {
    font-size: 1.5rem;
  }
}
@media (min-width: 60em) {
  .mis--battle__timer {
    font-size: 2.5rem;
  }
}
.mis--battle__counter {
  display: -moz-flex;
  display: flex;
  -moz-align-items: flex-start;
  align-items: flex-start;
  background-color: rgba(115, 124, 132, 0.5);
  border: 1px solid rgb(255, 255, 255);
  border-radius: 4.5px;
  color: rgb(255, 255, 255);
  text-align: center;
}
@media (min-width: 18em) {
  .mis--battle__counter {
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .mis--battle__counter {
    padding: 12px;
  }
}
.mis--battle__counter--item:first-child {
  border-right: 1px solid rgb(255, 255, 255);
  padding-right: 12px;
  margin-right: 12px;
}
.mis--battle__counter--item span {
  display: block;
  line-height: 20px;
}
.mis--battle__counter--item span:first-child {
  font-family: "torqueweb-bold";
}
@media (min-width: 18em) {
  .mis--battle__counter--item span:first-child {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .mis--battle__counter--item span:first-child {
    font-size: 1.75rem;
  }
}
.mis--num__question {
  position: relative;
  width: 100%;
  text-align: center;
  color: #44505B;
  font-family: "torqueweb-book";
  font-weight: bold;
}
@media (min-width: 18em) {
  .mis--num__question {
    padding-top: 6px;
    padding-left: 24px;
  }
}
@media (min-width: 60em) {
  .mis--num__question {
    padding-top: 12px;
    padding-left: 64px;
  }
}
.mis--battle__block {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
}
@media (min-width: 18em) {
  .mis--battle__block {
    min-height: 55vh;
  }
}
@media (min-width: 60em) {
  .mis--battle__block {
    min-height: 60vh;
  }
}
.mis--battle__questions {
  position: relative;
  width: 100%;
  font-family: "torqueweb-book";
  color: #737C84;
  text-align: center;
}
@media (min-width: 18em) {
  .mis--battle__questions {
    max-width: 95%;
    font-size: 1.25rem;
    padding: 0 24px 12px;
  }
}
@media (min-width: 60em) {
  .mis--battle__questions {
    max-width: 75%;
    font-size: 1.75rem;
    padding: 0 24px 24px;
  }
}
.mis--battle__questions .mis--battle__questions--item:first {
  margin: 0;
}
.mis--battle__questions.review--questions .mina--paginator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (min-width: 18em) {
  .mis--battle__questions.review--questions .mina--paginator {
    width: 107%;
  }
}
@media (min-width: 60em) {
  .mis--battle__questions.review--questions .mina--paginator {
    width: 110%;
  }
}
.mis--battle__questions.review--questions .mina--paginator .mina--paginator__pages {
  min-width: 100%;
}
.mis--battle__questions.review--questions .mina--paginator .mina--paginator__pages .bullet {
  visibility: hidden;
}
.mis--battle__questions.review--questions .mina--paginator .mina--paginator__pages [class^=icon-],
.mis--battle__questions.review--questions .mina--paginator .mina--paginator__pages [class*=" icon-"] {
  color: rgb(255, 255, 255);
}
@media (min-width: 18em) {
  .mis--battle__questions.review--questions .mina--paginator .mina--paginator__pages [class^=icon-],
  .mis--battle__questions.review--questions .mina--paginator .mina--paginator__pages [class*=" icon-"] {
    font-size: 1.75rem;
  }
}
@media (min-width: 60em) {
  .mis--battle__questions.review--questions .mina--paginator .mina--paginator__pages [class^=icon-],
  .mis--battle__questions.review--questions .mina--paginator .mina--paginator__pages [class*=" icon-"] {
    font-size: 2.5rem;
  }
}
.mis--battle__questions--title {
  width: 100%;
  margin: 0 auto;
  color: #44505B;
}
@media (min-width: 18em) {
  .mis--battle__questions--title {
    max-width: 96%;
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .mis--battle__questions--title {
    max-width: 75%;
    font-size: 1.75rem;
  }
}
.mis--battle__questions--item {
  cursor: pointer;
  background: rgb(255, 255, 255);
  border-radius: 3px;
  color: #44505B;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .mis--battle__questions--item {
    font-size: 1rem;
    padding: 6px;
    margin: 6px 0 0 0;
  }
}
@media (min-width: 60em) {
  .mis--battle__questions--item {
    font-size: 1.5rem;
    padding: 24px;
    margin: 16px 0 0 0;
  }
}
.mis--battle__questions--item.success {
  border: 2px solid #2ce7a8;
  box-shadow: none;
}
.mis--battle__questions--item.failed {
  border: 2px solid #D52125;
  box-shadow: none;
}
.mis--battle__questions--item.review--success {
  background-color: #6aa84f;
  border-color: transparent;
  color: rgb(255, 255, 255);
}
.mis--battle__questions--item.review--failed {
  background-color: #D52125;
  border-color: transparent;
  color: rgb(255, 255, 255);
}
.mis--battle__questions--item:hover {
  opacity: 0.8;
}
.mis--battle__questions--item:active {
  box-shadow: 0 0 6px #737C84;
}
.mis--boxes {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .mis--boxes {
    padding: 24px;
    max-width: 90%;
  }
}
@media (min-width: 60em) {
  .mis--boxes {
    padding: 64px 0;
    max-width: 40%;
  }
}
.mis--result {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  min-width: 225px;
  background-color: #f0eeef;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 4.5px;
  color: #737C84;
  text-align: center;
}
@media (min-width: 18em) {
  .mis--result {
    font-size: 1.5rem;
    padding: 12px;
  }
}
@media (min-width: 60em) {
  .mis--result {
    font-size: 3.5rem;
    padding: 24px;
  }
}
.mis--result__item:first-child {
  border-right: 2px solid rgb(255, 255, 255);
  padding-right: 24px;
  margin-right: 24px;
}
.mis--result__item span {
  font-family: "torqueweb-book";
  text-transform: uppercase;
  display: block;
}
.mis--result__item span:first-child {
  font-family: "torqueweb-medium";
}
.mis--result__item span:last-child {
  font-size: 1rem;
  padding-top: 3px;
  font-family: "torqueweb-book";
  letter-spacing: 2px;
}
.mis--time {
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  min-width: 225px;
  background-color: #f0eeef;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 4.5px;
  color: #737C84;
  margin-left: 24px;
  text-align: center;
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .mis--time {
    font-size: 1.5rem;
    padding: 12px;
  }
}
@media (min-width: 60em) {
  .mis--time {
    font-size: 3.5rem;
    padding: 24px;
  }
}
.mis--time span {
  width: 100%;
  text-transform: uppercase;
  display: block;
}
.mis--time span:last-child {
  font-size: 1rem;
  padding-top: 7px;
  letter-spacing: 2px;
}
.mis--tabs {
  width: 100%;
  display: -moz-flex;
  display: flex;
  font-family: "torqueweb-book";
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  background-color: rgb(255, 255, 255);
  border-radius: 6px 6px 0 0;
  color: #737C84;
  text-align: center;
}
@media (min-width: 18em) {
  .mis--tabs {
    font-size: 0.625rem;
  }
}
@media (min-width: 60em) {
  .mis--tabs {
    font-size: 1rem;
  }
}
.mis--tabs__item {
  width: 100%;
  cursor: pointer;
}
@media (min-width: 18em) {
  .mis--tabs__item {
    padding: 6px 0;
  }
}
@media (min-width: 60em) {
  .mis--tabs__item {
    padding: 12px 0;
  }
}
.mis--tabs__item.active {
  border-bottom: 3px solid #F17824;
}
.layer--mis__box--message {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  z-index: 6;
  pointer-events: none;
}
.layer--mis__box--message .growIn-animation {
  pointer-events: all;
}
.mis--box__message {
  position: relative;
  width: 100%;
  max-width: 500px;
  background-color: #44505B;
  border-radius: 6px;
  color: rgb(255, 255, 255);
  font-size: 1.25rem;
  font-family: "torqueweb-book";
  opacity: 0;
}
.mis--box__message textarea {
  width: calc(100% - 12px);
  border-radius: 6px;
  margin: 6px;
  outline: 0;
  padding: 12px;
  color: #44505B;
  font-size: 1.25rem;
  font-family: "torqueweb-light";
}
.mis--box__message--head {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  padding: 16px;
  font-size: 1.5rem;
  text-align: center;
  border-bottom: 1px solid rgb(255, 255, 255);
}
.mis--box__message--head .icon-cross {
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
  font-size: 1.25rem;
}
.mis--box__message--footer {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: flex-start;
  align-items: flex-start;
  padding-bottom: 12px;
}
.mis--more__feeds {
  position: absolute;
  bottom: 20px;
  right: 50px;
  background: #44505B;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-family: "torqueweb-book";
  font-weight: bold;
}
/*------------------------------------*\
    $VIDEOS
\*------------------------------------*/
/*
 * Esto contiene los estilos para las video lecciones.
 */
.video {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  z-index: 5;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  position: absolute;
  left: 0;
  top: 0;
}
.video .icon-play {
  font-size: 3.5rem;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.video--header {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  padding: 12px;
  color: rgb(255, 255, 255);
  font-size: 1.25rem;
  font-weight: 300;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.video--header .icon-close {
  cursor: pointer;
}
.video--controls {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.video--controls__bar {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 6px;
  background-color: #CBCBCB;
}
.video--controls__progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 6px;
  background-color: #279FDC;
}
.video--controls__actions {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  padding: 12px;
  font-weight: 300;
}
.video--controls__buttons {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
}
.video--controls__buttons .icon-play, .video--controls__buttons .icon-pause {
  cursor: pointer;
  font-size: 1.25rem;
  position: static;
  transform: translate(0%, 0%);
}
.video--controls__buttons .icon-rewind {
  position: relative;
  font-size: 1.75rem;
  cursor: pointer;
  margin-left: 24px;
}
.video--controls__buttons .icon-rewind span {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
  position: absolute;
  top: 7px;
  left: 6px;
}
.video--time .time:after {
  content: "/";
  padding-left: 6px;
  margin-right: 6px;
}
/*------------------------------------*\
    $TOOLTIP DE PÁGINA
\*------------------------------------*/
/*
* Esto contiene los estilos para los tooltips de la web.
*/
/*------------------------------------*\
    $TOAST
\*------------------------------------*/
/*
* Esto contiene los estilos para los toast del juego.
*/
.toast {
  min-width: 80px;
  display: -moz-inline-flex;
  display: inline-flex;
  -moz-align-items: center;
  align-items: center;
  -moz-justify-content: center;
  justify-content: center;
  background-color: #891593;
  background-image: linear-gradient(rgba(137, 21, 147, 0.8) 0%, rgba(218, 213, 215, 0.8) 98%);
  color: rgb(255, 255, 255);
  text-align: center;
  border-radius: 3px;
  font-family: "torqueweb-book";
  font-weight: bold;
  white-space: nowrap;
  padding: 6px 12px 6px 6px;
  z-index: 6;
}
@media (min-width: 18em) {
  .toast {
    font-size: 1.5rem;
  }
}
@media (min-width: 60em) {
  .toast {
    font-size: 1.75rem;
  }
}
.toast.antimateria {
  background-color: #279FDC;
  background-image: linear-gradient(rgba(39, 159, 220, 0.8) 0%, rgba(218, 213, 215, 0.8) 98%);
}
.toast.active {
  animation: fadeInUpShort-animation 2s;
}
.toast--screen {
  display: -moz-inline-flex;
  display: inline-flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  background-color: #fff5e8;
  border-radius: 36px;
  color: #44505B;
  font-family: "torqueweb-book";
  z-index: 6;
}
@media (min-width: 18em) {
  .toast--screen {
    font-size: 0.75rem;
    line-height: 0.75rem;
    padding: 6px 12px;
  }
}
@media (min-width: 60em) {
  .toast--screen {
    font-size: 1rem;
    line-height: 1rem;
    padding: 12px 18px;
  }
}
.toast--screen [class^=icon-],
.toast--screen [class*=icon-] {
  padding-right: 6px;
}
@media (min-width: 18em) {
  .toast--screen [class^=icon-],
  .toast--screen [class*=icon-] {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .toast--screen [class^=icon-],
  .toast--screen [class*=icon-] {
    font-size: 1.5rem;
  }
}
/*------------------------------------*\
    $PRELOADER DE PÁGINA
\*------------------------------------*/
/*
* Esto contiene los estilos para el preloader.
*/
.loader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
}
.loader.min {
  width: auto;
  display: inline;
  position: absolute;
  top: 50%;
  left: calc(100% - 2rem);
  transform: translate(-50%, 0);
}
.loader.min .loader--item {
  width: 2rem;
  height: 1.5rem;
}
.loader.min .icon-hex-border {
  font-size: 1.5rem;
}
.loader.min .icon-rocket-loading {
  font-size: 0.75rem;
  right: 15px;
  animation: loading-mini 1.2s 0.5s infinite both;
}
.loader--item {
  position: relative;
  width: 155px;
  height: 131px;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  overflow: hidden;
}
.loader--text {
  font-family: "torqueweb-book";
  color: #44505B;
  font-size: 1.5rem;
  margin-top: 12px;
}
.icon-hex-border {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  font-size: 8.2rem;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  background: linear-gradient(to right, #F17824 0%, rgb(244.0643776824, 149.5493562232, 83.9356223176) 30%, rgb(244.0643776824, 149.5493562232, 83.9356223176) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.icon-rocket-loading {
  position: absolute;
  bottom: 0;
  right: 60px;
  z-index: 1;
  font-size: 4.5rem;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  background: linear-gradient(to right, #F17824 0%, rgb(244.0643776824, 149.5493562232, 83.9356223176) 30%, #F17824 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform-origin: 100% 100%;
  animation: loading 1.2s 0.5s infinite both;
}
.loader--tip {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  color: #737C84;
  font-family: "torqueweb-book";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
}
@media (min-width: 18em) {
  .loader--tip {
    font-size: 1rem;
    bottom: 5%;
  }
}
@media (min-width: 60em) {
  .loader--tip {
    font-size: 1.25rem;
    bottom: 10%;
  }
}
@media (min-width: 18em) {
  .loader--tip [class^=icon-],
  .loader--tip [class*=icon-] {
    font-size: 2.5rem;
    padding-bottom: 6px;
  }
}
@media (min-width: 60em) {
  .loader--tip [class^=icon-],
  .loader--tip [class*=icon-] {
    font-size: 3.5rem;
    padding-bottom: 12px;
  }
}
/*------------------------------------*\
    $END DEMO
\*------------------------------------*/
/*
* Esto contiene los estilos para el fin de juego.
*/
.enddemo {
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  position: absolute;
  left: 6px;
  top: 6px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  color: #737C84;
  font-family: "torqueweb-medium";
}
@media (min-width: 18em) {
  .enddemo [class^=icon-],
  .enddemo [class*=icon-] {
    font-size: 3.5rem;
    margin: 24px 0;
  }
}
@media (min-width: 60em) {
  .enddemo [class^=icon-],
  .enddemo [class*=icon-] {
    font-size: 7rem;
    margin: 32px 0;
  }
}
.enddemo--title {
  color: #D52125;
  text-transform: uppercase;
}
@media (min-width: 18em) {
  .enddemo--title {
    font-size: 1.75rem;
    margin-bottom: 24px;
  }
}
@media (min-width: 60em) {
  .enddemo--title {
    font-size: 2.5rem;
    margin-bottom: 32px;
  }
}
.enddemo--message {
  color: #737C84;
}
@media (min-width: 18em) {
  .enddemo--message {
    font-size: 1.25rem;
    padding: 6px 0;
  }
}
@media (min-width: 60em) {
  .enddemo--message {
    font-size: 1.5rem;
  }
}
.enddemo--subtitle {
  color: #737C84;
  font-family: "torqueweb-light";
}
@media (min-width: 18em) {
  .enddemo--subtitle {
    font-size: 1rem;
  }
}
@media (min-width: 60em) {
  .enddemo--subtitle {
    font-size: 1.25rem;
  }
}
/*------------------------------------*\
    $ALERTS
\*------------------------------------*/
/*
* Esto contiene los estilos para las alertas espécificas del juego.
*/
.alert--mars__position {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  pointer-events: none;
}
@media (min-width: 18em) {
  .alert--mars__position {
    bottom: 6px;
  }
}
@media (min-width: 60em) {
  .alert--mars__position {
    bottom: 20%;
  }
}
.alert--mars {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  background-color: rgba(255, 245, 232, 0.8);
  border-radius: 36px;
  color: #44505B;
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .alert--mars {
    font-size: 0.75rem;
    line-height: 0.75rem;
    max-width: 75%;
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .alert--mars {
    font-size: 1rem;
    line-height: 1rem;
    max-width: 45%;
    padding: 12px;
  }
}
.alert--mars [class^=icon-],
.alert--mars [class*=icon-] {
  padding-right: 6px;
}
@media (min-width: 18em) {
  .alert--mars [class^=icon-],
  .alert--mars [class*=icon-] {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .alert--mars [class^=icon-],
  .alert--mars [class*=icon-] {
    font-size: 1.5rem;
  }
}
.alerts {
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  position: absolute;
  left: 6px;
  top: 6px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  color: #737C84;
  font-family: "torqueweb-medium";
}
@media (min-width: 18em) {
  .alerts [class^=icon-],
  .alerts [class*=icon-] {
    font-size: 2.5rem;
    margin: 24px 0;
  }
}
@media (min-width: 60em) {
  .alerts [class^=icon-],
  .alerts [class*=icon-] {
    font-size: 3.5rem;
    margin: 32px 0;
  }
}
.alerts .icon-info,
.alerts .icon-wifi {
  margin: 6px 0;
}
@media (min-width: 18em) {
  .alerts .checkbox {
    margin: 24px 0;
  }
}
@media (min-width: 60em) {
  .alerts .checkbox {
    margin: 32px 0;
  }
}
.alerts .checkbox input[type=checkbox] + label:before {
  top: -2px;
}
.alerts .checkbox input[type=checkbox]:checked + label:before {
  color: #D52125;
}
.alert--title {
  color: #D52125;
  text-transform: uppercase;
}
@media (min-width: 18em) {
  .alert--title {
    font-size: 1.75rem;
    margin-bottom: 24px;
  }
}
@media (min-width: 60em) {
  .alert--title {
    font-size: 2.5rem;
    margin-bottom: 32px;
  }
}
.alert--message {
  color: #737C84;
  text-align: center;
}
@media (min-width: 18em) {
  .alert--message {
    font-size: 1.25rem;
    padding: 6px 0;
  }
}
@media (min-width: 60em) {
  .alert--message {
    font-size: 1.5rem;
  }
}
.alert--subtitle {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  color: #737C84;
  font-family: "torqueweb-light";
}
@media (min-width: 18em) {
  .alert--subtitle {
    font-size: 1rem;
    margin-top: 24px;
  }
}
@media (min-width: 60em) {
  .alert--subtitle {
    font-size: 1.25rem;
  }
}
@media (min-width: 18em) {
  .alert--subtitle [class^=icon-],
  .alert--subtitle [class*=icon-] {
    font-size: 1rem;
    padding-right: 12px;
  }
}
@media (min-width: 60em) {
  .alert--subtitle [class^=icon-],
  .alert--subtitle [class*=icon-] {
    font-size: 1.25rem;
  }
}
.alert--error {
  position: relative;
  color: #D52125;
  font-family: "torqueweb-medium";
}
@media (min-width: 18em) {
  .alert--error {
    font-size: 0.75rem;
    padding-top: 6px;
  }
}
@media (min-width: 60em) {
  .alert--error {
    font-size: 1rem;
    padding-top: 12px;
  }
}
/*------------------------------------*\
    $PAGES GAME
\*------------------------------------*/
/*
* Esto contiene los estilos para las páginas juego.
*/
/*------------------------------------*\
    $POPUPS GAME
\*------------------------------------*/
/*
* Esto contiene los estilos para los popups del juego.
*/
.popup--game {
  width: 100%;
  height: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.5);
  font-family: "torqueweb-book";
  color: #279FDC;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  z-index: 1;
}
.popup--box {
  background: #279FDC;
  background: linear-gradient(135deg, transparent 6px, #279FDC 0) top left, linear-gradient(225deg, transparent 6px, #279FDC 0) top right, linear-gradient(315deg, transparent 6px, #279FDC 0) bottom right, linear-gradient(45deg, transparent 6px, #279FDC 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 1px;
}
@media (min-width: 18em) {
  .popup--box {
    min-width: 65%;
    max-width: 90%;
  }
}
@media (min-width: 60em) {
  .popup--box {
    min-width: 45%;
    max-width: 60%;
  }
}
.popup--box .checkbox {
  margin-bottom: 24px;
}
.popup--box input[type=checkbox] + label:before {
  top: -2px;
}
.popup--box__canvas {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-direction: column;
  flex-direction: column;
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 6px, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, transparent 6px, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 6px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, transparent 6px, rgb(255, 255, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 24px;
}
@media (min-width: 18em) {
  .popup--box__canvas {
    min-height: 40vh;
  }
}
@media (min-width: 60em) {
  .popup--box__canvas {
    min-height: 35vh;
  }
}
@media (min-width: 18em) {
  .popup--heading {
    font-size: 1.25rem;
    padding-bottom: 12px;
  }
}
@media (min-width: 60em) {
  .popup--heading {
    font-size: 1.75rem;
    padding-bottom: 24px;
  }
}
.popup--text {
  font-family: "torqueweb-light";
  text-align: center;
}
@media (min-width: 18em) {
  .popup--text {
    font-size: 1rem;
    padding-bottom: 12px;
  }
}
@media (min-width: 60em) {
  .popup--text {
    font-size: 1.5rem;
    padding-bottom: 24px;
  }
}
.popup--buttons {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
/*------------------------------------*\
    $TABS
\*------------------------------------*/
/*
* Esto contiene los estilos para las tabs del juego.
*/
.tabs {
  width: 100%;
  display: -moz-flex;
  display: flex;
  background-color: rgb(255, 255, 255);
  border-radius: 3px 3px 0 0;
  font-family: "torqueweb-book";
  color: #737C84;
  text-transform: uppercase;
  cursor: pointer;
}
@media (min-width: 18em) {
  .tabs {
    min-height: 30px;
  }
}
@media (min-width: 60em) {
  .tabs {
    min-height: 40px;
  }
}
.tabs--item {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .tabs--item {
    font-size: 0.75rem;
    padding: 6px;
  }
}
@media (min-width: 60em) {
  .tabs--item {
    font-size: 1rem;
    padding: 12px;
  }
}
.tabs--item.active {
  border-bottom: 3px solid #F17824;
}
/*------------------------------------*\
    $TOAST
\*------------------------------------*/
/*
* Esto contiene los estilos para el tutorial del juego.
*/
.tutorial--message {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  pointer-events: none;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid #fff5e8;
  border-radius: 36px;
  color: rgb(255, 255, 255);
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .tutorial--message {
    font-size: 0.75rem;
    line-height: 0.75rem;
    max-width: 75%;
    padding: 6px;
    bottom: 20%;
  }
}
@media (min-width: 60em) {
  .tutorial--message {
    font-size: 1rem;
    line-height: 1rem;
    max-width: 40%;
    padding: 12px;
    bottom: 6%;
  }
}
.tutorial--message__img {
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/instructor.png");
  background-repeat: no-repeat;
}
@media (min-width: 18em) {
  .tutorial--message__img {
    width: 75px;
    height: 75px;
    background-size: auto 75px;
  }
}
@media (min-width: 60em) {
  .tutorial--message__img {
    width: 100px;
    height: 150px;
    background-size: auto 150px;
  }
}
.tutorial--welcome, .tutorial--end, .tutorial--response {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: flex-start;
  align-items: flex-start;
  -moz-flex-direction: column;
  flex-direction: column;
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/instructor.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 75%;
  padding: 0 25% 0 5%;
}
@media (min-width: 18em) {
  .tutorial--welcome, .tutorial--end, .tutorial--response {
    font-size: 1rem;
    line-height: 1rem;
  }
}
@media (min-width: 60em) {
  .tutorial--welcome, .tutorial--end, .tutorial--response {
    font-size: 1.25rem;
    line-height: 1.25rem;
  }
}
.tutorial--welcome .h1, .tutorial--end .h1, .tutorial--response .h1 {
  font-family: "torqueweb-book";
  color: #737C84;
  font-size: 1.5rem;
}
.tutorial--welcome .h1 .name, .tutorial--end .h1 .name, .tutorial--response .h1 .name {
  color: #F17824;
  display: block;
}
@media (min-width: 18em) {
  .tutorial--welcome .h1 .name, .tutorial--end .h1 .name, .tutorial--response .h1 .name {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
}
@media (min-width: 60em) {
  .tutorial--welcome .h1 .name, .tutorial--end .h1 .name, .tutorial--response .h1 .name {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}
.tutorial--welcome p, .tutorial--end p, .tutorial--response p {
  margin: 0;
  padding: 0 0 12px 0;
}
.tutorial--welcome p b, .tutorial--end p b, .tutorial--response p b {
  padding-left: 6px;
}
.tutorial--code {
  position: relative;
  min-width: 180px;
  display: -moz-inline-flex;
  display: inline-flex;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  -moz-align-items: center;
  align-items: center;
  border-radius: 30px;
  border: 1px solid #737C84;
  padding: 2px;
  color: rgb(0, 0, 0);
  font-weight: bold;
}
@media (min-width: 18em) {
  .tutorial--code {
    min-height: 41px;
  }
}
@media (min-width: 60em) {
  .tutorial--code {
    min-height: 45px;
    margin-bottom: 12px;
  }
}
.tutorial--switch {
  width: 100px;
  position: absolute;
  right: 0;
  top: 0;
  font-family: "torqueweb-book";
  border-radius: 30px;
  background-color: #F17824;
  padding: 12px 0 11px 0;
  color: #D52125;
  font-size: 0.75rem;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
.tutorial--switch.active {
  right: 78px;
}
.tutorial--code__item {
  padding-right: 6px;
}
.tutorial--response {
  background: rgba(0, 0, 0, 0.6);
  color: rgb(255, 255, 255);
  text-align: center;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .tutorial--response {
    padding: 0 5%;
  }
}
@media (min-width: 60em) {
  .tutorial--response {
    padding: 0 15%;
  }
}
.tutorial--response .h1 {
  color: #F17824;
  text-transform: uppercase;
  font-size: 1.5rem;
}
@media (min-width: 18em) {
  .tutorial--response .btn--orange {
    margin-top: 0;
  }
}
@media (min-width: 60em) {
  .tutorial--response .btn--orange {
    margin-top: 24px;
  }
}
.tutorial--end {
  -moz-align-items: center;
  align-items: center;
}
.tutorial--end.content--right {
  background-position: left bottom;
  padding: 0 5% 0 25%;
}
.tutorial--end .h1 {
  text-transform: uppercase;
}
@media (min-width: 18em) {
  .tutorial--end .btn--orange {
    margin-top: 0;
  }
}
@media (min-width: 60em) {
  .tutorial--end .btn--orange {
    margin-top: 24px;
  }
}
/*------------------------------------*\
    $END GAME
\*------------------------------------*/
/*
* Esto contiene los estilos para el fin de juego.
*/
.endgame {
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -moz-align-items: center;
  align-items: center;
  background: #f0eeef;
  background: linear-gradient(135deg, transparent 6px, #f0eeef 0) top left, linear-gradient(225deg, transparent 6px, #f0eeef 0) top right, linear-gradient(315deg, transparent 6px, #f0eeef 0) bottom right, linear-gradient(45deg, transparent 6px, #f0eeef 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
@media (min-width: 18em) {
  .endgame {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    margin: 6px;
  }
}
@media (min-width: 60em) {
  .endgame {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    margin: 12px;
  }
}
@media (min-width: 18em) {
  .endgame .shield {
    width: 40px;
    height: 40px;
  }
}
@media (min-width: 60em) {
  .endgame .shield {
    width: 75px;
    height: 75px;
  }
}
@media (min-width: 18em) {
  .endgame .shield--item {
    width: 40px;
    height: 40px;
    background-size: 40px 40px;
  }
}
@media (min-width: 60em) {
  .endgame .shield--item {
    width: 75px;
    height: 75px;
    background-size: 75px 75px;
  }
}
@media (min-width: 18em) {
  .endgame .shield--icon {
    font-size: 1.25rem;
  }
}
@media (min-width: 60em) {
  .endgame .shield--icon {
    font-size: 2rem;
  }
}
@media (min-width: 18em) {
  .endgame .shield--background {
    font-size: 1.925rem;
  }
}
@media (min-width: 60em) {
  .endgame .shield--background {
    font-size: 3.85rem;
  }
}
@media (min-width: 18em) {
  .endgame .text--ellipsis {
    max-width: 150px;
  }
}
@media (min-width: 60em) {
  .endgame .text--ellipsis {
    max-width: 300px;
  }
}
.endgame--title {
  width: 98%;
  color: #F17824;
  border-bottom: 1px dotted #44505B;
  text-align: center;
  text-transform: uppercase;
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .endgame--title {
    font-size: 1.25rem;
    padding: 12px;
  }
}
@media (min-width: 60em) {
  .endgame--title {
    font-size: 1.75rem;
    padding: 32px;
  }
}
.endgame--layer {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  -moz-flex-grow: 1;
  flex-grow: 1;
}
@media (min-width: 18em) {
  .endgame--layer {
    padding-bottom: 24px;
  }
}
@media (min-width: 60em) {
  .endgame--layer {
    padding-bottom: 75px;
  }
}
.endgame--layer.ranking {
  padding: 0;
}
.endgame--layer.ranking .mis {
  width: 90%;
}
.endgame--layer .mis {
  position: static;
}
.endgame--layer .mis .mis--content {
  margin: 0 6px;
}
@media (min-width: 18em) {
  .endgame--layer .mis .mis--layer {
    min-height: 60vh;
    max-height: 60vh;
  }
}
@media (min-width: 60em) {
  .endgame--layer .mis .mis--layer {
    min-height: 70vh;
    max-height: 70vh;
  }
}
.endgame--position {
  width: 100%;
  position: relative;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  border: 1px solid #737C84;
  border-radius: 6px;
}
@media (min-width: 18em) {
  .endgame--position {
    padding: 6px 12px;
    margin-bottom: 6px;
  }
}
@media (min-width: 60em) {
  .endgame--position {
    padding: 16px 32px;
    margin-bottom: 24px;
  }
}
@media (min-width: 18em) {
  .endgame--position:nth-child(1) {
    max-width: 80%;
  }
}
@media (min-width: 60em) {
  .endgame--position:nth-child(1) {
    max-width: 75%;
  }
}
@media (min-width: 60em) {
  .endgame--position:nth-child(1) .num--position {
    font-size: 6rem;
    line-height: 6rem;
  }
}
@media (min-width: 18em) {
  .endgame--position:nth-child(2) {
    max-width: 75%;
  }
}
@media (min-width: 60em) {
  .endgame--position:nth-child(2) {
    max-width: 70%;
  }
}
@media (min-width: 18em) {
  .endgame--position:nth-child(2) .num--position {
    font-size: 2.3rem;
    line-height: 2.3rem;
  }
}
@media (min-width: 60em) {
  .endgame--position:nth-child(2) .num--position {
    font-size: 4.5rem;
    line-height: 4.5rem;
  }
}
@media (min-width: 18em) {
  .endgame--position:nth-child(3) {
    max-width: 70%;
  }
}
@media (min-width: 60em) {
  .endgame--position:nth-child(3) {
    max-width: 65%;
  }
}
@media (min-width: 18em) {
  .endgame--position:nth-child(3) .num--position {
    font-size: 2.1rem;
    line-height: 2.1rem;
  }
}
@media (min-width: 60em) {
  .endgame--position:nth-child(3) .num--position {
    font-size: 3.5rem;
    line-height: 3.5rem;
  }
}
.endgame--position .shield--canvas__texture {
  background: none;
}
@media (min-width: 18em) {
  .endgame--position .shield--canvas__texture {
    left: -25px;
    top: -20px;
  }
}
@media (min-width: 60em) {
  .endgame--position .shield--canvas__texture {
    left: -40px;
    top: -25px;
  }
}
.endgame--info {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  color: #44505B;
  font-family: "torqueweb-light";
}
.endgame--info .num--position {
  font-family: "torqueweb-medium";
}
@media (min-width: 18em) {
  .endgame--info .num--position {
    font-size: 2.5rem;
    line-height: 2.5rem;
    padding: 0 12px;
  }
}
@media (min-width: 60em) {
  .endgame--info .num--position {
    font-size: 5rem;
    line-height: 5rem;
    padding: 0 24px;
  }
}
@media (min-width: 18em) {
  .endgame--info .text {
    font-size: 0.75rem;
    line-height: 0.75rem;
    padding-bottom: 3px;
  }
}
@media (min-width: 60em) {
  .endgame--info .text {
    font-size: 1.5rem;
    line-height: 1.5rem;
    padding-bottom: 6px;
  }
}
.endgame--info .text:nth-child(1) {
  text-transform: capitalize;
}
.endgame--info .text:nth-child(2) {
  text-transform: uppercase;
  font-family: "torqueweb-medium";
}
@media (min-width: 60em) {
  .endgame--info .text:nth-child(2) {
    font-size: 1.75rem;
    line-height: 1.75rem;
  }
}
.endgame--info .text:last-child {
  font-family: "torqueweb-light";
  text-transform: capitalize;
}
.endgame--info__results {
  color: #737C84;
  border-left: 1px solid #737C84;
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .endgame--info__results {
    font-size: 0.75rem;
    line-height: 0.75rem;
    padding: 0 0 0 6px;
  }
}
@media (min-width: 60em) {
  .endgame--info__results {
    font-size: 1.5rem;
    line-height: 1.5rem;
    padding: 0 0 0 24px;
  }
}
.endgame--info__results li {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .endgame--info__results li {
    padding-bottom: 3px;
  }
}
@media (min-width: 60em) {
  .endgame--info__results li {
    padding-bottom: 8px;
  }
}
.endgame--info__results li [class^=icon-],
.endgame--info__results li [class*=" icon-"] {
  padding-right: 6px;
}
.endgame--button {
  position: absolute;
}
@media (min-width: 18em) {
  .endgame--button {
    right: 6px;
    top: 8px;
  }
}
@media (min-width: 60em) {
  .endgame--button {
    right: 12px;
    top: 24px;
  }
}
.endgame--back {
  position: absolute;
  cursor: pointer;
  color: #44505B;
}
@media (min-width: 18em) {
  .endgame--back {
    left: 6px;
    top: 6px;
    font-size: 1.5rem;
  }
}
@media (min-width: 60em) {
  .endgame--back {
    left: 12px;
    top: 24px;
    font-size: 1.75rem;
  }
}
.endgame--user__info {
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 6;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -moz-align-items: center;
  align-items: center;
  background: #f0eeef;
  background: linear-gradient(135deg, transparent 6px, #f0eeef 0) top left, linear-gradient(225deg, transparent 6px, #f0eeef 0) top right, linear-gradient(315deg, transparent 6px, #f0eeef 0) bottom right, linear-gradient(45deg, transparent 6px, #f0eeef 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .endgame--user__info {
    top: calc(100% - 55px);
    height: calc(100% - 45px);
  }
}
@media (min-width: 60em) {
  .endgame--user__info {
    top: calc(100% - 120px);
    height: calc(100% - 93px);
  }
}
.endgame--user__info.federations {
  height: auto;
}
@media (min-width: 18em) {
  .endgame--user__info.active {
    top: 45px;
  }
}
@media (min-width: 60em) {
  .endgame--user__info.active {
    top: 93px;
  }
}
.endgame--user__head {
  position: relative;
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  color: #44505B;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 6px 6px -6px #44505B;
}
@media (min-width: 18em) {
  .endgame--user__head {
    height: 65px;
  }
}
@media (min-width: 60em) {
  .endgame--user__head {
    height: 120px;
  }
}
.endgame--user__head [class^=icon-angle],
.endgame--user__head [class*=" icon-angle"] {
  cursor: pointer;
}
@media (min-width: 18em) {
  .endgame--user__head [class^=icon-angle],
  .endgame--user__head [class*=" icon-angle"] {
    font-size: 1.5rem;
    padding-right: 12px;
  }
}
@media (min-width: 60em) {
  .endgame--user__head [class^=icon-angle],
  .endgame--user__head [class*=" icon-angle"] {
    font-size: 3.5rem;
    padding-right: 24px;
  }
}
.endgame--user__data {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  align-items: center;
  padding-left: 12%;
}
.endgame--user__data .shield--canvas__texture {
  background: none;
  position: static;
}
.endgame--user__data .text {
  font-family: "torqueweb-light";
  text-transform: capitalize;
}
@media (min-width: 18em) {
  .endgame--user__data .text {
    font-size: 0.75rem;
    line-height: 0.75rem;
    padding: 0 0 3px;
  }
}
@media (min-width: 60em) {
  .endgame--user__data .text {
    font-size: 1.5rem;
    line-height: 1.5rem;
    padding: 0 0 3px;
  }
}
.endgame--user__data .text:nth-child(2) {
  text-transform: uppercase;
  font-family: "torqueweb-medium";
}
.endgame--user__data .text:last-child {
  font-family: "torqueweb-light";
}
.endgame--user__position {
  font-family: "torqueweb-medium";
}
@media (min-width: 18em) {
  .endgame--user__position {
    font-size: 2rem;
    line-height: 2rem;
    padding: 0;
  }
}
@media (min-width: 60em) {
  .endgame--user__position {
    font-size: 5rem;
    line-height: 5rem;
    padding: 0;
  }
}
.endgame--summary {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: center;
  justify-content: center;
  -moz-align-items: flex-start;
  align-items: flex-start;
  color: #44505B;
}
@media (min-width: 18em) {
  .endgame--summary {
    padding: 16px 0;
  }
}
@media (min-width: 60em) {
  .endgame--summary {
    padding: 48px;
  }
}
.endgame--summary__col {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .endgame--summary__col {
    padding: 0 6px;
  }
}
@media (min-width: 60em) {
  .endgame--summary__col {
    padding: 0 32px;
  }
}
.endgame--summary__col:nth-child(2) {
  border-left: 1px dotted #737C84;
  border-right: 1px dotted #737C84;
}
.endgame--summary__col:nth-child(3) .endgame--summary__list {
  -moz-align-items: flex-end;
  align-items: flex-end;
}
.endgame--summary__head {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  text-align: center;
}
.endgame--summary__head .value {
  font-family: "torqueweb-book";
}
@media (min-width: 18em) {
  .endgame--summary__head .value {
    font-size: 1.25rem;
    line-height: 1.25rem;
  }
}
@media (min-width: 60em) {
  .endgame--summary__head .value {
    font-size: 3.5rem;
    line-height: 3.5rem;
  }
}
.endgame--summary__head .text {
  text-transform: uppercase;
}
@media (min-width: 18em) {
  .endgame--summary__head .text {
    font-size: 1rem;
    line-height: 1rem;
  }
}
@media (min-width: 60em) {
  .endgame--summary__head .text {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
}
.endgame--summary__head [class^=icon-],
.endgame--summary__head [class*=" icon-"] {
  position: relative;
  color: rgb(0, 0, 0);
}
@media (min-width: 18em) {
  .endgame--summary__head [class^=icon-],
  .endgame--summary__head [class*=" icon-"] {
    font-size: 1.25rem;
    line-height: 1.25rem;
    padding-top: 6px;
  }
}
@media (min-width: 60em) {
  .endgame--summary__head [class^=icon-],
  .endgame--summary__head [class*=" icon-"] {
    font-size: 1.75rem;
    line-height: 1.75rem;
  }
}
.endgame--summary__list {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  text-transform: uppercase;
  color: #828282;
  font-family: "torqueweb-light";
}
@media (min-width: 18em) {
  .endgame--summary__list {
    font-size: 0.75rem;
    line-height: 0.75rem;
    margin-top: 8px;
  }
}
@media (min-width: 60em) {
  .endgame--summary__list {
    font-size: 1.25rem;
    line-height: 1.25rem;
    margin-top: 32px;
  }
}
.endgame--summary__list li {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 18em) {
  .endgame--summary__list li {
    padding-bottom: 8px;
  }
}
@media (min-width: 60em) {
  .endgame--summary__list li {
    padding-bottom: 24px;
  }
}
.endgame--summary__list li:last-child {
  padding: 0;
}
.endgame--summary__list li .text,
.endgame--summary__list li .value {
  padding: 0 6px;
}
.endgame--summary__list li .text {
  font-family: "torqueweb-book";
}
.endgame--list__block {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-align-items: flex-end;
  align-items: flex-end;
  -moz-flex-grow: 1;
  flex-grow: 1;
}
.endgame--list__block .endgame--summary__list:first-child {
  border-right: 1px dotted #737C84;
}
@media (min-width: 18em) {
  .endgame--list__block .endgame--summary__list:first-child {
    padding-right: 6px;
    margin-right: 6px;
  }
}
@media (min-width: 60em) {
  .endgame--list__block .endgame--summary__list:first-child {
    padding-right: 12px;
    margin-right: 12px;
  }
}
.endgame--list__block .endgame--summary__list:first-child li {
  -moz-justify-content: flex-end;
  justify-content: flex-end;
}
.endgame--animation {
  animation: shakeUp-animation 10s linear infinite;
}
.endgame--animation:hover {
  animation: none;
}
/*------------------------------------*\
    $SURVEY
\*------------------------------------*/
/*
 * Esto contiene los estilos para los survey game.
 */
.survey-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.survey {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: block;
  clear: both;
  background-color: rgb(255, 255, 255);
  font-family: "torqueweb-light";
  color: rgb(0, 0, 0);
  padding-bottom: 48px;
  height: 100vh;
  overflow-y: auto;
}
.survey-header {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid #737C84;
}
.survey-header .h1 {
  margin: 24px 0 0 0;
  padding: 0;
  text-align: center;
  color: #279FDC;
  font-weight: bold;
}
.survey-header-item img {
  max-height: 100px;
}
.survey-body {
  width: 100%;
  padding: 5% 8%;
  font-size: 1rem;
}
.survey-body-title {
  font-size: 1.2rem;
  text-align: center;
  font-weight: bold;
}
.survey-body-block {
  width: 100%;
  display: block;
  margin-top: 24px;
  margin-bottom: 24px;
}
.survey-body-question {
  margin-bottom: 24px;
}
.survey-body-question b {
  color: #279FDC;
  font-weight: bold;
  font-size: 1.25rem;
  padding-right: 6px;
}
.survey-body-form {
  width: 100%;
  display: -moz-flex;
  display: flex;
  padding-left: 24px;
  padding-bottom: 6px;
}
.survey-body-form input[type=radio] {
  display: inline;
  margin: 3px 0 0 0;
}
.survey-body-form input[type=radio] + label:before {
  width: auto;
  height: auto;
  background: transparent;
  padding: 0;
  margin: 0;
  position: static;
  border: none;
}
.survey-body-form input[type=radio]:checked + label:after, .survey-body-form input[type=radio]:not(:checked) + label:after {
  background: none;
}
.survey-body-form label {
  padding-left: 6px;
  padding-right: 6px;
  font-weight: bold;
  text-transform: capitalize;
}
.survey-body-form textarea {
  border: 1px solid rgb(79.3825910931, 85.5951417004, 91.1174089069);
  border-radius: 18px;
  width: 100%;
  max-height: 100px;
  outline: 0;
  padding: 24px;
}
.survey-send-button {
  width: 100%;
  max-width: 250px;
  float: right;
  clear: both;
  background-color: #279FDC;
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.5, 0, 0.1, 1);
}
/*------------------------------------*\
    $FLAGS
\*------------------------------------*/
/*
* Esto contiene los estilos para las flags de mars.
*/
.flag {
  width: 80px;
  height: 65px;
  font-size: 4rem;
  position: relative;
}
@media (min-width: 18em) {
  .settings--customization__flag .flag {
    width: 160px;
    height: 130px;
    font-size: 8rem;
  }
}
@media (min-width: 60em) {
  .settings--customization__flag .flag {
    width: 320px;
    height: 260px;
    font-size: 16rem;
  }
}
@media (min-width: 18em) {
  .settings--federations__item .flag {
    width: 80px;
    height: 65px;
    font-size: 4rem;
  }
}
@media (min-width: 60em) {
  .settings--federations__item .flag {
    width: 160px;
    height: 130px;
    font-size: 8rem;
  }
}
.endgame--position .flag {
  position: absolute;
}
@media (min-width: 18em) {
  .endgame--position .flag {
    left: -25px;
    top: -20px;
    width: 50px;
    height: 45px;
    font-size: 4rem;
  }
}
@media (min-width: 60em) {
  .endgame--position .flag {
    left: -20px;
    top: -15px;
    width: 80px;
    height: 65px;
    font-size: 4rem;
  }
}
.endgame--user__data .flag {
  margin: 0 6px;
}
.mis--item__info .flag {
  width: 40px;
  height: 32px;
  font-size: 2rem;
  margin-right: 12px;
}
.flag--base {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.flag--shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.flag--emblem {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.flag--png {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  background-image: url("//int.statics.gamelearn.io.s3-website-eu-west-1.amazonaws.com/mars/statics/sombreado.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;
}
/*Clases generadas con los valores de flag-colors definidos en scss/game/lib/settings.scss*/
.flag--red {
  color: #F0292A;
}
.flag--darkred {
  color: #A3133E;
}
.flag--blue {
  color: #005BA9;
}
.flag--lightblue {
  color: #9ECDE2;
}
.flag--green {
  color: #04A963;
}
.flag--lightgreen {
  color: #70C1B3;
}
.flag--white {
  color: #FFFFFF;
}
.flag--lightergreen {
  color: #B2DBBF;
}
.flag--yellow {
  color: #F5DB2D;
}
.flag--lightyellow {
  color: #F3FFBD;
}
.flag--black {
  color: #000000;
}
.flag--violet {
  color: #7B1E7A;
}
.flag--orange {
  color: #FF8325;
}
.flag--grey {
  color: #606060;
}
.flag--lightgrey {
  color: #C4C4C4;
}
/*------------------------------------*\
    $FEDERATIONS
\*------------------------------------*/
/*
* Esto contiene los estilos para las federaciones de mars.
*/
.federation--members {
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 6;
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, transparent 6px, rgb(255, 255, 255) 0) top left, linear-gradient(225deg, transparent 6px, rgb(255, 255, 255) 0) top right, linear-gradient(315deg, transparent 6px, rgb(255, 255, 255) 0) bottom right, linear-gradient(45deg, transparent 6px, rgb(255, 255, 255) 0) bottom left;
  background-size: calc(50% + 1px) calc(50% + 1px);
  background-repeat: no-repeat;
  padding: 2% 4%;
  opacity: 0;
  pointer-events: none;
}
.federation--members .shield--canvas__texture {
  position: static;
  margin: 0;
  padding: 0;
  background: none;
}
.federation--head {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
}
.federation--head .icon-cross {
  cursor: pointer;
  color: #737C84;
  pointer-events: all;
}
.federation--head__info {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  font-family: "torqueweb-medium";
}
.federation--head__info .info {
  padding-left: 12px;
}
.federation--head__info .name {
  text-transform: uppercase;
}
.federation--head__info .colognes {
  color: #737C84;
  padding-top: 3px;
}
.federation--members__list {
  width: 100%;
  overflow: auto;
  margin-top: 32px;
  padding: 0 24px 0 12px;
}
@media (min-width: 18em) {
  .federation--members__list {
    height: 65vh;
  }
}
@media (min-width: 60em) {
  .federation--members__list {
    height: 80vh;
  }
}
.federation--members__list--item {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: center;
  align-items: center;
  font-size: 1.5rem;
  padding: 12px 0;
  border-bottom: 1px solid #CBCBCB;
  color: #737C84;
}
.federation--members__list--item.active .name {
  color: #44505B;
  font-family: "torqueweb-medium";
}
.federation--members__list--item .position {
  color: #44505B;
  font-size: 1.75rem;
  font-family: "torqueweb-medium";
}
.federation--members__list--item .info {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
}
.federation--members__list--item .info .shield {
  width: 25px;
  height: 25px;
  cursor: default;
  margin: 0 6px 0 12px;
}
.federation--members__list--item .info .shield--item {
  width: 25px;
  height: 25px;
  background-size: 25px 25px;
}
.federation--members__list--item .info .shield--icon {
  font-size: 0.625rem;
}
.federation--members__list--item .info .shield--background {
  font-size: 1.25rem;
}
.federation--members__list--item .colognes {
  font-size: 1rem;
}
.federation--position .btn, .federation--position input[type=file] + label {
  margin-bottom: 12px;
}
/**
 * Layout
 **/
/*------------------------------------*\
    $SITIO
\*------------------------------------*/
/**
* A partir de aquí es donde debes escribir los estilos de posicionamiento
* y detalles que forman tu web. Disfruta!
*/
body {
  font-family: "torqueweb-light";
}
.main {
  width: 100%;
  padding: 0;
  margin: 0;
}
.container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: -moz-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}
.content {
  width: 100%;
  padding: 0;
}
.header {
  width: 100%;
  display: -moz-flex;
  display: flex;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  -moz-align-items: flex-start;
  align-items: flex-start;
}
.footer {
  width: 100%;
  padding: 0;
}
/*Clases generadas con los valores de colors-game definidos en scss/game/lib/settings.scss*/
.blue {
  color: #279FDC;
}
.darkblue {
  color: #13658E;
}
.darkerblue {
  color: #2c4481;
}
.lightblue {
  color: #92CFED;
}
.lighterblue {
  color: #E9F5FB;
}
.grey {
  color: #737C84;
}
.lightgrey {
  color: #CBCBCB;
}
.lightergrey {
  color: #DAD5D7;
}
.darkgrey {
  color: #44505B;
}
.orange {
  color: #F17824;
}
.lightorange {
  color: #FFF5E8;
}
.lighterorange {
  color: rgb(252.2735426009, 240.7937219731, 225.7264573991);
}
.darkorange {
  color: #CC7C13;
}
.red {
  color: #D52125;
}
.lightred {
  color: rgb(249.6875, 245.3125, 245.3125);
}
.darkred {
  color: #9B5555;
}
.green {
  color: #2ce7a8;
}
.darkgreen {
  color: #6aa84f;
}
.violet {
  color: #891593;
}
.white {
  color: rgb(255, 255, 255);
}
.black {
  color: rgb(0, 0, 0);
}
/*Clases generadas para posicionamiento de botones principales*/
@media (min-width: 18em) {
  .top {
    top: 6px;
  }
}
.top.center {
  left: 50%;
  transform: translate(-50%, 0);
}
@media (min-width: 18em) {
  .left {
    left: 6px;
  }
}
.left.center {
  top: 50%;
  transform: translate(0, -50%);
}
@media (min-width: 18em) {
  .bottom {
    bottom: 6px;
  }
}
.bottom.center {
  left: 50%;
  transform: translate(-50%, 0);
}
@media (min-width: 18em) {
  .right {
    right: 6px;
  }
}
.right.center {
  top: 50%;
  transform: translate(0, -50%);
}
.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
/*Clases generadas para offset de posicionamiento de botones principales*/
@media (min-width: 18em) {
  .offset-1 {
    right: 45px;
  }
}
@media (min-width: 60em) {
  .offset-1 {
    right: 65px;
  }
}
@media (min-width: 18em) {
  .offset-top-1 {
    top: 45px;
  }
}
@media (min-width: 60em) {
  .offset-top-1 {
    top: 60px;
  }
}
@media (min-width: 18em) {
  .offset-bottom-1 {
    bottom: 45px;
  }
}
@media (min-width: 60em) {
  .offset-bottom-1 {
    bottom: 60px;
  }
}
.player--position {
  position: absolute;
  top: 6px;
  color: rgb(255, 255, 255);
  text-align: left;
}
@media (min-width: 18em) {
  .player--position {
    left: 95px;
  }
}
@media (min-width: 60em) {
  .player--position {
    left: 120px;
  }
}
.player--position__item {
  font-family: "torqueweb-medium";
}
@media (min-width: 18em) {
  .player--position__item {
    font-size: 1.5rem;
  }
}
@media (min-width: 60em) {
  .player--position__item {
    font-size: 2rem;
  }
}
.player--label {
  font-family: "torqueweb-book";
  text-transform: uppercase;
  letter-spacing: 2px;
}
@media (min-width: 18em) {
  .player--label {
    font-size: 0.75rem;
    letter-spacing: 0;
  }
}
@media (min-width: 60em) {
  .player--label {
    font-size: 1rem;
    padding: 6px 0 3px;
    letter-spacing: 2px;
  }
}
/*------------------------------------*\
    $NAVEGACIÓN
\*------------------------------------*/
/**
* Estilos para laa settings del juego (nav,menu)
*/
.nav--container {
  position: relative;
  z-index: 6;
}
.nav {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  display: table;
  color: #44505B;
  text-align: center;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .nav {
    font-size: 1.25rem;
  }
}
.list--nav {
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  padding: 0;
  margin: 0;
  visibility: hidden;
  opacity: 0;
}
.list--nav.active {
  visibility: visible;
  opacity: 1;
}
.list--nav__item {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  position: relative;
  background-color: #f0eeef;
  border-left: 3px solid #F17824;
  cursor: pointer;
}
@media (min-width: 18em) {
  .list--nav__item {
    padding: 12px;
  }
}
.list--nav__item:hover {
  color: #F17824;
}
.list--nav__item:first-child {
  min-height: 40px;
}
.list--nav__item:last-child {
  border-radius: 0 0 0 3px;
}
.list--nav__item .sublist--nav {
  visibility: hidden;
}
.list--nav__item.active {
  color: #F17824;
}
.list--nav__item.active .sublist--nav {
  right: 100%;
  min-width: 50px;
  min-height: auto;
  visibility: visible;
  opacity: 1;
  color: #44505B;
}
.list--nav__item .text {
  margin-left: 12px;
}
@media (min-width: 18em) {
  .list--nav__item .text {
    font-size: 1rem;
  }
}
.sublist--nav {
  display: -moz-flex;
  display: flex;
  padding: 0;
  margin: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0%, -50%);
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
  border-radius: 3px 0 0 3px;
  background-color: #f0eeef;
  border-left: 3px solid #F17824;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  text-transform: capitalize;
}
@media (min-width: 18em) {
  .sublist--nav {
    padding: 6px 6px 6px 12px;
  }
}
.sublist--nav__item {
  display: -moz-flex;
  display: flex;
  -moz-align-items: center;
  align-items: center;
  transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 18em) {
  .sublist--nav__item {
    padding: 0 12px;
    border-right: 1px solid #CBCBCB;
  }
}
.sublist--nav__item:hover {
  color: #F17824;
}
.sublist--nav__item:last-child {
  padding-right: 0;
  border: none;
}
.sublist--nav__item:first-child {
  padding-left: 0;
}
.sublist--nav__item .lang {
  line-height: 1.2;
}
@media (min-width: 18em) {
  .sublist--nav__item .lang {
    font-size: 0.75rem;
  }
}
.sublist--nav__item.active .lang {
  color: #F17824;
}
.sublist--nav__item .text {
  font-size: 0.75rem;
}
/**
 * vendor
 **/
/*
-------------------------------------------------------------------
Created with TexturePacker https://www.codeandweb.com/texturepacker
-------------------------------------------------------------------
Inline:     <i class="yourspritesname"></i>
Responsive: <div class="yourspritesname"></div>
*/
/* $TexturePacker:SmartUpdate:3b887671958b4c3d1a20fe9fa11534de:16cbc2608c82e9b9be9eb56b2fb40afa:ab406ca781e15934ad25e5c499eb85c0$ */