/********************************************************************************

        StyleSheet:     Blocks-Vn.nn.css

        Schematic:      XMLi5 Blocks CSS Rules

        Author:         Maurice O'Prey

        Copyright:      XMLi5 Ltd. 2018 all rights reserved

        Purpose:        This stylesheet concentrates on the layout and spacing of blocks (sections).
                        It is a foundation style sheet and should be web application agnostic.

        Dependancies:   Requires Bootstrap CSS & Bootstrap Theme CSS loaded in MasterPage
                        Requires Z-Default.skin file in theme directory

        Section             Contents
        ==========          ========
        BLOCKS              (Main Blocks)
                            - main button styles
                            - page-header
                            - navbar-top, navbar-top-absolute
                            - navbar, navbar-absolute
                            - navbar-toggle
                            - navbar-nav
                            - navbar-mini-basket
                            - navbar-search
                            - megamenu
                            - page-body
                            - breadcrumb trail
                            - page-footer-spacer
                            - page-footer
                            - cookie-crumble

        SECTIONS            (Individual Sections)
                            - Section Headers
                            - Owl Carousels
                            - video
                            - spotlight
                            - cp12
                            - features
                            - featurettes
                            - featurettes-spacer
                            - featured-groups
                            - featured-products
                            - new-products
                            - contactus
                            - googlemap

        TYPOGRAPHY          (Typography)
                                    
        Color Scheme        Description         Used in
        ===============     ================    ==================================
        #FFF                White               Various
        #284B77             Churchill Blue      Various & Headings
        #F5F5F5             Silver Grey         Megamenu Background
        #4A4A4A             Grey Beige          Body Text
    
*********************************************************************************/

/********************************************************************************

    BLOCKS (Main Blocks)
    
********************************************************************************/
/* prevent small pages to enforce scrollbars - removed */
/*.page {min-height: 160px;}*/


/* telephone header */
.telephone.header {position: absolute; right: 40px; top: 87px;}
.telephone a:hover {text-decoration: none;}

/* page-header (wraps navbar-top and navbar) */
.page-header .logo {color: #FFF;}  /* stops alt text flashing */
.page-header {margin: 0; padding: 0; border: 0; background: #FFF;}
.page-header .container {background: #FFF; padding: 0;}

/* navbar-top (typically contains logo) */
.navbar-top {background: #FFF;}
.navbar-top .container {background: #FFF; padding-top: 20px; padding-bottom: 0;}

/* navbar-header */
.navbar-header {padding-top: 15px;}

/* add padding so that mobile menu displays correctly */
ul.nav.navbar-nav {padding-left: 15px;}

/* navbar-top absolute (used for overlaying other content such as videos) */
.navbar-top.absolute {background-color: transparent; position: absolute; top: 40px; left: 0; right:0; z-index: 999;}
.navbar-top.absolute .container {background-color: transparent; padding-top: 0; padding-bottom: 0;}

/* navbar */
.navbar {background-color: #FFF; border: 0; border-radius: 0;}
.navbar .container .navbar {background: #FFF; padding: 0;}

/* navbar absolute (used for overlaying other content such as videos) */
.navbar.absolute {background-color: #FFF; position: absolute; top: 0; left: 0; right:0; z-index: 999; opacity: 0.7;}
.navbar.absolute .container .navbar {background: #FFF; padding: 5px 0 5px 0; opacity: 0.7;}
.navbar.absolute .container .navbar .logo {position: relative; top: 0;}
.navbar.absolute .container .navbar li.dropdown.open a.dropdown-toggle {color: #FFF;}
.navbar.absolute .container .navbar li.dropdown.active a.dropdown-toggle {color: #FFF;}
.navbar.absolute .container {background-color: transparent; padding-top: 0; padding-bottom: 0;}

.logo-synergise {position: relative; left: 80px; top: 20px;}

/* navbar-toggle (position and color) */
.navbar-toggle {position: relative; top: 15px; right: 20px;}
.navbar-toggle .icon-bar {background-color: #284B77; width: 30px; padding: 3px;}

/* navbar - (all links) */
.navbar a {color: #284B77;}

/* navbar - (carets) */
.navbar .caret {margin-left: 10px;}

/* navbar-nav - (active link) */
.navbar-nav > .active a {background-color: #FFF; }

.navbar li {margin-left: 10px; margin-right: 10px;}

.navbar .level2 {padding: 15px;}

/* navbar-mini-basket */
/* Mini Basket */
.mini-basket {width: 600px; margin-left: -400px; margin-top: 0; background-color: #F8F8F8; color: #00304A; font-size: 14px; font-size: 1.4rem;}
.mini-basket .price{font-size: 14px; font-size: 1.4rem;}
.mini-basket a {color: #FFF;}
.mini-basket a:hover {color: #FFF; text-decoration: none; }
.mini-basket a.product-description {background-color: transparent; color: #00304A;}
.mini-basket a.product-description:hover {color: #777777; text-decoration: underline; transition: .3s ease-in-out all;}
.mini-basket .mini-basket-item {margin: 20px 0;}
.mini-basket .row.mini-basket-buttons {padding: 20px;}

/* min-basket-ajax */
.mini-basket-ajax {margin-top: 0; background-color: #F8F8F8; color: #00304A; font-size: 14px; font-size: 1.4rem;}
.mini-basket-ajax .price{font-size: 14px; font-size: 1.4rem;}
.mini-basket-ajax a {color: #FFF;}
.mini-basket-ajax a:hover {color: #FFF; text-decoration: none; }
.mini-basket-ajax a.product-description {background-color: transparent; color: #00304A;}
.mini-basket-ajax a.product-description:hover {color: #777777; text-decoration: underline; transition: .3s ease-in-out all;}
.mini-basket-ajax .mini-basket-item {margin: 20px 0;}
.mini-basket-ajax .row.mini-basket-buttons {padding: 20px;}
.pnl-success {padding-left: 20px; padding-right: 20px;}
.item-added .alert-success {background-image: none; background-color: #F8F8F8; margin-bottom: 20px; position: relative; top: 5px;}

/* Mini-Basket-Ajax (Position Close Button) */
.item-added .btn-close-item-added {position: relative; right: -10px; top: -10px; z-index: 999; background-image: url(graphics/popup/popup_close.png); background-repeat: no-repeat; height: 36px; width: 36px; }


/* navbar-search */
.navbar .ddl-search {}
.navbar .txt-search {margin: 10px;}

/* megamenu */
.megamenu .nav, .megamenu .dropup, .megamenu .dropdown, .megamenu .collapse {position: static;}
.megamenu .navbar-inner, .megamenu .container {position: relative;}
.megamenu .dropdown-menu {left: auto; padding-top: 0; padding-bottom: 0;}
.megamenu .dropdown-menu > li {display: block;}
.megamenu .nav.pull-right .dropdown-menu {right: 0;}
.megamenu .megamenu-content {padding: 20px 30px; zoom: 1;}
.megamenu .megamenu-content:before, .megamenu .megamenu-content:after {display: table; content: ""; line-height: 0;}
.megamenu .megamenu-content:after {clear: both;}
.megamenu.navbar .nav > li > .dropdown-menu:after, .megamenu.navbar .nav > li > .dropdown-menu:before {display: none;}

.megamenu .dropdown.megamenu-fullwidth .dropdown-menu {width: 100%;left: 0;right: 0;}
.megamenu .dropdown.megamenu-80width .dropdown-menu {width: 80%;left: 0;right: 0;}
.megamenu .dropdown.megamenu-80width .dropdown-menu {width: 80%;left: 0;right: 0;}
.megamenu .dropdown.megamenu-50width .dropdown-menu {width: 50%;left: 0;right: 0;}
.megamenu .dropdown.megamenu-40width .dropdown-menu {width: 40%;left: 0;right: 0;}

@media (max-width: 991px) {
    .megamenu .dropdown.megamenu-fullwidth .dropdown-menu {width: auto;}
    .megamenu .megamenu-content {padding-left: 0; padding-right: 0;}
    .megamenu .dropdown-menu > li > ul {display: block;}
}


/* megamenu main wrapper */
.page-header .container {background-color: #F5F5F5;} /* sets the background for the main megamenu*/
.megamenu .dropdown-menu {border-top: 1px solid #F5F5F5; padding: 0;}

/* megamenu main wrapper content */
.megamenu-content {color: #284B77; margin-top: 0; margin-bottom: 0;} /* this sets the hover color of the down chevron */
.megamenu .megamenu-content ul {list-style: none;}
.megamenu .megamenu-content ul a {background-color: transparent;}
.megamenu .megamenu-content a {background-color: transparent;}

/* individual megamenu panels (do not apply background colors to these */
.accessories {}
.accessories .container {padding: 0; width: 94%;}

megamenu-spares {}
megamenu-spares .container {padding: 0; width: 94%;}

megamenu-products {}
megamenu-products .container {padding: 0; width: 94%;}

megamenu-brands {}
megamenu-brands .container {padding: 0; width: 94%;}

/* 3 column colours */
.navbar .col-1 {background-color: #FFF; height: 490px;}
.navbar .col-2 {background-color: #F5F5F5; padding-top: 20px;}
.navbar .col-3 {background-color: #FFF;}

/* megamenu headings */
.navbar .col-1 .heading {margin-top: 20px; background-color: #284B77; color: #FFF; padding: 15px 5px; text-align: center;}
.navbar .css-arrow-down {border-top: 10px solid #284B77; position: relative; top: -11px;} /* arrow down below heading */

/* column 1 holder */
.navbar .col-1-holder {position: relative; top: -15px}

/* column 1 links and hover colors */
.navbar .row.mgmenu h4 {margin: 0;}
.navbar .row.mgmenu a.mgmenu1-link {Background-color: #FFF; display: block; padding: 15px 20px; transition: all 0.1s ease-out;}
.navbar .row.mgmenu a.mgmenu1-link:hover {background-color: #284B77; text-decoration: none; color: #FFF; opacity: 0.7;}

/* column 2 links and hover colors */
.navbar .row.mgmenu a.mgmenu2-link {Background-color: transparent; display: inline-block; padding: 8px 0; transition: all 0.3s ease-in-out;}
.navbar .row.mgmenu a.mgmenu2-link:hover {text-decoration: none;}

/* column 2 chevron-right (important) */
.navbar .row.mgmenu div.fa-holder {display: inline-block; width: 15px;}
.navbar .row.mgmenu div.fa fa-chevron-right {display: inline-block;}

/* column 3 links */
.navbar-link-item {height: 160px; margin: 10px; padding: 15px;}
.navbar-link-item:last-child {border-bottom: none;}
.navbar-link-item h3 {color: #FFF; line-height: 30px;}
.navbar-link-item .btn-transparent {color: #FFF;}
.navbar-link-item .btn-transparent:hover {color: #FFF;}

/* megamenu end */

/* page-body (everything bewteen page-header and page-footer)*/
.page-body {background: #FFF; margin: 0;}
.page-body .container {background: #FFF; padding-top: 20px;}

/* breadcrumb trail */
.bct {background-color: #FFF;}
.bct .container .breadcrumb {margin-bottom: 0; width: 100%; border-radius: 0; background-color: #284B77; color: #FFF;}
.bct .container .breadcrumb a {color: #FFF;}
/* override and style the default seperator */
.bct .breadcrumb > li + li:before {color: #FFF; content: "/"; padding: 0 10px;}

/* page-footer-spacer (simply provides consitant space between page-body and page-footer) */
.page-footer-spacer{background: #FFF;}
.page-footer-spacer .container {background: #FFF; height: 20px;}

/* page-footer (page footer navigation etc.) */
.page-footer {background-color: #284B77; color: #FFF;}
.page-footer .container {padding-top: 20px;}
.page-footer .container a {color: #FFF;}
.page-footer ul li {padding: 5px 0;}
.page-footer h3 {padding-bottom: 10px; border-bottom: 1px solid #FFF; color: #FFF;}
.page-footer h4 {padding-bottom: 10px; color: #FFF;}
.page-footer .social-icons {margin-bottom: 10px;}
.page-footer .btn-subscribe {background-color: #284B77; border: 1px solid #FFF; margin-top: 10px;}
.page-footer .subscribe-text {display: block; margin-bottom: 10px;}
.page-footer .validation-container {padding: 10px 0;}
.page-footer .validation-container .text-danger {color: #FFF;}

/* Ad some right margin to space out site-by if scroll-to-top active (else change to 0)*/
.page-footer p.site-by {margin-right: 100px;}

/* cookie-crumble */
#cookieContainer {position: fixed; bottom: 0; width: 100%; background: #284B77; opacity: 0.9; z-index: 1999; }
#cookieInfo { margin-left: 40px; padding: 15px; opacity: 1.0; }
#cookieInfo p { color: #fff; font-weight: bold;}
#cookieInfo a { color: #fff; text-decoration: underline; }
#cookieInfo .btnClose { color: #fff; margin-right: 20px; padding: 5px; border: 1px solid #fff; text-decoration: none; position: fixed; bottom: 10px; right: 100px;}

/********************************************************************************

    SECTIONS (Individual Sections)
    
********************************************************************************/

/* All section headings */
.section {}
.section-header, .section-header-reversed {margin-top: 20px;}
.section-header.no-margin, .section-header-reversed.no-margin {margin-top: 0;}

/* Section Header (blue background block with blue line and white text) */
.section-header { color: #284B77; background: transparent; position: relative;}
.section-header span { font-weight: 600; text-transform: uppercase; text-rendering: optimizeLegibility; position: relative; z-index: 2; background: #284B77; color: #fff; display: inline-block; padding: 10px 30px; }
.section-header:after { background: #284B77; height: 2px; display: block; position: absolute; z-index: 1; top: 26px; width: 100%; content: ""; }

/* Section Header Reversed (white background block with blue line and blue text) */
.section-header-reversed { color: white; background: transparent; position: relative;}
.section-header-reversed span { font-weight: 600; text-transform: uppercase; letter-spacing: 2px; text-rendering: optimizeLegibility; position: relative; z-index: 2; background: white; color: #284B77; display: inline-block; padding: 10px 30px; }
.section-header-reversed:after { background: #284B77; height: 2px; display: block; position: absolute; z-index: 1; top: 26px; width: 100%; content: ""; }

/* Section Header Transparent (clear background block with white border) */
.section-header-transparent { color: white; background: transparent; position: relative; border: 2px solid white; padding: 5px 0px;}
.section-header-transparent span { font-weight: 600; text-transform: uppercase; text-rendering: optimizeLegibility; position: relative; z-index: 2; background: transparent; color: white; display: inline-block; padding: 10px 30px; }

/* Owl Carousels and navigation buttons */
.owl-carousel {padding-left: 15px; padding-right: 15px;} /* adjust to align with bootstrap container padding */
.owl-theme .owl-nav [class*='owl-'] {background-color: #284B77; color: #FFF;}
.owl-theme .owl-nav [class*='owl-']:hover {background-color: #284B77; color: #FFF; text-decoration: none; opacity: 0.7;}

/* video */
.header-container {width: 100%; height: auto; border-left: none; border-right: none; position: relative;}
.video-container {max-height:initial; overflow: hidden; width: 100%;}
.video-container video {display: block; height: auto; width: 100%; opacity: 1;}

/* video-footer-box (optional - ovelays video) */
.video-footer-box {background-color: #FFF; opacity: 0.7; position: absolute; bottom: 30px; right: 30px; width: 20%; padding: 20px 0;}
.video-footer {}

/* video-footer-banner (optional - ovelays video at bottom) */
.video-footer-banner {background-color: #FFF; opacity: 0.7; position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 0;}
.video-footer {}

/* banner */
.banner-container {max-height: 1055px; overflow: hidden; width: 100%;}
.banner-container .banner {display: block; height: auto; width: 100%; opacity: 1;}

/* carousel and caption */
.carousel {position: relative;}
.carousel .carousel-caption {position: absolute; left: 0; top: 20px;}
.carousel .carousel-caption h1.carousel-heading {text-align: left; max-width: 430px; padding: 7px 20px 7px 20px; font-size: 3.0rem;}
.carousel .carousel-button {position: absolute; bottom: 20px; right: 20px;}

/* carousel styling */
.carousel-heading {background-color: #284B77;}
.carousel-button {border: 2px solid white; background-color: #284B77; opacity: 0.7; color: white;}
.carousel-button:hover {color: white;}

.carousel-button-mobile {border: 2px solid white; background-color: #284B77; opacity: 0.7; color: white; margin-top: 10px;}
.carousel-button-mobile:hover {color: white;}

/* spotlight */
section.spotlight {background: #FFF;}
section.spotlight .container {background: #FFF;}

/* cp12 */
section.cp12 {background: #FFF;}
section.cp12 .container {background: #FFF;}
section.cp12 .container .box {border: 1px solid silver;}

/* features */
section.features {background: #FFF; margin-top: 20px;}
section.features .container {background: #FFF; padding-top: 0; padding-bottom: 0;}
section.features .container .feature-intro {margin-bottom: 40px;}
section.features .container .feature {margin-bottom: 20px;}
section.features .container .feature .panel-heading {padding: 20px 0; background-color: #284B77;}
section.features .container .feature .panel-body {padding: 0 0 10px 0;}
section.features .container .feature a {color: #FFF;}
section.features .container .feature a:hover {text-decoration: none;}

/* featurettes */
section.featurettes {background: #FFF;}
section.featurettes .container {background: #FFF; padding-top: 0; padding-bottom: 0;}
section.featurettes .container .featurette {padding-top: 20px; padding-bottom: 20px;}
section.featurettes .container .featurette {padding-top: 20px; padding-bottom: 20px;}
section.featurettes .container .featurette .text-description3 {padding-top: 20px;}

/* featurette spacer */
section.featurette-spacer {background: #FFF; height: 20px;}
section.featurette-spacer .container {background: #FFF; height: 20px;}

/* featured groups */
section.featured-groups {background:#FFF;}
section.featured-groups .container {background: #FFF; padding-top: 20px; padding-bottom: 0;}
section.featured-groups .container .featured-group {margin-bottom: 20px;}
section.featured-groups .container .featured-group .panel-heading {padding: 20px 0; background-color: #284B77; margin-bottom: -10px;}
section.featured-groups .container .featured-group .panel-body {padding: 0 0 10px 0;}
section.featured-groups .container .featured-group .panel-footer {margin-bottom: 40px;}
section.featured-groups .container .featured-group .panel-footer p {margin-bottom: 0;}
section.featured-groups .container a {color: #FFF;}
section.featured-groups .container a:hover {text-decoration: none;}

/* featured products (with Price)*/
section.featured-products a {color: #4A4A4A; text-decoration: none;}
section.featured-products .holder {text-align: center; background-color: #FFF; padding-top: 10px; padding-bottom: 0;}
section.featured-products .holder .description {text-transform: uppercase;}
section.featured-products .holder .price {text-align: center; background-color: #FFF;}

/* new products (With Price) */
section.new-products a {color: #4A4A4A; text-decoration: none;}
section.new-products .holder {text-align: center; background-color: #FFF; padding-top: 10px; padding-bottom: 0;}
section.new-products .holder .description {text-transform: uppercase;}
section.new-products .holder .price {text-align: center; background-color: #FFF;}

/* contact-us */
section.contactus {margin-top: 20px;}

/* google-map */
section.googlemap {margin-top: 20px; margin-bottom: 20px;}
section.googlemap p.opening-hours {position: relative; top: -15px;}

/********************************************************************************

    TYPOGRAPHY (Typography)
    
********************************************************************************/
h1,h2,h3,h4,h5,h6 {margin: 0;}
h1,h2,h3,h4,h5,h6 {margin-bottom: 20px; color: #284B77;}
label {color: #284B77;}

html {font-size: 62.5%; /* = 10px -- now we can set rem font-sizes as multiples of 10 */}

/* everything - unless specified */
body {font-size: 1.6rem; font-family: 'Muli', sans-serif; color: #4A4A4A;}

/* navbar - all links */
.navbar a {font-size: 1.6rem; font-weight: 400;}

/* all body text page links */
.page .body-text a {color: #284B77; font-weight: bold;}

/* carousel headings and text */
.carousel-heading {font-size: 2.6rem; font-weight: 700; letter-spacing: 1px; color: #FFF;}

/* panel headings */
.panel-heading {font-size: 1.8rem; font-weight: 400;}

/* prices */
.price {font-size: 2.0rem; font-weight: 400; color: #000;}

/* social icons */
.social-icons {font-size: 2.0rem; font-weight: 400; color: #000;}