/* 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('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/41774233-b9da-44be-b252-6a7b612fb1c7.eot?#iefix');
	src:url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/41774233-b9da-44be-b252-6a7b612fb1c7.eot?#iefix') format('eot'),
		url('/on/demandware.static/Sites-nars_us-Site/-/default/dw22130d1b/css/fonts/9baef9a5-e2af-4838-a3bc-da9d36c0bde8.woff2') format('woff2'),
		url('/on/demandware.static/Sites-nars_us-Site/-/default/dwf92f334a/css/fonts/4bff1fbb-b4bf-4d95-9c47-efcb14384e36.woff') format('woff'),
		url('null') format('truetype'),
		url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/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('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/ae1656aa-5f8f-4905-aed0-93e667bd6e4a.eot?#iefix');
	src:url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/ae1656aa-5f8f-4905-aed0-93e667bd6e4a.eot?#iefix') format('eot'),
		url('/on/demandware.static/Sites-nars_us-Site/-/default/dw24ed053f/css/fonts/5a13f7d1-b615-418e-bc3a-525001b9a671.woff2') format('woff2'),
		url('/on/demandware.static/Sites-nars_us-Site/-/default/dw57c56056/css/fonts/530dee22-e3c1-4e9f-bf62-c31d510d9656.woff') format('woff'),
		url('null') format('truetype'),
		url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/7816f72f-f47e-4715-8cd7-960e3723846a.svg#7816f72f-f47e-4715-8cd7-960e3723846a') format('svg');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}


@font-face{
	font-family: 'HelveticaNeueLT';
	src:url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/c07fef9e-a934-42d7-92ad-69205f2b8a00.eot?#iefix');
	src:url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/c07fef9e-a934-42d7-92ad-69205f2b8a00.eot?#iefix') format('eot'),url('/on/demandware.static/Sites-nars_us-Site/-/default/dw4d38d466/css/fonts/3b303641-706e-4221-94c4-4fb491f4f8ef.woff2') format('woff2'),
        url('/on/demandware.static/Sites-nars_us-Site/-/default/dwdc39baaf/css/fonts/14ff6081-326d-4dae-b778-d7afa66166fc.woff') format('woff'),
        url('null') format('truetype'),
        url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/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('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/d63f77e2-a23d-496f-bc30-c61c7a689aa6.eot?#iefix');
	src:url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/d63f77e2-a23d-496f-bc30-c61c7a689aa6.eot?#iefix') format('eot'),
        url('/on/demandware.static/Sites-nars_us-Site/-/default/dw61a88404/css/fonts/4ff9f3fa-9221-4fc5-97e6-93572b6efa24.woff2') format('woff2'),
        url('/on/demandware.static/Sites-nars_us-Site/-/default/dwd252fd0c/css/fonts/ca8d25cd-e264-4404-b271-4afc45c779c4.woff') format('woff'),
        url('null') format('truetype'),
        url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/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('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/bf7ef4ce-de2a-4213-a9d7-826a3ee323cd.eot?#iefix');
	src:url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/bf7ef4ce-de2a-4213-a9d7-826a3ee323cd.eot?#iefix') format('eot'),
        url('/on/demandware.static/Sites-nars_us-Site/-/default/dw9b995f4f/css/fonts/3dac71eb-afa7-4c80-97f0-599202772905.woff2') format('woff2'),
        url('/on/demandware.static/Sites-nars_us-Site/-/default/dw877d7c94/css/fonts/34e0e4c0-c294-49bb-9a8e-1b2cafd54e32.woff') format('woff'),
        url('null') format('truetype'),
        url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/5101995a-e73b-4cf9-84e8-f99eb43277b1.svg#5101995a-e73b-4cf9-84e8-f99eb43277b1') format('svg');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face{
	font-family: 'HelveticaNeueLT';
	src: url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/f95f9fc2-ffda-431c-9d6a-2c3668f5b20b.eot?#iefix');
	src: url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/f95f9fc2-ffda-431c-9d6a-2c3668f5b20b.eot?#iefix') format('eot'),url('/on/demandware.static/Sites-nars_us-Site/-/default/dw62f19e47/css/fonts/5b1fbd62-45dc-4433-a7df-a2b24a146411.woff2') format('woff2'),url('/on/demandware.static/Sites-nars_us-Site/-/default/dw84382a28/css/fonts/050b1948-f226-4d20-a65a-15d8ed031222.woff') format('woff'),url('null') format('truetype'),url('/on/demandware.static/Sites-nars_us-Site/-/en_US/v1619859865968/css/fonts/e5567978-93ef-4de1-804d-1f0e3654a014.svg#e5567978-93ef-4de1-804d-1f0e3654a014') format('svg');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
*/

@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:9px; padding-right:9px; font-size:13px; line-height:1em; color:#C50000; font-weight:400; margin-top:4px; }
.main fieldset > input + p { padding-left:14px; }
.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:21px; line-height:36px; outline:none; padding-left:14px; 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; }

.h1 { font-size:31px; line-height:1.161em; font-weight:200; }
.h2 { font-size:21px; line-height:1.238em; font-weight:300; }
.h3 { font-size:15px; line-height:1.267em; text-align:center; font-weight:400; }
.p1, .p1 p { font-size:15px; 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 { font-size:13px; line-height:1.385em; }

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

.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.th .btn_pri.enter { width:250px; }*/
.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:146px; text-align:center; padding-bottom:75px; }
.main .flip_card .form .gutter { padding-left:30px; padding-right:30px; box-sizing:border-box; }
.main .flip_card .form .fields { margin-top:36px; display:flex; flex-wrap:wrap; }
.main .flip_card .form fieldset:nth-child(2) { margin-top:0; margin-left:10px; } 
.main .flip_card .form fieldset { width:calc(50% - 5px); }
.main .flip_card .form fieldset:nth-child(n+3) { width:100%; }
.main .flip_card .form fieldset + p { margin:40px auto 32px; text-align:center; }
.main .flip_card label { line-height:34px; }
.main .flip_card input { border:0; height:40px; line-height:40px; background:#FFF; color:#000; }
.main .flip_card .form .error input { border:1px solid #C50000 !important; }
.main .flip_card .form .error label { color:#C50000; }

.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:42px; }
.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 .h1 + .h2 { margin-top:36px; margin-bottom:30px; }

.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:35px; left:0; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; margin-top:28px; box-sizing:border-box; text-transform:none; }
.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:20px; width:20px; background-color:#FFF; box-sizing:border-box; }
.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:6px; top:3px; width:6px; height:12px; border:solid #000; border-width:0 3px 3px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); }


.main .nars_world #jsv-holder div:nth-child(3) { display:none; }
.main .nars_world #jsv-image { filter:none !important; opacity:1 !important; display:block !important; visibility:visible !important; }
.main .nars_world #jsv-holder-desktop div:nth-child(3) { display:none; }
.main .nars_world #jsv-image-desktop { filter:none !important; opacity:1 !important; display:block !important; visibility:visible !important; }

.main .nars_world #jsv-holder > img + div { max-width:130px !important; height:6px !important; top:38% !important; }
.main .nars_world #jsv-holder-desktop > img + div { max-width:150px !important; height:6px !important; top:30% !important; }
/* end of card css */

/* start of quiz css */
.main .quiz { box-sizing:border-box; text-align:center; }
.main .quiz .gutter { padding-left:45px; padding-right:45px; }

.main .quiz .btn_option, .main .quiz .questions li a { display:block; width:100%; max-width:290px; 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 .quiz .splash { padding-top:145px; }
.main .quiz .splash .h1 { width:calc(100% + 90px); transform:translateX(-45px); -webkit-transform:translateX(-45px); }
.main .quiz .splash .btn_option { margin-top:18px; }
.main .quiz .splash figure { margin-top:50px; }

.main .quiz .questions { padding-top:110px; }
.main .quiz .questions .h1 { margin-top:18px; }
.main .quiz .questions ul { list-style:none; padding:0; margin:19px 0 25px; }
.main .quiz .questions li:not(:first-child) { margin-top:9px; }
.main .quiz .questions figure.empty { width:100%; height:0; padding-bottom:100%; }
.main .quiz .questions .tone { border:0; color:#000; line-height:32px; }
.main .quiz .questions .tone.light { background:#fdd5bb; }
.main .quiz .questions .tone.medium { background:#dda46e; }
.main .quiz .questions .tone.medium_deep { background:#c98b68; }
.main .quiz .questions .tone.deep { background:#af7854; }

.main .quiz .form { padding-top:104px; }
.main .quiz .form .h1 { margin-bottom:11px; }
.main .quiz .form .fields > div:first-child { margin-top:17px; display:flex; flex-wrap:wrap; }
.main .quiz .form .fields fieldset { width:calc(50% - 4px); }
.main .quiz .form .fields fieldset:first-child { margin-right:8px; }
.main .quiz .form .fields fieldset:nth-child(2) { margin-top:0; }
.main .quiz .form .fields fieldset:nth-child(n+3), .main .quiz .form .fields fieldset.agree { width:100%; }
.main .quiz .form .fields fieldset + fieldset { margin-top:8px; }
.main .quiz .form .fields input { background:#FFF; border:0; height:32px; line-height:32px; font-size:15px; padding-left:8px; padding-right:8px; }
.main .quiz .form .consent_text { text-align:left; margin-top:14px; }
.main .quiz .form label.checbox_container { margin-top:13px; }
.main .quiz .form .ctas { margin-top:40px; padding-bottom:67px; }
.main .quiz .form .ctas p { margin-bottom:8px; }

.main .quiz .congrat { padding-top:50px; padding-bottom:75px; }
.main .quiz .congrat .gutter { box-sizing:border-box; padding-left:20px; padding-right:20px; }
.main .quiz .congrat .results p { margin-top:27px; margin-bottom:37px; }
.main .quiz .congrat .h2 { margin-top:20px; margin-bottom:27px; }
.main .quiz .congrat .description { margin-top:6px; }
.main .quiz .congrat .swiper-container { margin-bottom:37px; }
.main .quiz .congrat .swiper-container figure { width:calc(100% - 120px); margin-left:auto; margin-right:auto; }
/* end of quiz css */

/* start of presenter css */
.main .presenter { box-sizing:border-box; padding-bottom:50px; }
.main .presenter .gutter { padding-left:60px; padding-right:60px; box-sizing:border-box; }

.main .presenter .video { padding-top:55px; }
.main .presenter .video > section > article { max-width:440px; margin-left:auto; margin-right:auto; text-align:center; }
.main .presenter .video > section > article:not(:first-child) { margin-top:18px; }
.main .presenter .video_frame { position:relative; width:100%; height:0; padding-bottom:164.28%; }
.main .presenter .video_placeholder { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
.main .presenter .video_placeholder img { width:auto; height:100%; position:absolute; top:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); }
.main .presenter .video_placeholder img.play_btn { width:150px; height:150px; top:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }
.main .presenter .video_frame iframe { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; }
.main .presenter .video_frame.show iframe { opacity:1; }
/* end of presenter css */

/* start of gallery css */
.main .gallery .splash { box-sizing:border-box; text-align:center; padding-top:108px; }
.main .gallery.no-spacing, .main .gallery.no-spacing .splash, .main .gallery.no-spacing .splash > section:first-child { padding-top:0 !important; padding-bottom:0 !important; margin-top:0 !important; }
.main .gallery .splash .gutter { box-sizing:border-box; padding-left:35px; padding-right:35px; }
.main .gallery .splash .photos { display:flex; flex-wrap:wrap; width:100%; margin-top:19px; padding-bottom:75px; }
.main .gallery .splash .photos div { width:33.33%; height:auto; box-sizing:border-box; }
.main .gallery .splash .photos figure { width:100%; height:0; padding-bottom:100%; position:relative; overflow:hidden; }
.main .gallery .splash .photos img, .main .gallery .splash .photos video { width:100%; height:auto; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }
.main .gallery .splash .btn_pri { margin-top:18px; }
.main .gallery .splash .p3 { margin-top:13px; }
.main .gallery .splash .photos article { width:100%; height:0; padding-bottom:166.66%; overflow:hidden; position:relative; }
.main .gallery .splash .photos iframe { border:none; width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; }

.main .gallery .ig_bringyourmattitude { width:28px; margin:36px auto 15px; }
.main .gallery .ig_bringyourmattitude + .h1 a { text-decoration:none; color:#FFF; }

.main .gallery .booth { text-align:center; padding-top:51px; padding-bottom:45px; }
.main .gallery .booth .gutter { box-sizing:border-box; padding-left:45px; padding-right:45px; }
.main .gallery .booth .h2 { margin-bottom:27px; }
.main .gallery .capture { position:relative; margin-top:16px; overflow:hidden; max-width:365px; margin-left:auto; margin-right:auto; }
.main .gallery .booth .canvas_container { width:100%; height:calc(100% - 33px); position:absolute; top:0; left:0; box-sizing:border-box; padding:15px; overflow:hidden; }
.main .gallery .booth .canvas_container div { width:100%; height:0; padding-bottom:140%; background:#000; overflow:hidden; }
.main .gallery .booth .canvas_container img { width:100%; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }
.main .gallery .booth .capture .swiper-container { padding-bottom:33px; }
.main .gallery .booth .capture .swiper-pagination-bullet { background:#939192; opacity:1; width:13px; height:13px; }
.main .gallery .booth .capture .swiper-pagination-bullet-active { background:#FFF; }
.main .gallery .booth .capture .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin-left:5px; margin-right:5px; }
.main .gallery .booth .capture .swiper-container-horizontal>.swiper-pagination-bullets, .main .gallery .booth .capture .swiper-pagination-custom, .main .gallery .booth .capture .swiper-pagination-fraction { bottom:0; }
.main .gallery .booth .instruction { margin-top:9px; }
.main .gallery .booth .instruction .upload_btn { position:relative; margin-top:13px; margin-bottom:10px; }
.main .gallery .booth .instruction input { position:absolute; width:100%; top:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); opacity:0; }

.main .gallery .booth #saveCanvas { position:fixed; top:-4000px; left:0; }
/* end of gallery css */

/* intro css */
.main .intro { text-align:center; min-height:100%; }
.main .intro .gutter { box-sizing:border-box; padding-left:40px; padding-right:40px; }
.main .intro .h1 { width:calc(100% + 80px); transform:translateX(-40px); -webkit-transform:translateX(-40px); margin-top:46px; margin-bottom:30px; }
.main .intro .h1 + p { margin-bottom:36px; }

.main .intro_video { position:relative; }
.main .intro_video.block:after { content:""; display:block; position:absolute; width:100%; height:62%; top:38%; left:0; background:#000; }
.main .intro_video > section { width:100%; height:0; padding-bottom:162%; position:relative; overflow:hidden; margin-bottom:85px; margin-top:-40px; }
.main .intro_video article { position:absolute; }
.main .intro_video figure { width:100%; overflow:hidden; position:relative; position:absolute; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); }
.main .intro_video video { height:105%; width:auto; position:absolute; top:-25px; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); }
.main .intro_video figure + article {  padding-top:40%; margin-top:40px; top:50%; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); }
.main .intro_video article:last-child { bottom:0; width:100%; text-align:center; }

.main .intro_video .placeholder { width:100%; height:0; padding-bottom:216.44%; }
.main .intro_video img { position:absolute; top:-25px; left:50%; width:auto; max-width:initial; height:105%; transform:translateX(-50%); -webkit-transform:translateX(-50%); }

.main .nars_world { width:100%; height:0; padding-bottom:162%; position:absolute; top:0; left:0; overflow:hidden; }
.main .nars_world > section:first-child { width:100%; position:absolute; top:0; left:0; height:100%; }
.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 p > span { display:block; }
.main .nars_world .instructions p > br { display:none; }
.main .nars_world .instructions > div { width:78.26%; height:45%; background:rgba(0,0,0,0.5); text-align:center; box-sizing:border-box; padding:50px 40px; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-30%); -webkit-transform:translateX(-50%) translateY(-30%); }
.main .nars_world .instructions > div > span { display:block; width:50px; height:50px; box-sizing:border-box; border:2px solid #FFF; margin:57px auto 0; position:relative; border-radius:50%; background:#000; }
/*.main .nars_world .instructions span:after { content:""; display:block; width:50px; height:50px; background:#000; border-radius:50%; position:absolute; top:3px; left:3px; }*/
.main .nars_world > section img { position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }
.main .nars_world > section div { height:inherit; }
.main .nars_world #jsv-holder { position:relative; width:105%; top:0; left:50%; transform:translateX(-50.75%); -webkit-transform:translateX(-50.75%); }

.main .hotspots > a { display:block; width:0; height:0; position:absolute; }
.main .hotspots > a:nth-child(1):after { content: "WATCH VIDEO"; display:block; position:absolute; top:-9px; right:18px; color:#FFF; font-size:13px; width:105px; }
.main .hotspots > a:nth-child(2):after { content: "PHOTO BOOTH"; display:block; position:absolute; top:18px; left:50%; color:#FFF; font-size:13px; width:108px; text-align:center; margin-left:-54px; }
.main .hotspots > a:nth-child(3):after { content: "PLAY & RECEIVE"; display:block; position:absolute; top:18px; left:50%; color:#FFF; font-size:13px; line-height:15px; width:60px; text-align:center; margin-left:-45px; }
.main .hotspots > a:nth-child(4):after { content: "TAKE QUIZ"; display:block; position:absolute; top:7px; left:50%; color:#000; font-size:13px; width:80px; text-align:center; margin-left:-35px; }

.main.th .hotspots > a:nth-child(1):after { content: "รับชมวิดิโอ"; width:85px; }
.main.th .hotspots > a:nth-child(2):after { content: "ร่วมทำแบบทดสอบ"; }
.main.th .hotspots > a:nth-child(3):after { content: "เล่นเกม      & รับของรางวัล"; width:80px; }
.main.th .hotspots > a:nth-child(4):after { content: "ตู้ถ่ายภาพ"; }

.main .hotspots > a > span { position:absolute; width:40px; height:40px; border-radius:50%; top:-20px; left:-20px; background:#F00; opacity:0; }

.main .hotspots > a.spot_1:nth-child(1) { top:53.5%; left:69.5%; }
.main .hotspots > a.spot_2:nth-child(1) { top:53.5%; left:69.5%; }
.main .hotspots > a.spot_3:nth-child(1) { top:53.5%; left:68.5%; }
.main .hotspots > a.spot_4:nth-child(1) { top:53.5%; left:68%; }
.main .hotspots > a.spot_5:nth-child(1) { top:53.5%; left:67.5%; }
.main .hotspots > a.spot_6:nth-child(1) { top:53.5%; left:66.5%; }
.main .hotspots > a.spot_7:nth-child(1) { top:53.5%; left:65.5%; }
.main .hotspots > a.spot_8:nth-child(1) { top:53.5%; left:64.5%; }
.main .hotspots > a.spot_9:nth-child(1) { top:53.5%; left:63.5%; }
.main .hotspots > a.spot_10:nth-child(1) { top:53.5%; left:62.5%; }
.main .hotspots > a.spot_11:nth-child(1) { top:53.5%; left:61.5%; }
.main .hotspots > a.spot_12:nth-child(1) { top:53.5%; left:60%; }
.main .hotspots > a.spot_13:nth-child(1) { top:53.5%; left:59%; }
.main .hotspots > a.spot_14:nth-child(1) { top:53.5%; left:57.5%; }
.main .hotspots > a.spot_15:nth-child(1) { top:53.5%; left:56.5%; }
.main .hotspots > a.spot_16:nth-child(1) { top:53.5%; left:54.5%; }
.main .hotspots > a.spot_17:nth-child(1) { top:53.5%; left:53.5%; }
.main .hotspots > a.spot_18:nth-child(1) { top:53.5%; left:52.5%; }
.main .hotspots > a.spot_19:nth-child(1) { top:53.5%; left:51%; }
.main .hotspots > a.spot_20:nth-child(1) { top:53.5%; left:49.5%; }
.main .hotspots > a.spot_21:nth-child(1) { top:53.5%; left:48.5%; }
.main .hotspots > a.spot_22:nth-child(1) { top:53.5%; left:47%; }
.main .hotspots > a.spot_23:nth-child(1) { top:53.5%; left:46%; }
.main .hotspots > a.spot_24:nth-child(1) { top:53.5%; left:44.5%; }
.main .hotspots > a.spot_25:nth-child(1) { top:53.5%; left:43%; }
.main .hotspots > a.spot_26:nth-child(1) { top:53.5%; left:42%; }
.main .hotspots > a.spot_27:nth-child(1) { top:53.5%; left:40.5%; }
.main .hotspots > a.spot_28:nth-child(1) { top:53.5%; left:39.5%; }
.main .hotspots > a.spot_29:nth-child(1) { top:53.5%; left:38%; }
.main .hotspots > a.spot_30:nth-child(1) { top:53.5%; left:37%; }
.main .hotspots > a.spot_31:nth-child(1) { top:53.5%; left:36%; }
.main .hotspots > a.spot_32:nth-child(1) { top:53.5%; left:35%; }
.main .hotspots > a.spot_33:nth-child(1) { top:53.5%; left:34%; }
.main .hotspots > a.spot_34:nth-child(1) { top:53.5%; left:33%; }
.main .hotspots > a.spot_35:nth-child(1) { top:53.5%; left:32%; }
.main .hotspots > a.spot_36:nth-child(1) { top:53.5%; left:31%; }
.main .hotspots > a.spot_37:nth-child(1) { top:53.5%; left:30%; }
.main .hotspots > a.spot_38:nth-child(1) { top:53.5%; left:29%; }
.main .hotspots > a.spot_39:nth-child(1) { top:53.5%; left:29%; }
.main .hotspots > a.spot_40:nth-child(1) { top:53.5%; left:28.5%; }
.main .hotspots > a.spot_41:nth-child(1) { top:53.5%; left:28.5%; }
.main .hotspots > a.spot_42:nth-child(1) { top:53.5%; left:27.5%; }
.main .hotspots > a.spot_43:nth-child(1) { top:53.5%; left:27.5%; }
.main .hotspots > a.spot_44:nth-child(1) { top:53.5%; left:27%; }
.main .hotspots > a.spot_45:nth-child(1) { top:53.5%; left:26%; }
.main .hotspots > a.spot_46:nth-child(1) { top:53.5%; left:26%; }
.main .hotspots > a.spot_47:nth-child(1) { top:53.5%; left:25.5%; }
.main .hotspots > a.spot_48:nth-child(1) { top:53.5%; left:25.5%; }
.main .hotspots > a.spot_49:nth-child(1) { top:53.5%; left:25.5%; }
.main .hotspots > a.spot_50:nth-child(1) { top:53.5%; left:25.5%; }
.main .hotspots > a.spot_51:nth-child(1) { top:53.5%; left:25.5%; }

.main .hotspots > a:nth-child(2) { display:none; }
.main .hotspots > a.spot_31:nth-child(2) { display:block; top:61%; left:64.5%; }
.main .hotspots > a.spot_32:nth-child(2) { display:block; top:61%; left:65%; }
.main .hotspots > a.spot_33:nth-child(2) { display:block; top:61%; left:66%; }
.main .hotspots > a.spot_34:nth-child(2) { display:block; top:61%; left:66.5%; }
.main .hotspots > a.spot_35:nth-child(2) { display:block; top:61%; left:67%; }
.main .hotspots > a.spot_36:nth-child(2) { display:block; top:61%; left:67.5%; }
.main .hotspots > a.spot_37:nth-child(2) { display:block; top:61%; left:68%; }
.main .hotspots > a.spot_38:nth-child(2) { display:block; top:61.5%; left:69%; }
.main .hotspots > a.spot_39:nth-child(2) { display:block; top:61.5%; left:69.5%; }
.main .hotspots > a.spot_40:nth-child(2) { display:block; top:61.5%; left:70%; }
.main .hotspots > a.spot_41:nth-child(2) { display:block; top:62%; left:70.5%; }
.main .hotspots > a.spot_42:nth-child(2) { display:block; top:62%; left:71%; }
.main .hotspots > a.spot_43:nth-child(2) { display:block; top:62%; left:71.5%; }
.main .hotspots > a.spot_44:nth-child(2) { display:block; top:62%; left:72%; }
.main .hotspots > a.spot_45:nth-child(2) { display:block; top:62%; left:72%; }
.main .hotspots > a.spot_46:nth-child(2) { display:block; top:62%; left:72.5%; }
.main .hotspots > a.spot_47:nth-child(2) { display:block; top:62.5%; left:72.5%; }
.main .hotspots > a.spot_48:nth-child(2) { display:block; top:62.5%; left:73%; }
.main .hotspots > a.spot_49:nth-child(2) { display:block; top:62.5%; left:73%; }
.main .hotspots > a.spot_50:nth-child(2) { display:block; top:62.5%; left:73%; }
.main .hotspots > a.spot_51:nth-child(2) { display:block; top:62.5%; left:73%; }

.main .hotspots > a:nth-child(3) { display:none; }
.main .hotspots > a.spot_1:nth-child(3) { display:block; top:59%; left:25.5%; }
.main .hotspots > a.spot_2:nth-child(3) { display:block; top:59%; left:25.5%; }
.main .hotspots > a.spot_3:nth-child(3) { display:block; top:59%; left:25.5%; }
.main .hotspots > a.spot_4:nth-child(3) { display:block; top:59%; left:25.5%; }
.main .hotspots > a.spot_5:nth-child(3) { display:block; top:59%; left:25.5%; }
.main .hotspots > a.spot_6:nth-child(3) { display:block; top:59%; left:26%; }
.main .hotspots > a.spot_7:nth-child(3) { display:block; top:59%; left:26%; }
.main .hotspots > a.spot_8:nth-child(3) { display:block; top:59%; left:26.5%; }
.main .hotspots > a.spot_9:nth-child(3) { display:block; top:59%; left:26.5%; }
.main .hotspots > a.spot_10:nth-child(3) { display:block; top:59%; left:27%; }
.main .hotspots > a.spot_11:nth-child(3) { display:block; top:58.5%; left:27.5%; }
.main .hotspots > a.spot_12:nth-child(3) { display:block; top:58.5%; left:28%; }
.main .hotspots > a.spot_13:nth-child(3) { display:block; top:58.5%; left:28.5%; }
.main .hotspots > a.spot_14:nth-child(3) { display:block; top:58.5%; left:29%; }
.main .hotspots > a.spot_15:nth-child(3) { display:block; top:58.5%; left:29.5%; }
.main .hotspots > a.spot_16:nth-child(3) { display:block; top:58.5%; left:30%; }
.main .hotspots > a.spot_17:nth-child(3) { display:block; top:58%; left:30.5%; }
.main .hotspots > a.spot_18:nth-child(3) { display:block; top:58%; left:31%; }
.main .hotspots > a.spot_19:nth-child(3) { display:block; top:58%; left:32%; }
.main .hotspots > a.spot_20:nth-child(3) { display:block; top:58%; left:33%; }
.main .hotspots > a.spot_21:nth-child(3) { display:block; top:58%; left:33.5%; }
.main .hotspots > a.spot_22:nth-child(3) { display:block; top:58%; left:34%; }
.main .hotspots > a.spot_23:nth-child(3) { display:block; top:58%; left:34.5%; }

.main .hotspots > a:nth-child(4) { display:none; }
.main .hotspots > a.spot_1:nth-child(4) { display:block; top:60.5%; left:39.5%; }
.main .hotspots > a.spot_2:nth-child(4) { display:block; top:60.5%; left:39.5%; }
.main .hotspots > a.spot_3:nth-child(4) { display:block; top:60.5%; left:40%; }
.main .hotspots > a.spot_4:nth-child(4) { display:block; top:60.5%; left:40%; }
.main .hotspots > a.spot_5:nth-child(4) { display:block; top:60.5%; left:40%; }
.main .hotspots > a.spot_6:nth-child(4) { display:block; top:60.5%; left:40.5%; }
.main .hotspots > a.spot_7:nth-child(4) { display:block; top:60.5%; left:40.5%; }
.main .hotspots > a.spot_8:nth-child(4) { display:block; top:60.5%; left:40.5%; }
.main .hotspots > a.spot_9:nth-child(4) { display:block; top:60.5%; left:40.5%; }
.main .hotspots > a.spot_10:nth-child(4) { display:block; top:60.5%; left:41%; }
.main .hotspots > a.spot_11:nth-child(4) { display:block; top:60.5%; left:41.5%; }
.main .hotspots > a.spot_12:nth-child(4) { display:block; top:60.5%; left:42%; }
.main .hotspots > a.spot_13:nth-child(4) { display:block; top:60.5%; left:42.5%; }
.main .hotspots > a.spot_14:nth-child(4) { display:block; top:60.5%; left:43%; }
.main .hotspots > a.spot_15:nth-child(4) { display:block; top:60.5%; left:43.5%; }
.main .hotspots > a.spot_16:nth-child(4) { display:block; top:60.5%; left:44%; }
.main .hotspots > a.spot_38:nth-child(4) { display:block; top:60.5%; left:55%; }
.main .hotspots > a.spot_39:nth-child(4) { display:block; top:60.5%; left:55%; }
.main .hotspots > a.spot_40:nth-child(4) { display:block; top:60.5%; left:55.5%; }
.main .hotspots > a.spot_41:nth-child(4) { display:block; top:60.5%; left:55.5%; }
.main .hotspots > a.spot_42:nth-child(4) { display:block; top:60.5%; left:56%; }
.main .hotspots > a.spot_43:nth-child(4) { display:block; top:60.5%; left:56.5%; }
.main .hotspots > a.spot_44:nth-child(4) { display:block; top:60.5%; left:57%; }
.main .hotspots > a.spot_45:nth-child(4) { display:block; top:60.5%; left:57.5%; }
.main .hotspots > a.spot_46:nth-child(4) { display:block; top:60.5%; left:58%; }
.main .hotspots > a.spot_47:nth-child(4) { display:block; top:60.5%; left:58.5%; }
.main .hotspots > a.spot_48:nth-child(4) { display:block; top:60.5%; left:58.5%; }
.main .hotspots > a.spot_49:nth-child(4) { display:block; top:60.5%; left:59%; }
.main .hotspots > a.spot_50:nth-child(4) { display:block; top:60.5%; left:59%; }
.main .hotspots > a.spot_51:nth-child(4) { display:block; top:60.5%; left:59%; }
/* end of intro css */

/* coming soon css */
.main .coming_soon { text-align:center; position:relative; padding-top:130px; padding-bottom:130px; }
.main .coming_soon .h1 { font-size:27px; font-weight:200; }
.main .coming_soon figure { width:170px; margin:40px auto 55px; }
/* end of coming soon css */

.swiper-button-next, .swiper-button-prev { color:#FFF; outline:0; }
.swiper-button-next:after, .swiper-button-prev:after { display:none; }
.swiper-button-next:before, .swiper-button-prev:before { display:block; content:""; border:solid #FFF; border-width:0 1px 1px 0; display:inline-block; padding:13px; }
.swiper-button-next:before { transform:rotate(-45deg); -webkit-transform:rotate(-45deg); }
.swiper-button-prev:before { transform:rotate(135deg); -webkit-transform:rotate(135deg);}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { right:25px; }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left:25px; }

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

.intro_video.fade > section { animation-name:fadeOut; animation-duration:0.3s; animation-fill-mode:forwards; }

.main .reveal-gesture { position:absolute; text-align:center; width:100%; bottom:60px; box-sizing:border-box; padding-left:30px; padding-right:30px; }
.main .reveal-gesture figure { width:45px; margin-left:auto; margin-right:auto; margin-bottom:20px; }

.main .instruction .btn_pri { padding-right:5px; padding-left:5px; }

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

.main .footnote { font-size:14px; color:#FFF; margin-top:10px; }
.main .footnote a { color:#FFF; }

.main .overlay_save { position: absolute; top:0; left:0; width:100%; height:100%; background:#000; z-index:1000; }
.main .overlay_save p { max-width:600px; text-align:center; margin:120px auto; }

@keyframes fadeOut {
    from { opacity:1; }
    to { opacity:0; }
}

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

@media only screen and (min-width: 414px) {
    .main .quiz .splash .h1 { width:100%; transform:translateX(0); -webkit-transform:translateX(0); }

    .main .nars_world .instructions p > span { display:inline; }
    .main .nars_world .instructions p > br { display:block; }
}

@media only screen and (min-width: 628px) {
    .main .coming_soon .h1 { font-size:35px; line-height:1.114em; }
    .main .coming_soon figure { width:500px; margin:40px auto 52px; }

    .main .flip_card .form .h2 br { display:none; }
}

@media only screen and (min-width: 728px) {
    .main .btn_close { width:85px; height:78px; }
    .main .btn_close span { display:block; width:30px; height:30px; top:21px; left:8px; }

    .main .flip_card .form { padding-top:64px; }
    .main .flip_card .btn_close { right:-20px; }

    .main .card { width:20%; }

    .main .presenter .gutter { padding-left:65px; padding-right:65px; }
    .main .presenter .btn_close { right:14px; }
    .main .presenter .video { padding-top:78px; }
    .main .presenter .video > section > article { max-width:100%; }
    .main .presenter .video_frame { padding-bottom:56.25%; }

    .main .coming_soon { padding-top:45px; padding-bottom:85px; }

    .main .intro_video.block:after { height:75%; top:35%; }
    .main .intro_video > section { height:630px; padding-bottom:0; margin-bottom:85px; margin-top:0; }
    .main .intro_video figure { height:133%; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }
    .main .intro_video figure + article { padding-top:0; top:530px; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); }

    .main .nars_world { height:630px; padding-bottom:0; top:0; overflow:visible; }
    .main .nars_world > section:first-child { width:1600px; left:50%; overflow:hidden; transform:translateX(-50%) translateY(0); -webkit-transform:translateX(-50%) translateY(0); }
    .main .nars_world #jsv-holder-desktop { position:relative; width:100%; top:0; left:50%; transform:translateX(-50.25%); -webkit-transform:translateX(-50.25%); }

    .main .hotspots { position:absolute; width:928px; height:0; top:-110px; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); }
    .main .hotspots > a.spot_1:nth-child(1) { top:458px; left:62%; }
    .main .hotspots > a.spot_2:nth-child(1) { top:458px; left:62%; }
    .main .hotspots > a.spot_3:nth-child(1) { top:458px; left:61.5%; }
    .main .hotspots > a.spot_4:nth-child(1) { top:458px; left:61%; }
    .main .hotspots > a.spot_5:nth-child(1) { top:458px; left:60.5%; }
    .main .hotspots > a.spot_6:nth-child(1) { top:458px; left:60%; }
    .main .hotspots > a.spot_7:nth-child(1) { top:458px; left:59%; }
    .main .hotspots > a.spot_8:nth-child(1) { top:458px; left:58.5%; }
    .main .hotspots > a.spot_9:nth-child(1) { top:458px; left:58%; }
    .main .hotspots > a.spot_10:nth-child(1) { top:458px; left:57%; }
    .main .hotspots > a.spot_11:nth-child(1) { top:458px; left:57%; }
    .main .hotspots > a.spot_12:nth-child(1) { top:458px; left:56%; }
    .main .hotspots > a.spot_13:nth-child(1) { top:458px; left:55%; }
    .main .hotspots > a.spot_14:nth-child(1) { top:458px; left:54.5%; }
    .main .hotspots > a.spot_15:nth-child(1) { top:458px; left:54%; }
    .main .hotspots > a.spot_16:nth-child(1) { top:458px; left:53%; }
    .main .hotspots > a.spot_17:nth-child(1) { top:458px; left:52.5%; }
    .main .hotspots > a.spot_18:nth-child(1) { top:458px; left:51.5%; }
    .main .hotspots > a.spot_19:nth-child(1) { top:458px; left:51%; }
    .main .hotspots > a.spot_20:nth-child(1) { top:458px; left:50%; }
    .main .hotspots > a.spot_21:nth-child(1) { top:458px; left:49%; }
    .main .hotspots > a.spot_22:nth-child(1) { top:458px; left:48.5%; }
    .main .hotspots > a.spot_23:nth-child(1) { top:458px; left:47.5%; }
    .main .hotspots > a.spot_24:nth-child(1) { top:458px; left:46.5%; }
    .main .hotspots > a.spot_25:nth-child(1) { top:458px; left:46%; }
    .main .hotspots > a.spot_26:nth-child(1) { top:458px; left:45.5%; }
    .main .hotspots > a.spot_27:nth-child(1) { top:458px; left:44.5%; }
    .main .hotspots > a.spot_28:nth-child(1) { top:458px; left:43.5%; }
    .main .hotspots > a.spot_29:nth-child(1) { top:458px; left:43%; }
    .main .hotspots > a.spot_30:nth-child(1) { top:458px; left:42%; }
    .main .hotspots > a.spot_31:nth-child(1) { top:458px; left:41.5%; }
    .main .hotspots > a.spot_32:nth-child(1) { top:458px; left:41%; }
    .main .hotspots > a.spot_33:nth-child(1) { top:458px; left:40.5%; }
    .main .hotspots > a.spot_34:nth-child(1) { top:458px; left:40%; }
    .main .hotspots > a.spot_35:nth-child(1) { top:458px; left:39.5%; }
    .main .hotspots > a.spot_36:nth-child(1) { top:458px; left:39%; }
    .main .hotspots > a.spot_37:nth-child(1) { top:458px; left:38.5%; }
    .main .hotspots > a.spot_38:nth-child(1) { top:458px; left:38%; }
    .main .hotspots > a.spot_39:nth-child(1) { top:458px; left:37.5%; }
    .main .hotspots > a.spot_40:nth-child(1) { top:458px; left:37%; }
    .main .hotspots > a.spot_41:nth-child(1) { top:458px; left:36.5%; }
    .main .hotspots > a.spot_42:nth-child(1) { top:458px; left:36%; }
    .main .hotspots > a.spot_43:nth-child(1) { top:458px; left:36%; }
    .main .hotspots > a.spot_44:nth-child(1) { top:458px; left:36%; }
    .main .hotspots > a.spot_45:nth-child(1) { top:458px; left:35.5%; }
    .main .hotspots > a.spot_46:nth-child(1) { top:458px; left:35.5%; }
    .main .hotspots > a.spot_47:nth-child(1) { top:458px; left:35.5%; }
    .main .hotspots > a.spot_48:nth-child(1) { top:458px; left:35.5%; }
    .main .hotspots > a.spot_49:nth-child(1) { top:458px; left:35.5%; }
    .main .hotspots > a.spot_50:nth-child(1) { top:458px; left:35.5%; }
    .main .hotspots > a.spot_51:nth-child(1) { top:458px; left:35.5%; }

    .main .hotspots > a:nth-child(2) { display:none; }
    .main .hotspots > a.spot_31:nth-child(2) { display:block; top:535px; left:58.5%; }
    .main .hotspots > a.spot_32:nth-child(2) { display:block; top:535px; left:59%; }
    .main .hotspots > a.spot_33:nth-child(2) { display:block; top:535px; left:60%; }
    .main .hotspots > a.spot_34:nth-child(2) { display:block; top:535px; left:60%; }
    .main .hotspots > a.spot_35:nth-child(2) { display:block; top:535px; left:60.5%; }
    .main .hotspots > a.spot_36:nth-child(2) { display:block; top:535px; left:61%; }
    .main .hotspots > a.spot_37:nth-child(2) { display:block; top:535px; left:61.5%; }
    .main .hotspots > a.spot_38:nth-child(2) { display:block; top:535px; left:61.5%; }
    .main .hotspots > a.spot_39:nth-child(2) { display:block; top:535px; left:62%; }
    .main .hotspots > a.spot_40:nth-child(2) { display:block; top:535px; left:62.5%; }
    .main .hotspots > a.spot_41:nth-child(2) { display:block; top:535px; left:62.5%; }
    .main .hotspots > a.spot_42:nth-child(2) { display:block; top:535px; left:63%; }
    .main .hotspots > a.spot_43:nth-child(2) { display:block; top:535px; left:63%; }
    .main .hotspots > a.spot_44:nth-child(2) { display:block; top:535px; left:63.5%; }
    .main .hotspots > a.spot_45:nth-child(2) { display:block; top:535px; left:63.5%; }
    .main .hotspots > a.spot_46:nth-child(2) { display:block; top:535px; left:63.5%; }
    .main .hotspots > a.spot_47:nth-child(2) { display:block; top:535px; left:63.5%; }
    .main .hotspots > a.spot_48:nth-child(2) { display:block; top:535px; left:63.5%; }
    .main .hotspots > a.spot_49:nth-child(2) { display:block; top:535px; left:64%; }
    .main .hotspots > a.spot_50:nth-child(2) { display:block; top:535px; left:64%; }
    .main .hotspots > a.spot_51:nth-child(2) { display:block; top:535px; left:64%; }

    .main .hotspots > a:nth-child(3) { display:none; }
    .main .hotspots > a.spot_1:nth-child(3) { display:block; top:505px; left:36%; }
    .main .hotspots > a.spot_2:nth-child(3) { display:block; top:505px; left:36%; }
    .main .hotspots > a.spot_3:nth-child(3) { display:block; top:505px; left:36%; }
    .main .hotspots > a.spot_4:nth-child(3) { display:block; top:505px; left:36%; }
    .main .hotspots > a.spot_5:nth-child(3) { display:block; top:505px; left:36%; }
    .main .hotspots > a.spot_6:nth-child(3) { display:block; top:505px; left:36%; }
    .main .hotspots > a.spot_7:nth-child(3) { display:block; top:505px; left:36%; }
    .main .hotspots > a.spot_8:nth-child(3) { display:block; top:505px; left:36.5%; }
    .main .hotspots > a.spot_9:nth-child(3) { display:block; top:505px; left:36.5%; }
    .main .hotspots > a.spot_10:nth-child(3) { display:block; top:505px; left:36.5%; }
    .main .hotspots > a.spot_11:nth-child(3) { display:block; top:505px; left:36.5%; }
    .main .hotspots > a.spot_12:nth-child(3) { display:block; top:505px; left:37%; }
    .main .hotspots > a.spot_13:nth-child(3) { display:block; top:505px; left:37%; }
    .main .hotspots > a.spot_14:nth-child(3) { display:block; top:505px; left:37.5%; }
    .main .hotspots > a.spot_15:nth-child(3) { display:block; top:505px; left:38%; }
    .main .hotspots > a.spot_16:nth-child(3) { display:block; top:505px; left:38%; }
    .main .hotspots > a.spot_17:nth-child(3) { display:block; top:505px; left:38.5%; }
    .main .hotspots > a.spot_18:nth-child(3) { display:block; top:505px; left:39%; }
    .main .hotspots > a.spot_19:nth-child(3) { display:block; top:505px; left:39%; }
    .main .hotspots > a.spot_20:nth-child(3) { display:block; top:505px; left:39.5%; }
    .main .hotspots > a.spot_21:nth-child(3) { display:block; top:505px; left:40%; }
    .main .hotspots > a.spot_22:nth-child(3) { display:block; top:505px; left:40.5%; }
    .main .hotspots > a.spot_23:nth-child(3) { display:block; top:505px; left:41%; }

    .main .hotspots > a:nth-child(4) { display:none; }
    .main .hotspots > a.spot_1:nth-child(4) { display:block; top:526px; left:43.5%; }
    .main .hotspots > a.spot_2:nth-child(4) { display:block; top:526px; left:43.5%; }
    .main .hotspots > a.spot_3:nth-child(4) { display:block; top:526px; left:43.5%; }
    .main .hotspots > a.spot_4:nth-child(4) { display:block; top:526px; left:44%; }
    .main .hotspots > a.spot_5:nth-child(4) { display:block; top:526px; left:44%; }
    .main .hotspots > a.spot_6:nth-child(4) { display:block; top:526px; left:44.5%; }
    .main .hotspots > a.spot_7:nth-child(4) { display:block; top:526px; left:44.5%; }
    .main .hotspots > a.spot_8:nth-child(4) { display:block; top:526px; left:45%; }
    .main .hotspots > a.spot_9:nth-child(4) { display:block; top:526px; left:45%; }
    .main .hotspots > a.spot_10:nth-child(4) { display:block; top:526px; left:45%; }
    .main .hotspots > a.spot_11:nth-child(4) { display:block; top:526px; left:45%; }
    .main .hotspots > a.spot_12:nth-child(4) { display:block; top:526px; left:45.5%; }
    .main .hotspots > a.spot_13:nth-child(4) { display:block; top:526px; left:45.5%; }
    .main .hotspots > a.spot_14:nth-child(4) { display:block; top:526px; left:45.5%; }
    .main .hotspots > a.spot_15:nth-child(4) { display:block; top:526px; left:46%; }
    .main .hotspots > a.spot_16:nth-child(4) { display:block; top:526px; left:46.5%; }
    .main .hotspots > a.spot_38:nth-child(4) { display:block; top:526px; left:52.5%; }
    .main .hotspots > a.spot_39:nth-child(4) { display:block; top:526px; left:53%; }
    .main .hotspots > a.spot_40:nth-child(4) { display:block; top:526px; left:53.5%; }
    .main .hotspots > a.spot_41:nth-child(4) { display:block; top:526px; left:53.5%; }
    .main .hotspots > a.spot_42:nth-child(4) { display:block; top:526px; left:54%; }
    .main .hotspots > a.spot_43:nth-child(4) { display:block; top:526px; left:54%; }
    .main .hotspots > a.spot_44:nth-child(4) { display:block; top:526px; left:54.5%; }
    .main .hotspots > a.spot_45:nth-child(4) { display:block; top:526px; left:54.5%; }
    .main .hotspots > a.spot_46:nth-child(4) { display:block; top:526px; left:55%; }
    .main .hotspots > a.spot_47:nth-child(4) { display:block; top:526px; left:55%; }
    .main .hotspots > a.spot_48:nth-child(4) { display:block; top:526px; left:55%; }
    .main .hotspots > a.spot_49:nth-child(4) { display:block; top:526px; left:55.5%; }
    .main .hotspots > a.spot_50:nth-child(4) { display:block; top:526px; left:55.5%; }
    .main .hotspots > a.spot_51:nth-child(4) { display:block; top:526px; left:55.5%; }

    .main .presenter .video_placeholder img.play_btn { width:80px; height:80px; }

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

    .main .intro_video article:last-child { bottom:-40px; }

    .main .reveal-gesture { bottom:-35px; }
    .main .nars_world .instructions > div { height:60%; }
}

@media only screen and (min-width: 768px) {
    .h1 { font-size:68px; }
    .h2 { font-size:28px; }
    .p1, .p1 p { font-size:27px; }

    .h1 + .h2 { margin-top:14px; }

    .main .intro_video .h1 { font-size:31px; }

    .main input { padding-left:20px; padding-right:18px; }
    .main .btn_pri { height:43px; line-height:43px; }

    .main fieldset + fieldset { margin-top:12px; }
    .main label.checbox_container { margin-top:20px; }

    .main .presenter .video > section > article:not(:first-child) > p { font-size:15px; }

    .main .flip_card .form { max-width:1110px; margin-left:auto; margin-right:auto; }
    .main .flip_card .form .fields { max-width:710px; margin-left:auto; margin-right:auto; margin-top:29px; }
    .main .flip_card .form fieldset + p { margin-top:35px; }
    .main .flip_card input { height:43px; line-height:43px; }
    .main .flip_card .form .btn_pri { width:350px; }

    .main .flip_card .game > section:first-child p { max-width:410px; margin-left:auto; margin-right:auto; }
    .main .flip_card .game .tagline { max-width:560px; }

    .main .flip_card .message { max-width:790px; margin-left:auto; margin-right:auto; }
    .main .flip_card .message .h1 + .h2 { margin-top:30px; margin-bottom:45px; }

    .main .quiz .splash { padding-top:28px; }
    .main .quiz .splash > section { display:flex; flex-wrap:wrap; }
    .main .quiz .splash > section > * { width:50%; }
    .main .quiz .splash > section > article { padding-top:130px; }
    .main .quiz .h1 { font-size:31px; }
    .main .quiz p, .main .quiz ul { font-size:15px; }

    .main .quiz .questions { padding-top:78px; }
    .main .quiz .questions .question { display:flex; flex-wrap:wrap; }
    .main .quiz .questions .question > * { width:50%; }
    .main .quiz .questions .question > div { padding-top:80px; }
    .main .quiz .questions .question:last-child > div { margin-left:25%; }
    .main .quiz .questions figure.empty { padding-bottom:0; height:115px; }

    .main .quiz .form { padding-top:64px; max-width:1110px; margin-left:auto; margin-right:auto; }
    .main .quiz .form .h1 { font-size:68px; }
    .main .quiz .form .h1 + p { font-size:28px; margin-top:14px; }
    .main .quiz .form .fields { margin-top:29px; max-width:710px; margin-left:auto; margin-right:auto; }
    .main .quiz .form .fields input { height:43px; line-height:43px; font-size:21px; padding-left:18px; padding-right:18px; }
    .main .quiz .form .fields fieldset { width:calc(50% - 6px); }
    .main .quiz .form .fields fieldset:first-child { margin-right:12px; }
    .main .quiz .form .fields fieldset + fieldset { margin-top:12px; }
    .main .quiz .form label.checbox_container { margin-top:32px; }
    .main .quiz .form .ctas { margin-top:36px; display:flex; }
    .main .quiz .form .ctas > p { width:50%; }
    .main .quiz .form .ctas > p:first-child { padding-right:6px; }
    .main .quiz .form .ctas > p:last-child { padding-left:6px; }
    .main .quiz .form .btn_sec { font-size:22px; height:43px; line-height:43px; max-width:100%; }

    .main .quiz .congrat { padding-top:78px; }
    .main .quiz .congrat > section > article { width:50%; position:relative; box-sizing:border-box; padding-left:20px; padding-right:20px; }
    .main .quiz .congrat .results img { position:absolute; top:0; left:100%; }
    .main .quiz .congrat .recommend_products .products { position:absolute; width:100%; top:0; left:100%; }
    .main .quiz .congrat .recommend_products { padding-bottom:113px; }

    .main .gallery .splash { display:flex; flex-wrap:wrap; position:relative; padding-top:58px; }
    .main .gallery .splash .h1 { font-size:27px; }
    .main .gallery .splash > section { width:50%; }
    .main .gallery .splash > section:first-child { padding-top:175px; }
    .main .gallery .splash > section:nth-child(2) { position:absolute; bottom:75px; left:0; width:calc(50% + 18px); }

    .main .gallery .btn_close { right:-15px; }

    .main .gallery .booth .instruction > p:first-child { font-size:16px; }
    .main .gallery .booth .h2 + p { font-size:17px; }

    .main .reveal-gesture p { font-size:15px; }
}

@media only screen and (min-width: 920px) {
    .main .flip_card .game { display:flex; flex-wrap:wrap; position:relative; padding-top:36px; }
    .main .flip_card .game > section:first-child { width:calc(100% - 488px); box-sizing:border-box; padding-left:45px; padding-right:45px; padding-top:186px; }
    .main .flip_card .game > section:first-child br { display:none; }
    .main .cards { width:488px; }
    .main .card { width:122px; padding-left:6px; padding-right:6px; }
    .main .card_holder { padding-bottom:calc(100% + 12px); }
    .main .flip_card .game .tagline { position:absolute; bottom:87px; left:0; max-width:100%; width:calc(100% - 516px); box-sizing:border-box; padding-left:75px; padding-right:45px; }
    .main .flip_card .game .tagline img { max-width:560px; margin-left:auto; margin-right:auto; }

    .main .gallery .booth > section { position:relative; min-height:600px; display:flex; flex-wrap:wrap; }
    .main .gallery .booth > section > article { width:50%; margin-right:50%; }
    .main .gallery .booth > section > div { width:50%; margin-right:50%; }
    .main .gallery .booth > section > section { position:absolute; top:0; left:50%; }
    .main .gallery .booth .instruction > p:first-child { position:absolute; bottom:0; left:50%; width:50%; max-width:365px; }
}

@media only screen and (min-width: 1000px) {
    .main .presenter .gutter { padding-left:0; padding-right:0; width:54.00%; }
    .main .presenter .video > section { position:relative; }
    .main .presenter .video > section > article { margin-right:65px; }
    .main .presenter .video > section > article:first-child { z-index:1000; position:relative; }
    .main .presenter .video > section > article:not(:first-child) { width:100%; position:absolute; bottom:0; left:0; text-align:left; padding-left:65px; padding-right:65px; }
    .main .presenter .video > section > article:not(:first-child) > p { width:46.00%; box-sizing:border-box; padding-right:100px; }

    .main .gallery .splash .h1 br { display:none; }
}

@media only screen and (min-width: 1128px) {
    .main .quiz .h1 { font-size:46px; }
    .main .quiz .h1 + p { margin-top:11px; margin-bottom:44px; }
    .main .quiz p, .main .quiz ul { font-size:26px; }
    .main .quiz .questions ul { margin-top:22px; }
    .main .quiz .questions li:not(:first-child) { margin-top:11px; }
    .main .quiz .btn_option, .main .quiz .questions li a { height:46px; line-height:44px; max-width:420px; }
    .main .quiz .questions .tone { line-height:46px; }
    .main .btn_pri.view_recommendation { max-width:420px; width:100%; }
}

@media only screen and (min-width: 1168px) {
    .main .cards { width:610px; }
    .main .flip_card .btn_close { right:-10px; }
    .main .flip_card .game > section:first-child { width:calc(100% - 610px); }
    .main .flip_card .game .tagline { width:calc(100% - 638px); }

    .main .gallery .splash .photos div:nth-child(n+10) { display:none; }
    .main .gallery .splash .photos article { padding-bottom:100%; }

    .main .gallery .booth { max-width:1168px; margin-left:auto; margin-right:auto; }
    .main .gallery .booth .h2 { font-size:52px; line-height:1.125em; }
    .main .gallery .booth .h2 + p { font-size:27px; }
    .main .gallery .booth > section > article, .main .gallery .booth > section > div { width:calc(100% - 365px); margin-right:365px; }
    .main .gallery .booth > section > article { margin-top:95px; position:relative; }
    .main .gallery .booth > section > section { right:36.5px; left:auto; }
    .main .gallery .booth .instruction { margin-top:-50px; }
    .main .gallery .booth .instruction > p:first-child { width:365px; left:auto; right:45px; bottom:30px; }
}

@media only screen and (min-width: 1280px) {
    .main .intro_video > section { padding-bottom:0; margin-bottom:0; }
    .main .intro_video article:last-child { bottom:70px; left:0; text-align:center; box-sizing:border-box; padding-left:0; }

    .main .intro_video.block:after { height:65%; }
    .main .intro_video { padding-bottom:125px; }
}

@media only screen and (min-width: 1400px) {
    .main .presenter .video > section > article { margin-right:auto; }
    .main .presenter .video > section > article:not(:first-child) > p { width:23.00%; padding-right:60px; }
}

@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;
    }
}