/** fonts **/
@font-face {
    font-family: osp-din;
    src: url('../fonts/OSP-DIN.ttf') format('truetype');
}

/** minimum style **/
body {
    font-family: 'Oswald', osp-din, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    color: #fff;
}
body, body.music {
    background-color: #ddc3c8;
}
body.video {
    background-color: #96d4e6;
}
body.live {
    background-color: #e0d878;
}
a {
    color: #fff;
    text-decoration: none;
}
h1 {
    font-size: 1.5em;
    font-weight: normal;
    margin: 0;
}
.main-navigation h1{
    margin: 0.4em 0 0 0;
    text-align: center;
}
.alt-font {
    font-family: Arial;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

#content-area .content-full-inner iframe {
    width: 100% !important;
    visibility: visible !important;
}

#content-area .content-full-inner center {
    text-align: left !important;
}

ul.social-nav {
    list-style-type: none;
    margin: 0;
    padding :0;
    z-index: 10;
    width: 100%;
    text-align: center;
}
ul.social-nav li {
    display: inline-block;
    width: 50px;
    text-align: center;
}
.social-nav .screen-reader-text {
    position: absolute;
    left: -9999px;
}

.side-bar h1 {
    font-size: 50px;
    text-decoration: underline;
}
ul#menu-menu {
    list-style-type: none;
    margin: 0;
    padding :0;
    z-index: 10;
    text-align: center;
}
ul#menu-menu li {
    width: 100px;
    padding: 7px 0;
    text-align: center;
    border-bottom: 1px solid #fff;
    display: inline-block;
}
ul#menu-menu li.current-menu-item a,
body.music ul#menu-menu li.current-menu-item a {
    color: #f9769c;
}
body.video ul#menu-menu li.current-menu-item a {
    color: #33adce;
}
body.live ul#menu-menu li.current-menu-item a {
    color: #faf127;
}

#bg-hook { display:none; }

.content-area, .content-area-wide {
    position: relative;
    width: 95%;
    margin: 2em auto 0 auto;
}
.content-part {
    margin-bottom: 40px;
    position: relative;
}
    .content-item {
        min-height: 210px;
    }
        .bg-block {
            background-color: rgba(255,255,255,0.4);
        }
        .bg-block div.twitter {
            padding: 40px 40px 0 40px;
            color: #fd85a8;
        }
        .content-item img.full {
            width:100%;
            height: auto;
        }
        .content-img-restrict {
            height: 241px;
            overflow: hidden;
        }
        .roundel {
            background: url('../images/roundel-pink.png') no-repeat top left;
            height: 214px; width: 214px;
            line-height: 160px;
            position: absolute; top: 0; left: 50%;
            margin-left: -108px;
            margin-top: 14px;
            text-align: center;
            color: #fff;
            padding: 0.2em 0;
}
        .roundel.blue {
            background: url('../images/roundel-blue.png') no-repeat top left;
        }
        .roundel span.roundel-inner {
            display: inline-block;
            vertical-align: middle;
            line-height: normal;
            width: 180px;
        }
        .roundel .roundel-instagram {
            margin-top: 1.2em;
        }
        .music .roundel span.roundel-inner {
            margin-top: 0.7em;
        }
        .roundel.blue span.roundel-inner {
            width: 160px;
        }
            .roundel span.roundel-inner div.icon {
                margin-bottom: 0.4em;
            }
            .roundel span.roundel-inner div.icon-low {
                margin-top: 0.4em;
            }
            .music .roundel span.roundel-inner div.icon {
                margin-bottom: 1em;
            }
            .music .roundel span.roundel-inner div.icon-low {
                margin-top: 1em;
            }
    .content-date {
        text-align: right;
        color: #333;
        margin-top: 2px;
    }
    .content-full {
        position: absolute;
        top: 0;
        width: 100%;
    }
        .content-full a.content-full-close {
            float: right;
        }
        .content-full-container {
            color: #585858;
            background-color: rgba(255,255,255,0.4);
        }
        .content-full-container a {
            color: #f9769c;
        }
            .content-full-container a:hover, .content-full-container a:focus {
                color: #FFF;
            }
        .content-full-inner {
            padding: 15px;
            font-size: 18px;
        }
        .content-full img {
            display: block;
            max-width: 100%;
            height: auto;
            margin: 0 auto 10px auto;
        }
        .fluid-width-video-wrapper {
            margin: 0 auto 10px auto;
        }
        .content-full p {
            margin-top: 0;
        }
        .content-full iframe {
            max-width: 100%;
            z-index: 9999;
        }

#nav-below {
    text-align: center;
}
#nav-below .nav-previous {
    float: left;
}
#nav-below .nav-next {
    float: right;
}
#infscr-loading {
    text-align: center;
}

.instagram-slider {
    height: 213px;
    width: 100%;
    overflow: hidden;
}
.instagram-slider-inner {
    width: 20000em;
    position: relative;
}
    .instagram-slider img {
        height: 213px;
        float: left;
    }
    .bull {
        display: inline-block;
        margin: 0 3px;
    }
    .large-bull {
        position: relative;
        top: 4px;
        font-size: 150%;
    }


#sign-up-form .content-item-wide {
    padding: 10px;
    overflow: auto;
    background-color: rgba(255,255,255,0.4);
}

/** smartphone **/
@media (min-width: 426px) {
    .content-area {
        width: 426px;
    }
    .content-full {
        width: 426px;
    }

    .content-area-wide {
        width: 520px;
    }
}

/** tablet **/
@media (min-width: 768px) {}

/** desktop **/
@media (min-width: 1025px) {
    body {
        background: url('../images/home-colour-2016.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    body.music {
        background: url('../images/music-colour-2016.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    body.video {
        background: url('../images/video-colour-2016.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    body.live {
        background: url('../images/live-colour-2016.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    body.lyrics {
        background: url('../images/lyrics-colour-2016.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    body.music-full {}

    #bg-hook { display:inline; }
    .background-change {
        width: 100%;
        height: 100%;
        z-index: -1;
        position: fixed;
        bottom: 0;
        background: url('../images/home-gray-2016.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    body.music .background-change {
        background: url('../images/music-gray-2016.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    body.video .background-change {
        background: url('../images/video-gray-2016.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    body.live .background-change {
        background: url('../images/live-gray-2016.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    body.lyrics .background-change {
        background: url('../images/lyrics-gray-2016.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    body.error404 .background-change {
        width: 0;
        height: 0;
        display: none;
    }
    .main-container {
        width: 90%;
        margin: 0 auto;
    }
    .social-nav {
        position: fixed;
        top: 15px;
    }
    .side-bar {
        position: fixed;
        top: 7%;
    }

    .main-navigation h1{
        margin: 1em 0;
        text-align: left;
    }
    ul#menu-menu li {
        width: 120px;
        padding: 7px 0;
        text-align: center;
        border-bottom: 1px solid #fff;
        display: block;
    }

    .content-area {
        position: static;
        float: right;
        width: 426px;
        margin-top: 300px;
    }
    .content-area-wide {
        position: static;
        float: right;
        width: 520px;
        margin-top: 200px;
    }
    .content-full {
        top: 100px;
    }

    body.signup .content-area,
    body.live .content-area,
    body.error404 .content-area {
        margin-top: 232px;
    }
    body.signup p {
        margin-top: 0;
    }

}

.gigpress-container {
    font-size: 14px;
    background-color: rgba(255,255,102,0.3);
}

/* Meet the table that displays our shows */
.gigpress-table {
    margin: 10px;
    width: auto;
}

/* This is for the tour name header cells */
th.gigpress-heading {
    border-bottom: none;
    font-size: 17px;
    font-weight: normal;
    background-color: transparent;
    padding-top: 15px;
    padding-bottom: 0;
}

/* Style for rows within a tour */
tr.gigpress-tour td {
    background-color: transparent;
    padding: 5px 10px;
}

/* In case you want to style the "Buy Tickets" link */
a.gigpress-tickets-link {
    font-weight: normal;
    text-transform: uppercase;
}


div.gigpress-subscribe-row {
    margin: 0 10px;
}
/* These are for the RSS/iCal subscribe links */
p.gigpress-subscribe {
    float: right;
    text-align: left;
    color: #fff;
    font-size: 16px;
    margin: 0 auto 10px auto;
}
p.gigpress-subscribe a {
    display: inline-block;
    text-indent: -9999px;
    width: 12px;
    margin: 0 3px;
}

/*
This is the default stylesheet.  DO NOT MAKE CHNAGES HERE!
To customize any of these styles, copy the rules you which to change
into a file called 'gigpress.css' in your current theme directory.
Any style changes make there will override styles in this document.
*/

/* By default this is an h3 that appears above each artist's list of shows */
h3.gigpress-artist-heading  {
}

/* This span contains the RSS and iCal links for the artist */
span.gigpress-artist-subscriptions {
    margin-left: 5px;
    float: right;
}

/* Default wrapper for the year/month menu */
.gigpress-menu-container {
    padding: 5px 0;
    text-align: right;
}

/* Meet the table that displays our shows */
.gigpress-table {
    width: 100%;
    border: none;
    border-collapse: collapse;
    border-top: 1px solid #CCC;
    margin: 0.5em 0 1em 0;
}

/* This is for the main header cells containing the column labels */
tr.gigpress-header th {
    font-weight: bold;
}

/* Generic class for the table header cells */
.gigpress-table th {
    padding: 6px 8px;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #CCC;
}

/* This is for the tour name header cells */
th.gigpress-heading {
    background-color: #EEE;
    border-bottom: 1px solid #CCC;
}

/* This is for the tour name headings, whichever one you're using */
th.gigpress-heading h1, th.gigpress-heading h2, th.gigpress-heading h3, th.gigpress-heading h4, th.gigpress-heading h5 {
    margin: 0;
}

/* Applies to all cells in the table */
.gigpress-table td {
    padding: 6px 8px;
    vertical-align: middle;
    text-align: left;
}

/* Applies to the first row of each show listing */
.gigpress-row td {
    border-bottom: 1px solid #EEE;
}

/* To set an alternating row style */
tr.gigpress-alt {
}

/* Individual classes for the label header cells that start the table */
th.gigpress-date {
}

th.gigpress-artist {
}

th.gigpress-city {
}

th.gigpress-venue {
}

th.gigpress-country {
}

/* Likewise, individual classes for the content cells */
td.gigpress-date {
}

td.gigpress-artist {
}

td.gigpress-city {
}

td.gigpress-venue {
}

td.gigpress-country {
}

/* Style for rows within a tour */
tr.gigpress-tour td {
    background-color: #F6F6F6;
}

/* Style for the first row after a tour ends in the list */
tr.gigpress-divider.gigpress-row td {
    border-top: 2px solid #CCC;
}

/* The secondary row for each show, contains time, admission, etc */
tr.gigpress-info td {
    font-size: 90%;
    color: #333;
    border-bottom: 1px solid #CCC;
}

/* Fix for themes that hide .description */
tr.gigpress-info td.description {
    visibility: visible !important;
}

/* Greys-out cancelled shows */
tr.gigpress-row.cancelled, tr.gigpress-info.cancelled, tr.cancelled span.gigpress-info-label, tr.cancelled span.gigpress-info-item {
    color: #999;
}

/* This wraps each of the bits of info in the "info" cell */
span.gigpress-info-item {
}

/* For the labels for address, admission, etc in the "info" cell */
span.gigpress-info-label {
    color: #666;
}

/* In case you want to style the "Buy Tickets" link */
a.gigpress-tickets-link {
    font-weight: bold;
    text-transform: uppercase;
}

/* Notices for Cancelled or Sold Out shows */
strong.gigpress-cancelled, strong.gigpress-soldout {
    text-transform: uppercase;
    font-weight: bold;
    padding: 1px;
    color: #111;
    background: #fffdeb;
    border: 1px solid #EEE;
    background: #111;
    color: #FFF;
    border: none;
}

/* In case you want to style the Googlefied address link */
a.gigpress-address {
}


/* These styles control the peek-a-boo "add" links to iCal and Google Calendar. Behaviour dictated by a separate jQuery script. */
td.gigpress-links-cell {
    vertical-align: top;
}

.gigpress-calendar-add {
    position: relative;
}

a.gigpress-links-toggle {
    display: block;
    text-indent: -9999px;
    width: 11px;
    height: 11px;
    background: transparent url(../../../plugins/gigpress/images/calendar-toggle.png) no-repeat left top;
    cursor: pointer;
}

a.gigpress-links-toggle:hover {
    background-position: -11px 0px;
}

a.gigpress-link-active {
    background-position: -33px;
}

a.gigpress-link-active:hover {
    background-position: -22px;
}

div.gigpress-calendar-links {
    display: none;
    position: absolute;
    left: 20px;
    top: -1.2em;
    width: 15em;
    padding-left: 7px;
    background: transparent url(../../../plugins/gigpress/images/calendar-links-bg.png) no-repeat left center;
}

.gigpress-calendar-links-inner {
    background-color: #F3F3F3;
    padding: 6px 8px;
    font-size: 11px;
    line-height: 16px;
    border: 1px solid #CCC;
    border-width: 1px 1px 1px 0;
}

div.gigpress-calendar-links span {
    display: block;
}

/* These are for the RSS/iCal subscribe links */
p.gigpress-subscribe {
    text-align: left;
    color: #999;
}

p.gigpress-subscribe a {
    display: inline-block;
    text-indent: -9999px;
    width: 12px;
    margin: 0 3px;
}

a.gigpress-rss, a.gigpress-rss:hover {
    background: transparent url(../../../plugins/gigpress/images/feed-icon-12x12.png) no-repeat left center;
}

a.gigpress-ical, a.gigpress-ical:hover {
    background: transparent url(../../../plugins/gigpress/images/icalendar-icon.gif) no-repeat left center;
}


/* These styles are for the sidebar listing */

/* This is the unordered list that holds the dates */
ul.gigpress-listing {
}

/* Generic styles for the list items within */
.gigpress-listing li {
}

/* For artist headings in the sidebar */
h3.gigpress-list-artist-heading {
}

/* For tour headings in the sidebar */
span.gigpress-list-tour-heading {
    font-weight: bold;
    font-size: 110%;
}

/* So if you like you can style each alternating list item differently */
li.gigpress-alt {
}

/* So if you like you can style the date differently */
span.gigpress-sidebar-date {
    font-weight: bold;
    display: block;
}

/* Sold Out shows in the sidebar */
ul.gigpress-listing strong.gigpress-soldout, ul.gigpress-listing a.gigpress-tickets-link {
    display: block;
}


/* These styles control the Related Show list that appears in the body of Related Posts */
ul.gigpress-related-show {
    margin: 0 0 2em;
}

ul.gigpress-related-show ul, ul.gigpress-related-show li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.gigpress-related-label {
    font-weight: bold;
}

.gigpress-related-item {
}


/* This is just to include data for hcalendar support, but hide it from view */
.hide {
    display: none;
}

/* Stop Firefox from underlining our abbreviated dates */
abbr {
    border: none;
    text-decoration: none;
    font-size: 100%;
}

/** desktop **/
@media (min-width: 992px) {}