/* ----------------------------------------------------------------
FONTS 
-----------------------------------------------------------------*/

/*

light
book
roman
medium
heavy
black

*/

@font-face {
  font-family: 'avenir';
  src: url('/assets/fonts/avenir-light.woff') format('woff'), /* Pretty Modern Browsers */
       url('/assets/fonts/avenir-light.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 300;
  font-style: normal;
}




@font-face {
  font-family: 'avenir';
  src: url('/assets/fonts/avenir-book.woff') format('woff'), /* Pretty Modern Browsers */
       url('/assets/fonts/avenir-book.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 400;
  font-style: normal;
}



@font-face {
  font-family: 'avenir';
  src: url('/assets/fonts/avenir-roman.woff') format('woff'), /* Pretty Modern Browsers */
       url('/assets/fonts/avenir-roman.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 500;
  font-style: normal;
}



@font-face {
  font-family: 'avenir';
  src: url('/assets/fonts/avenir-medium.woff2') format('woff2'), /* Super Modern Browsers */
       url('/assets/fonts/avenir-medium.woff') format('woff'), /* Pretty Modern Browsers */
       url('/assets/fonts/avenir-medium.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 600;
  font-style: normal;
}



@font-face {
  font-family: 'avenir';
  src: url('/assets/fonts/avenir-heavy.woff') format('woff'), /* Pretty Modern Browsers */
       url('/assets/fonts/avenir-heavy.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 700;
  font-style: normal;
}



@font-face {
  font-family: 'avenir';
  src: url('/assets/fonts/avenir-black.woff2') format('woff2'), /* Super Modern Browsers */
       url('/assets/fonts/avenir-black.woff') format('woff'), /* Pretty Modern Browsers */
       url('/assets/fonts/avenir-black.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 800;
  font-style: normal;
}







/* ----------------------------------------------------------------
SKELETON OVERRIDES
-----------------------------------------------------------------*/

.container.teal{
  background-color: #4bffa6;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: block;
}

.container.teal .row{
  width:90%;
  max-width: 1400px;
  display: block;
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 40px;
  color: #6c01b0;
}

.container.green{
  background-color: #a6eadb;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: block;
}

.container.green .row{
  width:90%;
  max-width: 1400px;
  display: block;
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 40px;
  color: #3a524c;
}

.container.blue{
  background-color: #0024ed;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: block;
}

.container.blue .row{
  width:90%;
  max-width: 1400px;
  display: block;
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 40px;
  color: #ffdc00;
}


.container.grey{
  background-color: #ededed;
  color: #6c01b0;
}

.container.purple{
  background-color: #6c01b0;
  color: #FFF;
}



.container.introduction{
   width: 100%;
  max-width: none;
  margin: 0 auto;
  display: block;
  position: relative;
}

.container.introduction .row{
  width:90%;
  max-width: 1400px;
  display: block;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
}

.container.why-important{
   width: 100%;
  max-width: none;
  margin: 0 auto;
  display: block;
  position: relative;
}

.container.why-important .row{
  width:90%;
  max-width: 1400px;
  display: block;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
}


.container.pink{
  background-color: #f54b9a;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: block;
}

.container.pink .row{
  width:90%;
  max-width: 1400px;
  display: block;
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 40px;
  color: #fff;
}


h2{
  font-size: 4rem;
  line-height: 1;
  font-weight: 700;
  margin-bottom: 20px;
}

.pt-0{
  padding-top: 0 !important;
}


.pb-0{
  padding-bottom: 0 !important;
}

.no-padding{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.full-height{
  height: calc(100vh - 155px);
}

/* ----------------------------------------------------------------
HEADER
-----------------------------------------------------------------*/

.nav
{
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  flex-flow: row nowrap;
}

.nav ul.navigation-items{
  display: flex;
  justify-content: flex-start;
  margin-right: 40px;
  margin-bottom: 0;
}

.nav ul.soc{
  display: flex;
  justify-content: flex-end;
  height: 22px;
}


.nav ul.navigation-items li{
  list-style: none;
  margin-left: 25px;
  font-weight: 700;
}

.nav ul.navigation-items li a{
  text-decoration: none;
}

.nav ul.navigation-items li a.current,
.nav ul.navigation-items li a:hover{
  color: #4bffa6;
  text-decoration: underline;
}


/* ----------------------------------------------------------------
FOOTER
-----------------------------------------------------------------*/


.container.footer{
  background-color: #6c04b0;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: block;
}

.container.footer .row.footer{
  width:90%;
  max-width: 1400px;
  display: block;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 40px;
}




.report-credit{
  display: flex;
  justify-content: space-between;
}

.report-credit .title p{
  margin-bottom: 0;
  color: #4bffa6;
  line-height: 1.4;
  font-weight: 400;
}

.report-credit .title.pdf-page p{
  line-height: 1;
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 30px;
}

.report-credit .title.pdf-page p span{
  font-weight: 400;
  font-size: 1.4rem;
}

a.arrow-link{
  font-weight: 700;
  padding-bottom: 22px;
  text-decoration: none;
  font-size: 1.7rem;
  text-decoration: underline;
}

a.arrow-link.teal{
  color: #4bffa6;
  background: transparent url('/assets/images/arrow-teal.svg') no-repeat right bottom;
  background-size: 50px;
  float: right;
  text-align: right;
}


a.arrow-link.purple{
  color: #6c01b0;
  background: transparent url('/assets/images/arrow-purple.svg') no-repeat right bottom;
  background-size: 50px;
  float: right;
  text-align: right;
}

a.arrow-link.orange{
  color: #f54b9a;
  background: transparent url('/assets/images/arrow-orange.svg') no-repeat right bottom;
  background-size: 50px;
  float: right;
  text-align: right;
}




.report-link{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.report-link img{
  display: block;
  width: 120px;
}

.report-link.on-page img{
  display: none;
}

.report-link p{
  margin: 30px 0 0 0;
  color: #4bffa6;
  font-weight: 400;
  font-size: 3rem;
}

.report-link p strong{
  font-weight: 700;
}

.report-link a{
  color: #FFF;
  font-size: 6rem;
  font-weight: 700;
  text-decoration: underline;
  padding-bottom: 30px;
  background: transparent url('/assets/images/arrow-white.svg') no-repeat center bottom;
  background-size: 70px;
  display: block;
  margin-bottom: 30px;
}

.report-copyright{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copyright-notice{
  flex: 1;
}

.copyright-notice p {
    font-weight: 400;
}

.report-copyright p.charity{
  color: #c882fd;
  font-size: 1.2rem;
}

.report-copyright p.motif{
    margin-bottom: 0;
    margin-top: 20px;
    color: #c882fd;
    font-size: 1rem;
    font-weight: 400;
    width: 100%;
    text-align: right;
}

.report-copyright p.motif a{
  color: inherit;
}

.report-copyright .logos{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1;
}

.report-copyright .logos img.logo.jigsaw {
    height: 30px;
}

.report-copyright .logos img.logo.ucd {
    height: 90px;
    margin-left: 40px;
    margin-right: 40px;
}

.report-copyright .logos img.logo.esb {
    height: 140px;
}

/* ----------------------------------------------------------------
MOBILE NAV + OVERLAY
-----------------------------------------------------------------*/

#nav-icon {
  display: none;
  z-index: 1000;
  width: 26px;
  height: 19px;
  margin: 0;
  float: right;
  top: 20px;
  right: 20px;
  position: absolute;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

/*
#nav-icon::before {
    content: "menu";
    color: #FFF;
    position: absolute;
    right: 35px;
    top: -4px;
    text-transform: capitalize;
    font-weight: 500;
}
*/
#nav-icon.open::before{
    color:#FFF;
}


#nav-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #FFF;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

body.about #nav-icon span{
  background: #6c01b0;
}

#nav-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(2) {
  top: 8px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(3) {
  top: 16px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon.open
{
  position: fixed;
  z-index: 9999;
}

#nav-icon.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -2px;
  left: 0px;
  background: #FFFFFF;
}

#nav-icon.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 16px;
  left: 0px;
  background: #FFFFFF;
}

.fullscreen-nav-wrap
{
  top: 0;
  width: 100%;
  background-color: rgba(53, 53, 53, 0.8);
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  opacity:0;
  visibility: hidden;
  transition: 0.25s;
}

.fullscreen-nav-wrap.open {
  opacity: 1;
  visibility: visible;
  z-index: 1000;
}


.fullscreen-nav {
  display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 75px 40px 65px 40px;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    background: #6c01b0;
    position: fixed;
    right: 0px;
    top: 0px;
    text-align: center;
    z-index: 40;
}





ul.mobile-menu
{
  width: 100%;
  margin: 0 auto;
  list-style: none;
  text-align: left;
}

ul.mobile-menu li a {
  font-size: 4rem;
  display: block;
  line-height: 1;
  margin-bottom: 30px;
  font-weight: 700;
  color: #FFF;
  text-decoration: none;
  text-transform: none;
  -o-transition:.25s;
  -ms-transition:.25s;
  -moz-transition:.25s;
  -webkit-transition:.25s;
  transition:.25s;
}

ul.mobile-menu li a.current,
ul.mobile-menu li a:hover
{
  color:#4bffa6;
}

ul.contact-us
{
  text-align: left;
  margin-bottom: 0;
}

ul.contact-us li
{
  list-style: none;
  color: #FFF;
  margin-bottom: 0;
  line-height: 1.6;
  font-size: 1.6rem;
}

ul.contact-us li a
{
  color: #FFF;
  text-decoration: underline;
  font-weight:600;
}

ul.contact-us li a:hover
{
  color: #FFF;
  text-decoration: underline;
}

ul.contact-us li.social
{
  margin-top: 10px;
}

ul.contact-us li.social a
{
  color: #999;
}

ul.contact-us li.social a:hover
{
  color: #FFF;
}

.soc.footer{
    text-align: left;
}

/* ----------------------------------------------------------------
HOMEPAGE
-----------------------------------------------------------------*/


.container.introduction img.mws-logo {
  position: absolute;
  bottom: 5px;
  left: -5px;
  width: 315px;
}

.introduction h1 {
    color: #4bffa6;
    font-size: 6.5rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 30px;
    margin-top: 0px;
}

.introduction h1 strong{
  font-weight: 800;
}


.introduction h2{
    color: #66fea6;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 2.2rem;
}

.introduction p{
  font-size: 1.8rem;
  font-weight: 600;
}

.introduction p.ref {
    font-size: 1.4rem;
    font-weight: 400;
}

.introduction span.citation{
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  transform: rotate(180deg);
  font-size: 12px;
  font-weight: 400;
  right: 0;
  bottom: 70px;
  position: absolute;
  color: #ffffff65;
}


.introduction img.arrow-down{
  height: 60px;
  margin-left: 90px;
  display: block;
}

.stat{
  display: flex;
  margin-right: 30px;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 50px;
  width: 400px;
}

.stat.wide{
  width: 747px;
}

.stat:not(.pie){
  margin-left: 90px;
}

.stat h4{
  color: #4bffa6;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 5px;
}

.stat.pie{
  width: 100%;
  margin-bottom: 80px;
}

.stat.pie img {
  align-self: flex-start;
  margin-right: 40px;
  width: 200px;
}

.stat.pie .figures{
  flex: 1 1 auto;
}

.stat.pie .figures p{
  margin-bottom: 0;
  font-weight: 700;
}





.key-findings p{

  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: 500;

}

.key-findings p.byline{
  font-size: 1.8rem;
}



/* ----------------------------------------------------------------
ABOUT
-----------------------------------------------------------------*/

body.about{
  background: #ededed;
}

body.about .nav ul.navigation-items li a{
    color: #5a726f;
}

body.about .nav ul.navigation-items li a.current{
    color: #6c01b0;
}

.container.grey h1 {
    color: #6c01b0;
}

.container.grey h1 strong{
  font-weight: 800;
}


.container.grey h2{
    color: #6c01b0;
}

.container.grey p{
  font-size: 1.8rem;
  font-weight: 400;
}

img.arrow-down.about{
  margin-left: 90px;
}

.container.grey .stat h4{
  color: #6c04b0;
}

body.about .introduction .stat{
  justify-content: flex-end;
  width: auto;
}

body.about .introduction .stat p{
  font-size: 1.6rem;
  margin-bottom: 30px;
  font-weight: 400;
}

body.about .introduction .stat.pie{
  margin-bottom: 50px;
}

body.about .introduction .stat.pie img{
    flex: 1;
}

body.about .introduction .stat.pie .figures{
    flex: 2;
}


.why-important .stat h4 {
    color: #f54b9a;
}

.why-important .stat p.link{
  margin-left: 0;
  color: #f54b9a;
  font-weight: 700;
  font-size: 1.7rem;
}

.why-important .stat p.link a{
  color: inherit;
}

.why-important img.arrow-down{
    height: 60px;
    margin-left: 90px;
    display: block;
}

.why-important p {
    font-size: 1.8rem;
    font-weight: 600;
}

.why-important h2{
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  margin-top: 40px;
  margin-bottom: 25px;
  color: #f54b9a;
}


.container.pink h2{
  color: #ccff6d ;
}

.container.pink h3{
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 25px;
}

.container.pink p{
  font-weight: 600;
}

.container.pink p a{
  color: #ccff6d;
}

.container.pink .team p{
  font-weight: 400;
  font-size: 3rem;
  color: #ccff6d;
  margin-top: -20px;
}

.team-container{
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}

.team-container .team-stub{
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  flex: 50%;
  margin-bottom: 40px;
}

.team-container .team-stub img{
  width: 200px;
  display: block;
}

.container.pink .team-container .team-stub h4{
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 5px;
  margin-top: 14px;
}

.container.pink .team-container .team-stub p{
  font-weight: 400;
  font-size: 1.4rem;
  margin-top: 0px;
  margin-bottom: 10px;
}

.team-stub .soc{
  display: flex;
  align-items: center;
}

.team-stub .soc li{
  color: #ccff6d;
  font-size: 1.4rem;
  font-weight: 500;
  border-right: 1px solid #FFF !important;
}

.team-stub .soc li:first-child{
  margin-right: 10px;
  padding-top: 7px;
  border-right: 0 !important;
}

.team-stub .soc li a.soc-linkedin{
  background-size: 14px;
}





/* ----------------------------------------------------------------
FINDINGS
-----------------------------------------------------------------*/

.container.findings {
    padding-bottom: 70px;
}

.container.findings p{
  font-weight: 400;
}


/* ----------------------------------------------------------------
SOCIAL icons
-----------------------------------------------------------------*/


.soc {
    overflow:hidden;
    margin:0; padding:0;
    list-style:none;
}

.soc li {
    margin-bottom: 0;
    display:inline-block;
    border-right: 1px solid #FFF;
    padding-right: 7px;
    margin-right: 7px;
}

body.about .soc li{
  border-right: 1px solid #5a726f;
}


.soc li a {
    
    width: 18px;
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    color: #ffffff;
    display: block;
}

.soc li:last-child{
  margin:0 !important;
  border-right: 0 !important;
}


.soc-twitter{
    background: transparent url("/assets/images/icon-twitter.svg") no-repeat center center;
    background-size:  16px;
}

.soc-facebook {
    background: transparent url("/assets/images/icon-facebook.svg") no-repeat center center;
    background-size: 7px;
    width: 11px !important;
}

.soc-linkedin,
body.about .team-stub .soc-linkedin {
    background: transparent url("/assets/images/icon-linkedin.svg") no-repeat center center;
    background-size:  17px;
}

.soc-mail {
    background: transparent url("/assets/images/icon-mail.svg") no-repeat center center;
    background-size:  17px;
}


body.about .soc-twitter{
    background: transparent url("/assets/images/icon-twitter-grey.svg") no-repeat center center;
    background-size:  16px;
}

body.about .soc-facebook {
    background: transparent url("/assets/images/icon-facebook-grey.svg") no-repeat center center;
    background-size: 7px;
    width: 11px !important;
}

body.about .soc-linkedin {
    background: transparent url("/assets/images/icon-linkedin-grey.svg") no-repeat center center;
    background-size:  17px;
}

.soc.footer li {
    border-right: 1px solid #ffffff !important;
}

.soc.footer .soc-twitter{
    background: transparent url("/assets/images/icon-twitter.svg") no-repeat center center;
    background-size:  16px;
}

.soc.footer .soc-facebook {
    background: transparent url("/assets/images/icon-facebook.svg") no-repeat center center;
    background-size: 7px;
    width: 11px !important;
}

.soc.footer .soc-linkedin {
    background: transparent url("/assets/images/icon-linkedin.svg") no-repeat center center;
    background-size:  17px;
}




/* ----------------------------------------------------------------
FULL REPORT
-----------------------------------------------------------------*/

.flipbook{
  margin-top: 40px;
  margin-bottom: 0px;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

.flipbook iframe
{
  height: 57vw;
}

.flipbook iframe.desktop{
  display: block;
}

.flipbook iframe.mobile{
  display: none;
}

.flipbook h3{
  align-self: self-start;
  margin-left: 92px;
}

.flipbook a.arrow-link{
  align-self: flex-end;
  margin-right: 92px;

}


/* ----------------------------------------------------------------
FINDINGS
-----------------------------------------------------------------*/

.findings-data-wrap h1{
  font-weight: 800;
  font-size: 4rem;
}

.findings-data-wrap h1 span{
  font-weight: 400;
  font-size: 2rem;
}

.findings-data-wrap .pink h1{
  color: #ccff6d;
}

.callout-stat{
  width: 460px;
  margin-top: 30px;
  margin-bottom: 50px;
}

.callout-stat h2{
  font-size: 5rem;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1;
}

.callout-stat p{
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}


.findings-data-wrap a.find-out-more{
  color: #FFF;
  font-size: 4.4rem;
  font-weight: 800;
  text-decoration: none;
  width: 600px;
  display: block;
  line-height: 1.3;
  padding-bottom: 25px;
  margin-bottom: 50px;
}

.findings-data-wrap a.find-out-more.adolescents{
  background: transparent url('/assets/images/arrow-purple.svg') no-repeat right 7px bottom 0;
  background-size: 55px;
}

.findings-data-wrap a.find-out-more.adolescents span{
  color: #6c01b0;
  text-decoration: underline;
}

.findings-data-wrap a.find-out-more.young-adults{
  background: transparent url('/assets/images/arrow-yellow.svg') no-repeat right 7px bottom 0;
  background-size: 55px;
  width: 630px;
}

.findings-data-wrap a.find-out-more.young-adults span{
  color: #ffdc00;
  text-decoration: underline;
}

.findings-data-wrap a.find-out-more.seldom-heard{
  background: transparent url('/assets/images/arrow-lightyellow.svg') no-repeat right 7px bottom 0;
  background-size: 55px;
  width: 666px;
}

.findings-data-wrap a.find-out-more.seldom-heard span{
  color: #ccff6d;
  text-decoration: underline;
}

.findings-data-wrap a.find-out-more.comparisons{
  background: transparent url('/assets/images/arrow-grey.svg') no-repeat right 7px bottom 0;
  background-size: 55px;
  width: 600px;
}

.findings-data-wrap a.find-out-more.comparisons span{
  color: #5a7370;
  text-decoration: underline;
}

.findings-data-wrap .seldom-heard .callout-stat{
  width: 630px;
}

.chart-adolescents-1{
  display: block;
  width: 100%;
  max-width: 420px;
  margin-top: 50px;
  margin-bottom:20px;
}

.callout-stat.secondary{
  width: 100%;
  margin-bottom: 50px;
}

.findings-data-wrap p.right{
  font-size: 1.9rem;
  width: 80%;
  text-align: right;
  float: right;
  position: relative;
  margin-right: 60px;
}

.findings-data-wrap p.left{
  font-size: 1.9rem;
  width: 70%;
  text-align: left;
  position: relative;
}


.findings-data-wrap p.right.top-line:before {
    content: "";
    position: absolute;
    border-left: 1px solid #6b00af;
    top: -60px;
    right: 30%;
    height: 46px;
    width: 1px;
}


.findings-data-wrap p.left.bottom-line:before {
    content: "";
    position: absolute;
    border-left: 1px solid #6b00af;
    bottom: -50px;
    left: 60px;
    height: 46px;
    width: 1px;
}

.findings-data-wrap p.left.indent{
  margin-left: 60px;
  margin-bottom: 60px;
}

.chart-adolescents-2{
  display: block;
  width: 100%;
  margin-top: 50px;
  margin-bottom:20px;
}

.callout-stat.tertiary{
  margin-top: 70px;
  width: 80%;
}

.callout-stat.tertiary p{
  font-size: 1.9rem;
  font-weight: 400;
}

.young-adults .callout-stat p{
  color: #FFF;
}

.chart-youngadults-1{
  display: block;
  width: 100%;
  max-width: 480px;
  margin-top: 50px;
  margin-bottom:80px;
}

.stat-horz {
    display: flex;
    margin-bottom: 0px;
    margin-left: 100px;
}

.stat-horz.right{
  flex-flow: column wrap;
  align-content: flex-end;
  align-items: flex-end;
}

.stat-horz h2{
  font-size: 5rem;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1;
  margin-right: 30px;
}

.stat-horz.right h2{
  margin-right: 0px;
}

.stat-horz p{
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  color: #FFF;
}


.chart-youngadults-2{
  display: block;
  width: 100%;
  margin-top: 0px;
  margin-bottom:80px;
}

.young-adults p{

    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    color: #FFF;
    margin-bottom: 60px;

}

.young-adults .callout-stat h2{
  color: #FFF;
}

.young-adults .callout-stat h2 span{
  font-size: 2.8rem;
  font-weight: 400;
}

.young-adults .callout-stat p span.yellow{
  color: #ffdc00;
}

.chart-seldom-1{
  display: block;
  width: 100%;
  max-width: 480px;
  margin-top: 50px;
  margin-bottom:80px;
}

.youthreach-reporting {
    margin-top: 30px;
    width: 500px;
}

.youthreach-reporting h4 {
    color: #ccff6d;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.youthreach-reporting ul{
  column-count:  2;
}

.youthreach-reporting ul li{
    margin-bottom: 0px;
    font-weight: 700;
    list-style: none;
    padding-left: 10px;
    background: transparent url("/assets/images/youthreach-bullet.png") no-repeat 0px 11px;
}

.seldom-heard p {
    font-size: 2rem;
    font-weight: 700 !important;
    line-height: 1.4;
    color: #FFF;
    margin-bottom: 60px;
}


.chart-seldom-2{
  display: block;
  width: 100%;
  margin-top: 0px;
  margin-bottom:80px;
}

.seldom-heard .callout-stat.tertiary{
  width: 80%;
}


.seldom-heard .callout-stat p span.yellow{
  color: #ccff6d;
}

.comparisons p{
  font-size: 1.9rem;
  font-weight: 700 !important;
  line-height: 1.4;
}

.comparisons .callout-stat h2{
  color: #FFF;
}

.comparisons ul{
  margin-bottom: 40px;
}

.comparisons ul li{
    margin-bottom: 5px;
    font-weight: 700;
    list-style: none;
    padding-left: 10px;
    background: transparent url("/assets/images/comparisons-bullet.png") no-repeat 0px 11px;
}

.comparisons ul li span{
  font-weight: 400;
}

.chart-comparisons{
  display: block;
  width: 100%;
  margin-top: 0px;
  margin-bottom:80px;
}

/*------------------------------------------------
REPOSITORY
------------------------------------------------*/

.repository-link-stub{
  margin-bottom: 80px;
}

.repository-link-stub:last-of-type{
  margin-bottom: 20px;
}

.repository-link-stub h3{
  font-weight: 800;
  line-height: 1.2;
  color: #FFF;
  padding-right: 55px;
  margin-bottom: 10px;
}

.repository-link-stub h3 a{
  text-decoration: none;
  color: #FFF;
}

.repository-link-stub:hover h3 a{
  color: #4bffa6;
  text-decoration: underline;
}

.repository-link-stub h3 span{
  font-weight: 400;
}

.repository-link-stub a.download{
  color: #FFF;
  font-size: 2rem;
  font-weight: 700;
  padding-bottom: 30px;
  background: transparent url(/assets/images/arrow-download.svg) no-repeat right 8px;
  background-size: 25px;
  display: block;
  margin-bottom: 0px;
  width: 145px;
  text-decoration: none;
}

.repository-link-stub ul.soc {
    display: flex;
}

.repository-link-stub ul.soc li{
  padding-right: 10px;
  margin-right: 10px;
}

.repository-link-stub ul.soc li:first-child{
  border: 0;
}

.repo-wrap{
  border-bottom: 1px solid #FFF;
}


/* ----------------------------------------------------------------
MEDIA QUERIES
-----------------------------------------------------------------*/

@media only screen and (min-width: 1500px) {  
  
  .flipbook iframe {
    height: 46vw;
  }

}


/* Large desktop */
@media only screen and (max-width: 1100px) {  

  .report-copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: column wrap;
    text-align: center;
  }

  .copyright-notice {
    margin-bottom: 50px;
  }


}


/* Portrait tablet to landscape and desktop */
@media only screen and (min-width: 769px) and (max-width: 979px) {  

}

/* Landscape phone to portrait tablet */
@media only screen and (max-width: 768px) {  

  .four.columns {
    width: 60%;
  }

  .offset-by-two.columns {
    margin-left: 0;
  }

  .flipbook iframe {
    height: 45vh;
  }

  .flipbook iframe.desktop{
    display: none;
  }

  .flipbook iframe.mobile{
    display: block;
  }

  .six.columns {
    width: 100%;
  }

  .four.columns {
    width: 100%;
  }

  .columns {
    margin-left: 0%;
  }

  .offset-by-three.columns {
    margin-left: 0%;
  }


  .three.columns {
    width: 100%;
  }

  .findings-data-wrap p.right {
    font-size: 1.9rem;
    width: 100%;
    text-align: right;
    float: right;
    position: relative;
    margin-right: 0px;
  }

  .findings-data-wrap p.right.top-line:before {
    content: "";
    position: absolute;
    border-left: 1px solid #000;
    top: -46px;
    left: 30%;
    height: 46px;
    width: 1px;
  }

  .findings-data-wrap p.left.indent {
    margin-left: 0px;
    margin-bottom: 60px;
    width: 100%;
  }

  .findings-data-wrap p.left {
    font-size: 1.9rem;
    width: 100%;
  }

  .nine.columns {
    width: 100%;
  }

  .stat.tertiary {
    margin-top: 70px;
    width: 100%;
  }

  .offset-by-one.columns {
    margin-left: 0;
  }

  .report-link a {
    color: #FFF;
    font-size: 3.4rem;
  }

}


/* Landscape phones and down */
@media only screen and (max-width: 480px) { 


  
  #nav-icon{
    display: block;
  }

  .nav ul.navigation-items,
  .nav ul.soc{
    display: none;
  }

  .report-copyright{
    display: block;
  }

  .four.columns {
    width: 100%;
  }

  .introduction h1 {
    color: #4bffa6;
    font-size: 3.1rem;
  }

  .introduction p {
    font-size: 1.8rem;
  }

  .introduction span.citation {
    writing-mode: initial;
    text-orientation: initial;
    transform: none;
    font-size: 12px;
    font-weight: 400;
    right: initial;
    bottom: initial;
    position: relative;
    display: block;
    margin-bottom: 20px;
  }


  .stat {
    display: flex;
    flex-flow: column wrap;
    align-content: center;
    margin-right: 0;
    align-items: center;
    margin-top: 30px;
    text-align: center;
    width: 100%;
  }

  .stat.pie img {
    align-self: center;
    margin-bottom: 40px;
    margin-right: 0;
    width: 200px;
  }

  .stat:not(.pie) {
    margin-left: 0px;
  }

  .stat.wide {
    width: 100%;
  }


  .container.introduction img.mws-logo{
    width: 115px;
    left: -1px;
  }

  .report-link a {
    color: #FFF;
    font-size: 2.6rem;
    font-weight: 700;
    text-decoration: underline;
    padding-bottom: 20px;
    background: transparent url(/assets/images/arrow-white.svg) no-repeat center bottom;
    background-size: 35px;
    display: block;
    margin-bottom: 20px;
  }

  .report-link p {
    margin: 15px 0 0 0;
  }

  .report-copyright .logos {
    flex-flow: row wrap;
    justify-content: space-evenly;
  }

  .report-copyright .logos img.logo.jigsaw {
    height: 15px;
  }

  .report-copyright .logos img.logo.ucd {
    height: 40px;
    margin-left: 0px;
    margin-right: 0px;
  }

  .report-copyright .logos img.logo.esb {
    height: 50px;
  }
  

  .report-copyright .logos img{
    margin-bottom: 30px;
  }

  .report-copyright .logos img:last-child{
    margin-bottom: 0;
  }

  .report-copyright p.motif{
    text-align: center;
  }

  .flipbook iframe {
    height: 60vh;
  }


  .introduction img.arrow-down {
    height: 60px;
    margin: 0 auto;
    display: block;
  }

  .stat.pie {
    width: 100%;
    margin-bottom: 40px;
  }

  .stat:not(.pie) {
   margin-left: 0px;
   margin-bottom: 0px;
   margin-top: 20px;
  }


  .container.grey h2 {
    color: #6c01b0;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 20px;
  }


  body.about .introduction .stat p:last-child{
    margin-bottom: 0;
  }

  .why-important img.arrow-down {
    height: 60px;
    margin: 0 auto;
    display: block;
  }

  .container .row{
    width: 100% !important;
  }

  .container.pink h3 {
    font-size: 2.2rem;
  }

  .container.pink .team p{
    font-size: 2.3rem;
  }

  .container.footer .row.footer {
    width: 100%;
  }

  a.arrow-link.teal.footer{
    line-height: 1.4;
  }

  .team-container .team-stub{
    align-items: center;
  }

  .container.pink .team-container .team-stub h4,
  .container.pink .team-container .team-stub p{
    text-align: center;
  }

  .container.flip{
    padding: 0;
  }

  .flipbook h3 {
    align-self: self-start;
    margin-left: 52px;
    font-size: 2rem;
  }

  .flipbook a.arrow-link {
    align-self: flex-end;
    margin-right: 52px;
  }

  .title.pdf-page {
    text-align: center;
  }

  .findings-data-wrap a.find-out-more{
    width: 86% !important;
  }

  .findings-data-wrap .seldom-heard .callout-stat {
    width: 100% !important;
  }

  .youthreach-reporting {
    margin-top: 30px;
    width: 100%;
  }

  .callout-stat {
    width: 100%;
  }

  .container.teal .row{
    padding-top: 30px;
  }

  .findings-data-wrap h1 span {
    font-weight: 400;
    font-size: 2rem;
    display: block;
    line-height: 1;
  }

  .callout-stat h2 {
    font-size: 3.5rem;
  }

  .callout-stat p {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .callout-stat.secondary {
    width: 100%;
    margin-bottom: 0px;
  }

  .findings-data-wrap p.right {
    font-size: 1.2rem;
    width: 100%;
    text-align: right;
    float: right;
    position: relative;
    margin-right: 0px;
    margin-top: 37px;
  }

  .findings-data-wrap p.right.top-line:before{
    top: -50px;
    height: 36px;
  }

  .findings-data-wrap p.left {
    font-size: 1.2rem;
  }

  .findings-data-wrap .adolescents .left br{
    display: none;
  }

  .callout-stat.tertiary {
    margin-top: 70px;
    width: 100%;
  }
  
  .findings-data-wrap a.find-out-more {
    color: #FFF;
    font-size: 2.2rem;
    font-weight: 800;
    text-decoration: none;
    width: 100% !important;
    display: block;
    line-height: 1.3;
    padding-bottom: 25px;
    margin-bottom: 50px;
  }

  .stat-horz{
    margin-left: 0px;
  }

  .stat-horz h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1;
    margin-right: 10px;
    margin-top: 3px;
  }

  .young-adults p {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
    color: #FFF;
    margin-bottom: 20px;
  }

  .young-adults .callout-stat p br{
    display: none;
  }

  .findings-data-wrap h1 {
    font-weight: 800;
    font-size: 3.8rem;
    line-height: 1.2;
  }

  .container.green .row{
    padding-top: 30px;
  }

  .chart-comparisons {
    display: block;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 20px;
  }

  .copyright-notice p {
    font-weight: 400;
    font-size: 1rem;
  }

  .report-copyright p.charity{
    font-size: 1rem;
  }

  .repository-link-stub h3{
    line-height: 1;
  }

  .repository-link-stub h3 a {
    text-decoration: none;
    color: #FFF;
    font-size: 24px;
  }




}