/*--Header Initial Hide--*/
.header-wrapper {display: block;}
.demo-header-wrapper #demo-header-one, .demo-header-wrapper #demo-header-two, .demo-header-wrapper #demo-header-three, .demo-header-wrapper #demo-header-four, .demo-header-wrapper #demo-header-five, .demo-header-wrapper #demo-header-six {display: none;}

/*--Footer Initial Hide--*/
.footer-wrapper {display: block;}
.demo-footer-wrapper .demo-footer-one, .demo-footer-wrapper .demo-footer-two, .demo-footer-wrapper .demo-footer-three {display:none;}


.slide-out-div {padding: 0 20px 20px; width: 500px; height: 100%; background: #ffffff; opacity:97%; z-index: 1001; top: 0!important;border: solid 5px #e2e2e28f;border-left:0}
.slide-out-div .eyebrow {color:#1976D2;}

.slide-out-div p, .slide-out-div h3, .slide-out-div h4,.slide-out-div h5,.slide-out-div h6, .slide-out-div select{font-family:'Open Sans', sans-serif;}

.features-contact h4 {text-align:left; margin-left:0px; margin-top:6px; color:#cccccc !important;}
.features-contact h5 {text-align:left; margin-left:0px; color:#cccccc !important;}
.features-wrapper a {color:#000; }
.features-wrapper .accordion { background:transparent;}

h4.header-feat {margin-bottom:0;}

.handle {position: absolute!important;top: 50%!important;right:-75px !important;width: 70px;height: 50px; background: var(--primary);display: flex;align-items: center;justify-content: center;cursor: pointer;overflow: hidden;transform-origin: center;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}  
.inner {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;font-size: 16px;font-weight: bold;transition: transform 0.6s;transform-style: preserve-3d;}  
.handle:hover .inner, .slide-out-div.open .inner {transform: perspective(400px) rotateY(180deg) scale(1) ;}
.handle .card-front,.handle .card-back {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;display: flex;align-items: center;justify-content: center;}
.card-front {border: 1px solid var(--primary-dark); }
.card-back {color: var(--primary-light);transform: rotateY(180deg);}
.slide-out-div .card-back:after {content:"Open";}
.slide-out-div.open .card-back:after {content:"Close";}


.setting {clear: both; margin-top: 20px;}
.setting h3 { margin-bottom:1rem;}
.setting p {margin: 0; font-size: 13px;}
.setting ul {margin-top: 0; margin-left: 5px; font-size: 13px;}
.setting ul ul {padding-left:20px;}
/*.setting li {color: #fff;}*/
.setting li strong {font-size: 14px;}

.color-options {display: flex;flex-wrap: wrap;}
.circles{position:relative; margin-bottom: 4em;}
.circle{position: absolute;border-radius: 50%; width:25px; height:25px; border:solid 2px #fff;}
.color-one .circle1 {background-color: #000000;margin-top: 5px}
.color-one .circle2 {background-color: #347322;margin-left: 15px}
.color-one .circle3 {background-color: #74C40E;margin-left: 30px; margin-top: 8px}
.color-two .circle1 {background-color: #004386;margin-top: 5px}
.color-two .circle2 {background-color: #1E8DFB;margin-left: 15px}
.color-two .circle3 {background-color: #D12020;margin-left: 30px; margin-top: 8px}
.color-three .circle1 {background-color: #DDDDDD;margin-top: 5px}
.color-three .circle2 {background-color: #793D12;margin-left: 15px}
.color-three .circle3 {background-color: #268626;margin-left: 30px; margin-top: 8px}
.color-four .circle1 {background-color: #BA0404;margin-top: 5px}
.color-four .circle2 {background-color: #EC4949;margin-left: 15px}
.color-four .circle3 {background-color: #FBAD41;margin-left: 30px; margin-top: 8px}
.color-five .circle1 {background-color:#000 ;margin-top: 5px}
.color-five .circle2 {background-color:#000 ;margin-left: 15px}
.color-five .circle3 {background-color:#000 ;margin-left: 30px; margin-top: 8px}
.circle-input {position:absolute; margin-top: 35px; margin-left: 15px}
.colorPicker {appearance: none;-moz-appearance: none;-webkit-appearance: none;padding: 0;cursor: pointer;}
img.colorpick-eyedropper-input-trigger {padding:0; display:none;}


.button.demo {color:#fff;background: linear-gradient(to right,#0C346E 15%,#0E499D 15% 85%); width:95%; text-align:left}
.button.demo span { margin-right:10px; height:100%; width:100%}

.setting .marketing.cell {border: solid 2px #cccccc; background:#fff; text-align: center; padding:1em 0; text-decoration: none;cursor: pointer;}
.setting .marketing iconify-icon { font-size:2rem; line-height:2rem; vertical-align:middle; margin-bottom:0.15rem;}
.setting .marketing.cell a {text-decoration: none;}
.setting .marketing.cell p {font-weight:800; font-size: 14px; line-height: 1;}