/*! Bootstrap v3.2.0 (http://getbootstrap.com) Copyright 2011-2014 Twitter, Inc. Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

@font-face { font-family: "Glyphicons Halflings"; src: url("../fonts/glyphicons-halflings-regular.eot"); src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }

.glyphicon { position: relative; top: 1px; display: inline-block; font-family: "Glyphicons Halflings"; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/*! End Bootstrap */
* { padding: 0; margin: 0; }

body { background: #0093c1; color: #252435; height: 100%; position: absolute; width: 100%; font: normal 14px "Public Sans", sans-serif; }

.background-image-preloading { display: none; }

a { text-decoration: none; color: #252435; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; }

a:hover, a:active { outline: none; }

a img { border: none; outline: none; }

h1 { font: 800 60px/1 "Public Sans", sans-serif; text-transform: uppercase; color: white; }

hr { background: url(../images/my-journey/hr.png) 0 0 no-repeat; width: 70px; height: 3px; border: none; margin: 32px 0 40px; }

@media only screen and (orientation: landscape) and (max-device-width: 580px) { hr { margin: 16px 0 16px; } }

.my-journey h1 { font-size: 50px; }

.wrapper { overflow: hidden; height: 100%; position: absolute; width: 100%; }

@media only screen and (orientation: landscape) and (max-device-width: 580px) { .wrapper { min-height: 600px; } }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .wrapper { min-height: 684px; } }

.accessibility { display: none; }

.menu { position: absolute; width: 100%; height: 100%; top: 0; -webkit-transition: top 1s ease; -o-transition: top 1s ease; transition: top 1s ease; background: url(../images/my-journey/menu-bg.jpg) center center; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/my-journey/menu-bg.jpg",sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/my-journey/menu-bg.jpg',sizingMethod='scale')"; }

@media only screen and (orientation: landscape) and (max-device-width: 580px) { .menu { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); background-image: none; } }

.menu.slide { top: -100px; }

.stages { position: relative; margin: -20px auto 0; background: url(../images/my-journey/menu-arrows.png) center center no-repeat; background-size: 90%; width: 660px; height: 684px; }

.stages li { display: block; float: left; position: absolute; width: 186px; height: 186px; overflow: hidden; }

.stages li.stage1 { top: 254px; left: -60px; }

.stages li.stage2 { top: 6px; left: 70px; }

.stages li.stage3 { top: 6px; left: 396px; }

.stages li.stage4 { top: 254px; left: 526px; }

.stages li.stage5 { top: 495px; left: 406px; }

.stages li.stage6 { top: 495px; left: 70px; }

.stages li a { width: 186px; height: 186px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; background: url(../images/my-journey/stage-hover-sprite.png) 0 0 no-repeat; background-size: 100%; -webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); overflow: hidden; }

.stages li.stage2 a { background-position: 0 -186px; }

.stages li.stage3 a { background-position: 0 -374px; }

.stages li.stage4 a { background-position: 0 -556px; }

.stages li.stage5 a { background-position: 0 -744px; }

.stages li.stage6 a { background-position: 0 -928px; }

.stages li a:hover { width: 186px; height: 186px; -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }

.stages li a span { opacity: 0; font: 800 54px "Public Sans", sans-serif; text-transform: uppercase; display: block; }

.stages li a span.hover { font-size: 20px; top: 75px; left: 22px; width: 144px; text-align: center; }

/* odd fixes - due to uneven baseline of numeric chars */
.stages li.stage3 a span { top: 45px; left: 76px; }

.stages li.stage3 a:hover span { top: 67px; left: 25px; }

.stages li.stage6 a span { top: 56px; }

.stages li.stage6 a:hover span { top: 75px; left: 22px; }

.my-journey { position: relative; top: -542px; left: 0px; width: 390px; height: 400px; margin: 0 auto; text-align: center; opacity: 0; }

.my-journey.fadein, .stages li a span.fadein { opacity: 1; -webkit-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }

.stages li.stage1 a span.fadein { -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; }

.stages li.stage2 a span.fadein { -webkit-transition-duration: 1.2s; -o-transition-duration: 1.2s; transition-duration: 1.2s; }

.stages li.stage3 a span.fadein { -webkit-transition-duration: 1.4s; -o-transition-duration: 1.4s; transition-duration: 1.4s; }

.stages li.stage4 a span.fadein { -webkit-transition-duration: 1.6s; -o-transition-duration: 1.6s; transition-duration: 1.6s; }

.stages li.stage5 a span.fadein { -webkit-transition-duration: 1.8s; -o-transition-duration: 1.8s; transition-duration: 1.8s; }

.stages li.stage6 a span.fadein { -webkit-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; }

.my-journey img { margin: 0 auto 40px; }

.my-journey h1 { margin: 0 auto 40px; }

.my-journey p { font-size: 24px; color: white; }

.my-journey p em { color: #a8edb3; }

.footer { width: 400px; margin: 40px auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }

.footer li { float: left; list-style: none; margin: 0 0 0 12px; }

.footer li:first-child { margin: 0; }

.footer li a { padding: 5px 10px; text-transform: uppercase; background: #006792; color: white; }

.footer li a:hover { background: #005b81; }

.content, .insight { position: absolute; height: 100%; width: 100%; top: 100%; background: #9f82dc 0 0 no-repeat; -webkit-transition: top 1s ease; -o-transition: top 1s ease; transition: top 1s ease; background-size: cover; background-position: center center; }

@media only screen and (orientation: landscape) and (max-device-width: 580px) { .content, .insight { min-height: auto; } }

.content img { display: none; }

.stage { width: 420px; margin: -5px auto 0; left: -20%; position: relative; }

@media only screen and (orientation: landscape) and (max-device-width: 580px) { .stage { margin-top: 32px; } }

.stage h1 { color: #fff; }

@media only screen and (orientation: landscape) and (max-device-width: 580px) { .stage h1 { font-size: 38px; } }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .stage h1 { font-size: 80px; } }

.stage h2 { margin: 0 0 1em; }

@media only screen and (orientation: landscape) and (max-device-width: 580px) { .stage h2 { font-size: 1.2em; } }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .stage h2 { font-size: 2.5em; } }

.stage h2 a { color: #eee; }

.stage p { margin: 0 0 1em; }

@media only screen and (orientation: landscape) and (max-device-width: 580px) { .stage p { font-size: 14px; } }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .stage p { font-size: 2.0em; } }

.stage > a { border: 2px solid #252435; text-transform: uppercase; font-weight: bold; padding: 10px 30px; display: inline-block; clear: both; margin: 5px 0 0; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .stage > a { font-size: 2em; } }

.stage > a:hover { color: #000; border: 2px solid #000; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .stage { width: auto; margin: 5%; height: 90%; bottom: 0; left: 0; opacity: 0; background: #e7a61a; padding: 2em 5em 2em 5em; border-radius: 5px; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; -webkit-transition-delay: 0, 1s; -o-transition-delay: 0, 1s; transition-delay: 0, 1s; }
  .stage > div { opacity: 1; } }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .slide-up .stage, .slide-on .stage { top: 100%; border-radius: 30px; opacity: 1; } }

.content-1 { background-image: url(../images/my-journey/stage1-bg.jpg); background-color: #9F82DC; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .content-1 { background-position: 80% 0; } }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .content-1 .stage { background: rgba(159, 130, 220, 0.8); -webkit-box-shadow: 0px 0px 20px 3px rgba(159, 130, 220, 0.8); box-shadow: 0px 0px 20px 3px rgba(159, 130, 220, 0.8); } }

.content-2 { background-image: url(../images/my-journey/stage2-bg.jpg); background-color: #F4AB28; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .content-2 { background-position: 80% 0; } }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .content-2 .stage { background: rgba(244, 171, 40, 0.8); -webkit-box-shadow: 0px 0px 20px 3px rgba(244, 171, 40, 0.8); box-shadow: 0px 0px 20px 3px rgba(244, 171, 40, 0.8); } }

.content-3 { background-image: url(../images/my-journey/stage3-bg.jpg); background-color: #06ACDC; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .content-3 { background-position: 80% 0; } }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .content-3 .stage { background: rgba(6, 172, 220, 0.8); -webkit-box-shadow: 0px 0px 20px 3px rgba(6, 172, 220, 0.8); box-shadow: 0px 0px 20px 3px rgba(6, 172, 220, 0.8); } }

.content-4 { background-image: url(../images/my-journey/stage4-bg.jpg); background-color: #F26D4E; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .content-4 { background-position: 80% 0; } }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .content-4 .stage { background: rgba(242, 109, 78, 0.8); -webkit-box-shadow: 0px 0px 20px 3px rgba(242, 109, 78, 0.8); box-shadow: 0px 0px 20px 3px rgba(242, 109, 78, 0.8); } }

.content-5 { background-image: url(../images/my-journey/stage5-bg.jpg); background-color: #F05191; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .content-5 { background-position: 80% 0; } }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .content-5 .stage { background: rgba(240, 81, 145, 0.8); -webkit-box-shadow: 0px 0px 20px 3px rgba(240, 81, 145, 0.8); box-shadow: 0px 0px 20px 3px rgba(240, 81, 145, 0.8); } }

.content-6 { background-image: url(../images/my-journey/stage6-bg.jpg); background-color: #8EC63F; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .content-6 { background-position: 80% 0; } }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .content-6 .stage { background: rgba(142, 198, 63, 0.8); -webkit-box-shadow: 0px 0px 20px 3px rgba(142, 198, 63, 0.8); box-shadow: 0px 0px 20px 3px rgba(142, 198, 63, 0.8); } }

/* send right off-screen */
.right-offscreen { left: 100%; top: 0; -webkit-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease; }

.reveal { left: 0; top: 0; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

.slide-up { left: 0; top: 0; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

.slide-on { left: 0; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

.slide-off { left: -100%; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

.trans-now { -webkit-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }

.utils { right: 20px; position: relative; overflow: auto; }

@media only screen and (orientation: landscape) and (max-device-width: 580px) { .utils { position: fixed; } }

.next, .close { top: 0; margin-right: 10px; color: #fff; padding: 20px 20px; font-size: 30px; background: #252435; opacity: .6; float: right; }

@media only screen and (orientation: landscape) and (max-device-width: 580px) { .next, .close { font-size: 40px; } }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .next, .close { font-size: 60px; } }

.next:hover, .close:hover { opacity: .8; }

.close:before { content: "\e014"; }

/* glyphicon */
.next:before { content: "\e080"; }

/* glyphicon */
.insight { background: #252435; color: #fff; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight { width: 100%; padding: 0; overflow-y: scroll; } }

.insight * { width: 360px; font-size: 18px; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight * { width: 90%; margin: 0 auto; } }

.insight .wrap { width: 950px; margin: 4% auto 0; }

.insight .col1 { float: left; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight .col1 { float: none; } }

.insight img { width: auto; }

.insight h2 { font: 800 45px "Public Sans", sans-serif; text-transform: uppercase; margin: 1em 0 0; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight h2 { font-size: 60px; } }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight h3 { font-size: 3vw; } }

.insight h4 { background: #f26c4e; padding: 15px; color: #252435; margin: 2em 0 0; }

.insight p { font-size: 14px; margin: 1em 0; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight p { font-size: 25px; } }

.insight hr { margin: 12px 0 40px; width: 70px; }

.insight a.close { width: 50px; float: right; font-size: 30px; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight a.close { font-size: 60px; } }

@media only screen and (orientation: landscape) and (max-device-width: 580px) { .insight.reveal a.close { position: fixed; top: 0; right: 0; } }

.insight-2 hr { background: #f5ab29; }

.insight-3 hr { background: #06acdc; }

.insight-4 hr { background: #f26c4e; margin: 12px auto 40px; }

.insight-5 hr { background: #f05292; }

.insight-6 hr { background: #8dc63f; margin: 12px auto 40px; }

.insight table { float: right; border-collapse: collapse; width: 520px; margin-top: 140px; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight table { width: auto; float: none; margin: 100px auto 0 auto; } }

.insight caption { text-align: center; display: table-caption; width: 520px; height: 50px; background: #f5ab29; color: #252435; font-weight: bold; padding-top: 15px; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight caption { width: 100%; font-size: 25px; } }

.insight table td { border: 1px solid #38364e; border-right: none; padding: 20px; width: auto; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight table td { font-size: 25px; height: 35px; vertical-align: middle; } }

.insight table td:first-child { border-left: none; width: 42px; }

.insight table td:first-child p { border-radius: 50%; width: 42px; height: 42px; border: 2px solid #f5ab29; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight table td:first-child p { width: 35px; height: 35px; } }

.insight table td:first-child span { display: block; text-align: center; width: 40px; padding-top: 7px; font-size: 20px; font-weight: bold; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight table td:first-child span { font-size: 25px; line-height: 35px; width: 40px; padding-top: 0; } }

.insight-3 table td:first-child span { background: url(../images/my-journey/goal-tick.png) 11px 10px no-repeat; height: 25px; }

.insight-3 caption { background: #06acdc; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight-3 caption { font-size: 25px; } }

.insight-3 table td:first-child p { border-radius: 50%; width: 42px; height: 42px; border: 2px solid #06acdc; }

.insight-4 .wrap { text-align: center; margin: 4% auto 0; width: 520px; }

.insight-4 * { width: auto; }

.insight-5 caption { background: #f05292; }

.insight-5 table tr td { font-size: 18px; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight-5 table tr td { font-size: 30px; } }

.insight-5 table tr td:first-child { text-indent: -9999em; background: url(../images/my-journey/graph.png) 40px 40px no-repeat; width: 90px; height: 90px; }

.insight-5 table tr:first-child td:first-child { background-image: url(../images/my-journey/flag.png); }

.insight-6 .wrap { text-align: center; margin: 4% auto 0; width: 520px; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight-6 .wrap { width: auto; } }

.insight-6 * { width: auto; }

.insight-6 h3 { width: 420px; margin: 0 auto; }

@media only screen and (orientation: portrait) and (max-device-width: 768px) { .insight-6 h3 { width: auto; margin: 5% 10%; } }

.ui-loader { display: none; }
/*# sourceMappingURL=mj.css.map */