@font-face {
font-family: 'alegreya_scregular';
src: url('../font/alegreyasc-regular-webfont.woff2') format('woff2'),
url('../font/alegreyasc-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

html
{
max-width: 100%;
-ms-overflow-style: scrollbar;
position: relative;
height: 100%;
max-height: 100%;
-webkit-text-size-adjust: 100%;
overflow: hidden;
overflow-y: auto;
}
body
{
font-size: 24px;
font-weight: 300;
font-family: 'Open Sans', Arial, sans-serif;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a2b4cc+0,ffffff+50,a2b4cc+100 */
background-color: #000;
color: #444c57;
max-width: 1920px;
margin: 0 auto;
-ms-overflow-style: scrollbar;
position: relative;
padding: 0;
overflow: hidden;
overflow-y: auto;
}
body.still-loading
{
max-height: 100%;
}
.container
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
max-width: 1100px;
flex-wrap: wrap;
margin: 0 auto;
min-height: 1080px;
}
.container.bottom-section
{
      min-height: 491px;
}
.container.footer
{
      min-height: 0;
}
.container.section
{
      max-width: 100%;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      color: #fff;
      text-shadow: 2px 2px 4px #000;
      min-height: 0;
}
.container.section.reverse
{
      flex-direction: row-reverse;
}
.container.section.lower
{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 30%;
      font-family: 'alegreya_scregular', Times New Roman, serif;
      padding: 20px;
}
.features-image
{
      width: 100%;
}
.container.section.lower-links
{
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(100% - 40px);
      padding: 20px;
      justify-content: space-between;
}
.section-lower-link
{
      font-size: 1.5em;
      text-align: center;
      font-family: 'Open Sans', Arial, sans-serif;
      cursor: pointer;
      -webkit-transition: border 220ms ease-in-out; /* Safari */
    transition: border 220ms ease-in-out;
          border-bottom: 6px solid rgba(0,0,0,0);
}
.section-lower-link .larger-text
{
      font-size: 1.5em;
}
#fight .section-lower-link:hover
{
      border-bottom: 6px solid #fff;
}
.section-header
{
      font-weight: 700;
      font-size: 5em;
      width: 22.5%;
      max-width: 384px;
      text-transform: uppercase;
      font-family: 'Open Sans', Arial, sans-serif, monospace;
      text-align: left;
      line-height: .75;
      padding: 10px;
}
.right-align
{
      text-align: right;
}
.section-header img
{
      width: 100%;
}
.section-lower-header
{
      font-weight: 400;
      font-size: 1.25em;
      text-transform: uppercase;
      margin-bottom: 10px;
}
.trailer-house
{
      margin-top: 10px;
      max-width: 136px;
      cursor: pointer;
      opacity: .75;
}
.trailer-house:hover
{
      opacity: 1;
}
.mfp-iframe-scaler iframe
{
    box-shadow: none;
}
.trailer-house img
{
      width: 100%;
}
.section-subheader
{
      font-size: 1.5em;
      font-weight: 400;
      line-height: 1;
      padding: 20px;
      width: 70%;
}
.top-logo
{
      width: 100%;
      max-width: 1038px;
      margin: 200px auto 0 auto;
}
.bottom-logo
{
      width: 100%;
      max-width: 823px;
}
#fight
{
      position: relative;
}
#start-your-trial
{
      background-position: center top;
      background-repeat: no-repeat;
      background-size: auto;
}
.fight-image
{
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    -webkit-transition: opacity 220ms ease-in-out; /* Safari */
    transition: opacity 220ms ease-in-out;
}
.fight-image.active
{
      opacity: 1;
}
#home, #story, #fight
{
      background-repeat: no-repeat;
      background-size: cover;
      min-height: 1080px;
      position: relative;
      background-position: center top;
}
#fight-mobile
{
      display: none;
}
.submit-button {
    position: relative;
    margin: 25px auto;
    height: 49px;
    text-align: center;
    display: block;
}

.submit-button span {
    position: relative;
    background: #e6dec5;
    background: -moz-linear-gradient(top,  #e6dec5 0%, #8b7242 100%);
    background: -webkit-linear-gradient(top,  #e6dec5 0%,#8b7242 100%);
    background: linear-gradient(to bottom,  #e6dec5 0%,#8b7242 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6dec5', endColorstr='#8b7242',GradientType=0 );
    border-top: 2px solid #8b7242;
    text-shadow: 2px 2px 5px #000;
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.5em;
    line-height: 49px;
    color: #fff;
    font-family: 'alegreya_scregular', serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 330ms ease-in-out;
}
.submit-button.lower span
{
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#88bbf4+0,5285bc+100 */
      background: rgb(136,187,244); /* Old browsers */
      background: -moz-linear-gradient(top, rgba(136,187,244,1) 0%, rgba(82,133,188,1) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, rgba(136,187,244,1) 0%,rgba(82,133,188,1) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, rgba(136,187,244,1) 0%,rgba(82,133,188,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bbf4', endColorstr='#5285bc',GradientType=0 ); /* IE6-9 */
      border-top: 2px solid #5285bc;
      border-bottom: 2px solid #5285bc;
      line-height: 68px;
      padding: 0 5px;
}
.submit-button span:hover {
    -webkit-filter: grayscale(.35);
    filter: grayscale(.35);
}

.submit-button span:before, .submit-button span:after {
    content: '';
    height: 51px;
    width: 83px;
    position: absolute;
    top: -2px;
    background-size: auto;
    background-repeat: no-repeat;
}

.submit-button span:before {
    background-image: url(../../img/final-fantasy-xiv-stormblood-button-left.png);
    left: -83px;
}

.submit-button span:after {
    background-image: url(../../img/final-fantasy-xiv-stormblood-button-right.png);
    right: -83px;
}

.submit-button.lower span:before {
    background-image: url(../img/bottom-cta-left.png);
    left: -116px;
    height: 72px;
    width: 116px;
}

.submit-button.lower span:after {
    background-image: url(../img/bottom-cta-right.png);
    right: -116px;
    height: 72px;
    width: 116px;
}
#cookie-notification
{
  position:fixed;
  bottom:0px;
  z-index:10000;
  text-align:left;
  font-size:14px;
  color:white;
  background-color:#000000;
  border-top: 1px solid #FFFFFF;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 2%;
  padding-bottom: 2%;
}
#cookie-notification span.dismiss {
    background-color: #FFFFFF;
    padding:0 5px;
    cursor:pointer;
    float:right;
    display: inline-block;
}

#cookie-notification span.dismiss a {
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  line-height: 20px;
}

#cookie-notification .title {
    text-transform: uppercase;
    font-size: 18px;
}
#cookie-notification a
{
  text-decoration: underline;
  color: #fff;
}
/* loading screen */
@-webkit-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.uil-ring-css {
  background-color: rgba(0,0,0,1);
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99999999;
}
.uil-ring-css.active
{
   display: block;
}
.uil-ring-css > div {
  position: fixed;
  display: block;
  width: 160px;
  height: 160px;
  top: calc(50% - 80px);
  left: calc(50% - 80px);
  border-radius: 80px;
  box-shadow: 0 6px 0 0 #bd6da2;
  -ms-animation: uil-ring-anim 1s linear infinite;
  -moz-animation: uil-ring-anim 1s linear infinite;
  -webkit-animation: uil-ring-anim 1s linear infinite;
  -o-animation: uil-ring-anim 1s linear infinite;
  animation: uil-ring-anim 1s linear infinite;
}
.loading-holder
{

}
/* FOOTER */

footer {
    padding: 25px 0;
    background-color: #3f4346;
    position: relative;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

footer ul {
    padding: 0;
}

footer ul li {
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
}
footer ul li a.privacy-link
{
      font-size: .5em;
}
footer .legal-block {
    padding: 20px 0 50px 0;
    font-size: 12px;
}
footer a, footer a:hover, footer a:visited, footer a:focus, footer a:active
{
      color: #fff;
      text-decoration: none;
}
footer a:hover
{
      text-decoration: underline;
}
footer a img
{
      display: block;
      margin: 0 auto;
}
/* language selection additions */
.language-selection
{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    line-height: 1;
    overflow: hidden;
}
.language-selection.active
{
    overflow: visible;
}
.language-selection a, .language-selection a:hover, .language-selection a:focus, .language-selection a:visited, .language-option
{
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 0.333s ease-out;
    -moz-transition: all 0.333s ease-out;
    transition: all 0.333s ease-out;
}
.language-selection a:hover, .language-option:hover, .language-option.active
{
    color: #337ab7;
}
.regions, .languages-page
{
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: height 220ms ease-in-out;
    -webkit-transition: height 220ms ease-in-out;
    font-weight: 700;
}
.regions.active, .languages-page.active
{
      height: auto;
}
.selected-language
{
      display: inline-block;
      vertical-align: middle;
    font-weight: 700;
    cursor: pointer;
    -webkit-transition: all 0.333s ease-out;
    -moz-transition: all 0.333s ease-out;
    transition: all 0.333s ease-out;
}
.selected-language:hover, .selected-language.active, .regions .language-option.active
{
    color: #337ab7;
}
.open-caret
{
    font-size: 24px;
    color: #337ab7;
    display: inline-block;
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
    -webkit-transition: all 0.333s ease-out;
    -moz-transition: all 0.333s ease-out;
    transition: all 0.333s ease-out;
}

.fight-mobile-item
{
      position: relative;
}
.fight-mobile-image
{
      width: 100%;
}
      .features-image.mobile
      {
            display: none;
      }
      
#header-scrolled
{
      position: fixed;
      top: 0;
      left: 0;
      border-bottom: 2px solid #fff;
      background-color: #3f4346;
      padding: 10px;
      min-width: 100%;
      z-index: 9999;
      display: none;
}
#header-scrolled .container
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    min-height: 0;
}
#header-scrolled img
{
      width: 30%;
      max-width: 300px;
}
#header-scrolled .submit-button
{
    width: 250px;
    margin: 0 80px;
}
#start-your-trial
{
      margin-top: -8px;
}
@media screen and (max-width: 1368px)
{
      .container.section.lower
      {
            width: 70%;
      }
      .container.section.lower-links
      {
            justify-content: space-around;
      }
}
@media screen and (max-width: 1024px)
{
      .section-lower-link
      {
            font-size: .9em;
      }
      #fight
      {
            min-height: 0;
            padding-top: 0;
      }
      #fight img
      {
            width: 100%;
      }
      #fight .section-subheader
      {
            font-size: 1em;
      }
      #fight .container.section.lower-links
      {
            position: relative;
      }

}
@media screen and (max-width: 1024px) and (orientation: landscape)
{
      #fight
      {
            min-height: 576px;
      }
}
@media screen and (max-width: 767px)
{
      #start-your-trial
      {
            background-image:  url(../../img/bottom_cta_bg_mobile-min.jpg) !important;
      }
      .boxWrapper.container
      {
            min-height: 0;
      }
.language-selection-house
      {
            left: -40px;
            top: 50px;
            width: 220px;
      }
      .top-logo
      {
            margin: 0 auto;
      }
      .submit-button span
      {
            font-size: .8em;
            padding: 0;
      }
      #home
      {
            background-image: url(../img/top_bg_mobile.jpg) !important;
      }
      #start-your-trial
      {
            background-image: url(../img/bottom_cta_bg_mobile.jpg) !important;
      }
      #fight-mobile
      {
            display: block;
      }
.language-selection-house
      {
            left: -40px;
            top: 50px;
            width: 220px;
      }
      .features-image
      {
            display: none;
      }
      .features-image.mobile
      {
            display: block;
      }
      .container.section.lower
      {
            position: relative;
      }
      .section-lower-link
      {
            width: 100%;
            font-size: 1em;
      }
      .larger-text
      {
            font-size: 1em;
      }
      #fight
      {
            display: none;
      }
      .section-header, .section-subheader
      {
            width: 100%;
            text-align: center;
            margin: 0 auto;
      }
      .container.section.lower
      {
            width: calc(100% - 40px);
      }
}