body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}

html,body{
background:#ffffff no-repeat fixed center top;
position:relative;
height:100%;
margin:0px;
padding:0px;
font-size:99%
width:100% ;
} 
        
  
#page
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
  background-color: #ffffff;
	text-align: justify;
	position: relative;
	width: 100%;
	height:auto;
    z-index: 1;
	} 

#anim
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: justify;
	position: relative;
	max-width: 1920px;
	min-width: 320px;
	z-index: 2;
	margin: auto;
	} 
  
  	
#tophead
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: #e2e2e2;
    background-repeat:repeat-x;
	visibility: visible;
	position: relative;
	width: 100%;
	height: 65px;
	z-index: 14;
  
	}
  

    
#haut
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-repeat:no-repeat;
	visibility: visible;
	position: relative;
	width: 960px;
	height: 65px;
	z-index: 3;
	display:inline-block;
	}

#bandeau
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-image: url(images/bandeau.jpg);	
    visibility: visible;
	position: relative;
	width: 960px;
	height: 144px;
	z-index: 14;
  
	}
	
/* ******************** NAV BAR ******************** */
.topnav {
  background-color: #333;
  display: flex;
  align-items: center;
  width: 100%;
}

#topnavclassique {
  width: 100%;
}

.topnav_link {
  color: white;
  padding: 12px;
  text-decoration: none;
}
.topnav_link:hover {
  color: #0078b4;
}

/* hide responsive menu */
#topnav_hamburger_icon,
#topnav_responsive_menu,
#topnav {
  display: none;
}

@media only screen and (max-width: 960px) {
  /* hide classic menu */
  #topnav_menu,
#menu,
#header,
#topnavclassique,
#tophead  {
    display: none;
  }

  /* position home link at left and hamburger at right */
  #home_link {
    flex-grow: 1;
  }

  /* disable horizontal scrolling  */
  #root {
    position: relative;
    overflow-x: hidden;
	overflow-y: hidden;
  }

  /* show responsive menu and position at the right of the screen */
  #topnav_responsive_menu {
    display: block;
    position: absolute;
    margin: 0;
    right: 0;
    top: 0;
    width: 100vw;
    height: 100%;
	overflow-y: scroll;
	background: #ededed;
	
	z-index: 99;
	transform-origin: 0% 0%;
    transform: translate(200%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }

  #topnav_responsive_menu ul {
    display: flex;
    flex-direction: column;

    position: absolute;
    margin: 0;
    right: 0;
    top: 0;

    min-width: 100vw;
    height: 100vh;
    padding: 20px 0 0;

    text-align: center;

    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
  }

  #topnav_responsive_menu li {
    padding: 0px;
  }

  #topnav_responsive_menu a {
    white-space: nowrap;
    color: #333;
    text-decoration: none;
  }

  /* And let's slide it in from the right */
  #topnav_responsive_menu.open {
    transform: none;
    position: fixed;
  }

  /* ******************** HAMBURGER ICON ******************** */
  /* define size and position of the hamburger link */
  #topnav_hamburger_icon {
    display: block;
    position: relative;
    margin: 16px;
    width: 33px;
    height: 28px;

    z-index: 100;

    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
  }

  /* define the style (size, color, position, animation, ...) of the 3 spans */
  #topnav_hamburger_icon span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    margin-bottom: 5px;

    background: #ededed;
    border-radius: 3px;

    z-index: 100;

    opacity: 1;
    left: 0;

    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }

  /* set the 3 spans position to look like a hamburger */
  #topnav_hamburger_icon span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
  }
  #topnav_hamburger_icon span:nth-child(2) {
    top: 12px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  #topnav_hamburger_icon span:nth-child(3) {
    top: 24px;
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
  }

  /* change color when opening the menu */
  #topnav_hamburger_icon.open span {
    background: #333;
  }

  /* the first span rotates 45° \ */
  #topnav_hamburger_icon.open span:nth-child(1) {
    width: 110%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  /* the second span disappears */
  #topnav_hamburger_icon.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  /* the last span rotates -45° / */
  #topnav_hamburger_icon.open span:nth-child(3) {
    width: 110%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}


#bloc1
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: #FFFFFF;
	text-align: justify;
	position: relative;
	width: 100%;
  z-index: 5;
	} 
	
#contenu1
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: justify;
	position: relative;
	max-width: 960px;
	min-width: 320px;
	z-index: 6;
	margin: auto;
	}      

	
img.responsive{
   max-width:100%;
   height:auto;
}
.outer {
    align-items: stretch;
    display: flex;
    padding: 10px;
}
.inner1 {
    width: 60%;
    padding: 10px;
	
}
.inner2 {
    width: 40%;
    padding: 10px;
}

@media (max-width: 600px){
.outer {
    flex-direction: column; /* En colonne */
    }
.inner1 {
    min-width: 100%;
	order: -1;
    }
.inner2 {
    min-width: 100%;
    }
}

#contenucont
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: justify;
	position: relative;
	max-width: 960px;
	min-width: 320px;
	z-index: 6;
	margin: auto;
	} 

.outcont {
    align-items: stretch;
    display: flex;
    padding: 10px;
}
.incont1 {
    align-items: center;
    display: flex;
    width: 35%;
    padding: 10px;
	
}
.incont2 {
    align-items: center;
    display: flex;
    width: 65%;
	padding: 10px;
}

.incont3 {
    align-items: center;
    display: flex;
    width: 100%;
	padding: 10px;
}

@media (max-width: 960px){
.outcont {
    flex-direction: column; /* En colonne */
    }
.incont1 {
    min-width: 100%;
	order: -1;
    }
.incont2 {
    min-width: 100%;
    }
.incont3 {
    min-width: 100%;
    }
}

#contenument
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: justify;
	position: relative;
	max-width: 960px;
	min-width: 320px;
	z-index: 6;
	margin: auto;
	} 

.outment {
    align-items: stretch;
    display: flex;
    padding: 10px;
}
.inment1 {
    align-items: center;
    display: flex;
    width: 99%;
    padding: 10px;
	
}
.inment2 {
    align-items: center;
    display: flex;
    width: 1%;
    padding: 10px;
}

@media (max-width: 600px){
.outment {
    flex-direction: column; /* En colonne */
    }
.inment1 {
    min-width: 100%;
	order: -1;
    }
.inment2 {
    min-width: 100%;
    }
}
#bloc2
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: #2a2a2a;
	text-align: justify;
	position: relative;
	width: 100%;
  height:auto;
  z-index: 7;
	} 
	
#contenu2
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: justify;
	position: relative;
	max-width: 960px;
	min-width: 320px;
	z-index: 8;
	margin: auto;
	}


	
#titre
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-image: url(images/fond-h1.jpg);	
  background-repeat:no-repeat;
	visibility: visible;
	position: relative;
	width: 960px;
	height: 53px;
	z-index: 9;
	display:inline-block;
	}
        


#contparagraphe

	{

	font-size: 11px;
  font-family: Verdana, Geneva, Arial, sans-serif;
  background-color: #ffffff;
  background-repeat: no-repeat;
  text-align: justify;
  visibility: visible;
  position: relative;
  width: 514px;
  float:left;
  z-index: 11;
  display:inline-block;
  }

            
#footer
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-image: url(images/repfoot.jpg);	
  background-repeat:repeat-x;
	visibility: visible;
	text-align: justify;
	position: relative;
	width: 100%;
	height: 173px;
	z-index: 102;
  }  

#contfooter
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: justify;
	position: relative;
	max-width: 960px;
	min-width: 320px;
	z-index: 103;
	margin: auto;
	} 

.contfoot {
    align-items: stretch;
    display: flex;
    
}
.footer1 {
    align-items: center;
	text-align: left;
    width: 45%;
    padding: 20px;
	
}
.footer2 {
    align-items: center;
    width: 152px;
    padding: 0px;
}
.footer3 {
    align-items: center;
    text-align: right;
    width: 45%;
    padding: 20px;
}
@media (max-width: 800px){
#footer
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: #2a2a2a;
	background-size: cover;
    visibility: visible;
	text-align: justify;
	position: relative;
	width: 100%;
	height: auto;
	z-index: 92;
	}
.contfoot {
    flex-direction: column; /* En colonne */
    }
.footer1 {
    min-width: 100%;
	text-align: center;
	}
.footer2 {
    min-width: 100%;
    text-align: center;
	}
.footer3 {
    min-width: 100%;
    text-align: center;
	}
}

#basfooter
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: justify;
	position: relative;
	max-width: 960px;
	min-width: 320px;
	z-index: 104;
	margin: auto;
	} 

.basfoot {
    align-items: stretch;
    display: flex;
	background-color: #0e0e0e;
    
}
.basfooter1 {
    align-items: center;
	text-align: left;
    width: 50%;
    padding: 10px 10px 10px 20px;
	
}
.basfooter2 {
    align-items: center;
    text-align: right;
    width: 50%;
    padding: 10px 20px 10px 10px;
}
@media (max-width: 800px){

.basfoot {
    flex-direction: column; /* En colonne */
    }
.basfooter1 {
    min-width: 100%;
	text-align: center;
	}
.basfooter2 {
    min-width: 100%;
    text-align: center;
	}

}	 
  
.nav-links {
	position: absolute;
	top: 30px;
	left: 20px;
	width: 200px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-links li {
	line-height: 1.6em;	
	font-size: 1.2em;
}
#content {
	margin-left: 240px;
	margin-top: 30px;
	margin-right: 50px;
}
.twitthis {
	position: absolute;
	top: 250px;
	left: 20px;
}
pre {
	background: #e8e8e8;
	border-left: 10px solid #777;
	font-size: 0.85em;
	padding: 1em;
	color: black !important;
	overflow-x: auto;
}
.important {
	border: 1px solid #666;
	background: #ddd;
	padding: 0 1em;
	color: #C30;
}
.galleryview {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}
dt {
	font-weight: bold;
}
dd {
	margin-bottom: 0.5em;
}
.code_wrapper {
	border: 1px solid #888;
	background: #f0f0f0;
	padding: 10px;
}
code, .code {

}
.options {
	border: 1px solid #777;
	border-right: none;
	font-size: 0.8em;
	font-family: Verdana, Geneva, sans-serif;
}
.options th {
	text-align: left;
	background: #777;
	color: white;
	font-weight: bold;
}
.options th, .options td {
	padding: 4px 10px;
}
.options td {
	border-right: 1px solid #777;
}
#parts-img {
	border: 1px solid black;
}
img.nav {
	border: 1px solid black;
	margin-bottom: 5px;
}
.panel-overlay h2,
.panel-overlay p{
	margin: .3em 0;
}
.panel-overlay p {
	line-height: 1.2em;
}
  
h1{
font-family: 'Roboto', sans-serif;
font-size: 26px;
color: #000000;
line-height: 1.5;
}

h2{
font-size: 22px;
font-family: 'Roboto', sans-serif;
color: #000000;
line-height: 1.5;
}

h3{
font-family: 'Roboto', sans-serif;
font-size: 20px;
color: #000000;
line-height: 1.5;
}

p{
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #545454;
line-height: 1.5;
}