/* -----------------------------------------------
== Global
----------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
	font-family: 'Roboto Slab', Roboto Slab, sans-serif;
	font-weight: 400;
	font-size: 1.3em; 
	color:#fff;
	position:relative;
	margin:0;
	padding:0;
	background:#171516;
}

a{
	color:inherit;
	text-decoration:none;
}

#primary-nav > li > a{
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
}

/*-----------------------------------------------
== TITRES
-----------------------------------------------*/
h1,h2,
h3,h4,
h5,h6{
	font-family:'Roboto Slab', sans-serif;
	font-weight:700;
	text-transform:uppercase;
	margin:0;
	font-size:1.6em;
	padding:5px 0 15px 0;
}
h1 span,h2 span,
h3 span,h4 span,
h5 span,h6 span{
	font-family:'Montserrat', sans-serif;
	font-weight:400;
	font-size:1.5em;
}
h1{
	font-size:2em;
}
h2{
	font-size:1.8em;
}
h5{
	font-size:0.9em;
	color:#806f63;
}

/* Transition */

a{
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
}
.content, #scrollme{
	transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
}
.resolution, #avantages h4::after, #contact .content div > p:first-child::after,
#design .content > div#creation-charte{
	transition: all 0.8s ease-out;
	-webkit-transition: all 0.8s ease-out;
	-moz-transition: all 0.8s ease-out;
	-o-transition: all 0.8s ease-out;
}

/*-----------------------------------------------
== Layout
-----------------------------------------------*/
#pagebuttons{
	position:fixed;
	z-index:300;
	bottom:5px;
	left:5%;
	right:5%;
	width:90%;
	text-align:center;
}
#pagebuttons > *{
	display:inline-block;
}
#pagebuttons #scrollme{
	width:60px;
	height:60px;
	border-radius:50%;
	background:#ff5119 url(/uploads/panelsnap/imgs/scrollme.gif) center center no-repeat;
}
#pagebuttons #scrollme.switch{
	background:#ff5119 url(/uploads/panelsnap/imgs/backtop.gif) center center no-repeat;
	cursor:pointer;
}
body > *{
	position:relative;
}
.pan{
	overflow:hidden;
	position:relative;
	padding-bottom:60px;
}
.content{
	padding:10px;
	z-index:6;
	width:100%;
	float:none;
	position:relative;
	text-align:center;
	opacity:0;
	margin-top:-100%;
}
.active .content{
	opacity:1;
	margin-top:20px;
}
@media handheld {
	.content, .active .content{
		opacity:1;
		margin-top:20px;
	}
}
.content article{
	padding:1.5% 3%;
	margin:10px 0;
	width:auto;
	float:left;
	font-size:1.1em;
}
article p, article h3{
	width:100%;
	display:inline-block;
}

/*-----------------------------------------------
== HEADER
----------------------------------------------- */

#header{
	background: #ff4e27 url(/uploads/panelsnap/imgs/back4.jpg) no-repeat center top;
	background-attachment:fixed;
	width:100%;
	overflow:hidden;
}

#header h1{
	text-shadow:2px 2px 0 #ee2a14;
}

#header .ico{
	width:189px;
	height:189px;
	background:url(/uploads/panelsnap/imgs/50-pourcent-responsive.png) no-repeat center center;
	display:inline-block;
}
#header div:nth-of-type(2) .ico{
	width:331px;
	height:114px;
	background:#fff url(/uploads/panelsnap/imgs/flash-to-modern-web.png) no-repeat center center;
	border-radius:10px;
}

/* Logo */

#logo, #logo img{
	display:inline-block;
	float:none;
}
#logo img{
	max-width:180px;
}

/*-----------------------------------------------
== PAN 1
----------------------------------------------- */

#commentcamarche h2{
	text-shadow:2px 2px 0 #070707;
}

.pan#commentcamarche{
	background: #2c2929 url(/uploads/panelsnap/imgs/back5.jpg) no-repeat center top;
	background-attachment:fixed;
	background-position:0 0;
	margin:0;
}

/*-----------------------------------------------
== PAN 2
----------------------------------------------- */

#avantages h3{
	text-shadow:2px 2px 0 #f37a13;
}

.pan#avantages{
	background: #ff7918 url(/uploads/panelsnap/imgs/back6.jpg) no-repeat center top;
	background-attachment:fixed;
	margin:0;
}

/*-----------------------------------------------
== PAN 3
----------------------------------------------- */

#design h3{
	text-shadow:2px 2px 0 #e3420e;
}
.pan#design{
	background: #ff3e29 url(/uploads/panelsnap/imgs/back7.jpg) no-repeat center top;
	background-attachment:fixed;
	margin:0;
}

/*-----------------------------------------------
== PAN 3
----------------------------------------------- */

#contact h3{
	text-shadow:2px 2px 0 #070707;
}
.pan#contact{
	background: #2c2929 url(/uploads/panelsnap/imgs/back5.jpg) no-repeat center top;
	background-attachment:fixed;
	margin:0;
}

/*----Comment ça marche----*/

#resolutions{
	width:100%;
	float:left;
	text-align:center;
}
#resolutions .resolution{
	float:none;
	display:inline-block;
	margin:0 0;
	opacity:0;
}
#commentcamarche.active .resolution{
	margin:0 15px;
	opacity:1;
}
#resolutions h3{
	font-size:1.1em;
	color:#806f63;
}

/*----Avantages----*/

.avantage{
	float:left;
	width:30%;
	margin:1.5%;
	padding:0 10px;
	position:relative;
	font-size:1.1em;
}

#avantages .content > div:nth-of-type(2)::after{
	right:0;
	left:auto;
}
.avantage h4{
	padding:0 0 10px 0;
	position:relative;
}
.avantage .ico{
	width:77px;
	height:77px;
	display:inline-block;
	background-size:cover;
}
a.btn{
	font-size:0.7em;
	font-weight:700;
	display:inline-block;
	overflow: hidden;
	position:relative;
	padding:8px 12px;
	color:#ff7918;
	box-shadow:inset 0px 0px 0px 20px #fff;
}

a.btn:hover,
a.btn:focus{
	color:#fff;
	box-shadow:inset 0px 0px 0px 2px #fff;
}

#avantages h4::after{
	content:"";
	height:3px;
	background:#fff;
	position:absolute;
	width:10%;
	left:45%;
	right:45%;
	bottom:0;
	opacity:0;
}
#avantages.active h4::after{
	width:100%;
	left:0;
	right:0;
	height:2px;
	opacity:1;
}

.avantage:nth-of-type(1) .ico{
	background:url(/uploads/panelsnap/imgs/accessibilite.svg) no-repeat center center;
}
.avantage:nth-of-type(2) .ico{
	background:url(/uploads/panelsnap/imgs/performance.svg) no-repeat center center;
}
.avantage:nth-of-type(3) .ico{
	background:url(/uploads/panelsnap/imgs/visibilite.svg) no-repeat center center;
}

/*----Design----*/

#design .content > div{
	width:100%;
}
#design .content > div#creation-charte{
	width:1024px;
	height:804px;
	float:none;
	display:inline-block;
	background:url(/uploads/panelsnap/imgs/creation-charte-site.gif) center top no-repeat;
	background-size:cover;
	opacity:0;
}
@media handheld {
	#design .content > div#creation-charte{
		background:url(/uploads/panelsnap/imgs/creation-charte-site_handheld.gif) center top no-repeat;
		background-size:cover;
		height:305px;
	}
}
#design.active .content > div#creation-charte{
	opacity:1;
}

/*----Contact----*/

#contact .content article div{
	width:50%;
	font-weight:700;
	display:inline-block;
}
#contact .content div a{
	color:#ffaf24;
}
#contact .content div a#site{
	text-transform:uppercase;
	font-weight:300;
	font-size:1.2em;
	letter-spacing:0.5em;
	word-break:break-all;
}
#contact .content div > p:first-child{
	font-size:1.2em;
	padding:0 0 20px 0;
	position:relative;
}
#contact .content div > p:first-child::after{
	content:"";
	position:absolute;
	width:20%;
	height:2px;
	bottom:0;
	left:40%;
	right:40%;
	background:#ffaf24;
}
#contact.active .content div > p:first-child::after{
	width:100%;
	left:0;
	right:0;
}

/*    -----------------------------------------------
== Footer
----------------------------------------------- */

#contact .content div#footer{
    font-size: 0.7em;
	font-weight:300;
	text-align:center;
	color:#fff;
	width:100%;
	float:left;
}
#contact .content div#footer .adresse p{
	padding:3px 0;
	margin:0;
}
#contact .content div#footer .adresse a{
	text-decoration:none;
	color:inherit;
}

/*
  Simple Grid
  Learn More - http://dallasbass.com/simple-grid-a-lightweight-responsive-css-grid/
  Project Page - http://thisisdallas.github.com/Simple-Grid/
  Author - Dallas Bass
  Site - dallasbass.com
*/

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}

body {
	margin: 0px;
}

[class*='col-'] {
	float: left;
	padding-right: 20px; /* column-space */
}

.grid {
	width: 100%;
	max-width: 1140px;
	min-width: 755px;
	margin: 0 auto;
	overflow: hidden;
}

.grid:after {
	content: "";
	display: table;
	clear: both;
}

.main{
	margin:50px auto 0 auto;
}

.grid-pad {
	padding:0;
}

.push-right {
	float: right;
}

/* Content Columns */

.col-1-1 {
	width: 100%;
}
.col-2-3, .col-8-12 {
	width: 66.66%;
}

.col-1-2, .col-6-12 {
	width: 50%;
}

.col-1-3, .col-4-12 {
	width: 33.33%;
}

.col-1-4, .col-3-12 {
	width: 25%;
}

.col-1-5 {
	width: 20%;
}

.col-1-6, .col-2-12 {
	width: 16.667%;
}

.col-1-7 {
	width: 14.28%;
}

.col-1-8 {
	width: 12.5%;
}

.col-1-9 {
	width: 11.1%;
}

.col-1-10 {
	width: 10%;
}

.col-1-11 {
	width: 9.09%;
}

.col-1-12 {
	width: 8.33%
}

/* Layout Columns */

.col-11-12 {
	width: 91.66%
}

.col-10-12 {
	width: 83.333%;
}

.col-9-12 {
	width: 75%;
}

.col-5-12 {
	width: 41.66%;
}

.col-7-12 {
	width: 58.33%
}



/* Pushing blocks */

.push-2-3, .push-8-12 {
	margin-left: 66.66%;
}

.push-1-2, .push-6-12 {
	margin-left: 50%;
}

.push-1-3, .push-4-12 {
	margin-left: 33.33%;
}

.push-1-4, .push-3-12 {
	margin-left: 25%;
}

.push-1-5 {
	margin-left: 20%;
}

.push-1-6, .push-2-12 {
	margin-left: 16.667%;
}

.push-1-7 {
	margin-left: 14.28%;
}

.push-1-8 {
	margin-left: 12.5%;
}

.push-1-9 {
	margin-left: 11.1%;
}

.push-1-10 {
	margin-left: 10%;
}

.push-1-11 {
	margin-left: 9.09%;
}

.push-1-12 {
	margin-left: 8.33%
}


@media handheld, only screen and (max-width: 767px) {
	.grid {
		width: 100%;
		min-width: 0;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 10px; /* grid-space to left */
		padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
	}
	
	[class*='col-'] {
		width: auto;
		float: none;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 10px;
		margin-bottom: 10px;
		padding-left: 0px;
		padding-right: 10px; /* column-space */
	}
	
	
	/* Mobile Layout */
	
	[class*='mobile-col-'] {
		float: left;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 0px;
		margin-bottom: 10px;
		padding-left: 0px;
		padding-right: 10px; /* column-space */
		padding-bottom: 0px;
	}
	
	.mobile-col-1-1 {
		width: 100%;
	}
	.mobile-col-2-3, .mobile-col-8-12 {
		width: 66.66%;
	}

	.mobile-col-1-2, .mobile-col-6-12 {
		width: 50%;
	}

	.mobile-col-1-3, .mobile-col-4-12 {
		width: 33.33%;
	}

	.mobile-col-1-4, .mobile-col-3-12 {
		width: 25%;
	}

	.mobile-col-1-5 {
		width: 20%;
	}

	.mobile-col-1-6, .mobile-col-2-12 {
		width: 16.667%;
	}

	.mobile-col-1-7 {
		width: 14.28%;
	}

	.mobile-col-1-8 {
		width: 12.5%;
	}

	.mobile-col-1-9 {
		width: 11.1%;
	}

	.mobile-col-1-10 {
		width: 10%;
	}

	.mobile-col-1-11 {
		width: 9.09%;
	}

	.mobile-col-1-12 {
		width: 8.33%
	}

	/* Layout Columns */

	.mobile-col-11-12 {
		width: 91.66%
	}

	.mobile-col-10-12 {
		width: 83.333%;
	}

	.mobile-col-9-12 {
		width: 75%;
	}

	.mobile-col-5-12 {
		width: 41.66%;
	}

	.mobile-col-7-12 {
		width: 58.33%
	}
	
	.hide-on-mobile {
		display: none !important;
		width: 0;
		height: 0;
	}
}

/*---RESPONSIVE CONDITIONS---*/

@media screen and (max-width: 1069px) {
	#design .content > div#creation-charte{
		width:100%;
	}
	#contact .content article div{
		width:86%;
	}
}
@media screen and (max-width: 1000px) {
	h1,h2,
	h3,h4,
	h5,h6{
		font-size:1.3em;
	}
	h1 span,h2 span,
	h3 span,h4 span,
	h5 span,h6 span{
		font-size:1.2em;
	}
	h1{
		font-size:1.7em;
	}
	h2{
		font-size:1.5em;
	}
	h5{
		font-size:0.6em;
	}
	.avantage{
		width:90%;
		margin:1.5% 5%;
		padding:0 10px;
	}
}
/* Stylesheet: panelsnap Modified On 2015-07-01 10:03:35 */