/*
		=================================
		
			CSS	v1.3.7
		
	 	=================================

	loading database connexion ------ OK
	loading admin functions --------- OK
	loading css functions ----------- OK
	loading vars -------------------- OK
	loading lan --------------------- OK (fr)
	website name -------------------- Iconic Stories
	website link -------------------- https://www.iconic-stories.fr
	last modified ------------------- 16/Nov/2022 14:29:03
	author -------------------------- Seb @ One Color

	listing available colors -

		#FFFFFF --- blanc
		#D3D3D3 --- lgris
		#808080 --- gris
		#606060 --- sgris
		#000000 --- noir
		#F8FAFD --- bckgd
		#ffb3b3 --- lrouge
		#FF0000 --- rouge
		#600000 --- srouge
		#b3ffb3 --- lvert
		#00FF00 --- vert
		#006000 --- svert
		#b3b3ff --- lbleu
		#0000FF --- bleu
		#000060 --- sbleu
		#FFB6C1 --- lrose
		#FFC0CB --- rose
		#C71585 --- srose



	/*=============================================================================*\
	=										=
	=		RESET STYLE / IMPORT FONTS / TRANSITIONS / ANIMATIONS		=
	=										=
	\*=============================================================================*/



h1,h2,h3,h4,h5,h6,p,ul,ol,li,blockquote,pre,html,body,table,tbody,tr,th,td,tfoot,thead,img,form,fieldset,a {
	margin: 0;
	padding: 0;
	border: none;
	outline:none;
	list-style-type: none;
	vertical-align: baseline;
}
a{
	color:inherit;
}
html{
	overflow: auto;
	font-family:"iconic_stories";
	font-size:12px;
	color:#000000;
	-webkit-tap-highlight-color:transparent;
	background-color:#FFFFFF;
	position:fixed;	/* hack safari */
	cursor:default;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
	display: block;
}
*:focus {
	outline: none!important;
}
:root{
	--scale-captcha: 1;
}
@font-face {
	font-family: "iconic_stories";
	src:
		url("../font/didot/Didot.eot");
	src: 
		url("../font/didot/Didot.eot?#iefix") format('embedded-opentype'),
		url("../font/didot/Didot.svg#Didot") format('svg'),
		url("../font/didot/Didot.ttf") format('truetype'),
		url("../font/didot/Didot.woff") format('woff'),
		url("../font/didot/Didot.woff2") format('woff2');
	font-weight: normal;
	font-style: normal;
}
.transition{
	transition-property: all;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	transition-delay: 0s;
	animation-iteration-count: infinite;
	-webkit-transition-property: all;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-delay: 0s;
	-moz-transition-property: all;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: ease-in-out;
	-moz-transition-delay: 0s;
	-o-transition-property: all;
	-o-transition-duration: 0.2s;
	-o-transition-timing-function: ease-in-out;
	-o-transition-delay: 0s;
}
:root {
	--as-color-loading-main	:	rgba(211,211,211,0.50);
	--as-color-loading-focus :	#000000;
	--as-color-loading-gradient:	rgba(255,255,255,0.30);
}
@keyframes loader_animation_1 {
	0% {
		background-color: var(--as-color-loading-main);
	}
	25% {
		background-color: var(--as-color-loading-focus);
		-webkit-box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
		-moz-box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
		box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
	}
	50% {
		background-color: var(--as-color-loading-main);
	}
}
@keyframes loader_animation_2 {
	25% {
		background-color: var(--as-color-loading-main);
	}
	50% {
		background-color: var(--as-color-loading-focus);
		-webkit-box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
		-moz-box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
		box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
	}
	75% {
		background-color: var(--as-color-loading-main);
	}
}
@keyframes loader_animation_3 {
	50% {
		background-color: var(--as-color-loading-main);
	}
	75% {
		background-color: var(--as-color-loading-focus);
		-webkit-box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
		-moz-box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
		box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
	}
	100% {
		background-color: var(--as-color-loading-main);
	}
}
@keyframes loader_animation_4 {
	0%,100% {
		text-shadow:	0px 0px 1px var(--as-color-loading-gradient),
				0px 0px 2px var(--as-color-loading-gradient),
				0px 0px 3px var(--as-color-loading-gradient),
				0px 0px 4px var(--as-color-loading-gradient),
				0px 0px 5px var(--as-color-loading-gradient);
	}
	50% {
		text-shadow:	0px 0px 1px var(--as-color-loading-gradient),
				0px 0px 2px var(--as-color-loading-gradient),
				0px 0px 3px var(--as-color-loading-gradient),
				0px 0px 4px var(--as-color-loading-gradient),
				0px 0px 5px var(--as-color-loading-gradient),
				0px 0px 6px var(--as-color-loading-gradient),
				0px 0px 7px var(--as-color-loading-gradient),
				0px 0px 8px var(--as-color-loading-gradient),
				0px 0px 9px var(--as-color-loading-gradient),
				0px 0px 10px var(--as-color-loading-gradient);
	}
}


	/*=============================================================================*\
	=										=
	=				GENERAL STRUCTURE				=
	=										=
	\*=============================================================================*/



	html,body{
		height:100%;
		width:100%;
		font-family: "iconic_stories";
		font-size:12px;
	}
	html{
		display:flex;
	}
		body{
/*			max-height:1200px;
			max-width:1200px;
*/			min-height:400px;
			min-width:200px;
			margin:auto;
			display:flex;
			flex-direction:column;
		}
	.pointer,
	a{
		cursor:url("https://www.iconic-stories.fr/img/cursor_hand.png") 7 3, pointer!important;
		text-decoration:none;
	}
	.hidden{
		display:none;
		visibility:hidden;
	}
	.content_center{
		display:flex;
		justify-content: center;
		align-items:center;
		flex:1;
	}
	.ns{	/* no_select */
		-webkit-touch-callout: none;
		  -webkit-user-select: none;	/* Chrome, Safari, Opéra depuis la version 15 */
		   -khtml-user-select: none;
		     -moz-user-select: none;	/* Firefox */
		      -ms-user-select: none;	/* Internet explorer depuis la version 10 et Edge */
		          user-select: none;	/* Propriété standard */
	}
	.loader{
		top:50%;
		left:50%;
		margin-top:-5px;
		margin-left:-5px;
		animation: loader_animation_2 0.5s infinite;
	}
	.loader:before,
	.loader,
	.loader:after{
		position:absolute;
		height:10px;
		width:10px;
		background-color:var(--as-color-loading-main);
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		zoom: 1;
		filter: alpha(opacity=90);
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
		-moz-opacity:0.9;
		-khtml-opacity:0.9;
		opacity: 0.9;
	}
	.loader:before{
		content:"";
		left:-13px;
		animation: loader_animation_1 0.5s infinite;
	}
	.loader:after{
		content:"";
		right:-13px;
		animation: loader_animation_3 0.5s infinite;
	}
	img.responsive_img_js{
		height:100%;
		width:100%;
		background-repeat:no-repeat;
		background-size:cover;
		user-drag: none; 
		user-select: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		pointer-events: none;
	}
		#main{
			flex:1;
			position:relative;
		}

	/*=============================================================================*\
	=										=
	=				COMPUTER DESIGN					=
	=										=
	\*=============================================================================*/


@media screen and (min-width:800px){

	body{
		/*max-height:1200px;*/
	}
		#nav{
			width:100%;
			text-align:center;
			min-height:26px;
			margin:max(26px,1.5vw) 0;
			padding:0 px;
			font-size:0;
		}
			#nav #menu_hamburger{
				display:none;
				visibility:hidden;
			}
			#nav .menu_container{
				width:100%;
			}
				#nav .menu{
					min-height:26px;
					display: inline-block;
					margin:0;
					padding:0;
				}
					.menu li{
						list-style:none;
						display:table-cell;
						height:100%;
					}
						.menu li a{
							height:26px;
							text-decoration:none;
							display:block;
							margin:0;
							padding:0 max(19px,1.5vw);
							line-height:26px;
							text-transform: uppercase;
							font-size:max(14px,1.2vw);
						}
					.menu li.selected a,
					.menu li a:hover,
					.menu li a:focus{
						position:relative;
					}
					.menu li.selected a:before,
					.menu li a:hover:before,
					.menu li a:focus:before{
						content:"";
						width:100%;
						height:1px;
						background-color:#000000;
						top:48%;
						left:0;
						position:absolute;
					}
		#header{
			width:100%;
			display:flex;
			flex-direction:column;
			text-align:center;
			color:#000000;
			font-family: "iconic_stories";
			text-transform:uppercase;
			font-weight:lighter;
			margin:0 0 26px 0;
		}
			#header h1{
				font-weight:inherit;
				font-size:max(50px,4.1vw);
				line-height:max(50px,4.1vw);
				margin:0;
			}
				#header h1 span{
					text-decoration: line-through;
					text-decoration-thickness:3px;
					line-height:100%;
					font-weight:inherit;
				}
			#header h1::before{
				content: "“";
			}
			#header h1::after{
				content: "”";
			}
			#logo_site{
				background-size:contain;
				background-position:center center;
				background-repeat:no-repeat;
			}
			#header h2{
				font-size:max(14px,1.2vw);
				font-weight:inherit;
				padding-top:max(26px,2.1vw);
				margin:0;
			}
			#background,
			#conteneur_titre_video{
				height:100%;
				width:100%;
				background-size:cover;
				background-position:center center;
				background-repeat:no-repeat;
				display:flex;
				align-items: center;
				justify-content: center;
				background-color:#000000;
			}
				#background_video{
					height:100%;
					width:100%;
					object-fit: cover;
				}
				#conteneur_titre{
					text-align:center;
					display:flex;
					flex-direction:column;
					color:#FFFFFF;
					font-family: "iconic_stories";
					text-shadow: #000000 3px 3px 3px;
					text-transform:uppercase;
					font-weight:lighter;
				}
					#conteneur_titre h1{
						font-weight:inherit;
						font-size:7vw;
					}
						#conteneur_titre h1 span{
							text-decoration: line-through;
							text-decoration-thickness: 3px;
							line-height:100%;
							font-weight:inherit;
						}
					#conteneur_titre h1::before{
						content: "“";
					}
					#conteneur_titre h1::after{
						content: "”";
					}
					#conteneur_titre h2{
						font-size:1.5vw;
						font-weight:inherit;
					}
			#conteneur_titre_video{
				position:absolute;
				top:0;
				left:0;
				right:0;
				bottom:0;
			}
			.contact{
				height:100%;
				width:100%;
				display:flex;
				background-position:center center;
				background-repeat:no-repeat;
				background-size:cover;
				justify-content: center;
				align-items:center;
				flex:1;
			}
				.contact_txt{
					width:100%;
					text-align:center;
					color:#FFFFFF;
					background-color:#000000;
					font-family: "iconic_stories";
					text-shadow: #000000 3px 3px 3px;
					text-transform:uppercase;
					font-weight:lighter;
					padding:50px 30px;
				}
			.thanks{
				height:100%;
				width:100%;
				display:flex;
				background-position:center center;
				background-repeat:no-repeat;
				background-size:cover;
				justify-content: center;
				align-items:center;
				flex:1;
			}
				.thanks_txt{
					width:100%;
					background-color:#000000;
					text-align:center;
					color:#FFFFFF;
					font-family: "iconic_stories";
					text-shadow: #000000 3px 3px 3px;
					text-transform:uppercase;
					font-weight:lighter;
					padding:50px 30px;
				}
			#main{
				width:100%;
				height:100%;
				margin:0 auto;
				flex:1;
				display:flex;
				overflow:hidden;
			}
				#main div.main_conteneur{
					min-width:800px;
					width:100%;
					min-height:100%;
					display:flex;
					flex-direction:column;
					align-items:stretch;
					margin:0 auto;
					overflow-x:hidden;
					overflow-y:auto;
				}
	/*	cas special : pour les ecrans tres larges (Fred, t'es relou !)	*/
	@media screen and (min-width:1600px){
				#main div.main_conteneur{
					min-width:1600px;
					width: -moz-calc(100% - 240px);
					width: -webkit-calc(100% - 240px);
					width: -o-calc(100% - 240px);
					width: calc(100% - 240px);
				}
	}
					#main div.main_conteneur .album{
						height:100%;
						width:100%;
						display:flex;
						flex-shrink:0;
						flex-direction:column;
					}
						.album_navigation{
							background-position:center center;
							background-repeat:no-repeat;
						}
						.album_up,
						.album_down{
							height:40px;
							margin:0 40px 0 40px;
						}
						.album_down.active{	background-image:url("https://www.iconic-stories.fr/img/arrow_down.png");	}
						.album_up.active{	background-image:url("https://www.iconic-stories.fr/img/arrow_up.png");	}
						.album_middle{
							flex:1;
							display:flex;
							flex-direction:row;
						}
							.album_left,
							.album_right{
								width:40px;
							}
							.album_left.active{	background-image:url("https://www.iconic-stories.fr/img/arrow_left.png"); }
							.album_right.active{	background-image:url("https://www.iconic-stories.fr/img/arrow_right.png"); }
							.album_center{
								flex:1;
								overflow:hidden;
								position:relative;
							}
								.album_center_slider{
									position:absolute;
									top:0;
									left:0;
									height:100%;
									width:100%;
									display:flex;
									flex-direction:row;
									flex-shrink:0;
								}
									.album_center_slider>span{
										height:100%;
										width:100%;
										display:flex;
										justify-content: center;
										align-items:center;
									}
									.media{
										height:100%;
										width:100%;
										flex-shrink:0;
										background-position:center center;
										background-repeat:no-repeat;
										background-size:contain;
										display:flex;
										justify-content: center;
										align-items:center;
										position:relative;
									}
										.media_texte{
											display:block;
										}
						.album_texte{
							text-align:center;
							margin:13px;
						}
		#footer{
			height:12px;
			line-height:12px;
			width:100%;
			min-width:800px;
			margin:5px auto;
			text-align:center;
			font-family:helvetica light;
			color:#808080;
			font-size:0;
		}
			#footer h6{
				display:inline-block;
				font-size:14px;
				padding:0 5px;
				margin:0;
				vertical-align:top;
				font-weight:normal;
			}
				#footer h6 a{
					text-decoration:none;
				}
			#footer #menu_footer{
				display:inline-block;
				border-left:1px #808080 solid;
				vertical-align:top;
						height:12px;
						line-height:12px;
						font-size:14px;
				margin:0;
				padding:0;
			}
				#menu_footer li{
					display:inline-block;
				}
					#menu_footer li a{
						display:inline-block;
						padding:0 5px;
						text-decoration:none;
					}
				#footer a,
				#footer a:hover,
				#footer a:focus{
					text-decoration:underline;
				}


}


	/*=============================================================================*\
	=										=
	=				TABLETTE DESIGN					=
	=										=
	\*=============================================================================*/


@media screen and (max-width:799px){

	body{
		position:relative;
	}
		#nav{
			width:100%;
			display:inline-block;
			height:50px;
			z-index:5;
		}
			#nav #menu_hamburger{
				height:50px;
				width:50px;
				margin-left: -moz-calc(100% - 150px);
				margin-left: -webkit-calc(100% - 150px);
				margin-left: -o-calc(100% - 150px);
				margin-left: calc(100% - 150px);
				background-color:#FFFFFF;
				display: inline-block;
				transition-property: opacity, filter;
				transition-duration: 0.15s;
				transition-timing-function: linear;
				font: inherit;
				color: inherit;
				text-transform: none;
				border: 0;
				padding: 0;
				overflow: visible;
				position:relative;
			}
			#nav #menu_hamburger:after{
				height:50px;
				width:100px;
				position:absolute;
				top:0;
				left:50px;
				content:"menu";
				text-transform:uppercase;
				text-align:center;
				line-height:50px;
				font-family:helvetica regular;
				font-size:14px;
			}
				.hamburger-box {
					width: 33px;
					height: 16px;
					display: inline-block;
					position: relative;
				}
				.hamburger-inner {
					display: block;
					top: 50%;
					/*margin-top: -2px;*/
				}
				.hamburger-inner,
				.hamburger-inner::before,
				.hamburger-inner::after {
					width: 33px;
					height: 4px;
					-webkit-border-radius: 4px;
						-moz-border-radius: 4px;
						border-radius: 4px;
					background-color:#000000;
					position: absolute;
					transition-property: transform;
					transition-duration: 0.15s;
					transition-timing-function: ease;
				}
				.hamburger-inner::before{
					content: "";
					top: -8.3333333333333px;
					display: block;
				}
				.hamburger-inner::after {
					content: "";
					bottom: -8.3333333333333px;
					display: block;
				}
				.hamburger--squeeze .hamburger-inner {
					transition-duration: 0.075s;
					transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
				}
				.hamburger--squeeze .hamburger-inner::before {	transition: top 0.075s 0.12s ease, opacity 0.075s ease;	}
				.hamburger--squeeze .hamburger-inner::after {	transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
				.hamburger--squeeze.is-active .hamburger-inner {
					-webkit-transform: rotate(45deg);
						-moz-transform: rotate(45deg);
						-ms-transform: rotate(45deg);
						-o-transform: rotate(45deg);
						transform: rotate(45deg);
					transition-delay: 0.12s;
					transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
				}
				.hamburger--squeeze.is-active .hamburger-inner::before {
					top: 0;
					opacity: 0;
					transition: top 0.075s ease, opacity 0.075s 0.12s ease;
				}
				.hamburger--squeeze.is-active .hamburger-inner::after {
					bottom: 0;
					-webkit-transform: rotate(-90deg);
						-moz-transform: rotate(-90deg);
						-ms-transform: rotate(-90deg);
						-o-transform: rotate(-90deg);
						transform: rotate(-90deg);
					transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
				}
			#nav:not(.open) .menu_container{
				height:0;
				overflow:hidden;
				zoom: 1;
				filter: alpha(opacity=0);
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				-moz-opacity:0;
				-khtml-opacity:0;
				opacity: 0;
			}
			#nav.open .menu_container{
				height: -moz-calc(100% - 130px);
				height: -webkit-calc(100% - 130px);
				height: -o-calc(100% - 130px);
				height: calc(100% - 130px);
				zoom: 1;
				filter: alpha(opacity=100);
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				-moz-opacity:1;
				-khtml-opacity:1;
				opacity: 1;
			}
				.menu_container{
					width:100%;
					position:absolute;
					top:130px;
					left:0;
					overflow-y:auto;
					overflow-x:hidden;
					display:flex;
					flex-direction:column;
					background-color:#FFFFFF;
					list-style-type: none;
				}
				#nav .menu{
					display:contents;	/* remove this floor from the dom */
				}
					.menu li{
						flex:1;
						max-height:50px;
						height: -moz-calc(100% - 60px);
						height: -webkit-calc(100% - 60px);
						height: -o-calc(100% - 60px);
						height: calc(100% - 60px);
						margin:0 30px;
						text-align:center;
						margin-bottom:1px;
						list-style-type: none;
					}
						.menu li a{
							height:100%;
							width: -moz-calc(100% - 0px);
							width: -webkit-calc(100% - 0px);
							width: -o-calc(100% - 0px);
							width: calc(100% - 0px);
							padding:0 px;
							display: flex;
							align-items:center;
							white-space:nowrap;
							overflow:hidden;
							text-overflow:ellipsis;
							text-transform:uppercase;
							font-family:helvetica light;
							font-size:14px;
						}
					.menu li.selected a,
					#menu_footer li.selected a,
					.menu li a:hover,
					.menu li a:focus,
					#menu_footer li a:hover,
					#menu_footer li a:focus{
						text-decoration:underline;
					}
		#header{
			width:100%;
			display:flex;
			flex-direction:column;
			text-align:center;
			color:#000000;
			font-family: "iconic_stories";
			text-transform:uppercase;
			font-weight:lighter;
			margin:0;
			max-height:80px;
			min-height:80px;
			flex:1 0 0;
				align-items: center;
				justify-content: center;
		}
			#header h1{
				font-weight:inherit;
				font-size:8vw;
				line-height:8vw;
				margin:0;
				flex:1;
				display:flex;
				justify-content: center;
				align-items:center;
				overflow:hidden;
			}
				#header h1 span{
					text-decoration: line-through;
					text-decoration-thickness: 3px;
					line-height:100%;
					font-weight:inherit;
					flex:1;
				}
			#header h1::before{
				content: "“";
			}
			#header h1::after{
				content: "”";
			}
			#logo_site{
				background-size:contain;
				background-position:center center;
				background-repeat:no-repeat;
			}
			#header h2{
				font-size:14px;
				font-weight:inherit;
				margin:0;
				height:27px;
				overflow:hidden;
				display:flex;
				justify-content: center;
				align-items:center;
			}
			#background,
			#conteneur_titre_video{
				height:100%;
				width:100%;
				background-size:cover;
				background-position:center center;
				background-repeat:no-repeat;
				display:flex;
				align-items: center;
				justify-content: center;
				background-color:#000000;
			}
				#background_video{
					height:100%;
					width:100%;
					object-fit: cover;
				}
				#conteneur_titre{
					text-align:center;
					display:flex;
					flex-direction:column;
					color:#FFFFFF;
					font-family: "iconic_stories";
					text-shadow: #000000 3px 3px 3px;
					text-transform:uppercase;
					font-weight:lighter;
				}
					#conteneur_titre h1{
						font-weight:inherit;
						font-size:7vw;
					}
						#conteneur_titre h1 span{
							text-decoration: line-through;
							text-decoration-thickness: 3px;
							line-height:100%;
							font-weight:inherit;
						}
					#conteneur_titre h1::before{
						content: "“";
					}
					#conteneur_titre h1::after{
						content: "”";
					}
					#conteneur_titre h2{
						font-size:1.5vw;
						font-weight:inherit;
					}
			#conteneur_titre_video{
				position:absolute;
				top:0;
				left:0;
				right:0;
				bottom:0;
			}
			.contact{
				height:100%;
				width:100%;
				display:flex;
				background-position:center center;
				background-repeat:no-repeat;
				background-size:cover;
				background-color:#000000;
				justify-content: center;
				align-items:center;
				flex:1;
			}
				.contact_txt{
					text-align:center;
					color:#FFFFFF;
					font-family: "iconic_stories";
					text-shadow: #000000 3px 3px 3px;
					text-transform:uppercase;
					font-weight:lighter;
					margin:30px;
				}
			.thanks{
				height:100%;
				width:100%;
				background-position:center center;
				background-repeat:no-repeat;
				background-size:cover;
				background-color:#000000;
				overflow-x:hidden;
				overflow-y:auto;
			}
				.thanks_txt{
					text-align:center;
					color:#FFFFFF;
					font-family: "iconic_stories";
					text-shadow: #000000 3px 3px 3px;
					text-transform:uppercase;
					font-weight:lighter;
					margin:5px;
				}
			#main{
				width:100%;
				margin:0 auto;
				flex:1;
				display:flex;
				position:relative;
			}
				#main div.main_conteneur{
					position:absolute;
					top:0;
					left:0;
					height:100%;
					width:100%;
					overflow-x:hidden;
					overflow-y:auto;
					margin:0 auto;
				}
					#main div.main_conteneur .album{
						height:100%;
						width:100%;
						display:flex;
						flex-shrink:0;
						flex-direction:column;
					}
						.album_navigation{
							background-position:center center;
							background-repeat:no-repeat;
						}
						.album_up,
						.album_down{
							height:40px;
							margin:0 40px 0 40px;
						}
						.album_down.active{	background-image:url("https://www.iconic-stories.fr/img/arrow_down.png");	}
						.album_up.active{	background-image:url("https://www.iconic-stories.fr/img/arrow_up.png");	}
						.album_middle{
							flex:1;
							display:flex;
							flex-direction:row;
						}
							.album_left,
							.album_right{
								width:40px;
							}
							.album_left.active{	background-image:url("https://www.iconic-stories.fr/img/arrow_left.png"); }
							.album_right.active{	background-image:url("https://www.iconic-stories.fr/img/arrow_right.png"); }
							.album_center{
								flex:1;
								overflow:hidden;
								position:relative;
							}
								.album_center_slider{
									position:absolute;
									top:0;
									left:0;
									height:100%;
									width:100%;
									display:flex;
									flex-direction:row;
									flex-shrink:0;
								}
									.album_center_slider>span{
										height:100%;
										width:100%;
										display:flex;
										justify-content: center;
										align-items:center;
									}
									.media{
										height:100%;
										width:100%;
										flex-shrink:0;
										background-position:center center;
										background-repeat:no-repeat;
										background-size:contain;
										display:flex;
										justify-content: center;
										align-items:center;
										position:relative;
									}
										.media_texte{
											display:block;
										}
		#footer{
			min-height:22px;
			line-height:22px;
			width:100%;
			margin:4px auto;
			text-align:center;
			font-family:helvetica light;
			color:#808080;
			font-size:0;
		}
			#footer h6{
				display:inline-block;
				font-size:14px;
				padding:0 4px;
				margin:0;
				vertical-align:top;
				font-weight:normal;
			}
				#footer h6 a{
					text-decoration:none;
				}
			#footer #menu_footer{
				display:inline-block;
				border-left:1px #808080 solid;
				vertical-align:top;
						height:22px;
						line-height:22px;
						font-size:14px;
				margin:0;
				padding:0;
			}
				#menu_footer li{
					display:inline-block;
				}
					#menu_footer li a{
						display:inline-block;
						padding:0 4px;
						text-decoration:none;
					}
				#footer a,
				#footer a:hover,
				#footer a:focus{
					text-decoration:underline;
				}

}


	/*=============================================================================*\
	=										=
	=				SMARTPHONE DESIGN				=
	=										=
	\*=============================================================================*/


@media screen and (max-width:399px){

	body{
		position:relative;
	}
		#nav{
			height:40px;
			z-index:5;
		}
			#nav #menu_hamburger{
				height:40px;
				width:40px;
				margin-left: -moz-calc(100% - 120px);
				margin-left: -webkit-calc(100% - 120px);
				margin-left: -o-calc(100% - 120px);
				margin-left: calc(100% - 120px);
			}
			#nav #menu_hamburger:after{
				height:40px;
				width:80px;
				left:40px;
				line-height:40px;
				font-size:14px;
			}
				.hamburger-box {
					width: 26px;
					height: 13px;
				}
				.hamburger-inner {
					/*margin-top: -2px;*/
				}
				.hamburger-inner,
				.hamburger-inner::before,
				.hamburger-inner::after {
					width: 26px;
					height: 4px;
					-webkit-border-radius: 4px;
						-moz-border-radius: 4px;
						border-radius: 4px;
				}
				.hamburger-inner::before{
					top: -6.6666666666667px;
				}
				.hamburger-inner::after {
					bottom: -6.6666666666667px;
				}
			#nav.open .menu_container{
				height: -moz-calc(100% - 116px);
				height: -webkit-calc(100% - 116px);
				height: -o-calc(100% - 116px);
				height: calc(100% - 116px);
				zoom: 1;
				filter: alpha(opacity=100);
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				-moz-opacity:1;
				-khtml-opacity:1;
				opacity: 1;
			}
				.menu_container{
					top:116px;
				}
					.menu li{
						max-height:40px;
						height: -moz-calc(100% - 60px);
						height: -webkit-calc(100% - 60px);
						height: -o-calc(100% - 60px);
						height: calc(100% - 60px);
						margin:0 30px;
					}
						.menu li a{
							width: -moz-calc(100% - 20px);
							width: -webkit-calc(100% - 20px);
							width: -o-calc(100% - 20px);
							width: calc(100% - 20px);
							padding:0 10px;
							font-size:12px;
						}
		#header{
			max-height:76px;
			min-height:76px;
		}
			#header h1{
				font-size:9vw;
				line-height:9vw;
			}
			#header h2{
				font-size:14px;
				height:26px;
			}
					#conteneur_titre h1{
						font-size:7vw;
					}
					#conteneur_titre h2{
						font-size:1.5vw;
					}
				.contact_txt{
					margin:20px;
				}
				.thanks_txt{
					margin:4px;
				}
						.album_up,
						.album_down{
							height:30px;
							margin:0 30px 0 30px;
						}
							.album_left,
							.album_right{
								width:30px;
							}
		#footer{
			min-height:20px;
			line-height:20px;
			margin:4px auto;
		}
			#footer h6{
				font-size:12px;
				padding:0 4px;
			}
			#footer #menu_footer{
				vertical-align:top;
						height:20px;
						line-height:20px;
						font-size:12px;
			}
					#menu_footer li a{
						padding:0 4px;
					}

}