@charset "UTF-8";
/* CSS Document */
:root {
	--blue:      #023E7C;
	--yellow:    #FFE619;
	--red:       #D1242E;
	--logo_width:155px;
	--title_shadow_color:rgba(40,65,91,0.25);
	--timeline_items:20;
	--year_other: font-size:2rem; 
	--year_current: font-size:5rem; 
	--badge_size:120px;

	--level1_title:1.4rem;
	--level1_copy:1.4rem;

}
	html,body {
		margin: 0;
		padding: 0;
		text-align: center;
		font-size: 10px;
		line-height: 13px;
		color: #333;
		font-family: Metro;
		font-weight: normal;
	}
	html {
		overflow:hidden;
		overflow-y: scroll;
		user-select: none;
		-webkit-user-select:none;
	}
	body {
		overflow: hidden;
		overflow-y: hidden;
		overflow: visible;
		min-height: 100vw;
		min-height: 100svh;
		min-height: 100dvh;
	}
	body * {box-sizing: border-box;}
	h1,h2,h3,h4,h5,h6,p {
		margin: 0;
		padding: 0;
		font-size: 0.75em;
		line-height: 1.25;
	}
	p.bigger {
		font-size: 2rem;
		line-height: 1.25;
		margin-bottom: 10px;
	}
	div, figure, h1, i {
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
	ul,ol,ul li, ol li {
		display: block;
		vertical-align: top; 
		margin: 0; padding: 0;
		list-style: none;
	}
	a { 
		color: inherit;
		text-decoration: none;
	}
	figure {margin: 0; padding: 0;}
	.mirror {
		position: relative;
		left: 50%;
		transform: translate(-50%,0);
		padding-bottom: 75px;
		box-shadow: 0 0 0 3px #00000047;
		box-shadow: none;
	}

	@media screen and (min-width:1600px)                        { .mirror { width:1500px; }	}
	@media screen and (min-width:1440px) and (max-width:1599px) { .mirror { width:1400px; }	}
	@media screen and (min-width:1240px) and (max-width:1439px) { .mirror { width:1200px; }	}
	@media screen and (min-width:1040px) and (max-width:1239px) { .mirror { width:calc(100% - 100px);}	}
	@media screen and (min-width: 960px) and (max-width:1039px) { .mirror { width:calc(100% - 100px);}	}
 	@media screen and (min-width: 860px) and (max-width: 959px) { .mirror { width:calc(100% - 100px);}	}
 	@media screen and (min-width: 700px) and (max-width: 859px) { .mirror { width:calc(100% - 100px);}	}
 	@media screen and (min-width: 580px) and (max-width: 699px) { .mirror { width:calc(100% - 20px); }	}
 	@media screen and (min-width: 310px) and (max-width: 579px) { .mirror {width:calc(100% - 20px);padding-bottom: 30px;}	}

	@media screen and (min-width:   0px) and (max-width: 859px) {}
	@media screen and (min-width: 860px) and (max-width:1039px) {}
	@media screen and (min-width:1040px)                        {}


/*								*/
/*	LAYERS 						*/
/*								*/

	header { z-index: 10000; }
	main   { z-index: 5000; }
	footer { z-index: 0;}
	.popup { z-index: 15000; }
	.menu-outside-area { z-index: 10; }

/*								*/
/*	SHARED 						*/
/*								*/

		.hash-placeholder {
			position: relative;
			top: -70px;
			width: 100%;
			height: 5px;
			margin-bottom: -5px;
			background-color: rebeccapurple;
			background-color: transparent;
			z-index: 999;
		}
		.background {
			width: 100%;
			padding: 35px 0 0 0;
		}
		.copy {
			h2 {
				font-weight: 900;
				font-size: 5rem;
				line-height: 1.1;
				color: var(--blue);
				margin-bottom: 30px;
				word-spacing: 0.05em;
				font-kerning: normal;
			}
			ul {
				font-weight: 500;
				font-size: 2rem;
				line-height: 1.2;
				color: var(--blue);
			}
			ul li {}
		}
		.video {
			margin: 30px auto 0 auto;
			max-width: 800px;
		}
		.video video {
			width: 100%;
			aspect-ratio:16/9;
		}
		.background.content-filmstrip {
			position: relative;
			background: var(--blue);
			background: radial-gradient(circle, rgba(12,143,251,1) 0%, rgba(3,69,135,1) 60%);
		}
		.background.content-filmstrip:before {
			display: block;
			content:"";
			position: absolute;
			inset:0;
			background-image: url("../../images/assets/filmstrip.webp");
			background-size: 200% 90%;
			background-position: 50% 200%;
			background-repeat: no-repeat;
		}
		.background.content-prizes {
			position: relative;
			background: var(--blue);
			background: radial-gradient(circle, rgba(12,143,251,1) 0%, rgba(3,69,135,1) 60%);
		}
		.background.content-yellow {
			position: relative;
			background: rgba(254,230,22,1.00);
			background: radial-gradient(circle, rgba(251,241,154,1.00) 0%, rgba(254,230,22,1.00) 60%);
		}
		.content-filmstrip h2 {
			color: var(--yellow);
		}
		.content-yellow h2 {
			color: var(--blue);
		}
		.spacer {
			width: 100%;
			height: 75px;
			position: relative;
			bottom: -75px;
			bottom: 0;
		}
		.background.content-yellow      .spacer { background-color:var(--blue); }
		.background.content-filmstrip   .spacer { background-color:var(--yellow); }
		.background.content-prizes      .spacer { background-color:var(--blue); }
		
		/* spacers */
		
			.spacer { float:none; clear: both; display: block; 	}
			.spacer[data-size="small"] { height: 15px; }
			.spacer[data-size="medium"] { height: 25px; }
			.spacer[data-size="big"] { height: 40px; }
		
		/* character styles */
		
			.wbp { white-space: nowrap; }
		
		
		/* footnotes */

			.footnotes { position:relative; left: -20px;  margin:0; padding:0 0 0 30px; font-size:12px; line-height:16px; color: #999999; text-align: left; }
			.footnotes .footnote-item { margin:0; padding:0; list-style:none; }
			.footnotes .footnote-item:before { display:block; position:relative; left:-35px; top:0; width:30px; height:20px; margin:0 0 -20px 0; text-align:right; font-size: 12px; line-height: 16px; }
			.footnotes .footnote-item:nth-child(1):before { content:"*"; }
			.footnotes .footnote-item:nth-child(2):before { content:"**"; }
			.footnotes .footnote-item:nth-child(3):before { content:"***"; }
			.footnotes .footnote-item:nth-child(4):before { content:"****"; }
			.footnotes .footnote-item:nth-child(5):before { content:"*****"; }

		/* links */

			.same-site-link    { text-decoration: underline; }
			.foreign-site-link { text-decoration: underline; font-weight: bold; color: #25408e; }

				/* skins */
				
					.css.skn-2 .same-site-link,
					.css.skn-2 .foreign-site-link { color: #f7ec40; }

		
		
/*								*/
/*	HEADER 						*/
/*								*/

	.header-placeholder {
		height: 75px;
		overflow: hidden;
		background-color: white;
		background-color: var(--blue);
	}
	header {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		height: 75px;
		opacity: 0.2;
		opacity: 1;
		color: white;
	}
	header:before {
		content:"";
		display: block;
		position: absolute;
		width: 100%;
		height: 75px;
		background-color: #023E7BCC;
		background: linear-gradient(#023E7B 30%, #0452A2 100%);
		backdrop-filter:blur(5px);
		box-shadow: 0 2px 10px 0 rgba(0,0,0,0.5);
	}
	header .mirror {
		padding-bottom: 0;
	}

	/* menu */
	
	#menubar {
		position: relative;
		white-space: nowrap;
		overflow: hidden;
		overflow: visible;
		z-index: 10;
	}
	#menubar h1.logo {
		display: inline-block;
		position: relative;
		z-index: 9;
		vertical-align: middle;
		width: var(--logo_width);
		height: auto;
		margin: 5px 0 5px 0;
		text-indent: -1000em;
		background-image: url("../../images/logo/logo-30.webp");
		aspect-ratio:400/155;
	}
	#menubar h1.logo > a {
		display: inline-block;
		position: absolute;
		inset:0;
		text-decoration: none;
		background-color: rgba(186,186,78,0.56);
		background-color: transparent;
	}
	#menubar a.menu-toggle {
		display: block;
		position: fixed;
		text-decoration: none;
		color: inherit;
		width: 30px;
		height: 75px;
		text-align: right;
		right: 15px;
		top: 0px;
	}
	#menubar a.menu-toggle i {
		font-size: 30px;
		line-height: 75px;
		z-index: 15;
	}
	#menubar a.menu-toggle i:before { content:"\EC06"; }
	html[data-menu="1"] #menubar a.menu-toggle i:before { content:"\EBAB"; }
	#menubar .menu-container {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		width: calc(100% - var(--logo_width));
		font-size: 0;
		line-height: 0;
		text-align: right;
		user-select: none;
		padding: 0 0 0 0;
		z-index: 10;
	}
	#menubar ul.menu {
		position: relative;
	}
	#menubar ul.menu[data-animating="1"] {
		transition: transform .2s ease, opacity 0.5s ease;
	}
	#menubar ul.menu li {
		display: inline-block;
		vertical-align: top;
		font-size: 1.5rem;
		line-height: 1.2;
		text-transform: uppercase;
	}
	#menubar ul.menu li a {
		display: block;
		padding: 5px 15px;
	}
	#menubar ul.menu li.current a {
		color: var(--yellow);
	}
	#menubar ul.menu li a * { pointer-events: none; }
	.menu-outside-area {
		display: block;
		position: fixed;
		left:0;
		top: 0;
		width: 100vw;
		height: 100vh;
		opacity: 0.5;
		background-color: var(--blue);
		backdrop-filter:blur(5px);
		-webkit-backdrop-filter:blur(5px);
	}
	html[data-menu="0"] .menu-outside-area { display: none; }

		@media screen and (min-width:1440px) {
			#menubar a.menu-toggle { display: none; }
		}
		@media screen and (max-width:1439px) {
			#menubar a.menu-toggle { display: block; }
			#menubar .menu-container {
				margin-top: 75px;
				margin-top: 0;
				overflow: hidden;
			}
			html[data-menu="0"] #menubar .menu-container { pointer-events: none; }
			html[data-menu="0"] #menubar .menu-container ul.menu {
				transform:translateY(-100%);
				opacity: 1;
				pointer-events: none;
			}
			html[data-menu="1"] #menubar .menu-container ul.menu  {
				transform:translateY(0%);
				opacity: 1;
			}
			#menubar .menu-toggle {z-index: 11;}
			#menubar .menu-container {
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				width: calc(100vw);
				overflow: hidden;
			}
			#menubar .menu-container ul.menu {
				background-color: var(--blue);
				opacity: 0.9;
				padding: 35px 0 35px 0px;
			}
			#menubar .menu-container ul.menu li {
				display: block;
				font-size: 2.0rem;
				line-height: 1.2;
				padding-bottom: 8px;
				text-align: center;
			}
		}

		@media screen and (min-width:1600px)                        { }
		@media screen and (min-width:1440px) and (max-width:1599px) { }
		@media screen and (min-width:1240px) and (max-width:1439px) { }
		@media screen and (min-width:1040px) and (max-width:1239px) { }
		@media screen and (min-width: 960px) and (max-width:1039px) { }
		@media screen and (min-width: 860px) and (max-width: 959px) { }
		@media screen and (min-width: 700px) and (max-width: 859px) { }
		@media screen and (min-width: 580px) and (max-width: 699px) { }
		@media screen and (min-width: 310px) and (max-width: 579px) { }

	/*								*/
	/*	metrogeneration				*/
	/*								*/

		#metrogeneration {
			overflow: hidden;
		}
		#metrogeneration {
			.content {
				overflow: hidden;
			}
			.hero-background {
				background: rgb(12,143,251);
				background: radial-gradient(circle, rgba(12,143,251,1) 0%, rgba(3,69,135,1) 80%);
				width: 100%;
			}
			.background {
				background-color: var(--yellow);
				/* padding-bottom: 35px; */
				z-index: 1;
				position: relative;
				overflow: hidden;
			}
			.mirror {
				position: relative;
			}
			.hero-background .mirror:first-child {
				padding-bottom: 0;
				text-align: center;
			}
			.hero {
				position: relative;
				width: calc(100% + 100px);
				/* aspect-ratio: 772/551; */
				/* overflow: hidden; */
				padding: 55% 0 0 0;
				left: calc(50% - 0px);
				transform: translateX(-50%);
				/* overflow: hidden; */
			}
			figure.persons {
				position: absolute;
				inset: 0 0 0 0;
				/* left: 40%; */
				/* transform: translateX(-80%); */
			}
			figure.persons ul.images {
				position: absolute;
				inset:0;
				left: -10%;
			}
			figure.persons ul.images li {
				display: block;
				width: calc(25% + 11.666%);
				position: absolute;
				inset:0;
				background-color: var(--blue);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				overflow: hidden;
				-webkit-clip-path: polygon( 33.333% 0%, 100% 0%,66.666% 100%, 0% 100%);
			}
			figure.persons ul.images li:nth-child(1) { left:calc(0 * 25%); }
			figure.persons ul.images li:nth-child(2) { left:calc(1 * 25%); }
			figure.persons ul.images li:nth-child(3) { left:calc(2 * 25%); }
			figure.persons ul.images li:nth-child(4) { left:calc(3 * 25%); }
			
			figure.persons ul.images li img {
				position: absolute;
				object-fit: contain;
				object-position: 10em 0;
				/* inset: 0; */
				height: 100%;
			}
			figure.persons ul.images li img:first-child {
	            opacity:1;
	            z-index:2;
	            left: -55%;
	            filter: drop-shadow(1px 1px 8px hsl(216.99deg 58.23% 20.9% / 31%));
	    	}
			figure.persons ul.images li img:last-child  {/* opacity:0.5; */z-index:1;left: -50%;}
			
			figure.persons ul.images li.image-1 img:first-child { transform:scale(1,1); transition:transform 0.9s ease, filter 0.9s ease; }
			figure.persons ul.images li.image-2 img:first-child { transform:scale(1,1); transition:transform 0.9s ease, filter 0.9s ease; }
			figure.persons ul.images li.image-3 img:first-child { transform:scale(1,1); transition:transform 0.9s ease, filter 0.9s ease; }
			figure.persons ul.images li.image-4 img:first-child { transform:scale(1,1); transition:transform 0.9s ease, filter 0.9s ease; }

			figure.persons ul.images li.image-1:hover img:first-child { transform:scale(1.025,1.025); filter: drop-shadow(8px 15px 10px hsl(216.99deg 58.23% 10% / 50%)); }
			figure.persons ul.images li.image-2:hover img:first-child { transform:scale(1.025,1.025); filter: drop-shadow(8px 15px 10px hsl(216.99deg 58.23% 10% / 50%)); }
			figure.persons ul.images li.image-3:hover img:first-child { transform:scale(1.025,1.025); filter: drop-shadow(8px 15px 10px hsl(216.99deg 58.23% 10% / 50%)); }
			figure.persons ul.images li.image-4:hover img:first-child { transform:scale(1.025,1.025); filter: drop-shadow(8px 15px 10px hsl(216.99deg 58.23% 10% / 50%)); }

			figure.persons ul.images li.image-1 img:last-child { transform:scale(1.025,1.025); transition:transform 0.9s ease; }
			figure.persons ul.images li.image-2 img:last-child { transform:scale(1.025,1.025); transition:transform 0.9s ease; }
			figure.persons ul.images li.image-3 img:last-child { transform:scale(1.025,1.025); transition:transform 0.9s ease; }
			figure.persons ul.images li.image-4 img:last-child { transform:scale(1.025,1.025); transition:transform 0.9s ease; }

			figure.persons ul.images li.image-1:hover img:last-child { transform:scale(1.0,1.0); }
			figure.persons ul.images li.image-2:hover img:last-child { transform:scale(1.0,1.0); }
			figure.persons ul.images li.image-3:hover img:last-child { transform:scale(1.0,1.0); }
			figure.persons ul.images li.image-4:hover img:last-child { transform:scale(1.0,1.0); }

			
			figcaption {
				position: absolute;
				left: -33vw;
				right: -33vw;
				bottom: -7px;
				text-align: center;
				font-size: 8vw;
				line-height: calc(8vw * 0.945);
				text-transform: uppercase;
				font-weight: 1000;
				color: var(--yellow);
				text-shadow: 	0px 0px 10px var(--title_shadow_color), 
								0px 0px 15px var(--title_shadow_color),
								0px 0px 20px var(--title_shadow_color),
								0px 0px 40px var(--title_shadow_color);
				left: 50%;
				transform: translateX(-50%);
			}
			.copy {}
			.copy {
				h2 {}
				ul {}
				ul li {
					text-wrap: balance;
				}
			}
		}

	/*								*/
	/*	characters					*/
	/*								*/

		#characters {}
		#characters {

			.background.content-filmstrip {
				/* padding-bottom: 35px; */
			}
			.content-filmstrip h2 {
				font-weight: 400;
			}
			.content-yellow h2 {
				font-weight: 900;
			}
			h2 strong {
				display: block;
				font-weight: 900;
			}
			.content {
				margin-bottom: 75px;
				/* padding-bottom: 75px; */
			}
			.characters {
				/* margin-bottom: 35px; */
			}
			.characters .scroller {}
			ul {
				width: calc(100% + 20px);
				margin: 0; padding: 0;
				font-size: 0; line-height: 0;
			}
			ul[data-count="4"] {
				position: relative;
			}
			ul li {
				display: inline-block;
				vertical-align: top;
			}
			ul[data-count="4"] li {
				width: calc(25% - 20px);
				margin-right: 20px;
			}
			ul li a {}
			ul li figure {
				background-color:var(--blue);
				aspect-ratio:1/1;
				border-top-left-radius:  25px;
				border-top-right-radius: 25px;
				background-size: cover;
			}
			ul li figcaption {
				font-size: 1.5rem;
				line-height: 1.2;
			}
			ul li figcaption.name-and-title {
				background-color: var(--blue);
				margin-block:5px;
				padding-block:10px;
				height: 6em;
			}
			ul li figcaption.name-and-title span {
				position: relative;
				display: block;
				top: 50%;
				transform:translateY(-50%);
			}
			
			ul li figcaption.name-and-title h3 {
				color: var(--yellow);
				font-size: 3rem;
				line-height: 1.3;
			}
			ul li figcaption.name-and-title h4 {
				color: var(--yellow);
				font-weight: 500;
				font-size: 2rem;
				line-height: 1.2;
				margin-top: 5px;
			}
			ul li figcaption.biography {
				padding: 15px 15px 10px 15px;
				background-color:white;
				aspect-ratio:5/4;
				border-bottom-left-radius:  25px;
				border-bottom-right-radius: 25px;
				overflow: hidden;
			}
			ul li figcaption p {}
		}
		
		@media screen and (min-width:1600px)                        { #characters ul[data-count="4"] li {}	#characters ul li figcaption p {font-size: 1.55rem; line-height:1.25; } }
		@media screen and (min-width:1440px) and (max-width:1599px) { #characters ul[data-count="4"] li {}	#characters ul li figcaption p {font-size: 1.5rem; line-height:1.2; } }
		@media screen and (min-width:1240px) and (max-width:1439px) { #characters ul[data-count="4"] li { width: calc(25% - 20px); } #characters ul li figcaption.biography { aspect-ratio:5/5; } #characters ul li figcaption.name-and-title h3 { font-size:2.5rem; } #characters ul li figcaption.name-and-title h4 { font-size:1.65rem; } #characters ul li figcaption p {font-size: 1.4rem;line-height:1.2;} }
		@media screen and (min-width:1040px) and (max-width:1239px) { #characters ul[data-count="4"] li { width: calc(25% - 20px); } #characters ul li figcaption.biography { aspect-ratio:5/7; } #characters ul li figcaption.name-and-title h3 { font-size:2.5rem; } #characters ul li figcaption.name-and-title h4 { font-size:1.5rem; } #characters ul li figcaption p {font-size: 1.35rem;line-height:1.2;} }
		@media screen and (min-width: 960px) and (max-width:1039px) { #characters ul { margin-bottom: -20px; } #characters ul[data-count="4"] li { width: calc(50% - 20px); margin-bottom: 20px; } #characters ul li figcaption.biography { aspect-ratio:5/3; } #characters ul li figcaption p {font-size: 1.6rem; line-height:1.3; } }
		@media screen and (min-width: 860px) and (max-width: 959px) { #characters ul { margin-bottom: -20px; } #characters ul[data-count="4"] li { width: calc(50% - 20px); margin-bottom: 20px; } #characters ul li figcaption p {font-size: 1.6rem; line-height:1.3; } }
		@media screen and (min-width: 700px) and (max-width: 859px) { #characters ul { margin-bottom: -20px; } #characters ul[data-count="4"] li { width: calc(50% - 20px); margin-bottom: 20px; } #characters ul li figcaption p {font-size: 1.4rem;} }
		@media screen and (min-width: 580px) and (max-width: 699px) { #characters ul { margin-bottom: -20px; } #characters ul[data-count="4"] li { width: calc(50% - 20px); margin-bottom: 20px; } #characters ul li figcaption.biography { aspect-ratio:5/4.8; } #characters ul li figcaption p {font-size: 1.45rem;} }
		@media screen and (min-width: 310px) and (max-width: 579px) { 
			#characters ul[data-count="4"] {left: 50%;transform:translateX(-50%); width: calc(100% - 10px);}
			#characters ul[data-count="4"] li { width: calc(100% - 0px); margin:0 0 20px 0; }
			#characters ul li figcaption p {font-size: 1.6rem;line-height: 1.3;padding: 10px 15px 15px 15px;}
			#characters ul li figcaption.biography {height: auto;aspect-ratio: auto;}
		}
		@media screen and (min-width:   0px) and (max-width: 309px) {
			#characters ul[data-count="4"] {left: 50%;transform:translateX(-50%);width: calc(100% - 20px);}
			#characters ul[data-count="4"] li { width: calc(100% - 0px); margin:0 0 20px 0; }
			#characters ul li figcaption p {font-size: 1.5rem;line-height: 1.3;padding: 10px 15px 15px 15px;}
			#characters ul li figcaption.biography {height: auto;aspect-ratio: auto;}
		}
		
	/*								*/
	/*	then-and-now				*/
	/*								*/
	
		#then-and-now {}
		#then-and-now {
		
			.timeline {
				display: block;
				position: relative;
				background-color: beige;
				background-color: transparent;
				text-align: left;
			}
			.buttons {
				position: absolute;
				inset:0;
				z-index: 1;
				pointer-events: none;
			}
			.buttons a {
				display: block;
				position: absolute;
				width:  40px;
				height: 40px;
				background-color: #999;
				color: white;
				text-align: center;
				top: calc(50% - 20px);
				pointer-events: all;
				transition: background-color 0.3s ease;
			}
			.buttons a:hover {
				background-color: var(--blue);
			}
			.buttons a i {
				font-size: 30px;
				line-height: 40px;
			}
			.buttons a.prev { left:0; }
			.buttons a.next { right:0; }
			.buttons a.prev i:before { content:"\EBA3"; }
			.buttons a.next i:before { content:"\EBA8"; }
			
			.timeline {
				.cover {
					display: block;
					position: absolute;
					width: calc(100% + 20px);
					width: 100vw;
					left: 50%;
					transform:translateX(-50%);
					height: 100%;
					z-index: 1;
					pointer-events: none;
					background-color: rgba(185,185,130,0.72);
					background-color: transparent;
				}
				.cover > span {
					position: absolute;
					width: 150px;
					height: 100%;
					outline: 1px solid orange;
					outline: none;
				}
				.cover > span:nth-child(1) {
					left:0;
					background:none;
					background-color: rgba(202,65,68,0.67);
					background-color: transparent;
					background: linear-gradient(90deg, white 30%, rgba(255,255,255,0.00) 100%);
				}
				.cover > span:nth-child(2) {
					right:0;
					background:none;
					background-color: rgba(65,202,112,0.67);
					background-color: transparent;
					background: linear-gradient(-90deg, white 30%, rgba(255,255,255,0.00) 100%);
				}
				.scroller {}
				.scroller * {
					user-select: none;
					/* pointer-events: none; */
				}
				.scroller ul {
					position: relative;
					margin: 0;
					padding: 0;
					list-style: none;
					font-size: 0;
					line-height: 0;
					width: 100%;
				}
				.scroller ul li {
					display: inline-block;
					vertical-align: top;
					position: relative;
					list-style: none;
					margin: 0;
					padding: 0;
					font-size: 1.2rem;
					line-height: 1.2;
					width: calc(33.333% - 0px);
					width:  calc(100% / 20);
					height: auto;
					aspect-ratio: 1/1.25;
				}
				.scroller ul li[data-template="0"]:before,
				.scroller ul li[data-template="1"]:before,
				.scroller ul li[data-template="2"]:before {
					content:"";
					display: block;
					position: absolute;
					left: 0;
					right: 0;
					top: 50%;
					width: 100%;
					height: 3px;
					background-color: var(--blue);
				}
				.scroller ul li[data-template="1"]:after,
				.scroller ul li[data-template="2"]:after {
					content:"";
					display: block;
					position: absolute;
					left: 50%;
					top: 35%; 
					width: 3px;
					height: 15%;
					background-color: var(--blue);
				}
				.XXXscroller ul li:nth-child(1) { background-color: #4EC4C4; }
				.XXXscroller ul li:nth-child(2) { background-color: #9A74CF; }
				.XXXscroller ul li:nth-child(3) { background-color: #94CE45; }
				.XXXscroller ul li:nth-child(4) { background-color: #C5DE38; }
				.XXXscroller ul li:nth-child(5) { background-color: #ECFF00; }
				.XXXscroller ul li:nth-child(6) { background-color: #FF7000; }
				.XXXscroller ul li:nth-child(7) { background-color: #EE7D5E; }
				.XXXscroller ul li:nth-child(8) { background-color: #CE70A1; }
				.scroller ul li p.legend {
					position: absolute;
					display: inline-block;
					bottom: calc(65% + 0px);
					left: 50%;
					right: 0;
					text-align: center;
					font-weight: 700;
					font-size: 2rem;
					line-height: 1.2;
					padding-inline: 15%;
					padding-inline:0;
					padding: 15px 15px;
					transform:translateX(-50%) scale(0.8,0.8);
					border: 3px solid var(--blue);
					transition:transform 0.5s ease;
					border-color: white;
				}
				.scroller ul li[data-template="1"] {
					
				}
				.scroller ul li[data-template="2"] {
				
				}
				.scroller ul li[data-template="1"] p.legend {
					transform-origin: bottom center;
					
				}
				.scroller ul li[data-template="2"] p.legend  {
					bottom:auto;
					top: calc(65% + 0px);
					transform-origin: top center;
				}
				.scroller ul li p.year {
					position: absolute;
					left: 0;
					right: 0;
					top: calc(50% + 15px);
					text-align: center;
					font-family: Years;
					font-size:4.0rem;
					line-height: 2;
					transform:scale(0.75,0.75);
					color:#999;
					transition:font-size 0.5s ease, line-height 0.5s ease, color 0.5s ease;
					transition:all 0.5s ease;
				}
				.scroller ul li[data-template="1"] p.year:before,
				.scroller ul li[data-template="2"] p.year:before {
					content:"";
					display: block;
				}
				.scroller ul li .dot {
					position: absolute;
					z-index: 1;
					width:         30px;
					height:        30px;
					border-radius: 30px;
					left: calc(50% - 14px);
					top: calc(50% - 14px);
					background-color: #03A2DE;
				}
				.scroller ul li:first-child .dot { display: none; }
				.scroller ul li:last-child .dot { display: none; }
				.scroller ul li .figures {
					position: absolute;
					z-index: 1;
					left: 50%;
					transform:translateX(-50%) scale(0.7,0.7);
					transition:transform 0.5s ease;
					width: auto;
					text-align: center;
					padding-bottom: 10px;
					margin-left: 0px;
					padding: 10px 0 10px 10px;
					white-space: nowrap;
					outline: 1px solid red;
					outline: none;
					background-color: white;
					border: 3px solid var(--blue);
					border-color: white;
				}
				.scroller ul li .figures[data-count="1"] { width: calc( 50% + 40px); }
				.scroller ul li .figures[data-count="2"] { width: calc(100% + 40px); }
				.scroller ul li[data-template="1"] .figures {
					top: calc(65% + 0px);
					transform-origin: top center;
				}
				.scroller ul li[data-template="2"] .figures {
					top: 33px;
					transform-origin: bottom center;
				}
				.scroller ul li .figures figure {
					display: inline-block;
					vertical-align: top;
					aspect-ratio: 13/9;
					margin: 0;
					padding: 0;
					margin-right: 10px;
					font-size: 0;
					line-height: 0;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}
				.scroller ul li .figures[data-count="1"] figure { width: calc(100% - 10px); }
				.scroller ul li .figures[data-count="2"] figure { width: calc( 50% - 10px); }
				.scroller ul li .figures figure:first-child {}
			}
			.timeline {
				width: 100%;
				/* overflow: hidden; */
				scroll-behavior: smooth;
				outline: 1px solid red;
				outline: none;
			}
			.timeline .scroller {
				position: relative;
				width: calc(33.333% * 20);
				transition: all .5s ease;
				outline: 1px dotted orange;
				outline: none;
			}
			.timeline .draggable {
				position: absolute;
				height: 100%;
				inset:0;
				background-color: rgba(187,187,79,0.61);
				z-index: 999;
				pointer-events: none;
				background-color: transparent;
				pointer-events: none;
			}
			
			.timeline[data-index="1" ] .scroller { transform:translateX( calc( -0 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="2" ] .scroller { transform:translateX( calc( -1 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="3" ] .scroller { transform:translateX( calc( -2 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="4" ] .scroller { transform:translateX( calc( -3 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="5" ] .scroller { transform:translateX( calc( -4 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="6" ] .scroller { transform:translateX( calc( -5 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="7" ] .scroller { transform:translateX( calc( -6 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="8" ] .scroller { transform:translateX( calc( -7 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="9" ] .scroller { transform:translateX( calc( -8 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="10"] .scroller { transform:translateX( calc( -9 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="11"] .scroller { transform:translateX( calc(-10 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="12"] .scroller { transform:translateX( calc(-11 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="13"] .scroller { transform:translateX( calc(-12 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="14"] .scroller { transform:translateX( calc(-13 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="15"] .scroller { transform:translateX( calc(-14 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="16"] .scroller { transform:translateX( calc(-15 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="17"] .scroller { transform:translateX( calc(-16 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="18"] .scroller { transform:translateX( calc(-17 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="19"] .scroller { transform:translateX( calc(-18 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="20"] .scroller { transform:translateX( calc(-19 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="21"] .scroller { transform:translateX( calc(-20 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="22"] .scroller { transform:translateX( calc(-21 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="23"] .scroller { transform:translateX( calc(-22 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="24"] .scroller { transform:translateX( calc(-23 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="25"] .scroller { transform:translateX( calc(-24 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="26"] .scroller { transform:translateX( calc(-25 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="27"] .scroller { transform:translateX( calc(-26 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="28"] .scroller { transform:translateX( calc(-27 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="29"] .scroller { transform:translateX( calc(-28 * 33.333% / (20 / 3) ) ); }
			.timeline[data-index="30"] .scroller { transform:translateX( calc(-29 * 33.333% / (20 / 3) ) ); }

			.timeline[data-index="1" ] .scroller ul li:nth-child(2)  p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="2" ] .scroller ul li:nth-child(3)  p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="3" ] .scroller ul li:nth-child(4)  p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="4" ] .scroller ul li:nth-child(5)  p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="5" ] .scroller ul li:nth-child(6)  p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="6" ] .scroller ul li:nth-child(7)  p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="7" ] .scroller ul li:nth-child(8)  p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="8" ] .scroller ul li:nth-child(9)  p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="9" ] .scroller ul li:nth-child(10) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="10"] .scroller ul li:nth-child(11) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="11"] .scroller ul li:nth-child(12) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="12"] .scroller ul li:nth-child(13) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="13"] .scroller ul li:nth-child(14) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="14"] .scroller ul li:nth-child(15) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="15"] .scroller ul li:nth-child(16) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="16"] .scroller ul li:nth-child(17) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="17"] .scroller ul li:nth-child(18) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="18"] .scroller ul li:nth-child(19) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="19"] .scroller ul li:nth-child(20) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="20"] .scroller ul li:nth-child(21) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="21"] .scroller ul li:nth-child(22) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="22"] .scroller ul li:nth-child(23) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="23"] .scroller ul li:nth-child(24) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="24"] .scroller ul li:nth-child(25) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="25"] .scroller ul li:nth-child(26) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="26"] .scroller ul li:nth-child(27) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="27"] .scroller ul li:nth-child(28) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="28"] .scroller ul li:nth-child(29) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="29"] .scroller ul li:nth-child(30) p.year { color:var(--blue); transform:scale(1,1); }
			.timeline[data-index="30"] .scroller ul li:nth-child(31) p.year { color:var(--blue); transform:scale(1,1); }

			.timeline[data-index="1" ] .scroller ul li:nth-child(2)  p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="2" ] .scroller ul li:nth-child(3)  p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="3" ] .scroller ul li:nth-child(4)  p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="4" ] .scroller ul li:nth-child(5)  p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="5" ] .scroller ul li:nth-child(6)  p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="6" ] .scroller ul li:nth-child(7)  p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="7" ] .scroller ul li:nth-child(8)  p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="8" ] .scroller ul li:nth-child(9)  p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="9" ] .scroller ul li:nth-child(10) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="10"] .scroller ul li:nth-child(11) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="11"] .scroller ul li:nth-child(12) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="12"] .scroller ul li:nth-child(13) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="13"] .scroller ul li:nth-child(14) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="14"] .scroller ul li:nth-child(15) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="15"] .scroller ul li:nth-child(16) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="16"] .scroller ul li:nth-child(17) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="17"] .scroller ul li:nth-child(18) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="18"] .scroller ul li:nth-child(19) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="19"] .scroller ul li:nth-child(20) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="20"] .scroller ul li:nth-child(21) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="21"] .scroller ul li:nth-child(22) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="22"] .scroller ul li:nth-child(23) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="23"] .scroller ul li:nth-child(24) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="24"] .scroller ul li:nth-child(25) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="25"] .scroller ul li:nth-child(26) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="26"] .scroller ul li:nth-child(27) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="27"] .scroller ul li:nth-child(28) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="28"] .scroller ul li:nth-child(29) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="29"] .scroller ul li:nth-child(30) p.legend { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="30"] .scroller ul li:nth-child(31) p.legend { transform:translateX(-50%) scale(1,1); }

			.timeline[data-index="1" ] .scroller ul li:nth-child(2)  .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="2" ] .scroller ul li:nth-child(3)  .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="3" ] .scroller ul li:nth-child(4)  .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="4" ] .scroller ul li:nth-child(5)  .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="5" ] .scroller ul li:nth-child(6)  .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="6" ] .scroller ul li:nth-child(7)  .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="7" ] .scroller ul li:nth-child(8)  .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="8" ] .scroller ul li:nth-child(9)  .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="9" ] .scroller ul li:nth-child(10) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="10"] .scroller ul li:nth-child(11) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="11"] .scroller ul li:nth-child(12) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="12"] .scroller ul li:nth-child(13) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="13"] .scroller ul li:nth-child(14) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="14"] .scroller ul li:nth-child(15) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="15"] .scroller ul li:nth-child(16) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="16"] .scroller ul li:nth-child(17) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="17"] .scroller ul li:nth-child(18) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="18"] .scroller ul li:nth-child(19) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="19"] .scroller ul li:nth-child(20) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="20"] .scroller ul li:nth-child(21) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="21"] .scroller ul li:nth-child(22) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="22"] .scroller ul li:nth-child(23) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="23"] .scroller ul li:nth-child(24) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="24"] .scroller ul li:nth-child(25) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="25"] .scroller ul li:nth-child(26) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="26"] .scroller ul li:nth-child(27) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="27"] .scroller ul li:nth-child(28) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="28"] .scroller ul li:nth-child(29) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="29"] .scroller ul li:nth-child(30) .figures { transform:translateX(-50%) scale(1,1); }
			.timeline[data-index="30"] .scroller ul li:nth-child(31) .figures { transform:translateX(-50%) scale(1,1); }

			.timeline li[template="1"] {}
			.timeline li[template="2"] {}
			.timeline .scroller ul li[data-template="0"] {
				p.year:before { display: none; }
				p.year:after { display: none; }
				p.legend { display: none; }
			}
		}

		@media screen and (min-width:1600px)                        {
			#then-and-now .timeline .cover span { width: calc(50vw - 800px); }
		}
		@media screen and (min-width:1440px) and (max-width:1599px) {
			#then-and-now .timeline .cover span { width: calc(50vw - 600px); }
		}
		@media screen and (min-width:1240px) and (max-width:1439px) {
			#then-and-now .timeline .cover span { width: calc(50vw - 500px); }
		}
		@media screen and (min-width:1040px) and (max-width:1239px) {
			#then-and-now .timeline .scroller ul li p.legend { padding:15px 0; min-width: 250px; }
			#then-and-now .timeline .cover span { width: calc(50vw - 450px); }
		}
		@media screen and (min-width: 960px) and (max-width:1039px) {
			#then-and-now .timeline .scroller ul li {aspect-ratio: 1/1.5;} 
			#then-and-now .timeline .scroller ul li p.legend { padding:15px 0; min-width: 250px; } 
			#then-and-now .timeline .cover span { width: calc(50vw - 400px); }
		}
		@media screen and (min-width: 860px) and (max-width: 959px) {
			#then-and-now .timeline .scroller ul li {aspect-ratio: 1/1.8;} 
			#then-and-now .timeline .scroller ul li p.legend { padding:15px 0; min-width: 250px; } 
			#then-and-now .timeline .cover span { width: calc(50vw - 350px); }
		}
		@media screen and (min-width: 700px) and (max-width: 859px) {
			#then-and-now .timeline { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); }
			#then-and-now .timeline .scroller ul li {aspect-ratio: 1/1.8;} 
			#then-and-now .timeline .scroller ul li p.legend { padding:15px 0; min-width: 250px; } 
			#then-and-now .timeline .scroller ul li[data-template="1"] .figures { top:calc(75% + 0px); }
			#then-and-now .timeline .cover span { width: calc(50vw - 320px); }
		}
		@media screen and (min-width: 580px) and (max-width: 699px) {
			#then-and-now .timeline { width: calc(100vw + 100px); position: relative; left: 50%; transform: translateX(-50%); }
			#then-and-now .timeline .scroller ul li {aspect-ratio: 1/1.8;} 
			#then-and-now .timeline .scroller ul li p.legend { padding:15px 0; min-width: 250px; } 
			#then-and-now .timeline .scroller ul li[data-template="1"] .figures { top:calc(75% + 0px); }
			#then-and-now .timeline .cover  { width: calc(100% - 100px); left: 50%; transform: translateX(-50%); }
			#then-and-now .buttons { inset:0 50px; }
			#then-and-now .timeline .cover span { width: calc(50vw - 290px); }
		}
		@media screen and (min-width: 310px) and (max-width: 579px) {
			#then-and-now .timeline { width: calc(100vw + 400px); position: relative; left: 50%; transform: translateX(-50%); }
			#then-and-now .timeline .scroller ul li {aspect-ratio: 1/1.8;} 
			#then-and-now .timeline .scroller ul li p.legend { padding:15px 0; min-width: 250px; } 
			#then-and-now .timeline .scroller ul li[data-template="1"] .figures { top:calc(75% + 0px); }
			#then-and-now .timeline .cover  { width: calc(100% - 400px); left: 50%; transform: translateX(-50%); }
			#then-and-now .timeline .cover > span { width: 75px; }
			#then-and-now .buttons { inset:0 200px; }
			#then-and-now .timeline .cover span { width: calc(50vw - 210px); }
		}

	/*								*/
	/*	testimonials				*/
	/*								*/

		#testimonials {
			position: relative;
		}
		#testimonials {
			.background {
			}
		}

	/*								*/
	/*	promotion					*/
	/*								*/

		#promotion {
		}
		#promotion .promotion h2 {
			text-transform: uppercase;
			text-align: center;
			margin-bottom: 15px;
			text-wrap: balance;
			padding-inline: 22%;
		}
		#promotion .promotion {
			position: relative;
			width: 100%;
			padding-top: 46%;
			background-color: var(--yellow);
			background-color: white;
			background-color: rgba(179,179,212,0.70);
			background-color: transparent;
		}
		#promotion .promotion .products {
			position: absolute;
			top: 25px;
			left: 20%;
			transform: translate(-50%,-0%);
			width: 40%;
			aspect-ratio: 1/1;
			overflow: hidden;
			outline: 1px solid green;
			outline: none;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
		}
		#promotion .promotion .products figure {
			position: absolute;
			width: 100%;
			aspect-ratio:1/1;
			right: 55%;
			top: 0%;
			transform: translateY(0%);
			background-image:url(../../images/page/products.webp);
			background-size: contain;
			background-repeat: no-repeat;
			outline: 1px solid blue;
			/* max-width: 500px; */
			margin: 0;
			padding: 0;
			left: 0;
			outline: none;
		}
		#promotion .promotion .products figcaption {
			position: absolute;
			left: 0%;
			right: 0%;
			bottom: 10px;
			/* max-width: 500px; */
			margin: 0;
			padding: 0;
			aspect-ratio: 3.5/1;
			/* transform:translateY(-50%); */
			padding: 0;
			background-color: var(--red);
			box-shadow: 15px 15px 0 0 var(--yellow);
			background-color: transparent;
			box-shadow: none;
			text-align: left;
			z-index: 1;
			outline: 1px solid red;
			outline: none;
		}
		#promotion .promotion .products figcaption .wave {
			position: absolute;
			display: block;
			z-index: -1;
			content:"";
			width: 100%;
			aspect-ratio:1/1;
			background-image: url("../../images/page/wave.svg");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top left;
			transform: translate(0, -100px);
			opacity: 0.9;
		}
		#promotion .promotion .products figcaption .copy {
			position: absolute;
			bottom: 0;
			padding: 15px 30px;
		}
		#promotion .promotion .products figcaption p.amount {
			position: relative;
			font-size: calc(var(--badge_size) / 1.5);
			line-height: calc(var(--badge_size) - 10px);
			width: var(--badge_size);
			height: var(--badge_size);
			margin: 0 0 calc(-1 * var(--badge_size)) 0;
			font-weight: 900;
			border-radius: var(--badge_size);
			background-color: var(--yellow);
			text-align: center;
			color: black;
			color: var(--blue);
		}
		#promotion .promotion .products figcaption p.description {
			font-size: 2.5rem;
			line-height: 1.2;
			color: white;
			margin: 15px 0 0 calc(var(--badge_size) + 20px);
		}
		#promotion .promotion .prizes {
			position: absolute;
			background-color: #9f9f7566;
			background-color: transparent;
			top: 260px;
			left: 40%;
			width: 60%;
			outline: 1px solid red;
			aspect-ratio: 1/1;
			transform: translate(0, -50%);
			outline: none;
		}
		#promotion .promotion .prizes .prize {
			padding: 5px;
			position: absolute;
			width: 50%;
			height: auto;
			aspect-ratio: 1/1;
			/* transform: translateY(-50%); */
		}
		#promotion .promotion .prizes .prize figure {
			background-size: 100%;
			background-repeat: no-repeat;
			aspect-ratio:1/1;
		}
		#promotion .promotion .prizes .prize figcaption {
			position: relative;
			font-size: 2rem;
			line-height:1.2;
			text-align: center;
		}
		#promotion .promotion .prizes .prize figcaption .badge {
			position: relative;
			width: 150px;
			height: 150px;
			margin-bottom: -150px;
			border-radius: 150px;
			top: -150px;
			background-color: var(--yellow);
			color: var(--blue);
			background-color: var(--blue);
			color: var(--yellow);
			color: white;
			z-index: 1;
			left: 50px;
		}
		#promotion .promotion .prizes .prize figcaption .badge h3 {
			position: relative;
			top: 50%;
			transform: translateY(-50%) rotate(-10deg);
			font-weight: 800;
			font-size: 2.2rem;
			line-height: 1;
			text-transform: uppercase;
		}
		#promotion .promotion .prizes .prize figcaption .below-badge {
			position: relative;
			top: 100%;
			text-align: center;
			width: 60%;
			left: 50%;
			transform: translateX(-50%);
		}
		#promotion .promotion .prizes .prize figcaption p  {}

		#promotion .promotion .prizes .main-prize {
			left: -2%;
			width: 60%;
			top: 20%;
		}
		#promotion .promotion .prizes .main-prize figure {background-size: 80%;}
		#promotion .promotion .prizes .main-prize figcaption .badge {}
		#promotion .promotion .prizes .main-prize figcaption .badge h3 { font-size: 5rem; line-height: 1; }
		#promotion .promotion .prizes .main-prize figcaption p { font-size: 2.5rem; }
		#promotion .promotion .prizes .main-prize figcaption p span { display: block; }
		#promotion .promotion .prizes .main-prize figcaption p span:nth-child(2) { font-weight: bold; }

		#promotion .promotion .prizes .weekly-prize {left: 47%;width: 60%;top: 20%;}
		#promotion .promotion .prizes .weekly-prize figure {background-size: 100%;}
		#promotion .promotion .prizes .weekly-prize figcaption {}
		#promotion .promotion .prizes .weekly-prize figcaption h3 {}
		#promotion .promotion .prizes .weekly-prize figcaption h3 span:nth-child(1) { font-size: 2.5em; display: block;}
		#promotion .promotion .prizes .weekly-prize figcaption p { font-size: 2.5rem; }
		#promotion .promotion .prizes .weekly-prize figcaption p span { display: block; }
		#promotion .promotion .prizes .weekly-prize figcaption p span:nth-child(2) { font-weight: bold; }

		#promotion .promotion .prizes .main-prize   figure { background-image:url(../../images/page/iphone-16.webp); }
		#promotion .promotion .prizes .weekly-prize figure { background-image:url(../../images/page/xiaomi-redmi.webp); }

		#promotion .period { text-align: center; }
		#promotion .period p {
			font-size: 2rem;
		}
		#promotion .footnote { text-align: left; }
		#promotion .footnote p {
			font-size: 1.5rem;
		}
		#promotion .footnote p a {
			font-weight: bold;
			color:var(--red);
		}

		/* XXXXL */ @media screen and (min-width:1600px)                        { }
		/*  XXXL */ @media screen and (min-width:1440px) and (max-width:1599px) {
			#promotion .promotion { padding-top: 46%; }
			#promotion .promotion .products {aspect-ratio: 1/1.08;}
			#promotion .promotion .products figcaption .copy { bottom: 2px; }
		}
		/*   XXL++ */ @media screen and (min-width:1240px) and (max-width:1439px) {
			#promotion .promotion {padding-top: 44% ;}
		}
		/*   XXL+ */ @media screen and (min-width:1140px) and (max-width:1239px) {
			#promotion .promotion {padding-top: 44% ;}
			#promotion .promotion .products {aspect-ratio: 1/1.2;}
			#promotion .promotion .products figcaption .wave { transform: translate(0, -160px); }
			#promotion .promotion .products figcaption .copy {bottom: 30px;}
		}
		
		/*    XXL */ @media screen and (min-width:1240px) and (max-width:1439px) {
			#promotion .promotion {padding-top: 44% ;}
		}
		/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439px) {
			#promotion .promotion {padding-top: 51%;}
			#promotion .promotion .products { aspect-ratio:1/1.2; }
			#promotion .promotion .products figure { aspect-ratio:1/1; }
			#promotion .promotion .products figcaption .wave {transform: translate(0, -190px);}
			#promotion .promotion .products figcaption .copy {bottom: 30px;}
		}
		/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399px) {
			#promotion .promotion {padding-top: 51%;}
			#promotion .promotion .products { aspect-ratio:1/1.2; }
			#promotion .promotion .products figure { aspect-ratio:1/1; }
			#promotion .promotion .products figcaption .wave {transform: translate(0, -190px);}
			#promotion .promotion .products figcaption .copy { bottom:30px; }
		}
		/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339px) {
			#promotion .promotion {padding-top: 51%;}
			#promotion .promotion .products { aspect-ratio:1/1.2; }
			#promotion .promotion .products figure { aspect-ratio:1/1; }
			#promotion .promotion .products figcaption .wave {transform: translate(0, -190px);}
			#promotion .promotion .products figcaption .copy {bottom: 30px;}
		}
		/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299px) {
			#promotion .promotion {padding-top: 51%;}
			#promotion .promotion .products { aspect-ratio:1/1.2; }
			#promotion .promotion .products figure { aspect-ratio:1/1; }
			#promotion .promotion .products figcaption .wave {transform: translate(0, -190px);}
			#promotion .promotion .products figcaption .copy { bottom:30px; }
		}
		
		/*    XL */ @media screen and (min-width:1040px) and (max-width:1239px) {
			#promotion .promotion {padding-top: 55%;}
			#promotion .promotion h2 { padding-inline: 12%; }
			#promotion .promotion .products {aspect-ratio: 1/1.175;}
			#promotion .promotion .products figcaption .wave { transform:translate(0, -20px); }
			#promotion .promotion .products figcaption .copy {bottom: 30px;}
			#promotion .promotion .products figcaption {aspect-ratio: 1/0.6;bottom: -10px;}
			#promotion .promotion .products figcaption p.description { font-size: 1.8rem; }
			#promotion .promotion .prizes .main-prize figcaption p { font-size:   1.8rem; }
			#promotion .promotion .prizes .weekly-prize figcaption p { font-size: 1.8rem; }
			#promotion .promotion .prizes .prize figcaption .badge { top:-165px; }
		}
		/*    XL4 */ @media screen and (min-width:1200px) and (max-width:1239px) {
		
		}
		/*    XL3 */ @media screen and (min-width:1140px) and (max-width:1199px) {
		
		}
		/*    XL2 */ @media screen and (min-width:1100px) and (max-width:1139px) {
		
		}
		/*    XL1 */ @media screen and (min-width:1040px) and (max-width:1099px) {
		
		}
		
		/*     L */ @media screen and (min-width: 960px) and (max-width:1039px) {
			:root{ --badge_size:100px; }
			#promotion .promotion {padding-top: 60%;}
			#promotion h2 { padding-inline: 12%; }
			#promotion .promotion .products {aspect-ratio: 1/1.4;}
			#promotion .promotion .products figcaption .wave { transform:translate(0, -20px); }
			#promotion .promotion .products figcaption {aspect-ratio: 1/0.8;bottom: -10px;}
			#promotion .promotion .products figcaption p.description {font-size: 2.0rem;margin: 15px 0 0 calc(var(--badge_size) + 10px);}
			#promotion .promotion .prizes .main-prize figcaption p { font-size:   2.0rem; }
			#promotion .promotion .prizes .weekly-prize figcaption p { font-size: 2.0rem; }
			#promotion .promotion .prizes .prize figcaption .badge { top:-165px; }
			#promotion .promotion .products figcaption p.amount {}
		}
		/*     M */ @media screen and (min-width: 860px) and (max-width: 959px) {
			#promotion .promotion {height: auto;margin-bottom: -70px;padding-top: 0;}
			#promotion .promotion .products {position: relative;top: 0;left: 0;width: 100%;transform:none;aspect-ratio: 1/0.7;}
			#promotion .promotion .products figure {position: relative;aspect-ratio: 1/0.7;right:auto;top:auto;transform:none;}
			#promotion .promotion .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .prize figcaption p { font-size:2.2rem; }
			#promotion .promotion .products figcaption .wave {transform: translate(0,-10%);}
			#promotion .promotion .prizes {position: relative;top: -100px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
		}
		/*    MS */ @media screen and (min-width: 700px) and (max-width: 859px) {
			#promotion .promotion {height: auto;margin-bottom: -70px;padding-top: 0;}
			#promotion .promotion .products {position: relative; top: 0;left: 0;width: 100%;transform:none;aspect-ratio:1/1;}
			#promotion .promotion .products figure { position: relative; aspect-ratio:1/1; right:auto; top:auto; transform:none; }
			#promotion .promotion .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .prize figcaption p { font-size:2.2rem; }
			#promotion .promotion .products figcaption .wave {transform: translate(0,-20%);}
			#promotion .promotion .prizes {position: relative;top: -100px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
		}
		/*     S */ @media screen and (min-width: 580px) and (max-width: 699px) {
			#promotion .promotion {height: auto;margin-bottom: -70px;padding-top: 0;}
			#promotion .promotion .products {position: relative; top: 0;left: 0;width: 100%;transform:none;aspect-ratio:1/1;}
			#promotion .promotion .products figure { position: relative; aspect-ratio:1/1; right:auto; top:auto; transform:none; }
			#promotion .promotion .products figcaption .wave {transform: translate(0,-20%);}
			#promotion .promotion .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .prize figcaption p { font-size:2.2rem; }
			#promotion .promotion .prizes {position: relative;top: -100px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
		}
		/*    XS */ @media screen and (min-width: 520px) and (max-width: 579px) {
			#promotion .promotion {height: auto;margin-bottom: -70px;padding-top: 0;}
			#promotion .promotion .products {position: relative; top: 0;left: 0;width: 100%;transform:none;aspect-ratio:1/1;}
			#promotion .promotion .products figure { position: relative; aspect-ratio:1/1; right:auto; top:auto; transform:none; }
			#promotion .promotion .products figcaption .wave {transform: translate(0,-20%);}
			#promotion .promotion .products figcaption p.description { font-size: 2.2rem; }
			#promotion .promotion .prizes .prize figcaption {margin-top: 20px;}
			#promotion .promotion .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .prize figcaption p {font-size: 2.0rem;}
			#promotion .promotion .prizes {position: relative;top: -100px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
		}
		/*   XXS */ @media screen and (min-width: 440px) and (max-width: 519px) {
			:root{ --badge_size:100px; }
			#promotion .promotion {height: auto;margin-bottom: 40px;padding-top: 0;}
			#promotion .promotion .products {position: relative;top: 0;left: 0;width: 100%;transform:none;aspect-ratio: 1/1;}
			#promotion .promotion .products figure {position: relative;aspect-ratio: 1/0.8;right:auto;top:auto;transform:none;}
			#promotion .promotion .products figcaption .wave {transform: translate(0,-30%);}
			#promotion .promotion .products figcaption p.description { font-size: 2.2rem; }
			#promotion .promotion .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .prize figcaption p { font-size:2.2rem; }
			#promotion .promotion .prizes {position: relative;top: -50px;width: 100%;left: auto;transform: none;aspect-ratio: 1/1.15;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
		}
		/*  XXXS */ @media screen and (min-width: 330px) and (max-width: 439px) {
		}
		/*  XXXS2 */ @media screen and (min-width: 400px) and (max-width: 439px) {
			:root{ --badge_size:80px; }
			#promotion .promotion {height: auto;margin-bottom: 40px;padding-top: 0;}
			#promotion .promotion .products {position: relative;top: 0;left: 0;width: 100%;transform:none;aspect-ratio: 1/1.1;}
			#promotion .promotion .products figure {position: relative;aspect-ratio: 1/0.8;right:auto;top:auto;transform:none;}
			#promotion .promotion .products figcaption .wave {transform: translate(0,-30%);}
			#promotion .promotion .products figcaption p.description {font-size: 1.8rem;}
			#promotion .promotion .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .prize figcaption p {font-size: 1.8rem;}
			#promotion .promotion .prizes {position: relative;top: -50px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
			#promotion .period p { font-size: 1.8rem; }
		}
		/*  XXXS1 */ @media screen and (min-width: 330px) and (max-width: 399px) {
			:root{ --badge_size:80px; }
			#promotion .promotion {height: auto;margin-bottom: 40px;padding-top: 0;}
			#promotion .promotion .products {position: relative;top: 0;left: 0;width: 100%;transform:none;aspect-ratio: 1/1.1;}
			#promotion .promotion .products figure {position: relative;aspect-ratio: 1/0.8;right:auto;top:auto;transform:none;}
			#promotion .promotion .products figcaption .wave {transform: translate(0,-46%);}
			#promotion .promotion .products figcaption p.description {font-size: 1.8rem;}
			#promotion .promotion .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion .prizes .prize figcaption .badge h3 { font-size: 1.5rem; }
			#promotion .promotion .prizes .main-prize figcaption .badge { top: -110px; width: 100px; height: 100px; margin: 0 0 -100px 0; }
			#promotion .promotion .prizes .main-prize figcaption .badge h3 { font-size: 3rem; }
			#promotion .promotion .prizes .weekly-prize figcaption .badge { top: -110px; width: 100px; height: 100px; margin: 0 0 -100px 0; }
			#promotion .promotion .prizes .prize figcaption p {font-size: 1.6rem;}
			#promotion .promotion .prizes .weekly-prize figcaption h3 span:nth-child(1) { font-size: 2rem; }
			#promotion .promotion .prizes {position: relative;top: -50px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
			#promotion .period p { font-size: 1.8rem; }
		}
		
		/* XXXXS */ @media screen and (min-width:   0px) and (max-width: 329px) {
			:root{ --badge_size:100px; }
			#promotion .promotion { height: auto;margin-bottom: -70px;padding-top: 0;}
			#promotion .promotion .products {position: relative; top: 0;left: 0;width: 100%;transform:none;aspect-ratio:1/1;}
			#promotion .promotion .products figure { position: relative; aspect-ratio:1/1; right:auto; top:auto; transform:none; }
			#promotion .promotion .products figcaption .wave {transform: translate(0,-20%);}
			#promotion .promotion .products figcaption p.description { font-size: 2.2rem; }
			#promotion .promotion .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion .prizes .prize figcaption p { font-size:2.2rem; }
			#promotion .promotion .prizes {position: relative;top: -100px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
		}






	/*								*/
	/*	promotion					*/
	/*								*/

		#promotion2 {
		}
		#promotion .promotion2 h2 {
			text-transform: uppercase;
			text-align: center;
			margin-bottom: 15px;
			text-wrap: balance;
			padding-inline: 22%;
		}
		#promotion .promotion2  {
			position: relative;
			width: 100%;
			padding-top: 44%;
			background-color: var(--yellow);
			background-color: white;
			background-color: rgba(179,179,212,0.70);
			background-color: transparent;
		}
		#promotion .promotion2 .products {
			position: absolute;
			top: 25px;
			left: 20%;
			transform: translate(-50%,-0%);
			width: 40%;
			aspect-ratio: 1/1;
			overflow: hidden;
			outline: 1px solid green;
			outline: none;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
		}
		#promotion .promotion2 .products figure {
			position: absolute;
			width: 100%;
			aspect-ratio:1/1;
			right: 55%;
			top: 0%;
			transform: translateY(0%);
			background-image:url(../../images/page/products2.webp);
			background-size: contain;
			background-repeat: no-repeat;
			outline: 1px solid blue;
			/* max-width: 500px; */
			margin: 0;
			padding: 0;
			left: 0;
			outline: none;
		}
		#promotion .promotion2 .products figcaption {
			position: absolute;
			left: 0%;
			right: 0%;
			bottom: 10px;
			/* max-width: 500px; */
			margin: 0;
			padding: 0;
			aspect-ratio: 3.5/1;
			/* transform:translateY(-50%); */
			padding: 0;
			background-color: var(--red);
			box-shadow: 15px 15px 0 0 var(--yellow);
			background-color: transparent;
			box-shadow: none;
			text-align: left;
			z-index: 1;
			outline: 1px solid red;
			outline: none;
		}
		#promotion .promotion2 .products figcaption .wave {
			position: absolute;
			display: block;
			z-index: -1;
			content:"";
			width: 100%;
			aspect-ratio:1/1;
			background-image: url("../../images/page/wave2.svg");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top left;
			transform: translate(0, -70px);
			/* opacity: 0.9; */
		}
		#promotion .promotion2 .products figcaption .copy {
			position: absolute;
			bottom: 49px;
			padding: 15px 30px;
		}
		#promotion .promotion2 .products figcaption p.amount {
			position: relative;
			font-size: calc(var(--badge_size) / 1.5);
			line-height: calc(var(--badge_size) - 10px);
			width: var(--badge_size);
			height: var(--badge_size);
			margin: 0 0 calc(-1 * var(--badge_size)) 0;
			font-weight: 900;
			border-radius: var(--badge_size);
			background-color: #5ebac6;
			text-align: center;
			color: black;
			color: #ffffff;
		}
		#promotion .promotion2 .products figcaption p.description {
			font-size: 2.5rem;
			line-height: 1.2;
			color: #379fa5;
			margin: 15px 0 0 calc(var(--badge_size) + 20px);
		}
		#promotion .promotion2 .prizes {
			position: absolute;
			background-color: #9f9f7566;
			background-color: transparent;
			top: 260px;
			left: 40%;
			width: 60%;
			outline: 1px solid red;
			aspect-ratio: 1/1;
			transform: translate(0, -50%);
			outline: none;
		}
		#promotion .promotion2 .prizes .prize {
			padding: 5px;
			position: absolute;
			width: 50%;
			height: auto;
			aspect-ratio: 1/1;
			/* transform: translateY(-50%); */
		}
		#promotion .promotion2 .prizes .prize figure {
			background-size: 100%;
			background-repeat: no-repeat;
			aspect-ratio:1/1;
		}
		#promotion .promotion2 .prizes .prize figcaption {
			position: relative;
			font-size: 2rem;
			line-height:1.2;
			text-align: center;
		}
		#promotion .promotion2 .prizes .prize figcaption .badge {
			position: relative;
			width: 150px;
			height: 150px;
			margin-bottom: -150px;
			border-radius: 150px;
			top: -150px;
			background-color: var(--yellow);
			color: var(--blue);
			background-color: #5fbbc6;
			color: var(--yellow);
			color: white;
			z-index: 1;
			left: 50px;
			mix-blend-mode: hard-light;
		}
		#promotion .promotion2 .prizes .prize figcaption .badge h3 {
			position: relative;
			top: 50%;
			transform: translateY(-50%) rotate(-10deg);
			font-weight: 800;
			font-size: 2.2rem;
			line-height: 1;
			text-transform: uppercase;
		}
		#promotion .promotion2 .prizes .prize figcaption .below-badge {
			position: relative;
			top: 100%;
			text-align: center;
			width: 60%;
			left: 50%;
			transform: translateX(-50%);
		}
		#promotion .promotion2 .prizes .prize figcaption p  {}

		#promotion .promotion2 .prizes .main-prize {
			left: -2%;
			width: 60%;
			top: 20%;
		}
		#promotion .promotion2 .prizes .main-prize figure {background-size: 80%;}
		#promotion .promotion2 .prizes .main-prize figcaption .badge {}
		#promotion .promotion2 .prizes .main-prize figcaption .badge h3 { font-size: 5rem; line-height: 1; }
		#promotion .promotion2 .prizes .main-prize figcaption p { font-size: 2.5rem; }
		#promotion .promotion2 .prizes .main-prize figcaption p span { display: block; }
		#promotion .promotion2 .prizes .main-prize figcaption p span:nth-child(2) { font-weight: bold; }

		#promotion .promotion2 .prizes .weekly-prize {left: 47%;width: 60%;top: 20%;}
		#promotion .promotion2 .prizes .weekly-prize figure {background-size: 100%;}
		#promotion .promotion2 .prizes .weekly-prize figcaption {}
		#promotion .promotion2 .prizes .weekly-prize figcaption h3 {}
		#promotion .promotion2 .prizes .weekly-prize figcaption h3 span:nth-child(1) { font-size: 2.5em; display: block;}
		#promotion .promotion2 .prizes .weekly-prize figcaption p { font-size: 2.5rem; }
		#promotion .promotion2 .prizes .weekly-prize figcaption p span { display: block; }
		#Xpromotion .promotion2 .prizes .weekly-prize figcaption p span:nth-child(2) { font-weight: bold; }

		#promotion .promotion2 .prizes .main-prize   figure { background-image:url(../../images/page/roller.webp); }
		#promotion .promotion2 .prizes .weekly-prize figure { background-image:url(../../images/page/pullover-sapka.webp); }

		#promotion .period { text-align: center; }
		#promotion .period p {
			font-size: 2rem;
		}
		#promotion .footnote { text-align: left; }
		#promotion .footnote p {
			font-size: 1.5rem;
		}
		#promotion .footnote p a {
			font-weight: bold;
			color:var(--red);
		}

		/* XXXXL */ @media screen and (min-width:1600px)                        { }
		/*  XXXL */ @media screen and (min-width:1440px) and (max-width:1599px) {
			#promotion .promotion2 { padding-top: 46%; }
			#promotion .promotion2 .products {aspect-ratio: 1/1.08;}
			#promotion .promotion2 .products figcaption .copy { bottom: 2px; }
		}
		/*   XXL++ */ @media screen and (min-width:1240px) and (max-width:1439px) {
			#promotion .promotion2  {padding-top: 44% ;}
		}
		/*   XXL+ */ @media screen and (min-width:1140px) and (max-width:1239px) {
			#promotion .promotion2 { padding-top: 44% ; }
			#promotion .promotion2 .products {aspect-ratio: 1/1.2;}
			#promotion .promotion2 .products figcaption .wave { transform: translate(0, -160px); }
			#promotion .promotion2 .products figcaption .copy {bottom: 30px;}
		}
		
		/*    XXL */ @media screen and (min-width:1240px) and (max-width:1439px) {
			#promotion .promotion2  {padding-top: 51%;}
		}
		/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439px) {
			#promotion .promotion2 { padding-top: 51%; }
			#promotion .promotion2 .products { aspect-ratio:1/1.2; }
			#promotion .promotion2 .products figure { aspect-ratio:1/1; }
			#promotion .promotion2 .products figcaption .wave {transform: translate(0, -120px);}
			#promotion .promotion2 .products figcaption .copy {bottom: 30px;}
		}
		/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399px) {
			#promotion .promotion2 { padding-top: 51%; }
			#promotion .promotion2 .products { aspect-ratio:1/1.2; }
			#promotion .promotion2 .products figure { aspect-ratio:1/1; }
			#promotion .promotion2 .products figcaption .wave {transform: translate(0, -98px);}
			#promotion .promotion2 .products figcaption .copy { bottom:30px; }
		}
		/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339px) {
			#promotion .promotion2 { padding-top: 51%; }
			#promotion .promotion2 .products { aspect-ratio:1/1.2; }
			#promotion .promotion2 .products figure { aspect-ratio:1/1; }
			#promotion .promotion2 .products figcaption .wave {transform: translate(0, -120px);}
			#promotion .promotion2 .products figcaption .copy {bottom: 30px;}
		}
		/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299px) {
			#promotion .promotion2 { padding-top: 51%; }
			#promotion .promotion2 .products { aspect-ratio:1/1.2; }
			#promotion .promotion2 .products figure { aspect-ratio:1/1; }
			#promotion .promotion2 .products figcaption .wave {transform: translate(0, -100px);}
			#promotion .promotion2 .products figcaption .copy { bottom:30px; }
		}
		
		/*    XL */ @media screen and (min-width:1040px) and (max-width:1239px) {
			#promotion .promotion2 { padding-top: 51%; }
			#promotion h2 { padding-inline: 12%; }
			#promotion .promotion2 .products {aspect-ratio: 1/1.175;}
			#promotion .promotion2 .products figcaption .wave {transform: translate(0, 24px);}
			#promotion .promotion2 .products figcaption .copy {bottom: 30px;}
			#promotion .promotion2 .products figcaption {aspect-ratio: 1/0.6;bottom: -10px;}
			#promotion .promotion2 .products figcaption p.description { font-size: 1.8rem; }
			#promotion .promotion2 .prizes .main-prize figcaption p { font-size:   1.8rem; }
			#promotion .promotion2 .prizes .weekly-prize figcaption p { font-size: 1.8rem; }
			#promotion .promotion2 .prizes .prize figcaption .badge { top:-165px; }
		}
		/*    XL4 */ @media screen and (min-width:1200px) and (max-width:1239px) {
			#promotion .promotion2 .products figcaption .copy {bottom: 60px;}
		}
		/*    XL3 */ @media screen and (min-width:1140px) and (max-width:1199px) {
			#promotion .promotion2 .products figcaption .copy {bottom: 60px;}
		}
		/*    XL2 */ @media screen and (min-width:1100px) and (max-width:1139px) {
			#promotion .promotion2 .products figcaption .copy { bottom:40px; }
		}
		/*    XL1 */ @media screen and (min-width:1040px) and (max-width:1099px) {
			#promotion .promotion2 .products figcaption .copy {bottom: 34px;}
		}
		
		/*     L */ @media screen and (min-width: 960px) and (max-width:1039px) {
			:root{ --badge_size:100px; }
			#promotion .promotion2 { padding-top: 60%; }
			#promotion h2 { padding-inline: 12%; }
			#promotion .promotion2 .products {aspect-ratio: 1/1.4;}
			#promotion .promotion2 .products figcaption .wave {transform: translate(0, 30px);}
			#promotion .promotion2 .products figcaption {aspect-ratio: 1/0.8;bottom: -10px;}
			#promotion .promotion2 .products figcaption p.description {font-size: 2.0rem;margin: 15px 0 0 calc(var(--badge_size) + 10px);}
			#promotion .promotion2 .prizes .main-prize figcaption p { font-size:   2.0rem; }
			#promotion .promotion2 .prizes .weekly-prize figcaption p { font-size: 2.0rem; }
			#promotion .promotion2 .prizes .prize figcaption .badge { top:-165px; }
			#promotion .promotion2 .products figcaption p.amount {}
		}
		/*     M */ @media screen and (min-width: 860px) and (max-width: 959px) {
			#promotion {height: auto;margin-bottom: -70px;padding-top: 0;}
			#promotion .promotion2 {padding-top: 10px;}
			#promotion .promotion2 .products {position: relative;top: 0;left: 0;width: 100%;transform:none;aspect-ratio: 1/1;}
			#promotion .promotion2 .products figure {position: relative;aspect-ratio: 1/1;right:auto;top:auto;transform:none;margin-top: 25px;}
			#promotion .promotion2 .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion2 .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .prize figcaption p { font-size:2.2rem; }
			#promotion .promotion2 .products figcaption .wave {transform: translate(0,-3%);}
			#promotion .promotion2 .prizes {position: relative;top: -100px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
		}
		/*    MS */ @media screen and (min-width: 700px) and (max-width: 859px) {
			#promotion {height: auto;margin-bottom: -70px;padding-top: 0;}
			#promotion .promotion2 {padding-top: 30px;}
			#promotion .promotion2 .products {position: relative; top: 0;left: 0;width: 100%;transform:none;aspect-ratio:1/1;}
			#promotion .promotion2 .products figure { position: relative; aspect-ratio:1/1; right:auto; top:auto; transform:none; }
			#promotion .promotion2 .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion2 .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .prize figcaption p { font-size:2.2rem; }
			#promotion .promotion2 .products figcaption .wave {transform: translate(0,-5%);}
			#promotion .promotion2 .prizes {position: relative;top: -100px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
		}
		/*     S */ @media screen and (min-width: 580px) and (max-width: 699px) {
			#promotion {height: auto;margin-bottom: -70px;padding-top: 0;}
			#promotion .promotion2 {padding-top: 15px;}
			#promotion .promotion2 .products {position: relative; top: 0;left: 0;width: 100%;transform:none;aspect-ratio:1/1;}
			#promotion .promotion2 .products figure { position: relative; aspect-ratio:1/1; right:auto; top:auto; transform:none; }
			#promotion .promotion2 .products figcaption .wave {transform: translate(0,-8%);}
			#promotion .promotion2 .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion2 .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .prize figcaption p { font-size:2.2rem; }
			#promotion .promotion2 .prizes {position: relative;top: -100px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
		}
		/*     S2 */ @media screen and (min-width: 640px) and (max-width: 699px) {
			#promotion .promotion2 {padding-top: 15px;}
			#promotion .promotion2 .products figcaption .copy {bottom: 50px;}
		}
		/*     S1 */ @media screen and (min-width: 580px) and (max-width: 639px) {
			#promotion .promotion2 {padding-top: 15px;}
			#promotion .promotion2 .products figcaption .copy {bottom: 17px;}
		}
		
		/*    XS */ @media screen and (min-width: 520px) and (max-width: 579px) {
			#promotion {height: auto;margin-bottom: -70px;padding-top: 0;}
			#promotion .promotion2 { padding-top: 0; }
			#promotion .promotion2 .products {position: relative; top: 0;left: 0;width: 100%;transform:none;aspect-ratio:1/1;}
			#promotion .promotion2 .products figure { position: relative; aspect-ratio:1/1; right:auto; top:auto; transform:none; }
			#promotion .promotion2 .products figcaption .wave {transform: translate(0,-10%);}
			#promotion .promotion2 .products figcaption p.description { font-size: 2.2rem; }
			#promotion .promotion2 .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion2 .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .prize figcaption p { font-size:2.2rem; }
			#promotion .promotion2 .prizes {position: relative;top: -100px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
		}
		/*   XXS */ @media screen and (min-width: 440px) and (max-width: 519px) {
			:root{ --badge_size:100px; }
			#promotion {height: auto;margin-bottom: 40px;padding-top: 0;}
			#promotion .promotion2 {padding-top: 20px;}
			#promotion .promotion2 .products {position: relative;top: 0;left: 0;width: 100%;transform:none;aspect-ratio: 1/1;}
			#promotion .promotion2 .products figure {position: relative;aspect-ratio: 1/1;right:auto;top:auto;transform:none;}
			#promotion .promotion2 .products figcaption .wave {transform: translate(0,-14%);}
			#promotion .promotion2 .products figcaption p.description { font-size: 2.2rem; }
			#promotion .promotion2 .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion2 .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .prize figcaption p { font-size:2.2rem; }
			#promotion .promotion2 .prizes {position: relative;top: -50px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
		}
		/*  XXXS */ @media screen and (min-width: 330px) and (max-width: 439px) {
		}
		/*  XXXS2 */ @media screen and (min-width: 400px) and (max-width: 439px) {
			:root{ --badge_size:80px; }
			#promotion {height: auto;margin-bottom: 40px;padding-top: 0;}
			#promotion .promotion2 {padding-top: 20px;}
			#promotion .promotion2 .products {position: relative;top: 0;left: 0;width: 100%;transform:none;aspect-ratio: 1/1.1;}
			#promotion .promotion2 .products figure {position: relative;aspect-ratio: 1/0.8;right:auto;top:auto;transform:none;}
			#promotion .promotion2 .products figcaption .wave {transform: translate(0,-18%);}
			#promotion .promotion2 .products figcaption p.description {font-size: 1.8rem;}
			#promotion .promotion2 .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion2 .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .prize figcaption p {font-size: 1.8rem;}
			#promotion .promotion2 .prizes {position: relative;top: -50px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
			#promotion .period p { font-size: 1.8rem; }
		}
		/*  XXXS1 */ @media screen and (min-width: 330px) and (max-width: 399px) {
			:root{ --badge_size:80px; }
			#promotion {height: auto;margin-bottom: 40px;padding-top: 0;}
			#promotion .promotion2 {padding-top: 20px;}
			#promotion .promotion2 .products {position: relative;top: 0;left: 0;width: 100%;transform:none;aspect-ratio: 1/1.1;}
			#promotion .promotion2 .products figure {position: relative;aspect-ratio: 1/0.8;right:auto;top:auto;transform:none;}
			#promotion .promotion2 .products figcaption .wave {transform: translate(0,-21%);}
			#promotion .promotion2 .products figcaption p.description {font-size: 1.8rem;}
			#promotion .promotion2 .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion2 .prizes .prize figcaption .badge h3 { font-size: 1.5rem; }
			#promotion .promotion2 .prizes .main-prize figcaption .badge {top: -110px;width: 100px;height: 100px;margin: 0 0 -100px 0;mix-blend-mode: hard-light;}
			#promotion .promotion2 .prizes .main-prize figcaption .badge h3 { font-size: 3rem; }
			#promotion .promotion2 .prizes .weekly-prize figcaption .badge {top: -110px;width: 100px;height: 100px;margin: 0 0 -100px 0;}
			#promotion .promotion2 .prizes .prize figcaption p {font-size: 1.6rem;}
			#promotion .promotion2 .prizes .weekly-prize figcaption h3 span:nth-child(1) { font-size: 2rem; }
			#promotion .promotion2 .prizes {position: relative;top: -50px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
			#promotion .period p { font-size: 1.8rem; }
		}
		
		/* XXXXS */ @media screen and (min-width:   0px) and (max-width: 329px) {
			:root{ --badge_size:100px; }
			#promotion {height: auto;margin-bottom: -70px;padding-top: 0;}
			#promotion .promotion2 { padding-top: 0; }
			#promotion .promotion2 .products {position: relative; top: 0;left: 0;width: 100%;transform:none;aspect-ratio:1/1;}
			#promotion .promotion2 .products figure { position: relative; aspect-ratio:1/1; right:auto; top:auto; transform:none; }
			#promotion .promotion2 .products figcaption .wave {transform: translate(0,-20%);}
			#promotion .promotion2 .products figcaption p.description { font-size: 2.2rem; }
			#promotion .promotion2 .prizes .prize figcaption { margin-top: 20px; }
			#promotion .promotion2 .prizes .main-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .weekly-prize figcaption .badge { top:-170px; }
			#promotion .promotion2 .prizes .prize figcaption p { font-size:2.2rem; }
			#promotion .promotion2 .prizes {position: relative;top: -100px;width: 100%;left: auto;transform: none;}
			#promotion .footnote { text-align: center; }
			#promotion h2 { padding-inline:0; }
		}


			
			
			

	/*								*/
	/*	VIDEOS						*/
	/*								*/

		#testimonials .video {}
		#testimonials .video video { display: none; }
		#testimonials .video video[data-current="1"] { display: block; }

	/*								*/
	/*	SIZES						*/
	/*								*/
	
		main {
			width: 100%;
			overflow-x: hidden;
			overflow-y: visible;
		}

		@media screen and (min-width:1600px)                        { }
		@media screen and (min-width:1440px) and (max-width:1599px) {
			#then-and-now .timeline .scroller ul li p.legend {width: 80%;}
		}
		@media screen and (min-width:1240px) and (max-width:1439px) {
			#then-and-now .timeline .scroller ul li p.legend {width: 80%;}
		}
		@media screen and (min-width:1040px) and (max-width:1239px) { }
		@media screen and (min-width: 960px) and (max-width:1039px) { }
		@media screen and (min-width: 860px) and (max-width: 959px) { 
			#metrogeneration .hero { position: relative; width: calc(100% + 0px); }		
			#metrogeneration figure.persons ul.images li img:first-child { left:-70%; }
		}
		@media screen and (min-width: 700px) and (max-width: 859px) {
			#metrogeneration .hero { position: relative; width: calc(100% + 0px); }		
			#metrogeneration figure.persons ul.images li img:first-child { left:-70%; }
		}
		@media screen and (min-width: 580px) and (max-width: 699px) {
			#metrogeneration .hero { position: relative; width: calc(100% - 50px); }		
			#metrogeneration figure.persons ul.images li img:first-child { left:-90%; }
			#metrogeneration figcaption { font-size: 10vw; line-height: 11vw; }
		}
		@media screen and (min-width: 310px) and (max-width: 579px) {
			#metrogeneration .hero { position: relative; width: calc(100% - 0px); }		
			#metrogeneration figure.persons ul.images { left:5%; }
			#metrogeneration figure.persons ul.images li {transform: translateX(-30px);}
			#metrogeneration figure.persons ul.images li img {object-position: 6em 0;}
			#metrogeneration figure.persons ul.images li img:first-child {left: -90%;}
			#metrogeneration figure.persons ul.images li img:last-child  { left:-70%; }
			.copy h2 {font-size: 3rem;line-height: 1.05;}
			.copy ul { font-size:1.75rem; }
			#characters ul li figcaption.name-and-title { height: auto; }
			#characters ul li figcaption.name-and-title span { top: auto; transform: none; }
			#characters ul li figcaption.name-and-title h3 { font-size: 2.5rem; line-height: 1.3; }
			#characters ul li figcaption.name-and-title h4 { font-size: 1.7rem; line-height: 1.1; }
			#metrogeneration figcaption { font-size: 10vw; line-height: 11vw; }
		}
		@media screen and (max-width: 309px) {
			#metrogeneration .hero { position: relative; width: calc(100% - 0px); }		
			#metrogeneration figure.persons ul.images { left:0%; }
			#metrogeneration figure.persons ul.images li {transform: translateX(-0px);}
			#metrogeneration figure.persons ul.images li img {object-position: 5em 0;}
			#metrogeneration figure.persons ul.images li img:first-child {left: -100%;}
			#metrogeneration figure.persons ul.images li img:last-child  { left:-70%; }
			.copy h2 { font-size: 4rem; }
		}

		
		
	/*									*/
	/*	BUTTONS 						*/
	/*									*/
	
		html[data-page="startpage"] .button-wrapper {}
		html[data-page="startpage"] .button-wrapper .button {
			display: block;
			padding-block:25px;
			font-size: 2.5rem;
			line-height: 1.3;
		}



	/*									*/
	/*		WINNERS 					*/
	/*									*/
	
	#winners {
		margin-top: 35px;
	}
	#winners h2 {
	}
	
	#winners .weekly-winners {
		margin-bottom: 15px;
	}
	#winners .weekly-winners h3,
	#winners .main-prize-winner h3 {
		display: block;
		margin-top: 15px;
		margin-bottom: 15px;
		text-align: left;
		font-size: 2rem;
		line-height: 1.2;
	}
	#winners .promotion-name {
		display: block;
		margin-top: 30px;
		margin-bottom: 15px;
		text-align: left;
		font-size: 2rem;
		line-height: 1.2;
		text-transform: uppercase;
		color: var(--blue);
		padding-bottom: 10px;
		border-bottom: 1px solid var(--blue);
	}
	#winners .weekly-winners .list,
	#winners .main-prize-winner .list {
		display: block;
		margin: 0;
		column-count: 1;
		break-inside: avoid;
		text-align: left;
		text-wrap:balance;
	}
	#winners .weekly-winners .list .winner,
	#winners .main-prize-winner .list .winner {
		display: block;
		margin: 0 5px 0 0;
		font-size: 1.8rem;
		line-height: 1.2;
	}
	@media screen and (min-width:1600px)                        { #winners .weekly-winners .list { column-count: 6; } }
	@media screen and (min-width:1440px) and (max-width:1599px) { #winners .weekly-winners .list { column-count: 6; } }
	@media screen and (min-width:1240px) and (max-width:1439px) { #winners .weekly-winners .list { column-count: 5; } }
	@media screen and (min-width:1040px) and (max-width:1239px) { #winners .weekly-winners .list { column-count: 4; } }
	@media screen and (min-width: 960px) and (max-width:1039px) { #winners .weekly-winners .list { column-count: 4; } }
	@media screen and (min-width: 860px) and (max-width: 959px) { #winners .weekly-winners .list { column-count: 3; } }
	@media screen and (min-width: 700px) and (max-width: 859px) { #winners .weekly-winners .list { column-count: 3; } }
	@media screen and (min-width: 580px) and (max-width: 699px) { #winners .weekly-winners .list { column-count: 3; } }
	@media screen and (min-width: 310px) and (max-width: 579px) { #winners .weekly-winners .list { column-count: 2; } }
	@media screen and (max-width: 309px)                        { #winners .weekly-winners .list { column-count: 1; } }





		/*						*/
		/*	DEV 				*/
		/*						*/
		
		#Xcharacters { display: none; }
		#Xthen-and-now { display: none; }
		#Xtestimonials { display: none; }
		
		
		/*							*/
		/*	DEBUG					*/
		/*							*/

			/* responsives */

			XXbody[data-location="site"]:before,
			body[data-location="development"]:before {
				content:" ";
				display: block;
				position: fixed;
				right: 0;
				bottom: 0;
				width: auto;
				background-color: #FFFFFFAA;
				box-shadow: 0 0 15px 0 #00000055;
				z-index: 9999999;
				font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
				font-size: 12px;
				line-height: 14px;
				color: black;
				padding: 10px 15px 10px 15px;
				border-left: 20px solid black;
			}
			
			/* XXXXL   */ @media screen and (min-width:1600px)                        { body[data-location="development"]:before { content:" XXXXL 1600px- ";     border-left-color:#F8FF20; } }
			
			/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599px) { body[data-location="development"]:before { content:" XXXL  1440-1599px "; border-left-color:#00FF1B; } }
			
			/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439px) { body[data-location="development"]:before { content:" XXL   1240-1439px "; border-left-color:#0085AA; } }
			/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439px) { body[data-location="development"]:before { content:" XXL   1240-1439px (XXL4 1400-1439px) "; border-left-color:#2CD0FF; } }
			/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399px) { body[data-location="development"]:before { content:" XXL   1240-1439px (XXL3 1340-1399px) "; border-left-color:#A34FFF; } }
			/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339px) { body[data-location="development"]:before { content:" XXL   1240-1439px (XXL2 1300-1339px) "; border-left-color:#FF1594; } }
			/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299px) { body[data-location="development"]:before { content:" XXL   1240-1439px (XXL1 1240-1299px) "; border-left-color:#00E47C; } }
			
			/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239px) { body[data-location="development"]:before { content:" XL    1040-1139px "; border-left-color:#02CEB5; } }
			/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239px) { body[data-location="development"]:before { content:" XL    1040-1239px (XL4 1200-1239px) "; border-left-color:#19FDE1; } }
			/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199px) { body[data-location="development"]:before { content:" XL    1040-1239px (XL3 1140-1199px) "; border-left-color:#0BB8FF; } }
			/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139px) { body[data-location="development"]:before { content:" XL    1040-1239px (XL2 1100-1139px) "; border-left-color:#006CFF; } }
			/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099px) { body[data-location="development"]:before { content:" XL    1040-1239px (XL1 1040-1099px) "; border-left-color:#3500FF; } }
			
			/*     L   */ @media screen and (min-width: 960px) and (max-width:1039px) { body[data-location="development"]:before { content:" L      960-1039px "; border-left-color:#0ED773; } }
			/*     M   */ @media screen and (min-width: 860px) and (max-width: 959px) { body[data-location="development"]:before { content:" M      860- 959px ";  border-left-color:#44D70E; } }
			/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859px) { body[data-location="development"]:before { content:" MS     700- 859px ";  border-left-color:#A0D70E; } }
			/*     S   */ @media screen and (min-width: 580px) and (max-width: 699px) { body[data-location="development"]:before { content:" S      580- 699px ";  border-left-color:#D7CC0E; } }
			/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579px) { body[data-location="development"]:before { content:" XS     520- 579px ";  border-left-color:#D7A60E; } }
			/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519px) { body[data-location="development"]:before { content:" XXS    440- 519px ";  border-left-color:#BDD70E; } }
			/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439px) { body[data-location="development"]:before { content:" XXXS   330- 439px ";  border-left-color:#B1570B; } }
			/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439px) { body[data-location="development"]:before { content:" XXXS   330- 439px (XXXS2 400-439px)";  border-left-color:#E77616; } }
			/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399px) { body[data-location="development"]:before { content:" XXXS   330- 439px (XXXS1 330-399px)";  border-left-color:#F2C512; } }
			
			/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329px) { body[data-location="development"]:before { content:" XXXXS    0- 329px ";  border-left-color:#B10B6D; } }



			/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959px) { body[data-location="development"]:before { content:" M     860-959 (M2    900- 959px) ";  border-left-color:#0EC2D7; } }
			/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899px) { body[data-location="development"]:before { content:" M     860-959 (M1    860- 899px) ";  border-left-color:#0ED7A5; } }
			
			/*     S2  */ @media screen and (min-width: 640px) and (max-width: 699px) { body[data-location="development"]:before { content:" S     640-699 (S2    640- 699px) ";  border-left-color:#C6BD17; } }
			/*     S1  */ @media screen and (min-width: 580px) and (max-width: 639px) { body[data-location="development"]:before { content:" S     580-639 (S1    580- 639px) ";  border-left-color:#BEB517; } }
			

			body[data-location="development"] .cols {
				outline: 1px dashed #12CE8D;
			}