- @tabs = [{:c => 'checked', :tab => '1', :time => '8am - 10am', :title => 'Jamie talks design', :schedule => 'Monday - Thursday',:description => 'I talk a bunch of rubbish', :icon => 'ion-android-color-palette'},{:c => 'false', :tab => '2', :time => '10am - 12am', :title => 'Arctic Monkeys Live', :schedule => 'Monday - Wednesday',:description => 'Music for your lug holes', :icon => 'ion-music-note'},{:c => 'false', :tab => '3', :time => '12am - 4pm', :title => 'Steven Fry podcast', :schedule => 'Staurday - Sunday',:description => 'Steven Fry says words', :icon => 'ion-android-microphone'},{:c => 'false', :tab => '4', :time => '4pm - 8pm', :title => 'Massive event', :schedule => 'Monday - Friday',:description => 'Some kind of music festival', :icon => 'ion-android-bar'}]
.left
  .left_inner
    %h1 Funky Pure CSS Accordion
    %h2 Go on, give it some clicks
    %a.download{:href => 'https://codepen.io/jcoulterdesign/pens/popular/',:target => '_blank'} 
      <i class="icon ion-eye"></i> <span>View my other pens</span>
    %a.follow{:href => 'https://codepen.io/jcoulterdesign/',:target => '_blank'} 
      <i class="icon ion-social-codepen-outline"></i> <span>Follow me on codepen</span>
.right
  .app
    .app_inner
      - @tabs.each do |i|
        %input{:type => 'radio',:id => "tab-#{i[:tab]}",:name => 'buttons', :"#{i[:c]}" => ""}
        %label{:for => "tab-#{i[:tab]}"}
          .app_inner__tab
            %h2 
              %i.icon.ion-android-alarm-clock 
              #{i[:time]}
            .tab_left
              %i.icon.big{:class => "#{i[:icon]}"}
              .tab_left__image
                %i.icon{:class => "#{i[:icon]}"}
            .tab_right
              %h3 #{i[:title]}
              %h4 #{i[:schedule]}
              %p #{i[:description]}
              %button More information

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);

*{
  box-sizing:border-box;
}

body{
  background: #45b98f;
  overflow:hidden;
  font-family: 'Roboto Condensed', sans-serif;
  .left{
    float:left;
    width:50%;
    height:100vh;
    position:Relative;
    &_inner{
      width:340px;
      margin:0 auto;
      transform:translateY(-50%);
      height: 414px;
      position:absolute;

      right:20px;
      top:50%;
      h1{
        color:white;
        font-size:28px;
        margin:120px 0px 0px 0px
      }
      h2{
        color:#abe8d2;
        font-size:22px;
        font-weight:200;
        margin:0px 0px 0px 0px
      }
    }
  }
  .right{
    float:right;
    position:relative;
    width:50%;
    height:100vh;
  }
}
.app{
  border-radius: 10px;
  width:340px;
  margin:0 auto;
  height: 414px;
  position:absolute;
  left:0;
  top:50%;
  box-shadow: 4px 5px 0px rgba(0, 0, 0, 0.11);
  animation:intro .34s .4s cubic-bezier(1.000, 1.400, 0.410, 1.010) forwards ;
  transform:translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(10deg);
  margin:auto;
  overflow:hidden;

  font-family: 'Roboto Condensed', sans-serif;
  &_inner{
    position:relative;
    input[type="radio"]{
      display:none;
    }
    input[type="radio"]:checked + label .app_inner__tab{
      height:175px;
    }
    input[type="radio"]:checked + label .app_inner__tab .tab_right{
      top:39px;
      transition:all .3s .2s cubic-bezier(0.455, 0.030, 0.515, 0.955);
    }
    input[type="radio"]:not(checked) + label .app_inner__tab{
      height:80px;
      border-left: 12px solid rgba(0, 0, 0, 0.12);
    }
    input[type="radio"]:not(checked) + label .app_inner__tab .tab_right{
      top:200px;
      transition:all .3s .3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
    }
    input[type="radio"]:checked + label .app_inner__tab .tab_left .tab_left__image{
      animation: move_in .55s .05s cubic-bezier(0.455, 0.030, 0.515, 0.955) forwards;
      transition:all .3s .36s cubic-bezier(0.455, 0.030, 0.515, 0.955);
    }
    input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .tab_left__image{
      animation: move_out .75s .0s cubic-bezier(0.455, 0.030, 0.515, 0.955) forwards;
      transition:all .3s .3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
    }
    input[type="radio"]:checked + label .app_inner__tab .tab_left .big{
      left:260px;
    }
    input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .big{
      left:400px;
    }
    input[type="radio"]:checked + label .app_inner__tab h2 i{
      opacity:0;
    }
    input[type="radio"]:not(checked) + label .app_inner__tab h2 i{
      opacity:.3;
    }

    label{
      display:block;
      width:100%;
      &:nth-of-type(1) .app_inner__tab{
        background:#99b998;
        &:hover{
          transition:all .2s;
          background:darken(#99b998,4%);
        }
        height:200px;
        .tab_left__image{
          background:#EA495F
        }
      }
      &:nth-of-type(2) .app_inner__tab{
        background:#E4B794;
        &:hover{
          transition:all .2s;
          background:darken(#E4B794,4%);
        }
        .tab_left__image{
          background:#99B998
        }
      }
      &:nth-of-type(3) .app_inner__tab{
        background:#f4837d;
        &:hover{
          transition:all .2s;
          background:darken(#f4837d,4%);
        }
        .tab_left__image{
          background:#E4B794
        }
      }
      &:nth-of-type(4) .app_inner__tab{
        background:#ea495f;
        &:hover{
          transition:all .2s;
          background:darken(#ea495f,4%);
        }
        .tab_left__image{
          background:#F4837D
        }
      }
    }
    &__tab{
      width:100%;
      height:80px;
      background:red;
      cursor:pointer;
      overflow:hidden;
      position:relative;
      transition:all .65s cubic-bezier(1.000, 0.000, 0.410, 1.010);
      h2{
        position: absolute;
        right: 20px;
        top: 16px;
        color: rgb(26, 28, 29);
        font-size: 18px;
        i{
          position: absolute;
          right: 271px;
          opacity:0.3;
          transition:all .3s;
        }
      }
      .tab_right{
        width:60%;
        float:right;
        position:relative;
        top:200px;
        text-align:right;
        padding: 20px;
        h3,h4,p{
          margin:0;
        }
        h3{
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);
        }
        h4{
          font-size: 12px;
          margin: 4px 0px;
          color: rgba(0, 0, 0, 0.33);
        }
        p{
          font-size: 11px;    
          color: white;
        }
        button{
          margin-top: 10px;
          border: 2px solid white;
          background: none;
          border-radius: 5px;
          padding: 6px 20px;
          cursor: pointer;
          font-family: 'Roboto Condensed', sans-serif;
          outline:none;
          font-size: 11px;
          color: white;
          transition:all .3s;
          &:hover{
            background:white;
            color:black;
          }
        }
      }
      .tab_left{
        width:30%;
        float:left;
        position:relative;
        .big{
          position: absolute;
          top: -17px;
          transition:all .3s .3s;
          left: 390px;
          font-size: 180px;
          opacity: 0.08;
        }
        &__image{
          position: relative;
          top: -100px;
          text-align: center;
          background: white;
          left: 47px;
          border-radius: 20px;
          width: 80px;
          height: 80px;
          i{
            color: white;
            font-size: 40px;
            top: 18px;
            position: relative;

          }
        }
      }
    }
  }
}

// Animations

@keyframes move_out{
  0%{top:47px;}
  100%{top:200px;}
}
@keyframes move_in{
  0%{top:-200px;}
  100%{top:47px;}
}
@keyframes bump{
  0%{top:16px;}
  25%{top:13px;}
  50%{top:16px;}
  75%{top:13px;}
  100%{top:16px;}
}
@keyframes intro{
  0%{transform: translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(40deg)}
  100%{transform: translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}

 a.download,a.follow{i{margin-right:10px;}text-align:center;margin-top:13px;width:300px;
      float:left;display: inline-block;padding: 16px 30px;background: #EA495F;color: white;font-weight: 900;font-family: 'Roboto Condensed', sans-serif;text-decoration: none;border-radius: 4px;margin-right:12px;}
a.follow{
      float:left;padding: 14px 30px;background: none;color: white;border:2px solid white;&:hover{color:#41EFB6;border-color:#41EFB6;}}