/* Theme Name: MATERNE Author: DAVID SIMIDE Author URI: http://yelloww.fr/ Description: Thème développé spécialement pour MATERNE Version: 1.0 --------------------------------------- Author: Because - EMMANUELLE BERNARD Author URI: https://www.because.fr/ Description: Mise à jour du thème Version: 2.0 Description: Too good to go Version: 2.1 Tags: MATERNE */ /* FONTS */ @font-face { font-family: 'Kronika'; src: url('css/fonts/Kronika.eot'); src: url('css/fonts/Kronika.eot?#iefix') format('embedded-opentype'), url('css/fonts/Kronika.woff2') format('woff2'), url('css/fonts/Kronika.woff') format('woff'), url('css/fonts/Kronika.ttf') format('truetype'), url('css/fonts/Kronika.svg#Kronika') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Kronika'; src: url('css/fonts/Kronika.eot'); src: url('css/fonts/Kronika.eot?#iefix') format('embedded-opentype'), url('css/fonts/Kronika.woff2') format('woff2'), url('css/fonts/Kronika.woff') format('woff'), url('css/fonts/Kronika.ttf') format('truetype'), url('css/fonts/Kronika.svg#Kronika') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Bushcraft'; src: url('css/fonts/textured2-webfont.eot'); src: url('css/fonts/textured2-webfont.eot?#iefix') format('embedded-opentype'), url('css/fonts/textured2-webfont.woff2') format('woff2'), url('css/fonts/textured2-webfont.woff') format('woff'), url('css/fonts/textured2-webfont.ttf') format('truetype'), url('css/fonts/textured2-webfont.svg#textured2-webfont') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Bushcraft'; src: url('css/fonts/textured2-webfont.eot'); src: url('css/fonts/textured2-webfont.eot?#iefix') format('embedded-opentype'), url('css/fonts/textured2-webfont.woff2') format('woff2'), url('css/fonts/textured2-webfont.woff') format('woff'), url('css/fonts/textured2-webfont.ttf') format('truetype'), url('css/fonts/textured2-webfont.svg#textured2-webfont') format('svg'); font-weight: bold; font-style: normal; } /* GLOBAL */ *{ margin:0px; padding: 0px;box-sizing: border-box; -webkit-font-smoothing: antialiased;} body{ font-family: "Montserrat", arial, sans-serif; font-size: 14px; color: #0D3F30; background: #FEF4F0; } a{ color: inherit;} p{ line-height: 1.7em;} .clear{ clear:both;} .inner{ z-index: 1; width:calc(100% - 16px); max-width:1350px; margin:auto; position:relative;} @media screen and (max-width: 480px) { .inner{ max-width: 360px;} } .innerSmall{ z-index: 1; width:calc(100% - 16px); max-width:1070px; margin:auto; position:relative;} .innerXSmall{ z-index: 1; width:calc(100% - 16px); max-width:980px; margin:auto; position:relative;} .innerXXSmall{ z-index: 1; width:calc(100% - 16px); max-width:800px; margin:auto; position:relative;} .loader{ background:url(images/loader.svg) center no-repeat; background-size:contain; height: 60px; margin: 30px 0; display: none;} .loaderTop{ position: absolute; top: 0; left: 0; width: 100%;} .mobile-elem{ display: none !important;} .desktop-elem{ display: block;} form *:focus { outline:none; } .justadded{opacity: 0;} #bodyContainer{ overflow: hidden; } /* HEADER */ header{background: #ffffff; border-top: 5px solid #d23b44; position: relative;} #main_nav{ padding: 30px 0 50px 0; width: calc(100% - 120px); } #main_nav ul{ display: flex; list-style: none; justify-content: space-between;font-weight: 500; } .desktop #main_nav ul li:hover, #main_nav ul li.current_page_item,#main_nav ul li.current_page_parent,#main_nav ul li.current-menu-ancestor,#main_nav ul li.current-menu-item, #main_nav ul li.current-menu-parent{ font-weight: bold; color:#d23540;} #main_nav ul li a{ text-decoration: none; text-transform: uppercase; } #siteLogo{ position: absolute; bottom: -50px; left: 50%; margin-left: -121px;} #hamburger{display: none;} .rsheadLinks{ width: 120px; text-align: right; float: right; padding: 30px 0 50px 0;} .rsheadLinks a{ transition: all .3s ease; display: inline-block; height: 18px; width: 18px; margin-left: 6px;background-size: contain;} .desktop .rsheadLinks a:hover{ transform: scale(1.2);} .rsheadLinks a.deezer{ background-image: url(images/logo-deezer.png);} .rsheadLinks a.facebook{ background-image: url(images/logo-facebook.png);} .rsheadLinks a.insta{ background-image: url(images/logo-instagram.png);} /* FOOTER */ footer{ background: #0D3F30; padding-top: 40px; padding-bottom: 120px;} #footlogo{ display: block; margin: 0px auto 30px auto; width: 130px; height: auto; } footer #footmenu{ border-top: solid 1px rgba(255,255,255,.3); border-bottom: solid 1px rgba(255,255,255,.3); margin-bottom: 20px;} #footmenu ul{ display: flex; list-style: none; width: 100%; justify-content: space-between; } #footmenu ul li a{ text-decoration: none; text-transform: uppercase; color: #ffffff; display: inline-block; padding: 20px 0;} .desktop #footmenu ul li a:hover{ text-decoration: underline;} #footBaseline{ color: #ffffff; font-size: 20px; text-align: center; text-transform: uppercase; font-weight: 100; font-family: "Montserrat";} #footBaseline a{ text-decoration: none;} #footBaseline a:hover{ font-weight: normal;} #content{ padding-top: 50px; width: 100%;} .cta{ text-decoration: none; background-color:#ECB2A3; border: solid 4px #ECB2A3; transition: all .3s ease; margin-top: 30px;font-size: 16px; font-weight: 600; text-align: center; padding: 6px 12px; min-width: 140px; border-radius: 40px; display: inline-block; color: #ffffff;} .desktop .cta:hover{ color:#ECB2A3; background-color:#ffffff;} /* RECETTE FICHE */ .craftLeft, .craftRight{ position: relative;} .craftRight:before{ z-index: -1; content: " "; display: block; position: absolute; background-image: url(images/craft-right.png); width: 1480px; height: 655px; background-position: center; background-size: cover; left: 50%; top: -30px; margin-left: -740px;} .craftLeft:before{ z-index: -1; content: " "; display: block; position: absolute; background-image: url(images/craft-left.png); width: 1480px; height: 655px; background-position: center; background-size: cover; left: 50%; top: -30px; margin-left: -740px;} .bigHeading{ text-align: center;} .bigHeading h2{ color: #0D3F30; font-size: 1em; line-height: 1em; font-family: "Lilita One"; text-transform: uppercase; position: relative; display: inline-block; padding-top: 85px; margin-bottom: -110px;} .bigHeading h2 span{ font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 0.58em; line-height: 100px; position: absolute; left: 50px; top: 0px;} .introText{ font-weight: 500; line-height: 1.2em; margin: 50px auto 30px auto; width: 90%; display: block;} .bigHeadingMM{ position: relative; display: flex; margin-top: 40px;} .bigHeadingMM .left{ flex: 1; position: relative;} .bigHeadingMM .left h2{ width: 100%; text-align: right; padding-right: 110px; padding-top: 0px; margin-top: 0px; position: absolute; top: 47%; transform: translateY(-50%); right: 0px; color: #0D3F30; font-size: 131px; line-height: 1em; text-transform: uppercase; font-family: "Lilita One"; } .bigHeadingMM .left h2 span{ font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 0.24em; line-height: 45px; position: absolute; right: 0px; padding-right: 115px; top: 102%; transform: translateY(-50%); } .bigHeadingMM .left h2 sup.reg{ font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 0.24em; line-height: 45px; position: absolute; /*right: 90px;*/ top: 0px; } .bigHeadingMM .logo{ flex: 1; position: absolute; left: 50%; margin-left: -98px; top: 50%; margin-top: -98px; z-index: 2;} .bigHeadingMM .MMbanner{ width: 50%; height: 0px; padding-top: 32%; border: solid 10px #ffffff; position: relative; z-index: 1;} .bigHeadingMM .MMbanner .swiper-container{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .bigHeadingMM .MMbanner .swiper-container .swiper-slide{ height: 100%; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;} .bigHeadingMM .MMbanner .swiper-container .swiper-slide .panneau{ background-color: rgba(255,255,255,.8); background-image: url(images/logo-M.png); background-repeat: no-repeat; background-size: contain; background-position: left; position: absolute; bottom: 15px; right: -45px; text-align: center; min-width: 300px; padding: 6px 55px; border-radius: 50px;} .bigHeadingMM .MMbanner .swiper-container .swiper-slide .panneau p{ display: block; letter-spacing: .5px;line-height:20px; font-size: 12px; text-transform: uppercase; font-weight: bold; color: #0D3F30; } .bigHeadingMM .MMbanner .swiper-container .swiper-slide .panneau p span{ background: #0D3F30; color: #ffffff; padding: 3px 15px;} .bigHeadingMM .MMbanner .swiper-container .swiper-pagination{ text-align: left; padding-left: 10px; bottom:10px;} .bigHeadingMM .MMbanner .swiper-container .swiper-pagination .swiper-pagination-bullet{ margin: 0 2px; background: #ffffff; opacity: .8;} .bigHeadingMM .MMbanner .swiper-container .swiper-pagination .swiper-pagination-bullet-active{ background: #ECB2A3;} .bigHeadingMM .MMbanner .swiper-container .swiper-slide a{ height: 100%; width: 100%; display: block;} .catNav{ padding: 30px 0; width: 100%; position: relative; z-index: 2;} .catNav .catNavList{ text-align: center;} .catNav .catNavList a{ margin: 5px 3px; position: relative; display: inline-block; text-decoration: none; background: #ffffff; color: #ECB2A3; text-transform: uppercase; padding: 6px 12px;; border-radius: 20px;} .catNav .catNavList a:hover{ background-color: #ECB2A3; color: #ffffff;} .catNav .catNavList a.on{ background-color: #ECB2A3; color: #ffffff; font-weight: bold;} .catNav .catNavList a.on:after{ content:" "; display: block; height: 10px; width: 10px; transform: rotate(45deg); background: #ECB2A3; color: #ffffff; position: absolute; bottom: -5px; left: 50%; margin-left: -5px;} .articleContent{ font-weight: 500; display: flex; padding: 100px 0; } .articleContent::after{ top: -150px;} .articleContent .demi{ position: relative;} .articleContent .demi:first-child{ padding: 0 40px; } .articleContent .visuPrincipal{ border: solid 10px #ffffff; position: relative;} .articleContent .visuPrincipal:before{ top: -90px; left: -63px;z-index: 2; content: " "; display: block; position: absolute; background-image: url(images/grande-feuille-recette.png); height: 97px; width: 56px;} .articleContent .visuPrincipal:after{ bottom: -60px; right: -40px; z-index: 2; content: " "; display: block; position: absolute; background-image: url(images/petite-feuille-recette.png); height: 45px; width: 23px;} .articleContent .visuPrincipal .fruits{position: absolute; left: -100px; bottom: -130px; width: 280px; height: auto;} .articleContent .visuPrincipal img{ display: block;} .articleContent .visuPrincipal.noleaf:after, .articleContent .visuPrincipal.noleaf:before{ display: none;} .articleContent .articleTitle{ color:#228467; font-family: "Lilita One"; text-transform: uppercase;font-size: 40px; line-height: 50px; margin-bottom: 10px;} .recetteContent .encart_recette{ font-weight: 500; text-transform: uppercase; background: url("images/bg-encart-recette.png"); background-size: 100% 100%; display: inline-block; padding: 20px;} .recetteContent .encart_recette b{ font-weight: 900;} .recetteContent .desc_recette{ font-weight: 500; padding-left: 20px;} .recetteContent .desc_recette .recSubtitle{ position: relative; font-weight: 900; margin-top: 40px; font-size: 16px;} .recetteContent .desc_recette .mobilRecBloc:first-child .recSubtitle{ margin-top: 15px;} .recetteContent .desc_recette .recSubtitle:before{ position: absolute; content:"........................................."; display: block; height: 10px; font-size: 9px; letter-spacing: 2px; width: 300px; color :#80D2B1; top: -30px; left: 0px;} .recetteContent .desc_recette .mobilRecBloc:first-child .recSubtitle:before{ display: none;} .articleContent.lifestyleContent:before{ top: 150px; margin-left: -850px;} .articleContent.lifestyleContent:after{z-index: -1; background: url(images/M-blanc.png) no-repeat; width: 354px; height: 280px; background-size: contain; content: " "; display: block; position: absolute; left: -235px; top: 200px;} .articleContent.lifestyleContent:nth-child(even):after{transform: scaleX(-1); left: auto; right: -175px;} .articleContent.recetteContent{/*background: url(images/M-blanc-transp.png) no-repeat;*/ background-size: 354px 280px; background-position: 270px 30px;} .articleContent .catBuble{ background: #ffffff; border-radius: 100px; height: 130px; width: 130px; position: absolute; right: -10px; top: -60px; z-index: 3} .articleContent .catBuble h3{ font-size: 45px; color: #228467; line-height: 30px; font-family: "Lilita One"; text-transform: uppercase; width: 300%; position: absolute; bottom:40px; left: 25px;} .articleContent .catBuble h3 span{ opacity: 1; color: #80D2B1; font-family: "Kronika"; text-transform: none; font-size: 22px; line-height: 22px; position: absolute; top: -28px; left: 0px;} .hashBar{ padding: 30px 0;} .hashBar a{ background: #ffffff;margin: 5px 3px; position: relative; display: inline-block; text-decoration: none; color: #ECB2A3; font-weight: bold; padding: 10px 18px;; border-radius: 20px; text-transform: none;} .desktop .hashBar a:hover{ background: #ECB2A3; color: #fff;} .list-recettes{ width: 100%; margin-bottom: 60px;} .list-recettes .recetteSquare, .lastPostsModule .pSquare{ cursor: pointer; background-color: #ffffff; position: relative; display: inline-block; width: calc(33% - 60px); margin: 30px; padding-top: 28%; position: relative; float: left;} .list-recettes .recetteSquare .imgMrec, .lastPostsModule .pSquare .imgMp{ z-index: 2; transition: all .3s ease; opacity: 0; position: absolute; left:3%; width: 94%; height: auto; top: 10%;} .list-recettes .recetteSquare .rec_img, .lastPostsModule .pSquare .p_img { z-index: 1; transition: all .3s ease; opacity: 1; border:solid 10px #ffffff; position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; background-size: cover;} .list-recettes .recetteSquare .recTitle, .lastPostsModule .pSquare .pTitle{ z-index: 3; transition: all .3s ease; opacity: 0; background-color: rgba(128,210,177,.7); position: absolute; width: 100%; height: 100%;top: 0px; left: 0px; } .list-recettes .recetteSquare .recTitle span, .lastPostsModule .pSquare .pTitle span{ position: absolute; display: inline-block; width: 100%; left: 0px; font-family: "Lilita One"; text-transform: uppercase; font-size: 45px; line-height: 55px; color: #ffffff; text-align: center; padding: 20px; padding-top: 30px; top: 50%; transform:translateY(-50%);} .desktop .list-recettes .recetteSquare:hover .imgMrec, .desktop .lastPostsModule .pSquare:hover .imgMp{ opacity:0.8; } .desktop .list-recettes .recetteSquare:hover .rec_img, .desktop .lastPostsModule .pSquare:hover .p_img{ opacity:.6; border-width: 0px;} .desktop .list-recettes .recetteSquare:hover .recTitle, .desktop .lastPostsModule .pSquare:hover .pTitle{ opacity:1; } .seeOtherTitle{ font-size: 30px; font-weight: 500; text-transform: uppercase; padding-left: 30px; } .seeOtherTitle .orange{font-family: "Kronika"; color: #80D2B1; font-size: 70px; text-transform: lowercase;} .seeOtherTitle .red{ color: #228467; font-size: 55px; font-family: "Lilita One"; text-transform: uppercase; } .lastPostsModule .swiper-button-prev{ display: none; } .articleContent a{ text-decoration: none;} .articleContent a img{border: none;} .desktop .articleContent a:hover .visuPrincipal{border-width: 15px;} .articleContent .articleIntro{ font-weight: bold; margin: 20px 0; font-size: 16px; line-height: 1.4em;} .articleContent .articleIntro a{ text-decoration: underline;} .articleContent .articleIntro a:hover{ text-decoration: none;} .articleQuote{ position: relative;font-size: 32px; font-weight: bold; font-style: italic; padding: 60px 0; margin: auto; line-height: 1.6em; max-width: 960px; padding-left: 100px; padding-right: 50px; width: 90%; background: url('images/M-beigeclair.png') no-repeat center right; background-size: contain;} .articleQuote:before{ content: "“"; display: block; color: inherit; font-size: 170px; font-family:arial; position: absolute; left: -20px; top: 30px;} .articleQuote:after{ content: "„"; display: block; color: inherit; font-size: 80px; font-family:arial; position: absolute; right: 0px; bottom: 90px;} .articleDoubleVisu{ margin-top: -40px; margin-bottom: 40px;} .articleDoubleVisu img{ border: solid 10px #ffffff; width: calc(50% - 25px); height: auto; float: left;} .articleDoubleVisu img:first-child{ margin-right: 50px;} .list-articles .articleContent:nth-child(even){ flex-direction: row-reverse; } .list-articles .articleContent:nth-child(even) .catBuble{ right: auto; left: -10px; text-align: right;} .list-articles .articleContent:nth-child(even) .catBuble h3{ right: 25px; left: auto;} .list-articles .articleContent:nth-child(even) .catBuble h3 span{ right: 0; left: auto;} .list-articles .articleContent:nth-child(even) .visuPrincipal:before{ transform:scaleX(-1); right: -63px; left: auto;} .list-articles .articleContent .demi:nth-child(2), .articleContent.lifestyleContent .demi:nth-child(2){ padding-top: 120px; color: #0D3F30; } .list-articles .articleContent:nth-child(even):before{z-index: -1; content: " "; display: block; position: absolute; background-image: url(images/craft-left.png); width: 1480px; height: 655px; background-position: center; background-size: cover; left: 50%; top: 0px; margin-left: -740px; } .ctaLoadMore {margin-bottom: 100px; text-transform: uppercase; font-size: 14px; padding-left: 25px; padding-right: 25px; display: none;} .ctaLoadMore .big{ font-size: 1.5em;} /* INSTAGRAM */ .innerInsta{ /*background: #ffffff;*/ margin-top: 300px; } .innerInsta .innerSmall{ position: relative; top: -65px;} .instaTitle{border-radius: 100px; background: #ffffff; display: block; margin: auto; width: 200px; height: 200px; text-align: center; margin-bottom: 20px;} .instaTitle .instaTitleSmall{ font-family: "Kronika"; color: #80D2B1; font-size: 50px; padding-top: 25px; display: inline-block;} .instaTitle .instaTitleBig{ font-family: "Lilita One"; text-transform: uppercase; color: #228467; font-size: 60px; line-height: 48px; display: inline-block;} #instafeed{ position: relative; } #instafeed:before{ position: relative; content: " "; display: block; width: 922px; height: 423px; background-image:url(images/M-insta.png); position: absolute; top: -423px; left: 50%; margin-left: -461px; z-index: -1;} #instafeed .institem{ box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.20); margin: 0px 5px 10px 5px; padding-bottom: calc(33.3333% - 10px); width: calc(33.3333% - 10px); float:left; position: relative;} #instafeed .institem a{ position:absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-size: cover; background-position: center;} /* LAST POSTS */ .innerLastposts{background: #FEF4F0; margin-top: -100px; position: relative; padding-bottom: 140px;} .innerLastposts .triangle{ display: block; width: 0; height: 0; border-top: 360px solid #FEF4F0; border-left: 3000px solid transparent; content: " "; position: absolute; top: 0; left: 0;} .innerLastposts .bigHeadingMM{ position: relative; display: block; margin-top: 40px; padding-bottom: 40px; padding-top: 110px;} .innerLastposts .bigHeadingMM a{ text-decoration: none; border: none;} .innerLastposts .bigHeadingMM .logo{ height: 160px; width: auto; display: inline-block; flex: none; position: static; left: 0; margin-left: 0; margin-right: 20px; top: 0;} .innerLastposts .bigHeadingMM h2{ padding-top: 75px; display: inline-block; position: relative; top: -60px; color: #0D3F30; font-size: 78px; line-height: 0.1em; font-family: "Lilita One"; text-transform: uppercase; } .innerLastposts .bigHeadingMM h2 span{ font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 19px; line-height: 22px; position: absolute; left: 4px; top: 110px; width: 100%;} .innerLastposts .bigHeadingMM h2 sup.reg{ font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 20px; line-height: 22px; position: absolute; left: 335px; top: 44px; width: 100%;} .innerLastposts .bigHeadingMM .baseline{ text-align: right; text-transform: uppercase; font-weight: bold; font-size: 25px; color: #228467; margin-top: -15px;} .innerLastposts .bigHeadingMM .baseline span{ font-family: "Kronika"; color: #80D2B1; font-size: 35px; text-transform: lowercase; margin-left: 5px;} .lastPostsModule .pSquare{ width: calc(25% + 5px); margin: 0px -5px; border: solid 10px #ffffff; padding-top: 38%;} .lastPostsModule .pSquare .p_img{ border: none;} .lastPostsModule:before{ top: -115px; } .lastPostsModule .pSquare .pTitle span{ font-size: 30px; line-height: 40px;} .lastPostsModule .pSquare .imgMp{ top: 28%;} /* PRODUITS */ .gamme{ margin: 100px 0; position: relative;} .gamme .gammetitle{ display: flex; justify-content: stretch; width: 100%; height: 50px; margin-bottom: 50px; } .gamme:nth-child(odd):after{ content: " "; display: block; background-image: url(images/M-transparent.png); background-repeat: no-repeat; background-size: contain; width: 70%;height: 610px;top: 230px;position: absolute;transform: rotate(-10deg) scaleX(-1);right: 0%;opacity: .7;z-index: -1;} .gamme:nth-child(1):after{ transform: rotate(10deg) scaleX(-1); top: 250px; right: 2%;} .gamme:nth-child(even) .gammetitle{flex-direction: row-reverse;} .gamme .gammetitle > h2{ font-family: "Lilita One"; color: #228467; text-transform: uppercase; font-size: 35px; line-height: 55px; position: relative; padding:0 40px 0 60px;} .gamme .gammetitle > h2:before{ position: absolute; top: -60px; left: -30px; content: " "; display: block; height: 107px; width: 78px; background-size: contain; background-image: url(images/leaf-product-transparent.png);} .gamme:nth-child(even) .gammetitle > h2 {padding:0 60px 0 40px;} .gamme:nth-child(even) .gammetitle > h2:before{ transform: scaleX(-1); right: -30px; left: auto;} .gamme .gammetitle > div{ flex:auto; height: 55px; overflow: hidden; position: relative;} .gamme .gammetitle > div:after{ display: block; width: 100%; overflow: hidden; position: absolute; bottom: 10px; left: 0; letter-spacing: 1px; font-family: arial; font-size: 20px; color: #ECB2A3; content: "..................................................................................................................................................................................................................................................................................................................................................................................................................................................."} .gammebloc { display: flex;} .gamme:nth-child(even) .gammebloc{flex-direction: row-reverse;} .gammebloc .contentContainer{ flex: auto; width: 45%; color: #0D3F30; font-weight: 500;} .gammebloc .contentContainer .wisiwig_content{ padding-left:50px;} .gammebloc .sliderContainer { flex: auto; width: 55%; height: 500px; } .gammebloc .sliderContainer:before{top: -100px; margin-left: -880px;} .gamme .swiper-container {width: 100%; max-height: 500px; margin-left: auto;margin-right: auto;} .gamme .swiper-slide {background-size: contain;background-position: center;background-repeat: no-repeat;} .gamme .gallery-top {height: 100%; width: 100%; position: relative; width: 100%; padding: 0 50px; padding-bottom: 30%;} .gamme .gallery-top:after{ position: absolute; bottom: 35%; right: 10px; content: " "; display: block; height: 53px; width: 39px; transform:scaleX(-1); background-size: contain; background-image: url(images/leaf-product-transparent.png);} .gamme:nth-child(even) .gallery-top:after{transform:scaleX(1); left: 10px; right: auto;} .gamme .gallery-thumbs {height: 30%;box-sizing: border-box;padding: 20px 0; margin-top: -30%; width: calc(100% - 100px); margin-left: 50px;} .gamme .gallery-thumbs .swiper-slide {cursor: pointer;background-color: #ffffff;height: 100%;} .gamme .gallery-thumbs .swiper-slide div{background-size: contain;background-position: center;background-repeat: no-repeat;width: calc(100% - 40px);height: calc(100% - 40px);margin: auto; margin-top: 20px;opacity: .5;} .gamme .gallery-thumbs .swiper-slide-thumb-active div {opacity: 1;} .swiper-button-prev{ top: auto; bottom: 70px; left: 0; background: none;} .swiper-button-next{ top: auto; bottom: 70px; right: 0; background: none;} .swiper-button-prev span, .swiper-button-next span{ height: 6px; width: 25px; border-radius: 5px; display: block; position: absolute;} .swiper-button-prev span:nth-child(1){ transform: rotate(-45deg); top: 6px;} .swiper-button-prev span:nth-child(2){ transform: rotate(45deg); top: 20px;} .swiper-button-next span:nth-child(1){ transform: rotate(45deg); top: 6px;} .swiper-button-next span:nth-child(2){ transform: rotate(-45deg); top: 20px;} /* MATERNE */ .materne-page .mat_title{ font-family: "Lilita One"; text-transform: uppercase; color: #228467; text-align: center; font-size: 70px; margin-top: 50px; margin-bottom: 0px; position: relative;} .materne-page .mat_title:before{content: " "; display: block; width:570px; height: 341px; background-image: url("images/M-title-materne.png"); position: absolute; left: 50%; margin-left: -285px; top: -60px; z-index: -1;} .materne-page .mat_title span{ font-family: "Kronika"; text-transform: none; color: #80D2B1; font-size: 45px;} .materne-page .banner{ position: relative; z-index: 3; width: 100%; height: 0; padding-top: 50%; background-size: cover; background-repeat: no-repeat; background-position: center; margin-bottom: 40px;} .materne-page .intro{ font-size: 16px; font-weight: 500;color: #0D3F30; line-height: 1.4em; padding: 0 30px;} .materne-page .intro:before{ top: -190px;} .materne-page .mat_subtitle{ font-family: "Kronika"; color: #ECB2A3; font-size: 33px; text-align: center; text-transform: uppercase; margin-bottom: 40px;} .materne-page .engage-blocs{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 80px;} .materne-page .engage-blocs:before {top:10px;} .materne-page .engage-blocs .bloc{ flex: auto; max-width: calc(33% - 15px); min-width: calc(33% - 15px); padding: 10px; background: #ffffff;} .materne-page .engage-blocs .bloc .bvisu{ width: 100%; margin-bottom: 15px; padding-bottom: 70%; background-size: cover; background-repeat: no-repeat; background-position: center;} .materne-page .engage-blocs .bloc .btitle{color: #0D3F30; padding: 0 10px; text-transform: uppercase; font-weight: bold; font-size: 17px;} .materne-page .engage-blocs .bloc .bcontent{color: #0D3F30; padding: 10px ; font-size: 15px; line-height: 1.4em; font-weight: 500;} .keypointsZone{ position: relative; padding-top: 30px; padding-bottom: 100px;} .keypointsZone .pomme{ position: absolute; left: 50%; width:33%; height: auto; margin-left: -16%; top: 130px;} .keypointsZone .mif{ position: absolute; left: 50%; top: -40px; width: 14%; height: auto;} .kimage{ width: 50%; height: auto; opacity: .6; position: absolute; } .kimage.left{left: 0; top: 35px;} .kimage.left img{ width: 100%; height: auto;} .kimage.right{right: 0; top: 0; width: calc(50% - 140px);} .keypoints-blocs.left{ width: calc(50% + 140px); padding-right: 50px;} .keypoints-blocs.right{ float: right; width: 33%;} .keypoints-blocs .ml{ font-size: 14px; color: #0D3F30; font-weight: 500; font-style: italic; line-height: 1.2em; padding-left: 30px;} .keypoints-blocs .kloc{ font-size: 16px; color: #0D3F30; font-weight: 500; margin-bottom: 30px; padding-left: 30px; position: relative;} .keypoints-blocs .kloc:before{ content: " "; display: block; height: 30px; width: 33px; background: url(images/check.png); position: absolute; left: -15px; top: -5px;} .keypoints-blocs .kloc .ktitle{ font-weight: bold; font-size: 17px; text-transform: uppercase;} .keypoints-blocs .kloc .kcontent{ line-height: 1.4em;} .nut_subtitle::before{ top: -90px; left: 70%;} .materne-page .mat_subsubtitle{ font-size: 26px; text-align: center;color: #ECB2A3; font-weight: 500; margin-top: -30px; margin-bottom: 60px;} .otherPush{ text-align: center; margin-bottom: 100px;} .otherPush .brand{ transition: all .3s ease; height: 330px; width: 330px; display: inline-block; border-radius: 300px; position: relative; margin: 0 50px;} .desktop .otherPush .brand:hover{ transform: scale(1.1);} .otherPush .brand:active{ transform: scale(0.9);} .otherPush .brand p{ position: absolute; bottom: 30px; width: 60%; left: 20%; text-decoration: none; font-weight: bold; color: #863d00; font-size: 16px; line-height: 1.2em;} /* CONFIPOTE */ .confipage{ background: linear-gradient(#f0dab5 0%, #f7e3d4 25%); overflow: hidden; position: relative;} .confipage .deco{ position: absolute; z-index: -1;} .confipage #confiSliderZone { max-width: 1070px; width: 100%; height: 1070px; margin-left: auto; margin-right: auto; position: relative; overflow: hidden;; border-radius: 900px; padding: 100px 0 100px 0; margin-bottom: -80px;} .confipage #confiSliderZone:after{ background: url(images/confipote/motif.jpg) repeat; height: calc(100% - 200px); width: calc(100% - 200px); border-radius: 800px; content: " "; display: block; position: absolute; left: 100px; top: calc(100px - 7%); z-index: -1; } .confipage .swiper-container {width: 100%; max-height: 800px; } .confipage .swiper-slide {background-size: contain; background-position: center; background-repeat: no-repeat;} .confipage .gallery-top {height: 100%; width: 100%; position: relative; width: 100%; padding: 0px; padding-bottom: 120px;} .confipage .gallery-thumbs {height: 120px; box-sizing: border-box;padding: 0; max-width: 500px; width: 70%; margin:auto; display: block; margin-top: -120px;} .confipage .gallery-thumbs .swiper-slide {cursor: pointer;background-color: rgba(255,255,255,.5);height: 100%;} .confipage .gallery-thumbs .swiper-slide div{background-size: contain;background-position: center;background-repeat: no-repeat;width: calc(100% - 20px);height: calc(100% - 20px);margin: auto; margin-top: 10px;opacity: .5;} .confipage .gallery-thumbs .swiper-slide-thumb-active div {opacity: 1;} .confipage .swiper-button-prev{ top: auto; bottom: 35px; left: 50%; margin-left: -290px; background: none;} .confipage .swiper-button-next{ top: auto; bottom: 35px; right: 50%; margin-right: -290px;background: none;} .swiper-button-prev span, .swiper-button-next span{ background: #ECB2A3;} #confiSliderZone .swiper-container:before{ bottom: 28%; left: 4%; content: " "; display: block; background-image:url(images/confipote/zigouigoui2.png); height: 118px; width: 80px; position: absolute; } #confiSliderZoneContainer{ position: relative; } #confiSliderZoneContainer:before{ top: 12%; left: 130px; transform: scaleX(-1); content: " "; display: block; background-image:url(images/confipote/zigouigoui.png); height: 96px; width: 116px;position: absolute;} #confiSliderZoneContainer:after{ top: 25%; right: 100px; content: " "; display: block; background-image:url(images/confipote/zigouigoui.png); height: 96px; width: 116px;position: absolute;} .confiLogo{ position: absolute; top: 30px; left: 50%; z-index: 20; margin-left: -200px;} .confiTitle{ text-align: center; font-family: "Lilita One"; text-transform: uppercase; font-size: 41px; margin-bottom: 30px; color: #d23b44; margin-top: 150px;} .confipage .wisiwig_content{ color: #863d00; max-width: 600px; margin: auto; font-size: 18px; font-weight: 500; } .confipage .textafter{ color: #863d00; max-width: 550px; margin: auto; font-size: 14px; line-height: 1.6em; font-weight: 500; } .confipage .textafter .ml{ font-size: 11px; font-style: italic; margin-top: 5px;} .confiRecettesCTA{ position: relative; display: inline-block; margin: auto; font-family: "Lilita One"; text-transform: uppercase; font-size: 26px; color: #d23b44; text-decoration: none; margin-top: 30px; padding-bottom: 12px;} .confiRecettesCTA:after{ content: " "; display: block; height: 4px; background:#d23b44; width: 70%; position: absolute; left: 15%; bottom: 5px; transition: all .3s ease;} .desktop .confiRecettesCTA:hover:after{ width: 100%; left: 0%;} .instaConfipote{ margin-top: 100px; background: none;} .instaConfipote #instafeed:before{ display: none;} .instaConfipote .innerSmall{ top: 0px;} .instaConfipote .instaTitleImg{ display: block; margin: auto; max-width: 80%; height: auto; } .instaConfipote .instaTitleConfi{ text-align: center; font-family: "Lilita One"; text-transform: uppercase; font-size: 30px; color: #d23b44; } #apricot{ width: 22%; max-width: 430px; left:0%; top: -20px; z-index: 1;} #cherry{ right:0%; bottom: 100px; width: 25%; } #strawberry{ right:2%; top: 120px; width: 20%; } #percents{ right:5%; top: 50%; margin-top: -50px; width: 23%;} #raspberry{ left:-3%; bottom: 100px; width: 31%; } /* -------- HOMEPAGE --------- */ .creneauBloc{ display: none; margin-top: -20px; } .creneauBloc .pointillesRecette{ padding-top: 180px; padding-bottom: 240px; background-image: url(images/pointilles1.png); background-position: top center; background-repeat: no-repeat; background-size: initial;} .home .articleContent .catBuble{ height: 200px; width: 200px; text-align: center; z-index: 5;} .home .articleContent .catBuble .time{ font-weight: 300; font-size: 22px; color: #0D3F30; padding-top: 23px; display: block;} .home .articleContent .catBuble h3{ color:#228467; position: static; margin-left: -100%; font-size: 70px; margin-top: 15px;} .home .articleContent .catBuble h3 span{ opacity: 1; color:#80D2B1; position: static; display: block; font-size: 40px; margin-bottom: 35px;} .creneauBloc .recetteContent .catBuble h3{ color:#228467; } .creneauBloc .recetteContent .catBuble h3 span{ opacity: 1; color:#80D2B1; } .creneauBloc .recetteContent .visuPrincipal{ z-index: 2; position: relative; border: solid 10px #ffffff;} .creneauBloc .recetteContent .fruits{ position: absolute; z-index: 1; left: auto; right: -180px; top: 0px; bottom: auto; max-height: 280px; width: auto;} .creneauBloc .recetteContent .catBuble{ top: -160px;} .creneauBloc .recetteContent .demi:nth-child(2){ padding-top: 250px; padding-left: 20px; position: relative; z-index: 3;} .creneauBloc .articleContent .articleTitle{ line-height: normal; margin-top: 30px; color: #0D3F30; font-family: "Montserrat"; text-transform: uppercase; font-size: 18px;} .creneauBloc .recetteContent{ background-image: url(images/M-recette.png); background-position: 400px 70px; background-repeat: no-repeat;} .creneauBloc .hlf-banner{ border: solid 10px #ffffff; max-width: 1400px; width: 100%; height: auto; display: block; margin: auto; position: relative; z-index:2; } .creneauBloc .lifestyleContent{ margin-top: 0px; padding-top: 0px; padding-bottom: 250px; } .creneauBloc .pointillesLifestyle{background-image: url(images/pointilles2.png); background-position: top center; background-repeat: no-repeat; background-size: contain;} .creneauBloc .pointillesLifestyle .innerXXSmall{ z-index: 2;} .creneauBloc .pointillesLifestyle:before{top: -205px; margin-left: -1030px; z-index: 1;} .creneauBloc .lifestyleContent .catBuble{ left: 0px;} .creneauBloc .lifestyleContent:after{ left: 25px; top: 75px; opacity: .6;} .creneauBloc .lifestyleContent .demi{ min-width: 33%;} .creneauBloc .lifestyleContent .lifeFruits{ margin-left: 20%; margin-top: 30px; max-width: 100%; width: 330;} .creneauBloc .lifestyleContent .articleTitle{ text-transform: none;} .creneauBloc .lifestyleContent .demi:nth-child(2){ } .creneauBloc .lifestyleContent .demi .lfdemicontainer{ max-width: 490px;} .creneauBloc .lifestyleContent .demi .lfdemicontainer:before{ top: 0px; transform: rotate(95deg) scale(.7); right: -130px;z-index: 2; content: " "; display: block; position: absolute; background-image: url(images/grande-feuille-recette.png); height: 97px; width: 56px;} .creneauBloc .articleContent:not(.recetteContent) .hashBar a{ /*background-color: rgba(255,255,255,.6);*/background-color: #ffffff; color:#ECB2A3;} .desktop .creneauBloc .articleContent:not(.recetteContent) .hashBar a:hover{ /*background-color: rgba(255,255,255,1);*/ background-color: #ECB2A3; color:#ffffff;} .rangeWrapperInner{ margin: 60px auto 0px auto; width: 100%; max-width: 860px; position: relative;} .rangeWrapperInner:after{ height: 3px; width: 40px; content: " "; display: block;position: absolute;right: -40px;top: 21px; background-image: linear-gradient(to right, #ECB2A3, #fef4f0);} .rangeWrapperInner:before{ height: 3px; width: 40px; content: " "; display: block;position: absolute;left: -40px;top: 21px; background-image: linear-gradient(to right, #fef4f0, #ECB2A3);} .rangeWrapper { width: calc(100% - 100px); display: inline-block; border: none; background: none; border-radius: 0; box-shadow: none; height: 44px; margin-left: 50px;} .noUi-connects{height: 44px;} .noUi-target{ height: 44px; background: none; border: none; box-shadow: none;} .rangeWrapper:after {height: 3px; position: absolute;top: 21px;left: 0; background: #ECB2A3; width: 100%;display: block; content: " ";z-index: 0} .rangeWrapper .noUi-base {cursor: pointer;z-index: 4} .rangeWrapper .noUi-base .noUi-handle { width: 45px; height: 45px; background:url(images/handle.png); border: none; border-radius: 40px; top: 0px; margin-top: 0; left: 0px;margin-left: 0; cursor: -moz-grab; cursor: -webkit-grab; cursor: grab; z-index: 4} .rangeWrapper .noUi-base .noUi-handle:before, .rangeWrapper .noUi-base .noUi-handle:after{ display: none;} .rangeWrapper .noUi-base .noUi-handle .tooltip{background: #ECB2A3; color: #ffffff; border-radius: 30px; font-weight: bold; font-size: 14px; width: 88px; padding: 5px 0px; text-align: center; position: absolute; top: -40px; left:-22px;} .rangeWrapper .noUi-base .noUi-handle .tooltip:before{ display: block; height: 8px; width: 8px; background: #ECB2A3; content: " "; position: absolute; bottom: -4px; transform: rotate(45deg); left: 50%; margin-left: -4px;} .rangeWrapper .noUi-base .noUi-handle:active { cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing} .rangeWrapper .noUi-base .noUi-handle:after { display: none} .rangeWrapper .noUi-pips { z-index: 2; padding: 0} .rangeWrapper .noUi-pips .noUi-marker { width: 18px;margin-left: -9px;height: 18px;background-color: #ECB2A3; border-radius: 20px;margin-top: -30px;cursor: pointer} .rangeWrapper .noUi-pips .noUi-marker-normal {display: none} .rangeWrapper .noUi-pips .noUi-value {display: none;} .materneContent{ padding-top: 230px; padding-left: 50px; padding-right: 50px;} .materneContent .catBuble{ top: 0px; right: 50%; left: auto;} .materneContent .catBuble h3{ color:#228467; padding-top: 30px;} .materneContent .catBuble h3 span{ color:#80D2B1; opacity: 1;} .materneContent:after{ content:" "; opacity: .3; position: absolute; top: 110px; left: 0px; display: block; width: 100%; height: 200px; z-index: -1; background-image: url(images/pointilles3.png); background-position: top center; background-repeat: no-repeat;} .materneContent:before{ margin-left: -1000px;} .materneContent .demi:nth-child(2){ max-width: 775px; min-width: 60%; } .materneContent .demi:nth-child(3){ max-width: 40%; min-width: 40%; padding-left: 50px;} .materneContent .demi:nth-child(2) img{ width: 100%; height: auto;} .materneContent .demi .wisiwig_content{ font-size: 16px;} .materneContent .visuPrincipal:before{ background-image: url(images/leaf-hmaterne.png); width: 37px; height: 76px; left: -40px; top: -85px;} .materneContent .visuPrincipal:after{ background-image: url(images/leaf-hmaterne.png); width: 37px; height: 76px; transform: rotate(128deg); bottom: -60px; right: -55px;} .materneContent .demi:nth-child(3):after{ content: " "; display: block; width: 100%; height: 100%; background-image: url(images/M-beige.png); background-repeat: no-repeat; background-size: contain; position: absolute; top: -160px; right: 160px; z-index: -1;} .materneContent .excerpt_mobile{ display: none;} .pointillefin{ position: relative; padding-top: 150px;} .pointillefin:before{ left: 0; top: -320px;position: absolute; height: 560px; content: " "; display: block; background-image: url(images/pointilles4.png); width: 100%; background-position: top center; background-repeat: no-repeat; background-size: contain;} .productContent{ display: block; padding-left: 16%; padding-right:6%; padding-bottom:0px; padding-top: 210px;} .productContent .img{ width: 90%; position: relative;} .productContent .img img{ width: 100%; height: auto;} .productContent .catBuble{ top: 0px; left: 55%; right: auto;} .productContent .catBuble h3{ padding-top: 30px;} .productContent .contentContainer{ padding: 60px 0px 0px 50px; } .productContent .contentContainer .wisiwig_content p{ margin-bottom: 20px; font-size: 14px; font-weight: 500;} .productContent .hashBar{ padding-top: 0px;} .productContent .hashBar a{ background-color: #ffffff; color: #ECB2A3;} .desktop .productContent .hashBar a:hover{ background-color: #ECB2A3;} .productContent:before{top: 150px; margin-left: -600px;} .productContent:after{ content: " "; display: block; width: 80%; height: 100%; background-image: url(images/M-blanc.png); background-repeat: no-repeat; background-size: contain; position: absolute; top: 250px;right: -25%;z-index: -1;transform: rotate(15deg);} .productContent .img:before {top: -90px;left: -63px;z-index: 2;content: " ";display: block;position: absolute;height: 107px;width: 78px;background-size: contain;background-image: url(images/leaf-product-transparent.png);} .productContent .img:after {bottom: -20px;right: -40px;z-index: 2;content: " ";display: block;position: absolute;height: 107px;transform: scaleX(-1) scale(.6);width: 78px;background-size: contain;background-image: url(images/leaf-product-transparent.png);} .catNav .produitCatNavList a{ background: #ECB2A3; color: #ffffff;} /* CONTACT */ .contact-form{ padding: 30px; padding-top: 0px; margin-top: -20px;} .contact-form input[type=text], .contact-form input[type=tel], .contact-form input[type=email], .contact-form textarea{ width: 100%; font-size: 18px; border-radius: 30px; background: #ffffff; padding: 16px; color: #5a554a; font-weight: 500; border: none;} .biglabel{ font-size: 16px; text-transform: uppercase; font-weight: bold; font-weight: bold; margin-top: 30px;margin-bottom: 5px; } .label{ font-size: 14px; font-weight:500; margin-top: 15px; font-weight: bold; margin-bottom: 5px; } .inlinelabel{font-size: 14px; font-weight: bold;} .contact-form .line{ display: flex; flex-wrap: wrap; justify-content: space-between;} .contact-form .full{ width: 100%; position: relative;} .contact-form .demi{ max-width: calc(50% - 15px); min-width: calc(50% - 15px); display: block;} .contact-form .demismall{ max-width: calc(50% - 215px); min-width: calc(50% - 215px); display: block;} .contact-form .tuto{ height: 68px; width: 200px; display: block; content: " "; margin-top: -8px; margin-bottom: -8px;} .contact-form .tuto1{ background-image: url(images/tutoForm1.png); margin-right: 20px;} .contact-form .tuto2{ background-image: url(images/tutoForm2.png);} .selectize-control{z-index: 2; position: relative; width: 100%; box-shadow: none;} .selectize-input, .selectize-input.full, .selectize-input.input-active { z-index: 2; border: none; background-color:#ECB2A3 !important; color: #ffffff; font-weight: bold;font-size: 18px; border-radius: 40px; padding: 16px; text-align:center; text-transform: uppercase;} .selectize-dropdown{ box-shadow: none; z-index: 1; border: none; overflow: hidden; border-radius: 30px; padding-top: 50px; margin-top: -50px;background-color:#ECB2A3 !important; color: #ffffff;font-size: 18px;text-align: center; text-transform: uppercase; } .selectize-dropdown [data-selectable].option{color: #ffffff; } .selectize-dropdown [data-selectable].option.active{ background-color: #E19280; color: #ffffff;} .selectize-dropdown .option, .selectize-dropdown .optgroup-header{ padding: 12px 8px; cursor: pointer;} .selectize-control.single .selectize-input:after{ border-color:#ffffff transparent transparent transparent; border-width: 8px 8px 0 8px; right: 50px;} .selectize-control.single .selectize-input.dropdown-active:after{ border-color: transparent transparent #ffffff transparent; border-width: 0 8px 8px 8px } .selectize-input.dropdown-active::before { content:"........................................................................................................................"; background: none; display: block; height: 4px; font-size: 12px; bottom: 0px; letter-spacing: 2px; color: #ffffff; text-align: center; width: 80%; margin-left: 10%; left: 0px; line-height: 0; overflow: hidden; z-index: 3} .selectize-input > input{ display: none !important; } #group-gamme{ max-width: calc(50% - 15px); min-width: calc(50% - 15px);} #group-gamme .demi, #group-gamme .selectize-control{ width: 100%; min-width: 100%; max-width: 100%;} .selectize-dropdown .option:nth-child(1){ display: none;} .selectize-input.focus, .selectize-input.dropdown-active{ box-shadow: none;} .sfi-js .sfi-wrapper{ width: 100% !important; cursor: pointer; background: none;} .sfi-js .sfi-wrapper .sfi-filename{ background-color: #ECB2A3; line-height: normal; font-weight: bold; height: 53px; color: #ffffff; border: none; font-size: 18px; border-radius: 30px; padding: 16px; font-size: 18px;text-align: center; text-transform: uppercase;} .sfi-js .sfi-wrapper .sfi-trigger{ height: 53px; border: none; background-image: url(images/dl-icon.png); background-repeat: no-repeat; background-position: center; width: 30%; margin-left: -30%;} .sfi-js .sfi-wrapper.sfi-valid .sfi-filename{ color: #ffffff;} .wpcf7-not-valid-tip{ font-style: italic; display: inline-block !important; margin-bottom: 15px;font-size: 12px !important; border-top: solid 1px #f00; margin-left: 30px;} .objet,.marque,.gamme{ margin-bottom: 25px;} input[type=radio]{ display: none;} input[type=radio] + span{ cursor: pointer; padding-left: 45px; display: inline-block; position: relative;} input[type=radio] + span:before{ content: " "; display: block; background: #ffffff; border-radius: 20px; height: 20px; width: 20px; position: absolute;; top: 0; left: 20px; } input[type=radio]:checked + span:after{ height: 8px; width: 8px; border-radius: 10px; background: #e19280; content:" "; display: block; position: absolute; top: 6px; left:26px;} input[type=checkbox]{ display: none;} input[type=checkbox] + span{ cursor: pointer; padding-left: 30px; display: block; position: relative; text-transform: uppercase; font-weight: 500; letter-spacing: -1px; margin-top: 40px;font-size: 14px;} input[type=checkbox] + span:before{ content: " "; display: block; background: #ffffff; height: 20px; width: 20px; position: absolute;; top: 0; left: 0px; box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);} input[type=checkbox]:checked + span:after{ content: "✓"; display: block; left: 3px; top: 2px; position: absolute; color: #e19280; font-size: 16px; font-weight: bold;} input[type=submit]{ border: none; transition: all .3s ease; background-color:#ECB2A3 !important; color: #ffffff; font-weight: bold;font-size: 18px; border-radius: 40px; padding: 12px 40px; margin-top: 40px; cursor: pointer; display: inline-block; text-align:center; text-transform: uppercase; } .desktop input[type=submit]:hover{ transform: scale(1.1);} input[type=submit]:disabled{ opacity: .5; transform: scale(1) !important;} .wpcf7-response-output{ border: 4px #ffff solid !important; background: #F2F2F2; padding: 10px !important; color: #f00; font-weight: bold;} div.wpcf7-mail-sent-ok{ color: #ffffff; background: #659b41; font-weight: bold;} .contact-form select, .contact-form input[type=file], .contact-form input[type=checkbox]{ display: block !important; opacity: 0; position: absolute; left: -1000px; top: -1000px;} .help-block.form-error{ color: red; font-size: 12px; font-style: italic;} .countletter{ position:absolute;right: 8px; top: -20px; font-size: 11px; font-weight: bold; } .contact-header{padding: 30px; display: flex;} .contact-header::before{ top: 180px; margin-left: -600px; } .contact-header .demi:first-child{ width: 60%; max-width: 60%; min-width: 60%;} .contact-header .demi:nth-child(2){ width: 40%; max-width: 40%; min-width: 40%;} .contact-header .demi img{ width: 100%; height: auto;} .contact-header .demi h1{color: #0D3F30; font-size: 70px; line-height: 1em; font-family: "Lilita One"; text-transform: uppercase; margin-top: -30px;} .contact-header .demi h1 span{ font-size: 50px; font-family: "Kronika"; text-transform: none; display: block; line-height: 40px;} .contact-header .contactContent{ margin-top: 20px; font-size: 14px; font-weight: 500; } .contact-header .contactContent p{ line-height: 1.3em;} .contact-header .contactContent h2{ text-transform: uppercase;} .contact-header .cristal{ display: block; height: 73px; width: 431px; background: url(images/cristal.png); position: relative; margin-top: 20px} .contact-header .cristal span{ color: #b1b1b3; font-weight: 500; font-size: 26px; position: absolute; top: 9px; right: 24px;} .contact-header .emailContent, .contact-header .tvaContent{ margin-top: 5px; font-size: 14px; font-weight: 500; border-top: dashed 1px; width: 75%; padding-top: 8px; } .contact-header .emailContent p, .contact-header .tvaContent p { line-height: 1.3em;} .flexformtitle{ display: flex; flex-wrap: wrap; margin-top: -80px;} .formtitle{ margin-left: 30px; color: #228467; font-size: 35px; line-height: 75px; font-family: "Lilita One"; text-transform: uppercase; margin-top: 90px;} .points{ flex:auto; position: relative;} .points:after{ display: block; width: calc(100% - 40px); overflow: hidden; position: absolute; bottom: 20px; left: 0; padding-left: 10px;letter-spacing: 1px; font-family: arial; font-size: 20px; color: #228467; content: "..................................................................................................................................................................................................................................................................................................................................................................................................................................................."} .flexformtitle::before{ top: 140px; margin-left: -490px; } .biglabel.craftLeft::before{ top: 10px; } .rsfootLinks{ width: 130px; text-align: right; position: absolute; right: 0px; top: -10px;padding: 30px 0 50px 0;} .rsfootLinks a{ transition: all .3s ease; display: inline-block; height: 18px; width: 18px; margin-left: 22px;background-size: contain;} .desktop .rsfootLinks a:hover{ transform: scale(1.2);} .rsfootLinks a.deezer{ background-image: url(images/logo-deezer-foot.png);} .rsfootLinks a.facebook{ background-image: url(images/logo-facebook-foot.png);} .rsfootLinks a.insta{ background-image: url(images/logo-instagram-foot.png);} .standardPage h1{ font-family: "Lilita One"; color: #0D3F30; margin-bottom: 40px; font-size: 50px; text-align: center; margin-top: 30px;} .standardPage h2 { font-family: "Kronika"; color:#228467; margin-top: 25px; margin-bottom: 10px;} .standardPage h3 { font-family: "Kronika"; margin-top: 15px; margin-bottom: 10px;} /* ------------------------------------------------------------------------- */ /* ----------------- Materne le bien être vous accompagne ----------------- */ /* ------------------------------------------------------------------------- */ @media screen and (min-width: 1024px) and (max-width: 1439px) { /*.bigHeadingMM .left h2 span{ font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 0.24em; line-height: 45px; position: absolute; right: 0px; padding-right: 115px; top: 102%; transform: translateY(-50%); } .bigHeadingMM .left h2 sup.reg{font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 0.24em; line-height: 45px; position: absolute; right: 90px; top: 0px; } .innerLastposts .bigHeadingMM h2 sup.reg{text-align: left; font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 19px; line-height: 13px; position: absolute; left: 332px; top: 49px; width: 100%;} */ } @media screen and (min-width: 768px) and (max-width: 1023px) { /*.bigHeadingMM .left h2 span{font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 0.24em; line-height: 45px; position: absolute; right: 115px; top: 40px; } .bigHeadingMM .left h2 sup.reg{font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 0.24em; line-height: 45px; position: absolute; right: 100px; top: -10px; } .innerLastposts .bigHeadingMM h2 sup.reg{text-align: left; font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 19px; line-height: 13px; position: absolute; left: 332px; top: 49px; width: 100%;} */ } /* ------------------------------------------------ */ /* -------------------- TABLETTE -------------------- */ /* ------------------------------------------------ */ @media screen and (min-width: 481px) and (max-width: 1024px) { .creneauBloc .pointillesRecette{ padding-bottom: 0px;} .creneauBloc .lifestyleContent{ padding-bottom: 100px;} .materneContent{ } .materneContent .demi:nth-child(2){ max-width: 30%; min-width: 0px;} .materneContent .demi:nth-child(3){ max-width: 70%; min-width: 0px;} .pointillefin{ padding-top: 0px;} .pointillefin:before{ top: -420px;} .kimage{ width: 45%; } .keypointsZone .pomme{ width: 20%; left: 20%; top:200px; } .keypointsZone .mif{ width: 10%; left: 30%; top: 250px;} .keypoints-blocs.right{ width: 51%;} .materne-page .intro{ font-size: 14px;} .keypoints-blocs .kloc{ font-size: 14px; margin-bottom: 10px;} .keypoints-blocs .kloc .kcontent{ font-size: 14px;} .materne-page .engage-blocs .bloc .bcontent{ font-size: 14px;} .keypoints-blocs.left .kloc{ margin-left: 30px;} .kimage.right{ top: 30px;} .materne-page .mat_subtitle{ font-size: 25px;} .materne-page .mat_subsubtitle {font-size: 20px;} .otherPush .brand{ width: 250px; height: 250px; background-size: contain;} .bigHeadingMM .left h2 sup.reg{top: -10px;} } /* ------------------------------------------------ */ /* -------------------- MOBILE -------------------- */ /* ------------------------------------------------ */ @media screen and (max-width: 480px) { .mobile-elem{ display: block !important;} .desktop-elem{ display: none;} .craftRight:before{ z-index: -1; content: " "; display: block; position: absolute; background-image: url(images/craft-right.png); width: 600px; height: 300px; background-position: center; background-size: cover; left: 50%; top: -30px; margin-left: -300px;} .craftLeft:before{ z-index: -1; content: " "; display: block; position: absolute; background-image: url(images/craft-left.png); width: 600px; height: 300px; background-position: center; background-size: cover; left: 50%; top: -30px; margin-left: -300px;} .swiper-pagination-bullets .swiper-pagination-bullet{ width: 8px; height: 8px; margin: 0px 5px !important; background-color: #fff; opacity: 1;} .swiper-button-next, .swiper-button-prev{ width: 20px; height: 25px;} .swiper-button-next:before, .swiper-button-prev:before, .swiper-button-next:after, .swiper-button-prev:after{ content: " "; display: block; height: 4px; width: 14px; background: #ECB2A3; position: absolute;} .swiper-button-next:before{ transform: rotate(45deg); right: 0; top: 7px; border-radius: 2px 0px 0px 2px;} .swiper-button-next:after{ transform: rotate(-45deg); right: 0; bottom: 7px; border-radius: 2px 0px 0px 2px;} .swiper-button-prev:before{ transform: rotate(45deg); left: 0; bottom: 7px; border-radius: 0px 2px 2px 0px;} .swiper-button-prev:after{ transform: rotate(-45deg); left: 0; top: 7px; border-radius: 0px 2px 2px 0px;} /* HEADER */ header{ height: 80px; z-index: 50; position: fixed; left: 0; top: 0; width: 100%;} #main_nav{ padding: 20px 16px 20px 16px; transition: left .3s ease; width: calc(100% + 16px); left: -110%; top: 75px;position: absolute; background: #d23b44; z-index: 50;} header.open #main_nav{ left: -8px; } #main_nav ul{ display: block; list-style: none; } #main_nav ul li{ display: block; border-bottom: solid 1px rgba(255,255,255,.5);} #main_nav ul li:last-child{ border: none;} #main_nav ul li a{ color: #ffffff; font-size: 20px; padding: 10px 0; display: block;} #siteLogo{ position: absolute; bottom: auto; top: 5px;left: 0%; margin-left: 0; width: 40%;} #siteLogo img{ width: 100%; height: auto;} .rsheadLinks{ display: none;} #hamburger{ display: block; position: absolute; top: 20px; right: 10px; width: 45px; height: 35px;} #hamburger span{border-radius: 4px; height: 4px; width: 100%; background: #d23b44; transition: all .3s ease; display: block; position: absolute;} #hamburger span:nth-child(1){ left: 0; top: 0px;} #hamburger span:nth-child(2){ left: 0; top: 15px;} #hamburger span:nth-child(3){ left: 0; top: 30px;} header.open #hamburger span:nth-child(1){ transform: rotate(45deg); top: 15px;} header.open #hamburger span:nth-child(2){ left: 30px; opacity: 0;} header.open #hamburger span:nth-child(3){ transform: rotate(-45deg); top: 15px;} #main{ padding-top: 80px; padding-bottom: 30px;} /* HOME */ body.home #content{ background-image: url(images/mobile-pointilles.png); background-repeat: no-repeat; background-position: center 200px; } .bigHeadingMM{ display: block; margin-top: -50px;} .bigHeadingMM .left{ display: none;} .bigHeadingMM .logo{ display: none;} .bigHeadingMM .MMbanner{ width: calc(100% + 16px); margin-left: -8px; height: 0px; padding-top: 64%; border: solid 4px #ffffff; position: relative; z-index: 1;} #homeSwiper{ width: 100%;} .creneauBloc{ display: block; width: 100%;} .cta{ border-radius: 10px; font-size: 14px;} .creneauBloc .pointillesRecette{ padding-top: 80px; padding-bottom: 80px; background:none !important;} .home .articleContent .catBuble{ height: 150px; width: 150px; text-align: center; z-index: 5; top: -75px; right: 50%; margin-right: -75px;} .home .articleContent .catBuble .time{ font-weight: normal; font-size: 30px; padding-top: 0px; margin-top: 18px; margin-bottom: -10px;display: block;} .home .articleContent .catBuble .time span{ display: none;} .home .articleContent .catBuble h3{ position: static; margin-left: -100%; font-size: 35px; margin-top: 10px;} .home .articleContent .catBuble h3 span{ position: static; display: block; font-size: 22px; margin-bottom: 5px;} .creneauBloc .recetteContent .catBuble{} .creneauBloc .recetteContent{ background-image: url(images/M-recette.png); background-position: 400px 70px; display: block;} .creneauBloc .recetteContent .catBuble h3{ color:#228467; } .creneauBloc .recetteContent .catBuble h3 span{opacity: 1; color:#80D2B1; } .creneauBloc .recetteContent .visuPrincipal{ z-index: 2; position: relative; border: solid 4px #ffffff;} .creneauBloc .recetteContent .visuPrincipal:before{ z-index: -1; content: " "; display: block; position: absolute; background-image: url(images/craft-right.png); width: 600px; height: 300px; background-position: center; background-size: cover; left: 50%; top: auto; bottom: -160px; margin-left: -300px;} .creneauBloc .recetteContent .visuPrincipal:after{ z-index: -1; top: auto; bottom: -120px; left: 0px; right: auto; background-image: url(images/M-blanc.png); display: block; height: 155px; width: 185px; transform: rotate(20deg); background-size: contain; background-repeat: no-repeat;} .creneauBloc .recetteContent .visuPrincipal a img{ width: 100%; height: auto;} .creneauBloc .recetteContent .fruits{ display: none;} .creneauBloc .recetteContent .demi{ display: block;} .creneauBloc .recetteContent .demi:nth-child(2){ padding-top: 5px; padding-left: 0px; text-align: center;} .creneauBloc .articleContent .articleTitle{ min-height: 40px; line-height: normal; margin-top: 0px; color: #228467; font-family: "Lilita One"; font-weight: normal; text-transform: uppercase; font-size: 18px;} .creneauBloc .articleContent .excerpt{ display: none; } .creneauBloc .articleContent .cta{ background:#ECB2A3; border-color: #ECB2A3; margin-top: 5px;} .creneauBloc .articleContent .cta:hover{ background:#ffffff;} .creneauBloc .articleContent .hashBar{ display: none;} .creneauBloc .hlf-banner{ border: solid 4px #ffffff; position: relative; } .creneauBloc .lifestyleContent{ margin-top: 0px; padding-top: 0px; padding-bottom: 60px; z-index: 1;} .creneauBloc .pointillesLifestyle{background:none;} .creneauBloc .pointillesLifestyle:before{top: -300px; margin-left: -300px; z-index: 1;} .creneauBloc .lifestyleContent .catBuble{ left: 30px; top: -280px; bottom: auto;} .creneauBloc .lifestyleContent:after{ display: none;} .creneauBloc .hlf-bannerContainer{ position: relative;} .creneauBloc .hlf-bannerContainer:after{ left: 90px; top: 150px; opacity: .6; width: 150px; height: 110px; transform: rotate(-20deg); z-index: -1; background: url(images/M-blanc.png) no-repeat;background-size: contain;content: " ";display: block;position: absolute;} .creneauBloc .lifestyleContent .demi{ min-width: 33%;} .creneauBloc .lifestyleContent .lifeFruits{ display: none;} .creneauBloc .lifestyleContent .articleTitle{ display: none;} .creneauBloc .lifestyleContent .demi:nth-child(2){ padding: 0; margin: 0; width: 0; position: absolute;} .creneauBloc .lifestyleContent .demi:nth-child(3){ width: 100%; text-align: center; padding-bottom: 100px;} .creneauBloc .lifestyleContent .demi .lfdemicontainer{ display: none;} .creneauBloc .lifestyleContent .demi .cta{ display: none;} .creneauBloc .lifestyleContent .demi .lfdemicontainer:before{ display: none;} .creneauBloc .articleContent.lifestyleContent .swiper-button-prev, .creneauBloc .articleContent.lifestyleContent .swiper-button-next{ opacity: .5;} .creneauBloc .articleContent.recetteContent::before{margin-left: -120px} .catBuble .swiper-button-prev{ top: 46px; left: 12px; z-index: 6} .catBuble .swiper-button-next{ top: 46px; right: 12px; z-index: 6} #homeSwiper .home-prev.first{ bottom: auto; top: 380px; left: 12px;} #homeSwiper .home-next.first{ bottom: auto; top: 380px; right: 12px;} #homeSwiper .home-prev.first:before, #homeSwiper .home-prev.first:after, #homeSwiper .home-next.first:before, #homeSwiper .home-next.first:after{ background: #7fa5d2;} #homeSwiper .home-prev.second{ bottom: 240px; left: 5px;} #homeSwiper .home-next.second{ bottom: 240px; right: 5px;} #homeSwiper .home-pagination.first{ bottom: auto; top: 550px;} #homeSwiper .home-pagination.second{ bottom: 170px; } #homeSwiper .home-pagination.first .swiper-pagination-bullet-active{ background:#7fa5d2;} #homeSwiper .home-pagination.second .swiper-pagination-bullet-active{ background:#d23540; } .materneContent{ text-align: center; padding-top: 0px; padding-left: 0px; padding-right: 0px; display: block; width: calc(100% + 16px); margin-left: -8px;} .home .materneContent .catBuble{ top: -60px; right: 40%; left: auto; width: 120px; height: 120px;} .materneContent .catBuble h3{ color:#d23540; padding-top: 20px;} .materneContent .catBuble h3 span{ color:#eda940; opacity: 1;} .materneContent:after, .materneContent:before{display: none;} .materneContent .visuPrincipal{ border: solid 4px #ffffff;} .materneContent .demi:nth-child(2){ max-width: 775px; min-width: 60%; } .materneContent .demi:nth-child(3){ max-width: 100%; min-width: 100%; padding: 30px; background-color:#fae7e1; /*background-image: url(images/M-mobile-philo.png);*/ background-repeat: no-repeat; background-position: center; background-size: 35%; } .materneContent .demi:nth-child(2) img{ } .materneContent .demi .wisiwig_content{ display: none;} .materneContent .visuPrincipal:before, .materneContent .visuPrincipal:after{display: none;} .materneContent .demi:nth-child(3):after{display: none;} .materneContent .excerpt_mobile{position: relative; display: block; font-size: 16px; font-style: italic; font-weight: bold; text-align: center; line-height: 16px !important;} .materneContent .excerpt_mobile p{ line-height: 20px; padding: 10px;} .materneContent .excerpt_mobile::before{ font-weight: 400; display: block; content: "“"; font-size: 80px; font-style: normal; color: #fff; position: absolute; left: -25px; top: 10px;} .materneContent .excerpt_mobile::after{ font-weight: 400; display: block; content: "”"; font-size: 80px; font-style: normal; color: #fff; position: absolute; right: -25px; bottom: -20px;} .materneContent .hashBar{display: none;} .materneContent .cta{ display: inline-block; margin:auto; margin-bottom: -60px;position: relative; bottom: -40px;} .home .productContent {padding-left: 0%;padding-right: 0%;padding-bottom: 0px;padding-top: 120px;} .home .productContent:before{ width: 800px; top: 150px; margin-left: -500px;} .home .productContent:after{ top: 160px; right: 15%;width: 55%;} .home .productContent .catBuble{ width: 120px; height: 120px; margin-right: -60px; left: auto; right: 50%; top: -10px;} .home .productContent .catBuble h3{color: #228467; padding-top: 20px;} #homeSwiperProd{} #homeSwiperProd .product-hslide{text-align: center;} #homeSwiperProd .product-hslide .gamThumb{ width: 70%; margin: auto; padding-top:50%; background-size: contain; background-repeat: no-repeat; background-position: center;} #homeSwiperProd .product-hslide .gamTitle{ font-family: "Lilita One"; font-size: 24px;} /*#homeSwiperProd .product-hslide .cta{ background-color: #C11D39; border: solid 4px #C11D39; }*/ #homeSwiperProd .swiper-pagination-bullets{bottom: 50px;} #homeSwiperProd .swiper-pagination-bullets .swiper-pagination-bullet-active{ background: #dd8048;} #homeSwiperProd .swiper-button-next{ bottom: 180px; right: 10px;} #homeSwiperProd .swiper-button-prev{ bottom: 180px; left: 10px;} #homeSwiperProd .swiper-button-next:before, #homeSwiperProd .swiper-button-next:after, #homeSwiperProd .swiper-button-prev:before, #homeSwiperProd .swiper-button-prev:after{background: #ECB2A3;} /* INSTAGRAM */ .innerInsta{ background: none; margin-top: 170px; } .innerInsta .innerSmall{ position: relative; top: -65px;} .instaTitle{border-radius: 100px; width: 120px; height: 120px; margin-bottom: -30px; z-index: 5; position: relative;} .instaTitle .instaTitleSmall{ font-size: 25px; padding-top: 20px; } .instaTitle .instaTitleBig{ font-size: 45px; line-height: 38px; } #instaSwiper{ width: 70%; border: solid 2px #ffffff;} #instafeed{ position: relative; } #instaModuleContainer:before{ position: relative; content: " "; display: block; width: 90%; height: 100%; background-image:url(images/MinstaMobile.png); background-size: contain; background-repeat: no-repeat; position: absolute; top: -70px; left: 40%; margin-left: -0; z-index: -1;} #instafeed:before{ display: none;} #instafeed .institem{ box-shadow: none; margin: 0px; padding-bottom: 100%; width: 100%; float:none; position: relative;} #instaSwiper .swiper-pagination-bullets .swiper-pagination-bullet-active{ background: #d23540;} .innerInsta .swiper-button-next:before, .innerInsta .swiper-button-next:after, .innerInsta .swiper-button-prev:before, .innerInsta .swiper-button-prev:after{background: #bfd2e8;} .innerInsta .swiper-button-next{ bottom: 110px; right: 10px;} .innerInsta .swiper-button-prev{ bottom: 110px; left: 10px;} #mobContactZone{ padding-bottom: 80px;text-align: center;} #mobContactZone::before{ margin-left: -240px;} #mobContactZone .title{line-height: 30px; font-family: "Lilita One"; color:#228467; font-size: 35px; margin-bottom: 20px;} #mobContactZone .title span{color: #80D2B1; font-family: "Kronika"; font-size: 22px; display: block;} #mobContactZone a{ height: 50px; width: 50px; margin: 10px; display: inline-block; background-size: contain;} #mobContactZone a.insta{ background-image: url(images/mob-insta.png);} #mobContactZone a.mail{ background-image: url(images/mob-mail.png);} #mobContactZone a.facebook{ background-image: url(images/mob-fb.png);} /* FOOTER */ footer{ background: #0D3F30; padding-top: 0px; padding-bottom: 20px;} footer .rsfootLinks{ display: none;} #footlogo{ width: 110px; position: relative; top: -25px; margin: 0 auto;} footer #footmenu{ border:none; margin-bottom: 20px;} #footmenu ul{ display: block; padding: 0;} #footmenu ul li a{ padding: 2px 0; text-align: center; width: 100%;} .desktop #footmenu ul li a:hover{ text-decoration: underline;} #footBaseline{ color: #ffffff; font-size: 14px; } /* FICHE RECETTE */ .recetteContent.nothome{ font-weight: 500; display: block; padding: 130px 40px 0px 40px; } .recetteContent.nothome::after{ display: none;} .recetteContent.nothome::before{ top: -190px; margin-left: -240px;} .recetteContent.nothome .demi{ position:static;} .recetteContent.nothome .demi:first-child{ padding:0px; } .recetteContent.nothome .visuPrincipal{ border: solid 4px #ffffff; position: relative; width: 100%;} .recetteContent.nothome .visuPrincipal:before{ display: none;} .recetteContent.nothome .visuPrincipal:after{ display: none;} .recetteContent.nothome .visuPrincipal .fruits{position: absolute; left:auto; right: -50px; bottom: -70px; width: 180px; height: auto;} .recetteContent.nothome .visuPrincipal img{ display: block; width: 100%; height: auto;} .recetteContent.nothome .visuPrincipal.noleaf:after, .recetteContent.nothome .visuPrincipal.noleaf:before{ display: none;} .recetteContent.nothome .articleTitle{ font-size: 30px; line-height: 30px; margin-bottom: 0px; position: absolute; text-align: center; width: 90%; top: 0px; left: 5%;} .recetteContent.nothome .encart_recette{ background: #80D2B1; padding: 20px; margin-top: 80px; color: #fff; display: block; margin-bottom: 10px;} .recetteContent.nothome .desc_recette{ font-weight: 500; padding: 0px; } .recetteContent.nothome .desc_recette .mobilRecBloc{ font-weight: 500; padding: 20px; background: #fff; margin-bottom: 10px;} .recetteContent.nothome .desc_recette .recSubtitle{ text-transform: uppercase; color:#228467; font-size: 16px; margin-top: 0px !important; padding-bottom: 10px ;} .recetteContent.nothome .desc_recette .recSubtitle:first-child{ margin-top: 15px;} .recetteContent.nothome .desc_recette .recSubtitle:before{ display: none;} .recetteContent.nothome .desc_recette .recSubtitle:first-child:before{ display: none;} .recetteContent.nothome .desc_recette .hashBar{ display: none;} .back-rec-btn{ bottom: auto; top: -5px; left: 5px;} .back-rec-btn:before, .back-rec-btn:after{ background:#ECB2A3; } .recetteContent.nothome .craftMobile:before{top: -190px; margin-left: -240px;} /* LAST POSTS */ .innerLastposts{background: none; margin-top: 0px; position: relative; padding-bottom: 60px;} .innerLastposts .triangle{ display: none;} .innerLastposts .bigHeadingMM{ position: relative; display: block; margin-top: 40px; padding-bottom: 10px; padding-top: 20px; text-align: center;} .innerLastposts .bigHeadingMM a{ text-decoration: none; border: none; display: inline-block; } .innerLastposts .bigHeadingMM .logo{ height: 80px; width: auto; display: inline-block; flex: none; position: static; left: 0; margin-left: 0; margin-right: 10px; top: 0;} .innerLastposts .bigHeadingMM h2{ padding-top: 45px; display: inline-block; position: relative; top: -30px;color: #0D3F30; font-size: 43px; line-height: 0.1em; font-family: "Lilita One"; text-transform: uppercase; } .innerLastposts .bigHeadingMM h2 span{text-align: left; font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 10px; line-height: 13px; position: absolute; left: 0; top: 65px; width: 100%;} .innerLastposts .bigHeadingMM h2 sup.reg{text-align: left; font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 16px; line-height: 16px; position: absolute; left: 185px; top: 28px; width: 100%;} .innerLastposts .baseline{ text-align: center; text-transform: uppercase; font-weight: bold; font-size: 14px; color: #228467; margin-top: 10px;} .innerLastposts .baseline span{ font-family: "Kronika"; color: #80D2B1; font-size: 25px; text-transform: lowercase; display: block;} #lastPostsSwiper{ width: calc(100% - 140px); margin: auto;} .lastPostsModule .pSquare{ width: 100%; margin: 0px; border: solid 4px #ffffff; padding-top: 150%; display: block; float: none;} .lastPostsModule .pSquare .p_img{ border: none;} .lastPostsModule:before{ top: -70px; } .lastPostsModule .pSquare .pTitle span{ font-size: 30px; line-height: 40px;} .lastPostsModule .pSquare .imgMp{ top: 28%;} .lastPosts-button-prev{ bottom: 50%; margin-bottom: -20px; left: 30px;} .lastPosts-button-next{ bottom: 50%; margin-bottom: -20px; right: 30px;} /* LISTE DES RECETTES */ .bigHeading{ text-align: center;} .bigHeading h2{ color: #0D3F30; font-size: 1em; line-height: 1em; font-family: "Lilita One"; text-transform: uppercase; position: relative; display: inline-block; padding-top: 0px; margin-top: -50px;margin-bottom: -110px;} .bigHeading h2 span{ font-family: "Kronika"; text-transform: none; color: #0D3F30; font-size: 0.7em; line-height: 0.5em; position: relative; left: 0px; top: 0px;} .introText{ font-weight: 500; line-height: 1.2em; margin: 30px auto 30px auto; width: 90%; display: block;} .catNav{ padding: 30px 0; width: 100%; position: relative; z-index: 2; margin-bottom: 0px;} .catNav .catNavList{ text-align: center; padding: 0px 20px;} .catNav .catNavList a{ margin: 0px; position: relative; font-size: 10px; font-weight: normal; display: inline-block; text-decoration: none; background: #ffffff; color: #ECB2A3; text-transform: uppercase; padding: 4px 10px;; border-radius: 20px;} .catNav .catNavList a.on{ background-color: #ECB2A3; color: #ffffff; font-weight: bold;} .catNav .catNavList a.on:after{ content:" "; display: block; height: 10px; width: 10px; transform: rotate(45deg); background: #ECB2A3; position: absolute; bottom: -5px; left: 50%; margin-left: -5px;} .catNav .catNavList .nav-prev, .catNav .catNavList .nav-next{ bottom: 37px;} .list-recettes{ width: calc(100% - 20px); margin-left: 10px;margin-bottom: 20px;} .list-recettes .recetteSquare{ cursor: pointer; background-color: #ffffff; position: relative; display: inline-block; width: calc(50% - 10px); margin: 5px; padding-top: 47%; position: relative; float: left;} .list-recettes .recetteSquare .rec_img{ border:solid 4px #ffffff; } .list-recettes .recetteSquare .recTitle{ display: none;} .seeOtherTitle{ font-size: 16px; font-weight: 600; text-transform: uppercase; padding-left: 0px; display: block;} .seeOtherTitle .orange{ font-size: 25px; } .seeOtherTitle .red{ font-size: 25px; } /* LIFESTYLE */ .lifestyleTitleMobile{ margin-top:-80px; margin-bottom: -20px; padding-bottom: 0;} .lifestyleTitleMobile .bigHeadingMM:before{ top: -100px; margin-left: -260px;} .list-articles{ display: block;} .list-articles .articleContent{ display: block; margin: 0px; padding: 0; margin-bottom: -20px;} .list-articles .articleContent:before{ display: none;} .list-articles .articleContent:after{ display: none;} .list-articles .articleContent .demi:nth-child(1){ text-align: center; background: #fbf7f3; background: url(images/craft-mobile.png); background-size: contain; background-position: top center;} .list-articles .articleContent .catBuble{ right: auto; left: auto; position: relative; margin-left:0px; text-align: right; display: inline-block; top: 40px;} .list-articles .articleContent .catBuble h3{ right: auto; left: -100% !important; text-align: center;} .list-articles .articleContent .catBuble h3 span{ right: auto; left: 0; width: 100%; text-align: center;} .list-articles .articleContent .articleTitle{ background: #ffffff; margin: 0; font-size: 17px; font-family: 'Montserrat'; text-transform: none; color: #000; font-weight: bold; position: relative; z-index: 5; line-height: 20px; padding: 10px;width: calc(100% + 16px); margin-left: -8px;} .list-articles .articleContent .visuPrincipal{ width: calc(100% + 16px); margin-left: -8px; border: none; position: relative; z-index: 5;} .list-articles .articleContent .visuPrincipal img{ width: 100%; height: auto;} .list-articles .articleContent .visuPrincipal:before{display: none;} .list-articles .articleContent .demi{ padding: 0px !important; color: #333333; } .list-articles .articleContent .demi:nth-child(2) .articleIntro{ background: #FEF4F0; width: calc(100% + 16px); margin-left: -8px; padding: 20px; font-weight: normal; margin-top: 0px; padding-bottom: 40px;} .list-articles .articleContent:nth-child(even):before{z-index: -1; content: " "; display: block; position: absolute; background-image: url(images/craft-left.png); width: 1480px; height: 655px; background-position: center; background-size: cover; left: 50%; top: 0px; margin-left: -740px; } .list-articles .articleContent .cta{ position: absolute; bottom: -15px; z-index: 6; left: 50%; margin-left: -100px; width: 200px;} /* PRODUITS */ .catNav .produitCatNavList{ padding: 0 !important; display: flex; flex-wrap: wrap;} .catNav .produitCatNavList a{flex:1; font-size: 10px; padding: 4px 10px; margin: 1px; border-radius: 40px; background:#ECB2A3; color:#ffffff; } .page-template-template-produits{ background-image: url(images/craft-mobile.png); background-repeat: no-repeat; background-size: contain; background-position: top center; } .page-template-template-produits .bigHeading:before{ display: none; } .gamme{ margin: 0px 0; position: relative;} .gamme .gammetitle{ display: block; width: 100%; height: 50px; margin-bottom: 50px; position: absolute; left: 0; top: 0;} .gamme:nth-child(odd):after, .gamme:nth-child(even):after, .gamme:nth-child(1):after{ content: " "; display: block; background-image: url("images/M-blanc.png"); background-repeat: no-repeat; background-size: contain; width: 65% !important;height: 200px; top: 70px !important; right: 10px !important; position: absolute; transform: rotate(20deg) scaleX(1) !important; } .gamme .gammetitle > h2{ font-size: 22px; line-height: 55px; text-align: center; position: relative; padding:0px !important;} .gamme .gammetitle > h2:before{ display: none !important;} .gamme .gammetitle > div{ display: none;} .gamme .gammetitle > div:after{ display: none;} .gammebloc { display: block;} .gammebloc .contentContainer{ flex: none; width: calc(100% + 16px); margin-left: -8px; background: #FEF4F0; color: #000; padding: 20px;font-weight: 500; } .gammebloc .contentContainer .wisiwig_content{ padding-left:0px; font-size: 16px; } .mobile .deployable{height: 130px; overflow: hidden; position: relative;} .mobile .bigdeployable{height: 180px; overflow: hidden; position: relative;} .mobile .deployable.open{ height: auto;} .mobile .deployable:after{ display: block; height: 50px; width: 100%; content: " "; background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0)); position: absolute; bottom: 0; left: 0;} .mobile .deployable.open:after{ display: none;} .gammebloc .contentContainer .wisiwig_content p{line-height: 22px;} .mobile .readmore{ display: inline-block; width: 140px; position: relative; left: 50%; margin-left: -75px; top: -5px;} .gammebloc .sliderContainer { flex: none; width: 100%; height: 300px; overflow: hidden; border-width: 4px; border-style: solid; border-color: #228467; width: calc(100% + 16px); margin-left: -8px; background: url(images/craft-mobile-invert.png); background-repeat: no-repeat; background-size: contain; background-position: bottom center;} .gammebloc .sliderContainer:before{ top: 20px; margin-left: -300px; width: 500px; height: 200px;} .gamme .swiper-container {width: 100%; max-height: 300px; margin-left: auto;margin-right: auto;} .gamme .gallery-top {height: 100%; width: 100%; position: relative; padding: 60px 40px 30px 40px; } .gamme .gallery-top:after{ display: none;} .gamme .gallery-thumbs {display: none;} .gamme .swiper-button-next:before, .gamme .swiper-button-prev:before, .gamme .swiper-button-next:after, .gamme .swiper-button-prev:after{ display: none;} .gamme .swiper-button-next{ transform: scale(.6); bottom: 50%; margin-bottom: -15px; right: 10px; display: none;} .gamme .swiper-button-prev{ transform: scale(.6); bottom: 50%; margin-bottom: -15px; left: 10px; display: none;} /* MATERNE */ .materne-page .mat_title{ font-size: 40px; margin-top: 0px; z-index: 2; position: relative;} .materne-page .mat_title:before{ display: none} .materne-page #notrephilosophie .mat_title:before, .materne-page #nosautresmarques .mat_title:before{ display: block; width:240px; height: 120px; background-position: bottom center; background-size: contain; background-repeat: no-repeat; margin-left: -110px; top: 0px; } .materne-page .mat_title span{ font-size: 25px; display: block;} .materne-page .banner{ width: 100%; padding-top: 80%; border: solid 4px #fff; margin-bottom: 0px;} .introContainer{ background: #FEF4F0; margin-bottom: 40px; z-index: 4; position: relative;} .introContainer .readmore{ top : -10px;} .introContainer .deployable{ height : 180px;} .materne-page .intro{ font-size: 16px; color: #000; line-height: 1.3em; padding: 20px;} .materne-page .intro:before{ display: none;} .materne-page .mat_subtitle{ color: #ECB2A3;font-size: 18px; text-align: center; text-transform: uppercase; margin-bottom: 10px; position: relative; z-index: 1;} .materne-page .mat_subtitle:after{ display: block; content: " "; z-index: -1;position: absolute; left: 50%; background-image: url("images/M-title-materne.png"); width:240px; height: 120px; background-position: bottom center; background-size: contain; background-repeat: no-repeat; margin-left: -110px; top: -30px; } .materne-page .mat_subtitle:before{ top: -150px; margin-left: -350px; z-index: -1;} .materne-page .engage-blocs{ display: block; width:calc(100% + 16px); margin-left: -8px; margin-bottom: 50px; z-index: 3; position: relative;} .materne-page .engage-blocs .swiper-container{ background: #FEF4F0; padding-bottom: 30px;} .materne-page .engage-blocs:before{ display: none;} .materne-page .engage-blocs .bloc{ flex: none; max-width: 100%; min-width: 100%; padding: 4px; background: #FEF4F0;} .materne-page .engage-blocs .bloc .btitle{color: #0D3F30; padding: 0 10px; text-align: center; line-height: 1em;} .materne-page .engage-blocs .bloc .bcontent{color: #0D3F30; padding: 10px 20px; font-weight: 500;} .materne-page .engage-blocs .bloc .bcontent .ml{ font-style: italic; font-size: 0.8em;} .materne-page .engage-blocs .bloc .bcontent p{ font-size: 16px; line-height: 1.3em;} .materne-page .engage-blocs .swiper-pagination{ right: 30px !important; left: auto; display: inline-block; width: auto;} .materne-page .engage-blocs .swiper-pagination-bullet{ background: #ffffff; border:#ECB2A3 solid 1px;} .materne-page .engage-blocs .swiper-pagination-bullet-active{ background: #ECB2A3;} .materne-page .engage-blocs .swiper-button-next{ bottom: 6px; right: 10px;} .materne-page .engage-blocs .swiper-button-prev{ bottom: 6px; left: auto; display: none;} .materne-page #nosautresmarques .mat_subtitle:after{ display: none;} .materne-page .mat_subsubtitle{ font-size: 14px; font-weight: 600; margin-top: 10px; margin-bottom: 20px;} .otherPush{ text-align: center; margin-bottom: 40px;} .otherPush .brand{ height: 130px; width: 130px; margin: 0 10px; background-size: contain; } .otherPush .brand p{ position: absolute; bottom: 12px; width: 60%;left: 20%; font-size: 8px; line-height: 1.1em;} /* CONFIPOTE */ .confipage{ margin-bottom: -30px; padding-bottom: 40px;} .confipage #confiSliderZoneMobileContainer{ background-image: url(images/confi-bg-mobile.png); background-size: contain; background-repeat: no-repeat; background-position: center;} .confipage #confiSliderZoneMobileContainer #confiSliderZoneMobile{ } .confipage #confiSliderZoneMobileContainer #confiSliderZoneMobile .swiper-slide{ width: 100%; padding-top: 100%; background-size: 55%} .confipage .swiper-button-next{ margin: 0; bottom: 50%; right: 0px; margin-bottom: -10px;} .confipage .swiper-button-prev{ margin: 0; bottom: 50%; left: 0px; margin-bottom: -10px;} .confipage .swiper-pagination{ bottom: 45px;} .confipage .swiper-pagination-bullet-active{ background: #ECB2A3;} .confiLogo{ position: absolute; top: 20px; left: 25%; margin-left: 0px; width: 50%; height: auto;} .confiTitle{ font-size: 20px; margin-bottom: 30px; padding-top: 60px; margin-top: 0px;} .confipage .wisiwig_content{ color: #000; max-width: 100%; font-size: 16px; } .confipage .wisiwig_content p{ line-height: 1.2em;} .confipage .textafter{ color: #000; max-width: calc(100% + 16px); width: calc(100% + 16px); background: #faf6eb; margin: auto; margin-left: -8px; font-size: 16px; line-height: 1.2em; padding: 20px; padding-bottom: 40px;} .confiRecettesCTA{ position: relative; font-family: "Montserrat"; text-transform: none; font-size: 14px; color: #fff; margin-top: -30px; font-weight: bold;background: #e41a38; border-radius: 40px; padding: 10px 20px; max-width: 60%;} .confiRecettesCTA:after{ display: none;} .instaConfipote #instaModuleContainer::before{ display: none;} .instaConfipote{ margin-top: 30px; background: none;} .instaConfipote .innerSmall{ top: 0px;} .instaConfipote .instaTitleImg{ max-width: 90%; } .instaConfipote .instaTitleConfi{ font-size: 20px; margin-bottom: 20px;} .instaConfipote .swiper-pagination{ bottom: 10px !important;} .instaConfipote .swiper-button-next{ right: 20px; bottom: 130px} .instaConfipote .swiper-button-prev{ left: 20px; bottom: 130px} .instaConfipote .swiper-button-next:after, .instaConfipote .swiper-button-next:before, .instaConfipote .swiper-button-prev:after, .instaConfipote .swiper-button-prev:before{ background: #e41a38;} #apricot{ width: 22%; max-width: 430px; left:0%; top: 0px; z-index: 1;} #strawberry{ right:0%; top: -35px; width: 20%; } #cherry{ display: none;} #raspberry{ display: none;} #percents{ right:10%; top: 50%; margin-top: 30px; width: 20%; z-index: 3} /* ARTICLE LIFESTYLE */ .content_lifestyles{ padding-top: 0px !important;} .content_lifestyles .articleContent.nothome{ display: block; margin: 0px; padding: 0; margin-bottom: -20px;} .content_lifestyles .articleContent.nothome:before{ display: none;} .content_lifestyles .articleContent.nothome:after{ display: none;} .content_lifestyles .articleContent.nothome .demi:nth-child(1){ text-align: center; background: #fbf7f3; background: url(images/craft-mobile.png); background-size: contain; background-position: top center;} .content_lifestyles .articleContent.nothome .catBuble{ right: auto; left: auto; position: relative; margin-left:0px; text-align: right; display: inline-block; top: 40px;} .content_lifestyles .articleContent.nothome .catBuble h3{ right: auto; left: -100% !important; text-align: center;} .content_lifestyles .articleContent.nothome .catBuble h3 span{ right: auto; left: 0; width: 100%; text-align: center;} .content_lifestyles .articleContent.nothome .articleTitle{ background: #ffffff; margin: 0; font-size: 17px; font-family: 'Montserrat'; text-transform: none; color: #000; font-weight: bold; position: relative; z-index: 5; line-height: 20px; padding: 10px;width: calc(100% + 16px); margin-left: -8px;} .content_lifestyles .articleContent.nothome .visuPrincipal{ width: calc(100% + 16px); margin-left: -8px; border: none; position: relative; z-index: 5;} .content_lifestyles .articleContent.nothome .visuPrincipal img{ width: 100%; height: auto;} .content_lifestyles .articleContent.nothome .visuPrincipal:before{display: none;} .content_lifestyles .articleContent.nothome .demi{ padding: 0px !important; color: #333333; } .content_lifestyles .articleContent.nothome .demi .articleIntro{ margin-bottom: -30px;} .content_lifestyles .articleContent.nothome .demi .articleIntro, .content_lifestyles .articleContent.nothome .demi .articleText{ background: #fff; width: calc(100% + 16px); margin-left: -8px; padding: 20px; font-weight: normal; margin-top: 0px; padding-bottom: 40px;} .content_lifestyles .articleContent.nothome .demi .articleText{ margin-top:0px; font-size: 16px; line-height: 1.4em;} .content_lifestyles .articleQuote{ font-weight: bold; font-style: italic; position: relative; font-size: 16px; color: #000 !important; text-align: center; width: calc(100% + 16px); margin-left: -8px; padding: 60px 30px; background-color:#e8b264; background-image: url(images/M-mobile-philo.png); background-repeat: no-repeat; background-position: center; background-size: 35%; } .content_lifestyles .articleQuote::before{ font-weight: 400; display: block; content: "“"; font-size: 80px; font-style: normal; color: #fff; position: absolute; left: 5px; top: 40px;} .content_lifestyles .articleQuote::after{ font-weight: 400; display: block; content: "”"; font-size: 80px; font-style: normal; color: #fff; position: absolute; right: 5px; bottom: 0px;} .articleDoubleVisu{ margin-top: 30px;} .articleDoubleVisu img{ border: solid 4px #fff; width: 100%; margin-right: 0px; margin-bottom: 10px;} /* CONTACT */ .contact-form{ padding: 20px; padding-top: 0px; margin-top: -20px;} .contact-form input[type=text], .contact-form input[type=tel], .contact-form input[type=email], .contact-form textarea{ font-size: 16px; border-radius: 20px; padding: 12px;} .biglabel{ font-size: 12px; } .label{ font-size: 12px; font-weight:normal; padding-left: 10px;} .inlinelabel{font-size: 12px; font-weight: normal;} .contact-form .demi, .contact-form .full{ width: 100%; max-width: 100%; min-width: 100%; position: relative;} .contact-form .labelDemiLine .label{ margin-bottom: 50px;} .contact-form .inputDemiLine{ margin-top: -135px; margin-bottom: -20px;} .contact-form .inputDemiLine *:first-child{ margin-bottom: 20px;} #group-gamme{ max-width: 100%; min-width: 100%; margin-top: 10px; z-index: 1;} .inputLineTuto{ display: block;} .contact-form .demismall{ position: relative; max-width: calc(100% - 115px); min-width: calc(100% - 115px); display: inline-block;} .contact-form .tuto{ height: 34px; width: 100px; background-size: contain; display: block; content: " "; margin-left: 10px; margin-bottom: 0px; position: relative; top: 12px;display: inline-block;} .contact-form .tuto1{ margin-right: 0px;} .selectize-input, .selectize-input.full, .selectize-input.input-active { font-size: 14px; padding: 12px; } .selectize-dropdown{ padding-top: 40px; margin-top: -40px; font-size: 14px; } .selectize-control.single .selectize-input:after{ right: 20px;} .sfi-js .sfi-wrapper{ margin-top: 20px;} .sfi-js .sfi-wrapper .sfi-filename{ height: 43px; font-size: 14px; padding: 12px; } .sfi-js .sfi-wrapper .sfi-trigger{ height: 43px; } input[type=submit]{ border: none; transition: all .3s ease; background-color:#ECB2A3 !important; color: #ffffff; font-weight: bold;font-size: 18px; border-radius: 40px; padding: 12px 40px; margin-top: 40px; cursor: pointer; display: inline-block; text-align:center; text-transform: uppercase; } .desktop input[type=submit]:hover{ transform: scale(1.1);} input[type=submit]:disabled{ opacity: .5; transform: scale(1) !important;} .help-block.form-error{ position: absolute; right: 10px; bottom: -16px;} .contact-form .demismall .help-block.form-error{ bottom: 4px;} .contact-header .demi h1{ font-size: 50px; text-align: center;} .contact-header .demi h1 span{ font-size: 30px; color: #0D3F30;} .contact-header{padding: 20px; } .contact-header .demi:first-child{ width: 100%; max-width: 100%; min-width: 100%;} .contact-header .demi:nth-child(2){ display: none;} .contact-header .demi img{ display: none;} .contact-header .contactContent, .contact-header .emailContent, .contact-header .tvaContent{ max-width: 280px; margin: auto; margin-top: 20px;} .contact-header .contactContent h2{ font-size: 18px;} .contact-header .cristal{ display: block; height: 73px; width: 280px; background: url(images/cristal.png); background-size: contain; background-repeat: no-repeat; margin: auto; margin-top: 20px;} .contact-header .cristal span{ color: #b1b1b3; font-weight: 500; font-size: 16px; position: absolute; top: 7px; right: 18px;} .formtitle{ margin-left: 0px; font-size: 25px; line-height: 75px; text-align: center; width: 100%; margin-top: 50px;} .contact-header .points{display: none;} } /* 2021-06 : TO GOOD TO GO */ .innerTgtg { z-index: 1; width: calc(100% - 16px); max-width: 1350px; margin: auto; position: relative;} .materne-page .to-good-to-go-blocs { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 80px;} .materne-page .to-good-to-go-blocs .tgtg-bloc { flex: auto; max-width: 50%; min-width: 50%; padding: 20px; margin-top: 30px; background: #FEF4F0;} .materne-page .to-good-to-go-blocs .tgtg-bloc.bvisu { padding-left: 6%; } .materne-page .to-good-to-go-blocs .tgtg-bloc .visu { width: 100%; margin-bottom: 0px; padding-bottom: 70%; background-size: cover; background-repeat: no-repeat; background-position: center;} .materne-page .to-good-to-go-blocs .tgtg-bloc .content { color: #0D3F30; padding: 10px 16% 10px 10px; font-size: 16px; line-height: 1.4em; font-weight: 500;} .materne-page .to-good-to-go-blocs .tgtg-bloc .title { color: #0D3F30; padding: 0 16% 0 10px; text-transform: uppercase; font-weight: bold; font-size: 17px; line-height: 1.4em;} .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-desk { display : block; } .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-mob { display : none; } .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-desk .lien-title, .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-mob .lien-title { text-align: center; color: #ECB2A3; font-weight: 500; font-size: 20px; margin-top: 0px; margin-bottom: 10px;} .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-desk .lien, .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-mob .lien { text-align: center; font-size: 16px; font-weight: 500; color: #0D3F30; margin-bottom: 20px;} @media screen and (min-width: 1024px) and (max-width: 1439px) { .materne-page .to-good-to-go-blocs .tgtg-bloc.bvisu { padding-left: 2%; } } @media screen and (min-width: 481px) and (max-width: 1024px) { .materne-page .to-good-to-go-blocs .tgtg-bloc.bvisu { padding-left: 2%; } .materne-page .to-good-to-go-blocs .tgtg-bloc .content { padding: 10px;} .materne-page .to-good-to-go-blocs .tgtg-bloc .title { padding: 0 10px;} .materne-page .to-good-to-go-blocs .tgtg-bloc .content p { font-size: 14px; line-height: 1.3em; } .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-desk .lien-title, .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-mob .lien-title { font-size: 17px; } .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-desk .lien, .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-mob .lien { font-size: 14px; } } @media screen and (max-width: 480px) { .materne-page .to-good-to-go-blocs { display: block; width: calc(100% + 16px); margin-left: -8px; margin-bottom: 50px;z-index: 3; position: relative;} .materne-page .to-good-to-go-blocs .tgtg-bloc { flex: none; max-width: 100%; min-width: 100%; padding: 20px; background: #FEF4F0; margin-top: 0px;} .materne-page .to-good-to-go-blocs .tgtg-bloc.bvisu { padding-left: 5%; } .materne-page .to-good-to-go-blocs .tgtg-bloc .visu { margin-bottom: 0px;} .materne-page .to-good-to-go-blocs .tgtg-bloc .content { padding: 10px;} .materne-page .to-good-to-go-blocs .tgtg-bloc .content p { line-height: 1.3em; } .materne-page .to-good-to-go-blocs .tgtg-bloc .title { color: #0D3F30; padding: 0 10px; text-align: center; line-height: 1em;} .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-desk { display : none;} .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-mob { display : block;} .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-desk .lien-title, .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-mob .lien-title { text-align: center; color: #ECB2A3; font-weight: 500; font-size: 17px; margin-top: 20px; margin-bottom: 10px;} .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-desk .lien, .materne-page .to-good-to-go-blocs .tgtg-bloc .lien-mob .lien { text-align: center; font-size: 14px; font-weight: 500; color: #0D3F30; margin-bottom: 20px;} } /*///////////////////////////////////////////////////////////////////////////////*/ /* 2022-03 : PAGE PREBIOTIQUE */ /*///////////////////////////////////////////////////////////////////////////////*/ .prebiotique-title { color: #228467; font-size: 38px; font-family: "Lilita One"; text-align: center; text-transform: uppercase; margin: 80px 0 40px 0; } .prebiotique-title span { color: #80D2B1; font-size: 26px; font-family: "Kronika"; text-transform: none;} .annotation { font-size: 0.6rem; line-height: 0.8rem; } .bigHeadingMM .MMbanner .prebiotique-container{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .prebiotique-zone-1 .introText { font-size: 16px; line-height: 24px; } .prebiotique-zone-1 .bloc-fond-bordure { background-color: #F3DAE2; border: 10px #fff solid; padding: 80px 100px; display: flex; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-text { flex: 1 1 50%; color: #8F428D; font-size: 16px; line-height: 24px; padding: 0 25px; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-text h2 { font-size: 38px; line-height: 48px; font-family: "Lilita One"; text-transform: uppercase; padding: 40px 0; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-image { flex: 1 1 50%; padding: 0 25px; } .prebiotique-zone-2 .introText { font-size: 16px; line-height: 22px; } .prebiotique-zone-2 .bloc-3-zones { margin: 60px 20px 20px; height: 409px; background-image: url(images/prebiotique/PROBIOTIQUES-VS-PREBIOTIQUES.png); background-repeat: no-repeat; background-size: contain; background-position: center; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 { position: relative; width: 40%; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text { position: absolute; top: 0px; left: 0px; text-align: center; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text .titre { padding: 60px 20px 0; font-family: "Kronika"; font-size: 30px; color: #0D3F30; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text .texte { padding: 20px 110px 0; font-size: 16px; line-height: 24px; color: #0D3F30; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 { position: relative; width: 40%; margin-left: 60%; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text { position: absolute; top: 0px; left: 0px; text-align: center; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text .titre { padding: 95px 20px 0; font-family: "Kronika"; font-size: 30px; color: #FFFFFF;} .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text .texte { padding: 20px 100px 0; font-size: 16px; line-height: 24px; color: #FFFFFF;} .prebiotique-zone-2 .bloc-2-zones { padding: 20px; display: flex; } .prebiotique-zone-2 .bloc-2-zones .bloc-1 { flex: 1 1 50%; } .prebiotique-zone-2 .bloc-2-zones .bloc-2 { flex: 1 1 50%; } .prebiotique-zone-3 .text-reduit { font-size: 16px; text-align: center; padding: 0 33%; } .prebiotique-zone-3 .gamme { margin-top: 10px; } .prebiotique-zone-3 .bloc-3-zones { margin: 60px 20px 20px; height: 438px; background-image: url(images/prebiotique/INGREDIENTS.png); background-repeat: no-repeat; background-size: contain; background-position: center; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 { position: relative; width: 43%; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text { position: absolute; top: 0px; left: 0px; text-align: center; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text .titre { padding: 70px 30px 0; font-family: "Kronika"; font-size: 30px; color: #FFFFFF; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text .texte { padding: 20px 160px 0; font-size: 16px; line-height: 24px; color: #FFFFFF; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 { position: relative; width: 35%; margin-left: 65%; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text { position: absolute; top: 0px; left: 0px; text-align: center; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text .titre { padding: 30px 20px 0; font-family: "Kronika"; font-size: 30px; line-height: 34px; color: #FFFFFF;} .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text .texte { padding: 20px 90px 0; font-size: 16px; line-height: 24px; color: #FFFFFF;} .prebiotique-zone-4 .faq { padding-top: 20px; padding-bottom: 100px; } .faq-item { background-color: #ffffff; padding: 10px 20px; margin-bottom: 3px; } .faq-ques { min-height: 50px; } .faq-ques .bloc-ques { display: flex; } .faq-ques .bloc-ques .bloc-text { flex: 1 1 90%; font-weight: bold; font-size: 16px; } .faq-ques .bloc-ques .bloc-text .text-ques{ display: table; min-height: 50px; } .faq-ques .bloc-ques .bloc-text .text-ques span{ font-weight: bold; display: table-cell; vertical-align: middle; } .faq-ques .bloc-ques .bloc-toggle { flex: 1 1 10%; text-align: right; } .faq-rep { margin-top: 10px; } .control-me { font-size: 16px; display: none; } label { background: #ffffff; padding: 0; font-size: 40px; } label::after { content: "+"; cursor: pointer; } .check-with-label:checked + .faq-ques .bloc-ques .bloc-toggle label.label-for-check::after { content: "-"; } #toggle:checked ~ .control-me { display: block; } #toggle2:checked ~ .control-me { display: block; } #toggle3:checked ~ .control-me { display: block; } #toggle4:checked ~ .control-me { display: block; } #toggle5:checked ~ .control-me { display: block; } #toggle6:checked ~ .control-me { display: block; } #toggle7:checked ~ .control-me { display: block; } #toggle8:checked ~ .control-me { display: block; } #toggle9:checked ~ .control-me { display: block; } #toggle10:checked ~ .control-me { display: block; } #toggle11:checked ~ .control-me { display: block; } #toggle12:checked ~ .control-me { display: block; } #toggle13:checked ~ .control-me { display: block; } #toggle14:checked ~ .control-me { display: block; } .visually-hiddden { position: absolute; left: -100vw; /* Note, you may want to position the checkbox over top the label and set the opacity to zero instead. It can be better for accessibilty on some touch devices for discoverability. */ } /*/////////// DESKTOP 1024 ///////////*/ @media screen and (min-width: 992px) and (max-width: 1200px) { .prebiotique-zone-1 .introText { font-size: 14px; line-height: 22px; } .prebiotique-zone-1 .bloc-fond-bordure { background-color: #F3DAE2; border: 10px #fff solid; padding: 40px 30px; display: flex; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-text { flex: 1 1 50%; color: #8F428D; font-size: 14px; line-height: 20px; padding: 0 25px; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-text h2 { font-size: 28px; line-height: 38px; font-family: "Lilita One"; text-transform: uppercase; padding: 30px 0; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-image { flex: 1 1 50%; padding: 0 25px; } .prebiotique-zone-2 .introText { font-size: 14px; line-height: 22px; } .prebiotique-zone-2 .bloc-3-zones { height: 325px; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 { position: relative; width: 35%; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text { position: absolute; top: 0px; left: 0px; text-align: center; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text .titre { padding: 45px 20px 0; font-family: "Kronika"; font-size: 26px; color: #0D3F30; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text .texte { padding: 15px 45px 0; font-size: 14px; line-height: 22px; color: #0D3F30; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 { position: relative; width: 40%; margin-left: 62%; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text { position: absolute; top: 0px; left: 0px; text-align: center; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text .titre { padding: 70px 20px 0; font-family: "Kronika"; font-size: 26px; color: #FFFFFF;} .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text .texte { padding: 15px 60px 0; font-size: 14px; line-height: 22px; color: #FFFFFF;} .prebiotique-zone-3 .text-reduit { font-size: 14px; } .prebiotique-zone-3 .bloc-3-zones { height: 347px; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 { position: relative; width: 40%; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text { position: absolute; top: 0px; left: 0px; text-align: center; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text .titre { padding: 50px 20px 0; font-family: "Kronika"; font-size: 24px;color: #FFFFFF; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text .texte { padding: 15px 90px 0; font-size: 14px; line-height: 22px; color: #FFFFFF; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 { position: relative; width: 30%; margin-left: 70%; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text { position: absolute; top: 0px; left: 0px; text-align: center; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text .titre { padding: 20px 20px 0; font-family: "Kronika"; font-size: 24px; line-height: 28px; color: #FFFFFF;} .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text .texte { padding: 15px 25px 0; font-size: 14px; line-height: 22px; color: #FFFFFF;} .faq-ques .bloc-ques .bloc-text { font-size: 14px; } .faq-rep { font-size: 14px; } } /*//////////// TABLETTE //////////*/ @media screen and (min-width: 768px) and (max-width: 991px) { .prebiotique-title { color: #228467; font-size: 35px; font-family: "Lilita One"; text-align: center; text-transform: uppercase; margin: 80px 0 30px 0; } .prebiotique-title span { color: #80D2B1; font-size: 24px; } .prebiotique-zone-1 .introText { font-size: 14px; line-height: 22px; } .prebiotique-zone-1 .bloc-fond-bordure { background-color: #F3DAE2; border: 10px #fff solid; padding: 40px 5px; display: flex; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-text { flex: 1 1 50%; color: #8F428D; font-size: 14px; line-height: 20px; padding: 0 25px; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-text h2 { font-size: 28px; line-height: 34px; font-family: "Lilita One"; text-transform: uppercase; padding: 10px 0; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-image { flex: 1 1 50%; padding: 0 25px; } .prebiotique-zone-2 .introText { font-size: 14px; line-height: 22px; } .prebiotique-zone-2 .bloc-2-zones { padding: 0px; } .prebiotique-zone-2 .bloc-3-zones { height: 240px; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 { position: relative; width: 35%; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text { position: absolute; top: 0px; left: 0px; text-align: center; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text .titre { padding: 25px 20px 0; font-family: "Kronika"; font-size: 18px; color: #0D3F30; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text .texte { padding: 10px 15px 0; font-size: 12px; line-height: 18px; color: #0D3F30; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 { position: relative; width: 40%; margin-left: 62%; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text { position: absolute; top: 0px; left: 0px; text-align: center; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text .titre { padding: 45px 20px 0; font-family: "Kronika"; font-size: 18px; color: #FFFFFF;} .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text .texte { padding: 10px 30px 0; font-size: 12px; line-height: 18px; color: #FFFFFF;} .prebiotique-zone-3 .text-reduit { font-size: 14px; text-align: center; padding: 0 25%; } .prebiotique-zone-3 .bloc-3-zones { height: 255px; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 { position: relative; width: 40%; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text { position: absolute; top: 0px; left: 0px; text-align: center; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text .titre { padding: 40px 20px 0; font-family: "Kronika"; font-size: 16px;color: #FFFFFF; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text .texte { padding: 10px 60px 0; font-size: 12px; line-height: 14px; color: #FFFFFF; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 { position: relative; width: 30%; margin-left: 70%; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text { position: absolute; top: 0px; left: 0px; text-align: center; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text .titre { padding: 10px 20px 0; font-family: "Kronika"; font-size: 16px; line-height: 20px; color: #FFFFFF;} .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text .texte { padding: 10px 20px 0; font-size: 12px; line-height: 14px; color: #FFFFFF;} .faq-ques .bloc-ques .bloc-text { font-size: 14px; } .faq-rep { font-size: 14px; } } /*/////////// MOBILE ///////////*/ @media screen and (max-width: 425px) { .prebiotique-title { color: #228467; font-size: 26px; font-family: "Lilita One"; text-align: center; text-transform: uppercase; margin: 80px 0 30px 0; } .prebiotique-title span { color: #80D2B1; font-size: 18px; font-family: "Kronika"; text-align: center; text-transform: none; } .prebiotique-zone-1 .introText { font-size: 16px; line-height: 22px; } .prebiotique-zone-1 .bloc-fond-bordure { display: block; padding: 20px 5px; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-text { width: 100%; font-size: 16px; line-height: 20px; padding: 0 25px; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-text h2 { font-size: 24px; line-height: 28px; font-family: "Lilita One"; text-transform: uppercase; padding: 10px 0 20px; text-align: center; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-image { width: 100%; padding: 45px 25px 25px; } .prebiotique-zone-2 .bloc-3-zones { margin: 20px; height: 768px; background-image: url(images/prebiotique/PROBIOTIQUES-VS-PREBIOTIQUES_mobile.png); background-repeat: no-repeat; background-size: contain; background-position: center; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 { width: 100%; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text { text-align: center; position: relative; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text .titre { padding: 25px 20px 0; font-family: "Kronika"; font-size: 18px; color: #0D3F30; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text .texte { padding: 15px 70px 0; font-size: 14px; line-height: 20px; color: #0D3F30; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 { width: 100%; margin-left: 0; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text { text-align: center; position: relative; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text .titre { padding: 300px 20px 0; font-family: "Kronika"; font-size: 18px; color: #FFFFFF;} .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text .texte { padding: 15px 70px 0; font-size: 14px; line-height: 20px; color: #FFFFFF;} .prebiotique-zone-2 .bloc-2-zones { padding: 0px; display: block; } .prebiotique-zone-2 .bloc-2-zones .bloc-1 { width: 100%; background-color: #a44091;} .prebiotique-zone-2 .bloc-2-zones .bloc-2 { width: 100%; } .prebiotique-zone-3 .text-reduit { text-align: center; padding: 0 5%; } .prebiotique-zone-3 .bloc-3-zones { margin: 20px; height: 810px; background-image: url(images/prebiotique/INGREDIENTS_mobile.png); background-repeat: no-repeat; background-size: contain; background-position: center; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 { width: 100%; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text { text-align: center; position: relative; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text .titre { padding: 25px 20px 0; font-family: "Kronika"; font-size: 18px; color: #FFFFFF; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text .texte { padding: 15px 90px 0; font-size: 14px; line-height: 20px; color: #FFFFFF; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 { width: 100%; margin-left: 0; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text { text-align: center; position: relative; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text .titre { padding: 380px 20px 0; font-family: "Kronika"; font-size: 18px; line-height: 22px; color: #FFFFFF;} .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text .texte { padding: 15px 80px 0; font-size: 14px; line-height: 20px; color: #FFFFFF;} } @media screen and (min-width: 375px) and (max-width: 424px) { .prebiotique-title { color: #228467; font-size: 26px; font-family: "Lilita One"; text-align: center; text-transform: uppercase; margin: 80px 0 30px 0; } .prebiotique-title span { color: #80D2B1; font-size: 18px; font-family: "Kronika"; text-align: center; text-transform: none; } .prebiotique-zone-1 .introText { font-size: 16px; line-height: 22px; } .prebiotique-zone-1 .bloc-fond-bordure { display: block; padding: 20px 5px; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-text { width: 100%; font-size: 16px; line-height: 20px; padding: 0 25px; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-text h2 { font-size: 24px; line-height: 28px; font-family: "Lilita One"; text-transform: uppercase; padding: 10px 0 20px; text-align: center; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-image { width: 100%; padding: 45px 25px 25px; } .prebiotique-zone-2 .bloc-3-zones { margin: 20px; height: 768px; background-image: url(images/prebiotique/PROBIOTIQUES-VS-PREBIOTIQUES_mobile.png); background-repeat: no-repeat; background-size: contain; background-position: center; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 { width: 100%; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text { text-align: center; position: relative; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text .titre { padding: 50px 20px 0; font-family: "Kronika"; font-size: 18px; color: #0D3F30; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text .texte { padding: 15px 38px 0; font-size: 14px; line-height: 20px; color: #0D3F30; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 { width: 100%; margin-left: 0; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text { text-align: center; position: relative; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text .titre { padding: 280px 20px 0; font-family: "Kronika"; font-size: 18px; color: #FFFFFF;} .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text .texte { padding: 15px 40px 0; font-size: 14px; line-height: 20px; color: #FFFFFF;} .prebiotique-zone-2 .bloc-2-zones { padding: 0px; display: block; } .prebiotique-zone-2 .bloc-2-zones .bloc-1 { width: 100%; background-color: #8F428D;} .prebiotique-zone-2 .bloc-2-zones .bloc-2 { width: 100%; } .prebiotique-zone-3 .text-reduit { text-align: center; padding: 0 5%; } .prebiotique-zone-3 .bloc-3-zones { margin: 20px; height: 770px; background-image: url(images/prebiotique/INGREDIENTS_mobile.png); background-repeat: no-repeat; background-size: contain; background-position: center; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 { width: 100%; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text { text-align: center; position: relative; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text .titre { padding: 30px 20px 0; font-family: "Kronika"; font-size: 18px; color: #FFFFFF; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text .texte { padding: 15px 60px 0; font-size: 14px; line-height: 20px; color: #FFFFFF; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 { width: 100%; margin-left: 0; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text { text-align: center; position: relative; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text .titre { padding: 350px 20px 0; font-family: "Kronika"; font-size: 18px; line-height: 22px; color: #FFFFFF;} .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text .texte { padding: 15px 60px 0; font-size: 14px; line-height: 20px; color: #FFFFFF;} } @media screen and (max-width: 374px) { .prebiotique-title { color: #228467; font-size: 26px; font-family: "Lilita One"; text-align: center; text-transform: uppercase; margin: 80px 0 30px 0; } .prebiotique-title span { color: #80D2B1; font-size: 16px; font-family: "Kronika"; text-align: center; text-transform: none; } .prebiotique-zone-1 .introText { font-size: 16px; line-height: 22px; } .prebiotique-zone-1 .bloc-fond-bordure { display: block; padding: 20px 5px; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-text { width: 100%; font-size: 16px; line-height: 20px; padding: 0 25px; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-text h2 { font-size: 24px; line-height: 28px; font-family: "Lilita One"; text-transform: uppercase; padding: 10px 0 20px; text-align: center; } .prebiotique-zone-1 .bloc-fond-bordure .bloc-image { width: 100%; padding: 45px 25px 25px; } .prebiotique-zone-2 .bloc-3-zones { margin: 20px; height: 666px; background-image: url(images/prebiotique/PROBIOTIQUES-VS-PREBIOTIQUES_mobile.png); background-repeat: no-repeat; background-size: contain; background-position: center; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 { width: 100%; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text { text-align: center; position: relative; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text .titre { padding: 50px 20px 0; font-family: "Kronika"; font-size: 16px; color: #0D3F30; } .prebiotique-zone-2 .bloc-3-zones .bloc-1 .bloc-text .texte { padding: 10px 38px 0; font-size: 12px; line-height: 16px; color: #0D3F30; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 { width: 100%; margin-left: 0; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text { text-align: center; position: relative; } .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text .titre { padding: 220px 20px 0; font-family: "Kronika"; font-size: 16px; color: #FFFFFF;} .prebiotique-zone-2 .bloc-3-zones .bloc-2 .bloc-text .texte { padding: 10px 40px 0; font-size: 12px; line-height: 16px; color: #FFFFFF;} .prebiotique-zone-2 .bloc-2-zones { padding: 0px; display: block; } .prebiotique-zone-2 .bloc-2-zones .bloc-1 { width: 100%; background-color: #8F428D;} .prebiotique-zone-2 .bloc-2-zones .bloc-2 { width: 100%; } .prebiotique-zone-3 .text-reduit { text-align: center; padding: 0 5%; } .prebiotique-zone-3 .bloc-3-zones { margin: 20px; height: 660px; background-image: url(images/prebiotique/INGREDIENTS_mobile.png); background-repeat: no-repeat; background-size: contain; background-position: center; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 { width: 100%; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text { text-align: center; position: relative; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text .titre { padding: 30px 20px 0; font-family: "Kronika"; font-size: 16px; color: #FFFFFF; } .prebiotique-zone-3 .bloc-3-zones .bloc-1 .bloc-text .texte { padding: 10px 60px 0; font-size: 12px; line-height: 16px; color: #FFFFFF; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 { width: 100%; margin-left: 0; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text { text-align: center; position: relative; } .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text .titre { padding: 270px 20px 0; font-family: "Kronika"; font-size: 16px; line-height: 22px; color: #FFFFFF;} .prebiotique-zone-3 .bloc-3-zones .bloc-2 .bloc-text .texte { padding: 10px 50px 0; font-size: 12px; line-height: 16px; color: #FFFFFF;} } .selectize-dropdown-content{ max-height: 300px; } .selectize-input.dropdown-active{ z-index:2500; position: relative; } .selectize-input.dropdown-active + .selectize-dropdown{ z-index: 2000; position: absolute; } .sfi-js .sfi-wrapper .sfi-filename{ z-index: inherit; } .sfi-js .sfi-wrapper .sfi-trigger{ z-index: inherit; } label:after{ content:""; } label.label-for-check::after{ content:"+"; }