/* Styles Switcher ====================================================================== */


/* Nav Trigger */

.nav-trigger {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
    position: absolute;
    left: 0;
    top: 0;
    height: 41px;
    width: 39px;
    cursor: pointer;
    background-image: url("../img/ico/switcher_white.png");
    background-size: contain;
    z-index: 99999;
}

.nav-trigger + label,
#wrapper,
#style-switcher {
    transition: left 0.5s;
}

.nav-trigger:checked + label {
    left: 200px;
}

#wrapper {
    position: relative;
    top: 0;
    left: 0;
}

.nav-trigger:checked ~ #wrapper {
    left: 200px;
}

.nav-trigger:checked ~ #style-switcher {
    left: 0;
}

body {
    overflow-x: visible;
    position: relative;
    transition-duration: 1s;
    transition-property: opacity;
}

#style-switcher h3,
#style-switcher h4 {
    color: #fff;
    font-size: 12px;
    margin: 10px 0 3px 0px;
    text-transform: initial;
}
#style-switcher h4 {

    color: #b7b7b7;
    margin-top: 0px;
}

#style-switcher {
    background: #333;
    width: 200px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -200px;
    z-index: 99999;
}

#style-switcher div.radio label {
    color: #fff;
    /*display: table;*/
}

#style-switcher .switcher_controls {
    padding: 5px 10px;
    color: #ccc;
}
.loading{
    display: none;
    top: 500px;
    left: 70px;
    width: 43px;
    height: 11px;
    background: transparent url(../../../img/slides/patterns/camera-loader.gif) no-repeat 0 0;
    position: absolute;
    background-size: 100%;    
}

.fade{
    padding: 0 !important;
    transition: 1s;
    outline:0;
}

#style-switcher h2 {
    background: #151515;
    color: #FFFFFF;
    font-weight: bold;
    padding: 0;
    font-size: 19px;
    padding: 6px 0 5px 0px;
    text-align: center;
}
/*
#style-switcher h2 a {
    background: url("../img/ico/switcher.png") no-repeat scroll left center transparent;
    display: block;
    height: 41px;
    position: absolute;
    right: -39px;
    text-indent: -9999px;
    top: 0;
    width: 39px;
    border-radius: 0 3px 3px 0;
}
*/
.colors {
    list-style: none;
    margin: 0px 0px 10px 0px;
    overflow: hidden
}

.colors li {
    float: left;
    margin-right: 6px;
    margin-top: 4px;
}

.colors li:nth-child(5n) {
    margin-right: 0px;
}

.colors li a {
    display: block;
    width: 31px;
    height: 15px;
    cursor: pointer;
}

.img-bg {
    list-style: none;
    margin: 0px 0px 10px 0px;
    overflow: hidden
}

.img-bg li {
    float: left;
    margin: 2px;
}

.img-bg li a {
    display: block;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.radio {
    padding: 6px 6px !important;
}

.radio label{
    position: relative;
    left: 10px;
    bottom: 3px;
}

}
.radio-color {
    color: #fff;
}

.layout-style input#slider-mini {
    width: 100%;
    margin: 0;
    position: relative;
    right: 2px;
}

input[type=range] {
    -webkit-appearance: none;
    /*removes default webkit styles*/
    background-color: #333;
    /*fix for FF unable to apply focus style bug */
    border: solid #333;
    /*required for proper track sizing in FF*/
}

input[type=range]::-webkit-slider-runnable-track {
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: red;
    margin-top: -5px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: red;
}

/*hide the outline behind the border*/

input[type=range]:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 180px;
    height: 5px;
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;
    /*remove default tick marks*/
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}

input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}

input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: red;
    margin-top: 1px;
}

input[type=range]:focus::-ms-fill-lower {
    background: #888;
}

input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}

.color-preview {
    background-color: #000305;
    /*border-radius: 4px;*/
    float: left;
    height: 30px;
    width: 151px;
    padding: 0px !important;
}

.input-small {
    width: 85px;
    /*height: 9px;*/
}

.input-id {
    background: #fff!important;
    color: #000!important;
    width: 163px;
    /*height: 9px;*/
}

input#background_color_hex {
    padding: 2px;
    background: #fff;
    color: #000;
}

.layout-style select {
    background: #fff;
    width: 100%;
    padding: 2px 5px;
    border: none;
    color: #666;
    cursor: pointer;
    height: 30px;
}

#reset {
    text-align: center;
}

#reset a {
    color: #fff;
    font-size: 12px;
}

.beige,
.beige-bg {
    background: #bfa980;
}

.black,
.black-bg {
    background: #000;
}

.blue,
.blue-bg {
    background: #2db2ea;
}

.brown,
.brown-bg {
    background: #784e3d;
}

.dark-blue,
.dark-blue-bg {
    background: #00437A;
}

.green,
.green-bg {
    background: #399d43;
}

.orange,
.orange-bg {
    background: #ff5500;
}

.pink,
.pink-bg {
    background: #ff99cc;
}

.purple,
.purple-bg {
    background: #6957af;
}

.red,
.red-bg {
    background: #c62020;
}

.ruby,
.ruby-bg {
    background: #880000;
}

.slate,
.slate-bg {
    background: #a7adc8;
}

.white,
.white-bg {
    background: #f5f3f3;
}

.navy,
.navy-bg {
    background: #495d7f;
}

.yellow,
.yellow-bg {
    background: #ffb400;
}

.peach,
.peach-bg {
    background: #fcab55;
}

.cyan,
.cyan-bg {
    background: #37b6bd;
}

.celadon,
.celadon-bg {
    background: #74aea1;
}

.cherry,
.cherry-bg {
    background: #911938;
}

.gray,
.gray-bg {
    background: #666666;
}

.olive,
.olive-bg {
    background: #b3c211;
}

.dark,
.dark-bg {
    background: #404040;
}

.dirty-green,
.dirty-green-bg {
    background: #3b6e40;
}

.dark-orange,
.dark-orange-bg {
    background: #fa5b0f;
}

.dark-navy,
.dark-navy-bg {
    background: #495d7f;
}

.dark-yellow,
.dark-yellow-bg {
    background: #ffb400;
}

.dark-peach,
.dark-peach-bg {
    background: #fcab55;
}

.dark-beige,
.dark-beige-bg {
    background: #bfa980;
}

.bg1 {
    background-image: url("../img/bg/noise.png");
    background-attachment: scroll;
}

.bg2 {
    background-image: url("../img/bg/retina_dust.png");
}

.bg3 {
    background-image: url("../img/bg/brushed_alu.png");
}

.bg4 {
    background-image: url("../img/bg/crisp_paper_ruffles.png");
}

.bg5 {
    background-image: url("../img/bg/dark_wall.png");
}

.bg6 {
    background-image: url("../img/bg/darkdenim3.png");
}

.bg7 {
    background-image: url("../img/bg/diamond_upholstery.png");
}

.bg8 {
    background-image: url("../img/bg/egg_shell.png");
}

.bg9 {
    background-image: url("../img/bg/light_toast.png");
}

.bg10 {
    background-image: url("../img/bg/noise_pattern_with_crosslines.png");
}

.bg11 {
    background-image: url("../img/bg/purty_wood.png");
}

.bg12 {
    background-image: url("../img/bg/subtle_stripes.png");
}

.bg13 {
    background-image: url("../img/bg/textured_stripes.png");
}

.bg14 {
    background-image: url("../img/bg/tileable_wood_texture.png");
}

.bg15 {
    background-image: url("../img/bg/scribble_light.png");
}

.bg16 {
    background-image: url("../img/bg/vertical_cloth.png");
}

.bg17 {
    background-image: url("../img/bg/vichy.png");
}

.bg18 {
    background-image: url("../img/bg/washi.png");
}

.bg19 {
    background-image: url("../img/bg/noise.png");
}

.bg21 {
    background-image: url("../img/bg/retina_dust.png");
}

.bg22 {
    background-image: url("../img/bg/brushed_alu.png");
}

.bg23 {
    background-image: url("../img/bg/crisp_paper_ruffles.png");
}

.bg24 {
    background-image: url("../img/bg/dark_wall.png");
}

.bg25 {
    background-image: url("../img/bg/darkdenim3.png");
}

.bg26 {
    background-image: url("../img/bg/diamond_upholstery.png");
}

.bg27 {
    background-image: url("../img/bg/egg_shell.png");
}

.bg28 {
    background-image: url("../img/bg/light_toast.png");
}

.bg29 {
    background-image: url("../img/bg/noise_pattern_with_crosslines.png");
}

.bg30 {
    background-image: url("../img/bg/purty_wood.png");
}

.bg31 {
    background-image: url("../img/bg/subtle_stripes.png");
}

.bg32 {
    background-image: url("../img/bg/textured_stripes.png");
}

.bg33 {
    background-image: url("../img/bg/tileable_wood_texture.png");
}

.bg34 {
    background-image: url("../img/bg/scribble_light.png");
}

.bg35 {
    background-image: url("../img/bg/vertical_cloth.png");
}

.bg36 {
    background-image: url("../img/bg/wow.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-color: #010101;
}

.colors li a.active {
    box-shadow: 0 0 0 2px #404040 inset
}

.buton-switch {
    background: #72b626;
    border: 0px solid;
}

.buton-switch {
    background: #72b626 none repeat scroll 0 0;
    border: 0px solid;
    color: #ffffff;
    margin: 4px;
}

.buton-switch:hover {
    background: #65a320 none repeat scroll 0 0;
    border: 0px solid;
    color: #ffffff;
}

.upload_image{
    background-image: url(../img/bg/upload_image.png);
    padding: 5px 0px 0px 0px;
    color: black;
    width: 180px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.button_remove{
    background-image: url(../img/ico/button_remove.png);
    width: 30px;
    height: 30px;
    display: inline-block;
    float: right;
    position: relative;
    bottom: 30px;
}

.button_remove_youtube{
    background-image: url(../img/ico/button_remove_youtube.png);
    width: 20px;
    height: 20px;
    display: inline-block;
    float: right;
    position: relative;
    bottom: 25px;
    right: 4px;
}

.button_reset{
    background-image: url(../img/ico/button_remove.png);
    width: 170px;
    height: 25px;
    display: inline-block;
    float: right;
    position: relative;
    bottom: 5px;
    background-repeat: no-repeat;
    background-position: 150px;
    background-color: #b71d16;
    margin-bottom: 10px;
    margin-top: 15px;
    padding-left: 10px;
    padding-top: 5px;
    color: white;
}

@media only screen and (max-width: 319px) {
    #style-switcher {
        display: none;
    }
}
/*
.video_background {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
}

#video_background_moved {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
}

.bla {
    background-image: url("'+ style.image+'");
    //background-image: url("../img/bg/wow.jpg");
}
*/
.cpss {
    display: table;
    width: auto;
    padding: 5px 10px 5px 10px;
    font-family: "Gnuolane";
    font-size: 14px;
    text-transform: uppercase;
    margin: 15px 0 5px 15px;
}


/* control panel start */

#style-switcher div.cp_icons_ss {
    padding: 0;
    display: table;
    width: 200px;
    background: #333;
}

.cp-link {
    text-align: center;
    margin: 50px 0 10px 0 !important;
    padding: 0 !important;
}

.cp-link a {
    padding: 5px;
    background-color: #151515;
    display: block;
}

.cp-link a span {
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    font-size: 120%;
    display: table;
    background: url(../img/ico/cp.png) no-repeat left center;
    padding-left: 50px;
}

.cp-link a span:hover {
    color: red;
}

.cp_icons_ss a.cp_icons_ss_lnk {
    color: #3DD7F3;
    display: block;
    padding: 5px;
    background-color: #151515;
    margin-bottom: 10px;
}

.cp_icons_ss a.cp_icons_ss_lnk:hover {
    color: #fff;
}

.cp_icons_ss a.cp_icons_ss_lnk span {
    background: url(../img/ico/ico_small.png) no-repeat 0 0;
    font-weight: bold;
    padding-left: 45px;
    line-height: 40px;
    display: table;
    font-size: 100%;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_pymnt {
    background-position: 0 -375px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_gnrlstngs {
    background-position: 0 -448px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_abt {
    background-position: 0 0;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_logo {
    background-position: 0 -298px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_mnmngr {
    background-position: 0 -335px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_sldr {
    background-position: 0 -523px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_phts {
    background-position: 0 -410px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_vds {
    background-position: 0 -600px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_blg {
    background-position: 0 -36px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_frm {
    background-position: 0 -224px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_cntct {
    background-position: 0 -74px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_scl {
    background-position: 0 -560px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_cstm {
    background-position: 0 -148px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_evnts {
    background-position: 0 -186px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_shp {
    background-position: 0 -486px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_ga {
    background-position: 0 -260px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_cntctmmbrs {
    background-position: 0 -112px;
}

.cp_icons_ss a.cp_icons_ss_lnk span.ss_soc {
    background-position: 0 -112px;
}


/*control panel end */