* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    font-family: "Arial", sans-serif;
    background : #fff;
}

.memory-game-header {
    position  : relative;
    background: #fedb43;
    text-align: center;
    height    : 40px;
    width     : 100%;

}

.mercator-logo {
    display: inline-block;
    margin : 11px 0 0;
}

.mercator-logo a {
    display          : inline-block;
    background-image : url(../images/svg/logo-mercator-white-text.svg);
    background-repeat: no-repeat;
    color            : #fff;
    background-size  : contain;
    text-indent      : -9999px;
    width            : 189px;
    height           : 20px;
}

.memory-main-content {
    position         : relative;
    background-size  : cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom   : 100px;
}


@media only screen and (min-width: 768px) {
    .mercator-logo a {
        width : 189px;
        height: 25px;
    }

    .memory-main-content {
        background-position: top center;
    }
}

@media only screen and (min-width: 1025px) {
    .memory-game-header {
        height: 66px;
    }

    .mercator-logo {
        margin: 17px 0 0;
    }

    .mercator-logo a {
        width : 266px;
        height: 33px;
    }
}

.wrap {
    height       : 100%;
    background   : #fedb43;
    border-radius: 30px;
    padding      : 25px;
    margin       : 40% auto 0;
    /* max-width    : 1000px; */
    max-width: 800px;

    box-shadow   : rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.notice {
    max-width : 1000px;
    margin    : 40px auto;
    color     : #000;
    text-align: center;
    padding   : 0 25px;
    font-size : 13px;
}

.notice a {
    color          : #000;
    text-decoration: underline;
}

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

@media only screen and (min-width: 768px) {
    .wrap {
        padding: 40px;
    }

    .notice {
        font-size: 15px;
    }
}

@media only screen and (min-width: 1025px) {
    .wrap {
        padding   : 70px;
        margin-top: 380px;
    }
}

.game-header {
    text-align: center;
}

.game-header .box {
    padding: 0 20px 5px;
    display: inline-block;
}

.game-header span {
    display: inline-block;
}

.game-header .result {
    display    : inline-block;
    font-weight: bold;
}

.game {
    -webkit-transform-style: preserve-3d;
    transform-style        : preserve-3d;
    -webkit-perspective    : 500px;
    perspective            : 500px;
    min-height             : 100%;
    height                 : 100%;
}

.card {
    position                   : relative;
    cursor                     : pointer;
    display                    : inline-block;
    vertical-align             : top;
    box-sizing                 : border-box;
    width                      : 25%;
    padding                    : 4px;
    z-index                    : 50;
    -webkit-perspective        : 500px;
    perspective                : 500px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.card:after {
    content: '';
    display: block;
    padding: 100% 0 0;
}

@media only screen and (min-width: 768px) {
    /* .card {
        width: 16.6667%;
    } */
}

@media only screen and (min-width: 1025px) {
    .card {
        padding: 10px;
    }
}

.card .inside {
    width                  : 100%;
    height                 : 100%;
    display                : block;
    -webkit-transform-style: preserve-3d;
    transform-style        : preserve-3d;
    transition             : 0.4s ease-in-out;
    background             : white;
}

.card .inside.picked,
.card .inside.matched {
    -webkit-transform: rotateY(180deg);
    transform        : rotateY(180deg);
}

.card .inside.matched {
    -webkit-animation      : 1s matchAnim ease-in-out;
    animation              : 1s matchAnim ease-in-out;
    -webkit-animation-delay: 0.4s;
    animation-delay        : 0.4s;
}

.card .front,
.card .back {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;

    -webkit-backface-visibility: hidden;
    backface-visibility        : hidden;

}

.card .front img,
.card .back img {
    max-width    : 100%;
    display      : block;
    border-radius: 5px;
}

.card .front {
    -webkit-transform: rotateY(-180deg);
    transform        : rotateY(-180deg);
}

.card .back {
    -webkit-transform: rotateX(0);
    transform        : rotateX(0);
}


.modal-overlay {
    display   : none;
    background     : rgba(0, 0, 0, 0.8);
    position       : fixed;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    overflow-y     : auto;
    flex-wrap      : wrap;
    align-items    : center;
    justify-content: center;
}

/* ----------------------------- POPUP ------------------------- */
.modal {
    display      : none;
    position     : relative;
    background   : #fff;
    border-radius: 30px;
    max-width    : 800px;
    margin       : 0 auto;
}

.modal-inner {
    max-width: 590px;
    margin   : 0 auto;
    padding  : 40px;
}

.modal h2 {
    text-align    : center;
    color         : #f2b42d;
    font-size     : 30px;
    line-height   : 1.3;
    text-transform: uppercase;
    margin-bottom : 25px;
}

.modal-content {
    text-align: center;
}

.modal-content p {
    margin-bottom: 15px;
    font-size    : 16px;
    line-height  : 1.2;
}

.modal-content p a {
    text-decoration: underline;
}

.modal-content .notice {
    font-size: 12px;
}

.modal-final-results {
    text-align   : center;
    border       : 1px solid #f2b42d;
    padding      : 25px;
    margin-bottom: 25px;
}

.modal-final-results .box {
    display: inline-block;
    padding: 0 10px;
}

.modal-final-results span {
    display: inline-block;
}

.modal-final-results .result {
    display    : inline-block;
    font-weight: bold;
}

@media only screen and (min-width: 1025px) {
    .modal h2 {
        color        : #f2b42d;
        font-size    : 55px;
        line-height  : 1.3;
        margin-bottom: 30px;
    }

    .modal-content p {
        font-size: 20px;
    }

    .modal-content .notice {
        font-size: 14px;
    }
}


/* -------------------------------------FORMA -------------------------*/
.form-wrapper {
    background-color          : #eeeeee;
    text-align                : center;
    padding                   : 20px;
    border-bottom-left-radius : 30px;
    border-bottom-right-radius: 30px;
}

.form-inner {
    max-width: 590px;
    margin   : 0 auto;
    padding  : 20px;
}

fieldset {
    border   : 0;
    padding  : 0;
    margin   : 0;
    min-width: 0;
}

fieldset .field {
    margin-bottom: 15px;
}

label {
    font-size    : 16px;
    text-align   : center;
    margin-bottom: 5px;
}

.parsley-type {
    color      : #de134b;
    font-weight: bold;
}

input[type="email"],
input[type="text"] {
    width           : 100%;
    border          : 2px solid #a6a6a6;
    background-color: #f3f3f3;
    height          : 45px;
    padding         : 10px;
    font-size       : 16px;
}

input[type="submit"] {
    display         : block;
    background-color: #de134b;
    color           : #fff;
    text-transform  : uppercase;
    width           : 100%;
    padding         : 10px;
}

input[type="submit"]:hover {
    opacity: 0.8;
}

.Actions {
    height: auto;
}

.restart {
    display      : inline-block;
    font-size    : 14rem/16;
    line-height  : 1;
    border       : 2px solid #DF134C;
    color        : #DF134C;
    padding      : 13px 16px;
    border-radius: 50px;
    background   : none;
    cursor       : pointer;
    transition   : all 0.2s;

    margin-top: 30px;

}

.restart:hover {
    box-shadow: 0 0 0 1px #DF134C,
        0 0 0 1px #DF134C;
}

@media only screen and (min-width: 1025px) {
    input[type="submit"] {
        font-size: 26px;
        padding  : 14px;
    }

    label {
        font-size: 20px;
    }
}


#Nocaptcha-MemoryGameForm_Form_Captcha>div {
    margin: 0 auto;
}

@-webkit-keyframes matchAnim {
    0% {
        background: #bcffcc;
    }

    100% {
        background: white;
    }
}

@keyframes matchAnim {
    0% {
        background: #bcffcc;
    }

    100% {
        background: white;
    }
}