@font-face {
	font-family: 'tobi_blackregular';
	src: url('tobi_black-webfont.eot');
	src: url('tobi_black-webfont.eot?#iefix') format('embedded-opentype'),
	url('tobi_black-webfont.woff2') format('woff2'),
	url('tobi_black-webfont.woff') format('woff'),
	url('tobi_black-webfont.ttf') format('truetype'),
	url('tobi_black-webfont.svg#tobi_blackregular') format('svg');
	font-weight: normal;
	font-style: normal;

}

/**
 * Fix fonts that render as bold in Firefox
 *
 * Put this near the top of your style.css
 * Before any overriding styles
 */

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 400;
}

/**
 * Firefox specific rule
 */

@-moz-document url-prefix() {
  body {
    font-weight: lighter !important;
  }
}


html,body{
	-webkit-overflow-scrolling : touch !important;
	/*overflow: auto !important;*/
	/*height: 100% !important;*/
	/*overflow-x:hidden !important; */
}

html, body{
    width:100%;
	min-height: 100%; 
    overflow: hidden;
}

body{
	background:#000;
	font-family:'tobi_blackregular',Verdana, sans-serif;
	font-weight: 600;
	background-size: 100% auto;
	overflow:auto;
	overflow:initial;
}

body > iframe, body > img{
	height:0;
	display:none !important;
}

.wrapper-outer{
	width: 100%;
	max-width: 100%;
	overflow-x: hidden !important;
	position: relative;
	left: 0;
	top: 0;
	min-height: 100%;
	height: 100%;
}


.wrapper-all{
	width:100%;
	margin: 0 auto;
	min-height: 100%;
	height: 100%;
	position: relative;
}

.desktop .wrapper-all{min-width: 1200px;}
.desktop .container{min-width: 1000px;}

html, body {
	height: 100%;
}

.wrapper-all {
	/**/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.wrapper{
	z-index: 1;
	position: relative;
	pointer-events: none;
	-webkit-box-flex: 1;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
}

.home{
	pointer-events: none;
}

.wrapper:after {
	content: "";
	display: block;
}

ul, ol {

	margin-top: 0;
	margin-bottom: 0;

}

#footer, .wrapper:after {
	/*height: 80px;*/
}

#footer{
	-ms-flex-negative: 0;
	flex-shrink: 0;
	margin-top:24px;
	position:relative;
	z-index:4;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.04+0,0.82+52,1+98 */ /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.82) 52%,rgba(0,0,0,1) 98%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.00)),color-stop(52%, rgba(0,0,0,0.82)),color-stop(98%, rgba(0,0,0,1)),to(rgba(0,0,0,1)));
	background: -o-linear-gradient(top, rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.82) 52%,rgba(0,0,0,1) 98%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.82) 52%,rgba(0,0,0,1) 98%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

/* parallax */
.scene-container{
	position: absolute;
	width: 100% !important;
	height: 100%;
	left: 0;
	top:0;
	overflow: hidden;
}
.scene{
	width: 100%;
	height: 100%;
	min-width: 1280px;
	left:50%;
	position: relative;
	-webkit-transform: translateX(-50%) rotate(0.001deg) !important;
	-ms-transform: translateX(-50%) rotate(0.001deg) !important;
	transform: translateX(-50%) rotate(0.001deg) !important;
}
.outer {
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
	-webkit-transform-style: flat !important;
	transform-style: flat !important;
}
.background{
	background: url(../img/bg.jpg) no-repeat;
	background-size: cover;
	width: 110%;
	height: 110%;
	position: absolute;
	left: -5%;
	top: -5%;
}

.characters {
	width: 100vw;
	height: 56.25vw;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: scale(0.9) translate(-50%, calc(-50% - 8vmin));
	-ms-transform: scale(0.9) translate(-50%, calc(-50% - 8vmin));
	transform: scale(0.9) translate(-50%, calc(-50% - 8vmin));
	max-height: 100vh;
	max-width: 177.78vh;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	min-width: 1280px;
	min-height: 720px;
}


.char{ /* mainchar */
	-webkit-transition-property: all;
	-o-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
	pointer-events: all;
	-webkit-transform: translate3d(0, -50%,0) scale(0.9);
	transform: translate3d(0, -50%,0) scale(0.9);
	/*pointer-events: none;*/
	width:25% !important;
	height:70% !important;
        cursor:pointer;
}
.char.active{
	-webkit-transform: translate3d(0, -50%,0) scale(1);
	transform: translate3d(0, -50%,0) scale(1);
	pointer-events: none;
	cursor: default;
}


body:before {
	content: url(../img/chooseclass/mage.png)
	url(../img/chooseclass/hunter.png)
	url(../img/chooseclass/warrior.png)
	url(../img/chooseclass/assassine.png)
	url(../img/chooseclass/warlock.png)
	url(../img/chooseclass/berserk.png)
	url(../img/chooseclass/icons/icon_mage_active.png)
	url(../img/chooseclass/icons/icon_hunter_active.png)
	url(../img/chooseclass/icons/icon_warlock_active.png)
	url(../img/chooseclass/icons/icon_assassin_active.png)
	url(../img/chooseclass/icons/icon_berserk_active.png)
	url(../img/chooseclass/icons/icon_warrior_active.png);
	background-image: url(../img/chooseclass/mage.png);
	visibility: hidden;
	position: absolute;
	left: -999em;
}

.mage{
	width: 48vmin;
	height: 69vmin;
	position: absolute;
	left: 0%;
	top: 50%;
}

.mage .image{
	background: url(../img/chooseclass/mage_inactive.png) no-repeat center bottom;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 3;
}
.mage.active .image,.mage:hover .image, .mage.char-carousel .image{
	background-image: url(../img/chooseclass/mage.png);
}


.hunter{
	width: 48vmin;
	height: 69vmin;
	position: absolute;
	left: 19%;
	top: 50%;
}

.hunter .image {
	background: url(../img/chooseclass/hunter_inactive.png) no-repeat center bottom;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 3;
	bottom: 0;
	left: 56%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	top: auto;
}
.hunter.active .image,.hunter:hover .image, .hunter.char-carousel .image {
	background-image: url(../img/chooseclass/hunter.png);
}

.warlock{
	width: 48vmin;
	height: 69vmin;
	position: absolute;
	left: 37%;
	top: 50%;
}

.warlock .image{
	background: url(../img/chooseclass/warlock_inactive.png) no-repeat center bottom;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 3;
}
.warlock.active .image,.warlock:hover .image, .warlock.char-carousel .image{
	background-image: url(../img/chooseclass/warlock.png);
}

.assassine {
	width: 48vmin;
	height: 69vmin;
	position: absolute;
	left: 56%;
	top: 50%;
	background-size: contain;
}

.assassine .image {
	background: url(../img/chooseclass/assassine_inactive.png) no-repeat center bottom;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 3;
	bottom: 0;
}
.assassine.active .image,.assassine:hover .image, .assassine.char-carousel .image {
	background-image: url(../img/chooseclass/assassine.png);

}

.warrior{
	width: 48vmin;
	height: 69vmin;
	position: absolute;
	left: 75%;
	top: 50%;
}

.warrior .image{
	background: url(../img/chooseclass/warrior_inactive.png) no-repeat center bottom;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 3;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);

}
.warrior.active .image,.warrior:hover .image, .warrior.char-carousel .image{
	background-image: url(../img/chooseclass/warrior.png);
}


.berserk{
	width: 48vmin;
	height: 69vmin;
	position: absolute;
	left: 75%;
	top: 50%;
}

.berserk .image{
	background: url(../img/chooseclass/berserk_inactive.png) no-repeat center bottom;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 3;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);

}
.berserk.active .image,.berserk:hover .image, .berserk.char-carousel .image{
	background-image: url(../img/chooseclass/berserk.png);
}



/* carousel positions */


.pos-1{
	left: 45%;
        /*left:45vw;*/
	top: 50%;
        transform: translateY(-50%) scale(1);
        z-index: 10;
}

.pos-2{
	left: 0%;
	top: 50%;
        transform: translateY(-50%) scale(0.8);
        z-index: 8;
}

.pos-3{
	left: 15%;
        /*left:15vw;*/
	top: 45%;
        transform: translateY(-50%) scale(0.7);
        z-index: 6;
}

.pos-4{
	left: 37%;
        /*left:37vw;*/
	top: 42%;
        transform: translateY(-50%) scale(0.6);
        z-index: 4;
}

.pos-5{
	left: 60%;
        /*left:60vw;*/
	top: 45%;
        transform: translateY(-50%) scale(0.7);
        z-index: 6;
}

.pos-6{
	left: 75%;
        /*left: 75vw;*/
	top: 50%;
        transform: translateY(-50%) scale(0.8);
        z-index: 8;
}


.car-arrow {
    background: url(../img/car_left.png) no-repeat;
    width: 8vmin;
    height: 11vmin;
    background-size: contain;
    position: absolute;
    top: 49%;
    transform: translateY(-50%);
    left: -4%;
    cursor: pointer;
    pointer-events: all;
    filter: drop-shadow(0px 0px 20px rgba(0,0,0,0.9)) drop-shadow(0px 20px 30px rgba(0,0,0,0.9)) drop-shadow(0px 20px 40px rgba(0,0,0,0.9));
}

.car-right{
    background: url(../img/car_right.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    left: 88%;
}

.car-arrow::after{
    content: " ";
     background: url(../img/car_left_hover.png) no-repeat;
     width: 100%;
     height: 100%;
     background-size: contain;
     position: absolute;
     left:0;
     top:0;
     opacity:0;
     transition-duration: 0.4s;
     transition-property: opacity;
}

.car-arrow:hover::after{
     opacity:1;
}

.car-arrow.car-right::after{
     background-image: url(../img/car_right_hover.png);
}

.plattform {
	background: url(../img/chooseclass/plattform.png) no-repeat;
	background-size: 108% 100%;
	width: 110%;
	height: 450px;
        height: 53vh;
	min-height: 42vh;
	position: absolute;
	left: 50%;
	bottom: 0%;
	-webkit-transform: translate3d(-50%, 0, 0) rotate(0.5deg);
	transform: translate3d(-50%, 0, 0) rotate(0.5deg);
}

.foreground {
	background: url(../img/chooseclass/foreground.png) no-repeat;
	background-size: contain;
	width: 137vw;
	height: 24vw;
	position: absolute;
	left: 40%;
	bottom: -10%;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

.attributes{
	display: none;
	-webkit-transform: rotate(0.01deg) translateY(-50%);
	-ms-transform: rotate(0.01deg) translateY(-50%);
	transform: rotate(0.01deg) translateY(-50%);
	position: absolute;
	left: -15vmin;
	top: 50%;
	z-index: 2;
	text-shadow: 0 2px #000;
}


.char.active .attributes{
	display: block;
}

/*
.char-left .attributes{
	left: auto;
	right: -20vmin;
}
*/


.attributes-header{
	text-transform: uppercase;
	color: #fff;
	font-size: 2.5vmin;
	padding: 0 2vmin 0 2vmin;
	position: relative;
	z-index: 10;
	white-space: nowrap;
}


/*
.char-left{
	text-align: left;
}

.char-left .attributes-header{
	padding-left: 8vmin ;
}

.char-left .attribute-header{
	padding-left: 6vmin ;
}
*/

.attributes-box {
	border-radius: 2vmin;
	background: rgba(7,23,33,0.8);
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#071721+1,071721+100&1+0,1+44,0+94 */ /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(7,23,33,1) 0%,rgba(7,23,33,1) 1%,rgba(7,23,33,1) 44%,rgba(7,23,33,0) 94%,rgba(7,23,33,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: -webkit-gradient(linear, left top, right top, from(rgba(7,23,33,1)),color-stop(1%, rgba(7,23,33,1)),color-stop(44%, rgba(7,23,33,1)),color-stop(94%, rgba(7,23,33,0)),to(rgba(7,23,33,0)));
	background: -o-linear-gradient(left, rgba(7,23,33,1) 0%,rgba(7,23,33,1) 1%,rgba(7,23,33,1) 44%,rgba(7,23,33,0) 94%,rgba(7,23,33,0) 100%);
	background: linear-gradient(to right, rgba(7,23,33,1) 0%,rgba(7,23,33,1) 1%,rgba(7,23,33,1) 44%,rgba(7,23,33,0) 94%,rgba(7,23,33,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#071721', endColorstr='#00071721',GradientType=1 ); /* IE6-9 */
	padding: 2vmin;
	width: 40vmin;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
}



.attribute-header {
	color: #42a0c7;
	font-size: 1.6vmin;
	text-transform: uppercase;
}

.attribute-bar {
	position: relative;
	height: 4vmin;
}

.attribute-bar-outer {
	background: url(../img/chooseclass/attribute-outer.png) no-repeat;
	background-size: contain;
	width: 20.2vmin;
	height: 4vmin;
	position: absolute;
	left: 0;
	top: 0;
}

.attribute-bar-inner {
	background: url(../img/chooseclass/attribute-inner.png) repeat-x;
	background-size: 100% 100%;
	width: 19vmin;
	height: 2vmin;
	position: absolute;
	left: 0.5vmin;
	top: 0.5vmin;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
	-webkit-transform: rotate(0.01deg);
	-ms-transform: rotate(0.01deg);
	transform: rotate(0.01deg);
}

.icon {
	background: url(../img/chooseclass/icons/icon_mage_active.png) no-repeat;
	background-position-x: 0%;
	background-position-y: 0%;
	background-image: url("../img/chooseclass/icons/icon_mage_active.png");
	background-size: auto auto;
	width: 70%;
	height: 47%;
	position: absolute;
	bottom: 3%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 5;
	background-size: contain;
	background-position: 50% 50%;
}

.mage .icon{
	background-image: url(../img/chooseclass/icons/icon_mage_inactive.png);
}
.hunter .icon{
	background-image: url(../img/chooseclass/icons/icon_hunter_inactive.png);
	left:51%;
}
.warlock .icon{
	background-image: url(../img/chooseclass/icons/icon_warlock_inactive.png);
}
.assassine .icon{
	background-image: url(../img/chooseclass/icons/icon_assassin_inactive.png);
}
.warrior .icon{
	background-image: url(../img/chooseclass/icons/icon_warrior_inactive.png);
}
.berserk .icon{
	background-image: url(../img/chooseclass/icons/icon_berserk_inactive.png);
}


.mage.active .icon, .mage:hover .icon, .mage.char-carousel .icon{
	background-image: url(../img/chooseclass/icons/icon_mage_active.png);

}
.hunter.active .icon, .hunter:hover .icon, .hunter.char-carousel .icon{
	background-image: url(../img/chooseclass/icons/icon_hunter_active.png);
}
.warlock.active .icon, .warlock:hover .icon, .warlock.char-carousel .icon{
	background-image: url(../img/chooseclass/icons/icon_warlock_active.png);

}
.assassine.active .icon, .assassine:hover .icon, .assassine.char-carousel .icon{
	background-image: url(../img/chooseclass/icons/icon_assassin_active.png);
}
.warrior.active .icon, .warrior:hover .icon, .warrior.char-carousel .icon{
	background-image: url(../img/chooseclass/icons/icon_warrior_active.png);
}
.berserk.active .icon, .berserk:hover .icon, .berserk.char-carousel .icon{
	background-image: url(../img/chooseclass/icons/icon_berserk_active.png);
}

.icon-small{
	background: url(../img/chooseclass/icons/icon_mage_small.png) no-repeat;
	width: 11.5vmin;
	height: 11.5vmin;
	position: relative;
	display: inline-block;
	background-size: contain;
	top: 4.5vmin;
	left:-4vmin;
	margin-right: -6.5vmin;
}

.hunter .icon-small{
	background-image: url(../img/chooseclass/icons/icon_hunter_small.png);
}
.warlock .icon-small{
	background-image: url(../img/chooseclass/icons/icon_warlock_small.png);
}
.assassine .icon-small{
	background-image: url(../img/chooseclass/icons/icon_assassin_small.png);
}
.warrior .icon-small{
	background-image: url(../img/chooseclass/icons/icon_warrior_small.png);
}
.berserk .icon-small{
	background-image: url(../img/chooseclass/icons/icon_berserk_small.png);
}

.char.active .glow-bg,.char.active .glow-fg {
	display: block;
}


.glow-bg {
	background: url(../img/chooseclass/glow.png) no-repeat center top;
	background-size: 100% 100%;
	width: 200%;
	height: 185%;
	position: absolute;
	bottom: -37%;
	left: 46%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 1;
	display: none;
}

.mage .glow-bg{
	background-image:url(../img/chooseclass/glow_mage.png);
}
.hunter .glow-bg{
	background-image:url(../img/chooseclass/glow_hunter.png);
}
.warlock .glow-bg{
	background-image:url(../img/chooseclass/glow_warlock.png);
}
.assassine .glow-bg{
	background-image:url(../img/chooseclass/glow_assa.png);
}
.warrior .glow-bg{
	background-image:url(../img/chooseclass/glow_warrior.png);
}
.berserk .glow-bg{
	background-image:url(../img/chooseclass/glow_berserk.png);
}

@-webkit-keyframes glowanimation {
	0%   { background-size: 100% 100%; }
	50%   { background-size: 90% 100%; }
	100% { background-size: 100% 100%; }
}

@keyframes glowanimation {
	0%   { background-size: 100% 100%; }
	50%   { background-size: 90% 100%; }
	100% { background-size: 100% 100%; }
}

.active .glow-bg{
	-webkit-animation: glowanimation 3s infinite; /* Safari 4+ */ /* Fx 5+ */ /* Opera 12+ */
	animation:         glowanimation 3s infinite; /* IE 10+, Fx 29+ */
}

.glow-fg {
	display: none !important;
	background: url(../img/chooseclass/glow-fg.png) no-repeat center bottom;
	width: 141%;
	height: 72%;
	position: absolute;
	bottom: 0;
	left: 48%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 4;
	display: none;
	background-size: 100% 100%;
}


/*
.scene-container .mage .attributes {
	left: auto;
	right: -22vmin;
}
.scene-container .mage .attributes-header {
	padding-left: 21vmin;
}
.scene-container .mage .attributes-box {
	padding-left: 15vmin;
	width: 43vmin;
}

.scene-container .hunter .attributes {
	left: auto;
	right: -18vmin;
}
.scene-container .hunter .attributes-header {
	padding-left: 11vmin;
}
.scene-container .hunter .attributes-box {
	padding-left: 5vmin;
	width: 33vmin;
}
*/

/*
.scene-container .warrior .attributes {
	left: auto;
	min-width: 290px;
	right: calc(34% + 7vmin);
}
.scene-container .warrior .attributes-box {
	width: 35vmin;
	min-width: 290px;
}
*/

.owl-carousel{
	display: none !important;
}

.char-carousel{
	position: relative;
}

.char.char-left.moveLeft{
	margin-left: -10vmin;
}
.char.char-left.moveRight{
	margin-left: 10vmin;
}

.char.char-right.moveLeft{
	margin-left: -10vmin;
}
.char.char-right.moveRight{
	margin-left: 10vmin;
}



#facebook-login-button2{
	margin-top: 10px !important;
}


a:hover, a:focus{text-decoration:none;}
.desktop .hide-desktop{display:none;}

.logo {
	background: rgba(0, 0, 0, 0) url("../img/logo.png") no-repeat scroll 0 0 / contain;
	height: 18vmin;
	margin: 10px auto 0;
	position: relative;
	width: 46vmin;
	z-index: 3;
}




.char{
	/*min-width: 400px;*/
}

.home{padding:0;position:relative;z-index:2;}


.chooseclass {
	text-align: center;
	font-size: 4vmin;
	color: #fff;
	text-transform: uppercase;
	line-height: 1em;
	vertical-align: top;
	margin-top: -4vmin;
	text-shadow: 0 3px #0d1115, 0 0 15px #0d1115, 0 0 30px #0d1115;
}
.chooseclass-text{
	position: relative;
	top: -0.6vmin;
}
.yellow{
	color: #ffc21a !important;
}
.chooseclass-deko {
	background: rgba(0, 0, 0, 0) url("../img/chooseclass/divider_deko.png") no-repeat scroll 3px 0 / contain;
	height: 5.0vmin;
	-webkit-transform: translate3d(0px, 0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	width: 20vmin;
	display: inline-block;
}
.chooseclass-deko-bottom {
	background: rgba(0, 0, 0, 0) url("../img/chooseclass/divider_deko_bottom.png") no-repeat scroll 3px 0 / contain ;
}

.home .container{
	position: relative;
}

.login-wrapper {
	text-align: center;
	margin-top: 0px;
	margin-bottom: 16px;
	padding-top: 12px;
	position: relative;
	z-index: 2;
	top: 1vmin;
}
.already-registered{
	color: #fff;
	display: inline-block;
	font-size: 16px;
	text-transform: uppercase;
	text-shadow: 0px 2px 0 #000;
	margin-right: 12px;
	line-height: 33px;
	vertical-align: top;
	position: relative;
	top: 2px;
}

#login {
	display: inline-block;
	background-image: url("../img/chooseclass/login_2.png");
	background-repeat: no-repeat;
	color: #fff;
	font-size: 24px !important;
	height: 58px;
	line-height: 38px;
	margin: 0;
	padding: 0px 0px 0 48px;
	text-align: left;
	text-decoration: none;
	width: 120px;
	z-index: 200;
	text-transform: uppercase;
	vertical-align: top;
	white-space: nowrap;
}

.bottom{margin:-50px 0 0 0;position:relative;z-index:1;padding:0;}

.app-icon {
	background: rgba(0, 0, 0, 0) url("../img/app_icon.png") no-repeat scroll 0 0 / contain ;
	height: 182px;
	left: 52%;
	position: absolute;
	top: 115px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 208px;
}

.footer-bg{
	position: absolute;
	width: 100%;
	top: 1024px;
	left: 0;
	height:221px;
	background:url("../img/footer_bg.png") repeat-x left bottom;
	z-index: 1;
}

.footer-content-wrapper{top:0;position:relative;width:100%;}
.footer-content{/*min-height:256px;*/padding-bottom:24px;position:relative;z-index:2;}
#footer li {
	list-style: none;
	display: inline-block;
	margin: 0 16px;
	line-height: 1.7;
}
#footer li.divider {
	color: #3a87a4;
	font-weight: 900;
	font-size: 20px;
	margin: 0;
	text-shadow: 0px 2px 0 #000;
}



#layer_world .choose_lang, #layer_world .choose_world {
  width: 350px;
}
.scrollist{
    height: 330px;
    overflow: hidden;
    width:100%;
}
.mCSB_scrollTools .mCSB_draggerRail {
	background-color: #051822;
	filter: "alpha(opacity=100)";
	-ms-filter: "alpha(opacity=100)";
        width:16px;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
       background: url("../img/scroll_touch.png") no-repeat scroll center center;
       background-size: 8px 10px;
	background-color: #fff;
	background-color: rgba(9,47,67,0.8);
	filter: "alpha(opacity=100)";
	-ms-filter: "alpha(opacity=100)";
        width:14px;
        
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar , .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
	background-color: #fff;
	background-color: rgba(9,47,67,1);
	filter: "alpha(opacity=100)";
	-ms-filter: "alpha(opacity=100)";
}

.dropdown {
	padding: 20px;
	 background: url("../img/scroll_bg.png") no-repeat scroll 0 0;
         background-size:100% 100%;
}

a{
    outline: 0;
}

.dropdown a{
    color: #3a87a4;
    text-transform: uppercase;
    margin: 3px 0 0 23px;
    font-size:16px;
    display:block;
}

.dropdown li.active a{
    color: #efbb49;
}

.dropdown a.choose_world_click{
    color: #3a87a4;
    text-transform: uppercase;
    margin: 3px 0 0 0;
    padding-left: 34px;
    font-size:16px;
}

.dropdown li {
	width: 100%;
	height: 38px;
	padding: 4px 0 0 18px;
	cursor: pointer;
	margin-top: -1px;
}

.dropdown li.active {
    background: url("../img/scroll_active.png") no-repeat scroll 0 0;
    background-size:100% 100%;
}





.icon-device{}
.storebadge {
	-webkit-filter: drop-shadow(0px 7px 5px rgba(0, 0, 0, 0.6));
	filter: drop-shadow(0px 7px 5px rgba(0, 0, 0, 0.6));
}
.storebadge:hover img{-webkit-transform:scale(1.15);-ms-transform:scale(1.15);transform:scale(1.15);}
.storebadge img{max-width:190px;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transform:rotate(0.1deg);-ms-transform:rotate(0.1deg);transform:rotate(0.1deg);}
.icon-android{background:url(../img/icon_android.png) no-repeat;background-size:contain;width:59px;height:72px;margin:0 auto 10px;}
.icon-apple{background:url(../img/icon_apple.png) no-repeat;background-size:contain;width:59px;height:69px;margin:0 auto 10px;}
.rating-number{color:#fff;font-size:48px;font-weight:900;line-height:1;margin-bottom:16px;margin-top:-12px;vertical-align:top;
	-webkit-text-stroke: 2px black;
	text-shadow: -3px -3px 0 #222, 3px -3px 0 #222, -3px 3px 0 #222, 3px 3px 0 #222, 3px 0 0 #222, 0 3px 0 #222, -3px 0 0 #222, 0 -3px 0 #222, 3px 1px 0 #222, 3px -1px 0 #222, 3px 2px 0 #222, 3px -2px 0 #222
}
.orange{color:#ffb400;}

.cta-wrapper {
	/*background: url("../img/chooseclass/cta_inactive.png") no-repeat scroll 0 0/contain;*/
	height: 25vmin;
	pointer-events: none;
	width: 45vmin;
	-webkit-transform: translateX(-50%) rotate(0.01deg);
	-ms-transform: translateX(-50%) rotate(0.01deg);
	transform: translateX(-50%) rotate(0.01deg);
	position: absolute;
	left: 50%;
	text-align: center;
	margin-top: -16.5vmin;
	opacity: 0.5;
	z-index: 1;
}

.cta-wrapper.active {
	/*background: url("../img/chooseclass/cta.png") no-repeat scroll 0 0/contain;*/
	opacity: 1;
}

.active .cta:hover{
    -webkit-transform:perspective(500px) translateZ(0) scale(1.00);
    transform:perspective(500px) translateZ(0) scale(1.00);
    -webkit-perspective: 1000px; perspective: 1000px;
}

.cta {
        background: url("../img/cta.png") no-repeat scroll 0 0/contain;
	-webkit-transform: perspective(500px) translateZ(0) scale(1);
	transform: perspective(500px) translateZ(0) scale(1);
	display: inline-block;
	font-size: 2.5vmin !important;
        width:29vmin;
	height: 8vmin;
	color: #42a0c7 !important;
	font-weight: bold !important;
	position: relative;
	margin: 0px auto 0 1.8vmin;
	-webkit-transition-property: all;
	-o-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
	text-transform: uppercase;
	pointer-events: all;
	top: 8.3vmin;
        
}

.cta::before {
    content: " ";
    background: url("../img/cta_hover.png") no-repeat scroll 0 0/contain;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity: 0;
    transition-duration: 0.4s;
    transition-property: opacity;
}

.cta:hover::before {
    opacity: 1;
}

.active .cta{
	color: #ffc21a !important;
}
.cta-text {
	display: inline-block;
	text-shadow: 0px 3px 0 #000;
	position: absolute;
	top: 1.8vmin;
	width: 96%;
	left: 0;
}


.cta-arrow {
	background: rgba(0, 0, 0, 0) url("../img/chooseclass/cta_arrow_inactive.png") no-repeat scroll 0 0 / contain;
	display: inline-block;
	height: 6vmin;
	margin-left: 0.5vmin;
	position: absolute;
	top: 0.6vmin;
	width: 5vmin;
	right: 2vmin;
}
.active .cta-arrow {
	background: rgba(0, 0, 0, 0) url("../img/chooseclass/cta_arrow.png") no-repeat scroll 0 0 / contain;
}
.cta.cta-fb .cta-text{
	line-height: 148px !important;
}

.cta-fb .cta-left{background:url(../img/fb_left.png) no-repeat;width:145px;height:209px;float:left;background-size: cover;margin-right:0px}
.cta-fb .cta-center{position: relative;background:url("../img/fb_center.png") repeat scroll 0 -12px;color:white;float:left;height:221px;padding:0 0 0 30px;
	background-size: contain;
}
.cta-fb .cta-right{background:url(../img/fb_right.png) no-repeat 0 -12px;width:87px;height:221px;float:left;background-size: cover;margin-left:0px}


.ua-mobile .cta-wrapper {
    width: auto;
    height: auto;
    position: relative;
}

#continue{
    text-align:center;
   
}

#continue .cta{
     top: 0;
     font-size: 26px !important;
    width: 300px;
    height: 86px;
}

#continue .cta-text {
	top: 30px;
}

.storebadge {
	display: inline-block;
	max-width: 260px;
	max-height: 78px;
	width: 58vmin;
	height: 17vmin;
	background: url(../img/badges/appstore/en_xl.png) no-repeat;
	background-size: contain;
	position: relative;
	z-index: 20000;
	pointer-events: all;
}

.storebadge-playstore {
	background: url(../img/badges/playstore/en_xl.png) no-repeat;
	background-size: contain;
}

.ar .storebadge{background-image: url(../img/badges/appstore/ar_xl.png);}
.cn .storebadge{background-image: url(../img/badges/appstore/cn_xl.png);}
.cs .storebadge{background-image: url(../img/badges/appstore/cs_xl.png);}
.cz .storebadge{background-image: url(../img/badges/appstore/cz_xl.png);}
.da .storebadge{background-image: url(../img/badges/appstore/da_xl.png);}
.de .storebadge{background-image: url(../img/badges/appstore/de_xl.png);}
.dk .storebadge{background-image: url(../img/badges/appstore/dk_xl.png);}
.el .storebadge{background-image: url(../img/badges/appstore/el_xl.png);}
.en .storebadge{background-image: url(../img/badges/appstore/en_xl.png);}
.es .storebadge{background-image: url(../img/badges/appstore/es_xl.png);}
.fr .storebadge{background-image: url(../img/badges/appstore/fr_xl.png);}
.gr .storebadge{background-image: url(../img/badges/appstore/gr_xl.png);}
.hu .storebadge{background-image: url(../img/badges/appstore/hu_xl.png);}
.it .storebadge{background-image: url(../img/badges/appstore/it_xl.png);}
.ja .storebadge{background-image: url(../img/badges/appstore/ja_xl.png);}
.jp .storebadge{background-image: url(../img/badges/appstore/jp_xl.png);}
.nl .storebadge{background-image: url(../img/badges/appstore/nl_xl.png);}
.pl .sto-playstorerebadge{background-image: url(../img/badges/appstore/pl_xl.png);}
.pt .storebadge{background-image: url(../img/badges/appstore/pt_xl.png);}
.pt-br .storebadge{background-image: url(../img/badges/appstore/pt-br_xl.png);}
.ro .storebadge{background-image: url(../img/badges/appstore/ro_xl.png);}
.ru .storebadge{background-image: url(../img/badges/appstore/ru_xl.png);}
.se .storebadge{background-image: url(../img/badges/appstore/se_xl.png);}
.sk .storebadge{background-image: url(../img/badges/appstore/sk_xl.png);}
.sv .storebadge{background-image: url(../img/badges/appstore/sv_xl.png);}
.tr .storebadge{background-image: url(../img/badges/appstore/tr_xl.png);}
.zh .storebadge{background-image: url(../img/badges/appstore/zh_xl.png);}


.ar .storebadge-playstore{background-image: url(../img/badges/playstore/ar_xl.png);}
.cn .storebadge-playstore{background-image: url(../img/badges/playstore/cn_xl.png);}
.cs .storebadge-playstore{background-image: url(../img/badges/playstore/cs_xl.png);}
.cz .storebadge-playstore{background-image: url(../img/badges/playstore/cz_xl.png);}
.da .storebadge-playstore{background-image: url(../img/badges/playstore/da_xl.png);}
.de .storebadge-playstore{background-image: url(../img/badges/playstore/de_xl.png);}
.dk .storebadge-playstore{background-image: url(../img/badges/playstore/dk_xl.png);}
.el .storebadge-playstore{background-image: url(../img/badges/playstore/el_xl.png);}
.en .storebadge-playstore{background-image: url(../img/badges/playstore/en_xl.png);}
.es .storebadge-playstore{background-image: url(../img/badges/playstore/es_xl.png);}
.fr .storebadge-playstore{background-image: url(../img/badges/playstore/fr_xl.png);}
.gr .storebadge-playstore{background-image: url(../img/badges/playstore/gr_xl.png);}
.hu .storebadge-playstore{background-image: url(../img/badges/playstore/hu_xl.png);}
.it .storebadge-playstore{background-image: url(../img/badges/playstore/it_xl.png);}
.ja .storebadge-playstore{background-image: url(../img/badges/playstore/ja_xl.png);}
.jp .storebadge-playstore{background-image: url(../img/badges/playstore/jp_xl.png);}
.nl .storebadge-playstore{background-image: url(../img/badges/playstore/nl_xl.png);}
.pl .storebadge-playstore{background-image: url(../img/badges/playstore/pl_xl.png);}
.pt .storebadge-playstore{background-image: url(../img/badges/playstore/pt_xl.png);}
.pt-br .storebadge-playstore{background-image: url(../img/badges/playstore/pt-br_xl.png);}
.ro .storebadge-playstore{background-image: url(../img/badges/playstore/ro_xl.png);}
.ru .storebadge-playstore{background-image: url(../img/badges/playstore/ru_xl.png);}
.se .storebadge-playstore{background-image: url(../img/badges/playstore/se_xl.png);}
.sk .storebadge-playstore{background-image: url(../img/badges/playstore/sk_xl.png);}
.sv .storebadge-playstore{background-image: url(../img/badges/playstore/sv_xl.png);}
.tr .storebadge-playstore{background-image: url(../img/badges/playstore/tr_xl.png);}
.zh .storebadge-playstore{background-image: url(../img/badges/playstore/zh_xl.png);}



.storebadge{
	display: none;
}

.ua-ios .storebadge-appstore{
	display: inline-block;
}

.ua-android .storebadge-playstore{
	display: inline-block;
}

.ua-ios .cta-wrapper, .ua-android .cta-wrapper{
	opacity: 1;
	background: none;
}

.ua-ios .shop-appstore{
	display: block;
	/*margin-bottom: 3vmin;*/
}
.ua-ios .shop-logo{
	display: none;
}

.ua-android .shop-googleplay{
	display: block;
	margin-bottom: 3vmin;
}
.ua-android .shop-logo{
	display: none;
}

.ua-mobile .login-wrapper{
	display: none !important;
}



#footer a,#footer a:active,#footer a:focus,#footer a:visited{font-size:16px; font-weight: bold;
	color: #3a87a4;
	text-shadow: 0px 2px 0 #000;
	text-transform: uppercase;
}
#footer a:hover{color:#fff;}
#footer ul{padding-left:0;}

.container.footer-container {
	width: 60%;
	max-width: 1130px;
	min-width: 1064px;
	position: relative;
	bottom: -10px;
}

#footer a, #footer a:active, #footer a:focus, #footer a:visited {
	font-size: 14px;
}

.shop{

}
.shop-stars {
	background: url(../img/chooseclass/stars@2x.png) no-repeat scroll center center;
	background-size: contain;
	width: 113px;
	height: 40px;
	margin-top: 6px;
	/* position: relative; */
}
.shop-logo {
	background: url(../img/chooseclass/steam@2x.png) no-repeat scroll center center;
	background-size: contain;
	width: 122px;
	height: 35px;
	display: inline-block;
	vertical-align: top;
}
.shop-googleplay .shop-logo{
	background:url(../img/chooseclass/googleplay@2x.png) no-repeat scroll center center;
	background-size:contain;
	width:136px;
	height: 27px;
}

.shop-appstore .shop-logo{
	background:url(../img/chooseclass/appstore@2x.png) no-repeat scroll center center;
	background-size:contain;
	width:131px;
	height: 34px;
}

.shop-rating {
	display: inline-block;
	vertical-align: top;
	position: relative;
	top: -10px;
	line-height: 0.8;
}

.shop-text {
	color: #fff;
	text-transform: uppercase;
	padding: 0 0 0 12px;
}

.legal-container {
	position: relative;
	right: auto;
	top: 10px;
}




.ua-mobile #login{
	display: none;
}
.ua-mobile .cta{
	opacity: 0;
}

.ua-mobile .footer-container{
	top: -6vmin;
	position: relative;
}

.ua-mobile .footer-container .col-md-4{
	width:100%;
}

.ua-mobile .shop{
	display: none;
}

.ua-ios .shop-appstore{
	display: block;
}

.ua-android .shop-googleplay{
	display: block;
}

.ua-mobile .shop-rating {
	display: inline-block;
	text-align: center;
}

.ua-mobile .shop-stars {
	display: inline-block;
}


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

/*
	#login {
		left: 50%;
		top: 51px;
		-webkit-transform: translateX(-235px);
		-ms-transform: translateX(-235px);
		transform: translateX(-235px);
		width: 101px;
	}
*/

}



@media screen and (max-width:1200px){
	.desktop .container {
		width: 1000px;
	}
}

.show-mobile, .background-mobile{
	display: none;
}

.scrollarea{
    display:none;
}

/*
.ua-mobile .scrollarea{
    display:block;
    background:red;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:150%;
}
*/



@media screen and (max-width:1024px){
    
    /*
    .wrapper-outer{
            height: auto;
    }
    */


	.footer-container .col-md-4{
		width:100%;
	}



	.logo{
		min-width: 300px;
		min-height: 116px;
	}

	.scene-container{
		display: none;
	}
        
        /* scrolling fix ios landscape */
        .owl-carousel 
        {
            -ms-touch-action: pan-x;
            touch-action: pan-x; 
        }
        html, body{
            position:absolute; height:100%; width:100%; top:0; left:0;
            overflow:hidden;
        }
        .wrapper-outer{
            height:calc(100% - 1px);
            width:100%;
            z-index: 1;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
         /* end of scrolling fix ios landscape */

	.show-mobile, .background-mobile{
		display: block;
	}

	.show-desktop{
		display: none;
	}

	.chooseclass {
		-webkit-transform: scale(1.2);
		-ms-transform: scale(1.2);
		transform: scale(1.2);
	}

	.wrapper{
		pointer-events: all;
	}

	.characters{
		display: none;
	}


	.plattform {
		background: url(../img/chooseclass/plattform.png) no-repeat center center;
		background-size: cover;
                background-size:140% 100%;
		position: fixed;
                position: absolute;
		left:0;
		bottom:0;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		width:100%;
		height:50%;
		z-index: -1;
	}

	.background {
		position: fixed;
                position: absolute;
		left:0;
		top:0;
		z-index: -1;
	}

	.foreground {
		position: fixed;
                position: absolute;
		bottom:0;
		z-index: -1;
	}

	.owl-carousel {
		display: block !important;
		position: relative;
		top: -19vmin;
	}

	.owl-carousel .owl-stage-outer {
		overflow: visible;
		position: relative;
		z-index: 100;
	}

	.owl-nav{
		position: absolute;
		top: 50%;
		width: 100%;
		z-index: 200;
	}
	/*
	.scene-container {
		display: none;

	}
	*/

        .car-navigation{
            display:none;
        }

	.cta-wrapper {
		/*background: url("../img/chooseclass/cta.png") no-repeat scroll 0 0/contain;*/
		opacity: 1; 
		margin-top: -24vmin;
	}
	.cta{
		color: #ffc21a !important;
	}
	.cta-arrow {
		background: rgba(0, 0, 0, 0) url("../img/chooseclass/cta_arrow.png") no-repeat scroll 0 0 / contain;
	}

	.ua-mobile .footer-container{
		top: -6vmin;
		position: relative;
	}
        
        .ua-desktop .cta-wrapper {
		/*background: url("../img/chooseclass/cta.png") no-repeat scroll 0 0/contain;*/ 
		margin-top: 0;
                height: auto;
                position:relative;
	}
        .ua-desktop .cta {
		/*background: url("../img/chooseclass/cta.png") no-repeat scroll 0 0/contain;*/ 
		top: 0
	}
        .ua-desktop .owl-carousel {
		top: -8.5vmin;
		position: relative;
		transform: translateY(0);
		margin-bottom: -15vmin;
	}


	.ua-desktop #footer {
		width: 100%;
		bottom: 0;
		position: relative;
	}




	.char{
		display: none;
		min-width: 0;
	}
	.char-carousel{
		display: block;
		top: 0;
		-webkit-transform: translate(-50%,0) scale(0.8);
		-ms-transform: translate(-50%,0) scale(0.8);
		transform: translate(-50%,0) scale(0.8);
		-webkit-filter: grayscale(0%) brightness(1);
		filter: grayscale(0%) brightness(1);
		width: 100%;
		left: 50%;
		right: auto;
		width:48vmin !important;
		height:69vmin !important;
	}

	.char-carousel .attributes{
		display: block;
		opacity: 1;
	}

	.char-carousel .image {
		left: 33%;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}
        .char-carousel.hunter .image {
		left: 50%;
	}
	.char-carousel.mage .image {
		left: 33%;
	}
	.char-carousel.assassine .image {
		left: 42%;
	}

	.char-carousel .icon {
		left: 85%;
	}
        
        .char-carousel.assassine .icon {
		left: 92%;
	}

	.char-carousel.hunter .glow-bg {
		left: 83%;
	}

	.char-carousel.warlock .glow-bg {
		left: 84%;
	}

	.char-carousel.assassine .glow-bg {
		left: 86%;
	}

	.char-carousel.warrior .glow-bg {
		left: 81%;
	}
        
        .char-carousel.berserk .glow-bg {
		left: 81%;
	}

	.char-carousel .glow-bg {
		width: 157%;
		height: 145%;
		bottom: -28%;
		left: 95%;
	}


	.char-carousel .attributes {
		left: -8%;
		-webkit-transform: scale(1.2) rotate(0.01deg) translateY(-50%);
		-ms-transform: scale(1.2) rotate(0.01deg) translateY(-50%);
		transform: scale(1.2) rotate(0.01deg) translateY(-50%);
		-webkit-transform-origin: top left;
		-ms-transform-origin: top left;
		transform-origin: top left;
	}

	.owl-item.active .char-carousel  .glow-bg, .owl-item.active .char-carousel .glow-fg{
		display: block;
	}

	.shop{
		display: none;
	}

	.ua-desktop .shop-steam{
		display: block;
	}

	.shop-logo{
		display: block;
		position: relative;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
		margin-bottom: 16px;
	}

	/*
	#login{
		display: none !important;
	}
	*/
        
        .attributes {
            text-shadow: 0 1px rgba(0,0,0,0.2);
        }

	.legal-container {
		position: relative;
		right: 0;
		top: 0;
	}

	.shop-rating {
		display: inline-block;
		text-align: center;
	}

	.shop-stars {
		display: inline-block;
	}

	.ua-mobile #cta{
		display: none;
	}

	.ua-mobile .storebadge {
		max-width: 220px;
		max-height: 65px;
	}

	.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev{
		background: url(../img/car_left.png) no-repeat 0 0;
		width: 44px;
		height: 62px;
		background-size: contain;
		position: absolute;
		left: 6%;
		top: 50%;
                margin-top: 20px;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		outline: none;
	}

	.owl-carousel .owl-nav button.owl-next{
		background: url(../img/car_right.png) no-repeat right 0;
		background-size: contain;
		left: auto;
		right: 6%;
	}
        
	.owl-carousel .owl-nav button.owl-next span, .owl-carousel .owl-nav button.owl-prev span{
		display:none;
	}

	.container.footer-container {
		min-width: 0;
	}

	.attributes-box {
		width: 45vmin;
	}

	/* footer fixed */
	.ua-mobile #footer {
		width: 100%;
		bottom: 0;
		position: fixed;
	}
	.ua-mobile .cta-wrapper {
		margin-top: -6vmin;
	}
	.ua-mobile .footer-container {
		top: auto;
		position: relative;
		bottom: -26px;
	}
	.ua-mobile .footer-container {
		bottom: 0;
	}
	/* end of footer fixed */

	#footer a, #footer a:active, #footer a:focus, #footer a:visited {
		font-size: 10px;
	}
	#footer li.divider {
		font-size: 10px;
	}
	.footer-content {
		padding-bottom: 16px;
	}

	ul, ol {
		margin-top: 0;
		margin-bottom: 0px;
	}
}

.white-popup {
	position: relative;
	background: #fff;
	padding: 20px;
	width: auto;
	max-width: 800px;
	margin: 20px auto;
	padding-top: 48px;
}

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

	.desktop .wrapper-all {
		min-width: 0;
	}
	.desktop .container {
		width: 100%;
		min-width: 0;
	}

	.desktop #login {
		right: 0;
	}

}

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

	.ua-mobile .cta-wrapper {
		margin-top: -11vmin;
	}

	.ua-desktop .cta-wrapper {
		-webkit-transform: scale(1.6) translateX(-50%);
		-ms-transform: scale(1.6) translateX(-50%);
		transform: scale(1.6) translateX(-50%);
		-webkit-transform-origin: left center;
		-ms-transform-origin: left center;
		transform-origin: left center;
	}

	.char-carousel{
		-webkit-transform: translate(-50%,0) scale(1);
		-ms-transform: translate(-50%,0) scale(1);
		transform: translate(-50%,0) scale(1);
	}

	.owl-carousel {
		top: -7vmin;
	}

	.attributes-header {
		font-size: 2.35vmin;
	}

	.owl-carousel {
		top: -15vmin;
	}
	.owl-carousel {
		top: 45%;
		position: fixed;
		transform: translateY(-50%);
	}
    .owl-carousel .owl-nav button.owl-prev{
		left: 8px;
	}

	.owl-carousel .owl-nav button.owl-next{
		right: 8px;
	}
}
@media screen and (max-width:768px) and (min-height:950px) {
  
        .ua-desktop .owl-carousel {
		top: 42%;
		position: fixed;
		transform: translateY(-50%);
	}
        
}

@media screen and (max-width:640px) {
	.char-carousel{
		-webkit-transform: translate(-50%,0) scale(1.3);
		-ms-transform: translate(-50%,0) scale(1.3);
		transform: translate(-50%,0) scale(1.3);
	}

	.attribute-bar-inner {
		left: 0.65vmin;
	}

	.ua-mobile .legal-container {
		top: -6vmin;
	}

	.chooseclass {
		-webkit-transform: scale(1.2);
		-ms-transform: scale(1.2);
		transform: scale(1.2);
		margin-top: -8vmin;
		margin-bottom: 3vmin;
	}

	.storebadge {
		width: 50vmin;
		height: 15vmin;
	}

	.ua-mobile .footer-container{
		top: -6vmin;
		position: relative;
	}

	/* footer fixed */
	.ua-mobile .footer-container{
		top: 0;
		position: relative;
	}
	.ua-mobile .legal-container {
		top: 16px;
	}
	/* end of footer fixed */

	#footer a, #footer a:active, #footer a:focus, #footer a:visited {
		font-size: 10px;
	}
	#footer li.divider {
		font-size: 10px;
	}
	.footer-content {
		padding-bottom: 16px;
	}

	ul, ol {
		margin-top: 0;
		margin-bottom: 6px;
	}
}

@media screen and (max-width:375px) {
	#footer li {
		margin: 0 6px;
	}
	#footer a, #footer a:active, #footer a:focus, #footer a:visited {
		font-size: 9px;
	}
	#footer li.divider {
		font-size: 9px;
	}
	.logo {
		min-width: 250px;
		min-height: 97px;
	}
	.footer-content {
		padding-bottom: 16px;
	}
	ul, ol {
		margin-top: 0;
		margin-bottom: 0px;
	}
}

@media only screen
and (min-width : 360px)
and (max-width : 1023px)
and (orientation : landscape) {
	.owl-carousel {
		top: -16vmin;
		position: relative;
		transform: translateY(0);
		margin-bottom: -15vmin;
	}

	.ua-mobile #footer {
		width: 100%;
		bottom: 0;
		position: relative;
	}

	.footer-content {
		padding-bottom: 16px;
	}

	ul, ol {
		margin-top: 0;
		margin-bottom: 0px;
	}
	.legal-container {
		top: 10px;
	}

}