@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;400&family=Roboto+Condensed:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


#container {
    display: flex;
    flex-direction: column;
    max-width: 1300px;
    margin: auto;
}

.main-image {
    position: relative;
    background: url(images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 620px;
    overflow: hidden;
}

.logo {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

.logo h1 {
    margin: 0;
    color: white;
    text-transform: uppercase;
    font-family: barlow, sans-serif;
    font-weight: 300;
    font-size: 4em;
    padding-top: 1em;
    letter-spacing: 0.1em;
}

.logo h2 {
    color: white;
    text-transform: uppercase;
    font-family: barlow, sans-serif;
    font-weight: 300;
    letter-spacing: 0.1em;
    font-size: 2.8em;
}


.logo h1 span {
    display: inline-block;
    padding: 6px 14px;
}

.cen {
    margin: 20px;
    display: block;

}

header {
    padding: 10px 5px;
}

nav {
    text-transform: uppercase;
    color: #d4b666;
    font-family: barlow, sans-serif;
}

.box {
    background-color: #f0eff0;
    display: flex;
    flex-direction: column;
}

.box h2 {
    color: #d4b666;
    text-transform: uppercase;
    font-family: barlow, sans-serif;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding-top: 70px;
    font-weight: 300;
    font-size: 2.4em;
}

.box p {
    color: #d4b666;
    text-transform: uppercase;
    font-family: barlow, sans-serif;
    align-items: center;
    justify-content: center;
    display: flex;
    font-weight: 300;
    font-size: 1.2em;
    padding-bottom: 45px;
}


.leftside,
.rightside {
    height: 100%;
    width: 100%;
}

.leftside {
    padding-top: 18%;
    padding-left: 15%;
    padding-right: 5%;
}

.rightside {
    padding-left: 5%;
    padding-right: 15%;
    padding-top: 18%;
}


main h2 {
    color: #d4b666;
    text-transform: uppercase;
    font-family: barlow, sans-serif;
    font-weight: 300;
    font-size: 3em;
}

main p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
    padding-top: 0.5em;
}

main a {
    text-decoration: underline;
    color: #d4b666;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.2em;
}

main a:hover {
    color: rgb(13, 54, 13);
}


.leftside img {
    padding-top: 50%;
    padding-bottom: 20%;
}

.special img {
    padding-bottom: 20%;
}

.right img {
    padding-top: 45%;
    padding-bottom: 20%;
}

.links {
    padding-top: 5%;
}

.ethical a {
    color: #70816f;
    text-decoration: none;
}

.ethical a:hover {
    color: #31462d;
    text-decoration: none;
}

.custom {
    padding-top: 15%;
}

hr {
    background-color: #d4b666;
}

.end {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 3%;
    padding-bottom: 5%;
}

.end h3 {
    color: #d4b666;
    font-size: 1.2em;
    font-weight: 400;
    text-transform: uppercase;
}

.end a:hover {
    color: rgb(13, 54, 13);
}


.end a {
    text-decoration: underline;
    color: #d4b666;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-top: 2%;
}

.bottom img {
    width: 100%;
    padding-bottom: 20px;
}

.top-b img {
    width: 100%;
}

.lower-content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 1%;
}

.lower-content h2 {
    font-size: 50px;
    color: #d4b666;
    text-transform: uppercase;
    font-family: barlow, sans-serif;
}

.lower-content h5 {
    font-size: 15px;
    color: #d4b666;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.socials {
    display: inline-block;
    justify-content: space-between;
}

.heading {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 7%;
}

.heading h2 {
    color: #d4b666;
    text-transform: uppercase;
    font-family: barlow, sans-serif;
    font-size: 3em;
    font-weight: 300;
}

.heading p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.1em;
}

.on-left,
.on-right {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.on-left {
    padding-left: 30%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 10%;
}

.on-right {
    padding-right: 30%;
    padding-left: 5%;
    padding-top: 5%;
    padding-bottom: 10%;
}

.content1 {
    padding-left: 18.5%;
    padding-right: 18.5%;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.about-pic {
    display: flex;
    justify-content: space-evenly;
    padding-top: 3%;
    padding-bottom: 3%;
    margin-left: 15%;
    margin-right: 15%;
}


.section1 {
    padding-top: 5%;
    padding-left: 10%;
    padding-bottom: 5%;
    order: 1;
    flex: 3;
    display: flex;
    flex-direction: column;
}

.section1 h2 {
    color: #d4b666;
    font-family: barlow, sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 3em;
    padding-bottom: 7%;
}

.section p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#sidebar {
    padding-bottom: 30%;
    order: 2;
    flex: 2;
    display: flex;
    flex-direction: column;
    padding-top: 14%;
    padding-left: 10%;
}

#sidebar ul {
    list-style-type: none;
}

.functionline {
    color: #d4b666;
    font-weight: 400;
    font-size: 1.1em;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 5%;
}

.cards {
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    width: 100%;
    margin-bottom: 5%;
    margin-top: 10%;
}

.cards > figure {
    width: 280px;
    text-align: center;
    justify-content: center;
}

input[type=text],
input[type=email],
textarea,
select {
    min-width: 500px;
    margin: 5px 0;
    align-items: center;
    display: flex;
}

input[type=submit],
input[type=reset] {
    padding: 7px 30px;
    border: 1px solid #d4b666;
    border-radius: 5%;
    background-color: white;
    color: #d4b666;
}

.contact_us p {
    padding-top: 15px;
    padding-bottom: 0;
    margin-bottom: 0;
}

.eventlink a {
    color: #d4b666;
    text-transform: none;
    text-decoration: none;
    letter-spacing: 0;
    font-size: 1.1em;
    font-weight: 400;
}

.eventlink a:hover {
    text-decoration: none;
}


figure {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 17%;
    background-color: white;
    border: 1px solid rgb(0, 0, 0);
    padding: 10px;
    box-shadow: 0 3px 8px black;
    transition: all 300ms ease-in-out;
}

figure:hover {
    box-shadow: 0 8px 30px;
}

figcaption {
    padding-top: 10px;
    font-family: barlow, sans-serif;
    font-weight: 300;
    color: #d4b666;
    width: 100%;
}

.page {
    width: 700px;
    box-shadow: 5px 2px 200px #b3b3b3a4 ;
    margin: 40px auto;
    text-align: center;
    padding: 20px 40px;
}

.food-1 h2{
    color: #d4b666;
    text-transform: uppercase;
    font-family: barlow, sans-serif;
    font-size: 4em;
    font-weight: 300;
}

.food-1 p {
    color: #000000;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.food-1 h5 {
    text-transform: uppercase;
    font-family: barlow, sans-serif;
    font-weight: 600;
}

.food-2 h2 {
    color: #d4b666;
    text-transform: uppercase;
    font-family: barlow, sans-serif;
    font-size: 4em;
    font-weight: 300;
}

.food-2 h5 {
    text-transform: uppercase;
    font-family: barlow, sans-serif;
    font-weight: 600;
}

.food-2 h6 {
    text-transform: uppercase;
    color: #d4b666;
    font-family: barlow, sans-serif;
    font-weight: 600;
}

.food-3 h2 {
    color: #d4b666;
    text-transform: uppercase;
    font-family: barlow, sans-serif;
    font-size: 4em;
    font-weight: 300;
}

.food-3 h5 {
    text-transform: uppercase;
    font-family: barlow, sans-serif;
    font-weight: 600;
}

.food-3 p {
    color: #000000;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.fl::first-letter {
    color: #d4b666;
    font-size: xx-large;
}

.fl {
    color: #d4b666;
}

.sideleft, .sideright {
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 5%;
}


footer {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    background-color: rgb(65, 131, 111);
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    margin-top: 5%;
}

/*medium devices (tablets) */
@media only screen and (max-width:768px) {

    .leftside,
    .rightside {
        height: 100%;
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 10%;
        padding-bottom: 5%;
    }

    .leftside img {
        padding-top: 3%;
        padding-bottom: 5%;
    }

    .rightside img {
        padding-top: 3%;
        padding-bottom: 5%;
    }

    .row {
        justify-content: center;
        flex-direction: row;
    }

    .row img {
        width: 350px;
    }

    .bottom img {
        display: block;
        height: 170px;
    }

    .top-b img {
        display: block;
        height: 150px;
    }

    .heading {
        width: 100%;
    }

    main {
        display: flex;
        justify-content: center;
    }

    .on-left {
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 0;
        padding-bottom: 0;
        text-align: center;
    }

    .on-right {
        padding-bottom: 10%;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 0;
        text-align: center;
    }
    

    .content1 {
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .about-pic img {
        height: 200px;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
    }

    .end {
        width: 100%;
    }

    .lower-content {
        width: 100%;
    }

    .tabs {
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
    }

    .page {
        width: 80%;
    }

    .event-info {
        padding: 10% 10%;
    }

    .cards {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .cards > figure {
        width: 400px;
    }

    .cards > figure > img {
        width: 350px;
        height: 350px;
    }

    .section1 {
       display: flex;
       flex-direction: column;
       justify-content: center;
       padding-left: 10%;
       padding-right: 15%;
    }

    #sidebar {
        display: flex;
        padding-left: 10%;
        padding-top: 5%;
    }

    

    footer {
        width: 100%;
    }


}

/*small devices (phones, 600px and down) */
@media only screen and (max-width: 500px) {
    .box h2 {
       font-size: 2em;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       text-align: center;
    }

    .end {
        width: 100%;
        text-align: center;
    }

    .lower-content {
        width: 100%;
    }

    .bottom img {
        width: 100%;
        height: 130px;
    }

    .top-b img {
        width: 100%;
        height: 120px;
    }

    .about-pic img {
        display: block;
        flex-direction: column;
        height: 150px;
        justify-content: space-around;
    }

    .content1 p{
        padding-left: 5%;
        padding-right: 5%;
    }

    .sideright p, .sideleft p {
        text-align: center;
    }


    input[type=text],
    input[type=email],
    textarea,
    select {
        min-width: 400px;
    }

    #sidebar {
        padding: 20px;
    }


}