/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

body {
    margin:0;
    font-family: 'Open Sans', sans-serif;
    font-smoothing: antialiased;
    -webkit-font-smoothing : antialiased;
    -moz-font-smoothing: antialiased;
    -webkit-overflow-scrolling:touch;
}

.disabled {
    /*overflow: hidden;*/
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

h1,h2,h3,h4,h5 { font-weight: normal; }

.nowrap { white-space: nowrap; }

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html.landing, html.landing body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
}
html.landing body {
    background: #191919;
}

html.landing header {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:30%;
    background: url('../img/logo-landing.png') center 10% no-repeat;
}

html.landing header h1 {
    font-family: SlateTitlingGothicFB-MediumCond;
    position: absolute;
    top: 30%;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
    color: white;
    font-size: 40px;
}

html.landing header h2 {
    font-family:Apres;
    color: #E8E8E8;
    position: absolute;
    top: 65%;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    text-align: center;
    font-size: 14px;
}

html.landing .categories{
    position: absolute;
    width: 100%;
    height: 70%;
    top: 30%;
    font-size: 0;
}
html.landing .categories a {
    display: block;
    margin: 0;
    position: absolute;
    width: 33.333%;
    height: 100%;
    top:0;
    left:0;
    text-align: center;
    color: white;
    background: url("../img/music-landing.png") no-repeat center center;
    background-size: cover;
    font-size: 20px;
    line-height: 20px;
    font-family: BrandonGrotesqueBold;
    -webkit-transition: font 0.1s ease;
    -moz-transition: font 0.1s ease;
    -o-transition: font 0.1s ease;
    -ms-transition: font 0.1s ease;
    text-decoration: none;
}
html.landing .categories a:nth-of-type(2){
    left: 33.333%;
    background: url("../img/food-landing.png") no-repeat center center;
    background-size: cover;
}
html.landing .categories a:nth-of-type(3){
    left: 66.666%;
    background: url("../img/ceramics-landing.png") no-repeat center center;
    background-size: cover;
}
html.landing .categories a:before {
    content: "";
    display: inline-block;
    height: calc(100% + 40px);
    vertical-align: middle;
}
html.landing .categories a:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    -webkit-transition: background 0.1s ease;
    -moz-transition: background 0.1s ease;
    -o-transition: background 0.1s ease;
    -ms-transition: background 0.1s ease;
}
html.landing .categories a:hover {
    font-size: 30px;
    line-height: 30px;
}
html.landing .categories a:hover:after {
    background:none;
}
html.landing .categories a span {
    display: inline-block;
}

@media screen and (max-width: 740px) {
    html.landing header h1 {
        top:30%;
        font-size: 30px;
    }
    html.landing header h2 {
        top: 60%;
        font-size: 11px;
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media screen and (max-width: 740px) and (orientation: portrait) {
    html.landing .categories a {
        width: 100%;
        height: 33.333%;
        background-image: url("../img/music-landing-mobile.png");
    }
    html.landing .categories a:nth-of-type(2) {
        left: 0;
        top: 33.333%;
        background-image: url("../img/food-landing-mobile.png");
    }
    html.landing .categories a:nth-of-type(3) {
        left: 0;
        top: 66.666%;
        background-image: url("../img/ceramics-landing-mobile.png");
    }
}

@media screen and (max-width: 740px) and (orientation: landscape) {
    html.landing header {
        height: 40%;
    }
    html.landing .categories {
        height: 60%;
        top: 40%;
    }
    html.landing .categories a:hover {
        font-size: 24px;
        line-height: 24px;
    }
}

@media screen and (max-width: 320px) and (max-height: 560px) {
    html.landing header h1 {
        top:25%;
    }
    html.landing header h2 {
        font-size: 10px;
        top: 55%;
    }
}

h1 {
    margin: 0;
    font-size: 2em;
}
h2 {
    margin: 0;
    font-size: 1em;
}
h3 {
    margin: 0;
    font-size: 2em;
}

h4 {
  margin: 0;
  font-size: .9em;
}

.topbar{
    position:fixed;
    top:-70px;
    left:0;
    width:100%;
    height: 60px;
    background-color: white;
    z-index: 9000;
    border-bottom:2px solid black;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.29);
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.29);
}
.topbar.visible{
    top:0;
}

.topbar div {
    display: inline-block;
}

.hamburger {
    height:60px;
    /*background: url("../img/menu.png") 20px center no-repeat;*/
    text-indent: 20px;
    line-height: 65px;
    text-transform: uppercase;
    font-family: 'BrandonGrotesque-Black';
}

.hamburger a {
    color: black;
    text-decoration: none;
}

.topbar .logo {
    position: absolute;
    top:0;
    left:25%;
    height: 60px;
    line-height: 60px;
    width: 50%;
    text-align: center;
}
.topbar .social {
    float: right;
    height: 60px;
    line-height:60px;
}
.topbar .social img {
    margin-right: 20px;
}

.topbar .slate {
    float: right;
    width: 150px;
    height: 60px;
    background: #660033 url('../img/slate.png') center center no-repeat;
}

.content{
    position:absolute;
    z-index: 800;
    left:0%;
    width: 100%;
    opacity:0;
    display: none;
    background-color:white;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
}


body.m .content.m {
    display:block;
    opacity:1;
    z-index: 900;
}
body.f .content.f {
    display:block;
    opacity:1;
    z-index: 900;
}
body.c .content.c {
    display:block;
    opacity:1;
    z-index: 900;
}

html.ready .content {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

.hero {
    top: 0;
    margin: 0;
    background-size: cover;
    height: 100vh;
    position:relative;
    overflow: hidden;
}

.hero img {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:calc(100vw / 1440*620);
    visibility: hidden;
    z-index:100;
}

.hero.turntable {
    background: none;
    background-size: 100%;
    width: 100%;
    height: calc(100vw / 1920*1080);
    max-height: 600px;
}

.hero.dj {
    background: url("../img/hero.png") no-repeat center center fixed;
    background-size: cover;
}

.hero.hand {
    background: none;
    background-size: 100%;
    width: 85%;
    height: calc(85vw / 1280*720);
}

.hero.food1 {
    background: none;
    background-size: 100%;
    width: 100%;
    height: calc(100vw / 1920*1080);
    max-height: 600px;
}
.hero.food2 {
    background: none;
    background-size: 100%;
    width: 85%;
    height: calc(85vw / 1280*720);
}
.hero.ceramics1 {
    background: none;
    background-size: 100%;
    width: 100%;
    height: calc(100vw / 1280*720);
    max-height: 600px;
}
.hero.ceramics2 {
    background: none;
    background-size: 100%;
    width: 85%;
    height: calc(85vw / 1280*720);
}
.hero.dinner{
    width: 100%;
    height: calc(100vh - 150px) !important;
    min-height: 500px;
}

.hero.hand img {
    height:calc(85vw / 1211*620);
}

.hero .frame {
    width:70%;
    height: 70%;
    border: 3px solid white;
    position: absolute;
    top: 15%;
    left: 15%;
    z-index: 1000;
}

.hero.intro .frame, .hero.foodIntro .frame, .hero.ceramicsIntro .frame{
    overflow: hidden;
}

.hero .frame .interactive-container {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 500%;
    font-size:0;
}

.ninetypercent {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:90%;
    overflow:hidden;
    cursor: pointer;
}

.hero .frame .interactive {
    display: block;
    margin:0;
    width: 100%;
    height: 20%;
    text-align: center;
    font-size: 15px;
    background-color: white;
    left: 0;
    top: 0;
}
.hero .frame .interactive:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.hero .frame .content-container-container { /* settings in 2nd screen + */
    position: absolute;
    width: 300px;
    height: 366px;
    left: 50%;
    top: 50%;
    margin-top: -183px;
    margin-left: -3px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}



.content-container-container .content-container {
    position: relative;
    width:100%;
    height:100%;
    overflow: hidden;
}

.hero.intro .frame .content-container-container,
.hero.foodIntro .frame .content-container-container,
.hero.ceramicsIntro .frame .content-container-container{
    top: 100%; /* intro slide settings */
    margin-top: 0;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}



.content-container .flags {
    position: relative;
    margin: 16px 16px 0 0;
    width: 37px;
    height: 28px;
    overflow: hidden;
    float: right;
}

.flags .flags-container{
    position: absolute;
    width: 100%;
    height: 500%;
    top:0;
    -webkit-transition: top 0.5s ease;
    -moz-transition: top 0.5s ease;
    -o-transition: top 0.5s ease;
    -ms-transition: top 0.5s ease;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
}

.flags-container .flag {
    width: 100%;
    height: 20%;
}
.flag.uk {
    background: url("../img/flags/uk.png") 0 0 no-repeat;
    background-size: contain;
}
.flag.usa {
    background: url("../img/flags/usa.png") 0 0 no-repeat;
    background-size: contain;
}

.content-container .texts {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 13%;
    left: 10%;
    color: white;
    overflow: hidden;
}

@media screen and (max-width: 670px) {
  .content-container .texts {
    width: 77%;
  }
}

.texts .texts-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500%;
    -webkit-transition: top 0.5s ease;
    -moz-transition: top 0.5s ease;
    -o-transition: top 0.5s ease;
    -ms-transition: top 0.5s ease;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
}
.texts .texts-container .text {
    width: 100%;
    height: 20%;
    overflow: hidden;
}

.texts .texts-container .text h3 {
    font-family: SlateTitlingGothicFB-StandCond;
    font-size: 30px;
    line-height: 30px;
}

.texts .texts-container .text p {
    font-size: 13px;
    font-family: Apres;
}

.years {
    display:none;
    position:absolute;
    width:10%;
    height: 100%;
    top:0;
    left:40%;
    font-family: SlateTitlingGothicFB-StandCond;
    font-weight: 300;
}
.years .years-container {
    position:absolute;
    width:100%;
    height: 500%;
    -webkit-transition: top 0.5s ease;
    -moz-transition: top 0.5s ease;
    -o-transition: top 0.5s ease;
    -ms-transition: top 0.5s ease;
}

.years .years-container .year {
    width: 100%;
    height: 20%;
    text-align:center;
    color: white;
    font-size: 25px;
    position: relative;
}
.years .years-container .year span {
    position: absolute;
    top: calc(25% + 9px);
    left: 0;
}

nav {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    position: fixed;
    top: 50%;
    margin-top: -20px;
    z-index: 1100;
    font-size:0;
    background: black url(../img/downarrow.png) no-repeat center center;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

nav.left {
    left: -2px;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform:  rotate(90deg);
}

nav.right {
    right: -2px;
    -moz-transform: rotate(-90deg);
    -webkit-transform:  rotate(-90deg);
    transform:  rotate(-90deg);
}

.black-nav {
    width: 40px;
    height: 100%;
    line-height: 4%;
    text-align: center;
    font-size: 14px;
    background-color: black;
    position: fixed;
    top: 0;
    z-index: 1100;
    color: white;
    -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
}

.black-nav a {
    color: white !important;
    text-decoration: none;
}

.black-nav div {
    display: none;
}
body.m .black-nav .m{
    display:block;
}
body.f .black-nav .f{
    display:block;
}
body.c .black-nav .c{
    display:block;
}



.black-nav p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1000%;
    text-align: center;
    font-size: 16px;
}

.black-nav.left{
    left:-40px;
}
.black-nav.left p{
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

.black-nav.right{
    right:-40px;
}
.black-nav.right p{
    -moz-transform: translateX(-50%) translateY(-50%) rotate(90deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
    transform:  translateX(-50%) translateY(-50%) rotate(90deg);
}

.black-nav p img {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    margin: 0 10px;
    vertical-align: middle;
}


.disabled nav, .disabled .black-nav {
    display: none !important;
}


/******************
  Scrolling Slides Arrow Animation
*******************/

.interactive-section {
  background-color: #fff;
  overflow: hidden;
}

.hero .frame .content-container:before { /* the knotch */
    content:"";
    width: 11px;
    height: 17px;
    position: absolute;
    top: 52px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 0 0 99999px rgba(0, 0, 0, .8);
}

.dot {
  position: absolute;
  top: calc(50% - 130px);
  left: -50%;
  margin-left: 6px;
  width: 15px;
  height: 15px;
  border: 3px solid #fff;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  z-index: 1000;
}

.foodIntro .dot,
.ceramicsIntro .dot,
.intro .dot {
  top: 50%;
}

.vl {
    width: 30px;
    height:100%;
    position:absolute;
    left: 50%;
    margin-left: -1.5px;
    top:0;
    z-index:1000;
}

.vl .top-line {
    width: 3px;
    height: calc(50% - 127px);
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.intro .vl .top-line,
.foodIntro .vl .top-line,
.ceramicsIntro .vl .top-line {
    height: 0;
    top: calc(50% - 10px);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.vl .btm-line {
    width: 3px;
    background-color: #fff;
    position: absolute;
    top: calc(50% - 109px);
    left: 0;
    bottom: 30px;
}

.intro .vl .btm-line,
.foodIntro .vl .btm-line,
.ceramicsIntro .vl .btm-line {
    top: calc(50% + 21px); /* intro slide setting */
}

.line-arrow {
    position: absolute;
    width: 30px;
    height: 17px;
    margin-left: -13px;
    bottom: 35px;
}

.line-arrow:before {
    content: '';
    border-top: 3px solid #fff;
    transform: rotate(40deg);
    display: block;
    width: 21px;
    bottom: 0;
    left: -3px;
    position: absolute;
}

.line-arrow:after {
    content: '';
    border-top: 3px solid #fff;
    transform: rotate(-40deg);
    display: block;
    width: 20px;
    position: absolute;
    bottom: 0;
    right: -2px;
}


#interactive-section[data-slide="jacku"]:after,
#food-interactive-section[data-slide="lecoq"]:after,
#ceramics-interactive-section[data-slide="ronald"]:after{
    background:none;
}


#interactive-section[data-slide="gorgon"] .vl:before,
#food-interactive-section[data-slide="strut"] .vl:before,
#ceramics-interactive-section[data-slide="kate"] .vl:before{
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
}


#interactive-section[data-slide="jacku"] .vl:after,
#food-interactive-section[data-slide="lecoq"] .vl:after,
#ceramics-interactive-section[data-slide="ronald"] .vl:after{
    height: calc(48% - 10px);
    bottom: 15%;
}

#interactive-section.disabled,
#music-av.disabled,
#food-interactive-section.disabled,
#ceramics-interactive-section.disabled {
    width:100%;
    height:100vh !important;
    z-index: 800;
}

@media all and (max-width: 1290px) {

  .hero .frame {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
  }

  .dot {
    top: calc(50% - 138px);
  }

  .vl .top-line {
    height: calc(50% - 135px);
  }
  .vl .btm-line {
    bottom: 20px;
    top: calc(50% - 117px);
  }

  .line-arrow {
    bottom: 25px;
  }

  #interactive-section[data-slide="jacku"] .vl:after,
  #food-interactive-section[data-slide="lecoq"] .vl:after,
  #ceramics-interactive-section[data-slide="ronald"] .vl:after{
    height: calc(63% - 10px);
    bottom: 5%;
  }

  .hero .frame .content-container:before {
    top: 43px;
  }

} /* close 1290 */


@media all and (max-width: 940px) {

  .hero .frame {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    border:none;
  }

  .hero .frame .content-container-container {
    width: 70%;
    height: 70%;
    left: 30%;
    margin-left: 0;
    margin-top: 0;
    top: 75px;
  }

  .dot {
    top: 140px;
  }

  .hero.intro .dot,
  .hero.foodIntro .dot,
  .hero.ceramicsIntro .dot {
    top: 40%;
  }

  .vl {
    left: 30%;
  }

  .vl .top-line {
    height: 142px
  }

  .vl .btm-line {
    top: 159px;
  }

  .intro .vl .btm-line,
  .foodIntro .vl .btm-line,
  .ceramicsIntro .vl .btm-line {
    top: calc(40% + 21px);
  }

  #interactive-section[data-slide="jacku"] .vl:after,
  #food-interactive-section[data-slide="lecoq"] .vl:after,
  #ceramics-interactive-section[data-slide="ronald"] .vl:after{
    height: calc(72% - 20px);
    bottom:0;
  }

  #interactive-section:after,
  #food-interactive-section:after,
  #ceramics-interactive-section:after {
    left: 30%;
  }

} /* close 940 */

@media all and (max-width: 670px) {
  .hero .frame .content-container-container {
    margin-top: 0;
    top: 59px;
    height: 77%;
  }
  .dot {
    top: 115px;
  }
  .hero.intro .dot,
  .hero.foodIntro .dot,
  .hero.ceramicsIntro .dot {
    top: 44%;
  }
  .intro .vl .btm-line,
  .foodIntro .vl .btm-line,
  .ceramicsIntro .vl .btm-line {
    top: calc(44% + 21px);
  }

  .vl .top-line {
    height: 116px
  }
  .vl .btm-line {
    top: 133px;
  }

} /* close 670 */



hr {
    width: 70%;
    margin: 60px auto;
    border-top-width: 2px;
}

section.legal {
    font-family: ApresItalic;
    padding: 0 15% 140px 15%;
    text-align: center;
    font-size: 15px;
    color: #9B9B9B;
    font-style: italic;
}

#vis {
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -600px;
    margin-top: -300px;
    background:white url(../img/vis-bg.png) center center no-repeat;
}

.playing #vis {
    background: white;
}



.interactive-container {
    width: 100%;
    height: 500%;
}

.slide {
    margin:0;
    width: 100%;
    height: 20%;
    text-align: center;
    color: white;
    font-size: 20px;
    background-size: cover;
    background-attachment: scroll;
    background-position: center center;
    overflow: hidden;
    -webkit-transition: height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    -ms-transition: height 0.5s ease;
}
.slide.intro {
    background-image: url("../img/timeline/music/1.png");
}
.slide.kyla {
    background-image: url("../img/timeline/music/2.png");
}
.slide.aluna{
    background-image: url("../img/timeline/music/3.png");
}
.slide.gorgon{
    background-image: url("../img/timeline/music/4.png");
}
.slide.jacku{
    background-image: url("../img/timeline/music/5.png");
}

.slide.foodIntro {
    background-image: url("../img/timeline/food/1.jpg");
}
.slide.clove {
    background-image: url("../img/timeline/food/2.png");
}
.slide.turtle {
    background-image: url("../img/timeline/food/3.png");
}
.slide.strut {
    background-image: url("../img/timeline/food/4.png");
}
.slide.lecoq {
    background-image: url("../img/timeline/food/5.png");
}

.slide.ceramicsIntro {
    background-image: url("../img/timeline/ceramics/1.png");
}
.slide.michael {
    background-image: url("../img/timeline/ceramics/2.png");
}
.slide.chris {
    background-image: url("../img/timeline/ceramics/3.png");
}
.slide.jonathan {
    background-image: url("../img/timeline/ceramics/4.png");
}
.slide.kate {
    background-image: url("../img/timeline/ceramics/5.png");
}
.slide.ronald{
    background-image: url("../img/timeline/ceramics/6.png");
}

.slide.intro:before, .slide.foodIntro:before, .slide.ceramicsIntro:before {
    content: "";
    display: inline-block;
    height: 37%;
    vertical-align: middle;
}

.slide.intro h2, .slide.foodIntro h2, .slide.ceramicsIntro h2 {
    font-family: 'SlateTitlingGothicFB-MediumCondItalic', Arial, Helvetica, sans-serif;
    font-size:30px;
}


section.text h1,
section.text h2{
    margin-left: 20%;
    margin-right: 5%;
}

section.text h1 {
    margin-top: 2%;
    font-family: 'SlateTitlingGothicFB-MediumCond', Arial, Helvetica, sans-serif;
    font-size: 52px;
    line-height: 48px;
}
section.text h2 {
    font-family: 'SlateTitlingGothicFB-StandCond', Arial, Helvetica, sans-serif;
    font-size: 23px;
}

section.text blockquote {
    font-family: 'SlateTitlingGothicFB-MediumCond', Arial, Helvetica, sans-serif;
    width: 70%;
    margin: 2% auto 5%;
    font-size: 42px;
    line-height: 1em;
}

section.text blockquote:before {
    content: '\201C';
    position: absolute;
    margin-left: -.5em;
}

section.text h4 {
    font-family: 'SlateTitlingGothicFB-MediumCond', Arial, Helvetica, sans-serif;
    font-size: 32px;
    margin: 0 0 0 calc(15% - 10px);
    background-color: white;
    position:relative;
    line-height: 30px;
    min-height: 30px;
    display:inline-block;
    bottom: 17px;
    padding: 0 10px;
}

.iframed section.text h4 {
  position: static;
  margin-top: 10px;
}

section.text h5 {
    font-family: Apres;
    font-size: 20px;
    margin: -15px 15% 50px 15%;
    font-weight: normal;
}

.iframed section.text h5 {
  margin-top: 0;
}

section.text h5 span {
    font-size: 16px;
    font-family: 'ApresItalic', Arial, Helvetica, sans-serif;
    font-style: italic;
}
section.text h5 a {
    text-decoration: none;
    color:#779BBE;
}

section.text p {
    font-family: 'Apres', Arial, Helvetica, sans-serif;
    width: 50%;
    margin: 20px auto 0 auto;
    padding-left: 20%;
    font-size: 20px;
    line-height: 1.2em;
}

section.text p:first-of-type{
    margin-top: 20px;
}

section.text p:last-of-type{
    margin-bottom: 5%;
}

section.text .hr {
    margin-bottom: 0 !important;
    padding-bottom: 10%;
    border-bottom: 3px solid black;
}

.byline {
    font-family: 'Apres', Arial, Helvetica, sans-serif;
    font-style: italic;
    display: block;
    position: absolute;
    left: 20%;
    margin-top: 35px;
    font-size: 18px;
}

.hero.av {
    height: 480px !important;
}

.video-container {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
}

.video-container:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    top: 40%;
    left: 50%;
    margin: -50px 0 0 -50px;
    border: 2px solid #ee3057;
    color: #ee3057;
    background: white url(../img/playbtn.png) 34px center no-repeat;
    background-size: 40%;
    font-size: 50px;
    text-align: center;
    border-radius: 50%;
    line-height: 100px;
    text-indent: 10px;
}


.video-container.playing:after {
    display:none;
}

video {
    position: absolute;
    width: 100%;
    height: 90%;
    top:0;
    left:0;
    visibility: hidden;
}
video.bdgpsz {
    visibility: visible;
}

.buttons{
    position:absolute;
    bottom:0;
    left:50%;
    width:600px;
    margin-left:-300px;
    font-size:0;
    border-radius: 2px;
}

.buttons button {
    position:relative;
    display: inline-block;
    width: 60px;
    height: 40px;
    border-radius: 8px;
    margin-right: 30px;
    margin-bottom: 40px;
    border: 1px solid #979797;
    background-color:white;
    font-size:0;
    outline: none;
}
.buttons button:last-of-type {
    margin-right:0;
}
.buttons button:first-of-type{
    margin-left: 0;
}
.buttons button:before {
    content: attr(value);
    font-family: 'BrandonGrotesqueBold', Arial, Helvetica, sans-serif;
    position:absolute;
    font-size: 15px;
    top: 140%;
    left:0;
    width: calc(100% + 30px);
    margin-left: -15px;
    text-align: center;
    color: rgba(0,0,0,0.6);
    /*text-shadow: rgb(224, 224, 224) 1px 1px 0px;*/
}
.buttons button:after{
    content: "";
    position:absolute;
    top:4px;
    left:12.5px;
    width:30px;
    height:30px;
    margin:0;
    border-radius: 15px;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
}
.buttons .drums:after{
    background-color: #3A3A3A;
}
.buttons .bass:after{
    background-color: #604E16;
}
.buttons .synth:after{
    background-color: #FF3296;
}
.buttons .plucks:after{
    background-color: #C7C533;
}
.buttons .piano:after{
    background-color: #79FF8E;
}
.buttons .guitar:after{
    background-color: #2482C8;
}
.buttons .all:after {
    background-color: #F12C54;
}

.buttons .dis:after {
    background-color:white;
    border: 1px solid #979797;
    top:3px;
}

.dinner-table {
    position:absolute;
    top:0;
    left:0;
    width:200%;
    height: 200%;
    background: url(../img/dinner_table.jpg) no-repeat center center;
    background-size: contain;
    transform: scale(0.5);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    transform-origin: 0 0;
    -webkit-transition: transform 0.5s ease;
    -moz-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
    -ms-transition: transform 0.5s ease;
}

.dinner-active .dinner-table {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}

.dinner-table.first,
.dinner-table.second,
.dinner-table.third,
.dinner-table.fourth {
    transform: scale(1);
}


.dinner-table .text {
    font-family: Apres;
    font-weight: 300;
    position: absolute;
    width:10%;
    font-size:16px;
    opacity: 0;
    transition: opacity 1s ease;
}
.dinner-table .text b {
    font-family: ApresBold;
    font-weight: normal;
}
.dinner-table .text h5 {
    font-family: ApresBold;
    font-weight: normal;
    font-size: 20px;
    margin: 0;
}
.dinner-table .text.first {
    left: -10%;
    top:10%;
}

.dinner-table .text.second {
    left: 9%;
    top: 63%;
    width: 15%;
}
.dinner-table .text.third {
    left: 63%;
    top: 18%;
}
.dinner-table .text.fourth {
    left: 98%;
    top: 15%;
}
.dinner-table.first .text.first {
    opacity: 1;
}
.dinner-table.second .text.second {
    opacity: 1;
}
.dinner-table.third .text.third {
    opacity: 1;
}
.dinner-table.fourth .text.fourth {
    opacity: 1;
}

.dinner-table.reverse .text {
    opacity:0 !important;
}

.dinner-table .spot {
    position: absolute;
    cursor: zoom-in;
}

.dinner-active .dinner-table .spot {
    cursor: pointer;
}

.dinner-active .dinner-table.first .spot.first,
.dinner-active .dinner-table.second .spot.second,
.dinner-active .dinner-table.third .spot.third,
.dinner-active .dinner-table.fourth .spot.fourth{
    cursor: zoom-out;
}

.dinner-table .spot.first{
    width: 15vw;
    height: 15vw;
    left: 2vw;
    top: 12vw;
}
.dinner-table .spot.second{
    width: 14vw;
    height: 14vw;
    left: 17vw;
    top: 22vw;
}
.dinner-table .spot.third{
    width: 20vw;
    height: 16vw;
    left: 46vw;
    top: 15vw;
}
.dinner-table .spot.fourth{
    width: 18vw;
    height: 20vw;
    left: 75vw;
    top: 6vw;
}

.makery {
    height: 800px !important;
}

.makery .object {
    position:absolute;
    width:33.333%;
    left:0;
    top:0;
    height: 100%;
    background: url(../img/ceramics/vase_outline.png) center center no-repeat;
    background-size: 60%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}


.makery .object img {
    width: 700px;
    left: 50%;
    top: 0;
    margin-left: -350px;
    height: auto;
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
}


.makery .object video {
  position: static;
  width: 700px;
  height: 800px;
  margin: 0 auto;
  display: block;
}

.makery .object video.sm {
  width: 350px;
  height: 400px;
}

.makery .object.active {
    background: white !important;
}
.makery .object:nth-of-type(2) {
    left: 33.333%;
    background-image: url(../img/ceramics/cup_outline.png);
}
.makery .object:nth-of-type(3) {
    left: 66.666%;
    background-image: url(../img/ceramics/sculpture_outline.png);
}

.makery .object:hover{
    background-size: 100%;
}

.makery .object.active:hover{
    background-size: 60%;
}

.makery .object.active video {
  visibility: visible;
}

.makery .outro {
    display:none;
    position:absolute;
    top: 0;
    width:100%;
    height:100%;
    background-color:white;
    z-index: 1000;
    background-position: top center;
    background-repeat: no-repeat;
    transition: background 0.5s linear;
}

.makery .done .outro {
    display:block;
}

.makery .done[data-object="vase"] .outro {
    background-image: url(../img/ceramics/sequence/vase/outro/001.jpg);
}
.makery .done[data-object="vase"] .outro:hover {
    background-image: url(../img/ceramics/sequence/vase/outro/002.jpg);
}

.makery .done[data-object="cup"] .outro {
    background-image: url(../img/ceramics/sequence/cup/outro/001.jpg);
}
.makery .done[data-object="cup"] .outro:hover {
    background-image: url(../img/ceramics/sequence/cup/outro/002.jpg);
}

.makery .done[data-object="sculpture"] .outro {
    background-image: url(../img/ceramics/sequence/sculpture/outro/001.jpg);
}
.makery .done[data-object="sculpture"] .outro:hover {
    background-image: url(../img/ceramics/sequence/sculpture/outro/002.jpg);
}

.makery .reset {
    position: absolute;
    width: 218px;
    height: 40px;
    background: white;
    border: 1px solid #979797;
    border-radius: 8px;
    font-family: BrandonGrotesqueBold;
    font-size: 15px;
    bottom: 10%;
    left:50%;
    margin-left: -109px;
    z-index: 1000;
    line-height: 39px;
}
.makery .reset.hidden {
    display:none;
}

@keyframes translateDishFirst {
    0%{
        transform: scale(1);
    }
    100% {
        transform: scale(2);
    }
}
@keyframes translateDishFirstReverse {
    0%{
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes translateDishSecond {
    0%{
        transform: scale(1);
    }
    100% {
        transform: scale(2);
    }
}
@keyframes translateDishSecondReverse {
    0%{
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes translateDishThird {
    0%{
        transform: scale(1);
    }
    100% {
        transform: scale(2);
    }
}
@keyframes translateDishThirdReverse {
    0%{
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes translateDishFourth {
    0%{
        transform: scale(1);
    }
    100% {
        transform: scale(2);
    }
}
@keyframes translateDishFourthReverse {
    0%{
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}

#explore {
    background: url(../img/explore.png) 0 0 no-repeat;
    width: 99px;
    height: 99px;
    position: fixed;
    bottom: 20px;
    right: 60px;
    z-index: 99999;
    opacity: 1;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
}
#explore.hide {
    opacity: 0;
    display: none;
}


.loader {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background-color:white;
    text-align: center;
}

.loader:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

html.loading, html.loading body {
    width:100%;
    height:100%;
    overflow:hidden;
}


footer {
    width:100%;
    height: 50px;
    background-color: black;
    position: fixed;
    z-index:9999;
    bottom:-100px;
    -webkit-transition: bottom 0.1s ease;
    -moz-transition: bottom 0.1s ease;
    -o-transition: bottom 0.1s ease;
    -ms-transition: bottom 0.1s ease;
}


footer .nav a {
    position: absolute;
    padding: 0 60px;
    height: 100%;
    line-height: 50px;
    color: white;
    text-decoration: none;
}
footer .nav a:before {
    content: "";
    width: 60px;
    height: 100%;
    position: absolute;
    background: url('../img/downarrow.png') no-repeat center center;
}
footer .left {
    left:0;
    text-align: left;
}
footer .right {
    right: 0;
    text-align: right;
}
footer .left:before {
    left: 0;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
footer .right:before {
    right: 0;
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

footer div {
    display:none;
}
body.m footer .m{
    display:block;
}
body.f footer .f{
    display:block;
}
body.c footer .c{
    display:block;
}

footer .backtotop{
    display: block;
    position: absolute;
    width: 150px;
    height: 40px;
    top: -40px;
    left:50%;
    margin-left:-75px;
    text-align:center;
    background-color:white;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.29);
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.29);
}
footer .backtotop:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
footer .backtotop a {
    color: black;
    text-decoration: none;
    font-family: BrandonGrotesqueBold;
    font-size: 13px;
}

.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

.mobile-dinner-active section.text h5 {
    opacity: 0;
    z-index: 0;
}


@media screen and (max-width: 800px) {
    .topbar .social {
        display: none;
    }
}

@media screen and (max-width: 670px) {
    .topbar .slate {
        display: none;
    }

    .topbar .logo {
        left: 0;
        width: 100%;
    }

    .topbar .hamburger a {
        color: white;
    }
    .buttons {
        width: 330px;
        margin-left: -165px;
    }
    .solo.plucks {
        margin-right: 0;
    }
    .solo.piano {
        margin-left: 45px;
    }
}

@media all and (max-width: 1290px) {
    .legal br {
        display:none;
    }

    .makery {
        height: 400px !important;
    }
    .makery .object img {
        width: 350px;
        margin-left: -175px;
    }
    .makery .outro {
        background-size: 350px;
    }
}

@media all and (max-width: 940px) {

    .intro h2, .foodIntro h2, .ceramicsIntro h2 {
        font-size:30px;
        margin-top: -50px
    }
    section.text h1 {
        margin-top: 5%;
    }
    section.text h1, section.text h2 {
        margin-left: 10%;
        margin-right: 10%;
    }
    section.text p {
        padding-left: 10%;
        padding-right: 10%;
        width: 80%;
        font-size: 13px;
        line-height: 1.4em;
    }
    .byline {
        position: static;
        margin-top: 15px;
    }

    .years {
        width:25%;
        left:10%;
    }

    #interactive-section .slide,
    #food-interactive-section .slide,
    #ceramics-interactive-section .slide {
        background-attachment: scroll;
    }
    .text h5 {
        margin-bottom: 0px !important;
    }
    #vis {
        background: url(../img/vis-bg.png) center center no-repeat;
    }
    .playing #vis {
        background: none;
    }
    #explore {
        background: url(../img/explore-mobile.png) 0 0 no-repeat;
        width: 36px;
        height: 36px;
        right: 0;
        bottom: 0;
    }
    .hero.av {
        height: 440px !important;
    }
    .video-container:after {
        top:110px;
    }
    .hero .frame .content-container:before {
        top: 67px;
        margin-left: -2px;
    }
}
@media screen and (max-width: 670px) {
  .hero .frame .content-container:before {
    top: 57px;
  }
}

@media all and (max-width: 670px) and (orientation: portrait) {
    .texts .texts-container .text h3 {
        font-size: 25px;
        line-height: 25px;
    }
    .dinner-table {
        background: url(../img/dinner_table_mobile.png) no-repeat center center;
        background-size: contain;
    }
    .mobile-dinner-active .dinner-table,
    .dinner-table.first,
    .dinner-table.second,
    .dinner-table.third,
    .dinner-table.fourth{
        background: url(../img/dinner_table.jpg) no-repeat center center;
        background-size: contain;
    }
    .hero.dinner{
        padding-top: 100px;
        margin-top: -100px;
        z-index: 900;
    }
    section.text h4 {
        font-size: 28px;
    }
    section.text h4, section.text h5{
        position: relative;
        z-index:1000;
    }

}

@media all and (max-width: 940px) and (orientation: landscape) {
    .ninetypercent {
        height: 100%;
    }
    #interactive-section:after, #food-interactive-section:after, #ceramics-interactive-section:after {
        bottom: 0%;
    }
    .hero.intro:after, .hero.foodIntro:after, .hero.ceramicsIntro:after {
        bottom: 5% !important;
    }
    .vl:after{
        height: calc(73% - 33px);
    }
    .hero .frame .content-container-container {
        height: 75%;
        top: 16%;
        margin-top: 0;
    }
    .hero .frame .content-container:before {
        top: calc(8.5% + 10px);
    }
    section.text h4, section.text h5{
        position: relative;
        z-index:1000;
    }
    .hero.dinner {
        top: -50px;
    }
    .mobile-dinner-active .hero.dinner {
        min-height: 340px;
    }
    .dinner-table .text {
        font-size: 12px;
    }
    .dinner-table .text h5 {
        font-size: 16px;
    }
}

@media all and (max-width: 570px) and (orientation: landscape) {
    .texts .texts-container .text h3 {
        font-size: 25px;
        line-height: 25px;
    }
    .texts .texts-container .text p {
        font-size: 12px;
    }
}

@media all and (max-width: 350px) {
    .texts .texts-container .text h3 {
        font-size: 25px;
        line-height: 25px;
    }
    .texts .texts-container .text p {
        font-size: 12px;
    }
    .buttons {
        width: 300px;
        margin-left: -150px;
    }
    .buttons button {
        margin-right: 20px;
    }
    .solo.piano {
        margin-left: 40px;
    }
}


/* TRANSITIONS */
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes moveInFromLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes moveInFromLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes moveOutToLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

@keyframes moveOutToLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

@-webkit-keyframes moveInFromRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes moveInFromRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes moveOutToRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
    }
}

@keyframes moveOutToRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
    }
}

.content {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    transition-timing-function: ease-in;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.is-exiting .content {
    transition-timing-function: ease-out;
}

#main[data-transition=fade] .content {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

#main[data-transition=fade].is-exiting .content {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

#main[data-transition=moveleft] .content {
    -webkit-animation-name: moveInFromLeft;
    animation-name: moveInFromLeft;
}

#main[data-transition=moveleft].is-exiting .content {
    -webkit-animation-name: moveOutToRight;
    animation-name: moveOutToRight;
}

#main[data-transition=moveright] .content {
    -webkit-animation-name: moveInFromRight;
    animation-name: moveInFromRight;
}

#main[data-transition=moveright].is-exiting .content {
    -webkit-animation-name: moveOutToLeft;
    animation-name: moveOutToLeft;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}