.hidden {
  display: none;
  visibility: hidden;
}

.visible-phone {
  display: none !important;
}

.visible-tablet {
  display: none !important;
}

.hidden-desktop {
  display: none !important;
}

.visible-desktop {
  display: inherit !important;
}

@media (min-width: 520px) and (max-width: 979px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}

@media (max-width: 519px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

.visible-print {
  display: none !important;
}

@media print {  
  .visible-print {
    display: inherit !important;
  }
  .hidden-print {
    display: none !important;
  }
}

@media (max-width: 767px) {
    .grid_1, .grid_2, .grid_3, .grid_4,
    .grid_5, .grid_6, .grid_7, .grid_8,
    .grid_9, .grid_10, .grid_11, .grid_12,
    .grid_13, .grid_14, .grid_15, .grid_16,
    .grid_17, .grid_18, .grid_19,.grid_20,
    .grid_21, .grid_22, .grid_23, .grid_24,
    .one_half, .one_third, .two_thirds, .three_fourths,
    .one_fourth, .one_fifth, .two_fifth, .three_fifth,
    .four_fifth, .one_sixth, .five_sixth {
        display: inline;
        float: left;
        position: relative;
        width: 100%;
    }

    #bottom_footer img {
        display: none;
    }

    #bottom_footer address {
        min-width: 0;
    }

    #bottom_footer .column_one,
    #bottom_footer .column_two {
        text-align: center;
        width: 48%;
        min-width: 0;
    }
    #bottom_footer .column_three {
        width: 98%;
        text-align: center;
    }

}

.menu-btn {
    display: block;
    background-image: linear-gradient(to bottom, #151515, #040404);
    background-color: #0E0E0E;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075);
    margin-left: 1%;
    margin-right: 1%;
    padding: 7px 10px;
    margin-top: 0;
    border-width: 1px;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    text-decoration: none;
    float: left;
}

.menu-btn .icon-bar {
    background-color: #F5F5F5;
    border-radius: 1px 1px 1px 1px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    display: block;
    height: 2px;
    width: 18px;
}

.menu-btn .icon-bar + .icon-bar {
    margin-top: 3px;
}

@media (max-width: 959px) {
    #topmenu {
        padding-top: 0;
    }

    #toolbar #search {
        padding-top: 3px;
    }

    #topmenu-menu-container {
        height: auto;
        max-height: 0px;
        -webkit-transition: max-height 500ms;
        transition: max-height 500ms;
        overflow: hidden;
        float: left;
        clear: both;
    }

    #topmenu ul.menu {
        float: left;
        clear: both;
        margin-top: 10px;
    }

    #topmenu-menu-btn {
        display: block;
        float: left;
    }

    #topmenu ul.menu li.menu-item {
        display: block;
        border-top: 1px inset #ECECEC;
        padding: 3px 5px;
        font-size: 14px;
        line-height: 20px;
    }

    #topmenu ul.menu li.menu-item a {
        border: none;
    }

}

@media (min-width: 960px) and (max-width: 980px) {
    .grid_1, .grid_2, .grid_3, .grid_4,
    .grid_5, .grid_6, .grid_7, .grid_8,
    .grid_9, .grid_10, .grid_11, .grid_12,
    .grid_13, .grid_14, .grid_15, .grid_16,
    .grid_17, .grid_18, .grid_19,.grid_20,
    .grid_21, .grid_22, .grid_23, .grid_24 {
        margin-left: 1% !important;
        margin-right: 1% !important;
    }
}

@media (min-width: 960px) {
    #topmenu-menu-container {
        height: auto;
    }

    #topmenu-menu-btn {
        display: none;
    }
}


#menu ul li a {
    padding: 0 2.5em;
}


@media (max-width: 970px) {
    #menu ul li a {
        padding: 0 2em;
    }
}

@media (max-width: 900px) {
    #menu ul li a {
        padding: 0 1.5em;
    }
}

@media (max-width: 830px) {
    #menu ul li a {
        padding: 0 1.25em;
    }
}

@media (max-width: 800px) {
    #menu ul li a {
        padding: 0 1.0em;
    }
    #menu ul ul a {
        min-width: 0;
    }
}

@media (max-width: 599px) {
    #menu ul li a {
        padding: 0 0.5em;
    }
}

@media (max-width: 479px) {
    #menu ul li a {
        padding: 0 0.5em;
    }
}

@media (max-width: 619px) {
    #header .logo-link {
        display: block;
        float: left;
        clear: none;
    }

    #header #text-header {
        margin: 12px 0 5px 12px !important;
        display: block;
        float: left;
        clear: both;
    }

    #header #text-slogan {
        margin: 5px 0 5px 12px !important;
        display: block;
        float: left;
        clear: both;
    }
}

@media (max-width: 499px) {
    #header #text-slogan {
        font-size: 16px !important;
    }
}

@media (max-width: 782px) {
    #header .social_logos {
        display: none;
    }
}

@media (max-width: 519px) {
    #searchbar .search-form,
    #searchbar .ss-non-hidden-inputs {
        width: 100%;
    }
    #searchbar .ss-query {
        width: 70%;
    }
    #searchbar .ss-submit {
        width: 25%;
    }

    #menu li {
        display: block;
        float: left;
        clear: both;
        width: 100%;
    }
    #menu {
        height: auto;
        overflow: hidden;
    }
    #menu ul.menu {
        display: block;
        float: left;
        height: auto;
        width: 100%;
    }
    #menu ul ul {
        position: relative;
        top: 0;
        height: 0;
        width: 98%;
        padding: 0 0 0 2%;
        margin: 0;
        border: none;
        z-index: 0;
        overflow: auto;
        border-radius: 0;
    }
    #menu ul li > ul {
        display: block;
        visibility: visible;
    }
    #menu ul ul ul {
        left: 0;
    }
    #menu ul ul li a {
        border-bottom: none;
    }

    #main-menu-btn-container {
        display: block !important;
        float: left;
        clear: both;
        width: 100%;
    }

    #main-menu-btn-container .menu-btn {
        margin: 0px 40%;
        padding: 3px 10px;
        width: 10%;
    }

    #main-menu-btn-container .menu-btn .icon-bar {
        width: 100%;
    }

    #menu {
        height: auto;
        max-height: 0px;
    }

    #menu.transition {
        -webkit-transition: max-height 500ms;
                transition: max-height 500ms;
    }

    #menu.bounce {
        -webkit-transition: max-height 200ms;
                transition: max-height 200ms;
    }

    .grid_1, .grid_2, .grid_3, .grid_4,    
    .grid_5, .grid_6, .grid_7, .grid_8,
    .grid_9, .grid_10, .grid_11, .grid_12,
    .grid_13, .grid_14, .grid_15, .grid_16,
    .grid_17, .grid_18, .grid_19,.grid_20,
    .grid_21, .grid_22, .grid_23, .grid_24 {
        margin-left: 1% !important;
        margin-right: 1% !important;
        width: 98% !important;
        left: 0 !important;
    }

    #bottom_footer li {
        margin-left: 0 !important;
    }

    p#breadcrumbs a, 
    p#breadcrumbs strong {
        padding: 0 !important;
    }
    p#breadcrumbs {
        overflow: scroll;
    }
}

@media (max-width: 359px) {
    #header .logo-link {
        display: none;
    }
    #header #text-header {
        width: 100%;
        text-align: center;
        margin-top: 8px !important;
        margin-left: 0 !important;
    }
    #header #text-slogan {
        font-size: 14px !important;
        width: 100%;
        text-align: center;
        margin-left: 0 !important;
    }
}


@media (max-width: 667px) {
    .st_slider {
        display: none;
    }
    #front-slides {
        display: none;
    }
}

/* 
   Responsive table 

   Pivots a table with more than two columns into a 
   two-column table with a group of rows for each row. 

   The table tag should have the class "responsive-table", 
   and the same id or class that is used to refer to it when 
   assigning the labels as shown below.

   To get the labels you must add something like the following to the page html. 
     For example, on the staff directory page: 
        @media (max-width: 520px) {
            #staff-directory-table td:nth-of-type(1):before { content: "Name"; }
            #staff-directory-table td:nth-of-type(2):before { content: "Title"; }
            #staff-directory-table td:nth-of-type(3):before { content: "Email"; }
            #staff-directory-table td:nth-of-type(4):before { content: "Phone"; }
        }

*/
@media (max-width: 520px) {
    table.responsive-table, 
    table.responsive-table thead, 
    table.responsive-table tbody, 
    table.responsive-table th, 
    table.responsive-table td, 
    table.responsive-table tr { 
        display: block;
    }
    
    table.responsive-table thead tr,
    table.responsive-table th {
        display: none;
    }
    
    table.responsive-table tr { 
        border: 1px solid #ccc; 
    }
    
    table.responsive-table td { 
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }
    
    table.responsive-table td:before { 
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }
}

.st_slider img,
.st_slider .slides_control, 
.st_slider .slidesjs-control,
.st_slider .slide,
.st_slider .slidesjs-slide,
.st_slider .slide .inside,
.st_slider .slidesjs-slide .inside {
    height: 100% !important;
    width: 100% !important;
}

.with_frm_style input.auto_width, 
.with_frm_style select.auto_width, 
.with_frm_style textarea.auto_width {
    width: 100% !important;
}