/* dark magenta #940052 */
/* magenta #fa7f6b */
/* teal #1D8174 */
/* light teal #27A69D */
/* extra light teal #BCE4E1 */
/* dark purple #021653 */
/* pink #EBBCE0 */
/* light pink #F4DCEF */

body { background-color: white }
.column, .columns, .column.content { padding-left: 1.5rem; padding-right: 1.5rem }
@media print, screen and (max-width: 40.0625em) {
  .row.content .columns .row .columns, .row.preferences .column, div.my-risk .row .column, div.avg-risk { padding-left: 0 !important; padding-right: 0 !important }
}
/* body:not(.home) { background: linear-gradient(170deg, transparent 60%, #F4F4F4 calc(60% + 1px)), center / cover no-repeat url('/assets/img/bg-teal.jpg') } */
body:not(.home) { background: #c5e5dd }
.lang-switcher { background: #1D8174; float: right; color: white !important; padding: 5px 15px; border-radius: 6px }
.lang-switcher:hover { background: #fa7f6b }
label { font-size: 1em; display: inline-block; margin-right: 20px }
label#id { margin-right: 0 }
p, a, span, li, button, h1, h2, h3, h4, h5, h6 { font-family: 'nexa', sans-serif }
p, span, li, button { font-size: 1.2em; font-weight: 500 }
p { line-height: 1.2; color: #305071 }
a, a:visited, a:active, a:focus, p, li, h1, h2, h3, h4 { color: #4a5461 }
h2 { font-size: 1.6em; font-weight: 600; margin-bottom: 15px; margin-left: 15px }
h4 { margin-bottom: 15px; margin-left: 15px }

h3 { font-size: 1.3em; font-weight: 600; line-height: 1; margin-bottom: 15px }
h1 i { margin: 0 20px; opacity: .65 }
ul { list-style: none; margin-left: 0 }
.content ul, .content p { margin-left: 15px; margin-right: 15px }
.content .block ul { margin-left: 0; margin-right: 0 }
.content .test-row p, body.basic .content .table p { margin-left: 0; margin-right: 0 }
.smaller ul { font-size: .9em }
ul li { border-bottom: 1px solid #e06a5760; padding: 13px 0; line-height: 1.2 }
hr { border: 0; height: 0; border-top: 0; border-bottom: 1px solid #1D8174 }
button.disabled { opacity: 30% }
button.disabled:hover { cursor: not-allowed }
.spacer { display: block; height: 40px; width: 100% }
.spacer.h20 { height: 20px }
.spacer.h80 { height: 80px }

#loading-animation { display: none }
.fake-img { height: 180px; border: thin solid #26561e }

.home .header-container { height: 600px }
.home .header-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 600px; background: center / cover no-repeat url('/assets/img/health-app-feature-image.jpg') }
.home .header h1 { color: #1D8174; max-width: 500px; font-weight: 600; position: relative }
.header { padding: 40px 0; align-items: center; height: 100% }
.header h1 { margin-bottom: 0; font-size: 1.75em; color: #536a76; line-height: 1.15 }
.header h1 i { margin-left: 0; margin-right: 13px }
.home .header h1 u { border-bottom: 2px solid #1D8174; display: inline-block; position: relative; bottom: -4px; line-height: .9; text-decoration: none; font-size: 1.2em }

.home .nav-bar-container { position: absolute; background: transparent }
.nav-bar-container { right: 0; left: 0; background-color: #f6f6f6; padding: 3px 0; z-index: 99 }
.nav-bar { flex-direction: row; align-items: center; height: 60px; background: white; width: 100%; background-color: #f6f6f6; padding-left: 280px }
.nav-bar div { flex-direction: row; justify-content: space-around; display: flex; flex-grow: 1; align-items: center }
.nav-bar div a, .nav-bar div p { border-bottom: 2px solid #f6f6f6; padding-bottom: 0; margin-bottom: 0; font-size: 1.2em; font-weight: 500 }
.nav-bar a, .nav-bar p { color: #536a76 }
.nav-bar p:hover { cursor: not-allowed }
.nav-bar div.active a { border-bottom: 2px solid #fa7f6b; color: #fa7f6b }
.nav-bar i.fa-chevron-right { color: #fa7f6b; font-size: 12px; margin-bottom: 5px }
.nav-bar>div:last-child i.fa-chevron-right { color: #f6f6f6 }
.nav-bar div:first-child { justify-content: flex-start }
.logo { padding: 5px 10px; display: inline-block; font-family: 'nexa', sans-serif; font-weight: 600; border-bottom: 0 !important; font-size: 26px !important; color: #FFF !important }
.logo.large { font-size: 2.4em !important; margin-bottom: 60px; color: #FA7E6B !important; }
.logo-wrapper { background: #fa7f6b; padding: 7px 37px 0 22px; display: block; font-family: 'nexa', sans-serif; font-weight: 600; position: absolute; left: 0; top: 0; height: 66px; clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%) }
body.home a.logo { color: #e06a57 !important; position: absolute; left: 5% }

.content { padding: 50px 0 40px }


@media print, screen and (max-width: 40.0625em) {
  .header { align-items: end }
  .header h1 { font-size: 1.5em }
  .home .header-container { height: 300px; background-position: -20px 0 !important }
  .home .header h1 { bottom: 20px }
  .home .header-container::before { height: 300px; opacity: .6 }
  .home .main.column { padding: 0 }
  .home .special-btn span { font-size: 1em }
  .home label { width: 97% }
  .home h2 { margin-left: 0; margin-right: 0 }
  .home .nav-bar div a { background: white }
}

@media print, screen and (min-width: 64.0625em) {
  .content { padding: 80px 80px 40px }
}
.footer-nav { width: 100% }
.content.r { padding-left: 30px }
.content a { text-decoration: underline }

h3.strong { font-size: 2em; color: #1D8174 }

div.img img { margin: 30px 0 }
.block { margin-bottom: 40px; background: #c5e5dd30; border-radius: 16px; padding: 20px 20px 30px; font-size: .9em }
.block ul { margin-bottom: 0 }

.page { flex-direction: column; overflow: hidden; height: 0; position: absolute; opacity: 0; transition: opacity .1s linear, height 0s linear .1s }
.page.visible { position: relative; height: auto; opacity: 1; transition: opacity .5s linear .1s, height 0s }
.page.row .row { margin-left: 0; margin-right: 0 }
.white-content { background: white; border-radius: 20px; padding: 0; margin-bottom: 30px; position: relative; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1) }
.row.header, .row.white-content { max-width: 90% }

img.round-tl { margin-top: 10px; border-radius: 14px }

@media print, screen and (min-width: 82.0625em) {
  .row.header, .row.white-content { max-width: 80em }
}

button.solid-btn { background-color: #fa7f6b/*#EBBCE0*/; padding:15px 50px; text-transform: uppercase }
button.arrow-btn { border: 3px solid #e06a57; border-radius: 50% !important; background: transparent; color: #e06a57; width: 80px; height: 80px; font-size: 2.5em }
button.arrow-btn:hover { background: #e06a57; color: #FFF }
.back-btn { position: absolute; background-color: transparent; color: #e06a57; bottom: 20px; font-family: 'nexa', sans-serif; margin-left: -6px }
.back-btn:hover { background-color: transparent; color: #bbb }
button.ghost-btn { border: thin solid #e06a57; padding: 15px 50px; background-color: transparent; color: #e06a57; font-size: 1.5em }
button.ghost-btn:hover { background: #e06a57; color: white }
.special-btn { display: flex; border: thin #fa7f6b solid; border-radius: 30px; padding: 10px 40px 10px 20px; margin: 0 10px; border: thin solid #CCC }
.special-btn:hover { cursor: pointer }
.special-btn span { color: #e06a57; font-size: 1.35em }
.special-btn i { color: #fa7f6b; margin-right: 20px; font-size: 1.2em; display: flex; align-items: center; line-height: 1.2em }
.special-btn i.fa-circle { color: #CCC }

.test-nav .test-nav-item { display: flex; flex-grow: 1; justify-content: center; height: 16px; border-bottom: 2px solid #BCE4E1 }
.test-nav-item>div { position: absolute }
.test-row.two, .test-row.three, #finish-btn { display: none }
.test-nav { display: flex; justify-content: space-around }
.test-nav-item>div { background: #BCE4E1; color: white; border-radius: 50%; width: 30px; height: 30px; text-align: center; line-height: 1.9 }
.active.test-nav-item { border-bottom-color: #27A69D }
.active.test-nav-item>div { background: #27A69D }
.test-nav-item>div:hover { cursor: pointer }
form#testForm { margin-top: 65px }
input:checked ~ .special-btn { border-color: #fa7f6b }
input:checked ~ .special-btn span { color: #27A69D }
input:checked ~ .special-btn i.fa-circle { display: none }
input:checked ~ .special-btn i.fa-check { display: flex }
input:not(checked) ~ .special-btn i.fa-circle { display: flex }
input:not(checked) ~ .special-btn i.fa-check { display: none }
body.home input[type='radio'] { height: 0; width: 0; visibility: hidden }
input[type='radio'] { accent-color: #e06a57; width: 20px; height: 20px }
input[type='radio']:checked ~ span { color: #e06a57 }
input[type='radio'] ~ span { position: relative; bottom: 4px; color: #777 }
body.home input[type='radio'] { display: none }
body.home label { margin-right: 0 }
.select-backing { border: 3px solid #cecece; display: inline-block; border-radius: 5px; margin-bottom: 10px; max-width: 100%; overflow: hidden }
select { font-family: 'nexa'; font-size: 1.2em; height: 2.3em; padding-left: 15px; margin: 0 }
.test-row { border-bottom: thin lightgray solid; margin-bottom: 20px; padding-bottom: 10px }
#testForm .row.test-row:nth-child(3n + 4) { border: 0 }
.row.test-row.genes.one .column:first-of-type, .row.test-row.num_biopsy.two .column:first-of-type { margin-bottom: 30px }
fieldset label { display: block }
.results .table { padding: 0 20px }
.results .table .columns { padding: 20px 15px; border-bottom: thin solid lightgray }
.results .table .row:last-child .columns{ border-bottom: 0 }
.results .table .columns:first-child span, .results .table .row:first-child span { font-weight: bold }
.my-risk { background-color: #fff1e9 }
#low-risk-area p, #high-risk-area p { text-align: center; color: #e06a57; font-size: 1.5em; margin-top: 60px }

button.ghost-btn { padding: 10px 20px; font-size: 1.2em; margin-bottom: 20px }
.block span { display: block }
.column.option { position: relative; padding-bottom: 70px }
.column.option h3 { line-height: 1; margin-top: 25px }
.column.option .ghost-btn { position: absolute; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto; width: 155px; border: thin solid #DDD }
.column.option .ghost-btn:hover { border: thin solid #e06a57}
.column.option { margin-bottom: 30px }
.reveal img { margin-bottom: 30px }

div.vs { border: 1px solid #399e9a; padding: 50px 30px 30px; margin-top: 50px }
div.vs h3 { color: #399e9a; font-size: 1.7em; line-height: 1.2; margin-bottom: 60px }
div.vs .column h4 { margin-top: 30px; font-size: 1.3em }
div.vs .column h4 strong { font-weight: 800; text-decoration: underline }
.diestat { color: #305071; display: block; background: url(/assets/img/illo-faded-1.jpg) no-repeat center center; background-size: contain; padding: 80px 40px; font-weight: 600; margin-bottom: 40px }
div.vs .column:last-of-type .diestat { background: url(/assets/img/illo-faded-2.jpg) no-repeat center center; background-size: contain }
.diestat span.big { font-size: 5rem; line-height: 1; display: block }
.diestat span.sub { font-size: 1em; display: inline-block; line-height: 1.2 }

.what-this-means { margin-top: 30px; background-color: #c5e5dd30; border-radius: 20px; padding: 30px }
.what-this-means h2 { margin-bottom: 5px; margin-top: 15px }
.row.frequency .column { padding: 0 }
.row.frequency ul { margin: 0 }
.row.frequency h2 { margin-left: 0 }
.row.frequency .column:first-of-type ul { margin-bottom: 50px}
@media print, screen and (min-width: 40.0625em) {
  .row.frequency ul { margin: inherit }
  .row.frequency .column:first-of-type ul { margin-bottom: 20px}
  .row.frequency .column:first-of-type { padding-right: 2rem; padding-left: .9375rem }
  .row.frequency .column:last-of-type { padding-left: 2rem; padding-right: .9375rem }
}
/* SUMMARY PAGE */
.summary h2 { color: #1D8174 }
.asterisk { font-size: .6em; display: inline-block; position: absolute }
.summary h3 { font-size: 1.1em; border-bottom: 1px solid #27b5a240; margin-bottom: 15px; padding-bottom: 6px; line-height: 1.1 }
.my-value h4 { font-size: 80px; line-height: 70px; color: #27b5a2; font-weight: 300 }
.avg-risk { padding: 30px }
.avg-risk h4 { font-size: 36px; line-height: 30px; font-weight: 300 }
button.download { text-transform: uppercase; background: #399e9a; color: #FFF; padding: 12px 20px; font-size: 1em; font-weight: 600; display: inline-flex; align-items: center }
button.download i { font-size: 1.8em; margin-left: 10px }
.content .summary a { text-decoration: none }
button.download:hover { background: #fa7f6b }
.preferences p { font-size: .8em }
.bar { height: 20px; width: 140px; display: block; text-indent: -9999px; border: 1px solid #399e9a; border-radius: 12px }
.row.preferences .column#low-risk-area { padding-left: 2rem !important; padding-right: 2rem !important }
.sources p { font-size: .8em; color: #6B8095 }
.column.pad { padding-left: 2rem; padding-right: 2rem }


@media print, screen and (max-width: 40.0625em) {
  .row.preferences .column { padding-left: 1rem !important; padding-right: 1rem !important }
  .row.preferences .column#low-risk-area { padding-left: 2rem !important; padding-right: 2rem !important }
  .row.preferences .column.pad { padding-left: 2rem !important; padding-right: 2rem !important }
  .content .row.preferences ul, .content .row.preferences p { margin-left: 0; margin-right: 0 }
  .bar { width: 250px; margin-left: 10px }
  div.vs h3 { font-size: 1.2em }
  .column.option h3 { margin-left: 15px }
}


@media print, screen and (min-width: 40.0625em) {
  .logo.large { font-size: 2.6em }
  div.vs .column:last-of-type { border-left: 1px solid #1D817440 }
  img.round-tl { border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0 }
  .block { height: 100%; padding: 35px 20px 20px }
  button.download { margin-right: 20px }
}

@media print, screen and (min-width: 64.0625em) {
  fieldset label { display: inline-block }
  .column, .columns, .column.content { padding-left: .9375rem; padding-right: .9375rem }
  .mobile-only { display: block }
  .special-btn i { font-size: 1.5em }
  .header h1 { font-size: 2.5em }
  .header h1 i { margin-right: 20px }
  .row.header, .row.white-content { max-width: 90% }
  .content ul, .content p { margin-left: 0; margin-right: 0 }
  h2, h4, h3 { margin-left: 0 }
  .back-btn { position: absolute; background-color: transparent; color: #e06a57; left: 55px; bottom: 85px }
  img.round-tl { margin-top: 0 }
}