/* media query */

@media (min-width:769px) {
    html {
        font-size: .5008333333333333vw;
        /* font-size: .4508333333333333vw; */
    }
}

@media (max-width:768px) {
    html {
        font-size: 1.302083333333333vw;
        font-size: 2.5037809647979139504563233376793vw;
    }
    .desk {
        display: none !important;
    }
    .mob {
        display: block !important;
    }
    .centerPadding_7 {
        width: 35.4rem;
    }
    .centerPadding_8 {
        width: 35.4em;
    }
    .centerPadding_9 {
        width: 100%;
    }
    .centerPadding_10 {
        width: 35.4rem;
    }
    /* header */
    .heroHeader {
        flex-direction: column;
        padding-top: 1rem;
        height: 100%;
    }
    .blc_LogoHeader {
        width: 19.93rem;
    }
    .logo_welfarm {
        width: 7.929rem;
    }
    .logo_la_hardonnerie {
        width: 8.313rem;
    }
    .pr_animal_btn {
        display: none;
    }
    /* fin header */
    /* hero */
    .hero {
        background: url("../images/back_header_mb.jpg") center/cover no-repeat;
        height: calc(100vh - 6rem);
    }
    .heroCtas {
        flex-direction: column;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 5.3rem;
        width: max-content;
    }
    .btnHero_Fixed {
        display: flex;
        position: fixed;
        left: 50%;
        transform: translateX(-50%) !important;
        bottom: 2rem;
        width: max-content;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
        -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
        z-index: 3;
    }
    .heroContent {
        bottom: 19.5rem;
    }
    .heroTitle {
        /* width: 34.055rem; */
        width: 32.055rem;
    }
    .heroSubtitle {
        font-size: 2.2rem;
        text-transform: uppercase;
        margin-top: 0;
        margin-bottom: 0rem;
    }
    .blc_vectors {
        /* width: 35.4rem; */
        width: 100%;
    }
    .oreilles {
        width: 3.985rem;
        left: -3rem;
        top: 5rem;
    }
    .queue {
        width: 2.462rem;
        right: -1.4rem;
        top: 8.9rem;
    }
    .herbe_g {
        width: 17.34rem;
        left: -4rem;
        bottom: -13.2rem;
    }
    .herbe_d {
        width: 15.93rem;
        right: -4rem;
        bottom: -13.5rem;
    }
    .heroArrow {
        bottom: 16rem;
    }
    /* fin hero */
    /* animals */
    .animals {
        padding: 4rem 0;
    }
    .vague {
        top: -5.9rem;
        z-index: 1;
    }
    .blc_animals {
        overflow: hidden;
    }
    .blc_animals {
        width: 100%;
    }
    .animalsSlider {
        margin-left: 4.8rem;
        width: 30.2rem !important;
    }
    .animalsSlider .slick-list {
        overflow: visible;
    }
    .animalsSlider .slick-slide {
        margin: 0 1rem;
    }
    .animalItem {
        display: flex !important;
        flex-direction: column;
    }
    .rightArrows {
        right: 2rem;
    }
    .leftArrows {
        left: 3rem;
        z-index: 1;
    }
    .arrows_animal {
        width: 2.397rem;
        top: 42%;
    }
    .txt_m_avant {
        order: 1;
    }
    .pic_animl {
        order: 2;
    }
    .animalItem .btnHero {
        margin: 2rem auto;
        font-size: 1.6rem;
        line-height: 1.3;
        /* width: 100%; */
    }
    .btnHero {
        order: 4;
    }
    .btnHero:hover {
        transform: none;
    }
    .animalItem .txt_m_avant text {
        font-size: 3rem;
    }
    .sous_titre_animal {
        order: 3;
        font-size: 1.8rem;
        display: inline-block;
        margin-top: 2rem;
    }
    /* fin animals */
    /* peace */
    .blc_peace {
        width: 35.4rem;
        flex-direction: column;
    }
    .blc_peace .sectionTitle {
        text-align: center;
    }
    .pic_peace {
        width: 100%;
        height: 20rem;
        /* video */
        height: 40rem;
        /* image */
    }
    .pic_peace iframe,
    .pic_peace video {
        min-height: 20.1rem;
    }
    /* .cadre_video {
        width: 103% !important;
        height: 106%;
        left: -0.3rem;
    } */
    .onMob {
        display: block;
    }
    .onDesk {
        display: none;
    }
    .peaceText {
        width: 100%;
    }
    .peaceText p {
        font-size: 1.8rem;
    }
    /* fin peace */
    /* .offers */
    .offers {
        padding: 4rem 0;
        overflow: hidden;
    }
    #parrainerlahardonnerie {
        padding-top: 3rem;
    }
    #parrainerunanimal {
        padding-top: 3rem;
    }
    .offers .sectionTitle {
        width: 35.4rem;
        margin: 0 auto;
    }
    .fleche_dots {
        display: none;
    }
    .offerCard.lahardonnerie {
        width: 35.4rem;
        margin: 4rem auto 6rem;
        padding: 2rem 2rem 3rem;
    }
    .offerCard.lahardonnerie .top_offerCard h3 {
        font-size: 2.2rem;
    }
    .offerCard.lahardonnerie .infos_don .textNoir {
        font-size: 1.8rem;
    }
    .offersGrid {
        margin-left: 2.8rem;
        /* margin-right: auto; */
        width: 35.4rem !important;
    }
    .offersGrid .slick-slide {
        /* padding: 0 0.5rem; */
        padding-left: 1.3rem;
        padding-right: 1.3rem;
        margin: 0 1rem;
    }
    .offersGrid .slick-list {
        /* width: 100%; */
        overflow: visible;
    }
    .infos_don .textNoir {
        font-size: 1.8rem;
    }
    .offerCard {
        width: 34.4rem !important;
        height: auto;
        border-width: 0.5rem;
        padding: 4rem 2.1rem 5rem;
        /* margin: 0 2rem; */
    }
    .top_offerCard {
        font-size: 1.8rem;
        border-bottom-width: 0.5rem;
    }
    .offerCard:hover {
        transform: translateY(0);
    }
    .offerCard .btnHero:hover {
        transform: none;
    }
    .top_offerCard h3 {
        font-size: 2.2rem;
    }
    .lire_plus_offers {
        display: block;
        font-size: 1.8rem;
        font-weight: 700;
        text-decoration: underline;
        cursor: pointer;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .bottom_offerCard {
        display: none;
        text-align: left;
        margin-top: 3rem;
        margin-bottom: 2rem;
    }
    .offerCard .btnHero {
        position: relative;
        left: unset;
        bottom: unset;
        transform: none;
        font-size: 1.6rem;
    }
    .textSection {
        font-size: 1.8rem;
        width: 35.4rem;
        margin: 3rem auto 0;
    }
    .blc_arrow_offers {
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .left_arrow_offers,
    .right_arrow_offers {
        width: 3.785rem;
    }
    .right_arrow_offers img,
    .left_arrow_offers img {
        width: 100%;
    }
    .rightArrows_offers {
        transform: scaleX(-1);
    }
    /* fin .offers */
    /* .why */
    .why {
        padding-left: 0;
        background-image: var(--bg-mobile);
        background-color: var(--color-green-oko-contrast);
        background-position-y: top;
        height: auto;
    }
    .vector-coeur-milieu {
        top: 18rem;
        right: 10rem;
        width: 3.511rem;
    }
    .vector-coeur-haut {
        top: 11rem;
        right: 9rem;
        width: 5.28rem;
    }
    .vector-coeur-bas {
        top: 23rem;
        right: 5rem;
        width: 5.28rem;
    }
    .whyContainer {
        background: url("../images/why_vagues_mob.png") center/cover no-repeat;
        margin: 0 auto;
        /* width: 36.3rem;
        height: 69.3rem; */
        width: 37.3rem;
        height: 71.3rem;
        padding: 2.5rem 0;
        margin-top: 40rem;
    }
    .whyContainer .sectionTitle {
        margin-bottom: 0;
    }
    .whyList {
        width: 29.3rem;
        margin: 3rem auto 0 auto;
    }
    .sectionTitle {
        font-size: 2.2rem;
        line-height: 1.4;
    }
    .whyItemTitle {
        font-size: 1.8rem;
    }
    .whyItem p {
        font-size: 1.8rem;
    }
    /* fin .why */
    /* .faq */
    .faq {
        padding: 5rem 0 9rem;
    }
    .faqQuestion {
        font-size: 1.8rem;
        padding-right: 2.5rem;
    }
    .faqReponse {
        padding-right: 2rem;
    }
    /* fin .faq */
    /* footer */
    .footerTop {
        flex-direction: column;
    }
    .logo_footer {
        order: 1;
    }
    .link_footer {
        order: 4;
    }
    .footerSocial {
        order: 2;
    }
    .footerBadge {
        order: 3;
        width: 100%;
    }
    .link_footer {
        width: 100%;
    }
    .menu-bas-depage {
        justify-content: center;
    }
    .menu-bas-depage li a {
        font-size: 1.5rem;
        font-weight: 500;
        margin-right: 1.5rem;
    }
    .menu-bas-depage li:last-child a {
        margin-right: 0;
    }
    .menu-bas-depage li::after {
        right: 0.68rem;
        height: 64%;
    }
    .footerBadge p {
        font-weight: 100;
        text-align: left;
        width: 21.6rem;
    }
    /* fin footer */
    /*  single animal */
    .single-animaux .heroCtas {
        display: none;
    }
    .singleAnimal_container,
    .singleAnimal_right {
        flex-direction: column;
    }
    .singleAnimal_left,
    .singleAnimal_right,
    .details_animal,
    .parrainCard,
    .liste_temoignages {
        width: 35.4rem;
    }
    .singleAnimal {
        padding: 4rem 0 6rem;
    }
    .retour {
        margin-left: 0;
        font-size: 2rem;
        margin-bottom: 5rem;
        width: 13rem;
    }
    .retour img {
        width: 3.2rem;
        margin-right: 1rem;
    }
    .animalTitle {
        font-size: 3.6rem;
        text-align: center;
    }
    .animalSubtitle {
        font-size: 2rem;
        text-align: center;
        margin-top: 1.5rem;
    }
    .direction_blc {
        bottom: 1rem;
    }
    .conteneur_animalSlider_blc .slick-dots li {
        margin: 0 0.5rem;
    }
    .left_arr_singl,
    .right_arr_singl {
        width: 3.785rem;
    }
    .conteneur_animalSlider_blc {
        height: 34.8rem;
        border-radius: 4rem;
        border-top-left-radius: 4rem;
        border-bottom-right-radius: 4rem;
        border-bottom-left-radius: 4rem;
    }
    .animalMeta {
        font-size: 2rem;
        width: 100%;
    }
    .animalDescription,
    .animalStory {
        font-size: 1.8rem;
    }
    .animalStoryTitle {
        font-size: 2.4rem;
        text-align: center;
    }
    .parrainLeft {
        position: relative;
        top: unset;
        left: unset;
        transform: none;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }
    .single-animaux .priceBox {
        width: 10.733rem;
        height: 9.9rem;
        border-radius: 2rem;
        border-top-right-radius: 2rem;
        border-bottom-right-radius: 0rem;
        border-bottom-left-radius: 0rem;
        border-width: 0.5rem;
        border-right-width: 0.5rem;
        border-bottom-width: 0;
    }
    .single-animaux .priceBox .icon_offerCard {
        margin-bottom: 0.3rem;
    }
    .single-animaux .parrainRight {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-width: 0.5rem;
        padding: 4rem 1.8rem 4rem;
    }
    .single-animaux .parrainTitle {
        font-size: 2.4rem;
    }
    .single-animaux .parrainDesc {
        border-bottom-width: 0.5rem;
        font-size: 2.8rem;
        padding: 0 0rem 2rem 0;
        line-height: 1;
        margin-top: 1rem;
    }
    .sml_sz_on_single {
        font-size: 2rem;
    }
    .single-animaux .parrainDesc .textNoir {
        font-size: 1.6rem;
    }
    .single-animaux .parrainCard .underline_single_pg {
        font-size: 1.8rem;
        display: inline-block;
        margin-bottom: 2rem;
    }
    .single-animaux .parrainSub {
        font-size: 1.8rem;
    }
    .single-animaux .parrainText {
        text-align: left;
    }
    .single-animaux .parrainContent .btnHero {
        width: 100%;
        line-height: 1;
    }
    .liste_temoignages {
        flex-direction: column;
    }
    .fond_vert_forme {
        top: -1.6rem;
    }
    .temoignages {
        padding: 5rem 0 2rem;
    }
    .temoignages h3 {
        font-size: 2.4rem;
        margin-bottom: 3rem;
    }
    .item_temoignages {
        width: 100%;
        margin-bottom: 2rem;
        padding: 2.5rem;
    }
    .item_temoignages p {
        font-size: 1.8rem;
        margin: 0;
    }
    .name_temoignages {
        font-size: 1.8rem;
        margin-top: 1.5rem;
        display: block;
    }
    /* fin single animal */
}

@media (max-width:1920px) and (min-width:1024px) and (max-height:964px) {
    .heroContent {
        transform: translateX(-50%) scale(0.8);
        bottom: 4rem;
    }
    .centerPadding_10 {
        width: 193.215rem;
    }
    .blc_LogoHeader {
        scale: 0.75;
        margin-top: -2rem;
    }
    .heroTitle {
        margin: 0 auto 4rem;
    }
    .oreilles {
        top: -4rem;
    }
    .queue {
        top: 9rem;
    }
}

@media (max-width:320px) {}