@font-face {
  font-family: Anton;
  src: url(fonts/Anton.ttf);
}
@font-face {
  font-family: RobotoLight;
  src: url(fonts/RobotoLight.ttf);
}
.mod-jux-weather #weather {
  height: 675px;
  width: 100%;
}
.skg-weather {
  position: relative;
  padding: 0px;
  margin: 0px;
  /*  overflow-x: hidden;
  overflow-y: auto;*/
  overflow: hidden;
}
.skg-weather,
.skg-weather a,
.skg-weather td,
.skg-weather div,
.skg-weather h1,
.skg-weather h2,
.skg-weather h3,
.skg-weather span,
.skg-weather p,
.skg-weather th,
.skg-weather select,
.skg-weather option,
.skg-weather input,
.skg-weather textarea {
  font-family: Arial, Helvetica, sans-serif;
}
.skg-weather,
.skg-weather td,
.skg-weather div,
.skg-weather h1,
.skg-weather h2,
.skg-weather h3,
.skg-weather span,
.skg-weather p,
.skg-weather th,
.skg-weather select,
.skg-weather option,
.skg-weather input,
.skg-weather textarea {
  font-size: 16px;
}
.skg-weather h1 {
  font-size: 24px;
  font-weight: normal;
  margin: 2px 0px 5px 0px;
  padding: 0px;
  width: 100%;
  display: block;
}
.skg-weather h2 {
  color: #555555;
  font-size: 14pt;
  margin: 5px 0px 0px 0px;
}
.skg-weather img {
  border: none;
}
.skg-weather a {
  color: #253484;
  text-decoration: none;
}
.skg-weather a:hover {
  text-decoration: underline;
}
.skg-weather table tr td span,
.mod-jux-weather table tr td {
  color: #fff;
  font-size: 12px;
}
.skg-weather table tr td {
  padding: 0px 10px;
}
/* Detail */
.jse-detail {
  width: 50%;
  position: absolute;
  float: left;
}
.mod-jux-weather #weather .skg-weather p,
.mod-jux-weather ul,
.mod-jux-weather ol {
  margin: 0px;
  line-height: 1.4em;
}
.mod-jux-weather #weather .skg-weather li {
  list-style: none;
}
.mod-jux-weather #weather .skg-weather li.placeholder {
  height: 70px;
  width: 100%;
  font-size: 16px;
}
.skg-weather .jse-detail ul li span {
  font-size: 13px;
  font-family: RobotoLight;
}
.skg-weather .jse-detail ul li td {
  padding: 0px 10px;
}
.jse-detail-right {
  float: right;
}
/* Detail - Content */
.jse-detail-content {
  width: 50%;
  float: right;
  position: absolute;
}
.jse-detail-content-left {
  font-size: 13px!important;
  font-family: RobotoLight!important;
}
.jse-detail-content-right {
  float: right;
  font-size: 13px!important;
  font-family: RobotoLight!important;
}
.jse-detail-content-right #CWinds {
  font-size: 13px!important;
  font-family: RobotoLight!important;
}
.jse-detail-content-right #us {
  font-size: 13px!important;
  font-family: RobotoLight!important;
}
.skg-weather #background {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}
.skg-weather #background img {
  width: 100%;
  height: 100%;
}
.skg-weather #wrapper {
  position: relative;
  width: 98%;
  /*1000px; */
  padding: 1%;
  display: none;
  z-index: 100;
  /*overflow-y: auto;
  overflow-x: hidden;
  height: 630px;
  left: 50%;
  top: 50%;*/
}
.skg-weather #wrapper .content {
  width: 98%;
  position: absolute;
  margin: 1% 1%;
}
.skg-weather #Standard {
  position: relative;
  float: left;
  width: 98%;
  min-height: 360px;
}
.skg-weather #Standard .Standard_bg {
  /*background-color: #E2B92F;*/
  background-color: #054589;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 5px;
  border-radius: 4px;
}
.skg-weather #Standard .Standard_content {
  top: 0px;
  left: 5px;
  width: 100%;
  position: relative;
}
.skg-weather #Standard .Standard_content .temp {
  font-weight: normal;
  /*text-shadow: 0 0 2px #fff;*/
  float: left;
  line-height: 100%;
}
.skg-weather #Standard .Standard_content .locatie {
  font-size: 34px;
  font-weight: normal;
  /*text-shadow: 0 0 2px #fff;*/
  clear: both;
  line-height: 30px;
}
.skg-weather #Standard .Standard_content .locatie img {
  width: 20px;
  height: 20px;
}
.skg-weather #Standard .Standard_content .uitleg {
  position: relative;
  font-size: 16px;
  font-weight: normal;
  /*custom*/
  /*text-shadow: 0 0 1px #eee;*/
  /*custom*/
  /*width: 240px;*/
}
.skg-weather #Standard .Standard_content .wind {
  position: relative;
  font-size: 16px;
  font-weight: normal;
  /*text-shadow: 0 0 1px #eee;*/
  float: left;
  clear: right;
}
.skg-weather #chart {
  margin: 0px 0px 0px -20px;
  width: 590px;
  height: 230px;
}
.skg-weather #chart1 {
  width: 49%;
  height: 175px;
  float: left;
  clear: right;
}
.skg-weather #plot {
  height: 80px;
}
.skg-weather .icon24 {
  margin: 0 0 0 30px;
  float: left;
  width: 108px;
  height: 108px;
}
.skg-weather .t24 {
  font-size: 12px;
  float: left;
  margin-left: 30%;
  width: 230px;
  line-height: 1.5em;
  position: relative;
}
.skg-weather .temp24 {
  font-size: 20px;
  font-weight: normal;
  margin: 20px 0px 0px 0px;
  /*text-shadow: 0 0 1px #EEE;*/
  clear: right;
  font-family: robotoLight;
}
.skg-weather .Standard_set {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 4px;
  right: 1%;
}
.skg-weather .Standard_set img {
  width: 20px;
  height: 20px;
}
.skg-weather #text {
  position: absolute;
  /*height: 60%;*/
  overflow: visible;
  font-size: 14px;
  width: 100%;
  margin-top: 10px;
}
.skg-weather #text table {
  float: left;
  padding-left: 20px;
  width: 49%;
}
.skg-weather #vooruitzichten {
  float: left;
  overflow: hidden;
  width: 100%;
}
.skg-weather #vooruitzichten .item {
  float: left;
  margin: 0px 5px;
  background-color: #FF3B0F;
}
.skg-weather #vooruitzichten .datum {
  text-align: left;
  padding-top: 10px;
  padding-bottom: 10px;
}
.skg-weather #vooruitzichten .weekdag {
  text-transform: capitalize;
  font-family: anton;
  font-size: 18px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 0 10px 0;
}
.skg-weather #vooruitzichten .dag {
  font-size: 12px;
  display: block;
  padding-top: 25px;
  font-family: RobotoLight;
}
.skg-weather #vooruitzichten .icon {
  margin: 10px 0 0 0;
  text-align: center;
}
.skg-weather #vooruitzichten .icon img {
  margin: 0px;
  width: 50%;
}
.skg-weather #vooruitzichten .temp {
  font-size: 18px;
  font-weight: bold;
  margin: -5px 0 0 5px;
}
.skg-weather #vooruitzichten .temp-max {
  font-size: 14px;
  font-weight: bold;
}
.skg-weather #vooruitzichten .temp-min {
  font-size: 12px;
  font-weight: normal;
}
.skg-weather #vooruitzichten .uitleg {
  font-size: 12px;
  font-weight: normal;
  margin: 10px 0 0 5px;
}
.skg-weather #vooruitzichten .neerslag {
  font-size: 12px;
  font-weight: normal;
  margin: 10px 0 0 5px;
}
.skg-weather #vooruitzichten .wind {
  font-size: 12px;
  font-weight: normal;
  margin: 10px 0 20px 5px;
}
.skg-weather #settings {
  position: fixed;
  width: 1000px;
  height: 650px;
  left: 50%;
  top: 30%;
  z-index: 1000;
  display: none;
  font-size: 26px;
}
.skg-weather #settings .milk {
  background-color: #032855;
  opacity: 0.9;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.skg-weather #settings .content {
  position: absolute;
  padding: 5px;
  height: 100%;
  width: 50%;
  z-index: 1000;
  font-size: 24px;
  right: 75%;
  bottom: 160px;
}
.skg-weather #settings .content #delcitys {
  width: 100% !important;
}
@media screen and (max-width: 1000px) {
  .skg-weather #settings .content {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .skg-weather #settings .content {
    width: 50%;
  }
  .skg-weather #settings .content input {
    font-size: 24px !important;
  }
  .skg-weather #NowCityList {
    font-size: 18px !important;
  }
  .skg-weather #settings .content #delcitys {
    width: 100% ;
  }
}
@media screen and (max-width: 480px) {
  .skg-weather #settings .content {
    width: 25%;
    right: 88%;
  }
  .skg-weather #settings .content input {
    font-size: 20px !important;
  }
  .skg-weather #NowCityList {
    font-size: 16px !important;
  }
  .skg-weather #settings .content #delcitys {
    width: 100% ;
  }
}
.skg-weather #settings .content input {
  border: solid 2px #0F83FF;
  padding: 5px 0px 5px 15px;
  width: 100%;
  height: 50px;
  border-radius: 4px;
  font-size: 32px;
  color: #ccc;
}
.skg-weather #settings .content #unit {
  font-size: 24px;
  padding-bottom: 20px;
}
.skg-weather #settings .content #unit input {
  width: 24px;
  height: 24px;
  margin: 4px;
}
.skg-weather #settings .content #delcitys {
  position: absolute;
  width: 500px;
}
.skg-weather #settings .content #delcitys .milk {
  background-color: #032855;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 0 0 6px 6px;
}
.skg-weather a.nowcitylist {
  color: #aaa;
  background: #333;
}
.skg-weather a.nowcitylist:link {
  color: #fff;
  background: #333;
}
.skg-weather a.nowcitylist:visited {
  color: #fff;
  background: #333;
}
.skg-weather a.nowcitylist:hover {
  color: #fff;
  background: #333;
}
.skg-weather #NowCityList {
  padding: 0 0 10px 0;
  font-size: 20px;
  line-height: 100%;
  margin: 0;
  position: relative;
}
.skg-weather #NowCityList a {
  padding: 1px 7px;
  font-size: 16px;
}
.skg-weather #NowCityList li {
  position: relative;
  padding: 7px;
  list-style-type: none;
}
.skg-weather #NowCityList li span {
  display: block;
  position: absolute;
  padding: 7px;
  background: #333;
  color: #666666;
}
.skg-weather #NowCityList li.controloff span {
  left: -5000px;
  right: auto;
  top: 0px;
}
.skg-weather #NowCityList li.controlon span {
  left: auto;
  right: 0px;
  top: 0px;
}
.skg-weather #NowCityList li.controlon {
  background-color: #666;
  color: #ffffff;
}
.skg-weather #buienradar {
  float: left;
  width: 390px;
  height: 370px;
  border-radius: 4px;
  background-color: #000084;
  opacity: 0.9;
}
.skg-weather #buienradar .image {
  width: 390px;
  height: 336px;
  overflow: hidden;
  text-align: center;
  border-radius: 4px;
}
.skg-weather #buienradar .options {
  text-align: center;
  font-weight: normal;
  margin: 4px 0px 4px 0px;
}
.skg-weather #buienradar .options a {
  color: #fff;
  font-size: 15px;
  line-height: 17px;
  margin: 0px 8px;
  text-decoration: none;
}
.skg-weather #buienradar .selected {
  font-weight: bold;
  font-size: 17px !important;
}
.skg-weather #buienradar .over {
  background-color: #ddd;
}
.skg-weather #map_canvas {
  position: relative;
  width: 100%;
  height: 100%;
}
.skg-weather .transparency {
  background: #000;
  opacity: 0.50;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.5em 0 0 0.5em;
}
.skg-weather #map-legend {
  text-align: center;
  color: #fff;
}
.skg-weather #map-legend img {
  width: 100%;
  position: relative;
}
.skg-weather #map-legend canvas {
  margin-bottom: 25px;
}
.skg-weather #map-legend #map-update-info {
  position: relative;
  margin: .25em 0 0 .5em;
  float: right;
  -webkit-box-direction: normal;
  box-direction: normal;
  font-size: 14px;
}
.skg-weather #map-legend #tooltip {
  position: absolute;
  top: -32px;
  font-size: 14px;
  font-weight: bold;
  /*text-shadow: 2px 3px 3px#000;*/
  padding: 8px;
  border-radius: 4px;
}
.skg-weather #bron {
  position: absolute;
  bottom: 0px;
  right: 10px;
}
.skg-weather #copyright {
  font-size: 10px;
}
.skg-weather #copyright a {
  color: #000;
}
.skg-weather #logo {
  width: 100%;
  text-align: left;
  display: none;
}
.skg-weather #logo img {
  border: none;
  margin: 0px 0px 5px 0px;
}
/* -------------- Loading start-------------- */
.skg-weather div.spinner {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin: 8px;
}
.skg-weather div.spinner div {
  width: 12%;
  height: 26%;
  background: #000;
  position: absolute;
  left: 44.5%;
  top: 37%;
  opacity: 0;
  animation: fade 1s linear infinite;
  -webkit-animation: fade 1s linear infinite;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -webkit-box-shadow: 0 0 4px #fff;
  box-shadow: 0 0 4px #fff;
}
.skg-weather div.spinner div.bar1 {
  -webkit-transform: rotate(0deg) translate(0, -142%);
  transform: rotate(0deg) translate(0, -142%);
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.skg-weather div.spinner div.bar2 {
  -webkit-transform: rotate(30deg) translate(0, -142%);
  transform: rotate(30deg) translate(0, -142%);
  -webkit-animation-delay: -0.9167s;
  animation-delay: -0.9167s;
}
.skg-weather div.spinner div.bar3 {
  -webkit-transform: rotate(60deg) translate(0, -142%);
  transform: rotate(60deg) translate(0, -142%);
  -webkit-animation-delay: -0.833s;
  animation-delay: -0.833s;
}
.skg-weather div.spinner div.bar4 {
  -webkit-transform: rotate(90deg) translate(0, -142%);
  transform: rotate(90deg) translate(0, -142%);
  -webkit-animation-delay: -0.75s;
  animation-delay: -0.75s;
}
.skg-weather div.spinner div.bar5 {
  -webkit-transform: rotate(120deg) translate(0, -142%);
  transform: rotate(120deg) translate(0, -142%);
  -webkit-animation-delay: -0.667s;
  animation-delay: -0.667s;
}
.skg-weather div.spinner div.bar6 {
  -webkit-transform: rotate(150deg) translate(0, -142%);
  transform: rotate(150deg) translate(0, -142%);
  -webkit-animation-delay: -0.5833s;
  animation-delay: -0.5833s;
}
.skg-weather div.spinner div.bar7 {
  -webkit-transform: rotate(180deg) translate(0, -142%);
  transform: rotate(180deg) translate(0, -142%);
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.skg-weather div.spinner div.bar8 {
  -webkit-transform: rotate(210deg) translate(0, -142%);
  transform: rotate(210deg) translate(0, -142%);
  -webkit-animation-delay: -0.41667s;
  animation-delay: -0.41667s;
}
.skg-weather div.spinner div.bar9 {
  -webkit-transform: rotate(240deg) translate(0, -142%);
  transform: rotate(240deg) translate(0, -142%);
  -webkit-animation-delay: -0.333s;
  animation-delay: -0.333s;
}
.skg-weather div.spinner div.bar10 {
  -webkit-transform: rotate(270deg) translate(0, -142%);
  transform: rotate(270deg) translate(0, -142%);
  -webkit-animation-delay: -0.25s;
  animation-delay: -0.25s;
}
.skg-weather div.spinner div.bar11 {
  -webkit-transform: rotate(300deg) translate(0, -142%);
  transform: rotate(300deg) translate(0, -142%);
  -webkit-animation-delay: -0.1667s;
  animation-delay: -0.1667s;
}
.skg-weather div.spinner div.bar12 {
  -webkit-transform: rotate(330deg) translate(0, -142%);
  transform: rotate(330deg) translate(0, -142%);
  -webkit-animation-delay: -0.0833s;
  animation-delay: -0.0833s;
}
@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.25;
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.25;
  }
}
/* -------------- Loading end-------------- */
/* 
 * umbrUI range slider by @simurai
*/
/* -------------- Range Slider -------------- */
.skg-weather input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  /* Remove Safari default */
  outline: none;
  width: 250px;
  height: 5px;
  border-radius: 1px;
  position: relative;
  background-color: #000;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: ew-resize;
}
.skg-weather input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  /* Remove Safari default */
  position: relative;
  z-index: 1;
  width: 13px;
  height: 20px;
  border-radius: 3px 6px ;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #262626), color-stop(0.16, #383838), color-stop(0.18, #4d4d4d), color-stop(0.2, #424242), color-stop(0.42, #1f5c7a), color-stop(0.44, #262626), color-stop(0.46, #00aaff), color-stop(0.54, #00aaff), color-stop(0.56, #262626), color-stop(0.58, #1f5c7a), color-stop(0.8, #424242), color-stop(0.82, #4d4d4d), color-stop(0.84, #383838), color-stop(1, #262626));
  -webkit-box-shadow: inset rgba(255, 255, 255, 0.15) 0 1px 0px, #2b2b2b 0 2px 0px, #262626 0 4px 0px, #212121 0 1px 0px, rgba(0, 0, 0, 0.5) 0 4px 5px;
  -webkit-transform: translateY(-2px);
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 0.3)));
}
.skg-weather input[type=range]:hover::-webkit-slider-thumb {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #262626), color-stop(0.16, #383838), color-stop(0.18, #4a4a4a), color-stop(0.2, #404040), color-stop(0.42, #1e5976), color-stop(0.44, #262626), color-stop(0.46, #1791cf), color-stop(0.54, #1791cf), color-stop(0.56, #262626), color-stop(0.58, #1e5976), color-stop(0.8, #404040), color-stop(0.82, #4a4a4a), color-stop(0.84, #383838), color-stop(1, #262626));
}
.skg-weather input[type=range]:active::-webkit-slider-thumb {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #262626), color-stop(0.16, #383838), color-stop(0.18, #4d4d4d), color-stop(0.2, #424242), color-stop(0.42, #4d4d4d), color-stop(0.44, #737373), color-stop(0.46, #00293d), color-stop(0.54, #00293d), color-stop(0.56, #737373), color-stop(0.58, #4d4d4d), color-stop(0.8, #424242), color-stop(0.82, #4d4d4d), color-stop(0.84, #383838), color-stop(1, #262626));
}
.skg-weather input[type=range]:active {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #5ebeed), color-stop(0.3, #083045), color-stop(0.5, #000000), color-stop(0.7, #083045), color-stop(1, #5ebeed));
  -webkit-box-shadow: inset #000000 1px 1px 1px, inset #000000 -1px -1px 1px;
}
/* 
 * umbrUI checkboxes by @simurai
 * Usage: <input type="checkbox" data-icon1="P" data-icon2="v" />   
*/
/* ----------- Checkbox */
.skg-weather input[type=checkbox] {
  -webkit-appearance: none;
  /* Remove Safari default */
  outline: none;
  width: 60px;
  height: 22px;
  position: relative;
  border-radius: 3px;
  background-color: #000;
  -webkit-background-clip: padding-box;
  border: 0;
  border-bottom: 1px solid transparent;
  -webkit-perspective: 100;
}
.skg-weather input[type=checkbox]:before,
.skg-weather input[type=checkbox]:after {
  font: bold 20px/11px Ubuntu;
  text-align: center;
  position: absolute;
  z-index: 1;
  width: 28px;
  height: 15px;
  top: 2px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.skg-weather input[type=checkbox]:before {
  content: attr(data-icon1);
  left: 2px;
  border-radius: 2px 0 0 2px;
}
.skg-weather input[type=checkbox]:after {
  content: attr(data-icon2);
  right: 2px;
  border-radius: 0 2px 2px 0;
}
/* ----------- checked/unchecked */
/* unchecked */
.skg-weather input[type=checkbox] {
  -webkit-border-image: -webkit-gradient(linear, 100% 0%, 0% 0%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0)), color-stop(0.1, rgba(255, 255, 255, 0.05)), color-stop(0.3, rgba(5, 137, 200, 0.4)), color-stop(0.45, rgba(255, 255, 255, 0.05)), color-stop(0.9, rgba(255, 255, 255, 0.1))) 100% 100%;
  background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #000000), color-stop(0.14, #808080), color-stop(0.15, #000000));
  -webkit-box-shadow: inset #000000 -3px 0 1px, inset #000000 0 -3px 5px, inset #000000 0 2px 2px;
}
.skg-weather input[type=checkbox]:after {
  background-image: -webkit-gradient(linear, 70% top, 40% bottom, from(#2b2b2b), to(#1f1f1f));
  border-right: 1px solid transparent;
  -webkit-border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), color-stop(0.2, rgba(255, 255, 255, 0)), color-stop(0.4, rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.05))) 10% 100%;
  -webkit-box-shadow: rgba(0, 0, 0, 0.6) 8px 3px 10px;
  -webkit-transform: rotateY(-20deg) scaleX(0.9) scaleY(1.1) translateX(-4px);
}
/* checked */
.skg-weather input[type=checkbox]:checked {
  -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0)), color-stop(0.1, rgba(255, 255, 255, 0.05)), color-stop(0.3, rgba(5, 137, 200, 0.4)), color-stop(0.45, rgba(255, 255, 255, 0.05)), color-stop(0.9, rgba(255, 255, 255, 0.1))) 100% 100%;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #000000), color-stop(0.14, #808080), color-stop(0.15, #000000));
  -webkit-box-shadow: inset #000000 3px 0 1px, inset #000000 0 -3px 5px, inset #000000 0 2px 2px;
}
.skg-weather input[type=checkbox]:checked:before {
  background-image: -webkit-gradient(linear, 30% top, 60% bottom, from(#2b2b2b), to(#1f1f1f));
  border-left: 1px solid transparent;
  -webkit-border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), color-stop(0.2, rgba(255, 255, 255, 0)), color-stop(0.4, rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.05))) 10% 100%;
  -webkit-box-shadow: rgba(0, 0, 0, 0.6) -8px 3px 10px;
  -webkit-transform: rotateY(20deg) scaleX(0.9) scaleY(1.1) translateX(4px);
}
/* ----------- active/inactve */
/* Active */
.skg-weather input[type=checkbox]:before,
.skg-weather input[type=checkbox]:checked:after {
  color: #00aaff;
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px, #0589c8 0 0 10px;
  -webkit-transform: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#262626));
  -webkit-border-image: none;
  -webkit-box-shadow: none;
  z-index: 2;
  -webkit-box-reflect: below -4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), to(rgba(255, 255, 255, 0.2)));
}
.skg-weather input[type=checkbox]:checked:after {
  color: #f00;
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px, #ff0000 0 0 10px;
}
/* Inactive */
.skg-weather input[type=checkbox]:after,
.skg-weather input[type=checkbox]:checked:before {
  color: #000;
  text-shadow: rgba(255, 255, 255, 0.1) 0 -1px 0;
  -webkit-box-reflect: none;
  z-index: 1;
}
/* ----------- hover */
.skg-weather input[type=checkbox]:hover {
  cursor: pointer;
}
.skg-weather input[type=checkbox]:hover:before {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#303030), to(#262626));
}
.skg-weather input[type=checkbox]:hover:after {
  background-image: -webkit-gradient(linear, 70% top, 40% bottom, from(#292929), to(#1c1c1c));
}
.skg-weather input[type=checkbox]:checked:hover:before {
  background-image: -webkit-gradient(linear, 30% top, 60% bottom, from(#292929), to(#1f1f1f));
}
.skg-weather input[type=checkbox]:checked:hover:after {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#303030), to(#262626));
}
/* Sky */
.skg-weather #sky {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}
/* Sun */
.skg-weather #sun {
  position: absolute;
  float: right !important;
  right: 5%;
  top: 4%;
  margin-top: 0%;
  width: 20%;
  height: 20%;
  -webkit-animation: sunAnimation 12s;
  animation: sunAnimation 12s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  z-index: 2;
}
@-webkit-keyframes sunAnimation {
  0% {
    margin-top: 100%;
  }
  80% {
    margin-top: -5%;
  }
  100% {
    margin-top: 0%;
  }
}
@keyframes sunAnimation {
  0% {
    margin-top: 100%;
  }
  80% {
    margin-top: -5%;
  }
  100% {
    margin-top: 0%;
  }
}
.skg-weather .sun1 {
  width: 100%;
  height: 100%;
  background-color: #EFBA4C;
  border-radius: 50% 50%;
  position: absolute;
}
.skg-weather .sun2 {
  width: 80%;
  height: 80%;
  background-color: #F19E22;
  margin: 10%;
  border-radius: 50% 50%;
  position: absolute;
  -webkit-animation: sunActiveAnimation 5s;
  animation: sunActiveAnimation 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes sunActiveAnimation {
  0% {
    margin: 5%;
    height: 90%;
    width: 90%;
    background-color: #EFA339;
  }
  50% {
    margin: 0%;
    height: 100%;
    width: 100%;
    background-color: #F19E22;
  }
  100% {
    margin: 5%;
    height: 90%;
    width: 90%;
    background-color: #EFA339;
  }
}
@keyframes sunActiveAnimation {
  0% {
    margin: 5%;
    height: 90%;
    width: 90%;
    background-color: #EFA339;
  }
  50% {
    margin: 0%;
    height: 100%;
    width: 100%;
    background-color: #F19E22;
  }
  100% {
    margin: 5%;
    height: 90%;
    width: 90%;
    background-color: #EFA339;
  }
}
/* Moon */
.skg-weather #moon {
  position: absolute;
  float: right!important;
  right: 4%;
  top: 2%;
  margin-top: 0%;
  width: 45%;
  height: 52%;
  -webkit-animation: moonAnimation 9s;
  animation: moonAnimation 9s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  z-index: 3;
}
@-webkit-keyframes moonAnimation {
  0% {
    top: -500px;
  }
  80% {
    top: 40px;
  }
  100% {
    top: 30px;
  }
}
@keyframes moonAnimation {
  0% {
    top: -500px;
  }
  80% {
    top: 40px;
  }
  100% {
    top: 30px;
  }
}
.skg-weather .moon1 {
  width: 100%;
  height: 100%;
  background-color: #FFFBE5;
  border-radius: 50% 50%;
  position: absolute;
}
.skg-weather .moon2 {
  width: 100%;
  height: 100%;
  background-color: #1E1E1E;
  border-radius: 50% 50%;
  position: absolute;
  right: -75px;
  top: -75px;
  z-index: 2;
}
/* Snow */
.skg-weather .snow {
  position: absolute;
  opacity: 0.9;
  z-index: 5;
}
.skg-weather .snowAnimation1 {
  /* Left -> Right */
  left: -100px;
}
@-webkit-keyframes snowAnimation1 {
  0% {
    margin-left: 0%;
  }
  20% {
    margin-left: 20%;
    margin-top: 20%;
  }
  40% {
    margin-left: -10%;
    margin-top: 40%;
  }
  60% {
    margin-left: 10%;
    margin-top: 60%;
  }
  80% {
    margin-left: 0%;
    margin-top: 80%;
  }
  100% {
    margin-left: 30%;
    margin-top: 100%;
  }
}
@keyframes snowAnimation1 {
  0% {
    margin-left: 0%;
  }
  20% {
    margin-left: 20%;
    margin-top: 20%;
  }
  40% {
    margin-left: -10%;
    margin-top: 40%;
  }
  60% {
    margin-left: 10%;
    margin-top: 60%;
  }
  80% {
    margin-left: 0%;
    margin-top: 80%;
  }
  100% {
    margin-left: 30%;
    margin-top: 100%;
  }
}
.skg-weather .snowAnimation2 {
  /* Left <- Right */
  right: -100px;
}
@-webkit-keyframes snowAnimation2 {
  0% {
    margin-left: 0%;
  }
  20% {
    margin-left: -20%;
    margin-top: 20%;
  }
  40% {
    margin-left: 10%;
    margin-top: 40%;
  }
  60% {
    margin-left: -10%;
    margin-top: 60%;
  }
  80% {
    margin-left: 0%;
    margin-top: 80%;
  }
  100% {
    margin-left: -30%;
    margin-top: 100%;
  }
}
@keyframes snowAnimation2 {
  0% {
    margin-left: 0%;
  }
  20% {
    margin-left: -20%;
    margin-top: 20%;
  }
  40% {
    margin-left: 10%;
    margin-top: 40%;
  }
  60% {
    margin-left: -10%;
    margin-top: 60%;
  }
  80% {
    margin-left: 0%;
    margin-top: 80%;
  }
  100% {
    margin-left: -30%;
    margin-top: 100%;
  }
}
.skg-weather .snow {
  background-color: #fff;
  border-radius: 50% 50%;
}
/* Cloud */
.skg-weather .cloud {
  position: absolute;
  opacity: 0.9;
  z-index: 5;
}
.skg-weather .cloudAnimation1 {
  /* Left -> Right */
  left: -500px;
}
@-webkit-keyframes cloudAnimation1 {
  0% {
    margin-left: 0%;
  }
  50% {
    margin-left: 105%;
  }
  100% {
    margin-left: 0%;
  }
}
@keyframes cloudAnimation1 {
  0% {
    margin-left: 0%;
  }
  50% {
    margin-left: 105%;
  }
  100% {
    margin-left: 0%;
  }
}
.skg-weather .cloudAnimation2 {
  /* Left <- Right */
  right: -500px;
}
@-webkit-keyframes cloudAnimation2 {
  0% {
    margin-right: 0%;
  }
  50% {
    margin-right: 105%;
  }
  100% {
    margin-right: 0%;
  }
}
@keyframes cloudAnimation2 {
  0% {
    margin-right: 0%;
  }
  50% {
    margin-right: 105%;
  }
  100% {
    margin-right: 0%;
  }
}
.skg-weather .cloud div {
  background-color: #fff;
  position: absolute;
  bottom: 0;
}
.skg-weather .cloud1 {
  width: 50%;
  height: 50%;
  border-radius: 50% 50%;
}
.skg-weather .cloud2 {
  width: 80%;
  height: 80%;
  border-radius: 50% 50%;
}
.skg-weather .cloud3 {
  width: 60%;
  height: 60%;
  border-radius: 50% 50%;
}
.skg-weather .cloudL {
  left: 0;
}
.skg-weather .cloudM {
  left: 25%;
}
.skg-weather .cloudR {
  left: 67%;
}
/* Rain 
*/
.skg-weather .rain {
  position: absolute;
  margin-top: 0;
  height: 10px;
  width: 10px;
  z-index: 4;
  background: -webkit-gradient(linear, left top, left bottom, from(#63a9ff), to(#c9deff));
  background: -moz-linear-gradient(top, #63a9ff, #c9deff);
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  border-top-right-radius: 100%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  opacity: 0.9;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
@-webkit-keyframes rainAnimation1 {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: 100%;
  }
}
@keyframes rainAnimation1 {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: 100%;
  }
}
@-webkit-keyframes rainAnimation2 {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: 100%;
  }
}
@keyframes rainAnimation2 {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: 100%;
  }
}
/*Tulio*/
.skg-weather #vooruitzichten {
  width: 102%;
  padding: 1% 0 0 0;
  /*  margin-top: 1px;
  margin-bottom: 10px;*/
}
.skg-weather #vooruitzichten .width-item {
  width: 14%;
  float: left;
}
.skg-weather #vooruitzichten .item {
  height: 100% !important;
  float: none;
  margin: auto;
  padding: 0px !important;
}
.todayinfo {
  position: relative;
  width: 200px;
  padding: 10px 15px;
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 10px;
  z-index: 1;
}
.todayinfo .today_label {
  float: left;
  font-weight: bold;
  font-size: 40px;
  padding-right: 7px;
  border-right: 1px solid;
  border-color: rgba(255, 255, 255, 0.5);
}
.todayinfo .today_label p {
  line-height: 37px!important;
  font-size: 40px;
  font-family: anton;
  font-weight: 300;
}
.todayinfo .today_info {
  display: inline-block;
  padding-left: 10px;
}
.todayinfo .today_info .jwf_today {
  text-align: center;
  font-size: 14px;
  font-family: RobotoLight;
  border-top: 1px solid;
  border-color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 2px;
}
.todayinfo .today_info .jwf_datetime {
  font-size: 14px;
  font-family: RobotoLight;
}
.skg-weather #text {
  position: relative;
  overflow: hidden;
}
.skg-weather #text .jse-detail li {
  line-height: 22px;
}
#vooruitzichten .width-item:nth-child(even) .weekdag {
  border-bottom: 1px solid;
  border-bottom-color: rgba(4, 106, 140, 0.22);
}
#vooruitzichten .width-item:nth-child(odd) .weekdag {
  border-bottom: 1px solid;
  border-bottom-color: rgba(255, 255, 255, 0.7);
}
.jfw_skywind {
  position: relative;
  float: left;
  margin: 13px 0 0px 35px;
}
.nextday_label {
  position: relative;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 22px!important;
  font-family: anton!important;
  padding: 10px 0;
}