@charset "utf-8";
/* CSS Document */

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
	position: relative;
}

:focus { 
    outline: none;
}

body{
    background-color: #1c1c1c;
	color: #9e9e9e;
	padding: 0;
	font: 400 15px/1.2 "Open Sans", sans-serif;
	max-width: 1920px;
	overflow-x: hidden;
    margin: 0px auto;
    box-shadow: -8px 0px 15px rgba(0, 0, 0, 0.4), 8px 0px 15px rgba(0, 0, 0, 0.4);
}

h2{
    color: #fcfcfc;
    padding-bottom: 20px;
    font-size: 2.2em;
    font-family: 'Open Sans', sans-serif; 
    /* text-transform: uppercase; */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

h3{
	color: #dcdcdc;
}

section{
    position: relative;
	overflow: hidden;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.clear{
	clear: both;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width:768px) {
    .container {
        width: 750px
    }
}

@media (min-width:992px) {
    .container {
        width: 970px
    }
}

@media (min-width:1200px) {
    .container {
        width: 1170px
    }
}

@media (min-width:1440px) {
    .container {
        width: 1410px;
		height: 840px;
    }
}

@media screen and (max-width: 768px){
    .container{
        padding-right: 25px;
        padding-left: 25px;
    }
}

#bg_mask {
    position: absolute;
    z-index: 99;
    background: #000;
    display: none;
    top: 0;
    left: 0;
}

.left-content{
	padding-right: 30px;
	width: 100%;
}

.right-content{
    /*margin: 0px auto;*/
    width: 70%;
}

#totop {
	background: transparent url(../images/atlas-rogues-spritesheet.png) no-repeat -526px -614px;
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 58px;
    height: 58px;
    z-index: 50;
    cursor: pointer;
    opacity: 1.0;
    transition: opacity 0.75s ease-in-out;
    transform: scale(0.85);
}

.hidden{
	opacity: 0 !important;
}

/* -------------- nav --------------- */

nav{
	height: 70px;
    position: absolute;
    z-index: 30;
    display: flex;
    width: 100%;
	max-width: 1920px;
    background: rgba(0,0,0,0.75);
    border-bottom: 3px solid #fff;
	transition: opacity 1.5s ease-in-out;
}

nav.fixed{
	position: fixed;
	top: 0;
}

body.pushable>.pusher {
    background: #000;
}

.pusher.dimmed nav {
    opacity: 0;
}

.nav-container{
	display: flex;
	width: 1440px;
	margin: 0px auto;
}

.logo-small{
    background: transparent url(../images/atlas-rogues-spritesheet.png) no-repeat 0px 0px;
    width: 220px;
    height: 60px;
    display: flex;
    flex: 0 0 220px;
    opacity: 1;
    margin: 0px 15px 0px 30px;
    text-indent: -9999px;
    transition: opacity 0.75s ease-in-out;
}

nav ul{
    list-style: none;
    display: flex;
    align-items: center;
    width: 100%;
	justify-content: flex-end;
}

nav ul li{
    padding: 0px 40px;
	cursor: pointer;
	display: block;
}

nav .logo-small,
nav ul li{
    color: #fff;
	font: 400 26px/29px 'Pathway Gothic One', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
    z-index: 10;
}

nav .buynow{
	transform: scale(0.5);
    margin: 15px -70px 0px -70px;
}

nav .toc{
    background: transparent url(../images/atlas-rogues-spritesheet.png) -437px -615px;
    width: 24px;
    height: 20px;
    cursor: pointer;
	display: none;
}

nav .buynow::before,
nav .buynow::after,
nav .toc::before,
nav .toc::after{
	display: none;
}

.sidebar{
	background: #101010 url("../images/backgrounds/background-sidebar.jpg") no-repeat center top/cover;
    overflow-x: hidden;
	
    border-right: 2px solid rgba(0, 0, 0, 0.7);
    box-shadow: 3px 0px 12px rgba(0, 0, 0, 0.35);
}

.sidebar .logosmall{
    display: block;
    background: transparent url(../images/atlas-rogues-spritesheet.png) no-repeat -410px -130px;
    width: 200px;
    height: 60px;
    left: 50%;
    margin: 35px auto 35px -100px;
	text-indent: -9999px;
}

.sidebar ul{
	border-top: 1px solid #2f2f2f;
    border-bottom: 1px solid #2f2f2f;
}

.sidebar li{
	border-top: 1px solid #2f2f2f;
}

.sidebar li:first-child{
	border-top: none;
}

.sidebar .sb_item{
	width: 100%;
    display: block;
    height: 50px;
    padding: 14px 20px;
    color: #f0f0f0;
    text-decoration: none;
    text-transform: uppercase;
    font: 400 20px/22px 'Open Sans', serif;
}

.sidebar .sb_item.active,
.sidebar a.sb_item:active,
.sidebar a.sb_item:focus,
.sidebar a.sb_item:hover{
	background: rgba(255,255,255,0.25)
}

.sidebar .sb_item:first-child{
	border-top: none;
}

.sidebar .buynow{
	transform: scale(0.6);
    margin: 10px 0 0 -60px;
}

@media screen and (max-width: 992px){
	nav .toc{
		display: none;
	}
	
	nav .item{
		display: none;
	}
}

@media screen and (max-width: 600px){
	nav .buynow{
		display: none;
	}
}

@media screen and (max-width: 479px){
	nav .toc{
		padding-right: 5%;
	}
	
	nav .logo-small {
		margin-left: -110px;
		left: 50%;
	}
}


/* ----- SVG ---- */

svg{
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -960px;
    z-index: 5;
	width: 100%;
	height: 100%;
	left: auto;
	margin-left: auto;
}
	
/*svg{
	left: auto;
	margin-left: auto;

}*/
	
.page-inner {
	bottom: 0;
	top: 0;
	color: rgba(255,255,255,0.9);
	overflow: hidden;
	background: transparent url('../images/background-forest.jpg') no-repeat center top;
	background-size: 100%;
	font-family: 'Roboto', sans-serif;
	min-height: 820px;
}

#svg_container{
	position: absolute;
	width: 1920px;
	height: 1080px;
	margin-left: -960px;
	left: 50%;
}

#keyfacts svg{
	position: absolute;
	left: 0;
	top: 0;
	widows: 1080px;
	height: 1090px;
}

.slick-slide{
	height: 1080px;
}

.keyfacts{
    position: absolute;
    z-index: 10;
    top: -3px;
    left: 50%;
    margin-left: -961px;
    width: 1080px;
    height: 1090px;
}

/* -------------- home --------------- */

#home{
    background: #000 url("../images/section-home.jpg") no-repeat center top/cover;
	min-height: 1080px;
	clip-path: polygon(0 0, 0 696px, 1344px 1079px, 1920px 928px, 1920px 0);
}

#home .container{
	z-index: 1;
}

.dropdown {
    position: absolute;
    display: inline-block;
    top: 5px;
    right: 15px;
    z-index: 20;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #2c2c2c;
    min-width: 30px;
    padding: 0px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.lang{
	display: block;
	width: 22px;
	height: 12px;
    background: transparent url("../images/language/languages.png") no-repeat 0 0;
    margin: 14px 10px 8px;
    transform: scale(1.4);
}

.lang.de{
	background-position: 0 -210px;
}
	
.lang.uk{
	background-position: 0 -15px;
}
	
.lang.us{
	background-position: 0 -155px;
}
	
.lang.fr{
	background-position: 0 -30px;
}

.dropdown-content .lang {
    margin: 10px 10px 20px;
}

.dropdown-content .lang:last-child {
    margin-bottom: 10px;
}

#logo{	
	background: transparent url(../images/logo-atlas-rogues.png) no-repeat center top/cover;
    width: 600px;
    height: 550px;
    position: absolute;
    top: 130px;
	left: 50%;
	margin-left: -300px;
}


#early-access{
    display: block;
    background: transparent url(../images/early-access.png) no-repeat center top/cover;
    width: 350px;
    height: 235px;
    position: absolute;
    right: 50%;
    margin-right: -395px;
	top: 430px;
	z-index: 10;
}

#buy-atlas{
	display: block;
	z-index: 25; 
	width: 400px; 
	height: 150px; 

    position: absolute;
    top: 610px;
    left: 50%;
	margin-left: -200px;
	text-decoration: none;
}

.buy-now{
    background: transparent url(../images/buy-now.png) no-repeat center top/cover;
    width: 400px;
    height: 150px;
    padding: 53px 60px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font: 700 47px/40px 'Pathway Gothic One', sans-serif;
    z-index: 10;
    cursor: pointer;
}

.headline{
    transform: scale(0.75);
    transform-origin: top left;
}

.headline h2{
	text-transform: uppercase;
	text-shadow: none;
	
	font-family: goudy-old-style, serif;
	font-weight: 700;
	font-style: normal;
}

h2{
	font: 400 80px/90px 'Pathway Gothic One', sans-serif;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-style: italic;
    /*transform: scale(1.15,1);
    margin-left: 35px;*/
    text-shadow: rgb(0, 0, 0) 5px 0px 0px, rgb(0, 0, 0) 4.90033px 0.993347px 0px, rgb(0, 0, 0) 4.60531px 1.94709px 0px, rgb(0, 0, 0) 4.12668px 2.82321px 0px, rgb(0, 0, 0) 3.48353px 3.58678px 0px, rgb(0, 0, 0) 2.70151px 4.20736px 0px, rgb(0, 0, 0) 1.81179px 4.6602px 0px, rgb(0, 0, 0) 0.849836px 4.92725px 0px, rgb(0, 0, 0) -0.145998px 4.99787px 0px, rgb(0, 0, 0) -1.13601px 4.86924px 0px, rgb(0, 0, 0) -2.08073px 4.54649px 0px, rgb(0, 0, 0) -2.94251px 4.04248px 0px, rgb(0, 0, 0) -3.68697px 3.37732px 0px, rgb(0, 0, 0) -4.28444px 2.57751px 0px, rgb(0, 0, 0) -4.71111px 1.67494px 0px, rgb(0, 0, 0) -4.94996px 0.7056px 0px, rgb(0, 0, 0) -4.99147px -0.291871px 0px, rgb(0, 0, 0) -4.83399px -1.27771px 0px, rgb(0, 0, 0) -4.48379px -2.2126px 0px, rgb(0, 0, 0) -3.95484px -3.05929px 0px, rgb(0, 0, 0) -3.26822px -3.78401px 0px, rgb(0, 0, 0) -2.4513px -4.35788px 0px, rgb(0, 0, 0) -1.53666px -4.75801px 0px, rgb(0, 0, 0) -0.560763px -4.96845px 0px, rgb(0, 0, 0) 0.437495px -4.98082px 0px, rgb(0, 0, 0) 1.41831px -4.79462px 0px, rgb(0, 0, 0) 2.34258px -4.41727px 0px, rgb(0, 0, 0) 3.17346px -3.86382px 0px, rgb(0, 0, 0) 3.87783px -3.15633px 0px, rgb(0, 0, 0) 4.4276px -2.32301px 0px, rgb(0, 0, 0) 4.80085px -1.39708px 0px, rgb(0, 0, 0) 4.98271px -0.415447px 0px;
}


#play-button,
#play-button-media{
    background: transparent url(../images/archeage-spritesheet.png) no-repeat -10px -10px;
    border: 0;
    display: block;
    cursor: pointer;
    outline: 0;
    -webkit-transition: opacity .4s ease-in-out 0s;
    -moz-transition: opacity .4s ease-in-out 0s;
    transition: opacity .4s ease-in-out 0s;
    width: 380px;
    height: 120px;
    padding-top: 34px;
    text-align: center;
	margin: 100px auto;
	z-index: 20;
}

#play-button:hover,
#play-button-media:hover{
	background-position: -10px -130px;
}

.scrolldown{
    position: absolute;
    bottom: 0px;
    left: 50%;
    /* transform: translate(-50%,400%); */
    margin-left: -25px;
    width: 50px;
    text-align: center;
    color: #ddd;
    z-index: 1;
}

.mouse{
    width: 20px;
    height: 34px;
    border: 2px solid #ddd;
    border-radius: 10px;
    margin: 0px auto;
}

.mouse::before{
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    top: 0px;
    background: #dfdfdf;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    opacity: 1;
    animation: mouse 2s infinite;
}

@keyframes mouse{
	from{
		opacity: 1;
		top: 4px;
	} 
	to{
		opacity: 0;
		top: 28px;
	}
}

@media screen and (max-width: 992px){
	.swipe{
		width: 20px;
		height: 34px;
		border: 2px solid #ddd;
		border-radius: 5px;
		margin: 0px auto;
		transform: rotate(-90deg);
	}

	.swipe::before{
		content: "";
		width: 4px;
		height: 4px;
		position: absolute;
		top: 0px;
		background: #dfdfdf;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 50%;
		opacity: 1;
		animation: swipe 2s infinite;
	}
}

@keyframes swipe{
	0%{
		opacity: 1;
		top: 4px;
	} 
	50%{
		opacity: 0;
		top: 28px;
	}
	100%{
		opacity: 1;
		top: 4px;
	}
}

.video-background{
    top: 0;
    overflow: hidden;
    z-index: 0;
	position: absolute;
	width: 1920px;
    height: 1010px;
    margin-left: -960px;
    left: 50%;
}

#media .video-background{
	height: 1000px;
}

@media screen and (min-width: 1700px){

}

@media screen and (min-width:1440px) and (max-width: 1699px){

}

@media screen and (min-width:1200px) and (max-width: 1439px){
	#home .container{
		height: 840px;
	}	
	
}

@media screen and (max-width: 1199px){
	#home .container{
		height: 840px;
	}	
	
	#logo{
		width: 500px;
		height: 470px;
		margin-left: -250px;
	}
}

@media screen and (max-width: 991px){
	#home .container{
		height: 840px;
		background-position: right top;
	}
	
	#logo{
		width: 450px;
		height: 390px;
		left: 50%;
		margin-left: -225px;
		top: 100px;
	}
	
	#discover{
		width: 350px;
		height: 83px;
		left: 50%;
		margin-left: -110px;
		top: 190px;
	}
	
	#buy-atlas {
		top: 490px;
		transform: scale(0.9);
	}
	
	#social_media{
		display: none;
	}
	
	.video-background{
		display: none;
	}
}

@media screen and (max-width: 767px){
	#home{
		min-height: 1010px;
		background-position: 90% top;	
	}
	
	#home .container {
		height: 1010px;
	}

	#buy-atlas {
		top: 470px;
		transform: scale(0.8);
	}
}

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

}

@media screen and (max-width: 479px){
	#home{
		min-height: 800px;
		height: 800px;
		background-position: 80% top;
	}
	
	#logo {
		width: 300px;
		height: 140px;
		left: 50%;
		margin-left: -153px;
		top: 0px;
		display: none;
	}
	
	#early-access {
		transform: scale(0.6);
		margin-right: -275px;
		top: 75px;
	}

	.hidden{
		opacity: 1.0 !important;
	}

	#discover {
		width: 260px;
		height: 70px;
		left: 50%;
		margin-left: -120px;
		top: 130px;
	}
	
	#buy-atlas {
		top: 250px;
		transform: scale(0.75);
	}
}

/* -------------- about section --------------- */

/*section#home::after {
    content: '';
    background: transparent url(images/divider-v1.png) no-repeat center top/cover;
    width: 1920px;
    height: 672px;
    display: block;
    position: absolute;
    bottom: 440px;
    z-index: 70;
}*/

section#home::after {
    content: '';
    background: linear-gradient(180deg, transparent 5%, rgba(0,0,0,0.75), black);
    height: 400px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: auto;
}

.pusher{
	overflow-x: hidden;
}

.divider-v1{
    width: 1920px;
    height: 672px;
    display: block;
	z-index: 10;
	margin-top: -386px;
}

.divider-top{
	background: transparent url('../images/divider-v1.png') no-repeat center top/cover;
    width: 1920px;
	height: 672px;
	z-index: 20;
}

.divider-bottom{
	background: transparent url('../images/divider-home-corner.png') no-repeat center top/cover;
    width: 600px;
	height: 198px;
	z-index: 10;
	position: absolute;
    bottom: 271px;
    right: 0;
}

.pup{
    background: transparent url('../images/atlas-char-pup.png') no-repeat center top/cover;
    width: 450px;
    height: 600px;
    display: block;
	z-index: 15;
	position: absolute;
	right: 0;
	bottom: 0;
	animation: 4s ease-in-out 0s normal none 1 running moveUp;
}

.pup-info{
    display: block;
	background: transparent url('../images/view-trailer-bubble.png') no-repeat center top/cover;
    width: 400px;
	height: 170px;
	
    position: absolute;
    right: 50%;
    margin-right: -555px;
    top: 800px;
	
    /*padding: 45px 160px 150px 30px;*/
	text-align: center;
	
	z-index: 25;
}

.pup-info h1{
	color: #fff;
    text-decoration: none;
    font: 400 55px/50px 'Pathway Gothic One', sans-serif;
    margin-bottom: 40px;
}

.pup-info a{
	/*background: #b3244f;
    border: 1px solid #d53473;
    padding: 10px 60px;
    color: #fff;
    text-decoration: none;
	font: 400 40px/40px 'Pathway Gothic One', sans-serif;*/
	display: block;
	width: 100%;
	height: 100%;
}

.outer-mask{
	width: 460px;
	height: 640px;
	position: absolute;
	right: 0;
	bottom: 160px;
	overflow: hidden;
}

#about{
    background: #000 url("../images/section-zuki.jpg") no-repeat center top/cover;
	min-height: 1200px;
	clip-path: polygon(0 0, 0 1025px, 1920px 931px, 1920px 592px);
    margin-top: -600px;
}

.game-description{
	top: 420px;
    right: -700px;
    width: 700px;
}

.game-description h2{
	/*font: 400 72px/90px 'Pathway Gothic One', sans-serif;*/
    background: transparent url(../images/atlas-rogues-spritesheet.png) no-repeat -490px -200px;
    width: 330px;
    height: 90px;
	text-indent: -9999px;
	margin-bottom: 15px;
    transform: scale(0.9);
    margin-left: -20px;
}

.game-description p{
	font: 400 26px/29px 'Pathway Gothic One', sans-serif;
	color: #fff;
	padding-bottom: 20px;
}

.game-description::before {
    background: transparent url(../images/text-overlay-left.jpg) no-repeat center;
    content: '';
    width: 1150px;
    height: 1030px;
    top: -230px;
    right: -220px;
    display: block;
    position: absolute;
    clip-path: polygon(0 0, 0 1030px, 885px 1030px, 1111px 0px);
    opacity: 0.75;
    transform: rotateZ(180deg) scale(1.2);
}

@media screen and (min-width: 1600px){

}

@media screen and (min-width:1440px) and (max-width: 1599px){
	.divider-v1{
		margin-top: -476px;
		margin-left: -190px;
		transform: scale(0.9);
	}

	.pup-info{
    	transform: scale(0.9);
		top: 755px;
	}
}

@media screen and (min-width:1200px) and (max-width: 1439px){
	.divider-v1{
		margin-top: -476px;
		margin-left: -250px;
		transform: scale(0.8);
	}
	
	.pup-info{
    	transform: scale(0.9);
		top: 755px;
	}
}

@media screen and (max-width: 1199px){
	.divider-v1{
		margin-top: -476px;
		margin-left: -250px;
		transform: scale(0.8);
	}
	
	.pup-info{
    	transform: scale(0.8);
		top: 730px;
	}

	#early-access{
		top: 380px;
	}

	#buy-now{
		top: 575px;
		transform: scale(0.9);
	}
}

@media screen and (max-width: 991px){
	.pup-info {
		transform: scale(0.7);
		top: 590px;
		margin-right: -550px;
	}

	#early-access{
		transform: scale(0.8);
		margin-right: -315px;
		top: 305px;
	}

	#buy-now{
		left: 50%;
		margin-left: -200px;
		top: 485px;
		transform: scale(0.9);
	}
}

@media screen and (max-width: 768px){
	.pup-info {
		transform: scale(0.6);
		top: 340px;
		margin-right: -490px;
		display: none;
	}
}

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

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

}

@media screen and (max-width: 479px){
	.pup-info {
		transform: scale(0.5);
		top: 100px;
		margin-right: -470px;
	}

	#early-access {
		transform: scale(0.6);
		margin-right: -295px;
		top: 105px;
	}

	#buy-now {
		left: 50%;
		margin-left: -200px;
		top: 255px;
		transform: scale(0.9);
	}
}

/* -------------- early access section --------------- */

#earlyaccess{
    background: #000 url("../images/section-early-access.jpg") no-repeat center top/cover;
    min-height: 1150px;
    clip-path: polygon(0 120px, 0 1250px, 1920px 1200px, 1920px 12px);
    margin-top: -130px;
}

.buyatlas{
	height: 1150px;
}

.buyatlas h2{
    top: 120px;
    right: -330px;
    background: transparent url(../images/atlas-rogues-spritesheet.png) no-repeat -0px -380px;
    width: 930px;
    height: 90px;
    text-indent: -9999px;
    margin-bottom: 15px;
    transform: scale(0.9);
    margin-left: -20px;
}

.packshot{
	background: transparent url("../images/atlas-rogues-packshot.png") no-repeat center top/cover;
	width: 460px;
	height: 660px;
	position: absolute;
	left: -50px;
	bottom: 75px;
    z-index: 10;
}

.base{
	content: '';
	background: transparent url("../images/base.png") no-repeat center top/cover;
	width: 1400px;
	height: 250px;
	position: absolute;
	left: 12%;
	margin-left: -700px;
	bottom: 0;
}

.buybox{
    /*background: transparent url(../images/buy-box.png) no-repeat center top/cover;*/
    width: 630px;
    height: 314px;
    position: absolute;
    bottom: 120px;
    right: 20px;
}

.buybox .info{
	background: transparent url(../images/buy-box.png) no-repeat center top/cover;
    height: 174px;
    padding: 22px 20px;
    text-align: center;
}

.buybox .price{
    font: 700 50px/60px 'Open Sans', sans-serif;
    color: #fff;
    letter-spacing: -2px;
    position: absolute;
    left: 60px;
    bottom: 35px;
}

.buybox .price sup{
	font-size: 32px;
    letter-spacing: .5px;
    padding-left: 3px;
}

.buybox a{
	background: transparent url(../images/buy-now-button.png) no-repeat center top/cover;
    width: 340px;
    height: 75px;
    font: 700 38px/39px 'Open Sans', sans-serif;
    color: #fff;
    position: absolute;
    right: 60px;
    bottom: 25px;
    text-transform: uppercase;
    text-decoration: none;
}

.buybox a .buynow{
	padding-top: 13px;
    text-align: center;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}

.buybox .oldprice{
    color: #bbb;
    font: 700 23px/35px 'Open Sans', sans-serif;
    padding-left: 30px;
    position: absolute;
    top: 110px;
    left: 120px;
}

.oldprice::before {
    content: '';
    width: 85px;
    position: absolute;
    height: 3px;
    background-color: #ddd;
    left: 17px;
    right: 0;
    top: 20px;
    transform: rotate(-10deg);
    opacity: 0.67;
}

.buybox .contains{
	background: transparent url(../images/buy-box.png) no-repeat center bottom/cover;
    height: 140px;
    padding: 22px 55px;
}

.buybox ul{
	margin-top: 10px;
}

.buybox ul li{
    font: 700 18px/23px 'Open Sans', sans-serif;
    color: #fff;
    letter-spacing: -.5px;
    padding-left: 0px;
    margin-left: 22px;
}

.buybox h4{
	font: 700 30px/39px 'Open Sans', sans-serif;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: -.5px;
}

.disclaimer{
	position: absolute;
	bottom: 50px;
    right: 0px;
    color: #fff;
    width: 650px;
}

/* -------------- features section --------------- */

#features{
    background: #000 url("../images/section-garrison.jpg") no-repeat center top/cover;
	min-height: 1200px;
	clip-path: polygon(0 114px, 0 1177px, 885px 1135px, 1920px 510px, 1920px 0px);
    margin-top: -120px;
}

.game-features{
	padding-top: 175px;
    width: 600px;
}

.game-features::before {
    background: transparent url(../images/text-overlay-left.jpg) no-repeat center;
    content: '';
    width: 1150px;
    height: 1030px;
    top: 100px;
    left: -360px;
    display: block;
    position: absolute;
    clip-path: polygon(0 0, 0 1030px, 885px 1030px, 1111px 0px);
    opacity: 0.75;
    transform: scale(1.2);
}

.game-features h2{
    background: transparent url(../images/atlas-rogues-spritesheet.png) no-repeat 0px -290px;
    width: 480px;
    height: 90px;
    text-indent: -9999px;
	margin-bottom: 15px;
    transform: scale(0.9);
    margin-left: -20px;
}

.game-features ul{
	margin-left: 25px;
}

.game-features li{
    font: 400 26px/29px 'Pathway Gothic One', sans-serif;
    color: #fff;
    padding-bottom: 25px;
}

.game-features li h3{
    font: 400 36px/50px 'Pathway Gothic One', sans-serif;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.25);
    color: #fff;
}

.divider-v2{
    background: transparent url('../images/divider-v2.png') no-repeat center top/cover;
    width: 1920px;
    height: 191px;
    display: block;
	z-index: 10;
	margin-top: -276px;
}

.smoke{
	background: transparent url(../images/section-smoke.jpg) no-repeat center top/cover;
    width: 1000px;
    height: 600px;
    position: absolute;
    left: 965px;
    bottom: 30px;
    clip-path: polygon(100px 555px, 960px 520px, 960px 0px);
}

.divider-v3{
    background: transparent url('../images/divider-v3.png') no-repeat center top/cover;
    width: 1920px;
    height: 762px;
    display: block;
	z-index: 10;
	margin-top: -690px;
}

#rogues{
    background: #000 url("../images/section-rogues.jpg") no-repeat center top/cover;
	min-height: 1200px;
	clip-path: polygon(0 114px, 0 1100px, 1920px 1180px, 1920px 0px);
	margin-top: -115px;
    padding-top: 100px;
    text-align: center;
}

#rogues .container{
	height: 1100px;
}

#rogues h2{
    background: transparent url(../images/atlas-rogues-spritesheet.png) no-repeat -480px -290px;
    width: 330px;
    height: 90px;
    text-indent: -9999px;
    margin: 0px auto;
	padding-bottom: 5px;
	transform: scale(0.9);
}

#rogues p{
	font: 400 26px/29px 'Pathway Gothic One', sans-serif;
    /*font: 400 23px/27px 'Open Sans', sans-serif;*/
    color: #fff;
    padding-bottom: 25px;
}

.char-select{
	display: flex;
    width: 700px;
    justify-content: space-evenly;
    position: absolute;
    bottom: 250px;
    left: 0px; /*-150*/
    flex-wrap: wrap;
}

.char-select .char{
	width: 152px;
	height: 200px;
	cursor: pointer;
	margin-top: 20px;
}

.char.asana{
	background: transparent url('../images/character/asana.png') no-repeat center top/cover;
}
.char.blackburn{
	background: transparent url('../images/character/blackburn.png') no-repeat center top/cover;
}
.char.dr-finn{
	background: transparent url('../images/character/dr-finn.png') no-repeat center top/cover;
}
.char.garrison{
	background: transparent url('../images/character/garrison.png') no-repeat center top/cover;
}
.char.helio{
	background: transparent url('../images/character/helio.png') no-repeat center top/cover;
}
.char.lockwood{
	background: transparent url('../images/character/lockwood.png') no-repeat center top/cover;
}
.char.meridian{
	background: transparent url('../images/character/meridian.png') no-repeat center top/cover;
}
.char.cpup{
	background: transparent url('../images/character/pup.png') no-repeat center top/cover;
}
.char.rask{
	background: transparent url('../images/character/rask.png') no-repeat center top/cover;
}
.char.su-ren{
	background: transparent url('../images/character/su-ren.png') no-repeat center top/cover;
}
.char.titus{
	background: transparent url('../images/character/titus.png') no-repeat center top/cover;
}
.char.zuki{
	background: transparent url('../images/character/zuki.png') no-repeat center top/cover;
}

#detailview{
    position: absolute;
    top: 170px;
    right: 100px; /*320*/
    z-index: 10;
    width: 550px;
	height: 750px;
	transition: transform 0.75s;
    transform-style: preserve-3d;
}

#detailview.flip{
	transform: rotateY(180deg);
}

#detailview #front, #detailview #back{
	width: 550px;
	height: 750px;
	position: absolute;
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#detailview .stats{
	position: absolute;
    bottom: 30px;
    right: 40px;
    width: 125px;
    height: 30px;
    cursor: pointer;
	z-index: 1;
	cursor: url('../images/cursor-flip.png'), auto;
}

#detailview.flip .stats{
	cursor: url('../images/cursor-flip-back.png'), auto;
}

#detailview #back{
	transform: rotateY(180deg);
}

#detailview #front.asana{
	background: transparent url('../images/cards/card-asana.png') no-repeat center top/cover;
}
#detailview #back.asana{
	background: transparent url('../images/cards/card-asana-back.png') no-repeat center top/cover;
}
#detailview #front.blackburn{
	background: transparent url('../images/cards/card-blackburn-v1.png') no-repeat center top/cover;
}
#detailview #back.blackburn{
	background: transparent url('../images/cards/card-blackburn-back-v1.png') no-repeat center top/cover;
}
#detailview #front.dr-finn{
	background: transparent url('../images/cards/card-dr-finn.png') no-repeat center top/cover;
}
#detailview #back.dr-finn{
	background: transparent url('../images/cards/card-dr-finn-back.png') no-repeat center top/cover;
}
#detailview #front.garrison{
	background: transparent url('../images/cards/card-garrison.png') no-repeat center top/cover;
}
#detailview #back.garrison{
	background: transparent url('../images/cards/card-garrison-back.png') no-repeat center top/cover;
}
#detailview #front.helio{
	background: transparent url('../images/cards/card-helio.png') no-repeat center top/cover;
}
#detailview #back.helio{
	background: transparent url('../images/cards/card-helio-back.png') no-repeat center top/cover;
}
#detailview #front.lockwood{
	background: transparent url('../images/cards/card-lockwood.png') no-repeat center top/cover;
}
#detailview #back.lockwood{
	background: transparent url('../images/cards/card-lockwood-back.png') no-repeat center top/cover;
}
#detailview #front.meridian{
	background: transparent url('../images/cards/card-meridian.png') no-repeat center top/cover;
}
#detailview #back.meridian{
	background: transparent url('../images/cards/card-meridian-back.png') no-repeat center top/cover;
}
#detailview #front.cpup{
	background: transparent url('../images/cards/card-pup-v1.png') no-repeat center top/cover;
}
#detailview #back.cpup{
	background: transparent url('../images/cards/card-pup-back-v1.png') no-repeat center top/cover;
}
#detailview #front.rask{
	background: transparent url('../images/cards/card-rask.png') no-repeat center top/cover;
}
#detailview #back.rask{
	background: transparent url('../images/cards/card-rask-back.png') no-repeat center top/cover;
}
#detailview #front.su-ren{
	background: transparent url('../images/cards/card-su-ren.png') no-repeat center top/cover;
}
#detailview #back.su-ren{
	background: transparent url('../images/cards/card-su-ren-back.png') no-repeat center top/cover;
}
#detailview #front.titus{
	background: transparent url('../images/cards/card-titus.png') no-repeat center top/cover;
}
#detailview #back.titus{
	background: transparent url('../images/cards/card-titus-back.png') no-repeat center top/cover;
}
#detailview #front.zuki{
	background: transparent url('../images/cards/card-zuki.png') no-repeat center top/cover;
}
#detailview #back.zuki{
	background: transparent url('../images/cards/card-zuki-back.png') no-repeat center top/cover;
}

/*#rogue{
	width: 660px;
	height: 925px;
	position: absolute;
    bottom: 60px;
    right: -295px;
}

#rogue.garrison{
	background: transparent url('../images/character/char-garrison.png') no-repeat center top/cover;
}
#rogue.zuki{
	background: transparent url('../images/character/char-zuki.png') no-repeat center top/cover;
}
#rogue.helio{
	background: transparent url('../images/character/char-helio.png') no-repeat center top/cover;
}
#rogue.lockwood{
	background: transparent url('../images/character/char-lockwood.png') no-repeat center top/cover;
}*/

.divider-v4{
    background: transparent url('../images/divider-v4.png') no-repeat center top/cover;
    width: 1920px;
    height: 199px;
    display: block;
	z-index: 10;
	margin-top: -100px;
}

#social-bar{
    background: #000 url(../images/section-social.jpg) no-repeat center top/cover;
    height: 500px;
    clip-path: polygon(0 0, 0 455px, 1920px 433px, 1920px 130px);
    margin-top: -130px;
	padding-top: 100px;
	text-align: center;
}

#social-bar h2{
    background: transparent url(../images/atlas-rogues-spritesheet.png) no-repeat 0px -200px;
    width: 480px;
    height: 90px;
    text-indent: -9999px;
    margin: 0px auto;
	padding-bottom: 5px;
	transform: scale(0.9);
}

#social-bar p{
	font: 400 26px/29px 'Pathway Gothic One', sans-serif;
    /*font: 400 23px/27px 'Open Sans', sans-serif;*/
    color: #fff;
    padding-bottom: 25px;
}

.divider-v5{
    background: transparent url('../images/divider-v5.png') no-repeat center top/cover;
    width: 1920px;
    height: 131px;
    display: block;
	z-index: 10;
	margin-top: -90px;
}

.divider-v6{
    background: transparent url('../images/divider-v5.png') no-repeat center top/cover;
    width: 1920px;
    height: 131px;
    display: block;
	z-index: 10;
	margin-top: -30px;
}

@media screen and (min-width: 1600px){

}

@media screen and (min-width:1440px) and (max-width: 1599px){

}

@media screen and (min-width:1200px) and (max-width: 1439px){
	#about{
		background-position: 30% top;
		min-height: 1000px;
		margin-top: -550px;
	}

	.game-description {
		top: 275px;
		right: -310px;
		width: 700px;
	}

	.game-description::before{
		right: -270px;
	}

	.game-description h2,
	.game-features h2{
		margin-bottom: 10px;
		transform: scale(0.85);
		margin-left: -30px;
	}

	#social-bar h2,
	#rogues h2{
		transform: scale(0.85);
	}

	#detailview{
		right: 10px;
	}

	.char-select{
		transform: scale(0.9);
		left: -60px;
	}
}

@media screen and (max-width: 1199px){
	#about{
		background-position: 30% top;
		min-height: 900px;
		margin-top: -530px;
	}

	.game-description {
		top: 220px;
		right: -280px;
		width: 600px;
	}

	.game-description::before{
		right: -370px;
	}

	.game-description h2,
	.game-features h2{
		margin-bottom: 10px;
		transform: scale(0.75);
		margin-left: -42px;
	}

	#social-bar h2,
	#rogues h2{
		transform: scale(0.75);
	}

	.game-description p {
		font: 400 23px/26px 'Pathway Gothic One', sans-serif;
	}
}

@media screen and (max-width: 991px){
	.divider-top{
		background: transparent url(../images/divider-v4.png) no-repeat center top/cover;
		width: 1920px;
		height: 199px;
		display: block;
		z-index: 10;
		margin-top: 10px;
	}

	#about {
		background-position: 30% top;
		min-height: 900px;
		margin-top: -560px;
		clip-path: polygon(0 0, 0 1025px, 1920px 931px, 1920px 50px);
	}

	.game-description {
		top: 100px;
		right: -250px;
		width: 450px;
	}

	.game-description h2,
	.game-features h2 {
		margin-bottom: 10px;
		transform: scale(0.65);
		margin-left: -62px;
	}

	#social-bar h2,
	#rogues h2{
		transform: scale(0.65);
	}

	.game-description::before {
		right: -530px;
	}

	.char-select{
		bottom: auto;
    	left: auto;
    	width: auto;
	}
}

@media screen and (max-width: 768px){
	.game-description {
		top: 100px;
		right: -250px;
		right: 50%;
		margin-right: -225px;
		width: 450px;
		position: absolute;
	}

	.game-features{
		width: 100%;
	}

	.game-features li h3 {
		font: 400 30px/40px 'Pathway Gothic One', sans-serif;
		text-shadow: 2px 2px 2px rgba(0,0,0,0.25);
		color: #fff;
	}

	.game-features li{
		font: 400 23px/26px 'Pathway Gothic One', sans-serif;
	}

	#rogues .container{
		padding: 0;
		margin: 0;
		width: 100%;
	}

	#rogues h2{
		left: 50%;
		margin-left: -165px;
	}

	.char-select{
		width: 100%;
	}

	#rogue{
		display: none;
	}

	#social-bar{
		padding-top: 70px;	
	}

	#social-bar h2{
		left: 50%;
    	margin-left: -240px;
	}

	#social-bar p {
		font: 400 23px/26px 'Open Sans', sans-serif;
	}
}

@media screen and (max-width: 600px){
	#social-bar{
		height: 600px;
		clip-path: none;
	}
}

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

}

@media screen and (max-width: 479px){
	#about{
		min-height: 1050px;
	}

	.game-description {
		top: 75px;
		right: 10%;
		margin-right: auto;
		width: 80%;
		position: absolute;
	}

	#features{
		min-height: auto;
		padding-bottom: 100px;
		clip-path: none;
		margin-top: -50px;
	}

	.game-features {
		padding-top: 75px;
	}

	.game-features::before{
		clip-path: none;
		background-size: 500px 1500px;
		height: 1500px;
	}

	#social-bar{
		padding-top: 40px;
	}
}

/* --------------  section --------------- */

@media screen and (min-width: 1600px){

}

@media screen and (min-width:1440px) and (max-width: 1599px){

}

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

@media screen and (max-width: 1199px){
	.divider-v6{
		display: none;
	}
	
	#earlyaccess{
		display: none;
	}

	#rogues{
		display: none;
	}
	.divider-v3{
		display: none;
	}
}

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

}

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

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

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

}

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

/* ------------- social media ---------- */

.social-game{
    padding-bottom: 1em;

    display: flex;
    align-items: center;
    justify-content: center;
}

#social-media{
    position: fixed;
    top: 32vh; /*10px*/
    right: 10px;
    display: flex;
	flex-direction: column;
    z-index: 25;
}

#social-media .smi,
.social-game .smi{
	width: 60px;
	height: 60px;
	background: transparent url('../images/atlas-rogues-spritesheet.png') no-repeat;
	display: block;
	transform: scale(0.7);
	opacity: 0.85;
	-webkit-transition: opacity 0.25s ease-in-out;
    -moz-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
}

#social-media .smi:hover,
.social-game .smi:hover{
	opacity: 1.0;
}

#social-media .soc_fb,
.social-game .soc_fb{
	background-position: 0 -608px;
}

#social-media .soc_tw,
.social-game .soc_tw{
	background-position: -60px -608px;
}

#social-media .soc_yt,
.social-game .soc_yt{
	background-position: -120px -608px;
}

#social-media .soc_ti,
.social-game .soc_ti{
	background-position: -180px -608px;
}

#social-media .soc_di,
.social-game .soc_di{
	background-position: -240px -608px;
}

#social-media .soc_in,
.social-game .soc_in{
	background-position: -300px -608px;
}

.social-community{
    display: flex;
	justify-content: space-evenly;
    max-width: 50%;
    margin-left: 25%;
}

.social-community .smi{
	width: 120px;
	height: 140px;
	background: transparent url('../images/atlas-rogues-spritesheet.png') no-repeat;
	display: block;
	/*transform: scale(0.7);*/
	opacity: 0.85;
	-webkit-transition: opacity 0.25s ease-in-out;
    -moz-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
}

.social-community .soc_in{
	background-position: 0 -60px;
}
.social-community .soc_di{
	background-position: -120px -60px;
}
.social-community .soc_tw{
	background-position: -240px -60px;
}
.social-community .soc_fb{
	background-position: -360px -60px;
}
.social-community .soc_yt{
	background-position: -480px -60px;
}
.social-community .soc_ti{
	background-position: -600px -60px;
}

@media screen and (min-width: 1600px){

}

@media screen and (min-width:1440px) and (max-width: 1599px){

}

@media screen and (min-width:1200px) and (max-width: 1439px){
	.social-community .smi{
		transform: scale(0.7);
	}
}

@media screen and (min-width:992px) and (max-width: 1199px){
	.social-community .smi{
		transform: scale(0.65);
	}
}

@media screen and (max-width: 991px){
	#social-media{
		display: none;
	}
	
	.social-game{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 0.5rem;
		padding-left: auto;
	}

	.social-community {
		display: flex;
		justify-content: space-evenly;
		max-width: 70%;
		margin-left: 15%;
		flex-wrap: wrap;
	}

	.social-community .smi{
		transform: scale(0.7);
	}
}

@media screen and (max-width: 767px){
	.social-community {
		max-width: 100%;
		margin-left: 0%;
	}

	.social-community .smi {
		transform: scale(0.5);
	}
}

@media screen and (max-width: 550px){
	.social-community .smi {
		transform: scale(0.6);
	}
}

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

}

/* -------------- footer --------------- */

.footer-100per{
    width: 100%;
    background: #141715 url(../images/section-footer.jpg) no-repeat center top/cover;
    padding: 140px 2% 2% 2%;
    position: relative;
    min-height: 575px;
    margin-top: -80px;
}
.footer-100per p{
    font-size: .84em;
    line-height: 1.5em;
    color: #fff;
    text-align: left;
    padding-top: 10px;
    width: 100%!important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
#legal-wrap{
    margin:0 auto;
    max-width:1228px;
    width:96%
}
.footer-logo, .rating, footer .legal, label {
    display: inline-block;
}
footer .legal{
    width:72%;
    position:relative
}
footer .legal p{
    font-family:'Open Sans',sans-serif
}
footer .legal ul{
	list-style: none;
}
footer .legal li{
	float: left;
    color: #fff;
    border-right: 1px solid rgb(67, 86, 81);
    padding: 0px 10px 5px;
}
footer .legal li:last-child{
	border-right: none;
}
footer .legal ul li a{
    color: #fff;
    font-size: 14px;
    margin-top: 10px;
    display: inline-block;
	text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.rating{
    padding:0;
    width:27%;
    text-align:right;
    vertical-align:top;
    white-space:nowrap
}
#Main_Header h1,.description{
    text-align:center
}
#Main_Header h1 a:hover { opacity: .8; }
.footer-logo,img{
    vertical-align:middle
}
#Main_Header img,.alpha-bg,h1,h3{
    width:100%
}
.legal div:first-child{
    padding-left:0;
    border-left:none
}
.footer-logo{
    height:100px;
    line-height:100px;
    max-width:19%;
    padding: 0 2%;
    margin-left: 5px;
}
.footer-logo:before{
    content:"";
    position:absolute;
    border-left:1px solid #aaa;
	height: 68px;
    margin-left: -9%;
    top: 17px;
}
.legal .footer-logo:first-child::before{
    border:none
}
.footer-logo img{
    width:100%;
	height: auto;
    position:relative
}

.footer-logo.steam{
    background: transparent url(../images/atlas-rogues-spritesheet.png) no-repeat -650px -590px;
    width: 180px;
    max-width: 190px;
    height: 90px;
    text-indent: -9999px;
    margin: 0px auto;
    padding-bottom: 5px;
}

.footer-logo.steam a{
	width: 100%;
	height: 100%;
	display: block;
}

.footer-logo.pc-game{
    background: transparent url(../images/atlas-rogues-spritesheet.png) no-repeat -820px -590px;
    width: 90px;
    height: 90px;
    text-indent: -9999px;
    margin: 0px auto;
    padding-bottom: 5px;
}

@media screen and (min-width: 992px) and (max-width: 1220px){
	.footer-logo{
    	max-width: 18%;
	}
}

@media screen and (max-width:991px){
    .rating,footer .legal{
        width:100%;
        display:block
    }
    .rating{
        text-align:center
    }
	.footer-logo{
		max-width: 18%;
	}
}

@media screen and (max-width: 479px){
	.footer-logo {
		max-width: 45%;
	}
	
	.footer-logo:before {
		content: "";
		position: absolute;
		border-left: none;
		height: 68px;
		margin-left: -9%;
		top: 17px;
	}
}


@-webkit-keyframes moveUp{
	0% {
		opacity: 0;
		transform: translate3d(0px, 2000px, 0px);
	}
	60% {
		opacity: 1;
		transform: translate3d(0px, 0px, 0px);
	}
	80% {
		transform: translate3d(0px, 10px, 0px);
	}
	100% {
		transform: translate3d(0px, 0px, 0px);
	}	
	}
	
	@-moz-keyframes moveUp{
	0% {
		opacity: 0;
		transform: translate3d(0px, 2000px, 0px);
	}
	60% {
		opacity: 1;
		transform: translate3d(0px, 0px, 0px);
	}
	80% {
		transform: translate3d(0px, 10px, 0px);
	}
	100% {
		transform: translate3d(0px, 0px, 0px);
	}	
	}
	
	@-ms-keyframes moveUp{
	0% {
		opacity: 0;
		transform: translate3d(0px, 2000px, 0px);
	}
	60% {
		opacity: 1;
		transform: translate3d(0px, 0px, 0px);
	}
	80% {
		transform: translate3d(0px, 10px, 0px);
	}
	100% {
		transform: translate3d(0px, 0px, 0px);
	}	
	}
	
	@keyframes moveUp{
	0% {
		opacity: 0;
		transform: translate3d(0px, 2000px, 0px);
	}
	60% {
		opacity: 1;
		transform: translate3d(0px, 0px, 0px);
	}
	80% {
		transform: translate3d(0px, 10px, 0px);
	}
	100% {
		transform: translate3d(0px, 0px, 0px);
	}
	}

	/* -------------- animation ------------*/

#rogue{
	-webkit-animation:fadeInFront .4s ease-in backwards;
	animation:fadeInFront .4s ease-in backwards}
#front{
	-webkit-animation:fadeInFront .4s ease-in backwards;
	animation:fadeInFront .4s ease-in backwards
}	

[class*="obj_move"]{opacity:1;-webkit-transition:all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);-moz-transition:all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);transition:all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.obj_move1{-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)}
.obj_move2{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);
	-webkit-transition-duration:1s;-moz-transition-duration:1s;transition-duration:1s;
	-webkit-transform-style:linear;-moz-transform-style:linear;transform-style:linear}
.obj_move3{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);
	-webkit-transition-duration:3s;-moz-transition-duration:3s;transition-duration:3s}
.obj_move4{opacity:1;-webkit-transform:scale(1,1.3);-moz-transform:scale(1,1.3);transform:scale(1.2);
	-webkit-transition:all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);-moz-transition:all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);transition:all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.ani_on{opacity:1;-webkit-transform:translate(0,0) scale(1,1);-moz-transform:translate(0,0) scale(1,1);-ms-transform:translate(0,0) scale(1,1);transform:translate(0,0) scale(1,1)}

@keyframes fadeInFront{0%{opacity:0;-webkit-transform:translateX(130px);transform:translateX(130px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes fadeInBack{0%{opacity:0;-webkit-transform:translateX(-130px);transform:translateX(-130px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}