 /* kstyles2026-4.css May 20th 2026 */

@font-face {font-family: 'Univers';
	font-weight: normal;
	src: url(‘../fonts/unb_regular-webfont.woff2’) format('woff2');
	}
@font-face {font-family: 'Univers';
	font-weight: bold;
	src: url(‘../fonts/unb_regular_600-webfont.woff2’) format('woff2');
	font-style: normal;
	}
@font-face {font-family: 'Univers';
	font-weight: normal;
	src: url(‘../fonts/unb_oblique-webfont.woff2’) format('woff2');
	font-style: italic;
	}
@font-face {font-family: 'Univers';
	font-weight: bold;
	src: url(‘../fonts/unb_oblique_600-webfont.woff2’) format('woff2');
	font-style: italic;
	}

html, body, div, span, h1, h2, h3, h4, h5, p, img, ul, li {margin:0; padding:0; border:0; font:inherit;}
html {font-size:16px;}

:root {
	--navbutt-background: rgba(255,255,255,0.0);
	--buthome-background: rgba(80,170,150,0.85);
	--butclosenav-background: rgba(255,100,30,0.7);
	--butt-color: #000;
	--butt-text-shadow: rgba(255,255,255,0.7);
	--butt-background: rgba(255,70,30,0.99);
	--butt-border: rgba(0,0,0,0.15);
	--butt-boxshadow1: rgba(255,255,255,0.5);
	--butt-boxshadow2: rgba(0,0,0,0.8);
	--nav-background: transparent;
	--nav-ul-background: rgba(25,25,40,0.7);
	--nav-ul-boxshadow1: rgba(0,0,0,0.95);
	--nav-ul-li-hcel-background: transparent;
	--nav-ul-li-border-top: rgba(0,255,155,0.4);
	--nav-ul-li-a-color: rgba(0,255,155,0.99);
	--nav-ul-li-cate-background: rgba(255,100,30,0.7);
	--nav-ul-li-cate-color: #000;
	--nav-ul-li-cate-a-color: #220;
	--nav-ul-li-cate2-background: #E1D;
	--nav-ul-li-hover-background: rgba(0,0,0,0.8);
	--nav-ul-li-hover-a-color: #FFF;
	--nav-ul-li-cate-hover: rgba(255,100,30,0.9);
	--nav-ul-li-cate-hover-a-color: #FFF;
	
	--rowtop-background: transparent;
	--sysflexleft-background: transparent;	
	--logo-background: rgba(255,255,255,1.0);	
	--foot-color: #266;
	--footlink-link: #266;
	--footlink-focus: #FFF;
	--footlink-hover: #FFF;
	
	--onsale-fill: #F00;
	--onsale-stroke: #F00;
	--onsale-background: #FFF;
	--h1-color: rgba(225,225,225, .01);
	--h1-border-color: #777;
	--h2-background: rgba(89,139,127,0.3);
--h2-background: rgba(255,235,0,0.1);
	--h2-textshadow: #333;
	--h3-color: rgba(255,250,0,0.8);
	--h3-textshadow: #666;
	--h3-sale-color: rgba(255,250,0,1.0);
	--p-color: #9ABCB5;
	--p-color2: #FFFAFA;
	--logodiv-background: transparent;
--tagline-background1: rgba(89,139,127,0.3);
--rowtop-background: transparent;
--rowtop-background: rgba(130,130,100,0.06);
--row1-background: rgba(30,45,50,0.85);
--row2-background: transparent;
	--row2a-background: transparent;
	--row2b-background: transparent;
	--row3-background: transparent;
	--rowbtm-background: transparent;
	--column-rule2: rgba(80,170,150,0.6);
--column-rule: rgba(255,235,0,0.1);
	--column-border: #CCC;
--rowstyle1-background: rgba(255,255,255,0.6);
--rowstyle1-border: #999;

	--rowstyle2a-background: rgba(80,170,150,0.9);
	--rowstyle2a-background: rgba(184,203,197,0.99);
	--rowstyle2b-background: rgba(255,255,255,0.6);
	--rowstyle2b-border: #999;
	--flexleft-background: rgba(222,232,230,0.90);

	--flexmid-background: rgba(222,232,230,0.90);
	--flexright-background: rgba(30,45,50,1.00);
--flexright2-background: rgba(222,232,230,0.90);
	--flexright-li-col: #333;

	--lev2-background: rgba(109,169,155,0.8);
	--lev3-background: rgba(255,165,0,1.0);
	--lev4-background: rgba(186,85,211,0.9);

	--firstlev-color: #598B7F;
	--nextlev-color: #F5761B;
	--seriouslev-color: #FFFF00;
	--definitivelev-color: #800080;

	--level-position-background: transparent;
	--curve-fill: transparent; 
	--curve-menu-fill: rgba(80,170,150,1.0);
	--curve-menu-stroke: #777;
	--curve-info-fill: rgba(80,170,150,1.0);
	--curve-info-stroke: #777;
	--text-fill: transparent;

	--infoq-ul-background: transparent;
	--infoq-ul-li-background: #FFF;
	--infoq-ul-li-a-color: #6A5B6E;
	--infoq-ul-li-a-hover: #000;
	--menuq-ul-background: transparent;
	--menuq-ul-li-background: #FFF;
	--menuq-ul-li-a-color: #6A5B6E;
	--menuq-ul-li-a-hover: #000;
	--menuqtxt-fill: #FFF;
	--menuqtxt-stroke: #F26422;
	--menuqham-stroke: #F36322;
	--infoqtxt-fill: #FFF;
	--infoqtxt-stroke: #F26422;
	--infoqi-fill: #F26422;
	--infoqi-stroke: #FFF;
	--infoqi-background: #CCDDB7;
	}
i {color:white;}
b {font-weight:600;}

.logopos {
	position: absolute; top:30px; width:400px; z-index:4;
	left: 50%;
	transform: translateX(-50%);
    margin: 10px 0px 0px 0px;
	padding: 10px;
	text-align: center;
    background: var(--navbutt-background);
	}
.logoimg2 {
	position:relative;
	top: calc(10px + 0.5vw);
	height: 7vw;
	max-height: 120px;
	min-height: 95px;
	}
#navbuttons {
	position:fixed; top:0px; width:400px; z-index:4;
	left: 50%;
	transform: translateX(-50%);
      margin: 10px 0px 0px 0px;
	padding: 10px;
	text-align: center;
    	background: var(--navbutt-background);
	}
#buthome {width:72px; margin:0px 9px; background:var(--buthome-background);}
#butback1 {width:72px; visibility:visible;}
#butopennav {width:180px; margin:0px 9px; }
#butclosenav {
	width: 90px;
	margin: -15px 25px 0px 0px;
	padding-top: 4px;
	background: var(--butclosenav-background); 
	transition: none;
	}
.butt {
 	font: bold 1.1em 'Century Gothic', sans-serif;
	height: 28px;
	Padding: 0; 
  	border-radius: 16px;
	border: 1px solid var(--butt-border);
	text-shadow: 0 1px var(--butt-text-shadow);
	box-shadow: inset 0 1px 0 var(--butt-boxshadow1), 0 2px 2px var(--butt-boxshadow2);
	transition: all 1.0s ease-out;
	color: var(--butt-color);
	opacity: 0.75;
	background: var(--butt-background);
	}
#nav {
	display: none;
	position:absolute; top:50px; z-index:5;
	left: 50%;
	transform: translateX(-50%);
 	width: 712px;	
	background: var(--nav-background);
	}
#nav a {
	font: 0.8rem 'News Gothic', sans-serif;
	text-align: center;
	letter-spacing: 1px;
	}

#nav ul {
	display: inline-block;
	position: relative; 
	list-style: none; 
	box-shadow: 0px 0px 2px var(--nav-ul-boxshadow1);
	border-radius: 10px;
	background: var(--nav-ul-background); 
	}

#nav ul li {
	float: left;
	height: 40px;
	width: 82px;
	border-top: 1px solid var(--nav-ul-li-border-top);
	}

#nav ul li a {
	display: block;
	padding: 4px 0px;
	text-decoration: none;
	color: var(--nav-ul-li-a-color);
	}

#nav ul li.hcel {background:var(--nav-ul-li-hcel-background);}

#nav ul li.cate {
	width: 110px;
	margin-left: 0px;	
	background: var(--nav-ul-li-cate-background);
	color: var(--nav-ul-li-cate-color);
	}

#nav ul li.cate a {
	display: block;
	font-weight: bold;
	padding: 4px 0px;
	text-decoration: none;
	color: var(--nav-ul-li-cate-a-color);
	}

#nav ul li.cate2 {width:110px; background:var(--nav-ul-li-cate2-background);}
#nav ul li:hover {background:var(--nav-ul-li-hover-background);}
#nav ul li:hover a {text-decoration:underline; color:var(--nav-ul-li-hover-a-color);}
#nav ul li.cate:hover {background:var(--nav-ul-li-cate-hover-background);}
#nav ul li.cate:hover a {text-decoration:underline; color:var(--nav-ul-li-cate-hover-a-color);}

.menuq {position:fixed; bottom:-4px; right:2px;}
.menuqtxt {
	translate: 15px 15px;
	font-size: 1.25rem;
	fill: var(--menuqtxt-fill);
	stroke: var(--menuqtxt-stroke);
	}
.menuqham {
	stroke: var(--menuqham-stroke);
	stroke-width: 4;
	}
.infoq {position:fixed; bottom:-4px; left:0px;}
.infoqtxt {
	translate: -15px 15px;
	font-size: 1.25rem;
	fill: var(--infoqtxt-fill);
	stroke: var(--infoqtxt-stroke);
	}
.infoqi {
	font: 35px Astigmatic;
	fill: var(--infoqi-fill);
	stroke: var(--infoqi-stroke);
	background: var(--infoqi-background);
	} 
.infoq ul{
	visibility: hidden;	
	position:absolute; bottom:34px; left:100px; width:100px;
	translate: 0 25%;
	transition: all 250ms cubic-bezier(.33,.65,.67,.81);
	transition-delay: 300ms;
	padding: 1em;
	list-style: none;
	background: var(--infoq-ul-background);
	}
.infoq > ul > li {
	width: 90px;
	margin-top: 10px;
	padding: 5px;
	border-radius: 10px;
	background: var(--infoq-ul-li-background);
	}
.infoq > ul > li a{
	font-size: 1em;
	line-height: inherit;
	text-decoration: none;
	color: var(--infoq-ul-li-a-color);
	}
.infoq > ul > li a:hover{
	color: var(--infoq-ul-li-a-hover);
	}
.menuq ul{
	visibility: hidden;	
	position:absolute; bottom:29px; right:100px; width:100px;
	translate: 0 25%;
	transition: all 250ms cubic-bezier(.33,.65,.67,.81);
	transition-delay: 300ms;
	padding: 1em;
	list-style: none;
	background: var(--menuq-ul-background);
	}
.menuq > ul > li {
	width: 60px;
	margin-top: 10px;
	padding: 5px;
	border-radius: 10px;
	background: var(--menuq-ul-li-background);
	}
.menuq > ul > li a{
	font-size: 1em;
	line-height: inherit;
	text-decoration: none;
	color: var(--menuq-ul-li-a-color);
	}
.menuq > ul > li a:hover{color: var(--menuq-ul-li-a-hover);
	}


#contus {translate: -34px -5px;}
#about {translate: -15px 0px;}

#curve-menu {fill:var(--curve-menu-fill); stroke:var(--curve-menu-stroke);}
#curve-info {fill:var(--curve-info-fill); stroke:var(--curve-info-stroke);}

#levbb {translate: -5px -20px; width:120px;}
#lev2 {translate: 74px 15px; background:var(--lev2-background);}
#lev3 {translate: 60px 10px; background:var(--lev3-background);}
#lev4 {translate: 46px 5px; background:var(--lev4-background);}

body {
	font-family: 'Raleway', sans-serif;
	background-color: #000;
	box-sizing: border-box;
	}
.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: auto;
	min-width: 500px;
	background: url(../backamos.svg);
	background-size: contain;
	}
h1 {	position:relative;	
	padding: 0px 25px 0px 220px;
	font-size: 3rem;
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
	border-radius: 50px;
	border: 1px solid var(--h1-border-color);
	color: var(--h1-color);
	background-image: url(../images/Quad-Solus-Play.jpg);
	background-repeat: repeat;
	-webkit-background-clip: text;
	animation: animate 15s ease-in-out infinite;
	}
h1.sys-logo {padding:0px 25px;}

h1 span#brandlogo {position:absolute; top:-5px; left:-5px;}
#brandlogotrans1 {transform:scale(0.7); background:transparent;}
h1 span#at {
	position:relative; top:-8px; left:0px;
	font-size: 2.5rem;
	padding: 0px 10px 0px 10px;
	color: rgba(225,225,225, .01);
	background-image: url(../images/Quad-Solus-Play.jpg);
	background-repeat: repeat;
	-webkit-background-clip: text;
	animation: animate 15s ease-in-out infinite;
	}

h2 {margin:0px 0px 15px 0px; padding:0px 0px 0px 5px; border-radius:5px; text-shadow:1px 1px var(--h2-textshadow); background:var(--h2-background);}

h2.sys-title {
	margin-bottom:15px; padding-left:5px; border-radius:5px;
	text-shadow:1px 1px var(--h2-textshadow);
	background:var(--h2-background);
	}

h3 {margin:0; padding:6px 0px 0px 0px; font-size:1.3rem; color:var(--h3-color); text-shadow:1px 1px var(--h3-textshadow);}

h3.sys-price {padding-top:6px; font-size:1.3rem; color:var(--h3-color); text-shadow:1px 1px var(--h3-textshadow);}
h3.msrp {font-size:1.3rem;}
h3.sale {padding-left:10px; font-size:1.7rem; color:var(--h3-sale-color);}

p {font-family:'Univers', sans-serif; color:var(--p-color); font-size:1.0rem; line-height:1.25rem;}
p.bodypara {margin-top:6px;}
p.bodypara2 {font-family:'Univers', sans-serif; color:var(--p-color2); font-size:1.1rem; line-height:1.2rem; font-weight: 400; padding-bottom:9px;}
p.rowp {margin:15px 0px; font-family:'Univers', sans-serif; color:var(--p-color); font-size:1.05rem;}
p.rowpx {margin:15px 0px; font-family:'Univers', sans-serif; color:var(--p-color); font-size:1.05rem;}

p.brand-tagline {
	line-height: 1.25rem;
	margin-bottom: 12px;
	padding: 10px;
	font-size: 1.1rem;
	font-weight: 600;
	color:var(--p-color);
	background:var(--h2-background);
	}
p.tagbakgrnd1 {
	background:var(--tagline-background1);
	}


p.brand-tagline2 {
	line-height: 1.4rem;
	margin-bottom: 12px;
	padding: 10px;
	font-size: 1.2rem;
	font-weight: 400;
	color:var(--p-color);
	color:#000;
	background:var(--h2-background);
	background:rgba(255,248,248,0.5);
	}

p.kcomment {color:#F5761B; font-size:1.3rem; line-height:1.6rem; font-weight: 400; font-style: italic; padding-bottom:9px;}


.systems {letter-spacing:0.2em; font:0.8em 'Raleway', sans-serif;}

.first_lev {font: italic 30px Arial; color:var(--firstlev-color);}
.next_lev {font: 30px Lato; font-stretch:ultra-expanded; color:var(--nextlev-color);}
.serious_lev {font: 1.8rem Train One; letter-spacing:0.1em; color:var(--seriouslev-color);}
.definitive_lev {font: 34px Pacifico; letter-spacing:0.2em; color:var(--definitivelev-color);}

.logodiv {display:flex; justify-content:center; background:var(--logodiv-background);}

#row0 {background-position: center center; background-size: cover; background-repeat:no-repeat; background-attachment:fixed; height:100vh;
padding-top:60px; border-radius:5px;}

#row1 {padding-top:60px; border-radius:5px 5px 25px 25px; background:var(--row1-background);}

#row2 {margin-bottom: 20px; background:var(--row2-background);}
#row2a {background:var(--row2a-background); border-radius:5px; margin:0px 100px;}
#row2b {margin-bottom: 20px; background:var(--row2b-background);}
#row3 {margin-bottom: 20px; background:var(--row3-background);}
.rowbtm {background:var(--rowbtm-background);}

.row-style1 {
	display: flex;
	flex-direction: row;
	height: auto;
	width: auto;
	max-width: 100%;
	margin: 30px 130px 0px 130px;
	border: 1px solid var(--rowstyle1-border);
	border-radius: 5px;
	background: var(--rowstyle1-background);
	}

.row-style2a {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	column-gap: 15px;
	row-gap: 10px;
	margin: 30px 130px 0px 130px;
	padding: 10px 0px 4px 0px;
	border: 1px solid #999;
	border-radius: 5px;
	background: var(--rowstyle2a-background);
	}
.bordrad2a1 {border-radius: 60px 20px 20px 60px;}

.row-style2b {
	display: flex;
	flex-direction: row;
	height: auto;
	width: auto;
	max-width: 100%;
	margin: 30px 130px 0px 130px;
	border: 1px solid var(--rowstyle2b-border);
	border-radius: 5px;
	background: var(--rowstyle2b-background);
	}
.bordrad2b1 {border-radius: 20px 80px 80px 20px;}

input.radx[type=radio] {
	position: absolute;
	opacity: 0; width: 0; height: 0;
	}
input.radx[type=radio] + img {
	cursor: pointer;
	}
input.radx[type=radio]:hover + img {
	background:white;
	}  
input.radx[type=radio]:checked + img {
	outline: 0px solid #000;
 	background:green;
	box-shadow:-2px -2px 1px 0px rgba(0,0,0,0.6), -2px -2px 1px 0px rgba(220,220,220,0.7) inset;
	}
.ipg1 {
	width: 130px;
	height: 68px;
	border-top: solid 0px rgba(255,70,30,0.5);
	border-left: solid 0px rgba(225,225,225,0.1);
	border-radius: 10px; 
	box-shadow: -1px -1px 1px 1px rgba(255,255,255,0.6), 1px 1px 1px 1px rgba(0,0,0,0.6);
	}


.sys-row-logo {display:flex; justify-content:center; background:var(--rowtop-background);}

.flex-left {position:static; min-width:150px; flex:10%; border-radius: 5px 0px 0px 5px; background:var(--flexleft-background);}
.bordradfl1 {border-radius: 20px 0px 0px 20px;}
.sys-flex-left {position:relative; flex:70%; border-radius:0px; background:var(--sysflexleft-background);}

.flex-mid {
	display: flex;	
	position: relative;
	flex: 60%;
	justify-content: center;
	align-items: center;
	background: var(--flexmid-background);
	text-align: center;
	}
.flex80 {flex: 80%;}
.flex-mid2 {
	display: flex;
	flex: 90%;
	flex-direction: row;
	height: auto;
	width: auto;
	max-width: 100%;
	padding: 20px;
	text-align: center;
	}

.flex-right {order:2; flex:30%; padding:20px; border-radius:0px 5px 5px 0px; background:var(--flexright-background);}

.flex-right2 {order:2; flex:10%; min-width:110px; padding:20px; border-radius:20px 80px 80px 0px; background:var(--flexright2-background);}

img.imgmodule {
	position: relative;	
	max-width: 100%;
	border-radius: 15px;
	background: white;
	filter: sepia(5%);
	}

img.sys-imgmodule {
	position: relative;	
	max-width: 100%;
	vertical-align:top;
	border-radius: 5px 0px 0px 5px;
	background: transparent;
	filter: sepia(0%);
	}

.level-position {position:absolute; top:154px; left:15px; z-index:1; background: var(--level-position-background);}

.level-position2 {
	position:absolute; top:123px; left:-12px; z-index:1;
	min-height: 50px;
	font-size: 20px;
	background: var(--level-position-background);
	}

.level-arc-size {height:250px; width:250px; display: block;}
#curve {fill:var(--curve-fill);}

.column-layout {
	height: auto;
	margin: 0px 90px;
	padding: 1em;
	column-width: 20em;
	column-gap: 2em;
	column-rule: 2px solid var(--column-rule);
	border: 0px solid var(--column-border);
	}
.colrule2 {column-rule: 2px solid var(--column-rule2);}
.column-layout2 {
	height: auto;
	margin: 0px 40px;
	padding: 1em;
	column-width: 30em;
	column-gap: 2em;
	column-rule: 2px solid var(--column-rule);
	border: 0px solid var(--column-border);
	position:relative; top:10px;
	background:rgba(15,15,15,0.99);
	}
.colimg1 {display: block; margin-left: auto; margin-right: auto; max-width: 100%;}
.sys-column-layout {margin: 0px 0px 0px 140px; padding: 2em;}

.text {
	transform-origin: 50% 50%;
	translate: 30px 30px;
	font-size: 35px;
	letter-spacing: 2.4px;
	animation: rotate 0.5s linear 1;
	animation-fill-mode: forwards;
	animation-delay: 0.2s;
	fill: var(--text-fill);
	}
.level-text {
	transform-origin: 50% 50%;
	translate: 0px 0px;
	font-size: 35px;
	letter-spacing: 2.4px;
	animation: rotate 0.5s linear 1;
	animation-fill-mode: forwards;
	animation-delay: 0.2s;
	fill: var(--text-fill);
	}
.model-title {
	max-width: 60px;
	margin: 10px 0px 5px 20px;
	padding: 3px;
	border-radius: 2px;
	font: 1.1em 'Univers', sans-serif;
	color: #000;
	text-shadow: 0 1px var(--butt-text-shadow);
	background: var(--h2-background);
	}
.model-panel {display:none; flex-direction:column; position:relative; top:0px;}

.model-label {margin:10px 15px; padding:3px; font-family: 'questrial', 'sans serif'; font-weight:bold;}

input.radturn[type=radio] {
	position: absolute !important;
	overflow: hidden;
	width: 1px;
	height: 1px;	
	clip: rect(0,0,0,0);
	white-space: nowrap;
	}
input.radturn[type=radio] + label {
	max-width: 140px;
	cursor: pointer;
	border-radius: 5px;	
	color: #CCC;
	background: #999;
	box-shadow:-1px -1px 1px 1px rgba(255,255,255,0.6), 1px 1px 1px 1px rgba(0,0,0,0.6);
	} 
input.radturn[type=radio]:hover + label {
	color: #000;	
	background: #EEE;
	}
input.radturn[type=radio]:focus + label {
	color: #000;
	background: #EEE;
	} 
input.radturn[type=radio]:checked + label {
	color: #000;
	background: #9AD284;
	box-shadow: -2px -2px 1px 0px rgba(0,0,0,0.6), -2px -2px 1px 0px rgba(220,220,220,0.7) inset;
	}
.model-label {margin:10px 20px; padding:5px; text-align:center; font:1.2em 'Univers', sans-serif;}

.prod1 {
	max-width: 100%;
	display:block;
	margin:auto; 
}
.promo {
	display: none; 
	position:relative; top:10px; 
	background: rgba(120,120,20,0.0);
	margin-bottom:20px;
	}
.promo h2 {
	font: 1.1em 'Univers', sans-serif;	
	letter-spacing: 1.4px;
	padding: 5px;
	border-radius: 2px;
	text-shadow: 0 1px var(--butt-text-shadow);
	background:var(--h2-background);
	}
.promo li {display:inline-block; padding:10px 10px 10px 2px;}

.promo li {font-family:'Univers', sans-serif; color:var(--flexright-li-col);}
.promo li {
	position:relative; height:170px; width:220px;
	overflow: hidden;
	background: rgba(255,255,255,0.5); 
	border-radius:10%;
	box-shadow: 2px 3px 4px rgba(0,0,0,0.5), -2px -2px 2px rgba(255,255,255,0.7), 3px 3px 3px rgba(0,0,0,0.7);
	text-align:center;
	margin:5px; 
	}
.promo li:hover {
	background: rgba(255,255,255,1.0); 
	}
li.price {
	font-size: 1.1em; 
	color: rgba(205,205,195,0.8);
	letter-spacing: 0.1em;
	text-shadow: 1px 1px var(--h2-textshadow);
	border: 1px solid #CCC;
	border-radius: 2px;
	background: rgba(255,255,255,0.1);
	}
.bordrad {border-radius:15px;}
.intro1 {position:relative; top:200px; background:rgba(5,5,5,0.3);}
.cent {text-align:center;}
.avidspace {word-spacing: -0.15em;}
.margt6 {margin-top: 6px;}
.marleft18 {margin-left: 18px;}
.padleft25 {padding-left: 25px;}
.maxwidth105 {max-width: 105px;}
.flex90 {flex: 90%;}
.backgrndcat1 {background: rgba(222,232,230,0.90);}
.h1-1 {padding: 0px 20px 0px 20px;
	top: calc(90px + 4vw);
	font-size: calc(1.8rem + 1vw); 
	}
.feature {text-align:center; color:white; margin-bottom:4px;}
.yellow {color:#EBFF4C;}
.black {color:black;}

.logoimg {
	position:relative;
	left: 50%;
	transform: translateX(-50%);
	height: 7vw;
	max-height: 60px;
	min-height: 45px;
	margin-bottom: -30px;
	padding: 10px;
	background: var(--logo-background);
	}
.foot {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 380px;
	padding: 5px 0px 10px 0px;
	font: 0.95rem 'Univers'; sans-serif; 
	text-align: center;
	letter-spacing: 0.03em;
	color: var(--foot-color);
	}
a {transition: all 250ms cubic-bezier(.33,.65,.67,.81);}
a:link.footlink {color:var(--footlink-link);}
a:focus.footlink {color:var(--footlink-focus);}
a:hover.footlink {color:var(--footlink-hover);}

.onsale {
	position:absolute; top:60px; left:20px;
	transform: rotate(-40deg);
	font-size: 2.2rem;
	fill: var(--onsale-fill);
	stroke: var(--onsale-stroke);
	background: var(--onsale-background);
	}
#saleflash {display: none;}
p.gl {
	position:absolute; top:0px; left:0px; height:35px; width:100%; 
	font-size:1.0em;
	background:rgba(80,140,130,0.3);
	color:black;
	line-height:1em;
	padding-top:5px;
	}
img.smd {
    position:absolute; top:10px; left:5px; height:180px; width:180px; 
    border:0;
    }
img.shi {
    position:absolute; top:0px; left:0px; height:195px; width:195px; 
    border:0;
    }
img.rhi {
    position:absolute; top:10px; left:-50px; height:186px; width:266px; 
    border:0; 
    }
img.rhix {
    position:absolute; top:10px; left:-50px; height:186px; width:266px; 
    border:0; background:white; 
    }
img.rmd {
	padding:30px 0px 0px 10px;
	}
img.rmdc {
	padding:60px 0px 0px 0px;
	}
img.rmdl {
	padding:10px 0px 0px 0px;
	}
img.rmdf {
	padding:40px 0px 0px 0px;
	}
img.rmdfm {
	padding:0px 0px 0px -6px;
	}
img.rmdx {
	position:absolute; top:20px; left:0px; height:130px; width:186px; border:0;
	}
img.rsm {
	position:absolute; top:20px; left:-50px; height:186px; width:266px; border:0;
	}
#menhold {position:sticky; top:0px; z-index:1;}

#buttadvice {margin:0px 0 10px 0; width:170px; background:yellow;}
#divadvice {width:270px; margin:-20px auto 20px auto; background:rgba(0,0,0,0.1); border-radius:0px 0px 50px 50px;}


#chordcable {transform:scale(0.2); margin:0; padding:0; background:transparent;}

.bodykem {color:rgba(255,220,220,0.7); letter-spacing:0.1em; font-size:1.02em;}

ul.nobull {list-style: none; padding:0; text-align:right; font:1em 'Univers';}
.rad-control {color:red;}

.analog {font-size: 1.5rem; opacity:0; animation: anadigfadeIn 3s ease-in 0.3s forwards;}

.digital {font-size: 1.5rem; opacity:0; animation: anadigfadeIn 3s ease-in 0.3s forwards;}

@keyframes animate {
    0%, 100% {background-position: left top;}
    25% {background-position: right bottom;}
    50% {background-position: left bottom;}
    75% {background-position: right top;}   
	}
@keyframes rotate {
	0% {transform: rotateZ(0deg); opacity:0.5;}
	100% {transform: rotateZ(20deg); opacity:1; fill:#FFFF00; stroke:#999;} 
	}
@keyframes anadigfadeIn {
	from {opacity:0;}
	to {opacity:1;}
	}

@media screen and (min-width: 941px) and (max-width: 1400px) {
	.row-style1 {margin:30px 30px 0px 30px;}
	p.rowp {font-size:0.95rem; margin:10px 0px;}
	.foot {font-size::0.85rem;}
	}

@media screen and (max-width: 940px) {
	.row-style1 {flex-direction:column; margin:20px 20px 0px 20px;}
	p.rowp {font-size:0.9rem; margin:5px 0px;}
	img.imgmodule {border-radius: 5px 5px 0px 0px;}
	.flex-right {border-radius: 0px 0px 5px 5px; padding:10px;}
	.foot {font-size:0.9rem;}
	}

