@charset "utf-8";
/* CSS Document */


html{
	margin: 0;
	padding: 0;
}

body{
	margin: 0;
	padding: 0;
	
}

#fond-banniere{
	width: 100%;
	height: 115px;
	background-color:rgba(255,255,255,0.7);
	
}

#ligne-banniere{
	width: 100%;
	height:5px;
	background-color: #8f0028;
	
}


#reserver_banniere{
	width: 235px;
	height:21px;
	padding: 10px;
	padding-top:14px;
	color:white;
	background-color: #8f0028;
	text-transform:uppercase;
	text-align:center;
    text-decoration: none;
    font-size:16px;
    font-family: 'Roboto', sans-serif;
	position: absolute;
    margin-left: 745px;
	margin-top:70px;
}

#reserver_banniere:hover{
	
	background-color: #d0003a;

}

#fond-menu{
	position:absolute;
	width: 100%;
	height:32px;
	background-color:#FFFFFF;
	z-index:1000;
	
	
	
}


#contener-banniere {
	width: 1024px;
	height: 115px;
	margin: 0 auto;	
	background-color: transparent;
	
}

#logo-cognette{
	width:200px;
	height: 85px;
	position: absolute;
	margin-top: 15px;
	background-image:url(../images/logo_cognette.png);
	
	
}
#logo-pyramide{
	width:200px;
	height: 85px;
	position: absolute;
	margin-top: 15px;
	margin-left: 220px;
	background-image:url(../images/logo_pyramide.png);
	
	
}

#logo-francais{
	width: 33px;
	height: 25px;
	position: absolute;
	margin-top: 10px;
	margin-left: 894px;
	
}

#logo-anglais{
	width: 33px;
	height: 25px;
	position: absolute;
	margin-top: 10px;
	margin-left: 939px;
	
}

#logo-facebook{width: 30px;
	height: 25px;
	position: absolute;
	margin-top: 10px;
	margin-left: 974px;
	
}


#navigation{
	width: 1024px;
	height:30px;
	margin: 0 auto;	
	background-color: transparent;
	
	
}


#menu, #menu ul {
  padding:0;
  margin:0;
  list-style: none;
  text-align: right;
  
}

#menu li {
  display:inline-block;
  vertical-align: top;
  position: relative; 
  

}
#menu li li {
  display:inherit;
}
#menu a {
  display:block;
  padding:7px 20px;
  text-align:center;
  text-decoration: none;
  color:#000000;
  font-size:15px;
  font-family: 'Roboto', sans-serif;
  text-transform:uppercase;
  
}
#menu ul li a {
  padding:9px 9px;
  width:140px;
  text-align:left;
  
}



#menu ul {
  position: absolute;
  
  min-width:100%;
  white-space: nowrap;
  text-align: left;
}

#menu ul ul {
  left:100%;
  top:0;
  overflow: hidden;
  max-width: 0;
  min-width: 0;
  transition: 0s all;
  
}
#menu ul li:hover ul {
  max-width: 30em;
  
}

#menu ul li {
  max-height:0;
  overflow: hidden;
  transition:all 0s;
  
}
#menu li li li {
  max-height: inherit;
  
}
#menu li:hover li {
  max-height: 15em;
  overflow: visible;
  
}



/* background des liens menus */
.blanc {
	background: #FFFFFF;
color:#000000;
	 
	
}

.blanc:hover {
	background: #FFFFFF;
	color:#A8001F;
	 
}

.blanc li {
	background: #FFFFFF;
   color:#000000;
	 


}
.blanc li:hover {
	background: #FFFFFF;
   color: #A8001F;
	 
}


.home {
	width: 30px;
	height: 30px;
	background-image:url(../images/picto_home.png) ;
	font-size: 24px;
	 
		 }
.home:hover {
	width: 30px;
	height: 30px;
	background-image: url(../images/picto_home_survol.png) ;
	 
		 }



#menu li:hover {
     color: #A8001F;
	 
}
#menu li:hover a, .menu li li:hover a {
    color:#A8001F;
	 
}
#menu li:hover li a, #menu li:hover li li a {
    color:#000000;
	 
}
#menu li:hover a, #menu li li:hover a, #menu li li li:hover a {
    color:#A8001F;
	 
}


#menu2{
	display:none;
	
	
}


#navigation2 {
	
	display:none;
	 
}



#navigation2 ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	 
}

/*Create a horizontal list with spacing*/
#navigation2 li {
	display:inline-block;
	float: left;
	margin-right: 1px;
	 
}

/*Style for menu links*/
#navigation2 li a {
	display:block;
	min-width:140px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	  font-family: 'Roboto', sans-serif;
  text-transform:uppercase;
	color:black;
	background: #fff;
	text-decoration: none;
	 
}

/*Hover state for top level links*/
#navigation2 li:hover a {
	background: #8f0028;
	color:white;
	 
}

/*Style for dropdown links*/
#navigation2 li:hover ul a {
	background: #f3e6d3;
	color: #8f0028;
	height: 30px;
	line-height: 30px;
	 
}

/*Hover state for dropdown links*/
#navigation2 li:hover ul a:hover {
	background: white;
	color: #8f0028;
	 
}

/*Hide dropdown links until they are needed*/
#navigation2 li ul {
	display: none;
	 
}

/*Make dropdown links vertical*/
#navigation2 li ul li {
	display: block;
	float: none;
	 
}

/*Prevent text wrapping*/
#navigation2 li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
	 
}

/*Display the dropdown on hover*/
#navigation2 ul li a:hover + .hidden, #navigation2 .hidden:hover {
	display: block;
	 
}

/*Style 'show menu' label button and hide it by default*/
#navigation2 .show-menu {
  font-family: 'Roboto', sans-serif;
  text-transform:uppercase;
	text-decoration: none;
	color:white;
	background: #8f0028;
	text-align: center;
	padding-top: 3px;
	padding-bottom:8px;
	display: none;
	 
}



/*Hide checkbox*/
input[type=checkbox]{
    display: none;
	 
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu2{
    display: block;
	 
}


/*/////////////////////////////PETIT ECRAN//////////////////////////////*/
@media only screen and (min-width:768px) and (max-width:1044px) {

#contener-banniere {
	width: 100%;
	height: 115px;
	margin: 0 auto;	
	background-color: transparent;
	
}
	
	#navigation {
	width: 100%;
	margin: 0 auto;	
	background-color: transparent;
	
}

#reserver_banniere{
	width: 235px;
	height:21px;
	padding: 10px;
	padding-top:14px;
	color:white;
	background-color: #8f0028;
	text-transform:uppercase;
	text-align:center;
    text-decoration: none;
    font-size:16px;
    font-family: 'Roboto', sans-serif;
	position: absolute;
    margin-left: inherit;
	margin-top:70px;
	right: 35px;
}

#reserver_banniere:hover{
	
	background-color: #d0003a;

}
	


#logo-cognette{
	width:200px;
	height: 85px;
	position: absolute;
	margin-top: 15px;
	background-image:url(../images/logo_cognette.png);
	
	
}
#logo-pyramide{
	width:200px;
	height: 85px;
	position: absolute;
	margin-top: 15px;
	margin-left: 220px;
	background-image:url(../images/logo_pyramide.png);
	
	
}

#logo-francais{
	width: 33px;
	height: 25px;
	position: absolute;
	margin-top: 10px;
	margin-left:inherit;
	right: 113px;
	
	
}

#logo-anglais{
	width: 33px;
	height: 25px;
	position: absolute;
	margin-top: 10px;
	margin-left: inherit;
	right: 70px;
	
}

#logo-facebook{width: 30px;
	height: 25px;
	position: absolute;
	margin-top: 10px;
	margin-left: inherit;
	right:30px;
}
}
/*/////////////////////////////TABLETTE//////////////////////////////*/
@media only screen and (min-width:650px) and (max-width:768px) {
	
	#contener-banniere {
	width: 100%;
	height: 115px;
	margin: 0 auto;	
	background-color: transparent;
	
}


	
#logo-cognette{
	width:200px;
	height: 85px;
	position: absolute;
	margin-top: 15px;
	margin-left: 20px;
	background-image:url(../images/logo_cognette.png);
	
	
}
#logo-pyramide{
	width:200px;
	height: 85px;
	position: absolute;
	margin-top: 15px;
	margin-left: 230px;
	background-image:url(../images/logo_pyramide.png);
	
	
}

#reserver_banniere{
	width: 235px;
	height:21px;
	padding: 10px;
	padding-top:14px;
	color:#8f0028;
	background-color: white;
	text-transform:uppercase;
	text-align:center;
    text-decoration: none;
    font-size:16px;
    font-family: 'Roboto', sans-serif;
	position: absolute;
    margin-left: inherit;
	margin-top:70px;
	right: 0px;
}

#reserver_banniere:hover{
	
	background-color: white;
	color:#8f0028;

}
#logo-francais{
	width: 33px;
	height: 25px;
	position: absolute;
	margin-top: 10px;
	margin-left:inherit;
	right: 103px;
	
	
}

#logo-anglais{
	width: 33px;
	height: 25px;
	position: absolute;
	margin-top: 10px;
	margin-left: inherit;
	right: 60px;
	
}

#logo-facebook{width: 30px;
	height: 25px;
	position: absolute;
	margin-top: 10px;
	margin-left: inherit;
	right:20px;
}

	#navigation{display: none;}

#menu {display: none;
}

	
#navigation2{
	display:block;
	 
}
	
	#navigation2 ul {
		position: static;
		display: none;
		 
	}
	/*Make all menu links full width*/
	#navigation2 ul li, #navigation2 li a {
		width: 100%;
		 
	}
	/*Display 'show menu' link*/
	#navigation2 .show-menu {
		display:block;
		 
	}
}

/*/////////////////////////////TELEPHONE//////////////////////////////*/


@media screen and (max-width:650px) {
	
	#navigation{display: none;}

#fond-banniere{
	width: 100%;
	height: 220px;
	background-color:rgba(255,255,255,0.7);
	
}

#contener-banniere {
	width: 100%;
	height: 250px;
	margin: 0 auto;	
	background-color: transparent;
	
}

	#fond-menu{
	position:absolute;
	width: 100%;
	height:30px;
	background-color:transparent;
	z-index:1000;
	
	
	
}

	
/*#logo-cognette{
	width:267px;
	height: 57px;
	position: absolute;
	margin-top: 50px;
	margin-left: 20px;
	background-image:url(../images/logo_cognette.png);
	background-size: cover;
	overflow: hidden;
	clear: both;
	
	
}*/
	
#logo-cognette{
	width:200px;
	height: 85px;
	position: absolute;
	margin-top: 50px;
	background-image:url(../images/logo_cognette.png);
	left: 50%;
	margin-left: -100px;

	
	
}
#logo-pyramide{
	width:200px;
	height: 85px;
	position: absolute;
	margin-top: 120px;
	margin-left: 20px;
	background-image:url(../images/logo_pyramide.png);
	left: 50%;
	margin-left: -100px;
	
	
}

#logo-francais{
	width: 33px;
	height: 25px;
	position: absolute;
	margin-top: 10px;
	margin-left:inherit;
	right: 103px;
	
	
}

#logo-anglais{
	width: 33px;
	height: 25px;
	position: absolute;
	margin-top: 10px;
	margin-left: inherit;
	right: 60px;
	
}

#logo-facebook{width: 30px;
	height: 25px;
	position: absolute;
	margin-top: 10px;
	margin-left: inherit;
	right:20px;
}
	
	#reserver_banniere{
	width: 100%;
	height:21px;
	padding: 5px;
	padding-top:10px;
	color:#8f0028;
	background-color: white;
	text-transform:uppercase;
	text-align:center;
    text-decoration: none;
    font-size:16px;
    font-family: 'Roboto', sans-serif;
	position: absolute;
    margin-left: inherit;
	margin-top:217px;
	right: 0px;
	z-index: 10000;
}

#reserver_banniere:hover{
	
	background-color: white;
	color:#8f0028;
	

}
	
#ligne-banniere{
	position: absolute;
	width: 100%;
	height:40px;
	background-color: #8f0028;
	opacity: 0;
	
}

#menu {   display: none;

	}
	
#navigation2{
	display:block; margin-top: 33px;
	 
}
	
	#navigation2 ul {
		position: static;
		display: none;

		 
	}
	/*Make all menu links full width*/
	#navigation2 ul li, #navigation2 li a {
		width: 100%;
		 
	}
	/*Display 'show menu' link*/
	#navigation2 .show-menu {
		display:block;
		 
	}

}