/* //////////////////////////////// RESPONSIVE [Media Queries] ///////////////////////////////////// */
img { max-width: 100%; height: auto !important; width: auto\9; /* ie8 */ }
a img { border: 0px; }
.notResponsive{ max-width: none!important; }
video { max-width: 100%; height: auto !important; }
.video-container {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container .mejs-video,
.video-container .mejs-layer,
.video-container video{position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}
.onlyMobile{ display: none;}

@media only screen and (max-width: 1023px) {
	
	.header_nav li, .chantier_nav li { display: block; padding-right: 43px;  margin-left: -8px; margin-bottom: 10px;}
	.chantier_nav{ display: none; }
	.onlyMobile,
	.menuOpener,
	.intervention_count_mob{ display: block; }
	.mobileMenu{
		background: #008679;
		display: none;
		position: absolute;
		top: 75px; left: 0; z-index: 10000;
		max-height: calc(100vh - 75px);
		overflow: hidden;
		overflow-y: auto;
		width: 100%;
		padding: 20px 25px;
	}
	.menuOpened .header:after{
		position: fixed; top: 75px; left: 0; z-index: -1;
		width: 100%; height: 100%;
		content: '';
		background: #fff;
		background: rgba(255,255,255,0.9);
	}
	.menuOpened .mobileMenu{
		display: block;
		font-weight: 600 !important;
	}
	.menuOpened .mobileMenu a{
		font-weight: 600 !important; }
	.menuOpened .menuOpener span{
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	.header .userBox { float: none; position: relative; top: auto; right: auto; }
	.header .userBox ul li{ display: block; margin-left: 0; margin-top: 10px; margin-bottom: 15px; }
	.header .userBox ul li a{ padding-left: 34px; }
	.header ul li{ margin-bottom: 10px; }
	.header_nav { float: none; }
	.sub_nav {float: none;}

	.planning {
	    margin-left: 0px;
	    width: 100%!important;
	}
	.planning_frame,
	.planning_filter{ width: 100% !important; }
	.planning_filter{
		position: relative; height: auto; top: auto; left: auto;
	}
	.icon-filter{ display: none !important;  }
	.boxedContent { padding: 75px 0 100px 0; }
	.boxedContent .box { padding: 25px 30px; }
	.cp_calendar .the_month {
	    padding: 10px 20px 10px 10px;
	    width: 295px;
	}
	.cp_calendar .days li,
	.cp_calendar .weekdays li { width: 36px; }
	a{
		/* These are technically the same, but use both */
		overflow-wrap: break-word;
		word-wrap: break-word;

		-ms-word-break: break-all;
		/* This is the dangerous one in WebKit, as it breaks things wherever */
		word-break: break-all;
		/* Instead use this non-standard one: */
		word-break: break-word;

		/* Adds a hyphen where the word breaks, if supported (No Blink) */
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	h3 {
	    font-size: 24px;
	    line-height: 28px;
	    margin-bottom: 25px;
	}
	h4 {
	    font-size: 20px;
	    line-height: 24px;
    	margin-bottom: 14px;
	}
	.boxedContent h3.cp-icon span {
	    left: -30px;
	    font-size: 30px;
	    top: -1px;
	}

}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

	.one-full,
	.one-half,
	.one-third,
	.two-third,
	.one-fourth,
	.two-fourth,
	.three-fourth,
	.one-fifth,
	.two-fifth,
	.three-fifth,
	.four-fifth,
	.widget_col{
		width:100% !important;
		margin-right: 0;
		margin-left: 0;
    }
	.connexion h1 {
	    font-size: 15px;
	    line-height: 20px;
	    margin-bottom: 20px;
	}
	.connexion .logistique { max-width: 180px; margin-top: 14px; }
	.connexion_form .pushed_field { padding: 15px; margin-bottom: 16px;}
	.connexion_form p{ margin-bottom: 16px; }
	.overlay_pop .overlay_pop_content { padding-top: 25px; }
	.overlay_pop .overlay_pop_content p {margin-bottom: 16px; }
	.actions_pop { padding-top: 10px;}
	.actions_pop .btn_action {  padding: 15px 0;}
	.connexion .construire_propre {
	    /*left: 50%;
	    margin-left: -50px;*/
	    display: none;
	}
	.intervention .duplicate {
	    float: none;
	    display: block;
	    position: relative;
	    padding-left: 50px;
	    margin-top: 13px;
	    margin-right: 0px;
	    line-height: 39px;
	}
	.boxedContent h3.cp-icon span{ left: -29px; font-size: 29px; }
	.stickTitle_w, .section_title { padding: 0 0 0 10px; }
	.types_nav {
	    text-align: left;
	    overflow: hidden;
	    overflow-x: auto;
	    padding-left: 10px;
	}
	.types_nav ul{ width: 730px; }
	.intervention {padding: 25px 25px;}
	.oldweek{padding: 40px 20px;}
	.cp_calendar{ margin-top: -15px; padding-left: 0!important; }
	.cp_calendar.inForm {
	    margin-top: 0;
	    padding-left: 0!important;
	    margin-left: -10px;
	}
	.cp_calendar .the_month {
		padding: 10px 0px 10px 0px;
	    width: 295px;
	    float: none;
	    margin: 0 auto;
	}
	.chantier { padding: 0 25px 35px 25px; }
	.page_header { padding: 25px; }
	.cp_form .cp_form-radio + .cp_form-radioLabel:before,
	.cp_form .cp_form-checkbox + .cp_form-checkLabel:before{ margin-right: 10px; }

	.sub_nav a{ padding: 0 8px; min-width: 10px; margin-left: 0px; }
	.sub_nav .arrow-left, .sub_nav .arrow-right{ min-width: 35px; width: 35px;}
	.sub_nav .arrow-left:before, .sub_nav .arrow-right:before{ font-size: 24px;}
	.sub_nav .arrow-left:before,
	.sub_nav .arrow-right:before { margin-left: -13px;}
	.intervention.icon-intervention_waiting span{
	    left: 1px;
	    width: 40px;
	    font-size: 24px;
	    display: block;
	    height: 40px;
	    top: 26px;
	}
	.intervention .icon-duplicate span{top: 0px !important;}

}


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 600px) {

	.header .breadcrumb a,
	.arrowBread,
	.noMobile{ display: none; }
	.boxedContent { padding: 40px 0px; }
	.otherField { margin-left: 40px; max-width: 86%; }
	.header {
	    padding: 18px 25px 20px 10px;
	    min-height: 65px;
	}
	.menuOpener{ top: 12px; right: 12px;}
	.mobileMenu{ top: 65px; max-height: calc(100vh - 65px);}

}