/*
// ---------------------
// JEU : NEPHI TRIP
// © Patrice Brochard (Bull)- auteur, concepteur du jeu - programmation (labyrinthes,...)
// http://bull100.pagesperso-orange.fr/marion/marion/accueil.html
// © Jerome Réaux (jreaux62) - programmation (HTML, CSS, JS)
// http://www.jerome-reaux-creations.fr
// ---------------------
*/
* {
	border:0;
	padding:0;
	border:0;
	box-sizing:border-box;
}
body {
	background:url(img/deco/fond.png) top center repeat;
}
@font-face {
    font-family: 'Canted Comic';
    src: url('font/canted-comic/cantedcomic_bold-webfont.eot');
    src: url('font/canted-comic/cantedcomic_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/canted-comic/cantedcomic_bold-webfont.woff2') format('woff2'),
         url('font/canted-comic/cantedcomic_bold-webfont.woff') format('woff'),
         url('font/canted-comic/cantedcomic_bold-webfont.ttf') format('truetype'),
         url('font/canted-comic/cantedcomic_bold-webfont.svg#canted_comicbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* -------------- */
#nephitrip {
	position:relative;
	padding:90px 50px 90px 15px;
	text-align:center;
}
#nephitrip-frame {
	position:relative;
	display:inline-block;
	margin:0 auto;
	background:#646464;/*gris moyen*/
	border-radius:5px 5px 5px 50px;
}
#nephitrip-frame:before {
	position:absolute;
	display:block;
	content:'';
	top:-8px;
	left:-8px;
	background:#353535; /*gris fonce*/
	border:8px solid #353535; /*gris fonce*/
	border-bottom:24px solid #353535; /*gris fonce*/
	border-radius:10px 10px 10px 60px;
	box-shadow:0 0 20px #222;
	z-index:-1;
}
#nephitrip-frame,
#nephitrip-frame:before {
	width:940px;
	height:520px;
}
#nephitrip-frame:after {
	position:absolute;
	display:block;
	content:'';
	width:400px;
	height:190px;
	top:-38px;
	right:-28px;
	background:#353535; /*gris fonce*/
	border:8px solid #353535; /*gris fonce*/
	border-bottom:24px solid #353535; /*gris fonce*/
	border-radius:10px 10px 10px 60px;
	box-shadow:0 0 20px #222;
	z-index:-1;
}
/* -------------- */
#nephitrip,
#nephitrip div,
#nephitrip div div,
#nephitrip img,
#nephitrip button,
#nephitrip span,
#nephitrip a {
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	transition:all 0.5s;
}
/* -------------- */
/* TITRE */
#nephitrip-title {
	position:absolute;
	width:453px;
	height:85px;
	top:-85px;
	left:90px;
	background:url(img/deco/nephitrip-titre.png) center center no-repeat;
}
#nephitrip-title:after {
	position:absolute;
	display:block;
	content:'';
	width:30px;
	height:30px;
	top:4px;
	right:150px;
	background:url(img/deco/nephitrip-titre-crane.png) center center no-repeat;

	animation:nephitrip-title-crane 3s ease-in-out infinite;
}
@keyframes nephitrip-title-crane {
	0% { -webkit-transform:rotate(0deg); transform:rotate(0deg);}
	33% { -webkit-transform:rotate(10deg); transform:rotate(10deg);}
	67% { -webkit-transform:rotate(-10deg); transform:rotate(-10deg);}
	100% { -webkit-transform:rotate(0deg); transform:rotate(0deg);}
}
/* subtitle */
#nephitrip-subtitle {
	position:absolute;
	width:135px;
	top:20px;
	right:170px;
	font-family:"Anton",Arial,sans-serif;
	text-transform:uppercase;
	letter-spacing:0.1em;
	font-size:18px;
	line-height:28px;
	color:#e4e4c5;/*jaune pale*/
	text-align:left;
}
/* -------------- */
/* GRID */
#nephitrip #nephitrip-grid-walls, 
#nephitrip #nephitrip-grid-extra {
	position:absolute;
	width:610px;
	height:480px; /*368px +... pour zoom extra*/
	top:5px;
	left:5px;
	overflow:hidden;
}
/* grid :107 - 83 - 51 - 128 - 51 - 83 - 107 */
#nephitrip #nephitrip-grid-walls > div {
	position:absolute;
	content:'';
	height:368px;
	top:0;
	background-size:100% 100%;

	-webkit-transition:all 0s;
	-moz-transition:all 0s;
	transition:all 0s;
}

#nephitrip-grid-walls > div#wall-1 { width:107px; left:0; }
#nephitrip-grid-walls > div#wall-2 { width:83px; left:107px; }
#nephitrip-grid-walls > div#wall-3 { width:51px; left:190px; }
#nephitrip-grid-walls > div#wall-4 { width:128px; left:241px; }
#nephitrip-grid-walls > div#wall-5 { width:51px; left:369px; }
#nephitrip-grid-walls > div#wall-6 { width:83px; left:420px; }
#nephitrip-grid-walls > div#wall-7 { width:107px; left:503px; }

/* -------------- */
/* GRID - EXTRAS */
#nephitrip #nephitrip-grid-extra > div {
	position:absolute;
	height:368px;
	width:396px;
	left:107px;
	top:0;
	
	background-position:center center;
	background-repeat:no-repeat;
	
	overflow:hidden;
	-webkit-transition: all 0s;
	-moz-transition: all 0s;
	transition: all 0s;

	display:none; /* on masque */
}
#nephitrip #nephitrip-grid-extra > div > div {
	position:absolute;
	content:'';
	width:100%;
	height:100%;
	
	background-position:center center;
	background-repeat:no-repeat;
	
	overflow:hidden;
	-webkit-transition: all 0s;
	-moz-transition: all 0s;
	transition: all 0s;
}
/* -------------- */
/* BUTTONS */
#nephitrip-btns-move {
	position:absolute;
	width:320px;
	height:80px;
	bottom:40px;
	left:155px;
	text-align:center;
	display:none; /* on masque au départ */
}
#nephitrip-btns-move > div {
	position:relative;
	margin:0 12px;
	display:inline-block;
	content:'';
	width:70px;
	height:70px;
	border:3px solid #000;
	background:#741e43;/*rouge moyen*/
	border-radius:50px;
	cursor:pointer;
	z-index:1;
}
#nephitrip-btns-move > div:not(.no-move):hover {
	border-color:#e4e4c5;/*jaune pale*/
	box-shadow:0 0 5px #222;
}
#nephitrip-btns-move > div:after {
	position:absolute;
	display:block;
	content:'';
	width:100%;
	height:100%;
	top:0;
	left:0;
}
#nephitrip-btn-move-left:after {
	background:url(img/deco/btn-move-left.png) center center no-repeat;
}
#nephitrip-btn-move-ahead:after {
	background:url(img/deco/btn-move-ahead.png) center center no-repeat;
}
#nephitrip-btn-move-right:after {
	background:url(img/deco/btn-move-right.png) center center no-repeat;
}
#nephitrip-btn-move-left:not(.no-move):hover:after {
	animation:nephitrip-btn-move-left 0.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-btn-move-left {
	0% { -webkit-transform:rotate(0deg); transform:rotate(0deg);}
	100% { -webkit-transform:rotate(-20deg); transform:rotate(-20deg);}
}
#nephitrip-btn-move-ahead:not(.no-move):hover:after {
	animation:nephitrip-btn-move-ahead 0.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-btn-move-ahead {
	0% { top:0; }
	100% { top:-5px; }
}
#nephitrip-btn-move-right:not(.no-move):hover:after {
	animation:nephitrip-btn-move-right 0.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-btn-move-right {
	0% { -webkit-transform:rotate(0deg); transform:rotate(0deg);}
	100% { -webkit-transform:rotate(20deg); transform:rotate(20deg);}
}
#nephitrip-btns-move > div.no-move {
	background:#555;
	border-color:#444;
	cursor:not-allowed;
}
#nephitrip-btns-move > div.no-move:after {
	opacity:0.2;
}
/* -------------- */
/* BOUSSOLE */
#nephitrip-compass-wrap {
	position:absolute;
	width:160px;
	height:160px;
	bottom:5px;
	left:235px;
	overflow:hidden !important; /* important */
}
#nephitrip-compass-wrap > div {
	position:absolute;
	width:160px;
	height:160px;
	top:0;
	left:0;
	background:url(img/deco/boussole.png) center center no-repeat;
}
/* -------------- */
/* MAP */
#nephitrip-map {
	position:absolute;
	width:280px;
	height:300px;
	bottom:15px;
	right:30px;
	background:url(img/deco/map.png) center center no-repeat;
}
/* nephitrip-map-level */
#nephitrip-map span#nephitrip-map-level {
	position:absolute;
	display:block;
	top:5px;
	left:20px;
	font-size:20px;
	font-family:"Anton",Arial,sans-serif;
	color:#888;/*gris moyen*/
}
#nephitrip-map span#nephitrip-map-level small {
	font-size:16px;
	font-weight:normal;
	font-family:Arial,sans-serif;
}
#nephitrip-map-grid {
	position:absolute;
	width:256px;
	height:256px;
	/*bottom:22px;*/
	bottom:12px;
	right:12px;
}
/* nephitrip-spot-me */
#nephitrip-map span#nephitrip-spot-me {
	position:absolute;
	display:block;
	content:'';
	width:10px;
	height:10px;
	border-radius:5px;
	z-index:1;
	background:url(img/deco/spot-me.png) center center no-repeat;
	background-size:contain;
}
/* dot */
#nephitrip-map span.dot {
	position:absolute;
	display:block;
	width:8px;
	height:8px;
	border:1px solid #cfcdbf;/*beige parchemin*/
	/*border-radius:3px;*/
}
#nephitrip-map span.dot {
	background:#888;/*gris moyen*/
}
#nephitrip-map span.dot.pos-key {
	background:mediumvioletred;
}
#nephitrip-map span.dot.pos-door {
	background:darkblue;
}
#nephitrip-map span.dot.pos-start {
	background:green;
}
#nephitrip-map span.dot.pos-end {
	background:orange;
}
#nephitrip-map span.dot.pos-end-key {
	background:red;
}
#nephitrip-map span.dot.pos-extra {
	background:#666;
}
#nephitrip-map span.dot.pos-extra-mur {
	background:#b8a8a0; /*beige foncé*/
}
#nephitrip-map span.dot.pos-danger {
	background:#000;
}
/* -------------- */
#nephitrip-copyright {
	position:absolute;
	bottom:-18px;
	right:70px;
	text-align:left;
	font-size:11px;
	font-weight:bold;
	font-family:Arial, sans-serif;
	color:#000;
}
/* -------------- */
#nephitrip-btn-links {
	position:absolute;
	right:50px;
	bottom:-80px;
}
#nephitrip .nephitrip-btn {
	display:inline-block;
	padding:3px 8px;
	margin-left:5px;
	margin-bottom:5px;
	font-size:15px;
	font-family:"Anton",Arial,sans-serif;
	text-transform:uppercase;
	letter-spacing:0.15em;
	text-decoration:none;
	cursor:pointer;
	color:#e4e4c5;/*jaune pale*/
	background:#50233e;/*rouge fonce*/
	border:2px solid #c7c7b7;/*gris clair*/
	box-shadow:0 0 5px #222;
	border-radius:10px / 5px;
	z-index:1;
}
#nephitrip .nephitrip-btn:hover {
	-webkit-transform:scale(1.2); transform:scale(1.2);
	z-index:10;
}
/* popup button (btn-replay-ok) */
#nephitrip .nephitrip-popup .nephitrip-btn {
	margin:10px auto;
}
#nephitrip .nephitrip-btn.nephitrip-btn-update {
	/*background:green;*//*vert*/
	background:#cc6600;/*orange moyen*/
}
/* ----- */
/* BTN FACEBOOK */
#nephitrip .social-facebook {
	position:relative;
	background:#3b5999;
	padding-left:26px;
}
#nephitrip .social-facebook:before {
	position:absolute;
	display:block;
	content:'';
	width:24px;
	height:24px;
	top:2px;
	left:0;
	background:url(img/deco/ico-facebook.png) center center no-repeat;
	background-size:contain;
}
/* -------------- */
/* EXTRAS - IMAGES */
/* -------------- */
/* EXTRA : KEY */
#nephitrip #nephitrip-grid-extra > div.key {
	animation:nephitrip-key 3s ease-in-out infinite;
}
@keyframes nephitrip-key {
	0% { top:0; }
	50% { top:20px; }
	100% { top:0; }
}
#nephitrip #nephitrip-grid-extra > div.key-find {
	animation:nephitrip-key-find 3s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-key-find {
	0% { opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	5% { opacity:1; -webkit-transform:scale(1.1); transform:scale(1.1); }
	10% { opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	15% { opacity:1; -webkit-transform:scale(1.1); transform:scale(1.1); }
	20% { opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	25% { opacity:1; -webkit-transform:scale(1.1); transform:scale(1.1); }
	100% { opacity:0; -webkit-transform:scale(0); transform:scale(0); }
}
/* -------------- */
/* EXTRA : LOCK */
#nephitrip #nephitrip-grid-extra > div.chain-lock {
	animation:nephitrip-chain-lock 2s ease-in-out infinite;
}
@keyframes nephitrip-chain-lock {
	0% { -webkit-transform:scale(1); transform:scale(1); }
	50% { -webkit-transform:scale(1.05); transform:scale(1.05); }
	100% { -webkit-transform:scale(1); transform:scale(1); }
}

#nephitrip #nephitrip-grid-extra > div.chain-lock-anim {
	animation:nephitrip-chain-lock-anim 1.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-chain-lock-anim {
	0% { opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	80% { opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	90% { opacity:0.5; -webkit-transform:scale(0.5); transform:scale(0.5); }
	100% { opacity:0; -webkit-transform:scale(0); transform:scale(0); }
}

/* -------------- */
/* DOOR OPEN - frame */
/* frame : dimensions de la porte 230 x 252 px - pour pouvoir faire des animations */
#nephitrip #nephitrip-grid-extra > div.door-frame,
#nephitrip #nephitrip-grid-extra > div.door-frame-2cases,
#nephitrip #nephitrip-grid-extra > div.door-frame-3cases,
#nephitrip #nephitrip-grid-extra > div.door-frame-4cases,
#nephitrip #nephitrip-grid-extra > div.lvl-door-item-locked,
#nephitrip #nephitrip-grid-extra > div.lvl-door-item-unlocked,
/* animation de portes */
#nephitrip #nephitrip-grid-extra > div.door-slide-up,
#nephitrip #nephitrip-grid-extra > div.door-slide-down,
#nephitrip #nephitrip-grid-extra > div.lvl-door-slide-up,
#nephitrip #nephitrip-grid-extra > div.lvl-door-slide-down,

#nephitrip #nephitrip-grid-extra > div.door-slide-left,
#nephitrip #nephitrip-grid-extra > div.door-slide-right,
#nephitrip #nephitrip-grid-extra > div.lvl-door-slide-left,
#nephitrip #nephitrip-grid-extra > div.lvl-door-slide-right,

#nephitrip #nephitrip-grid-extra > div.door-rotate-right,
#nephitrip #nephitrip-grid-extra > div.door-rotate-left,

#nephitrip #nephitrip-grid-extra > div.lvl-door-roll-right,
#nephitrip #nephitrip-grid-extra > div.lvl-door-back-slide-left,

#nephitrip #nephitrip-grid-extra > div.door-scale-fade,
#nephitrip #nephitrip-grid-extra > div.door-scale-vortex {
	width:230px;
	height:252px;
	top:40px;
	left:190px;
	background-position:center;
	background-repeat:no-repeat;
}
#nephitrip #nephitrip-grid-extra > div.door-frame-2cases {
	top:50px;
}
#nephitrip #nephitrip-grid-extra > div.door-frame-3cases {
	top:50px;
}
#nephitrip #nephitrip-grid-extra > div.door-frame-4cases {
	top:50px;
}
/* -------------- */
/* ANIMATION DOORS  */
/* -------------- */
/* DOOR : slide left - right */
#nephitrip #nephitrip-grid-extra > div.door-slide-up {
	animation:nephitrip-door-slide-up 1.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
#nephitrip #nephitrip-grid-extra > div.door-slide-down {
	animation:nephitrip-door-slide-down 1.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
/* LVL DOOR (durée 1.5 -> 2.5) */
#nephitrip #nephitrip-grid-extra > div.lvl-door-slide-up {
	animation:nephitrip-door-slide-up 2.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
#nephitrip #nephitrip-grid-extra > div.lvl-door-slide-down {
	animation:nephitrip-door-slide-down 2.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
/* animation : slide up - down */
@keyframes nephitrip-door-slide-up {
	0% { background-position:0 0; }
	100% { background-position:0 -250px; }
}
@keyframes nephitrip-door-slide-down {
	0% { background-position:0 0; }
	100% { background-position:0 250px; }
}
/* -------------- */
/* DOOR : slide left - right */
#nephitrip #nephitrip-grid-extra > div.door-slide-left {
	animation:nephitrip-door-slide-left 1.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
#nephitrip #nephitrip-grid-extra > div.door-slide-right {
	animation:nephitrip-door-slide-right 1.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
/* LVL DOOR (durée 1.5 -> 2.5) */
#nephitrip #nephitrip-grid-extra > div.lvl-door-slide-left {
	animation:nephitrip-door-slide-left 2.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
/* lvl-door-slide-right */
#nephitrip #nephitrip-grid-extra > div.lvl-door-slide-right {
	animation:nephitrip-door-slide-right 2.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
/* animation : slide left - right */
@keyframes nephitrip-door-slide-left {
	0% { background-position:0 0; }
	100% { background-position:-230px 0; }
}
@keyframes nephitrip-door-slide-right {
	0% { background-position:0 0; }
	100% { background-position:230px 0; }
}
/* -------------- */
/* DOOR : portes tournantes (sur leurs gonds) */
/* ------- */
#nephitrip #nephitrip-grid-extra > div.door-rotate-right {
	width:115px;
	left:190px;
	background-position:0;
	animation:nephitrip-door-rotate-right 1.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
#nephitrip #nephitrip-grid-extra > div.door-rotate-left {
	width:115px;
	left:305px;
	background-position:-115px;
	animation:nephitrip-door-rotate-left 1.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
/* animation : portes tournantes (sur leurs gonds) */
@keyframes nephitrip-door-rotate-right {
	0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
	100% { -webkit-transform-origin:center left; -webkit-transform: perspective(750px) rotateY(-75deg) translateX(2px); 
		transform-origin:center left; transform: perspective(750px) rotateY(-75deg) translateX(2px); }
}
@keyframes nephitrip-door-rotate-left {
	0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
	100% { -webkit-transform-origin:center right; -webkit-transform: perspective(750px) rotateY(75deg) translateX(2px); 
		transform-origin:center right; transform: perspective(750px) rotateY(75deg) translateX(2px); }
}
/* -------------- */
/* LEVEL DOOR 2 (COFFRE-FORT) */
#nephitrip #nephitrip-grid-extra > div.lvl-door-roll-right > div { /*SPECIAL -> div*/
	animation:nephitrip-door-roll-right 2.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-door-roll-right {
	0% { -webkit-transform:scale(1.0); transform:scale(1.0); }
	20% { -webkit-transform:scale(0.95); transform:scale(0.95) rotate(-30deg); }
	100% { -webkit-transform:translateX(230px) rotate(-180deg); transform:translateX(230px) rotate(-180deg); }
}
/* -------------- */
/* LEVEL DOOR 3 (TRONE) */
#nephitrip #nephitrip-grid-extra > div.lvl-door-back-slide-left > div { /*SPECIAL -> div*/
	animation:nephitrip-door-back-slide-left 2.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-door-back-slide-left {
	0% { -webkit-transform:scale(1.0); transform:scale(1.0); }
	30% { -webkit-transform:scale(0.85); transform:scale(0.85); }
	100% { -webkit-transform:scale(0.85) translateX(-260px); transform:scale(0.85) translateX(-260px); }
}

/* -------------- */
/* door-scale-fade */
/*
#nephitrip #nephitrip-grid-extra > div.door-scale-fade {
	animation:nephitrip-door-scale-fade 2.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-door-scale-fade {
	0% { opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	100% { opacity:0; -webkit-transform:scale(0); transform:scale(0); }
}
*/
/* ------- */
/* door-scale-vortex */
/*
#nephitrip #nephitrip-grid-extra > div.door-scale-vortex {
	animation:nephitrip-door-scale-vortex 2.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-door-scale-vortex {
	0% { opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	100% { opacity:0; -webkit-transform:scale(0) rotate(720deg); transform:scale(0) rotate(720deg); }
}
*/
/* -------------- */
/* LVL DOOR ITEM - locked - unlocked*/
/* locked */
#nephitrip #nephitrip-grid-extra > div.lvl-door-item-locked {
	animation:nephitrip-lvl-door-item-locked 1.5s ease-in-out infinite;
}
@keyframes nephitrip-lvl-door-item-locked {
	0% { -webkit-transform:rotate(-5deg); transform:rotate(-5deg); }
	50% { -webkit-transform:rotate(5deg); transform:rotate(5deg); }
	100% { -webkit-transform:rotate(-5deg); transform:rotate(-5deg); }
}
/* unlocked */
#nephitrip #nephitrip-grid-extra > div.lvl-door-item-unlocked {
	animation:nephitrip-lvl-door-item-unlocked 1.5s ease-in-out infinite;
}
@keyframes nephitrip-lvl-door-item-unlocked {
	0% { -webkit-transform:scale(1); transform:scale(1); }
	50% { -webkit-transform:scale(1.08); transform:scale(1.08); }
	100% { -webkit-transform:scale(1); transform:scale(1); }
}

/* -------------- */
/* EXTRA : GHOST */
#nephitrip #nephitrip-grid-extra > div.ghost {
	animation:nephitrip-ghost 4s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-ghost {
	0% { top:0; opacity:0; -webkit-transform:scale(0); transform:scale(0); }
	20% { top:20px; opacity:0.5; -webkit-transform:scale(1); transform:scale(1); }
	40% { top:0; opacity:0.8; }
	60% { top:20px; opacity:0.5; -webkit-transform:scale(1); transform:scale(1); }
	100% { top:0; opacity:0; -webkit-transform:scale(0); transform:scale(0); }
}
#nephitrip #nephitrip-grid-extra > div.ghost-2 {
	animation:nephitrip-ghost-2 4s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-ghost-2 {
	0% { top:100%; opacity:0; -webkit-transform:scale(0); transform:scale(0); }
	40% { top:20px; opacity:0.5; -webkit-transform:scale(1); transform:scale(1); }
	50% { top:0; opacity:0.8; }
	60% { top:0; opacity:0.5; -webkit-transform:scale(1); transform:scale(1); }
	100% { top:-100%; opacity:0; -webkit-transform:scale(0); transform:scale(0); }
}
/* -------------- */
/* EXTRA : PUMPKIN */
#nephitrip #nephitrip-grid-extra > div.jump-and-go {
	animation:nephitrip-jump-and-go 3s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-jump-and-go {
	0% { top:0; }
	10% { top:30px; }
	20% { top:0; }
	30% { top:30px; -webkit-transform:scale(1); transform:scale(1); }
	40% { top:0; }
	50% { top:30px; }
	60% { top:0; }
	70% { top:30px; }
	80% { top:0; }
	90% { top:30px; }
	100% { top:0; -webkit-transform:scale(0); transform:scale(0); }
}
/* ----- */
/* EXTRA : RAT 2 */
#nephitrip #nephitrip-grid-extra > div.jump-and-go {
	animation:nephitrip-jump-and-go 3s ease-in-out 1;
	animation-fill-mode: forwards;
}
/* -------------- */
/* EXTRA : DEMON */
#nephitrip #nephitrip-grid-extra > div.jump-demon {
	animation:nephitrip-jump-demon 3s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-jump-demon {
	0% { top:0; }
	5% { top:30px; }
	10% { top:0; right:20px; }
	15% { top:30px; }
	20% { top:0; }
	25% { top:30px; }
	30% { top:0; -webkit-transform:scale(1); transform:scale(1); }
	35% { top:30px; }
	40% { top:0; right:20px; }
	45% { top:30px; }
	50% { top:0; }
	55% { top:30px; }
	60% { top:0; right:20px; }
	65% { top:30px; }
	70% { top:0; }
	75% { top:30px; }
	80% { top:0; right:20px; }
	85% { top:30px; }
	90% { top:0; }
	95% { top:30px; }
	100% { top:0; -webkit-transform:scale(0); transform:scale(0); }
}
/* -------------- */
/* EXTRA : SKULL 2 */
#nephitrip #nephitrip-grid-extra > div.jump-and-go {
	animation:nephitrip-jump-and-go 3s ease-in-out 1;
	animation-fill-mode: forwards;
}
/* -------------- */
/* EXTRA : SMALL GHOST */
#nephitrip #nephitrip-grid-extra > div.small-ghost {
	animation:nephitrip-small-ghost 3s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-small-ghost {
	0% { top:0; }
	20% { top:20px; }
	40% { top:0; }
	60% { top:20px; }
	80% { top:0; }
	100% { top:0; opacity:0; -webkit-transform:scale(0); transform:scale(0); }
}
/* -------------- */
/* EXTRA : BAT */
#nephitrip #nephitrip-grid-extra > div.bat-1 {
	animation:nephitrip-bat-1 3s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-bat-1 {
	0% { top:0; }
	10% { top:-10px; }
	20% { top:20px; }
	30% { top:0; }
	40% { top:30px; }
	50% { top:0; }
	60% { top:20px; }
	70% { top:0; }
	100% { top:-50px; opacity:0; -webkit-transform:scale(0); transform:scale(0); }
}
#nephitrip #nephitrip-grid-extra > div.bat-2 {
	animation:nephitrip-bat-2 3s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-bat-2 {
	0% { top:-100%; opacity:0; -webkit-transform:scale(0); transform:scale(0); }
	20% { top:30px; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	30% { top:0; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	40% { top:20px; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	50% { top:0; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	60% { top:30px; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	100% { top:-50px; opacity:0; -webkit-transform:scale(0); transform:scale(0); }
}

/* -------------- */
/* EXTRA : firefly */
#nephitrip #nephitrip-grid-extra > div.firefly-1 {
	animation:nephitrip-firefly-1 6s ease-in-out infinite;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-firefly-1 {
	0% { top:0; opacity:0; -webkit-transform:scale(1); transform:scale(1); }
	17% { top:-5px; opacity:1; -webkit-transform:scale(1.05); transform:scale(1.05); }
	33% { top:0; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	50% { top:-10px; opacity:0; -webkit-transform:scale(1.1); transform:scale(1.1); }
	67% { top:0; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	83% { top:-5px; opacity:1; -webkit-transform:scale(0.95); transform:scale(0.95); }
	100% { top:0; opacity:0; -webkit-transform:scale(1); transform:scale(1); }
}
#nephitrip #nephitrip-grid-extra > div.firefly-2 {
	animation:nephitrip-firefly-2 6s ease-in-out infinite;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-firefly-2 {
	0% { top:0; opacity:0; -webkit-transform:scale(1); transform:scale(1); }
	17% { top:-5px; opacity:1; -webkit-transform:scale(0.95); transform:scale(0.95); }
	33% { top:0; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	50% { top:-5px; opacity:0; -webkit-transform:scale(1.1); transform:scale(1.1); }
	67% { top:5px; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	83% { top:-5px; opacity:1; -webkit-transform:scale(1.05); transform:scale(1.05); }
	100% { top:0; opacity:0; -webkit-transform:scale(1); transform:scale(1); }
}

/* -------------- */
/* EXTRA - MOVES */
#nephitrip #nephitrip-grid-extra > div.up-down-1 {
	animation:nephitrip-up-down-1 3s ease-in-out infinite;
}
@keyframes nephitrip-up-down-1 {
	0% { top:0; }
	50% { top:20px; }
	100% { top:0; }
}
#nephitrip #nephitrip-grid-extra > div.up-down-2 {
	animation:nephitrip-up-down-2 2s ease-in-out infinite;
}
@keyframes nephitrip-up-down-2 {
	0% { top:0; }
	40% { top:-10px; }
	100% { top:0; }
}
#nephitrip #nephitrip-grid-extra > div.up-down-3 {
	animation:nephitrip-up-down-3 3s ease-in-out infinite;
}
@keyframes nephitrip-up-down-3 {
	0% { top:0; }
	45% { left:107px; top:0; }
	50% { left:107px; top:-5px; }
	55% { left:112px; top:0; }
	85% { left:112px; top:0; }
	90% { left:107px; top:-5px; }
	95% { left:107px; top:0; }
	100% { top:0; }
}
#nephitrip #nephitrip-grid-extra > div.up-down-grimoire {
	animation:nephitrip-up-down-grimoire 2s ease-in-out infinite;
}
@keyframes nephitrip-up-down-grimoire {
	0% { top:0; }
	40% { top:-10px; }
	100% { top:0; }
}
/* -------------- */
/* EXTRA DANGER - MOVES */
/* ------- */
/* EXTRA DANGER - LEVEL 0 */
#nephitrip #nephitrip-grid-extra > div.danger-pumpkin {
	animation:nephitrip-danger-pumpkin 3s ease-in-out infinite;
}
@keyframes nephitrip-danger-pumpkin {
	0% { top:0; }
	10% { top:-20px; }
	20% { top:0; }
	30% { top:-60px; }
	40% { top:0; }
	50% { top:-30px; }
	60% { top:0; }
	70% { top:-70px; }
	80% { top:0; }
	90% { top:-40px; }
	100% { top:0; }
}
#nephitrip #nephitrip-grid-extra > div.danger-mushroom {
	animation:nephitrip-danger-mushroom 2s ease-in-out  1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-danger-mushroom {
	0% { top:50px; -webkit-transform:scale(0.5); transform:scale(0.5); }
	100% { top:0; -webkit-transform:scale(1); transform:scale(1); }
}
/* ------- */
/* EXTRA DANGER - LEVEL 1 */
#nephitrip #nephitrip-grid-extra > div.danger-spider {
	animation:nephitrip-danger-spider 3s ease-in-out infinite;
}
@keyframes nephitrip-danger-spider {
	0% { top:0; }
	40% { top:20px; transform:rotate(3deg); }
	60% { top:20px; transform:rotate(-3deg); }
	100% { top:0; }
}
#nephitrip #nephitrip-grid-extra > div.danger-spider-item {
	animation:nephitrip-danger-spider-item 2s ease-in-out infinite;
}
@keyframes nephitrip-danger-spider-item {
	0% { top:0; }
	40% { top:-10px; }
	100% { top:0; }
}
#nephitrip #nephitrip-grid-extra > div.danger-webcage {
	animation:nephitrip-danger-webcage 2s ease-in-out infinite;
}
@keyframes nephitrip-danger-webcage {
	0% { -webkit-transform:scale(1); transform:scale(1); }
	33% { -webkit-transform:scale(0.95); transform:scale(0.95); }
	50% { -webkit-transform:scale(1); transform:scale(1); }
	67% { -webkit-transform:scale(0.95); transform:scale(0.95); }
	100% { -webkit-transform:scale(1); transform:scale(1); }
}
/* ------- */
/* EXTRA DANGER - LEVEL 2 */
#nephitrip #nephitrip-grid-extra > div.danger-steamcar,
#nephitrip #nephitrip-grid-extra > div.danger-steamlave {
	animation:nephitrip-danger-steamcar 1s ease-in-out infinite;
}
@keyframes nephitrip-danger-steamcar {
	0% { top:0; }
	25% { top:2px; }
	50% { top:0; }
	75% { top:2px; }
	100% { top:0; }
}

#nephitrip #nephitrip-grid-extra > div.danger-steamcar-item,
#nephitrip #nephitrip-grid-extra > div.danger-steamlave-item {
	animation:nephitrip-danger-steamcar-item 2s ease-in-out infinite;
}
@keyframes nephitrip-danger-steamcar-item {
	0% { opacity:0; top:0; }
	10% { opacity:1; top:0; }
	80% { opacity:1; top:110px; }
	100% { opacity:0; top:110px; }
}
/* ------- */
/* EXTRA DANGER - LEVEL 3 */
#nephitrip #nephitrip-grid-extra > div.danger-bedroom {
	animation:nephitrip-danger-bedroom 1s ease-in-out infinite;
}
@keyframes nephitrip-danger-bedroom {
	0% { top:0; }
	20% { top:-10px; }
	40% { top:0; }
	60% { top:-20px; }
	80% { top:0; }
	100% { top:0; }
}
#nephitrip #nephitrip-grid-extra > div.danger-bedroom-item,
#nephitrip #nephitrip-grid-extra > div.danger-fireplace-item {
	animation:nephitrip-danger-bedroom-item 2s ease-in-out infinite;
}
@keyframes nephitrip-danger-bedroom-item {
	0% { top:0; }
	40% { top:-20px; }
	100% { top:0; }
}
#nephitrip #nephitrip-grid-extra > div.danger-fireplace {
	animation:nephitrip-danger-fireplace 1s ease-in-out infinite;
}
@keyframes nephitrip-danger-fireplace {
	0% { top:0; }
	50% { top:-4px; }
	100% { top:0; }
}

/* -------------- */
/* EXTRA DANGER  - LEVEL 4 */
#nephitrip #nephitrip-grid-extra > div.danger-books-item {
	animation:nephitrip-danger-books-item 3s ease-in-out infinite;
}
@keyframes nephitrip-danger-books-item {
	0% { top:0; }
	45% { left:107px; top:0; }
	50% { left:107px; top:-5px; }
	55% { left:112px; top:0; }
	85% { left:112px; top:0; }
	90% { left:107px; top:-5px; }
	95% { left:107px; top:0; }
	100% { top:0; }
}

/*
#nephitrip #nephitrip-grid-extra > div.danger {
	animation:nephitrip-danger 1s ease-in-out infinite;
}
@keyframes nephitrip-danger {
	0% { -webkit-transform:scale(1); transform:scale(1); }
	50% { -webkit-transform:scale(0.98); transform:scale(0.98); }
	100% { -webkit-transform:scale(1); transform:scale(1); }
}
*/

/* -------------- */
/* EXTRA FRIEND - LEVEL 0 : DEMON */
#nephitrip #nephitrip-grid-extra > div.friend-demon {
	animation:nephitrip-friend-demon 3s ease-in-out infinite;
}
@keyframes nephitrip-friend-demon {
	0% { top:0; }
	10% { top:-20px; }
	20% { top:0; }
	30% { top:-30px; }
	40% { top:0; }
	50% { top:-30px; }
	60% { top:0; }
	70% { top:-20px; }
	80% { top:0; }
	90% { top:-40px; }
	100% { top:0; }
}
#nephitrip #nephitrip-grid-extra > div.friend-demon-item {
	animation:nephitrip-friend-demon-item 4s ease-in-out infinite;
}
@keyframes nephitrip-friend-demon-item {
	0% { top:0; }
	40% { top:-10px; }
	100% { top:0; }
}

/* -------------- */
/* EXTRA FRIEND - LEVEL 1 : NOUNOU */
#nephitrip #nephitrip-grid-extra > div.friend-nounou {
	animation:nephitrip-friend-nounou 3s ease-in-out infinite;
}
@keyframes nephitrip-friend-nounou {
	0% { top:0; }
	50% { top:20px; }
	100% { top:0; }
}
#nephitrip #nephitrip-grid-extra > div.friend-nounou-item {
	animation:nephitrip-friend-nounou-item 4s ease-in-out infinite;
}
@keyframes nephitrip-friend-nounou-item {
	0% { top:0; }
	40% { top:-10px; }
	100% { top:0; }
}

/* -------------- */
/* EXTRA FRIEND - LEVEL 2 : BIP */
#nephitrip #nephitrip-grid-extra > div.friend-bip {
	animation:nephitrip-friend-bip 3s ease-in-out infinite;
}
@keyframes nephitrip-friend-bip {
	0% { left:97px; top:0; }
	40% { left:97px; top:0; }
	45% { left:107px; top:-10px; }
	50% { left:117px; top:0; }
	90% { left:117px; top:0; }
	95% { left:107px; top:-10px; }
	100% { left:97px; top:0; }
}
#nephitrip #nephitrip-grid-extra > div.friend-bip-item {
	animation:nephitrip-friend-bip-item 4s ease-in-out infinite;
}
@keyframes nephitrip-friend-bip-item {
	0% { top:0; }
	40% { top:-10px; }
	100% { top:0; }
}
#nephitrip #nephitrip-grid-extra.nephitrip-grid-extra-hide-fade-once { 
	animation:nephitrip-grid-extra 2s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-grid-extra {
	0% { opacity:1; }
	100% { opacity:0; }
}
/* -------------- */
/* TOP FRIENDS    */
/* -------------- */
#nephitrip .nephitrip-friend {
	display:none; /* on masque */
}
/* -------------- */
/* TOP FRIEND - LEVEL 0 : DEMON */
#nephitrip-friend-0-demon { /* lierre-2 */
	position:absolute;
	display:block;
	width:300px;
	height:300px;
	bottom:290px;
	right:-70px;
	background:url(img/deco/friend-0-demon-lierre-2.png) top right no-repeat;
	background-size:300px 180px;
}
#nephitrip-friend-0-demon:before { /* lierre-1 */
	position:absolute;
	display:block;
	content:'';
	width:300px;
	height:180px;
	top:0;
	right:0;
	background:url(img/deco/friend-0-demon-lierre-1.png) top right no-repeat;
	background-size:300px 180px;

	animation:nephitrip-move-friend-0-demon-lierre-1 15s ease-in-out infinite;
}
@keyframes nephitrip-move-friend-0-demon-lierre-1 {
	0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
	35% { -webkit-transform:rotate(8deg); transform:rotate(8deg); }
	50% { -webkit-transform:rotate(5deg); transform:rotate(5deg); }
	65% { -webkit-transform:rotate(-3deg); transform:rotate(-3deg); }
	70% { -webkit-transform:rotate(2deg); transform:rotate(2deg); }
	100% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
}
#nephitrip-friend-0-demon > div { /* socle */
	position:absolute;
	display:block;
	width:300px;
	height:300px;
	top:0;
	right:30px;
	background:url(img/deco/friend-0-demon-socle.png) bottom right no-repeat;
	background-size:300px 130px;
	z-index:1;
}
#nephitrip-friend-0-demon > div:after { /* demon */
	position:absolute;
	display:block;
	content:'';
	width:100px;
	height:100px;
	bottom:100px;
	right:50px;
	background:url(img/deco/friend-0-demon-demon.png) center center no-repeat;
	background-size:100px 100px;

	animation:nephitrip-move-friend-0-demon-demon 20s ease-in-out infinite;
}
@keyframes nephitrip-move-friend-0-demon-demon {
	0% { bottom:80px; }
	40% { bottom:80px; -webkit-transform:scaleX(1); transform:scaleX(1); }
	41% { bottom:80px; -webkit-transform:scaleX(-1); transform:scaleX(-1); }

	80% { bottom:80px; -webkit-transform:scaleX(-1); transform:scaleX(-1); }
	81% { bottom:80px; -webkit-transform:scaleX(1); transform:scaleX(1); }

	94% { bottom:80px; }
	95% { bottom:120px; }
	96% { bottom:80px; }
	97% { bottom:120px; }
	98% { bottom:80px; }
	99% { bottom:120px; }
	100% { bottom:80px; }
}
body.nephitrip-portrait #nephitrip #nephitrip-friend-0-demon {
	right:-90px;
	background:none;
}
body.nephitrip-portrait #nephitrip #nephitrip-friend-0-demon:before {
	top:-240px;
}
body.nephitrip-portrait #nephitrip #nephitrip-friend-0-demon > div {
	right:40px;
}

/* -------------- */
/* TOP FRIEND - LEVEL 1 : NOUNOU */
#nephitrip-friend-1-nounou { /* socle */
	position:absolute;
	display:block;
	width:300px;
	height:300px;
	bottom:290px;
	right:-50px;
	z-index:1;
}
body.nephitrip-portrait #nephitrip #nephitrip-friend-1-nounou {
	right:-50px;
}
#nephitrip-friend-1-nounou:before { /* socle */
	position:absolute;
	display:block;
	content:'';
	width:300px;
	height:130px;
	bottom:0;
	right:0;
	background:url(img/deco/friend-1-nounou-socle.png) bottom right no-repeat;
	background-size:300px 130px;
	z-index:2;
}
#nephitrip-friend-1-nounou > div {
	position:absolute;
	display:block;
	width:300px;
	height:300px;
	bottom:-15px;
	right:-40px;
	z-index:1;

	animation:nephitrip-move-friend-1-nounou 4s ease-in-out infinite;
}
@keyframes nephitrip-move-friend-1-nounou {
	0% { bottom:-15px; }
	50% { bottom:0; opacity:0.6; }
	100% { bottom:-15px; }
}
#nephitrip-friend-1-nounou > div:before { /* corps */
	position:absolute;
	display:block;
	content:'';
	width:200px;
	height:170px;
	bottom:40px;
	right:50px;
	background:url(img/deco/friend-1-nounou-corps.png) center center no-repeat;
	background-size:200px 170px;
	z-index:1;
}
#nephitrip-friend-1-nounou > div:after { /* tete */
	position:absolute;
	display:block;
	content:'';
	width:170px;
	height:170px;
	top:-30px;
	right:65px;
	background:url(img/deco/friend-1-nounou-tete.png) top right no-repeat;
	background-size:170px 170px;

	animation:nephitrip-move-friend-1-nounou-tete 30s ease-in-out infinite;
	z-index:1;
}
@keyframes nephitrip-move-friend-1-nounou-tete {
	0% { -webkit-transform:rotate(0deg); transform:-rotate(0deg); }
	25% { -webkit-transform:rotate(20deg); transform:-rotate(20deg); }
	40% { -webkit-transform:rotate(5deg); transform:-rotate(5deg); }
	70% { -webkit-transform:rotate(10deg); transform:-rotate(10deg); }
	100% { -webkit-transform:rotate(0deg); transform:-rotate(0deg); }
}
/* -------------- */
/* TOP FRIEND - LEVEL 2 : BIP */
#nephitrip-friend-2-bip {
	position:absolute;
	display:block;
	width:300px;
	height:300px;
	bottom:290px;
	right:-50px;
}
body.nephitrip-portrait #nephitrip #nephitrip-friend-2-bip {
}
#nephitrip-friend-2-bip:before { /* socle */
	position:absolute;
	display:block;
	content:'';
	width:260px;
	height:100px;
	bottom:0;
	right:0;
	background:url(img/deco/friend-2-bip-socle.png) bottom right no-repeat;
	background-size:260px 100px;
}
#nephitrip-friend-2-bip:after { /* corps */
	position:absolute;
	display:block;
	content:'';
	width:120px;
	height:130px;
	bottom:45px;
	right:10px;
	background:url(img/deco/friend-2-bip-corps.png) bottom right no-repeat;
	background-size:120px 130px;
}
#nephitrip-friend-2-bip > div {
	position:absolute;
	display:block;
	width:300px;
	height:300px;
	top:0;
	right:0;
	z-index:1;
}
#nephitrip-friend-2-bip > div:before { /* tete */
	position:absolute;
	display:block;
	content:'';
	width:170px;
	height:170px;
	top:15px;
	right:0;
	background:url(img/deco/friend-2-bip-tete.png) top right no-repeat;
	background-size:170px 170px;

	animation:nephitrip-move-friend-2-bip-tete 30s ease-in-out infinite;
}
@keyframes nephitrip-move-friend-2-bip-tete {
	0% { -webkit-transform:rotate(0deg); transform:-rotate(0deg); }
	25% { -webkit-transform:rotate(20deg) scaleX(1); transform:-rotate(20deg) scaleX(1); }
	26% { -webkit-transform:rotate(-20deg) scaleX(-1); transform:-rotate(-20deg) scaleX(-1); }

	39% { -webkit-transform:rotate(-15deg) scaleX(-1); transform:-rotate(-15deg) scaleX(-1); }
	40% { -webkit-transform:rotate(15deg) scaleX(1); transform:-rotate(15deg) scaleX(1); }

	60% { -webkit-transform:rotate(10deg) scaleX(1); transform:-rotate(10deg) scaleX(1); }
	100% { -webkit-transform:rotate(0deg); transform:-rotate(0deg); }
}
#nephitrip-friend-2-bip > div:after { /* epee */
	position:absolute;
	display:block;
	content:'';
	width:200px;
	height:170px;
	top:100px;
	right:20px;
	background:url(img/deco/friend-2-bip-epee.png) top right no-repeat;
	background-size:200px 170px;

	animation:nephitrip-move-friend-2-bip-epee 10s ease-in-out infinite;
}
@keyframes nephitrip-move-friend-2-bip-epee {
	0% { -webkit-transform:rotate(0deg); transform:-rotate(0deg); }
	25% { -webkit-transform:rotate(20deg); transform:-rotate(20deg); }
	40% { -webkit-transform:rotate(5deg); transform:-rotate(5deg); }
	70% { -webkit-transform:rotate(10deg); transform:-rotate(10deg); }
	100% { -webkit-transform:rotate(0deg); transform:-rotate(0deg); }
}

/* -------------- */
/* TOP FRIEND - LEVEL 3 : LUCIE */
#nephitrip-friend-3-lucie { /* corps */
	position:absolute;
	display:block;
	width:300px;
	height:300px;
	bottom:290px;
	right:-50px;
	z-index:1;
}
body.nephitrip-portrait #nephitrip #nephitrip-friend-3-lucie {
}
#nephitrip-friend-3-lucie:before { /* corps */
	position:absolute;
	display:block;
	content:'';
	width:160px;
	height:180px;
	bottom:20px;
	right:20px;
	background:url(img/deco/friend-3-lucie-corps.png) bottom right no-repeat;
	background-size:160px 180px;
}
#nephitrip-friend-3-lucie:after { /* socle */
	position:absolute;
	display:block;
	content:'';
	width:200px;
	height:60px;
	bottom:-18px;
	right:0;
	background:url(img/deco/friend-3-lucie-socle.png) bottom right no-repeat;
	background-size:200px 60px;
	z-index:2;
}
#nephitrip-friend-3-lucie > div {
	position:absolute;
	display:block;
	width:200px;
	height:300px;
	top:-18px;
	right:0;
	z-index:1;

	animation:nephitrip-move-friend-3-lucie-tete 30s ease-in-out infinite;
}
@keyframes nephitrip-move-friend-3-lucie-tete {
	0% { -webkit-transform:rotate(20deg); transform:-rotate(20deg); }
	25% { -webkit-transform:rotate(35deg); transform:-rotate(35deg); }
	40% { -webkit-transform:rotate(15deg); transform:-rotate(15deg); }
	70% { -webkit-transform:rotate(25deg); transform:-rotate(25deg); }
	100% { -webkit-transform:rotate(20deg); transform:-rotate(20deg); }
}

#nephitrip-friend-3-lucie > div:before { /* tete */
	position:absolute;
	display:block;
	content:'';
	width:200px;
	height:200px;
	top:20px;
	right:0;
	background:url(img/deco/friend-3-lucie-tete.png) top right no-repeat;
	background-size:200px 200px;
	z-index:1;
}
#nephitrip-friend-3-lucie > div:after { /* yeux */
	position:absolute;
	display:block;
	content:'';
	width:74px;
	height:40px;
	top:113px;
	right:76px;
	background:url(img/deco/friend-3-lucie-yeux.gif) center center no-repeat;
	background-size:74px 40px;
	z-index:1;
}

/* -------------- */
/* TOP FRIEND - LEVEL 4 : MARION */
#nephitrip-friend-4-marion, 
#nephitrip-friend-5-final {
	position:absolute;
	display:block;
	width:245px;
	height:280px;
	bottom:310px;
	right:-50px;
}
#nephitrip-friend-4-marion:before, 
#nephitrip-friend-5-final:before { /* ailes */
	position:absolute;
	display:block;
	content:'';
	width:110px;
	height:140px;
	top:0;
	right:0;
	background:url(img/deco/marion-statue-ailes.png) center center no-repeat;
	background-size:110px 100%;

	animation:nephitrip-move-marion-statue-ailes 15s ease-in-out infinite;
}
@keyframes nephitrip-move-marion-statue-ailes {
	0% { height:140px; top:5px; width:110px; right:5px; }
	30% { height:110px; top:35px; width:110px; right:5px; }
	60% { height:140px; top:5px; width:110px; right:5px; }
	90% { height:110px; top:35px; width:115px; right:0px; }
	92% { height:140px; top:5px; width:110px; right:5px; }
	94% { height:110px; top:35px; width:115px; right:0px; }
	96% { height:140px; top:5px; width:110px; right:5px; }
	98% { height:110px; top:35px; width:115px; right:0px; }
	100% { height:140px; top:5px; width:110px; right:5px; }
}
#nephitrip-friend-4-marion:after, 
#nephitrip-friend-5-final:after { /* tete */
	position:absolute;
	display:block;
	content:'';
	width:170px;
	height:170px;
	top:0;
	right:59px;
	background:url(img/deco/marion-statue-tete.png) center center no-repeat;

	animation:nephitrip-move-marion-statue-tete 30s ease-in-out infinite;
}
@keyframes nephitrip-move-marion-statue-tete {
	0% { -webkit-transform:rotate(0deg); transform:-rotate(0deg); }
	25% { -webkit-transform:rotate(20deg); transform:-rotate(20deg); }
	40% { -webkit-transform:rotate(5deg); transform:-rotate(5deg); }
	70% { -webkit-transform:rotate(10deg); transform:-rotate(10deg); }
	100% { -webkit-transform:rotate(0deg); transform:-rotate(0deg); }
}
#nephitrip-friend-4-marion > div, 
#nephitrip-friend-5-final > div { /* buste */
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:0;
	right:0;
	background:url(img/deco/marion-statue-buste.png) center center no-repeat;
	z-index:1;
}
#nephitrip-friend-4-marion > div:after, 
#nephitrip-friend-5-final > div:after { /* lierre */
	position:absolute;
	display:block;
	content:'';
	width:210px;
	height:170px;
	top:200px;
	right:5px;
	background:url(img/deco/marion-statue-lierre.png) center center no-repeat;

	animation:nephitrip-move-marion-statue-lierre 30s ease-in-out infinite;
}
@keyframes nephitrip-move-marion-statue-lierre {
	0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
	35% { -webkit-transform:rotate(8deg); transform:rotate(8deg); }
	50% { -webkit-transform:rotate(5deg); transform:rotate(5deg); }
	65% { -webkit-transform:rotate(-3deg); transform:rotate(-3deg); }
	70% { -webkit-transform:rotate(2deg); transform:rotate(2deg); }
	100% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
}
/* -------------- */
/* DECO : NEPHI */
#nephitrip-nephi-buste {
	position:absolute;
	display:block;
	width:175px;
	height:175px;
	left:-17px;
	bottom:-45px;
	background:url(img/deco/nephi-buste.png) bottom left no-repeat;
}
#nephitrip-nephi-buste > div { /* tete */
	position:absolute;
	display:block;
	width:175px;
	height:175px;
	left:0;
	bottom:48px;
	z-index:1;
	background:url(img/deco/nephi-tete.png) bottom left no-repeat;

	animation:nephitrip-move-nephi-tete 30s ease-in-out infinite;
}
@keyframes nephitrip-move-nephi-tete {
	0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
	35% { -webkit-transform:rotate(-15deg); transform:rotate(-15deg); }
	50% { -webkit-transform:rotate(5deg); transform:rotate(5deg); }
	65% { -webkit-transform:rotate(-10deg); transform:rotate(-10deg); }
	70% { -webkit-transform:rotate(5deg); transform:rotate(5deg); }
	100% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
}
#nephitrip-nephi-buste > div:before,
#nephitrip-nephi-buste > div:after { /* yeux */
	position:absolute;
	display:block;
	content:'';
	width:62px;
	height:38px;
	top:90px;
	left:82px;
}
#nephitrip-nephi-buste > div:before { /* yeux */
	background:url(img/deco/nephi-yeux-1.gif) bottom left no-repeat;
}
#nephitrip-nephi-buste > div:after { /* yeux */
	background:url(img/deco/nephi-yeux-2.gif) bottom left no-repeat;
}
/* -------------- */
/* DECO : DEMON */
#nephitrip-deco-demon {
	position:absolute;
	width:100px;
	height:100px;
	bottom:20px;
	right:340px;
	background:url(img/deco/deco-demon-ombre.png) center center no-repeat;
	background-size:contain;
	display:none;/* on masque */
}
#nephitrip-deco-demon:before {
	position:absolute;
	display:block;
	content:'';
	width:100px;
	height:100px;
	background:url(img/deco/deco-demon.png) center center no-repeat;
	background-size:contain;

	animation:nephitrip-deco-demon 18s ease-in-out infinite;
}
@keyframes nephitrip-deco-demon {
	0% { bottom:0; }
	40% { bottom:0; -webkit-transform:scaleX(1); transform:scaleX(1); }
	41% { bottom:0; -webkit-transform:scaleX(-1); transform:scaleX(-1); }

	80% { bottom:0; -webkit-transform:scaleX(-1); transform:scaleX(-1); }
	81% { bottom:0; -webkit-transform:scaleX(1); transform:scaleX(1); }

	94% { bottom:0; }
	95% { bottom:20px; }
	96% { bottom:0; }
	97% { bottom:20px; }
	98% { bottom:0; }
	99% { bottom:20px; }
	100% { bottom:0; }
}
/* -------------- */
/* BEFORE START */
#nephitrip-btns-move, #compass, #nephitrip-spot-me {
	display:none; /* on masque au départ */
}
/* BEFORE START - DECO ANIMATION */
#nephitrip-intro-img-deco {
	position:absolute;
	width:702px;
	height:446px;
	top:-25px;
	left:-30px;
	animation:nephitrip-intro-img-deco 9s ease-in-out infinite;
}
@keyframes nephitrip-intro-img-deco {
	0% { -webkit-transform:scale(1.0); transform:scale(1.0); }
	30% { -webkit-transform:scale(1.0); transform:scale(1.0); -webkit-transform:rotate(-0.5deg); transform:rotate(-0.5deg); }
	60% { -webkit-transform:scale(1.0); transform:scale(1.0); -webkit-transform:rotate(0.5deg); transform:rotate(0.5deg); }
	92% { -webkit-transform:scale(1.0); transform:scale(1.0); }
	94% { -webkit-transform:scale(1.025); transform:scale(1.025); }
	96% { -webkit-transform:scale(1.0); transform:scale(1.0); }
	98% { -webkit-transform:scale(1.025); transform:scale(1.025); }
	100% { -webkit-transform:scale(1.0); transform:scale(1.0); }
}
/* -------------- */
/* BEFORE START - BOUTON START GAME */
/* END GAME - BOUTON THE END */
#nephitrip-btn-start-wrap,
#nephitrip-btn-end-wrap {
	position:absolute;
	width:400px;
	height:60px;
	bottom:20px;
	left:170px;
	cursor:pointer;
	text-align:center;
}
#nephitrip-btn-end-wrap {
	display:none; /* on masque*/
	width:200px;
	bottom:20px;
	left:210px;
}
#nephitrip-btn-start.nephitrip-btn,
#nephitrip-btn-end.nephitrip-btn {
	display:inline-block;
	margin:0 auto;
	padding:2px 15px 7px;
	font-size:32px;
	line-height:32px;
	font-family:"Anton",Arial,sans-serif;
	text-transform:uppercase;
	letter-spacing:0.1em;
	text-decoration:none;
	text-shadow:3px 0 0 #50233e, -3px 0 0 #50233e, 0 3px 0 #50233e, 0 -3px 0 #50233e, 3px 3px #50233e, -3px -3px 0 #50233e, 3px -3px 0 #50233e, -3px 3px 0 #50233e;/*rouge fonce*/
	cursor:pointer;
	color:#e4e4c5;/*jaune pale*/
	background:#50233e;/*rouge fonce*/
	box-shadow:0 0 20px #222;
	border:2px solid #c7c7b7;/*gris clair*/
	border-radius:10px / 5px;
	z-index:1;
	animation:nephitrip-btn-start 3s ease-in-out infinite;
}
#nephitrip-btn-start.nephitrip-btn > big,
#nephitrip-btn-end.nephitrip-btn > big {
	font-size:48px;
}
@keyframes nephitrip-btn-start {
	0% { -webkit-transform:scale(1.0); transform:scale(1.0); }
	50% { -webkit-transform:scale(1.05); transform:scale(1.05); }
	100% { -webkit-transform:scale(1.0); transform:scale(1.0); }
}
/* Btn Replay Animation Finale */
#nephitrip-btn-end-replay {
	display:none;
}
/* -------------- */
/* END GAME - ANIMATION de FIN */
#nephitrip #nephitrip-grid-endgame {
	position:absolute;
	width:610px;
	height:440px; /*368px*/
	top:5px;
	left:5px;
	overflow:hidden;
	opacity:0; 
	display:none; /* on masque */
}
#nephitrip #nephitrip-grid-endgame > div {
	position:absolute;
	content:'';
	width:610px;
	height:440px; /*368px*/
	top:0; left:0;
	background-size:100% 100%;

	-webkit-transition:all 0s;
	-moz-transition:all 0s;
	transition:all 0s;
}
#nephitrip #nephitrip-grid-endgame.nephitrip-img-endgame-start-anim { 
	display:block;
	animation:nephitrip-img-endgame-start-anim 2s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-img-endgame-start-anim {
	0% { opacity:0; }
	100% { opacity:1; }
}
/* END GAME - SOCLE */
#nephitrip #nephitrip-grid-endgame #nephitrip-img-endgame-socle { 
	background:url(img/deco/endgame-socle.png) center center no-repeat;
}
/* END GAME - NEPHI */
#nephitrip #nephitrip-grid-endgame #nephitrip-img-endgame-nephi { 
	background:url(img/deco/endgame-nephi.png) center center no-repeat;
}
/* END GAME - GRIMOIRE */
#nephitrip #nephitrip-grid-endgame #nephitrip-img-endgame-grimoire { 
	background:url(img/deco/endgame-grimoire.png) center center no-repeat;
	animation:nephitrip-img-endgame-grimoire-up-down 2s ease-in-out infinite;
}
@keyframes nephitrip-img-endgame-grimoire-up-down {
	0% { top:0; }
	40% { top:-10px; }
	100% { top:0; }
}
/* END GAME - ORBS */
#nephitrip #nephitrip-grid-endgame #nephitrip-img-endgame-orbs { 
	opacity:0;
	background:url(img/deco/endgame-orbs.png) center center no-repeat;
}
#nephitrip #nephitrip-grid-endgame #nephitrip-img-endgame-orbs.nephitrip-img-endgame-orbs-anim { 
	animation:nephitrip-img-endgame-orbs-up-down 6s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-img-endgame-orbs-up-down {
	0% { top:0; opacity:0; -webkit-transform:scale(1); transform:scale(1); }
	17% { top:-5px; opacity:1; -webkit-transform:scale(1.05); transform:scale(1.05); }
	33% { top:0; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	50% { top:-10px; opacity:0; -webkit-transform:scale(1.1); transform:scale(1.1); }
	67% { top:0; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	83% { top:-5px; opacity:1; -webkit-transform:scale(1.05); transform:scale(1.05); }
	100% { top:0; opacity:0; -webkit-transform:scale(1); transform:scale(1); }
}
/* END GAME - MARION STATUE */
#nephitrip #nephitrip-grid-endgame #nephitrip-img-endgame-marion-statue { 
	background:url(img/deco/endgame-marion-statue.png) center center no-repeat;
}
#nephitrip #nephitrip-grid-endgame #nephitrip-img-endgame-marion-statue.nephitrip-img-endgame-marion-statue-hide-fade-once { 
	animation:nephitrip-img-endgame-marion-statue-hide-fade-once 4s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-img-endgame-marion-statue-hide-fade-once {
	0% { opacity:1; }
	100% { opacity:0; }
}
/* END GAME - MARION HUMAINE */
#nephitrip #nephitrip-grid-endgame #nephitrip-img-endgame-marion-humaine { 
	background:url(img/deco/endgame-marion-humaine.png) center center no-repeat;
	opacity:0; 
}
#nephitrip #nephitrip-grid-endgame #nephitrip-img-endgame-marion-humaine.nephitrip-img-endgame-marion-humaine-show-fade-once { 
	animation:nephitrip-img-endgame-marion-humaine-show-fade-once 4s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-img-endgame-marion-humaine-show-fade-once {
	0% { opacity:0; }
	100% { opacity:1; }
}
/* -------------- */
/* END GAME - Animation Finale */
#nephitrip #nephitrip-grid-endgame.nephitrip-img-endgame-last-anim #nephitrip-img-endgame-socle,
#nephitrip #nephitrip-grid-endgame.nephitrip-img-endgame-last-anim #nephitrip-img-endgame-grimoire
{ 
	animation:nephitrip-img-endgame-last-anim-fade-hide 2s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-img-endgame-last-anim-fade-hide {
	0% { opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	100% { opacity:0; -webkit-transform:scale(0); transform:scale(0); }
}
#nephitrip #nephitrip-grid-endgame.nephitrip-img-endgame-last-anim #nephitrip-img-endgame-nephi
{ 
	opacity:1;
	animation:nephitrip-img-endgame-last-anim-nephi 4s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-img-endgame-last-anim-nephi {
	0% { left:0; }
	30% { left:0; }
	100% { left:80px; }
}
#nephitrip #nephitrip-grid-endgame.nephitrip-img-endgame-last-anim #nephitrip-img-endgame-marion-humaine
{ 
	opacity:1;
	animation:nephitrip-img-endgame-last-anim-marion-humaine 3s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-img-endgame-last-anim-marion-humaine {
	0% { left:0; }
	30% { left:0; }
	100% { left:-30px; }
}
/* -------------- */
/* ICONES - MENU */
#nephitrip #ico-wrap {
	position:absolute;
	display:block;
	width:50px;
	height:50px;
	bottom:-38px;
	right:-35px;
}
#nephitrip #ico-wrap > div { /* icones */
	position:absolute;
	display:block;
	content:'';
	width:50px;
	height:50px;
	bottom:0;
	right:0;
	cursor:pointer;
	border-radius:30px;
	border:6px solid #353535; /*gris foncé*/
	background-size:30px;
	z-index:4;
}
#nephitrip #ico-wrap.open > div {
	z-index:10;
}
/* ----- */
/* ICONES */
#nephitrip #ico-wrap .ico-menu {
	bottom:0;
	right:0;
	background:#646464/*gris moyen*/ url(img/deco/ico-menu.png) center center no-repeat;
	-webkit-transform:rotate(0deg); transform:rotate(0deg); 
	animation:nephitrip-ico-menu-roll-in 1s ease-in-out 1;
}
@keyframes nephitrip-ico-menu-roll-in {
	100% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
	0% { -webkit-transform:rotate(-360deg)); transform:rotate(-360deg); }
}
#nephitrip #ico-wrap.open .ico-menu {
	animation:nephitrip-ico-menu-roll-out 1s ease-in-out 1;
}
@keyframes nephitrip-ico-menu-roll-out {
	0% { -webkit-transform:rotate(360deg)); transform:rotate(360deg); }
	100% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
}
/* ----- */
/* ICO BULL */
#nephitrip #ico-wrap .ico-bull {
	background:#646464/*gris moyen*/ url(img/deco/ico-bull.png) center center no-repeat;
	background-size:contain;
}
/* ----- */
/* ICO JR62 */
#nephitrip #ico-wrap .ico-jr62 {
	background:#646464/*gris moyen*/ url(img/deco/ico-jr62.png) center center no-repeat;
	background-size:contain;
}
/* ----- */
/* ICO ROTATE (paysage/portrait) */
#nephitrip #ico-wrap .ico-rotate {
	background:#646464/*gris moyen*/ url(img/deco/ico-rotate.png) center center no-repeat;
}
/* ----- */
/* ICO LANGUE */
#nephitrip #ico-wrap .ico-langue {
	text-align:center;
	line-height:37px;
	color:#e4e4c5;/*jaune pale*/
	font-size:14px;
	font-family:"Anton",Arial,sans-serif;
	letter-spacing:0.0em;
	background:#646464/*gris moyen*/ url(img/deco/ico-langue.png) center center no-repeat;
}
/* ----- */
/* ICO MUSIC */
#nephitrip #ico-wrap .ico-music {
	background:#646464/*gris moyen*/ url(img/deco/ico-music.png) center center no-repeat;
}
#nephitrip #ico-wrap .ico-music-audio {
	display:none; /* on masque le lecteur audio */
}
/* ----- */
/* ICO INFO */
#nephitrip #ico-wrap .ico-info {
	background:#646464/*gris moyen*/ url(img/deco/ico-info.png) center center no-repeat;
}
/* ----- */
/* ICO CREDIT */
#nephitrip #ico-wrap .ico-credit {
	background:#646464/*gris moyen*/ url(img/deco/ico-credit.png) center center no-repeat;
}
/* ----- */
/* ICO REPLAY */
#nephitrip #ico-wrap .ico-replay {
	background:#646464/*gris moyen*/ url(img/deco/ico-replay.png) center center no-repeat;
}
/* -------------- */
#nephitrip #ico-wrap > div:not(.ico-menu) { opacity:0; }
#nephitrip #ico-wrap .ico-rotate { right:50px; }
#nephitrip #ico-wrap .ico-langue { right:100px; }
#nephitrip #ico-wrap .ico-music { right:150px; }
#nephitrip #ico-wrap .ico-credit { right:200px; }
/*
#nephitrip #ico-wrap .ico-info { right:250px; }
#nephitrip #ico-wrap .ico-replay { right:300px; }
*/
#nephitrip #ico-wrap .ico-replay { right:250px; }

#nephitrip #ico-wrap .ico-bull { right:-25px; bottom:-40px; }
#nephitrip #ico-wrap .ico-jr62 { right:25px; bottom:-40px; }

/* -------------- */
/* fermeture menu */
#nephitrip #ico-wrap > div:not(.ico-menu) { 
	animation:nephitrip-menu-ico-close 0.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes nephitrip-menu-ico-close {
	0% { opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	100% { opacity:0; -webkit-transform:scale(0); transform:scale(0); }
}
/* -------------- */
/* ouverture menu */
#nephitrip #ico-wrap.open > div:not(.ico-menu) { 
	animation:nephitrip-menu-ico-open 0.5s ease-in-out 1;
	animation-fill-mode: forwards;
	
}
@keyframes nephitrip-menu-ico-open {
	0% { opacity:0; -webkit-transform:scale(0); transform:scale(0); }
	100% { opacity:1; -webkit-transform:scale(1); transform:scale(1); }
}
#nephitrip #ico-wrap.open > div:not(.ico-menu):hover { 
	animation:nephitrip-menu-ico-roll 0.5s ease-in-out infinite;	
}
@keyframes nephitrip-menu-ico-roll {
	0% { opacity:1; -webkit-transform:scale(1.0) rotate(0deg); transform:scale(1.0) rotate(0deg); }
	50% { opacity:1; -webkit-transform:scale(1.0) rotate(15deg); transform:scale(1.0) rotate(15deg); }
	100% { opacity:1; -webkit-transform:scale(1.0) rotate(0deg); transform:scale(1.0) rotate(0deg); }
}

/* -------------- */
/* ICONES - HEROS */
#nephitrip #ico-hero-wrap {
	position:absolute;
	display:block;
	width:50px;
	height:50px;
	bottom:-35px;
	right:-35px;
}
#nephitrip #ico-hero-wrap > div { /* icones */
	position:absolute;
	display:block;
	content:'';
	width:50px;
	height:50px;
	bottom:0;
	right:0; 
	cursor:pointer;
	border-right:5px solid #353535; /*gris foncé*/
	border-left:5px solid #353535; /*gris foncé*/
	background:#646464;/*gris moyen*/
	z-index:4;
}
#nephitrip #ico-hero-wrap > div:not(.open) {
	height:0;
}
#nephitrip #ico-hero-wrap > div.open:first-child {
	border-bottom:5px solid #353535; /*gris foncé*/
	border-radius:0 0 10px 10px;
}
#nephitrip #ico-hero-wrap > div.open.last {
	border-top:5px solid #353535; /*gris foncé*/
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
#nephitrip #ico-hero-wrap > div:before { 
	position:absolute;
	content:'';
	width:100%;
	height:100%;
	top:0; left:0; right:0; bottom:0;
}
#nephitrip #ico-hero-wrap > div.open:hover:before { 
	animation:nephitrip-menu-ico-hero-roll 1s ease-in-out infinite;	
}
@keyframes nephitrip-menu-ico-hero-roll {
	0% { opacity:1; -webkit-transform:scale(1.0) rotate(0deg); transform:scale(1.0) rotate(0deg); }
	50% { opacity:1; -webkit-transform:scale(1.0) rotate(10deg); transform:scale(1.0) rotate(10deg); }
	100% { opacity:1; -webkit-transform:scale(1.0) rotate(0deg); transform:scale(1.0) rotate(0deg); }
}
/* ----- */
/* ICO NEPHI */
#nephitrip #ico-hero-wrap .ico-nephi:before {
	background:url(img/deco/ico-nephi.png) center center no-repeat;
}
/* ----- */
/* ICO DEMON */
#nephitrip #ico-hero-wrap .ico-demon:before {
	background:url(img/deco/ico-demon.png) center center no-repeat;
}
/* ----- */
/* ICO NOUNOU */
#nephitrip #ico-hero-wrap .ico-nounou:before {
	background:url(img/deco/ico-nounou.png) center center no-repeat;
}
/* ----- */
/* ICO BIP */
#nephitrip #ico-hero-wrap .ico-bip:before {
	background:url(img/deco/ico-bip.png) center center no-repeat;
}
/* ----- */
/* ICO LUCIE */
#nephitrip #ico-hero-wrap .ico-lucie:before {
	background:url(img/deco/ico-lucie.png) center center no-repeat;
}
/* ----- */
/* ICO MARION */
#nephitrip #ico-hero-wrap .ico-marion:before {
	background:url(img/deco/ico-marion.png) center center no-repeat;
}
/* ----- */
/* ICO MARION - END GAME */
#nephitrip #ico-hero-wrap .ico-marion-end:before {
	background:url(img/deco/ico-marion-end.png) center center no-repeat;
}

/* -------------- */
#nephitrip #ico-hero-wrap .ico-nephi { bottom:50px; }
#nephitrip #ico-hero-wrap .ico-demon { bottom:100px; }
#nephitrip #ico-hero-wrap .ico-nounou { bottom:150px; }
#nephitrip #ico-hero-wrap .ico-bip { bottom:200px; }
#nephitrip #ico-hero-wrap .ico-lucie { bottom:250px; }
#nephitrip #ico-hero-wrap .ico-marion { bottom:300px; }
#nephitrip #ico-hero-wrap .ico-marion-end { bottom:350px; }

body.nephitrip-portrait #nephitrip #ico-hero-wrap > div { right:-15px; }
/* -------------- */
/* POPUP */
#nephitrip .nephitrip-popup {
	position:absolute;

	width:300px;
	min-height:520px;
	right:20px;

	padding:10px;
	z-index:7;

	color:#e4e4c5;/*jaune pale*/
	background:#741e43;/*rouge moyen*/
	border:3px solid #c7c7b7;/*gris clair*/
	border-radius:10px / 5px;
	box-shadow:5px 5px 25px #333;

	font-family:Arial,sans-serif;
	font-size:16px;
	text-align:center;
	text-transform:none;

	top:-1000px;
	visibility:hidden; /* on masque */
	opacity:0;
}
#nephitrip .nephitrip-popup a:not(.nephitrip-btn) {
	text-decoration:none;
	color:#fff;
	font-weight:normal;
}
#nephitrip .nephitrip-popup h4,
#nephitrip .nephitrip-popup h4 a {
	text-decoration:none;
	color:#fff;
	font-weight:normal;
}
#nephitrip .nephitrip-popup a:not(.nephitrip-btn):hover {
	text-decoration:underline;
}
#nephitrip .nephitrip-popup h4,
#nephitrip .nephitrip-popup h4 a,
#nephitrip .nephitrip-popup h5 a,
#nephitrip .nephitrip-popup h5 {
	font-family:"Anton",Arial,sans-serif;
	letter-spacing:0.15em;
	font-size:18px;
	text-transform:uppercase;
	text-decoration:none;
}
#nephitrip .nephitrip-popup.nephitrip-popup-show {
	top:-20px;
	visibility:visible; /* on affiche */
	opacity:1;
}
#nephitrip .nephitrip-popup .nephitrip-popup-close {
	position:absolute;
	display:block;
	content:'';
	top:-18px;
	right:-18px;
	width:36px;
	height:36px;
	background:#50233e/*rouge fonce*/ url(img/deco/ico-close.png) center center no-repeat;
	background-size:30px;
	border-radius:50px;
	border:3px solid #c7c7b7;/*gris clair*/
	cursor:pointer;
}
#nephitrip .nephitrip-popup .nephitrip-popup-close:hover {
	top:-18px;
	right:-18px;
	-webkit-transform:scale(1.4); transform:scale(1.4);
	background-size:40px;
}
#nephitrip .nephitrip-popup h4 {
	letter-spacing:0.15em;
	margin:10px 0 15px;
	font-weight:normal;
}
#nephitrip .nephitrip-popup p {
	text-align:center;
	margin:10px 0;
}
#nephitrip .nephitrip-popup p.space {
	padding:5px 0;
}
/* popup images */
#nephitrip .nephitrip-popup img,
#nephitrip .nephitrip-popup img.popup-img {
	display:block;
	max-width:100%;
	margin: 0 auto
}
#nephitrip .nephitrip-popup img.popup-img-left {
	float:left;
	width:auto;
	margin:0 10px 10px 0;
}
/* logo bull / jreaux62 */
#nephitrip .nephitrip-popup img.popup-img-logo {
	width:100px;
}
#nephitrip .nephitrip-popup img.popup-img-info {
	width:100px;
}
#nephitrip .nephitrip-popup img.popup-img-credit {
	width:140px;
}
#nephitrip .nephitrip-popup .txt-left,
#nephitrip .nephitrip-popup .txt-left p,
#nephitrip .nephitrip-popup .txt-left ul {
	text-align:left;
}
#nephitrip .nephitrip-popup .clear {
	clear:both;
}
/* -------------- */
/* END GAME - POPUP FIN de JEU : MARION statue -> humaine */
#nephitrip .nephitrip-popup img.popup-img-hide-fade {
	position:absolute;
	width:auto;
	top:0; left:0;
	opacity:0;
	/*animation:nephitrip-popup-img-hide-fade 6s ease-in-out infinite;*/
	animation:nephitrip-popup-img-show-fade-once 4s ease-in-out 1;
	animation-fill-mode: forwards;
}
/*
@keyframes nephitrip-popup-img-hide-fade {
	0% { opacity:0; }
	25% { opacity:0; }
	50% { opacity:1; }
	75% { opacity:1; }
	100% { opacity:0; }
}
*/
@keyframes nephitrip-popup-img-show-fade-once {
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
/* -------------- */
/* BULLES (dialogue) */
#nephitrip .nephitrip-bulle {
	position:absolute;
	padding:10px;
	z-index:8;

	width:200px;
	min-height:60px;

	color:#000;/*noir*/
	background:#fff;/*blanc*/
	border:2px solid #000;/*noir*/
	border-radius:0;
	box-shadow:5px 5px 25px #333;
	
	font-family:"Canted Comic",Arial,sans-serif;
	font-size:12px;
	line-height:16px;
	text-align:center;
	text-transform:none;

	/* on masque */
	-webkit-transform:scale(0); transform:scale(0);
	visibility:hidden; 
	opacity:0;
}
#nephitrip .nephitrip-bulle.nephitrip-bulle-show {
	-webkit-transform:scale(1); transform:scale(1);
	visibility:visible; /* on affiche */
	opacity:1;
}
/* -------------- */
/* BULLE NEPHI */
#nephitrip #nephitrip-bulle-nephi {
	left:20px;
	bottom:240px;
}
#nephitrip #nephitrip-bulle-nephi:before { 
	position:absolute; content:""; z-index:8; left:30px; bottom:-56px;
	/*triangle CSS*/ width:0; height:0; border-style:solid; border-width:56px 9px 0 9px; border-color:#000 transparent transparent transparent; 
}
#nephitrip #nephitrip-bulle-nephi:after { 
	position:absolute; content:""; z-index:9; left:32px; bottom:-50px;
	/*triangle CSS*/ width:0; height:0; border-style:solid; border-width:50px 7px 0 7px; border-color:#fff transparent transparent transparent;
}
body.nephitrip-portrait #nephitrip #nephitrip-bulle-nephi {
	left:200px;
	bottom:30px;
}
body.nephitrip-portrait #nephitrip #nephitrip-bulle-nephi:before { 
	position:absolute; content:""; z-index:9; bottom:30px; left:-56px;
	/*triangle CSS*/ width:0; height:0; border-style:solid; border-width:9px 56px 9px 0; border-color:transparent #000 transparent transparent; 
}
body.nephitrip-portrait #nephitrip #nephitrip-bulle-nephi:after { 
	position:absolute; content:""; z-index:10; bottom:32px; left:-50px;
	/*triangle CSS*/ width:0; height:0; border-style:solid; border-width:7px 50px 7px 0; border-color:transparent #fff transparent transparent;
}
/* -------------- */
/* BULLE FRIEND */
#nephitrip #nephitrip-bulle-friend {
	right:200px;
	top:30px;
}
#nephitrip #nephitrip-bulle-friend:before { 
	position:absolute; content:""; z-index:8; top:30px; right:-56px;
	/*triangle CSS*/ width:0; height:0; border-style:solid; border-width:9px 0 9px 56px; border-color:transparent transparent transparent #000; 
}
#nephitrip #nephitrip-bulle-friend:after { 
	position:absolute; content:""; z-index:9; top:32px; right:-50px;
	/*triangle CSS*/ width:0; height:0; border-style:solid; border-width:7px 0 7px 50px; border-color:transparent transparent transparent #fff;
}
body.nephitrip-portrait #nephitrip #nephitrip-bulle-friend {
	right:-20px;
	top:auto;
	bottom:600px;
}
body.nephitrip-portrait #nephitrip #nephitrip-bulle-friend:before { 
	position:absolute; content:""; z-index:8; right:30px; top:auto; bottom:-56px;
	/*triangle CSS*/ width:0; height:0; border-style:solid; border-width:56px 9px 0 9px; border-color:#000 transparent transparent transparent; 
}
body.nephitrip-portrait #nephitrip #nephitrip-bulle-friend:after { 
	position:absolute; content:""; z-index:9; right:32px; top:auto; bottom:-50px;
	/*triangle CSS*/ width:0; height:0; border-style:solid; border-width:50px 7px 0 7px; border-color:#fff transparent transparent transparent;
}
/* -------------- */
/* BULLE EXTRA FRIEND */
#nephitrip #nephitrip-bulle-extra-friend {
	right:320px;
	top:30px;
}
#nephitrip #nephitrip-bulle-extra-friend:before { 
	position:absolute; content:""; z-index:9; bottom:30px; left:-56px;
	/*triangle CSS*/ width:0; height:0; border-style:solid; border-width:9px 56px 9px 0; border-color:transparent #000 transparent transparent; 
}
#nephitrip #nephitrip-bulle-extra-friend:after { 
	position:absolute; content:""; z-index:10; bottom:32px; left:-50px;
	/*triangle CSS*/ width:0; height:0; border-style:solid; border-width:7px 50px 7px 0; border-color:transparent #fff transparent transparent;
}
body.nephitrip-portrait #nephitrip #nephitrip-bulle-extra-friend {
	right:-20px;
	top:auto;
	bottom:600px;
}
body.nephitrip-portrait #nephitrip #nephitrip-bulle-extra-friend:before { 
	position:absolute; content:""; z-index:9; bottom:30px; left:-56px;
	/*triangle CSS*/ width:0; height:0; border-style:solid; border-width:9px 56px 9px 0; border-color:transparent #000 transparent transparent; 
}
body.nephitrip-portrait #nephitrip #nephitrip-bulle-extra-friend:after { 
	position:absolute; content:""; z-index:10; bottom:32px; left:-50px;
	/*triangle CSS*/ width:0; height:0; border-style:solid; border-width:7px 50px 7px 0; border-color:transparent #fff transparent transparent;
}

/* -------------- */
/* PRELOAD img */
#nephitrip-preload {
	display:none !important;
}
/* -------------- */
/* Version PORTRAIT */
body.nephitrip-portrait #nephitrip {
	padding:90px 30px 50px 15px;
	text-align:center;
}
body.nephitrip-portrait #nephitrip-frame,
body.nephitrip-portrait #nephitrip-frame:before {
	width:620px;
	height:760px;
}
body.nephitrip-portrait #nephitrip-frame:after {
	width:200px;
	height:130px;
	top:-38px;
	right:-28px;
}
/* -------------- */
/* TITRE - SOUS-TITRE */
body.nephitrip-portrait #nephitrip-title {
	left:15px;
}
body.nephitrip-portrait #nephitrip-subtitle {
	top:auto;
	bottom:20px;
	right:auto;
	left:170px;
	width:150px;
}
/* DEMON */
body.nephitrip-portrait #nephitrip-deco-demon { /* demon */
	right:300px;
	bottom:150px;
}
/* -------------- */
/* MAP */
body.nephitrip-portrait #nephitrip-map {
	right:5px;
}
/* -------------- */
/* BUTTONS */
body.nephitrip-portrait #nephitrip-btns-move {
	bottom:245px;
	left:10px;
}
/* -------------- */
/* BOUSSOLE */
body.nephitrip-portrait #nephitrip-compass-wrap {
	position:absolute;
	bottom:210px;
	left:90px;
}
/* -------------- */
body.nephitrip-portrait #nephitrip-btn-start-wrap {
	width:220px;
	bottom:240px;
	left:50px;
}
body.nephitrip-portrait #nephitrip-btn-end-wrap {
	width:200px;
	bottom:240px;
	left:70px;
}
body.nephitrip-portrait #nephitrip-btn-links {
	bottom:-120px;
	right:50px;
}

/* -------------- */
body.nephitrip-portrait #nephitrip .nephitrip-popup {
	right:0;
}
body.nephitrip-portrait #nephitrip .nephitrip-popup.nephitrip-popup-show {
	top:220px;
	right:0;
}

/* -------------- */
/* CHECKBOX - switch (ios like) */
#nephitrip .switch-label,
#nephitrip .switch-label:before,
#nephitrip .switch-label:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;

  outline: none;
  font-family: arial, verdana, sans-serif;
}
#nephitrip .switches {
  position: relative;
  width: 60px;
  margin: 0 auto 10px;
  text-align: center;
}
#nephitrip .switches input {
  display:none;
}
#nephitrip .ios-toggle,
#nephitrip .ios-toggle:active {
  position: absolute;
  top: -5000px;
  height: 0;
  width: 0;
  opacity: 0;
  border: none;
  outline: none;
}
#nephitrip .switch-label {
  display: block;
  position: relative;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 16px;
  width: 100%;
  height: 36px;
  /*border-radius*/
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  background: #f8f8f8;
  cursor: pointer;
}
#nephitrip .switch-label:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  line-height: 34px;
  text-indent: 40px;
  height: 36px;
  width: 36px;
  /*border-radius*/
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  top: 0px;
  left: 0px;
  right: auto;
  background: white;
  /*box-shadow*/
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2), 0 0 0 2px #dddddd;
  -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2), 0 0 0 2px #dddddd;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2), 0 0 0 2px #dddddd;
}
#nephitrip .switch-label:after {
  content: attr(data-off);
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: -300px;
  padding: 10px;
  height: 100%;
  width: 300px;
  text-align: right;
  color: #bfbfbf;
  white-space: nowrap;
}
#nephitrip .ios-toggle.checked + .switch-label,
#nephitrip .ios-toggle:checked + .switch-label {
  /*box-shadow*/
  -webkit-box-shadow: inset 0 0 0 20px rgba(19, 191, 17, 1),
    0 0 0 2px rgba(19, 191, 17, 1);
  -moz-box-shadow: inset 0 0 0 20px rgba(19, 191, 17, 1),
    0 0 0 2px rgba(19, 191, 17, 1);
  box-shadow: inset 0 0 0 20px rgba(19, 191, 17, 1),
    0 0 0 2px rgba(19, 191, 17, 1);
}
#nephitrip .ios-toggle.checked + .switch-label:before,
#nephitrip .ios-toggle:checked + .switch-label:before {
  left: calc(100% - 36px);
  /*box-shadow*/
  -webkit-box-shadow: 0 0 0 2px transparent, 0 3px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 0 2px transparent, 0 3px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 2px transparent, 0 3px 3px rgba(0, 0, 0, 0.3);
}
#nephitrip .ios-toggle.checked + .switch-label:after,
#nephitrip .ios-toggle:checked + .switch-label:after {
  content: attr(data-on);
  left: 60px;
  width: 36px;
}
/* GREEN CHECKBOX */
#nephitrip .switch-green + .switch-label {
  /*box-shadow*/
  -webkit-box-shadow: inset 0 0 0 0px rgba(19, 191, 17, 1), 0 0 0 2px #dddddd;
  -moz-box-shadow: inset 0 0 0 0px rgba(19, 191, 17, 1), 0 0 0 2px #dddddd;
  box-shadow: inset 0 0 0 0px rgba(19, 191, 17, 1), 0 0 0 2px #dddddd;
}
#nephitrip .switch-green.checked + .switch-label,
#nephitrip .switch-green:checked + .switch-label {
  /*box-shadow*/
  -webkit-box-shadow: inset 0 0 0 18px rgba(19, 191, 17, 1),
    0 0 0 2px rgba(19, 191, 17, 1);
  -moz-box-shadow: inset 0 0 0 18px rgba(19, 191, 17, 1),
    0 0 0 2px rgba(19, 191, 17, 1);
  box-shadow: inset 0 0 0 18px rgba(19, 191, 17, 1),
    0 0 0 2px rgba(19, 191, 17, 1);
}
#nephitrip .switch-green.checked + .switch-label:after,
#nephitrip .switch-green:checked + .switch-label:after {
  color: rgba(19, 191, 17, 1);
}
/* RED CHECKBOX */
#nephitrip .switch-red + .switch-label {
  /*box-shadow*/
  -webkit-box-shadow: inset 0 0 0 0px #f35f42, 0 0 0 2px #dddddd;
  -moz-box-shadow: inset 0 0 0 0px #f35f42, 0 0 0 2px #dddddd;
  box-shadow: inset 0 0 0 0px #f35f42, 0 0 0 2px #dddddd;
}
#nephitrip .switch-red.checked + .switch-label,
#nephitrip .switch-red:checked + .switch-label {
  /*box-shadow*/
  -webkit-box-shadow: inset 0 0 0 20px #f35f42, 0 0 0 2px #f35f42;
  -moz-box-shadow: inset 0 0 0 20px #f35f42, 0 0 0 2px #f35f42;
  box-shadow: inset 0 0 0 20px #f35f42, 0 0 0 2px #f35f42;
}
#nephitrip .switch-red.checked + .switch-label:after,
#nephitrip .switch-red:checked + .switch-label:after {
  color: #f35f42;
}
/* BLUE CHECKBOX */
#nephitrip .switch-blue + .switch-label {
  /*box-shadow*/
  -webkit-box-shadow: inset 0 0 0 0px #1fc1c8, 0 0 0 2px #dddddd;
  -moz-box-shadow: inset 0 0 0 0px #1fc1c8, 0 0 0 2px #dddddd;
  box-shadow: inset 0 0 0 0px #1fc1c8, 0 0 0 2px #dddddd;
}
#nephitrip .switch-blue.checked + .switch-label,
#nephitrip .switch-blue:checked + .switch-label {
  /*box-shadow*/
  -webkit-box-shadow: inset 0 0 0 20px #1fc1c8, 0 0 0 2px #1fc1c8;
  -moz-box-shadow: inset 0 0 0 20px #1fc1c8, 0 0 0 2px #1fc1c8;
  box-shadow: inset 0 0 0 20px #1fc1c8, 0 0 0 2px #1fc1c8;
}
#nephitrip .switch-blue.checked + .switch-label:after,
#nephitrip .switch-blue:checked + .switch-label:after {
  color: #1fc1c8;
}
/* -------------- */
#nephitrip-btn-links .nephitrip-btn-update,
#nephitrip-btn-links .social-facebook,
#nephitrip-btn-links .nephitrip-btn {
	display: none !important;
}