body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: none;
}

.spa {
  position: relative;
}

.spa .sun {
  width: 22%;
  height: 19%;
  margin-top: 11.7%;
  margin-bottom: -11.7%;
}
.spa .title {
  display: block;
  width: 100%;
  position: relative;
  top: 2%;
  font-size: 1087%;
  font-weight: bold;
  text-transform: uppercase;
}
.spa .time {
  display: block;
  width: 100%;
  text-transform: uppercase;
  font-size: 1600%;
  font-weight: bold;
  padding-top: 9%;
}
.spa .time .period {
  font-size: 50%;
  margin-left: -4px;
}

.large .time .period {
  margin-left: -10px!important;
}
.spa .protection-level,
.spa .disclaimer {
  display: block;
  width: 100%;
  text-transform: uppercase;
  font-size: 900%;
}
.spa .disclaimer {
  font-size: 700%;
  margin: 1.2% 0 6.8% 0;
}

.spa .suggestion {
  display: block;
  width: 100%;
  font-size: 900%;
  line-height: 0.95;
  padding-top: 1%;
}
.spa .source {
  display: block;
  width: 100%;
  font-size: 700%;
  line-height: 0.95;
  padding-top: 1%;
  font-weight: bold;
}
.spa .heading, .spa .subheading {
  display: block;
  font-size: 700%;
  padding-top: 10%;
  width: 100%;
}



.spa.mobile .title, .spa.mobile .suggestion, .spa.mobile .source {
  display: none;
}
.spa {
  position: relative;
}
.spa .popup {
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #333;
  background-color: rgba(0,0,0,.7);
  width: 80%;
  margin-left: -40%;
  display: none;
  color: #fff;
  font-size: 11px;
}
.large .popup {
  top: 50%;  
  margin-top: -20%;
}
.spa .popup.visible {
  display: block;
}

.large .popup {
  font-size: 14px;
}


.spa .popup span {
  display: block;
  padding: 8px 8px 0px 8px;
}
.spa .popup form {
  margin: 11px 0 11px 0;
}
.large .popup form {
  margin: 10px 0 20px 0;
}

.large .popup span {
  padding: 20px 20px 0px 20px;  
}

.form-submit {
  text-shadow: none;
  color: #fff;
  border-radius:0;
  border: none;
  background: #ED8E3E;
  text-transform: uppercase;
  font-size: 11px;
  padding: 10px 20px;
  line-height: 1;
  cursor: pointer;
    
  &:hover, &:focus {
    background-color: #21346b;
  }
}

.large .form-submit {
  font-size: 14px;  
}

.spa .cogg {
  background-image: url('../images/1061365576.png');
  background-size: 100%;
  cursor: pointer;
  display: inline;
  width: 20px;
  height: 20px;
  float: right;
  position: relative;
  z-index: 2;
  top:1.5%;
  right: .5%;
}
.spa .cogg:hover {
  xtransform: rotate(9deg);
}

.hidden {
  visibility: hidden;
}

.spa .time.hidden {
  height: 12%;
}

.spa .time.hidden + .protection-level {
  margin-bottom: 6%;
}

.spa.winter .time.hidden + .protection-level {
  margin-bottom: 1%;
}

.remove {
  display: none!important;
}

.spa.winter .heading,
.spa.winter .subheading {
  display: block;
  text-transform: uppercase;  
  width: 100%;
}

.spa.winter .heading {
  padding-top: 15%;
  font-size: 900%;
  margin-bottom: 1%;
}

.spa.winter .subheading {
  font-size: 700%;
  margin: 1.2% 0 6.8% 0;
  padding-top: 0;
}