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

@font-face{
	font-family:"Alegreya SC";
	src: url("../font/AlegreyaSC-Regular.otf");
	}
@font-face{
	font-family:"Alegreya";
	src: url("../font/AlegreyaSans-Regular.otf");
	}
@font-face{
	font-family:"Alegreya Bold";
	src: url("../font/AlegreyaSans-Bold.otf");
	}

body {
	background: url("../img/bg.jpg") center center #060606;
	margin:0px;
	padding: 0px;
	text-align: center;
	color:#ead391;
	font-family: "Alegreya SC";
	font-size: 1em;
	overflow-x: hidden;
	}

a {
	text-decoration: none;
	}

h2 {
	font-size: 1.7em;
	margin: 0;
	padding: 0;
	font-weight: 100;
	}

h3 {
	font-size: 1.5em;
	margin:0;
	padding: 0;
	font-weight: 100;
	}

p {}

p span, h2 span, h3 span {
	color:#fff9e7;
	}

img {
	display:block;
	margin: 0;
	}


section.wrapper {
	width:90%;
	max-width: 1000px;
	margin: auto;
	position: relative;
	}	

.division {
	position:absolute;
	background: url("../img/division1.png") no-repeat center center;
	height: 27px;
	width:100%;
	z-index: 99;
	margin-top: -16px;
	}

.division2 {
	position:absolute;
	background: url("../img/division2.png") no-repeat center center;
	height: 27px;
	width:100%;
	z-index: 99;
	margin-top: -5px;
	}

.division3 {
	position:absolute;
	background: url("../img/division1.png") no-repeat center center;
	height: 27px;
	width:100%;
	z-index: 99;
	margin-top: -20px;
	}

.division4 {
	position:absolute;
	background: url("../img/division2.png") no-repeat center center;
	height: 27px;
	width:100%;
	z-index: 99;
	margin-top: -5px;
	}

#navbar {
	background: url("../img/navbar.png") center bottom no-repeat;
	height: 70px;
	background-size: cover;
	position: fixed;
	width:100%;
	top: 0;
	z-index: 999;
	}

#navbar ul{
	list-style: none; 
	margin: 0;
	padding: 0;
	}

#navbar ul li {
	display: inline-block;
	padding: 13px 20px;
	}

#navbar ul li a{
	display: block;
	color:#fce49d;
	background: -webkit-linear-gradient(#fce49d, #a48f60);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	font-size: 1.5em;
	filter: drop-shadow(0px 2px 1px #000000);
	transition: all 200ms ease-in-out 0s;
	}

#navbar ul li a:hover{
	color:#ffffff;
	background: -webkit-linear-gradient(#ffffff, #fce49d);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	}

.shadow {filter: drop-shadow(0px 1px 5px #000000);}

.keyart {
	background: url("../img/header.png") center top no-repeat;
	background-size: cover;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

.news .keyart {
	background: url("../img/header-news.png") center top no-repeat;
	background-size:auto;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}


#header {
	padding-top: 70px;
	/*background: url("../img/header.png") center top no-repeat;*/
	height: 600px;
	display: grid;
	vertical-align: middle;
	width: 100%;
	}

.news #header {
	padding-top: 70px;
	height: 300px;
	display: grid;
	vertical-align: middle;
	width: 100%;
	}
.news #header h1{
	font-size:3em;
	text-shadow:0px 5px 5px #000;
}

#header h1{
	margin: 0; 
	padding: 0;
	}

#header h1 img{
	margin: auto;
	width:90%;
	max-width: 500px;
	}

.download-mobile {display:none;}
.menu-mobile {display:none;}

#teaser .downloadanchor{
	display: block;
	}

#teaser .downloadanchor img{
	margin: auto;
	width: 60%;
	max-width: 220px;
	}

#teaser {
	position: relative;
	z-index: 4;
	}
#teaser .wrapper {
	padding-bottom:10px;
	}

#teaser h3 {
	margin-top: 30px;
	}

#teaser .videoframe {
	position: absolute;
	width:100%;
	}
#teaser #video {
	max-width: 740px;
	position: relative;
	margin: 30px auto;
	}
#teaser .character{
	position:absolute;
	z-index: 5;
	max-width: 740px;
	bottom: 0px;
	right:-550px;
	}

#carrousel {
	background: url("../img/bg-warlords.jpg") center bottom no-repeat;
	background-size: cover;
	position: relative;
	z-index: 3;
	}

#carrousel .wrapper {
	padding:30px 0 60px;
	}

#carrousel .character{
	position:absolute;
	z-index: 1;
	max-width: 740px;
	bottom: 0px;
	left:-550px;
	}

#carrousel .gallery {
	z-index:3;
	margin: 30px auto 0px;
	max-width: 900px;
	}

.slick-slide img {
	margin:auto;
	width:98%;
	}

.slick-dots {
	position:relative !important;
	}

.slick-dots li button::before {
	background: url("../img/dot.png") !important;
	opacity:1 !important;
	background-size: contain !important;
	content: close-quote !important;
	}

.slick-dots li.slick-active button::before{
	background: url("../img/dotactive.png") !important;
	opacity:1 !important;
	background-size: contain !important;
	}

.slick-next::before, .slick-prev::before {
	opacity: 1 !important;
	content: none !important;
	}

.slick-next{
	background: url("../img/arrowright.png") no-repeat!important;
	background-size: contain !important;
	width: 50px !important;
	height: 50px !important;
	right: -60px !important;
	}

.slick-prev{
	background: url("../img/arrowleft.png") no-repeat!important;
	background-size: contain !important;
	width: 50px !important;
	height: 50px !important;
	left: -60px !important;
	}

#cbs {
	background: url("../img/bg-cbs.jpg") center bottom no-repeat;
	position: relative;
	z-index: 2;
	}

#cbs .wrapper {
	padding:60px 0px 0px;
	}

#cbs .character{
	position:absolute;
	z-index: 1;
	max-width: 900px;
	bottom: -95px;
	right:-450px;
	}

#cbs .gallery2 {
	z-index:5;
	max-width: 740px;
	margin: auto;
	}

#download {
	position:relative;
	z-index: 1;
	}

#cbs .playforfree{
	position: relative;
	bottom:-35px;
	z-index: 99;
	max-width: 315px;
	left: 0;
	right: 0;
	margin: auto;
	}

#download ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

#download ul li {
	display: inline-block;
	}

#download ul li a img {
	width:90%;
	margin: auto;
	}	
#download .down1 {
	max-width: 600px;
	margin: 0px auto ;
	}

#download .down1 li{
	width:49%;
	}

#download .down2{
	max-width: 650px;
	margin: 20px auto 0px;
	}

#download .down2 li {
	width: 32%;
	}

#download .wrapper {
	padding:60px 0px 40px;
	}

#community {
	background: url("../img/bg-community.jpg") center bottom no-repeat;
	background-size: cover;
	}

#community .wrapper {
	padding:40px 0;
	}

#community ul{
	list-style: none;
	margin:30px auto 0;
	padding: 0;
	max-width: 720px;
	}

#community ul li {
	display: inline-block;
	width:19.5%;
	}
	
#community ul li a img{
	margin: auto;
	width:90%;
	}

#contentcreator {
	background: url("../img/bg-content.jpg") center bottom no-repeat;
	background-size: cover;
	}

#contentcreator .wrapper {
	padding:40px 0;
	}

#contentcreator .frame {
	margin: 10px auto 0;
	max-width: 600px;
	width:100%;
	}

#contentcreator .join{
	position:relative;
	}

#contentcreator .join img{
	margin: -50px auto 0px;
	width: 60%;
	max-width: 220px;
	position: relative;
	}

#footer {
	/*background-color: #060606;*/
	}

#footer .wrapper {
	padding:50px 0 30px;
	}

#footer img {
	margin: auto;
	width: 60%;
	max-width: 135px;
	}

#footer a {
	color: #95865b;
	text-decoration: none;
	padding: 0 10px;
	transition: all 200ms ease-in-out 0s;
	}

#footer a:hover {
	color:#ead391;
	}


.post {
	background-image:url("../img/post-bg.jpg");
	background-position: center;
	background-size: 100%;
	margin: 0px 0px 40px 0px;
	}
.post article {
	padding: 20px 40px;	
	}
.post-border {
	width:100%;
	margin: 0;
	padding: 0;
	}

#blog{
	text-align:left;
	line-height: 1.5em;
	}

#blog h3{
	font-family:"Alegreya SC";
	font-size: 1.1em;
	padding-bottom:10px;
}
#blog h4 {
	font-family:"Alegreya SC";
	font-size: 1.2em;
	font-weight: 100;
	color:#fff9e7;
	
}
#blog p{
	font-family:"Alegreya";
	color:#fff9e7;
	font-size: 1.1em;
	letter-spacing: 0.02em;
}
#blog .gallery-duo{
	margin-top:30px;
}
#blog .gallery-duo div{
	width:49%;
	display: inline-block;
	margin: auto;
	text-align: center;
}
#blog .gallery-duo img{
	display:inline-block;
	width:95%;
	margin: auto;
}
#blog .gallery-duo p{
	font-family:"Alegreya SC";
	font-size: 1.1em;
	color:#ead391;
	margin: 0px 0px 10px;
	}
#blog .gallery-solo img{
	width:100%;
	margin:30px auto;
}





@media screen and (max-width: 1112px) {
	#header {height:565px;}
	#teaser .character, #carrousel .character, #cbs .character {display:none;}
	#navbar .wrapper {margin:0px auto; width:100%;}
	#navbar ul li {padding:12px 15px;}
	.news #header { height:250px;}
	}

@media screen and (max-width: 980px) {
	#navbar {height:65px;}
	#navbar ul li {padding:12px 15px;}
	}
		
@media screen and (max-width: 960px) {
	#header {height:450px;}
	#header h1 img {max-width:430px;}
	.keyart {margin:50px auto 0;}
	#carrousel .gallery {max-width:93%;}
	}
@media screen and (max-width: 915px) {
	#navbar {height:65px;}
	#navbar ul li {padding:10px 10px;}
	}
@media screen and (max-width: 896px) {
	body {font-size:0.9em;}
	#header {height:340px;}
	#header h1 img {max-width:345px;}
	#teaser .downloadanchor img {max-width:200px;}
	#teaser #video {max-width:650px;}
	#carrousel .gallery {max-width:80%;}
	#cbs .gallery2 {max-width:80%;}
	#community ul {max-width:660px;}
	#contentcreator .join img {max-width:200px;}
	}

@media screen and (max-width: 812px) {
	#header {height:300px;}
	}

@media screen and (max-width: 812px) {
	body {font-size:0.8em;}
	#navbar {height:60px;}
	}

/***break***/
@media screen and (max-width: 736px){
	.hide {display:none !important;}
	.download-mobile {display:block; list-style: none; padding:0; width:100%; max-width: 500px; margin:0 auto;}
	.download-mobile li {display:inline-block; width:49%;}
	.download-mobile li img {width:90%; margin: auto;}
	#teaser h3 {margin-top:20px;}
	#teaser #video {max-width:600px; margin:20px auto;}
	#carrousel .wrapper {padding:20px 0 50px;}
	#carrousel .gallery {margin:20px auto 0;}
	#cbs .wrapper {padding:40px 0px 50px;}
	#community .wrapper {padding:20px 0;}
	#community ul {max-width:600px; margin:15px auto 0;}
	#contentcreator .frame {max-width: 510px;}
	#contentcreator .wrapper {padding:20px 0px;}
	#footer .wrapper {padding:30px 0 20px;}
	.news #header { height:200px; padding-top: 54px;}
	}

@media screen and (max-width: 667px){
	#header h1 img {max-width:300px;}
	.download-mobile {max-width:450px;}
	#teaser #video {max-width:530px;}
	section.wrapper {width:97%;}
	.slick-prev, .slick-next {width:40px !important; height: 40px !important;}
	#contentcreator .join img {max-width:175px;}
	#footer .wrapper {padding:25px 0 20px;}
	#footer img {max-width:110px;}
	#footer p {width:90%; margin: 10px auto;}
	}

/***menu swap***/
@media screen and (max-width: 590px){
	.home #navbar .wrapper {width:100%;}
	
	.home .menu-desktop {display:none;}
	.home .menu-mobile {display:block;}
	
	.home .submenu-mobile {width:100%; background-color: #000; margin-top: 10px !important;}
	.home .submenu-mobile li {display:block !important; border-bottom: 0.5px solid; padding:14px 0 17px;}
}


@media screen and (max-width: 568px){
	#header {height:230px;}
	.news #header { height:175px;}
	}

@media screen and (max-width: 540px){
	#teaser #video {max-width:95%;}
	#carrousel .gallery, #cbs .gallery2 {max-width:75%;}
	#carrousel .wrapper {padding:20px 0 35px;}
	#cbs .wrapper {padding:40px 0 30px;}
	#contentcreator .frame {max-width:90%;}
	}

@media screen and (max-width: 515px){
	#blog .gallery-duo div {display:block; width:100%;}
	.news #header { height:150px;}
	}

@media screen and (max-width: 414px){
	.slick-prev {left:-45px !important;}
	.slick-next {right:-45px !important;}
	#community ul li {width:17.5%;}
	}

@media screen and (max-width: 375px){
	#header h1 img {max-width:275px;}
	.download-mobile li {display:block; width: 100%; margin:10px auto;}
	.download-mobile {max-width:215px}
	#teaser h3, #teaser h2 {width:97%; margin: auto;}
	}

@media screen and (max-width: 320px){
	body {font-size:0.7em;}
	#navbar {height:50px;}
	.submenu-mobile {margin-top: 3px !important;}
	#header {padding-top:50px;}
	.keyart {margin:30px auto 0;}
	#teaser #video {margin:10px auto;}
	#carrousel .wrapper {padding:15px 0 20px;}
	#carrousel .gallery, #cbs .gallery2 {max-width:85%;}
	#carrousel .gallery {margin:10px auto 0;}
	#cbs .wrapper {padding:25px 0 20px;}
	#contentcreator .join img {max-width:140px;}
	#contentcreator .join img {margin:-30px auto 0;}
	
	}