/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   skin name: user blue
 *   version  : 2.6.04
 *   engine   : template 03
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ---------------------
 *   page width
 * --------------------- */
:root {
	--pageWidth: 1330px;
}
/* ---------------------
 *   colors
 * --------------------- */
:root {
	--color-prime:  #305674;			/* nav, button, aside border  */
	--color-hover:  #204664;			/* nav, button                */
	--color-active: #204664;			/* nav, button                */
	--color-select: #103654;			/* 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;}
}
/* -------
 * 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;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   nav
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   horizontal  -->  main menu bar
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
nav {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #406684;
	border-bottom: 1px solid #204664;
}
#nv1 {
	height: 44px;
}
.nav-item {
	position: relative;
	top: -1px;
	color: #ffffff;
	line-height: 44px;
	padding: 0 15px;
	border-top: 1px solid #406684;
	border-bottom: 1px solid #204664;
}
.nav-item:hover {
	border-top: 1px solid #305674;
	border-bottom: 1px solid #103654;
}
@media screen and (min-width: 1001px) {
	.nav-highlight {
		border-top: 1px solid #204664;
		border-bottom: 1px solid #002644;
	}
}
/* ------------------
 * home --> svg logo
 * ------------------ */
#home-item {
	position: relative;
	width: 110px;
}
#logo-home-svg {
	position: absolute;
	top: 11px;
	width: 100px;
}
/* ------------------
 * parent site logo
 * ------------------ */
#parent-site {
}
/* -----------------------------
 * 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: #304e65;
}
#side-menu-wrapper {
	border-top: 1px solid #102e45;
}
.side-item {
	color: #dddddd;
	border-bottom: 1px solid #102e45;
}
.side-item:hover,
.side-item:active {
	color: #ffffff;
	background-color: #203e55;
}
/* ----------------------
 * svg icons -> side nav
 * ---------------------- */
#side-nav-icon-list .menu-icon-svg:hover {
	background-color: #203e55;
}
/* -- parent link -- */
#side-nav-parent-site:hover {
	background-color: #203e55;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   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; }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   article
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
article {
	line-height: 1.44;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   aside
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.snp-side-box a {
	color: #6092ba;
}
/* --------------
 * contact
 * -------------- */
#snp-side-tel {
	color: #005080;
}
#snp-side-tel:hover {
	color: #006090;
}
#snp-side-tel:active {
	color: #005070;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   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;
	}
}