html { font-size: 62.5% !important; background-color: #fff !important; }
body { font-size: 2rem; color: #4E5052; background-color: #fff !important; font-family: Arial, Helvetica, sans-serif; line-height: 1.4; counter-reset: section; }

h1, h2, h3, h4, h5, h6 { line-height: 100%; margin-top: 0; font-family: Arial, Helvetica, sans-serif; }
h1 { text-transform: none; font-size: 4.6rem; font-weight: normal; line-height: 4.6rem; }
h1, h2 { color: #4E5052; font-family: Arial, Helvetica, sans-serif;}
h2 { font-size: 3.2rem; line-height: 3.5rem; padding: 10px 0 0 15px; margin-bottom: 3.5rem; font-weight: bold; color: #000000; border: 0; border-left-width: 7px; border-left-style: solid; -webkit-border-left-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F90C1A), to(rgba(197, 8, 19, 1))) 1 100%; -webkit-border-image: -webkit-linear-gradient(#F90C1A, rgba(197, 8, 19, 1)) 1 100%; -moz-border-image: -moz-linear-gradient(#F90C1A, rgba(197, 8, 19, 1)) 1 100%; -o-border-image: -o-linear-gradient(#F90C1A, rgba(197, 8, 19, 1)) 1 100%; border-image: linear-gradient(to bottom, #F90C1A, rgba(197, 8, 19, 1)) 1 100%; }
h3 { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 2.6rem;  margin-bottom: 1.4rem; line-height: 4rem; }
h4 { font-size: 2.4rem; line-height: 2.4rem; font-weight: normal; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem;  }
p { margin-top: 0; color: #4E5052; font-size: 1.9rem; line-height: 2.3rem; margin-bottom: 1.5rem; }
a { color: #ffffff; text-decoration: none; font-size: 1.8rem; line-height: 1.8rem; }
a:hover { text-decoration: none; }
blockquote { background-color: #46575E; color: #fff !important; padding: 1em 1.5em; margin: 0 0 1.4rem 0; }
blockquote p { margin-bottom: 0; font-family: 'UniversLTStd-Bold', Helvetica, sans-serif; font-size: 2.2rem; line-height: 2.6rem; color: #fff !important; }
blockquote cite { font-style: italic; font-size: 0.92em; line-height: 1.5em; display: block; margin-top: 0.5rem; }
.desktop-only,
.mobile-only { display: none !important; }

.button, .button:link, .button:visited { display: inline-block; font-size: 2.5rem; line-height: 3.7rem; padding: 2rem 5rem; text-decoration: none; background-color: #F80000; color: #ffffff;  font-family: 'UniversLTStd-Bold', Helvetica, sans-serif; margin-top: 2rem; }
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.visually-hidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.text-bold { font-family: 'UniversLTStd-Bold', Helvetica, sans-serif !important; }
strong { font-family: 'UniversLTStd-Bold', Helvetica, sans-serif; }
#logo { background: url("../images/logo.png"); background-repeat: no-repeat; background-size: contain; display: block; height: 55px; text-indent: -9999px; width: 150px; }
.sub-head { margin-top: 4rem; }
#upgrade { padding: 30px; font-size: 18px; font-weight: bold; text-align: center; }
section { overflow: hidden; }
section.grey { background-color: #DEE0E0; }
.section-wrap,
.section-logo { position: relative; max-width: 960px; width: 90%; margin: 0 auto; box-sizing: border-box; }
.section-wrap { padding: 6rem 0; }
.section-logo { position: absolute; z-index: 10; left: 0; right: 0; }

/*chat pointer*/
a.chat-click { cursor: pointer;}


/* HEADER */
header { position: relative; overflow: hidden; background: #DEE0E0; min-height: 447px; }
header .section-wrap { padding: 0 100px 0 0; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; z-index: 11; }
header h1 { margin-bottom: 1rem; color: #4E5052; }
header p { color: #4E5052; text-transform: none; font-size: 3.4rem; line-height: 3.4rem; font-family: Arial, Helvetica, sans-serif; font-weight: normal; }
header div.bc-level-1,
header div.bc-level-2 { position: absolute; width: 100%; height: 100%; z-index: 1; }
header div.bc-level-1 { background: #dee0e0 url(../images/h-bc-n.jpg) no-repeat right bottom; background-size: contain; }
header div.bc-level-2 { background: transparent url(../images/h-bc-n-2.png) no-repeat right bottom; z-index: 10; top: 0; background-size: 50% auto; }

/* FOOTER */
footer .section-wrap { /*max-width: 700px;*/ width: 90%; margin: 2% auto 0; font-size: 1.6rem; line-height: 2.2rem; padding-bottom: 5rem; text-align: center; color: #324b5c; }
footer .footer-bottom { min-height: 100px; display: block; background: #dee0e0 url(../images/h-bc-n.jpg) no-repeat right bottom; background-size: 30% auto; }

/* JOURNEY APP */
#journey-app .section-wrap { padding: 6rem 0 8rem; }
#journey-app aside { float: left; width: 40%; }
#journey-app .video-holder { position: absolute; right: 0; width: 480px; }
#journey-app .cw20v1 .cw20slider { height: 310px; }
#journey-app .cw20v1 .cw20w8 { width: 100%; margin: 0; overflow: auto; max-width: inherit; }
#journey-app .cw20v1 .cw20w3 { overflow: visible; }
#journey-app .cw20tnav, #journey-app .cw20inav { top: 50%; transform: translateY(-50%); height: 60px !important; }
.js .cw20slides.cw20imgslides>li { height: auto !important; }
#journey-app .cta { position: relative; color: #1F4F82; border: 1px solid #939699; padding: 15px 35px 15px 15px; margin: 40px 0 0; display: inline-block; background: #f1f1f1; background: -moz-linear-gradient(top,  #f1f1f1 0%, #ffffff 49%, #d4d4d5 100%); background: -webkit-linear-gradient(top,  #f1f1f1 0%,#ffffff 49%,#d4d4d5 100%); background: linear-gradient(to bottom,  #f1f1f1 0%,#ffffff 49%,#d4d4d5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#d4d4d5',GradientType=0 ); }
#journey-app .cta span { position: absolute; background: transparent url(../images/sprite.png) no-repeat 0 -53px; display: block; right: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 20px; }

/* FIVE STEPS */
#five-steps { background: #edeeee; position: relative; min-height: 1800px; }
#five-steps ul li { position: relative; margin-bottom: 20px; /*min-height: 245px;*/ list-style-type: none; overflow: hidden; }
#five-steps ul li:last-child { margin-bottom: 0 !important; }
#five-steps .steps-holder { padding: 30px 0; }
#five-steps .pentagon { float: left; width: 234px; height: 220px; display: block; background: transparent url(../images/pentagon.png) no-repeat; position: relative; -webkit-transition: background-position 0.3s ease-in; transition: background-position 0.3s ease-in; }
#five-steps .pentagon div { position: absolute; top: 40%; left: 48%; transform: translate(-48%, -40%); color: #fff; text-align: center; }
#five-steps .pentagon span, .pentagon p {  color: #fff; display: block; }
#five-steps .pentagon span { font-size: 6.4rem; line-height: 6.4rem; padding-bottom: 5px; }
#five-steps .pentagon p { font-size: 2.8rem; }
#five-steps .c-block { float: right; border-top: 10px solid #8aadbf; background-color: #fff; padding: 25px 25px 0 35px; width: 65%; /*position: absolute; top: 0; right: 0;*/ -webkit-transition: border 0.5s ease-in; transition: border 0.5s ease-in; }
#five-steps .c-block aside { margin: 30px 20px; position: relative; min-height: 125px; }
#five-steps .c-block a { font-size: 1.3rem; display: inline-block; padding-bottom: 10px; font-weight: bold; cursor: pointer; }
#five-steps .c-block a label { display: inline-block; padding-right: 20px; position: relative; cursor: pointer; color: #1f4f82; text-decoration: none; }
#five-steps .c-block a label:after { width: 11px; height: 16px; display: block; background: transparent url(../images/sprite.png) no-repeat 0 0; position: absolute; top: 2px; right: 0; content: ''; }
#five-steps .c-block a label.partnerlbl { padding-right: 1px;}
#five-steps .c-block a label.partnerlbl:after { width: 11px; height: 16px; display: block; background: none !important; position: absolute; top: 2px; right: 0; content: ''; }
.no-link-label { font-size: 1.3rem; display: inline-block; padding-bottom: 10px; font-weight: bold;}
.fixed-width { width: 65%; }



#five-steps .c-block .graphic { width: 155px; height: 110px; display: block; position: absolute; right: 0; bottom: 0; }
#five-steps .step-1 .graphic { background: transparent url(../images/step-graphic_1.jpg) no-repeat; }
#five-steps .step-2 .graphic { background: transparent url(../images/step-graphic_2.jpg) no-repeat; }
#five-steps .step-3 .graphic { background: transparent url(../images/step-graphic_3.jpg) no-repeat; }
#five-steps .step-4 .graphic { background: transparent url(../images/step-graphic_4.jpg) no-repeat; }
#five-steps .step-5 .graphic { background: transparent url(../images/step-graphic_5.jpg) no-repeat; }
#five-steps .step-1 .pentagon { background-position: -325px 0; }
#five-steps .step-2 .pentagon { background-position: -325px -246px; }
#five-steps .step-3 .pentagon { background-position: -325px -497px; }
#five-steps .step-4 .pentagon { background-position: -325px -746px; }
#five-steps .step-5 .pentagon { background-position: -325px -995px; }
#five-steps .step-1 .c-block { border-top-color: #8aadbf; }
#five-steps .step-2 .c-block { border-top-color: #324b5c; }
#five-steps .step-3 .c-block { border-top-color: #939699; }
#five-steps .step-4 .c-block { border-top-color: #8aadbf; }
#five-steps .step-5 .c-block { border-top-color: #324b5c; }
#five-steps .step-1.active .pentagon { background-position: -1px 0; }
#five-steps .step-2.active .pentagon { background-position: -1px -246px; }
#five-steps .step-3.active .pentagon { background-position: -1px -497px; }
#five-steps .step-4.active .pentagon { background-position: -1px -749px; }
#five-steps .step-5.active .pentagon { background-position: -1px -997px; }
#five-steps .step-1.active .c-block { border-top-color: #F80000; }
#five-steps .step-2.active .c-block { border-top-color: #F29111; }
#five-steps .step-3.active .c-block { border-top-color: #00758F; }
#five-steps .step-4.active .c-block { border-top-color: #3A913F; }
#five-steps .step-5.active .c-block { border-top-color: #942645; }
/*#five-steps .section-wrap { position: absolute; left: 0; right: 0; z-index: 12; }*/
#five-steps .section-wrap { z-index: 12; }
#five-steps .steps-bc-1,
#five-steps .steps-bc-2 { position: absolute; width: 100%; height: 100%; }
#five-steps .steps-bc-1 { background: transparent url(../images/steps-bc.jpg) no-repeat; background-size: contain; z-index: 5; opacity: 0.7; }
#five-steps .steps-bc-2 { background: transparent url(../images/steps-bc-2-n-n.png) no-repeat; background-size: contain; z-index: 10; top: 1000px; opacity: 0.5; }



/* WATCH VIDEO */
#watch-video { background-color: #c5d6df; min-height: 397px; position: relative; }
#watch-video .section-wrap { position: absolute; z-index: 11; left: 0; right: 0; }
#watch-video h2 { float: left; width: 40%; height: 2.8rem; }
#watch-video .youtube-holder { width: 500px; height: 280px; float: right; position: relative; }
#watch-video .youtube-player { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#watch-video .buidling {
    background-repeat: repeat-x; background-size: auto; position: absolute;
    width: 100%; height: 100%; background-position: center center; }

#watch-video .buidling.level1 {
    background-image: url(../images/b-1.png);
    z-index: 10;
    bottom: -400px;
}
#watch-video .buidling.level2 {
    background-image: url(../images/b-2.png);
    z-index: 6;
    bottom: -600px;
}
#watch-video .buidling.level3 {
    background-image: url(../images/b-3-1.png);
    z-index: 3;
    bottom: -600px;
}


/* FIVE FACTS */
#five-facts .pent-group { margin-top: 40px; width: 100%; min-height: 290px; display: block; }
#five-facts .pent-group li { float: left; min-height: 200px; width: 22.1%; margin-left: -28px; }
#five-facts .pent-group li div { background: transparent url(../images/pentagon.png) no-repeat; width: 212px; height: 200px; position: relative; }
#five-facts .pent-group li span { position: absolute; display: block; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#five-facts .pent-group li aside { min-height: 80px; width: 0; margin: 0 auto; }
#five-facts .pent-group li label { width: 16px; height: 16px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; display: block; margin: 0 auto; }
#five-facts .pent-group li p { padding: 20px 8px; margin: -8px auto 0; width: 75%; color: #324b5c; }
#five-facts .pent-group li.pent-g-2,
#five-facts .pent-group li.pent-g-4 { margin-top: 85px; }
#five-facts .pent-group li.pent-g-1 { margin-left: 0; }
#five-facts .pent-group li.pent-g-2 aside,
#five-facts .pent-group li.pent-g-4 aside { min-height: 200px; }
#five-facts .pent-group li.pent-g-1 div,
#five-facts .pent-group li.pent-g-4 div { background-position: -332px -1254px; }
#five-facts .pent-group li.pent-g-1 div span { background: transparent url(../images/facts-ico_1.png) no-repeat; width: 121px; height: 69px; }
#five-facts .pent-group li.pent-g-2 div,
#five-facts .pent-group li.pent-g-5 div { background-position: 0 -1489px; }
#five-facts .pent-group li.pent-g-2 div span { background: transparent url(../images/facts-ico_2.png) no-repeat; width: 91px; height: 109px; }
#five-facts .pent-group li.pent-g-3 div { background-position: 0 -1254px; }
#five-facts .pent-group li.pent-g-3 div span { background: transparent url(../images/facts-ico_3.png) no-repeat; width: 98px; height: 114px; }
#five-facts .pent-group li.pent-g-4 div span { background: transparent url(../images/facts-ico_4.png) no-repeat; width: 102px; height: 78px; }
#five-facts .pent-group li.pent-g-5 div span { background: transparent url(../images/facts-ico_5.png) no-repeat; width: 102px; height: 104px; }
#five-facts .pent-group li.pent-g-2 div,
#five-facts .pent-group li.pent-g-4 div,
#five-facts .pent-group li.pent-g-2 div span,
#five-facts .pent-group li.pent-g-4 div span { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#five-facts .pent-group li.pent-g-2 div span { top: 30%; left: 27%; }
#five-facts .pent-group li.pent-g-4 div span { top: 40%; left: 26%; }
#five-facts .pent-group li.pent-g-1 aside,
#five-facts .pent-group li.pent-g-4 aside { border-right: 2px dotted #8aadbf; }
#five-facts .pent-group li.pent-g-1 label,
#five-facts .pent-group li.pent-g-4 label { background: #8aadbf; }
#five-facts .pent-group li.pent-g-1 p,
#five-facts .pent-group li.pent-g-4 p { border: 1px solid #8aadbf; }
#five-facts .pent-group li.pent-g-2 aside,
#five-facts .pent-group li.pent-g-5 aside { border-right: 2px dotted #324b5c; }
#five-facts .pent-group li.pent-g-2 label,
#five-facts .pent-group li.pent-g-5 label { background: #324b5c; }
#five-facts .pent-group li.pent-g-2 p,
#five-facts .pent-group li.pent-g-5 p { border: 1px solid #324b5c; }
#five-facts .pent-group li.pent-g-3 aside { border-right: 2px dotted #939699; }
#five-facts .pent-group li.pent-g-3 label { background: #939699; }
#five-facts .pent-group li.pent-g-3 p { border: 1px solid #939699; }
#five-facts .facts-mobile { display: none; }
#five-facts .facts-mobile img { width: 100%; }
#five-facts .cta { width: 140px; font-size: 2rem; line-height: 2rem; position: relative; color: white; border: 0; padding: 18px 60px 18px 25px; margin: 70px auto 0; display: block; background: #c90000; background: -moz-linear-gradient(top,  #c90000 0%, #f70000 49%, #cf0000 100%); background: -webkit-linear-gradient(top,  #c90000 0%,#f70000 49%,#cf0000 100%); background: linear-gradient(to bottom,  #c90000 0%,#f70000 49%,#cf0000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c90000', endColorstr='#cf0000',GradientType=0 ); }
#five-facts .cta span { position: absolute; background: transparent url(../images/sprite.png) no-repeat 0 -108px; display: block; right: 17px; top: 50%; transform: translateY(-50%); width: 25px; height: 30px; }




/* ------------ */
/* MEDIA QUERIES */
@media (min-width: 769px) {
    .desktop-only { display: block !important; }
    .mobile-only { display: none !important; }
}
@media (max-width:990px) {
    header { min-height: 350px; }
    #journey-app .video-holder { width: 400px; }
    #journey-app .cw20v1 .cw20slider { height: 255px; }
    #five-steps ul li { min-height: 265px; margin-bottom: 20px; }
    #five-steps .pentagon { width: 148px; height: 145px; background-size: 259% auto; }
    #five-steps .pentagon span { font-size: 4.6rem; line-height: 4.6rem; padding-bottom: 0; }
    #five-steps .pentagon p { font-size: 2rem; }
    #five-steps .step-1 .pentagon { background-position: -208px 0; }
    #five-steps .step-2 .pentagon { background-position: -208px -157px; }
    #five-steps .step-3 .pentagon { background-position: -208px -317px; }
    #five-steps .step-4 .pentagon { background-position: -208px -480px; }
    #five-steps .step-5 .pentagon { background-position: -208px -638px; }
    #five-steps .step-1.active .pentagon { background-position: -1px 0; }
    #five-steps .step-2.active .pentagon { background-position: -1px -157px; }
    #five-steps .step-3.active .pentagon { background-position: -1px -317px; }
    #five-steps .step-4.active .pentagon { background-position: -1px -480px; }
    #five-steps .step-5.active .pentagon { background-position: -1px -638px; }
    #watch-video h2 { width: 30%; }
    #watch-video .youtube-holder { width: 450px; }
    #five-facts .pent-group { display: none; }
    #five-facts .facts-mobile { display: block; }
}
@media (min-width:820px) and (max-width:990px) {
    #five-steps .c-block { width: 70%; }
    #five-steps ul li { min-height: 245px; }
}
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
    .section-wrap { padding: 3rem 0 !important; }
    h1 { font-size: 3.8rem; line-height: 3.8rem; }
    h2 { font-size: 2.8rem; line-height: 2.8rem; }
    header p { font-size: 2.8rem !important; line-height: 2.8rem !important; }
    header { min-height: 310px; }
    header div.bc-level-1 { right: -35%; }
    header div.bc-level-2 { background-size: 60% auto; }
    #journey-app aside { float: none; width: auto; }
    #journey-app .video-holder { position: static; width: auto; margin-top: 40px; }
    #journey-app .cw20v1 .cw20slider { height: 360px; }
    #journey-app .cw20vid,
    #journey-app .cw20inav { height: auto !important; }
    #five-steps .c-block { position: static; width: auto; padding-bottom: 1px; float: none; }
    #five-steps .pentagon { margin: 0 auto;  float: none; }
    #five-steps ul li { min-height: 245px; margin-bottom: 40px; }
    #watch-video h2 { float: none; width: auto; }
    #watch-video .youtube-holder { float: none; width: auto; height: 350px; margin-top: 50px; }
    #five-steps { min-height: 2350px; }
    #watch-video { min-height: 505px; }
    #watch-video .buidling { background-position-y: bottom; }
}
@media ( max-width: 640px) {
    header div.bc-level-1 { background-size: cover; }
    header .section-wrap { padding-right: 0; }
    #journey-app .cw20v1 .cw20slider { height: auto; }
    #five-steps .c-block .graphic { display: none; }
    #five-steps .c-block aside { margin-left: 0; margin-right: 0; min-height: 70px; }
    .fixed-width { width: 100%; }
    #journey-app .cw20v1 .cw20w3 { display: inline-block; overflow: auto; }
}
@media ( max-width: 480px) {
    header div.bc-level-1 { right: -60%; }
    header div.bc-level-2 { display: none; background-size: 78% auto; right: -10%; }
}















