@charset "utf-8";
/* CSS Document */
header{z-index:999;position:relative}
body#world{background:url(../img/world/bg.jpg) cetner top no-repeat;font-family: "angie-sans",sans-serif;}
body#world .hero{background:url(../img/world/bg.jpg) center top no-repeat;background-size:100% auto;z-index:10}
.hero div.page-title{width:100%;text-align:center;position:absolute;top:5%;left:0}
.hero div.page-title img{max-width:1200px;width:65%;height:auto}
.hero #game-title{width:25%;position:absolute;top:10%;right:10%}
.hero #game-title img{width:100%;height:auto}
body#world .hero .world-nav img{width:100%;height:auto}
#city-menu{position:absolute;width:100%;height:100%;top:0;left:0}
#city-menu .city-link{position:absolute;top:0;left:0;width:15%;padding:5px;background:rgba(0,0,0,0.5);box-shadow:10px 15px 10px 5px rgba(0,0,0,0.25), inset 0 0 20px 5px rgba(0,0,0,0.75);color:#FFF;border:2px solid #FFF;font-size:24px;text-shadow:2px -2px 4px #000, -2px 2px 4px #000,2px 2px 4px #000,-2px -2px 4px #000}
.city-link#link-vainqueur{top:24%;left:31%}
.city-link#link-alistel{top:35%;left:42%}
.city-link#link-granorg{top:48%;left:25%}
.city-link#link-cygnus{top:74%;left:31%}
.city-link#link-celestia{top:51%;left:55%}
.city-link#link-forgia{top:70%;left:57%}
#world-bg{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:1}
#world-bg img{position:absolute;top:0;left:50%;transform:translate(-50%,0);width:100%;height:auto}
#world-bg #vainqueur-bg{z-index:5}
#world-bg #alistel-bg{z-index:4}
#world-bg #granorg-bg{z-index:3}
#world-cities{position:relative;z-index:99}
.city-info{position:relative}
.city-wrapper{display:table;position:relative;width:75%;margin:0 auto;padding:15% 0}
.city-wrapper div{width:50%;position:relative;display:table-cell;vertical-align:middle}
.city-wrapper div.col-left{height:100%;}
.city-wrapper div img{width:100%;height:auto;position:relative;}
.city-wrapper div.info-text,.city div.col-right div.info-text{width:100%;padding:25px;background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);background-size:20% auto,100% auto;box-shadow:10px 15px 10px 5px rgba(0,0,0,0.25), inset 0 0 20px 5px rgba(0,0,0,0.75);color:#FFF;border:2px solid #FFF;font-size:24px;text-shadow:2px -2px 4px #000, -2px 2px 4px #000,2px 2px 4px #000,-2px -2px 4px #000}
#world-cities #other-cities{background:url(../img/world/bg_01.png) center top no-repeat,url(../img/common/bg_pattern.jpg) center top repeat-y;background-size:cover,100% auto}
.city{display:table;position:relative;width:75%;margin:0 auto;}
.city .city-header{width:100%;text-align:center;display:table;margin:0 auto;padding:40px 0 20px}
.city .city-header img{width:50%;height:auto;}
.city div.col-left,.city div.col-right{width:47%;float:left;}
.city div.col-left{text-align:center}
.city div.col-left img{margin:20px auto}
footer{position:relative;display:block;z-index:999;font-family:Arial,Helvetica,sans-serif;}
img{vertical-align:middle}

/* Misc styles */
.fade-yel-center{position:relative;content:' ';height:1px;line-height:1px;margin:0;background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0));z-index:9999;}
.fade-yel{margin:0;position:relative;height:4px;padding-top:1px;background-image: linear-gradient(to right, rgba(190,170,101,0), rgba(190,170,101,1), rgba(190,170,101,0));}
.divider{width:100%;text-align:center;margin:40px auto}
.divider img{width:90%;height:auto}

@media (max-width:1280px){
	#world-bg img{height:100%;width:auto}
	#social{width:20%}
	#social img{width:90%}
	#console{width:20%}
	#console img{width:100%;height:auto}
	.city div.col-left img{width:90%;height:auto}
}

@media screen and (orientation: landscape) and (max-device-width: 1366px) {
		#world-bg img{height:100%;width:100%}
}
@media (max-width:1000px){
	.city-wrapper{display:block;}
	.city-wrapper div{width:100%;display:block}
	.city{display:block}
	.city .city-header img{display:inherit;width:80%;height:auto;margin:40px auto}
	.city div.col-left{width:100%;text-align:center;float:none}
	.city div.col-left img{width:45%;display:inline-block;}
	.city div.col-right{width:90%;margin:25px auto;float:none}
	#city-menu .city-link{padding:2px;}
	.city-link#link-alistel{top:38%;}
}
@media screen and (max-width: 768px) {
		.city-wrapper div.info-text, .city div.col-right div.info-text {font-size: 20px;}
	#city-menu .city-link{padding: 0px;font-size: 12px;}
	
}
@media (max-width:767px){
	.city .city-header img{display:inherit;width:100%;height:auto;margin:10px auto}
	.city div.col-left img{width: 90%;margin: 0 auto;}
}
@media screen and (max-width: 414px) {
		.city-wrapper div.info-text, .city div.col-right div.info-text {font-size: 16px;}
}
@media screen and (max-width: 320px) {
		.city-wrapper div.info-text, .city div.col-right div.info-text {font-size: 12px;}
}