body
{
    background-color: #619BC0;
    font-family: verdana;
}

/* === 
header
=== */

header
{
    background: url(../image/header/entete2.jpg) no-repeat;   
}
nav
{
    border-top: solid #DBA55F 3px;
    background-color: #222558;  
    padding-bottom: 3px;  
    padding-top: 3px;
}
#bloc_page
{
    width: 1120px;
    margin: auto;
    background-color: #ffffff;
}

#logo
{
    display: flex;
    justify-content: flex-end;
}

/* section */
section
{
    background-color: #ffffff;
    border-top: solid #DBA55F 3px;
}
p
{
    word-wrap: break-word;
}
.navigation     
{
    display: flex;
    justify-content: space-around;
    padding: 3px;
}
article
{
    margin-bottom: 3px;
    padding: 80px;
}

.bold
{
    font-weight: bold;
    color: #185073;
}
.attention
{
    color: #DBA55F;
    font-weight: bold;
}
figure
{
    position: relative;
    text-align: center;
}
/* footer */
footer
{
    background-color: #ffffff;
    padding-bottom: 3px;
    padding-top: 3px;
    display: flex;
    justify-content: center;
    margin-top: 6px;
    border-top: solid #DBA55F 3px;
}
.link
{
    color: #DBA55F;
    margin: auto;
    text-align: center;
}

.voyage
{
    display: flex;
}
.route66 
{
    background-color: #ffffff;
    margin: auto;
    width: 200px;
    height: 304px;
    border: solid #222558 3px;
    border-radius: 15px;
}
a
{
    text-decoration: none;
    font-weight: bold;
    color: #4E53A7;
}
h4
{
    text-align: center;
    text-transform: uppercase;
}
h1
{
    font-family: Arial Black;
    font-size: 30px;
    color: #619BC0;
    text-transform: uppercase;
    text-align: center;
    margin-top: 3px;
    margin-bottom: 3px;
}
h5
{
    font-weight: bold;
    color: #6cd8d8;
}
.roadtrip
{
    color: #ffffff;
}
.voyageurs, .pictures 
{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: stretch; 
}
.space
{
    margin-top: 20px;
}
.step
{
   display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: stretch; 
}
.stage
{
    display: flex;
    justify-content: space-around;
    border: solid #ffffff;
    padding: 8px;
}
em
{
    color: #185073;
    font-style: italic;
    font-weight: bold;
}
.roadtrippin
{
    border: solid black 3px;
    padding: 6px;
}
#menu-nav, #menu-nav ul{
padding:0;   
list-style:none;
text-align:center;
}
#menu-nav li{
display:inline-block;
position:relative;
}
#menu-nav ul li{
display:inherit;
border-radius:0;
}
#menu-nav ul li:hover{
border-radius:0;
}
#menu-nav ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-nav li:hover ul{
max-height:400px;
}
/* background des liens menus */
#menu-nav li:first-child{
background-color: #4e53a7;
}
#menu-nav li:nth-child(2){
background-color: #4e53a7;
}
#menu-nav li:nth-child(3){
background-color: #4e53a7;
}
#menu-nav li:nth-child(4){
background-color: #4e53a7;
}
#menu-nav li:last-child{
background-color: #4e53a7;
}
/* background des liens sous menus */
#menu-nav li:first-child li{
background:#185073;
}
#menu-nav li:nth-child(2) li{
background:#185073;
}
#menu-nav li:nth-child(3) li{
background:#185073;
}
#menu-nav li:nth-child(4) li{
background:#185073;
}
#menu-nav li:last-child li{
background:#185073;
}
/* background des liens menus et sous menus au survol */
#menu-nav li:first-child:hover, #menu-nav li:first-child li:hover{
background:#619BC0;
}
#menu-nav li:nth-child(2):hover, #menu-nav li:nth-child(2) li:hover{
background:#619BC0;
}
#menu-nav li:nth-child(3):hover, #menu-nav li:nth-child(3) li:hover{
background:#619BC0;
}
#menu-nav li:nth-child(4):hover, #menu-nav li:nth-child(4) li:hover{
background:#619BC0;
}
#menu-nav li:last-child:hover, #menu-nav li:last-child li:hover{
background:#619BC0;
}
/* les a href */
#menu-nav a{
text-decoration:none;
display:block;
padding: 8px 32px;
color:#fff;
font-family:arial;
}
#menu-nav ul a{
padding:8px 0;
}
#menu-nav li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-nav li:hover a, #menu-nav li li:hover a{
color:#000;
}

/* epingle etapes */
#tulsa
{
    position: absolute;
    top: 72px;
    right: 179px;
}
#okc
{
    position: absolute;
    top: 149px;
    right: 320px;
}
#elreno
{
    position: absolute;
    top: 145px;
    right: 403px;
}
#clinton
{
    position: absolute;
    top: 145px;
    right: 495px;
}

#amarillo
{
    position: absolute;
    top: 164px;
    right: 565px;
}

#santafe
{
position: absolute;
    top: 133px;
    right: 422px;
}
#gallup
{
    position: absolute;
    top: 152px;
    right: 677px;
}
#holbrook
{
position: absolute;
    top: 273px;
    right: 275px;
}
#chinle
{
position: absolute;
    top: 140px;
    right: 224px;
}
#pageaz
{
position: absolute;
    top: 46px;
    right: 393px;
}
#williams
{
position: absolute;
    top: 236px;
    right: 460px;
}
#kingman
{
   position: absolute;
    top: 241px;
    right: 629px; 
}
#fourcorner
{
  position: absolute;
    top: 294px;
    right: 400px;  
}
#monvalley
{
position: absolute;
    top: 336px;
    right: 144px; 
}
#torrey
{
position: absolute;
    top: 40px;
    right: 328px; 
}
#brycecanyon
{
   position: absolute;
    top: 181px;
    right: 505px;  
}
#lasvegas
{
    position: absolute;
    top: 96px;
    right: 545px; 
}
#deathvalley
{
position: absolute;
    top: 80px;
    right: 360px;
}
#barstow
{
position: absolute;
    top: 249px;
    right: 360px;
}
#losangeles
{
    position: absolute;
    top: 340px;
    right: 469px;
}
#fastfurious
{
    position: absolute;
    top: 304px;
    right: 76px;
}
#universalstudio
{
    position: absolute;
    top: 40px;
    right: 569px;
}
#santamonica
{
    position: absolute;
    top: 254px;
    right: 788px;
}
#downtown
{
    position: absolute;
    top: 200px;
    right: 424px;
}
/* */
.article-content {
  border: 1px solid #222558;
  min-width: 180px; 
  max-width: 180px; 
  padding: 1px;
  border-radius: 16px;
}
.ville
{
    display: flex;
    justify-content: space-around;
    height: 272px;
}
.img-article
{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-content: flex-start;
    padding-top: 8px;
    padding-bottom: 8px;
}
.img-rdt
{
   max-height: 160px; 
}
.img-petite
{
   max-width: 150px;
   max-height: 150px;
   border-radius: 16px;
}
/* gallery */

.icon
{
    max-width: 120px;
    max-height: 120px;
}
.imggauche
{
    float: left;
    max-width: 120px;
    max-height: 120px;
    margin-right: 8px;
}
.imggauche:active
{
    max-width: 944px;
    max-height: 944px;
}
.imgdroite
{
    float: right;
    max-width: 120px;
    max-height: 120px;
    margin-left: 8px;
}
.imgdroite:active
{
    max-width: 944px;
    max-height: 944px;
}
.finfloat
{
    clear: both;
}
.bild
{
    background-color: #4e53a7;
}
.bildslide
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 16px;
}
.slide
{
    background-color: #222558;
    border: solid #dba55f 1px;
    padding: 8px;
    margin: 8px;
    align-items: center;
}
.iconslide
{
    max-width: 144px;
    max-height: 144px;
    align-items: center;
    text-align: center;
}
.day
{
    color: #6cd8d8;
    text-shadow: 1px 1px 1px black;
}
.title-step
{
    background-color: #185073;
    border: solid #dba55f 1px;
    padding: 8px;
    text-align: center;
}
.arrow
{
    display: flex;
    justify-content: space-between; 
    align-items: center;   
}
.linkhotel, .linktransport, .linkactivity, .linkairport, .linkorganisation
{
    background-color: #222558;
    padding: 3px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.linktitle, .linkgroup
{
    background-color: #222558;
}
/* =====
Start Cursor 
===== */
.mouse
{
    cursor: not-allowed;
}
.zoom
{
    cursor: zoom-in;
}
/* =====
end cursor 
===== */
.fourjuly
{
    color: darkblue;
    background-color: red;
    text-align: center;
    border: solid darkblue;
}
video
{
    justify-content: center;
    width: 499px;
    height: 299px;
}
.workzone
{
    text-align: center;
}

.tags-share {
  border-top: 1px solid #619bc0;
  border-bottom: 1px solid #619bc0;
  padding: 8px 0px 10px 0px;
}
.tags-share ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.tags-share ul li:first-child {
  color: #222558;
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 0.5px;
}
.tags-share ul li {
  display: inline-block;
  color: #222558;
}
.tags-share ul li a {
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 0.5px;
  color: #dba55f;
  text-decoration: none;
}
.tags-share .share {
  text-align: right;
}
.tags-share
{
    display: inline-block;
    flex-direction: row;
    width: 100%;
}
aside
{
    background-color: white;
    border-left: 1px solid #619bc0;
    padding: 10px 10px 10px 20px;
    margin-top: 80px;
    margin-right: 65px;
    min-width: 250px;
    max-height: 400px;
    font-size: 14px;  
}
#welcome
{
    display: flex;
}
.foot
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 5px;
}
.copyright
{
    color: #222558;
   
}
.social
{
    margin-left: 20px; 
}
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 600px;
  height: 450px;
  position: relative;
  margin: auto;
  padding-top: 10px;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

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

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: #dba55f;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}