@keyframes rotation {
    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }
}

.filter-radio > span { display: flex; width: 28px; height: 28px; border: 1px solid rgb(222, 222, 222); background-color: rgb(255, 255, 255); border-radius: 5px; font-size: 0.8em; color: rgb(74, 173, 148); justify-content: center; align-items: center; margin-right: 15px; }

.filter-radio input { display: none; }

.filter-radio > span i { opacity: 0; }

.filter-radio.selected > span i { opacity: 1; }

.filter-radio.selected > span.colour-check { border: 3px solid rgb(74, 173, 148); }

.filter-radio > span.colour-check i { line-height: normal; }

.filter-radio > span.colour-check { transition: all 0.2s ease 0s; border-radius: 100%; }

.filter-radio { display: flex; align-items: center; margin-top: 10px; cursor: pointer; font-size: 1.1em; line-height: normal; font-weight: 800; color: rgb(51, 51, 51); position: relative; }

.filter-radio .colour-spot { width: 25px; height: 25px; border-radius: 100%; box-shadow: rgba(0, 0, 0, 0.19) 0px 0px 4px 2px; }

.filter-radio.selected:hover > span i { opacity: 1; }

.filter-radio:hover > span.colour-check { border: 1px solid rgb(74, 173, 148); }

.slider-btn { height: 32px; width: 32px; background-color: rgb(247, 247, 247); display: flex; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid rgb(0, 0, 0); font-size: 2.5rem; cursor: pointer; transition: all 0.3s ease 0s; }

.slider-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: rgb(183, 183, 183) 0px 6px 2px 0px; }

@media screen and (min-width: 992px) {
    .filter-radio:hover > span i { opacity: 0.5; }
}

.btn:disabled { cursor: not-allowed; background-color: rgb(198, 198, 198) !important; }

.switch { display: flex; align-items: center; cursor: pointer; justify-content: space-between; }

.switch .slider { width: 44px; height: 23px; border-radius: 50px; background-color: rgb(255, 255, 255); position: relative; display: block; margin: 0px 10px; border: 1px solid rgb(222, 222, 222); }

.switch .slider::before { width: 50%; height: 100%; border-radius: 100%; content: ""; display: block; background-color: rgb(74, 173, 148); transform: scale(0.8); }

.switch .slider::before { left: 4px; right: auto; }

.switch.on .slider::before { transform: translateX(100%) scale(0.8); }

.switch:hover .slider::before { background-color: rgb(40, 53, 81); }

.switch .slidetext.left {font-weight: 900;}
.switch .slidetext.right {font-weight: 500;}
.switch.on .slidetext.left {font-weight: 500;}
.switch.on .slidetext.right {font-weight: 900;}

.lnk.green { color: rgb(74, 173, 148); }

.lnk.green:hover { color: rgb(40, 53, 81); }

.lnk.underl { text-decoration: underline; }

.btn { border: none; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 1.2em; padding: 0px 15px 0px; font-weight: 700; font-family: articulat-cf, sans-serif; border-radius: 50px; }

.btn.rect {border-radius: 3px;}

.btn.auto-w { width: max-content; padding: 0px 20px; }

.btn.sml { height: 35px; line-height: normal; padding: 0px 20px; }

.btn.md { height: 40px; font-weight: 500; }

.btn.white-hov:hover { background-color: rgb(255, 255, 255) !important; color: rgb(40, 53, 81) !important; }

.btn.sqr { border-radius: 10px; }

.btn.f-lg { font-size: 1.5rem; padding: 15px 45px; height: 60px; }

.btn.full { width: 100%; max-width: 100%; }

.btn.outline { background-color: transparent; border: 2px solid rgb(255, 255, 255); border-radius: 10px; color: rgb(255, 255, 255); }

.btn.green { background-color: rgb(74, 173, 148); color: rgb(255, 255, 255); }

.btn.green:hover, a:hover .btn.green, :hover > div > .child-btn.green { background-color: rgb(40, 53, 81); color: rgb(255, 255, 255); }

.btn.green.alt-hover:hover { color: rgb(255, 255, 255); background-color: rgb(52, 122, 104) !important; }

.btn.blue { background-color: rgb(40, 53, 81); color: rgb(255, 255, 255); }

.btn.blue:hover, a:hover .btn.blue, :hover .child-btn.blue { background-color: rgb(74, 173, 148); }

.btn.blue.alt-hover:hover { color: rgb(40, 53, 81); background-color: rgb(255, 255, 255) !important; }

.btn.blue.ghst { border: 1px solid rgb(40, 53, 81); background-color: rgb(255, 255, 255); color: rgb(40, 53, 81); }

.btn.blue.ghst:hover { background-color: rgb(40, 53, 81); color: #fff; }

.btn.delete { background-color: rgb(255, 0, 0); color: rgb(255, 255, 255); }

.btn.delete:hover, a:hover .btn.delete, :hover .child-btn.delete { background-color: rgb(204, 0, 0); }

.btn.delete.alt-hover:hover { color: rgb(204, 0, 0); background-color: rgb(255, 255, 255) !important; }

.btn.cont { max-width: fit-content !important; }

.btn.grey { background-color: rgb(158, 158, 158); color: rgb(255, 255, 255); }

.btn.grey:hover, a:hover .btn.grey { background-color: rgb(107, 107, 107); }

.btn.white { background-color: rgb(255, 255, 255); border: 1px solid rgb(74, 173, 148); }

.btn.white i { color: rgb(74, 173, 148); }

.btn.white:hover { background-color: rgb(74, 173, 148); color: rgb(255, 255, 255); }

.btn.white:hover i { color: rgb(255, 255, 255); }

.btn.white.alt { background-color: rgb(255, 255, 255); border: 1px solid rgb(40, 53, 81); color: rgb(40, 53, 81); }

.btn.white.alt i { color: rgb(40, 53, 81); }

.btn.white.alt:hover { background-color: rgb(40, 53, 81); color: rgb(255, 255, 255); }

.btn.white.alt:hover i { color: rgb(255, 255, 255); }

.btn.white.ghst { color: rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255); background-color: transparent; font-weight: 300; }

.btn.white.ghst:hover { background-color: rgb(255, 255, 255); color: rgb(40, 53, 81); }

.btn.white-hov a:hover { color: rgb(40, 53, 81) !important; }

.btn.white-hov:hover a { color: rgb(40, 53, 81) !important; }

.retbtn input[type="submit"] { max-width: 100%; background-color: rgb(74, 173, 148); color: rgb(255, 255, 255); font-weight: bold; }

.retbtn input[type="submit"]:hover { border: 1px solid rgb(0, 132, 61); }

.btn.green.register-trade { max-width: 380px; margin: 30px auto; font-size: 16px; padding: 9px; height: auto; }

.btn.green.register-trade a { color: rgb(255, 255, 255); }

.btn.lgtgreen.register-trade { max-width: 380px; margin: 30px auto; font-size: 16px; padding: 9px; height: auto; }

.btn.lgtgreen.register-trade a { color: rgb(255, 255, 255); }

.btn.white.ghost { background-color: transparent; border: 1px solid rgb(255, 255, 255); color: rgb(255, 255, 255); font-weight: 200; }

.btn.white.ghost:hover { background-color: rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255); color: rgb(40, 53, 81); }

.btn.black.ghost { background-color: transparent; border: 2px solid #283551; color: #283551; }

.btn.green.small { max-width: 250px; }

.btn.green.for { height: 40px !important; line-height: 40px !important; margin-top: 48px !important; }

.btn.lgtgreen { background-color: rgb(74, 173, 148); border-radius: 28px; color: rgb(255, 255, 255); font-weight: bold; font-family: articulat-cf, sans-serif; }

.btn.lgtgreen { height: 50px; line-height: 50px; margin-top: 0px; font-size: 1em; margin-left: 0%; opacity: 1; border-radius: 28px; width: 259px; }

.btn.lgtgreen.small { max-width: 250px; }

.btn.lgtgreen.for { height: 40px !important; line-height: 40px !important; margin-top: 48px !important; }

.bestsellbtn { width: 100%; background-color: rgb(74, 173, 148); color: rgb(255, 255, 255); font-weight: bold; text-align: center; font-size: 1.3em; padding: 5px 0px; display: flex; align-items: center; justify-content: center; min-height: 35px; }

#applepay-container { border-radius: 50px; overflow: hidden; }

.btn.paypal { background-color: #fff; height: 50px; line-height: 20px; color: rgb(51, 51, 51); border: 1px solid rgb(180, 180, 180); font-weight: 700; position: relative; }

.btn.paypal span { position: absolute; top: 10px; }

.btn.paypal:hover { box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 100px 100px inset; background-color: transparent !important; }

.btn.orange { background-color: rgb(74, 173, 148); border: 1px solid rgb(255, 255, 255); color: rgb(255, 255, 255); font-weight: bold; font-family: Roboto, sans-serif; }

.btn.orange:hover { border-color: rgb(74, 173, 148); color: rgb(74, 173, 148); background-color: rgb(255, 255, 255) !important; }

a.btn.delete, .btn.small.alice.delete { background-color: #e12c14; border: 1px solid rgb(233, 30, 99); }

a.btn.delete:hover, .btn.small.alice.delete:hover { background-color: #ff4116;  }

.btn.refer { border-radius: 0px 10px 10px 0px !important; max-width: fit-content !important; }

.btn.addr { border-radius: 3px; height: 45px; min-width: 115px; margin-left: 15px; }

.btn.disabled { background-color: rgb(193, 193, 193); color: rgb(51, 51, 51); cursor: auto !important; }

.btn i { margin-right: 15px; }

.btn.xtrapadd { padding: 0px 30px; }

.btn.loading { position: relative; color: transparent !important; }

.btn.loading::before { content: ""; width: 36px; height: 36px; border-width: 5px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) transparent; border-image: initial; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: 1s linear 0s infinite normal none running rotation; position: absolute; left: calc(50% - 18px); top: calc(50% - 18px); }

#discountform .btn { border-radius: 0px; }

.inline-link { cursor: pointer; }

.inline-link.blue { color: rgb(40, 53, 81); }

.inline-link.blue a { color: rgb(40, 53, 81); }

.inline-link.blue:hover { color: rgb(74, 173, 148); }

.inline-link.blue a:hover { color: rgb(74, 173, 148); }

.inline-link.green { color: rgb(74, 173, 148); }

.inline-link.green a { color: rgb(74, 173, 148); }

.inline-link.green:hover { color: rgb(40, 53, 81); }

.inline-link.green a:hover { color: rgb(40, 53, 81); }

.inline-link.green.white:hover { color: #FFF; }

.inline-link.underl { text-decoration: underline; }

.block-link { display: block; }

.block-link.green { color: rgb(74, 173, 148); }

.block-link.green a { color: rgb(74, 173, 148); }

.block-link.green:hover { color: rgb(40, 53, 81); }

.block-link.green a:hover { color: rgb(40, 53, 81); }

.qtybtns { text-align: center; display: flex; align-items: center; margin: 15px 0px; width: 100%; }

.qtybtns .quant { background-color: rgb(74, 173, 148); cursor: pointer; border-radius: 100%; height: 30px; min-height: 30px; text-align: center; width: 30px; min-width: 30px; color: rgb(255, 255, 255); font-size: 1.0rem; display: flex; align-items: center; justify-content: center; border: none !important; }

.qtybtns .quant span { height: 1px; display: block; line-height: 0px; }

.qtybtns .quant:hover { background-color: rgb(40, 53, 81); }

.qtybtns input { margin: 0px 10px; border: 1px solid rgb(40, 53, 81); border-radius: 3px; text-align: center; padding: 0px !important; width: 40px !important; height: 40px !important; }

.account-menu { margin-top: 30px; }

.account-menu a:not(.points-bar) { display: block; color: rgb(74, 173, 148); text-align: center; padding: 15px; border: 1px solid rgb(207, 207, 207); border-radius: 5px; margin-bottom: 20px; }

.account-menu a:hover { transform: translateY(-5px); box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px; color: rgb(40, 53, 81); }

.account-menu a i { font-size: 2em; }

.account-menu a strong { display: block; margin-top: 15px; font-size: 1.1em; }

.btn.w-content { width: fit-content; padding: 0pc 30px; min-width: 30px; }

p a { color: rgb(74, 173, 148); }

p a:hover { color: rgb(40, 53, 81); text-decoration: underline; }

.overlay-link { position: absolute; top: 0px; left: 0px; display: block; z-index: 15; cursor: pointer; width: 100%; height: 100%; }

.config-radios label{cursor: pointer; position: relative; text-align: center; justify-content: center; align-items: center; border-radius: 5px; display: flex; flex-direction: column; min-height: 75px; padding: 10px; border: 1px solid rgb(40, 53, 81);}
.config-radios label input{position: absolute; opacity: 0;}
.config-radios label .title{font-weight: 600; color: #545454; font-size: 1.2em; transition: .2s;}
.config-radios label .value{font-weight: 700; font-size: 0.9em; margin-top: 2px; color: #4aad94;}
.config-radios label.on {background-color: #fff; border: 1px solid rgb(74, 173, 148);}
.config-radios.printopt label.on {background-color: #f9fffd; border: 1px solid rgb(74, 173, 148);}
.config-radios label.on .title {font-weight: 700; color: rgb(40, 53, 81);}

.config-radios .special-numbers label { border: none; background-color: unset; font-weight: 700 !important; }
.config-radios .special-numbers label .title { font-size: 1.125rem; margin-top: 8px; }
.config-radios .special-numbers label .value { font-weight: 300; color: #283551; opacity: 0.67; font-size: 1rem; }
.config-radios .special-numbers label img { border-radius: 10px; border: 1px solid #283551; background-color: #FFF; }
.config-radios .special-numbers label.on { border: none; background-color: unset; }
.config-radios .special-numbers label.on .title { color: #4AAD94; }
.config-radios .special-numbers label.on img { border: 2px solid rgb(74, 173, 148); }



.btn.fnt-w-500 {font-weight: 500;}

@media screen and (max-width: 991px) and (min-width: 768px) {
    .btn.lgtgreen { height: 50px; line-height: 50px; margin-top: 12px; font-size: 0.6em; width: 259px; }

    .btn.paypal span { display: none; }

    .btn.paypal img { margin: 0px; }

}

@media screen and (max-width: 991px) {
    .filter-togg {cursor: pointer; font-size: 1.2em; display: flex; align-items: center; gap: 5px; min-height:50px;}
    .filter-togg span {color: rgb(40, 53, 81); font-weight: 800; line-height: 1;} 
    .filter-togg i {color: rgb(74, 173, 148); font-size: 1.2em;}
    .filter-togg:hover span{color: rgb(74, 173, 148);}
}

@media screen and (max-width: 767px) {
    .btn.lgtgreen { height: 16px; line-height: 16px; margin-top: 8px; font-size: 0.8em; }

}

@media screen and (max-width: 767px) {
    #competition .btn.f-lg { padding: 0px 10px; }
}

@media screen and (min-width: 600px) and (max-width: 767px), (min-width: 1230px) and (max-width: 1500px) {
    #competition .btn.f-lg { font-size: 1.2rem; }
}

@media screen and (max-width: 600px), (min-width: 1230px) and (max-width: 1500px) {
    #competition .btn.f-lg { display: flex; align-items: center; justify-content: center; height: 50px !important; padding: 0px 10px !important; }
}

@media screen and (min-width: 500px) {
    .filterbtn { width: 45%; }
}

@media screen and (max-width: 500px) {
    .btn.resp-h { height: 40px; }

    .sortby .switch { font-size: 0.9rem; }
}