/*============  Search form  =============*/
.js-search
{
    position: relative;

    display: inline-block;

    margin: 37px 32px 33px 24px;
}
.js-search.active .toggle
{
    color: #fff;
    background: #fb5701;
}
.js-search.active .toggle:before
{
    content: '\f00d';
}
.js-search.active .search-form
{
    width: 200px;
}
.js-search.active .search-form .input
{
    border-color: #fb5701;
}
.js-search .toggle
{
    font: 400 28px 'FontAwesome';
    line-height: 38px;

    position: relative;
    z-index: 2;

    display: block;

    width: 40px;
    height: 40px;

    cursor: pointer;
    -webkit-transition: .3s all ease;
       -moz-transition: .3s all ease;
         -o-transition: .3s all ease;
            transition: .3s all ease;
    text-align: center;

    color: #fb5701;
}
.js-search .toggle:hover
{
    color: #fff;
    background: #fb5701;
}
.js-search .toggle:before
{
    content: '\f002';
}
.js-search .search-form
{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 100%;

    overflow: hidden;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 0;

    -webkit-transition: .3s all ease;
       -moz-transition: .3s all ease;
         -o-transition: .3s all ease;
            transition: .3s all ease;
}
.js-search .search-form .input
{
    font: 400 14px Arial, sans-serif;
    line-height: 20px;

    position: relative;

    display: block;

    height: 20px;
    padding: 6px 35px 6px 10px;

    color: #000;
    border: 4px solid transparent;
    background-color: #fff;
}
.js-search .search-form a
{
    font: normal 14px 'FontAwesome';
    line-height: 20px;

    position: absolute;
    top: 50%;
    right: 7px;

    width: 20px;
    height: 20px;
    margin-top: -9px;

    cursor: pointer;
    text-decoration: none;

    color: #b3b4a7;
}
.js-search .search-form a:before
{
    content: '\f054';
}
.js-search .search-form a:hover
{
    text-decoration: none;

    color: #232323;
}
.js-search .search-form input
{
    font: inherit;
    line-height: inherit;

    display: block;
    overflow: hidden;

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    vertical-align: baseline;

    color: inherit;
    border: none;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    outline: none;
    background-color: transparent;

    -webkit-appearance: none;
}
@media (max-width: 979px)
{
    .js-search
    {
        margin: 25px 32px 25px 24px;
    }
}
@media (max-width: 767px)
{
    .js-search
    {
        display: block;

        max-width: 400px;
        margin: 10px auto 30px;
        padding: 0 10px;
    }
    .js-search .toggle
    {
        display: none !important;
    }
    .js-search .search-form
    {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        display: block;

        width: 100%;

        border: 4px solid;
    }
    .js-search .search-form .input
    {
        padding: 6px 35px 6px 10px;
    }
}