/*  main */
    #main {
        background-color: transparent;
    }

    #main .current-location {
        text-align: center;
    }

    #current-location-msg {
        margin-bottom: 1rem;
        font-weight: 500;
        position: relative;
    }

    #current-location-msg a {
        color: var(--red-dark);
        font-weight: 400;
        margin-left: .5rem;
    }

    section.hero {
        background-color: #000;
    }

    section.hero > .cont-container {
        position: relative;
        overflow: hidden;
        padding: 5rem 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    section.hero h1 {
        font-size: 2.5rem;
        font-weight: 900;
        color: #fff;
        z-index: 1;
    }

    section.hero form {
        padding: 1.5rem;
        z-index: 1;
    }

    section.hero form input[type=text] {
        background-color: rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    section.hero img {
        width: 100%;
    }

    section.tags {
        text-align: center;
        padding: 3rem 1.5rem;
        background-color: var(--gray-100);
    }

    .slideshow {
        list-style: none;
        padding: 0;
        margin: 0;
        z-index: 0;
    }

    .slideshow li {
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: none;

        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0;
        animation-name: imageAnimation;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-direction: normal;
    }

    @media (min-width: 768px) {
        section.hero > .cont-container {
            padding: 8rem 0;
        }

        section.hero h1 {
            font-size: 3.5rem;
        }

        section.choice h1 {
            padding-left: 3rem;
            padding-right: 3rem;
        }

        section.tags {
            font-size: 1.5rem;
            font-weight: 300;
        }
    }

    @keyframes imageAnimation { 
        0% {
            opacity: 0;
            transform: scale(1);
            animation-timing-function: ease-in;
        }
        1% {
            opacity: 1;
            animation-timing-function: ease-out;
        }
        19% {
            opacity: 1;
        }
        25% {
            opacity: 0;
            transform: scale(1.2);
        }
        100% { opacity: 0 }
    }


/*  recommend-list */
    .recommend-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .recommend-list li {
        margin: 1rem;
        padding: 0;
        text-align: center;
        background-color: #000;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .recommend-list h1 {
        color: #fff;
        padding-top: 3rem;
        margin: 0;
    }

    .recommend-list h1 a {
        color: #fff;
    }

    .recommend-list h1 .etitle {
        font-weight: 300;
        color: var(--gray-600);
        word-break: keep-all;
    }

    .recommend-list img.pic {
        width: 100%;
        max-height: 400px;
        object-fit: cover;
    }

    .recommend-list .loc-info {
        display: flex;
        justify-content: center;
        font-size: 0.8em;
        color: var(--gray-700);
        padding-bottom: 1rem;
    }

    .recommend-list .loc-info > div:not(:last-child):after {
        content: '|';
        font-size: 0.5em;
        vertical-align: 2px;
        color: var(--gray-500);
        padding: 0 .35rem;
    }

    .recommend-list .avg:before {
        content: '';
    }

    .recommend-list .tags {
        padding-bottom: 1rem;
    }

    .recommend-list .tags a {
        color: #fff;
    }

    .recommend-list .tag {
        margin: 0 .15rem 0 0;
    }

    @media (min-width: 768px) {
        .recommend-list {
            display: grid;
            grid-gap: 1rem;
            grid-template-columns: repeat(2, 1fr);
        }

        .recommend-list li {
            margin: 1rem 0;
        }
    }

/*  community */
    section.community {
        position: relative;
        overflow-x: scroll;
        height: 500px;
        margin: 1rem 0;
    }

    section.community .item {
        position: absolute;
        width: 300px;
        height: 500px;

        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        border: solid 1px var(--gray-200);
    }

    section.community .item-1 {}
    section.community .item-2 {
        transform: translate(320px, 0px);
    }
    section.community .item-3 {
        transform: translate(640px, 0px);
    }

    section.community h6 a {
        background-color: var(--red-dark);
        color: #fff;
        display: inline-block;
        line-height: 1.5;
        padding: 0 1.5rem 2px 1.5rem;
        margin-top: 1.5rem;
    }

    section.community .has-bg h6.tasters_choice a {
        background-color: var(--blue);
    }

    section.community h6.community a {
        background-color: #000;
        color: #fff;
    }

    section.community h1 {
        word-break: keep-all;
        margin: 1.5rem;
    }

    section.community .has-bg h1 a {
        color: #fff;
        font-weight: 700;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 1.0);
    }

    section.community h5 {
        text-align: center;
    }

    section.community h5 a {
        background-color: #000;
        color: #fff;
        border-radius: 1.5rem;
        padding: 0 1rem;
    }

    section.community .has-bg h5 a {
        background-color: #fff;
        color: #000;
    }

    section.community .has-bg {
        color: #fff;
        border: none;
    }

    section.community .bottom {
        padding: 1.5rem;
    }

    section.community .flex-between {
        align-items: center;
    }

    section.community .tags {
        margin: 0;
        padding: 0 1.5rem 0 1.5rem;
        list-style: none;

        display: flex;
        flex-wrap: wrap;
    }

    section.community .tags li:before {
        content: '#';
        color: var(--red-dark);
    }

    section.community .tags li {
        margin: 0 1rem .5rem 0;
    }

    section.community .has-bg .tags a {
        color: #fff;
        /*background-color: #000;*/
    }

    @media (min-width: 768px) {
        section.community .cont-container {
            display: grid;
            grid-gap: 1rem;
            grid-template-columns: repeat(3, 1fr);
        }

        section.community {
            height: 600px;
        }

        section.community .item {
            width: 100%;
            height: 600px;
            position: static;
            transform: translate(0px, 0px);
        }
    }