/* Layout----------------------------- */

	/* Font 1 - Text */
		/* font-family: 'Josefin Sans', Verdana, Georgia, Arial, sans-serif; */

	/* Classical
		Georgia
		Palatino Linotype
		Book Antiqua
		Times New Roman
		Arial
		Helvetica
		Arial Black
		Impact
		Lucida Sans Unicode
		Tahoma
		Verdana
		Courier New
		Lucida Console
		initial
	*/

	/* Original
		font-family: 28px/1.3 'Playfair Display', serif;
		font-family: "Merriweather-Italic", serif;
		font-family: 'aw-conqueror-didot',sans-serif;		
	/*

	/* Text Colors */

		/* Color 1 - Title - Yellow */
			/* color:rgb(157, 132, 102); */
		/* Color 2 - Nav - Yellow */
			/* color:rgb(157, 132, 102); */
		/* Color 3 - Text - Dark Grey */
			/* color: rgb(29,30,28); */
		/* Color 4 - Text - Light Grey */
			/* color:rgb(157,157,156); */
		/* Color 5 - White */
			/* color: rgb(255,255,255); */
		/* Color 6 - Blue */
			/* color: rgb(81,109,117); */

	/* Background Colors */

		/* Background 1 - White */
			/* background-color: rgba(255,255,255,1); */

		/* Background 2 - Container - Transparent Light Grey */
			/* background-color:rgba(157,157,156,0.1); */

		/* Background 3 - Yellow */
			/* background-color: rgb(157, 132, 102); */

		/* Background 4 - Navbar - Light Grey */
			/* background-color:rgb(230,230,230); */

		/* Background 5 - Blue */
			/* background-color:rgb(81,109,117); */

	/* Border Colors */

		/* Border 1 - Yellow */
			/* background-color: rgb(157, 132, 102); */

		/* Border 2 - Transparent Light Grey */
			/* background-color:rgba(157,157,156,0.3); */

		/* Border 3 - Blue */
			/* background-color:rgb(81,109,117); */


/* For smartphone----------------------------- */
@media only screen and (max-width: 1100px) {

	/* Body & HTML */
	body, html
	{
		height: 100%;
		margin: 0;
		padding:0;
	}

	body
	{
		font-family: Georgia, Arial, sans-serif; /* Font 1 - Text */
		color:rgb(157,157,156); /* Color 4 - Text - Light Grey */
		font-size: 0.9em;		
	}

	/* Desktop Header */
	.slideshow_container
	{
		display: none;
	}

	/* Responsive Header */
	header
	{
		width:100%;
		padding: 5% 0 0 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.bloc_header
	{
		width:90%;
		text-align: center;
		background-color: rgb(157,157,156);
		padding:5% 0 5% 0;
	}

	.bloc_header img
	{
		display: block;
		margin: auto;
	    height: auto;
	    width: 50%;
	}

	/* Nav */
	.nav_2
	{
		position: -webkit-sticky; /* Safari */
    	position: sticky;
    	top: 0;
	}

	ul.topnav
	{
	  list-style-type: none;
	  margin: 0;
	  padding: 0;
	  overflow: hidden;
	  background-color: rgb(20,20,20);
	}

	ul.topnav li {float: left;}

	ul.topnav li a
	{
	  display: inline-block;
	  color: white;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
	  transition: 0.3s;
	  font-size: 17px;
	}

	ul.topnav li a:hover
	{
		background-color: rgba(200,200,200,0.5);
	}

	ul.topnav li.icon
	{
		display: none;
	}

	@media screen and (max-width:1100px)
	{
		ul.topnav li:not(:first-child) {display: none;}
		ul.topnav li.icon
		{
	    	float: right;
	    	display: inline-block;
	  	}
	}

	@media screen and (max-width:1100px)
	{
		ul.topnav.responsive {position: relative;}
		ul.topnav.responsive li.icon
		{
		    position: absolute;
		    right: 0;
		    top: 0;
	  	}

	  	ul.topnav.responsive li
	  	{
		    float: none;
		    display: inline;
		}
	  	
	  	ul.topnav.responsive li a
	  	{
		    display: block;
		    text-align: left;
		}
	}

	/* Section */

	.main_title
	{
		color: rgb(81,109,117); /* Color 6 - Blue */
	    font: 30px/1.3 'Playfair Display', Georgia, serif;
	    font-weight: 400;
	    text-align: center;
	}

	.title
	{
		color: rgb(81,109,117); /* Color 6 - Blue */
		text-align: center;
	}

	.sub_title
	{
		color: rgb(29,30,28); /* Color 3 - Text - Dark Grey */
		text-align: center;
	}

	div.paragraphe_description
	{
		line-height: 200%;
		text-align: justify;
	}

	/* Footer */

	footer
	{
		display:flex;
		flex-direction:column;
		justify-content: space-around;
		align-items:center;
		text-align: center;
		color:rgb(157,157,156);/* grey*/
	}

	footer ul 
	{
	    list-style-type: none;
	    margin: 0;
	    padding: 0;
	    overflow: hidden;
	}

	footer li 
	{
	    float: center;
	    color:rgb(157,157,156);/* grey*/
		padding:5% 0 5% 0;
	}

	footer a 
	{
		text-decoration:none;
		color:rgb(157,157,156);/* grey*/
	}

	footer a:hover 
	{
		color: rgb(81,109,117); /* Color 6 - Blue */
	}

	footer img
	{
		width: 25%;
	    height: auto;
	}

	.bloc_footer
	{
		display:flex;
		flex-direction:column;
		justify-content: center;
		align-items:center;

		width:90%;
		text-align: center;
		padding: 3% 0 3% 0;
	}

	.bloc_footer:nth-child(1)
	{
		background-color:rgba(157,157,156,0.1);
		font-family: 'Josefin Sans', Arial, sans-serif;
		color: rgb(81,109,117); /* Color 6 - Blue */
		font-size: 1.2em;
	}

	.bloc_footer:nth-child(2)
	{
		padding: 10% 0 3% 0;
	}

	.bloc_footer:nth-child(3), .bloc_footer:nth-child(4)
	{
		display:flex;
		flex-direction:row;
		justify-content: center;
		align-items:center;
	}

	.sep
	{
		display:none;
	}

	/*.footer_sup
	{		
		display:flex;
		flex-direction:column;
		justify-content: space-around;
		align-items:center;
	}

	.footer_sup:nth-child(1)
	{
		margin:10% 0 5% 0;
		width:80%;
	}

	.footer_sup:nth-child(2)
	{
		margin:5% 0 10% 0;
		width:100%;
	}

	.footer_sup_ul
	{
		list-style-type: none;
		text-align: center;
		margin: 0;
		padding: 0;
		width:100%;

		display:flex;
		flex-direction:column;
		justify-content:space-around;
		align-items:center;
	}

	.footer_sup_li
	{
		width:80%;
		padding:3% 0 3% 0;
		border:solid;

		text-decoration: none;
		color:white;
		background-color: rgba(157, 132, 102,1); Background - Yellow
		border: solid rgb(157, 132, 102) 2px;
	}

	.footer_sup_li:nth-child(2)
	{
		margin:5% 0 5% 0;
	}

	.footer_sup_button
	{
		text-decoration: none;
		color:inherit;
		cursor: pointer;
		background-color: inherit; Background - Yellow
	}

	.footer_sup_li:hover
	{
		color:rgb(157, 132, 102); Color 2 - Nav - Yellow
		background-color: rgba(255,255,255,1); /* Background 1 - White
	}
	*/


	.footer_social_networks
	{
		width:90%;

		display:flex;
		flex-direction:row;
		justify-content:space-around;
		align-items:center;
	}

	.footer_flags
	{
		width:90%;

		display:flex;
		flex-direction:row;
		justify-content:space-around;
		align-items:center;
	}

	#button_scroll
	{
		color: rgb(81,109,117); /* Color 6 - Blue */
		cursor: pointer;
		background-color: rgba(157, 132, 102,0); /* Background - Transparent */
		border: solid rgb(81,109,117) 2px; /* Border - Blue */
		border-radius: 2px;
		padding:5% 5% 5% 5%;
		width:170px;
		height:50px;
	}

	#button_scroll:hover
	{
		color: white;
		background-color: rgb(81,109,117); /* Background - Blue */
	}

	.bloc_footer:nth-child(7)
	{
		font-style:italic;
	}

}

/* For desktop: ----------------------------- */
@media only screen and (min-width: 1100px) {

	/* Body & HTML */
	body, html
	{
		height: 100%;
		margin: 0;
	}

	body
	{
		font-family: Georgia, Arial, sans-serif; /* Font 1 - Text */
		color:rgb(157,157,156); /* Color 4 - Text - Light Grey */
		font-size: 0.9em;		
	}

	/* Slideshow Container */
	.slideshow_container
	{
		/* Full height */
		height: 100%;

		/* Center and scale the image nicely*/
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;

		display:flex;
		flex-direction: column;
		justify-content: top;
		align-items: center;
	}

	/* Header */
	#header_responsive
	{
		display: none;
	}

	header
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding:2% 0 2% 0;
	}

	.bloc_header img
	{
		display: block;
		margin: auto;
	    height: auto;
	    width: 30%;
	}

	/* Nav */
	.nav_2
	{
		display:none;
	}

	.container_nav
	{
		display:flex;
		flex-direction:row;
		justify-content:center;
		align-items:center;
  		width: 100%;
	}

	.bloc_nav
	{
		display:flex;
		flex-direction:row;
		justify-content:center;
		align-items:center;
	}

	nav ul 
	{
	    list-style-type: none;
	    margin: 0;
	    padding: 0;
	    overflow: hidden;
	}

	nav li 
	{
	    float: left;
	}

	nav a 
	{
		text-decoration:none;
		font-size: 1.1em;
	}

	nav a:hover
	{
		color: rgb(81,109,117); /* Color 6 - Blue */
		background-color: rgb(255,255,255); /* Background 1 - White */
	}

	nav li a, .dropbtn 
	{
	    display: inline-block;
	    text-align: center;
	    padding: 15px 30px;
	    text-decoration: none;
	    color: rgb(255,255,255); /* Color 5 - White */
	}

	li.dropdown 
	{
	    display: inline-block;
	}

	.dropdown-content 
	{
	    display: none;
	    position: absolute;
	    background-color: rgb(5,5,5);
	    min-width: 160px;
	    box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.2);
	}

	.dropdown-content a 
	{
		color: rgb(81,109,117); /* Color 6 - Blue */
		padding: 10px 15px;
		text-decoration: none;
		display: block;
		text-align: left;
	}

	.dropdown-content a:hover
	{
		background-color: rgb(20,20,20); /* Background Nav Content Hover*/
		color: rgb(81,109,117); /* Color 6 - Blue */
	}

	.dropdown:hover .dropdown-content
	{
	    display: block;
	}

	/* Links Slideshow */
	.links_container
	{
		width:90%;
		flex:1;

		display:flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.links_banner
	{
		width:30%;
		height:30%;
		margin: 5% 0 0 0;
		text-align: center;
		color: rgb(255,255,255); /* Color 5 - White */
		/*border: solid rgb(157, 132, 102) 2px;*/

		display:flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	/* Style the buttons inside the tab */
	.links_button
	{
		padding:10px 10px 10px 10px;
		margin: 0 0 10px 0;
		background-color: rgb(81,109,117); /* Background - Blue */
		border-radius: 2px;
		border: none;
		outline: none;
		cursor: pointer;
		font-family: Georgia, Arial, sans-serif; /* Font 1 - Text */
		color: rgb(255,255,255); /* Color 5 - White */
	}

	.links_button a
	{
		text-decoration: none;
		font-family: Georgia, Arial, sans-serif; /* Font 1 - Text */
		color: rgb(255,255,255); /* Color 5 - White */
	}

	/* Change background color of button on hover */
	.links_button:hover
	{
		background-color: rgba(255,255,255,1); /* Background 1 - White */
		color: rgb(81,109,117); /* Color 6 - Blue */
	}

	.links_button a:hover
	{
		background-color: rgba(255,255,255,1); /* Background 1 - White */
		color: rgb(81,109,117); /* Color 6 - Blue */
	}

	/* Transition
	.links_banner:nth-child(1)
	{
		transition: transform 2s ease;
	}

	.links_banner:nth-child(1):hover
	{
		transform: translateX(200px);
	}*/

	/* Section */

	.main_title
	{
		color: rgb(81,109,117); /* Color 6 - Blue */
	    font: 40px/1.3 'Playfair Display', Georgia, serif;
	    font-weight: 400;
	}

	.title
	{
		color: rgb(81,109,117); /* Color 6 - Blue */
	}

	.sub_title
	{
		color: rgb(29,30,28); /* Color 3 - Text - Dark Grey */
	}

	div.paragraphe_description
	{
		line-height: 200%;
		text-align: justify;
	}

	/* Footer */

	footer
	{
		display:flex;
		flex-direction:column;
		justify-content: space-around;
		align-items:center;
		text-align: center;
		color:rgb(157,157,156); /* Color 4 - Text - Light Grey */
	}

	footer ul 
	{
	    list-style-type: none;
	    margin: 0;
	    padding: 0;
	    overflow: hidden;
	}

	footer li 
	{
	    float: left;
	    color:rgb(157,157,156); /* Color 4 - Text - Light Grey */
		padding: 5px 5px;
	}

	footer a 
	{
		text-decoration:none;
		color:rgb(157,157,156); /* Color 4 - Text - Light Grey */
	}

	footer a:hover 
	{
		color: rgb(81,109,117); /* Color 6 - Blue */
	}

	.bloc_footer
	{
		display:flex;
		flex-direction:row;
		justify-content:center;
		align-items:center;

		width:100%;
		text-align: center;
		padding:3% 0 0 0;
	}

	.bloc_footer:nth-child(1)
	{
		background-color:rgba(157,157,156,0.1); /* Background 2 - Container - Transparent Light Grey */
		color: rgb(81,109,117); /* Color 6 - Blue */
		padding:3% 0 3% 0;

		display:flex;
		flex-direction:column;
		justify-content: center;
		align-items:center;
	}

	.footer_sup
	{
		width:90%;
		padding:1% 0 1% 0;
	}

	/*.footer_sup_ul
	{
		list-style-type: none;
		text-align: center;
		margin: 0;
		padding: 0;

		display:flex;
		flex-direction:row;
		justify-content:space-around;
		align-items:center;
	}

	.footer_sup_li
	{
		width:25%;
		padding:1% 0 1% 0;

		text-decoration: none;
		color:white;
		background-color: rgba(157, 132, 102,1); Background - Yellow
		border: solid rgb(157, 132, 102) 2px;
	}

	.footer_sup_button
	{
		text-decoration: none;
		color:inherit;
		cursor: pointer;
		background-color: inherit; Background - Yellow
	}

	.footer_sup_li:hover
	{
		color:rgb(157, 132, 102); Color 2 - Nav - Yellow
		background-color: rgba(255,255,255,1); Background 1 - White
	}
	*/


	.footer_social_networks
	{
		width:20%;

		display:flex;
		flex-direction:row;
		justify-content:space-around;
		align-items:center;
	}

	.footer_flags
	{
		width:25%;

		display:flex;
		flex-direction:row;
		justify-content:space-around;
		align-items:center;
	}

	.social_networks img
	{
		width:30%;
	    height:auto;
	}

	.flags img
	{
		width:40%;
	    height:auto;
	}

	.bloc_footer:nth-child(6)
	{
		padding:3% 0 0 0;
	}

	#button_scroll
	{
		color: rgb(81,109,117); /* Color 6 - Blue */
		cursor: pointer;
		background-color: rgba(157, 132, 102,0); /* Background - Transparent */
		border: solid rgb(81,109,117) 2px; /* Border - Blue */
		border-radius: 2px;
		padding:5% 5% 5% 5%;
		width:170px;
		height:50px;
	}

	#button_scroll:hover
	{
		color:white;
		background-color: rgb(81,109,117); /* Background - Blue */
	}

	.bloc_footer:nth-child(7)
	{
		font-style:italic;
		padding:2% 0 2% 0;
	}

}
