/* CSS Document */


/* Ash */


/* Google Fonts */

@import url('https://fonts.googleapis.com/css?family=Cinzel:400,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative:700&display=swap');

@font-face {
    font-family: 'chinese_rocksregular';
    src: url('../css/font/chinese_rocks_rg-webfont.woff2') format('woff2'),
         url('../css/font/chinese_rocks_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    

}

@font-face {
    font-family: 'texas_tango_bold_personal_uRg';
    src: url('../css/font/texat_bold-webfont.woff2') format('woff2'),
         url('texat_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'inconsolatamedium';
    src: url('../css/font/inconsolata-webfont.woff2') format('woff2'),
         url('../css/font/inconsolata-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Colors, should use css variables once all browsers support this */

:root {
    --primary: #070b0e;
    --secondary: #7f4c13;
}


/* Reset CSS */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #000000;
    color: #FFF;
    font-family: 'Cinzel', serif;
    font-size: 20px;
}

body.menu-active {
    overflow: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}


/* Layout */

.container {
    max-width: 1199px;
    margin-left: auto;
    margin-right: auto;
}

.container:before,
.container:after {
    display: table;
    content: "";
}


/* General Items */


/* -- Button */

.btn {
    background-image: url(../media/images/boutontest.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    display: inline-block;
    padding: 22px 25px 45px;
    line-height: 20px;
    text-transform: uppercase;
    font-family: 'chinese_rocksregular', serif;
    min-width: 235px;
    font-size: 110%;
    text-align: center;
    text-shadow: 2px 4px 10px #000;
}


/* Header */

.frontpage header {
    display: none;
}

header {
    text-align: center;
    position: absolute;
    transform: translate(-50%, -50%);
}


/* Navigation */

nav#primary {
    padding-bottom: 20px;
    padding-top: 13px;
    padding-left: 65px;
    position: absolute;
    z-index: 5;
    background-image: url('../images/topheader-left.png');
    background-repeat: no-repeat;
    margin-left: 8px;
    margin-top: 8px;
    font-family: 'Ubuntu', sans-serif;
    left: 15px;
    z-index: 25;
}

nav ul li {
    display: inline-block;
    font-size: 14px;
}

nav ul li.nav-item-home a {
    text-indent: -9999px;
    overflow: hidden;
    background-image: url('../images/epsilon-icon.png');
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    background-size: 100% auto;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translate(0, -50%);
    /* z-index: 99999999999999999999; */
}

nav ul li:not(:last-of-type) {
    margin-right: 10px;
}

/* Vendors */
.transition(@transition){
	-webkit-transition: @transition;
    -moz-transition: @transition;
    -o-transition: @transition;
    transition: @transition;
}
.animation(@animation){
	-webkit-animation: @animation;
    -moz-animation: @animation;
    -o-animation: @animation;
    animation: @animation;
}
.rounded(@rounded){
	-webkit-border-radius: @rounded;
	-moz-border-radius: @rounded;
	border-radius: @rounded;
}
.rotate(@rotate){
	-webkit-transform: rotate(@rotate);
	-moz-transform: rotate(@rotate);
	-o-transform: rotate(@rotate);
	transform: rotate(@rotate);
}
.scale(@scale){
	-webkit-transform: scale(@scale);
	-moz-transform: scale(@scale);
	-o-transform: scale(@scale);
	transform: scale(@scale);
}
.shadow(@shadow){
	-webkit-box-shadow: (@shadow);
	box-shadow: (@shadow);
}


/* Rules */
@back_color: #CEC9C3;

.taille_au_carre(@taille){
	width: @taille;
	height: @taille;
}



/* General */
body{ background-color: @back_color; }

#cylinder{
	margin: 50px auto;
	background: #36353a;
	position: relative;
	.taille_au_carre(300px);
	.rounded(100%);
	.animation(anim_cylinder 8000ms ease 800ms infinite);
}

.sculpt{
	position: absolute;
	background-color: @back_color;
	.taille_au_carre(80px);
	.rounded(100%); 
}

	.sculpt.one 	{ top: -37px; left: 194px; 	}
	.sculpt.two		{ top: -37px; left: 26px;  	}
	.sculpt.three	{ top: 110px; left: -59px;  }
	.sculpt.four	{ top: 257px; left: 26px;  	}
	.sculpt.five	{ top: 257px; left: 194px;  }
	.sculpt.six		{ top: 110px; left: 280px;  }

.ring.center{
	background-color: #242424;
	position: absolute;
	left: 115px;
	top: 115px;
	.taille_au_carre(70px);
	.rounded(100%);
	.shadow(0 0 0 4px #444444);
}

.chamber{
	position: relative;
	overflow: hidden;
	background-color: #CEC9C3;
	.taille_au_carre(70px);
	.rounded(100%);
}

	.chamber.one 	{ top: 20px; 	left: 115px;	}
	.chamber.two	{ top: -3px; 	left: 34px; 	}
	.chamber.three	{ top: 20px; 	left: 34px; 	}
	.chamber.four	{ top: 1px; 	left: 115px;	}
	.chamber.five	{ top: -213px; left: 199px;		}
	.chamber.six	{ top: -186px; left: 199px; 	}

.bullet{
	background: #faed8c;
	opacity: 0;
	.taille_au_carre(70px);
	.rounded(100%);
}

	.one .bullet	{ .animation(anim_bullet1 8000ms ease 800ms infinite); }
	.two .bullet	{ .animation(anim_bullet2 8000ms ease 800ms infinite); }
	.three .bullet	{ .animation(anim_bullet3 8000ms ease 800ms infinite); }
	.four .bullet	{ .animation(anim_bullet4 8000ms ease 800ms infinite); }
	.five .bullet	{ .animation(anim_bullet6 8000ms ease 800ms infinite); }
	.six .bullet	{ .animation(anim_bullet5 8000ms ease 800ms infinite); }

.bullet .ring{
	background-color: #D1C96F;
	position: absolute;
	left: 15px;
	top: 15px;
	.taille_au_carre(40px);
	.rounded(100%);
}




/* Vendor animation */
@-webkit-keyframes 	anim_cylinder { .anim_cylinder; }
@-moz-keyframes 	anim_cylinder { .anim_cylinder; }
@-ms-keyframes 		anim_cylinder { .anim_cylinder; }
@-o-keyframes 		anim_cylinder { .anim_cylinder; }
@keyframes 			anim_cylinder { .anim_cylinder; }

@-webkit-keyframes	anim_bullet1 { .anim_bullet1; }
@-moz-keyframes		anim_bullet1 { .anim_bullet1; }
@-ms-keyframes		anim_bullet1 { .anim_bullet1; }
@-o-keyframes		anim_bullet1 { .anim_bullet1; }
@keyframes			anim_bullet1 { .anim_bullet1; }

@-webkit-keyframes	anim_bullet2 { .anim_bullet2; }
@-moz-keyframes		anim_bullet2 { .anim_bullet2; }
@-ms-keyframes		anim_bullet2 { .anim_bullet2; }
@-o-keyframes		anim_bullet2 { .anim_bullet2; }
@keyframes			anim_bullet2 { .anim_bullet2; }

@-webkit-keyframes	anim_bullet3 { .anim_bullet3; }
@-moz-keyframes		anim_bullet3 { .anim_bullet3; }
@-ms-keyframes		anim_bullet3 { .anim_bullet3; }
@-o-keyframes		anim_bullet3 { .anim_bullet3; }
@keyframes			anim_bullet3 { .anim_bullet3; }

@-webkit-keyframes	anim_bullet4 { .anim_bullet4; }
@-moz-keyframes		anim_bullet4 { .anim_bullet4; }
@-ms-keyframes		anim_bullet4 { .anim_bullet4; }
@-o-keyframes		anim_bullet4 { .anim_bullet4; }
@keyframes			anim_bullet4 { .anim_bullet4; }

@-webkit-keyframes	anim_bullet5 { .anim_bullet5; }
@-moz-keyframes		anim_bullet5 { .anim_bullet5; }
@-ms-keyframes		anim_bullet5 { .anim_bullet5; }
@-o-keyframes		anim_bullet5 { .anim_bullet5; }
@keyframes			anim_bullet5 { .anim_bullet5; }

@-webkit-keyframes	anim_bullet6 { .anim_bullet6; }
@-moz-keyframes		anim_bullet6 { .anim_bullet6; }
@-ms-keyframes		anim_bullet6 { .anim_bullet6; }
@-o-keyframes		anim_bullet6 { .anim_bullet6; }
@keyframes			anim_bullet6 { .anim_bullet6; }


/* Cylinder animation */
.anim_cylinder() {
	0%	{ .rotate(0deg);		}
	06%	{ .rotate(60deg);	}
	08%	{ .rotate(60deg);	}

	16%	{ .rotate(120deg);	}
	18%	{ .rotate(120deg);	}

	26%	{ .rotate(180deg);	}
	28%	{ .rotate(180deg);	}

	36%	{ .rotate(240deg);	}
	38%	{ .rotate(240deg);	}

	46%	{ .rotate(300deg);	}
	48%	{ .rotate(300deg);	}

	56%	{ .rotate(360deg);	}
	58%	{ .rotate(360deg);	}

	66%	{ .rotate(-420deg);	}
	68%	{ .rotate(-420deg);	}
	72%	{ .rotate(-360deg);	}
	76%	{ .rotate(-300deg);	}
	80%	{ .rotate(-240deg);	}
	84%	{ .rotate(-180deg);	}
	88%	{ .rotate(-120deg);	}
	92%	{ .rotate(-60deg);	}

	100%{ .rotate(360deg); 	}
}


/* Bullets animation */
.anim_bullet1() {
	04.5% 	{ .scale(1); 	opacity: 0;	}
	06%		{ .scale(.8); 	opacity: 1;	}
	70%		{ .scale(.8); 	opacity: 1;	}
	71%		{ .scale(0); 	opacity: 0;	}
}

.anim_bullet2() {
	14.5% 	{ .scale(1);	opacity: 0; }
	16%		{ .scale(.8); 	opacity: 1;	}
	74%		{ .scale(.8); 	opacity: 1;	}
	75%		{ .scale(0); 	opacity: 0;	}
}

.anim_bullet3() {
	24.5% 	{ .scale(1);	opacity: 0; }
	26%		{ .scale(.8); 	opacity: 1;	}
	78%		{ .scale(.8); 	opacity: 1;	}
	79%		{ .scale(0); 	opacity: 0;	}
}

.anim_bullet4() {
	34.5% 	{ .scale(1);	opacity: 0; }
	36%		{ .scale(.8); 	opacity: 1;	}
	82%		{ .scale(.8); 	opacity: 1;	}
	83%		{ .scale(0); 	opacity: 0;	}
}

.anim_bullet5() {
	44.5% 	{ .scale(1);	opacity: 0; }
	46%		{ .scale(.8); 	opacity: 1;	}
	86%		{ .scale(.8); 	opacity: 1;	}
	87%		{ .scale(0); 	opacity: 0;	}
}

.anim_bullet6() {
	54.5% 	{ .scale(1);	opacity: 0; }
	56%		{ .scale(.8); 	opacity: 1;	}
	90%		{ .scale(.8); 	opacity: 1;	}
	91%		{ .scale(0); 	opacity: 0;	}
}




/* Aside Navigation, Account Features */

#account-menu {
    color: #FFF;
    padding-bottom: 20px;
    padding-top: 13px;
    padding-right: 65px;
    position: absolute;
    z-index: 15;
    background-image: url('../images/topheader-right.png');
    background-size: 157px 57px;
    background-repeat: no-repeat;
    background-position: center right;
    right: 15px;
    margin-left: 8px;
    margin-top: 8px;
    font-family: 'Ubuntu', sans-serif;
}

#account-menu nav ul li:first-of-type:after {
    content: "|";
    padding-left: 12px;
    font-size: 20px;
}


/* Content */

.overlay-content {
    transform: translate(-50%, -50%);
    position: absolute;
    top: 42%;
    left: 50%;
    z-index: 2;
}

main {
    min-height: 100vh;
    text-align: center;
    position: relative;
    float: left;
    width: 100%;
    z-index: 1;
    overflow: hidden;
}

#logo {
    max-width: 700px;
    margin-bottom: 20px;
    clear: both;
}

#introduction h1 {
    margin-top: -10px;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 22px;
    text-shadow: 1px 1px 1px #000;
}

#introduction p {
    font-size: 15px;
    max-width: 600px;
    font-weight: 300;
    font-family: 'Ubuntu', sans-serif;
    margin: 10px auto 20px;
}

#introduction .inner-introduction:before {
    height: 100%;
    width: 100%;
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
}

#introduction:before,
#introduction:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url(../images/header-frame-left.png);
    background-repeat: no-repeat;
    width: 746px;
    height: 353px;
    z-index: 10;
}

#introduction:after {
    right: 0;
    left: auto;
    background-image: url(../images/header-frame-right.png);
}

video#bgvid {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 123%;
    max-width: 100%;
    min-height: 100%;
    /* max-height: 100%; */
    width: auto;
    height: auto;
    z-index: 1;
    -ms-transform: translateX(-50%) translateY(-47%);
    -moz-transform: translateX(-50%) translateY(-47%);
    -webkit-transform: translateX(-50%) translateY(-47%);
    transform: translateX(-50%) translateY(-47%);
    background: #000 no-repeat;
    background-size: cover;
    /* overflow:  hidden; */
}

main .btn+.btn {
    margin-left: 15px;
}

.divider {
    position: relative;
    height: 6px;
    background: transparent;
    margin: 0 auto;
    width: 100%;
    pointer-events: none;
    float: left;
    z-index: 4;
}

.divider-thin {
    height: 9px;
}

.divider-thin:before {
    background-image: url('../media/images/divider.png');
    background-repeat: no-repeat;
    background-size: 1600px;
    content: "";
    position: absolute;
    top: -52px;
    left: 0;
    right: 0;
    background-size: 1600px;
    background-position: 50%;
    height: 115px;
    z-index: 1;
}

.divider-side:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url('../media/images/divider-side.png');
    background-repeat: no-repeat;
    width: 746px;
    height: 353px;
    z-index: 10;
}

.divider-side5:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url('../media/images/divider-side2.png');
    background-repeat: no-repeat;
    width: 746px;
    height: 353px;
    z-index: 10;
}

.divider-side4:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url('../media/images/divider-side.png');
    background-repeat: no-repeat;
    width: 746px;
    height: 353px;
    z-index: 10;
}

.divider-side3:after {
    right: 0;
    left: auto;
    background-image: url('../media/images/divider-side2.png');
}

.divider-side2:after {
    right: 0;
    left: auto;
    background-image: url('../media/images/divider-side2.png');
}

.divider-top:before {
    background-image: url('../media/images/divider-top.png');
    background-repeat: no-repeat;
    content: "";
    position: absolute;
    top: -45px;
    left: 0;
    right: 0;
    background-position: 50%;
    height: 115px;
    z-index: 1;
}

.divider-footer:before {
    background-image: url('../media/images/divider-footer.png');
    background-repeat: no-repeat;
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    background-size: 1600px;
    background-position: 50%;
    height: 500px;
    z-index: 1;
}


/* Footer */

footer {
    background-image: url(../images/azeroth-map.png);
    background-size: 150% auto;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-animation-duration: 150s;
    animation-duration: 150s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: map;
    animation-name: map;
    text-align: center;
    padding-top: 20%;
    padding-left: 30px;
    padding-bottom: 40px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    font-size: 13px;
    position: relative;
    float: left;
    z-index: 1;
    width: 100%;
}

footer {
    text-align: center;
}

footer h3 {
    font-size: 18px;
    margin-bottom: 20px;
    font-family: 'texas_tango_bold_personal_uRg', serif;
    color: #d8d2bc;
}

footer iframe {
    display: inline-block;
    pointer-events: none;
}

.footer-menu {
    list-style: none;
    margin-top: 20px;
}

.footer-menu li {
    display: inline-block;
}

.footer-menu li a {
    color: rgba(255, 255, 255, .7);
    font-size: 17px;
    text-transform: uppercase;
}

.footer-menu li:nth-child(n+2):before {
    content: '';
    display: inline-block;
    height: 10px;
    width: 1px;
    background-color: rgba(255, 255, 255, .3);
    margin: 0 15px;
    pointer-events: none;
}

footer p {
    margin-top: 20px;
    color: rgba(255, 255, 255, .3);
}

.discord-invite-embed {
    display: block;
    position: relative;
    z-index: 999999999999999999;
}


/* Login */

input,
button {
    padding: 0;
    color: #FFF;
    margin: 0;
    border: 0;
    box-shadow: 0;
    background-color: transparent;
    font-family: 'Cinzel', serif;
}

.validation-error {
    font-size: 18px;
    color: red;
    font-weight: bold;
    margin-bottom: 15px;
}


section.account-form form .username-wrapper {
    background-image: url('../images/username.png');
    background-repeat: no-repeat;
    background-size: 250px auto;
    background-position: top center;
}

section.account-form form .password-wrapper {
    background-image: url('../images/password.png');
    background-repeat: no-repeat;
    background-size: 250px auto;
    background-position: top center;
}

section.account-form form .form-row input {
    min-width: 260px;
    display: inline-block;
    color: #FFF;
    outline: none;
    background-image: url('../images/input-background.png');
    background-repeat: no-repeat;
    background-size: 250px auto;
    background-position: top center;
    margin-bottom: 5px;
    height: auto;
    overflow: hidden;
    padding-top: 7px;
    padding-left: 29px;
    padding-right: 5px;
    line-height: 34px;
}

section.account-form form .form-row:first-of-type input {
    background-image: url('../images/username.png');
    background-size: 250px auto;
    padding-top: 28px;
    padding-left: 29px;
    padding-right: 5px;
    line-height: 35px;
}

section.account-form form .username-wrapper input:-webkit-autofill,
section.account-form form .password-wrapper input:-webkit-autofill {
    -webkit-background-clip: text;
}

section.account-form form .password-wrapper input {
    background-size: 250px auto;
    /* height: 45px; */
    padding-top: 2px;
    padding-bottom: 19px;
    padding-left: 29px;
    line-height: 45px;
    padding-right: 5px;
}

section.account-form button {
    cursor: pointer;
}

section.account-form input::placeholder,
section.account-form input::-ms-input-placeholder,
section.account-form input:-moz-placeholder {
    text-transform: uppercase;
}


/* Content: Frontpage */

#introduction {
    min-height: 100vh;
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
}

#features {
    float: left;
    width: 100%;
}

#features section h2 {
    /* padding-top: 150px; */
    text-align: center;
    width: 100%;
    margin-top:5%;
}

main section h2 {
    background: rgba(231,96,95,1);
    background: -moz-linear-gradient(top, rgba(231,96,95,1) 0%, rgba(127,55,54, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(231,96,95,1)), color-stop(100%, rgba(127,55,54, 1)));
    background: -webkit-linear-gradient(top, rgba(231,96,95,1) 0%, rgba(127,55,54, 1) 100%);
    background: -o-linear-gradient(top, rgba(231,96,95,1) 0%, rgba(127,55,54, 1) 100%);
    background: -ms-linear-gradient(top, rgba(231,96,95,1) 0%, rgba(127,55,54, 1) 100%);
    background: linear-gradient(to bottom, rgba(231,96,95,1) 0%, rgba(127,55,54, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ee6362', endColorstr='#7f3736', GradientType=0);
    background-position: 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 36px;
    text-transform: uppercase;
    font-weight: bold;
}

main section h2 span {
    font-family: 'chinese_rocksregular', cursive;
}

main section h2 strong {
    font-weight: 900;
    font-size: 45px;
}

section p {
    text-shadow: 1px 1px 1px #000;
}

#features section p {
    padding-top: 10px;
    max-width: 617px;
    margin-left: auto;
    margin-right: auto;
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
}

#features #character {
    background-image: url('../media/images/Background.png');
    background-size: 2400px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    float: left;
    width: 100%;
    height: 545px;
}

#features #character2 {
    background-size: 2400px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    float: left;
    height: 700px;
    padding-left: 7%;
    padding-right: 5%;
    background: rgb(0, 0, 0);
}


/* World */

#features #world {
    background-image: url('../media/images/histoire.png');
    background-size: 100% auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    float: left;
    width: 100%;
    height: 424px;
}

#features #gallery {
    background-image: url('../images/media/gallery.png');
    background-size: 100% auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    float: left;
    width: 100%;
    height: 600px;
}

#features #custom-content {
    background-image: url('../images/media/custom-content.png');
    background-size: 100% auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    float: left;
    width: 100%;
    height: 490px;
    position: relative;
}

#features #faq {
    background-image: url('../images/media/custom-content.png');
    background-size: 100% auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    float: left;
    width: 100%;
    margin-bottom: 5%;
    position: relative;
}

#custom-content .overlay-art {
    left: 45%;
}

#community .overlay-art {
    left: auto;
    right: -5%;
}

.overlay-art {
    top: 99.8%;
    width: 800px;
    z-index: 5;
    position: absolute;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    pointer-events: none;
}

#play-now {
    position: relative;
}

#play-now .container {
    position: relative;
}

#play-now .overlay-art {
    top: 100%;
    left: 15%;
}

#custom-content .art-size {
    padding-top: 78%;
}

#community .art-size {
    padding-top: 80%;
}

#play-now .art-size {
    padding-top: 65%;
}

#custom-content .overlay-art .art-image {
    background-image: url(../images/media/overlay-custom-content.png);
}

#community .overlay-art .art-image {
    background-image: url(../images/media/overlay-community.png);
}

#play-now .overlay-art .art-image {
    background-image: url(../images/media/overlay-play-now.png);
    background-size: auto 100%;
}

#character2 .overlay-art .art-image {
    background-image: url(../assets/styles/media/images/Comanche.png);
    background-size: auto 100%;
}

.overlay-art .art-image {
    background-position: 50%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#features #custom-content .container .empty-wrapper,
#features #custom-content .container .text-wrapper {
    width: 50%;
    float: left;
    padding-left: 30px;
    padding-right: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#features #gallery .container .empty-wrapper,
#features #gallery .container .gallery-wrapper {
    float: left;
    padding-left: 30px;
    padding-right: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.gallery-wrapper .gallery {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}

.gallery-wrapper .gallery .gallery-item:hover {
    cursor: pointer;
}

.gallery-wrapper .gallery .gallery-item {
    position: relative;
}

.gallery-wrapper .gallery .gallery-item:before {
    content: "";
    position: absolute;
    background-image: url('../images/build-frame.png');
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    transition: 0.3s ease-in-out;
}

.gallery-wrapper .gallery .gallery-item:hover:before {
    opacity: 1;
}

#features #play-now .container .empty-wrapper,
#features #play-now .container .custom-wrapper {
    float: left;
    padding-left: 30px;
    padding-right: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#features #play-now .play-now-text {
    margin-top: -50px;
}

#features #play-now .breaker {
    margin-top: -20px;
    margin-bottom: 20px;
    display: block;
}

#features #play-now .container .empty-wrapper {
    width: 30%;
}

#features #play-now h3 {
    font-size: 32px;
    margin-bottom: 20px;
}

#features #play-now .container .custom-wrapper {
    width: 70%;
}

#features #custom-content .container .text-wrapper {
    width: 50%;
    padding-left: 70px;
}

#features #custom-content h2 {
    text-align: center;
}

#features #world .container .text-wrapper,
#features #world .container #video-wrapper,
#features #community .container .text-wrapper {
    width: 50%;
    float: left;
    padding-left: 0px;
    padding-right: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: 15;
}

#features #world .container .text-wrapper {
    padding-left: 60px;
    padding-right: 30px;
}

#features #world .container #video-wrapper {
    padding: 0;
}

.inner-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 50px 0;
}

#video-wrapper .inner-wrapper:before,
#video-wrapper .inner-wrapper:after {
    content: "";
    position: absolute;
    top: 4px;
    background-image: url('../images/video-frame.png');
    background-repeat: no-repeat;
    width: 235px;
    height: 44px;
    left: 50%;
    transform: translate(-50%, 0);
    /* opacity: 0.5; */
}

#video-wrapper .inner-wrapper:after {
    bottom: 0px;
    top: auto;
    height: 80px;
    z-index: -1;
    height: 92px;
}

#video-wrapper iframe {
    z-index: 5;
    
    
    border: 1px solid rgba(38, 143, 176, 1);
    box-shadow: 3px 3px 14px rgb(0 0 0 / 70%);
}

.inner-wrapper:hover {
    cursor: pointer;
}

.play-btn {
    width: 75px;
    height: 75px;
    background-image: url(../images/epsilon-play-btn.png);
    background-repeat: no-repeat;
    background-position: -9px -1px;
    background-size: 176px auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;
}

.inner-wrapper:hover .play-btn {
    background-position: -100px 0;
}

#features #character h2 {
    text-align: center;
    margin-top: -40px;
    margin-bottom: 10px;
}

#features #character2 h2 {
    text-align: center;
    margin-top: -40px;
    margin-bottom: 10px;
}

#features #character .container {
    display: flex;
    align-items: center;
    justify-content: center;
}

#features #character2 .container {
    display: flex;
    align-items: center;
    justify-content: center;
}


#features #world .container #video-wrapper img {
    max-width: 100%;
    /* margin-top: 125px; */
    position: relative;
    z-index: 2;
}

#features #world .container .text-wrapper {
    text-align: left;
    padding-left: 60px;
}


/* Overlay Video */

.overlay-video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden;
}

#features #community {
    background-image: url('../images/media/community.png');
    background-size: 2400px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    float: left;
    width: 100%;
    height: 545px;
    position: relative;
}

#features #play-now {
    background-image: url('../images/media/play-now.png');
    background-size: 100% auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    float: left;
    width: 100%;
    height: 527px;
}

.container {
    max-width: 1199px;
    padding-left: 15px;
    padding-right: 15px;
    margin: auto;
    height: 100%;
}

#features section#community h2 {
    text-align: left;
}

#features section#community p {
    margin: 0;
    text-align: left;
}

#ucp-profile {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 767px;
    width: 100%;
}

#ucp_info,
#ucp-actions {
    float: left;
    width: 100%;
}

#ucp-actions {
    max-height: 100px;
    transition: 0.3s ease-in-out;
    overflow: hidden;
}

#ucp_info {
    max-height: 300px;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}

.profile-ucp.overlay-active #ucp_info,
.profile-ucp.overlay-active #ucp-actions {
    max-height: 0;
}

#ucp-profile aside {
    text-align: left;
    font-family: 'Ubuntu', sans-serif;
    display: inline-flex;
    flex-direction: column;
    text-align: left;
    margin-top: 50px;
}

.info-area {
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 7px 0;
    display: inline-block;
    font-size: 15px;
}

.info-area strong {
    display: inline-block;
    min-width: 180px;
}

.banned {
    color: red;
}

#ucp-profile aside:last-of-type {
    text-align: right;
}

#ucp-profile #ucp_top>img {
    border-radius: 100%;
    overflow: hidden;
}

#ucp-profile #ucp-actions {
    margin-top: 50px;
}

#ucp-profile a {
    cursor: pointer;
}

section#change-password {
    transition: 0.3s ease-in-out;
    transition-delay: 0.3s;
    z-index: 5;
    max-height: 0px;
    float: left;
    width: 100%;
    overflow: hidden;
    margin-top: 50px;
    position: relative;
}

.cancel-password {
    position: absolute;
    top: 11px;
    left: 68%;
    max-width: 77px;
    width: 77px;
    height: 79px;
    transform: translate(-50%, -50%);
    text-align: right;
    cursor: pointer;
    font-weight: bold;
    background-image: url(../images/icons/exit.png);
    background-repeat: no-repeat;
    background-size: auto 50%;
    overflow: hidden;
    z-index: 1000;
    display: block;
    background-position: center center;
}

section.login-form {
    position: absolute;
    height: 100%;
    width: 100%;
}

section#change-password.active {
    max-height: 500px;
}

#form-tooltip {
    text-align: left;
    position: absolute;
    right: -140px;
    top: 42%;
    transform: translate(0, -50%);
    background-color: #9a3838;
    padding: 10px 15px;
    font-size: 14px;
    font-family: "Ubuntu", arial;
    max-width: 180px;
}

#change-password-form {
    position: relative;
}

#change-password-form #form-tooltip {
    right: 80px;
    top: 44%;
}

form#registration_form {
    position: relative;
}

#mobile-menu-icon {
    float: right;
    display: none;
}

#mobile-menu-icon img {
    max-width: 20px;
}

#offcanvas-menu {
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 1003;
    width: 100%;
    height: 100%;
    padding: 30px;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-in-out;
    padding-top: 100px;
    padding-bottom: 100px;
}

body.menu-active #offcanvas-menu {
    opacity: 1;
    pointer-events: all;
}

#offcanvas-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Ubuntu', sans-serif;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

#offcanvas-menu ul li {
    margin-bottom: 15px;
}

#offcanvas-menu ul li a {
    font-size: 24px;
}

#lightbox.active {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 80%;
    transform: translate(-50%, -50%);
    max-height: 875px;
    z-index: 100;
    max-width: 1500px;
    border: 1px solid rgba(38, 143, 176, 1);
    -webkit-box-shadow: 5px 5px 100px rgba(0, 0, 0, .25), 5px 5px 60px rgba(0, 0, 0, .25), 5px 5px 20px rgba(0, 0, 0, .25);
    box-shadow: 5px 5px 100px rgba(0, 0, 0, .25), 5px 5px 60px rgba(0, 0, 0, .25), 5px 5px 20px rgba(0, 0, 0, .25);
}

#lightbox.active .lightbox-close-btn {
    position: absolute;
    right: -55px;
    top: -50px;
    cursor: pointer;
    font-family: "Ubuntu", sans-serif;
    background-image: url('../images/icons/exit.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 45px;
    height: 45px;
}

#lightbox iframe {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 101;
    left: 0;
    top: 0;
}

body main:before {
    content: "";
    background-color: black;
    pointer-events: none;
    opacity: 0;
    transition: 0.3s ease-in-out;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 99;
    left: 0;
}

body.lightbox {
    overflow: hidden;
}

#overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    max-width: 1340px;
}

#overlay:before {
    content: "";
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    width: 100vw;
    height: 100vh;
    z-index: 998;
}

#overlay>img {
    max-width: 1340px;
    border: 1px solid rgba(38, 143, 176, 1);
    z-index: 1000;
}

#prevButton,
#nextButton,
#exitButton {
    cursor: pointer;
    width: 60px;
    height: 60px;
    position: absolute;
    z-index: 1001;
}

.gallery-inner {
    position: relative;
    max-width: 1340px;
}

#prevButton {
    background-image: url('../images/icons/left-arrow.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    left: -5%;
    /* z-index:  1000; */
}

#nextButton {
    background-image: url('../images/icons/right-arrow.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    right: -5%;
}

#exitButton {
    background-image: url('../images/icons/exit.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-image: url('../images/icons/exit.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: -60px;
    right: -60px;
}

body.lightbox {
    overflow: hidden;
}

body.lightbox main:before {
    opacity: 0.7;
}


.social-media {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 15px;
}

.social-media li {
    display: inline-block;
}

.social-media li + li {
    margin-left: 15px;
}

.social-media li img {
    max-width: 25px;
    height: auto;
    filter: grayscale(100%);
    transition: 0.5s ease-in-out;
}

.social-media li:hover img {
    filter: grayscale(0%);
}

.our-faq-wrapper {
    float: left;
    width: 100%;
    padding: 89px 0 60px;
    background:#f5f5f5;
  }
  
  .our-faq-wrapper {
      padding: 90px 0 60px;
    background:#fff;  
  }
  .accordion .card {
    border: none;
    margin-bottom: 30px;
  }
  .our-faq-wrapper .btn-link {
    display: block;
    width: 100%;
    text-align: left;
    position: relative;
    background: #242c42;
    color: #fff;
    border-radius: 0;
    padding: 7px 15px 12px;
    font-size: 16px;
    overflow: hidden;
    border: none;
    font-weight:600;  
  }
  .our-faq-wrapper .btn-link:hover, .our-faq-wrapper .btn-link:focus {
    text-decoration: none;
  }
  .our-faq-wrapper .btn-link:after {
    position: absolute;
    content: '\f068';
    right: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: fontawesome;
  }
  .our-faq-wrapper .btn-link.collapsed:after {
    content: '\f067';
  }
  .our-faq-wrapper .btn-link:before {
    position: absolute;
    content: '';
    background: #86bc42;
    -webkit-transform: skew(-35deg);
    transform: skew(-35deg);
    height: 100%;
    width: 50%;
    left: 90%;
    top: 0;
  }
  .card-header {
    padding: 0;
    background: transparent;
    border-bottom: none;
  }
  .card-body {
    position: relative;
  }
  .card-body:after {
    position: absolute;
    content: '';
    height: 2px;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #242c42;
  }
  .card-body:before {
    position: absolute;
    content: '';
    height: 2px;
    width: 50%;
    left: 0;
    bottom: 0;
    background: #86bc42;
    z-index: 1;
  }

  .toggle-sound {
    position: fixed;
    background-color: rgba(27, 67, 130, 0.301);;
    width: 55px;
    height: 55px;
    line-height: 55px;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 99;
    box-shadow: 0 0 0 0 rgba(11, 11, 12, 0.219);;
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

.toggle-sound.sound-mute {
    box-shadow: none;
    animation: shake 1.25s infinite cubic-bezier(0.66, 0, 0, 1);

}


@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

@-webkit-keyframes pulse {
    to {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}

@-moz-keyframes pulse {
    to {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}

@-ms-keyframes pulse {
    to {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}

@keyframes pulse {
    to {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}

.sound {
    width: 97%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    display: inline-block;
    left: 0;
    top: 0;
    margin-left: -25%;
}

.sound--icon {
    color: inherit;
    line-height: inherit;
    font-size: 1.6rem;
    display: block;
    margin: auto;
    text-align: left;
    padding-left: 20px;
}

.sound--wave {
    position: absolute;
    border: 2px solid transparent;
    border-right: 2px solid #fff;
    border-radius: 50%;
    transition: all 200ms;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.sound--wave_one {
    width: 45%;
    height: 40%;
}

.sound--wave_two {
    width: 70%;
    height: 62%;
}

.sound--wave_three {
    width: 95%;
    height: 75%;
}

.sound-mute .sound--wave {
    border-radius: 0;
    width: 35%;
    height: 35%;
    border-width: 0 2px 0 0;
    left: 5px;
}

.sound-mute .sound--wave_one {
    -webkit-transform: rotate(45deg) translate3d(0, -50%, 0);
    transform: rotate(45deg) translate3d(0, -50%, 0);
}

.sound-mute .sound--wave_two {
    -webkit-transform: rotate(-45deg) translate3d(0, 50%, 0);
    transform: rotate(-45deg) translate3d(0, 50%, 0);
}

.sound-mute .sound--wave_three {
    opacity: 0;
    transform: translateX(-46%);
    height: 20%;

}

#preloader {
    background: #202020 url(/assets/vid/loader.gif) no-repeat center center;
    background-size: 15%;
    height:100vh;
    width:100%;
    position: fixed;
    z-index: 100;
}