@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;
}

/*------------------------------------*\
  ### FONTS ###
--------------------------------------*/
@font-face {
  font-family: 'Alegreya';
  src: url("https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/fonts/alegreya-regular-webfont.woff2") format("woff2"), url("https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/fonts/alegreya-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Alegreya Bold';
  src: url("https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/fonts/alegreya-bold-webfont.woff2") format("woff2"), url("https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/fonts/alegreya-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url("https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/fonts/lato-regular-webfont.woff2") format("woff2"), url("https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/fonts/lato-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Lato Bold';
  src: url("https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/fonts/lato-bold-webfont.woff2") format("woff2"), url("https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/fonts/lato-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Lato Black';
  src: url("https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/fonts/lato-black-webfont.woff2") format("woff2"), url("https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/fonts/lato-black-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/* Variables */
/* Mixins */
/*------------------------------------*\
  ### MAIN Mobile ###
--------------------------------------*/
html,
body {
  height: 100%;
  width: 100%;
}

body {
  background: #0f0e0c;
  color: #b5b5b5;
  font-size: 18px;
  font-family: "Lato", sans-serif;
  line-height: 160%;
}

h2 {
  color: #e6cd75;
  font-family: "Alegreya", serif;
  font-weight: 200;
  line-height: 120%;
  margin: 60% auto 10%;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 20px #000;
  width: 80%;
}

h3 {
  color: #e6cd75;
  font-family: "Alegreya", serif;
  letter-spacing: 2px;
  line-height: 120%;
  margin: 0 auto 20px;
  text-align: center;
  text-transform: uppercase;
}

h4 {
  color: #e6cd75;
  font-family: "Alegreya Bold", serif;
  letter-spacing: 2px;
  line-height: 120%;
  margin-bottom: 5px;
}

i.icon {
  background-repeat: no-repeat;
  display: inline-block;
}

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

.head {
  display: block;
  line-height: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.subhead {
  position: relative;
  padding-bottom: 25px;
  margin-bottom: 20px;
}

.subhead::after {
  background: #856f22;
  bottom: 0;
  content: '';
  display: block;
  max-width: 250px;
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 80%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

p {
  padding: 10px 0;
}

a {
  color: #257478;
}

.changelog_link {
  display: block;
  margin: 0 auto 5%;
  text-align: center;
}

#landing {
  overflow-x: hidden;
}

.wrapper {
  margin: 0 auto;
  text-align: center;
  width: 84%;
}

h1#logo {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/GoE_logo.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 28.743961352657005%;
  text-indent: -9999px;
  margin: 5% auto 0;
  width: 69.082125603864734%;
  z-index: 2;
}

ul.list li {
  list-style-position: inside;
  list-style-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/square.svg);
  color: #fef6c2;
}

/*------------------------------------*\
  ### BUTTONS Mobile ###
--------------------------------------*/
.btn_default {
  background-color: transparent;
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/cta_small.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-family: "Alegreya Bold", serif;
  line-height: 130%;
  padding: 15px 30px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn_default:focus {
  box-shadow: none;
  outline: 0;
}

.btn_video {
  background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/playbutton.png) left center no-repeat;
  background-size: auto 100%;
  cursor: pointer;
  height: 59px;
  left: 50%;
  position: absolute;
  top: 40%;
  text-indent: -9999px;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.3s ease, color 0.3s ease;
  width: 59px;
  -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);
}

#moreInfo,
.menu_logo {
  display: none;
}

/*------------------------------------*\
  ### MENU Mobile ###
--------------------------------------*/
#menu {
  margin: 10% auto 2%;
  opacity: 1;
  text-align: center;
  width: 90%;
  z-index: 2;
}

.sizeinfo {
  color: #e6cd75;
  padding: 0;
  text-align: center;
}

#scroll,
#menu2 {
  display: none;
}

#videoPreview {
  flex-direction: column;
  margin: 15% auto 5%;
  width: 80%;
}

#videoPreview .video {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  padding-top: 52.8%;
  width: 90.16%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

#videoPreview .video > span {
  background: rgba(0, 0, 0, 0.5);
  bottom: 3px;
  color: #e6cd75;
  letter-spacing: 2px;
  position: absolute;
  padding: 2% 0;
  left: 3px;
  right: 3px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

#videoPreview #vid1 {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/trailer_thumb.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%; 
  border: 3px solid #bd9d2e;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: transform .3s ease;
  width: 100%;
}

/*------------------------------------*\
  ### START Mobile ###
--------------------------------------*/
#start {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/start_BG.jpg);
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 0;
  width: 100%;
}

#aniBG {display: none;}

.btn_default.btn_cta {
  background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/cta_small.jpg) no-repeat center center;
  background-size: auto 100%;
  border: 0;    
  box-shadow: none;
  color: #000;
  overflow: visible;
  text-shadow: none;
  width: 90%;
}

/*------------------------------------*\
  ### GAMEPLAY Mobile ###
--------------------------------------*/
#gameplay {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/gameplay_BG.jpg);
  background-position: top center;
  background-color: #11110e;
  position: relative;
  flex-direction: column;
  padding: 10% 0;
  z-index: 0;
}

#gameplay::after {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/gameplay_bottom_BG.jpg);
  background-position: bottom center;
  background-size: 100% 100%;
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  padding-top: 87.922705314009662%;
  width: 100%;
  z-index: -1;
}

.feature {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.feature > div {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  flex: auto;
  margin: 30px auto 10px;
  text-align: center;
  width: 100%;
}
.feature.hack .img {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/asset_feature_1.png);
  margin: 60px auto 10px;
  padding-top: 90%;
}
.feature.character .img {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/asset_feature_2.png);
  padding-top: 90%;
}
.feature.levels .img {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/asset_feature_3.png);
  padding-top: 70%;
}
.feature.housing .img {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/asset_feature_4.png);
  padding-top: 90%;
}

/*------------------------------------*\
  ### STORY Mobile ###
--------------------------------------*/
#story {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/story_BG.jpg);
  background-color: #10191f;
  padding: 10% 0;
}
#story .wrapper {
  padding-top: 60%;
}

/*------------------------------------*\
  ### RACES Mobile ###
--------------------------------------*/
#race {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/race_BG.jpg);
  background-color: #170f10;
  padding: 10% 0;
}
#race .races_wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-top: 100px;
}
#race .races_wrapper > .race {
  background-color: #111416;
  border: 3px solid #e6cd75;
  flex: auto;
  margin: 0 auto 20%;
  position: relative;
  width: 90%;
}
#race .races_wrapper > .race i.race_icon {
  background-color: #111416;
  border: 3px solid #e6cd75;
  height: 60px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 60px;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  -moz-transform: translate(-50%, -50%) rotate(45deg);
  -ms-transform: translate(-50%, -50%) rotate(45deg);
  -o-transform: translate(-50%, -50%) rotate(45deg);
}
#race .races_wrapper > .race i.race_icon:after {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/races_icon_sprite.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  content: '';
  display: block;
  height: 100%;
  transform: rotate(-45deg);
  width: 100%;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}
#race .races_wrapper > .race.elves i::after {
  background-position: -60px 0;
}
#race .races_wrapper > .race.dwarfs i::after {
  background-position: -120px 0;
}
#race .races_wrapper > .race.neia i::after {
  background-position: -180px 0;
}
#race .races_wrapper > .race .img {
  margin: 7px;
  margin-bottom: 0;
}
#race .races_wrapper > .race .img > img {
  height: auto;
  width: 100%;
}
#race .races_wrapper > .race .race_desc {
  font-family: "Lato Bold", sans-serif;
  line-height: 160%;
  padding: 15px;
}
#race .races_wrapper > .race .race_desc > p {
  text-align: left;
  margin-top: 10px;
  line-height: 150%;
}
#race .races_wrapper > .race .subhead {
  margin: 0 auto;
  padding-bottom: 20px;
}
#race .races_wrapper > .race .subhead::after {
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

/*------------------------------------*\
  ### CLASSES Mobile ###
--------------------------------------*/
#classes {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/classes_BG.jpg);
  background-position: center bottom;
  background-color: #170f10;
  padding: 10% 0;
}
#classes .classes {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 40px auto 0;
}
#classes .classes .classes_box {
  flex: auto;
  margin: 20px auto 45px;
  text-align: center;
}
#classes .classes .classes_box .icon {
  background-size: 100% auto;
  background-position: center top;
  height: 140px;
  width: 142px;
}
#classes .classes .classes_box .icon.warrior {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/warrior_icon.png);
}
#classes .classes .classes_box .icon.priest {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/priest_icon.png);
}
#classes .classes .classes_box .icon.arcanist {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/arcanist_icon.png);
}
#classes .classes .classes_box .icon.engeneer {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/engeneer_icon.png);
}
#classes .classes .classes_box .icon.ranger {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/ranger_icon.png);
}
#classes .classes .classes_box .icon.darkknight {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/blackknight_icon.png);
}
#classes .classes .classes_box .classes_desc {
  display: inline-block;
}

/*------------------------------------*\
  ### MEDIA Mobile ###
--------------------------------------*/
#media {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/media_BG.jpg);
  background-position: center top;
  background-color: #231917;
  padding: 10% 0 0;
  text-align: center;
}
#media .head {
  display: none;
}

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

.slidesWrapper {
  border-top: 3px solid #c6b065;
  border-bottom: 3px solid #c6b065;
}

.slides img {
  padding: 2px 0;
}

.caption {
  display: none;
}

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

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

.sliderNav li,
.slide {
  float: left;
  line-height: 0;
}

.lazyLoading {
  position: relative;
}
.lazyLoading:before {
  background: url("https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/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;
}

.prev,
.next {
  cursor: pointer;
  height: 35px;
  position: absolute;
  top: 50%;
  left: -15%;
  transform: translateX(50%);
  text-indent: -9999px;
  width: 81px;
  -webkit-transform: translateX(50%);
  -moz-transform: translateX(50%);
  -ms-transform: translateX(50%);
  -o-transform: translateX(50%);
}

.next {
  left: auto;
  right: -6%;
}

.nextInactive,
.prevInactive {
  cursor: default;
  transition: none;
}

.nextInactive:hover {
  right: -6%;
}

.prevInactive:hover {
  left: -15%;
}

.sliderDots {
  padding: 15px 0 30px;
  text-align: center;
}

.sliderDot,
.sliderDotActive {
  background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/dot.png) center center no-repeat;
  border-radius: 50%;
  display: inline-block;
  height: 23px;
  margin: 0 3px;
  position: relative;
  width: 24px;
}

.sliderDotActive::after {
  background: #c6b165;
  border-radius: 50%;
  content: '';
  display: block;
  height: 50%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

/*------------------------------------*\
  ### System Mobile ###
--------------------------------------*/
#system {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/system_BG.jpg);
  background-position: 0 center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #503509;
  height: auto;
  padding: 10% 0;
}

#system h3 {
  color: #805e3c;
  margin-bottom: 5%;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto; 
  margin-bottom: 10%;
}

#system .wrapper {
  position: static;
  transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
}

.avaible {
  font-family: 'Alegreya Bold';
  text-align: left;
  margin-bottom: 5%;
}

.requirements table {display: none;}

.requirements {
	display: flex;
  flex-direction: column;
  text-align: left;
  margin-bottom: 3%; 
}

.requirements .column {
  display: flex;
  flex-direction: column;
  margin: 0 0 20px;
  transition: height .5s;
  -webkit-transition: height .5s;
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
}

.requirements .column .reqhead {
  background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/line.png) bottom center repeat-x rgba(198,177,101,.3);
  font-family: 'Alegreya Bold';
  margin-bottom: 3%;
  position: relative;
}

.requirements .column .reqhead > div {
  padding-right: 10%;
}

.requirements .column .category {
  font-family: 'Lato Black';
}

.requirements .column .reqhead .dropdown {
  border-style: solid;
  border-width: 10px 7px 0 7px;
  border-color: #503509 transparent transparent transparent;
  display: block;
  height: 0;
  position: absolute;
  right: 10px;
  top: 50%;
  transition: transform .4s;
  transform: translateY(-50%) rotate(0deg);
  width: 0;
  -webkit-transform: translateY(-50%) rotate(0deg);
  -moz-transform: translateY(-50%) rotate(0deg);
  -ms-transform: translateY(-50%) rotate(0deg);
  -o-transform: translateY(-50%) rotate(0deg);
  -webkit-transition: transform .4s;
  -moz-transition: transform .4s;
  -ms-transition: transform .4s;
  -o-transition: transform .4s;
}

.requirements .column .row {
  padding: 1.5% 2%;
}

.requirements .column .row:not(.reqhead) {
  flex-direction: column;
}

.requirements .column .accordion.active .dropdown {
  transform: translateY(-50%) rotate(-180deg);
  -webkit-transform: translateY(-50%) rotate(-180deg);
  -moz-transform: translateY(-50%) rotate(-180deg);
  -ms-transform: translateY(-50%) rotate(-180deg);
  -o-transform: translateY(-50%) rotate(-180deg);
}

.requirements .column.open .row {display: block;}

.avaible {
  background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/line.png) bottom center repeat-x;
  padding-bottom: 3%;
}

.avaible span {
  padding-left: 35px;
  margin: 0 20px; 
  position: relative;
}

.avaible i.windows.icon {
  background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/win.svg) center center no-repeat;
  height: 23px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 23px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.game_lang {
  background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/line.png) bottom center repeat-x;
  display: flex;
  text-align: left;
  flex-direction: column;
  padding: 2% 0 3%;
}

.game_lang > div {
  padding: 5px 8px;
}

.game_lang > div:first-child {
  font-family: 'Lato Black';
  margin: 2% 0;
  text-align: left;
}

.game_lang > div:not(:first-child) {
  position: relative;
  padding-left: 45px;
  margin-left: 8px;
}

.accordion {
  transition: 0.4s;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
}

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.flag {
  background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/flags.png) center 0 no-repeat;
  height: 21px;
  display: inline-block;
  width: 29px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.flag.en {background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/flags.png) center -21px no-repeat;}
.flag.es {background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/flags.png) center -42px no-repeat;}

.download {
  text-align: left;
  font-family: 'Alegreya';
  padding: 3% 8px 5px;
}

.download span {
  margin-left: 20px;
  font-family: 'Alegreya Bold';
}


/*------------------------------------*\
  ### REGISTER Mobile ###
--------------------------------------*/
#register {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/register_BG.jpg);
  background-size: 100% 100%;
  min-height: 920px;
  padding: 0;
}
#register h3 {
  color: #805e3c;
}
#register > .wrapper {
  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%);
}

#registerForm h4 {
  color: #503509;
  letter-spacing: 0;
}
#registerForm form > button {
  margin: 5% 0;
  width: 100%;
}

#registerForm form p {
  color: #321e11;
  line-height: 130%;
}

#registerOverlay form h4.download_link,
#registerForm form h4.download_link {
  border-top: 1px solid #2b2318;
  letter-spacing: 0;
  font-size: 5vw;
  padding: 20px 0;
  text-align: center;
  line-height: 140%;
  margin: 30px auto 0;
}

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

input {
  background-color: #aa9366;
  border: 1px solid;
  border-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/btn-border.png) 1 round;
  padding: 4%;
  width: 92%;
}
input:focus {
  outline: none;
}

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

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

.input_wrapper.fieldOk::after,
.input_wrapper.fieldError::after {
  background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/error.svg) 100% center no-repeat;
  background-size: auto 100%;
  content: '';
  display: block;
  padding-top: 14%;
  position: absolute;
  right: 0;
  top: 0;
  width: 10%;
}
.input_wrapper.fieldOk::after {
  background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/ok.svg) 100% center no-repeat;
}

.password_info,
.error_info {
  background: #5a823a;
  border: 1px solid #8fd358;
  color: #fcfaea;
  display: none;
  font-family: "Alegreya", serif;
  height: auto;
  line-height: 130%;
  opacity: 0;
  padding: 12px 15px;
  position: relative;
  width: 92%;
  z-index: 99;
}
.password_info.shown,
.error_info.shown {
  display: block;
  opacity: 1;
  animation-duration: .3s;
  animation-name: fadeIn;
}
.password_info::before, .password_info::after,
.error_info::before,
.error_info::after {
  border-style: solid;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #5a823a transparent;
  content: '';
  display: block;
  height: 0;
  position: absolute;
  top: -7px;
  left: 10px;
  width: 0;
}
.password_info::before,
.error_info::before {
  border-color: transparent transparent #8fd358 transparent;
  border-width: 0 9px 10px 9px;
  left: 9px;
  top: -10px;
}

.error_info {
  background: #bb202e;
  border: 1px solid #ff5b35;
}
.error_info::after {
  border-color: transparent transparent #bb202e transparent;
}
.error_info::before {
  border-color: transparent transparent #ff5b35 transparent;
}

.password_info strong {
  font-weight: bold;
}
.password_info > ul {
  list-style-image: url("https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/square.svg");
  padding-left: 18px;
  margin: 4px 0 8px 0;
}
.password_info > ul.bullet_error {
  list-style-image: url("http://gf2.geo.gfsrv.net/cdn4a/898cf3b9547d01b978b456af5a251b.png");
}
.password_info > ul.bullet_ok {
  list-style-image: url("http://gf3.geo.gfsrv.net/cdn80/52bf36385e17f7f8bf7e4a4faf13cd.png");
}

.password_info2 {
  background: red;
  border-bottom: 2px solid #00d1ff;
  border-top: 2px solid #0f3340;
  box-shadow: 0px 0px 10px #000;
  display: none;
  min-width: 200px;
  opacity: 1;
  right: 163px;
  top: 20px;
  width: auto;
}
.password_info2:after {
  bottom: -14px;
  height: 14px;
  left: auto;
  right: -47px;
  top: auto;
  width: 48px;
}
.password_info2 strong {
  font-weight: bold;
}

/*------------------------------------*\
  ### SOCIAL/SEO Mobile ###
--------------------------------------*/
#social {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/mobile/footer_BG.jpg);
  background-position: center top;
  padding: 60px 0 0;
}
#social .seo_wrapper {
  margin: 130px auto;
}
#social .seo_wrapper .seo_box {
  margin-bottom: 40px;
}
#social .seo_wrapper .subhead {
  color: #fff;
  font-size: 16px;
  font-family: "Lato Black", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 5px;
  padding-bottom: 17px;
}
#social .seo_wrapper .subhead::after {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
#social .seo_wrapper p {
  color: #6ea2a2;
  font-size: 16px;
  line-height: 160%;
  padding: 8px;
}

.social_wrapper {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.social_wrapper > a {
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  height: 76px;
  margin: 0 5px;
  text-indent: -9999px;
  width: 77px;
}
.social_wrapper > a.fb {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/fb.png);
}
.social_wrapper > a.tw {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/tw.png);
}
.social_wrapper > a.yt {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/yt.png);
}
.social_wrapper > a.forum {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/forum.png);
}

.align_left {
  text-align: left;
}

/*------------------------------------*\
  ### FOOTER Mobile ###
--------------------------------------*/
footer {
  background-color: #0d1010;
  overflow: hidden;
  padding: 5% 10% 10%;
  text-align: center;
}

.logos_ranking {
  display: block;
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  margin: 0 auto 20px;
  text-align: center;
}
.logos_ranking > div {
  flex: 1;
}

.logos_ranking span {
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  margin: 5px 0;
  width: 100%;
}

.ranking > span {
  height: 90px;
}

.logos {
  margin-bottom: 20px;
}

.logos > span {
  height: 50px;
}

.game {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/runewaker.png);
  background-size: auto 100%;
  text-indent: -9999px;
}

.gf {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/GFLogo.svg);
  background-size: 80% 80%;
  text-indent: -9999px;
}

.usk {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/usk16.svg);
  background-size: 80% 80%;
  text-indent: -9999px;
  width: 90px;
}

.legal > p > a {
  padding: 0 3px;
}
.legal > p > span {
  border-left: 1px solid #fff;
  margin: 0 3px;
}
.legal > p > span:first-child {
  border-left: none;
}

.legal_line {
  color: #fff;
  font-size: 12px;
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  margin: 22px 0 15px 0;
}

/*------------------------------------*\
  ### OVERLAYS Mobile ###
--------------------------------------*/
#overlayWrapper {
  height: 100%;
  text-align: center;
  width: auto;
}
#overlayWrapper > div {
  border: 3px solid #c6b165;
  margin: 0 auto;
  position: relative;
  line-height: 0;
}

.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: -webkit-transform 0.6s, opacity 0.6s, visibility 0.6s;
  -webkit-transition: -webkit-transform 0.6s, opacity 0.6s, visibility 0.6s;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
}

.close-overlay,
.close {
  background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/close.png) center left no-repeat;
  cursor: pointer;
  height: 32px;
  position: absolute;
  right: -40px;
  top: -40px;
  width: 32px;
  transform: rotate(0deg);
  transition: transform 0.8s;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
}

.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;
}

#GFLogin {
  background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/register_form_BG.png) center center no-repeat;
  font-size: 16px;
  width: 100%;
  z-index: 100;
}
#GFLogin > form h4,
#GFLogin > form p {
  color: #4f3408;
  line-height: 140%;
}
#GFLogin > form h4 {
  padding-bottom: 30px;
}
#GFLogin .btn_default {
  margin-top: 25px;
}
#GFLogin.modal {
  border: 0;
  color: #4f3408;
}
#GFLogin.modal h3 {
  color: #4f3408;
}
#GFLogin .modal_content {
  padding: 5%;
  width: 90%;
}
#GFLogin .modal_content p {
  line-height: 140%;
}
#GFLogin .modal_content .info_box {
  background-color: #00a8ff;
  color: #fff;
  display: flex;
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 20px;
  padding: 15px;
  text-align: center;
}
#GFLogin .modal_content .info_box .gf_logo {
  height: 40px;
  padding: 10px 15px 10px 0;
  width: 40px;
}
#GFLogin .modal_content .info_box .gf_logo > img {
  height: 100%;
  width: 100%;
}
#GFLogin .modal_content .info_box > p {
  text-align: left;
}
#GFLogin .modal_content .user_mail {
  background-color: rgba(241, 200, 120, 0.5);
  margin-bottom: 10px;
}
#GFLogin .no_display {
  display: none;
}
#GFLogin .forgotten_password {
  display: block;
  text-align: left;
}

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

  h2 {
    font-size: 9vw;
  }

  h3 {
    font-size: 7vw;
  }

  h4 {
    font-size: 5.5vw;
  }

  .btn_default {
    font-size: 5vw;
  }

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

  #race .races_wrapper > .race .subhead {
    font-size: 6vw;
  }

  #race .races_wrapper > .race .race_desc,
  input {
    font-size: 4vw;
  }

  label {
    font-size: 3.5vw;
  }

  .legal {
    font-size: 4vw;
  }

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

  .avaible, 
  .download,
  .requirements .column .reqhead {font-size: 5.5vw;}

  .sizeinfo {
    bottom: -60%;
    font-size: 3.5vw;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
  }
}
/* - - - - - - - - - - - - - - - - - - - - - - - */
/* TABLET - - - - - - - - - - - - - - - - - - - –*/
/* - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (min-width: 768px) {
  /*------------------------------------*\
    ### MAIN Tablet ###
  --------------------------------------*/
  body {
    font-size: 2vw;
  }

  h1#logo {
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 21.484375%;
    position: absolute;
    width: 52.0833333333333%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

  h2 {
    bottom: 15%;
    font-size: 5vw;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    }

  h3 {font-size: 5.25vw;}
  h4 {font-size: 3vw;}

  .head::before, .head::after {
    bottom: -30px;
    background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/head_arrow.svg) center center no-repeat;
    content: '';
    display: block;
    height: 18px;
    position: absolute;
    width: 315px;
  }

  .head::after { right: 53%;}
  .head::before {
    left: 53%;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
  }

  section {padding-top: 133.333333333333%;}

  /*------------------------------------*\
    ### GAMEPLAY Tablet ###
  --------------------------------------*/
  #gameplay {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/tablet/gameplay_BG.jpg);
    padding: 5% 0;
  }
  #gameplay::after {
    padding-top: 48.177083333333333%;
    /*370px*/
  }

  .feature > div {
    background-size: auto 100%;
  }
  .feature.hack .img {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/asset_feature_1.png);
    padding-top: 70%;
  }
  .feature.character .img {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/asset_feature_2.png);
    padding-top: 70%;
  }
  .feature.levels .img {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/asset_feature_3.png);
    padding-top: 70%;
  }
  .feature.housing .img {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/asset_feature_4.png);
    padding-top: 70%;
  }

  /*------------------------------------*\
    ### START Tablet ###
  --------------------------------------*/
  #start {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/tablet/start_BG.jpg);
    padding-top: 108.072916666666667%;
  }

  .btn_default.btn_cta {
    width: 50%;
  }


  /*------------------------------------*\
    ### STORY Tablet ###
  --------------------------------------*/
  #story {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/tablet/story_BG.jpg);
    padding: 0;
    padding-top: 108.072916666666667%;
  }
  #story .wrapper {
    bottom: 10%;
    left: 50%;
    padding: 0;
    position: absolute;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

  /*------------------------------------*\
    ### RACES Tablet ###
  --------------------------------------*/
  #race {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/tablet/race_BG.jpg);
    padding: 5% 0;
  }
  #race .wrapper {
    position: static;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}
  #race .races_wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 100px;
  }
  #race .races_wrapper > .race {
    flex: 0 42%;
    margin: 0 0 10%;
  }
  #race .races_wrapper > .race .race_desc {
    font-size: 1.8229166666666667vw;
  }
  #race .races_wrapper > .race .race_desc > p {
    text-align: left;
    margin-top: 10px;
  }
  #race .races_wrapper > .race .subhead {
    font-size: 3.25vw;
  }

  /*------------------------------------*\
    ### CLASSES Tablet ###
  --------------------------------------*/
  #classes {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/tablet/classes_BG.jpg);
    padding: 5% 0;
  }
  #classes .classes {
    justify-content: space-between;
    flex-direction: row;
  }
  #classes .classes .classes_box {
    flex: 0 45%;
    margin: 20px auto 45px;
  }
  #classes .classes .classes_box .icon {
    background-size: 100% auto;
    background-position: center top;
    height: 140px;
    width: 142px;
  }
  #classes .classes .classes_box .icon.warrior {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/warrior_icon.png);
  }
  #classes .classes .classes_box .icon.priest {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/priest_icon.png);
  }
  #classes .classes .classes_box .icon.arcanist {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/arcanist_icon.png);
  }
  #classes .classes .classes_box .icon.engeneer {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/engeneer_icon.png);
  }
  #classes .classes .classes_box .icon.ranger {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/ranger_icon.png);
  }
  #classes .classes .classes_box .icon.darkknight {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/blackknight_icon.png);
  }
  #classes .classes .classes_box .classes_desc {
    display: inline-block;
  }

  #videoPreview {
    flex-direction: row;
    justify-content: center;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 35%;
  }
  #videoPreview .video {
    padding-top: 32.291666666666667%;
    width: 57.291666666666667%;
  }
  #videoPreview .video > span {
    font-size: 3vw;
  }

  #menu {
    bottom: 10%;
    display: flex;
    justify-content: center;
    left: auto;
    opacity: 1;
    position: absolute;
    width: 100%;
  }

  .sizeinfo {
    position: absolute;
    bottom: -70%;
    font-size: 2vw;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
  }

  .btn_default {
    font-size: 3vw;
  }

  .tabs {
    margin: 0 auto;
    position: relative;
    text-align: center;
    z-index: 1;
  }
  .tabs > li {
    border: 1px solid #e6cd75;
    color: #e6cd75;
    display: inline-block;
    font-size: 2.34375vw;
    font-family: "Alegreya Bold", serif;
    margin: 0 2% 2% 0;
    padding: 1.25% 7%;
    text-transform: uppercase;
  }
  .tabs > li.active {
    border-color: #fff1c0;
    color: #fff1c0;
    cursor: pointer;
    transition: all 0.4s linear;
    -webkit-transition: all 0.1s ease-out;
  }

  /*------------------------------------*\
    ### MEDIA Tablet ###
  --------------------------------------*/
  #media {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/tablet/media_BG.jpg);
    padding: 5% 0;
  }
  #media .head {
    display: inline-block;
  }

  .sliderDots {
    padding: 2% 0 6%;
  }

  /*------------------------------------*\
    ### SYSTEM Tablet ###
  --------------------------------------*/
  #system {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/tablet/system_BG.jpg);
  }

  #system h3 {margin-bottom: 12%;}

  .avaible,
  .download {
    font-size: 2.75vw;
  }

   /*------------------------------------*\
    ### Requirements Tablet ###
  --------------------------------------*/
  .requirements .column .reqhead {font-size: 2.75vw;}

  /*------------------------------------*\
    ### REGISTER Tablet ###
  --------------------------------------*/
  #register {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/tablet/register_BG.jpg);
    padding: 0;
    padding-top: 119.791666666666667%;
    min-height: 0;
  }

  #register .wrapper {
    left: 50%;
    position: absolute;
    top: 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%);
  }

  #register h3 {
    width: 80%;
  }

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

  #registerForm form h4.download_link {font-size: 3vw;}

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

  input {
    padding: 15px;
  }

  .input_wrapper.fieldOk::after, .input_wrapper.fieldError::after {
    padding-top: 11%
  }

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

  /*------------------------------------*\
    ### SOCIAL/SEO Tablet ###
  --------------------------------------*/
  #social {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/tablet/footer_BG.jpg);
    padding: 60px 0;
  }

  .social_wrapper > a {
    margin: 0 30px;
  }

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

  .legal {
    font-size: 2vw;
  }

  /*------------------------------------*\
    ### OVERLAY Tablet ###
  --------------------------------------*/
  #GFLogin {
    background-size: 100% 100%;
    width: 80%;
  }
  #GFLogin .modal_content {
    padding: 10%;
    width: 80%;
  }
  #GFLogin .modal_content .info_box .gf_logo {
    height: auto;
    width: auto;
  }
  #GFLogin .modal_content .info_box .gf_logo > img {
    height: auto;
    width: auto;
  }
  #GFLogin .close {
    right: 10px;
    top: -30px;
  }
}
/* - - - - - - - - - - - - - - - - - - - - - - - */
/* DESKTOP - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (min-width: 1024px) {
  /*------------------------------------*\
    ### MAIN Desktop ###
  --------------------------------------*/
  body {font-size: 0.9375vw;}

  :focus {
    outline: none;
  }

  a:hover {
    text-decoration: none;
  }

  h2 {
    bottom: 20%;
    font-size: 2vw;
    left: 50%;
    margin: 0 auto;
    position: absolute;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

  h3 {
    font-size: 2vw;
  }

  h4 {
    font-size: 1.7vw;
  }

  h1#logo {
    top: 10%;
    margin: 0 auto;
    padding-top: 10.78125%;
    width: 25.9375%;
  }

  .head {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    position: relative;
  }
  .head::before, .head::after {
    background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/head_arrow.svg) center center no-repeat;
    display: block;
    transform: translateY(-50%);
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
  .head::after {
    right: -335px;
    transform: translateY(-50%) rotate(180deg);
    -webkit-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
}
  .head::before {
    left: -335px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

  .subhead::after {
    left: 0;
    transform: none;
  }

  /*------------------------------------*\
    ### SCROLL Desktop ###
  --------------------------------------*/
  #scroll {
    bottom: 50%;
    display: block;
    height: 18.125em;
    margin: -11.875em 0 0;
    position: fixed;
    right: 0;
    top: 50%;
    width: 8%;
    z-index: 999;
  }

  #scroll li {
    color: #e6cd75;
    list-style: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/square.svg);
    font-size: 1vw;
    font-family: "Alegreya Bold", serif;
    margin: 10% 0;
    transition: transform 0.2s ease,color 0.5s ease, text-shadow 0.5s ease;
  }

  #scroll li.active, #scroll li:hover {
    list-style-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/square_white.svg);
    color: #fff;
    cursor: pointer;
    transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
  }

  .badge {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/badge_EN.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    transform: rotate(-8deg);
    top: 15%;
    right: 20%;
    padding-top: 8.229167%;/*158px*/
    position: absolute;
    width: 10.4167%; /*200px*/
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    z-index: 2;
  }

  .badge.de {background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/badge_DE.png);}
  .badge.en {background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/badge_EN.png);}
  .badge.es {background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/badge_ES.png);}

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

  .wrapper {
    left: 50%;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 10%;
    transform: translateX(-50%);
    width: 62.5%;
    -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;
}

#scroll .selected_section_6 li {color: #503509;}
#scroll .selected_section_6 li:hover,
#scroll .selected_section_6 li.active {
  color: #805e3c;
}

  /*------------------------------------*\
    ### Start Desktop ###
  --------------------------------------*/
  #start {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/desktop/start_BG.jpg);
    padding-top: 48.4375%;
  }

  .wrapper {
    font-size: 0.9375vw;
    width: 62.5%;
  }

  #videoPreview {
    bottom: 30%;
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    top: auto;
    width: 100%;
    z-index: 2;
  }

  #videoPreview .video {
    padding-top: 12.91666666666667%; /* 248px */
    width: 22.916666666666667%; /* 440px */
  }

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

  .changelog_link {
    font-size: 15px;
    position: absolute;
    bottom: 5%;
    margin: 0;
    left: 5%;
    z-index: 21;
  }

  /*------------------------------------*\
    ### GAMEPLAY Desktop ###
  --------------------------------------*/
  #gameplay {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/desktop/gameplay_BG.jpg);
    padding: 0;
    padding-top: 125.3125%;
  }
  #gameplay .wrapper {
    position: absolute;
    transform: translateX(-50%);
    top: 3.75%;
    z-index: 1;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
  #gameplay::after {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/desktop/gameplay_bottom_BG.png);
    padding-top: 44.0625%;
    /*846px*/
  }

  .feature {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  .feature > div {
    background-size: contain;
    background-repeat: no-repeat;
    flex: 0 48%;
    margin: 0;
    text-align: left;
  }
  .feature.hack .img {
    background-position: left center;
    padding-top: 42.5%;
  }
  .feature.character .img {
    background-position: right center;
    padding-top: 45.6666666666667%;
  }
  .feature.levels .img {
    background-position: -10% center;
    padding-top: 41.6666666666667%;
  }
  .feature.housing .img {
    background-position: 110% center;
    padding-top: 45.8333333333333333%;
  }
  .feature.character, .feature.housing {
    flex-direction: row-reverse;
  }

  /*------------------------------------*\
    ### STORY Desktop ###
  --------------------------------------*/
  #story {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/desktop/story_BG.jpg);
    padding-top: 35.416666666666667%;
  }
  #story h3 {
    display: block;
    text-align: left;
  }
  #story .wrapper {
    text-align: left;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
  #story .wrapper > div {
    width: 65%;
  }

  /*------------------------------------*\
    ### RACES Desktop ###
  --------------------------------------*/
  #race .wrapper {
    position: static;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}
  #race .races_wrapper {
    margin-top: 100px;
  }
  #race .races_wrapper > .race {
    flex: 1;
    margin: 0 5.333333333333% 0 0;
    width: 21%;
  }
  #race .races_wrapper > .race:last-child {
    margin: 0;
  }
  #race .races_wrapper > .race i.race_icon {
    height: 60px;
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -moz-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    -o-transform: translate(-50%, -50%) rotate(45deg);
}
  #race .races_wrapper > .race .race_desc {
    font-size: 0.73vw;
    line-height: 150%;
  }
  #race .races_wrapper > .race .subhead {
    font-size: 1.3vw;
  }

/*------------------------------------*\
  ### CLASSES Desktop ###
--------------------------------------*/
  #classes {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/desktop/classes_BG.jpg);
    padding: 3% 0;
  }
  #classes .wrapper {
    position: static;
    margin: 0 auto;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}
  #classes .classes {
    margin: 40px auto 0;
  }
  #classes .classes .classes_box {
    flex: 1 0 50%;
    text-align: left;
  }
  #classes .classes .classes_box .classes_desc {
    width: calc(100% - 200px);
  }
  #classes .classes .classes_box .icon {
    background-position: 0 0px;
    margin-right: 30px;
    vertical-align: top;
  }

  /*------------------------------------*\
    ### MENU Desktop ###
  --------------------------------------*/
  #menu {
    bottom: 2%;
    box-sizing: border-box;
    left: 0;
    margin: 0;
    opacity: 1;
    padding: 1% 0;
    position: absolute;
    right: 0;
    text-align: center;
    width: 100%;
    z-index: 21;
  }

  #menu.sticky {
    background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/menu_BG.jpg) center center no-repeat #130e09;
    background-size: auto 100%;
    bottom: inherit;
    box-shadow: 0 0 26px black;
    opacity: 1;
    position: fixed;
    top: 0;
    transition: top .5s, opacity .5s;
    z-index: 100;
  }

  #menu .btn_default.btn_cta {
    background: transparent;
    padding: 2.5% 0;
    border: 0;
    box-shadow: none;
    color: #000;
    text-shadow: none;
    padding: 0.885416666666667% 0;
    width: 17.9166666666666667%;
  }

  #menu .btn_default {margin: 10px 0;}

  .sizeinfo {
    bottom: -45%;
    font-size: 0.8vw;
  }


  /*------------------------------------*\
    ### BUTTONS Desktop ###
  --------------------------------------*/
  .btn_default {
    font-size: 1.5vw;
    position: relative;
  }

  .btn_default:hover {
    transition: all .5s;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
  }

  .btn_default > span {
    position: relative;
    z-index: 10;
  }
  
  #aniBG {
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
  }

  #aniBG > video {
    object-fit: fill;
    height: 100%;
    width: 100%;
  }

  #aniBG > video::-webkit-media-controls {
    display: none;
  }

  .btn_video:hover {
    background-position: right center;
  }

/*------------------------------------*\
  ### MEDIA Desktop ###
--------------------------------------*/
  #media {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/desktop/media_BG.jpg);
    padding: 5% 0;
  }
  #media h3 {
    margin: 0 auto;
  }

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

  .tabs > li {
    font-size: 1.125vw;
    margin: 0 1% 2% 0;
    padding: 2.5% 7%;
  }
  .tabs > li:hover {
    background-color: #e6cd75;
    cursor: pointer;
    color: black;
    transition: all 0.4s linear;
    -webkit-transition: all 0.1s ease-out;
  }

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

  .sliderNav li {
    box-sizing: border-box;
    cursor: pointer;
    float: left;
    overflow: hidden;
    transition: transform .5s;
  }
  .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: all .3s;
    width: 100%;
  }
  .sliderNav li.active img, .sliderNav li:hover img {
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$procent)";
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    transition: all .3s;
  }

  .scrollNavActive li {
    cursor: pointer;
  }

  .lazyLoading {
    position: relative;
    min-height: 1px;
  }
  .lazyLoading:before {
    background: url("https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/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 {
    border: 3px solid #c6b165;
    margin-bottom: 40px;
  }

  .slidesWrapper,
  .sliderNavWrapper {
    border: 0;
    margin: 0 auto;
    position: relative;
  }
  .slidesWrapper .prev,
  .slidesWrapper .next,
  .sliderNavWrapper .prev,
  .sliderNavWrapper .next {
    background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/navi_arrow.png) left center no-repeat;
    bottom: 50%;
    border-radius: 25px;
    cursor: pointer;
    display: block;
    height: 70px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    z-index: 99;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
  .slidesWrapper .prev:hover,
  .slidesWrapper .next:hover,
  .sliderNavWrapper .prev:hover,
  .sliderNavWrapper .next:hover {
    background-position: right center;
  }
  .slidesWrapper .prev,
  .sliderNavWrapper .prev {
    left: -60px;
    transition: left .3s;
  }
  .slidesWrapper .prev:hover,
  .sliderNavWrapper .prev:hover {
    left: -70px;
    transition: left .3s;
  }
  .slidesWrapper .prev.prevInactive,
  .sliderNavWrapper .prev.prevInactive {
    opacity: 0.5;
    transition: none;
  }
  .slidesWrapper .prev.prevInactive:hover,
  .sliderNavWrapper .prev.prevInactive:hover {
    background-position: left center;
    cursor: default;
    opacity: 0.5;
    left: -60px;
    transition: none;
  }
  .slidesWrapper .next,
  .sliderNavWrapper .next {
    right: -60px;
    transform: translateY(-50%) rotate(180deg);
    transition: right .3s;
    -webkit-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
}
  .slidesWrapper .next:hover,
  .sliderNavWrapper .next:hover {
    right: -70px;
    transition: right .3s;
  }
  .slidesWrapper .next.nextInactive,
  .sliderNavWrapper .next.nextInactive {
    opacity: 0.5;
    transition: none;
  }
  .slidesWrapper .next.nextInactive:hover,
  .sliderNavWrapper .next.nextInactive:hover {
    cursor: default;
    right: -60px;
    transition: none;
  }
  .slidesWrapper .sliderNav li,
  .sliderNavWrapper .sliderNav li {
    border: 3px solid #c6b165;
  }

/*------------------------------------*\
  ### System Desktop ###
--------------------------------------*/
#system {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/desktop/system_BG.jpg);
  background-size: 100% 100%;
  padding: 5% 0;
}

#system h3 {margin-bottom: 5%;}

.requirements.mobile {display: none;}

.requirements table {
  display: block;
  font-size: 0.85vw;
  line-height: 150%;
  margin-bottom: 3%;
  text-align: left;
  width: 100%;
}

.requirements table th,
.requirements table td {
  padding: 5px 28px 5px 8px;
  width: 40%;
}

.requirements table th:first-child,
.requirements table td:first-child {
  width: 23%;
}

.requirements table thead th {
  font-family: 'Alegreya Bold';
  font-size: 1.125vw;
  padding: 5px 8px 3% 8px;
}

.requirements table tbody tr td:first-child {
  font-family: 'Lato Black';
}

.avaible,
.game_lang {
  flex-direction: row;
}

.avaible,
.download {
  font-size: 1.25vw;
}

.game_lang > div:first-child {
  margin: 0;
  width: 20%;
}

.game_lang > div:not(:first-child) {
  width: 12%;
}

.download {padding-top: 4%;}


/*------------------------------------*\
  ### REGISTER Desktop ###
--------------------------------------*/
  #register {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/desktop/register_merged_BG.jpg);
    background-size: 100%;
    padding-top: 53.541666666666667%;
  }
  #register > .wrapper {
    top: 13%;
    position: absolute;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
  #register > .wrapper > h3 {
    margin: 0 auto;
    text-align: center;
    width: 55%;
  }
  #register > .wrapper h4 {
    color: #4f3408;
  }

  #registerForm {
    padding: 0 45px 35px;
    margin: 3% auto 0;
    width: 40%;
  }
  #registerForm form h4 {
    color: #4f3408;
    font-size: 1.5vw;
    margin-bottom: 6%;
  }

  #registerForm form > button {
    margin: 5% 0;
    padding: 4% 0;
    width: 77%;
  }

  #registerOverlay form h4.download_link,
  #registerForm form h4.download_link {font-size: 1.125vw;}

  label,
  input {
    margin: 0 0 3% 0;
    width: calc(100% - 30px);
  }

  input {font-size: 1vw;}

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

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

  .password_info,
  .error_info {
    font-size: 1vw;
    top: 0;
    position: absolute;
    right: -300px;
    opacity: 0;
    transition: opacity 1s;
    width: 250px;
  }
  .password_info.shown,
  .error_info.shown {
    right: -300px;
    opacity: 1;
    transition: opacity .3s;
  }
  .password_info:after,
  .error_info:after {
    border-width: 8px 8px 8px 0;
    border-color: transparent #5a823a transparent transparent;
    top: 10px;
    left: -7px;
  }
  .password_info::before,
  .error_info::before {
    border-color: transparent #8fd358 transparent transparent;
    border-width: 9px 10px 9px 0;
    left: -10px;
    top: 9px;
  }

  .error_info::after {
    border-color: transparent #bb202e transparent transparent;
  }
  .error_info::before {
    border-color: transparent #ff5b35 transparent transparent;
  }

/*------------------------------------*\
  ### SOCIAL / SEO Desktop ###
--------------------------------------*/
  #social {
    background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/desktop/footer_bg.jpg) center top no-repeat #0d1010;
    padding: 60px 0 0;
  }
  #social .seo_wrapper > a:hover.fb {
    background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/fb.png) bottom center no-repeat;
  }
  #social .seo_wrapper > a:hover.tw {
    background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/tw.png) bottom center no-repeat;
  }
  #social .seo_wrapper > a:hover.yt {
    background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/yt.png) bottom center no-repeat;
  }
  #social .seo_wrapper > a:hover.forum {
    background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/forum.png) bottom center no-repeat;
  }


 /*------------------------------------*\
  ### FOOTER Desktop ###
--------------------------------------*/
  footer {
    padding: 100px 20px 70px;
  }

  .logos_ranking,
  .logos {
    margin: 0 auto;
    width: 50%;
  }

  .logos {margin-bottom: 0px;}
  .legal {font-size: 0.8vw;}


/*------------------------------------*\
  ### OVERLAY 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%);
}
  #overlayWrapper #registerOverlay {
    border: 0;
  }

  #registerOverlay,
  #GFLogin {
    background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/register_form_BG.png) center center no-repeat;
    background-size: 100% 100%;
    padding-top: 47%;
    width: 34.427083333333333%;
  }
  #registerOverlay > form,
  #GFLogin > form {
    line-height: 130%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
  #registerOverlay > form h3,
  #registerOverlay > form h4,
  #registerOverlay > form p,
  #GFLogin > form h4,
  #GFLogin > form p {
    color: #4f3408;
  }

  #registerOverlay > form p {padding: 2% 0;}

  #registerOverlay > form h3 {margin: 0 auto 5%;}
  #registerOverlay > form .input_wrapper {margin: 0 0 5%;}

  #registerOverlay > form h4,
  #GFLogin > form h4 {
    padding-bottom: 5%;
  }
  #registerOverlay .btn_default,
  #GFLogin .btn_default {
    margin-top: 2%;
    width: 80%;
  }

  #registerOverlay form h4.download_link, #registerForm form h4.download_link {
    padding: 4% 0;
    margin: 7% auto 0;
  }

  .close:hover {
    background: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/close.png) center right no-repeat;
    transform: rotate(180deg);
    transition: transform .8s;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

  #GFLogin {
    background-size: 100% 100%;
    height: 800px;
    padding: 0;
    width: 611px;
  }
  #GFLogin.modal {
    border: 0;
    color: #4f3408;
  }
  #GFLogin.modal h3 {
    color: #4f3408;
  }
  #GFLogin .modal_content {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 18px;
    padding: 10%;
    width: 80%;
  }
  #GFLogin .modal_content .info_box {
    background-color: #00a8ff;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 45px;
    padding: 15px;
    text-align: center;
  }
  #GFLogin .modal_content .info_box > p {
    text-align: left;
  }
  #GFLogin .modal_content .user_mail {
    line-height: 130%;
    padding: 10px;
  }
  #GFLogin .close {
    right: -40px;
    top: -40px;
  }
}


/*------------------------------------*\
  ### FUNNEL Mobile ###
--------------------------------------*/
body.funnel {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/funnel/funnel_mobile_BG.jpg);
  background-color: #060b0b;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
}
body.funnel #funnelDownload {
  padding: 0;
}
body.funnel #funnelDownload .content {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 12% 0 10% 0;
  position: relative;
  width: 100%;
}
body.funnel #funnelDownload #logo {
  margin: 0 auto;
  padding-top: 39%;
  top: -7%;
  width: 70%;
}
body.funnel #funnelDownload h3 {
  color: #7f5c3c;
}
body.funnel #funnelDownload h4 {
  letter-spacing: 2px;
}
body.funnel #funnelDownload h4,
body.funnel #funnelDownload .list li,
body.funnel #funnelDownload p {
  color: #50350a;
}
body.funnel #funnelDownload .subhead {
  padding-bottom: 15px;
  margin-bottom: 15px;
  margin-top: 15%;
}
body.funnel #funnelDownload ul.list {
  margin: 15px auto;
  width: 80%;
}
body.funnel #funnelDownload ul.list li {
  line-height: 150%;
  list-style-position: outside;
  margin: 8px auto;
  padding-left: 5px;
  text-align: left;

}
body.funnel .prolog {
  font-family: "Alegreya Bold", serif;
  line-height: 140%;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
body.funnel footer {
  background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/desktop/footer_BG.jpg);
  padding: 30px;
}
body.funnel footer .social_wrapper > a {
  background-size: 100%;
  height: 43px;
  margin: 0 10px;
  width: 43px;
}
body.funnel footer .games {
  margin-top: 40px;
}

@media only screen and (max-width: 768px) {
  body.funnel h3 {
    font-size: 7vw;
  }
  body.funnel h4 {
    font-size: 5vw;
  }
  body.funnel p,
  body.funnel #funnelDownload p {
    font-size: 4.25vw;
    line-height: 140%;
  }

  body.funnel footer p {
    font-size: 3.5vw;
  }

  body.funnel ul.list {
    font-size: 4vw;
  }
}


/*------------------------------------*\
  ### FUNNEL Tablet ###
--------------------------------------*/
@media only screen and (min-width: 768px) {
  body.funnel {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/funnel/funnel_tablet_BG.jpg);
  }
  body.funnel #funnelDownload .content {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/funnel/pergament.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 8% auto;
    padding: 18% 8% 15% 8%;
    width: 90%;
  }
  body.funnel #funnelDownload p.prolog {
    font-size: 2.5vw;
  }

  body.funnel #funnelDownload p {
    font-size: 2.125vw;
    line-height: 150%;
  }
  body.funnel #funnelDownload h3 {
    font-size: 4vw;
  }
  body.funnel #funnelDownload h4 {
    font-size: 2.5vw;
    letter-spacing: 2px;
  }
  body.funnel #funnelDownload #logo {
    margin: 5% auto;
    padding-top: 19%;
    top: -6%;
    width: 46%;
  }
  body.funnel #funnelDownload .subhead {
    margin-top: 5%;
    padding-bottom: 25px;
    margin-bottom: 25px;
  }
  body.funnel #funnelDownload ul.list {
    font-size: 2vw;
    margin: 30px auto;
    width: 60%;
  }
  body.funnel #funnelDownload ul.list li {
    padding-left: 5px;
    list-style-position: outside;
    text-align: left;
  }
  body.funnel footer h3 {
    font-size: 4vw;
  }
  body.funnel footer p {
    font-size: 16px;
    line-height: 150%;
  }
}

/*------------------------------------*\
  ### FUNNEL Desktop ###
--------------------------------------*/
@media only screen and (min-width: 1024px) {
  body.funnel {
    background-image: url(https://s3-static.geo.gfsrv.net/goe_website/website/1.3.2/img/landing/funnel/funnel_only_BG.jpg);
  }
  body.funnel #funnelDownload {
    font-size: 100%;
    padding: 0;
  }
  body.funnel #funnelDownload .content {
    padding: 13% 7% 10% 7%;
    width: 62.66666667%;
  }
  body.funnel #funnelDownload #logo {
    margin: 0 auto;
    top: -3%;
    padding-top: 19%;
    width: 46%;
  }
  body.funnel #funnelDownload h3 {
    font-size: 2vw;
  }
  body.funnel #funnelDownload h4 {
    font-size: 1.125vw;
  }
  body.funnel #funnelDownload .subhead:after {
    left: 50%;
    transform: translateX(-50%);
  }
  body.funnel #funnelDownload ul.list {
    font-size: 0.9vw;
    margin: 30px auto;
    width: 60%;
  }
  body.funnel #funnelDownload ul.list li {
    padding-left: 5px;
    list-style-position: outside;
    text-align: left;
  }
  body.funnel #funnelDownload p.prolog {
    font-size: 1.125vw;
    font-family: "Alegreya Bold", serif;
    line-height: 140%;
    letter-spacing: 2px;
    margin-bottom: 20px;
  }
  body.funnel footer h3 {
    font-size: 2vw;
  }
}

/*------------------------------------*\
  ### Animations ###
--------------------------------------*/
@keyframes fadeIn {
  0% {
      display:none;
      opacity: 0;
      transform: translateX(50px);
    }

    1% {
      display: block ;
      opacity: 0;
      transform: translateX(50px);
    }

    100% {
      display: block ;
      opacity: 1;
      transform: translateX(0);
  }
}

@keyframes buttonAnimation {
  0% {transform: rotate(0deg);}
  5% {transform: rotate(-2deg);}
  10% {transform: rotate(2deg);}
  15% {transform: rotate(0deg); text-shadow: none, 0 0 6px #000;}
  50% {transform: rotate(0deg); text-shadow: 0 0 20px #e6cd75, 0 0 6px #000;}
  100% {transform: rotate(0deg); text-shadow: none, 0 0 6px #000;}
}


@media screen and (min-width: 1600px) {
  #registerOverlay {padding-top: 42.5%;}
}