/***** picto *****/
.picto-aspirateur             { padding-left: 65px;}
.picto-aspirateur:before      { width: 43px; height: 40px; background: url("../images/picto-aspirateur.svg") 50% no-repeat; content: ""; position: absolute; left:0; top: -5px;}
.picto-nettoyage              { padding-left: 40px;}
.picto-nettoyage:before       { width: 22px; height: 40px; background: url("../images/picto-nettoyage.svg") 50% no-repeat; content: ""; position: absolute; left:0; top: -5px;}


/***** UL link *****/
.ul_link               { border-radius: 20px; background: #00a2a9; padding: 30px 40px; margin-top: 45px;}

.ul_link li            { border-bottom: 1px solid #80d1d4; height: 68px;}
.ul_link li a          { color: #ffffff; position: relative; line-height: 68px; display: block;}
.ul_link li a:after    { content: ''; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); width: 41px; height: 13px; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='41px' height='13px'><path fill-rule='evenodd'  fill='rgb(255, 255, 255)' d='M40.922,6.994 C40.922,7.404 40.674,7.755 40.321,7.909 L35.413,12.716 C35.069,13.055 34.510,13.055 34.166,12.716 C33.821,12.378 33.821,11.828 34.166,11.489 L37.736,7.994 L1.951,7.994 C1.400,7.994 0.953,7.546 0.953,6.994 C0.953,6.441 1.400,5.995 1.951,5.995 L37.782,5.995 L34.166,2.454 C33.821,2.115 33.821,1.566 34.166,1.227 C34.510,0.889 35.069,0.889 35.413,1.227 L40.469,6.179 C40.736,6.358 40.922,6.648 40.922,6.994 Z'/></svg>");}
.ul_link li:last-child { border-bottom: none;}

@media (min-width:1201px) {
    .ul_link li a:hover          { color: #005e63;}
    .ul_link li a:hover:after    { right: 10px;}
}

@media (max-width:1000px) {
    .ul_link             { background: none; border-radius: 0; padding: 0;} 
    .ul_link li          { background: #00a2a9; border-bottom: none; padding: 0 30px; border-radius: 10px; margin: 10px 0; height: 60px;}
    .ul_link li a        { line-height: 60px; height: 60px;}
}

@media (max-width:400px) {
    .ul_link li          { padding: 0 25px 0 15px;}
    .ul_link li a        { font-size: 13px;}
}

/***** banner *****/
.banner                         { position: relative; display: flex;}
.banner .texte                  { letter-spacing: .2px; max-width: 400px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 10; padding-top: 150px;}
.banner .texte .titre           { font-size: 40px; color: #00a2a9; font-weight: 300; margin-bottom: 15px;}
.banner .texte .sous_titre      { font-size: 20px; color: #6c6c6c;}
.banner .texte .ul_list         { font-size: 18px; margin-bottom: 50px;}
.banner .texte a.link-devis     { font-size: 20px; color: #ffffff; height: 60px; line-height: 60px; background: #00a2a9; padding: 0 40px; border-radius: 30px; display: inline-block; position: relative;}
.banner .texte a.link-devis #animation_container3     { position: absolute; right: -240px; top: 50%;  transform: translate(0, -50%);}


.banner .photo                  { position: relative;}
.banner .photo:after            { content: ""; width: 1200px; height: 1200px; background: #00a2a9; border-radius: 50%; position: absolute; top: -380px; right: -420px; z-index: -1;}
.banner .photo img 					{ width: 100%; height: auto; border-radius: 50%; margin: -400px 0 0 400px; display: block; position: relative;}

@media (min-width:1201px) {
    .banner .texte a.link-devis:hover     { background: url("../images/ombre-devis.webp") 102% 50% no-repeat #005e63;}
}

@media (min-width:1601px) {
    .banner     { margin-top: -200px;}
}

@media (max-width:1366px) {
    .banner .photo img                 { right: -100px; width: inherit; transform: scaleX(-1);}
    .banner .photo:after        { right: -100px;}
}

@media (max-width:1000px) {
    .banner                     { flex-direction: column-reverse; }
    .banner .texte a.link-devis #animation_container3 { display: none;}
    .banner .photo img                 { margin: -400px auto; right: inherit; border: 15px solid #00a2a9; position: absolute;
    left: 50%; transform: translate(-50%, 0); height: 1040px; width: 100%; width: auto;}
    .banner .texte              { position: relative; left: inherit; top: inherit; transform: none; display: block; max-width: inherit; text-align: center; padding: 250px 0 100px 0;}
    .banner .texte .titre       { font-size: 35px;}
    .banner .texte .ul_list     { display:none;}
    .banner .photo              { position: relative; height: 450px;}
    .banner .photo:after,
    .banner .texte a.link-devis:after { content: none;}   
    .banner .texte a.link-devis {border-radius: 10px; width: 100%; background:#00a2a9; text-align: left; line-height: 60px; height: 60px; padding: 0 90px 0 30px; font-size: 16px; font-weight: 300;} 
    .banner .texte a.link-devis:before { content: ''; position: absolute; right: 30px; top: 50%; transform: translate(0, -50%); width: 41px; height: 13px; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='41px' height='13px'><path fill-rule='evenodd'  fill='rgb(255, 255, 255)' d='M40.922,6.994 C40.922,7.404 40.674,7.755 40.321,7.909 L35.413,12.716 C35.069,13.055 34.510,13.055 34.166,12.716 C33.821,12.378 33.821,11.828 34.166,11.489 L37.736,7.994 L1.951,7.994 C1.400,7.994 0.953,7.546 0.953,6.994 C0.953,6.441 1.400,5.995 1.951,5.995 L37.782,5.995 L34.166,2.454 C33.821,2.115 33.821,1.566 34.166,1.227 C34.510,0.889 35.069,0.889 35.413,1.227 L40.469,6.179 C40.736,6.358 40.922,6.648 40.922,6.994 Z'/></svg>");}
}

@media (max-width:800px) {
    .banner .photo img          { margin: -300px auto; height: 840px; }
    .banner .texte              { padding-top: 150px;}
}

@media (max-width:500px) {
    .banner .photo img         { margin: -280px auto; height: 740px; }
    .banner .texte             { padding-top: 80px;}
    .banner .texte .titre      { line-height: 40px;}
}

/***** bloc intro *****/
.intro                              { border-radius: 20px; background-color: rgb(217, 242, 242); padding: 70px 60px; margin: 120px 0;}
.intro h2.chapo                     { font: 300 16px/30px "vag-rundschrift-d"; letter-spacing: 0.4px; color: #6c6c6c;}


@media (max-width:1000px) {
    .intro      { display: none;}
}

/***** bloc grid *****/
.bloc_grid.services .photo     { min-height: 560px;}
.bloc_grid.reverse::after      { left: 70%;}
.bloc_grid .photo .img1        { position: absolute; z-index: 1; left: 0; top: -90px;}
.bloc_grid .photo .img2        { position: absolute; z-index: 2; max-width: 300px; height: 300px; left: 0; bottom: -90px;}

@media (max-width:1000px) {
    .bloc_grid.services .photo     { display: none;}
    .bloc_grid .texte .link        { border-radius: 10px; width: 100%;}
    .bloc_grid.bloc_intro:before   { content: ""; position: absolute; top:-50px; left: -50%; width: 500%; height: 230px; background: #00a2a9; z-index: -1;}
    .bloc_grid.bloc_intro img      { border-radius: 10px;}
}

/***** bloc atout *****/
.bloc-atout                 { display: grid; grid-template-columns:repeat(3,1fr); position: relative; margin: 80px 0; border-radius: 20px; background: #ffffff;  box-shadow: 0px 0px 30px 0px rgba(0, 98, 105, 0.1); height: 200px; max-width: 1000px;  align-items: center; z-index: 1; margin-left: 200px; }
/*.bloc-atout:before           { width: 115px; height: 200px; background: url("../images/picto-atout.svg") 50% no-repeat; content: ""; position: absolute; left: -80px; top: 50%;  transform: translate(0, -50%);}*/

.bloc-atout #animation_container     { position: absolute; left: -80px; top: 50%;  transform: translate(0, -50%); width:130px; height:240px;}

.bloc-atout .item           { color: #00a2a9; font-size: 18px; line-height: 26px; position: relative; text-align: center;}
.bloc-atout .item:after     { z-index: -1;  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px;  background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100px' height='100px'><path fill-rule='evenodd'  fill='rgb(217, 242, 242)' d='M49.1000,-0.001 C77.614,-0.001 99.1000,22.385 99.1000,49.1000 C99.1000,77.613 77.614,99.999 49.1000,99.999 C22.386,99.999 -0.000,77.613 -0.000,49.1000 C-0.000,22.385 22.386,-0.001 49.1000,-0.001 Z'/></svg>");}


@media (max-width:1000px) {
    .bloc-atout     { display:none;}
}

/***** bloc blog/job *****/
.bloc-blog-job              { display: grid; grid-template-columns:auto 380px; position: relative; margin-top: 100px; margin-bottom: 250px; grid-gap: 0 30px;}
.bloc-blog-job::before      { content: ""; position: absolute; top: 50%; left: -50vw; width: 200vw; height: 200%; background: #d9f2f2; z-index: -1;}

.bloc-blog-job .blog        { display: grid; grid-template-columns:300px auto; align-items: center; position: relative;  background: #ffffff; box-shadow: 0px 0px 50px 0px rgba(0, 98, 105, 0.1); border-radius: 20px; grid-gap: 0 40px; overflow: hidden;}
.bloc-blog-job .blog .photo                { font-size: 0; line-height: 0;}
.bloc-blog-job .blog .photo img            { max-width: 100%; height: auto;}
.bloc-blog-job .blog .texte                { padding-right: 60px;}
.bloc-blog-job .blog .texte a:nth-child(1) { display: inline-block; height: 40px; line-height: 40px; padding: 0 20px; color: #ffffff; background: #00a2a9; border-radius: 5px; margin-bottom: 25px; font-size: 16px;}
.bloc-blog-job .blog .texte a:nth-child(2) { color: #00a2a9; position: relative; padding: 0 0 40px 0; display: block; font-size: 20px; line-height: 30px;}
.bloc-blog-job .blog .texte a:nth-child(2):after { content: ''; position: absolute; left: 0; bottom:0; width: 41px; height: 13px; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='41px' height='13px'><path fill-rule='evenodd'  fill='rgb(0, 162, 169)' d='M40.922,6.993 C40.922,7.404 40.674,7.754 40.321,7.909 L35.413,12.715 C35.069,13.054 34.510,13.054 34.165,12.715 C33.821,12.377 33.821,11.828 34.165,11.489 L37.736,7.993 L1.951,7.993 C1.400,7.993 0.952,7.545 0.952,6.993 C0.952,6.440 1.400,5.995 1.951,5.995 L37.782,5.995 L34.165,2.453 C33.821,2.114 33.821,1.565 34.165,1.227 C34.510,0.889 35.069,0.889 35.413,1.227 L40.469,6.179 C40.736,6.358 40.922,6.647 40.922,6.993 Z'/></svg>");}

.bloc-blog-job .job         { border-radius: 20px; background-color: rgb(0, 162, 169); padding: 30px 40px; color: #ffffff; font-size: 20px; line-height: 30px; position: relative;}
/*.bloc-blog-job .job:after   { width: 146px; height: 200px; background: url("../images/picto-blog-job.svg") 50% no-repeat; content: ""; position: absolute; right: 90px; bottom: -160px;}*/

.bloc-blog-job .job #animation_container2     { position: absolute; right: 90px; bottom: -160px; width:150px; height:240px}

.bloc-blog-job .job a       { display: inline-block; height: 40px; line-height: 40px; padding: 0 20px; color: #00a2a9; background: #ffffff; border-radius: 5px; margin-bottom: 25px; font-size: 16px;}



@media (min-width:1201px) {
    .bloc-blog-job .job a:hover                                { background: #005e63; color: #ffffff;}
    .bloc-blog-job .blog .texte a:nth-child(1):hover           { color: #005e63;}
    .bloc-blog-job .blog .texte a:nth-child(2):hover:after     { left: 10px;}
}

@media (max-width:1200px) {
    .bloc-blog-job .blog     { grid-template-columns: 230px auto; grid-gap: 0 20px;}
    .bloc-blog-job .blog .texte a:nth-child(2),
    .bloc-blog-job .job      { font-size: 18px; line-height: 26px;}
}

@media (max-width:1000px) {
    .bloc-blog-job                   { grid-template-columns:1fr 1fr;}
    .bloc-blog-job .blog             { grid-template-columns:1fr; padding: 30px 40px;}
    .bloc-blog-job .blog .photo      { display: none;}
    .bloc-blog-job .job:after        { right: -40px;}
}

@media (max-width:800px) {
    .bloc-blog-job                   { grid-template-columns:1fr; grid-gap: 40px 0; margin-bottom: 150px;} 
    .bloc-blog-job::before           { top: -50px;}
    .bloc-blog-job .job              { background: #ffffff; color: #00a2a9;}
    .bloc-blog-job .job a            { color: #ffffff; background: #00a2a9;}
    .bloc-blog-job .job:after        { background-size: 70%; right: 0; bottom: -140px;}
}

@media (max-width:600px) {
    .bloc-blog-job                                { margin-bottom: 200px;}
    .bloc-blog-job .job #animation_container2     { bottom: -180px;}
}


/***** bloc contact *****/
.bloc-contact     { max-width: 800px; margin: 80px auto; text-align: center; font-size: 25px; line-height: 35px; }
.bloc-contact a   { color: #00a2a9; border-bottom: 1px solid #00a2a900;}

@media (min-width:1201px) {
    .bloc-contact a:hover { border-bottom: 1px solid #00a2a9;}
}

@media (max-width:800px) {
    .bloc-contact     { display:none;}
}