/* * Remodal - v1.0.3 * Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking. * http://vodkabears.github.io/remodal/ * * Made by Ilya Makarov * Under MIT License */ html.remodal-is-locked { overflow: hidden; -webkit-overflow-scrolling: auto; } .remodal, [data-remodal-id] { display: none; } .remodal-overlay { position: fixed; z-index: 9999; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; display: none; } .remodal-wrapper { position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; display: none; overflow: auto; overflow-x: auto; overflow-y: scroll; text-align: center; -webkit-overflow-scrolling: touch; } .remodal-wrapper:after { display: inline-block; height: 100%; margin-left: -0.05em; content: ""; } .remodal-overlay, .remodal-wrapper { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .remodal { position: relative; outline: none; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } .remodal-is-initialized { display: inline-block; } .remodal-overlay { background: rgba(0,0,0,0.90) } .mainVidLboxBG { background: rgba(0,0,0,0.85) } .light-overlay { background: rgba(0,0,0,0.45) } .remodal-overlay.remodal-is-opening, .remodal-overlay.remodal-is-closing { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards } .remodal-overlay.remodal-is-opening { -webkit-animation: remodal-overlay-opening-keyframes .3s; animation: remodal-overlay-opening-keyframes .3s } .remodal-overlay.remodal-is-closing { -webkit-animation: remodal-overlay-closing-keyframes .3s; animation: remodal-overlay-closing-keyframes .3s } /*.remodal-is-opened { -webkit-animation: none!important; animation: none!important; transition: none!important; -webkit-transform: perspective(2px) scale(1)!important; transform: scale(1); opacity: 1!important; backface-visibility:hidden; }*/ .remodal-wrapper { padding: 10px 10px 0 } .remodal { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; margin-bottom: 10px; padding: 0px; /*-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);*/ background: #fff; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .remodal.remodal-is-opening, .remodal.remodal-is-closing { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards } .remodal.remodal-is-opening { -webkit-animation: remodal-opening-keyframes .3s; animation: remodal-opening-keyframes .3s } .remodal.remodal-is-closing { -webkit-animation: remodal-closing-keyframes .3s; animation: remodal-closing-keyframes .3s } .remodal.remodal-is-opening { opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -khtml-opacity: 1; -moz-opacity: 1; } .remodal.remodal-is-closing { opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0; -moz-opacity: 0; } .remodal, .remodal-wrapper:after { vertical-align: middle } .remodal-close { position: absolute; top: 0; left: 0; display: block; overflow: visible; width: 35px; height: 35px; margin: 0; padding: 0; cursor: pointer; -webkit-transition: color .2s; transition: color .2s; text-decoration: none; color: #95979c; border: 0; outline: 0; background: transparent } .remodal-close:hover, .remodal-close:focus { color: #2b2e38 } .remodal-close:before { font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif!important; font-size: 25px; line-height: 35px; position: absolute; top: 0; left: 0; display: block; width: 35px; content: "\00d7"; text-align: center } .remodal-confirm, .remodal-cancel { font: inherit; display: inline-block; overflow: visible; min-width: 110px; margin: 0; padding: 12px 0; cursor: pointer; -webkit-transition: background .2s; transition: background .2s; text-align: center; vertical-align: middle; text-decoration: none; border: 0; outline: 0 } .remodal-confirm { color: #fff; background: #81c784 } .remodal-confirm:hover, .remodal-confirm:focus { background: #66bb6a } .remodal-cancel { color: #fff; background: #e57373 } .remodal-cancel:hover, .remodal-cancel:focus { background: #ef5350 } .remodal-confirm::-moz-focus-inner, .remodal-cancel::-moz-focus-inner, .remodal-close::-moz-focus-inner { padding:0; border:0 } @-webkit-keyframes remodal-opening-keyframes { 0% { -webkit-transform:scale(1.05); transform:scale(1.05); opacity:0 } 99.8% { -webkit-transform: none; transform: none; opacity: 1; } 99.9% { -webkit-transform: none; transform: none; opacity: 1; -webkit-filter: blur(0); } 100% { -webkit-transform: none; transform: none; opacity: 1; -webkit-perspective: 1000; } } @keyframes remodal-opening-keyframes { 0% { -webkit-transform:scale(1.05); transform:scale(1.05); opacity:0 } 99.8% { -webkit-transform: none; transform: none; opacity: 1; } 99.9% { -webkit-transform: none; transform: none; opacity: 1; -webkit-filter: blur(0); } 100% { -webkit-transform: none; transform: none; opacity: 1; -webkit-perspective: 1000; } } @-webkit-keyframes remodal-closing-keyframes { from { -webkit-transform:scale(1); transform:scale(1); opacity:1 } to { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0 } } @keyframes remodal-closing-keyframes { from { -webkit-transform:scale(1); transform:scale(1); opacity:1 } to { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0 } } @-webkit-keyframes remodal-overlay-opening-keyframes { 0% { opacity:0 } 99.8% { opacity: 1; } 99.9% { opacity: 1; -webkit-filter: blur(0); } 100% { opacity: 1; -webkit-perspective: 1000; } } @keyframes remodal-overlay-opening-keyframes { from { opacity:0 } 99.8% { opacity: 1; } 99.9% { opacity: 1; -webkit-filter: blur(0); } 100% { opacity: 1; -webkit-perspective: 1000; } } @-webkit-keyframes remodal-overlay-closing-keyframes { from { opacity:1 } to { opacity: 0 } } @keyframes remodal-overlay-closing-keyframes { from { opacity:1 } to { opacity: 0 } } @media only screen and (min-width: 641px) { .remodal { max-width: 860px; } html.remodal-is-locked body { overflow-y: auto; } } .lt-ie9 .remodal-overlay { background: #2b2e38 } .lt-ie9 .remodal { width: 700px } .remodal-is-opened * { -webkit-backface-visibility: initial !important; /* blurry fix -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ } .closeMob:after, .closeMob:before, .closeDesk:after, .closeDesk:before { content: ""; position: absolute; width: 16px; height: 2px; right: 0; top: 7px; -webkit-transform: translateY(0) rotate(45deg); -moz-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); -o-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); background-color: #ffffff; transition: all 0.3s ease; z-index: 1000; } .closeMob:before, .closeDesk:before { -webkit-transform: translateY(0) rotate(-45deg); -moz-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); -o-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); } .closeMob:after, .closeMob:before { background-color: #ffffff; right: 4px; top: 11px; } .mainVidLboxWRP .closeDesk:after, .mainVidLboxWRP .closeDesk:before { background-color: #fff!important; } .closeMob { display : block; height: 24px; width: 24px; right: 0; position: absolute; top: 0; z-index: 100; background: #fcb330;} .closeDesk { display: none; } /*.closeDesk { display : none; height: 16px; width: 16px; position: fixed; right: 28px; top: 13px; z-index: 100; cursor: pointer; }*/ .remodal-is-closed .closeMob, .remodal-is-closing .closeMob, .remodal-is-closed .closeDesk, .remodal-is-closing .closeDesk { opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0; -moz-opacity: 0; } @media only screen and (min-width: 641px) { .closeMob { display: block; } .closeDesk { display: none; } } @media only screen and (min-width: 641px) { .remodal-wrapper { padding: 40px 40px 0px 40px; } .remodal { margin-bottom: 40px; } #lboxCont #page-body { max-height: 68vh!important; overflow-y: auto; padding-top: 40px; } } @media only screen and (min-width: 769px) { #lboxCont { max-height: 68vh; max-height: calc( 100vh - 140px)!important; overflow-y: auto; } .terms #lboxCont:before, .privacy #lboxCont:before { content: ''; position: absolute; width: 95.3%; height: 65px; bottom: 0; z-index: 2; -webkit-box-shadow: inset 0 -12px 12px 0 rgba(255, 255, 255, 1); -moz-box-shadow: inset 0 -12px 12px 0 rgba(255, 255, 255, 1); box-shadow: inset 0 -12px 12px 0 rgba(255, 255, 255, 1)); left: 0; } .terms #lboxCont:after, .privacy #lboxCont:after { content: ''; position: absolute; width: 95.3%; height: 65px; top: 0; z-index: 2; -webkit-box-shadow: inset 0 12px 12px 0 rgba(255, 255, 255, 1); -moz-box-shadow: inset 0 12px 12px 0 rgba(255, 255, 255, 1); box-shadow: inset 0 12px 12px 0 rgba(255, 255, 255, 1); left: 0; } } #lboxCont { text-align: left; color: #402c26; } #lboxCont h3, #lboxCont h4, #lboxCont h5, #lboxCont a { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; } /*Terms, Privacy --------------------------------------------------------------*/ #lboxCont .userText { padding: 3rem; } #lboxCont .userText *:last-child { padding: 0; } #lboxCont h1, #lboxCont h2, #lboxCont h3, #lboxCont h4, #lboxCont h5 { font-family: "Arnhem Pro", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 700; } /*Product Ratings --------------------------------------------------------------*/ .lbox_ratings { max-width: 400px; } #lboxRatings { padding: 2rem; overflow:hidden; } #lboxRatings .title { font-size: 2.1rem; } #lboxRatings .rateStarsWrp { margin-bottom: 1.2rem; } #lboxRatings .rateStars { margin-top: -1.2rem; } #lboxRatings .rateStars li { float: left; margin-right: -0.6rem; } #lboxRatings .rateStars li span { transform: rotate(180deg) scale(-1, 1); background: url(../images/product_star_empty_ico.svg) no-repeat center center; background-size: 100% auto; width: 4.6rem; height: 4.6rem; display: block; cursor:pointer; } #lboxRatings .rateStars li span input { position:absolute; left: 0; top: 0; width: 100%; height: 100%; z-index:3; opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0; -moz-opacity: 0; cursor:pointer; } #lboxRatings .rateStars li span:hover, #lboxRatings .rateStars li.active span { background-image: url(../images/product_star_ico.svg); } #lboxRatings .rateStars:hover li.active span { background-image: url(../images/product_star_empty_ico.svg); } #lboxRatings .rateStars:hover li span:hover, #lboxRatings .rateStars:hover li.activehover span { background-image: url(../images/product_star_ico.svg);} #lboxRatings .flavSel { width: 39rem; padding-bottom: 2rem; overflow:hidden; } #lboxRatings .flavSel label { float: left; text-align: center; font-size: 1.6rem; width: 25%; position: relative; left: -3%; } #lboxRatings .flavSel label .rad { display:block; margin: 0 auto 0.6rem auto; width:28px; height: 28px; } #lboxRatings .flavSel label .checked { border-color: #402c26; } #lboxRatings .flavSel label .rad input:checked+span { opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -khtml-opacity: 1; -moz-opacity: 1; } #lboxRatings .flavSel label .rad span { width: 16px; height: 16px; background: url(../images/product_check_ico.svg) no-repeat center center; background-size: 100% auto; top:5px; left: 5px; } #lboxRatings p.input { padding-bottom: 2rem; } #lboxRatings p.input input, #lboxRatings p.input textarea { width: 100%; } #lboxRatings p.input textarea { height: 7.4em;} #lboxRatings .agree { font-size: 13px; padding-top: 2rem; padding-bottom: 0;} @media only screen and (max-width: 640px) { #lboxRatings .title { font-size: 18px; } #lboxRatings .rateStarsWrp { margin-bottom: 12px; } #lboxRatings .rateStars { margin-top: -12px;} #lboxRatings .rateStars li span { width: 34px; height: 34px;} #lboxRatings .flavSel { width: 61.3rem; max-width: 390px; } #lboxRatings .flavSel label { font-size: 14px; } #lboxRatings .flavSel label .rad { width:20px; height: 20px; } #lboxRatings .flavSel label .rad span { width: 12px; height: 162x; top:1px; left: 3px;} } @media only screen and (max-width: 360px) { #lboxRatings .flavSel label { font-size: 2.5rem; } } /*info forms*/ #lboxCont .checkCustInfoForm { padding: 2rem; text-align: left; } #lboxCont #checkCustInfoForm .genBtn1 { display:block!important; } #lboxCont #checkCustInfoForm p.ccvNoSave { width: 100%; } #lboxCont #checkCustInfoForm p.ccvNoSave input { width: 34.85185%; } #lboxCont #checkCustInfoForm p .exp1, #lboxCont #checkCustInfoForm p .exp2 { padding-bottom:0; } @media screen and (min-width: 641px) { #lboxCont .checkCustInfoForm { padding: 30px!important; } #lboxCont #checkCustInfoForm p.ccvNoSave { padding-bottom: 1rem ; } } /* Exit1 */ .lbox_exit1 { max-width: 780px; } #exitBox1 { padding: 20px ; max-width: 780px; background: #006cb9; color: #fff;; } #exitBox1 .line1Sm { display: none; } #exitBox1 .exitTmb { float: left; width: 45%; min-height: 20px; } #exitBox1 .exitTmb img.sm { display: none; } #exitBox1 .exitRgt { float: left; width: 55%; text-align: center; } #exitBox1 .exitRgt .line1 { color: #fff; font-size: 2.1rem; padding-bottom: 1.4rem; padding-top:1.4rem; } #exitBox1 .exitRgt .line2 { font-size: 3.5rem; letter-spacing: 0.06em; line-height: 1em; padding-bottom: 1.2rem; font-weight: bold; } #exitBox1 .exitRgt .line3 { color: rgba(255,255,255,0.83); font-size: 1.7rem; letter-spacing: 0.01em; line-height: 1.2em; padding-bottom: 1.6rem; } #exitBox1 .exitRgt .formWrp { margin: 0 auto; max-width: 301px; } #exitBox1 .exitRgt .formWrp p { padding-bottom: 1.9rem; margin: 0; } #exitBox1 .exitRgt .no { font-size: 15px; padding: 0; position:relative; z-index: 2; top: -4px; } #exitBox1 .exitRgt .no a { color: rgba(255,255,255,0.83); text-decoration: underline; } #exitBox1 .exitRgt .no a:hover { text-decoration: none; } @media only screen and (max-width: 860px) { .lbox_exit1 { max-width: 590px; } #exitBox1 .line1Sm { display: block; color: #fff; font-size: 2.7rem; padding-top: 3rem; padding-bottom: 1.2rem; text-align: center; } #exitBox1 .exitTmb { float: none; width: 100%; } #exitBox1 .exitTmb img { margin: 0 auto; display: none; } #exitBox1 .exitTmb img.sm { display: block; } #exitBox1 .exitRgt { float: none; width: 100%; } #exitBox1 .exitRgt .line1 { display: none; } #exitBox1 .exitRgt .line2 { font-size: 5.2rem; letter-spacing: 0; font-weight: bold; padding-top: 1.2rem; padding-bottom: 1.2rem; } #exitBox1 .exitRgt .line3 { font-size:2.2rem; } } @media only screen and (max-width: 600px) { .lbox_exit1 { max-width: 53rem; } #exitBox1 .exitRgt .line2 { font-size: 4.6rem; } } /* Exit2 */ .lbox_exit2 { max-width: 700px; } .lbox_exit2:before, .lbox_exit2:after { display: none!important; } #exitBox2 { background: #ffffff; border: solid 0.8rem #66d4f5; padding: 3.4rem; max-width: 616px;} #exitBox2 .exitTmb img { margin: 0 auto; display:block; width: 8rem; } #exitBox2 .line1 { color: #5c4436; font-size: 3.2rem; line-height: 1.125em; padding-bottom: 2rem; padding-top:2rem; text-align:center; } #exitBox2 .get { font-size: 2rem; line-height: 1.6em; text-align: center; display: block; max-width: 593px; padding-top: 2.5rem;} /* Newsletter ----------*/ #exitEmail { display: block; height: 40px; text-align: center; position: relative; max-width: 418px; margin: 0 auto; } #exitEmail #email_signup { display: block; position: relative; } #exitEmail .input-group { position: relative; } #exitEmail input[type=email] { border: solid 3px #f6f4f2; background: #f6f4f2; color: #5e4637; padding-right: 144px; width: 100%; height: 44px; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /*Input Text Placeholder colors*/ #exitEmail input[type=email]::-webkit-input-placeholder { color:rgba(94,70,55,1); font-style:normal; } #exitEmail input[type=email]:-moz-placeholder { color:rgba(94,70,55,1); font-style:normal; opacity:1; -moz-opacity:1; } #exitEmail input[type=email]::-moz-placeholder { color:rgba(94,70,55,1); font-style:normal; opacity:1; } #exitEmail input[type=email]:-ms-input-placeholder { color:rgba(94,70,55,1)!important; font-style:normal; } #exitEmail input[type=email]:focus::-webkit-input-placeholder { color: rgba(94,70,55,0.58); font-style:normal; } #exitEmail input[type=email]:focus:-moz-placeholder { color:rgba(94,70,55,0.58)); font-style:normal; opacity:1; -moz-opacity:1; } #exitEmail input[type=email]:focus::-moz-placeholder { color:rgba(94,70,55,0.58); font-style:normal; opacity:1; } #exitEmail input[type=email]:focus:-ms-input-placeholder { color:rgba(94,70,55,0.58)!important; font-style:normal; } #exitEmail .input-group-btn { position: absolute; right: 0; top: 0; width: 145px; text-align: center; } #exitEmail .input-group-btn .genBtn1 { display: block; width: 100%; -webkit-appearance: none; background: none; border: none; outline: 0; z-index: 4; line-height: 44px; } #exitEmail .input-group-btn .genBtn1:after { -webkit-border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-topleft: 0; -moz-border-radius-bottomleft: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } #exitfc-response .error_message { color: #cc0000; font-size: 14px; position: relative; top: 4px; } #exitfc-response .success_message { color: #5e4637!important; } @media all and (max-width: 960px) { #exitfc-response .error_message { text-align: center; top: 1rem; } } @media all and (max-width: 500px) { #exitBox2 { padding: 3rem; } #exitEmail input[type=email] { padding-right: 109px; } #exitEmail .input-group-btn { width: 100px; } #exitEmail .input-group-btn .genBtn1 { padding-left: 0; padding-right: 0; } } @media all and (max-width: 479px) { #exitfc-response .error_message { font-size: 11px; } } @media all and (max-width: 359px) { #exitEmail input[type=email] { height: 35px; } #exitEmail .genBtn1 { line-height: 35px!important; font-size: 15px; } } /* Product Stock Notification ----------*/ .lbox_notify, .lbox_notify-non-members, .lbox_notifyphp { max-width:460px; } #notifyForm { max-width:420px; padding: 1.5rem 2rem;} #notifyForm .title1 { font-size: 26px; text-align: center; margin-bottom: 0.5em; display: block; } #notifyForm .title2 { font-size: 20px; margin-bottom: 0; } #notifyForm p { line-height: 1.35em; font-size: 16px; } #notifyForm .notifyOpts { overflow: hiddne; padding-bottom: 1.4em; font-size: 16px; } #notifyForm .sel { font-size: 16px; line-height: 1.25em; padding-left: 1em; cursor: pointer; } #notifyForm .sel:first-child { padding-left: 0; } #notifyForm .sel .rad { display: block; float: left; border: solid 3px #5e4637; font-size: 1em; height: 2.5em; width: 2.5em; } #notifyForm .sel .rad span { background: none; width: 1.4em; height: 1.4em; top: 0.55em; left: 0.35em; } #notifyForm .sel strong { display: block; float: left; } #notifyForm .sel strong.oneLn { line-height: 2.5em; } #notifyForm .sel strong em { display: block; font-style: normal; font-weight: 400; } #notifyForm #notifyFields { margin-bottom: 22px; } #notifyForm #notifyFields input { width: 100%; } #notifyForm .tos { font-size: 13px; color:#888888 ; max-width: 356px;} #notifyForm .tos .chk { margin-bottom: 1em; float: left; line-height: 13px; height: 18px; width:18px; font-size: 16px; } #notifyForm .tos .chk span { line-height: 14px; height: 14px; width: 14px; left: 2px; top: 2px; } /* Video ----------*/ .videoWrp { padding: 3.2rem 4rem 4rem 4rem; border-top: solid 8px #fcb330; } .videoTitle { font-size: 23px; line-height: 1.1em; padding-bottom: 3.2rem; margin: 0 -5px; display: block; } @media only screen and (max-width: 840px) { .videoTitle { font-size:2.6vw; } } @media all and (max-width: 572px) { .videoWrp { padding: 2.8rem 3.6rem 3.6rem 3.6rem; border-top-width: 1.2rem; } .videoTitle { font-size:3.8vw; padding-bottom: 2.8rem; } .videoTitle span { display: block; } } /* Vote Rules ----------*/ .lbox_vote_rules { max-width:460px; } #voteRules { max-width:420px; padding: 1.5rem 2rem;} #voteRules .title1 { font-size: 26px; text-align: center; margin-bottom: 0.5em; display: block; } #voteRules p { line-height: 1.6em; font-size: 16px; } #voteRules p:last-child { padding-bottom: 0;}