/** ******* **/
/** ******* **/
/** PAGES COMMUNES **/
/** ******* **/
/** ******* **/
@font-face {
    font-family: 'paintypaint1';
    src: url('../fonts/painp___-webfont.eot');
    src: url('../fonts/painp___-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/painp___-webfont.woff2') format('woff2'),
         url('../fonts/painp___-webfont.woff') format('woff'),
         url('../fonts/painp___-webfont.ttf') format('truetype'),
         url('../fonts/painp___-webfont.svg#paintypaint1') format('svg');
    font-weight: normal;
    font-style: normal;

}

*{
	padding: 0;
	margin: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
}


ul{
    list-style-type: none;
}

body{
    font-family: 'McLaren', cursive;
    overflow-x: hidden;
    overflow-y: hidden;
}

/** D3 JS **/
		circle {
		    opacity: .5;
	    }
	    
	    circle:hover
	    {
		    cursor:pointer;
	    }
	    
	    #echelle {
		    height:453px;
		    background:url("../img/bgk-echelle.jpg") no-repeat #F8E1C4;
		        box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.19);
				-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
				-webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
				opacity: 1;
				position: fixed;
				border: 10px solid #f9f0e6;
				right: 0;
				top: 4px;
				transition: all 0.25s ease-in-out 0s;
				width: 100px;
				z-index: 99;	
				visibility: hidden;

	    }
	    
	    svg
	    {
		    margin: 12.5px 0 0 10px;
		    width:70px;
		    height:420px;
		    position:absolute;
		    z-index:20;
	    }
	    
	    #background
	    {
		    margin: 12.5px 0 0 10px;
		    width:70px;
		    height:420px;
		    position:absolute;
		    z-index:999;
	    }
	    
	    .level-1 {
		    width:70px;
		    height:120px;
	    }
	    
	   .level-2 {
		    width:70px;
		    height:90px;
	    }
	    
	    .level-3 {
		    width:70px;
		    height:72px;
	    }
	    
	    .level-4 {
		    width:70px;
		    height:110px;
	    }
	    
	    .level-5 {
		    width:70px;
		    height:22px;
	    }
	    
/** **/

/* OVERLAY ACCUEIL */
/* OVERLAY ACCUEIL */
.wallpaper-loading {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: visible;
	top: 0;
	color: #b79982;
	left: 0;
	z-index: 99999;
	background: url("../img/wallpaper-phobies-2500.gif") no-repeat center fixed;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover; /* version standardisée */
	opacity: 1;
	-webkit-transition: all 0s;
	-moz-transition: all 0s;
	transition: all 0s;
}

.overlay-gris{
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: visible;
	top: 0;
	left: 0;
	z-index: 8888;
	background: url("../img/overlay-gris.png") no-repeat center fixed;
	-webkit-background-size: cover;
	background-size: cover;
}

#contenu-consignes{
	width: 980px;
	margin: 0 auto;
	z-index: 9999;	
}

#consigne-01{
	z-index: 9999;	
	position: absolute;
	top: 80px;
	opacity: 0;
	text-align: center;
}

#consigne-01 > div{
	display:inline-block;
	position: absolute;
	color:#111;
	padding: 20px;
	width: 325px;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#consigne-01 .callout{
	position:absolute;
	top:-23px;
	border:0;
	left:30px;
	width: 17px;
	z-index:9999;
	-ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);	
}

#consigne-02{
	z-index: 9999;	
	position: absolute;
	top: 80px;
	margin-left: 510px;
	opacity: 0;
	text-align: center;
}

#consigne-02 > div{
	display:inline-block;
	position: absolute;
	color:#111;
	padding: 20px;
	width: 325px;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#consigne-02 .callout{
	position:absolute;
	top:-23px;
	border:0;
	left:240px;
	width: 17px;
	z-index:9999;
	-ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);	
}

#consigne-03{
	z-index: 9999;	
	position: absolute;
	top: 190px;
	margin-left: 580px;
	opacity: 0;
	text-align: center;
}

#consigne-03 > div{
	display:inline-block;
	position: absolute;
	color:#111;
	padding: 20px;
	width: 325px;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#consigne-03 .callout{
	position:absolute;
	top:29px;
	border:0;
	left:325px;
	width: 17px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

.bt-compris-01, .bt-compris-02, .bt-compris-03{
	background:url("../img/arrow-consignes.png") no-repeat #d08920 right center;
	background-size: 15px;
    color: #fff;
    margin: 13px auto 0;
    padding: 5px;
    text-align: center;
    width: 140px;	
    cursor: pointer;
    -webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.bt-compris-01:hover, .bt-compris-02:hover, .bt-compris-03:hover{
	background-color: #BA9974;
}

.overlay-responsive{
	display: none;
}

#content-nav{
	width: 900px;
	margin: 0 auto;	
	visibility: hidden;
}

nav{
	width: 1100px;
	background-color: #F9F0E5;	
	height: 57px;
	z-index: 6;
	padding-top: 3px;
	position: fixed;
	top: 0;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#content-nav div{
	display: inline-block;
	cursor: pointer;
	font-size: 10px;
	width: 57px;
	text-align: center;
	padding-top: 30px;
	letter-spacing: -0.5px;
}

#content-nav #all-phobies{
	background:url("../img/nav-picto-01.png") no-repeat;
	background-size: 56px;
	background-position: 50% 50%;
}

#content-nav #elements-naturels{
	background:url("../img/nav-picto-02.png") no-repeat;
	background-size: 56px;
	background-position: 50% 50%;
}

#content-nav #social{
	background:url("../img/nav-picto-03.png") no-repeat;
	background-size: 56px;
	background-position: 50% 50%;
}

#content-nav #gustatifs{
	background:url("../img/nav-picto-04.png") no-repeat;
	background-size: 56px;
	background-position: 50% 50%;
}

#content-nav #inclassable{
	background:url("../img/nav-picto-05.png") no-repeat;
	background-size: 56px;
	background-position: 50% 50%;
}

#content-nav #animal{
	background:url("../img/nav-picto-06.png") no-repeat;
	background-size: 56px;
	background-position: 50% 50%;
}

#content-nav #transport{
	background:url("../img/nav-picto-07.png") no-repeat;
	background-size: 56px;
	background-position: 50% 50%;
	padding-right: 5px;
}

#content-nav #vertige{
	background:url("../img/nav-picto-08.png") no-repeat;
	background-size: 56px;
	background-position: 50% 50%;
}

#content-nav #mythe-religion{
	background:url("../img/nav-picto-09.png") no-repeat;
	background-size: 56px;
	background-position: 50% 50%;
	padding-right: 3px;
}

#content-nav #sante{
	background:url("../img/nav-picto-10.png") no-repeat;
	background-size: 56px;
	background-position: 50% 50%;
}

#content-nav #obscurite{
	background:url("../img/nav-picto-11.png") no-repeat;
	background-size: 56px;
	background-position: 50% 50%;
	padding-right: 3px;
}

#content-nav #objet{
	background:url("../img/nav-picto-12.png") no-repeat;
	background-size: 56px;
	background-position: 50% 50%;
}

#logo-montagne{
	background: url("../img/logo-montagne.png") no-repeat;
	background-size: 120px;
	width: 120px;
	height: 151px;
	position: absolute;
	z-index: 2;
	top: 10px;
	left: 35px;
}

@-webkit-keyframes hair-logo-move {
    0% {-webkit-transform: translate(0px, 2px) rotate(0deg);}
    50% {-webkit-transform: translate(2px, 2px) rotate(0deg);}
    100% {-webkit-transform: translate(0px, 2px) rotate(0deg);} 
}

@keyframes hair-logo-move {
    0% {transform: translate(0px, 2px) rotate(0deg);}
    50% {transform: translate(2px, 0px) rotate(0deg);}
    100% {transform: translate(0px, 2px) rotate(0deg);} 
}

.hair-montagne{
	-webkit-animation: hair-logo-move 0.1625s infinite linear;
    animation: hair-logo-move 0.1625s infinite linear;
    z-index: 1;
    opacity: 0;
    margin: 40px auto 0!important;
}

#page{
    margin: 0 auto;
    width: 100%;
    min-height: 25668px;
}

/* SEARCH BOX*/
#searchfield {
	margin-top: -48px; 
	position: fixed;
	margin-left: 753px;
	z-index: 6;
}

#searchfield form {
  display: inline-block;
  background: #D6CDC2;
  padding: 0;
  margin: 0;
  margin: 32px 0 0;
  z-index: 5;
}

#searchfield form .biginput {
  width: 236px;
  z-index: 5;
  font-family: 'McLaren', cursive;
  height: 30px;
  padding: 0 10px 0 10px;
  background-color: #D6CDC2;
  border: none;
  color: #fff;
  font-weight:normal;
  font-size: 13px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

#searchfield form .biginput:focus {
  color: #858585;
}

@-webkit-keyframes rumble-autocomplete {
    0% {-webkit-transform: rotate(0deg);}
    25% {-webkit-transform: translate(2px, 2px) rotate(0deg);}
    50% {-webkit-transform: translate(-2px, -2px) rotate(0deg);}
    75% {-webkit-transform: translate(2px, 2px) rotate(0deg);}
    100% {-webkit-transform: translate(-2px, -2px) rotate(0deg);} 
}

@keyframes rumble-autocomplete {
    0% {transform: rotate(0deg);}
    25% {transform: translate(2px, 2px) rotate(0deg);}
    50% {transform: translate(-2px, -2px) rotate(0deg);}
    75% {transform: translate(2px, 2px) rotate(0deg);}
    100% {transform: translate(-2px, -2px) rotate(0deg);} 
}

.autocomplete-rumble{
	-webkit-animation: rumble-autocomplete 0.1625s infinite linear;
    animation: rumble-autocomplete 0.1625s infinite linear;
    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;	
}

.autocomplete-suggestions {
	border: 1px solid #999;
	background: #fff;
	cursor:default;
	overflow: auto; 
}

.autocomplete-suggestion {
	padding: 10px 5px;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden; 
}

.autocomplete-selected {
	background: #f0f0f0;
}

.autocomplete-suggestions strong {
	font-weight: normal;
	 color: #CF7242;
}

.pixels{
    position: fixed;
    top: 0;
    right: 13px;
    z-index: 5;
    background-color: #FFF;
}

#top{
    text-align: center;
    z-index: 2;
    position: relative;
    top: 10px;
    visibility: hidden;
}

footer{
    position: absolute;
    top: 26067px;
    font-size: 11px;
    z-index: 3;	
    color: #7A695F;
    width: 100%;
    text-align: center;
    background-color: #211D18;
}

.blank{
	height: 20px;
}

.bt-share-facebook{
	color: #47639c;
    margin-left: -76px;
    margin-top: 137px;
    position: absolute;
}

.twitter-share-button{
	margin-left: -37px;
    margin-top: 109px;
    position: absolute;
}

footer p{
	text-align: justify;
	padding-top: 15px;
}

footer a{
	color: #CF7242;
	text-decoration: none;
	-moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

footer a:hover{
	color:#E7D7AF;
}

#copyright{
	display: table;
	width: 680px;
	text-align: center;
	margin: 0 auto;
	margin-top: 20px;
	height: 110px;
}

#copyright-title{
	background: url("../img/copyright-title.png") no-repeat;
	background-size: 648px;
	margin-bottom: 13px;
	width: 645px;
	height: 28px;
	text-align: center;	
}

#copyright a{
	display: inline-block;
	width: 140px;
	margin-left: 60px;
	height: 110px;
}

@-webkit-keyframes rumble-left {
    0% {-webkit-transform: rotate(0deg);}
    25% {-webkit-transform: translate(2px, 0px) rotate(-3deg);}
    50% {-webkit-transform: translate(0px, -2px) rotate(0deg);}
    75% {-webkit-transform: translate(-2px, 0px) rotate(3deg);}
    100% {-webkit-transform: translate(0px, 2px) rotate(0deg);} 
}

@keyframes rumble-left {
    0% {transform: rotate(0deg);}
    25% {transform: translate(2px, 0px) rotate(-3deg);}
    50% {transform: translate(0px, -2px) rotate(0deg);}
    75% {transform: translate(-2px, 0px) rotate(3deg);}
    100% {transform: translate(0px, 2px) rotate(0deg);} 
}

#left-copyright{
	background: url("../img/left-copyright.png") no-repeat;
	background-size: 70px;
	width: 70px;
	height: 90px;
	display: inline-block;
	margin-left: 60px!important;
	-webkit-animation: rumble-left 0.1625s infinite linear;
    animation: rumble-left 0.1625s infinite linear;
}

#left-copyright-name{
	background: url("../img/left-copyright-name.png") no-repeat;
	background-size: 70px;
	width: 70px;
	position: absolute;
	margin-left: 89px;
	margin-top: -36px;
	height: 30px;
}

@-webkit-keyframes rumble-middle {
    0% {-webkit-transform: rotate(0deg);}
    25% {-webkit-transform: translate(2px, 0px) rotate(2deg);}
    50% {-webkit-transform: translate(0px, -2px) rotate(0deg);}
    75% {-webkit-transform: translate(-2px, 0px) rotate(-2deg);}
    100% {-webkit-transform: translate(0px, 2px) rotate(0deg);} 
}

@keyframes rumble-middle {
    0% {transform: rotate(0deg);}
    25% {transform: translate(2px, 0px) rotate(2deg);}
    50% {transform: translate(0px, -2px) rotate(0deg);}
    75% {transform: translate(-2px, 0px) rotate(-2deg);}
    100% {transform: translate(0px, 2px) rotate(0deg);} 
}

#middle-copyright{
	background: url("../img/middle-copyright.png") no-repeat;
	background-size: 95px;
	width: 95px;
	height: 90px;
	display: inline-block;
	margin-left: 50px!important;
	margin-right: 30px;
	-webkit-animation: rumble-middle 0.1625s infinite linear;
    animation: rumble-middle 0.1625s infinite linear;
}

#middle-copyright-name{
	background: url("../img/middle-copyright-name.png") no-repeat;
	background-size: 95px;
	width: 95px;
	position: absolute;
	margin-left: 280px;
	margin-top: -36px;
	height: 30px;
}

@-webkit-keyframes rumble-right {
    0% {-webkit-transform: rotate(0deg);}
    25% {-webkit-transform: translate(2px, 0px) rotate(-2deg);}
    50% {-webkit-transform: translate(0px, -2px) rotate(0deg);}
    75% {-webkit-transform: translate(-2px, 0px) rotate(2deg);}
    100% {-webkit-transform: translate(0px, 2px) rotate(0deg);} 
}

@keyframes rumble-right {
    0% {transform: rotate(0deg);}
    25% {transform: translate(-2px, 0px) rotate(-2deg);}
    50% {transform: translate(0px, -2px) rotate(0deg);}
    75% {transform: translate(2px, 0px) rotate(2deg);}
    100% {transform: translate(0px, 2px) rotate(0deg);} 
}

#right-copyright{
	background: url("../img/right-copyright.png") no-repeat;
	background-size: 70px;
	width: 70px;
	height: 90px;
	display: inline-block;
	-webkit-animation: rumble-right 0.1825s infinite linear;
    animation: rumble-right 0.1825s infinite linear;
}

#right-copyright-name{
	background: url("../img/right-copyright-name.png") no-repeat;
	background-size: 70px;
	width: 70px;
	position: absolute;
	margin-left: 513px;
	margin-top: -32px;
	height: 30px;
}

#content-full-footer{
	display: table;
	width: 50%;
	min-width: 550px;
	margin: 0 auto;

}

#content-left-logo{
	display: table-cell;
	width: 27%;
	background: url("../img/logo-white.png") no-repeat;
	background-size: 153px;
	opacity: 1;
	height: 100px;
}

#content-right-footer{
	display: table-cell;
	width: 73%;
	text-align: left;
	vertical-align: top;
}

/** ******* **/
/** ******* **/
/** TOOLTIP **/
/** ******* **/
/** ******* **/
.hover {
	-webkit-user-select: none;
	-webkit-touch-callout: none;        
}

div.tooltip {
	outline:none;
} 

div.tooltip strong {
	line-height:30px;
	font-size: 12px;
} 

div.tooltip:hover {
	text-decoration:none;
} 

div.tooltip div { 
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-3px;
	margin-left:98px;
	width:290px;
	line-height:16px;
	font-size: 13px;
} 

div.tooltip:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

.callout {
	position:absolute;
	top:30px;
	border:0;
	left:-12px;
	z-index:9999;
}

#liste-phobies img{
	background-size: 12px;
	width: 12px;
}

div.tooltip div {
	z-index:9999;
}

.bubble-color-brown{
	color:#B79982;
}

.bubble-popularite{
	margin-top: 10px;
	font-size: 10px;
	color:#B79982;
	vertical-align: top;
	float: left;
	padding-left: 20px;
	margin-bottom: 5px;
	background: url("../img/bubble-popularite.png") no-repeat;
	background-size: 16px;
}

.bubble-periode{
	margin-top: 10px;
	font-size: 10px;
	color:#B79982;
	vertical-align: top;
	float: right;
	padding-left: 20px;
	background: url("../img/bubble-periode.png") no-repeat;
	background-size: 14px;
}

.bubble-adulte-enfant{
	font-size: 10px;
	color:#B79982;
	vertical-align: top;
	clear: both;
	padding-left: 20px;
	background: url("../img/bubble-enfant-adulte.png") no-repeat;
	background-size: 13px;
}


/** TOOLTIP DE CERTAINES PHOBIES **/
#aviophobie-04 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:7px;
	margin-left:-272px;
	width:250px;
	line-height:16px;
	font-size: 13px;	
}

#aviophobie-04:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#aviophobie-04 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:250px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#emetophobie-10 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-3px;
	margin-left:-272px;
	width:250px;
	line-height:16px;
	font-size: 13px;	
}

#emetophobie-10:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#emetophobie-10 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:250px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#mysophobie-11 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-3px;
	margin-left:-272px;
	width:250px;
	line-height:16px;
	font-size: 13px;	
}

#mysophobie-11:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#mysophobie-11 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:250px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#hematophobie-05 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-3px;
	margin-left:-272px;
	width:250px;
	line-height:16px;
	font-size: 13px;	
}

#hematophobie-05:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#hematophobie-05 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:250px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#cancerophobie-64 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-3px;
	margin-left:-272px;
	width:250px;
	line-height:16px;
	font-size: 13px;	
}

#cancerophobie-64:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#cancerophobie-64 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:250px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#amaxophobie-73 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-3px;
	margin-left:-312px;
	width:300px;
	line-height:16px;
	font-size: 13px;	
}

#amaxophobie-73:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#amaxophobie-73 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:300px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#chiroptophobie-77 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-3px;
	margin-left:-312px;
	width:300px;
	line-height:16px;
	font-size: 13px;	
}

#chiroptophobie-77:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#chiroptophobie-77 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:300px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#trypophobie-80 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:7px;
	margin-left:-322px;
	width:300px;
	line-height:16px;
	font-size: 13px;	
}

#trypophobie-80:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#trypophobie-80 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:300px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#selenophobie-82 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-3px;
	margin-left:-322px;
	width:300px;
	line-height:16px;
	font-size: 13px;	
}

#selenophobie-82:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#selenophobie-82 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:300px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#musicophobie-85 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-3px;
	margin-left:-312px;
	width:300px;
	line-height:16px;
	font-size: 13px;	
}

#musicophobie-85:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#musicophobie-85 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:300px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#stasophobie-87 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-3px;
	margin-left:-312px;
	width:300px;
	line-height:16px;
	font-size: 13px;	
}

#stasophobie-87:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#stasophobie-87 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:300px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#phagophobie-89 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-3px;
	margin-left:-322px;
	width:300px;
	line-height:16px;
	font-size: 13px;	
}

#phagophobie-89:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#phagophobie-89 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:300px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#teratophobie-96 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-3px;
	margin-left:-302px;
	width:300px;
	line-height:16px;
	font-size: 13px;	
}

#teratophobie-96:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#teratophobie-96 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:300px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#trichophobie-106 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-3px;
	margin-left:-312px;
	width:300px;
	line-height:16px;
	font-size: 13px;	
}

#trichophobie-106:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#trichophobie-106 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:300px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}


#ichthyophobie-54 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:17px;
	margin-left:-272px;
	width:250px;
	line-height:16px;
	font-size: 13px;	
}

#ichthyophobie-54:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#ichthyophobie-54 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:250px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#musophobie-55 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:17px;
	margin-left:-272px;
	width:250px;
	line-height:16px;
	font-size: 13px;	
}

#musophobie-55:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#musophobie-55 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:250px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#aquaphobie-07 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:7px;
	margin-left:-272px;
	width:250px;
	line-height:16px;
	font-size: 13px;	
}

#aquaphobie-07:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#aquaphobie-07 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:250px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#alektorophobie-75 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:7px;
	margin-left:-312px;
	width:280px;
	line-height:16px;
	font-size: 13px;
}

#alektorophobie-75:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#alektorophobie-75 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:280px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#phasmophobie-66 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:7px;
	margin-left:-272px;
	width:250px;
	line-height:16px;
	font-size: 13px;
}

#phasmophobie-66:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#phasmophobie-66 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:250px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#anginophobie-51 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:7px;
	margin-left:-272px;
	width:250px;
	line-height:16px;
	font-size: 13px;
}

#anginophobie-51:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#anginophobie-51 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:250px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

#nomophobie-23 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-13px;
	margin-left:-342px;
	width:310px;
	line-height:16px;
	font-size: 13px;
}

#nomophobie-23:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#nomophobie-23 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:310px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}


#achmophobie-15 > div{
	z-index:9999;
	display:none;
	position: absolute;
	padding:2px 20px 8px;
	margin-top:-13px;
	margin-left:-342px;
	width:310px;
	line-height:16px;
	font-size: 13px;
}

#achmophobie-15:hover div{
	display:inline-block;
	position: absolute;
	color:#111;
	z-index: 9999;
	background:#F9F0E6;
	-moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
}

#achmophobie-15 .callout{
	position:absolute;
	top:30px;
	border:0;
	left:310px;
	z-index:9999;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);	
}

/** ******* **/
/** ******* **/
/** TIMELINE **/
/** ******* **/
/** ******* **/
#timeline-left{
	background: url("../img/timeline-background.jpg") no-repeat;
	background-size: 70px;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
    opacity: 1;
    position: fixed;
    border: 10px solid #f9f0e6;
    right: 0;
    top: 4px;
    transition: all 0.25s ease-in-out 0s;
    width: 90px;
    z-index: 99;	
	visibility: hidden;
}

.selector-timeline{
	background: url("../img/selector-timeline.png") no-repeat;
	background-size: 70px;
	width: 70px;
	height: 60px;
}

.nav-univers{
	display: block;
	width: 70px;
	height: 60px;
	cursor: pointer;
}

/*
.nav-univers-paradis{
	background:url("../img/01-paradis-timeline.png") no-repeat;
}

.nav-univers-neige{
	background:url("../img/02-neige-timeline.png") no-repeat;
}

.nav-univers-verdure{
	background:url("../img/03-verdure-timeline.png") no-repeat;
}

.nav-univers-automne{
	background:url("../img/04-automne-timeline.png") no-repeat;
}

.nav-univers-desert{
	background:url("../img/05-desert-timeline.png") no-repeat;
}

.nav-univers-crepuscule{
	background:url("../img/06-crepuscule-timeline.png") no-repeat;
}

.nav-univers-enfer{
	background:url("../img/07-enfer-timeline.png") no-repeat;
}
*/

/** ******* **/
/** ******* **/
/** PHOBIES **/
/** ******* **/
/** ******* **/

#all-phobies{
	font-weight: bold;	
}

#liste-phobies{
	width: 980px;
	margin: 0 auto;
	height: 25000px;
	z-index: 2;
	visibility: hidden;
}

#liste-phobies > div{
    height: 80px;
    width: 80px;
    cursor: pointer;
    color: transparent;
    display: inline-block;
    position: absolute;
    z-index: 5;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

/*
#liste-phobies > div:hover{
	-webkit-animation: rumble-left 0.1625s infinite linear;
    animation: rumble-left 0.1625s infinite linear;
}
*/

#liste-phobies .animal{
	background: url("../img/phobie-animal.png") no-repeat;
	background-size: 80px;
	width: 80px;
	height: 129px;
}

#liste-phobies .sante{
	background: url("../img/phobie-sante.png") no-repeat;
	background-size: 100px;
	width: 100px;
	height: 107px;
}

#liste-phobies .transport{
	background: url("../img/phobie-transports.png") no-repeat;
	background-size: 120px;
	width: 120px;
	height: 107px;
}

#liste-phobies .elements-naturels{
	background: url("../img/phobie-elements-naturels.png") no-repeat;
	background-size: 80px;
	width: 80px;
	height: 129px;
}

#liste-phobies .obscurite{
	background: url("../img/phobie-obscurite.png") no-repeat;
	background-size: 110px;
	width: 110px;
	height: 136px;
}

#liste-phobies .objet{
	background: url("../img/phobie-objets.png") no-repeat;
	background-size: 110px;
	width: 110px;
	height: 86px;
}

#liste-phobies .vertige{
	background: url("../img/phobie-vertige.png") no-repeat;
	background-size: 100px;
	width: 100px;
	height: 116px;
}

#liste-phobies .mythe-religion{
	background: url("../img/phobie-mythe.png") no-repeat;
	background-size: 100px;
	width: 100px;
	height: 116px;
}

#liste-phobies .inclassable{
	background: url("../img/phobie-insolite.png") no-repeat;
	background-size: 120px;
	width: 120px;
	height: 110px;
}

#liste-phobies .gustatifs{
	background: url("../img/phobie-gustatif.png") no-repeat;
	background-size: 100px;
	width: 100px;
	height: 127px;
}

#liste-phobies .social{
	background: url("../img/phobie-sociale.png") no-repeat;
	background-size: 80px;
	width: 80px;
	height: 117px;
}

#agoraphobie-01{
	margin-left: 315px;
    margin-top: 200px;
}

#arachnophobie-02{
	margin-left: 385px;
    margin-top: 349px;
}

#dysmorphophobie-03{
 	margin-left: 175px;
    margin-top: 968px;	
}

#dysmorphophobie-03 > div{
 	margin-left: 128px;
}

#aviophobie-04{
	margin-left: 745px;
    margin-top: 1193px;
}

#hematophobie-05{
	margin-left: 624px;
    margin-top: 1729px;
}

#astraphobie-06{
	margin-left: 513px;
    margin-top: 1877px;
}

#aquaphobie-07{
	margin-left: 683px;
    margin-top: 2008px;
}

#cynophobie-08{
	margin-left: 568px;
    margin-top: 2143px;
}

#ophiophobie-09{
	margin-left: 272px;
    margin-top: 2282px;
}

#emetophobie-10{
	margin-left: 713px;
    margin-top: 2684px;
}

#mysophobie-11{
	margin-left: 570px;
    margin-top: 2804px;
}

#nyctophobie-12{
	margin-left: 588px;
    margin-top: 3094px;
}

#nyctophobie-12 > div{
	margin-left: 128px;
    margin-top: 17px;
    width: 250px;
}

#autophobie-13{
	margin-left: 150px;
    margin-top: 3289px;
}

#ablutophobie-14{
	margin-left: 300px;
    margin-top: 3430px;
}

#achmophobie-15{
	margin-left: 602px;
    margin-top: 3602px;
}

#glossophobie-16{
	margin-left: 394px;
    margin-top: 3780px;
}

#claustrophobie-17{
	margin-left: 484px;
    margin-top: 3958px;
}

#acrophobie-18{
	margin-left: 543px;
    margin-top: 4256px;
}

#acrophobie-18 > div{
	margin-left: 118px;
}

#aerodromophobie-19{
	margin-left: 429px;
    margin-top: 4567px;
}

#aerodromophobie-19 > div{
	margin-left: 138px;
}

#ailurophobie-20{
	margin-left: 312px;
    margin-top: 4861px;
}

#zoophobie-21{
	margin-left: 480px;
    margin-top: 4992px;
}

#bacillophobie-22{
	margin-left: 413px;
    margin-top: 5212px;
}

#bacillophobie-22 > div{
	margin-left: 118px;
}

#nomophobie-23{
	margin-left: 616px;
    margin-top: 5375px;
}

#coulrophobie-24{
	margin-left: 490px;
    margin-top: 5571px;
}

#leucoselophobie-25{
	margin-left: 369px;
    margin-top: 5796px;
}

#necrophobie-26{
	margin-left: 477px;
    margin-top: 6040px;
}

#necrophobie-26 > div{
	margin-left: 128px;
}

#haptophobie-27{
	margin-left: 460px;
    margin-top: 6306px;
}

#nosophobie-28{
	margin-left: 412px;
    margin-top: 6574px;
}

#nosophobie-28 > div{
	margin-left: 128px;
}

#scopophobie-29{
	margin-left: 445px;
    margin-top: 6822px;
}

#gephyrophobie-30{
	margin-left: 419px;
    margin-top: 7126px;
}

#gephyrophobie-30 > div{
	margin-left: 118px;
}

#apiphobie-31{
	margin-left: 423px;
    margin-top: 7384px;
}

#pediophobie-32{
	margin-left: 504px;
    margin-top: 7690px;
}

#pediophobie-32 > div{
	margin-left: 128px;
    margin-top: -23px;
}

#thanatophobie-33{
	margin-left: 384px;
    margin-top: 7810px;
}

#thanatophobie-33 > div{
	margin-left: 128px;
}

#ereutophobie-34{
	margin-left: 389px;
    margin-top: 8318px;
}

#telephonophobie-35{
	margin-left: 266px;
    margin-top: 8455px;
}

#pyrophobie-36{
	margin-left: 590px;
    margin-top: 8586px;
}

#acarophobie-37{
	margin-left: 486px;
    margin-top: 8858px;
}

#acarophobie-37 > div{
	margin-left: 128px;
}

#phobie-sociale-38{
	margin-left: 495px;
    margin-top: 9048px;
}

#algophobie-39{
	margin-left: 345px;
    margin-top: 9218px;
}

#algophobie-39 > div{
	margin-left: 128px;
}

#anthropophobie-40{
	margin-left: 527px;
    margin-top: 9409px;
}

#gymnophobie-41{
	margin-left: 577px;
    margin-top: 10050px;
}

#herpetophobie-42{
	margin-left: 457px;
    margin-top: 10240px;
}

#achluophobie-43{
	margin-left: 265px;
    margin-top: 10470px;
}

#achluophobie-43 > div{
	margin-left: 128px;
	margin-top: 17px;
}

#tokophobie-44{
	margin-left: 502px;
    margin-top: 10660px;
}

#tokophobie-44 > div{
	margin-left: 128px;
}

#ochlophobie-45{
	margin-left: 627px;
    margin-top: 10825px;
}

#ochlophobie-45 > div{
	width:250px;
}

#thalassophobie-46{
	margin-top: 10870px;
	margin-left: 230px;
}

#basophobie-47{
	margin-top: 11020px;
	margin-left: 420px;
}

#hylophobie-48{
	margin-top: 11170px;
	margin-left: 345px;
}

#phobie-sang-49{
	margin-top: 11390px;
	margin-left: 210px;
}

#phobie-sang-49 > div{
	margin-left: 138px;
}

#carpophobie-50{
	margin-top: 11550px;
	margin-left: 331px;
}

#carpophobie-50 > div{
	margin-left: 118px;
}

#anginophobie-51{
	margin-top: 11810px;
	margin-left: 630px;
}

#nosocomephobie-52{
	margin-top: 11980px;
	margin-left: 460px;
}

#nosocomephobie-52 > div{
	margin-left: 138px;
}

#entomophobie-53{
	margin-top: 12240px;
	margin-left: 250px;
}

#ichthyophobie-54{
	margin-top: 12240px;
	margin-left: 700px;
}

#musophobie-55{
	margin-top: 12620px;
	margin-left: 670px;
}

#myrmecophobie-56{
	margin-top: 12760px;
	margin-left: 440px;
}

#ornithophobie-57{
	margin-top: 13250px;
	margin-left: 375px;
}

#squalophobie-58{
	margin-top: 13440px;
	margin-left: 190px;
}

#aerophobie-59{
	margin-top: 13570px;
	margin-left: 410px;
}

#brontophobie-60{
	margin-top: 13800px;
	margin-left: 260px;
}

#asthenophobie-61{
	margin-top: 14150px;
	margin-left: 310px;
}

#asthenophobie-61 > div{
	margin-left: 128px;
}

#automysophobie-62{
	margin-top: 14290px;
	margin-left: 153px;
}

#automysophobie-62 > div{
	margin-left: 128px;
}

#borbophobie-63{
	margin-top: 14370px;
	margin-left: 560px;
}

#borbophobie-63 > div{
	margin-left: 128px;
}

#cancerophobie-64{
	margin-top: 14600px;
	margin-left: 709px;
}

#psychopathophobie-65{
	margin-top: 14830px;
	margin-left: 100px;
}

#psychopathophobie-65 > div{
	margin-left: 128px;
}

#phasmophobie-66{
	margin-top: 14830px;
	margin-left: 610px;
}

#theophobie-67{
	margin-top: 15190px;
	margin-left: 110px;
}

#belenophobie-68{
	margin-top: 15330px;
	margin-left: 389px;
}

#belenophobie-68 > div{
	margin-left: 128px;
	margin-top: -13px;
}

#anuptaphobie-69{
	margin-top: 15690px;
	margin-left: 310px;
}

#athazagoraphobie-70{
	margin-top: 16010px;
	margin-left: 511px;
}

#blemmophobie-71{
	margin-top: 16060px;
	margin-left: 72px;
}

#phobophobie-72{
	margin-top: 16260px;
	margin-left: 200px;
}

#amaxophobie-73{
	margin-top: 16240px;
	margin-left: 703px;
}

#siderodromophobie-74{
	margin-top: 16600px;
	margin-left: 210px;
}

#siderodromophobie-74 > div{
	margin-left: 138px;
}

#alektorophobie-75{
	margin-top: 16780px;
	margin-left: 630px;
}

#anthelmophobie-76{
	margin-top: 17240px;
	margin-left: 210px;
}

#chiroptophobie-77{
	margin-top: 17430px;
	margin-left: 740px;
}

#cuniculophobie-78{
	margin-top: 17550px;
	margin-left: 120px;
}

#hippophobie-79{
	margin-top: 17850px;
	margin-left: 510px;
}

#trypophobie-80{
	margin-top: 18010px;
	margin-left: 730px;
}

#mycophobie-81{
	margin-top: 18270px;
	margin-left: 160px;
}

#selenophobie-82{
	margin-top: 18390px;
	margin-left: 740px;
}

#acerophobie-83{
	margin-top: 18820px;
	margin-left: 350px;
}

#acerophobie-83 > div{
	margin-left: 118px;
}

#ithyphallophobie-84{
	margin-top: 19130px;
	margin-left: 130px;
}

#ithyphallophobie-84 > div{
	margin-left: 138px;
}

#musicophobie-85{
	margin-top: 19540px;
	margin-left: 730px;
}

#pantophobie-86{
	margin-top: 19940px;
	margin-left: 140px;
}

#pantophobie-86 > div{
	margin-left: 138px;
}

#stasophobie-87{
	margin-top: 20160px;
	margin-left: 710px;
}

#apopathodiaphulatophobie-88{
	margin-top: 20370px;
	margin-left: 135px;
}

#apopathodiaphulatophobie-88 > div{
	margin-left: 118px;
}

#phagophobie-89{
	margin-top: 20731px;
	margin-left: 680px;
}

#epistaxiophobie-90{
	margin-top: 20821px;
	margin-left: 240px;
}

#epistaxiophobie-90 > div{
	margin-left: 118px;
}

#halitophobie-91{
	margin-top: 21231px;
	margin-left: 340px;
}

#halitophobie-91 > div{
	margin-left: 118px;
}

#taphophobie-92{
	margin-top: 21441px;
	margin-left: 340px;
}

#taphophobie-92 > div{
	margin-left: 118px;
}

#apeirophobie-93{
	margin-left: 280px;
    margin-top: 21784px;	
}

#ecclesiophobie-94{
	margin-left: 390px;
    margin-top: 22005px;
}

#maskaphobie-95{
	margin-left: 150px;
    margin-top: 22232px;
}

#teratophobie-96{
	margin-left: 820px;
    margin-top: 22322px;
}

#kenophobie-97{
	margin-left: 120px;
    margin-top: 22657px;
}

#kenophobie-97 > div{
	margin-left: 128px;
	margin-top: 20px;
}

#angrophobie-98{
	margin-left: 66px;
    margin-top: 23124px;
}

#atychiphobie-99{
	margin-left: 349px;
    margin-top: 23366px;
}

#pogonophobie-100{
	margin-left: 200px;
    margin-top: 23712px;
}

#fumiphobie-101{
	margin-left: 572px;
    margin-top: 23970px;
}

#gerascophobie-102{
	margin-left: 337px;
    margin-top: 24054px;
}

#graphophobie-103{
	margin-left: 460px;
    margin-top: 24614px;
}

#hypegiaphobie-104{
	margin-left: 170px;
    margin-top: 24764px;
}

#katagelophobie-105{
	margin-left: 470px;
    margin-top: 25424px;
}

#trichophobie-106{
	margin-left: 769px;
    margin-top: 25534px;
}

#cyclophobie-107{
	margin-left: 270px;
    margin-top: 25534px;
}

#cyclophobie-107 > div{
	margin-left: 138px;
}

#catapedaphobie-108{
	margin-left: 520px;
    margin-top: 25764px;
}

#catapedaphobie-108 > div{
	margin-left: 128px;
}

#climacophobie-109{
 	margin-left: 19px;
    margin-top: 25824px;	
}

#climacophobie-109 > div{
	margin-left: 128px;
}

/** ******* **/
/** ******* **/
/** UNIVERS **/
/** ******* **/
/** ******* **/

.paradis{
	position: absolute;
	top: 0;
	background:url("../img/01-paradis.jpg") no-repeat #E3FEFF;
	height: 3666px;	
	z-index: 1;
	width: 100%;
	background-position: 50%;
}

.neige{
	position: absolute;
	top: 3666px;
	background:url("../img/02-neige.jpg") no-repeat #E3FEFF;
	height: 3666px;	
	z-index: 1;
	width: 100%;
	background-position: 50%;
}

.verdure{
	position: absolute;
	top: 7332px;
	background:url("../img/03-verdure.jpg") no-repeat #E3FEFF;
	height: 3668px;	
	z-index: 1;
	width: 100%;
	background-position: 50%;
}

.automne{
	position: absolute;
	top: 10998px;
	background:url("../img/04-automne.png") no-repeat #E3FEFF;
	height: 3667px;	
	z-index: 1;
	width: 100%;
	background-position: 50%;		
}

.desert{
	position: absolute;
	top: 14665px;
	background:url("../img/05-desert.png") no-repeat #E4FEFF;
	background-position: 50%;
	height: 3667px;	
	z-index: 1;
	width: 100%;
}

.crepuscule{
	position: absolute;
	top: 18332px;
	background:url("../img/06-crepuscule.png") no-repeat #E4FEFF;
	height: 4100px;	
	z-index: 1;
	width: 100%;
	background-position: 50%;
}

.enfer{
	position: absolute;
	top: 22432px;
	background:url("../img/09-enfer.png") no-repeat #211D17;
	background-position: 50%;
	height: 3666px;	
	z-index: 1;
	width: 100%;
}

#enfer-dessus{
	position: absolute;
	top: 22436px;
	background:url("../img/09-enfer-dessus.png") no-repeat;
	background-position: 50%;
	height: 3666px;	
	z-index: 3;
	width: 100%;
}

#montagne-dessus{
	position: absolute;
	top: 22417px;
	background:url("../img/10-montagne-dessus.png") no-repeat;
	background-position: 50%;
	height: 46px;	
	z-index: 3;
	width: 100%;	
}

#animations{
	width: 980px;
	margin: 0 auto;
	z-index: 2;
	
}

/** ELEMENTS VERDURE **/
#nuage-dieu{
	position: absolute;
	top: -60px;
	background:url("../img/nuage-dieu.png") no-repeat;
	background-size: 342px;
	height: 190px;	
	z-index: 5;
	width: 342px;	
	margin-left: 412px;		
}


@keyframes levitation {
0% {transform: translate(0px, 0px);}
50% { animation-delay: 2s;
      transform: translate(0px, 10px);}
100% {transform: translate(0px, 0px);}
}

@-webkit-keyframes levitation {
0% {-webkit-transform: translate(0px, 0px);}
50% { -webkit-animation-delay: 2s;
      -webkit-transform: translate(0px, 10px);}
100% {-webkit-transform: translate(0px, 0px);}
}

#main-dieu{
	position: absolute;
	top: 30px;
	background:url("../img/main-dieu.png") no-repeat;
	background-size: 200px;
	height: 222px;	
	z-index: 4;
	width: 200px;	
	margin-left: 422px;	
	animation: 1.8s ease-out 0s normal none infinite levitation;
	-webkit-animation:1.8s ease-out 0s normal none infinite levitation;
	-moz-animation:1.8s ease-out 0s normal none infinite levitation;	
}

#eclair{
	position: absolute;
	top: 1480px;
	background:url("../img/eclair.gif") no-repeat;
	background-size: 150px;
	height: 340px;	
	z-index: 2;
	width: 150px;	
	margin-left: 289px;		
}

#bacchus{
	position: absolute;
	top: 2110px;
	background:url("../img/gif-bacchus.gif") no-repeat;
	background-size: 123px;
	height: 150px;	
	z-index: 2;
	width: 123px;	
	margin-left: 339px;		
}

#moutons-verdure{
	position: absolute;
	top: 8976px;
	background:url("../img/gif-moutons.gif") no-repeat;
	background-size: 160px;
	height: 150px;	
	z-index: 2;
	width: 160px;	
	margin-left: 320px;		
}

#telesieges{
	position: absolute;
	top: 4195px;
	background:url("../img/gif-telesiege.gif") no-repeat;
	background-size: 90px;
	height: 660px;	
	z-index: 2;
	width: 90px;	
	margin-left: 310px;		
}

#yeti-neige{
	position: absolute;
	top: 6565px;
	background:url("../img/gif-yeti.gif") no-repeat;
	background-size: 62px;
	height: 190px;	
	z-index: 2;
	width: 62px;	
	margin-left: 322px;		
}

#yeti-neige-deux{
	position: absolute;
	top: 6129px;
	background:url("../img/gif-yeti-2.gif") no-repeat;
	background-size: 85px;
	height: 281px;	
	z-index: 2;
	width: 85px;	
	margin-left: 627px;		
}

#neige-chalet{
	position: absolute;
	top: 5855px;
	background:url("../img/gif-chalet.gif") no-repeat;
	background-size: 164px;
	height: 150px;	
	z-index: 2;
	width: 164px;	
	margin-left: 532px;		
}

#neige-chalet-deux{
	position: absolute;
	top: 6782px;
	background:url("../img/gif-chalet-2.gif") no-repeat;
	background-size: 112px;
	height: 110px;	
	z-index: 2;
	width: 112px;	
	margin-left: 337px;		
}

/** ELEMENTS AUTOMNE / DESERT / CREPUSCULE **/
#automne-mouton{
	position: absolute;
	background: url("../img/automne-mouton.gif") no-repeat;
	background-size: 242px;
	top: 14689px;
	height: 99px;
	width: 242px;
	z-index: 4;
	margin-left: 268px;
}

#automne-empreinte{
	position: absolute;
	top: 13875px;
	background:url("../img/automne-empreinte-v2.gif") no-repeat;
	background-size: 335px;
	height: 150px;	
	z-index: 2;
	width: 335px;	
	margin-left: -50px;		
}

#automne-maison{
	position: absolute;
	top: 13435px;
	background:url("../img/automne-maison.gif") no-repeat;
	background-size: 279px;
	height: 260px;	
	z-index: 2;
	width: 279px;	
	margin-left: 480px;		
}

#automne-tournesol{
	position: absolute;
	top: 13875px;
	background:url("../img/automne-tournesol.gif") no-repeat;
	background-size: 459px;
	height: 352px;	
	z-index: 2;
	width: 459px;	
	margin-left: 368px;		
}

#desert-buisson{
	position: absolute;
	top: 14908px;
	background:url("../img/desert-buisson.gif") no-repeat;
	background-size: 564px;
	height: 188px;	
	z-index: 2;
	width: 564px;	
	margin-left: 316px;		
}

#automne-nuage{
	position: absolute;
	top: 10998px;
	background:url("../img/automne-nuage.gif") no-repeat;
	background-size: 1080px;
	height: 591px;	
	z-index: 2;
	width: 1080px;	
	margin-left: -50px;		
}

#desert-vautour{
	position: absolute;
	background: url("../img/desert-vautour.gif") no-repeat;
	background-size: 1080px;
	height: 444px;
    margin-left: -50px;
    position: absolute;
    top: 15524px;
    width: 1080px;
    z-index: 6;
}

/** ELEMENTS ENFER **/
.lave-montagne-01{
	position: absolute;
	background: url("../img/gif-lave-montagne-01.gif") no-repeat;
	background-size: 65px;
	top: 22179px;
	height: 80px;
	width: 65px;
	z-index: 4;
	margin-left: 48px;
}

.lave-montagne-02{
	position: absolute;
	background: url("../img/gif-lave-montagne-02.gif") no-repeat;
	background-size: 210px;
	top: 21963px;
	height: 240px;
	width: 210px;
	z-index: 4;
	margin-left: 89px;
}

.lave-montagne-03{
	position: absolute;
	background: url("../img/gif-lave-montagne-01.gif") no-repeat;
	background-size: 85px;
	top: 22173px;
	height: 100px;
	width: 85px;
	z-index: 4;
	margin-left: 295px;
}

.lave-montagne-04{
	position: absolute;
	background: url("../img/gif-lave-montagne-02.gif") no-repeat;
	background-size: 65px;
	top: 22155px;
	height: 100px;
	width: 65px;
	z-index: 4;
	margin-left: 488px;
}

.lave-montagne-05{
	position: absolute;
	background: url("../img/gif-lave-montagne-01.gif") no-repeat;
	background-size: 210px;
	top: 21923px;
	height: 240px;
	width: 210px;
	z-index: 4;
	margin-left: 524px;
}

.lave-montagne-06{
	position: absolute;
	background: url("../img/gif-lave-montagne-02.gif") no-repeat;
	background-size: 210px;
	top: 22030px;
	height: 240px;
	width: 210px;
	z-index: 4;
	margin-left: 738px;
}

@-webkit-keyframes oiseau-gauche-droite {
    0%{margin-left:0px;}
    25%{margin-top:30px }
    35%{margin-top: 10px}
    50%{margin-top: 50px;}
    75%{margin-top: 80px;}
    100%{margin-left: 900px;}  
}

@keyframes oiseau-gauche-droite {
    0%{margin-left:0px;}
    25%{margin-top:30px }
    35%{margin-top: 10px}
    50%{margin-top: 50px;}
    75%{margin-top: 80px;}
    100%{margin-left: 900px;}  
}

.oiseau-montagne-01{
	background: url("../img/oiseau-montagne-01.png") no-repeat;
	background-size: 40px;
	width: 40px;
	height: 60px;
	z-index: 2;
	margin-left: 370px;
	position: absolute;
	top: 22520px;
	-webkit-animation: oiseau-gauche-droite 20.625s infinite linear;
    animation: oiseau-gauche-droite 20.625s infinite linear;	
}

.oiseau-montagne-02{
	background: url("../img/oiseau-montagne-02.png") no-repeat;
	background-size: 40px;
	width: 40px;
	height: 70px;
	z-index: 2;
	position: absolute;
	top: 22480px;
	margin-left: 200px;
	-webkit-animation: oiseau-gauche-droite 15.625s infinite linear;
    animation: oiseau-gauche-droite 15.625s infinite linear;
}

.oiseau-montagne-03{
	background: url("../img/oiseau-montagne-03.png") no-repeat;
	background-size: 30px;
	width: 30px;
	margin-left: 260px;
	height: 46px;
	z-index: 2;
	position: absolute;
	top: 22590px;
	-webkit-animation: oiseau-gauche-droite 23.625s infinite linear;
    animation: oiseau-gauche-droite 23.625s infinite linear;
}

.oiseau-montagne-04{
	background: url("../img/oiseau-montagne-04.png") no-repeat;
	background-size: 25px;
	width: 25px;
	height: 50px;
	z-index: 2;
	position: absolute;
	top: 22530px;
	margin-left: 150px;
	-webkit-animation: oiseau-gauche-droite 12.625s infinite linear;
    animation: oiseau-gauche-droite 12.625s infinite linear;
}

.oiseau-montagne-05{
	background: url("../img/oiseau-montagne-05.png") no-repeat;
	background-size: 20px;
	margin-left: 180px;
	width: 20px;
	height: 25px;
	z-index: 2;
	position: absolute;
	top: 22580px;
	-webkit-animation: oiseau-gauche-droite 29.625s infinite linear;
    animation: oiseau-gauche-droite 29.625s infinite linear;
}

.oiseau-montagne-06{
	background: url("../img/oiseau-montagne-06.png") no-repeat;
	background-size: 35px;
	margin-left: 260px;
	width: 35px;
	height: 50px;
	z-index: 2;
	position: absolute;
	top: 22490px;
	-webkit-animation: oiseau-gauche-droite 27.625s infinite linear;
    animation: oiseau-gauche-droite 27.625s infinite linear;
}

#element-trex{
	position: absolute;
	top: 23433px;
	background:url("../img/elements-trex.png") no-repeat;
	background-size: 376px;
	height: 409px;	
	z-index: 3;
	width: 376px;	
	margin-left: 586px;		
}

#element-dino{
	position: absolute;
	top: 24106px;
	background:url("../img/elements-dino.png") no-repeat;
	background-size: 258px;
	height: 301px;	
	z-index: 4;
	width: 258px;	
}

@-webkit-keyframes trex {
    0% {-webkit-transform: rotate(0deg);}
    50% {-webkit-transform: translate(0px, -5px) rotate(0.2deg);}
    100% {-webkit-transform: translate(0px, 0.3px) rotate(0deg);} 
}

@keyframes trex {
    0% {transform: rotate(0deg);}
    50% {transform: translate(0px, 5px) rotate(0.2deg);}
    100% {transform: translate(0px, 0.3px) rotate(0deg);} 
}

.gueule-trex{
	position: absolute;
	top: 23494px;
	background:url("../img/gif-trex.png") no-repeat;
	background-size: 100px;
	height: 85px;	
	z-index: 4;
	width: 100px;	
	margin-left: 788px;	
	-webkit-animation: trex 0.7625s infinite linear;
    animation: trex 0.7625s infinite linear;
}

.lave-top-left{
	position: absolute;
	top: 25656px;
	background:url("../img/gif-lave-bottom.gif") no-repeat;
	background-size: 50px;
	height: 180px;	
	z-index: 2;
	width: 50px;	
	margin-left: 116px;		
}

.lave-top-right{
	position: absolute;
	top: 25526px;
	background:url("../img/gif-lave-bottom.gif") no-repeat;
	background-size: 70px;
	height: 250px;	
	z-index: 2;
	width: 70px;	
	margin-left: 646px;		
}

.lave-bottom-right{
	position: absolute;
	top: 24646px;
	background:url("../img/gif-lave-02.gif") no-repeat;
	background-size: 100px;
	height: 340px;	
	z-index: 2;
	width: 100px;	
	margin-left: 860px;	
}

.lave-bottom-left{
	position: absolute;
	top: 24729px;
	background:url("../img/gif-lave-01.gif") no-repeat;
	background-size: 50px;
	height: 180px;	
	z-index: 2;
	width: 50px;	
	margin-left: 90px;
}

/** ******* **/
/** ******* **/
/** ASSETS  **/
/** ******* **/
/** ******* **/
.gototop{
  display: block;
  position: fixed;
  z-index: 2;
  margin: 0 auto;
  width: 42px;
  height: 42px;
  bottom: 15px;
  right: 15px;
  background: #D1723C url('../img/gototop.png') center no-repeat;
  background-size: 15px;
  -moz-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 0px 0px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.gototop:hover{
	background: #E9DEB3 url('../img/gototop.png') center no-repeat;
	background-size: 15px;
}

.btn-depart {
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  display: table;
  height: 78px;
  line-height: 78px;
  margin: 0 auto;
  padding: 0 50px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  background: #b5bf01;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px -7px 0px 0px inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px -7px 0px 0px inset;
  box-shadow: rgba(0, 0, 0, 0.2) 0px -7px 0px 0px inset;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
/* **************************************** */
/* MEDIA QUERIES */

/* *********** */
/** IPAD PAYSAGE **/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
	.wallpaper-loading {		
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: visible;
	top: 0;
	color: #b79982;
	left: 0;
	z-index: 99999;
	background: url("../img/wallpaper-phobies-ipad.gif") no-repeat;
	background-size: 980px;
	opacity: 1;
	-webkit-transition: all 0s;
	-moz-transition: all 0s;
	transition: all 0s;
	display: block;

	}
	
	#logo-montagne{
		display: none;
	}
	
	#timeline-left{
		right: 0;
		top: 4px;	
	}
	
	#automne-nuage{
		display: none;
	}
	
	#content-nav, nav{
		width: 100%
	}
	
	#searchfield form .biginput{
		width: 170px;
	}
	
	#consigne-03{
		margin-left: 490px;
	}
}

/** IPAD PORTRAIT **/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
	.wallpaper-loading {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: visible;
	top: 0;
	color: #b79982;
	left: 0;
	z-index: 99999;
	background: url("../img/wallpaper-phobies-ipad.gif") no-repeat;
	background-size: 980px;
	opacity: 1;
	-webkit-transition: all 0s;
	-moz-transition: all 0s;
	transition: all 0s;
	display: block;
	}
	
	#automne-nuage{
		display: none;
	}
	
	#logo-montagne{
		display: none;
	}

	#timeline-left{
		right: 0;
		top: 52px;	
	}

	#content-nav, nav{
		width: 100%
	}
	
	#searchfield form .biginput{
		width: 210px;
	}
	
	#consigne-03{
		margin-left: 460px;
	}
	
}

/* *********** */
/* SMARTPHONES */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.wallpaper-loading, #contenu-consignes{
	display: none!important;
}	

#page{
	min-height: 900px;	
	max-height: 900px;
	height: 900px;
}

	#automne-nuage{
		display: none;
	}
	
.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: visible;
	top: 0;
	color: #b79982;
	left: 0;
	z-index: 99999;
	background: url("../img/wallpaper-phobies-iphone.gif") no-repeat;
	background-size: 980px;
	opacity: 1;
	-webkit-transition: all 0s;
	-moz-transition: all 0s;
	transition: all 0s;
	display: block;
}
	
}