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

/*BASICS*/
body {
	padding:0;
	margin:0;
	font-family:'Antic Slab', serif;
	color:#473d7a;
	font-weight:300;
	line-height:26px;
	font-size:15px;
	}
h1, h2, h3, p {
	margin:0;
	}
.responsive section {
	max-width:1000px;
	min-width:320px;
	margin:auto;
	clear:both;
	}
img{
	display:block;
	}
.title{
	max-width:265px;
	background:url(../images/h1.png) top center no-repeat;
	background-size:contain;
	height:80px;
	margin:-40px auto 0px;
	font-family: 'curse_casual_jveregular';
	text-transform:uppercase;
	color:#fff;
	font-size:38px;
	font-weight:100;
	letter-spacing:0.02em;
	text-align:center;
	padding-top:27px;
	position:relative;
	z-index:99;
	text-shadow:
   -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 2px 0 #000;
	}
.title2{
	margin:-40px auto -65px;
	}
.title span{
	color:#f9f39b;
	}
#secure-wrapper{
	overflow:hidden;
	}
#anchor2, #anchor3{
	position: relative;
	top:-100px;
	display: block;
	height: 0;
	width:0;
	}
/*/////////////////////////////////////////////////////////////////////////////////////*/
/*MENU BAR*/
#menubar {
	height:72px;
	width:100%;
	background:rgba(28, 24, 52, 0.7);
	position:fixed;
	z-index:999;
	transition:all 200ms ease-in-out 0s;
	}
#menubar ul{
	list-style:none;
	margin:0;
	padding:0px;
	text-align:center;
	}
#menubar ul li{
	display:inline-block;
	padding:20px 40px;
	}
#menubar ul li a {
	font-family: 'curse_casual_jveregular';
	text-transform:uppercase;
	color:#fff;
	font-size:35px;
	font-weight:100;
	letter-spacing:0.02em;
	text-align:center;
	text-decoration:none;
	text-shadow:
   -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 2px 0 #000;
	}
#menubar ul.menu_short{
	display:none;
	}
/*/////////////////////////////////////////////////////////////////////////////////////*/
/*HEADER*/
#header{
	height:570px;
	padding-top:72px;
	position:relative;
	text-align:center;
	}
#header h1 img{
	display:block;
	margin:auto;
	width:100%;
	max-width:785px;
	padding-top:30px;
	}
#header h3 {
	font-family: 'curse_casual_jveregular';
	text-transform:uppercase;
	color:#fff;
	font-size:45px;
	font-weight:100;
	letter-spacing:0.02em;
	text-align:center;
	line-height:42px;
	text-shadow:
   -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 2px 0 #000;
	 margin-top:-20px;
	}
#header h3 span{
	color: #d1f5fe;
	}
#header article.characters{
	position:absolute;
	width:100%;
	max-width:960px;
	margin:auto;
	height:auto;
	bottom:0;
	}
#header .character {
	position:absolute;
	z-index:-1;
	bottom:0;
	}
.one { left:-350px;}
.two {right:-450px;}
.one img{}


/*/////////////////////////////////////////////////////////////////////////////////////*/
/*HEADER EFFECTS*/
figure{ margin:0;}
.header_bg { width:100%; height:100%; background:url(../images/parallax-bg.jpg) no-repeat center; background-size:cover;  position:absolute; top:0; left:0; z-index:-2;}
.video_bg { width:100%; height:100%; background:url(../images/video-bg-paral.jpg) no-repeat center; /*background-size:cover;*/  position:absolute; top:0; left:0; z-index:-2;}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*DOWNLOAD*/
#download{
	text-align:center;
	}
#download ul.download_buttons{
	list-style:none;
	margin:0 auto;
	padding:5px 0px 30px 0px;
	width:100%;
	}
#download .download_buttons li{
	display:inline-block;
	width:25%;
	margin:0 5px;
	}
#download .download_buttons li.little{
	display:inline-block;
	width:21%;
	margin:0 5px;
	}

#download .download_buttons li a{
	display:inline-block;
	}
#download .download_buttons li a img{
	width:100%;
	margin:auto;
	}
#download .download_buttons li.responsive-button2 { display:none !important;}
/*/////////////////////////////////////////////////////////////////////////////////////*/
/*VIDEO*/
#video {
	padding:50px 0px 70px;
	/*background: url(../images/video-bg.jpg) center top no-repeat;
	background-size:cover;*/
	position:relative;
	}
#video .video{
	width:95%;
	margin:auto;
	background: #b8cad7;
  background: -moz-linear-gradient(left top, #b8cad7, #4b657a);
  background: -webkit-linear-gradient(left top, #b8cad7, #4b657a);
  background: -webkit-gradient(linear, 0 0, 100% 100%, from(#b8cad7), to(#4b657a));
  background: -o-linear-gradient(left top, #b8cad7, #4b657a);
  background: linear-gradient(left top, #b8cad7, #4b657a);
	max-width:751px;
	padding:7px;
	border-radius:20px;
	box-shadow: 0px 2px 0px 3px #2b2136, inset 0px 2px 0px 0px #fff;
	}
#video .video video{
	border-radius:15px;
	width:100%;
	margin:auto;
	display:block;
	box-shadow: 0px 2px 0px 0px #fff;
	margin:0px 0px -1px -1px !important;
	border:1px solid #000 !important;
	}
#video .mask{
	position:absolute;
	bottom:0;
	height:auto;
	margin:auto;
	max-width:960px;
	width:100%;
	}
#video .character{
	position:absolute;
	bottom:-49px;
	right:-270px;
	}
#video .character img{
	width:90%;
	}
/*/////////////////////////////////////////////////////////////////////////////////////*/
/*THE GAME*/
#thegame {
	padding-bottom:20px;
	}
#thegame table {
	width:80%;
	margin:auto;
	padding:20px 0px;
	min-width:320px;
	}
#thegame p{
	text-align: justify;
	display:block;
	margin:auto;
	width:70%;
	}
#thegame h1{
	display:block;
	margin:auto;
	width:70%;
	font-family: 'curse_casual_jveregular';
	text-transform:uppercase;
	font-weight:100;
	letter-spacing:0.04em;
	font-size:30px;
	padding-bottom:10px;
	color:#9074c5;
	}
#thegame table img{
	width:100%;
	max-width:333px;
	margin:auto;
	}

#thegame table tr { display:table;}
#thegame table tr td { display:table-cell; width:50%;}
#thegame table tr.reverse {display:table; direction:rtl;}
#thegame table tr.reverse td {display:table-cell; width:50%; text-align:left;}
#thegame table tr.reverse td p { text-align:left;}


/*/////////////////////////////////////////////////////////////////////////////////////*/
/*CBA*/
#cba {
	background:url(../images/cba-bg.jpg) top center no-repeat;
	background-size:cover;
	padding:40px 0px;
	position:relative;
	}

.sy-slides-wrap img {
	margin:0px 0px -1px -1px !important;
	border:1px solid #000 !important;
	}


/*/////////////////////////////////////////////////////////////////////////////////////*/
/*COMMUNITY*/
.community-icons{
	list-style:none;
	padding: 0 0 10px 0;
	width:100%;
	margin:0 auto;
	}
.community-icons li{
	display:inline-block;
	width:24%;
	}
.community-icons li img{
	width:100%;
	max-width:210px;
	margin:auto;
	transition:all 200ms ease-in-out 0s;
	}
.community-icons li img:hover{
	 -ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
	}
.community-packs {
	padding:0;
	margin:0px auto 70px;
	list-style:none;
	width:95%;
	max-width:900px;
	text-align:center;
	}
.community-packs li{
	display:inline-block;
	width:29%;
	}
.community-packs li a img{
	margin:auto;
	width:95%;
	max-width:237px;
	}
.community-packs-rwd {
	padding:0;
	margin:10px auto 70px;
	list-style:none;
	width:100%;
	text-align:center;
	max-width:900px;
	display:none;
	}
.community-packs-rwd li{
	display:inline-block;
	width:32%;
	}
.community-packs-rwd li a img{
	margin:auto;
	width:95%;
	max-width:310px;
	}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*FOOTER*/
#footer {
	background:url(../images/footer-bg.jpg) top center no-repeat;
	background-size:cover;
	position:relative;
	color:#ccc;
	text-align:center;
	padding:50px 0px 30px;
	}
#footer h3 img{
	margin:auto;
	width:50%;
	max-width:178px;
	padding:10px 0px 30px;
	}
#footer ul{
	list-style:none;
	margin:0 auto;
	padding:0;
	width:90%;
	max-width:780px;
	}
#footer ul li {
	display:inline-block;
	width:19%;
	}
#footer ul li img{
	display:block;
	margin:auto;
	max-width:120px;
	}
#footer a{
	color:#ccc;
	text-decoration:none;
	padding:0px 5px;
	transition:all 200ms ease-in-out 0s;
	}
#footer a:hover{
	color:#fff;
	}

#footer p {
	padding:0 20px;}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*TERMS AND POLICY*/
body.terms{
	background:url(../images/bg-pattern.jpg);
	color:#666;
	}
#terms_and_policy .wrapper {
	background-color:#fff;
	padding:40px 50px;
	width:80%;
	margin:100px auto 50px;
	text-align:justify;
	}
#terms_and_policy h3{
	margin:20px 0px;
	color:#774f0d;
	}
#terms_and_policy h2 {
	color:#774f0d;
	}




/*/////////////////////////////////////////////////////////////////////////////////////*/
/*RESPONSIVE*/

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

	.community-packs { text-align:center; width:100%; max-width:inherit;}
	.community-packs li {width:32%;}
	.community-packs li a { display:block; margin:auto;}
}
@media screen and (max-width: 900px) {
	#thegame table { width:90%;}
}
@media screen and (max-width: 860px) {
	.characters .character img { width:85%;}
	#video .character img {width:80%;}
	#video .character { bottom:-43px;}
	.characters .one { left:-295px;}
	.characters .two { right:-475px;}
	#thegame p { width:90%;}
	#thegame h1 { width:90%;}
}
@media screen and (max-width: 800px) {
	#menubar { height:70px;}
	#menubar ul li { padding:15px 40px;}
	#header { padding-top:55px; height:460px;}
	#header h1 img { max-width:600px; padding-top:20px;}
	#video .character { right:-280px;}
	.community-icons { width:97%;}

}
@media screen and (max-width: 750px) {
	#menubar { height:60px;}
	#menubar ul li { padding:15px 35px;}
	#header h1 img { padding-top:10px;}
	#thegame table { width:85%; padding:0; margin-top:-20px;}
	.sy-slides-wrap { width:89% !important;}
	.sy-pager { margin:0 auto !important; padding:24px 0 6px !important;}
	.community-icons { text-align:center; width:100%; padding:15px 0px;}
	.community-packs li a img { width:100%;}
	#video .character { display:none;}
	#video .video { width:90%;}
	.characters .character img { width:75%;}
	.characters .two { right:-530px;}
	.characters .one { left:-270px;}
}
@media screen and (max-width: 710px) {
	#menubar { height:60px; position:relative;}
	#menubar ul li { padding:14px 30px;}
	#menubar ul li a { font-size:33px;}
	#header { margin-top:-60px; padding-top:45px; height:450px;}
	#header h3 { line-height:35px; font-size:40px;}
	#video { padding:45px 0 55px;}
	#video .character img { width:80%;}
	#thegame table { padding:15px 0px; width:100%; margin-top:-45px;}
	#thegame h1, #thegame p { width:75%;}
	#cba { padding:30px 0;}
	.sy-controls { display:none !important;}
	.sy-slides-wrap { width:95% !important;}
	.sy-pager { padding:25px 0 15px !important;}
	.community-icons { padding:0 0 10px;}
	.community-icons li img { width:100%;}
	#footer ul li img { max-width:110px;}
	#terms_and_policy .wrapper {margin:15px auto;}
}
@media screen and (max-width: 667px) {



	#header { height:420px;}


}
@media screen and (max-width: 646px) {
	.characters .character img { width:60%;}
	.characters .two { right:-600px;}
	.characters .one { left:-200px;}
	#menubar ul li { padding:14px 25px;}
	#menubar ul li a { font-size:30px;}
	#header { height:400px;}
	#video { padding:35px 0 50px;}
	#video .mask { display:none;}
	#thegame table { width:99%; padding:0px; margin:0;}
	#thegame table img { margin:auto; width:90%;}
	#thegame table tr td {padding:10px 0px;}
	#thegame table td p { line-height:22px;}
	#cba { padding:25px 0px;}
	.sy-pager { padding:18px 0 12px !important;}
	.sy-pager li { width:22px !important; height:22px !important;}
	#terms_and_policy .wrapper {margin:10px auto;}
	#footer ul li img { max-width:90px;}
	.title { max-width:240px; margin:-38px auto 0px; font-size:35px; height:70px; line-height:20px;}
	.title2 {margin:-50px auto -62px !important}
}
@media screen and (max-width: 580px) {
	.characters .character img { width:60%;}
	#header h1 img { max-width:550px;}
	#header { height:390px;}
	#footer ul { padding:10px 0px 0px; width:97%;}
	#footer ul li img { max-width:95px;}
	#footer h3 img { max-width:170px; padding:15px 0 25px;}
	.community-packs { margin:10px auto 55px;}
	#menubar ul li { padding:14px 20px;}
	#thegame h1, #thegame p { width:95%;}
	#thegame table { width:90%; margin:auto;}
	#thegame table img { width:100%;}
	.sy-list li { top:5px !important;}
	.community-icons { padding:0;}
}
@media screen and (max-width: 568px) {
	#header { height:375px;}
	#header h1 img { max-width:490px; padding-top:0px;}
	#header h3 { font-size:36px; line-height:31px;}
	#footer2 { padding:15px 0px;}
	#footer2 p { line-height:22px; font-size:13px;}


}
@media screen and (max-width: 530px) {
	#menubar { height:50px;}
	#menubar ul li { padding:10px 13px;}
	.characters .character img{ width:50%;}
	.characters .two { right:-620px;}
	.characters .one { left:-170px;}
	#header { height:340px;}
	.title { max-width:225px; font-size:32px; line-height:17px; height:60px;}
	#video { padding:20px 0 50px;}
	#video .video { border-radius:15px;}
	#video .video video { border-radius:10px;}
	#header h1 img { max-width:450px;}
	.community-packs-rwd { margin:0 auto 50px;}
	#footer ul li img { max-width:80px;}
	#footer h3 img { max-width:150px;}
	#terms_and_policy .wrapper {margin:0px auto; width:auto; padding:35px 45px;}
	body.terms { background:#fff;}
	#download .button{
	display:block;
	width:-moz-fit-content; width:-webkit-fit-content; width:-ms-fit-content;
	margin:30px auto;
	}
	#download .button img{
	display:block;
	margin:auto;
	max-width:300px;
	width:80%;

	}
}
@media screen and (max-width: 475px) {
	.menu_large { display:none;}
	#menubar ul.menu_short{ display:block;}
	.menu_short_display {position:absolute; top:-175px; background-color:#000; width:100%; box-shadow:inset 0px 0px 4px #000;}
	.menu_short_display li{ display:block; width:100%; padding:7px 0px;}
	.margened { margin-top:175px; transition:all 400ms ease-in-out 0s;}


	#menubar ul li { padding:7px;}
	#menubar { height:50px;}
	#header { height:320px;}
	.characters .two { right:-665px;}
	#header h3 { font-size:33px; line-height:30px; margin-top:-25px;}
}
@media screen and (max-width: 420px) {
	#header h1 img { max-width:400px;}
	#header { height:300px;}
	.characters .one { left:-155px; width:150%;}
	.title { max-width:202px; font-size:29px; line-height:12px; height:50px; margin-top:-31px;}

	#video { padding:20px 0 45px;}
	#thegame { padding-bottom:10px;}
	#thegame table { margin-top:-10px;}
	#thegame table img { width:100%;}
	#thegame h1 {font-size:28px; padding-bottom:5px;}

	#thegame table tr { display:table;}
#thegame table tr td { display:block; width:100%; text-align:center;}
#thegame table tr td p { text-align:center;}
#thegame table tr.reverse {display:table; direction:inherit;}
#thegame table tr.reverse td {display:block; width:100%; text-align:center;}
#thegame table tr.reverse td p { text-align:center;}
#thegame table img { width:60%;}



	#cba { padding:20px 0px 50px;}
	.sy-slides-wrap { width:97% !important;}
	.sy-slides-wrap img { border-radius:7px !important;}
	.sy-list { border-radius:10px !important;}
	.sy-list li { top:6px !important; width:97% !important;}
	.sy-pager { display:none !important;}
	.community-icons { padding:0px; margin-top:-10px;}
	.community-icons li { width:37%;}
	.community-icons li img { width:98%;}
	.community-packs { margin:0 auto 20px;}
	.community-packs li { width:45%;}
	#footer ul { padding:5px 0px 0px;}
	#footer ul li img { max-width:65px;}
	.title2 { margin:0 auto -47px !important;}
	#footer h3 img { padding:10px 0px 20px;}
}
@media screen and (max-width: 400px) {
	.sy-slides-wrap { padding:0 !important;}
	.row-img { display:none;}
	#thegame h1, #thegame p { width:85%;}
	#thegame table tr td.row-last { border-bottom:none; padding-bottom:0px;}
	#download .button{
	display:block;
	width:-moz-fit-content; width:-webkit-fit-content; width:-ms-fit-content;
	margin:20px auto;
	}
	#download .button img{
	display:block;
	margin:auto;
	max-width:300px;
	width:70%;
}
@media screen and (max-width: 375px) {
	.characters .one { width:166%;}
	#thegame table tr td { padding:0;}
	#footer ul li { width:25%;}
	#footer ul li img { margin:5px; max-width:75px;}
	#footer ul li a { display:block;}

}
@media screen and (max-width: 345px) {
	#menubar { height:45px;}
	#header { height:250px;}
	#header h3 { font-size:30px; line-height:27px;}
	.characters .character img { width:30%;}
	.characters .two { right:-758px;}
	.characters .one { width:185%; left:-92px;}
	.title { max-width:175px; font-size:25px; line-height:3px; height:39px;}
	#thegame table td p, #thegame table td h1 { width:100%;}
	#footer ul li img { max-width:65px;}
}
@media screen and (max-width: 320px) {
	.characters .one { width:198%; left:-92px;}

}