@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900');

  @import url('https://fonts.googleapis.com/css?family=Work+Sans');

  @font-face {
    font-family: 'BlackerExtraBold';
    src: url('../webfonts/TTF/BlackerDisplay-ExtraBold.ttf') format('truetype');
    src: url('../webfonts/OTF/BlackerDisplay-ExtraBold.otf') format('opentype');
  }
  @font-face {
    font-family: 'BlackerTextRegular';
    src: url('../webfonts/TTF/BlackerText-Book.ttf') format('truetype');
    src: url('../webfonts/OTF/BlackerText-Book.otf') format('opentype');
  }
  @font-face {
    font-family: 'BlackerTextLightItalic';
    src: url('../webfonts/TTF/BlackerText-LightItalic.ttf') format('truetype');
    src: url('../webfonts/OTF/BlackerText-LightItalic.otf') format('opentype');
  }
  @font-face {
    font-family: 'BlackerProDisplayExtraBold';
    src: url('../webfonts/pro/TTF/Blacker-Pro-Display-Extrabold.ttf') format('truetype');
  }
  @font-face {
    font-family: 'BlackerProDisplayLight';
    src: url('../webfonts/pro/TTF/Blacker-Pro-Display-Light.ttf') format('truetype');
  }
  @font-face {
    font-family: 'BlackerProDisplayLightItalic';
    src: url('../webfonts/pro/TTF/Blacker-Pro-Display-Light-Italic.ttf') format('truetype');
  }
        
body {
    padding: 0;
    margin: 0;
    background-color: #F9F9F9;
    -webkit-font-smoothing: antialiasing;
}

body * {
    box-sizing: border-box;
}

/*--- TOOLS ---*/

/* MAIN COLOR #16ac9d */

a:link, a:visited {
    text-decoration: none;
}

.hidden {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
}
.clearfix {
    clear: both;
    width:100%;
}
.col75 {
    width:25%;
}
.col50 {
    width:50%;
}
.col25 {
    width:25%;
}
.col33 {
    width:33.33%
}
.float-left {
    float:left;
}
.float-right {
    float:right;
}

/*--- SOCIAL ICONS ---*/
.social-bar-wrapper {
    position: absolute;
    clip: rect(0, auto, auto, 0);
    height: 100%;
    top: 0;
    width: 100%;
}
.social-bar {
    position: fixed;
    left: 0;
    top: 0;
    width: 8%;
    height: 100vh;
    display: flex;
    align-items: center;
    z-index: 315;
}
.social-icons {
    display: grid;
    width: 100%;
    min-height: 120px;
}
div.social-icon {
    width: 100%;
    height: 20px;
    display: block;
}
.social-icon .social-svg {
    width: 100%;
    height: 20px;
}
#social-bar .social-icons g path {
    fill:#333;
}
footer .social-icons g path,
#social-bar-slider .social-icons g path {
    fill:#FFF;
    transition: all 0.5s linear;
}
#social-bar-side .social-icons g path {
    fill:#333;
    transition: all 0.5s linear;
}
footer .social-icons a:hover g path,
#social-bar-side .social-icons a:hover g path,
#social-bar-slider .social-icons a:hover g path {
    fill:#19ac9d
}



/*--- TOP BAR ---*/
.header {
    position: sticky;
    position: -webkit-sticky;
    top: -52px;
    transition: all 0.5s ease-in-out;
    z-index: 100;
}
.header.sticky {
    top:0;
}
.main-nav {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 52px;
    z-index: 100;
    background-color: transparent !important;
    transition: all 0.3s ease;
}

body.CityDetailPage #main-nav, body.NewsDetailPage #main-nav, body.EventsDetailPage #main-nav, body.OurCitiesMapPage #main-nav, body.Page.no-sidebar #main-nav {
    background-color: rgb(87, 88, 91)!important;
}

body.CityDetailPage.menu-open #main-nav, body.NewsDetailPage.menu-open #main-nav, body.EventsDetailPage.menu-open #main-nav {
    background-color: transparent!important;
}

body.OurCitiesMapPage #social-bar-side {
    display: none;
}

.main-nav .main-nav-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    z-index: 1;
}
.main-nav .main-nav-content {
    margin: 0 auto;
    max-width: 1300px;
    padding: 0 22px;
    position: relative;
    z-index: 2;
}
.main-nav .main-nav-content::before, .main-nav .main-nav-content::after {
    content: ' ';
    display: table;
}

/* LOGO */
.main-nav .logo {
    font-size: 24px;
    line-height: 1;
    cursor: default;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    height: 52px;
    width:210px;
    white-space: nowrap;
    position:relative;
    z-index: 10;
}
.main-nav .logo a {
    width: 365px;
    height: 62px;
    display: inline-block;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    padding: 8px 0;
    overflow: hidden;
}
@keyframes hideLogo {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes showLogo {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.main-nav .logo svg {
    position: absolute;
    left: 0;
    opacity:0;
}
.main-nav .logo #Logo_1.hide {
    animation-name: hideLogo;
    animation-duration: 0.3s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
}
.main-nav .logo #Logo_1.show {
    animation-name: showLogo;
    animation-duration: 0.3s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
}
.main-nav .logo #Logo_2 {
    opacity:0;
}
.main-nav .logo #Logo_2.hide {
    animation-name: hideLogo;
    animation-duration: 0.3s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
}
.main-nav .logo #Logo_2.show {
    animation-name: showLogo;
    animation-duration: 0.3s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
}
/* LOGO ENDS */

/* MENU */
.main-nav .main-nav-menu {
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -.01em;
    float: right;
    margin-top: 0;
    padding-top: 18px;
    position:relative;
    z-index: 999;
}
.main-nav .main-nav-menu-items {
    margin: 0;
    list-style: none;
}
.main-nav .main-nav-menu-item {
    margin-top: -5px;
    padding: 5px 10px;
    float: left;
    list-style: none;
}
.main-nav .main-nav-menu-item:last-child {
    padding-right: 0;
}
.navbar-light .navbar-nav .nav-link {
    color:#000;
     -webkit-touch-callout: none;
    transition: all 1s  ease-in-out;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
}
.navbar-light .navbar-nav .nav-link::after {
    content: "";
    width: 0;
    height: 1px;
    background-color: #FFF;
    display: inline-block;
    margin-top: 5px;
    transition: all 0.2s linear;
    transition-delay: 0.2s;
}
.navbar-light .navbar-nav .nav-item:not(.active) .nav-link:hover::after {
    width: 100%;
    transition-delay: 0.5s;
} 
.navbar-light .navbar-nav .nav-link:hover {
    color:#16ac9d;
}
.navbar-light .navbar-nav .social-menu {
    display:none;
}
.navbar-light .navbar-nav .active .nav-link,
.navbar-light .navbar-nav .active .nav-link:hover {
    color: #16ac9d;
}
/* MENU ENDS */

/* MENU FULLSCREEN */
@keyframes hideFullscreen {
    0% {
        top: 0;
        opacity: 1;
        
    }
    90% {
        top: 0;
        opacity: 0;
    }
    100% {
        top: -100vh;
        opacity: 0;
    }
}
@keyframes showFullscreen {
    0% {
        top: -100vh;
        opacity: 0;
    }
    10% {
        top: 0;
        opacity: 0;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}
div.fullscreen-wrapper {
    position: relative;
}
div.fullscreen-wrapper.first-hide {
    top:-100vh;
}
div.fullscreen-wrapper.hide {
    animation-name: hideFullscreen;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 0.5s
}
div.fullscreen-wrapper.show {
    animation-name: showFullscreen;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
div.fullscreen-wrapper.show div.fullscreen-menu {
    top:0;
}
div.fullscreen-menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: 0;
    transition: background 1.2s ease-in-out, opacity 0.3s  ease-in-out;
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    z-index:-1;
    top:-100vh;
    opacity: 0;
}
div.fullscreen-menu::before {
    content: '';
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0.35;
}
div.fullscreen-becoming::before {
    opacity: 0.2;
}
div.fullscreen-menu.selected {
    background-size: 105% 105%;
    z-index:5;
    animation-name: showFullscreen;
    animation-duration: 1s;
    animation-fill-mode: forwards;
} 
div.fullscreen-menu.unselected {
    background-size: 100% 100%;
    z-index:4;
    top: 0;
    opacity: 1;
} 
div.fullscreen-about {
    background-image: url(../images/menu-about.jpg);
}
div.fullscreen-becoming {
    background-image: url(../images/menu-become.jpg);
}
div.fullscreen-eligibility {
    background-image: url(../images/menu-eligibility.jpg);
}
div.fullscreen-stories {
    background-image: url(../images/menu-stories.jpg);
}
div.fullscreen-news {
    background-image: url(../images/menu-news.jpg);
}
div.fullscreen-menu .text-menu {
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:80%;
    max-width: 730px;
    height:40vh;
}
@keyframes menuTitle {
    0% {
        opacity: 0;
        left: -50px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
@keyframes menuTitleHide {
    0% {
        opacity: 1;
        left: 0;
    }
    100% {
        opacity: 0;
        left: -50px;
    }
}
@keyframes menuText {
    0% {
        opacity: 0;
        right: -50px;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}
@keyframes menuTextHide {
    0% {
        opacity: 1;
        right: 0;
    }
    100% {
        opacity: 0;
        right: -50px;
    }
}
@keyframes menuLines {
    0% {
        width: 0;
    }
    100% {
        width:100%;
    }
}
@keyframes menuLinesHide {
    0% {
        width:100%;
    }
    100% {
        width:0;
    }
}
div.fullscreen-menu .text-menu h2 {
    font-family: "BlackerProDisplayExtraBold";
    color:#FFF;
    font-size:80px;
    line-height: 70px;
    position:relative;
    left:-50px;
    opacity: 0;
    text-transform: uppercase;
    margin: 0 auto 20px;
} 
div.fullscreen-menu.selected .text-menu h2 {
    animation-name: menuTitle;
    animation-duration: 1s;
    animation-delay: 0.8s;
    animation-fill-mode: forwards;
}
div.fullscreen-menu.unselected .text-menu h2 {
    animation-name: menuTitleHide;
    animation-duration: 0.5s;
    animation-delay: 0.4s;
    animation-fill-mode: both;
}
div.fullscreen-menu .text-menu h2 span {
    color:#19ac9d;
    font-family: "BlackerProDisplayExtraBold";
} 
div.fullscreen-menu .line-menu {
    height:1px;
    width: 0;
    background-color: #19ac9d;
    margin:15px 0;
} 
div.fullscreen-menu.selected .line-menu {
    animation-name: menuLines;
    animation-duration: 1s;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
}
div.fullscreen-menu.unselected .line-menu {
    animation-name: menuLinesHide;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-fill-mode: both;
}
div.fullscreen-menu .text-menu p {
    color:#FFF;
    font-size:33px;
    line-height: 36px;
    right:-50px;  
    position:relative;
    font-family: 'Work Sans', sans-serif;
    opacity: 0;
} 
div.fullscreen-menu.selected .text-menu p {
    animation-name: menuText;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
} 
div.fullscreen-menu.unselected .text-menu p {
    animation-name: menuTextHide;
    animation-duration: 0.5s;
    animation-delay: 0.2s;
    animation-fill-mode: both;
}
/* MENU FULLSCREEN END */

/*--- GENERAL ---*/
h1,h2,h3,h4,h5,h6 {
    margin: 0;
    font-family: 'BlackerProDisplayExtraBold';
}
p, a, li, span, *::before, *::after {
    font-family: 'Work Sans', sans-serif;
}
p {
    font-family: 'Work Sans', sans-serif;
    font-size: 18px;
    line-height: 30px;
    color: #333;
    margin:0;
}
p a, p a:hover {
    color: #16ac9d;
}
a:hover {
    text-decoration:none;
}
img {
    display: block;
    width: 100%;
}
a.link {
    font-family: 'BlackerProDisplayLightItalic';
    position: relative;
    padding-right: 8px;
    margin-top: 60px;
    display: block;
    float: left;
    color: #010101;
}
a.link.start::after {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    background-color: #16ac9d;
    bottom: -10px;
    left: 0;
    animation-name: width100;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-delay: 0.5s;
}
a.link.start:hover::after {
    animation-name: width0;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-delay: 0s;
}
a.link::before {
    content: "";
    position: absolute;
    width: 0;
    height: 5px;
    background-color: #16ac9d;
    bottom: 5px;
    right: 0;
    z-index: -1;
    transition: all 0.5s ease-in-out;
}
a.link:hover::before{
    transition-delay: 0.5s;
    width:100%;
}
.slider {
    width:100%;
    height: 65vh;
    position:fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 5;
    clip: rect(0, auto, auto, 0);
    top:0;
}
.slider#slider-home {
    background-image: url('../images/home-header.jpg');
}
.slider#slider-about {
    background-image: url('../images/about-header.jpg');
}
.slider#slider-green-city {
    background-image: url('../images/become-header.jpg');
}
.slider#slider-eligibility {
    background-image: url('../images/menu-eligibility.jpg');
}
.slider#slider-city-stories {
    background-image: url('../images/city-stories-header.jpg');
}
.slider#slider-news {
    background-image: url('../images/news-header.jpg');
}
div.slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65vh;
    background-color: #000;
    opacity: 0.35;
}
div#slider-green-city::before,
div#slider-home::before {
    opacity: 0.35;
}
.slide-text-wrapper {
    position: relative;
    top: 50%;
    transform: translateY(-40%);
}
.slide-text {
    max-width: 800px;
    margin: 0 auto;
}
.slide-text-wrapper h1, .slide-text-wrapper h1 p {
    color: #FFF;
    font-size: 85px;
    line-height: 70px;
    font-family: 'BlackerProDisplayExtraBold';
    text-transform: uppercase;
    margin: 0 0 20px;
}

.slide-text-wrapper h1 span {
    font-size: 85px;
    line-height: 70px;
    font-family: 'BlackerProDisplayExtraBold';
    text-transform: uppercase;
    color: #19ac9d;
}
.slide-line {
    width: 100%;
    float: none;
    margin: 0 auto;
    height: 2px;
    background-color: #19ac9d;
}
.slide-text-wrapper p {
    color: #FFF;
    margin: 12px 0px;
    font-size: 20px;
}
.container {
    width:100%;
    min-height: 100vh;
    margin-top: 54vh;
    position:relative;
    padding:30px 0 0;
    z-index: 10;
    max-width: unset;
    background-color: #f9f7f7 !important;
}
.container.no-margin-top {
    margin-top:0;
}
.content {
    position: relative;
    z-index: 10;
}
.row {
    padding-bottom: 10vh;
    margin-left: 0;
    margin-right: 0;
}
     .focus-template .row {
         padding-bottom: 5vh;
     }
.boxed {
    max-width: 1080px;
    margin: 0 auto;
}
.narrow p {
    font-size: 18px;
    line-height: 30px;
    color: #333;
}
.disabled {
    display: none;
}
.subtitle h3, .subtitle h3 a {
    text-align: center;
    color:#19ac9d;
    font-family: "BlackerProDisplayExtraBold";
    font-size:37px;
    margin-bottom: 40px;
    text-transform: uppercase;
}
.subtitle .line-subtitle {
    float:none;
    margin: 0 auto 7VH;
    height:1px;
    background-color:#a8a9ab;
}
.intro p {
    font-size:26px;
    font-family: 'BlackerProDisplayLight';
}
.green-underline::after {
    content:"";
    height:1px;
    width: 0;
    margin: 7px auto 0;
    background-color: #16ac9d;
    display: block;
    transition: all 0.3s linear;
}
.green-underline:hover::after,
.green-underline.animate.start::after{
    width: 100%;
}
.last-row p {
    text-align: center;
    padding-bottom: 10px;
    margin: 0 auto;
    max-width: 340px;
}
/*--- GENERAL ENDS ---*/


/*--- HOME ---*/
#slider-home {
    height:80vh;
}
#container-home {
    margin-top:70vh;
}
.row-1 p {
    font-size:40px;
    line-height: 55px;
    color:#010101;
    border-bottom: 1px solid #16ac9d;
    display:inline;
    font-family: 'BlackerProDisplayLight';
}
.row-1 p span {
    font-family: 'Work Sans';
}
.donor {
    height:20vh;
    padding: 15px;
    float: left;
    margin: 0;
    align-items: center;
    display: flex;
}
.donor img {
    display: block;
    margin: 0 auto;
    width:auto;
}
.loop {
    margin-top: 7vh;
    overflow:hidden;
    height:500px;
}

/* Home Carousel */

.carousel-cell {
    width: 45%;
    margin-right: 10px;
    max-height: 480px;
    height: 480px;
    overflow: hidden;
    transition: margin 0.3s ease-in;
}
.carousel-cell a{
    float: left;
    position: relative;
    background-color: #16ac9d;
    background-blend-mode: color;
    width: 100%;
}

.carousel-cell a img{
    height: 300px;
}

.carousel-cell.is-selected a{
    background-color: transparent;
}
.carousel-cell .overlay-inner {
    margin: 0 auto;
    display: block;
    line-height: 200px;
    font-size: 80px;
    color: white;
    height: auto;
    width: 60% ;
    background-color: #16ac9d;
    background-blend-mode: color;
}
.overlay-inner img{
    opacity: 0.6;
}
.is-selected img{
    opacity: 1;
}
.carousel-overlay{
    background: #16ac9d;
    margin: 0 auto;
    display: block;
    line-height: 200px;
    font-size: 80px;
    color: white;
    height: 100%;
    width: auto ;
}
.carousel-cell h3{
    display: none;
}
.carousel-cell h4{
    display: none;
}
.carousel-cell.is-selected h3 {
    display: table;
    font-family: 'BlackerProDisplayLight';
    text-align: center;
    text-transform: uppercase;
    color: #000;
    font-size: 15px;
    width: auto;
    margin: 0 auto;
}
.overlay-inner:hover .green-underline::after {
    width:100%;
}
.latest-news .carousel-cell.is-selected h4{
    display: table;
    font-family: 'BlackerProDisplayLight';
    text-align: center;
    text-transform: uppercase;
    color: #000;
    font-size: 15px;
    width: 100%;
}

.carousel-cell.is-selected h4{
    float: left;
    display: block;
    width: 100%;
    color:black;
    text-align: center;
    margin: 15px 0 5px 0;
        font-family: 'BlackerProDisplayLight';
    text-align: center;
    text-transform: uppercase;
    color: #333;
    font-size: 20px;
}

.carousel-cell h6{
    display: none;
    font-family: 'BlackerProDisplayLight';
    text-align: center;
    text-transform: uppercase;
    color: #000;
    font-size: 14px;
}

.carousel-cell.is-selected h6 {
    display: block;
}

.is-next:hover{
    margin-left: -2%;
}
.is-previous:hover{
    margin-left: 2%;
}
.flickity-viewport{
        height: 400px;
}
div#carousel-1 {
    float: left;
    width: 100%;
    height: 20vw;
}

div#carousel-1 img {
    max-height: 295px;
}



div#carousel-2 {
    float: left;
    width: 100%;
    height: 20vw;
}
.news-carousel .carousel-cell.is-selected h3 {
    margin-top: 20px;
}

.carousel-cell.is-selected a::before {
    content: "";
    position: absolute;
    height: calc( 100% - 70px );
    width: 100%;
    display: block;
    background-color: transparent;
    opacity: 0.4;
    z-index: 5;
    transition: all 0.5s linear;
}
.news-carousel .carousel-cell.is-selected .user::before {
    height: calc( 100% - 70px );
}
.carousel-cell.is-selected a:hover::before {
    background-color: #000;
}
.carousel-cell.is-selected a::after {
    content: "Learn more";
    transition: all 0.3s linear;
    font-family: 'BlackerProDisplayLightItalic';
    color: #FFF;
    position: absolute;
    width: 100%;
    opacity: 0;
    color: #FFF;
    z-index: 10;
    text-align: center;
    font-size: 19px;
    top: 45%;
    transform: translateY(-50%);
}
.carousel-cell.is-selected a:hover::after {
    opacity:1;
}

.flickity-prev-next-button img {
    width: 9px;
    height: auto;
    margin: 0 auto;
}
.flickity-prev-next-button {
    position: absolute;
    opacity: 1;
    background:transparent;
    border: 1px solid #a7a8ab;
    outline:0 !important;
    top:40%;
}
.flickity-prev-next-button:hover {
    background: transparent !important;
}
.flickity-prev-next-button.previous {
    left:26vw
}
.flickity-prev-next-button.next {
    right:26vw
}
.flickity-prev-next-button img{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.flickity-prev-next-button:hover img {
    -webkit-filter: none;
    filter: none;
}


/* Home Carousel */
/*--- HOME ENDS ---*/







/*--- ABOUT ---*/
#scaling-images #scaling-images-wrapper .sticky-block {
    height: 100vh;
    min-height: calc(724px + (50vh - (724px / 2)) + 22px);
    margin-bottom: calc(-1 * ((100vh - 724px) / 2) + 22px);
    overflow: hidden;
    position: sticky;
    position: -webkit-sticky;
    top:0;
}
#scaling-images #scaling-images-wrapper .sticky-block .images-wrapper {
    transform: translateX(-50%);
    width: 980px;
    height: 1312px;
    position: relative;
    left: 50%;
    -webkit-transform-origin: top center;
    transform-origin: top center;
}
#scaling-images #scaling-images-wrapper .sticky-block .images-wrapper figure {
    background-size: 980px 1312px;
    background-repeat: no-repeat;
    width: 980px;
    height: 1312px;
    position: absolute;
    left: 50%;
    margin-left: -490px;
/*    top: 474px;*/
    transform-origin: top center;
}
#scaling-images #scaling-images-wrapper .sticky-block .images-wrapper #scaling-image-1 {
    background-image: url('../images/img1.jpg');
}
#scaling-images #scaling-images-wrapper .sticky-block .images-wrapper #scaling-image-2 {
    background-image: url('../images/img2.jpg');
}
#scaling-images #scaling-images-wrapper .sticky-block .images-wrapper #scaling-image-3 {
    background-image: url('../images/img3.jpg');
}
#scaling-images #scaling-images-wrapper .sticky-block .images-wrapper #scaling-image-4 {
    background-image: url('../images/img4.jpg');
}
#scaling-images #scaling-images-wrapper #scrolling-text-wrapper {
    position:relative;
    z-index:10;
}
#scaling-images #scaling-images-wrapper #scrolling-text-wrapper .scrolling-row {
    width:100%;
    max-width: 980px;
    margin:0 auto;
    height:100vh;
}
#scaling-images #scaling-images-wrapper #scrolling-text-wrapper .scrolling-row .scrolling-row-text {
    height: 100vh;
    align-items: center;
    display: flex;
}
.scaling-images-responsive {
    display:none;
}
.about-list span {
    color: #16ac9d;
}
.about-list .col-md-3,
.about-list .col-md-9 {
    margin-bottom: 40px;
}
.green-line {
    height: 1px;
    background-color: #16ac9d;
    margin-top: 15px;
}
/*--- ABOUT ENDS ---*/



/*--- BECOME A GREEN CITY ---*/
.action-plan-title {
    font-family: 'Work Sans';
    font-weight: 700;
    font-size: 23px;
    color: #16ac9d;
}
/*--- BECOME A GREEN CITY ENDS ---*/



/*--- OUR CITY STORIES ---*/

#city-stories-row-2 p {
    font-size:30px;
    font-family: 'BlackerProDisplayLight';
}
.row #cities-grid a {
    display: block;
    margin-bottom: 10%;
    float: left;
    position: relative;
    cursor: pointer;
    opacity: 0;
    /*min-height:228px;*/
}
.row #cities-grid a::before {
    content:"";
    position: absolute;
    width: calc( 100% - 30px );
    height:100%;
    display:block;
    background-color: transparent;
    opacity: 0.4;
    z-index: 5;
    transition: all 0.5s linear;
}
.row #cities-grid a:hover::before {
    background-color: #000;
}
.row #cities-grid a::after {
    content: "Learn more";
    transition: all 0.3s linear;
    font-family:'BlackerProDisplayLightItalic';
    color:#FFF;
    position: absolute;
    width: calc( 100% - 30px );
    opacity:0;
    z-index: 10;
    text-align: center;
    font-size: 19px;
    top: 50%;
    transform: translateY(-50%);
}
.row #cities-grid a:hover::after {
    opacity:1;
    font-size: 19px;
}
.row #cities-grid a:nth-child(3n+3) {
    margin-right: 0;
}
#cities-grid img {
    width: 100%;
    display: block;
}
#cities-grid h3 {
    font-family: 'BlackerProDisplayLight';
    text-align: center;
    text-transform: uppercase;
    color: #000;
    font-size: 15px;
    margin: 47px auto 0;
    position: absolute;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
}
#cities-grid h3::after {
    content:"";
    height:1px;
    width: 0;
    margin: 7px auto 0;
    background-color: #16ac9d;
    display: block;
    transition: all 0.5s linear;
}
#cities-grid a:hover h3::after {
    width:100%;
}
#cities-grid h4 {
    font-family: 'BlackerProDisplayLight';
    text-align: center;
    text-transform: uppercase;
    color:#333;
    font-size: 20px;
    margin: 20px -15px 0;
    position: absolute;
    width: 100%;
}

/*--- OUR CITY STORIES ENDS ---*/



/*--- OUR CITY STORIES FOCUS ---*/
#content-city-stories-focus .row-title h3 {
    font-size:50px;
    text-align: center;
    text-transform: uppercase;
    color:#010101;
    border-bottom: 1px solid #16ac9d;
    display:table;
    font-family: 'BlackerProDisplayLight';
    margin:0 auto;
}
#content-city-stories-focus a.back-link {
    margin-top: -34px;
    float: right;
}
#content-city-stories-focus .row-2 .boxed > div {
    float: right;
}
.map-svg .st0{
    fill:transparent;
    stroke:#333333;
    stroke-width:0.33;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.map-svg .st1{
    fill:#12AB9C;
}
#content-city-stories-focus .row-3 svg {
    float: left;
}
#content-city-stories-focus .city-map {
    float:left;
}
#content-city-stories-focus .row-3 .population { /*SUBSTITUTE*/
    /*display: flex;*/
    display: block;
    left: 8%;
    align-items: center;
}
#content-city-stories-focus .row-3 .population span {
    font-size: 50px;
    line-height: 46px;
}
#content-city-stories-focus .related-articles-wrapper {
    margin-top: -530px;
    /*margin-top: -230px;*/
    min-height: 500px;
}
#content-city-stories-focus .related-articles {
    /*padding: 85px 85px 85px 10vw;*/
    padding: 40px 85px 40px 2%;
    background-color: #e6e7e8;
}
#content-city-stories-focus .related-articles h4 {
    margin-bottom: 10px;
}
#content-city-stories-focus .related-articles a {
    display: block;
    width: auto;
    color: #16ac9d;
    margin-bottom: 5px;
    float: left;
    transition: all 0.5s linear;
}
#content-city-stories-focus .related-articles a:hover {
    color:#58585b;
}

/*--- OUR CITY STORIES FOCUS ENDS ---*/




/*--- NEWS ---*/
#content-news .filters {
    padding-bottom:0;
}
#content-news .filters-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}
.filters a h3 {
    text-align: center;
    font-family: "BlackerProDisplayExtraBold";
    cursor: pointer;
    color: #58585b;
    transition: all 0.5s linear;
    -webkit-touch-callout: none;
    /*display: table;*/
    display: block;
    overflow-wrap: break-word;
    margin: 0 auto 40px;
}
.filters .active a h3,
.filters .active-first a h3,
.filters a:hover h3 {
    color: #16ac9d;
}
.filters .active h3::after {
    width:100%
}
.grid-row #media-grid.grid a {
    min-width: 400px;
}
.grid-row .grid a {
    display: block;
    margin-bottom: 12%;
    float: left;
    position: relative;
    cursor: pointer;
    opacity: 0;
    /*min-height: 215px;*/
}

.grid-row #media-grid.grid a::before {
    content:"";
    display: none!important;
}
.grid-row #media-grid.grid a::after {
    content:""!important;
    display: none!important;
}
.grid-row .grid a::before {
    content:"";
    position: absolute;
    width: calc( 100% - 30px );
    height:100%;
    display:block;
    background-color: transparent;
    opacity: 0.4;
    z-index: 5;
    transition: all 0.5s linear;
}
.grid-row .grid a:hover::before {
    background-color: #000;
}
.grid-row .grid a::after {
    content: "Learn more";
    transition: all 0.3s linear;
    font-family:'BlackerProDisplayLightItalic';
    color:#FFF;
    position: absolute;
    width: calc( 100% - 30px );
    opacity:0;
    color:#FFF;
    z-index: 10;
    text-align: center;
    font-size: 19px;
    top: 50%;
    transform: translateY(-50%);
}
.grid-row .grid a:hover::after {
    opacity:1;
    font-size: 19px;
}
.grid-row .grid a:nth-child(3n+3) {
    margin-right: 0;
}
.grid-row .grid img {
    width: 100%;
    display: block;
}
.grid-row .grid h3 {
    font-family: 'BlackerProDisplayLight';
    text-align: center;
    text-transform: uppercase;
    color: #000;
    font-size: 16px;
    margin: 20px auto 0;
    position: absolute;
    width: 85%;
    left: 50%;
    transform: translateX(-50%);
}
.grid-row .grid a:hover h3::after {
    width:100%;
}

/*--- NEWS ENDS ---*/



/*--- NEWS - EVENTS - PUBLICATION FOCUS ---*/
.focus-template .row-main-image .boxed {
    max-width: unset;
}
.focus-template .row-title h1 {
    font-size:90px;
    text-align: center;
    text-transform: uppercase;
    color:#16ac9d;
    font-family: 'BlackerProDisplayExtraBold';
    margin:0 auto 50px;
}
.focus-template .row-title h3 {
    font-size:50px;
    text-align: center;
    text-transform: uppercase;
    color:#010101;
    border-bottom: 1px solid #16ac9d;
    display:table;
    font-family: 'BlackerProDisplayLight';
    margin:0 auto;
}
.focus-template a.back-link {
    margin-top: -113px;
    float: right;
}
.focus-template p.date {
    display: table;
    margin: 30px auto 0;
}
.focus-template .filters {
    padding-bottom:0;
}
.focus-template .news-focus-image,
.focus-template .publication-focus-image
{
    margin-left: -15px;
    position: sticky;
    position: -webkit-sticky;
    top: 70px;
}
.focus-template-2 .event-focus-image {
    margin-right: -15px;
    position: sticky;
    position: -webkit-sticky;
    top: 70px;
    float: right;
}
.focus-template .news-focus-text,
.focus-template .event-focus-text,
.focus-template .publication-focus-text{
    margin-top: 15vh;
}
.focus-template .related-articles {
    padding: 85px 85px 85px 10vw;
    background-color: #e6e7e8;
}
.focus-template .related-articles h4 {
    margin-bottom: 10px;
}
.focus-template .related-articles a {
    display: block;
    width: auto;
    color: #16ac9d;
    margin-bottom: 5px;
    float: left;
    transition: all 0.5s linear;
}
.focus-template .related-articles a:hover {
    color:#58585b;
}
/*--- NEWS - EVENTS - PUBLICATION FOCUS ENDS ---*/


/*--- TERMS CONDITIONS COOKIES ---*/
#cookies-row-1 {
    padding-bottom: 3vh;
}
#cookies-row-1 .back-link {
    position: absolute;
    right: 0;
    margin-top: -74px;
}
.cookies-filters a h3 {
    float: left;
    display: block;
    text-align: left;
}
#content-cookies #terms ol li {
    margin-top:20px;
    font-size: 18px;
}
#content-cookies #terms ol li ol li {
    margin-top:10px;
}
#content-cookies #cookies p {
    font-size: 18px;
}
/*--- TERMS CONDITIONS COOKIES ENDS ---*/


/*--- FOOTER ---*/
footer {
    background-color: #57585b;
    padding: 60px 0 20px;
    position: fixed;
    bottom: 0;
    z-index: 2;
    width: 100%;
    opacity: 1;
}
footer .footer-row {
    padding-bottom: 0;
}
footer .footer-col {
    float:left;
    color:#fff;
}
footer .footer-col .privacy-links,
footer .footer-col .copyright {
    text-align: right;
}
footer #footer-left-block #footer-left-col {
    padding:0;
}
footer #footer-left-col svg#Logo_3 {
    max-width: 265px;
}
footer ul {
    padding:0;
    margin:15px 0 60px;
}
footer nav {
    margin-bottom:60px;
}
footer li {
    list-style: none;
}
footer a {
    color:#FFF;
    transition: all 0.5s linear;
}
footer a:hover {
    color:#16ac9d;
}
footer p {
    margin: 0;
    padding:0;
    color:#FFF;
}
footer p, footer a, footer li {
    font-size: 14px
}
footer .copyright {
    font-size:12px;
}
footer .social-icons {
    display: block;
    min-height: unset;
}
footer div.social-icon {
    width: 50px;
    float: left;
}
footer div.social-icon a {
    width: 12px;
    display: block;
}
footer .social-icon .social-svg {
    width: 12px;
    height: 20px;
    overflow: visible;
}
footer #footer-right-block {
    position: relative;
}
footer #footer-right-block #footer-right-col-2 {
    position: absolute;
    bottom: 0;
    right:15px;
}

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






/* ANIMATIONS */
@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}
.fadein {
    opacity:0;
    animation-name: fadein;
    animation-duration: 0.8s;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
}
@keyframes fade-to-top {
    from {
        opacity: 0;
        bottom:-25px;}
    to {
        opacity: 1;
        bottom:0;
    }
}
.fade-to-top {
    position:relative;
    opacity:0;
    bottom:-25px;    
}
.fade-to-top.start {
    animation-name: fade-to-top;
    animation-duration: 0.8s;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
}
@keyframes fade-to-bottom {
    from {
        opacity: 0;
        top:-25px;}
    to {
        opacity: 1;
        top:0;
    }
}
.fade-to-bottom {
    position:relative;
    opacity:0;
    top:-25px;
}
.fade-to-bottom.start {
    position:relative;
    opacity:0;
    top:-25px;
    animation-name: fade-to-bottom;
    animation-duration: 0.8s;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
}
@keyframes fade-left {
    from {
        opacity: 0;
        left:-25px;}
    to {
        opacity: 1;
        left:0;
    }
}
.fade-left {
    position:relative;
    opacity:0;
    left:-25px;
}
.fade-left.start {
    animation-name: fade-left;
    animation-duration: 0.8s;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
}
@keyframes fade-right {
    from {
        opacity: 0;
        right:-25px;}
    to {
        opacity: 1;
        right:0;
    }
}
.fade-right {
    position:relative;
    opacity:0;
    right:-25px;
}
.fade-right.start {
    animation-name: fade-right;
    animation-duration: 0.8s;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes width100 {
    0% {width: 0;}
    100% {width: 100%;}
}
.width100 {
    width:0;
}
.width100.start {
    animation-name: width100;
    animation-duration: 0.8s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
}
@keyframes width0 {
    0% {width: 100%;}
    100% {width: 0%;}
}
.width0 {
    width:100%;
}
.width0.start {
    animation-name: width0;
    animation-duration: 0.8s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
}

.delay1 {
    animation-delay: 0.8s;           
}
.delay2 {
    animation-delay: 1.1s;           
}
.delay3 {
    animation-delay: 1.4s;           
}
.delay4 {
    animation-delay: 1.7s;           
}
.delay5 {
    animation-delay: 2s;           
}


@keyframes full-width {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
.full-width {
    animation-name: full-width;
    animation-duration: 1.5s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}


/*--- Initial animation ---*/
 /* Post-animation styles */
body#home.animated.post {
    overflow: auto;
}
.animated .page-wrapper {
    width: 100%;
    max-width: 100%;
    float: left;
    height: 100vh;
    position: absolute; 
    overflow: hidden;
}
.animated .page-wrapper.post{
    position: initial;		
    width: 100%;
    height: auto;
    z-index: 2;
}
.initialSequence {
    background: rgb(023, 094, 084);
}
 .initialSequence.post{
    display: none;
}
.postSequence .logoIn{
    opacity: 1;
}
.postSequence .first-title span.letters {
    opacity: 1;
}
/** Pre-animation styles **/
body#home.animated {
    overflow: hidden;
}
body.animation {
    overflow: auto;
}

.innerInner{
    margin: 0 auto;
    width: 350px;
}
.first-title {
    opacity: 1;
        float:left;
        width:100%;
}
.logoIn{
        opacity: 0;
        float:left;
        width:100%;
}
.non-animated .logoIn{
    opacity: 1;
}
span.letters {
    float: left;
    color: white;
    font-size: 95px;
    line-height: 80px;
    font-family: 'BlackerProDisplayExtraBold';
}
.first-title span.letters {
    opacity: 0;
}
.sequenceWrapper {
    /* display: none; */
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height:100vh;
}
.sequenceInner {
    top: 27%;
    position: relative;
    width: 100%;
    float: left;
    /*transform: translateY(-50%);*/
    z-index: 300;
    padding-right: 0;
}
body.animation .sequenceInner {
    padding-right:0;
}
body.post .sequenceInner {
    padding-right:0;
    margin-top:4px;
}
body.non-animated .sequenceInner {
    margin-top: 4px;
}
.initialSequence {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 200;
}
.secondLogo .third-title .letters {
    color: rgb(0, 175, 158);
}

 /* During animation styles */
@-webkit-keyframes scale-up-center {
        0% {
            opacity: 0;
            -webkit-transform: scale(0.8);
            transform: scale(0.8);
        }
        60% {
            opacity: 1;
        }
        100% {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
}
.page-wrapper.animation{
    position: absolute;
    width: 100%;
    height: 100vh;
    -webkit-animation: scale-up-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-up-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    z-index:250;
} 




/***************************************************************************************************************************************************************************************************
------------------------------------------------------------------------------------ MEDIA QUERY ---------------------------------------------------------------------------------------------------
****************************************************************************************************************************************************************************************************/

body * {
     -webkit-touch-callout: none;
}

/* Slider Title */
.fnc-slider span.letters{
    font-size: 95px !important;
    line-height: 80px !important;
}
.fnc-slide__content{
    top: 50% !important;
}
.sequenceInner{
    transform: translateY(0) !important;
}



/* About-us Scroll-Image-Animation Start  */
#scaling-images #scaling-images-wrapper .sticky-block .images-wrapper{
                transform-origin: initial !important;
                top: -20%;
            }
#scale-image-0 {
    background-image: url('../images/about-scroll/scroll-first.jpg');
    z-index: 4;
}
#scale-image-1 {
    background-image: url('../images/about-scroll/scroll-second.jpg');
    z-index: 3;
}
#scale-image-2 {
    background-image: url('../images/about-scroll/scroll-third.jpg');
    z-index: 2;
}
#scale-image-3 {
    background-image: url('../images/about-scroll/scroll-fourth.jpg');
    z-index: 1;
}

.scale-image-in{
    -webkit-animation: fade-in 0.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: fade-in 0.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes fade-in {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
@keyframes fade-in {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
}
 .scale-image-out{
    -webkit-animation: fade-out 0.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: fade-out 0.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes fade-out {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
@keyframes fade-out {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
}
 .scrolling-row-title{
    display: none;
}
.scrolling-row-paragraph{
    font-family: 'Work Sans', sans-serif;
    color: #333;
    line-height: 30px;
    font-size: 18px;

}
@media all and (max-height:1800px) {
    #scaling-images #scaling-images-wrapper .sticky-block .images-wrapper{
       top: 0%;
    }
}
@media all and (max-height:1400px) {
    #scaling-images #scaling-images-wrapper .sticky-block .images-wrapper{
       top: -5%;
    }
}

@media all and (max-height:960px) {
    #scaling-images #scaling-images-wrapper .sticky-block .images-wrapper{
       top: -20%;
    }
}
@media all and (max-height:700px) {
    #scaling-images #scaling-images-wrapper .sticky-block .images-wrapper{
       top: -38%;
    }
}

/* About-us Scroll-Image-Animation End  */
 #content-city-stories-focus .related-articles-wrapper  .related-files {
    margin-top: 30px;
 } 
    
    
@media all and (max-width:1440px) {    
    .boxed{
        max-width: 1080px;
    }
    .donor {
        min-height: 120px;
    }
    .donor img {
        max-width: 100px;
    }
     .carousel-cell {
        width: 55%;
    }
    .carousel-cell .overlay-inner {
        width: 70%;
    }
    .main-carousel{
        height: 29vw !important;
    }
    .flickity-prev-next-button.previous {
        left:21vw
    }
    .flickity-prev-next-button.next {
        right:21vw
    }
    #content-city-stories-focus .related-articles-wrapper {
        margin-top: -300px;
        /*margin-top: -150px;*/
    }
    #content-city-stories-focus .related-articles-wrapper .related-articles {
        /*padding: 65px 85px 65px 10vw;*/
        padding: 20px 5% 40px 2%;
        
    }
}



@media all and (max-width:1279px) {
    
    .boxed{
        max-width: 850px;
    }
    /* CITY STORIES */
    #cities-grid h4 {
        font-size: 17px;
        margin-top: 5px;
    }
    #cities-grid h3 {
        font-size: 14px;
        margin-top: 25px;
    }
     .carousel-cell {
        width: 55%;
    }
    .carousel-cell .overlay-inner {
        width: 80%;
    }
    
}

@media all and (max-width:1023px) {
    #scaling-images {
        display: none;
    }
    .scaling-images-responsive {
        display: block;
        margin-bottom:60px;
    }
    
}




@media all and (max-width:991px) {
    .main-carousel{
        height: 30vw !important;
    }
     /* GENERAL */
    .main-nav .logo {
        z-index: 1000;
    }
    .slide-text {
        max-width: 650px;
    }
    .slide-text-wrapper h1{
        font-size: 45px;
        line-height: 20px;
    }
    /* .slide-text-wrapper h1 span{
        font-size: 45px;
    } */
    .slide-text-wrapper p{
        margin: 0;
    }
    .boxed {
        max-width: 700px;
    }
    
    .row-1 p {
        font-size: 28px;
        line-height: 42px;
    }
    
    /* GENERAL ENDS*/
    
    /* MENU */
    .fullscreen-wrapper {
        display:none;
    }
    .main-nav .main-nav-menu {
        background-color: #185f55;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 70px;
    }
    button.navbar-toggler.float-right.border-0 {
        position: relative;
        z-index: 1000;
        padding-top:13px;
        outline:0;
    }
    .navbar-light .navbar-toggler-icon {
        background: none;
        width: 1.3em;
        height: 1em;
    }
    button[aria-expanded=false] .hamb-menu {
        /* fill: #58585b; */
        fill: #FFF;
    }
    button[aria-expanded=true] .hamb-menu {
        fill: #FFF;
    }
    .hamb-menu {
        transition: all 1s linear;
    }
    ul.main-nav-menu-items.navbar-nav.mr-auto {
        height: 100vh;
    }
    .navbar-light .navbar-nav .nav-link,
    .navbar-light .navbar-nav .nav-link span {
        color:#FFF !important;
        text-align: center;
        height: 6vh;
        line-height: 8vh;
        font-family: 'BlackerProDisplayExtraBold';
        font-size: 20px;
    }
    .navbar-light .navbar-nav .nav-link span {
        color: #16ac9d !important;
    }
    .navbar-light .navbar-nav .social-menu {
        display: block;
        width: 40%;
        margin: 0 auto;
    }
    .navbar-light .navbar-nav .social-menu a {
        float: left;
        width: 33%;
        padding:0;
    }
    .navbar-light .navbar-nav .social-menu a svg {
        width: 100%;
        height: 20px;
        vertical-align: middle;
    }
    .navbar-light .navbar-nav .social-menu a svg path {
        fill:#FFF;
    }
    /* MENU ENDS */
    
    /* FOOTER */
    footer #footer-left-col {
        max-width: 300px;
        padding: 0;
    }
    footer #footer-middle-col {
        padding-left: 66px;
        padding-bottom: 30px;
    }    
    footer #footer-right-block #footer-right-col-2 {
        position: relative;
        right: 0;
    }
    /* FOOTER ENDS */
    
    /* NEWS - EVENTS - PUBLICATION */
    .grid-row .grid a  {
        margin-bottom: 25%;
    }
        /* NEWS - EVENTS - PUBLICATION ENDS */
    
    
    /* NEWS - EVENTS - PUBLICATION FOCUS */
    .focus-template .row-title h1{
        font-size: 55px;
    }
    .focus-template .row-title h3{
        font-size: 45px;
    }
    .focus-template .row-2 > .col-12:first-child {
        padding-bottom: 10vh;
    }
    
    /* NEWS - EVENTS - PUBLICATION FOCUS ENDS */
    
    .fnc-slider .innerInner{ 
        width: 350px !important;
    }

    #content-city-stories-focus .related-articles-wrapper {
        margin-top: -290px;
    }


    #content-city-stories-focus .related-articles-wrapper .related-articles {
        padding: 20px 5% 40px 2%;
    }
}


@media all and (max-width:767px) {
    /* GENERAL */
    .slide-text {
        max-width: 300px;
    }
    .slide-text-wrapper h1{
        font-size: 33px;
        line-height: 10px;
    }
    .slide-text-wrapper h1 span{
        font-size: 33px;
    }
    .slide-text-wrapper p{
        margin: 0;
    }
    .boxed {
        max-width: 600px;
    }
    /* GENERAL ENDS */
    
    /* HOME */
    .carousel-cell {
        width: 70%;
    }
    .carousel-cell .overlay-inner {
        width: 100%;
    }
    .main-carousel{
        height: 50vw !important;
    }
    .flickity-prev-next-button {
        display:none;
    }
    /* HOME ENDS */
    
    /* ABOUT - BECOME - ELIGIBILITY */
    .green-line.width100 {
        display: none;
    }
    .intro p {
        font-size: 22px;
    }
    /* ABOUT - BECOME - ELIGIBILITY ENDS */
    
    
    /* NEWS - EVENTS - PUBLICATION */
    .grid-row .grid a {
        margin-bottom: 28%;
    }
    /* NEWS - EVENTS - PUBLICATION ENDS */
    
    
    /* NEWS - EVENTS - PUBLICATION FOCUS */
    .focus-template .row-title h1{
        font-size: 45px;
    }
    .focus-template .row-title h3{
        font-size: 35px;
    }
    
    .focus-template .news-focus-text,
    .focus-template .event-focus-text,
    .focus-template .publication-focus-text{
        margin-top: 0;
    }
    /* NEWS - EVENTS - PUBLICATION FOCUS ENDS */
    
    .innerInner{
        width: 350px !important;
    }
    .row #cities-grid a {
        display: block;
        margin-bottom: 15%;
    }
    
    /* CITY FOCUS */
    #content-city-stories-focus .row-3 .population {
        padding-top: 60px;
        height: auto;
    }
    #content-city-stories-focus .related-articles-wrapper {
        margin-top: 0;
        min-height: 300px;
    }

    #content-city-stories-focus .related-articles-wrapper .related-articles {
         padding: 65px 85px 65px 10vw; 
    }
    /* CITY FOCUS ENDS */


    .carousel-cell {
        padding: 0 10px;
    }
}



@media all and (max-width:575px) {
    /* GENERAL */
    .row {
        padding-bottom: 5vh;
    }
    .main-nav .logo a {
        width: 295px;
        padding: 13px 0;
    }
    .subtitle h3, .subtitle h3 a {
        font-size:32px;
    }
    .slide-text {
        max-width: 470px;
        width: 90%;
    }
    .slide-text-wrapper h1{
        font-size: 33px;
        line-height: 10px;
    }
    .slide-text-wrapper h1 span{
        font-size: 33px;
    }
    .slide-text-wrapper p{
        margin: 0;
        font-size: 15px;
        line-height: 20px;
    }
    .boxed {
        max-width: 370px;
    }
    .grid-row .grid h3{
        margin: 6px auto 0;
    }
    .social-bar-wrapper,
    #social-bar-slider {
        display: none;
    }
    /* GENERAL */


    /* MENU */
    
    .navbar-light .navbar-nav .nav-link,
    .navbar-light .navbar-nav .nav-link span {
        font-size: 18px;
    }
    /* MENU ENDS */
    
    
    /* HOME */
    
    .donor img {
        max-width: 100%;
    }
    .main-carousel{
        height: 60vw !important;
    }
    .cities-carousel .carousel-cell.is-selected a::after {
        top: 35%;
    }
    .news-carousel .carousel-cell.is-selected a::after {
        top: 40%;
    }
    
    /* NEWS - EVENTS - PUBLICATION FOCUS */
    .focus-template a.back-link {
        margin-top: -175px;
    }
    .focus-template .related-articles {
        padding: 45px 85px 45px 10vw;
    }
    /* NEWS - EVENTS - PUBLICATION FOCUS ENDS */
    
    /* CITY FOCUS */
    #content-city-stories-focus .related-articles {
        padding: 45px 85px 45px 10vw;
    }
    /* CITY FOCUS ENDS */
    
    /* Main Slider Logo */
    
    .fnc-slider span.letters {
        font-size: 50px !important;
        line-height: 50px !important;
    }
    .innerInner span.letters {
        font-size: 50px !important;
        line-height: 50px !important;
    }
     .innerInner{
        width: 50% !important;
    }
    .fnc-slider .innerInner {
        width: 100% !important;
    }
    /* Grid responsive */
    
    .row #cities-grid a {
        display: block;
        margin-bottom: 25%;
    }
    
    
    /* Grid responsive */
    
    /* CITY FOCUS */
    #content-city-stories-focus .row-title h3{
        font-size:35px;
    }
    #content-city-stories-focus a.back-link {
        margin-top:-144px;
    }
    #content-city-stories-focus .row-3 .population span {
        font-size: 35px;
    }
    /* CITY FOCUS ENDS */
    
    /* FOOTER */
    footer ul {
        margin-bottom:20px
    }
    footer nav {
        margin-bottom: 20px;
    }
    /* FOOTER ENDS */
    
}

@media all and (max-width:375px) {
    /* NEWS - EVENTS - PUBLICATION FOCUS */
    .focus-template .row-title h1{
        font-size: 35px;
    }
    .focus-template .row-title h3{
        font-size: 25px;
    }
   
    /* NEWS - EVENTS - PUBLICATION FOCUS ENDS */
    
     /* Main Slider Logo */
    .fnc-slider span.letters {
        font-size: 40px !important;
        line-height: 40px !important;
    }
    .innerInner span.letters {
            font-size: 40px !important;
    line-height: 40px !important;

    }
    .innerInner{
        width:50% !important;
    }
    .fnc-slider .innerInner {
            width: 100% !important;
    }
    
}

@media all and (max-height:500px) and (max-width:991px) {
    
    .slider {
        height:75vh;
    }
    
    
    footer {
        padding-top: 20px !important;
    }
    footer nav, footer ul {
    margin-bottom: 20px;
    }
    footer .footer-row {
        max-width: none;
    }
    footer .footer-row > .col-12:first-child {
        max-width:60%;
        float: left;
    }
    footer .footer-row > .col-12:last-child {
        max-width:35%;
        float: right;
    }
    footer #footer-middle-col {
        padding-bottom: 0;
    }
    footer #footer-right-block {
    max-height: 90px;
    margin-top: 219px;
    }
    footer .copyright {
        line-height: 14px;
    }
    footer #footer-left-block #footer-left-col {
    margin-bottom: -20px;
    }
}

@media all and (orientation:portrait) {
    .flickity-prev-next-button {
        top: 26%;
    }
    /* CITY FOCUS ENDS */
    .main-carousel{
        height: 40vh !important;
    }
}


/* IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .header{
        position: fixed;
        top: 0;
        width: 100%;
    }
    .container{
        max-width: 100%;
    }
    .social-icon{
        height: 35px !important;
    }
}
/* Hide LIVE */
#BetterNavigator {display: none!important;}


/* AW Custom */
.row-main-image {
   /*  max-height: 460px; */
    overflow: hidden;
    margin-bottom: 25px;
}


#city-stories-row-2 .subtitle {
    display: none;
}
@media (max-width: 575px) {
	#home-row-3  {
    padding-bottom: 15vh;
    }
}

/* Conference */

.user-content-popups .video-popup{position: fixed; width: 100%; height: 100%;top: 0; left: 0; right: 0;bottom: 0;background: rgba(0,0,0,.7);
    z-index: 999999; }
  .user-content-popups .video-popup-content { 
    max-width: 700px;
    width: 80%;
    margin: 0;
    border-radius: 5px;
    text-align: center;
    min-height: 130px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
   }
  .user-content-popups .video-popup--close { padding-right: 10px;padding-top: 3px;  position: absolute;right: -9px;top: 20%;  padding: 0;
    margin: 0;background: #000; color: #fff;width: 20px;height: 20px; line-height: 17px;text-align: center;
    border-radius: 50%; border: 1px solid #fff; z-index: 1; cursor: pointer; }
  .user-content-popups .video-popup--close i.fa { padding: 0 3px; font-style: normal; font-size: 18px; font-weight: 300; }
  .user-content-popups .fluid-width-video-wrapper {width: 100%;position: relative; padding: 0;top: 25%;position: absolute; }
  
  .user-content{ float: left; background: #fff; padding: 30px;}
  .user-content .left{ float: left; margin-right: 20px; width: 25%;}
  .user-content .right{ float: left; text-align: left; width: 70%; }
  .user-content .right .right-inner{ width: 90%; }
  .user-content .right .right-inner h3{ margin-bottom: 20px; }
  .user-content p{ font-size: 16px; line-height: 24px; margin-bottom: 20px; }


  #home-row-3 div#carousel-1 img { text-align: center;  margin: 0 auto; max-height:88%; }
  
  #home-row-3 .carousel-cell{ width: 20%;}
  /*#home-row-3 .carousel-cell .overlay-inner{ width: 70%; }*/
  #home-row-3 .flickity-prev-next-button.previous { left: 17vw; }
  #home-row-3 .flickity-prev-next-button.next { right: 17vw; }
  .news-carousel .carousel-cell.is-selected .user-content-trigger::before {height:calc( 100% - 10px );}
  
  .speaker-carousel .carousel-cell {
        width: 45%;
        margin-right: 10px;
        max-height: 530px;
        height: 530px;
        overflow: hidden;
        transition: margin 0.3s ease-in;
    }
  
  .speaker-carousel .carousel-cell .user-content-trigger {
    height:100%;
    background-color:unset;
    overflow: hidden;
    position: relative;
  }
    .speaker-carousel .carousel-cell .user-content-trigger .img-overlay {
        position: relative;
        max-height: 88%;
        overflow: hidden;
    }

    .speaker-carousel .carousel-cell:not(.is-selected) .user-content-trigger .img-overlay:before {
        content:"";
        position:absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        background-color: #16ac9d;
        opacity:1;
    }
  
   .speaker-carousel .carousel-cell .overlay-inner {
    background-color: transparent;
    height: 100%;
    max-height:530px;
  }


  .carousel-cell.is-selected .user-content-trigger::before {
    content: "";
    position: absolute;
    height: calc( 100% - 70px );
    width: 100%;
    display: block;
    background-color: transparent;
    opacity: 0.4;
    z-index: 5;
    transition: all 0.5s linear;
}

.carousel-cell.is-selected .user-content-trigger:hover::before {
    background-color: #000;
}
.carousel-cell.is-selected .user-content-trigger::after {
    content: "Learn more";
    transition: all 0.3s linear;
    font-family: 'BlackerProDisplayLightItalic';
    color: #FFF;
    position: absolute;
    width: 100%;
    opacity: 0;
    color: #FFF;
    z-index: 10;
    text-align: center;
    font-size: 19px;
    top: 45%;
    transform: translateY(-50%);
}
.carousel-cell.is-selected .user-content-trigger:hover::after {
    opacity:1;
}
  
  @media (max-width: 1024px) {
.speaker-carousel .carousel-cell {
        width: 45%;
        margin-right: 10px;
        max-height: 380px;
        height: 380px;
        overflow: hidden;
        transition: margin 0.3s ease-in;
    }
}
  
  .speaker-carousel.news-carousel.main-carousel {
    height:100%!important;
  }
  
  @media only screen and (max-width: 600px) {
  .speaker-carousel.news-carousel.main-carousel {
    height:20vh!important;
  }
  
  .speaker-carousel .carousel-cell .overlay-inner {
    height: auto;
  }

}

.video-popup{position: fixed; width: 100%; height: 100%;top: 0; left: 0; right: 0;bottom: 0;background: rgba(0,0,0,.7);
    z-index: 999999; }
  .video-popup-content { width:70%;max-width: 800px;margin: 30px auto;border-radius: 5px;  text-align: center;
    min-height: 130px;  position: relative; }
  .video-popup--close { padding-right: 10px;padding-top: 3px;  position: absolute;right: -9px;top: 20%;  padding: 0;
    margin: 0;background: #000; color: #fff;width: 20px;height: 20px; line-height: 17px;text-align: center;
    border-radius: 50%; border: 1px solid #fff; z-index: 1; cursor: pointer; }
  .video-popup--close i.fa { padding: 0 3px; font-style: normal; font-size: 18px; font-weight: 300; }
  .fluid-width-video-wrapper {width: 100%;position: relative; padding: 0; }
  

  
  .new-slider .fnc-slider span.letters {
    font-size: 80px !important; 
}
.row-1 p {
 border-bottom:none!important;
}


@media (max-width: 1124px) {
  #slider-home {
         height:100%!important;
         
       }
       .new-slider .fnc-slide__content .h-link a span.letters {
           font-size:4.5vw!important;
       }
       .new-slider .fnc-slider span.letters {
           font-size: 6.5vw !important;
           line-height: 8vw !important;
       }
       
       #container-green-city {
         margin-top:53vh;
       }
 }
 
 #home-row-3 .carousel-cell {
   width: 40%;
 
 }
 
 .main-carousel {
   height: 20vh !important;
 }
 
 .more-content {
   padding-top: 220px !important;
 }
 
 .user-content .right {
   width: 100%;
 }
 .user-content .right .right-inner {
   width: 100%;
 }
 .user-content .left {
   display: none;
 }
 
 .user-content p {
   font-size: 14px;
   line-height: 22px;
   margin-bottom: 18px;
 }

 .navbar-light .navbar-nav .nav-link {
    color: #fff;
 }

 .header.sticky {
    background-color: rgb(87, 88, 91);
 }

 .main-nav:hover {
    /* background-color: #fff !important; */
}


.main-nav:hover  .navbar-nav .nav-link {
    /* color: #000; */
 }

 .main-nav:hover  .navbar-nav .nav-link:hover {
    color: #16ac9d;
 }


 #Logo_1 .cls-1 {
    fill: #fff;
    transition: all 0.3s ease;
}
 #Logo_1 .cls-2 {fill: #11aa9b;}

 .main-nav:hover #Logo_1 .cls-1  {
    /* fill: #58595c; */
 }


 #main-nav-sub-mobile-menu {
    display: none;
    position: absolute;
    top: 70px;
    transform: translateX(100%);
    background-color: #185f55;
    width: 100%;
    transition: all 0.5s ease;
    height: 100%;
}

#main-nav-sub-mobile-menu.show {
    transform: translateX(0%);
}

#main-nav-sub-mobile-menu .main-nav-sub-mobile-menu-items {
    display: none;
}

#main-nav-sub-mobile-menu .main-nav-sub-mobile-menu-items.show {
    display: flex;
}

.main-nav-menu-link-back {
    color: #fff;
    text-align: center;
    display: block;
    margin-top: 20px;
}

@media (max-width: 768px) {
    #main-nav-sub-mobile-menu {
        display: block;
    }
}


.GreenCityPage .slide-text-wrapper h1 span {
    color: #fff;
}