@in .tablet{
	header nav {
    top: 35px;
    position: relative;
    text-align: right;
    z-index: 800;
}

#main_nav {
	display: none;
	margin-bottom: 70px; 
}

#sticky_logo {
	display: none;
}

.main_header {
	transition:height 0.3s;
}

.main_header.open {
	background: #fff; 
	z-index: 1000; 
	padding-bottom: 25px;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%; 
	z-index: 800;

	overflow: hidden;

	-webkit-box-shadow: 0 -5px 20px 3px rgba(0, 0, 0,0.2);
	box-shadow: 0 -5px 20px 3px rgba(0, 0, 0,0.2);
}

.main_header.sticky {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
    padding-bottom: 80px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 800;

    -webkit-box-shadow: 0 -5px 20px 3px rgba(0, 0, 0,0.2);
	box-shadow: 0 -5px 20px 3px rgba(0, 0, 0,0.2);
}


	.sticky nav li a {
		color: #535454; 
	}

	.sticky #sticky_logo {
	    display: block;
	    margin-left: 50px;
	    padding-left: 25px;
	    position: absolute;
	    bottom: -90px;
	}

	.main_header.open #sticky_logo {
		display: none;
	}

	.sticky #sticky_logo:after {
	     content: url("images/decroche.png");
	    height: 28px;
	    left: 0;
	    margin-top: -11px;
	    position: absolute;
	    width: 156px;
	    z-index: -1;
	}


	.body_home .sticky, .page .sticky {
		background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
	}

	.body_home .sticky #sticky_logo:after, .page .sticky #sticky_logo:after {
		content: url("images/decroche2.png");
	}


nav li {
	display: block;
	margin: 0 8px 5px ; 
	padding: 0 5px; 
	font-size: 14px;
	text-align: left;
}

nav li a {
	text-transform: uppercase;
	color: #535454;
	font-family: 'jaapokkiregular';
	position: relative;
	display: block;
	outline: none;
	text-decoration: none;
}
	a.first_nav {
		padding: 0 0 3px;
		transition: all 0.3s ease;
	}


	a.first_nav::after {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 1px;
		background: #a7e7d1;
		content: '';
		opacity: 0;
		-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
		-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
		transition: height 0.3s, opacity 0.3s, transform 0.3s;
		-webkit-transform: translateY(-8px);
		-moz-transform: translateY(-8px);
		transform: translateY(-8px);
	}

	a.first_nav:hover::after,
	a.first_nav:focus::after,
	nav li:hover a.first_nav::after
	 {
		height: 1px;
		opacity: 1;
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		transform: translateY(0px);
	}

	a.first_nav.current {
		color: #a7e7d1; 
	}


	.ss_nav {
		background: none repeat scroll 0 0 #fff;
	    left: 0;
	    position: absolute;
	    text-align: left;
	    top: 0;
	    width: 100%;
	    z-index: 1000;

	    transition: transform 0.2s ease-out;
	    transform: translateX(100%);
	}

	.ss_nav.open {
		transform: translateX(0);
	}

	.back_nav {
		cursor: pointer;
		font-size: 14px;
		text-transform: uppercase;
		padding: 10px 0;
		color: #010101;
		margin-top: 0 !important; 
		border-bottom: 1px solid lightgrey; 
		@extend .transition_all;
	}

	.back_nav:hover {
		color: #a7e7d1; 
	}

	.ss_nav ul {
		padding-left: 10px; 
	}

	.ss_nav li {
		display: block;
		margin: 15px 0; 
	}

	.ss_nav li a {
		font-family: "aaux_prolightregular";
		color: #010101;
		text-transform: none;
		font-size: 15px; 
		@extend .transition_all;
	}

	.ss_nav li a:hover {
		color: #a7e7d1; 
	}


.mobNav {
  position: absolute;
  width: 35px;
  height: 5px;
  background: #fff;
  display: block;
  right: 28px;
  margin-top: 35px; 
  z-index: 8000; 
}
 	

  .mobNav::before, .mobNav::after {
    content: "";
    display: block;
  }

  .mobNav, .mobNav::before, .mobNav::after {
    position: absolute;
    width: 35px;
    height: 5px;
    background: #fff;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .mobNav::before {
    margin-top: -10px;
  }
  .mobNav::after {
    margin-top: 10px;
  }

  .mobNav:hover, .mobNav:hover::before, .mobNav:hover::after {
    background: #a7e7d1; 
    cursor: pointer;
  }

  .sticky .mobNav, .sticky .mobNav::before, .sticky .mobNav::after {
  	background: #535454;
  }

  .mobNav.open {
    background: none; 
  }
  .mobNav.open::before {
    margin-top: 0px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #535454;
  }
  .mobNav.open::after {
    margin-top: 0px;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #535454;
  }
}