body,html {
    font-family: "TheSansC5-Plain", sans-serif;
    line-height: 1.3;
    /*margin: 0 auto;*/
    color: #707070;
    background: white;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.font-size-56 {font-size: 56px;}
.font-size-52 {font-size: 52px;}
.font-size-46 {font-size: 46px;}
.font-size-32 {font-size: 32px;}
.font-size-24 {font-size: 24px;}
.font-size-20 {font-size: 20px;}
.font-size-16 {font-size: 16px;}
.font-size-12 {font-size: 12px;}
.text-italic {font-style: italic;}

.font-merlod {font-family: "MerlodNorme-Black", sans-serif;}
.font-sans-black {font-family: "TheSansC5-Black", sans-serif; letter-spacing: 2px;}
.font-sans-bold {font-family: "TheSansC5-Bold", sans-serif;}
.tight-spacing {line-height: 1;}

.text-gray {color: #707070;}
.text-dark-blue {color: #1D4486;}
.text-red {color: #E33D2C;}

.bg-light-blue {background-color: #4BC0E2;}
.bg-dark-blue {background-color: #1C4182;}
.bg-red {background-color: #E43E2D;}

.w-33 {width: 33%;}
.w-75 {width: 75%;}
.table-element{ display: table; margin: 0; padding: 0; width: 100%; height: 100%; }
.table-cell{ display: table-cell; margin: 0; padding: 0; width: 100%; height: 100%; }

/*HEADER*/
header {position: fixed; overflow: hidden; top: 0; width: 100%; z-index: 100;}
header a {color: white;}
header .menu-main-menu-container li {display: inline-block; list-style-type: none; padding-left: 20px; padding-right: 20px;}
header .menu-main-menu-container ul {padding: 0; margin: 0;}
header .menu-main-menu-container a:hover {color: #4BC0E2;}
header .buy a:hover {color: #1D4486;}
header a:hover {
    color: #4BC0E2;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}
.menu-main-menu-container {flex: 0 1 calc(100% - 250px);}
.menu-main-menu-container ul {display: flex; flex-wrap: nowrap; align-items: center; align-content: center; justify-content: space-between;}

.header-logo {flex: 0 1 125px; margin-left: 20px;}
header ul li {text-align: center;}
header ul li.watch-nav {flex: 0 1 25%;}
header ul li.vip-nav {flex: 0 1 20%;}
header ul li.buy {flex: 0 1 25%;}
header ul li.about-nav {flex: 0 1 15%;}
header ul li.partners-nav {flex: 0 1 13%;}
header ul li.donate-nav {flex: 0 1 13%;}
header .menu-main-menu-container li {padding-right: 20px;}

li.buy {background-color: #E43E2D; cursor: pointer;}
header .buy {padding: 30px; font-size: 26px;}
header .buy:hover {
    background-color: white;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}
header .buy:hover a{
    color: #1D4486;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}

/*Mobile Header*/
#mobile_header{ display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 99998;}
#mobile_header ul{ padding-left: 20px; padding-top: 0px; padding-right: 20px; margin: 0; list-style-type: none;}
#mobile_header ul{ display: flex; flex-wrap: wrap }
#mobile_header ul li{ flex: 0 1 100%; }
#mobile_header ul li.buy{ order: 10; }
#mobile_header ul li:before {content: none;}
#mobile_header ul li{ display: block; padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #ccc;}
#mobile_header ul li a{ display: block; font-size: 19px; color: #222222; }
#mobile_header ul li.buy{background: white;}
#mobile_header ul li.buy a {font-size: 26px; color: #E43E2D; font-family: "TheSansC5-Bold", sans-serif;}
.fa-times {font-size: 30px; color: black;}
.fa-bars {color: white;}

/*BANNER*/
#banner {min-height: 900px; margin-top: 93px; background-repeat: repeat-x;}
.city-banner-back {
    position: absolute;
    bottom: 0;
    transition: all 3s;
    -moz-transition: all 3s;
    -webkit-transition:all 3s;
}
.city-banner-front {
    position: absolute;
    bottom: -5px;
    left: 15%;
    transition: all 3s;
    -moz-transition: all 3s;
    -webkit-transition: all 3s;
}
.city-banner-back.animate {
    bottom: 15px;
    transform: scale(1.15);
    -moz-transform: scale(1.15);
    -webkit-transform: scale(1.15);
}

.city-banner-front.animate {
    bottom: 15px;
    transform: scale(1.3);
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
}

/*PERFORMANCES*/
.calendar-button {height: 100px; border-radius: 0; width: calc(100% - 100px); }
.calendar-logo-left, .calendar-logo-right {cursor: pointer;}
/*.calendar-button:hover {*/
/*    background-color: #4BC0E2;*/
/*    transition: 0.5s;*/
/*    -moz-transition: 0.5s;*/
/*    -webkit-transition: 0.5s;*/
/*}*/
.calendar-logo-left {height: 100px; width: 100px; }
.calendar-logo-right {height: 100px; width: 100px; }
hr {border-top: 2px solid #4BC0E2;}
.katy {font-size: 32px;}

/*SUPPORT*/
.purchase-button {height: 75px; border-radius: 0;}
.learn-more a:hover {
    color: #E33D2C;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;}
.support-block .btn:hover {
    background-color: #4BC0E2;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}
.support-text {text-align: left;}

/*ABOUT*/
.jump-tag:target {
    display: block;
    position: relative;
    top: -75px;
    visibility: hidden;
}
#about-container {min-height: 850px;}
.city-left {position: absolute; bottom: 0; left: 0; width: 400px;}
.city-right {position: absolute; bottom: 0; right: 0; width: 400px;}
#aboutCarousel .carousel-control-prev-icon {
    margin-bottom: 60px;
}
#aboutCarousel .carousel-control-next-icon {
    margin-bottom: 60px;
}

#aboutCarousel .carousel-indicators {
    position: static;
}
#aboutCarousel .carousel-indicators>li {
    height: auto;
    width: 100px;
}
#aboutCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5
}
#aboutCarousel .carousel-indicators li.active img {
    opacity: 1;
    border-style: solid;
    border-color: white;
    border-width: 2px;
}
#aboutCarousel .carousel-indicators li:hover img {
    opacity: 0.75
}

/*FOOTER*/
footer a:hover {
    color: white;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}

a:hover {text-decoration: none;}
a:active, a:focus {
    outline: 0;
    border: none;
}
.northwell {width: 450px;}

@media only screen and (max-width: 1299px){
    #banner {min-height: 850px;}
    /*.support-text {min-height: auto;}*/
    .city-banner-back {width: 1500px;}
    .city-banner-front {width: 1250px;}
}

@media only screen and (max-width: 1199px){
    header .menu-main-menu-container li {font-size: 18px;}
    header .buy {font-size: 24px !important;}
    #banner {min-height: 800px; margin-top: 83px;}
    .support-text {min-height: 120px;}
    .about-northwell, .support-title {font-size: 46px;}
    .logo {width: 175px;}
    .calendar-logo-right {right: 20px;}
}

@media only screen and (max-width: 991px) {
    #banner {min-height: 1200px;}
    .support-text {min-height: 160px;}
    .calendar-logo-right {right: 15px;}
    #about-container {min-height: 700px;}
    .northwell-logo-small {width: 225px !important; margin-left: 42px; }
    header ul li.watch-nav {display: none;}
    header ul li.vip-nav {display: none;}
    header ul li.about-nav {display: none;}
    header ul li.partners-nav {display: none;}
    header ul li.donate-nav {display: none;}
    header ul li.donate {display: none;}
    header .buy {font-size: 20px !important; padding: 30px 45px 30px 45px !important;}
    .open-mobile-menu {flex: 0 1 65%;}
    header ul li.buy {flex: 0 1 35%;}
    .header-logo {flex: 0 1 175px;}

    .city-banner-back {width: 1300px; left: -200px;}
    .city-banner-front {width: 1100px; left: -100px}
    .city-banner-back.animate {
        bottom: 30px;
        transform: scale(1.3);
        -moz-transform: scale(1.3);
        -webkit-transform: scale(1.3);
    }

    .city-banner-front.animate {
        bottom: 35px;
        transform: scale(1.5);
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
    }
}

@media only screen and (max-width: 767px){
    #banner {min-height: 950px;}
    .support-text {min-height: auto;}

    .font-size-56 {font-size: 52px !important;}
    .font-size-52 {font-size: 48px !important;}
    .font-size-46 {font-size: 42px !important;}
    .font-size-32 {font-size: 28px !important;}
    .font-size-24 {font-size: 22px !important;}
    .font-size-20 {font-size: 18px !important;}
    .font-size-16 {font-size: 14px !important;}
    .font-size-12 {font-size: 11px !important;}
    #about-container {min-height: 850px;}
    .northwell-logo-small {margin-left: 0; }
    .thank-you {font-size: 42px;}
    .northwell {width: 300px;}
    .open-mobile-menu {flex: 0 1 50%;}
    header ul li.buy {flex: 0 1 50%;}
    .header-logo {flex: 0 1 150px;}

    .city-banner-back {width: 1000px; left: -150px;}
    .city-banner-front {width: 800px; left: -50px}
    #banner_player{ padding-bottom: 150px; }
}

@media only screen and (max-width: 575px){
    .font-size-56 {font-size: 36px !important;}
    .font-size-52 {font-size: 32px !important;}
    .font-size-46 {font-size: 32px !important;}
    .open-mobile-menu {flex: 0 1 40%;}
    header ul li.buy {flex: 0 1 60%;}
    .header-logo {flex: 0 1 100px;}

    .city-banner-back {width: 750px; left: -100px;}
    .city-banner-front {width: 650px; left: -50px}
}

@media only screen and (max-width: 475px) {
    #banner {min-height: 825px;}
    .open-mobile-menu {flex: 0 1 25%;}
    header ul li.buy {flex: 0 1 75%;}
    .btn {font-size: 16px !important;}
}

@media only screen and (max-width: 425px) {
    .open-mobile-menu {flex: 0 1 10%;}
    header ul li.buy {flex: 0 1 90%;}

}