/*------------------------------------------------ */
/*                TABLETTE PAYSAGE                 */
/*------------------------------------------------ */
@media screen and (max-width:1024px){

	/* HOME PAGE */
	.subtitle{line-height:25px}
	#accueil{margin-top:0}
	.banner{background-size:cover;background-position:center top}
	#service_ .item_service{width:31%}
	#banner .service_::after{right:-20px}
	#agence .subtitleP{max-width:620px}
	#agence .texte{max-width:31%}
	#clients .photo,#clients .texte{max-width:48%}
	#projets .projet_block .info_Projets{opacity:1}
	#projets .projet_block:before{opacity:0.8}

	/*  BLOG  */
	body.blog .blogItem{padding:25px}

}
@media screen and (min-width:855px) and (max-width:1024px){
	body{width:1024px}
	#banner .item_service div{padding:45px 17px 0;height:100%}
	#banner .item_service:nth-child(3):hover::before{right:176px}
	#projets .projet_block.MÉDICAL:nth-child(26){transform:translateX(340px)}
	#projets .projet_block.EVENTS:nth-child(13) img{object-position:0}
	#projets .projet_block.RESTAURATION:nth-child(31){transform:translateX(339px)}

	/* CONTACT */
	#contact .contactRight{padding:0 20px}


}
@media screen and (min-width:601px) and (max-width:1024px){
	.banner{height:750px}
	#bannerPush .service_{column-gap:12px}
	#bannerPush .item_service div{padding:35px 20px 35px 20px;height:293px}
	#bannerPush .item_service:nth-child(1)::before{top:-8px}

	/* BLOG */
	#blogLeft{height:510px}
	#blogLeft div:nth-child(1){height:100%}
}

/*------------------------------------------------ */
/*     SMARTPHONE PAYSAGE & TABLET PORTRAIT      */
/*------------------------------------------------ */
@media screen and (min-width:601px) and (max-width:854px){
	body{width:854px}

	/* HOME PAGE */
	.item_service h2{font-size:21px}
	#banner .item_service div{padding:30px 20px 0;height:100%}
	#banner .item_service:nth-child(3):hover::before{right:120px}
	#services .item_service{width:50%;height:398px}
	#agence .Equipe_{flex-wrap:wrap;justify-content:center}
	#agence .portrait{width:33%;padding:20px}
	#projets .projet_block{margin:0;width:calc(48% - 2px)}
	#projets .projet_block.MÉDICAL:nth-child(26){transform:translateX(283px)}
	#projets .projet_block.RESTAURATION:nth-child(31){transform:translateX(283px)}
	#projets .projet_block.EVENTS:nth-child(13) img{object-position:0}
	#agence .d-flexCB{padding-bottom:40px}
	#agence .subtitleP{max-width:60%}
	#agence .texte_About.d-flexCB{margin-top:15px}
	#agence .Equipe_{margin-top:0;padding-bottom:0}
	#clients .texte h2{font-size:38px}
	#clients .texte .subtitle{margin-bottom:30px}
	#clients hr.line.line2{margin-top:40px}
	#actu .swiper-slide{padding:0}
	#actu .item_blog img{height:200px!important}
	#actu .subtitle{margin-bottom:45px}
	#actu .swiper-wrapper{padding-bottom:60px}
	#actu .swiper-pagination{bottom:0!important}

	/*  BLOG  */
	body.blog .blogGrid .blogTitle{font-size:20px}

	/* PAGE CONTACT */
	#contact .title{font-size:19pt}
	#form_contact .form_contact{max-width:70%}
	#contact_gender span br{display:none}
	#contact_gender br.mobile{display:block}
	#contact_gender label{font-size:11pt;line-height:40px}
	#contact .contactRight{padding:0 30px}
	#contact .fiftyL,#contact .fiftyL, #contact .fiftyR{width:100%}

	#footer{padding-top:90px}
	#footer .contact_top{padding-bottom:90px}
	#footer .f-social-icons{flex-wrap:wrap;width:250px;justify-content:center;row-gap:10px}
	#footer .contact_top .title{transform:translateX(-18px)}
	#footer .contact_center .d-flexCB div:nth-child(1){width:100%;margin-right:0;padding-right:10px}
	#footer .logo_.d-flexCB img{width:120px}

}
@media screen and (min-width:480px) and (max-width:854px){

}

/*-------------------------------------------------- */
/*        SMARTPHONE :PORTRAIT           */
/*-------------------------------------------------- */
@media screen and (max-width:600px){

	.d-flexCB{display:block}

	/* HEADER */
	#menu_mob{display:block}
	#menu_mob img{display:block;width:28px}
	#header .wrapper{height:100px;margin-top:-1px;display:flex}
	#header.header-sticky .wrapper{height:75px;margin-top:0}
	#banner .caption hr.line{margin:auto}
	#header .logo img{width:100px}
	#header.header-sticky .logo img{width:62px;height:auto}
	#header nav{display:none}

	/* HOME PAGE */
	.banner{height:100vh}
	.banner .caption{text-align:center;padding:120px 0 20px}
	.banner .caption h1{font-size:39px;line-height:normal;letter-spacing:normal;padding:100px 0 20px;text-align:center}
	#bannerPush .service_{display:none}
	#bannerPush{height:auto;padding:20px 0}
	#logoCMS{padding-top:0}
	#services .item_service{width:100%;height:100%;max-height:100%}
	#services .item_service div{padding:35px 20px 30px 20px}
	#clients .photo, #clients .texte{max-width:100%}

	#logoCMS .tools_slider .tool_image{height:75px}
	#services{padding-top:55px}
	#services .item_service p{max-width:100%}
	#projets{padding:80px 0;margin-top:25px;text-align:center}
	#projets hr.line{margin:0 auto 22px}
	#projets .subtitle{margin-bottom:40px}
	#projets .filters span{line-height:35px;margin:0 10px}
	#projets .projets_list.d-flex{display:block;margin-top:50px}
	#projets .projet_block{margin:20px auto!important}
	#projets .projet_block img{height:350px!important;max-height:inherit}
	#agence{padding:80px 0 25px}
	#agence .subtitle{margin-bottom:35px}
	#agence .subtitleP{max-width:100%;margin-bottom:45px}
	#agence .about_block{margin:15px 0}
	#agence .big,#agence .small{max-width:100%;width:100%}
	#agence .thumb_About.d-flexCB img{height:350px}
	#agence .texte{line-height:26px;margin-bottom:45px;max-width:100%}
	#agence .texte h2{margin-bottom:20px}
	#agence .texte_About.d-flexCB{margin-top:40px}
	#agence .portrait{padding-bottom:30px}
	#clients{padding:90px 0}
	#clients .photo{max-width:100%}
	#clients .photo img{height:auto}
	#clients .texte{margin-top:65px}
	#clients .texte h2{font-size:34px}
	#clients .texte .subtitle{margin-bottom:30px;line-height:25px}
	#clients hr.line.line2{margin-top:40px}
	#actu{padding:80px 0 100px}
	#actu .subtitle{margin-bottom:35px}
	#actu .swiper-wrapper{padding-bottom:60px}
	#actu .item_blog .photo{height:auto}
	#actu .swiper-pagination{bottom:0!important}
	#actu .swiper-slide{padding:0}
	#actu .item_blog img{max-height:260px}

	/* BLOG */
	body.blog article .d-flex{display:block;padding-bottom:50px}
	#blogLeft{height:235px}
	#blogLeft div:nth-child(1){height:100%}
	#blogRight{margin-top:20px}
	#blogRight .blogGrid{display:block}
	.blogSingle{padding:20px 20px 50px}

	/* FOOTER */
	#footer{padding-top:80px;text-align:center}
	#footer .f-social-icons{justify-content:center;padding:20px 0;flex-wrap:wrap;row-gap:20px}
	#footer .f-social-icons a{margin:0 15px}
	#footer .contact_top .title{margin-bottom:15px;transform:translateX(0)}
	#footer .contact_top{padding-bottom:65px}
	#footer .contact_center{padding:60px 0 40px}
	#footer .contact_center .logo_ p{text-align:center;padding-bottom:20px}
	#footer .contact_center .d-flexCB div{width:100%!important;margin-bottom:20px}
	#footer_bottom a, #cookiego{line-height:30px;margin-left:0;display:block}

	/* AUTRE PAGE */
	#tempPage,#contact{padding:0}
	#tempPage .big-title,#contact .big-title{font-size:23pt}
	#tempPage .small-title,#contact .small-title{font-size:12px}

	/* PAGE CONTACT */
	#form_contact .form_contact{max-width:100%}
	#contact select,#contact textarea{font-size:11pt}
	#contact input[type=text],#contact input[type=email],#contact input[type=tel]{width:100%!important}
	input[type=text],input[type=tel],input[type=email]{font-size:11pt}
	#contact label{font-size:11pt;padding-left:21px;margin:0 5px}
	#contact_gender label{line-height:40px}
	#attach_wrap{font-size:11pt}
	#contact br.mobile{display:block!important}
	#contact .inblock{margin:inherit;width:100%}
	#contact_gender span br{display:none}
	#contact .row{display:block}
	#contact .contactLeft{height:400px}
	#contact .contactRight{padding:0 30px;height:auto;overflow:hidden}
	#contact .contactRight h1{line-height:normal}
	#contact .contactRight .subtitle{margin-top:20px}
	#contact .fiftyL,#contact .fiftyL, #contact .fiftyR{width:100%}
	#form_contact p.left label{padding-left:0;margin:0}
	#form_contact p.left input[type=checkbox]{top:0px;left:-28px}

}

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

	html,body{overflow-x:hidden}
	.subtitle{line-height:25px}

	/* HEADER */
	#contact{margin-top:70px}
	#header nav{display:block;position:fixed;left:-100%;top:0;bottom:0;width:82%;height:100%;overflow:auto;background-color:#fff;z-index:9;transition:700ms cubic-bezier(0.17, 0.67, 0, 1.01)}
	#header nav.open{left:0}
	#header nav.open ul{display:block;padding:65px 5px 30px}
	#header nav.open a{font-size:19px;color:#333333;display:block;padding:20px}
	#header nav.open a:after{bottom:10px;left:20px}

	/* HOME PAGE */
	.banner .caption h1{font-size:24pt;line-height:52px;padding:220px 0 10px}
	.banner .caption hr.line{display:none}
	#cookiePopup p.h1{font-size:15pt}

}
@media screen and (max-width:320px){
	#services .item_service{height:auto}
}

/*------------------------------------------------ */
/*     				BIG SCREEN                	   */
/*------------------------------------------------ */
@media screen and (min-width:1025px) and (max-width:1366px){
	.banner_slider .banner{height:710px}

}
@media screen and (min-width:1025px) and (max-width:1235px){
	.banner_slider .banner{height:750px;background-size:cover}
	#bannerPush .service_{column-gap:20px}
	#bannerPush .item_service{max-width:30.333%}
	#bannerPush .item_service div{padding:35px 20px 35px 20px;height:293px}
	#agence .subtitleP{max-width:65%}
	#agence .texte_About.d-flexCB{column-gap:30px}
	#clients .texte{padding-left:30px}

}
@media screen and (min-width:601px) and (max-width:1250px){
	#projets .projet_block{width:100%}
	#actu .item_blog img{height:185px}
}
@media screen and (min-width:601px) and (max-width:1090px){
	#projets > .wrapper > .d-flexCB:first-of-type{display:block}
	#projets .subtitle br{display:none}
	#projets .filters.d-flexCB{justify-content:left;margin:35px 0 0}
	#projets .filters span{margin:0 14px 0 0}
}