@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/mavenpro.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.h1 {
    font-family: Maven Pro,MS Serif, New York, sans-serif;
    font-size: 1.1em;
	line-height: 4em;
    font-weight: 600;
    text-transform: none;
}

.h2 {
    font-family: Maven Pro,MS Serif, New York, sans-serif;
    font-size: 2em;
    font-weight: 600;
    line-height: 1.2em;
    text-transform: none;
}

.h3 {
    font-family: Maven Pro,MS Serif, New York, sans-serif;
    font-size: 1.8em;
    font-weight: 500;
    line-height: 1.2em;
    text-transform: none;
}

.h4 {
    font-family: Maven Pro,MS Serif, New York, sans-serif;
    font-size: 1.6em;
    font-weight: 500;
    line-height: 1.2em;
    text-transform: none;
}

.h5 {
    font-family: Maven Pro,MS Serif, New York, sans-serif;
    font-size: 1.4em;
    font-weight: 500;
    line-height: 1.2em;
    text-transform: none;
}

.h6 {
    font-family: Maven Pro,MS Serif, New York, sans-serif;
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1.2em;
    text-transform: none;
}


a.white-link:link,
a.white-link:visited,
a.white-link:active
{
    color:#000;
    text-decoration:underline;
}

a.white-link:hover
{
    text-decoration:underline;
}

a.button-link:link,
a.button-link:visited,
a.button-link:active
{
    color:#000;
}

a.button-link:hover
{
    text-decoration:underline;
}

a.purple-link:link,
a.purple-link:visited,
a.purple-link:active
{
    color:#b6aee5;
;
}

a.purple-link:hover
{
    text-decoration:underline;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.astroid-wrapper {
    background-color: rgba(0, 0, 0, 0);
}

.curved-edges {
    border-top-left-radius: 3.0em;
    -webkit-border-top-left-radius: 3.0em; 
    -moz-border-top-left-radius: 3.0em;
    border-top-right-radius: 3.0em;
    -webkit-border-top-right-radius: 3.0em; 
    -moz-border-top-right-radius: 3.0em;
}

.border-radius {
    border-radius: 3.5em;
    -webkit-border-radius: 3.5em; 
    -moz-border-radius: 3.5em;
}


.campain-cc-hero-wrapper {
    background: url('/img/campaign-cc-hero-bg.png') no-repeat top center; 
    background-size: cover; 
    width: 100%;
}

.campain-cc-young-people-expanded-wrapper {
    background: url('/img/campaign-cc-young-people-bg.png') no-repeat top center; 
    background-size: cover; 
    width: 100%;
}

.campain-cc-parents-expanded-wrapper {
    background: url('/img/campaign-cc-parent-bg.png') no-repeat top center; 
    background-size: cover; 
    width: 100%;
}

.campain-cc-teachers-expanded-wrapper {
    /*background: url('/img/campaign-cc-teacher-bg.png') no-repeat top center; */
    background-size: cover; 
    width: 100%;
}

.h1-black-bg {
    color:#FFF;
    font-size: 3.0em;
    font-weight:700;
}

.h2-black-bg {
    color:#FFF;
    font-size: 1.3em;
}

.h1-black-bg span{
    background-color: #1D1D1B;
    padding: 0px;
}

.h2-black-bg span{
    background-color: #1D1D1B;
    padding: 8px 15px;
    font-weight: 700;
}

.h2-white-bg span{
    background-color: #FFFFFF;
    padding: 8px 15px;
    color:#1D1D1B;
    font-weight: 700;
}

.h3-sub-section span {
    padding: 0px;
    font-weight: 800;
}

.h3-sub-section-light span {
    font-weight: 500;
}

.h3-pink-bg span {
    background-color: #FFBACE;
}

.h3-light-blue span {
    background-color: #A5F1F5;
}

.h3-light-green span {
    background-color: #D5F7E1;
}

.h3-light-indigo span {
    background-color: #B6ABFF;
}

.h3-light-grey span {
    background-color: #CECECE;
}

.dot-black, .dot-white {
    display: none;
}

.top-black-line, .top-white-line {
    border-top: none;
}

.right-black-line, .right-white-line {
    border-right: none;
}

.bottom-black-line-first, .bottom-black-line-second, .bottom-black-line-third,
.bottom-white-line-first, .bottom-white-line-second
{
    display: none;
}

.minus-margin-right {
    margin-right: 0px;
}

.ul-campaign-cc-hero {
    padding-left: 1.9em;
    list-style-type: disc;
    margin-left:1.9em;
	
}
/*
ul.ul-campaign-cc-hero li::before {
    content: "\2022";
    color: #141417;
    font-weight: bold;
    display: block; 
    width: 1em;
    margin-left: -1.0em;
    font-size: 2.2em;
    float:left;
	
}
*/
ul.ul-campaign-cc-hero li {
    margin-bottom:0px;
}

.campain-cc-hero-wrapper ul.ul-campaign-cc-hero li {
    font-size: 0.9em;
}

.campain-cc-hero-wrapper ul.ul-campaign-cc-hero {
    margin-left: 25px;
}

.white-font-colour {
    color: #FFFFFF;
}

.h3-sub-section span {
    padding: 8px 15px;    
}

.read-more-btn span {
    border: 2px solid #1D1D1B;
    font-size: 0.6em;
}

.slider-wrapper {
	height: 550px;
}

.show-on-desktop, .show-on-mobile {
    display: none;
}

/* desktop  */
@media only screen and (max-width: 768px) {
    .h2-black-bg-small-padding span {
        padding: 8px 15px;
        line-height: 1.80;
    }
    .vertical-black-line-left {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .show-on-desktop {
        display: block;
    }
    
    .show-on-mobile {
        display: none;
    }
    
    .h1-black-bg, .h1-white-bg {
        font-size: 3.0em;
    }
    
    .h1-black-bg span, .h1-white-bg span{
        padding: 8px 15px;
    }
    
    .h2-black-bg, .h2-white-bg {
        font-size: 2.0em;
        font-weight: 700;
    }
    
    .dot-black {
        height: 20px;
        width: 20px;
        background-color: #1D1D1B;
        border-radius: 50%;
        display: inline-block;
        margin-top: 6px;
        position: absolute;
        text-align: center;
        margin-left: 30px;
    }
    
    .top-black-line {
        border-top: 3px solid #1D1D1B;
        position: absolute;
        top: 10px;
        display: inline-block;
        width: 304px;
    }
    
    .right-black-line {
        border-right: 3px solid #1D1D1B;
        margin-top: -28px;
    }
    
    .bottom-black-line-first, .bottom-black-line-second,
    .bottom-black-line-third {
        display: block;
        background-color: #1D1D1B;
    }
    
    .bottom-black-line-first {
        width: 100%;
        height: 3px;
        margin-top: -3px;
    }
    .bottom-black-line-second {
        width: 100%;
        height: 12px;
        margin-top: -8px;
    }
    
    .bottom-black-line-third {
        width: 100%;
        height: 3px;
        margin-top: -3px;
    }
    
    .section-container {
        border-bottom: 3px solid #1D1D1B;
    }
    
    .dot-white {
        height: 20px;
        width: 20px;
        background-color: #FFFFFF;
        border-radius: 50%;
        display: inline-block;
        margin-top: 6px;
        position: absolute;
        text-align: center;
        margin-left: 30px;
    }
    
    .top-white-line {
        border-top: 3px solid #FFFFFF;
        position: absolute;
        top: 10px;
        display: inline-block;
        width: 145px;
    }
    
    .right-white-line {
        border-right: 3px solid #FFFFFF;
        margin-top: -11px;
    }
    
    .bottom-white-line-first, .bottom-white-line-second {
        display: block;
        background-color: #FFFFFF;
    }
    
    .bottom-white-line-first {
        width: 100%;
        height: 3px;
        margin-top: -3px;
    }
    .bottom-white-line-second {
        width: 100%;
        height: 12px;
        margin-top: -8px;
    }
    
    .section-container-white {
        border-bottom: 3px solid #FFFFFF;
    }
    
    .narrow-margin-left {
        margin-left: 11px;
    }
    
    .vertical-black-line-left {
        position: absolute;
        width: 3px;
        height: 485px;
        background-color: #1D1D1B;
        top: 70px;
        left: 34px;
    }
    
    .vertical-black-line-left2 {
        height: calc(100% - 62px);
    }
    
    .vertical-black-line-left3 {
        height: 100%;
    }
    
    .horizontal-dot-end {
        bottom:30px;
        right:0px;
    }
    .horizontal-black-line-left {
        position: absolute;
        bottom: 38px;
        right: 20px;
        height: 3px;
        width: 7px;
        background-color: #1D1D1B;
    }
    
    .bottom-black-line-first-yp {
        margin-left: 35px;
    }
    
    .vertical-black-line-right-yp {
        width: 3px;
        background-color: #1D1D1B;
        height: 870px;
        margin-top: -5px;
        margin-left: 17px;
    }
    .dot-black-bottom-yp {
        margin-top: 0px;
        left: -7px;
    }
    
    .slider-wrapper {
    	height: 380px;
    }
    
    .vertical-black-line-left-yp-expanded {
        height: calc(100% + 50px);
        top: -50px;
    }
    
    .vertical-black-line-left-parents-expanded {
        height: calc(100% + 90px);
        top:-90px;
    }
    
    .vertical-black-line-left-teachers-expanded {
        height: 180px;
        top:-90px;
    }
    
    .bottom-black-line-first-yp {
        margin-left: 34px;
    }
    
    .vertical-black-line-right-yp {
        width: 3px;
        background-color: #1D1D1B;
        height: 860px;
        margin-top: -5px;
        margin-left: 16px;
    }
    
    .vertical-black-line-right-parents {
        width: 3px;
        background-color: #1D1D1B;
        height: 590px;
        margin-top: -5px;
        margin-left: 16px;
    }
    
    .vertical-black-line-right-teachers {
        width: 3px;
        background-color: #1D1D1B;
        height: 1320px;
        margin-top: -5px;
        margin-left: 16px;
    }
    
}

@media only screen and (min-width: 1000px) {
    .top-black-line {
        width: 544px;
    }
    .top-white-line {
        width: 385px;
    }
    
    .vertical-black-line-left {
        height: 350px;
    }
    
    .vertical-black-line-left2 {
        height: calc(100% - 62px);
    }
    
    .vertical-black-line-left3 {
         height: 100%;
    }
    
    .horizontal-black-line-left {
        width: 27px;
    }
    .slider-wrapper {
    	height: 270px;
    }
    
    .vertical-black-line-left-yp-expanded {
        height: calc(100% + 50px);
        top: -50px;
    }
    .bottom-black-line-first-yp {
        margin-left: 35px;
    }

    .dot-black-bottom-yp {
        margin-top: 0px;
        left: -7px;
    }
    
    .vertical-black-line-left-parents-expanded {
        height: calc(100% + 90px);
        top:-90px;
    }
    
    .vertical-black-line-left-teachers-expanded {
        height: 180px;
        top:-90px;
    }
    
    .bottom-black-line-first-yp {
        margin-left: 34px;
    }
    
    .vertical-black-line-right-yp {
        width: 3px;
        background-color: #1D1D1B;
        height: 810px;
        margin-top: -5px;
        margin-left: 16px;
    }
    
    .vertical-black-line-right-parents {
        width: 3px;
        background-color: #1D1D1B;
        height: 530px;
        margin-top: -5px;
        margin-left: 16px;
    }
    
    .vertical-black-line-right-teachers {
        width: 3px;
        background-color: #1D1D1B;
        height: 1220px;
        margin-top: -5px;
        margin-left: 16px;
    }
}
@media only screen and (min-width: 1200px) {
    .top-black-line {
    width: 723px;
    }
    .top-white-line {
        width: 568px;
    }
    
    .vertical-black-line-left {
        height: 301px;
    }
    
    .vertical-black-line-left2 {
        height: calc(100% - 62px);
    }
    
    .vertical-black-line-left3 {
        height: 100%;
    }
    
    .horizontal-black-line-left {
        width: 41px;
    }
    
    .vertical-black-line-left-yp-expanded {
    height: calc(100% + 50px);
    top: -50px;
    }
    
    .vertical-black-line-left-parents-expanded {
        height: calc(100% + 90px);
        top:-90px;
    }
    
    .vertical-black-line-left-teachers-expanded {
        height: 180px;
        top:-90px;
    }
    
    .bottom-black-line-first-yp {
        margin-left: 34px;
    }
    
    .vertical-black-line-right-yp {
        width: 3px;
        background-color: #1D1D1B;
        height: 882px;
        margin-top: -5px;
        margin-left: 16px;
    }
    
    .vertical-black-line-right-parents {
        width: 3px;
        background-color: #1D1D1B;
        height: 550px;
        margin-top: -5px;
        margin-left: 16px;
    }
    
    .vertical-black-line-right-teachers {
        width: 3px;
        background-color: #1D1D1B;
        height: 1335px;
        margin-top: -5px;
        margin-left: 16px;
    }
    
    .dot-black-bottom-yp {
        bottom: 20px;
        left: -7px;
    }
}

/* Slider */
.slider {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.slider-wrapper {
	width: 100%;
	position: relative;
}

.slide {
	float: left;
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
}

.slider-wrapper > .slide:first-child {
	opacity: 1;
}

.slider-nav {
	height: 35px;
	width: 100%;
	position: relative;
	z-index: 1000;
	display: block;
	margin: 1.5em 0;
}

.slider-nav button {
	border: none;
	display: block;
	width: 35px;
	height: auto;
	cursor: pointer;
	text-indent: -9999em;
	background-color: transparent;
	background-repeat: no-repeat;
}

.slider-nav button:focus {
	outline-style: none;
}

.slider-nav button.slider-previous {
	background-image: url('/img/icon-less-than.png');
	background-size:35px;
}
.slider-nav button.slider-previous:focus {
	border:1px solid #000;
}

.slider-nav button.slider-next {
	background-image: url('/img/icon-greater-than.png');
	background-size:35px;
}
.slider-nav button.slider-next:focus {
	border:1px solid #000;
}


.slider-pagination {
	margin: 1.5em 0;
	text-align: left;	
}

.slider-pagination a {
	width: 2em;
	height: 2em;
	line-height: 2;
	text-align: center;
	border: 1px solid #ddd;
	color: #000;
	text-decoration: none;
	background: #f5f5f5;
	display: inline-block;
    border-color: #000;
}

.slider-pagination a:hover {
    color: #1D1D1B;
    text-decoration: underline;
}

.slider-pagination a.current {
	border-color: #000;
	background-color: #000 !important;
    color: #FFF;
}