*, *:before,*:after {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

html{background-color: #FFF; font: 300 18px/24px 'Poppins', sans-serif;}
body{color: #343C43; margin: 0; padding: 0; text-align: left;}

a, i, #accueil #lstcategories .categorie .content, #accueil #lstcategories .categorie:hover .content{-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;}

a:link, a:visited{color:#000; text-decoration:none;}
a:focus{outline: 0;}

a{color:#F1CB25; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;}
a img{border:none;}
a.noTransition{-moz-transition:none; -webkit-transition:none; -o-transition: color 0 ease-in; transition:none;}

p, ul, li, hr, h1, h2, h3, h4, h5, h6, form{margin: 0; padding: 0;}

h1{font-size: 2.2rem; font-weight: 400; line-height: 2.1rem; margin-bottom: 2rem;}
h1 span, h1 a{color: #57BD5C!important; display: block; font-size: 1.5rem; line-height: 1.85rem;}
h2{font-size: 1.9rem; font-weight: 400; line-height: 2rem; margin-bottom: 2rem;}
h3{font-size: 1.75rem; font-weight: 400; line-height: 1.8rem; margin-bottom: 1.5rem; margin-top: 2rem;}
h3 span{color: #57BD5C; display: block; font-size: 1.4rem; line-height: 1.6rem;}
h4{font-size: 1.4rem; font-weight: 400; line-height: 1.5rem; margin-bottom: 1.5rem;}
h4 span{color: #57BD5C; display: inline-block; }

input, select, textarea{background-color:#FBFBFB; border:1px solid #999; font-size:1rem; padding:1px;}

a.action, input.action{background-color: #3C663E; border: none; border-radius: 8px; color: #FFF!important; cursor: pointer; display: inline-block; font-size: 1rem; font-weight: 400; padding: 1rem 3rem; position:relative; text-transform: uppercase; text-align: center; text-decoration: none!important;}
a:hover.action, input:hover.action{background-color: #000}

input[type="text"], input[type="password"], input[type="email"], textarea{background-color: #EDF2F4; border: none; color: #25303b; font: 300 1rem 'Poppins', sans-serif; outline: 0; padding: 1rem 1.5rem; width: 100%;}
input::placeholder, textarea::placeholder{color: #000; opacity: 1}

strong{color: #57BD5C; font-weight: 500}

p{margin-bottom: 1rem}

.anim{opacity: .1}
.translate{opacity: 0; transform: translateX(-20em);}
.translate.animate{opacity: 1; transform: translateX(0)!important; -webkit-transition:1s; -moz-transition:1s; -o-transition:1s; -ms-transition:1s; transition:1s;}
.scale{opacity: 0; transform: scale(0); transform-origin: left; -webkit-transition:1.2s; -moz-transition:1.2s; -o-transition:1.2s; -ms-transition:1.2s; transition:1.2s;}
.scale.animate{opacity: 1; transform: scale(1);}

.cache{display:none;}

.maincontent{margin: 0 auto; width: 75%}

header{margin-bottom: 3rem}
#bd-accueil header{margin-bottom: 0}
header .top{background-color: #000; padding: .5rem 0}
header .top .maincontent{align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between;}
header .top .logo > div{display: inline-block; vertical-align: middle;}
header .top .logo > div:first-child{margin-right: 2rem}
header .top .logo .entreprise{color: #3C663E; font-size: 1.6rem; margin-bottom: .1rem}
header .top .logo .slogan{color: #FFF; font: 400 1.3rem 'Indie Flower', sans-serif;}
header .top .logo img{height: auto; margin-left: -1rem; width: 80px;}
header .top .tel{font-size: 1.7rem; text-align: right; width: 35%}
header .top .tel a{color: #4EDD55}
header .top .tel a:hover{color: #E63739}
header .top .tel a:before{content: "\f095"; display: inline-block; font-family: "Font Awesome 6 Free"; margin-right: 1rem}
header .menu{background-color: #3C663E; padding: 1rem 0; position: relative;}
header .menu #icon_menu{color: #FFF; cursor: pointer; display: none; font-size: 2rem;}
header .menu .maincontent{display: flex; flex-wrap: wrap; justify-content: space-between;}
header .menu nav{font-size: 1.1rem; width: 92%}
header .menu nav ul{list-style: none;}
header .menu nav ul li{display: inline-block; margin-right: 3rem}
header .menu nav ul li:first-child{margin-right: 74px}
header .menu nav ul li:last-child{margin-right: 0}
header .menu nav ul li a{color: #FFF; text-transform: uppercase;}
header .menu nav ul li a:hover, header .menu nav ul li a.active{color: #E63739}
header .menu .rs{font-size: 1.4rem; text-align: right; width: 8%}
header .menu .rs a{color: #FFF;}
header .menu .rs a:hover{color: #E63739}
header .menu .rs a i{margin-right: 1.5rem;}
header .menu .rs a:last-child i{margin-right: 0;}

#bandeau{position: relative;}
#bandeau img{height: auto; width: 100%}
#bandeau img.mobile{display: none}

#accueil .carousel{padding-bottom: 2rem; position: relative;}
#accueil .carousel.mobile{display: none}
#accueil .carousel img{height: auto; width: 100%;}
#accueil .carousel .imageup{bottom: 0; left: 0; position: absolute; right: 0; top: 0;}
#accueil #gallery_cache{display: none}
#accueil .parole{background-color: #E9E9E9; margin: 1.5rem 0; padding: 1.5rem 0 2rem 0; text-align: center}
#accueil .parole h2{font: 400 2.3rem/2.4rem 'Indie Flower', sans-serif; margin-bottom: 0}
#accueil .parole h2:before{color: #57BD5C; content: "\f10d"; display: inline-block; font-family: "Font Awesome 6 Free"; margin-right: .6rem; width: 40px}
#accueil .parole h2:after{color: #57BD5C; content: "\f10e"; display: inline-block; font-family: "Font Awesome 6 Free"; margin-left: .6rem; width: 40px}
#accueil #lstcategories{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 1.5rem 0 3rem 0;}
#accueil #lstcategories .categorie{cursor: pointer; overflow: hidden; position: relative; width: 24%;}
#accueil #lstcategories .categorie img{border-radius: 5px; height: auto; margin-bottom: -6px; width: 100%}
#accueil #lstcategories .categorie .content{background: linear-gradient(rgba(0, 0, 0, .0) 1%, rgba(0, 0, 0, .3) 20%, rgba(0, 0, 0, .7) 70%); bottom: 0; color: #FFF; left: 0; position: absolute; padding: 2rem; right: 0; transform: translateY(70%);}
#accueil #lstcategories .categorie:hover .content{background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .6) 70%); transform: translateY(0);}
#accueil #lstcategories .categorie .content h3{font-weight: 500; text-shadow: 3px 3px 8px #000; text-transform: uppercase;}
#accueil #lstcategories .categorie .content p{font-weight: 400;}
#accueil #lstcategories .categorie .content a.action:hover{background-color: #FFF; color: #000!important;}
#accueil #faq h4{background-color: #E2E2E2; cursor: pointer; font-size: 1.4rem; font-weight: 400; line-height: 1.6rem; margin: 2rem 0 1rem 0; padding: 1rem 3rem; position: relative; transition:0.5s;}
#accueil #faq h4:hover{background-color: #D2D2D2;}
#accueil #faq h4::before{color: #161616; display: inline-block; font-family: "Font Awesome 6 Free"; font-size: 1.05rem; margin-right: .4rem; min-width: 30px}
#accueil #faq h4.active{background-color: #3C663E; color: #FFF}
#accueil #faq h4::after{content: '\f078'; color: #161616; font-family: "Font Awesome 6 Free"; font-size: 1.5rem; position: absolute; right: 2rem; top: 1.2rem}
#accueil #faq h4.active::after{ color: #FFF; content: '\f077';}
#accueil #faq .reponse{background-color: #FAFAFA; display: none; padding: 1.5rem 3rem;}
#accueil #faq .reponse p:last-child{margin-bottom: 0}

.cms #intro{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 3rem;}
.cms #intro .left{width: 48%;}
.cms #intro .prix{background-color: #EEE; font-size: .9rem; margin-top: -1rem; padding: 1.5rem; width: 48%; z-index: 999}
.cms #intro .prix h2{font-size: 1.6rem; margin-bottom: 1rem}
.cms #intro .prix ul{padding-left: 2rem}
.cms #intro .prix .action{margin-top: 1.5rem}
.cms #blocs .blocinfo{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 3rem;}
.cms #blocs .blocinfo:first-child{margin-top: 3rem}
.cms #blocs .blocinfo .image{background-size: cover!important; border-bottom: 10px solid #3C663E; width: 48%;}
.cms #blocs .blocinfo:nth-child(even) .image{order: 2}
.cms #blocs .blocinfo .description{width: 48%;}
.cms #blocs .blocinfo .description h3{margin-top: 1.5rem}
#lefrelonvert #blocs #bloc1 .image{background: url('../images/lefrelonvert/professionnel-desinsectisation-tarn.jpg') 0 0 no-repeat;}
#lefrelonvert #blocs #bloc2 .image{background: url('../images/lefrelonvert/interventions-securisees-garanties.jpg') 0 0 no-repeat;}
#frelons #blocs #bloc1 .image{background: url('../images/frelons/frelons-reperer-danger.jpg') 0 0 no-repeat;}
#frelons #blocs #bloc2 .image{background: url('../images/frelons/intervention-sure-efficace.jpg') 0 0 no-repeat;}
#frelons #blocs #bloc3 .image{background: url('../images/frelons/prevenir-reapparition-frelons.jpg') 0 0 no-repeat;}
#guepes #blocs #bloc1 .image{background: url('../images/guepes/reconnaitre-nig-guepes.jpg') 0 0 no-repeat;}
#guepes #blocs #bloc2 .image{background: url('../images/guepes/desinsectisation-rapide-respectueuse.jpg') 0 0 no-repeat;}
#guepes #blocs #bloc3 .image{background: url('../images/guepes/interventions-garanties-tarn.jpg') 0 0 no-repeat;}
#chenilles #blocs #bloc1 .image{background: url('../images/chenilles/chenilles-intervention-securisee.jpg') 0 0 no-repeat;}
#chenilles #blocs #bloc2 .image{background: url('../images/chenilles/chenilles-methode-adaptee.jpg') 0 0 no-repeat;}
#chenilles #blocs #bloc3 .image{background: url('../images/chenilles/chenilles-prevention-suivi.jpg') 0 0 no-repeat;}
#rats #blocs #bloc1 .image{background: url('../images/rats/detecter-presence-rongeurs.jpg') 0 0 no-repeat;}
#rats #blocs #bloc2 .image{background: url('../images/rats/deratisaton-efficace.jpg') 0 0 no-repeat;}
#rats #blocs #bloc3 .image{background: url('../images/rats/prevenir-infestations.jpg') 0 0 no-repeat;}

#contact #blocs{border-radius: 5px; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 2rem 0 3rem 0;}
#contact #blocs .bloc{background-color: #F3F3F3; margin-bottom: 1.5rem; padding: 2rem; text-align: center; width: 32%}
#contact #blocs .bloc i{display: block; font-size: 3rem; margin-bottom: 1rem;}
#contact #blocs .bloc h3{margin-bottom: 1rem}
#contact #blocs .bloc a, #contact #blocs .bloc b{font-weight: 400}
#contact #blocs .bloc a:hover{color: #C81620;}
#contact #blocs .bloc p{font-size: 1.1rem; line-height: 1.5rem;}
#contact #blocs .bloc.tel p{font-size: 2.2rem; padding-top: 1rem}
#contact #blocs .bloc.tel p a{font-weight: 500}
#contact iframe{border: none!important; height: 800px; margin-bottom: -.3rem; margin-top: 1rem; width: 100%}

#mechoisir{background-color: #E9E9E9; margin-top: 3rem; padding: 2.5rem 0 2rem 0;}
#bd-contact-le-frelon-vert #mechoisir{margin-top: 0}
#mechoisir #raisons{align-items: self-start; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 2rem}
#mechoisir #raisons .raison{align-items: self-start; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem; width: 23.5%}
#mechoisir #raisons .raison .ico{font-size: 4.5rem; text-align: center; width: 30%}
#mechoisir #raisons .raison .value{font-size: .9rem; line-height: 1.2rem; width: 68%}
#mechoisir #raisons .raison .value h4{color: #57BD5C; font-size: 1.1rem; font-weight: 400; margin-bottom: .5rem; text-transform: uppercase;}

footer{background-color: #262626;}
footer .content{display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .content a{color: #FFF!important;}
footer .content a:hover{color: #3C663E!important;}
footer .content .footerleft{padding: 3rem 0 3rem 12.5%; width: 50%}
footer .content .footerleft .infos{color: #FFF; display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .content .footerleft .infos > div{width: 45%}
footer .content .footerleft .infos > div div{margin-bottom: 1rem}
footer .content .footerleft .infos .i:before{display: inline-block; font-family: "Font Awesome 6 Free"; width: 40px}
footer .content .footerleft .infos .left .tel:before{content: "\f095";}
footer .content .footerleft .infos .left .mail:before{content: "\f0e0";}
footer .content .footerleft .infos .left .logo{margin: 3rem 0 0 -1rem;}
footer .content .footerleft .infos .left .logo img{height: auto; width: 180px;}
footer .content .footerleft .infos .right .jour:before{content: "\f073";}
footer .content .footerleft .infos .right .jours:before{content: "\f017";}
footer .content .footerleft .infos .right .rs{margin-top: 5rem}
footer .content .footerleft .infos .right .rs div i{font-size: 1.2rem; margin-right: 1rem;}
footer .content .footerleft .links{font-size: .8rem; margin-top: 3rem; width: 80%}
footer .content .footerleft .links ul{display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none;}
footer .content .footerleft .links ul li a{color: #AAA!important;}
footer .content .footerleft .links ul li a:hover{color: #3C663E!important;}
footer .content .carte{background: url('../images/carte-footer.jpg') center center no-repeat; background-size: auto; background-size: cover; position: relative; width: 45%}
footer .content .carte .france{height: auto; left: -100px; position: absolute; top: calc(70% - 100px); width: 200px;}
footer .signature{background-color: #000; color: #777; font-size: .9rem; padding: .5rem 1rem; text-align: center}
footer .signature a{color: #777;}
footer .signature a:hover{color: #3C663E;}


@media screen and (max-width: 1920px){

	html{font-size: 17px;}

	.maincontent{width: 80%}

	#mechoisir #raisons .raison{width: 24%}
	#mechoisir #raisons .raison .ico{margin-bottom: 1.5rem; width: 100%}
	#mechoisir #raisons .raison .value{font-size: 1rem; text-align: center; width: 100%}

	footer .content .footerleft{padding-left: 10%;}

}

@media screen and (max-width: 1500px){

	#accueil #lstcategories .categorie{margin-bottom: 1.5rem; width: 48.5%;}
	#accueil #lstcategories .categorie .content{transform: translateY(70%);}

}

@media screen and (max-width: 1400px){

	.maincontent{width: 90%}

	footer .content .footerleft{padding-left: 5%;}

}

@media screen and (max-width: 1250px){

	header .menu #icon_menu{display: block;}
	header .menu nav{background-color: rgba(0, 0, 0, .98); display: none; left: 0; padding: 2rem 5%; position: absolute; top: 67px; width: 100%; z-index: 99}
	header .menu nav ul li{display: block; margin-bottom: 1.5rem; margin-right: 0;}
	header .menu nav ul li:last-child{margin-bottom: 0;}
	header .menu .rs{padding-top: .5rem; width: 30%}

}

@media screen and (max-width: 1200px){

	.cms #intro .left{width: 100%;}
	.cms #intro .prix{margin-top: 1rem; width: 100%;}
	.cms #blocs .blocinfo{margin-bottom: 0}
    .cms #blocs .blocinfo .image{height: 600px; order: 1; margin-bottom: 2rem; width: 100%;}
	.cms #blocs .blocinfo .description{margin-bottom: 2rem; order: 2; width: 100%;}

	#contact #blocs .bloc{width: 48%}
	#contact #blocs .bloc.tel p{font-size: 1.8rem;}

}

@media screen and (max-width: 1100px){

	#accueil .parole h2{font-size: 1.8rem; line-height: 1.9rem}

	footer .content .footerleft{padding-right: 5%; width: 100%}
	footer .content .carte{height: 500px; margin-top: 5rem; width: 100%}
	footer .content .carte .france{left: auto; right: 40px; top: -90px; width: 180px;}

}

@media screen and (max-width: 1000px){

	#mechoisir #raisons .raison{margin-bottom: 1.5rem; width: 48%}

}

@media screen and (max-width: 900px){

	#bandeau img{display: none}
	#bandeau img.mobile{display: block}

	#accueil .carousel.pc{display: none}
	#accueil .carousel.mobile{display: block}

}

@media screen and (max-width: 850px){

	header .top{padding: 1rem}
	header .top .logo{text-align: center; width: 100%}
	header .top .logo > div:first-child{margin-right: 0}
	header .top .logo img{margin-left: 0; width: 100px;}
	header .top .logo > div:last-child{display: none}
	header .top .tel{font-size: 1.3rem; text-align: center; width: 100%}

	#accueil #faq h4{font-size: 1.2rem; line-height: 1.4rem; padding: 1.5rem;}
	#accueil #faq h4::after{right: .5rem;}
	#accueil #faq div{padding: 1.5rem;}

	footer .content .footerleft .infos > div{text-align: center; width: 100%}
	footer .content .footerleft .infos .left .logo, footer .content .footerleft .infos .right .rs{margin-top: 2rem}
	footer .content .footerleft .links{margin-top: 1.5rem; width: 100%}
	footer .signature{font-size: .8rem; line-height: 1.1rem}

}

@media screen and (max-width: 700px){

	#accueil #lstcategories .categorie{width: 100%;}

	#contact #blocs .bloc{width: 100%}

}

@media screen and (max-width: 600px){

	.cms #blocs .blocinfo .image{background-size: auto; height: 280px;}

	#contact #maps iframe{height: 500px}

}

@media screen and (max-width: 500px){

	#mechoisir #raisons .raison{width: 100%}

	footer .content .footerleft .links{display: none}

}