/* -------------------------------------------------------------------------------- / [9] ADVANCED CUSTOMIZATIONS / -------------------------------------------------------------------------------- */ /*** template color customizations ***/ /* custom background */ #hs-container .has-custom-bg { background:#3544ee!important; } /* custom color */ body .has-custom-color, .has-custom-color p, .has-custom-color table, .has-custom-color td { color:#3544ee; } /* custom links */ #hs-container .has-custom-link a:link,#hs-container .has-custom-link a:visited { color:#3544ee; } /* custom buttons */ #hs-container .has-custom-btn .j-product .cc-shop-product-desc .cc-shop-addtocard,#hs-container .has-custom-btn #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout,#hs-container .has-custom-btn #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn,#hs-container .has-custom-btn .j-blogarticle .blogreadmore:link,#hs-container .has-custom-btn .j-blogarticle .blogreadmore:visited,#hs-container .has-custom-btn .j-blogarticle .comment:link,#hs-container .has-custom-btn .j-blogarticle .comment:visited,#hs-container .has-custom-btn .post .blogreadmore:link,#hs-container .has-custom-btn .post .blogreadmore:visited,#hs-container .has-custom-btn .post .comment:link,#hs-container .has-custom-btn .post .comment:visited,#hs-container .has-custom-btn .commententry input[type="submit"],#hs-container .has-custom-btn .j-formnew input[type='submit'],#hs-container .has-custom-btn .j-downloadDocument .cc-m-download-link,#hs-container .has-custom-btn .j-newsletterbox input[type='submit'],.cc-pagemode-overlay #hs-container .has-custom-btn input[type="submit"].submitUser,#hs-container .has-custom-btn .j-rss br+a[target="_blank"],#hs-container .has-custom-btn input#mc-embedded-subscribe.button,#hs-container .has-custom-btn a.j-calltoaction-link.j-calltoaction-link-style-1,#hs-container .has-custom-btn a.j-calltoaction-link.j-calltoaction-link-style-2,#hs-container .has-custom-btn a.j-calltoaction-link.j-calltoaction-link-style-3 { background:#3544ee; } /* custom buttons hover */ #hs-container .hs-button.has-custom-btn-hover:hover,#hs-container .has-custom-btn-hover .j-product .cc-shop-product-desc .cc-shop-addtocard:hover,#hs-container .has-custom-btn-hover #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout:hover,#hs-container .has-custom-btn-hover #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn:hover,#hs-container .has-custom-btn-hover .j-blogarticle .blogreadmore:hover:link,#hs-container .has-custom-btn-hover .j-blogarticle .blogreadmore:hover:visited,#hs-container .has-custom-btn-hover .j-blogarticle .comment:hover:link,#hs-container .has-custom-btn-hover .j-blogarticle .comment:hover:visited,#hs-container .has-custom-btn-hover .post .blogreadmore:hover:link,#hs-container .has-custom-btn-hover .post .blogreadmore:hover:visited,#hs-container .has-custom-btn-hover .post .comment:hover:link,#hs-container .has-custom-btn-hover .post .comment:hover:visited,#hs-container .has-custom-btn-hover .commententry input[type="submit"]:hover,#hs-container .has-custom-btn-hover .j-formnew input[type='submit']:hover,#hs-container .has-custom-btn-hover .j-downloadDocument .cc-m-download-link:hover,#hs-container .has-custom-btn-hover .j-newsletterbox input[type='submit']:hover,.cc-pagemode-overlay #hs-container .has-custom-btn-hover input[type="submit"].submitUser:hover,#hs-container .has-custom-btn-hover .j-rss br + a[target="_blank"]:hover,#hs-container .has-custom-btn-hover .j-product .cc-shop-product-desc .cc-shop-addtocard:active,#hs-container .has-custom-btn-hover #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout:active,#hs-container .has-custom-btn-hover #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn:active,#hs-container .has-custom-btn-hover .j-blogarticle .blogreadmore:active:link,#hs-container .has-custom-btn-hover .j-blogarticle .blogreadmore:active:visited,#hs-container .has-custom-btn-hover .j-blogarticle .comment:active:link,#hs-container .has-custom-btn-hover .j-blogarticle .comment:active:visited,#hs-container .has-custom-btn-hover .post .blogreadmore:active:link,#hs-container .has-custom-btn-hover.post .blogreadmore:active:visited,#hs-container .has-custom-btn-hover .post .comment:active:link,#hs-container .has-custom-btn-hover .post .comment:active:visited,#hs-container .has-custom-btn-hover .commententry input[type="submit"]:active,#hs-container .has-custom-btn-hover .j-formnew input[type='submit']:active,#hs-container .has-custom-btn-hover .j-downloadDocument .cc-m-download-link:active,#hs-container .has-custom-btn-hover .j-newsletterbox input[type='submit']:active,#hs-container .has-custom-btn-hover .cc-pagemode-overlay input[type="submit"].submitUser:active,#hs-container .has-custom-btn-hover .j-rss br + a[target="_blank"]:active,#hs-container .has-custom-btn-hover .j-product .cc-shop-product-desc .cc-shop-addtocard:focus,#hs-container .has-custom-btn-hover #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout:focus,#hs-container .has-custom-btn-hover #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn:focus,#hs-container .has-custom-btn-hover .j-blogarticle .blogreadmore:focus:link,#hs-container .has-custom-btn-hover .j-blogarticle .blogreadmore:focus:visited,#hs-container .has-custom-btn-hover .j-blogarticle .comment:focus:link,#hs-container .has-custom-btn-hover .j-blogarticle .comment:focus:visited,#hs-container .post .blogreadmore:focus:link,#hs-container .has-custom-btn-hover .post .blogreadmore:focus:visited,.post .comment:focus:link,#hs-container .has-custom-btn-hover .post .comment:focus:visited,#hs-container .has-custom-btn-hover .commententry input[type="submit"]:focus,#hs-container .has-custom-btn-hover .j-formnew input[type='submit']:focus,#hs-container .has-custom-btn-hover .j-downloadDocument .cc-m-download-link:focus,#hs-container .has-custom-btn-hover .j-newsletterbox input[type='submit']:focus,.cc-pagemode-overlay #hs-container .has-custom-btn-hover input[type="submit"].submitUser:focus,#hs-container .has-custom-btn-hover .j-rss br+a[target="_blank"]:focus,#hs-container .has-custom-btn-hover input#mc-embedded-subscribe.button:hover,#hs-container .has-custom-btn-hover a.j-calltoaction-link.j-calltoaction-link-style-1:hover,#hs-container .has-custom-btn-hover a.j-calltoaction-link.j-calltoaction-link-style-2:hover,#hs-container .has-custom-btn-hover a.j-calltoaction-link.j-calltoaction-link-style-3:hover { border:none; background: #fff!important; color:#222!important; } /* custom dropdown menu hover and active */ .has-custom-menu-hover .hs-menu nav ul ul li.cc-nav-parent>a:link,.has-custom-menu-hover .hs-menu nav ul ul li.cc-nav-parent>a:visited,.has-custom-menu-hover .hs-menu nav ul ul li.cc-nav-current>a:link,.has-custom-menu-hover .hs-menu nav ul ul li.cc-nav-current>a:visited, .has-custom-menu-hover .hs-menu nav ul ul li a:link:hover,.has-custom-menu-hover .hs-menu nav ul ul li a:link:active,.has-custom-menu-hover .hs-menu nav ul ul li a:link:focus,.has-custom-menu-hover .hs-menu nav ul ul li a:visited:hover,.has-custom-menu-hover .hs-menu nav ul ul li a:visited:active,.has-custom-menu-hover .hs-menu nav ul ul li a:visited:focus { background: #3544ee!important; color:#fff!important; } /* custom mobile menu hover and active */ .cc-page .has-custom-menu-mobile .slicknav_nav a:hover, .has-custom-menu-mobile .jmd-nav .j-nav-current>a:link,.has-custom-menu-mobile .jmd-nav .j-nav-current>a:visited,.has-custom-menu-mobile .jmd-nav a:active,.has-custom-menu-mobile .jmd-nav a:focus,.has-custom-menu-mobile .jmd-nav a:hover, .cc-page .has-custom-menu-mobile .slicknav_nav a.cc-nav-current.j-nav-current.jmd-nav__link--current { color:#3544ee!important; } /* custom form styles */ .has-custom-form .cc-checkout-user-note-form textarea,.has-custom-form #cc-checkout-billing-address-form input[type="text"],.has-custom-form #cc-checkout-shipping-address-form input[type="text"],.has-custom-form .commententry textarea,.has-custom-form .commententry input[type="text"],.has-custom-form .j-formnew .cc-m-form-view-sortable input[type='text'],.has-custom-form .j-formnew .cc-m-form-view-sortable input[type='email'],.has-custom-form .j-formnew .cc-m-form-view-sortable textarea,.has-custom-form .j-newsletterbox input[type='email'],.cc-pagemode-overlay .has-custom-form #password,.has-custom-form .newsletterbox input.newsletterInput { background-color: #f0f0f0; color: inherit; border: 0px solid #ededed; border-radius:0px; padding: 10px 0; outline: none; width:99%!important; -webkit-appearance: none; -moz-appearance: none; } /* custom horizontal line */ #hs-container .has-custom-hr .hr{ border-bottom-width:0px; height: 1px; border-bottom-width: 0px; border-color:transparent; background:#2af5dd!important; } /* custom shopping cart */ .custom-basket-color .j-cart-icon { color: #fff; background-color: rgba(252, 252, 252, 0.0); } /* animated underlined nav */ .snip-nav { padding-top: 0; } .snip-nav * { box-sizing: border-box; } .snip-nav li { display: inline-block; list-style: outside none none; margin: 0; padding: 0px 0; } .snip-nav a { padding: 0.2em 0; position: relative; } .snip-nav a:before, .snip-nav a:after { position: absolute; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .snip-nav a:before { bottom: 0; display: block; height: 2px; width: 0%; content: ""; background-color: #333; } .jmd-nav__list-item-1 a:before{ } .snip-nav a:after { left: 0; top: 0; padding: 0.5em 0; position: absolute; content: attr(data-hover); color: #444; white-space: nowrap; max-width: 0%; overflow: hidden; } .snip-nav a:hover:before, .snip-nav .current a:before, .hs-menu.snip-nav nav ul li.cc-nav-current>a:before, .hs-menu.snip-nav nav ul li.cc-nav-parent>a:before { opacity: 1; width: 100%; } .snip-nav a:hover:after, .snip-nav .current a:after { max-width: 100%; } .hs-menu.snip-nav nav ul li a:link,.hs-menu.snip-nav nav ul li a:visited { padding:2px 0; margin:12px 20px; color: #333!important; } .hs-menu.snip-nav nav ul ul li a:link,.hs-menu.snip-nav nav ul ul li a:visited { padding: 5px 0; margin: 7px 20px; color:#333!important; background:transparent!important; } .snip-nav ul ul a:before { } .has-custom-nav .hs-menu.snip-nav nav ul :last-child ul ul { position: absolute; left: -190px; max-width:190px; top: 0; } /* -------------------------------- Main components Matrix-menu -------------------------------- */ html, body { height: 100%; } .cd-main-content { text-align: center; } .cd-main-content h1 { font-size: 20px; font-size: 1.25rem; color: #64788c; padding: 4em 0; } .cd-main-content .cd-btn { position: relative; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-radius: 50em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .no-touch .cd-main-content .cd-btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3); } @media only screen and (min-width: 1170px) { .cd-main-content h1 { font-size: 32px; font-size: 2rem; } } .cd-panel { position: fixed; top: 0; left: 0; height: 100%; width: 50%; max-width:461px; visibility: hidden; z-index:3203003; -webkit-transition: visibility 0s 0.6s; -moz-transition: visibility 0s 0.6s; transition: visibility 0s 0.6s; } .cd-panel::after { /* overlay layer */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; cursor: pointer; -webkit-transition: background 0.3s 0.3s; -moz-transition: background 0.3s 0.3s; transition: background 0.3s 0.3s; } .cd-panel.is-visible { visibility: visible; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s; } .cd-panel.is-visible::after { background: rgba(0, 0, 0, 0.6); -webkit-transition: background 0.3s 0s; -moz-transition: background 0.3s 0s; transition: background 0.3s 0s; } .cd-panel.is-visible .cd-panel-close::before { -webkit-animation: cd-close-1 0.6s 0.3s; -moz-animation: cd-close-1 0.6s 0.3s; animation: cd-close-1 0.6s 0.3s; } .cd-panel.is-visible .cd-panel-close::after { -webkit-animation: cd-close-2 0.6s 0.3s; -moz-animation: cd-close-2 0.6s 0.3s; animation: cd-close-2 0.6s 0.3s; } @-webkit-keyframes cd-close-1 { 0%, 50% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(45deg); } } @-moz-keyframes cd-close-1 { 0%, 50% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(45deg); } } @keyframes cd-close-1 { 0%, 50% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } } @-webkit-keyframes cd-close-2 { 0%, 50% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(-45deg); } } @-moz-keyframes cd-close-2 { 0%, 50% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(-45deg); } } @keyframes cd-close-2 { 0%, 50% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } } .cd-panel-header { position: fixed; height: 50px; width: 50%; max-width: 461px; line-height: 50px; background: #4c73bb; z-index:3203003; -webkit-transition: top 0.3s 0s; -moz-transition: top 0.3s 0s; transition: top 0.3s 0s; } .cd-panel-header h1,.cd-panel-header span { font-family: "Brandon Text",Asap,Verdana,Arial,sans-serif!important; font-size:18px; color: #fff; text-align:left; font-weight:400; padding:10px 20px; } .from-right .cd-panel-header, .from-left .cd-panel-header { top: -50px; } .from-right .cd-panel-header { right: 0; } .from-left .cd-panel-header { left: 0; } .is-visible .cd-panel-header { top: 0; -webkit-transition: top 0.3s 0.3s; -moz-transition: top 0.3s 0.3s; transition: top 0.3s 0.3s; } @media only screen and (min-width: 768px) { .cd-panel-header { /* width: 50%; */ } } @media only screen and (min-width: 1170px) { .cd-panel-header { /* width: 50%; */ } } .cd-panel-close { position: absolute; top: 0; right: 0; height: 100%; width: 60px; height: 50px; display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap; } a.cd-panel-close {color:transparent!important;} .cd-panel-close::before, .cd-panel-close::after { /* close icon created in CSS */ position: absolute; top: 22px; left: 20px; height: 3px; width: 20px; background-color: #fff; content: "\f00d"; font-family: FontAwesome; /* this fixes a bug where pseudo elements are slighty off position */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-panel-close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-panel-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .no-touch .cd-panel-close:hover { background-color: #424f5c; } .no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after { background-color: #ffffff; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .no-touch .cd-panel-close:hover::before { -webkit-transform: rotate(220deg); -moz-transform: rotate(220deg); -ms-transform: rotate(220deg); -o-transform: rotate(220deg); transform: rotate(220deg); } .no-touch .cd-panel-close:hover::after { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .cd-panel-container { position: fixed; width: 50%; max-width: 461px; height: 100%; overflow:hidden; top: 0; background: #F4F5F9; box-shadow: 0 0 20px 0 rgba(0,0,0,.2); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } .cd-panel-container a:link,.cd-panel-container a:visited { color:#696c76!important; font-size:16px!important; line-height:100%!important; width: auto; padding:10px; margin: 1px 0; display:block; outline:none; text-decoration:none!important; text-overflow: ellipsis; font-family: "Brandon Text",Asap,Verdana,Arial,sans-serif!important; -webkit-transition: all 200ms linear; -o-transition: all 200ms linear; -moz-transition: all 200ms linear; } a.mt.active,.cd-panel-container a:link:hover,.cd-panel-container a:visited:hover,.cd-panel-container a:active,.cd-panel-container:focus{ background: #4c73bb!important; color: #fff!important; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .from-right .cd-panel-container { right: 0; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .from-left .cd-panel-container { left: 0; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .is-visible .cd-panel-container { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } @media only screen and (min-width: 768px) { .cd-panel-container { width: 50%; } } @media only screen and (min-width: 1170px) { .cd-panel-container { width: 50%; } } .cd-panel-content { position: relative; top: 0; left: 0; height: 100%; padding: 60px 5px 0 5px; overflow: auto; border-right: 1px solid #dbdce0; /* smooth scrolling on touch devices */ -webkit-overflow-scrolling: touch; } .cd-panel-content p { font-size: 14px; font-size: 0.875rem; color: #424f5c; line-height: 1.4; margin: 2em 0; } .cd-panel-content p:first-of-type { margin-top: 0; } @media only screen and (min-width: 768px) { .cd-panel-content p { font-size: 16px; font-size: 1rem; line-height: 1.6; } } #iframe-holder{ border:none; position:absolute; } /* push admin layout */ .has-push-layout{ -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in; } .has-push-layout.is-pushed{ margin-left:461px; } @media only screen and (max-width: 1023px) { .has-push-layout.is-pushed{ margin-left:0; } } .has-push-layout.is-pushed .hs-content .inner, .has-push-layout.is-pushed .hs-footer .inner, .has-push-layout.is-pushed .footer-btm .inner{ width:100%; padding:27px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*** end matrix-menu ***/