/* Switching box model for all elements */
* {
	box-sizing: border-box;
}


/* Responsive Navigation stylenav begin here */
nav > input,
nav > label {
	display: none; /* hidden on large screens */
}

/* Old Android bugfix */
body {  -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix {  from {padding:0;}  to {padding:0;} }

@media only screen {
.nav {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
line-height: 38px;
position: relative;
float: left;
*zoom: 1;}

#nav {
background: #03a688;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
position: absolute;
top: 0px;
left: 0;
width: 100%;
z-index: 99;}

#nav ul { list-style: none; margin: 0; padding: 0; }
#nav li { display: inline; float: left; width: 14%; }
	
#nav .vide		{ width: 20%; }
#nav .index		{ width: 15%; }
#nav .planches	{ width: 15%; }
#nav .themes	{ width: 15%; }
#nav .carte		{ width: 15%; }
	
}

#nav .current a,
#nav .current .current a,
#nav .current a:hover {
color: #ffffff;
background: #dc1960;}

#nav .current li a {color: #ffffff;}

#nav .vide a:hover{ text-decoration: none;
background: #dc1960;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #03a688 !important;}

#nav a:hover {
background: #dc1960;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #03a688 !important;}

a.current {
color: #ffffff;
pointer-events: none;}

a.current:hover {color: #ffffff;}

.caption-link:hover {color: #dc1960;}


@media (max-width: 920px) {
	
#nav .vide		{ display: none; }
#nav .index		{ width: 25%; }
#nav .planches	{ width: 25%; }
#nav .themes	{ width: 25%; }
#nav .carte		{ width: 25%; }
	
}

@media (max-width: 641px) {

	/* Theming opened nav */
	nav ul {
		/* translate with hardware acceleration */
		transform: translateZ(0);
		-webkit-transition: max-height .4s, overflow .4s;
		        transition: max-height .4s, overflow .4s;
		will-change: max-height, overflow;
		

		/* global stylenav */
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
#nav .vide		{ display: none; }
#nav .index		{ width: 100%; }
#nav .planches	{ width: 100%; }
#nav .themes		{ width: 100%; }
#nav .carte		{ width: 100%; }

	nav a:hover, 
	nav a:active
	{
		background: #dc1960;
	}
	
	/* handling clic with CSS3 checked */
	/* Theming closed nav */
	nav > input:not(:checked) ~ ul {
		max-height: 0;
		overflow: hidden;
	}
	/* Theming opened nav */
	nav > input:checked ~ ul {
		width:100%;
		max-height: 20em;
		overflow: visible;
	}
	

	/* Global styling nav button */	
	nav > label {
		display: block;
		position: absolute;
			top: -6.5rem; right: 1rem;
			z-index: 1;
		text-align: center;
		font-size: 10px;
		line-height: 1.8;
		color: #fff;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		-webkit-transition: .2s -webkit-transform cubic-bezier(0, 1.8, 1, 1.2);
		        transition: .2s transform cubic-bezier(0, 1.8, 1, 1.2);
	}
	nav > label:before {
		content: "";
		display: block;
		z-index: 1;
		height: 1.6rem; width: 2rem;
		background-color: transparent;
		background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#fff), to(#fff));
		background-image: -webkit-linear-gradient(left, #fff, #fff), -webkit-linear-gradient(left, #fff, #fff), -webkit-linear-gradient(left, #fff, #fff);
		background-image: linear-gradient(to right, #fff, #fff),
			linear-gradient(to right, #fff, #fff),
			linear-gradient(to right, #fff, #fff);
		background-position: center top, center, center bottom;
		background-repeat: no-repeat;
		-webkit-background-size: 2rem .3rem;
		        background-size: 2rem .3rem;
		margin: .8em auto 0;
		padding: 0;
		outline: 0;
		border: 0;
		cursor: pointer;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		-webkit-transition: .2s cubic-bezier(0, 1.8, 1, 1.2);
		        transition: .2s cubic-bezier(0, 1.8, 1, 1.2);
		transition-property: background;
	}
	
	/* Theming opened nav button */	
	nav > input:checked + label {
		-webkit-transform: scale(.8);
		transform: scale(.8);
	}
	nav > input:checked + label::before {
		background-position: center, center, center;
	}
	

	/* Hide alternate text except from screen readers */
	.visually-hidden {
		position: absolute !important;
		clip: rect(1px, 1px, 1px, 1px);
		overflow: hidden;
		height: 1px;
		width: 1px;
	}
	
}





/* BONUS deco */


/* Global deco */


nav a {
width: 100%;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #03a688;
background-color: #03a688;
color: #ffffff;
display: block;
font-size: 14px;
letter-spacing: 1px;
line-height: 38px;
text-align: center;
text-decoration: none;}

ul {list-style: none; margin: 0; padding: 0;}
section li {display: inline; float: left; width: 14%;}
section li::before {content: "\2713 "; margin-right: .8rem;}


/* orientation */
@media (orientation: landscape) and (max-device-width: 641px) {
	html,
	body {
		-webkit-text-size-adjust: 100%;
	}
}

pre {
	-moz-tab-size: 4;
    -o-tab-size: 4;
	     tab-size: 4;
    padding: 1em;
    margin: auto 1em;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.1);
    background: rgba(255,255,255,.6);
    white-space: pre-wrap;
	word-wrap: break-word;
	font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
	line-height: 1em;
}