@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-Medium.otf') format('truetype'),
       url('../fonts/Gotham/GothamMedium.ttf') format('truetype');
}

body {
	margin: 0;
	/*position: fixed;*/
	top: 0; left: 0; width: 100%; height: 10000px;
	padding: 100px 100px 100px;
	background: #20272f;
}
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0; margin: 0;
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}
.spacer {
	position: relative;
}
/*.scrollable {
	will-change: transform;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}*/

#container {
	max-width: 1920px !important;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

#design {
	position: fixed;
	top: 0; right: 10px; width: 82%; min-height: 100%;
	background-image: url('../../../PS/design5.png');
	background-repeat: no-repeat;
	background-size: 1280px auto;
	background-position: center 45px;
	margin: 0 9%;
	opacity: 0;
	z-index: -2;
}

#menubg {
	z-index: 99;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 155px;
	background: rgba(255,255,255,0);

	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
#menubg.scroll {
	height: 105px;
	background: rgba(255,255,255,0.95);
}

#header {
	overflow: hidden;
	position: fixed;
	top: 100px;
	font-family: 'Cinzel', serif;
	width: 50%;
	float: left;
	z-index: 100;

	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
#header.scroll {
	top: 37px;
}
#header div {
	display: inline-block;
	float: left;
}
#header .logo {
	width: 44px;
	height: 40px;
	background-image: url('../i/logo-b.png');
	background-size: 54px;
	background-position: -7px -13px;
	background-repeat: no-repeat;
}
#header .txt {
	font-family: 'Cinzel', serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 4px;
	margin-left: 21px;
	margin-top: 6px;
}

#menu {
	position: fixed;
	top: 100px;
	/*overflow: hidden;*/
	font-family: 'Cinzel', serif;
	width: 50%;
	float: right;
	text-align: right;
	right: 100px;
	z-index: 100;

	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
#menu.scroll {
	top: 37px;
}
#menu .txt {
	margin-bottom: 10px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 5px;
	cursor: pointer;
}
#menu .txt, #menu .txt:hover, #menu .txt:active, #menu .txt:focus {
	text-decoration: none;
	color: black;
}
#menu .txtanim {
	overflow: hidden;
	position: absolute;
	right: 50px;
	top: 76px;
	width: 90px;
}
#menu .txtanim .txt {
	float: right;
	width: 100%;
	position: relative;
	left: 0%;
	margin-bottom: 19px;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 3px;

	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
#menu .txtanim .txt.l {
	left: 100%;
}
#menu .points {
	margin-top: 48px;
}
#menu .point {
	overflow: hidden;
	width: 100%;
	text-align: right;
	margin-bottom: 12px;
	position: relative;
	height: 20px !important;
}
#menu .point-cont {
	position: absolute;
	top: 10px;
	right: 0;
	width: 9px;
	height: 9px;
	background: #474645;
	border-radius: 20px;
	z-index: 1;
	border: 3px solid #fffefd;

	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
#menu .point.sel .point-cont {
	background: #fafafa;
	border: 3px solid #474645;
}

#middles {
	position: absolute;
	/*top: 175px;*/
	/*left: 100px;*/
	left: 6.3%;
	right: 115px;
	width: auto;
	height: 700px;
	-webkit-transform: scale(1.15);
	-ms-transform: scale(1.15);
	-o-transform: scale(1.15);
	transform: scale(1.15);
	top: 0;
}
#middles .middle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	opacity: 1;

	-webkit-transition: all 0.7s;
	-o-transition: all 0.7s;
	transition: all 0.7s;
}
#middles .middle.up {
	top: -100px;
	opacity: 0;
}
#middles .middle.down {
	top: 100px;
	opacity: 0;
}
#middles .middle-pic {
	height: 100px;
	background-image: url('../i/header-pic.png');
	background-repeat: no-repeat;
	background-size: 395px;
	/*margin-top: 42px;*/
	background-position: center;
	/*width: 100%;*/
	left: 95px;
	right: 115px;
}
/* instrument overview */
#middles .buttons {
	float: left;
	width: 672px;
	left: 50%;
	margin-left: -346px;
	overflow: hidden;
}
#middles .purchase-btn {
	display: none;
	z-index: 2;
	width: 100%;
	margin-left: -100px;
}
#middles .purchase-btn input {
	background: #f0eae6;
	border: 0;
	width: 250px;
	padding: 13px 0;
	float: left;
	font-size: 13px;
	letter-spacing: 2px;
	cursor: pointer;
	text-transform: uppercase;
	color: #adadad;
	font-family: 'Gotham', sans-serif;

	position: relative;
	left: 50%;
	margin-left: -125px;
}
.btn-desc {
	background: #f0eae6;
	border: 0;
	width: 143px;
	padding: 8px 0;
	margin-right: 33px;
	float: left;
	font-family: 'Cinzel', serif;
	font-size: 10px;
	letter-spacing: 3px;
	color: #222;
	cursor: pointer;
}
.btn-last {
	margin-right: 0;
	width: 144px;
}
#middles .desc {
	float: left;
	height: 213px; /*212.65822784810*/
	width: 672px;
	margin-left: -346px;
	/*width: 53.2%;
	margin-left: -25%;*/
	left: 50%;
	box-shadow: 0 0 35px rgba(36,48,59,0.18);
	opacity: 1;
}
#middles .desc > div {
	float: left;
	width: 100%;
	height: 213px;
	font-family: 'Gotham', sans-serif;
	font-size: 13px;
	letter-spacing: 0px;
	line-height: 1.5;
	color: #555;
}
#middles .desc .instrument-play {
	background: url('../i/instrument-bg.png');
	background-position: 0 -72px; /* -72 -357 -642 -927 - 285 per page */
	padding: 36px 42px;
	position: relative;
}
#middles .desc .instrument-play .loading-screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(255,255,255,0.9);
	z-index: 3;
}
#middles .desc .instrument-play .loading-screen span {
	color: #999;
	font-size: 0.9em;
	position: absolute;
	bottom: 20px;
	width: 100%;
	left: 0;
}
#middles .desc .instrument-play .loading-screen div {
	position: absolute;
	width: 100%;
	height: 20px;
	top: 50%;
	margin-top: -10px;
}
#middles .instrument-play .text-column {
	width: 151px;
	float: left;
}
#middles .instrument-play .layer {
	position: relative;
}
#middles .instrument-play .layer.on .knob {
	background: url('../i/instrument/volknob.png');
}
#middles .instrument-play .layer.s .knob {
	background: url('../i/instrument/volknob-sel.png');
}
#middles .instrument-play .layer .knob {
	width: 29px;
	height: 29px;
	position: absolute;
	left: -10px;
	top: -7px;
	background-repeat: no-repeat !important;
	/*background-position: 0 -29px !important;*/
	background-size: 100% auto !important;

	background: none;

	z-index: 1;
}
#middles .instrument-play .layer .btn-power {
	width: 9px;
	height: 11px;
	float: left;
	background: url('../i/instrument/power.png');
	background-size: 100% auto;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	position: relative;
	top: 2px;
	z-index: 2;
}
#middles .instrument-play .layer.on .btn-power {
	background-position: 0px -11px;
}
#middles .instrument-play .layer.s .btn-power {
	background-position: 0px -22px;
}
#middles .instrument-play .layer .layer-name {
	font-family: 'Gotham', sans-serif;
	text-transform: uppercase;
	font-size: 9px;
	padding: 2px 0 15px 30px;
	letter-spacing: 1.5px;
	color: #bbbbbb;/* #cccccc */
}
#middles .instrument-play .layer.on .layer-name {
	color: #989592; /* #989592 */
}
#middles .instrument-play .layer.s .layer-name {
	color: #5aa49f; /* #70c4bf */
}
#middles .instrument-play .btn-save, #middles .instrument-play .btn-delete {
	height: 12px;
	position: absolute;
	top: 158px;
	background-repeat: no-repeat;
}
#middles .instrument-play .btn-save {
	background: url('../i/instrument/btn-save.png');
	width: 12px;
	left: 40px;
}
#middles .instrument-play .btn-delete {
	background: url('../i/instrument/btn-delete.png');
	width: 11px;
	left: 62px;
}
#middles .instrument-play .btn-save:hover, #middles .instrument-play .btn-delete:hover {
	background-position: 0px -48px;
}
#middles .instrument-play .btn-preset {
	position: absolute;
	top: 156px;
	left: 86px;
	font-family: verdana;
	font-size: 10px;
	color: #bbb;
}
#middles .instrument-play .preset-menu {
	display: block;
	background: white;
	position: absolute;
	top: 175px;
	left: 115px;
	box-shadow: 0 0 4px 0px #555555;
	padding: 4px 0 5px;
	z-index: 99;
}
#middles .instrument-play .preset-menu.hid {
	display: none;
}
#middles .instrument-play .preset-menu .preset-name {
	font-family: arial;
	font-size: 11px;
	font-weight: bolder;
	padding: 2px 27px 3px;
}
#middles .instrument-play .preset-menu .preset-name:hover {
	background: #cccccc;
}
/* cursors and selections */
#middles .instrument-play *, .txt {
	cursor: default;
	-webkit-touch-callout: none;
     -webkit-user-select: none;
      -khtml-user-select: none;
        -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;
}
#middles .desc-part {
	background: #fbf5f1;
	padding: 36px 42px;
}
#middles .desc #player {
	height: 20px;
	background: #fff;
}
#middles .desc #player .play,
#middles .desc #player .stop {
	position: relative;
	height: 20px;
	width: 20px;
	background-size: 11px;
	background-repeat: no-repeat;
	background-position: 4px;
	float: left;
	opacity: 0.5;
}
#middles .desc #player .play:hover,
#middles .desc #player .stop:hover {
	opacity: 1;
}
#middles .desc #player .play {
	background-image: url('../i/icon/play-button2.png');
	/*width: 22px;
	border-right: 3px solid #aaa;*/
}
#middles .desc #player .stop {
	background-image: url('../i/icon/stop-button2.png');
	background-size: 9px;
	background-position: 5px 6px;
}
#middles .desc #player .bar-container {
	float: left;
	height: 20px;
	position: absolute;
	left: 20px;
	right: 0;
	width: auto;
	background: #eee;
}
#middles .desc #player .bar-container .bar {
	position: absolute;
	width: 2px;
	height: 20px;
	background: #ccc;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
#middles .desc .vid {
	background: white;
	position: absolute;
	width: 275px;
	height: 155px;
	background-size: 100%;
	background-repeat: no-repeat;
}
#middles .desc .vid.teaser {
	background-image: url('../i/thumbnail.png');
}
#middles .desc .vid.walkthrough {
	background-image: url('../i/thumbnail2.png');
	left: 350px;
}
.mobile-thumbnail {
	display: none;
}

#scroller {
	position: fixed;
	bottom: 10px;
	width: 68px;
	height: 45px;
	left: 50%;
	margin-left: -41px;
}
#scroller .icon {
	background-image: url('../i/mouse.png');
	background-size: 22px;
	position: absolute;
	top: 0px;
	left: 0;
	width: 94%;
	height: 29px;
	background-repeat: no-repeat;
	background-position: center;
}
#scroller .txt {
	font-family: sans-serif;
	text-align: center;
	font-size: 6px;
	letter-spacing: 1px;
	position: absolute;
	bottom: 3px;
	color: white;
	width: 100%;
}

#bgs, #bgs * {
	position: fixed;
	top: 0; right: 0;
}
#bgs {
	z-index: -1;
}
#bgs .bg {
	background-repeat: no-repeat;
	background-size: 100% auto;

	opacity: 1;
	/*visibility: hidden;*/
}
#bgs .bg.hid {
	opacity: 0;
}

.ps2 { /* background pic mountains */
	/*width: 1000px;
	height: 402px;
	left: 50%;
	margin-left: -500px;*/
	width: 100%;
	height: 2160px;
	background-position: center -50px;
}

#middles2 iframe {
	width: 75% !important;
	left: 50%;
	margin-left: -37.5%;
}


/*** MEDIA QUERIES ***/

@media screen and (max-width: 1024px) {
	#middles .buttons {
		display: none;
	}
	#middles .desc {
		top: 440px !important;
		width: 100%;
		left: 0;
		margin-left: 0;
		box-shadow: none;
	}
	#middles .purchase-btn {
		display: block;
	}
	#scroller {
		display: none;
	}
	#middles2 iframe {
		top: 1345px !important;
	}
}

@media screen and (max-width: 980px) {
	#middles {
		-webkit-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
		left: 100px;
	}
	#middles .desc {
		top: 676px !important;
	}
	#middles .desc > div {
		font-size: 1.5em;
		height: auto !important;
		padding: 75px 100px !important;
	}
	#middles .middle-pic {
		height: 250px;
		background-size: 100% auto;
		background-position: top;
		top: 340px !important;
	}
	#header .logo {
		width: 100px;
		height: 74px;
		background-size: 117px;
	}
	#header .txt {
		font-size: 20px;
		margin-top: 32px;
		margin-left: 40px;
		letter-spacing: 7px;
	}
	#menu .txt {
		font-size: 20px;
		margin-top: 32px;
	}
	#middles .purchase-btn input {
		top: 180px;
		font-size: 1.5em;
		width: 400px;
		margin-left: -200px;
		padding: 20px 0;
	}
	#middles2 iframe {
		/*top: 2095px !important;*/
		top: 3000px !important;
	}

	#menubg.scroll {
		height: 160px;
	}
	#middles .desc .vid.teaser,
	#middles .desc .vid.walkthrough {
		display: none;
	}
	#middles .desc .mobile-thumbnail {
		display: block;
		text-align: center;
	}
	#middles .desc .mobile-thumbnail img {
		width: 100%;
	}
}