body {
    background-color: white;
}

header {
    background-image: url("../images/base/light_header.svg");
    background-size: cover;
}

header a:hover {
    color: #024597;
}

.sous-menu:hover {
    background-color: #D87803;
}

#menuMobile {
    background-color: #D87803;
}

footer {
    background: url("../images/base/light_footer.svg");
    background-size: cover;
}

.num-tel {
    text-shadow: 2px 0 #000000, -2px 0 #000, 0 2px #000, 0 -2px #000, 
                1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}

p {
    color: #00234E;
}

.content p {
    color: white;
}

.intro {
    background-color: #024597;
}

h1, h2 {
    color: #024597;
}

h3 {
    color: #024597;
}

button {
    color: white;
    background-color: #024597;
}

.dialogue {
    background-color:#00234E;
}

.dialogue p {
    color: white;
}

.dialogue strong {
    color:#D87803;
}

@media screen and (min-width: 768px) {
    .presentation {
        background-image: url("../images/home/illu3.svg");
        background-size: 2800px 600px;
        background-position: bottom;
        background-repeat: no-repeat;
    }

    .offres {
        background-image: url("../images/home/illu11.svg");
        background-size: 2800px 550px;
        background-position: top;
        background-repeat: no-repeat;
    }
}

@media screen and (min-width: 2800px) {
    .offres, .presentation {
        background-size: 5600px 800px;
    }

    .presentation {
        height: 800px;
    }

    .offres {
        height: 1500px;
    }
}

.img-insta {
    content: url("../images/base/light_instagram.png");
}

.img-linke {
    content: url("../images/base/light_linkedin.png");
}

.img-ytb {
    content: url("../images/base/light_ytb.png");
}

@media screen and (min-width: 768px) {
    h2.title-separator {
        background-color: #E3A04E;
    }
}

@media screen and (min-width: 768px) {
    .banner-wow {
        background-image: url("../images/home/light_wow.svg");
        background-size: 2800px 550px;
        background-position: center;
        background-repeat: no-repeat;
    }

    .banner-offre {
        background-image: url("../images/offres/vague-light.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 768px) {
    .banner-wow {
        background-image: url("../images/home/mini-vague-light.svg");
        background-size: cover;
        background-position: center;
    }
    
}

@media screen and (min-width: 2800px) {
    .banner-wow {
        background-size: 5600px 550px;
    }
}

@media screen and (min-width: 1024px) {
    .banner-offre {
        background-image: url("../images/offres/vague-light.png");
        background-size: 1536px 750px;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@media screen and (min-width: 1526px) {
    .banner-offre {
        background-image: url("../images/offres/vague-light.png");
        background-size: 2000px 750px;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@media screen and (min-width: 2000px) {
    .banner-offre {
        background-image: url("../images/offres/vague-light.png");
        background-size: 2500px 750px;
        background-position: center;
        background-repeat: no-repeat;
    }
}

.bandeau-radio {
    background-color:#E3A04E;
}

.option label {
    color: #00234E;
}

.devis-button {
    background-color:#024597;
}

form {
    background-color: #024597;
    width: 100%;
}

form input {
    background-color: white;
    color: #024597 !important;
    border-radius: 50px;
    line-height: 40px;
    height: 40px;
}

@media screen and (min-width: 768px) {
    form {
        width: 95%;
    }
}

textarea {
    background-color: white;
    color: #024597 !important;
    border-radius: 50px;
}

label {
    color: white;
    font-weight: 700;
    font-size: 20px;
    padding-left: 2rem;
}

.check {
    border-color: #024597 !important;
}

.check:checked {
    background: url("../images/home/light-checked.png");
    background-size: contain;
}

.bubble {
    background-color: #024597;
}

.linear {
    background: #024597;
}

.offre-bouton {
    background-color: #E3A04E;
}

.form-login label {
    color: #00234E;
}

.form-login input {
    border: 1px solid #024597;
}

strong {
    color: #024597;
}

.title-domain {
    color: #D87803;
}

.bubble p,
.linear p {
    color: white;
}

#title-mention {
    color: #024597;
}

#mentionlegales a {
    color: #024597;
}

.jobs p, 
.offres p {
    color: white;
}

.carrousel-logos {
    border-radius: 10px;
}

.carrousel-logos::-webkit-scrollbar {
    width: 12px;
}

.carrousel-logos::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #024597; 
    border-radius: 10px;
}

.carrousel-logos::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #024597; 
}

.logo-kappalys {
    content: url("../images/light-logo-kappalys.svg");
}

.job-content strong {
    color: #024597;
}

.opinion strong {
    color: white;
}

.opinion {
    background-color: #024597; 
}

.opinion p {
    color: white;
}

.opinion span {
    color: #E3A04E;
}

h4.quote {
    color: #024597;
}

.plan a {
    color: #00234E;
}

.pastille-active {
    background-color: #E3A04E;
    color: #024597; 
}

.pastille{
    background-color: #024597; 
    color: #E3A04E;
}

.auth-error {
    color: #024597;
}

.title-securite {
    color: #D87803;
}

.titre-secur h2 {
    color: #00234E;
}

.titre-secur h3 {
    color: #024597;
}

.dash-img {
    content: url("../images/jobs/dash-gauche-light.webp");
}

.dash-img-droite {
    content: url("../images/jobs/dash-droite-light.webp");
}

#gif-asteroid {
    content: url("../images/gifs/light-asteroid.gif");
}

#gif-meteor {
    content: url("../images/gifs/light-meteor.gif");
}

#block-detail a {
    color: white;
}

#block-detail p {
    color: white;
}

#block-story-desc h2 {
    color: #00234E;
}

#block-story-desc p {
    color: #00234E;
}

.job-titles h1 {
    color: #00234E;
}

.job-titles h3 {
    color: #024597;
}

/* Fade IN image job */
.img-job {
    animation: appear 3s ease;
    animation-fill-mode: forwards;
}

@keyframes appear {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.bg-societe {
    background-color: white;
}

.container-iso {
    background-color: #00234E;
}