@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');


/* = Theme
----------------------------------------------------------------------------------------------------------------- */
body { color: #222; font-family: "Lato", sans-serif; }

/* = Typography
-------------------------- */
h1, h2, h3, h4, h5, h6 { color: #333; }
a { color: #027438; }
a:hover { color: #027438; }
hr { border-top: 1px solid #ccc; }
.highlight { color: #027438; }
.marked { color: #fff; background: #027438; }
.meta { color: #666; }

blockquote:before { color: #027438; }
blockquote p span:before { color: #027438; }

#mainContent p > a:not(.btn),
#mainContent .passwordReset  { color: #466c87; }
#mainContent p > a:not(.btn):hover,
#mainContent .passwordReset:hover { text-decoration: underline; }

/* = Buttons
--------------------------- */
.btn { color: #fff; border: 1px solid #027438; background: #027438; border-radius: 4px; }
input.btn { border-radius: 4px;}
.btnImpact { background: #fff; color: #027438; }

.btn:hover { color: #fff; background: #539569; border-color: #539569; }
.btnAccent { border-color: #466c87; background: #466c87; }

.coCCBtn, .coChequeBtn, .coPaypalBtn { background: #fff; border-radius: 4px; }
.coCCBtn:hover, .coChequeBtn:hover, .coPaypalBtn:hover { background: #539569; border-color: #539569; }
.coCCBtn .btn, .coChequeBtn .btn, .coPaypalBtn .btn { background: none; }

.coCCBtn:before { color: #027438; }
.coChequeBtn:before { color: #027438; }

.coCCBtn:hover:before,
.coChequeBtn:hover:before { color: #fff; }

.hamburger span { background: #027438; }
.hamburger span::before,
.hamburger span::after { background-color: #027438; }


input.text, 
textarea, 
select, 
input[type=text] { border-radius: 4px; font-family: "Lato", sans-serif;}



/* = Lists
-------------------------- */
.paging ul li a { color: #fff; background: #027438; }
.paging ul li a:hover { background: #454545; }
.paging ul li a.on { background: #080808; }

/* = Tables
-------------------------- */
th { border: 1px solid #888; background: #888; }
.rowItemStandout td { background: #a1c897; }

/* = Screen Messages
-------------------------- */
.msg { border-radius: 6px;}
.msgImp { color: #fff; background: #8ec3d9; }
.msgImp a { color: #fff; }
.msgError { color: #fff; background: #e84d54; }
.msgSuccess { color: #fff; background: #a1c897; }
.msgSuccess h3 { color: #fff; }
.msgSuccess a { color: #fff; }
.msgAssist { background-color: #fff0bc; }

/* = Tabs
--------------------------- */
.tabs ul li a { color: #222; }
.tabs ul li a:hover { color: #666; }
.tabs ul li a.on { color: #027438; }
.tabs ul li a:hover:after { background: #666; }
.tabs ul li a:after { background: #fff; }
.tabs ul li a.on:after,
.tabs ul li a.on:hover:after { background: #027438; }
.tabs .dropdownPrompt { background: #f7f7f7; border: 1px solid #ddd; color: #000; }
.tabs .dropdownPrompt:after { border-color: #444 transparent transparent transparent; }
.tabs .dropdown.showOptions { border: 1px solid #ddd; }
.tabs .dropdown.showOptions li a:hover { color: #027438; }
.tabs .dropdown.showOptions a.on,
.tabs .dropdown.showOptions a.on:hover { background-color: #027438; color: #fff; }

/* = Accordion
--------------------------- */
.accordion > h3 { color: #027438; border: 1px solid #027438; }
.accordion > h3:hover { background: #f3f3f3; border: 1px solid #027438; }
.accordion > h3.on { color: #fff; background: #027438; }

/* = Forms
----------------------------*/
.select:after { border-color: #444 transparent transparent transparent; }

.formList label:before,
.checkbox:before,
.check:before { border: 1px solid #ddd; }

.radList label.checked:after,
.formListRadio label.checked:after { background: #027438; }

.checkList label.checked:after,
.formList:not(.radList):not(.formListRadio) label.checked:after,
.checkbox.checked:after,
.check.checked:after { border: solid #027438; border-width: 0 2px 2px 0; }

/* = Framework > Header items
------------------------------- */
/*Replace logo, and change height to match exact logo height*/
.logo > a { background: url(/_img/CPM_logo.svg) no-repeat 0 50%; background-size: contain; height: 100px; }

.miniBasket .item:before { color: #027438; }
.miniBasket .btn { color: #027438; border-color: #027438; background: none; }
.miniBasket .btn:before { background: #539569; }
.miniBasket .btn:hover, .miniBasket .btn:focus, .miniBasket .btn:active { color: #fff; border-color: #539569; }

.no-csstransforms3d .miniBasket .btn:hover,
.no-csstransforms3d .miniBasket .btn:focus,
.no-csstransforms3d .miniBasket .btn:active { background: #539569; border-color: #539569; }

.header-actions .headBanner:last-child { margin-bottom: 0;}

@media screen and (min-width: 801px) {
    .logo-actions-wrap {
        padding: 25px 0;
        border-bottom: 2px dotted #047439;
    }
}

@media screen and (max-width: 800px) {
    .logo a { background-position: 50% 50%; margin: 0 auto; }
}

@media screen and (max-width: 620px) {
    .basket-geo-wrap .miniBasket { background: #f6f6f6; }
}




/* = Footer
----------------------------- */
#footer { border-top: 1px solid #027438; }

/* = Popup message
---------------------------- */
#popup .ClosePopup { background: #027438; }
#popup .ClosePopup:hover { background: #539569; }

/* = Menu
---------------------------- */

#nav ul li.liOn a { background: #027438; color: #fff; }
#nav ul li a:hover { background: #539569; color: #fff; }

#nav ul li.homeNav { position: relative;     }
#nav ul li.homeNav a:before { position: absolute;top: 50%;margin-top: -10px; content: '\e816';font-size: 22px;color: #027438;font-family: "esco";font-style: normal;font-weight: normal;speak: none;display: inline-block; } 
#nav ul li.homeNav.liOn a:before {color:#fff;}
#nav ul li.homeNav a span {visibility: hidden; }


@media screen and (min-width: 801px) {
    .main-nav-wrap {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 150px;
    }

    #nav { border-radius: 4px; overflow: hidden; background-color: transparent;}
    #nav ul li.homeNav a {width: 60px; } 

    #nav > ul { display: flex; gap:0 15px; }
    #nav > ul > li > a { border-radius: 4px;  background: #eff5f1; }

    .shopHotline { font-weight: 600; color:#027438; padding:10px 12px; border: 1px solid #c4d9cb;  border-radius: 4px; }
}

@media screen and (max-width: 800px) {
    .main-nav-wrap { background: #027438; }
    #nav { background: none; }
    #nav ul li { border-bottom: 1px solid rgba(255,255,255,0.125); }
    #nav ul li.homeNav a:before {  color: #fff; }

    .geoSelectMobile {     background: rgba(0,0,0,0.1);  border-top: 1px solid rgba(0,0,0,0.05); }
}

@media screen and (max-width: 600px) {
    .shopHotline { background: #d5e2d9; color: #027438; }
}

@media screen and (max-width: 340px) {
    #nav { background: none; }
}

/* =  Menu > submenu
-------------------------------- */
#subNav { background: #027438; }
#subNav ul li a { color: #fff; }

.submenuTrigger { color: #fff; background: #91ccc6; }
.submenuTrigger .hamburger span { background: #fff; }
.submenuTrigger .hamburger span:before, .submenuTrigger .hamburger span:after { background-color: #fff; }
.submenuTrigger .hamburger.is-active span { background: none; }

@media screen and (max-width: 800px) {
    #subNav { background: #d5e6e6; }
    #subNav ul li a { color: #027438; }
}

/* = Product list
--------------------------------*/
.productList ul li .price { color: #466c87; }

/* = Product view
--------------------------------*/
.prodView + * { padding-top: 30px;}

/* = Checkout proccess
----------------------------------------------------------------------------------------------------------------- */
.checkoutProgress li a { background: #d5e2d9; color: #027438;     border-radius: 0; }
.checkoutProgress li a:after { border-color: transparent transparent transparent #d5e2d9; }
.checkoutProgress li a:hover:after { border-color: transparent transparent transparent #539569; }
.checkoutProgress li a.btnDisabled:hover { background: #d5e2d9; color: #027438; }
.checkoutProgress li a.btnDisabled:hover:after { border-color: transparent transparent transparent #d5e2d9; }

.checkoutProgress .progressActive a,
.checkoutProgress .progressComplete a { background: #027438; color: #fff; }

.checkoutProgress .progressActive a:after,
.checkoutProgress .progressComplete a:after { border-color: transparent transparent transparent #027438; }

.checkoutProgress .progressActive a:hover:after,
.checkoutProgress .progressComplete a:hover:after { border-color: transparent transparent transparent #027438; }

@media screen and (max-width: 900px) {
    .checkoutProgress .progressActive:first-child a:after { border-color: #027438; }

    .checkoutProgress li.progressComplete:first-child a:after,
    .checkoutProgress li.progressComplete:first-child a:hover:after { border-color: transparent #027438 transparent transparent; }
}

/* = Captcha
----------------------------------------------------------------------------------------------------------------- */
.captcha-container { margin-bottom: 32px; }


/* = Custom form boxed
----------------------------------------------------------------------------------------------------------------- */
.boxed-form {
    margin: 40px 0;
    padding:40px;
    background: rgba(4, 116, 57, 0.075);
    border-radius: 6px;
}

.boxed-form h2 { 
    font-weight: 700;
    color: #027438;
    padding-bottom: 14px;
    margin-bottom: 25px;
    border-bottom: 2px dotted rgb(4, 116, 57,0.6);
}

.boxed-form .submit {margin-bottom: 10px;}

.boxed-form .questTypeSectionHeader { margin-bottom: 0;}
.boxed-form .questTypeSectionHeader, 
.boxed-form h2:not(:first-child) {
  margin-top: 30px;
}

.boxed-form input.text:focus, 
.boxed-form  textarea:focus, 
.boxed-form  select:focus { border-color: #027438;}

@media screen and (min-width: 801px) {
.boxed-form .submit  { margin-left: 25%;}
}

.address + .survey,
.address + .nested-survey,
.survey + .submit,
.address + .submit,
.nested-survey + .submit  { margin-top: 30px;}

@media screen and (max-width: 600px) {
    .boxed-form  { padding: 8% 6%; }
    .boxed-form h2 { font-size: 1.375em;}
}