#memory-game,
#flag-memory-game {
    padding: 0;
}

.tile_img {
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: 1;
}

#flag-memory-game .tile_img {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.tile_overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
}

#flag-memory-game .tile_overlay {
    background: none;
}

#flag-memory-game .mg__tile--inner .mg__tile--inside {
    background-color: #0c2a4b;
}


/*
#memory-game .tile_overlay:before {
    display: block;
    font-family: 'icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 2em;
    position: absolute;
    height: 1.5em;
    width: 1.5em;
    top: 50%;
    left: 50%;
    margin: -0.75em 0 0 -0.75em;
    border-radius: 50%;
    text-align: center;
    line-height: 1.35em;
    z-index: 3;
    opacity: 0;
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    -webkit-transition: all .3s .3s ease;
    transition: all .3s .3s ease;
}

#flag-memory-game .tile_overlay:before {
    display: block;
    font-family: 'icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1em;
    position: absolute;
    height: 1.25em;
    width: 1.25em;
    bottom: 0.25em;
    right: 0.25em;
    margin: 0;
    border-radius: 50%;
    text-align: center;
    line-height: 1em;
    z-index: 3;
    opacity: 0;
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    -webkit-transition: all .3s .3s ease;
    transition: all .3s .3s ease;
}

.incorrect .tile_overlay:before {
    border: 2px solid #ea4335;
    color: #ea4335;
    content: "\e5cd";
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s .3s ease;
    transition: all .3s .3s ease;
}

.correct .tile_overlay:before {
    border: 2px solid #72BB00;
    color: #72BB00;
    content: "\e116";
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s .3s ease;
    transition: all .3s .3s ease;
}

#flag-memory-game .incorrect .tile_overlay:before,
#flag-memory-game .correct .tile_overlay:before {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s .3s ease;
    transition: all .3s .3s ease;
    border: none;
}

.tile_overlay:after {
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-weight: bold;
    font-size: 1.5em;
}

#flag-memory-game .tile_overlay:after {
    color: #fff;
    font-size: 0.875em;
    line-height: 1em;
    width: 100%;
    background: #00335f;
    padding: 0.5em;
    left: 0;
    bottom: 0;
}

@media screen and (max-width: 1024px) {
    .tile_overlay:after {
        font-size: 2em;
    }
    #flag-memory-game .tile_overlay:after {
        font-size: 0.875em;
    }
}

@media screen and (max-width: 767px) {
    .tile_overlay:after {
        font-size: 1.5em;
    }
    #flag-memory-game .tile_overlay:after {
        font-size: 0.875em;
    }
}

#memory-game .mg__tile--inner[data-id="1"] .tile_overlay:after {
    content: '2016';
    color: #fff;
}

#memory-game .mg__tile--inner[data-id="2"] .tile_overlay:after {
    content: '1974';
    color: #fff;
}

#memory-game .mg__tile--inner[data-id="3"] .tile_overlay:after {
    content: '1998';
    color: #fff;
}

#memory-game .mg__tile--inner[data-id="4"] .tile_overlay:after {
    content: '2012';
    color: #fff;
}

*/

#memory-game .mg__tile--inner[data-id="1"] .tile_img {
    background-image: url(../content/5/img/matching/Dutchmen-Day.jpg);
}
#memory-game .mg__tile--inner[data-id="2"] .tile_img {
    background-image: url(../content/5/img/matching/Christmas.jpg);
}
#memory-game .mg__tile--inner[data-id="3"] .tile_img {
    background-image: url(../content/5/img//matching/Thanksgiving.jpg);
}
#memory-game .mg__tile--inner[data-id="4"] .tile_img {
    background-image: url(../content/5/img/matching/KreiderheimMarch2023.jpg);
}
#memory-game .mg__tile--inner[data-id="5"] .tile_img {
    background-image: url(../content/5/img/matching/ValleyFest.jpg);
}
#memory-game .mg__tile--inner[data-id="6"] .tile_img {
    background-image: url(../content/5/img/matching/WaterCeremony.jpg);
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}


/* =============================================================================
  MEMORY GAME (mg)
============================================================================= */


/**
 * Game container
 *
 * This is the overall container for the game. Different things get addead and
 * removed from this container depending on the game state.
 */

.mg {
    position: relative;
    padding: 1rem 0 3rem 0;
    /* blank */
}
.mg__meta {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/**
 * Game meta
 *
 * The game meta is the section that displays the level and moves. It's appended
 * to the game container at the start, and shows the level the user selected
 * and the number of moves the user has played.
 */

.mg__meta {
    margin-bottom: 10px;
    color: #003058;
}

.mg__meta--item {
    display: inline-block;
}

.mg__meta--left {
    float: left;
}

.mg__meta--right {
    float: right;
}

.mg__meta--level {
    margin-right: 20px;
}


/**
 * Game start screen
 *
 * The game start screen shows the "welcome" message and also a list for the
 * user to choose a level. It's appended to the game container at the start,
 * and once the user selects a level, it is removed from the container
 */

.mg__start-screen {
    text-align: center;
    padding: 80px 20px;
}

.mg__start-screen--heading {
    margin-bottom: 10px;
    color: #282a2f;
    font-size: 30px;
}

.mg__start-screen--sub-heading {
    font-size: 24px;
    margin-bottom: 10px;
    color: #8BD3E6;
}

.mg__start-screen--sub-heading::before,
.mg__start-screen--sub-heading::after {
    margin: 0 5px;
    content: "-";
}

.mg__start-screen--text {
    margin-bottom: 20px;
}

.mg__start-screen--level-select {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mg__start-screen--level-select span {
    color: #ff3c50;
    font-size: 18px;
    cursor: pointer;
}

.mg__start-screen--level-select span:hover {
    color: #d50016;
}


/**
 * Game wrapper
 *
 * The game wrapper is where the actual game resides. Inside here, all the
 * memory tiles get arranged and ready for game play.
 */

.mg__wrapper {
    margin: 0 auto;
    width: 100%;
}

.mg__contents {
    position: relative;
    margin-left: -5px;
    margin-right: -5px;
}

.mg__contents:after {
    content: "";
    display: table;
    clear: both;
}


/**
 * Game tiles
 *
 * The game tiles are the tiles that are laid down on the memory game board.
 * These tiles are the ones that the user clicks on to flip and reveal some
 * images. The level the user selects determines the position and size of
 * the tiles.
 */

.mg__tile {
    width: 50%;
    height: 100%;
    position: relative;
    float: left;
    padding: 5px;
}

.mg__tile--inner {
    position: relative;
    width: 100%;
    height: 0;
    cursor: pointer;
    overflow: hidden;
    padding-bottom: 75%;
}

#flag-memory-game .mg__tile--inner {
    padding-top: 66.667%;
    padding-bottom: 1.625em;
}


/* game__level-1 styles */

.mg__level-1 .mg__tile {
    width: 25%;
}


/*
.mg__level-1 .mg__tile-1 {
  top: 0%;
  left: 0%;
}
.mg__level-1 .mg__tile-2 {
  top: 0%;
  left: 25%;
}
.mg__level-1 .mg__tile-3 {
  top: 0%;
  left: 50%;
}
.mg__level-1 .mg__tile-4 {
  top: 0%;
  left: 75%;
}
.mg__level-1 .mg__tile-5 {
  top: 50%;
  left: 0%;
}
.mg__level-1 .mg__tile-6 {
  top: 50%;
  left: 25%;
}
.mg__level-1 .mg__tile-7 {
  top: 50%;
  left: 50%;
}
.mg__level-1 .mg__tile-8 {
  top: 50%;
  left: 75%;
}
*/

@media screen and (max-width: 480px) {
    .mg__level-1 .mg__tile {
        width: 50%;
    }
    .mg__tile--inner {
        padding-bottom: 62.5%;
    }
    #flag-memory-game .mg__tile--inner {
        padding-top: 66.667%;
        padding-bottom: 1.625em;
    }
}


/**
 * The tile inside
 *
 * The "tile inner" is the part of the tile that serves as the card. Inside
 * this part, there's an outside and inside part. The outside of the card
 * is the part that has the logo or the pattern or whatever...basically the
 * part that doesn't show the content to be matched. The inside part has the
 * actual images / info to be matched.
 */

.mg__tile--outside,
.mg__tile--inside {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s, background 0.3s;
    -webkit-transition: background 0.3s, -webkit-transform 0.3s;
    transition: background 0.3s, -webkit-transform 0.3s;
    -o-transition: transform 0.3s, background 0.3s;
    transition: transform 0.3s, background 0.3s;
    transition: transform 0.3s, background 0.3s, -webkit-transform 0.3s;
}

.mg__tile--outside {
    background: #0c2a4b url("../content/5/img/matching/lvc-mark.svg") 50% 50% no-repeat;
    background-size: 35%;
    -webkit-box-shadow: 0 0 0 1px #787a80;
    box-shadow: 0 0 0 1px #787a80;
    z-index: 2;
}

.mg__tile--inside {
    background-color: #fff;
    -webkit-box-shadow: 0 0 0 1px #787a80;
    box-shadow: 0 0 0 1px #787a80;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}


/* some transforms for flipped cards */

.mg__tile--inner.flipped .mg__tile--outside {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.mg__tile--inner.flipped .mg__tile--inside {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}


/* some transitions for correct guesses - only needs to happen on card inside */

.mg__tile--inner.flipped.correct .mg__tile--inside {
    background-color: #ffffdc;
}


/**
 * Game message
 *
 * The game message area is an area to display game messages. It's used in the
 * default set up where no callback is set in the JS. If a callback is set up,
 * then this message area likely won't display. Unless you decide to display it
 * in your own custom callback though!
 */

.mg__onend {
    padding: 80px 20px;
    text-align: center;
}

.mg__onend--heading {
    margin-bottom: 10px;
    margin-top: 0;
}

.mg__onend--message {
    margin-bottom: 10px;
}

.mg__meta--moves {
    font-family: mongoose, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.125rem;
    line-height: 1rem;
    letter-spacing: 0.05rem;
}
/**
 * Game buttons
 *
 * A simple helper class for game buttons. Edit at your will.
 */

.mg__button {
    margin: 0;
    display: inline-block;
    padding: 10px 20px 9px 20px;
    font-family: mongoose, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.125rem;
    line-height: 1rem;
    letter-spacing: 0.05rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--lvc-yellow);
    border: 1px solid var(--lvc-yellow);
    color: var(--lvc-dark-blue);
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.mg__button:hover {
    background-color: var(--lvc-extra-light-blue);
    border: 1px solid var(--lvc-extra-light-blue);
}

#mg__meta--level {
    display: none;
}

.mg__meta {
    opacity: 0;
}

.mg__meta.show {
    opacity: 1;
}

.memory_modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    background: rgba(255, 255, 255, 0.5);
    -webkit-transition: all .35s cubic-bezier(0.4, 0.0, 0.6, 1);
    -o-transition: all .35s cubic-bezier(0.4, 0.0, 0.6, 1);
    transition: all .35s cubic-bezier(0.4, 0.0, 0.6, 1);
    z-index: 999;
}

@media screen and (max-width: 480px) {
    .memory_modal {
        font-size: 0.825em;
    }
}

.memory_modal_wrapper {
    display: table;
    height: 100%;
    width: 100%;
}

.memory_modal_container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.memory_modal_content {
    text-align: left;
    padding: 1rem 0;
    background: #fff;
    width: 96%;
    max-width: 640px;
    margin: 0 auto;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    overflow: hidden;
    -webkit-transition: all .35s cubic-bezier(0.4, 0.0, 0.6, 1);
    -o-transition: all .35s cubic-bezier(0.4, 0.0, 0.6, 1);
    transition: all .35s cubic-bezier(0.4, 0.0, 0.6, 1);
}

.memory_modal_open .memory_modal {
    visibility: visible;
    opacity: 1;
}

.memory_modal_open .memory_modal_content {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}


.memory_modal_content h3 {
    margin: 0 0 1rem 0;
    text-align: center;
}

.fact_text_wrapper {
    padding: 0;
}

.fact_text_wrapper p {
    margin: 0;
}

.fact_text_wrapper img {
    max-width: 50%;
    float: left;
    margin: 0 2rem 0 0;
    border: 10px solid #e1f4fe;
}

@media screen and (max-width:480px) {
    .fact_text_wrapper img {
        max-width: 100%;
        float: none;
        margin: 0 0 1rem 0;
    }
}

.memory_continue {
    margin: 1rem auto 0!important;
    display: table !important;
}
.memory_modal_content .column_group {
    padding: 0 1rem 0 0;
}
.memory_modal_content .column {
    padding: 0 0 0 1rem;
}