/*
MatchesFashion.com | Main Stylesheet File

(i) IMPORTANT
Before modifying this file please read about Atomic Design Pattern
http://patternlab.io/about.html

(c) 2014 MatchesFashion.com
*/

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:focus {
    outline-color: transparent;
    outline-style: none;
}

.clearfix {
    zoom: 1;
}

.clearfix:before,
.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.clearfix:after {
    clear: both;
}

.yCmsContentSlot {
    zoom: 1;
}

.yCmsContentSlot:before,
.yCmsContentSlot:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.yCmsContentSlot:after {
    clear: both;
}

.selecter .no--arrow:after {
    display: none !important;
}

.hidden,
.notVisible {
    display: none;
}

.underline {
    border-bottom: solid 1px black;
    display: inline-block;
}

.visible-mobile {
    display: none;
}

@media (min-width: 0em) and (max-width: 42.5em) {
    .visible-mobile {
        display: block !important;
    }
}

.visible-tablet {
    display: none;
}

@media (min-width: 42.5625em) and (max-width: 61.25em) {
    .visible-tablet {
        display: block !important;
    }
}

@media (min-width: 0em) and (max-width: 42.5em) {
    .hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 42.5625em) and (max-width: 61.25em) {
    .hidden-tablet {
        display: none !important;
    }
}

@media (min-width: 61.3125em) and (max-width: 90em) {
    .hidden-desktop {
        display: none !important;
    }
}

@media (min-width: 90.0625em) {
    .hidden-desktop-large {
        display: none !important;
    }
}


/* @import "sass/visibility";
@import "sass/atoms/global/animations"; */

.grid-container {
    max-width: 93.33%;
    margin-left: auto;
    margin-right: auto;
}

.grid-container::after {
    content: " ";
    display: block;
    clear: both;
}

@media (min-width: 42.5625em) {
    .grid-container {
        max-width: 95.89%;
        margin-left: auto;
        margin-right: auto;
    }
    .grid-container::after {
        content: " ";
        display: block;
        clear: both;
    }
}

@media (min-width: 61.3125em) {
    .grid-container {
        max-width: 97.02%;
        margin-left: auto;
        margin-right: auto;
    }
    .grid-container::after {
        content: " ";
        display: block;
        clear: both;
    }
}

@media (min-width: 90.0625em) {
    .grid-container {
        max-width: 109.88%;
        margin-left: auto;
        margin-right: auto;
        max-width: 97.2%;
    }
    .grid-container::after {
        content: " ";
        display: block;
        clear: both;
    }
}

@media (min-width: 120em) {
    .grid-container {
        max-width: 168.3%;
        margin-left: auto;
        margin-right: auto;
        max-width: 97.2%;
    }
    .grid-container::after {
        content: " ";
        display: block;
        clear: both;
    }
}

ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

a {
    color: black;
    text-decoration: none;
    line-height: inherit;
}

a:hover,
a:focus {
    color: black;
}

a img {
    border: none;
}

p {
    font-family: inherit;
    font-weight: normal;
    font-size: 1rem;
    text-rendering: optimizeLegibility;
}

p aside {
    font-size: 11px;
    line-height: 1.35;
    font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Group1;
    font-weight: normal;
    font-style: normal;
    color: #222222;
    text-rendering: optimizeLegibility;
    margin-top: 1rem;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
    font-size: 10px;
    color: #6f6f6f;
    line-height: 0;
}

h1 {
    font-size: 48px;
    font-size: 3rem;
}

h2 {
    font-size: 1.6875rem;
}

h3 {
    font-size: 1.375rem;
}

h4 {
    font-size: 1.125rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

hr {
    border: solid #dddddd;
    border-width: 1px 0 0;
    clear: both;
    margin: 1.25rem 0 1.1875rem;
    height: 0;
}

em,
i {
    font-style: italic;
    line-height: inherit;
}

strong,
b {
    font-weight: bold;
    line-height: inherit;
}

small {
    font-size: 10px;
    line-height: inherit;
}

ul,
ol,
dl {
    font-size: 1rem;
    list-style-position: outside;
    font-family: inherit;
}

ul.no-bullet {
    margin-left: 0;
}

ul.no-bullet li ul,
ul.no-bullet li ol {
    list-style: none;
}

ul li ul,
ul li ol {
    margin-bottom: 0;
}

ul.square li ul,
ul.circle li ul,
ul.disc li ul {
    list-style: inherit;
}

ul.square {
    list-style-type: square;
    margin-left: 1.1rem;
}

ul.circle {
    list-style-type: circle;
    margin-left: 1.1rem;
}

ul.disc {
    list-style-type: disc;
    margin-left: 1.1rem;
}

ul.no-bullet {
    list-style: none;
}

ol {
    margin-left: 1.4rem;
}

dl dt {
    margin-bottom: 0.3rem;
    font-weight: bold;
}

dl dd {
    margin-bottom: 0.75rem;
}

abbr,
acronym {
    text-transform: uppercase;
    font-size: 90%;
    color: black;
    border-bottom: 1px dotted #dddddd;
}

abbr {
    text-transform: none;
}

blockquote {
    margin: 0 0 14px;
    padding: 0.5625rem 1.25rem 0 1.1875rem;
    border-left: 1px solid #dddddd;
}

blockquote cite {
    display: block;
    font-size: 0.8125rem;
    color: #555555;
}

blockquote cite:before {
    content: "\2014 \0020";
}

blockquote cite a,
blockquote cite a:visited {
    color: #555555;
}

blockquote,
blockquote p {
    line-height: 1.6;
    color: #6f6f6f;
}

.vcard {
    display: inline-block;
}

.vcard li {
    margin: 0;
    display: block;
}

.vevent abbr {
    cursor: default;
    border: none;
}

.chronicle-display-black,
.lister__item__title,
.size-guide-heading,
.size-guide-sub-heading,
.size-guide-designer,
.chronicle-display-bold,
.size-guide-price,
.chronicle-display-semibold,
.section-title-box,
.headline-title-box,
.chronicle-display-roman,
.lead-title-box,
.size-guide-description,
.chronicle-display-light {
    font-family: Group1;
}

.helvetica-neue-regular,
.breadcrumbs,
.applyed-filters a,
.filter__box__item,
.pager,
.size-guide-label,
.size-guide-contact a {
    font-family: Group2, "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    line-height: 18px;
}

.helvetica-neue-bold,
.link-generic__14_upper,
.link-generic__14_lower,
.link-generic__12_upper,
.link-generic__12_lower,
.applyed-filters,
.pager a.selectd,
.size-guide-form-label,
.size-guide-type,
.size-guide-contact span {
    font-family: Group2, "Helvetica", "Arial", sans-serif;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}

.chronicle-display-black,
.lister__item__title,
.size-guide-heading,
.size-guide-sub-heading,
.size-guide-designer {
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
    font-weight: 900;
}

.chronicle-display-bold,
.size-guide-price {
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
    font-weight: 700;
}

.chronicle-display-semibold,
.section-title-box,
.headline-title-box {
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
    font-weight: 400;
}

.chronicle-display-roman,
.lead-title-box,
.size-guide-description {
    text-rendering: optimizeLegibility;
    font-weight: 300;
}

.chronicle-display-light {
    font-weight: 200;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
}

.georgia,
.lister__item__details,
.lister__item__price,
.size-guide-list {
    font-family: Group3;
    text-transform: none;
    text-rendering: optimizeLegibility;
}

.georgia-regular {
    font-family: Group3;
    text-transform: none;
    text-rendering: optimizeLegibility;
}

.right-arrow__14_wb-icn {
    font-family: 'webdings';
    font-size: 14px;
}

.right-arrow__12_wb-icn {
    font-family: 'webdings';
    font-size: 14px;
}

.section-title-box {
    text-transform: none;
    font-size: 12px;
}

.headline-title-box {
    font-size: 20px;
}

.lead-title-box {
    font-size: 14px;
    text-transform: none;
}

.link-generic__14_upper {
    font-size: 14px;
    text-transform: uppercase;
}

.link-generic__14_lower {
    font-size: 14px;
    text-transform: uppercase;
}

.link-generic__12_upper {
    font-size: 12px;
    text-transform: uppercase;
}

.link-generic__12_lower {
    font-size: 12px;
    text-transform: uppercase;
}

.breadcrumbs {
    color: #cccccc;
    font-size: 10px;
}

.applyed-filters {
    text-transform: uppercase;
    font-size: 10px;
}

.applyed-filters a {
    text-transform: none;
    font-size: 11.6px;
}

.lister__item__title {
    font-size: 12px;
    line-height: 18px;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
}

.lister__item__details,
.lister__item__price {
    font-size: 12px;
    color: #333333;
    text-rendering: optimizeLegibility;
}

.filter__box__item {
    font-size: 12px;
}

.pager {
    font-size: 12px;
}

.size-guide-heading {
    display: block;
    font-size: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 3px solid black;
    padding-bottom: 20px;
    margin-bottom: 20px;
    clear: both;
}

.size-guide-sub-heading {
    display: block;
    font-size: 20px;
    text-transform: uppercase;
    text-align: left;
    border-top: 3px solid black;
    margin-top: 30px;
    padding-top: 26px;
    padding-bottom: 20px;
    clear: both;
}

.size-guide-designer {
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
}

.size-guide-description {
    font-size: 12px;
    letter-spacing: 1px;
    text-align: left;
    padding: 10px 0;
}

.size-guide-price {
    font-size: 12px;
    letter-spacing: 1px;
    text-align: left;
    padding-bottom: 20px;
}

.size-guide-form-label {
    text-transform: uppercase;
    font-size: 11px;
    text-align: left;
}

.size-guide-label {
    font-size: 11px;
    text-align: left;
    margin-left: 20px;
    text-transform: none;
}

.size-guide-type {
    text-transform: uppercase;
    font-size: 12px;
    text-align: left;
    margin-bottom: 10px;
}

.size-guide-list {
    font-size: 11px;
    line-height: 16px;
    text-align: left;
}

.size-guide-list:last-of-type {
    margin-bottom: 20px;
}

.size-guide-contact {
    clear: both;
    margin-top: 20px;
}

.size-guide-contact span {
    font-size: 11px;
    text-transform: uppercase;
}

.size-guide-contact a {
    font-size: 11px;
    text-align: left;
    margin-left: 10px;
    text-decoration: underline;
}

textarea:focus,
input:focus,
input[type]:focus,
.uneditable-input:focus {
    box-shadow: none;
    outline: 0 none;
}

textarea:focus.error,
input:focus.error,
input[type]:focus.error,
.uneditable-input:focus.error {
    outline: 0 none;
}

input::-webkit-input-placeholder {
    color: #999999;
    display: block;
    letter-spacing: 1px;
    font-family: Group2, "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-align: left;
    text-rendering: optimizeLegibility;
    text-transform: none;
}

input:focus::-webkit-input-placeholder {
    color: gray;
}

input:-moz-placeholder {
    color: #999999;
    display: block;
    letter-spacing: 1px;
    font-family: Group2, "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-align: left;
    text-rendering: optimizeLegibility;
    text-transform: none;
}

input:focus:-moz-placeholder {
    color: gray;
}

input::-moz-placeholder {
    color: #999999;
    display: block;
    letter-spacing: 1px;
    font-family: Group2, "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-align: left;
    text-rendering: optimizeLegibility;
    text-transform: none;
}

input:focus::-moz-placeholder {
    color: gray;
}

input:-ms-input-placeholder {
    color: #999999;
    display: block;
    letter-spacing: 1px;
    font-family: Group2, "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-align: left;
    text-rendering: optimizeLegibility;
    text-transform: none;
}

input:focus:-ms-input-placeholder {
    color: gray;
}

input.error {
    border: 1px solid red !important;
}

input {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: block;
    letter-spacing: 0px;
    font: 300 14px/18px Group2, "Helvetica", "Arial", sans-serif;
    text-align: left;
    text-rendering: optimizeLegibility;
    width: 100%;
    padding: 0 8px;
    color: black;
    margin-bottom: 14px;
    border: 1px solid black;
    background-color: white;
}

input:focus {
    color: black;
}

input[type="checkbox"] {
    width: auto;
}

label {
    display: block;
    font-size: 10px;
    padding-bottom: 0px;
}

label.error {
    padding-bottom: 12px;
}

small {
    display: block;
}

.button {
    font: 11px Group2, "Helvetica", "Arial", sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    text-align: center;
    letter-spacing: 1px;
    text-rendering: optimizeLegibility;
    color: white !important;
    border: none;
    background-color: black;
    box-sizing: border-box;
    float: right;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.button:hover {
    background-color: white;
    color: black !important;
    border: 1px solid black;
}

.button-white {
    font: 11px Group2, "Helvetica", "Arial", sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    text-align: center;
    letter-spacing: 1px;
    text-rendering: optimizeLegibility;
    color: black !important;
    border: 1px solid black;
    background-color: white;
    box-sizing: border-box;
}

.button-white:hover {
    background-color: black;
    color: white !important;
    border: 1px solid black;
}

.error {
    color: red;
}

.required {
    font-size: 10px;
    padding-bottom: 12px;
}

input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    background-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

input::-webkit-input-placeholder {
    color: #999999;
    letter-spacing: 10px;
}

input:-moz-placeholder {
    color: #999999;
    letter-spacing: 1px;
}

input::-moz-placeholder {
    color: #999999;
    letter-spacing: 1px;
}

input:-ms-input-placeholder {
    color: #999999;
    letter-spacing: 1px;
}

.blackOutline {
    border-color: black !important;
}

.placeholder {
    color: #999999 !important;
    letter-spacing: 1px;
}

.btn {
    background-color: white;
    border: solid 1px black;
    color: black;
    text-transform: uppercase;
    text-align: center;
    height: 40px;
    line-height: 39px;
    padding: 0 2em;
    font-family: Group2, "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    font-size: 10px;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
}

.btn:hover {
    background-color: black;
    border: solid 1px black;
    color: white;
}

.btn--default {
    background-color: white;
    border: solid 1px black;
    color: black;
}

.btn--default:hover {
    background-color: black;
    border: solid 1px black;
    color: white;
}

.btn--primary {
    background-color: black;
    border: solid 1px black;
    color: white;
}

.btn--primary:hover {
    background-color: white;
    border: solid 1px black;
    color: black;
}

.halves .btn {
    float: left;
    width: 50%;
    padding: 0;
    border-left: none;
}

.halves .btn:nth-child(2n+0) {
    border-right: none;
}

.mfp-container {
    padding: 0;
}

.mfp-wrap .mfp-content {
    max-width: 97.02%;
    margin-left: auto;
    margin-right: auto;
}

.mfp-wrap .mfp-content::after {
    content: " ";
    display: block;
    clear: both;
}

@media (min-width: 0em) {
    .mfp-wrap .mfp-content {
        max-width: 93.33%;
        margin-left: auto;
        margin-right: auto;
    }
    .mfp-wrap .mfp-content::after {
        content: " ";
        display: block;
        clear: both;
    }
}

@media (min-width: 42.5625em) {
    .mfp-wrap .mfp-content {
        max-width: 95.89%;
        margin-left: auto;
        margin-right: auto;
    }
    .mfp-wrap .mfp-content::after {
        content: " ";
        display: block;
        clear: both;
    }
}

@media (min-width: 61.3125em) {
    .mfp-wrap .mfp-content {
        max-width: 97.02%;
        margin-left: auto;
        margin-right: auto;
    }
    .mfp-wrap .mfp-content::after {
        content: " ";
        display: block;
        clear: both;
    }
}

.button__add {
    font: 11px Group2, "Helvetica", "Arial", sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    text-align: center;
    letter-spacing: 1px;
    text-rendering: optimizeLegibility;
    color: white !important;
    border: none;
    background-color: black;
    box-sizing: border-box;
    height: 40px;
    margin-bottom: 20px;
}

.button__add:hover {
    background-color: white;
    color: black;
}

@media (min-width: 0em) {
    .button__add {
        width: 100%;
        float: left;
        clear: both;
    }
}

@media (min-width: 42.5625em) {
    .button__add {
        clear: both;
        width: 100%;
        float: left;
        clear: both;
    }
}

@media (min-width: 61.3125em) {
    .button__add {
        width: 47.82609%;
        float: left;
        margin-right: 4.34783%;
        clear: both;
    }
}

.button__wish-list {
    font: 11px Group2, "Helvetica", "Arial", sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    text-align: center;
    letter-spacing: 1px;
    text-rendering: optimizeLegibility;
    color: black !important;
    border: 1px solid black;
    background-color: white;
    box-sizing: border-box;
    height: 40px;
    padding-top: 12px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.button__wish-list:hover {
    background-color: black;
    color: white;
}

@media (min-width: 0em) {
    .button__wish-list {
        clear: none;
        width: 48.21601%;
        float: left;
        margin-right: 3.56798%;
    }
}

@media (min-width: 42.5625em) {
    .button__wish-list {
        clear: both;
        width: 100%;
        float: left;
        clear: both;
    }
}

@media (min-width: 61.3125em) {
    .button__wish-list {
        clear: both;
        width: 47.82609%;
        float: left;
        margin-right: 4.34783%;
        margin-right: 0;
        margin-bottom: 40px;
    }
}

.button__look {
    font: 11px Group2, "Helvetica", "Arial", sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    text-align: center;
    letter-spacing: 1px;
    text-rendering: optimizeLegibility;
    color: black !important;
    border: 1px solid black;
    background-color: white;
    box-sizing: border-box;
    height: 40px;
    padding-top: 12px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.button__look:hover {
    background-color: black;
    color: white;
}

@media (min-width: 0em) and (max-width: 42.5em) {
    .button__look {
        width: 48.21601%;
        float: left;
        margin-right: 3.56798%;
        margin-right: 0;
    }
}

@media (min-width: 42.5625em) and (max-width: 61.25em) {
    .button__look {
        clear: both;
        width: 100%;
        float: left;
        clear: both;
        margin-top: 20px;
    }
}

@media (min-width: 61.3125em) {
    .button__look {
        width: 47.82609%;
        float: right;
        margin-right: 0;
        margin-bottom: 40px;
        clear: none;
    }
}

.button__checkout-login-cta {
    font: 11px Group2, "Helvetica", "Arial", sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    text-align: center;
    letter-spacing: 1px;
    text-rendering: optimizeLegibility;
    color: white !important;
    border: none;
    background-color: black;
    box-sizing: border-box;
    height: 40px;
    margin-bottom: 20px;
}

.button__checkout-login-cta:hover {
    background-color: white;
    color: black;
}

@media (min-width: 0em) {
    .button__checkout-login-cta {
        width: 100%;
        float: left;
        clear: both;
    }
}

@media (min-width: 42.5625em) {
    .button__checkout-login-cta {
        clear: both;
        width: 100%;
        float: left;
        clear: both;
    }
}

@media (min-width: 61.3125em) {
    .button__checkout-login-cta {
        width: 47.82609%;
        float: left;
        margin-right: 4.34783%;
        clear: both;
    }
}


/*
Shame stylesheet | for temporary hacks and demo purposes only.

(c) 2014 MatchesFashion.com
*/


/* To be added to custom BASE styles
----------------------------------------------------------------------------- */

a {
    text-decoration: none;
}


/* related to Sprint 2 demo. To be refactored / removed
----------------------------------------------------------------------------- */

#page {
    overflow: hidden;
}

.demo-logo-menu {
    background-image: url("../../images/mf-logo+menu.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 112px;
    margin-top: 20px;
}

.demo-logo-menu:hover {
    opacity: .3;
}


/* Hide Zoom images on PDP.
----------------------------------------------------------------------------- */

.zoom-image {
    display: none;
}

.row {
    clear: both;
    width: 100%;
    float: left;
}

.control-group {
    clear: both;
    width: 100%;
    float: left;
}


/* Hide Me to hide things quickly */

.hideme {
    display: none;
}


/* PDP */

@media (min-width: 42.563em) {
    .button__add {
        margin-top: 25px;
        margin-bottom: 0px;
        height: 41px;
    }
}


/*
* AW15 SALE - 24H - EXTRA 10% - NEW LINES ADDED *
* Pre-homepage banner *
*/

@media (min-width: 0em) and (max-width: 42.5em) {
    .sale-banner-holder {
        margin: 0 -3.77419% 12px;
    }
}

@media (min-width: 42.5625em) and (max-width: 61.25em) {
    .sale-banner-holder {
        margin: 0 -2.32558% 18px;
    }
}

@media (min-width: 61.3125em) and (max-width: 90em) {
    .sale-banner-holder {
        margin: 0 -1.62% 18px;
    }
}

@media (min-width: 90.0625em) {
    .sale-banner-holder {
        margin: 0 -1.5873% 18px;
    }
}

.sale-banner-holder span.code {
    color: #000000;
    font-weight: 700;
}

.sale-banner {
    position: relative;
    width: 100%;
}

.sale-banner * {
    text-align: center;
}

.sale-banner img {
    width: 100%;
}

@media (min-width: 61.3125em) {
    .sale-banner {
        overflow: hidden;
    }
}

.sale-banner > div {
    position: absolute;
    background-color: #FFF;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 5px;
}

@media (min-width: 0em) and (max-width: 42.5em) {
    .sale-banner > div {
        width: 260px;
    }
}

@media (min-width: 42.5625em) and (max-width: 61.25em) {
    .sale-banner > div {
        /*width: 460px; Original*/
        width: 480px;
    }
}

@media (min-width: 61.3125em) {
    .sale-banner > div {
        width: 700px;
    }
}

.sale-banner > div > div {
    border: 2px solid #000;
    position: relative;
}

@media (min-width: 0em) and (max-width: 42.5em) {
    .sale-banner > div > div {
        height: 115px;
    }
}

@media (min-width: 42.5625em) and (max-width: 61.25em) {
    .sale-banner > div > div {
        height: 90px;
        zoom: 1;
    }
    .sale-banner > div > div:before,
    .sale-banner > div > div:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    .sale-banner > div > div:after {
        clear: both;
    }
}

@media (min-width: 61.3125em) {
    .sale-banner > div > div {
        height: 125px;
    }
}

@media (min-width: 0em) and (max-width: 42.5em) {
    .sale-banner > div > div > div.content {
        width: 100%;
        top: 4px;
        position: absolute;
    }
}

@media (min-width: 42.5625em) {
    .sale-banner > div > div > div.content {
        float: left;
        /*width: 296px; Original*/
        width: 315px;
        top: 0;
    }
}

@media (min-width: 61.3125em) {
    .sale-banner > div > div > div.content {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 500px;
        padding-left: 0px;
        margin-left: -7px;
    }
}

.sale-banner > div > div > div.content > div:nth-of-type(1) * {
    color: #000;
}

@media (min-width: 0em) {
    .sale-banner > div > div > div.content > div:nth-of-type(1) h4 {
        font: 200 9px/9px "Group4", sans-serif;
        padding: 0;
        margin-top: 0px;
        margin-bottom: 4px;
        margin-left: 0px;
        margin-right: 0px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(1) h2 {
        font: 700 24px/24px Group1;
        letter-spacing: -0.02em;
        padding: 0;
        margin: 0;
        display: block;
    }
}

@media (min-width: 42.5625em) {
    .sale-banner > div > div > div.content > div:nth-of-type(1) {
        margin-top: 6px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(1) h4 {
        margin-bottom: 6px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(1) h2 {
        display: inline;
        font-size: 27px;
        line-height: 22px;
        display: inline;
    }
}

@media (min-width: 61.3125em) {
    .sale-banner > div > div > div.content > div:nth-of-type(1) {
        margin-top: 6px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(1) h4 {
        font-size: 10px;
        line-height: 10px;
        margin-bottom: 6px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(1) h2 {
        letter-spacing: 0;
        font-size: 42px;
        line-height: 42px;
    }
}

@media (min-width: 90.0625em) {
    .sale-banner > div > div > div.content > div:nth-of-type(1) h4 {
        margin-bottom: 7px;
    }
}

@media (min-width: 0em) and (max-width: 42.5em) {
    .sale-banner > div > div > div.content > div:nth-of-type(2) {
        display: none;
    }
}

@media (min-width: 42.5625em) {
    .sale-banner > div > div > div.content > div:nth-of-type(2) {
        zoom: 1;
        margin-top: 5px;
        padding: 0 51px 0 67px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(2):before,
    .sale-banner > div > div > div.content > div:nth-of-type(2):after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(2):after {
        clear: both;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(2) > a {
        padding-right: 11px;
        font-size: 10px;
        line-height: 10px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(2) > a::after {
        top: 1px;
        width: 10px;
        height: 10px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(2) > a:first-child {
        float: left;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(2) > a:first-child + a {
        float: right;
    }
}

@media (min-width: 61.3125em) {
    .sale-banner > div > div > div.content > div:nth-of-type(2) {
        margin-top: 12px;
        padding-left: 137px;
        padding-right: 135px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(2) a {
        padding-right: 15px;
        font-size: 13px;
        line-height: 13px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(2) a::after {
        top: 1px;
        width: 11px;
        height: 11px;
    }
}

@media (min-width: 90.0625em) {
    .sale-banner > div > div > div.content > div:nth-of-type(2) {
        margin-top: 10px;
        padding-left: 121px;
        padding-right: 119px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(2) > a:first-child {
        margin-left: 10px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(2) > a:first-child + a {
        margin-right: 10px;
    }
}

.sale-banner > div > div > div.content > div:nth-of-type(2) a {
    position: relative;
    display: inline-block;
    font-family: Group2, "Helvetica", "Arial", sans-serif;
    font-weight: 700;
}

.sale-banner > div > div > div.content > div:nth-of-type(2) a::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    background: url("http://assets.matchesfashion.com/content/mf/images/svg/mf-icn-dropdown-right.svg") no-repeat;
    background-size: contain;
}

@media (min-width: 0em) and (max-width: 42.5em) {
    .sale-banner > div > div > div.content > div:nth-of-type(3) {
        display: none;
    }
}

@media (min-width: 42.5625em) and (max-width: 61.25em) {
    .sale-banner > div > div > div.content > div:nth-of-type(3) {
        margin-top: 10px;
    }
}

@media (min-width: 61.3125em) {
    .sale-banner > div > div > div.content > div:nth-of-type(3) {
        margin-top: 13px;
    }
}

@media (min-width: 90.0625em) {
    .sale-banner > div > div > div.content > div:nth-of-type(3) {
        margin-top: 14px;
    }
}

.sale-banner > div > div > div.content > div:nth-of-type(3) p {
    font-family: Group2, "Helvetica", "Arial", sans-serif;
    color: #666;
    padding: 0;
    margin: 0;
}

@media (min-width: 42.5625em) {
    .sale-banner > div > div > div.content > div:nth-of-type(3) p {
        font-size: 9px;
        line-height: 9px;
    }
}

.sale-banner > div > div > div.content > div:nth-of-type(4) {
    margin-top: 3px;
    background-color: black;
    width: 100%;
    padding: 6px;
}

@media (min-width: 42.5625em) {
    .sale-banner > div > div > div.content > div:nth-of-type(4) {
        display: none;
    }
}

.sale-banner > div > div > div.content > div:nth-of-type(4) > h3 {
    font: 200 12px/10px "Group4", sans-serif;
    color: white;
    margin: 0;
    padding: 0;
}

.sale-banner > div > div > div.content > div:nth-of-type(4) > h3:last-child {
    font-size: 9px;
    line-height: 9px;
    margin-top: 5px;
}

.sale-banner > div > div > div.new_lines .triangle {
    width: 0;
    height: 0;
    position: relative;
    left: 1px;
}

@media (min-width: 0em) and (max-width: 42.5em) {
    .sale-banner > div > div > div.new_lines {
        display: none;
    }
}

@media (min-width: 42.5625em) {
    .sale-banner > div > div > div.new_lines {
        float: right;
        width: 150px;
        height: 100%;
        zoom: 1;
    }
    .sale-banner > div > div > div.new_lines .triangle {
        border-left: 16px solid transparent;
        border-top: 88px solid #000000;
    }
    .sale-banner > div > div > div.new_lines:before,
    .sale-banner > div > div > div.new_lines:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    .sale-banner > div > div > div.new_lines:after {
        clear: both;
    }
    .sale-banner > div > div > div.new_lines > div:first-child {
        float: left;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) {
        float: right;
        width: 134px;
        height: 100%;
        background-color: #000;
        position: relative;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3 {
        font: 200 11px/11px "Group4", sans-serif;
        color: #FFFFFF;
        padding: 0;
        margin: 0;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child {
        margin-top: 10px;
        padding: 0 25px;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child + h3 {
        font-size: 8px;
        line-height: 8px;
        margin-top: 7px;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) span {
        color: white;
        font: 300 10px/12px Group2, "Helvetica", "Arial", sans-serif;
        display: block;
        margin-top: 7px;
    }
}

@media (min-width: 61.3125em) {
    .sale-banner > div > div > div.new_lines {
        width: 213px;
    }
    .sale-banner > div > div > div.new_lines .triangle {
        border-left: 60px solid transparent;
        border-top: 123px solid #000000;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) {
        width: 153px;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3 {
        font-size: 16px;
        line-height: 18px;
        padding-right: 0;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child {
        margin-top: 14px;
        padding: 0px 32px 0 15px;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child + h3 {
        font-size: 10px;
        line-height: 10px;
        margin-top: 6px;
        padding-right: 12px;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) span {
        margin-top: 10px;
        padding-right: 10px;
        font-size: 12px;
        line-height: 14px;
    }
}

@media (min-width: 90.0625em) {
    .sale-banner > div > div > div.new_lines {
        width: 228px;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) {
        width: 168px;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child {
        font-size: 18px;
        line-height: 20px;
        margin-top: 11px;
        padding-right: 24px;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child + h3 {
        margin-top: 8px;
        padding-right: 6px;
    }
    .sale-banner > div > div > div.new_lines > div:nth-of-type(2) span {
        margin-top: 10px;
        padding-right: 6px;
        /* padding-left: 22px; */
    }
}

.sale-banner-mobile {
    margin-top: 13px;
    margin-bottom: 15px;
}

@media (min-width: 42.5625em) {
    .sale-banner-mobile {
        display: none;
    }
}

.sale-banner-mobile * {
    text-align: center;
}

.sale-banner-mobile h3 {
    font: 200 11px/11px "Group4", sans-serif;
    margin: 0;
    color: #333333;
}

.sale-banner-mobile p {
    font-family: Group2, "Helvetica", "Arial", sans-serif;
    font-size: 9px;
    line-height: 12px;
    padding: 0;
    margin: 0;
    color: #666666;
}

.sale-banner-mobile > div {
    margin: 19px 15px 14px;
}

.sale-banner-mobile .gg-btn {
    background-color: #000;
    border: 1px solid #000;
    box-sizing: border-box;
    color: #FFF;
    height: 37px;
    font: 700 12px Group2, "Helvetica", "Arial", sans-serif !important;
    letter-spacing: 0;
    padding-right: 12px;
    position: relative;
    text-align: center;
    text-rendering: optimizelegibility;
    text-transform: uppercase !important;
    padding: 0 30px 0 28px;
    z-index: 4;
}

.sale-banner-mobile .gg-btn:nth-of-type(1) {
    margin-right: 2%;
}

.sale-banner-mobile .gg-btn::after {
    background: transparent url("http://assets.matchesfashion.com/content/mf/images/svg/mf-icn-dropdown-white-right.svg") no-repeat scroll 0 0/contain;
    content: "";
    display: inline-block;
    height: 11px;
    margin-top: -5.5px;
    position: absolute;
    top: 50%;
    width: 11px;
}

.sale-banner-mobile .gg-btn:hover,
.sale-banner-mobile .gg-btn.hover {
    background-color: #FFF;
    border: 1px solid #000;
    color: #000;
}

.sale-banner-mobile .gg-btn:hover::after,
.sale-banner-mobile .gg-btn.hover::after {
    background: transparent url("http://assets.matchesfashion.com/content/mf/images/svg/mf-icn-dropdown-right.svg") no-repeat scroll 0 0/contain;
}

@media (min-width: 0em) and (max-width: 42.5em) {
    .sale-banner-mobile .gg-btn {
        padding: 0;
        width: 48%;
    }
    .sale-banner-mobile .gg-btn span {
        display: none;
    }
}

.sale-banner-mobile.row {
    padding: 0;
}

.sale-banner-mobile.row h3 {
    font-size: 13px;
    line-height: 13px;
}

.sale-banner-mobile.row > div {
    padding: 0 15px;
}

@media (min-width: 0em) and (max-width: 61.25em) {
    video {
        display: none;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    video {
        display: none !important;
    }
}

@media (min-width: 61.3125em) {
    video {
        position: absolute;
        top: 0;
        left: -0.25%;
        width: 100.5%;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .sale-banner > div > div > div:nth-of-type(3) {
        top: 30px;
    }
}

@media (min-width: 0em) and (max-width: 61.25em) {
    #sale-mens,
    #sale-womens {
        display: none;
    }
}

@media (min-width: 42.5625em) {
    #sale-mens,
    #sale-womens {
        display: block;
        position: absolute;
        width: 50%;
        height: 100%;
        top: 0;
    }
}

#sale-mens {
    left: 0;
}

#sale-womens {
    right: 0;
}


/*# sourceMappingURL=styles.css.map */


/* SS17 custom styles */

@media (max-width: 42.5625em) {
    .sale-banner-mobile {
        display: none;
    }
    .sale-banner > div {
        width: 288px;
    }
    .sale-banner > div > div {
        height: 177px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(1) h4 {
        margin-top: 5px;
        margin-bottom: 6px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(1) h2 {
        font: 700 34px/33px Group1;
        letter-spacing: 0;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(4) {
        margin-top: 14px;
        background-color: black;
        width: 100%;
        padding: 6px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(4) > h3 {
        font: 200 12px/8px "Group4", sans-serif;
        color: white;
        margin: 0;
        padding: 0;
        letter-spacing: 1px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(4) {
        margin-top: 9px;
        background-color: black;
        width: 100%;
        padding: 7px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(4) > h3:last-child {
        font-size: 9px;
        line-height: 9px;
        margin-top: 7px;
        letter-spacing: 0;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(5) {
        display: block;
        margin-top: 5px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(5) a {
        position: relative;
        display: inline-block;
        font-family: Group2, "Helvetica", "Arial", sans-serif;
        font-weight: 700;
        padding-right: 11px;
        font-size: 12px;
        line-height: 13px;
        float: left;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(5) a:nth-of-type(1) {
        margin-left: 36px;
        margin-top: 5px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(5) a:nth-of-type(2) {
        margin-left: 18px;
        margin-top: 5px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(5) a:after {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        background: url(http://assets.matchesfashion.com/content/mf/images/svg/mf-icn-dropdown-right.svg) no-repeat;
        background-size: contain;
        top: 1px;
        width: 11px;
        height: 11px;
    }
}

@media (min-width: 42.5625em) {
    .sale-banner > div > div > div.content > div:nth-of-type(5) {
        display: none;
    }
}

@media (max-width: 61.25em) and (min-width: 42.5625em) {
    .sale-banner > div > div > div.content > div:nth-of-type(3) p > span {
        display: none;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(1) {
        margin-top: 7px;
    }
    .sale-banner > div > div > div.content > div:nth-of-type(2) a::after {
        top: 0px;
        width: 10px;
        height: 9px;
    }
}


/* French styles */

.language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child span {
    font-family: "Group4", sans-serif;
}

@media (max-width: 42.5625em) {
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(1) h2 {
        font: 700 34px/36px Group1;
        letter-spacing: 0;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(4) {
        margin-top: 7px;
        background-color: black;
        width: 100%;
        padding: 7px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(4) > h3 {
        font: 200 12px/7px "Group4", sans-serif;
        color: white;
        margin: 0;
        padding: 0;
        letter-spacing: 1px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(4) > h3:last-child {
        font-size: 8px;
        line-height: 9px;
        margin-top: 7px;
        letter-spacing: 0;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(5) a > span {
        display: none;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(5) a:nth-of-type(1) {
        margin-left: 64px;
        margin-top: 5px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(5) a:nth-of-type(2) {
        margin-left: 30px;
        margin-top: 5px;
    }
}

@media (min-width: 42.5625em) and (max-width: 61.3125em) {
    .language-fr .sale-banner > div {
        width: 460px;
    }
    .language-fr .sale-banner > div > div > div.content {
        float: left;
        width: 295px;
        top: 0;
        margin-left: 1px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(1) h2 {
        font-size: 24px;
        line-height: 22px;
        display: inline;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(2) {
        zoom: 1;
        margin-top: 7px;
        padding: 0 33px 0 42px;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child {
        margin-top: 10px;
        padding: 0;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child span {
        color: white;
        font: 300 9px/12px "Group4", sans-serif;
        margin-top: 1px;
        letter-spacing: 0;
        padding: 0;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) span {
        color: white;
        font: 300 10px/12px Group2, "Helvetica", "Arial", sans-serif;
        display: block;
        margin-top: 5px;
        padding: 0 8px;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child + h3 {
        font-size: 8px;
        line-height: 8px;
        margin-top: 5px;
    }
}

@media (min-width: 61.3125em) and (max-width: 90em) {
    .language-fr .sale-banner > div > div {
        height: 123px;
    }
    .language-fr .sale-banner > div > div > div.content {
        width: 476px;
        margin-left: 11px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(1) {
        margin-top: 4px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(1) h4 {
        margin-bottom: 14px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(1) h2 {
        letter-spacing: 0;
        font-size: 33px;
        line-height: 22px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(2) {
        margin-top: 12px;
        padding-left: 103px;
        padding-right: 105px;
        letter-spacing: 0;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(2) a {
        padding-right: 15px;
        font-size: 12px;
        line-height: 13px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(3) {
        margin-top: 12px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(3) p {
        font-size: 9px;
        line-height: 9px;
        letter-spacing: 0.50px;
    }
    .language-fr .sale-banner > div > div > div.new_lines {
        width: 235px;
    }
    .language-fr .sale-banner > div > div > div.new_lines .triangle {
        border-left: 67px solid transparent;
        border-top: 121px solid #000000;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) {
        width: 167px;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child {
        font-size: 15px;
        line-height: 17px;
        margin-top: 15px;
        padding: 0;
        margin-left: -26px;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child span {
        font-size: 13px;
        letter-spacing: 0;
        margin-top: 2px;
        padding: 0;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child + h3 {
        margin-top: 9px;
        padding-right: 0;
        margin-left: -31px;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) span {
        margin-top: 9px;
        padding-right: 28px;
        padding-left: 0px;
        font-size: 12px;
    }
}

@media (min-width: 90em) {
    .language-fr .sale-banner > div > div {
        height: 123px;
    }
    .language-fr .sale-banner > div > div > div.content {
        width: 476px;
        margin-left: 3px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(1) {
        margin-top: 3px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(1) h4 {
        margin-bottom: 9px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(1) h2 {
        letter-spacing: 0;
        font-size: 36px;
        line-height: 39px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(2) {
        margin-top: 6px;
        padding-left: 95px;
        padding-right: 95px;
        letter-spacing: 0;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(2) a {
        padding-right: 15px;
        font-size: 12px;
        line-height: 13px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(3) {
        margin-top: 10px;
    }
    .language-fr .sale-banner > div > div > div.content > div:nth-of-type(3) p {
        font-size: 9px;
        line-height: 9px;
        letter-spacing: 0.50px;
    }
    .language-fr .sale-banner > div > div > div.new_lines {
        width: 235px;
    }
    .language-fr .sale-banner > div > div > div.new_lines .triangle {
        border-left: 60px solid transparent;
        border-top: 121px solid #000000;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) {
        width: 175px;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child {
        font-size: 18px;
        line-height: 20px;
        margin-top: 11px;
        padding: 0;
        margin-left: -31px;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child span {
        font-size: 13px;
        letter-spacing: 0;
        margin-top: -1px;
        padding: 0;
        font-family: "Group4", sans-serif;
        line-height: 15px;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child + h3 {
        margin-top: 14px;
        padding-right: 0;
        margin-left: -31px;
    }
    .language-fr .sale-banner > div > div > div.new_lines > div:nth-of-type(2) span {
        /* margin-top: 11px;
        padding-right: 33px;
        padding-left: 7px; */
        font-size: 12px;
    }
}


/* end French styles */


/* end SS17 custom styles */

/* ss18 extra styles */

@media (max-width: 42.5625em) {

    .language-fr .extra-20-ends-today .sale-banner > div > div > div.content > div:nth-of-type(1) h4 {
        margin-top: 10px;
        margin-bottom: 6px;
    }

    .language-fr .extra-20-ends-today  .sale-banner > div > div > div.content > div:nth-of-type(1) h2 {
        font: 700 25px/30px Group1;
        letter-spacing: 0;
    }
}

@media (max-width: 61.3125em) and (min-width: 42.5625em) {
    .language-fr  .extra-20-ends-today .sale-banner > div > div > div.content > div:nth-of-type(1) h2 {
        font-size: 22px;
    }

    .language-fr .extra-20-ends-today .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child {
        margin-top: 16px;
    }
}


@media (max-width: 90em) and (min-width: 61.3125em) {
    .language-fr .extra-20-ends-today .sale-banner > div > div > div.content > div:nth-of-type(1) h2 {
        font-size: 33px;
    }

    .language-fr .extra-20-ends-today .sale-banner > div > div > div.new_lines > div:nth-of-type(2) > h3:first-child {
        margin-top: 23px;
    }

}


@media (min-width: 90em) {
    .language-fr .extra-20-ends-today .sale-banner > div > div > div.content > div:nth-of-type(1) h2 {
        font-size: 34px;
    }
    
}


/* end ss18 extra styles */

.sale-banner > div > div > div.content > div:nth-of-type(1) h4 {
  color: #F00;
}