body{
	width:100%;
	margin:0;
	padding:0;
}
#conteneur{
	width:100%;
	/*max-width:1020px;*/
	margin:0 auto;
	background-color:white;
}
#contenu{	
	/*padding-top:50px;*/
}
/* Add a black background color to the top navigation */


@font-face {
font-family: 'Gotham-Lights';
src: url('fonts/gotham/Gotham-Light.eot?') format('eot'),
     url('fonts/gotham/Gotham-Light.otf') format('opentype'),
     url('fonts/gotham/Gotham-Light.woff') format('woff'),
     url('fonts/gotham/Gotham-Light.svg#Gotham-Light') format('svg');
font-weight: normal;
font-style: normal;
}
.topnav {
    background-color:#006ab8;color:#fff;
	/* min-height:100px;  */min-height:70px;
	opacity: 0.8;
    overflow: hidden;
	width:100%;
	/*max-width:1020px;*/
	position:fixed;
	list-style-type:none;
	margin:0 auto;
	padding:0;text-align: right;
	z-index:900;
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(210, 100%, 32%) inset, 
                0 -2px 0 hsl(210, 100%, 38%) inset, 
                0 -3px 0 hsl(210, 100%, 44%) inset, 
                0 -4px 0 hsl(210, 100%, 50%) inset;
}
.topnav li{
    display: inline;
	margin:0;padding:0;
}
.menu{
	margin-top:45px;
	
}
/* Style the links inside the navigation bar */
.topnav a {
    /*float: left;
    display: block;*/
	display:inline;
    color: #f2f2f2;
    text-align: center;
    padding: 1px 1px;
    text-decoration: none;
    font-size: 14px;
font-family:'Gotham-Bold';
src: url('fonts/gotham/Gotham-Bold.otf.otf') format('opentype');
   font-weight: normal;
   font-style: normal;
	text-transform: uppercase;	 
}
.topnav li.active a{
    color: #ffff00;
}
/* Change the color of links on hover */
.topnav  a:hover{
    color: #ffff00;
}

/* Effect 1: Brackets */
.topnav li.active a::after,.topnav li.active a::before,
.topnav a::before,
.topnav a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}
.topnav li.active a::before,
.topnav a::before {
	margin-right: 07px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}
.topnav li.active a::after,
.topnav a::after {
	margin-left: 07px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}
.topnav li.active a::after,.topnav li.active a::before,
.topnav a:hover::before,
.topnav a:hover::after,
.topnav a:focus::before,
.topnav a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}


/* Hide the link that should open and close the topnav on small screens */
.topnav .icon{
    display: none;font-size:40px;line-height:1em;font-weight:bold;
}
.topnav .icon::before,.topnav .icon::after{
	content: ' ';
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  /*.topnav a:not(:first-child) {display: none;}*/
  .topnav{
	position:fixed;}
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;margin-top:50px;
    display: block;
  }
  .bande{display:none !important;}
  .bande-vert{display:block !important;    
	margin:0 auto; width:100%;}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: fixed;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: right;
  }
  .menu{
	margin-top:100px;
}
.nous .qui{
	margin-bottom:100px;
}
}


#toplogos{
	margin-left:5%;float:left;position:relative;
	z-index:1000;
	/* width:150px;
	height:118px; */
	width:127px;
	height:100px;
	position:fixed;
	background-image: url("images/logo1.png");
	background-size:100% 100%;
}
/*LOGO*/
#toplogo{
	margin-left:5%;float:left;position:relative;
	z-index:100;
	background-color:white;
	width:150px;
	height:110px;
	position:fixed;
	border-radius: 0 0 10px 10px;
	background-image: url("images/logo1.png");
}
#toplogo:after{
	content:'';position: relative;
	/* top:110px; */top:78px;
	margin-left:2px;
	border-left: 73px solid transparent;
	border-right: 73px solid transparent;
	border-top: 20px solid white;
	width:0;
}
#toplogo:before{
	content:'';position: relative;
	top:131px;margin-left:14px;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-top: 20px solid #0099ff;
	width:0;
	height:0;
}
#toplogo img{
	max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

#slider{
	width:100%;
	/*max-width:1020px;*/
	padding-top:100px;
	z-index:10;
}
.contactez-nous{
	color:#fff;
	width: 100%;
	text-align: center;
	margin: auto;
}
.contactez{
	color:#fff;
	max-width: 400px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.contactez ul{
list-style-type:none;
}
.nous,.footer,.contact{	
    background-color:#0072c5;
	background-image: url("images/fond.jpg");/*height: 370px;*/
	background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
	color:#fff;
	width:100%;
	/*max-width:1020px;*/
	margin:0 auto;
	text-align: center; 
    font-size: 14px;
 line-height: 180%; 
	font-family: Verdana, sans-serif;
}
.nous .img{
	width:100%;
	/*padding:20px;*/
	max-width:480px;
	display: inline-block;
	vertical-align: middle;
	margin:0 auto;
}
.nous .img img{
	width:80%;
    margin-left: auto;
    margin-right: auto;
}
.nous .qui{
	width:100%;
	/* height:100%; */
	max-width:490px;
	display: inline-block;
	vertical-align: middle ; 
	text-align : justify;
	color:#fff;

    font-size: 16px;
	font-family: Verdana, sans-serif;
}
.nous .qui p{
	padding:17px;
}
.service,.reference{	/*cccc33*/
/*background-image: url("images/claviers.jpg");
	background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  */
    background-color:#FFF;color:#333333;min-height:100px;
	width:100%;
	/*max-width:1020px;*/
	margin:0 auto;
	padding:0;
	text-align: center; 
}
#service,#contact,#reference{
	color:#cccc33;
    font-size: 50px;
font-family:'Arial';
   font-style: normal;
   text-align: center !important; 
}
#service .autre,#reference .autre{	
	color:#3f3d3b;
   text-align: center; 
}
#contact  .autre{	
	color:#fff;
   text-align: center; 
}
.serv{
	display: inline-block;
	height:auto;
	/*height:320px; */
	word-wrap: break-word;
	vertical-align: middle;
	width:220px;
	padding:1px;
	 margin:auto; 
	/*text-align: justify !important; */
	position:relative;
	font-family: Verdana, sans-serif;
	border: 1px solid black;
	margin-top:20px;
	padding-bottom:100px; 
 overflow:hidden;
  text-overflow:ellipsis;
	min-height:260px; 
	cursor: pointer;
}
.serv p{
	padding:10px;display: inline;
}
.serv h4{
	padding:0;margin:0;text-align:center;margin-bottom:17px;
	font-family: Verdana, sans-serif;font-weight:bold;color:#3f3d3b;font-size:20px;
}
p, .cont{
	font-size:14px; 
}
p, .cont ul li{
	text-align:left !important;
	margin:3px; 
}
.serv img{
	position:absolute;
   bottom:0px;left:50px;
}
.bande{
	display: inline-block;
	height:320px; 	
	vertical-align: middle;
	width:7px;margin:10px;
	background-image:url(images/bande.png);
background-repeat:no-repeat;
background-size:100% 100%;
	margin-top:20px;
}
.bande {
	overflow: hidden;
}
.bande-vert{
	width:200px;
	height:20px;display:none;
	background-image:url(images/bande-vert.png);
background-repeat:no-repeat;
background-size:100% auto;
background-position:center;
}
.cacher{
	display:none !important;
}
.contact{
	background-color:#0072c5;
	color:#000;
	width:100%;
	/*max-width:1020px;*/
	margin:0 auto;
	text-align: center; 
}
.contact #msg{
	color:white;font-family: Verdana, sans-serif;font-weight:bold;
	font-size:14px;
}
.contact .formulaire{
	color:white;font-family: Verdana, sans-serif;
	width:100%;
	max-width:400px;
	margin:0 auto;	
}
.contact .formulaire td{
	padding:5px;
	text-align: left;/*border: 1px solid #b4b4b4;*/
}
.contact .formulaire td input, textarea, select{	
	width:100%;padding:5px;
}

.footer a{text-decoration:none; color:white;}
.art-facebook-tag-icon
{
   background:  url('images/footerfacebookicon.png') no-repeat scroll;
   margin:0 auto;
   min-height:32px;
   min-width:32px;
   display: inline-block;
   text-indent: 35px;
   background-position: left center;
}

.cont{
	display: inline
}

.points{
	width:220px;
	margin:auto;
    text-align: center ;
    display: table-cell;
	height:32px; 
	position:relative;
	margin: 0 auto;
}
.points img{ 
	height:32px;
	width:80px;
	left:70px;
}




#slider{
	
}
.fondh{
	background-color:#64c8d0;
	height:20%;
-webkit-clip-path: (50% 90%, 100% 0, 100% 1%, 50% 70%, 0 1%, 0 0);
/*clip-path: polygon(50% 80%, 100% 0, 100% 1%, 50% 100%, 0 1%, 0 0);*/
clip-path: polygon(50% 90%, 100% 0, 100% 1%, 50% 70%, 0 1%, 0 0);
}
.fondha{
	background-color:#FFFFFF;
	height:100%;
-webkit-clip-path: (50% 90%, 100% 0, 100% 1%, 50% 70%, 0 1%, 0 0);
/*clip-path: polygon(50% 80%, 100% 0, 100% 1%, 50% 100%, 0 1%, 0 0);*/
clip-path: polygon(50% 80%, 100% 0, 100% 1%, 50% 70%, 0 1%, 0 0);
}
.nous,.contact{
-webkit-clip-path: polygon(50% 10%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
clip-path: polygon(50% 10%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
/*clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  width: 100%;
  height: 100%;
  z-index: 0;
  transform: skewY(6deg);
  transform-origin: top right;*/
  
}

.fondb{
	background-color:#64c8d0;
	height:10%;
-webkit-clip-path: polygon(50% 80%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
 clip-path: polygon(50% 80%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
}