/*--search--*/
input[type="search"]
    -webkit-box-sizing content-box
    -moz-box-sizing content-box
    -ms-box-sizing content-box
    box-sizing content-box
    -webkit-appearance textfield

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button
    -webkit-appearance none

.search-wrapper
    transform translateY(-400px)
    z-index 9999
    &.active
        transform translateY(0)

.search-form
    position relative
    top 0
    transform translateX(-200px)
    z-index 9999
    width 100%
    opacity 0
    transition all 200ms 100ms cubic-bezier(0,0.6,0.4,1)
    h4
        margin rem(10px) 0
    .search-field
        width 100%
        mainFont(300)
        font-size rem(26px)
        color #fff
        background-color transparent
        border 0
        border-bottom 1px solid #fff
        border-radius 0
        box-shadow none
        background-clip padding-box
        -webkit-appearance none
        &:focus
            outline 0
            box-shadow none
    &.active
        top 0
        transform translateX(0)
        opacity 1
    &.hidden
        display none
    .icon-remove-sign
        position absolute
        top 0
        right 0
        z-index 1
        display block
        fill sec
        width 30px
        height 30px
        text-align center
        cursor pointer
    &::-webkit-input-placeholder
        font-size rem(26px)


.search-form .search-field::-webkit-search-decoration,
.search-form .search-field::-webkit-search-cancel-button,
.search-form .search-field::-webkit-search-results-button,
.search-form .search-field::-webkit-search-results-decoration 
    display none

.search-form
    .search-list
        position absolute
        width 100%
        mainFont(300)
    h4, li, p, a, a:hover
        color sec

body
    &.search-overlay
        overflow hidden
        &:after
            position absolute
            top 0
            left 0
            z-index 9001
            width 100%
            height 100%
            min-height 100%
            background-color rgba(0,0,0,0.6)
            content ''
            +below(cut)
                background-color main


.search-wrapper 
    position absolute
    top 50px
    width 100%
    padding-right 10%
    padding-left 10%
    *zoom 1
        &:after, &:before
            display table
            line-height 0
            content ""
        &:after
            clear both

.search-wrapper:before,
.search-wrapper:after 
    display table
    line-height 0
    content ""

.search-list
    padding 0
    margin 0
    list-style-type none
    .entry-date
        float right
        display none
        font-size 14px
        text-transform uppercase
    a
        text-decoration none
        display block
        padding rem(15px) 0
        width 100%
        border-bottom 1px solid sec
        &:hover
            color darken(sec, 30%)
            border-bottom 1px solid darken(sec, 30%)

+above(48em)
    .search-wrapper 
        top 100px
    .search-list .entry-date
        display inline