@font-face { font-family: ROBO; src: url('roboto-regular-webfont.woff');}
@font-face { font-family: ROBO-C; src: url('robotocondensed-regular-webfont.woff');}
@font-face { font-family: CORM; src: url('CormorantGaramond-Regular.woff');}
@font-face { font-family: CORM-B; src: url('CormorantGaramond-Bold.woff');}
@font-face { font-family: TRAJ; src: url('trajanpro3-regular.woff');}
@font-face { font-family: TRAJ-B; src: url('trajanpro3-bold.woff');}

html, body {
    margin: 0;
	min-height: 100%;
	color: #fff;
	font-family: ROBO;
	background: rgba(0,0,0,1);
	text-decoration: none;
	overflow-x: hidden;
}

div{
	box-sizing: border-box;
	-webkit-user-select: none;  /* Chrome all / Safari all */
  	-moz-user-select: none;     /* Firefox all */
  	-ms-user-select: none;      /* IE 10+ */
  	user-select: none;          /* Likely future */     
}

#embers{
	z-index: 100;
	position: absolute;
}

.auto-resizable-iframe {
  max-width: 810px;
  margin: 0px auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 60%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.material-icons {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga" 1;
}

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}

.grayscale{
	 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */	
}

.h-line{
	height: 1px;
	min-height: 1px;
	width: 100%;
	
	margin-left: auto ;
	margin-right: auto ;
	background-color: rgba(63,61,57,1);
	margin-top: 10px;
	margin-bottom: 10px;
}


.wrapReady {
	float: left;
	padding-right: 150px;
}



.twa-logo img{
	pointer-events: auto;
	cursor: pointer;
	min-width: 175px;
	min-height: 80px;
	max-width: 175px;
	max-height: 80px;
	/*background: #181818;*/
	/*-ms-transform: rotate(45deg); *//* IE 9 */
    /*-webkit-transform: rotate(45deg);*/ /* Chrome, Safari, Opera */
   /* transform: rotate(45deg);*/
	
	/*-webkit-filter: drop-shadow(5px 5px 5px #000);
	filter: drop-shadow(5px 5px 5px #000);
	-webkit-backface-visibility: hidden;*/
}

.button-container{
	width: 100%;
}

.button-general a:link, .button-general a:hover, .button-general a:visited, .button-general a:active{
	background-color: rgba(245,183,124,1); 
	font-size: 18px;
	font-family: TRAJ;
	border: none;
    border-radius: 3px;
    color: #302d2a;
    padding: 13px 20px 9px;
	pointer-events: auto;
	text-decoration: none;
	transition: .2s ease background;
	-moz-box-shadow: 0px 4px 6.23px 0.77px rgba(0, 0, 0, 0.77);
	-webkit-box-shadow: 0px 4px 6.23px 0.77px rgba(0, 0, 0, 0.77);
	box-shadow: 0px 4px 6.23px 0.77px rgba(0, 0, 0, 0.77);
}

.button-general a:hover{
	background-color: rgba(251,203,157,1); 
	transition: .2s ease background;
}


.close-button{
	background-color: rgba(245,183,124,1); 
	font-size: 18px;
	font-family: TRAJ;
	border: none;
    border-radius: 3px;
    color: #302d2a;
    padding: 13px 20px 9px;
	pointer-events: auto;
	cursor: pointer;
	text-decoration: none;
	transition: .2s ease background;
	-moz-box-shadow: 0px 4px 6.23px 0.77px rgba(0, 0, 0, 0.77);
	-webkit-box-shadow: 0px 4px 6.23px 0.77px rgba(0, 0, 0, 0.77);
	box-shadow: 0px 4px 6.23px 0.77px rgba(0, 0, 0, 0.77);
}

.close-button:hover{
	background-color: rgba(251,203,157,1); 
	font-size: 18px;
	font-family: TRAJ;
	border: none;
    border-radius: 3px;
    color: #302d2a;
    padding: 13px 20px 9px;
	pointer-events: auto;
	cursor: pointer;
	text-decoration: none;
	transition: .2s ease background;
}

.close-button-content{
	
	
}

.close-button-container{
	position: absolute;
    width: 100%;
    margin-left: -80px;
    margin-top: -55px;
}

.nav{
	position: relative;
	margin-left: 50px;
	min-width: 642px;
}

.nav-container{
	position: absolute;
	width: 100%;
	height: 100%;
	/*background-color: rgba(0,0,0,.6);*/ /* For browsers that do not support gradients */
    /*background-color: -webkit-linear-gradient(rgba(30,30,30,1), rgba(71,71,71,1));*/ /* For Safari 5.1 to 6.0 */
   /* background-color: -o-linear-gradient(rgba(30,30,30,1), rgba(71,71,71,1)); *//* For Opera 11.1 to 12.0 */
    /*background-color: -moz-linear-gradient(rgba(30,30,30,1), rgba(71,71,71,1));*/ /* For Firefox 3.6 to 15 */
   /* background-color: linear-gradient(rgba(30,30,30,1), rgba(71,71,71,1)); *//* Standard syntax */
	z-index: 250;
	/*overflow: hidden;*/
	pointer-events:none;
	/*-moz-box-shadow:    0px 0px 12px 3px rgba(0,0,0,1);
	-webkit-box-shadow: 0px 0px 12px 3px rgba(0,0,0,1);
	box-shadow:         0px 0px 12px 3px rgba(0,0,0,1);
	background: url(../img/nav_bg.png);
	background-repeat: repeat-x;
	background-position: bottom;*/
}

.nav-content{
	position: relative;
	width: 100%;
	/*max-width: 1920px;*/
	/*margin-left: auto;
	margin-right: auto;*/
	height: 65px;
	background-color: rgba(0,0,0,.8);
}

.nav-gutter-left{
	width: 45%;
	background: #181818;
}

.nav-gutter-right{
	width: 45%;
	background: rgba(50,50,50,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(30,30,30,1), rgba(71,71,71,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(30,30,30,1), rgba(71,71,71,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(30,30,30,1), rgba(71,71,71,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(30,30,30,1), rgba(71,71,71,1)); /* Standard syntax */
}

.nav-shadow{
	top: 55px;
	position: absolute;
	width: 100%;
	height: 100px;
	background: rgba(0,0,0,0); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); /* Standard syntax */
	z-index: 24;
	opacity: 0;
}


.nav-button{
	font-size: 18px;
	font-family: TRAJ;
	color: #fff;
	font-weight: normal;
	pointer-events: auto;
	text-decoration: none;
	padding: 3px 10px 0px 10px;
	cursor: pointer;	
}

.nav-button a:link, .footer-links a:hover, .footer-links a:visited, .footer-links a:active{
	font-size: 18px;
	font-family: TRAJ;
	color: #fff;
	pointer-events: auto;
	text-decoration: none;
	
}

.nav-button-on{
	color: rgba(245,183,124,1);
	font-weight: bold;
}

.nav-highlight{
	position: absolute;
	background-color: rgba(0,0,0,.25);
	border-top: 2px solid rgba(20,20,20,1);
	border-left: 2px solid rgba(20,20,20,1);
	border-right: 2px solid rgba(140,140,140,1);
	border-bottom: 2px solid rgba(140,140,140,1);
	z-index: -1;
	pointer-events: none;
}

.nav-arrows{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 260;
	padding: 0 1%;
}

.left-nav-arrow{
	position: relative;
	text-shadow: 2px 2px 5px #000000;
	pointer-events: auto;
	cursor: pointer;
	left: 0px;
	background-color: rgba(0,0,0,.8);
	border-radius: 50%;
}

.right-nav-arrow{
	position: relative;
	text-shadow: 2px 2px 5px #000000;
	pointer-events: auto;
	cursor: pointer;
	right: 0px;
	background-color: rgba(0,0,0,.8);
	border-radius: 50%;
}

.left-nav-arrow i, .right-nav-arrow i{
	color: rgba(245,183,124,1);
    font-size: 5em;
	
}

.arrow-container{
	height: 100%;
}

.mobile-menu-button {  
	position: relative;
	width: 100%;
    padding-right: 10px;
	right: 0px;
	height: 55px;
	
}

.mobile-menu-button i{
	color: #fff;
    font-size: 2.5em;
	pointer-events: auto;
	cursor: pointer;
}

.mobile-menu-button:focus {
    outline:0 !important;
}


.mobile-nav{
    position:absolute;
    background-color: rgba(100,100,100,1);
    top: 65px;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 30px;
    padding-bottom: 30px;
    z-index: 10;
    opacity: 0;
	-moz-box-shadow: 0px 6px 8px 0px rgba(0,0,0,.75),  inset 1px 10px 6px -6px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0px 6px 8px 0px rgba(0,0,0,.75),  inset 1px 10px 6px -6px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 6px 8px 0px rgba(0,0,0,.75), inset 1px 10px 6px -6px rgba(0, 0, 0, 0.75);
	
}

.content-container{
	position: relative;
	/*min-height: 100%;*/
	background-color: #292929;
	width: 100%;
	height: 100%;
	max-height: 1300px;
	/*max-width: 1920px;*/
	overflow-x: hidden;
	overflow-y: hidden;
	margin-left: auto ;
	margin-right: auto ;
	/*overflow: hidden;
	-webkit-backface-visibility: ;*/ 
}



.video-file{
	width: 100%;
	height: 100%;
}



.slide{
	position: absolute;
    top: 0px;
    width: 100%;
    /* max-width: 1920px; */
    height: 100%;
    /* max-height: 1300px; */
    overflow-x: hidden;
    overflow-y: hidden;
    margin-left: auto;
    margin-right: auto;
    z-index: 200;
	-webkit-overflow-scrolling:touch;
}



/*
.slide.ng-enter,
.slide.ng-leave {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.slide.ng-enter {
    left: 100%;
}
.slide.ng-enter-active {
    left: 0;
}
.slide.ng-leave {
    left: 0;
}
.slide.ng-leave-active {
    left: -100%;
}


.animate-back .slide.ng-enter {
  top: 50%%;
}

.animate-back .slide.ng-enter-active {
   top: 50%;
}

.animate-back .slide.ng-leave-active {
  top: 50%;
}
*/

.beta-register{
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 20px;
	background-color: rgba(0,0,0,.7);	
	border-style: solid;
    border-width: 20px;
	-webkit-border-image: url(../img/header-border.png) 40 stretch; /* Safari 3.1-5 */
    -o-border-image: url(../img/header-border.png) 40 stretch; /* Opera 11-12.1 */
    border-image: url(../img/header-border.png) 40 stretch;
}

.beta-register-text{
	font-size: 20px;
	text-align: center;
}

.beta-register-form{
	padding-top: 20px;
}

.subscribe-input{
	width: 300px;
	padding: 10px 0px;
}

.subscribe-button{
	width: 100%;
	margin-top: 20px;
	text-align: center;
	font-family: TRAJ;
	color: #302d2a;
}

.subscribe-button a:link, a:hover, a:visited, a:active{
	text-decoration: none;
	font-family: TRAJ;
	color: #302d2a;
	
}

.subscribe-result{
	padding-top: 20px;
	width: 100%;
    font-size: 20px;
    text-align: center;
	color: rgba(245,183,124,1); 
}

.page-content{
	position: absolute;
    top: 65px;
    width: 100vw;
    /* margin-top: -117px; */
    min-height: calc(100% - 65px);
}


.article-content{
	position: relative;
    /*margin-top: 140px;*/
    width: 100%;
	padding: 30px 30px;
}

.home-content{
	position: relative;
    /*margin-top: 140px;*/
    /*padding-left: 18px;*/
    width: 55%;
	height: 100%;
    left: 0%;
}

.page-content-container{
	position: relative;
    width: 100%;
    /* top: 55px; */
    min-height: 100%;
    overflow: hidden;
    /* padding-bottom: 55px; */
	/*-webkit-overflow-scrolling:touch;*/
}

.page-content-container-sub{
	position: absolute;
	width: 100%;
	top: 65px;
	height: 100%;
	padding-bottom: 55px;
	background-color: rgba(0,0,0,1);
	background: url(../img/background_subpages.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	/*-webkit-overflow-scrolling:touch;*/
}

.page-content-outer{
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
	/*-webkit-overflow-scrolling:touch;*/
}

.page-content-inner{
	box-sizing: border-box;
    position: absolute;
    min-width: calc(100% + 21px);
    height: 100%;
    /* height: calc(100% - 140px); */
    overflow-y: scroll;
	overflow-x: hidden;
    /* -webkit-overflow-scrolling: touch; */
    /* left: 21px; */
    /* padding-right: 2px; */
    /* top: 140px; */
    left: 0px;
    
}

.page-content-outer-sub{
	position: relative;
	height: 100%;
	width: 100%;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	/*-webkit-overflow-scrolling:touch;*/
}

.page-content-home{
	box-sizing: border-box;
	position: relative;
	width: calc(100% + 21px);
	height: calc(100% - 180px);
	/*background: url(../img/fg_object_1.png);
	background-repeat: no-repeat;
	background-size: contain;
    background-position: left bottom;*/
	overflow-y: scroll;
	/*-webkit-overflow-scrolling:touch;*/
	/*left: 18px;*/
	top: 180px;
}

.page-content-about{
	box-sizing: border-box;
	position: relative;
	width: calc(100% + 18px);
	height: calc(100% - 140px);
	/*background: url(../img/fg_object_2.png);
	background-repeat: no-repeat;
	background-size: contain;
    background-position: left bottom;*/
	overflow-y: scroll;
	-webkit-overflow-scrolling:touch;
	/*left: 18px*/;
	top: 140px;
    
}


.page-content-units{
	
	box-sizing: border-box;
	position: relative;
	width: calc(100% + 18px);
	height: calc(100% - 140px);
	/*background: url(../img/fg_object_4.png);
	background-repeat: no-repeat;
	background-size: contain;
    background-position: left bottom;*/
	overflow-y: scroll;
	-webkit-overflow-scrolling:touch;
	/*left: 18px;*/
	top: 140px;
   
	
}

.page-content-factions{
	box-sizing: border-box;
	position: relative;
	width: calc(100% + 18px);
	height: calc(100% - 140px);
	/*background: url(../img/fg_object_4.png);
	background-repeat: no-repeat;
	background-size: contain;
    background-position: left bottom;*/
	overflow-y: scroll;
	-webkit-overflow-scrolling:touch;
	/*left: 18px;*/
	top: 140px;
    
}

.page-content-commanders{
	box-sizing: border-box;
	position: relative;
	width: calc(100% + 21px);
	height: 100%;
	/*height: calc(100% - 140px);*/
	/*background: url(../img/fg_object_5.png);
	background-repeat: no-repeat;
	background-size: contain;
    background-position: left bottom;*/
	overflow-y: scroll;
	/*-webkit-overflow-scrolling:touch;*/
	/*left: 18px;*/
	/*top: 140px;*/
    
}

.page-info-commanders, .page-info-maps-units{
	box-sizing: border-box;
   /* padding: 20px;*/
    position: relative;
    width: 100%;
	pointer-events: none;
    /*display: none;*/
    /* margin-top: -23%; */
    min-height: calc(100vh - 65px);
    z-index: 300;
    /*min-height: calc(100% - 65px);*/
    background-color: rgba(0,0,0,0);
    
}

.page-info-home{
	box-sizing: border-box;
    /* padding: 20px; */
    position: relative;
    width: 100%;
    pointer-events: none;
    /* display: none; */
    /* margin-top: -23%; */
    min-height: calc(100vh - 65px);
    z-index: 300;
    /* min-height: calc(100% - 65px); */
    background-color: rgba(0,0,0,0);
}


.page-content-maps{
	box-sizing: border-box;
	position: relative;
	width: calc(100% + 18px);
	height: calc(100% - 140px);
	/*background: url(../img/fg_object_6.png);
	background-repeat: no-repeat;
	background-size: contain;
    background-position: left bottom;*/
	overflow-y: scroll;
	/*-webkit-overflow-scrolling:touch;*/
	/*left: 18px;*/
	top: 180px;
    
}

.page-content-survey{
	box-sizing: border-box;
	position: relative;
	width: calc(100% + 36px);
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	left: -18px;
	/*padding-left: 20px;*/
	-webkit-overflow-scrolling:touch;
}

.page-content-survey iframe{
	width: 100vw;
    height: 100%;
    left: 18px;
    position: relative;
	-webkit-overflow-scrolling:touch;
}

.page-content-news{
	box-sizing: border-box;
	position: relative;
	width: calc(100% + 18px);
	height: calc(100% - 10px);
	overflow-y: scroll;
	background-color: rgba(36,36,36,1);
	-webkit-overflow-scrolling:touch;
	/*left: 18px;*/    
}

.page-content-article{
	box-sizing: border-box;
	position: relative;
	width: calc(100% + 18px);
	height: calc(100% - 10px);
	overflow-y: scroll;
	background-color: rgba(36,36,36,1);
	-webkit-overflow-scrolling:touch;
	/*left: 18px;*/ 
	top: 400px;
}

.sg-body {
	width: calc(100% - 18px);
}

.page-title{
	width: 100vw;
	left: 0px;
	margin-top: 65px;
	position: relative;
	text-align: center;
	font-size: 64px;
	pointer-events: none;
	font-family: TRAJ;
	color: #fff;
	text-shadow: 2px 2px 5px #000000;
	padding: 20px 0;
	z-index: 5;
}

.page-sub-title{
	width: 100%;
	left: 0px;
	position: relative;
	font-size: 32px;
	font-family: TRAJ;
	color: #fff;
	text-shadow: 2px 2px 5px #000000;
	z-index: 1;
	/*margin-bottom: -8px;*/
}

.home-sub-title{
	position: relative;
	font-size: 32px;
	font-family: TRAJ;
	font-weight: bold;
	color: #fff;
	text-shadow: 2px 2px 5px #000000;
	z-index: 1;
	text-align: center;
	/*margin-bottom: -8px;*/
}

.faction-visual{
	box-sizing: content-box;
	padding: 0px 20px 0px 20px;
	width: 100%; 
	max-width: 810px;
	height: 100%;
	max-height: 455px;
	pointer-events: none;
	margin-left: auto;
	margin-right: auto;
	border-top: 0px;
	border-bottom: 0px;
	border-right: 1px solid rgba(255,255,255,1);
	/*border-left: 1px solid rgba(255,255,255,1);*/
}

.faction-visual img{
	height: 100%;
	width: 100%;
}

.map-visual, .unit-visual{
	border-top: 0px;
	border-bottom: 0px;
	border-right: 0px;
}

.faction-text{
	width: 100%;
}

.commanders-list{
	width: 100%;
}


.faction-info{
	padding: 20px;
	width: 33%;
}

.map-info, .unit-info{
	width: 50%;
}

.unit-info-4col{
	width: 25%
}

.unit-visual-4col{
	width: 100%
}
.unit-visual-4col-noBar{
	width: 100%;
	border-top: 0px;
	border-bottom: 0px;
	border-right: 0px;
}

.faction-secondary-info{
	padding: 20px;
	width: 33%;
}

.order{
	padding-top: 10px;
}

.order-content{
	padding-left: 20px;
	width: 100%;
}

.order-title{
	font-size: 24px;
	font-family: TRAJ;
	color: #fff;
	text-shadow: 2px 2px 5px #000000;
}

.content-item-title{
	position: absolute;
    text-align: center;
    font-size: 20px;
    font-family: TRAJ;
    color: #fff;
    text-shadow: 2px 2px 5px #000000;
    background-color: rgba(0,0,0,.6);
    margin-top: 2px;
    margin-left: 2px;
    padding: 5px;
}

.commander{
	padding: 10px;
}

.commander-name{
	font-size: 18px;
	font-family: TRAJ;
	color: #fff;
	text-shadow: 2px 2px 5px #000000;
	padding-right: 12px;
}

.home-info{
	width: 100%;
}

.home-video{
	position: relative;
    width: 100%;
	height: 100%;
}

.home-video img{
	width: 100%;
	height: 100%;
}

.container-header{
	position: relative;
	width: 100%;
	border-style: solid;
    border-width: 20px;
	-webkit-border-image: url(../img/header-border.png) 40 stretch; /* Safari 3.1-5 */
    -o-border-image: url(../img/header-border.png) 40 stretch; /* Opera 11-12.1 */
    border-image: url(../img/header-border.png) 40 stretch;
	border-top: 0px;
}

.text-link-header{
	white-space: nowrap;
}

.page-title-home{
	width: 100vw;
	left: 0px;
	margin-top: 120px;
	position: relative;
	text-align: center;
	font-size: 76px;
	pointer-events: none;
	font-family: TRAJ;
	color: #fff;
	text-shadow: 2px 2px 5px #000000;
	padding: 20px 0;
	z-index: 5;
}

.page-image{
	position: relative;
	display: block;
}

.page-images-flags{
	width: 100%;
    height: 100%;
    max-height: 1300px;
}

.page-images-commanders{
	width: 100%;
    height: 100%;
    max-height: 1300px;
	position: absolute;
	pointer-events: none;
	top: 0px;
}

.page-images-flags-mob{
	width: 100%;
    padding-top: 100px;
}

.page-images-commanders-mob{
	width: 100%;
   padding-top: 100px;
}


.page-images-maps-bg{
	width: 100%;
    height: 100%;
    max-height: 1300px;
	position: absolute;
	pointer-events: none;
	top: 0px;
}

.page-images-maps{
	width: 66%;
	height: 100%;
    max-height: 1300px;
	position: relative;
	pointer-events: none;
	top: 0px;
	right: 0px;
	margin-left: 33%;
}

.page-images-maps-thumbs{
	padding-top: 150px;
    width: 66%;
    margin-left: 33%;
}

.page-images-units-thumbs{
	padding-top: 100px;
    width: 66%;
    margin-left: 33%;
}

.maps-bg-image{
	position: absolute;
	height: 100%;
	width: auto;
	max-height: 1300px;
	top: 100px;
    left: 0px;
}

.maps-bg-image img{
	width: auto;
	height: 100%;
	transform-origin: 0% 0%;
}

.map-item-thumb{
	height: 318px;
    width: 342px;
    max-height: 318px;
    max-width: 342px;
    margin: 0px 5px;
    pointer-events: auto;
    
    cursor: pointer;
    /* border: 1px solid; */
}

.map-item-thumb img{
	width: 100%;
	height: 100%;
	transform-origin: center top;
	
}

.thumb-hadrian{
	background: url(../img/thumb_maps_hadrianswall.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

.thumb-capitol{
	background: url(../img/thumb_maps_capitolinehill.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

.thumb-alpis{
	background: url(../img/thumb_maps_alpisgraia.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

.thumb-melee{
	background: url(../img/thumb_units_melee.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

.thumb-ranged{
	background: url(../img/thumb_units_rangedartillery.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

.thumb-cavalry{
	background: url(../img/thumb_units_cavalrywardogs.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}



.flag-barbarian{
	position: absolute;
	height: 100%;
	width: auto;
	max-height: 1300px;
	top: 0;
    left: 0px;
}

.flag-barbarian img{
	width: auto;
	height: 100%;
	transform-origin: left top;
}

.flag-roman{
	position: absolute;
	height: 100%;
	width: auto;
	max-height: 1300px;
    top: 0;
    left: calc(50% - 80px);
}

.flag-roman img{
	width: auto;
	height: 100%;
	transform-origin: center top;
}

.flag-greek{
	position: absolute;
	height: 100%;
	width: auto;
	max-height: 1300px;
    top: 0;
    right: 0px;
}

.flag-greek img{
	width: auto;
	height: 100%;
	transform-origin: right top;
}

.flag-barbarian-mob{
	max-height: 159px;
	max-width: 171px;
    padding: 0px 5px;
	pointer-events: auto;
	cursor: pointer;
}

.flag-barbarian-mob img{
	width: 100%;
	height: 100%;
	transform-origin: left top;
}

.flag-roman-mob{
	max-height: 159px;
	max-width: 171px;
    padding: 0px 5px;
	pointer-events: auto;
	cursor: pointer;
}

.flag-roman-mob img{
	width: 100%;
	height: 100%;
	transform-origin: center top;
}

.flag-greek-mob{
	max-height: 159px;
	max-width: 171px;
    padding: 0px 5px;
	pointer-events: auto;
	cursor: pointer;
}

.flag-greek-mob img{
	width: 100%;
	height: 100%;
	transform-origin: right top;
}

.commander-barbarian{
	position: absolute;
    height: 64%;
    max-height: 793px;
   /* width: auto;*/
    /* max-height: 1300px; */
    bottom: 0;
    left: 0px;
	-ms-transform: rotate(-14deg); /* IE 9 */
    -webkit-transform: rotate(-14deg); /* Chrome, Safari, Opera */
    transform: rotate(-14deg);
}

.commander-barbarian img{
	width: auto;
	height: 100%;
	transform-origin: 0% 0%;
}

.commander-roman{
	position: absolute;
    height: 89%;
   /* width: auto;*/
    max-height: 1053px;
    bottom: 0;
    left: calc(50% - 478px);
}

.commander-roman img{
	width: auto;
	height: 100%;
	transform-origin: 50% 0%;
}

.commander-greek{
	position: absolute;
    height: 77%;
    /*width: auto;*/
    max-height: 911px;
    bottom: 0;
    right: 0px;
}

.commander-greek img{
	width: auto;
	height: 100%;
	transform-origin: 100% 0%;
}

.commander-barbarian-mob{
	max-height: 159px;
	max-width: 190px;
	padding: 0px 5px;
	cursor: pointer;
}

.commander-barbarian-mob img{
	width: 100%;
	height: 100%;
	transform-origin: left top;
}

.commander-roman-mob{
	max-height: 159px;
	max-width: 190px;
	padding: 0px 5px;
	cursor: pointer;
}

.commander-roman-mob img{
	width: 100%;
	height: 100%;
	transform-origin: center top;
}

.commander-greek-mob{
	max-height: 159px;
	max-width: 190px;
	padding: 0px 5px;
	cursor: pointer;
}

.commander-greek-mob img{
	width: 100%;
	height: 100%;
	transform-origin: top right;
}

.content-plus-link{
	width: 90px;
	height: 90px;
	background: rgba(0,0,0,.8);
	border-radius: 50%;
	pointer-events: auto;
	cursor: pointer;
	backface-visibility: hidden;
	position: absolute;
}

.content-plus-link-maps{
	width: 90px;
	height: 90px;
	background: rgba(0,0,0,.8);
	border-radius: 50%;
	pointer-events: auto;
	cursor: pointer;
	backface-visibility: hidden;
	position: relative;
	margin-top: calc(-50% - 45px);
    margin-left: calc(50% - 45px);
}

.content-plus-link-plus{
	position: relative;
    pointer-events: none;
   	min-width: 30px;
	max-width: 30px;
	min-height: 30px;
	max-height: 30px;
	margin-left: 30px;
}

.content-plus-link-text{
	position: relative;
    min-width: 255px;
    background: rgba(0,0,0,.5);
    pointer-events: none;
    font-size: 36px;
    font-family: TRAJ;
    color: #f5b77c;
    width: 200px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    -webkit-font-smoothing: antialiased;
    margin-left: 13px;
    margin-top: 2px;
    padding-top: 8px;
    line-height: 53px;
   
}

.content-link-mob{
	position: relative;
    margin-top: -30%;
}

.content-link-maps{
	position: relative;
    margin-top: calc(50% - 45px);
    margin-left: calc(50% - 45px);
}

.link-barbarian{
	position: relative;
    top: -81%;
    left: 40%;
}

.link-roman{
	position: relative;
    top: -83%;
    left: 37%;
}

.link-greek{
	position: relative;
    top: -90%;
    left: 34%;
}

.link-boudica{
	position: relative;
    top: -83%;
    left: 29%;
	transform: rotate(14deg);
}

.link-germanicus{
	position: relative;
    top: -61%;
    left: 46%;
}

.link-leonidas{
	position: relative;
    top: -68%;
    left: 53%;
}

.content-barbarian, .content-roman, .content-greek, .content-boudica, .content-germanicus, .content-leonidas, .content-hadrian, .content-capitol, .content-alpis, .content-melee, .content-ranged, .content-cavalry{
	pointer-events: auto;
	padding: 20px 80px;
	background: -webkit-linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,1));
    background: -o-linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,1));
    background: -moz-linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,1));
    background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,1));
/*	background-color: rgba(0,0,0,.5);*/
	/*display: none;	*/	
}

.content-home{
	margin-top: 150px;
	pointer-events: auto;
	padding: 20px 80px;
}

.content-roman{
	pointer-events: auto;
	/*display: none;	*/	
}

.content-greek{
	pointer-events: auto;
	/*display: none;	*/	
}

.content-boudica{
	pointer-events: auto;
	/*display: none;	*/	
}

.content-germanicus{
	pointer-events: auto;
	/*display: none;	*/	
}

.content-leonidas{
	pointer-events: auto;
	/*display: none;	*/
}

.page-image-home1{
	position: absolute;
	/*display: block;*/
	width: 40%;
	min-width: 768px;
	left: 0px;
	bottom: 0px;
	z-index: 0;
}

.page-image-home2{
	position: absolute;
	/*display: block;*/
	width: 35%;
	min-width: 672px;
	right: 0px;
	bottom: 0px;
	z-index: -1;
}

.page-image-home1 img, .page-image-home2 img{
	width: 100%;
}


.page-image-right{
	position: relative;
	right: 0px;
}

.page-image-container{
	
	position: absolute;
	width: 100%;
	/*bottom: 50px;*/
	left: 0px;
	height: 100%;
}


.page-images-container-home{
	position: absolute;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: calc(100% - 120px);
    max-height: calc(100% - 120px);
}

.page-images-container{
	position: absolute;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 65px);
    max-height: calc(100vh - 65px);
}

.page-images-container-mob{
	position: relative;
    left: 0;
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 65px);
	z-index: -1;
   /* max-height: calc(100vh - 65px);*/
	
}

.position-abs{
	position: absolute;
}

.page-image img{
	/*width: 100%;
	height: 100%;*/
	display: block;
}


.article-header{
	
	position: absolute;
	width: 100%;
	height: 100%;
	max-height: 400px;
	top: 0px;
	left: 0px;
	/*background: url(../img/news/gameBosses.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;*/
	z-index: 1;
}

.article-title{
	width: 100%;
    height: 100%;
    bottom: -20px;
    position: relative;
    font-size: 55px;
    font-family: TRAJ;
    color: #fff;
    text-shadow: 2px 2px 5px #000000;
    padding: 0px 25px 0px 10px;
    z-index: 5;
    background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(36,36,36,1));
    background: -o-linear-gradient(rgba(0,0,0,0), rgba(36,36,36,1));
    background: -moz-linear-gradient(rgba(0,0,0,0), rgba(36,36,36,1));
    background: linear-gradient(rgba(0,0,0,0), rgba(36,36,36,1));
    border-style: solid;
    border-width: 20px;
    -webkit-border-image: url(../img/header-border.png) 40 stretch;
    -o-border-image: url(../img/header-border.png) 40 stretch;
    border-image: url(../img/header-border.png) 40 stretch;
    border-top: 0px;
}

.page-text-main{
	border-style: solid;
    border-width: 20px;
	background-color: rgba(0,0,0,.6);
	position: relative;
	/*width: 95%;*/
	margin-bottom: 40px;
	/*margin-left: auto;
	margin-right: auto;*/
	-webkit-border-image: url(../img/text-main-border.png) 40 stretch; /* Safari 3.1-5 */
    -o-border-image: url(../img/text-main-border.png) 40 stretch; /* Opera 11-12.1 */
    border-image: url(../img/text-main-border.png) 40 stretch;
}


.text-link-header a:link, .text-link-header a:hover, .text-link-header a:visited, .text-link-header a:active{
	font-size: 14px;
	font-family: TRAJ;
	color: rgba(245,183,124,1);
	text-shadow: 2px 2px 5px #000000;
	text-decoration: none;
}

.text-link-header a:hover{
	color: rgba(251,203,157,1); 
	transition: .2s ease color;
}

.text-link-header i{
	position: relative;
    top: 6px;
}

.news-container{
	position: relative;
	width: 100%;
	
	margin-top: 150px;
	background-color: rgba(0,0,0,.6);
	padding: 5px;
	pointer-events: auto;
}

.news-items{
	position: relative;
	width: 100%;
	pointer-events: auto;
}

.news-block{
	position: relative;
	width: 302px;
	max-width: 302px;
	margin: 5px 5px 20px 5px;
	pointer-events: auto;
	cursor: pointer;
}

.news-block a:link, .news-block a:hover, .news-block a:visited, .news-block a:active{
	text-decoration: none;
}



.news-thumb-image{
	position: relative;
	width: 302px;
	height: 169px;
	max-width: 302px;
	max-height: 169px;
	-moz-box-shadow: 0px 4px 6.23px 0.77px rgba(0, 0, 0, 0.77);
	-webkit-box-shadow: 0px 4px 6.23px 0.77px rgba(0, 0, 0, 0.77);
	box-shadow: 0px 4px 6.23px 0.77px rgba(0, 0, 0, 0.77);
	margin-bottom: 5px;
	overflow: hidden;
	transform-origin: center center;
	pointer-events: auto;
}

.news-thumb-image img{
	height: 150%;
    width: auto;
    left: -25%;
    position: relative;
}

.news-thumb-title{
	font-size: 16px;
	font-family: TRAJ;
	color: rgba(245,183,124,1);
	text-shadow: 2px 2px 5px #000000;
	margin-bottom: 5px;
	text-decoration: none;
	pointer-events: auto;
}


.news-thumb-date{
	font-size: 12px;
	text-decoration: none;
	
}

.news-thumb-date a:link, .news-thumb-date a:hover, .news-thumb-date a:visited, .news-thumb-date a:active{
	font-size: 12px;
	color: #fff;
	text-decoration: none;
}

.tile-container{
	position: relative;
	width: 100%;
	
}

.content-tile-greek, .content-tile-roman, .content-tile-barbarian, .content-tile-unknown{
	width: 141px;
	height: 141px;
	/*padding: 4px;*/
	margin: 10px;
	border: 5px solid rgba(255,213,159,1);
	/*background-image: -moz-linear-gradient( 135deg, rgb(119,87,0) 39%, rgb(240,179,16) 57%, rgb(246,207,105) 80%);
	background-image: -webkit-linear-gradient( 135deg, rgb(119,87,0) 39%, rgb(240,179,16) 57%, rgb(246,207,105) 80%);
	background-image: -ms-linear-gradient( 135deg, rgb(119,87,0) 39%, rgb(240,179,16) 57%, rgb(246,207,105) 80%);*/
	-moz-box-shadow: 0px 4px 6.23px 0.77px rgba(0, 0, 0, 0.77);
	-webkit-box-shadow: 0px 4px 6.23px 0.77px rgba(0, 0, 0, 0.77);
	box-shadow: 0px 4px 6.23px 0.77px rgba(0, 0, 0, 0.77);
}

.background{
	position: absolute;
	width: 100%;
	height: 100%;
	min-height: 720px;
	max-height: 1300px;
	/*max-width: 1920px;*/
	overflow-x: hidden;
	overflow-y: hidden;
	margin-left: auto ;
	margin-right: auto ;
	z-index: 1;
	-webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.background img{
	min-width: 2715px;
    width: 100%;
}

.midground{
	position: absolute;
	width: 100%;
	height: 100vh;
	max-height: 1300px;
	/*max-width: 1920px;*/
	overflow-x: hidden;
	overflow-y: hidden;
	margin-left: auto ;
	margin-right: auto ;
	z-index: 2;
	-webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.midground-image{
	position: relative;
	height: 100vh;
}

.mg1, .mg2, .mg3, .mg4, .mg5{
	position: relative;
	height: 100vh;
	max-height: 1300px;
}
.mg-grass{
	position: relative;
	bottom: -54%;
	margin: -1px;
}

.mg-grass img{
	height: 100%;
}

.mg1-image{
	position: absolute;
	bottom: 44%;
	-webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    -o-transform: scale(.9);
    transform: scale(.9);
	transform-origin: bottom center;
}

.mg2-image{
	position: absolute;
	left: -13%;
	bottom: 36%;
	/*-webkit-transform: scale(.7);
    -moz-transform: scale(.7);
    -ms-transform: scale(.7);
    -o-transform: scale(.7);
    transform: scale(.7);*/
	transform-origin: bottom center;
}

.mg3-image{
	position: absolute;
	left: -46%;
    bottom: 42%;
	-webkit-transform: scale(.9);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
	transform-origin: bottom center;
}

.mg4-image{
	position: absolute;
	position: absolute;
	left: 0%;
	bottom: 35%;
	-webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
	transform-origin: bottom center;
}

.mg5-image{
	position: absolute;
	left: -30%;
	bottom: 50%;
	-webkit-transform: scale(.6) rotate(-2deg);
    -moz-transform: scale(.6) rotate(-2deg);
    -ms-transform: scale(.6) rotate(-2deg);
    -o-transform: scale(.6) rotate(-2deg);
    transform: scale(.6) rotate(-2deg);
	transform-origin: bottom center;
	z-index: -1;
}

.mg6-image{
	position: absolute;
	position: absolute;
	left: 0%;
	bottom: 28%;
	-webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
	transform-origin: bottom center;
}

.footer{
	position: relative;
	width: 100%;
	/*max-width: 1920px;*/
	margin-left: auto ;
	margin-right: auto ;
	background: rgba(0,0,0,1);
	padding-bottom: 20px;
	/*-webkit-box-shadow: 0 -8px 12px -6px black;
	   -moz-box-shadow: 0 -8px 12px -6px black;
	        box-shadow: 0 -8px 12px -6px black;*/
	z-index: 50;
}

.wg-footer{
	background: rgba(0,0,0,1);
	width: 100%;
	max-width: 1920px;
	margin-left: auto ;
	margin-right: auto ;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}


.wglogos-ratings{
	min-height: 70px;
	width: 100%;
}



.copyright{
	color: #666666;
	font-size: 12px;
	margin: 0px 10px;
}

.esrb{
	width: 124px;
	height: 60px;
	margin: 5px 10px;
}

.wg-logo img{
	width: 143px;
	height: 30px;
	padding: 0px 20px 10px 5px;
}

.wgal-logo img{
	width: 106px;
	height: 30px;
	padding: 0px 20px 10px 5px;
}

.ca-logo img{
	width: 113px;
	height: 30px;
	padding: 0px 20px 10px 5px;
}

.sega-logo img{
	width: 90px;
	height: 30px;
	padding: 0px 20px 10px 5px;
}

.youtube-icon img{
	height: 25px;
	width: 25px;
	margin: 0px 10px;
}

.facebook-icon img{
	height: 17px;
	width: 17px;
	margin: 0px 10px;
}

.twitter-icon img{
	height: 20px;
	width: 20px;
	margin: 0px 10px;
}

.google-icon img{
	height: 27px;
	width: 27px;
	margin: 0px 10px;
}

.share-text{
	color: #c1c1c1;
	font-size: 12px;
	padding: 0px 10px;
	font-family: ROBO;
}



.footer-links a:link, .footer-links a:hover, .footer-links a:visited, .footer-links a:active{
	color: #666666;
	font-size: 12px;
	padding: 0px 10px;
	font-family: ROBO;
	text-decoration: none;
	padding-bottom: 10px;
}

.online-ratings{
	text-align: center;
	color: #666666;
	font-size: 12px;
	font-family: ROBO;
	text-decoration: none;
	padding-bottom: 10px;
}
/*
.logos-legal a:link, a:hover, a:visited, a:active{
	color: #fff;
	text-decoration: none;
	font-family: ROBO;
	font-weight: normal;
	font-size: 16px;
	
}*/


.debug:focus, .nav-button:focus, .mobile-menu-button:focus, .left-nav-arrow:focus, .right-nav-arrow:focus, .button-general:focus, .close-button:focus, .twa-logo:focus, .news-block:focus, .content-plus-link, .flag-barbarian-mob:focus, .flag-roman-mob:focus, .flag-greek-mob:focus, .commander-barbarian-mob:focus, .commander-roman-mob:focus, .commander-greek-mob:focus, #mobile-menu-button:focus, .map-item-thumb:focus{
	outline: 0;
}


@media only screen and (max-width: 1279px) {
 	
	.page-image-home1 img, .page-image-home2 img{
		width: 100%;
	}
	
	.faction-visual{
		box-sizing: content-box;
		padding: 20px 0px;
		border-left: 0px;
		border-right: 0px;
		/*border-top: 1px solid rgba(255,255,255,1);*/
		border-bottom: 1px solid rgba(255,255,255,1);
	}
	
	.faction-info{
		width: 100%;
		margin-top: 50px;
	}
	
	.close-button-container{
		position: absolute;
		width: 100%;
		margin-left: -80px;
		margin-top: -4px;
	}
	
	.map-visual{
		border-top: 0px;
		border-bottom: 0px;
		border-right: 0px;
	}
	
	.unit-visual-4col-noBar{
		width: 100%;
		border-top: 0px;
		border-bottom: 0px;
		border-right: 0px;
	}


	.faction-info{
		width: 100%;
	}

	.faction-secondary-info{
		width: 100%;
	}

	.commander-barbarian {
		position: absolute;
		height: 55%;
		max-height: 793px;
		width: auto;
		/* max-height: 1300px; */
		bottom: 0;
		left: 0px;
	}
	
	.commander-roman {
		position: absolute;
		height: 75%;
		width: auto;
		max-height: 1053px;
		bottom: 0;
		left: calc(50% - 318px);
	}
	
	.commander-greek {
		position: absolute;
		height: 64%;
		width: auto;
		max-height: 911px;
		bottom: 0;
		right: 0px;
	}
	
}

@media only screen and (max-width: 1144px) {
	.content-item-title{
		font-size: 15px;
	}	
}


@media only screen and (max-width: 1089px) {
	
	.page-title-home{
		padding: 20px 0;
		font-size: 64px;
		
	}
	
	
	
	
	
	.map-info, .unit-info, .map-visual, .unit-visual, .unit-info-4col, .unit-visual-4col{
		width: 100%;
	}

 	
	.faction-visual{
		box-sizing: content-box;
		padding: 20px 0px;
		border-left: 0px;
		border-right: 0px;
		/*border-top: 1px solid rgba(255,255,255,1);*/
		border-bottom: 1px solid rgba(255,255,255,1);
	}
	
	.unit-visual-4col-noBar{
		width: 100%;
		border-top: 0px;
		border-bottom: 0px;
		border-right: 0px;
	}

	
	

	.commander-barbarian {
		position: absolute;
		height: 48%;
		max-height: 793px;
		width: auto;
		/* max-height: 1300px; */
		bottom: 0;
		left: 0px;
	}
	
	.commander-roman {
		position: absolute;
		height: 65%;
		width: auto;
		max-height: 1053px;
		bottom: 0;
		left: calc(50% - 274px);
	}
	
	.commander-greek {
		position: absolute;
		height: 56%;
		width: auto;
		max-height: 911px;
		bottom: 0;
		right: 0px;
	}
	
}


@media only screen and (max-width: 959px) {
 	
	.page-title-home{
		padding: 20px 0;
		font-size: 56px;
		margin-top: 80px;
	}
	
	.content-item-title{
		font-size: 13px;
	}	
	
	.page-images-maps{
		width: 100%;
		margin-left: 0px;
	}
	
	.home-sub-title{
		font-size: 25px;
	}
	
	.page-title{
		font-size: 48px;
	}
	
	.page-images-maps-thumbs{
		padding-top: 100px;
		width: 100%;
		margin-left: 0px;
	}

	.page-images-units-thumbs{
		padding-top: 100px;
		width: 100%;
		margin-left: 0px;
	}
	
	.map-item-thumb{
		max-height: 159px;
		max-width: 171px;
	}
	
	.content-link-mob {
		width: 60px;
		height: 60px;
	}
	
	.content-link-maps {
		width: 60px;
		height: 60px;
	}
	
	.content-link-maps{
		margin-top: calc(50% - 30px);
		margin-left: calc(50% - 30px);
	}
	
	.content-plus-link-maps {
		width: 60px;
		height: 60px;
		margin-top: calc(-50% - 30px);
    	margin-left: calc(50% - 30px);
	}
	
	.content-plus-link-plus {
		margin-left: 16px;
	}
	
	.close-button-container{
		position: absolute;
		width: 100%;
		margin-left: -20px;
		margin-top: -4px;
	}
	
	.content-barbarian, .content-roman, .content-greek, .content-boudica, .content-germanicus, .content-leonidas, .content-hadrian, .content-capitol, .content-alpis, .content-melee, .content-ranged, .content-cavalry{
		pointer-events: auto;
		padding: 20px;
		background-color: rgba(0,0,0,.5);
		/*display: none;	*/	
	}
	
	.content-home{
		pointer-events: auto;
		padding: 20px;
		
    	margin-top: 134px;
    
	}
	
	.page-image img{
		width: 100%;
		height: 100%;

	}
	
	.faction-visual{
		box-sizing: content-box;
		padding: 20px 0px;
		border-left: 0px;
		border-right: 0px;
		/*border-top: 1px solid rgba(255,255,255,1);*/
		border-bottom: 1px solid rgba(255,255,255,1);
	}
	
	
	.unit-visual-4col-noBar{
		width: 100%;
		border-top: 0px;
		border-bottom: 0px;
		border-right: 0px;
	}

	

	.faction-info{
		width: 100%;
		margin-top: 50px;
	}

	.faction-secondary-info{
		width: 100%;
	}
	
	.home-content{
		margin-top: 0px;
		padding: 0px 5px;
		width: 100%;
		left: 0;
	}
	
	.page-content-home, .page-content-about, .page-content-factions, .page-content-units, .page-content-maps{
		top: 90px;
		height: calc(100% - 90px);
		padding-right: 18px;
	}
	
}

@media only screen and (max-width: 799px) {
	
	.page-title-home{
		margin-top: 65px;
	}
	.unit-visual-4col-noBar{
		width: 100%;
		border-top: 0px;
		border-bottom: 0px;
		border-right: 0px;
	}
	
	
}

@media only screen and (max-width: 599px) {
	
	.page-title-home{
		padding: 20px 0;
		font-size: 48px;
		
	}
	
	
	.page-title{
		font-size: 41px;
	}
	
	
	
	.content-item-title{
		display: none;
	}
	
	.page-image img{
		width: 100%;
		height: 100%;

	}
	
	.content-plus-link-maps {
		position: relative;
		margin-left: 0;
		margin-top: -30%;
	}
	
	.faction-visual{
		box-sizing: content-box;
		padding: 20px 0px;
		border-left: 0px;
		border-right: 0px;
		/*border-top: 1px solid rgba(255,255,255,1);*/
		border-bottom: 1px solid rgba(255,255,255,1);
	}
	
	.unit-visual-4col-noBar{
		width: 100%;
		border-top: 0px;
		border-bottom: 0px;
		border-right: 0px;
	}


	.faction-info{
		width: 100%;
	}

	.faction-secondary-info{
		width: 100%;
	}

	
	
	.home-content{
		margin-top: 0px;
		padding: 0px 5px;
		width: 100%;
		left: 0;
	}
	
	.page-content-home, .page-content-about, .page-content-factions, .page-content-units, .page-content-maps{
		top: 90px;
		height: calc(100% - 90px);
		padding-right: 18px;
	}
	
	
	
	
}

@media only screen and (max-width: 413px) {
	
	.page-title-home{
		padding: 20px 0;
		font-size: 40px;
	}	
	
	.page-title{
		font-size: 36px;
	}
	
	.commanders-list{
		width: 100%;
		flex-direction: column;
	}
	
	.faction-visual{
		box-sizing: content-box;
		padding: 20px 0px;
		border-left: 0px;
		border-right: 0px;
		/*border-top: 1px solid rgba(255,255,255,1);*/
		border-bottom: 1px solid rgba(255,255,255,1);
	}

	.unit-visual-4col-noBar{
		width: 100%;
		border-top: 0px;
		border-bottom: 0px;
		border-right: 0px;
	}

	
	.faction-info{
		width: 100%;
	}

	.faction-secondary-info{
		width: 100%;
	}
	
	.page-images-commanders-mob, .page-images-units-thumbs {
		padding-top: 50px;
	}

	
}

@media only screen and (max-width: 340px) {
	
	.page-title-home{
		padding: 20px 0;
		font-size: 40px;
	}
	
	.page-title{
		font-size: 36px;
	}
	
	.order-title {
    font-size: 22px;
	}
	
	
	.faction-visual{
		box-sizing: content-box;
		padding: 20px 0px;
		border-left: 0px;
		border-right: 0px;
		/*border-top: 1px solid rgba(255,255,255,1);*/
		border-bottom: 1px solid rgba(255,255,255,1);
	}
	
	.unit-visual-4col-noBar{
		width: 100%;
		border-top: 0px;
		border-bottom: 0px;
		border-right: 0px;
	}


	.faction-info{
		width: 100%;
	}

	.faction-secondary-info{
		width: 100%;
	}

	
}