*{
	margin:0;
	padding:0;
	border:none;
}
html{
	width:100%;
	height:100%;
}
body {
	font-family: Arial;
	font-size:16px;
	line-height:22px;
	color:#181f29;
	background:#f1f0f0;
	margin:0;
}
h1,h2,h3,h4{font-weight:normal;color:#324256;}

h1{margin:15px 0;font-size:20px;text-transform:uppercase;}
h2{font-weight:bold;margin:10px 0;font-size:16px}

a{
	color:#dadada;
	text-decoration:none;
}

.center{text-align:center;}
.fleft{float:left;}
.fright{float:right;}
.none{display:none;}
.clear{clear:both;}

#header{
	position:relative;
	width:100%;
	background:url(../img/header.jpg) center top no-repeat;
	height:280px;
}

#logo{
	float:left;
	margin-top:120px;
	left:0;
	text-align:right;
	width:495px;
}

.wrapper{width:1024px;margin:auto;}


#rubrique{text-align:left;margin-left:10px;margin-right:0;	left:0;}
.slogan{color:#7da7d9;text-transform:uppercase;font-size:18px;}

#nav-wrap {
    margin-top: 5px;
	position:absolute;
	bottom:0;
	z-index:100;
	font-size:16px
}
 
/* menu icon */
#menu-icon {
        display: none; /* hide menu icon initially */
}
 
.sf-menu,
.sf-menu li {
    margin: 0;
    padding: 0;
}
.sf-menu li {
    list-style: none;
    float: left;
    margin-right: 5px;
}
 
/* nav link */
.sf-menu a {
    padding: 5px 15px;
    display: block;
    color: #ff6600;
}
.sf-menu a:hover, .sf-menu a.selected {
        background: #dadde2;
}
 
/* nav dropdown */
.sf-menu ul {
        background: #8499ae;
        padding: 0;
        position: absolute;
        display: none; /* hide dropdown */
        width: 240px;
}
.sf-menu ul li {
        float: none;
        margin: 0;
        padding: 0;
}
.sf-menu li:hover > ul {
        display: block; /* show dropdown on hover */
}


ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
        left:                   200px; /* match ul width */
        top:                    0;
		background:#a0b0c0;
}

.sf-menu li li a {color:#fff;}
.sf-menu li li a:hover {background:#a0b0c0;}

ul.activite{margin-top:70px;float:right;margin-right:170px;font-size:15px;font-family:Arial}
.activite li{list-style:none;color:#fff;}
.activite li + li{margin-left:10px;}
.activite li + li +li{margin-left:20px;}
.telephone{position:absolute;bottom:12px;margin-left:220px;}

#container{background:#fff;margin:-13px auto 0 auto ;position:relative;z-index:1;padding-bottom:20px;}
.shadow{height:13px;width:100%;background:url(../img/shadow.png) left top repeat-x;z-index:10;}

.content{width:900px;margin:0 auto;padding-top:25px;position:relative;text-align:justify;font-size:12px;color:#818181;}
.content ul{margin:20px 30px 0 30px;}
.content li{list-style-image:url(../img/puce.jpg);list-style-position:inside;padding-bottom:5px;}
.content h3{display:inline;font-size:12px;color:#ff6600;}
.col{width:400px;float:left;margin: 20px 50px 0 50px;position:relative;}
.col h2{margin-bottom:20px;font-size:20px;font-weight:normal;text-transform:uppercase;}
.col h2 img{float:left;margin:-30px 10px 0 -30px;}
.alpha{margin-left:0;}
.omega{margin-right:0;}
.more{color:#fff;padding:7px 10px;display:inline-block;margin-top:15px;background:url(../img/more.jpg) center center repeat-x;}

.menu{padding:20px;position:relative;margin-top:-20px;margin-bottom:0;width:336px;height:172px;background:url(../img/arrondi.jpg) left top no-repeat;}
.menu ul{padding: 0 30px;margin:0;}
.menu li{list-style-image:url(../img/fleche.jpg);margin:0;list-style-position:outside;padding:5px 0 0 0;font-size:18px;}
.menu a{color:#181f29;}
.menu a:hover{color:#ff6600;}

#visuel{width:100%;height:234px;background:url(../img/entreprise-reseaux-sociaux.jpg) center top no-repeat;}
#visuel ul{padding-top:10px;margin-left:-20px;max-width:450px;}
#visuel li{float:left;list-style:none;background:url(../img/more.jpg) left center repeat-x;padding:5px;margin:7px 7px;width:200px;}
#visuel a{color:#fff;}
#footer{
	position:relative;
	width:100%;
	background:url(../img/footer.jpg) center top no-repeat;
	height:222px;
}
#footer a:hover{color:#ff6600;}
#footer .col{margin-top:0;}

.contact{color:#ff6600;font-size:16px;font-weight:bold;text-align:left;}
.separator{margin-right:50px;height:38px;margin-top:15px;background: url(../img/separator.jpg) left center repeat-x;position:relative;clear:both;}
.separator .more{margin-top:0;}
#footer .content li{margin:0;background:none;}
#footer .content ul{
	list-style:none;
	margin-top:-10px;
	margin-right:-30px;
	margin-left:30px
}

#footer li{
	float:left;
	margin:0;
	padding:0;
	width:50%;
	display:block;
}
#icones{float:right;margin-right:10px;right:0;}
.copyright{font-size:12px;color:#fff;margin-top:10px;margin-left:10px}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 1024px) {
	#visuel ul{margin-left:10px;}
}

@media screen and (max-width: 1000px) {
	#logo{width:410px;}
	#header,#footer,.wrapper,.content,.col{width:auto;}
	.content{margin:0 50px}
	.alpha,.omega,.col{margin:0;}
	.menu{margin-bottom:20px;}
	.telephone{margin-left:55px;}
	.activite{display:none;}
	#footer ul{margin-left:0;width:280px;float:right;}
	#footer li{float:none;padding-left:15px;width:100%}
	#icones{margin-top:-10px;}
}

@media screen and (max-width: 600px) {
	#header{background:url(../img/header.jpg) -300px top no-repeat;text-align:center;}
	#footer{background:url(../img/footer.jpg) -1200px top no-repeat;text-align:center;margin-top:-20px;}
	#logo{width:100%;text-align:center;margin-top:50px;}
	#logo img{width:300px;margin:auto;}
	#visuel ul{margin:0;margin-top:-12px;width:100%;}
	#visuel li{position:relative;margin:2px auto;width:180px;margin-left:30px}
	.shadow{height:12px;}
	.col{clear:both;margin:0;padding:10px 0;margin}
	.menu{width:260px;background:url(../img/arrondi_mobile.jpg) no-repeat;}
	.menu ul{padding-left:15px;padding-right:5px}
	.menu li{font-size:14px;}
	.content{margin:0 30px 20px 30px;padding:0 0;}
	.content ul{margin:0;}
	.contact,.copyright{display:none;}
	.telephone{position:relative;margin:30px auto;}
	.more{right:20px;}
	.separator{margin-right:30px;}
	#footer ul,#footer li{margin:0;padding:0;width:auto;position:relative;}
	#icones{margin-top:10px;margin-right:20px}
    #nav-wrap {
        position: absolute;
		width:100%;
    }
 
    #menu-icon {
        color: #3b4f65;
        width: 40px;
        height: 26px;
        padding: 8px 10px 0 10px;
        cursor: pointer;
        display: block; 
		margin:auto;
		text-transform:uppercase;
    }
    #menu-icon:hover {
        background-color: #dadde2;
    }
    #menu-icon.active {
        background-color: #dadde2;
    }
     
	#rubrique{margin:0}

    .sf-menu {
        clear: both;
        position: absolute;
        top: 34px;
        width: 100%;
        z-index: 10000;
        padding: 5px 0;
        background: #fff;
		border-bottom:1px solid #dadde2;
        display: none; 
	}
    .sf-menu li {
        clear: both;
        float: none;
        margin: 5px 0 5px 5px;
    }
    .sf-menu a,
    .sf-menu ul a {
        font: inherit;
        background: none;
        padding: 0;
        color: #3b4f65;
        border: none;
    }
    .sf-menu a:hover,
    .sf-menu ul a:hover {
        background: none;
        color: #3b4f65;
    }
    .sf-menu ul li ul,.sf-menu li li  {display:block;}
    
	.sf-menu ul {
        width: auto;
        position: static;
        display: block;
        border: none;
        background: inherit;
    }
    .sf-menu ul li {
        margin: 3px 0 3px 0;
    }
	ul.sf-menu li li:hover ul,
	ul.sf-menu li li.sfHover ul {
			background:none;
	}
	.sf-menu > li{display: block;}
	.sf-menu li li a {color:#3b4f65;padding-left:20px;}
	.sf-menu li li a:hover {background:none;}
	
}
 
@media screen and (min-width: 600px) {
	.sf-menu{
		display: block !important;
	}
}