/*****  General Page Formatting  ******************************/
body { position: relative; }
h1 { font-family: "cubano", sans-serif; font-size: 7vw; }
h2 { font-size: 5vw; font-weight: bold; }
section li { padding-bottom: 10px; }
img { border: 1px solid #ccc; max-width: 100%; }
/*****  Miscellaneous Styles  *********************************/
#icons a img { margin-bottom: 5px; }
/*****  Header Section  ***************************************/
.header { background-color: #fff; padding: 50px 10px 10px 10px; }
/*****  Search Section  ***************************************/
/*****  Navigation Section  ***********************************/
.navbar { margin-bottom: 0; }
.navbar-default { background-color: #fff; }
.navbar-default .navbar-nav>.active>a[href='#connect'] { background-color: #0080ff; border-bottom: #0080ff 3px solid; color: #fff; }
.navbar-default .navbar-nav>.active>a[href='#post'] { background-color: #fff000; border-bottom: #fff000 3px solid; }
.navbar-default .navbar-nav>.active>a[href='#buy'] { background-color: #14cc00; border-bottom: #14cc00 3px solid; color: #fff; }
.navbar-default .navbar-nav>.active>a[href='#move'] { background-color: #ff6200; border-bottom: #ff6200 3px solid; }
.navbar-default .navbar-nav>.active>a[href='#promote'] { background-color: #282828; border-bottom: #282828 3px solid; color: #fff; }
.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav a:hover { color: #282828; font-family: "cubano", sans-serif; letter-spacing: 1px; }
.navbar-default .navbar-nav>li.active>a:before { content: "stop. think. "; transition: width 0.3s ease-out; }
.navbar-default .navbar-nav>li>a[href='#connect']:hover { border-bottom: #0080ff 3px solid; }
.navbar-default .navbar-nav>li>a[href='#post']:hover { border-bottom: #fff000 3px solid; }
.navbar-default .navbar-nav>li>a[href='#buy']:hover { border-bottom: #14cc00 3px solid; }
.navbar-default .navbar-nav>li>a[href='#move']:hover { border-bottom: #ff6200 3px solid; }
.navbar-default .navbar-nav>li>a[href='#promote']:hover { border-bottom: #282828 3px solid; }
.navbar-default .navbar-nav>li.active>a[href='#connect']:hover, .navbar-default .navbar-nav>li.active>a[href='#buy']:hover, .navbar-default .navbar-nav>li.active>a[href='#promote']:hover { color: #fff; }
/*****  Content Section  **************************************/
ul.chart-labels, ul.chart { list-style-type: none; margin: 0; padding: 0; }
ul.chart-labels li { padding-top: 0; text-align: right; }
ul.chart-labels li, ul.chart li { font-size: 11px; height: 26px; margin-top: 6px; }
.chart { zoom: 1; width: 90% }
.chart:after { clear: both; content: '.'; display: block; height: 0; visibility: hidden }
.chart li { display: block; padding-bottom: 0; position: relative }
.chart li:before { color: #fff; content: attr(title); left: 5px; position: absolute; top: 5px; }
.chart li.title:before { color: #fff; font-weight: bold; left: 0; top: 5px; }
.chart li:first-child { margin-top: 0 }
.chart li .bar { background: #000; height: 100% }
.chart li .number { color: #000; font-size: 11px; font-weight: bold; padding-left: 5px; position: absolute; top: 5px; }
.chart li.past .bar { background: #0080ff; }
.chart li.past .number { color: #282828; vertical-align: middle; }
section > .container { padding-bottom: 50px; padding-top: 50px; }
#connect > .container { padding-bottom: 30px; padding-top: 0; }
#one-fish { max-width: 300px; }
#connect2 { background-color: #c5dffa; border-top: 5px solid #0080ff; }
#connect2 > .container { background: transparent url(https://keepitsafe.auburn.edu/2015/assets/img/connect-arrow.png) center top no-repeat; }
#connect2 .chart-source a, #connect2 a { color: #0080ff; }
#post { background-color: #282828; border-top: 5px solid #fff000; color: #fff; }
#post > .container { background: transparent url(https://keepitsafe.auburn.edu/2015/assets/img/post-arrow.png) center top no-repeat; }
#post .chart li:before { color: #282828; }
#post .chart li.past .bar { background: #fff000; }
#post .chart li .number { color: #fff; }
#post .chart-source a, #post a { color: #fff000; }
#buy { border-top: 5px solid #14cc00; }
#buy a { color: #14cc00; }
#buy a.btn { color: #fff; }
#buy > .container { background: transparent url(https://keepitsafe.auburn.edu/2015/assets/img/buy-arrow.png) center top no-repeat; }
#buy > .container a.btn-default { background-color: #ddd; color: #282828; }
.media:first-child { margin-top: 15px; }
.media-object { height: 70px; max-width: none; width: 70px; }
.media-heading { font-size: 14px; font-weight: bold; }
.media-body span.description { display: none; }
#move { background-color: #282828; border-top: 5px solid #ff6200; color: #fff; }
#move > .container { background: transparent url(https://keepitsafe.auburn.edu/2015/assets/img/move-arrow.png) center top no-repeat; }
#move .chart li:before { color: #282828; }
#move .chart li.past .bar { background: #ff6200; }
#move .chart li .number { color: #fff; }
#move .chart-source a, #move a { color: #ff6200; }
#promote > .container { background: transparent url(https://keepitsafe.auburn.edu/2015/assets/img/promote-arrow.png) center top no-repeat; }
#promote div[id$='-media'] img, #promote div[id$='-media'] a { display: block; margin: 5px auto; }
#connect-media a { background: #0080ff; color: #fff; }
#connect-media a:hover { background: #006cd8; }
#post-media a { background: #fff000; color: #282828; }
#post-media a:hover { background: #ddd000; }
#buy-media a { background: #14cc00; color: #282828; }
#buy-media a:hover { background: #10ab00; }
#move-media a { background: #ff6200; color: #fff; }
#move-media a:hover { background: #d05000; }
/*****  Sidebar Section  **************************************/
/*****  Footer Section  ***************************************/
/*****  Bootstrap Overrides  **********************************/
.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video { border: 1px solid #282828; }

@media (min-width: 768px) {
/*****  General Page Formatting  ******************************/
h1 { font-size: 5vw; }
h2 { font-size: 3vw; font-weight: normal; }
section > .container { padding-bottom: 80px; padding-top: 80px; }
/*****  Miscellaneous Styles  *********************************/
/*****  Header Section  ***************************************/
.header { padding: 80px 10px 10px 10px; }
/*****  Search Section  ***************************************/
/*****  Navigation Section  ***********************************/
.navbar { border-bottom: none; }
/*****  Content Section  **************************************/
#one-fish { max-width: 100%; }
#connect2 { background: #f2f9ff url(https://keepitsafe.auburn.edu/2015/assets/img/connect-bg2.jpg) top center fixed no-repeat; background-size: cover; }
#post, #move { background: #282828 url(https://keepitsafe.auburn.edu/2015/assets/img/post-bg.jpg) center left repeat-y; }
#buy { background: #fff url(https://keepitsafe.auburn.edu/2015/assets/img/buy-bg.jpg) top center fixed no-repeat; background-size: cover; }
/*****  Sidebar Section  **************************************/
/*****  Footer Section  ***************************************/
/*****  Bootstrap Overrides  **********************************/
.navbar-header { display: none; }
}

@media (min-width: 992px) {
/*****  General Page Formatting  ******************************/
/*****  Miscellaneous Styles  *********************************/
/*****  Header Section  ***************************************/
/*****  Search Section  ***************************************/
/*****  Navigation Section  ***********************************/
/*****  Content Section  **************************************/
/*****  Sidebar Section  **************************************/
/*****  Footer Section  ***************************************/
/*****  Bootstrap Overrides  **********************************/
}

@media (min-width: 1200px) {
/*****  General Page Formatting  ******************************/
h1 { font-size: 4vw; }
h2 { font-size: 2vw; }
/*****  Miscellaneous Styles  *********************************/
/*****  Header Section  ***************************************/
/*****  Search Section  ***************************************/
/*****  Navigation Section  ***********************************/
/*****  Content Section  **************************************/
/*****  Sidebar Section  **************************************/
/*****  Footer Section  ***************************************/
/*****  Bootstrap Overrides  **********************************/
}
