/* 
Fonts and Colors
font-family: "Roboto", sans-serif;
font-family: "Permanent Marker", cursive;
font-family: "Luckiest Guy", cursive;

Dark Purple: #35328d;
Green: #4daf4e;
Darker green: #37783a;
Dark grey: #4c4c4c;
Lighter grey: #797979;
*/
@charset "utf-8";

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    font-family: "Roboto", sans-serif;
}

img{
    max-width:100% !important;
}

/* Gloabl */
.sect-h2 {
    color: #37783a;
    font-family: "Permanent Marker", cursive;
    font-size: 2em;
    text-decoration: underline solid 2px #797979;
    text-underline-offset: 15px;
    margin-bottom:50px
}

/* Navbar */
.navbar {
    display: flex;
    align-items: center;
    padding: 10px 5%;
    justify-content: space-between;
    position: sticky;
    z-index: 999;
    top: 0;
    background-color: rgba(256, 256, 256, 0.7);
    /* border-bottom: 0.5px solid #131313; */
}
.navbar-menu {
    list-style: none;
    display: flex;
}
.navbar-menu li {
    padding: 8px 20px;
}
.navbar-link a {
    font-size: 1em;
    text-decoration: none;
    color: black;
    /* font-weight: 500; */
}
.navbar-link a::after {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    background-color: #35328d;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.navbar-link a:hover::after {
    transform: scaleX(1);
}
#logo {
    width: 10%;
    transition: all 0.3s ease;
}

.grid-two-columns{
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:1fr 1fr;
    grid-template-columns:1fr 1fr;
}

.text-left{
    text-align:left;
    padding:10px;
}

.text-right{
    text-align:right;
    padding:10px;
}
@media screen and (max-width: 1322px) {
    .navbar-menu li a {
        font-weight: bolder;
    }
}
@media screen and (max-width: 1115px) {
    .navbar-menu li {
        /* padding: 8px 12px; */
        padding: 7px 11px;
        font-size: 0.8em;
    }
    #logo {
        width: 10%;
    }
}
/* @media screen and (max-width: 1140px) {
    .navbar-menu li a {
        font-size: 0.9em;
    }
} */
@media screen and (max-width: 960px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar-menu {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 10px 20px;
        left: 0;
    }
    .navbar-menu li {
        /* width: 100%; */
        text-align: center;
        font-size: 1em;
        padding: 5px 15px;
        border-radius: 10px;
        margin: 5px 0;
    }
    .navbar-link {
        transition: all 0.5s ease;
    }
    .navbar-link:hover {
        /* background-color: #35328d; */
        /* color: #35328d; */
        transition: all 0.5s ease;
    }
    .navbar-link a:hover {
        color: #35328d !important;
    }
    .navbar-link a:hover::after {
        transform: scaleX(0);
    }
    .navbar-menu {
        display: grid;
        grid-template-columns: auto;
        margin: 0;
        width: 100%;
        position: absolute;
        top: -1000px;
        opacity: 0;
        transition: all 0.5s ease;
        height: 80vh;
        z-index: -1;
        background-color: #fff;
    }
    .navbar-menu.active {
        background: #f0f0f0;
        top: 100%;
        opacity: 1;
        transition: all 0.5s ease;
        z-index: 99;
        height: 50vh;
        font-size: 1.6rem;
    }
    #logo {
        /* padding-left: 25px; */
        width: 20%;
    }
    .navbar_toggle .bar {
        width: 25px;
        height: 3px;
        margin: 5px auto;
        transition: all 0.5s ease-in-out;
        background-color: black;
    }
    #mobile_menu {
        position: absolute;
        top: 15%;
        right: 5%;
        transform: translate(10%, 10%);
    }
    .navbar_toggle .bar {
        display: block;
        cursor: pointer;
    }

    #mobile_menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }

    #mobile_menu.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    #mobile_menu.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* Banner */
.banner-bg {
    position: relative;
}
.banner-bg img {
    width: 100%;
    position: relative;
    border-bottom: #35328d 20px solid;
}
.banner-text{
    width: 50%;
    position: absolute;
    z-index: 998;
    background-color: rgba(0,0,0,0.67);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: "Luckiest Guy", cursive;
    padding: 5%;
}
.banner-text h1 {
    font-size: 4em;
    color: white;
    margin-bottom: 10px;
}
.banner-text h2 {
    font-size: 2.3em;
    color: #4daf4e;
    margin-bottom: 25px;
}
.btn {
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    color: white;
    padding: 15px 70px;
    /* background-color: white; */
    border: #4daf4e 1px solid;
    transition: all 0.5s ease;
}
.btn:hover {
    background-color: #4daf4e;
    border: white 1px solid;
    transition: all 0.5s ease;
}


/* event container */
.body-container {
    text-align: center;
    padding: 100px 520px;
}

.purple-content{
    background-color:#22246f;
    color:#fff;
    text-align:center;
    padding:2%;
    width:100%;
    font-size:1.8em;
    font-family:"Permanent Marker", cursive;
}
.events-grid {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    margin-bottom: 80px;
}
.event {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
}
.location {
    color: #797979;
}
/* .events-grid,  */
.poster-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 80px;
}
.evt-szn p, .evt-location p {
    margin-bottom: 5px;
}
.evt-szn {
    text-align: left;
}
.evt-location {
    text-align: right;
    color: #797979;
}
.poster img {
    width: 100%;
}
.poster-description {
    font-family: "Permanent Marker", cursive;
    color: #35328d;
    font-size: 1.5em;
    text-align: center;
    align-items: center;
    padding: 50px 60px;
    display: flex;
}
.vendor-faq div {
    text-align: left;
}
.vendor-faq div a {
    color: #35328d;
}

/* About section */
.about-us {
    position: relative;
    margin-bottom: 50px;
}
.about-us img {
    width: 100%;
    z-index: 0;
}
.about {
    position: absolute;
    color: white;
    font-family: "Permanent Marker", cursive;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 900;
    width: 70%;
}
.about h2 {
    margin-bottom: 80px;
    font-size: 2em;
}
.about p {
    font-size: 1.8em;
}

/* Gallery Section */
.gallery-container {
    text-align: center;
    margin-bottom: 50px;
}
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
}
.gallery-grid img {
    width: 100%;
}

/* Social Section */
.social-container {
    text-align: center;
    padding: 0 5%;
}
.social {
    margin-bottom: 50px;
}

/* footer */
.footer {
    padding: 30px 50px 15px;
    background-color: #35328d;
    color: white;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 15px;
}
.footer-info {
    text-align: left;
}
.footer-info h3 {
    font-family: "Permanent Marker", cursive;
    font-size: 1.5em;
}
.footer-info h3, .footer-info p {
    margin-bottom: 10px;
}
.footer-info p:nth-child(3) {
    margin-bottom: 0;
}
.footer-menu {
    text-align: right;
}
.footer-menu ul {
    list-style: none;
}
.footer-menu ul li {
    margin-bottom: 10px;
}
.footer-menu ul li:nth-child(5) {
    margin-bottom: 0;
}
.footer-menu ul li a {
    text-decoration: none;
    color: white;
}
.credit {
    text-align: center;
}

/* Responsiveness */
@media screen and (max-width: 1900px) {
    .body-container {
        padding: 100px 400px;
    }
}
@media screen and (max-width: 1660px) {
    .body-container {
        padding: 100px 300px;
    }
}
@media screen and (max-width: 1460px) {
    .body-container {
        padding: 100px 200px;
    }
    .banner-text h1 {
        font-size: 3em;
    }
}
@media screen and (max-width: 1360px) {
    .about h2 {
        margin-bottom: 60px;
    }
}
@media screen and (max-width: 1265px) {
    .body-container {
        padding: 70px 100px;
    }
    .banner-text {
        top: 40%;
    }
    .about h2 {
        font-size: 1.8em;
    }
    .about p {
        font-size: 1.3em;
    }
}
@media screen and (max-width: 1060px) {
    .banner-text {
        top: 35%;
    }
    .event {
        font-size: 0.8em;
    }
    .about h2 {
        margin-bottom: 50px;
    }
}
@media screen and (max-width: 950px) {
    .banner-text h1 {
        font-size: 2.5em;
    }
    .banner-text h2 {
        font-size: 2em;
    }
    .btn {
        padding: 10px 50px;
    }
    .about h2 {
        font-size: 1.5em;
        margin-bottom: 40px;
    }
    .about p {
        font-size: 1.2em;
    }
    .footer {
        padding: 20px 30px 10px;
    }
}
@media screen and (max-width: 900px) {
    .banner-text {
        top: 30%;
    }
    .events-grid {
        margin-bottom: 50px;
        grid-template-columns: none;
        grid-template-rows: 1fr 1fr;
    }
    .poster-description {
        font-size: 1.3em;
    }
}
@media screen and (max-width: 850px) {
    .poster-description {
        font-size: 1.1em;
    }
    .about h2 {
        margin-bottom: 25px;
    }
    .about p {
        font-size: 1em;
    }
}
@media screen and (max-width: 770px) {
    .banner-text {
        top: 25%;
    }
    .banner-text h1 {
        font-size: 2em;
    }
    .banner-text h2 {
        font-size: 1.7em;
    }
    .poster-description {
        font-size: 1em;
        padding: 10px 45px 30px;
    }
    .poster-grid {
        grid-template-columns: none;
        margin-bottom: 20px;
    }
    .event {
        flex-direction: column;
        text-align: left;
    }
}
@media screen and (max-width: 725px) {
    .about h2 {
        font-size: 1.2em;
        margin-bottom: 18px;
    }
    .about p {
        font-size: 0.7em;
    }
    .gallery-grid {
        grid-template-columns: none;
        padding: 0 50px;
    }
}
@media screen and (max-width: 620px) {
    .banner-text h1 {
        font-size: 1.7em;
    }
    .banner-text h2 {
        font-size: 1.3em;
    }
    .btn {
        font-size: 0.7em;
        padding: 10px 35px;
    }
    .banner-text {
        top: 20%;
    }
    .body-container {
        padding: 50px 75px;
    }
    .footer {
        padding: 15px 20px 8px;
    }
}
@media screen and (max-width: 550px) {
    .footer-info h3 {
        font-size: 1em;
    }
    .footer-info p {
        font-size: 0.9em;
    }
    .footer-menu ul li a {
        font-size: 0.8em;
    }
    .footer-info h3, .footer-info p {
        margin-bottom: 5px;
    }
    .footer-info p:nth-child(3) {
        margin-bottom: 0;
    }
    .footer-menu ul li {
        margin-bottom: 5px;
    }
    .footer-menu ul li:nth-child(5) {
        margin-bottom: 0;
    }
    .credit {
        font-size: 0.8em;
    }
}
@media screen and (max-width: 500px) {
    .banner-text {
        top: 18%;
    }
    .btn {
        padding: 8px 20px;
    }
    .body-container {
        padding: 50px 30px;
    }
}
@media screen and (max-width: 490px) {
    .event {
        font-size: 0.7em;
        margin-bottom: 5px;
        justify-content: flex-end;
    }
}
@media screen and (max-width: 460px) {
    .sect-h2 {
        font-size: 1.5em;
        margin-bottom: 30px;
    }
    .evt-location, .evt-szn {
        font-size: 0.8em;
    }
}
@media screen and (max-width: 410px) {
    .banner-text {
        top: 20%;
    }
    .banner-text h1 {
        font-size: 1.3em;
    }
    .banner-text h2 {
        font-size: 1em;
    }
    .about h2 {
        font-size: 1em;
    }
    .about p {
        font-size: 0.5em;
    }
    .evt-location, .evt-szn {
        font-size: 0.6em;
    }
}
@media screen and (max-width: 380px) {
    .footer-grid {
        display: inline;
    }
    .footer-info, .footer-menu ul {
        display: flex;
        flex-direction: row;
    }
    .footer-menu ul {
        justify-content: space-around;
    }
    .poster-description {
        padding: 10px;
    }
    .sect-h2 {
        font-size: 1.3em;
        text-underline-offset: 10px;
        margin-bottom: 20px;
    }
}