/* RESET STYLES */
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
/* margin: 0;
padding: 0; */
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* FONTS */
@font-face {
font-family: DHL;
src: url('../fonts/JennaSue.eot'); /* IE9 Compat Modes */
src: url('../fonts/JennaSue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/JennaSue.woff') format('woff'), /* Pretty Modern Browsers */
url('../fonts/JennaSue.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/JennaSue.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/* Base stuff */
html, body { overflow: hidden; position: relative; }
body { background: #FFCE00; color: #333; }
.initial { transform: initial!important; }
table { width: 100%; }
th { border-bottom: 1px solid black; }
.section { z-index:8!important; position: absolute; height: 100%; top: 0; left:110%; z-index:99; transition: 0.55s ; -o-transition: 0.55s; -ms-transition: 0.55s; -moz-transition: 0.55s; -webkit-transition: 0.55s; }
.toConfirm { transform: translateY(-30%); -o-transform: translateY(-30%); -ms-transform: translateY(-30%); -moz-transform: translateY(-30%); -webkit-transform: translateY(-30%);}
#logo.toConfirm { transform: translateY(-180%); -o-transform: translateY(-180%); -ms-transform: translateY(-180%); -moz-transform: translateY(-180%); -webkit-transform: translateY(-180%); }
#seven.toConfirm { transform: translateY(-80%); -o-transform: translateY(-80%); -ms-transform: translateY(-80%); -moz-transform: translateY(-80%); -webkit-transform: translateY(-80%); }
.block_button { cursor: pointer; width: 100px; height: 50px; background: url(../imgs/btn_bg.png) center center no-repeat; background-size: contain; text-align: center; color: white; padding: 0.6em;}
.block_button.fact { background: url(../imgs/fact_button.png) center center no-repeat; }
.block_button.findout_1 { background: url(../imgs/findout_1.png) center center no-repeat; }
.block_button.findout_2 { background: url(../imgs/findout_2.png) center center no-repeat; }
.block_button.findout_3 { background: url(../imgs/findout_3.png) center center no-repeat; }
.content { transition: 0.3s; opacity: 1; position: absolute; left: 70px; top: 120px; /*left: 70px!important; transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); */}
.content.off { opacity: 0; }
.content .main { font-size: 0.8rem; }
.risk { width: 50px; height: 50px; border-radius: 100px; background: yellow; float: left; }
#low { background: url(../imgs/low_risk.png) center center no-repeat; background-size: 100%; }
#mid { background: url(../imgs/mid_risk.png) center center no-repeat; background-size: 100%; }
#high { background: url(../imgs/high_risk.png) center center no-repeat; background-size: 100%; }
.offscreen_left { right:inherit; left: -100%!important; }
.push_offscreen_left {left:-120%!important; right:110%!important; }
.offscreen_right { left: 120%!important; right: -100%!important; }
.offscreen_top { top: -100%!important; }
.offscreen_bottom { left: -100%!important; }
.bold { font-weight: 500; }
td.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.clear { height: 1px; clear: both; }
.split { border-bottom: 1px solid lightgray; }
ul { margin: 0; }
li { list-style: none; }
.layer { height: 100%; width: 100%; }
li img,
.layer img { position: absolute; }
ul.scene { z-index: 7; position: fixed; height: 100%; border-top: 2px solid white; bottom: -80%; background-color: #FFCE00; }
.z1 { z-index:1; }
.z2 { z-index:2; }
.z3 { z-index:3; }
.z4 { z-index:4; }
.z5 { z-index:5; }
.z6 { z-index:6; }
.z7 { z-index:7; }
/* elements to move */
.cloud { position:absolute; width: 120px; left: 70%; top: -63%; }
.cloud2 { display: none; position: absolute; width: 120px; left: 50%; top: -55%;}
.sun { position: absolute; width: 60px; left: 80%; top:-75%; animation-name: sun; -o-animation-name: sun; -ms-animation-name: sun; -moz-animation-name: sun; -webkit-animation-name: sun; -o-animation-duration: 15s; -ms-animation-duration: 15s; -moz-animation-duration: 15s; -webkit-animation-duration: 15s; animation-duration: 15s; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.hill2 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 270px; top: -198px; right: -4%; position: absolute; }
.hill1 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 200px; top: -123px; left: -4%; position: absolute; }
.hill1.offset { left: 0%; }
.fore_hill1 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 260px; top: -86px; right: -7%; }
.cliff1 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 250px; left: -10%; top: -116px; }
.cliff2 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 150px; left: -5%; top: -46px; }
.cliff3 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 250px; top: -99px; right: -5%; }
.cliff4 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 200px; top: -69px; right: -5%; }
.rela { position: relative!important; z-index: 5!important; }
.sign { transition: 0.7s; width: 250px; right: 34%; top: -333px; }
.welcome_house { transition: 0.7s; width: 380px; top: -219px; right: 1%; }
.house { transition: 0.7s; width: 900px; top: -206px; right: -40%; }
.house.offset { right: 16%; }
.park { transition: 0.7s; width: 1100px; top: -146px; right: 3.5%; }
.cart { transition: 0.7s; width: 50px; top: -50px; right: 31%; }
@keyframes float { 0% {transform: translateY(-50%);} 50% {transform: translateY(0%);} 100% {transform: translateY(-50%);} }
@-o-keyframes float { 0% {-o-transform: translateY(-50%);} 50% {-o-transform: translateY(0%);} 100% {-o-transform: translateY(-50%);} }
@-ms-keyframes float { 0% {-ms-transform: translateY(-50%);} 50% {-ms-transform: translateY(0%);} 100% {-ms-transform: translateY(-50%);} }
@-moz-keyframes float { 0% {-moz-transform: translateY(-50%);} 50% {-moz-transform: translateY(0%);} 100% {-moz-transform: translateY(-50%);} }
@-webkit-keyframes float { 0% {-webkit-transform: translateY(-50%);} 50% {-webkit-transform: translateY(0%);} 100% {-webkit-transform: translateY(-50%);} }
@keyframes glide { 0% {transform: scale(1) translateX(5%) translateY(0%) rotate(0deg);} 100% {transform: scale(0) translateX(50%) translateY(-10%) rotate(-40deg);} }
@-o-keyframes glide { 0% {-o-transform: scale(1) translateX(5%) translateY(0%) rotate(0deg);} 100% {-o-transform: scale(0) translateX(50%) translateY(-10%) rotate(-40deg);} }
@-ms-keyframes glide { 0% {-ms-transform: scale(1) translateX(5%) translateY(0%) rotate(0deg);} 100% {-ms-transform: scale(0) translateX(50%) translateY(-10%) rotate(-40deg);} }
@-moz-keyframes glide { 0% {-moz-transform: scale(1) translateX(5%) translateY(0%) rotate(0deg);} 100% {-moz-transform: scale(0) translateX(50%) translateY(-10%) rotate(-40deg);} }
@-webkit-keyframes glide { 0% {-webkit-transform: scale(1) translateX(5%) translateY(0%) rotate(0deg);} 100% {-webkit-transform: scale(0) translateX(50%) translateY(-10%) rotate(-40deg);} }
@keyframes glide2 { 0% {transform: scale(1) translateX(5%) translateY(0%);} 100% {transform: scale(0) translateX(50%) translateY(-40%);} }
@-o-keyframes glide2 { 0% {-o-transform: scale(1) translateX(5%) translateY(0%);} 100% {-o-transform: scale(0) translateX(50%) translateY(-40%);} }
@-ms-keyframes glide2 { 0% {-ms-transform: scale(1) translateX(5%) translateY(0%);} 100% {-ms-transform: scale(0) translateX(50%) translateY(-40%);} }
@-moz-keyframes glide2 { 0% {-moz-transform: scale(1) translateX(5%) translateY(0%);} 100% {-moz-transform: scale(0) translateX(50%) translateY(-40%);} }
@-webkit-keyframes glide2 { 0% {-webkit-transform: scale(1) translateX(5%) translateY(0%);} 100% {-webkit-transform: scale(0) translateX(50%) translateY(-40%);} }
.floating_balloon { position: absolute; right: -40%; width: 65px; animation-name: float; -o-animation-name: float; -ms-animation-name: float; -moz-animation-name: float; -webkit-animation-name: float; -o-animation-duration: 4s; -ms-animation-duration: 4s; -moz-animation-duration: 4s; -webkit-animation-duration: 4s; animation-duration: 4s; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.balloon { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 100px; top: -525px; right: 32%; }
.bmx_track { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 380px; top: -110px; right: 58.5%; }
.bandstand { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 350px; right: 6%; top: -185px; }
.hoop { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 25px; top: -53px; right: 89.6%; }
.shed {transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 400px; top: -134px; right: 45%; }
.shed.offset { right:57%; }
.t_trees {transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 50px; top: -44px; right: 90%; }
.distant_t_trees {transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 130px; right: 85%; top: -30px; }
.mountain {transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 300px; right: 1%; top: -183px;}
.mountain_2 {transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 300px; right: 60%; top: -129px;}
.mountain.offset { right: 70%; }
.mountain_bg { width: 350px; top: -149px; right: -5%; z-index: -1; }
.outdoors_1 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 300px; right: 36%; top: -207px; }
.outdoors_2 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; top: -131px; width: 270px; right: 8%; }
.single_tree {transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 30px; right: 88%; top: -55px; }
.bush_trees {transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 200px; top: -145px; right: 15%; }
.sand { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 600px; top: 0; right: 50%; transform: translateX(50%); }
.beach_1 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 900px; top: -160px; right: 11%;}
.beach_2 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 900px; right: 0%; top: -187px; z-index: 10; }
.waves { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 450px; right: 68%; top: -34px;}
.lighthouse { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 230px; right: 3%; top: -247px; z-index: 10;}
.boat { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 95px; right: 5%; top: -153px; right: -10%;}
.boat2 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 180px; right: 29%; top: -242px; }
.waves_2 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 450px; right: -14%; top: -33px; }
.parachute { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 70px; top: -74%; right: 43%; }
.parachute2 { transition: 0.7s; -o-transition: 0.7s; -ms-transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; width: 45px; top: -63%; right: 37%; }
.parachute.animate { animation-name: glide; -o-animation-name: glide; -ms-animation-name: glide; -moz-animation-name: glide; -webkit-animation-name: glide; -o-animation-duration: 25s; -ms-animation-duration: 25s; -moz-animation-duration: 25s; -webkit-animation-duration: 25s; animation-duration: 25s; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.parachute2.animate { animation-name: glide2; -o-animation-name: glide2; -ms-animation-name: glide2; -moz-animation-name: glide2; -webkit-animation-name: glide2; -o-animation-duration: 25s; -ms-animation-duration: 25s; -moz-animation-duration: 25s; -webkit-animation-duration: 25s; animation-duration: 25s; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.next { cursor: pointer; z-index: 100; width: 100px; height: 50px; background: url(../imgs/next_bg.png) center center no-repeat; background-size: contain;}
.moving_part { position:absolute; height: 100%; left: 0; top: -100%!important; }
#start_btn { font-family: DHL; height: 70px; opacity: 1; transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; }
#start_btn p { font-size: 2.4em; margin: 0; line-height: 1.4em; }
#logo { position: fixed; top: 50px; left: 70px; width: 130px; z-index: 100;}
#terms_mobile { display: none; }
#back_btn { display: none; cursor: pointer; position: fixed; bottom: 60px; left: 70px; z-index: 100; width: 100px; height: 50px; background:url(../imgs/back_btn.png) center center no-repeat; background-size: contain; }
.back_btn { display: none; cursor: pointer; position: relative; z-index: 100; width: 100%; height: 50px; background:url(../imgs/back_btn.png) center center no-repeat; background-size: contain; }
#start_again { cursor: pointer; z-index: 100; width: 180px; height: 50px; background:url(../imgs/start_again.png) center center no-repeat; background-size: contain; float: right;}
#start_again_2 { cursor: pointer; z-index: 100; width: 180px; height: 50px; background:url(../imgs/start_again.png) center center no-repeat; background-size: contain; float: right;}
.confirm { width: 150px; height: 50px; position: absolute; bottom: 60px; right:70px; background: url(../imgs/confirm_bg.png) center center no-repeat; background-size: contain; text-align: center; z-index: 1000000;}
.confirm p { font-family: DHL; width: 100%!important; margin-left: 0!important; color: white; font-size: 1.8em; line-height: 1.8em!important; }
#progress { position: fixed; top: 0; left:0; height: auto;}
#bar { height:10px; background:rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; z-index: 10; transition: 0.55s ; }
#color { position: absolute; width: 0%; left: 0; bottom:0; height: 100%; background: red; z-index: 5; -o-transition: 0.55s; -ms-transition: 0.55s; -moz-transition: 0.55s; -webkit-transition: 0.55s; }
#pop { position: absolute; z-index: 100000; display: none; top: 50%; left: 50%; -o-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); }
#pop .summary { margin-top: 0; padding: 0; padding-bottom: 0.2em; box-shadow: rgba(0, 0, 0, 0.17) 10px 10px; -o-box-shadow: rgba(0, 0, 0, 0.17) 10px 10px; -ms-box-shadow: rgba(0, 0, 0, 0.17) 10px 10px; -moz-box-shadow: rgba(0, 0, 0, 0.17) 10px 10px; -webkit-box-shadow: rgba(0, 0, 0, 0.17) 10px 10px; }
#pop h2 { padding: 0.2em 0.85em; }
#pop .summary #tc_box { padding: 2em; max-height: 170px; overflow: scroll; overflow-x: hidden; }
.rel { width: 100%; }
.relative { position: relative; height: auto; width: 100%; }
.summary { background-color: white; padding: 2em; left: 50%; margin-bottom: 4em; box-shadow: rgba(0, 0, 0, 0.17) 10px 10px; -o-box-shadow: rgba(0, 0, 0, 0.17) 10px 10px; -ms-box-shadow: rgba(0, 0, 0, 0.17) 10px 10px; -moz-box-shadow: rgba(0, 0, 0, 0.17) 10px 10px; -webkit-box-shadow: rgba(0, 0, 0, 0.17) 10px 10px; z-index: 101; }
h2 { font-size: 2.65rem; font-family: DHL; }
.DHL { font-family: DHL; }
.op_1,
.op_2,
.op_3,
.op_4,
.op_5 { opacity: 1; cursor: pointer;}
.risk_text { display: none; }
.confirm { background: url(../imgs/confirm_before.png) center center no-repeat; background-size: 100%;}
.confirm.op_1,
.confirm.op_2,
.confirm.op_3,
.confirm.op_4,
.confirm.op_5 { background: url(../imgs/confirm_bg.png) center center no-repeat; background-size: 100%; }
input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50px; background: url(../imgs/selector.png) -1px center no-repeat; background-size: 90%; margin: 0;}
input[type="checkbox"]:checked { background: url(../imgs/selected.png) 0px center no-repeat; background-size: 95%; }
/* For IE */
.checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50px; background: url(../imgs/selector.png)center center no-repeat; background-size: 90%; margin: 0; float: left; clear: left;}
.checkbox.checked { background: url(../imgs/selected.png) 0px center no-repeat; background-size: 95%; }
/* individual parts */
/* Terms and conditions */
#terms { display: none; position: fixed; height:90px; width:100%; bottom: 0; left: 0; background:url(../imgs/terms_bg.png) center center no-repeat white; background-size: 97%; padding: 20px 5px 20px 70px; z-index: 100000;}
#terms_info { float: left; font-size: 0.7em }
#terms_mobile { background: white; }
#terms_mobile p{ font-size: 0.5em; padding: 1.5em 3em;}
#accept { height: 70px; margin-top: 2em; margin-bottom: 2em; cursor: pointer; background:url(../imgs/accept_bg.png) center center no-repeat; background-size: 100%; }
#accept.active { opacity: 1; }
.mobile_info { height: 70px; }
.mobile_info:nth-child(2) { background: url(../imgs/terms_bg.png) right no-repeat; background-size: 352%; }
#terms_mobile .mobile_info:nth-child(2) p { font-size: 0.85em; }
#view_more,
#close_terms { float: right; cursor: pointer; }
#view_more { background: #333333; height: 100%; }
#view_more p { color: white; font-size: 0.8em; text-align: center; line-height: 3.9em; }
#close_terms { height: 100%; text-align: center; }
#close_terms img { width: 65%; opacity: 0; }
.small_print { position: absolute; bottom: -1%; left: 70px; font-size: 0.8em; }
#overlay { display: none; position: fixed; z-index: 99999999; width: 100%; height: 100%; background: black; opacity: 0.7; left: 0; top: 0; }
@keyframes attention { 0% {transform: translateY(0%);} 50% {transform: translateY(-10%);} 100% {transform: translateY(0%);} }
@-o-keyframes attention { 0% {-o-transform: translateY(0%);} 50% {-o-transform: translateY(-10%);} 100% {-o-transform: translateY(0%);} }
@-ms-keyframes attention { 0% {-ms-transform: translateY(0%);} 50% {-ms-transform: translateY(-10%);} 100% {-ms-transform: translateY(0%);} }
@-moz-keyframes attention { 0% {-moz-transform: translateY(0%);} 50% {-moz-transform: translateY(-10%);} 100% {-moz-transform: translateY(0%);} }
@-webkit-keyframes attention { 0% {-webkit-transform: translateY(0%);} 50% {-webkit-transform: translateY(-10%);} 100% {-webkit-transform: translateY(0%);} }
.attention { animation-name: attention; -o-animation-name: attention; -ms-animation-name: attention; -moz-animation-name: attention; -webkit-animation-name: attention; -o-animation-duration: 0.3s; -ms-animation-duration: 0.3s; -moz-animation-duration: 0.3s; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -o-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }
@keyframes sun { 0% {transform: rotate(0deg);} 50% {transform: rotate(75deg);} 100% {transform: rotate(0deg);} }
@-o-keyframes sun { 0% {-o-transform: rotate(0deg);} 50% {-o-transform: rotate(75deg);} 100% {-o-transform: rotate(0deg);} }
@-ms-keyframes sun { 0% {-ms-transform: rotate(0deg);} 50% {-ms-transform: rotate(75deg);} 100% {-ms-transform: rotate(0deg);} }
@-moz-keyframes sun { 0% {-moz-transform: rotate(0deg);} 50% {-moz-transform: rotate(75deg);} 100% {-moz-transform: rotate(0deg);} }
@-webkit-keyframes sun { 0% {-webkit-transform: rotate(0deg);} 50% {-webkit-transform: rotate(75deg);} 100% {-webkit-transform: rotate(0deg);} }
/* models base styles, individual styles are in accroding section id's */
.model { position: absolute; z-index: 8; }
#transition .main,
#transition2 .main { font-size: 1em; }
#transition3 .main { font-size: 0.8em; }
#transition3 .large-5:last-child { margin-left: 1em; }
/* scene: one */
#one {left:0;}
#one .content { /*left:70px; top:50%;*/ }
#one .content .bold { margin-top: 1em; }
/* scene: two */
#two {}
#two h2 { font-size: 3.6rem; font-family: DHL; font-weight: 300; }
#two .content { opacity: 0; /*left: 70px; top: 220px; */}
#two .model { width: 200px; right: 37%; bottom: 8%; }
#two input[type="checkbox"] { float: left; clear: left; }
#two p { float: left; width: 80%; line-height: 2em; margin-left: 0.26em; margin-bottom: 0.1em; font-size: 0.95em; font-weight: 500; }
#two .confirm p { font-size: 1.8em; }
#two .small_print { margin-top: 1em; font-size: 0.6em!important; bottom: 1%; }
/* scene: three */
#three {}
#three .content { /*top: 28%; left: 70px; */}
#three .model { left: 50%; transform: translateX(-50%); width: 250px; bottom: 11%; }
#three input[type="checkbox"] { float: left; clear: left; }
#three label { float: left; width: 80%; line-height: 2em; margin-bottom: 1em; font-size: 0.8rem; margin-left: 0.8em;}
/* scene: four */
#four {}
#four .content { /*left: 70px; top: 37%;*/ }
#four .head { font-size:2.1em; }
#four .rel { height: 90%: }
#four .block_button { width: 50px; border-radius: 39px; background-size: 200%; float: left; }
#four .op_1 { float: left; }
#four .op_2 { clear:left; float: left; }
#four .model { width: 380px; bottom: 10%; right: 23%; }
#four .op_text { font-size:0.8rem; margin-left: 0.8em; }
/* scene: five */
#five {}
#five .content { /*top: 35%; left: 50%;*/ }
#five .content.head { left: 10%; top: 25%; }
#five .content h2 { font-size: 2.65em; }
#five .content.body-copy { top: 27.5%; right: 5%; }
#five .content .main { line-height: 2.4em; }
/*#five .model { width: 180px; bottom: 5%; left: 50%; transform: translateX(-50%); }*/
#five .model { width: 250px; bottom: 5%; right: 26%; /* transform: translateX(-50%); */}
#five input[type="checkbox"] { float: left; clear: left; }
#five label { float: left; line-height: 2.2em; width: 50%; margin-bottom: 1em; font-size: 0.8rem; margin-left: 0.8em; }
/* scene: six */
#six {}
#six .content { /*top: 37%; left: 5%;*/ }
#six .block_button { width: 200px; background-size: 100%; }
#six .block_button p { font-family: DHL; font-size: 2em; line-height: 1em; }
#six .model { width: 350px; bottom: 9%; right: 31%; }
#factsheet { display: none; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); padding: 1em; background-color: white; z-index: 100000000; }
#exit { cursor: pointer; z-index: 100; width: 180px; height: 50px; background:url(../imgs/exit_btn.png) center center no-repeat; background-size: contain; float: right; cursor: pointer; float: right;}
#exit_2 { cursor: pointer; z-index: 100; width: 180px; height: 50px; background:url(../imgs/exit_btn.png) center center no-repeat; background-size: contain; float: right; cursor: pointer; float: right;}
a { color: white; }
a:hover { color: white; }
#final_exit { font-family: DHL; font-size: 1.5em; margin: 0 auto; cursor: pointer; }
#thanks { display: none; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); padding: 1em; background-color: white; z-index: 100000000; text-align: center; }
/* scene: seven */
#seven {}
#seven .content { /* left: 5%; top: 40%; */ }
#seven h2 { clear: both; margin-bottom: 0.2em; font-size: 2em; }
#seven input { margin-right: 0.2em; margin-bottom: 0.5em; float: left; clear: left; }
#seven input.right { margin-right: inherit; margin-left: 2em; float: inherit; float: right; }
#seven label { font-size: 0.85em; display: block; margin-bottom: 1em; float: left; width: 80%; margin-left: 0.8em; }
#seven .model { width: 320px; right: 22%; bottom: 10%; }
/* scene: eight */
#eight {}
#eight .content .main { font-size: 0.7rem; }
#eight .content { /* top:43%; */ height: 400px; }
#eight .block_button { width:200px; background-size: 100%; }
#eight .block_button p { font-family: DHL; font-size: 2em; line-height: 1em; }
#eight h2 { font-size: 1.4rem; }
/* scene: nine */
#nine {}
#nine .main { clear: both; }
#nine .content { /* top: 40%; left: 5%; */ }
#nine .block_button { width: 200px; background-size: 100%; }
#nine .block_button p { font-family: DHL; font-size: 2em; line-height: 1em; }
#nine .model { width: 150px; bottom: 10%; right: 25%; }
#nine .show-for-small-only { margin-top: 8em; }
#nine h2 { max-width: 400px; float: left; }
/* scene: ten */
#ten {}
#ten .content { margin-bottom: 5em;}
#ten .block_button { width: 200px; background-size: 100%; }
#ten .block_button p { font-family: DHL; font-size: 2em; line-height: 1em; }
#ten .model { width: 160px; bottom: 9%; right: 32%; }
#ten h2 { max-width: 400px; }
/* scene: eleven */
#eleven {}
#eleven .content { margin-bottom: 5em; }
#eleven .block_button { width: 200px; background-size: 100%; }
#eleven .block_button p { font-family: DHL; font-size: 2em; line-height: 1em; }
#eleven .model { width: 200px; bottom: 8%; right: 33%; }
#eleven h2 { max-width: 400px; }
/* scene: twelve */
#twelve {}
#twelve .download { float: right; padding: 0.1em 1.5em; }
#twelve .download p { font-size: 1.9em; margin-bottom: 0; }
/* scene: thirteen */
#thirteen {}
.summary { position: relative; transform: inherit; top: inherit; left: 0!important; margin-top: 10%; transform: none!important;}
.summary p { font-size: 0.85em; letter-spacing: 0.01em;}
.summary .medium-4 p { padding-top: 0.6em; padding-right: 0.6em; }
.download { text-align: center; padding: 0.5em 1.5em; background-color: grey; opacity:1; color: white; font-family: DHL; background: url(../imgs/accept_bg.png); background-size: 100%; }
.download p { font-size: 2em; margin-bottom: 0.2em;}
#thirteen .download { float: right; padding: 0.1em 1.5em; }
#thirteen .download p { font-size: 1.9em; margin-bottom: 0; }
/* little boxes */
.indicator { width: 20px; height: 20px; background: red; display: block; border-radius: 3px; float: left; margin: 0.6em; margin-top: 0;}
.equity { background: #D3D930; }
.ethical { background: #41AB4F; }
.diverse { background: #00A79F; }
.cautious { background: #672F87; }
.indent { padding-left: 41px!important; }
.risk { width: 50px; height: 50px; background: red; display: block; border-radius: 50px; float: right; }
.summary .risk { float: left; }
.summary a { color: blue; }
.highrisk { background: url(../imgs/high_risk.png) center center; background-size: contain;}
.mediumrisk { background: url(../imgs/mid_risk.png) center center; background-size: contain; }
.lowrisk { background: url(../imgs/low_risk.png) center center; background-size: contain; }
.superlowrisk { background: url(../imgs/newroundel.png) center center; background-size: contain; }
@media only screen and (max-width: 1300px) {
.match-height { line-height: 3.3em; }
#six .block_button { margin-top:0.7em; }
}
@media only screen and (max-width: 1080px) {
.sun,
.cloud { top: -72%; }
.cloud { left: 77%; width: 120px; }
.sun { left: 89%; width: 50px; }
.house { width: 800px; top: -183px; }
.sign { right: 0%; }
.park { width: 800px; top: -106px; right: 3.5%; }
/* Models */
#four .model { width: 320px; bottom: 13%; right: 18%; }
#six .model { display: none!important;}
#seven .model { right: 7%; }
#eleven .model { right: 21%; }
/* Scenery */
.beach_1 { width: 750px; top:-134px; }
.mountain { right: -9%; }
.mountain_2 { display: none; }
#exit,
#exit_2 { float: left!important; }
#start_again,
#start_again_2 {float: left!important; }
}
@media only screen and (max-width: 800px) {
.bmx_track { width: 250px; top: -73px; right: 58.5%; }
.bandstand { width: 250px; right: 6%; top: -133px; }
#terms { background-size: 92%; }
#view_more p { font-size: 0.7em; margin-top: 2px; }
.cloud,
.sun { top: -68%; }
.cloud { left: 72%; width: 150px; }
.sun { left: 87%; width: 55px; }
.house { width: 600px; top: -138px; }
.shed { display: none!important; }
.sign { right: 11%; }
.park { width: 650px; top: -88px; }
/* Models */
#two .model { right: 37%; bottom: 12%; width: 150px; }
#three .model { width: 200px; left: 45%; }
#four .model { width: 270px; bottom: 11%; right: 18%; }
#six .model { width: 250px; bottom: 11%; right: 31%; }
#seven .model { right: 0%; }
/* Scenery */
.beach_1 { width: 650px; top: -117px; right: 8%; }
}
@media only screen and (max-width: 640px) {
/*@keyframes attention { 0% {transform: translateY(0%);} 50% {transform: translateY(-400%);} 100% {transform: translateY(0%);} }
@-o-keyframes attention { 0% {-o-transform: translateY(0%);} 50% {-o-transform: translateY(-400%);} 100% {-o-transform: translateY(0%);} }
@-ms-keyframes attention { 0% {-ms-transform: translateY(0%);} 50% {-ms-transform: translateY(-400%);} 100% {-ms-transform: translateY(0%);} }
@-moz-keyframes attention { 0% {-moz-transform: translateY(0%);} 50% {-moz-transform: translateY(-400%);} 100% {-moz-transform: translateY(0%);} }
@-webkit-keyframes attention { 0% {-webkit-transform: translateY(0%);} 50% {-webkit-transform: translateY(-400%);} 100% {-webkit-transform: translateY(0%);} }*/
.attention { animation-name: attention; -o-animation-name: attention; -ms-animation-name: attention; -moz-animation-name: attention; -webkit-animation-name: attention; -o-animation-duration: 1s; -ms-animation-duration: 1s; -moz-animation-duration: 1s; -webkit-animation-duration: 1s; animation-duration: 1s; -o-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }
html, body { overflow: hidden; overflow-y: scroll; }
#one .content h2 { width: 80%; }
#start_btn { width: 100%; background-size: 100%; }
#progress { bottom: inherit; top: 0; }
#start_again,
#start_again_2 { width: 130px; float: left!important; }
#factsheet { top: 75%; }
#overlay { height: 300%; }
#terms { display: none; }
#terms_mobile { display: block; }
#accept { background-size: cover; }
#bar { margin: 0 auto; border-radius:0; }
#logo { position: relative; top: 20px; left: 30px; }
#back_btn { left: 30px; display: none!important; }
.back_btn { background:url(../imgs/back_btn_mobile.png) center center no-repeat; background-size: contain; }
.small_print { position: relative; bottom: inherit; left: 30px; margin-top: 1em; font-size: 0.6em!important; }
.content { position: relative; margin: 0 auto; left: 0; }
#pop .summary #tc_box { max-height: 250px; }
#pop { transform: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; top: 0; left: 0;}
.confirm { width: 80%; position: relative; right: inherit; bottom: inherit; margin: 0 auto; }
.block_button.findout_1 { background: url(../imgs/findout_1.png) center center no-repeat; width: 100%!important; }
.block_button.findout_2 { background: url(../imgs/findout_2.png) center center no-repeat; width: 100%!important; }
.block_button.findout_3 { background: url(../imgs/findout_3.png) center center no-repeat; width: 100%!important; }
#nine .risk,
#eleven .risk { margin-left: 0.6em; }
#thirteen .download p,
#twelve .download p { font-size: 1.75em; }
.download { background-size: cover; }
.download p { font-size: 1em; }
#pop .download p { font-size: 2em; }
.summary { top: 100px; }
#pop { top: initial; }
.indicator { display: none; }
.risk_text { display: none; }
#exit,
#exit_2 { width: 90px; float: left!important; clear: left;}
#ten .risk { margin-left: 0.3em; }
#one .content { position: relative; left:inherit; top: inherit; margin: 0 auto; margin-top:22%; transform: inherit; -o-transform: inherit; -ms-transform: inherit; -moz-transform: inherit; -webkit-transform: inherit; }
#two .content { position: relative; left: inherit; top: inherit; margin: 0 auto; margin-top: 20%; transform: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; }
#three img.show-for-small-only { margin-top: 19.5em; }
#three h2 { margin-top:-0.7em; }
#three label { font-size: 0.8rem; margin-left: 0.8em; }
#four .confirm.op_1,
#four .confirm.op_2 {margin: 0 auto; float: none; }
#four .content { position: relative; left: inherit; top: inherit; margin: 0 auto; margin-top: 20%; transform: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; }
#four .main { margin: 0 auto; }
#four .head { margin: 0 auto; margin-bottom: 1em; margin-top: 2.7em; line-height: 1em;}
#four .op_1,
#four .op_2 { margin-left: 8%; }
#four .op_1 { margin-bottom: 1em; }
#transition .medium-5 { margin-bottom: 5em; }
#five label { width: 80%; font-size: 0.85em; }
#five .head { margin-bottom: 5em; }
#six .content { position: relative; left: inherit; top: inherit; margin: 0 auto; margin-top: 20%; transform: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; }
#six .content .main { background-color: rgb(255, 206, 0); }
#six .block_button { width: 100%; margin-bottom: 1em; }
#seven .content { position: relative; left: inherit; top: inherit; margin: 0 auto; margin-top: 25%; }
#seven .checkbox,
#seven label { margin-top: 1em; }
#seven .split { border: dashed 1px #F5C601; }
#transition3 .large-5:last-child { margin-left: 0; }
ul.scene { border:none; top:0; }
.layer { margin-top: 0; }
.cloud,
.sun { top: 5%; }
.cloud { left: 67%; width: 75px; top: 8%; }
.sun { top: 4%; left: 83%; width: 35px; }
.floating_balloon { right: -65%; top: -4%; width: 35px; }
}
@media only screen and (max-width: 480px) {
}
@media only screen and (min-width: 980px) {
#nine .risk { margin-left: 0.3em; }
}
@media only screen and (min-width: 1080px) {
html, body { overflow: hidden; }
.waves_2 { right: -29%; }
#nine .risk { margin-left: 1em; }
}
@media only screen and (min-width: 1300px) {
#terms { background-size: 99%; }
#two .model { width: 290px; right: 31%; }
#three .model { left: 60%; width: 300px; bottom: 11%; }
#four .op_text { font-size: 0.8rem; margin-left: 0.8em; margin-bottom: 1em; }
#four .model { width: 550px; right: 15%; }
#five .model { width: 320px; right: 17%; }
#six .model { width: 450px; bottom: 14%; right: 30%; }
#seven .model { width: 390px; right: 18%; }
#nine .model { width: 220px; right: 22%; }
#ten .model { width: 260px; right: 23%; }
#eleven .model { width: 270px; }
/* Scenery */
.beach_1 { width: 1100px; top:-195px; right: 1%; }
.sand { right: 40%; }
.waves { width: 740px; right: 54%; top: -40px; height: 38px; }
.shed { width: 530px; top: -176px; right: 41%; }
.house { right: -33%; }
.hill1 { width: 300px; top: -182px; }
}
@media only screen and (min-width: 1600px) {
#two .model { right: 34%; width: 300px; }
#three .model { left: 56%; width: 343px; bottom: 11%; }
#four .model { right: 18%; width: 580px; }
#five .model { width: 350px; right: 26%; }
#six .model { width: 500px; bottom: 9%; right: 28%; }
#seven .model { width: 450px; right: 25%; }
/* scenery */
.cart { right: 70%; }
.beach_1 { width: 1400px; top: -248px; right: 4%; }
.house { width: 1200px; top: -274px; }
.park { width: 1400px; top: -185px; }
.beach_2 { width: 1300px; top: -267px; }
.waves { right: 73%; }
.lighthouse { width: 350px; right: 27%; top: -375px; }
.sign { right: 40%; }
}
@media only screen and (min-width: 1750px) {
.waves { width: 680px; right: 64%; top: -40px; height: 38px; }
.waves_2 { right: -1%; width: 600px; top: -44px;}
}
/* Bug Fix area */