/* Period Positivity */
.period-positivity #main { padding: 0; background: #98e3ff; }
.period-positivity #main .inner { padding: 0; min-height: 0; background: inherit; }
.period-positivity #main .inner p { padding: 0 0 20px 0; margin: 0; font-size: 1.85em; line-height: 1.4; color: #000; }
.period-positivity #main .inner strong { font-family: FiraSans-Semibold, Arial, Helvetica, sans-serif; font-weight: 600; }
.period-positivity #main .inner a { font-family: FiraSans-Semibold, Arial, Helvetica, sans-serif; font-weight: 600; text-decoration: underline; color: #333; -webkit-transition: color .3s; -o-transition: color .3s; transition: color .3s; }
.period-positivity #main .inner a:hover { color: #fd8a02; }
.period-positivity #main .inner .upper {text-transform: uppercase; }

.period-positivity #main ul { padding: 0; margin: 0; }
.period-positivity #main ul li { position: relative; padding: 0 0 15px 15px; margin: 0; list-style: none; font-size: 1.85em; }
.period-positivity #main ul li:before { content: "\2022"; color: #000; font-size: 30px; line-height: 1; position: absolute; top: -2px; left: 0; }

.period-positivity #accordion-container { background: #770703; }
#main #accordion-container #accordion { background: #770703; }
.period-positivity #main .header .subnav { background: #770703; text-align: left; }
.period-positivity #main .header .subnav nav { background: #770703; }


#main .header .heading { padding: 10px 40px 10px 0; }
.period-positivity #main .header .heading h1 { text-align: left; }
.period-positivity #main .header { max-width: 1460px; margin: 0 auto; padding: 0 0 0 30px; min-height: 85px; }
.period-positivity #main .header1 { padding: 0 30px 50px 30px; }
.period-positivity #main .heading h1 { font-size: 4em; color: #770703; }
.period-positivity #main .header1 h3 { color: #770703; margin: 30px 0 15px 0; }
.period-positivity #main .header1 .header1-text { background: #98e3ff; }
.period-positivity #main .header1 .header1-image { max-width: 1730px; margin: 0 auto; }

#main .header .subnav nav ul li { text-align: left; }
#main .header .subnav nav ul li a:hover { color: #ffd453; }


.period-positivity #main .header1 p { padding: 0 560px 0 0; }
.period-positivity #main .header1 .inner p:last-child { padding: 0; }
.period-positivity #main .header1 .inner p:last-child span { display: block; }



.period-positivity #main .header2 { background: #fff4f8; position: relative; text-align: center; padding: 30px 30px 40px 30px; }
.period-positivity #main .header2 .inner { text-align: center; }
.period-positivity #main .header2 .break { z-index: 10; position: relative; }


.period-positivity #main .header2:before { position: absolute; bottom: 0; left: 0; width: 450px; height: 886px; display: inline-block; content: ''; background: url(/img/period-positivity/header2a.png) 0 0 no-repeat; background-size: 450px 886px; }

.period-positivity #main .header2:after { position: absolute; bottom: 0; right: 0; width: 575px; height: 1102px; display: inline-block; content: ''; background: url(/img/period-positivity/header2b.png) 0 0 no-repeat; background-size: 575px 1102px; }

 

.period-positivity #main .header2 h2 { color: #770703; font-size: 3.5em; }
.period-positivity #main .header2 h3 { background: #332c6c; color: #ffcabd; margin: 40px 0 0 0; padding: 20px 40px; border-radius: 15px; display: inline-block; }
.period-positivity #main .header2 h4 { max-width: 850px; line-height: 1.4; margin: 0 auto 20px auto; font-weight: 400; font-family: FiraSans-Book, Arial, Helvetica, sans-serif; color: #770703; }
.period-positivity #main .header2 p { background: #fdbe81; color: #380402; padding: 15px 20px; border-radius: 15px; display: inline-block; max-width: 1200px; }




.period-positivity #main .header3 { background: #b01015; padding: 60px; }
.period-positivity #main .header3 .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.period-positivity #main .header3 .header3-left { width: 50%; padding: 0 60px 0 0; }
.period-positivity #main .header3 .header3-right { width: 50%; }
.period-positivity #main .header3 h2 { color: #fff; font-size: 3.7em; line-height: 1.3; }
.period-positivity #main .header3 p { color: #fff }


.period-positivity #main .header4 { background: #fff4f8; padding: 50px 30px; }
.period-positivity #main .header4 .inner { display: -webkit-box; display: -ms-flexbox; display: flex; }
.period-positivity #main .header4 .header4-left { width: 50%; }
.period-positivity #main .header4 .header4-right { width: 50%; padding: 0 0 0 60px; }
.period-positivity #main .header4 h2 { font-size: 3.7em; line-height: 1.3; }



.period-positivity #main .header5 { padding: 50px 30px 0 30px; }
.period-positivity #main .header5 .inner { display: -webkit-box; display: -ms-flexbox; display: flex; }
.period-positivity #main .header5 .header5-left { width: 50%; padding: 0 60px 30px 0; }
.period-positivity #main .header5 .header5-right { width: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; }
.period-positivity #main .header5 h2 { font-size: 3.7em; line-height: 1.3; }


.period-positivity #main .header6 { background: #b01015; padding: 50px 30px; }
.period-positivity #main .header6 h2 { color: #fff; font-size: 3.7em; line-height: 1.3; text-align: center; margin: 0; }
.period-positivity #main .header6 h2 span { display: block; }
.period-positivity #main .header6 .diagram { margin: 20px auto; max-width: 1200px; }


.period-positivity #main .header7 { background: #fff4f8; padding: 50px 30px; }
.period-positivity #main .header7 .inner { text-align: center;  }
.period-positivity #main .header7 h2 { font-size: 3.7em; line-height: 1.3; margin: 0 0 10px 0; color: #b01015; }
.period-positivity #main .header7 p {  }
.period-positivity #main .header7 .links { border-top: 3px solid #b01015; border-bottom: 3px solid #b01015; margin: 10px 0; padding: 60px 0 40px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.period-positivity #main .header7 .links .link { text-align: left; width: 48%; }
.period-positivity #main .header7 .links .link.gio { position: relative; padding: 0 0 0 140px; }
.period-positivity #main .header7 .links .link.gio:before { position: absolute; top: -20px; left: 0; width: 107px; height: 107px; display: inline-block; content: ''; background: url(/img/period-positivity/gio-logo.png) 0 0 no-repeat; background-size: 107px 107px; }



.period-positivity #main .header7 .links .link.nhs {  }

.period-positivity #main .header7 .bbc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 40px 70px 0 70px; }
.period-positivity #main .header7 .bbc-left { width: 254px; border: 2px solid #333; }
.period-positivity #main .header7 .bbc-right { width: calc(100% - 254px); text-align: left; padding: 0 0 0 50px; }



.period-positivity #main .header7  .inner a { margin: 0; padding: 0; }




@media screen and (max-width: 1800px) {
.period-positivity #main .header2:before { width: 300px; height: 590px; background-size: 300px auto; }
.period-positivity #main .header2:after { width: 350px; height: 660px; background-size: 350px auto; }

}

@media screen and (max-width: 1600px) {
.period-positivity #main .header2:before,
.period-positivity #main .header2:after { display: none; }

}



@media screen and (max-width: 1200px) {
.period-positivity #main .inner p, .period-positivity #main ul li { font-size: 1.8em; }
}



@media screen and (max-width: 1100px) {
.period-positivity #main .header3 { padding: 40px; }
.period-positivity #main .header3 .inner { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.period-positivity #main .header3 .header3-left { width: 100%; padding: 0 0 20px 0; }
.period-positivity #main .header3 .header3-right { width: 100%; max-width: 450px; }

.period-positivity #main .header4 { padding: 40px; }
.period-positivity #main .header4 .inner { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.period-positivity #main .header4 .header4-left { width: 100%; max-width: 500px; order: 2; }
.period-positivity #main .header4 .header4-right { width: 100%; padding: 0 0 20px 0; order: 1; }

.period-positivity #main .header5 { padding: 40px 40px 0 40px; }
.period-positivity #main .header5 .inner { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.period-positivity #main .header5 .header5-left { width: 100%; padding: 0 0 20px 0; }
.period-positivity #main .header5 .header5-right { width: 100%; max-width: 500px; }

.period-positivity #main .header6 { padding: 40px 30px; }

.period-positivity #main .header7 { padding: 30px 30px 40px 30px; }

.period-positivity #main .header7 .links .link.gio { padding: 0 0 0 100px; }
.period-positivity #main .header7 .links .link.gio:before { width: 80px; height: 80px; background-size: 80px 80px; }

.period-positivity #main .header7 .links .link.nhs img { max-width: 100px; }
.period-positivity #main .header7 .links .link.nhs p { padding: 0 0 10px 0; }

.period-positivity #main .header7 .bbc { padding: 40px 0 0 0; }
.period-positivity #main .header7 .bbc-right { padding: 0 0 0 40px; }
}


@media screen and (max-width: 1000px) {
.period-positivity #main .header1 p { padding: 0 370px 0 0; } 
.period-positivity #main .header1 .inner p:last-child { padding: 0; }
.period-positivity #main .header1 .inner p:last-child span { display: inline; }
.period-positivity #main .header1 .header1-image { max-width: none; margin: 20px 0 0 0; }
.period-positivity #main .heading h1 { font-size: 3.5em; }
.period-positivity #main .header2 h2 { font-size: 3em; }
.period-positivity #main .header2 h4 { margin: 0 auto; }


.period-positivity #main .header3 h2,
.period-positivity #main .header4 h2,
.period-positivity #main .header5 h2,
.period-positivity #main .header6 h2,
.period-positivity #main .header7 h2 { font-size: 3.2em; }
}


@media screen and (max-width: 900px) {
.period-positivity #main .header7 .links { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.period-positivity #main .header7 .links .link.gio { width: 100%; }
.period-positivity #main .header7 .links .link.nhs { width: 100%; margin: 30px 0 0 0; }

}



@media screen and (max-width: 768px) {
.period-positivity #main .inner p, .period-positivity #main ul li { font-size: 1.7em; }
#main .header .heading { padding: 10px 40px 20px 0; }
.period-positivity #main .header1 { padding: 30px 24px; }
.period-positivity #main .heading h1 { font-size: 3em; }
.period-positivity #main .header1 p { padding: 0; }
.period-positivity #main .header { padding: 0 0 0 24px; }
.period-positivity #main .header2 { padding: 30px 24px 40px 24px; }
.period-positivity #main .header3 { padding: 30px 24px; }
.period-positivity #main .header4 { padding: 30px 24px; }
.period-positivity #main .header5 { padding: 30px 24px 0 24px; }
.period-positivity #main .header6 h2 span { display: inline; }
.period-positivity #main .header6 { padding: 30px 24px; }
.period-positivity #main .header7 { padding: 30px 24px; }
.period-positivity #main .header7 .bbc-left { width: 200px; }
.period-positivity #main .header7 .bbc-right { width: calc(100% - 200px); padding: 0 0 0 30px; }


}



@media screen and (max-width: 600px) {
#main .header .heading { padding: 20px 24px; }
.period-positivity #main .header { max-width: 1460px; margin: 0 auto; padding: 0; }
#main .header .subnav { padding: 5px 0 15px 20px; }
.period-positivity #main .heading h1 { font-size: 3em; }
.period-positivity #main .header2 h2 { font-size: 2.7em; }


.period-positivity #main .header3 h2,
.period-positivity #main .header4 h2,
.period-positivity #main .header6 h2 { font-size: 2.7em; }

.period-positivity #main .header7 .bbc { padding: 30px 0 0 0; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.period-positivity #main .header7 .bbc-left { width: 100%; max-width: 200px; }
.period-positivity #main .header7 .bbc-right { width: 100%; padding: 30px 0 0 0; }


}


@media screen and (max-width: 500px) {
.period-positivity #main .header7 .links { padding: 40px 0; }
.period-positivity #main .header7 .links .link.gio { padding: 100px 0 0 0; }
.period-positivity #main .header7 .links .link.gio:before { top: 0; }
.period-positivity #main .header7 .links .link.nhs { margin: 40px 0 0 0; }
}





@media screen and (min-width: 769px) {
.period-positivity #main .header { position: relative; top: -30px; }
}