/* Simon k - Alsacréations.com - février 2012 */

@font-face {
 font-family: fresh;
 src: url("fonts/CaviarDreams.eot") /* EOT file for IE */
}
@font-face {
 font-family: fresh;
 src: url("fonts/CaviarDreams.ttf") /* TTF file for CSS3 browsers */
}

@font-face {
 font-family: fresh;
 src: url("fonts/CaviarDreams.woff") /* TTF file for CSS3 browsers */
}

/* Généralités */
body {
	margin: 0;
	padding: 0;
	color:#999;
	 font-family: fresh;
}

		  
figure {
margin: 8px 5px 50px 5px ;
display:inline-block;
width:24%;
vertical-align:top;
}


figure h1 {
font-size:1.3em;
}
 
div.stretchy-wrapper {
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;

}
 
div.stretchy-wrapper > div {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    
    font-size: 24px;
    text-align: center;
}





.clear {
clear:both;
}

.center {
text-align:center;
}

img {
max-width:100%;
height:auto;

}

a img {
border:0;
}

h1 {
text-transform: uppercase;
	font-size: 2.2em;
	font-weight:bold;
	color: #123666;
	margin:0;
}

h2 {
	font-size: 1.7em;
	font-weight:bold;
	color: #123666;
	margin:0;
}

h3 {
	font-size: 1.4em;
	font-weight:bold;
	padding-top:15px;
	color: #123666;
	margin:0;
}



p {
color:#666;
	font-size: 1.3em;
	text-align:justify;
}

.col4 {
	display:inline-block;
width:24%;	
}	

a {
color:#333;	
	
}

li {
color:#123666;
font-size:1.3em;
}

.button {
border:1px solid #666;
font-size:1.2em;
padding:10px;
text-decoration:none;
}

.button2 {
 font-family: fresh;
border:1px solid #666;
font-size:1.2em;
padding:10px;
text-decoration:none;
background:#fff;
cursor:pointer;
}

#bout {
width:60px;
height:60px;
border:3px solid #5679a5;
margin:0 auto;
transition: all 0.3s;
border-radius:10px;
font-size:45px;
text-align:center;
color:#a58d73;

}

#bout:hover  {
background:#fff;
border-radius:0px;
transform: rotate(180deg);
}

.fiche {
float:left;
width:35%;
}

.bga {
float:left;
margin-left:15px;
width:60%;
}


.logo {
width:400px;
padding-bottom:1em;
}

/* Mise en place des différentes parties / slides */
#slide1, #slide2 {
	min-height: 700px;
	padding-top:10px;

}

#slide2 {

}

#slide3 {

	padding-top:10px;
border-top:1px solid #999;
}


#slide1 {

	
}

#slide1.accueil {
background:url(images/batterie.jpg) center -71px no-repeat fixed ;	
}

#slide1.demarrage {
background:url(images/batterie-demarrage.jpg) center -71px no-repeat fixed;	
}

#slide1.cyclage {
background:url(images/batterie-cyclage.jpg) center -71px no-repeat fixed;	
}


#slide1.alimentations {
background:url(images/alimentations.jpg) center -71px no-repeat fixed;	
}

#slide1.contact {
background:url(images/contact.jpg) center -71px no-repeat fixed;	
}



#slide1.actus {
background:url(images/actus.jpg) center -71px no-repeat fixed;	
}






#slide2 {
	
	background: #fff;
}

#slide3 {
	background: #144b73;
}


/* Gestion du contenu */
.slide_inside {
	/* width: 1140px; */
	
}



#slog {
display:block;
position:relative;
top:-210px;
bottom:0;
padding-left:10%;
font-size:35px;
font-size:2.5em;
font-family:fresh;
color:#666;
z-index:0;
width:50%;
background: url(images/fond.png) repeat;
}


#slide1  .slide_inside {
	
}

#slide2 .slide_inside p {
	width: 500px;
	text-align:justify;
}

#slide3 .slide_inside {
margin:0 auto;

	

}

h2[id^="p_"] {
padding-top: 120px;
position: relative;
top: -120px;
margin-bottom: -120px;
}


.conteneur {
margin:0 auto;
/* width:90%; */
border:0px solid #fff;
	text-align:center;
}


.conteneur2 {
margin:0 auto 0 auto;
 width:90%;
border:0px solid #fff;
	
}

.line {

border-bottom:1px solid #ccc;

}


.vis {
text-decoration:none;
color:#666;
}

.gauche {
float:left;
width:40%;
padding:0 2% 0 0%;
border-right:1px solid #fff;
}

.recti {
margin-top:-30px;
padding:0 2% 0 2%;
}

.reccontact {
margin-top:-30px;
}


.droite {
float:left;
width:49%;
padding:0 2% 2% 2%;

}



.gauche2 {
float:left;
width:40%;
padding:2% 2% 2% 2%;
vertical-align:top;
border-right:1px solid #fff;
}


.droite2 {
float:right;
width:50%;
vertical-align:top;
padding:2% 2% 2% 2%;

}

.gauche3 {
float:left;
width:50%;
padding:2% 2% 2% 2%;

}





.droite3 {
float:left;
width:40%;
padding:2% 2% 2% 2%;
border-left:1px solid #fff;
}

#menuhaut a {
color:#ae9e6c;
text-decoration:none;
}

#top-header {
width:100%;
z-index:99;
color:#fff;
height:130px;
font-size:18px;
font-family:fresh;
padding-top:5px;
padding-bottom:5px;
position:fixed;
transition: all 0.7s;
background:#144b73;
}




.hide {
background:#fff;
}

.show {
margin-top:0px;
}

#header2 {
width:100%;
background:#fff;
color:#fff;
height:110px;
font-size:18px;
font-family:fresh;
padding-top:0px;
position:fixed;
transition: all 0.7s;
margin-top:-250px;
z-index:100;
border-bottom:1px solid #ccc;
}


#header3 {
width:100%;
background:#fff;
color:#fff;
height:110px;
font-size:18px;
font-family:fresh;
padding-top:0px;
position:fixed;
transition: all 0.7s;
margin-top:-10px;
z-index:100;
border-bottom:1px solid #ccc;
}


#navmin {
display:none;


}

.navmin {
width:50%;
font-size:1.3em;
color:#144b73;
font-family:fresh;
background:#f7e92a;
}

.navmin option {
padding-top:0.6em;
}


#navmin2 {

padding-top:10px;

}

.navmin2 {

font-size:1.3em;
color:#333;
font-family:fresh;
}

.navmin2 option {
padding-top:0.6em;
}



nav {
float: left;

width: 100%;
background:url(images/fond.png) repeat;
z-index: 100;
text-align: center;

}


#menu2 nav {
width:80%;
padding-top:30px;
}

#menu2 nav a {
font-size:18px;
text-decoration:none;
transition: color 0.7s;
color:#666;

/* padding:0px 30px 0px 10px; */

}


#menu2 nav a:hover {

color:#222;
}


#menu2 nav ul {
/* padding-top:70px; */
}

#menu2 nav ul li  ul li a{
text-align:left;
		font-size:15px;
		border-bottom: 1px solid #ccc;
}



nav ul {
margin:0px 0px 0px 0px;
padding:0;
list-style-type:none;

}

nav li {
display:inline-block;
padding:5px 0px 0px 0px;

}

nav a {
font-size:18px;

text-decoration:none;
transition: color 0.7s;
color:#4d7bb7;
color:#fff;
padding:0px 40px 0px 10px;

}

nav ul li  ul li{
text-align:left;
		font-size:15px;
}

nav a.first {
background:none;
}

nav a:hover {
color:#ccc;
}

nav .bande a{
font-size:14px;
}

.sub-menu {
z-index:100;
}


.col3 {
width:33%;
float:left;
min-height:40px;
padding:10px 0px 5px 0px;
color:#666;
text-align:center;
}

.bord {

border-right:1px solid #666;
border-left:1px solid #666;
}

.col3 p {
text-align:center;
color: #f7e92a;
font-weight:700;
}

.col3 a {
font-weight:700;
color: #f7e92a;
}




.col3 h2 {

font-size:22px;
margin:0;
padding:0;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
color:#fff;
}

.mcol3{
margin-left:0%;


}


.video-container {
    position: relative;
    padding-bottom: 20.25%;
    padding-top: 30px;
    height: 400px;
    overflow: hidden;
	z-index:0;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px;
}


#formu {
    width: 90%;
  
    padding-bottom: 15px;
    margin: 0px auto;
	border:0px solid #000;
}




.champ {
    margin-top: 10px;
    padding-left: 5%;
}



.champ2 {
display:none;
}

.champ input {
    width: 70%;
    background: none repeat scroll 0% 0% #fff;
    color:#123e5f;
    border: 1px solid #123e5f;
    
	
}


.button {
cursor:pointer;
    
}

.champ select {
    width: 70%;
    background: none repeat scroll 0% 0% #fff;
    color:#123e5f;
    border: 1px solid #123e5f;
    	
}

.champ label {
    width: 20%;
    display: inline-block;
    text-align: right;
    padding-right: 15px;

}


.champ textarea {
    width: 70%;
    background: none repeat scroll 0% 0% #fff;
    color: #123e5f;
    border: 1px solid #123e5f;
   
    min-height: 100px;
}



.case {
display:inline-block;
width:24%;
margin-bottom:50px;
}

.case h1 {
text-transform: uppercase;
font-size:1.0em;
display:block;
padding:5px;
width:85%;
margin: 0 5% 0 0%;


}

.case h2 {
font-size:16px;
display:block;
padding:5px;
width:85%;
margin: 0 5% 0 0%;

color:#000;
text-shadow: none;
}

.case span {
font-size:14px;
color:#ae9e6c;
}

.case strong {
color:#DF005E;
}

.case p  {
width:90%;
margin: 0 5% 0 0%;
text-align:justify;
color:#666;
}

.caseimg{
width:90%;
margin: 0 5% 5px 0%;
	box-shadow:0 0 4px rgba(0, 0, 0, .6);
}



#menu2 nav  a.active {
color:#222;
}

li a.active {
	color:#f7e92a;
}



@media (max-width: 1280px)  {


}

@media (max-width: 1200px)  {

.conteneur {

width:97%; 

}

}


@media (max-width: 1024px)  {


	figure {

width:49%;

}

.case {

width:33%;
display:inline-block;
margin-bottom:50px;
}

.case h1 {

font-size:1.0em;
}

p {
font-size:1em;
}

#slog {

font-size:2.0em;

}

.line {

border:0;

}


.gauche {
width:90%;
border:0;
}

.droite {
width:90%;
border:0;
}

.gauche2 {
border:0;
}

.droite2 {
border:0;
}


.gauche3 {
border:0;
}

.droite3 {
border:0;
}


.recti {
margin-top:-60px;
}

.conteneur {

width:90%; 

}

}

@media (max-width: 1000px)  {

.fiche {
width:100%;
padding-bottom:15px;
}



.bga {
float:left;
margin-left:0px;
width:100%;
}

.case {
float:left;
width:100%;
margin-bottom:30px;
}

.case h1 {

font-size:17px;
}

nav {
display:none;
}

#navmin {
display:block;
}


#slog {
width:80%;
font-size:1.7em;

}

.gauche2 {
width:95%;
}

.droite2{
width:95%;
}



.gauche3 {
width:90%;
}

.droite3{
width:90%;
}

.col3 {
width:100%;
border-bottom:1px solid #666;

}

.mcol3{
border-left:0px solid #666;
}

.reccontact {
margin-top:0px;
}


.bord {

border-right:0px solid #666;
border-left:0px solid #666;
}



}

@media (max-width: 800px)  {
	

	figure {

width:99%;

}

	.col4 {
	
width:49%;	
}


}

@media (max-width: 600px)  {



	.col4 {
	
width:99%;	
}



#slide1.accueil {
background:url(images/batterie2.jpg) center -71px no-repeat fixed ;	
}

#slide1.demarrage {
background:url(images/batterie-demarrage2.jpg) center -71px no-repeat fixed;	
}

#slide1.cyclage {
background:url(images/batterie-cyclage2.jpg) center -71px no-repeat fixed;	
}




#slide1.contact {
background:url(images/contact2.jpg) center -71px no-repeat fixed;	
}



#slide1.actus {
background:url(images/actus2.jpg) center -71px no-repeat fixed;	
}


.logo {
width:200px;
}

#formu {
    width: 90%;
  
    padding-bottom: 15px;
    margin: 0px auto;
	border:0px solid #000;
}

.champ label {
    width: 100%;
text-align:left;

}

.champ input {
    width: 100%;
   
	
}

.champ textarea {
    width: 100%;
   
	
}

.champ select {
    width: 100%;

    	
}



#slog {
width:90%;
font-size:1.4em;

}

.navmin {
width:60%;
font-size:1.1em;
}

h1 {

	font-size: 1.5em;

}


h2 {

	font-size: 1.1em;

}

}




[role='main'] {
	margin: 5% auto;
}
[role='navigation'] {
	margin: 0 auto;
	width: 100%;
/*	background-color: #fff;		*/
}
.flexNav-touch [role='navigation'],
.flexNav-no-touch [role='navigation'] {	
	display: none;
}
.menu-button {
	display: block;
	padding: 1em;
	background: #000;
	color: #fff;

	background-repeat: no-repeat;
	background-position: 93% 18px;
	cursor: pointer;
}
[role='navigation']:after { /* clearfix */
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

[role='navigation'] li {
	position: relative;
	list-style: none;
	display: block;	

	width: 100%;		
}

[role='navigation'] li.item-with-ul {	
	/* background-color: #fff;	 */
			
}

[role='navigation'] li a {
	
	display: block;
	color: #fff;
	border-bottom: 1px solid #111;		
	font-weight:700;
}


[role='navigation'] li a:hover {
	
	display: block;
	color:#f7e92a;
		
	font-weight:700;
}

[role='navigation'] li a.link-with-ul {
	/* border-right: 1px solid #222;		 */
}

[role='navigation'] .top-level a {
	position: relative;
	display: block;
	/* background-color: #fff; */
	padding: 0.9em 0.2em 0.9em 0.2em ;
	z-index: 2;
}
[role='navigation'] li ul {
	width: 100%;			
}
[role='navigation'] li ul li {
	float: none;
	width: 100%;			
}

[role='navigation'] li ul li a {
	display: block;
	background-color: #fff;
			color:#999;
			font-size:15px;
			border-bottom: 1px solid #ccc;
}


[role='navigation'] li ul li a:hover {
color:#222;
}

[role='navigation'] li ul {
	position: relative;
	border-top: 0px solid #333;
	border-bottom: 1px solid #333;	 				
}

[role='navigation'] .item-with-ul {

	background-repeat: no-repeat;
	background-position: 93% 18px;	
}
.sub-menu {
	display: none;
	background:#fff;
-webkit-box-shadow: 9px 10px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 9px 10px 18px 0px rgba(0,0,0,0.75);
box-shadow: 9px 10px 18px 0px rgba(0,0,0,0.75);

}
.sub-menu.open {
	display: block;
}
.site-footer {
	margin: 1em 0;
	overflow: hidden;
}
.site-footer li {
	list-style: none;
	margin: 0;
	display: block;
	float: left;
}
.site-footer li a {
	padding: .5em .5em .5em 0;
}

@media all and (min-width: 800px) {
	
	

	
	
	p {font-size: 1.3em; margin-bottom: 1.5em; line-height: 1.25em;}	
	.flexNav-touch [role='navigation'],
	.flexNav-no-touch [role='navigation'] {
		display: block;	
	}
	.menu-button {
		display: none;
	}
	[role='navigation'] li {
		position: relative;
		list-style: none;
		float: left;
		display: block;	
		/* background-color: #fff;	 avoir   */
		width: 20%;		
	}
	.flexNav-no-touch .item-with-ul:hover > ul { 
		opacity: 1;
		top: 3.1em;	
		position: absolute;	
	}	
	[role='navigation'] li a {
		border-left: 0px solid #000;
		border-bottom: none;		
	}
	.flexNav-no-touch [role='navigation'] li ul {
		position: absolute; 
		top: auto;
		left: 0;
		opacity: 0;
		visibility: hidden;
		height: 1px;
		z-index: 1;			
	}
	[role='navigation'] li ul li a {
		/* border-bottom: none;	 */
	}	
	.flexNav-touch [role='navigation'] li ul.sub-menu {
		position: absolute; 
		top: auto;
		left: 0;
		display: none;
		z-index: 1;					
	}	

	.flexNav-no-touch .item-with-ul:hover > ul	 { 
		visibility: visible;
		opacity: 1;
		height: auto;
		display: block;	
		border-right: 0px solid #000;
		border-bottom: 0px solid #000;		
	}			
}