/* Preloader */
    #preloader {
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: #0147ff;
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #preloader img {
      width: 70px;
      height: 70px;
      animation: spin 1.5s linear infinite;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }	

html, body {
  margin: 0;
  padding: 0;
  overflow: auto;
}
	body {
	margin: 0 auto;
	font-family:'Luckiest Guy', Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
        text-align: center;
	background-color:#888ed9;
}


a:link, a:visited {
	color: #242424;
	text-decoration: none;
}

a:hover {
	color: #ffffff;
}


.hidetext {
  font-size: 5%;
  text-indent: -9999em;
  text-align: left;
  color: transparent;
  white-space: nowrap;
  outline: none;
}


.clearboth {
	clear: both;
}

img {
    max-width: 100%;
    height: auto !important;
}



#header-outer {
    position: relative;
    margin: 0 auto;
    width: 100%;
    background: url('../images/bg-photo.webp') no-repeat top center;
    background-color:#888ed9;
    height: 980px;
}

#header-wrap {
    position: relative;
	margin: 0 auto;
    max-width: 1200px;
    text-align: center;
}	

#header-inner {
    position: absolute;
    max-width: 700px;
    margin: 90px auto;
    float: left;
}

.discord-wrap {
	 position: relative;
	 margin: 0px auto;
	 width: 100%;
    background-color: #f8fe1a;
    border-top: 1px #ffffff solid;
    border-bottom: 1px #ffffff solid;
    position: relative;
    margin: 0px auto 0px;
    padding: 0px 0px;
}

.tiktok-wrap {
	 position: relative;
	 margin: 0px auto;
	 width: 100%;
    background-color: #000000;
    border-top: 1px #ffffff solid;
    border-bottom: 1px #ffffff solid;
    position: relative;
    margin: 0px auto 0px;
    padding: 0px 0px;
}

.buy {position: relative; margin: 30px auto 45px;font-size:28px;font-weight:700;text-transform: uppercase;}

.buy a {color: #ffffff;}

a.btn {
    text-transform: uppercase;
    letter-spacing: 5px;
    background-color: #7576b3;
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px #eaeaea solid;
    color: #eaeaea;
    font-size: 18px;
}

a.btn:hover {
    background-color: #898fda;
    border: 1px #ffffff solid;
    color: #ffffff;
}

.video-embed {
    position: relative;
    margin: 50px auto;
    width: 900px;
    max-width: 94%;
}


#logo {
	position: relative;
	margin: 0 auto;
	padding: 135px 0 0px;
	text-align: center;
}

#logo img { max-height: 106px;height:auto !important;}

#main-image {position: relative;
    float: left;
    max-width: 500px;
}

#main-image img {width: 100%; height: 100%;}

#title {
	position: relative;
	margin: 52px auto 0;
	padding: 0px 0 0px;
	text-align: center;
}

#title img { max-width: 100%;width:640px;}

#release-date {
    position: relative;
    margin: 45px auto 0;
    font-size: 34px;
  font-family: "Playfair Display", arial, helvetica, sans-serif;
  color: #4a494a;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 18px;
  padding-left:18px;
}

#release-date .date {letter-spacing: 5px;padding-left:5px;    margin-left: -18px;}

.photo-mobile, .photo-desktop {display: none;}

.details {
    position: relative;
    margin: 35px auto 25px;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 18px;
    padding-left: 18px;
    font-family: "Playfair Display", arial, helvetica, sans-serif;
    font-weight: bold;
}





sup {font-size: 60%;}


.single-middle {
    margin-top: 0px;
    background-color: #f8fe1a;
}

.single-middle .buy {
    max-width: 94%;
    margin-bottom: 30px;

}



#middle-content {
    position: relative;
    margin: 0px auto 0;
    padding: 60px 25px;
    background-color: #000000;
    border-bottom: 1px #ffffff solid;
}

.video-embed {
    position: relative;
    margin: 0 auto;
    width: 900px;
    max-width: 94%;
}


.video-thumb-item {
    display: inline-block;
    margin: 25px 25px 0;
}

.video-thumb-item img {
    max-height: 165px;
    cursor: pointer;
}

.video-thumb-item img:hover {opacity: .7;}

.single-middle {
    position: relative;
    margin: 60px auto 0;
}


.merch-outer {position: relative; margin: 0 auto;background-color: #ffffff;padding:50px 0 70px;}
.merch-wrap {position: relative;margin: 0 auto 50px;max-width: 1000px;widows: 85%;}
.merch-item {display: inline-block; vertical-align: top;max-width: 330px;}
.merch-item img {max-width: 330px;height: auto !important;opacity:1;transition: all 0.5s ease;}
.merch-item img:hover {opacity: 0.8;}
.merch-price a {font-size: 20px;font-weight: 400;color: #888ed9;letter-spacing: 0.4px;}
.merch-price a:hover {color: #000000;}

.merch-wrap.treatmyself {
    border-bottom: 1px #ddd solid;
    padding-bottom: 55px;
}

.merch-button a {
    -webkit-border-radius: 8;
    -moz-border-radius: 8;
    border-radius: 8px;
    color: #ffffff;
    font-size: 24px;
    background: #000000;
    padding: 13px 60px 10px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.5s ease;
  }
  
  .merch-button a:hover {
    background: #888ed9;
    text-decoration: none;
  }

.social-wrap {position: relative; margin: 0 auto 0px;}

.social {
    position: relative;
    margin: 0 auto;
    padding: 50px 0 40px;
    background: url('') repeat top center;
    background-color:#000074;
        
}

.social-wrap .social li { margin-right: 0px; display: inline-block; vertical-align:middle;}

.social-wrap ul.social li a { font-size: 36px; color: #82f3f4; text-transform: uppercase; text-decoration: none; padding: 0 5px; /* display: block; */ transition: all 0.7s ease;}
.social-wrap ul.social li.merch a {font-size: 32px;}
.social-wrap ul.social li a:hover { text-decoration: none; color: #ffffff; }

.social-wrap ul.social  { overflow: hidden; }
.social-wrap ul.social  li {  display: inline-block; padding: 0 5px 0 0;  margin: 0px 0px 0px;}

.social-wrap ul.social {
  padding: 0px;
  margin: 0px;
}



/* iframe responsive */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



/**** FOOTER ****/
.website {
    margin: 10px auto 30px;
}

.website a.btn {background-color: #8586cc;}
.website a.btn:hover {background-color: #7576b3;}


.label-logos {
    position: relative;
    margin: 0px auto 15px;
}

.label-logos .label-logo-inner {
    display: inline-block;
    vertical-align: middle;
    padding: 0 8px;
}

.label-logos .label-logo-inner img:hover {opacity: 0.8;}



#footer {
	clear: both;
	position: relative;
	margin: 0px auto;
	padding: 40px 0 60px;
	text-align: center;
	font-size: 12px;
	color: #ffd83a;
	font-weight: 600;
    letter-spacing: 0.4px;
    background-color:#f90000;
	font-family:'Arial';

}

#footer .legal-text {
	  clear: both;
		position: relative;
		padding: 0px 0 0px;
}





/* form details */


#form-outer {
    position: relative;
    margin: 0px auto 0px;
    padding: 50px 0 20px;
    max-width: 1000px;
    letter-spacing: 0.5px;
}

.header {
    position: relative;
    margin: 0 auto 50px;
    text-transform: uppercase;
    font-size: 50px;
    letter-spacing: 1px;
    line-height: 100%;
}

.header-d {
    position: relative;
    margin: 0 auto 40px;
    text-transform: uppercase;
    font-size: 50px;
    color: #000000;
    letter-spacing: 1px;
    line-height: 100%;
}
.header-f {
    position: relative;
    margin: 0 auto 10px;
    text-transform: uppercase;
    font-size: 50px;
    color: #ffffff;
    letter-spacing: 1px;
    line-height: 100%;
}

#Form-Wrapper {
    position: relative;
    margin: 0px auto 0px;
}

.form-field {
    width: 30%;
    display: inline-block;
    vertical-align: top;
}

.form-field input {
    padding: 10px;
    margin-bottom: 15px;
    width: 85%;
    max-width: 400px;
    background-color: transparent;
    border-top: 1px transparent solid;
    border-bottom: 1px #f6b436 solid;
    border-left: 0px;
    border-right: 0px;
    font-size: 28px;
    font-family:'Playfair Display', Arial, Helvetica, sans-serif;
    	text-transform: uppercase;
    	text-align: center;
    	color: #000000;
}

.form-field input:focus {border-bottom: 1px #000000 solid !important;}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.form-field select {
    padding: 10px;
    margin-bottom: 15px;
    width: 90%;
    max-width: 422px;
    background-color: transparent;
    border-top: 1px transparent solid;
    border-bottom: 1px #f6b436 solid;
    border-left: 0px;
    border-right: 0px;
    font-size: 28px;
    	font-family:'Playfair Display', Arial, Helvetica, sans-serif;
    	text-transform: uppercase;
    	text-align: center;
    	text-align-last:center;
    	-webkit-appearance: none;
    	color: #ffffff;
}

.form-field select:invalid {
    color: #f6b436 !important;
}

.form-field.submit-button button {
	background-color: transparent;
    border-bottom: 1px #f6b436 solid;
    border-top: 1px transparent solid;
    border-left: 0px;
    border-right: 0px;
    padding: 10px;
    margin-bottom: 15px;
    font-weight: 400;
    font-size: 28px;
     width: 92%;
    max-width: 422px;
      font-family:'Playfair Display', Arial, Helvetica, sans-serif;
    	text-transform: uppercase;
        color: #ffffff;
        transition: all 0.5s ease;
}

.form-field.submit-button button:hover {
    cursor: pointer;
     /* background-color: #eeeeee; */
    color: #f6b436;
    border: 1px #f6b436 solid;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #f6b436;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #f6b436;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #f6b436;
}
:-moz-placeholder { /* Firefox 18- */
  color: #f6b436;
}

/* Change the to any color, but not transparent */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #eeeeee inset; -webkit-text-fill-color: #333333 !important; border: 1px #dddddd solid;
}


/* for iOS */
textarea,
input,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}

.rules {
    position: relative;
    margin: 0 auto;
    text-transform: uppercase;
    font-size: 16px;
}

.rules a {color: #ffffff;font-weight:400;transition: all 0.5s ease;}
.rules a:hover {color: #242424;}

.rules-mobile {display: none;}

#thankyou {
    font-size: 28px;
    color: #ffffff;
    border-bottom: 1px #f6b436 solid;
    padding: 25px 0;
    margin: 0 auto 25px;
    border-top: 1px #f6b436 solid;
    max-width: 90%;
}


/* Responsive CSS */



@media only screen and (max-width: 1350px) {
    #header-outer {
     /*   background: url('../images/bg-photo-1350.webp') no-repeat top center;
        background-size: contain; */
    /*    background:none;
        display: none; */
    }
    /* .photo-desktop, .photo-desktop img {display: block;} */

    #header-inner {
        padding-right: 45px;
    }
}

@media only screen and (max-width: 1200px) {
    #main-image {
        max-width: 400px;
    }
}

@media only screen and (max-width: 1150px) {
    #header-inner {
        max-width: 620px;
    }
    #main-image {
        max-width: 360px;
    }
}

@media only screen and (max-width: 1050px) {
    #header-inner {
        max-width: 580px;
        padding-right: 60px;
    }
}


@media only screen and (max-width: 1024px) {
    .buy {        margin: 0px auto 50px;    }
    #header-outer {
        background: url('../images/bg-mobile.webp') top left no-repeat;
        background-color:#888ed9;
        height: 678px;
       }
     #header-inner {
        max-width: 480px;
    }

    #logo {
        padding-top: 70px;
    }
    #title {
        margin-top: 40px;
    }
    #release-date {margin-top: 35px;}
    .details {
        margin: 25px auto 20px;
        font-size: 24px;
    }
}

@media only screen and (max-width: 1100px) {
    .buy {  max-width: 96%; }    
}

@media only screen and (max-width: 940px) {
    #header-inner {
        max-width: 440px;
        padding-right:40px;
    } 
}

@media only screen and (max-width: 900px) {
.rules {display: none;}
.rules-mobile {display: block;margin-top:10px;}
}

@media only screen and (max-width: 860px) {
    #header-inner {
        max-width: 400px;
        padding-right:30px;
    } 
}
@media only screen and (max-width: 840px) {
#main-image {display: none;}
.photo-mobile {display: block;    position: relative;
    margin: 0px auto 0;
    text-align: center;
    padding-top:30px;}

    .photo-mobile img {max-width: 50%;border: 0px #ffffff solid;}

#header-outer {
       height: 654px;
       background: url('../images/bg-vertical.webp') top center no-repeat;
       background-color:#888ed9;
       padding-bottom: 0px;
   }

#header-inner {
    max-width: 90%;
    padding: 0px;
    float: none;   
    position: relative;
    margin: 0 auto;
}

#logo {    padding-top: 40px;}
#title {margin-top: 35px;}
#release-date {margin-top:25px;}

}

@media only screen and (max-width: 768px) {
    .release-date {font-size: 30px;}
    #form-outer {padding-top: 20px;}


    }


@media only screen and (max-width: 667px) {
    .video-thumb-item img {
        max-height: 125px;
    }
    .video-thumb-item {
        margin: 25px 10px 0;
    }


}

@media only screen and (max-width: 630px) {
#form-outer {padding:40px 0 30px;}
.form-field input, .form-field select, .form-field.submit-button button {  font-size: 22px;}
.release-date {font-size: 27px;}
}

@media only screen and (max-width: 568px) {
    .social-wrap ul.social li a {font-size: 30px;}
    #logo img {width:94%;}
    .single-wrap {
        width: 99.8%;
    }
    .single-1 .single-inner {margin-right: 0px;}
    .single-2 .single-inner {margin-left: 0px;}
    .single-wrap.single-1 {   background-color: #ffffff;}
    .single-wrap.single-2 {   background-color: #f6b436;}
    .release-date {font-size: 36px;    }
}
 
@media only screen and (max-width: 450px) {
	#form-outer {padding:20px 0 30px;}
	.form-field {    width: 70%;    display: inline;}
    #footer {padding:40px 5% 60px;}
    .release-date {font-size: 30px;}


    .video-thumb-item img {
        max-height: 100px;
    }
    .video-thumb-item {
        margin: 25px 5px 0;
    }
    #title {margin-top:15px;}
    #title img {
        max-width: 80%;
    }
    #release-date {
        margin-top: 15px;
        font-size: 24px;
    }

    .details {
        margin: 15px auto 5px;
        font-size: 18px;
    }
    .buy .retailers-preorder li {
        margin: 0 10px;
    }

}

@media only screen and (max-width: 375px) {
    .video-thumb-item img {
        max-height: 80px;
    }
    .details {
        letter-spacing: 10px;
        padding-left: 10px;
    }

}

@media only screen and (max-width: 800px) {
 .single-details {font-size: 34px;}
 .buy {    font-size: 24px;}
 #footer .copyright {
    text-align: center;
    display: block;
    margin: 0 auto;
    width: 96%;
}
.social-wrap {    margin: 0 auto;    text-align: center;}
.social-wrap ul.social {    padding-right: 13px;}
}

@media only screen and (max-width: 610px) {
 .single-details {font-size: 28px;}
	div#logo img {    max-width: 96% !important;}
		#logo, .cover {    width: 100%;}
	.social-wrap ul.social li a {font-size: 32px;}
		.single-details {    max-width: 90%;}
}



@media only screen and (max-width: 360px) {
 .buy {    font-size: 20px;}
 .btn {padding:8px 10px 10px 10px;}
}

@media only screen and (max-width: 310px) {
 .buy {    font-size: 18px;}
 .btn {padding:6px 8px 8px 8px;}