/*******************
  PAGE EXPERTISE
*******************/

.page-template-page-expertise .page-color,
.page-template-page-expertise .footer-menu a:hover {
	color: var(--mauve);
}

.page-template-page-expertise .big-intro {
	min-height: 60vh;
}
body.page-template-page-expertise.scrolled header,
.page-template-page-expertise .big-intro {
	background: var(--mauve);
}

.page-template-page-expertise footer .mentions .logo {
	background-image: url(../../img/logo-amagar-mauve.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.page-template-page-expertise footer .mentions .logo img { opacity: 0; }

@media screen and (max-width: 900px) {
	.page-template-page-expertise .big-intro .content { max-width: 100%; }
	.page-template-page-expertise .big-intro .quote { max-width: 100%; }
}

.expertise-intro {
	background: var(--mauve);
	color: #fff;
}
.expertise-intro > .ill {
	flex: 0 0 33.333%;
	position: relative;
}
.expertise-intro > .ill::before {
	content: '';
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--orange);
	transition: 2s 1s;
}
.reveal .expertise-intro > .ill::before {
	width: 0;
}
.expertise-intro > .ill img {
	object-position: center top;
}
.expertise-intro > .content {
	flex: 1;
	text-align: left;
	padding: calc(var(--gutter) * 2) 0;
}
.expertise-intro-title {
	position: relative;
	background: var(--orange);
	padding: var(--gutter) var(--gutter) var(--gutter) calc(var(--gutter) * 3);
}
.expertise-intro-title::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: var(--mauve);
	transition: 2s 1s;
}
.reveal .expertise-intro-title::before {
	width: 0;
}
.expertise-intro-title > * {
	z-index: 3;
	position: relative;
	text-transform: uppercase;
	font-weight: 700;
}
.expertise-intro .text {
	padding: var(--gutter) var(--gutter) var(--gutter) calc(var(--gutter) * 3);
	max-width: calc(var(--wrapper) * 0.75);
	margin: 0 auto 0 0;
}

@media screen and (max-width: 1200px) {
	.expertise-intro-title,
	.expertise-intro .text { padding-left: var(--gutter); }
}
@media screen and (max-width: 900px) {
	.expertise-intro > .ill { flex: 0 0 50%; }
}
@media screen and (max-width: 600px) {
	.expertise-intro > .ill { flex: 0 0 100%; height: 90vw; order: 2; }
	.expertise-intro > .content { flex: 0 0 100%; padding-top: 0; padding-bottom: 0; order:1; }
}


.expertise-grid > * {
	flex: 0 0 33.333%;
}
.expertise-grid .box {
	position: relative;
	height: 100%;
	padding: calc(var(--gutter) * 1.25);
	text-align: left;
}
.expertise-grid .box .title {
	font-size: 0.9em;
}
.expertise-grid .box .text {
	margin-top: var(--gutter);
}
.expertise-grid .alt {
	height: 100%;
}
.expertise-grid .alt .box {
	flex: 0 0 100%;
	padding: var(--gutter) calc(var(--gutter) * 1.25);
}

.expertise-grid .box > picture:before {
	content: '';
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 1s 0.5s;
} 
.reveal .expertise-grid > *:nth-child(odd) .box > picture:before {
	height: 0;
}
.reveal .expertise-grid > *:nth-child(even) .box > picture:before {
	width: 0;
}
.expertise-grid .box.bg-yellow > picture:before { background: var(--yellow); }
.expertise-grid .box.bg-orange > picture:before { background: var(--orange); }
.expertise-grid .box.bg-blue > picture:before { background: var(--blue); }
.expertise-grid .box.bg-mauve > picture:before { background: var(--mauve); }
.expertise-grid .box.bg-purple > picture:before { background: var(--purple); }

@media screen and (min-width: 1401px) {
	.expertise-grid .alt .box:first-child {
		height: 200px;
	}
}
@media screen and (max-width: 1250px) {
	.expertise-grid .box { padding: var(--gutter); }
	.expertise-grid .alt .box { padding: var(--gutter); }
	.expertise-grid .box .title { font-size: 0.85em; }
}
@media screen and (max-width: 1400px) and (min-width: 901px) {
	.expertise-grid .alt .box:first-child {
		min-height: 15vw;
	}
}
@media screen and (max-width: 900px) {
	.expertise-grid > * { flex: 0 0 50%; }
	.expertise-grid *:not(.alt) .box { min-height: 33.333vw; }
	.expertise-grid > *.alt { flex: 0 0 100%; }
	.expertise-grid .alt .box { flex: 0 0 50%; }
}
@media screen and (max-width: 900px) and (min-width: 601px) {
	.expertise-grid > *.alt { height: auto; }
}
@media screen and (max-width: 600px) {
	.expertise-grid > * { flex: 0 0 100%; }
	.expertise-grid .alt .box { flex: 0 0 100%; min-height: 33.333vw; }
	.expertise-grid .alt .box:first-child { order: 2; }
	.expertise-grid .alt .box:last-child { order: 1; }
}



.expertise-hec {
	margin: calc(var(--gutter) * 2) 0;
}
.expertise-hec > * {
	flex: 0 0 100%;
	position: relative;
}
.expertise-hec .content {
	padding: calc(var(--gutter) * 2);
	text-align: left;
}
.expertise-hec .inner {
	max-width: calc(var(--wrapper) * 0.515);
	margin: 0 0 0 auto;
}
.expertise-hec .content .title {
	margin: var(--gutter) 0;
	font-size: 0.9em;
}
.expertise-hec .ill::before {
	content: '';
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	transition: 1s 1s;
}
.reveal .expertise-hec .ill:before {
	width: 0;
}

@media screen and (min-width: 901px) {
	.expertise-hec > * {
		flex: 0 0 50%;
	}
	.expertise-hec .ill { order: 2; }
	.expertise-hec .content { order: 1; }
}
@media screen and (max-width: 900px) {
	.expertise-hec .ill { height: 45vw; }
	.expertise-hec .content { padding: var(--gutter); }
}



@media screen and (min-width: 1000px) {
	body.lang-fr .expertise-grid div[data-order="4"] .title > * { min-height: 9em; }
	body.lang-en .expertise-grid div[data-order="4"] .title > * { min-height: 5.65em; }
}
@media screen and (min-width: 1150px) {
	body.lang-fr .expertise-grid div[data-order="4"] .title > * { min-height: 7.85em; }
}
@media screen and (min-width: 1340px) {
	body.lang-en .expertise-grid div[data-order="4"] .title > * { min-height: 4.5em; }
}
@media screen and (min-width: 1400px) {
	body.lang-fr .expertise-grid div[data-order="4"] .title > * { min-height: 6.7em; }
}
@media screen and (min-width: 1630px) {
	body.lang-en .expertise-grid div[data-order="4"] .title > * { min-height: 3.35em; }
}
@media screen and (min-width: 1700px) {
	body.lang-fr .expertise-grid div[data-order="4"] .title > * { min-height: 5.55em; }
}
@media screen and (min-width: 1900px) {
	body.lang-fr .expertise-grid div[data-order="4"] .title > * { min-height: 4.5em; }
}
@media screen and (min-width: 2170px) {
	body.lang-en .expertise-grid div[data-order="4"] .title > * { min-height: 2.275em; }
}
@media screen and (min-width: 2300px) {
	body.lang-fr .expertise-grid div[data-order="4"] .title > * { min-height: 3.35em; }
}