@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh6UVew8.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTedw.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_V1s.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8V1s.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrFJA.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9V1s.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6V1s.ttf) format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7V1s.ttf) format('truetype');
}

@font-face {
    font-family: "OC Format Collage D6";
    src: url("fonts/-OCFormatCollage-D6.eot");
    src: url("fonts/-OCFormatCollage-D6.eot?#iefix") format("embedded-opentype"), url("fonts/-OCFormatCollage-D6.woff2") format("woff2"), url("fonts/-OCFormatCollage-D6.woff") format("woff"), url("fonts/-OCFormatCollage-D6.ttf") format("truetype"), url("fonts/-OCFormatCollage-D6.svg#-OCFormatCollage-D6") format("svg");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OC Format Collage D5";
    src: url("fonts/-OCFormatCollage-D5.eot");
    src: url("fonts/-OCFormatCollage-D5.eot?#iefix") format("embedded-opentype"), url("fonts/-OCFormatCollage-D5.woff2") format("woff2"), url("fonts/-OCFormatCollage-D5.woff") format("woff"), url("fonts/-OCFormatCollage-D5.ttf") format("truetype"), url("fonts/-OCFormatCollage-D5.svg#-OCFormatCollage-D5") format("svg");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OC Format Collage D4";
    src: url("fonts/-OCFormatCollage-D4.eot");
    src: url("fonts/-OCFormatCollage-D4.eot?#iefix") format("embedded-opentype"), url("fonts/-OCFormatCollage-D4.woff2") format("woff2"), url("fonts/-OCFormatCollage-D4.woff") format("woff"), url("fonts/-OCFormatCollage-D4.ttf") format("truetype"), url("fonts/-OCFormatCollage-D4.svg#-OCFormatCollage-D4") format("svg");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OC Format Collage D3";
    src: url("fonts/-OCFormatCollage-D3.eot");
    src: url("fonts/-OCFormatCollage-D3.eot?#iefix") format("embedded-opentype"), url("fonts/-OCFormatCollage-D3.woff2") format("woff2"), url("fonts/-OCFormatCollage-D3.woff") format("woff"), url("fonts/-OCFormatCollage-D3.ttf") format("truetype"), url("fonts/-OCFormatCollage-D3.svg#-OCFormatCollage-D3") format("svg");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OC Format Collage D2";
    src: url("fonts/-OCFormatCollage-D2.eot");
    src: url("fonts/-OCFormatCollage-D2.eot?#iefix") format("embedded-opentype"), url("fonts/-OCFormatCollage-D2.woff2") format("woff2"), url("fonts/-OCFormatCollage-D2.woff") format("woff"), url("fonts/-OCFormatCollage-D2.ttf") format("truetype"), url("fonts/-OCFormatCollage-D2.svg#-OCFormatCollage-D2") format("svg");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OC Format Collage T1";
    src: url("fonts/-OCFormatCollage-T1.eot");
    src: url("fonts/-OCFormatCollage-T1.eot?#iefix") format("embedded-opentype"), url("fonts/-OCFormatCollage-T1.woff2") format("woff2"), url("fonts/-OCFormatCollage-T1.woff") format("woff"), url("fonts/-OCFormatCollage-T1.ttf") format("truetype"), url("fonts/-OCFormatCollage-T1.svg#-OCFormatCollage-T1") format("svg");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OC Format Collage T4";
    src: url("fonts/-OCFormatCollage-T4.eot");
    src: url("fonts/-OCFormatCollage-T4.eot?#iefix") format("embedded-opentype"), url("fonts/-OCFormatCollage-T4.woff2") format("woff2"), url("fonts/-OCFormatCollage-T4.woff") format("woff"), url("fonts/-OCFormatCollage-T4.ttf") format("truetype"), url("fonts/-OCFormatCollage-T4.svg#-OCFormatCollage-T4") format("svg");
    font-style: normal;
    font-display: swap;
}


/**
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-family: 'Lato', sans-serif;
  
      .class {
      font-family: 'OC Format Collage D6';
      font-weight: 900;
      font-style: normal;
          }
  
      .class {
      font-family: 'OC Format Collage D5';
      font-weight: 800;
      font-style: normal;
      }
  
      .class {
      font-family: 'OC Format Collage T1';
      font-weight: 300;
      font-style: normal;
      }
  
      .your-style {
      font-family: 'OC Format Collage T4';
      font-weight: 600;
      font-style: normal;
  }
  */

 :root {
    --blue-color: #1b6bea;
    --orange-color: #ff5300;
    --light-green-color: #85efc2;
    --light-brown: #fcd592;
    --yellow-color: #ffa900;
    --educator-bg: #ff8757;
    --gray-backgound: #f1f1f1;
    --light-gray-background: #fafafa;
    --dark-blue: #003187;
    --darker-blue: #1b2a43;
    --dark-green: #004729;
    --green-color: #00894f;
    --dark-orange: #db2400;
    --circle-orange: #ff621a;
    --form-filter-bg: #7b1d26;
}

* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

body {
    font-family: "Poppins", sans-serif;
    min-height: 100vh;
    margin: 0;
}

 :hover {
    transition: all 0.3s linear;
}


/* Main site wrapper */

#wrapper {
    margin: 10px;
    overflow: hidden;
}

@media screen and (min-width: 992px) {
    #wrapper {
        margin: 0px auto;
    }
}


/* RESET Headings */

h2 {
    font-family: "OC Format Collage D4";
    font-weight: bold;
    font-style: normal;
}

h3,
h4,
.h3,
.h4,
h5 {
    font-family: "OC Format Collage D5";
    font-weight: 800;
    font-style: normal;
}

.h4 {
    color: var(--blue-color);
    margin: 30px 0 0px;
}

#page-node-front .h4 {
    margin: 0px 0 0px;
    font-size: 115%;
}

p {
    font-size: 95%;
    line-height: 24px;
}

@media (min-width: 1400px) {
    p {
        font-size: 100%;
    }
}

a {
    text-decoration: none;
    outline: none;
}

a:focus {
    outline: none;
}

.form-control {
    font-size: 0.9rem;
}


/* The top search and language filter */

.top {
    padding: 0.15rem 0 0.5rem;
}

@media (min-width: 768px) {
    .top {
        padding: 0.5rem 0 0.5rem;
    }
}

.top form {
    margin: 0 20px 0 0;
    position: relative;
}

.top form .search {
    border-radius: 0;
    margin: 0;
    width: 250px;
    border-bottom: 2px solid #ced4da;
}

.top form .search fieldset {
    margin: 0px !important;
    padding: 0px;
}

.top form .search .form-search {
    outline: none;
    width: 245px;
    border: none;
    box-shadow: none;
    padding: 6px 0 6px 24px;
}

.top form .search .form-submit {
    border: none;
    position: absolute;
    left: -6px;
    top: 1px;
    width: 30px;
    text-indent: -100px;
    background: url(../images/search.jpg);
    background-repeat: repeat;
    background-position: center;
    background-repeat: no-repeat;
}

.top i {
    float: left;
    margin: 7px 0 0 0;
}

.top .links {
    padding: 0.65rem 0;
    font-size: 85%;
}

.top .links .nav-link {
    padding: 0px 10px;
    border-right: 1px solid #cecece;
    line-height: 14px;
}

.top .links .nav-link a {
    color: var(--darker-blue);
    text-decoration: none;
}

.top .links .nav-link a:hover {
    text-decoration: underline;
}

.top .links .nav-link:nth-child(3) {
    border-right: none;
}

.top .links .is-active a {
    color: var(--orange-color);
}

.top .lang-dropdown {
    background-color: var(--blue-color);
}

.top .lang-dropdown a {
    color: #ffffff;
}

.top .lang-dropdown a:hover {
    background-color: none;
    color: #000000;
}

.navbar-nav li .dropdown-menu {
    border-radius: 0px;
    border: 0px;
}

.navbar-nav li .dropdown-menu li a {
    color: #000000;
}

.has-search {
    position: relative;
}

.has-search .form-control {
    padding-left: 2.375rem;
    border-radius: 0;
    border-color: #ced4da;
    border-width: 0 0 2px 0;
}

.has-search .form-control:focus {
    box-shadow: none;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}


/* Branding and Navigation */

.navbar {
    background-color: var(--blue-color);
    color: #ffffff;
}

.navbar button {
    border: none;
}

.navbar #navbar-nav li .dropdown-menu li a {
    color: #000000;
}

.navbar-toggler,
.navbar-light .navbar-toggler {
    border: none;
    color: #ffffff;
}

.navbar-collapse {
    margin: 10px 0 5px;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-light .navbar-toggler {
    border: 0px;
}

#navbarNav li {
    text-transform: capitalize;
}

#navbarNav li a {
    color: #ffffff;
    height: 32px;
    padding: 0px;
    margin: 0px 10px;
    font-family: "OC Format Collage D4";
    font-weight: bold;
    font-style: normal;
    font-size: 105%;
}

#navbarNav li a:hover {
    border-bottom: 2px solid var(--light-green-color);
    color: var(--light-green-color);
}

#navbarNav li .dropdown-menu li a {
    color: #000000;
    font-family: "Lato", sans-serif;
    font-weight: normal;
    font-size: 90%;
}

#navbarNav li .dropdown-menu li a:hover {
    color: #333333;
}

.sticky-nav {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    margin: 0px auto;
    z-index: 999;
}

#page-node-front {
    /*.navbar {
          background-color: #f1f1f1;
  
          .navbar-toggler {
              i {
                  color: #ff5300;
              }
          } */
}

#page-node-front .navbar .navbar-brand .logo {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(../images/site-logo.svg) no-repeat;
    width: 200px;
    height: 67px;
    padding-left: 200px;
}

#page-node-front #navbarNav li.nav-item a:hover {
    color: #ff621a;
    border-color: #ff621a;
}

#page-node-front #flexslider-1 {
    margin: 0px;
    border: 0px;
}

#page-node-front #flexslider-1 ul.slides {
    margin: 0px;
    padding: 0px;
}

#page-node-front #flexslider-1 ul.slides li {
    margin: 0px;
    padding: 0px;
}

#page-node-front #flexslider-1 ul.slides li .slideimage_218,
#page-node-front #flexslider-1 ul.slides li .slideimage_219,
#page-node-front #flexslider-1 ul.slides li .slideimage_220,
#page-node-front #flexslider-1 ul.slides li .slideimage_221,
#page-node-front #flexslider-1 ul.slides li .slideimage_222,
#page-node-front #flexslider-1 ul.slides li .slideimage_223,
#page-node-front #flexslider-1 ul.slides li .slideimage_202,
#page-node-front #flexslider-1 ul.slides li .slideimage_203,
#page-node-front #flexslider-1 ul.slides li .slideimage_204,
#page-node-front #flexslider-1 ul.slides li .slideimage_205 {
    height: 470px;
    background-size: cover;
    -webkit-animation: zoomIn 20s linear infinite;
    animation: zoomIn 20s linear infinite;
    position: relative;
    max-height: 470px;
}

@keyframes zoomIn {
    0% {
        background-size: 260%;
    }
    100% {
        background-size: 300%;
    }
}

@media (min-width: 768px) {
    @keyframes zoomIn {
        0% {
            background-size: 210%;
        }
        100% {
            background-size: 250%;
        }
    }
}

@media (min-width: 960px) {
    @keyframes zoomIn {
        0% {
            background-size: 100%;
        }
        100% {
            background-size: 140%;
        }
    }
}

#page-node-front #flexslider-1 ul.slides li .slideimage_218::before,
#page-node-front #flexslider-1 ul.slides li .slideimage_219::before,
#page-node-front #flexslider-1 ul.slides li .slideimage_220::before,
#page-node-front #flexslider-1 ul.slides li .slideimage_221::before,
#page-node-front #flexslider-1 ul.slides li .slideimage_222::before,
#page-node-front #flexslider-1 ul.slides li .slideimage_223::before,
#page-node-front #flexslider-1 ul.slides li .slideimage_202::before,
#page-node-front #flexslider-1 ul.slides li .slideimage_203::before,
#page-node-front #flexslider-1 ul.slides li .slideimage_204::before,
#page-node-front #flexslider-1 ul.slides li .slideimage_205::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.9)), color-stop(100%, rgba(0, 0, 0, 0.9)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 90%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 90%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 90%);
}

@media (min-width: 960px) {
    #page-node-front #flexslider-1 ul.slides li .slideimage_218::before,
    #page-node-front #flexslider-1 ul.slides li .slideimage_219::before,
    #page-node-front #flexslider-1 ul.slides li .slideimage_220::before,
    #page-node-front #flexslider-1 ul.slides li .slideimage_221::before,
    #page-node-front #flexslider-1 ul.slides li .slideimage_222::before,
    #page-node-front #flexslider-1 ul.slides li .slideimage_223::before,
    #page-node-front #flexslider-1 ul.slides li .slideimage_202::before,
    #page-node-front #flexslider-1 ul.slides li .slideimage_203::before,
    #page-node-front #flexslider-1 ul.slides li .slideimage_204::before,
    #page-node-front #flexslider-1 ul.slides li .slideimage_205::before {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 90%);
        background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 90%);
        background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 90%);
        background-size: contain;
        background-repeat: no-repeat;
    }
}

#page-node-front #flexslider-1 ul.slides li .flex-caption {
    padding: 0px;
    position: absolute;
    top: 0;
    height: 100vh;
    width: 89vw;
}

#page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details {
    display: grid;
    padding: 3em;
    margin-top: 10%;
}

@media (min-width: 768px) {
    #page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details {
        grid-template-columns: 1fr 4fr;
        margin-top: 5%;
    }
}

@media (min-width: 960px) {
    #page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details {
        margin-top: 10%;
    }
}

#page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details .left {
    height: auto;
}

#page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details .right {
    background: transparent;
    padding: 1em;
    margin: 0 auto;
    height: auto;
    max-width: 240px;
    z-index: 9;
}

#page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details .right h2 {
    color: #1b6bea;
    font-size: 20px;
}

#page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details .right h2::before {
    display: block;
    content: "Using";
    font-family: "Poppins", sans-serif;
    color: #011c44;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

@media (min-width: 768px) {
    #page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details .right h2 {
        max-width: 330px;
        margin-bottom: 30px;
    }
}

#page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details .right p {
    padding-left: 15px;
    border-left: 4px solid #ff621a;
    font-size: 15px;
    transform: translate3d(0px, 0px, 0px);
    transform-origin: 50% 50% 0px;
}

@media (min-width: 768px) {
    #page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details .right {
        padding: 0px;
    }
}

@media (min-width: 992px) {
    #page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details .right {
        padding: 0;
        margin-right: 125px;
    }
}

#page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details::before {
    content: "";
    background-color: #fff;
    opacity: 0.8;
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 100%;
    height: 60%;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    margin-top: 50px;
}

@media (max-width: 768px) {
    #page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details::before {
        max-width: 270px;
        max-height: 260px;
    }
}

@media (min-width: 768px) {
    #page-node-front #flexslider-1 ul.slides li .flex-caption .slide-details::before {
        margin-top: 10%;
        left: unset;
        right: 158px;
        max-width: 295px;
        max-height: 300px;
    }
}

#page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item {
    height: 470px;
    background-size: cover;
    -webkit-animation: zoomIn 20s linear infinite;
    animation: zoomIn 20s linear infinite;
    position: relative;
    max-height: 470px;
}

@keyframes zoomIn {
    0% {
        background-size: 260%;
    }
    100% {
        background-size: 300%;
    }
}

@media (min-width: 768px) {
    @keyframes zoomIn {
        0% {
            background-size: 210%;
        }
        100% {
            background-size: 250%;
        }
    }
}

@media (min-width: 960px) {
    @keyframes zoomIn {
        0% {
            background-size: 100%;
        }
        100% {
            background-size: 140%;
        }
    }
}

#page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.9)), color-stop(100%, rgba(0, 0, 0, 0.9)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 90%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 90%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 90%);
}

@media (min-width: 960px) {
    #page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item::before {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 90%);
        background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 90%);
        background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 90%);
        background-size: contain;
        background-repeat: no-repeat;
    }
}

#page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details {
    display: grid;
    padding: 3em;
    margin-top: 10%;
}

@media (min-width: 768px) {
    #page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details {
        grid-template-columns: 1fr 4fr;
        margin-top: 5%;
    }
}

@media (min-width: 960px) {
    #page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details {
        margin-top: 10%;
    }
}

#page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details .left {
    height: auto;
}

#page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details .right {
    background: transparent;
    padding: 1em;
    margin: 0 auto;
    height: auto;
    max-width: 240px;
    z-index: 9;
}

#page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details .right h2 {
    color: #1b6bea;
    font-size: 20px;
}

#page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details .right h2::before {
    display: block;
    content: "Using";
    font-family: "Poppins", sans-serif;
    color: #011c44;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

@media (min-width: 768px) {
    #page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details .right h2 {
        max-width: 330px;
        margin-bottom: 30px;
    }
}

#page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details .right p {
    padding-left: 15px;
    border-left: 4px solid #ff621a;
    font-size: 15px;
    transform: translate3d(0px, 0px, 0px);
    transform-origin: 50% 50% 0px;
}

@media (min-width: 768px) {
    #page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details .right {
        padding: 0px;
    }
}

@media (min-width: 992px) {
    #page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details .right {
        padding: 0;
        margin-right: 125px;
    }
}

#page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details::before {
    content: "";
    background-color: #fff;
    opacity: 0.8;
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 100%;
    height: 60%;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    margin-top: 50px;
}

@media (max-width: 768px) {
    #page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details::before {
        max-width: 270px;
        max-height: 260px;
    }
}

@media (min-width: 768px) {
    #page-node-front #slider-wrapper #carouselExampleControls .carousel-inner .carousel-item .slide-details::before {
        margin-top: 10%;
        left: unset;
        right: 160px;
        max-width: 280px;
        max-height: 300px;
    }
}

#page-node-front #upcoming-events .cb-gradient {
    transition: all 0.3s linear;
}

@media (min-width: 768px) {
    #page-node-front #upcoming-events .cb-gradient {
        padding: 20% 2rem 2rem;
    }
}

#page-node-front #upcoming-events .cb-gradient h5 {
    color: #ffa900;
    font-size: 85%;
}

@media (min-width: 768px) {
    #page-node-front #upcoming-events .cb-gradient h5 {
        font-size: 105%;
    }
}

#page-node-front #upcoming-events .cb-gradient a {
    display: none;
    border-bottom: 2px solid #ffa900;
    width: max-content;
}

#page-node-front #upcoming-events .cb-gradient a:hover {
    background-color: #ffa900;
}

#page-node-front #upcoming-events .cb-gradient:hover {
    transition: all 0.3s linear;
}

#page-node-front #upcoming-events .cb-gradient:hover a {
    display: block;
    transition: all 0.3s linear;
}

#page-node-front #latest-stories .cb-gradient {
    transition: all 0.3s linear;
}

@media (min-width: 768px) {
    #page-node-front #latest-stories .cb-gradient {
        padding: 20% 2rem 2rem;
    }
}

@media (min-width: 992px) {
    #grid {
        display: grid;
    }
}

@media screen and (min-width: 960px) {
    #grid {
        /* display grid columns tablet potrait layout */
        grid-template-columns: 45% 55%;
    }
}

#grid .title {
    position: relative;
    min-height: 305px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 568px) {
    #grid .title {
        margin: 0px auto;
    }
}

#grid .title::after {
    content: "";
    background: var(--orange-color) url(../images/04.png);
    background-repeat: no-repeat;
    background-size: 85%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 100%;
    margin: 0 auto;
    width: 90%;
    height: 85%;
}

@media (max-width: 768px) {
    #grid .title::after {
        max-width: 270px;
        max-height: 260px;
    }
}

@media (min-width: 768px) {
    #grid .title::after {
        width: 290px;
        height: 300px;
    }
}

@media (min-width: 992px) {
    #grid .title::after {
        top: 18%;
        left: -10%;
    }
}

#grid .title h2 {
    position: relative;
    z-index: 99;
    font-size: 1.35rem;
}

@media screen and (min-width: 576px) {
    #grid .title h2 {
        font-size: 1.75rem;
    }
}

@media screen and (min-width: 768px) {
    #grid .title h2 {
        font-size: 2.15rem;
    }
}

#grid .title h2.reach {
    color: #ffffff;
    margin: 0px auto;
    font-size: 120%;
    width: 235px;
    top: -20px;
}

@media (min-width: 992px) {
    #grid-left {
        display: grid;
    }
}

@media screen and (min-width: 960px) {
    #grid-left {
        /* display grid columns tablet potrait layout */
        grid-template-columns: 55% 45%;
        margin: 0rem 0;
        padding: 0;
    }
}

#grid-left .title {
    position: relative;
    min-height: 305px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 568px) {
    #grid-left .title {
        margin: 0px auto;
    }
}

@media screen and (min-width: 1024px) {
    #grid-left .title {
        max-width: 385px;
        max-height: 355px;
    }
}

#grid-left .title::after {
    content: "";
    background-color: var(--orange-color);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 100%;
    margin: 0 auto;
    width: 90%;
    height: 85%;
}

@media (max-width: 768px) {
    #grid-left .title::after {
        max-width: 270px;
        max-height: 260px;
    }
}

@media (min-width: 768px) {
    #grid-left .title::after {
        width: 290px;
        height: 300px;
        top: 25px;
    }
}

@media (min-width: 992px) {
    #grid-left .title::after {
        top: 9%;
        left: -10%;
    }
}

@media (min-width: 1200px) {
    #grid-left .title::after {
        top: 20%;
        left: -10%;
    }
}

#grid-left .title h2 {
    position: relative;
    z-index: 99;
    font-size: 120%;
    width: 235px;
}

@media screen and (min-width: 768px) {
    #grid-left .title h2 {
        font-size: 130%;
    }
}

#grid-left .title h2.stories-title {
    margin-top: -15%;
    padding: 5px 5%;
    width: 235px;
    text-align: center;
    color: #ffffff;
}

@media (min-width: 768px) {
    #grid-left .title h2.stories-title {
        margin-top: 5%;
    }
}

@media (min-width: 1200px) {
    #grid-left .title h2.stories-title {
        margin-top: 20%;
        padding: 5px 10%;
    }
}

#grid-left .title .more {
    position: absolute;
    color: #ffffff;
    bottom: 40%;
    font-size: 75%;
    z-index: 99;
    font-weight: 800;
    padding: 0px;
    border-bottom: 3px solid #ffffff;
    border-radius: 0px;
    outline: none;
}

@media screen and (min-width: 768px) {
    #grid-left .title .more {
        bottom: 28%;
    }
}

#grid-left .title .more:hover {
    background: #ffffff;
    color: var(--green-color);
    outline: none;
}

@media (min-width: 768px) {
    #grid-events {
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    #grid-events {
        display: grid;
    }
}

@media screen and (min-width: 960px) {
    #grid-events {
        /* display grid columns tablet potrait layout */
        grid-template-columns: 45% 55%;
    }
}

#grid-events .title {
    position: relative;
    min-height: 305px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#grid-events .title::after {
    content: "";
    background-color: var(--blue-color);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 100%;
    margin: 0 auto;
    width: 305px;
    height: 305px;
}

@media (max-width: 768px) {
    #grid-events .title::after {
        max-width: 270px;
        max-height: 260px;
    }
}

@media (min-width: 768px) {
    #grid-events .title::after {
        max-width: 285px;
        max-height: 290px;
        top: 8%;
    }
}

@media (min-width: 1200px) {
    #grid-events .title::after {
        top: 15%;
        left: 5%;
    }
}

#grid-events h2 {
    position: relative;
    z-index: 99;
    font-size: 120%;
}

@media screen and (min-width: 992px) {
    #grid-events h2 {
        font-size: 130%;
    }
}

#grid-events h2.event-title {
    width: 235px;
    text-align: center;
    color: #ffffff;
    margin: -18% 0 0 0;
}

@media (min-width: 768px) {
    #grid-events h2.event-title {
        margin: 0% 0 0 0;
    }
}

@media (min-width: 992px) {
    #grid-events h2.event-title {
        margin: -8% 0 0 5%;
    }
}

#grid-events .more {
    position: absolute;
    color: #ffffff;
    bottom: 45%;
    font-size: 75%;
    z-index: 99;
    font-weight: 800;
    padding: 0px;
    border-bottom: 3px solid #ffffff;
    border-radius: 0px;
    outline: none;
}

@media (min-width: 768px) {
    #grid-events .more {
        bottom: 28%;
    }
}

@media (min-width: 992px) {
    #grid-events .more {
        bottom: 35%;
    }
}

@media (min-width: 1200px) {
    #grid-events .more {
        bottom: 40%;
        margin-left: 5%;
    }
}

#grid-events .more:hover {
    background-color: #ffffff;
    color: var(--orange-color);
    outline: none;
}

@media (min-width: 768px) {
    .event-teaser {
        padding: 0rem 0rem 0.5rem;
    }
}

#educator {
    background-color: #e2e2e2;
    overflow: hidden;
    background-image: url(../images/03.png);
    background-repeat: no-repeat;
    background-position: 20% 100%;
}

@media screen and (min-width: 768px) {
    #educator {
        background-image: url(../images/03.png);
        background-position: 08% 100%;
    }
}

#educator .wrap {
    /* background: url(../images/plants-border.svg) no-repeat; */
    background-position: bottom;
    background-size: contain;
    padding-bottom: 2rem;
}

@media screen and (min-width: 576px) {
    #educator .wrap {
        padding-bottom: 5rem;
    }
}

@media screen and (min-width: 1024px) {
    #educator .wrap {
        padding-bottom: 1.5rem;
        margin: 1rem 0 0 0;
    }
}

#educator .educ-items {
    clear: both;
}

#educator .educ-items .educ-item {
    padding: 15px;
    margin: 5px 0px;
    transition: all 0.3s linear;
}

#educator .educ-items .educ-item h3 {
    color: var(--dark-orange);
}

#educator .educ-items .educ-item p {
    text-align: left;
    color: #000;
}

#educator .educ-items .educ-item:hover {
    background-color: var(--yellow-color);
    transition: all 0.3s linear;
}

#educator .educ-items .educ-item:hover h3 {
    color: #ffffff;
}

@media (max-width: 768px) {
    #latest-stories .card,
    #upcoming-events .card {
        margin: 0px 7%;
    }
}

@media (min-width: 768px) {
    #latest-stories .card,
    #upcoming-events .card {
        margin: 7% 10%;
    }
}

@media (min-width: 992px) {
    #latest-stories .card,
    #upcoming-events .card {
        margin: 5% 5%;
    }
}

#latest-stories,
#gray-region {
    background-color: var(--gray-backgound);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}

#upcoming-events,
#light-gray-region {
    background-color: var(--light-gray-background);
    overflow: hidden;
}

#upcoming-events {
    overflow: hidden;
}

@media (min-width: 768px) {
    #upcoming-events {
        background-position: top left;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

#blue-region {
    background-color: var(--blue-color);
}

#blue-region .sign-wrap {
    background-size: contain;
    background-repeat: no-repeat;
    padding: 2.5rem 1.5rem;
    position: relative;
}

@media (min-width: 768px) {
    #blue-region .sign-wrap::before {
        content: "";
        background-image: url(../images/01.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: 0px;
        top: -28px;
        width: 100px;
        height: 101px;
    }
}

@media (min-width: 992px) {
    #blue-region .sign-wrap {
        padding: 2rem 2.3rem 2rem 4.2rem;
    }
}

#blue-region .sign-wrap .row {
    padding: 15px 5px;
    display: flex;
}

#blue-region .sign-wrap .row .col {
    margin: 0 10px;
    border: 0;
}

#blue-region .sign-wrap .signup {
    background-color: var(--dark-blue);
    padding: 30px 15px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    #blue-region .sign-wrap .signup {
        width: 48%;
        margin-bottom: 0px;
        padding: 5% 5%;
    }
}

#blue-region .sign-wrap .signup .h3 {
    margin-bottom: 20px;
}

#blue-region .sign-wrap .signup span {
    color: var(--yellow-color);
    font-family: "Poppins", sans-serif;
    font-size: 85%;
    display: block;
    padding: 5px 0 0 0;
}

#blue-region .sign-wrap .signup input {
    border-radius: 0;
}

#blue-region .sign-wrap .signup button {
    background-color: var(--yellow-color);
    font-weight: bold;
    color: #fff;
    border: 0px;
    border-radius: 0;
}

#blue-region .sign-wrap .signup button:hover {
    background-color: var(--green-color);
}

#blue-region .sign-wrap .signup form {
    font-family: "Poppins", sans-serif;
    font-size: 115%;
    color: var(--yellow-color);
    font-weight: 700;
}

@media (min-width: 576px) {}

@media (min-width: 992px) {}

#blue-region .sign-wrap .signup form .mailchimp-newsletter-mergefields {
    float: left;
    width: 64%;
    margin-top: 10px;
}

@media (min-width: 992px) {
    #blue-region .sign-wrap .signup form .mailchimp-newsletter-mergefields {
        width: 75%;
    }
}

#blue-region .sign-wrap .signup form label {
    display: none;
    box-shadow: none;
}

#blue-region .sign-wrap .signup form input {
    outline: none;
    float: left;
}

#blue-region .sign-wrap .signup form input:focus {
    outline: none;
    box-shadow: none;
}

#blue-region .sign-wrap .signup form .form-email {
    border: none;
}

#blue-region .sign-wrap .signup form .form-submit {
    background-color: var(--yellow-color);
    font-weight: bold;
    color: #fff;
    border: 0px;
    border-radius: 0;
    width: 35%;
    margin-top: 10px;
}

#blue-region .sign-wrap .signup form .form-submit:hover {
    background-color: var(--green-color);
}

@media (min-width: 992px) {
    #blue-region .sign-wrap .signup form .form-submit {
        width: 25%;
    }
}

#blue-region .sign-wrap .bg-light {
    position: relative;
}

@media (min-width: 768px) {
    #blue-region .sign-wrap .bg-light::after {
        content: "";
        background-image: url(../images/02.png);
        background-repeat: no-repeat;
        position: absolute;
        background-size: 75%;
        left: 11px;
        bottom: -45px;
        width: 77px;
        height: 70px;
    }
}

@media (min-width: 768px) {
    #blue-region .sign-wrap .bg-light {
        width: 48%;
        margin-left: 20px;
    }
}

#orange-region {
    background-color: var(--orange-color);
}

.community .h5 {
    font-size: 100%;
}

.community a {
    border: 1px solid #fff;
    border-radius: 20px;
    width: 32px;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    margin: 0px 5px;
}

.community a:hover {
    background-color: var(--light-green-color);
}

@media (min-width: 768px) {
    .community {
        position: relative;
    }
    .community::after {
        content: "";
        background-image: url(../images/10.png);
        background-repeat: no-repeat;
        position: absolute;
        bottom: -39px;
        left: 30px;
        width: 58px;
        height: 56px;
    }
}

.cb-gradient {
    position: absolute;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #111010);
    bottom: 0;
    left: 0;
    transition: all 0.3s linear;
}

@media (min-width: 768px) {
    .cb-gradient {
        padding: 20% 2rem 20px;
    }
}

.cb-gradient h5 {
    color: #ffffff;
    font-size: 85%;
    margin: 10px 0px 5px;
}

@media screen and (min-width: 768px) {
    .cb-gradient h5 {
        font-size: 105%;
    }
}

.cb-gradient p {
    color: #ffffff;
    font-size: 0.8rem;
    visibility: hidden;
    height: 0;
    font-size: 70%;
    line-height: 18px;
}

@media (min-width: 992px) {
    .cb-gradient p {
        font-size: 80%;
    }
}

.cb-gradient:hover {
    transition: all 0.3s linear;
}

@media (min-width: 540px) {
    .cb-gradient:hover p {
        visibility: visible;
        height: auto;
    }
}

.cb-gradient .btn {
    background: none;
    border: 0;
    border-bottom: 2px solid #00eb88;
    color: #ffffff;
    font-weight: 800;
    font-size: 60%;
    border-radius: 0;
    padding: 2px 0;
    margin: 0px;
}

.cb-gradient .btn:hover {
    background-color: #00eb88;
    color: #000000;
}

.cb-gradient span.date {
    background: #ffffff;
    border-radius: 5px;
    display: inline-block;
    color: var(--dark-orange);
    padding: 3px 10px;
    font-size: 0.65rem;
    font-weight: 600;
}

.cb-gradient span.location {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0 0.75rem;
}


/** About us page styles **/

#page-node-about .navbar,
#login .navbar {
    background-color: var(--orange-color);
}

#page-node-about .navbar ul li a,
#login .navbar ul li a {
    text-shadow: none;
}

#page-node-about .navbar ul li a:hover,
#login .navbar ul li a:hover {
    color: #00eb88;
}

#page-node-about .navbar ul li.active a,
#login .navbar ul li.active a {
    color: #00eb88;
    border-bottom: solid;
}

#page-node-about .navbar .navbar-brand .logo,
#login .navbar .navbar-brand .logo {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(../images/site-logo.svg) no-repeat;
    width: 200px;
    height: 67px;
    padding-left: 200px;
}

.power-play {
    padding: 2.5rem 0.75rem;
}

@media screen and (min-width: 992px) {
    .power-play {
        padding: 3.5rem 0.75rem;
        display: grid;
    }
}

@media screen and (min-width: 992px) {
    .power-play {
        grid-template-columns: 60% 38%;
    }
}

.power-play .text-wrapper {
    background-color: var(--orange-color);
    padding: 1.5rem;
    color: #ffffff;
}

.power-play .text-wrapper h2 {
    margin: 0.5rem 0 1.5rem;
}

@media (min-width: 768px) {
    .power-play .text-wrapper h2 {
        margin: -1rem 0 3.5rem;
    }
}

@media screen and (min-width: 992px) {
    .power-play .text-wrapper {
        background: none;
        position: relative;
        text-align: center;
    }
    .power-play .text-wrapper::before {
        content: "";
        top: 10px;
        right: 0;
        bottom: 0;
        left: -50px;
        background-color: var(--orange-color);
        position: absolute;
        border-radius: 50%;
        margin: -10px;
        margin-left: 10px;
        margin-right: -20px;
    }
    .power-play .text-wrapper h2,
    .power-play .text-wrapper p {
        position: relative;
    }
    .power-play .text-wrapper h2 {
        font-size: 1.45rem;
        padding-left: 5%;
    }
    .power-play .text-wrapper p {
        font-size: 0.95rem;
        padding: 0px 25px;
        margin-left: 4%;
    }
}

@media screen and (min-width: 992px) and (min-width: 992px) {
    .power-play .text-wrapper::before {
        margin-left: 60px;
        width: 590px !important;
        height: 590px !important;
    }
}

@media screen and (min-width: 992px) and (min-width: 1200px) {
    .power-play .text-wrapper::before {
        left: -10px;
    }
}

@media screen and (min-width: 992px) and (min-width: 992px) {
    .power-play .text-wrapper h2 {
        font-size: 210%;
    }
}

@media screen and (min-width: 992px) and (min-width: 992px) {
    .power-play .text-wrapper p {
        padding: 0px 18px;
        margin-left: 5%;
    }
}

@media screen and (min-width: 992px) {
    .power-play .text-wrapper {
        padding: 3.5rem 2.5rem;
        padding-top: 9.5rem;
    }
}

@media screen and (min-width: 1400px) {
    .power-play .text-wrapper {
        margin: 0 7%;
    }
}

.power-play .image-wrapper img {
    z-index: 99;
    position: relative;
    top: 2%;
    width: 100%;
    height: auto;
}

.methodology {
    padding: 0.5rem 1.75rem;
    padding-bottom: 3rem;
}

@media screen and (min-width: 768px) {
    .methodology {
        position: relative;
        padding: 1rem 4.75rem;
        padding-bottom: 5rem;
    }
    .methodology::after {
        content: "";
        background-image: url(../images/08.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        right: -10px;
        top: 22%;
        width: 150px;
        height: 215px;
    }
}

@media screen and (min-width: 992px) {
    .methodology {
        padding: 1rem 7rem;
        padding-bottom: 5rem;
    }
}

.methodology h2 {
    color: var(--dark-orange);
    margin: 3rem 0 1.2rem;
}

.methodology p {
    color: #000000;
}

@media (min-width: 992px) {
    .methodology p {
        margin-right: 20%;
    }
}

.methodology p a {
    color: var(--dark-orange);
    font-size: 75%;
    text-decoration: none;
    font-weight: 600;
}

.methodology p a:hover {
    text-decoration: underline;
}

@media (min-width: 768px) {
    .methodology p a {
        font-size: 100%;
    }
}

.methodology img {
    padding: 1rem 0;
    width: 100%;
    height: auto;
}

.location {
    padding: 1.75rem 1.25rem;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .location {
        padding: 3rem;
    }
}

@media screen and (min-width: 960px) {
    .location {
        padding: 2rem 3rem 4rem;
    }
}

.location h2 {
    color: #ffffff;
    padding: 0.7rem 0 0.8rem;
}

.location .map-work {
    overflow: hidden;
    position: relative;
    height: 0;
    padding-bottom: 50%;
}

.location .map-work iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}


/** End about page styles**/


/** Play Library **/

.play-library {
    padding: 2.5rem 0.75rem;
}

@media screen and (min-width: 768px) {
    .play-library {
        padding: 1rem 0.75rem;
        display: grid;
        grid-template-columns: 52% 38%;
        gap: 3rem;
    }
}

@media screen and (min-width: 992px) {
    .play-library {
        grid-template-columns: 55% 40%;
    }
}

.play-library .text-wrapper {
    background-color: var(--dark-blue);
    padding: 1.5rem;
    color: #ffffff;
}

@media screen and (min-width: 1200px) {
    .play-library .text-wrapper {
        background: none;
        position: relative;
        text-align: center;
    }
    .play-library .text-wrapper::before {
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: var(--dark-blue);
        position: absolute;
        border-radius: 50%;
        margin: -10px;
        margin-left: 10px;
        margin-right: -20px;
    }
    .play-library .text-wrapper h2,
    .play-library .text-wrapper p {
        position: relative;
    }
    .play-library .text-wrapper h2 {
        font-size: 1.45rem;
        padding-left: 5%;
    }
    .play-library .text-wrapper p {
        font-size: 0.95rem;
        padding: 0px 25px;
        margin-left: 4%;
    }
}

@media screen and (min-width: 1200px) and (min-width: 992px) {
    .play-library .text-wrapper::before {
        margin-left: 60px;
        width: 545px !important;
        height: 545px !important;
    }
}

@media screen and (min-width: 1200px) and (min-width: 992px) {
    .play-library .text-wrapper h2 {
        font-size: 210%;
    }
}

@media screen and (min-width: 1200px) and (min-width: 992px) {
    .play-library .text-wrapper p {
        padding: 0px 18px;
        margin-left: 12%;
    }
}

@media screen and (min-width: 992px) {
    .play-library .text-wrapper {
        padding: 3.5rem 2.5rem;
        padding-top: 5.5rem;
    }
}

.play-library .text-wrapper h2 {
    margin: 0.5rem 0 1.5rem;
}

@media (min-width: 768px) {
    .play-library .text-wrapper h2 {
        margin: -1rem 0 2.5rem;
    }
}

.play-library .image-wrapper {
    margin: 30px 0 0 0;
}

@media (min-width: 768px) {
    .play-library .image-wrapper {
        margin: 0px;
    }
}

.play-library .image-wrapper img {
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .play-library .image-wrapper img {
        z-index: 99;
        position: relative;
        top: 0;
        width: 92%;
    }
}

#audio {
    background-color: var(--light-gray-background);
}

#audio .wrap h2 {
    margin: 0.85rem 0;
    padding: 0.85rem 0;
    color: var(--green-color);
    border-bottom: 1px solid var(--orange-color);
}

@media (min-width: 768px) {
    #audio .wrap h2 {
        margin: 0 0 1.25rem;
        padding: 0 0 0.85rem;
    }
}

@media (min-width: 768px) {
    #audio .wrap h4 {
        font-size: 1.2rem;
    }
}

#audio .wrap .audio-series {
    margin: 0 0 30px;
    padding: 0;
}

#audio .wrap .audio-series li {
    list-style: none;
    padding: 0.65rem 0;
    border-bottom: 1px solid #ececec;
}

#audio .wrap .audio-series li:last-child {
    border-bottom: 0px;
}

#library {
    background-color: var(--gray-backgound);
    padding: 20px 0;
}

#library .wrap .library-list {
    display: grid;
    grid-row-gap: 1em;
    list-style: none;
}

@media (min-width: 768px) {
    #library .wrap .library-list {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1em;
    }
}

#library .wrap .library-list li {
    padding: 8em 1em 1em 1em;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: grid;
    grid-template-columns: 9fr 1fr;
    position: relative;
}

#library .wrap .library-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    background: -webkit-linear-gradient(top, rgba(243, 240, 241, 0) 0%, rgba(27, 27, 27, 0.9) 100%);
    background: -o-linear-gradient(top, rgba(243, 240, 241, 0) 0%, rgba(27, 27, 27, 0.9) 100%);
    background: -ms-linear-gradient(top, rgba(243, 240, 241, 0) 0%, rgba(27, 27, 27, 0.9) 100%);
}

#library .wrap .library-list li .title,
#library .wrap .library-list li .icon,
#library .wrap .library-list li a {
    z-index: 9;
}

#library .wrap .library-list li a {
    width: max-content;
    height: max-content;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    border-bottom: 3px solid var(--blue-color);
    font-size: 80%;
}

#library .wrap .library-list li a:hover {
    background-color: var(--blue-color);
}

#library .wrap .library-list li h2 {
    font-size: 120%;
}

@media (min-width: 992px) {
    #library .wrap .library-list li {
        padding: 22em 2em 2em 2em;
    }
}

#library .wrap .library-list li:nth-child(1) {
    background-image: url("../images/Educators.jpg");
}

#library .wrap .library-list li:nth-child(2) {
    background-image: url("../images/Caregivers.png");
}

#library .wrap .library-list li:nth-child(3) {
    background-image: url("../images/System-Actors.jpg");
}

#library .wrap .library-list li:nth-child(4) {
    background-image: url("../images/l4@2x.png");
}

#page-node-play-library .navbar .navbar-brand .logo {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(../images/site-logo.svg) no-repeat;
    width: 200px;
    height: 67px;
    padding-left: 200px;
}

#page-node-play-library .intro-wrapper {
    background: #1b6bea;
}

@media (min-width: 768px) {
    #page-node-play-library .intro-wrapper {
        background: url(../images/07.png), #1b6bea;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 11%;
    }
}

@media (min-width: 1200px) {
    #page-node-play-library .intro-wrapper .text-wrapper {
        width: 90%;
        height: auto;
        margin: 1rem;
        padding: 9rem 2rem;
    }
}

@media (min-width: 992px) {
    #page-node-play-library .intro-wrapper .image-wrapper {
        margin-right: 45px;
    }
}

#page-node-play-library #library {
    background: #f1f1f1 !important;
}

@media (min-width: 768px) {
    #page-node-play-library #library {
        background-size: contain;
        background-repeat: no-repeat;
    }
}


/** Contact page styles **/

#page-node-contact-us .navbar {
    background: #f1f1f1;
}

#page-node-contact-us #navbarNav ul li.active {
    color: #ff5300;
}

#page-node-contact-us #navbarNav ul li a {
    color: #011c44;
}

#page-node-contact-us #navbarNav ul li a:hover {
    color: #ff5300;
    border-bottom: 2px solid #ff5300;
}

#page-node-contact-us #gray-region h2 {
    color: #ff5300;
}

@media (min-width: 768px) {
    #page-node-contact-us #gray-region .location {
        padding: 3rem 3rem 0 3rem;
    }
}

@media (min-width: 960px) {
    #page-node-contact-us #gray-region .location {
        padding: 3rem 3rem 0 3rem;
    }
}

.contact-info {
    padding: 1.75rem 1.25rem;
}

@media screen and (min-width: 992px) {
    .contact-info {
        padding: 3rem 3.9rem;
        margin: 0;
    }
}

.contact-info h2 {
    color: var(--blue-color);
    margin: 1rem 0;
}

@media (min-width: 992px) {
    .contact-info h2 {
        margin: 1.7rem 0;
    }
}

.contact-info .col {
    color: #f7f7f7;
    background: var(--blue-color);
}

@media screen and (min-width: 768px) {
    .contact-info .col {
        text-align: center;
    }
}

@media (min-width: 768px) {
    .contact-info div.col:nth-child(1) {
        position: relative;
    }
    .contact-info div.col:nth-child(1)::after {
        content: "";
        background-image: url(../images/06.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: 0px;
        bottom: -40px;
        right: 100%;
        width: 100px;
        height: 101px;
    }
}

.contact-info div.col:nth-child(2) {
    background: var(--dark-blue);
}

.contact-info div.col:nth-child(3) {
    background: var(--darker-blue);
}

.webform h2 {
    color: var(--blue-color);
}

@media (min-width: 992px) {
    .webform h2 {
        margin-bottom: 2rem;
    }
}

@media (min-width: 992px) {
    .webform {
        margin: 0 1.8rem;
        padding-bottom: 2rem;
    }
    .webform .contact-form {
        flex-flow: column;
        flex: 4;
    }
}

.webform form {
    background: var(--blue-color);
    padding: 2.25rem 1.25rem;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .webform form::after {
        content: "";
        background-image: url(../images/05.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        right: -18px;
        bottom: 0px;
        width: 115px;
        height: 115px;
    }
}

.webform form fieldset {
    margin-bottom: 1.5rem !important;
}

@media (min-width: 768px) {
    .webform form fieldset {
        margin-bottom: 0rem !important;
    }
}

.webform form fieldset input,
.webform form fieldset textarea {
    border-radius: 0;
}

.webform form .form-submit {
    background: var(--darker-blue) url(../images/paper-plane.png) 95% 45%;
    background-size: 10%;
    background-repeat: no-repeat;
    color: #f7f7f7;
    border-radius: 0;
    font-weight: 600;
    padding: 20px auto;
}

@media (min-width: 992px) {
    .webform form {
        flex-flow: column;
        padding: 4rem 4rem 2rem;
    }
    .webform form .form-item-name {
        float: left;
        width: 48%;
    }
    .webform form .form-item-email {
        float: right;
        width: 48%;
    }
    .webform form .form-item-subject {
        clear: both;
    }
    .webform form .form-submit {
        padding: 10px 40px;
        max-width: 200px;
    }
}

@media (min-width: 992px) {
    .webform form .form-control {
        margin-bottom: 25px;
    }
}

.webform form .webform-confirmation__message {
    color: #a3d8ff;
}

.webform form .webform-confirmation__back {
    margin: 1rem 0;
}

.webform form .webform-confirmation__back a {
    color: #f1f1f1;
    text-decoration: none;
}

.webform form .webform-confirmation__back a:hover {
    text-decoration: underline;
}


/** End contact page styles **/

#page-node-our-stories .navbar {
    background: #f1f1f1;
}

#page-node-our-stories #navbarNav ul li.active {
    color: #ff5300;
}

#page-node-our-stories #navbarNav ul li a {
    color: #011c44;
}

#page-node-our-stories #navbarNav ul li a:hover {
    color: #ff5300;
    border-bottom: 2px solid #ff5300;
}

#page-node-our-stories .intro-wrapper {
    overflow: hidden;
    padding: 40px 0;
}

@media (min-width: 768px) {
    #page-node-our-stories .intro-wrapper {
        background: #f1f1f1;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

@media (min-width: 992px) {
    #page-node-our-stories .intro-wrapper {
        padding: 30px 0 0px;
    }
}

#page-node-our-stories .intro-wrapper h2 {
    padding-bottom: 10px;
}

@media (min-width: 992px) {
    #page-node-our-stories .intro-wrapper h2 {
        margin-bottom: 10px;
    }
}

@media (min-width: 992px) {
    #page-node-our-stories .intro-wrapper .card {
        max-width: 840px;
        height: auto;
    }
}

#page-node-our-stories .intro-wrapper .card .cb-gradient {
    transition: all 1s linear;
}

@media (min-width: 768px) {
    #page-node-our-stories .intro-wrapper .card .cb-gradient {
        padding: 80px 45px 45px 45px;
    }
}

#page-node-our-stories .intro-wrapper .card .cb-gradient .btn {
    padding: 0px;
}

@media (min-width: 768px) {
    #page-node-our-stories .intro-wrapper .card .cb-gradient .btn {
        font-size: 70%;
    }
}

#page-node-our-stories .intro-wrapper .card .cb-gradient:hover {
    transition: all 1s linear;
}

#page-node-our-stories #content-Wrapper {
    padding: 10px 0;
}

#page-node-our-stories #content-Wrapper ul {
    display: block;
    margin: 0;
    padding: 0;
}

#page-node-our-stories #content-Wrapper ul li.sky-list-item {
    display: block;
    position: relative;
    overflow: visible;
    height: auto;
    margin-bottom: 9.09091vw;
    background-color: #355b98;
    transition: all 0.3s linear;
    font-size: 125%;
}

#page-node-our-stories #content-Wrapper ul li.sky-list-item:hover {
    background-color: #ff8757;
    transition: all 0.3s linear;
}

#page-node-our-stories #content-Wrapper ul li.sky-list-item:hover .list-item-info h2 {
    color: #fff;
    transition: all 0.3s linear;
}

#page-node-our-stories #content-Wrapper ul li.sky-list-item:hover .list-item-info p {
    color: #fff;
    transition: all 0.3s linear;
}

#page-node-our-stories #content-Wrapper ul li.sky-list-item a {
    text-decoration: none;
}

@media (min-width: 768px) {
    #page-node-our-stories #content-Wrapper ul li.sky-list-item a {
        display: flex;
    }
}

#page-node-our-stories #content-Wrapper ul li.sky-list-item .sky-crop {
    width: 77.27273vw;
    max-height: 55.27273vw;
    margin-left: -4.54545vw;
    flex-shrink: 0;
    height: auto;
    align-self: stretch;
    position: relative;
    overflow: hidden;
}

#page-node-our-stories #content-Wrapper ul li.sky-list-item .sky-crop img {
    object-fit: cover;
    object-position: left 64.5% top 25.25%;
    height: 100%;
    width: 100%;
}

@media (min-width: 768px) {
    #page-node-our-stories #content-Wrapper ul li.sky-list-item .sky-crop {
        order: 2;
        width: 36.273vw;
        max-height: 36.273vw;
        overflow: visible;
    }
}

@media (min-width: 992px) {
    #page-node-our-stories #content-Wrapper ul li.sky-list-item .sky-crop {
        width: 32.64vw;
        height: 20.39vw;
    }
}

#page-node-our-stories #content-Wrapper ul li.sky-list-item .list-item-info {
    padding: 2em;
    color: #fff;
}

#page-node-our-stories #content-Wrapper ul li.sky-list-item .list-item-info h2 {
    margin-bottom: 15px;
    transition: all 0.3s linear;
    font-size: 120%;
}

@media (min-width: 992px) {
    #page-node-our-stories #content-Wrapper ul li.sky-list-item .list-item-info h2 {
        margin-bottom: 28px;
    }
}

#page-node-our-stories #content-Wrapper ul li.sky-list-item .list-item-info p {
    margin-bottom: 0;
    font-size: 80%;
    transition: all 0.3s linear;
}

@media (min-width: 768px) {
    #page-node-our-stories #content-Wrapper ul li.sky-list-item .list-item-info {
        order: 1;
        padding-right: 100px;
    }
}

@media (min-width: 992px) {
    #page-node-our-stories #content-Wrapper ul li.sky-list-item .list-item-info {
        padding: 50px 90px 50px 50px;
    }
}

@media (min-width: 768px) {
    #page-node-our-stories #content-Wrapper ul li.sky-list-item {
        margin-bottom: 0.545vw;
    }
}

@media (min-width: 992px) {
    #page-node-our-stories #content-Wrapper ul li.sky-list-item {
        max-width: 100vw;
    }
}

#page-node-our-stories #content-Wrapper ul li.sky-list-item:nth-child(odd) {
    left: 0px;
}

#page-node-our-stories #content-Wrapper ul li.sky-list-item:nth-last-child(1) {
    margin-bottom: 0;
}

#page-node-publications .intro-wrapper {
    overflow: hidden;
}

@media (min-width: 768px) {
    #page-node-publications .intro-wrapper {
        /*background: url(../images/publication-accent@2x.png), #f1f1f1 !important;
              background-size: contain !important; */
    }
}

@media (min-width: 960px) {
    #page-node-publications .intro-wrapper {
        padding: 10px 0 0px !important;
    }
}

@media (min-width: 992px) {
    #page-node-publications .intro-wrapper #news li {
        margin-bottom: 1.545vw !important;
    }
}

@media (min-width: 960px) {
    #page-node-publications .intro-wrapper h2.title {
        margin-top: 140px;
        margin-bottom: 24px;
    }
}

@media (min-width: 960px) {
    #page-node-publications .intro-wrapper .card {
        margin-bottom: 90px;
        margin-top: 90px;
    }
}

#page-node-publications .intro-wrapper .card .cb-gradient {
    transition: all 0.3s linear;
}

@media (min-width: 768px) {
    #page-node-publications .intro-wrapper .card .cb-gradient {
        padding: 45px;
    }
}

@media (min-width: 768px) {
    #page-node-publications .intro-wrapper .card .cb-gradient span {
        font-size: 16px;
        margin: 10px 0;
    }
}

#page-node-publications .intro-wrapper .card .cb-gradient:hover {
    transition: all 0.3s linear;
}

#page-node-publications #content-Wrapper {
    background: #f8f8f8;
    overflow: hidden;
}

#page-node-publications #content-Wrapper ul li {
    background: transparent;
}

#page-node-publications .navbar,
#resources .navbar,
#caregivers .navbar {
    background-color: var(--gray-backgound);
}

#page-node-publications #navbarNav ul li.active,
#resources #navbarNav ul li.active,
#caregivers #navbarNav ul li.active {
    color: #ff5300;
}

#page-node-publications #navbarNav ul li a,
#resources #navbarNav ul li a,
#caregivers #navbarNav ul li a {
    color: #011c44;
}

#page-node-publications #navbarNav ul li a:hover,
#resources #navbarNav ul li a:hover,
#caregivers #navbarNav ul li a:hover {
    color: #ff5300;
    border-bottom: 2px solid #ff5300;
}

#page-node-publications .intro-wrapper,
#resources .intro-wrapper,
#caregivers .intro-wrapper {
    background-color: var(--gray-backgound);
    padding: 40px 0;
}

#page-node-publications .intro-wrapper h2,
#resources .intro-wrapper h2,
#caregivers .intro-wrapper h2 {
    color: #ff5300;
    padding-bottom: 10px;
}

#page-node-publications .intro-wrapper .card h3,
#resources .intro-wrapper .card h3,
#caregivers .intro-wrapper .card h3 {
    color: #fff;
    margin: 0;
}

#page-node-publications .intro-wrapper .card span,
#resources .intro-wrapper .card span,
#caregivers .intro-wrapper .card span {
    padding: 0;
    background: none;
    color: #00eb88;
}

#page-node-publications .intro-wrapper ul,
#resources .intro-wrapper ul,
#caregivers .intro-wrapper ul {
    display: block;
    margin: 0;
    padding: 40px 0 0 0;
}

#page-node-publications .intro-wrapper ul li.sky-list-item,
#resources .intro-wrapper ul li.sky-list-item,
#caregivers .intro-wrapper ul li.sky-list-item {
    display: block;
    position: relative;
    overflow: visible;
    height: auto;
    margin-bottom: 9.09091vw;
    background-color: #355b98;
}

#page-node-publications .intro-wrapper ul li.sky-list-item a,
#resources .intro-wrapper ul li.sky-list-item a,
#caregivers .intro-wrapper ul li.sky-list-item a {
    text-decoration: none;
}

@media (min-width: 768px) {
    #page-node-publications .intro-wrapper ul li.sky-list-item a,
    #resources .intro-wrapper ul li.sky-list-item a,
    #caregivers .intro-wrapper ul li.sky-list-item a {
        display: flex;
    }
}

#page-node-publications .intro-wrapper ul li.sky-list-item .sky-crop,
#resources .intro-wrapper ul li.sky-list-item .sky-crop,
#caregivers .intro-wrapper ul li.sky-list-item .sky-crop {
    width: 77.27273vw;
    max-height: 55.27273vw;
    margin-left: -4.54545vw;
    flex-shrink: 0;
    height: auto;
    align-self: stretch;
    position: relative;
    overflow: hidden;
}

#page-node-publications .intro-wrapper ul li.sky-list-item .sky-crop img,
#resources .intro-wrapper ul li.sky-list-item .sky-crop img,
#caregivers .intro-wrapper ul li.sky-list-item .sky-crop img {
    object-fit: cover;
    object-position: left 64.5% top 25.25%;
    height: 100%;
    width: 100%;
}

@media (min-width: 768px) {
    #page-node-publications .intro-wrapper ul li.sky-list-item .sky-crop,
    #resources .intro-wrapper ul li.sky-list-item .sky-crop,
    #caregivers .intro-wrapper ul li.sky-list-item .sky-crop {
        order: 2;
        width: 36.273vw;
        max-height: 36.273vw;
    }
}

@media (min-width: 992px) {
    #page-node-publications .intro-wrapper ul li.sky-list-item .sky-crop,
    #resources .intro-wrapper ul li.sky-list-item .sky-crop,
    #caregivers .intro-wrapper ul li.sky-list-item .sky-crop {
        width: 32.64vw;
        height: 20.39vw;
    }
}

#page-node-publications .intro-wrapper ul li.sky-list-item .list-item-info,
#resources .intro-wrapper ul li.sky-list-item .list-item-info,
#caregivers .intro-wrapper ul li.sky-list-item .list-item-info {
    padding: 2em;
    color: #fff;
}

#page-node-publications .intro-wrapper ul li.sky-list-item .list-item-info h2,
#resources .intro-wrapper ul li.sky-list-item .list-item-info h2,
#caregivers .intro-wrapper ul li.sky-list-item .list-item-info h2 {
    margin-bottom: 15px;
    color: #fff;
}

@media (min-width: 992px) {
    #page-node-publications .intro-wrapper ul li.sky-list-item .list-item-info h2,
    #resources .intro-wrapper ul li.sky-list-item .list-item-info h2,
    #caregivers .intro-wrapper ul li.sky-list-item .list-item-info h2 {
        margin-bottom: 28px;
    }
}

#page-node-publications .intro-wrapper ul li.sky-list-item .list-item-info p,
#resources .intro-wrapper ul li.sky-list-item .list-item-info p,
#caregivers .intro-wrapper ul li.sky-list-item .list-item-info p {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    #page-node-publications .intro-wrapper ul li.sky-list-item .list-item-info,
    #resources .intro-wrapper ul li.sky-list-item .list-item-info,
    #caregivers .intro-wrapper ul li.sky-list-item .list-item-info {
        padding: 4em;
    }
}

@media (min-width: 768px) {
    #page-node-publications .intro-wrapper ul li.sky-list-item,
    #resources .intro-wrapper ul li.sky-list-item,
    #caregivers .intro-wrapper ul li.sky-list-item {
        margin-bottom: 1.54545vw;
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-column-gap: 1em;
    }
}

@media (min-width: 992px) {
    #page-node-publications .intro-wrapper ul li.sky-list-item,
    #resources .intro-wrapper ul li.sky-list-item,
    #caregivers .intro-wrapper ul li.sky-list-item {
        max-width: 82.2899vw;
        grid-column-gap: 4em;
    }
}

#page-node-publications .intro-wrapper ul li.sky-list-item:nth-last-child(1),
#resources .intro-wrapper ul li.sky-list-item:nth-last-child(1),
#caregivers .intro-wrapper ul li.sky-list-item:nth-last-child(1) {
    margin-bottom: 0;
}

#page-node-publications .intro-wrapper ul.side-nav,
#resources .intro-wrapper ul.side-nav,
#caregivers .intro-wrapper ul.side-nav {
    list-style: none;
    padding: 0;
}

#page-node-publications .intro-wrapper ul.side-nav li,
#resources .intro-wrapper ul.side-nav li,
#caregivers .intro-wrapper ul.side-nav li {
    background-color: #ff8757;
    padding: 1em 2em;
}

#page-node-publications .intro-wrapper ul.side-nav li:nth-child(1),
#resources .intro-wrapper ul.side-nav li:nth-child(1),
#caregivers .intro-wrapper ul.side-nav li:nth-child(1) {
    padding-top: 2em;
}

#page-node-publications .intro-wrapper ul.side-nav li:nth-last-child(1),
#resources .intro-wrapper ul.side-nav li:nth-last-child(1),
#caregivers .intro-wrapper ul.side-nav li:nth-last-child(1) {
    padding-bottom: 2em;
}

#page-node-publications .intro-wrapper ul.side-nav li a,
#resources .intro-wrapper ul.side-nav li a,
#caregivers .intro-wrapper ul.side-nav li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 120%;
    font-weight: 600;
}

#page-node-publications #content-Wrapper,
#resources #content-Wrapper,
#caregivers #content-Wrapper {
    padding: 40px 0;
}

#page-node-publications #content-Wrapper h2,
#resources #content-Wrapper h2,
#caregivers #content-Wrapper h2 {
    color: #ff5300;
    margin-bottom: 30px;
}

#page-node-publications #content-Wrapper h4,
#resources #content-Wrapper h4,
#caregivers #content-Wrapper h4 {
    font-family: "Poppins", sans-serif;
    color: #011c44;
    margin-bottom: 15px;
}

@media (min-width: 992px) {
    #page-node-publications #content-Wrapper h4,
    #resources #content-Wrapper h4,
    #caregivers #content-Wrapper h4 {
        margin-bottom: 30px;
    }
}

#page-node-publications #content-Wrapper ul,
#resources #content-Wrapper ul,
#caregivers #content-Wrapper ul {
    display: grid;
    grid-row-gap: 1.5em;
}

@media (min-width: 768px) {
    #page-node-publications #content-Wrapper ul,
    #resources #content-Wrapper ul,
    #caregivers #content-Wrapper ul {
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 1.5rem;
        grid-row-gap: 2rem;
    }
}

@media (min-width: 992px) {
    #page-node-publications #content-Wrapper ul,
    #resources #content-Wrapper ul,
    #caregivers #content-Wrapper ul {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin-bottom: 80px !important;
    }
}

#page-node-publications #content-Wrapper ul li,
#resources #content-Wrapper ul li,
#caregivers #content-Wrapper ul li {
    padding: 0;
    border: none;
    background: #e4e4e4;
}

#page-node-publications #content-Wrapper ul li img,
#resources #content-Wrapper ul li img,
#caregivers #content-Wrapper ul li img {
    width: 100%;
    height: auto;
}

#page-node-publications #content-Wrapper ul li .title,
#resources #content-Wrapper ul li .title,
#caregivers #content-Wrapper ul li .title {
    font-weight: 600;
    color: #011c44;
    margin-bottom: 15px;
}

#page-node-publications #content-Wrapper ul li p,
#resources #content-Wrapper ul li p,
#caregivers #content-Wrapper ul li p {
    font-size: 75%;
}

#page-node-publications #content-Wrapper ul li a,
#resources #content-Wrapper ul li a,
#caregivers #content-Wrapper ul li a {
    text-decoration: none;
    color: #011c44;
    margin-right: 20px;
    border-bottom: 3px solid;
}

#page-node-publications #content-Wrapper ul li a.view,
#resources #content-Wrapper ul li a.view,
#caregivers #content-Wrapper ul li a.view {
    border-color: #fea813;
    font-size: 85%;
}

#page-node-publications #content-Wrapper ul li a.view:hover,
#resources #content-Wrapper ul li a.view:hover,
#caregivers #content-Wrapper ul li a.view:hover {
    background-color: #fea813;
    color: #ffffff;
}

#page-node-publications #content-Wrapper ul li a.download,
#resources #content-Wrapper ul li a.download,
#caregivers #content-Wrapper ul li a.download {
    border-color: #0fe88a;
    font-size: 85%;
}

#page-node-publications #content-Wrapper ul li a.download:hover,
#resources #content-Wrapper ul li a.download:hover,
#caregivers #content-Wrapper ul li a.download:hover {
    background-color: #0fe88a;
    color: #ffffff;
}

#page-node-publications #content-Wrapper ul li span.file a,
#resources #content-Wrapper ul li span.file a,
#caregivers #content-Wrapper ul li span.file a {
    font-size: 85%;
    border-bottom: 3px solid #0fe88a;
}

#page-node-publications #content-Wrapper ul li span.file a:hover,
#resources #content-Wrapper ul li span.file a:hover,
#caregivers #content-Wrapper ul li span.file a:hover {
    background-color: #0fe88a;
    color: #ffffff;
}

#resources .intro-wrapper,
#caregivers .intro-wrapper {
    padding: 0px;
}

#resources .resource-educ,
#caregivers .resource-educ {
    padding: 3.5rem 0.75rem 0;
}

@media screen and (min-width: 768px) {
    #resources .resource-educ,
    #caregivers .resource-educ {
        background-image: url(../images/boy.png);
        background-position: 95% 0;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

#resources .resource-educ .text p,
#caregivers .resource-educ .text p {
    color: #5c5c5c;
}

@media (min-width: 768px) {
    #resources .resource-educ .text,
    #caregivers .resource-educ .text {
        width: 70%;
        padding: 2rem 0.75rem;
    }
}

@media (min-width: 992px) {
    #resources .resource-educ .text,
    #caregivers .resource-educ .text {
        padding: 4rem 1.75rem 5rem 10rem;
    }
}

#resources .resource-educ .form-filter,
#caregivers .resource-educ .form-filter {
    background-color: var(--form-filter-bg);
    padding: 1.5rem 1.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    #resources .resource-educ .form-filter,
    #caregivers .resource-educ .form-filter {
        width: 75%;
    }
}

@media (min-width: 768px) {
    #resources .resource-educ .form-filter form,
    #caregivers .resource-educ .form-filter form {
        padding: 0.5rem 0 0.5rem 2rem;
    }
}

@media (min-width: 768px) {
    #resources .resource-educ .form-filter form .form-row,
    #caregivers .resource-educ .form-filter form .form-row {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
    }
}

#resources .resource-educ .form-filter form .form-row fieldset,
#caregivers .resource-educ .form-filter form .form-row fieldset {
    margin: 0px 0 10px !important;
}

#resources .resource-educ .form-filter form .form-row fieldset label,
#caregivers .resource-educ .form-filter form .form-row fieldset label {
    color: #e5e5e5;
    font-size: 75%;
    margin: 0px;
    padding: 0px;
}

#resources .resource-educ .form-filter form .form-row .form-item-title,
#caregivers .resource-educ .form-filter form .form-row .form-item-title {
    flex: 2.5;
}

#resources .resource-educ .form-filter form .form-row .js-form-item-field-country-target-id,
#caregivers .resource-educ .form-filter form .form-row .js-form-item-field-country-target-id {
    flex: 1.3;
}

#resources .resource-educ .form-filter form .form-row .form-item-age-group,
#caregivers .resource-educ .form-filter form .form-row .form-item-age-group {
    flex: 1.8;
}

#resources .resource-educ .form-filter form .form-row input,
#caregivers .resource-educ .form-filter form .form-row input,
#resources .resource-educ .form-filter form .form-row select,
#caregivers .resource-educ .form-filter form .form-row select {
    border-radius: 0px;
    outline: none;
    box-shadow: none;
}

#resources .resource-educ .form-filter form .form-row .form-submit,
#caregivers .resource-educ .form-filter form .form-row .form-submit {
    background-color: var(--circle-orange);
    border: 0px;
    color: #333333;
    height: max-content;
    flex: 1;
    margin-top: 10px;
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    #resources .resource-educ .form-filter form .form-row .form-submit,
    #caregivers .resource-educ .form-filter form .form-row .form-submit {
        margin-top: 25px;
    }
}

#resources .resource-educ .form-filter form .form-control,
#caregivers .resource-educ .form-filter form .form-control {
    width: 100%;
    color: #757474;
}

#resources .resource-educ .form-filter form .form-control:focus,
#caregivers .resource-educ .form-filter form .form-control:focus {
    box-shadow: none;
    outline: none;
}

#caregivers .resource-educ {
    padding: 3.5rem 0.75rem 0;
}

@media screen and (min-width: 768px) {
    #caregivers .resource-educ {
        background-image: url(../images/girl-2.png);
        background-position: 95% 0;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

#caregivers .resource-educ .text p {
    color: #5c5c5c;
}

@media (min-width: 768px) {
    #caregivers .resource-educ .text {
        width: 70%;
        padding: 2rem 0.75rem;
    }
}

@media (min-width: 992px) {
    #caregivers .resource-educ .text {
        padding: 4rem 1.75rem 5rem 10rem;
    }
}

#caregivers .resource-educ .form-filter {
    background-color: var(--darker-blue);
    padding: 1.5rem 1.5rem;
    width: 95%;
}

@media (min-width: 992px) {
    #caregivers .resource-educ .form-filter form {
        padding: 0.5rem 0 0.5rem 2rem;
    }
}

#caregivers .resource-educ .form-filter form .form-control {
    width: 100%;
    color: #757474;
}

#caregivers .resource-educ .form-filter form .form-control:focus {
    box-shadow: none;
    outline: none;
}

#page-node-news-article .navbar {
    background: #faf7f7;
}

#page-node-news-article #navbarNav ul li.active {
    color: #ff5300;
}

#page-node-news-article #navbarNav ul li a {
    color: #011c44;
}

#page-node-news-article #navbarNav ul li a:hover {
    color: #ff5300;
    border-bottom: 2px solid #ff5300;
}

#page-node-news-article .intro-wrapper {
    padding: 40px 0;
    background: #faf7f7;
}

@media (min-width: 768px) {
    #page-node-news-article .intro-wrapper {
        background: #faf7f7 !important;
        background-size: contain !important;
    }
}

@media (min-width: 992px) {
    #page-node-news-article .intro-wrapper {
        padding: 50px 0 50px;
    }
}

#page-node-news-article .intro-wrapper h2 {
    color: #ff5300;
    padding-bottom: 10px;
}

@media (min-width: 992px) {
    #page-node-news-article .intro-wrapper h2 {
        margin-bottom: 15px;
    }
}

#page-node-news-article .intro-wrapper .subtitle {
    font-size: 1.25rem;
    color: #888888;
}

@media (min-width: 768px) {
    #page-node-news-article .intro-wrapper .subtitle {
        font-size: 1.15rem;
        font-style: italic;
    }
}

#page-node-news-article .intro-wrapper .posted {
    border-left: 5px solid var(--orange-color);
    padding-left: 15px;
    color: #888888;
}

#page-node-news-article .intro-wrapper .featured-image img {
    width: 100%;
    height: auto;
}

#page-node-news-article .intro-wrapper .lead-img-caption {
    margin-bottom: 2em;
    color: #858585;
    font-size: 80%;
    padding: 5px;
}

@media (min-width: 992px) {
    #page-node-news-article .intro-wrapper .lead-img-caption {
        margin-bottom: 2em;
    }
}

#page-node-news-article .intro-wrapper .body img {
    width: 100%;
    height: auto;
}

#page-node-news-article .intro-wrapper .body p {
    color: #011c44;
    line-height: 1.6;
}

@media (min-width: 992px) {
    #page-node-news-article .intro-wrapper .body p {
        line-height: 1.8;
        margin-bottom: 34px;
    }
}

#page-node-news-article .intro-wrapper .body p i {
    font-weight: 200;
    font-style: normal;
}

#page-node-news-article .intro-wrapper .body h1 {
    font-family: "OC Format Collage D4";
    color: #236fe7;
}

#page-node-news-article .intro-wrapper .body h2 {
    color: #ff5411;
}

#page-node-news-article .intro-wrapper .body h3 {
    font-family: "OC Format Collage D2";
    font-weight: 600;
    color: #011c44;
}

#page-node-news-article .intro-wrapper .body h6 {
    font-family: "OC Format Collage D6";
}

@media (min-width: 992px) {
    #page-node-news-article .intro-wrapper .body figure {
        position: relative;
        margin-bottom: 50px;
    }
}

#page-node-news-article .intro-wrapper .body figure .caption-wrap {
    background: #ff5300;
    padding: 0.65em;
}

@media (min-width: 992px) {
    #page-node-news-article .intro-wrapper .body figure .caption-wrap {
        max-width: 65%;
        left: 0px;
        position: absolute;
        bottom: -25px;
    }
}

#page-node-news-article .intro-wrapper .body figure .caption-wrap p {
    margin: 0;
    color: #fff;
    font-weight: 200;
    font-style: italic;
    font-size: 82%;
}

#page-node-news-article .intro-wrapper .body .play-element img {
    width: 70%;
    height: auto;
}

#page-node-news-article .intro-wrapper .side-bar {
    background: #faf7f7;
    padding: 100px 0 40px 0;
    z-index: 9;
}

#page-node-news-article .intro-wrapper .side-bar h5 {
    font-family: "Poppins", sans-serif;
    color: #011c44;
    line-height: 1.6;
    font-weight: 600;
    font-size: 110%;
    margin-bottom: 20px;
}

#page-node-news-article .intro-wrapper .side-bar .btn {
    background: #ff5300;
    color: #fff;
    text-transform: uppercase;
    font-size: 80%;
    padding: 6px 25px;
    border-radius: 25px;
}

#page-node-news-article .intro-wrapper .side-bar .social {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eaeaea;
}

#page-node-news-article .intro-wrapper .side-bar .social a {
    text-decoration: none;
    margin-right: 6px;
    width: 36px;
    height: 36px;
    border: 1px solid #eaeaea;
    padding: 6px;
    border-radius: 20px;
    display: inline-block;
    text-align: center;
    color: #011c44;
    transition: all 0.3s linear;
}

#page-node-news-article .intro-wrapper .side-bar .social a:hover {
    background-color: #00eb88;
    color: #fff;
    border: none;
    transition: all 0.3s linear;
}

#page-node-news-article .intro-wrapper .side-bar .article-tags {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eaeaea;
}

#page-node-news-article .intro-wrapper .side-bar .article-tags h3 {
    font-size: 95%;
}

#page-node-news-article .intro-wrapper .side-bar .article-tags a {
    background: #cecece;
    padding: 3px 6px;
    text-decoration: none;
    color: #333333;
    margin: 3px;
    font-size: 75%;
    float: left;
}

#page-node-news-article .intro-wrapper .side-bar .article-tags a:hover {
    color: #000000;
    text-decoration: underline;
}

#page-node-event .navbar-toggler {
    color: #db2400;
}

#page-node-event .navbar {
    background-color: #faf7f7;
}

#page-node-event #navbarNav ul li.active {
    color: #ff5300;
}

#page-node-event #navbarNav ul li a {
    color: #011c44;
}

#page-node-event #navbarNav ul li a:hover {
    color: #ff5300;
    border-bottom: 2px solid #ff5300;
}

#page-node-event #main-content {
    background-color: #faf7f7;
    padding: 40px 10px;
}

@media (min-width: 768px) {
    #page-node-event #main-content {
        background: url(../images/event-elements@2x.png), #faf7f7 !important;
        background-size: contain !important;
    }
}

@media (min-width: 960px) {
    #page-node-event #main-content {
        padding: 80px 0 50px 0;
    }
}

#page-node-event .event-details {
    background-color: #fff;
    padding: 1em;
    margin-bottom: 40px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.024), 0 6.7px 5.3px rgba(0, 0, 0, 0.038), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.022), 0 41.8px 33.4px rgba(0, 0, 0, 0.026);
}

#page-node-event .event-details .title p {
    color: #011c44;
    font-weight: 600;
}

@media (min-width: 960px) {
    #page-node-event .event-details .title p {
        font-size: 22px;
        margin: 0;
    }
}

@media (min-width: 768px) {
    #page-node-event .event-details .title {
        padding-right: 1em;
        border-right: 2px solid #d1dff4;
    }
}

@media (min-width: 960px) {
    #page-node-event .event-details .title {
        padding-right: 2em;
    }
}

#page-node-event .event-details .time .date {
    display: grid;
    grid-template-columns: 1fr 10fr;
    color: #cb3700;
    font-weight: 600;
}

#page-node-event .event-details .time .date i {
    margin-top: 3px;
}

#page-node-event .event-details .time .event-location {
    display: grid;
    grid-template-columns: 1fr 10fr;
    color: #6c63ff;
    font-weight: 600;
}

#page-node-event .event-details .time .event-location i {
    margin-top: 3px;
}

@media (min-width: 768px) {
    #page-node-event .event-details .time {
        padding-left: 1em;
        margin: auto 0;
    }
}

@media (min-width: 960px) {
    #page-node-event .event-details .time {
        padding-left: 2em;
    }
}

@media (min-width: 768px) {
    #page-node-event .event-details {
        display: grid;
        grid-template-columns: 4fr 2fr;
        margin: -6% 0 0 3%;
        z-index: 9;
        position: absolute;
        width: 75%;
        min-height: 96px;
        border-radius: 10px;
    }
}

@media (min-width: 1025px) {
    #page-node-event .event-details {
        margin: -4% 0 0 5%;
        width: 960px;
        padding: 2em;
    }
}

#page-node-event .body {
    margin-bottom: 40px;
}

#page-node-event .body p {
    color: #011c44;
}

@media (min-width: 768px) {
    #page-node-event .body {
        margin: 100px 0 40px 0;
    }
}

@media (min-width: 960px) {
    #page-node-event .body {
        margin: 160px 0 100px 0;
    }
}

#page-node-event .more-events h2 {
    color: #db2400;
    margin-bottom: 20px;
}

#page-node-event .more-events .cb-gradient {
    padding: 1em 1em 1.5em 1em;
}

@media (min-width: 768px) {
    #page-node-event .more-events .events-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 1em;
    }
}

#page-node-event .more-events ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#page-node-event .more-events ul li {
    margin: 0px;
    padding: 0px;
}


/* Search page styles */

.search-results form {
    background: #cccccc;
    padding: 1rem;
}

@media (min-width: 768px) {
    .search-results form {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.5rem;
    }
}

.search-results form label {
    font-size: 0.85rem;
}

.search-results form fieldset {
    margin: 0px 0 10px !important;
}

@media (min-width: 768px) {
    .search-results form fieldset {
        flex: 5;
    }
}

.search-results form fieldset input,
.search-results form fieldset select {
    border-radius: 0px;
    outline: none;
    box-shadow: none;
}

.search-results form .form-submit {
    background-color: var(--circle-orange);
    border-radius: 0px;
    border: 0px;
    color: #ffffff;
    font-weight: bold;
    flex: 1;
    margin-bottom: 10px;
}

.search-results form .search-help-link {
    display: none;
}

.search-results h2 {
    margin: 1.5rem 0 0.5rem;
}

.search-results ol.node_search-results {
    background: none;
}

.search-results ol.node_search-results li {
    background: none;
    border: 0px;
    border-bottom: 1px dotted #ccc;
    padding: 1.5rem 0 0.5rem;
}

.search-results ol.node_search-results li h3 {
    font-size: 1.05rem;
    line-height: 1.35rem;
    font-family: "Atkinson Hyperlegible", sans-serif;
    font-weight: 600;
}

.search-results ol.node_search-results li h3 a {
    text-decoration: none;
    color: var(--blue-color);
}

.search-results ol.node_search-results li p {
    font-size: 0.85rem;
}

.search-results ol.node_search-results li:last-child {
    border-bottom: 0px;
}

.section-heading {
    font-family: "Lato", sans-serif;
    margin: 30px 0 20px;
    border-bottom: 3px solid #000000;
    padding: 5px 0;
}

.video-wrapper {
    overflow: hidden;
    position: relative;
    height: 0;
    padding-bottom: 50%;
}

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

footer {
    border-bottom: 10px solid var(--orange-color);
    /* background-image: url(../images/footer-accent.png); */
    background-position: top left;
    background-size: contain;
}

footer h5 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: #011c44;
}

footer .partner-wrap {
    text-align: center;
}

@media (min-width: 992px) {
    footer .partner-wrap {
        width: 90%;
        margin: 0 auto;
    }
}

@media (min-width: 768px) {
    footer .partner-wrap span {
        vertical-align: middle;
        display: inherit;
        margin: auto 0;
    }
}

footer .partner-wrap span img {
    height: 48px;
    width: auto;
}

footer .partner-wrap span img:hover {
    transform: scale(1.2);
}

@media (min-width: 768px) {
    footer .partner-wrap span img {
        height: 74px;
    }
}

footer .copyright {
    border-top: 1px solid #00894f;
    margin-top: 3rem;
}

@media (min-width: 992px) {
    footer .copyright {
        margin-bottom: 2rem !important;
    }
}

footer .copyright .to-top img {
    transform: rotate(-90deg);
    padding: 10px 12px;
    margin-left: 5px;
}

footer .copyright .to-top::before {
    content: "";
    background-color: #ff5300;
    height: 50px;
    width: 50px;
    display: block;
    position: absolute;
    z-index: -9;
    border-radius: 30px;
    transition: all 0.3s linear;
}

footer .copyright .to-top:hover::before {
    background-color: #db2400;
    transition: all 0.3s linear;
}

footer .copyright .back-to-top {
    right: 6px;
    bottom: 15px;
}

footer h4 {
    color: var(--dark-green);
    font-weight: 600;
}

footer h6 {
    color: var(--green-color);
    text-transform: uppercase;
    font-weight: 600;
}

footer p {
    margin: 0 0 4px;
    font-size: 0.9rem;
}

footer p>span {
    margin-right: 5px;
}


/* ---------- LESS ENDS HERE  --- */