#StyleSwitcher {
    top: 10px;
    left: -150px;
    width: 150px;
    height: auto;
    z-index: 9999;
    color: #000000;
	position: fixed;
    text-align: left;
	background-color: #f6f7f9;
    padding: 15px 10px 15px 15px;
    
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;

    -webkit-border: 1px solid #f1f1f1;
       -moz-border: 1px solid #f1f1f1;
         -o-border: 1px solid #f1f1f1;
            border: 1px solid #f1f1f1;

    -webkit-border-radius: 0 5px 5px 0;
       -moz-border-radius: 0 5px 5px 0;
         -o-border-radius: 0 5px 5px 0;
            border-radius: 0 5px 5px 0;

    -webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
#StyleSwitcher.open { left: -1px; }

#StyleSwitcher a.switcher-btn {
	top: 30px;
    width: 50px;
    height: 50px;
    right: -50px;
    color: #1e1e1e;
    font-size: 30px;
	cursor: pointer;
    line-height: 50px;
    position: absolute;
    text-align: center;
    background-color: #f6f7f9;

    -webkit-border: 1px solid #f1f1f1;
       -moz-border: 1px solid #f1f1f1;
         -o-border: 1px solid #f1f1f1;
            border: 1px solid #f1f1f1;

    -webkit-border-radius: 0 5px 5px 0;
       -moz-border-radius: 0 5px 5px 0;
         -o-border-radius: 0 5px 5px 0;
            border-radius: 0 5px 5px 0;
}
#StyleSwitcher a.switcher-btn i { line-height: 50px; }
#StyleSwitcher a.switcher-btn:focus,
#StyleSwitcher a.switcher-btn:hover { color: #000000; }

.switcher-style {
    width: 100%;
    margin: 10px 0;
    padding: 10px 0;

    -webkit-border-top: 1px solid #dee2e9;
       -moz-border-top: 1px solid #dee2e9;
         -o-border-top: 1px solid #dee2e9;
            border-top: 1px solid #dee2e9;

    -webkit-border-bottom: 1px solid #dee2e9;
       -moz-border-bottom: 1px solid #dee2e9;
         -o-border-bottom: 1px solid #dee2e9;
            border-bottom: 1px solid #dee2e9;
}
.switcher-style a {
    width: 100%;
    display: block;
    text-align: left;
    line-height: 28px;
}
.switcher-style a:focus,
.switcher-style a:hover {
    color: #000000;
}

.switcher-colors {
    width: 100%;
    overflow: hidden;
    margin: 0 0 10px;
    padding: 0 0 15px;

    -webkit-border-bottom: 1px solid #dee2e9;
       -moz-border-bottom: 1px solid #dee2e9;
         -o-border-bottom: 1px solid #dee2e9;
            border-bottom: 1px solid #dee2e9;
}

.switcher-colors a.color-switch {
	float: left;
    width: 36px;
	height: 36px;
	margin-top: 5px;
	cursor: pointer;
    margin-right: 5px;
    display: inline-block;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;
}

.switcher-dark,
.switcher-boxed-full {
    padding: 0;
    width: 100%;
    overflow: hidden;
    margin: 0 auto 10px;

    -webkit-border-bottom: 1px solid #dee2e9;
       -moz-border-bottom: 1px solid #dee2e9;
         -o-border-bottom: 1px solid #dee2e9;
            border-bottom: 1px solid #dee2e9;
}

.dark-switch,
.boxed-switch {
    width: 100%;
    height: 30px;
    display: block;
    line-height: 30px;
    text-align: center;
    margin-bottom: 10px;

    -webkit-border: 1px solid #dee2e9;
       -moz-border: 1px solid #dee2e9;
         -o-border: 1px solid #dee2e9;
            border: 1px solid #dee2e9;
}

.style-1 { background: #f05557; }
.style-2 { background: #008ed6; }
.style-3 { background: #d80018; }
.style-4 { background: #4478b2; }
.style-5 { background: #663ab1; }
.style-6 { background: #ea8825; }
.style-7 { background: #685ab1; }
.style-8 { background: #e48f4c; }
.style-9 { background: #d35400; }
.style-10 { background: #89c144; }
.style-11 { background: #f1be03; }
.style-12 { background: #00ab66; }
.style-13 { background: #e3c552; }
.style-14 { background: #ec005f; }


.switcher-bg {
    width: 100%;
    overflow: hidden;
    padding: 0 0 15px;
    margin: 0 auto 10px;

    -webkit-border-bottom: 1px solid #dee2e9;
       -moz-border-bottom: 1px solid #dee2e9;
         -o-border-bottom: 1px solid #dee2e9;
            border-bottom: 1px solid #dee2e9;
}

.switcher-bg a.bg-switch {
	float: left;
    width: 28px;
	height: 28px;
	margin-top: 3px;
	cursor: pointer;
    margin-right: 3px;
    display: inline-block;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;

    -webkit-border: 1px solid #dee2e9;
       -moz-border: 1px solid #dee2e9;
         -o-border: 1px solid #dee2e9;
            border: 1px solid #dee2e9;
}
.switcher-bg a.bg-switch:nth-child(4n) { margin-right: 0; }

.bg-1 { background-image: url(../images/patterns/bg1.png); }
.bg-2 { background-image: url(../images/patterns/bg2.png); }
.bg-3 { background-image: url(../images/patterns/bg3.png); }
.bg-4 { background-image: url(../images/patterns/bg4.png); }
.bg-5 { background-image: url(../images/patterns/bg5.png); }
.bg-6 { background-image: url(../images/patterns/bg6.png); }
.bg-7 { background-image: url(../images/patterns/bg7.png); }
.bg-8 { background-image: url(../images/patterns/bg8.png); }
.bg-9 { background-image: url(../images/patterns/bg9.png); }
.bg-10 { background-image: url(../images/patterns/bg10.png); }
.bg-11 { background-image: url(../images/patterns/bg11.png); }
.bg-12 { background-image: url(../images/patterns/bg12.png); }
.bg-13 { background-image: url(../images/patterns/bg13.png); }
.bg-14 { background-image: url(../images/patterns/bg14.png); }
.bg-15 { background-image: url(../images/patterns/bg15.png); }
.bg-16 { background-image: url(../images/patterns/bg16.png); }
.bg-17 { background-image: url(../images/patterns/bg17.png); }
.bg-18 { background-image: url(../images/patterns/bg18.png); }
.bg-19 { background-image: url(../images/patterns/bg19.png); }
.bg-20 { background-image: url(../images/patterns/bg20.png); }
.bg-21 { background-image: url(../images/patterns/bg21.png); }
.bg-22 { background-image: url(../images/patterns/bg22.png); }

.switcher-demo {
    width: 100%;
    display: block;
    text-align: left;
}

.switcher-page { width: 100%; }
.switcher-page a {
    width: 100%;
    display: block;
    text-align: left;
    line-height: 28px;
}
#StyleSwitcher a:hover,
#StyleSwitcher a:focus {
    color: #000000 !important;
}

@media only screen and (max-width: 1024px) { #StyleSwitcher { display: none;} }