* {box-sizing: border-box;}

html {background: #000;
        -webkit-font-smoothing: antialiased;
        }

#wrapper {display: grid;
            grid-auto-rows: minmax(0px, auto);
            grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 75px)) minmax(0px, 1fr);
            grid-column-gap: 0;}

#features {padding: 0 10px;}

#home-live::before, #home-learn::before, #home-event::before, #home-staff::before, #home-space::before, #home-us::before, #show-standup::before, #show-improv::before, #show-openmic::before, #show-karaoke::before, #show-music::before, #show-poet::before, #show-stage::before, #learn-standup::before, #learn-improv::before, #learn-speaking::before, #learn-writing::before, #learn-screenplay::before, #dates-full::before, #dates-comedy::before, #dates-training::before, #dates-events::before, #buy-show::before, #buy-stuff::before, #buy-vip::before, #buy-mic::before, #buy-training::before, #buy-speaker::before, #buy-space::before, #buy-sponsor::before, #buy-content::before, #crew-map::before, #crew-news::before, #crew-library::before, #crew-faqs::before, #crew-partner::before, #crew-events::before { 
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}


$('.slider').sss(
            {slideShow : true, // Set to false to prevent SSS from automatically animating.startOn : 0, // Slide to display first. Uses array notation (0 = first slide).transition : 400, // Length (in milliseconds) of the fade transition.speed : 3500, // Slideshow speed in milliseconds.showNav : true // Set to false to hide navigation arrows.
            });

.flex-nav {display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: flex-end;}

.topline {grid-area: 1 / 2 / 2 / 14;
            text-align: right;
            align-content: flex-end;
            justify-content: flex-end;
            background-image: url(logos/CHuCKLES_Logo1b-KO.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: left;
            height: 80px;}

.topline h2 {padding: 20px 0px;
                margin: 6px;}

.first-half {grid-column: 2 / 8;
                background-color: rgb(153, 0, 153, 0.5);
                padding: 0 20px;}

.middle-half {grid-column: 5 / 11;
                background-color: rgb(153, 0, 153, 0.5);
                padding: 0 20px;}

.second-half {grid-column: 8 / 14;
                background-color: rgb(153, 0, 153, 0.5);
                padding: 0 20px;}

.first-third {grid-column: 2 / 6;
                background-color: rgb(153, 0, 153, 0.5);
                padding: 0 20px;}

.middle-third {grid-column: 6 / 10;
                background-color: rgb(153, 0, 153, 0.5);
                padding: 0 20px;}

.last-third {grid-column: 10 / 14;
                background-color: rgb(153, 0, 153, 0.5);
                padding: 0 20px;}

.front-thirds {grid-column: 2 / 10;
                background-color: rgb(153, 0, 153, 0.5);
                padding: 0 20px;}

.back-thirds {grid-column: 6 / 14;
                background-color: rgb(153, 0, 153, 0.5);
                padding: 0 20px;}

.photo1 {grid-column: 2 / 5;
            background-color: rgb(153, 0, 153, 0.5);
            width: 100%;}

.photo2 {grid-column: 5 / 8;
            background-color: rgb(153, 0, 153, 0.5);
            width: 100%;}

.photo3 {grid-column: 8 / 11;
            background-color: rgb(153, 0, 153, 0.5);
            width: 100%;}

.photo4 {grid-column: 11 / 14;
            background-color: rgb(153, 0, 153, 0.5);
            width: 100%;}

body {color: #ddd;
        background: #000;
        background-image: url(images-curtains/curtains1600-1.jpg); 
        background-position: top;
        background-attachment: fixed;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
        font-family: "Optima", Helvetica, Arial, sans-serif;
        font-size: 18px;
        line-height: 1.5;
        margin: auto;
        max-width: 1600px;
        padding: 2em 2em 4em;}

header {background-color: rgb(204, 153, 255, 0.9);
        color: #ffffff;
        grid-area: 2 / 2 / 3 / 14;
        position: -webkit-sticky; 
        position: sticky; 
        line-height: 200%;    
        margin: 0;
        top: 0;}

nav {display: flex;
        grid-area: 2 / 2 / 3 / 14;
        position: -webkit-sticky; 
        position: sticky; 
        justify-content: flex-end;
        align-content: center;
        top: 0;
        z-index: 1;}

nav ul {list-style-type: none;
            margin: 0px;
            padding: 0;}

nav a, .dropbtn {display: inline-block;
                    color: lavender;
                    text-align: center;
                    padding: 14px 8px;
                    text-decoration: none;}

nav a:hover, .dropdown:hover .dropbtn {color: #8000ff;
                                        font-weight: 600;}

nav .dropdown {display: inline-block;}

.dropdown-content {display: none;
                      position: absolute;
                      background-color: lavender;
                      opacity: 0.95;
                      min-width: 160px;
                      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                      z-index: 1;}

.dropdown-content a {color: mediumpurple;
                      padding: 12px 16px;
                      text-decoration: none;
                      display: block;
                      text-align: left;}

.dropdown-content a:hover {background-color: rgb(230, 204, 255, .8);}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: rgb(243, 230, 255, .7);}

main {grid-area: 4 / 3 / 6 / 9;
        padding: 1px 2em;
        display: block;}

main li {padding-left: 24px;}

section {grid-area: 3/ 2 / 4 / 9;
            align-content: center;
            padding: 0px 30px 0px 30px;
            display: block;}

section h3 {text-align: center;}

section h4 {text-align: right;}

section h5 {text-align: center;}

aside .slider h2 {text-align: center;
                    padding: 0 30px;}

aside .slider h4 {text-align: right;}

aside {grid-area: 3 / 9 / 6 / 14;
        padding: 0px 30px;
        display: block;}

aside h4 {margin-bottom: 0.5em;}

aside iframe {width: 100%; height: auto; frameborder="1";
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen;}

iframe {width: 100%; height: auto;}

aside img {width: 100%;}

div img {border-color: lavender;
            padding: 20px 0px;
            width: 100%; 
            height: auto;}

footer {grid-area: 89 / 2 / 90 / 14;
        height: 80px;
        background-color: rgb(230, 204, 255, .5);
        background-image: url(logos/CHuCKLES_Logo1.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        color: lavender;
        font-size: .7em;
        font-style: italic;
        text-align: left;
        padding: 0 1em;}

footer p {text-align: center;}

h1, h2, h3, h4, h5, h6 {color: lavender;
                        line-height: 1.1;}

h5 {color: purple;}

h6 {margin-top: 6px;}

h2 {color: rgb(255, 153, 255)}

h3 {color: #bf00ff;
    text-shadow: 1px 1px 2px black;}

p {font-weight: bold;}

a {color: #8000ff;
    text-decoration: none;}
    
nav a {color: mediumpurple;
        text-align: center;
        padding: .5rem .5rem;
        transition: color .3s ease-in-out, background-color .3s ease-in-out;}

strong {
    font-weight: 600;
    }

@media only screen and (max-width: 1600px) {
    #wrapper {grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 80px)) minmax(0px, 1fr);}
    }

@media only screen and (max-width: 992px) {
    #wrapper {grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 64px)) minmax(0px, 1fr);}
    body {background-image: url(images-curtains/curtains1200-1.jpg);}
    nav {grid-area: 2 / 2 / 3 / 14;}
    nav ul {flex-flow: column nowrap;}
    section {float: none;
            width: 100%;}
    }

@media only screen and (max-width: 768px) {
    #wrapper {grid-template-columns: 0px repeat(12, minmax(0, 64px)) 0px;}
    .topline {height: 60px}
    .topline h2 {font-size: 16pt;}
    nav a, .dropbtn {padding: 4px 8px;}
    .dropdown-content a {padding: 8px;}
    body {color: #ddd;
        background: #1a0033;
        font-size: 12pt;
        line-height: 1.1;
        margin: 0px;
        max-width: 768px;
        padding: 0;}
    section {grid-area: 3/ 1 / 4 / 15;
                padding-top: 10px;}
    main {grid-area: 4 / 1 / 5 / 15;
        padding: 1px 2em;
        display: block;}
    aside {grid-area: 5 / 1 / 6 / 15;
        padding: 30px;
        display: block;}
    nav {grid-area: 2 / 1 / 3 / 15;}
    footer {grid-area: 89 / 1 / 90 / 15;
        height: 70px;}
    }