@font-face {
  font-family: "Grota Rounded";
  src: url("../fonts/GrotaRoundedBlack.woff2") format("woff2"), url("../fonts/GrotaRoundedBlack.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "GrotaRoundedExtraBold";
  src: url("../fonts/GrotaRoundedExtraBold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "blockBE";
  src: url("../fonts/BlockBE.woff2") format("woff2"), url("../fonts/BlockBE.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}



body { font-family: "blockBe", sans-serif;}
button { font-family: "blockBe", sans-serif; font-size: 1em;}
input[type=text] { font-family: "blockBe", sans-serif; font-size: 1em;}
textarea { font-family: "blockBe", sans-serif; font-size: 1em;}
select { font-family: "blockBe", sans-serif; font-size: 1em;}

html { box-sizing: border-box; line-height: 1.4; scroll-behavior: smooth; overflow-x: hidden; }
body { background: #000; margin: 0;position: relative; color: white; min-height: 100vh; font-size: 16px; }
.clear {clear:both; display: block;}
.alignL {text-align: left;}
.alignC {text-align: center;}
.alignR {text-align: right;}
.pb:before {content: ""; display: block; margin-bottom: 30px; padding-top: 1px; }
.pa:after { content: ""; display: block; margin-top: 30px;  padding-bottom: 1px; }
.pa_buds:after { content: ""; display: block; margin-top: 70px;  padding-bottom: 1px; }
.pa_pack:after { content: ""; display: block; margin-top: 250px;  padding-bottom: 1px; }

a, a:visited {  color: white;}
a:hover { color: #ffd004;}

.buttonContainer { margin: 10px 0;}
.buttonContainer a {display:block; border: 3px solid #fff; color: #000; color: rgba(0,0,0,0.9); background: #ffd004; font-size: 2em; text-align:center; text-decoration: none; padding: 15px 5px; line-height: 1; outline: none; border-radius: 8px; transition: all 0.2s ease;}
.buttonContainer.x2:after {content: ""; display:block; clear: both;}
.buttonContainer.x2 a {width: 40%; width: calc(50% - 10px); float: left; box-sizing: border-box;}
.buttonContainer.x2 a:nth-child(2) {float: right;}
.buttonContainer a:hover {box-shadow: 0px 0px 5px 5px rgba(0,48,69,0.5); }

.container {position: relative; width: 100%; max-width: 400px; padding: 0 30px; margin: 0 auto; box-sizing: border-box;}
.containerWide {position: relative; width: 100%; max-width: 600px; padding: 0 30px; margin: 0 auto; box-sizing: border-box;}

.logo {width: 90%; display: block; margin: 30px auto 10px auto;}
.smallTitle {font-size: 1.4em; margin: 30px 0 10px 0; font-family: "blockBe", sans-serif; font-weight: 400;}
.mediumTitle {font-size: 1.7em; margin: 30px 0 10px 0; font-family: "blockBe", sans-serif; font-weight: 400;}
.largeTitle {font-size: 2em; margin: 30px 0 10px 0; font-family: "blockBe", sans-serif; font-weight: 400;}
.narrow { font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400;}

.imageTitle {position: relative; margin: 10px auto 20px auto;}
.imageTitle i {position: relative; display: block; background-position: center; background-repeat: no-repeat; background-size: contain; }
.imageTitle b {position: absolute; top: 0; left: 0; font-size: 12px; color: transparent; user-select: none; }
.imageTitle.chance i {background-image: url("../img/chance.svg"); padding-bottom: 7.5%}
.imageTitle.lockUp i {background-image: url("../img/lockup.svg"); padding-bottom: 92.18%}
.imageTitle.simply i {background-image: url("../img/simply.svg"); padding-bottom: 5.35%}
.imageTitle.welcome i {background-image: url("../img/welcome.svg"); padding-bottom: 17.99%}
.imageTitle.sorry i {background-image: url("../img/sorry.svg"); padding-bottom: 57.77%}
.imageTitle.won i {background-image: url("../img/won.svg"); padding-bottom: 60.92%}
.imageTitle.congratulations i {background-image: url("../img/congratulation.svg"); padding-bottom: 74.47%}

.blackBar {position: relative; margin: 30px -50px; background: #000; color: #ffd004; transform: rotate(-3deg);}

header {position: relative; background: #000; color: #fff; border-top: 11px solid #ffd004; border-bottom: 5px solid #fff; }
header a.navButton {position: relative; display: block; padding: 25px 30px; width: 45px; }
header a.navButton b {position: relative; display: block; width: 45px; height: 25px; }
header a.navButton i {position: absolute; left: 0; width: 100%; height: 3px; background: #fff; border-radius: 2px; }
header a.navButton:hover i {background: #ffd004; }
header a.navButton i:nth-child(1){top: 0;}
header a.navButton i:nth-child(2){top: 11px;}
header a.navButton i:nth-child(3){bottom: 0;}
header .topLogo {position: absolute; top: 0; right: 30px; height: 100%; width: 70px; background: url("../img/logo.png") center no-repeat; background-size: contain; }
@media screen and (max-width: 600px) {
	header a.navButton {padding: 25px 20px;}
	header .topLogo {right: 30px;}
}
.main {position: relative; overflow: hidden; background: #10a9e0;}
.main::before {content: ""; position: absolute; left: 50%; top: 100%; width: 10000px; height: 10000px; margin-left: -5000px; margin-top: -5000px; background: url("../img/shine.svg") center no-repeat; background-size: cover;animation: spin 90s linear infinite;  }

.mainNoAnimation {position: relative; overflow: hidden; background: #10a9e0;}
.mainNoAnimation::before {content: ""; position: absolute; left: 50%; top: 100%; width: 10000px; height: 10000px; margin-left: -5000px; margin-top: -5000px; background: url("../img/shine.svg") center no-repeat; background-size: cover; }

.mainNoShine {position: relative; overflow: hidden; background: #10a9e0;}


.nav {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 100;overflow: hidden;cursor: pointer;}
.nav > div {background-color: #000; position: absolute; top: 0; left: 0; width: 0; height: 100%; cursor: default; }
.nav > div > div a.close {position: relative; display: block; padding: 30px}
.nav > div > div a.close b {position: relative; display: block; width: 30px; height: 30px; }
.nav > div > div a.close b::before {content: ""; position: absolute; left: 50%; top: 50%; width: 42px; height: 3px; margin-left: -21px; margin-top: -1.5px; background: #fff; transform: rotate(45deg)} 
.nav > div > div a.close b::after {content: ""; position: absolute; left: 50%; top: 50%; width: 42px; height: 3px; margin-left: -21px; margin-top: -1.5px; background: #fff; transform: rotate(-45deg)} 
.nav > div > div a.close b:hover::before {background: #ffd004;} 
.nav > div > div a.close b:hover::after {background: #ffd004;}
.nav > div > div {position: absolute; right: 0; top; 0; width: 500px; height: 100%; border-right: 5px solid #fff; box-sizing: border-box;}
.nav > div > div ul {position: relative; margin: 0; padding: 0; list-style: none; color: white;}
.nav > div > div ul li {padding: 0; margin: 0; }
.nav > div > div ul li a {display: block; position: relative; padding: 20px 30px;text-decoration: none; font-size: 1.4em }

.reveal {position: relative; }
.reveal .revealInner {position: relative; opacity: 0; animation: reveal 1s linear; animation-delay: 7s; animation-fill-mode: forwards;}
.reveal .revealInner .buttonContainer {margin: 50px auto 120px auto;}
.reveal .aniContainer {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center;color: #fff; animation: aniContainer 1s linear; animation-delay: 7s; animation-fill-mode: forwards;}
.reveal .aniContainer .pretzel {position: absolute; left: 50%; top: 50%; width: 300px; height: 264px; margin-left: -150px; margin-top: -132px; opacity: 0; animation: pretzel 1s ease-out; animation-delay: 1s; animation-fill-mode: forwards; }
.reveal .aniContainer .pretzel img {position: absolute; width: 100%; top: 0; left: 0; animation: pretzelInner 1s 3 linear; }
.reveal .aniContainer .pretzel img:nth-child(1) {z-index: 3; animation-delay: 1s; }
.reveal .aniContainer .pretzel img:nth-child(2) {z-index: 2; animation-delay: 1.03s; opacity: 0.5}
.reveal .aniContainer .pretzel img:nth-child(3) {z-index: 1; animation-delay: 1.06s; opacity: 0.25}
.reveal .aniContainer .text {z-index: 4; position: absolute; top: 50%; left: 0; font-size: 110px; width: 100%; line-height: 0; opacity: 0; position: absolute; animation: text 0.6s; animation-delay: 4s; animation-fill-mode: forwards;}

@keyframes pretzel {
	0% { opacity: 0; transform: scale(0.3) }
	100% { opacity: 1; transfrom: scale(1) }
}
@keyframes pretzelInner {
	0% {transform: rotateY(0deg);}
	100% {transform: rotateY(359deg);}
}

@keyframes text {
	0% { opacity: 0; transform: scale(0.3) }
	60% {opacity: 1; transform: scale(1.2)}
	100% { opacity: 1; transfrom: scale(1) }
}
@keyframes aniContainer {
	0% {opacity: 1; }
	100% { opacity: 0; }
}
@keyframes reveal {
	0% {opacity: 0; }
	100% { opacity: 1; }
}



#modal {position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); z-index: 200; cursor: pointer; }
#modal .inner { position: absolute; width: 100%; max-width: 640px; cursor: default; padding: 26px; box-sizing: border-box; }
#modal .inner #content { position: relative; max-height: 90vh; max-height: calc(100% - 60px); background: #10a9e0; border: 5px solid #fff; border-radius: 8px; padding: 0 30px; text-align: left; }
#modal .inner #content:before { content: ""; display: block; margin-bottom: 30px; padding-top: 1px; }
#modal .inner #content:after { content: ""; display: block; margin-top: 30px; padding-bottom: 1px; }
#modal .inner .closeButton { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background: #000; border-radius: 50%; border: 3px solid #fff; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3); }
#modal .inner .closeButton:before { content: ""; position: absolute; background: #fff; width: 24px; height: 3px; top: 50%; left: 50%; margin-top: -1.5px; margin-left: -12px; transform: rotate(45deg);  border-radius: 2px; }
#modal .inner .closeButton:after { content: ""; position: absolute; background: #fff; width: 24px; height: 3px; top: 50%; left: 50%; margin-top: -1.5px; margin-left: -12px; transform: rotate(-45deg); border-radius: 2px; }
#modal .inner .closeButton:hover { -webkit-transform: scale(1.05); transform: scale(1.05); }
#modal .inner .closeButton:hover:before {background: #ffd004; }
#modal .inner .closeButton:hover:after {background: #ffd004; }
#modal .inner .captcha { margin: 10px auto; width: 304px; height: 78px; }
#modal .inner .formContainer .submit button { font-size: 20px; }

.faqs {position: relative; margin: 10px auto 30px auto;}
.faqs .faq {margin: 10px 0; font-size: 1.2em;}
.faqs .faq > a {display: block; position: relative; text-decoration: none; padding: 10px 40px 10px 20px; color: #ffd004; background: #000;}
.faqs .faq > a:after {content: ""; position: absolute; right: 20px; top: 50%; margin-top: -10px; width: 8px; height: 8px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); }
.faqs .faq > div {position: relative; height: 0; overflow: hidden; color: #fff;}
.faqs .faq > div > div {position: absolute;bottom: 0;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box; padding: 0 20px; background: rgba(255,255,255,0.5); color: #000; }
.faqs .faq > div > div:before {content: ""; display: block; padding-top: 1px; margin-bottom: 10px;}
.faqs .faq > div > div:after {content: ""; display: block; padding-bottom: 1px; margin-top: 10px;}
.faqs .faq.open > a {color: #fff;}
.faqs .faq.open > a i {-webkit-box-shadow: none;box-shadow: none;}
.faqs .faq.open > a:after {transform: rotate(-135deg)}
.faqs .faq.open > div {height: auto;}
.faqs .faq.open > div > div {position: relative;}
.faqs .faq a {color: #ffd004;}
.faqs .faq.open a {color: #ffd004;}
.faqs .faq.open > div a {color: #000000;} /*ML - 13.08 - Added to set links in FAQs to be black to help readability*/
.faqs .faq.open a i.fa-angle-up {display: block;}
.faqs .faq.open a i.fa-angle-down {display: none;}

.formContainer {position: relative;margin: 20px 0; }
.formContainer .field {position: relative; margin: 10px 0;}
.formContainer .field input[type="text"] {display: block; width: 100%; box-sizing: border-box; color: #000000; color: rgba(0,0,0,0.9); font-size: 1.6em; background: #ffd004; padding: 15px 15px; line-height: 1; border: 3px solid #fff; outline: none; border-radius: 8px; }
.formContainer .field input[type="text"]:focus {box-shadow: 0px 0px 5px 5px rgba(0,48,69,0.5);}
.formContainer .field textarea {display: block;width: 100%;height: 150px;-webkit-box-sizing: border-box;box-sizing: border-box;color: #fff;background: rgba(0, 0, 0, 0.2); font-size: 1em; font-weight: 700;text-align: center; padding: 12px 20px;outline: none;border-radius: 8px;-webkit-transition: all 0.2s ease;transition: all 0.2s ease;}
.formContainer .field textarea:focus {box-shadow: 0px 0px 5px 5px rgba(0,48,69,0.5);}
.formContainer .field.fieldError input[type="text"] {border-color: #e91721;}
.formContainer .field.fieldError textarea {border-color: #e91721;}


.formContainer .field label {display: block; margin-bottom: 3px; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 1.4em; color: #000; }
.formContainer .footNote {font-size: 0.95em;}
.formContainer .description {font-weight: 300; font-size: 0.95em; font-family: 'Yanone Kaffeesatz', sans-serif; margin: 10px 0;  }
.formContainer .description ul {margin: 5px auto;}
.formContainer .error {color: #e91721; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 1.4em;}
.formContainer div.error {padding: 0 17px; margin: 3px 0 10px 0;}
.formContainer .field.divide {margin-top: 25px;margin-bottom: -5px;}
.formContainer .field .floatingLabel {position: relative; }
.formContainer .field .floatingLabel label {position: absolute; color: #000; top: 22px; line-height: 1; left: 20px; z-index: 1; transition: all 0.2s ease; pointer-events: none; }
.formContainer .field .floatingLabel.active label {top: 9px; font-size: 12px; color: #000; color: rgba(0,0,0,0.7);}
.formContainer .field .floatingLabel input[type="text"] {padding: 20px 15px 10px 15px;}
.formContainer .field .floatingLabel textarea {padding: 15px 20px 9px 20px;}
.formContainer .checkbox {display: flex; align-items: center; ;position: relative; margin: 20px 0; padding: 0 80px 0 20px; outline: none; min-height: 46px; font-family: 'Yanone Kaffeesatz', sans-serif; box-sizing: border-box;}
.formContainer .checkbox i.check {position: absolute; right: 20px; top: 0; cursor: pointer;font-size: 25px;line-height: 0; padding: 20px 0;width: 42px; text-align: center; color: transparent; background: #ffd004; border-radius: 8px;border: 3px solid #fff;}
.formContainer .checkbox.checked i.check {color: #000; color: rgba(0,0,0,0.9);}
.formContainer .checkbox a {color: #fff;text-decoration: underline;}
.formContainer .checkbox:focus i.check {box-shadow: 0px 0px 5px 5px rgba(0,48,69,0.5);}

.formContainer .checkbox .error {margin-left: 17.5%;}
.formContainer .field.fieldError .checkbox i.check {border-color: #e91721;}
.formContainer .submit {position: relative; margin: 20px 0;}
.formContainer .submit button {display: block; width: 100%; box-sizing: border-box; color: #fff; font-size: 1.6em; background: #000; padding: 15px 5px; line-height: 1; border: 3px solid #fff; outline: none; border-radius: 8px; cursor:pointer; transition: all 0.2s ease; }
.formContainer .submit button:hover {box-shadow: 0px 0px 5px 5px rgba(0,48,69,0.5); }

.formContainer.waiting .submit button {color: transparent;}
.formContainer.waiting .submit button:hover {color: transparent; }
.formContainer.waiting .submit button:after {content: "";position: absolute;display: block;left: 50%;top: 50%;margin-top: -12px;margin-left: -12px;border: 4px solid #fff;border-top: 4px solid #555;border-radius: 50%;width: 24px;height: 24px;animation: spin 1.5s linear infinite; box-sizing: border-box;}
.formContainer.waiting:after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.formContainer .field .uploaderContainer { font-size: 1.15em; line-height: 1.15; }
.formContainer .field .uploaderContainer .uploaderInner {position: relative; padding-left: 110px; min-height: 100px; font-family: 'Yanone Kaffeesatz', sans-serif; }
.formContainer .field .uploaderContainer .uploaderInner .thumb {display: block; position: absolute; top: 0; left: 0; width: 100px; height: 100px; cursor:pointer; overflow: hidden;border: 3px solid #fff; border-radius: 8px; box-sizing: border-box; background-color: #ccc; background-size: cover; background-position: center;  }
.formContainer .field .uploaderContainer .uploaderInner .thumb b {position: absolute; bottom: 0; left: 0; width: 100%; padding-top: 2px; font-size: 15px; line-height: 1.1; color: #000; background: #ffd004;  border-top: 3px solid #fff; text-align:center}
.formContainer .field .uploaderContainer .uploaderInner .thumb > i {position: absolute; top: 43%; left: 0; width: 100%; line-height: 0; color: #aaa; text-align:center; font-size: 30px;  }
.formContainer .field .uploaderContainer .uploaderInner .thumb .clear {position: absolute; display:none; top: 0; right: 0; width: 18px; padding: 3px 0; color: #fff; background: #e91721;; text-align:center; font-size: 12px; line-height: 1; text-decoration: none; border-bottom-left-radius: 5px; }
.formContainer .field .uploaderContainer .uploaderInner .thumb .progress {position: absolute; left: 0; bottom: 0; width: 100%; border-top: 3px solid #fff; height: 10px; background: #fff; box-sizing: border-box;}
.formContainer .field .uploaderContainer .uploaderInner .thumb .progress div {position: absolute; left: 0; top: 0; height: 100%; background: #e91721; }
.formContainer .field .uploaderContainer .uploaderInner .uploadLink {display: block; background: #ffd004; padding: 6px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; color: #000; border-width: 0 3px 3px 3px; border-style: solid; border-color: #fff; font-size: 0.8em; color: rgba(0,0,0,0.9); text-decoration: none; text-align: center; }
.formContainer .field.fieldError .uploaderContainer .uploaderInner .thumb {border-color: #e91721;}

.formContainer .field .uploaderContainer .uploaderInner .thumb.thumbActive i {display:none; }
.formContainer .field .uploaderContainer .uploaderInner .thumb.thumbActive b {display:none; }
.formContainer .field .uploaderContainer .uploaderInner .thumb.thumbActive .clear {display:block; } 
.formContainer .field .uploaderContainer .uploaderInner ul {margin: 0; padding: 0; list-style: none; }
.formContainer .field .uploaderContainer .uploaderInner ul li {margin: 0; padding: 0 0 0 8px; position: relative; }
.formContainer .field .uploaderContainer .uploaderInner ul li:before {content: ""; position: absolute; top: 6px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #fff;}
.formContainer .field .uploaderContainer .error {display:none;}
.formContainer .field.fieldError .uploaderContainer .error {display:block;}
@media screen and (max-width: 450px) {
	.formContainer .field .uploaderContainer { font-size: 1em; }
}
@media screen and (max-width: 410px) {
	.formContainer .field .uploaderContainer { font-size: 0.95em; }
}

.uploadForm {display:none;}


footer {position: relative; text-align: center; font-family: "GrotaRoundedExtraBold";  }
footer.buds:before {content: ""; position: absolute; left: 5%; top: -82px; height: 279px; width: 90%; background: url("../img/buds.png") center no-repeat; background-size: contain; }
footer.buds .container.pb:before {margin-bottom: 130px; }
footer.pack:before {content: ""; position: absolute; left: 5%; top: -225px; height: 450px; width: 90%; background: url("../img/pack.png") center no-repeat; background-size: contain; }
footer.pack .container.pb:before {margin-bottom: 170px; }

footer hr {margin: 20px auto; width: 100%; max-width: 200px; border: none; height: 1px; background: rgba(255,255,255,0.2);}
footer:after {content: ""; display: block; height: 11px; background: #ffd004;background: -webkit-gradient(linear, left top, left bottom, from(#ffd004), to(#f9b000));background: linear-gradient(to bottom, #ffd004 0%, #f9b000 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd004', endColorstr='#f9b000',GradientType=0 );}
footer .smallTerms {font-size: 13px; font-family: 'Yanone Kaffeesatz', sans-serif; }
footer .socials {position: relative; margin: 20px 0; color: #fff; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 24px; letter-spacing: 1px }
footer .socials > div {position: relative; margin-top: 10px; }
footer .socials > div a {display: inline-block; width: 35px; height: 35px; margin: 0 10px; background-position: center; background-size: contain; background-repeat: no-repeat; transition: all 0.2s ease }
footer .socials > div a:hover {transform: scale(1.1); }
footer .socials > div a.fb {background-image: url("../img/social_fb.svg")}
footer .socials > div a.tt {background-image: url("../img/social_tt.svg")}
footer .socials > div a.in {background-image: url("../img/social_in.svg")}
footer .links {font-size: 12px; margin: 20px 0;}
footer .links a {display: inline-block; padding: 0 6px; line-height: 1.1;  border-right: 2px solid #fff; text-decoration : none;}
footer .links a:last-child {border: none;}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}