.tuner {

	position: fixed;

	z-index: 1000;

	top: 190px;

	left: 100%;

	

	float:right;

	box-sizing: border-box;

	transform: translateX(-100%);

	-ms-transform: translateX(-100%);

	-moz-transform: translateX(-100%);

	-webkit-transform: translateX(-100%);


	-o-transition: transform 0.3s;

	-ms-transition: transform 0.3s;

	-moz-transition: transform 0.3s;

	-webkit-transition: transform 0.3s;

	-webkit-border-bottom-right-radius: 3px;

	-moz-border-bottom-right-radius: 3px;

	border-bottom-right-radius: 3px;

	text-align: right;

	  

	}

.tuner p {

	color: #ffffff;

	font-size: 16px;

	font-family: "Merriweather";

	font-weight: 700;

}

.tuner i {

	position: absolute;

	top: 0;	

	width: 100%;

	height: 50px;

	background:url(../../pic/img/admission.gif);

	font-size: 28px;

	background-color: #fff;

	line-height: 60px;

	text-align: right;

	color: #fff;

	cursor: pointer;

	-webkit-border-top-right-radius: 3px;

	-moz-border-top-right-radius: 3px;

	border-top-right-radius: 3px;	

	-webkit-border-bottom-right-radius: 3px;

	-moz-border-bottom-right-radius: 3px;

	border-bottom-right-radius: 3px;		

}

.tuner label {

	font-size: 12px;

	line-height: 44px;

	text-transform: uppercase;

	color: #fff;

}

.tuner .colors,

.tuner .patterns {

	color: #fff;

	font-size: 12px;

}



.tuner .colors li,

.tuner .patterns li {

	position: relative;

	display: inline-block;

	width: 30px;

	height: 30px;

	padding: 0 !important;

	margin: 5px;

	cursor: pointer;

	background-image: url(../../img/pattern/1.png);

	-webkit-border-radius: 3px;

	-moz-border-radius: 3px;

	border-radius: 3px;	

}

.tuner .patterns li:nth-child(2){

	background-image: url(../../img/pattern/agsquare.png);

}

.tuner .patterns li:nth-child(3){

	background-image: url(../../img/pattern/brickwall.png);

}

.tuner .patterns li:nth-child(4){

	background-image: url(../../img/pattern/bright_squares.png);

}

.tuner .patterns li:nth-child(5){

	background-image: url(../../img/pattern/debut_light.png);

}

.tuner .patterns li:nth-child(6){

	background-image: url(../../img/pattern/gplaypattern.png);

}

.tuner .patterns li:nth-child(7){

	background-image: url(../../img/pattern/light_wool.png);

}

.tuner .patterns li:nth-child(8){

	background-image: url(../../img/pattern/subtle_dots.png);

}

.tuner .patterns li:before{

	content: none;

}

.tuner .colors li span,

.tuner .patterns  li span{

	position: relative;

	display: block;

	width: 25px;

	height: 25px;

	margin: 1px;

	border: 3px solid transparent;

	cursor: pointer;

}



.tuner .patterns li span{

	color: #fff;

	text-align: center;

}

.tuner .patterns li {

	border: 1px solid #b0b0b0;

	box-sizing: border-box;

}

.tuner .patterns li.active{

	border-color: #18bb7c;

}



.tuner .colors .active span,

.tuner .patterns .active span {

	border-color: #213540;

	box-shadow: 0 0 0 1px #fff;	

}

.tuner .colors .active span:after,

.tuner .colors .active span:before,

.tuner .patterns .active span:after,

.tuner .patterns .active span:before {

	content: '';

	position: absolute;

	top: 5px;

	left: 12px;

	width: 1px;

	height: 15px;

	background: #fff;

}

.tuner .colors .active span:before,

.tuner .patterns .active span:before {

	top: 12px;

	left: 5px;

	width: 15px;

	height: 1px;

}

.tuner .color-blue {

	background: #008fd5;

}

.tuner .color-green {

	background: #00b85d;

}

.tuner .color-pink {

	background: #e5669c;

}

.tuner .color-cyan {

	background: #00aba5;

}

.tuner .color-orange {

	background: #f5961d;

}

.tuner .color-purple {

	background: #8560a8;

}

.tuner .layouts li {

	margin-top: 10px;

	background: #000;

	font-size: 12px;

	line-height: 24px;

	text-align: center;

	color: #fff;

	cursor: pointer;

}

.tuner .layouts li:first-child {

	margin-top: 0;

}

.tuner .layouts .active {

	background: #fff;

	color: #213540;

	cursor: default;

}

.tuner-visible {

	transform: translateX(0);

	-ms-transform: translateX(0);

	-moz-transform: translateX(0);

	-webkit-transform: translateX(0);

}

.tuner .color-picker{

	display: inline-block;

	width: 30px;

	height: 30px;

	margin: 5px;

	border-radius: 3px;

}

.tuner .layout-style, 

.tuner .colors, 

.tuner .patterns {

	padding: 20px 0 15px 0;

	border-bottom: 2px solid #ffffff;

	    display: none;

		

}

.tuner .patterns {

	border: 0;

	padding: 20px 20px 15px 20px;

}

.tuner .patterns:after{

	content: "";

	display: table;

	clear: both;

}

.tuner .page-style {

	width: 60px;

	height: 40px;

	border: 1px solid #b0b0b0;

	border-radius: 3px;

	box-sizing: border-box;

	display: inline-block;

	margin: 5px 5px;

	z-index: 1;

	position: relative;

	background-color: #ffffff;

	cursor: pointer;

	font-size: 12px;

	font-family: "Merriweather";

	font-weight: 300;

	text-align: center;

	line-height: 40px;

}

.tuner .page-style.wide{

	background-color: #ffffff;

}

.tuner .page-style.boxed{

	background-color: #e6e6e6;

}

.tuner .page-style.boxed:before{

	content: "";

	position: absolute;

	z-index: -1;

	width: 40px;

	box-sizing: border-box;

	border-left: 1px solid #b0b0b0;

	border-right: 1px solid #b0b0b0;

	background-color: #ffffff;

	height: 100%;

	top: 0;

	left: 50%;

	transform: translateX(-50%);

	-ms-transform: translateX(-50%);

	-moz-transform: translateX(-50%);

	-webkit-transform: translateX(-50%);

}

.tuner .page-style.active,

.tuner .page-style.active.boxed:before{

	border-color: #18bb7c;

	color: #18bb7c;

}

@media screen and (max-width: 767px) { /* phone */

	.tuner {

		top: 56px;

	}

}