.logo {
    position: relative;
}
.logo img {
        width: 100%;
        height: auto;
        -o-object-fit: contain;
           object-fit: contain;
        display: block;
    }
.logo img.heart {
        width: 66.89%;
        margin: 0 auto;
    }
.logo img.title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

section.landing {
    min-height: 100vh;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #ffb4c1 38.91%, #c71d30 100%);
    padding: 100px 80px;
}

section.landing h1 {
        font-weight: 400;
        font-size: 30px;
        line-height: 102%;
        text-align: center;
        color: #8c040c;
    }

section.landing h1 span {
            color: #e792a1;
        }

section.landing .logo {
        width: 610px;
        max-width: 100%;
        margin: 40px auto 0;
    }

section.landing p.end {
        width: 610px;
        max-width: 100%;
        margin: 30px auto 0;
    }

section.landing p.end span {
            white-space: nowrap;
            word-break: keep-all;
        }

section.landing p.end b {
            font-weight: 700;
        }

section.landing p {
        font-weight: 400;
        font-size: 30px;
        line-height: 102%;
        text-align: center;
        color: #ffdde3;
    }

section.landing p span.line-through {
            color: #f0b1bc;
            -webkit-text-decoration: line-through;
            text-decoration: line-through;
        }

section.landing button.with-text {
        margin: 40px auto 0;
    }

section.landing footer {
        font-weight: 400;
        font-size: 12px;
        line-height: 102%;
        text-align: center;
        vertical-align: middle;
        color: #ffdde3;
        margin-top: 120px;
    }

@media (max-width: 600px) {

    section.landing {
        padding: 50px 20px;
}

        section.landing h1 {
            font-size: 24px;
        }

        section.landing .logo {
            width: 100%;
            max-width: 400px;
        }

        section.landing p {
            font-size: 24px;
        }

        section.landing footer {
            margin-top: 60px;
        }
    }

.dialog {
    min-height: 100vh;
    height: 100%;
    width: 100%;
    padding: 40px 80px;
    position: relative;
}
.dialog .logo {
        width: 195px;
        position: absolute;
        left: 80px;
        top: 40px;
    }
.dialog .main {
        display: flex;
        flex-direction: column;
        position: absolute;
        bottom: 12%;
        left: 0;
        right: 0;
    }
.dialog img.bg {
        width: 1200px;
        max-width: 80%;
        max-height: calc(100vh - 80px);
        -o-object-fit: contain;
           object-fit: contain;
        margin: 0 auto;
        display: block;
    }
.dialog .dialog-window {
        width: 470px;
        margin: auto auto 0;

        box-shadow: 0px 4px 1.9px 4px rgba(0,0,0,0.25098) inset;
        border-radius: 50px;
        position: relative;

        font-weight: 400;
        font-size: 30px;
        line-height: 90%;

        padding: 30px;
    }
.dialog .dialog-window img.title {
            position: absolute;
            top: -20px;
            right: 10px;
        }
.dialog .dialog-window img.skip {
            position: absolute;
            bottom: 0;
            transform: translateY(50%);
            left: 0;
            right: 0;
            margin: 0 auto;
            cursor: pointer;
        }
.dialog button.with-text {
        margin: 20px auto 0;
    }
.dialog .mobile {
        display: none;
    }
@media (max-width: 600px) {
        .dialog .desktop.bg {
            display: none;
        }

        .dialog .mobile {
            display: block;
            position: absolute;
            z-index: 0;
            right: 0;
            bottom: 0;
        }

        .dialog img.person {
            max-width: 80%;
        }

        .dialog .main {
            bottom: 5vh;
        }

        .dialog .logo {
            width: 120px;
            left: 20px;
            top: 20px;
        }

        .dialog .dialog-window {
            max-width: 95%;
            font-size: 21px;
        }
    }


    section.dialog.start .dialog-window {
        background: linear-gradient(
            180deg,
            rgba(255, 221, 227, 0.9) 39.72%,
            rgba(157, 74, 163, 0.9) 223.61%
        );
        border: 5px solid #542e57;
        color: #542e57;
    }
@media (max-width: 600px) {
        section.dialog.start {
        background: url(https://cdn.braye.heybabescosmetics.com/media/bg_mobile.8af09a9264be77a380a7.webp) no-repeat
            center center;
}
    }

section.game {
    min-height: 100vh;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #ffb4c1 38.91%, #c71d30 100%);
    padding: 40px 140px;
    overflow: hidden;
}

@media (max-width: 600px) {

section.game {
        padding: 120px 10px 40px;
}
    }

section.game img.title {
        margin: 0 auto;
        display: block;
        max-width: 100%;
    }

section.game .logo {
        width: 120px;
        position: fixed;
        left: 20px;
        top: 20px;
    }

section.game h1 {
        margin-top: 40px;
        font-weight: 400;
        font-size: 24px;
        line-height: 90%;
        text-align: center;
        color: #8c040c;
    }

section.game .main {
        position: relative;
    }

section.game .game-field {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        grid-gap: 5px;
        gap: 5px;
        width: 295px;
        margin: 20px auto;
    }

@media (min-width: 600px) {

section.game .game-field {
            width: 375px;
            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
        }

section.game .game-field.shadows {
            position: absolute;
            z-index: 0;
            right: 0;
            left: 0;
            margin: 0 auto;
        }

section.game .card {
        position: relative;
        width: 70px;
        height: 70px;
        cursor: pointer;

        border-radius: 10px;
        overflow: hidden;
        transition: transform 0.2s ease-in-out;
        perspective: 1000px;
        transform-style: preserve-3d;
    }

@media (min-width: 600px) {

section.game .card {
            width: 90px;
            height: 90px;
    }
        }

section.game .card .front,
        section.game .card .back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            transform-style: preserve-3d;
            transition: ease-in-out 600ms;
        }

section.game .card .front img,
        section.game .card .back img {
            -o-object-fit: contain;
               object-fit: contain;
            width: 100%;
            height: 100%;
        }

section.game .card .back {
            transform: rotateY(-180deg);
            background: #d44153;
        }

/* Background for already matched car */

section.game .card.shadow {
            opacity: 0.2;
            pointer-events: none;
        }

section.game .card.flipped,
        section.game .card.unflipped,
        section.game .card.centered,
        section.game .card.fall {
            z-index: 2;
        }

section.game .card.flipped {
            animation: card-opening-zoom-in-out 1s ease-in-out forwards;

            /* border: 1px solid red; */
            box-sizing: content-box;
        }

section.game .card.flipped .front {
                animation: card-opening-front 600ms ease-in-out forwards;
            }

section.game .card.flipped .back {
                animation: card-opening-back 600ms ease-in-out forwards;
            }

section.game .card.unflipped {
            animation: card-closing-zoom-in-out 1s ease-in-out forwards;
        }

section.game .card.unflipped .front {
                animation: card-closing-front 600ms ease-in-out forwards;
            }

section.game .card.unflipped .back {
                animation: card-closing-back 600ms ease-in-out forwards;
            }

section.game .card.centered-and-fall {
            transition: ease-in-out 600ms all;
        }

section.game .card.centered-and-fall .back {
                transition: ease-in-out 600ms all;
                background: transparent;
            }

/* Move all images to the center of the field */

section.game .card.centered-and-fall {
            position: relative;
        }

section.game .card.centered-and-fall:nth-child(1) {
                animation: centered-1 1.2s ease-out forwards;
            }

section.game .card.centered-and-fall:nth-child(2) {
                animation: centered-2 1.2s ease-out forwards;
            }

section.game .card.centered-and-fall:nth-child(3) {
                animation: centered-3 1.2s ease-in-out forwards;
            }

section.game .card.centered-and-fall:nth-child(4) {
                animation: centered-4 1.2s ease-in-out forwards;
            }

section.game .card.centered-and-fall:nth-child(5) {
                animation: centered-5 1.2s ease-in-out forwards;
            }

section.game .card.centered-and-fall:nth-child(6) {
                animation: centered-6 1.2s ease-in-out forwards;
            }

section.game .card.centered-and-fall:nth-child(7) {
                animation: centered-7 1.2s ease-in-out forwards;
            }

section.game .card.centered-and-fall:nth-child(8) {
                animation: centered-8 1.2s ease-in-out forwards;
            }

section.game .card.centered-and-fall:nth-child(9) {
                animation: centered-9 1.2s ease-in-out forwards;
            }

section.game .card.centered-and-fall:nth-child(10) {
                animation: centered-10 1.2s ease-in-out forwards;
            }

section.game .card.centered-and-fall:nth-child(11) {
                animation: centered-11 1.2s ease-in-out forwards;
            }

section.game .card.centered-and-fall:nth-child(12) {
                animation: centered-12 1.2s ease-in-out forwards;
            }

section.game .card.centered-and-fall:nth-child(13) {
                animation: centered-13 1.2s ease-in-out forwards;
            }

section.game .card.centered-and-fall:nth-child(14) {
                animation: centered-14 1.2s ease-in-out forwards;
            }

section.game .card.centered-and-fall:nth-child(15) {
                animation: centered-15 1.2s ease-in-out forwards;
            }

section.game .card.centered-and-fall:nth-child(16) {
                animation: centered-16 1.2s ease-in-out forwards;
            }

section.game .items-to-fix h1 {
            font-weight: 400;
            font-size: 24px;
            line-height: 90%;
            text-align: center;
            color: #ffdde3;
        }

section.game .items-to-fix .grid {
            width: 380px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
            grid-gap: 0;
            gap: 0;
            margin: 20px auto 0;
            align-items: center;
            justify-items: center;
        }

@media (max-width: 600px) {

section.game .items-to-fix .grid {
                width: 295px;
                grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        }
            }

section.game .items-to-fix .grid .item {
                position: relative;
            }

section.game .items-to-fix .grid .item img {
                    display: block;
                    margin: 0 auto;
                }

section.game .items-to-fix .grid .item img.found {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    opacity: 0;
                    transition: opacity 0.3s ease-in-out;
                }

section.game .items-to-fix .grid .item img.found.visible {
                        opacity: 1;
                    }

@keyframes card-opening-zoom-in-out {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes card-closing-zoom-in-out {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes card-opening-front {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-180deg);
    }
}

@keyframes card-opening-back {
    0% {
        transform: rotateY(-180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes card-closing-front {
    0% {
        transform: rotateY(-180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes card-closing-back {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-180deg);
    }
}

@keyframes fall-down {
    0% {
        transform: translateY(0vh);
    }
    100% {
        transform: translateY(100vh);
    }
}

@keyframes centered-1 {
    60% {
        transform: translate(calc(150% + 5px), calc(150% + 5px)) scale(1.5);
    }
    100% {
        transform: translate(calc(150% + 5px), calc(150% + 5px + 100vh));
    }
}
@keyframes centered-2 {
    60% {
        transform: translate(calc(50%), calc(150% + 5px)) scale(1.5);
    }
    100% {
        transform: translate(calc(50%), calc(150% + 5px + 100vh));
    }
}
@keyframes centered-3 {
    60% {
        transform: translate(calc(-50% - 5px), calc(150% + 5px)) scale(1.5);
    }
    100% {
        transform: translate(calc(-50% - 5px), calc(150% + 5px + 100vh));
    }
}
@keyframes centered-4 {
    60% {
        transform: translate(calc(-150% - 10px), calc(150% + 5px)) scale(1.5);
    }
    100% {
        transform: translate(calc(-150% - 10px), calc(150% + 5px + 100vh));
    }
}
@keyframes centered-5 {
    60% {
        transform: translate(calc(150% + 5px), calc(50%)) scale(1.5);
    }
    100% {
        transform: translate(calc(150% + 5px), calc(50% + 100vh));
    }
}
@keyframes centered-6 {
    60% {
        transform: translate(calc(50%), calc(50%)) scale(1.5);
    }
    100% {
        transform: translate(calc(50%), calc(50% + 100vh));
    }
}
@keyframes centered-7 {
    60% {
        transform: translate(calc(-50% - 5px), calc(50%)) scale(1.5);
    }
    100% {
        transform: translate(calc(-50% - 5px), calc(50% + 100vh));
    }
}
@keyframes centered-8 {
    60% {
        transform: translate(calc(-150% - 10px), calc(50%)) scale(1.5);
    }
    100% {
        transform: translate(calc(-150% - 10px), calc(50% + 100vh));
    }
}
@keyframes centered-9 {
    60% {
        transform: translate(calc(150% + 5px), calc(-50%)) scale(1.5);
    }
    100% {
        transform: translate(calc(150% + 5px), calc(-50% + 100vh));
    }
}
@keyframes centered-10 {
    60% {
        transform: translate(calc(50%), calc(-50%)) scale(1.5);
    }
    100% {
        transform: translate(calc(50%), calc(-50% + 100vh));
    }
}
@keyframes centered-11 {
    60% {
        transform: translate(calc(-50% - 5px), calc(-50%)) scale(1.5);
    }
    100% {
        transform: translate(calc(-50% - 5px), calc(-50% + 100vh));
    }
}
@keyframes centered-12 {
    60% {
        transform: translate(calc(-150% - 10px), calc(-50%)) scale(1.5);
    }
    100% {
        transform: translate(calc(-150% - 10px), calc(-50% + 100vh));
    }
}
@keyframes centered-13 {
    60% {
        transform: translate(calc(150% + 5px), calc(-150% - 5px)) scale(1.5);
    }
    100% {
        transform: translate(calc(150% + 5px), calc(-150% - 5px + 100vh));
    }
}
@keyframes centered-14 {
    60% {
        transform: translate(calc(50%), calc(-150% - 5px)) scale(1.5);
    }
    100% {
        transform: translate(calc(50%), calc(-150% - 5px + 100vh));
    }
}
@keyframes centered-15 {
    60% {
        transform: translate(calc(-50% - 5px), calc(-150% - 5px)) scale(1.5);
    }
    100% {
        transform: translate(calc(-50% - 5px), calc(-150% - 5px + 100vh));
    }
}
@keyframes centered-16 {
    60% {
        transform: translate(calc(-150% - 10px), calc(-150% - 5px)) scale(1.5);
    }
    100% {
        transform: translate(calc(-150% - 10px), calc(-150% - 5px + 100vh));
    }
}

button.promo-code {
    margin: 30px auto 0;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
    text-align: center;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 50px;
    position: relative;
    padding: 22px 40px 22px 20px;
    width: 100%;
    cursor: pointer;
    background: #ffdde3;
    font-family: "CooperBlack";
    color: #4c3638;
}
button.promo-code span {
        font-family: "CooperBlack";
        font-weight: 400;
        font-size: 17px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
button.promo-code img {
        width: 30px;
        position: absolute;
        right: 7px;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        pointer-events: none;
    }
button.promo-code.copied {
        background: #ff9bad;
        padding: 16px 24px 15px;
    }
button.promo-code.copied span {
            color: white;
        }
button.promo-code.copied img {
            display: none;
        }

.gameResults {
    background: rgba(199, 29, 48, 0.8);
    padding: 30px 20px 12px;
    width: 380px;
    max-width: calc(100% - 20px);
    margin: 0 auto;
    border: 3px solid #ffdde3;
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
    color: #ffdde3;
}
.gameResults.captcha iframe {
        margin: 16px auto;
        display: block;
    }
.gameResults h1 {
        font-family: "CooperBlack";
        font-weight: 400;
        font-size: 40px;
        line-height: 90%;
        text-align: center;
    }
@media (max-width: 600px) {
    .gameResults h1 {
            font-size: 24px;
    }
        }
.gameResults p {
        color: white;
        margin-top: 20px;
        font-weight: 400;
        font-size: 20px;
        line-height: 18px;
        text-align: center;
        padding: 0 28px;
    }
@media (max-width: 600px) {
        .gameResults .with-text {
            font-size: 24px;
        }
    }
.gameResults a.with-text {
        margin-top: 30px;
        -webkit-text-decoration: none;
        text-decoration: none;
    }
.gameResults a.with-text + button {
        margin-top: 8px;
    }


    section.dialog.end .dialog-window {
        background: linear-gradient(
            180deg,
            rgba(255, 221, 227, 0.9) 39.72%,
            rgba(189, 19, 79, 0.9) 223.61%
        );

        border: 5px solid #c71d30;
        color: #c71d30;
    }
@media (max-width: 600px) {
        section.dialog.end {
        background: url(https://cdn.braye.heybabescosmetics.com/media/bg_mobile.0d37b79fbd52d5fd827a.webp) no-repeat
            center center;
}
    }

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    line-height: 1.3em;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

@font-face {
    font-family: "CodeNewRoman";
    font-weight: 400;
    src: url(https://cdn.braye.heybabescosmetics.com/fonts/code_new_roman_regular.1568d458da0a3efc2919.otf) format("opentype");
}

@font-face {
    font-family: "CodeNewRoman";
    font-weight: 700;
    src: url(https://cdn.braye.heybabescosmetics.com/fonts/code_new_roman_bold.d2e9f4dec4d9a52ae53e.otf) format("opentype");
}

@font-face {
    font-family: "CooperBlack";
    font-weight: 700;
    src: url(https://cdn.braye.heybabescosmetics.com/fonts/a_cooperblack.f0ccc0c25db015ade251.otf) format("opentype");
}

html {
    background: #960021;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "CodeNewRoman";
    letter-spacing: 0;
}

button.with-text,
a.with-text {
    width: 340px;
    max-width: 100%;
    border-radius: 50px;

    background: #c71d304d;
    border: 5px solid #ffdde3;
    color: #ffdde3;
    padding: 19px;

    font-family: "CooperBlack";
    font-weight: 700;
    font-size: 32px;
    line-height: 102%;
    letter-spacing: 0%;
    text-align: center;

    cursor: pointer;
    display: block;
}

a {
    color: white;
}

.sound-control {
    &.hidden {
        opacity: 0;
        pointer-events: none;
    }

    img {
        position: fixed;
        right: 80px;
        bottom: 40px;
        cursor: pointer;
    }
}

@media (max-width: 600px) {
    .sound-control img {
        top: 20px;
        right: 20px;
        width: 40px;
    }
}