/* ===[ Font Code ]=== */ /* @end --------- */ /* ===[ Animations ]=== */ @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 100% { opacity:0; } 0 { opacity:1; } } @-moz-keyframes fadeIn { 100% { opacity:0; } 0 { opacity:1; } } @-o-keyframes fadeIn { 100% { opacity:0; } 0 { opacity:1; } } @keyframes fadeIn { 100% { opacity:0; } 0 { opacity:1; } } @-webkit-keyframes slider { from {bottom:-200px; opacity:0} to {bottom:0; opacity:1} } @-moz-keyframes slider { from {bottom:-200px; opacity:0} to {bottom:0; opacity:1}} @-o-keyframes slider { from {bottom:-200px; opacity:0} to {bottom:0; opacity:1} } @keyframes slider { from {bottom:-200px; opacity:0} to {bottom:0; opacity:1}} /* Add Animation */ @-webkit-keyframes slideIn { from {bottom:-300px; opacity:0} to {bottom:0; opacity:1} } @keyframes slideIn { from {bottom:-300px; opacity:0} to {bottom:0; opacity:1}} @-webkit-keyframes fadeIn { from {opacity:0} to {opacity:1} } @keyframes fadeIn { from {opacity:0} to {opacity:1} } /* @end --------- */ /* ===[ Common Colours ]=== */ body { background-color:#fff; color:#333; font-size:16px; font-family:"Open Sans", Helvetica, Arial, sans-serif; text-rendering:optimizeLegibility; } /* ===[ Root element styles ]=== */ a { color:#694162; text-decoration:none; outline:none; font-size:16px;} a:focus { outline:none; color:#0066ff; } .phone a:focus { outline:none; outline:5px auto -webkit-focus-ring-color; outline-offset:-2px; } a:hover { color:#ff9a22 !important; text-decoration:none; outline:none; } a:active { outline:none } sub, sup { position:relative; font-size:75%; line-height:0; vertical-align:baseline; } sup { top:-0.5em } sub { bottom:-0.25em } img { border:0 } .img-rounded { border-radius:500px } .img-polaroid { padding:4px; background-color:#fff; border:1px solid #ccc; border:1px solid rgba(0,0,0,0.2); -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1); -moz-box-shadow:0 1px 3px rgba(0,0,0,0.1); box-shadow:0 1px 3px rgba(0,0,0,0.1); } .img-circle { border-radius:500px } /* ===[ Text ]=== */ p { margin:0 0 10px; line-height:1.6em; color:#666; font-size:16px; } .lead { color:#999; font-style:italic; font-weight:200; font-size:15px; } small { font-size:85% } strong { font-weight:bold } em { font-style:italic } cite { font-style:normal } h1, h2, h3, h4, h5, h6 { margin:10px 0; font-family:inherit; font-family:"Open Sans", Helvetica, Arial, sans-serif; line-height:1.4em;} h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-weight:normal; line-height:1; color:#999; } h6 small > a { color:#999 } h1, .h1 { color:#e28f19; font-size:34px; display:block; line-height:1em; } body h1:first-child { margin-top:0 } h2, .h2 { color:#7a6da8; font-size:34px; display:block; line-height:1em; } h3, .h3 { color:#e29540; font-size:24.5px; line-height:1.4em; } h4, .h4 { font-size:17.5px;} h5, .h5 { font-size:14px; } h6, .h6 { font-size:11px } /* ===[ Lists ]=== */ ul, ol { padding:0; margin:0 0 10px 25px; } li { line-height:20px } ul.unstyled, ol.unstyled { margin-left:0; list-style:none; } ul.inline, ol.inline { margin-left:0; list-style:none; } ul.inline>li, ol.inline>li { padding-right:5px; padding-left:5px; } dl { margin-bottom:20px } dt, dd { line-height:20px } dt { font-weight:bold } dd { margin-left:10px } hr { margin:20px 0; border:0; border-top:1px solid #eee; border-bottom:1px solid #fff; } /* @end Root*/ /* ===[ Table styles ]=== */ table { } .table { } .table th, .table td { } .table th { } .table thead th { } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { text-transform:uppercase } /* @end Table*/ /* ****** Captcha*/ .captcha-area { *zoom:1; margin-bottom:10px; } .captcha-area:before, .captcha-area:after { content:" "; display:table; } .captcha-area:after { clear:both } #captcha-reload { float:left; width:345px; margin-right:10px; } .captchaimg { height:36px; width:160px; border-radius:5px; background:#666; float:left; } .captchaimg img { border-radius:5px } #CaptchaV2 { height:37px; border-radius:5px; border:1px solid #ccc; float:left; margin-left:10px; text-align:center; font-size:21px; } #CaptchaV2:focus { } #reload-captcha { height:37px; float:left; } /* @end --------- */ /* ===[ Social ]=== */ .social-likes { margin:15px 0; padding:10px 0; border:1px solid #f5f5f5; border-left:0 none; border-right:0 none; } .social-likes li { display:inline-block; list-style:none; position:relative; } .twitter { } .fb-like span { position:absolute; left:0; top:4px; } .social [class*="fa fa-"] { background-color:#ffffff; border-radius:30px; border:2px solid #333333; color:#333333; display:inline-block; height:44px; line-height:40px; margin:auto 3px; width:44px; font-size:22px; text-align:center; } .fa-twitter:hover { background-color:#333; color:#ffffff; } .fa-facebook:hover { background-color:#333; color:#ffffff; } .fa-linkedin:hover { background-color:#333; color:#ffffff; } .social a:hover { color:#ffffff !important;} /* @end --------- */ /* ===[ Modal Style ]=== */ .modal-open { overflow:visible } .modal-content { } .modal-header { position:relative } .modal-header:after { } .close { font-size:28px; z-index:50; } .modal-title, .catalog h4 .modal-title { font-size:18px; text-align:center; } #modal-body.image-zoom { } #modal-body.image-zoom img { margin:0 auto } #modal-body.review { padding:15px } #modal-body.review form { } #modal-body.review form label { } #brochure-modal h2, #brochure-modal p {text-align:center;} #brochure-modal .modal-content { background: #fff;border-radius: 6px; bottom: 0; height:750px ;left: 0; margin: auto;max-height: 90%;max-width: 500px;overflow-y: scroll; position: absolute;right: 0;top: 0;width: 90%; transform: translate(0,0); } #brochure-modal span.checkbox { width:90% !important;} .modal { display:none; /* Hidden by default */ position:fixed; /* Stay in place */ z-index:3; /* Sit on top */ left:0; top:0; width:100%; /* Full width */ height:100%; /* Full height */ overflow:auto; /* Enable scroll if needed */ background-color:rgb(0,0,0); /* Fallback color */ background-color:rgba(0,0,0,0.4); /* Black w/ opacity */-webkit-animation-name:fadeIn; /* Fade in the background */ -webkit-animation-duration:0.4s; animation-name:fadeIn; animation-duration:0.4s} /* Modal Content */ .modal-content { position:fixed; top:10%; left:50%; transform:translate(-50%,0); background-color:#fefefe; width:640px; border-radius: 8px;} /* The Close Button */ .modal-close { color:white; float:right; font-size:28px; font-weight:bold; } .close:hover, .close:focus { color:#000; text-decoration:none; cursor:pointer; } .modal-header { padding:2px 16px; background-color:#ffffff; border-radius: 8px;} .modal-body { padding:2px 16px;} .modal-footer { padding:2px 16px; background-color:#ffffff; color:white; } .videowrapper { position:relative; padding-bottom:56.25%; /* 16:9 */ padding-top:25px; height:0; } .videowrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; } /* @end --------- */ /* ===[ Form Style ]=== */ form { } form fieldset { margin-bottom:20px } form legend { border:0 none } form legend small { display:block; color:#999; } .form-control { height:38px; border-color:#ccc; font-size:13px; color:#999; } .form-control:focus { color:#333 } .form-control::-webkit-input-placeholder { color:#999 } .form-control:-moz-placeholder { color:#999 } .form-control::-moz-placeholder { color:#999 } .form-control:-ms-input-placeholder { color:#999 } .form-control:-placeholder { color:#999 } select.form-control { padding:8px 12px 6px 12px } input[type="checkbox"] { border-radius:0; border:1px solid #ccc; } input[type="radio"], select { cursor:pointer } label { font-weight:normal; font-style:italic; } input[type=radio] { cursor:pointer } select.form-control { font-weight:normal } .form-item { margin-bottom:15px } .form-notice { padding:0; margin-bottom:12px; font-size:12px; color:#999; line-height:1.4em; } input[type="search"]::-ms-clear { display:none } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display:none } /* @end --------- */ /* ===[ Button Style ]=== */ .btn { -webkit-transition:all .3s linear; -webkit-border-radius:21px; -o-transition:all .3s linear; -ms-transition:all .3s linear; -moz-transition:all .3s linear; -moz-border-radius:21px; background:#ff9a22; color:#fff; display:inline-block; padding:0 50px; margin-bottom:0; font-weight:bold; line-height:50px; text-align:center; white-space:nowrap; vertical-align:middle; -ms-touch-action:manipulation; touch-action:manipulation; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; background-image:none; border:1px solid #ff9a22; border-radius:35px; -webkit-font-smoothing:subpixel-antialiased; transition:all .3s linear; } .btn.reverse { -webkit-transition:all .3s linear; -webkit-border-radius:21px; -o-transition:all .3s linear; -ms-transition:all .3s linear; -moz-transition:all .3s linear; -moz-border-radius:21px; background:#fff; color:#ff9a22; display:inline-block; padding:0 50px; margin-bottom:0; font-weight:bold; line-height:50px; text-align:center; white-space:nowrap; vertical-align:middle; -ms-touch-action:manipulation; touch-action:manipulation; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; background-image:none; border:2px solid #ff9a22; border-radius:35px; -webkit-font-smoothing:subpixel-antialiased; transition:all .3s linear; } .btn.reverse:hover { background:none; border:2px solid #ff9a22; color:#ffffff !important; background-color:#ff9a22; text-decoration:none; } .btn-lg { } .btn:hover, .btn-primary:active, .btn-primary:focus { } .btn-primary { } .btn-primary:hover, .btn-primary:active, .btn-primary:focus { } .btn-inverse { } .btn-inverse:hover, .btn-inverse:active, .btn-inverse:focus { } .btn-success { } .btn-success:hover, .btn-success:active, .btn-success:focus { } .btn-default:hover, .btn-default:active, .btn-default:focus { } .below-header-button { font-size:18px; text-transform:none;} .banner-button { margin: 36px auto 40px auto; display: block; width: 208px; } /* @end --------- */ /* ===[ Crumbs ]=== */ .crumbs { color:#666; font-size:12px; line-height:12px; text-transform:uppercase; font-weight:bold; } .crumbs > a { color:#666 } .crumbs > a:hover { text-decoration:none; color:#d7df3a; } /* @end --------- */ /* ===[ Pagination ]=== */ .pager { } .pagination-block { } .pagination { border-radius:0; color:#333; } .pagination:before, .pagination:after { content:" "; display:table; } .pagination:after { clear:both; } .pagination { *zoom:1; } .pagination > li { display:block; float:left; } .pagination > li > a, .pagination > li > span { border-color:#d9dee1; color:#415a68; } .pagination > li:last-child > a, .pagination > li:last-child > span { border-radius:0 } .pagination > li:first-child > a, .pagination > li:first-child > span { border-radius:0 } li.pag-current { padding:6px 12px; border:1px solid #d9dee1; background-color:#dae3e8; color:#415a68; } /* @end --------- */ /* **************** General Styles *****************/ /* ===[ Main components ]=== */ main, header { -webkit-transform:translateZ(0px); -moz-transform:translateZ(0px); -ms-transform:translateZ(0px); -o-transform:translateZ(0px); transform:translateZ(0px); will-change:transform; } main, header, header > .container { position:relative; -webkit-transition:-webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s; } main { background:#ffffff; z-index:2; } header { height:50px; background:#fff; z-index:3; box-shadow: 0 5px 10px #ccc; } /* ===[ Class if you want fixed nav ]=== */ .nav-is-fixed header { position:fixed; top:0; left:0; width:100%; } .header-buttons { height:50px; position:absolute; display:inline-block; top:0; right:0; padding:0; margin:0; } .header-buttons li { height:50px; display:inline-block; } .nav-trigger { height:50px; line-height:60px; position:relative; display:block; ; white-space:nowrap; z-index:3; padding-left:26px; background-color:#ffffff; border:none;} .search-trigger { display:block; width:44px; height:50px; line-height:50px; text-align:center; overflow:hidden; font-size:26px; color:#333; } .search-trigger:hover { color:#ccc } .nav-trigger .line { width:100%; height:3px; display:block; background:#333; position:absolute; left:0; right:0; border-radius:4px; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; transition:all 0.4s; } .nav-trigger .line.line-1 { top:30%; } .nav-trigger .line.line-2 { top:50%; } .nav-trigger .line.line-3 { top:70%; } .nav-trigger:hover .line { color:#ccc } .nav-trigger.nav-is-visible .line-1 { transform:translateY(10px) translateX() rotate(45deg); -webkit-transform:translateY(10px) translateX() rotate(45deg); -moz-transform:translateY(10px) translateX() rotate(45deg); } .nav-trigger.nav-is-visible .line-2 { opacity:0 } .nav-trigger.nav-is-visible .line-3 { transform:translateY(-11px) translateX() rotate(-45deg); -webkit-transform:translateY(-11px) translateX() rotate(-45deg); -moz-transform:translateY(-11px) translateX() rotate(-45deg); } .primary-nav, .primary-nav ul { position:fixed; top:0; right:0; height:100%; width:260px; background:#796eaa;; overflow:auto; -webkit-overflow-scrolling:touch; z-index:3; -webkit-transform:translateZ(0px); -moz-transform:translateZ(0px); -ms-transform:translateZ(0px); -o-transform:translateZ(0px); transform:translateZ(0px); -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); -o-transform:translateX(0px); transform:translateX(0px); -webkit-transition:-webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s;} .primary-nav a, .primary-nav ul a { display:block; height:50px; line-height:50px; padding:0 20px; color:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; -webkit-transform:translateZ(0px); -moz-transform:translateZ(0px); -ms-transform:translateZ(0px); -o-transform:translateZ(0px); transform:translateZ(0px); will-change:transform, opacity; -webkit-transition:-webkit-transform 0.3s, opacity 0.3s; -moz-transition:-moz-transform 0.3s, opacity 0.3s; transition:transform 0.3s, opacity 0.3s; } .primary-nav.is-hidden, .primary-nav ul.is-hidden { -webkit-transform:translateX(100%); -moz-transform:translateX(100%); -ms-transform:translateX(100%); -o-transform:translateX(100%); transform:translateX(100%); } .primary-nav.moves-out > li > a, .primary-nav ul.moves-out > li > a { -webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); -ms-transform:translateX(-100%); -o-transform:translateX(-100%); transform:translateX(-100%); opacity:0; } .primary-nav .see-all a { color:#000 } .primary-nav .nav-gallery .nav-item, .primary-nav .nav-icons .nav-item { height:80px; line-height:80px; } .primary-nav .nav-gallery .nav-item h3, .primary-nav .nav-icons .nav-item h3 { overflow:hidden; text-overflow:ellipsis; } .primary-nav .nav-gallery .nav-item { padding-left:90px } .primary-nav .nav-gallery .nav-item img { position:absolute; display:block; height:40px; width:auto; left:20px; top:50%; margin-top:-20px; } .primary-nav .nav-icons .nav-item { padding-left:75px } .primary-nav .nav-icons .nav-item p { color:#2e3233; font-size:1.3rem; display:none; } .primary-nav .nav-icons .nav-item::before { content:''; display:block; position:absolute; left:20px; top:50%; margin-top:-20px; width:40px; height:40px; background-repeat:no-repeat; background-position:center center; background-size:40px 40px; } .primary-nav .nav-icons .nav-item.item-1::before { background-image:url("../img/line-icon-1.svg") } .primary-nav .nav-icons .nav-item.item-2::before { background-image:url("../img/line-icon-2.svg") } .primary-nav .nav-icons .nav-item.item-3::before { background-image:url("../img/line-icon-3.svg") } .primary-nav .nav-icons .nav-item.item-4::before { background-image:url("../img/line-icon-4.svg") } .primary-nav .nav-icons .nav-item.item-5::before { background-image:url("../img/line-icon-5.svg") } .primary-nav .nav-icons .nav-item.item-6::before { background-image:url("../img/line-icon-6.svg") } .primary-nav .nav-icons .nav-item.item-7::before { background-image:url("../img/line-icon-7.svg") } .primary-nav .nav-icons .nav-item.item-8::before { background-image:url("../img/line-icon-8.svg") } .has-children > a, .go-back a { position:relative } .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after { content:''; position:absolute; top:50%; margin-top: 6px; display:inline-block; height:2px; width:10px; background:#ffffff; -webkit-backface-visibility:hidden; backface-visibility:hidden; } .has-children > a::before, .go-back a::before { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .has-children > a::after, .go-back a::after { -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } .has-children > a { padding-right:40px } .has-children > a::before, .has-children > a::after { right:20px; -webkit-transform-origin:9px 50%; -moz-transform-origin:9px 50%; -ms-transform-origin:9px 50%; -o-transform-origin:9px 50%; transform-origin:9px 50%; } .primary-nav .go-back a { padding-left:40px } .primary-nav .go-back a::before, .primary-nav .go-back a::after { left:20px; -webkit-transform-origin:1px 50%; -moz-transform-origin:1px 50%; -ms-transform-origin:1px 50%; -o-transform-origin:1px 50%; transform-origin:1px 50%; } .go-back span { padding-left: 8px; height: 46px; display: inline-block; vertical-align: middle; color:#ffffff; line-height: 50px;} .go-back span:hover { color: #ff9a22; } .go-back.first-child i { font-size: 20px; color: #ffffff !important; padding-left: 5px; display: inline-block; vertical-align: middle; padding-top: 4px; } .go-back.first-child i:hover { color: #ff9a22; } .menu-divider { display:none;} .phone-link { color:#ff9a22 !important; } .active a { color:#ff9a22 !important; } li.active:first-child { color:#ff9a22} ul.seconday-nav.simple-menu li a { color: #2e3233; } li.simple-menu.has-children.active.li-selected ul li a {color:#000000 !important;} li.simple-menu.has-children.active.li-selected ul li.active a {color:#ff9a22 !important;} ul.seconday-nav.simple-menu li a { color:#2e3233 !important; } a.active { color:#ff9a22 !important; } .overlay { position:fixed; z-index:2; height:100%; width:100%; top:0; left:0; cursor:pointer; background-color:rgba(105, 170, 111, 0.8); visibility:hidden; opacity:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition:opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s; -moz-transition:opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s; transition:opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s; } .overlay.is-visible { opacity:1; visibility:visible; -webkit-transition:opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s; -moz-transition:opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s; transition:opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s; } .primary-nav i, .tel { color: #e28f19 !important; } /* ===[ Search ]=== */ .search { position:absolute; height:50px; width:100%; top:50px; left:0; z-index:3; opacity:0; visibility:hidden; -webkit-transition:opacity .3s 0s, visibility 0s .3s; -moz-transition:opacity .3s 0s, visibility 0s .3s; transition:opacity .3s 0s, visibility 0s .3s; } .search form { height:100%; width:100%; } .search input { border-radius:0; border:none; background:#fff; height:100%; width:100%; padding:0 5%; box-shadow:inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05); -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; } .search input::-webkit-input-placeholder { color:#c9cbc4; } .search input::-moz-placeholder { color:#c9cbc4; } .search input:-moz-placeholder { color:#c9cbc4; } .search input:-ms-input-placeholder { color:#c9cbc4; } .search input:focus { outline:none } .search.is-visible { opacity:1; visibility:visible; -webkit-transition:opacity .3s 0s, visibility 0s 0s; -moz-transition:opacity .3s 0s, visibility 0s 0s; transition:opacity .3s 0s, visibility 0s 0s; } .nav-is-fixed .search { position:fixed } /* @end --------- */ /* support for no js */ .no-js .primary-nav { position:relative; height:auto; width:100%; overflow:visible; visibility:visible; z-index:2; } .no-js .search { position:relative; top:0; opacity:1; visibility:visible; } /* @end --------- */ /* ===[ Logo ]=== */ #logo { position:absolute; margin:0; padding:0; -webkit-animation:fadeIn 3.5s ease-out; -moz-animation: fadeIn 3.5s ease-out; -o-animation: fadeIn 3.5s ease-out; animation: fadeIn 3.5s ease-out; top:7px; } img#logo { z-index:1; display:none; width:350px; } img#mobile-logo { width:200px; } /* @end --------- */ .below-header { text-align:center;} .below-header h2 { padding-bottom:40px; margin-bottom:0; line-height:35px; font-weight:300;} .below-header .below-header-button { margin-top:30px; margin-bottom:30px; text-transform:uppercase; } #utility-bar { height:10px; background-color:#7565a6; color:#999; font-weight:normal; -webkit-transition:-webkit-transform 0.3s ease; -moz-transition:-moz-transform 0.3s ease; transition:transform 0.3s ease; position:relative;} /* ===[ Overlay ]=== */ .overlay { position:fixed; z-index:2; height:100%; width:100%; top:0; left:0; cursor:pointer; background-color:rgba(0, 0, 0, 0.4); visibility:hidden; opacity:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition:opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s; -moz-transition:opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s; transition:opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s; } .overlay.is-visible { opacity:1; visibility:visible; -webkit-transition:opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s; -moz-transition:opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s; transition:opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s; } /* ===[ Main ]=== */ main { z-index:2; -webkit-animation:fadeIn 3.5s ease-out; -moz-animation: fadeIn 3.5s ease-out; -o-animation: fadeIn 3.5s ease-out; animation: fadeIn 3.5s ease-out; padding-top: 50px; } /* @end --------- */ /* ===[ Banners ]=== */ .home-page #banner { width:100%; min-height:330px; border-bottom:1px solid #eee; background-color:#000000; } .row.banner-row {margin-bottom:0;} .home-page #banner h1 { font-size:2.8vw; letter-spacing:-0.04em; padding-bottom:5%; } .btext p { color:#ffffff; margin:0 0 10px; line-height:1.8em; letter-spacing:.5px; font-size:.9vw; padding-bottom:5%;} .banner-item { height:100%;position:relative; background-color:#000000; } .banner-item .video-border img { height:auto; width:100%; position:relative; z-index:1; position:relative; margin:0 0; } .banner-item img#home-banner { height:333px; position:relative; z-index:1; position:relative; margin:0 0; } .banner-text-block { z-index:2; position:relative;top:0%; width:100%;} #banner .btext { padding-top:16px; } .white { color:#ffffff; font-weight:300;} .video-border { overflow:hidden; border-radius:50px; border:3px solid #e28f19; cursor: pointer;} .video-border:hover { border-color:#fff; } .video-border:hover img { opacity:0.9; } .home figcaption { text-align:center; color:#ffffff; font-size:14px;} #home-banner { display:none;} .default-banner-item { position:relative; overflow:hidden; width:100%; height:320px;} .default-banner-item img { position:absolute; left:50%; top:50%; transform:translate(-35%,-50%);} .default-banner-item#about-banner img { position:absolute; left:50%; top:50%; transform:translate(-70%,-50%);} /* @end --------- */ /* ===[ Main Content ]=== */ #main-content { margin-bottom:25p; } body.inner #main-content { margin-top:25px; } /* @end --------- */ /* ===[ Default Sidebar ]=== */ .default-sidebar { margin-bottom:20px; } .sidebar-item { margin-bottom:20px; } /* @end --------- */ /* ===[ Login ]=== */ #user { height:50px; line-height:50px; float:right; margin:0 10px; position:relative; } #user > a { text-decoration:none } #login-dropdown { min-width:210px; padding:15px; display:none; line-height:1em; margin:0 0 0 -50%; -webkit-box-shadow:0 1px 5px 0 rgba(0,0,0,0.3); box-shadow:0 1px 5px 0 rgba(0,0,0,0.3); -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out; } #login-dropdown .btn { margin-top:6px } #quick-loginform { position:relative } #quick-loginform:after { width:0; height:0; position:absolute; top:-33px; left:66%; border:solid transparent; content:" "; pointer-events:none; border-color:rgba(255, 255, 255, 0); border-bottom-color:#fff; border-width:10px; margin-left:-10px; } .user { display:block; height:50px; width:50px; margin:0 auto 10px auto; text-align:center; font-size:24px; border-radius:50px; border:1px solid #ccc; } .user i { display:inline; line-height:50px; } .remb, .help { display:block; text-align:center; margin-top:7px; font-size:12px; } .need-help { font-style:italic; } /* @end --------- */ /* ===[ Members Area ]=== */ .members-bar { background-color:#fff; padding-bottom:25px; } .user-profile { color:#999; font-size:16px; font-style:italic; } .members-content { background-color:#f5f5f5; padding:30px 0; } .membership #main-content { margin-bottom:0; } .edit-profile, .go-back { font-size:16px; color:#333; } .edit-profile:hover, .go-back:hover { color:#000; } .profile-box { margin-bottom:20px; padding:15px; background-color:#fff; } .pb-title { display:block; font-size:15px; text-transform:uppercase; color:#999; margin-bottom:5px; } .profile-box table td { padding-bottom:5px; } .pr-heading { width:45%; padding-right:10px; } .profile { } .profile .today { color:#999 } .case-list { margin-bottom:10px } .cnumber { width:10%; color:#333; padding-right:15px; } .subject { width:65%; color:#999; } .status { width:20%; color:#ccc; } .zoneSubscriptions { margin:0; padding:0; } .zoneSubscriptions li { list-style:none } .zoneSubscriptions li> ul { margin:0 0 7px 0 } .zoneName a { color:#333 } .reporttable { width:100% } .order-list { background-color:#fff; padding:15px; } .order-item { margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed #ccc; } .order-item:last-child { margin-bottom:0; padding-bottom:0; border-bottom:0 none; } .order-heading { margin-bottom:8px; font-size:16px; color:#999; } .o-title { width:50%; padding-right:5px; color:#999; } .order-status { margin-bottom:10px; font-size:14px; color:#666; } .order-status strong { color:#333; font-size:13px; } .os-goods-dispatched { color:#13b322 } .os-order-recieved { color:#999 } /* @end --------- */ /* ===[ Site Search Page ]=== */ .search-controls { margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #ccc; } #site-search-detail { width:100% } #search-field { } #filter-search { } .type { } .search-result-item { margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed #ccc; } .search-result-item h4 { font-size:16px } .search-result-item h4 a { color:#333 } .sr-desc { font-size:12px; margin-top:0; } /* @end --------- */ /* ECOMMERCE SECTION*/ /* ===[ General ]=== */ #ecomerce { } .shop-sidebar { } #listing-area { } .catalogueList { } .catalogueItemNotFound, .productItemNotFound { display:none } /* ===[ Catalog ]=== */ .catalogueList { margin:0 0 20px 0 } .catalogueItem, .catalogueItemLast { width:33.3333%; list-style:none; float:left; margin-right:1%; } .catalogueItemLast { margin-right:0 } .catalog-box { } .view-catalog { } /* ===[ Small Product ]=== */ .productList.productSmall { margin:0; padding:0; } .productItem, .productItemLast { width:25%; list-style:none; float:left; margin-right:1%; margin-bottom:30px; } .productItemLast { margin-right:0 } .price { } .view-product { } .view-product.btn { } /* ===[ Large Product ]=== */ .productList.productLarge { margin:0; padding:0; } .productList.productLarge .productItem { width:100%; margin:0; float:none; } .large-product { } .productAttributes { } .catProductAttributeGroup { } .catProdAttributeTitle { font-weight:bold; font-size:14px; } .catProdAttributeItem { margin-bottom:10px } .catProdAttributeItem select { } .catProdAttributeItem input[type=checkbox] { margin-right:5px } .catProdAttributeItem input[type=radio] { margin-right:5px } .volume-pricing { margin:0 0 10px 0 } .volume-pricing li { list-style:none; margin-bottom:5px; } .volume-pricing li:last-child { margin-bottom:0 } .poplets { margin:10px 0 0 0; padding:0; text-align:center; } .poplets li { list-style:none; display:inline-block; } .poplets a { display:block } .poplets img { } .purchase-options { } .addtocart { } .qty { } .qty > input { width:50px; height:33px; text-align:center; } .related-products { margin:10px 0 } .related-product { margin-bottom:20px } /* ===[ Shopping Cart ]=== */ #full-shopping-cart { } #full-shopping-cart .crumbs { margin-bottom:25px } #product-summary th.quantity { width:40px; text-align:center; padding-right:10px; } #product-summary tr.val td { max-height:95px; overflow:hidden; } #product-summary td.pimage { width:100px } #product-summary td.pimage .productitemcell { width:100px } #product-summary td.pimage img { max-width:100%; height:auto; display:block; } #product-summary td.quantity { width:40px; padding-right:15px; } #product-summary td.quantity .productitemcell { width:40px; text-align:center; } #product-summary td.quantity input { width:40px; text-align:center; } #product-summary td.quantity input { border:1px solid #ccc; padding-top:4px; padding-bottom:4px; color:#999; } #product-summary td.ptaxrate { } #product-summary td.ptotal { } #product-summary td.premove { } #product-summary td.premove a { } #product-summary td.premove a:hover { } #product-summary td.pname .productitemcell, #product-summary td.quantity .productitemcell, #product-summary td.ptaxrate .productitemcell, #product-summary td.ptotal .productitemcell, #product-summary td.premove .productitemcell { margin-top:20px } #order-summary small { display:block; font-size:11px; font-style:italic; text-align:center; margin:0 auto 16px auto; } #discount-area { margin-bottom:10px } #discount-area label { font-style:normal; text-transform:uppercase; font-weight:700; font-size:14px; color:#001412; } .disc { margin-bottom:10px } .cart-field > input[type=text] { width:100%; border:1px solid #ccc; padding:5px; } .update { background:#ccc; border:0 none; color:#fff; text-transform:uppercase; font-weight:700; text-align:center; padding:5px 10px; } .shipping-summary { margin-bottom:10px } .shippingDiv { } #shippingSpan { text-transform:uppercase; color:#666; font-size:14px; font-weight:700; } #ShippingOptions, #shippingCountry, #shippingState { width:100%; border:1px solid #ccc; padding-top:4px; padding-bottom:4px; } #main-summary { width:93%; margin:10px auto 0 auto; } #catshopbuy { display:none } #catshopbuy2 { margin:15px auto 8px } /* ===[ Payment Page ]=== */ #checkout-section, #shipping-details, #howHearVal { display:none } .po { } .po i { font-size:30px } .payment-type { display:none } .po.disable { opacity:0.5 } /* @end --------- */ /* ===[ Blog ]=== */ .blog-search-btn { padding:8px 12px; border-left-color:#fff; } .BlogTagCloud a { display:block; float:left; margin-right:8px; margin-bottom:8px; padding:4px 7px; color:#666; font-size:16px; background:#f3f3f3; } .BlogTagCloud a:hover { background-color:#ccc } #blog-archive a:link { font-size:15px; text-transform:capitalize; } .blog-recent { margin:0; padding:0; } .blog-recent li { margin:0 0 10px 0; padding:0; list-style:none; padding-bottom:10px; } .blog-recent a { font-size:14px; text-transform:none; color:#666; line-height:1.37em; } .blog-recent a:hover { color:#9FC52C } .blog-recent .postdate { display:block; font-size:12px; color:#999; padding-top:3px; } .blog-archive ul { margin:0; padding:0; } .blog-archive li { margin:0 0 10px 0; padding:0; list-style:none; } .blog-archive a:hover { color:#9FC52C } #blog h4 { color: #796eaa; font-size: 18px; font-weight: 700; text-transform: none;} #blog h2 a { color: #796eaa; font-size: 30px; font-weight: 200; line-height: 1.2em; text-transform: none;} .blog-img { width: 100%; } .post-title { padding: 10px 0; } .post-preview { padding: 10px 0; } article { padding: 0 0 50px; } /* @end --------- */ /* FAQ */ .faq-wrapper { margin-bottom:50px } .faq-wrapper h2 { margin-bottom:30px } .faq-wrapper .faq { margin-bottom:20px } .faq-wrapper .faq h3, .faq-wrapper .faq p { position:relative; padding-left:48px; } .faq-wrapper .faq h3 { font-size:20px; cursor:pointer; margin-bottom:20px; } .faq-wrapper .faq p { display:none } .faq-wrapper .faq.faq-open p { display:block } .faq-wrapper .faq h3:before, .faq-wrapper .faq p:before { position:absolute; top:0; left:0; display:block; height:30px; width:30px; text-align:center; line-height:26px; color:#FFF; font-size:20px; font-weight:600; border-radius:50%; } .faq-wrapper .faq h3:before { content:"Q"; background:#e29540; } .faq-wrapper .faq p:before { content:"A"; background:#cbcabc; } #contact .row { margin:0} #contact form p { border-bottom:1px solid #ccc;margin-bottom:20px;padding-bottom:20px} #contact form fieldset { margin-bottom:0;} #contact form fieldset .row .form-group { margin-bottom:20px} #contact form fieldset .row:last-child .form-group { margin-bottom:0; text-align:center; } #contact form fieldset .row .form-group label { color:#666;font-style:normal} #contact form fieldset .row .form-group input, #contact form fieldset .row .form-group textarea { -webkit-border-radius:6px;-moz-border-radius:6px;border:1px solid #999;border-radius:6px;width:100%} #contact form fieldset .row .form-group input { height:40px;padding:0 8px} #contact form fieldset .row .form-group textarea { height:140px;padding:8px} #contact form fieldset .row .form-group button { background:#ff9a22;color:#fff; margin: 35px 0; padding: 0 32px;} .special-align-left { text-align:left !important; } .checkbox { display:inline; float:left; width:10% !important; color: #666;} span.checkbox { display:inline; float:left; width:60% !important; padding-top: 10px;} #location p { border-bottom:1px solid #ccc;margin-bottom:20px;padding-bottom:20px} .maps { filter: grayscale(100%); height: 600px; width: 100%; } .maps iframe { width: 100%; height: 100%; } /* ===[Above Footer]=== */ .above-footer { text-align:center; padding-bottom:50px;} .above-footer h2 { padding-top:50px; padding-bottom:20px; margin-bottom:0; line-height:35px; font-weight:300;} .above-footer .below-header-button { margin: 25px 10px 0px 10px; font-size:18px; text-transform:none;} .above-footer /* ===[ Footer ]=== */ #footer { background:#ccc; color:#fff; padding-top:18px; } .membership #footer { margin:0 } #footer p { color:#fff } .copyright { font-family:'Open Sans Condensed',Arial,sans-serif; font-size:14px; margin:0 0 15px 0; padding-top:20px; } #footer .top-footer { padding:28px 0 8px 0; background:#e3e1ed;} #footer .top-footer .row { white-space:nowrap;} .top-footer .col { float:none; display:inline;} #footer .row.footer-row { margin: 0; } #footer .big-icon { display:block; width:48px; vertical-align:top; margin:0 auto;} #footer .big-icon-text { display:block; line-height:20; text-align:center; padding-top: 4px; padding-left:8px;} #footer .big-icon-text p { margin-bottom:0; font-weight:bold; line-height:20px;} #footer .big-icon-text p:nth-child(1) { color:#e28f19; } #footer .big-icon-text p:nth-child(2) { color:#694162; } #footer img.flogo { margin:0 auto; display:block; width:100%; max-width:300px;} #footer .bottom-footer { background-color:#f5f5f5; text-align:center; } #footer .bottom-footer p { color:#919191; margin:0; font-size:14px; } #footer .ficons { max-width:220px; margin:0 auto; padding-top:15px; } #footer .ficons .col { text-align:center; float:left; width: 72px; } #footer i { color:#333333; margin:0 auto; border-radius:50%; font-size:1.5em;} /* @end --------- */ /* ===[ Swiper Styles ]=== */ #home-feature-slides { width:96%; padding:0; position:relative; background-color:#f2f1f0; margin: 0 2% 50px; } #home-feature-slides:after { width:4px; height:100%; display:block; content:""; position:absolute; right:0; top:0; background-color:#f2f1f0; z-index:3; } .swiper-container { width:100%; margin:0; padding:0; } .swiper-slide { text-align:center; font-size:18px; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center; box-sizing:content-box; padding-top:40px; padding-bottom: 40px; } .swiper-slide p { padding:0 32px; color:#694162; font-weight:700;} .append-buttons { text-align:center;margin-top:20px; } .append-buttons a { display:inline-block;border:1px solid #007aff;color:#007aff;text-decoration:none;padding:4px 10px;border-radius:4px;margin:0 10px; font-size:13px;} #slider-header { padding: 10px 0; } section.align-centre { padding-bottom:50px;} .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px;} .feature-slide-item { border-right: 3px dotted #c4c0bb; width:100%;} .feature-slide-item p { height: 70px; text-align: center; } /* @end --------- */ /* ===[ Homepage Sections ]=== */ /* ===[ Image with Text Secion ]=== */ .image-text-section { padding-top:50px; } .image-text-section h3 { font-size:34px; color:#e28f19; text-transform:none; margin-bottom:0; text-align:center;} .image-text-section h4 { font-size:24px; color:#e28f19; text-transform:none; margin-top:0; text-align:center;} .image-text-section p { padding-bottom:20px; text-align:center;} .image-text-section img.artist-impression { width: 100%; } .image-text-section img.artist-impression2 { width:100%; min-width:278px; } .caption { text-align:center; font-size:14px;;} .image-text-section .new-item { padding-top:0%;} .artist-img-wrapper { width: 100%; } .home .image-text-section h3, .home .image-text-section h4 { text-align:center;} .home .img-text-section-wrapper { background-color:#f2f1ef; margin:0 -5% 0; margin-top:50px; overflow: hidden; margin-bottom: 1rem;} /* @end --------- */ /* ===[ Body Banner]=== */ #body-banner .banner-text-block { position:absolute; top:0%;} #body-banner .banner-item { overflow:hidden;} #body-banner h3 { font-size:34px; color:#7e71aa; text-transform:none; margin-bottom:0;} #body-banner p { margin-top:0; padding-bottom:10px; font-size:16px;} #body-banner .btn { margin-top:30px; } #body-banner a { font-size:16px; text-transform:none;} #margaret { margin-left:-20%; height:567px; overflow:hidden;} #partner { height:640px;} .home-page #banner h1 { text-align:center;} .home-page #banner p { text-align:center;} #body-banner.about-us { height:100%; } #body-banner.about-us .banner-text-block { position:relative;} #body-banner.about-us .banner-item { background-color:#ffffff;} #body-banner.about-us .banner-text-block { top:3%;} #body-banner.about-us .banner-text-block h3 { font-size:34px; color:#e28f19; } .text-only-section h2 { text-align:center; text-align:center; padding-top:32px; padding-bottom:20px; line-height:39px; font-weight:300;} .text-only-section p { text-align:center; } .myth-row { width:270px; margin:0 auto; overflow:hidden;} .myth-box { height:270px; cursor:pointer;} #myth-box1, #myth-box1 .overlay { background-color:#eeeaf7; } #myth-box2 { background-color:#e1daf6; } #myth-box3 { background-color:#c1b7e1; } #myth-box4 { background-color:#7668a5; } .empty-box { position:absolute; text-align:center; color:#ffffff; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; } h4.empty-box { color:#ffffff !important;} .myth-row h4 { font-size:34px; color:#e28f19; text-align:center;} .myth-row p { padding:0 16px; text-align:center; color:#000000;} .myth-row p.facts { font-size:13px; color:#000000; padding:0 16px; text-align:center;} .fact-heading { color:#e28f19; } .myth-row .col { padding: 0; } .hidden-text { visibility: hidden; } .myth-box:hover .hidden-text { visibility: visible;-webkit-animation: slideIn 0.5s forwards; -moz-animation: slideIn 1s normal 1; -o-animation: slideIn 1s normal 1; animation: slideIn 1s normal 1; position:absolute; bottom:0; margin-bottom: 30px; left:0;} .myth-box:hover .empty-box { visibility:hidden; -webkit-animation: fadeIn 1s normal forwards; -moz-animation: fadeIn 1s normal 1; -o-animation: fadeIn 1s normal 1; animation: fadeIn 1s normal 1; } .hover-overlay { width: 100%; height: 100%; } /* @end --------- */ /* **************** Utility Styles *****************/ .new-row .col { float:right; } .content-image { width:100%; margin-top:50px; margin-bottom:10px;} .row.media { padding:50px 0;} .row.media p { text-align: center; } /* **************** Media Query Ranges *****************/ button.hamburger.hamburger--spin.nav-trigger { outline: 0; } /* ===[ Container utility queires ONLY ]=== */ @media (min-width:480px){ .home-page #banner { padding-bottom:0px; } #body-banner .banner-text-block { top:18%; } } @media (min-width:768px){ .responsive #banner-slides li .container { margin-left:-375px } img#mobile-logo { display:none; } img#logo { display: inline;} .col .artist-impression-right { text-align: right; } .btext p { min-width:450px; padding-bottom:0;} .video-border { margin-top:0; display:inline-block; position:relative; } #home-banner { display:block;} .home-page #banner { height:34vw; overflow:hidden;} .banner-text-block { position:absolute;} .home-page #banner h1 { text-align:left;} .home-page #banner p { text-align:left;} .caption { text-align:right !important; } #body-banner.about-us .partner-banner-body { min-width:588px; } .image-text-section h3 { text-align: left; } .image-text-section h4 { text-align: left; } .image-text-section p.body-text { max-width:70%; text-align: left; } .image-text-section p { text-align: left; } .image-text-section img.artist-impression { width:65%; min-width:386px;} .home .image-text-section img.artist-impression { width:95%; min-width:386px;} .home .image-text-section p.body-text { max-width:100%; text-align: left; } .default-banner-item img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} .default-banner-item#about-banner img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} #body-banner.about-us .partner-banner-body p { font-size:15px;} #margaret { margin-left:-5%; height:567px; float:none; } #partner { width:640px; float:none; } #myth-box1 { background-color:#eeeaf7;} #myth-box2 { background-color:#e1daf6;} #myth-box3 { background-color:#c1b7e1;} #myth-box4 { background-color:#7668a5;} .myth-row { width:640px; margin:0 auto;} .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: -40px; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: -40px; } .vertical-align { display: -ms-flexbox; display: flex; -ms-flex-pack: center; flex-direction: row; } .vertical-align > [class^="col"], .vertical-align > [class*=" col"] { display: flex; display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; align-items: center; } .checkbox { display:inline; float:left; width:10% !important;} span.checkbox { display:inline; float:left; width:60% !important; padding-top: 10px;} .banner-button { left: 50%; position: absolute; transform: translate(-50%,-50%); margin-bottom: 0%; bottom: -4%; } span { display: inline-block; } } @media (min-width:992px){ .responsive #banner-slides li .container { margin-left:-485px } .banner-text-block { top:0%;} .banner-item img#home-banner { height:auto; width:100%;} #body-banner #margaret { width:110.9%; height:auto;} #body-banner.about-us .banner-text-block{ position:absolute; top:0%; } .myth-row { background-color:#333333; width:1000px; margin:0 auto;} .myth-row p { padding:0;} .myth-box { height:250px;} .myth-box:hover .hidden-text { bottom: 0; margin: 0; } #body-banner .banner-item { overflow:visible;} } @media (min-width:894px){ #footer .big-icon { display:inline-block;} #footer .big-icon-text { display:inline-block; text-align:left; } } @media (min-width:1000px){ .caption { padding-right:40px; } } /* ===[ Large desktops and laptops ]=== */ @media (min-width:1200px){ .responsive #banner-slides li .container` { margin-left:-585px } .banner-text-block { top:10%;} #body-banner .banner-text-block { top:24%; } .image-text-section .new-item { padding-top:6%;} .banner-button { left: 39%; position: absolute; transform: translate(-50%,-50%); margin-bottom: 0%; bottom: -4%; } } @media (min-width:1250px){ .top-footer .col { float:left;} } @media (min-width:1440px){ .home figcaption { margin-top:4%; } #body-banner.about-us .banner-text-block { top:12%; } } @media (min-width:1600px){ #body-banner.about-us .banner-text-block { top:19%; } } @media (min-width:1920px) { .default-banner-item img { width:100%;} } /* ===[ Menu Controler ]=== */ /* -------------- */ @media only screen and (max-width:1169px){ body.nav-on-left.overflow-hidden { overflow:hidden } main.nav-is-visible, header.nav-is-visible { -webkit-transform:translateX(-260px); -moz-transform:translateX(-260px); -ms-transform:translateX(-260px); -o-transform:translateX(-260px); transform:translateX(-260px); } .nav-on-left main.nav-is-visible, .nav-on-left header.nav-is-visible { -webkit-transform:translateX(260px); -moz-transform:translateX(260px); -ms-transform:translateX(260px); -o-transform:translateX(260px); transform:translateX(260px); } .nav-on-left .logo { left:auto; right:5%; } .nav-on-left .header-buttons { right:auto; left:5%; } .nav-on-left .header-buttons li { float:right } .nav-on-left .primary-nav, .nav-on-left .primary-nav ul { right:auto; left:0; } .primary-nav { visibility:hidden; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; transform: translateX(260px);} .primary-nav.nav-is-visible { visibility:visible; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; transform: translateX(0); } .overlay.is-visible { -webkit-transform:translateX(-260px); -moz-transform:translateX(-260px); -ms-transform:translateX(-260px); -o-transform:translateX(-260px); transform:translateX(-260px);} .nav-on-left .overlay.is-visible { -webkit-transform:translateX(260px); -moz-transform:translateX(260px); -ms-transform:translateX(260px); -o-transform:translateX(260px); transform:translateX(260px); } .overlay.is-visible.search-is-visible, .nav-on-left .overlay.is-visible.search-is-visible { -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); -o-transform:translateX(0px); transform:translateX(0px); } } /* -------------- */ @media only screen and (min-width:1170px){ header { height:80px } header::after { clear:both; content:""; display:table; } #logo { top:23px; } .header-buttons { top:18px; right:4em; z-index:10; } .nav-trigger { display:none } .primary-nav { position:static; padding:0 0 0 0; margin:0; height:auto; width:auto; float:right; overflow:visible; background:transparent; } .primary-nav::after { clear:both; content:""; display:table; } .primary-nav.moves-out > li > a { -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); -o-transform:translateX(0px); transform:translateX(0px); opacity:1; } .primary-nav ul { position:static; height:auto; width:auto; background:transparent; overflow:visible; z-index:3; } .primary-nav ul.is-hidden { -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); -o-transform:translateX(0px); transform:translateX(0px); } .primary-nav ul.moves-out > li > a { -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); -o-transform:translateX(0px); transform:translateX(0px); opacity:1; } .primary-nav > li { float:left; margin-left:1em; list-style:none; padding:0; } .primary-nav > li.li-selected { position:static } .primary-nav > li > a { position:relative; display:inline-block; height:80px; line-height:91px; padding:0 10px; color:#2e3233; overflow:visible; border-bottom:none; -webkit-transition:color 0.3s, box-shadow 0.3s; -moz-transition:color 0.3s, box-shadow 0.3s; transition:color 0.3s, box-shadow 0.3s; } .primary-nav > li > a:hover { color:#000; text-decoration:none; } .primary-nav > li > a.selected { color:#000; box-shadow:inset 0 -2px 0 #000; text-decoration:none; } .primary-nav .go-back, .primary-nav .see-all { display:none } .primary-nav .secondary-nav, .primary-nav .nav-gallery, .primary-nav .nav-icons { position:absolute; top:100%; width:100vw; background:#fff; padding:50px; box-shadow:inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05); -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); -o-transform:translateX(0px); transform:translateX(0px); -webkit-transition:opacity .3s 0s, visibility 0s 0s; -moz-transition:opacity .3s 0s, visibility 0s 0s; transition:opacity .3s 0s, visibility 0s 0s; } .primary-nav .secondary-nav.simple-menu { width:100%; left:0; padding:20px; margin:0; } .primary-nav .secondary-nav::after, .primary-nav .nav-gallery::after, .primary-nav .nav-icons::after { clear:both; content:""; display:table; } .primary-nav .secondary-nav.is-hidden, .primary-nav .nav-gallery.is-hidden, .primary-nav .nav-icons.is-hidden { opacity:0; visibility:hidden; -webkit-transition:opacity .3s 0s, visibility 0s .3s; -moz-transition:opacity .3s 0s, visibility 0s .3s; transition:opacity .3s 0s, visibility 0s .3s; } .primary-nav .secondary-nav > .see-all, .primary-nav .nav-gallery > .see-all, .primary-nav .nav-icons > .see-all { display:block; position:absolute; left:0; bottom:0; height:80px; width:100%; overflow:hidden; /* reset some inherited style */ margin:0; padding:0; } .primary-nav .secondary-nav > .see-all a, .primary-nav .nav-gallery > .see-all a, .primary-nav .nav-icons > .see-all a { position:absolute; width:100%; height:100%; top:0; left:0; font-size:2.2rem; font-weight:bold; text-align:center; line-height:80px; border-top:1px solid #e2e3df; /* reset some inherited style */ border-bottom:none; margin:0; padding:0; -webkit-transition:color 0.2s, background 0.2s, border 0.2s; -moz-transition:color 0.2s, background 0.2s, border 0.2s; transition:color 0.2s, background 0.2s, border 0.2s; } .primary-nav .secondary-nav > .see-all a:hover, .primary-nav .nav-gallery > .see-all a:hover, .primary-nav .nav-icons > .see-all a:hover { background:#2e3233; border-color:#2e3233; color:#fff; } .primary-nav .secondary-nav > li { list-style:none; /* change the height according to your needs - you can even set height:auto; */ height:340px; /* here you set the number of columns - use width percentage */ width:23%; float:left; margin-right:2.66%; border-right:1px solid #e2e3df; overflow:hidden; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; } .primary-nav .secondary-nav > li:last child, .primary-nav .secondary-nav > li.last-child { margin-right:0; border-right:none; } .primary-nav .secondary-nav.simple-menu > li { width:100%; height:auto; float:none; margin:0; border:0 none; } .primary-nav .secondary-nav > li > a { color:#000; font-weight:bold; font-size:16px; margin-bottom:.6em; } .primary-nav .secondary-nav > li > a { font-weight:normal; font-size:16px; } .primary-nav .secondary-nav a { height:30px; line-height:30px; padding:0 18% 0 0; color:#2e3233; border-bottom:none; font-size:1.4rem; } .primary-nav .secondary-nav a:hover { color:#ccc } .primary-nav .secondary-nav ul { margin:0; padding:0; -webkit-transform:translateZ(0px); -moz-transform:translateZ(0px); -ms-transform:translateZ(0px); -o-transform:translateZ(0px); transform:translateZ(0px); list-style:none; } .primary-nav .secondary-nav ul ul { position:absolute; top:0; left:0; height:100%; width:100%; list-style:none; } .primary-nav .secondary-nav ul ul.is-hidden { -webkit-transform:translateX(100%); -moz-transform:translateX(100%); -ms-transform:translateX(100%); -o-transform:translateX(100%); transform:translateX(100%); } .primary-nav .secondary-nav ul ul .go-back { display:block } .primary-nav .secondary-nav ul ul .go-back a { color:#333 } .primary-nav .secondary-nav ul ul .see-all { display:block } .primary-nav .secondary-nav .moves-out > li > a { -webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); -ms-transform:translateX(-100%); -o-transform:translateX(-100%); transform:translateX(-100%); } .primary-nav .nav-gallery li { /* set here number of columns - use width percentage */ width:22%; float:left; margin:0 4% 40px 0; } .primary-nav .nav-gallery li:nth-child(4n+2) { /* +2 because we have two additional list items with display:none */ margin-right:0 } .primary-nav .nav-gallery .nav-item { border-bottom:none; padding:0; height:auto; line-height:1.2; } .primary-nav .nav-gallery .nav-item img { position:static; margin-top:0; height:auto; width:100%; margin-bottom:.6em; } .primary-nav .nav-gallery .nav-item h3 { color:#000; font-weight:bold; padding:0 .4em; } .primary-nav .nav-icons li { /* set here number of columns - use width percentage */ width:32%; float:left; margin:0 2% 20px 0; } .primary-nav .nav-icons li:nth-child(3n+2) { /* +2 because we have two additional list items with display:none */; margin-right:0; } .primary-nav .nav-icons .nav-item { border-bottom:none; height:80px; line-height:1.2; padding:24px 0 0 85px; position:relative; } .primary-nav .nav-icons .nav-item:hover { background:#f6f6f5 } .primary-nav .nav-icons .nav-item h3 { color:#000; font-weight:bold; } .primary-nav .nav-icons .nav-item p { display:block } .primary-nav .nav-icons .nav-item::before { left:25px } .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after { background:#c9cbc4 } .has-children > a:hover::before, .has-children > a:hover::after, .go-back a:hover::before, .go-back a:hover::after { background:#000 } .has-children > a::before, .has-children > a::after { right:15% } .primary-nav > .has-children > a { padding-right:30px !important } .primary-nav > .has-children > a:active { text-decoration:none; color:#ff9a22 !important;} .primary-nav > .has-children > a::before, .primary-nav > .has-children > a::after { width:9px; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; background:#c9cbc4; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition:width 0.3s, -webkit-transform 0.3s; -moz-transition:width 0.3s, -moz-transform 0.3s; transition:width 0.3s, transform 0.3s; } .primary-nav > .has-children > a::before { right:12px } .primary-nav > .has-children > a::after { right:7px } .primary-nav > .has-children > a.selected::before, .primary-nav > .has-children > a.selected::after { width:14px } .primary-nav > .has-children > a.selected::before { -webkit-transform:translateX(5px) rotate(-45deg); -moz-transform:translateX(5px) rotate(-45deg); -ms-transform:translateX(5px) rotate(-45deg); -o-transform:translateX(5px) rotate(-45deg); transform:translateX(5px) rotate(-45deg); } .primary-nav > .has-children > a.selected::after { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .secondary-nav > .has-children > a::before, .secondary-nav > .has-children > a::after { display:none } .primary-nav .go-back a { padding-left:20px } .primary-nav .go-back a::before, .primary-nav .go-back a::after { left:1px } .search { height:120px; top:80px; } .search input { padding:0 2em; font-size:3.2rem; font-weight:300; } .no-js .primary-nav { position:absolute; z-index:3; display:inline-block; width:auto; top:0; right:150px; padding:0; } .no-js .nav-is-fixed .primary-nav { position:fixed; } .hamburger { display:none !important;} #image-text-section h3 { padding-top:40px; } #body-banner .banner-text-block { top:24%; } #body-banner a { font-size:1.0vw; } #body-banner p { font-size:1.2vw; } #body-banner h3 { font-size:2.8vw; } #body-banner .banner-item { background-color:#ffffff;} .menu-divider { display:inline;} } @media (max-width:1169px){ .active ul.secondary-nav a { color:#ffffff !important; } li.simple-menu.has-children.active.li-selected ul li a { color: #ffffff !important; } } /* ===[ Portrait tablets and medium desktops ]=== */ @media (min-width:992px) and (max-width:1199px){ } /* ===[ Portrait tablets and small desktops ]=== */ @media (min-width:768px) and (max-width:991px){ form .col-sm-6 input[type=text], form .col-sm-6 input[type=password], form .col-sm-6 select, form .col-sm-6 textarea { margin-bottom:15px } .banner-item .video-border img { width: 170px; } .home figcaption { width: 170px;} } @media (max-width:1440px){ .home-page #banner h1 { font-size:34px; } .home-page #banner p { font-size:14px; } } /* ===[ Portrait tablets and medium desktops ]=== */ @media (min-width:480px) and (max-width:767px){ .last-social-icon {float:none !important;} } /* ===[ Landscape phones and portrait tablets ]=== */ @media (max-width:767px){ .responsive-table table, .responsive-table thead, .responsive-table tbody, .responsive-table th, .responsive-table td, .responsive-table tr { display:block } .responsive-table thead tr { position:absolute; top:-9999px; left:-9999px; } .responsive-table tr { border:0 none } .responsive-table td { border:none; position:relative; text-align:center; } form .col-xs-12 input[type=text], form .col-xs-12 input[type=password], form .col-xs-12 select, form .col-xs-12 textarea { margin-bottom:15px } #product-summary td.quantity { width:auto } #product-summary td.pimage { width:auto; text-align:center; } #product-summary td.pimage img { margin:0 auto } .modal-content { position: absolute; top:10%; left:50%; transform:translate(-50%,0); background-color:#fefefe; width:90vw; } #myth-box1 { background-color:#eeeaf7; float:none; } .myth-row h4 { padding-top:0%;} .special-button { padding: 0px 30px; font-size: 14px; } } /* ===[ Landscape phones and smaller ]=== */ @media (max-width:505px){ } /* ===[ Landscape phones and smaller ]=== */ @media (max-width:480px){ #banners, #banners >div { height:200px } .banners, #banners li { height:200px } .banners { margin:0 0 25px } .inner-slide { height:200px } .banner-wrapper { height:200px; left:0; } #banners li .container { display:none } .banner-image { height:200px } .responsive-table table, .responsive-table table thead, .responsive-table table tbody, .responsive-table table th, .responsive-table table td, .responsive-table table tr { display:block } .responsive-table table thead tr { position:absolute; top:-9999px; left:-9999px; } .responsive-table table tr { border:0 none; position:relative; border-bottom:1px solid #ccc; margin-bottom:10px; padding-bottom:10px; } .responsive-table table tr td { border:0 none; position:relative; padding-left:0; } form .col-xs-12 input[type=text], form .col-xs-12 input[type=password], form .col-xs-12 select, form .col-xs-12 textarea { margin-bottom:15px } }