@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

::selection {
    background: #F26F21;
    color:#fff;
}

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

.navbar-brand img {
    width:75px;
}

.navbar.bg-dark {
    background-color:#000 !important;
}

.nav-link.active {
    border-bottom:3px solid #F26F21;
}

#video-banner video {
    width:100%;
    height:600px;
    object-fit:cover;
    position:absolute;
    z-index:-1;
    filter: brightness(50%);
}

#video-overlay {
    height: 600px;
    margin: 0 auto;
    color:#fff;
    font-weight:bold;
    position:relative;
}

#overlay-text {
    position:absolute;
    bottom:10px;
}

ul.social-media-list {
    margin:0;
    padding:0;
}

.social-media-list li {
    display:inline-block;
    text-decoration:none;
    padding:0 5px;
}

.social-media-list i {
    font-size: 1.5rem;
    color: #fff;
}

#social-media {
    padding:20px;
}

#social-media h2, #social-media span {
    font-size:1rem;
}

.section-heading {
    font-weight:bold;
    border-bottom:3px solid #F26F21;
    display:inline-block;
    padding:5px 0;
    font-size:1.5rem;
}

.news-story a {
    color:#000;
    text-decoration:none;
}

.news-story .story-date {
    font-size:.75rem;
}

#donate {
    padding:50px 0;
    text-align:center;
    color:#fff;
}

#footer {
    padding:50px 0;
    background:#000;
    color:#fff;
}

#footer nav ul li a {
    text-decoration:none;
    color:#fff;
}

#footer nav ul li {
    list-style:none;
    padding:5px 0;
}

#footer nav ul {
    padding:0;
}

#footer .footer-heading {
    font-weight:bold;
    border-top:3px solid #fff;
    padding:20px 0;
    display:inline-block;
}

#footer img {
    max-width:200px;
}

#content {
    margin:50px 0;
}

#content .navbar {
    padding: 15px;
}

#content ul.navbar-nav {
    width:100%;
}

#content ul.navbar-nav li {
    padding:5px;
    border-bottom:1px solid #ccc;
}

#content ul.navbar-nav a {
    color:#000;
}

#content ul.navbar-nav li.active {
    background:#eee;
}

#hero-banner {
    background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('../img/banner1.jpg');
    background-position:center;
    background-size:cover;
    color:#fff;
    height:300px;
}

div.ctct-form-defaults {
    padding: 0 !important;
}

#footer i.bi-twitter {
    color: #1DA1F2;
}

#footer i.bi-facebook {
	color:#4267B2;
}
#footer i.bi-pinterest {
	color:#c00;
}

#footer i.bi-instagram {
	color:#F77737;
}

#footer i.bi-youtube {
	color:#f00;
}

#footer i.bi-vimeo {
	color:#26b9f1;
}

#originals .row {
	margin-top:20px;
}

.show-title {
    color: #7e7e7e;
    margin-top: 10px;
    font-weight: 300;
    font-size:16px;
}

.episode-description {
    color: #7e7e7e;
}
.episode {
    margin:30px auto;
}

.episode .show-title {
    margin-top:0;
}

.episode.episode-small .episode-title{
    font-size:1em;
}

.episode-small {
    cursor:pointer;
    padding:10px;
    transition:background-color .5s;
}

.episode-small:hover {
    color:#fff;
    background:#346c6b;
}

.episode-small:hover .show-title {
    color:#fff;
}
#small-episode-list .episode {
	margin:0;
}

#small-episode-list {
    height:600px;
    overflow:scroll;
    border-bottom:1px solid #ccc;
	overflow-x:hidden;
}

.sbccd {
	text-align:center;
}

#breadcrumb {
    background: #ccc;
    padding: 5px;
}

#breadcrumb a {
	color:#000;
	text-decoration:none;
}

.blog-entry p {
	margin:2rem;
}

.navbar.sticky {
	position:sticky;
	top:0;
}

.show-listing .show-title {
	font-weight:bold;
	font-size:2rem;
}
.show-listing .show-genre {
	font-size:.75rem;
	font-size:italic;
}

.artist-name {
    margin:15px 0 0 0;
    font-weight:bold;
}

.artist .social ul {
    margin:0;
    padding:10px 0;
}

.artist .social ul li {
    display:inline-block; 
    font-size:1.5rem;
    margin:10px;
}

.artist .social ul li:first-of-type {
    margin:10px 10px 10px 0;
}

.artist {
    border-bottom: 1px solid #ccc;
    margin-bottom: 25px;
}

#new-on-app {
    margin:20px 0;
}

#new-on-app .posters-container {
    margin:50px 0;
}

#new-on-app .posters-container .poster {
    text-align:center;
}

#new-on-app .posters-container .poster {
    margin:20px 0;
}

#app-header h1 {
    line-height:3rem;
}

#app-header {
    padding:20px;
    background:#f1f1f1;
}

#app-header p {
    font-size:1.25rem;
}

#app-platforms {
    margin: 50px 0;
}

#app-platforms .platform {
    display:block;
    width:100%;
    position:relative;
    border:1px solid #ccc;
}

#app-platforms .platform::before {
    content: '';
    padding-top: calc(81/163*100%);
    display: block;
}

#app-platforms .platform-flex-grid {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: start;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

#app-platforms .platform-flex-grid p {
    padding:10px 0;
}

#app-platforms .platform-flex-grid a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 200px;
    flex: 0 0 200px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 15px;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-line-pack: center;
    align-content:center;
    font-weight:bold;
    text-decoration:none;
}

#app-platforms img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: 100%;
    max-width: 100%;
}

.btn-bold {
    font-weight:bold;
    text-transform:uppercase;
}

#gala-heading {
    background:#000;
    color:#fff;
}


#gala-heading-image {
    background:linear-gradient(180deg, rgba(0,0,0,20%) 0%, rgba(0,0,0,0) 100%), url('/_resources/img/halluci-smaller.jpg');
    background-color:#000;
    height:100vh;
    background-size:cover;
    background-position:center;
    color:#fff;
}

#gala-heading .gala-title {
    padding:20px 0;
}

#gala-heading span.emphasis, #gala-content #app-header a.emphasis {
    color:#e9f37c;
}

#gala-heading img.phone {
    filter: drop-shadow(5px 3px 2px black) drop-shadow(-1px -1px 0 white);
    width:230px;
    transform: rotate(4deg);
}

#gala-heading a, #gala-sticky a {
    margin:15px 0 ;
}

#gala-heading h1 {
    font-size:72px;
    font-family: "Playfair Display", serif;
    text-transform:uppercase;
    text-shadow: 2PX 2PX 0px #0a0808;
    font-style: normal;
}
#gala-content .headliner.description {
    background: #000;
    color: #fff;
    padding: 50px 0;
}
#gala-heading p {
    font-weight:bold;
}

#gala-heading #cta {
    justify-content: center;
    align-items: start;
    grid-gap:50%;
}

#gala-information {
    border-top:5px dashed #000;
    padding:30px 0;
}

#gala-content h2 {
    font-weight:bold;
    font-family: sans-serif;
}

#gala-content #catering {
    height:100vh;
    background:url('/_resources/img/sean-sherman.jpg');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

#gala-content .gala-divider {
    background:#000;
    padding:20px 0;
}

#gala-content .gala-title img {
    margin:20px 0;
}
#gala-content .gala-divider h2 {
    margin:0;
    color:#fff;
    text-align:center;
    text-transform:uppercase;
}

#gala-content .gala-divider h3 {
    margin:0;
    text-align:center;
    color:#e9f37c;
    font-size:24px;
    text-transform:uppercase;
}

#gala-content #app-header {
    background:#272727;
    color:#fff;
}

#gala-content .headliner-container {
    display:flex;
}

#gala-content .headliner.description h2 {
    color:#e9f37c;
    font-size:24px;
    text-transform:uppercase;
}

#gala-content .headliner {
    display:flex;
    flex-direction:column;
    align-items:center;
    flex-basis:0;
    flex-grow:1;
}

#gala-content a.headliner {
    text-decoration:none;
    cursor:inherit;
}

#gala-content a.headliner h3 {
    font-size: 19px;
    background: #fff;
    padding: 10px 15px;
    max-width:250px;
    color: #000;
    text-align:center;
    position: relative;
    bottom: 10%;
    transition:background-color .4s;
}

#gala-content a.headliner:hover h3 {
    background:#f26f21;
    color:#fff;
}

#gala-content .headliner.description img {
    text-align:center;
}

#gala-content .headliner.description p {
    margin-top:15px;
    font-size:18px;
}

#gala-content .headliner summary {
    font-weight:bold;
    margin:20px 0;
    text-align:center;
}

#gala-content #gala-headliners {
    background:#272727;
    padding:50px 0;
}

#gala-content #gala-headliners .headliner img {
    max-width:200px;
    border-radius:50%;
}

#gala-content #gala-headliners-title {
    color:#fff;
    text-align:center;
    font-family: "Playfair Display",  serif;
    padding:30px;
    background: rgb(3,62,79);
    background: linear-gradient(180deg, rgba(3,62,79,1) 0%, rgba(0,0,0,0) 30%);
}

#gala-sponsor {
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(64,64,64,1) 100%);
    padding:20px 0;
}

#gala-sponsor .sponsor-section {
    padding:20px;
}

#gala-sponsor .card-top {
    background:#e9f37c;
    margin: 0;
    padding: 5px;
    text-align: center;
    color: #000;
}

#gala-sponsor .card {
    border:0;
}

#gala-sponsor .card a {
    text-transform:uppercase;
}

#gala-sponsor .section-heading {
    color:#fff;
    padding-bottom:20px;
    text-align:center;
    margin-bottom:0;
    margin-top:30px;
    border-bottom:3px dashed #e9f37c;
    display:block;
}

#gala-sponsor .card-wrapper {
    flex: 0 0 33.333%;
    display: flex;
    padding: 10px; /* gutter width */
}

#gala-sponsor .card-title {
    text-align:center;
    font-weight:bold;
}


#gala-content details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

#gala-content #tickets {
    background:#272727
}

#tickets .ticket-info {
    margin:20px 0;
}

#gala-content .card-wrapper {
    justify-content: center;
}

#gala-content .card-wrapper {
    flex: 0 0 33.333%;
    display: flex;
    padding: 10px; /* gutter width */
}
#gala-content .card {
    border:0;
    color:#000;
}

#gala-content .card-top {
    background:#e9f37c;
    margin: 0;
    padding: 15px;
    text-align: center;
    color: #000;
}

#gala-heading {
    display:flex;
    flex-direction:column;
    align-items:center;
    flex-basis:0;
    justify-content: flex-end;
    flex-grow:1;
    background:linear-gradient(180deg, rgba(0,0,0,20%) 0%, rgba(0,0,0,0) 100%), url('/_resources/img/halluci-smaller.jpg');
    color:#fff;
    height:100vh;
    background-position-x:center;
    background-position-y:50%;
    background-repeat:no-repeat;
	background-size:cover;
}


#gala-content #sponsors {
    background:#000;
    padding:20px 0;
} 

#gala-content #sponsors .d-flex {
    justify-content: space-between;
    align-items: center;
}

#gala-content #sponsors h2 {
    color:#e9f37c;
    font-size:24px;
    text-transform:uppercase;
}

#gala-content #sponsors .sponsor {
    display:flex;
    align-items:center;
    
}

#gala-content #sponsors .sponsor img {
    max-height:200px;
    max-width:200px;
}

#emmy {
    padding:10px 0;
    background:#000;
}

#emmy h2 {
    margin:0;
    font-size:20px;
    padding:20px 0;
}

#emmy a {
    color:#fff;
}

#stream-shows {
    background:#f1f1f1;
}

#stream-shows .shows-text-container {
    padding:20px;
}

@keyframes sweep {
  0%    {opacity: 0; transform: translateX(-10px)}
  100%  {opacity: 1; transform: translateX(0)}
}

  @media (max-width: 992px) {
    #gala-sponsor .card-wrapper {
        flex:initial;
    }
    #gala-heading {
        background-position:top;
    }
    #gala-sponsor .card-wrapper .card {
        width:100%;
    }
    #gala-content .headliner.primary .heading h2, #gala-content #gala-headliners-title h2 {
        font-size:50px;
    }
    #gala-content #gala-headliners .headliner-thirds-container {
        display:flex;
        flex-direction:column;
    }
    .headliner-container {
        flex-direction:column;
    }
    #gala-heading #cta {
        grid-gap:25%;
    }
	#gala-content #sponsors .d-flex {
        flex-direction:column;
    }
  }

  @media (max-width: 750px) {
    #gala-heading h1 {
        font-size:60px;
    }
    #gala-heading {
        text-align:center;
    }
    #gala-heading #cta {
        margin:20px;
        align-items:center;
    }
    #gala-heading .col-md-4 {
        display:none;
    }
  }