.cdefault{background:#fac012;}

.cpink{background:#e83f39;}

.cpurple{background:#2f43a9;}

.cnavy{background:#2991d6;}

.cblue{background:#6c98e1;}

.corange{background:#ff5a00;}

.cred{background:#f71414;}

.cgreen{background:#4fa226;}

.cblue-lighter{background:#2ea6b8;}

.corange-lighter{background:#f49b00;}



.demo_changer{

    z-index: 19999;

    position: fixed;

    left: -249px;

    top: 220px;

}



.demo_changer .styleswitch {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    margin: 0 3px 4px 0;

    display: inline-block;

    transition: 0.5s;

}



.demo_changer .styleswitch:hover,

.demo_changer .styleswitch.selected {

    box-shadow: 0px 0px 5px 4px rgba( 77,77,77,0.7 );

}



.demo_changer .styleswitch:nth-child( 5n + 6 ) {

    margin-right: 0;

}



.demo_changer span a:hover,

.demo_changer span a:active {

    opacity:1;

    color:#7F7F7F;

}





.demo_changer .demo-icon{

    /*background: url(../img/switcher/color.png) no-repeat scroll 4px 0 #fff;*/

    /*box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);*/

    cursor: pointer;

    position: absolute;

    right: -43px;

    top: 0;

    height: 49px;

    width: 43px;

    text-align: right;

    line-height: 49px;

    background-color:#fff3bf;

    font-size: 24px;

    color: #272727;

    z-index:  9999;

    padding-right: 10px;

    border-top-right-radius: 5px;

    border-bottom-right-radius: 5px;
	
	box-shadow: 0px 0px 8px 0px rgba( 1,1,1,.08);

}



.demo_changer .form_holder {

	background: #272727;

    float: right;

    width: 249px;

}





.demo_changer .demo-title {

    font-size: 18px;

    color: #fac012;

    text-transform: uppercase;

    font-weight: 700;

    font-family: 'Montserrat', sans-serif;

    background-color: #232323;

    text-align: center;

    margin: 0;

    height: 49px;

    line-height: 49px;

    position: relative;

    z-index: 10000;

}



.demo_changer .form_holder p {

    font-size: 16px;

    font-weight: 400;

    color: #fff;

    padding-top: 15px;

    padding-bottom: 15px;

    text-transform: capitalize;

    text-align: center;

    font-family: 'Montserrat', sans-serif;

}



.demo_changer .form_holder label {

    width: 100%;

    margin-bottom: 0;

    text-align: center;

    cursor: pointer;

}



.demo_changer .form_holder .control-title {

    font-size: 14px;

    font-weight: 400;

    color: #9e9e9e;

    display: inline-block;

    padding-top: 5px;

}



.demo_changer .form_holder .right {

    float: right;

    padding-right: 20px;

}



.demo_changer .form_holder .left {

    float: left;

    padding-left: 20px;

}



.demo_changer .form_holder .toggle {

    position: relative;

    width: 80px;

    height: 33px;

    background-color: #363636;

    display: inline-block;

    border-radius: 32px;

    transition: 0.5s;

}



.demo_changer .form_holder .toggle:before,

.demo_changer .form_holder .toggle:after,

.demo_changer .form_holder a.rtl .toggle:before,

.demo_changer .form_holder a.rtl .toggle:after {

    position: absolute;

    content: '';

    width: 32px;

    height: 32px;

    background-color: #fff;

    border-radius: 50%;

    top: 0;

    right: 0;

    transition: 0.5s;

}



.demo_changer .form_holder label input:checked + .toggle:before,

.demo_changer .form_holder label input:checked + .toggle:after,

.demo_changer .form_holder a.ltr.toggle:before,

.demo_changer .form_holder a.ltr.toggle:after {

    right: 48px;

}



.demo_changer .form_holder input[type="checkbox"] {

    display: none;

}



.demo_changer .form_holder input{

    width: 55px;

	border-radius: 0 10px 10px 0;

	box-shadow: none;

}



.demo_changer .color_display_2 a{

    color: #fff;

    text-decoration: none;

}



.demo_changer .predefined_styles{

    padding: 0 14px 15px 14px;

    border-bottom: 1px solid #232323;

}



.boxed .vc_row[data-vc-full-width-init="true"]{

    left: 0 !important;

    width: 1270px !important;

}



body.boxed {

    background-color: #EEEEEE;

}



@media only screen and (max-width: 991px) {

    .boxed .vc_row.row-full-width{

       width: 100% !important;

    }

}



@media only screen and (max-width: 1200px) {

    .demo_changer{

        display: none;

    }

}



@media only screen and (max-width: 1300px) {

    .boxed .vc_row[data-vc-full-width-init="true"]{

        left: 0 !important;

        width: 100% !important;

    }

}



@media only screen and (max-width: 1366px) {

    .demo_changer{

        top: 263px;

    }

}