/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   skin name: plastic
 *   version  : 2.6.03    
 *   engine   : template 03
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ---------------------
 *   page width
 * --------------------- */
:root {
	--pageWidth: 1330px;
}
/* ---------------------
 *   colors
 * --------------------- */
:root {
	--color-prime:  #406060;			/* nav, button, aside border  */
	--color-hover:  #305050;			/* nav, button                */
	--color-active: #305050;			/* nav, button                */
	--color-select: #204040;			/* nav-highlight              */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   general
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body {
	background-image: url("../img/bg-plank-11.jpg");
	font-family: Verdana, Helvetica, Geneva, "Lucida sans", sans-serif;
}
/* -- section ------------------------- */
section {
	font-size: 18px;
	color: #333333;
}
@media screen and (max-width: 590px) {
	section {
		font-size: 20px;
	}
}
/* -- links --------------------------- */
a {
	color: #115577;
}
a:hover {
	color: #004466;
	text-decoration: underline;
}
/* -- button -------------------------- */
input[type=button] {
	border-width: 1px;
	border-color: #80a0a0 #204040 #204040 #80a0a0;
}
/* --- scroll top button -------------- */
#cdt-scroll-top {
	background-color: #2b4c57;
}
#cdt-scroll-top:hover {
	background-color: #1b3239;
}
#cdt-scroll-top:active {
	background-color: #14252a;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   header
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
header {
	background-color: #333333;
}
@media screen and (min-width: 1331px) {
	header {padding: 5px 0 5px 0;}
}
@media screen and (max-width: 600px) {
	#hd1-banner { object-position: center;}
}
/* -------
 * no ads
 * ------- */
@media screen and (min-width: 1201px) {
	#hd1 { height: 120px;}
}
@media screen and (min-width: 1001px) and (max-width: 1200px){
	#hd1 { height: 115px;}
}
@media screen and (min-width: 801px) and (max-width: 1000px){
	#hd1 { height: 110px;}
}
@media screen and (min-width: 601px) and (max-width: 800px) {
	#hd1 { height: 100px; }
}
@media screen and (max-width: 600px) {
	#hd1 { height: 90px; }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   header title
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#hd-title {
	color: #ffffff;
	text-shadow: 2px 2px 4px #000000;
}
#hd-title a {
	color: #ffffff;
}
#hd-subtitle {
	font-size: 17px;
	color: #ffffff;
	text-shadow: 2px 2px 2px #000000;
}
/* -----------
 * media size
 * ----------- */
@media screen and (min-width: 801px) {
	#hd-title {
		top: 10px;
		left: 20px;
		font-size: 2.3rem;
	}
	#hd-subtitle{
		top: 50px;
		left: 20px;
	}
}
@media screen and (max-width: 800px) {
	#hd-title {
		top: 6px;
		left: 10px;
		font-size: 1.8rem;	
	}
	#hd-subtitle{
		top: 42px;
		left: 10px;
	}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *  logo
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#hd-wrap-logo {
	opacity: 0.7;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	border-color: #4b4b4b;
	overflow: hidden;
}
#hd-wrap-logo:hover {
	opacity: 1;
	border-color: #5e5e5e;
}
/* -----------
 * media size
 * ----------- */
@media screen and (min-width: 801px) {
	#hd-wrap-logo {
		top: 17px;
		left: 5px;
		width: 190px;
		border-radius: 8px;
	}
}
@media screen and (max-width: 800px) {
	#hd-wrap-logo {
		top: 10px;
		left: 18px;
		width: 150px;
		border-radius: 5px;
	}
}
@media screen and (max-width: 600px) {
	#hd-wrap-logo {
		display: none;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   nav
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   horizontal  -->  main menu bar
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
nav {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #507070;
	border-bottom: 1px solid #205050;
}
#nv1 {
	height: 44px;
}
.nav-item {
	position: relative;
	top: -1px;
	color: #ffffff;
	line-height: 44px;
	padding: 0 15px;
	border-top: 1px solid #507070;
	border-bottom: 1px solid #205050;
}
.nav-item:hover {
	border-top: 1px solid #406060;
	border-bottom: 1px solid #104040;
}
@media screen and (min-width: 1001px) {
	.nav-highlight {
		border-top: 1px solid #305050;
		border-bottom: 1px solid #003030;
	}
}
/* ------------------
 * home --> svg logo
 * ------------------ */
#home-item {
	position: relative;
	width: 110px;
}
#logo-home-svg {
	position: absolute;
	top: 11px;
	width: 100px;
}
/* -----------------------------
 * svg icon list --> right side
 * ----------------------------- */
#menu-icon-list {
	height: 44px;
}
.menu-icon-svg {
	display: inline-block;
	margin-left: 2px;
	padding: 6px;
	width: 30px;
	height: 30px;
	cursor: pointer;
}
#menu-icon-list .menu-icon-svg:hover {
	background-color: var(--color-active);
}
#icon-phone {
	width: 28px;
	height: 28px;
	padding: 7px;
}
#icon-contact {
	padding-top: 7px;
	padding-bottom: 5px;
}
/* -----------------------------
 * horizontal visible on mobile
 * ----------------------------- */
#btn-lang-narrow .menu-icon-svg:hover {										/* button for language */
	background-color: var(--color-active);
}
#btn-side-menu .menu-icon-svg:hover {
	background-color: var(--color-active);
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   nav - mobile
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ---------
 * side nav
 * --------- */
#side-nav {
	background-color: #204949;
}
#side-menu-wrapper {
	border-top: 1px solid #002020;
}
.side-item {
	color: #dddddd;
	border-bottom: 1px solid #002020;
}
.side-item:hover,
.side-item:active {
	color: #ffffff;
	background-color: #053030;
}
/* ----------------------
 * svg icons -> side nav
 * ---------------------- */
#side-nav-icon-list .menu-icon-svg:hover {
	background-color: #053030;
}
/* -- parent link -- */
#side-nav-parent-site:hover {
	background-color: #053030;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   nav - screen size
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 1001px) {
	#menu-item-list { display: inline-block; }
	.nav-highlight  { background-color: var(--color-select); }
	#side-nav       { visibility: hidden; }
	#btn-side-menu  { display: none; }
}
@media screen and (max-width: 1000px) {
	/* -- hide portions of nav -- */
	#menu-item-list { display: none; }
	.nav-highlight  { background-color: var(--color-prime); }
	#btn-side-menu  { display: block; }
}
@media screen and (max-width: 800px) {
	#nv1       { height: 56px; }
	#home-item { width: 140px;
				 height: 56px; }
	#logo-home-svg {
		top: 14px;
		width: 130px;
	}
	#menu-icon-list { height: 56px;	}
	.menu-icon-svg {
		width: 38px;
		height: 38px;
		padding: 8px;
	}
	#icon-phone {
		width: 34px;
		height: 34px;
		padding: 10px;
	}
}
@media screen and (min-width: 611px) {
	#btn-lang-narrow { display: none; }
}
@media screen and (max-width: 610px) {
	#menu-icon-list { display: none; }
	#btn-lang-narrow { display: block; }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   nav 2  -->  su submenu
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ---- reports -------------------------------- */
.su-sub-admin        { background-color: #335555; }
.su-sub-admin:hover  { background-color: #2e4e4e; }
/* ---- su home -------------------------------- */
.su-sub-home         { background-color: #305050; }
.su-sub-home:hover   { background-color: #294949; }
/* ---- manage / edit  ------------------------- */
.su-sub-manage       { background-color: #335555; }
.su-sub-manage:hover { background-color: #2e4e4e; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   article
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
article {
	line-height: 1.44;
}
/* --------------------------
 * my promo
 * or fallback when no ads
 * -------------------------- */
#art-top {
	background-color: #e0e0e0;
	background-image: url("../../../webengine/engineRes/img/bg-plank-03.jpg");
	border-bottom: 1px solid #cccccc;
}
#art-top-tagline {
	font-size: 17px;
}
@media screen and (max-width: 600px) {
	#art-top-msg {
		right: 10px;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   aside
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   ads on  >>  but no ad found  >>  print my promo
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.aside-info-msg {
	position: absolute;
	top: 5px;
	right: 15px;
	font-size: 16px;
	text-align: right;
}
/* -- plastinfo.eu -- */
.aside-info-title {
	font-size: 28px;
	font-weight: bold;
}
.logo-part-2 {			/* info */
	color: #ff8000;
}
#aside-info-title-1 {
	color: var(--color-select);
}
#aside-info-title-2 {
	color: #dddddd;
}
#aside-info-title-3 {
	color: #dddddd;
}
#aside-tagline-2,
#aside-tagline-3 {
	color: #bbbbbb;
}
/* -- img ------------ */
.aside-img-ad {
	display: block;
	width: 100%;
	object-fit: contain;
}
.aside-img-widget {
	display: block;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   ads off  >>  SysAsideLoader
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.sys-side-box {
	display: flex;
	justify-content: space-between;
	padding: 17px 10px 15px 10px;
	background-color: #cccccc;
	background-image: url("../img/bg-marble-03.jpg");
	border-top: 1px solid #d6d6d6;
	border-bottom: 1px solid #c6c6c6;
}
.sys-side-box a {
	color: #305060;
}
.sys-side-wrapper {
	display: inline-block;
}
/* ---- vertical info ---- */
.sys-side-info {
	margin: 0;
	color: #949197;
	text-align: center;
	font-size: 23px;
	font-weight: bold;
	writing-mode: vertical-lr;
	border-left: 1px solid #949197;
}
/* ----------------
 * snippet 1
 * ---------------- */
#sys-box1-text {
	margin-bottom: 3px;
	padding: 0 15px;
	line-height: 1.6;
	font-weight: bold;
	background-image: linear-gradient(#b6b6b6, #c6c6c6, #b6b6b6);
	border-bottom: 1px solid #999999;
}
#sys-box1-serv {
	padding-left: 15px;
	/*line-height: 27px;*/
}
.sys-box1-prom {
	display: inline-block;
	color: #305060;
}
.sys-box1-prom:hover {
	color: #103040;
	text-decoration-line: underline;
}
/* ----------------
 * snippet 2
 * ---------------- */
#sys-side-box-2 {
	background-position-x: center;
}
/* snip 2 - table */
.table-sys-side {
	color: #555555;
}
.table-sys-side th{
	color: #333333;
	background-image: linear-gradient(#b6b6b6, #c6c6c6, #b6b6b6);
	border-bottom: 1px solid #999999;
}
.sys-box2-col1 {
	padding: 0 10px 0 15px;
}
.sys-box2-col2,
.sys-box2-col3 {
	width: 60px;
	text-align: center;
}
/* ----------------
 * snippet 3
 * ---------------- */
#sys-side-box-3 {
	background-position: center;
}
/* snip 3 - table */
.sys-box3-col1 {
	padding-right: 10px;
	vertical-align: top;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   footer
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
footer {
	color: #90a0a0;
	background-color: var(--color-prime);
	border-bottom: 1px solid #204040;
}
footer a {
	color: #a0b0b0;
}
footer a:hover {
	color: #d0e0e0;
}
#ft-menu {
	
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   under
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#under {
	background-color: #292929;
	background-image: url("../img/bg-plank-31.jpg");
}
#under a {
	color: #506060;
}
#under a:hover {
	color: #809090;
}
.under-block-title {
	color: #607070;
	border-bottom: 1px solid #304040;
}
@media screen and (min-width: 501px) {
	.ft-menu-item{
		font-size: 16px;
	}
}