@font-face{
	font-family: "Font1";
	src: url('Font1.ttf');
}


BODY {
	background-image: url(Img/Background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	font-family: 'Arial', Helvetica;
	font-size: 20px;
	margin: auto;
	padding: auto;
	text-align: center;
}

h1 {
	font-family: 'Font1';
	font-size: 30px;
	font-weight: normal;
	text-align: center;
	margin-top: 0px
}

.degrade {
    font-size: 50px;
    background: -webkit-gradient(linear, left top, left bottom, from(#2352B8), 
    to(#15CDE9));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.recherche {
	background-color: white;
	border-style: solid;
	border-width: 2px;
	border-color: white;
	border-radius: 5px;
	width: 100%;
	padding: auto;
}

nav { 
	width: 100%; 
	background-color: RGBa(252, 249, 214, 0.70);
	margin-top: -20px;
}

#wrapper {
	width:980px;
	margin: 0 auto 0 auto;
}

#main {
	float:right;
	width:75%;
	margin: 0 0 50px 0;
}

#sidebar {
	float:right;
	width:22%;
	margin-right:1%;
	margin-top:1em;
	border-radius: 8px;
	background-color: rgba(255,255,255,0.7);
}

#sidebar2 {
	float:right;
	width:22%;
	margin-right:1%;
	margin-top:1em;
	border-radius: 8px;
	background-color: rgba(255,255,255,0.7);
}

#sidebar3 {
	float:right;
	width:22%;
	margin-right:1%;
	margin-top:1em;
	border-radius: 8px;
	background-color: rgba(255,255,255,0.7);
}

footer {
	clear:both;
}

#wrapper>nav {
	padding:1em;
	border:1px solid black;
	margin-top:1em;
}

nav ul li {
	display:inline-block;
}

article {
	margin:2em;
	padding:1em;
	background: RGBa(255,255,255, 0.76);
	border-radius: 8px;
}

article h2 {
	margin-top: 1em;
}

article header, article footer {
	padding:1em;
	background:RGBa(252, 249, 214, 0.70);
}

.article5{
	margin:1em;
	padding:1em;
	background: RGBa(255,255,255, 0.76);
	border-radius: 8px;
}

.arrondie {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}

article, footer, header, aside, nav {
	position:relative;
}

span.elem {
	background:#c00;
	color:white;
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0.5em;
	z-index:100;
	opacity:0.5;
}

h2 {
	text-align: center;
}

nav > ul { 
	margin: 0px; 
	padding: 0px;
	text-align: center; 
} 

nav > ul::after { 
	content: ""; 
	display: block; 
	clear: both; 
} 

nav > ul > li { 
	display: inline-block; 
	position: relative; 
} 

nav > ul > li > a {
	display: inline-block;
	padding: 20px 30px; 
	color: black; 
} 

nav > ul > li:hover a { 
	padding: 15px 30px 20px 30px; 
} 

nav li {
	list-style-type: none;
	display: inline-block;
} 

.submenu { 
	display: none; 
} 
	
nav a {
	display: inline-block; 
	text-decoration: none;
} 

nav li:hover .submenu { 
	display: inline-block; 
	position: absolute; 
	top: 100%; 
	left: 0px; 
	padding: 0px; 
	z-index: 1000; 
}

{box-sizing:border-box}

.slideshow-container {
  max-width: 1300px;
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  	position:absolute;
	left:0; right:0; bottom: 5px;
	padding: 20px;
	margin:0;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
  
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  -webkit-transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 35%		{ left: -100% }
	45%, 55%		{ left: -200% }
	65%, 75%		{ left: -300% }
	85%, 95%		{ left: -400% }
}

.submenu li { 
	border-bottom: 1px solid #FFF;
} 

.submenu li a { 
	padding: 15px 30px;
	font-size: 20px;
	color: #222538;
	width: 270px;
} 

.menu-Accueil:hover {
	border-top: 5px solid #E7AC2B; 
	background-color: RGBa(231,172,43,0.15); 
} 

.menu-Articles:hover {
	border-top: 5px solid #D13784; 
	background-color: RGBa(209,55,132,0.15); 
} 

.menu-Voyages:hover { 
	border-top: 5px solid #0070bb; 
	background-color: RGBa(000,112,192,0.15); 
} 

.menu-Gastronomie:hover { 
	border-top: 5px solid #f1dc4f; 
	background-color: RGBa(241,211,79,0.15); 
} 

.menu-Conseils:hover { 
	border-top: 5px solid #e44d26; 
	background-color: RGBa(234, 35, 35, 0.15); 
} 

.menu-Contact:hover { 
	border-top: 5px solid #50C02E; 
	background-color: RGBa(80,192,46, 0.15); 
} 

.menu-Voyages .submenu { 
	background-color: RGBa(75,143,220, 0.15); 
}

.menu-Contact .submenu { 
	background-color: RGBa(80,192,46, 0.15); 
} 

.submenu li:hover a { 
	color: #EEE; 
	font-weight: bold; 
} 

.menu-Voyages .submenu li:hover { 
	background-color: RGB(22,68,119); 
}
.menu-Contact .submenu li:hover { 
	background-color: RGB(63,151,36); 
}

h6 {
	font-family: 'Arial', Helvetica;
	font-size: 18px;
}

.map {
	overflow: hidden;
}

.map_image {
	width: 70%;
	float: left;
	margin-left: 48px;
}

.map_image path {
	fill: #179DD3;
	stroke: #fff;
	stroke-width: 1px;
	-webkit-transition: fill 0.3s;
}

.map_image path:hover {
	fill: #81E7F3;
}

.map_list {
	float: right;
	width: 26%;
	font-size: 18px;
}

.map_list a {
	color: inherit;
	text-decoration: none;
	-webkit-transition: color 0.3s;
}

.map_image .is-active path {
	fill: #81E7F3;
}

.map_list a.is-active {
	color: #179DD3;
	font-weight: bold;
	text-decoration: underline;
}

.footer {
	text-align: center;
	display: block;
	background-color: RGBa(252, 249, 214, 0.70);
	width: auto;
}

.sticky-container{
    padding:0px;
    margin:0px;
    position:fixed;
    right:-130px;
    top:230px;
    width:210px;
    z-index: 1100;
}
.sticky li{
    list-style-type:none;
    background-color:#fff;
    color:#efefef;
    height:43px;
    padding:0px;
    margin:0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor:pointer;
}
.sticky li:hover{
    margin-left:-115px;
}
.sticky li img{
    float:left;
    margin:5px 4px;
    margin-right:5px;
}
.sticky li p{
	float: left;
    padding-top:5px;
    margin:0px;
    line-height:16px;
    font-size:11px;
}
.sticky li p a{
    text-decoration:none;
    color:#2C3539;
}
.sticky li p a:hover{
    text-decoration:underline;
}

*{
  box-sizing: border-box;
}

footer {
	text-align: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background-color: RGBa(252, 249, 214, 0.70);
}


.wrapper {
  display: inline-flex;
  margin: 10;
  padding: 10;
  font-size: 30px;
  align-items: center;
  justify-content: center;
  height: 12vh;
}

.fa {
  padding: 20px;
  width: 40px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.wrapper a:nth-child(1) {
  color: #4867AA;
  cursor: pointer;
  text-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 0.4);
  transition: all ease-in-out 150ms;
}

.wrapper a:nth-child(1):hover {
  margin-top: -10px;
  text-shadow: 0px 16px 10px rgba(0, 0, 0, 0.3);
  transform: translate(0, -8);
}

.wrapper a:nth-child(2) {
  color: #1DA1F2;
  cursor: pointer;
  text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.4);
  transition: all ease-in-out 150ms;
}

.wrapper a:nth-child(2):hover {
  margin-top: -10px;
  text-shadow: 0px 16px 10px rgba(0, 0, 0, 0.3);
  transform: translate(0, -8);
}

.wrapper a:nth-child(3) {
  color: #444;
  cursor: pointer;
  text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
  transition: all ease-in-out 150ms;
}

.wrapper a:nth-child(3):hover {
  margin-top: -10px;
  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
  transform: translate(0, -5);
}
.wrapper a:nth-child(4) {
  color: #0077B5;
  cursor: pointer;
  text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.4);
  transition: all ease-in-out 150ms;
}
.wrapper a:nth-child(4):hover {
  margin-top: -10px;
  text-shadow: 0px 16px 10px rgba(0, 0, 0, 0.3);
  transform: translate(0, -8);
}

.container {
	margin: auto;
	width: 70%;
  border-radius: 20px;
  background-color: #f2f2f2;
  padding: 20px;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

<!DOCTYPE html> 
<html lang="fr"> 
	<head> 
		<title>Ambio Cubano</title> 
		<meta charset="utf-8"/> 
		<link rel="stylesheet" href="Styletest.css"/>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<meta name="viewport" contents="width=device-width, initial-scale=1.0">
	</head> 
	
	<body> 
	 <header> 
      <H1 class="degrade"> Ambio Cubano </H1>
    </header>
    
		<nav> 
			<ul> 
				<li class="menu-Accueil"><a href="Test.html">Accueil</a>
				<li class="menu-Articles"><a href="Articles.html">Articles</a>
				<li class="menu-Voyages"><a href="Voyages.html">Voyages</a> 
					<ul class="submenu"> 
						<li><a href="La Havane.html">La Havane</a></li> 
						<li><a href="Cienfuegos.html">Cienfuegos</a></li> 
						<li><a href="Trinidad.html">Sancti Spiritus</a></li> 
						<li><a href="Vinales.html">Pinar del Rio</a></li> 
					</ul> 
				</li> 
				
				<li class="menu-Gastronomie"><a href="Gastronomie.html">Gastronomie</a></li> 
				
				<li class="menu-Conseils"><a href="Conseils.html">Conseils</a></li> 
				
				<li class="menu-Contact"><a href="Contact.html">Contact</a>
				<ul class="submenu"> 
						<li><a href="Qui-sommes-nous.html">Qui sommes-nous ?</a></li> 
					</ul> 
				</li> 
			</ul>
		</nav>
		<br>
		
		<section id="main">
			<article>
					<header>
							<h2>Gastronomie</h2>
								<h3>Quelques spécialités gastronomiques cubaine</h3>
					</header>
								<p align="justify">Une des choses à faire à Cuba est de déguster quelques 
								plats traditionnels de l’&icirc;le ! Certains plats 
								traditionnels sont à ne pas manquer. 
								La cuisine cubaine est élaborée avec certains ingrédients 
								typique. Nous retrouvons : les haricots noirs, le riz, 
								les épices et la viande. A noter que les Cubains aiment 
								assaisonner leur nourriture de « sofrito », une sauce 
								à base de tomates, ail, oignon, origan et poivre. 
								Un circuit à Cuba vous permettra de déguster les 
								spécialités locales de chacune de ces régions.</p>	
				</aside>
			</article>	
		
			<article>
				<header>
					<h2>Le « Picadillo »</h2>
				</header>
				
				
				<aside>
					<img src="Images/picadillo.jpg" width="80%" height="65%" alt="" 
					class="arrondie" style="float:left;margin:0 20px 20px 0;">
					<p  align="justify">Plat à base de viande de bœuf hachée revenue
					dans des oignons, de l’ail et des épices, accompagnée de riz blanc,
					de haricots noirs, et de bananes frites. Il est possible d’y ajouter 
					des poivrons, du vin et des raisins secs.</p>
				</aside>
			
				<footer>
					<p>Source : <a href="http://fr.wikipedia.org/wiki/Kiwi">Wikipedia</a></p>
				</footer>
			</article>
			
			<article>
					<header>
						<h2> La viande de crocodile</h2>
					</header>
					
				<aside>
					<img src="Images/crocodile.jpg" width="80%" height="65%" alt="" 
					class="arrondie" style="float:left;margin:0 20px 20px 0;">
					<p align="justify" >Peu commercialisée, les amateurs devront aller 
					jusqu’à Guamá ou Girón pour en trouver. Le goût serait assez similaire
					à celui du veau. Il peut se cuisiner avec une sauce à l’ananas épicée.
					</p>
				</aside>
			
			</article>
			
			<article>
					<header>
						<h2> Le Mojito</h2>
					</header>
			
			<aside><img src="Images/mojito.jpg" width="80%" height="65%" alt="" 
			class="arrondie" style="float:left;margin:0 20px 20px 0;"><p align="justify">
			En abondance. Le rhum reste à la base de la plupart des cocktails alcoolisés, 
			notamment du célèbre Mojito, ou du Cuba Libre (à base de rhum et de coca).</p>
			</aside>
			
			</article>	
	
			<article>
					<header>
						<h2>Moros y Cristianos</h2>
							<p align="justify">ce plat se compose de riz blanc et de haricots 
							noirs, dont les couleurs ont inspiré le nom de la recette puisqu’il 
							signifie « Maures et chrétiens ». Sa version aux haricots rouges
							et à la viande se nomme « congri », c’est le plat de base de la 
							cuisine cubaine. Il est surtout utilisé pour accompagner 
							les viandes.</p>
					</header>
			
			<aside><img src="Images/moros.jpg" width="60%" height="45%" alt="" 
			class="arrondie" style="float:left;margin:0 20px 20px 0;"><p align="justify">
			ce plat se compose de riz blanc et de haricots noirs, dont les couleurs ont 
			inspiré le nom de la recette puisqu’il signifie « Maures et chrétiens ». 
			Sa version aux haricots rouges et à la viande se nomme « congri », c’est le 
			plat de base de la cuisine cubaine. Il est surtout utilisé pour accompagner 
			les viandes.</p></aside>
			
			</article>
			
			<article>
					<header>
						<h2>Papas Rellenas</h2>
					</header>
			
			<aside><img src="Images/papas.jpg" width="465px" height="365px" alt="" 
			class="arrondie" style="float:left;margin:0 20px 20px 0;"><p align="justify">
			Ces amuse-bouches sont réalisés à partir de purée de pommes de terre, roulée 
			en petite boule dans l’œuf et la chapelure. Ils sont parfois fourrés à la 
			viande et aux poivrons, ainsi qu’à l’ail et aux oignons. On en trouve sur la 
			plupart des tables cubaines, à l’heure du repas.</p></aside>
			</article>
		
	</section>

	<aside id="sidebar">
			<h2>Bienvenidos !</h2>
			<p>Bienvenue sur notre blog Cubano</p>
	</aside>
	
	<aside id="sidebar2">
		
			<h3>Navigation</h3>
			
			<p>N'hésitez pas à</p>
			<p>nous contacter :</p>
				<ul>
					<li><a href="Contact.html">Contact</a></li>
					<li><a href="Qui-sommes-nous.html">Qui sommes-nous ?</a></li>
				</ul>
		</div>
	</aside>
	
	<aside id="sidebar3">
		<div class="sticky-container">
			<ul class="sticky">
				<li>
					<img src="Images/facebook-circle.png" width="32" height="32">
					<p><a href="https://www.facebook.com" target="_blank">Like Us on<br>Facebook</a></p>
				</li>
				<li>
					<img src="Images/twitter.png" width="35" height="32">
					<p><a href="https://twitter.com" target="_blank">Follow Us on<br>Twitter</a></p>
				</li>
				<li>
					<img src="Images/linkedin.png" width="32" height="32">
					<p><a href="https://www.linkedin.com" target="_blank">Follow Us on<br>LinkedIn</a></p>
				</li>
				<li>
					<img src="Images/instagram.png" width="32" height="32">
					<p><a href="http://www.instagram.com" target="_blank">Subscribe on<br>Instagram</a></p>
				</li>
    </ul>
</div>
</aside>

 </body> 
</html>