@charset "UTF-8";
/* CSS Document */

/* Global */

html, body { background-color: rgb(240, 220, 180); margin: 0; padding: 0; height: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
img, embed, object, video { border: none; padding: 0; margin: 0; width: 100%; display: block; }
.preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; }
.red { color: rgb(238, 64, 61); }
a.red { color: rgb(238, 64, 61); text-decoration: none; cursor: pointer; }
a.red-bold { font-weight: 400; color: rgb(238, 64, 61); text-decoration: none; cursor: pointer; }
.white-bold { font-weight: 400; color: rgb(255, 255, 255); }
.white { color: rgb(255, 255, 255); }
.kerning { letter-spacing: .05em; }
a:active, a:focus { outline: none; }
.bold { color: rgb(40, 40, 40); font-weight: 800; }





/* Mobile Small */
@media screen
and (max-width: 374px) {
	
body:after { content: 'mobile'; display: none; }
.nav-preload { position: absolute; left: -10000px; top: -10000px; }
#wrapper { margin: 0; padding: 0; position: relative; width: 100%; height: 100%; }
.site-overlay { display: none; }
	
.menu-trigger { position: absolute; top: 40px; left: 5%; padding: 0; width: 50px; height: 40px; z-index: 70000; }

/* --- header nav --- */

.logo { position: fixed; top: 10px; left: 47.5%; margin: 0 auto 0 -50px; width: 100px; text-align: center; z-index: 11000; }
#header-wrapper { background-color: rgb(80, 80, 80); position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 10000; }
#nav-wrapper { display: none; }

/* nav level one */

ul.primary { display: none; }

/* --- main content --- */

#main-content { background-color: rgb(255, 255, 255); float: left; margin: calc(80px + 5%) 0 5% 5%; width: 90%; overflow: hidden; }
.main-header { background: rgb(140, 140, 140); float: left; clear: both; width: 100%; height: 75px; }
.header-left { background: rgb(40, 40, 40); float: left; width: 90%; height: 60px; }
.header-title { float: left; margin: 14px 0 0 6%; width: 100%; font-family: 'alkaline'; font-size: 1.6rem; color: rgb(255, 255, 255); text-align: left; }
.header-right { background: rgb(240, 220, 180); float: right; width: 10%; height: 75px; overflow: hidden; }
.social-header { display: none; }
.boxes-wrapper { background: rgb(255, 255, 255); float: left; clear: both; width: 100%; overflow: hidden; }
.content-wrapper { margin: 5%; float: left; width: 90%; overflow: hidden; }
.feature-box { float: left; clear: both; width: 100%; height: 460px; overflow: none; }
.feature-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(95% - 2px); overflow: none; }
.feature-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.feature-banner { display: none; }
.feature-title { display: none; }
.feature-image { background-size: cover; background-position: center; background-image: url('https://www.thebob.com/img/feature-thebob.jpg'); float: left; width: 100%; height: 180px; overflow: hidden; }
.feature-right { float: left; width: 5%; height: 460px; }
.feature-copy { margin: 20px 0 0 7%; float: left; width: 86%; height: 260px; overflow: hidden; }
.feature-copy-title { float: left; margin: 0; width: 100%; font-family: 'serenity'; font-weight: 400; font-size: 1.8rem; font-style: italic; color: rgb(250, 220, 150); text-align: center; }
.feature-copy-details { float: left; margin: 8px 0 0 0; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: .9rem; color: rgb(255, 255, 255); line-height: 1.4em; text-align: center; }
.button-box-feature { float: right; margin: 20px 0 30px 0; width: 100%; height: 44px; text-align: center; }
a.feature-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -60px; width: 120px; height: 44px; font-family: 'quasimoda'; font-weight: 400; font-size: .9rem; color: rgb(255, 255, 255); line-height: 2.8em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.feature-button:hover, a.feature-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }
.video-box {background: url(https://www.thebob.com/svg/shadow-feature.svg);background-position: left top;background-repeat: no-repeat;background-size: 100% auto;float: left;clear: both;width: 100%; /* 1020px */}
.video-wrapper {position: relative;margin: 0;padding: 0;width: 96.078431372549%; /* 980px */overflow: hidden;}
.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 3.125%;height: 0;overflow: hidden;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%; /* 1000px */height: 100%;}
.show-box { margin: 20px 0 0 0; float: left; width: 100%; overflow: none; }
.show-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(95% - 2px); overflow: none; }
.show-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.show-right { float: left; width: 5%; }
.show-image { float: left; width: 100%; overflow: hidden; }
.show-copy-box { margin: 5% 0 0 7%; float: left; width: 86%; text-align: center; overflow: hidden; }
.show-title { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 1.4rem; font-style: italic; color: rgb(250, 220, 150); }
.show-copy { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: .9rem; color: rgb(255, 255, 255); }
.button-box-show { float: right; margin: 20px 0 30px 0; width: 100%; height: 44px; text-align: center; }
a.show-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -60px; width: 120px; height: 44px; font-family: 'quasimoda'; font-weight: 400; font-size: .9rem; color: rgb(255, 255, 255); line-height: 2.8em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.show-button:hover, a.show-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }

}





/* Mobile */
@media screen
and (min-width: 375px)
and (max-width: 480px) {
	
body:after { content: 'mobile'; display: none; }
.nav-preload { position: absolute; left: -10000px; top: -10000px; }
#wrapper { margin: 0; padding: 0; position: relative; width: 100%; height: 100%; }
.site-overlay { display: none; }
	
.menu-trigger { position: absolute; top: 50px; left: 5%; padding: 0; width: 62px; height: 50px; z-index: 70000; }

/* --- header nav --- */

.logo { position: fixed; top: 12px; left: 47.5%; margin: 0 auto 0 -60px; width: 120px; text-align: center; z-index: 11000; }
#header-wrapper { background-color: rgb(80, 80, 80); position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 10000; }
#nav-wrapper { display: none; }

/* nav level one */

ul.primary { display: none; }

/* --- main content --- */

#main-content { background-color: rgb(255, 255, 255); float: left; margin: calc(100px + 5%) 0 5% 5%; width: 90%; overflow: hidden; }
.main-header { background: rgb(140, 140, 140); float: left; clear: both; width: 100%; height: 90px; }
.header-left { background: rgb(40, 40, 40); float: left; width: 90%; height: 70px; }
.header-title { float: left; margin: 16px 0 0 6%; width: 56%; font-family: 'alkaline'; font-size: 1.8rem; color: rgb(255, 255, 255); text-align: left; }
.header-right { background: rgb(240, 220, 180); float: right; width: 10%; height: 90px; overflow: hidden; }
.social-header { float: right; margin: 15px 15px 0 0; width: 32%; height: 40px; text-align: right; }
.social-header-icon { position: relative; margin: 0 0 0 5px; width: 40px; text-align: center; display: inline-block; }
.social-header-icon-wrapper { position: relative; margin: 0 auto 0 auto; top: 0; left: 0; width: 40px; height: 40px; }
.social-header-red { float: left; width: 40px; z-index: 1; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-red:hover, .social-header-red:active { opacity: 0; }
.social-header-white { position: absolute; top: 0; left: 0; width: 40px; z-index: 2; opacity: 0; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-white:hover, .social-header-white:active { opacity: 1; }
.boxes-wrapper { background: rgb(255, 255, 255); float: left; clear: both; width: 100%; overflow: hidden; }
.content-wrapper { margin: 5%; float: left; width: 90%; overflow: hidden; }
.feature-box { float: left; clear: both; width: 100%; height: 550px; overflow: none; }
.feature-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(95% - 2px); height: 550px; overflow: none; }
.feature-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.feature-banner { position: absolute; top: 30px; left: 0; width: 140px; z-index: 100; }
.feature-title { position: absolute; top: 60px; left: 15px; text-align: left; z-index: 101; }
.title-top { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 1.6rem; font-style: italic; color: rgb(255, 255, 255); line-height: 1.1em; }
.title-bottom { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: .9rem; color: rgb(250, 220, 150); line-height: 1.1em; }
.feature-image { background-size: cover; background-position: center; background-image: url('https://www.thebob.com/img/feature-thebob.jpg'); float: left; width: 100%; height: 240px; overflow: hidden; }
.feature-right { float: left; width: 5%; height: 550px; }
.feature-copy { margin: 20px 0 0 7%; float: left; width: 86%; height: 290px; overflow: hidden; }
.feature-copy-title { float: left; margin: 0; width: 100%; font-family: 'serenity'; font-weight: 400; font-size: 2rem; font-style: italic; color: rgb(250, 220, 150); text-align: center; }
.feature-copy-details { float: left; margin: 10px 0 0 0; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1rem; color: rgb(255, 255, 255); line-height: 1.5em; text-align: center; }
.button-box-feature { float: right; margin: 25px 0 30px 0; width: 100%; height: 48px; text-align: center; }
a.feature-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -70px; width: 140px; height: 48px; font-family: 'quasimoda'; font-weight: 400; font-size: 1rem; color: rgb(255, 255, 255); line-height: 2.8em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.feature-button:hover, a.feature-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }
.video-box {background: url(https://www.thebob.com/svg/shadow-feature.svg);background-position: left top;background-repeat: no-repeat;background-size: 100% auto;float: left;clear: both;width: 100%; /* 1020px */}
.video-wrapper {position: relative;margin: 0;padding: 0;width: 96.078431372549%; /* 980px */overflow: hidden;}
.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 3.125%;height: 0;overflow: hidden;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%; /* 1000px */height: 100%;}
.show-box { margin: 20px 0 0 0; float: left; width: 100%; overflow: none; }
.show-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(95% - 2px); overflow: none; }
.show-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.show-right { float: left; width: 5%; }
.show-image { float: left; width: 100%; overflow: hidden; }
.show-copy-box { margin: 5% 0 0 10%; float: left; width: 80%; text-align: center; overflow: hidden; }
.show-title { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 1.5rem; font-style: italic; color: rgb(250, 220, 150); }
.show-copy { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1rem; color: rgb(255, 255, 255); }
.button-box-show { float: right; margin: 25px 0 40px 0; width: 100%; height: 48px; text-align: center; }
a.show-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -70px; width: 140px; height: 48px; font-family: 'quasimoda'; font-weight: 400; font-size: 1rem; color: rgb(255, 255, 255); line-height: 2.8em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.show-button:hover, a.show-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }

}





/* Mobile Large */
@media screen
and (min-width: 481px)
and (max-width: 767px) {
	
body:after { content: 'mobile'; display: none; }
.nav-preload { position: absolute; left: -10000px; top: -10000px; }
#wrapper { margin: 0; padding: 0; position: relative; width: 100%; height: 100%; }
.site-overlay { display: none; }
	
.menu-trigger { position: absolute; top: 60px; left: 5%; padding: 0; width: 75px; height: 60px; z-index: 70000; }

/* --- header nav --- */

.logo { position: fixed; top: 16px; left: 47.5%; margin: 0 auto 0 -70px; width: 140px; text-align: center; z-index: 11000; }
#header-wrapper { background-color: rgb(80, 80, 80); position: fixed; top: 0; left: 0; width: 100%; height: 120px; z-index: 10000; }
#nav-wrapper { display: none; }

/* nav level one */

ul.primary { display: none; }

/* --- main content --- */

#main-content { background-color: rgb(255, 255, 255); float: left; margin: calc(120px + 5%) 0 5% 5%; width: 90%; overflow: hidden; }
.main-header { background: rgb(140, 140, 140); float: left; clear: both; width: 100%; height: 100px; }
.header-left { background: rgb(40, 40, 40); float: left; width: 90%; height: 76px; }
.header-title { float: left; margin: 14px 0 0 6%; width: 58%; font-family: 'alkaline'; font-size: 2.2rem; color: rgb(255, 255, 255); text-align: left; }
.header-right { background: rgb(240, 220, 180); float: right; width: 10%; height: 100px; overflow: hidden; }
.social-header { float: right; margin: 15px 15px 0 0; width: 30%; height: 46px; text-align: right; }
.social-header-icon { position: relative; margin: 0 0 0 5px; width: 46px; text-align: center; display: inline-block; }
.social-header-icon-wrapper { position: relative; margin: 0 auto 0 auto; top: 0; left: 0; width: 46px; height: 46px; }
.social-header-red { float: left; width: 46px; z-index: 1; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-red:hover, .social-header-red:active { opacity: 0; }
.social-header-white { position: absolute; top: 0; left: 0; width: 46px; z-index: 2; opacity: 0; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-white:hover, .social-header-white:active { opacity: 1; }
.boxes-wrapper { background: rgb(255, 255, 255); float: left; clear: both; width: 100%; overflow: hidden; }
.content-wrapper { margin: 5%; float: left; width: 90%; overflow: hidden; }
.feature-box { float: left; clear: both; width: 100%; height: 650px; overflow: none; }
.feature-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(95% - 2px); overflow: none; }
.feature-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.feature-banner { position: absolute; top: 40px; left: 0; width: 150px; z-index: 100; }
.feature-title { position: absolute; top: 70px; left: 20px; text-align: left; z-index: 101; }
.title-top { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 1.8rem; font-style: italic; color: rgb(255, 255, 255); line-height: 1.1em; }
.title-bottom { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: .9rem; color: rgb(250, 220, 150); line-height: 1.1em; }
.feature-image { background-size: cover; background-position: center; background-image: url('https://www.thebob.com/img/feature-thebob.jpg'); float: left; width: 100%; height: 300px; overflow: hidden; }
.feature-right { float: left; width: 5%; height: 600px; }
.feature-copy { margin: 30px 0 0 10%; float: left; width: 80%; height: 320px; overflow: hidden; }
.feature-copy-title { float: left; margin: 0; width: 100%; font-family: 'serenity'; font-weight: 400; font-size: 2.2rem; font-style: italic; color: rgb(250, 220, 150); text-align: center; }
.feature-copy-details { float: left; margin: 10px 0 0 0; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.1rem; color: rgb(255, 255, 255); line-height: 1.6em; text-align: center; }
.button-box-feature { float: right; margin: 30px 0 40px 0; width: 100%; height: 52px; text-align: center; }
a.feature-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -80px; width: 160px; height: 52px; font-family: 'quasimoda'; font-weight: 400; font-size: 1.1rem; color: rgb(255, 255, 255); line-height: 2.7em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.feature-button:hover, a.feature-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }
.video-box {background: url(https://www.thebob.com/svg/shadow-feature.svg);background-position: left top;background-repeat: no-repeat;background-size: 100% auto;float: left;clear: both;width: 100%; /* 1020px */}
.video-wrapper {position: relative;margin: 0;padding: 0;width: 96.078431372549%; /* 980px */overflow: hidden;}
.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 3.125%;height: 0;overflow: hidden;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%; /* 1000px */height: 100%;}
.show-box { margin: 20px 0 0 0; float: left; width: 100%; overflow: none; }
.show-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(95% - 2px); overflow: none; }
.show-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.show-right { float: left; width: 5%; }
.show-image { float: left; width: 100%; overflow: hidden; }
.show-copy-box { margin: 5% 0 0 10%; float: left; width: 80%; text-align: center; overflow: hidden; }
.show-title { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 1.6rem; font-style: italic; color: rgb(250, 220, 150); }
.show-copy { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.1rem; color: rgb(255, 255, 255); }
.button-box-show { float: right; margin: 30px 0 50px 0; width: 100%; height: 52px; text-align: center; }
a.show-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -80px; width: 160px; height: 52px; font-family: 'quasimoda'; font-weight: 400; font-size: 1.1rem; color: rgb(255, 255, 255); line-height: 2.7em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.show-button:hover, a.show-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }

}





/* Tablet Vertical */
@media screen
and (min-width: 768px)
and (max-width: 1023px) {
	
body:after { content: 'mobile'; display: none; }
.nav-preload { position: absolute; left: -10000px; top: -10000px; }
#wrapper { margin: 0; padding: 0; position: relative; width: 100%; height: 100%; }
.site-overlay { display: none; }
	
.menu-trigger { position: absolute; top: 69px; left: 5%; padding: 0; width: 88px; height: 70px; z-index: 70000; }

/* --- header nav --- */

.logo { position: fixed; top: 10px; left: 47.5%; margin: 0 auto 0 -80px; width: 160px; text-align: center; z-index: 11000; }
#header-wrapper { background-color: rgb(80, 80, 80); position: fixed; top: 0; left: 0; width: 100%; height: 140px; z-index: 10000; }
#nav-wrapper { display: none; }

/* nav level one */

ul.primary { display: none; }

/* --- main content --- */

#main-content { background-color: rgb(255, 255, 255); float: left; margin: calc(140px + 5%) 0 40px 5%; width: 90%; overflow: hidden; }
.main-header { background: rgb(140, 140, 140); float: left; clear: both; width: 100%; height: 120px; }
.header-left { background: rgb(40, 40, 40); float: left; width: 90%; height: 90px; }
.header-title { float: left; margin: 18px 0 0 6%; width: 60%; font-family: 'alkaline'; font-size: 2.6rem; color: rgb(255, 255, 255); text-align: left; }
.header-right { background: rgb(240, 220, 180); float: right; width: 10%; height: 120px; overflow: hidden; }
.social-header { float: right; margin: 20px 20px 0 0; width: 30%; height: 50px; text-align: right; }
.social-header-icon { position: relative; margin: 0 0 0 6px; width: 50px; text-align: center; display: inline-block; }
.social-header-icon-wrapper { position: relative; margin: 0 auto 0 auto; top: 0; left: 0; width: 50px; height: 50px; }
.social-header-red { float: left; width: 50px; z-index: 1; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-red:hover, .social-header-red:active { opacity: 0; }
.social-header-white { position: absolute; top: 0; left: 0; width: 50px; z-index: 2; opacity: 0; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-white:hover, .social-header-white:active { opacity: 1; }
.boxes-wrapper { background: rgb(255, 255, 255); float: left; clear: both; width: 100%; overflow: hidden; }
.content-wrapper { margin: 5%; float: left; width: 90%; overflow: hidden; }
.feature-box { float: left; clear: both; width: 100%; height: 720px; overflow: none; }
.feature-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(95% - 2px); overflow: none; }
.feature-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.feature-banner { position: absolute; top: 60px; left: 0; width: 180px; z-index: 100; }
.feature-title { position: absolute; top: 95px; left: 25px; text-align: left; z-index: 101; }
.title-top { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 2.2rem; font-style: italic; color: rgb(255, 255, 255); line-height: 1.1em; }
.title-bottom { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1rem; color: rgb(250, 220, 150); line-height: 1.1em; }
.feature-image { background-size: cover; background-position: center; background-image: url('https://www.thebob.com/img/feature-thebob.jpg'); float: left; width: 100%; height: 360px; overflow: hidden; }
.feature-right { float: left; width: 5%; height: 720px; }
.feature-copy { margin: 40px 0 0 10%; float: left; width: 80%; height: 320px; overflow: hidden; }
.feature-copy-title { float: left; margin: 0; width: 100%; font-family: 'serenity'; font-weight: 400; font-size: 2.4rem; font-style: italic; color: rgb(250, 220, 150); text-align: center; }
.feature-copy-details { float: left; margin: 10px 0 0 0; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.2rem; color: rgb(255, 255, 255); line-height: 1.6em; text-align: center; }
.button-box-feature { float: right; margin: 40px 0 50px 0; width: 100%; height: 56px; text-align: center; }
a.feature-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -90px; width: 180px; height: 56px; font-family: 'quasimoda'; font-weight: 400; font-size: 1.2rem; color: rgb(255, 255, 255); line-height: 2.7em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.feature-button:hover, a.feature-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }
.video-box {background: url(https://www.thebob.com/svg/shadow-feature.svg);background-position: left top;background-repeat: no-repeat;background-size: 100% auto;float: left;clear: both;width: 100%; /* 1020px */}
.video-wrapper {position: relative;margin: 0;padding: 0;width: 96.078431372549%; /* 980px */overflow: hidden;}
.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 3.125%;height: 0;overflow: hidden;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%; /* 1000px */height: 100%;}
.show-box { margin: 40px 0 0 0; float: left; width: 100%; overflow: none; }
.show-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(95% - 2px); overflow: none; }
.show-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.show-right { float: left; width: 5%; }
.show-image { float: left; width: 100%; overflow: hidden; }
.show-copy-box { margin: 40px 0 0 10%; float: left; width: 80%; text-align: center; overflow: hidden; }
.show-title { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 1.8rem; font-style: italic; color: rgb(250, 220, 150); }
.show-copy { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.2rem; color: rgb(255, 255, 255); }
.button-box-show { float: right; margin: 40px 0 60px 0; width: 100%; height: 56px; text-align: center; }
a.show-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -90px; width: 180px; height: 56px; font-family: 'quasimoda'; font-weight: 400; font-size: 1.2rem; color: rgb(255, 255, 255); line-height: 2.7em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.show-button:hover, a.show-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }

}





/* Tablet Horizontal & Small Screens */
@media screen
and (min-width: 1024px)
and (max-width: 1280px) {
	
body:after { content: 'desktop'; display: none; }
.nav-preload { position: absolute; left: -10000px; top: -10000px; }
#wrapper { margin: 0; padding: 0; position: relative; width: 100%; height: 100%; }
.menu-trigger { display: none; }
.mobile { display: none; }
.site-overlay { display: none; }

/* --- header nav --- */

.logo { position: fixed; top: 16px; left: 7.5%; width: 160px; z-index: 11000; }
#header-wrapper { background-color: rgb(40, 40, 40); position: fixed; top: 0; left: 0; width: 100%; height: 140px; z-index: 10000; }
#nav-wrapper { background: linear-gradient(to right, rgb(40, 40, 40) 50%, rgb(80, 80, 80) 50%); position: absolute; top: 60px; left: 0; width: 100%; height: 80px; z-index: 10000; }

#nav-container { background: linear-gradient(to right, rgb(40, 40, 40) 10%, rgb(80, 80, 80) 10%); position: absolute; top: 0; left: 5%; width: 90%; height: 80px; z-index: 10000; }
#nav { float: right; width: 100%; height: 100%; }
#nav a { text-decoration: none; }

/* nav level one */

ul.primary { margin: 0 8% 0 0; padding: 0; float: right; list-style-type: none; width: 70%; height: 80px; }
.venues, .shows, .food, .services, .about, .reserve, .craftbeer { float: left; height: 80px; font-family: 'serenity'; font-weight: 300; font-size: 1rem; line-height: 80px; color: rgb(255, 255, 255); letter-spacing: .04em; text-align: center; text-decoration: none; cursor: pointer; -o-transition: background .2s ease-in-out; -ms-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out; }
.venues:hover, .shows:hover, .food:hover, .services:hover, .about:hover, .reserve:hover, .craftbeer:hover { background: rgb(60, 60, 60); }
.venues {width: 13.653137%; /* 111px */ }
.shows {width: 13.653137%; /* 111px */ }
.food {width: 11.562116%; /* 94px */ }
.services {width: 15.252153%; /* 124px */ }
.about {width: 13.284133%; /* 108px */ }
.reserve {width: 14.391144%; /* 117px */ }
.craftbeer {width: 18.204182%; /* 148px */ }

/* nav level two */

ul.primary li ul.level-two { visibility: hidden; opacity: 0; -o-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; }
ul.primary li:hover > ul.level-two { background: url(https://www.thebob.com/svg/hover.svg); background-position: left top; background-size: 220px auto; background-repeat: no-repeat; margin: -15px 0 0 0; padding: 0; float: left; width: 220px; height: auto; text-align: left; border-right: solid 1px rgb(80, 80, 80); border-bottom: solid 1px rgb(80, 80, 80); list-style-type: none; visibility: visible; opacity: 1; overflow: hidden; white-space: nowrap;  }
.link2 { padding: 0 0 0 18px; float: left; width: 100%; height: 28px; line-height: .95em; text-align: left; display: block; white-space: nowrap; }
.link2 a { font-family: 'quasimoda'; font-weight: 300; font-size: .95rem; color: rgb(120, 120, 120); text-decoration: none; cursor: pointer; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out; }
.link2:hover > a { color: rgb(0, 0, 0); }
.link2-top { float: left; width: 100%; height: 38px; }
.link2-bottom { float: left; width: 100%; height: 14px; }

/* --- main content --- */

#main-content { background-color: rgb(255, 255, 255); float: left; margin: 160px 0 40px 5%; width: 90%; overflow: hidden; }
.main-header { background: rgb(140, 140, 140); float: left; clear: both; width: 100%; height: 140px; }
.header-left { background: rgb(40, 40, 40); float: left; width: 92%; height: 100px; }
.header-title { float: left; margin: 24px 0 0 5%; width: 60%; font-family: 'alkaline'; font-size: 2.4rem; color: rgb(255, 255, 255); text-align: left; }
.header-right { background: rgb(240, 220, 180); float: right; width: 8%; height: 140px; overflow: hidden; }
.social-header { float: right; margin: 23px 23px 0 0; width: 30%; height: 54px; text-align: right; }
.social-header-icon { position: relative; margin: 0 0 0 6px; width: 54px; text-align: center; display: inline-block; }
.social-header-icon-wrapper { position: relative; margin: 0 auto 0 auto; top: 0; left: 0; width: 54px; height: 54px; }
.social-header-red { float: left; width: 54px; z-index: 1; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-red:hover, .social-header-red:active { opacity: 0; }
.social-header-white { position: absolute; top: 0; left: 0; width: 54px; z-index: 2; opacity: 0; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-white:hover, .social-header-white:active { opacity: 1; }
.boxes-wrapper { background: rgb(255, 255, 255); float: left; clear: both; width: 100%; overflow: hidden; }
.content-wrapper { margin: 40px 0 40px 4%; float: left; width: 92%; overflow: hidden; }
.feature-box { float: left; clear: both; width: 100%; height: 320px; overflow: none; }
.feature-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(96% - 2px); overflow: none; }
.feature-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.feature-banner { position: absolute; top: 50px; left: 0; width: 170px; z-index: 100; }
.feature-title { position: absolute; top: 80px; left: 20px; text-align: left; z-index: 101; }
.title-top { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 2.2rem; font-style: italic; color: rgb(255, 255, 255); line-height: 1.1em; }
.title-bottom { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1rem; color: rgb(250, 220, 150); line-height: 1.1em; }
.feature-image { background-size: cover; background-position: center; background-image: url('https://www.thebob.com/img/feature-thebob.jpg'); float: left; width: 60%; height: 320px; overflow: hidden; }
.feature-right { float: right; width: 4%; height: 320px; }
.feature-copy { margin: 20px 0 0 3%; float: left; width: 34%; height: 290px; overflow: hidden; }
.feature-copy-title { float: left; margin: 0; width: 100%; font-family: 'serenity'; font-weight: 400; font-size: 2.2rem; font-style: italic; color: rgb(250, 220, 150); text-align: center; }
.feature-copy-details { float: left; margin: 10px 0 0 0; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1rem; color: rgb(255, 255, 255); line-height: 1.5em; text-align: center; }
.button-box-feature { margin: 30px 0 40px 0; float: left; width: 100%; height: 50px; text-align: center; }
a.feature-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -75px; width: 150px; height: 50px; font-family: 'quasimoda'; font-weight: 400; font-size: 1rem; color: rgb(255, 255, 255); line-height: 2.9em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.feature-button:hover, a.feature-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }
.video-box {background: url(https://www.thebob.com/svg/shadow-feature.svg);background-position: left top;background-repeat: no-repeat;background-size: 100% auto;float: left;clear: both;width: 100%; /* 1020px */}
.video-wrapper {position: relative;margin: 0;padding: 0;width: 96.078431372549%; /* 980px */overflow: hidden;}
.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 3.125%;height: 0;overflow: hidden;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%; /* 1000px */height: 100%;}
.show-box { margin: 40px 0 0 0; float: left; width: 50%; overflow: none; }
.show-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(92% - 2px); overflow: none; }
.show-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.show-right { float: left; width: 8%; }
.show-image { float: left; width: 100%; overflow: hidden; }
.show-copy-box { margin: 8% 0 0 8%; float: left; width: 84%; text-align: center; overflow: hidden; }
.show-title { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 1.5rem; font-style: italic; color: rgb(250, 220, 150); }
.show-copy { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1rem; color: rgb(255, 255, 255); }
.button-box-show { float: right; margin: 30px 0 50px 0; width: 100%; height: 50px; text-align: center; }
a.show-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -75px; width: 150px; height: 50px; font-family: 'quasimoda'; font-weight: 400; font-size: 1rem; color: rgb(255, 255, 255); line-height: 3em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.show-button:hover, a.show-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }
	
}





/* Desktop Medium */

@media screen
and (min-width: 1281px)
and (max-width: 1599px) {
	
body:after { content: 'desktop'; display: none; }
.nav-preload { position: absolute; left: -10000px; top: -10000px; }
#wrapper { margin: 0; padding: 0; position: relative; width: 100%; height: 100%; }
.menu-trigger { display: none; }
.mobile { display: none; }
.site-overlay { display: none; }

/* --- header nav --- */

.logo { position: fixed; top: 16px; left: 12.5%; width: 180px; z-index: 11000; }
#header-wrapper { background-color: rgb(40, 40, 40); position: fixed; top: 0; left: 0; width: 100%; height: 150px; z-index: 10000; }
#nav-wrapper { background: linear-gradient(to right, rgb(40, 40, 40) 50%, rgb(80, 80, 80) 50%); position: absolute; top: 70px; left: 0; width: 100%; height: 80px; z-index: 10000; }
#nav-container { background: linear-gradient(to right, rgb(40, 40, 40) 10%, rgb(80, 80, 80) 10%); position: absolute; top: 0; left: 10%; width: 80%; height: 80px; z-index: 10000; }
#nav { float: right; width: 100%; height: 100%; }
#nav a { text-decoration: none; }

/* nav level one */

ul.primary { margin: 0 8% 0 0; padding: 0; float: right; list-style-type: none; width: 68%; height: 80px; }
.venues, .shows, .food, .services, .about, .reserve, .craftbeer { float: left; height: 80px; font-family: 'serenity'; font-weight: 300; font-size: 1.1rem; line-height: 80px; color: rgb(255, 255, 255); letter-spacing: .04em; text-align: center; text-decoration: none; cursor: pointer; -o-transition: background .2s ease-in-out; -ms-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out; }
.venues:hover, .shows:hover, .food:hover, .services:hover, .about:hover, .reserve:hover, .craftbeer:hover { background: rgb(60, 60, 60); }
.venues {width: 13.653137%; /* 111px */ }
.shows {width: 13.653137%; /* 111px */ }
.food {width: 11.562116%; /* 94px */ }
.services {width: 15.252153%; /* 124px */ }
.about {width: 13.284133%; /* 108px */ }
.reserve {width: 14.391144%; /* 117px */ }
.craftbeer {width: 18.204182%; /* 148px */ }

/* nav level two */

ul.primary li ul.level-two { visibility: hidden; opacity: 0; -o-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; }
ul.primary li:hover > ul.level-two { background: url(https://www.thebob.com/svg/hover.svg); background-position: left top; background-size: 250px auto; background-repeat: no-repeat; margin: -17px 0 0 0; padding: 0; float: left; width: 250px; height: auto; text-align: left; border-right: solid 1px rgb(80, 80, 80); border-bottom: solid 1px rgb(80, 80, 80); list-style-type: none; visibility: visible; opacity: 1; overflow: hidden; white-space: nowrap;  }
.link2 { padding: 0 0 0 20px; float: left; width: 100%; height: 30px; line-height: 1em; text-align: left; display: block; white-space: nowrap; }
.link2 a { font-family: 'quasimoda'; font-weight: 300; font-size: 1rem; color: rgb(120, 120, 120); text-decoration: none; cursor: pointer; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out; }
.link2:hover > a { color: rgb(0, 0, 0); }
.link2-top { float: left; width: 100%; height: 44px; }
.link2-bottom { float: left; width: 100%; height: 16px; }

/* --- main content --- */

#main-content { background-color: rgb(255, 255, 255); float: left; margin: 180px 0 50px 10%; width: 80%; overflow: hidden; }
.main-header { background: rgb(140, 140, 140); float: left; clear: both; width: 100%; height: 160px; }
.header-left { background: rgb(40, 40, 40); float: left; width: 92%; height: 110px; }
.header-title { float: left; margin: 28px 0 0 5%; width: 60%; font-family: 'alkaline'; font-size: 2.8rem; color: rgb(255, 255, 255); text-align: left; }
.header-right { background: rgb(240, 220, 180); float: right; width: 8%; height: 160px; overflow: hidden; }
.social-header { float: right; margin: 27px 27px 0 0; width: 30%; height: 56px; text-align: right; }
.social-header-icon { position: relative; margin: 0 0 0 7px; width: 56px; text-align: center; display: inline-block; }
.social-header-icon-wrapper { position: relative; margin: 0 auto 0 auto; top: 0; left: 0; width: 56px; height: 56px; }
.social-header-red { float: left; width: 56px; z-index: 1; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-red:hover, .social-header-red:active { opacity: 0; }
.social-header-white { position: absolute; top: 0; left: 0; width: 56px; z-index: 2; opacity: 0; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-white:hover, .social-header-white:active { opacity: 1; }
.boxes-wrapper { background: rgb(255, 255, 255); float: left; clear: both; width: 100%; overflow: hidden; }
.content-wrapper { margin: 50px 0 50px 4%; float: left; width: 92%; overflow: hidden; }
.feature-box { float: left; clear: both; width: 100%; height: 360px; overflow: none; }
.feature-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(96% - 2px); overflow: none; }
.feature-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.feature-banner { position: absolute; top: 60px; left: 0; width: 180px; z-index: 100; }
.feature-title { position: absolute; top: 95px; left: 25px; text-align: left; z-index: 101; }
.title-top { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 2.2rem; font-style: italic; color: rgb(255, 255, 255); line-height: 1.1em; }
.title-bottom { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1rem; color: rgb(250, 220, 150); line-height: 1.1em; }
.feature-image { background-size: cover; background-position: center; background-image: url('https://www.thebob.com/img/feature-thebob.jpg'); float: left; width: 60%; height: 360px; overflow: hidden; }
.feature-right { float: right; width: 4%; }
.feature-copy { margin: 30px 0 0 3%; float: left; width: 34%; height: 330px; overflow: hidden; }
.feature-copy-title { float: left; margin: 0; width: 100%; font-family: 'serenity'; font-weight: 400; font-size: 2.6rem; font-style: italic; color: rgb(250, 220, 150); text-align: center; }
.feature-copy-details { float: left; margin: 15px 0 0 0; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1rem; color: rgb(255, 255, 255); line-height: 1.5em; text-align: center; }
.button-box-feature { float: right; margin: 40px 0 50px 0; width: 100%; height: 52px; text-align: center; }
a.feature-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -80px; width: 160px; height: 52px; font-family: 'quasimoda'; font-weight: 400; font-size: 1rem; color: rgb(255, 255, 255); line-height: 3em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.feature-button:hover, a.feature-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }
.video-box {background: url(https://www.thebob.com/svg/shadow-feature.svg);background-position: left top;background-repeat: no-repeat;background-size: 100% auto;float: left;clear: both;width: 100%; /* 1020px */}
.video-wrapper {position: relative;margin: 0;padding: 0;width: 96.078431372549%; /* 980px */overflow: hidden;}
.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 3.125%;height: 0;overflow: hidden;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%; /* 1000px */height: 100%;}
.show-box { margin: 50px 0 0 0; float: left; width: 50%; overflow: none; }
.show-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(92% - 2px); overflow: none; }
.show-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.show-right { float: left; width: 8%; }
.show-image { float: left; width: 100%; overflow: hidden; }
.show-copy-box { margin: 8% 0 0 8%; float: left; width: 84%; text-align: center; overflow: hidden; }
.show-title { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 1.5rem; font-style: italic; color: rgb(250, 220, 150); }
.show-copy { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1rem; color: rgb(255, 255, 255); }
.button-box-show { float: right; margin: 40px 0 60px 0; width: 100%; height: 52px; text-align: center; }
a.show-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -80px; width: 160px; height: 52px; font-family: 'quasimoda'; font-weight: 400; font-size: 1rem; color: rgb(255, 255, 255); line-height: 3em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.show-button:hover, a.show-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }

}





/* Desktop Large */

@media screen
and (min-width: 1600px)
and (max-width: 1919px) {
	
body:after { content: 'desktop'; display: none; }
.nav-preload { position: absolute; left: -10000px; top: -10000px; }
#wrapper { margin: 0; padding: 0; position: relative; width: 100%; height: 100%; }
.menu-trigger { display: none; }
.mobile { display: none; }
.site-overlay { display: none; }

/* --- header nav --- */

.logo { position: fixed; top: 16px; left: 12.5%; width: 180px; z-index: 11000; }
#header-wrapper { background-color: rgb(40, 40, 40); position: fixed; top: 0; left: 0; width: 100%; height: 160px; z-index: 10000; }
#nav-wrapper { background: linear-gradient(to right, rgb(40, 40, 40) 50%, rgb(80, 80, 80) 50%); position: absolute; top: 70px; left: 0; width: 100%; height: 90px; z-index: 10000; }
#nav-container { background: linear-gradient(to right, rgb(40, 40, 40) 10%, rgb(80, 80, 80) 10%); position: absolute; top: 0; left: 10%; width: 80%; height: 90px; z-index: 10000; }
#nav { float: right; width: 100%; height: 100%; }
#nav a { text-decoration: none; }

/* nav level one */

ul.primary { margin: 0 8% 0 0; padding: 0; float: right; list-style-type: none; width: 72%; height: 90px; }
.venues, .shows, .food, .services, .about, .reserve, .craftbeer { float: left; height: 90px; font-family: 'serenity'; font-weight: 300; font-size: 1.2rem; line-height: 90px; color: rgb(255, 255, 255); letter-spacing: .05em; text-align: center; text-decoration: none; cursor: pointer; -o-transition: background .2s ease-in-out; -ms-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out; }
.venues:hover, .shows:hover, .food:hover, .services:hover, .about:hover, .reserve:hover, .craftbeer:hover { background: rgb(60, 60, 60); }
.venues {width: 13.653137%; /* 111px */ }
.shows {width: 13.653137%; /* 111px */ }
.food {width: 11.562116%; /* 94px */ }
.services {width: 15.252153%; /* 124px */ }
.about {width: 13.284133%; /* 108px */ }
.reserve {width: 14.391144%; /* 117px */ }
.craftbeer {width: 18.204182%; /* 148px */ }

/* nav level two */

ul.primary li ul.level-two { visibility: hidden; opacity: 0; -o-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; }
ul.primary li:hover > ul.level-two { background: url(https://www.thebob.com/svg/hover.svg); background-position: left top; background-size: 280px auto; background-repeat: no-repeat; margin: -19px 0 0 0; padding: 0; float: left; width: 280px; height: auto; text-align: left; border-right: solid 1px rgb(80, 80, 80); border-bottom: solid 1px rgb(80, 80, 80); list-style-type: none; visibility: visible; opacity: 1; overflow: hidden; white-space: nowrap;  }
.link2 { padding: 0 0 0 25px; float: left; width: 100%; height: 32px; line-height: 1em; text-align: left; display: block; white-space: nowrap; }
.link2 a { font-family: 'quasimoda'; font-weight: 300; font-size: 1.1rem; color: rgb(120, 120, 120); text-decoration: none; cursor: pointer; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out; }
.link2:hover > a { color: rgb(0, 0, 0); }
.link2-top { float: left; width: 100%; height: 48px; }
.link2-bottom { float: left; width: 100%; height: 18px; }

/* --- main content --- */

#main-content { background-color: rgb(255, 255, 255); float: left; margin: 180px 0 50px 10%; width: 80%; overflow: hidden; }
.main-header { background: rgb(140, 140, 140); float: left; clear: both; width: 100%; height: 170px; }
.header-left { background: rgb(40, 40, 40); float: left; width: 92%; height: 120px; }
.header-title { float: left; margin: 30px 0 0 5%; width: 60%; font-family: 'alkaline'; font-size: 2.9rem; color: rgb(255, 255, 255); text-align: left; }
.header-right { background: rgb(240, 220, 180); float: right; width: 8%; height: 170px; overflow: hidden; }
.social-header { float: right; margin: 30px 30px 0 0; width: 30%; height: 60px; text-align: right; }
.social-header-icon { position: relative; margin: 0 0 0 8px; width: 60px; text-align: center; display: inline-block; }
.social-header-icon-wrapper { position: relative; margin: 0 auto 0 auto; top: 0; left: 0; width: 60px; height: 60px; }
.social-header-red { float: left; width: 60px; z-index: 1; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-red:hover, .social-header-red:active { opacity: 0; }
.social-header-white { position: absolute; top: 0; left: 0; width: 60px; z-index: 2; opacity: 0; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-white:hover, .social-header-white:active { opacity: 1; }
.boxes-wrapper { background: rgb(255, 255, 255); margin: 0; float: left; clear: both; width: 100%; overflow: hidden; }
.content-wrapper { margin: 50px 0 50px 4%; float: left; width: 92%; overflow: hidden; }
.feature-box { float: left; clear: both; width: 100%; height: 400px; overflow: none; }
.feature-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(96% - 2px); overflow: none; }
.feature-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.feature-banner { position: absolute; top: 60px; left: 0; width: 200px; z-index: 100; }
.feature-title { position: absolute; top: 100px; left: 30px; text-align: left; z-index: 101; }
.title-top { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 2.4rem; font-style: italic; color: rgb(255, 255, 255); line-height: 1.2em; }
.title-bottom { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.1rem; color: rgb(250, 220, 150); line-height: 1.2em; }
.feature-image { background-size: cover; background-position: center; background-image: url('https://www.thebob.com/img/feature-thebob.jpg'); float: left; width: 64%; height: 400px; overflow: hidden; }
.feature-right { float: right; width: 4%; }
.feature-copy { margin: 30px 0 0 3%; float: left; width: 30%; height: 370px; overflow: hidden; }
.feature-copy-title { float: left; margin: 0; width: 100%; font-family: 'serenity'; font-weight: 400; font-size: 2.8rem; font-style: italic; color: rgb(250, 220, 150); text-align: center; }
.feature-copy-details { float: left; margin: 20px 0 0 0; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.1rem; color: rgb(255, 255, 255); line-height: 1.6em; text-align: center; }
.button-box-feature { float: right; margin: 40px 0 50px 0; width: 100%; height: 56px; text-align: center; }
a.feature-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -90px; width: 180px; height: 56px; font-family: 'quasimoda'; font-weight: 400; font-size: 1.1rem; color: rgb(255, 255, 255); line-height: 3em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.feature-button:hover, a.feature-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }
.video-box {background: url(https://www.thebob.com/svg/shadow-feature.svg);background-position: left top;background-repeat: no-repeat;background-size: 100% auto;float: left;clear: both;width: 100%; /* 1020px */}
.video-wrapper {position: relative;margin: 0;padding: 0;width: 96.078431372549%; /* 980px */overflow: hidden;}
.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 3.125%;height: 0;overflow: hidden;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%; /* 1000px */height: 100%;}
.show-box { margin: 50px 0 0 0; float: left; width: 50%; overflow: none; }
.show-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(92% - 2px); overflow: none; }
.show-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.show-right { float: left; width: 8%; }
.show-image { float: left; width: 100%; overflow: hidden; }
.show-copy-box { margin: 8% 0 0 8%; float: left; width: 84%; text-align: center; overflow: hidden; }
.show-title { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 1.6rem; font-style: italic; color: rgb(250, 220, 150); }
.show-copy { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.1rem; color: rgb(255, 255, 255); }
.button-box-show { float: right; margin: 40px 0 60px 0; width: 100%; height: 56px; text-align: center; }
a.show-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -90px; width: 180px; height: 56px; font-family: 'quasimoda'; font-weight: 400; font-size: 1.1rem; color: rgb(255, 255, 255); line-height: 3em; text-align: center; text-decoration: none; border-radius: 5px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.show-button:hover, a.show-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }

}





/* Desktop HD */

@media screen
and (min-width: 1920px)
and (max-width: 2560px) {
	
body:after { content: 'desktop'; display: none; }
.nav-preload { position: absolute; left: -10000px; top: -10000px; }
#wrapper { margin: 0; padding: 0; position: relative; width: 100%; height: 100%; }
.menu-trigger { display: none; }
.mobile { display: none; }
.site-overlay { display: none; }

/* --- header nav --- */

.logo { position: fixed; top: 20px; left: 17.5%; width: 220px; z-index: 11000; }
#header-wrapper { background-color: rgb(40, 40, 40); position: fixed; top: 0; left: 0; width: 100%; height: 180px; z-index: 10000; }
#nav-wrapper { background: linear-gradient(to right, rgb(40, 40, 40) 50%, rgb(80, 80, 80) 50%); position: absolute; top: 80px; left: 0; width: 100%; height: 100px; z-index: 10000; }
#nav-container { background: linear-gradient(to right, rgb(40, 40, 40) 10%, rgb(80, 80, 80) 10%); position: absolute; top: 0; left: 15%; width: 70%; height: 100px; z-index: 10000; }
#nav { float: right; width: 100%; height: 100%; }
#nav a { text-decoration: none; }

/* nav level one */

ul.primary { margin: 0 8% 0 0; padding: 0; float: right; list-style-type: none; width: 70%; height: 100px; }
.venues, .shows, .food, .services, .about, .reserve, .craftbeer { float: left; height: 100px; font-family: 'serenity'; font-weight: 300; font-size: 1.3rem; line-height: 100px; color: rgb(255, 255, 255); letter-spacing: .05em; text-align: center; text-decoration: none; cursor: pointer; -o-transition: background .2s ease-in-out; -ms-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out; }
.venues:hover, .shows:hover, .food:hover, .services:hover, .about:hover, .reserve:hover, .craftbeer:hover { background: rgb(60, 60, 60); }
.venues {width: 13.653137%; /* 111px */ }
.shows {width: 13.653137%; /* 111px */ }
.food {width: 11.562116%; /* 94px */ }
.services {width: 15.252153%; /* 124px */ }
.about {width: 13.284133%; /* 108px */ }
.reserve {width: 14.391144%; /* 117px */ }
.craftbeer {width: 18.204182%; /* 148px */ }

/* nav level two */

ul.primary li ul.level-two { visibility: hidden; opacity: 0; -o-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; }
ul.primary li:hover > ul.level-two { background: url(https://www.thebob.com/svg/hover.svg); background-position: left top; background-size: 300px auto; background-repeat: no-repeat; margin: -20px 0 0 0; padding: 0; float: left; width: 300px; height: auto; text-align: left; border-right: solid 1px rgb(80, 80, 80); border-bottom: solid 1px rgb(80, 80, 80); list-style-type: none; visibility: visible; opacity: 1; overflow: hidden; white-space: nowrap;  }
.link2 { padding: 0 0 0 30px; float: left; width: 100%; height: 35px; line-height: 1em; text-align: left; display: block; white-space: nowrap; }
.link2 a { font-family: 'quasimoda'; font-weight: 300; font-size: 1.2rem; color: rgb(120, 120, 120); text-decoration: none; cursor: pointer; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out; }
.link2:hover > a { color: rgb(0, 0, 0); }
.link2-top { float: left; width: 100%; height: 50px; }
.link2-bottom { float: left; width: 100%; height: 20px; }

/* --- main content --- */

#main-content { background-color: rgb(255, 255, 255); float: left; margin: 220px 0 60px 15%; width: 70%; overflow: hidden; }
.main-header { background: rgb(140, 140, 140); float: left; clear: both; width: 100%; height: 200px; }
.header-left { background: rgb(40, 40, 40); float: left; width: 92%; height: 140px; }
.header-title { float: left; margin: 40px 0 0 5%; width: 60%; font-family: 'alkaline'; font-size: 3.2rem; color: rgb(255, 255, 255); text-align: left; }
.header-right { background: rgb(240, 220, 180); float: right; width: 8%; height: 200px; overflow: hidden; }
.social-header { float: right; margin: 39px 39px 0 0; width: 30%; height: 62px; text-align: right; }
.social-header-icon { position: relative; margin: 0 0 0 9px; width: 62px; text-align: center; display: inline-block; }
.social-header-icon-wrapper { position: relative; margin: 0 auto 0 auto; top: 0; left: 0; width: 62px; height: 62px; }
.social-header-red { float: left; width: 62px; z-index: 1; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-red:hover, .social-header-red:active { opacity: 0; }
.social-header-white { position: absolute; top: 0; left: 0; width: 62px; z-index: 2; opacity: 0; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-white:hover, .social-header-white:active { opacity: 1; }
.boxes-wrapper { background: rgb(255, 255, 255); margin: 0; float: left; clear: both; width: 100%; overflow: hidden; }
.content-wrapper { margin: 60px 0 60px 4%; float: left; width: 92%; overflow: hidden; }
.feature-box { float: left; clear: both; width: 100%; height: 460px; overflow: none; }
.feature-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(96% - 2px); overflow: none; }
.feature-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.feature-banner { position: absolute; top: 70px; left: 0; width: 220px; z-index: 100; }
.feature-title { position: absolute; top: 110px; left: 30px; text-align: left; z-index: 101; }
.title-top { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 2.8rem; font-style: italic; color: rgb(255, 255, 255); line-height: 1.2em; }
.title-bottom { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.2rem; color: rgb(250, 220, 150); line-height: 1.2em; }
.feature-image { background-size: cover; background-position: center; background-image: url('https://www.thebob.com/img/feature-thebob.jpg'); float: left; width: 66%; height: 460px; overflow: hidden; }
.feature-right { float: right; width: 4%; }
.feature-copy { margin: 40px 0 0 3%; float: left; width: 28%; height: 420px; overflow: hidden; }
.feature-copy-title { float: left; margin: 0; width: 100%; font-family: 'serenity'; font-weight: 400; font-size: 3rem; font-style: italic; color: rgb(250, 220, 150); text-align: center; }
.feature-copy-details { float: left; margin: 20px 0 0 0; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.2rem; color: rgb(255, 255, 255); line-height: 1.6em; text-align: center; }
.button-box-feature { float: right; margin: 50px 0 60px 0; width: 100%; height: 60px; text-align: center; }
a.feature-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -100px; width: 200px; height: 60px; font-family: 'quasimoda'; font-weight: 400; font-size: 1.2rem; color: rgb(255, 255, 255); line-height: 2.9em; text-align: center; text-decoration: none; border-radius: 6px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.feature-button:hover, a.feature-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }
.video-box {background: url(https://www.thebob.com/svg/shadow-feature.svg);background-position: left top;background-repeat: no-repeat;background-size: 100% auto;float: left;clear: both;width: 100%; /* 1020px */}
.video-wrapper {position: relative;margin: 0;padding: 0;width: 96.078431372549%; /* 980px */overflow: hidden;}
.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 3.125%;height: 0;overflow: hidden;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%; /* 1000px */height: 100%;}
.show-box { margin: 60px 0 0 0; float: left; width: 50%; overflow: none; }
.show-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(92% - 2px); overflow: none; }
.show-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.show-right { float: left; width: 8%; }
.show-image { float: left; width: 100%; overflow: hidden; }
.show-copy-box { margin: 8% 0 0 8%; float: left; width: 84%; text-align: center; overflow: hidden; }
.show-title { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 1.8rem; font-style: italic; color: rgb(250, 220, 150); }
.show-copy { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.2rem; color: rgb(255, 255, 255); }
.button-box-show { float: right; margin: 50px 0 70px 0; width: 100%; height: 60px; text-align: center; }
a.show-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -100px; width: 200px; height: 60px; font-family: 'quasimoda'; font-weight: 400; font-size: 1.2rem; color: rgb(255, 255, 255); line-height: 2.9em; text-align: center; text-decoration: none; border-radius: 6px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.show-button:hover, a.show-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }

}





/* Desktop UHD */

@media screen
and (min-width: 2561px)
and (max-width: 3839px) {
	
body:after { content: 'desktop'; display: none; }
.nav-preload { position: absolute; left: -10000px; top: -10000px; }
#wrapper { margin: 0; padding: 0; position: relative; width: 100%; height: 100%; }
.menu-trigger { display: none; }
.mobile { display: none; }
.site-overlay { display: none; }

/* --- header nav --- */

.logo { position: fixed; top: 20px; left: 20%; width: 240px; z-index: 11000; }
#header-wrapper { background-color: rgb(40, 40, 40); position: fixed; top: 0; left: 0; width: 100%; height: 200px; z-index: 10000; }
#nav-wrapper { background: linear-gradient(to right, rgb(40, 40, 40) 50%, rgb(80, 80, 80) 50%); position: absolute; top: 80px; left: 0; width: 100%; height: 120px; z-index: 10000; }
#nav-container { background: linear-gradient(to right, rgb(40, 40, 40) 10%, rgb(80, 80, 80) 10%); position: absolute; top: 0; left: 18%; width: 64%; height: 120px; z-index: 10000; }
#nav { float: right; width: 100%; height: 100%; }
#nav a { text-decoration: none; }

/* nav level one */

ul.primary { margin: 0 8% 0 0; padding: 0; float: right; list-style-type: none; width: 72%; height: 120px; }
.venues, .shows, .food, .services, .about, .reserve, .craftbeer { float: left; height: 120px; font-family: 'serenity'; font-weight: 300; font-size: 1.4rem; line-height: 120px; color: rgb(255, 255, 255); letter-spacing: .06em; text-align: center; text-decoration: none; cursor: pointer; -o-transition: background .2s ease-in-out; -ms-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out; }
.venues:hover, .shows:hover, .food:hover, .services:hover, .about:hover, .reserve:hover, .craftbeer:hover { background: rgb(60, 60, 60); }
.venues {width: 13.653137%; /* 111px */ }
.shows {width: 13.653137%; /* 111px */ }
.food {width: 11.562116%; /* 94px */ }
.services {width: 15.252153%; /* 124px */ }
.about {width: 13.284133%; /* 108px */ }
.reserve {width: 14.391144%; /* 117px */ }
.craftbeer {width: 18.204182%; /* 148px */ }

/* nav level two */

ul.primary li ul.level-two { visibility: hidden; opacity: 0; -o-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; }
ul.primary li:hover > ul.level-two { background: url(https://www.thebob.com/svg/hover.svg); background-position: left top; background-size: 320px auto; background-repeat: no-repeat; margin: -21px 0 0 0; padding: 0; float: left; width: 320px; height: auto; text-align: left; border-right: solid 1px rgb(80, 80, 80); border-bottom: solid 1px rgb(80, 80, 80); list-style-type: none; visibility: visible; opacity: 1; overflow: hidden; white-space: nowrap;  }
.link2 { padding: 0 0 0 35px; float: left; width: 100%; height: 40px; line-height: 1em; text-align: left; display: block; white-space: nowrap; }
.link2 a { font-family: 'quasimoda'; font-weight: 300; font-size: 1.3rem; color: rgb(120, 120, 120); text-decoration: none; cursor: pointer; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out; }
.link2:hover > a { color: rgb(0, 0, 0); }
.link2-top { float: left; width: 100%; height: 60px; }
.link2-bottom { float: left; width: 100%; height: 25px; }

/* --- main content --- */

#main-content { background-color: rgb(255, 255, 255); float: left; margin: 240px 0 80px 18%; width: 64%; overflow: hidden; }
.main-header { background: rgb(140, 140, 140); float: left; clear: both; width: 100%; height: 220px; }
.header-left { background: rgb(40, 40, 40); float: left; width: 92%; height: 150px; }
.header-title { float: left; margin: 40px 0 0 5%; width: 60%; font-family: 'alkaline'; font-size: 3.5rem; color: rgb(255, 255, 255); text-align: left; }
.header-right { background: rgb(240, 220, 180); float: right; width: 8%; height: 220px; overflow: hidden; }
.social-header { float: right; margin: 43px 43px 0 0; width: 30%; height: 64px; text-align: right; }
.social-header-icon { position: relative; margin: 0 0 0 10px; width: 64px; text-align: center; display: inline-block; }
.social-header-icon-wrapper { position: relative; margin: 0 auto 0 auto; top: 0; left: 0; width: 64px; height: 64px; }
.social-header-red { float: left; width: 64px; z-index: 1; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-red:hover, .social-header-red:active { opacity: 0; }
.social-header-white { position: absolute; top: 0; left: 0; width: 64px; z-index: 2; opacity: 0; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-white:hover, .social-header-white:active { opacity: 1; }
.boxes-wrapper { background: rgb(255, 255, 255); margin: 0; float: left; clear: both; width: 100%; overflow: hidden; }
.content-wrapper { margin: 80px 0 80px 4%; float: left; width: 92%; overflow: hidden; }
.feature-box { float: left; clear: both; width: 100%; height: 560px; overflow: none; }
.feature-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(96% - 2px); overflow: none; }
.feature-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.feature-banner { position: absolute; top: 80px; left: 0; width: 240px; z-index: 100; }
.feature-title { position: absolute; top: 120px; left: 35px; text-align: left; z-index: 101; }
.title-top { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 3rem; font-style: italic; color: rgb(255, 255, 255); line-height: 1.3em; }
.title-bottom { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.3rem; color: rgb(250, 220, 150); line-height: 1.3em; }
.feature-image { background-size: cover; background-position: center; background-image: url('https://www.thebob.com/img/feature-thebob.jpg'); float: left; width: 66%; height: 560px; overflow: hidden; }
.feature-right { float: right; width: 4%; }
.feature-copy { margin: 50px 0 0 4%; float: left; width: 26%; height: 510px; overflow: hidden; }
.feature-copy-title { float: left; margin: 0; width: 100%; font-family: 'serenity'; font-weight: 400; font-size: 3.4rem; font-style: italic; color: rgb(250, 220, 150); text-align: center; }
.feature-copy-details { float: left; margin: 20px 0 0 0; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.3rem; color: rgb(255, 255, 255); line-height: 1.8em; text-align: center; }
.button-box-feature { float: right; margin: 60px 0 70px 0; width: 100%; height: 64px; text-align: center; }
a.feature-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -110px; width: 220px; height: 64px; font-family: 'quasimoda'; font-weight: 400; font-size: 1.3rem; color: rgb(255, 255, 255); line-height: 2.8em; text-align: center; text-decoration: none; border-radius: 7px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.feature-button:hover, a.feature-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }
.video-box {background: url(https://www.thebob.com/svg/shadow-feature.svg);background-position: left top;background-repeat: no-repeat;background-size: 100% auto;float: left;clear: both;width: 100%; /* 1020px */}
.video-wrapper {position: relative;margin: 0;padding: 0;width: 96.078431372549%; /* 980px */overflow: hidden;}
.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 3.125%;height: 0;overflow: hidden;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%; /* 1000px */height: 100%;}
.show-box { margin: 80px 0 0 0; float: left; width: 50%; overflow: none; }
.show-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(92% - 2px); overflow: none; }
.show-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.show-right { float: left; width: 8%; }
.show-image { float: left; width: 100%; overflow: hidden; }
.show-copy-box { margin: 8% 0 0 8%; float: left; width: 84%; text-align: center; overflow: hidden; }
.show-title { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 2rem; font-style: italic; color: rgb(250, 220, 150); }
.show-copy { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.3rem; color: rgb(255, 255, 255); }
.button-box-show { float: right; margin: 60px 0 80px 0; width: 100%; height: 64px; text-align: center; }
a.show-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -110px; width: 220px; height: 64px; font-family: 'quasimoda'; font-weight: 400; font-size: 1.3rem; color: rgb(255, 255, 255); line-height: 2.8em; text-align: center; text-decoration: none; border-radius: 7px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.show-button:hover, a.show-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }

}





/* 4k */
@media screen
and (min-width: 3840px) {
	
.nav-preload { position: absolute; left: -10000px; top: -10000px; }
#wrapper { margin: 0; padding: 0; position: relative; width: 100%; height: 100%; }
.menu-trigger { display: none; }
.mobile { display: none; }
.site-overlay { display: none; }

/* --- header nav --- */

.logo { position: fixed; top: 20px; left: 22.5%; width: 260px; z-index: 11000; }
#header-wrapper { background-color: rgb(40, 40, 40); position: fixed; top: 0; left: 0; width: 100%; height: 220px; z-index: 10000; }
#nav-wrapper { background: linear-gradient(to right, rgb(40, 40, 40) 50%, rgb(80, 80, 80) 50%); position: absolute; top: 80px; left: 0; width: 100%; height: 140px; z-index: 10000; }
#nav-container { background: linear-gradient(to right, rgb(40, 40, 40) 10%, rgb(80, 80, 80) 10%); position: absolute; top: 0; left: 20%; width: 60%; height: 140px; z-index: 10000; }
#nav { float: right; width: 100%; height: 100%; }
#nav a { text-decoration: none; }

/* nav level one */

ul.primary { margin: 0 8% 0 0; padding: 0; float: right; list-style-type: none; width: 72%; height: 140px; }
.venues, .shows, .food, .services, .about, .reserve, .craftbeer { float: left; height: 140px; font-family: 'serenity'; font-weight: 300; font-size: 1.5rem; line-height: 140px; color: rgb(255, 255, 255); letter-spacing: .06em; text-align: center; text-decoration: none; cursor: pointer; -o-transition: background .2s ease-in-out; -ms-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out; }
.venues:hover, .shows:hover, .food:hover, .services:hover, .about:hover, .reserve:hover, .craftbeer:hover { background: rgb(60, 60, 60); }
.venues {width: 13.653137%; /* 111px */ }
.shows {width: 13.653137%; /* 111px */ }
.food {width: 11.562116%; /* 94px */ }
.services {width: 15.252153%; /* 124px */ }
.about {width: 13.284133%; /* 108px */ }
.reserve {width: 14.391144%; /* 117px */ }
.craftbeer {width: 18.204182%; /* 148px */ }

/* nav level two */

ul.primary li ul.level-two { visibility: hidden; opacity: 0; -o-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; }
ul.primary li:hover > ul.level-two { background: url(https://www.thebob.com/svg/hover.svg); background-position: left top; background-size: 340px auto; background-repeat: no-repeat; margin: -23px 0 0 0; padding: 0; float: left; width: 340px; height: auto; text-align: left; border-right: solid 1px rgb(80, 80, 80); border-bottom: solid 1px rgb(80, 80, 80); list-style-type: none; visibility: visible; opacity: 1; overflow: hidden; white-space: nowrap;  }
.link2 { padding: 0 0 0 40px; float: left; width: 100%; height: 45px; line-height: 1em; text-align: left; display: block; white-space: nowrap; }
.link2 a { font-family: 'quasimoda'; font-weight: 300; font-size: 1.4rem; color: rgb(120, 120, 120); text-decoration: none; cursor: pointer; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out; }
.link2:hover > a { color: rgb(0, 0, 0); }
.link2-top { float: left; width: 100%; height: 65px; }
.link2-bottom { float: left; width: 100%; height: 30px; }

/* --- main content --- */

#main-content { background-color: rgb(255, 255, 255); float: left; margin: 260px 0 80px 20%; width: 60%; overflow: hidden; }
.main-header { background: rgb(140, 140, 140); float: left; clear: both; width: 100%; height: 240px; }
.header-left { background: rgb(40, 40, 40); float: left; width: 92%; height: 160px; }
.header-title { float: left; margin: 40px 0 0 5%; width: 60%; font-family: 'alkaline'; font-size: 3.8rem; color: rgb(255, 255, 255); text-align: left; }
.header-right { background: rgb(240, 220, 180); float: right; width: 8%; height: 240px; overflow: hidden; }
.social-header { float: right; margin: 46px 46px 0 0; width: 30%; height: 68px; text-align: right; }
.social-header-icon { position: relative; margin: 0 0 0 12px; width: 68px; text-align: center; display: inline-block; }
.social-header-icon-wrapper { position: relative; margin: 0 auto 0 auto; top: 0; left: 0; width: 68px; height: 68px; }
.social-header-red { float: left; width: 68px; z-index: 1; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-red:hover, .social-header-red:active { opacity: 0; }
.social-header-white { position: absolute; top: 0; left: 0; width: 68px; z-index: 2; opacity: 0; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.social-header-white:hover, .social-header-white:active { opacity: 1; }
.boxes-wrapper { background: rgb(255, 255, 255); margin: 0; float: left; clear: both; width: 100%; overflow: hidden; }
.content-wrapper { margin: 80px 0 80px 4%; float: left; width: 92%; overflow: hidden; }
.feature-box { float: left; clear: both; width: 100%; height: 640px; overflow: none; }
.feature-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(96% - 2px); overflow: none; }
.feature-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.feature-banner { position: absolute; top: 80px; left: 0; width: 260px; z-index: 100; }
.feature-title { position: absolute; top: 120px; left: 40px; text-align: left; z-index: 101; }
.title-top { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 3.2rem; font-style: italic; color: rgb(255, 255, 255); line-height: 1.3em; }
.title-bottom { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.4rem; color: rgb(250, 220, 150); line-height: 1.3em; }
.feature-image { background-size: cover; background-position: center; background-image: url('https://www.thebob.com/img/feature-thebob.jpg'); float: left; width: 60%; height: 640px; overflow: hidden; }
.feature-right { float: right; width: 4%; }
.feature-copy { margin: 60px 0 0 4%; float: left; width: 32%; height: 580px; overflow: hidden; }
.feature-copy-title { float: left; margin: 0; width: 100%; font-family: 'serenity'; font-weight: 400; font-size: 3.6rem; font-style: italic; color: rgb(250, 220, 150); text-align: center; }
.feature-copy-details { float: left; margin: 25px 0 0 0; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.4rem; color: rgb(255, 255, 255); line-height: 2em; text-align: center; }
.button-box-feature { float: right; margin: 60px 0 70px 0; width: 100%; height: 68px; text-align: center; }
a.feature-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -120px; width: 240px; height: 68px; font-family: 'quasimoda'; font-weight: 400; font-size: 1.4rem; color: rgb(255, 255, 255); line-height: 2.8em; text-align: center; text-decoration: none; border-radius: 8px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.feature-button:hover, a.feature-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }
.video-box {background: url(https://www.thebob.com/svg/shadow-feature.svg);background-position: left top;background-repeat: no-repeat;background-size: 100% auto;float: left;clear: both;width: 100%; /* 1020px */}
.video-wrapper {position: relative;margin: 0;padding: 0;width: 96.078431372549%; /* 980px */overflow: hidden;}
.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 3.125%;height: 0;overflow: hidden;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%; /* 1000px */height: 100%;}
.show-box { margin: 80px 0 0 0; float: left; width: 50%; overflow: none; }
.show-left { background: rgb(40, 40, 40); padding: 1px; float: left; width: calc(92% - 2px); overflow: none; }
.show-left-inner { position: relative; top: 0; left: 0; width: 100%; }
.show-right { float: left; width: 8%; }
.show-image { float: left; width: 100%; overflow: hidden; }
.show-copy-box { margin: 8% 0 0 8%; float: left; width: 84%; text-align: center; overflow: hidden; }
.show-title { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 800; font-size: 2.2rem; font-style: italic; color: rgb(250, 220, 150); }
.show-copy { float: left; width: 100%; font-family: 'quasimoda'; font-weight: 300; font-size: 1.4rem; color: rgb(255, 255, 255); }
.button-box-show { float: right; margin: 60px 0 80px 0; width: 100%; height: 68px; text-align: center; }
a.show-button { background-color: rgb(238, 64, 61); position: absolute; margin: 0 auto 0 -120px; width: 240px; height: 68px; font-family: 'quasimoda'; font-weight: 400; font-size: 1.4rem; color: rgb(255, 255, 255); line-height: 2.8em; text-align: center; text-decoration: none; border-radius: 8px; z-index: 150; -o-transition: background .2s ease-out; -ms-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; }
a.show-button:hover, a.show-button:active { background: rgb(255, 255, 255); color: rgb(238, 64, 61); }


}