/* css-reset */
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

/* fonts */
@font-face { font-family: 'TTNorms-Medium'; src: url("assets/TTNorms-Medium.woff") format('woff'); font-weight: 500; font-style: normal;}

/* default */
html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-weight: 400; } @-moz-document url-prefix() { body { font-weight: lighter !important; } }
body { cursor: pointer !important; background: transparent !important; font-family: Arial, sans-serif; color:#FFF;}
span { word-wrap: break-word; /* IE>=5.5 */ white-space: -moz-pre-wrap; /* For Fx<=2 */ position:relative;}
strong, b { font-weight: bold; }
sup { font-size: 55%; vertical-align: super; }
sub { font-size: 70%; font-family: 'TTNorms-ExtraBold', Arial, sans-serif; }
#viewport { position: absolute; background-color: #46196e; cursor: pointer; top: 50%; left: 50%; overflow: hidden; opacity: 0; visibility: hidden; }
#border{ border: solid 1px #666; -webkit-box-sizing: border-box; box-sizing: border-box; pointer-events: none; }
#failSafe{background: no-repeat url("assets/failSafe.png"); background-size:contain;}
.dispNone {display: none !important;}

/* classes */
.adSize{width: 300px; height: 250px;}
.posAbs { position: absolute !important;}
.posRel { position: relative !important;}
.visHid {visibility: hidden; opacity: 0;}
.topL { top:0px; left:0px; } 
.pointEvNone {pointer-events: none;}
.w-50{ width: 50%; }
.verticalAlignCenter{ /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:center; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /* W3C */ display:box; box-pack:center; box-align:center; }

.extraBold{font-family: 'TTNorms-ExtraBold', Arial, sans-serif !important; font-variant-ligatures: none;}
.medium{font-family: 'TTNorms-Medium', Arial, sans-serif !important; font-variant-ligatures: none;}

/* elements */
.contBox { width: 100%; height: 100%; }
.msgBox { display: -webkit-box; display: -ms-flexbox; display: flex; }
.box{ -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 4px 0px 32px; }
.bound{ -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; }
/* copy */
.copyCont { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 43px 0px 0px 15px;}
.priceBox { -webkit-box-ordinal-group:5; -ms-flex-order:4; order:4; font-family: 'TTNorms-ExtraBold', Arial, sans-serif; font-size:40px; line-height:1 !important; color:#f89e3b; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-sizing: border-box; box-sizing: border-box; }
.priceSup { font-size: 65% !important; }
.priceSub { font-size: 35% !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; font-family: 'TTNorms-Medium', Arial, sans-serif; padding-bottom:2%;}
.supLegal { font-size: 20% !important; padding-top:2.5%; padding-left:2px; line-height:1.1 !important; font-family: 'TTNorms-Medium', Arial, sans-serif;}
.subLegal { font-size: 20% !important; padding-bottom:3%; padding-left:2px; line-height:1.1 !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; font-family: 'TTNorms-Medium', Arial, sans-serif; color:#fff}

/* product */
.product{ width:128px; height: 214px; }
.productBox{ width: 95%; height: 95%; }
/* legal */
.largerLegal { -webkit-box-ordinal-group:6; -ms-flex-order:5; order:5; padding-left:1px; margin-top:-2px; font-size: 10px; line-height: 10px; font-family: "Arial", sans-serif;}
.frameLegal { font-size: 9px; line-height: 9px; position: absolute; width: 100%; left: 0px; bottom: 0px; padding: 3px 8px 3px; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Arial", sans-serif; }

/* F1 */
#F1-1_logo{ background: no-repeat url("assets/intro-logo.png"); background-size:contain; }

/* F2 */
#F2-1_copy { -webkit-box-ordinal-group:1; -ms-flex-order:0; order:0; font-family: 'TTNorms-Medium', Arial, sans-serif; font-variant-ligatures: none; line-height:15.5px; font-size:15.5px; padding-bottom:2px;}
#F2-2_copy { -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1; font-family: 'TTNorms-ExtraBold', Arial, sans-serif; font-variant-ligatures: none; line-height:20px; font-size:20px; padding-bottom:2px;}
#F2-3_copy { -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; font-family: 'TTNorms-Medium', Arial, sans-serif; font-variant-ligatures: none; line-height:15.5px; font-size:15.5px; padding-bottom:2px;}
#F2-4_copy { -webkit-box-ordinal-group:4; -ms-flex-order:3; order:3; font-family: 'TTNorms-ExtraBold', Arial, sans-serif; font-variant-ligatures: none; line-height:20px; font-size:20px; padding-bottom:2px;}
#F2-priceBox { font-size:40px;}
#F2-1_product{ background: no-repeat; background-size: contain; background-position: center; width: 100%; height: 100%; }

/* F3 */
#F3-1_bg { background: no-repeat; background-size: contain; }
#F3-2_bg { background: no-repeat; background-size: contain; }
#F3-1_copy { -webkit-box-ordinal-group:1; -ms-flex-order:0; order:0; font-family: 'TTNorms-Medium', Arial, sans-serif; font-variant-ligatures: none; line-height:15.5px; font-size:15.5px; padding-bottom:2px;}
#F3-2_copy { -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1; font-family: 'TTNorms-ExtraBold', Arial, sans-serif; font-variant-ligatures: none; line-height:20px; font-size:20px; padding-bottom:2px;}
#F3-3_copy { -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; font-family: 'TTNorms-Medium', Arial, sans-serif; font-variant-ligatures: none; line-height:15.5px; font-size:15.5px; padding-bottom:2px;}
#F3-4_copy { -webkit-box-ordinal-group:4; -ms-flex-order:3; order:3; font-family: 'TTNorms-ExtraBold', Arial, sans-serif; font-variant-ligatures: none; line-height:20px; font-size:20px; padding-bottom:2px;}
#F3-priceBox { font-size:40px; }
#F3-1_product{ background:no-repeat; background-size: contain; background-position: center; width: 100%; height: 100%; }

/* F3 RYD */
#RYD3-1{ background: no-repeat url("assets/RYD3-1.png"); background-size:contain; }
#RYD3-2{ background: no-repeat url("assets/RYD3-2.png"); background-size:contain; }
#RYD3-3{ background: no-repeat url("assets/RYD3-3.png"); background-size:contain; }

/* EF */
#EF-copyCont { padding: 33px 0px 0px 15px; }
#EF-1_copy { -webkit-box-ordinal-group:1; -ms-flex-order:0; order:0; font-family: 'TTNorms-Medium', Arial, sans-serif; font-variant-ligatures: none; line-height:15.5px; font-size:15.5px; padding-bottom:2px;}
#EF-2_copy { -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1; font-family: 'TTNorms-ExtraBold', Arial, sans-serif; font-variant-ligatures: none; line-height:20px; font-size:20px; padding-bottom:2px;}
#EF-3_copy { -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; font-family: 'TTNorms-Medium', Arial, sans-serif; font-variant-ligatures: none; line-height:15.5px; font-size:15.5px; padding-bottom:2px;}
#EF-4_copy { -webkit-box-ordinal-group:4; -ms-flex-order:3; order:3; font-family: 'TTNorms-ExtraBold', Arial, sans-serif; font-variant-ligatures: none; line-height:20px; font-size:20px; padding-bottom:2px;}
#EF-priceBox { font-size:40px; }
#EF-product { height:203px; }
#EF-1_product{ background: no-repeat; background-size: contain; background-position: center; width: 100%; height: 100%; }
#EF-1_frameLegal a {color:white; z-index: 1; position: relative;}
#EF-frameLegal{ max-height:37px; padding: 0px 8px 1px !important; bottom:2.5px; overflow-x: hidden; overflow-y: scroll; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none;  /* Internet Explorer 10+ */ }
#EF-frameLegal::-webkit-scrollbar { /* WebKit */ width: 0; height: 0; }

/* CTA */
#CTA_copyCon { -webkit-box-ordinal-group:7; -ms-flex-order:6; order:6; margin-top: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start; height:20px; }
#CTA-bound { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #f89e3b; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0px 6px; max-width: 140px; -webkit-box-ordinal-group:1; -ms-flex-order:0; order:0; height:20px; }
#CTA-1_copy { font-family: 'TTNorms-ExtraBold', Arial, sans-serif; font-size:10.5px; white-space: nowrap; color: #46196e; } 
#CTA_magnetNose { -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1; width:14px; margin-left:-4px; } 
.CTAmagnet{ height:20px; width:100%; fill:#f89e3b; }

#F2-1_logo{ background: no-repeat url("assets/frame-logo.png"); background-size:contain; }
#F3-1_logo{ background: no-repeat url("assets/frame-logo.png"); background-size:contain; }
#EF-1_logo{ background: no-repeat url("assets/frame-logo.png"); background-size:contain; }
#F2-1_imgReplace{background:no-repeat; background-size:contain;}
#F3-1_imgReplace{background:no-repeat; background-size:contain;}
#EF-1_imgReplace{background:no-repeat; background-size:contain;}

/* roll over */
#RO { background-size: contain; opacity: 0; word-wrap: break-word; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#RO-box { width: 284px; background-color: rgba(255, 255, 255, 0.95); padding: 13px 0px 13px; -webkit-box-sizing: border-box; box-sizing: border-box; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 5px 5px 0px 0px; }
#RO-bound { padding-top: 10px; width: 255px; }
#RO-arrow { width:18px; height:9px; }
#RO-1_headline { text-align:left; color: #000; text-transform: uppercase; font-size: 11px; line-height: 9px; margin-bottom: 1px; }
#RO-1_legal { text-align:left; color: #000; font-size: 10px; line-height: 11px; }

/* magnet default */
.magnetClip { background-color: #46196e; width:700px; top:0px; right:0px }
.magnetCon{ opacity: 0; visibility: hidden; position: absolute; left: 50%; top: 50%; margin-top: 0px; margin-left: 0px; }
.magnet{ position: absolute; height: 1080px; }
.tail_magnet{ left: -590px; top: 0px; width: 592px; }
.middle_magnet{ left: 0px; top: 0px; width: 652px; }
.nose_magnet{ left: 571px; top: 0px; width: 868px; }
.darkPurple{ fill:#46196e; }
.lightPurple{ fill:#6e32a0; }
.arrowChecker{ fill:lawngreen; }
