/* HEADER */
header { width: 100%; background: #ffffff; float: left; position: relative; }
header.up { z-index: 501; }
header.error-page { width: 100%; margin: 0 auto; max-width: 975px; display: block; }
html.ie a#logo img { width: 100%; height: 100%; }
header a#logo { width: 261px; max-height:27px; display: block; float: left; position: relative; }
header a#logo:after { -webkit-transition:all 0.1s ease-in; -moz-transition:all 0.1s ease-in; transition:all 0.1s ease-in;opacity: 0; float: right; content: " "; display: block; width: 18px; height: 25px; background-image: url("../../images/png/home-icon.png"); background-image: url("../../images/svg/home-icon.svg"), none; background-repeat: no-repeat; background-position: 0 10px; background-size: 18px 14px; position: absolute; top: 10px; right:5px; }
header a#logo:hover:after { opacity: 1;  top: -10px; }
.top-header-container { min-height: 36px; max-width: 975px; width: 100%;  margin: 0 auto; padding: 35px 0 25px; }
.top-header-links { max-width: 441px; width: 100%; float: right; }
.top-header-links a { background-image: url("../../images/png/secondary-diamond-menu.png"); background-image: url("../../images/svg/secondary-diamond.svg"), none; background-repeat: no-repeat; background-position: left top; background-size: 11px 14px; float: right; margin-left: 39px; }
.top-header-links a:hover { background-image: url("../../images/png/primary-diamond-menu.png"); background-image: url("../../images/svg/primary-diamond.svg"), none; }
a.loyalty-link { margin-left: 0; }
.top-header-links a span { font-size: 0.85em; line-height: 14px; height: 14px; display: block; padding:1px 0 0 16px; clear: both; color: #343434; text-transform: uppercase; font-family: "Proxima Nova Bold", "Helvetica Neue", Arial,Helvetica, sans-serif;
    -webkit-transition:color 0.1s ease-in;
    -moz-transition:color 0.1s ease-in;
    transition:color 0.1s ease-in;
}
.top-header-links a:hover span { color: #1aa98d; }
.top-header-links a span.link-description { color: #a6a6a6; text-transform: none; padding-top: 4px; }

/* NAVIGATION */
.main-nav-container {
    width: 100%;
    background: #e9e9e9;
    float: left;
    position: relative;
}
.main-nav-container > ul,
.orders .main-nav-container > ul {
    list-style: none;
    height: 14px;
    margin: 0 auto;
    max-width: 975px;
    width: 100%;
}
.main-nav-container > ul li {
    padding: 0 14px 0 13px;
    float: left;
}
.main-nav-container > ul li:first-of-type {
    padding: 0 14px 0 0;
}
.main-nav-container > ul li a {
    width:100%;
    line-height: 1em;
    font-size: 0.85em;
    color: #343434;
    font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
    font-weight: bold;
    -webkit-transition:color 0.1s ease-in;
    -moz-transition:color 0.1s ease-in;
    transition:color 0.1s ease-in;
}
.main-nav-container > ul > li > a {
    line-height: 50px;
    height: 50px;
}
.main-nav-container > ul li a:hover {
    color: #1aa98d;
}
.main-nav-container > ul li#my-bag a:hover,
.main-nav-container ul li#my-bag:hover > a {
    color: #000;
}
.main-nav-container > ul > li:hover, li.stick {
    background-image: url("../../images/png/menu-pointer.png");
    background-image: url("../../images/svg/menu-pointer.svg"), none;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 27px 14px;
    color: #1AA98D;
}
.main-nav-container > ul > li.disabled:hover {
    background: none;
}
#account {
    float: right;
    padding: 0;
    position: relative;
}
#my-bag {
    float: right;
    padding: 0 0 0 27px;
    position: relative;
}
#account > a {
    max-width:200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 18px;
    background-image: url("../../images/png/account-icon.png");
    background-image: url("../../images/svg/account-icon.svg"), none;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 14px 14px;
    min-width:64px;
    display: block;
}
#my_bag {
    font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
}
#my-bag > a {
    float: left;
    display: block;
    padding-left: 18px;
    background-image: url("../../images/png/bag.png");
    background-image: url("../../images/svg/bag.svg"), none;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 11px 14px;
}
.menu-dropdown-container {
    display: none;
    position: absolute;
    background: #FFF;
    border-top: 11px solid #1aa98d;
    overflow: hidden;
    width: 100%;
    left: 0;
    padding: 0 0 70px 0;
}
#account .menu-dropdown-container {
    width: 230px;
    border:solid 2px #e9e9e9;
    border-top:none;
    left: 19px !important;
}
.menu-dropdown-container h1 {
    padding-bottom: 17px;
    font-family: "AvenirNextLTW01-Regular", Arial, Helvetica, sans-serif;
    font-size: 1.75em;
    letter-spacing: 0.5px;
}
.menu-dropdown-container h3 {
    margin:5px 0 20px 0;
    font-size: 22px;
    color: #000;
    border-bottom: 2px solid #eae8e9;
    width:94%;
}
.menu-dropdown-container a.close {
    width:20px;
    height:20px;
    position: absolute;
    top:20px;
    right:20px;
    text-align: center;
    padding:10px !important;
    display:block;
}
.menu-dropdown-container a.close svg {
    width:15px;
    height:15px;
    position: relative;
    top:2px;
}
li#outlet .menu-content {
    height:auto;
    min-height: 520px;
    position: relative;
}
li#outlet .menu-item,
li#outlet .menu-dropdown-inner-container,
li#outlet .menu-dropdown-container,
li#account .menu-dropdown-container{
    padding:0;
}
li#outlet .menu-item a {
    font: 16px "Proxima Nova Regular","Helvetica Neue",Arial,Helvetica,sans-serif;
    padding:5px;
    width:85%;
}
.subcategories .menu-item a {
    font-weight: normal;
}
.subcategories a {
    color:#616161;
}
.subcategories a:hover {
    color:#333333;
}
.category-menu-dropdown-container {
    padding-left: 0;
    padding-top: 0;
}
.category-menu-dropdown-container h1 {
    padding-left: 30px;
    padding-top: 19px;
}
.menu-dropdown-inner-container div a {
    text-transform: capitalize;
}
li#account .menu-dropdown-inner-container {
    border-top: 11px solid #1aa98d;
    padding:20px 20px 10px 20px;
    position: relative;
    left: -1px;
    width: 193px;
}
.collection-menu-dropdown-container .menu-dropdown-inner-container {
    width: 33.3333%;
    max-width: 335px;
    padding: 15px 30px 0 0;
    float: left;
}
.menu-dropdown-inner-container {
    width: 40%;
    padding: 0 0 0 30px;
    float: left;
}
.menu-dropdown-inner-container .menu-item a {
    position: relative;
}
.mini-bag-wrapper {
    padding: 19px 30px 15px;
    width: 559px;
    left: auto;
    right: 0;
    background: #e8e8e8;
    display: none;
    top:50px;
}

#mobile.open #mobile-menu {
    display: block;
    left: 0;
}
.burger {
    position: absolute;
    top:19px;
    right:12px;
    display: block;
    width: 22px;
    height: 3px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.burger span{
    position: absolute;
    left:0;
    width: 100%;
    height: 3px;
    background: #FFF;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.burger .b1 { top: -6px;}
.burger .b3 { top: 6px;}
#mobile.open .b1 {
    -webkit-transform: rotate(45deg) translate(3px, 5px);
    -ms-transform: rotate(45deg) translate(3px, 5px);
    transform: rotate(45deg) translate(3px, 5px);
}
#mobile.open .b2 {
    height:0;
    opacity: 0;
}
#mobile.open .b3 {
    -webkit-transform: rotate(-45deg) translate(3px, -5px);
    -ms-transform: rotate(-45deg) translate(3px, -5px);
    transform: rotate(-45deg) translate(3px, -5px);
}
#mobile-menu.open { display:block; }
.loading .burger span {
    -webkit-animation: loading-animation 1s infinite;
    -moz-animation: loading-animation 1s infinite;
    -o-animation: loading-animation 1s infinite;
    animation: loading-animation 1s infinite;
}
.loading .burger .b2 {
    -webkit-animation-delay: 0.25s;
    -moz-animation-delay: 0.25s;
    -o-animation-delay:  0.25s;
    animation-delay: 0.25s;
}
.loading .burger .b3 {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
@-webkit-keyframes loading-animation {
    0%   { opacity: 1; }
    50%   { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes loading-animation {
    0%   { opacity: 1; }
    50%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes loading-animation {
    0%   { opacity: 1; }
    50%   { opacity: 0; }
    100% { opacity: 1; }
}

.main-nav-container ul li > a {
    color: #343434;
    text-transform: uppercase;
}
.main-nav-container ul li:hover > a,
.main-nav-container ul li.active > a { color: #1aa98d; }
.menu-content {
    max-width:980px;
    margin:auto;
    width: 100%;
    height: auto;
}
a.viewall {
    clear: both;
    display: block;
    padding: 20px 0 0 5px;
    text-transform: capitalize;
    color: #1AA98D !important;
    font:15px "Proxima Nova Regular","Helvetica Neue",Arial,Helvetica,sans-serif;
    float: left;
}
.menu-content a { text-transform: none; }
.menu-dropdown-foot {
    position:absolute;
    bottom:0;
    width: 100%;
    margin: 20px 0 0 0;
    padding:10px 0;
    cursor: pointer;
    text-align:center;
    background:#e9e9e9;
    transition: all .2s linear !important;
    -webkit-transition: all .2s linear !important;
    -moz-transition: all .2s linear !important;
    -o-transition: all .2s linear !important;
    -ms-transition: all .2s linear !important;
}
.menu-dropdown-foot:hover { background: #d4d4d4; }
.menu-dropdown-foot:after {
    display:block ;
    width:40px;
    height:40px;
    background:#FFF;
    margin:auto;
    border-radius: 20px;
    text-align: left;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    /* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); */
    -ms-transform:rotate(90deg);
}
.contracted .menu-dropdown-foot:after {
    content: "";
    background-image: url("../../images/png/forward-arrow-black.png");
    background-image: url("../../images/svg/arrow-black.svg"), none;
    background-repeat: no-repeat;
    background-position: center center;
}
.expand .menu-dropdown-foot:after {
    content: "";
    background-color:#f3f1f2;
    background-image: url("../../images/png/small-close-button.png");
    background-image: url("../../images/svg/small-close-button.svg"), none;
    background-repeat: no-repeat;
    background-position: center center;
}
.menu-item {
    position: relative;
    float: left;
    padding:0 0 10px;
    width: 100%;
}
.menu-item a { float: left; }
.menu-item a.selected {
    color: #000;
    background:#f3f1f2;
    font: 16px "Proxima Nova Bold","Helvetica Neue",Arial,Helvetica,sans-serif !important;
    border-radius: 5px;
}
.menu-item a span {
    font-weight: normal;
    color: #808080;
    display: block;
    line-height: 16px;
    float:left;
    margin: -1px 0 0 0;
}
.menu-item p {
    margin:0;
    padding:0 5px 0 0;
    clear:none;
    font-size: 14px;
    float:left;
}
.newsales .menu-item {
    background:#f3f1f2;
    padding: 0;
    margin: 0 0 9px;
    position: relative;
    overflow: hidden;
    transition: 100ms ease-in;
    -webkit-transition: 100ms ease-in;
    -moz-transition: 100ms ease-in;
    -o-transition: 100ms ease-in;
    -ms-transition: 100ms ease-in;
}
.newsales .menu-item img {
    float: left;
    padding: 0 15px 0 0;
    width: 80px;
    height: 60px;
}
.newsales .menu-item p {
    float: left;
    padding: 15px 0 0 0;
    width: 65%;
}
.newsales .menu-item span {
    padding: 4px 0 0 0;
}
.newsales .menu-item .percent-off {
    position: absolute;
    bottom:0;
    right:0;
    background:#e9e9e9;
    width:100% !important;
    text-align: right;
    padding: 5px 10px 3px 0;
    font-size: 12px;
    display: none;
}
.newsales:empty {
    display: none;
}
#menu-overlay {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    height:100%;
    width:100%;
    z-index: 500;
    display: none;
    transition: 100s ease-in;
}
#menu-overlay.stick,
#menu-overlay.show {
    display: block!important;
    z-index: 501;
}
.sale-photo {
    width: 90px;
    position: absolute;
    top: -15px;
    right: -3px;
    transition: 100ms ease-in;
    opacity:0;
}
.contracted .currentsales .menu-item .percent-off,
.contracted .lastchance .menu-item .percent-off {
    display: none;
    position: absolute;
    top: 0px;
    right: 0px;
    width:50px;
    background:#1aa98d;
    padding:5px;
    color: #FFF;
}
.expand {
    display: block !important;
    z-index: 503;
}
.expand .menu-content {
    height: auto;
    max-height: 100%;
}
.expand .sale-photo {
    opacity:1;
}
.expand .currentsales .menu-item .percent-off,
.expand .lastchance .menu-item .percent-off {
    color:#1AA98D;
    padding:0;
}
.expand .currentsales .menu-item,
.expand .lastchance .menu-item {
    border-bottom:1px solid #eae8e9;
    margin:0 0 20px 0;
    padding:0 0 15px 0;
    position: relative;
}
.expand .currentsales .menu-item a span,
.expand .lastchance .menu-item a span {
    float: none;
}
.expand .currentsales .menu-item a p,
.expand .lastchance .menu-item a p {
    float: none;
}
.expand .newsales .menu-item .percent-off {
    display: block;
    clear: both;
    min-height: 10px;
}
.expand .newsales .menu-item img {
    width: 135px;
    height: 100px;
    position: relative;
    z-index: 10;
}
.expand .newsales .menu-item p {
    width: 135px;
    min-width :0px;
}
.force-hide { display: none !important; }
.main-nav-container ul li:hover .menu-dropdown-container,
.force-show { display: block;}
.disabled:hover { background: none !important; }
#mobile { display: none; }

/* NAV HOVERS // ONLY ON DESKTOP */
html.desktop .contracted .newsales .menu-item {
    height: 60px;
}
html.desktop .newsales .menu-item p {
    transition: 100ms ease-in;
}
html.desktop .newsales .menu-item img {
    transition: 100ms ease-in;
}
html.desktop .newsales .menu-item span {
    transition: 100ms ease-in;
}
html.desktop .newsales .menu-item:hover img {
    width: 135px;
    height: 100px;
}
html.desktop .contracted .newsales .menu-item:hover {
    background: #343434;
}
html.desktop .contracted .newsales .menu-item:hover span {
    font-size: 11px;
    line-height:13px;
    color:#FFF;
}
html.desktop .newsales .menu-item:hover p {
    max-width: 45%;
}
html.desktop .contracted .newsales .menu-item:hover .percent-off {
    bottom: 50px;
    left: 0;
    right: 65%;
    width: auto !important;
    display: block;
    color: #353535;
}
html.desktop .expand .menu-item a span {
    width: 45%;
}

/* BROWSER FIXES */
.ie9 .main-nav-container > ul > li:hover,
.ie10 .main-nav-container > ul > li:hover {
    background-size: auto;
    background-image: url("../../images/png/menu-pointer.png");
}

.ie9 .main-nav-container > ul li#my-bag,
.ie10 .main-nav-container > ul li#my-bag {
    padding-left: 11px;
}
.ie9 li#my-bag > a,
.ie10 li#my-bag > a {
    padding-left: 29px;
    background-size: 36px 14px;
}
html.windows li#account .menu-dropdown-container {
    left:20px !important;
}
html.firefox li#account .menu-dropdown-container {
    left:15px !important;
}
html.windows.firefox li#account .menu-dropdown-container {
    left:19px !important;
}
html.ie .newsales .menu-item p {
    float: left;
    font-weight: normal;
}
html.ie .menu-dropdown-inner-container .menu-item p {
    font-weight: normal;
}
html.ie .featured.cat-container li {
    width: 26%;
}
html.ie .newsales .menu-item p {
    width: 195px;
}
html.ie .expand .newsales .menu-item p {
    width: 130px;
}
html.ie li#account .menu-dropdown-container {
    left: 12px !important;
}
html.ie.ie8 li#account .menu-dropdown-container  {
    left: 17px !important;
}
html.ie.windows li#account .menu-dropdown-container {
    left: -32px !important;
}
html.ie8.windows li#account .menu-dropdown-container {
    left: 15px !important;
}
html.ie9.windows li#account .menu-dropdown-container,
html.ie10.windows li#account .menu-dropdown-container {
    left: 9px !important;
}
html.firefox .newsales div p,
html.firefox .menu-item p {
    font-weight: normal
}

/* DROP EVERYTHING */
a#logo span#drop-everything { position: absolute; top: 25px; right: -45px; width:auto; height: auto; }
html.ie8 a#logo span#drop-everything img { width:auto; height: auto; }

/* MINI BASKET */
.basket-item .quantity-selector.js-show { display: block; visibility: visible; }
#items_in_bag { font-weight: normal; }
.mini-bag-wrapper h1,
.new-mini-bag-wrapper h1 { font-family:"AvenirNextLTW01-Regular", Arial, Helvetica, sans-serif; letter-spacing: -1px; width: 100%; font-size: 1.5em; text-transform: capitalize;color: #343434; }
.mini-bag-wrapper h1 span,
.new-mini-bag-wrapper h1 span { letter-spacing: 0; float: right; color: #a6a6a6; font-size: 0.575em; font-family: "Proxima Nova Normal","Helvetica Neue",Arial,Helvetica,sans-serif; }
.mini-bag-wrapper h1 span strong,
.new-mini-bag-wrapper span strong { font-family: "Proxima Nova Bold","Helvetica Neue",Arial,Helvetica,sans-serif; }
.mini-bag-button-container { width: 100%; }
.main-nav-container .basket-list, .main-nav-container .basket-item, .main-nav-container .basket-item a, .main-nav-container .basket-item a ul { width: 100%; float: left; text-align:left; }
.basket-item { position: relative; margin-bottom: 10px; width: 100%; background: #ffffff; padding: 10px; border-radius: 3px; }
.main-nav-container .basket-item a, .main-nav-container .free-delivery ul.basket-item-description { width: 55%; }
.basket-item a img { max-width: 70px; float: left; width: 35%; }
.main-nav-container ul.basket-item-description { max-width: 65%; padding-top: 0.75em; float: left; width: 65%; padding-left: 10px; }
.main-nav-container .basket-item-description li { padding: 0 14px 0 0; font-size: 1.2em; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%; line-height: 1em; display: block; float: none; padding-right: 0; text-transform: none; margin-bottom: 2px; color: #343434; }
.mini-bsg-wrapper .item-price { width: 20%; padding-top: 2em; float: left; color: #1AA98D; font-size: 0.7em; text-align: right; }
.expiry-warning { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding: 10px 20px; margin-top: -10px; margin-bottom: 20px; float: left; width: 100%; background: #343434; color: #ffffff; border-top: 5px solid #1AA98D; border-bottom: 5px solid #1AA98D; }
.expiry-warning p { margin-bottom: 5px; font-size: 0.95em; }
.basket-item.collect-plus { padding: 9px 10px 19px 10px; }
.basket-item.collect-plus img { float: left; padding: 20px 0 0 5px; width: 63px; }
.basket-item.free-delivery { padding: 8px 10px 12px 10px;}
.basket-item.free-delivery img { float: left; padding: 6px 0 0 7px; width: 63px; }
.basket-item.free-delivery ul { float: left; }
#bag .item-price { float: right; text-align: right; font-size: 1.1em; padding-top: 2em; width: 20%; }
.basket-item.item-protection { display: none; }

/* Quantity Selector */
.basket-item.free-delivery li, .basket-item.collect-plus li{ font-size: 1.0em; padding: 8px 0 0 0 !important; }
.basket-item.collect-plus li{ padding: 8px 0 0 2px !important; }
#bag .item-price { float: right; font-size: 1.1em; padding-top: 2em; }
.basket-item.free-delivery .item-price, .basket-item.collect-plus .item-price { padding:19px 0 0 !important; }
.quantity-selector, .basket-item .mini-bag-quantity-selector { position: relative; display: none; visibility: hidden; padding-top: 1.5em; float: left; max-width: 125px; width: 20%; }
.mini-bag-quantity-selector { display: block !important; visibility: visible !important; }
.mini-bag-quantity-selector .quantity-button,
.quantity-selector .quantity-button{ margin:0; }
.quantity-selector input, .basket-item .mini-bag-quantity-selector input { max-width: 44px; font-size: 1em; position: relative; z-index: 1; margin: 0 -1px; background: #f3f3f3; float: left; display: block; width: 41%; text-align: center; height: 45px; }
.quantity-selector-field, .basket-item .mini-quantity-selector-field, input.quantity-selector-field:disabled { color: #000000; }
.quantity-selector .secondary-button, .basket-item .mini-bag-quantity-selector .secondary-button,
.windows.firefox .quantity-selector .secondary-button, .windows.firefox .basket-item .mini-bag-quantity-selector .secondary-button { max-width: 45px; font-size: 1.4em; position: relative; z-index: 2; padding: 0; color: #1aa98d; background: #e5e5e5; min-width: 0; width: 29.8%; text-align: center; display: block; float: left; font-family: "Proxima Nova Bold","Helvetica Neue",Arial,Helvetica,sans-serif; height: 45px; line-height: 41px; }
.quantity-selector .secondary-button:hover, .basket-item .mini-bag-quantity-selector .secondary-button:hover { color: #ffffff; background: #1aa98d; }
.quantity-selector .secondary-button:active, .basket-item .mini-bag-quantity-selector .secondary-button:active { color: #ffffff; background-color: #009176; box-shadow: 0 2px 0 #fff, inset 0 1px 5px rgba(0,0,0,.25);background-image: -webkit-linear-gradient( bottom, rgba(255,255,255,.05) 0%, rgba(0,0,0,.05) 100%);background-image: linear-gradient(bottom, rgba(255,255,255,.05) 0%, rgba(0,0,0,.05) 100%);-webkit-transition: all .2s linear !important;transition: all .2s linear !important;}
.basket-item .mini-bag-quantity-selector .secondary-button:active, .basket-item .mini-bag-quantity-selector .secondary-button:hover, .basket-item .mini-bag-quantity-selector .secondary-button {-webkit-transition: none!important;transition: none !important;}
.basket-total { float: left; border-radius: 3px; clear: both; background: #ffffff; width: 100%; padding: 15px; }
.basket-total .savings, .basket-total .total { width: 50%; float: left; }
.basket-total .total { text-align: right;color: #343434; }
.basket-total div span { font-size: 1.4em; }
.basket-voucher { float: left; clear: both;  padding-top: 20px; }
#bag .voucher-message { width: auto; margin-left: 10px; float: left; width: 78%; background: transparent; margin-top: 0; }
#bag .loyalty-message { font-size: 1em; width: auto; float: left; padding: 6px 0 0 0; color:#343434; }
#loyalty { padding: 20px 5px 0; float: left; width: 100%; }
#loyalty img { float:left; padding:0 10px 0 0; }
.new-mini-bag-wrapper#bag #loyalty { text-align: center; color:#808080; }
.new-mini-bag-wrapper#bag #loyalty img { float:none; padding:0; position: relative; top: 5px; }
.new-mini-bag-wrapper#bag #loyalty strong { color:#00aa8d; font: 25px "AvenirNextLTW01-Regular", Arial, Helvetica, sans-serif; position: relative; top: 5px; }
.new-mini-bag-wrapper#bag .primary-button { margin: 0 5% 20px !important; width: auto !important; min-width: 90%; float:left; color:#FFF; font-weight: normal; font-size: 1.1em; }
.new-mini-bag-wrapper#bag .basket-vat { padding: 0 20px 40px; width: auto; text-align: center; }
.basket-vat { font-size: 0.9em; float: left; width: 100%; color:#343434; }

.subcat-container {
    float: right;
    position:relative;
    z-index: 10;
    width: 100%;
    right:-40%;
    height:100%;
    min-height:520px;
    padding: 15px 15px 15px 170px;
    border-radius: 5px;
    background-size: auto 100%;
    background-color: #f3f1f2;
    background-image: url("../../images/png/outlet-menu.png");
    background-image: url("../../images/svg/outlet-menu.svg"), none;
    background-repeat: no-repeat;
    background-position: left top;
}
.subcat-container h3 { text-transform: uppercase; }
.subcat-container h1 { width: 100%; }

.cat-container { position: absolute; left:0; width: 65%; padding:15px 30px 0 0; }
.featured.cat-container {padding:15px 0 0 0 !important; width: 51%; position:absolute; top:0; right:0; left:auto; bottom: 0;}
.featured.cat-container ul {width: 100%; float: left;}
.featured.cat-container li {float:left;margin:0 6.5% 33px 0; padding:0 !important; text-align: center; width:28%; position: relative;}
.featured.cat-container li:nth-child(3n) {margin:0 0 33px 0 !important; }
.featured.cat-container a {width:100%; overflow: hidden; display: block; border:solid 2px #f3f3f3; text-transform: capitalize; }
.featured.cat-container li img {width:100%;}
.featured.cat-container span {padding:10px 0 0 0; display: block;font-size: 16px; position: absolute; width:100%;}

/* NEW OGONE MENU */
.ogone.main-nav-container > ul li { color: #808080; line-height: 50px; height: 50px; font-size: 0.85em; text-transform: uppercase; font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; font-weight: bold; }
.ogone.main-nav-container > ul li:hover { background: none; }
.ogone.main-nav-container > ul li#account  { margin-left: 30px; padding-left: 18px; background: url("../../images/refactor/account-icon.png") no-repeat left center; }
.ogone.main-nav-container > ul li#my-bag { margin-left: 30px; padding-left: 18px; background: url("../../images/refactor/mini-bag-icon.png") no-repeat left center; }

/* FLASH MESSAGES */
#flash-message-wrapper { background-image: url("../../images/png/diamond-bg-tile.png"); background-repeat: repeat; background-color: #fff; background-size: auto 100%; float: left; padding-bottom: 0; position: relative; width: 100%; }
#flash-message-wrapper.stuck { box-shadow:0 2px 4px rgba(0, 0, 0, .3); position:fixed; top:0; z-index: 1000; }
#flash-message-wrapper .body-inner-container { float: none; margin: 0 auto; max-width: 975px; padding: 0; }
#flash-message { border-bottom: 2px solid #1AA98D; float: left; padding: 30px 0; width: 100%; }
#flash-message ul { margin-bottom: 0px; }
.flash-message-title { float: left; font-size: 26px; width: 100%; }
.notice .flash-message-title { color: #1AA98D; margin-bottom: 10px; }
.warning .flash-message-title, .error .flash-message-title { color: #F60000; margin-bottom: 8px; }
.flash-message-text { float: left; margin-right: 40px; }

.close-flash-message { float: right; position: relative; }
.close-flash-message .close-button {
    padding: 21px 20px 14px;
    position: absolute;
    right: 0;
    top: -40px;
    text-align: center;
    height: 20px;
    width: 15px;
}
.close-flash-message .close-button:hover { background: #1aa98d; }

.flash-button-container { clear:left; float: left; margin-top: 20px; width: 50%; }
.flash-button-container a { font-size: 16px; }
.flash-button-left { float: left; width: 45%; }
.flash-button-right { float: right; width: 45%; }

/* FOOTER */
footer { position: relative; clear: both; background: #e5e5e5; padding: 30px 0; }
.inner-footer-container  { max-width: 975px; margin: 0 auto; }
footer h2 { color: #343434; font-size: 0.9em; width: 100%; clear: both; margin-top: 2em; margin-bottom: 1px; float: left; margin-left: 0; border-bottom: 0 none; margin-right: 0; padding-right: 0; }
footer ul { float: left; margin-right: 4%; }
footer ul li { line-height: 1.2em; }
footer ul li:first-of-type { margin-bottom: 0.4em; font-size: 1.2em; }
footer ul li a { color: #343434; font-size: 0.85em; }
.footer-join { padding-left: 22px; background-repeat: no-repeat; background-position: left center; background-size: 16px 16px; }
.join-facebook { background-image: url("../../images/png/facebook-logo.png"); background-image: url("../../images/svg/facebook-logo.svg"), none; }
.join-twitter { background-image: url("../../images/png/twitter-logo.png"); background-image: url("../../images/svg/twitter-logo.svg"), none; }
.join-blog { background-image: url("../../images/png/blog-logo.png"); background-image: url("../../images/svg/blog-logo.svg"), none; }
.join-rss {  background-image: url("../../images/png/rss-logo.png"); background-image: url("../../images/svg/rss-logo.svg"), none; }
.join-youtube {  background-image: url("../../images/png/youtube-logo.png"); background-image: url("../../images/svg/youtube-logo.svg"), none; }
footer img, footer svg { clear: both; max-width: 100%; }
.security-images img { width: auto; max-width: 100%; }
.copyright { font-size: 0.9em; margin-top: 2em; width: 100%; clear: both; float: left; }
.inputcover { height: 45px; left: 28px; position: absolute; width: 40px; z-index: 100; }
.security-images img { clear: none; margin-right: 20px; }
.security-images img:first-of-type { margin-top: 2px; }
[name=google_conversion_frame] { display: none; visibility: hidden; }
.inputcover { height: 45px; left: 29px; position: absolute; width: 40px; z-index: 100; }
#hover-holder { z-index:-1; position: absolute; left: 0px; width: 99.6%; top: 0px; height: 100%; }
/* NEW FOOTER FEATURE */
#ft-social, #prefoot #content { width: 100%; max-width: 975px; margin: auto; clear:both;}
.inner-footer-container.new_footer1 { clear: both; }
#ft-social ul { max-width: 100%; width: 100%; padding: 20px 0 50px 0; }
#ft-social li { float: left; text-align: center; width: 20%;}

#ft-social path,
#ft-social polygon { transition: all .5s ease; }
#ft-social li a svg { width:120px; height:60px; margin: 10px auto 0; }

#ft-social li.fb a:hover path { fill:#4c66a4; }
#ft-social li.tw a:hover path { fill:#00abf0; }
#ft-social li.pn a:hover path { fill:#C92228; }
#ft-social li.ts a:hover polygon { fill:#1AA98D; }
#ft-social li.yt a:hover .you path { fill:#000; }
#ft-social li.yt a:hover .tube path { fill:#e52d27; }

#ft-social li:last-child { padding-right: 0 ;}

#ft-social ul li:first-of-type { font-size: initial; margin-bottom: 0; }
#ft-social li span { display: block; font: 22px "AvenirNextLTW01-Regular", Arial, Helvetica, sans-serif;  }
#prefoot { width: 100%; background: #f3f1f2; float: left; position: relative; margin: 0 0 50px 0; }
#prefoot #content { height:187px; }
#future-fifty, #tv-ad { float: left; width: 48.888888888%; }
#future-fifty { padding: 0 2% 0 0;}
#prefoot #content h3 { border: none; margin: 0; color: #000; float:left; }
#prefoot #content p { margin:0; font: 14px "Proxima Nova Regular","Helvetica Neue",Arial,Helvetica,sans-serif; }
#prefoot #content img { position: absolute; top:-10px; }
#prefoot #content .copy { float:right; width: 170px; padding: 20px 0 0 0; }
#pay-methods-foot { float:left; width: 60%; }
#pay-methods-foot h2 { margin:0 0 10px 0; font-size: 1.2em; font-family: "Proxima Nova Regular","Helvetica Neue",Arial,Helvetica,sans-serif;  }
ul.join_community.new_footer1 { display:none; }

#mobile-minibag-header h1 { float:left; width: auto; font-size: 2em; }
#bag-content { color: #808080; float:left; font-size: 2.2em; padding: 0 0 0 10px; }
.new-mini-bag-wrapper#bag {
    position: fixed;
    display:block;
    top: 0;
    left: -110%;
    background:#FFF;
    width: 100%;
    height: 100%;
    padding: 85px 0 0 0;
    overflow-x: scroll;
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.new-mini-bag-wrapper#bag.reveal { left: 0;}
.new-mini-bag-wrapper#bag a.basket-item-remove { display:none; }
#mobile-minibag-header {
    position: fixed;
    top: 0;
    z-index: 10;
    padding: 20px 0 10px 20px;
    background:#FFF;
    width: 100%;
    height:40px;
    border-bottom: solid 1px #e9e9e9;
}
.bag-message {
    padding: 10px 0 0 0;
    text-align: center;
    width: 100%;
    color: #808080;
    clear:both;
}
.new-mini-bag-wrapper#bag .basket-list {
    margin: 10px 30px 0 0;
    border-right: solid 1px #e9e9e9;
    border-bottom: solid 1px #e9e9e9;
    width:95%;
}
.new-mini-bag-wrapper#bag .basket-item {
    border-top: solid 1px #e9e9e9;
    padding: 10px 10px 10px 20px;
    overflow: hidden;
}
.new-mini-bag-wrapper#bag  ul.basket-item-description { padding: 0 0 0 20px; }
.new-mini-bag-wrapper#bag  ul.basket-item-description li {
    margin: 0 0 7px;
    font-size: 16px;
    color: #808080;
}
.new-mini-bag-wrapper#bag  ul.basket-item-description li:first-of-type {
    font: 22px "AvenirNextLTW01-Regular", Arial, Helvetica, sans-serif;
    color: #343434;
}
.new-mini-bag-wrapper#bag .item-price {
    font-size: 26px;
    color: #28ac8d;
    border-radius: 5px;
    border: solid 2px #f3f1f2;
    float:left;
    margin: 18px 0 0 0;
    text-align: center;
    width: 45%;
    padding: 10px 0 3px 0;
}
.new-mini-bag-wrapper#bag .close-button {
    float:right;
    margin: 0 40px 0 0;
    padding: 10px 10px 8px;
    width: 12px;
    height:12px;
    position: relative;
    top:0;
    right:0;
    background-image: url('../../images/png/close.png');
    background-image: url('../../images/svg/close.svg'), none;
    background-repeat: no-repeat;
    background-position: center center;
}
.new-mini-bag-wrapper#bag .basket-total {
    background: #f3f1f2;
    margin: 0 30px 0 0;
    width:95.1%;
    border-radius: 0 0 3px 0;
}
.new-mini-bag-wrapper#bag .bin {
    background: #e5e5e5 url("../../images/png/bin.png") no-repeat center;
    text-indent: 999px;
}
.new-mini-bag-wrapper#bag #loyalty { padding: 20px 0 0 0; }
.new-mini-bag-wrapper#bag .loyalty-message {
    float:none;
    color: #808080;
}
.new-mini-bag-wrapper#bag .expiry-warning {
    border-radius: 0;
}
/* iPads (portrait) ----------- */
@media screen and (min-width: 1780px) {
    .subcat-container { right:-49%; }
}
@media screen and (max-width : 1024px) {
    .menu-dropdown-inner-container.newsales div p { min-width: 0; max-width: 45%; }
    .menu-dropdown-inner-container.newsales div span { padding: 0; float: left; width: 60%; }
    html.desktop .contracted .menu-dropdown-inner-container.newsales div:hover span {width: 45%; }
    .menu-dropdown-container.collection-menu-dropdown-container.expand .menu-dropdown-inner-container.newsales div a { display: block; width: 100%; }
    .menu-dropdown-container.collection-menu-dropdown-container.expand .menu-dropdown-inner-container.newsales div p { padding: 10px 0 0; width: 100px; }
    .menu-dropdown-container.collection-menu-dropdown-container.expand .menu-dropdown-inner-container.newsales div span { float: left; width: 35%; padding: 0; }
    .menu-dropdown-container.collection-menu-dropdown-container.expand .menu-dropdown-inner-container.newsales div span.percent-off { padding: 5px 10px 3px 0; }
    .main-nav-container ul li .menu-dropdown-container.collection-menu-dropdown-container .menu-dropdown-inner-container.newsales { padding: 15px 30px 0 15px; }
    .cat-container { padding: 15px 30px 0 15px; width: 40%; }
    .main-nav-container ul li#account .menu-dropdown-container { left:-20px !important; }
    .menu-dropdown-container .menu-dropdown-inner-container.currentsales h3,
    .menu-dropdown-container .menu-dropdown-inner-container.lastchance h3 { font-size: 18px; padding: 0 0 9px 0 ; margin: 10px 0 15px 0 !important; }
}
@media screen and (max-width: 975px) {
    #flash-message-wrapper .body-inner-container { padding: 0 20px; }
}
@media screen and (max-width : 955px) {
    html.desktop .menu-dropdown-inner-container.newsales div:hover p {max-width: 40%;}
    html.desktop .contracted .menu-dropdown-inner-container.newsales div:hover span  {width: 40%;}
    #prefoot #content { height: auto; max-width: 490px; }
    #future-fifty, #tv-ad { width: 100%; }
    #prefoot #content img { position: relative; width: auto !important; top: 0; }
    #prefoot #content .copy { float: left; padding: 20px 0 0 30px;  }
    .inner-footer-container { float:none !important; max-width: 480px  }
    #pay-methods-foot { width: 100%; }
    footer ul { width: 46% }
}
@media screen and (max-width : 920px) {
    .menu-dropdown-container.collection-menu-dropdown-container.expand .menu-dropdown-inner-container.newsales div p { padding: 10px 0 0 0; }
}
@media screen and (max-width: 910px) {
    html.desktop .menu-dropdown-inner-container.newsales div:hover img {width:100px; height:65px; }
    .menu-dropdown-inner-container.newsales div span { display: none; }
    html.desktop .contracted .menu-dropdown-inner-container.newsales div:hover span.percent-off {bottom: 15px;}
    .menu-dropdown-container.collection-menu-dropdown-container.expand .menu-content .currentsales div:hover a img.hover
    .menu-dropdown-container.collection-menu-dropdown-container.expand .menu-content .lastchance div:hover a img.hover {opacity:0;}
    .main-nav-container ul li > a { font-size: 0.675em; }
}
@media screen and (max-width : 890px) {
    .menu-dropdown-container.collection-menu-dropdown-container.expand .menu-dropdown-inner-container.newsales div img {padding:0; }
    .menu-dropdown-container.collection-menu-dropdown-container.expand .menu-dropdown-inner-container.newsales div {padding:0 0 25px 0;}
    .menu-dropdown-container.collection-menu-dropdown-container.expand .menu-dropdown-inner-container.newsales div p {width:100%;max-width:100%; position: absolute; bottom:-25px; left:0; text-align: left; background:#e9e9e9; padding:7px 0 5px 5px; }
    .menu-dropdown-container.collection-menu-dropdown-container.expand .menu-dropdown-inner-container.newsales div span {padding:0 0 0 10px; display: none;}
    .menu-dropdown-container a.close {top:10px; right:10px;}
    .menu-dropdown-container.collection-menu-dropdown-container.expand .menu-dropdown-inner-container.newsales div span.percent-off { display:block; background:none; position: absolute; right:5px; bottom:0; padding:0;}
}
@media screen and (max-width : 825px) {
    html.desktop .menu-dropdown-inner-container.newsales div:hover p {max-width: 40%;}
}
@media screen and (max-width : 780px) {
    html.desktop .menu-dropdown-inner-container.newsales div:hover p {font-size: 13px; }
    html.desktop .menu-dropdown-inner-container.newsales div:hover img {padding: 0 5px 0 0;}
    html.desktop .contracted .menu-dropdown-inner-container.newsales div:hover span.percent-off {right: 60%;}
}
@media screen and (max-width : 715px) {
    html.desktop .menu-dropdown-inner-container.newsales div:hover img {width:90px; height:60px; }
    html.desktop .contracted .menu-dropdown-inner-container.newsales div:hover span.percent-off {right: 53%; bottom:5px;}
}
@media screen and (max-width : 780px) {
    .menu-dropdown-container.collection-menu-dropdown-container.expand .menu-dropdown-inner-container.newsales div span.percent-off {width:20% !important;}
}

@media screen and (max-width : 670px) {
    .main-nav-container {
        padding-right: 0 !important;
        position: absolute;
        width: 100%;
        top: 1px;
        left: 0;
        height: auto !important;
    }
    .menu-item { padding: 0; }
    #menu-overlay.stick { display: none !important; }
    .top-header-container { padding: 35px 0 50px !important; }
    .main-nav-container ul li > a { font-size: 1em; }
    .main-nav-container > ul li { padding: 0; }
    .main-nav-container ul > li,
    .top-header-links { display: none; }

    li#account, #my-bag {
        margin: 0;
        padding: 0;
        display: block;
        float: left;
        width: 50%;
        background: #e8e8e8;
        height: 40px;
        position: static;
    }
    #my-bag > a {
        display: block;
        width: 100%;
        line-height: 40px;
        text-align: left;
        padding: 0;
        background: url("../../images/refactor/more-arrow.png") no-repeat 90% 50%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: none;
    }
    #bag, .main_basket {
        top: 40px;
        width: 100%;
        max-width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #mobile {
        margin-right: 0;
        display: block;
        color: #ffffff;
        text-align: center;
        width: 50%;
        background-color: #383838;
        background-image: none;
        height: 40px;
    }
    #mobile:hover { background-size: 22px 15px; }
    #my-bag .pointer { display: none; }
    #mobile ul {
        top: 40px;
        margin: 0;
        padding: 0;
        left: 0;
        right: 0;
        position: absolute;
        width: 100%;
        border: 0;
        display: none;
    }
    #mobile ul.hover { display: block; }
    #mobile ul li {
        padding-right: 0;
        display: block;
        background-color: #383838;
        display: block;
        background-color: #383838;
        height: 33px;
        float: none;
        text-align: left;
        width: 100%;
        padding-left: 0;
    }
    #mobile ul li a {
        line-height: 32px;
        display: block;
        color: #ffffff;
        text-transform: uppercase;
        border-bottom: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        font-weight: normal;
        font-size: 15px;
        width: 100%;
        padding-left: 30px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #mobile ul li a em {
        color: #e5e5e5;
        text-transform: lowercase;
    }
    li#account { display: none; }
}
@media screen and (max-width : 600px) {
    .flash-button-container { margin-left: 20%; width: 60%; }
    .flash-button-right { margin-top: 10px; }
    a#logo span#drop-everything { position: relative; top:0; right: 0; width: 100%; text-align: center; display: block; }
    #ft-social li { width: 50%; margin: 0 0 20px 0;}
    #ft-social ul { margin:0; padding: 0; }
    #prefoot #content { padding: 30px 0 0 0; max-width: 100%; overflow: hidden; }
    #prefoot #content .copy { padding: 0 20px 30px 0; width: auto; }
    #prefoot #content img { padding: 0 0 20px 0; }
    #future-fifty, #tv-ad { padding: 0 20px; }
}
@media only screen and (max-device-width : 568px) {
    .quantity-selector .secondary-button:hover, .basket-item .mini-bag-quantity-selector .secondary-button:hover { color: #1aa98d; background: #e5e5e5; }
    .new-mini-bag-wrapper#bag .basket-total .total, .new-mini-bag-wrapper#bag .basket-total .savings { width: 40%; color: #808080; margin: 0;}
    .new-mini-bag-wrapper#bag .basket-total .total span, .new-mini-bag-wrapper#bag .basket-total .savings span { color: #27ab8d; display: block; }
    .new-mini-bag-wrapper#bag .basket-total .savings { text-align: left; padding: 0 0 0 10px;}
    header a#logo:hover:after { opacity: 0; }
    .main-nav-container ul li .menu-dropdown-container { border-top: 0 none; }
    .basket-total .savings, .basket-total .total { width: 100%; float: left; text-align: right; }
    .basket-total .total { margin-top: 10px; }
    .mini-bag-wrapper h1 span { width: 100%; margin-top: 10px; }
    .main-nav-container > ul { padding: 0; }
    .mini-bag-wrapper .secondary-button, .mini-bag-wrapper .primary-button { width: 100%; }
    .mini-bag-wrapper .secondary-button { margin-bottom: 20px; }
    .basket-item .quantity-selector, .basket-item .mini-bag-quantity-selector { width:100%; }
}
@media screen and (max-width: 480px) {
    .main-nav-container .basket-item a { width: 100%; }
    .basket-item .quantity-selector { width: 50%; }
    .item-price { width: 50%; float: right; }
    .mini-bag-wrapper h1 span { font-size: 0.45em; }
    li#account, li#my-bag { font-size: 0.85em; }
}
