#page { width: 310px; margin: 100px auto 0; padding-top: 20px; }
body.home, body.single-character { padding-top: 360px; }
body.home #page, body.single-character #page { margin-top: 20px; padding-top: 0; }
#container { background-image: none; }

#bgImage { height: 240px; background-size: auto 170%; background-position: center 10%; top: 100px; }
#bannerNav { top: 240px; height: 30px; background-color: #000; text-align: center; left: 0; width: 100%; line-height: 25px; vertical-align: middle; z-index: 1; top: 340px; }
#bannerNav li { display: inline-block; margin: 0; vertical-align: middle; }
#bannerNav li:nth-child(even) { margin: 0; }
#tbcHeader { height: 240px; margin-bottom: 50px; pointer-events:none; height: 0; }

#page #masthead { position: fixed; width: 100%; top: 0; left: 0; height: 100px; background-color: #212121; z-index: 100; }
#page #masthead #mainNav { display: block; position: fixed; top: 0; right: -250px; width: 250px; background-color: #212121; padding-top: 10px;
	transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; z-index: 100; }
#page #masthead #mainNav #nav li { display: block; float: none; height: auto; line-height: 1em; padding: 0; margin: 0; border-bottom: 1px solid #666; width: auto; }
#page #masthead #mainNav #nav li a { display: block; padding: 15px 10px; text-align: left; font-size: 100%; }
#page #masthead #mainNav #nav li#topNavServes { margin-right: 0; }
#page #masthead #mainNav #nav li#topNavTBC a { text-indent: 0; background-image: none; white-space: auto; float: none; width: auto; height: auto; display: block; padding: 10px 10px;}
#page #masthead #mainNav .socialLinks { position: static; margin: 5px auto 10px 15px; overflow: auto; }
#page #masthead #mainNav .socialLinks li { float: left; }
#page #masthead #mainNav:before { content: ' '; width: 50px; height: 50px; background: #212121 url(../images/navIcon.png) no-repeat 0 0; position: absolute; left: -50px; top: 0; }
#page #masthead #mainNav.on { right: 0; box-shadow: 0 0 10px #000; }

#page .hexList { margin-top: 0; width: 303px; }
#page .hexList li { transform: scale(0.60,0.60); -moz-transform: scale(0.60,0.60); -webkit-transform: scale(0.60,0.60); -ms-transform: scale(0.60,0.60);
	transform-origin: 0 0; -moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; margin-bottom: -165px; }
.hexList li:nth-child(even) { margin-left: 0; }
.hexList li:nth-child(odd) { margin-left: 135px; }

#page #tbcHeader #tbcTitleScroll { margin-left: 0; width: 159px; height: 146px; background-size: contain; top: -300px; }
#page #tbcHeader p.signature { display: none; }

#page #content.default { width: 90%; }

body.single-serve { background-image: none !important; }
#content.singleServe { margin: 0 auto; width: 100%; }

#page #aboutContent { width: 100%; padding-bottom: 40px; }

#page #content.tbc .head { height: auto; margin-bottom: 30px; }
#page #content.tbc .head #tbcTitleScroll { display: none; }
#page #content.tbc .tbcButton { float: none; margin: 10px auto; }
body.single-character #page #tbcHeader #tbcTitleScroll { top: -270px; }
#page #characters { height: 1000px; }
#page #characters li { float: none; width: 100%; height: 200px; }
#page #characters li a { padding-top: 130px; height: 70px; }
#page #characters li a .back { background-position: center 10%; opacity: 1; }
#characters li:before { background: transparent url(../images/hline.png) no-repeat center; width: 100%; height: 8px; top: -4px; left; 0; }
#characters li:last-child:after { background: transparent url(../images/hline.png) no-repeat center; width: 100%; height: 8px; top: 100%; left: 0; margin-top: -4px; }

#page .whichAreYou { height: 750px; }
#page .whichAreYou #tbcTitleScroll { display: none; }
#page #traitQuestions > li:before { background: none; color: #fff; width: 100%; height: auto; margin: 0 auto; padding: 0; font-size: 1.8em; }
#page #traitQuestions > li .question:after { content: none; }
#page #traitQuestions .answers li:before { left: 5px; background: none; position: static; display: inline; font-size: inherit; content: counter(answers, lower-alpha) ')';
	line-height: inherit; vertical-align: inherit; padding-right: 10px; }
#page #traitQuestions .answers li.on:before { color: #942F20; }
#page #traitQuestions .answers li { width: auto; margin: 20px auto; padding: 0 10px; }
#page .whichAreYou .results { width: 100%; height: auto; background: none; margin-top: 30px; color: #fff; }
#page .whichAreYou .end .results .win { display: none; padding: 0 0; }
#page .whichAreYou .end .results .fail { padding: 0 20px; }
#page .whichAreYou .end .results .win h3 { margin-top: 0; padding-top: 0; }
#page .whichAreYou .end .results .fail h3 { padding-top: 0; padding-top: 0; }
#page .whichAreYou .end .results .win #wonTraits li { font-size: 1.4em; }
#traitPopup .popup { margin-left: -140px; width: 200px; top: 10%; }

#content.tbc .tbcButton { width: 310px; height: 68px; background-size: contain; font-size: 1.1em; line-height: 1em; }

#page #newsSidebar { float: none; margin-top: 40px; width: 100%; }
#page #newsSidebar .section+.section { display: none; }
#page #newsSidebar div { background-image: none; }
#page #newsSidebar ul { padding: 10px 0 20px; }
#page #newsSidebar ul li { display: inline-block; margin: 0 30px; }
#page #newsFeed { width: 100%; float: none; margin-top: 30px; }

#contactDropdown { position: absolute; min-height: 100%; background-color: #212121; z-index: 1; text-align: center; }
#contactDropdown .close { display: none; }
#contactDropdown #contactForm, #contactDropdown #contactDetails, #contactDropdown #contactAddress { float: none; margin: 0; }
#contactForm .gform_wrapper { width: 310px; margin: 0 auto 40px; }
#contactForm #field_1_1, #contactForm #field_1_2, #contactForm #field_1_3 { width: 100%; margin: 5px auto; }
#contactForm #field_1_3 { float: none; position: static; }
#contactForm li.gfield { margin: 0 auto; }
#contactForm #field_1_1 input, #contactForm #field_1_2 input, #contactForm #field_1_3 textarea { width: 280px; font-size: 1.4em; padding: 5px; }
#contactForm #field_1_3 textarea { height: 70px; }
#contactForm .button { float: none; font-family: "quatro-slab"; color: #942F20; font-size: 1.8em; font-weight: 700; background-color: #fff; padding: 5px 10px; text-transform: uppercase; }

#eventsLink { margin: 0; bottom: -20px; left: 0; height: 20px; width: 100%; }
#eventsLink a { width: 100%; text-indent: 0; white-space: wrap; line-height: 30px; background-image: none; height: auto;  text-align: center;
	background-color: #000; color: #fff; font-family: "quatro-slab"; font-weight: bold; }
#eventsLink a:before { content: 'Click here to view our '; }
body.blog #page .hexList { margin-top: 20px; }

footer { width: 310px; text-align: center; }
footer .drinkAware { float: none; margin: 0 auto 20px; }

#avp .popup { width: auto; height: 100%; top: 0; left: 0; margin-left: 0; padding: 20px; position: static; }
#avp .popup h1 { width: 179px; height: 86px; background: url(../images/topLogo.png) no-repeat 0 0; text-indent: 100%; white-space: nowrap; overflow: hidden;
	display: block; margin: 0 auto; position: static; margin-bottom: 30px; }
#avp .popup input[type=submit] { display: block; margin: 10px auto; font-size: 1.2em; padding: 3px 10px; }
#avp .popup form:after { content: none; }
#avp .popup:after { content: ' '; background: url(../images/faceTwit.png) no-repeat 0 -30px; width: 85px; height: 50px; display: block; margin: 20px auto 0; }