@font-face {
    font-family: 'weather';
    src: url('fonts/artill_clean_icons-webfont.eot');
    src: url('fonts/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/artill_clean_icons-webfont.woff') format('woff'),
         url('fonts/artill_clean_icons-webfont.ttf') format('truetype'),
         url('fonts/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}


body{
	padding-top: 5px;
}

a {
  color: #333;
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.75em;
  line-height: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-style: normal;
    color: #222222;
    text-rendering: optimizeLegibility;
    margin-top: 0.2em;
    margin-bottom: 0.5em;
    line-height: 1.2125em;
}
#logo {
		position: absolute;
    cursor: pointer;
    opacity: .6;
    top: 10px;
    right: 15px;
    width: 100px;
    height: 100px;
    z-index: 10000;
    -webkit-transition: all ease-out 3s;
    -moz-transition: all ease-out .3s;
    -o-transition: all ease-out .3s;
    transition: all ease-out .3s;
}
#logo:hover{
    opacity: 1;
}
.panel hr{
	border:solid #ccc;
	border-width: 1px 0 0;
	clear: both;
	margin: 1.25em 0 1.1875em;
	height: 0;
}

#today{
	float: left;
	position: relative;
	padding: 0 10px;
	height: 110px;
	line-height: 2em;
	text-align:center;
	font-size:0.75em;
}

.day{
	color:orangered;
	font-size: 3em;
	margin-top:6px;
	display:inline-block;
}

#clockContainer{
	float: left;
	position:relative;
  width: 100px;
}
#clock{
	max-height: 100px;
}

#ticks, #hourhand,#minutehand{
	stroke-width: 2px;
}

#secondhand {
	stroke-width: 1;
}

#weather{
	float: left;
	vertical-align: top;
	margin-left: 10px;
	text-align: center;
}
#weather i {
  color: #ccc;
  font-family: weather;
  font-size: 60px;
  font-weight: normal;
  font-style: normal;
  line-height: 1.0;
  text-transform: none;
}
#weather h4{
	color: #666;
}
#weather span{
	display:block;
	font-size: 12px;
	font-weight: normal;
	margin-top: -15px;
}
#weather strong{
	display:block;
	margin-top: -8px;
	font-size: 12px;
}

.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }

.hide {display:none;}
.visuallyhidden{display:none;}
.news {line-height:1em;}

#spinner  {
  display: inline-block;
  margin-left: 10px;
  width: 20px;
  height: 20px;
  border: solid 3px transparent;
  border-top-color: #ccc;
  border-left-color: #ccc;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  -moz-animation: pace-spinner 400ms linear infinite;
  -ms-animation: pace-spinner 400ms linear infinite;
  -o-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}

.linkdetails{
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.subrdt {font-size:12px;}

.grid-margin-y>.cell {
  margin-top: .44rem;
}

.accordion-toggle {cursor: pointer;}
.accordion-content{
	display: none;
	padding: 0;
	border: none !important;
	background-color: transparent;
}
.accordion-content.default {display: block;}

/* Panels */
.panel, .panel2, .panel3, .panel4 {
  border-style: solid;
  border-width: 1px;
  border-color: #d9d9d9;

  padding: 1.25em;
  background: #ddd; }
  .panel > :first-child {
    margin-top: 0; }
  .panel > :last-child {
    margin-bottom: 0; }
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p {
    color: #333333; }
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
    line-height: 1;
    margin-bottom: 0.625em; }
    .panel h1.subheader, .panel h2.subheader, .panel h3.subheader, .panel h4.subheader, .panel h5.subheader, .panel h6.subheader {
      line-height: 1.4; }
  .panel.callout {
    border-style: solid;
    border-width: 1px;
    border-color: #2284a1;
    margin-bottom: 1.25em;
    padding: 1.25em;
    background: #ccc;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; }
    .panel.callout > :first-child {
      margin-top: 0; }
    .panel.callout > :last-child {
      margin-bottom: 0; }
    .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6, .panel.callout p {
      color: white; }
    .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6 {
      line-height: 1;
      margin-bottom: 0.625em; }
      .panel.callout h1.subheader, .panel.callout h2.subheader, .panel.callout h3.subheader, .panel.callout h4.subheader, .panel.callout h5.subheader, .panel.callout h6.subheader {
        line-height: 1.4; }
.panel.radius {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.panel2{
	background: #f2f2f2;
}
.panel3{
	background: #ddeeff;
}
.panel4{
	background: #fff;
	border-style: none;
}

.panel:hover, .panel2:hover{
	background-color:#E9E9E3;
}
.panel3:hover{  background-color:#D5E1E6; }

.panel, .panel2, .panel3, .panel4 {
	min-height: 250px;
	-webkit-transition: background-color .4s ease-out;
	-moz-transition: background-color .4s ease-out;
	-ms-transition: background-color .4s ease-out;
	-o-transition: background-color .4s ease-out;
	transition: background-color .4s ease-out;
}

#dd{font-size:13px; margin-bottom:10px;z-index:9999;}
	header{
		height: 120px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		margin-bottom: 15px;
		}

	.wrapper-dropdown-5 {
		position: relative;
		width: 100%;
		margin: 0 auto;
		padding: 5px 5px;
		background: #fff;
		border-radius: 0;

		cursor: pointer;
		outline: none;
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}

	.wrapper-dropdown-5:after { /* Little arrow */
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		top: 50%;
		right: 15px;
		margin-top: -3px;
		border-width: 6px 6px 0 6px;
		border-style: solid;
		border-color: #4cbeff transparent;
	}

	.wrapper-dropdown-5 .dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
    width: 100%;
    margin-left: 0;
		background: #fff;
		border-radius: 0 0 2px 2px;
		border: 1px solid rgba(0,0,0,0.2);
		border-top: none;
		border-bottom: none;
		list-style: none;
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
		max-height: 0;
		overflow: hidden;
	}

	.wrapper-dropdown-5 .dropdown li {
		padding: 0;
	}

	.wrapper-dropdown-5 .dropdown li a {
		display: block;
		text-decoration: none;
		color: #333;
		padding: 4px 4px;
		transition: all 0.3s ease-out;
		border-bottom: 1px solid #e6e8ea;
	}

	.wrapper-dropdown-5 .dropdown li:last-of-type a {
		border: none;
	}

	.wrapper-dropdown-5 .dropdown li i {
		margin-right: 5px;
		color: inherit;
		vertical-align: middle;
	}

	.wrapper-dropdown-5 .dropdown li:hover a {
		color: #fff;
		background: #57a9d9;
	}

	.wrapper-dropdown-5.active {
		border-radius: 0 0;
		background: #333;
		box-shadow: none;
		border-bottom: none;
		color: white;
	}

	.wrapper-dropdown-5.active:after {
		border-color: #82d1ff transparent;
	}

	.wrapper-dropdown-5.active .dropdown {
		border-bottom: 1px solid rgba(0,0,0,0.2);
		max-height: 400px;
	}

@media only screen and (max-width: 641px) {
  .mobile-hide {
    display: none;
	}
  .mobile-show {
    display: show;
  }
  #weather{
	margin-top:120px;
	margin-left:-230px;
  }
}

@media only screen and (max-width: 767px) {
	#weather{float:left; width:100%; overflow:hidden;}
}

@media only screen and (min-width: 768px){
	.panel, .panel2, .panel3, .panel4 {

	}
	h4{
		font-size: 1.4em;
	}
}