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

.app{
  border-radius: 10px;
  width:340px;
  margin:0 auto;
  height: 414px;
  position:relative;
  left:0;
  top:50%;
  box-shadow: 4px 5px 0px rgba(0, 0, 0, 0.11);
  transform:translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  margin:auto;
  overflow:hidden;
  font-family: 'Roboto Condensed', sans-serif;
}

.app_inner{
  position:relative;
}

.app_inner input[type="radio"]{
  display:none;
}

.app_inner input[type="radio"]:checked + label .app_inner__tab{
  height:175px;
}

.app_inner 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);
}

.app_inner input[type="radio"]:not(checked) + label .app_inner__tab{
  height:80px;
  border-left: 12px solid rgba(0, 0, 0, 0.12);
}

.app_inner 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);
}

.app_inner 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);
}

.app_inner 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);
}

.app_inner input[type="radio"]:checked + label .app_inner__tab .tab_left .big{
  left:260px;
}

.app_inner input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .big{
  left:400px;
}

.app_inner input[type="radio"]:checked + label .app_inner__tab h2 i{
  opacity:0;
}

.app_inner input[type="radio"]:not(checked) + label .app_inner__tab h2 i{
  opacity:.3;
}

.app_inner label{
  display:block;
  width:100%;
}

.app_inner label:nth-of-type(1) .app_inner__tab{
  background:#99b998;
}

.app_inner label:nth-of-type(1) .app_inner__tab:hover{
  transition:all .2s;
  background:darken(#99b998,4%);
}

.app_inner label:nth-of-type(1) .app_inner__tab .tab_left__image{
  background:#EA495F;
}

.app_inner label:nth-of-type(2) .app_inner__tab{
  background:#E4B794;
}

.app_inner label:nth-of-type(2) .app_inner__tab:hover{
  transition:all .2s;
  background:darken(#E4B794,4%);
}

.app_inner label:nth-of-type(2) .app_inner__tab .tab_left__image{
  background:#99B998;
}

.app_inner label:nth-of-type(3) .app_inner__tab{
  background:#f4837d;
}

.app_inner label:nth-of-type(3) .app_inner__tab:hover{
  transition:all .2s;
  background:darken(#f4837d,4%);
}

.app_inner label:nth-of-type(3) .app_inner__tab .tab_left__image{
  background:#E4B794;
}

.app_inner label:nth-of-type(4) .app_inner__tab{
  background:#ea495f;
}

.app_inner label:nth-of-type(4) .app_inner__tab:hover{
  transition:all .2s;
  background:darken(#ea495f,4%);
}

.app_inner label:nth-of-type(4) .app_inner__tab .tab_left__image{
  background:#F4837D;
}

.app_inner__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);
}

.app_inner__tab h2{
  position: absolute;
  right: 20px;
  top: 16px;
  color: rgb(26, 28, 29);
  font-size: 18px;
}

.app_inner__tab h2 i{
  position: absolute;
  right: 271px;
  opacity:0.3;
  transition:all .3s;
}

.app_inner__tab .tab_right{
  width:60%;
  float:right;
  position:relative;
  top:200px;
  text-align:right;
  padding: 20px;
}

.app_inner__tab h3,h4,p{
  margin:0;
}

.app_inner__tab h3{
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.app_inner__tab h4{
  font-size: 12px;
  margin: 4px 0px;
  color: rgba(0, 0, 0, 0.33);
}

.app_inner__tab p{
  font-size: 11px;    
  color: white;
}

.app_inner__tab 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;
}

.app_inner__tab button:hover{
  background:white;
  color:black;
}

.app_inner__tab .tab_left{
  width:30%;
  float:left;
  position:relative;
}

.app_inner__tab .big{
  position: absolute;
  top: -17px;
  transition:all .3s .3s;
  left: 390px;
  font-size: 180px;
  opacity: 0.08;
}

.app_inner__tab .tab_left__image{
  position: relative;
  top: -100px;
  text-align: center;
  background: white;
  left: 47px;
  border-radius: 20px;
  width: 80px;
  height: 80px;
}

.app_inner__tab .tab_left__image i{
  color: white;
  font-size: 40px;
  top: 18px;
  position: relative;
}

@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;}
}

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;
}

a.follow:hover{
  color:#41EFB6;
  border-color:#41EFB6;
}