.location{

}
.scroll {
  width: 100%;
  overflow: auto;
}
.location .current-weather{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  padding:1rem;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center
}
.location .current-weather>*{
  text-align:center
}
.location h1{
  -webkit-box-flex:1;
  -ms-flex:1;
  flex:1;
  margin:0 0 0 3px;
  padding:0;
  text-transform:uppercase;
  font-size:1.3rem;
  font-weight:normal;
  line-height:1;
  color:#585858
}
.location h1 b{
  display:block;
  font-size:1.6rem
}
.location .current-icon{
  -webkit-box-flex:0;
  -ms-flex:0 0 120px;
  flex:0 0 120px
}
.location .current-icon .icon{
  margin:0 auto;
  width:120px;
  height:120px
}
.location .current-conditions{
  -webkit-box-flex:1;
  -ms-flex:1;
  flex:1;
  line-height:1
}
.location .current-conditions .temp{
  font-size:2.7rem;
  color:#585858
}
.location .current-more-info ul{
  list-style:none;
  padding:0;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  max-width:700px;
  margin:0 auto
}
.location .current-more-info li{
  -webkit-box-flex:1;
  -ms-flex:1 1 100%;
  flex:1 1 100%;
  text-align:center;
  font-style:italic
}
.location .current-more-info li:first-of-type{
  text-align:right
}
.location .current-more-info li:last-of-type{
  text-align:left
}
.location .forecast{
  padding:2rem 0
}
.location .forecast .forecast-summary{
  padding:0.8rem 1rem;
  background:#F1F1F1;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:baseline;
  -ms-flex-align:baseline;
  align-items:baseline;
  border-top:2px solid #e4e4e4
}
.location .forecast .forecast-summary h2,.location .forecast .forecast-summary p{
  display:inline;
  margin:0
}
.location .forecast .forecast-summary h2{
  font-size:1.2rem;
  padding-right:0.5rem;
  -ms-flex-negative:0;
  flex-shrink:0
}
.location .next-24-hours .hourly{
  padding:1.2rem 0;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  width:1896px
}
.location .next-24-hours .hourly .hour{
  text-align:center;
  padding:5px 0;
  border-left:5px solid white;
  border-right:5px solid white;
  -webkit-box-flex:1;
  -ms-flex:1 1 79px;
  flex:1 1 79px
}
.location .next-24-hours .hourly .hour:nth-child(2n){
  background:rgba(0, 0, 0, 0.03)
}
.location .next-24-hours .hourly .icon{
  margin:5px auto 0
}
.location .next-24-hours .hourly .icon svg{
  width:45px;
  height:45px
}
.location .next-7-days .show-hide-details{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end
}
.location .next-7-days #hide-all-details,.location .next-7-days #show-all-details{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  margin:1rem 1rem 0 2rem;
  cursor:pointer
}
.location .next-7-days #hide-all-details .details-sign,.location .next-7-days #show-all-details .details-sign{
  margin:0 0.3rem
}
.location .next-7-days #hide-all-details .details-sign{
  -webkit-transform:rotate(-180deg);
  -ms-transform:rotate(-180deg);
  transform:rotate(-180deg)
}
.location .next-7-days .daily{
  padding:0 1rem
}
.location .next-7-days .day{
  background:#F1F1F1;
  position:relative;
  border-bottom:3px solid #e4e4e4;
  margin:1rem 0 2rem;
  padding:0.5rem 0 0;
  cursor:pointer
}
.location .next-7-days .main-data{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center
}
.location .next-7-days .main-data .time{
  text-align:right;
  font-weight:bold;
  -webkit-box-flex:0;
  -ms-flex:0 0 7rem;
  flex:0 0 7rem;
  min-width:7rem;
  margin-left:3px;
  text-transform:capitalize
}
.location .next-7-days .main-data .icon{
  text-align:center;
  -webkit-box-flex:0;
  -ms-flex:0 0 90px;
  flex:0 0 90px;
  min-width:90px
}
.location .next-7-days .main-data .icon svg{
  width:75px;
  height:75px
}
.location .next-7-days .main-data .summary{
  text-align:left;
  -webkit-box-flex:1;
  -ms-flex:1 1 auto;
  flex:1 1 auto
}
.location .next-7-days .main-data .temp{
  -webkit-box-flex:0;
  -ms-flex:0 0 14rem;
  flex:0 0 14rem;
  min-width:14rem;
  font-size:1.9rem;
  font-weight:bold;
  text-align:center;
  color:white;
  -webkit-box-ordinal-group:3;
  -ms-flex-order:2;
  order:2
}
.location .next-7-days .main-data .hiTemp{
  color:#585858
}
.location .next-7-days .main-data .loTemp{
  color:#8a8a8a
}
.location .next-7-days .more-details{
  text-align:center;
  line-height:1;
  font-family:Arial;
  background:#e4e4e4;
  margin:0;
  max-height:0;
  overflow-y:hidden;
  -webkit-transition:max-height 0.5s ease-in-out;
  -o-transition:max-height 0.5s ease-in-out;
  transition:max-height 0.5s ease-in-out
}
.location .next-7-days .more-details span{
  display:inline-block;
  margin:0.5rem;
  white-space:nowrap
}
.location .next-7-days .more-details .row:first-child{
  margin-top:0.5rem
}
.location .next-7-days .more-details .row:last-child{
  margin-bottom:0.5rem
}
.location .next-7-days .show-details .more-details{
  max-height:120px
}
.location .next-7-days .day .details-sign{
  position:absolute;
  bottom:-14px;
  left:50%;
  margin-left:-12px;
  -webkit-transition:all 0.4s ease-in-out;
  -o-transition:all 0.4s ease-in-out;
  transition:all 0.4s ease-in-out
}
.location .next-7-days .day .details-sign svg{
  fill:black
}
.location .next-7-days .show-details .details-sign{
  -webkit-transform:rotate(-180deg);
  -ms-transform:rotate(-180deg);
  transform:rotate(-180deg)
}
.location .rtl .current-more-info li:first-of-type{
  text-align:left
}
.location .rtl .current-more-info li:last-of-type{
  text-align:right
}
.location .rtl .next-7-days .main-data .time{
  text-align:left
}
.location .rtl .next-7-days .main-data .summary{
  text-align:right
}
.location .rtl .forecast .forecast-summary h2{
  padding:0 0 0 0.5rem
}
@media only screen and (min-width:1024px){
  .location .next-7-days .daily{
      padding-left:0;
      padding-right:0
  }
}
@media only screen and (max-width:700px){
  .location .next-7-days .daily,.location .rtl .next-7-days .daily{
      padding:0
  }
  .location .next-7-days .main-data,.location .rtl .next-7-days .main-data{
      display:block;
      position:relative
  }
  .location .next-7-days .main-data .time,.location .rtl .next-7-days .main-data .time{
      float:left;
      width:42%;
      line-height:75px;
      text-align:center;
      min-width:3rem
  }
  .location .next-7-days .main-data .summary,.location .rtl .next-7-days .main-data .summary{
      width:100%;
      clear:both;
      text-align:center;
      padding-bottom:1rem
  }
  .location .next-7-days .main-data .temp,.location .rtl .next-7-days .main-data .temp{
      float:right;
      width:41%;
      line-height:75px;
      font-size:1rem;
      min-width:3rem
  }
  .location .next-7-days .main-data .icon,.location .rtl .next-7-days .main-data .icon{
      position:absolute;
      left:50%;
      margin-left:-45px;
      width:90px
  }
  .location .next-7-days .show-details .more-details,.location .rtl .next-7-days .show-details .more-details{
      max-height:230px
  }
  .location .next-7-days .show-hide-details,.location .rtl .next-7-days .show-hide-details{
      -ms-flex-pack:distribute;
      justify-content:space-around
  }
  .location .next-7-days #hide-all-details,.location .next-7-days #show-all-details,.location .rtl .next-7-days #hide-all-details,.location .rtl .next-7-days #show-all-details{
      margin:1rem 0 0 0
  }
  .location .rtl .next-7-days .main-data .time{
      float:right
  }
  .location .rtl .next-7-days .main-data .temp{
      float:left
  }
}
@media only screen and (max-width:480px){
  .location,.location .rtl{
  }
  .location .forecast .forecast-summary,.location .rtl .forecast .forecast-summary{
      display:block;
      padding:0.5rem
  }
  .location .forecast .forecast-summary h2,.location .rtl .forecast .forecast-summary h2{
      padding:0
  }
  .location .current-weather,.location .rtl .current-weather{
      padding:1rem 0
  }
  .location .rtl h1,.location h1{
      font-size:0.9rem
  }
  .location .rtl h1 b,.location h1 b{
      font-size:1.1rem
  }
  .location .current-icon,.location .rtl .current-icon{
      -webkit-box-flex:0;
      -ms-flex:0 0 80px;
      flex:0 0 80px
  }
  .location .current-icon .icon,.location .rtl .current-icon .icon{
      width:80px;
      height:80px
  }
  .location .current-conditions .temp,.location .rtl .current-conditions .temp{
      font-size:1.5rem
  }
  .location .current-more-info ul,.location .rtl .current-more-info ul{
      display:block
  }
  .location .current-more-info li,.location .rtl .current-more-info li{
      padding:0.1rem
  }
  .location .current-more-info li:first-of-type,.location .rtl .current-more-info li:first-of-type{
      text-align:center
  }
  .location .current-more-info li:last-of-type,.location .rtl .current-more-info li:last-of-type{
      text-align:center
  }
}
.location.cw .forecast .forecast-summary,.location.wwo .forecast .forecast-summary{
  display:block;
  text-align:center
}
.location.cw .forecast .forecast-summary h2,.location.wwo .forecast .forecast-summary h2{
  font-variant:small-caps
}
.location.cw .current-more-info li:first-of-type,.location.cw .rtl .current-more-info li:first-of-type{
  text-align:center
}
.location.cw .current-more-info li:last-of-type,.location.cw .rtl .current-more-info li:last-of-type{
  text-align:center
}
@media only screen and (max-width:360px){
 
}
.hiTemp{
  fill:#585858
}
.loTemp{
  fill:#8a8a8a
}
.lightning,.sun{
  fill:#f98629
}
.moon{
  fill:#585858
}
.cloud,.fog{
  fill:#585858
}
.rain{
  fill:#1279c2
}
.hail,.snow{
  fill:#1279c2
}
.wind{
  fill:#585858
}
.ad{
  height:90px;
  text-align:center
}
@media only screen and (max-width:727px){
  .ad{
      height:60px
  }
}
@media only screen and (max-width:467px){
  .ad{
      height:250px
  }
}
.ad.sys{
  height:auto;
  text-align:inherit;
  -webkit-animation:fadein 1s;
  animation:fadein 1s
}
@-webkit-keyframes fadein{
  0%{
      opacity:0
  }
  35%{
      opacity:1
  }
  to{
      opacity:1
  }
}
@keyframes fadein{
  0%{
      opacity:0
  }
  35%{
      opacity:1
  }
  to{
      opacity:1
  }
}
/*# sourceMappingURL=styles.css.map */