/*
 * Copyright © Hubert IT Services 2018
 */

body
{
	margin: 0;
	overflow-x:hidden;
	--scale: 1;
	cursor: default;
}
h1
{
	font-family: DejaVu Sans, Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight:100;
	position:relative;
	width:100%;
	text-align:center;
	left:0;
	font-size:calc(35px * var(--scale));
	margin:100px 0 50px 0;
}
a
{
	color:#08d;
	text-decoration:none;
	cursor: pointer;
}
ul
{
	font-size:calc(22px * var(--scale));
	font-family: DejaVu Sans, Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight:100;
	line-height:calc(50px * var(--scale));

	list-style: none;
}
li
{
	margin-left: calc(50px * var(--scale));
}
li:before
{
	content: "";

	position:relative;
	padding-left:calc(32px * var(--scale));
	padding-top:calc(4px * var(--scale));
	padding-bottom:calc(3px * var(--scale));
	margin-left:calc(-50px * var(--scale));
	margin-right:calc(18px * var(--scale));

	background:url(img/dot.svg);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
.ref-list li:before
{
	background-image:url(img/dot.svg);
}

.content
{
	font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:calc(20px * var(--scale));
	line-height:calc(35px * var(--scale));
	position:relative;
	max-width:700px;
	left:50vw;
	transform: translateX(-50%);
}
.content:before
{
	content:'';
	left:-40px;
	height:100%;
	width:3px;
	border-radius:3px;
	background:#44bbff;
	position:absolute;
}
.content-noline:before
{
	visibility:hidden;
}
.small
{
	font-size:calc(15px * var(--scale));
}
.header
{
	position:fixed;
	top:calc(-45px * var(--scale));
	left:0;
	width:100%;
	height:calc(45px * var(--scale));

	background: #2f3444;

	background-image: url(img/header-logo.svg);
	background-size: auto 65%;
	background-position: center center;
	background-repeat:no-repeat;

	box-shadow: 0 2px 5px rgba(0,0,0,.3);

	transition: top .1s ease-out;
}
.btn-options
{
	position:fixed;
	top:calc(24px * var(--scale));
	left:calc(24px * var(--scale));
	height:calc(26px * var(--scale));
	width:calc(26px * var(--scale));
	background-image: url(img/btn-options.svg);
	background-size: 100% 100%;
	transition: all .1s ease-out;
}
.label-location
{
	font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:calc(17px * var(--scale));
	color:#fff;
	float:right;
	margin-right:calc(25px * var(--scale));
	margin-top:calc(22.5px * var(--scale));
	transform:translateY(-50%);
}

.banner
{
	margin-bottom:-15px;
	width:100vw;
	height:100vh;

	background: #2f3444;
	background-image: url(img/banner.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat:no-repeat;
}
.banner::before
{
	display:block;
	content:"";

	height: 100%;
	width:100%;

	background-image: url(img/chess.png);
	background-attachment: fixed;
	background-size: 4px 4px; /* 5px 6px for stop flickering */
}
.footer
{
	background: #2f3444;
	font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
	padding:25px 25px 10px 25px;
}
.label-bottomright
{
	font-size:calc(13px * var(--scale));
	color:white;
	float:right;
	margin-right:-10px;
	margin-top:calc(-15px * var(--scale));
}
.label-footer
{
	font-size:calc(16px * var(--scale));
	color:white;
	margin-left:30px;
	margin-bottom:10px;
}
.footer-splitter
{
	width:200px;
	background:#fff1;
	height:2px;
	margin-left:30px;
	margin-bottom:10px;
}

.sidebar
{
	position:fixed;
	left:calc(-250px * var(--scale) - 3px);
	top:0;
	height:100vh;
	background: #f5f5f5;
	width:calc(250px * var(--scale));

	box-shadow: 2px 0 5px rgba(0,0,0,.3);

	border-right:3px solid #44bbff;
	font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
	overflow:hidden;

	--extra:1.6;

	transition: left .5s cubic-bezier(0.1, 0.8, 0.1, 1.0);
}
.sidebar:before
{
	content:'';
	background:#2299dd;

	display:inline-block;
	width:100%;
	height:calc(45px * var(--scale) * var(--extra));
	margin-bottom:calc(20px * var(--scale));

	transition: height .06s ease-out;
}
.label-sidebar
{
	font-size:calc(16px * var(--scale));
	color:#222;
}
.label-sidebar a
{
	padding-top:calc(10px * var(--scale));
	padding-bottom:calc(10px * var(--scale));
	padding-left:calc(30px * var(--scale));
	display: table;
	width: 100%;
}
.label-sidebar:hover
{
	background:#eee;
}
.sidebar-splitter
{
	width:calc(195px * var(--scale));
	background:#0001;
	height:2px;
	margin-left:calc(30px * var(--scale));
	margin-top:calc(5px * var(--scale));
	margin-bottom:calc(5px * var(--scale));
}
.sidebar-hint
{
	font-size:calc(11px * var(--scale));
	color:#bbb;
	position:absolute;
	left:calc(15px * var(--scale));
	bottom:calc(15px * var(--scale));
}

.top-logo
{
	position:absolute;
	top:0;
	left:9vw;
	width:40vw;
	height:95vh;

	background-image: url(img/logo-top.svg);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
.upic-mh
{
	width:210px;
	height:210px;
	margin-left:50%;
	transform: translateX(-50%);

	background-image: url(img/mh.jpg);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	border:3px solid white;
	border-radius:105px;

	box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.contactus
{ }
.nametag
{
	margin-top:20px;

	font-size:calc(28px * var(--scale));
	font-family: DejaVu Sans, Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight:100;
	color:#3f7484;
}

.container-partners
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	margin-top:50px;
	width:100vw;

	background: #eee;
}
.partner-logo
{
	width:240px;
	height:130px;
	margin:30px;

	background-position:center center;
	background-size:contain;
	background-repeat:no-repeat;
}

.icon
{
	position:relative;
	padding-left:calc(32px * var(--scale));
	padding-top:calc(5px * var(--scale));
	padding-bottom:calc(5px * var(--scale));
	margin-right:calc(18px * var(--scale));

	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
.floating-hint
{
	position:fixed;
	bottom:50px;
	left:50px;
	font-family: DejaVu Sans, Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:12px;
	padding:7px 15px;
	background:gold;
	border-radius:5px;
	border:2px solid orange;
	box-shadow: 0 2px 3px rgba(0,0,0,.2);
	animation: pulse .5s infinite;

	visibility:hidden;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .85;
  }
  100% {
    opacity: 1;
  }
}