.top {
display:block;
position: fixed !important;
width:100%;
top: 0;
left:0;
height:6%;
background:black;
filter: alpha(opacity=60);
/* CSS3 standard */
opacity: 0.6;
z-index: 1;
}


/* DOTS Common styles and resets */

.dotstyle ul {
width:60%;
left:38.35%;
display: inline-block;
position: relative;
margin:1% auto;
padding: 0;
list-style: none;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.dotstyle li {
position: relative;
display: block;
float: left;
margin: 0 5% 0 0;
width: .8em;
height: .8em;
cursor: pointer;
}

.dotstyle li:last-child{
margin: 0;
}

.dotstyle li a {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.3);
text-indent: -999em; /* make the text accessible to screen readers */
cursor: pointer;
position: absolute;
}

.dotstyle li a:focus {

}

/* DOTS Individual styles and effects */

/* Hop */

.dotstyle-hop li a {
border: 2px solid rgba(255,255,255,.5);
background: transparent;
}

.dotstyle-hop li a::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
z-index:10000;
left: 0;
border-radius: 50%;
visibility: hidden;
background: #fff;
opacity: 0;
-webkit-transform: rotate(-100deg);
transform: rotate(-100deg);
-webkit-transform-origin: -200% 50%;
transform-origin: -200% 50%;
-webkit-transition: -webkit-transform 0.3s ease 0.3s, opacity 0.3s ease, visibility 0s 0.3s ease;
transition: transform 0.3s ease 0.3s, opacity 0.3s ease, visibility 0s 0.3s ease;
}

.dotstyle-hop li a:focus {
background: rgba(255, 255, 255, 0.2);
}

.dotstyle-hop li.current-from-right a::after {
-webkit-transition: none;
transition: none;
-webkit-transform: rotate(100deg);
transform: rotate(100deg);
-webkit-transform-origin: 300% 50%;
transform-origin: 300% 50%;
}

.dotstyle-hop li.current a::after {
visibility: visible;
opacity: 0.5;
content: '';
color:#fff;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
transition: transform 0.3s ease, opacity 0.3s ease;
}

.dotstyle-hop li  p{
visibility:hidden;
}

.dotstyle-hop li:hover p{
visibility:visible;
display:block;
position:relative;
z-index:10000;
width:200px;
text-align:left;
top:0;
left:0;
margin-top:3em;
margin-left:0;
font-size:.7rem;
line-height:1em;
color:rgba(192,79,4,1);
text-shadow:1px 1px 1px #000;
}

li span{
font-size:.6rem;
}

/* WB BULLET*/


.retour-r a {
display:block;
height:30px;
position: fixed;
font-size:.8em;
font-weight:normal;
top:1.5%;
right: 50px;
margin: 0;
color:rgba(255,255,255,.5);
text-align:left;
z-index: 100;
}

.retour-r a:hover { 
color:rgba(255,255,255,.8);
}