@media only screen and (min-width: 1200px) {
   .container {max-width: 1600px;}
 }

@media only screen and (max-device-width: 480px) {
   .show-mobile {
      display: block;
   }
   .hide-mobile {
      display: none;
   }
   
   .signal-img {
      height: 28px;
      width:28px;
   }
   
   .sunrise-img {
      height: 32px;
      width:32px;
   }   
   
   .sunset-img {
      height: 32px;
      width:32px;
   }
   
   .led-img {
      height: 32px;
      width:32px;
   }
   
   .warning-row {
      background: #70AE6E;	  
   }
   
   .warning-content {
	   color: rgb(0, 0, 0);
	   font-weight: bold;
	   font-size: 14px;
   }

   .date-time-content {
      color: rgb(0, 0, 0);
      font-weight: bold;
      font-size: 16px;	  
   }

   .local-date-time {
      color: rgb(194, 194, 194);
      font-weight: bold;
      font-size: 14px;	  
   }
   
}

@media only screen and (min-device-width: 481px) {
   .show-mobile {
      display: none;
   }
   .hide-mobile {
      display: block;
   }	 

   .signal-img {
      height: 28px;
      width:28px;
   }

   .sunrise-img {
      height: 32px;
      width:32px;
   }   
   
   .sunset-img {
      height: 32px;
      width:32px;
   }
   
   .green-led-img {
      height: 32px;
      width:32px;
   }

   .warning-row {
      height: 36px;	
	  background: #70AE6E;
   }
   
   .section-header {
	   height: 36px;
   }
   
   .warning-content {
	   color: rgb(0, 0, 0);
	   font-weight: bold;
	   font-size: 16px;
   }
   
   .date-time-content {
      color: rgb(0, 0, 0);
      font-weight: bold;
      font-size: 18px;	  
   }

   .local-date-time {
      color: rgb(194, 194, 194);
      font-weight: bold;
      font-size: 16px;	  
   }
}

body {
	
   font-family: Arial;
   
   margin-left: 5px;
   margin-right: 5px;   
   
   padding: 20px 0;
   
}

.about-text {
	color: #000000;
	font-size: 18px;
	font-weight: 300;
}

.box {
   background: #fff;
   border-radius: 4px;
   padding-bottom: 100%;
}

.row-flex {
   display: flex;
   flex-wrap: wrap;
}

[class*="col-"] {
	margin-bottom: 30px;
}

.content {
	height: 100%;
	padding: 15px 15px 15px 15px;
	color: #fff;
}

.centre-item {
	text-align: center;
}

.margin-bottom-margin {
	margin-bottom: 10px; 
}

.current-weather-colour {
	background: #917C78;
	color: #FFF;
}

.web-cam-colour {
	background: #ACB7AE;
	color: #FFF;
}

.temperature-colour {
	background: #6B7A8F;
	color: #FFF;
}

.humidity-colour {
	background: #558C86;
	color: #FFF;
}

.precipitation-colour {
	background: #BCCBDE;
	color: #FFF;
}

.wind-colour {
	background: #BC986A;
	color: #FFF;
}

.barometric-pressure-colour {
	background: #7A9D96;
	color: #FFF;
}

.solar-colour {
	background: #E27D60;
	color: #FFF;
}

.uv-colour {
	background: #F7882F;
	color: #FFF;
}

.ground-colour {
	background: #8D8741;
	color: #FFF;
}

.air-quality-colour {
	background: #659DBD;
	color: #FFF;
}

.indoor-colour {
	background: #DCC7AA;
	color: #FFF;
}

.cloud-colour {
	background: #CAE4DB;
	color: #FFF;
}

.visibility-colour {
	background: #8E8E90;
	color: #FFF;
}

.metar-edinburgh {
	background: #05386B;
	color: #FFF;
}

.diagram-colour {
	background: #D8D8D8;
	color: #FFF;
}

.vp2-status {
	background: #917C78;
	color: #FFF;
}

.vue-status {
	background: #8E8E90;
	color: #FFF;
}

.wll-status {
	background: #DEC087;
	color: #FFF;
}

.status-banner {
	background: #000000;
	color: #FFF;
}

.alert-colour {
	background: #70AE6E;
	color: #000000;
}

.metar-status {
	background: #7A9D96;
	color: #FFF;
}

.met-office-colour {
	background: #2A2A2A;
	color: #FFF;
}

.bbc-colour {
	background: #067EB3;
	color: #FFF;
}

.forecast-colour {
	background: #FFFFFF;
	color: #000;
}

.disclaimer-colour {
	background: #CD5554;
	color: #000;
}

.span-link {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
}

.content h3 {
	margin-top: 0px;
	font-weight: 300px;
	text-align: left;
}

.content a {
	color: #FFF;
}

.about-text a {
	color: #000;
}

.obs {
	margin-top: 0px;
	margin-bottom: 0px;
}

.primary-values {
	font-size: 64px;
	font-weight: 600px;
}

.primary-units {
	font-size: 24px;
}

.chart {
	width: 100%;
	min-height: 450px;
}