@font-face {
    font-family: "Gilroy Bold";
    src: url("../fonts/GilroyBold/font.woff2") format("woff2"),
    url("../fonts/GilroyBold/font.woff") format("woff");
}

@font-face {
    font-family: "Larsseit Bold";
    src: url("../fonts/LarsseitBold/font.woff2") format("woff2"),
    url("../fonts/LarsseitBold/font.woff") format("woff");
}

@font-face {
    font-family: "Larsseit Regular";
    src: url("../fonts/LarsseitRegular/font.woff2") format("woff2"),
    url("../fonts/LarsseitRegular/font.woff") format("woff");
}

* {
    --primary-green: #0B6464;
    --dark-green: #004A54;
    --bright-green: #0D7B6E;
    --cream: #FBF9F3;
    --button-green: #95DF68;
    --hover-green: #B0F784;
    --hilite-green: #C7F16E;
    --error: #F65363;
    --mobile-padding: 0 25px;
}

body { padding: 0; margin: 0; background: var(--hilite-green); }

img { max-width: 100%; }
button { cursor: pointer; }

.ps_container { width: 100%; max-width: 768px; margin: 0 auto; }

@media (min-width: 1200px) {
    .ps_container { max-width: 1024px; }
}

.headline { font-family: "Gilroy Bold"; font-size: 56px; line-height: 64px; letter-spacing: 0.012em; }

.download_headline { color: var(--dark-green); font-family: "Gilroy Bold"; font-size: 78px; font-weight: 700; line-height: 84px; letter-spacing: 0.012em; align-content: center; width: 80%; max-width: 1000px; margin: 150px auto 150px auto; }
.download_subhead { color: var(--primary-green); font-family: "Gilroy Bold"; font-size: 56px; line-height: 64px; letter-spacing: 0.012em; align-content: center; width: 80%; max-width: 1000px; margin: 50px auto 150px auto; }

@media screen and (max-width: 1199px) {
    .download_headline { font-size: 56px; line-height: 64px; }
    .download_subhead { font-size: 42px; line-height: 48px; }
    .app_store_buttons { padding-top: 40px }
}

.body_copy { font-family: "Larsseit Regular"; font-size: 22px; font-style:normal; font-weight:normal; line-height: 30px; letter-spacing: 0.37px; }
.body_copy.body_copy--small { font-size: 18px; line-height: 24px; }

@media screen and (max-width: 1199px) {
    .body_copy{font-size: 20px; line-height: 30px;}
}

.top { background:var(--primary-green); background-image: url(/resources/images/Subtract.svg), url(/resources/images/Ellipse%2068.svg); background-position: left bottom, right top; background-repeat:no-repeat; }

@media screen and (max-width: 1024px) {
    .top { background-image: url(/resources/images/SubtractMobile.svg), url(/resources/images/Ellipse%2068.svg); }
}

.top .nav { background: transparent }

.nav { background: var(--primary-green); padding-top: 40px;}
.nav_container { width: 100%; max-width: 768px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr }
.nav_container > div { display: flex; justify-content: left; align-items: center }
.nav_container > div.links { justify-content: right; align-items: center }
.nav_container button { color: #fff; font-family: "Gilroy Bold"; font-size: 18px; line-height: 24px; font-style: normal;
    font-weight: normal; padding: 10px 27px 11px; border: solid 1px var(--button-green); border-radius: 46px; background: transparent }
.nav_container button:hover { background: var(--button-green) }
.nav_container img { padding: 10px 0; }
.nav_container .links span { display: none; }

@media (min-width: 1200px) {
    .nav_container { width: 100%; max-width: 1200px; }
    .nav_container .links span { display: initial; }
}

@media screen and (max-width:1199px) {
    .nav_container { box-sizing: border-box; padding: var(--mobile-padding) }
}

.hero { color: #fff; padding: 20px 0 20px; }
.hero .ps_container { max-width: 1200px; }
.hero_content { display: grid; grid-template-rows: auto auto 1fr; grid-template-columns: 720px 480px }
.hero_content .headline { grid-column: 1; grid-row: 1; margin-top: 40px; min-width: 640px; }
.hero_content h1 { font-size: 78px; line-height: 84px; }
.hero_content h4 { font-family: "Larsseit Regular"; grid-column: 2; grid-row: 2; }
.hero_content .phone { grid-row: 1 / 4; grid-column: 2; margin: 0 0 80px 40px; filter: drop-shadow(12px 12px 20px rgba(0, 0, 0 , .75));  }

@media screen and (max-width: 1199px) {
    .hero { padding: 0 0 40px; }
    .hero .ps_container { max-width: 768px; }
    .hero_content { display: grid; grid-template-rows: auto auto auto 1fr; grid-template-columns: auto; }
    .hero_content .headline { grid-column: 1; grid-row: 1; margin-top: 0; padding: 0 0 40px 0; min-width: 120px; }
    .hero_content h1 { font-size: 42px; line-height: 48px; padding: var(--mobile-padding); }
    .hero_content h4 { grid-column: 1; grid-row: 3; margin: 0; padding: var(--mobile-padding); font-size: 20px; line-height: 30px; }
    .hero_content .phone { grid-column: 1; grid-row: 2; margin: 10px auto 20px auto; max-width: 80%; }
    .hero_content .mobile { padding: var(--mobile-padding); text-align: center;}
}

.hilite_green { color: var(--hilite-green); }

.qr_code_page_holder { background: var(--button-green); border-radius: 17px; width: 360px; height:160px; position: relative; }
.qr_code_page_holder:hover { cursor: pointer; filter: drop-shadow(12px 12px 12px var(--dark-green)); }
.qr_code_page_text { display: inline-block; font-family: "Gilroy Bold"; color: var(--dark-green); font-size: 24px; line-height: 26px; text-align: left; padding: 25px; width: 165px; }
.qr_code_page_img { background: #fff; padding: 5px; border-radius: 10px; position: absolute; left: 210px; top: 10; }

.qr_code_mini_holder { background: var(--button-green); border-radius: 17px; width: 160px; height:160px; position: fixed; left: 40px; bottom: 80px; transition: all 1s; }
.qr_code_mini_holder:hover { cursor: pointer; filter: drop-shadow(12px 12px 12px var(--dark-green)); }
.qr_code_mini_img { background: #fff; padding: 5px; border-radius: 10px; position: absolute; left: 10px; top: 10; }

.qr_code_modal_holder { background: var(--button-green); border-radius: 37px; width: 446px; height:672px; position: fixed;  left: 35%; top: 7%; margin: auto auto; filter: drop-shadow(10px 10px 16px var(--dark-green));visibility: hidden; }
.qr_code_modal_text { display: inline-block; font-family: "Larsseit Bold"; font-size: 22px; line-height: 26px; font-weight: bold; letter-spacing: 0.37px; color: var(--dark-green); text-align: center; padding: 30px 25px; width: 400px; }
.qr_code_modal_img { background: #fff; padding: 7px; border-radius: 27px; margin: 0 25px 50px 25px;}
.qr_code_modal_btn { margin: 10px 25px; } 

.mobile_sticky_footer { background: var(--button-green); border-radius: 17px 17px 0 0; position: fixed; left: 0; bottom: 0; width: 100%; height: 67px; transition: all 1s; }
.mobile_sticky_footer_img { padding: 20px 25px; margin: 0 auto; align-items: center;}

.hide_mini { opacity: 0; bottom: -100%; }
.show_mini { opacity: 1; bottom: 80px; }

.hide_mobile_sticky { opacity: 0; bottom: -100%; }
.show_mobile_sticky { opacity: 1; bottom: 0%; }

.counter_margin { margin: -36px, 0; }

.logo_banner { height: 40px; width: 100%; margin: 60px 0; overflow-x: hidden; }
.scroll-parent { position: relative; width: 100vw; height: 40px; overflow-x: hidden; }
.scroll-element { position: absolute; left: 0%; top: 0%; width: inherit; height: inherit; animation: primary 27s linear infinite; }
.primary { animation: primary 27s linear infinite; }  
.secondary { animation: secondary 27s linear infinite; }
  
@keyframes primary { from { left: 0%; } to { left: -100%; } }
@keyframes secondary { from { left: 100%; } to { left: 0%; } }

@media screen and (max-width:1199px) {
    .scroll-parent { position: relative; width: 180vw; height: 40px; overflow-x: hidden; }
}

#stats_block { background: #004A54; }
.stats_block_content { padding: 60px 25px 50px 25px; font-family: "Larsseit Regular"; font-size: 18px; line-height: 24px; letter-spacing: 0.37px; color: #fff; }
.stats_block_content a { color: #fff; }
.stats_cr_area { grid-column: 1; grid-row: 1; padding-top: 20px; }
.big_stat_area { grid-row: 1 / 2; grid-column: 2; }
.big_stat { font-size: 112px; font-weight: 700; font-family: "Gilroy Bold"; line-height: 96px; color: var(--button-green) }
.stat_subtitle { font-family: "Larsseit Regular"; font-size: 24px; line-height: 24px; letter-spacing: 0.37px; color: #fff; }

@media screen and (max-width:1199px) {
    .stats_cr_area { grid-column: 1; grid-row: 2; padding: 20px 0 80px 0; }
    .big_stat_area { grid-row: 1 / 1; grid-column: 1; padding: 20px 0 0 0; }
}

#slide_container { background: var(--cream); height: calc(100vh * 10 + 200px); color: var(--dark-green) }
#slide_container h2 { margin: 0 0 40px }
#slide_container h4 { font-family: "Larsseit Bold"; font-size: 18px; line-height: 30px; color: var(--hover-green); letter-spacing: .37px; display: flex; align-items: center; }
#slide_container p { font-family: "Larsseit Regular"; font-size: 22px; line-height: 30px; letter-spacing: 0.37px; }
#slide_container img { margin-right: 10px; }

#slide_container .slide_wrapper { position: sticky; top: 0; }
#slide_container .ps_container { position: sticky; top: 0; }
#slide_container.cream { animation-duration: 0.25s; animation-name: fadegreenbgout; background:var(--cream) }
#slide_container.green.cream .text h2, #slide_container.green.cream .text p { color:var(--dark-green); }
#slide_container.green { animation-duration: 0.25s; animation-name: fadegreenbgin; background:var(--bright-green); }
#slide_container.green .text h2, #slide_container.green .text p { color: #fff; }
#slide_container.green .headline span { color: var(--hover-green) }
#slide_container.green .slide_wrapper { background-image: url('/resources/images/eyes_bg.svg'); background-position: calc(50% + 383px) center; background-size: 729px; background-repeat: no-repeat }

.slide_content { height: 100vh; display: grid; grid-template-columns: 530px auto; grid-template-rows: 1fr; }
.slide_content .text { display: grid; grid-column: 1; justify-content: center; align-items: center }
.slide_content .text img { filter: initial; width: initial; }
.slide_content .phone { display:grid; grid-column: 2; justify-content: center; align-items: center }
.slide_content .phone img { max-width: 433px; width: 433px; filter: drop-shadow(10px 10px 20px rgba(0, 0, 0 , .75)); padding: 50px 0 0 50px; }

.phone-green-bg { background: #DAFE8F; border-radius: 36px; padding: 0x; margin-left: 40px; max-width: 500px; }
.phone-aqua-bg { background: #ABF0D8; border-radius: 36px; padding: 0x; margin-left: 40px; max-width: 500px; }
.phone-yellow-bg { background: #FFF1A7; border-radius: 36px; padding: 0; margin-left: 40px; max-width: 500px; }

@media screen and (max-width:1199px) {
    #slide_container { height: initial; }
    #slide_container .ps_container { position: initial; max-width: 100%; }
    #protoslide { display: none; }
    #slide_container .slide_content:nth-of-type(2) .text h2 { margin-top: 75px; }
    #slide_container .slide_content:last-of-type .text h2 { margin-top:30px; } 
    #slide_container h2 { margin: 40px 0 40px 0; font-size: 42px; line-height: 48px; }
    #slide_container p { font-size: 20px; }
    #slide_container h4 { margin-top: 75px; }
    .slide_content { grid-template-columns: 1fr; grid-template-rows: auto auto; height: initial; }
    .slide_content .text { box-sizing: border-box; padding: var(--mobile-padding); max-width: 768px; margin: 0 auto; grid-row: 1; grid-column: 1 }
    .slide_content .phone { grid-row: 2; grid-column: 1; max-width: 100%; overflow: hidden; }
    .slide_content img { max-width: 87.5%; }
    .slide_content:last-of-type { background:var(--bright-green); color: #fff; }

    .phone-green-bg { border-radius: 25px; margin: 20px 20px 60px 20px; }
    .phone-aqua-bg { border-radius: 25px; margin: 20px 20px 60px 20px; } 
    .phone-yellow-bg { border-radius: 25px; margin: 20px 20px 60px 20px; }
}

.slide_content.hidden { display: none; }
.slide_content.active { display: grid; }
.slide_content .text.slideout { animation-duration: 0.5s; animation-name: slideout; opacity: 0; }
.slide_content .text.slidein { animation-duration: 0.5s; animation-name: slidein; opacity: 1; }
.slide_content .phone.fadeout { animation-duration: 0.16s; animation-name: fadeout; opacity: 0; }
.slide_content .phone.fadein { animation-duration: 0.5s; animation-name: fadein; opacity: 1; }

@keyframes fadegreenbgin {
    from { background: var(--cream); }
    to { background: var(--bright-green); }
}

@keyframes fadegreenbgout {
    from { background: var(--bright-green) ;}
    to { background: var(--cream); }
}

@keyframes slideout {
    from { position: relative; top: 0; opacity: 1; }
    to { position: relative; top: -20px; opacity: 0; }
}

@keyframes slidein {
    from { position: relative; top: 20px; opacity: 0; }
    to { position: relative; top: 0; opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.premium_upsell { background: #ABF0D8; color: var(--dark-green); padding: 100px 0; width: 100%; }
.premium_upsell .ps_container { position: relative; max-width: 1200px; }
.premium_upsell .left-block { max-width: 650px; }
.premium_upsell .right-block { max-width: 650px; margin: 0; padding-top: 40px; }
.premium_upsell_content_2col { display: grid; grid-template-columns: 50% 50%; gap: 60px; width: 1280px; }
.premium_upsell_content_3col { display: grid; grid-template-columns: 33% 33% 33%; gap: 40px; margin-right: 40px; }

.premium_upsell .top_tagline { font-family: "Larsseit Bold"; font-weight: 700; font-size: 26px; line-height: 34px;}
.premium_upsell .no_lozenge { margin: 2px 3px 0 0; }
.premium_upsell .lozenge { background: var(--dark-green); color: ABF0D8; border-radius: 14px; font-size: 20px; letter-spacing: 1px; padding: 1px 12px; }
.premium_upsell h2 { font-family: "Gilroy Bold"; font-weight: 700; font-size: 54px; line-height: 64px; max-width: 500px; }
.premium_upsell p { font-family: "Larsseit Regular"; font-weight: 400; font-size: 22px; line-height: 30px; max-width: 500px; }
.premium_upsell h3 { font-family: "Gilroy Bold"; font-weight: 700; font-size: 40px; line-height: 44px; }

.premium_upsell .table_container { position: relative; margin: 40px 0 100px 0; }
.premium_upsell table { margin-top: 40px; border-collapse: collapse; }
.premium_upsell table, th, td { border: 0; }
.premium_upsell th { color: var(--dark-green); font-family: "Gilroy Bold"; font-weight: 700; text-align: left; font-size: 24px; line-height: 28px; border-bottom: 2px solid rgba(110, 214, 172, 0.5); padding: 25px 0 25px 0; margin: 0; }
.premium_upsell td { color: var(--dark-green); font-family: "Larsseit Regular"; font-weight: 400; font-size: 22px; line-height: 30px; padding: 12px 0; }
.plus_col_top { background: rgba(110, 214, 172, .5); border-radius: 14px 14px 0 0; padding-left: 25px !important; }
.plus_col { background: rgba(110, 214, 172, .5); padding-left: 25px !important; margin-right: 25px; }
.plus_col_bot { background: rgba(110, 214, 172, .5); border-radius: 0 0 14px 14px; padding-left: 25px !important; padding-bottom: 25px !important;}

.premium_upsell .why-plus-block { background: rgba(234, 251, 245, .3); border-radius: 12px; max-width: 345px; min-height: 330px;}
.premium_upsell .why-plus-block .img_holder { width: 80px; height: 80px; margin: 20px 0 40px 20px; }
.premium_upsell .why-plus-block .subhead { font-family: "Gilroy Bold"; font-weight: 700; font-size: 20px; line-height: 24px;margin: 20px; }
.premium_upsell .why-plus-block .body_copy { font-family: "Larsseit Regular"; font-weight: 400; font-size: 18px; line-height: 22px; margin: 20px; }

@media screen and (max-width:1199px) {
    .premium_upsell .ps_container { width: 100%; max-width: 650px; margin: 0 auto; }
    .premium_upsell_content_2col { grid-template-columns: auto; grid-template-rows: auto auto; gap: 40px; max-width: 100%; }
    .premium_upsell_content_3col { grid-template-columns: auto; grid-template-rows: auto auto; gap: 40px; margin: 0 25px; }
    .premium_upsell .right-block { padding-top: 0; } 
    .premium_upsell .table_container { margin: 40px 0 0 25px ; padding-right: 25px; }
    .premium_upsell .why-plus-block { max-width: 650px; min-height: 240px; }
    .premium_upsell .top_tagline { margin-left: 25px; margin-right: 25px; }
    .premium_upsell h2 { font-size: 42px; line-height: 48px; max-width: 400px; margin-left: 25px; margin-right: 25px; }
    .premium_upsell p { max-width: 500px; margin-left: 25px; margin-right: 25px; }
    .premium_upsell h3 { margin-left: 25px; margin-right: 25px; }
    
}

.about_cr { background: var(--hilite-green); color: var(--dark-green); padding: 100px 0; }
.about_cr h2 { color: var(--dark-green); font-family: "Gilroy Bold"; }
.about_cr h4 { font-family: "Gilroy Bold"; margin-top: 0; }
.about_cr_content { display: grid; grid-template-columns: 50% 50%; gap: 60px }
.about_cr_content .body_copy { font-size: 20px; line-height: 24px; }
.about_cr_details { display: grid; grid-template-columns: 50px 1fr; grid-template-rows: repeat(3, auto); gap: 0 30px; margin-top: 60px; }
.about_cr_details .icon { justify-content: center; margin-bottom: 40px; }
.about_cr_details img { max-width: 100%;  }
.about_cr_details .desc { margin-bottom: 40px; }
.about_cr_details h4 { margin: 0; font-size: 17px; line-height: 22px }
.about_cr_details p { margin: 0 0 0px; max-width: 490px; }

@media screen and (max-width: 1199px) {
    .about_cr { box-sizing: border-box; padding: 36px 25px; }
    .about_cr_content { grid-template-columns: auto; grid-template-rows: auto auto; gap:40px }
    .about_cr h2 { font-size: 42px; line-height: 48px; }
    .about_cr h4 { font-size: 18px; line-height: 22px; }
    .about_cr .desc h4 { margin-bottom: 12px; }
    .about_cr .desc p { margin-bottom: 30px; }
    .about_cr_details { margin-top: 10px;}
}

.donate_block { background: #fff; color: var(--dark-green); padding:30px 50px; border: solid 1px #fff; border-radius: 18px; margin: 80px 0 20px 0; }
.donate_block h3 { font-family: "Larsseit Bold"; font-size: 22px; line-height: 26px; font-weight: bold; letter-spacing: 0.37px; }
.donate_block p { font-family: "Larsseit Regular"; font-size: 18px; line-height: 24px; font-weight: normal; letter-spacing: 0.37px; }
.donate_block .btn_holder { text-align: right; margin: 40px 50px 0 auto; }

@media screen and (max-width: 1199px) {
    .donate_block { margin: 40px 0 20px 0; }
    .donate_block .btn_holder { text-align: center; margin: auto; }
}

.cta { background: var(--dark-green); color: #fff; padding: 40px 0; border-radius: 46px 46px 0 0 ;}
.cta .ps_container { max-width: 1000px; }
.cta h1 { font-family: "Gilroy Bold"; font-size: 78px; line-height: 84px; letter-spacing: 0.012em; text-align: center;}
.cta .offer { padding: 0 0 60px 0; }
.cta_content { display: grid; grid-template-columns: 567px auto; gap: 70px; }
.cta_content .headline { font-size: 44px; line-height: 56px; padding-top: 20px; margin: 30px 0; }
.cta fieldset.os { margin-top: 16px; display: none; }
.offer .app_store_buttons { text-align: center; }
.offer .app_store_buttons img:first-of-type { padding: 0 10px 60px 0; }

.webapp { display: grid; }
.mobile { display: none; }

@media screen and (max-width: 1199px) {
    .cta { padding: 0; }
    .cta h1 { font-size: 42px; line-height: 48px; padding: 30px; }
    .cta .ps_container { max-width: 768px;}
    .cta .offer { padding: 0 0 20px 0; }
    .cta_content { display: grid; grid-template-columns: auto; grid-template-rows: auto auto; gap: 15px; box-sizing: border-box; }
    .cta_content .headline { font-size: 36px; line-height: 42px; }
    .cta_content .offer { grid-row: 1; padding: var(--mobile-padding); display: grid; grid-template-rows: auto auto auto; }
    .cta_content .offer .app_store_buttons { grid-row: 3 / 3; margin: 60px 0 }
    .cta_content .offer .headline { grid-row: 1 / 1; }
    .cta_content .offer .waitlist { grid-row: 2 / 2; }
    .offer .app_store_buttons { text-align: center; }
    .offer .app_store_buttons img:first-of-type { padding-bottom: 10px; }

    .webapp { display: none; }
    .mobile { display: grid; }
}

.footer { background: var(--dark-green); color: #fff; }
.footer a { color: #fff; }
.footer .nav_container { display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 200px auto; }
.footer .logo { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: left; }
.footer .links { grid-column: 2 / 2; grid-row: 1; display: flex; justify-content: right; align-items: center; }

.footer .links ul, .footer .links ul li { display:inline; font-family: "Larsseit Regular"; font-size:16px; line-height: 24px; 
    letter-spacing: 0.37px }
.footer .links li { margin-right: 40px }
.footer .links li a { text-decoration: none; text-underline: transparent }
.footer .links li a:hover { text-decoration: underline; text-underline: #fff }
.footer .links ul:last-of-type li { margin-right: 0; margin-left: 25px; }

.footer .copyright { grid-column: 1 / 3; grid-row: 2; font-family: "Larsseit Regular"; font-size: 14px; line-height: 24px; opacity: 0.35; letter-spacing: 0.37px; padding-bottom: 20px; }

@media screen and (max-width:1199px) {   
    .footer .nav_container { display: grid; grid-template-columns: auto; grid-template-rows: repeat(3, auto); padding-bottom: 60px; }
    .footer .logo { grid-column: 1; grid-row: 2 }
    .footer .links { grid-column: 1; grid-row: 1; margin-top: 40px; display: block; }
    .footer .links ul, .footer .links ul li { display: block; padding-left: 0; font-size: 18px; line-height: 30px; }
    .footer .links ul.social li { display: inline; margin-left: 0 }
    .footer .links ul.social li:last-of-type { margin-left: 20px; }
    .footer .links ul.social img { padding: 30px 0 0; }
    .footer .copyright { grid-column: 1; grid-row: 3; font-size: 12px; line-height: 24px; padding-bottom: 30px; }
}

.bold_and_bright { color:  #16937C; font-weight: 700; }

.videoholder { max-width: 560px; max-height: 315px;  margin: 40px 0; overflow: hidden; }