@import url("https://use.typekit.net/kjs0srr.css");


/* =GLOBAL */

body {margin: 0; font-family: "nocturne-serif", serif; line-height: 1.6; background-color: #fcfaf4; color: #310946}

.rounded{border-radius: 20px}

.oval{border-radius: 50%}

.relative{position: relative}

.oh{overflow: hidden}

.sticky{position: sticky; top: 40px}

.pointer-none{pointer-events: none}

.scroll{min-height: 100vh; overflow-x: hidden; overflow-y: visible}

/* =COLOURS */

.white-bg{background-color: #ffffff}

.pink-bg{background-color: #ab36a5}

.purple-bg{background-color: #310946}

.green-bg{background-color: #beffe8}


.pink{color: #ab36a5}

.purple{color: #310946}


.shadow{-webkit-box-shadow: 0px 0px 100px -36px rgba(66, 68, 90, 1); -moz-box-shadow: 0px 0px 100px -36px rgba(66, 68, 90, 1); box-shadow: 0px 0px 100px -36px rgba(66, 68, 90, 1);}

.hide{display: none}

body.t-awaiting.o-surveil .hide.surveil, body.t-awaiting.o-brachy .hide.brachy, body.t-awaiting.o-watchful .hide.watchful, body.t-awaiting.o-prostate .hide.prostatectomy, body.t-awaiting.o-focal .hide.focal, body.t-awaiting.o-radio .hide.radiotherapy, body.t-awaiting.o-hormone .hide.hormone, body.t-awaiting.o-chemo .hide.chemotherapy, body.t-awaiting.o-radium .hide.radium, body.t-awaiting.o-oliparib .hide.olaparib, body.t-receiving.o-prostate .hide.prostate, body.t-receiving.o-brachy .hide.brachy-r, body.t-receiving.o-focal .hide.focal-r, body.t-receiving.o-radio .hide.radio-r, body.t-receiving.o-hormone .hide.hormone-r, body.t-receiving.o-radium .hide.radium-r, body.t-receiving.o-oliparib .hide.olaparib-r, body.t-receiving.o-chemo .hide.chemo-r,

body.t-receiving.o-prostate .underline.hide.prostatectomy, body.t-receiving.o-brachy .underline.hide.brachy, body.t-receiving.o-hormone .underline.hide.hormone, body.t-receiving.o-focal .underline.hide.focal, body.t-receiving.o-radio .underline.hide.radiotherapy, body.t-receiving.o-chemo .underline.hide.chemotherapy, body.t-receiving.o-radium .underline.hide.radium, body.t-receiving.o-oliparib .underline.hide.olaparib{display: inherit}

.hide-li, .hide-inline, body.t-receiving button#o-surveil, body.t-receiving button#o-watchful{display: none}

body.working-yes .hide-li.employed, body.health-yes .hide-li.health, body.children-yes .hide-li.children, body.lgbtq-yes .hide-li.lgbtq{display: list-item}

body.working-yes .rounded.employed{display: block}

body.lgbtq-yes .hide-inline.lgbtq{display: inline-block}

body.t-awaiting button#c-resistant{display: none!important}

/* =ANIMATE */

a.button, a.button .ml10.animate, a, .button-group button, button, .quiz-body .fixed-elements .step, .button-group button h3{-webkit-transition: all 0.6s!important; transition: all 0.6s!important;}

/* =FONTS */

.nocturne{font-family: "nocturne-serif", serif;}

.regular{font-weight: 400}

.bold{font-weight: 700}

.tac{text-align: center}

.tal{text-align: left}

.ilb{display: inline-block}

h1{font-size: 70px; line-height: 74px; color: #310946}

h2{font-size: 55px; line-height: 65px; color: #310946}

h3{font-size: 28px; line-height: 34px; color: #310946}


/* =MARGINS / PADDING */

.pd20{padding: 20px}

.pt20{padding-top:20px}

.pd40{padding: 40px}

.pd60{padding: 60px}

.pt100{padding-top:100px}

.pb100{padding-bottom:100px}

.pd100{padding: 100px}

.pb180{padding-bottom:180px}


.mt0{margin-top:0px}

.mt20{margin-top:20px}

.mt40{margin-top:40px}

.mb0{margin-bottom:0px}

.mb20{margin-bottom:20px}

.mb40{margin-bottom:40px}

.ml10{margin-left:10px}


.max-inner{max-width: 1000px; margin: 0px auto}


/* =BUTTONS */

a.button, button.button{text-decoration: none; display: inline-block; padding: 10px 30px; border-radius: 50px; background-color: #ab36a5; color: #ffffff; font-size: 20px; font-weight: 700}

button.button{border: none!important; box-shadow: none!important}

a.button:hover, button.button:hover{background-color: #310946; }

a.button:hover .ml10.animate{margin-left:30px}

a.round-button{width: 50px; height: 50px; border-radius: 100px; background-color: #beffe8; display: inline-block; line-height: 50px; text-align: center; font-size: 27px; color: #ab36a5}

a.round-button:hover{background-color: #ab36a5; color: #ffffff}


/* =FLEX */

.flex{display: flex; flex-wrap: wrap}

.flex1{flex: 1}

.full{width: 100%}

.gap40{gap: 40px}

.gap60{gap: 60px}

.align-bottom{align-items: flex-end}


.table{display: table; width: 100%; height: 100%}

.cell{display: table-cell}

.vam{vertical-align: middle}


.z10{z-index: 10}

.z20{z-index: 20}

.z30{z-index: 30}

.z40{z-index: 40}

.z50{z-index: 50}


/* =IMAGES / BACKGROUNDS */

.lh0{line-height: 0px}


/* =FOOTER BLOCK */

.footer-cta p{font-style: italic; font-weight: 400!important}

.footer-left{width: 24%; max-width: 260px; border-right: 1px solid #310946; padding-right:40px}


/* =HEADER BLOCK */

.header-image{margin-top:-280px; width: 40%; max-width: 700px; min-width: 300px; margin-bottom:40px}

.header-image img{width: 100%}


.header-text h1{margin-left:auto; margin-right:auto}

.header-text h1 span.h-first{position: absolute; top: -52px; left: 50px}

.header-text h1 span.h-last{position: absolute; right: 38px; bottom: -74px}

.header-text h1 span.underline:after{position: absolute; bottom: 0px; left: 0px; right: 0px; border-bottom: 10px solid #ab36a5; content: ''}

.header-button-holder{position: absolute; top: 40px; right: 40px}


/* =SECTION 2 BLOCK */

.section-2{background-repeat: no-repeat; background-position: 90vw center; margin-left:-20px; margin-right:-20px; background-size: 70vh; padding-left:80px; padding-right:80px}

.section-2-left{width: 40%}

.section-2-left h2 span.underline:after, h2.question-text span.underline:after, h3 span.underline:after{position: absolute; bottom: 0px; left: 0px; right: 0px; border-bottom: 6px solid #ab36a5; content: ''}

h3 span.underline:after{border-bottom: 4px solid #ab36a5}


/* =SECTION 3 BLOCK */

.section-3 .max-inner{padding-top:40px; padding-bottom:40px}

.section-3-inner .green-dots-circle{position: absolute; top: 50%; width: 300px; height: 300px; margin-top:-150px; right: -120px; background-size: cover; background-position: center center; background-image: url('../images/circle-green-dots.svg')}

.section-3-inner .purple-dots-circle{position: absolute; top: 100%; width: 300px; height: 300px; margin-top:-150px; left: -130px; background-size: cover; background-position: center center; background-image: url('../images/circle-purple-dots.svg')}

.section-3-inner .pink-circle{position: absolute; width: 1000px; height: 1000px; border: 50px solid #ab36a5; top: -800px; left: -700px; border-radius: 1000px;}


/* =SECTION 4 BLOCK */

.section-4-left, .section-4-right{width: calc(50% - 20px)}

.man-bg{background-image: url('../images/personbg.svg'); background-size: 94%; background-position: center center; background-repeat: no-repeat}


/* =SECTION 5 BLOCK */

.section-5{margin-left:-20px; margin-right:-20px; margin-bottom: -20px; padding-bottom:0px; background-image: url('../images/circle-green-dots.svg'); background-size: 20%; background-repeat: no-repeat; background-position: 110% 110%}


.section-5 .max-inner{max-width: 800px}

.section-5-2{padding-bottom:280px}

.section-5 .max-inner:after{content: ''; position: absolute; bottom: -80px; right: 40px; width: 310px; height: 190px; background-image: url('../images/bubble-point.svg'); background-size: contain; background-position: top left; background-repeat: no-repeat; pointer-events: none}

.section-5 .purple-dots-circle{position: absolute; top: -120px; width: 30%; aspect-ratio: 1 / 1; margin-top:0px; right: 0px; background-size: cover; background-position: center center; background-image: url('../images/circle-purple-dots.svg')}

.section-5 .speech-marks{width: 200px; height: 200px; position: absolute; top: 80%; left: 8vw; background-size: contain; background-position: center center; background-repeat: no-repeat; background-image: url('../images/speech-marks.svg')}

.section-5 .pink-circle{position: absolute; width: 800px; height: 800px; border: 50px solid #ab36a5; top: 80px; right: -760px; border-radius: 1000px;}

.speech-upside-down{position: absolute; bottom: 20px; width: 300px; height: 200px; left: 5%; background-size: contain; background-position: top center; background-image: url('../images/speech-upside-down.svg'); background-repeat: no-repeat}

.speech-bubble{position: absolute; top: 20px; width: 500px; height: 300px; left: -10%; background-size: contain; background-position: top center; background-image: url('../images/speech-bubble.svg'); background-repeat: no-repeat}



/* =QUIZ */

.question-wrapper{position: relative}

.results-header-text h2{font-size: 60px; line-height: 64px}

h2.question-text{font-size: 40px; line-height: 44px; padding-left:20px; padding-right:20px; z-index: 100}

.results-header-text h3{padding-right:40px}

.results li{font-size: 18px}

.button-group{display: flex; flex-wrap: wrap; gap: 20px; max-width: 980px; margin: 0px auto; justify-content: center; padding-left:40px; padding-right:40px; width: 90%!important; z-index: 100}

.button-group-5{max-width: 1280px}

.button-group-2 button{width: calc(50% - 10px)}

.button-group-3 button{width: calc(33.333% - 14px)}

.button-group-5 button{width: calc(20% - 16px)}

.button-group button h3{margin: 0px; font-weight: 400; font-size: 20px; line-height: 24px}

.button-group button{border: none; box-shadow: none; padding: 20px 20px; background-color: #beffe8; border-radius: 20px}

.button-group button:hover, .button-group button.checked{background-color: #310946; color: #ffffff; -webkit-box-shadow: 0px 0px 100px -36px rgba(66, 68, 90, 1); -moz-box-shadow: 0px 0px 100px -36px rgba(66, 68, 90, 1); box-shadow: 0px 0px 100px -36px rgba(66, 68, 90, 1);}

.button-group button:hover h3, .button-group button.checked h3{color: #ffffff}


.progress-bar .step{border: 2px solid #310946; background-color: #fcfaf5; color: #310946}


#section11{width: 100vw; min-height: 100vh}

#section11 .scroll{z-index: 99999; background-color: #fcfaf4}

.results{max-width: 1200px; margin: 0px auto}

.results h4{font-weight: 400; font-size: 22px; line-height: 26px}

button.go-back{top: 30px; left: 30px; box-shadow: none; background-color: transparent; border: none; font-size: 28px; font-weight: 700; position: fixed; z-index: 9999999}

.fixed-elements{padding-left:120px; padding-right:120px; width: calc(100% - 240px)}


.quiz-body .purple-dots-circle{position: absolute; aspect-ratio: 1 / 1; background-size: cover; background-position: center center; background-image: url('../images/circle-purple-dots.svg')}

.quiz-body .green-dots-circle{position: absolute; aspect-ratio: 1 / 1; background-size: cover; background-position: center center; background-image: url('../images/circle-green-dots.svg');}

.quiz-body .pink-circle{position: absolute; width: 800px; height: 800px; border: 50px solid #ab36a5; top: 80px; right: -760px; border-radius: 1000px;}


.question-wrapper:not(.answers-wrapper){overflow: hidden}


#section1 .purple-dots-circle{width: 30%; top: 40%; left: -20%}

#section1 .green-dots-circle{width: 20%; top: 80%; right: 10%}


#section2 .purple-dots-circle, #section10 .purple-dots-circle{width: 30%; top: 20%; left: -25%}

#section2 .green-dots-circle, #section10 .green-dots-circle{width: 40%; top: 90%; right: 30%}

#section2 .pink-circle, #section10 .pink-circle{top: 50%}


#section3 .purple-dots-circle{width: 25%; top: 20%; left: 90%}

#section3 .green-dots-circle{width: 30%; top: 80%; right: 80%}

#section3 .pink-circle{top: 80%; right: -20%}


#section4 .purple-dots-circle, #section8 .purple-dots-circle{width: 30%; top: 70%; right: -10%}

#section4 .green-dots-circle, #section8 .green-dots-circle{width: 20%; top: 10%; right: 90%}

#section4 .pink-circle, #section8 .pink-circle{top: 80%; left: -30%}


#section5 .purple-dots-circle{width: 30%; top: 20%; left: -25%}

#section5 .green-dots-circle{width: 40%; top: 90%; right: 30%}

#section5 .pink-circle{top: 50%}


#section6 .purple-dots-circle{width: 30%; top: 40%; left: -20%}

#section6 .green-dots-circle{width: 20%; top: 80%; right: 10%}


#section7 .purple-dots-circle{width: 30%; top: 20%; right: -15%}

#section7 .green-dots-circle{width: 40%; top: 90%; right: 20%}

#section7 .pink-circle{top: 50%; left: -30%}


#section9 .purple-dots-circle{width: 30%; top: 60%; left: -15%}

#section9 .green-dots-circle{width: 25%; top: 20%; right: -20%}

#section9 .pink-circle{top: 80%; right: -20%}



.step.active, .step[data-step="1"] {
  background-color: #310946;
  color: #ccfde9;
}



.results ul{padding-left:30px}


.side-effects{margin-top:40px; border-top: 2px solid #310946}

.side-effects p{font-size: 18px}

.side-effects p a{color: #ab36a5}


h2.question-text{padding-top:80px}



@media screen and (max-height: 650px) {
	.fixed-elements{display: none!important}
}


/* =IPAD LANDSCAPE
------------------------------------------------------- */
@media only screen and (min-width:911px) and (max-width: 1190px){

/* =GLOBAL */

/* =FONTS */

/* =MARGINS / PADDING */

.pd60{padding-left:40px; padding-right:40px}

/* =FLEX */

/* =FOOTER BLOCK */

/* =HEADER BLOCK */

.header-image{width: 32%; margin-top:-140px}

.header-text{width: calc(68% - 40px); flex: none}

/* =SECTION 2 BLOCK */

.section-2{padding-left:60px; padding-right:60px; background-position: 80vw center}

/* =SECTION 3 BLOCK */

.section-3-inner .pink-circle{top: -900px}

/* =SECTION 4 BLOCK */

.section-4-left{width: calc(45% - 20px)}

.section-4-right{width: calc(55% - 20px)}

/* =SECTION 5 BLOCK */

.section-5{background-size: 25%}

.section-5 .purple-dots-circle{top: -80px}

.section-5 .max-inner{margin-left:40px; margin-right:40px}

.speech-upside-down{left: -6%}


}


/* IPAD PORTRAIT */
@media only screen and (min-width:641px) and (max-width: 910px)  {

/* =GLOBAL */

/* =FONTS */

h1{font-size: 50px; line-height: 54px}

/* =MARGINS / PADDING */

.pt100{padding-top:60px}

/* =FLEX */

.gap40{gap: 20px}

/* =FOOTER BLOCK */

/* =HEADER BLOCK */

.header-image{width: 32%; margin-top:-140px; min-width: 10px; margin-top:-40px}

.header-text{width: calc(68% - 20px); flex: none}

.header-text h1 span.h-first{top: -38px; left: 28px}

.header-text h1 span.h-last{bottom: -50px; right: 26px}

.header-text h1 span.underline:after{border-bottom-width: 6px}

/* =SECTION 2 BLOCK */

.section-2{background-position: 70vw center}

.section-2-left, .section-2-right{width: 100%}

/* =SECTION 3 BLOCK */

.section-3-inner .pink-circle{top: -900px}

/* =SECTION 4 BLOCK */

.section-4-left, .section-4-right{width: 100%; text-align: center}

.section-4-left .full, .section-4-right .table{max-width: 500px; margin-left:auto; margin-right:auto}

/* =SECTION 5 BLOCK */

.section-5{background-size: 34%}

.section-5 .purple-dots-circle{width: 36%; top: -130px}

.section-5 .pink-circle{top: 120px; right: -800px}

.speech-upside-down{left: -15%}



.progress-bar .progress-steps{transform: translateY(-17px)}

.progress-bar .step{width: 40px; height: 40px}

.button-group-5 button{width: calc(50% - 11px)}


.fixed-elements{padding-left:80px; padding-right:80px; width: calc(100% - 160px)}


.quiz-body .pink-circle{width: 700px; height: 700px}



#section1 .purple-dots-circle{width: 40%; top: 35%}

#section1 .green-dots-circle{width: 50%}

#section1 .pink-circle{right: -700px}


#section2 .purple-dots-circle, #section10 .purple-dots-circle{width: 50%; top: 60%}

#section2 .green-dots-circle, #section10 .green-dots-circle{width: 50%; top: -20%; right: 20%}

#section2 .pink-circle, #section10 .pink-circle{right: -660px}


#section3 .purple-dots-circle{width: 45%}

#section3 .green-dots-circle{width: 50%}

#section3 .pink-circle{top: 90%}


#section4 .purple-dots-circle, #section8 .purple-dots-circle{width: 40%; right: -20%}

#section4 .green-dots-circle, #section8 .green-dots-circle{width: 40%; right: 80%}

#section4 .pink-circle, #section8 .pink-circle{}


#section5 .purple-dots-circle{width: 40%; top: 60%}

#section5 .green-dots-circle{width: 50%; top: 70%; right: 10%}

#section5 .pink-circle{top: -40px; right: -640px}


#section6 .purple-dots-circle{width: 40%; top: 10%}

#section6 .green-dots-circle{width: 40%}


#section7 .purple-dots-circle{right: auto; left: -15%; width: 35%}

#section7 .green-dots-circle{width: 40%; top: 70%; right: -20%}

#section7 .pink-circle{top: 70%}


#section9 .purple-dots-circle{width: 50%; top: 40%}

#section9 .green-dots-circle{width: 35%; top: 10%}

#section9 .pink-circle{}



}


/* =IPHONE
------------------------------------------------------- */
@media only screen and (max-width: 640px) {
	
	
/* =FONTS */

h1{font-size: 34px; line-height: 38px}

h2{font-size: 28px; line-height: 34px}


.section-2-left h2, .section-4-right h2{font-size: 40px; line-height: 48px}


/* =MARGINS / PADDING */

.pd40{padding: 20px}

.pd60{padding: 20px}

.pd100{padding: 20px}


/* =FOOTER */

.footer-left{width: 100%!important; padding-right:0px; border-right: 0px; max-width: 100%; display: flex; gap: 20px; align-items: center}

.footer-left .full{width: calc(50% - 10px); margin-bottom:0px}



/* =HEADER BLOCK */

.header .gap40{gap: 0px}

.header-button-holder{left: 20px; right: 20px; top: 20px}

.header-button-holder a{width: calc(100% - 60px); text-align: center}

.header-image{margin-top:-80px}

.header-text{padding-bottom:40px}

.header-text h1 span.h-first{top: -32px; left: 28px}

.header-text h1 span.h-last{right: 18px; bottom: -36px}

.header-text h1 span.underline:after{border-bottom-width: 6px}


/* =SECTION 2 BLOCK */

.section-2{background-position: 60vw center}

.section-2-left{width: 100%}


/* =SECTION 3 BLOCK */

.section-3-inner .pink-circle{width: 600px; height: 600px; border-width: 40px; left: -390px; top: -600px}


/* =SECTION 4 BLOCK */

.section-4{padding-left:0px; padding-right:0px}

.section-4-left{width: 100%}

.section-4-right{width: 100%}

.section-4-right .flex{gap: 20px}

.section-4-right .flex a{width: calc(50% - 70px); text-align: center}


/* =SECTION 5 BLOCK */

.section-5{background-size: 50%}

.section-5-2{padding-bottom:200px}

.section-5 .max-inner{margin-left:20px; margin-right:20px; padding-bottom:70px}

.section-5 .max-inner h2{font-size: 28px; line-height: 32px; margin-top:60px}

.section-5 .max-inner h3{font-size: 20px; line-height: 24px}

.section-5 .max-inner:after{bottom: -20px; right: -90px; width: 210px; height: 90px;}

.section-5 .pink-circle{position: absolute; width: 600px; height: 600px; border: 40px solid #ab36a5; top: 330px; right: -590px; border-radius: 1000px;}

.section-5 .purple-dots-circle{top: 10px; width: 40%}

.section-5 .speech-marks{width: 100px; height: 100px; top: 85%}

.speech-upside-down{width: 200px; height: 200px; left: -15%; bottom: -40px}


.speech-bubble{position: absolute; top: 20px; width: 220px; height: 120px; left: -70px; background-size: contain; background-position: top center; background-image: url('../images/speech-bubble.svg'); background-repeat: no-repeat}



h2.question-text{font-size: 24px; line-height: 28px; padding-left:20px; padding-right:20px}

h2.question-text span.underline:after{border-width: 3px}


.button-group{padding-left:20px; padding-right:20px; width: calc(100vw - 40px); gap: 10px}

.button-group button{padding: 14px; flex: none!important; width: 100%!important; font-size: 14px}

.button-group-3 button{width: calc(50% - 5px)!important}

.fixed-elements{display: none!important}

button.go-back{top: 10px; left: 10px}

.answers-wrapper .header-text{padding-left:20px; padding-right:20px}

.answers-wrapper h2{margin-top:0px; font-size: 40px; line-height: 44px}

.answers-wrapper h3{padding-right:0px; font-size: 20px; line-height: 24px}

.answers-wrapper .pd60{padding-left: 0px; padding-right:0px}

.answers-wrapper ul{padding-left:20px}



.quiz-body .pink-circle{width: 600px; height: 600px}


#section1 .purple-dots-circle{width: 60%; top: 70%}

#section1 .green-dots-circle{width: 40%; top: -10%}

#section1 .pink-circle{top: 50%; right: -560px}


#section2 .purple-dots-circle, #section10 .purple-dots-circle{width: 40%; left: 85%}

#section2 .green-dots-circle, #section10 .green-dots-circle{width: 50%; right: 90%}

#section2 .pink-circle, #section10 .pink-circle{right: -500px}


#section3 .purple-dots-circle{width: 45%; top: -20%; left: 60%}

#section3 .green-dots-circle{width: 60%; top: 50%}

#section3 .pink-circle{}


#section4 .purple-dots-circle, #section8 .purple-dots-circle{width: 60%}

#section4 .green-dots-circle, #section8 .green-dots-circle{width: 60%; top: -10%; right: 70%}

#section4 .pink-circle, #section8 .pink-circle{}


#section5 .purple-dots-circle{width: 60%; top: -10%; left: 65%;}

#section5 .green-dots-circle{width: 70%}

#section5 .pink-circle{right: -200px; top: 70%}


#section6 .purple-dots-circle{width: 65%; top: 62%}

#section6 .green-dots-circle{width: 60%; right: -10%}

#section6 .pink-circle{top: -480px; right: 0px}


#section7 .purple-dots-circle{width: 60%; top: -10%}

#section7 .green-dots-circle{width: 60%; top: 80%; right: -30%;}

#section7 .pink-circle{top: 70%; left: -120%}


#section9 .purple-dots-circle{width: 60%; top: -20%; left: 35%;}

#section9 .green-dots-circle{width: 45%; top: 20%; right: 70%;}

#section9 .pink-circle{}


footer .pd60{padding-left:20px!important; padding-right:20px!important}

#section8 .button-group-5 button, #section9 .button-group-5 button{max-width: calc(50% - 5px)!important}

}



@media print {
		
	.question-wrapper, .answers-wrapper footer, .print-button, .fixed-elements{display: none!important}
	
	.hide-on-print-2{display: none!important}
	
	.answers-wrapper{display: block!important}
	
	.results,  .answers-wrapper .header{margin: 0px!important; max-width: 1068px!important; width: 100%!important}

	.answers-wrapper .header .header-image{display: none}
	
	.pd60{padding-left:0px; padding-right:0px; }
	
	.results .rounded{border: none; box-shadow: none!important; border-bottom: 1px solid #000000; border-radius: 0px!important; padding-left:0px!important; padding-right:0px!important}
	
	.results li, .side-effects p{font-size: 14px}
	
}