#panel-style-selector .panel-wrapper {
  position:fixed;
  top:50%;
  left:0;
  z-index:99998;
  -webkit-backface-visibility:visible;
  -moz-backface-visibility:visible;
  -ms-backface-visibility:visible;
  backface-visibility:visible;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  width:260px;
  height: 100vh;
  padding:30px 45px;
  background:#111;
  color:#FFF;
  font-size:12px;
  border-left:none;
  -webkit-transform:translate(-100%,-50%);
  -moz-transform:translate(-100%,-50%);
  -ms-transform:translate(-100%,-50%);
  -o-transform:translate(-100%,-50%);
  transform:translate(-100%,-50%);
  -webkit-transition:all 0.5s cubic-bezier(0.215,0.61,0.355,1);
  -moz-transition:all 0.5s cubic-bezier(0.215,0.61,0.355,1);
  -ms-transition:all 0.5s cubic-bezier(0.215,0.61,0.355,1);
  -o-transition:all 0.5s cubic-bezier(0.215,0.61,0.355,1);
  transition:all 0.5s cubic-bezier(0.215,0.61,0.355,1);
}
#panel-style-selector .panel-wrapper.in {
  -webkit-transform:translate(0%,-50%);
  -moz-transform:translate(0%,-50%);
  -ms-transform:translate(0%,-50%);
  -o-transform:translate(0%,-50%);
  transform:translate(0%,-50%);
}
#panel-style-selector .panel-wrapper .panel-selector-open {
  position:absolute;
  top:calc(50% - 20px);
  left:100%;
  width:40px;
  height:40px;
  background:#222;
  text-align:center;
  cursor:pointer;
  opacity:1;
}
#panel-style-selector .panel-wrapper .panel-selector-open i {
  line-height:40px;
}
#panel-style-selector .panel-wrapper .panel-selector-open:hover { color:#fb383b; }
#panel-style-selector .panel-wrapper .panel-selector-body {
	position: relative;
	height: 100%;
	overflow: hidden;
}
#panel-style-selector .panel-wrapper .panel-selector-body-inner {
	width: calc(100% + 17px);
	height: 100%;
	overflow-y: auto;
}
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section { margin-bottom:5px; }
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section h3.panel-selector-title {
  border-bottom:solid 1px #222;
  color:#fff;
  text-transform:uppercase;
  font-size:11px;
  font-weight:400;
  letter-spacing:0.48px;
  margin:0;
  margin-bottom:15px;
  font-family:montserrat;
}
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section h3.panel-selector-title:before {
  content:"";
  display:inline-block;
  verticle-align:middle;
  width:8px;
  height:8px;
  background:#fb383b;
  margin-right:5px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
}
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row { margin-bottom:5px; }
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row .panel-selector-btn {
  font-family:Montserrat;
  font-size:11px;
  line-height:20px;
  letter-spacing:0.48px;
  display:inline-block;
  padding:6px 12px;
  text-transform:uppercase;
  min-width:80px;
  text-align:center;
  color:#ffffff;
  background:#292929;
  border:2px solid transparent;
}
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row .panel-selector-btn:hover, #panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row .panel-selector-btn:focus, #panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row .panel-selector-btn.active {
  background-color:#444444;
  border-color:#dedede;
}
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row ul {
  padding:0;
  margin:0;
  list-style-type:none;
}
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row ul li {
  width:30px;
  height:30px;
  float:left;
  display:block;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row ul li.active:before, #panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row ul li:hover:before {
	content: "";
	position: absolute;
	top: -10px;
	right: -10px;
	width: 20px;
	height: 20px;
	background: #ffffff;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row ul li + li { margin-left:15px; }
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row ul li:nth-child(4n+1) {
  clear:both;
  margin-left:0;
}
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row ul li:nth-child(n + 5) { margin-top:15px; }
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row ul.panel-primary-background li.active:before, #panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row ul.panel-primary-background li:hover:before {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background: #fb383b;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row.panel-select-homepage .thumb {
	height: 95px;
	-webkit-transition: all 0.4s ease 0s;
	-moz-transition: all 0.4s ease 0s;
	-o-transition: all 0.4s ease 0s;
	-ms-transition: all 0.4s ease 0s;
	transition: all 0.4s ease 0s;
}
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row.panel-select-homepage .thumb:hover {
	-webkit-box-shadow: inset 0px 0px 0px 3px #fb383b;
	-moz-box-shadow: inset 0px 0px 0px 3px #fb383b;
	box-shadow: inset 0px 0px 0px 3px #fb383b;
}
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row.panel-select-homepage h6 {
	font-size: 12px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0.04em;
	text-align: center;
	color: #dedede;
	margin-bottom: 10px;
	-webkit-transition: all 0.4s ease 0s;
	-moz-transition: all 0.4s ease 0s;
	-o-transition: all 0.4s ease 0s;
	-ms-transition: all 0.4s ease 0s;
	transition: all 0.4s ease 0s;
}
#panel-style-selector .panel-wrapper .panel-selector-body .panel-selector-section .panel-selector-row.panel-select-homepage h6:hover {
	color: #fb383b;
}
#panel-style-selector .panel-wrapper .demo-popup {
	position: absolute;
	top: 50%;
	left: 100%;
	font-size: 0;
	line-height: 0;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
#panel-style-selector .panel-wrapper .demo-popup img {
	width: 350px;
	height: auto;
}

@media (max-width: 767px) {
  #panel-style-selector { display:none; }
}