/*

######################################
### PIERRE FABRE OCTOBRE ROSE 2019 ###
######################################
############# VENTDAUTAN #############
######################################

*/

/* RESET */

	html, body { position:relative; font-family:'Poppins', sans-serif; font-weight:300; margin:0; padding:0; outline:0; height:100%; width:100%; max-height:100%; max-width:100%; }
	html { background-color:#DDD; }
	body { color:#222; word-wrap:break-word; overflow:hidden; }

	a, a:visited { color:#08F; text-decoration:none; outline:0; -webkit-transition:color .2s ease, background-color .2s ease; transition:color .2s ease, background-color .2s ease; }
	a:hover, a:focus { color:#222; text-decoration:none; outline:0; }
	a:hover *, a:focus * { outline:0; }

	h1, h2, h3, h4, h5, h6 { font-family:'Poppins', sans-serif; font-weight:200; margin:0; }
	ul, ol, ul li, ol li { list-style:none inside; margin:0; padding:0; }
	p { margin:0; }
	label { font-weight:400; margin:0; }
	button { font-family:'Poppins', sans-serif; border-width:0; outline:0; box-shadow:none; }

	* { -webkit-box-sizing:border-box; box-sizing:border-box; }
	*:focus { outline:0; }

	@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }

	.hidden { display:none; }

/* STRUCTURE */

	.body { position:relative; z-index:50; width:100vw; height:100vh; display:flex; flex-direction:row; justify-content:center; align-items:flex-end; text-align:center; line-height:0; overflow:hidden;
		background-image:linear-gradient(to top, #E6E7E8 0%, #E6E7E8 49%, #D1D3D4 51%, #D1D3D4 100%); background:transparent url('content/interface/background.svg') center center no-repeat; background-size:cover; }
	.content { position:relative; z-index:100; bottom:0; overflow:visible; pointer-events:none; touch-action:none; }

/* INTERFACE */

	/* TITLES */

	.titles { position:absolute; z-index:500; top:3.5%; left:30px; right:30px; }
	.titles .main-title { font-size:36px; line-height:30px; font-weight:200; color:#E43280; margin:0; }
	.titles .main-title img { width:280px; }
	.titles .sub-title { font-size:20px; line-height:35px; font-weight:300; color:#333; max-width:calc(100% - 180px); margin:0 auto; }
	.titles .sub-title small { display:block; font-size:15px; line-height:30px; font-weight:300; color:#333; }

	/* RIBBON */

	.ribbon { position:absolute; z-index:750; top:30px; left:30px; width:75px; }
	.ribbon img { width:100%; height:auto; }

	/* FULLSCREEN */

	.screen-mode { position:absolute; z-index:750; top:30px; right:30px; width:75px; height:75px; border-radius:37.5px; background-color:rgba(125,125,125,0.25);
		transition:background-color 0.25s ease; pointer-events:all; touch-action:auto; cursor:pointer; }
	.screen-mode .fa { font-size:32px; line-height:75px; color:#FFF; }
	.screen-mode:hover { background-color:rgba(75,75,75,0.75); }

	/* ZOOM IN-OUT */

	.clear-zone { position:absolute; z-index:25; top:0; left:0; right:0; bottom:0; pointer-events:all; touch-action:auto; }

	.zoom-out { position:absolute; z-index:750; top:120px; right:30px; width:75px; height:75px; border-radius:37.5px; background-color:rgba(125,125,125,0.25); opacity:0; transition:opacity 0.2s ease;
		pointer-events:none; touch-action:none; }
	.zoom-out.active { opacity:1; pointer-events:all; touch-action:auto; transition:background-color 0.25s ease; will-change:background-color; }
	.zoom-out.active:hover { background-color:rgba(75,75,75,0.75); cursor:pointer; }
	.zoom-out .fa { font-size:32px; line-height:75px; color:#FFF; }

	/* SLIDESHOW */

	.slideshow { display:none; position:absolute; z-index:750; bottom:30px; width:20vw; }
	.slideshow.slideshow-left { left:30px; }
	.slideshow.slideshow-right { right:30px; }
	.slideshow .photo { position:absolute; bottom:0; left:0; width:100%; height:auto; opacity:0; transition:opacity 0.3s ease; }
	.slideshow .photo.active { opacity:1; }

/* MAP */

	.map { width:100%; height:100%; margin:0; overflow:visible; pointer-events:none; touch-action:none; }
	.map .map-content { position:relative; z-index:250; width:100%; height:100%; transition:transform 0.3s ease; transform-origin:center; transform:translate(0,0) scale(1); }
	.map .map-content:after { display:block; content:""; padding-bottom:100%; }

	.map .worldmap { position:absolute; z-index:250; bottom:0; right:0; left:0; display:block; width:100%; }
	.map .worldmap .worldmap-svg { position:absolute; bottom:0; display:block; width:100%; height:auto; max-width:100%; max-height:100%; }

/* FLAGS */

	.flags { position:absolute; z-index:750; top:16%; width:100%; max-height:100%; pointer-events:none; touch-action:none; overflow:visible; }
	.flags .flags-content { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:flex-start; padding:0 2.5%; }
	.flags .flag { flex:0 0 calc(10% - 16px); position:relative; margin:0 8px; height:auto; padding:6px; line-height:0; background-color:transparent; transition:all 0.15s ease;
		cursor:pointer; pointer-events:all; touch-action:auto; overflow:hidden; }
	.flags .flag:hover,
	.flags .flag:focus,
	.flags .flag.active { transform:scale(1.15); background-color:rgba(249,107,158,0.3); box-shadow:0 0 20px #FFF; }
	.flags .flag img { display:block; max-width:100%; width:100%; }

	.flags .flag:nth-child(1)  { margin-top:5%;    }
	.flags .flag:nth-child(2)  { margin-top:3%;    }
	.flags .flag:nth-child(3)  { margin-top:1.75%; }
	.flags .flag:nth-child(4)  { margin-top:0.75%; }
	.flags .flag:nth-child(5)  { margin-top:0%;    }
	.flags .flag:nth-child(6)  { margin-top:0%;    }
	.flags .flag:nth-child(7)  { margin-top:0.75%; }
	.flags .flag:nth-child(8)  { margin-top:1.75%; }
	.flags .flag:nth-child(9)  { margin-top:3%;    }
	.flags .flag:nth-child(10) { margin-top:5%;    }

/* MARKERS */

	.marker { position:absolute; z-index:500; width:30px; height:36px; padding:0; margin:0; cursor:pointer; opacity:0.5; transition:transform 0.2s ease, opacity 0.2s ease;
		transform-origin:center; pointer-events:all; touch-action:auto; }
	.marker.active { z-index:750; opacity:0.75; transform:scale(1.5) translateY(-12.5%); pointer-events:none; touch-action:none; }
	.marker:not(.active):hover { z-index:750; opacity:0.75; transform:scale(1.5) translateY(-12.5%); }
	.marker.active.show { z-index:1500; opacity:0.75; }

	.map .map-content:not(.zoom) .marker:hover { opacity:0.75; }
	.map .map-content.zoom .marker { opacity:0.5; }
	.map .map-content.zoom .marker.active { opacity:1; }
	.map .map-content.zoom .marker.active.show { opacity:0.75; }

	.map .map-content.zoom.france .marker:not(.france) { transform:scale(0.5) translateY(50%); opacity:0.15; }
	.map .map-content.zoom.france .marker:not(.france):hover { z-index:750; opacity:0.75; transform:scale(0.6) translateY(40%); }
	.map .map-content.zoom.france .marker#marker-france { opacity:0; pointer-events:none; touch-action:none; }

	.map .map-content .marker.france { transform:scale(0.5) translateY(0); opacity:0; pointer-events:none; touch-action:none; }
	.map .map-content.zoom.france .marker.france { opacity:1; }

/* TOOLTIPS */

	.map .tooltip { position:absolute; z-index:1000; width:26px; height:26px; margin:3px 0 0 2px; background-color:#F96B9E; border-radius:50%; cursor:pointer;
		font-size:26px; font-weight:500; line-height:26px; color:#FFF; opacity:0; pointer-events:none; touch-action:none; transform:scale(1) translateY(0); transition:all 0.15s ease, background-color 0.3s ease; }
	.map .tooltip span { display:block; position:absolute; z-index:1000; bottom:calc(100% - 5px); left:50%; padding:2px 4px; background-color:#F96B9E; color:#FFF;
		font-size:10px; font-weight:200; line-height:15px; text-transform:uppercase; white-space:nowrap; transition:all 0.15s ease, background-color 0.3s ease; opacity:0; }
	.map .tooltip.active { opacity:1; pointer-events:all; touch-action:auto; transform:scale(1.5) translateY(-25%); }
	.map .tooltip.active span { opacity:1; }
	.map .tooltip.active:hover,
	.map .tooltip.active:hover span { background-color:#E43280; }

	.map .map-content .tooltip.france { transform:scale(0.5) translateY(3%); opacity:0; pointer-events:none; touch-action:none; }
	.map .map-content.zoom.france .tooltip.france { opacity:1; pointer-events:all; touch-action:auto; }
	.map .map-content.zoom.france .tooltip.france span { display:block; position:absolute; z-index:1000; bottom:calc(100% - 5px); left:50%; padding:3px 3px; background-color:#F96B9E; color:#FFF;
		font-size:8px; font-weight:200; line-height:9px; text-transform:uppercase; white-space:nowrap; transition:all 0.15s ease, background-color 0.3s ease; opacity:1; }
	.map .map-content.zoom.france .tooltip.france:hover,
	.map .map-content.zoom.france .tooltip.france:hover span { background-color:#E43280; }
	.map .map-content.zoom.france .tooltip.france#tooltip-france-1 span { top:calc(100% - 9px); right:calc(100% - 7px); bottom:auto; left:auto; }

/* DATA */

	.infos { position:absolute; z-index:1000; top:15px; bottom:15px; left:15px; right:15px; padding:0; text-align:left; overflow:visible; pointer-events:none; touch-action:none; }

	.infos .info { position:absolute; z-index:1250; top:100%; bottom:0; right:0; width:100%; max-height:100%; background-color:#FFF; box-shadow:0 5px 30px rgba(0,0,0,0.25); opacity:0;
		display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; overflow-y:auto; transition:top 0.5s 0.125s ease, opacity 0.5s 0.125s ease; }
	.infos .info.active { opacity:1; top:0; pointer-events:all; touch-action:auto; }

	/* HEADER */

	.infos .info .info-header { flex-shrink:0; flex-grow:0; position:relative; z-index:1500; min-height:75px; padding:0;
		display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-content:stretch; align-items:stretch;
		box-shadow:0 15px 90px rgba(0,0,0,0.15); overflow:visible; }

	.infos .info .info-header .info-flag { order:1; align-self:flex-start; height:100%; }
	.infos .info .info-header .info-flag img { width:auto; height:100%; }

	.infos .info .info-header .info-title { order:2; align-self:center; padding:15px 30px; font-size:36px; line-height:40px; font-weight:300; color:#535353; }
	.infos .info .info-header .info-title .info-name { text-transform:uppercase; font-weight:200; color:#E43280; }
	.infos .info .info-header .info-title .info-city { font-weight:300; color:#535353; }
	.infos .info .info-header .info-title .info-country { font-weight:400; color:#A8BACA; }

	.infos .info .info-header .info-close { order:3; flex-shrink:0; flex-grow:0; display:flex; flex-direction:column; justify-content:center; transition:background-color 0.15s ease;
		text-align:center; font-size:60px; line-height:0; padding-bottom:3px; width:75px; min-height:75px; font-weight:500; background-color:#F96B9E; color:#FFF; cursor:pointer; }
	.infos .info .info-header .info-close:hover { background-color:#E43280; }

	/* MEDIA */

	.infos .info .info-overview { flex-shrink:1; flex-grow:1; position:relative; z-index:1250; width:100%; min-height:260px; border:15px solid #FFF; background-color:#FFF;
		display:flex; flex-direction:column; justify-content:center; align-content:stretch; align-items:stretch; overflow:hidden; }
	.infos .info .info-overview.fullscreen { position:fixed; z-index:6000; top:0; left:0; right:0; bottom:0; width:100%; height:100%; border-width:0; }
	.infos .info .info-overview .info-image { display:none; position:relative; z-index:1500; max-width:100%; max-height:100%; width:auto; height:auto; }

	.infos .info .info-overview .info-background { position:absolute; z-index:1500; top:0; left:0; right:0; bottom:0; background-image:url('content/interface/blank.png');
		background-color:transparent; background-position:center center; background-repeat:no-repeat; background-size:contain; }

	.infos .info .info-overview .info-arrows { position:absolute; z-index:1750; top:0; left:0; right:0; bottom:0;
		display:flex; flex-direction:row; justify-content:space-between; align-items:center; }
	.infos .info .info-overview .info-arrows .info-arrow { display:flex; justify-content:center; align-items:center; flex:0 0 50%; height:100%; }
	.infos .info .info-overview .info-arrows .info-arrow .fa { font-size:40px; line-height:40px; color:#535353; transition:color 0.15s ease; }
	.infos .info .info-overview .info-arrows .info-arrow:hover .fa { color:#E43280; }
	.infos .info .info-overview .info-arrows .info-arrow.arrow-prev { justify-content:flex-start; }
	.infos .info .info-overview .info-arrows .info-arrow.arrow-next { justify-content:flex-end; }

	.infos .info .info-overview:after { position:absolute; z-index:1250; top:50%; left:50%; width:60px; height:60px; border-radius:30px; text-align:center; margin:-30px 0 0 -30px;
		font-family:"FontAwesome"; content:"\f110"; font-size:45px; line-height:60px; background-color:#BCBCBC; color:#FFF; }
	.infos .info.active .info-overview:after { animation:spin 2s linear infinite; }
	.infos .info .info-overview .info-mode { position:absolute; z-index:1750; top:20px; right:20px; width:60px; height:60px; border-radius:30px; text-align:center;
		font-size:30px; line-height:60px; background-color:#BCBCBC; color:#FFF; cursor:pointer; }
	.infos .info .info-overview.fullscreen .info-mode .fa:before { content:"\f00d"; }

	/* TEXT */

	.infos .info .info-content { flex-shrink:0; flex-grow:0; position:relative; z-index:1500;
		display:flex; flex-direction:row; flex-wrap:nowrap; align-content:stretch; align-items:stretch; box-shadow:0 -15px 90px rgba(0,0,0,0.15); }

	.infos .info .info-content .info-description { flex-basis:100%; overflow:hidden; padding:15px 20px; }

	.infos .info .info-content .info-description .info-text { font-size:16px; line-height:32px; font-weight:300; color:#000; }
	.infos .info .info-content .info-description .info-text ul li { font-size:16px; line-height:32px; }
	.infos .info .info-content .info-description .info-text ul li:before { content:"• "; font-size:20px; line-height:20px; color:#E43280; }
	.infos .info .info-content .info-description .info-text p { text-align:center; margin:10px 0 0 0; font-size:18px; line-height:32px; font-weight:500; color:#E43280; }
	.infos .info .info-content .info-description .info-text p:before { display:inline-block; vertical-align:middle; content:url(content/interface/ribbon.svg); width:30px; height:auto; margin:0 10px 0 0; }
	.infos .info .info-content .info-description .info-text small { display:block; margin-top:10px; font-size:14px; line-height:24px; font-style:italic; color:#444; }
	.infos .info .info-content .info-description .info-text small span { color:#F0A794; }

/* RESPONSIVE */

	/* LARGE */

	@media (max-width:1200px) {
		}

	/* MEDIUM */

	@media (max-width:1000px) {
		.titles .sub-title { font-size:18px; line-height:30px; }
		.titles .sub-title small { font-size:14px; line-height:25px; }
		.titles .sub-title br { display:none; }
		}

	/* SMALL */

	@media (max-width:800px) {
		}

/* DEBUG */

	.center { display:none; position:absolute; z-index:5000; top:50%; left:50%; width:20px; height:20px; border-radius:10px; margin:-10px 0 0 -10px; text-align:center;
		font-size:15px; line-height:20px; background-color:rgba(255,255,255,0.5); pointer-events:none; touch-action:none; }