/*!
 * STONE 20TH
 */

/* Global Styles */

html,
body {
    width: 100%;
    height: 100%;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
    background-color: #000;
    font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #e8e8e8;
    -webkit-font-smoothing: antialiased;
}

p {
    line-height: 150%;
}

a {
    color: #c69a6b;
}

a:hover,
a:active,
a:visited {
    color: #e8c9a7;
}

blockquote {
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    border-left: none;
}

blockquote:before {
    content: "\201c";
    position: absolute;
    font-size: 80px;
    left: 20px;
    margin-top: -30px;
    opacity: 0.2;
    filter:Alpha(opacity=20);
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5 {
    color: #fff;
    font-family: "brandon-grotesque", sans-serif;
    text-transform: uppercase;
    font-weight: 800;
}

.container {
    width: 1200px;
    max-width: 100%;
    padding: 40px 15px;
    margin: 0 auto;
}

section {
    margin: 30px 0;
}

/*= BUTTONS
============================*/

.btn.btn-primary {
    font-family: "brandon-grotesque",sans-serif;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 0;
}


/*= NAVIGATION
============================*/

.navbar {
    margin-bottom: 0;
    border: 0;
}

.navbar-header {
    height: 80px;
}

.navbar-toggle {
    padding: 32px 20px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
}

.navbar-inverse {
    background-color: rgba(8, 8, 8, 0.75);
}

.navbar-fixed-top .nav {
    padding: 15px 0;
}

.navbar-fixed-top .navbar-brand {
    padding: 0 15px;
}

.navbar-fixed-top .nav {
    padding: 0;
}

.navbar-fixed-top .nav > li > a {
    padding: 30px 20px;
    border-right: none;
    font-weight: 900;
    font-size: 14px;
    font-family: 'brandon-grotesque', sans-serif;
    color: #fff;
    text-transform: uppercase;
}

.navbar>.container .navbar-brand {
    padding: 0;
}

.navbar-brand img {
    height: 75px;
    padding-top: 5px;
    margin-left: 15px;
}

#primarynav .container {
    margin: 0;
    padding: 0 15px;
    width: 100%;
}


/*= ANIMATIONS
============================*/

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to { 
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to { 
        -moz-transform: rotate(360deg);
    }
}
@-o-keyframes spin {
    from {
        -o-transform: rotate(0deg);
    }
    to { 
        -o-transform: rotate(360deg);
    }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to { 
        transform: rotate(360deg);
    }
}


/*= HEADER
============================*/

.header {
    display: table;
    position: relative;
    width: 100%;
    height: 80%;
    max-width: 100%;
    overflow: hidden;
    background-color: #000;
}

.logo {
    z-index: 2;
    position: relative;
}

.header .logo img {
    padding: 30px 0;
}

#spin {
    background: url(../img/burst.png) 0 0 no-repeat;
    position: absolute;
    top: 50%;
    margin-top: -750px;
    left: 50%;
    margin-left: -750px;
    width: 1500px;
    height: 1500px;
}

#spin, #spin20years {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    
    animation-name: spin; 
    animation-duration: 220s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    
    -webkit-animation-name: spin; 
    -webkit-animation-duration: 220s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    
    -moz-animation-name: spin; 
    -moz-animation-duration: 220s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    
    -o-animation-name: spin; 
    -o-animation-duration: 220s; 
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
    
    -ms-animation-name: spin; 
    -ms-animation-duration: 220s; 
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

.text-vertical-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 100%;
    float: none;
    position: relative;
    overflow: hidden;
}

.text-vertical-center h1 {
    margin: 0;
    padding: 0;
    font-size: 4.5em;
    font-weight: 700;
}

/*= CTA
============================*/

.cta {
    background-color: #c69a6b;
    width: 100%;
}

.cta .container {
    padding-top: 20px;
    padding-bottom: 20px;
}

.cta .button {
    text-align: right;
}

/*= TICKETS
============================*/

#tickets {
    margin-top: 0;
}

/*= INTRO
============================*/

#intro h1 {
    color: #c69a6b;
}

#intro h1 span {
    color: #fff;
}

#intro p {
    margin-top: 40px;
    font-size: 16px;
}

/*= SUBSCRIBE
============================*/

#subscribe.cta {
    background-color: #1a1a1a;
    margin: 0;
}

#subscribe.cta .container {
    padding: 35px;
}

#subscribe {
    margin-bottom: 0;
}

/*= ENCORE SCHEDULE
============================*/

#encore {
    background-color: #1a1a1a;
    margin-bottom: 0;
}

#encore .container {
    padding-left: 0;
    padding-right: 0;
}

#encore .row {
    margin: 0;
}

#encore .encore-beers {
    overflow-x: scroll; /* 1 */
    -webkit-overflow-scrolling: touch; /* 2 */
}

#encore .encore-beers ul {
    width: 100%;
    padding-left: 0;
    min-width: 1000px;
}

#encore .encore-beers ul:after { /* 5 */
  content: '';
  display: inline-block;
  width: 100%;
}

#encore .encore-logo {
    text-align: center;
    margin-bottom: 1em;
}

#encore .encore-beers .beer {
    padding-left: 7px;
    padding-right: 7px;
    text-align: center;
    min-width: 90px;
    width: 11.11%;
    display: inline-block;
    float: none;
}

#encore .beer p {
    margin-top: 15px;
    font-family: "brandon-grotesque", sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    text-align: center;
    color: #aaa;
}

#encore .full-schedule {
    margin-top: 15px;
}

#encore .full-schedule p, #encore .full-schedule p a  {
    font-family: "brandon-grotesque", sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    text-align: center;
    color: #c69a6b;
}



/*= VIDEO
============================*/

#video {
    margin-bottom: 0;
    margin-top: 0;
}

iframe.js-resize {
    display: block;
}

/*= TIMELINE HEADER: 20 Years of True Craft
============================*/

#timeline-header {
    background-color: #c69a6b;
    display: table;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 0;
    margin-top: 0;
}

#spin20years {
    background: url(../img/burst20yearscraft.png) 0 0 no-repeat;
    position: absolute;
    top: 50%;
    margin-top: -750px;
    left: 50%;
    margin-left: -750px;
    width: 1500px;
    height: 1500px;
}

#timeline-header .logo img {
    padding-top: 30px;
    padding-bottom: 10px;
    max-width: 200px;
    height: auto;
    
}

/*= TIMELINE NAV
============================*/

.affix {
    top: 80px;
    width: 100%;
}

.affix + #timeline {
    margin-top:100px;
}


#timeline-nav {
    background-color: #9d7a58;
    text-align: center;
    margin-top: 0;
    height: 60px;
    z-index: 10;
    overflow-y: hidden;
}

#timeline-nav .container{
    padding: 12px 0;
}

#timeline-nav h4 a {
    color: #fff;
}

#timeline-nav .navbar-nav {
    float: none;
    margin: 0 auto;
    display: inline-block;
}
    

#timeline-nav .navbar-nav>li>a {
    padding: 19px 6px;
    color: #fff;
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 600;
}

#timeline-nav .nav>li>a:focus, 
#timeline-nav .nav>li>a:hover {
     text-decoration: none;
     color: #3d260f;
     background-color: transparent;
}

#timeline-nav .navbar-nav>li.active:after {
    /* border-bottom: 2px solid #fff; */
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-top: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    margin-left: -8px;
}

#timeline-nav ul.filter ul,
#timeline-nav ul.filter li {
    list-style-type: none;
}

#timeline-nav ul.filter li.filter-icon {
    font-size: 18px;
    display: none;
}

#timeline-nav ul.filter li.filter-icon .fa-angle-left{
    display: none;
}

#timeline-nav ul.filter li ul.filter-sub  {
    display: none;
    top: 0;
    z-index: 9;
    left: 40px;
    background-color: rgba(157,122,88,0.95);
    width: 1000px;
    text-align: left;
    position: absolute;
    padding-left: 20px; 
    height: 60px !important;
}

#timeline-nav .navbar {
    overflow-x: scroll; /* 1 */
    -webkit-overflow-scrolling: touch; /* 2 */
}

#timeline-nav ul.nav {
    text-align: justify;
}

#timeline-nav ul.nav:after {
  content: '';
  display: inline-block;
  width: 100%;
}

#timeline-nav ul.filter-sub a {
    cursor: pointer;
    text-decoration: none;
    color: #fff;
}

#timeline-nav ul.filter-sub li {
    margin: 20px 6px;
    font-size: 14px;
    display: inline-block;
}

#timeline-nav ul.filter > li {
    display: inline-block;
}

/*= TWENTYTWENTY LABELS
============================*/

#timeline .twentytwenty-container {
    margin-top: 20px;
}

#date20061101 .twentytwenty-before-label:before {
    content: "2006";
}

#date20061101 .twentytwenty-after-label:before {
    content: "2015";
}

#date19960502 .twentytwenty-before-label:before {
    content: "May";
}

#date19960502 .twentytwenty-after-label:before {
    content: "July";
}

/*= TIMELINE
============================*/

#timeline {
    position: relative;
}



#timeline .full-image {
    min-height: 500px;
    background-color: transparent;
    background-size: cover;
    background-position: center;
}

#timeline .timeline-full {
    border-top: 2px solid #c69a6b;
}

#timeline .timeline-full .description {
    padding: 40px 30px;
    text-align: center;
    font-style: italic;
}

#timeline .timeline-full .description .author {
    font-style: normal;
    color: #c69a6b;
    text-transform: uppercase;
    display: block;
}

#timeline .timeline-halves {
    margin: 4em 0;
}

#timeline .timeline-halves .half {
    width: 50%;
    float: left;
    height: 400px;
}

#timeline .timeline-halves .half-image {
    background-size: cover;
    background-position: center center;
}

#timeline .timeline-halves .half-content {
    background-color: #c69a6b;
    padding: 40px;
}

#timeline .timeline-halves .half-content a,
#timeline .timeline-halves .half-content .share-link {
    color: #7e5226;
}

#timeline .timeline-halves .half-content p {
    color: #3d260f;
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
}

#timeline .timeline-full {
    background-color: #000;
}

.gobig img {
    height: auto;
    max-width: 40%;
}
.gobig img.expanded {
    max-width: 100%;
}

#timeline .share {
    text-align: left;
    padding: 15px 0 0;
}

#timeline .share i {
    font-size: 20px;
}

#timeline .share .share-link {
    font-family: 'brandon-grotesque', sans-serif;
    color: #c69a6b;
    font-weight: 700;
    letter-spacing: 1px;
}

#timeline .share .share-link,
#timeline .share ul.share-links,
#timeline .share ul.share-links li {
    float: left;
}

#timeline .share ul.share-links li {
    margin: 0 5px;
}


#timeline .share ul.share-links,
#timeline .share ul.share-links li {
    list-style-type: none;
    padding-left: 10px;
}

#timeline .share ul.share-links {
    opacity: .25;
    filter:Alpha(opacity=25);
    margin-bottom: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
    
}

#timeline .share:hover ul.share-links {
    opacity: 1;
    filter:Alpha(opacity=100);
}


/* Timeline CSS contained in css/timeline.css */


/*= TIMELINE YEAR DIVIDERS
============================*/

#timeline .year-divider {
    border-top: 2px solid #c69a6b;
    margin-top: 4em;
}

#timeline .year-divider:first-child {
    margin-top: 0;
}

#timeline .year-divider .year-label {
    border: 2px solid #c69a6b;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    margin-top: -36px;
    text-align: center;
    background-color: #000;
    color: #c69a6b;
    font-family: 'brandon-grotesque', sans-serif;
    font-weight: 800;
    letter-spacing: 1px;
}

#timeline .year-divider .year-label span {
    position: relative;
    top: 21px;
}

#timeline .year-divider .year-stats {
    font-family: 'brandon-grotesque', sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    text-align: right;
    position: relative;
    top: -10px;
}

#timeline .year-divider .year-stats > div {
    display: inline-block;
    border-right: 1px solid #333;
    margin-right: 10px;
    padding-right: 10px;
}
    
#timeline .year-divider .year-stats > div:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

#timeline .year-divider .year-stats .label {
    font-size: 10px;
    display: block;
    text-align: right;
    padding: 3px 0;
}

#timeline .year-divider .year-stats .stat {
    font-size: 24px;
    display: block;
    text-transform: none;
}

/*= FOOTER
============================*/

footer.footer {
    position: relative;
    background: #030303 url('../img/footer-bg.jpg') no-repeat;
    background-position: 0;
    background-size: 100%;
    overflow: hidden;
}

footer #respect {
    position: relative;
    height: 350px;
    z-index: 1;
}

footer #respect .tagline {
    height: 60px;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    width: 300px;
    display: none;
}

#footer {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 20px 30px 45px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    color: #626262;
    font-size: 0.7em;
    z-index: 1;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(8,8,8,0.85) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(8,8,8,0.85)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(8,8,8,0.85) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(8,8,8,0.85) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(8,8,8,0.85) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(8,8,8,0.85) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#d9080808',GradientType=0 );
}

#footer a, #footer a:hover {
    color: #626262;
    text-decoration: none;
}



/*= MEDIA QUERIES
============================*/

@media(max-width:999px) {
    #timeline .timeline-halves .half-content p {
        font-size: 16px;
        line-height: 140%;
    }
}

@media(max-width:999px) {
    #timeline-nav ul.nav {
        width: 1100px;
        text-align: justify;
    }
}

@media(min-width:768px) {
    body {
        padding-top: 0; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    }
    
    .navbar {
        border-radius: 0px;
    }

    .navbar-nav {
    	float: right;
    }

    .navbar-fixed-top .navbar-brand {
        padding: 15px 0;
    }
}

@media(max-width:768px) {    
    .affix {
        position: static;
    }
    .affix + #timeline {
        margin-top:0;
    }
    .cta, .cta .button {
        text-align: center;
    }
    
}

@media(max-width:700px) {
    #timeline .timeline-halves .half {
        width: 100%;
        height: auto;
        float: none;
    }
    #timeline .timeline-halves .half-image{
        height: 350px;
    }

}

@media(max-width:620px) {    
    #timeline .year-divider .year-stats .production {
        float: left;
        border-right: none;
    }
    #timeline .year-divider .year-stats .production .label,
    #timeline .year-divider .year-stats .production .stat {
        text-align: left;
    }
    #timeline .year-divider .year-stats .production .stat {
        font-size: 20px;
    }
    
}