/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #00A9E8;
    color: white;
    text-shadow: none;
}

::selection {
    background: #00A9E8;
    color: white;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

strong { font-weight: normal; }

.lazy-loaded {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    opacity: 1;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    filter: alpha(opacity=100);
}

.lazy-hidden {
    opacity: 0;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
    filter: alpha(opacity=0);
}

img.lazy {
    font-size: .75em;
    color: #444;
    text-align: center;
    opacity: .2;
    min-height: 2.5em;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

*, *:before, *:after {
    box-sizing: border-box;  
}

h1,h2,h3,h4,h5,h6 { font-weight: normal; }

html,body,div,h1,h2,h3,h4,h5,h6,p,a,img,figure {
    font-size: 100%;
    margin: 0;
    padding: 0;
    line-height: 1;
    outline: none;
}

a, a:hover, a:focus { color: inherit; text-decoration: none; }

img {
    width: 100%;
    max-width: 100%;
    display: block;
    height: auto;
}

body {
    font-family: "adelle", georgia, serif;
    font-weight: 300;
    background: #f2f2e9;
    position: relative;
    z-index: 0;
    color: #333;
    margin-top: 70px;
}

/* ARS Maquette Light */

figcaption {
    font-family: "ars-maquette-web-n3", "ars-maquette-web", sans-serif;
    font-style: normal;
    font-weight: 300;
}

/* ARS Maquette Medium */

.we-raised a em,
.related-panels h5 {
    font-family: "ars-maquette-web-n5", "ars-maquette-web", sans-serif;
    font-style: normal;
    font-weight: 500;
}

/* ARS Maquette Black */
.we-raised a strong,
.related-panels h6 {
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    font-style: normal;
    font-weight: 900;
}

/* ==========================================================================
   Site structure styles (default/desktop)
   ========================================================================== */

.header-inner,
.main-inner,
.main-nav-wrap > div,
.footer-inner,
.slider-info > div > div,
.site-introduction > div {
    width: 90%;
    margin: 0 auto;
    position: relative;
    max-width: 73.75em;/* 1180px */
}

article figure {
    margin-bottom: 3.75em;
    position: relative;
}

article figure img {
    z-index: 6;
    position: inherit;
}

/* ==========================================================================
   Header styles (default/desktop)
   ========================================================================== */

header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 1px 10px rgba(0,0,0,.5);
    -webkit-transition: height .2s;
    -moz-transition: height .2s;
    -ms-transition: height .2s;
    -o-transition: height .2s;
    transition: height .2s;
    height: 70px;
}

header h1 {
    float: left;
    height: 70px;
    display: table;
    line-height: 70px;
    position: relative;
    z-index: 10;
}

header h1 a {
    width: 240px;
    height: 41px;
    display: table-cell;
    vertical-align: middle;
}

header h1 img {
    max-width: inherit;    
    vertical-align: inherit;
}

/* ==========================================================================
   Main navigation styles (default/desktop)
   ========================================================================== */

header nav ul,
header nav li,
.mobile-navigation li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.header-inner > section {
    float: right;
}

.main-nav {
    width: auto;
    position: relative;
    text-align: center;
    z-index: 9;
    height: 70px;
}

.main-nav > ul {
    display: inline-block;

}

.main-nav li  {
    float: left;
    display: inline;
    position: relative;
    margin: 0 .5em;
}

.main-nav li a {
    display: inline-block;
    color: #2C3F6A;
    font-size: .9375em;
    font-weight: 400;
    line-height: 70px;
}

.main-nav li a:hover,
.main-nav li a:focus {
    color: #42C8EA;
}

.main-nav li a:active {
    position: relative;
    top: 1px;
}

.main-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0px;
    width: 8em;
    background: white;
    z-index: 5;
    text-align: left;
}

.main-nav li:hover > .sub-menu {
    display: block;
}

.main-nav .sub-menu li {
    float: none;
    margin: 0;
}

.main-nav .sub-menu li a {
    display: block;
    height: inherit;
    float: none;
    padding: .75em;
    line-height: 1.2;
}

.main-nav .sub-menu li a:hover,
.main-nav .sub-menu li a:focus {
    color: white;
    background: #55D6F7;
}

.search-trigger {
    float: right;
    position: relative;
    z-index: 10;
}

.search-trigger a {
    font-size: 1em;
    line-height: 70px;
    color: #2C3F6A;
}

.search-trigger a,
.main-nav li a,
.secondary-nav {
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

header,
header h1 img {
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

/* ==========================================================================
   Search form styles (default/desktop)
   ========================================================================== */

.search-section {
    top: 100%;
    z-index: 1;
}

.search-section form {
    background: #55D6F7;
    margin: 0 auto;
    width: 90%;
    max-width: 73.75em;/* 1180px */
    height: 100%;
    color: white;
    padding: .625em;
    position: relative;
    box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,.5);
}

.search-section form > div {
    position: relative;
}

input[type="text"] {
    box-sizing: border-box;
    border: none;
    padding: 0 0 0 .5em;
    margin: 0;
    color: #888;
    height: 35px;
    width: 100%;
    position: relative;
    z-index: 4;
    float: left;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

input[type="submit"] {
    background: #2C3F6A;
    border: none;
    height: 35px;
    padding: 0 1em;
    float: right;
    position: absolute;
    z-index: 5;
    right: 0;
    width: auto;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
    background: #333;
}

input[type="submit"]:active {
    background: #111;
}

::-webkit-input-placeholder {
   color: #555;
}

:-moz-placeholder { /* Firefox 18- */
   color: #555;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #555;  
}

:-ms-input-placeholder {  
   color: #555;  
}


/* ==========================================================================
   Secondary navigation styles (default/desktop)
   ========================================================================== */

.secondary-nav {
    width: 15.25423729%;
    float: right;
    height: 70px;
    margin-left: 2em;
    position: relative;
    z-index: 10;
}

.secondary-nav > ul {
    padding: .46875em 0 0;
}

.secondary-nav li {
    margin: 0 0 .3125em;
}

.secondary-nav li:last-child {
    margin: 0;
}

.secondary-nav li a {
   display: block;
   background: #e6007e;
   padding: 0 .9375em;
   border-radius: 0.3em;
   font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
   color: white;
   text-transform: uppercase;
   font-weight: 900;
   font-size: .85em;
   transition: all .1s ease-in-out;
   line-height: 25px;
   height: 25px;
}

.help-link a {
    background:#e6007e;
}

.help-link a:hover,
.help-link a:focus {
    background: #BF026A;
}

li.donate-link a {
   background: #00a9e8;
}

li.donate-link a:hover,
li.donate-link a:focus {
    background: #0283B1;
}

.secondary-nav li a:active {
   position: relative;
   top: 1px;
}

/* ==========================================================================
   Large image template
   ========================================================================== */

.page-template-large_image .main-inner {
    padding-top: 0;
}

.large-image {
    height: 400px;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
}

.large-image-title {
    height: 100%;
    background: #45eaf4;
    background: rgba(69,234,244,.85);
    min-width: 25%;
    display: table;
    text-align: center;
    padding: 0;
    position: absolute;
    z-index: 7;
    top: 0;
    left: 0;
}

.large-image h2 {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 2;
}

.large-image h2 span {
    color: white;
    font-size: 4em;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    display: inline-block;
    padding: .25em 0;
    text-align: left;
    width: 80%;
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 2em solid transparent;
    border-bottom: 2em solid transparent;
    position: absolute;
    border-left: 2em solid rgb(69,234,244);
    border-left: 2em solid rgba(69,234,244,.85);
    left: 100%;
    top: 42%;
    z-index: 1;
}

.featured-image {
    position: absolute;
    right: 0;
    width: 90%;
    z-index: 1;
    background: #DEDED3;
}

.featured-image-container {
    position: relative;
}

.featured-image-container img {
    position: relative;
    z-index: 4;
}

.image-gradient {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    background: url('../img/grad.png') repeat-y 0 0;
    height: 100%;
    width: 300px;
}

/* ==========================================================================
   Publications
   ========================================================================== */
.page-template-publications {
}

#main article ul.pub-list,
.pub-buttons {
    list-style: none;
    margin: 0 -1%;
    padding: 0;
}

.pub-buttons a,
#main article ul.pub-list li {
    float: left;
    width: 23%;
    margin: 1%;
}

.pub-buttons a {
    display: block;
    background: #00a9e8;
    padding: 1em;
    border-radius: .3em;
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: white;
    -webkit-transition: .15s background linear;
    -moz-transition: .15s background linear;
    -ms-transition: .15s background linear;
    -o-transition: .15s background linear;
    transition: .15s background linear;
    width: 31.33333337%;
}

.pub-buttons a:hover,
.pub-buttons a:focus {
    cursor: pointer;
    background: #0283B1;
}

#main .pub-list li a {
    background: white;
    display: block;
    border-radius: .3em;
    border: none;    
}

.pub-list a > div {
    padding: .9375em;
    position: relative;
}

.pub-list a > div img {
    position: relative;
    z-index: 6;
}

.pub-list li a:hover,
.pub-list li a:focus {
    background: #dadad2;
}

.pub-list li a:active {
    position: relative;
    top: 1px;
}

.pub-list figure {
    margin-bottom: 0;
    position: relative;
}

.pub-list .fallback {
    z-index: 6;
    position: inherit;
}

.pub-list h4 {
    font-size: 1.25em;
    margin-bottom: .625em;
    line-height: 1.2;
    color: #56575A;
}

.page-template-publications .pub-list a div p {
    font-size: .75em;
    line-height: 1.2;
    margin-bottom: 0;
    color: #56575A;
}

.page-template-publications .main-inner h3 {
    margin-bottom: .66667em;
    font-size: 1em;
}

/*.page-template-publications form {
    margin-bottom: 3.5em;
    width: 49%;
}*/

.page-template-publications button {
    padding: .35em;
}

.pub-buttons .active {
    background: #0A5873;
}


/* ==========================================================================
   responsive video (YouTube)
   ========================================================================== */

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 3.75em;
}

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

/* ==========================================================================
   Main content styles (default/desktop)
   ========================================================================== */

.main-inner {
    margin: 0 auto;
    padding: 3.75em 0;
}

.home .main-inner {
    padding: 0 0 3.75em;
}

.main-inner article,
.main-inner > section,
.main-inner .content-container {
    width: 74.5763%;
    float: left;
}

.home .main-inner > section {
    float: none;
    width: 100%;
}

.site-introduction {
    background: white;
    margin: -2em 0 5em;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 10px rgba(0,0,0,.15);
}

.site-introduction div {
    padding: 3.75em 0;
}

.site-introduction p {
    text-align: center;
    color: #2C3F6A;
    font-size: 1.75em;
    line-height: 1.4;
    font-weight: 300;
}

.page-template-events .main-inner > section {
    /*width: 74.4680%;*/
    width: 74.57627119%;
    float: left;
}

.main-inner > article > h2, .main-inner > h2, .main-inner > section > h2, .single-cstm_news h2, .page-template-publications h2 {
    font-size: 5em;
    line-height: 1.1;
    font-weight: 400;
    color: #56575A;
    margin: 0 25.42372882% .75em 0;
    letter-spacing: -0.03em;
    text-rendering: optimizeLegibility;
}

.main-inner article p {
    font-size: 1em;
    line-height: 1.6;
    font-weight: 300;
    margin: 1.25em 0;
}

.main-inner article > p:first-of-type,
.the-content > p:first-of-type,
.main-inner .content-container > p:first-of-type {
    font-size: 1.375em;
    line-height: 1.4;
    font-weight: 600;
    color: #56575A;
}

.main-inner .content-container > p:first-of-type {
    margin-bottom: 3.75em;
}

.main-inner article p strong {
    font-weight: 600;
}

.main-inner article ul {
    margin: 2em 0;
}

.main-inner article p a,
.main-inner article li a {
    border-bottom: 1px solid #e6007e;
    transition: .1s all linear;
    color: #e6007e;
    padding-bottom: .05em;
    font-weight: 400;
}

.main-inner article p a:hover,
.main-inner article p a:focus,
.main-inner article li a:hover,
.main-inner article li a:focus {
    border-bottom: none;
    color: #BF026A;
}

.main-inner article p a:active {
    position: relative;
    top: 1px;
    color: #111;
}

.main-inner article li {
    margin-bottom: .625em;
    line-height: 1.4;
    font-weight: 400;
}

.main-inner article h3 {
    font-size: 1.875em;
    line-height: 1.4;
    font-weight: 400;
    color: #666;
    color: rgba(0,0,0,.5);
    margin: 1.5em 0 1em;
}

.main-inner article h3.toggle-trigger {
    margin: 0;
}

.story-icons hr {
    margin: 5em auto;
    width: 6em;
}


.main-inner span.donate_button a {
   display: block;
   background: #e6007e;
   padding: 1em;
   border-radius: 0.3em;
   font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
   color: white;
   text-transform: uppercase;
   font-weight: 900;
   font-size: 2em;
   transition: all .1s ease-in-out;
   text-align: center;
   border-bottom: 0px;
}

.main-inner span.donate_button a:hover,
.main-inner span.donate_button a:focus {
    background: #BF026A;
    color: white;
 
}


/* ==========================================================================
   Home page Slick Carousel styles (default/desktop)
   ========================================================================== */

.slick-initialized,
.slick-slide:first-child {
    display: block;
}

.slick-slider {
    background: #2C3F6A;
    z-index: 2;
}

.slick-slider .slick-list {
    box-shadow: 0 1px 10px rgba(0,0,0,.5);
}

.slick-slider img {
    opacity: .25;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=25)”;
    filter: alpha(opacity=25);
}

.slider-info {
    position: absolute;
    top: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    width: 100%;
    z-index: 15;
}

.slider-info > div {
    text-align: center;
    width: 100%;   
}

.carousel-title,
.carousel-excerpt {
    color: white;
    display: block;
}

.carousel-title {    
    font-size: 6.25em;
    text-rendering: optimizeLegibility;
}

.carousel-excerpt {    
    font-size: 2.25em;
    font-weight: 300;
    padding: .5em 0 0;
    line-height: 1.2;
}

.slick-dots li button::before {
    font-size: 10px !important;
    color: #2C3F6A !important;
}

.cstm-carousel div img {
    transition: opacity 1s linear;
}
/* ==========================================================================
   Home page icons styles (default/desktop)
   ========================================================================== */

.icons {
    text-align: center;
    margin-bottom: 6.25em;
}

h3.icons-title {
    margin: 0 0 2.5em;
    text-align: center;
}

h3.icons-title span {
    padding: .5em 0;
    display: inline-block;
    border-top: 1px solid #2C3F6A;
    border-bottom: 1px solid #2C3F6A;
    text-align: center;
    color: #2C3F6A;
    font-size: 2em;
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

.icons-description {
    text-align: center;
    line-height: 1.4;
    margin: 0 auto 3em;
    width: 65%;
}

.icons > div {
    display: inline-block;
    margin: 0 1em;
}

.icons .icon {
    display: table;
    width: 260px;
    height: 260px;
    background: #2C3F6A;
    transition: all .2s ease-in-out;
    border-radius: 100%;
}

.icons > div a:hover,
.icons > div a:focus {
    opacity: .85;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=85)”;
    filter: alpha(opacity=85);
    transition: all .2s ease-in-out;
}

.icons > div span {
    display: table-row;
}

.icons > div i {
    font-size: 6em;
    vertical-align: middle;
    display: table-cell;
    height: 100%;
    color: white;
}

.icons > div:nth-of-type(2) .icon {
    background: #746697;
}

.icons > div:nth-of-type(3) .icon {
    background: #CA819E;
}

.qtip {
    background: #00f;
}

/* ==========================================================================
   Related homepage panels styles (default/desktop)
   ========================================================================== */

.related-panels ul {
    margin: 0 -1%;
    padding: 0;
    list-style: none;
}

.related-panels li {
    margin: 1%;
    width: 31.33333337%;
    float: left;
    height: 320px;
    background: white;
}

.related-panels li a {
    display: block;
    background: #fff;
    border-radius: 0.3em;
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    color: white;
    text-transform: uppercase;
    font-weight: 900;
    font-size: .85em;
    transition: all .1s ease-in-out;
}

.related-panels li a:hover,
.related-panels li a:focus {
}

/* Home page related content panels */

a.related-panel-container {
    display: block;
    transition: background .25s linear;
    position: relative;
    height: 100%;
}

a.related-panel-container:hover,
a.related-panel-container:focus {
    opacity: .85;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=85)”;
    filter: alpha(opacity=85);
    transition: .2s all ease-in-out;
}

.home-related-img {
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.home-related-img,
.home-fallback-img,
.results-fallback-img {
    height: 160px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.home-related-img img,
.home-fallback-img img {
    position: relative;
    z-index: 6;
}

.home-fallback-img,
.results-fallback-img {
    background: transparent;
    text-align: center;
    position: relative;
}

.home-fallback-img span,
.results-fallback-img span {
    background: url(../img/cstm_white_arrow.svg) center center no-repeat transparent;
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 6;
    background-color: #55D6F7;
    background-size: 30px;
}

/* START OF LOADER */

.spinner {
    overflow: hidden;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 40px;
    text-align: center;
    z-index: 5;
}

.related-panels li a:hover .spinner, .related-panels li a:focus .spinner {
    display: none;
}

.spinner > div {
  background-color: #c2c2ba;
  height: 100%;
  width: 6px;
  margin: 0 1px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.large-image .spinner {
    z-index: 0;
}

/* END OF LOADER */

.home-related-img figure a img {
    opacity: 1;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    filter: alpha(opacity=100);
    
    -webkit-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
}

.related-text-panel {
    display: table;
    width: 100%;
    height: 160px;
}

.related-text-panel > div {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
    width: 80%;
}

.related-panels h5,
.related-panels h6 {
    text-transform: uppercase;
    text-align: center;
}

.related-panels h5 {
    color: #666;
    margin-bottom: .25em;
    font-size: .875em;
}

.related-panels h5 i {
    margin-right: .5em;
}

.related-panels h6 {
    font-size: 1.375em;
    color: #A7A7A7;
}

.related-panels hr {
    width: 1.25em;
    margin: .625em auto;
}

a.related-panel-container:hover .related-text-panel h5,
a.related-panel-container:focus .related-panels h5,
a.related-panel-container:hover .related-text-panel h6,
a.related-panel-container:focus .related-panels h6 {
    color: #00a9e8;
}

a.related-panel-container:hover .related-text-panel hr,
a.related-panel-container:focus .related-text-panel hr {
    border-color: #00a9e8;
}

/* ==========================================================================
   Sidebar/Aside styles (default/desktop)
   ========================================================================== */
aside.sidebar {
    width: 11.25em;
    float: right;
}

.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Cats */

.sidebar .cats ,
.sidebar .tags {
    margin: 0 0 1.25em;
    padding: 0;
}

.sidebar .cats li,
.sidebar .tags li {
    float: left;
    list-style: none;
    display: inline;
    margin: 0 .25em .25em 0;
}

.sidebar .cats li:last-child,
.sidebar .tags li:last-child {
    margin-bottom: 0;
}

.sidebar .cats a,
.sidebar .tags a {
    font-size: .75em;
    padding: .833333em;
    background: rgba(0,0,0,.1);
    display: block;
    border-radius: .2em;
    transition: all .1s ease-in-out;
}

.cats a:hover,.sidebar .cats a:focus,
.tags a:hover, .tags a:focus {
    background: rgba(0,0,0,.6);
    color: white;
}

/* ==========================================================================
   Footer styles (default/desktop)
   ========================================================================== */

footer {
    background: #2c3f6a;
    background: #2D2D25;
    color: white;
    clear: both;
}

.footer-inner {
    padding: 3.75em 0;
}

.footer-inner > div {
    float: left;
    width: 25%;
}

.footer-inner > div p {
    color: white;
    font-weight: 300;
    font-size: .75em;
    line-height: 1.4;
}

.footer-inner h1 {
}

.footer-inner .cstm-logo a img {
    width: 10em;
    height: auto;
}

.footer-inner > div:last-of-type {
    margin-right: 0;
}

.cstm-social p {
    display: inline;
    margin-right: .625em;
}

.cstm-social p a {
    color: white;
    font-size: 2em;
    transition: .2s color ease-in-out;
}

.cstm-social p a:hover,
.cstm-social p a:focus {
    color: #55D6F7;
}

.reg {
    margin: .625em 0;
}

.site-by-zf {
    margin-top: .625em;
}

.site-by-zf a {
    border-bottom: 1px solid #999;
}

.site-by-zf a:hover,
.site-by-zf a:focus {
    color: #55D6F7;
    border-bottom: none;
}

.fr-logo {
    margin: 1em 0 0;
    width: 50%;
}

@media (max-width:47.9375em) {
    
    .fr-logo {
        margin: 1em auto;
        width: 120px;
    }

}

/* ==========================================================================
   Events, News and Search list styles (default/desktop)
   ========================================================================== */
ul.news-list,
ul.events-list,
ul.results-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.875em;
}

ul.news-list li,
ul.events-list li,
ul.results-list li {
    margin-bottom: 1em;
}

ul.news-list li a,
ul.events-list li a,
ul.results-list li a {
    display: block;
    background: #FFF none repeat scroll 0% 0%;
    padding: 1.25em;
    color: #444;    
    border-radius: 3px;
    transition: #6363CE 0.2s ease-in-out;
    position: relative;
    border: 0;
    transition: .2s all ease-in-out;
}

#main .events-list li:last-child,
#main .news-list li:last-child,
#main .results-list li:last-child {
    margin-bottom: 0;
}

.page-template-events #main h3 {
   font-size: 2.125em;
   margin: .5em 0;
   line-height: 1.4;
   color: #666;
   color: rgba(0,0,0,.5);
   font-weight: 400;
   text-transform: capitalize;
}

/*.page-template-events #main h3:first-of-type, .page-template-events_alt #main h3:first-of-type {
    margin-top: 1.7647058824em;
}*/

#main ul.news-list a h4,
#main ul.events-list a h4,
#main ul.results-list a h4 {
   font-size: 2.25em;
   color: rgb(86,87,90);
   border: 0;
   padding: 0;
   margin-bottom: .5em;
   letter-spacing: -.04em;
   line-height: 1.2;
   max-width: 75%;
}

#main ul.results-list a h4,
#main ul.results-list li a p {
   float: right;
   width: 67.5%;
}

#main ul.news-list li a p,
#main ul.events-list li a p,
#main ul.results-list li a p  {
    line-height: 1.4;
}

#main ul.news-list li a:hover,
#main ul.news-list li a:focus,
#main ul.events-list li a:hover,
#main ul.events-list li a:focus,
#main ul.results-list li a:hover,
#main ul.results-list li a:focus {
    background: #B3EBF9;
    color: inherit;
}

#main ul.news-list li a:active,
#main ul.events-list li a:active,
#main ul.results-list li a:active {
    position: relative;
    top: 1px;
}

span.event-date {
    font-size: .5em;
    display: inline-block;
    margin: 0 0 0 1em;
    background: #E6007E;
    color: white;
    padding: 0.25em;
    border-radius: .2em;
    position: relative;
    top: -.3em;
    transition: all 0.15s ease-in-out;
    letter-spacing: normal;
}

span.event-date:before {
    font-family: FontAwesome;
    content: "\f02e";
    display: inline-block;
    padding-right: .35em;
    vertical-align: middle;
}

#main .news-list li p,
#main .events-list li p {
    margin: 0;
}

#main .news-list li .read-more,
#main .events-list li .read-more,
#main .results-list li .read-more {
    position: absolute;
    top: 1em;
    right: 1em;
    bottom: 0;
    width: inherit;
    margin: 0;
    text-align: center;
    color: rgba(86, 87, 90, 0.47);
    display: inline-block;
}

#main .news-list .read-more i.fa,
#main .events-list .read-more i.fa,
#main .results-list .read-more i.fa {
    display: block;
    font-size: 2em;
}

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: none;
}

.results-list figure,
.news-list figure,
.results-fallback-img {
    width: 30%;
    float: left;
    position: relative;
}

.news-list figure img,
.results-list figure img {
    position: relative;
    z-index: 3;
}

.news-list figure .spinner,
.results-list figure .spinner {
    z-index: 2;
}

ul.event-cats {
    padding: 0;
    margin: 0;
    float: right;
    width: 30%;
}

.event-cats li {
    margin: 0 .1875em .1875em 0;
    display: inline-block;
    float: left;
    padding: 0;
}

.event-cats li a {
    padding: 0.6em 0.8em;
    color: #FFF;
    display: block;
    background: #CA819E;
    font-weight: 500;
    border-radius: .2em;
    font-size: .75em;
}

.events-btn .read-more a:active {
    position: relative;
    top: 1px;
    background: #99023E;
}

.events-list li:hover .events-btn h4 a:hover,
.events-list li:hover .events-btn h4 a:focus {
    border-bottom: 1px solid white;
    padding-bottom: .1em;
}

.sidebar h3 {
    color: white;
    font-family: "ars-maquette-web", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1em;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    margin-bottom: .25em;
    padding: .3125em 0;
    line-height: 1;
    width: 66.66666666%;
}

.related-links,
.cstm-quote-link,
.stats-link,
.what-money-buys-link {
    margin-bottom: .625em;
    position: relative;
}

a.what-money-buys-link {
    display: block;
    transition: background .15s ease-in-out;
}

.what-the-money-buys,
.stats {
    border-radius: .3em;
    padding: .9375em;
    margin-bottom: .625em;
    position: relative;
}

a.what-money-buys-link:hover,
a.what-money-buys-link:focus {
}

div.what-the-money-buys {
    position: relative;
}

.what-the-money-buys a {
    display: block;
    color: white;
    position: relative;
}

.what-the-money-buys h5 {
    font-family: "ars-maquette-web",sans-serif;
    font-weight: 900;
    display: block;
    font-size: 3.2em;
    margin-bottom: .2em;
    color: white;
    line-height: .8;
}

.what-the-money-buys p {
    font-weight: 400;
    display: block;
    font-size: 1em;
    line-height: 1.2;
    font-style: normal;
    color: white;
}

.what-the-money-buys a > span {
    width: 75%;
    float: right;
}

.what-the-money-buys span > span {
    font-family: "ars-maquette-web",sans-serif;
    font-weight: 900;
    display: block;
    font-size: 1em;
    text-transform: uppercase;
}

.what-the-money-buys i.fa {
    display: inline-block;
    font-size: 2em;
    margin-bottom: 40px;
    border-radius: 100%;
    background: rgba(0,0,0,0.3);
    padding: .5em 0;
    height: 2em;
    width: 2em;
    text-align: center;
}

/* ==========================================================================
   Common structure styles
   ========================================================================== */
.quote-col {
    float: left;
    width: 11.86440678%;
    margin-right: 3.389830508%;
}

figcaption {
    margin: 1.25em 0;
    border-bottom: 1px dotted rgba(0,0,0,.5);
    padding: .5em .5em 1.25em 0;
    font-size: .75em;
    color: #777;
    line-height: 1.3;
}

figcaption i.fa {
    display: inline-block;
    margin-right: .5em;
    font-size: 110%;
}

article ul.prev-next-post-links {
    list-style: none;
    margin: 3.75em 0 0;
    padding: 0;
}

article .prev-next-post-links li {
    width: 49%;
    float: left;
    margin-bottom: 0;
}

article .prev-next-post-links li.next {
    float: right;
    text-align: right;
}

.we-raised {
    border-radius: .3em;
}

.we-raised a {
    display: block;
    padding: 1.25em;
    text-align: center;
}

.we-raised strong {
    display: block;
    margin-bottom: 1em;
    font-size: 1.75em;
}

/* Pagination */

#main ul.prev-next,
#main ul.prev-next-publications {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main ul.prev-next li,
.prev-next-publications li {
    width: 49%;
    float: left;
}

#main ul.prev-next a,
#main ul.prev-next-publications a {
    font-weight: 400;
    display: block;
    background: #dadad2;
    padding: 1em;
    font-size: 1.125em;
    transition: .2s ease-in-out background;
    border-radius: .2em;
    color: #555;
    color: rgba(0,0,0,0.5);
    border: none;
}

#main ul.prev-next a:hover,
#main ul.prev-next a:focus,
.prev-next-publications a:hover,
.prev-next-publications a:focus {
    background: #D2276B;
    color: white;
}

#main ul.prev-next li.next,
.prev-next-publications .next-pub {
    float: right;
    text-align: right;
}

#main ul.prev-next a:active {
    position: relative;
    top: .1em;
}

/* ==========================================================================
   Success Story page styles
   ========================================================================== */
.page-template-success_stories {
    padding-top: 3.75em;
}

.success-story-hub {
    width: 90%;
    /*min-height: 62.5em;*/
}

li.grid-sizer,
.success-list-item {
    width: 12.5%;
}

.success-title {
    background: #CCFDFF;
    color: #333;
    overflow: hidden;
}

.success-title > div {
    width: 90%;
    margin: 0 auto;
    max-width: 73.75em;
    padding: 7.5em 0 3.75em;
}

.success-title h2 {
    font-size: 5em;
    font-weight: 400;
    color: #2C3F6A;
    margin-bottom: .25em;
}

.success-title p {
    margin: 0 0 1em;
    line-height: 1.4;
}

.success-title p:last-child {
    margin: 0;
}

.success-list {
    background: #F2F2E9;
    margin: 0;
    list-style: none;
    padding: 0;
    clear: both;
}

.success-list-item {
    background: #2C3F6A;
    float: left;
    height: 250px;
    float: left;
    text-align: center;

    overflow: hidden;
}

.success-list-item > a {
    display: block;
    position: relative;
    height: 100%;
}

.success-list li.second-post {
    width: 25%;
    height: 500px;
    background: #746697; 
}

.success-list-item h4 {
    display: table;
    height: 100%;
    width: 100%;
    position: relative;
    text-align: center;
    z-index: 4;
}

.success-list-item h4 span {
    display: table-row;
}

.success-list-item h4 span span {
    display: table-cell;
    vertical-align: middle;
}

.success-list-item h4 span span strong {
    border-top: 1px white solid;
    border-bottom: 1px white solid;
    display: inline-block;
}

.success-list-item h4 span span strong em {
    display: inline-block;
    font-size: 1.85em;
    font-family: "ars-maquette-web", sans-serif;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    font-style: normal;
    padding: .4em 0;
}

.success-list-item > a img {
    position: absolute;
    max-width: inherit;
    height: 100%;
    width: auto;
    top: 0;
    left: 0;
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    opacity: .5;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
    filter: alpha(opacity=50);
    transition: .25s all ease-in-out;
    z-index: 3;
}

.success-list-item > a:hover img {
    opacity: 1;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    filter: alpha(opacity=100);
    -webkit-filter: none;
    filter: none;
}
/* Main Success Story title panel */

li.ss-title-panel {
    background: #CCFDFF;
    width: 25%;
    height: 500px;
}

li.ss-title-panel strong,
li.ss-title-panel em {
    font-style: normal;
    font-weight: normal;
}

/* Success Stories main page title structure */

li.ss-title-panel > div { 
    display: inline-block;
    height: 500px;
    line-height: 500px;
}

li.ss-title-panel > div > div { 
    display: inline-block;
    line-height: 500px;
    vertical-align: middle;
    padding: 2.5em 15%;
}

li.ss-title-panel h2 img {
    margin: 0 auto 1.25em;
    height: auto;
}

/* Success Stories main page content/intro structure */

li.ss-title-panel h3 p {
    line-height: 1.3;
    font-size: 1em;
    text-align: left;
    font-weight: 300;
    margin-bottom: 0.9375em;
}

li.ss-title-panel h3 p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Success Story Alt
   ========================================================================== */
.page-template-success_stories_alt #main-success {
    margin-top: 0;
}

#main-success {
    background-color: #746697;
    transition: all 2s ease-in-out;
}

.success-story-hub {
    width: 90%;
    min-height: 78.125em;
    padding-top: 140px;
    max-width: 73.75em;
    margin: 0 auto;
    color: white;
}

#main-success .backstretch img {
    opacity: .1;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=1)”;
    filter: alpha(opacity=1);
}

.success-story-hub > section {
    width: 23.75em;
    float: left;
}

.success-story-hub h2 {
    margin-bottom: 30px;
    padding-bottom: 40px;
    border-bottom: 10px white solid;

}

.success-story-hub h2 img {
    height: auto;
    
    max-width: inherit;
}

.success-intro p {
    margin-bottom: .9375em;
    font-weight: 300;
    line-height: 1.3;
    font-size: 1.125em;
}

.people-container {
    margin-top: 3em;
}

.people {
    margin-bottom: .92375em;
}

.people h3 {
    margin-bottom: 10px;
}

.people h3 a {
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    font-weight: 900;
    font-size: 3em;
    text-transform: uppercase;
    color: white;
    cursor: pointer;
    transition: color .2s ease-in-out;
    display: inline-block;
    padding: 0 0 10px;
    border-bottom: 1px solid white;
}

.people q {
    font-size: 1.125em;
    line-height: 1.2;
}

.people h3 a:hover,
.people h3 a:focus {
}

.success-stories-sidebar p {
    color: white;
    line-height: 1.4;
}

.people .read-more {
    display: inline-block;
    padding: .5em;
}

/* ==========================================================================
   Blockquote
   ========================================================================== */

.the-content blockquote {
    width: 48.71794872%;
    margin: 0 2em 2em -12.5em;
    float: left;
    background: white;
    background: rgba(255,255,255,.5);
    padding: 1.25em;
    border-radius: .2em;
    clear: left;
}

.the-content blockquote p {
    color: #444;
    line-height: 1.5;
    font-size: 90%;
    margin: 1em 0;
}

.the-content blockquote p cite {
}

.the-content blockquote p:first-of-type,
.the-content blockquote p:last-of-type {
    margin: 0;
}

article nav {
    clear: both;
}

.the-content blockquote i.fa {
    color: #999;
    color: rgba(0,0,0,.2);
    display: block;
}

.the-content h5 {
    margin: 1em 0;
    font-size: 1.25em;
    color: #2C3F6A;
}

.the-content blockquote i.fa {
    font-size: 2em;
}

/* ==========================================================================
   Success Story single page template
   ========================================================================== */

.the-content {
    float: right;
    width: 79.59183673%;
}

.the-content ul.prev-next,
#main ul.prev-next,
#main ul.prev-next-publications {
    padding: 0;
    margin: 0;
}

.single-cstm_success_story h2 {
    margin: 0 0 .6em 16.94915254%;
    font-size: 6.25em;
}

.inline-img {
    float: left;
    margin: 0 1.25em 1.25em 0;
    width: 17.5em;
}

.inline-img img {
                 
}

.inline-img figcaption {
    margin: 0;
}

/* ==========================================================================
   sidebar classes
   ========================================================================== */
.default-sidebar {
    float: right;
    width: 15.25423729%;
}

.sidebar > h4, .sidebar > h5 {
   margin-bottom: .5em;
   color: #787874;
   font-size: 1.2em;
   font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
   font-weight: 900;
   text-transform: uppercase;
   padding: .25em 0;
   border-top: 1px solid #787874 ;
   border-bottom: 1px solid #787874 ;
}

.related-links {
    margin-bottom: 1.875em;
}

.related-links ul li {
    margin-bottom: .3125em;
}

.related-links ul li:last-child {
    margin-bottom: 0;
}

.related-links ul a {
    background: #787874;
    display: block;
    padding: .5em;
    padding: .9375em;
    border-radius: 0.3em;
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    color: white;
    text-transform: uppercase;
    font-weight: 900;
    font-size: .85em;
    transition: all .1s ease-in-out;
}

.related-links ul a:hover,
.related-links ul a:focus {
    background: #444;
}

ul.list-of-events {
    margin: 0 0 1.25em;
    padding: 0;
    list-style: none;
}

ul.list-of-events li {
    margin: 0 0 .3125em;
    float: none;
}

ul.list-of-events li:last-child {
    margin: 0;
}

.list-of-events li a {
    font-size: 1em;
    padding: .625em;
    color: white;
    background: #E64485;
    display: block;
    line-height: 1.2;
    font-weight: 500;
    border-radius: .2em;
    transition: .15s all ease-in-out;
}

.list-of-events li a:hover,
.list-of-events li a:focus {
    color: white;
    background: #D2276B;
}

.list-of-events li a:active {
    position: relative;
    top: 1px;
    background: #222;
}

h4.event-details, h4.job-details {
    font-size: 1.6em;
    margin: 2em 0 0.5em 0;
    color: #56575A;
}

.details span,
span.details {
    font-weight: 600;
}

.stats-link {
    display: block;
}

#main .answer p.details {
    /* margin-bottom: .5em; */
    line-height: 1.4;
    margin: 0 0 .3125em;
}

#main p.details:last-of-type {
    margin-bottom: 1.25em;
}

.stats {
    text-align: center;
    color: white;
    text-align: left;
}

aside.sidebar .stats i.fa {
    display: inline-block;
    font-size: 2em;
    margin-bottom: .625em;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0% 0%;
    padding: 0.5em 0px;
    height: 2em;
    width: 2em;
    text-align: center;
}

aside.sidebar .stats.nightcentre {
    background: #6879b7;
}

aside.sidebar .stats.reconnected {
    background: #4e55a1;
}

aside.sidebar .stats.activities {
    background: #e5007d;
}

aside.sidebar .stats h5 {
    margin-bottom: .5em;
    padding: 0;
    display: inline;
    border: 0;
    display: inline-block;
    padding: .25em 0;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: white;
}

aside.sidebar .stats h6 {
    font-size: 3.5em;
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    font-weight: 900;
    margin-bottom: .1em;
    line-height: .9;
}

aside.sidebar .stats blockquote {
    margin: 0;
}

aside.sidebar .stats blockquote h4 {
    font-size: 4em;
    color: white;
    font-weight: 900;
    letter-spacing: -.04em;
    margin-bottom: .3em;
}

aside.sidebar .stats blockquote p {
    line-height: 1.3;
    font-weight: 400;
}

aside.sidebar.other > div {
    height: 6em;
    background: rgba(0,0,0,.25);
    margin: 0 20px 0 0;
}

/*The Connection Unit Quote*/

aside.sidebar .cstm-quote {
    margin: 2em 0;
}

aside.sidebar .cstm-quote blockquote {
    padding: 0;
    margin: 0;
    color: #e6007e;
}

aside.sidebar .cstm-quote blockquote p {
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 0.625em;
    font-size: 100%;
    font-style: italic;
}

aside.sidebar .cstm-quote blockquote p i {
    font-size: 2em;    
}

aside.sidebar .cstm-quote blockquote cite {
    border-top: 1px solid #DEABC1;
    padding-top: 10px;
    display: block;
}

.col-4e579f { background: #4e579f; }
.col-734e9f { background: #734e9f; }
.col-62b7a8 { background: #62b7a8; }
.col-c32973 { background: #c32973; }
.col-ccdd3b { background: #ccdd3b; }
.col-dd3b65 { background: #dd3b65; }
.col-3bbddd { background: #3bbddd; }

.col-4e579f:hover,.col-4e579f:focus { background: #333E92; }
.col-734e9f:hover,.col-734e9f:focus { background: #573580; }
.col-62b7a8:hover,.col-62b7a8:focus { background: #35796D; }
.col-c32973:hover,.col-c32973:focus { background: #9E0E54; }
.col-ccdd3b:hover,.col-ccdd3b:focus { background: #A6B14E; }
.col-dd3b65:hover,.col-dd3b65:focus { background: #A2183C; }
.col-3bbddd:hover,.col-3bbddd:focus { background: #1987A2; }

.col-4e579f, .col-734e9f, .col-62b7a8, .col-c32973, .col-ccdd3b, .col-dd3b65, .col-3bbddd {
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

/** FAQs **/

.faq {
    margin-bottom: .625em;
}

.faq .toggle-trigger {
    background-color: white;
    cursor: pointer;
    border-radius: 0.3em;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    margin-bottom: 0;
    font-size: 1.375em;
    padding: .6818181818em;
    position: relative;
    line-height: 1.2;
    color: #787874;
    font-weight: 400;
}

.faq h3.question:after {
    content: "\f0dd";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;    
    line-height: 1.25em;
    color: #999;
    float: right;
}

.faq h3:hover:after,
.faq h3:focus:after {
    line-height: 1.25em;
    color: #fff;
}

.faq h3:hover,
.faq h3:focus {
    background: #55D6F7;
    color: white;
}

.faq .toggled-content {
    padding: .9375em;
}

.faq .toggled-content p {
    line-height: 1.4;
}

.faq .toggled-content p:last-child {
    margin: 0;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden,
.faq br {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.group:before,
.group:after,
.faq:before,
.faq:after,
.related-links:before,
.related-links:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.group:after,
.faq:after,
.related-links:after {
    clear: both;
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}/**/

button#menu-toggle {
    position: relative;
    float: right;
    background-color: transparent;
    border: none;
    display: none;
    -moz-appearance: none;
    padding: 0;
    margin-left: 1em
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

#menu-toggle > span {
    display: table;
}

#menu-toggle > span > span {
    display: table-cell;
    vertical-align: middle;
    height: 70px;
}

#menu-toggle .icon-bar {
    display: block;
    width: 25px;
    height: 5px;
    background: #2C3F6A;
}

.menu-toggle:hover .icon-bar,
.menu-toggle:focus .icon-bar {
    background: #e6007e;
}

#menu-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}

/* online express overriding styles - tread lightly! */

div[id^="bbox-root"] {
    width: 42.5em;
    margin-top: 3.75em;
}

form[id^="mongo-form"] #bboxdonation_BBEmbeddedForm.BBFormContainer {
    padding: 0;
}

form[id^="mongo-form"] input[type="text"],
form[id^="mongo-form"] input[type="email"],
form[id^="mongo-form"] input[type="tel"],
form[id^="mongo-form"] select {
    height: 40px;
    padding: 0 0 0 1em;
    line-height: 40px;
    max-width: none;
    width: 100%;
}

form[id^="mongo-form"] .BBFormSection.BBFormButtonRow {
    position: relative;
}

form[id^="mongo-form"] input[type="submit"], input[id^="bboxsignup"] {
    width: auto;
    background: #00a9e8;
    position: relative;
    line-height: 1;
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: none;
    transition: all .1s ease-in-out;
    padding: .625em;
    font-size: 1em;
    border-radius: .3em;
}

form[id^="mongo-form"] .BBFormSubmitbutton:hover,
form[id^="mongo-form"] .BBFormSubmitbutton:focus {
    background: #0283B1;
    outline: none;
}

form[id^="mongo-form"] .BBFormSubmitbutton:active {
    background: #007EAD;
    position: relative;
    top: 1px;

}

form[id^="mongo-form"] label#bboxdonation_gift_lblUKGiftAid {
    padding: 0;
}

form[id^="mongo-form"] #bboxdonation_BBEmbeddedForm.BBFormContainer a {
    padding: 0;
    margin: 0;
    text-decoration: underline;
    color: #2C3F6A;
    transition: .15s color ease-in-out;
}

form[id^="mongo-form"] #bboxdonation_BBEmbeddedForm.BBFormContainer a:hover,
form[id^="mongo-form"] #bboxdonation_BBEmbeddedForm.BBFormContainer a:focus {
    color: #111;
}

form[id^="mongo-form"] .BBFormSection {
    margin: 0;
    max-width: none;
    width: 100%;
}

form[id^="mongo-form"] .BBFormSection.BBDFormSectionComments,
form[id^="mongo-form"] #bboxdonation_billing_divBillingSection {
    margin: 0;
    max-width: none;
}

form[id^="mongo-form"] .BBFormContainer[data-bbox-part-id="6eae5378-85c9-4b25-984b-25faaf9813b9"] .BBFormSection fieldset legend {
    display: none;
}

form[id^="mongo-form"] input#bboxdonation_gift_txtAmountOther {
    margin: 0;
    width: 22%;
}

form[id^="mongo-form"] #bboxdonation_gift_rdlstGivingLevels {
    width: 100%;
}

form[id^="mongo-form"] .BBFormRadioLabelGivingLevel {
    border: none !important;
    margin-bottom: .625em;
    background-color: #C7C7B6;
    padding: 1em;
}

form[id^="mongo-form"] #bboxdonation_BBEmbeddedForm.BBFormContainer .BBFormWideButtonGivingLevels .BBFormRadioLabelGivingLevel.BBFormRadioLabelGivingLevelSelected {
    background-color: #787874;
}

form[id^="mongo-form"] #bboxdonation_BBEmbeddedForm.BBFormContainer .BBFormFieldLabelGivingLevel {
    display: block;
    width: 100%;
    padding-right: 0;
    float: none;
    white-space: normal!important;
    text-align: left;
    border: none;
    font-size: 1.25em;
    margin: 1em 0;
    line-height: 1;
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(86,87,90,.5);
}

form[id^="mongo-form"] #bboxevent_BBEmbeddedForm {
    background: none !important;
}

.single-cstm_events form[id^="mongo-form"] #bboxevent_BBEmbeddedForm {
    padding: 0 !important;
}

form[id^="mongo-form"] .BBFormContainer .BBFormFieldContainer {
    color: #56575A;
    margin: 1em 0;
}

form[id^="mongo-form"] .BBFormTextArea {
    width: 100%;
    max-width: none;
    min-height: 100px;
}

form[id^="mongo-form"] #bboxdonation_comment_fldComments label#bboxdonation_comment_lblComments {
    padding: 0;
    margin-bottom: .625em;
}

form[id^="mongo-form"] .BBFormFieldLabel {
    margin-bottom: .625em;
    line-height: 1;
    color: #333;
}

form[id^="mongo-form"] input[type="checkbox"] {
    margin-right: .25em;
}

div#bbox-msg-wrapper img {
    max-width: inherit;
    width: 2em;
}

form[id^="mongo-form"] .BBFormContainer .BBFieldExpiration .BBFormSelectList, .BBFormContainer[data-bbox-part-id="6eae5378-85c9-4b25-984b-25faaf9813b9"] .BBFieldExpiration .BBFormTextbox {
    width: 100px;
}

div[id^="bbox-root"] form[id^="mongo-form"] [data-bbox-part-id='fdb6233a-bf29-4bfe-ae5c-7c4138b9eef1'].BBFormContainer {
    background-color: transparent !important;
    border-radius: 0 !important;
}

div[id^="bbox-root"] form[id^="mongo-form"] .BBFormContainer[data-bbox-part-id="fdb6233a-bf29-4bfe-ae5c-7c4138b9eef1"] {
    font-size: 1em;
    margin: 0 auto;
    border-radius: 0;
    padding: 0;
    min-width: 250px;
    border: none;
}

.BBFormContainer[data-bbox-part-id="fdb6233a-bf29-4bfe-ae5c-7c4138b9eef1"] .BBFormPricingTable {
    padding: 1.25em !important;
}

.BBFormContainer[data-bbox-part-id="fdb6233a-bf29-4bfe-ae5c-7c4138b9eef1"] .BBFormTableHeader {
    font-weight: normal !important;
}

div[id^="bbox-root"] form[id^="mongo-form"] .BBFormContainer .BBFormWideButtonGivingLevels .BBFormRadioAmount {
    padding: 0px;
    min-width: 0px;
    float: none;
    font-size: 3em;
    line-height: 1;
    font-family: "ars-maquette-web-n9","ars-maquette-web",sans-serif;
    font-weight: 900;
}

div[id^="bbox-root"] form[id^="mongo-form"] .BBFormContainer .BBFormFieldContainerGivingLevels span:first-child {
    float: right;
    padding: 0;
    width: 75%;
    max-width: none;
    margin: 0;
}

form[id^="mongo-form"] .BBFormContainer .BBFormFieldLabel {
    float: none;
    width: 100%;
    padding: 0;
    text-align: left;
    margin-left: 0;
}

form[id^="mongo-form"] #bboxdonation_billing_divBillingSection .BBFormTextbox {
    width: 100%;
    max-width: none;
    margin: 0 0 .625em;
}

form[id^="mongo-form"] div#bboxdonation_payment_divProcessedByBlackbaud {
    margin-bottom: 1.25em;
    font-size: 85%;
}

iframe#easyXDM_default6033_provider div#cluetip {
    padding: 1em !important;
}

iframe#easyXDM_default6033_provider #cluetip-title {
    margin: 3px 0 6px 0;
    font-size: 16px;
    line-height: 1.2;
}

form[id^="mongo-form"] input#bboxdonation_gift_txtAmountOther {
    margin: 0;
    width: 22%;
    color: #56575A;
}

form[id^="mongo-form"] #bboxdonation_payment_lblSecCode {
    margin-left: 0;
}

form[id^="mongo-form"] #bboxdonation_BBEmbeddedForm.BBFormContainer .BBFormWideButtonGivingLevels .BBFormRadioLabelGivingLevel.BBFormRadioLabelGivingLevelSelected {
    background-color: #00A9E8;
}

form[id^="mongo-form"] label#bboxdonation_gift_lblUKGiftAidTerms {
    line-height: 1.2;
}


form[id^="mongo-form"] .BBDFormSectionComments .BBFormTextArea label,
form[id^="mongo-form"] .BBDFormSectionComments .BBFormTextArea textarea,
form[id^="mongo-form"] label#bboxdonation_comment_lblComments,
form[id^="mongo-form"] textarea#bboxdonation_comment_txtComments {
    margin-left: 0;
}

form[id^="mongo-form"]  select#bboxdonation_billing_ddTitle {
    margin-bottom: .625em;
}

form[id^="mongo-form"] .BBFormSectionHeading {
    padding-left: 0;
}

form[id^="mongo-form"] .BBFormContainer {
    border: none;
}


/* sidebar newsletter signup */

aside div[id^="bbox-root"], article div[id^="bbox-root"] {
width: 100%;
margin-top: 0 !important;
    }

aside .BBFormContainer,
aside .BBFormTextbox, article .BBFormContainer,
article .BBFormTextbox {
    padding: 0 !important;
    margin: 0 0 .625em !important;
    width: 100% !important;
}

aside .BBFormTextbox, article .BBFormTextbox {
    height: 40px;
    min-height: none;
    padding-left: .625em !important;
}

aside .BBFormButtonRow input[type="submit"], article .BBFormButtonRow input[type="submit"] {
    position: relative;
    float: none;
    right: inherit;
    width: auto;
    height: inherit;
    padding: inherit;
    text-indent: inherit;
    webkit-appearance: none !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 1.25em !important;
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    background: #00a9e8 !important;
    position: relative;
    line-height: 1;
    transition: all .1s ease-in-out;
    padding: .625em;
    font-size: 1em;
    border-radius: .3em !important;
}

aside .BBFormButtonRow .BBFormSubmitbutton:hover,
aside .BBFormButtonRow .BBFormSubmitbutton:focus, article .BBFormButtonRow .BBFormSubmitbutton:hover,
article .BBFormButtonRow .BBFormSubmitbutton:focus {
    background: #0283B1 !important;
}

aside .BBFormButtonRow .BBFormSubmitbutton:active, article .BBFormButtonRow .BBFormSubmitbutton:active {
    position: relative;
    top: 1px;
}

aside .BBFormFieldLabelEdit, aside div.BBFormSectionHeading, article .BBFormFieldLabelEdit, article div.BBFormSectionHeading {
    display: none;
}

.sidebar > h4.form-title {
    font-size: 1em;
    margin-top: 1.875em;
}

aside div.BBFormSection p , article div.BBFormSection p {
    line-height: 1.4;
}

aside div.BBFormSection input[type="text"], article div.BBFormSection input[type="text"] {
    color: #444;
}

form[id^="mongo-form"] .BBFormRadioLabelGivingLevel {
    border: none !important;
    margin: 0 0 .3125em;
    background-color: #DEDED3;
    padding: 15px;
}

.search-no-results h3 {
    font-size: 1.375em;
    line-height: 1.4;
    font-weight: 600;
    color: #56575A;
}


/* christmas donate form */

#mongo-form .BBFormRadioAmount {
    float: left;
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.8em;
}

#mongo-form .BBFormRadioDescription {
    text-align: left;
    font-size: inherit;
}

#mongo-form .BBFormRadioLabelGivingLevelSelected {
    background: #55D6F7;
}

#mongo-form #bboxdonation_gift_rdlstGivingLevels label.BBFormRadioLabelGivingLevel span.BBFormRadioDescription,
#mongo-form #bboxdonation_gift_rdlstGivingLevels label.BBFormRadioLabelGivingLevel span.BBFormRadioDescriptionOther {
    font-size: 1.8em;
}

/* qtip */

.qtip-cstm {
    border: none;
    background-color: #55D6F7;
    line-height: 1.4;
    padding: 15px;
    border-radius: .25em;
    text-align: center;
    color: white;
    font-size: 1em;
}

.qtip-default .qtip-titlebar {
    font-size: 1.35em;
    background: transparent;
    color: white;
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    padding: 0;
    margin-bottom: .5em
}

.qtip-content {
    line-height: 1.4;
    font-size: 90%;
    text-align: center;
    color: white;
    padding: 0;
    font-weight: 400;
}

/* mobile nav defaults */
#menu-secondary-navigation-1 .help-link a {
    background: #E6007E;
}

#menu-secondary-navigation-1 .help-link a:focus {
    background: #BF026A;
}

#menu-secondary-navigation-1 .donate-link a {
    background: #00A9E8;
}

#menu-secondary-navigation-1 .donate-link a:focus {
    background: #0283B1;
}

#menu-secondary-navigation-1 li a { border: none; }

.nav { 
    display: none;
}

#container {
    max-width: 100%;
    margin: 0px auto;
    overflow: hidden;
    width: 100%;
}

.menu_container,
.anchor-link {
    display: none;
}

.nav { width:100%;
    border-bottom: 1px solid #000;
}

.nav ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    font-weight: bold;
    text-align: center;
}

.nav ul li {
    display: inline-block;
    text-align: left;
}

.nav ul li a {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
    color: #444;
}

.nav {
    display: none;
}
.main_content,
.nav {
    transition: .2s margin ease;
    display: block;
    position: relative;
}

.nav {
    display: none;
}

.main_content {
    position: relative;
    width: 100%;
}

body.active .main_content:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 3.75em;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #56575A;
}

/** MOBILE NAV **/
/* ================================================================= */
@media all and (max-width:63.9375em) {
/* ================================================================= */
.menu_container,
.anchor-link {
    display: block;
}

.nav {
    display:block;
    float: left;
    margin-left: -100%;
    width: 280px;
    z-index: 2;
}

.main_content {
    float: left;
    margin-left: 0;
    width: 100%;
}

body.active .nav {
    margin-left: 0;
}

body.active .main_content {
    margin-right: -100%;
}

.nav {
    padding: 0;
    border: none;
}

.nav ul {
    text-align: left;
    font-weight: normal;
}

.nav ul li {
    display: block;
}

.nav ul li a {
    background: #56575A;
    border-top: 1px solid #717171;
    color: #ffffff;
    padding: .75em;
    font-size: .875em;
}

.nav ul li a:focus {
    background-color:#333;
}

.nav > ul > li:first-of-type > a {
    border-top: none;
}

ul.sub-menu > li a {
    padding-left: 1.5625em;
    font-size: 80%;
}

}

/* ========================================================= */
/* MEDIA QUERIES */
/* ========================================================= */
/* between 1400px and 1699px */
@media (min-width: 87.5em) and (max-width: 106.1875em) {
    .featured-image-container img {
        margin-top: -100px;
    }
}

/* ========================================================= */
/* between 1700px and 1999px */
@media (min-width: 106.25em) and (max-width: 124.9375em) {
    .featured-image-container img {
        margin-top: -150px;
    }
}

/* ========================================================= */
/* min 2000px */
@media (min-width: 125em) {
    .featured-image-container img {
        margin-top: -200px;
    }

    .slick-slider .slider-info,
    .slick-slider .slick-list {
        height: 600px;
    }
}

/* ========================================================= */
/* max 1023px */
@media (max-width:63.9375em) {

    .main-inner article, .main-inner > section, .main-inner .content-container {
      
    }

    .related-panels li {
        width: 48%;
    }

    .icons .icon {
        display: table;
        width: 180px;
        height: 180px;
        background: #2C3F6A none repeat scroll 0% 0%;
        transition: all 0.2s ease-in-out 0s;
        border-radius: 100%;
    }

    .icons > div i {
        font-size: 4em;
    }

    body { margin-top: 50px; }

    button#menu-toggle {
        display: block;
    }

    .main-inner {
        padding: 2em 0;
    }

    .main-inner > article > h2,
    .main-inner > h2,
    .main-inner > section > h2,
    .single-cstm_news h2 {
        font-size: 2.5em;
        line-height: 1.1;
        font-weight: 400;
        margin: 0 0 .375em;
    }

    .icons > div {
        margin: 0 .5em;
    }

    .icons .icon {
        height: 
    }

    header,
    #menu-toggle > span > span,
    .header-inner {
        height: 50px;
    }

    header h1 {
        height: 50px;
        line-height: 50px;
    }

    header h1 a {
        width: 180px;
        height: auto;
    }

    .page-template-large_image .main-inner  {
        padding: 0 0 3em;
    }

    .large-image-title {
        position: absolute;
        display: block;
        width: 100%;
        height: auto;
        padding: 0;
        top: inherit;
        bottom: 0;
        background: #45eaf4;
        background: rgba(69, 234, 244, 0.9);
    }

    .large-image h2 span {
        color: white;
        font-size: 2em;
        border: none;
        display: block;
        padding: .5em 0;
        text-align: left;
        margin: 0 auto;
        width: 90%;
    }

    .arrow-right {
        display: block;
        border-top: none; 
        border-left: 1em solid transparent;
        border-right: 1em solid transparent;
        border-bottom: 1em solid #45eaf4;    
        border-bottom: 1em solid rgba(69,234,244,.9);
        left: 46.5%;
        top: inherit;
        bottom: 100%;
    }

    .featured-image-container > div {
        display: none;
    }

    .large-image {
        height: 250px;
        margin-bottom: 1.875em;
    }

    .large-image h2 {
        display: block;
        vertical-align: inherit;
    }

    .featured-image {
        position: relative;
        right: inherit;
        width: 100%;
        z-index: 1;
    }

    .secondary-nav {
        display: none;
    }

    .search-trigger {
        float: right;
    }

    .search-trigger a {
        font-size: 1.5em;
        line-height: 50px;
    }

    .inline-img {
        width: 49%;
    }
}

/* ========================================================= */
/* max 767px */
@media (max-width:47.9375em) {
    
    .main-inner article,
    .main-inner > section,
    .main-inner .content-container {
        width: 100%;
        float: none;
        margin-bottom: 1.5em;
    }

    #main ul.news-list li a p,
    #main ul.events-list li a p,
    #main ul.results-list li a p {
        font-size: .875em;
    }

    #main ul.news-list a h4,
    #main ul.events-list a h4,
    #main ul.results-list a h4 {
        font-size: 1.5em;
    }

    .main-inner .content-container > p:first-of-type {
        margin-bottom: 1.5em;
    }

    .success-intro h2 {
        max-width: 70%;
    }

    .success-intro p {
        font-size: .875em;
    }

    .people h3 a {
        font-size: 1.375em;
    }

    .success-story-hub {
        min-height: inherit;
        padding-top: 2.5em;
    }

    .success-story-hub > section,
    .success-story-hub aside {
        float: none;
        width: 100%;
        margin-bottom: 2.5em; 
    }

    .success-story-hub aside {
    }

    .success-story-hub h2 img {
        width: 100%;
        max-width: 100%;
    }

    header nav { display: none; }

    .single-cstm_success_story h2 {
        margin: 0 0 .5em;
        font-size: 2.5em;
    }

    .main-inner article > p:first-of-type,
    .the-content > p:first-of-type {
        font-size: 1.1em;
    }

    figure {
        margin: 0 0 1em;
    }

    .main-inner article,
    aside.sidebar {
        width: 100%;
        float: none;
        clear: both;
    }

    .main-inner article p {
        font-size: .875em;
    }

    .the-content ul.prev-next, ul.prev-next {
        margin-top: 1em;
    }

    .related-links {
        margin-bottom: 1.125em;
    }

    .related-links ul li {
        float: left;
        display: inline-block;
        margin-right: .25em;
    }

    .what-the-money-buys h5 {
        float: left;
        display: inline-block;
        margin: 0 .325em 0 0;
    }

    .footer-inner {
        padding: 1.25em 0px;
    }

    .footer-inner > div {
        width: 100%;
        text-align: center;
    }

    .footer-inner > div:last-of-type {
        margin-bottom: 0;
    }

    .footer-inner .cstm-logo a img {
        margin: 0 auto;
    }

    .footer-identity,
    .cstm-details {
        margin-bottom: .625em;
    }

    .sidebar > h4, .sidebar > h5 {
        border-top: none; 
        border-bottom: none; 
    }

    .related-links ul a {
        padding: .625em;
    }

    .inline-img {
        margin: 0 1em 1em 0;
    }

    .inline-img br {
        display: none;
    }

    .inline-img img {
        max-width: 100%;
        width: 100%;
    }

    .what-the-money-buys, .stats {
        padding: 1.25em;
    }

    aside.sidebar .stats i.fa {
        position: absolute;
        right: .625em;
        top: .625em;
        font-size: 2.5em;
    }

    aside.sidebar .stats h5 {
        margin-bottom: 1.25em;
        width: 40%;
    }

}

/* ========================================================= */
/* 980px */
@media (max-width:61.25em) {
    .the-content {
        width: 100%;
    }

    .the-content blockquote {
        margin: 0 0 1.25em;
        width: 100%;
        padding: .625em;
    }

    .the-content blockquote p {
        font-size: 80%;
        color: #111;
    }

    div#bbox-root {
        width: 100%;
        margin-top: 1.25em;
    } 
}

/* ========================================================= */
/* max 420px */
@media (max-width: 26.25em) {

    .main-inner > article > h2,
    .main-inner > h2,
    .main-inner > section > h2,
    .single-cstm_news h2 {
        font-size: 2em;
        line-height: 1.1;
        font-weight: 400;
        margin: 0 0 1em;
    }

    .main-inner article {
        width: 100%;
        float: none;
    }

    /* hide main nav */
    .main-nav { display: none; }

    .home h3 p {
        color: #444;
        font-size: 1.25em;
        line-height: 1.3;
    }

    .story-icons hr {
        width: 6em;
        margin: 2em auto;
    }

    .icons-description {
        width: 100%;
    }

    .icons > div {
        margin-bottom: .625em;
    }
    .icons .icon {
        height: 150px; width: 150px;
    }

    .inline-img {
        width: 100%;
    }

    .related-panels h6 {
        font-size: .875em !important;
    }
}

/* ========================================================= */
/* between 768px and 1023px */
@media (min-width: 48em) and (max-width:63.9375em) {

    header nav { display: none; }
    
    .main-inner aside {
        width: 22%;
    }

    .success-list-item,
    .grid-sizer,
    .success-list li.second-post,
    li.ss-title-panel {
        width: 50%;
    }

    .success-list-item img {
        height: 150%;
    }

    footer { min-height: inherit; }
}

/* ========================================================= */
/* max 1200px */
@media (max-width:75em) {
    .success-list-item h4 span span strong em {
        font-size: 1.25em;
    }
}

/* ========================================================= */
/* between 320px and 599px */
@media (min-width:20em) and (max-width:37.4375em) {
    .home .main-inner {
        padding: 1em 0;
    }

    .carousel-title {
        font-size: 2em;
        margin: 0 0 .25em;
    }

    .carousel-excerpt {
        font-size: 80%;
        padding: 0;
        line-height: 1.2;
    }

    .site-introduction div {
        padding: 3em 0px;
    }

    .home h3 p {
        font-size: 1.25em;
    }

    .related-panels li {
        height: 180px;
    }

    .home-related-img, .home-fallback-img, .related-text-panel { height: 50%; }

    .related-panels h6 {
        font-size: 105%;
    }

    .main-inner article h3 {
        font-size: 1em;
        line-height: 1.4;
        margin-bottom: .5em;
    }

    div#bbox-root {
        width: 100%;
        margin-top: 1em;
    }

    div#bbox-root #mongo-form .BBFormContainer .BBFormWideButtonGivingLevels .BBFormRadioAmount {
        padding: 0;
        min-width: 0;
        float: none;
        font-size: 3em;
        display: block;
    }

    div#bbox-root #mongo-form .BBFormContainer .BBFormFieldContainerGivingLevels span:first-child {
        font-size: 1.25em;
    }
    
    .site-introduction,
    .icons-description,
    .icons {
        margin-bottom: 2em;
    }

    .icons-description { width: 100%; }
    
    .icons .icon {
        height: 90px;
        width: 90px;
    }

    .icons > div i {
        font-size: 2em;
    }

    #main ul.news-list li a p,
    #main ul.events-list li a p,
    #main ul.results-list li a p,
    #main ul.news-list a h4,
    #main ul.events-list a h4,
    #main ul.results-list a h4 {
        width: 65%;
    }

    aside.sidebar .stats blockquote p {
        width: 65%;
    }
}

/* ========================================================= */
/* between 600px and 768px */
@media (min-width:37.5em) and (max-width:48em) {
    .carousel-title {
        font-size: 2.5em;
        margin: .25em 0;
    }

    .carousel-excerpt {
        padding: 0;
        font-size: 1em;
    }

    .icons .icon {
        width: 120px;
        height: 120px;
    }
}

/* ========================================================= */
/* between 769px and 1023px */
@media (min-width:48.0625em) and (max-width:63.9375em) {
    .site-introduction p {
        font-size: 1.25em;
    }

    .slider-info {
    }

    .carousel-title {
        font-size: 2.875em;
        margin: .25em 0;
    }

    .carousel-excerpt {
        padding: 0;
        font-size: 1.25em;
    }
}

/* ========================================================= */
/* between 320px and 480px */
@media (min-width:20em) and (max-width:30em) {
    .site-introduction {
        margin: -2em 0px 1.25em;
    }

    .site-introduction div {
        padding: 2.5em 0 1.5em;
    }

    .home h3 p {
        font-size: .9em;
        font-weight: 400;
    }

    h3.icons-title {
        margin: 0px 0px .5em;
    }

    .icons > div {
        margin-bottom: .5em;
    }

    .icons {
        margin-bottom: 0;
    }

    .icons-description {
        margin: 0 auto 1em;
        font-size: .9em;
    }

    .icons .icon {
        height: 70px;
        width: 70px;
    }

    h3.icons-title span {
        padding: 0;
        font-size: 1.2em;
        border: 0;
    }

    #mongo-form .BBFormRadioAmount,
    #mongo-form .BBFormRadioDescription {
        float: none !important;
        display: block;
        text-align: center;
        margin-bottom: .3em !important;
        width: 100% !important;
    }

    #mongo-form .BBFormRadioAmount {
        margin-bottom: 0 !important;
    }

}

/* ========================================================= */
/* max 480px */
@media (max-width: 30em) {
    .large-image {
        height: inherit;
        height: 200px;
    }
}

/* ========================================================= */
/* between 480px and 599px */
@media (min-width: 30.0625em) and (max-width: 37.4375em) {
    .carousel-title {
        font-size: 3em;
        margin: 0 0 .25em;
    }
}

/* ========================================================= */
/* max 580px */
@media (max-width: 36.25em) {
    .large-image-title {
        overflow: visible;
        background: rgb(69, 234, 244);
    }

    .arrow-right { 
        border-bottom: 1em solid rgb(69,234,244);
    }
}

/* ========================================================= */
/* between 600px and 768px */
@media (min-width: 37.5em) and (max-width: 48em) {
    
    #main .main-inner article h3 {
        font-size: 1.25em;
    }
}

/* ========================================================= */
/* between 320px and 400px */
@media (min-width: 20em) and (max-width: 25em) {

    #main ul.events-list a h4 span {
        display: block;
        margin: .75em 0 0;
        background: none;
        color: #E6007E;
        font-size: 65%;
        padding: 0;
    }

    /* qtip */
    .qtip-cstm {
        max-width: 160px; /* Change this? */
        min-width: 80px; /* ...and this! */
        padding: 10px;
    }

    .qtip-default .qtip-titlebar {
        font-size: 90%;
        margin-bottom: .25em;
    }

    .qtip-content {
        line-height: 1.2;
        font-size: 75%;
    }
    
    .what-the-money-buys h5 {
        float: none;
        display: inherit;
        margin: 0 0 10px;
    }
}

/* ========================================================= */
/* max: 900px */
@media (max-width: 60em) {

    aside.sidebar .stats h6 {
        font-size: 2.75em;
        margin-bottom: .25em;
    }
}

/* ========================================================= */
/* max: 600px */
@media (max-width: 37.5em) {

    aside.sidebar .stats i.fa {
        font-size: 1.25em;
    }

    aside.sidebar .stats blockquote p {
        width: 100%;
    }

}








/*.linked-images {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}*/

.linked-images {
    float: left;
    width: 49.5%;
    width: calc( 50% - .125em );
    height: 200px;
    margin-bottom: .25em;
}

.linked-images:nth-of-type(2n+2) {
    float: right;
}

.linked-images:last-of-type,
.linked-images:nth-of-type(1n+3) {
    margin-bottom: 1.25em;
}

.linked-images a {
    background: rgba(0,0,0,.2);
    position: relative;
    display: block;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.linked-images a:hover,
.linked-images a:focus {
    
}

.linked-images a:active {
    position: relative;
    top: 1px;
}

.linked-images a img {
    transition: all .5s ease-in-out;

}

.linked-images a:hover img,
.linked-images a:focus img {
    transform: scale(1.1);
}

.linked-images strong {
    position: absolute;
    font-weight: normal;
    top: .9375em;
    left: .9375em;
    font-size: 1em;
    color: #444;
}

.overlay {
    position: absolute;
    z-index: 1;
    background: rgba(221, 59, 101,.8);
    height: 100%;
    width: 100%;
    transition: all .5s ease-in-out;
}

.linked-images a:hover .overlay,
.linked-images a:focus .overlay {
    background: rgba(221, 59, 101,.15);
}

/*.linked-images figure {
    width: 100%;
    height: 100%;
    z-index: 0;
    margin: 0;
    float: none;
    overflow: hidden;
    background: #c5c5b0;
}*/

.title-overlay {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    height: 100%;
    width: 100%;
}
 
.linked-images h1 {
    padding: 0;
    z-index: 2;
    color: white;
    border: 0;
    width: 80%;
    margin: 0 auto;
    top: 1em;
    left: 0;
    right: 0;
    font-size: 1.2em;
    line-height: 1.05;
    font-family: "ars-maquette-web-n9", "ars-maquette-web", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-style: normal;
    text-align: center;
}

.linked-images a img {
    position: absolute;
    z-index: 0;
    display: block;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    width: 100%;
    height: 100%;
}

@media (max-width: 440px) {

    .linked-images,
    .linked-images:nth-of-type(n+3) {
        width: 100%;
        height: 120px;
        margin-bottom: 3px;
    }

    .linked-images:last-of-type {
        margin: 0 0 1.25em;
    }

    .linked-images a {
        height: 100%;
    }

    .linked-images h1 {
        width: 100%;
        margin-bottom: .3em;
        font-size: 1em;        
    }
    
}

.linked-images + p {
    clear: both;
}