/*
Theme Name: SpellForce 3
Author: THQ Nordic GmbH - nt
Description: Selfmade Wordpress Theme for SF3
Text Domain: sf3
Version: 2.02
*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  word-wrap: break-word;
}

@font-face {
  font-family: 'Garamond-Bold';
  src: url('./fonts/GARABD.eot');
  src: url('./fonts/GARABD.woff2') format('woff2'),
       url('./fonts/GARABD.eot?#iefix') format('embedded-opentype');
  src: url('./fonts/Garamond-Bold.woff') format('woff'),
       url('./fonts/Garamond-Bold.ttf') format('truetype'),
       url('./fonts/Garamond-Bold.svg#Garamond-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Garamond';
  src: url('./fonts/Garamond.eot');
  src: url('./fonts/Garamond.woff2') format('woff2'),
       url('./fonts/Garamond.woff') format('woff'),
       url('./fonts/Garamond.ttf') format('truetype'),
       url('./fonts/Garamond.svg#Garamond') format('svg'),
       url('./fonts/Garamond.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

html, body { height: 100%; }
body {
	background-color: #000;
  font-family: 'Garamond';
  font-size: calc(14px + (22 - 14) * ((100vw - 360px) / (1600 - 360)));
	color: #b99f7c;
	line-height: 1.2;
	width: 100%;
	margin: 0;
	padding: 0;
	word-wrap: break-word; 
  overflow-x: hidden; 
  position: relative;
}
header:after, nav:after, main:after, section:after, 
.form-one-row:after{
	content:"";
	clear:both;
	display:block;
}


a, img { outline: 0 none; text-decoration: none;}
a, a:hover { color: #b99f7c; text-decoration:none;}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Garamond-Bold';
	clear: both;
	line-height: 1;
  text-transform: uppercase;
  margin: 0 0 1em;
  color: #fff;
}
h1 { font-size: 1.8em; }
h2 {
	font-size: 1.75em;
	margin-bottom: .75em;
	text-align:center;
	position: relative;
}
.smallmargin { margin-bottom: .25em; }
h2:after {
	content: "";
	background-color: #fff;
	position: absolute;
	bottom: -.125em;
	left: 50%;
	transform: translateX(-50%);
	width: 65%;
	height: 1px;
}

h3 {
  font-size: 1.6em;
	margin: 0 0 .5em; 
}
h4 {
  font-size: 1.4em;
	margin: 0 0 .5em; 
}

p {
  font-size: 1em; 
	margin: 0 0 .5em; 
}

ol,
ul {
  font-size: 1em; 
	margin: 0 0 .25em 0;
	padding: 0 0 0 .5em;
}

ul {
  font-size: 1em; 
	list-style-type: square;
}

li > ul,
li > ol {
	margin: 0;
}

img {
	-ms-interpolation-mode: bicubic;
	border: 0;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

blockquote {
	text-align: right;
	font-style: italic;
}


button,input,select,option {
  font-family: 'Garamond';
  font-size: 1em;
  background-color: transparent;
  border: none;
  outline: none;
  border-radius: 0;
	background-clip: padding-box;
	box-shadow:none !important;
	-moz-box-shadow:none !important;
	-webkit-box-shadow:none !important;
}
button,input {
	text-transform: uppercase;
	margin: .5em;
	padding: .25em .5em;
}	
button {
	cursor: pointer;
	background-color: transparent;
}	
button:focus, input:focus {
  outline: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
	display: block;
}
audio:not([controls]) {
	display: none;
	height: 0;
}
[hidden] {display: none;}

/* Make sure videos and embeds fit their containers. */
embed,
iframe,
object,
video {
	max-width: 100%;
}


/* Images */
/*.alignright,*/
.right {
	float: right;
	margin-left: 1em;
	margin-bottom: .5em
}
/*.aligncenter */
.center{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/*figure.wp-caption.alignleft,
img.alignleft*/
.left {
	float: left;
	margin-right: 1em;
	margin-bottom: .5em
}



/* MENU */
.mainnav-holder {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: .75em;
  text-transform: uppercase;
}
	
	.mainnav {
		/*margin: 0 1em 0 2em;*/
	}
	.mainnav ul {
		padding: 0;
		margin: 0;
	}
	.mainnav ul li a{
		display: flex;
		align-items: center;
		/*padding: .5em 1em;*/
		color: #b99f7c;
		text-align: center;
	}



.topnav-holder{
	position: fixed;
	top: 0;
	left: 0;
  text-transform: uppercase;
	width: 100%;
	padding: 0.5em 1em 0;
	display: flex;
	align-items: center;
	z-index: 20;
}
	.topnav a{
		font-size: 0.583em;
	}
	.topnav a:not(:last-child)::after, .-skin-default .-filters .-filter:not(:last-child)::after {
		display: inline-block;
		content: "|";
		margin-left: 10px;
	}

	.so-follow { margin-left:  auto; }

	.so-icon {
		margin: 0;
		display: inline-block;
	}
	.so-icon > img { display:block;}

	.language-switcher {
		margin-left: .5em;
	}
	.language-switcher select {
		padding: 3px 16px 3px 5px;
		text-transform: uppercase;
		color: #b99f7c;
    background-color: transparent;
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAJCAYAAAACTR1pAAAAvklEQVQokZXOv0qCYRQH4KcXWxoEcTL6Ayk2uLo2BUFDYINkQXQVbV6Hq4NLg0pEUA0VOXcB3kQEDgZ+CS2v8Kkg+VvPeX7nbLy0m9bMJpKAWzxg6x9oF0O0Aho4wzOyK9AO3nGAXMAJPnGEV+RXoCK6uA74wjEGqOIDhRTajoUl9HCF3xCHI5ziCZWI92PBG8roR5RAJtU8Rg13OI8f/OAQ97jEZLYczGeCOjrYi+gRF2m0eHGWKW7wHfESgj93wiZYdEoKrgAAAABJRU5ErkJggg==');
    background-repeat: no-repeat;
    background-position: right center;
		border-radius: 0;
		cursor:pointer;
		appearance: none;
		-moz-appearance: none; 
		-webkit-appearance: none;
	}
	.language-switcher select option{
		padding: 3px;
		color: #b99f7c;
		background: #000 none no-repeat center center;
		text-align: center;
	}


.header-shop {
	background-color: rgba(185,159,124,.7);
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 30;
	padding: .5em;
	text-align: right;
}



/* CONTENT STUFF */
main {
	position: relative;
	margin: 0;
	padding: 0;
}
section{
	width: 100%;
	position: relative;
	margin: 0;
	/*padding: 3em 8%;*/
	/*display: flex;
	align-items: center;
	flex-flow: row wrap;*/
}
	.bg-image-two, .bg-image-one {
	 	background-color: transparent;
	  background-repeat: no-repeat;
		min-height: 100vh;	  
	  overflow: hidden;	
	}
	.bg-image-two {
	  background-image: url("./img/bg-img/standard-char.png"), url("./img/bg-img/standard-bg.jpg");
	  background-position: 15% center, center center;
	  background-size: auto 100%, cover;
	}
	.bg-image-one {
	  background-image: url("./img/bg-img/standard-bg.jpg");
	  background-position: center center;
	  background-size: cover;
	}

	.content-wrapper{
		width: 100%;
		height: 100%;
	  display: flex;
	  flex-flow: row nowrap;
	  align-items: center;
	  justify-content: flex-end;
	  position: relative;
	  padding: 0 5vw;
	}
	.content-box {
		position: relative;
		flex: 0 0 calc(60% - 5vw);
		max-width: 940px;
		height: calc(100vh - (84px + 20px) - (150px + 20px) - .5em);
		/*z-index: 2;*/
		overflow-x: hidden;
		overflow-y: auto;
		padding: 1em .5em 1em 1em;
	}
	.mCustomScrollbar.mCS_no_scrollbar:not(.padding-topbottom) {
		padding-right: 1em;
	}
	.mCSB_container.mCS_no_scrollbar_y {
		height: 100%;
	}
	.padding-topbottom{
		padding: 1em 0;
	}


 .frame {
		background-color: rgba(53,47,40,0.82);
		position: relative;
	}

	.goldframe{
		background-color: rgba(0,0,0,0.82);
		position: relative;
	}
	
	.intro-content {
		/*width: 60%;*/
		max-height: 50vh;
		margin: 0 auto;
		text-align: center;
		position: absolute;
		left: 50%;
		top: 20vh;
		transform: translateX(-50%);
	}
		.intro-logo {
			display: block;
			margin-bottom: 2em;
		}
		.intro-buttons {
			text-transform: uppercase;
		}
			.goldframe-btn {
				background-image: url("./img/btns/trailer-btn-l.png"), url("./img/btns/trailer-btn-r.png"), url("./img/btns/trailer-btn-mid.png");
				background-repeat: no-repeat, no-repeat, repeat-x;
				background-position: left center, right center, left center;
				background-size: auto 100%;
				color: #fff;
				padding: .5em 1em;
				display: inline-block;
			}
		.logo-fixed {
			position: fixed;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			opacity: 0;
			z-index: 15;
		}
		.logo-fixed img { max-height: 140px; }



.img-static {
	position: relative;
}
	.img-static h4 {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: .5em .25em;
		font-size: 1.05em;
		text-align: center;
		text-shadow: 3px 4px 6px #000;
	}
.ani-over {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow: hidden;
	z-index: 2;
	opacity: 0;
	cursor: pointer;
}
	.gallery-item:hover .ani-over {
		opacity: 1;
	}

		.videoplay-icon {
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: transparent url("./img/icons/play.png") no-repeat center center;
			z-index: 3;
		}



/* TIMELINE CONTENT */
	.timelinecircle-holder .timeline-point {
    border-radius: 50%;
    overflow: hidden;
    position: relative;
	  border: 5px solid #f3ddbb;
	  
  	text-align: center;
  	margin: 0 auto;
    width: 5em;
  	height: 5em;
  	z-index: 2;
  	cursor: pointer;
  		  
  }

 .timelinecircle-holder .timeline-point img{
  	display: block;
  	height: calc(100% + 2px);
  	width: auto;
  	max-width: none;
  	position: absolute;
  	left: 50%;
  	top: 50%;
  	transform: translate(-50%,-50%);
	  background-color: #fff;
	 	filter: grayscale(1);
	 	transition: filter .6s linear;
  }
  .timeline-timelinecircle {
  	margin: 1em auto;
  }
	
	.timeline-timelinecircle .swiper-button-next, .timeline-timelinecircle .swiper-button-prev {
		top: calc(2.5em) !important;
	}
  .timelinecontent-holder {
  	width: 100%;
  	margin: 0 auto;
		cursor: move;
		text-align: center;
  }
	.timelinecontent-holder h4 {
		font-size: 1.2em;
	}
	
	.timeline-buyicon {
		display: inline-block;
		margin-right: 10px;
	}
	
	.timeline-timelinecircle, .timeline-content {
		max-width: 874px;
	}
  .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{ display: none; }
	.swiper-button-next, .swiper-button-prev {
		transform: translateY(-50%);
		margin-top: 0 !important;
		width: 32px !important;
		height: 39px !important;
	}
	.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
		background-image: url("./img/icons/arrowRight.png") !important;
		right: 0 !important;
	}
	.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
		background-image: url("./img/icons/arrowLeft.png") !important;
		left: 0 !important;
	}
	
	.swiper-button-next, .swiper-container-rtl .swiper-button-prev,
	.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
		opacity: 1;
	}
	
  .timeline-timelinecircle .swiper-slide::after {
   	background: rgba(243, 221, 187, 0.6) none repeat scroll 0 0;
    content: "";
    height: 3px;
    left: calc(50% - 2em + 90px);
    position: absolute;
    top: 2.5em;
    width: 100%;
    z-index: 1;
	}
	.timelinecircle-holder {
		text-align: center;
		margin: 0 auto;
	}
		.timeline-date {
			font-family: 'Garamond-Bold';
			margin-top: .5em;
			font-size: .85em;
			text-transform: uppercase;
			display: inline-block;
		}
  
  
  .timeline-timelinecircle .swiper-slide.swiper-slide-active .timeline-point{
    width: 5.5em;
  	height: 5.5em;
  }
 .timeline-timelinecircle .swiper-slide.swiper-slide-active .timelinecircle-holder .timeline-point img{
	 	transition: filter .6s linear;
	 	filter: grayscale(0);
  }

				



.full-height-wrapper {
	align-items: stretch;
	display: flex;
	flex-flow: column nowrap;
	height: 100%;
	width: 100%;
}

.big-image-holder {
	align-items: stretch;
	display: flex;
	height: 100%;
	justify-content: space-between;
	padding: 10px;
	width: 100%;
}
.big-image-box{
	font-family: 'Garamond-Bold';
	text-align: center;
	color: #372b22;
	background-color: rgba(218,200,177,0.7);
	background-repeat: no-repeat;
	background-position: center 2.2em;
	background-size: cover;
	width: 32%;
	position: relative;
}
.big-image-box a:after{
	content: "";
	display: block;
	padding-bottom: 100%;
}

.big-image-box a{
	display: block;
	width: 100%;
	height: 100%;
	color: #372b22;
	position: relative;
}

	.big-image-box h4 {
		margin: 0 auto;
		padding: .5em 1em;
		color: #372b22;
		font-size: 1.2em;
	}
	.big-image-box .description {
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(218,200,177,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#dac8b1',GradientType=0 );
		position: absolute;
		bottom: 0;
		width: 100%;
		font-size: .85em;
		text-transform: uppercase;
		padding: 1em .5em;
		margin: 0;
	}



/* FACTIONS SITE */
.nav-factions {
	margin-bottom: .5em;
}
	.nav-factions ul {
		padding: 0;
		margin: 0;
		text-align: center;
	}
	.nav-factions ul li {
		display: inline-block;
	}
	.nav-factions ul li a{
		display: block;
		filter: grayscale(1);
	}
	.nav-factions ul li a.active-unit{
		filter: grayscale(0);
	}
	
.content-factions-around {
}

.factions-wrapper {
	background-color: rgba(0,0,0,0.55);
	margin-bottom: .5em;
}

.factions-content {
}
.factions-units-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	padding: 1em;
}
	.factions-units-wrapper > h3 {
		color: #b99f7c;
		font-size: 1.1em;
		flex: 1 1 100%;
	}
	.factions-units-wrapper > .goldframe {
    /*flex: 1;*/
    margin-right: 1em;
 	}
 	/*.factions-units-wrapper > .goldframe img {
 		max-height: 30vh;
 	}*/
	.factions-units {
    flex: 4;
    /*
    1/3  - 3 columns per row
    10px - spacing between columns 
    width: calc(1/3*100% - (1 - 1/3)*10px);  
    */
	}
	
	.units {
		margin-top: 1em;
	}
	.stats {
		margin: 10px auto;
		padding-left: 32px;
		position: relative;
	}
	.stats:before {
		content: "";
		position: absolute;
		background: transparent none no-repeat center center / contain;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 28px;
		height: 28px;
		z-index: 5;
	}
		.damage:before { background-image: url("./img/icons/stats/unitStats_Damage.png"); }
		.hp:before { background-image: url("./img/icons/stats/unitStats_HitPoints.png"); }
		.speed:before { background-image: url("./img/icons/stats/unitStats_Speed.png"); }
		.range:before { background-image: url("./img/icons/stats/unitStats_AttackRange.png"); }

		.progress { 
			height: 20px;
			position: relative;
			background: #000;
			border: 1px solid #b99f7c;
			overflow: hidden;
		}
		.progress > span {
		  display: block;
		  height: 100%;
		  background-color: #b99f7c;
		  position: relative;
		  overflow: hidden;
		}
	.factions-units > h4 {
		color: #b99f7c;
		font-size: 1.05em;
	}

.factions-portraits {
	display: flex;
	align-items: center;
}
.races-portrait {
	width: 3.5em;
	height: 3.5em;
	background: #fff none no-repeat center center / cover;
	cursor: pointer;
	filter: grayscale(1);
}
	.races-portrait.swiper-slide-active {
		width: 4em;
		height: 4em;
		box-shadow: 0 1px 5px 3px #d4c6c3;
		filter: grayscale(0);
		transition: box-shadow .3s linear;
		margin: 5px;
	}



/* RESPONSIVE iframe*/
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/* AGE GATE */
.no-js .js-error, .js .verification-msg, .js .age-gate-form{
	display: block;
}
.js .js-error, .no-js .verification-msg, .no-js .age-gate-form, .content-hidden{
	display: none;
}

.age-gate {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background-color: #000;
	z-index: 60;
	overflow-y: auto;
	overflow-x: hidden;
}
.age-gate-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
	background: transparent url("./img/bg-img/keyart_bg.png") no-repeat fixed center top / contain;
	opacity: .4;
}
.verification-msg {
	flex: 0 0 100%;
	text-align: center;
	margin-top: 1em;
}
.verification-msg h2 {margin-bottom: .5em;}

.age-gate .form-one-row {
	text-align: center;
}

.verification-error {
  margin-top: 1.5em;
}
.verification-error > *{
	display: none;
	text-align: center;
	padding: .5em 1.25em;
	text-transform: uppercase;
}

/* Newsletter NL Form - Newsletter-Form */
#errormsg {margin: 1em auto;}
#errormsg > * {
	display: none;
	font-family: 'Garamond-Bold';
	font-size: .85em;
	text-align: left;
}
/*input:not(:focus).inputfield-error, .nl-email-form input:invalid, .newsletter input:invalid{
	border-color: #AD235E;
	box-shadow:none !important;
  -moz-box-shadow:none !important;
  -webkit-box-shadow:none !important;
}*/
	
#successmsg {
	display: none;
	font-size: 1.5em;
}
.newsletter {
	position: relative;
	padding: 1em 0;
	color: #fff;
	text-transform: uppercase;
}
.newsletter fieldset {
  border: 0 none;
  margin-bottom: 1em;
}
.newsletter label { text-align: left; }

.newsletter input {
	color: #fff;
	border-bottom: 2px solid #fff;
}

.newsletter button,input[type="checkbox"],input[type="radio"] {cursor: pointer;}
.newsletter input[type="checkbox"] {margin-right: 10px;}
.newsletter input[type="checkbox"]:not(old),input[type="radio"]:not(old) {
  width: 2em;
  margin: 0;
  padding: 0;
  font-size: 1em;
  opacity: 0;
}
.newsletter input[type="checkbox"]:not(old) + label,input[type="radio"]:not(old) + label {
  display: inline-block;
  margin-left: -2em;
  line-height: 1.5em;
}
.newsletter input[type="checkbox"]:not(old) + label > span,
.newsletter input[type="radio"]:not(old) + label > span {
  font-size: 16px;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 .5em .22em .22em;
  border: 1px solid #b99f7c;
  vertical-align: middle;
}
.newsletter input[type="radio"]:not(old) + label > span {border-radius: 50%;}
.newsletter input[type="checkbox"]:not(old):checked + label > span,
.newsletter input[type="radio" ]:not(old):checked + label > span {/*background: rgba(57,95,159,1);*/background: #fff}
.newsletter input[type=checkbox]:not(old):checked + label > span:before {
  /*content: "✔";*/
  display: block;
  width: 1em;
  color: #b99f7c;
  font-size: 1em;
  line-height: 1em;
  text-align: center;
  font-weight: 700;
}
.newsletter input[type=radio]:not(old):checked + label > span > span {
  display: block;
  height: .6em;
  margin: .125em;
  border-radius: 50%;
  background: rgba(255,255,255,1);
}


.form-one-row {margin-bottom: .5em;}
.form-10 {
  float: left;
  width: calc(10% - 1em);
  margin-right: 1em;
}
.form-15 {
  float: left;
  width: calc(15% - 1em);
  margin: 0 1em 0 0;
}
.form-20 {
  float: left;
  width: calc(20% - 1em);
  margin: 0 1em 0.5em 0;
}
.form-25 {
  float: left;
  width: calc(25% - 1em);
  margin: 0 1em 0 0;
}
.form-50 {
  float: left;
  width: calc(50% - 1em);
  margin: 0 1em 0 0;
}




/* COOKIE INFO */
.no-js .js-error, .js .verification-msg{
	display: block;
}
.js .js-error, .no-js .verification-msg{
	display: none;
}
	.js-error{
		margin: 1em auto;
		text-transform: uppercase;
	}

#cookie{
	position:fixed;
	left:0;
	bottom:0;
	width:100%;
	padding: 10px 5px;
	background: rgba(0, 0, 0, 0.95);
	z-index:9999;
}
#cookie p{
	color: #fff;
	position:relative;
	display:block;
	font-size: 15px;
	margin:0;
	text-align:center
}
a#closecookie{
	margin: 0 auto 0 1em;
	padding:0.25em 0.5em;
	display: inline-block;
	border: 1px solid #fff;
	text-transform: uppercase;
}



/* FIXED FOOTER */
.bottom-nav {
	position:fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: .5em;
	z-index: 20;
}

.red-btn, .black-btn {
	position: relative;
}

	.red-btn a, .black-btn a{
	  text-transform: uppercase;
		padding: 0.5em;
		display: inline-block;
		position: relative;
	}

.order-btn {
	position: relative;
}

.flex-right {
	margin-left: auto;	
}
/*.order-btn:before*/
.dragon {
	display: block;
	content: "";
	background: transparent url("./img/btns/order-btn-dragon.png") no-repeat right bottom / contain;
	position: absolute;
	/*left: -95px;*/
	left: -98px;
	bottom: 0;
	width: 116px;
	height: 84px;
	z-index: 2;
}


	.icon {
	  background: transparent url("./img/icons/arrowDown.png") no-repeat scroll center center / contain;
	  cursor: pointer;
	  height: 48px;
	  margin: 0 auto;
	  width: 48px;
		animation: jumpUpDown 2s ease infinite;
	}
		@keyframes jumpUpDown {
			0%, 100%{transform: translateY(-2px);}
			50% {transform: translateY(2px);}
		}
	
	.icon-up {
		/*transition: transform .6s linear;
		animation: none;
		transform: rotate(180deg);*/
		width: 0;
		height: 0;
		animation: none;
		overflow: hidden;
	}	
		



/*RETAILER SECTION */
.retailer-site {
	align-items: stretch;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	padding: 0;
}
.retailer-site.bg-image-one {
	background-position:center center;
	background-size: cover;
}
.retailer-site.bg-image-two {
	background-position: left bottom, center center;
	background-size: auto 90%, cover;
}
	
.retailer-wrapper {
	background: transparent linear-gradient(to right, rgba(53,47,40,0) 0%,rgba(53,47,40,0.7) 5%,rgba(53,47,40,1) 50%,rgba(53,47,40,0.7) 95%,rgba(53,47,40,0) 100%); 
	margin-top: 3.1em;
	margin-left: 5em;
	flex: 0 0 55%;
	padding: 1.5em 2.5em;
}
.retailer-box {
	height: 100%;
}

.retailer-section {
  width: 100%;
	display: flex;
  justify-content: center;
	flex-wrap: wrap;
	position: relative;
	padding: 1em 0;
	text-align: left;
}
	.boxshots:not(:empty) {
		margin-right: 1em;
		flex: 0 0 240px;
	}
	.boxshots:not(:empty) img { text-align: center; }
	.content:not(:empty){ 
		text-align: left;
		margin-top: .5em;
		margin-bottom: 1em;
	}

	.get-retailer {
		text-align: center;
		font-size: 0.85em;
	}
	.no-retailer { max-width: 450px;}
	.get-retailer div{
			margin-bottom: .5em
	}
	.get-retailer > div {
		text-align: left;
	}

		.get-retailer > div a {
			font-family: 'Garamond-Bold';
			display: inline-block;
			color: #b99f7c;
			border: 1px solid #fff;
			text-transform: uppercase;
			padding: .25em .5em;
			text-decoration: none;
			background-color: transparent;
			cursor: pointer;
			margin: 0 .5em .5em auto;
		}
		.get-retailer > div a:last-child{ margin-right: 0; }

		.get-retailer label {
			text-transform: uppercase;
			/*color: #b99f7c;*/
			color: #fff;
		}
		/*.get-retailer select, .get-retailer button{
  		font-family: 'Garamond';
		}*/
		.get-retailer select, .get-retailer option {
			outline: none;
		}
		.get-retailer select{
			width: 100%;
			color: #fff;
	    background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAJCAMAAAA1k+1bAAAARVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////9SnXPCAAAAFnRSTlMABdquDBwZ3suzpRPUzcLBtpaRdR8DeenEjwAAAEZJREFUCNdNzEcOgDAQQ1GnkEovvv9RQYMX+bsnS8aYA64aoaZ8YOEaJc+GXli6FBwQN84JSL8+7/S3SYeB2aSeRlaTOrW9nDUCX7VqYrAAAAAASUVORK5CYII=') no-repeat right 5px center;
			border: 1px solid #fff;
			border-radius: 0;
			text-align: center;
			text-transform: uppercase;
			cursor:pointer;
	    padding: .25em 30px .25em .5em;
			-webkit-appearance: none;
			-moz-appearance:    none;
			appearance:         none;
		}
			.get-retailer select option {
				background-color: rgba(255, 255, 255, 1);
				padding: 2px 1em;
				cursor:pointer;
				margin: 0;
				border: 1px solid #352f28;
				border-top: none;
				color: #352f28;
				text-align: center;
				text-transform: uppercase;
			}
	
	.get-retailer > div a:hover,
	.get-retailer > div a.active {
		color: #352f28;
		background-color: #fff;
	}

	.get-retailer button {
		margin: 1em 0 0 0;
		/*width: 100%;
		text-transform: uppercase;*/
	}
	.get-retailer button[disabled=disabled], .get-retailer button:disabled {
		color: #b99f7c;
		background-color: transparent;
		opacity: 0.4;
		cursor: not-allowed;
		position: relative;
	}
	
	
.retailer-wrapper .ratings {
	margin: 0 auto;
	text-align: center;
}	
/* RETAILER SECTION END*/




/* AJAX OVERLAY */
.close-icon {
	display:none;
}
	.ajax-container-content.ajax-content-open .close-icon {
		display:block;
		position: fixed;
		z-index: 25;
	}

.ajax-container-content {
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,0.95);
 	overflow-y: auto;
	visibility: hidden;
	z-index: 60;
	opacity:0;
}
.ajax-container-content.ajax-content-open  {
	width: 100%;
	height: 100%;
	opacity:1;
	visibility: visible;
}

.ajax-main {
	width: 60%;
	margin: 0 auto;
	padding: 5vh 0;
	text-align: center;
	text-transform: uppercase;
}
	.logo-overlay, .legal, .contact {
		margin-bottom: 1em;
	}
	.logo-overlay {
		text-align: center;
	}
	
	.legal {
	}
	.legal a {
		font-size: .8em;
		text-decoration: none;
		font-family: 'Garamond-Bold';
	}

	.contact {
		align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 2em;
    font-family: 'Garamond-Bold';
	}
	.contact a {
		color: #fff;
		text-decoration: none;
	}
		.left-col {
			text-align: right;
			margin-right: 1em;
		}
		.right-col {
			text-align: left;
			margin-left: 1em;
		}
	
	.copyright{
		color: #fff;
		margin-bottom: 2em;
	}
	.copyright p {
		font-size: 14px;
	}
	.logo-leiste {
    margin-bottom: 1em;
  }
  
 	.ratings, img.logo-leiste img{margin-right: 1em;}


/**
 * 5.4 Galleries
 */
.gallery {
	margin-bottom: 0;
	display: flex;
	align-items: stretch;
	flex-flow: row wrap;
	justify-content: center;
}

.gallery-item {
	/*margin: 0 .5em .5em 0;*/
	margin: 0.25em;
	overflow: hidden;
	position: relative;
}
.gallery-item a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.gallery-columns-1.gallery-size-medium,
.gallery-columns-1.gallery-size-thumbnail,
.gallery-columns-2.gallery-size-thumbnail,
.gallery-columns-3.gallery-size-thumbnail {
	display: table;
	margin: 0 auto .5em;
}

.gallery-columns-1 .gallery-item,
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item {
	text-align: center;
}

.gallery-columns-2 .gallery-item {
	width: 50%;
	width: calc(50% - .5em);
}

.gallery-columns-2.gallery-gifboxes .gallery-item {
	max-width: calc(50% - .5em);
	width: auto;
}

.gallery-columns-3 .gallery-item {
	width: 33.33333333333333%;
	width:         calc(33.33333333333333% - .5em);
}

.gallery-columns-4 .gallery-item {
	width: 23%;
	width:         calc(25% - .5em);
}

.gallery-columns-5 .gallery-item {
	max-width: 19%;
	max-width:         calc(20% - .5em);
}

.gallery-columns-6 .gallery-item {
	width: 15%;
	width:         calc(16.7% - .5em);
}

.gallery-columns-7 .gallery-item {
	max-width: 13%;
	max-width:         calc(14.28% - .5em);
}

.gallery-columns-8 .gallery-item {
	width: 11%;
	width:         calc(12.5% - .5em);
}

.gallery-columns-9 .gallery-item {
	width: 9%;
	width:         calc(11.1% - .5em);
}
.gallery-item img {
	width: 100%;
	display: block;
}

.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery-columns-2:not(.gallery-gifboxes) .gallery-item:nth-of-type(2n),
.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery-columns-9 .gallery-item:nth-of-type(9n) {
	margin-right: 0;
}

.gallery-columns-1.gallery-size-medium figure.gallery-item:nth-of-type(1n+1),
.gallery-columns-1.gallery-size-thumbnail figure.gallery-item:nth-of-type(1n+1),
.gallery-columns-2.gallery-size-thumbnail figure.gallery-item:nth-of-type(2n+1),
.gallery-columns-3.gallery-size-thumbnail figure.gallery-item:nth-of-type(3n+1) {
	clear: left;
}



/* RESPONSIVE MENU */
#responsive-icon { display: none; }
	.lines-button {
		background: none repeat 0 center rgba(0, 0, 0, 0);
		border: 0 none;
		cursor: pointer;
		display: inline-block;
		outline: 0 none;
		position: absolute;
	}
	.lines {
		background: none repeat 0 0 #b99f7c;
		display: inline-block;
		height: 0.3em;
		position: relative;
		width: 2.5em;
	}
	.lines::before, .lines::after {
		background: none repeat 0 0 #b99f7c;
		content: "";
		display: inline-block;
		height: 0.3em;
		left: 0;
		position: absolute;
		transform-origin: 1px center 0;
		width: 2.5em;
	}
	.lines::before { top: 0.8em }
	.lines::after { top: -0.8em }
	.lines-button .lines::before, .lines-button .lines::after {
		transform-origin: 50% 50% 0;
		transition: top 0.5s ease 0.65s, transform 0.5s ease 0s;
	}
	#responsive-icon.close .lines-button .lines { background: none repeat 0 0 transparent }
	#responsive-icon.close .lines-button .lines::before, #responsive-icon.close .lines-button .lines::after {
		top: 0;
		transition: top 0.5s ease 0s, transform 0.5s ease 0.65s;
		width: 2.5em;
	}
	#responsive-icon.close .lines-button .lines::before { transform: rotate3d(0, 0, 1, 45deg) }
	#responsive-icon.close .lines-button .lines::after { transform: rotate3d(0, 0, 1, -45deg) }
	
	
	
/* SCROLLBAR */
	.mCS-sf3-custom.mCSB_inside > .mCSB_container { margin-left: 5px; margin-right: 15px;}
	.mCS-sf3-custom.mCSB_inside .mCSB_container.mCS_no_scrollbar_y.mCS_no_scrollbar_y { margin: 0 5px; }

	.mCS-sf3-custom.mCSB_scrollTools .mCSB_draggerRail,
	.mCS-sf3-custom.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 3px; }
	.mCS-sf3-custom.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; }
	.mCS-sf3-custom.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 3px;
		margin: 7px auto;
	}
	
	.mCS-sf3-custom.mCSB_scrollTools .mCSB_draggerRail{ background-color: rgba(243, 221, 187, 0.3); }
	.mCS-sf3-custom.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: rgba(243, 221, 187, 0.6); }
	.mCS-sf3-custom.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: #b99f7c; }
	.mCS-sf3-custom.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-sf3-custom.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: #b99f7c; }
	
	.mCS-sf3-custom.mCSB_scrollTools .mCSB_buttonUp{	background-position: -80px 0; }
	.mCS-sf3-custom.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }
	.mCS-sf3-custom.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }
	.mCS-sf3-custom.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }	
	
	.mCustomScrollbar.mCS_no_scrollbar:not(.padding-topbottom) .mCSB_scrollTools .mCSB_draggerContainer {opacity: 0;}	
	
	
	
	
/*PRETTYPHOTO Nimble Portfolio*/
.-filters {
	text-align: center;
	margin-bottom: .5em;
}
.-skin-default .-filters .-filter	{
	border: 0 none !important;
	text-transform: uppercase;
	margin: 0 auto !important;
	padding: 0 !important;
	font-size: .85em;
}
.-skin-default .-filters .-filter.active {
	background: none !important;
	color: #fff;
}
.-skin-default .-item.-columns3 {
	width: calc(100% / 3 - 1.1em) !important;
}
.-skin-default .-items .-item {
	margin: .5em !important;
}
.-skin-default .-items .-item .itembox {
	box-sizing: content-box;
	height: 0;
	overflow: hidden;
	padding-bottom: 90%;

	background: #000 !important;
	border: none !important;
	box-shadow: none !important;
	position: relative;
	width: 100% !important;
	height: 100%;
}

.-skin-default .-items .-item .itembox > a > img {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	/*height: 100%;*/
	width: auto;
	max-width: none !important;
}

.-skin-default .-item .title {
	display: none;
}

#nimble_portfolio_social {
	display: none !important;
}




/* Lightbox */
.pp_gallery ul a img{height: 100%; }

  .pp_pic_holder.pp_default {
  	/*top: 50% !important;
  	transform: translateY(-50%);
    width: 70% !important;
    left: 15% !important;
    max-height: 80% !important;
    overflow: hidden;*/
    
    height: auto;
    /*left: 50% !important;
    max-height: 80% !important;
    max-width: 70% !important;*/
    /*width: 70% !important;*/
    /*overflow: hidden;*/
    /*top: 50% !important;
    transform: translate(-50%, -50%);*/
  }

  div.pp_default .pp_content_container .pp_left {padding-left: 0!important;}
  div.pp_default .pp_content_container .pp_right {padding-right: 0!important;}

  .pp_content {
    /*width: 100%!important;
    height: auto!important;*/
  }

  .pp_hoverContainer, .pp_fade {
    /*width: 100%!important;
    height: 100%!important;*/
  }

  #pp_full_res img, #pp_full_res iframe {
    /*width: 100% !important;
    height: auto!important;*/
  }

  /*#pp_full_res iframe {
    width: 100%!important;
    height: 100%!important;
    margin-bottom: 0 !important;
  }*/

  .pp_details {
    width: 100%!important;
  }

div.pp_overlay {
  background: #000 none repeat scroll 0 0 !important;
  opacity: .9 !important;
  width: 100% !important;
  min-height: 100vh !important;
  position: fixed !important;
}

div.pp_default .pp_description {
	line-height: 30px !important;
}

.pp_full_res {background-color: #000;}

div.pp_default .pp_content_container .pp_details,
div.ppt,.pp_social,div.pp_default .pp_nav .pp_play,div.pp_default .pp_nav .pp_pause,a.pp_arrow_previous,a.pp_arrow_next,.pp_top,.pp_bottom,div.pp_default .pp_expand {
  display: none !important;
}

div.pp_default .pp_content_container .pp_left,div.pp_default .pp_content_container .pp_right,div.pp_default .pp_content,div.light_rounded .pp_content {
  background: 0 none !important;
}

div.pp_default .pp_next {background: url("img/icons/arrowRight.png") 98% center no-repeat !important;}
div.pp_default .pp_previous {background: url("img/icons/arrowLeft.png") 2% center no-repeat !important;}

div.pp_default .pp_close, .close-icon {
	position: fixed !important;
	top: 1em !important;
	right: 1em !important;
	background: url("img/icons/close.png") center center no-repeat !important;
	background-size: 100% 100% !important;
	height: 32px !important; width: 32px !important;
	cursor: pointer;
}

.-skin-default .-items .-item .itembox .-mask, .-skin-default .-items .-item .itembox .genericon {
	display: block !important;
	opacity: 0 !important;
}

div.pp_default .pp_loaderIcon {
  background: transparent url("./img/icons/loadingGold.png") center center no-repeat !important;
  background-size: contain !important;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px !important;
  animation: rotateWheel 2s infinite linear;
}
.loading-icon {
  width: 32px;
  height: 32px;
	margin: 0.5em auto;
	text-align: center;
  background: transparent url("./img/icons/loadingGold.png") center center no-repeat !important;
  animation: rotateWheel 2s infinite linear;
}

@keyframes rotateWheel{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}


#mobile-indicator, #em-indicator{
	display: none;
}
#em-indicator {
	width: 1em;
}

/**
 * 8.0 Media Queries
 */
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}

@supports (-ms-ime-align:auto) {
}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  input {
    font-size: 16px;
  }
}

@media screen and (min-device-width: 1025px) {
	.mainnav ul:hover .menu-text {
		display: block;
	}	
	.mainnav ul li a:hover .menu-icon, .mainnav ul li.active .menu-icon{
		transition: filter 0.6s linear;
		filter: grayscale(0);
	}

	.mainnav ul li a:hover .menu-text, .mainnav ul li.active .menu-text{
		color: #f3ddbb;
	}
	.mainnav ul li.active .menu-text {
		transition: font-size 0.6s linear;
		font-size: 1.2em;
	}

 .frame {
		background-image:
			url("./img/bg-img/UI_boxOuter_lb.png"),
			url("./img/bg-img/UI_boxOuter_lt.png"),
			url("./img/bg-img/UI_boxOuter_rb.png"),
			url("./img/bg-img/UI_boxOuter_rt.png"),
			url("./img/bg-img/UI_boxOuter_r.png"),
			url("./img/bg-img/UI_boxOuter_l.png"),
			url("./img/bg-img/UI_boxOuter_b.png"),
			url("./img/bg-img/UI_boxOuter_t.png");
		background-repeat:
			no-repeat,
			no-repeat,
			no-repeat,
			no-repeat,
			repeat-y,
			repeat-y,
			repeat-x,
			repeat-x;
		background-position:
			left bottom,
			left top,
			right bottom,
			right top,
			right 18px,
			left 18px,
			left bottom,
			left top;
	}
	/*.frame {
		border-image: url("./img/border.png") 17 17 17 17 / 17px 17px 17px 17px / 1px 1px 1px 1px repeat repeat;
    border-style: solid;
    border-width: 1px;
    padding: 17px;
	}*/
	
	.goldframe{
		background-image:
			url("./img/bg-img/goldframe_r.png"),
			url("./img/bg-img/goldframe_l.png"),
			url("./img/bg-img/goldframe_b.png"),
			url("./img/bg-img/goldframe_t.png");
		background-repeat:
			repeat-y,
			repeat-y,
			repeat-x,
			repeat-x;
		background-position:
			right top,
			left top,
			left bottom,
			left top;
		padding: 4px;
	}
	
	.goldframe:before{
		content: "";
		left: 0;
		top: 0;
		width: 11px;
		height: 100%;
		background-image:
			url("./img/bg-img/goldframe_lb.png"),
			url("./img/bg-img/goldframe_lt.png");
		background-repeat:
			no-repeat,
			no-repeat;
		background-position:
			left bottom,
			left top;
		position: absolute;
	}
	.goldframe:after{
		content: "";
		right: 0;
		top: 0;
		width: 11px;
		height: 100%;
		background-image:
			url("./img/bg-img/goldframe_rb.png"),
			url("./img/bg-img/goldframe_rt.png");
		background-repeat:
			no-repeat,
			no-repeat;
		background-position:
			right bottom,
			right top;
		position: absolute;
	}	

	.goldframe-btn:hover {
		color: #b99f7c;
	}

	.get-retailer button[disabled]:hover:after {
		content: attr(data-msg);
		position: absolute;
		left: 0;
		opacity: 1;
		top: 2.75em;
		font-size: .85em;
		color: #fff;
		text-align: center;
		text-transform: uppercase;
	}
	
	.mainnav ul li a .menu-text,
	.get-retailer > div a,
	.get-retailer > div a:hover,
	.get-retailer > div a.active,
	.get-retailer button {
		transition: all .6s linear;
	}

	.ajax-container-content {transition: all 0.15s linear;}
	.ajax-container-content.ajax-content-open  {transition: all 0.15s linear;}
	
	.-skin-default .-items .-item .itembox .-mask, .-skin-default .-items .-item .itembox .genericon,
	.-skin-default .-items .-item .itembox:hover .-mask, .-skin-default .-items .-item .itembox:hover .genericon{
		transition: opacity 0.6s linear !important;
	}
	.-skin-default .-items .-item .itembox:hover .-mask, .-skin-default .-items .-item .itembox:hover .genericon {
		opacity: .9 !important;
	}


	.-skin-default .-filters .-filter, .-skin-default .-filters .-filter.active, .-skin-default .-filters .-filter:hover,
	.topnav a, .topnav a:hover,
	.goldframe-btn, .goldframe-btn:hover,
	.mainnav ul li a:hover .menu-text, .mainnav ul li.active .menu-text,
	.black-btn a, .black-btn a:hover, .red-btn a:hover, .red-btn a{transition: color .6s linear;}
	
	.big-image-box a:hover h4, .big-image-box a:hover .description,
	.-skin-default .-filters .-filter:hover, .topnav a:hover,
	.black-btn a:hover, .red-btn a:hover{
		color: #fff;
	}

	.logo-fixed,.logo-visible, .ani-over {
		transition: opacity .6s linear;
	}
	.logo-visible { opacity: 1; }
	
	.big-image-box, .big-image-box:hover{ transition: box-shadow .3s linear; }	

	.big-image-box h4, .big-image-box .description {
		transition: color .3s linear;
	}
	.big-image-box:hover{
		box-shadow: 0px 1px 7px 4px rgba(255,255,255,1),  inset 0px 3px 31px 12px rgba(161,112,37,0.8);;
	}

	.nav-factions ul li a:hover{
		filter: grayscale(0);
	}	
	
	.nav-factions ul li a, .nav-factions ul li a:hover{
		transition: filter .6s linear;
	}

	div.pp_default .pp_next,div.pp_default .pp_previous, div.pp_default .pp_next:hover, div.pp_default .pp_previous:hover{transition: background 0.5s ease-in-out;}
	div.pp_default .pp_next:hover { background: url("img/icons/arrowRight.png") 100% center no-repeat !important;}
	div.pp_default .pp_previous:hover {background: url("img/icons/arrowLeft.png") 0% center no-repeat !important;}
	div.pp_default .pp_close, .close-icon {
		opacity: 0.6 !important;
		transition: opacity 0.6s linear;
	}
	div.pp_default .pp_close:hover, .close-icon:hover {opacity: 1 !important;transition: opacity 0.6s linear;}

	a#closecookie:hover, a#closecookie{
		transition: background-color .6s linear;
	}
	a#closecookie:hover {
		color: #352f28;
		background-color: #fff;
	}
	
	.retailer-site {
		background-attachment: fixed;
	}

}

@media screen and (max-device-width: 1024px) {
	.frame {
		border: 5px solid #5d564b;
	}
	.goldframe {
		border: 2px solid #daaa78;
	}
}

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

	/*main > section, .retailer-site {
		background-size: auto 100%, cover;
		background-position: left top, center center;
	}*/
	.content-box {
		flex: 0 0 calc(70% - 5vw);
	}
}

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

	.retailer-wrapper {
		margin-left: 0;
		flex: 0 0 75%;
		padding: 1.5em 2em;
	}
	
	/*.col-3 {width: calc(100% / 2 - 1em); margin-right: 2em;}
	.col-3:nth-child(3n){ margin-right: auto;}
	.col-3:nth-child(2n){ margin-right: 0;}
	.form-20 { width: calc(25% - 1em); }*/
}

@media screen and (min-width: 1031px) {
	.mainnav-holder {
		background-image: url("img/nav-top.png"), url("img/nav-end.png");
		background-position: left top, left bottom;
		background-repeat: no-repeat;
		padding: 90px 0 87px;
		position: fixed;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		z-index: 20;		
	}
	.mainnav ul li {
		background: transparent url("./img/nav-mid.png") repeat-y left top;
		display: block;
		/*margin: 0.125em 0.25em;*/
		/*height: 73px;*/
	}
	.mainnav .menu-icon{
	  background-image: url("./img/icons/menu-icons_sprite.png");
	  background-position: 4px 10px;
	  background-repeat: no-repeat;
		display: inline-block;
	  margin-right: 10px;
	  padding: 34px 0 34px 43px;
	  position: relative;
 	 	filter: grayscale(1);
	}
	.mainnav li:nth-of-type(1) .menu-icon {background-position: 4px 7px}
	.mainnav li:nth-of-type(2) .menu-icon {background-position: 4px -44px} 
	.mainnav li:nth-of-type(3) .menu-icon {background-position: 4px -96px}
	.mainnav li:nth-of-type(4) .menu-icon {background-position: 4px -147px}
	.mainnav li:nth-of-type(5) .menu-icon {background-position: 4px -198px}
	.mainnav li:nth-of-type(6) .menu-icon {background-position: 4px -252px}
	.mainnav li:nth-of-type(7) .menu-icon {background-position: 4px -304px}
	.mainnav li:nth-of-type(8) .menu-icon {background-position: 4px -350px}	

	.menu-text { display: none;}
	
	
	.red-btn a, .black-btn a{
		margin: 0 77px;
	}	
	.black-btn a {
		background: transparent url("./img/btns/btn-black-mid.png") repeat-x left center / auto 100%;
	}
	.red-btn a {
		background: transparent url("./img/btns/btn-red-mid.png") repeat-x left center / auto 100%;
	}
		.red-btn a:before, .red-btn a:after,
		.black-btn a:before, .black-btn a:after{
			display: block;
			content: "";
			position: absolute;
			width: 57px;
			height: 100%;
			z-index: 1;
		}
		.black-btn a:before, .black-btn a:after{
			background: transparent url("./img/btns/btn-black-l.png") no-repeat right center / 100% 100%;
		}
		.red-btn a:before, .red-btn a:after{
			background: transparent url("./img/btns/btn-red-l.png") no-repeat right center / 100% 100%;
		}
		.red-btn a:before, .black-btn a:before{
			left: -57px;
			bottom: 0;
		}
		.red-btn a:after, .black-btn a:after{
			background-position: left center;
			right: -57px;
			top: 0;
		}
		.black-btn a:after{
			background-image: url("./img/btns/btn-black-r.png");
		}
		.red-btn a:after{
			background-image: url("./img/btns/btn-red-r.png");
		}

}


@media screen and (max-width: 1030px) {
	#mobile-indicator {
		display: block;
		content: '';
		width: 1px;
		height: 1px;
		overflow: hidden;
	}
	.language-switcher select { font-size: 18px; }
	.logo-fixed, .logo-visible{
		display: none;
	}
	
	.dragon, .icon { display: none; }
	.bg-image-two:not(.retailer-site), .bg-image-one:not(.retailer-site) {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5vh 0;
	}
	.bg-image-two {
		background-size: contain, cover;
		background-position: center center;
	}
	.ajax-main { width: 80%;}
	.content-wrapper {
		justify-content: center;
		width: 80%;
	}
	
	.content-box {
		flex: 0 0 100%;
		height: auto;
	}
	.full-height-wrapper {
		display: block;
	}
	
	.padding-topbottom, .content-box {
		padding: 1em;
	}

	#responsive-icon{
		cursor: pointer;
		position: fixed;
		width: 3em; 
		height: 3em;
		line-height: 30px;
		font-size: 1em;
		top: 10px;
		right: 1em;
		display: block;
		z-index: 50;
	}	
	
	.timeline-timelinecircle .swiper-slide:after { left: calc(50% - 2.5em + 80px); }

	
	.nav-wrapper {
		transform: translateY(-100%);
		display: flex;
		flex-wrap: wrap;
    background-color: rgba(0, 0, 0, 0.95);
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 3em 5vw 2em;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 45;
	}
	
	
	.nav-wrapper.activemenu {
		transform: translateY(0);
	}
	.nav-wrapper  .mainnav {
		margin-right: 0;
		padding: 0;
	}
	.nav-wrapper  .mainnav ul{
		padding: 0;
	}
	
	.nav-wrapper .mainnav ul li {
		display: block;
		text-align: center;
		font-size: 1.5em;
		position: relative;
		margin: 0;
	}
	
	.nav-wrapper .mainnav ul li a {
		margin: .25em .5em;
		padding: .5em .25em;
		display: block;
	}

	
	.nav-wrapper.activemenu .mainnav-holder, .nav-wrapper.activemenu .topnav-holder, .nav-wrapper.activemenu .bottom-nav{
		position: relative;
	}
	
	.nav-wrapper.activemenu .topnav-holder{
		flex-wrap: wrap;
		align-items: flex-start;
	}
	
	.nav-wrapper.activemenu .topnav-holder .language-switcher {
		margin-left: 0;
	}
	
	.nav-wrapper.activemenu .topnav-holder,
	.nav-wrapper.activemenu .topnav-holder .language-switcher{
		order: 1;
	}
	.nav-wrapper.activemenu .mainnav-holder {
		order: 2;
		width: 100%;
		justify-content: center;
		margin: 1em auto;
	}
	.nav-wrapper.activemenu .bottom-nav, .nav-wrapper.activemenu .so-follow{
		order: 2;
	}
	
	.nav-wrapper.activemenu .topnav-holder .topnav {
		/*margin: 10px 0;*/
		order: 3;
		flex: 0 0 100%;
		text-align: center;
	}
	.nav-wrapper.activemenu .topnav-holder .topnav a { font-size: 0.9em; }
	.nav-wrapper.activemenu .bottom-nav{
		/*align-items: center;
    justify-content: center;
    width: 100%;*/
    flex-flow: column nowrap;
    justify-content: center;
		padding: 0;
	}
	
	.nav-wrapper.activemenu .bottom-nav .flex-right {
		margin-right: auto;
	}
	.nav-wrapper.activemenu .bottom-nav .order-btn {
		order: 1;
	}
	.nav-wrapper.activemenu .bottom-nav div:not(.order-btn) {
		order: 2;
	}
	

	.header-shop .black-btn a{
		color: #fff;
		padding: .25em;
	}
	/*.boxshots:not(:empty) { margin: 0 auto 2em auto}*/
	.timelinecontent-holder { width: 80%; }

}


@media (max-width: 950px) {
	.boxshots:not(:empty) {
		margin-bottom: 1.5em;
		margin-right: 0;
	}

	.form-15 { width: calc(23.33333333333333% - 1em); }
	.form-25 { width: calc(30% - 1em)}
	.form-50 { width: calc(70% - 1em); }	
}


@media (max-width: 910px) {
	.timelinecontent-holder { width: 90%; }
}

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

	.pp_pic_holder.pp_default { width: 95% !important; left: 2.5% !important; }
	.pp_hoverContainer { width: 100% !important;  height: 100% !important; }
	.pp_content, .pp_fade, #pp_full_res img { width: 100% !important; height: auto !important; }
	.pp_gallery { display: none !important; }
	div.pp_default .pp_close {top: 16px !important;}
	div.pp_default .pp_loaderIcon { width: 50% !important; height: 50% !important; }
}



@media screen and (max-width: 766px) {
	.timeline-timelinecircle .swiper-slide:after { left: calc(50% - 2.5em + 70px); }

	.content-wrapper { width: 100%;}
	.newsletter-subscription { margin-bottom: 1em; }
	.boxshots:not(:empty) { margin: 0 auto 2em auto;}
	.get-retailer div { margin-bottom: 1em}
	.get-retailer .edition { text-align: center;}
	.timeline-date { font-size: 1.2em;}
}


@media (max-width: 700px) {
	
	.intro-content { width: 90%; }
	.gallery-columns-3 .gallery-item {
		width: 50%;
		width:calc(50% - .5em);
	}
	.gallery-columns-3 .gallery-item:nth-of-type(3n) { margin-right: 0.5em; }
	.gallery-columns-3 .gallery-item:nth-of-type(2n) { margin-right: 0; }
	
	.form-20 { width: calc(30% - 1em); }
	.timeline-date { font-size: 1.1em;}
}



@media (max-width: 630px) {
	.retailer-wrapper {
		flex: 0 0 90%;
		padding: 1.5em;
	}
	.-skin-default.-columns3 .-item {
		width: calc(100% / 2 - 1.1em) !important;
	}
	.factions-units-wrapper > .goldframe {
		flex: 0 0 180px;
	}
}

@media (max-width: 550px) {	
	.big-image-holder {
		display: block;
	}
	.big-image-box {
		background-position: right top;
    background-size: 50% auto;
    margin: 0 auto 1em;
    width: 100%;	
	}
	.big-image-box .description, .big-image-box a:after {
		display: none;
	}
	.big-image-box h4 {
		text-align: left;
		padding: 2.3em 1em;
		font-size: 1.4em;
	}
	.gallery-columns-3.gallery-size-medium .gallery-item,
	.gallery-columns-3.gallery-size-thumbnail .gallery-item {
		max-width: 100%;
		float: none;
	}
	.form-15 { width: calc( 33.33333333333333% - 1em); }
	.form-20 { width: calc(50% - 1em); }
	.form-25, .form-50{ width: calc(100% - 1em);}
	.form-one-row { margin-bottom: 1em;}	
}

@media (max-width: 480px) {

	.gallery-columns-2 .gallery-item {
		width: 100%;
		margin-right: 0;
	}
	.gallery-columns-2.gallery-gifboxes .gallery-item {
		max-width: calc(100% - .5em);
		margin: 0.25em;
	}

	.col-2, .width-50, .timelinecontent-holder{ width: 100%; }
	.gallery-columns-6 .gallery-item { width: calc(50% - .5em); }
	.company-logo-leiste { order: 3;}
	.copyright { margin-bottom: 2em; order: 2;}
	#errormsg > *, .verification-error > * { font-size: 1em;}
	
	.get-retailer { width: 100%; }
}

@media (max-width: 450px) {
	.ajax-main { width: 90%;}

	.factions-units-wrapper > .goldframe {
		flex: 0 0 100%;
		margin-right: 0;
		margin-bottom: 1em;
	}	
	.factions-units-wrapper > .goldframe > img {
		width: 100%;
	}
	.factions-units {
		flex: 0 0 100%;		
	}
	
	.boxshots:not(:empty) { flex: unset; }
	.gallery-columns-5 .gallery-item { width: calc(50% - .5em); }
	
	.gallery-columns-3 .gallery-item, .gallery-columns-2 .gallery-item {
		width: 100%;
		margin-right: 0;
	}
	.gallery-columns-3 .gallery-item:nth-of-type(3n), .gallery-columns-2 .gallery-item:nth-of-type(2n) { margin-right: 0; }
	.confirm-label { margin-left: 0 !important; }
	.timeline-date { font-size: 1em;}
	
	.-skin-default.-columns3 .-item {
		width: calc(100% - 1.1em) !important;
	}	
}

@media (max-width: 340px) {
	.logo-leiste img { max-width: calc(33.33333333333333% - 1em); }
	.company-logo-leiste { margin: 0 auto 1em auto; }
	.company-logo-leiste a {
		display: inline-block;
		max-width: calc(50% - 2em);
	}

	.gallery-columns-5 .gallery-item { width: calc(100% - .5em); }	
}