:root {
	--mmmmmmmmmm-FONT-BASE-mmmmmmmmmm: 0;
	--font-fibibase: 1.618;
	--font-fibi-size: calc(1.618 * 4rem / 7);
	--font-fibi-h1: calc(var(--font-fibi-size) * calc(1.35 + 0.35 * 6));
	--font-fibi-h2: calc(var(--font-fibi-size) * calc(1.35 + 0.35 * 5));
	--font-fibi-h3: calc(var(--font-fibi-size) * calc(1.35 + 0.35 * 4));
	--font-fibi-h35: calc(var(--font-fibi-size) * calc(1.35 + 0.35 * 3.5));
	--font-fibi-h4: calc(var(--font-fibi-size) * calc(1.35 + 0.35 * 3));
	--font-fibi-h5: calc(var(--font-fibi-size) * calc(1.35 + 0.35 * 2));
	--font-fibi-h6: calc(var(--font-fibi-size) * calc(1.35 + 0.35 * 1));
	--font-fibi-p: calc(var(--font-fibi-size) * 1.35);

	--font-p-line-height: 1.4;
	--font-p-marg-tb: 0.7rem;

	--mmmmmmmmmm-SCROLL-BAR-mmmmmmmmmm: 0;
	--scrollbar-width: 16px;

	--o_________-SCROLL-Light-_________o: 0;
	--bg-scroll-back: rgba(11, 20, 66, 0.01);
	--bg-scroll-bar: rgba(96, 108, 133, 0.5);
	--bg-scroll-barhover: rgba(96, 108, 133, 1);
}


html {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow-x: hidden;
}
*, *:after, *:before {box-sizing: inherit;}

html {font-size: calc(calc(0.875rem + calc(1.25 - 0.875) * calc(calc(100vw - 28.125rem) / calc(120 - 28.125))) * 1.00028);}

/* width */
/* ::-webkit-scrollbar {width: var(--scrollbar-width);} */
/* Track */
::-webkit-scrollbar-track {background: var(--bg-scroll-back);}
/* Handle */
::-webkit-scrollbar-thumb {background: var(--bg-scroll-bar); background-color: var(--bg-scroll)}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: var(--bg-scroll-barhover);}

body {
	scrollbar-color: var(--bg-scroll-bar) var(--bg-scroll-back);
	margin: 0;
	padding: 0;

	font-family: '03_Tenso_Regular';
	text-rendering: optimizeLegibility;
	line-height: var(--font-p-line-height);

	min-height: 100%;
	position: relative;
	top: 0px;
}

body, html {direction: rtl;}
body * {direction: ltr;}


p,h1,h2,h3,h4,h5,h6 {
	margin: var(--font-p-marg-tb) 0;
	padding: 0;
}

img {
	width: 100%;
	border-style:none;
	vertical-align: middle;
}
a img {border:none}
a:hover {transition: background-image ease .2s}
a.link {font-weight: bold}

a {
	outline: 0;
	color: inherit;
	text-decoration: underline;
	text-decoration: none;
	background-color: transparent;
	/* transition: color ease .2s; */
}
a:active, a:hover, a:focus {
	text-decoration: underline;
	text-decoration: none;
	outline-width: 0;
	outline: 0;
}
a[href^="http"]:empty::before {content: attr(href);}
a[href^="mailto"]:empty::before {content: attr(href);}

.scroll-hidekeep {
	height: 100%;
	overflow-x:hidden;
	overflow-y: scroll; /*Add the ability to scroll */
	scrollbar-width: none; /* Hide scrollbar for Firefox */
	-ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.scroll-hidekeep::-webkit-scrollbar {display: none;}


.row::after, .row::before {
	content: "";
	clear: both;
	display: table;
}
.col-t {float: left; padding: 0;}
.col-t.total {width: 100%}
.col-t.c25 {width: 25%}
.col-t.c1x17 {width: calc(100% / 17)}
.col-t.c1x17-1x2 {width: calc(100% / 17 / 2)}
.col-t.c1x17-1x13 {width: calc(100% / 17 + calc(100% / 17 / 13))}


@media (orientation:portrait) {
	.col-t.p4 {width: 4%}
	.col-t.p5 {width: 5%}
	.col-t.p10 {width: 10%}
	.col-t.p12 {width: 12%}
	.col-t.p15 {width: 15%}
	.col-t.p20 {width: 20%}
	.col-t.p25 {width: 25%}
	.col-t.p28 {width: 28%}
	.col-t.p30 {width: 30%}
	.col-t.p32 {width: 32%}
	.col-t.p35 {width: 35%}
	.col-t.p40 {width: 40%}
	.col-t.p44 {width: 44%}
	.col-t.p45 {width: 45%}
	.col-t.p48 {width: 48%}
	.col-t.p50 {width: 50%}
	.col-t.p55 {width: 55%}
	.col-t.p60 {width: 60%}
	.col-t.p65 {width: 65%}
	.col-t.p70 {width: 70%}
	.col-t.p75 {width: 75%}
	.col-t.p80 {width: 80%}
	.col-t.p85 {width: 85%}
	.col-t.p90 {width: 90%}
	.col-t.p95 {width: 95%}
	.col-t.p96 {width: 96%}
	.col-t.p97 {width: 97%}
	.col-t.p98 {width: 98%}
	.col-t.p99 {width: 99%}

	.col-t.pt {width: 100%}
}
@media (orientation:landscape) {
	.col-t.l4 {width: 4%}
	.col-t.l5 {width: 5%}
	.col-t.l10 {width: 10%}
	.col-t.l12 {width: 12%}
	.col-t.l15 {width: 15%}
	.col-t.l20 {width: 20%}
	.col-t.l25 {width: 25%}
	.col-t.l30 {width: 30%}
	.col-t.l32 {width: 32%}
	.col-t.l35 {width: 35%}
	.col-t.l40 {width: 40%}
	.col-t.l44 {width: 44%}
	.col-t.l45 {width: 45%}
	.col-t.l48 {width: 48%}
	.col-t.l50 {width: 50%}
	.col-t.l55 {width: 55%}
	.col-t.l60 {width: 60%}
	.col-t.l65 {width: 65%}
	.col-t.l70 {width: 70%}
	.col-t.l75 {width: 75%}
	.col-t.l80 {width: 80%}
	.col-t.l85 {width: 85%}
	.col-t.l90 {width: 90%}
	.col-t.l95 {width: 95%}
	.col-t.l96 {width: 96%}
	.col-t.l97 {width: 97%}
	.col-t.l98 {width: 98%}
	.col-t.l99 {width: 99%}

	.col-t.lt {width: 100%}
}

@media (orientation:landscape) {.hide-l {display: none !important}}
@media (orientation:portrait) {.hide-p {display: none !important}}


.h100pc {height: 100%}

.col-vertical-center {display:table;}
.cell-vertical-center {display: table-cell; vertical-align: middle; text-align: center;}


:root {
	--mmmmmmmmmm-BOXSHADOW-mmmmmmmmmm: 0;
	--boxsh-bottom: 0 8px 6px -6px rgba(0,0,0,0.5);
	--boxsh-textslide-t: 0 -1px 2px 0 rgba(0,0,0,0.16),0 -1px 4px 0 rgba(0,0,0,0.12);
	--boxsh-textslide-b: -1px 1px 2px 0 rgba(0,0,0,0.4),1px 1px 2px 0 rgba(0,0,0,0.4);
	--boxsh-outsmall: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);

	--boxsh-outmedium: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
	--boxsh-outlarge: 0 20px 30px rgba(0,0,0,0.5);
	--boxsh-hover: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);

}
.boxshadow-bottom {-webkit-box-shadow: var(--boxsh-bottom); box-shadow: var(--boxsh-bottom);}
.boxshadow-outsmall {-webkit-box-shadow: var(--boxsh-outsmall); box-shadow: var(--boxsh-outsmall);}
.boxshadow-textslide-t {-webkit-box-shadow: var(--boxsh-textslide-t); box-shadow: var(--boxsh-textslide-t);}
.boxshadow-textslide-b {-webkit-box-shadow: var(--boxsh-textslide-b); box-shadow: var(--boxsh-textslide-b);}


:root {
	--mmmmmmmmmm-BOXFILTER-mmmmmmmmmm: 0;
	--boxfilter-blue: brightness(0.7) contrast(1) sepia(1) hue-rotate(150deg) saturate(2);
	--boxfilter-blue2: brightness(0.75) contrast(1) sepia(1) hue-rotate(190deg) saturate(1.8);
	--boxfilter-blue3: brightness(0.7) contrast(1) sepia(1) hue-rotate(170deg) saturate(1.5);

	--boxfilter-purple: brightness(0.7) contrast(1) sepia(1) hue-rotate(-170deg) saturate(1.5);
	--boxfilter-purple2: brightness(0.95) contrast(1) sepia(1) hue-rotate(200deg) saturate(5);
	--boxfilter-purple3: brightness(0.7) contrast(1) sepia(1) hue-rotate(240deg) saturate(1.5);

	--boxfilter-yellow: brightness(0.75) contrast(1) sepia(0.7) hue-rotate(-5deg) saturate(3.5);
	--boxfilter-yellow2: brightness(0.75) contrast(1) sepia(0.7) hue-rotate(0deg) saturate(2);
	--boxfilter-yellow3: brightness(0.7) contrast(1) sepia(1) hue-rotate(0deg) saturate(1.5);

	--boxfilter-green: brightness(0.7) contrast(1) sepia(1) hue-rotate(115deg) saturate(1.5);
	--boxfilter-green2: brightness(0.7) contrast(1) sepia(1) hue-rotate(100deg) saturate(1.5);

	--filtergray75: grayscale(75%);
	--filtergray-team: grayscale(60%) contrast(105%);
	--filtergray50: grayscale(50%) contrast(105%);
}
/* mmmmmmmmmmm-color-mousechange-filter-mmmmmmmmmmm */
.boxfilter {transition: filter 2s;}

.boxfilter.filterblue {-webkit-filter: var(--boxfilter-blue); filter: var(--boxfilter-blue);}
.boxfilter.filterblue2 {-webkit-filter: var(--boxfilter-blue2); filter: var(--boxfilter-blue2);}
.boxfilter.filterpurple {-webkit-filter: var(--boxfilter-purple); filter: var(--boxfilter-purple);}
.boxfilter.filterpurple2 {-webkit-filter: var(--boxfilter-purple2); filter: var(--boxfilter-purple2);}
.boxfilter.filteryellow {-webkit-filter: var(--boxfilter-yellow); filter: var(--boxfilter-yellow);}
.boxfilter.filteryellow2 {-webkit-filter: var(--boxfilter-yellow); filter: var(--boxfilter-yellow);}
.boxfilter.filtergreen {-webkit-filter: var(--boxfilter-green); filter: var(--boxfilter-green);}

.boxfilter.filterblue:hover, .boxfilter.filterblue2:hover, .boxfilter.filterblue3:hover,
.boxfilter.filterpurple:hover, .boxfilter.filterpurple2:hover, .boxfilter.filterpurple3:hover,
.boxfilter.filteryellow:hover, .boxfilter.filteryellow2:hover, .boxfilter.filteryellow3:hover,
.boxfilter.filtergreen:hover, .boxfilter.filtergreen2:hover {
	-webkit-filter:none; filter: none;}

/* mmmmmmmmmmm-mmmmmmmmmmm */
.boxfiltergray75 {-webkit-filter: var(--filtergray75); filter: var(--filtergray75);}
.boxfiltergray60 {-webkit-filter: var(--filtergray-team); filter: var(--filtergray-team);}
.boxfiltergray50 {-webkit-filter: var(--filtergray50); filter: var(--filtergray50);}


:root{
	--mmmmmmmmmm-BOXTRANSITION-mmmmmmmmmm: 0;
	--boxtransi-all: all 0.4s;
	--boxtransi-fullheight-06: height 0.66s ease-out;
	--boxtransi-fullheight-02: height 0.2s ease-out;
	--boxtransi-marg-right: margin-right 0.4s;
}
.boxtransition-all {
	-webkit-transition: var(--boxtransi-all);
	-moz-transition: var(--boxtransi-all);
	-ms-transition: var(--boxtransi-all);
	-o-transition: var(--boxtransi-all);
	transition: var(--boxtransi-all);
}
.boxtransition-marg-right {
	-webkit-transition: var(--boxtransi-marg-right);
	-moz-transition: var(--boxtransi-marg-right);
	-ms-transition: var(--boxtransi-marg-right);
	-o-transition: var(--boxtransi-marg-right);
	transition: var(--boxtransi-marg-right);
}
.boxtransition-height {
	-webkit-transition: var(--boxtransi-fullheight-02);
	-moz-transition: var(--boxtransi-fullheight-02);
	-ms-transition: var(--boxtransi-fullheight-02);
	-o-transition: var(--boxtransi-fullheight-02);
	transition: var(--boxtransi-fullheight-02);
}


:root {
	--mmmmmmmmmm-SIZE-1PX-mmmmmmmmmm: 0;
	--px1px: calc(16px / 16);
	--px1px-neg: calc(-16px / 16);
	--px1em: calc(1em / 20); /*---!!!-divided by maxfontsize from html-!!!---*/

	--px1vh: calc(1vh * 0.1017);
	--px1vhwm: calc(calc(1vw + 1vh + 0.5vmin) / 33.95);
	--px1vw: calc(1vw * 0.0525);

	--mmmmmmmmmm-SAME-16PX-mmmmmmmmmm: 0;
	--same-px: calc(var(--px1px) * 16);
	--same-px-neg: calc(var(--same-px) * -1);
	--same-px-half: calc(var(--same-px) / 2);
	--same-px-x2: calc(var(--same-px) * 2);

	--mmmmmmmmmm-SAME-16EM-mmmmmmmmmm: 0;
	--same-em: calc(var(--px1em) * 16);
	--same-em-min: calc(var(--same-em) * 0.125);
	--same-em-half: calc(var(--same-em) / 2);
	--same-em-x2: calc(var(--same-em) * 2);

	--mmmmmmmmmm-SAME-PXEM-mmmmmmmmmm: 0;
	--same-pxem-x2: calc(var(--same-px) + var(--same-em));
	--same-pxem-x3: calc(var(--same-px) + var(--same-em) * 2);
	--same-pxem-x4: calc(var(--same-px) + var(--same-em) * 3);
	--same-pxem-x5: calc(var(--same-px) + var(--same-em) * 4);
	--same-pxem-x6: calc(var(--same-px) + var(--same-em) * 5);

	--mmmmmmmmmm-BODY-IMG-mmmmmmmmmm: 0;
	--img-body-plant: url("img-w/plant_b03_ok.png");
	--img-body-plant-p: url("img-w/plant_p.png");

	--mmmmmmmmmm-COLORS-SUMO-origin-mmmmmmmmmm: 0;
	--color-sumo-rgb: 20, 38, 124;
	--color-sumo-origin: rgb(20, 38, 124);
	--color-sumo-opacity03: rgba(20, 38, 124, 0.3); /* <<<-textslidenexthover-<<< */
	--color-sumo-opacity04: rgba(20, 38, 124, 0.4); /* <<<-sumomap-footer-<<< */
	--color-sumo-opacity05: rgba(20, 38, 124, 0.5); /* <<<-timeline-ruler-<<< */
	--color-sumo-opacity06: rgba(20, 38, 124, 0.6); /* <<<-whe-who-textlidebottom-<<< */

}


.img-url {
	position: relative;
	min-height: 100%;
	height: 100%;
}
.img-url.url-size-contain {
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}
.img-url.url-size-auto {
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
	background-size: auto;
}
.img-url.url-size-cover {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.img-url.url-piece1 {
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.img-url.url-piece1-left {
	background-position: 0% 50%;
	background-repeat: no-repeat;
}
.img-url.url-piece2 {
	background-position: calc(100% / 3) 50%, calc(100% / 3 * 2) 50%;
	background-repeat: no-repeat, no-repeat;
}
.img-url.url-piece3 {
	background-position: calc(100% / 4) 50%, calc(100% / 4 * 2) 50%, calc(100% / 4 * 3) 50%, calc(100% / 4 * 4) 50%;
	background-repeat: no-repeat, no-repeat, no-repeat;
}
.img-url.url-piece4 {
	background-position: 0 50%, calc(100% / 3) 50%, calc(100% / 3 * 2) 50%, 100% 50%;
	/* background-position: calc(100% / 5) 50%, calc(100% / 5 * 2) 50%, calc(100% / 5 * 3) 50%, calc(100% / 5 * 4) 50%, calc(100% / 5 * 5) 50%; */
	background-repeat: no-repeat, no-repeat,no-repeat, no-repeat;
}

/* class="img-url url-size-contain?cover?auto url-piece1?2?3?4 img-shadow-XXX img-YYY" */
.img-url.img-docs-l {background-image: url("img/docs_landscape.png");}
.img-url.img-docs-p {background-image: url("img/docs_portrait.png");}



:root {
	--mmmmmmmmmm-COLORS-XXX-mmmmmmmmmm: 0;
	--color-bg-body-html: rgb(250, 250, 250);
	--color-bg-tablink-all: rgba(206, 208, 223, 0.5);
	--color-bg-tablink-select: rgba(255, 255, 255, 1);
	--color-bg-tablink-sumo: rgba(11, 20, 66, 0.9);

	--color-tabcont-same: rgb(14, 27, 88);
	--color-tabcont-sumo: var(--color-bg-body-html);

	--color-postname-training: rgb(141, 82, 146);
	--color-post-quote: rgb(98, 107, 157);
	/* --color-youtube: #ff0000; */
	--color-youtube: rgb(199, 56, 61);

	--mmmmmmmmmm-111-SIDE-mmmmmmmmmm: 0;
	/* --side-right-width: 65%; */
	/* --side-right-width: 70%; */

	--mmmmmmmmmm-222-AERA-mmmmmmmmmm: 0;
	--area-left-max-width-LAND: 70%;
	--area-left-max-width: calc(var(--px1em) * 768);

	--area-padd-lr: calc(var(--px1em) * 16);

	--mmmmmmmmmm-222-LEFTAREA-IN-mmmmmmmmmm: 0;
	/* --left-inarea-more: calc(var(--px1vhwm) * 120); */
	/* --left-inarea-more: 3%;
	--left-inarea-padd-top: calc(var(--tabbody-padd-bottom) + var(--TABLINK-HEIGHT) / 3 * 2 + var(--left-inarea-more));
	--left-inarea-padd-bottom: calc(var(--tabbody-padd-bottom) + var(--TABLINK-HEIGHT) / 3 * 1 + var(--left-inarea-more)); */
	/* --left-inarea-more: calc(var(--px1vh) * 120); */

	--left-inarea-more: calc(var(--px1vh) * 75);
	--left-inarea-padd-top: calc(var(--tabbody-padd-bottom) + var(--left-inarea-more));
	--left-inarea-padd-bottom: calc(var(--tabbody-padd-bottom) + var(--left-inarea-more) * 1.7);

	--left-inarea-more-LAND: calc(var(--px1vh) * 45);
	--left-inarea-padd-top-LAND: calc(var(--tabbody-padd-bottom) + var(--left-inarea-more-LAND));
	--left-inarea-padd-bottom-LAND: calc(var(--tabbody-padd-bottom) + var(--left-inarea-more-LAND) * 1.5);


	--mmmmmmmmmm-TABLINKS-mmmmmmmmmm: 0;
	--link-transition: background-color 0.5s, color 0.5s;

	--font-tab-border: 1px solid var(--color-bg-body-html);
	--font-tab-size: 0.75em;
	--font-tab-for-height: 0.75rem;
	--font-tab-line-h: 1.2;

	--font-tab-padd-lr: 4px;
	--font-tab-padd-top: 4px;
	--font-tab-padd-bottom: 6px;

	--TABLINK-HEIGHT: calc(var(--font-tab-for-height) * var(--font-tab-line-h) + var(--font-tab-padd-top) + var(--font-tab-padd-bottom));

	/* Calculated from menu number * 2 */
	--tablink-width: calc(100% / 14); /* <<<-7pieces-<<< : Replace 8 * 2 = 16*/

	--mmmmmmmmmm-333-TABBODY-mmmmmmmmmm: 0;
	--tabbody-max-width: calc(var(--px1em) * 860);

	--tabbody-bdradius: 8px;
	--tabbody-padd-bottom: var(--same-pxem-x2);
	--tabbody-padd-top: calc(var(--TABLINK-HEIGHT) + var(--tabbody-padd-bottom));

	/* --tabbody-padd-lr-same: calc(var(--scrollbar-width) + var(--px1em) * 4); */
	--tabbody-padd-lr-same: var(--same-em);
	/* --tabbody-padd-lr-nextscroll: calc(var(--tabbody-padd-lr-same) - var(--scrollbar-width)); */

}


body, html {
	height: 100%;
	background-color: var(--color-bg-body-html);}

.bodyimg {
	height: 100%;
	position: relative;

	background-position: 50% 50%;
	background-repeat: no-repeat;

	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
	background-size: auto;
}
.bodyimg.bodyimg-plant {
	background-image: var(--img-body-plant);
	background-image: linear-gradient(rgba(250, 250, 250, 0.5), rgba(255, 255, 255, 0.5)), var(--img-body-plant);
}

@media (orientation:portrait) {
	.bodyimg.bodyimg-plant {
		background-image: var(--img-body-plant-p);
		background-image: linear-gradient(rgba(250, 250, 250, 0.6), rgba(255, 255, 255, 0.6)), var(--img-body-plant-p);
	}
}


.side-right {
	height: 100%;
	width: 0;
	top: 0;
	right: 0;
	position: fixed;
	z-index: 1;
	overflow-x: hidden;

	background-color: transparent;

	-webkit-transition: var(--boxtransi-all);
	-moz-transition: var(--boxtransi-all);
	-ms-transition: var(--boxtransi-all);
	-o-transition: var(--boxtransi-all);
	transition: var(--boxtransi-all);
}
.side-left {
	height: 100%;
	-webkit-transition: var(--boxtransi-marg-right);
	-moz-transition: var(--boxtransi-marg-right);
	-ms-transition: var(--boxtransi-marg-right);
	-o-transition: var(--boxtransi-marg-right);
	transition: var(--boxtransi-marg-right);
}

.area-left {
	max-width: var(--area-left-max-width);
	margin-left: auto;
	margin-right: auto;
	background-color: transparent;
}
.area-left, .area-right {
	height: 100%;
	padding: var(--area-padd-lr);
}

.row-intro-height {
	height: calc(100% - var(--TABLINK-HEIGHT));
	/* background-color: tomato; */
}
.col-intro-padd-tb {
	padding-top: var(--left-inarea-padd-top);
	padding-bottom: var(--left-inarea-padd-bottom);
	/* background-color:darkgoldenrod; */
}


.tab-left, .tab-left a {
	background-color: var(--color-bg-tablink-all);
}
.tab-right, .tab-right a, .tab-right a .tablink a {
	background-color: var(--color-bg-tablink-all);
}
.tab-left a,
.tab-right a, .tab-right a .tablink a {
	border: none;
	outline: none;
	cursor: pointer;
	overflow: hidden;

	color: var(--color-tabcont-same);
	text-decoration: none;
	text-align: center;
	font-size: var(--font-tab-size);
	line-height: var(--font-tab-line-h);
	padding: var(--font-tab-padd-top) var(--font-tab-padd-lr) var(--font-tab-padd-bottom);

	height: var(--TABLINK-HEIGHT);
	transition: var(--link-transition);
}

.tab-left a {float: right; border-left: var(--font-tab-border)}
.tab-right a {float: left; border-right: var(--font-tab-border)}
.tab-left a:last-child {border-left: none}
.tab-right a:last-child {border-right: none}

.tablink.width-same {width: calc(var(--tablink-width) * 2);}
.tablink.width-small1piece {width: var(--tablink-width)}
.tablink.width-large2piece {width: calc(var(--tablink-width) * 2.5)}

.tab-left a:hover {background-color: #787d9a; color: var(--color-tabcont-sumo);}
.tab-right a:hover {background-color: #787d9a; color: var(--color-tabcont-sumo);}

.tab-right a.active {background-color: var(--color-bg-tablink-select); color: var(--color-tabcont-same);}
.tab-right a.idsumotablink.active {background-color: var(--color-bg-tablink-sumo); color: var(--color-tabcont-sumo);}

img.sumo-nav {
	height: 115%;
	width: auto;
	text-align: center;
	padding-bottom: var(--font-tab-padd-bottom);
	/* float: left; */
}

a.idsumotablink.active img:nth-child(1), a.idsumotablink:hover img:nth-child(1) {display: none;}
a.idsumotablink.active img:nth-child(2), a.idsumotablink:hover img:nth-child(2) {display: inline-block;}
a.idsumotablink img:nth-child(2) {display: none;}

/*☰="\2630"=&#9776; ×=&times;=&#215;="\D7";*/
.tab-left a::before {content: "\2630" "\00a0";}
.tab-right a.width-small1piece::after {content: "\2716";}

@media (max-width: 1110px) {
	#no-small {display: none;}
}



/* ---forCONTENT-NOscroll___due-to-tablinks:is-IN-tabcontentbody--- */
.tabbody {
	height: 100%;
	display: block;
	border-radius: 0 0 var(--tabbody-bdradius) var(--tabbody-bdradius);
	box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
}

/* ________________TBCHOOSE-H__________forCONTENT-ABSOLUTE-FULL______________ */
.tabbody.tb-height-tb0 {
	padding-top: var(--TABLINK-HEIGHT);
	padding-bottom: 0;
}
/* ________________TBCHOOSE-H__________forCONTENT___*/
.tabbody.tb-height-tbpadd {
	padding-top: var(--tabbody-padd-top);
	padding-bottom: var(--tabbody-padd-bottom);
}

/*---tabbodyCOLORS---*/
.tabbody.tb-bgcolor-same {background-color: var(--color-bg-tablink-select); color: var(--color-tabcont-same);}
.tabbody.tb-bgcolor-sumo {background-color: var(--color-bg-tablink-sumo); color: var(--color-tabcont-sumo)}
.tb-bgcolor-transp
{
	background-image: linear-gradient(rgb(255,255,255,1), rgb(255,255,255,0.5), rgb(255,255,255,0.3), rgba(255,255,255,0));
	color: var(--color-tabcont-same);
}

/* mmmmmmmmmmmmmmmm row1 mmmmmmmmmmmmmmmmmmmm
-----for-SCROLL-in-TABBODY___due-to-place-in-tabbody-right, not in cotent---*/
.tabbody-inout {
	max-width: 100%;
	height:100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.tabbody-inout-one {
	max-width: 100%;
	height:auto;
}


/* mmmmmmmmmmmmmmmm row2 mmmmmmmmmmmmmmmmmmmm
___________________TBCHOOSE-H__________forCONTENT-FULL-ABSOLUTE______________ */
.tb-in-width-100-lr0 {
	width: 100%;
	height:100%;
	padding-left: 0;
	padding-right: 0;
}

/* mmmmmmmmmmmmmmmm row product mmmmmmmmmmmmmmmmmmmm
___________________TBCHOOSE-H__________forCONTENT-FULL-ABSOLUTE______________ */
.tb-in-width-100-lrproduct {
	width: 100%;
	height:auto;
	padding-left: 0;
	padding-right: 0;
}

/* ________________TBCHOOSE-H__________forCONTENT-FULL-samepadd______________ */
.tb-in-width-100-lrsame {
	width: 100%;
	height:100%;
	padding-left: var(--tabbody-padd-lr-same);
	padding-right: var(--tabbody-padd-lr-same);
}
/* ________________TBCHOOSE-H__________forCONTENT-FULL-NOsamepadd____________ */
/* .tb-in-width-100-lrsmall {
	width: 100%;
	height:100%;
	padding-left: var(--tabbody-padd-lr-same);
	padding-right: var(--tabbody-padd-lr-nextscroll);
} */
	/* ____________CONTENTmax-IN-CONTENTwidth100%____________________________ */
	.tb-content-mix {
		max-width: var(--tabbody-max-width);
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
	}

/* ________________TBCHOOSE-H__________forCONTENT-samepadd___________________ */
.tb-in-width-max-lrsame {
	max-width: var(--tabbody-max-width);
	/* height:100%; */
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--tabbody-padd-lr-same);
	padding-right: var(--tabbody-padd-lr-same);
}


:root {
	--mmmmmmmmmm-HEADER-mmmmmmmmmm: 0;
	--header-paddtop: calc(var(--same-px) + var(--px1vhwm) * 16);
	--header-paddbottom: 0px;
	/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
	--header-forHEIGHT-padds: calc(var(--header-paddtop) + var(--header-paddbottom));
	/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
	--header-margbottom-large: var(--same-pxem-x2); /*!!!!!!!!!!!!<--ezt ki kell iktatni!!!!!*/
	--header-margbottom-small: var(--same-em-min); /*!!!!!!!!!!!!<--ezt ki kell iktatni!!!!!*/
	--header-and-post-padd-lr: var(--same-px);

	--o_________-HEAD-OSWALD-_________o: 0;
	--font-header-family: 'Oswald', sans-serif;
	--font-header-weight: 500;
	--font-header-line-height: 1.25;
	--font-header-space: normal;
	--font-header-space-long: -0.02em;

	--font-header-margin: var(--font-p-marg-tb);
	--font-header-size: var(--font-fibi-h1);

	--mmmmmmmmmm-TITLE-DENSO-mmmmmmmmmm: 0;
	--font-title-family: 'DensoSansHigh-Light', sans-serif;
	--font-title-family-timeline: 'DensoSansHigh-Light', sans-serif;
	--font-title-space: 0.02em;
	--font-title-line-height: 1.28;

	--HEADER-forFIXHEIGHT-marg-no: calc(var(--font-header-size) * var(--font-header-line-height) + var(--font-header-margin) * 2 + var(--header-forHEIGHT-padds));
	--HEADER-forFIXHEIGHT-marg-large: calc(var(--font-header-size) * var(--font-header-line-height) + var(--font-header-margin) * 2 + var(--header-forHEIGHT-padds) + var(--header-margbottom-large));
}
/* !!!-EZEK-SZAMITANAK-az-ABSULETE-FULL-nal-!!!-ezert-NE-ITT-MODOSITSD */
.row-container-post, .row-container-header {
	padding-left: var(--header-and-post-padd-lr);
	padding-right: var(--header-and-post-padd-lr);
}

.row-container-post.container-post-paddtb-64 {padding-top: calc(var(--same-px) + var(--px1vhwm) * 64); padding-bottom: var(--same-px);}
.row-container-post.container-post-paddtb-16 {padding-top: calc(var(--same-px) + var(--px1vhwm) * 16); padding-bottom: var(--same-px);}
.row.spaceh-x2 {height: var(--same-pxem-x2);} /* <<<-!!!!!!!-MASHOGYAN KENE-!!!!!!!!!-CONTAINER-EMPTY-rows__FOR-SPACE-(like-hr-) */

.row-container-header.container-header-margb-large {margin-bottom: var(--header-margbottom-large)}
.row-container-header.container-header-margb-small {margin-bottom: var(--header-margbottom-small)}

.row-container-header.header {
	border-radius: var(--tabbody-bdradius);
	padding-top: var(--header-paddtop);
	padding-bottom: var(--header-paddbottom);
}

.row-container-header-img {
	height: var(--HEADER-forFIXHEIGHT-marg-no);
	border-radius: var(--tabbody-bdradius);
}
.row-container-header-img .header-img {
	position: absolute; bottom: 0%; left: 4em;
}

.header h1, .header-img h1 , .header h2 {
	font-family: var(--font-header-family);
	font-weight: var(--font-header-weight);
	line-height: var(--font-header-line-height);
}
.header h1, .header-img h1 {font-size: var(--font-header-size);}
.header h2 {font-size: var(--font-fibi-h3);}

.header h1, .header-img h1, .header h2 {letter-spacing: var(--font-header-space);}
.header.headspace-long h1, .header.headspace-long h2 {letter-spacing: var(--font-header-space-long);}


.postcontent.pc-margtopsame {margin-top: var(--same-px)}
.postcontent.pc-margtop0 {margin-top: 0;}

/* __________.post => is-it-JUST-in-DIV-class__________ */
.post .postname-same {
	font-family: var(--font-title-family);
	font-size: var(--font-fibi-h35);
	letter-spacing: var(--font-title-space);
	padding-bottom: 0;
	margin: 0 0 var(--same-px-half) 0;
	color: var(--color-postname-training);
}
.post .postname-timeline {
	font-family: var(--font-title-family-timeline);
	font-size: var(--font-fibi-h5);
	letter-spacing: var(--font-title-space);
	margin: 0 0 var(--same-px-half) 0;
}
.post .when-who {
	color: var(--color-sumo-opacity06);
	margin: 0 0 var(--font-p-marg-tb);
	font-size: var(--font-tab-size);
}
.post .author-link {
	padding-left: 10px;
	color: var(--color-sumo-opacity06);
}
.post .fa-calendar::before {content: "\f073";}
.post .fa-calendar::after {content: "\00a0";}
.post .author-link::before {content: "\27A0";}

.post a.author-link img.avatar {
	height: calc(var(--font-tab-size) * 2);
	width: auto;
	padding-bottom: 0.5em;
	/* -webkit-filter: grayscale(60%) contrast(105%);
	filter: grayscale(60%) contrast(105%); */
}

.post q {color: var(--color-post-quote); font-style: normal;}
.post q::before {content: "\0022";}
.post q::after {content: "\0022";}

/* .postcontent p:last-child {margin-bottom: 0;} */

b.bold, b.bold-big, b.bold-in {font-family: var(--font-header-family); letter-spacing: 0.1em;}
b.bold-big {font-size: 1.5em;}
b.bold, b.bold-in {font-size: inherit;}


/* ___iii-a-links-text_______________________________________________________________________ */

.hidden { display: none; }

.postcontent a:not(.link-btn), .videotext-content a:not(.link-btn), .readmore span {
	/* display: inline-block; // <<<-just for animated underline-<<<// */
	cursor:pointer;
	text-decoration: underline;
	font-size: inherit;
	line-height: inherit;
	padding: 0 2px;
	border-radius: 4px 4px 0px 0px;
	color: var(--color-postname-training);
	background-color: transparent;
	transition: var(--link-transition);
}
.postcontent a:hover, .videotext-content a:hover, .readmore span:hover {
	color: var(--color-tabcont-same);
	/* background-color: rgba(139, 0, 139, 0.05); */
	color:darkmagenta;
}

.postcontent a.link-btn {
	color: var(--color-tabcont-sumo);

	background-color: var(--color-postname-training);

	padding: calc(var(--px1em) * 2) calc(var(--px1em) * 4);
	border-radius: calc(var(--px1em) * 4);
	transition: var(--link-transition);
}
.postcontent a.link-btn:hover {
	background-color: var(--color-tabcont-same);
}
.postcontent a.link-btn.youtube:hover {
	background-color: var(--color-youtube);
}
/* ___iii-a-links-READ-MORE_______________________________________________________________ */


.readmore-link a:link {
	display: inline-block;
	/* width: 100%; */
	text-decoration: none;

	font-size: var(--font-tab-size);
	line-height: var(--font-tab-line-h);
	padding: var(--font-tab-padd-top) var(--font-tab-padd-lr) var(--font-tab-padd-bottom);
	transition: var(--link-transition);
}
.readmore-link a:link, .readmore-link a:visited {
	color: rgba(250, 250, 250, 1);
	background-color: rgba(20, 38, 124, 0.7);
}
.readmore-link a:hover, .readmore-link a:active {
	color: rgba(20, 38, 124, 1);
	background-color: rgba(250, 250, 250, 1);
}
/*_______________________________________________________________________________________________________
<div class="readmore-link">
	<a href="javascript:void(0)" onclick="moreFunction()" id="moreBtn">...&nbsp;&nbsp;&nbsp;read more</a>
</div>
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾*/

/* ❚ */
@counter-style ulverticalheavy {system: cyclic; symbols: "\275A" "\275A"; suffix: " ";}
/* ➧ */
@counter-style ulsquat {system: cyclic; symbols: "\27A7" "\27A7"; suffix: " ";}
/* ❯ */
@counter-style ulrightthin {system: cyclic; symbols: "\276F" "\276F"; suffix: " ";}
/* ❱ */
@counter-style ulrightheavy {system: cyclic; symbols: "\2771" "\2771"; suffix: " ";}
/* ➠ */
@counter-style uldashedheavy {system: cyclic; symbols: "\27A0" "\27A0"; suffix: " ";}
/* ➥ */
@counter-style ulcurved {system: cyclic; symbols: "\27A5" "\27A5"; suffix: " ";}


/* ___iii-icon-contents_______________________________________________________ */
span.iconsumocopyr.start:before {content: "Sumo"}
span.iconsumocopyr.end:before, span.iconsumocopyr.inside:before {content: "\00a0" "Sumo"}
.iconsumocopyr.end sup:after {content: "\00A9";}
.iconsumocopyr.start sup:after, .iconsumocopyr.inside sup:after {content: "\00A9" "\00a0";}

/* ___iii-icon-FA-contents_____________________________________________________ */
span.iconfa {font-family: FontAwesome; display: inline-block; font-size: inherit;}

span.iconfa.when::before {content: "\f2e0";}
span.iconfa.what::before {content: "\f27a"; padding-left: var(--px1em)}
span.iconfa.when::after, span.iconfa.what::after {content: "\00a0" "\00a0";}

span.iconfa.download::before {content: "\f019";}
span.iconfa.youtube::before {content: "\f167";}
span.iconfa.flyer::before {content: "\f278";}
span.iconfa.pdf::before {content: "\f1c1";}


/* ____UL-LI_____________________________________________________________________ */
ul, ol {
	list-style-position: outside;
	display: inline-block;
	overflow: hidden;
}
ul {
	padding: 0 0 0 calc(var(--list-paddul-left));
	margin: 0;
	width: 100%;
}
ul.nobullets, ol.nobullets {
	list-style-type: none;
	font-size: inherit;
	/* padding-left: var(--list-paddli); */
}

:root {
	--list-paddli-left: calc(var(--px1em) * 8);
	--list-paddli-tb: calc(var(--px1em) * 4);
	--list-paddul-left: calc(var(--same-em-x2) - var(--list-paddli-left));

	--listmarker: var(--color-postname-training);
}
/* UL-border-left: 4px solid rgba(20, 38, 124, 0.5);
   UL-background-color: transparent; */
ul.ulcross {list-style-type: ulcross;}
ul.ulcross ::marker {color: inherit;}

ul.ularrow {list-style-type: uldashedheavy;}
ul.ularrow ::marker {color: var(--listmarker)}


.ularrow li {padding: var(--list-paddli-tb) var(--list-paddli-left);}
.ularrow li:first-child {padding-top: 0;}
.ularrow li:last-child {padding-bottom: 0;}

ul.ularrow ul {list-style-type: ulverticalheavy; padding: inherit; color: inherit;}
ul.ularrow ul ul {list-style-type: square; padding: inherit; color: inherit;}

.ularrow li li {padding: inherit; font-size: inherit;}
.ularrow li li li {padding: inherit; font-size: inherit;}


:root {
	--mmmmmmmmmm-VIDEO-mmmmmmmmmm: 0;
	--o_________-VIDEO-LIST-_________o: 0;
	--font-listvideo: 0.85em;
	--listvideo-paddul-left: 1em;
	--listvideo-paddli-tb: calc(var(--px1em) * 4);
}

/* border-left: 4px solid rgba(20, 38, 124, 0.5);
	background-color: transparent;*/
ul.listvideo, ul.listvideo-nobullets {
	font-size: var(--font-listvideo);
	list-style-type: square;
	padding: 0 0 0 var(--listvideo-paddul-left);
	margin: 0;
	width: 100%;
	color: var(--color-tabcont-same);
}

ul.listvideo ul {list-style-type: circle; padding: inherit; color: inherit;}
ul.listvideo ul ul {list-style-type: disc; padding: inherit; color: inherit;}

.listvideo li {padding: var(--listvideo-paddli-tb) 0; font-size: inherit;}
.listvideo li li {padding: inherit; font-size: inherit;}
.listvideo li li li {padding: inherit; font-size: inherit;}
.listvideo li:last-child {padding-bottom: 0;}

.listvideo ol {
	list-style-type: decimal;
	padding-left: var(--listvideo-paddul-left);
}
ul.listvideo-nobullets {
	list-style-type: none;
	font-size: var(--font-listvideo);
}


:root {
	--mmmmmmmmmm-VIDEO-mmmmmmmmmm: 0;
	--video-padd: 1px;
	--video-padd-neg: calc(var(--video-padd) * -1);
	--video-HEIGHT916:calc(9 / 16 * 100%);
	--color-bg-videotext: rgba(206, 208, 223, 0.2);
	--color-bg-videotext: var(--color-bg-tablink-all);
	--color-bg-videotext: transparent;
	--color-bg-videotext: ghostwhite;
	--color-bg-videotext:rgba(250, 250, 250, 0.3);

}
.row-container-video-videotext {padding: 0; margin: 0 var(--video-padd-neg)}
.col-container-video-videotext {padding: 0 var(--video-padd); margin-bottom: var(--video-padd)}

.videoiframe-out, .videotext-content {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.videoiframe-out {padding-top: var(--video-HEIGHT916);}

/* .col-t.l45 .videotext-content {padding-top: calc(var(--video-HEIGHT916) * 55 / 45 + var(--TABLINK-HEIGHT));}
.col-t.l50 .videotext-content {padding-top: calc(var(--video-HEIGHT916) * 50 / 50 + var(--TABLINK-HEIGHT));}
.col-t.l55 .videotext-content {padding-top: calc(var(--video-HEIGHT916) * 45 / 55 + var(--TABLINK-HEIGHT));}
.col-t.l60 .videotext-content {padding-top: calc(var(--video-HEIGHT916) * 40 / 60 + var(--TABLINK-HEIGHT));} */
.col-t.l40 .videotext-content {padding-top: calc(var(--video-HEIGHT916) * 60 / 40 + var(--TABLINK-HEIGHT));}
@media (orientation:portrait) {
	.col-t.pt .videotext-content {padding-top: calc(var(--video-HEIGHT916) * 50 / 60 + var(--TABLINK-HEIGHT));}
}


.videoiframe-in, .videotext-scroll-out {
	position: absolute;
	top: 0; left: 0;
	bottom: 0; right: 0;
	background-color: var(--color-bg-videotext);
}
.videoiframe-in {
	width: 100%;
	height: 100%;
	border: none;
}
.videotext-scroll-out {
	/* text-align: center; */
	font-size: inherit;
	color: inherit;
}
.videotext-scroll-out .videotext-scroll-padd {
	height: 100%;
	padding: var(--same-em-half) 1px var(--same-em-half) 4px;
	/* for-no-ul-li::: padding: var(--same-em-half) 1px var(--same-em-half) var(--same-px); */
	/* font-size: var(--font-listvideo); */
}
.videotext-scroll-out .videotext-scroll-in {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
}
.videotext-scroll-in::-webkit-scrollbar {width: 11px;}

.fa {cursor: pointer;}
.row-videolink .fa-youtube-play:after {
	content: "\00a0" "onYouTube";
	font-family: var(--font-header-family);
	letter-spacing: var(--font-header-space);
	font-variant: small-caps;
	font-weight: var(--font-header-weight);
}
.row-videolink {
	height: calc(var(--TABLINK-HEIGHT));
	font-size: var(--font-tab-size);
	text-align:center;
}
.row-videolink a:link {
	text-decoration: none;
	display: inline-block;
	width: 100%;
	line-height: var(--font-tab-line-h);
	margin: 0;
	padding: var(--font-tab-padd-top) var(--font-tab-padd-lr) var(--font-tab-padd-bottom);
	transition: var(--link-transition);
	color: var(--color-sumo-origin);
	background-color: var(--color-bg-tablink-all);
}
.row-videolink:hover, .row-videolink a:hover {
	color: var(--color-youtube);
	/* background-color: rgba(20, 38, 124, 0.5); */
	/* background-color: var(--color-tabcont-same); */
}


/* __________SCROLL-CONTENT-ASPECT-RATIO___________________________________________________ */
.row-textratio-post {
	margin: var(--same-em-min) 0;
	/* padding:; */
}
.col-textratio-inout {
	position: relative;
	/* Update from --tablink-width*/
	padding-top: calc(7 / 14 * 100%);
	background-color: lavenderblush;
}
.cell-textratio-in {
	height: 100%;
	position: absolute;
	top:0; left:0; bottom:0; right: 0;
	padding: 8px 1px 8px 16px;
	background-color: lightcoral;
}
.postcontent.textratio-scroll {
	height:100%;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: indianred;
	scrollbar-width: thin;
}
.textratio-scroll::-webkit-scrollbar {width: 11px;}

/* __________SCROLL-CONTENT-with-HEIGHT-EM_________________________________________________ */
.row-textscroll-post {
	margin: var(--same-em-min) 0;
	background-color: rgb(250, 235, 215);
	/* padding:; */
}
.col-textscroll-inout {
	height: 15em;
	padding: 16px 1px 16px 16px;
	background-color: aliceblue;
}
.cell-textscroll-scroll {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
}
.cell-textscroll-scroll::-webkit-scrollbar {width: 11px;}
.postcontent.textscroll-content {height: 100%}


:root {
	--mmmmmmmmmm-TEAM-mmmmmmmmmm: 0;
	--teamgallery-lr: 2px;
	--teamgallery-lr-half-neg: calc(var(--teamgallery-lr) / -2);
	--teamgallery-lr-half: calc(var(--teamgallery-lr) / 2);
}

.row-container-card-teamgallery {padding: 0; margin: 0 var(--teamgallery-lr-half-neg);}
.col-container-card-teamgallery {padding: 0 var(--teamgallery-lr-half); margin-bottom: var(--teamgallery-lr);}

.teamgallery-cell {position: relative;}
.teamgallery-img {display: block;}

.teamgallery-cell img {
	-webkit-filter: var(--filtergray-team);
	filter: var(--filtergray-team);
}
.teamgallery-overlay {
	position: absolute;
	bottom: 0;
	width: 100%;

	color: #f1f1f1;
	text-align: center;
	/* white-space: nowrap; */
	padding: var(--same-px-half);

	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.5); /* Black see-through */

	transition: .4s ease;
	opacity:0;
}

.teamgallery-overlay p, .teamgallery-overlay a {margin: 0.1rem; font-size: 0.65em}
.teamgallery-overlay p:first-child {font-size: 0.8em;}

.teamgallery-cell:hover .teamgallery-overlay {opacity: 1;}



:root {
	--mmmmmmmmmm-TIMELINE-mmmmmmmmmm: 0;
	--color-tl-ruler: var(--color-sumo-opacity05);
	--color-tl-arrow: var(--color-sumo-opacity05);

	--o_________-container-_________o: 0;
	--tl-container-padd-tb: 16px;
	--tl-container-padd-tb-min: 0px;
	--tl-container-padd-lr: 16px;
	--tl-container-padd-lr-min: 8px;

	--o_________-ruler-_____________o: 0;
	--tl-ruler-half-w: 2px;
	--tl-ruler-for1column: calc(16px / 2 + var(--tl-ruler-half-w));
	--tl-container-circle-top: calc(var(--tl-container-padd-tb) + 16px * 2);

	--o_________-arrowo-____________o: 0;
	--tl-arrow-size: calc(16px / 2);
	--tl-arrow-space-lr: calc(2px);
	--tl-circle-half-size: calc(var(--tl-arrow-size) + var(--tl-ruler-half-w) - var(--tl-arrow-space-lr));
	--tl-arrow-position-lr: calc(var(--tl-circle-half-size) + var(--tl-arrow-space-lr));
			--tl-diff-circle-min-arrow: calc(var(--tl-circle-half-size) * 2 - var(--tl-arrow-size) * 2);
			--tl-arrow-top: calc(var(--tl-container-circle-top) + var(--tl-diff-circle-min-arrow) / 2);

	--o_________-container-_________o: 0;
	--tl-container-padd-lr-arrow: calc(var(--tl-arrow-position-lr) + var(--tl-arrow-size));
}
/* .timelinebox {
	border: 1px solid red;
} */

/* TTMELINE-BOX + ruler */
.timelinebox-ruler {
	position: relative;
	max-width: 100%;
	margin: 0 auto;
	/* background-color: #474e5d; */
}

/* RULER-VERTICAL + timelinebox*/
.timelinebox-ruler::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;

	width: calc(var(--tl-ruler-half-w) * 2);
	margin-left: calc(var(--tl-ruler-half-w) / -1);

	background-color: var(--color-tl-ruler);
}

/* CONTAINER around content*/
.tl-container {
	position: relative;

	padding-top: var(--tl-container-padd-tb);
	padding-bottom: var(--tl-container-padd-tb-min);

	background-color: inherit;
	width: 50%;
}
.tl-container-service {
	position: relative;

	padding-top: var(--tl-container-padd-tb);
	padding-bottom: var(--tl-container-padd-tb-min);

	background-color: inherit;
	width: 100%;
}
.tl-container:last-child {padding-bottom: var(--tl-container-padd-tb);}
.tl-container.tl-container-left-padd-lr {padding-right: var(--tl-container-padd-lr-arrow); padding-left: var(--tl-container-padd-lr-min);}
.tl-container.tl-container-right-padd-lr {padding-left: var(--tl-container-padd-lr-arrow); padding-right: var(--tl-container-padd-lr-min);}

/* CIRCLE on the timeline + container */
.tl-container::after {
	position: absolute;
	content: '';

	width: calc(var(--tl-circle-half-size) * 2);
	height: calc(var(--tl-circle-half-size) * 2);

	top: var(--tl-container-circle-top);
	right: calc(var(--tl-circle-half-size) * -1);


	background-color: white;
	border: 4px solid var(--color-tl-ruler);
	border-radius: 50%;

	z-index: 1;
}

/* CONTAINER-PLACE to the left, right */
.tl-left {left: 0;}
.tl-right {left: 50%;}

/* ARROWS left,right*/
.tl-left::before, .tl-right::before {
	content: " ";
	height: 0;
	position: absolute;
	top: calc(var(--tl-arrow-top));
	width: 0;
	z-index: 1;
}

/* ARROWS-LEFT to the left container (pointing right) */
.tl-left::before {
	right: var(--tl-arrow-position-lr);

	border: medium solid var(--color-tl-arrow);
	border-top-width: var(--tl-arrow-size);
	border-bottom-width: var(--tl-arrow-size);
	border-left-width: var(--tl-arrow-size);
	border-right-width: 0;
	border-color: transparent transparent transparent var(--color-tl-arrow);
}

/* ARROWS-RIGHT to the right container (pointing left) */
.tl-right::before {
	left: var(--tl-arrow-position-lr);

	border: medium solid var(--color-tl-arrow);
	border-top-width: var(--tl-arrow-size);
	border-bottom-width: var(--tl-arrow-size);
	border-left-width: 0;
	border-right-width: var(--tl-arrow-size);
	border-color: transparent var(--color-tl-arrow) transparent transparent;
}

/* CIRCLE-FIXED for containers on the right side */
.tl-right::after {left: calc(var(--tl-circle-half-size) * -1);}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media (orientation:portrait) {
	/* RULER-VERTICAL + timeline*/
	.timelinebox-ruler::after {
		left: var(--tl-ruler-for1column);
	}
	/* CONTAINER around content*/
	.tl-container {
		width: 100%;
		padding-bottom: var(--tl-container-padd-tb);
	}
	.tl-container.tl-container-left-padd-lr,
	.tl-container.tl-container-right-padd-lr {
		padding-left: calc(var(--tl-ruler-for1column) + var(--tl-container-padd-lr-arrow));
		padding-right: var(--tl-container-padd-lr-min);
	}
	/* ARROWS Make sure that all arrows are pointing leftwards */
	.tl-container::before {
		left: calc(var(--tl-ruler-for1column) + var(--tl-arrow-position-lr));

		border: medium solid var(--color-tl-arrow);
		border-top-width: var(--tl-arrow-size);
		border-bottom-width: var(--tl-arrow-size);
		border-left-width: 0;
		border-right-width: var(--tl-arrow-size);
		border-color: transparent var(--color-tl-arrow) transparent transparent;
	}
	/* CIRCLE Make sure all circles are at the same spot */
	.tl-left::after,
	.tl-right::after {
		left: calc(var(--tl-ruler-for1column) - var(--tl-circle-half-size));
	}
	/* Make all right containers behave like the left ones */
	.tl-right {left: 0%;}
}

/* The actual content */
.timeline-content.post {
	padding: 16px 16px 24px;
	/* background-color: white; */
	position: relative;
	border-radius: 8px;
	background-color:rgba(250, 250, 250, 0.3);
}


:root{
	--mmmmmmmmmm-IMG-SLIDE-mmmmmmmmmm: 0;
	--imgslide-prevnext-font: 1em;
	--imgslide-prevnext-tb: var(--same-px-half);
	--imgslide-prevnext-lr: var(--same-px-half);
	--imgslide-dot: calc(var(--px1em) * 12);
	--imgslide-dot-space: calc(var(--px1vhwm) * 6);
	--imgslide-dotcontainer-HEIGHT: calc(var(--imgslide-dot) + var(--imgslide-dot-space) * 4);
	/* imgslide-container-background: rgba(186, 190, 208, 0.5); */
	/* imgslide-container-background: rgba(207, 209, 222, 0.5); */
}

.imgslide-container {
	position: relative;
	background: var(--color-sumo-opacity06);
}

.imgslide-content-in {
	display: none;
}

.imgslide-prev, .imgslide-next {
	cursor: pointer;
	position: absolute;
	/* bottom: 0; */
	top: 50%;
	margin-top: calc(-1 * calc(var(--imgslide-prevnext-font) / 2 + var(--imgslide-prevnext-tb) / 2));
	width: auto;


	color: var(--color-sumo-origin);
	color: var(--color-bg-body-html);
	background-color: rgba(255, 255, 255, 0.2);

	font-weight: bold;
	font-size: var(--imgslide-prevnext-font);
	padding: var(--imgslide-prevnext-tb) calc(var(--imgslide-prevnext-lr) - 2px);
	user-select: none;
	transition: var(--link-transition);
}
a.imgslide-prev::after {content: "\276E";}
a.imgslide-next::after {content: "\276F";}
/* a.imgslide-prev::after {content: "\2770";}
a.imgslide-next::after {content: "\2771";} */

/* Position button */
.imgslide-prev {left: 0; border-radius: 0 4px 4px 0;}
.imgslide-next {right: 0; border-radius: 4px 0 0 4px;}

.imgslide-prev:hover, .imgslide-next:hover {
	background-color: var(--color-sumo-opacity03);
	color: var(--color-bg-body-html);
}

.imgslide-dotcontainer {
	text-align: center;
	/* padding: 4px 16px; */
	background: var(--color-sumo-opacity06);
	height: var(--imgslide-dotcontainer-HEIGHT);
	line-height: var(--imgslide-dotcontainer-HEIGHT);
}
.imgslide-dot {
	cursor: pointer;
	height: var(--imgslide-dot);
	width: var(--imgslide-dot);
	margin: 0 var(--imgslide-dot-space);
	background-color: var(--color-tabcont-same);
	border-radius: 0%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.imgslide-dot-active, .imgslide-dot:hover {background-color:#dbdde6;}



/* Caption text */
.imgslidetext {
	color: #f2f2f2;
	color: var(--color-postname-training);
	/* font-family: var(--font-header-family); */
	font-family: var(--font-title-family);
	font-size: 1.8em;
	padding: 8px 12px;
	position: absolute;
	bottom: 0px;
	/* width: 100%; */
	text-align: center;
	background-color: rgba(0,0,0,0.2);
	right: 0;
}
.imgslidetext2020 {
	color: #f2f2f2;
	color: var(--color-postname-training);
	/* font-family: var(--font-header-family); */
	font-family: var(--font-title-family);
	font-size: 2.5em;
	padding: 8px 12px;
	position: absolute;
	bottom: 0px;
	/* width: 100%; */
	text-align: center;
	background-color: rgba(0,0,0,0.2);
	right: 0;
	font-weight: bold;
}


:root{
	--mmmmmmmmmm-TEXTSLIDE-mmmmmmmmmm: 0;
	--textslide-prevnext-font: 1em;
	--textslide-prevnext-tb: var(--same-px-half);
	--textslide-prevnext-lr: var(--same-px-half);
	--textslide-dot: calc(var(--px1em) * 12);
	--textslide-dot-space: calc(var(--px1em) * 12);
	--textslide-dotcontainer-HEIGHT: calc(var(--textslide-dot) + var(--textslide-dot-space) * 2);
	/* textslide-container-background: rgba(186, 190, 208, 0.5); */
	/* textslide-container-background: rgba(207, 209, 222, 0.5); */
}

.textslide-container {
	position: relative;
	background: rgba(250, 250, 250, 0.5);
	border-radius: var(--tabbody-bdradius) var(--tabbody-bdradius) 0px 0px;
}

.textslide-content-in {
	display: none;
	padding: var(--same-px) calc(var(--same-px) + var(--textslide-prevnext-lr));
	/* // text-align: center; // */
}
/* ___FOR-inside-SCROLL____________________________________________>>> */
.textslide-container {
	/*1.5 = 1 + 0.5 = fentitav:a-head + lentitav:a-headfele*/
	height: calc(99.99% - var(--HEADER-forFIXHEIGHT-marg-large) * 1.5 - var(--textslide-dotcontainer-HEIGHT));
}
.textslide-content-in {
	height:100%;
	overflow-y: scroll; /*Add the ability to scroll */
	scrollbar-width: none; /* Hide scrollbar for Firefox */
	-ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.textslide-content-in::-webkit-scrollbar {display: none;}
/*______________________________________________FOR-inside-SCROLL__<<< */

.textslide-prev, .textslide-next {
	cursor: pointer;
	position: absolute;
	/* bottom: 0; */
	top: 50%;
	margin-top: calc(-1 * calc(var(--textslide-prevnext-font) / 2 + var(--textslide-prevnext-tb) / 2));
	width: auto;

	color: var(--color-sumo-origin);
	font-weight: bold;
	font-size: var(--textslide-prevnext-font);
	padding: var(--textslide-prevnext-tb) calc(var(--textslide-prevnext-lr) - 2px);
	user-select: none;
}
a.textslide-prev::after {content: "\276E";}
a.textslide-next::after {content: "\276F";}
/* a.textslide-prev::after {content: "\2770";}
a.textslide-next::after {content: "\2771";} */

/* Position button */
.textslide-prev {left: 0; border-radius: 0 4px 4px 0;}
.textslide-next {right: 0; border-radius: 4px 0 0 4px;}

.textslide-prev:hover, .textslide-next:hover {
	background-color: var(--color-sumo-opacity03);
	color: var(--color-bg-body-html);
}

.textslide-dotcontainer {
	text-align: center;
	/* padding: 4px 16px; */
	background: var(--color-sumo-opacity06);
	height: var(--textslide-dotcontainer-HEIGHT);
	line-height: var(--textslide-dotcontainer-HEIGHT);
}
.textslide-dot {
	cursor: pointer;
	height: var(--textslide-dot);
	width: var(--textslide-dot);
	margin: 0 8px;
	background-color: var(--color-tabcont-same);
	border-radius: 0%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.textslide-dot-active, .textslide-dot:hover {background-color:#dbdde6;}


:root {
	--mmmmmmmmmm-SUMOMAP-mmmmmmmmmm: 0;
	--font-sumomap-contact: var(--font-fibi-h6);
	--font-sumomap-contact-line-height: 1.2;
	--font-sumomap-contact-HEIGHT: calc(var(--px1vhwm) * 32 + var(--font-sumomap-contact) * var(--font-sumomap-contact-line-height));

	--font-sumomap-title: var(--font-fibi-h5);
	--sumomap-contactlinks-width: calc(100% / 7);
	--sumomap-drop-arrow: 5px;
	--sumomap-linksimg-height: 1.5em;
	--sumomap-linksimg-padd: 3px;
	--sumomap-links-HEIGHT: calc(var(--sumomap-linksimg-height) + var(--sumomap-linksimg-padd) * 2);

	--color-bg-sumomap-dropup: rgba(104, 153, 144, 0.5);
	--color-bg-sumomap-footer: rgba(20, 38, 124, 0.4);
	--color-bg-sumomap-footer: rgba(20, 38, 124, 0.3);
}
/* ________________________________ */
.row-sumomap-bgimg-height {
	overflow-x: auto;
	height: calc(100% - var(--font-sumomap-contact-HEIGHT));
	position: relative;
}
	/* ________________________________ */
	.img-url.url-img-sumomap {background-image: url("img-map/sumoland_sh2.png");}
		/* ____sumpmap-TITLE____________________________ */
		.sumomap-title {
			position: absolute;
			left:0;
			width: 100%;
			z-index:1;
			text-align: center;
			top:0;

			color:rgb(0, 0, 0, 0.2);
			font-family: inherit;
			font-size: var(--font-sumomap-title);
			font-weight: bold;
			font-variant: small-caps;
			background-color: transparent;

			height: var(--font-sumomap-contact-HEIGHT);
			line-height: var(--font-sumomap-contact-HEIGHT);
		}
		/* ____sumpmap-LINKS-TITLE____________________________ */
		.sumomaplinks-title {
			position: absolute;
			left:0;
			width: 100%;
			z-index:1;
			text-align: center;
			bottom:0;

			color: var(--color-tabcont-same);
			/* font-family: inherit;
			letter-spacing: 0.2em;
			font-weight: bold; */
			font-family: var(--font-header-family);
			letter-spacing: var(--font-header-space);
			font-weight: var(--font-header-weight);
			font-size: inherit;
			text-transform: uppercase;

			background-color: var(--color-bg-sumomap-dropup);

			height: var(--sumomap-links-HEIGHT);
			line-height: var(--sumomap-links-HEIGHT);
		}
		/* ____sumpmap-dropp-up____________________________ */
		.row-dropup-container {
			position: absolute;
			top:calc(100% - var(--sumomap-links-HEIGHT) * 2);
			width:100%;
			background-color: var(--color-bg-sumomap-dropup);
			height: var(--sumomap-links-HEIGHT);
		}
		.dropup-position {
			position: relative;
			/* display: inline-block; */
		}
		.col-dropup {
			text-align:center;
			width: var(--sumomap-contactlinks-width);
		}
		.col-dropup img {height: var(--sumomap-linksimg-height); width: auto;}

		.dropup-content {
			display: none;
			position: absolute;
			background-color:#b3ccc7;
			min-width: var(--sumomap-contactlinks-width);
			bottom: 0;
			z-index: 1;

			border-radius: var(--tabbody-bdradius) var(--tabbody-bdradius) 0 0;
			-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
			box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);

			-webkit-animation: fadeIn 1s;
			animation: fadeIn 1s;
		}
		@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
		@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}

		.dropup-content.right-contmiddle {
			left: 50%;
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);}
		.dropup-content.right-cont1 {
			right: calc(var(--sumomap-contactlinks-width) * 2);}
		.dropup-content.right-cont2 {
			right: calc(var(--sumomap-contactlinks-width) * 1);}
		.dropup-content.right-cont3 {right:0;}

		.dropup-content a, .dropup-content p {
			color: var(--color-tabcont-same);
			text-decoration: none;
			font-size: var(--font-tab-size);
			margin: 0;
			display: block;

			padding-left: 4px;
			padding-right: 4px;

			transition: var(--link-transition);
		}
		.dropup-content a, .dropup-content p.info {text-align:left;}
		.dropup-content a[href^="mailto"] {
			color: var(--color-tabcont-sumo);
			background-color: var(--color-sumo-origin);
		}
		.dropup-content a {padding-top: 4px; padding-bottom: 4px;}
		.dropup-content p:first-child {padding-top: 4px; padding-bottom: 0;}
		.dropup-content p:last-child {padding-top: 0; padding-bottom: 4px;}


		.dropup-content a:hover {
			color: var(--color-tabcont-same);
			background-color: var(--color-tabcont-sumo);
		}
		.dropup-position:hover .dropup-content {display: block;}


/* ____sumomap-footer____________________________ */
.row-sumomap-footer-height {
	height: var(--font-sumomap-contact-HEIGHT);
	background-color: rgba(20, 38, 124, 0.6);
	border-radius: 0 0 var(--tabbody-bdradius) var(--tabbody-bdradius);
}

.col-t.sumomap-footertext.position {
	height: 100%;
	position: relative;

}
.sumomap-footertext a {
	position: absolute;
	width: 100%;
	z-index:1;
	text-align: center;

	left:0;
	bottom: 0;


	color: var(--color-tabcont-same);
	font-family: var(--font-header-family);
	letter-spacing: var(--font-header-space);
	font-size: var(--font-sumomap-contact);
	font-weight: var(--font-header-weight);
	/* font-weight: bold; */
	/* letter-spacing: 0.05em; //<--font:asap */

	height: var(--font-sumomap-contact-HEIGHT);
	line-height: var(--font-sumomap-contact-HEIGHT);

	background-color: var(--color-bg-sumomap-footer);
	background-color: transparent;

	transition: var(--link-transition);
}
.sumomap-footertext a:hover {
	color: var(--color-tabcont-sumo);
	/* background-color:var(--color-tabcont-sumo); */
}


:root {
	--o_________-4SUMO-DY-_________o: 0;
	--color-intro-shadowlight: rgb(66, 93, 224);
	--sumodylight-shfilter: drop-shadow(0px 0px var(--px1vhwm) var(--color-intro-shadowlight));

	--intro-sumo-HEIGHT: 40%;
	--intro-dy-HEIGHT: 18%;

	--o_________-WATER-_________o: 0;
	 --color-water: rgb(14, 27, 88); /* rgb(3, 169, 244) */
	
	--water-animatefirst-0100-second50: polygon(0% 58.41%,5% 59.16%,10% 59.67%,15% 59.95%,20% 59.98%,25% 59.77%,30% 59.32%,35% 58.63%,40% 57.74%,45% 56.65%,50% 55.40%,55% 54.02%,60% 52.54%,65% 50.99%,70% 49.43%,75% 47.87%,80% 46.37%,85% 44.96%,90% 43.67%,95% 42.53%,100% 41.59%,100% 100%, 0% 100%);
	--water-animatefirst-50-second0100: polygon(0% 44.95%,5% 44.51%,10% 44.20%,15% 44.03%,20% 44.01%,25% 44.14%,30% 44.41%,35% 44.82%,40% 45.36%,45% 46.01%,50% 46.76%,55% 47.59%,60% 48.48%,65% 49.40%,70% 50.34%,75% 51.28%,80% 52.18%,85% 53.03%,90% 53.80%,95% 54.48%,100% 55.05%,100% 100%, 0% 100%);	
	--font-water-stroke: 0.025em;
	--font-water-size: 4.5em;
	--font-water-stroke: calc(var(--px1vhwm) * 2.5);
	--font-water-size: calc(var(--px1vhwm) * 96);
	
	--font-water-size: calc(var(--px1vh) * 96);
	--font-water-stroke: calc(var(--px1vhwm) * 2);
	--font-water-shtext1x4: var(--color-intro-shadowlight) 0px 0px var(--font-water-stroke);
	--font-water-shtext2: rgb(102, 217, 255) 0px 0px var(--font-water-stroke);
	--font-water-shtext3: rgb(28, 235, 253) 0px 0px var(--font-water-stroke);

	--intro-water-HEIGHT: var(--font-water-size);

	--o_________-SUPERMO-_________o: 0;
	/*--supermo-fontsize: 1.5em;
	--supermo-fontsize: calc(var(--px1vh) * 39);*/
	--supermo-fontsize: calc(var(--px1vhwm) * 35);
	--supermo-line-h: 1.2;

	--intro-supermo-HEIGHT: calc(var(--supermo-fontsize) * var(--supermo-line-h));

	--o_________-introHEIGHT-_________o: 0;
	--intro-allinHEIGHT: calc(99.99% - var(--intro-sumo-HEIGHT) - var(--intro-dy-HEIGHT) - var(--intro-water-HEIGHT) - var(--intro-supermo-HEIGHT));
	--intro-HEIGHT-for100: calc(var(--intro-allinHEIGHT) / 12);
}


.cell-intro-sapce:after {content: "\00a0";}

/* .row-intro-empty-x15 {height: calc(var(--intro-HEIGHT-for100) * 5)}
.row-intro-empty-x1 {height: calc(var(--intro-HEIGHT-for100) * 2)} */
.row-intro-empty-same {height: calc(var(--intro-HEIGHT-for100) * 4)}
.row-intro-empty-not-same {height: calc(var(--intro-HEIGHT-for100) * 2)}
.row-intro-empty-not-same-icon {height: calc(var(--intro-HEIGHT-for100) * 1)}


.row-sumo-height {height: var(--intro-sumo-HEIGHT)}
/* .col-sumo-padd {padding: 0 calc(var(--px1vw) * 24);} */
.col-sumo-padd {padding: 0;}
.row-dy-height {height: var(--intro-dy-HEIGHT)}

/* class="img-url url-size-contain?cover?auto url-piece1?2?3?4 img-shadow-XXX img-YYY" */
.img-url.img-sumolight {
	background-image:
		url("img-w/sumo_blur.png"),
		url("img-w/last32_bi-to-ci_inv.png"),
		url("img-w/sumo_blur.png"),
		url("img-w/sumo_blur.png");
}
.img-url.img-dylight {background-image: url("img-w/Picture2_dy.png");}

.img-url.img-shadow-sumodylight {
	-webkit-filter: var(--sumodylight-shfilter);
			filter: var(--sumodylight-shfilter);
}


.row-water {text-align: center; height: var(--intro-water-HEIGHT);line-height: var(--font-water-size);}
.cell-water-position{
	/* display: inline-block; //ettol-fuggoleges-lesz*/
	position: relative;
	text-align: center;
}
.water-height {height: var(--intro-water-HEIGHT)}

.watertext p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	font-family: 'MonoPixies';
	font-size: var(--font-water-size);
	margin: 0;

	font-weight: bold;
	text-transform: uppercase;

	line-height: var(--font-water-size);
	height: var(--font-water-size);

}
/* ---WATER-TEXT-STROKE--- */
.watertext p:nth-child(1) {
	color: var(--color-sumo-origin);
	text-shadow:
		var(--font-water-shtext1x4),
		var(--font-water-shtext1x4),
		var(--font-water-shtext1x4),
		var(--font-water-shtext1x4),
		var(--font-water-shtext2),
		var(--font-water-shtext3);
}

/* ---WATER-ANIMATION-21--- */
.watertext.f p:nth-child(2){
	color: rgb(1, 136, 203);
	clip-path: var(--water-animatefirst-0100-second50)
	/*background-color: black;*/
}

/* ---WATER-ANIMATION-22--- */
.watertext.s p:nth-child(2){
	color: rgb(1, 136, 203);
	clip-path: var(--water-animatefirst-50-second0100);
}

/* cell-supermo p {color: rgb(1, 150, 225); color: var(--color-water); color: rgb(0, 149, 220);color: rgb(0, 174, 255); */
	.col-supermo {
		position: relative;
		z-index: 1;
	}
	.cell-supermo p {
		font-family: 'MonoPixies';
		font-size: var(--supermo-fontsize);
		line-height: var(--supermo-line-h);
		margin: 0;
		/* font-weight: bold; */
	
		text-align: center;
		color: rgb(1, 112, 223);
		color: rgb(1, 136, 203);
	
	}
	.cell-supermo.splight-dark p {
		color: var(--color-sumo-origin);
	}


#leftSide{
	display: block;
	width: 30%;
}

#rightSide{
	display: block;
	width: 70%;
}

#leftSideMobile{
	display: none;
}

@media only screen and (max-width: 730px){
	#leftSide{
		display: none;
		width: 0%;
	}
	#rightSide{
		display: block;
		width: 100%;
	}
	#leftSideMobile{
		display: block;
		width: 100%;
	}
	.side-left .h100pc{
		display: none;
	}
}

.contentbtn{
	cursor: pointer;
	font-size: var(--supermo-fontsize);
	border-radius: 2%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color: rgb(240, 238, 238);
	text-align: center;
	box-sizing: border-box;
	flex: 1;
	display: inline-flex;
	border: none;
	list-style: none;
	flex-direction:row;
	width: 100%;
	padding: 0;
}

.highlight{
	cursor: pointer;
	font-size: var(--supermo-fontsize);
	border-radius: 2%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color: rgb(240, 238, 238);
	text-align: center;
	box-sizing: border-box;
	flex: 1;
	display: inline-flex;
	border: none;
	list-style: none;
	flex-direction:row;
	width: 50%;
	padding: 0;
	float: left;
}
@media (orientation:portrait) {
	.highlight
	{
		width: 100%;
	}
}

.l3{
	font: 16px/1.5 normal normal;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 300;
    color: #efdab9;
    list-style: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5em;
    border-left: none;
	width: 100%;
}

.contentbtn .btn
{
	font: 16px/1.5 normal normal;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    list-style: none;
    box-sizing: border-box;
    line-height: inherit;
    font-weight: 500;
    text-decoration: none;
    border-radius: 5px;
    color:white;
    background-color:var(--color-water);
    display: block;
    font-size: 1.4em;
    padding: 0.5em;
    white-space: nowrap;
}

.highlight .btn
{
	font: 16px/1.5 normal normal;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    list-style: none;
    box-sizing: border-box;
    line-height: inherit;
    font-weight: 500;
    text-decoration: none;
    border-radius: 5px;
    color:white;
    background-color:var(--color-water);
    display: block;
    font-size: 1.5em;
    padding: 0.5em;
}

.currencybtn {
	cursor: pointer;
	border-radius: 2%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color: rgb(240, 238, 238);
	text-align: center;
	box-sizing: border-box;
	flex: 1;
	display: inline-flex;	
	list-style: none;
	flex-direction:row;
	padding: 0;
}

.currencybtn .btn{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    list-style: none;
    box-sizing: border-box;
    line-height: inherit;
    font-weight: 500;
    text-decoration: none;
    border-radius: 5px;
    color:white;
    background-color:var(--color-water);
    display: block;
    padding: 0.2em;
    white-space: nowrap;
	border: none;
}

.currencybtn .btn_empty{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    list-style: none;
    box-sizing: border-box;
    line-height: inherit;
    font-weight: 500;
    text-decoration: none;
    border-radius: 5px;
    color:var(--color-water);
	border-color:var(--color-water);
    background-color:white;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
    display: block;
    padding: 0.2em;
    white-space: nowrap;
}

@media only screen and (max-width: 1350px) and  (min-width: 725px) {
	.contentbtn {
	  width: 100%;
	  flex-direction:column;
	}

	.contentbtn .btn {
		width: 100%;
		font-size: 1em;
	}
  }

.padding-new-on-mobile{
	padding-left: 2%;
	text-align: justify
}

.paragraph-justify{
	text-align: justify
}

  @media only screen and (max-width: 725px) {
	.contentbtn {
	  width: 100%;
	  flex-direction:column;
	}
	.contentbtn .btn{
		width: 100%;
		font-size: 0.8em;
	}
	.padding-new-on-mobile{
		padding-left: 0 !important;
		text-align: justify
	}
  }

/* *********************** */

/* **************** */
/* Address Map */

.footeraddressname, .footeraddress {
	font-weight: bold;

}

#text-content-footer-address-part1, #text-content-footer-address-part2, #email-content-footer{
	padding-top: 0.6%;
}

#text-content-footer-address-part2 {
    margin-right: 10px;
  }

@media only screen and (max-width: 1100px) and (min-width: 830px) {
	.sumomap-footertext a{
		font-size: calc(var(--font-sumomap-contact) / 1.1);
	}
	.footeraddressname, .footeraddress {
	  width: 100%;
	  font-size: 0.8em;
	}
  }

@media only screen and (max-width: 830px) and (min-width: 700px){
	.sumomap-footertext a{
		font-size: calc(var(--font-sumomap-contact) / 1.5);
	}
	.footeraddressname, .footeraddress {
	  width: 100%;
	  font-size: 0.8em;
	}
  }

  @media only screen and (max-width: 700px) and (min-width: 550px){
	.sumomap-footertext a{
		font-size: calc(var(--font-sumomap-contact) / 1.7);
	}
	.footeraddressname, .footeraddress {
	  width: 100%;
	  font-size: 0.7em;
	}
  }

  @media only screen and (max-width: 550px) and (min-width: 350px) {
	.sumomap-footertext a{
		font-size: calc(var(--font-sumomap-contact) / 2);
	}
	.footeraddressname, .footeraddress {
	  width: 100%;
	  font-size: 0.6em;
	}
  }

  @media only screen and (max-width: 350px){
	.sumomap-footertext a{
		font-size: calc(var(--font-sumomap-contact) / 2.5);
	}
	.footeraddressname, .footeraddress {
	  width: 100%;
	  font-size: 0.5em;
	}
  }


/* **************** */

.post .versionsumo {
	color: var(--color-sumo-origin);
	margin: 0 0 var(--font-p-marg-tb);
	font-size: 1.4em;
	font-weight: 500px;
}

.resellerspg{
	color: var(--color-sumo-origin);
	margin: 0 0 var(--font-p-marg-tb);
	font-size: 1.2em;
	font-weight: 500px;
	text-decoration: underline;
}

a.dlbtn:hover {
color: #212976; /*#333333;*/
background-image: linear-gradient(white, #97baea);
}

.dlimgbtn{
text-align: center;
}

.dlbtn{
background-image: linear-gradient(white, #ADD8E6);
color: #495192;
border: 2px solid #CCCCCC;
border-bottom: none;
border-radius: 5px;
padding: 6px 10px 6px 10px;
text-decoration: none;
}

@media (orientation:portrait) {
	.dlbtn.marginbtnp {margin-left: 0.45em;}
}
@media (orientation:landscape) {
	.dlbtn.marginbtnl {margin-left: 0.32em;}
}

#table-previous-version  table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}

#table-previous-version  table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}

#table-previous-version table th, #table-previous-version table td {
padding: .625em;
text-align: left;
}

#table-previous-version table th {
font-size: .75em;
letter-spacing: .1em;
text-transform: uppercase;
}

#table-previous-version table td {
	font-size: .9em;
	}
	
.requirements table {
border-collapse: collapse;
border: 1px solid #ccc;
margin: 0px;
padding: 0px;
width: 100%;
}

.requirements table tr {
background-color: #f8f8f8;
border: 1px solid #ccc;
padding: .35em;
}

.requirements table th, .requirements table td {
padding: .625em;
}

.requirements table th {
font-size: .75em;
letter-spacing: .1em;
text-transform: uppercase;
border: 1px solid #ccc;
text-align: center;
}

.requirements table td {
border: 1px solid #ccc;
font-size: .9em;
text-align: left;
}

@media screen and (max-width: 730px) 
{
	#table-previous-version table {
		border: 0;
	}

	#table-previous-version table thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	#table-previous-version table tr {
		border-bottom: 3px solid #ddd;
		display: block;
		margin-bottom: .625em;
	}

	#table-previous-version table td {
		border-bottom: 1px solid #ddd;
		display: block;
		font-size: .85em;
		text-align: right;
	}

	#table-previous-version table td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}

	#table-previous-version table td:last-child {
		border-bottom: 0;
	}
}

.image-service-on-right{
	float: right; 
	width: 40%; 
	padding-left: 2%;
}

.image-service-on-100{
	display:block; 
	margin-left:auto; 
	margin-right:auto;
}

.image-service-on-50{
	display:block; 
	width:50%; 
	margin-left:auto; 
	margin-right:auto;
}

@media screen and (max-width: 730px) 
{
	.image-service-on-50{
		display:block; 
		width:80%; 
		margin-left:auto; 
		margin-right:auto;
	}
}

#WeftecNews .boldStyle{
	font-weight: bold;
}

.btnProduct{
	font: 16px/1.5 normal normal;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    list-style: none;
    box-sizing: border-box;
    line-height: inherit;
    font-weight: 200;
    text-decoration: none;
    color: white;
    background-color: var(--color-water);
    display: block;
    font-size: 0.9em;
    padding: 0.2em;
    white-space: nowrap;
	width: 100%;
	cursor: pointer;
	text-align: center;
	border: none;
}

#backArrow .fa {
    position: fixed;
	cursor: pointer;
	display: block;
	bottom: 1.6em;
	right: 2.6em;
    background-color: var(--color-water);

	display: inline-block;
	border-radius: 50%;
	box-shadow: 0 0 2px #888;
	padding: 0.7em 0.8em;
  
  }

.btnProductSeparator{
    display: block;
    padding: 0.4em;
	margin-top: 2%;
	margin-bottom: 2%;
	width: 100%;
	background-image: linear-gradient(to left, rgb(14, 27, 88, 0), rgb(14, 27, 88, 1), rgb(14, 27, 88, 0));
	border: none;
}

.imageProduct{
	background-image: linear-gradient(to bottom, rgb(255,255,255, 0.9), rgba(220,222,235,0.9));
	border-width: calc(var(--px1em) * 4) calc(var(--px1em) * 4) 0 calc(var(--px1em) * 4);
	border-color: rgb(114,125,176);
	border-style: solid;
	border-radius: var(--same-em) var(--same-em) 0 0;
}

.divLinkProduct{
	cursor: pointer;
}

.TheButtonProduct{
	height: calc(100% - var(--HEADER-forFIXHEIGHT-marg-no));
	background-color: rgb(184, 190, 216, 0.5);
}
.NoTheButtonProduct{}

.mainProduct{
	/* + (var(--header-margbottom-large) / 1.5) */
	margin-top: calc(var(--header-margbottom-large));
}
.NomainProduct{}

.tabChineseProducts{

}

.TheButtonResellers{
	height: calc(100% - var(--HEADER-forFIXHEIGHT-marg-no));
}
.NoTheButtonResellers{}


/* News tab : Training table */
.tableTraining {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
  }
  
  .tableTraining th,
  .tableTraining td {
	border: 1px solid #ccc;
	padding: 8px;
  }

  .tableTraining td {
    font-size: 12px;
  }

  .tableTraining a {
    color: blue;
    text-decoration: underline;
  }
  
  .tableTraining th {
	background-color: #f2f2f2;
	font-weight: bold;
	text-align: left;
  }
  
  .tableTraining th[scope="col"] {
	background-color: #f9f9f9;
  }
  
  .tableTraining th[scope="row"] {
	background-color: #f2f2f2;
  }
  
  .tableTraining th[scope="row"][rowspan],
  .tableTraining td[rowspan] {
	vertical-align: middle;
  }
  
  .tableTraining th[colspan],
  .tableTraining td[colspan] {
	text-align: center;
  } 

  .link-icon {
    width: 16px; 
    height: 18px;
	margin-top: -2% ;
	border-top-right-radius: 5px;
}

.email-image {
	vertical-align: middle;
	width: auto;
	height: 1.5em;
	max-height: 48px;
	max-width: 100%;
	margin-top: -9px;
}
.numero-image{
	vertical-align: middle;
	width: auto;
	height: 1.5em;
	max-height: 48px;
	max-width: 100%;
	margin-top: -9px;
}

@media (max-width: 600px) {
    .email-image,  .numero-image{
        margin-top: -7px;
    }
}

@media (min-width: 601px) and (max-width: 1200px) {
    .email-image,  .numero-image {
        margin-top: -8px;
    }
}

@media (min-width: 1201px) {
    .email-image,  .numero-image {
        margin-top: -9px;
    }
}

.reseller-card {
  display: block;
  text-align: center;
  border: 1px solid #e0d9d9;
  padding: 16px;
  text-decoration: none;
  color: #333;
  cursor: pointer;
}

.reseller-card:hover,
.reseller-card:focus-visible {
  background: #f5f5f5;
}

.reseller-title {
  display: block;
  font-weight: bold;
}

.reseller-cta {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #007bff;
  text-decoration: underline;
}

.reseller-flags img {
  width: 32px;
  height: auto;
}