/* ===[ Font Code ]=== */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700); /* @end --------- */ main { overflow:hidden; } .container-fluid.full-container { padding-left:0; padding-right:0; } /* ===[ Common Colours ]=== */ .green, .green a, .green a:hover { color:#7ac142 } .grey-dark, .grey-dark a, .grey-dark a:hover { color:#58585a } .grey-light, .grey-light a, .grey-light a:hover { color:#ccc } .white, .white a, .white a:hover { color:#fff } .black, .black a, .black a:hover { color:#333 } .italics { font-style:italic } .uppercase { text-transform:uppercase } .bg-green { background-color:#7ac142 } .bg-white { background-color:#fff } .bg-white-pale { background-color:#f0eee9 } .bg-black { background-color:#333 } body { background-color:#fff; color:#58585a; font-family:"Open Sans", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; text-rendering:optimizeLegibility; overflow-x: hidden; } /* ===[ Root element styles ]=== */ a { color:#7ac142; text-decoration:none; outline:none; } a:hover { color:#ccc; text-decoration:none; outline:none; } a:focus { outline:none; color:#ccc; } a:active { outline:none } .phone a:focus { outline:none; outline:5px auto -webkit-focus-ring-color; outline-offset:-2px; } 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:#58585a; font-size:13px; font-family:"Open Sans", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; } .lead { color:#999; font-style:italic; font-weight:200; font-size:13px; } small { font-size:85% } strong { font-weight:bold } em { font-style:italic } cite { font-style:normal } h1, .h1, h2, .h2, .btn.contact { font-family:"Open Sans", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-weight:400; } .btn, button, .navbar-nav li a, .breadcrumbs a, #top div, #top .user-status, #top a, #top table, p.h1.catalogue-name, p.h1.product-name { font-family:"Open Sans", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-weight:400; } h3, .h3, h4, .h4, h5, .h5, h6, .h6, p { font-family:"Open Sans", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin:10px 0; line-height:1.4em; font-weight:400; } .h1, .h2, .h3, .h4, .h5, .h6 { display:block } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-weight:normal; line-height:1; color:#999; } h6 small > a { color:#7ac142 } h1, .h1 { color:#333; font-size:30px; display:block; line-height:1em; } body h1:first-child { margin-top:0 } h2, .h2 { color:#333; font-size:18px; line-height:1.2em; } h3, .h3 { font-size:16.5px; line-height:1.4em; font-weight:bold; } h4, .h4 { font-size:17.5px } h5, .h5 { font-size:14px } h6, .h6 { font-size:11px } .no-click { cursor:default } /* ===[ Lists ]=== */ ul, ol { padding:0; margin:0 0 10px 25px; } li { font-size:13px; 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; } .list-reset ul, .list-reset ul li, ul.list-reset, ul.list-reset li, ol.list-reset, ol.list-reset li, .catalogueList, .catalogueList li, .productList, .productList li { list-style:none; margin:0; padding:0; } 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 #ccc; border-bottom:1px solid #f8f8f8; } /* @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 } .captcha-area:before, .captcha-area:after { content:" "; display:table; } .captcha-area:after { clear:both } #captcha-reload { float:left; margin:0 20px 10px 0; } .page-content-area .captcha-region img { margin-top:0; margin-bottom:0; } .captchaimg { float:left; height:36px; width:160px; border-radius:none; background:#7ac142; padding:10px 0; } .captchaimg img { border-radius:none } #CaptchaV2 { float:left; height:46px; padding:0 10px; border-radius:none; border:1px solid #ccc; margin-left:20px; } #CaptchaV2:focus { } #reload-captcha { float:left; height:46px; background:#7ac142; } /* ===[ Modal Style ]=== */ .modal-open { overflow:visible } .modal-content { } .modal-header { position:relative } .modal-header:after { } .close { font-size:28px } .modal-title, .catalog h4 .modal-title { font-size:18px; text-align:center; } .modal-backdrop.in { opacity:0.8 } #product-video-modal::after { content: ""; background-color: #000; height: 100%; left: 0; opacity: 0.8; position: fixed; top: 0; width: 100%; z-index: -1; } @media screen and (min-width:768px) { .modal-dialog { width:768px } } @media screen and (min-width:1024px) { .modal-dialog { width:1024px } } /* @end --------- ================================================== */ /* ===[ Responsive Videos ]=== */ .embed-container { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width:100%; height:auto; } .embed-container iframe, .embed-container object, .embed-container embed { position:absolute; top:0; left:0; width:100%; height:100%; } /* @end --------- ================================================== */ /* ===[ Form Style ]=== */ form { } form.members-login { margin:20px 0 } form fieldset { } 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:#58585a } .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:normal; } input[type=radio] { cursor:pointer } select.form-control { font-weight:normal } .form-notice { font-size:14px; padding:0; margin-bottom:12px; font-size:12px; color:#999; line-height:1.4em; } /* @end --------- ================================================== */ /* ===[ Button Style ]=== */ .btn { display:inline-block; margin-bottom:0; text-align:center; vertical-align:middle; cursor:pointer; background-image:none; border:none; white-space:nowrap; padding:10px 14px; font-size:18px; line-height:1.42857143; border-radius:0; background-color:#7ac142; text-transform:uppercase; color:#FFF; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .btn:focus, .btn:active:focus, .btn.active:focus { outline:thin dotted; outline:5px auto -webkit-focus-ring-color; outline-offset:-2px; } .btn:hover, .btn:focus { color:#FFF; text-decoration:none; background-color:#cccccc; } .btn:active, .btn.active { outline:0; background-image:none; -webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125); box-shadow:inset 0 3px 5px rgba(0,0,0,.125); } /* @end --------- ================================================== */ /* ===[ Breadcrumbs ]=== */ .breadcrumbs a { float:left; font-size:14px; font-weight:bold; color:#58585a; margin-right:13px; padding-right:15px; background:url('img/bg/bg-arrow-small.png') right 65% no-repeat transparent; } .breadcrumbs a:last-child { color:#7ac142; background:none; margin-right:0; padding-right:0; } .breadcrumbs a:hover, .breadcrumbs a:active, .breadcrumbs a:focus { color:#999 } .breadcrumbs a:last-child:hover, .breadcrumbs a:last-child:active, .breadcrumbs a:last-child:focus { color:#7ac142 } /* @end --------- ================================================== */ /* ===[ Pagination ]=== */ /* @end --------- ================================================== */ /* ===[ Social ]=== */ .social-likes { height:auto; overflow:hidden; padding:15px 0; margin:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0; } .social-likes li { float:left; margin-top:2px; margin-right:16px; list-style:none; background:none; } .social-likes li:last-child { margin-right:0 } .social-likes li.last-child { margin-right:0 } .social-likes li.fb-like { width:inherit; margin-top:0; } .social-likes li.twitter { width:75px; margin-top:1; } .download #social-widgets-wrapper { margin-top: 0px; } /* @end --------- */ /* dropdown menus */ span.circle-border { display:none; width:26px; height:26px; border:1px solid #999; background:#FFF; border-radius:50%; } .triangle-right { display:block; width:0; height:0; margin:6px 0 0 9px; border-top:6px solid transparent; border-left:8px solid #999; border-bottom:5px solid transparent; } ul.navbar-nav > li { position:relative; padding-bottom: 18px; } ul.navbar-nav > li ul { display:none; position:absolute; top:100%; left:0; float:left; width:100%; margin:0; padding:0; border-top:1px solid #b2b2b2; border-radius:none; background:#fff; list-style:none; z-index:110; } ul.navbar-nav > li:hover ul { display:block } ul.navbar-nav > li .sub-menu-before, ul.navbar-nav > li .sub-menu-after { position:absolute; top:-1px; content:""; display:block; width:inherit; background-color:#fff; border-top:1px solid #b2b2b2; z-index:109; } ul.navbar-nav > li .sub-menu-before { left:0 } ul.navbar-nav > li .sub-menu-after { right:0 } ul.navbar-nav > li ul > li { float:left; position:relative; width:280px; padding:0 30px 0 0; margin:-1px 0 0 0; } ul.navbar-nav > li ul > li > a { display:block; font-size:14px; text-transform:none; text-align:left; border-bottom:1px solid #b2b2b2; white-space:nowrap; text-decoration:none; padding:16px 0; font-weight:700; } ul.navbar-nav > li ul > li > a, ul.navbar-nav > li:hover ul li a { color:#58585a } ul.navbar-nav > li ul > li.first-row > a { border-top:none } ul.navbar-nav > li ul > li > a:hover { color:#7ac142 } ul.navbar-nav > li ul > li > a span.link { float:left; height:26px; line-height:26px; } ul.navbar-nav > li ul > li > a span.circle-border { float:right; display:block; } ul.navbar-nav > li ul > li > a:hover span.circle-border { border-color:#7ac142 } ul.navbar-nav > li ul > li > a:hover span.circle-border .triangle-right { border-left-color:#7ac142 } ul.navbar-nav > li.dropdown:hover ul { display:block } ul.sub-menu::before, ul.sub-menu::after { content: ""; height: 100%; width: 100%; display: block; position: absolute; top: 0; left: -100%; background: #fff; overflow: hidden; } ul.sub-menu::after { left: 100%; } /* ===[ Mobile Menu ]=== */ .navbar-toggle { background-color:#7ac142; cursor:pointer; margin-top:-56px; margin-right:0; border-radius:0; } .navbar-toggle .icon-bar { background-color:#fff } .navbar .navbar-nav .open .dropdown-menu { position:absolute; float:left; background-color:#fff; border:1px solid #ccc; border:1px solid rgba(0, 0, 0, .15); border-width:0 1px 1px; border-radius:0 0 4px 4px; -webkit-box-shadow:0 6px 12px rgba(0, 0, 0, .175); box-shadow:0 6px 12px rgba(0, 0, 0, .175); } .navbar-default .navbar-nav .open .dropdown-menu > li > a { color:#58585a } .navbar .navbar-nav .open .dropdown-menu > li > a:hover, .navbar .navbar-nav .open .dropdown-menu > li > a:focus, .navbar .navbar-nav .open .dropdown-menu > .active > a, .navbar .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar .navbar-nav .open .dropdown-menu > .active > a:focus { color:#fff !important; background-color:#428bca !important; } .navbar .navbar-nav .open .dropdown-menu > .disabled > a, .navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus { color:#999 !important; background-color:transparent !important; } .nav > li > a:hover, .nav > li > a:focus, .nav > li > a:hover, .nav > li:hover > a { background:none; color:#999; } /* @end custom dropdowns */ /* ===[ Screen ]=== */ @media (min-width:768px){ #page-content { right:0 !important; } .navbar.navbar-fixed-top.slide-active { position:fixed; } .navbar-header { right:0!important; } } /* @end Slide out mobile menu */ /* ===[ Menu ]=== */ .main-nav { float:left; height:48px; z-index:200; -webkit-transition:all 0.7s 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; } .main-nav > ul { } ul.navbar .container { position:relative; } ul.navbar-nav { margin-left:26px; } ul.navbar-nav > li { } ul.navbar-nav > li > a { color:#58585a; font-size:14px; font-weight:700; padding-left:22px; padding-right:22px; line-height:100%; border-right:1px solid #ebebeb; } ul.navbar-nav > li:first-child > a { border-left:1px solid #ebebeb; } ul.navbar-nav > li.first-child > a { border-left:1px solid #ebebeb; } ul.navbar-nav > li:last-child > a { border-right:none; } ul.navbar-nav > li.last-child > a { border-right:none; } ul.navbar-nav > li:hover { position:static; } ul.navbar-nav > li:hover a { color:#7ac142; } ul.navbar-nav > li.dropdown > a { background:url('img/bg/bg-arrow-down.jpg') no-repeat 85% 54% transparent; padding-right:30px; } .main-nav-v3 ul.navbar-nav > li > a { border:0 none; padding-left:10px; padding-right:10px; } .main-nav-v3 ul.navbar-nav > li.dropdown > a { background:none; } .main-nav-v3 ul.navbar-nav > li.dropdown > a i { font-size:12px; } /* **************** General Styles **************** */ /* ===[ Logo ]=== */ .navbar > .container .navbar-brand { margin:0; display:block; position:relative; padding:0; height:inherit; } .navbar-brand > img { position:relative; z-index:1; } /* @end --------- */ /* ===[ Header ]=== */ .toprow { margin-bottom:35px; } /* @end --------- */ /* ===[ Home ]=== */ .navbar { background-color:#fff; margin-bottom:0; min-height:50px; position:relative; } .shop-template .navbar, .blog-template .navbar, .main-template .navbar { border-bottom:1px solid #ccc; } .navbar #top { float:right; margin-top:10px; font-size:12px; } .navbar #top div#country-dropdown, .navbar #top .user-status, .navbar #top span#catCartSummary { float:left; margin:0; line-height:100%; color:#68676a; font-size:12px; } .navbar #top .user-status { margin-right:5px; } .navbar #top a { color:#68676a } .navbar #top a:hover { color:#7ac142 } .navbar .logged-out >a { text-transform:uppercase; } .country-dropdown-wrapper *, .country-dropdown-wrapper *:after, .country-dropdown-wrapper *:before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:0; margin:0; } .navbar #top div#country-dropdown.country-dropdown-wrapper { display:none; position:relative; z-index:111; padding:9px 13px; background-color:transparent; margin-top:-9px; cursor:pointer; outline:none; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } #country-dropdown > i { font-style:normal; font-size:11px; position:relative; } .navbar #top div#country-dropdown.country-dropdown-wrapper.active { color:#77bd43; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .country-dropdown-wrapper .dropdown { display:none; position:absolute; top:100%; left:-170px; width:468px; background:#fff; padding:22px 0 10px 22px; border:1px solid #e2e2e2; max-height:0; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .country-dropdown-wrapper.active .dropdown { display:block; max-height:400px; } .country-dropdown-wrapper.active .dropdown > li:first-child { position: relative; } .country-dropdown-wrapper.active .dropdown > li:first-child:after, .country-dropdown-wrapper.active .dropdown > li:first-child:before { bottom:68px; left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .country-dropdown-wrapper.active .dropdown > li:first-child:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 8px; margin-left: -8px; } .country-dropdown-wrapper.active .dropdown > li:first-child:before { border-color: rgba(226, 226, 226, 0); border-bottom-color: #e2e2e2; border-width: 9px; margin-left: -9px; } .country-dropdown-wrapper .dropdown li { float:left; width:200px; margin-right:22px; } .country-dropdown-wrapper .dropdown li a { display:block; width:inherit; text-decoration:none; color:#333; padding:10px 0; transition:all 0.3s ease-out; border-top:1px solid #e6e8ea; } .country-dropdown-wrapper .dropdown li:hover a { color:#7AC142 } .country-dropdown-wrapper .dropdown li:nth-child(-n+2) a { border-top:none } .country-dropdown-wrapper .dropdown li i { float:right; margin-right:20px; display:inline-block; height:23px; width:23px; color:inherit; vertical-align:middle; background-position:0 0; background-color:transparent; background-repeat:no-repeat; } .country-dropdown-wrapper .dropdown li span.circle-border { float:right; display:inline-block; } .country-dropdown-wrapper .dropdown li span.circle-border .triangle-right { margin:6px 0 0 9px } .country-dropdown-wrapper .dropdown li:hover span.circle-border { border-color:#7ac142 } .country-dropdown-wrapper .dropdown li:hover span.circle-border .triangle-right { border-left-color:#7ac142 } #country-dropdown-mobile-wrapper { display:none; margin:20px 10px; padding-top:20px; border-top:1px solid #999; } #country-dropdown-mobile-wrapper #country-dropdown-mobile { width:100% } .navbar #top #country-dropdown a:hover span.circle-border { border-color:#7ac142; } .navbar #top #country-dropdown a:hover span.triangle-right { border-left-color:#7ac142; } .country-dropdown-wrapper .dropdown li a:hover i { opacity:0.7; } #shop-link-mobile-wrapper { display:none; margin:10px 10px 20px 10px; padding:20px 0 0 10px; border-top:1px solid #999; font-weight:600; } #shop-link-mobile-wrapper a.cartSummaryLink { display:block; margin:5px 0 0 0; color:#7ac142; } #shop-link-mobile-wrapper a.cartSummaryLink:hover { color:#7ac142; text-decoration:underline; } .navbar #top p span.contact-link { margin:0 30px; } body.logged-0 .logged-in, body.logged-1 .logged-out { display:none; } body.logged-0 .logged-out, body.logged-1 .logged-in { display:inline-block; } table.cartSummaryTable { height:20px; } .navbar #top span#catCartSummary { margin-left:3px; margin-top:-4px; display:block; } .navbar #top span#catCartSummary td.cartSummaryItem { font-size:12px; line-height:100%; background:transparent url(img/ico/suitcase.png) no-repeat 100% 0; padding-right:26px; } a.phone { float:right; display:block; color:#7ac142; font-size:21px; font-weight:700; line-height:100%; margin:12px 20px 0 0; font-family:"Open Sans","Gill Sans","Gill Sans MT",Calibri,sans-serif; } a.phone > i { color:#ef1616; } a.contact-link { float:right; display:block; font-size:14px; font-weight:normal; color:#68676a; font-family:"Open Sans","Gill Sans","Gill Sans MT",Calibri,sans-serif; margin-right:20px; margin-top:13px; } a.contact-link:hover { color:#ef1616; } .navbar #header { position:relative; width:100%; padding:0 0 14px 0; } .navbar #header #logo { position:relative; margin:0; float:left; } .navbar #header form.form-search { float:right; margin-top:5px; } .navbar #header form.form-search .form-control { width:200px; height:32px; font-style:italic; border-radius:3px; padding:4px 20px 4px 40px; background:url('img/ico/ico-magnifying-glass.jpg') no-repeat 15px 50% #fff; } .navbar #header form.form-search .form-control:focus { box-shadow:none; border-color:#7ac142; } #bar-image { height:22vw; max-height:400px; width:100%; margin-bottom:25px; background:#f5f5f5 url(img/bike-lockers.jpg) no-repeat center center; background-size:cover; } #content-block-full { height:27vw; max-height:410px; width:100%; background:#f5f5f5 url(img/lock-in-bike.jpg) no-repeat center center; background-size:cover; position:relative; } #content-block-full .container, #content-block-full .container * { z-index:5; } #content-block-full div { height:100%; height:27vw; max-height:410px; } #content-block-full .content-block { width:100%; height:100%; color:#fff; padding:3.5vh 10px 5vh 0; } .content-block h2 { font-size:38px; font-family:"Open Sans","Gill Sans","Gill Sans MT",Calibri,sans-serif; font-weight:300; color:#fff; } .content-block p { font-size:16px; line-height:1.4em; color:#fff; } .content-block ul { margin-top:30px; } .content-block li { font-size:14px; font-family:"Open Sans","Gill Sans","Gill Sans MT",Calibri,sans-serif; margin-bottom:3px; } .content-block li .fa { color:#77bd43; } .content-block-white { padding:4vh 0 3.5vh 0; } .content-block-white .content-block p, .content-block-white .content-block h2 { color:#333; margin-top:0; } .content-block li a { color:#fff; } .content-block-white li a { color:#333; } #stats-bar { border-top:4px solid #fff; padding:22px 0 32px; position:relative; } .stat-box { text-align:center; padding:2em 0; background-color:#6fc158; color:#fff; } #stats-bar h2 { margin-bottom:20px; } .stat-box p { padding:0; margin:0; font-family:"Open Sans","Gill Sans","Gill Sans MT",Calibri,sans-serif; font-size:15px; font-weight:300; } .stat-box strong { display:block; line-height:1em; margin-bottom:15px; font-size:38px; font-weight:300; } /* HTML5 video plsyer */ #videoContainer { width:100%; height:auto; min-width:100%; margin-bottom:-4px; } #video { width:100%; height:auto; min-width:100%; } /* Embeded player */ .video-box { cursor:pointer; } .video-box img { width:100%; height:auto; display:block; position:relative; top:0; right:0; z-index:0; border-left:1px solid #fff; } .video-box i { position:absolute; left:50%; top:50%; font-size:80px; margin-left:-40px; margin-top:-40px; z-index:2; color:#fff; } .video-box:hover i { opacity:0.7; } #video-block { background-color:#58585a; } #video-block .grey-background { padding:40px 0 0; } #video-block h1 { font-size:36px; line-height:1.225em; margin-bottom:42px; font-weight:300; color:#fff; font-family:"Open Sans","Gill Sans","Gill Sans MT",Calibri,sans-serif; } #video-block ul { margin:0; } #video-block li { font-size:23px; margin-bottom:8px; color:#fff; } #video-block a { color:#fff; } /* #video-block video { width:100%; height:100%; } */ .videoWrapper { position: relative; padding-bottom:56.25%; padding-top:0; height:0; } .videoWrapper iframe { position: absolute; top:0; left:0; width:100%; height:100%; } .block-more { width:32px; margin-left:-16px; position:absolute; left:50%; bottom: -35px; color:#fff; font-family:"Open Sans","Gill Sans","Gill Sans MT",Calibri,sans-serif; font-size:11px; font-weight:300; line-height:1em; text-align:center;z-index: 1; } .block-more span { display:block; position: relative; } .block-more span:after { top: 88%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(95, 186, 69, 0); border-top-color: #5fba45; border-width: 25px; margin-left: -25px; z-index: -1; } .block-more:hover { color:#58585a; } #news-and-social { padding-bottom:30px; } /* @end --------- */ #more-content { display:none; padding:50px 0; margin-bottom:20px; border-bottom:1px solid #dedede; } #more-content p {color: #58585a; font-size: 13px;} #more-content li a {color: #58585a;} .product-catalogs { margin:0; padding:0; } .product-catalogs li { float: left; margin:0 0 18px 0; padding:0; position: relative; width:50%; list-style:none; } .product-catalogs a { border-bottom: 1px solid #b2b2b2; display:block; font-size:12px; font-weight: 700; padding:10px 0; margin-right:10px; text-align: left; text-decoration: none; text-transform: none; white-space: nowrap; color:#58585a; } .product-catalogs a:hover { color:#77bd43; } /* ===[ Banners ]=== */ #banner { width:100%; position:relative; z-index:1; margin:0; clear:both; background:url('img/ico/loading-grey.gif') no-repeat center center #eae6dd; overflow:hidden; } #banner.loaded { background-image:none } #banner, #banner ul, #banner ul li, #banner ul li .inner-slide { height:716px } #banner ul, #banner ul li { list-style-type:none; margin:0; padding:0; } #banner ul { overflow:hidden } #banner ul li, #banner ul li .inner-slide { width:100% } #banner ul li .inner-slide { z-index:1; position:relative; background-position:center center; background-repeat:no-repeat; background-size:cover; } #banner ul li .inner-slide .container { } #banner ul li .inner-slide video { position:absolute; top:0; left:0; width:100%; } #banner ul li .caption { display:none; z-index:101; padding-top:165px; margin:0 auto; } #banner.loaded ul li .caption { display:block } #banner ul li .caption p { display:block; width:440px; color:#fff; margin:0 0 20px 0; text-shadow:none; font-size:14px; } #banner ul li .caption.theme-Dark p { color:#58585a } #banner ul li .caption.theme-Light p { color:#FFF } #banner ul li .caption p.h1 { font-size:72px; font-weight:400; line-height:100%; } #banner.loaded ul li .caption button { display:block; width:62px; height:62px; text-indent:-9999px; background:none; border-radius:50%; border:2px solid #fff; margin-top:34px; } #banner.loaded ul li .caption button .triangle-right { float:left; display:block; width:0; height:0; margin:-1px 0 0 16px; border-top:16px solid transparent; border-left:18px solid #fff; border-bottom:15px solid transparent; } #banner.loaded ul li .caption button .rectangle { display:none; float:left; width:5px; height:28px; margin:-2px 0 0 16px; background:#fff; } #banner.loaded ul li .caption button .rectangle:last-child { margin-left:6px } #banner.loaded ul li .caption button.paused .rectangle, #banner.loaded ul li .caption button.playing .triangle-right { display:none } #banner.loaded ul li .caption button.paused .triangle-right, #banner.loaded ul li .caption button.playing .rectangle { display:block } #banner #banner-prev, #banner #banner-next { display:none; position:absolute; top:38%; z-index:900; text-decoration:none; text-shadow:0 1px 1px rgba(0, 0, 0, 0.4); color:#fff; font-size:80px; line-height:80px; } #banner-prev:hover, #banner-next:hover { color:#ed1c24; text-decoration:none; } #banner-prev { left:20px } #banner-next { right:20px } /* ===[ Contact Button ]=== */ .contact-button-wrapper { display:none; position:absolute; top:260px; right:0; width:210px; background:#fff; z-index:100; } body.homepage .contact-button-wrapper { top:60px } .contact-button-wrapper p.h1 { width:210px; height:88px; background:#7ac142; color:#fff; text-align:center; line-height:88px; margin:0; cursor:pointer; } .contact-button-wrapper .contact-details-wrapper { display:none; padding:30px 0 15px 0; border-left:1px solid #ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc; } .contact-button-wrapper .contact-details-wrapper p, .contact-button-wrapper .contact-details-wrapper .btn { display:block; margin:0 auto 15px auto; } .contact-button-wrapper .contact-details-wrapper .btn { width:154px; background-color:#333; } .contact-button-wrapper .contact-details-wrapper .btn:hover { background:#7ac142 } .contact-button-wrapper .contact-details-wrapper p { text-align:center; line-height:100%; width:200px; font-size:20px; color:#333; text-transform:lowercase; } .contact-button-wrapper .contact-details-wrapper p a.phone { display:block; font-size:24px; color:#7ac142; padding-top:62px; background:url('img/ico/ico-phone-large.jpg') no-repeat 50% 0 transparent; } /* @end --------- */ /* ===[ Main Content ]=== */ #main-content { margin:36px 0 } #sub-content { padding:36px 0 } #sub-content, #footer { background:#f8f8f8 } body.inner #main-content, body.inner #sub-content { margin-top:25px } #breadcrumbs-wrapper { margin:-36px 0 36px 0; padding:25px 0; border-bottom:1px solid #ccc; } .page-content-area { min-height:600px; height:auto !important; height:600px; } .page-content-area img { margin:10px 0 } #social-widgets-wrapper { background:url('img/ico/loading-grey.gif') no-repeat 50% 10px transparent; background-size:15%; min-height:100px; height:auto !important; height:100px; margin-top:27px; } #social-widgets-wrapper.loaded { background:none } #social-widgets-wrapper #social-widgets { display:none } #social-widgets-wrapper.loaded #social-widgets { display:block } #social-widgets-wrapper iframe { border:0 none !important; float:right; margin-bottom:25px; } /* @end --------- */ /* ===[ Members Login ]=== */ .logged-1 form.members-login { display:none } /* @end --------- */ /* ===[ Bottom ]=== */ #sponsors-wrapper { background:#fff; padding:30px 0; } body.main-template #sponsors-wrapper, body.shop-template #sponsors-wrapper { border-top:1px solid #ccc } #sponsors-wrapper ul { width:100%; height:62px; overflow:hidden; } #sponsors-wrapper ul li { float:left; width:228px; } #sponsors-wrapper ul li img { display:block; margin:0 auto; } #newsletter-social-wrapper { background:#eae6dd; padding:15px 0; } #newsletter-social-wrapper p { float:left; font-style:italic; margin-bottom:0; } #newsletter-social-wrapper p .h2 { font-size:26px; font-style:normal; font-weight:400; margin:0; } #newsletter-social-wrapper form#newsletter-signup { width:100%; margin-top:5px; } #newsletter-social-wrapper form#newsletter-signup .form-group { margin-bottom:0 } #newsletter-social-wrapper form#newsletter-signup input, #newsletter-social-wrapper form#newsletter-signup button { float:left } #newsletter-social-wrapper form#newsletter-signup input { width:70%; height:46px; border-radius:0; border-right:none; font-style:italic; } #newsletter-social-wrapper form#newsletter-signup button { width:30%; background:#333; } #newsletter-social-wrapper form#newsletter-signup button:hover { background:#7ac142 } #newsletter-social-wrapper ul#social-menu { float:right; margin-top:9px; } #newsletter-social-wrapper ul#social-menu li { float:left; text-indent:-9999px; margin-left:13px; } #newsletter-social-wrapper ul#social-menu li.first-child { margin-left:0 } #newsletter-social-wrapper ul#social-menu li:first-child { margin-left:0 } #newsletter-social-wrapper ul#social-menu li, #newsletter-social-wrapper ul#social-menu li a { height:41px; width:41px; } #newsletter-social-wrapper ul#social-menu li a { display:block; text-indent:-9999px; border-radius:50%; background-color:#7ac142; background-position:0 0; background-repeat:no-repeat; } #newsletter-social-wrapper ul#social-menu li a:hover { background-color:#333 } #newsletter-social-wrapper ul#social-menu li#social-facebook a { background-image:url('img/bg/bg-social-facebook.png') } #newsletter-social-wrapper ul#social-menu li#social-twitter a { background-image:url('img/bg/bg-social-twitter.png') } #newsletter-social-wrapper ul#social-menu li#social-instagram a { background-image:url('img/bg/bg-social-instagram.png') } #newsletter-social-wrapper ul#social-menu li#social-youtube a { background-image:url('img/bg/bg-social-youtube.png') } /* @end --------- */ /* ===[ Footer ]=== */ footer { padding-top:18px; margin-bottosecum:36px; } footer h6 { text-transform:uppercase; font-size:18px; color:#77bd43; font-weight:600; margin:0 0 13px 0; padding:0; font-family:"Open Sans", "Gill Sans", "Gill Sans MT", Calibri,Arial, sans-serif; } footer h6.grey { color:#999; } body.main-template footer { border-top:none; margin-top:18px; } footer .copyright div.clearfix img, footer .copyright div.clearfix p { float:left } footer .copyright div.clearfix { clear:both; margin-bottom:10px; } footer .copyright img { margin:2px 22px 0 0 } footer .copyright div.clearfix p { font-style:italic; line-height:130%; margin:0; } footer .copyright p strong { font-style:normal } footer ul#footer-menu, footer .product-ranges { margin:0 0 10px 0; padding:0; } footer ul#footer-menu li, footer .product-ranges li { float:none; color:#999; padding:0; margin:0 0 8px 0; line-height:1em; list-style:inside none disc; font-size:13px; font-family:"Open Sans", "Gill Sans", "Gill Sans MT", Calibri,Arial, sans-serif; } footer ul#footer-menu li a, footer .product-ranges a { color:#999; line-height:1em; letter-spacing:-0.06em; } footer ul#footer-menu li a:hover, footer .product-ranges li a:hover { color:#333; } footer .social-likes { float:right; margin:0; padding:5px 0 0 0; } footer .download-item { margin-bottom:5px; cursor:pointer; } footer .download-item:hover img { opacity:0.7; } footer .download-item p { font-family:"Open Sans", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; color:#999; font-size:13px; line-height:1.2em; } footer .download-item strong { font-size:14px; } footer .download-item:hover p { color:#333; } .footer-contat-numbers ul { margin:0; padding:0; } .footer-contat-numbers li { font-family:"Open Sans", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; color:#999; font-size:13px; font-weight:400; line-height:1.325em; list-style:none; padding-left:0; margin-bottom:3px; position:relative; } .footer-contat-numbers li span { text-align:right; display:inline-block; position:absolute; right:10px; } footer a.footer-download-link {color: #999; } footer a.footer-download-link:hover {color: #58585a } footer .map-image { position:relative; top:-25px; display:inline-block; } footer .by-pretty, footer .by-pretty a { font-size:12px; color:#999; } footer .leda-logo { display:block; margin-bottom:5px; } .copywrite-information { color:#999; font-size:14px; font-family:"Open Sans", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; line-height:1.2em; } #zns { display:none } /* @end --------- */ /* ===[ Product Search ]=== */ .product-search-results { margin-top:20px } .product-search-results .productList.productSmall li.productsearchPagination { display:none; width:100%; text-align:center; padding:0; margin:0; } .product-search-results .productList.productSmall li.productsearchPagination a { margin:0 10px } /* @end --------- */ /* ===[ Case Studies ]=== */ #modal-case-studies .modal-body img { display:block; margin:0 auto; } /* @end --------- */ /* ===[ Contact ]=== */ .locations-wrapper { padding-top:30px; margin-top:40px; border-top:1px solid #ccc; } .locaitons-item { padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #ccc; min-height:450px; height:auto !important; height:450px; } /* @end --------- */ /* ===[ Catalogues Layout ]=== */ ul.catalogueList li { float:left; width:25%; padding:0 15px; margin-bottom:15px; } .shop-catalogue { position:relative; height:260px; width:100%; overflow:hidden; margin-bottom:10px; float:none; border:none; background:none; } .catalogue-image-wrap { display:block } .catalogue-image-wrap img { display:block; margin:0 auto; width:191px; height:208px; } p.h1.catalogue-name { display:block; height:40px; width:100%; margin:15px auto 5px auto; padding:0; font-size:18px; text-align:center; overflow:hidden; } p.h1.catalogue-name, p.h1.catalogue-name a { color:#333 } .shop-catalogue .product-buttons { display:block; position:absolute; top:-100%; left:-100%; height:260px; width:100%; background:rgba(244,244,244,0.8); transition:top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); } .shop-catalogue:hover .product-buttons { top:0; left:0; } .shop-catalogue .product-buttons .btn { display:block; margin:90px auto 0; width:80%; } /* @end --------- */ /* ===[ Small Product Layout ]=== */ .productList.productSmall li { float:left; width:25%; padding:0 15px; margin-bottom:15px; } .product-small { position:relative; height:260px; width:100%; overflow:hidden; margin-bottom:10px; } .product-image-wrap { display:block } .product-image-wrap img { display:block; height:170px; margin:0 auto; } p.h1.product-name { display:block; height:40px; width:100%; margin:15px auto 5px auto; padding:0; font-size:18px; text-align:center; overflow:hidden; } p.h1.product-name, p.h1.product-name a { color:#333 } p.product-code { display:block; font-size:12px; font-weight:800; color:#58585a; line-height:100%; margin:12px 0 0 0; text-align:left; text-transform:uppercase; } p.product-code span { color:#7ac142; } .product-small .product-buttons { display:block; position:absolute; top:-100%; left:-100%; height:260px; width:100%; background:rgba(244,244,244,0.8); transition:top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); } .product-small:hover .product-buttons { top:0; left:0; } .product-small .product-buttons .product-buy, .product-small .product-buttons .product-quote { display:none } .product-small.online-product-1 .product-buttons .product-buy, .product-small.online-product-0 .product-buttons .product-quote { display:block } .product-small .product-buttons .product-quote { margin-top:90px } .product-small .product-buttons .price { display:block; font-size:30px; color:#58585a; margin:30px auto 0 auto; text-align:center; line-height:100%; } .product-small .product-buttons .btn { display:block; width:80%; padding:0; margin:20px auto 20px auto; } .product-small .product-buttons .getQuote .btn, .product-small .product-buttons .moreInfo .btn { padding:10px 14px } .product-small .product-buttons input { display:block; width:100%; height:100%; padding:10px 14px; background:none; border:none; text-transform:uppercase; } /* @end --------- */ /* ===[ Large Product Layout ]=== */ .productList.productLarge #product-large-layout { position:relative; min-height:720px; height:auto !important; height:720px; } img#product-large-image { width:100%; height:auto; max-width:100%; margin-bottom:20px; border:1px solid #ccc; } .product-description p { font-size:15px; } /* .product-description > p:first-of-type { font-size:24px; line-height:32px; margin:20px 0; } */ .productList.productLarge #product-large-layout .prd-lrg-left h1.product-name { font-size:31px; margin:0; } .productList.productLarge #product-large-layout .prd-lrg-left p.product-code { font-size:14px; font-weight:800; color:#333; line-height:100%; margin:15px 0; text-transform:uppercase; text-align:left; } .productList.productLarge #product-large-layout .product-buttons { margin:30px 0 20px 0 } .productList.productLarge #product-large-layout .product-buttons .product-buy, .productList.productLarge #product-large-layout .product-buttons .product-quote { display:none } .productList.productLarge #product-large-layout.online-product-1 .product-buttons .product-buy, .productList.productLarge #product-large-layout.online-product-0 .product-buttons .product-quote { display:block } .productList.productLarge #product-large-layout .product-buttons .price { display:block; font-size:30px; color:#7ac142; margin:0 0 20px 0; line-height:100%; } .productList.productLarge #product-large-layout .product-buttons .product-sale-price-currency { font-size:16px; color:#58585a; } .productList.productLarge #product-large-layout .product-buttons .btn { float:left; padding:0; width:30%; margin:0; background:#7ac142; } .productList.productLarge #product-large-layout .product-buttons .btn:hover, .productList.productLarge #product-large-layout .product-buttons .btn:active { background:#333; } .productList.productLarge #product-large-layout .product-buttons .btn:last-child { margin-right:0 } .productList.productLarge #product-large-layout .product-buttons .getQuote .btn, .productList.productLarge #product-large-layout .product-buttons .moreInfo .btn, .productList.productLarge #product-large-layout .product-buttons .btn.btn-enquire-product, .productList.productLarge #product-large-layout .product-buttons .btn.btn-product-video { padding:10px 14px } .feature-buttons { position:relative; display:block; width:100%; margin:25px 0 10px 0; border-bottom:1px solid #ccc; } .feature-buttons a.btn-feature-btn { display:inline-block; position:relative; float:left; width:auto; padding:10px 20px; line-height:25px; font-size:15px; color:#333; text-transform:uppercase; border:1px solid transparent; top:1px; } .feature-buttons a.btn-feature-btn.active { border:1px solid #ccc; border-bottom-color:#fff; } .feature-buttons a.btn-feature-btn:hover{ color:#7ac142; } .feature-buttons a.btn-drawings ul.file-list li a { background:url('img/ico/dwg-icon.png') no-repeat 0 0 transparent } .feature-content { min-height:70px; margin-bottom:30px; padding:15px 0; border-bottom:1px dotted #ccc; } .feature-content a { display:inline-block; width:43%; float:left; margin-bottom:20px; margin-right:35px; font-size:16px; color:#333; padding-left:16px; position:relative; } .feature-content a .fa { display:block; position:absolute; left:0; top:0; } .feature-content a:hover { color:#7ac142; } .feature-content.brouchure i { color:#cc0000; font-size:17px; } .feature-content a:hover i { color:#ccc; } .productList.productLarge #product-large-layout .product-buttons input { display:block; width:100%; height:100%; padding:10px 14px; background:none; border:none; text-align:center; text-transform:uppercase; } .productList.productLarge #product-large-layout .product-buttons input.productTextInput { border:1px solid #ccc; display:block; float:left; height:46px; margin-right:20px; padding:0; text-align:center; width:46px; } .productList.productLarge #product-large-layout .product-buttons .btn.btn-product-video { display:none } .product-description h1, .product-description h2, .product-description h3 { font-size:18px !important; color:#58585a !important; } .productList.productLarge #product-large-layout .product-buttons .btn.btn-brochure, .productList.productLarge #product-large-layout .product-buttons .btn.btn-drawings { display:none; padding:10px 14px; background:#333; } .productList.productLarge #product-large-layout .product-buttons .btn.btn-brochure:hover, .productList.productLarge #product-large-layout .product-buttons .btn.btn-drawings:hover { background:#7ac142 } #large-image { position:relative; width:100%; height:auto; margin-bottom:20px; } #image-slide img { display:block; width:100%; height:auto; border:1px solid #ccc; } .imgnav { width:42px; height:42px; line-height:42px; text-align:center; color:#fff; display:block; position:absolute; top:50%; z-index:101; cursor:pointer; background-color:rgba(102,102,102,0.8); -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear; border-radius:50px; margin-top:-21px; } .imgnav:hover { color:#58585a; background-color:rgba(122,193,66,0.8); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); } #img-right { right:10px } #img-left { left:10px } .imgnav .triangle-right { margin:11px 0 0 16px; border-top:10px solid transparent; border-left:12px solid #fff; border-bottom:9px solid transparent; } .imgnav .triangle-left { display:block; width:0; height:0; margin:11px 0 0 14px; border-top:10px solid transparent; border-right:12px solid #fff; border-bottom:9px solid transparent; } .imgnav.disabled { display:none } #product-detail .imgnav:hover { background-color:rgba(244,244,244,0.8); color:#fff; } #poplets { overflow:hidden; } #poplets > div { height:auto; } #poplets #slideshow-1 { height:auto; margin-bottom:10px; overflow:hidden; } #poplets #slideshow-1 img { width:auto; height:auto; } #poplets #slideshow-2 { height:auto; overflow:hidden; } #slideshow-2 .slide-container { height:124px; padding:10px; border:1px solid #ccc; } #slideshow-2 .cycle-carousel-wrap { } #slideshow-2 > div { cursor:pointer; } #cycle-1 .cycle-slide { border:1px solid #ccc; } #cycle-2 { height:100px; overflow:hidden; } .poplet-pagi { display:block; font-size:14px; color:#ccc; margin:8px 0 0 0; padding:0; font-family:"Open Sans", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-weight:400; } #slideshow-2 .cycle-slide { overflow:hidden; } #slideshow-2 .cycle-slide img { margin-right:5px; } #slideshow-2 .cycle-slide-active, #slideshow-2 .cycle-slide:hover { opacity:0.5; } .related-products { display:none; width:60%; margin-top:30px; background:#fff; } .related-products table.productTable td { padding:0 30px 0 0 } .related-products table.productTable td:last-child { padding:0 } .productList.productLarge #product-large-layout.online-product-1 .related-products table.productTable .product-buttons .product-buy, .productList.productLarge #product-large-layout.online-product-0 .related-products table.productTable .product-buttons .product-quote { padding-top:60px } .productList.productLarge #product-large-layout .related-products table.productTable .product-buttons .btn { width:40% } /* @end --------- */ /* ===[ Cart Layout ]=== */ #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 .productitemcell { height:70px } #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 #cccCCC; padding-top:4px; padding-bottom:4px; color:#999; } #product-summary td.ptaxrate { } #product-summary td.ptotal { } #product-summary td.premove { width:21px } #product-summary td.premove a { width:22px; height:22px; display:block; overflow:hidden; text-indent:-9999px; background:transparent url('img/btn-remove.png') no-repeat 0 0; } #product-summary td.premove a:hover { background-position:right bottom } #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 { background:#f4f4f4; border-radius:20px; margin-bottom:10px; padding:10px 10px 15px 10px; } #discount-area label { font-style:normal; text-transform:uppercase; font-weight:700; font-size:14px; color:#333; } #DiscountCode, #custom-discount-code { border:1px solid #ccc; padding:5px; } .update { background:#333; border:0 none; color:#fff; text-transform:uppercase; font-weight:700; text-align:center; padding:5px 10px; } .shipping-summary { background:#fafafa; border-radius:20px; margin-bottom:10px; padding:10px 10px 15px 10px; } .shippingDiv { } #shippingSpan { text-transform:uppercase; color:#999; 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; } .productitemcell.quote-product-price { text-indent:-9999px } #checkout-buttons a#catshopquote, #checkout-buttons a#catshopbuy { display:none } #checkout-buttons.quote-product .checkout-quote-button a#catshopquote, #checkout-buttons.buy-product .checkout-buy-button a#catshopbuy { display:block } .table#product-summary > thead > tr > th { border-bottom:1px solid #ddd } #catshopbuy2 { width:100%; margin:20px auto; } /* @end --------- */ /* ===[ Payment Form ]=== */ #shopping-payment .crumbs { margin-bottom:25px } #continue { } .logged-1 #continue { display:none } #checkout-form { display:none } .logged-1 #checkout-form { display:block } #continue-nologin { display:block; width:60%; margin:15px 0; } #checkout-form .row { margin-bottom:20px } #credit-card { clear:both } .cards { margin:0 0 20px 0 } .cards li { width:62px; height:41px; text-indent:-9999px; overflow:hidden; list-style:none; float:left; margin-right:10px; -webkit-transition:all 0.2s ease 0s; -moz-transition:all 0.2s ease 0s; transition:all 0.2s ease 0s; } .visa { background:transparent url('img/visa.png') no-repeat 0 0 } .mastercard { background:transparent url('img/mastercard.png') no-repeat 0 0 } .amex { background:transparent url('img/amex.png') no-repeat 0 0 } .cards li.off { background-position:left bottom } #CardNumber.valid { background:#fff url('img/tick.png') no-repeat 98% 12px } .amount-info { text-align:center } #shopping-payment.quote .amount-info { display:none } .amount-info label { font-size:20px } .amount-info sup { } .amount-cc { display:inline } #Amount { width:185px; height:auto; background:none; color:#001412; box-shadow:none; display:none; border:0 none; display:inline; font-size:35px; position:relative; } .cmessage { margin-bottom:0; padding-bottom:0; } #paymentSubmit { width:285px; display:block; margin:10px auto 0 auto; } #card-message { min-height:20px; font-size:12px; margin:0; padding:0; } #card-message span { font-style:italic; display:none; } #card-message span.valid { color:#d7df3a } #CardCCV { font-weight:normal } .logged-1 #user-account-details, .ppcode-application { display:none } .ppcode-application { margin-top:10px } /* @end --------- */ /* ===[ Blog ]=== */ .blog-container.blog-masonry { width:100% } .blog-container.blog-masonry .postList { width:100%; margin:0; } .blog-container.blog-masonry .side-panel { display:none } .blog-container.blog-masonry .postList .post-list .blog-post { float:none; width:340px; margin:0 30px 30px 0; } .blog-container.blog-masonry .postList .post-list .blog-post img { float:none !important; display:block; cursor:pointer; margin:0 auto !important; border:none; width:100%; vertical-align:middle; } .blog-container.blog-masonry .post-list .blog-post .post-img-holder { display:block; width:100%; height:200px; overflow:hidden; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; border:2px solid #ccc; margin:0 0 10px 0; } .blog-container.blog-masonry .post-list .blog-post h2.post-title { font-size:18px; margin:20px 0 0 0; border-bottom:none; } .blog-container.blog-masonry .post-list .blog-post .post-details { color:#58585a; margin:0 0 10px 0; font-size:11px; } .blog-container.blog-masonry .post-list .blog-post .post-body .btn { display:block; margin:20px 0 10px 0; width:40%; } .blog-container.blog-masonry .detail-post { width:100%; margin:0; } .blog-container.blog-masonry .post-list { float:left; width:75%; } .blog-container.blog-masonry .side-panel { display:none; float:right; width:20%; margin-left:30px; } body.blog-detailed-view .blog-container.blog-masonry .side-panel { display:block } body.blog-detailed-view .blog-container.blog-masonry h2.post-title { font-size:22px; margin:20px 0 0 0; border-bottom:none; } body.blog-detailed-view .blog-container.blog-masonry .post-details { color:#58585a; margin:0 0 10px 0; font-size:13px; } body.blog-detailed-view .blog-container.blog-masonry .post-body img { float:left; max-width:50%; margin:0 30px 20px 0; } /* @end --------- */ /* ===[ Downloads ]=== */ .full-brochure.list-reset { margin-bottom: 20px; } .literature-container.half { margin: 10px 0; } /* @end --------- */ /* ===[ latest news ]=== */ .latest-news-item { border-right:1px solid #ccc; padding-right:15px; padding-bottom:20px; } .latest-news-item h4 { font-size:27px; color:#77bd43; margin-bototm:10px; font-family:"Open Sans", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-weight:400; } .latest-news-item p { font-size:14px; line-height:1.5em; } .latest-news-item .btn { font-size:9px; padding:4px 14px 4px 7px; border-radius:6px; } /* @end --------- */ /* ===[ Utility Styles ]=== */ .trans-background { width:auto; height:100%; background:rgba(0,0,0,0.6); position:absolute; left:0; top:0; bottom:0; z-index:1; } .half-screen { width:50vw; } .left-screen { left:0; right:auto; } .right-screen { right:0; left:auto; } ul.green-arrows .fa { color:#77bd43; } ul.with-lines li { padding-bottom:4px; } ul.with-lines li > span { min-width:35%; display:inline-block; border-bottom:1px solid #dedede; } ul.with-lines li:last-child > span { border-bottom:none; } ul.with-lines li a { color:#58585a; } /* @end --------- */ /* **************** Media Query Ranges **************** ================================================== */ @media (min-width:1500px){ .videoWrapper { margin-top:3vh; } } @media (max-width:1500px){ #video-block h1 { font-size:36px; margin-bottom:20px; } #video-block .grey-background { padding:2vh 0; } #video-block li { font-size: 20px; margin-bottom: 6px; } } @media (max-width:1105px){ #video-block .grey-background { padding:2vh 0; } #video-block li { font-size:21px; } #video-block h1 { font-size:36px; margin-bottom:30px; } } @media (max-width:950){ } @media (max-width:1250px){ #content-block-full .content-block p { display:none; } } @media (max-width:1190px){ a.phone { margin-right:0; } } @media (max-width:1370px){ #content-block-full .half-screen { width:100%; } .feature-buttons a.btn-feature-btn { padding:10px 15px; } .feature-content a { width:100%; } } /* ===[ Large desktops and laptops ]=== */ @media (min-width:1600px){ .contact-button-wrapper { display:block } } @media (min-width:1200px){ } /* ===[ Portrait tablets and medium desktops ]=== */ @media (min-width:992px) and (max-width:1199px){ #sponsors-wrapper ul li { width:235px } .product-image-wrap img { width:100% } } /* ===[ 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 } .navbar #top { margin-bottom:10px } .navbar #top a.phone { clear:none; padding-left:30px; font-size:15px; margin:0; background:none; } .navbar #header { margin-top:4px } .main-nav { float:right } .main-nav ul.navbar-nav { margin-left:0 } ul.navbar-nav > li.last-child > a { padding-right:0 } ul.navbar-nav > li ul > li { width:240px } .navbar #header form.form-search { display:none } #banner, #banner ul, #banner ul li, #banner ul li .inner-slide { height:400px } #banner ul li .caption { padding-top:75px } #banner ul li .caption p { width:100% } #banner ul li .caption p.h1 { font-size:54px } #banner.loaded ul li .caption button { margin-top:20px } #sponsors-wrapper { display:none } footer .social-likes { float:left } ul.catalogueList li, .productList.productSmall li { width:50% } .video-box { margin-bottom:30px; } .productList.productLarge #product-large-layout .related-products table.productTable .product-buttons .btn { width:100% } .blog-container.blog-masonry .postList .post-list .blog-post { width:320px } #cycle-1 .cycle-slide { width:100%; } #video-block li { font-size:3.2vw; } #video-block h1 { font-size:38px; margin-bottom:35px; } .feature-circles { margin-bottom:20px; display:block; margin-left:auto; margin-right:auto; } #content-block-full .content-block h1 { margin-top:0; margin-bototm:0; font-size:34px; } .content-block ul { margin-top:15px; } footer .map-image { display:none; } .copywrite-information { margin-top:30px; } footer .download-item p { margin-top:5px; } #content-block-full .content-block { padding:1vh 10px 1vh 0; } .content-block h2 { font-size:36px; } #content-block-full, #content-block-full div { height:37vw; } #content-block-full .content-block p { display:block; font-size:14px; } .toprow { margin-bottom:0; } a.phone { clear:both; } .latest-news-item { border-right:0 none; } .feature-content a { width:43%; } } /* ===[ Landscape phones and portrait tablets ]=== */ @media (max-width:767px) { #nav-expander, .navbar #header #logo { -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; } #nav-expander.out { margin-right:200px } #header.out a#logo { margin-left:-200px } #site { width:100%; position:relative; right:0; -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; } #site.out { right:200px } .navbar, .main-nav { border-top:4px solid #7ac142 } .main-nav { margin:0; background:#ccc; right:0; bottom:0; top:0; width:200px; position:fixed; overflow:hidden; margin-top:0; float:none; height:auto; } .main-nav.in { top:50px; bottom:0; top:0; right:-200px; float:none; } .main-nav ul.navbar-nav { width:200px; padding:0; margin:28px 0 0 0; } ul.navbar-nav > li { padding-bottom:0 } ul.navbar-nav > li > a { color:#58585a; font-size:16px; font-weight:700; line-height:100%; margin:0 0 10px 0; padding-left:16px; padding-right:0; border-right:none; } ul.navbar-nav > li > a, ul.navbar-nav > li:first-child > a, ul.navbar-nav > li.first-child > a { border-left:4px solid #ccc } ul.navbar-nav > li:hover a { color:#7ac142; border-left-color:#7ac142; } ul.navbar-nav > li.dropdown > a { background:none; padding-right:0; } ul.navbar-nav > li:hover ul { display:none !important } .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 } .navbar #header #logo { width:50%; height:auto; margin-top:10px; } .navbar-toggle { margin-top:10px; } #main-content { margin:18px 0 } #sub-content { padding:18px 0 } footer { margin-bottom:22px } #header a#logo img { margin:0; } #country-dropdown-mobile-wrapper, #shop-link-mobile-wrapper { display:block } .video-box { margin-bottom:30px; } #banner, #banner ul, #banner ul li, #banner ul li .inner-slide { height:200px } #banner ul li .caption { padding-top:50px } #banner ul li .caption p.h1 { font-size:50px } #sponsors-wrapper { display:none } #newsletter-social-wrapper form#newsletter-signup { margin-top:0 } #newsletter-social-wrapper form#newsletter-signup .col-xs-12 input[type=text] { margin-bottom:0 } #newsletter-social-wrapper ul#social-menu { float:left; margin-top:0; } #newsletter-social-wrapper ul#social-menu li { margin-left:20px } footer .social-likes { float:left } ul.catalogueList li, .productList.productSmall li { width:50% } .product-image-wrap img { width:auto } #breadcrumbs-wrapper { margin-top:-18px; padding:15px 0; } #newsletter-social-wrapper ul#social-menu { margin-top:15px } #modal-case-studies .modal-body img { width:auto } .productList.productLarge #product-large-layout { min-height:200px } .related-products table.productTable td { border-bottom:1px solid #ccc; margin-bottom:15px; padding-bottom:15px; padding-right:0; } .related-products table.productTable td:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; } .productList.productLarge #product-large-layout .related-products .product-buttons .btn { float:none; margin:10px auto; } .feature-content a { width:43%; } #cycle-1 .cycle-slide { width:100%; } .blog-container.blog-masonry .postList .post-list .blog-post { width:320px } .stat-box { margin-bottom:3px; } #content-block-full .content-block { padding:3vh 10px 3vh 0; } #content-block-full, #content-block-full div { height:300px; } #content-block-full .content-block p { display:none; } a.phone { margin-right:0; } a.contact-link { } .toprow { margin-bottom:0; } .latest-news-item { border-right:0 none; } p.product-code { margin-bottom:25px; } .row.reorder-xs { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); direction: rtl; } .row.reorder-xs > [class*="col-"] { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); direction: ltr; } } /* ===[ Landscape phones and smaller ]=== */ @media (max-width:480px) { .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 } .jx_ui_Widget { display:none } .navbar #header #logo { width:70%; height:auto; } #header a#logo img { width:100%; height:auto; } #banner ul li .caption { padding-top:60px } #banner ul li .caption p.h1 { font-size:44px } footer .copyright img { margin-bottom:10px } footer .social-likes li { margin-bottom:10px } ul.catalogueList li, .productList.productSmall li { width:100% } .productList.productLarge #product-large-layout .product-buttons .btn { width:65% } .productList.productLarge #product-large-layout .product-buttons .btn.btn-product-video { display:none } .productList.productLarge #product-large-layout .related-products table.productTable .product-buttons .btn { width:100% } .productPopletsItem a img { height:70px } .page-content-area { min-height:100px; height:auto !important; height:100px; } #newsletter-social-wrapper form#newsletter-signup input { width:60% } #newsletter-social-wrapper form#newsletter-signup button { width:40% } .blog-container.blog-masonry .postList .post-list .blog-post { width:100% !important; margin-right:0; } .content-block h2 { font-size:34px; } /* .toprow { display:none; } */ footer ul#footer-menu, footer .product-ranges { margin:0 0 35px 0; } footer ul#footer-menu li, footer .product-ranges li { margin-bottom:8px; } .footer-contat-numbers li { font-size:14px; } .download-item img { height:auto; width:100%; margin-bottom:7px; } .copywrite-information { font-size:11px; line-height:1.2em; } footer .by-pretty { text-align:center; opacity:0.4; } #newsletter-social-wrapper ul#social-menu { width:100%; float:none; clear:both; text-align:center; } #newsletter-social-wrapper ul#social-menu li { float:none; display:inline-block; } #content-block-full .content-block { padding:3vh 10px 3vh 0; } .copywrite-information { margin-top:30px; } } .btn-remove { border-radius: 25px; height: 22px; width: 22px !important; box-shadow: none !important; margin: 0; padding: 0; font-family: cursive; FONT-SIZE: small; FONT-WEIGHT: 800; } .blog-img-block img { width: 100%; overflow: hidden; max-height: 300px; min-height: 270px; float: none !important; display: block; cursor: pointer; margin: 0 auto !important; border: none; width: 100%; vertical-align: middle; } .post-img-holder { display: block; width: 100%; height: 200px; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 2px solid #ccc; margin: 0 0 10px 0; } .blog-post .post-details { color: #58585a; margin: 0 0 10px 0; font-size: 11px; }