/***** activites *****/
.banner 								    { grid-template-columns: 750px 1fr; position: relative; margin-top: 220px; grid-gap: 0;}
.banner .photo  						{ margin-left: -140px; border-radius: 0 40px 40px 0px; overflow: hidden;}
.banner .photo img  						{ height: 85vh; max-height: 740px; min-height: 620px;}
.banner .texte							{ background: #fff; border-radius: 40px; padding: 50px; z-index: 100; overflow: hidden; max-width: 700px;}
.banner .titre_main         { margin-bottom: 30px;}

@media (max-width:1600px) { 
.banner                     { grid-template-columns: 620px 1fr;}
.banner .photo              { margin-left: -120px;}
.banner .photo img  				{ height: 80vh; }

}

@media (max-width:1500px) {
.banner                     { grid-template-columns: 550px 1fr;}
.banner .texte							{ padding: 40px;}
.banner .titre_main         { font: 500 25px / 35px "Poppins"; margin-bottom: 10px;}
.banner .chapo              { font: 400 14px / 28px "Poppins"; margin-bottom: 10px;}
}

@media (max-width:1400px) {
.banner                     { grid-template-columns: 500px 1fr;}
.banner   								  { align-items: center; overflow: hidden;}
.banner .photo img  				{ height: 50vh; min-height: 640px;}
.banner:before 							{ display: none;}

.banner .link               { margin-top: 0px;}
}

@media (max-width:1300px) {
.banner                     { grid-template-columns: 450px 1fr;}
.banner .photo img  				{ height: 43vh; min-height: 600px;}
.banner .texte              { padding: 40px; }
}

@media (max-width:1200px) {
.banner                     { margin-top: 120px;}
.banner .photo img  				{ height: auto; min-height: 430px;}
.banner .texte              { padding: 30px; }
}
@media (max-width:1100px) {
.banner                                 { margin: 90px 0 0; display: block; border-radius: 0;}
.banner .photo                          { margin: 0; border-radius: 5px; margin-bottom: 40px; overflow: hidden;}
.banner .photo img 						          { height: auto; max-height: 450px; min-height: auto;  object-position: 50%; border-radius: 20px;}
.banner .texte                          { max-width: initial; background: none; border-radius: 0px;}
.banner .texte p 						            { max-width: none;}
.banner .texte p br						          { display: block;}
.banner .link                           { margin-top: 10px;}
}
@media (max-width:700px) {
.banner                                 { padding-bottom: 45px; overflow: initial;}
.banner::after                          { content: ""; display: block; position: absolute; top: 140px; left: -100px; right: -100px; bottom: 0; background: #fff;}
.banner .photo                          { margin-bottom: 20px;}
.banner .photo img                      { height: 280px;}
.banner .texte							            { padding: 35px 7vw 0 7vw; box-shadow: none; text-align: center;}
.banner .texte .chapo						        { text-align: left;}
.banner .titre_main                     { margin-bottom: 15px; font-size: 25px; line-height: 35px;}
.banner .texte:before 					        { display: none;}
.banner .texte p 						            { margin-bottom: 0;}
.banner .texte .link 					          { width: 100%; margin-top: 10px;}
}



/***** intro *****/
.intro                                  { margin: 100px 0;}

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



/***** gridhome *****/
.gridhome                               { margin: 110px 0;}

.gridhome .photo::after                 { content:"Tous les chiens et chats sont les bienvenus"; display: block; font-family: 'EMMELINE Regular'; font-size: 60px; line-height: 60px; color: #554a42; position: absolute; right: -20px; top: 0px; z-index: 12; width: 230px; text-align: center; }
.gridhome .photo.nl::after              { content:"Alle honden en katten zijn welkom"; }
.gridhome .photo:before                 { content: url(../images/calin.svg); display: block; height: 50px; width: 50px; position: absolute; right: 20%; top: 40%; z-index: 12;}


@media (max-width: 1300px) {
.gridhome .photo::after                 { transform: scale(0.8);}
}
@media (min-width: 1000px) and (max-width: 1200px) {
.gridhome .photo::after                 { top: -20px; right: -40px; transform: scale(0.7);}
}

@media (min-width: 700px) and (max-width: 999px) {
.gridhome .photo::after                 { transform: scale(1.2);}
}

@media (max-width: 699px) {
.gridhome .photo::after                 { top: -50px; right: -60px; transform: scale(0.7);}
}




.gridhome .photo img                    { border-radius: 0;}
.gridhome .texte .titre_main            { font-size: 25px; line-height: 35px;}
.gridhome .texte .titre_main:last-of-type{ margin-top: 50px;}

@media (max-width:1000px) {
.gridhome                               { margin: 80px 0;}
}
@media (max-width:700px) {
.gridhome                               { margin: 45px 0; gap: 20px;}
.gridhome .texte .titre_main:last-of-type{ margin-top: 40px;}
}



/***** services *****/
.services                               { margin: 100px 0;}
.services .grid                         { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 75px;}
.services .grid .icone                  { display: grid; align-items: center; justify-content: center; background: #7a937b; width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 10px;}
.services .grid a                       { display: block; border-radius: 20px; background: #fff; text-align: center; color: #554a42; padding: 40px 30px 30px;}
.services .titre                        { display: block;}

@media (min-width:1201px) {
.services .grid .icone                  { transition: all ease-in-out 400ms;}
.services .grid a:hover                 { box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);}
.services .grid a:hover .icone          { background: #bfa98a;}
}
@media (max-width:1200px) {
    
}
@media (max-width:1000px) {
.services                               { margin: 70px 0;}
.services .grid                         { grid-template-columns: repeat(3, 1fr); gap: 20px;}
}
@media (max-width:700px) {
.services                               { margin: 35px 0 50px;}
.services .texte p                      { display: none;}
.services .grid                         { grid-template-columns: 1fr; gap: 10px; margin-top: 20px;}
.services .grid a                       { border-radius: 30px; padding: 0 60px 0 80px; min-height: 60px; display: grid; align-items: center; text-align: left; background: url(../images/arrow_next.svg) right 30px center / 11px no-repeat #fff;}
.services .grid .icone                  { position: absolute; top: 0; left: 0; margin: 0; width: 60px; height: 60px;}
.services .grid .icone img              { transform: scale(0.6);}
.services .titre                        { font-size: 14px;}
.services .titre br                     { display: none;}
}




/***** atout *****/
.atout                                  { position: relative; background: url(../images/favicon.svg) left calc(50% - 175px) bottom no-repeat; align-items: start; margin: 125px 0 110px;}
.atout .texte                           { padding-top: 80px;}
.atout .texte .titre_main               { margin-bottom: 30px;}
.atout .texte li                        { margin-bottom: 20px; padding-left: 45px; background: url(../images/icone_pouce.svg) left center no-repeat;}
.atout .photo                           { text-align: right;}
.atout .photo .img:first-of-type        { width: 71%; position: relative;}
.atout .photo .img:first-of-type:before { content: url(../images/calin.svg); display: block; height: 50px; width: 50px; position: absolute; right: 10px; top: 25%; z-index: 12;}
.atout .photo .img:first-of-type:after  { content:"Des câlins"; display: block; height: 60px; width: 100%; font-family: 'EMMELINE Regular'; font-size: 60px; color: #554a42; position: absolute; top: 90px; left: 100px; z-index: 12;}
.atout .photo .img.nl:first-of-type:after  { content:"Knuffels";}

.atout .photo .img:last-of-type         { width: 54%; display: inline-block; vertical-align: top; position: relative; z-index: 11; margin-top: -150px;}
.atout .photo .img:last-of-type::before { content: url(../images/balade.svg); display: block; height: 50px; width: 50px; position: absolute; left: -25px; bottom: 60px; z-index: 12;}
.atout .photo .img:last-of-type::after  { content:"Des balades"; display: block; height: 60px; width: 100%; font-family: 'EMMELINE Regular'; font-size: 60px; color: #554a42; position: absolute; top: 66%; left: -105%;z-index: 12; }
.atout .photo .img.nl:last-of-type::after  { content:"Wandelingen"; }
@media (max-width: 1200px) {
.atout .photo .img:first-of-type:before {  transform: scale(0.8); right: 10px; top: 25%;}
.atout .photo .img:first-of-type:after  { transform: scale(0.8);   top: 40px; left: 100px; }
.atout .photo .img:last-of-type::before {  transform: scale(0.8); left: -25px; bottom: 50px;}
.atout .photo .img:last-of-type::after  {   transform: scale(0.7);  top: 48%; left: -94%; }
}
@media (max-width:1000px) {
.atout                                  { margin: 70px 0;}
.atout .photo .img:first-of-type:before { top: 85px; right: -20px;}
.atout .photo .img:first-of-type:after  { top: -10px; left: 130px;}
/*.atout .photo .img:last-of-type::before { bottom: 15px; left: -25px;}*/
.atout .photo .img:last-of-type::after  { top: 61%; left: -87%;}
}

@media (max-width:700px) {
.atout                                  { margin: 50px 0 0; padding-bottom: 40px; gap: 20px; background-size: 200px; background-position: right bottom;}
.atout .photo .img:first-of-type::before{ transform: scale(0.6); top: 85px; right: -20px;}
.atout .photo .img:first-of-type::after  { transform: scale(0.6); top: 15px; right: -120px;}
.atout .photo .img:first-of-type        { width: 240px;}
.atout .photo .img:last-of-type         { width: 180px; display: flex; justify-self: end;  margin-top: -90px;}
.atout .photo .img:last-of-type::before { transform: scale(0.6); bottom: 15px; left: -25px;}
.atout .photo .img:last-of-type::after  { transform: scale(0.6); top: 50%; left: -165px;}
.atout .texte .titre_main               { margin-bottom: 15px;}
.atout .texte .titre_main br            { display: none;}
.atout .texte li                        { padding-left: 35px; background-size: 20px; margin-bottom: 15px;}
}



/***** apropos *****/
.link-moins,.link-plus              { cursor:pointer; color: #7a937b; border-bottom: 1px solid transparent;}
.textMore                           { display: none; margin-top: 40px;}
.textMore p:not(:first-of-type)     { margin-top: 15px;}
.bloc_texte                         { margin: 0;}

@media (min-width:1201px) {
.link-moins:hover,
.link-plus:hover                    { border-color: #7a937b;}
}



/***** table plus home *****/
.table_plus                         { margin-top: 40px;}




/***** avis *****/
.avis                               { margin: 150px 0 100px; position: relative;}
.avis .stat                         { background: #7a937b; width: 280px; position: absolute; top: 0; left: 0; height: auto; border-radius: 30px; text-align: center; padding: 45px 20px 60px;}
.avis .stat .note				    { font: 700 40px/50px "Poppins"; color: #f5efe7;}
.avis .stat img				        { display: block; margin: 0 auto;}
.avis .stat img:first-of-type	    { margin-bottom: 28px; margin-top: 20px;}
.avis .stat p					    { font-size: 16px; margin-top: 6px; letter-spacing: 0.6px;}
.avis .wrapslide                    { position: relative; margin-left: 320px;}
.wrapnav                            { text-align: right; margin-top: 15px; position: relative; right: -20px;}
.wrapnav::before                    { content: url(../images/temoin.svg); display: block; height: 50px; width: 50px; position: absolute; left: 20%; bottom: 40px; z-index: 12;}
.wrapnav::after                     { content:"Ils témoignent"; display: block; font-family: 'EMMELINE Regular'; font-size: 60px; color: #554a42; position: absolute; left: 20%; bottom: -10px; z-index: 12;}
.wrapnav.nl::after                     { content:"Klantbeoordelingen"; }

.avis .content                      { margin-bottom: 30px; position: relative; display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center;}
.avis .content *                    { display: inline-block; vertical-align: middle; font: 500 20px/26px "Poppins";}
.avis .content img                  { margin: 0 20px 0 0;}
.avis .note   						{ line-height: 0; letter-spacing: 0; font-size: 0; margin-bottom: 20px;}
.avis .note img 					{ display: inline-block; height: auto; margin-right: 10px;}
.avis .note img:last-child 			{ margin-right: 0;}
.avis .item                         { padding: 40px 40px 55px; background: #fff; margin-right: 30px; border-radius: 30px; position: relative;height: auto; font-size: 15px;}
.avis .author                       { margin-top: 20px;}

@media (max-width:1200px) {
.avis                               { margin: 100px auto;}
.avis .wrapslide::after             { display: none;}
}
@media (max-width:1000px) {
.wrapnav                            { display: none;}
.avis .wrapslide                    { margin: 0; width: 100vw;}
.avis .stat                         { position: static; width: 100%; margin-bottom: 20px;}
}
@media (max-width:700px) {
.avis                               { margin: auto; padding: 30px 0 50px;}
.avis .stat                         { position: relative; z-index: 1; padding: 0; text-align: left;}
.avis .stat .note                   { display: inline-block; vertical-align: middle; margin: 0 10px 0 0; font-size: 30px; line-height: 30px;}
.avis .stat img:first-of-type       { display: inline-block; vertical-align: middle; margin: 0;}
.avis .stat img                     { margin: 10px 0 0;}
.avis::after                        { content: ""; display: block; position: absolute; top: 0; left: -100px; right: -100px; bottom: 0; background: #7a937b;}
.avis .content               		{ margin-bottom: 25px;}
.avis .content strong,
.avis .content span                 { font-size: 16px; color: #fff;}
.avis .content img                  { margin: 0 10px; width: 140px;}
.avis .item                         { padding: 40px 30px 75px; width: 85vw; min-height: 0; border-radius: 20px;}
.avis .swiper                       { width: 100vw;}
.avis .swiper-wrapper               { align-items: stretch;}
.avis .author                       { position: absolute; left: 30px; bottom: 40px;}
}