:root{	
	--cp:#263238;
	--cpd:#000a12;
	--cpl:#4f5b62;
	--cs:#64dd17;
	--csd:#1faa00;
	--csl:#9cff57;
	--cp-text:#ffffff;
	--cs-text:#000000;
	--main-background: #004b59;
	--cp-placeholder:#b1b1b1;
	--radio-color:var(--cs);
}
.cp{
	background-color: var(--cp);
	color:var(--cp-text);
}
.cpd{
	background-color: var(--cpd);
	color:var(--cp-text);
}
.cpl{
	background-color: var(--cpl);
	color:var(--cp-text);
}
.cs{
	background-color: var(--cs);
	color:var(--cs-text);
}
.csd{
	background-color: var(--csd);
	color:var(--cs-text);
}
.csl{
	background-color: var(--csl);
	color:var(--cs-text);
}
.cp-hover:hover{
	background-color: var(--cp)!important;
	color:var(--cp-text)!important;
}
.cpd-hover:hover{
	background-color: var(--cpd)!important;
	color:var(--cp-text)!important;
}
.cpl-hover:hover{
	background-color: var(--cpl)!important;
	color:var(--cp-text)!important;
}
.cs-hover:hover{
	background-color: var(--cs)!important;
	color:var(--cs-text)!important;
}
.csd-hover:hover{
	background-color: var(--csd)!important;
	color:var(--cs-text)!important;
}
.csl-hover:hover{
	background-color: var(--csl)!important;
	color:var(--cs-text)!important;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}

body, html {
  height: 100%;
  line-height: 1.8;
  font-size: medium;
  scroll-behavior: smooth;
  background-color: var(--cpd);
  color: var(--cp-text);
  background-image: url("../img/greenSmoke1_colormatched3.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.material-icons{
    vertical-align:-14%;
}

.inputfield{
	border-color: var(--cs);
	background-color: var(--cpl);
	color:var(--cp-text);
}
.inputfield::placeholder{
	color:var(--cp-placeholder);	
}
.radio{
	font-size: 1.2em;
	color: var(--radio-color);
	display: grid;
	grid-template-columns: min-content auto;
	grid-gap: 0.5em;
}
.radio__input{
	display: flex;
}
.radio__input input{
	opacity: 0;
	width: 0;
	height: 0;	
}
.radio__control{
	display: block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	border: 0.1em solid currentColor;
	transform: translateY(-0.05em);
}
.radio__input input:checked + .radio__control {
	background: radial-gradient(currentcolor 50%, rgba(255, 0, 0, 0) 51%);
}
.radio__label{
	line-height: 1;
}

/* Full height image header */
.introimg-1 {
  background-position: center;
  background-size: cover;
  background-image: url("../img/intro_mirror_right.jpg");
  min-height: 100%;
}
.w3-bar .w3-button {
  padding: 16px;
}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
.logo{
	width: 12%;
	max-width: 250px;
	margin: 0em;
	margin-left: 1.5%;
	padding: 0.5em;
	border: 0em;
	position: absolute;
	z-index: 1000;
	min-height: 58px;
	min-width: 114px;
}
.logo_img{
	margin: 0em;
	padding: 0em;
	border: 0em;
	width: 100%;
	height: 100%;
	opacity: 100%;
	min-height: 58px;
	min-width: 94px;
}
.logo_link{
	z-index: 1000;
}
.ico-menu{
	height: 1em;
	width: 1em;
	position: absolute;
	z-index: 100;
	margin: 0em;
	padding: 0em;
	border: 0em;
	_margin-right: 1em;
}
.head_box{
	min-height: 5em;
	width: 100%;
	background-color: blue;
}
#myLogo{
	transition-property: display;
	transition-duration: 0.5s;
}
#mySidebar{
	z-index:1001;
}
#myVideo {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	filter:brightness(50%)
}
.videobanner{
	color: var(--cp-text);
	background-color: rgba(0,0,0,0.5);
	width: 80%;
	height: 10%;
	position: fixed;
	padding: 0.5em;
	border-top: 0.25em;
	border-bottom: 0.25em;
	border-left: 0;
	border-right: 0;
	border-color: var(--cpl);
	border-style: solid;
	white-space: nowrap;
}

.leftmargin{
	margin-left: clamp(150px, 14%, 350px);
}

.rightmargin{
	margin-right: clamp(150px, 14%, 350px);
}

.contentpadding{
	padding: 1em;
}

.vcenter{
	margin-top:auto;
	margin-bottom:auto;
}

/* Link Animation */
a.clink{
    position: relative;
    color: #ffffff;
    text-decoration: none;
	font-weight:bold;
}
a.clink:hover{
    color: var(--cs);
}
a.clink:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--cs);
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s; 
}
a.clink:hover:before{
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.spacer{
	background-color: rgba(0,0,0,0);
}