/* ------------------------------------------------------------------------ */
/* Custom CSS Styles 
/* ------------------------------------------------------------------------ */

/* Layout */
@media screen and (max-width: 959px) {
    .distributor-content {
        display: flex;
        flex-wrap: wrap;
    }
    .distributor-content #content {
        order: 2;
        padding-top: 0;
    }
    .distributor-content #sidebar {
        order: 1;
        padding-top: 40px;
    }
}

/* Distributor Sidebar */
.country-select {
    margin: 20px 0;
}
#select-country {
    min-height: 30px;
    width: 100%;
}
.state-select {
    margin: 0;
    opacity: 0;
    visibility: hidden;
    height: 0;
    position: relative;
}
.state-select.active {
    margin: 0 0 20px;
    opacity: 1;
    visibility: visible;
    height: auto;
}
#select-state {
    min-height: 30px;
    width: 100%;
}
.state-select .spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Distributor Wrapper */
.distributor-meta {
    opacity: 0;
    visibility: hidden;
    height: 0;
}
.distributor-meta.active {
    opacity: 1;
    visibility: visible;
    height: auto;
}
.distributor-meta .note strong {
    margin-right: 10px;
}
#distributor-results .spinner {
    height: 400px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.distributors-wrapper {
    width: 100%;
    margin-top: 40px;
}
.distributors-wrapper thead {
    color: #ffffff;
    background-color: #1ab7ea;
    text-align: left;
    font-weight: 600;
}
.distributors-wrapper tr th ,
.distributors-wrapper tr td {
    padding-left: 10px;
    padding-right: 10px;
}
.distributors-wrapper tbody tr {
    background-color: #e1eff6;
}
.distributors-wrapper tbody tr:nth-child(even) {
    background-color: #f0f8fa;
}
.distributors-wrapper tbody tr:hover {
    background-color: #f7fdff;
}
.distributors-wrapper tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
}
.distributors-wrapper tbody td.distributor-phone {
    font-size: 14px;
    width: 24%;
}
.distributors-wrapper tbody td:first-child {
    width: 42%;
}
.distributors-wrapper tbody td:nth-child(3) {
    width: 120px;
    font-size: 14px;
}
.distributors-wrapper tbody td.distributor-website {
    width: 130px;
    padding-left: 10px;
    padding-right: 10px;
}
.distributor-additional-text {
    display: inline-block;
    margin-top: 10px;
    width: 100%;
}
a.shop-now {
    color: #ffffff;
    padding: 6px 15px;
    border-radius: 4px;
    background: rgb(29,189,234); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(29,189,234,1) 0%, rgba(65,157,191,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(29,189,234,1) 0%,rgba(65,157,191,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(29,189,234,1) 0%,rgba(65,157,191,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1dbdea', endColorstr='#419dbf',GradientType=0 ); /* IE6-9 */
}
a.shop-now:hover {
    color: #ffffff;
    background: rgb(29,189,234);
}
a.shop-now i {
    margin-right: 5px;
}

@media screen and (max-width: 767px) {
    .page-template-template-distributor #sidebar-widgets {
        padding-bottom: 20px;
    }
    .distributors-wrapper {
        display: flex;
        flex-wrap: wrap;
    }
    .distributors-wrapper thead,
    .distributors-wrapper tbody {
        width: 100%;
    }
    .distributors-wrapper tr th { width: 100%; }
    .distributors-wrapper tr th:nth-child(2) ,
    .distributors-wrapper tr th:nth-child(3) ,
    .distributors-wrapper tr th:nth-child(4) ,
    .distributors-wrapper tr th:nth-child(5) {
        display: none;
    }
    .distributors-wrapper tbody tr {
        display: flex;
        flex-wrap: wrap;
    }
    .distributors-wrapper tbody td {
        width: 100% !important;
        padding-bottom: 0;
    }
    .find-distributor-description {
        margin-top: 30px;
    }
    .distributors-wrapper tbody td.distributor-website {
        padding-left: 10px;
        padding-bottom: 10px;
    }
}

/*-----------------------------------------------------------------------------------*/
/* EOF
/*-----------------------------------------------------------------------------------*/