#styler { width:250px; height:100%; position:fixed; top:0; right:-250px; background:#555; z-index:99999999; transition:.3s; }
.styler-button { width: 100%; padding: 0 35px; box-sizing: border-box; position: absolute; bottom: 35px; left: 0; text-align: center; }
.styler-button .button { width: 100%; }

.styler-toggle { width:50px; height:50px; font-size:22px; color:#FFF; text-align:center; line-height:50px; background:#555; position:absolute; top:50%; left:-50px; margin-top:-25px; border-radius:3px 0 0 3px; cursor: pointer; transition: .2s; }
.styler-toggle:before { content: 'Style Switcher'; position: absolute; top: 50%; left: -115px; padding: 7px 10px; background: #FFF; border-radius: 3px; font:bold 11px/18px 'Montserrat'; color: #444; pointer-events: none; box-shadow: 1px 1px 0 rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1); transform: translateY(-50%); opacity: 0; transition: .2s; }
.styler-toggle:after { content: '\f2d7'; width: 100%; height: 100%; font-family: ionicons; font-size: 19px; position: absolute; top: 0; left: 0; border-radius: 3px 0 0 3px; background: #444; opacity: 0; transition: .3s; }

.styler-section { padding:18px 30px 14px; text-align: center; font:400 11px/18px 'Montserrat'; color: #FFF; border-bottom:1px solid #4A4A4A; }
.styler-section:first-child { padding-top: 28px; }
.styler-section:after { content:""; display:block; clear:both; }
.styler-section span { float:left; margin:0 4px 10px; border-radius:2px; cursor:pointer; display: block; opacity:.15; position:relative; background-position: center !important; transition:.2s; overflow: hidden; }
#styler span:after { content: ''; width: 15px; height: 15px; position: absolute; top: -8px; left: -8px; background:#FFF !important; transform: rotate(45deg); transition: .2s; opacity: 0; }
.styler-section h3 { margin:0 0 15px; }
.styler-section h6 { margin:0 0 20px; padding: 0; font:600 13px/18px 'Montserrat'; color: #FFF; letter-spacing: .2px; text-align:center; }
.styler-section p { margin: 0 0 10px; padding: 0; }
.styler-section.message p { margin-bottom: 2px; font-size: 10px; line-height: 16px; font-weight: 300; letter-spacing: .2px; opacity: .5; }

/* Hovers */

#styler.active { right:0; }
#styler.active .styler-toggle { background: #444; }
#styler.active .styler-toggle:before, #styler.active-delay .styler-toggle:before { opacity: 0; }
#styler.active .styler-toggle:after { opacity: 1; }
#styler span.active:after { opacity: 1; }
.styler-section span:hover, .styler-section span.active { opacity:1; box-shadow: 1px 1px 0 rgba(0,0,0,.1); }
.styler-toggle:hover { background: #444; }
.styler-toggle:hover:before { opacity: 1; left: -120px; }

/* Layouts */

#styler span[rel^='layout-'] { width:calc(50% - 8px); height:60px; }
#styler span[rel^='layout-']:after { display: none; }
#styler span[rel='layout-full'] { background:url(layout-full.png); }
#styler span[rel='layout-boxed'] { background:url(layout-boxed.png); }

/* Colors */

#styler span[rel^='color-'] { width:calc(20% - 8px); height:30px; }
#styler span[rel='color-blue'] { background:#71BFF9; }
#styler span[rel='color-turquoise'] { background:#56D5C4; }
#styler span[rel='color-green'] { background:#9CD06C; }
#styler span[rel='color-gold'] { background:#CAB984; }
#styler span[rel='color-pink'] { background:#F39898; }

/* Backgrounds */

#styler span[rel^='background-'] { width:calc(25% - 8px); height:40px; }
#styler span[rel='background-beach'] { background:url(background-beach.jpg); }
#styler span[rel='background-beach2'] { background:url(background-beach2.jpg); }
#styler span[rel='background-beach3'] { background:url(background-beach3.jpg); }
#styler span[rel='background-beach4'] { background:url(background-beach4.jpg); }
#styler span[rel='background-forest'] { background:url(background-forest.jpg); }
#styler span[rel='background-forest2'] { background:url(background-forest2.jpg); }
#styler span[rel='background-forest3'] { background:url(background-forest3.jpg); }
#styler span[rel='background-forest4'] { background:url(background-forest4.jpg); }
#styler span[rel='background-forest5'] { background:url(background-forest5.jpg); }
#styler span[rel='background-sky'] { background:url(background-sky.jpg); }
#styler span[rel='background-sky2'] { background:url(background-sky2.jpg); }
#styler span[rel='background-sky3'] { background:url(background-sky3.jpg); }
#styler span[rel='background-sunset'] { background:url(background-sunset.jpg); }
#styler span[rel='background-sunset2'] { background:url(background-sunset2.jpg); }
#styler span[rel='background-jelly'] { background:url(background-jelly.jpg); }
#styler span[rel='background-rose'] { background:url(background-rose.jpg); }
#styler span[rel='background-sheets'] { background:url(background-sheets.jpg); }
#styler span[rel='background-shells'] { background:url(background-shells.jpg); }
#styler span[rel='background-water'] { background:url(background-water.jpg); }
#styler span[rel='background-waterfall'] { background:url(background-waterfall.jpg); }

/* Responsive */

@media (min-width:1450px) {
	.styler-section.message { display: none; }
}

@media (max-width:1450px) {
	.styler-section.layouts, .styler-section.backgrounds { display: none; }
	.styler-section.message { display: block; }
}

@media (max-width:1200px) {
	#styler { display:none; }
}

@media (max-width:1150px) {
	#styler { height:185px; margin-top:-93px; }
	.styler-section.layouts, .styler-section.backgrounds { display:none; }
}

@media (max-width:1024px) {
	.styler-toggle { height:50px; top:50%; margin-top:-25px; }
	.styler-toggle a { top:0; margin:0; }
}