.demo-settings{
    display:block;
    position:fixed;
    top:0;
    right:0;
    height:100%;
    z-index:19000;
    width:0
}
.demo-settings .demo-options{
    display:block;
    width:300px;
    background:#fff;
    color:#232323;
    text-align:left;
    font-size:11px;
    border-radius:3px;
    -moz-border-radius:3px
}
.demo-settings .demo-options p{
    font-size:14px
}
.demo-settings .demo-button{
    display:block;
    background: #209332;
	border:1px solid #e8e8e8;
    color:#fff;
    text-align:center;
    line-height:130%;
    font-weight:300;
    font-size:9.7px;
    border-radius:3px;
    -moz-border-radius:3px;
    padding:15px 12px;
    opacity:.98;
    filter:alpha(opacity=80);
    position:absolute;
    right:0;
    
    text-transform:uppercase;
    bottom:15%;
    right:15px;
    transition:color .2s,opacity .2s,background .2s,left 800ms cubic-bezier(0,.51,.21,1.03);
    -moz-transition:color .2s,opacity .2s,background .2s,left 800ms cubic-bezier(0,.51,.21,1.03);
    -webkit-transition:color .2s,opacity .2s,background .2s,left 800ms cubic-bezier(0,.51,.21,1.03);
    -o-transition:color .2s,opacity .2s,background .2s,left 800ms cubic-bezier(0,.51,.21,1.03);
}
.demo-settings .demo-button span{
    display:block
}
.demo-settings.active .demo-button span{
    font-size:0;
    width:50px;
    line-height:100%
}
.demo-settings.active .demo-button span:before{
    font-size:11px;
    content:'Close';
    line-height:130%
}
.demo-settings.active .demo-button{
    top:30%;
    left:320px;
    background:#292929;
    color:#fff;
    box-shadow:0 0 10px rgba(0,0,0,.1)
}
.demo-settings.active .demo-button:before{
    display:block;
    height:32px;
    text-align:center;
    width:100%;
    font-family:themify;
    content:'\e60f';
    font-size:26px;
    line-height:32px;
    margin-bottom:8px
}
.demo-settings.active .demo-button img{
    display:none
}
.demo-settings.active .demo-button:hover{
    background:#d84430;
    color:#fff
}
.demo-settings .demo-button:hover{
    opacity:1;
    filter:alpha(opacity=100)
}
.demo-settings .demo-button img{
    display:inline-block;
    width:42px;
    height:42px;
    margin-bottom:8px;
    line-height:32px;
    /*-webkit-animation:flip-loop 3s linear infinite;
    animation:flip-loop 3s linear infinite*/
}
.demo-settings.active .demo-options{
    margin-left:0
}
.demo-settings .demo-options{
    display:block;
    height:100%;
    color:#7d7d7d;
    background:#fff;
    margin-left:-301px;
    box-shadow:4px 0 20px transparent,1px 0 0 rgba(0,0,0,.05);
    -webkit-transition:all 800ms cubic-bezier(0,.51,.21,1.03);
    transition:all 800ms cubic-bezier(0,.51,.21,1.03)
}
.demo-settings.active .demo-options{
    box-shadow:4px 0 20px rgba(0,0,0,.05),1px 0 0 rgba(0,0,0,.05)
}
.demo-settings .demo-options .title{
    text-align:left;
    display:block;
    padding:20px 25px;
    text-transform:uppercase;
    font-family:Titillium Web,sans-serif;
    font-size:16px;
    font-weight:700;
    color:#fff;
    background:#f98639;
    cursor:default
}
.demo-settings .demo-options .title span{
    display:block;
    font-size:14px;
    font-weight:300
}
.demo-settings .demo-options .title strong{
    display:block;
    font-size:22px;
    font-weight:700
}
.demo-settings .demo-options .option{
    text-align:left;
    display:block;
    padding:20px 25px;
    font-size:14px;
    font-weight:400;
    line-height:120%;
    border-bottom:1px solid #eee
}
.demo-settings .demo-options .option:hover{
    background:#fafafa
}
.demo-settings .demo-options .option:last-child{
    padding-bottom:9px
}
.demo-settings .demo-options .option:after{
    display:block;
    content:'';
    clear:both
}
.demo-settings .demo-options .option .demo-icon{
    display:block;
    float:left
}
.demo-settings .demo-options .option span{
    display:block;
    margin-left:0;
    font-family:Titillium Web,sans-serif;
    color:#888;
    padding-top:2px;
    font-size:17px;
    font-weight:700
}
.demo-settings .demo-options .option.active:hover,.demo-settings .demo-options .option.active span{
    color:#5a5a5a;
    background-color:transparent!important
}
.demo-settings .demo-options .option span{
    position:relative;
    display:block
}
.demo-settings .demo-options .option span i{
    font-style:normal;
    margin-left:10px;
    color:#fff;
    background-color:#e65050;
    font-size:12px;
    font-weight:400;
    padding:0 6px 2px;
    line-height:16px;
    border-radius:1px
}
.demo-settings .demo-options .option span:after{
    display:block;
    position:absolute;
    top:0;
    right:0;
    font-size:14px;
    color:#ccc;
    content:'\f013';
    font-family:FontAwesome;
    font-weight:400
}
.demo-settings .demo-options .option.active span:after{
    display:block;
    position:absolute;
    top:0;
    right:0;
    font-size:14px;
    color:#ccc;
    content:'\f00d';
    font-family:FontAwesome
}
.demo-settings .demo-options .option.active:hover span:after{
    color:#f98639
}
.demo-settings .option-box{
    display:none;
    background:#fff;
    border-top:1px solid #fff;
    margin-top:-1px;
    border-bottom:1px solid #eee;
    padding:0 25px 20px;
    position:relative
}
.demo-settings .option-box p{
    font-size:14px;
    color:#898989;
    margin-bottom:20px
}
.demo-settings .option-box p:empty{
    display:none
}
.demo-settings .option-box:last-child{
    border-radius:0 0 3px 3px;
    -moz-border-radius:0 0 3px 3px
}
.demo-settings .option-box.sequal{
    border-top:0
}
.demo-settings .sub-title{
    display:block;
    padding-bottom:7px;
    color:#9c9c9c
}
.demo-settings .color-bulb{
    display:inline-block;
    width:22px;
    height:22px;
    background:#258ac0;
    position:relative;
    border:1px solid #fff;
    border-radius:50%;
    -moz-border-radius:50%;
    margin:0 5px 0 2px
}
.demo-settings .color-bulb.ot-big-bulb{
    box-shadow:0 0 0 1px #ccc
}
.demo-settings .color-bulb.ot-big-bulb:hover{
    box-shadow:0 0 0 1px #ccc
}
.demo-settings .color-bulb.ot-big-bulb.active{
    box-shadow:0 0 0 2px #219bd6;
    color:#219bd6
}
.demo-settings .color-bulb.ot-big-bulb{
    width:50px;
    height:50px;
    border-radius:4px
}
.demo-settings .color-bulb.ot-big-bulb.active:after{
    background-color:#219bd6
}
.demo-settings .color-bulb.ot-big-bulb:after{
    top:-5px;
    content:'\f00c';
    font-family:FontAwesome;
    font-size:11px;
    text-align:center;
    left:auto;
    right:-8px;
    color:#fff;
    width:20px;
    height:20px;
    line-height:20px;
    background-color:#ccc;
    border-radius:50%
}
.demo-settings .color-bulb.ot-big-bulb:hover:after{
    opacity:1;
    filter:alpha(opacity=100)
}
.demo-settings .color-bulb.ot-big-bulb.ot-huge-bulb{
    width:70px;
    height:70px;
    margin-bottom:38px;
    background-size:68px 68px
}
.demo-settings .color-bulb.ot-big-bulb.ot-huge-bulb:nth-child(n+4){
    margin-top:15px
}
.demo-settings .color-bulb.ot-big-bulb.ot-huge-bulb span{
    display:block;
    position:absolute;
    text-align:center;
    font-size:13px;
    top:100%;
    left:0;
    width:100%
}
.demo-settings .color-bulb.ot-big-bulb.ot-huge-bulb span:before{
    display:block;
    content:attr(data-h1);
    padding:8px 0 2px;
    font-weight:700
}
.demo-settings .color-bulb.ot-big-bulb.ot-huge-bulb span:after{
    display:block;
    content:attr(data-h2);
    font-weight:700;
    font-size:10px;
    color:#ccc;
    text-transform:uppercase;
    line-height:100%
}
.demo-settings .color-bulb.ot-big-bulb:nth-child(n+6){
    margin-top:10px
}
.demo-settings .color-bulb:before{
    display:block;
    position:absolute;
    left:-25%;
    top:-25%;
    width:150%;
    height:150%;
    content:'';
    z-index:2
}
.demo-settings .color-bulb:after{
    display:block;
    position:absolute;
    z-index:2;
    width:8px;
    height:8px;
    background-color:#fff;
    border-radius:50%;
    content:'';
    left:50%;
    margin-left:-4px;
    top:50%;
    margin-top:-4px;
    opacity:0;
    filter:alpha(opacity=0)
}
.demo-settings .color-bulb:hover:after{
    opacity:.5;
    filter:alpha(opacity=50)
}
.demo-settings .color-bulb.active:after,.demo-settings .color-bulb.active:hover:after{
    opacity:1;
    filter:alpha(opacity=100)
}
.demo-settings .font-bulb{
    display:inline-block;
    width:20px;
    height:20px;
    position:relative;
    margin:0 10px 0 2px;
    font-size:14px;
    color:#aaa;
    font-weight:700;
    text-align:center
}
.demo-settings .font-bulb.active,.demo-settings .font-bulb.active:hover{
    box-shadow:inset 0 -2px 0 0 #232323;
    color:#232323
}
.demo-settings .font-bulb:hover{
    box-shadow:inset 0 -2px 0 0 #575757;
    color:#575757
}
.demo-settings .option-bulb{
    display:block;
    font-size:14px;
    line-height:30px;
    margin-bottom:15px;
    font-weight:700;
    color:#aaa;
    position:relative
}
.demo-settings .option-bulb i{
    display:block;
    position:absolute;
    right:0;
    top:3px;
    height:25px;
    width:45px;
    background-color:transparent;
    border:1px solid #ccc;
    border-radius:30px
}
.demo-settings .option-bulb i:before{
    display:block;
    position:absolute;
    width:17px;
    height:17px;
    top:3px;
    left:3px;
    background-color:#ccc;
    content:'';
    border-radius:50%;
    z-index:2;
    transition:all .2s;
    -moz-transition:all .2s;
    -webkit-transition:all .2s;
    -o-transition:all .2s
}
.demo-settings .option-bulb i:after{
    display:block;
    position:absolute;
    width:54%;
    height:100%;
    top:0;
    left:0;
    background-color:transparent;
    content:'';
    border-radius:30px;
    z-index:1;
    transition:all .2s;
    -moz-transition:all .2s;
    -webkit-transition:all .2s;
    -o-transition:all .2s
}
.demo-settings .option-bulb.active i{
    border-color:#94be30;
    transition:all .2s;
    -moz-transition:all .2s;
    -webkit-transition:all .2s;
    -o-transition:all .2s
}
.demo-settings .option-bulb.active:hover span,.demo-settings .option-bulb.active span{
    color:#94be30
}
.demo-settings .option-bulb:hover span{
    color:#8a8a8a
}
.demo-settings .option-bulb:hover i:before{
    background-color:#8a8a8a
}
.demo-settings .option-bulb.active i:before{
    left:22px;
    background-color:#ebffbb
}
.demo-settings .option-bulb.active i:after{
    width:100%;
    background-color:#94be30
}
.demo-settings .option-bulb:last-child{
    margin-bottom:0
}
#mooz-head-1,#mooz-head-2,#mooz-head-3,#mooz-head-4{
    display:none
}
#mooz-head-1.active,#mooz-head-2.active,#mooz-head-3.active,#mooz-head-4.active{
    display:block
}
.demo-settings .header-bulb{
    display:inline-block;
    margin-bottom:8px;
    opacity:.3;
    filter:alpha(opacity=30)
}
.demo-settings .header-bulb.active,.demo-settings .header-bulb.active:hover{
    opacity:1;
    filter:alpha(opacity=100)
}
.demo-settings .header-bulb:hover{
    opacity:.6;
    filter:alpha(opacity=60)
}
.demo-options a.option-box{
    position:relative
}
.demo-settings .color-bulb:nth-child(n+7){
    margin-top:8px
}
.demo-settings .demo-options{
    position:relative
}
.demo-settings .ot-settings-reset{
    display:none;
    position:absolute;
    z-index:1;
    background-color:transparent;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.ot-demo-selector{
    font-size:14px;
    box-shadow:0 2px 0 transparent,inset 0 0 0 1px #EEE;
    border-radius:3px;
    margin-bottom:20px;
    cursor:pointer;
    transition:all .2s;
    -moz-transition:all .2s;
    -webkit-transition:all .2s;
    -o-transition:all .2s
}
.ot-demo-selector:last-child{
    margin-bottom:0
}
.ot-demo-selector:hover{
    background-color:#f9f9f9;
    box-shadow:0 2px 0 rgba(0,0,0,.02),inset 0 0 0 1px #dedede
}
.ot-demo-selector-preview{
    padding:13px 0;
    margin:0 15px;
    font-size:16px;
    font-weight:700;
    line-height:100%;
    border-bottom:1px dashed #EEE;
    transition:all .2s;
    -moz-transition:all .2s;
    -webkit-transition:all .2s;
    -o-transition:all .2s
}
.ot-demo-selector:hover .ot-demo-selector-preview{
    border-color:#dedede
}
.ot-demo-selector-block{
    display:block;
    padding:13px 15px;
    position:relative
}
.ot-demo-selector-block:before{
    display:block;
    content:attr(data-current-font)
}
.ot-demo-selector-block:after{
    display:block;
    font-family:FontAwesome;
    content:'\f0dc';
    position:absolute;
    right:15px;
    top:15px;
    font-size:12px;
    color:#ccc
}
.ot-demo-selector-wrap{
    display:block;
    position:absolute;
    z-index:2;
    background-color:#fff;
    border:1px solid #ececec;
    box-shadow:0 2px 30px rgba(0,0,0,.1);
    width:100%;
    top:50%;
    left:0;
    border-radius:3px;
    -webkit-transform:translate(0,-50%) scale(.4);
    -ms-transform:translate(0,-50%) scale(.4);
    transform:translate(0,-50%) scale(.4);
    overflow:hidden;
    z-index:-1;
    max-height:500px;
    opacity:0;
    filter:alpha(opacity=0);
    transition:all .2s;
    -moz-transition:all .2s;
    -webkit-transition:all .2s;
    -o-transition:all .2s
}
.ot-demo-selector-wrap span{
    display:block;
    position:relative;
    font-size:14px;
    padding:10px 15px
}
.ot-demo-selector-wrap span.current:hover:after,.ot-demo-selector-wrap span.current:after{
    color:#219bd6
}
.ot-demo-selector-wrap span:hover:after{
    color:#ccc
}
.ot-demo-selector-wrap span:after{
    display:block;
    font-family:FontAwesome;
    content:'\f00c';
    position:absolute;
    right:15px;
    top:12px;
    font-size:12px;
    color:transparent
}
.ot-demo-selector-wrap span:hover{
    background-color:#f5f5f5
}
.ot-demo-selector.active .ot-demo-selector-wrap{
    z-index:100;
    overflow-x:hidden;
    overflow-y:auto;
    opacity:1;
    filter:alpha(opacity=100);
    -webkit-transform:translate(0,-50%) scale(1);
    -ms-transform:translate(0,-50%) scale(1);
    transform:translate(0,-50%) scale(1)
}
#demo-s-wrap{
    margin-bottom:88px;
    max-height:75%;
    max-height:-webkit-calc(100% - 88px - 91px);
    max-height:calc(100% - 88px - 91px);
    overflow-x:hidden;
    overflow-y:auto
}
.ot-demo-set-foot{
    display:block;
    position:relative;
    bottom:0;
    left:0;
    width:100%;
    padding:20px;
    font-size:15px;
    margin-top:-88px;
    box-shadow:0 -1px 0 #EEE
}
.ot-demo-set-foot .button-square{
    padding:14px 27px
}
.ot-demo-set-foot .button-link{
    margin-bottom:12px!important
}
.ot-d-buy-button{
    display:block;
    float:left;
    background:#f98639;
    border-radius:2px;
    font-weight:900;
    letter-spacing:-.4px;
    font-size:14px;
    line-height:100%;
    padding:16px 17px 14px;
    color:#FFF!important;
    border-bottom:3px solid rgba(0,0,0,.1)
}
.ot-d-buy-button:hover{
    background:#ffad44;
    color:#FFF!important
}
.ot-d-reset-button{
    display:block;
    float:right;
    font-weight:900;
    letter-spacing:-.4px;
    font-size:14px;
    line-height:100%;
    padding:16px 17px 14px;
    text-decoration:underline;
    color:#aaa!important
}
.ot-d-reset-button:hover{
    text-decoration:underline;
    color:#000!important
}
@-webkit-keyframes flip-loop{
    0%{
        -ms-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
    }
    50%{
        -ms-transform:rotate(180deg);
        -webkit-transform:rotate(180deg);
        transform:rotate(180deg)
    }
    100%{
        -ms-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}
@keyframes flip-loop{
    0%{
        -ms-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
    }
    50%{
        -ms-transform:rotate(180deg);
        -webkit-transform:rotate(180deg);
        transform:rotate(180deg)
    }
    100%{
        -ms-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}