body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
  height: 100%;
  color: #777;
  line-height: 1.8;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

.navIcon { 
	/*height:24px; */
	width:5vw;
	/*filter: invert(44%) sepia(0%) saturate(1671%) hue-rotate(150deg) brightness(105%) contrast(92%); /* https://codepen.io/sosuke/pen/Pjoqqp */
	/*filter: invert(57%) sepia(13%) saturate(4855%) hue-rotate(3deg) brightness(107%) contrast(103%);	/* MTRL orange*/
}
/*@media screen and (max-width: 600px) { .navIcon { height:60%; width:60%; } }*/

.showIcon { 
	height: 150px;
	width: 150px;
/*	filter: invert(57%) sepia(13%) saturate(4855%) hue-rotate(3deg) brightness(107%) contrast(103%);	/* MTRL orange*/
}

.MTRLcolour { 
	color:#EF8C39;
	/*filter: invert(57%) sepia(13%) saturate(4855%) hue-rotate(3deg) brightness(107%) contrast(103%);	/* MTRL orange*/
	width:24px;
	height:24px;
}

.MTRLtextColour {
	/*color:#EF8C39;*/
}

figure {
	width:60px; float:left; margin:0px; text-align:center; padding:0px	
}

.loginIcons { 
	color:#000000;
	/* filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(61deg) brightness(101%) contrast(101%);	/* White*/
	/* filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(44deg) brightness(92%) contrast(103%);		/* Black */
	width:30px;
	height:30px;
}

.w3-ul li{
	border-bottom:none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #EF8C39;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #EF8C39;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #EF8C39;
}

.crosshairs:before, .crosshairs:after {
  content: '';
  position: absolute;
  top: 30%;
  bottom: 30%;
  left: 30%;
  right: 30%;
  z-index: 999;
  pointer-events: none;
}
.crosshairs:before {
  bottom: 50%;
  border-bottom: 2px #f90 solid;
}
.crosshairs:after {
  right: 50%;
  border-right: 2px #f90 solid;
}

#spacerBar {
	height:50px;	
}
#mainNavbar {
	height:6vw;
  font-size:2vw;
}
#infoBar {
	height:50px; /* 150PX */
}
#mainContainer {
	height: calc(100vh - (43px + 19px)); /* mainNavbar + padding */
	overflow:auto;
}
#mapContainer {
	height: calc(100vh - (50px + 50px + 19px)); /* spacerBar + infoBar + padding*/
}
#bottomBar {
	height: 19px;
}

.donutContainer {
    position: relative;
    /*float: left;*/
}
.donutContainer h4 {
    text-align:center;
    position: absolute;
    line-height: 60px;
    width: 100%;
}
svg {
    transform: rotate(-90deg);
}
.donut {
  stroke-dasharray: 188;		/* pi*2r ==> r is in pixels */
  -webkit-animation: donut 1s ease-out forwards;
  animation: donut 1s ease-out forwards;
}
@-webkit-keyframes donut {
  from {
    stroke-dashoffset: 188;
  }
}
@keyframes donut {
  from {
    stroke-dashoffset: 188;
  }
}

.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 26px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: #EF8C39;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}