@charset "UTF-8";

body {
	background-color: white;
	font-family: 'Roboto Slab', serif;
	}
	
	.pleinpage {
		background-image: url('../medias/intro-4quarts.jpg');
		background-size: 100%;
		height: 750px;
		margin-top:-30px;
		background-repeat: no-repeat;
		position : relative;
		}

		
		.pleinpage a{ font-size : 12px;color: black;}




	h2 {font-size: 9px;
		color : white;
		font-family: 'Roboto Slab', serif;
		-ms-transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-ms-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
		/*margin-left: 0px;*/
		}

	

	#picto {
		text-align: center;
		color : black;
		font-size :14px;
		transform: rotate(-90deg);
		margin-top :-80px;
		font-family: 'FontAwesome';

		}
		#fleche a{color:black;
		font-family: 'Roboto Slab', serif;
		font-size :10px;}

	
#barrecontact li {  display : block;}
	#barrecontact1 li { display : none;}

	nav {
		height :30px;
		background-color: white;
		background-size: cover;
		}

		
		#barrecontact ul{
			
			text-align: right;
			margin-top: 5px;
			margin-bottom: 5px;
			margin-left : 0px;
			margin-right : 40px;
			}

		li { 
			display : inline-block;
			list-style-type: none;
			padding-left: 20px;
			}
			
			a {
				text-decoration: none;
				font-family:'Roboto Slab', serif;
				font-size :16px;
				color : black;

				}



	
	.apropos{height :0px;
		-ms-transition: all  ease-out 1000ms;
		transition: all  ease-out 500ms;
		text-align: center;
		font-size :12px;
		font-family:'Roboto Slab', serif; 
		margin-left: 50px;
		margin-right: 50px;

	}
	.apropos a {font-size :12px;}
	.ouvert{height :100px;margin-top: -50px;}
		


	.container{  
		margin-left:auto;
		margin-right: auto;
		width:960px;
		position: relative;
		}

/*partie 1*/


		.france img{width :100%; height :100px; }
		/*finpartie 1*/

	
/*partie 2*/
			.graphisme { background-image: url('../medias/trame1.png');
				margin-top: 100px; height : 900px; }
			
		.graphisme .owl-theme .owl-dots .owl-dot span {width :7px; height :7px;background:#34BED8; }				

			.owl-carousel{display:inline-block; 
			position:relative;}

			#devoyages
			{
			float: left;
			width: 25%;
			margin-right: 0px; 
			margin-top: 43px;
			}

			#devoyages img 
			{
			width: 60%;
			
			}

			.graphisme .slider
			{
			float: right;
			width: 70%;
			margin-left: 
			0px; 
			margin-top: 
			35px;
			}

		 .owl-dots span {width: 25%;color: red;}

			#hugo1 h4 {font-weight: bold;font-size : 
				24px;margin-bottom: -20px; }
			#hugo1 h5 {font-size: 14px;}
			

		
			#accroche 
			{
			color : black;
			position: absolute;
			font-size: 12px;
			top :400px;	
			left:-100px;
			}

			#accroche1 
			{
			color : black;
		
			position: absolute;
			font-size: 12px;
			top :500px;	
			left:-100px;	
			}


			

			/*fin partie 2*/

		.gourmand { margin-top: 40px; height : 500px; 
			}

				#hugoZ h4 {font-weight: bold;font-size : 
				24px;margin-bottom: -20px; }
			#hugoZ h5 {font-size: 14px;font-weight: bold;}

			.gourmand #accroche1 
			{
			color : black;
		
			position: absolute;
			font-size: 12px;
			top :300px;	
			left:-100px;	
			}

		#hugoZ a {
				text-decoration: none;
				font-family:'Roboto Slab', serif;
				font-size :14px;
				color : #0b7680;

				}
			
 	    .maggourmang { 
				height :400px;
				width: 100%;
				position: relative;
				margin-top: 0px;
					}

		.maggourmang img{
				width: 100%;
				}

		
/*partie 3*/

		.photo { background-image: url('../medias/trame1.png');
				margin-top: 100px; height : 600px; }
			
		.photo .owl-theme .owl-dots .owl-dot span {width :7px; height :7px;background:#34BED8; }				

			.owl-carousel{display:inline-block; 
			position:relative;}




			#devoyages1
			{
			float: left;
			width: 30%;
			margin-right: 0px; 
			margin-top: 43px;
			}

		#devoyages1 img 
			{
			width: 60%;
			
			}

			.photo .slider
			{
			float: right;
			width: 65%;
			margin-left: 
			0px; 
			margin-top: 
			35px;
			}

		 .owl-dots span {width: 25%;color: red;}

			#hugo1 h4 {font-weight: bold;font-size : 
				24px;margin-bottom: -20px; }
			#hugo1 h5 {font-size: 14px;}
			

		
			#accroche 
			{
			color : black;
			position: absolute;
			font-size: 12px;
			top :400px;	
			left:-100px;
			}

			#accroche1 
			{
			color : black;
		
			position: absolute;
			font-size: 12px;
			top :500px;	
			left:-100px;	
			}

/*fin partie 3*/

 
	 .fin {
			height: 100px;
			background-color:white;
			}
	 .fin div
	{
	display: inline-block;
	width: 100%;
	position: relative;
	height: 150px;
	background-color:white;
	}


	#coordonnees { 
		color : black;
		text-align : center;
		font-size: 24px;
		}

	#coordonnees a{ 
		font-family: 'Roboto Slab', serif;
		font-size: 18px;
		}


		#coordonnees a span {font-family: 'Roboto', sans-serif;}

		#coordonnees i{font-size: 24px;}


@media  screen and (max-width: 600px) { 

	
	.pleinpage {height:200px;margin-bottom: -50px; margin-top: 0px; }
	
	


	
	#picto {display:none;}
	

	#barrecontact li { display : none;}

	#barrecontact1 ul { margin-bottom: 10px;text-align : right;margin-right: 20px; height: 30px;}
	#barrecontact1 li { display : block; margin-bottom:10px; }
	#barrecontact1 a { font-size:8px;}

	.container { width : 85%;
				font-size: 14px;
				float:none;}


				

	h2 {display: none;}

	


	.france img{display : none;}
	

	.apropos { display : none; }

/*.apropos a {font-size :7px;}
	.ouvert{height :30px;margin-top: -50px;}*/
	




.graphisme { background-image:none; }

#devoyages { display : none;}

.graphisme .slider {float:none;width : 100%;}
 
 #hugo1 h4 {padding-left: 10px; font-weight: bold;font-size : 
				14px;margin-bottom: -20px; }
			#hugo1 h5 {padding-left: 10px; padding top : 10px; font-size: 10px;}

	#mag.graphisme { margin-top: -35px; height : 400px; }



	.graphisme .slider {float:none;width : 100%;}



	.graphisme .owl-theme .owl-dots .owl-dot span {width :5px; height :5px;background:#34BED8; }

	

	#mag.gourmand{ float : none;height : 300px;margin-top: 25px;}

		#hugoZ h4 {font-weight: bold;font-size : 14px;margin-bottom: -20px; }
			#hugoZ h5 {font-size: 11px;font-weight: bold;}

			#hugoZ a {
				text-decoration: none;
				font-family:'Roboto Slab', serif;
				font-size :11px;
				color : #0b7680;

				}
	
	.maggourmang {float : none; width : 100%;}

	 #hugo1 h4 {padding-left: 50px; font-weight: bold;font-size : 14px;margin-bottom: -20px; }
			#hugo1 h5 {padding-left: 50px; padding top : 10px; font-size: 10px;}


	#mag.photo { background-image:none; }
 


	.photo { margin-top: -45px; height : 350px; }
	#devoyages1 { display : none;}

	.photo #hugo1 h4 {font-weight: bold;font-size : 
				14px;margin-bottom: -20px; }
			.photo #hugo1 h5 { padding top : 10px; font-size: 11px;}



	.photo .slider {float:none;width : 100%;}



	.photo .owl-theme .owl-dots .owl-dot span {width :5px; height :5px;background:#34BED8; }
	


		


	
	
	

	#coordonnees a{ 
		font-size: 9.5px;
		/*padding-right: 10px*/;
		}

		#coordonnees i{font-size: 16px;}

		#coordonnees a span {font-size:  9.5px;}*/
								
}


		@media  screen and (min-width: 601px) and (max-width: 1200px){
        
        .pleinpage { background-image: url('../medias/intro-4quarts.jpg');
		width: 100%; height : 600px;}

		.container {margin-right: 30px; margin-left: 30px;}

        .ouvert{height :150px;margin-top: -50px;}	

      


	

	}