.column
  .search
    .search_bar
      %input#searchOne{:type => 'checkbox'}
      %label{:for => 'searchOne'}
        %i.icon.ion-android-search
        %i.last.icon.ion-android-close
        %p #{'|'}
      %input{:type => 'text',:placeholder => 'Search...'}

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

*{
  //box-sizing:border-box;
}
body{
  padding:0;
  margin:0;
  .column{
    background:#F6F792;
    height:100vh;
    float:left;
    width:100%;
    position:relative;
  }
  .two{
    background:#F6F792
  }
  .three{
    background:#EA2E49;
  }
  .four{
    background:#333745;
  }
  .search{
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    top:50%;
    transform:translateY(-50%);
    width:100%;
    text-align:center;
    overflow:hidden;
    &_bar{
      width:280px;
      position:relative;
      margin: 0 auto;
      input[type="text"]{
        width:15px;
        background:transparent;
        transition:border .3s 0s, width .2s .3s cubic-bezier(0.225, 0.010, 0.475, 1.010), text-indent .2s .3s;
        padding: 20px;
        border-color:#448996;
        text-indent:30px;
        outline:none;
        border:0px solid #448996;
        font-size: 12px;
        color:  #A8A952;
        border-radius:5px;
        //text-transform:uppercase;
        font-family: 'Nunito', sans-serif;

      }
      ::-webkit-input-placeholder { /* Safari, Chrome and Opera */
        color: #448996;
        font-weight:400;
        font-family: 'Nunito', sans-serif;
      }
       ::-moz-input-placeholder { /* Safari, Chrome and Opera */
        color: #448996;
        font-weight:400;
        font-family: 'Nunito', sans-serif;
      }
       ::-o-input-placeholder { /* Safari, Chrome and Opera */
        color: #448996;
        font-weight:400;
        font-family: 'Nunito', sans-serif;
      }
      input[type="checkbox"]{
        display:none;
      }
      input[type="checkbox"]:checked + label + input{
        width: 230px;
        border: 5px solid #448996;
        text-indent:0px;
      }
      input[type="checkbox"]:checked + label i{
        right:0px;
        transform: translateY(-50%) translateX(50%) rotate(360deg) scale(0);
        color: #448996;
        &:hover{
          //background:white;
        }
      }
      input[type="checkbox"]:checked + label .last{
        left:220px;
        transform: translateY(-50%) rotate(360deg) scale(1);
        &:hover{
          //background:white;
        }
      }
      input[type="checkbox"]:checked + label p{
        top: 50%;
        transition:all .3s .45s;
      }
      input[type="checkbox"]:not(checked) + label p{
        top: -50%;
        transition:all .3s 0s;
      }
      .last{
        -webkit-transform: translateY(-50%) rotate(0deg) scale(0);
        transform: translateY(-50%) rotate(0deg) scale(0);
      }
      i{
        position: absolute;
        font-size: 30px;
        top: 50%;
        transform: translateY(-50%) translateX(50%) rotate(0deg) scale(1);
        cursor: pointer;
        z-index: 2;
        margin: auto;
        border-radius: 4px;
        width: 56px;
        right: 50%;
        height: 54px;
        background: transparent;
        transition: right .3s .3s, transform .3s .3s, color .3s;
        line-height: 60px;
        color: #A8A952;
        &:hover{
          color:#448996;
        }
      }
      p{
        position: absolute;
        margin: 0;
        right: 52px;
        color: #448996;
        font-weight: 700;
        font-size: 30px;
        top: -50%;
        transform: translateY(-50%) rotate(0deg) scale(1);
      }
    }
  }
}