body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
	color: white;
	background-color: #1a1a1a;
}

#wrapper {
	width: 100%;
	min-width: 900px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	background-color: #3a3a3a;
	text-align: center;
}
#top {
    overflow: hidden;
}
#hero img {
	width: 900px;
	height: 296px;
}

#mainnav ul {
 margin:0;
 padding:0px;
 list-style-type:none;
 text-align:center;
 text-transform: uppercase;
 }
#mainnav li {
 float:left;
 margin:auto;
 padding:0;
 background-color: #2a2a2a;
 }
#mainnav li a {
 display:block;
 width:180px;
 text-align: center;
 background-color: #2a2a2a;
 color: #FFFFFF;
 padding-top: 6px;
 padding-bottom: 6px;
 }
 

 #mainnav li a:hover  {
	background-color: #217CD6;
	text-decoration: none;
 }

#mainnav ul li ul {
 display:none;
 }


#mainnav ul li:hover ul {
 display:block;
 }
 

#mainnav li:hover ul li {
 float:none;
 }

#mainnav li ul {
 position:absolute;
 z-index: 2;
 }
 

#hero article {
	width: 36%;
	padding-left: 10px;
	padding-right: 10px;
	position: absolute;
	bottom: 20px;
	left: 20px;
	background-color: #217CD6;
	border-radius: 10px;
	color: #FFFFFF;
	text-align: justify;
}

#tile3 article {
	width: 300px;
	padding-left: 10px;
	padding-right: 10px;
	position: absolute;
	top: -183px;
	left: 0px;
	background-color: #217CD6;
	border-radius: 10px;
	color: #FFFFFF;
	text-align: justify;
	z-index:2;
}

#hero h2 {
	color: #FFFFFF;
	text-transform: uppercase;
	margin-bottom: -8px;
}

#hero {
	position: relative;
	
}

.transparent {
   opacity: 0.6; /*  CSS3  */
   filter(opacity=60);  /*  Pour IE  */
}

.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
-moz-opacity: .3;
opacity: .3;
}
a:link {
	color: white;
	text-decoration: none;
	}
#tile7 a:hover, #tile7 a:active, #tile7 a:focus, #tile7 a.thispage {
background-color: white;
color: black;
text-decoration: none;
}

#tile2 img {
	max-width: 100%;
}
#tile2 article {
	width: 25%;
	padding-left: 10px;
	padding-right: 10px;
	position: absolute;
    top: 0px;
	left: 0px;
	background-color: #3a3a3a;
	color: white;
}

.grid{
	width: 860px;
	height: 680px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
	position: relative;
	border-radius: 10px;
	background-color: #3a3a3a;
}
.tile {
	background-color: #2a2a2a;
	position:absolute;
	width: 200px;
}


#tile1{
	top: 20px;
	left: 20px;
	width: 200px;
	height: 200px;
}

#tile2{
	top: 240px;
	left: 20px;
	width: 200px;
	height: 200px;

}

#tile3{
	top: 20px;
	left: 20px;
	width: 420px;
	height: 420px;
	background-color: #3a3a3a;
	text-align:justify;
}
#tile4{
	top: 20px;
	left: 460px;
	width: 420px;
	height: 420px;
	margin-top: 28px;
	background-color: #3a3a3a;
	text-align:justify;
}
#tile6{
	top: 460px;
	left: 20px;
	width: 420px;
	height: 200px;
}
#tile7{
	top: 460px;
	left: 460px;
	width: 200px;
	height: 200px;
}
#tile8{
	top: 460px;
	left: 680px;
	width: 200px;
	height: 200px;
}

.hero{
	font-size: 2.5em;
	font-weight: 300;
	font-style: normal;
	margin-top: 110px;
	margin-left: 40px;
	margin-right: 40px;
	color: gray;
}

.hero-bright{
	color:white;
}

.tile34{
	font-size: 1.2em;
	font-weight: 300;
	font-style: normal;
	/*margin-top: 110px;
	margin-left: 40px;
	margin-right: 40px;*/
	color: gray;
}

.tile34-bright{
	color:white;
}

.action-title{
	font-size:1.5em;
	margin-top:28px;
	margin-left:20px;
	margin-right:20px;
}

.action{
	font-size: 1.25em;
	font-weight: 400;
	color: lightgray;
	margin-left: 20px;
	margin-right: 20px;
}

#article8{overflow:hidden; /*background-color: #2a2a2a;*/}
#article8 img{width:900px !important;height:388 !important; padding-left:25px; padding-top:0px;}
#article8 ul{display: table;width:900px;margin-left:0px; padding:0; 
	-webkit-animation: animNom 30s ease 0s infinite;
       -moz-animation: animNom 30s ease 0s infinite;
        -ms-animation: animNom 30s ease 0s infinite;
         -o-animation: animNom 30s ease 0s infinite;
            animation: animNom 30s ease 0s infinite;
}
#article8 ul li{display: table-cell;width:900px;height:0px;list-style:none;}

@-webkit-keyframes animNom {
from,29%,to {margin-left:-950px; margin-top:0px;}
33%,62%{margin-left:-1875px; margin-top:0px;}
66%,95%{margin-left:-2800px; margin-top:0px;}
99.99%{margin-left:-3725px; margin-top:0px;}
}

@-moz-keyframes animNom {
from,29%,to {margin-left:-950px; margin-top:0px;}
33%,62%{margin-left:-1875px; margin-top:0px;}
66%,95%{margin-left:-2800px; margin-top:0px;}
99.99%{margin-left:-3725px; margin-top:0px;}
}

@-ms-keyframes animNom {
from,29%,to {margin-left:-950px; margin-top:0px;}
33%,62%{margin-left:-1875px; margin-top:0px;}
66%,95%{margin-left:-2800px; margin-top:0px;}
99.99%{margin-left:-3725px; margin-top:0px;}
}

@-o-keyframes animNom {
from,29%,to {margin-left:-950px; margin-top:0px;}
33%,62%{margin-left:-1875px; margin-top:0px;}
66%,95%{margin-left:-2800px; margin-top:0px;}
99.99%{margin-left:-3725px; margin-top:0px;}
}

@keyframes animNom {
from,29%,to {margin-left:-950px; margin-top:0px;}
33%,62%{margin-left:-1875px; margin-top:0px;}
66%,95%{margin-left:-2800px; margin-top:0px;}
99.99%{margin-left:-3725px; margin-top:0px;}
}