h1,h2,h3,h4 {font-weight:500}
h1 {
  margin-bottom: 30px;
  font-size: 30px;
}

.section button {width: 100%;
line-height: 36px}
button.paypal:hover {
    background: #ffc439;
    border: 2px solid #ffc439;
  }
button.paypal svg{vertical-align: -7px;}



button.paypal.loading {
    background:#f4c657!important;
    color:#f4c657!important;
    border-color:#f4c657!important;
    height:43px
}
button.paypal.loading svg{
    display:none
}
button.paypal.loading:before {
    border-top-color: #f4c657;
}
.section.cart h3 {
    font-size: 20px;
    margin: 0 0 20px;
    position: relative;
}

a.button {
  font-size: 14px;
  text-decoration: underline;
  color: #666;
  padding: 4px 2px;
  transition:color .3s ease-out
}
a.button:hover {
  color: #222;
}
p a {
  text-decoration: underline;
}

header.cart {z-index: 5}

.cart {max-width:1260px;margin:0 auto;position: relative;}
.cart.co {max-width:1080px}

.nav.cart {top: 0px;border-bottom: 2px solid #222;width:100%;max-width:100%}
.nav.cart .logo{max-width: 180px;height:unset;margin:2px 0 0}
.nav.cart .logo svg {height: 53px;}
.nav.cart .menu {
    width: 150px;
    font-size: 16px;
    font-weight: 500;  line-height: 52px;
}
.nav.cart .menu svg {
    width: 18px;
    vertical-align: -1px;
    margin-right: 4px;
}
.nav.cart .menu.secure {
    margin: 0 16px 0 0;
}


.cart .details {
    width:calc(100% - 410px);
    margin-right:30px;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.cart ul.prods  {}
.cart .prods li {margin:16px 0;padding-top: 16px;border-top: 2px solid #f2f2f2;position: relative;}
.cart .prods li.olay {opacity: .9; pointer-events: none;}
.cart .prods li:last-of-type {padding-bottom: 16px;border-bottom: none;}
.cart .prods li .thumb{width:120px;margin-right:20px;display: inline-block;}
.cart .prods li .thumb.loader{position: absolute;left: -105px;top: 29px;}
.cart .prods li .desc{position: relative;width:calc(100% - 180px);display: inline-block;vertical-align: top;}
.cart .prods li .desc p{margin:4px 0;width:auto}
.cart .prods li .desc .product-name, .details li .desc .product-subtotal{font-size: 16px;font-weight: 600;width: calc(100% - 100px);top:0}
.details li .desc .product-subtotal{position: absolute;right: 0;}
.cart .prods .note .qty {flex-grow: 20}
.cart .prods .note {
    display: flex;
    gap:24px
}
.cart .prods .note a{
    color: #666;
    text-decoration: none;
    flex-grow: 1;
    font-size: 12px;
    text-align: right;
}
.cart .prods .note a svg{
    width: 14px;
    fill: currentColor;
    vertical-align: -2px;
    margin: 0 4px 0 0;
}
.cart .prods .note a:hover{
    color: #222;
}
.cart .prods .note a:hover svg{
    fill: #222;
}
.cart .prods .note .qty a{
    font-size: 16px;
    margin: 0;
    font-weight: bold;
    border-radius: 50%;
    height: 18px;
    width: 18px;
    display: inline-block;
    text-align: center;
    line-height: 15px;
    background: #f5f5f5;
}
.cart .prods .note .qty input{
    border: 0;
  width: 29px;
  text-align: center;
  padding: 0;
  appearance: textfield;
}
input::-webkit-inner-spin-button {
    display: none;
  }

.prods .rowmsg {
    background: #fff;
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    position: absolute;
    top: 0;
    z-index: 9;
    padding: 24px;
    text-align: center;
}
.prods .rowmsg p{
    margin: 0 0 16px;
}
.prods .rowmsg div{
   display: flex;
   gap: 12px;
   justify-content: center;
}
.prods .rowmsg button{
   max-width: 240px;
}

.cart .notes {
    width:380px;
    display: inline-block;
    vertical-align: top;
    position: sticky;
    top:112px;
    transition:top .3s ease
}
.header-up .notes {top:67px}
.cart .box {
  position: relative;
  border:2px solid #666;
  padding: 16px 24px 4px;
  overflow: hidden;
}
.cart .box p{
  position: relative;
  margin: 12px 0
}
.cart .box p.bold{
  font-size: 16px;
  padding: 12px 0 2px;
  border-top: 1px solid #ddd;
  margin-top: 12px;
}

.cart .secure{
  margin-top:20px;
  text-align: center;
}

.cart .box:not(.mob2) .cta.co {margin-top: 20px}
.cart .box:not(.mob2) .cta.paypal {margin-bottom: 24px}

.cart .or {
    text-align: center;
    padding: 8px;
}

.cart.co .notes {
    top:20px;
}
.cart.co .prods li {
    margin: 10px 0;
    padding-top: 12px;
    border-top: 2px solid #f2f2f2;
}
.cart.co .prods li .desc{width:calc(100% - 88px);}
.cart.co .prods li .thumb{width:64px;margin-right:12px;}
.cart.co .prods li .thumb.loader{position: relative;left: unset;top: unset}
.cart.co .prods li .desc p{line-height:24px; margin:0}
.cart.co .prods li .desc .product-name{font-size: 14px;font-weight:unset;width:unset}
.cart.co .prods li .desc .product-details, .cart .prods li .product-price{color:#444;font-size: 13px}
.cart.co .product-price span{margin-left:6px}

.co .show {line-height:unset;font-size:unset;text-align:unset}
.co input {width:calc(100% - 14px)}
.co input:focus{border-color:#aaa}
.co select{
    font-size: 14px;
    line-height: 42px;
    font-family:"HelveticaNeue", Helvetica, Arial, sans-serif;!important;
    padding: 11px 12px;
    margin: 0;
    border:1px solid #666;
    width:100%;
    font-weight: 500;
    background: #fff
}
.co .selop {
    font-size: 14px;
    font-family:"HelveticaNeue", Helvetica, Arial, sans-serif;!important
}
.co h3 .note {
    text-transform: none;
    font-weight: 400;
    right: 20px;
    font-size: 14px
}
.co h3 .note a{
    text-decoration:none
}
.co h3 .note a:hover{
    text-decoration:none
}
.co .sidenote {overflow-y: auto;max-height: calc(100% - 110px);}
.co .sidenote .note.l{display:none}
.co .thin{
    display:none;
    position:relative
}
.co .sidenote .thin .thumb{
    position: relative;
    width: 60px;
    line-height:0;
    display:inline-block
}
.co .sidenote .thin .thumb img{
    width: 60px
}
.co .sidenote .thin .inf{
    display: inline-block;
    padding-left: 20px;
    font-size: 22px;
    font-weight: 500;
    padding-top: 15px;
    line-height: 24px;
}
.co .sidenote .thin .inf .note {
    display:block
}
.co .sidenote .thin .inf .note a{
    font-size:15px;
    color:#808080;
    font-weight:400;
    text-decoration:none
}
.co .sidenote .thin .inf .note a:hover{
    text-decoration:underline
}
.co .sidenote .thin .total {
    display: inline-block;
    text-align: right;
    font-size: 21px;
    line-height: 78px;
    font-weight: 500;
    margin-right: 10px;
}
.co #summary-area {
	margin-top: 14px;
}
.co #summary-area .radioarea {padding: 12px 0 0px;border:none;
border-top: 1px solid #ddd;}
.co #summary-area .radiobox {display: block;line-height: 30px;margin: 0 0 6px;}

.co .step{
	border: 2px solid #40403a;
	border-radius: 36px;
	font-size: 18px;
	vertical-align: 3px;
	margin-right: 20px;
	width: 28px;
	display: inline-block;
	text-align: center;
	height: 28px;
	line-height: 28px;
	font-weight: 500;
    font-family:"HelveticaNeue", Helvetica, Arial, sans-serif!important
}
.co .form {border:none;padding:0;margin:10px 0 0}
.co .form div{position: relative;}
.co .form button{width:240px;margin:20px 0}
.co .form h2{margin:0}
.co .form label {
    display:block;
    margin:16px 0 8px;
    font-weight: 600
}
.co .form input, .form textarea {
    line-height: 26px
}
.co .form textarea {
    line-height:32px;
    padding:8px 12px;
    height:160px
}
.co .form .errmsg {
    color:#b00;
    margin:6px 0 0;
    display:none
}
.co .form .error .errmsg{
    display:block
}
.co .form .error .underinput {
  top: -2px;
  position: relative;
  display: block;
  bottom: unset;
}
.co .form .button.cta {
    margin:30px 0 20px
}
.errmsg {
    margin-left:70px
}
.co .edit {
    font-size:14px;
    border:none
    padding:4px 2px;
    top:12px;
    color:#666;
    text-decoration:underline;
    display:none;
    transition:color .3s ease-out
}
.co .edit:hover{
  color:#222
}
.co hr {
  border: none;
  border-top: 1px solid #ddd;
  padding-top: 16px;
  margin-top: 24px;
}
.co .secTitle{
    position:relative
}
.co .secTitle h2{
    display: inline-block;
    width:200px
}
.co .secReview {
    display: inline-block;
    vertical-align:top;
    width: calc(100% - 250px);
    display:none;
    overflow:hidden;
    margin-top: 8px;
}
.co .secReview p{
    margin:0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.co .success {cursor:pointer}
.co .success .edit {display:block}
.co .success.on .edit {display:none}
.co .success .secReview {display:inline-block;
    -webkit-transition:max-height .3s ease-in-out;
    -moz-transition:max-height .3s ease-in-out;
    -o-transition:max-height .3s ease-in-out;
    transition:max-height .3s ease-in-out;
    max-height:500px}
.co .success.on .secReview {display:inline-block;max-height:0;
    -webkit-transition:max-height .3s ease-in-out;
    -moz-transition:max-height .3s ease-in-out;
    -o-transition:max-height .3s ease-in-out;
    transition:max-height .3s ease-in-out}
.co .success .step{color:#fff}
.co .success .step:after{
    content:"";
    position:absolute;
    left:13px;
    top:9px;
    width:5px;
    height:12px;
    border:solid #000;
    border-width:0 2px 2px 0;
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg)
}
.co .sec {
    max-width: 560px;
    padding-left: 54px;
    max-height:950px;
    overflow:hidden;
    -webkit-transition:max-height .3s ease-in-out;
    -moz-transition:max-height .3s ease-in-out;
    -o-transition:max-height .3s ease-in-out;
    transition:max-height .3s ease-in-out;
}
.co .sec.closed {
    max-height:0;
    -webkit-transition:max-height .3s ease-in-out;
    -moz-transition:max-height .3s ease-in-out;
    -o-transition:max-height .3s ease-in-out;
    transition:max-height .3s ease-in-out
}
.co .sec .two {
    width:calc(50% - 10px);
    display: inline-block;
    vertical-align: top;
}
.co .sec .two.first{
    margin-right:20px
}
.co .button.cta {
	display: inline-block;
	width:200px
}
.co .form .payicons {position: absolute;right: 0;top: -7px;}
.co .payicons svg {height:47px;width:56px}
.co .paymethod{
    border: 1px solid #e5e5e5;
    border-top:none;
    padding:10px;
    background:#f5f5f5
}
.co .paymethod.selected{
    color:#2e2e2e!important;
    background:#fff!important
}
.co .paymethod:first-of-type{
    border: 1px solid #e5e5e5;
    margin-top:10px
}
.form .paymethod label.radiobox {margin:0;font-weight:500}
.co .paymethod .trustMark {
    height:22px;
    margin:-5px 0;
    width:100%
}
.co .paymethodinner {
    overflow:hidden;
    max-height:0;
    -webkit-transition:max-height .3s ease-in-out;
    -moz-transition:max-height .3s ease-in-out;
    -o-transition:max-height .3s ease-in-out;
    transition:max-height .3s ease-in-out
}
.co .selected .paymethodinner {
    margin: 0 auto 16px;
    width: calc(100% - 22px);
    max-height:500px;
    -webkit-transition:max-height .3s ease-in-out;
    -moz-transition:max-height .3s ease-in-out;
    -o-transition:max-height .3s ease-in-out;
    transition:max-height .3s ease-in-out
}
.co .inputa {width: 100%;}
.co .inputb {
    width: calc(50% - 10px);
    display: inline-block;
    vertical-align: top
}
.co .inputb.first{margin-right:20px}
.co .input {
    border:1px solid #666;
    padding: 13px 12px 10px;
    margin: 0;
    width:calc(100% - 30px)
}
.co.footer{
    border-top:1px solid #e5e5e5;
    background:#fff;
    padding-top:20px
}

/*.co.rev .details {width:calc(100% - 440px)}
.co.rev .notes {width:400px}
.co.rev .sidenote {width:calc(100% - 42px);margin-bottom:24px;vertical-align:top}
.co.rev .sidenote:first-child{margin-top:10px}
.co.rev .sidenote.two{width:calc(50% - 54px);display:inline-block}
.co.rev .sidenote.two:nth-child(3){margin-left:24px}
.co.rev .sidenote.two h3{margin-bottom:10px}
.co.rev .sidenote p{margin:0}
.co.rev .button.cta{width:calc(100%  - 20px)}
.co.rev p.bold {margin-top:10px}
.co.rev .desc {width:calc(100% - 120px);line-height:30px}
.co.rev .item:last-child {border:none}*/
.co.rev .box {border:1px solid #ddd;margin-bottom:10px;vertical-align: top}
.co.rev .box h3{margin: 0 0 10px;}
.co.rev #summary-area {margin-top: 0;}
.co.rev .box.two {width:calc(50% - 55px);display: inline-block}
.co.rev .details .box:nth-child(2) {margin-right:10px;}
.co.rev .box li .desc {line-height:24px;}
.co.rev .paynote {margin-top:20px}
.co .paynote {margin:0;font-size:13px; color:#808080}
.co .paynote a{color:#808080}
.co .paynote a:hover {color:#40403a}


input, select, .checkbox, .radiobox{
    -webkit-transition:border-color .2s ease-in-out;
    -moz-transition:border-color .2s ease-in-out;
    -o-transition:border-color .2s ease-in-out;
    transition:border-color .2s ease-in-out}
input:focus, .input:focus, .focus .input, select:focus{
    border-color:#aaa;
    -webkit-transition:border-color .2s ease-in-out;
    -moz-transition:border-color .2s ease-in-out;
    -o-transition:border-color .2s ease-in-out;
    transition:border-color .2s ease-in-out}
    .co .form label.checkbox {font-weight: 500;
line-height: 26px;}
.button-function:focus,.options a,a{
    outline:0
}

.checkmark:after,.radiobutton:after,.tooltipContent:after{
    content:""
}
.checkbox{
    position:relative;
    padding:3px 0 0 35px;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.checkbox input{
    position:absolute;
    opacity:0;
    cursor:pointer
}
.checkmark{
    position:absolute;
    top:5px;
    left:0;
    height:22px;
    width:22px;
    background-color:#fff;
    border: 1px solid #666;
}
.checkbox:hover input~.checkmark{
    border-color:#aaa;
    -webkit-transition:border-color .2s ease-in-out;
    -moz-transition:border-color .2s ease-in-out;
    -o-transition:border-color .2s ease-in-out;
    transition:border-color .2s ease-in-out
}
.checkbox input~.checkmark{
    -webkit-transition:border-color .2s ease-in-out;
    -moz-transition:border-color .2s ease-in-out;
    -o-transition:border-color .2s ease-in-out;
    transition:border-color .2s ease-in-out
}
.checkmark:after{
    position:absolute;
    display:none
}
.checkbox input:checked~.checkmark:after,.radiobutton{
   display:block
}
.checkmark:after{
    left:7px;
    top:2px;
    width:6px;
    height:14px;
    border:solid #222;
    border-width:0 2px 2px 0;
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg)
}
.radioarea {
    padding:10px 10px 2px;
    border:1px solid #ddd
}
.radiobox{
    position:relative;
    padding-left:35px;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.radiobox input{
    position:absolute;
    opacity:0
}
.form label.radiobox{
    margin:0 0 6px;
    line-height:30px
}
.radiobutton{
    position:absolute;
    top:4px;
    left:0;
    height:22px;
    width:22px;
    background-color:#fff;
    border:1px solid #d5d5d5;
    border-radius:50%
}
#deliveryArea .radiobutton{
    top:14px;
}
.radiobox input~.radiobutton{
    -webkit-transition:border-color .2s ease-in-out;
    -moz-transition:border-color .2s ease-in-out;
    -o-transition:border-color .2s ease-in-out;
    transition:border-color .2s ease-in-out
}
.radiobox:hover input~.radiobutton{
    background-color:#F9F6F3;
    border-color:#aaa;
    -webkit-transition:border-color .2s ease-in-out;
    -moz-transition:border-color .2s ease-in-out;
    -o-transition:border-color .2s ease-in-out;
    transition:border-color .2s ease-in-out
}
.radiobox input:checked~.radiobutton{
    background:#fff;
    border-color:#ccc
}
.radiobutton:after{
    position:absolute;
    display:none
}
.radiobox input:checked~.radiobutton:after{
    display:block
}
.radiobox .radiobutton:after{
    top:4px;
    left:4px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#222
}
.radiobox .note {
    display: block;
    color: #666;
    margin-top:-4px;
    font-weight: 500;
}


.moreinfo{
    vertical-align:top;
    position:absolute;
    margin-left: 4px
}
.moreinfo svg {
    height:20px;
    width:20px;
    fill:#808080;
    vertical-align:top
}
.moreinfo:hover{
}
.moreinfo .tooltip{
    bottom:calc(100% + 9px)
}
.moreinfo:hover .tooltip{
    opacity:1
}


.co a:hover .tooltip{
    visibility:visible;
    -webkit-transition:opacity .3s ease;
    -moz-transition:opacity .3s ease;
    -o-transition:opacity .3s ease;
    transition:opacity .3s ease;
    margin-left:-100px;
    width:200px;
    background: #fff
}
.co .tooltip{
    opacity:0;
    position:absolute;
    visibility:hidden;
    left:50%;
    margin-left:-100px;
    width:200px;
    bottom:120%;
    bottom:-webkit-calc(100% + 7px);
    bottom:-moz-calc(100% + 7px);
    bottom:calc(100% + 7px);
    z-index:100;
    font-size:14px
}
.co .tooltip p {margin:2px 0}
.co .tooltipContent{
    font-size:14px;
    padding:8px 16px 6px;
    display:inline-block;
    height:auto;
    font-weight:400;
    letter-spacing:0;
    -webkit-box-shadow:0px 0px 4px rgba(0,0,0,.25);
    -moz-box-shadow:0px 0px 4px rgba(0,0,0,.25);
    box-shadow:0px 0px 4px rgba(0,0,0,.25);
    line-height: 26px;
}


.co.footerEnd {
	background: #fff;
	border-top: 1px solid #ddd;
	text-align: center;
	font-size: 14px;
	margin: 40px 0 0;
	padding: 30px 0;
}
.co.footerEnd .content{
	color:unset
}
.co.footerEnd p{
	font-size: 13px;
	margin: 0 auto;
	padding:0;
	line-height: 40px;
	color: #666;
    font-style:unset
}

.delOffer {
    font-weight: bold;
    text-align: center;
}

.trustMark{
    width:18%;
    max-width:100px;
    height:45px;
    display:inline-block;
    background-size:contain;
    background-repeat:no-repeat;
    background-position-y:center;
    margin:-5px 10px
}
.secureVisa{
    background-image:url(../ui/img/secureVisa.png)
}
.secureMastercard{
    background-image:url(../ui/img/secureMastercard.png)
}
.securePaypal{
    background-image:url(../ui/img/paypal.svg)
}
.secureVerisign{
    background-image:url(../ui/img/verisign.png)
}


@media only screen and (max-width: 1360px) {
  .nav.cart .logo{margin:3px 5px 0}
}

@media only screen and (max-width: 1060px) {
  .co .sec {padding:0 20px}
}

@media only screen and (max-width: 900px) {
    .cart .notes {top: 62px;width: 320px;}
    .cart .details {width: calc(100% - 340px);margin-right: 20px;}
    .cart .details li .thumb {width: 120px;}
    .cart .details li .desc {width: calc(100% - 140px);}
    .co .payicons svg {height: 40px;width: 45px;margin-top: 3px;}
}

@media only screen and (max-width: 760px) {
    h1 {text-align: center;}
  .cart .details {
    width: 100%;
    margin-right: 0;
  }
  .cart .notes {
    top: unset;
    width: 100%;
  }
  .co .notes {
    z-index: 5
  }
    .section.cart h3 {text-align: center;margin-top:10px}
  .cart .box {
        border: none;
        padding: 16px 24px 16px;
    }
    .co .sec {padding:0 0 0 54px}
    .co .wide {
      overflow: hidden;
      max-height: 0;
      transition: max-height .3s ease-in-out;
      position: fixed;
      bottom: 0;
      background: #fff;
      width: calc(100% - 44px);
      left: 0;
      padding: 10px;
      margin: 10px;
      border: 2px solid #ccc;
      z-index: 6;
    }
    .co .wide.show {
      max-height: 100%;
      z-index: 8;
      transition: all .4s ease-out;
    }
    .co .summary {
        position: fixed;
        bottom: 0;
        background: #fff;
        width: calc(100% - 44px);
        left: 0;
        padding: 10px;
        margin: 10px;
        border: 2px solid #ccc;
        z-index: 7;
    }
    .co .summary .thumb {
        width: 67px;
        position: relative;
        height: 67px;
        line-height: 0;
        display: inline-block;
    }
    .co .summary .inf{
      display: inline-block;
      padding-left: 20px;
      font-size: 24px;
      font-weight: 500;
      padding-top: 14px;
      line-height: 24px;
      vertical-align: top;
    }
    .co .summary .inf a{
      font-size: 16px;
      display: block;
    }
    .co .summary .total{
      display: inline-block;
      text-align: right;
      font-size: 24px;
      line-height: 20px;
      font-weight: 500;
      margin-right: 16px;
      top: calc(50% - 10px);
    }
    .co .box p.bold {margin-bottom: 2px}
    .co.footerEnd {margin-bottom: 100px}
}


@media only screen and (max-width: 960px) {
  .co.rev .box.two {width:unset; display:block;}
  .co.rev .details .box:nth-child(2) {margin-right:0;}
  .cart .prods li .desc .product-name{width: auto;}
  .cart .prods li .desc .product-subtotal{position: relative}
}


@media only screen and (max-width: 760px) {
  .co.rev .box.two {width:calc(50% - 55px); display:inline-block}
  .co.rev .details .box:nth-child(2) {margin-right:10px;}
  .section.cart.co.rev .box h3 {text-align: left}
  .co.rev .thin {display: block}
  .cart.co.rev .notes {margin:0 0 40px;top:0}
  
  .cart .prods li .desc .product-name{width: calc(100% - 100px)}
  .cart .prods li .desc .product-subtotal{position: absolute}
}

@media only screen and (max-width: 560px) {
  .co.rev .box.two {width:unset; display:block;}
  .co.rev .details .box:nth-child(2) {margin-right:0;}
}

@media only screen and (max-width: 660px) {
  .co .sec {padding:0 20px}
}

@media only screen and (max-width: 500px) {
    h1 {font-size:26px}
    .cart .prods li .desc .product-name{width: auto;}
    .cart .prods li .desc .product-subtotal{position: relative}
    .cart .prods .note {gap: 4px}
    .cart .prods .note .qty {flex-grow: 1;}
    .nav.cart .menu.secure svg {
        margin: 0;
    }
    .nav.cart .menu.secure {
        margin: 16px 16px 0 0;
    }
    .nav.cart .menu.secure span {
        display: none;
    }
}

@media only screen and (max-width: 400px) {
    .cart .details li .thumb {width: 110px;margin-right:12px}
    .cart .details li .desc {width: calc(100% - 122px);}
    .cart .prods .note a {text-align: center;}
    .details li .desc .product-subtotal.r {display: none;}
    .co .success .secReview {max-height:46px}
    .co .payicons svg {width: 28px;}
    .prods .rowmsg div{flex-direction: column;}
    .prods .rowmsg button{max-width: unset}
}