/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   skin name: blue-jac
 *   version:   23.12
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
/* ------------------------------------
 *   general
 * ------------------------------------ */
:root {
	--pageWidth: 1400px;					/* page width */
	--color-prime:  #4fb0f9;				/* background: nav, button, aside border    */
	--color-hover:  #2f90d9;				/* hover:      nav, button                  */
	--color-active: #2387d3;				/* active:     nav, button                  */
	--color-select: #3fa0e9;				/* highlight:  nav-highlight                */
}
body {
	background-image: url("../img/bg-plank-03.jpg");
	font-family: Verdana, Helvetica, Geneva, "Lucida sans", sans-serif;
	font-size: 18px;
	color: #555555;
}
a {
	color: #0055bb;
}
a:hover {
	color: #1177dd;
}
/* ------------------------------------
 *   header 
 * ------------------------------------ */
#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;
}
/* ------------------------------------
 *   nav 
 * ------------------------------------ */
/* -- 3d desktop menu -- */
#nv1 {
	height: 47px;
	border-top: 1px solid #5fc0ff;
	border-bottom: 1px solid #2f90d9;
}
.nav-item {
	position: relative;
	top: -1px;
	border-top: 1px solid #5fc0ff;
	border-bottom: 1px solid #2f90d9;
}
.menu-item-block:hover .nav-item {					/* highlight menu (and submenu) hover */
	color: #ffffff;
	border-top: 1px solid #3fa0e9;
	border-bottom: 1px solid #1377c3;				
}
.nav-highlight {
	color: #ffffff;
	border-top: 1px solid #4fb0f9;
	border-bottom: 1px solid #1f80c9;
}
.submenu {
	top: 48px;
}
/* -- desktop menu -- */
.nav-item {
	color: #ffffff;
	line-height: 47px;
	padding: 0 14px;
	font-family: sans-serif, Verdana;
	font-size: 16px;
}
/* --- submenu ------------------------ */
.submenu {
	padding: 16px 10px 20px 10px;
	background: #e8ebed url("../img/bg-grey-02.jpg");
	box-shadow: 0px 1px 0px 1px #cccccc;
	border-top: 8px solid var(--color-hover);
}
.submenu a:hover {
	color: #0044aa;
}
/* ------------------------------------
 *   mobile nav (side menu) 
 * ------------------------------------ */
#side-nav {
	background-color: #0a384f;
}
#side-menu-wrapper {
	border-top: 1px solid #00283f;
}
.side-item {
	color: #dddddd;
	border-bottom: 1px solid #00283f;
}
.side-item:hover,
.side-item:active {
	color: #ffffff;
	background-color: #0e4f6f;
}
/* ------------------------------------
 *   button  (standard form) 
 * ------------------------------------ */
input[type=button] {
	border-width: 1px;
	border-color: #2ec4ff #0ea4ed #0ea4ed #2ec4ff;
}


/* ===========================================================
 *
 *   screen size
 *
 * =========================================================== */
/* ------------------------------------
 *   header 
 * ------------------------------------ */
@media screen and (min-width: 1101px) {
	#hd1 { height: 250px; }
}
@media screen and (max-width: 1100px) {
	#hd1 { height: 25.5vw; }
}
@media screen and (max-width: 600px) {
	#hd1 { height: 150px; }
}

/* ------------------------------------
 *   header title/logo 
 * ------------------------------------ */
@media screen and (min-width: 801px) {
	#hd-title {
		top: 45px;
		left: 30px;
		bottom: auto;
		font-size: 2.3rem;
	}
	#hd-subtitle{
		top: 85px;
		left: 30px;
	}
	#hd-wrap-logo {
		top: 50px;
		left: 30px;
		width: 210px;
		height: 80px;
	}
}
@media screen and (max-width: 800px) {
	#hd-title {
		top: 30px;
		left: 10px;
		font-size: 1.5rem;
	}
	#hd-subtitle{
		top: 55px;
		left: 10px;
	}
	#hd-wrap-logo {
		top: 40px;
		left: 20px;
		width: 130px;
		height: 50px;
	}
}
@media screen and (max-width: 450px) {
	#hd-wrap-logo {
		display: none;
	}
}

/* ------------------------------------
 *   nav 
 * ------------------------------------ */
@media screen and (min-width: 1001px) {
	#side-nav { visibility: hidden; }
	#btn-menu { display: none; }
}
@media screen and (max-width: 1000px) {
	#hd1 { border-bottom: 8px solid var(--color-prime); }
	nav { display: none; }
}