@charset "UTF-8";
/*
* @Master Landingpage CSS
* 
* @author Sandra Ruettgers
* @version 1.0  (2015-02-09)
*
*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* Variables */
/* * FONTS * * * * */
/* * * * * * * * * */
@font-face {
  font-family: 'PTSans Narrow Bold';
  src: url("../fonts/PTSans-NarrowBold.eot?#iefix") format("embedded-opentype"), url("../fonts/PTSans-NarrowBold.woff") format("woff"), url("../fonts/PTSans-NarrowBold.ttf") format("truetype"), url("../fonts/PTSans-NarrowBold.svg#PTSans-NarrowBold") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'PTSans Narrow Regular';
  src: url("../fonts/PTSans-NarrowRegular.eot?#iefix") format("embedded-opentype"), url("../fonts/PTSans-NarrowRegular.woff") format("woff"), url("../fonts/PTSans-NarrowRegular.ttf") format("truetype"), url("../fonts/PTSans-NarrowRegular.svg#PTSans-NarrowRegular") format("svg");
  font-weight: normal;
  font-style: normal; }
/* Mixins */
/* - - - - - - - - - - - - - - - - - - - - - - - */
/* MOBILE - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - */
/*------------------------------------*\
  ### Main Styles Mobile ###
--------------------------------------*/
html,
body {
  height: 100%;
  width: 100%; }

body {
  background: #000;
  color: #fff;
  font-size: 16px;
  font-family: 'Trebuchet MS', sans-serif;
  line-height: 160%; }

h2 {
  color: #fff;
  font-family: "PTSans Narrow Bold", Arial, sans-serif;
  font-weight: 200;
  line-height: 120%;
  margin: 40% 0 10%;
  text-align: center; }

h3 {
  font-family: "PTSans Narrow Bold", Arial, sans-serif;
  line-height: 120%;
  margin-bottom: 20px;
  text-transform: uppercase; }

h4 {
  font-family: "PTSans Narrow Bold", Arial, sans-serif;
  line-height: 120%;
  margin-bottom: 15px; }

h5 {
  font-family: "PTSans Narrow Bold", Arial, sans-serif;
  line-height: 120%;
  margin-bottom: 10px; }

.text_shadow {
  text-shadow: 0.125rem 0.125rem 0.063rem #000;
  text-shadow: 0.125rem 0.125rem 0.063rem rgba(0, 0, 0, 0.7); }

section {
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-top: 177.86666666666667%;
  position: relative;
  width: 100%; }

a {
  color: #00d1ff; }

#landing {
  overflow-x: hidden;
  position: relative; }

.wrapper {
  left: 50%;
  margin: 0 auto;
  position: absolute;
  top: 5%;
  height: 100%;
  transform: translateX(-50%);
  width: 80%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%); }
  .wrapper.static {
    position: static;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none; }

h1#logo {
  background-image: url(../img/longscroller/aion_logo.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  height: 0;
  position: relative;
  padding-top: 17%;
  margin: 0 auto;
  width: 40%;
  text-indent: -9999px;
  z-index: 11; }

h2.headline {
  background: linear-gradient(90deg, rgba(4, 5, 42, 0) 0%, rgba(4, 5, 42, 0.57887) 40%, rgba(4, 5, 42, 0.57607) 60%, rgba(4, 5, 42, 0) 100%);
  display: flex;
  font-size: 5vw;
  justify-content: center;
  margin: 30% auto 3%;
  padding: 3% 0;
  position: relative;
  text-align: center;
  width: auto;
  z-index: 12; }
  h2.headline::after {
    content: '';
    background: url(../img/longscroller/headline.png) center bottom no-repeat;
    background-size: 100%;
    display: block;
    padding-top: 9.4%;
    height: 0;
    left: 50%;
    position: absolute;
    bottom: 100%;
    transform: translateX(-50%);
    width: 100%; }
  h2.headline > span.line {
    background: #b9c2c3;
    background: linear-gradient(90deg, rgba(185, 194, 195, 0) 0%, #b9c2c3 45%, #b9c2c3 55%, rgba(185, 194, 195, 0) 100%);
    height: 3px;
    position: absolute;
    width: 100%; }
    h2.headline > span.line.top {
      top: -3px; }
    h2.headline > span.line.bottom {
      bottom: -3px; }
  h2.headline > span.text {
    align-self: center; }

.separator {
  background: #0d111d;
  background: linear-gradient(90deg, #0d111d 0%, white 45%, white 55%, #0d111d 100%);
  height: 3px;
  width: 100%; }

/*------------------------------------*\
  ### Buttons Mobile ###
--------------------------------------*/
.btn_default {
  background: #70a131;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(#70a131 0%, #83b642 49%, #5d8a22 50%);
  background: -o-linear-gradient(#70a131 0%, #83b642 49%, #5d8a22 50%);
  background: linear-gradient(#70a131 0%, #83b642 49%, #5d8a22 50%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  box-shadow: inset 0 2px 1px #c1d6a6, inset 2px 0 2px #76a736, inset -2px -2px 1px #172208;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "PTSans Narrow Bold", Arial, sans-serif;
  line-height: 100%;
  margin: 0 auto 0;
  padding: 1rem 2rem 1.25rem;
  position: relative;
  text-align: center;
  text-shadow: 1px 1px 5px #314f0a;
  text-decoration: none;
  vertical-align: middle; }
  .btn_default:hover {
    background: #7fb639;
    /* Old browsers */
    background: -moz-linear-gradient(top, #7fb639 0%, #92cb49 49%, #6ea628 50%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #7fb639 0%, #92cb49 49%, #6ea628 50%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #7fb639 0%, #92cb49 49%, #6ea628 50%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    box-shadow: inset 0 2px 1px #c1d6a6, inset 2px 0 2px #76a736, inset -2px -2px 1px #172208; }
  .btn_default:active {
    background: #6ea628;
    /* Old browsers */
    box-shadow: inset 0 -2px 1px #c1d6a6, inset -2px 0 2px #76a736, inset 2px 2px 1px #172208; }

.btn_video {
  background: #50e5ee;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(#50e5ee 0%, #0fc4db 49%, #1489bf 50%);
  background: -o-linear-gradient(#50e5ee 0%, #0fc4db 49%, #1489bf 50%);
  background: linear-gradient(#50e5ee 0%, #0fc4db 49%, #1489bf 50%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  box-shadow: inset 0 2px 1px #88ffff, inset 2px 0 2px #1685ae, inset -2px -2px 1px #042035, 0 0 2px #000;
  cursor: pointer;
  border: 1px solid #000;
  height: 40px;
  left: 50%;
  position: absolute;
  top: 48%;
  text-indent: -9999px;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
  -moz-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transition: transform 0.3s ease, color 0.3s ease;
  -webkit-transition: transform 0.3s ease, color 0.3s ease;
  -moz-transition: transform 0.3s ease, color 0.3s ease;
  -ms-transition: transform 0.3s ease, color 0.3s ease;
  -o-transition: transform 0.3s ease, color 0.3s ease;
  width: 58px; }
  .btn_video:after {
    border-color: transparent transparent transparent #ffffff;
    border-style: solid;
    border-width: 9px 0 9px 14px;
    content: '';
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%); }
  .btn_video:hover, .btn_video.active {
    background: #7feef5;
    background: linear-gradient(180deg, #7feef5 0%, #0dd2e9 50%, #3ab9d7 50%, #2da3d7 100%);
    box-shadow: inset 0 2px 1px #d1ffff, inset 2px 0 2px #1685ae, inset -2px -2px 1px #042035, 0 0 2px #000; }
  .btn_video:active {
    background: #1786a7;
    background: linear-gradient(180deg, #1786a7 0%, #0c95b7 50%, #1288b5 50%, #129fca 100%);
    box-shadow: inset 0 2px 1px #093948, inset 2px 0 2px #1685ae, inset -2px -2px 1px #8ccae2, 0 0 2px #000; }

.login {
  border: 2px solid #fff;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  display: inline-block;
  padding: 4px 30px;
  position: absolute;
  left: 5%;
  text-decoration: none;
  transform: scale(1);
  transition: all .3s ease-out;
  top: 2%;
  z-index: 11; }

.login:hover {
  background: #17a4de;
  transform: scale(1.1);
  transition: all .3s ease-out; }

/*------------------------------------*\
  ### Menu Mobile ###
--------------------------------------*/
#menuMobile {
  margin: 20% auto 5%;
  opacity: 1;
  text-align: center;
  width: 90%;
  z-index: 21; }

#scroll,
#menu,
#menu2 {
  display: none; }

.border {
  border-color: black;
  border-image: url(../img/longscroller/border.jpg) 5 round;
  border-style: solid;
  border-width: 5px; }

#videoPreview {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 80%; }
  #videoPreview .video {
    background: white;
    position: relative;
    margin: 10% auto;
    padding-top: 49.80198019802%;
    width: 90.16393442623%; }
    #videoPreview .video > span {
      background: rgba(0, 0, 0, 0.5);
      bottom: 0;
      color: #fff;
      position: absolute;
      padding: 2% 0;
      text-align: center;
      text-transform: uppercase;
      width: 100%; }
    #videoPreview .video.gameplay {
      right: 0; }
      #videoPreview .video.gameplay #vid1 {
        background: url(../img/longscroller/USP_trailer.jpg) center center no-repeat;
        background-size: 100%; }
    #videoPreview .video.trailer {
      left: 0; }
      #videoPreview .video.trailer #vid2 {
        background: url(../img/longscroller/TV_trailer.jpg) center center no-repeat;
        background-size: 100%; }
  #videoPreview #vid1,
  #videoPreview #vid2 {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: transform .3s ease;
    width: 100%;
    -webkit-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -ms-transition: transform .3s ease;
    -o-transition: transform .3s ease; }

#vidBG {
  display: none; }

/*------------------------------------*\
  ### Start Panel Mobile ###
--------------------------------------*/
#start {
  background-image: url(../img/longscroller/mobile/section_start_bg_smartphone.jpg);
  overflow: visible;
  padding-top: 218%;
  width: 100%; }
  #start .wrapper {
    width: 90%; }

/*------------------------------------*\
  ### Panel One Mobile ###
--------------------------------------*/
#one {
  background-image: url(../img/longscroller/mobile/section_one_bg_smartphone.jpg); }
  #one .wrapper {
    top: 0;
    height: 100%;
    width: 100%; }

.features {
  background: #000;
  opacity: 0;
  padding: 4%;
  position: absolute;
  margin: 0 auto;
  top: auto;
  bottom: 0;
  width: 92%; }
  .features .feature_list {
    list-style-image: url(../img/longscroller/bullet.png);
    line-height: 140%;
    padding: 0 0 0 20px;
    transform: translateY(-15px); }
    .features .feature_list > li {
      padding: 0.65rem; }

.list {
  padding-left: 2%; }
  .list li {
    list-style-type: disc; }

section.shown .features {
  animation-name: back;
  animation-duration: .8s;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards; }
  section.shown .features h3 {
    animation-name: headlines;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }
  section.shown .features p,
  section.shown .features .feature_list {
    animation-name: headlines;
    animation-duration: .8s;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards; }

/*------------------------------------*\
  ### Panel Two Mobile ###
--------------------------------------*/
#two {
  background-image: url(../img/longscroller/mobile/section_two_bg_smartphone.jpg); }
  #two .wrapper {
    top: 0;
    height: 100%;
    width: 100%; }

/*------------------------------------*\
  ### Panel Three Mobile ###
--------------------------------------*/
#three {
  background-image: url(../img/longscroller/mobile/section_three_bg_smartphone.jpg); }
  #three .wrapper {
    top: 0;
    height: 100%;
    width: 100%; }

/*------------------------------------*\
  ### Media Mobile ###
--------------------------------------*/
#media {
  background-image: url(../img/longscroller/mobile/section_media_bg_smartphone.jpg);
  padding: 2% 0; }

#mediaSlider {
  padding: 8% 0; }
  #mediaSlider h3 {
    margin-bottom: 5%;
    text-align: center; }

.caption {
  display: none; }

.sliderNav > .active {
  transform: scale(1.05, 1.05);
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05); }

.sliderNavScroller,
.slidesScroller {
  background: #000;
  overflow: hidden;
  width: 100%; }

.sliderNav,
.slides {
  position: relative;
  list-style: none;
  padding: 0;
  width: 100%; }

.sliderNav li,
.slide {
  float: left; }

.lazyLoading {
  position: relative; }
  .lazyLoading:before {
    background: url("../img/longscroller/slider/loader.gif") center center no-repeat;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    content: '';
    position: absolute;
    top: 150px;
    left: 50%; }

.sliderNav li {
  width: 200px; }

.sliderDots {
  padding: 2% 0 6%;
  text-align: center; }

.sliderDot,
.sliderDotActive {
  background: #9e9fa3;
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  margin: 0 3px;
  width: 10px; }

.sliderDotActive {
  background: #00b6ff; }

/*------------------------------------*\
  ### System Mobile ###
--------------------------------------*/
#system {
  background-image: url(../img/longscroller/mobile/section_system_bg_smartphone.jpg);
  height: auto;
  padding: 10% 0; }
  #system > .wrapper {
    position: static;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none; }

#requirements {
  display: none; }

#requirementsMobile {
  margin: 0 auto 4em;
  max-width: 24em;
  text-align: left; }
  #requirementsMobile > div {
    background: #000;
    margin: 0 0 0.5em;
    overflow: hidden; }
    #requirementsMobile > div .dropdown {
      background: url(../img/longscroller/arrow.svg) center center no-repeat; }
    #requirementsMobile > div > div {
      display: flex;
      flex-direction: column;
      max-height: 0;
      -webkit-transition: max-height .6s ease-in-out;
      -moz-transition: max-height .6s ease-in-out;
      -ms-transition: max-height .6s ease-in-out;
      -o-transition: max-height .6s ease-in-out;
      transition: max-height .6s ease-in-out; }
      #requirementsMobile > div > div > div {
        line-height: 140%;
        padding: 2% 5%; }
        #requirementsMobile > div > div > div:nth-child(odd) {
          background: #1a1a1a; }
        #requirementsMobile > div > div > div:nth-child(even) {
          background: #000; }
    #requirementsMobile > div.open .dropdown {
      transform: rotate(-90deg); }
    #requirementsMobile > div.open > div {
      max-height: 500px;
      -webkit-transition: max-height .6s ease-in-out;
      -moz-transition: max-height .6s ease-in-out;
      -ms-transition: max-height .6s ease-in-out;
      -o-transition: max-height .6s ease-in-out;
      transition: max-height .6s ease-in-out; }

.head {
  font-family: "PTSans Narrow Bold", Arial, sans-serif;
  font-size: 5.5vw;
  padding: 2% 5%;
  display: inline-block;
  width: 90%; }

.dropdown {
  transform: rotate(90deg);
  display: inline-block;
  height: 20px;
  margin: 0 10px 0 0;
  width: 16px; }

/*------------------------------------*\
  ### Classes Mobile ###
--------------------------------------*/
#classes {
  background-image: url(../img/longscroller/mobile/section_classes_bg_smartphone.jpg);
  background-color: #fff;
  padding: 5% 0; }
  #classes .wrapper {
    transform: none; }
    #classes .wrapper h3 {
      text-align: center; }
  #classes .desc {
    background: #000;
    padding: 7% 8%;
    z-index: 2; }
    #classes .desc h4 {
      font-size: 8vw;
      font-weight: 400;
      text-transform: uppercase;
      position: relative; }
    #classes .desc .badge {
      background-image: url(../img/longscroller/classes/badge.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100%;
      content: '';
      display: block;
      padding-top: 14%;
      position: absolute;
      right: 0;
      top: 0;
      width: 14%; }
  #classes .class1 .badge {
    background-image: url(../img/longscroller/classes/badge_gladiator.png); }
  #classes .class2 .badge {
    background-image: url(../img/longscroller/classes/badge_templar.png); }
  #classes .class3 .badge {
    background-image: url(../img/longscroller/classes/badge_ranger.png); }
  #classes .class4 .badge {
    background-image: url(../img/longscroller/classes/badge_assassin.png); }
  #classes .class5 .badge {
    background-image: url(../img/longscroller/classes/badge_sorcerer.png); }
  #classes .class6 .badge {
    background-image: url(../img/longscroller/classes/badge_spiritmaster.png); }
  #classes .class7 .badge {
    background-image: url(../img/longscroller/classes/badge_cleric.png); }
  #classes .class8 .badge {
    background-image: url(../img/longscroller/classes/badge_painter.png); }
  #classes .class9 .badge {
    background-image: url(../img/longscroller/classes/badge_gunner.png); }
  #classes .class10 .badge {
    background-image: url(../img/longscroller/classes/badge_aethertech.png); }
  #classes .class11 .badge {
    background-image: url(../img/longscroller/classes/badge_bard.png); }
  #classes .class12 .badge {
    background-image: url(../img/longscroller/classes/badge_chanter.png); }

#classNavi {
  align-items: center;
  display: flex;
  flex-basis: 17%;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10% auto 0;
  width: 80%; }
  #classNavi > div {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 2px solid #000;
    cursor: pointer;
    margin-bottom: 4%;
    padding-top: 20%;
    transform: scale(1);
    transition: transform .4s ease-out;
    width: 20%; }
    #classNavi > div:hover, #classNavi > div.active {
      border: 2px solid #02b4ff;
      transform: scale(1.15);
      transition: transform .4s ease-out; }

#classNavi .class1 {
  background-image: url(../img/longscroller/classes/gladiator_navi.jpg); }

#classNavi .class2 {
  background-image: url(../img/longscroller/classes/templar_navi.jpg); }

#classNavi .class3 {
  background-image: url(../img/longscroller/classes/ranger_navi.jpg); }

#classNavi .class4 {
  background-image: url(../img/longscroller/classes/assassin_navi.jpg); }

#classNavi .class5 {
  background-image: url(../img/longscroller/classes/sorcerer_navi.jpg); }

#classNavi .class6 {
  background-image: url(../img/longscroller/classes/spiritmaster_navi.jpg); }

#classNavi .class7 {
  background-image: url(../img/longscroller/classes/cleric_navi.jpg); }

#classNavi .class8 {
  background-image: url(../img/longscroller/classes/chanter_navi.jpg); }

#classNavi .class9 {
  background-image: url(../img/longscroller/classes/gunner_navi.jpg); }

#classNavi .class10 {
  background-image: url(../img/longscroller/classes/aethertech_navi.jpg); }

#classNavi .class11 {
  background-image: url(../img/longscroller/classes/bard_navi.jpg); }

#classNavi .class12 {
  background-image: url(../img/longscroller/classes/painter_navi.jpg); }

.class_desc {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  .class_desc > * {
    width: 100%; }
  .class_desc > ul li {
    margin-bottom: 10px; }

.class_video {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  padding-top: 54%;
  position: relative;
  margin: 10% auto 12%;
  width: 94%; }

.skill {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px; }
  .skill p:first-child {
    width: 30%; }
  .skill p:last-child {
    text-align: end;
    width: 13%; }

.skills h5 {
  width: 100%; }
.skills .skills_desc {
  display: flex;
  justify-content: space-between;
  flex-direction: column; }
  .skills .skills_desc > div {
    width: 100%; }

.skillbar {
  background: rgba(255, 255, 255, 0.4);
  height: 10px;
  position: relative;
  width: 57%; }
  .skillbar span {
    background: #fff;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 0; }
    .skillbar span.bar90 {
      width: 78%; }
    .skillbar span.bar95 {
      width: 82%; }
    .skillbar span.bar100 {
      width: 86%; }
    .skillbar span.bar105 {
      width: 91%; }
    .skillbar span.bar110 {
      width: 95%; }
    .skillbar span.bar115 {
      width: 100%; }

.class1 .class_video {
  background-image: url(../img/longscroller/classes/thumb_gladiator.jpg); }

.class2 .class_video {
  background-image: url(../img/longscroller/classes/thumb_templar.jpg); }

.class3 .class_video {
  background-image: url(../img/longscroller/classes/thumb_ranger.jpg); }

.class4 .class_video {
  background-image: url(../img/longscroller/classes/thumb_assassin.jpg); }

.class5 .class_video {
  background-image: url(../img/longscroller/classes/thumb_spiritmaster.jpg); }

.class6 .class_video {
  background-image: url(../img/longscroller/classes/thumb_sorcerer.jpg); }

.class7 .class_video {
  background-image: url(../img/longscroller/classes/thumb_cleric.jpg); }

.class8 .class_video {
  background-image: url(../img/longscroller/classes/thumb_chanter.jpg); }

.class9 .class_video {
  background-image: url(../img/longscroller/classes/thumb_gunner.jpg); }

.class10 .class_video {
  background-image: url(../img/longscroller/classes/thumb_aethertec.jpg); }

.class11 .class_video {
  background-image: url(../img/longscroller/classes/thumb_bard.jpg); }

.class12 .class_video {
  background-image: url(../img/longscroller/classes/thumb_painter.jpg); }

.class1 .class_badge {
  background-image: url(../img/longscroller/classes/badge_gladiator.png); }

.class2 .class_badge {
  background-image: url(../img/longscroller/classes/badge_templar.png); }

.class3 .class_badge {
  background-image: url(../img/longscroller/classes/badge_ranger.png); }

.class4 .class_badge {
  background-image: url(../img/longscroller/classes/badge_assassin.png); }

.class5 .class_badge {
  background-image: url(../img/longscroller/classes/badge_spiritmaster.png); }

.class6 .class_badge {
  background-image: url(../img/longscroller/classes/badge_sorcerer.png); }

.class7 .class_badge {
  background-image: url(../img/longscroller/classes/badge_cleric.png); }

.class8 .class_badge {
  background-image: url(../img/longscroller/classes/badge_chanter.png); }

.class9 .class_badge {
  background-image: url(../img/longscroller/classes/badge_gunner.png); }

.class10 .class_badge {
  background-image: url(../img/longscroller/classes/badge_aethertech.png); }

.class11 .class_badge {
  background-image: url(../img/longscroller/classes/badge_bard.png); }

.class12 .class_badge {
  background-image: url(../img/longscroller/classes/badge_painter.png); }

.tabcontent {
  display: block; }

.tabcontent.hidden {
  display: none; }

/*------------------------------------*\
  ### Register Mobile ###
--------------------------------------*/
#register {
  background-image: url(../img/longscroller/mobile/section_register_bg_smartphone.jpg);
  padding: 10% 0; }
  #register > .wrapper {
    position: static;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none; }

#registerForm {
  background: #000;
  padding: 5% 8%; }
  #registerForm form > input {
    margin: 5% 0;
    width: 100%; }

label,
input {
  border: none;
  display: block;
  margin: 0 0 3% 0;
  text-align: left;
  width: 100%; }

input {
  background: #bebcbc;
  /* Old browsers */
  background: -moz-linear-gradient(top, #bebcbc 0%, #e7e7e7 22%, #ffffff 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bebcbc), color-stop(22%, #e7e7e7), color-stop(100%, #ffffff));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #bebcbc 0%, #e7e7e7 22%, #ffffff 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #bebcbc 0%, #e7e7e7 22%, #ffffff 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #bebcbc 0%, #e7e7e7 22%, #ffffff 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #bebcbc 0%, #e7e7e7 22%, #ffffff 100%);
  /* W3C */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  color: #4a2d11;
  display: block;
  font-size: 16px;
  height: auto;
  margin: 0;
  padding: 2% 3%;
  width: 94%; }
  input:focus {
    outline: none; }
  input.error {
    border-color: #bb2527;
    background-color: #fff;
    color: #bb2527; }
  input.ok {
    background-color: #fff;
    border-color: SKYBLUE;
    color: SKYBLUE; }

label {
  font-family: "PTSans Narrow Bold", Arial, sans-serif;
  line-height: 100%;
  margin: 10px 0; }

.input_wrapper {
  background: #fff;
  margin: 0 0 20px;
  padding: 3px;
  position: relative; }
  .input_wrapper.focusOk {
    background: #00d1ff;
    position: relative; }
  .input_wrapper.fieldOk {
    background: #00d1ff; }
  .input_wrapper.fieldError {
    background: #cf0012; }
  .input_wrapper.focusOk:after {
    content: '';
    display: block;
    height: 56px;
    position: absolute;
    top: -6px;
    left: -6px;
    width: 378px; }

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  border: 0;
  outline: none;
  -webkit-text-fill-color: #4a2d11;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); }

input.error,
input.error:-webkit-autofill,
input.error:-webkit-autofill:hover,
input.error:-webkit-autofill:focus {
  background-image: url(../img/remarketing/FieldError.svg) !important;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 85%;
  background-color: #fff !important;
  /* Old browsers */
  background-color: -moz-linear-gradient(top, #bebcbc 0%, #e7e7e7 22%, #ffffff 100%);
  /* FF3.6+ */
  background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bebcbc), color-stop(22%, #e7e7e7), color-stop(100%, #ffffff));
  /* Chrome,Safari4+ */
  background-color: -webkit-linear-gradient(top, #bebcbc 0%, #e7e7e7 22%, #ffffff 100%);
  /* Chrome10+,Safari5.1+ */
  background-color: -o-linear-gradient(top, #bebcbc 0%, #e7e7e7 22%, #ffffff 100%);
  /* Opera 11.10+ */
  background-color: -ms-linear-gradient(top, #bebcbc 0%, #e7e7e7 22%, #ffffff 100%);
  /* IE10+ */
  background-color: linear-gradient(to bottom, #bebcbc 0%, #e7e7e7 22%, #ffffff 100%);
  /* W3C */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  color: #bb2527 !important; }

input.ok,
input.ok:-webkit-autofill,
input.ok:-webkit-autofill:hover,
input.ok:-webkit-autofill:focus {
  background-image: url(../img/remarketing/FieldOk.svg) !important;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 85%;
  background-color: #fff !important; }

.password_info::after,
.error_info::after {
  border-style: solid;
  border-width: 0.5em 0.75em 0.5em 0;
  border-color: transparent #cb0101 transparent transparent;
  content: '';
  display: block;
  height: 0;
  left: -0.75em;
  position: absolute;
  top: 1em;
  width: 0; }

.password_info:after {
  background-position: 0 -193px;
  border-color: transparent #00b4ff transparent transparent; }

.password_info,
.error_info {
  background: #8b0202;
  border: 3px solid #cb0101;
  color: #fff;
  display: none;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 13px;
  height: auto;
  line-height: 120%;
  letter-spacing: 0;
  opacity: 0;
  padding: 12px 15px;
  position: absolute;
  top: 0;
  z-index: 201; }
  .password_info.shown,
  .error_info.shown {
    bottom: auto;
    display: table;
    left: 102%;
    max-width: 400px;
    min-width: 200px;
    opacity: 1;
    top: -10px;
    -webkit-animation-duration: .3s;
    -webkit-animation-name: fadeIn;
    width: auto; }

.password_info,
.password_info2 {
  border: 2px solid #00b4ff;
  bottom: 30px;
  background: #fff;
  box-shadow: 0 0 10px #000;
  color: #000;
  display: none;
  min-width: 200px;
  opacity: 1;
  right: -13px;
  top: auto;
  width: auto; }
  .password_info strong,
  .password_info2 strong {
    font-weight: bold; }

.password_info2:after {
  border-color: #00b4ff transparent transparent transparent;
  border-style: solid;
  border-width: 0.625em 0.375em 0 0.375em;
  bottom: -0.625em;
  height: 0;
  left: auto;
  right: 1em;
  top: auto;
  width: 0; }

.password_info > ul {
  list-style-image: url("../img/longscroller/bullet.png");
  padding-left: 18px;
  margin: 4px 0 8px 0; }

.helpIcon,
.password_info_off {
  background: transparent;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  height: 1.2em;
  margin-left: 5px;
  margin-top: -3px;
  text-align: center;
  width: 18px;
  vertical-align: middle; }

.helpIcon:hover,
.password_info_on {
  background: #fff;
  background: rgba(255, 255, 255, 0.9);
  color: #000; }

.error_info {
  border: 3px solid #cb0101;
  color: #ffe0e3; }

.register_error {
  position: unset; }

.register_error::after {
  display: none; }

.main_error {
  border: 3px solid #cb0101;
  color: #ffe0e3; }

.positioner {
  position: relative;
  display: inline-block; }

.helpIcon,
.password_info_off {
  background: transparent;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  height: 1.2em;
  margin-left: 5px;
  margin-top: -3px;
  text-align: center;
  width: 18px;
  vertical-align: middle; }

.helpIcon:hover,
.password_info_on {
  background: #fff;
  background: rgba(255, 255, 255, 0.9);
  color: #000; }

.password_info strong {
  font-weight: bold; }
.password_info > ul {
  list-style-image: url("../img/longscroller/bullet.png");
  padding-left: 18px;
  margin: 4px 0 8px 0; }

.password_info,
.password_info2 {
  border: 2px solid #00b4ff;
  bottom: 30px;
  background: #fff;
  box-shadow: 0 0 10px #000;
  color: #000;
  display: none;
  min-width: 200px;
  opacity: 1;
  right: -13px;
  top: auto;
  width: auto; }
  .password_info:after,
  .password_info2:after {
    border-style: solid;
    border-width: 0.5em 0.75em 0.5em 0;
    border-color: transparent #00b4ff transparent transparent;
    content: '';
    display: block;
    height: 0;
    left: -0.75em;
    position: absolute;
    top: 1em;
    width: 0; }
  .password_info strong,
  .password_info2 strong {
    font-weight: bold; }

.password_info2:after {
  border-color: #00b4ff transparent transparent transparent;
  border-style: solid;
  border-width: 0.625em 0.375em 0 0.375em;
  bottom: -0.625em;
  height: 0;
  left: auto;
  right: 1em;
  top: auto;
  width: 0; }

/*------------------------------------*\
  ### Glossar Mobile ###
--------------------------------------*/
#glossar {
  padding: 5% 0 0; }
  #glossar .wrapper {
    color: #ccc;
    font-size: 15px;
    height: auto;
    line-height: 140%;
    margin: 0 auto;
    position: static;
    text-align: left;
    transform: none;
    width: 80%; }
    #glossar .wrapper h2 {
      margin: 0 auto; }
    #glossar .wrapper h3,
    #glossar .wrapper h4 {
      font-size: 2.25em;
      padding: 0 0 20px;
      text-align: center;
      text-transform: uppercase; }
    #glossar .wrapper h4 {
      padding: 0 0 10px;
      font-size: 1.75em;
      text-align: left; }
    #glossar .wrapper p {
      margin: 10px 0; }
    #glossar .wrapper .desc {
      margin-bottom: 40px; }
    #glossar .wrapper strong {
      color: #fff; }

/*------------------------------------*\
  ### Footer Mobile ###
--------------------------------------*/
footer {
  overflow: hidden;
  padding: 5% 10% 10%;
  text-align: center; }

.social {
  margin: 0 auto 5%;
  text-align: center; }
  .social h3 {
    margin: 1em; }
  .social .social_links {
    display: flex;
    justify-content: center; }
    .social .social_links > div {
      margin: 0 8px; }
      .social .social_links > div > a {
        background-color: #17a4de;
        background-position: center center;
        background-repeat: no-repeat;
        border: 2px solid #fff;
        cursor: pointer;
        display: block;
        height: 46px;
        text-indent: -9999px;
        transform: scale(1);
        transition: all .3s ease-out;
        width: 46px; }
        .social .social_links > div > a:hover {
          transform: scale(1.1);
          transition: all .3s ease-out; }
        .social .social_links > div > a.fb {
          background-image: url(../img/longscroller/fb.svg); }
          .social .social_links > div > a.fb:hover {
            background-color: #3B5998; }
        .social .social_links > div > a.tw {
          background-image: url(../img/longscroller/tw.svg); }
          .social .social_links > div > a.tw:hover {
            background-color: #1DA1F2; }
        .social .social_links > div > a.yt {
          background-image: url(../img/longscroller/yt.svg); }
          .social .social_links > div > a.yt:hover {
            background-color: #cc181e; }
        .social .social_links > div > a.insta {
          background-image: url(../img/longscroller/ig.svg); }
          .social .social_links > div > a.insta:hover {
            background-color: #a42895;
            background-image: url(../img/longscroller/ig.svg), linear-gradient(235deg, #a42895 0%, #cf1664 50%, #ee6f3e 100%); }

.logos_ranking {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto 20px;
  text-align: center; }
  .logos_ranking > div {
    display: flex;
    flex-direction: row;
    justify-content: center; }
  .logos_ranking a {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 5.5rem;
    margin: 5px 10px;
    text-indent: -9999px; }
    .logos_ranking a.gf {
      background-image: url(../img/longscroller/GFLogo.svg);
      width: 8rem; }
    .logos_ranking a.usk {
      background-image: url(../img/longscroller/USK_12.svg);
      width: 3rem; }
    .logos_ranking a.safeplay {
      background-image: url(../img/longscroller/safeplay.png);
      width: 3rem; }
    .logos_ranking a.pegi {
      background-image: url(../img/longscroller/PEGI_12.svg);
      width: 3rem; }
    .logos_ranking a.game {
      background-image: url(../img/longscroller/NC-white.png);
      background-position: center center;
      background-size: 50%;
      width: 8rem; }

.games {
  margin-bottom: 20px; }

.legal {
  color: #fff;
  line-height: 130%; }
  .legal > p {
    margin: 1em 0 0; }
    .legal > p:after {
      background: rgba(140, 140, 140, 0.7);
      background: -moz-linear-gradient(left, rgba(140, 140, 140, 0) 0%, #8c8c8c 22%, #8c8c8c 78%, rgba(140, 140, 140, 0) 100%);
      /* FF3.6+ */
      background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(140, 140, 140, 0)), color-stop(22%, #8c8c8c), color-stop(78%, #8c8c8c), color-stop(100%, rgba(140, 140, 140, 0)));
      /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(left, rgba(140, 140, 140, 0) 0%, #8c8c8c 22%, #8c8c8c 78%, rgba(140, 140, 140, 0) 100%);
      /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(left, rgba(140, 140, 140, 0) 0%, #8c8c8c 22%, #8c8c8c 78%, rgba(140, 140, 140, 0) 100%);
      /* Opera 11.10+ */
      background: -ms-linear-gradient(left, rgba(140, 140, 140, 0) 0%, #8c8c8c 22%, #8c8c8c 78%, rgba(140, 140, 140, 0) 100%);
      /* IE10+ */
      background: linear-gradient(to right, rgba(140, 140, 140, 0) 0%, #8c8c8c 22%, #8c8c8c 78%, rgba(140, 140, 140, 0) 100%);
      /* W3C */
      content: '';
      display: block;
      height: 1px;
      margin: 1em 0 2em; }
    .legal > p:last-child::after {
      background: none; }
    .legal > p > a {
      color: #fff;
      font-family: "PTSans Narrow Bold", Arial, sans-serif;
      padding: 0 3px;
      text-transform: uppercase;
      text-decoration: underline; }
      .legal > p > a:hover {
        text-decoration: none; }
    .legal > p > span {
      border-left: 1px solid #fff;
      margin: 0 3px; }
      .legal > p > span:first-child {
        border-left: none; }

.extern_link:after {
  background: url(../img/longscroller/aion_landing_sprite.png) no-repeat 0 -57px;
  content: '';
  display: inline-block;
  margin: 0 0 0 0.375rem;
  height: 0.875rem;
  width: 0.875rem; }

.legal_line {
  margin: 22px 0 15px 0; }

/*------------------------------------*\
  ### Overlays Mobile ###
--------------------------------------*/
#overlayWrapper {
  height: 100%;
  text-align: center;
  width: auto; }
  #overlayWrapper > div {
    background: #000;
    margin: 0 auto;
    padding: 20px;
    position: relative; }
    #overlayWrapper > div > div {
      display: none; }

.overlay {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  height: 100%;
  display: block;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: 1000;
  transition: transform 0.6s, opacity 0.6s, visibility 0.6s;
  -moz-transition: transform 0.6s, opacity 0.6s, visibility 0.6s;
  -webkit-transition: transform 0.6s, opacity 0.6s, visibility 0.6s;
  -ms-transition: transform 0.6s, opacity 0.6s, visibility 0.6s;
  -o-transition: transform 0.6s, opacity 0.6s, visibility 0.6s; }
  .overlay.open {
    opacity: 1;
    visibility: visible; }

.close-overlay,
.close {
  background: #50e5ee;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(#50e5ee 0%, #0fc4db 49%, #1489bf 50%);
  background: -o-linear-gradient(#50e5ee 0%, #0fc4db 49%, #1489bf 50%);
  background: linear-gradient(#50e5ee 0%, #0fc4db 49%, #1489bf 50%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  box-shadow: inset 0 2px 1px #88ffff, inset 2px 0 2px #1685ae, inset -2px -2px 1px #042035, 0 0 2px #000;
  cursor: pointer;
  border: 1px solid #000;
  color: #fff;
  height: 40px;
  position: absolute;
  right: -20px;
  top: -25px;
  width: 40px; }
  .close-overlay:after,
  .close:after {
    content: 'X';
    display: block;
    height: 70%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; }
  .close-overlay:hover, .close-overlay.active,
  .close:hover,
  .close.active {
    background: #7feef5;
    background: linear-gradient(180deg, #7feef5 0%, #0dd2e9 50%, #3ab9d7 50%, #2da3d7 100%);
    box-shadow: inset 0 2px 1px #d1ffff, inset 2px 0 2px #1685ae, inset -2px -2px 1px #042035, 0 0 2px #000; }
  .close-overlay:active,
  .close:active {
    background: #1786a7;
    background: linear-gradient(180deg, #1786a7 0%, #0c95b7 50%, #1288b5 50%, #129fca 100%);
    box-shadow: inset 0 2px 1px #093948, inset 2px 0 2px #1685ae, inset -2px -2px 1px #8ccae2, 0 0 2px #000; }

.modal {
  background: #fff;
  left: 50%;
  position: absolute !important;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  -moz-transform: translate(-50%, -50%) !important;
  -ms-transform: translate(-50%, -50%) !important;
  -o-transform: translate(-50%, -50%) !important; }

#registerOverlay {
  display: none; }

/*------------------------------------*\
  ### Font Sizes Mobile ###
--------------------------------------*/
@media screen and (max-width: 768px) {
  h2 {
    font-size: 9vw; }

  h3 {
    font-size: 8vw; }

  h4 {
    font-size: 8vw; }

  h5 {
    font-size: 7vw; }

  .btn_default {
    font-size: 5vw; }

  #videoPreview .video > span {
    font-size: 4.838709677419355vw; }

  #requirements .column .head {
    font-size: 5vw; }

  input {
    font-size: 4vw; }

  label {
    font-size: 4.5vw; }

  .legal {
    font-size: 4vw; }

  .error_info,
  .password_info {
    font-size: 4vw; }

  #steamOverlay .btn_default {
    font-size: 4vw; }

  #steamOverlay .btn_default strong {
    font-size: 5vw; } }
/* - - - - - - - - - - - - - - - - - - - - - - - */
/* TABLET - - - - - - - - - - - - - - - - - - - –*/
/* - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (min-width: 768px) {
  /*------------------------------------*\
    ### Main Styles Tablet ###
  --------------------------------------*/
  body {
    font-size: 18px; }

  h1#logo {
    height: 0;
    padding-top: 20%;
    margin: 0 auto 30%;
    width: 45%; }

  h2 {
    font-size: 5vw;
    margin: 10% 0 35%; }

  h2.headline {
    font-size: 5vw; }

  h3 {
    font-size: 5.25vw; }

  h4 {
    font-size: 4vw; }

  h5 {
    font-size: 3vw; }

  .logo_positioner {
    width: 60%; }

  section {
    padding-top: 133.333333333333%; }

  #videoPreview {
    flex-direction: row;
    justify-content: center;
    width: auto; }
    #videoPreview .video {
      height: 148px;
      margin: 10% auto 5%;
      padding: 0;
      width: 264px; }
      #videoPreview .video > span {
        font-size: 3vw; }

  #menu {
    background: #000;
    bottom: -7%;
    display: block;
    left: auto;
    margin: 10% auto 5%;
    opacity: 1;
    padding: 18px 0 20px;
    position: absolute;
    width: 100%;
    z-index: 21; }
    #menu .inner {
      display: flex;
      justify-content: center; }

  #menuMobile {
    display: none; }

  .btn_default {
    font-size: 3vw;
    margin: 0 2%; }

  /*------------------------------------*\
    ### One Tablet ###
  --------------------------------------*/
  #start {
    background-image: url(../img/longscroller/tablet/section_start_bg_tablet.jpg);
    padding-top: 110%; }

  .wrapper {
    height: 90%;
    top: 5%; }

  .features {
    bottom: 5%;
    left: 6%;
    position: absolute;
    right: 6%;
    width: 78%; }

  /*------------------------------------*\
    ### One Tablet ###
  --------------------------------------*/
  #one {
    background-image: url(../img/longscroller/tablet/section_one_bg_tablet.jpg);
    padding-top: 127.604%; }

  /*------------------------------------*\
    ### Two Tablet ###
  --------------------------------------*/
  #two {
    background-image: url(../img/longscroller/tablet/section_two_bg_tablet.jpg);
    padding-top: 127.604%; }

  /*------------------------------------*\
    ### Three Tablet ###
  --------------------------------------*/
  #three {
    background-image: url(../img/longscroller/tablet/section_three_bg_tablet.jpg);
    padding-top: 127.604%; }

  /*------------------------------------*\
     ### Media Tablet ###
   --------------------------------------*/
  #media {
    background-image: url(../img/longscroller/tablet/section_media_bg_tablet.jpg); }

  #mediaSlider {
    padding: 4% 0 0; }
    #mediaSlider .tabs {
      cursor: pointer;
      display: flex;
      justify-content: center;
      font-family: "PTSans Narrow Bold", Arial, sans-serif;
      margin: 0 auto;
      position: relative;
      transition: all 0.4s linear;
      -webkit-transition: all 0.1s ease-out;
      z-index: 1; }
      #mediaSlider .tabs > li {
        color: rgba(255, 255, 255, 0.5);
        font-size: 4vw;
        line-height: 4vw;
        margin-right: 2rem;
        padding: 0.825rem 0;
        text-transform: uppercase; }
        #mediaSlider .tabs > li:hover, #mediaSlider .tabs > li.active {
          cursor: pointer;
          color: #fff;
          transition: all 0.4s linear;
          text-shadow: 0 0 15px #fff;
          -webkit-transition: all 0.4s linear;
          -moz-transition: all 0.4s linear;
          -ms-transition: all 0.4s linear;
          -o-transition: all 0.4s linear; }

  /*------------------------------------*\
     ### Classes Tablet ###
   --------------------------------------*/
  #classes {
    background-image: url(../img/longscroller/tablet/section_classes_bg_tablet.jpg); }
    #classes h3 {
      margin: 0 auto 20px; }
    #classes .desc {
      padding: 4% 5%;
      width: 90%; }
      #classes .desc h4 {
        font-size: 4vw; }
      #classes .desc .badge {
        padding-top: 7%;
        width: 7%; }
    #classes .class_desc {
      flex-direction: row; }
      #classes .class_desc > * {
        width: 47%; }
    #classes .class_video {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
      padding-top: 26.5%;
      position: relative;
      margin: 0;
      width: 44%; }

  .list {
    padding-left: 20px; }

  #classNavi {
    margin: 5% auto 0; }
    #classNavi > div {
      background-position: center center;
      background-repeat: no-repeat;
      padding-top: 14%;
      transform: scale(1);
      transition: transform .4s ease-out;
      width: 14%; }

  .class_video {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    padding-top: 42%;
    position: relative;
    margin: 5% auto;
    width: 70%; }

  .skills {
    font-size: 2vw;
    margin-top: 3%; }
    .skills h4 {
      margin-bottom: 4%; }
    .skills .skills_desc {
      justify-content: space-between;
      flex-direction: row; }
      .skills .skills_desc > div {
        width: 46%; }

  /*------------------------------------*\
     ### System Tablet ###
   --------------------------------------*/
  #system {
    background-image: url(../img/longscroller/tablet/section_system_bg_tablet.jpg); }

  /*------------------------------------*\
     ### Register Tablet ###
   --------------------------------------*/
  #register {
    background-image: url(../img/longscroller/tablet/section_register_bg_tablet.jpg); }

  #registerForm form {
    text-align: center; }
    #registerForm form p,
    #registerForm form h4 {
      text-align: left; }
    #registerForm form > button {
      margin: 5% auto;
      width: auto; }

  input,
  label {
    font-size: 3vw; }

  .password_info,
  .error_info {
    font-size: 2.5vw; }

  /*------------------------------------*\
     ### Requirements Tablet ###
   --------------------------------------*/
  #requirements {
    display: block;
    margin: 2% 0 0;
    overflow: hidden;
    position: relative;
    text-align: center; }
    #requirements table {
      border-collapse: collapse;
      border-spacing: 0;
      color: #fff;
      font-size: 0.875rem;
      line-height: 150%;
      margin: 0 auto;
      position: relative;
      text-align: left;
      z-index: 1; }
      #requirements table span {
        white-space: nowrap; }
      #requirements table > colgroup > col.name {
        width: 18%; }
      #requirements table > colgroup > col.min,
      #requirements table > colgroup > col.max {
        width: 41%; }
      #requirements table tr {
        background-color: #000; }
      #requirements table > thead > tr {
        font-size: 1.25rem;
        font-family: "PTSans Narrow Bold", Arial, sans-serif; }
      #requirements table > tbody > tr {
        margin: 2px; }
      #requirements table > thead > tr > td,
      #requirements table > tbody > tr > td {
        padding: 0.75rem 2rem; }
      #requirements table > tbody tr:nth-child(odd) {
        background-color: #1a1a1a; }
      #requirements table > tbody tr td:nth-child(1) {
        font-weight: bold;
        text-align: right; }

  #requirementsMobile {
    display: none; }

  /*------------------------------------*\
     ### Footer Tablet ###
   --------------------------------------*/
  .logos_ranking > div {
    display: flex;
    justify-content: space-between; }
    .logos_ranking > div > span {
      margin: 2%; }

  .legal {
    font-size: 2vw; } }
/* - - - - - - - - - - - - - - - - - - - - - - - */
/* DESKTOP - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (min-width: 1024px) {
  /*------------------------------------*\
    ### Main Styles Desktop ###
  --------------------------------------*/
  :focus {
    outline: none; }

  h1#logo {
    height: 0;
    padding-top: 7.3%;
    top: 10%;
    margin: 0 auto;
    width: 17.7%; }

  h2.headline {
    font-size: 2.25vw;
    padding: 1.5% 0;
    margin: 11% auto 3%;
    text-align: center;
    width: 47.5%; }

  h3 {
    font-size: 1.875vw; }

  h4 {
    font-size: 1.25vw; }

  h5 {
    font-size: 1.25vw; }

  .logo_positioner {
    left: 50%;
    margin: 0;
    position: absolute;
    top: 5%;
    transform: translateX(-50%);
    width: 35%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%); }

  .main_border_left,
  .main_border_right {
    height: 100%;
    position: absolute;
    top: 0;
    width: 3.750em;
    z-index: 101; }

  .main_border_left {
    background: url(../img/longscroller/black_border_left.png) top left repeat-y;
    left: 0; }

  .main_border_right {
    background: url(../img/longscroller/black_border_right.png) top right repeat-y;
    right: 0; }

  /*------------------------------------*\
    ### Scroll Desktop ###
  --------------------------------------*/
  #scroll {
    bottom: 50%;
    display: block;
    height: 420px;
    position: fixed;
    right: 5%;
    transform: translateY(-50%);
    top: 50%;
    width: 40px;
    z-index: 102; }
    #scroll > ul > li.active,
    #scroll > ul > li {
      border-radius: 20px;
      height: 40px;
      line-height: 40px;
      margin: 0 0 10px 0;
      position: relative;
      width: 40px; }
    #scroll > ul > li:after,
    #scroll > ul > li:before {
      background: white;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 6px;
      content: '';
      display: block;
      height: 12px;
      left: 14px;
      position: absolute;
      top: 14px;
      width: 12px; }
    #scroll > ul > li:before,
    #scroll > ul.selected_section_0 > li.active:before {
      background: #fff;
      background: rgba(255, 255, 255, 0.7);
      transition: all 1s linear;
      -webkit-transition: all .4s ease-out;
      -moz-transition: all .4s ease-out; }
    #scroll > ul.selected_section_0 > li:before {
      background: #999;
      background: rgba(0, 0, 0, 0.7); }
    #scroll > ul > li:not(.active):hover:before {
      background: #00b4ff;
      border-radius: 20px;
      margin: -14px 0 0 -14px;
      height: 40px;
      transition: all 1s linear;
      -webkit-transition: all .4s ease-out;
      -moz-transition: all .4s ease-out;
      width: 40px; }
    #scroll > ul > li:not(.active):hover {
      cursor: pointer; }
    #scroll > ul > li:hover:after {
      background: white; }
    #scroll > ul > li.active {
      background: #00b4ff; }
    #scroll > ul > li:nth-child(2).active,
    #scroll > ul > li:nth-child(2):hover:before {
      background: #abd557; }
    #scroll > ul > li:nth-child(3).active,
    #scroll > ul > li:nth-child(3):hover:before {
      background: #5069df; }
    #scroll > ul > li:nth-child(4).active,
    #scroll > ul > li:nth-child(4):hover:before {
      background: #29a9e8; }
    #scroll > ul > li:nth-child(5).active,
    #scroll > ul > li:nth-child(5):hover:before {
      background: #07155c; }
    #scroll > ul > li:nth-child(6).active,
    #scroll > ul > li:nth-child(6):hover:before {
      background: #616942; }
    #scroll > ul > li:nth-child(7).active,
    #scroll > ul > li:nth-child(7):hover:before {
      background: #b63941; }

  section {
    background-size: 100%;
    padding-top: 44.2708333334%; }

  /*------------------------------------*\
    ### Start Section Desktop ###
  --------------------------------------*/
  #start {
    background-image: url(../img/longscroller/desktop/start_bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 44.2708333334%; }
    #start .wrapper {
      top: 0;
      height: 100%;
      width: 100%;
      z-index: 0; }

  #videoPreview {
    left: 0;
    margin: 0;
    right: 0;
    position: absolute;
    width: 100%;
    z-index: 11; }
    #videoPreview .video {
      height: 0;
      margin: 0 2%;
      padding-top: 7.7083333333%;
      width: 13.75%; }
      #videoPreview .video > span {
        font-size: 1vw; }

  #vidBG {
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 10; }
    #vidBG > video {
      object-fit: fill;
      height: 100%;
      width: 100%; }

  /*------------------------------------*\
    ### Menu Desktop ###
  --------------------------------------*/
  #menu {
    left: 0;
    margin: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    text-align: center;
    width: 100%; }
    #menu .inner {
      position: relative; }
      #menu .inner.hidden button {
        opacity: .6; }
    #menu.sticky {
      bottom: inherit;
      opacity: 1;
      position: fixed;
      top: 0;
      transition: top .5s, opacity .5s;
      z-index: 100;
      -webkit-transition: top .5s, opacity .5s;
      -moz-transition: top .5s, opacity .5s;
      -ms-transition: top .5s, opacity .5s;
      -o-transition: top .5s, opacity .5s; }
    #menu.hidden > button {
      opacity: 0.6; }

  /*------------------------------------*\
    ### Buttons Desktop ###
  --------------------------------------*/
  .btn_default {
    font-size: 2vw; }

  /*------------------------------------*\
    ### MediaSlider Desktop ###
  --------------------------------------*/
  #mediaSlider {
    margin: 0 auto;
    padding: 1.25em 0;
    text-align: left;
    max-width: 50em;
    width: 75%;
    line-height: 0; }
    #mediaSlider .tabs {
      justify-content: flex-start; }
      #mediaSlider .tabs li {
        font-size: 2vw;
        line-height: 2vw; }
    #mediaSlider > h3 {
      background: rgba(0, 209, 255, 0.1);
      color: #fff;
      font-size: 2em;
      height: 2em;
      padding: 0 0.625rem;
      text-align: center;
      line-height: 2em; }
    #mediaSlider .sliderDots {
      display: none; }
    #mediaSlider .slide {
      float: left;
      overflow: hidden;
      position: relative; }
      #mediaSlider .slide .caption {
        background: rgba(0, 0, 0, 0.5);
        bottom: 0;
        display: block;
        left: 38px;
        line-height: 130%;
        right: 38px;
        padding: 20px 25px;
        position: absolute;
        z-index: 2; }
      #mediaSlider .slide img {
        height: 100%;
        width: 100%; }

  .sliderNav,
  .slides {
    position: relative;
    list-style: none;
    padding: 0;
    width: 100%; }

  .sliderNav li {
    box-sizing: border-box;
    cursor: pointer;
    float: left;
    overflow: hidden; }
    .sliderNav li img {
      filter: alpha(opacity=60);
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$procent)";
      -khtml-opacity: 0.6;
      -moz-opacity: 0.6;
      opacity: 0.6;
      transition: transform .5s;
      width: 100%;
      -webkit-transition: transform .5s;
      -moz-transition: transform .5s;
      -ms-transition: transform .5s;
      -o-transition: transform .5s; }
    .sliderNav li.active img, .sliderNav li:hover img {
      opacity: 1; }

  .scrollNavActive li {
    cursor: pointer; }

  .lazyLoading {
    position: relative;
    min-height: 1px; }
    .lazyLoading:before {
      background: url("../img/longscroller/slider/loader.gif") center center no-repeat;
      content: '';
      height: 32px;
      left: 50%;
      margin: -16px 0 0 -16px;
      position: absolute;
      top: 150px;
      width: 32px; }

  .sliderNavScroller,
  .slidesScroller {
    overflow: hidden;
    width: 100%; }

  .slidesScroller {
    margin-bottom: 25px; }

  .slidesWrapper,
  .sliderNavWrapper {
    margin: 0 auto;
    position: relative; }
    .slidesWrapper .prev,
    .slidesWrapper .next,
    .sliderNavWrapper .prev,
    .sliderNavWrapper .next {
      background-color: rgba(0, 0, 0, 0.7);
      bottom: 0;
      cursor: pointer;
      display: block;
      height: 100%;
      position: absolute;
      width: 38px;
      z-index: 99; }
      .slidesWrapper .prev:hover,
      .slidesWrapper .next:hover,
      .sliderNavWrapper .prev:hover,
      .sliderNavWrapper .next:hover {
        background: #000; }
      .slidesWrapper .prev:before,
      .slidesWrapper .next:before,
      .sliderNavWrapper .prev:before,
      .sliderNavWrapper .next:before {
        content: '';
        display: block;
        height: 22px;
        left: 50%;
        margin: -11px 0 0 -7px;
        position: absolute;
        top: 50%;
        width: 14px; }
    .slidesWrapper .prev,
    .sliderNavWrapper .prev {
      left: 0;
      transition: left .3s;
      -webkit-transition: left .3s;
      -moz-transition: left .3s;
      -ms-transition: left .3s;
      -o-transition: left .3s; }
      .slidesWrapper .prev:hover,
      .sliderNavWrapper .prev:hover {
        transition: left .3s;
        -webkit-transition: left .3s;
        -moz-transition: left .3s;
        -ms-transition: left .3s;
        -o-transition: left .3s; }
      .slidesWrapper .prev.prevInactive,
      .sliderNavWrapper .prev.prevInactive {
        opacity: 0.5;
        transition: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none; }
        .slidesWrapper .prev.prevInactive:hover,
        .sliderNavWrapper .prev.prevInactive:hover {
          cursor: default;
          opacity: 0.5;
          transition: none;
          -webkit-transition: none;
          -moz-transition: none;
          -ms-transition: none;
          -o-transition: none; }
      .slidesWrapper .prev:before, .slidesWrapper .prev:hover:before,
      .sliderNavWrapper .prev:before,
      .sliderNavWrapper .prev:hover:before {
        border-style: solid;
        border-width: 10px 15px 10px 0;
        border-color: transparent #fff transparent transparent;
        height: 0;
        width: 0; }
    .slidesWrapper .next,
    .sliderNavWrapper .next {
      right: 0;
      transition: right .3s; }
      .slidesWrapper .next:hover,
      .sliderNavWrapper .next:hover {
        transition: right .3s;
        -webkit-transition: right .3s;
        -moz-transition: right .3s;
        -ms-transition: right .3s;
        -o-transition: right .3s; }
      .slidesWrapper .next.nextInactive,
      .sliderNavWrapper .next.nextInactive {
        opacity: 0.5;
        transition: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none; }
        .slidesWrapper .next.nextInactive:hover,
        .sliderNavWrapper .next.nextInactive:hover {
          cursor: default;
          transition: none;
          -webkit-transition: none;
          -moz-transition: none;
          -ms-transition: none;
          -o-transition: none; }
      .slidesWrapper .next:before,
      .sliderNavWrapper .next:before {
        border-style: solid;
        border-width: 10px 0 10px 15px;
        border-color: transparent transparent transparent #fff;
        height: 0;
        width: 0; }

  /*------------------------------------*\
    ### One Section Desktop ###
  --------------------------------------*/
  #one {
    background-image: url(../img/longscroller/desktop/section_one_bg_1920.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    padding-top: 40%; }
    #one .wrapper {
      width: 62.5%; }

  .features {
    bottom: auto;
    font-size: 1vw;
    height: auto;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 34%; }

  /*------------------------------------*\
    ### Two Section Desktop ###
  --------------------------------------*/
  #two {
    background-image: url(../img/longscroller/desktop/section_two_bg_1920.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    padding-top: 40%; }
    #two .wrapper {
      width: 62.5%; }
    #two .features {
      left: 5%;
      transform: translateY(-50%); }

  /*------------------------------------*\
    ### Three Section Desktop ###
  --------------------------------------*/
  #three {
    background-image: url(../img/longscroller/desktop/section_three_bg_1920.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    padding-top: 40%; }
    #three .wrapper {
      width: 62.5%; }

  /*------------------------------------*\
    ### Media Section Desktop ###
  --------------------------------------*/
  #media {
    background-image: url(../img/longscroller/desktop/section_media_bg_1920.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 100%; }

  	/*------------------------------------*\
      ### System Desktop ###
    --------------------------------------*/
  #system {
    background-image: url(../img/longscroller/desktop/section_system_bg_1920.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    padding: 3% 0; }
    #system .wrapper {
      width: 62.5%; }

  /*------------------------------------*\
    ### Classes Desktop ###
  --------------------------------------*/
  #classes {
    background-image: url(../img/longscroller/desktop/classes_bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    display: block;
    position: relative;
    padding: 5% 0 2%; }
    #classes .wrapper .classes_content {
      display: flex;
      justify-content: space-between;
      position: relative; }
    #classes .desc {
      font-size: 1vw;
      left: 12%;
      line-height: 140%;
      padding: 2% 3%;
      width: 51.6%; }
      #classes .desc h4 {
        font-size: 1.75vw;
        margin-bottom: 5%; }
    #classes .chars {
      background: url(../img/longscroller/classes/ring.png) center 90% no-repeat;
      background-size: 100%;
      padding-top: 50.1953125%;
      position: absolute;
      right: -5%;
      height: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 45.5729166666667%; }

  .classes {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: none;
    top: 0;
    left: 0;
    padding-top: 100%;
    width: 100%;
    position: absolute;
    z-index: 1; }
    .classes.active {
      display: block; }
    .classes.class1 {
      background-image: url(../img/longscroller/classes/gladiator.png); }
    .classes.class2 {
      background-image: url(../img/longscroller/classes/templar.png); }
    .classes.class3 {
      background-image: url(../img/longscroller/classes/ranger.png); }
    .classes.class4 {
      background-image: url(../img/longscroller/classes/assassin.png); }
    .classes.class5 {
      background-image: url(../img/longscroller/classes/sorcerer.png); }
    .classes.class6 {
      background-image: url(../img/longscroller/classes/spiritmaster.png); }
    .classes.class7 {
      background-image: url(../img/longscroller/classes/cleric.png); }
    .classes.class8 {
      background-image: url(../img/longscroller/classes/chanter.png); }
    .classes.class9 {
      background-image: url(../img/longscroller/classes/gunner.png); }
    .classes.class10 {
      background-image: url(../img/longscroller/classes/aethertech.png); }
    .classes.class11 {
      background-image: url(../img/longscroller/classes/bard.png); }
    .classes.class12 {
      background-image: url(../img/longscroller/classes/painter.png); }

  #classNavi > div {
    padding-top: 6.75%;
    width: 6.75%; }

  .class_desc {
    flex-direction: row; }
    .class_desc > * {
      width: 47%; }

  .class_video {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    padding-top: 26.5%;
    position: relative;
    width: 44%; }

  .skills {
    font-size: 0.9vw;
    margin-top: 3%; }
    .skills h4 {
      margin-bottom: 4%; }
    .skills .skills_desc {
      justify-content: space-between;
      flex-direction: row; }
      .skills .skills_desc > div {
        width: 46%; }

  #classesNavi {
    width: 80%; }
    #classesNavi > div {
      flex-wrap: nowrap; }

  	/*------------------------------------*\
      ### Register Desktop ###
    --------------------------------------*/
  #register {
    background-image: url(../img/longscroller/desktop/section_register_bg_1920.jpg);
    padding: 0;
    padding-top: 64.58333334%; }
    #register > .wrapper {
      position: absolute;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%); }
      #register > .wrapper h3 {
        font-size: 2.5vw;
        margin: 0 auto 5%;
        text-align: center; }

  #registerForm {
    padding: 35px 45px;
    margin: 3% auto 0;
    width: 40%; }
    #registerForm h4 {
      font-size: 1.75vw;
      margin-bottom: 5%; }
    #registerForm form > button {
      margin: 5% 0;
      width: 100%; }
    #registerForm .agb > p {
      font-size: 0.9vw;
      margin: 0 0 5%; }

  input {
    font-size: 1vw; }

  label {
    font-size: 1.25vw;
    line-height: 130%;
    margin: 0 0 10px; }

  .input_wrapper {
    margin: 0 0 20px;
    position: relative; }

  .password_info,
  .error_info {
    font-size: 1vw;
    top: 0;
    bottom: auto;
    position: absolute;
    right: -300px;
    width: 250px; }
    .password_info.shown,
    .error_info.shown {
      right: -270px;
      opacity: 1;
      transition: opacity .3s;
      -webkit-transition: opacity .3s;
      -moz-transition: opacity .3s;
      -ms-transition: opacity .3s;
      -o-transition: opacity .3s; }
    .password_info:after,
    .error_info:after {
      border-width: 8px 8px 8px 0;
      border-color: transparent SKYBLUE transparent transparent;
      top: 10px;
      left: -8px; }

  .error_info:after {
    border-color: transparent CRIMSON transparent transparent; }

  .register_error {
    position: unset; }

  .register_error::after {
    display: none; }

  /*------------------------------------*\
    ### Glossar Desktop ###
  --------------------------------------*/
  #glossar h2 {
    font-size: 1.825vw; }
  #glossar .wrapper {
    width: 50%; }

  /*------------------------------------*\
    ### Footer Desktop ###
  --------------------------------------*/
  footer {
    padding: 20px 0 70px; }

  .logos_ranking,
  .games {
    margin: 0 auto;
    width: 60%; }

  .games {
    margin-bottom: 30px; }

  .legal {
    font-size: 12px;
    margin: 0 auto;
    width: 60%; }
    .legal > p > a {
      font-size: 1vw; }

  /*------------------------------------*\
    ### Overlays Desktop ###
  --------------------------------------*/
  #overlayWrapper > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%); } }
@keyframes headlines {
  0% {
    opacity: 0;
    text-shadow: none;
    transform: translateY(15px); }
  50% {
    opacity: 1;
    text-shadow: none;
    text-shadow: 4px 4px 8px #b8579b, -4px -4px 8px #b8579b;
    transform: translateY(0); }
  75% {
    opacity: 1;
    text-shadow: 0 0 15px #fff;
    text-shadow: 4px 4px 8px #b8579b, -4px -4px 8px #b8579b;
    transform: translateY(0); }
  100% {
    opacity: 1;
    text-shadow: none;
    transform: translateY(0); } }
@keyframes texts {
  0% {
    opacity: 0;
    text-shadow: none;
    top: 15px; }
  75% {
    opacity: 1;
    text-shadow: 0 0 15px #fff;
    top: 0; }
  100% {
    opacity: 1;
    text-shadow: none;
    top: 0; } }
@keyframes back {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }