/* A&C Atelier | Alexandra.Craig */
/* 30 Apr 2021 | v2.0.0 */

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: none;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@font-face{
    font-family: 'HelveticaNeueLT';
    src:url('../fonts/41774233-b9da-44be-b252-6a7b612fb1c7.eot?#iefix');
    src:url('../fonts/41774233-b9da-44be-b252-6a7b612fb1c7.eot?#iefix') format('eot'),
        url('../fonts/9baef9a5-e2af-4838-a3bc-da9d36c0bde8.woff2') format('woff2'),
        url('../fonts/4bff1fbb-b4bf-4d95-9c47-efcb14384e36.woff') format('woff'),
        url('null') format('truetype'),
        url('../fonts/d9f2752a-8d82-4cf1-b82f-109c1105be7f.svg#d9f2752a-8d82-4cf1-b82f-109c1105be7f') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'HelveticaNeueLT';
    src:url('../fonts/c07fef9e-a934-42d7-92ad-69205f2b8a00.eot?#iefix');
    src:url('../fonts/c07fef9e-a934-42d7-92ad-69205f2b8a00.eot?#iefix') format('eot'),
        url('../fonts/3b303641-706e-4221-94c4-4fb491f4f8ef.woff2') format('woff2'),
        url('../fonts/14ff6081-326d-4dae-b778-d7afa66166fc.woff') format('woff'),
        url('null') format('truetype'),
        url('../fonts/f751c8ae-1057-46d9-8d74-62592e002568.svg#f751c8ae-1057-46d9-8d74-62592e002568') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'HelveticaNeueLT';
    src:url('../fonts/d63f77e2-a23d-496f-bc30-c61c7a689aa6.eot?#iefix');
    src:url('../fonts/d63f77e2-a23d-496f-bc30-c61c7a689aa6.eot?#iefix') format('eot'),
        url('../fonts/4ff9f3fa-9221-4fc5-97e6-93572b6efa24.woff2') format('woff2'),
        url('../fonts/ca8d25cd-e264-4404-b271-4afc45c779c4.woff') format('woff'),
        url('null') format('truetype'),
        url('../fonts/307413a4-d77e-4111-8ba5-e3b7d1e7c160.svg#307413a4-d77e-4111-8ba5-e3b7d1e7c160') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'HelveticaNeueLT';
    src:url('../fonts/bf7ef4ce-de2a-4213-a9d7-826a3ee323cd.eot?#iefix');
    src:url('../fonts/bf7ef4ce-de2a-4213-a9d7-826a3ee323cd.eot?#iefix') format('eot'),
        url('../fonts/3dac71eb-afa7-4c80-97f0-599202772905.woff2') format('woff2'),
        url('../fonts/34e0e4c0-c294-49bb-9a8e-1b2cafd54e32.woff') format('woff'),
        url('null') format('truetype'),
        url('../fonts/5101995a-e73b-4cf9-84e8-f99eb43277b1.svg#5101995a-e73b-4cf9-84e8-f99eb43277b1') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/*
html { text-rendering:optimizeLegibility !important; -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale !important; text-shadow:1px 1px 1px rgba(0,0,0,0.004); font-size:1em; line-height:1.5; letter-spacing:0em; color:#000; font-family:'HelveticaNeueLT', Helvetica, sans-serif; font-weight:400; }
html, body { overflow-x:hidden; background:#000; }
*/

html, body, .main { margin:0; background:#000 !important; }

#main .breadcrumb { display:none; }
#primary.column { padding-left:0; padding-right:0; background:#000; }

.main h1, .main h2, .main h3, .main h4, .main p, .main figure { margin:0; }
.main img { width:100%; height:auto; display:block; }
.main fieldset { display:block; position:relative; }
.main fieldset + fieldset { margin-top:10px; }
.main fieldset > p { display:none; text-align:left; box-sizing:border-box; padding-left:0; padding-right:0; font-size:13px; line-height:1em; color:#C50000; font-weight:400; margin-top:4px; }
.main fieldset > input + p { padding-left:0; }
.main label { display:block; position:absolute; top:3px; left:14px; font-size:21px; line-height:1.5em; font-weight:300; color:#7A7A7A; }
.main input { display:block; box-sizing:border-box; border:1px solid #7A7A7A; background:#000; height:38px; font-family:'HelveticaNeueLT', Helvetica, sans-serif; font-weight:300; font-size:16px; line-height:36px; outline:none; padding-left:0; width:100%; border-radius:0; -webkit-appearance:none; }
.main input[type="file"] { padding-left:0; }
.main input.error { border:1px solid #C50000 !important; }
.main input.error + p, .main .error input + p { display:block; }

.h2 { font-size:34px; line-height:1.000em; font-weight:300; }
.h3 { font-size:30px; line-height:1.066em; font-weight:300; }
.p1, .p1 p { font-size:18px; line-height:1.267em; font-weight:300; }
p.p0, .p0 p { font-size:17px; line-height:1.294em; }
p.p2 { font-size:11px; line-height:1.273em; }
p.p3, .p3 p, .p3 { font-size:11px !important; line-height:1.273em !important; }

.h1 + .h2 { margin-top:0; }
.p0 p + p { margin-top:18px; }

.main strong { font-weight:400; }
.main { color:#FFF; background:#000; font-family:'HelveticaNeueLT', Helvetica, sans-serif; font-weight:400; }
.main ul li { list-style:none; }

.main ::placeholder { color:#7A7A7A; opacity:1; }
.main :-ms-input-placeholder { color:#7A7A7A; }
.main ::-ms-input-placeholder { color:#7A7A7A; }
.main .error::placeholder, .main .error input::placeholder { color:#C50000; }
.main .error:-ms-input-placeholder, .main .error input:-ms-input-placeholder { color:#C50000; }
.main .error::-ms-input-placeholder, .main .error input::-ms-input-placeholder { color:#C50000; }

.main .gutter { padding-left:15px; padding-right:15px; box-sizing:border-box; }

.main .btn_pri { display:inline-block; box-sizing:border-box; height:38px; border:1px solid #FFF; font-size:22px; line-height:36px; font-weight:300; color:#FFF; text-decoration:none; text-align:center; padding-left:30px; padding-right:30px; }
.main .btn_pri.max_width { min-width:132px; max-width:132px; }
.main .btn_pri.disabled { opacity:0.5; cursor:default; }
.main .btn_sec { display:block; width:100%; max-width:235px; text-align:center; color:#FFF; text-decoration:none; box-sizing:border-box; height:32px; border:1px solid #FFF; line-height:30px; margin:0 auto; font-weight:300; }

.main .btn_close { display:block; position:absolute; top:0; right:0; width:65px; height:65px; z-index:1000; }
.main .btn_close span { display:block; width:16px; height:16px; position:absolute; top:20px; left:15px; transform:rotate(45deg); -webkit-transform:rotate(45deg); }
.main .btn_close span:before, .main .btn_close span:after { content:""; display:block; background:#FFF; position:absolute; }
.main .btn_close span:before { width:100%; height:1px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); }
.main .btn_close span:after { width:1px; height:100%; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); }

.main .max_width { width:250px; max-width:250px; }

.main .dialog { width:100%; position:relative; background:#000; overflow:hidden; }

/* start of card css */
.main .flip_card { box-sizing:border-box; }

.main .flip_card .form { padding-top:102px; text-align:center; padding-bottom:75px; }
.main .flip_card .form .gutter { padding-left:20px; padding-right:20px; box-sizing:border-box; }
.main .flip_card .form .fields { margin-top:30px; display:flex; flex-wrap:wrap; }
.main .flip_card .form fieldset { width:100%; }
.main .flip_card label { line-height:34px; font-family:'HelveticaNeueLT', Helvetica, sans-serif; }
.main .flip_card input { border:0; height:40px; line-height:40px; background:#FFF; color:#000; text-align:left; padding-left:15px; padding-right:15px; }
.main .flip_card .form .error input { border:1px solid #C50000 !important; }
.main .flip_card .form .checbox_container.error label { color:#C50000; }
.main .flip_card .form .checbox_container.radio.error label { color:#000; }
.main .flip_card .form .stores.error p { display:block; width:100%; margin-top:8px; }

.main .flip_card .game { padding-top:67px; padding-bottom:75px; text-align:center; }
.main .flip_card .game.gutter { box-sizing:border-box; padding-left:30px; padding-right:30px; }

.main .cards { display:flex; flex-wrap:wrap; width:calc(100% + 10px); transform:translateX(-5px); -webkit-transform:translateX(-5px); margin-top:98px; }
.main .card { width:25%; box-sizing:border-box; padding-left:5px; padding-right:5px; }
.main .card_holder { background:transparent; width:100%; height:0; padding-bottom:calc(100% + 10px); perspective:1000px; cursor:pointer; }
.main .card_inner { position:relative; width:100%; height:0; padding-bottom:100%; transition:transform 0.5s; transform-style:preserve-3d; text-align:center; }
.main .card_holder.open .card_inner, .main .card_holder.opened .card_inner { transform:rotateY(180deg); -webkit-transform:rotateY(180deg); cursor:default; }
.main .card_front, .main .card_back { position:absolute; width:100%; height:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:0; box-sizing:border-box; }
.main .card_front { background:#000; border:1px solid #FFF; }
.main .card_back { background:#FFF; transform:rotateY(180deg); -webkit-transform:rotateY(180deg); }

.main .flip_card .game .tagline { max-width:300px; margin-left:auto; margin-right:auto; margin-top:36px; }

.main .flip_card .message { text-align:center; box-sizing:border-box; padding-top:170px; padding-bottom:75px; }
.main .flip_card .message .gutter { box-sizing:border-box; padding-left:45px; padding-right:45px; }
.main .flip_card .message .h2 + p { margin-top:42px; margin-bottom:42px; }

.main .form .stores { display:flex; flex-wrap:wrap; }
.main .form .stores label { width:50%; }
.main label.checbox_container { font-size:15px; line-height:1.267em; font-weight:300; color:#FFF; text-align:left; display:block; position:relative; padding-left:25px; left:0; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; margin-top:10px; box-sizing:border-box; text-transform:none; padding-top:1px; }
.main label.checbox_container.radio { font-size:16px; line-height:1.125em; color:#000; text-align:center; padding-left:0; margin-top:0; padding-top:9px; height:55px; }
.main label.checbox_container.radio:first-child { border-right:1px solid #000; }
.main label.checbox_container a { color:inherit; }
.main label.checbox_container.error { color:#C50000; }
.main label.checbox_container input { position:absolute; opacity:0; cursor:pointer; height:0; width:0; }
.main label.checbox_container .checkmark { position:absolute; top:0; left:0; height:18px; width:18px; background-color:#000; border:1px solid #FFF; box-sizing:border-box; }
.main label.checbox_container.radio .copy { position:relative; z-index:10; }
.main label.checbox_container.radio .checkmark { position:absolute; top:0; left:0; height:55px; width:100%; background-color:#FFF; box-sizing:border-box; border:none; }
.main label.checbox_container.error .checkmark { border:1px solid #C50000; }
.main label.checbox_container .checkmark:after { content:""; position:absolute; display:none; }
.main label.checbox_container input:checked ~ .checkmark:after { display:block; }
.main label.checbox_container .checkmark:after { left:5px; top:0; width:5px; height:11px; border:solid #FFF; border-width:0 2px 2px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); }
.main label.checbox_container.radio .checkmark:after { left:0; top:0; width:100%; height:55px; border:none; -webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0); background:#E1E1E1; }

.main .form .preferred_collection_copy { margin-top:21px; margin-bottom:7px; }
.main .form .privacy_copy { text-align:left; font-size:16px; margin-top:25px; font-weight:300; }
.main .form .privacy_copy a { color:#FFF; }
.main .form .cta { margin:35px auto 15px; }
.main .form .cta p + p { margin-top:10px; }
/* end of card css */

/* intro css */
.main .nars_world { width:100%; overflow:hidden; }
.main .nars_world .instructions { width:100%; height:100%; z-index:10; position:absolute; top:0; left:0; cursor:pointer; }
.main .nars_world .instructions p { font-size:19px; }
.main .nars_world .instructions > div { width:100%; height:38px; text-align:center; box-sizing:border-box; position:absolute; bottom:0; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }

.main .nars_world figure.video { transform:translateY(-9%); -webkit-transform:translateY(-9%); width:100%; }
.main .nars_world figure.video video { width:100%; }
.main .nars_world article.landing { width:100%; transform:translateY(-20%); -webkit-transform:translateY(-20%); }
.main .nars_world article.landing img { position:relative; width:100%; left:50%; transform:translateX(-50%); }

.main .instruction_screen { text-align:center; }
.main .instruction_screen > section > figure { background:url(/on/demandware.static/-/Sites-nars_sg-Library/default/vce381df1f0cf638c5e99b83c7c6244a946cebe56/bringyourmattitude/sep/hero_img_bg.jpg) 0 0 repeat-x; background-size:100% 100%; }
.main .instruction_screen .h2 { box-sizing:border-box; padding:0 20px; margin:55px 0 17px; }
.main .instruction_screen p { max-width:300px; margin:0 auto; }
.main .instruction_screen .btn_pri { margin-top:30px; margin-bottom:50px; }

.main .flip_card .message { padding-top:120px; padding-bottom:130px; }

.main .m_hide { display:none; }
.main .d_hide { display:block; }

.main .btn_pri { background:rgba(0,0,0,0.5); }

.hide-scrollbar {
    overflow: -moz-hidden-unscrollable;
    overflow: hidden;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 768px) {
    .h2 { font-size:41px; line-height:1.000em; }
    .h3 { font-size:41px; line-height:1.000em; }
    .p1, .p1 p { font-size:20px; line-height:1.263em; }
    p.p3, .p3 p, .p3 { font-size:13px !important; line-height:1.231em !important; }

    .main .nars_world figure.video { max-width:500px; margin:0 auto; }
    .main .nars_world article.landing { max-width:100%; margin:0 auto; overflow:hidden; transform:translateY(-100px); -webkit-transform:translateY(-100px); }
    .main .nars_world article.landing img { width:1580px; }

    .main .instruction_screen { width:100%; background:url(/on/demandware.static/-/Sites-nars_sg-Library/default/vce381df1f0cf638c5e99b83c7c6244a946cebe56/bringyourmattitude/sep/hero_img_bg.jpg) 0 0 repeat-x; background-size:100% 460px; }
    .main .instruction_screen > section { display:flex; max-width:840px; margin:0 auto 55px; }
    .main .instruction_screen > section > figure { order:2; width:calc(100% - 450px); max-width:350px; height:460px; overflow:hidden; position:relative; margin-left:auto; background:none; }
    .main .instruction_screen > section img { width:auto; max-width:none; height:460px; position:absolute; top:0; left:50%; transform:translateX(-50%); }
    .main .instruction_screen > section > article { order:1 width:450px; }
    .main .instruction_screen { color:#000; }
    .main .instruction_screen .btn_pri { background:none; border-color:#000; color:#000; margin-top:27px; }
    .main .instruction_screen .h2 { margin:80px 0 22px; }

    .main .flip_card .game { display:flex; max-width:1150px; margin:0 auto; align-items:center; padding-top:120px; }
    .main .game .cards { order:2; width:460px; margin-top:0; margin-left:auto; }
    .main .card { width:20%; }
    .main .flip_card .game .tagline { order:1; margin:0; width:calc(100% - 560px); max-width:480px; }

    .main .flip_card .form { max-width:660px; margin:0 auto; padding-top:69px; }
    .main .flip_card .form .fields { margin-top:15px; }
    .main .form .cta { display:flex; }
    .main .form .cta > p { margin:0 20px !important; }
    .main .form .preferred_collection_copy { margin:10px auto 7px; }
    .main .form .privacy_copy { margin-top:6px; }
    .main .form .cta { margin-top:20px; }

    .main .flip_card input { text-align:left; padding-left:15px; padding-right:15px; }

    .main label.checbox_container.radio { font-size:20px; }
    .main label.checbox_container.radio .checkmark, .main label.checbox_container.radio .checkmark:after { height:40px; }
    .main label.checbox_container.radio .copy br { display:none; }

    .main input { font-size:20px; }

    .main .m_hide { display:block; }
    .main .d_hide { display:none; }
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}