/* 

	project:  website traffic (free CSS templates)
	author:   luka cvrk (www.solucija.com) 

   
*/

*{ margin: 0; padding: 0; }* 
body { font: .74em Verdana, Arial, "Trebuchet MS", Tahoma, sans-serif; line-height: 1.6em; background: #D0D4D4; color: #444; width: 100%;}

a {	color: #B60D0A;	background: inherit; text-decoration: none; }
a:hover { color: #808080; background: inherit; }
p { margin: 0 0 15px 0; }
h1 { font: normal 3.7em "Trebuchet MS", Arial, Sans-Serif; color: #fff; }
h1 a { color: #fff; background: inherit; }
h1 a:hover { color: #E4FFD3; background: inherit; }
sup { font-size: .3em; color: #DFCDA2; }
h2 { color: #B60D0A; font: bold 1.6em "Trebuchet MS", Arial, Sans-Serif; margin: 0 0 12px; border-bottom: 1px solid #ccc; }
h3 { color: #808080; background: #D0D4D4; padding: 3px 10px; margin: 0 0 15px; }
.formContact {
	color: #000;
	text-align: center;
}
#content { 
	width: 75%;
 	margin: 10px auto; 
 	background: #fff; 
 	padding: 10px; 
}

/*adapter l'image du header pour le site web*/

#header { background: #fff url(../img/header.jpg) no-repeat; height: 270px; width: 100%; /*width: 100%;*/ }
	#header p { margin: 30px 0 0; color: #B60D0A; }/*#D6E5EA*/


	#logo { padding: 40px 0 0 20px;  float: left; width: 400px; color: black;}
	#logo h1 { color: black;}
	#logo p { font-size: 1.2em;}

	#search { float: right; width: 240px; text-align: right; margin: 10px 15px 0 0; }
	#search a, #watch a { color: black; font-size: 1.2em; cursor: pointer; }

	#searchform { padding: 10px; background: #A1BDD2;  }
	#searchform p { margin: 0; }
	
	/*enlever le css du html "ligne 38"*/
		/*#searchform {
			display: none;
		}*/
		
		
	#menu { 
		display: flex;
		margin: 0 0 50px; 
		width: 100%;
	}
		#menu li { 
			list-style: none;
			/*float: left;*/
		}
		#menu li a { cursor: pointer; padding: 5px 39px; line-height: 25px; background: white/*#D0D4D4*/; margin: 0 1px 0 0; font-weight: bold; font-size: 1.2em; color: #808080; transition: all 0.5s;}
		#menu li a:hover { background: lightgreen; color: #000; }
		#menu li a.current { background: #66A3CF; color: #fff; }
		#menu li a#last  { margin: 0; padding: 5px 41px 5px 40px; }

		 #sousmenu {
			display: none;
			position: absolute;
		 }
		 #sousmenu2 {
			display: none;
			position: absolute;
		}

		#sousmenu3 {
			display: none;
			position: absolute;
		}
		#menu li ul li a {
			display: block;
			background-color: #DCDCDC;
			color: black;
			transition: all 0.5s;
		}


		#menu li ul li a:hover {
			background-color: #87CEEB;
			color: white;
		}

#text{
	display: flex;
	flex-direction: row;
}
/*
#text {
	margin-left: 30px;
	border-left: 2px solid teal;
	text-align: center;
	}*/
.twice{
	flex-wrap: wrap;
	/*float: left; */
	width: 350px;
	 margin-left: 30px; 
	/*margin: 0 30px 10px 10px;*/
}

.twice_last{
	flex-wrap: wrap;
	/*float: right;*/
	width: 350px;
	margin-left: 110px;
	/*margin: margin: 0 10px 10px 0;*/
}
.third { font-size: 1em;  float: left; margin: 0 30px 10px 10px; }
.last { float: right; margin: 0 10px 10px 0; }

.more { border-top: 1px solid #eee; padding: 5px 0 0 0; }

#prefooter { 
width: 74%; 
margin: 0 auto; 
background: #fff; padding: 15px 18px 1px; 
font-size: .9em;  
}

#footer { width: 75%; margin: 15px auto; color: #808080; font-size: .9em; }
	#footer a { color: #444; }
	.right { float: right; text-align: right; font-size: 1em; }
		#footer .right a { margin: 0 0 0 2px; padding: 3px 10px; }
		#footer .right a:hover { background: #fff; color: #444; text-decoration: underline; }
	
	/*	ligne 80 html*/
		#div {
			clear: both;
		}
		
		.btn {
			background-color: DodgerBlue; /* Blue background */
			border: none; /* Remove borders */
			color: white; /* White text */
			padding: 12px 16px; /* Some padding */
			font-size: 1em; /* Set a font size */
			cursor: pointer; /* Mouse pointer on hover */
		  }
		  
		  /* Darker background on mouse-over */
		  /*.btn:hover {
			background-color: RoyalBlue;
		  }
		*/
		
		
	
	
	/* responsive pour ecran egale ou inferieur à 768px*/
	
@media screen and (max-width: 1030px) {

	body {
		height: 100%;/*100px*/
		width: 100%;
		}

	#header{
		background: #fff url(../img/header.jpg) no-repeat; .
        height: 270px;
		width: 100%;
		}
		
	#logo { padding: 10px 0 0 20px;  float: left; width: 40%; }

	#search {
		display: flex;
		flex-wrap: wrap;
		width: 30%;
		font-size: 1em;
		text-align: right;
		/*align-items: left;
		align-content: left;*/
		}
	#search a, #watch a { color: #fff; font-size: 1em; cursor: pointer; }

    #content {
		display: block;
		width: 100%;
		}
	
  	
	#menu {
		display: flex;
		flex-wrap: wrap;
		}
		#menu li a { cursor: pointer; padding: 5px 29px; line-height: 25px; background: white/*#D0D4D4*/; margin: 0 1px 0 0; font-weight: bold; font-size: 1.1em; color: #808080; transition: all 0.5s;}
		#menu li a:hover { background: lightgreen; color: #000; }
		#menu li a.current { background: #66A3CF; color: #fff; }
		#menu li a#last  { margin: 0; padding: 5px 41px 5px 40px; }
/*
	#text {
		margin-left: 30px;
		border-left: 2px solid teal;
		text-align: center;
		}*/
	#text{
		display: flex;
		flex-direction: row;
	}
	.twice {
		flex-wrap: wrap;
		/*float: left; */
		width: 50%;
		 margin-left: 15px;
		 height: auto;
		/*margin: 0 30px 10px 10px;*/
	}

	.twice_last {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		/*float: right;*/
		width: 50%;
		margin-left: 10px;//110px
		height: auto;
		/*margin: margin: 0 10px 10px 0;*/
	}
	.third {
		flex-wrap: wrap;
		width: 70%;
		height: auto;
		}
		
	.third_last {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 70%;
		height: auto;
		margin-left: 10px;
		}
		
	#prefooter {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 80%;
		/* margin-left: 20%; */
		}
		
	#footer {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			width: 70%;
		}
	}
	

	  
	
	  
	  /* label {
		  font-size: 17px;
		  display: block;
		  margin-bottom: 30px;
		  margin-right: 90px;
	  } 

	  .formContact {
		  margin-bottom: 100px;
	  }
	   */
	 
	  
	 
	  
	  /* .button {
		padding-left: 90px; 
	  }
	  
	  button {
		margin-left: .5em;
	  } */
	
	
	/* responsive pour ecran ayant entre 320px et 568px*/
	
	
@media screen and (min-width: 318px) and (max-width: 568px){
	body {
		height: 100%;
	}
	#header { background: #fff url(../img/header.jpg) no-repeat; height: 118px; width: auto;}
	#search {
		display: flex;
		flex-wrap: wrap;
		width: 30%;
		font-size: 0.9em;
		text-align: right;
		padding-right: 25%;
		margin-top: 10px;
/*		align-items: left;
		align-content: left;*/
	}
	#search a, #watch a { color: #fff; font-size: 0.9em; cursor: pointer; }
	
	#logo { padding: 10px 0 0 5px;  float: left; width: 40%; }

    #content {
		display:  block;
	    width: 100%;
		height: 100%;
		/*text-align: center;*/
	}
	#menu{
		display: flex;
	}
	
  	

	#menu li {
		line-height: 40px;
		}
		#menu li a { cursor: pointer; padding: 5px 13px; line-height: 25px; background: white/*#D0D4D4*/; margin: 0 1px 0 0; font-weight: bold; font-size: 1.1em; color: #808080; transition: all 0.5s;}
		#menu li a:hover { background: lightgreen; color: #000; }
		#menu li a.current { background: #66A3CF; color: #fff; }
		#menu li a#last  { margin: 0; padding: 5px 41px 5px 40px; }

/*	
	#text {
		display: flex;
		flex-direction: column;
		float: left;
		margin-left: 30px;
	}
*/
	#text{
		display: block;
		flex-direction: column;
		max-width: 70%;
	}	
	.twice {
		flex-wrap: wrap;
		/*float: left; */
		width: 70%;
		 margin-left: 5px;
		 margin-bottom: 15px;
		 padding-bottom: 10 px;
		 height: auto;
		/*margin: 0 30px 10px 10px;*/
	}
	.twice img { text-align: center; max-width: 70%;}

	.twice_last {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		/*float: right;*/
		width: 70%;
		margin-left: 10px;/*110px*/
		margin-top: 25px;
		height: auto;
		/*margin: margin: 0 10px 10px 0;*/
	}
	.twice_last img { text-align: center; max-width: 70%;}
	/*.third {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			width: 80%;
			height: auto;
	}
	*/
		
		.third_last {
			margin-left: 10px;
		}

		#prefooter {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			width: 100%;
			margin-left: 0px;
		}
		
		#footer {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			width: 100%;
		}
	}
	
	
	
	/* responsive pour ecran ayant entre 1024px et 1366px*/
	
/*@media screen and (min-width: 1024px) and (max-width: 1438px) {

	body{
		width: 100%;
		height: 100%;
	}

	#search {
		display: flex;
		flex-wrap: wrap;
		width: 40%;
		font-size: 20px;
		align-items: center;
		align-content: center;
	}
	
    #content {
	         width: 100%;
	         height: 100%;
	}
	
	#text {
		display: block;
		flex-wrap: wrap;
		flex-direction: column;
		font-size: 15px;
		width: 80%;
		line-height: 27px;
		text-align: left;
		float: left;
	}
	
	
	.third {
		width: 80%;
	}
	
	.third_last {
		width: 80%;
		font-size: 15px;
		text-decoration: none;
		text-transform: none;
		text-shadow: none;
	}
	#prefooter {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 97%;
		font-size: 15px;
		line-height: 30px;
	}
		
	#footer {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 90%;
		font-size: 15px;
	}
}
*/