/***********************************************/
/*** Core html setup stuff  - Accueil Gerard **/
/**********************************************/
html {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
	}

body {
	background-color:#606063;
	color:#000;
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
	text-align: center;	
}

a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
}

a:hover {
	text-decoration: underline;
	font-weight: normal;
}


.fond {
	background-color:#3a3a3b;
	border:3px solid #ffffff;
	width:100%;
	height:100%;
	position: relative;
	z-index: 1;
	top:1%;
	margin: auto;	
	}
.info {
	width: 400px ;
	position: relative;
	z-index: 1;
	;
	left: 65%;
	top: -50%;
}
.info-plus {
	width: 400px;
	position: relative;
	z-index: 1;
}
.info-plus a:link, a:visited{
	position: relative;
	text-shadow: 0px 0px 10px #FFFFFF;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	text-align: center;
	color: #FBFBFB;
	text-transform: none;
}
.info-titre{
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-style: italic;
	font-size: medium;
	color: #F3EEEE;
}
.sigle {
	width:450px;
	height:80px;
	top: 110px;
	left:128px;
	position: absolute;
	background-image: url(http://gerard-navizet.fr/site/images/logo.jpg);
	background-repeat: no-repeat;
	}

.grismoyen{
	width:35%;
	height:45%;
	background-color: #606063;
	border: 2px solid #000;
	position: relative;
	z-index: 2;
	left: 128px;
	top:70px;
}

.bandeau {
    background-color:#FFF;
	width:100%;
	height:202px;
	position: relative;
	border: 0px solid #FFF;
	top: 0px;
	z-index: 1;
	left: 0px;  
    overflow: hidden; 
}

.imagefame {
	background-color:#FFF;
	width:600px;
	height:400px;
	position: relative;
	border: 2px solid #FFF;
	top: -50px;
	z-index: 5;
	left: -20px;
}

.copyright {
	bottom: 0px;
    margin-top: 10px;
	position: absolute;
	color: #FFF;
	right: 10px;
	font-family: Verdana, Geneva, sans-serif;
}
    
.button {
        background-color:#606063;
        color: white;
        padding: 20px 14px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
        border: 2px solid black ;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        position: absolute;
        top: 30%;
        left: 120%;
}
    
.enter {
	height: 50px;
	width: 50px;
	right: 13px;
	top: 79px;
	position: absolute;
	z-index: 6;
	overflow: visible;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 22px;
	color: #FFF;
}
.slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
    
}

.slides {
    width: 300px;
    height: 200px;
    position: relative;
    /* animation du slide show */
    animation-duration: 30s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-name: anim_slide;
    
}
    
   .diapo {
    width: 1024px;
    height: 200px;
    overflow: hidden;
    
}
    .diapos {
    width: 1024 px;
    height: 200px;
    position: relative;
    /* animation du slide show */
    animation-duration: 40s;
    animation-timing-function: ease-in-out;
    animation-iteration-count:infinite;
    animation-direction:normal;
    animation-fill-mode: forwards;
    animation-name: anim_diapo;
    
}

.slide_1, .slide_2, .slide_3, .slide_4, .slide_5, .slide_6, .slide_7, .slide_8, .slide_9, .slide_10,.slide_11
{
  position:absolute;
  width:600px;
  height:400px;
}
    
.slide_21, .slide_22, .slide_23, .slide_24, .slide_25, .slide_26, .slide_27, .slide_28, .slide_29, .slide_30,.slide_31
{
  position:absolute;
  width:1024px;
  height:200px;
}
    
.slide_1{left: 0;}
.slide_2{left: 600px;}
.slide_3{left: 1200px;}
.slide_4{left: 1800px;}
.slide_5{left: 2400px;}
.slide_6{left: 3000px;}
.slide_7{left: 3600px;}
.slide_8{left: 4200px;}
.slide_9{left: 4800px;}
.slide_10{left: 5400px;}
.slide_11{left: 6000px;}
    
.slide_21{left: 0;}
.slide_22{left: -1024px;}
.slide_23{left: -2048px;}
.slide_24{left: -3072px;}
.slide_25{left: -4096px;}
.slide_26{left: -5120px;}
.slide_27{left: -6144px;}
.slide_28{left: -7168px;}
.slide_29{left: -8192px;}
.slide_30{left: -9216px;}
.slide_31{left: -10240px;}

@keyframes anim_slide {
    0% {left:0px;}
    9% {left:-600px;}
    18% {left:-1200px;}
    27% {left:-1800px;}
    36% {left:-2400px;}
    45% {left: -3000px;}
    54% {left: -3600px;}
    63% {left: -4200px;}
    72% {left: -4800px;}
    81% {left: -5400px;}
    100% {left: -6000px;}
}
    
@keyframes anim_diapo {
    0% {left:0px;}
    9% {left:1024px;}
    18% {left:2048;}
    27% {left:3072px;}
    36% {left:2400px;}
    45% {left:4096px;}
    54% {left:5120px;}
    63% {left:6144px;}
    72% {left:7168px;}
    81% {left:8192px;}
    100% {left:9216px;}
}

    /* --------- slider best-off ---------------*/
.slider_container {
  max-width: 300px;
  height: 200px;
  margin: 10px auto;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background: url(http://gerard-navizet.fr/images/image-21.jpg)no-repeat center;
      background-size: cover;
    animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;

} 
.slide2 {
  background: url(http://gerard-navizet.fr/images/image-22.jpg)no-repeat center;
      background-size: cover;
    animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
    background: url(http://gerard-navizet.fr/images/image_02.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  50% { opacity: 0}
  50% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  50% { opacity: 1}
  50% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  50% { opacity: 0}
  50% { opacity: 1}
  100% { opacity: 0}
}
/* ------- fin slider Best-oss ---------*/