#container {
margin-left:auto;	
margin-right:auto;
margin-left: auto;
margin-right: auto;
width: 80%;
margin-top: 4%;

}
#foreground{
position: relative;
top: 5%;
z-index: 1000;
padding: 20px;
background-color: rgba(255,255,255,0.7);
font-family: verdana;
font-size: 11px;
line-height: 1.5em;

}

#menu_icons div { display: inline-block; cursor: pointer; margin: 10px 0 0 0; }
.icon_2 { display: none; }
.icons:hover .icon_1 { display: none; }
.icons:hover .icon_2 { display: block; }

#biographie #menu_icon_1 .icon_1 { display: none; }
#biographie #menu_icon_1 .icon_2 { display: block; }

.name{
font-size: 20px;
color: #0000CC;
}

a:link{
text-decoration : none;
color:#0000CC;
}
 a:visited{
text-decoration : none;
color:#0000CC;
}

a:hover {
opacity:0.5;
}
 a:active{
opacity:0.5;
}

h1{
    font-size: 30px;
}

h2{
    font-size: 14px;
	font-family: arial, helvetica, sans-serif;
}

ol,ul {
	list-style:none;
}
body,div ,ul,ol,li{ 
	margin:0;
	padding:0;
	
}
html,body {
	margin:0;
	padding:0;
}
caption,th {
	text-align:left;
}
h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}

h1 {
	font-size: 16px;
	font-weight:normal;
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}
abbr,acronym { border:0;
}

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
    background: ; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: -5;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s; 
	
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: -5;
    color: #fff;
    -webkit-animation: titleAnimation 30s linear infinite 0s;
    -moz-animation: titleAnimation 30s linear infinite 0s;
    -o-animation: titleAnimation 30s linear infinite 0s;
    -ms-animation: titleAnimation 30s linear infinite 0s;
    animation: titleAnimation 30s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: arial, helvetica, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/grille.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/grille2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/grille3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/grille4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}



/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

.Style3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; }
.Style5 {font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
.Style6 {font-family: Verdana, Arial, Helvetica, sans-serif}
.Style8 {font-size: 9px;
font-family:Verdana, Arial, Helvetica, sans-serif;}

/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: -5;
}

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
	h1 { font-size: 6px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
	h1 { font-size: 6px }
}