$xs  : 20em;
    $sm : 30em;
    $md : 50em;
    $lg   : 75em;
    $xl   : 110em;

// BEM selectors
// block__element
@mixin e($element) {
  &__#{$element} {
    @content;
  }
}
// block__element--modifier
@mixin m($modifier) {
  &--#{$modifier} {
    @content;
  }
}
// Media queries
@mixin mq($break) {
  @if $break == "xs" {
    @media screen and ( min-width: $xs ) {
      @content;
    }
  }
  @else if $break == "sm" {
    @media screen and ( min-width: $sm ) {
      @content;
    }
  }
  @else if $break == "md" {
    @media screen and ( min-width: $md ) {
      @content;
    }
  }
  @else if $break == "lg" {
    @media screen and ( min-width: $lg ) {
      @content;
    }
  }
  @else if $break == "xl" {
    @media screen and ( min-width: $xl) {
      @content;
    }
  }
  @else {
    @media screen and ( min-width: $break ) {
      @content;
    }
  }
}


// Start Styling
html {
  box-sizing: border-box;
  margin:0;
  font-family: 'Lato';
    &:before {
    content:'';
    position:absolute;
      background-size:cover;
    height: 200%;
    width: 100%;
    background-image:url('https://download.unsplash.com/22/one-scene.JPG');
  -webkit-filter:blur(8px);
  }
}
*, *:before, *:after {
  box-sizing: inherit;
  margin:0;
}
body {
  font-family: 'Lato';
  color:white;
  position: relative;

}
date {
  background-color: rgba(0,0,0,.3);
  padding:3px 9px;
  border-radius:10px;
  font-size: .7em;
  font-weight: 300;
}
.card {
  width: 85%;
  margin:1.5rem auto;
  // .card__top
  @include e('top') {
    border-radius:12px 12px 0 0;
    width: 100%;
    background-image: url('https://download.unsplash.com/22/one-scene.JPG');
    background-size:cover;
    overflow:hidden;

  }
  // .card__intro
  @include e('intro') {
    margin-bottom: 8rem;
    @include mq(md){
      margin-bottom:16rem;
    }
    display:flex;
    flex-flow:row wrap;
    justify-content:space-between;
  }
  // .card__title
  @include e('title') {
    width: 100%;
    text-shadow: 1px 1px 1px rgba(0,0,0,.3);
    padding:20px 0 0 20px;
    margin:0;
    @include mq(md){
      width: 70%;
    }
  }
  // .card__meta
  @include e('meta') {
    width: 100%;
    text-align: left;
    padding:0px 0 0 20px;
    text-shadow: 1px 1px 1px rgba(0,0,0,.3);
    font-size: 1.125rem;
    @include mq(md){
      width: 30%;
      text-align: right;
      padding:20px 20px 0 0;
    }
  }
  // .card__options
  @include e('options') {
    display:flex;
    width: 100%;
    justify-content:space-around;
    @include mq(md){
      width: 60%;
    }
  }
  // .card__options-cell
  @include e('options-cell') {
    width: 100%;
    border-bottom:6px solid #9AA3E5;
    text-align: center;
    padding-bottom:4px;
    
    &:first-child {
      border-color:#F2C459
    }
    &:last-child { 
      border-color:#6ACEE3;
    }
    h3 {
      margin-bottom:0;
      font-weight: 500;
      text-shadow: 1px 1px 1px black;
      text-transform: uppercase;
      font-size: .9rem;
      color:rgba(255,255,255,.75);
      position: relative;
      top:0;
      transition: all 100ms ease;
      &:hover {
        color:white;
        top:-2px;
      };
      cursor:pointer;
    }
  }
  
  // .card__bottom
  @include e('bottom') {
    width: 100%;
    z-index:500;
    border-radius: 0 0 12px 12px;
    position: relative;
    background-color:rgba(255,255,255,.35);
    margin:0;
    padding:10px;
    overflow:hidden;
  }  
} // end .card

.weather-panel {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;  
    width: 100%;
    flex-align:center;
  @include mq(md) {
    flex-wrap:nowrap
  }
  // .weather-panel__cell
  @include e('cell') {
    text-align: center;
    width: 100%;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin-bottom: 1rem;
    transition: all 300ms ease;
    
    
    @include mq(md) {
      width:14.285%;
      & > * {
      width: 100%;
      margin-bottom: 0;
    }
  }
    date{
      cursor: pointer;

      width: 30%;
      max-height:20px;
      transition:all 300ms ease;
      &:hover {
      background-color: rgba(255,255,255,.25);
    }
      @include mq(md){
        width: 80%;
        margin:0 auto;
      }
    }
    svg.weather-icon{
      width: 50%;
      fill:white;
      height:32px;
      margin:0 auto;
      @include mq(md){
        margin: 1rem auto;
      }
    }
}
  
  .weather-panel__cell--main {
      width:100%;
    margin-bottom: 3rem;
    @include mq(md) {
      margin-bottom: 0;
      width: 50%;
    }
      display:flex;
      flex-wrap:wrap;
      justify-content:space-around;
      
      .temp_date{
        width: 35%;  
        text-align: center;
        align-self:flex-start;
        h2{
          font-size: 4.8em;
          vertical-align:top;
          position: relative;
          @include mq(lg){
            font-size: 5em;
          }
          span {
            font-size: 50%;
            position:absolute;
          }
        }
        date {
          width: 100%;
          font-size: .8rem;
          margin:0 auto;
          @include mq(45em) {
            font-size: .7rem;
          }
        }
      }
    
      .icon_details {
        width: 35%;
        p {
          font-size: .9rem;
        }
        .icon{
          fill:white;
          width: 70%;
          max-width:100px;
          margin:0 auto;
          @include mq(md){
            width: 80%;
          }
        }

      }
    }
  }

.news-panel {
  width: 100%;
  display:none;
  flex-flow:row wrap;
  @include mq(40em) {
    flex-flow:row nowrap;
  }
  @include e('cell') {
    max-height:100px;
    width: 100%;
    margin-bottom: 2rem;
    display:block;
    @include mq(40em){width: 25%;}
    figure {
      display:flex;
      flex-flow:row wrap;
      justify-content:space-between;
      div{
        width: 50%;
        @include mq(40em) {width: 100%;}
      }
      img{
          width: 100%;
        }
      h2{
        width: 45%;
        font-size: .8em ;
        font-weight: 300;
         @include mq(40em) {width: 100%;}
        
      }
    }
    @include m('main'){
      margin-bottom:5rem;
      @include mq(sm){
        margin-bottom:12rem;
      }
       @include mq(40em) {margin-bottom:0;}
      figure{
        div {
          width: 100%;
        }
        h2{
          width: 100%;
        }
        
      }
    }
  }
} // end news-panel




.active-option {
  h3{transition:all 200ms ease;color:white;top:-2px;}
}
@keyframes bounceOutDown {
    0% {
   transform:translateY(0);
      opacity: .9;
  }
  20% {
    opacity: .5;
    transform:translateY(-30px);
  }
  100% { 
    opacity: 0; 
    transform:translateY(1000px);
  }
}
@keyframes bounceIn {
   0% {

      opacity: 0;
  }
  40% {
    opacity: .5;
    transform:translateY(-30px);
  }
  100% { 
    opacity: 1; 
    transform:translateY(0);
  }
}
.bounceOut{
   animation: bounceOutDown 600ms linear forwards;
}
.hidden{
  display:none;
}
.bounceIn {
  display:flex;
  animation: bounceIn 400ms linear forwards;
}