@import url("//hello.myfonts.net/count/2e48cd");
@font-face {
	font-family: 'Nexa';
	src: url('webfonts/2E48CD_0_0.eot');
	src: url('webfonts/2E48CD_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/2E48CD_0_0.woff2') format('woff2'), url('webfonts/2E48CD_0_0.woff') format('woff'), url('webfonts/2E48CD_0_0.ttf') format('truetype');
}

@font-face {
	font-family: 'NexaXBold';
	src: url('webfonts/2E48CD_1_0.eot');
	src: url('webfonts/2E48CD_1_0.eot?#iefix') format('embedded-opentype'), url('webfonts/2E48CD_1_0.woff2') format('woff2'), url('webfonts/2E48CD_1_0.woff') format('woff'), url('webfonts/2E48CD_1_0.ttf') format('truetype');
}

@font-face {
	font-family: 'NexaXBoldItalic';
	src: url('webfonts/2E48CD_2_0.eot');
	src: url('webfonts/2E48CD_2_0.eot?#iefix') format('embedded-opentype'), url('webfonts/2E48CD_2_0.woff2') format('woff2'), url('webfonts/2E48CD_2_0.woff') format('woff'), url('webfonts/2E48CD_2_0.ttf') format('truetype');
}

@font-face {
	font-family: 'Nexa-RegularItalic';
	src: url('webfonts/2E48CD_3_0.eot');
	src: url('webfonts/2E48CD_3_0.eot?#iefix') format('embedded-opentype'), url('webfonts/2E48CD_3_0.woff2') format('woff2'), url('webfonts/2E48CD_3_0.woff') format('woff'), url('webfonts/2E48CD_3_0.ttf') format('truetype');
}

@font-face {
	font-family: 'RobotoSlab';
	src: url('webfonts/RobotoSlab-Regular.ttf');
	src: url('webfonts/RobotoSlab-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'RobotoSlab-bold';
	src: url('webfonts/RobotoSlab-Bold.ttf');
	src: url('webfonts/RobotoSlab-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}
/*-----------------------------------------*/
/*- Layout                                -*/
/*-----------------------------------------*/

body {
	min-height: 100vh;
	background: #fff;
	color: hsla(0, 0%, 10%, 1);
	font-family: Nexa;
	font-size: 100%;
}
/*-----------------------------------------*/
/*- FOOTER                                -*/
/*-----------------------------------------*/
/* MENU DE LANGUES */

.menu-langue a {
	font-size: .8em;
}

.langue--item {
	font-size: .9em;
	padding: .2em 0;
	display: block;
	text-align: center;
	text-transform: uppercase;
	color: #999;
}

.copyright { margin-right: auto; } 

/*-----------------------------------------*/
/*- Références des projets                -*/
/*-----------------------------------------*/
/* Intégrer le module PROJETS ICI */
/*-----------------------------------------*/
/*- States                                -*/
/*-----------------------------------------*/

.is-muted {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

.is-stretched {
	width: 0;
	overflow: hidden;
}

.is-hidden {
	display: none !important;
}

.overide-hidden {
	display: block !important;
}

.linker {
	cursor: pointer;
}
/*-----------------------------------------*/
/*- Themes                                -*/
/*-----------------------------------------*/

.smooth-child-animation,
.smooth-child-animation *,
.smooth-animation {
	transition: all .5s cubic-bezier(.59, .21, .38, .76);
}

@keyframes smartbar-color {
	0% {
		background-color: #ff5468;
	}
	30% {
		background-color: #5d9cd8;
	}
	60% {
		background-color: #5dc4d8;
	}
	70% {
		background-color: #b092bd;
	}
	80% {
		background-color: #bdba73;
	}
	90% {
		background-color: #b092bd;
	}
	100% {
		background-color: #ff5468;
	}
}
/*-----------------------------------------*/
/*- DEBUG                                 -*/
/*-----------------------------------------*/

pre {
	font-family: monospace;
}
/*-----------------------------------------*/
/*- RESPONSIVE DESIGN                     -*/
/*-----------------------------------------*/

@media only screen and (min-width: 46rem) {
	body {
		display: flex;
		flex-direction: column;
	}
	.l-structure {
		width: 60rem;
		margin: 0 auto;
	}
	.site-content {
		min-height: 30em;
	}
	.site-entete {
		height: 15rem;
		margin-top: -1em;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.site-entete em {
		display: block;
		height: 0;
		width: 23rem;
		padding-top: 3.5rem;
		overflow: hidden;
		background: url(../img/cromology-logo@x1.png) center center no-repeat;
		background-size: contain;
	}
	.site-entete h1 {
		font-size: .7em;
		font-family: Nexa;
		text-align: right;
	}
	div.trigger-responsive {
		display: none;
	}
	.site--navigation {
		width: 27rem;
	}
	.site--navigation li {
		width: 12.5rem;
		border-bottom: 1px dotted #ccc;
		font-size: 1em;
		padding-right: .35em;
	}
	.site--navigation li a {
		width: 100%;
		line-height: 1.9rem;
		padding-top: .4rem;
		padding-left: .4rem;
		display: block;
	}
	.site--navigation li span {
		margin-right: .5em;
		float: right;
		font-size: .8em;
		color: #ccc;
		display: none;
	}
	.site--navigation .nos_marques {
		float: right;
		margin-top: -2.35rem;
	}
	.site--navigation li.on,
	.site--navigation li:hover {
		border-bottom: 1px solid #111;
	}
	.site--navigation li.on a,
	.site--navigation li:hover a {
		background: #f2f2f2;
	}
	.site--navigation li:hover span {
		color: #333;
	}
	.menu-langue {
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: 28em;
	}
	#menu-menu-responsive {
		display: none;
	}
	footer {
		background: #111;
		color: #eee;
		font-size: .8em;
		padding: 1.5em 0 3em;
		flex: 1;
	}
	footer ul {
		display: flex;
		justify-content: space-between;
	}
	footer li {
		margin: 0 1em;
		padding: .5em 0 .3em;
	}
	footer .first-item {
		margin-left: auto;
	}
	footer .last-item {
		margin: 0;
	}
	.foot-rs {
		width: 2em;
		height: 1em;
		overflow: hidden;
	}
	.foot-nav + .foot-nav {
		border-left: 1px solid #fff;
		padding-left: 1em;
		padding-right: 1em;
	}
	.langue--item.on {
		color: #333;
	}
	.langue--item + .langue--item {
		border-top: 1px solid #999;
		padding-top: .4em;
	}
}

@media only screen and (max-width: 46rem) {
	.site-entete {
		height: 3.8rem;
		padding: 1.7rem 0;
		align-items: center;
		background-color: #000;
	}
	.site-entete em {
		display: block;
		height: 0;
		padding-top: 2.7rem;
		overflow: hidden;
		background: url(../img/cromology-logo-resp@x1.png) center center no-repeat;
		background-size: contain;
	}
	.site-entete h1 {
		width: 22em;
		float: right;
		margin-right: 1rem;
		font-size: .7em;
		font-family: NexaXBold;
		text-align: right;
		color: #fff;
	}
	.menu-langue {
		position: absolute;
		top: 8rem;
		right: 1rem;
		z-index: 999999;
		display: none;
	}
	.site--navigation {
		display: none;
	}
	#menu-menu-responsive {
		display: block;
		position: absolute;
		top: 7.1em;
		width: 100%;
		z-index: 999999;
		background-color: rgba(51, 51, 51, .95);
	}
	div.trigger-responsive {
		color: #fff;
		font-size: 1.6em;
		line-height: 2em;
		padding: 0 .5em;
		width: 1em;
		cursor: pointer;
	}
	#menu-menu-responsive li {
		height: 0;
		overflow: hidden;
		color: #fff;
	}
	#menu-menu-responsive .sub-menu .on::after {
		content: ' ›';
	}
	#menu-menu-responsive > li > a {
		display: block;
		padding: 0 0 .5em;
		font-family: NexaXBold;
	}
	#menu-menu-responsive.is-focused {
		padding: 1em;
	}
	#menu-menu-responsive.is-focused li {
		height: auto;
		padding: .5em 0 .3em .5em;
	}
	.sub-menu {
		margin-bottom: 1em;
		padding-bottom: 1em;
		border-bottom: 1px solid #000;
		font-size: .8em;
	}
	footer {
		background: #111;
		color: #eee;
		font-size: .8em;
		padding: 1em;
	}
	footer li {
		padding: .3em 1em;
		display: inline-block;
	}
	.langue--item.on {
		display: none;
	}
	.langue--item {
		padding: .2em .2em 0;
		display: block;
		text-align: center;
		text-transform: uppercase;
		color: #fff !important;
		border: 1px solid #ccc;
	}
	.copyright {
		display: none;
	}
	.foot-nav + .foot-nav {
		padding-left: 1em !important;
	}
	.menu--smartbar {
		text-align: center !important;
	}
	.menu--smartbar .menu-entry + .menu-entry {
		display: none !important;
	}
}