/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template, /* 1 */
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Correct the line-height for all headings in Chrome mobile, Firefox,
 * iOS Safari, Microsoft Edge and IE.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.15;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/* fin du reset css */
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on June 24, 2016 */



@font-face {
    font-family: 'robotobold';
    src: url('../font/roboto-bold-webfont.woff2') format('woff2'),
         url('../font/roboto-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'robotoregular';
    src: url('../font/roboto-regular-webfont.woff2') format('woff2'),
         url('../font/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latoregular';
    src: url('../font/lato-regular-webfont.woff2') format('woff2'),
         url('../font/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latobold';
    src: url('../font/lato-bold-webfont.woff2') format('woff2'),
         url('../font/lato-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



html {
	color: #b3b3b3;
	font-family: 'robotoregular','latoregular', sans-serif;
	font-style: normal;
	font-weight: 400;
	
}
body {
  margin: 0;
  background-color: #333333;
  
}
a {
	text-decoration: none;
	color: #b3b3b3;
}


#head {
	background-color: #1E1E1E;
	height: 90px;
	width: 100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}
#head > div:nth-child(1){
	height: 90px;
	display: flex;
	margin-left: auto;
	margin-right: auto;
	width: 677px;
}
.logo > a:nth-child(1) > img:nth-child(1){
	height: 80px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#head > div:nth-child(1) > div:nth-child(2){
	margin-right: auto;
}
#head > div:nth-child(1) > div:nth-child(2) > a:nth-child(1) > img:nth-child(1){
	height: 90px;
}
.logo{
	margin-left: auto;
}
#main-nav > li > a > i{
	position: relative;
	top: 4px;
}


nav{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe */
	background: #959595; /* Old browsers */
	background: -moz-linear-gradient(top,  #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */

}

/* test menu déroulant principal */

#main-nav, #main-nav ul{
padding:0;
margin:0;
list-style:none;
text-align:center;

}
#main-nav li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#main-nav ul li{
display:inherit;
border-radius:0;
}
#main-nav ul li:hover{
border-radius:0;
}
#main-nav ul li:last-child{
border-radius:0 0 8px 8px;
}
#main-nav ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#main-nav li:hover ul{
max-height:50em;
}
/* background des liens menus */
/*#main-nav li:first-child{
background-color: #65537A;
background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
#main-nav li:nth-child(2){
background-color: #729EBF;
background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#main-nav li:nth-child(3){
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#main-nav li:nth-child(4){
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#main-nav li:nth-child(5){
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#main-nav li:last-child{
background-color: #CFFF6A;
background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}*/
#main-nav>li{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe */
	background: #959595; /* Old browsers */
	background: -moz-linear-gradient(top,  #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
}
/* background des liens sous menus */

#main-nav li:nth-child(2) li{
background:#333A40;
}
#main-nav li:nth-child(3) li{
background:#333A40;
}
#main-nav li:last-child li{
background:#333A40;
}

/* background des liens menus*/
#main-nav li:first-child:hover{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#70b4ba+0,081112+46,010101+50,070d0d+53,336569+76,24484c+92,000000+100 */
	background: #70b4ba; /* Old browsers */
	background: -moz-linear-gradient(top,  #70b4ba 0%, #081112 46%, #010101 50%, #070d0d 53%, #336569 76%, #24484c 92%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #70b4ba 0%,#081112 46%,#010101 50%,#070d0d 53%,#336569 76%,#24484c 92%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #70b4ba 0%,#081112 46%,#010101 50%,#070d0d 53%,#336569 76%,#24484c 92%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70b4ba', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}
#main-nav li:nth-child(2):hover{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#70b4ba+0,081112+46,010101+50,070d0d+53,336569+76,24484c+92,000000+100 */
	background: #70b4ba; /* Old browsers */
	background: -moz-linear-gradient(top,  #70b4ba 0%, #081112 46%, #010101 50%, #070d0d 53%, #336569 76%, #24484c 92%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #70b4ba 0%,#081112 46%,#010101 50%,#070d0d 53%,#336569 76%,#24484c 92%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #70b4ba 0%,#081112 46%,#010101 50%,#070d0d 53%,#336569 76%,#24484c 92%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70b4ba', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
#main-nav li:nth-child(3):hover{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#70b4ba+0,081112+46,010101+50,070d0d+53,336569+76,24484c+92,000000+100 */
	background: #70b4ba; /* Old browsers */
	background: -moz-linear-gradient(top,  #70b4ba 0%, #081112 46%, #010101 50%, #070d0d 53%, #336569 76%, #24484c 92%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #70b4ba 0%,#081112 46%,#010101 50%,#070d0d 53%,#336569 76%,#24484c 92%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #70b4ba 0%,#081112 46%,#010101 50%,#070d0d 53%,#336569 76%,#24484c 92%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70b4ba', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
#main-nav li:nth-child(4):hover{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#70b4ba+0,081112+46,010101+50,070d0d+53,336569+76,24484c+92,000000+100 */
	background: #70b4ba; /* Old browsers */
	background: -moz-linear-gradient(top,  #70b4ba 0%, #081112 46%, #010101 50%, #070d0d 53%, #336569 76%, #24484c 92%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #70b4ba 0%,#081112 46%,#010101 50%,#070d0d 53%,#336569 76%,#24484c 92%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #70b4ba 0%,#081112 46%,#010101 50%,#070d0d 53%,#336569 76%,#24484c 92%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70b4ba', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
#main-nav li:nth-child(5):hover{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#70b4ba+0,081112+46,010101+50,070d0d+53,336569+76,24484c+92,000000+100 */
	background: #70b4ba; /* Old browsers */
	background: -moz-linear-gradient(top,  #70b4ba 0%, #081112 46%, #010101 50%, #070d0d 53%, #336569 76%, #24484c 92%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #70b4ba 0%,#081112 46%,#010101 50%,#070d0d 53%,#336569 76%,#24484c 92%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #70b4ba 0%,#081112 46%,#010101 50%,#070d0d 53%,#336569 76%,#24484c 92%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70b4ba', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}
#main-nav li:last-child:hover{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#70b4ba+0,081112+46,010101+50,070d0d+53,336569+76,24484c+92,000000+100 */
	background: #70b4ba; /* Old browsers */
	background: -moz-linear-gradient(top,  #70b4ba 0%, #081112 46%, #010101 50%, #070d0d 53%, #336569 76%, #24484c 92%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #70b4ba 0%,#081112 46%,#010101 50%,#070d0d 53%,#336569 76%,#24484c 92%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #70b4ba 0%,#081112 46%,#010101 50%,#070d0d 53%,#336569 76%,#24484c 92%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70b4ba', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
/*et sous menus au survol */
#main-nav li:nth-child(2) li:hover{
background:#729EBF;
}
#main-nav li:nth-child(3) li:hover{
background:#729EBF;
}
#main-nav li:last-child li:hover{
background:#729EBF;
}

/* les a href */
#main-nav a{
text-decoration:none;
display:block;
padding:8px 31px;
color:#b3b3b3;
font-family: 'robotoregular','latoregular', sans-serif;
}
#main-nav ul a{
padding:8px 0;
}
#main-nav li:hover li a{
color:#fff;
text-transform:inherit;
}
#main-nav li:hover a, #main-nav li li:hover a{
color:#fff;
}
/* gestion de l'aside */

#wip > aside, #portfolio > aside{
	display: none;
	background-color: #000000;
	position: fixed;
	top:0px;
	left: 0px;
	width: 300px;
	border-radius:8px 8px 8px 8px;
	-moz-box-shadow: 0px 0px 10px 0px #000000;
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	-o-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=10);
}

#wip > aside ul, #portfolio > aside  ul{
	padding-left: 0px;
	margin : 0px;
	margin-top: 134px;
}
#wip > aside a, #portfolio > aside a{
	text-decoration:none;
	display:block;
	padding:8px 32px;
	color:#b3b3b3;
	font-family: 'robotoregular','latoregular', sans-serif;
}
#wip > aside:nth-child(2) > ul:nth-child(1) > li, #portfolio > aside:nth-child(2) > ul:nth-child(1) > li{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
#wip > aside:nth-child(2) > ul:nth-child(1) > li:last-child, #portfolio > aside:nth-child(2) > ul:nth-child(1) > li:last-child{
	border-radius:0 0 8px 8px;
}
#wip > aside:nth-child(2) > ul:nth-child(1) > li:first-child, #portfolio > aside:nth-child(2) > ul:nth-child(1) > li:first-child{
	border-radius:8px 8px 0 0;
}
#wip > aside:nth-child(2) > ul:nth-child(1) > li:hover, #portfolio > aside:nth-child(2) > ul:nth-child(1) > li:hover{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
	background: #70b4ba; /* Old browsers */
	background: -moz-linear-gradient(top,  #70b4ba 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #70b4ba 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #70b4ba 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70b4ba', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	color: #fff;
}
#wip > aside:nth-child(2) > ul:nth-child(1) > li:hover a, #portfolio > aside:nth-child(2) > ul:nth-child(1) > li:hover a{
	color: #fff;
}
#wip > aside:nth-child(2) > ul:nth-child(1) > li:nth-child(1) > a:nth-child(1) > i, #portfolio > aside:nth-child(2) > ul:nth-child(1) > li:nth-child(1) > a:nth-child(1) > i{
	position: relative;
	top: 4px;
}




/*fin de gestion de l'aside */

/* début miniaside administration */
#admin aside{
	position: fixed;
	top: 140px;
	left : 20px;
	width: 275px;
}

#navigationMenu li{
	list-style:none;
	height:39px;
	padding:2px;
	width:40px;
}

#navigationMenu span{
	/* Container properties */
	width:0;
	left:38px;
	padding:0;
	position:absolute;
	overflow:hidden;

	/* Text properties */
	font-family: 'robotobold','latobold', sans-serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing:0.6px;
	white-space:nowrap;
	line-height:39px;
	
	/* CSS3 Transition: */
	-webkit-transition: 0.25s;
	
	/* Future proofing (these do not work yet): */
	-moz-transition: 0.25s;
	transition: 0.25s;
}

#navigationMenu a{
	background: url('../images/navigation.jpg') no-repeat;

	height:39px;
	width:38px;
	display:block;
	position:relative;
}

/* General hover styles */

#navigationMenu a:hover span
{ 
	width:auto; 
	padding:0 20px;
	overflow:visible; 
}
#navigationMenu a:hover{
	text-decoration:none;
	
	/* CSS outer glow with the box-shadow property */
	-moz-box-shadow:0 0 5px #9ddff5;
	-webkit-box-shadow:0 0 5px #9ddff5;
	box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home 
{	
	background-position:0 0;
}
#navigationMenu .home:hover 
{	
	background-position:0 -39px;
}
#navigationMenu .home span{
	background-color:#7da315;
	color:#3d4f0c;
	text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .logout { background-position:-38px 0;}
#navigationMenu .logout:hover { background-position:-38px -39px;}
#navigationMenu .logout span{
	background-color:#1e8bb4;
	color:#223a44;
	text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .modify { background-position:-76px 0;}
#navigationMenu .modify:hover { background-position:-76px -39px;}
#navigationMenu .modify span{
	background-color:#c86c1f;
	color:#5a3517;
	text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .nouveau { background-position:-114px 0;}
#navigationMenu .nouveau:hover{ background-position:-114px -39px;}
#navigationMenu .nouveau span{
	background-color:#d0a525;
	color:#604e18;
	text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .message { background-position:-152px 0;}
#navigationMenu .message:hover { background-position:-152px -39px;}
#navigationMenu .message span{
	background-color:#af1e83;
	color:#460f35;
	text-shadow:1px 1px 0 #d244a6;
}


/*fin du miniaside */

/* menu burger */

#burger {
	position: fixed;
	top: 140px;
	left : 20px;
	cursor: pointer;
}
#wip aside,#portfolio aside{
	z-index: 2000;
	min-height: 100vh;
}
#burger .material-icons{
	font-size: 60px;
}
#burger:hover{
	color:#fff;
}
#cache{
	position: fixed;
	min-height: 100vh;
	top: 0;
	left: 0;
	right: 0;

	background-color: rgba(0,0,0,0.3);
	z-index: 1500;
	display: none;
}
@media screen and (max-width: 1156px){
	#burger{
		top: 13px;
		left: 20px;
	}
}

/* fin du burger */
/*début de l'article */
aside ul{
	list-style: none;
}
article{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	width: 960px;
	background-color: #292929;
	margin: auto;
	margin-top: 20px;

	-moz-box-shadow: 0px 0px 10px 0px #000000;
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	-o-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=10);
	padding-top: 20px;
	
	
}

.paysage{
	width: 940px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	-moz-box-shadow: 0px 0px 10px 0px #000000;
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	-o-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=10);
}
.portrait{
	width: 460px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	-moz-box-shadow: 0px 0px 10px 0px #000000;
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	-o-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=10);
}
#portfolio > article > p, #wip > article > p{
	flex: 1;
	font-size: 1.1em;
	max-width: 960px;
	padding: 0px 10px 0px 10px;
	line-height: 1.5em;
	margin: 0;
	text-align: left;
}
#accueil > article > p, #about > article > p{
	font-size: 1.1em;
	width: 960px;
	padding: 30px 10px 0px 10px;
	line-height: 1.5em;
	margin: 0;
	text-align: left;
}
#portfolio article a, #wip article a{
	text-decoration: none;
	display: block;
	padding: 0px 0px;
	color: #b3b3b3;
	font-family: 'robotoregular','latoregular', sans-serif;
}
article h1{
	width: 960px;
	font-family: 'latobold','robotobold', sans-serif;
	
	font-size: 1.8em;
	
	
}
iframe{
	margin-bottom: 0px;
	-moz-box-shadow: 0px 0px 10px 0px #000000;
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	-o-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=10);
}

form{
	width: 940px;
}
textarea{
	width: 400px;
	height: 250px;
}
#wrapper{
	margin-bottom: 25px;
	min-height: calc(100vh - 75px);
	
}


footer{
	width: 100%;
	height: 50px;

	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	display: flex;
	justify-content: center;
}
footer p{
	margin: 0px;
}
.msg > a{
	display: flex;
	flex-direction: row;
	width: 940px;
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.msg > a:hover{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
	background: #70b4ba; /* Old browsers */
	background: -moz-linear-gradient(top,  #70b4ba 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #70b4ba 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #70b4ba 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70b4ba', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	color: #fff;
}
.msg > a div:nth-child(2), .msg > a div:last-child{
	flex: 1;
}
.msg > a div:first-child{
	flex: 2;
}
.nihilo{
	width: 940px;
	margin-top: 100px;
	padding: 2px 0px 2px 0px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#563200+0,06000a+100 */
	background: rgb(86,50,0); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(86,50,0,1) 0%, rgba(6,0,10,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(86,50,0,1) 0%,rgba(6,0,10,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(86,50,0,1) 0%,rgba(6,0,10,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#563200', endColorstr='#06000a',GradientType=0 ); /* IE6-9 */
	border-radius: 8px 8px 8px 8px;
}
.nihilo:hover{
	background: rgb(128,75,0);
	color: #000000;
}
[type=submit]{
	cursor: pointer;
	border: 1px;
	border-radius: 8px 8px 8px 8px;
}
[type=submit]:hover{
	background: #70b4ba;
}
.msgread{
	width: 940px;
	display: flex;
}
.msgread div:first-child{
	flex: 3;
	text-align: left;
}
.msgread div:last-child{
	flex: 1;
	text-align: right;
}


#admin article li a{
	width: 940px;
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	
}
#admin article li:hover{
	background: #70b4ba; /* Old browsers */
	background: -moz-linear-gradient(top,  #70b4ba 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #70b4ba 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #70b4ba 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70b4ba', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	color: #fff;
}
#lienvid{
	width: 940px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	margin-bottom: 10px;
}
#lienvid:hover{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
	background: #70b4ba; /* Old browsers */
	background: -moz-linear-gradient(top,  #70b4ba 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #70b4ba 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #70b4ba 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70b4ba', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	color: #fff;
}
article{
	padding-bottom: 20px;
}
/*#portfolio > article h1, portfolio > article > a, portfolio > article img, portfolio > article p{
	width: 960px;
}*/


html body div#wrapper section#admin article form img.paysage{
	display: block;
	width: 470px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	-moz-box-shadow: 0px 0px 10px 0px #000000;
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	-o-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=10);
}

html body div#wrapper section#admin article form img.portrait{
	display: block;
	width: 230px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	-moz-box-shadow: 0px 0px 10px 0px #000000;
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	-o-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=10);
}
html body div#wrapper section#admin article form input{
	margin-bottom: 10px;
}