/* Search icon by IcoMoon, made with http://icomoon.io/app/ */

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon/icomoon.eot');
    src: url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/icomoon/icomoon.woff') format('woff'),
    url('../fonts/icomoon/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

.sb-search {
    position: relative;
    margin-top: 35px;
    width: 0%;
    min-width: 30px;
    height: 30px;
    float: right;
    overflow: hidden;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
    -webkit-backface-visibility: hidden;
}

header.smaller .sb-search {
    margin-top: 20px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.sb-search-input {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    outline: none;
    background: #fff;
    width: 100%;
    height: 30px;
    margin: 0;
    z-index: 10;
    padding: 10px 65px 10px 10px;
    font-family: inherit;
    font-size: 15px;
    color: #333;
}

.sb-search-input::-webkit-input-placeholder {
    color: #dfd8e9;
}

.sb-search-input:-moz-placeholder {
    color: #dfd8e9;
}

.sb-search-input::-moz-placeholder {
    color: #dfd8e9;
}

.sb-search-input:-ms-input-placeholder {
    color: #dfd8e9;
}

.sb-icon-search,
.sb-search-submit {
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    margin: 0;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.sb-search-submit {
    background: #fff;
    /* IE needs this */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* IE 8 */
    filter: alpha(opacity=0);
    /* IE 5-7 */
    opacity: 0;
    color: transparent;
    border: none;
    outline: none;
    z-index: -1;
}

.sb-icon-search {
    color: #fff;
    background: #333333;
    z-index: 90;
    font-size: 15px;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    border-radius: 30px;
}

.sb-icon-search:before {
    content: "\e986";
}



/* Open state */

.sb-search.sb-search-open,
.no-js .sb-search {
    width: 20%;
    border: 1px solid #ccc;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
    background: #13307a;
    color: #fff;
    z-index: 11;
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
    z-index: 90;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    background-color: rgb(216, 220, 255) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}



/****/


/* Search */

.ct-search {
    position: relative;
    z-index: 10;
    /*float: right;*/
    margin: 0;
    width: 120px;
    height: 90px;
}



/*.ct-search * {
    box-sizing: border-box;
}*/

.ct-search-input-wrap {
    position: absolute;
    right: 120px;
    /*width: 265px;*/
    height: 120px;
    opacity: 0;
    pointer-events: none;
}

.ct-search.ct-search-open .ct-search-input-wrap {
    pointer-events: auto;
    opacity: 1;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.ct-container .twitter-typeahead {
    width: 100% !important;
    background: #333;
}

.ct-container .tt-dropdown-menu {
    border: none;
    border-radius: 0px;
}

.ct-icon-search,
input[type="submit"].ct-search-submit {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    /*line-height: 40px;*/
    cursor: pointer;
    /*border-radius: 30px;*/
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.ct-icon-search {
    z-index: 90;
    background: #333333;
    color: #fff;
}

.ct-search.ct-search-open .ct-icon-search {
    z-index: 3;
    background: #333333;
    color: #fff;
    pointer-events: none;
}

input[type="submit"].ct-search-submit {
    z-index: -1;
    padding: 0;
    outline: none;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: transparent;
}

.ct-search.ct-search-open input[type="submit"].ct-search-submit {
    z-index: 100;
}

input[type="text"].ct-search-input,
input[type="text"].tt-hint {
    margin: 0;
    padding: 25px;
    width: 300px;
    height: 90px;
    outline: none;
    border: none;
    background: #fff;
    font-family: inherit;
    opacity: 0;
    font-weight: bold;
    border: none;
}

.searchInput {
    display: none;
}

.ct-search.ct-search-open input[type="text"].ct-search-input {
    opacity: 1
}

.form-search svg {
    font-size: 40px;
}


/* ::-webkit-input-placeholder {
    color: #ddd
}

:-moz-placeholder {
    color: #ddd
}

::-moz-placeholder {
    color: #ddd
}

:-ms-input-placeholder {
    color: #ddd
} */

@media only screen and (max-width: 1499px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (max-width: 1199px) {
    .ct-search {
        width: 90px;
        height: 90px;
    }

    .ct-search-input-wrap {
        right: 90px;
    }

    input[type="text"].ct-search-input,
    input[type="text"].tt-hint {
        height: 90px;
    }
}

@media only screen and (min-width: 992px) {}

@media only screen and (max-width: 991px) {
    input[type="text"].ct-search-input,
    input[type="text"].tt-hint {
        height: 60px;
    }

    .ct-search-input-wrap {
        right: 80px;
    }
}

@media only screen and (min-width: 768px) {}

@media only screen and (max-width: 767px) {
    .ct-search-input-wrap {
        width: 80%;
        position: relative;
        height: auto;
        opacity: 1;
        right: inherit;
        pointer-events: inherit;
    }

    input[type="text"].ct-search-input,
    input[type="text"].tt-hint {
        width: 100%;
        height: 50px;
        padding: 10px;
        opacity: 1;
        border-radius: 30px;
        color: #333;
    }

    #side_pSearch {
        width: 100%;
        display: table;
        table-layout: fixed;
    }

    .ct-search-input-wrap input {
        border: #0ff solid 1px;
    }

    .searchInput {
        display: none;
    }

    .ct-search-input-wrap,
    .ct-icon-search, input[type="submit"].ct-search-submit {
        display: table-cell;
        vertical-align: middle;
    }

    input[type="submit"].ct-search-submit {
        /* position: relative; */
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        z-index: 1;
        top: inherit;
        left: inherit;
        position: relative;
        background: url('https://www.pocs.com.tw/templates/03/images/search-solid.png') center center no-repeat;
        background-size: 50%;
    }

    .ct-icon-search, input[type="submit"].ct-search-submit {
        width: 70px;
        color: #fff;
    }

    .form-search svg {
        display: none;
    }
}

@media only screen and (max-width: 568px) {}

@media only screen and (max-width: 440px) {}

@media only screen and (max-width: 420px) {}