#sous-menu {
position:absolute;
z-index:10002;
left:0px;
right:0px;
text-align:center;
font-size:1.3em;
color:#FFF;
background-color: #000;
top:-500px;
}
.menu {
cursor:pointer;
}
.elem {
padding-bottom:10px;
padding-top:10px;
border-top:1px #444 solid;
cursor:pointer;
}
.top{
float:right;
background-image:url(../img/fleche.png);
width:32px;
height:32px;
margin:10px;
cursor:pointer;
}
.entete {
padding-left:20px;
color: #999;
font-size: 64px;
position: relative;
}
.msg {
height: 300px;
background-color: #20505E;
}
body{
font-family: 'Dosis', sans-serif;
margin:0;
padding:0;
position:relative;
font-weight: light;
text-align: center;
background-color: #EEEEEE;
font-size: 100%;
}

.designation{
font-size:45px;
font-wight:100;
}
.trait {
border-top: #999 3px dotted;
height: 2px;
margin: 50px;
}
.bandeau-menu{
background-color: #000;
left: 0px;
right: 0px;
height: 37px;
text-align:left;
padding-left:5px;
position:relative;
padding-top:2px;
}

.bandeau1 {
background-color: #648DC9;
}
.bandeau2 {
background-color: #F22C63;
}
.bandeau3 {
background-color: #FFBB00;
}
.bandeau4 {
background-color: #6DC663;
}
.bandeau5 {
background-color: #B463C6;
}
.bandeau6 {
background-color: #63C6C3;
}
.bandeau {
color: #FFF;
font-size: 1.6em;
padding: 10px;
}
.contact-bandeau {
padding: 10px;
}
.bulle-experience {
background-color: #97C4C2;
color: #FFF;
display: block;
padding: 10px;
display: block;
margin: 10px;
border-radius: 10px;
position:absolute;
font-size:1.2em;
}
.bulle-formation {
background-color: #E2535B;
color: #FFF;
display: block;
padding: 10px;
display: block;
margin: 10px;
border-radius: 10px;
position:absolute;
font-size:1.2em;
}
.titre {
border-radius: 10px;
background-color: #999;
color: #EEE;
font-size: 50px;
margin: 10px;
padding: 10px;
float: left;
z-index: 10001;
position:relative;
}
.situation-professionnelle {
border-radius: 10px;
background-color: #999;
color: #EEE;
font-size: 16px;
margin: 10px;
padding: 10px;
float: left;
}
.situation {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 10000;
}
.clearfloat {
clear: both;
}

.imgHomeSection {
    padding-top: 70px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 999;
background-color: #F1EEE5;
}
.motCloud {
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.motCol1 {
    color: #CCCCCC;
}
.motCol2 {
    color: #BBBBBB;
}
.motCol3 {
    color: #DEDEDE;
}
#home_section {
    background-color: #F1EEE5;
    background-repeat: no-repeat;
}
.section {
    height: 300px;
    overflow: hidden;
    padding-bottom: 60px;
    padding-left: 20px;
    padding-top: 50px;
    position: relative;
    width: auto;
    z-index: 0;
}
.clearboth {
clear: both;
}
#footer {
background-color: #AAA;
font-size:1em;
}
li {
list-style-type:none;
}
.puce-complement li:before{
content:'\2022';
color: #6DC663;
}
.puce-competence li:before{
content:'\2022';
color: #FFBB00;
}
.puce-contact li:before{
content:'\2022';
color: #792393;;
}
.contenu-bandeau {
margin:10px;
padding-top: 40px;
padding-bottom: 40px;
}
.item-contact{
color: #792393;
}
a:link, a:visited, a:hover, a:active {
text-decoration:none;
color: #000;
}
.chrono {
background: url(../img/fondchrono.gif) repeat-y -60px 0;
width: 500px;
height:470px;
position:relative;
margin: auto;
}
.bulle1 {
top:20px;
left:152px;
}
.bulle2 {
top:143px;
right:264px;
}
.bulle3 {
top:219px;
left:245px;
}
.bulle4 {
top:296px;
right:264px;
}
.bulle5 {
top:373px;
left:245px;
}
.dates{
position:absolute;
font-size:14px;
color: #999;
}
.date1 {
top:104px;
right:274px;
}
.date2 {
top:179px;
left:245px;
}
.date3 {
top:255px;
right:274px;
}
.date4 {
top:329px;
left:245px;
}
.date5 {
top:404px;
right:274px;
}
.contact-text {
width:70%;
float:left;
margin:10px;
padding:10px;
text-align:justify;
}
.contact-img {
 float: right;
text-align:center;
width: 25%;
}
.reseaux {
text-align: center;
width:250px;
margin:auto;
}
.twitter {
width:84px;
height:84px;
display:block;
background-image:url(../img/twitteroff.gif);
margin:20px;
float:left;
}
.twitter:hover {
background-image:url(../img/twitteron.gif);
}
.viadeo {
width:84px;
height:84px;
display:block;
background-image:url(../img/viadeooff.gif);
margin:20px;
float:left;
}
.viadeo:hover {
background-image:url(../img/viadeoon.gif);
}
@media screen and (max-width: 600px ){
.chrono {
width: 280px;
}
.bulle1 {
left: 95px;
top:-5px;
}
.bulle2,
.bulle3,
.bulle4,
.bulle5 {
left: auto;
right:40px;
}
.date1,
.date2,
.date3,
.date4,
.date5
{
left: 250px;
right: auto;
}
.section {
    height: 400px;
}
.contact-img {
float:left;
width:90%:
}
.contact-text {
width:auto;
}
.contact-img {
width: auto;
float:inherit;
}
}