/* ==========================================================================
   Liquid's custom styles
   ========================================================================== */

body {
    /* min-height:2000px;
    min-width:1200px;*/
    background: url('/account/content/ffxiv_register/imgs/template/common/bgVer3.jpg?ver=10202400021619') no-repeat;
    background-size: cover;
    background-position: center center;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight:400;
}

img {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

.img-responsive {
    margin:0 auto;
    padding: 10px;
}

.img-responsive.win_logo, .img-responsive.steam_logo {
    height: 70px;
}

.img-responsive.esrb-rating {
    width: 220px;
    height: 105px;
    padding-bottom: 0px;
}

.img-responsive.ersb {
    width: 80px;
    height: 92px;
    padding-bottom: 0px;
}

@media only screen and (max-width: 767px) {
    .sp-none {
        display: none;
    }
}

.ersb-text {
    font-size: 9px;
    text-align: center;
    display: block;
    text-decoration: none;
}

h1,
h2,
h3 {
    font-family: 'Alegreya SC', serif;
    letter-spacing: 0.05em;
}

p {
    color: #fff;
    letter-spacing: 0.08em;
    font-weight: 300;
}

a {
    decoration:none;
	color:#fff;
}

a:hover {
    text-decoration: underline;
    color: #fff;
}

a:focus {
	outline :none;
    text-decoration: underline;
    color: #fff;
}

ul li {
    text-align: left;
}

.parallax-window {
    min-height: 400px;
    background: transparent;
}

.text-box {
    /* opacity:0.6; */
    cursor: pointer;
    padding: 20px;
}

.separator.flipped {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipW;
    -ms-filter: "FlipW";
    top: -2px;
}

.separator {
    position: absolute;
    z-index: 3;
    top: -18px;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 450px;
    max-width: 100%;
}

.title {
    color: #333;
    margin-bottom: 1.2em;
    text-shadow: 0 0 6px rgba(7,159,255,0.4);
}

.subtitle {
    color: #333;
    margin: 1.5em 0 1em;
}

.horizontal {
    position: absolute;
    z-index: 2;
    top: -9px;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 100%;
    background: url("/account/content/ffxiv_register/imgs/template/common/horizontal.png?ver=10202400021619") repeat-x;
    height: 20px;
}

.horizontal.bottom {
    top: auto;
    bottom: -9px;
}

/* STEP 1 */
#stepOne {
    display:block;
}

/* STEP 2 */
#stepTwo {
    display:none;
    margin-top:7vh;
}

#stepTwo p {
    font-weight:400;
}

#stepTwo input {
    max-width: 400px;
    margin:0 auto;
}

#stepTwo .submit #submit-btn {
    margin:0;
    cursor:pointer;
}

/* STEP 3 */
#stepThree {
    display:none;
    margin-top:10vh;
}

#stepThree .title {
    margin-bottom:0em;
}

#panel1 {
    position: relative;
    min-height: 100vh;
    text-align: center;
}

#panel1 .container {
    position:relative;
    min-height: 100vh;
	margin: 0 auto 30px auto;
}

#panel1 #overlay {
    background:url('/account/content/ffxiv_register/imgs/template/common/overlay.png?ver=10202400021619') repeat-y;
    background-size:100%;
    min-height:100%;
    top:0;
    position:absolute;
    width:100%;
}

#panel1 #form-container .col-md-6:last-child {
    border-left:1px solid #999;
}

#panel1 #form-container h5 {
    text-transform:uppercase;
    font-weight:600;
    margin:1em 0 2em 0;
}

.login-btn {
    max-width: 300px;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    margin: 0 auto 4em;    
    padding: .9em 0;
    cursor:pointer;
    font-weight:600;
    outline:none;
    color: #000;
    -webkit-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.1);
}

.login-btn a {
    text-decoration:none;
    outline:none;
    color:#333;
}

.login-btn a:hover {
    color:#000;
}

.login-btn:hover { 
    background:#959595;
    color:#000;
}

.login-btn img {
    margin-left:0.2em;
}

#ja .login-font-size{
	font-size:10px;
}
.mfp-content {
    
    max-width: 400px;
    background: #fff;
    padding:2em 0;
}
.white-popup {
    position: relative;
    background: #111;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
    color: #eee;
}

.white-popup h4 {
    color: #999;
}

.submit {
    margin:1em 0;
}

.submit #submit-btn {
    max-width:400px; 
    margin:2em auto;
}

.submit #submit-btn2 {
    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: 2em;
    line-height: 49px;
    font-family: 'Alegreya SC', serif;
    cursor: pointer;
    box-shadow: 2px 2px 5px #000;
    transition: all 330ms ease-in-out;
    margin: 2em auto;
    color: #fff;
}

.submit #submit-btn2:hover{
    -webkit-filter: grayscale(.35);
    filter: grayscale(.35);
    color: #fff;
}

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

.submit #submit-btn2:before {
    background-image: url('/account/content/ffxiv_register/imgs/template/common/final-fantasy-xiv-stormblood-button-left.png?ver=10202400021619');
    left: -83px;
}

.submit #submit-btn2:after {
    background-image: url('/account/content/ffxiv_register/imgs/template/common/final-fantasy-xiv-stormblood-button-right.png?ver=10202400021619');
    right: -83px;
}

#ja .submit #submit-btn2 {
    font-family: 'メイリオ', Meiryo, 'Alegreya SC', serif;
}


.submit h4 a{
    color:#fff;
    decoration:none;
    font-weight:700;
}

form {
    text-align:left;  
    margin:0 auto;
    width:90%;
}

input {
    margin:1em 0;
}

form .chosen-container-single .chosen-single,
form .chosen-container-active.chosen-with-drop .chosen-single,
form input,form select {
   /* background:#343434;*/
    background: #000;
    color:#fff;
    border-radius:0px;
    border:0px solid #696969;
    padding:0.8em 1em;
    height:3.6em;
    font-size:1em;
    letter-spacing:0.08em;
    box-shadow:none;
    width:100%;
    margin:0;
}

#birth-field select {
	width:32.3%;
}


form .chosen-container-single .chosen-drop {
    background:#343434;
}

form .chosen-container .chosen-results li{
    color:#eee;
    background:none;
    margin:0;
    padding:1em;
    letter-spacing:0.08em;
}

.chosen-container-single .chosen-single div {
    margin-top: 1em;
    margin-right: 1em;
    height:2em;
}

.chosen-container .chosen-drop {
    box-shadow:none;
    border:0;
}

form .form-field {
    margin:1em 0;
}

form .form-field .col-xs-11 a{
    color:#fff;
    decoration:none;
    font-weight:700;
}

form .form-field .error{
    color:#cc0000;
    padding-bottom:0.5em;
    font-weight:bold;
}

form .form-field h6 {
    margin-bottom:0.5em;
    font-weight:600;
}

form .form-field a:hover{
    color:#fff;
}

form .form-field .col-xs-1,
form .form-field .col-xs-11 {
    padding:0;
}

input[type=checkbox], input[type=radio] {
    height:inherit;
    /* font-size: 5em; */
}

form .chosen-container .chosen-results li.highlighted {
    color:#eee;
    background:#222;
}

.chosen-container .chosen-results {
    color: #444;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    max-height: 240px;
}
/**
 * Simple fade transition,
 */

.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}


/* FOOTER */

footer {
    position: relative;
    min-height: 50px;
    background: #7f1119;
    padding: 25px 0;
}

footer .legal {
    color:#fff;
}

footer a {
    color:#fff;
    font-weight:700;
}

footer ul {
    padding: 0;
}

footer ul li {
    display: inline-block;
    vertical-align: middle;
}

footer .legal-block {
    padding-top: 20px;
    font-size: 12px;
}

#copyright {
}
#copyright i {
	vertical-align: middle;
	display: inline-block;
}
#copyright i.psf {
	background: url(/account/content/ffxiv_register/imgs/template/common/PSF.svg?ver=10202400021619) no-repeat 0 0;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	width: 14px;
	height: 14px;
}
#copyright i.ps4 {
	background: url(/account/content/ffxiv_register/imgs/template/common/PS4.svg?ver=10202400021619) no-repeat 0 0;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	width: 42px;
	height: 11px;
}
#copyright i.ps5 {
	background: url(/account/content/ffxiv_register/imgs/template/common/PS5.svg?ver=10202400021619) no-repeat 0 0;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	width: 42px;
	height: 11px;
}

@media only screen and (max-width: 480px) {

    .submit #submit-btn {
        max-width:100%; 
    }
}

@media only screen and (max-width: 400px) {
    .separator {
        display: none;
    }
}

.row-center{
text-align:center;
letter-spacing:-0.4em;
}

.row-center > [class*='col-'] {
display:inline-block;
letter-spacing:0;
vertical-align:top;
float:none !important;
}

.row-center.va-middle > [class*='col-'] {
vertical-align:middle;
}
.row-center.va-bottom > [class*='col-'] {
vertical-align:bottom;
}
.wrap {
	overflow: hidden;
}

#logo {
	display: block;
	position: relative;
	margin: 0 auto;
	width: 90%;
	max-width: 789px;
}

.stormblood-chevron {
	width: 100%;
	position: absolute;
	left: 0;
}

.stormblood-chevron.top-chevron {
	top: -8.5px;
}

.stormblood-chevron.bottom-chevron {
	bottom: -38.5px;
	z-index: 9999;
}

.final-fantasy-xiv-account-creation-header-text {
    z-index: 1;
    text-align: center;
    position: relative;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Alegreya SC', serif;
    font-weight: 700;
    z-index: 1;
    position: relative;
    margin: 0 auto;
    width: 90%;
    font-size: 2em;
    line-height: 1;
    display: block;
}

.final-fantasy-xiv-account-creation-header-text div {
    background: #8b7242;
    background: linear-gradient(to bottom,  transparent, transparent);
    background: -moz-linear-gradient(top,  #8b7242 0%, #e6dec5 100%);
    background: -webkit-linear-gradient(top,  #8b7242 0%,#e6dec5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8b7242', endColorstr='#e6dec5',GradientType=0 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #786239;
    z-index: 1;
    position: relative;
}

.final-fantasy-xiv-account-creation-header-text:after {
    content: attr(data-text);
    position: absolute;
    display: block;
    text-align: center;
    top: 0;
    left: 0;
    text-shadow: 2px 2px 4px #000;
    z-index: -1;
    width: 100%;
    background: none;
    -webkit-background-clip: border-box;
    color: transparent;
}