@charset "utf-8";

/* 

FR Site Global CSS
Local catalogue level
This is used to overide CSS form the main comined.css
This file is included on EU site only and is site-wide.

Moved to site local on 20/03/2017 as part of GB4 release

LATEST CHANGES:
ss18 wk12
16-04-2018 adding mobile footer Aid
*/

/* SEO text on all homepages */
.home-seo-footer {
    width: 98%;
    margin: 0 auto;
    text-align: center;
}
    .home-seo-footer h1 {
        font-size: 25px;
    }
        @media all and (max-width: 767px) {
            .home-seo-footer h1 {
                font-size: 18px;
            }
        }

    .home-seo-footer p {
        font-size: 16px;
        font-family: Lato-Light, "Lato", Arial, sans-serif;
        font-weight: 300;
        margin: 25px auto 35px;
        color: #333333;
        line-height: 26px;
    }

/* need to ascertain if this is now required -- it currently makes footer twice its height */
.footer .copyright-container {
    padding: 17px 0 87px;
}

/* -CC- 17-09-19 */
@media all and (min-width: 768px) {
    /* Remove sticky footer */
    .main-footer .sticky-footer.stuck {
        position: inherit;
        z-index: inherit;
    }
    /* Remove Hide / Show Bar */
    .sticky-footer .footer-header.width100 > .pull-left {
        display: none;
    }
}

/* Improve links above navigation -- store locator and login and country select */
.header .header-utility-section .utility-link,
.header .country-dropdown .dd-selection .dd {
    color: #999;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
}

/* -CC- Improve accessibility 18-02-19 */
.header .header-utility-section .utility-link {
    color: #525252;
}
.navigation-container .navbar .nav-main-links a {
    color: #595959;
}

/* Widen the gap between navigation links -- UK TBC */
.navigation-container .navbar .nav-main-links {
    padding: 11px 25px 0;
}

/* Make the flyout background colour darker */
.navbar-submenu-container .submenu-container .submenu-data .submenu-cols {
    background: rgba(0,0,0,0.90);
}

/* Letter spacing to navigation, service prop bar and text carousel to featured products headings on hp and dept pages */
.text-carousel .info,
.image-carousel .carousel-heading h2, 
.thoughts-achievements-container .heading-section h3,
.thoughts-achievements-container h1 {
    letter-spacing: 2px;
    font-family:Lato-regular, "Lato", Arial, sans-serif;   
}

.navigation-container .navbar .nav-main-links {
    letter-spacing: 2px;
}

    @media all and (max-width: 850px) {
       .text-carousel .info {
         letter-spacing: 1px;          
       }
   }

    @media all and (max-width: 450px) {
       .text-carousel .info {
         padding-top: 18px;          
       }
   }


/* Stop heading links on carousel from being blue */

.image-carousel .carousel-heading h2 a {
   color: #333333;
}


    /* Service prop adjustments to fit copy on smaller screens */
    @media all and (max-width: 415px) {
        .text-carousel .info {
            letter-spacing: 1px;
            font-size: 11px;
        }
    }


/* Fallback font for copy on banners & footer */

.transbox span,
.footer .footer-links a {
    font-family: Lato-regular, "Lato", Arial, sans-serif;
}


/* Hiding the logo that we can't use */

.footer .copyright-container .copyright img {
   display:none;
}

/* Make the links white in the hamburger menu */

@media (max-width: 991px) {
.hamburger-menu-container .menu .footer-container ul li a {
   color: #fff;
}
}

/* Widen the footer columns - need to add */
div.footer-links .links.width20,
div.footer-menu-header .menu-heading.width20 {
   width:25%;
}

/* -CC- 17-05-03 social media icon hover */
.hamburger-menu-container .menu .footer-container .social-media-icons a,
.footer .footer-content .footer-menu .social-media-icons a {
    position: relative;
    height: 20px;
    width: 20px;
}
.hamburger-menu-container .menu .footer-container .social-media-icons a:after,
.footer .footer-content .footer-menu .social-media-icons a:after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    height: 100%;
    width: 100%;
}

/* -CC- 17-05-03 this bit is needed due to .hamburger-menu-container images being different size */
.hamburger-menu-container .menu .footer-container .social-media-icons a:hover img,
.footer .footer-content .footer-menu .social-media-icons a:hover img {
    opacity: 0;
}
.hamburger-menu-container .menu .footer-container .social-media-icons a[title="Facebook"]:hover:after,
.footer .footer-content .footer-menu .social-media-icons a[title="Facebook"]:hover:after {
    background: url('https://s7g10.scene7.com/is/image/Pangaea2Build/IC_Facebook_Hover?$Original$');
    background-size: 100% auto;
}
.hamburger-menu-container .menu .footer-container .social-media-icons a[title="Twitter"]:hover:after,
.footer .footer-content .footer-menu .social-media-icons a[title="Twitter"]:hover:after {
    background: url('https://s7g10.scene7.com/is/image/Pangaea2Build/IC_Twitter_Hover?$Original$');
    background-size: 100% auto;
}
.hamburger-menu-container .menu .footer-container .social-media-icons a[title="Instagram"]:hover:after {
	background: url('https://s7g10.scene7.com/is/image/Pangaea2Build/IC_Instagram_Hover2?$Original$');
    background-size: 100% auto;
}
.footer .footer-content .footer-menu .social-media-icons a[title="Instagram"]:hover:after {
    background: url('https://s7g10.scene7.com/is/image/Pangaea2Build/IC_Instagram_Hover?$Original$');
    background-size: 100% auto;
}
.hamburger-menu-container .menu .footer-container .social-media-icons a[title="YouTube"]:hover:after,
.footer .footer-content .footer-menu .social-media-icons a[title="YouTube"]:hover:after {
    background: url('https://s7g10.scene7.com/is/image/Pangaea2Build/IC_Youtube_Hover?$Original$');
    background-size: 100% auto;
}

/* Change selectors default background and border colour , especially on prodcut page */
.box-selectors .box-elements.active, 
.box-selectors .box-elements:hover {
    background: #dbeffc;
    border-color: #0092ff;    
}

/* Hide the invalid voucher code on order confirmation */
.advertisement-container .voucher-box {
    display: none;
}

/* Hide the 'Latest goodies from the Clarks World' on order confirmation */

.pageLabel-orderConfirmation .advertisement-container {
    display: none;
}

/* Hide non-functioning instagram icon  */
.product-listing .social-sites-icons .a2a_button_instagram {
    display: none;
}

/* hide filters that come through on storelocator header -- changed to be more specific with Important on 29th December 
This is due to css being set inline with script
*/
/* When UK goes live these may need making more specific to EU sites only */
.navigation-container .store-locator-container .store-locator-modal .search-container .form-group .store-details {
	display: none!important;
}

/* Tidy storelocator layout and oversized copy in header area on different screens */ 

    @media all and (max-width: 1300px ) {
        /* html 5 placeholder changes - must be on seperate lines, cannot be bunched. See Aid if unsure */
        .navigation-container .store-locator-container .store-locator-modal .store-locater-box input::-webkit-input-placeholder { 
            font-size: 25px;
        } 
        .navigation-container .store-locator-container .store-locator-modal input.search-store::-moz-placeholder { 
            font-size: 25px;
        } 
        .navigation-container .store-locator-container .store-locator-modal input.search-store:-moz-placeholder { 
            font-size: 25px;
        }     
        .navigation-container .store-locator-container .store-locator-modal input.search-store:-ms-input-placeholder { 
            font-size: 25px;
        }  
    }
        @media all and (max-width: 1040px ) {
            /* html 5 placeholder changes - must be on seperate lines, cannot be bunched. See Aid if unsure */
            .navigation-container .store-locator-container .store-locator-modal .store-locater-box input::-webkit-input-placeholder { 
                font-size: 20px;
            } 
            .navigation-container .store-locator-container .store-locator-modal input.search-store::-moz-placeholder { 
                font-size: 20px;
            } 
            .navigation-container .store-locator-container .store-locator-modal input.search-store:-moz-placeholder { 
                font-size: 20px;
            }     
            .navigation-container .store-locator-container .store-locator-modal input.search-store:-ms-input-placeholder { 
                font-size: 20px;
            } 
        }   
            @media all and (min-width: 768px ) and (max-width: 880px ) {
                /* html 5 placeholder changes - must be on seperate lines, cannot be bunched. See Aid if unsure */
                .navigation-container .store-locator-container .store-locator-modal .store-locater-box input::-webkit-input-placeholder { 
                    font-size: 14px;
                } 
                .navigation-container .store-locator-container .store-locator-modal input.search-store::-moz-placeholder { 
                    font-size: 14px;
                } 
                .navigation-container .store-locator-container .store-locator-modal input.search-store:-moz-placeholder { 
                    font-size: 14px;
                }     
                .navigation-container .store-locator-container .store-locator-modal input.search-store:-ms-input-placeholder { 
                    font-size: 14px;
                } 
            } 

/* hide filters boys / girls heading on size guide pop-up updated 28thMarch so UK not affected */
.language-fr .size-guide-container .tabs-nav li[data-value="boys"],
.language-fr .size-guide-container .tabs-nav li[data-value="girls"] {
   display: none; 
}

/* Hide pinterest icon in footer and hamburger menu */
.footer .footer-content .footer-menu .social-media-icons a[title="Pinterest"],
.hamburger-menu-container .menu .footer-container .social-media-icons a[title="Pinterest"] {
    display: none; 
}

/*Size guide size adjustments for sizes that were incorrect on release */
#sizeGuideMensEUtoUK > div:nth-child(3) > div:nth-child(1) > div:nth-child(2),
#sizeGuideMensEUtoUK > div:nth-child(4) > div:nth-child(1) > div:nth-child(2),
#sizeGuideMensEUtoUK > div:nth-child(8) > div:nth-child(1) > div:nth-child(2),
#sizeGuideMensEUtoUK > div:nth-child(9) > div:nth-child(1) > div:nth-child(2),
#sizeGuideMensEUtoUK > div:nth-child(13) > div:nth-child(1) > div:nth-child(2),
#sizeGuideMensEUtoUK > div:nth-child(14) > div:nth-child(1) > div:nth-child(2),
#sizeGuideWomensEUtoUK > div:nth-child(3) > div:nth-child(1) > div:nth-child(2),
#sizeGuideWomensEUtoUK > div:nth-child(4) > div:nth-child(1) > div:nth-child(2),
#sizeGuideWomensEUtoUK > div:nth-child(7) > div:nth-child(1) > div:nth-child(2),
#sizeGuideWomensEUtoUK > div:nth-child(8) > div:nth-child(1) > div:nth-child(2),
#sizeGuideWomensEUtoUK > div:nth-child(12) > div:nth-child(1) > div:nth-child(2),
#sizeGuideWomensEUtoUK > div:nth-child(13) > div:nth-child(1) > div:nth-child(2),
#sizeGuideWomensEUtoUK > div:nth-child(17) > div:nth-child(1) > div:nth-child(2),
#sizeGuideWomensEUtoUK > div:nth-child(18) > div:nth-child(1) > div:nth-child(2) {
    color: rgba(255, 255, 255, 0);
    position: relative;
    left: 10px;
}
#sizeGuideMensEUtoUK > div > div:nth-child(1) > div:nth-child(2)::before,
#sizeGuideWomensEUtoUK > div > div:nth-child(1) > div:nth-child(2)::before {
    color: rgb(0, 0, 0);
}
#sizeGuideMensEUtoUK > div:nth-child(3) > div:nth-child(1) > div:nth-child(2)::before {
    content: "5.5";
}
#sizeGuideMensEUtoUK > div:nth-child(4) > div:nth-child(1) > div:nth-child(2)::before {
    content: "6.5";
}
#sizeGuideMensEUtoUK > div:nth-child(8) > div:nth-child(1) > div:nth-child(2)::before {
    content: "9.5";
}
#sizeGuideMensEUtoUK > div:nth-child(9) > div:nth-child(1) > div:nth-child(2)::before {
    content: "10.5";
}
#sizeGuideMensEUtoUK > div:nth-child(13) > div:nth-child(1) > div:nth-child(2)::before {
    content: "13.5";
}
#sizeGuideMensEUtoUK > div:nth-child(14) > div:nth-child(1) > div:nth-child(2)::before {
    content: "14.5";
}
/* womens changes */
#sizeGuideWomensEUtoUK > div:nth-child(3) > div:nth-child(1) > div:nth-child(2)::before {
    content: "2.5";
}
#sizeGuideWomensEUtoUK > div:nth-child(4) > div:nth-child(1) > div:nth-child(2)::before {
    content: "3.5";
}
#sizeGuideWomensEUtoUK > div:nth-child(7) > div:nth-child(1) > div:nth-child(2)::before {
    content: "5.5";
}
#sizeGuideWomensEUtoUK > div:nth-child(8) > div:nth-child(1) > div:nth-child(2)::before {
    content: "6.5";
}
#sizeGuideWomensEUtoUK > div:nth-child(12) > div:nth-child(1) > div:nth-child(2)::before {
    content: "9.5";
}
#sizeGuideWomensEUtoUK > div:nth-child(13) > div:nth-child(1) > div:nth-child(2)::before {
    content: "10.5";
}
#sizeGuideWomensEUtoUK > div:nth-child(17) > div:nth-child(1) > div:nth-child(2)::before {
    content: "13.5";
}
#sizeGuideWomensEUtoUK > div:nth-child(18) > div:nth-child(1) > div:nth-child(2)::before {
    content: "14.5";
}


/* Hide trusted shops logo in mobile hamburger nav and on locked down checkout footer  */
.hamburger-menu-container .menu .copyright img,
.need-help-footer .logos-img .logo-e-imgstyle,
footer img.js-image-responsive.logo-e-imgstyle {
	display: none;
}

/* change font-size / padding of long copy and newsletter info on service prop carousel on smaller screens */
@media all and (max-width: 800px) {
    div.text-carousel.js-desktop-text-carousel a[href="/newsletter"] {
        font-size: 14px;
    }    
}

@media all and (max-width: 480px) {
    div.text-carousel.js-mobile-text-carousel a[href="/newsletter"] {
        font-size: 11px;
    }    
}
    @media all and (max-width: 350px) {
        div.text-carousel.js-mobile-text-carousel a[href="/newsletter"] {
            padding-top: 13px;
        }    
    }

/* Hide the newsletter subscription links to boys, girls, babies and kids in account marketing preferences & burger menu */
.hamburger-menu-container .marketing-preferences-container div[data-preference="babies"],
.hamburger-menu-container .marketing-preferences-container div[data-preference="girls"],
.hamburger-menu-container .marketing-preferences-container div[data-preference="boys"],
.marketing-preferences-container div[data-preference="babies"],
.marketing-preferences-container div[data-preference="girls"],
.marketing-preferences-container div[data-preference="boys"],
.marketing-preferences-container div[data-preference="kids"] {
    display: none;
}

/* Hide broken terms and conditions */
.image-thumbline .terms-condition {
    display: none;
}

/* Changed to stop cookie policy button from going off background */   

#cookiePolicy.warning-message {
    position:fixed;
    bottom:0%;
}

@media only screen and (min-width: 991px) and (max-width: 1200px) {
    #cookiePolicy.warning-message {
        padding: 0 50px;
    }
}

/* Temp hide originals sale nav link on FR */
.language-fr .navbar-submenu-container .submenu-container #navbar-item-2-content.submenu-data .submenu-cols a[title="Soldes"] {
  display: none;
}

/* Hide Originals sale links for FR flyout when applicable */
/*
.language-fr .navbar-submenu-container .submenu-container .submenu-data .submenu-cols a[href="/Originals/Soldes/c/fr1?q=%3Arelevance%3Adepartment%3AWOMENS&text=#"],
.language-fr .navbar-submenu-container .submenu-container .submenu-data .submenu-cols a[href="/Originals/Soldes/c/fr1?q=%3Arelevance%3Adepartment%3AMENS&text=#"] {
    display:none;
}
*/

/* Reduce font size of serv prop copy on sites that need it */
@media all and (max-width: 780px) {
    .language-fr .text-carousel .info {
      font-size:14px;
   }

}
    @media all and (max-width: 414px) {
      .language-fr .text-carousel .info {
        font-size:10px;
      }
    }


/* make sale red in burger menu */
div#mobile-menu a[title~="Sale"],
div#mobile-menu a[title~="sale"],
div#mobile-menu a[title~="REBAJAS"],
div#mobile-menu a[title~="Rebajas"] {
   color:#d21e28;   
}


/* hide sale in burger menu, flyout and footer  */

/* Targets the first item in the Womens menu +++ This will become Mothers day 10/5/18 */
/* #navbar-item-0-content > div:nth-child(2) > div:nth-child(1) > ul:nth-child(1) > li:nth-child(1), */

/* Targets the first iten in the Mens menu +++ This was used to hide fathers day */
/* #navbar-item-1-content > div:nth-child(2) > div:nth-child(1) > ul:nth-child(1) > li:nth-child(1), */
div.links:nth-child(1) > ul:nth-child(1) > li:nth-child(1),
/* #EU\ REG\ Womens > div:nth-child(2) > ul:nth-child(1) > li:nth-child(3) > ul:nth-child(2) > li:nth-child(1), */ /* same as above for MOBILE */
/* #EU\ REG\ Mens > div:nth-child(2) > ul:nth-child(1) > li:nth-child(3) > ul:nth-child(2) > li:nth-child(1), */ /* same as above for MOBILE */
/* hides fathers day */
/* #navbar-item-1-content > div:nth-child(2) > div:nth-child(1) > ul:nth-child(1) > li:nth-child(2), */
/* hides fathers day */
/* #EU\ REG\ Mens > div:nth-child(2) > ul:nth-child(1) > li:nth-child(3) > ul:nth-child(2) > li:nth-child(2) */
/* last line removes empty li */
/* #navbar-item-0-content > div:nth-child(2) > div:nth-child(1) > ul:nth-child(1) > li:nth-child(2) */
{ 
   display:none;  
}

/* Fix pencil icon positioning on product page as it did overlap text */
.guest-checkout-delivery .order-summary-desktop-content .mobile-order-header a.plain-btn {
    width: 80px;
}

    @media only screen and (max-width: 992px) and (min-width: 768px) {
        .guest-checkout-delivery .order-summary-desktop-content .mobile-order-header a {
            top: 40px;
        }
    }

/* Hint for checkout register page around password criteria - 6th Feb 2017 Aid */
.page-checkout-login .form-group label[for="password"] {
    padding-right: 20px;    
}
    .page-checkout-login .form-group label[for="password"]::after {
        color: #333;
        font-size: 11px;
        font-style: italic;
        padding-right: 10px;
        padding-left: 5px;
    }
        .page-checkout-login.language-en .form-group label[for="password"]::after {
            content: "Please make sure your password contains a number and has a minimum of 8 characters";
        }
        .page-checkout-login.language-en_GB .form-group label[for="password"]::after {
            content: "Please make sure your password contains a number and has a minimum of 8 characters";
        }
        .page-checkout-login.language-de .form-group label[for="password"]::after {
            content: "Ihr Passwort muss mindestens 8 Zeichen enthalten, darin muss mindestens eine Zahl enthalten sein.";
        }
        .page-checkout-login.language-fr .form-group label[for="password"]::after {
            content: "Votre mot de passe doit contenir au moins un chiffre et 8 caractères.";
        }
        .page-checkout-login.language-nl .form-group label[for="password"]::after {
            content: "Wachtwoord moet uit ten minste 8 tekens bestaan en ten minste één nummer bevatten.";
        }
        .page-checkout-login.language-es .form-group label[for="password"]::after {
            content: "Las contraseñas deben tener al menos 8 caracteres de longitud y deben incluir al menos un número.";
        }

/* changed colour of Country drop down and Clarks copyright in left neav on mobile due to user feedback contrast issues - 6th Feb Aid*/
.hamburger-menu-container .menu .footer-container .dd,
.hamburger-menu-container .menu .copyright {
    color: #fff;
    text-align: left;
    font-size: 12px;
}
/* Added space between country flag and name in hamburger menu - 5th April DB */
@media (max-width: 991px) {
.hamburger-menu-container .menu .footer-container .dd {
   margin-left:10px;
}
}

/* Changed font size on delivery confirmation screen so users can see it easier. 7th Feb Aid */
@media screen and (min-width: 768px) {
.delivery-confirmation-container .confirmation-msg-section p {
    font-size: 16px;
}
    .delivery-confirmation-container .confirmation-msg-section p.confirmation-greeting-guest {
        font-size: 40px;
    }
}

/* Change service proposition copy to have underlines - UX change from MA */
.clarks-banner-container .text-carousel .info:hover {
    border-bottom: 1px #999 solid;    
}

/* Fix excessive spacing in flyout -- 14th feb Aid & Hannah T */
.navbar-submenu-container .submenu-container .submenu-data .submenu-title {
    padding: 15px 0% 15px 10%;
    min-height: 60px;
}
    .navbar-submenu-container .submenu-container .submenu-data .submenu-cols {
        padding: 10px 0 21px 10%;
    }


/* Hide grey guarantee logo on /login/checkout - change made by DB on 10/03/17 */

body .row.need-help-footer .logos-img .cmsimage a img[title~="Guarantee"] {
   display:none;
}
    body #mobile-Logos .logos-img .cmsimage a img[title~="Guarantee"] {
       display:none;
    }

/* Stops headings line breedtemaat overlapping adajcent headings AANTAL - Aid 17th March */
.pageLabel-multiStepCheckoutSummary.language-nl .order-summary-desktop-content .product-info-head {
    font-size: 13px;
} 

.pageLabel-multiStepCheckoutSummary.language-es .order-summary-desktop-content .product-info-head,
.pageLabel-multiStepCheckoutSummary.language-de .order-summary-desktop-content .product-info-head,
.pageLabel-multiStepCheckoutSummary.language-fr .order-summary-desktop-content .product-info-head {
    font-size: 14px;    
}

/* Make second add delivery address cta capitals for NL like the first - Aid 17th March  */
.pageLabel-multiStepCheckoutSummary.language-nl .guest-checkout-delivery .add-address-cta {
    text-transform: uppercase;
}
    /* Adding in missing required infomation after title field NL */
    .pageLabel-multiStepCheckoutSummary.language-nl .guest-checkout-delivery .form-group label#userTitle::after {
        content: " (verplicht veld)";
    }

/* Hide new delivery isntructions for eu sites only in checkout https://www.clarks.eu/checkout/multi/delivery-address/add  */
.language-fr #deliveryInstructionsDiv {
    display: none;
}


/* Tweaked as discussed with DE & Aid on release */
body .home-seo-footer p,
body #clarks-seo-change p {
    font-size: 12px;
    color: #666;
    font-family: Lato-regular, "lato", Arial, sans-serif;
}
    body .home-seo-footer h1,
    body #clarks-seo-change h1 {
        font-size: 15px;
        color: #666;
    }

/* -CC- 17-05-02 .cmsimage .transbox fix for home page / dept pages */
.pageLabel--homepage .seo-block .col-md-6.seo-img-wrap a,
.template-pages-department-departmentPage .cmsimage a {
    display: block;
}

.pageLabel--homepage .seo-block .cmsimage,
.pageLabel--homepage .seo-block .cmsimage a,
.pageLabel--homepage .seo-block .col-md-6.seo-img-wrap img,
.template-pages-department-departmentPage .cmsimage,
.template-pages-department-departmentPage .cmsimage a,
.template-pages-department-departmentPage .cmsimage img {
    float: left;
    width: 100%;
}
/* -CC- 17-05-02 .cmsimage .transbox fix for home page / dept pages
Note: this part can be more specific for country / dept page */
.pageLabel--homepage .seo-block .col-md-6.seo-img-wrap div.transbox,
.template-pages-department-departmentPage .cmsimage div.transbox {
    top: inherit;
    bottom: 0;
}

/* Fix text overlap on department focus blocks */
@media all and (max-width: 1100px) {
    .thoughts-achievements-container .surrounding-item-1 > img {
        padding-top: 0;
    }
}

/* Add white border to seperate all image banners, home and department pages */

@media all and (min-width: 651px) and (max-width: 767px) {
    .pageLabel--homepage .seo-block .col-md-6.seo-img-wrap,
    .template-pages-department-departmentPage .clarks-container .col-md-6 {
        position: relative;
        float: none!important;
        overflow: hidden;
        max-width: 650px;
        margin: 0 auto 15px;
    }
}

@media all and (min-width: 768px) and (max-width: 991px) {
    .pageLabel--homepage .seo-block .col-md-6.seo-img-wrap div.transbox,
    .template-pages-department-departmentPage .cmsimage div.transbox {
        padding: 10px 0;
        height: 40px;
    }
    .pageLabel--homepage .seo-block .col-md-6.seo-img-wrap div.transbox span,
    .template-pages-department-departmentPage .cmsimage div.transbox span {
        font-size: 16px;
    }
    .template-pages-department-departmentPage .dept-image-right {
        padding: 0 5px;
    }
}

@media all and (min-width: 768px) {
    .pageLabel--homepage .seo-block .col-md-6.seo-img-wrap,
    .template-pages-department-departmentPage .clarks-container .col-md-6 {
        width: calc(50% - 10px);
        margin: 5px;
    }
    .seo-block-header.pull-right {
        padding: 0;
        margin: 5px;
        float: left!important;
    }
    /* corrects video banner positioning on homepage */
    .pageLabel--homepage .seo-block-header.pull-right {
        padding: 0;
        margin: 5px;
        width: calc(50% - 10px);
        float: left!important;
    }
}

@media all and (min-width: 768px) {
    .pageLabel--homepage .seo-block-header.pull-right {
        padding-left: 5px;
    }
}

@media all and (max-width: 767px) {
    .seo-block .col-md-6.seo-img-wrap,
    .template-pages-department-departmentPage .clarks-container .col-md-6 {
        margin-bottom: 15px;
    }
}

/* Widen fields on 'edit details' page in 'my account' - 5th April DB */

.page-update-profile.pageType-ContentPage.template-pages-account-accountLayoutPage.pageLabel-update-profile .personal-details-container .contact-details-container .contact-details-form .title-dropdown {
    max-width: 250px;
}


.page-update-profile.pageType-ContentPage.template-pages-account-accountLayoutPage.pageLabel-update-profile .personal-details-container .additional-details-container .additional-details-content .dropdown-medium {
    max-width: 170px;
}

.page-update-profile.pageType-ContentPage.template-pages-account-accountLayoutPage.pageLabel-update-profile .personal-details-container .dd .ddTitleText {
    font-size: 9px;
}

.page-update-profile.pageType-ContentPage.template-pages-account-accountLayoutPage.pageLabel-update-profile .personal-details-container .additional-details-container .additional-details-content .dropdown-small {
    width: 145px;
}

.page-update-profile.pageType-ContentPage.template-pages-account-accountLayoutPage.pageLabel-update-profile .ddcommon ul li {
    font-size: 12px;
}

.page-update-profile.pageType-ContentPage.template-pages-account-accountLayoutPage.pageLabel-update-profile .dd .ddChild li img {
    padding: 0 0px 0 0;
    border: 1px solid;
}

.page-update-profile.pageType-ContentPage.template-pages-account-accountLayoutPage.pageLabel-update-profile .dd .ddChild li .ddlabel {
    padding-left: 8px;
}

.pageType-ContentPage.template-pages-account-accountRegistrationPage.pageLabel-register .form-group label,
.pageType-ContentPage.template-pages-account-accountLayoutPage.pageLabel-update-profile .form-group label, 
.pageType-ContentPage.template-pages-MultiStepCheckoutSummaryPageTemplate.pageLabel-multiStepCheckoutSummary .form-group label {
    color: #666666;
}

/* -CC- UK FAQ LHN:hover effect */
.faq-main-container .faq-container.clarks-container .navigation-section p a:hover {
    text-decoration: underline;
}

/* Hididng SMS option from contact us page - DB "SMS" covers ES, FR, DE & NL, "Text me" covers UK & EU */
.contact-us-container .contact-us-option[title="Text me"],
.contact-us-container .contact-us-option[title*="SMS"] {
    display: none;
}

/* UI fixes on product page 360 spin set - 12/04 Aid */
.s7spinviewer.s7mouseinput .s7spinbuttons .s7panleftbutton,
.s7spinviewer.s7mouseinput .s7spinbuttons .s7panrightbutton,
.s7spinviewer.s7mouseinput .s7zoomresetbutton,
.s7spinviewer.s7size_small.s7touchinput .s7zoomresetbutton,
.s7spinviewer.s7touchinput .s7zoomresetbutton {
    display: none;
}
    .s7spinviewer.s7mouseinput .s7zoominbutton,
    .s7spinviewer.s7mouseinput .s7zoomoutbutton,
    .s7spinviewer.s7mouseinput .s7fullscreenbutton[selected="false"][state="up"],
    .s7spinviewer.s7mouseinput .s7fullscreenbutton[selected="true"][state="up"],
    .s7spinviewer .s7fullscreenbutton[selected][state],
    .s7spinviewer.s7touchinput .s7zoomoutbutton,
    .s7spinviewer.s7touchinput .s7zoominbutton {
        background-color: #e2e2e2;
        border-radius: 25px;
    }
        .s7spinviewer .s7fullscreenbutton[selected][state]:hover,
        .s7spinviewer.s7mouseinput .s7zoominbutton:hover,
        .s7spinviewer.s7mouseinput .s7zoomoutbutton:hover {
            cursor: pointer;
        }

/* Sticky banner only CSS -- Aid 24th April */
@media all and (min-width: 992px) {
	#stickyBannerOne {
   display: none;  
	}   
}
    #stickyBannerOneContent {
		background-color: #c42030;
			width: 100%;
			text-align: center;

			/* flex box to align items vertical center */
			display: flex;
			align-items: center;
		}
			@media all and (max-width: 790px ) {
				#stickyBannerOneContent {
					justify-content: center;
				}
			}
				@media all and (max-width: 430px) {
					#stickyBannerOneContent {
						justify-content: flex-start;
					}
				}
			.stickyBannerOneDefaultStyle {
				clear: both;
				width: 100%;
				margin: 0 auto;
				height: auto;
				min-height: 50px;
				max-height: 60px;
				color: #fff;
				position: fixed;
				bottom: 0;
			}
				/* If sticky footer is active, pushes Sale sticky above */
				.sticky-footer.stuck ~ #stickyBannerOne .stickyBannerOneDefaultStyle {
					bottom: 56px;
				}

				/* Spliting content to flow alongside each other */
					.stickyBannerOneMessage {
						width: 46vw;
						text-align: right;
						padding-right: 30px;
					}
             .language-en_GB .stickyBannerOneMessage {
               width: 33vw;
             }
               @media all and (max-width: 340px ) {
                .language-en_GB .stickyBannerOneMessage {
                  width: 32vw;
                }
               }

						@media all and (max-width: 790px ) {
							.stickyBannerOneMessage {
								width: auto;
								text-align: center;
								padding-right: 0;
							}
						}

					/* sticky banner default anchor styling */
					#stickyBannerOneContent a {
					    font-weight: 400;
					    font-family: Lato-Regular, Lato, Arial;
					    font-size: 2.5em;
					    line-height: 1em;
					    text-align: center;
					    margin: 0 1em;
					    padding: 0;
					    color: #fff;
					    text-transform: uppercase;
					    text-decoration: none;
					}
           #stickyBannerOneContent .stickyBannerOneMessage a:hover {
               text-decoration: underline;
           }
						@media all and (max-width: 400px) {
							#stickyBannerOneContent .stickyBannerOneMessage a {
										font-size: 2em;
                    margin-right: 0.3em;
							}
						}

						/* Overide the banner links */
						#stickyBannerOneContent .stickyBannerOneCatLinks a {
							border: 1px solid #fff;
							background-color: #fff;
							padding: 6px 35px;
							font-size: 14px;
							border-radius: 3px;
							color: red;
						}
								@media all and (max-width: 680px) {
									#stickyBannerOneContent .stickyBannerOneCatLinks a {
										padding: 6px 10px;
										margin: 0 0.5em;
									}
								}

                 #stickyBannerOneContent .stickyBannerOneCatLinks a:hover {
                   border: 1px solid #fff;
                   background-color: transparent;
                   color: #fff;
                 }

									@media all and (max-width: 430px) {
										#stickyBannerOneContent .stickyBannerOneCatLinks a {
											text-align: left;
                       border: 0;
                       padding: 6px 1px;
                       background-color: transparent;
                       color: #fff;
                       text-decoration: underline;
										}
                       #stickyBannerOneContent .stickyBannerOneCatLinks a:hover {
                         border: 0;
                          text-decoration: underline;
                       }                     
									}

					#stickyBannerOneContent a.stickyClose {
						position: absolute;
						right: 5px;
						bottom: 9px;
						margin: 0;
             padding: 0 5px 10px 8px;
					}



/* UK Sticky banner - free del */
@media all and (min-width: 992px) {
	#stickyBannerOne {
   display: none;  
	}   
}

/* Style strip on bottom banner on department pages - make it grey with white copy */
.template-pages-department-departmentPage div.dept-image-right div.left-prod-name {
    height: 60px;
    position: absolute;
    width: 100%;
    color: #fff;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 17px 35px 15px 35px;
    top: inherit;
    bottom: 0.5%;
    left:0;
    border-top:none;
}

.template-pages-department-departmentPage div.dept-image-right div.left-prod-name h2 {
   color: #fff;
   text-transform: uppercase;
   font-size: 20px;
   margin-top:0;
    font-family: lato-regular, Lato, Arial, sans-serif;
}

@media (max-width: 767px) {
   .template-pages-department-departmentPage div.dept-image-right div.left-prod-name h2 {
      font-size: 16px;
      margin-bottom: 0;
   }
   .template-pages-department-departmentPage div.dept-image-right div.left-prod-name {
   	  height: auto;
      bottom:0;
   }   
}



   .template-pages-department-departmentPage .thoughts-achievements-container .separator {
      margin: 32px 15px 10px;
   }

@media (max-width: 1350px) {
   .template-pages-department-departmentPage .thoughts-achievements-container .separator {
      margin: 15px 15px 10px;
   }
}

   .template-pages-department-departmentPage .thoughts-achievements-container .surrounding-item-1>img {
    padding-top: 8%;
}

/* Stops copy from being cut off and makes more visible on ES only in footer newsletter signup placeholder until properties key issue is fixed */
.language-es .sticky-footer .sticky-email-box input.email-subscription::-moz-placeholder {
    font-size: 9px;
    color: #7e7e7e;
}

/* -CC- 17-05-10 tweaks */
@media all and (min-width: 768px) {
    .template-pages-department-departmentPage div.dept-image-right {
        padding-left: 5px;
    }
    .template-pages-department-departmentPage div.dept-image-right div.left-prod-name {
        left: 5px;
    }
}
@media all and (min-width: 768px) and (max-width: 991px) {
    .template-pages-department-departmentPage div.dept-image-right div.left-prod-name {
        height: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
        width: calc(100% - 10px);
    }
    .template-pages-department-departmentPage div.dept-image-right div.left-prod-name h2 {
        margin: 0;
        font-size: 16px;
    }
}
@media all and (min-width: 992px) {
    .template-pages-department-departmentPage div.dept-image-right div.left-prod-name {
        width: calc(100% - 5px);
    }
}

/*.template-pages-department-departmentPage.pageLabel--womens:not(.language-en_GB) .thoughts-achievements-container .heading-section.first-title,*/
/*.template-pages-department-departmentPage.pageLabel--mens:not(.language-en_GB) .thoughts-achievements-container .heading-section.first-title,*/
.template-pages-department-departmentPage.pageLabel--originals.language-en_GB .thoughts-achievements-container .heading-section.first-title {
    display:none;
}

.template-pages-department-departmentPage.pageLabel--womens .thoughts-achievements-container .grey-background,
.template-pages-department-departmentPage.pageLabel--mens .thoughts-achievements-container .grey-background,
.template-pages-department-departmentPage.pageLabel--originals.language-en_GB .thoughts-achievements-container .grey-background,
.template-pages-department-departmentPage.pageLabel--girls .thoughts-achievements-container .grey-background,
.template-pages-department-departmentPage.pageLabel--boys .thoughts-achievements-container .grey-background {
    display: none;
}


.template-pages-department-departmentPage.pageLabel--womens .thoughts-achievements-container .heading-section,
.template-pages-department-departmentPage.pageLabel--mens .thoughts-achievements-container .heading-section,
.template-pages-department-departmentPage.pageLabel--originals.language-en_GB .thoughts-achievements-container .heading-section,
.template-pages-department-departmentPage.pageLabel--kids .thoughts-achievements-container .heading-section,
.template-pages-department-departmentPage.pageLabel--girls .thoughts-achievements-container .heading-section,
.template-pages-department-departmentPage.pageLabel--boys .thoughts-achievements-container .heading-section {
    margin: 40px 0 30px;
}  

.template-pages-department-departmentPage.pageLabel--womens .seo-block-header.width100 h1,
.template-pages-department-departmentPage.pageLabel--mens .seo-block-header.width100 h1,
.template-pages-department-departmentPage.pageLabel--originals.language-en_GB .seo-block-header.width100 h1,
.template-pages-department-departmentPage.pageLabel--kids .seo-block-header.width100 h1,
.template-pages-department-departmentPage.pageLabel--girls .seo-block-header.width100 h1,
.template-pages-department-departmentPage.pageLabel--boys .seo-block-header.width100 h1 {
    margin-top: 25px;
}

@media (max-width: 991px) and (min-width: 767px) {
    .template-pages-department-departmentPage.pageLabel--womens .thoughts-achievements-container .heading-section,
    .template-pages-department-departmentPage.pageLabel--mens .thoughts-achievements-container .heading-section,
    .template-pages-department-departmentPage.pageLabel--originals.language-en_GB .thoughts-achievements-container .heading-section,
    .template-pages-department-departmentPage.pageLabel--kids .thoughts-achievements-container .heading-section,
	.template-pages-department-departmentPage.pageLabel--girls .thoughts-achievements-container .heading-section,
	.template-pages-department-departmentPage.pageLabel--boys  .thoughts-achievements-container .heading-section {
        margin: 25px 0 15px;
    }
}


@media (max-width: 767px) {
    .template-pages-department-departmentPage.pageLabel--womens .thoughts-achievements-container .heading-section,
    .template-pages-department-departmentPage.pageLabel--mens .thoughts-achievements-container .heading-section,
    .template-pages-department-departmentPage.pageLabel--originals.language-en_GB .thoughts-achievements-container .heading-section,
    .template-pages-department-departmentPage.pageLabel--kids .thoughts-achievements-container .heading-section {
        margin: 45px 0px 10px;
    }
    .template-pages-department-departmentPage.pageLabel--girls .thoughts-achievements-container .heading-section,
	.template-pages-department-departmentPage.pageLabel--boys .thoughts-achievements-container .heading-section {
        margin: 0 0 10px;
    }
    .template-pages-department-departmentPage.pageLabel--girls .thoughts-achievements-container .heading-section > h3,
	.template-pages-department-departmentPage.pageLabel--boys .thoughts-achievements-container .heading-section > h3 {
		displaY: block;
		float: left;
		width: 100%;
		text-align: center;
        margin: 20px 0 10px;
    }
}

    .template-pages-department-departmentPage.pageLabel--womens .thoughts-achievements-container .heading-section .seo-block-header,
    .template-pages-department-departmentPage.pageLabel--mens .thoughts-achievements-container .heading-section .seo-block-header,
    .template-pages-department-departmentPage.pageLabel--originals .thoughts-achievements-container .heading-section .seo-block-header,
    .template-pages-department-departmentPage.pageLabel--kids .thoughts-achievements-container .heading-section .seo-block-header,
    .template-pages-department-departmentPage.pageLabel--girls .thoughts-achievements-container .heading-section .seo-block-header,
    .template-pages-department-departmentPage.pageLabel--boys .thoughts-achievements-container .heading-section .seo-block-header {
        padding-bottom: 0px;       
}


/* Change to header to show which department you are on */
.pageLabel--womens #desktop-nav-bar .mega-menu-item a[href="/womens"],
.pageLabel--mens #desktop-nav-bar .mega-menu-item a[href="/mens"],
.pageLabel--originals #desktop-nav-bar .mega-menu-item a[href="/originals"],
.pageLabel--girls #desktop-nav-bar .mega-menu-item a[href="/girls"],
.pageLabel--boys #desktop-nav-bar .mega-menu-item a[href="/boys"],
.pageLabel--inspiration #desktop-nav-bar .mega-menu-item a[href="/inspiration"] {
  color: #0092ff;
  border-bottom: 2px solid #0092ff;
}


/* -DB- Add space around links in FLYOUT for tablet screens */

@media (max-width: 1024px) {
.navbar-submenu-container .submenu-container .submenu-data .submenu-cols li {
    padding: 11px 0;
}    
}

/* -DB- Add space around links in HAMBURGER */

@media (max-width: 991px) {
.hamburger-menu-container .menu ul .level3 li {
    padding: 11px 10px;
}   
}

/* -DB- Add space around links in FOOTER for tablet screens */

@media (max-width: 1024px) {
.footer .footer-content .footer-links ul li {
    padding: 10px 0;
}   
}

/* Removing cyprus as delivery option from all sites - including MVT test countryIso_q24  */
#countryIso.deliveryAddressCountry option[value="CY"],
.home-delivery-address-form #countrySelector option[value="CY"],
#countryIso_q24.deliveryAddressCountry option[value="CY"] {
  display: none;
}

/* -CC- 17-05-24 removing delivery instructions /checkout */
/* -CC- 18-02-20 removing delivery instructions /checkout on UK */
.language-en_GB #deliveryInstructionsDiv,
.page-multiStepCheckoutSummaryPage #deliveryInstructionsDiv {
    display: none;
}
 

/* Hiding test category in flyout for gloforms issue testing */
.navbar-submenu-container .submenu-container .submenu-data .submenu-cols a[href="/Originals/testFriday/c/o999"] {
  display: none;
}


/* -DB- Adjust height of grey box on 'choose-payment-method' page to fit copy */

.page-worldpayPaymentAndBillingCheckoutPage.pageType-WorldpayPaymentPage.template-pages-addon--worldpayb2caddon-pages-checkout-multi-worldpayChooseRedirectPaymentDetailsPage.language-es .review-order-container .delivery-status-container,
.page-worldpayPaymentAndBillingCheckoutPage.pageType-WorldpayPaymentPage.template-pages-addon--worldpayb2caddon-pages-checkout-multi-worldpayChooseRedirectPaymentDetailsPage.language-de .review-order-container .delivery-status-container,
.page-worldpayPaymentAndBillingCheckoutPage.pageType-WorldpayPaymentPage.template-pages-addon--worldpayb2caddon-pages-checkout-multi-worldpayChooseRedirectPaymentDetailsPage.language-nl .review-order-container .delivery-status-container,
.page-worldpayPaymentAndBillingCheckoutPage.pageType-WorldpayPaymentPage.template-pages-addon--worldpayb2caddon-pages-checkout-multi-worldpayChooseRedirectPaymentDetailsPage.language-en .review-order-container .delivery-status-container {
    height: auto;
}

/* -DB- reduce font size of 'BESTELLZUSAMMENFASSUNG' on 'delivery address' page for DE so it's not cut off */

.page-multiStepCheckoutSummaryPage.pageType-ContentPage.template-pages-MultiStepCheckoutSummaryPageTemplate.pageLabel-multiStepCheckoutSummary.language-de #delivery-details .order-summary-desktop-content .section-heading {
    font-size: 20px;    
}

/* -DB- Use wordwrap to stop headings from being hidden behind the edit icon/copy  on DE */

.page-worldpayPaymentAndBillingCheckoutPage.pageType-WorldpayPaymentPage.template-pages-addon--worldpayb2caddon-pages-checkout-multi-worldpayChooseRedirectPaymentDetailsPage.language-de .review-order-container .delivery-item-container .delivery-summary-container .delivery-address-container .text-container .subheading-text {
    word-wrap: break-word;
}

/* -DB- Stop half of copy being obscured in store locator for Safari */

@media (max-width: 767px) {
.navigation-container .store-locator-container .store-locator-modal input.search-store:placeholder-shown {
    font-size: 25px;
}
}


/* -DB- Reduce padding on grey strip for HP general banners on screens below 376px */

@media (max-width: 376px) {
    .pageType-ContentPage.template-pages-layout-landingLayout2Page.pageLabel--homepage div.cmsimage .transbox {
        padding: 7px 0;     
        }
    .pageType-ContentPage.template-pages-layout-landingLayout2Page.pageLabel--homepage div.cmsimage .transbox span {  
        font-size: 14px;    
        }
}

/* -DB- Reduce padding on grey strip for department general banners and inspired banner on screens below 376px */

@media (max-width: 376px) {
    .pageType-ContentPage.template-pages-department-departmentPage div.cmsimage .transbox {
        padding: 7px 0;     
        }
    .pageType-ContentPage.template-pages-department-departmentPage div.cmsimage .transbox span {  
        font-size: 14px;    
        }    
    .template-pages-department-departmentPage div.dept-image-right div.left-prod-name {
        padding: 8px 35px 8px 35px;    
    }
    .template-pages-department-departmentPage div.dept-image-right div.left-prod-name h2 {
        font-size:14px;
    }
}

/* -CC- 17-05-30 Marketing Preferences on checkout as a guest / registration pages */

.page-checkout-login .checkout-container.clarks-container .js-checkout-form-container #frmGuest .form-section.mobile-gutter .text-center.marketing-pref .preferences-button-container button,
.page-checkout-login .checkout-container.clarks-container .js-checkout-form-container #frmRegisterGuest .form-section .marketing-preferences-container .button.select-all-preferences,
.page-checkout-login .checkout-container.clarks-container .js-checkout-form-container #frmGuest .form-section.mobile-gutter .text-center.marketing-pref .preferences-button-container button:hover,
.page-checkout-login .checkout-container.clarks-container .js-checkout-form-container #frmRegisterGuest .form-section .marketing-preferences-container .button.select-all-preferences:hover {
    border: none;
    border-radius: 0;
    background: #fff;
    color: #666;
    border-bottom: 1px solid #888;
    font-weight: 300;
    font-family: Lato-Light, Lato;
    width: auto;
    margin: 2px auto;
    padding: 2px;
    min-width: 0;
    height: auto;
}
@media all and (max-width: 767px) {
    .page-checkout-login .checkout-container.clarks-container .js-checkout-form-container #frmGuest .form-section.mobile-gutter .text-center.marketing-pref .preferences-button-container button,
    .page-checkout-login .checkout-container.clarks-container .js-checkout-form-container #frmRegisterGuest .form-section .marketing-preferences-container .button.select-all-preferences,
    .page-checkout-login .checkout-container.clarks-container .js-checkout-form-container #frmGuest .form-section.mobile-gutter .text-center.marketing-pref .preferences-button-container button:hover,
    .page-checkout-login .checkout-container.clarks-container .js-checkout-form-container #frmRegisterGuest .form-section .marketing-preferences-container .button.select-all-preferences:hover {
    	margin: 10px auto 20px; 
    }
}

/* - DB - 2/6/17 - Hide colour swatches next to colour names in LHN on search results page as requested by ZM */

.pageType-ContentPage.template-pages-search-searchGridPage.pageLabel-search .category-listing-container .category-filters-container .category-filter-section .category-filter .category-child-filter-section .child-filter-list .child-filter-list-item .filter-color {
    display:none;
}

/* -CC- 17-05-24 text-carousel.css / image-carousel.css / shoe-rack-discovery.css arrows */

.text-carousel .slick-prev,
.image-carousel .slick-prev,
.image-carousel .slick-prev:hover,
.rack-discovery-container .discovery-show-carousel .slick-prev {
    background: url("https://s7g10.scene7.com/is/image/Pangaea2Build/IC-Desktop--Prev-Arrow-Icon--Dark?$PNGALPHA$") no-repeat center center;
}

.text-carousel .slick-next,
.image-carousel .slick-next,
.image-carousel .slick-next:hover,
.rack-discovery-container .discovery-show-carousel .slick-next {
    background: url("https://s7g10.scene7.com/is/image/Pangaea2Build/IC-Desktop--Next-Arrow-Icon--Dark?$PNGALPHA$") no-repeat center center;
}

@media all and (max-width: 767px) {
    .content-wrapper .text-carousel .slick-prev,
    .content-wrapper .image-carousel .slick-prev,
    .content-wrapper .image-carousel .slick-prev:hover {
        background: url("https://s7g10.scene7.com/is/image/Pangaea2Build/IC-Desktop--Prev-Arrow-Icon--Dark?$PNGALPHA$") no-repeat center center;
        background-size: 45% !important;
    }
    .content-wrapper .text-carousel .slick-next,
    .content-wrapper .image-carousel .slick-next,
    .content-wrapper .image-carousel .slick-next:hover {
        background: url("https://s7g10.scene7.com/is/image/Pangaea2Build/IC-Desktop--Next-Arrow-Icon--Dark?$PNGALPHA$") no-repeat center center;
        background-size: 45% !important;
    }
}

.rack-discovery-container .discovery-show-carousel .slick-prev,
.rack-discovery-container .discovery-show-carousel .slick-next {
    height: 25px;
    width: 28px;
    z-index: 999999;
}
@media (max-width: 767px) {
    .rack-discovery-container .discovery-show-carousel .slick-prev {
        left: -20px;
    }
    .rack-discovery-container .discovery-show-carousel .slick-next {
        right: -20px;
    }
}


/* - DB - 07/06/17 - Tidy up the styling of the shoe discovery on screens below 767px */

@media (max-width: 767px) {
.pageType-ContentPage.template-pages-department-departmentPage .department-content .product-details-container .main-info h2 {
    text-transform: uppercase;
    font-size: 25px;
    }
    
.pageType-ContentPage.template-pages-department-departmentPage .product-details-container .main-info p {
    font-size: 14px;
    line-height: 22px;
    }
    
.pageType-ContentPage.template-pages-department-departmentPage .product-details-container .main-info p {
    padding: 0 0px;
    }
    
.pageType-ContentPage.template-pages-department-departmentPage .button {
    min-width: auto;
    font-size: 12px;
    }
}

/* richrelevance reveal title on mobile */
#richrelevance-products h5.text-center.hidden-xs {
    display: block !important;
}




/* - DB 09/06/17 - Tidy up subscription area of hamburger */

.hamburger-subscribe-email-container.form-group input:placeholder-shown {
    font-size: 15px;
}

@media (max-width: 991px) {
.hamburger-menu-container .menu .footer-container .text-over-img {
    bottom: 0; 
    padding: 5px;
}
.hamburger-menu-container .btn-join-clarks {
    min-width: 220px;
    width: auto; 
}
.hamburger-menu-container button.select-all-preferences.js-select-all-marketing-preferences {
    min-width: 220px;
}
}

@media (max-width: 991px) and (min-width: 767px) {
.hamburger-menu-container .marketing-preferences-container .subscribe-email-img {
    width: 36%;
    margin: 10px;
    float: none;
}
}

@media (max-width: 767px) {
.hamburger-menu-container .marketing-preferences-container .subscribe-email-img {
    width: 23%;
    float:none;
    margin:5px;
}
}

@media (max-width: 600px) {
.hamburger-menu-container .menu .footer-container .text-over-img {
    padding: 0px;
}    
}

@media (max-width: 500px) {
.hamburger-menu-container .marketing-preferences-container .subscribe-email-img {
    width: 30%;
}
}


/* 
Hide size guide links due to new javascript adding better link to our static - Aid July 12 
This is done in global to stop system button coming in before our new one
*/
.pageType-ProductPage .size-option div[data-selection="Size"] div[data-url="/profile-size-guide"],
.pageType-ProductPage .help-icon.js-show-sizeguide[data-url="/profile-size-guide"] {
    display: none;
}

/* adding UX change. Underline to mini cart product title - Aid 17th Aug */
.navigation-container .mini-bag-container .mini-bag-cotent .mini-bag-item-list .bag-item-detail p {
    text-decoration: underline;
}

/* - DB 29-08-17 - Position payment icons in footer */

footer.main-footer .copyright .company-text address {
    margin-bottom: 0;
    color: #fff;
}

.hamburger-menu-container .menu .copyright .company-text .footer-payment,
footer.main-footer .copyright .company-text .footer-payment {
    float: right;
    text-align: center;
}

.hamburger-menu-container .menu .copyright .company-text .footer-payment a,
footer.main-footer .copyright .company-text .footer-payment a {
    font-family: Lato-Light, "Lato", Arial, sans-serif;
    text-decoration: underline;
}

footer.main-footer .copyright .company-text img.footer-pay {
    display: block;
    padding-left: 0;
    /*    float:right;*/
    width: auto;
}

.hamburger-menu-container .menu .copyright .company-text img.footer-pay {
    display: block;
    width: 100%;
    max-width: 525px;
    padding-left: 0;
}

@media (max-width: 991px) {
  .hamburger-menu-container .menu .copyright .company-text img.footer-pay {
      margin:0 auto;
      padding: 12px 0;    
  }  
  .hamburger-menu-container .menu .copyright .company-text .footer-payment,
  footer.main-footer .copyright .company-text .footer-payment {
      float: none; 
  } 

}

/* -CC- 17-09-14 Task 3 - Delivery Title field */
@media all and (min-width: 992px) {
    .pageLabel-multiStepCheckoutSummary #form-basic-details > div:nth-child(27) > div.basic-details > div.col-sm-12.col-md-2.nopadding {
        width: 41.66666667%;
    }
}


/* -DB- 17-09-15 - Darken the color of the 'filter' copy on cat pages and make sticky footer font lato-regular */

body.pageType-CategoryPage.template-pages-category-productGridPage .category-listing-container .category-listing-main-container.clarks-container .category-filters-container .filter-by-text {
    color:#333;
}


footer.main-footer .sticky-footer .footer-header {
    font-family:lato-regular, "Lato", Arial, sans-serif;
}

/* -SW- Add text under checkout options to discourage guest checkout if wanting to track */
.language-fr.page-checkout-login .guest-tab:nth-child(1)::after {
    content:"Attention : en commandant en tant qu’invité vous ne pourrez pas suivre la livraison de votre paquet. Il est nécessaire d’avoir un compte Clarks pour suivre votre coli."
}

/* A global class to make things red during Sale - SW */
.make-me-red {
    color: #d21e28!important;
}

/* Customer comments prod page star fix for all sites Aid */
@media all and (min-width: 767px) and (max-width: 1300px) {
  body .bv-cv2-cleanslate .bv-shared .bv-summary-bar-minimalist-horizontal .bv-write-container {
     display: block !important;
  }
}

/* Remove the Twitter logo for all sites - SW 16/10/17 */
.social-media-icons a[href="https://twitter.com/clarksshoes"], .a2a_button_twitter {
    display: none!important;
}

/* Aid 18th Oct 2017 remove additional flyout duplicates */
/* Hides 8th column && Hides 9th column */
/*
.language-fr #navbar-item-0-content > div:nth-child(2) > div:nth-child(3) > ul:nth-child(1) > li:nth-child(n+8),
.language-fr #navbar-item-3-content > div:nth-child(2) > div:nth-child(1) > ul:nth-child(1) > li:nth-child(n+9) {
  display: none;
}
*/


/* DB - 23-10-17 - Adding focus to the feature products carousel arrows on mobile */

.content-wrapper .image-carousel .slick-prev:focus,
.content-wrapper .image-carousel .slick-next:focus {
    outline: 2px solid #81B1E7;	    
}


/* DB - 23-10-17 - Fixing focus issue on 'inspired' product images on department pages */

.template-pages-department-departmentPage .thoughts-achievements-container .inspired-shoe-details a {
    display: inline-block;
     width: 100%; 
}

@media (max-width: 991px) {
.template-pages-department-departmentPage .thoughts-achievements-container .inspired-shoe-details a {
    display: block;
}
}


/* EU sites */
.fine-print:after {
    display: block;
    background: url(https://s7g10.scene7.com/is/image/Pangaea2Build/payment-icons-footer-all-eu-aw17-wk30c?wid=525) no-repeat;
    width: 100%;
    padding: 20px 0px;
    clear: both;
    height: 0px;
    content: "";
    max-width: 525px;
    float: left;
    margin-top: 20px;
    background-size:525px 45px;
}

@media (max-width:767px) {
.fine-print:after {
    margin-top: 0px;
    margin-bottom: 20px;
}   
}

@media (max-width:991px) {
.fine-print:after {
    background-size:400px 34px;
}
}

@media (max-width:430px) {
.fine-print:after {
    background-size:300px 26px;
}
}

.sticky-footer .footer-header .hide-bar-seperator {
    margin-left: 20px;
    margin-right: 20px;
    display: inline;
}

/* remove strip banner on relevant pages */
.template-pages-blankPage-blankPage.pageLabel--star-wars a.sale-promo-header-wk45 {
  display: none; 
}

/* Show all styles on UK */
body.language-en_GB #navbar-item-1-content > div.submenu-cols > div:nth-child(1) > ul > li:nth-child(2) {
    display: block;
}

/* -CC- 18-03-21 this bit is needed due to .hamburger-menu-container images being different size - If the order of <li> changes this will need editting */
.hamburger-menu-container .menu .footer-container .social-media-icons a:hover img,
.footer .footer-content .footer-menu .social-media-icons a:hover img {
    opacity: 0;
}
.social-media-icons a[href="https://www.facebook.com/ClarksShoesFR"]:hover:after {
    background: url('https://s7g10.scene7.com/is/image/Pangaea2Build/IC_Facebook_Hover?$Original$');
    background-size: 100% auto;
}
/* Remove the Twitter logo for all sites - SW 16/10/17 */
.social-media-icons a[href="https://twitter.com/clarksshoes"],
.a2a_button_twitter,
/* -CC- 18-03-21 Remove the pinterest logo for all sites */
.social-media-icons a[href="https://uk.pinterest.com/clarksschuhe"] {
    display: none!important;
}
.social-media-icons a[href="https://www.instagram.com/clarksshoes"]:hover:after {
    background: url('https://s7g10.scene7.com/is/image/Pangaea2Build/IC_Instagram_Hover?$Original$');
    background-size: 100% auto;
}
.social-media-icons a[href="https://www.youtube.com/user/clarksshoes"]:hover:after
{
    background: url('https://s7g10.scene7.com/is/image/Pangaea2Build/IC_Youtube_Hover?$Original$');
    background-size: 100% auto;
}

/* main.css line circa: 9213 */
.warning-message .btn-cookie-policy-agree:hover,
.warning-message .btn-cookie-policy-agree:focus{
	  color: #000;
}

   /* Webmaster footer copyright and cards  Aid - 16/04/2018 */
    #webmasterFooter .wmFooter {
      border-top: 1px solid #ccc;
      padding-bottom: 4vw;
      background-color: #F3F3F3;
    }
      #webmasterFooter .wmFooter > div {
        display: inline-block;
        width: 20%;
        margin: 2% auto 2% 10%;
        vertical-align: top;
      }

        #webmasterFooter .wmFooter > div h3 {
          color: #000;
          font-size: 1.1em;
          font-weight: 600;
        }

        #webmasterFooter .wmFooter > div a {
          color: #666666;
          display: block;
          line-height: 2em;
          font-size: 15px;
        }
          #webmasterFooter .wmFooter > div a:hover,
          #webmasterFooter .wmFooter > div a:focus {
            color: #0092ff;
            text-decoration: underline;
          }
            .wmFooterCards img {
              width: 96%; 
              max-width: 525px;
            }

    @media all and (max-width: 768px) {
      #webmasterFooter .wmFooter > div {
        width: 24%;
        margin: 2% auto 2% 5%;
      }

        #webmasterFooter .wmFooter > div h3 {
          font-size: 1em;
        }
    }
      @media all and (max-width: 690px) {
        #webmasterFooter .wmFooter {
          display: flex;
        }

          #webmasterFooter .wmFooter > div {
            margin: 2em auto;
          }
      }
        @media all and (max-width: 560px) {
          #webmasterFooter .wmFooter {
            flex-direction: column;
          }
            #webmasterFooter .wmFooter > div {
              width: 96vw;
              margin: 8vw 1vw 0 8vw;
            }
        }

    
    #webmasterFooter .copyrightAndCards {
      background: #333333;
    }

      #webmasterFooter .copyrightAndCards > div {
        display: inline-block;
        vertical-align: top;
        margin: 2vw;
      }
      #webmasterFooter .copyrightAndCards > div.wmFooterCopyright {
        text-align: left;
      }
      #webmasterFooter .copyrightAndCards > div.wmFooterCards {
        text-align: right;
      }
        #webmasterFooter .copyrightAndCards .wmFooterCopyright p {
          color: #999999;
          font-size: 12px;
          line-height: 1.1em;
          text-align: left;
        }

    @supports (display: flex) {
      #webmasterFooter .copyrightAndCards {
        display: flex;
      }

        @media all and (max-width: 600px) {
          #webmasterFooter .copyrightAndCards {
            flex-direction: column;
          }
            #webmasterFooter .copyrightAndCards .wmFooterCopyright p:first-child {
              margin-top: 5vw;
            }
        }
    }

    @media all and (min-width: 992px) {
      #webmasterFooter {
        display: none;
      }
    }
/* END Webmaster footer copyright and cards */

/* START - OVO HERO */
body .hp-hero-wk12-ovo {
    position: relative;
    display: block;
    max-width: 1500px;
    padding: 2% 0;
    margin: 0 auto 15px;
    background: #f9fafc;
    overflow: hidden;
}
body .hp-hero-wk12-ovo img {
    width: 100%;
    max-width: 100%;
}
body .hp-hero-wk12-ovo * {
    text-align: center;
    color: #a2927b;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: lato-regular, "lato", Arial, sans-serif;
}
body .hp-hero-wk12-ovo h3 {
    box-sizing: border-box;
    font-size: 23px;
    font-weight: 700;
}
body .hp-hero-wk12-ovo span {
    display: block;
}
body .hp-hero-wk12-ovo .ovo-text {
    padding: 10px 0;
    font-size: 22px;
    line-height: 1.5;
}
body .hp-hero-wk12-ovo .cta {
    width: calc(100% - 20px);
    max-width: 260px;
    margin: 3% auto;
    box-sizing: border-box;
    padding: 15px 5px;
    border: 1px solid #a2927b;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    clear: none;
    border-color: #a2927b;
    background: none;
    color: #a2927b;
}
body .hp-hero-wk12-ovo:focus .cta,
body .hp-hero-wk12-ovo .cta:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}
@media (max-width: 480px) {
    body .hp-hero-wk12-ovo .ovo-text {
        font-size: 14px;
    }
}
@media all and (max-width: 749px) {
    body .hp-hero-wk12-ovo > img {
        width: 200%;
        max-width: 200%;
        margin-left: -100%;
    }
    body .hp-hero-wk12-ovo .ovo-con {
        width: 90%;
        margin: 0 auto;
    }
    body .hp-hero-wk12-ovo .ovo-con img {
        margin: 0 auto;
    }  
}
@media all and (min-width: 750px) and (max-width: 849px) {
    body .hp-hero-wk12-ovo .ovo-text {
        font-size: 14px;
    }
}
@media all and (min-width: 850px) and (max-width: 991px) {
    body .hp-hero-wk12-ovo .ovo-text {
        font-size: 20px;
    }
}
@media all and (min-width: 750px) {
    body .hp-hero-wk12-ovo .ovo-con {
        position: absolute;
        top: 50%;
        left: 25%;
        transform: translate(-50%, -50%);
        width: 45%;
    }
}
/* END - OVO HERO */

/* Sale links to red inc header bar, slide and fly and footer */
#desktop-nav-bar a[href="/soldes-chaussures"],
.navbar-submenu-container .submenu-container .submenu-data .submenu-cols a[href*="Soldes"],
.navbar-submenu-container .submenu-container .submenu-data .submenu-cols a[href*="soldes"],
.hamburger-menu-container .menu ul li a[href="/soldes-chaussures"],
.hamburger-menu-container .menu ul .level3 li a[href*="Soldes"],
.hamburger-menu-container .menu ul .level3 li a[href*="soldes"],
.footer-links a[href="/soldes-chaussures"] {
  color: #fe1d23;
}

/* Hide header skinny on Hom and depts */
.pageLabel--homepage.language-fr #skinny-banner-header,
.template-pages-department-departmentPage.language-fr #skinny-banner-header {
	display: none;
}


/* GDPR properties tidy up - Aid 15/05/2018 */
/* GLobal footer messaging */
@media all and (min-width: 992px) {
  .sticky-footer .sticky-footer-container .get-data.emails-subscription .select-areas-text {
    font-size: 14px;
    margin: 0 auto 20px;
    max-width: 70%;
  }
}
/* Checkout login marketing preferences messaging */
@media all and (min-width: 768px) {
  .template-pages-CheckoutLoginPageTemplate .checkout-container .email-confirm-txt,
  .template-pages-CheckoutLoginPageTemplate .checkout-container .subscribe-email-text-container .guest-email-subscribe {
    font-size: 14px;
    max-width: 70%;
    margin: 2em auto 1em;
  }
}

/* This styles the h1 at the top of the department pages */
.template-pages-department-departmentPage div.identify-dept-name h1.depart-heading {
    text-align: center;
    font-family: lato-light, "Lato", Arial, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    margin: 15px auto 20px;   
    letter-spacing:2px;
}

@media all and (max-width: 736px) {
    .template-pages-department-departmentPage div.identify-dept-name h1.depart-heading {
        font-size: 18px;
    }   
}

/* FR Sale - Soldes Skinny Banner | Aid 26-06-2018 */
#skinny-banner-header {
    padding: 6px 5px;
    margin: 0 0 8px;
    background: #c42030;
    text-align: center;
    text-transform:  uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: baseline;
}
.content-wrapper .content-wrapper #skinny-banner-header {
    display: none;
}
#skinny-banner-header .cta-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-content: space-between;
    flex-grow: 2;
}
#skinny-banner-header .cta-box a {
    text-decoration: underline !important;
}
#skinny-banner-header p {
    max-width: none;
    padding: 0;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 2px;
}
#skinny-banner-header .cta-box p {
    font-size: 16px;
}
#skinny-banner-header div:first-child {
    flex-grow: 1;
}
#skinny-banner-header p,
#skinny-banner-header a {
    color: #fff;
    font-weight: 400;
}
#skinny-banner-header .slick-arrow::before {
    line-height: 0.5;
    font-size: 25px;
}
#skinny-banner-header .slick-arrow.slick-prev {
    z-index: 1;
    left: 5px;
    top: 42%;
}
#skinny-banner-header .slick-arrow.slick-next {
    right: 5px;
    top: 42%;
}
@media all and (min-width: 1070px) {
    #skinny-banner-header {
        padding: 6px 10%;
    }
}
@media all and (max-width: 470px) {
    #skinny-banner-header p {
        font-size: 4.2vw;
    }
    #skinny-banner-header .cta-box p {
        font-size: 3.5vw;
    }
}
@media all and (max-width: 375px) {
    #skinny-banner-header p {
        font-size: 3.9vw;
    }
    #skinny-banner-header .cta-box p {
        font-size: 3.2vw;
    }
}
/* @media all and (min-width: 814px) {
    #skinny-banner-header p {
        letter-spacing: 2px;
    }
} */
/* END EU Summer Skinny Banner | OB 25-05-2018 */

/* Slide banner button Aid 26/06/2018 */
#wmSlideBanner a {
  border: 1px solid #fff;
  padding: 0.5em 4em;
  background-color: #9f0606;
  color: #fff;
  font-size: 4vw;
  text-transform: uppercase;
}
@media all and (min-width: 400px) {
  #wmSlideBanner a {
    font-size: 1.2em;
  }
}
  .language-es #wmSlideBanner a {
    padding: 0.5em 4vw;
  }

  #wmSlideBanner a:hover,
  #wmSlideBanner a:focus {
    border: 1px solid #9f0606;
    background-color: #fff;
    color: #9f0606;
  }
  @media all and (max-width: 450px) {
    #wmSlideBanner a {
      padding: 0.5em 8vw;
      margin: 0.5em auto 0.5em;
    }
  }
  @media all and (max-width: 360px) {
    .language-es #wmSlideBanner a {
      padding: 0.5em 8vw;
      margin: 0.5em auto 0.5em;
    }
  }
/* END Slide banner button */