/* >–––––––––––––––––––––––––––––––––––––– INTERFACE BYPASSES –––––––––< */

	/* TRIPLE BACKGROUND */
	
    .ri_bckgrnd #tripleback div::before { background-color: #D0927C; }
    .ri_bckgrnd #tripleback div::after { background-color: #F3DFC2; }
    .ri_bckgrnd #tripleback div.a
    {
        background: #D5BDB5;
        background: linear-gradient(0deg,rgba(201, 173, 166, 1) 0%, rgba(213, 189, 181, 1) 100%);
    }
    .ri_bckgrnd #tripleback div.b
    {
        background: #D1B6AE;
        background: linear-gradient(0deg,rgba(213, 189, 181, 1) 0%, rgba(209, 182, 174, 1) 100%);   
    }
    .ri_bckgrnd #tripleback div.c
    {
        background: #DAC4BF;
        background: linear-gradient(0deg,rgba(201, 173, 166, 1) 0%, rgba(218, 196, 191, 1) 100%);   
    }
    .ri_bckgrnd #tripleback div.d
    {
        background: #D4BBB7;
        background: linear-gradient(0deg,rgba(215, 193, 187, 1) 0%, rgba(212, 187, 183, 1) 100%);   
    }

    #iViewport > section.ri_bckgrnd:nth-child(odd) #tripleback div.a
    {
        background: linear-gradient(0deg,rgba(213, 189, 181, 1) 0%, rgba(201, 173, 166, 1) 100%);
    }
    #iViewport > section.ri_bckgrnd:nth-child(odd) #tripleback div.b
    {
        background: linear-gradient(0deg,rgba(209, 182, 174, 1) 0%, rgba(213, 189, 181, 1) 100%);
    }
    #iViewport > section.ri_bckgrnd:nth-child(odd) #tripleback div.c
    {
        background: linear-gradient(0deg,rgba(218, 196, 191, 1) 0%, rgba(201, 173, 166, 1) 100%);
    }
    #iViewport > section.ri_bckgrnd:nth-child(odd) #tripleback div.d
    {
        background: linear-gradient(0deg,rgba(212, 187, 183, 1) 0%, rgba(215, 193, 187, 1) 100%);
    }

/* >–––––––––––––––––––––––––––––––––––––– GLOBAL BYPASSES –––––––––< */

nav#iSubbar li,
nav#iSubbar a li {
    color: #424242;
}

#sIntro .triple_title h2 {
	color: #424242;
}

#sIntro .content aside#iNext .arrow svg {
   fill: #6a6a6a;
}


/* >–––––––––––––––––––––––––––––––––––––– SECTION A - Home –––––––––< */


#sIntro.home .content aside#iNext img {
    margin: 0;
    margin-left: auto;
    width: 40%;
}


/* >–––––––––––––––––––––––––––––––––––––– STEPS - Home –––––––––< */

section.steps .thesteps {
	margin-bottom: 20vh;
}
	section.steps .triple_title {
		margin: 1rem 0 3rem auto;
		max-width: 65%;
	}
		section.steps .triple_title h1 {
			color: #FFFEF7;
		}
		section.steps .triple_title h2 {
			color: #B4D4FF;
		}

	section.steps .steps {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	section.steps .steps section {
		flex: 0 0 30%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		margin-bottom: 3rem;
		padding: 2rem;
		border-radius: 0.6rem;
		box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
	}
		section.steps .steps section aside {
			flex: 0 0 3rem;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 2rem;
			padding: 2rem;
			height: 5rem;
			font-family: "HelveticaNeueETW01-45Lt", sans-serif;
			font-size: 4.5rem; line-height: 4.5rem;
			color: #eee;/*#2e2e2e;*/
			text-align: center;
		}

			section.steps .steps section h4 {
				margin-bottom: 1rem;
				font-family: "Proxima Nova W01 Thin", sans-serif;
				font-size: 2.5rem; line-height: 2.8rem;
				color: #54CFFD;
			}
			section.steps .steps section h4 b {
				font-family: "Proxima Nova W01 Regular", sans-serif;	
			}

			section.steps .steps section p {
				font-family: "HelveticaNeueETW01-45Lt", sans-serif;
				font-size: 1.4rem; line-height: 1.8rem;
				color: #ccc;
			}
			section.steps .steps section p a { color:#fff; }


/* >–––––––––––––––––––––––––––––––––––––– VIDEOS - Home –––––––––< */

section.videos { 
	display: inline-block; vertical-align: top;
	box-sizing: border-box;
	margin-right: 2%;
	margin-bottom: 3rem;
	padding-bottom: 2rem;
	width: 48%;
	border-radius: 0 0 0.6rem 0.6rem;
}
section.videos:nth-child(even) { margin-right:0; background-color: #909; }
	section.videos > div {
		position: relative;
		width: 100%;
	}
	section.videos > div::before {
		content: ''; display: block; padding-top: 57%;
	}
		section.videos iframe {
			position: absolute;
			left: 0; top: 0; width: 100%; height: 100%;
			border: none;
		}

	section.videos h2 {
		margin-top: 1rem;
		padding-left: 1rem;
		font-family: "Proxima Nova W01 Thin", sans-serif;
		font-size: 2.5rem; line-height: 2.8rem;
		color: #54CFFD;
	}


/* >–––––––––––––––––––––––––––––––––––––– SECTION B - Employers –––––––––< */

section.b.boss .more
{
	display: flex;
}
	section.b.boss .more .image {
		flex: 0 0 40%;
		margin-left: auto;

	}
		section.b.boss .more img {
			display: block;
			box-sizing: border-box;
			width: 100%;
			height: auto;
			border-radius: 0.6rem;
		}

	section.b.boss .more .txt {
		box-sizing: border-box;
		margin-left: auto;
		padding-left: 4rem;
		max-width: 60rem;
	}
	section.b.boss .more .triple_title {
		margin: 1rem 0 3rem 0;
	}
		section.b.boss .more .triple_title h1 {
			color: #FFFEF7;
		}
		section.b.boss .more .triple_title h2 {
			color: #B4D4FF;
		}

	section.b.boss .more .txt > p {
		color: #69C6FB;
	}


/* >–––––––––––––––––––––––––––––––––––––– SECTION B - Branches –––––––––< */

section.b.succ .branches
{
	display: flex;
}
	section.b.succ .branches .image 
	{
		flex: 0 0 40%;
		align-self: flex-start;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		margin-left: auto;
		padding: 4rem 2rem;
		border-radius: 0.8rem;
		background: transparent url("../../assets/images/site/marbre.jpg") no-repeat center center;
		background-size: cover;
		-webkit-box-shadow: inset 1px -1px 6px -1px rgba(0,0,0,1); 
                box-shadow: inset 1px -1px 6px -1px rgba(0,0,0,1);
	}
		section.b.succ .branches img {
			display: block;
			width: 100%;
			height: auto;
		}


	section.b.succ .branches .list 
	{
		flex-grow: 1;
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
		padding: 0 1rem;
	}
	section.b.succ .branches .list section {
		box-sizing: border-box;
		padding: 0 2rem;
		border-left: 1px solid #54CFFD;
	}
		section.b.succ .branches .list section h3 { 
			margin-bottom: 2rem;
			font-size: 3.5rem; line-height: 4rem;
			color: #54CFFD;
		}

		section.b.succ .branches .list section h4 { 
			margin-bottom: 2rem;
			font-size: 2.5rem; line-height: 2.7rem;
			color: #fff;
		}

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

section.b.succ .branches .image.onScroll {
	margin-top: 3rem;
	opacity: 0;
	transition: opacity 0.8s ease, margin-top 2s ease;
}
section.b.succ .branches .image.onScroll.active { margin-top: 0; opacity: 1; }







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



@media all and (max-width: 1200px) {
    /* >------ STEPS –––––––––< */
    section.steps .triple_title { margin-left: auto; margin-right: auto; max-width:none; }

    /* >------ MORE –––––––––< */
    section.b.boss .more { margin-left: auto; margin-right: auto; width: 100%; }

     /* >------ BRANCHES –––––––––< */
    section.b.succ .branches { margin-left: auto; margin-right: auto; width: 100%; }
}

@media all and (max-width: 1100px) {
    /* >------ BYPASSES –––––––––< */
     #sIntro .content { margin-top: 4rem; }

     /* SECTION STEPS −−−−−−−−-< */
	section.steps .steps section { flex: 0 0 44%; }
	section.steps .steps section aside { flex: 0 0 4rem; height: 4rem; font-size: 4rem; line-height: 4rem; }

	/* >------ MORE –––––––––< */
	section.b.boss .more .image { flex: 0 0 45%; }
	section.b.boss .more .txt { flex: 0 0 55%; }

	/* >------ BRANCHES –––––––––< */
	section.b.succ .branches .image { flex: 0 0 45%; }
	section.b.succ .branches .list { display: block; }
	section.b.succ .branches section { margin-bottom: 4rem; }
}

@media all and (max-width: 800px) {
	/* VIDEOS –––––––––< */
	section.videos { display: block; margin-right: 0; width: 100%; }

	/* >------ MORE –––––––––< */
	section.b.boss .more { display:block; }
	section.b.boss .more .image { margin-bottom: 3rem; }

	/* >------ BRANCHES –––––––––< */
	section.b.succ .branches { display:block; }
	section.b.succ .branches .image { margin-bottom: 3rem; }
	
}

@media all and (max-width: 600px) {
	/* SECTION STEPS –––––––––< */
	section.steps .steps { display: block; }
}