/* @group Boilerplate */

/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ffc300;
    color: #000;
    padding: 0.2em 0;
}

/* @end */

/* @group Main */

*, ul, ol, h1, h2 {
	margin: 0;
	padding: 0;
}

html, body {
	background-color: #fafafa;
	color: #333;
	height: 100%;
	font-family: "rooney-web-1","rooney-web-2";
	/*line-height: 1.25em;*/
}

a:link, a:visited {
	color: #2587fa;
	text-decoration: none;
	
	-webkit-transition-duration: 180ms;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-property: background-color, color;
	transition-duration: 180ms;
	transition-timing-function: ease-out;
	transition-property: background-color, color;
}

a:hover {
	color: #104a8f;
	cursor: pointer;
}

/* @end */


/* @group Home */

#home {
	
}

#home header {
	color: #153358;
	background: #abbcd1 url(../img/ciel.jpg) no-repeat center bottom;
	-moz-background-size: cover;
	background-size: cover;
	border-bottom: 1px solid #9dacbf;
	font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
}

#home header h1 {
	font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
	text-transform: uppercase;
	font-weight: normal;
	color: #34476f;
	text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

#home ol {
	width: 90%;
	margin: 0 auto;
	list-style-type: none;
	overflow: hidden;
}

#home ol li {
	float: left;
}

#home ol li a:link {
/* 	text-indent: -9999em; */
	display: block;
}

#home ol li:nth-child(1) a:link {
	background: url(../img/services.svg) no-repeat center center;
}

#home ol li:nth-child(2) a:link {
	background: url(../img/projects.svg) no-repeat center center;
}

#home ol li:nth-child(3) a:link {
	background: url(../img/bureau.svg) no-repeat center center;
}

#home ol li:nth-child(4) a:link {
	background: url(../img/twitter.svg) no-repeat center center;
}

#home ol li:nth-child(5) a:link {
	background: url(../img/dribbble.svg) no-repeat center center;
}

#home ol li:nth-child(6) a:link {
	background: url(../img/webtypo.svg) no-repeat center center;
}

#home section #lang {
	/*font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
	display: none;*/
	color: #bbb;
	font-size: 0.725em;
	margin-bottom: 3em;
}

#home section #lang a:link,
#home section #lang a:visited {
	color: #93b9ee;
	background-color: transparent;
}

#home section #lang a:hover {
	color: #1e58ab;
	background-color: #fff7b9;
}

#home section a:link,
#home section a:visited {
	color: #1e58ab;
	background-color: transparent;
}

#home section a:hover {
	color: #222;
	background-color: #fff7b9;
}

#home section a#contact:link,
#home section a#contact:visited {
	display: block;
	background: url(../img/email_noir.svg) no-repeat center center;
	text-indent: -9999em;
}

#home section a#contact:hover {
	background: url(../img/email_orange.svg) no-repeat center center;
}


/* @end */


/* @group Projets */

#services, #projects, #outils, #carnet, #ailleurs, #quick {
	text-align: center;
}

#touchHead {
	font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
	width: 100%;
	overflow: hidden;
}

#touchHead h1 {
	width: 50%;
	float: left;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: normal;
	color: #333;
}

#touchHead a {
	display: block;
	float: right;
	width: 1.5em;
	height: 1.5em;
}

#services ul,
#projects ul,
#projects ol,
#outils ul,
#carnet ul,
#ailleurs ul,
#quick ul {
	list-style-type: none;
}

#projects ul a:link,
#projects ul a:visited,
#project ul a:link,
#project ul a:visited {
	font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
	display: block;
	color: #555;
}

#projects ul a:hover,
#project ul a:hover {
	color: #fe521d;
}

#projects img {
	display: block;
	width: 100%;
}
/*
#projects > ul li:first-of-type img {
	width: 10em;
    height: 10em;
    border: 2em solid rgba(0,0,0,0.05);
    border-radius: 10em;
    
    -webkit-animation: rotating 2s linear infinite;
}
*/

#home h2 {
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

/*
#projects > ul li:first-of-type h2 {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-style: italic;
	font-size: 1.125em;
	color: #333;
}
*/

#services footer,
#projects footer,
#project footer,
#outils footer,
#carnet footer,
#ailleurs footer,
#quick footer {
	font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
	color: #fff;
	background: #abbcd1 url(../img/ciel.jpg) no-repeat center bottom;
}

#services footer a:link,
#services footer a:visited,
#projects footer a:link,
#projects footer a:visited,
#project footer a:link,
#project footer a:visited,
#outils footer a:link,
#outils footer a:visited,
#carnet footer a:link,
#carnet footer a:visited,
#ailleurs footer a:link,
#ailleurs footer a:visited,
#quick footer a:link,
#quick footer a:visited {
	color: #06395e;
	text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

#services footer a:hover,
#projects footer a:hover,
#project footer a:hover,
#outils footer a:hover,
#carnet footer a:hover,
#ailleurs footer a:hover,
#quick footer a:hover {
	color: #0a1924;
	/*text-shadow: 0 1px 0 rgba(255,255,255,0.4);*/
}

/* @end */


/* @group Projet */

#services header,
#project header,
#outils header,
#carnet header,
#ailleurs header,
#quick header {
	display: none;
}

#projectContent {
}

#projectContent h1 {
	font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
	font-weight: normal;
}

#projectContent h2 {
	font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
	font-weight: normal;
}

#projectContent h3 {
	font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
	font-weight: normal;
}

.screenshot {
	/* box-shadow: 0px 3px 20px -5px rgba(0, 0, 0, 0.3); */
	border: 1px solid rgba(0, 0, 5, 0.1);
}

#projectContent nav {
	overflow: hidden;
	text-align: center;
}

#previous:link, #previous:visited {
	float: left;
	color: #2587fa;
	background-color: #fafafa;
}

#previous:hover {
	background-color: #eee;
	color: #0e5cb8;
}

#next:link, #next:visited {
	float: right;
	color: #2587fa;
	background-color: #fafafa;
}

#next:hover, #previous:hover {
	background-color: #eee;
	color: #0e5cb8;
}

#project #touchNav {
	text-align: center;
}


/* @end */

/* @group Services */

#servicesContent p {
	text-align: left;
}

#servicesContent p.first {
	color: #3fa6d8;
	font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
	font-weight: normal;
}

#servicesContent h2, #servicesContent h3 {
	font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
	font-weight: normal;
	text-align: left;
}

#servicesContent figcaption {
	color: #888;
}
	
#servicesContent ul li {
	font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
	text-align: center;
}

/* @end */

/* @group Ailleurs */

#links {
	text-align: left;
}

#links h1 a:link,
#links h1 a:visited {
	color: #3d80c9;
}

#links h1 a:hover {
	color: #214e7f;
}
	
#links h2 a:link,
#links h2 a:visited {
		color: #639ceb;
}

#links h2 a:hover {
	color: #214e7f;
}

/* @end */

/* @group Menu Touch */

#touchNav {
	font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
	background: #abbcd1 url(../img/ciel.jpg) no-repeat center top;
	background-size: cover;
	padding-bottom: 1em;
	border-bottom: 1px solid #9dacbf;
}

#touchNav h1, #touchNav h2 {
	margin: 0;
}

#touchNav h1 {
	font-weight: normal;
}

#touchNav h2 {
	font-weight: normal;
}


#services #touchNav ul a:link,
#services #touchNav ul a:visited,
#projects #touchNav ul a:link,
#projects #touchNav ul a:visited,
#project #touchNav ul a:link,
#project #touchNav ul a:visited,
#carnet #touchNav ul a:link,
#carnet #touchNav ul a:visited,
#outils #touchNav ul a:link,
#outils #touchNav ul a:visited,
#ailleurs #touchNav ul a:link,
#ailleurs #touchNav ul a:visited,
#quick #touchNav ul a:link,
#quick #touchNav ul a:visited {
	display: block;
	width: 80%;
	padding: 0.5em 0 0.25em;
	color: #141e31;
	text-shadow: 0 1px 0 rgba(255,255,255,0.4);
	margin: 0 auto;
}

#projects #touchNav ul a:hover,
#project #touchNav ul a:hover {
	color: #000;
	background-color: rgba(255,255,255,0.3);
	border-radius: 0.4em
}

#touchNav ul li.selected {
	padding: 0.5em 0 0.25em;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

#touchHead.touchNavOn h1 {
	text-indent: -9999em;
}

/* @end */

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 3em) {
	html, body {
/* 		background-color: orange; */
	}
	
	/* - - - - Accueil - - - - */
	
	#home header {
		width: 100%;
		overflow: hidden;
		padding: 2em 0 0 0;
		text-align: center;
	}
	
	#home ol {
		width: 90%;
		margin-top: 1.25em auto 0;
	}
	
	#home ol li {
		margin: 2.5% 3.6666%;
		width: 26%;
		height: 25%;
		line-height: 5em;
		/*background-color: rgba(255,255,255,0.5);*/
	}
	
	#home ol li a:link,
	#home ol li a:visited {
		text-indent: -9999em;
		display: block;
		-webkit-transition-duration: 180ms;
		-webkit-transition-timing-function: ease-in;
		-webkit-transition-property: background-size, text-indent, color;
		transition-duration: 180ms;
		transition-timing-function: ease-in;
		transition-property: background-size;
	}

	#home ol li:nth-child(1) a:link,
	#home ol li:nth-child(1) a:visited {
		background: url(../img/servicesA.svg) no-repeat center center;
		background-size: 3em;
	}
	
	#home ol li:nth-child(1) a:hover {
		background-size: 3.5em;
	}

	#home ol li:nth-child(2) a:link,
	#home ol li:nth-child(2) a:visited {
		background: url(../img/projects.svg) no-repeat center center;
		background-size: 3em;
	}
	
	#home ol li:nth-child(2) a:hover {
		background-size: 3.5em;
	}

	#home ol li:nth-child(3) a:link,
	#home ol li:nth-child(3) a:visited {
		background: url(../img/bureau.svg) no-repeat center center;
		background-size: 3em;
	}
	
	#home ol li:nth-child(3) a:hover {
		background-size: 3.5em;
	}

	#home ol li:nth-child(4) a:link,
	#home ol li:nth-child(4) a:visited {
		background: url(../img/twitter.svg) no-repeat center center;
		background-size: 2em;
	}
	
	#home ol li:nth-child(4) a:hover {
		background-size: 2.5em;
	}

	#home ol li:nth-child(5) a:link,
	#home ol li:nth-child(5) a:visited {
		background: url(../img/dribbble.svg) no-repeat center center;
		background-size: 2em;
	}
	
	#home ol li:nth-child(5) a:hover {
		background-size: 2.5em;
	}

	#home ol li:nth-child(6) a:link,
	#home ol li:nth-child(6) a:visited {
		background: url(../img/webtypo.svg) no-repeat center center;
		background-size: 2em;
	}
	
	#home ol li:nth-child(6) a:hover {
		background-size: 2.5em;
	}
	
	#home header h1{
		margin: 1em auto 2em;
		font-size: 1em;
		letter-spacing: 0.10em;
	}
	
	#home section {
		width: 80%;
		margin: 0 auto;
		padding: 0 0 3em 0;
	}
	
	#home section {
		padding: 1em 0 3em 0;
	}
	
	/*#home section #lang {
		font-size: 0.875em;
		margin: 2em 0;
	}*/
	
	#home section a#contact:link,
	#home section a#contact:visited {
		margin: 3em 0 4em;
	}
	
	#home p {
		/*margin: 2em 0;*/
	}
	
	#home section a#contact:link,
	#home section a#contact:visited {
		width: 3.25em;
		height: 3.25em;
	}
	
	/*#home nav {
		margin: 5em 0 3em;
	}
	
	#home li {
		font-size: 1.5em;
		margin-top: 1em;
	}
	
	#home li a {
		padding: 0.5em 1em;
	}*/
	
	#home footer {
		font-size: 0.875em;
		margin-top: 6em;
		padding: 2em 0;
	}
	
	/* - - - - Services - - - - */
	
	#services #touchHead {
		margin-bottom: 5em;
	}
	
	#servicesContent p.first {
		font-size: 1.5em;
		margin-bottom: 1.75em;
	}
	
	#servicesContent h2 {
		color: #3fa6d8;
		font-size: 1.75em;
		margin: 2em auto 0;
		width: 80%;
	}
	
	#servicesContent h3 {
		color: #000;
		font-size: 1.25em;
		margin: 2em auto 1em;
		width: 80%;
	}
	
	
	#services img {
		width: 80%;
		margin: 0 auto;
	}
	
	
	
	#servicesContent p {
		width: 80%;
		margin: 0 auto 1.4em;
		color: #555;
	}
	
	#servicesContent ul {
		overflow: hidden;
		width: 80%;
		margin: 5em auto;
	}
	
	#servicesContent ul li {
		font-size: 1.5em;
		margin: 0.25em 0;
	}
	
	#servicesContent hr {
		width: 80%;
		margin: 4em auto 0;
	}
	
	#servicesContent cite {
		font-size: 1.125em;
		font-style: italic;
		text-align: left;
		display: block;
		width: 70%;
		margin: 3em 0 3em 10%;
		color: #999;
	}
	
	#servicesContent em {
		color: #000;
	}
	
	#servicesContent ul {
		width: 100%;
		margin: 3em auto 0;
	}
	
	#servicesContent ul li {
		font-size: 1.25em;
		margin: 0.3em 0;
	}
	
	#services footer {
		margin-top: 10em;
	}
	
	/* - - - - Projets - - - - */
	
	#projects header {
		display: none;
	}
	
	#projects #touchHead {
		padding-top: 1em;
		margin-bottom: 7em;
	}
	
	#touchHead h1 {
		padding-left: 5%;
		font-size: 1.5em;
	}
	
	#touchHead a {
		margin-top: 0.4em;
		background: transparent url(../img/icn_nav.svg) no-repeat left top;
		background-size: contain;
		text-indent: -9999em;
		margin-right: 5%;
	}
	
	#largeHead {
		display: none;
	}
	
	#projects > ul a:link,
	#projects > ul a:visited {
		margin: 0 auto 4em;
		width: 80%;
	}
	/*
	#projects > ul li:first-of-type img {
		margin: 10% auto;
    }
	*/
	#projects ul h2 {
		font-size: 1.25em;
		font-weight: normal;
		letter-spacing: 0;
		text-transform: none;
		/*margin-top: 1em;*/
	}
	
	#services footer,
	#projects footer, 
	#project footer,
	#carnet footer,
	#outils footer,
	#ailleurs footer,
	#quick footer {
		padding: 2em 0 4em;
		background-size: cover;
	}
	
	#services footer ul,
	#projects footer ul,
	#project footer ul,
	#outils footer ul,
	#carnet footer ul,
	#ailleurs footer ul,
	#quick footer ul {
		margin-bottom: 4em;
		text-transform: uppercase;
		letter-spacing: 0.15em;
	}
	
	#services footer ul li,
	#projects footer ul li,
	#project footer ul li,
	#outils footer ul li,
	#carnet footer ul li,
	#ailleurs footer ul li,
	#quick footer ul li {
		margin-bottom: 1.25em;
		font-size: 1em;
	}
	
	#services footer ul li.selected,
	#projects footer ul li.selected,
	#carnet footer ul li.selected,
	#outils footer ul li.selected,
	#ailleurs footer ul li.selected {
		width: 30%;
		margin: 0 auto 1.25em;
		padding: 0 1em;
		font-size: 1em;
		text-shadow: 0 1px 1px rgba(0,0,0,0.4);
	}

	#services footer ul a:link,
	#services footer ul a:visited,
	#projects footer ul a:link,
	#projects footer ul a:visited,
	#project footer ul a:link,
	#project footer ul a:visited,
	#outils footer ul a:link,
	#outils footer ul a:visited,
	#carnet footer ul a:link,
	#carnet footer ul a:visited,
	#ailleurs footer ul a:link,
	#ailleurs footer ul a:visited,
	#quick footer ul a:link,
	#quick footer ul a:visited {
		margin: 0 auto;
		padding: 0.5em 1em;
		width: 30%;
	}
	
	#services footer > a:link,
	#services footer > a:visited,
	#projects footer > a:link,
	#projects footer > a:visited,
	#project footer > a:link,
	#project footer > a:visited,
	#outils footer > a:link,
	#outils footer > a:visited,
	#carnet footer > a:link,
	#carnet footer > a:visited,
	#ailleurs footer > a:link,
	#ailleurs footer > a:visited,
	#quick footer > a:link,
	#quick footer > a:visited {
		display: block;
		margin: 0 auto 1.25em;
		width: 4em;
		height: 4em;
		background: url(../img/email_blanc.svg) no-repeat center center;
		text-indent: -9999em;
	}
	
	#services footer > a:hover,
	#projects footer > a:hover,
	#project footer > a:hover,
	#outils footer > a:hover,
	#carnet footer > a:hover,
	#ailleurs footer > a:hover,
	#quick footer > a:hover {
		background-size: 100%;
	}
	
	#projects footer {
		margin-top: 12em;
	}
	
	/* - - - - Projet - - - - */
	
	#project {
		/*position: relative;*/
	}
	
	#project #touchHead {
		margin: 1em 0;
	}
	
	#project #touchHead a:first-of-type {	
		float: left;
		margin-top: 0.2em;
		margin-left: 4%;
		background: url(../img/back.svg) no-repeat left top;
		background-size: contain;
		width: 2.2em;
	}
	
	#project #touchHead a:last-of-type {	
		
	}
	
	#servicesContent img,
	#projectContent img,
	#outilsContent img,
	#carnetContent img {
		width: 100%;
		background-color: transparent;
	}
	
	#projectContent img:first-of-type {
		/*margin-top: 3em;*/
	}
	
	#projectContent figure {
		text-align: center;
		margin-bottom: 4em;
	}
	
	#projectContent figure video,
	#projectContent figure img {
   		width: 90%;
	}
	
	#projectContent h1 {
		font-size: 1.5em;	
		margin: 0.5em 0 0 5%;
		color: #000;
	}
	
	#projectContent h2 {
		font-size: 1em;
		margin: 0 0 0 5%;
		color: #999;
	}
	
	#projectContent h3 {
		font-size: 1.5em;
		margin: 3em 0 0 5%;
		color: #3fa6d8;
	}
	
	#projectContent p {
		margin: 1em 5% 2em 5%;
		font-size: 1.125em;
	}
	
	#projectContent nav {
		margin: 8em 0 6em;
		font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
		font-size: 1em;
	}
	
	#next, #previous {
		width: 45%;
		height: 4em;
		line-height: 4em;
	}
	
	#project footer {
		/*padding-top: 4em;*/
		text-align: center;
	}
	
	/* - - - - Outils - - - - */
	
	#outils #touchHead {
		margin-bottom: 7em;
	}
	
	#outils img {
		width: 80%;
		margin: 0 auto;
	}
	
	#outils p {
		width: 80%;
		margin: 0 auto 4em;
	}
	
	#outils footer {
		margin-top: 10em;
	}
	
	/* - - - - Carnet - - - - */
	
	#carnet #touchHead {
		margin-bottom: 10em;
	}
	
	#carnet img {
		margin-bottom: 5em;
	}
	
	#carnet footer {
		margin-top: 6em;
	}
	
	/* - - - - Ailleurs - - - - */

	#ailleurs #touchHead {
		margin-bottom: 10em;
	}
	
	#links {
		width: 90%;
		margin: 0 auto;
	}
	
	#links h1, #links h2 {
		font-size: 1.5em;
		font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
		font-weight: normal;
		color: #999;
	}
	
	#links h2 {
		font-size: 1.25em;
		margin-bottom: 1.5em;
		text-align: center;
	}
	
	#links h2:first-of-type {
		margin-top: 4em;
	}
	
	#links p {
		margin-bottom: 3em;
	}
	
	#ailleurs footer {
		margin-top: 7em;
	}
	
	/* - - - - Quick - - - - */
	
	#quick #touchHead {
		margin-bottom: 6em;
	}
	
	#quickContent p {
		width: 80%;
		margin: 0 auto 2em;
	}
	
	#quickContent img {
		width: 100%;
		margin-bottom: 6em;
	}
	
	#quickContent img.pleine {
		width: 80%;
		margin: 0 auto 6em;
	}
	
	#quick footer {
		margin-top: 4em;
	}
	
	/* - - - - Menu Touch - - - - */
	
	#touchNav h1 {
		padding-top: 2.5em;
		padding-bottom: 0.25em;
		font-size: 1.25em;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	}
	
	#touchNav h2,
	#projects #touchNav h2 {
		font-size: 1em;
		color: rgba(255,255,255,0.85);
		margin-top: 0;
		
	}
	
	#touchNav h1 a:link, #touchNav h1 a:visited {
		color: #333;
	}
	
	#touchNav ul {
		width: 90%;
		margin: 3em auto 2em;
	}
	
	#touchNav ul li {
		width: 100%;
		font-size: 1em;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		margin-bottom: 0.5em;
	}
	
	#touchNav div {
		position: relative;
	}
	
	#touchNav ol {
		position: absolute;
		top: 1em;
		right: 1em;
		overflow: hidden;
	}
	
	#touchNav ol li {
		font-size: 0.75em;
		line-height: 3em;
		letter-spacing: 0.1em;
		float: left;
		width: 2em;
		height: 3em;
		margin: 0 0.5em 0 0;
		color: rgba(255,255,255,0.5)
		/* background: yellow; */
	}
	
	#touchNav ol li a {
		color: #0044e3;
	}
	#touchNav ol li a:hover {
		color: #00206e;
	}
}  
 
  
@media only screen and (min-width: 38em) {
	html, body {
		/*background-color: pink;*/
	}
	
	/* - - - - Accueil - - - - */
	
	#home header {
		padding-top: 4em;
	}
	
	#home ol {
		width: 75%;
		margin: 0 auto;
	}
	
	#home ol li {
		line-height: 8em;
		/*background-color: rgba(255,255,255,0.5);*/
	}
	
	#home ol li:nth-child(1) a:link,
	#home ol li:nth-child(1) a:visited {
		background-size: 4em;
	}
	
	#home ol li:nth-child(1) a:hover {
		background-size: 4.5em;
	}

	#home ol li:nth-child(2) a:link,
	#home ol li:nth-child(2) a:visited {
		background-size: 4em;
	}
	
	#home ol li:nth-child(2) a:hover {
		background-size: 4.5em;
	}

	#home ol li:nth-child(3) a:link,
	#home ol li:nth-child(3) a:visited {
		background-size: 5em;
	}
	
	#home ol li:nth-child(3) a:hover {
		background-size: 5.5em;
	}

	#home ol li:nth-child(4) a:link,
	#home ol li:nth-child(4) a:visited {
		background-size: 3em;
	}
	
	#home ol li:nth-child(4) a:hover {
		background-size: 3.5em;
	}

	#home ol li:nth-child(5) a:link,
	#home ol li:nth-child(5) a:visited {
		background-size: 3em;
	}
	
	#home ol li:nth-child(5) a:hover {
		background-size: 3.5em;
	}

	#home ol li:nth-child(6) a:link,
	#home ol li:nth-child(6) a:visited {
		background-size: 3em;
	}
	
	#home ol li:nth-child(6) a:hover {
		background-size: 3.5em;
	}
	
	#home header h1 {
		margin: 1.5em auto 3em;
		font-size: 1.35em;
		letter-spacing: 0.10em;
	}
	
	#home section {
		font-size: 1.25em;
		width: 70%;
		padding: 2em 0 3em;
	}
	
	/*#home section #lang {
		font-size: 0.75em;
		margin: 2em 0;
	}*/
	
	
	/* - - - - Services - - - - */
	
	#servicesContent p {
		font-size: 1.25em;
		margin: 1em 0 2em 0;
		width: 100%;
	}
	
	#servicesContent p.first {
		font-size: 1.75em;
	}
	
	#servicesContent hr {
		display: block;
		/*width: 45em;*/
		margin: 6em auto 0;
		border-top: 1.5em solid #feeede;
	}
	
	#servicesContent h2 {
		color: #3fa6d8;
		font-size: 2.5em;
		margin: 2em auto 0;
		width: 100%;
	}
	
	#servicesContent h3 {
		font-size: 1.75em;
		/*width: 22.5em;*/
		margin: 2em auto 0;
		width: 100%;
	}
	
	#servicesContent ol li:nth-child(1),
	#servicesContent ol li:nth-child(2),
	#servicesContent ol li:nth-child(3) {
		list-style-type: none;
	}
	
	#servicesContent cite {
		font-size: 1.5em;
		font-style: italic;
		text-align: left;
		display: block;
		width: 90%;
		margin: 3em 0 3em 10%;
		color: #999;
	}
	
	#servicesContent ul {
		width: 100%;
		margin: 6em auto 0;
	}
	
	#servicesContent ul li {
		font-size: 1.5em;
		margin: 0.25em 0;
	}
	
	#services footer {
		/*margin-top: 16em;*/
	}
	
	/* - - - - Projets - - - - */
	
	#touchHead {
		margin-bottom: 4em;
		padding-top: 2em;
	}
	
	#touchHead h1 {
		padding-left: 5%;
		font-size: 1.5em;
	}
	
	#touchHead a {
		margin-right: 5%;
	}
	
	#projects #touchHead {
		margin-bottom: 10em;
		padding-top: 2em;
	}
	
	#projects > ul a:link, #projects > ul a:visited {
		margin: 0 auto 6em;
		width: 60%;
	}
	/*
	#projects > ul li:first-of-type img {
    	margin: 10% auto 5%;
    }
	*/
	#projects h2 {
		font-size: 1.5em;
		margin-top: 0;
	}
	
	#services footer,
	#projects footer,
	#project footer,
	#outils footer,
	#carnet footer,
	#ailleurs footer,
	#quick footer {
		padding: 3em 0 2em;
	}
	
	#services footer ul,
	#projects footer ul,
	#project footer ul,
	#outils footer ul,
	#carnet footer ul,
	#ailleurs footer ul,
	#quick footer ul {
		width: 84%;
		margin: 0 auto 1em;
		clear: both;
		overflow: hidden;
	}
	
	#services footer ul li,
	#projects footer ul li,
	#project footer ul li,
	#outils footer ul li,
	#carnet footer ul li,
	#ailleurs footer ul li,
	#quick footer ul li {
		float: left;
		width: 20%;
		/*background-color: red;*/
	}
	
	#services footer ul li.selected,
	#projects footer ul li.selected,
	#project footer ul li.selected,
	#outils footer ul li.selected,
	#carnet footer ul li.selected,
	#ailleurs footer ul li.selected {
		width: 20%;
		padding: 0.5em 0;
	}

	#services footer ul a:link,
	#services footer ul a:visited,
	#projects footer ul a:link,
	#projects footer ul a:visited,
	#project footer ul a:link,
	#project footer ul a:visited,
	#outils footer ul a:link,
	#outils footer ul a:visited,
	#carnet footer ul a:link,
	#carnet footer ul a:visited,
	#ailleurs footer ul a:link,
	#ailleurs footer ul a:visited,
	#quick footer ul a:link,
	#quick footer ul a:visited {
		display: block;
		padding: 0.5em 0;
		width: 80%;
	}
	
	#projects footer {
		margin-top: 14em;
	}
	
	/* - - - - Projet - - - - */
	
	
	#project {
		position: static;
	}
	
	#project #touchHead {
		position: static;
		background-color: transparent;
		padding-bottom: 1em;
	}
	
	#project #touchHead a:first-of-type {	
		float: left;
		margin-left: 5%;
		margin-top: 1.8em;
		width: 2.5em;
	}
	
	#project #touchHead a:last-of-type {
		margin-top: 1.8em;
		width: 2em;
	}
	
	#servicesContent,
	#projectContent,
	#outilsContent,
	#carnetContent,
	#quickContent {
		width: 80%;
		margin: 0 auto;
	}
	
	#projectContent figure {
		margin-bottom: 4em;
	}
	
	#projectContent figcaption {
		padding-top: 1em;
	}
	
	#projectContent figure video {
   		width: 100%;
	}
	
	#projectContent h1 {
		margin: 0;
		font-size: 2em;
	}
	
	#projectContent h2 {
		margin: 0;
		font-size: 1.25em;
	}
	
	#projectContent h3 {
		margin: 0;
	}
	
	#projectContent p {
		font-size: 1.25em;
		margin: 1em 0 4em 0;
	}
	
	#project footer {
		/*padding-top: 4em;
		text-align: center;*/
	}
	
	#projectContent nav {
		padding: 6em 0 0;
	}
	
	#next:link, #next:visited, #previous:link, #previous:visited {
		width: 40%;
		margin-bottom: 0;
		padding-right: 5%;
		font-size: 1.5em;
		text-align: right;
		border: none;
		
		border-bottom: none;
	}
	
	#previous:link, #previous:visited {
		padding-right: 0;
		padding-left: 5%;
		text-align: left;
	}
	
	/* - - - - Carnet - - - - */
	
	
	#carnet #touchHead {
		margin-bottom: 20em;
	}
	
	#carnetContent {
		width: 100%;
	}
	
	#carnetContent img {
		margin-bottom: 10em;
	}
	
	/* - - - - Menu Touch - - - - */
	
	#touchNav {
		background-position: center bottom;
	}
	
	#touchNav ul {
		width: 90%;
		margin: 6em auto 0;
	}
	
	#touchNav ul li {
		width: 20%;
		float: left;
		font-size: 1em;
	}
	
	/* - - - - Outils - - - - */
	
	/* - - - - Ailleurs - - - - */

	#ailleurs #touchHead {
		margin-bottom: 18em;
	}
	
	#links h1, #links h2 {
		font-size: 2.5em;
		color: #bbb;
	}
	
	#links h1 a:link, #links h1 a:visited {
		color: #3d80c9;
	}
	
	#links hgroup {
		margin-top: 6em;
		overflow: hidden;
	}
	
	#links h2 {
		font-size: 1.125em;
		margin: 0 1em 1.5em;
		text-align: center;
		float: left;
	}
	
	#links h2:first-of-type {
		margin-top: 0;
		margin-left: -1em;
	}
	
	#links h2 a:link, #links h2 a:visited {
		color: #639ceb;
		padding: 0.5em 1em;
	}
	
	#links p {
		margin-bottom: 4em;
	}
	
	#ailleurs footer {
		margin-top: 7em;
	}
	
	/* - - - - Quick - - - - */
	
	#quick #touchHead {
		margin-bottom: 10em;
	}
	
	#quickContent p {
		width: 100%;
		font-size: 1.25em;
		margin: 0 auto 4em;
	}
	
	#quickContent img {
		width: 100%;
		margin-bottom: 6em;
	}
	
	#quick footer {
		margin-top: 8em;
	}
	
	/* - - - - Menu Touch - - - - */
	
	#touchNav ul {
		width: 90%;
		margin: 3em auto 0;
		overflow: hidden;
	}
	
	#touchNav ul li {
		width: 20%;
		float: left;
		font-size: 0.875em;
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}
	
	#touchNav div {
		/* position: relative; */
	}
	
	#touchNav ol {
		right: 2em;
	}
	
	
}   


@media only screen and (min-width: 70em) {
	html, body {
		/* background-color: yellow; */
	}
	
	/* - - - - Accueil - - - - */
	
	#home {
		width: 100%;
		height: 100%;
	}
	
	#home header {
		width: 50%;
		height: 100%;
		padding: 0;
		position: fixed;
	}
	
	#home ol {
		width: 70%;
		margin: 13em auto 0;
	}
	
	#home ol li:nth-child(1) a:link,
	#home ol li:nth-child(1) a:visited {
		background-size: 4em;
	}
	
	#home ol li:nth-child(1) a:hover {
		background-size: 4.5em;
	}

	#home ol li:nth-child(2) a:link,
	#home ol li:nth-child(2) a:visited {
		background-size: 4em;
	}
	
	#home ol li:nth-child(2) a:hover {
		background-size: 4.5em;
	}

	#home ol li:nth-child(3) a:link,
	#home ol li:nth-child(3) a:visited {
		background-size: 4.5em;
	}
	
	#home ol li:nth-child(3) a:hover {
		background-size: 5.2em;
	}

	#home ol li:nth-child(4) a:link,
	#home ol li:nth-child(4) a:visited {
		background-size: 3em;
	}
	
	#home ol li:nth-child(4) a:hover {
		background-size: 3.5em;
	}

	#home ol li:nth-child(5) a:link,
	#home ol li:nth-child(5) a:visited {
		background-size: 3em;
	}
	
	#home ol li:nth-child(5) a:hover {
		background-size: 3.5em;
	}

	#home ol li:nth-child(6) a:link,
	#home ol li:nth-child(6) a:visited {
		background-size: 3em;
	}
	
	#home ol li:nth-child(6) a:hover {
		background-size: 3.5em;
	}
	
	#home header h1 {
		margin: 3em auto;
		font-size: 1.35em;
		letter-spacing: 0.10em;
	}
	
	#home section {
		width: 50%;
		float: right;
		padding: 5em 0 0; /*Ca c'est quand le sélecteur de langue est en place*/
		padding: 9em 0 0; /*Ca c'est sans le sélecteur*/
		font-size: 1.375em;
	}
	
	#home section p {
		width: 70%;
		margin: 0 auto 1.3636em;
}
	
	/*#home section #lang {
		font-size: 0.75em;
		margin: 0 auto 6em;
	}*/
	
	#home section a#contact:link,
	#home section a#contact:visited {
		width: 2.5em;
		height: 2.5em;
		margin-top: 5em;
		margin-left: 15%;
	}
	
	/* - - - - Services - - - - */
	
	#servicesContent {
		max-width: 56.25em;
	}
	
	#servicesContent p {
		font-size: 1.5em;
		width: 30em;
		margin: 0 auto 1.25em;
		color: #555;
	}
	
	#servicesContent em {
		color: #000;
	}
	
	#servicesContent p.first {
		font-size: 2em;
		width: 22.5em;
		margin-bottom: 3em;
	}
	
	#servicesContent hr {
		display: block;
		width: 45em;
		margin: 5.5em auto 0;
		border-top: 1.5em solid #feeede;
	}
	
	#servicesContent h2 {
		color: #3fa6d8;
		font-size: 2.5em;
		width: 18em;
		margin: 2em auto 0;
	}
	
	#servicesContent h3 {
		font-size: 2em;
		width: 22.5em;
		margin: 2em auto 1em;
	}
	
	#servicesContent ol li:nth-child(1),
	#servicesContent ol li:nth-child(2),
	#servicesContent ol li:nth-child(3) {
		list-style-type: none;
		position: relative;
	}
	
	#servicesContent ol li:nth-child(1) h3:before,
	#servicesContent ol li:nth-child(2) h3:before,
	#servicesContent ol li:nth-child(3) h3:before {
		content: "1";
		font-size: 0.5em;
		line-height: 1.85em;
		text-align: center;
		position: absolute;
		top: 0.55em;
		left: 2em;
		color: #fff;
		background-color: #fe7722;
		width: 2em;
		height: 2em;
		border-radius: 1em;
		/*box-shadow: 0 0 0 0.75em #e3effe;*/
}
	
	#servicesContent ol li:nth-child(2) h3:before {
		content: "2";
	}
	
	#servicesContent ol li:nth-child(3) h3:before {
		content: "3";
	}
	
	#servicesContent cite {
		font-size: 1.5em;
		font-style: italic;
		text-align: left;
		display: block;
		width: 26em;
		margin: 3em auto;
		color: #999;
	}
	
	#servicesContent ul {
		overflow: hidden;
		width: 45em;
		margin: 5em auto;
	}
	
	#servicesContent ul li {
		font-size: 1.5em;
		margin: 0.25em 0;
	}
	
	#servicesContent ul li:nth-child(1),
	#servicesContent ul li:nth-child(4),
	#servicesContent ul li:nth-child(7),
	#servicesContent ul li:nth-child(10) {
		margin-left: 0;
	}
	
	#servicesContent ul li:nth-child(3),
	#servicesContent ul li:nth-child(6),
	#servicesContent ul li:nth-child(9),
	#servicesContent ul li:nth-child(12) {
		margin-right: 0;
	}
	
	#services footer {
		margin-top: 16em;
	}
	
	/* - - - - Projets - - - - */
	
	#services header,
	#projects header,
	#project header,
	#outils header,
	#carnet header,
	#ailleurs header,
	#quick header {
		font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
		text-transform: uppercase;
		display: block;
		padding: 3em 0 2.5em;
		background: #abbcd1 url(../img/ciel.jpg) no-repeat center bottom;
		background-size: cover;
		border-bottom: 1px solid #9dacbf;
		box-shadow: 0 1px 0 #fff;
	}
	
	#services header h1,
	#projects header h1,
	#project header h1,
	#outils header h1,
	#carnet header h1,
	#ailleurs header h1,
	#quick header h1 {
		font-weight: normal;
		font-size: 1.125em;
		letter-spacing: 0.15em;
	}
	
	#services header h1 a:link,
	#services header h1 a:visited,
	#projects header h1 a:link,
	#projects header h1 a:visited,
	#project header h1 a:link,
	#project header h1 a:visited,
	#outils header h1 a:link,
	#outils header h1 a:visited,
	#carnet header h1 a:link,
	#carnet header h1 a:visited,
	#ailleurs header h1 a:link,
	#ailleurs header h1 a:visited,
	#quick header h1 a:link,
	#quick header h1 a:visited {
		color: #34476f;
		text-shadow: 0 1px 0 rgba(255,255,255,0.6);
	}
	
	#services header h2,
	#projects header h2,
	#project header h2,
	#outils header h2,
	#carnet header h2,
	#ailleurs header h2,
	#quick header h2 {
		font-weight: normal;
		text-transform: none;
		color: #fff;
		font-size: 1em;
		text-shadow: 0 0 1px rgba(52,71,111,0.75);
		margin-top: 0;
	}
	
	#touchHead {
		display: none;
	}
	
	#touchNav {
		display: none !important;
	}
	
	#largeHead {
		display: block;
		font-family: "ff-netto-web-1","ff-netto-web-2", "helvetica neue", helvetica, arial, sans-serif;
		margin: 3em auto 0;
		position: relative;
	}
	
	#largeHead ul {
		width: 44em;
		margin: 3em auto 8em;
		overflow: hidden;
	}
	
	#largeHead ul li {
		float: left;
		margin: 0 4%;
		width: auto;
		height: 3em;
		text-transform: uppercase;
		letter-spacing: 0.15em;
		line-height: 3em;
		color: #fe521d;
	}
	
	#largeHead ul li a:link, #largeHead ul li a:visited {
		color: #777;
		background-color: rgba(255,255,255,0);
	}
	
	#largeHead ul li a:hover {
		color: #000;
	}
	
	#largeHead ol {
		width: 10em;
		position: absolute;
		top: -3em;
		right: 0;
		overflow: hidden;
	}
	
	#largeHead ol li {
		font-size: 0.75em;
		float: left;
		margin: 0 0.25em 0 0;
		width: 2em;
		height: 3em;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		line-height: 3em;
		color: #aaa;
		list-style-type: none;
	}
	
	/*#projects #largeNav ul li a:link, #projects #largeNav ul li a:visited {
		margin: 0;
	}*/
	
	#projects > ul {
		width: 90%;
		margin: 0 auto;
		padding: 0 2%;
		overflow: hidden;
	}
	
	#projects > ul li {
		width: 30%;
		min-height: 22em;
		margin: 0 1%;
		float: left;
	}
	
	#projects > ul li:nth-child(1), #projects > ul li:nth-child(3), #projects > ul li:nth-child(4), #projects > ul li:nth-child(6), #projects > ul li:nth-child(7), #projects > ul li:nth-child(9), #projects > ul li:nth-child(10), #projects > ul li:nth-child(12) {
		margin: 0 2%;
	}
	
	#projects h2 {
		font-size: 1.125em;
		margin-top: 1em;
	}
	
	#projects > ul a:link, #projects > ul a:visited {
		margin: 0 auto 8em;
		width: 80%;
	}
	
	#projects > ul li:first-of-type a:link,
	#projects > ul li:first-of-type a:visited {
		margin: 0 auto 6em;
	}
	/*
	#projects > ul li:first-of-type img {
    	margin: 0 auto 10%;
}
	*/
	
	#services footer ul,
	#projects footer ul,
	#project footer ul,
	#outils footer ul,
	#carnet footer ul,
	#ailleurs footer ul,
	#quick footer ul
	
	 {
		width: 40em;
		margin: 0 auto 2em;
	}
	
	/* - - - - Projet - - - - */
	
	#project header {
		text-align: center;
	}
	
	/*#largeHead {
		margin-bottom: 2em;
	}*/
	
	#largeHead #back {
		display: block;
		width: 3em;
		height: 3em;
		margin: 0 0 0 3%;
		
		text-indent: -9999em;
		background: url(../img/back.svg) no-repeat left top;
		background-size: contain;
	}
	
	#projectContent {
		width: 56.25em;
		/*margin: 0 auto;*/
	}
	
	#projectContent img.watch {
		width: 48%;
		/* margin-left: 25%; */
		margin-bottom: 0;
	}
	
	#projectContent img.watch.last {
		margin-bottom: 4em;
	}
	
	#projectContent figure video {
   		width: 100%;
   		margin-bottom: 4em;
	}
	
	#projectContent h1 {
		width: 18em;
		font-size: 2.5em;
		margin: 1em auto 0;
	}
	
	#projectContent h2 {
		width: 36em;
		margin: 0 auto;
	}
	
	#projectContent h3 {
		width: 22.5em;
		font-size: 2em;
		margin: 1em auto 0;
	}
	
	#projectContent p {
		width: 30em;
		font-size: 1.5em;
		margin: 2em auto 4em;
		color: #555;
	}
	
	#projectContent nav {
		width: 80%;
		margin: 0 auto 4em;
		padding: 4em 0;
	}
	
	#next:link, #next:visited {
		width: 40%;
		padding-right: 0;
		height: 3em;
		line-height: 3em;
		text-align: center;
	}
	
	#previous:link, #previous:visited {
		width: 40%;
		padding-left: 0;
		height: 3em;
		line-height: 3em;
		text-align: center;
	}
	
	/* - - - - Outils - - - - */
	
	#outilsContent {
		max-width: 56.25em;
	}
	
	#outilsContent figure {
		margin-bottom: 10em;
	}
	
	#services footer {
		margin-top: 16em;
	}
	
	
	/* - - - - Carnet - - - - */
	
	#carnetContent {
		max-width: 56.25em;
		
	}
	
	#carnetContent img {
		margin: 0 auto 10em;
		border-radius: 1em;
		box-shadow: 0 0 0 0.35em rgba(0,0,0,0.07),
					0 10px 20px rgba(0,0,0,0.2);
	}
	
	/* - - - - Ailleurs - - - - */
	
	#links {
		width: 60%;
		max-width: 50em;
	}
	
	#ailleurs footer {
		margin-top: 14em;
	}
	
	/* - - - - Quick tour - - - - */
	
	#quick #largeHead {
		margin-bottom: 4em;
	}
	
	#quick #largeHead ul {
		display: none;
	}
	
	#quick img {
		margin: 4em auto;
		max-width: 56.25em;
	}
	
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}


@-webkit-keyframes pulse {
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}