body {
    background-attachment:fixed;
    background-color:black; /* chrome mobile doesn't pin bg image when hiding nav bar */
    color:white;
    font-size:12pt;
    padding-top:60px;
    background-image:url('/static/bg.jpg');
    background-position:center top;
}
#body {width:100%; overflow:hidden;} /* dont change viewport size for offscreen (animated) content */

a, .nowrap {white-space:nowrap;}
h1, h2, h3, h4, .navbar-brand {font-family:'Dancing Script'; font-weight:bold; text-align:center;}
h1 {font-size:28pt; color:gold;}
h2 {font-size:22pt; color:gold;}
img {max-width:100%;}
.full-width {width:100%;}
.carousel {cursor:move;}
.carousel, .carousel * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.col {margin-bottom:1em;}
.copy {background:white;}
.mast {padding:0;}
.mast img {width:100%;}
.gutter {margin-bottom:1em;}
.nodrain {margin-top:0;}
.nopad {padding:0;}
.rounded {border-radius:0.5em;}
.vcenter {display:inline-block; vertical-align:middle; float:none;} /* vcenter (w/ neighbors only). must <!-- whitespace --> between them */
.navbar-default {background-image:url('/static/nav-bg.jpg'); background-size:cover;}
.navbar-brand {font-size:18pt;}
.well {background:rgba(0,0,0,0.5); border-radius:0; padding:1em;}
.white {color:white;}
#splash-prybar {height:calc(100vw*(100/314));}

@media screen and (orientation:portrait) {
    body {background-size:auto 100vh;}
}
@media screen and (orientation:landscape) {
    body {background-size:100vw auto;}
}
/* == xxs */
@media screen and (max-width:479px) {
}

/* <= xs */
@media screen and (max-width:767px) {
    #splash-image {display:none;}
    #splash-text {font-size:inherit;}
    #splash-text h1 {text-align:center;}
}

/* <= sm */
@media screen and (max-width:991px) {
}

/* >= xxs */
@media screen and (min-width:480px) {
    #brand {font-size:36pt;}
}

/* >= sm */
@media screen and (min-width:768px) {
    h1 {font-size:36pt;}
    h2 {font-size:24pt;}
    #brand {font-size:48pt;}
    #splash-image {position:absolute; top:60px;}
    #splash-text {margin-bottom:2em;}
    #splash-text h1 {font-size:28pt; margin-top:0;}
    #splash-text p {font-size:11pt; margin-bottom:0;}
}

/* >= md */
@media screen and (min-width:992px) {
    body {font-size:14pt;}
    h2 {font-size:32pt;}
    #brand {font-size:72pt;}
    #splash-text h1 {font-size:36pt;}
}

/* >= lg */
@media screen and (min-width:1200px) {
    h1 {font-size:42pt;}
    h2 {font-size:36pt;}
    #splash-text h1 {font-size:48pt;}
    #splash-text p {font-size:16pt;}
}