@import url(../../../../v1/shared__udir/css__udir/styles__ufile.css);

:root {
    --blueish: rgb(220, 230, 238);
    --whitecool: rgb(245, 245, 245);
    --cold-dark: #0060b4;
    --cold: #4a7b9b;
    --cold-light: #a6c5ec;
    --hot: #d65108;
    --hot-light: #ff9999;
    --shine: #ffffff;
    --dark: #081520;
    --light-gray: #dddddd;
    --ok: rgb(26, 165, 56);
    --cancel: rgb(192, 87, 87);
    --media-small: 576px;
    --media-medium: 768px;
    --media-large: 992px;
    --media-extralarge: 1200px;
    --media-huge: 1400px;
    --font1 : 'Times New Roman', Times, serif;
    --font2 : 'Inter', Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

@keyframes floatOne {
    0% { transform: translate(0, 0) scale(1); opacity: 0.9; }
    25% { transform: translate(15px, -10px) scale(1.05); opacity: 1; }
    50% { transform: translate(0, 10px) scale(1); opacity: 0.9; }
    75% { transform: translate(-10px, -5px) scale(0.98); opacity: 0.95; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
}

@keyframes floatTwo {
    0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
    30% { transform: translate(-20px, 5px) scale(0.95); opacity: 0.9; }
    60% { transform: translate(10px, -15px) scale(1.02); opacity: 0.85; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
}

@keyframes floatThree {
    0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
    40% { transform: translate(25px, 20px) scale(1.03); opacity: 0.8; }
    80% { transform: translate(-15px, -10px) scale(0.97); opacity: 0.75; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
}

.wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100dvh;
    position: relative;
    display: block;
    background-color: #f1fafd;
    & > div {
        position: relative;
        display: block;
        margin: 0 auto;
        width: 100dvw;
        max-width: 100%;
        margin: 0 auto;
        @media (min-width: 768px) {
            display: inline-block;
            width: 50%;
            float: left;
            margin: 0;
            padding: 90px;
            position: absolute;
            transform: none;
        }
        &#brand {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            max-width: 100%;
            position: relative;
            @media (min-width: 768px) {
                display: inline-block;
                width: 49%;
                float: right;
                margin: 0;
                padding: 90px;
                transform: none;
            }
            & > div {
                &#float {
                    & figure {
                        display: block;
                        position: relative;
                        margin-top: 90px;
                        margin-left: 50%;
                        transform: translateX(-50%);
                        img {
                            display: block;
                            position: absolute;
                            width: 80%;
                            height: auto;
                            @media (min-width: 768px) {
                                width: 100%;
                                height: auto;
                            }
                            &.image-one {
                                z-index: 1;
                                animation: floatOne 18s ease-in-out infinite alternate;
                            }
                            &.image-two {
                                z-index: 2;
                                animation: floatTwo 22s ease-in-out infinite alternate 2s;
                            }
                            &.image-three {
                                z-index: 3;
                                animation: floatThree 16s ease-in-out infinite alternate 1s;
                            }
                        }
                    }
                }
                &#brandname {
                    position: relative;
                    width: max-content;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    max-width: 100%;
                    margin: 0 auto;
                    & brand-figure {
                        text-align: center;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        figure {
                            position: relative;
                            display: block;
                            text-align: center;
                            img {
                                margin: 0 auto 0 50%;
                                transform: translateX(-50%);
                                width: 90px;
                                height: auto;
                            }
                        }
                    }
                    & brand-text {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        h1 {
                            font-family: 'QuickSand', Arial, Helvetica, sans-serif;
                            font-size: 2rem;
                            margin: 0 auto 0 50%;
                            transform: translateX(-50%);
                            text-align: center;
                            display: block;
                            position: relative;
                        }
                    }
                }
            }
        }
        &#startform {
            display: flex;
            justify-content: center;
            flex-direction: column;
            width: 100%;
            max-width: 100%;
            position: relative;
            margin: 0 auto;
            @media (min-width: 768px) {
                display: inline-block;
                width: 50%;
                float: left;
                margin: 0;
                padding: 90px;
                position: relative;
                transform: none;
            }
            form {
                width: 300px;
                font-family: Arial, Helvetica, sans-serif;
                margin: 90px auto;
                p, label, h4 {
                    display: block;
                    padding: 10px 0;
                }
                @media (min-width: 768px) {
                    margin: 30px auto;
                }
            }
        }
    }
}