///////////////////////////////////////////////////////////////
// Device: Desktop
///////////////////////////////////////////////////////////////

.contact {
    margin: 40px 0;
}

.contact-title {
    margin-bottom: 10px;
    text-align: center;
    font-family: "lucien-light";
    font-size: 2.2rem;
}

.contact-subtitle {
    margin-bottom: 70px;
    text-align: center;
    font-size: 1.1rem;
}

.contact-container {
    @include outer-container;
}

.contact-content {
    @include span-columns(10);
    @include shift(1);
}

.contact-form {
    @include span-columns(5 of 10);

    .form-group {
        margin-bottom: 25px;

        &:nth-of-type(2) {
            float: left;
            width: 46%;
        }
        &:nth-of-type(3) {
            margin-left: 50%;
            width: 50%;
        }
        &[data-id="submit"] {
            @include span-columns(2 of 5);
        }
        &[data-id="casinos"], &[data-id="card"], &[data-id="optoutReasons"] {
            display: none;
        }
    }
}

/* confirmation */
.contact-confirmation {
    @include span-columns(5 of 10);
    display: none;
    margin-top: 15%;
    .contact-confirmation-wrapper {
        border: 1px solid $color-golden;
        padding: 40px;
    }
    p {
        text-align: center;
        font-family: "lucien-regular";
        font-size: 1.2rem;
        display: block;
        width: 80%;
        margin: 0 auto;
    }
}

.contact-form[data-object="information"] {
    .form-group[data-id="casinos"] {
        display: block;
    }
}

.contact-form[data-object="request"] {
    .form-group[data-id="casinos"] {
        display: block;
    }
}

.contact-form[data-object="premium"] {
    .form-group[data-id="casinos"] {
        display: block;
    }
    .form-group[data-id="card"] {
        display: block;
    }
}

.contact-form[data-object="newsletterOptout"] {
    //.form-group[data-id="casinos"] {
    //    display: block;
    //}
    .form-group[data-id="optoutReasons"] {
        display: block;
    }
}

.contact-offre {
    @include span-columns(5 of 10);
}

.contact-offre-visuel {
    img {
        display: block;
        width: 100%;
    }
}

.contact-offre-infos {
    background: $color-grey-darker;
    border-top: 2px solid $color-golden;
    padding: 20px;
}

.contact-offre-infos-title {
    color: $color-golden;
    font-family: lucien-light, sans-serif;
    font-size: 1.6rem;
    margin-bottom: 20px;
    text-align: center;
}

.contact-offre-infos-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contact-offre-infos-content-text {
    color: #FFFFFF;
    flex-basis: 0;
    flex-grow: 1.8;
    font-size: 1rem;
    font-family: "Georgia";
}

.contact-offre-infos-content-button {
    flex-basis: 0;
    flex-grow: 1;
    font-family: lucien-book, sans-serif;
    font-size: 1rem !important;
}

.form-message-jobs {
    display: none;
    margin-bottom: 20px;
    font-size: 1rem;
}

///////////////////////////////////////////////////////////////
// Device: Tablet
///////////////////////////////////////////////////////////////

@include tablet-landscape-and-below {
    .contact-form {
        @include span-columns(12);
    }
    .contact-offre {
        @include span-columns(12);

        margin: 20px 0;
    }
    .contact-offre-infos-content-text {
        flex-grow: 1.5;
    }
}

///////////////////////////////////////////////////////////////
// Device: Mobile
///////////////////////////////////////////////////////////////

@include mobile-landscape-and-below {
    .contact {
        margin-bottom: 0;
    }
    .contact-content {
        float: none;
        margin: 0;
        width: 100%;
    }
    .contact-form {
        float: none;
        padding: 0 20px;

        .form-group {
            &:nth-of-type(1) {
                .form-inline {
                    margin-left: 0;

                    &:first-child {
                        display: block;
                        margin-bottom: 10px;
                        width: 100%;
                    }
                    &:nth-child(3) {
                        margin-left: 20px;
                    }
                }
            }
            &:nth-of-type(2) {
                float: none;
                width: 100%;
            }
            &:nth-of-type(3) {
                margin-left: 0;
                width: 100%;
            }
            &[data-id="submit"] {
                float: none;
                width: 100%;
            }
        }
    }
    .contact-offre-infos-content {
        display: block;
    }
    .contact-offre-infos-content-text {
        margin-bottom: 20px;
        text-align: center;
    }
}