body
{
    background-color: #05aff2;
    font-family: verdana;
}

/* header */
header
{
    background: url(../image/header/entete2.jpg) no-repeat;   
}
nav
{
    border-top: solid #0442bf 0.2em;
    background-color: #0442bf;  
    padding-bottom: 0.2em;  
    padding-top: 0.3em;
}
#bloc_page
{
    width: 70em;
    margin: auto;
    background-color: #05aff2;
    border: solid #ffffff 0.2em;
}
#logo
{
    display: flex;
    justify-content: flex-end;
}

/* section */
section
{
    background-color: #05aff2;
    border-top: solid #05aff2 0.2em;
}
p
{
    word-wrap: break-word;
}
.navigation     
{
    display: flex;
    justify-content: space-around;
    padding: 0.2em;
}
article
{
    margin-bottom: 0.2em;
    padding: 5em;
}

.bold
{
    font-weight: bold;
    color: #185073;
}
.attention
{
    color: #DBA55F;
    font-weight: bold;
}
figure
{
    position: relative;
    text-align: center;
}
/* footer */
footer
{
    background-color: #05aff2;
    padding-bottom: 0.2em;
    padding-top: 0.2em;
    display: flex;
    justify-content: center;
    margin-top: 0.4em;
    border-top: solid #0442bf 0.2em;
}
.link
{
    color: #DBA55F;
    margin: auto;
    text-align: center;
}
.copyright
{
    color: #222558;
}
.voyage
{
    display: flex;
}
.route66 
{
    background-color: #ffffff;
    margin: auto;
    width: 12.5em;
    height: 19em;
    border: solid #222558 0.2em;
    border-radius: 1em;
}
a
{
    text-decoration: none;
    font-weight: bold;
    color: #ffffff;
}
h4
{
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
}
h3
{
    color: #0442bf;
}
h1
{
    font-family: Arial Black;
    font-size: 2em;
    color: #0442bf;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}
.roadtrip
{
    color: #ffffff;
}
.voyageurs, .pictures 
{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: stretch; 
}
.space
{
    margin-top: 1.3em;
}
.step
{
   display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: stretch; 
}
.stage
{
    display: flex;
    justify-content: space-around;
    border: solid #ffffff;
    padding: 0.5em;
}
em
{
    color: #185073;
    font-style: italic;
    font-weight: bold;
}
.roadtrippin
{
    border: solid black 0.2em;
    padding: 0.4em;
}
#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:25em;
}
/* background des liens menus */
#menu-nav li:first-child{
background-color: #d9042b;
}
#menu-nav li:nth-child(2){
background-color: #d9042b;
}
#menu-nav li:nth-child(3){
background-color: #d9042b;
}
#menu-nav li:nth-child(4){
background-color: #d9042b;
}
#menu-nav li:last-child{
background-color: #d9042b;
}
/* background des liens sous menus */
#menu-nav li:first-child li{
background:#ffffff;
}
#menu-nav li:nth-child(2) li{
background:#ffffff;
}
#menu-nav li:nth-child(3) li{
background:#ffffff;
}
#menu-nav li:nth-child(4) li{
background:#ffffff;
}
#menu-nav li:last-child li{
background:#ffffff;
}
/* background des liens menus et sous menus au survol */
#menu-nav li:first-child:hover, #menu-nav li:first-child li:hover{
background:#f25c78;
}
#menu-nav li:nth-child(2):hover, #menu-nav li:nth-child(2) li:hover{
background:#f25c78;
}
#menu-nav li:nth-child(3):hover, #menu-nav li:nth-child(3) li:hover{
background:#f25c78;
}
#menu-nav li:nth-child(4):hover, #menu-nav li:nth-child(4) li:hover{
background:#f25c78;
}
#menu-nav li:last-child:hover, #menu-nav li:last-child li:hover{
background:#f25c78;
}
/* les a href */
#menu-nav a{
text-decoration:none;
display:block;
padding: 0.5em 2em;
color:#fff;
font-family:arial;
}
#menu-nav ul a{
padding:0.5em 0;
}
#menu-nav li:hover li a{
color:#000;
text-transform:inherit;
}
#menu-nav li:hover a, #menu-nav li li:hover a{
color:#000;
}

/* epingle etapes */
#tulsa
{
    position: absolute;
    top: 4.5em;
    right: 11.2em;
}
#okc
{
    position: absolute;
    top: 9.37em;
    right: 20em;
}
#elreno
{
    position: absolute;
    top: 145px;
    right: 403px;
}
#clinton
{
    position: absolute;
    top: 145px;
    right: 495px;
}

#amarillo
{
    position: absolute;
    top: 10.3em;
    right: 35.35em;
}

#santafe
{
position: absolute;
    top: 8.33em;
    right: 26.43em;
}
#gallup
{
    position: absolute;
    top: 9.5em;
    right: 42.36em;
}
#holbrook
{
position: absolute;
    top: 17.1em;
    right: 17.2em;
}
#chinle
{
position: absolute;
    top: 8.8em;
    right: 14em;
}
#pageaz
{
position: absolute;
    top: 2.9em;
    right: 24.6em;
}
#williams
{
position: absolute;
    top: 14.68em;
    right: 28.8em;
}
#kingman
{
   position: absolute;
    top: 15.1em;
    right: 39.35em; 
}
#fourcorner
{
  position: absolute;
    top: 18.4em;
    right: 25em;  
}
#monvalley
{
position: absolute;
    top: 21em;
    right: 9em; 
}
#torrey
{
position: absolute;
    top: 2.5em;
    right: 20.5em; 
}
#brycecanyon
{
   position: absolute;
    top: 11.35em;
    right: 31.57em;  
}
#lasvegas
{
    position: absolute;
    top: 6em;
    right: 34.1em; 
}
#deathvalley
{
position: absolute;
    top: 5em;
    right: 22.5em;
}
#barstow
{
position: absolute;
    top: 15.6em;
    right: 22.55em;
}
#losangeles
{
    position: absolute;
    top: 21.3em;
    right: 29.35em;
}
#fastfurious
{
    position: absolute;
    top: 19em;
    right: 4.8em;
}
#universalstudio
{
    position: absolute;
    top: 2.5em;
    right: 35.6em;
}
#santamonica
{
    position: absolute;
    top: 15.9em;
    right: 49.3em;
}
#downtown
{
    position: absolute;
    top: 12.5em;
    right: 26.5em;
}
/* */
.article-content {
  border: 0.1em solid #222558;
  min-width: 11.25em; 
  max-width: 11.25em; 
  padding: 0.1em;
  border-radius: 1em;
}
.ville
{
    display: flex;
    justify-content: space-around;
    height: 17em;
}
.img-article
{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-content: flex-start;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.img-rdt
{
   max-height: 10em; 
}
.img-petite
{
   max-width: 9.4em;
   max-height: 9.4em;
   border-radius: 1em;
}
/* gallery */
aside
{
    display: flex;
    justify-content: space-around;
    background-color: #222558;
    padding: 1em;
    align-items: center;
}
.icon
{
    max-width: 7.5em;
    max-height: 7.5em;
}
.imggauche
{
    float: left;
    max-width: 7.5em;
    max-height: 7.5em;
    margin-right: 0.5em;
}
.imggauche:active
{
    max-width: 59em;
    max-height: 59em;
}
.imgdroite
{
    float: right;
    max-width: 7.5em;
    max-height: 7.5em;
    margin-left: 0.5em;
}
.imgdroite:active
{
    max-width: 59em;
    max-height: 59em;
}
.finfloat
{
    clear: both;
}
.bild
{
    background-color: #4e53a7;
}
.bildslide
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 1em;
}
.slide
{
    background-color: #222558;
    border: solid #dba55f 0.1em;
    padding: 0.5em;
    margin: 0.5em;
    align-items: center;
}
.iconslide
{
    max-width: 9em;
    max-height: 9em;
    align-items: center;
    text-align: center;
}
.day
{
    color: #6cd8d8;
    text-shadow: 0.1em 0.1em 0.1em black;
}
.title-step
{
    background-color: #185073;
    border: solid #dba55f 0.1em;
    padding: 0.5em;
    text-align: center;
}
.arrow
{
    display: flex;
    justify-content: space-between; 
    align-items: center;   
}
.linkhotel, .linktransport, .linkactivity, .linkairport, .linkorganisation
{
    background-color: #222558;
    padding: 0.2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.linktitle, .linkgroup
{
    background-color: #222558;
}
/* cursor */
.mouse
{
    cursor: not-allowed;
}
.zoom
{
    cursor: zoom-in;
}
.fourjuly
{
    color: darkblue;
    background-color: red;
    text-align: center;
    border: solid darkblue;
}    
.foot
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 5px;
}
.copyright
{
    color: #222558;
   
}
.social
{
    margin-left: 20px; 
}