/*
Pure CSS Navigation v1.8
by Adam Culpepper | @adamculpepper
https://github.com/adamculpepper/pure-css-navigation
*/

/* Customizable styles */


.pure-css-nav > nav > ul > li			{margin-right:1px;}

/* Level 1 */
.pure-css-nav > nav ul li a			{font-size:1rem; line-height:10px !important; margin:5px 10px 2px 10px ;}

/* Level 2 and beyond */

.pure-css-nav > nav ul ul li a			{font-size:0.8rem; line-height:35px; padding:8px 20px;}

/* Hover colors */

.pure-css-nav > nav ul li li:hover > a:first-child:nth-last-child(2),
.pure-css-nav > nav > ul > li:hover > a:first-child:nth-last-child(2) {background-color:#ddd;}

/* Font icon arrow colors */
.pure-css-nav > nav > ul > li > a:first-child:nth-last-child(2):after {color:rgba(0, 0, 0, 0.30);}
.pure-css-nav > nav > ul > li:hover > a:first-child:nth-last-child(2):after {color:rgba(0, 0, 0, 0.60);}
.pure-css-nav > nav ul li li > a:first-child:nth-last-child(2):after {color:rgba(0, 0, 0, 0.30);}
.pure-css-nav > nav ul li li:hover > a:first-child:nth-last-child(2):after {color:rgba(0, 0, 0, 0.60);}

/* Mobile Navigation overlay */
.pure-css-nav.mobile-nav input:checked + label + nav {background-color:rgba(255, 255, 255, 0.9);}

/* //////////////////////////
CORE STYLES BELOW - NO TOUCHY
////////////////////////// */
.pure-css-nav > nav {width:100%;}

.pure-css-nav > nav ul,
.pure-css-nav > nav li					{margin:0; padding:0; list-style:none; float: right;}
.pure-css-nav > nav li:hover			{cursor:pointer;}
.pure-css-nav > nav a					{text-decoration:none; position: relative;}



.pure-css-nav > nav a:before {
   content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #6D6E6F;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
.pure-css-nav > nav a:hover:before {
visibility: visible;
  width: 100%;
}

/* Level 1 */
.pure-css-nav > nav ul					{display:flex; flex-wrap:wrap;}
.pure-css-nav > nav ul li				{overflow:hidden; white-space:nowrap; text-align:left;}
.pure-css-nav > nav ul li:hover			{overflow:visible;}
.pure-css-nav > nav ul > li				{position:relative;}
.pure-css-nav > nav ul li a				{display:block; height:100%;}

/* Level 2 */
.pure-css-nav > nav ul ul				{visibility:hidden; opacity:0; position:absolute; z-index:1; display:block;}
.pure-css-nav > nav ul li:hover > ul	{visibility:visible; opacity:1;}

/* Level 3 */
.pure-css-nav > nav ul ul ul			{top:0; left:100%;}
.pure-css-nav > nav ul ul ul			{margin-top:5px;}

/* ---------- */

/* Transitions */
.pure-css-nav > nav ul,
.pure-css-nav > nav ul li,
.pure-css-nav > nav ul li a,
.pure-css-nav > nav ul li a:first-child:nth-last-child(2):after {transition:all 200ms linear;}

.pure-css-nav.mobile-nav				{transition:all 0.5s linear;}







/* ---------- */

/* Arrow styles */
.pure-css-nav > nav ul li a {display:flex; align-items:center;}
.pure-css-nav > nav ul li a:first-child:nth-last-child(2):after {
	font-family: dashicons;
	content: "\f140";
	font-size: 18px;
	display:inline-block;
	width:10px;
	
	margin-left:10px;
	opacity:0.50;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:10px 5px;
	
}
.pure-css-nav > nav ul ul li a:first-child:nth-last-child(2):before,
.pure-css-nav > nav ul ul li a:first-child:nth-last-child(2):after {content:'';}
.pure-css-nav > nav ul ul li a:first-child:nth-last-child(2):before {order:1; margin-left:10px;}
.pure-css-nav > nav ul ul li a:first-child:nth-last-child(2):after {order:2; margin-left:auto;}

/* ---------- */

/* FontAwesome Icon arrow support */
.pure-css-nav.nav-font-icons ul li a:first-child:nth-last-child(2):after {
	content:'\f078'; /* arrow: down */
	font-family:'FontAwesome';
	opacity:1;
	width:auto;
	height:auto;
	background:none;
}
.pure-css-nav.nav-font-icons ul ul li > a:first-child:nth-last-child(2):after {content:'\f054';} /* arrow: right */

/* ---------- */

/* Justify Navigation (first level equal widths) */
.pure-css-nav.nav-justified > nav > ul {width:100%;}
.pure-css-nav.nav-justified > nav > ul > li {flex:1 1 auto;}
.pure-css-nav.nav-justified > nav > ul > li > a {justify-content:center;}

/* ---------- */

/* Vertical Navigation */
.pure-css-nav.nav-vertical nav > ul {display:block; width:200px;}
.pure-css-nav.nav-vertical nav > ul li a:first-child:nth-last-child(2):after {margin-left:auto;}
.pure-css-nav.nav-vertical nav > ul ul {left:100%; top:0; margin-top:5px;}
.pure-css-nav.nav-vertical nav > ul > li	{margin-bottom:1px;}

/* ---------- */

/* Mobile Navigation */
.pure-css-nav.mobile-nav input {display:none;}
.pure-css-nav.mobile-nav input + label {margin-bottom:0; z-index:999;}
.pure-css-nav.mobile-nav input + label + nav > ul > li {margin-right:1px;}
.pure-css-nav.mobile-nav input:checked + label {position:absolute; top:8px; right:10px;}
.pure-css-nav.mobile-nav input:checked + label i:before {content:'\f00d';}










/* ---------- */

/* Responsive Breakpoints - down */

/* Extra Small (xs) and down */
@media (max-width:575px) {}

/* Small (sm) and down */
@media (max-width:767px) {}

/* Medium (md) and down */
@media (max-width:991px) {
	.pure-css-nav.mobile-nav > nav {display:none;}
	.pure-css-nav.mobile-nav input:checked + label + nav {display:block;}







/* Mobile Navigation > Animations */
.pure-css-nav.mobile-nav input:checked + label + nav			{animation:mobile-nav-slide-in 0.5s;}
.pure-css-nav.mobile-nav.pure-css-nav-animation-ready input:not(:checked) + label + nav 	{animation:mobile-nav-slide-out 5s; animation-play-state:paused!important;}




.pure-css-nav.mobile-nav input:checked + label i:before		{animation:fade-icon-close 0.5s;}

@keyframes mobile-nav-slide-in {
	0%		{left:-100%; opacity:0; visibility:visible; /*transition-timing-function: linear;*/}
	100%	{left:0; opacity:1;}
}

@keyframes mobile-nav-slide-out {
	0%		{left:0; opacity:1; visibility:visible;}
	100%	{left:-100%; opacity:0; visibility:hidden;}
}



@keyframes fade-icon-close {
	0%		{opacity:0;}
	100%	{opacity:1;}
}


/* Mobile Navigation > Vertical Navigation */
.pure-css-nav.mobile-nav input:checked + label + nav > ul {display:block; width:300px; max-width:100%; height:100%;}
.pure-css-nav.mobile-nav input:checked + label + nav > ul li a:first-child:nth-last-child(2):after {margin-left:auto;}
.pure-css-nav.mobile-nav input:checked + label + nav > ul ul {left:0; top:100%; width:100%;}
.pure-css-nav.mobile-nav input:checked + label + nav > ul > li {margin-bottom:1px;}
.pure-css-nav.mobile-nav input:checked + label + nav > ul li:hover > ul {position:relative; margin-left:10px; border-left:3px solid #999;}
.pure-css-nav.mobile-nav input:checked + label + nav ul ul ul {margin-top:0;}

.pure-css-nav.mobile-nav input:checked + label i:before {animation:anim1 2s;}





@keyframes anim1 {
	from {color:red; background:green;}
}


.pure-css-nav.mobile-nav input + label + nav {background-color:rgba(255, 0, 255, 0.9)!important;} /* temp */
.pure-css-nav.mobile-nav input + label + nav {
	display:block;
	margin:0 -100%;
	margin:0 calc(50% - 50vw);
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:99;
	width:100%;
	height:100%;





}



.pure-css-nav.mobile-nav input:checked + label + nav {

	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:99;
	width:100%;
	height:100%;




}



.pure-css-nav.mobile-nav input:checked + label + nav			{visibility:visible; opacity:1;}
.pure-css-nav.mobile-nav input:not(:checked) + label + nav 	{visibility:hidden; opacity:0;}




/*
.pure-css-nav.mobile-nav *,
.pure-css-nav.mobile-nav *:before,
.pure-css-nav.mobile-nav *:after {animation-play-state:paused!important;}
*/







.pure-css-nav.mobile-nav:not(:hover) * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	border:2px solid red;
}





}

/* Large (lg) and down */
@media (max-width:1199px) {}

/* ---------- */

/* Responsive Breakpoints - up */

/* Small (sm) and up */
@media (min-width:576px) {}

/* Medium (md) and up */
@media (min-width:768px) {}

/* Large (lg) and up */
@media (min-width:992px) {
	.pure-css-nav.mobile-nav input:not(:checked),
	.pure-css-nav.mobile-nav input:not(:checked) + label {display:none;}
}

/* Extra Large (xl) and up */
@media (min-width:1200px) {}

.pure-css-nav a:not([href]),
.pure-css-nav a[href='']:hover,
.pure-css-nav a[href='#']:hover,
.pure-css-nav a[href='']:active,
.pure-css-nav a[href='#']:active {pointer-events:none;}





/*
multi-layer mobile nav
https://codepen.io/tiffachoo/pen/yzZRXK



try not covering the whole window - just the slide out
*/
.navigation { display: none;}

/* NAV */

nav.navigation{
	
	height:50px;
	background-color:#3c3c3c;
	z-index:2;
}
.nav-logo{
	float:left;
	height:50px;
	line-height:50px;
	padding:0 20px;
	background-color:#11999e;
	color:#ffffff;
	font-weight:700;
	text-transform:uppercase;
}
ul.nav-menu, ul.nav-menu li, ul.nav-menu li a{
	float: none;
}
ul.nav-menu{
	padding-left:10px;
	margin: 0 !important;
}
ul.nav-menu li a{
	height:50px;
	line-height:50px;
	padding:0 10px;
	color:#ffffff;
	text-decoration:none;
	-webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
ul.nav-menu li a:hover{
	color:#6decb9;
}
.nav-toggle{
	display:none;

	position:absolute;
	top:0;
	right:0;
	width:50px;
	height:50px;
	
	cursor:pointer;
}
span.icon-bar{
	position:absolute;
	right:12px;
	display:block;
	width:26px;
	height:2px;
	background-color:#0d6cbf;
	-webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.icon-bar:nth-child(1){
  top:17px;
}
.icon-bar:nth-child(2){
  top:24px;
}
.icon-bar:nth-child(3){
  top:31px;
}
.nav-overlay{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	/*background-color:rgba(0,0,0,0.5);*/
	z-index:1;
	opacity:0;
	visibility:hidden;
	-webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.nav-overlay.active{
	opacity:1;
	visibility:visible;
}

/* ICON BARS ANIMATION */

.nav-toggle.active .icon-bar:nth-child(1){
	top:24px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
.nav-toggle.active .icon-bar:nth-child(2){
	width:0;
}
.nav-toggle.active .icon-bar:nth-child(3){
	top:24px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* MEDIAQUERIES */

@media screen and (max-width:768px){
	.navigation { display: block;}
	ul.nav-menu{
		position:absolute;
		top:129px;
		left: 0;
		width:100%;
		height:0;
		padding:0;
		overflow:hidden;
		margin: 0 !important;
	}
	ul.nav-menu.active{
		height:auto;text-align: center; background: #fff;
	}
	ul.nav-menu li{
		width:100%;
		list-style: none;
	}
	ul.nav-menu li a{
		width:100%;
		padding:0;
		text-align:center;
		color: #454545;
		
	}
	ul.nav-menu li a:hover{
		background-color:#1c1c1c;
	}
	.nav-toggle{
		display:block;
	}
}
@media screen and (min-width:768px){
	.nav-overlay.active{
		visibility:hidden;
		opacity:0;
	}
}



@media all and (max-width: 768px) {
	#site-navigation {display: none;}
	.menu-mobile-on { top:85px !important;}
	.tabs.vertical>li{
		
		width: 46% !important;
    float: left !important;
    margin-left: 10px !important;
    display: block;
  
	}
	    
	
	#metiers-menu-mobile .tabs li a { font-size: 14px !important;}
	#metiers-menu-mobile .tabs li {
    padding-top: 0.2rem !important;
    padding-bottom: 0.8rem !important;
}
    
}