html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}
.footer {
    background-color: #f1781d;
    display: table-row;
    height: 0;
    
}
    .footer .row {padding:20px 0 20px 0;
    }
    .footer p { color:#fff; }
    .footer a { color:#fff; }
.fr {float:right;}
h1 {font-family: 'Montserrat',Helvetica, sans-serif;font-size:43px;}
h2 {font-family: 'Montserrat',Helvetica, sans-serif;font-size:22px;}
h3 {font-family: 'Montserrat',Helvetica, sans-serif;font-size:22px;font-weight:normal;}
p {font-family: 'Montserrat',Helvetica, sans-serif;font-size:15px;color:#808080;padding:5px 0 10px 0;line-height:1.7em;}
p.sketchy {font-family: SketchetikLight, sans-serif;font-size:49px;}
a {text-decoration:underline;color:#f1781d;}
a:hover {text-decoration:underline;color:#000;}
br.clr {clear:both;}

.alert {margin-bottom:0;}
/*.header {height:123px;border-bottom:1px solid #e7e7e7;}*/
/* navbar overrides */
/* bootstrap sets the min-height to 50, if you're wondering where the extra height comes from */
.navbar{min-height:inherit;padding-top:12px;}
.navbar-primary .navbar, .navbar-primary ul { border:none;margin-bottom:5px; padding-right:0;background-color:transparent;}
.navbar-primary .navbar .nav > li {}
.navbar .nav > li > a {font-family:'Montserrat',Helvetica,sans-serif;font-size:16px;font-weight:normal;background-color:transparent;text-decoration:none;padding:5px 7px 10px 7px;color:#000;}

.navbar-inverse {
    background-color:#000;

}
    .navbar-inverse .navbar-nav > .active > a {
        background-color:#222;
    }
    .navbar-inverse .navbar .nav > li > a {
        color: #fff;
    }
.navbar-inverse .navbar-toggle {
    color:#fff;
    border-color:#ccc;
}
    .navbar-primary .navbar .nav > li.active > a {
        border-bottom: 4px solid #f1781d;
        color: #f1781d;
    } 
.navbar-primary .navbar .nav li > a .caret, .tnav .navbar .nav li > a:hover .caret {border-top-color: #ccc;border-bottom-color: #fff;}
.navbar-primary .navbar .nav > li > a:hover .caret {border-top-color: #000;}

.navbar-nav {margin-left:-15px;margin-right:-15px;}
.dropdown-menu > li {background-color:#fff;}
.dropdown-menu > li > a {text-decoration:none;}
.dropdown-menu > li.m1 > a {font-weight:bold;}
.dropdown-menu > li.m2 > a {font-weight:600;}
.navbar-default .navbar-nav .open > a, .navbar-default .navbar-nav .open > a:focus, .navbar-default .navbar-nav .open > a:hover {background-color:#fff;}


.topcarousel {margin-top:0;background-color:#000;padding-top:0;padding-bottom:0;}
.carousel-inner .item h1 {padding:10px;color:#fff;position:absolute;width:40%;font-size:3em;background-color:rgba(99,99,99,0.4)}
.carousel-inner .item h1.pos0 {top:20%;left:2%;}
.carousel-inner .item h1.pos1 {top:20%;right:2%;text-align:right;}
.carousel-inner .item h1.pos2 {bottom:20%;left:2%;}
.carousel-inner .item h1.pos3 {bottom:20%;right:2%;text-align:right;}
.carousel-inner .item h1.pos4 {bottom:15%;right:15%;width:70%;font-size:1.2em;text-align:center;}
.carousel-inner .item h1 small {display:block;font-size:.5em;color:#eee;font-weight:normal;line-height:1.4em;}
/* handy technique to valign middle */
.topcarousel .carousel-control img {position:absolute;top: 0;  max-height:49px; max-width:26px;
    bottom: 0;  left: 0;  right: 0;  margin: auto;  }

#carousel-custom .carousel-control img {position:absolute;top: 0;  max-height:49px; max-width:26px;
    bottom: 0;  left: 0;  right: 0;  margin: auto;  }

.carousel-indicators li {margin-right:5px;background-color:#4e4f54;border-color:#4e4f54;}
.carousel-indicators li.active {margin-right:5px;}

.obg {background-color:#f1781d;padding-top:60px;padding-bottom:60px;}
.obg h1, .obg h2, .obg p {color:#fff;}
.obg p {color:#fff;font-size:140%;}
    .obg a {color:#ff0;}
    .infow a {color:#f1781d;}
    .infow strong {color:#000;font-weight:normal;}

.wbg {background-color:#fff;padding-top:40px;padding-bottom:40px;}
.wbg h1, .wbg p {color:#000;}
.wbg h2 {font-family: 'SketchetikLight', sans-serif;font-size:49px;color:#000;}
.wbg a {color:#f1781d;}

/* twitter carousel */
.twitter {background-color:#28a9e0;}
.twitter h3 {font-family: 'SketchetikLight', sans-serif;font-size:49px;color:#fff;}
#carousel-twitter p {font-family: 'Montserrat',Helvetica, sans-serif;font-size:16px;color:#fff;}
#carousel-twitter a {color:#000;}
#carousel-twitter .item {margin:10px 17% 40px 17%;text-align:center;}
#carousel-twitter .right.carousel-control {background:transparent;}
#carousel-twitter .left.carousel-control {background:transparent;}

.alert-warning {background-color:#ddd;border-color:#ccc;color:#333;}

.more h2 {font-family: 'SketchetikLight', sans-serif;font-size:49px;color:#000;}
.hitem {background-color:#f7f7f7;}
.hitem img {width:100%;margin-bottom:15px;}
.more a {color:#000;text-decoration:none;}
.hitem h3 {padding:0 15px 10px 15px;margin:0;}
.more a .hitem p {padding:0 15px 15px 15px;color:#999;}

.bc img {width:100%; margin-bottom:30px;}
.quote {padding:40px;background-color:#f7f7f7;}
.quote p {text-align:center;font-size:140%;}
span.vc {font-size:70%;text-transform:uppercase;color:#f1781d;}

/* events list */
h2.season {border-bottom:1px solid #e5e5e5;}
h2.sketchy {font-family: SketchetikLight, sans-serif;font-size:49px;text-transform:lowercase;color:#f1781d;}
h2.sketchw {font-family: SketchetikLight, sans-serif;font-size:49px;text-transform:lowercase;color:#fff;}
span.category {color:#000;}

div.spring {padding-left:30px;background-image:url('../graphics/pin_green.png');background-position:0 10px;background-repeat:no-repeat;}
div.summer {padding-left:30px;background-image:url('../graphics/pin_orange.png');background-position:0 10px;background-repeat:no-repeat;}
div.autumn {padding-left:30px;background-image:url('../graphics/pin_brown.png');background-position:0 10px;background-repeat:no-repeat;}
div.curious {padding-left:30px;background-image:url('../graphics/pin_blue.png');background-position:0 10px;background-repeat:no-repeat;}
div.mathsfest {
    padding-left: 30px;
    background-image: url('../graphics/pin_blue.png');
    background-position: 0 10px;
    background-repeat: no-repeat;
}

.spring h2 {padding-top:10px;}
.summer h2 {padding-top:10px;}
.autumn h2 {padding-top:10px;}
.curious h2 {padding-top:10px;}
.mathsfest h2 {
    padding-top: 10px;
}

a.event {font-size:larger;}
.modal-body img {margin-top:10px;margin-right:10px; margin-bottom:10px;}
/* classes for the virtual show page */
.virtual {
    background-color: #000;
}

.virtual_show {
    padding-top:40px;
    background-image: url('../graphics/virtual/Virtual-show-geometric-1203.png');
    background-repeat: no-repeat;
    min-height:800px;
}
.virtual_show h1, .virtual_show h2, .virtual_show h3, .virtual_show p {
    color:#fff;
}
    .virtual_show h1 {
        font-size:50px;
    }
    .virtual_show h2 {
        font-size: 30px;
    }
    .virtual_show p {
        font-size: 20px;
    }
    .amazing {
        text-align: center;
    }
.virtual_show .bc {
    background-color:rgba(102,102,102,0.8)
}
.pullquote {
 font-size:25px;
 font-weight:bold;
}
    .attribution {
        font-size: 25px;
        font-weight: normal;
    }
.virtual .header {
    border-bottom: 1px solid #333;
}
/* end classes for the virtual show page */
/* speakers list */
.speaker {
    border-bottom: 1px solid #e7e7e7;
}
.speaker img {margin-top:10px;margin-right:10px; margin-bottom:10px;}
.header {
    border-bottom: 1px solid #e7e7e7;
}
.cards {
    float:right;
    width:400px;
}
.watchandplay {
    background-color:#ccc;
    margin-top:-150px;
    padding-top:150px;
}

    .watchandplay img {
        width:100%;
    }

@media (min-width: 992px) {
.header {height:123px;}

}
@media (max-width: 990px) {

  .navbar-brand img {margin:-10px 0 0 -30px;}
  .navbar-toggle {margin-right:0;}
  .carousel-inner .item h1 {font-size:14px;}
    .virtual .col-sm-8 {
        text-align: center;
    }
}
@media (max-width: 600px) {
    .virtual_show {
        padding-top: 10px;
        background-position-x:-150px;
        min-height: 800px;
    }
    .cards {
        display:none;
    }
    .watchandplay {
        margin-top: 20px;
        padding-top: 20px;
    }

}