/*@use "variables" as *;
@use "media-query" as *;*/

.form-submit-btn-wrap button{
    outline: none;
    position: relative;
    margin: auto;
    padding: 15px 31px 10px 31px !important;
    -webkit-transition: background-color .3s linear, color .3s linear;
    -moz-transition: background-color .3s linear,color .3s linear;
    -o-transition: background-color .3s linear,color .3s linear;
    -ms-transition: background-color .3s linear,color .3s linear;
    transition: background-color .3s linear, color .3s linear;
    --button-color: var(--color-primary-button-text);
    --button-background-color: var(--color-primary-button-background);
    --button-border-color: var(--color-primary-button-border);
    --button-border-width: var(--style-border-width-primary);
    text-transform: var(--button-text-case-primary);
    border-radius: var(--style-border-radius-buttons-primary);
    box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color) !important;
    border: var(--button-border-width) solid var(--button-border-color) !important;
    font-family: var(--font-gopher--family);
    font-style: var(--font-paragraph--style);
    font-weight: 700;
    font-size: 0;
    line-height: 16px;
    cursor: pointer;
    margin:0;

    position: relative;
    overflow: hidden;
    background: transparent !important;
    color: #ffffff !important;
    z-index: 0;
}

/* animated background layer */
.form-submit-btn-wrap button::before{
    content:"";
    position:absolute;
    inset:0;
    background:#4C57E9;
    z-index:-1;
}

.form-submit-btn-wrap button::after{
    content:"Submit";
    font-family: var(--font-gopher--family);
    font-style: var(--font-paragraph--style);
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    
}

/* BACKGROUND animation */
@keyframes colorCycleFormBg {
    0%   { background:#4C57E9; }
    20%  { background:#F9EB04; }
    40%  { background:#ACFCD9; }
    60%  { background:#F44708; }
    80%  { background:#F4D0EC; }
    100% { background:#4C57E9; }
}

/* TEXT animation */
@keyframes colorCycleFormText {
    0%   { color:#ffffff; }
    20%  { color:#060709; }
    40%  { color:#060709; }
    60%  { color:#060709; }
    80%  { color:#060709; }
    100% { color:#ffffff; }
}

@media (min-width:750px){

    .form-submit-btn-wrap button:hover::before{
        animation: colorCycleFormBg 4.5s linear infinite;
    }

    .form-submit-btn-wrap button:hover:after{
        animation: colorCycleFormText 4.5s linear infinite;
    }
}

.Creators_form_main_new{
    .page-width{padding: 0px;}
    .Creators_form_inner_new{
        .Creators_form_sides_new{ display:flex;
            .Creators_form_sides_mainleft_new{ width: 50%;
                .Creators_form_sides_innerleft_new{ position: sticky; top: 107px;
                    .Creators_form_sides_innerleft_mainimage_new{
                        .Creators_form_sides_innerleft_innerimage_new{width:71.112%; margin: auto;  position: relative; padding-bottom:80.695%;
                            img{width:100%; position:absolute; object-fit:contain; top:0; left:0; bottom:0; right:0; height:100%; object-position: top center; }
                            video{width:100%; position:absolute; object-fit:contain; top:0; left:0; bottom:0; right:0; height:100%; object-position: top center; }
                        }
                    }
                    .Creators_form_sides_innerleft_mainlayer_new{position: absolute; top:0; left:0px; width:100%; height:100%;
                        .Creators_form_sides_innerleft_innerlayer_new{width: 100%; height:100%;
                            img{width:100%; position:absolute; object-fit:contain; top:0; left:0; bottom:0; right:0; height:100%; object-position: bottom left; }
                            video{width:100%; position:absolute; object-fit:contain; top:0; left:0; bottom:0; right:0; height:100%; object-position: bottom left; }
                        }
                    }
                }
            }
            .Creators_form_sides_mainright_new{ width: calc(100% - 50%); padding: 0px 56px;
                .Creators_form_sides_innerright_new{
                    .Creators_form_sides_innerright_mainboth_new{
                        .Creators_form_sides_innerright_innerboth_new{
                            .Creators_form_sides_innerright_innerboth_title_new{}
                            .Creators_form_sides_innerright_innerboth_infos_new{padding:40px 0px 0 0; font-size: 24px; font-family: var(--font-gopher--family); font-weight: 500; line-height: 128%; max-width:608px;
                                p{margin: 0px 0px 16px 0px;
                                    &:last-child{margin: 0px;}
                                }
                            }
                        }
                    }
                    .Creators_form_sides_innerright_mainform_new{
                        padding:40px 0 0 0;
                        .Creators_form_sides_innerright_innerform_new{

                            margin:0 -8px;

                            .has-error .help-block{
                                font-size:14px; padding-top:6px;
                            }
                            .alert{
                                font-size:14px; padding-top:6px;
                            }

                            .contact-form__form {
                                display: flex;
                                flex-direction: row;
                                gap: 0;
                                flex-wrap: wrap;
                            }

                            label {
                                font-weight: 600;
                                font-size: 14px;
                                display: inline-block;
                                margin-bottom: 2px;
                            }
                            .element-group {
                                margin-bottom: 24px;
                                padding: 0 8px;
                            }

                            .element-group.cs-width-50 {
                                width: 50%;
                                padding: 0 8px;
                                vertical-align: top;
                            }

                            .element-group.cs-width-100 {
                                width: 100%;
                                padding: 0 8px;
                                vertical-align: top;
                            }

                            .radio-group > div {
                                margin-bottom: 6px;
                                float: left;
                                margin-right: 15px;
                                display: flex;
                                align-items: center;
                            }
                            
                            input:not([type="radio"]):not([type="checkbox"]), select,  textarea {
                                appearance: none;
                                -webkit-appearance: none;
                                -moz-appearance: none;
                                outline: none;
                                -webkit-outline: none;
                                -moz-outline: none;
                                -o-outline: none;
                                box-shadow: none;
                                width: 100%;
                                box-sizing: border-box;
                            }

                            .radio-group {
                                overflow: hidden;
                                clear: both;
                            }

                            .contact_accept_new_OuterCS {
                                .radio-group {
                                    div {
                                        input {
                                            opacity: 0;
                                            width: 24px;
                                            height: 24px;
                                            position: absolute;
                                            margin: 0 0 0 4px;
                                        }
                                    }
                                }
                            }

                            .contact-form__error, .contact-form__success{
                                width:100%;
                            }

                            
                            .contact_input_new_OuterCS{
                                label{ display: none; }
                                input{
                                    border: 1px solid #060709; background: #FFF; height: 48px; border-radius:0; padding:8px 8px 8px 22px;
                                    color: #282828;
                                    font-family: var(--font-gopher--family);
                                    font-size: 14px;
                                    font-weight: 700;
                                    line-height: 100%;
                                    text-transform: uppercase;
                                    caret-color: transparent;
                                }
                                input:-webkit-autofill {
                                    -webkit-text-fill-color: #060709 !important;
                                    box-shadow: 0 0 0 1000px var(--input-bg, #fff) inset;
                                }

                                input:focus {
                                    background: #fff url(footer_input_gif.gif) no-repeat left 0px center;
                                    background-size: auto 32px;
                                }

                                input.typing {
                                    background: #fff;
                                    caret-color: #000;
                                }
                            }

                            .contact_textarea_new_OuterCS{
                                margin-bottom: 40px;
                                label{ display: none; }
                                textarea{
                                    border: 1px solid #060709; background: #FFF; height: 48px; border-radius:0; padding:17px 22px 17px 22px;
                                    color: #282828;
                                    font-family: var(--font-gopher--family);
                                    font-size: 14px;
                                    font-weight: 700;
                                    line-height: 100%;
                                    text-transform: uppercase;
                                    caret-color: transparent;
                                    height: 160px;
                                    display: flex;
                                }
                                textarea:-webkit-autofill {
                                    -webkit-text-fill-color: #060709 !important;
                                    box-shadow: 0 0 0 1000px var(--input-bg, #fff) inset;
                                }

                                textarea:focus {
                                    background: #fff url(footer_input_gif.gif) no-repeat left 0px top 8px;
                                    background-size: auto 32px;
                                }

                                textarea.typing {
                                    background: #fff;
                                    caret-color: #000;
                                }
                            }

                            .contact_accept_new_OuterCS{
                                margin-bottom:24px;
                                > label{ display: none; }
                                .radio-group{
                                    div{
                                        margin:0;
                                        input{ 
                                            opacity: 0;
                                            width: 24px;
                                            height: 24px;
                                            position: absolute;
                                            margin: 0 0 0 4px;
                                        }
                                        label{ 
                                            font-family: var(--font-gopher--family);
                                            font-size: 14px;
                                            font-weight: 700;
                                            line-height: 100%;
                                            position: relative;
                                            padding:5px 0 5px 32px;
                                            color: #fff;
                                            &:before{
                                                content:'';
                                                position: absolute;
                                                left:0;
                                                top:50%;
                                                background-size:100%;
                                                width: 24px; height: 24px;
                                                transform: translate(0, -50%);
                                                border: 2px solid  #060709;
                                                background:  #FFF;
                                            }
                                            &:after{
                                                content:'';
                                                position: absolute;
                                                left:4px;
                                                top:50%;
                                                background: #fff url(accept_checkmark.svg) no-repeat left 0px top 0px;
                                                background-size:100%;
                                                width: 16px; height: 16px;
                                                transform: translate(0, -50%);
                                                display: none;
                                            }
                                        }
                                        input:checked + label{
                                            &:after{
                                                display: block;
                                            }
                                        }
                                    }
                                }
                            }

                            .contact_radio_new_OuterCS{
                                margin-bottom:24px;
                                > label{
                                    font-family: var(--font-gopher--family);
                                    font-size: 16px;
                                    font-weight: 700;
                                    line-height: 100%;
                                    padding-bottom:16px;
                                    margin:0;
                                    display: block;
                                    &:after{ display: none; }
                                }
                                .radio-group{
                                    display: flex;
                                    flex-direction: column;
                                    gap:16px;
                                    div{
                                        margin:0;
                                        input{ 
                                            opacity: 0;
                                            width: 24px;
                                            height: 24px;
                                            position: absolute;
                                            margin: 0 0 0 4px;
                                        }
                                        label{ 
                                            font-family: var(--font-gopher--family);
                                            font-size: 14px;
                                            font-weight: 700;
                                            line-height: 100%;
                                            position: relative;
                                            padding:5px 0 5px 32px;
                                            color: #fff;
                                            margin:0 ;
                                            &:before{
                                                content:'';
                                                position: absolute;
                                                left:0;
                                                top:50%;
                                                background-size:100%;
                                                width: 24px; height: 24px;
                                                transform: translate(0, -50%);
                                                border: 2px solid  #fff;
                                                border-radius: 100%;
                                                background:  transparent;
                                            }
                                            &:after{
                                                content:'';
                                                position: absolute;
                                                left:5px;
                                                top:50%;
                                                background-size:100%;
                                                width: 14px; height: 14px;
                                                transform: translate(0, -50%);
                                                border-radius: 100%;
                                                background:  #fff;
                                                display: none;
                                            }
                                        }
                                        input:checked + label{
                                            &:after{
                                                display: block;
                                            }
                                        }
                                    }
                                }
                            }

                            .contact_radio_sidebyside_new_OuterCS{
                                margin-bottom:24px;
                                > label{
                                    font-family: var(--font-gopher--family);
                                    font-size: 16px;
                                    font-weight: 700;
                                    line-height: 100%;
                                    padding-bottom:16px;
                                    margin:0;
                                    display: block;
                                    &:after{ display: none; }
                                }
                                .radio-group{
                                    display: flex;
                                    flex-wrap: wrap;
                                    flex-direction: row;
                                    gap:16px;
                                    div{
                                        margin:0;
                                        input{ 
                                            opacity: 0;
                                            width: 24px;
                                            height: 24px;
                                            position: absolute;
                                            margin: 0 0 0 4px;
                                        }
                                        label{ 
                                            font-family: var(--font-gopher--family);
                                            font-size: 14px;
                                            font-weight: 700;
                                            line-height: 100%;
                                            position: relative;
                                            padding:5px 0 5px 32px;
                                            color: #fff;
                                            margin:0;
                                            &:before{
                                                content:'';
                                                position: absolute;
                                                left:0;
                                                top:50%;
                                                background-size:100%;
                                                width: 24px; height: 24px;
                                                transform: translate(0, -50%);
                                                border: 2px solid  #fff;
                                                border-radius: 100%;
                                                background:  transparent;
                                            }
                                            &:after{
                                                content:'';
                                                position: absolute;
                                                left:5px;
                                                top:50%;
                                                background-size:100%;
                                                width: 14px; height: 14px;
                                                transform: translate(0, -50%);
                                                border-radius: 100%;
                                                background:  #fff;
                                                display: none;
                                            }
                                        }
                                        input:checked + label{
                                            &:after{
                                                display: block;
                                            }
                                        }
                                    }
                                }
                            }

                            .contact_select_new_OuterCS{
                                > label{
                                    font-family: var(--font-gopher--family);
                                    font-size: 16px;
                                    font-weight: 700;
                                    line-height: 100%;
                                    padding-bottom:16px;
                                    margin:0;
                                    display: block;
                                    &:after{ display: none; }
                                }
                                .custom-dropdown-wrapper { position: relative; width: 100%; }
                                .cd-selected { cursor: pointer; transition: .35s; display: block;  padding: 13px 47px 13px 23px; 
                                    font-family: var(--font-gopher--family);
                                    font-size: 16px;
                                    font-weight: 700;
                                    line-height: 100%;
                                    border: 1px solid #282828;
                                    background: #FFF;
                                    color: #282828;
                                    min-height:44px;
                                    position: relative;
                                    &:after{
                                        content:'';
                                        position: absolute;
                                        right:23px;
                                        top:50%;
                                        background: url(contact_arrow.svg) no-repeat center center;
                                        width: 16px; height: 16px;
                                        transform: translate(0, -50%);
                                    }
                                    &.open{
                                        &:after{
                                            transform: translate(0, -50%) rotate(180deg);
                                        }
                                    }
                                }
                                .cd-options { display: none; width: 100%; position:absolute; background: #fff; border: 1px solid #282828; border-top: none; border-bottom: none; margin: 0; padding: 0; list-style: none; z-index: 1; }
                                .cd-options.open { display: block; }
                                .cd-options li { padding: 13px 47px 13px 23px; 
                                    font-family: var(--font-gopher--family);
                                    font-size: 16px;
                                    font-weight: 700;
                                    color: #282828;
                                    line-height: 100%; cursor: pointer; border-bottom: 1px solid #282828; }
                                .cd-options li.active { display: none; }
                            }
                            .submit_button_new{
                                margin:0;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media(min-width:0px) and (max-width:749px){

    .Creators_form_main_new{
        .Creators_form_inner_new{
            .Creators_form_sides_new{display:block;
                .Creators_form_sides_mainleft_new{ width:100%;
                    .Creators_form_sides_innerleft_new{
                        .Creators_form_sides_innerleft_mainimage_new{
                            .Creators_form_sides_innerleft_innerimage_new{ width:162px;  padding-bottom:160px; }
                        }
                    }
                }
                .Creators_form_sides_mainright_new{ width:100%; padding: 16px 20px 0px 20px; text-align:center;
                    .Creators_form_sides_innerright_new{
                        .Creators_form_sides_innerright_mainboth_new{
                            .Creators_form_sides_innerright_innerboth_new{
                                .Creators_form_sides_innerright_innerboth_title_new{
                                    max-width:335px; margin: auto;
                                    *{ 
                                        br{ display: none; }
                                    }
                                }
                                .Creators_form_sides_innerright_innerboth_infos_new{padding:16px 0px 0px 0px; font-size: 18px; line-height: 120%; max-width:300px; margin: auto;
                                    br{ display: none; }
                                }
                            }
                        }
                        .Creators_form_sides_innerright_mainform_new{
                            padding: 32px 0 0 0;
                            .Creators_form_sides_innerright_innerform_new{
                                text-align: left;
                                .contact_textarea_new_OuterCS{
                                    margin-bottom: 32px;
                                }

                                .contact_accept_new_OuterCS{
                                    margin-bottom:16px;
                                }

                                .element-group.cs-width-50{
                                    width:100%;
                                }

                                .submit_button_new{ 
                                    width:100%; 
                                    .submit-button {
                                        margin: 0;
                                        width: 100%;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@media(min-width:750px) and (max-width:989px){
    
    .Creators_form_main_new{
        .Creators_form_inner_new{
            .Creators_form_sides_new{
                .Creators_form_sides_mainright_new{ padding: 0px 20px;
                    .Creators_form_sides_innerright_new{
                        .Creators_form_sides_innerright_mainboth_new{
                            .Creators_form_sides_innerright_innerboth_new{
                                .Creators_form_sides_innerright_innerboth_title_new{
                                    *{ font-size:44px; }
                                }
                                .Creators_form_sides_innerright_innerboth_infos_new{
                                    padding:24px 0px 0 0; font-size: 17px; max-width:100%;
                                    br{ display: none; }
                                }
                            }
                        }
                        .Creators_form_sides_innerright_mainform_new{
                            padding: 24px 0 0 0;
                            .Creators_form_sides_innerright_innerform_new{}
                        }
                    }
                }
            }
        }
    }
}
@media(min-width:990px) and (max-width:1439px){
    .Creators_form_main_new{
        .Creators_form_inner_new{
            .Creators_form_sides_new{
                .Creators_form_sides_mainright_new{ padding: 0px 20px 0px 30px;
                    .Creators_form_sides_innerright_new{
                        .Creators_form_sides_innerright_mainboth_new{
                            .Creators_form_sides_innerright_innerboth_new{
                                .Creators_form_sides_innerright_innerboth_title_new{
                                    *{ font-size:62px; }
                                }
                                .Creators_form_sides_innerright_innerboth_infos_new{
                                    padding:32px 0px 0 0; font-size: 22px;
                                    br{ display: none; }
                                }
                            }
                        }
                        .Creators_form_sides_innerright_mainform_new{
                            padding: 32px 0 0 0;
                            .Creators_form_sides_innerright_innerform_new{}
                        }
                    }
                }
            }
        }
    }   
}