/* >–––––––––––––––––––––––––––––––––––––– SECTION A –––––––––< */

/* DIAPO ––––––––– */

#diapo 
{
	flex: 0 0 35%;
    position: relative;
	box-sizing: border-box;
	padding-top: 9rem;
	height: 100vh;
}
#diapo .container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#diapo .slide 
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
}
	#diapo section {
		box-sizing: border-box;
		padding: 0 1rem 6rem 0;
		width: 100%;
	}
		#diapo section img {
			display: block;
			width: 100%;
			height: auto;
			border-radius: 0.6rem;
			box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
		}
		#diapo section img:hover { opacity:0.8; }

		#diapo section h4 {
			font-size: 3rem; line-height: 3rem;
			color: #EAEAEA;
		}
		#diapo section h4 span {
			font-size: 2rem; line-height: 2rem;
			color: #B4D4FF;
		}

/* FRANCHISES ––––––––– */

.contentbox.franchise::before {
	background-color: #3a3a3a;
}
.contentbox.franchise h3 {
    margin-bottom: 1rem;
    font-size: 4rem; line-height: 4.2rem;
    color: #FFFEF7;
}
.contentbox.franchise h4 {
    margin-bottom: 0.5rem;
    font-family: "HelveticaNeueETW01-45Lt", sans-serif;
    font-size: 1.8rem; line-height: 1.8rem;
    color: #54CFFD;
}




/* >–––––––––––––––––––––––––––––––––––––– SECTION B –––––––––< */

.recent_jobs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.recent_jobs .contentbox {
	flex: 0 0 35%;
	margin: 0 4rem 4rem 4rem;
}
	.recent_jobs .contentbox h3 {
		margin-bottom: 2rem;
        font-size: 2.8rem; line-height: 3rem;
        color: #FFF;
    }

    .recent_jobs footer .data {
    	display: flex;
    }
	    .recent_jobs footer li {
	    	font-family: "HelveticaNeueETW01-45Lt", sans-serif;
	    	font-size: 1.6rem; line-height: 1.6rem;
	    	color: #fff;
	    	list-style: none;
	    }
	    .recent_jobs footer li:last-child {
	    	margin-left: auto;
	    }

    .recent_jobs .icons {
    	display: flex;
    	margin-top: 1.5rem;
    }
    	.recent_jobs .icons > * {
    		display: block;
    		margin-right: 4rem;
    		cursor: pointer;
    	}
    	.recent_jobs .icons > *:last-child {
    		margin-right: 0;
    	}
	    .recent_jobs .icons div { 
	    	position: relative;
	    	width: 3rem;
	    	height: 3rem;
	    }
	    	.recent_jobs .icons svg {
	    		position: absolute;
	    		left: 0; top: 0; right: 0; bottom: 0;
	    		fill: #FFDD00;
	    	}



/* >–––––––––––––––––––––––––––––––––––––– SECTION C –––––––––< */

section.c > .box {
	display: flex;
}
	.branchbox {
		flex: 0 0 40%;
		margin-top: 50rem;
		max-width: 50rem;
	}
		.branchbox img {
			display: block;
			margin: 0;
			width: 100%;
			height: auto;
			border-radius: 0.6rem 0.6rem 0 0;
		}

		.branchbox .contentbox > div.fond {
			border-radius: 0 0 0.6rem 0;
		}
		.branchbox .contentbox h3 {
	        font-size: 3rem; line-height: 3.4rem;
	        color: #FFF;
	    }

	    .branchbox .cyan_btn {
		    padding-left: 0;
		    border-radius: 0;
		    background-color: transparent;
		}
		.branchbox .cyan_btn p {
			color: #54CFFD;
		}


	.navette {
		margin-left: auto;
		width: 60%; max-width: 60rem;
	}
		.navette img {
			display: block;
			width: 100%; max-width: 50rem;
			height: auto;
		}

		.navette .triple_title {
			margin: 1rem 0 3rem 0;
		}
			.navette .triple_title h1 {
				color: #FFFEF7;
			}
			.navette .triple_title h2 {
				color: #B4D4FF;
			}

		.navette .txt > p {
			color: #69C6FB;
		}


/* >–––––––––––––––––––––––––––––––––––––– ANIMATION –––––––––< */

.recent_jobs .contentbox.onScroll {
	margin-top: 3rem;
	opacity: 0;
	transition: opacity 0.4s ease, margin-top 2s ease;
}
.recent_jobs .contentbox.onScroll.active { margin-top: 0; opacity: 1; }


.navette img.onScroll { margin-left: -4rem; opacity: 0; transition: opacity 0.4s ease, margin-left 2s ease; }
.navette img.onScroll.active { margin-left: 0; opacity: 1; }





/* >–––––––––––––––––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF –––––––––< */



@media all and (max-width: 1200px) {
	/* SECTION C –––––––––< */
	section.c > .box { flex-direction:column; }
	.branchbox { flex: 0 0 100%; order: 2; margin: 18rem auto 0 auto; }
	.navette { order: 1; margin: 0 auto; width: 100%; }
}

@media all and (max-width: 1100px) {
	/* SECTION A –––––––––< */
	#sIntro { display: flex; }
	#sIntro .box { display: flex; width: 100%; }
	section.a header { order: 1; }
	#diapo { flex: 0 0 45vh; order: 2; margin-top: auto; margin-bottom: auto; padding-top: 0; width: 100%; max-width: 70rem; height: 40vh; }
}

@media all and (max-width: 1000px) {
	/* SECTION B ---------< */
	.recent_jobs { display:block; }
	.recent_jobs .contentbox { margin: 0 auto 4rem auto; max-width: 54rem; }
	.recent_jobs .contentbox h3 { font-size: 2.4rem; line-height: 3rem; }
	.recent_jobs footer li { font-size: 1.4rem; line-height: 1.4rem; }
	.recent_jobs .icons div { width:2.5rem; height:2.5rem; }
}

@media all and (max-width: 800px) {
	/* >------ CONTENT BOX & DEGRADS -----< */
    .contentbox.franchise h4 { font-size: 1.6rem; line-height: 1.6rem; }
    .contentbox.franchise h3 { margin-bottom: 1rem; font-size: 3.2rem; line-height: 3.4rem; }

	/* SECTION C –––––––––< */
	.branchbox .contentbox h3 { font-size: 2.4rem; line-height:3rem; }
}

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