/* Styleswitcher - box */
#style-switcher { position: fixed; top: 0; right: -300px; width: 300px; height: 100vh; z-index: 2200; color: #434343; background: #fff; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
#style-switcher.visible { right: 0; -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1); }
#style-switcher .switcher-wrapper { position: absolute; top: 0; left: 0; right: -60px; bottom: 0; height: 100%; padding-right: 60px; overflow: auto; }
#style-switcher #switcher-toggle { position: absolute; top: 20vh; left: -36px; width: 36px; height: 66px; display: block; color: white; text-align: center; cursor: pointer; -moz-border-radius: 2px 0px 0px 2px; -webkit-border-radius: 2px; border-radius: 2px 0px 0px 2px; -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15); z-index: 0; }
#style-switcher #switcher-toggle i { margin-top: 26px; font-size: 14px; }
#style-switcher .ss-label { display: block; font-size: 12px; font-family: "Montserrat", Helvetica, Arial, sans-serif; padding: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.15); text-transform: uppercase; font-weight: 600; }

/* Styleswitcher - theme swticher */
#theme-switcher { list-style: none; margin: 0; padding: 20px; }
#theme-switcher > li { position: relative; display: block; color: #fff; height: 100px; font-family: "Montserrat"; background: #111111; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; overflow: hidden; cursor: pointer; margin-bottom: 3px; }
#theme-switcher > li > .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; overflow: hidden; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
#theme-switcher > li:hover > .bg, #theme-switcher > li.active > .bg { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); opacity: 0.75; }
#theme-switcher > li > .content { position: relative; top: 50%; padding: 0 20px; -moz-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); font-size: 20px; }
#theme-switcher > li > .content > .tick { position: relative; height: 21px; width: 21px; display: inline-block; margin-right: 10px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); vertical-align: middle; }
#theme-switcher > li > .content > .tick:after { position: absolute; top: 1px; left: 3px; color: #fff; font-family: themify; content: "\e64c"; z-index: 2; font-size: 12px; font-weight: 700; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden; -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); }
#theme-switcher > li > .content > .tick > span { position: absolute; top: -2px; left: -2px; bottom: -2px; right: -2px; z-index: 1; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
#theme-switcher > li > .content > .name { display: inline-block; vertical-align: middle; }
#theme-switcher > li.active .content > .tick:after { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
#theme-switcher > li.active .content > .tick > span { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible; }