@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i|Roboto:400,700');

html,
body {
    font-family: 'Roboto', sans-serif;
    background: #efefef;
    height: 100%;
    width: 100%;
    color: #3f3f3f;
    font-size: 15px;
    line-height: 24px;
}


body {
    overflow-y: scroll;
    /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
}

p,
ul {
    color: #62533d;
}

a {
    display: block;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

a:hover {
    text-decoration: none
}

h1 {
    font-family: 'Roboto', serif;
}

h2,
h3 {
    font-family: 'Roboto', serif !important;
    color: #333333;
    line-height: 1.3
}

h3 {
    font-weight: 900
}

.no-gutter > [class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}

nav a {
    font-family: 'Roboto', serif;
    font-weight: 700;
    letter-spacing: 2px
}

header .logo-title {
    margin: 0;
    color: #fff;
    padding: 28px 0;
    text-align: center;
}

header .subtitle {
    width: 100%;
    margin: 0;
    color: #fff;
    background: url(../img/subtitle-bg.png) no-repeat left #333333;
    background-size: contain;
}

header .header-text {
    font-family: 'Roboto', serif;
    color: #fff;
     font-size: 12px;
    line-height: 1.3;
    letter-spacing: 1px;
    text-align: center;
    padding: 15px 15px;
    position: absolute;
    bottom: 1px;
    left: 0;
    z-index: 100;
    width: 100%;
    background: url(../img/header-text-bg.png)
}

header p {
    text-align: right;
    font-family: 'Roboto', serif;
    margin: 0;
    color: #fff;
    padding: 20px 40px;
    letter-spacing: 1px;
    font-size: 16px;
    line-height: 1.1;
    display: block
}

.intro-box p {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 16px;
    color: #333333;
}

h2 {

    font-weight: 700;
    font-size: 22px;
    color: #333333;
    letter-spacing: 1px
}

.intro-box a {
    color: #0589ca;
}

.intro-box a:hover {
    color: #333333;
}

.navbar-default {
    background: #333333;
    margin: 15px -15px 0;
    border-radius: 0;
    border: none;
}

a {
    color: #666666
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
    letter-spacing: 0;
    font-size: 14px;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #0589ca;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
    color: #0589ca;
    background: none;
}

.intro {
    background: #fff;
    height: 325px;
    padding: 30px;
}

.intro-box {
    margin-top: 15px
}

.home-content {
    background: #fff;
    margin: 15px 0 0;
    padding: 30px 30px 50px
}

.locations-intro {
    background: #333333;
    color: #fff;
    padding: 15px 30px;
    line-height: 1.3;
    margin-top: 15px;
}

.register-now {
    background: #333333;
    color: #fff;
    padding: 15px 30px;
    font-family: 'Roboto', serif;
    line-height: 1.3;
    margin-top: 15px;
    text-align: center;
}

.register-now {
    font-size: 1.1em;
}

.register-now span {
    font-size: 1.3em !important;
}

.register-now:hover {
    background: #666666;
    color: #fff;
}

.register-now span,
.locations-intro span {
    font-family: 'Roboto', serif;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #0589ca
}

.home-sponsors {
    padding: 30px;
    background: #fff;
    margin: 15px 0 0
}

.home-sponsors a {
    margin: 30px 0
}

.canfield {
    width: 207px;
    height: 46px;
    background: url(../img/canfield-logo.png) no-repeat top left;
    background-size: contain;
}

.galderma {
    width: 207px;
    height: 37px;
    background: url(../img/galderma-logo.png) no-repeat top left;
    background-size: contain;
}

.neograft {
    width: 191px;
    height: 37px;
    background: url(../img/neograft-logo.png) no-repeat top left;
    background-size: contain;
}

.zimmer {
    width: 161px;
    height: 64px;
    background: url(../img/zimmer-logo.png) no-repeat top left;
    background-size: contain;
}

footer {
    background: #333333;
    color: #fff;
    padding: 30px 15px;
    margin: 15px 0 0;
}

footer h2 {
    color: #333333;
    font-family: 'Roboto', serif;
    font-size: 17px;
    margin: 0 0 2px
}

footer p {
    display: inline;
    color: #fff;
}

footer a.footer-link {
    display: inline-flex;
    border-right: 2px solid #333333;
    border-left: 2px solid #333333;
    padding: 0 12px;
    margin: 0 12px;
}

footer a {
    display: inline-flex;
    color: #fff;
}

footer a:hover {
    color: #333333;
}

.title-gallery {
    text-align: center;
    background: #666666;
    padding: 30px;
    margin-top: 15px
}

.title-gallery h2 {
    font-family: 'Roboto', serif;
    margin: 0 15px 0 0;
    color: #fff;
}

.gallery {
    list-style: none;
    margin: 15px 0 0;
    font-size: 0;
    padding: 0;
    display: flex;
    align-content: stretch;
}

.gallery li {
    margin: auto;
    flex: 1;
    padding: 0 7.5px;
}

.gallery li a:hover {
    opacity: .9
}

.pagination {
    background: none;
    border: none;
    border-radius: none
}

.pagination > li > a {
    color: #fff;
}

.pagination > li > a.active {
    color: #333333;
}

.pagination > li > a:hover {
    color: #333333;
    background: none;
}

.pagination > li > a,
.pagination > li > span {
    background: none;
    border: none;
    border-radius: none
}

.green-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.green-list li {
    padding-left: 2em;
    text-indent: -1.4em;
}

.green-list li:before {
    content: "• ";
    color: #333333;
    margin-right: 5px
    /* or whatever color you prefer */
}

.modal-content {
    display: inline-block;
    text-align: center;
}

.modal-dialog {
    width: 96%;
    margin: 50px auto
}

.close {
    opacity: 1;
    color: rgb(255, 255, 255);
    background-color: rgb(25, 25, 25);
    padding: 5px 8px;
    border-radius: 30px;
    border: 2px solid rgb(255, 255, 255);
    position: absolute;
    top: -15px;
    right: -55px;
    z-index: 1032;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #fff
}

.header-desktop {
    display: none
}

.header-mobile {
    display: block
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: #333333;
}

.navbar-default .navbar-toggle {
    border-color: #333333;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.green-text {
    color: #333333;
}

/* 
Generic Styling, for Desktops/Laptops 
*/

table {
    width: 100%;
    border-collapse: collapse;
}

/* Zebra striping */

table a:hover {
    color: #333333;
    text-decoration: underline;
}

table#myTable td:first-child,
table#myTable th:first-child {
    padding: 10px 25px 10px 30px;
}

table#myTable tr:nth-of-type(odd) {
    background: #dedede;
}

table#myTable tr:nth-of-type(even) {
    background: #fff;
}

th {
    background: #fff;
    color: #333333;
    font-weight: bold;
}

table#myTable td,
table#myTable th {
    padding: 10px 25px;
    border: 1px solid #ccc;
    text-align: left;
}

.locations .register-now {
    margin-top: 15px
}

.locations .home-content {
    margin-bottom: 0
}

.table-container {
    padding-top: 15px
}

.footer-provided {
    margin-top: 15px;
    background: #333333;
    padding: 10px 30px 5px;
}

.footer-provided p {
    color: #fff;
    text-align: center
}

.logos {
    background: #fff;
    padding: 5px 0
}

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    table#myTable thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    table#myTable tr {
        border: 1px solid #ccc;
        margin-bottom: 15px
    }
    tr:last-child {
        margin-bottom: 0
    }
    table#myTable td,
    table#myTable td:first-child,
    table#myTable th:first-child {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #ccc;
        position: relative;
        padding-left: 50%;
    }
    td:last-child {
        border-bottom: none
    }
    table#myTable td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 10px;
        left: 30px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        color: #333333;
    }
    /*
    Label the data
    */
    table#myTable tr td:nth-of-type(1):before {
        content: "DATE";
    }
    table#myTable tr td:nth-of-type(2):before {
        content: "TIME";
    }
    table#myTable tr td:nth-of-type(3):before {
        content: "ADDRESS";
    }
    table#myTable tr td:nth-of-type(4):before {
        content: "STATE";
    }
    table#myTable tr td:nth-of-type(5):before {
        content: "FACULTY";
    }
    table#myTable tr td:nth-of-type(6):before {
        content: "REGISTER";
    }
}

/* Small devices (tablets, 768px and up) */

@media(min-width:768px) {
    header .header-text {

        font-size: 17px;
        padding: 20px
    }

    .text-cut::after {
        content: "\A";
        white-space: pre;
        clear: both;
    }

    .container {
        width: 768px;
    }
    header .logo-title {
        font-size: 45px;
    }
    #navbar {
        padding-left: 0;
        padding-right: 0
    }
    .intro.box1 {
        border-right: 8px solid #efefef;
    }
    .intro.box2 {
        border-right: 8px solid #efefef;
        border-left: 7px solid #efefef;
    }
    .intro.box3 {
        border-left: 7px solid #efefef;
    }
    .col-sm-12 .home-content,
    .col-sm-12 .register-now {
        border-right: none
    }
    .home-content {
        min-height: 400px;
    }
    .home-content,
    .register-now {
        border-right: 8px solid #efefef;
    }
    .home-sponsors {
        border-left: 7px solid #efefef;
        margin-bottom: 0
    }
    .content-flex {
        display: flex
    }
    .text-cut::after {
        content: "\A";
        white-space: pre;
        clear: both;
    }
    .gallery {
        display: flex;
        align-content: stretch;
    }
    .gallery li {
        margin: auto;
        flex: 1;
    }
    .gallery li:first-child {
        padding-left: 0;
        padding-right: 7.5px;
    }
    .gallery li:last-child {
        padding-left: 7.5px;
        padding-right: 0
    }
    .modal-dialog {
        width: 680px;
    }
    .header-desktop {
        display: block
    }
    .header-mobile,
    .mobile-only {
        display: none
    }
    .register-now {
        font-size: 1.3em;
    }
    .register-now span {
        font-size: 1.5em !important;
    }
}

/* Medium devices (desktops, 992px and up) */

@media (min-width: 992px) {
    .container {
        width: 934px;
    }
    .navbar-default .navbar-nav > li > a {
        color: #fff;
        letter-spacing: 1px;
        font-size: 17px;
    }
    .modal-dialog {
        width: 800px;
    }
    .footer-provided {
        padding: 10px 30px 0;
    }
}

/* Large devices (large desktops, 1200px and up) */

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

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */

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

/* Medium Devices, Desktops */

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

/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {
    .intro-box .intro {
        margin: 0 0 15px;
    }
    .intro-box .intro:last-child {
        margin-bottom: 0;
    }
    .register-now span::after {
        content: "\A";
        white-space: pre;
        clear: both
    }
}

/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
    .navbar-default {
        margin-top: 0
    }
    .intro-box .intro {
        margin: 0 15px 15px;
    }
    header h1 {
        font-size: 30px
    }
    header p {
        font-size: 12px;
        text-align: center;
    }
    .home-content {
        margin: 15px 15px 0;
    }
    .contact-content {
        margin: 0 15px 15px;
    }
    .home-sponsors {
        margin: 15px 15px 0;
    }
    .register-now,
    .locations-intro {
        margin-left: 15px;
        margin-right: 15px;
    }
    header .subtitle {
        background: #333333;
    }
    header .logo-title {
        padding: 10px;
    }
    header p {
        padding: 10px 15px
    }
    header h1 {
        font-size: 30px
    }
    header p {
        font-size: 12px;
        text-align: center;
    }
    .title-gallery {
        text-align: center;
        margin-left: 15px;
        margin-right: 15px;
    }
    .title-gallery h2 {
        font-size: 16px;
    }
    .title-gallery .pagination {
        margin: 0;
    }
    footer a,
    footer a.footer-link {
        border: none;
        padding: 0;
        margin: 0;
        width: 100%
    }
    footer a::after {
        content: "\A";
        white-space: pre;
        clear: both;
    }
    .gallery {
        display: flex;
        padding: 0 12px;
        flex-flow: row wrap;
        justify-content: space-around;
    }
    .gallery li {
        flex: 1;
    }
    footer {
        margin-bottom: 0
    }
    .modal-body {
        padding: 5px;
    }
    .logos img {
        padding: 2% 5%
    }
}

/* Custom, iPhone Retina */

@media only screen and (max-width: 320px) {
    header p {
        padding: 10px 40px
    }
}

.tablesorter-header {
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
    background-position: center right;
    background-repeat: no-repeat;
    cursor: pointer;
    white-space: normal;

}

.tablesorter-default thead .headerSortUp,
.tablesorter-default thead .tablesorter-headerAsc,
.tablesorter-default thead .tablesorter-headerSortUp {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);

}

.tablesorter-default thead .headerSortDown,
.tablesorter-default thead .tablesorter-headerDesc,
.tablesorter-default thead .tablesorter-headerSortDown {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);

}

.tablesorter-default thead .sorter-false {
    background-image: none;
    cursor: default;

}