.font-title{
	font-family: 'Cinzel', serif;
}

.font-body{
	font-family: 'proxima-nova', sans-serif;
	letter-spacing:0.1rem;
}

.color-black{
	color:#000;
}

.color-white{
	color:#fff;
}

.color-blue{
	color:#aedae9;
}

.color-darkblue{
	color:#3bbdfa;
}

.color-gray{
	color: #c5c5c5;
}

.color-darkgray{
	color: #666666;
}

.color-purple{
	color: #b28cfb;
}

.color-purpledark{
	color:#6631cc;
}

.color-purplelight{
	color:#736adb;
}

#headerbar-sqex
{
	position: fixed;	
}
/* ============================== 
OVERRIDES
============================== */
p{
	font-size:1.65rem;
}

h1 small{
	font-size:0.6em;
}

/* ============================== 
COMPONENTS
============================== */
body{
	opacity:0;
}

body.in{
	opacity:1;
	transition:1200ms opacity 500ms;
}

.body-section{
	opacity:0;
}

.in .body-section{
	opacity:1;
	transition:2000ms opacity 2500ms;
}

/* TITLE HEADER (BODY) */
.body-section .title{
	margin:0 auto;
	max-width:730px;
	padding:1rem 0;
	position:relative;
}

.body-section .title h1{
	font-size:3rem;
	letter-spacing: 0.08rem;
	margin-bottom:0;
	text-align:center;
}

.body-section .title .line-breaker{
	height:2px;
	position:absolute;
	width:100%;
}

.body-section .title .line-breaker.bottom{
	left:0;
	bottom:0;
}

.body-section .title .line-breaker.top{
	left:0;
	top:0;
}

/* ============================== 
CTA
============================== */
.cta.purple{
	background:black;
}


.cta.purple{
	background:black;
	border:1px solid #9561ed;
	color:#9561ed;
	display:inline-block;
	font-size:1.45rem;
	letter-spacing: 0.1rem;
	padding:1rem 2rem;

}

.activated .cta.purple{
	transition:500ms color, 500ms background !important;
}

.cta.purple:hover{
	background:#565656;
	color: #c5c5c5;
	text-decoration:none;
}

.in .cta.purple{
	transition:1200ms 3000ms;
}



.cta.purple2{
	background:black;
}


.cta.purple2{
	background:black;
	border:1px solid #9561ed;
	color:#9561ed;
	display:inline-block;
	font-size:1.85rem;
	letter-spacing: 0.1rem;
	padding:1.5rem 3rem;

}

.activated .cta.purple2{
	transition:500ms color, 500ms background !important;
}

.cta.purple2:hover{
	background:#565656;
	color: #c5c5c5;
	text-decoration:none;
}

.in .cta.purple2{
	transition:1200ms 3000ms;
}

/* ============================== 
HEADER
============================== */
header{
	background:#000;
	padding:27px;
	position:relative;
}

header #logo{
	display: inline-block;
}

header #logo img{
	vertical-align:top;
	width:157px;
}

header #language{
	cursor:pointer;
	position:absolute;
	right:50px;
	top:50%;
	transform:translateY(-50%);
}

header #language .flag{
	display:inline-block;
}

header #language .flag img{
	vertical-align: middle
	width:27px;
}

header #language .lang{
	color:#fff;
	display:inline-block;
	font-size:1.5rem;
	margin-left:16px;
}

header #language .glyphicon{
	color:#fff;
	position:absolute;
	right:-26px;
	top:auto;
	transform:translateY(60%) rotate(-90deg);
	transition:500ms;
}

header #language.open .glyphicon{
	transform:translateY(60%) rotate(0);
}

/* ============================== 
LANGUAGE SELECTOR
============================== */
#lang-select{
	color:#fff;
	display:none;
	position:absolute;
	right:0;
	top:70px;
	z-index:20;
}

#lang-select.open{
	display:block;
}

#lang-select ul{
	list-style-type:none;
	padding-left:0;
	text-align:right;
}

#lang-select li{
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0)  0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 100%);
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0)  0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0)  0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 100%);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0)  0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 100%);

	margin-top:1px;
	padding-left: 20px;
	padding-right: 50px;
	transform:translateX(100%);
	transition:500ms transform;
}

#lang-select li.in{
	transform:translateX(0%);
}

#lang-select li a{
	color:#fff;
	display:block;
	font-size:1.25rem;
	width:100%;
}

#lang-select li a:hover{
	color:#c5c5c5;
	text-decoration: none;
	transition:500ms color;
}


/* ============================== 
HERO
============================== */
#hero{
	min-height:130vw;
	overflow:hidden;
	position:relative;
}

#hero.vertical-center{
	display: flex;
	align-items:center;
}

#hero .bg-mobile{
	background:black;
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
}

#hero .bg-mobile .bg-container{
	height:100%;
	left:0;
	opacity:0;
	position:absolute;
	top:0;
	transition:2000ms opacity, 5000ms transform;
	width:100%;
}

#hero .bg-mobile .bg-container.active{
	opacity:1;
	transform:scale(1.05);
}

#hero .bg-video{
	display:none;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}

#hero .container{
	max-width:100%;
	position: relative;
	text-align:center;
	z-index:1;
}

#hero .game-title{
	max-width:465px;
	width:100%;
	opacity:0;
}

.in #hero .game-title{
	opacity:1;
	transition:1200ms opacity 1500ms;
}

#hero .subtitle{
	color:#fff;
	margin: 3rem auto;
	max-width:650px;
	padding:1rem 0;
	position:relative;
	text-shadow: 0px 2px #000000;
	width:100%;


    
}

#hero .subtitle .subtitle-bg{
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0)  0%, rgba(0, 0, 0, 0.25) 10%, rgba(0, 0, 0, 0.25) 90%, rgba(0, 0, 0, 0) 100%);
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0)  0%, rgba(0, 0, 0, 0.25) 10%, rgba(0, 0, 0, 0.25) 90%, rgba(0, 0, 0, 0) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0)  0%, rgba(0, 0, 0, 0.25) 10%, rgba(0, 0, 0, 0.25) 90%, rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0)  0%, rgba(0, 0, 0, 0.25) 10%, rgba(0, 0, 0, 0.25) 90%, rgba(0, 0, 0, 0) 100%);

    height:100%;
    left:0;
    position:absolute;
    top:0;
    transform:scaleX(0);
    width:100%;
}

#hero .subtitle h1{
	font-size:4rem;
	letter-spacing: 0.08rem;
	margin-bottom:0;
	position:relative;

    opacity:0;
    z-index:2;
}

.in #hero .subtitle h1{
	opacity:1;

	transition:1500ms opacity 3500ms
}

#hero .subtitle .line-breaker{
	height:2px;
	position:absolute;
	transform:scaleX(0);
	width:100%;
}

#hero .subtitle .line-breaker.bottom{
	left:0;
	bottom:0;
}

#hero .subtitle .line-breaker.top{
	left:0;
	top:0;
}

.in #hero .subtitle .line-breaker.top{
	transform:scaleX(1);
	transition:2500ms transform 2000ms;
}

.in #hero .subtitle .line-breaker.bottom{
	transform:scaleX(1);
	transition:2500ms transform 2500ms;
}

.in #hero .subtitle .subtitle-bg{
	transform:scaleX(1);
	transition:2500ms transform 2500ms;
}


#hero .cta{
	margin-top:1em;
	opacity:0;

}

.in #hero .cta{
	opacity:1;
}

#hero #gs-tab{
	bottom:0;
	display: inline-block;
	position: absolute;
	right:0;
}




















/* ============================== 
BACK
============================== */

#preorder{
	background:url(../img/preorder-bg-tile.jpg)repeat-x;
	background-size:100% 101%;padding-bottom:8em;
	overflow:hidden;
	padding-top:8em;
}

#preorder .halves{
	align-items:center;
	display:flex;
	flex-direction:column;
}

#preorder .left{
	max-width:100%;
	padding:0;
	text-align:center;
	vertical-align:middle;
}

#preorder .left img{
	width:100%;
}

#preorder .cta{
	color:#fff;
	display:inline-block;
	font-size:1.45rem;
	letter-spacing: 0.1rem;
	margin-top:2rem;
	padding:0;
	transition:500ms background;
}

#preorder .cta:hover{
	text-decoration:none;
}

#preorder .cta .img-holder .hover{
	left:0;
	opacity:0;
	position: absolute;
	top:0;
	transition:250ms opacity;
}

#preorder .cta:hover .img-holder .hover{
	opacity:1;
}

#preorder .cta .font-title{
	margin:0;
	position: absolute;
	text-align:center;
	top:calc(50% + 1px);
	transform:translateY(-50%);
	width:100%;
}

#preorder .right{
	margin-top:0;
	max-width:100%;
	vertical-align: middle;
}

#preorder .right img{
	width:100%;
}





















/* ============================== 
SINISE
============================== */
#sinise{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#262642+0,090816+100 */
	background: rgb(38,38,66); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(38,38,66,1) 0%, rgba(9,8,22,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(38,38,66,1) 0%,rgba(9,8,22,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(38,38,66,1) 0%,rgba(9,8,22,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262642', endColorstr='#090816',GradientType=0 ); /* IE6-9 */

	padding-top:8rem;
	padding-left:0;
	padding-right:0;
	position:relative;
	text-align:center;
}

#sinise #subtitle{
	font-size:2.2rem;
	letter-spacing: 0.1rem;
	margin:0 auto 2em;
	max-width:730px;
}

#sinise .featured-video,
#sinise-video .featured-video{
	width:100%;
}

#sinise .description,
#sinise-description .description{
	margin:4rem auto 0;
	max-width:730px;
}

#sinise .photo,
#sinise-description .photo{
	margin-bottom:4em;
	margin-top:4em;
	width:100%;
}

#sinise .cta,
#sinise-description .cta{
	margin-top:2rem;
	transition:500ms background;
}

#sinise #cta-text,
#sinise-description #cta-text{
	display:block;
	font-size:1.45rem;
	margin-top:2rem;
}

#sinise-video{
	position: absolute;
	height:0;
	width:100%;
	z-index:1;
}

#sinise-video .container{
	transform:translateY(-50%);
}

#sinise-description{
	padding-bottom:8em;
}

#sinise-description .content-container{
	text-align:center;
}


/* ============================== 
FOOTER
============================== */
footer{
	background:#252525;
	color:#fff;
	padding:0 0 8rem;
}

footer #links{
	margin-bottom:2em;
	padding-top:1em;
	text-align:center;
}

footer #links .icon-circle{
	background:#c5c5c5;
	border-radius:50%;
	display:inline-block;
	height:8px;
	margin-left:10px;
	margin-right:10px;
	width:8px;
}

footer #links a{
	display:inline-block;
}

footer #links a:active,
footer #links a:visited,
footer #links a:focus{
	color:#c5c5c5;
}

footer #left-half{
	border-bottom:1px solid gray;
	padding-bottom:1.5em;
	margin-bottom:2em;
}

footer #logos img{
	width:100%;
}

footer #logos p small{
	font-size:10px;
}

footer #logos p{
	line-height:13px;
}

footer #logos a:active,
footer #logos a:visited,
footer #logos a:focus{
	color:#c5c5c5;
	font-size:8px;
}


@media (min-width:560px){
	#hero{
		min-height:unset;
		height:730px;
	}
}




@media (min-width:768px){


	header{
		padding:27px 70px;
	}

	/* ============================== 
	HERO
	============================== */
	#hero{
		height:50vw;
	}

	#hero .bg-video{
		display:block;
	}

	#hero .game-title{
		max-width:730px;
		width:60%;
	}

	#hero .subtitle{
		width:70%;
	}

	/* ============================== 
	PREORDER
	============================== */
	#preorder .halves{
		flex-direction:row;
	}

	/* ============================== 
	FOOTER
	============================== */
	footer #left-half{
		border-bottom:0px solid gray;
		border-right:1px solid gray;
		padding-bottom:0;
		margin-bottom:0;
	}

}


@media (min-width:992px){
	footer #left-half{
		border-bottom:0px solid gray;
		border-right:1px solid gray;
		padding-bottom:0;
		margin-bottom:0;
	}
	
}