body {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: NormalFont;
    src: url(https://s3.amazonaws.com/font-public.canva.com/YAD1aU3sLnI/0/DMSans-Regular.f8f3e3f30371f4c7c1589b491.8f7934b3d45567e9cf1f541e008969a9.woff2);
    font-style: normal;
}

@font-face {
    font-family: BoldFont;
    src: url(https://s3.amazonaws.com/font-public.canva.com/YAFdJjTk5UU/0/CanvaSans-Bold13644182954117137290.33696.33696a29f45c1b554a4c12443b998d21.woff2);
    font-style: normal;
}

@font-face {
    font-family: LightFont;
    src: url(https://s3.amazonaws.com/font-public.canva.com/YAFdJs2qTWQ/0/OpenSauceOne-Light.21cf5a80fc5777c6aed04.22ff9d894b6467b3ddab0f1989a2cb4d.woff2);
    font-style: normal;
}

@media screen and (min-width: 120px) and (max-width: 768px) {
    header {
        width: 100%;
        height: 5vw;
        padding-top: 10px;
        font-weight: 500;
        position: absolute;
        top: 0vw;

        & nav {
            margin: 0 auto;
            width: 90%;
            height: 4vw;
            display: flex;
            justify-content: center;
            align-items: center;

            & div {
                width: 25%;
                height: 20px;
                display: flex;
                justify-content: center;
                align-items: center;

                & a {
                    text-decoration: 1px white underline;
                    color: white;
                    font-size: 2.5vw;
                    font-family: BoldFont, serif;
                }
            }
        }
    }

    .area__introduction {
        width: 100%;
        height: 145vw;
        position: relative;

        & .area__quote__unlock {
            color: #142140;
            position: absolute;
            top: 2vw;
            left: 6vw;
            font-size: 5vw;
            font-family: LightFont, serif;
        }

        & .area__information {
            position: absolute;
            width: 85%;
            height: 80vw;
            left: 6vw;
            top: 16vw;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            & span {
                display: flex;
                color: #142140;
                font-size: 3vw;
                font-family: LightFont, serif;
            }

            z-index: 10;
        }

        & .area__people {
            width: 45vw;
            height: 45vw;
            position: absolute;
            left: calc(50% - 22.5vw);
            bottom: 2vw;
            border-radius: 10vw;
        }
    }

    .area__top {
        width: 100%;
        background-image: url("../images/homePage/topBackground.png");
        height: 70vw;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        padding-top: 5vw;

        & .area__treasure {
            width: 15%;
            position: relative;
            top: 1vw;
            left: 6vw;
            display: flex;
            align-items: center;
            flex-direction: column;

            & .area__treasure__img {
                width: 100%;
            }

            & span {
                color: #142140;
                position: absolute;
                bottom: 1%;
                font-size: 2vw;
                font-family: BoldFont, serif;
            }
        }

        & .area__information {
            position: absolute;
            width: 55%;
            height: 30vw;
            top: 25vw;
            left: 6vw;

            & .area__information__quote {
                color: #142140;
                font-size: 6vw;
                font-family: BoldFont, serif;
            }

            & .area__information__links {
                width: 90%;
                display: flex;
                position: absolute;
                bottom: 0px;
                justify-content: space-around;
                align-self: center;
                align-items: center;
                height: 10vw;

                & div {
                    background: white;
                    border-radius: 5px;
                    width: 18vw;
                    height: 50%;
                    padding: 5px;

                    & img {
                        width: 18%;
                    }
                }

                & .area__information__links__link {
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;

                    & a {
                        width: 12vw;
                        color: black;
                        text-decoration: underline;
                        font-size: 2vw;
                        font-family: NormalFont, serif;

                        & span {
                            font-size: 2vw;
                            font-family: BoldFont, serif;
                        }
                    }
                }
            }

        }

        & .area__top__phone {
            position: absolute;
            right: 3vw;
            top: 10vw;
            width: 40vw;
            height: 60vw;
            display: flex;
            justify-content: center;
            align-items: center;

            & .area__top__phone__border {
                width: 35vw;
                height: 100%;
                position: absolute;
                z-index: 2;
            }

            & .area__top__phone__picture {
                position: absolute;
                width: 27vw;
                height: 95%;
                z-index: 1;
            }

            & .area__top__phone__shadow {
                width: 40vw;
                margin-bottom: 20px;
                position: absolute;
                z-index: 0;
            }
        }
    }

    .trak-usage {
        background: #e9e9e9;
        width: 100%;
        height: 2100vw;
        position: relative;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #142140;

        .trak-usage__use {
            font-size: 5vw;
            font-family: LightFont, serif;
        }

        .trak-usage__header-getting {
            display: flex;
            font-size: 5vw;
            font-family: BoldFont, serif;
            margin: 4vw auto;
        }

        .trak-usage__header-finding, .trak-usage__header-redeeming {
            margin: 4vw auto;
            font-size: 5vw;
            font-family: BoldFont, serif;
        }

        & .trak-usage__layouts {
            display: flex;
            margin: 2vw auto;
            width: 90%;
            height: 100%;
            box-sizing: border-box;
            flex-direction: row;
            flex-wrap: wrap;

            & .trak-usage__example {
                display: flex;
                flex-basis: 100%;
                width: 100%;
                height: 25%;
                position: relative;
                padding-bottom: 15vw;
                box-sizing: border-box;
                justify-content: flex-end;
                flex-direction: column;
                align-items: center;

                & .trak-usage__example__phone-layout {
                    position: absolute;
                    top: 0px;
                    width: 100%;
                    height: 135vw;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    & .trak-usage__example__phone-layout__border {
                        width: 70vw;
                        height: 150vw;
                        position: absolute;
                        z-index: 2;
                    }

                    & .trak-usage__example__phone-layout__picture {
                        position: absolute;
                        width: 62vw;
                        height: 131vw;
                        z-index: 1;
                    }
                }

                & .trak-usage__example__text {
                    width: 80%;
                    height: 50px;
                    text-align: center;
                    font-size: 4vw;
                    font-family: LightFont, serif;
                }
            }
        }

        & .trak-usage__getting-started, & .trak-usage__finding-treasures, & .trak-usage__redeeming-treasures {
            height: 33%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            & hr {
                position: absolute;
                bottom: 0;
                width: 80%;
                left: 10%;
                background-color: black;
                height: 1px;
                border: none;
            }
        }
    }

    .area__about {
        width: 100%;
        height: 140vw;
        position: relative;

        & .area__quote__about {
            width: 50%;
            color: #142140;
            position: absolute;
            top: 2vw;
            left: 5vw;
            font-size: 5vw;
            font-family: NormalFont, serif;
        }

        & .area__information {
            position: absolute;
            width: 85%;
            height: 75vw;
            left: 5vw;
            top: 12vw;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            & span {
                display: flex;
                color: #142140;
                font-size: 3vw;
                font-family: LightFont, serif;
            }

            z-index: 10;
        }

        & .area__picture {
            width: 55vw;
            height: 45vw;
            position: absolute;
            left: calc(50% - 27.5vw);
            bottom: 5vw;
            border-radius: 10vw;
        }
    }

    .area__contact {
        height: 70vw;
        background-image: url("../images/homePage/bottomBackground.png");
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        color: #142140;
        display: flex;

        & .area__contact__contacts {
            margin: 10vw auto;
            width: 80%;
            height: 50vw;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            & .area__contact__contacts__contact, .area__contact__contacts__email, .area__contact__contacts__social {
                width: 100%;
                height: 32.5%;
            }

            & .area__contact__contacts__contact {
                display: flex;
                justify-content: center;
                align-items: center;
                background: #2c6a9d;;
                color: white;
                font-size: 6vw;
                position: relative;

                & .area__contact__contacts__contact__word {
                    position: absolute;
                    left: 5vw;
                    font-family: LightFont, serif;
                }
            }

            & .area__contact__contacts__email {
                background: white;
                position: relative;

                & .area__contact__contacts__email__header {
                    position: absolute;
                    top: 3vw;
                    left: 5vw;
                    font-size: 4vw;
                    font-family: NormalFont, serif;
                }

                & .area__contact__contacts__email__link {
                    position: absolute;
                    top: 9vw;
                    left: 5vw;
                    font-size: 4vw;
                    text-decoration: none;
                    color: #142140;
                    font-family: LightFont, serif;
                }
            }

            & .area__contact__contacts__social {
                background: grey;
                position: relative;

                & .area__contact__contacts__social__word {
                    position: absolute;
                    top: 5vw;
                    left: 5vw;
                    font-size: 5vw;
                    font-family: NormalFont, serif;
                }

                & .area__contact__contacts__social__links {
                    position: absolute;
                    top: 2vw;
                    right: 5vw;
                    width: 40vw;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    & .area__contact__contacts__social__links__link {
                        width: 12vw;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    header {
        width: 100%;
        height: 5vw;
        padding-top: 10px;
        position: absolute;
        top: 0vw;

        & nav {
            margin: 0 auto;
            width: 80%;
            height: 4vw;
            display: flex;
            justify-content: center;
            align-items: center;

            & div {
                width: 25%;
                height: 20px;
                display: flex;
                justify-content: center;
                align-items: center;

                & a {
                    text-decoration: 1px white underline;
                    color: white;
                    font-size: 2.2vw;
                    font-family: BoldFont, serif;
                }
            }
        }
    }

    .area__introduction {
        width: 100%;
        height: 130vw;
        position: relative;

        & .area__quote__unlock {
            color: #142140;
            position: absolute;
            top: 2vw;
            left: 6vw;
            font-size: 5vw;
            font-family: LightFont, serif;
        }

        & .area__information {
            position: absolute;
            width: 90%;
            height: 60vw;
            left: 6vw;
            top: 16vw;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            & span {
                display: flex;
                color: #142140;
                font-size: 2.5vw;
                font-family: LightFont, serif;
            }

            z-index: 10;
        }

        & .area__people {
            width: 45vw;
            height: 45vw;
            position: absolute;
            left: calc(50% - 22.5vw);
            bottom: 3vw;
            border-radius: 10vw;
        }
    }

    .area__top {
        width: 100%;
        background-image: url("../images/homePage/topBackground.png");
        height: 70vw;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;

        & .area__treasure {
            width: 15%;
            position: relative;
            top: 5vw;
            left: 6vw;
            display: flex;
            align-items: center;
            flex-direction: column;

            & .area__treasure__img {
                width: 100%;
            }

            & span {
                color: #142140;
                position: absolute;
                bottom: 1%;
                font-size: 2vw;
                font-family: BoldFont, serif;
            }
        }

        & .area__information {
            position: absolute;
            width: 55%;
            height: 30vw;
            top: 25vw;
            left: 6vw;

            & .area__information__quote {
                color: #142140;
                font-size: 6vw;
                font-family: BoldFont, serif;
            }

            & .area__information__links {
                width: 90%;
                display: flex;
                position: absolute;
                bottom: 0px;
                justify-content: space-around;
                align-self: center;
                align-items: center;
                height: 10vw;

                & div {
                    background: white;
                    border-radius: 1vw;
                    width: 18vw;
                    height: 50%;
                    padding: 5px;

                    & img {
                        width: 18%;
                    }
                }

                & .area__information__links__link {
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;

                    & a {
                        width: 12vw;
                        color: black;
                        text-decoration: underline;
                        font-size: 2vw;
                        font-family: NormalFont, serif;

                        & span {
                            font-size: 2vw;
                            font-family: BoldFont, serif;
                        }
                    }
                }
            }

        }

        & .area__top__phone {
            position: absolute;
            right: 3vw;
            top: 7vw;
            width: 40vw;
            height: 60vw;
            display: flex;
            justify-content: center;
            align-items: center;

            & .area__top__phone__border {
                width: 35vw;
                height: 100%;
                position: absolute;
                z-index: 2;
            }

            & .area__top__phone__picture {
                position: absolute;
                width: 27vw;
                height: 95%;
                z-index: 1;
            }

            & .area__top__phone__shadow {
                width: 45vw;
                margin-bottom: 20px;
                position: absolute;
                z-index: 0;
            }
        }
    }

    .trak-usage {
        background: #e9e9e9;
        width: 100%;
        height: 680vw;
        position: relative;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #142140;

        .trak-usage__use {
            font-size: 5vw;
            font-family: LightFont, serif;
        }

        .trak-usage__header-getting {
            display: flex;
            font-size: 4vw;
            font-family: BoldFont, serif;
            margin: 2vw auto;
        }

        .trak-usage__header-finding, .trak-usage__header-redeeming {
            margin: 2vw auto;
            font-size: 4vw;
            font-family: BoldFont, serif;
        }

        & .trak-usage__layouts {
            display: flex;
            margin: 2vw auto;
            width: 100vw;
            height: 230vw;
            box-sizing: border-box;
            flex-direction: row;
            flex-wrap: wrap;

            & .trak-usage__example {
                display: flex;
                flex-basis: 50%;
                width: 50%;
                height: 50%;
                position: relative;
                padding-bottom: 18vw;
                box-sizing: border-box;
                justify-content: flex-end;
                flex-direction: column;
                align-items: center;

                & .trak-usage__example__phone-layout {
                    position: absolute;
                    top: 0px;
                    width: 100%;
                    height: 80vw;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    & .trak-usage__example__phone-layout__border {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        z-index: 2;
                    }

                    & .trak-usage__example__phone-layout__picture {
                        position: absolute;
                        width: 36vw;
                        height: 76vw;
                        z-index: 1;
                    }
                }

                & .trak-usage__example__text {
                    width: 80%;
                    height: 50px;
                    text-align: center;
                    font-size: 3vw;
                    font-family: LightFont, serif;
                }
            }
        }

        & .trak-usage__getting-started, & .trak-usage__finding-treasures, & .trak-usage__redeeming-treasures {
            height: 33%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            & hr {
                position: absolute;
                bottom: 0;
                width: 80%;
                left: 10%;
                background-color: black;
                height: 1px;
                border: none;
            }
        }
    }

    .area__about {
        width: 100%;
        height: 130vw;
        position: relative;

        & .area__quote__about {
            color: #142140;
            position: absolute;
            top: 2vw;
            left: 5vw;
            font-size: 5vw;
            font-family: NormalFont, serif;
        }

        & .area__information {
            position: absolute;
            width: 90%;
            height: 60vw;
            right: 5vw;
            top: 12vw;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            & span {
                display: flex;
                color: #142140;
                font-size: 2.5vw;
                font-family: LightFont, serif;
            }

            z-index: 10;
        }

        & .area__picture {
            width: 60vw;
            height: 50vw;
            position: absolute;
            left: calc(50% - 30vw);
            bottom: 5vw;
            border-radius: 10vw;
        }
    }

    .area__contact {
        height: 70vw;
        background-image: url("../images/homePage/bottomBackground.png");
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        color: #142140;
        display: flex;

        & .area__contact__contacts {
            margin: 10vw auto;
            width: 60%;
            height: 40vw;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            & .area__contact__contacts__contact, .area__contact__contacts__email, .area__contact__contacts__social {
                width: 100%;
                height: 32.5%;
            }

            & .area__contact__contacts__contact {
                display: flex;
                justify-content: center;
                align-items: center;
                background: #2c6a9d;;
                color: white;
                font-size: 5vw;
                position: relative;

                & .area__contact__contacts__contact__word {
                    position: absolute;
                    left: 5vw;
                    font-family: LightFont, serif;
                }
            }

            & .area__contact__contacts__email {
                background: white;
                position: relative;

                & .area__contact__contacts__email__header {
                    position: absolute;
                    top: 2vw;
                    left: 5vw;
                    font-size: 4vw;
                    font-family: NormalFont, serif;
                }

                & .area__contact__contacts__email__link {
                    position: absolute;
                    top: 7vw;
                    left: 5vw;
                    font-size: 4vw;
                    text-decoration: none;
                    color: #142140;
                    font-family: LightFont, serif;
                }
            }

            & .area__contact__contacts__social {
                background: grey;
                position: relative;

                & .area__contact__contacts__social__word {
                    position: absolute;
                    top: 4vw;
                    left: 5vw;
                    font-size: 5vw;
                    font-family: NormalFont, serif;
                }

                & .area__contact__contacts__social__links {
                    position: absolute;
                    top: 3vw;
                    right: 5vw;
                    width: 30vw;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    & .area__contact__contacts__social__links__link {
                        width: 8vw;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1025px) {
    header {
        width: 100%;
        height: 5vw;
        padding-top: 10px;
        position: absolute;
        top: 0vw;

        & nav {
            margin: 0 auto;
            width: 80%;
            height: 4vw;
            display: flex;
            justify-content: center;
            align-items: center;

            & div {
                width: 25%;
                height: 20px;
                display: flex;
                justify-content: center;
                align-items: center;


                & a {
                    text-decoration: 1px white underline;
                    color: white;
                    font-size: 1.5vw;
                    font-family: BoldFont, serif;
                    transition: all .2s linear;

                    &:hover {
                        color: red;
                        text-decoration-color: red;
                    }
                }
            }
        }
    }

    .area__introduction {
        width: 100%;
        height: 50vw;
        position: relative;

        & .area__quote__unlock {
            color: #142140;
            position: absolute;
            top: 10px;
            left: 6vw;
            font-size: 4.5vw;
            font-family: LightFont, serif;
        }

        & .area__information {
            position: absolute;
            width: 50%;
            height: 30vw;
            left: 6vw;
            top: 16vw;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            & span {
                display: flex;
                color: #142140;
                font-size: 1.2vw;
                font-family: LightFont, serif;
            }

            z-index: 10;
        }

        & .area__people {
            width: 40vw;
            height: 40vw;
            position: absolute;
            right: 3vw;
            top: 8vw;
            border-radius: 10vw;
        }
    }

    .area__top {
        width: 100%;
        background-image: url("../images/homePage/topBackground.png");
        height: 55vw;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        padding-top: 5vw;

        & .area__treasure {
            width: 15%;
            position: relative;
            top: 1vw;
            left: 6vw;
            display: flex;
            align-items: center;
            flex-direction: column;

            & .area__treasure__img {
                width: 100%;
            }

            & span {
                color: #142140;
                position: absolute;
                bottom: 1%;
                font-size: 2vw;
                font-family: BoldFont, serif;
            }
        }

        & .area__information {
            position: absolute;
            width: 55%;
            height: 25vw;
            top: 20vw;
            left: 6vw;

            & .area__information__quote {
                color: #142140;
                font-size: 6vw;
                font-family: BoldFont, serif;
            }

            & .area__information__links {
                width: 90%;
                display: flex;
                position: absolute;
                bottom: 0px;
                justify-content: space-around;
                align-self: center;
                align-items: center;
                height: 10vw;

                & div {
                    background: white;
                    border-radius: 1vw;
                    width: 18vw;
                    height: 50%;
                    padding: 5px;

                    & img {
                        width: 18%;
                    }
                }

                & .area__information__links__link {
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;

                    & a {
                        width: 12vw;
                        color: black;
                        text-decoration: underline;
                        font-size: 2vw;
                        font-family: NormalFont, serif;

                        & span {
                            font-size: 2vw;
                            font-family: BoldFont, serif;
                        }
                    }
                }
            }

        }

        & .area__top__phone {
            position: absolute;
            right: 3vw;
            top: 10vw;
            width: 40vw;
            height: 45vw;
            display: flex;
            justify-content: center;
            align-items: center;

            & .area__top__phone__border {
                width: 35vw;
                height: 100%;
                position: absolute;
                z-index: 2;
            }

            & .area__top__phone__picture {
                position: absolute;
                width: 20vw;
                height: 95%;
                z-index: 1;
            }

            & .area__top__phone__shadow {
                width: 45vw;
                margin-bottom: 20px;
                position: absolute;
                z-index: 0;
            }
        }
    }

    .trak-usage {
        background: #e9e9e9;
        width: 100%;
        height: 210vw;
        position: relative;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #142140;

        .trak-usage__use {
            margin-top: 2vw;
            font-size: 4vw;
            font-family: LightFont, serif;
        }

        .trak-usage__header-getting {
            display: flex;
            font-size: 3vw;
            font-family: BoldFont, serif;
            margin: 2vw auto;
        }

        .trak-usage__header-finding, .trak-usage__header-redeeming {
            margin: 2vw auto;
            font-size: 3vw;
            font-family: BoldFont, serif;
        }

        & .trak-usage__layouts {
            display: flex;
            margin: 2vw auto;
            width: 90vw;
            height: 55vw;
            box-sizing: border-box;
            flex-direction: row;
            flex-wrap: wrap;

            & .trak-usage__example {
                display: flex;
                flex-basis: 25%;
                width: 25%;
                height: 100%;
                position: relative;
                padding-bottom: 10vw;
                box-sizing: border-box;
                justify-content: flex-end;
                flex-direction: column;
                align-items: center;

                & .trak-usage__example__phone-layout {
                    position: absolute;
                    top: 0px;
                    width: 100%;
                    height: 40vw;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    & .trak-usage__example__phone-layout__border {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        z-index: 2;
                    }

                    & .trak-usage__example__phone-layout__picture {
                        position: absolute;
                        width: 18vw;
                        height: 38vw;
                        z-index: 1;
                    }
                }

                & .trak-usage__example__text {
                    width: 80%;
                    height: 50px;
                    text-align: center;
                    font-size: 1.5vw;
                    font-family: LightFont, serif;
                }
            }
        }

        & .trak-usage__getting-started, & .trak-usage__finding-treasures, & .trak-usage__redeeming-treasures {
            height: 33%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            & hr {
                position: absolute;
                bottom: 0;
                width: 80%;
                left: 10%;
                background-color: black;
                height: 1px;
                border: none;
            }
        }
    }

    .area__about {
        width: 100%;
        height: 60vw;
        position: relative;

        & .area__quote__about {
            width: 50%;
            color: #142140;
            position: absolute;
            top: 2vw;
            right: 5vw;
            font-size: 4.5vw;
            font-family: NormalFont, serif;
        }

        & .area__information {
            position: absolute;
            width: 50%;
            height: 30vw;
            right: 5vw;
            top: 16vw;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            & span {
                display: flex;
                color: #142140;
                font-size: 1.2vw;
                font-family: LightFont, serif;
            }

            z-index: 10;
        }

        & .area__picture {
            width: 40vw;
            height: 35vw;
            position: absolute;
            left: 2vw;
            top: 15vw;
            border-radius: 10vw;
        }
    }

    .area__contact {
        height: 50vw;
        background-image: url("../images/homePage/bottomBackground.png");
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        color: #142140;
        display: flex;

        & .area__contact__contacts {
            margin: 10vw auto;
            width: 50%;
            height: 30vw;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            & .area__contact__contacts__contact, .area__contact__contacts__email, .area__contact__contacts__social {
                width: 100%;
                height: 32.5%;
            }

            & .area__contact__contacts__contact {
                display: flex;
                justify-content: center;
                align-items: center;
                background: #2c6a9d;;
                color: white;
                font-size: 4vw;
                position: relative;

                & .area__contact__contacts__contact__word {
                    position: absolute;
                    left: 5vw;
                    font-family: LightFont, serif;
                }
            }

            & .area__contact__contacts__email {
                background: white;
                position: relative;

                & .area__contact__contacts__email__header {
                    position: absolute;
                    top: 1vw;
                    left: 5vw;
                    font-size: 3vw;
                    font-family: NormalFont, serif;
                }

                & .area__contact__contacts__email__link {
                    position: absolute;
                    top: 5.5vw;
                    left: 5vw;
                    font-size: 2vw;
                    text-decoration: none;
                    color: #142140;
                    font-family: LightFont, serif;
                    transition: all .2s linear;

                    &:hover {
                        color: red;
                    }
                }
            }

            & .area__contact__contacts__social {
                background: grey;
                position: relative;

                & .area__contact__contacts__social__word {
                    position: absolute;
                    top: 3vw;
                    left: 5vw;
                    font-size: 3vw;
                    font-family: NormalFont, serif;
                }

                & .area__contact__contacts__social__links {
                    position: absolute;
                    top: 3vw;
                    right: 5vw;
                    width: 20vw;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    & .area__contact__contacts__social__links__link {
                        width: 5vw;
                    }
                }
            }
        }
    }
}