/* Small devices (landscape phones, 150px and up) */
@media (min-width: 150px) {  
    .tb-icon-wp{
        right: auto;
        /* left: 45px; */
        background-color: transparent;
        border: none;
        color: #bebebe;
        height: 35px;
        line-height: 154px;
        position: absolute;
        padding: 0;
        width: 14px;
        top: 0;
        margin-left: 16px;
    }
    .tb-icon{
        right: auto;
        /* left: 45px; */
        background-color: transparent;
        border: none;
        color: #bebebe;
        height: 35px;
        line-height: 50px;
        position: absolute;
        padding: 0;
        width: 14px;
        top: 0;
        margin-left: -8px;
    }
    .myform-control {
        width: 83%;
        max-width: 90%;
        margin-right: 0px;
        border-radius: 0px 10px 10px 0px;
    }
    .myform-control-wp {
        width: 83%;
        max-width: 73%;
        margin-right: 0px;
        border-radius: 0px 10px 10px 0px;
    }
    .myform-control-index {
        width: 83%;
        max-width: 73%;
        margin-right: 0px;
        border-radius: 10px 0px 0px 10px;
    }
    .icon-search, .icon-shopping {
        margin-left: 6px;
    }
    .icon-search-2, .icon-shopping-2 {
        margin-left: 0px;
    }
    .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
        width: 77% !important;
    }
}

@media (min-width: 352px){
    .myform-control {
    width: 86%;
    max-width: 90%;
    margin-right: 0px;
    border-radius: 0px 10px 10px 0px;
    }
    .myform-control-wp {
        width: 86%;
        max-width: 76%;
        margin-right: 0px;
        border-radius: 0px 10px 10px 0px;
    }
    .myform-control-index {
        width: 84%;
        max-width: 86%;
        margin-right: 0px;
        border-radius: 10px 0px 0px 10px;
    }
    .icon-search, .icon-shopping{
        margin-left: 10px;
    }
    .icon-search-2, .icon-shopping-2{
        margin-left: 20px;
    }
    .keranjang{
        font-size: 8px;
        -webkit-transform: translate(-50%, -48%);
        -moz-transform: translate(-50%, -48%);
        min-width: 17px;
        min-height: 17px;
        border-radius: 50%;
        padding: 0;
    }
    .keranjang-2{
        font-size: 8px;
        -webkit-transform: translate(100%, -178%);
        -moz-transform: translate(100%, -178%);
        display: block;
        min-width: 17px;
        min-height: 17px;
        border-radius: 50%;
        padding: 0;
    }
    .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
        width: 77% !important;
    }
}

@media (min-width: 460px){
    .myform-control {
    width: 88%;
    max-width: 90%;
    margin-right: 0px;
    border-radius: 0px 10px 10px 0px;
    }
    .myform-control-wp {
        width: 88%;
        max-width: 80%;
        margin-right: 0px;
        border-radius: 0px 10px 10px 0px;
    }
    .myform-control-index {
        width: 88%;
        max-width: 90%;
        margin-right: 0px;
        border-radius: 10px 0px 0px 10px;
    }
    .icon-search, .icon-shopping{
        margin-left: 20px;
    }
    .keranjang{
        transform: translate(-40%, -48%);
    }
    .keranjang-2{
        font-size: 8px;
        -webkit-transform: translate(100%, -178%);
        -moz-transform: translate(100%, -178%);
        display: block;
        min-width: 17px;
        min-height: 17px;
        border-radius: 50%;
        padding: 0;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
    .tb-icon-wp{
        right: auto;
        /* left: 45px; */
        background-color: transparent;
        border: none;
        color: #bebebe;
        height: 35px;
        line-height: 140px;
        position: absolute;
        padding: 0;
        width: 14px;
        top: 0;
        margin-left: 16px;
    }
    .tb-icon{
        right: auto;
        /* left: 45px; */
        background-color: transparent;
        border: none;
        color: #bebebe;
        height: 35px;
        line-height: 50px;
        position: absolute;
        padding: 0;
        width: 14px;
        top: 0;
        margin-left: -8px;
    }
    .myform-control {
        width: 89%;
        max-width: 90%;
        margin-right: 0px;
        border-radius: 0px 10px 10px 0px;
    }
    .myform-control-wp {
        width: 89%;
        max-width: 79%;
        margin-right: 0px;
        border-radius: 10px 10px 10px 10px;
    }
    .myform-control-index {
        width: 85%;
        max-width: 94%;
        margin-right: 0px;
        border-radius: 10px 0px 0px 10px;
    }
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
    .tb-icon-wp{
        right: auto;
        /* left: 45px; */
        background-color: transparent;
        border: none;
        color: #bebebe;
        height: 35px;
        line-height: 140px;
        position: absolute;
        padding: 0;
        width: 14px;
        top: 0;
        margin-left: 16px;
    }
    .tb-icon{
        right: auto;
        /* left: 45px; */
        background-color: transparent;
        border: none;
        color: #bebebe;
        height: 35px;
        line-height: 78px;
        position: absolute;
        padding: 0;
        width: 14px;
        top: 0;
        margin-left: 30px;
    }
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    .tb-icon-wp{
        right: auto;
        /* left: 45px; */
        background-color: transparent;
        border: none;
        color: #bebebe;
        height: 35px;
        line-height: 124px;
        position: absolute;
        padding: 0;
        width: 14px;
        top: 0;
        margin-left: 16px;
    }
    .tb-icon{
        right: auto;
        /* left: 45px; */
        background-color: transparent;
        border: none;
        color: #bebebe;
        height: 35px;
        line-height: 124px;
        position: absolute;
        padding: 0;
        width: 14px;
        top: 0;
        margin-left: 16px;
    }
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    .tb-icon-wp{
        right: auto;
        /* left: 45px; */
        background-color: transparent;
        border: none;
        color: #bebebe;
        height: 35px;
        line-height: 125px;
        position: absolute;
        padding: 0;
        width: 14px;
        top: 0;
        margin-left: 16px;
    }
    .tb-icon{
        right: auto;
        /* left: 649px; */
        background-color: transparent;
        border: none;
        color: #bebebe;
        height: 35px;
        line-height: 77px;
        position: absolute;
        padding: 0;
        width: 14px;
        top: 0;
        margin-left: 16px;
    }
}
 
 
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/
 
/* Set width to make card deck cards 100% width */
@media (max-width: 950px) { 
 
}