@charset "UTF-8";
/* CSS Document */

.container {
	display: grid;
}

/****** For mobile: ******/
@media only screen and (max-width: 600px) {

    .container {
        grid-template-columns: 1fr;
        /* grid-template-rows: 3fr 450px auto 66px; */
        grid-template-rows: 310px 1fr 4fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 80px 50px;
        grid-template-areas:
                "logo"
                "nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .featured {
        margin-top: -60px;
        grid-area: featured;
    }

    main {
        margin-top: -247px;
        display: grid;
        grid-area: main;
        grid-template-columns: 1fr;
        grid-template-rows: 550px 430px 800px;
        grid-template-areas: 
                "welcome"
                "gallery"
                "module";
        grid-gap: 25px;
    }

    .welcome {
        grid-area: welcome;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr;
        grid-template-areas: 
                "intro"
                "video";
    }

    .intro {
        margin-top: -50px;
        grid-area: intro;
    }

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

    .video {
        grid-area: video;
    }

    .gallery {
        grid-area: gallery;
    }

    aside {
        grid-area: aside;
    }

    .modules {
        grid-area: module;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: 
                "module1" "module2" "module3";
        grid-gap: 20px;

    }

    .module1 {
        grid-area: module1;
    }

    .module2 {
        grid-area: module2;
    }

    .module3 {
        grid-area: module3;
    }

    footer {
        grid-area: footer;
    }

    /* ABOUT PAGE MOBILE */

    .about-container {
        display: grid;
        grid-template-columns: 1fr;
        /* grid-template-rows: 3fr 450px auto 66px; */
        grid-template-rows: 130px 390px 4fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    .about-container header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 80px 50px;
        grid-template-areas:
                "logo"
                "nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .about-featured {
        margin-top: 120px;
        grid-area: featured;
    }

    .about-main {
        margin-top: -5px;
        display: grid;
        grid-area: main;
        grid-template-columns: 1fr;
        grid-template-rows: 370px 530px 500px 1fr;
        grid-template-areas: 
                "history"
                "about-btmimg"
                "about-table"
                "about-topimg";
        grid-gap: 25px;
    }


    .about-history {
        grid-area: history;
    }

    .about-topimg {
        grid-area: about-topimg;
    }

    .about-btmimg {
        grid-area: about-btmimg;
    }

    .about-table {
        grid-area: about-table;
    }

    /* EVENT PAGE MOBILE */
    .event-container {
        display: grid;
        grid-template-columns: 1fr;
        /* grid-template-rows: 3fr 450px auto 66px; */
        grid-template-rows: 130px 390px 4fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    .event-container header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 80px 50px;
        grid-template-areas:
                "logo"
                "nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .event-featured {
        margin-top: 120px;
        grid-area: featured;
    }

    .event-main {
        margin-top: -5px;
        display: grid;
        grid-area: main;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 80px 150px 150px 220px;
        grid-template-areas: 
                "event-intro event-intro"
                "event-friday event-friday"
                "event-saturday event-sunday"
                "event-admission event-admission";
        grid-gap: 25px;
    }

    .event-intro {
        grid-area: event-intro;
    }

    .event-friday {
        grid-area: event-friday;
    }

    .event-saturday {
        grid-area: event-saturday;
    }

    .event-sunday {
        grid-area: event-sunday;
    }

    .event-admission {
        grid-area: event-admission;
    }

    .event-ad {
        grid-area: event-ad;
    }


    /* GALLERY PAGE MOBILE */

    .gallery-container {
        display: grid;
        grid-template-columns: 1fr;
        /* grid-template-rows: 3fr 450px auto 66px; */
        grid-template-rows: 130px 390px 4fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    .gallery-container header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 80px 50px;
        grid-template-areas:
                "logo"
                "nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .gallery-featured {
        margin-top: 120px;
        grid-area: featured;
    }

    .gallery-main {
        margin-top: -5px;
        display: grid;
        grid-area: main;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
                "gallery-pastfair gallery-pastfair"
                "gallery-volunteer gallery-volunteer"
                "gallery-topimg gallery-btmimg";
        grid-gap: 25px;
    }

    .gallery-pastfair {
        grid-area: gallery-pastfair;
    }

    .gallery-volunteer {
        grid-area: gallery-volunteer;
    }

    .gallery-topimg {
        grid-area: gallery-topimg;
    }

    .gallery-btmimg {
        grid-area: gallery-btmimg;
    }



    /* CONTACT PAGE MOBILE */

    .contact-container {
        display: grid;
        grid-template-columns: 1fr;
        /* grid-template-rows: 3fr 450px auto 66px; */
        grid-template-rows: 130px 390px 4fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    .contact-container header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 80px 50px;
        grid-template-areas:
                "logo"
                "nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .contact-featured {
        margin-top: 120px;
        grid-area: featured;
    }

    .contact-main {
        margin-top: -5px;
        display: grid;
        grid-area: main;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 
                "contact-info"
                "contact-map";
        grid-gap: 25px;
    }

}/* Closing mobile: */


/****** For tablet: ******/
@media only screen and (min-width: 601px) {

    .container {
        grid-template-columns: 1fr;
        /* grid-template-rows: 3fr 450px auto 66px; */
        grid-template-rows: 0.5fr 1fr 4fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr 481px;
        grid-template-rows: 1fr;
        grid-template-areas: "logo nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .featured {
        margin-top: -60px;
        grid-area: featured;
    }

    main {
        margin-top: 0px;
        display: grid;
        grid-area: main;
        grid-template-columns: 1fr;
        grid-template-rows: 2fr 0.6fr 0.25fr 0.5fr;
        grid-template-areas: 
                "welcome"
                "gallery"
                "aside"
                "module";
        grid-gap: 25px;
    }

    .welcome {
        grid-area: welcome;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr;
        grid-template-areas: 
                "intro"
                "video";
    }

    .intro {
        margin-top: -50px;
        grid-area: intro;
    }

    iframe {
        margin-top: 10px;
        width: 100%;
        height: 100%;
    }

    .video {
        grid-area: video;
    }

    .gallery {
        grid-area: gallery;
    }

    aside {
        grid-area: aside;
    }

    .modules {
        grid-area: module;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: 
                "module1 module2 module3";
        grid-gap: 10px;

    }

    .module1 {
        grid-area: module1;
    }

    .module2 {
        grid-area: module2;
    }

    .module3 {
        grid-area: module3;
    }

    footer {
        grid-area: footer;
    }

    /* ABOUT PAGE TABLET */

    .about-container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 1fr 2.6fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    .about-container header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr 481px;
        grid-template-rows: 1fr;
        grid-template-areas: "logo nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .about-featured {
        margin-top: -60px;
        grid-area: featured;
    }

    .about-main {
        margin-top: -5px;
        display: grid;
        grid-area: main;
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: 400px auto;
        grid-template-areas: 
                "history about-topimg"
                "about-table about-btmimg";
        grid-gap: 25px;
    }


    .about-history {
        grid-area: history;
    }

    .about-topimg {
        grid-area: about-topimg;
    }

    .about-btmimg {
        grid-area: about-btmimg;
    }

    .about-table {
        grid-area: about-table;
    }

    /* EVENT PAGE TABLET */
    .event-container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 1fr 2.6fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    .event-container header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr 481px;
        grid-template-rows: 1fr;
        grid-template-areas: "logo nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .event-featured {
        margin-top: -60px;
        grid-area: featured;
    }

    .event-main {
        margin-top: -5px;
        display: grid;
        grid-area: main;
        grid-template-columns: 1fr 1fr 0.3fr;
        grid-template-rows: 80px 150px 150px 220px;
        grid-template-areas: 
                "event-intro event-intro event-ad"
                "event-friday event-friday event-ad"
                "event-saturday event-sunday event-ad"
                "event-admission event-admission event-ad";
        grid-gap: 25px;
    }

    .event-intro {
        grid-area: event-intro;
    }

    .event-friday {
        grid-area: event-friday;
    }

    .event-saturday {
        grid-area: event-saturday;
    }

    .event-sunday {
        grid-area: event-sunday;
    }

    .event-admission {
        grid-area: event-admission;
    }

    .event-ad {
        grid-area: event-ad;
    }


    /* GALLERY PAGE TABLET */

    .gallery-container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 1fr 2.6fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    .gallery-container header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr 481px;
        grid-template-rows: 1fr;
        grid-template-areas: "logo nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .gallery-featured {
        margin-top: -60px;
        grid-area: featured;
    }

    .gallery-main {
        margin-top: -5px;
        display: grid;
        grid-area: main;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
                "gallery-pastfair gallery-pastfair"
                "gallery-volunteer gallery-topimg"
                "gallery-volunteer gallery-btmimg";
        grid-gap: 25px;
    }

    .gallery-pastfair {
        grid-area: gallery-pastfair;
    }

    .gallery-volunteer {
        grid-area: gallery-volunteer;
    }

    .gallery-topimg {
        grid-area: gallery-topimg;
    }

    .gallery-btmimg {
        grid-area: gallery-btmimg;
    }


    /* CONTACT PAGE TABLET */

    .contact-container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 1fr 2.6fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    .contact-container header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr 481px;
        grid-template-rows: 1fr;
        grid-template-areas: "logo nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .contact-featured {
        margin-top: -60px;
        grid-area: featured;
    }

    .contact-main {
        margin-top: -5px;
        display: grid;
        grid-area: main;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 
                "contact-info"
                "contact-map";
        grid-gap: 25px;
    }

}/* Closing tablet **/


/****** For desktop: ******/
@media only screen and (min-width: 980px) {

    .container {
        grid-template-columns: 1fr;
        /* grid-template-rows: 3fr 450px auto 66px; */
        grid-template-rows: 0.5fr 1fr 2.6fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr 481px;
        grid-template-rows: 1fr;
        grid-template-areas: "logo nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .featured {
        margin-top: -60px;
        grid-area: featured;
    }

    main {
        display: grid;
        grid-area: main;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0.75fr 0.25fr 0.75fr;
        grid-template-areas: 
                "welcome"
                "gallery"
                "aside"
                "module";
        grid-gap: 25px;
    }

    .welcome {
        grid-area: welcome;
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: 
                "intro video";
    }

    .intro {
        margin-top: -50px;
        margin-right: 50px;
        grid-area: intro;
    }

    iframe {
        margin-top: 50px;
        width: 100%;
        height: 70%;
    }

    .video {
        grid-area: video;
    }

    .gallery {
        grid-area: gallery;
    }

    aside {
        grid-area: aside;
    }

    .modules {
        grid-area: module;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: 
                "module1 module2 module3";
        grid-gap: 10px;

    }

    .module1 {
        grid-area: module1;
    }

    .module2 {
        grid-area: module2;
    }

    .module3 {
        grid-area: module3;
    }

    footer {
        grid-area: footer;
    }

    /* ABOUT PAGE DESKTOP */

    .about-container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 1fr 2.6fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    .about-container header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr 481px;
        grid-template-rows: 1fr;
        grid-template-areas: "logo nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .about-featured {
        margin-top: -60px;
        grid-area: featured;
    }

    .about-main {
        margin-top: -5px;
        display: grid;
        grid-area: main;
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: 400px auto;
        grid-template-areas: 
                "history about-topimg"
                "about-table about-btmimg";
        grid-gap: 25px;
    }


    .about-history {
        grid-area: history;
    }

    .about-topimg {
        grid-area: about-topimg;
    }

    .about-btmimg {
        grid-area: about-btmimg;
    }

    .about-table {
        grid-area: about-table;
    }


    /* EVENT PAGE DESKTOP */
    .event-container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 1fr 2.6fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    .event-container header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr 481px;
        grid-template-rows: 1fr;
        grid-template-areas: "logo nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .event-featured {
        margin-top: -60px;
        grid-area: featured;
    }

    .event-main {
        margin-top: -5px;
        display: grid;
        grid-area: main;
        grid-template-columns: 1fr 1fr 0.3fr;
        grid-template-rows: 80px 150px 150px 220px;
        grid-template-areas: 
                "event-intro event-intro event-ad"
                "event-friday event-friday event-ad"
                "event-saturday event-sunday event-ad"
                "event-admission event-admission event-ad";
        grid-gap: 25px;
    }

    .event-intro {
        grid-area: event-intro;
    }

    .event-friday {
        grid-area: event-friday;
    }

    .event-saturday {
        grid-area: event-saturday;
    }

    .event-sunday {
        grid-area: event-sunday;
    }

    .event-admission {
        grid-area: event-admission;
    }

    .event-ad {
        grid-area: event-ad;
    }


    /* GALLERY PAGE DESKTOP */

    .gallery-container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 1fr 2.6fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    .gallery-container header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr 481px;
        grid-template-rows: 1fr;
        grid-template-areas: "logo nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .gallery-featured {
        margin-top: -60px;
        grid-area: featured;
    }

    .gallery-main {
        margin-top: -5px;
        display: grid;
        grid-area: main;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
                "gallery-pastfair gallery-pastfair"
                "gallery-volunteer gallery-topimg"
                "gallery-volunteer gallery-btmimg";
        grid-gap: 25px;
    }

    .gallery-pastfair {
        grid-area: gallery-pastfair;
    }

    .gallery-volunteer {
        grid-area: gallery-volunteer;
    }

    .gallery-topimg {
        grid-area: gallery-topimg;
    }

    .gallery-btmimg {
        grid-area: gallery-btmimg;
    }


    /* CONTACT PAGE DESKTOP */

    .contact-container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 1fr 2.6fr 66px;
        grid-template-areas:
                "header"
                "featured"
                "main"
                "footer";
    }

    .contact-container header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr 481px;
        grid-template-rows: 1fr;
        grid-template-areas: "logo nav";
    }

    .logobox {
        grid-area: logo;
    }

    nav {
        grid-area: nav;
    }

    .contact-featured {
        margin-top: -60px;
        grid-area: featured;
    }

    .contact-main {
        margin-top: -5px;
        display: grid;
        grid-area: main;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 
                "contact-info"
                "contact-map";
        grid-gap: 25px;
    }


}/* Closing desktop: */