/* DEFAULT */
@font-face {
    font-family: default-font;
    src: url(../fonts/Raleway-Medium.woff);
    font-weight: 400;
}
@font-face {
    font-family: default-font;
    src: url(../fonts/Raleway-MediumItalic.woff);
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: default-font;
    src: url(../fonts/Raleway-SemiBold.woff);
    font-weight: 600;
}
@font-face {
    font-family: default-font;
    src: url(../fonts/Raleway-SemiBoldItalic.woff);
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: default-font;
    src: url(../fonts/Raleway-Bold.woff);
    font-weight: 700;
}
@font-face {
    font-family: default-font;
    src: url(../fonts/Raleway-BoldItalic.woff);
    font-weight: 700;
    font-style: italic;
}

/* ICON */
@font-face {
    font-family: icon-font;
    src: url(../fonts/fa-light-300.woff);
    font-weight: 300;
}

@font-face {
    font-family: icon-font;
    src: url(../fonts/fa-regular-400.woff);
    font-weight: 400;
}

@font-face {
    font-family: icon-font;
    src: url(../fonts/fa-solid-900.woff);
    font-weight: 900;
}

/* BRANDS FONT */
@font-face {
    font-family: brands-font;
    src: url("../fonts/brands-font.woff");
    font-weight: 400;
}

/* MAIN */
html {
	font-size: 62.5%;
}

body {
    margin: 0;
	-webkit-font-smoothing: antialiased;
	font-family: default-font, sans-serif;
	font-size: 1.8rem;
	line-height: 1.5em;
	background-color: #ffffff;
	color: #000000;
}

a{
	color: #165673;
	text-decoration: underline;
    font-weight: 600;
	cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}

a:hover,
a:focus{
   color: #0058A6;
}

p {
	margin: 2rem 0;
}

ul,
ol{
    margin: 2rem 0;
    padding-left: 1em;
}

li,
ul ul,
ol ol{
	margin: 0.5rem 0;
}

li::marker{
    color: #165673;
    font-weight: 700;	
}

blockquote{
    min-height: 12rem;
    margin: 3rem 0 3rem -2rem;
    padding: 3rem 3rem 3rem 10rem;
    box-sizing: border-box;
    font-size: 2.2rem;
    line-height: 1.5em;
    font-weight: 700;
    font-style: italic;
    background-color: #165673;
    background-image: linear-gradient(to right, #165673 , #0058A6);
    color: #ffffff;
    border-left: 1rem solid #F6AE28;
    position: relative;
}

blockquote:before{
    content: "\201C";
    display: block;
    position: absolute; top:3rem; left: 0;
    width: 10rem;
    text-align: center;
    font-size: 12rem;
    line-height: 12rem;
    font-weight: 700;
    font-style: normal;
    color: #F6AE28;
}

blockquote a{
    font-weight: 700;
	color: #ffffff;
}

blockquote a:hover{
	color: #ffffff;
}

blockquote li::marker{
    color: #ffffff;	
}

figure{
    margin: 3rem 0;
}

figcaption{
    text-align: right;
    font-style: italic;
    margin: 1rem 0;
}

hr {
	margin: 5rem 0;
	background-color:currentColor;
    opacity: 0.2;
	height: 0.1rem;
	border: 0;
}

img,
video{
	max-width: 100%;
	height:auto;
    vertical-align: top;
}

h1,
h2,
h3,
h4{
	margin: 3rem 0 2rem 0;
}

h1,
.h1{
    font-weight: 700;
	font-size: 4rem;
	line-height: 1.4em;
}

h2,
.h2{
    font-weight: 700;
	font-size: 3.5rem;
	line-height: 1.4em;
}

h3,
.h3{
    font-weight: 700;
	font-size: 3rem;
	line-height: 1.4em;
}

h4,
.h4{
    font-weight: 700;
	font-size: 2.5rem;
	line-height: 1.4em;
}

h5,
.h5{
    font-weight: 700;
	font-size: 2rem;
	line-height: 1.4em;
}

h6,
.h6{
    font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.4em;
}

@media screen and (max-width: 85em){
	blockquote{
		margin-left: 0;
	}
}

@media screen and (max-width: 60em){
	blockquote{
		padding-left: 5rem;
	}
	blockquote:before{
		width: 5rem;
		font-size: 6rem;
		line-height: 10rem;
	}
	h1,
	.h1{
		font-size: 2.8rem;
		line-height: 1.4em;
	}
	h2,
	.h2{
		font-size: 2.6rem;
		line-height: 1.4em;
	}
	h3,
	.h3{
		font-size: 2.4rem;
		line-height: 1.4em;
	}
	h4,
	.h4{
		font-size: 2.2rem;
		line-height: 1.4em;
	}
}


/* FORMS */
.input{
	-webkit-appearance:none;
	display: block;
	width: 100%;
    max-width: 100%;
	padding: 1.2rem 1.5rem;
	box-sizing: border-box;
	border-radius:0;
	border: 0.2rem solid #000;
    outline: 0;
	font-family: default-font;
	font-size: 1.8rem;
	line-height: 2.6rem;
	background: #ffffff;
	color: #000000;
}

.input:focus{
    border-color: #0058A6;
}

.input::-webkit-input-placeholder{
	color:#000000;
}

.input::-moz-placeholder{
	color:#000000;
}

.input:-ms-input-placeholder{
	color:#000000;
}

.select{
	-webkit-appearance:none;
	display: block;
	width: 100%;
    max-width: 100%;
	padding: 1.2rem 3rem 1.2rem 1.5rem;
	box-sizing: border-box;
	border-radius:0;
	font-family: default-font;
	font-size: 1.8rem;
	line-height: 2.6rem;
	border: 0.2rem solid #000;
    outline: 0;
	background: #ffffff;
	color: #000000;
	background-image: url("../img/select.svg");
	background-position: right center;
	background-repeat: no-repeat;
}

.select:focus{
    border-color: #0058A6;
}

.checkbox{
    -webkit-appearance:none;
	display: inline-block; vertical-align: middle;
    width: 3rem;
    height: 3rem;
	border: 0.2rem solid #000;
	outline: 0;
	background: #ffffff;
	color: #000000;
    cursor: pointer;
}

.checkbox:checked{
    background-image: url(../img/checkbox.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.checkbox:focus{
    border-color: #0058A6;
}

.button{
	-webkit-appearance:none;
	display: inline-block; vertical-align: middle;
	max-width: 100%;
	padding: 1.7rem 3rem;
	box-sizing: border-box;
	font-family: inherit;
	font-weight: 600;
	font-size: 1.8rem;
	line-height: 2.6rem;
	text-align: center;
    border: none;
	border-radius: 0;
	background-color: #165673;
	color: #FFFFFF;
    text-decoration: none;
	cursor:pointer;
    position: relative; z-index: 0;
    transition: color 0.2s;
}

.button:before{
    content: "";
    display: block;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;
    border: 0.2rem solid #165673;
    box-sizing: border-box;
	background-color: #ffffff;
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
        -ms-transform: scale(0);
         -o-transform: scale(0);
            transform: scale(0);
   -webkit-transition: -webkit-transform 0.2s;
      -moz-transition: -moz-transform 0.2s;
       -ms-transition: -ms-transform 0.2s;
        -o-transition: -o-transform 0.2s;
           transition: transform 0.2s;

}

.button:hover,
.button:focus{
    color: #165673;
}


.button:hover:before,
.button:focus:before{
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
}

.button.arrow:after{
    content: "\f105";
    font-family: icon-font;
	font-weight: 400;
    margin-left: 1rem;
	line-height: 1em;
}

.button:disabled,
.button.disabled{
	background-color: #f3f5f9;
	color: #CCCCCC;
	cursor: default;
}

.button:disabled:before,
.button.disabled:before{
	display: none;
}

/* SECTIONS */
.section{
	display: flow-root;
}

.section > .inner{
	margin: 5rem auto;
	padding: 0 3rem;
	max-width:120rem;
}

/* GRID */
.grid{
	margin: 5rem auto;
	overflow: hidden;
}

.grid > .inner{
	margin: -3rem -1.5rem;
}

.grid > .inner > .grid-item{
	display: inline-block;
	vertical-align: top;
}

.grid > .inner > .grid-item > .inner{
	margin: 3rem auto;
	padding: 0 1.5rem;
}

/* POST */
.post{
    background-color: #f3f5f9;
    overflow: hidden;
    position: relative;
    box-shadow: 0rem 0rem 1rem rgba(0,0,0,0.2);
	border-top: 0.5rem solid #165673;
}

.post.blog{
	border-color: #70BBC6;
}

.post.news{
	border-color: #F6AE28;
}

.post.resource{
	border-color:#0058A6;
}

.post.webinar{
	border-color:#4973f2;
}

.post.media{
	border-color:#F76B25;
}

.post.promising-practice{
	border-color:#F76B25;
}

.post.promising-practice{
	border-color:#a42133;
}

.post .content > .inner{
    margin: 3rem 0;
    padding: 0 3rem;
}

.post-type-archive .post .post-type{
	display: none;
}

.post .post-type:before{
    content: "\f0c1";
    font-family: icon-font;
    font-weight: 400;
    margin-right: 1rem;
}

.post.blog .post-type:before{
    content: "\f781";
}

.post.news .post-type:before{
    content: "\f1ea";
}

.post.resource .post-type:before{
    content: "\f1c5";
}

.post.webinar .post-type:before{
    content: "\f63d";
    color:#4973f2;
}

.post.media .post-type:before{
    content: "\f04b";
}

.post.promising-practice .post-type:before{
    content: "\f02d";
}

.post .title{
	margin: 1rem 0;
}

.post .title a{
    color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.post .title a:hover,
.post .title a:focus{
    color: #0058A6;
	text-decoration: underline;
}

.post .title a:before{
	content: "";
	display: block;
	position: absolute; top: -0.5rem; bottom: 0; left: 0; right: 0;
	border: 0rem solid #165673;
}

.post.blog .title a:before{
	border-color: #70BBC6;
}

.post.news .title a:before{
	border-color: #F6AE28;
}

.post.resource .title a:before{
	border-color:#0058A6;
}

.post.webinar .title a:before{
	border-color:#4973f2;
}

.post.media .title a:before{
	border-color:#F76B25;
}

.post.promising-practice .title a:before{
	border-color:#F76B25;
}

.post.promising-practice .title a:before{
	border-color:#a42133;
}

.post:hover .title a:before{
    border-width: 0.3rem;
}

.post .details{
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

.post .details li{
    display: inline;
}

.post .details li:not(:last-of-type):after{
	content: " | ";
}

.post .details span{
    display: none;
}

.post .tags{
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

.post .tags li{
    display: inline;
}

.post .tags li:not(:last-of-type):after{
	content: " / ";
}

.post .tags a{
	position: relative; z-index: 1;
	text-decoration: none;
}

.post .tags a:hover,
.post .tags a:focus{
	text-decoration: underline;
}

/* POST SLIDER */
.post-slider{
    margin: 5rem auto;
    position: relative; z-index: 0;
}

.post-slider .slider{
    overflow-x: auto;
    overflow-y: hidden;
    margin: -3rem -1.5rem;
}

.post-slider .swiper-container{
	overflow: hidden;
}

.post-slider .slides{
    margin: 3rem 0;
    display: flex;
}

.post-slider .slide{
    height: auto;
    width: 33.33%;
    flex-shrink: 0;
	overflow: visible;
}

.post-slider .slide > .inner{
    height: 100%;
    padding: 0 1.5rem;
}

.post-slider .nav-button{
    position: absolute; top: 50%; z-index: 2;
    width: 4rem;
    height: 4rem;
    margin-top: -2rem;
    padding: 0;
    border: 0;
    text-align: center;
    font-size: 3rem;
	line-height: 4rem;
    color: inherit;
    background-color: transparent;
    cursor: pointer;
}

.post-slider .nav-button:hover{
    color: #0058A6;
}

.post-slider .nav-button.swiper-button-disabled {
    display: none;
}

.post-slider .nav-button.prev{
    left: -4.5rem;
}

.post-slider .nav-button.next{
    right: -4.5rem;
}

.post-slider .nav-button.prev:before{
    content: "\f053";
    font-family: icon-font;
	font-weight: 400;
}

.post-slider .nav-button.next:before{
    content: "\f054";
    font-family: icon-font;
	font-weight: 400;
}

.post-slider .nav-button span{
	display: none;
}

.post-slider .post{
    height: 100%;
}

@media screen and (max-width: 90em){
    .post-slider{
        padding: 0 2rem;
    }
    .post-slider .nav-button.prev{
        left: -2.5rem;
    }
    .post-slider .nav-button.next{
        right: -2.5rem;
    }
}

@media screen and (max-width: 60em){
    .post-slider .slide{
        width: 50%;
    }
}

@media screen and (max-width: 45em){
    .post-slider .slide{
        width: 100%;
    }
}

/* HEADER MENU */
#header-menu{
    background-color: #104760;
    color: #ffffff;
    text-align: right;
}

#header-menu > .inner{
    margin: 0 auto;
    padding: 0;
}

#header-menu .skip:not(:focus){
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    word-wrap: normal !important;
    overflow: hidden;
}

#header-menu .skip:focus{
	position: fixed; top: 1rem; left: 1rem; z-index: 1;
	padding: 1rem;
	text-decoration: none;
	background-color: #ffffff;
	color: #0058A6;
	transition: none;
}

#header-menu ul{
    list-style: none;
    margin: 0.5rem 0;
    padding: 0 0.5rem;
}

#header-menu li{
    display: inline;
    margin: 0;
    padding: 0;
}

#header-menu li:not(:last-of-type):after{
    content: " | ";
	vertical-align: middle;
}

#header-menu a{
    display: inline-block; vertical-align: middle;
    padding: 0.5rem;
    text-decoration: none;
    color: #ffffff;
}

#header-menu a:hover,
#header-menu a:focus{
    text-decoration: underline;
}

#header-menu .twitter a:before{
    content: "\f099";
    font-family: brands-font;
	font-weight: 400;
    display: inline-block; vertical-align: middle;
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    text-align: center;
    font-size: 1.2rem;
    line-height: 2rem;
    background-color: #ffffff;
    color: #104760;
}

#header-menu .linkedin a:before{
    content: "\f0e1";
    font-family: brands-font;
	font-weight: 400;
    display: inline-block; vertical-align: middle;
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    text-align: center;
    font-size: 1.2rem;
    line-height: 2rem;
    background-color: #ffffff;
    color: #104760;
}

#header-menu .mastodon a:before{
    content: "\f4f6";
    font-family: brands-font;
	font-weight: 400;
    display: inline-block; vertical-align: middle;
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    text-align: center;
    font-size: 1.2rem;
    line-height: 2rem;
    background-color: #ffffff;
    color: #104760;
}

@media screen and (max-width: 40em){
    #header-menu{
        text-align: center;
    }
    #header-menu .contact span,
    #header-menu .twitter a:before,
    #header-menu .linkedin a:before,
    #header-menu .mastodon a:before{
        display: none;
    }
}

/* HEADER */
#header > .inner{
    margin: 0 auto;
	padding: 0 1rem;
}

#header .left{
    display: inline-block; vertical-align: middle;
    width: 100%;
	padding-right: 33rem;
	box-sizing: border-box;
    margin-right: -30rem;
}

#header .right{
    display: inline-block; vertical-align: middle;
    width: 30rem;
}

#header .left > .inner,
#header .right > .inner{
    margin: 1rem auto;
}

#header .logos{
	display: flex;
	margin: -1rem;
}

#header .logo{
	display: flex; align-items: center;
	margin: 1rem 0;
	padding: 0 1rem;
}

#header .logo:not(:first-of-type){
	border-left: 0.1rem solid #c4a9d1;
}

#header .logo img{
	display: block;
}

#header .search-form label{
    display: none;
}

#header .search-form input{
	display: inline-block; vertical-align: middle;
	width: 100%;
    padding-right: 5rem;
    margin-right: -5rem;
}

#header .search-form button{
	padding: 1.4rem 0;
    width: 5rem;
    border: none;
}

#header .search-form button:after{
    content: "\f002";
    font-family: icon-font;
	font-weight: 400;
	line-height: 1em;
}

#header .search-form span{
    display: none;
}

@media screen and (max-width: 40em){
    #header .left,
    #header .right{
        display: block;
        width: auto;
        margin: 0;
        padding: 0;
        text-align: left;
    }
}

/* MAIN MENU */
#main-menu{
    overflow: visible;
    background-color: #165673;
    color: #ffffff;
    z-index: 1;
}

#main-menu > .inner{
    margin: 0 auto;
    padding: 0;
}

#main-menu .menu-toggle{
    display: none;
    width: 100%;
    margin: 0;
	padding: 0;
    text-align: left;
	font-family: inherit;
	font-weight: 600;
    font-size: inherit;
    line-height: inherit;
    border: none;
	color: #ffffff;
	background-color: #165673;
	cursor: pointer;
}

#main-menu .menu-toggle:hover,
#main-menu .menu-toggle:focus{
    background-color: #0058A6;
    border: none;
}

#main-menu .menu-toggle:before{
    display: none;
}

#main-menu .menu-toggle span{
    display: inline-block; vertical-align: middle;
    width: 100%;
    padding: 1.2rem 4rem 1.2rem 1rem;
    box-sizing: border-box;
    margin-right: -4rem;
}

#main-menu .menu-toggle:after{
    content:"\f0c9";
    font-family: icon-font;
	font-weight: 400;
    display: inline-block; vertical-align: middle;
    width: 4rem;
    text-align: center;
}

#main-menu .menu{
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-menu .menu li{
    display: inline-block; vertical-align: middle;
    margin: 0;
    padding: 0;
    position: relative;
}

#main-menu .menu a{
    display: block;
    padding: 1.2rem 1rem;
	box-sizing: border-box;
    text-decoration: none;
    color: #ffffff;
}

#main-menu .menu a:hover,
#main-menu .menu a:focus{
    background-color: #0058A6;
}

#main-menu .menu .menu-item-has-children > a{
    padding-right: 3rem;
	position: relative;
}

#main-menu .menu .menu-item-has-children > a:after{
    content:"\f107";
    font-family: icon-font;
	font-weight: 400;
	display: block;
	width: 3rem;
	height: 3rem;
	position: absolute; top: 50%; right: 0;
	margin-top: -1.5rem;
	line-height: 3rem;
	text-align: center;
}

#main-menu .sub-menu{
    display: none;
    position: absolute; top: 100%; left: 0; z-index: 1;
    width: 15em;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #f3f5f9;
	color: #000000;
    box-shadow: 0 0 1rem rgba(0,0,0,0.2);
}

#main-menu .sub-menu .sub-menu{
	left: 100%; top: 0;
}

#main-menu li.open > .sub-menu{
    display: block;
}

#main-menu .sub-menu li{
    display: block;
}

#main-menu .sub-menu a{
	width: 100%;
    color: #165673;
    text-decoration: none;
}

#main-menu .sub-menu a:hover,
#main-menu .sub-menu a:focus{
    background-color: #0058A6;
    color: #ffffff;
}

#main-menu .sub-menu .menu-item-has-children > a:after{
	content:"\f105";
}

@media screen and (max-width: 70em) {
    #main-menu .menu-toggle{
        display: block;
    }
    #main-menu .menu{
        display: none;
    }
    #main-menu .menu li{
        display: block;
		border-top: 0.1rem solid #104760;
    }
    #main-menu .sub-menu{
        position: static;
        width: auto;
    	box-shadow: none;
    	background-color: #104760;
    }
	#main-menu .sub-menu li{
		border-color: #000000;
	}
	#main-menu .sub-menu a{
    	color: #ffffff;
	}
    #main-menu .sub-menu .sub-menu{
    	background-color: #000000;
    }
	#main-menu .sub-menu .menu-item-has-children > a:after{
		content:"\f107";
	}
}

.no-js #main-menu{
	overflow: hidden;
}

.no-js #main-menu .menu-toggle{
    display: none;
}

.no-js #main-menu .menu{
    display: block;
}

.no-js #main-menu .menu .menu-item-has-children > a:after{
	display: none;
}

.no-js #main-menu .menu li{
	display: block;
}

.no-js #main-menu .menu .sub-menu{
    display: block;
    position: static;
    width: auto;
	padding-left: 3rem;
	background-color: transparent;
	color: #ffffff;
    box-shadow: none;
}

.no-js #main-menu .sub-menu a{
	color: #ffffff;
}

/* HERO SLIDER */
#hero-slider{
	background-color: #f3f5f9;
}

#hero-slider .hero-slider > .inner{
    position: relative; z-index: 0;
}

#hero-slider .slider{
    overflow-x: auto;
    overflow-y: hidden;
}

#hero-slider .slider > .inner{
	margin-left: -2rem;
}

#hero-slider .swiper-container{
	overflow: hidden;
}

#hero-slider .slides{
    display: flex;
}

#hero-slider .slide{
    height: auto;
    width: 100%;
    flex-shrink: 0;
}

#hero-slider .slide > .inner{
    height: 100%;
    padding-left: 2rem;
}

#hero-slider article{
	height: 100%;
	position: relative;
	background-color: #ffffff;
}

#hero-slider article .image{
	display: inline-block; vertical-align: top;
	width: 40rem;
	margin-right: -40rem;
}

#hero-slider article .image:before{
	content: "";
	display: block;
	padding-bottom: 50%;
}

#hero-slider article .image > .inner{
	position: absolute; top: 0; bottom: 0; right: 0;
	width: 40rem;
	background-color: #104760;
    background-image: url(../img/image-placeholder-purple.svg);
    background-size: cover;
    background-position: center;
}

#hero-slider article .image .background{
	width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
}

#hero-slider article .content{
	display: inline-block; vertical-align: top;
	width: 100%;
	padding-right: 40rem;
	box-sizing: border-box;
}

#hero-slider article .content > .inner{
	margin: 3rem 0;
	padding: 0 3rem;
}

#hero-slider .nav-button{
    position: absolute; top: 50%; z-index: 2;
    width: 4rem;
    height: 4rem;
    margin-top: -2rem;
    padding: 0;
    border: 0;
    text-align: center;
    font-size: 3rem;
	line-height: 4rem;
    color: inherit;
    background-color: transparent;
    cursor: pointer;
}

#hero-slider .nav-button:hover{
    color: #0058A6;
}

#hero-slider .nav-button.swiper-button-disabled {
    display: none;
}

#hero-slider .nav-button.prev{
    left: -4.5rem;
}

#hero-slider .nav-button.next{
    right: -4.5rem;
}

#hero-slider .nav-button.prev:before{
    content: "\f053";
    font-family: icon-font;
	font-weight: 400;
}

#hero-slider .nav-button.next:before{
    content: "\f054";
    font-family: icon-font;
	font-weight: 400;
}

#hero-slider .nav-button span{
	display: none;
}

#hero-slider .pagination{
	margin: 1rem 0;
	text-align: center;
}

@media screen and (max-width: 90em){
    #hero-slider .hero-slider > .inner{
        padding: 0 2rem;
    }
    #hero-slider .nav-button.prev{
        left: -2.5rem;
    }
    #hero-slider .nav-button.next{
        right: -2.5rem;
    }
}

@media screen and (max-width: 75em){
    #hero-slider article .image{
		width: 100%;
		margin: 0;
		position: relative;
	}
	#hero-slider article .image > .inner{
		width: 100%;
	}
	#hero-slider article .content{
		width: 100%;
		padding: 0;
	}
}

@media screen and (max-width: 45em){
    .post-slider .slide{
        width: 100%;
    }
}

/* HEADER IMAGE */
#header-image{
    padding-bottom: 25%;
    background-color: #104760;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 0.5rem solid #70BBC6;
}

/* INTRODUCTION */
#introduction{
	font-size: 3rem;
	line-height: 1.4em;
	text-align: center;
	background-color: #165673;
    background-image: url(../img/purple-circles.svg);
    background-position: top right;
    background-repeat: no-repeat;
    color: #ffffff;
}

@media screen and (max-width: 60em){
	#introduction{
		font-size: 2.4rem;
		line-height: 1.4em;
	}
}

/* TOOLS AND RESOURCES */
#tools-and-resources{
	background-color: #f3f5f9;
}

#tools-and-resources .columns{
	display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin: -2.5rem -1rem;
}

#tools-and-resources .column{
	flex: auto;
    width: 25%;
    padding: 2.5rem 1rem;
    box-sizing: border-box;
}

#tools-and-resources article{
	height: 100%;
    background-color: #165673;
    color: #ffffff;
    overflow: hidden;
    position: relative;
}

#tools-and-resources .column:nth-child(even) article{
    background-color: #104760;
}

#tools-and-resources article .thumbnail{
	position: relative;
	background-color: #104760;
    background-image: url(../img/image-placeholder-purple.svg);
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#tools-and-resources article .thumbnail:before{
	content: "";
	display: block;
	padding-bottom: 60%;
}

#tools-and-resources article .thumbnail img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
}

#tools-and-resources article .content{
	border-top: 0.5rem solid #70BBC6;
}

#tools-and-resources article .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#tools-and-resources article .title{
	margin: 1rem 0;
}

#tools-and-resources article .title a{
    color: inherit;
    font-weight: inherit;
	text-decoration: none;
}

#tools-and-resources article .title a:hover,
#tools-and-resources article .title a:focus{
	text-decoration: underline;
}

#tools-and-resources article .title a:before{
	content: "";
	display: block;
	position: absolute; top: -0.5rem; bottom: 0; left: 0; right: 0;
}

@media screen and (max-width: 75em) {
	#tools-and-resources .column{
		width: 50%;
	}
}

@media screen and (max-width: 45em) {
	#tools-and-resources .column{
		width: 100%;
	}
}

/* QUICK LINKS */
#quick-links{
	background-color: #f3f5f9;
}

#quick-links .columns{
	display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin: -2.5rem -1.5rem;
}

#quick-links .column{
	flex: auto;
    width: 33.33%;
    padding: 2.5rem 1.5rem;
    box-sizing: border-box;
}

#quick-links article{
	height: 100%;
    background-color: #165673;
    color: #ffffff;
    overflow: hidden;
    position: relative;
}

#quick-links .column:nth-child(even) article{
    background-color: #104760;
}

#quick-links article .thumbnail{
	position: relative;
	background-color: #104760;
    background-image: url(../img/image-placeholder-purple.svg);
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#quick-links article .thumbnail:before{
	content: "";
	display: block;
	padding-bottom: 60%;
}

#quick-links article .thumbnail img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
}

#quick-links article .content{
	border-top: 0.5rem solid #70BBC6;
}

#quick-links article .content > .inner{
    margin: 3rem 0;
    padding: 0 3rem;
}

#quick-links article .title{
	margin: 1rem 0;
}

#quick-links article .title a{
    color: inherit;
    font-weight: inherit;
	text-decoration: none;
}

#quick-links article .title a:hover,
#quick-links article .title a:focus{
	text-decoration: underline;
}

#quick-links article .title a:before{
	content: "";
	display: block;
	position: absolute; top: -0.5rem; bottom: 0; left: 0; right: 0;
}

@media screen and (max-width: 75em) {
	#quick-links .column{
		width: 50%;
	}
}

@media screen and (max-width: 45em) {
	#quick-links .column{
		width: 100%;
	}
}

/* NEWSLETTER */
#newsletter{
    background-color: #104760;
	color: #ffffff;
	position: relative;
}

#newsletter .image{
	display: inline-block; vertical-align: middle;
	width: 50%;
	margin: 0 -100% 0 50%;
}

#newsletter .image:before{
	content: "";
	display: block;
	padding-bottom: 50%;
}

#newsletter .image > .inner{
	position: absolute; top: 0; bottom: 0; left: 50%; right: 0;
	background-color: #104760;
    background-image: url(../img/image-placeholder-purple.svg);
    background-size: cover;
    background-position: center;
}

#newsletter .image .background{
	width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
}

#newsletter .content{
	display: inline-block; vertical-align: middle;
	width: 50%;
    text-align: center;
    font-size: 2.5rem;
    line-height: 1.4em;
}

#newsletter .content > .inner{
	max-width: 60rem;
	margin: 3rem auto;
	padding: 0 3rem;
}

@media screen and (max-width: 60em){
   	#newsletter .image{
		width: 100%;
		margin: 0;
		position: relative;
	}
	#newsletter .image > .inner{
		left: 0;
	}
	#newsletter .content{
		width: 100%;
		font-size: 2.2rem;
		line-height: 1.4em;
	}
}

/* LATEST POSTS */
#latest-posts > .inner{
	margin: 0 auto;
}

#latest-posts .left{
	display: inline-block; vertical-align: top;
	width: 66.66%;
	padding-right: 1.5rem;
	box-sizing: border-box;
}

#latest-posts .right{
	display: inline-block; vertical-align: top;
	width: 33.33%;
	padding-left: 1.5rem;
	box-sizing: border-box;
}

#latest-posts .left > .inner,
#latest-posts .right > .inner{
	margin: 5rem 0;
}

#latest-posts .latest-blog .articles{
	margin: 3rem 0;
}

#latest-posts .latest-blog .columns{
	display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin: -2.5rem -1.5rem;
}

#latest-posts .latest-blog .column{
	flex: auto;
    width: 50%;
    padding: 2.5rem 1.5rem;
    box-sizing: border-box;
}

#latest-posts .latest-blog article{
	height: 100%;
    background-color: #f3f5f9;
    overflow: hidden;
    position: relative;
    box-shadow: 0rem 0rem 1rem rgba(0,0,0,0.2);
	border-top: 0.5rem solid #70BBC6;
}

#latest-posts .latest-blog article .thumbnail{
	position: relative;
	background-color: #70BBC6;
    background-image: url(../img/placeholder-post.svg);
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#latest-posts .latest-blog article .thumbnail:before{
	content: "";
	display: block;
	padding-bottom: 60%;
}

#latest-posts .latest-blog article .thumbnail img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
}

#latest-posts .latest-blog article .content > .inner{
    margin: 3rem 0;
    padding: 0 3rem;
}

#latest-posts .latest-blog article .title{
	margin: 1rem 0;
}

#latest-posts .latest-blog article .title a{
    color: inherit;
    font-weight: inherit;
	text-decoration: none;
}

#latest-posts .latest-blog article .title a:hover,
#latest-posts .latest-blog article .title a:focus{
    color: #0058A6;
	text-decoration: underline;
}

#latest-posts .latest-blog article .title a:before{
	content: "";
	display: block;
	position: absolute; top: -0.5rem; bottom: 0; left: 0; right: 0;
	border: 0rem solid #70BBC6;
}

#latest-posts .latest-blog article:hover .title a:before{
    border-width: 0.3rem;
}

#latest-posts .latest-blog article .details{
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

#latest-posts .latest-blog article .details li{
    display: inline;
}

#latest-posts .latest-blog article .details li:not(:last-of-type):after{
	content: " | ";
}

#latest-posts .latest-blog article .details span{
    display: none;
}

#latest-posts .latest-blog .more{
	text-align: center;
}

#latest-posts .latest-blog .more a:after{
	content: "\f054";
    font-family: icon-font;
    font-weight: 400;
    display: inline-block;
    margin-left: 1rem;
    text-decoration: none;
}

#latest-posts .latest-news .articles{
	margin: 3rem 0;
	border-bottom: 0.5rem solid #F6AE28;
}

#latest-posts .latest-news article{
	height: 100%;
    background-color: #f3f5f9;
    overflow: hidden;
    position: relative;
	border-top: 0.5rem solid #F6AE28;
}

#latest-posts .latest-news article > .inner{
    margin: 3rem 0;
    padding: 0 3rem;
}

#latest-posts .latest-news article .title{
	margin: 1rem 0;
}

#latest-posts .latest-news article .title a{
    color: inherit;
    font-weight: inherit;
	text-decoration: none;
}

#latest-posts .latest-news article .title a:hover,
#latest-posts .latest-news article .title a:focus{
    color: #0058A6;
	text-decoration: underline;
}

#latest-posts .latest-news article .title a:before{
	content: "";
	display: block;
	position: absolute; top: -0.5rem; bottom: 0; left: 0; right: 0;
	border: 0 solid #F6AE28;
}

#latest-posts .latest-news article:hover .title a:before{
    border-width: 0.3rem;
	border-bottom: 0;
}

#latest-posts .latest-news article .details{
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

#latest-posts .latest-news article .details li{
    display: inline;
}

#latest-posts .latest-news article .details li:not(:last-of-type):after{
	content: " | ";
}

#latest-posts .latest-news article .details span{
    display: none;
}

#latest-posts .latest-news .more{
	text-align: center;
}

#latest-posts .latest-news .more a:after{
	content: "\f054";
    font-family: icon-font;
    font-weight: 400;
    display: inline-block;
    margin-left: 1rem;
    text-decoration: none;
}

@media screen and (max-width: 75em) {
	#latest-posts .left,
	#latest-posts .right{
		display: block;
		width: auto;
		margin: 5rem 0;
		padding: 0;
	}
}

@media screen and (max-width: 45em) {
	#latest-posts .latest-blog .column{
		width: 100%;
	}
}

/* CATEGORIES */
#categories{
    background-color: #f3f5f9;
    overflow: visible;
    z-index: 1;
}

#categories > .inner{
    margin: 0 auto;
	padding: 1.5rem 3rem;
}

#categories .left{
    display: inline-block; vertical-align: middle;
    width: 11rem;
    margin-right: -11rem;
    position: relative; z-index: 1;
}

#categories .right{
    display: inline-block; vertical-align: middle;
    width: 100%;
    padding-left: 11rem;
    box-sizing: border-box;
}

#categories .left > .inner,
#categories .right > .inner{
    margin: 0.5rem 0;
}

#categories h3{
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

#categories .categories-toggle{
    display: block;
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    border: none;
    position: relative;
}

#categories .categories-toggle:hover,
#categories .categories-toggle:focus{
    background-color: #0058A6;
    color: #ffffff;
    border: none;
}

#categories .categories-toggle:before{
    display: none;
}

#categories .categories-toggle span{
    display: inline-block; vertical-align: middle;
    width: 100%;
    padding-right: 5rem;
    box-sizing: border-box;
    margin-right: -5rem;
}

#categories .categories-toggle span span{
    padding: 1rem;
    background: #ffffff;
    color: #000000;
}

#categories .categories-toggle:after{
    content:"\f107";
    font-family: icon-font;
	font-weight: 400;
    display: inline-block; vertical-align: middle;
    width: 5rem;
    text-align: center;
}

#categories nav{
    position: relative;
}

#categories .categories{
    display: none;
    position: absolute; top: 0; left: 0; z-index: 1;
    width: 100%;
	list-style: none;
    margin: 0;
    padding: 0;
    background: #f3f5f9;
    box-shadow: 0 0 1rem rgba(0,0,0,0.2);
}

#categories .categories > li{
	margin: 0;
}

#categories .categories a{
    display: block;
    padding: 1rem;
    color: #000000;
    text-decoration: none;
    font-weight: normal;
}

#categories .categories a:hover,
#categories .categories a:focus{
    background-color: #0058A6;
    color: #ffffff;
}

@media screen and (max-width: 40em) {
	#categories .left,
	#categories .right{
		width: 100%;
		margin: 0;
		padding: 0;
	}
}

.no-js #categories{
	overflow: hidden;
}

.no-js #categories > .inner{
	margin: 5rem auto;
	padding: 0 3rem;
}

.no-js #categories .left,
.no-js #categories .right{
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
}

.no-js #categories h3{
	font-size: 3rem;
	line-height: 1.4em;
	font-weight: 700;
	margin: 3rem 0 2rem 0;
}

.no-js #categories .categories{
	display: block;
	position: static;
    box-shadow: none;
}

.no-js #categories .categories-toggle{
	display: none;
}

/* ARCHIVE HEADER */
#archive-header .image{
	display: inline-block; vertical-align: top;
	width: 100%;
	padding-left: 50%;
	box-sizing: border-box;
	margin: -3rem -100% -3rem 0;
}
#archive-header .content{
	display: inline-block;
	width: 50%;
	margin: -3rem 0;
}

#archive-header .image > .inner,
#archive-header .content > .inner{
	margin: 3rem 0;
	padding: 0 1.5rem;
}

#archive-header .image img{
	width: 100%;
}

@media screen and (max-width: 60em) {
    #archive-header .image,
    #archive-header .content{
        display: block;
        width: auto;
        margin: 0;
        padding: 0;
    }
	#archive-header .image > .inner,
	#archive-header .content > .inner{
        margin: 0;
		padding: 0;
	}
}

/* ARCHIVE FILTER */
#archive-filter{
    background-color: #f3f5f9;
}

#archive-filter .content{
	margin-bottom: -3rem;
}

#archive-filter .content > .inner{
	margin: 3rem auto;
}

#archive-filter .buttons{
	display: none;
}

#archive-filter .buttons button{
	display: none;
	width:100%;
	background-color: transparent;
	color: #000000;
}

#archive-filter .buttons button:hover,
#archive-filter .buttons button:focus{
	color: #0058A6;
}

#archive-filter .buttons button:before{
	display: none;
}

#archive-filter .buttons .open-button:after{
	content: "\f067";
    font-family: icon-font;
	font-weight: 400;
    margin-left: 1rem;
	line-height: 1em;
}

#archive-filter .buttons .close-button:after{
	content: "\f00d";
    font-family: icon-font;
	font-weight: 400;
    margin-left: 1rem;
	line-height: 1em;
}

#archive-filter form > .inner{
    margin: 3rem auto;
	padding: 0 3rem;
}

#archive-filter form .fields{
	margin: -1rem;
}

#archive-filter form .field{
	display: inline-block; vertical-align: bottom;
	width: 33.33%;
	padding: 1rem;
	box-sizing: border-box;
}

#archive-filter form .field.small{
	width: 16.66%;
}

#archive-filter form label{
	display: block;
}

#archive-filter form button{
	width: 100%;
	padding: 1.4rem 3rem;
}

#archive-filter form button:after{
    content: "\f00c";
    font-family: icon-font;
	font-weight: 400;
    margin-left: 1rem;
}

@media screen and (max-width: 60em) {
	#archive-filter .content{
		margin-bottom: 0;
	}
	#archive-filter .buttons{
		display: block;
	}
	#archive-filter .buttons .open-button{
		display: block;
	}
	#archive-filter .reveal{
		display: none;
	}
	#archive-filter form .field{
		width: 100%;
	}
	#archive-filter form .field.small{
		width: 50%;
	}
}

/* ARCHIVE */
#archive .post{
	margin: 3rem 0;
}

#archive .show-more{
    text-align: center;
}

#archive .show-more .button:after{
    content: "\f067";
    font-family: icon-font;
	font-weight: 400;
    margin-left: 1rem;
	line-height: 1em;
}

/* BLOG */
#blog .articles{
	margin: 5rem 0;
}

#blog .columns{
	display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin: -2.5rem -1.5rem;
}

#blog .column{
	flex: auto;
    width: 33.33%;
    padding: 2.5rem 1.5rem;
    box-sizing: border-box;
}

#blog article{
	height: 100%;
    background-color: #f3f5f9;
    overflow: hidden;
    position: relative;
    box-shadow: 0rem 0rem 1rem rgba(0,0,0,0.2);
	border-top: 0.5rem solid #70BBC6;
}

#blog article .thumbnail{
	position: relative;
	background-color: #70BBC6;
    background-image: url(../img/placeholder-post.svg);
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#blog article .thumbnail:before{
	content: "";
	display: block;
	padding-bottom: 60%;
}

#blog article .thumbnail img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
}

#blog article .content > .inner{
    margin: 3rem 0;
    padding: 0 3rem;
}

#blog article .title{
	margin: 1rem 0;
}

#blog article .title a{
    color: inherit;
    font-weight: inherit;
	text-decoration: none;
}

#blog article .title a:hover,
#blog article .title a:focus{
    color: #0058A6;
	text-decoration: underline;
}

#blog article .title a:before{
	content: "";
	display: block;
	position: absolute; top: -0.5rem; bottom: 0; left: 0; right: 0;
	border: 0rem solid #70BBC6;
}

#blog article:hover .title a:before{
    border-width: 0.3rem;
}

#blog article .details{
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

#blog article .details li{
    display: inline;
}

#blog article .details li:not(:last-of-type):after{
	content: " | ";
}

#blog article .details span{
    display: none;
}

#blog article .tags{
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

#blog article .tags li{
    display: inline;
}

#blog article .tags li:not(:last-of-type):after{
	content: " / ";
}

#blog article .tags a{
	position: relative; z-index: 1;
	text-decoration: none;
}

#blog article .tags a:hover,
#blog article .tags a:focus{
	text-decoration: underline;
}

#blog .show-more{
	margin: 5rem 0;
    text-align: center;
}

#blog .show-more .button:after{
    content: "\f067";
    font-family: icon-font;
	font-weight: 400;
    margin-left: 1rem;
	line-height: 1em;
}

@media screen and (max-width: 75em) {
	#blog .column{
		width: 50%;
	}
}

@media screen and (max-width: 45em) {
	#blog .column{
		width: 100%;
	}
}

/* PROMISING PRACTICES */
#promising-practices article{
	margin: 3rem 0;
	position: relative;
	background-color: #f3f5f9;
	border-top: 0.5rem solid #F76B25;
    box-shadow: 0rem 0rem 1rem rgba(0,0,0,0.2);
}

#promising-practices article .thumbnail{
	display: inline-block; vertical-align: top;
	width: 40%;
	margin-right: -40%;
}

#promising-practices article .thumbnail:before{
	content: "";
	display: block;
	padding-bottom: 60%;
}

#promising-practices article .thumbnail > .inner{
	position: absolute; top: 0; bottom: 0; left: 0;
	width: 40%;
	background-color: #b6b8bb;
    background-size: cover;
    background-position: center;
}

#promising-practices article .thumbnail img{
	width: 100%; height: 100%;
    object-fit: cover;
}

#promising-practices article .content{
	display: inline-block; vertical-align: top;
	width: 100%;
	padding-left: 40%;
	box-sizing: border-box;
}

#promising-practices article .content > .inner{
	margin: 3rem 0;
	padding: 0 3rem;
}

#promising-practices article .title{
	margin: 1rem 0;
}

#promising-practices article .title a{
    color: inherit;
    font-weight: inherit;
	text-decoration: none;
}

#promising-practices article .title a:hover,
#promising-practices article .title a:focus{
    color: #0058A6;
	text-decoration: underline;
}

#promising-practices article .title a:before{
	content: "";
	display: block;
	position: absolute; top: -0.5rem; bottom: 0; left: 0; right: 0;
	border: 0rem solid #F76B25;
}

#promising-practices article:hover .title a:before{
    border-width: 0.3rem;
}

#promising-practices article .details{
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

#promising-practices article .details li{
    display: inline;
}

#promising-practices article .details li:not(:last-of-type):after{
	content: " | ";
}

#promising-practices article .details span{
    display: none;
}

#promising-practices article .tags{
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

#promising-practices article .tags li{
    display: inline;
}

#promising-practices article .tags li:not(:last-of-type):after{
	content: " / ";
}

#promising-practices article .tags a{
	position: relative; z-index: 1;
	text-decoration: none;
}

#promising-practices article .tags a:hover,
#promising-practices article .tags a:focus{
	text-decoration: underline;
}

#promising-practices .show-more{
    text-align: center;
}

#promising-practices .show-more .button:after{
    content: "\f067";
    font-family: icon-font;
	font-weight: 400;
    margin-left: 1rem;
	line-height: 1em;
}

@media screen and (max-width: 60em) {
	#promising-practices article .thumbnail{
		width: 100%;
		margin: 0;
		position: relative;
	}
	#promising-practices article .thumbnail > .inner{
		width: 100%;
	}
	#promising-practices article .content{
		width: 100%;
		padding: 0;
	}
}

/* TACL RESOURCES */
#tacl-resources article{
	margin: 3rem 0;
	position: relative;
	background-color: #f3f5f9;
	border-top: 0.5rem solid #b1364e;
    box-shadow: 0rem 0rem 1rem rgba(0,0,0,0.2);
}

#tacl-resources article .thumbnail{
	display: inline-block; vertical-align: top;
	width: 40%;
	margin-right: -40%;
}

#tacl-resources article .thumbnail:before{
	content: "";
	display: block;
	padding-bottom: 60%;
}

#tacl-resources article .thumbnail > .inner{
	position: absolute; top: 0; bottom: 0; left: 0;
	width: 40%;
	background-image: url(../img/placeholder-tacl.jpg);
	background-color: #000000;
    background-size: contain;
    background-position: center;
}

#tacl-resources article .thumbnail img{
	width: 100%; height: 100%;
    object-fit: cover;
}

#tacl-resources article .content{
	display: inline-block; vertical-align: top;
	width: 100%;
	padding-left: 40%;
	box-sizing: border-box;
}

#tacl-resources article .content > .inner{
	margin: 3rem 0;
	padding: 0 3rem;
}

#tacl-resources article .title{
	margin: 1rem 0;
}

#tacl-resources article .title a{
    color: inherit;
    font-weight: inherit;
	text-decoration: none;
}

#tacl-resources article .title a:hover,
#tacl-resources article .title a:focus{
    color: #0058A6;
	text-decoration: underline;
}

#tacl-resources article .title a:before{
	content: "";
	display: block;
	position: absolute; top: -0.5rem; bottom: 0; left: 0; right: 0;
	border: 0rem solid #b1364e;
}

#tacl-resources article:hover .title a:before{
    border-width: 0.3rem;
}

#tacl-resources article .details{
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

#tacl-resources article .details li{
    display: inline;
}

#tacl-resources article .details li:not(:last-of-type):after{
	content: " | ";
}

#tacl-resources article .details span{
    display: none;
}

#tacl-resources article .tags{
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

#tacl-resources article .tags li{
    display: inline;
}

#tacl-resources article .tags li:not(:last-of-type):after{
	content: " / ";
}

#tacl-resources article .tags a{
	position: relative; z-index: 1;
	text-decoration: none;
}

#tacl-resources article .tags a:hover,
#tacl-resources article .tags a:focus{
	text-decoration: underline;
}

#tacl-resources .show-more{
    text-align: center;
}

#tacl-resources .show-more .button:after{
    content: "\f067";
    font-family: icon-font;
	font-weight: 400;
    margin-left: 1rem;
	line-height: 1em;
}

@media screen and (max-width: 60em) {
	#tacl-resources article .thumbnail{
		width: 100%;
		margin: 0;
		position: relative;
	}
	#tacl-resources article .thumbnail > .inner{
		width: 100%;
	}
	#tacl-resources article .content{
		width: 100%;
		padding: 0;
	}
}

/* SEARCH FORM */
#search-form{
    background-color: #f3f5f9;
}

#search-form > .inner{
    margin: 0 auto;
    margin: 1.5rem auto;
    padding: 0 3rem;
}

#search-form .fields{
	margin: -1rem;
}

#search-form .field{
    display: inline-block; vertical-align: bottom;
	padding: 1rem;
	box-sizing: border-box;
}

#search-form .field:nth-child(1){
    width: calc(100% - 85rem);
}

#search-form .field:nth-child(2){
    width: 45rem;
}

#search-form .field:nth-child(3){
    width: 20rem;
}

#search-form .field:nth-child(4){
    width: 20rem;
}

#search-form .web-field{
	margin: 1rem 0;
    padding-left: 4rem;
    position: relative;
}

#search-form .web-field input{
	position: absolute; top: 50%; left: 0;
	margin-top: -1.5rem;
}

#search-form button{
    width: 100%;
    padding: 1.4rem 3rem;
}

#search-form button:after{
    content: "\f002";
    font-family: icon-font;
	font-weight: 400;
    margin-left: 1rem;
}

@media screen and (max-width: 75em){
    #search-form .field:nth-child(1),
	#search-form .field:nth-child(3){
        width: calc(100% - 45rem);
    }
	#search-form .field:nth-child(2),
	#search-form .field:nth-child(4){
        width: 45rem;
    }
}

@media screen and (max-width: 60em){
    #search-form .field:nth-child(1),
	#search-form .field:nth-child(2),
	#search-form .field:nth-child(3),
	#search-form .field:nth-child(4){
        width:100%;
    }
	#search-form .web-field{
		margin: 0;
	}
}

/* SEARCH */
#search article{
    margin: 3rem 0;
	position: relative;
}

#search article:after{
    content: "";
    display:block;
    margin: 3rem 0;
	background-color:#165673;
	height: 0.3rem;
}

#search article.blog:after{
	background-color:#70BBC6;
}

#search article.ncmm_news:after{
	background-color:#F6AE28;
}

#search article.ncmm_resource:after{
	background-color:#0058A6;
}

#search article.ncmm_webinar:after{
	background-color:#4973f2;
}

#search article.ncmm_media:after{
	background-color:#F76B25;
}

#search article.promising-practice:after{
	background-color:#F76B25;
}

#search article.tacl_resource:after{
	background-color:#b1364e;
}

#search article .type:before{
    content: "\f0c1";
    font-family: icon-font;
    font-weight: 400;
    margin-right: 1rem;
    color:#165673;
}

#search article.page .type:before{
    content: "\f37e";
}

#search article.pdf .type:before{
    content: "\f1c1";
}

#search article.powerpoint .type:before{
    content: "\f1c4";
}

#search article.word .type:before{
    content: "\f1c2";
}

#search article.excel .type:before{
    content: "\f65b";
}

#search article.blog .type:before{
    content: "\f781";
    color:#70BBC6;
}

#search article.ncmm_news .type:before{
    content: "\f1ea";
    color:#F6AE28;
}

#search article.ncmm_resource .type:before{
    content: "\f1c5";
    color:#0058A6;
}

#search article.ncmm_webinar .type:before{
    content: "\f63d";
    color:#4973f2;
}

#search article.tribe_events .type:before{
  content: "\f783";
    color:#4973f2;
}

#search article.ncmm_media .type:before{
    content: "\f04b";
    color:#F76B25;
}

#search article.promising-practice .type:before{
    content: "\f02d";
    color:#F76B25;
}

#search article.tacl_resource .type:before{
    content: "\f02d";
    color:#b1364e;
}

#search article .title{
    display: block;
    margin: 0;
}

#search article .title a{
    display: block;
    margin: 1rem 0;
    color: inherit;
	font-weight: inherit;
    text-decoration: none;
}

#search article .title a:hover,
#search article .title a:focus{
    color: #0058A6;
	text-decoration: underline;
}

#search article .title a:before{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

#search article .url{
    display: block;
    margin: 0;
}

#search article .description{
    margin: 1rem 0;
}

#search .show-more{
    text-align: center;
}

/* PAGE */
#page .sidebar{
    overflow: hidden;
    margin: -5rem 0;
}

#page .sidebar > .left{
    display: inline-block; vertical-align: top;
    width: 100%;
    padding-right: 35rem;
    box-sizing: border-box;
    margin-right: -32rem;
}

#page .sidebar > .right{
    display: inline-block; vertical-align: top;
    width: 32rem;
}

#page .sidebar > .left > .inner,
#page .sidebar > .right > .inner{
    margin: 5rem 0;
}

#page .content h1,
#page .content h2,
#page .content h3,
#page .content h4,
#page .content h5,
#page .content h6{
	margin: 5rem 0 2rem 0;
}

@media screen and (max-width: 60em) {
    #page .sidebar > .left,
    #page .sidebar > .right{
        display: block;
        width: auto;
        margin: 0;
        padding: 0;
    }
}

/* POST */
#post .details{
	list-style: none;
	margin: 2rem 0;
	padding: 0;
}

#post .details li{
    display: inline;
}

#post .details li:not(:last-of-type):after{
	content: " | ";
}

#post .details span{
    display: none;
}

#post .tags{
	list-style: none;
	margin: 2rem 0;
	padding: 0;
}

#post .tags li{
    display: inline;
}

#post .tags li:not(:last-of-type):after{
	content: " / ";
}

/* #post .content p:first-of-type{ */
/*     font-size: 2.4rem; */
/*     line-height: 1.5em; */
/* } */

#post .content h1,
#post .content h2,
#post .content h3,
#post .content h4,
#post .content h5,
#post .content h6{
	margin: 5rem 0 2rem 0;
}

#post .external-link:before{
    content: "\f35d";
    font-family: icon-font;
    font-weight: 400;
	display: inline-block;
    margin-right: 1rem;
	text-decoration: none;
}

/* SHARE */
#share:before{
	content: "";
    display:block;
    margin: 5rem 0;
	background-color:#f3f5f9;
	height: 0.1rem;
}

#share ul{
    list-style: none;
    margin: -1rem;
    padding: 0;
}

#share ul > li{
    display: inline-block; vertical-align: middle;
    margin: 0;
    padding: 1rem;
}

#share a{
    display: inline-block; vertical-align: middle;
    text-decoration: none;
}

#share a:before{
    display: inline-block; vertical-align: middle;
    width: 5rem;
    height: 5rem;
    margin-right: 1rem;
    border-radius: 50%;
    text-align: center;
    font-size: 2rem;
    line-height: 5rem;
    background-color: #165673;
    color: #ffffff;
    transition: background-color 0.2s;
}

#share a:hover:before,
#share a:focus:before{
    background-color: #0058A6;
}

#share .twitter a:before{
    content: "\f099";
    font-family: brands-font;
	font-weight: 400;
}

#share .linkedin a:before{
    content: "\f0e1";
    font-family: brands-font;
	font-weight: 400;
}

#share .email a:before{
    content: "\f2b6";
    font-family: icon-font;
	font-weight: 400;
}

/* TAGS */
#tags:before{
	content: "";
    display:block;
    margin: 5rem 0;
	background-color:#f3f5f9;
	height: 0.1rem;
}

#tags ul{
    list-style: none;
    margin: -0.5rem;
    padding: 0;
}

#tags ul > li{
    display: inline-block; vertical-align: middle;
    margin: 0.5rem;
}

#tags a{
    display: inline-block; vertical-align: middle;
    padding: 1rem;
    background-color: #165673;
    color: #ffffff;
    text-decoration: none;
}

#tags a:hover,
#tags a:focus{
    background-color: #0058A6;
}

/* RELATED */
#related:before{
	content: "";
    display:block;
    margin: 5rem 0;
	background-color:#f3f5f9;
	height: 0.1rem;
}

/* SIDEBAR */
#sidebar .widget{
    margin: 5rem 0;
    background-color: #f3f5f9;
    border-top: 0.5rem solid #165673;
    overflow: hidden;
}

#sidebar .widget > .inner{
    margin: 3rem 0;
    padding: 0 3rem;
}

#sidebar .widget ul{
    margin: 2rem 0;
}

#sidebar .widget ul a{
    text-decoration: none;
}

#sidebar .widget ul a:hover,
#sidebar .widget ul a:focus{
    text-decoration: underline;
}

#sidebar .widget:nth-child(2){
    background-color: #165673;
    color: #ffffff;
    border-color: #70BBC6;
}

#sidebar .widget:nth-child(2) ul > li::marker{
    color: #70BBC6;
}

#sidebar .widget:nth-child(2) ul a{
    color: #ffffff;
}

#sidebar .widget:nth-child(2) ul a:hover,
#sidebar .widget:nth-child(2) ul a:focus{
    color: #ffffff;
}

/* CONTACT */
#contact{
    text-align: center;
    font-size: 2.5rem;
    line-height: 1.4em;
    background-color: #F6AE28;
    background-image: url(../img/yellow-circles.svg);
    background-position: bottom right;
    background-repeat: no-repeat;
}

#contact > .inner{
    max-width: 80rem;
}

#contact a{
    color: #000000;
	text-decoration: none;
}

#contact a:hover,
#contact a:focus{
	text-decoration: underline;
}

@media screen and (max-width: 60em){
   	#contact{
		font-size: 2.2rem;
		line-height: 1.4em;
	}
}

/* REGISTER */
#register form .header{
    text-align: right;
    margin-bottom: -2rem;
}

#register form .required{
    display: inline-block; vertical-align: top;
    height: 0;
    font-size: 2.8rem;
    font-weight: 700;
    color: #165673;
}

#register form .details,
#register form .expertise{
    display: flow-root;
    margin: 3rem 0;
    background-color: #f3f5f9;
}

#register form fieldset{
	min-width: 0;
    margin: 3rem 0;
    padding: 0;
    border: 0;
}

#register form fieldset legend{
    margin: 0;
    padding: 0 3rem;
}

#register form fieldset > .inner{
    margin-top: 3rem;
    padding: 0 3rem;
}

#register form .columns{
    margin: -1rem;
    display: flex; flex-wrap: wrap;
}

#register form .column{
	flex: auto;
    width: 50%;
    padding: 1rem;
    box-sizing: border-box;
}

#register form .column.wide{
    width: 100%;
}

#register form .checkbox-field{
    display: flex; align-items: center;
}

#register form .checkbox-field input{
    margin-right: 1rem;
    flex-shrink: 0;
}

#register form .password-strength::before{
	content: "";
	display: block;
	height: 5.4rem;
    font-size: 1.8rem;
    line-height: 5.4rem;
	text-align: center;
    background: #ffffff;
}

#register form .password-strength[data-strength="weak"]::before{
	content: "Weak";
    background: #F76B25;
}

#register form .password-strength[data-strength="medium"]::before{
	content: "Medium";
    background: #F6AE28;
}

#register form .password-strength[data-strength="strong"]::before{
	content: "Strong";
    background: #70BBC6;
}

#register form .submit{
    margin: 3rem 0;
}

#register form .success{
    display: flow-root;
    margin: 3rem 0;
    background-color: #165673;
    color: #ffffff;
}

#register form .success > .inner{
    margin: 3rem 0;
    padding: 0 3rem;
}

#register form .success h2{
    color: #ffffff;
}

#register form .success a{
    color: #70BBC6;
    text-decoration: underline;
}

#register form .success a:hover{
    color: #ffffff;
}

#register form .error{
    display: flow-root;
    margin: 3rem 0;
    background-color: #F76B25;
}

#register form .error > .inner{
    margin: 3rem 0;
    padding: 0 3rem;
}

#register form .tooltip{
    display: inline-block; vertical-align: middle;
    position: relative;
	margin-top: -0.5rem;
    font-size: 1.8rem;
    line-height: 1.5em;
    font-weight: 400;
}

#register form .tooltip button{
    display: block;
    position: relative;
    margin: -1rem;
    padding: 1rem;
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
}

#register form .tooltip button::before{
    content: "\f129";
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 0.1rem solid #165673;
    text-align: center;
    font-family: icon-font;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 2.5rem;
    color: #165673;
    cursor: pointer;
}

#register form .tooltip button:hover::before,
#register form .tooltip button:focus::before,
#register form .tooltip.active button::before{
    background-color: #165673;
    color: #ffffff;
}

#register form .tooltip button span{
    display: none;
}

#register form .tooltip.active button::after{
    content: "";
    display: block;
    position: absolute; left: 0; right: 0;
    width: 0;
    margin: -4.5rem auto 0 auto;
    border-left: 1.5rem solid transparent;
    border-right: 1.5rem solid transparent;
    border-top: 1.5rem solid #165673;
}

#register form .tooltip .reveal{
    display: block;
    position: absolute; left: -15rem; right: -15rem; z-index: 1;
    margin-top: -4.5rem;
    padding: 2rem;
    border-radius: 1rem;
    outline: 0;
    transform: translateY(-100%);
    background-color: #165673;
    color: #ffffff;
    visibility: hidden;
}

#register form .tooltip.active .reveal{
    visibility: inherit;
}

@media screen and (max-width: 60em) {
    #register form .column{
        width: 100%;
    }
    #register form .tooltip{
        position: static;
    }
    #register form .tooltip .reveal{
        left: 3rem; right: 3rem;
    }
}

/* TA REQUEST SUBMIT */
#ta-request-submit form .header{
    text-align: right;
    margin-bottom: -2rem;
}

#ta-request-submit form .required{
    display: inline-block; vertical-align: top;
    height: 0;
    font-size: 2.8rem;
    font-weight: 700;
    color: #165673;
}

#ta-request-submit form .box{
    display: flow-root;
    margin: 3rem 0;
    background-color: #f3f5f9;
}

#ta-request-submit form fieldset{
	min-width: 0;
    margin: 3rem 0;
    padding: 0;
    border: 0;
}

#ta-request-submit form fieldset legend{
    margin: 0;
    padding: 0 3rem;
}

#ta-request-submit form fieldset > .inner{
    margin-top: 3rem;
    padding: 0 3rem;
}

#ta-request-submit form .columns{
    margin: -1rem;
    display: flex; flex-wrap: wrap;
}

#ta-request-submit form .column{
	flex: auto;
    width: 50%;
    padding: 1rem;
    box-sizing: border-box;
}

#ta-request-submit form .column.wide{
    width: 100%;
}

#ta-request-submit form .checkbox-field{
    display: flex; align-items: center;
}

#ta-request-submit form .checkbox-field input{
    margin-right: 1rem;
    flex-shrink: 0;
}

#ta-request-submit form .submit{
    margin: 3rem 0;
}

#ta-request-submit form .success{
    display: flow-root;
    margin: 3rem 0;
    background-color: #165673;
    color: #ffffff;
}

#ta-request-submit form .success > .inner{
    margin: 3rem 0;
    padding: 0 3rem;
}

#ta-request-submit form .success h2{
    color: #ffffff;
}

#ta-request-submit form .success a{
    color: #70BBC6;
    text-decoration: underline;
}

#ta-request-submit form .success a:hover{
    color: #ffffff;
}

#ta-request-submit form .error{
    display: flow-root;
    margin: 3rem 0;
    background-color: #F76B25;
}

#ta-request-submit form .error > .inner{
    margin: 3rem 0;
    padding: 0 3rem;
}

@media screen and (max-width: 60em) {
    #ta-request-submit form .column{
        width: 100%;
    }
}

/* FOOTER */
#footer{
    background-color: #165673;
    background-image: url(../img/purple-circles.svg);
    background-position: top right;
    background-repeat: no-repeat;
    color: #ffffff;
}

#footer a,
#footer a:hover,
#footer a:focus{
    color: #ffffff;
}

#footer .button{
    background-color:#ffffff;
    color:#165673;
}

#footer .button:before{
    border-color: #ffffff;
    background-color:#165673;
}

#footer .button:hover,
#footer .button:focus{
    color: #ffffff;
}

#footer .grid-item{
    width: 33.33%;
}

#footer .popular ul{
	list-style: none;
    padding-left: 2rem;
}

#footer .popular ul > li::before{
    content: "\f105";
	display: inline-block; vertical-align: middle;
	font-family: icon-font;
	font-weight: 400;
    width: 2rem;
    margin-left: -2rem;
    font-size: inherit;
    color: #ffffff;
}

#footer .popular a{
    text-decoration: none;
}

#footer .popular a:hover,
#footer .popular a:focus{
    text-decoration: underline;
}

#footer .contact p{
    margin: 0;
}

#footer .social ul{
    margin: 2rem 0;
    padding: 0;
}

#footer .social ul > li{
	list-style: none;
    margin: 1rem 0;
}

#footer .social a{
    display: inline-block; vertical-align: middle;
    text-decoration: none;
}

#footer .social a:hover,
#footer .social a:focus{
    text-decoration: underline;
}

#footer .social a:before{
    display: inline-block; vertical-align: middle;
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;
    border-radius: 50%;
    text-align: center;
    font-size: 2rem;
    line-height: 4rem;
    background-color: #ffffff;
    color: #165673;
}

#footer .social .twitter a:before{
    font-family: brands-font;
	font-weight: 400;
    content: "\f099";
}

#footer .social .linkedin a:before{
    font-family: brands-font;
	font-weight: 400;
    content: "\f0e1";
}

#footer .social .vimeo a:before{
    font-family: brands-font;
	font-weight: 400;
    content: "\f27d";
}

#footer .social .mastodon a:before{
    font-family: brands-font;
	font-weight: 400;
    content: "\f4f6";
}

@media screen and (max-width: 60em) {
    #footer .grid-item{
        width: 100%;
    }
}

/* FOOTER MENU */
#footer-menu{
    background-color: #104760;
    color: #ffffff;
    text-align: center;
}

#footer-menu > .inner{
    margin: 0 auto;
    padding: 0;
}

#footer-menu ul{
    list-style: none;
    margin: 0.5rem 0;
    padding: 0 0.5rem;
}

#footer-menu li{
    display: inline;
    margin: 0;
    padding: 0;
}

#footer-menu li:not(:last-of-type):after{
    content: " | ";
	vertical-align: middle;
}

#footer-menu a{
    display: inline-block; vertical-align: middle;
    padding: 0.5rem;
    text-decoration: none;
    color: #ffffff;
}

#footer-menu a:hover,
#footer-menu a:focus{
    text-decoration: underline;
}

/* DISCLAIMER */
#disclaimer{
    text-align: center;
}

#disclaimer > .inner{
    margin: 2rem auto;
}

/* BUDDYPRESS FIXES */
#buddypress .button:before{
	display: inline-block; vertical-align: middle;
    position: static;
    border: 0;
    background-color: transparent;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

#buddypress .checkbox{
	display: block;
    width: auto;
    height: auto;
    border: 0;
    background-color: transparent;
    color: currentColor;
	cursor: default;
}

#buddypress .bb-single-main-nav--vertical li{
	float: none;
}

#buddypress .bb-single-nav-item-point{
	display: inline;
}

#buddypress #bp-message-thread-list li{
	box-sizing: border-box;
}

#buddypress table.notification-settings{
	width: 100%;
}

#buddypress #item-header #cover-image-container{
	z-index: 0;
}

#buddypress #item-header #item-header-content{
	margin-top: 20px;
	margin-bottom: 20px;
}

#buddypress #item-header #item-header-content h2{
    display: none;
}

#buddypress #item-header #item-header-content .bp-group-type,
#buddypress #item-header #item-header-content .last-activity,
#buddypress #item-header #item-header-content .bp-group-status{
	display: none;
}

#buddypress #group-invites-container{
	border: 0;
	flex-wrap: wrap;
}

#buddypress #group-invites-container .bp-invites-nav{
	width: 100%;
}

#buddypress #activity-stream .bbp_reply_create .activity-content .activity-inner, 
#buddypress #activity-stream .bbp_topic_create .activity-content .activity-inner,
#buddypress #activity-stream .blogs .activity-content .activity-inner{
	float: left;
}

#buddypress #activity-stream .activity-list .bb-activity-more-options-wrap{
	z-index: 1;
}

/* Buddy Boss Forums  */
#bbpress-forums .bbp-forum-content-wrap,
#bbpress-forums .bp-feedback,
#bbpress-forums .bp-pagination{
	clear: both;
}

#bbpress-forums .bbp-search-form .button,
#bbpress-forums .bbp-search-form .button::before{
	all: revert;
}

#bbpress-forums li {
    background: none;
    margin: 0;
    list-style: none;
}

#bbpress-forums #whats-new-toolbar{
	padding: 0;
}

#bbpress-forums #whats-new-toolbar .medium-editor-toolbar{
	position: relative;
}

#bbpress-forums #whats-new-toolbar + p{
	display: none;
}

#bbpress-forums #new-post .bb_discard_topic_reply_draft{
	display: none;
}

#bbpress-forums #new-post .checkbox{
	all: revert;
}

/* Buddy Boss Registration  */
div.subnav-filters > ul {
  padding-left: 0;
}

#basic-details-section > p > label > input[type=checkbox] {
  -webkit-appearance: auto !important;
}

div.bp-radio-wrap > label {
    display: inline-block !important;
}

#wpadminbar {
  background: #165673 !important;
}

div.register-section > div > fieldset > select {
  width: 100%;
}

div.bb-password-wrap > input#signup_password {
  width: 94%;
}

.buddypress-wrap .standard-form .bp-checkbox-wrap label{
	display: inline;
}

@media screen and (min-width: 46.8em) {
  .bp-single-vert-nav .bp-navs.vertical {
    width: 18% !important;
  }
	
  .members-directory-wrapper .bp-profile-search-widget {
    flex: 0 0 400px !important;
    min-width: 0;
    margin-left: 30px;
  }

  div.members-directory-wrapper > aside > form > div.bps-multiselectbox {
    width: 427px;
  }

}

select[aria-describedby="field_11-3"] {
  width: 100%;
}

/* indent registration bullet list */

ul#registration-preamble-bullet-list {
  padding-left: 40px;
}