#page { min-width: 320px; transition: right 0.2s ease-in-out; -moz-transition: right 0.2s ease-in-out; -webkit-transition: right 0.2s ease-in-out;
	position: relative; right: 0; }
#content { width: 320px; }
.gridLayout { width: 300px; }
.gridBox.double { width: 300px; }
.maxWidth { width: 300px; }

/* Header */

header { height: 100px; }
header h1 { width: 148px; height: 71px; margin-top: 12px; }
header h1 a { background-size: contain; }
header .inner { max-width: auto; padding: 0 20px; }

#navGroup { position: fixed; top: 0; right: -240px; width: 200px;
    /*background: #c9cb2e url(../images/mobileNavBack.jpg) no-repeat center;*/
    background-color: #000000;
	padding: 0 20px 20px; z-index: 200; background-size: cover;
	transition: right 0.2s ease-in-out; -moz-transition: right 0.2s ease-in-out; -webkit-transition: right 0.2s ease-in-out; }
#navGroup:before { background: url(../images/mobileNavIcon.png) no-repeat center; width: 65px; height: 50px; position: absolute; top: 0; left: -65px; content: ' '; display: block; }
#navGroup.on { right: 0; }
header nav { background-image: none; padding: 0; margin: 0; float: none; height: auto; }
header nav:before { content: none; display: none; }
header nav a { padding: 0 15px; float: none;
    /*border-top: 1px solid #f6f7de; */
    border-bottom: 1px solid #f6f7de; line-height: 45px; }
header nav a:first-child { border-top-width: 0; }
header nav a:before, header nav a:after, header nav a.on:after { display: none; content: none; }
header nav a:last-child { background: none;border: none;position: relative;text-indent: 0;overflow: visible;white-space: normal;width: 100%;height: auto;line-height: 1.5;margin: 7px 0;}

header #topLinks { position: static; border-top: 1px solid #f6f7de; padding-top: 10px; }
header #topLinks a { float: none; display: block; line-height: 2.2em; }
header #topLinks a span { display: none; }
header #topLinks a:after { content: none; display: none; }
header #topLinks a:before { top: 50%; margin-top: -9px; }

#page.showNav { right: 240px; }
#page.showNav #navGroup { right: 0; }

/* Home Banners */

#video-ad , #video-ad iframe { width: 300px !important; background-size: contain !important; }

#homeBanners .scrollNav { margin-top: 0; top: auto; bottom: 10px; transform: scale(0.7); -moz-transform: scale(0.7); -webkit-transform: scale(0.7); }
#homeBanners #homeBannerFlavours { background: rgb(233,81,15) url("../images/MobileBanner(1).png") no-repeat center }
#homeBanners { height: 280px; }
#homeBanners #homeBannerApp { background: #82BAB8 url("../images/MobileBanner(2).png") no-repeat center }
#homeBanners #homeBannerApp h3 { background: none; }

#homeBanners .sticker { bottom: 45.5%; }

#homeBannerGoal .money-background { display: none; }
#homeBannerGoal h3 { width: 280px; margin-left: -140px; margin-top: -125px; font-size: 1.3em; }
#homeBannerGoal p { font-size: 1em; bottom: 20px; margin-left: -55px; }
#homeBannerGoal figure.gfgTitle { width: 260px; margin-left: -130px; background-size: contain; margin-top: -25px; }
#homeBannerGoal figure.bottle { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); }

#homeBannerBTCC figure { display: none; }
#homeBannerBTCC h3 { position: static; margin: 40px auto; width: 280px; height: 105px; background-size: contain; }
#homeBannerBTCC p { position: static; margin: 0 auto; text-align: center; }

#homeBannerFlavours figure { width: 300px; height: 210px; background-size: contain; margin-left: -150px; }
#homeBannerFlavours h3 { width: 300px; height: 40px; top: 30px; margin-left: -150px; background-size: contain; }
#homeBannerFlavours p { z-index: 1; top: 190px; }

#homeBannerCocktails figure { display: none; }
#homeBannerCocktails h3 { width: 300px; margin-left: -150px; background-size: contain; top: 40px; }
#homeBannerCocktails p { margin-left: -150px; width: 300px; text-align: center; top: 190px; }

#homeBanners #homeBannerHub {   background: #DFF9FE url("../images/homebanners/gnhub-mobile.png") no-repeat center; background-size: auto 100%; }

#homeBannerApp figure { display: none; }
#homeBannerApp h3 { height: 149px;margin-top: -75px;background-size: 217px 149px; }
#homeBannerApp p { margin-left: -150px; width: 300px; text-align: center; top: 180px; }

#homeBanners .sticker {height: 125px;width: 150px;}
@media (max-width:460px) {
	#homeBanners .sticker {height: 80px;width: 95px;}
}

#homeBannerDanceOff { background-image: url(../images/homebanners/danceOffBanner_320.jpg); }
#homeBannerDanceOff h3 { width: 280px; font-size: 1.4em; margin-top: -4em; }
#homeBannerDanceOff .button { font-size: 0.9em; padding: 10px 0; }

#homeBannerH4H { background-image: url(../images/homebanners/h4hMobile.jpg); background-size: contain; }

#homeBannerTry { background-image: url(../images/homebanners/crabbies_time_banner_mob.png); }
#homeBannerTry .eye , #homeBannerTry .rocket { display: none; }

#homeBannerSweepstakes { background-image: url(../images/homebanners/sweepstakesMobile.jpg); background-size: contain; }

#homeBannerBuyCrabbies { background: #209d51 url(../images/homebanners/CGB-Mobile.jpg) no-repeat center center; /*background:url('../images/homebanners/crabbies-buy-crabbies.jpg') no-repeat center center;*/ }

#lightBanner { background-image: url(../images/homebanners/lightBannerMob.jpg); }

#rugbyPrizes { background-image: url(../images/homebanners/rugbyPrizesMobile.jpg); }

#rugbyPrizes2017 { background-image: url(../images/homebanners/crabbies-rugby-prizes-mobile.jpg); }

/* Home Boxes */

#flavourScroller { width: 300px; height: 300px; }
#flavourScroller .panel { left: 0; width: 300px; height: 300px; border-radius: 10px; background-position: -250px 0; background-size: 590px auto; }
#flavourScroller .panel .link { bottom: 50px; left: 0; width: 100%; text-align: center; }
#flavourScroller h3 { display: none; }
#flavourScroller .scrollNav { margin-top: 45px; }

/* Story */

.story section.pioneer-of-taste,
.story section.fruit-for-flavour { height: auto; padding: 50px 10px 100px; background-size: 160px auto; background-position: -70px center;background-image: none; }
.story section.fruit-for-flavour { padding-top: 100px; }
.story section.fruit-for-flavour h2 { padding-bottom: 25px; }
#content.story section h2 { width: 320px; position: static; text-align: center; margin-bottom: 0; }
#content.story section.pioneer-of-taste h2 { font-size: 3.9em; width: 274px}

/*.story section.pioneer-of-taste { background-image: url(../images/story-blue-background.png); background-repeat: repeat;}*/
.story section.pioneer-of-taste .content p { padding-right: 20px }
.story section.pioneer-of-taste .asset { display: none }

#content.story section.distinctively-refreshing .maxWidth { margin-left: auto; width: 320px }
#content.story section.distinctively-refreshing h2 { font-size: 2.6em; padding: 10px 0;  }
#content.story section.fruit-for-flavour h2 { font-size: 3.7em; }
#content.story section .content { width: 100%; font-size: 2em; position: static; }

/* Drinks Page */

.citrus .bg-wrapper #flavourSubtitle { padding-bottom: 285px }
.citrus .bg-wrapper #flavourSubtitle h3 { top: 87% }

#flavourSideScroller { width: 100%; height: auto; overflow: visible; }
#flavourSideScroller .inner { width: auto; }
#flavourSideScroller .slider { left: 0 !important; width: 100% !important; position: static; }
#flavourSideScroller .slider .panel { float: none; width: 100%; height: auto; height: 100px; background-image: none; }
#flavourSideScroller .scrollNav { display: none; }
#flavourSideScroller .panel.cloned { display:none; }
#flavourSideScroller .panel h3 { margin: 15px 20px; width: 180px; height: 70px; background-size: contain;
	float: left; }
#flavourSideScroller .panel .button { float: right; margin: 30px 20px 0 0; }


/* Drink Page */

/*.scottish-raspberry #flavourHeader h2 { top: 292%; margin: -60px 0 0 -155px; }*/
/*.scottish-raspberry #flavourSubtitle h3 { top: 98% }*/

/*.original #flavourHeader h2 { top: 292%; margin: -130px 0 0 -145px; }*/
/*.citrus #flavourHeader h2 { margin: -60px 0 0 -149px; }*/
/*.strawberry-and-lime #flavourHeader h2 { margin: -60px 0 0 -145px; }*/

/*.strawberry-and-lime #flavourHeader h2 { top: 274% }*/
/*.strawberry-and-lime #flavourSubtitle h3 { top: 95% }*/

#flavourHeader { height: 300px; }
#flavourHeader h2 { width: 275px; height: 100px; margin: -60px 0 0 -130px; background-size: contain; }
#flavourSubtitle { padding-bottom: 390px; }

#flavourSubtitle img.bottle { position: static; margin: -100px auto 100px; width: 300px; height: auto; }
#flavourSubtitle h3 {   bottom: 20px; top: auto; left: 50%; margin-left: -150px; width: 300px; height: 200px; background-size: contain; }
#flavourCocktails { padding: 50px 0; height: 350px; }
#flavourCocktails h3 { font-size: 1.5em; }
#cocktailSlider { height: 230px; }
#flavourCocktails .panel { width: 300px; height: 200px; border-width: 5px; margin-left: -155px; }
#flavourCocktails .scrollNav { top: 100%; margin-top: 0; }
#flavourCocktails .panel .title { padding: 0 10px; }
#flavourCocktails .panel .title p { font-size: 1.25em; width: 210px; padding: 10px 0; min-height: 2em; }
#flavourCocktails .panel .button { font-size: 0.8em; padding: 8px; margin-top: 1em; }

#content.flavour.basic #flavourSubtitle img.bottle { position: absolute; top: -20px; width: 200px; margin-left: 50%; margin-left: -100px; }
#content.flavour.basic #flavourSubtitle h3 { width: 300px; text-align: center; padding: 600px 0 50px; margin: 0 auto; font-size: 2em; position: static; }
#content.flavour.basic #flavourSubtitle { height: auto; padding-bottom: 0; margin-bottom: 0; }

/* Crabbie's Time */

#crabbiesTimeTitle { width: 300px; height: 155px; background-size: contain; background-position: center; }

/* Events */

#eventsHeader { height: 265px; }
#eventsHeader .countdown { margin: 0 auto; width: 288px; padding-bottom: 5px; padding-top: 20px; }
#eventsHeader .countdown .unit.secs { display: none; }
#eventsHeader .unit { margin: 0 10px; width: 76px; font-size: 1em; }
#eventsHeader .unit .num { width: 76px; height: 77px; line-height: 77px; margin-bottom: 5px; background-image: url(../images/countdownDigitBack.png); }
#eventsHeader .unit .num:after { width: 76px; height: 2px; margin-top: -1px; }
#eventsHeader .eventLogo { width: 300px; height: 110px; background-size: contain; margin-top: 5px; }
#eventsHeader .cta { margin-top: -15px; }
#eventsHeader .button { padding: 3px 8px; font-size: 0.9em; }
#content.events h2 { font-size: 2em; }
#eventsList .eventBanner { width: auto; height: auto; background-image: none !important; padding: 20px; margin: 0; font-size: 0.6em; color: #000;
	border-top: 5px dotted #000; border-radius: 0; }
#eventsList .eventBanner:first-child { border-top-width: 0; }

#eventSubhead { height: auto; }
#eventSubhead .content { padding: 40px 10px; width: auto; }
#eventSubhead h3:after { width: 100%; }
#eventSubhead .links a { padding-left: 0; margin-left: 0; border-left-width: 0; display: block; line-height: 1.3em; }
#eventSubhead .image { display: none; }
#eventSubhead .description { font-size: 1.3em; }
#content.event .featured { padding: 50px 0; }
#content.event .featured img { width: 270px; height: auto; }

/* New Events */

#eventsFilter, #eventsMapView { display: none !important; }
#eventsListView { display: block !important; }
#eventsListView li .title { font-size: 1.5em; max-width: 100%; width: 160px; }
#eventsListView li .details { font-size: 1.1em; max-width: 100%; width: 160px; float: left; text-align: left; }

#previousEvents li { width: 280px; height: auto; }
#previousEvents li img { width: 100%; height: auto; display: block; }
#previousEvents li .prev-event-details { position: static; overflow: auto; background-color: #fff; height: auto; padding-top: 15px; }
#previousEvents li .prev-event-details p { font-size: 1.2em; line-height: 1.3em; color: #000; }

#eventsHeader.past h1 { font-size: 2.5em; }

/* Tour */

#content.tour.comingSoon h2 { width: 300px; height: 280px; background-size: auto 100%; }

/* News */

#newsItem { padding: 0; }
#newsItem .date { position: static; text-align: left; margin-bottom: 60px; }
#content #newsItem .date span { display: inline; transform: none; margin: none; position: static; font-size: 1em; }
#newsItem:before { left: 0; top: 70px; }
#content.newsItem { width: auto; padding: 0 20px; }

#content.newsItem.media iframe { width: 300px; height: 200px; }

/* Find Crabbie's */

#findForm { width: auto; float: none; }
#findMap { display: none !important; }
#findForm .buttons a { width: 90px; }
#locationsScroll, #locationsScroll .viewport { height: auto; }
#locationsScroll .scrollbar { display: none; }
#locationsScroll, #locationsScroll .viewport, #locationsScroll .overview { position: static; }

/* Forms */

#contactForm { width: 100%; }
#contactForm h3 { color: #212121; font-size: 2.3em; }
#contactForm input[type="text"], #contactForm input[type="email"], #contactForm textarea { color: #212121; font-size: 1.5em; font-weight: normal; }
#contactForm ::-webkit-input-placeholder { color: #212121; opacity: 1; }
#contactForm :-moz-placeholder { color: #212121; opacity: 0.5; }
#contactForm ::-moz-placeholder { color: #212121; opacity: 0.5; }
#contactForm :-ms-input-placeholder { color: #212121; opacity: 0.5; }
#contactForm .wpcf7-response-output { color: #212121; }

/* International */

.crabbiesInternational h2 { font-size: 2.4em; }
#socialMap { width: auto; height: auto; background-image: none; text-align: center; }
#socialMap p { position: static; margin-bottom: 0.5em; }
#socialMap p:after { display:none; }
#socialMap p a { display: inline-block; position: relative; left: 0; width: 150px; border-radius: 5px; padding: 0 10px 0 40px; }
#socialMap p a:after { right: auto; left: 10px; margin-left: 0; }

/* Footer */
footer {height: 310px;}
footer .inner { max-width: 320px; }
footer #jtcFooterForm { text-align: center; float: none; height: 155px; font-size: 1em; }
footer #jtcFooterForm:after { content: ' '; clear: both; }
footer #jtcFooterForm h4 { margin: 0; padding: 30px 0 0; font-size: 1.2em; }
footer #jtcFooterForm .field, footer #jtcFooterForm p { margin: 10px 0 0; }
footer #jtcFooterForm p.submit { float: right; }
footer #jtcFooterForm p.submit img { display: none; }
footer #jtcFooterForm .button { margin-top: 0.5em; }
footer #jtcFooterForm input[type="text"] { width: 240px; padding: 0 5px; font-size: 1.4em; height: 1.7em; }
footer #jtcFooterForm .wpcf7-response-output { position: static; clear: both; }
footer #socialLinks { display: none; }
footer #socialIntLinks { display: none; }
footer #drinkAwareFooter { position: static; width: auto; float: right; }
footer #drinkAwareFooter p { display: none; }
footer #drinkAwareFooter .drinkaware-app { left: 50%;right: 0;margin-left: -114px; }
footer #drinkAwareFooter .logo { float: none; margin: 50px auto 0; position: absolute; left: 0; right: 0; }
footer #legalLinks { left: 0; bottom: 15px; width: auto; text-align: left; margin: 0; }
footer #legalLinks a { display: block; padding: 0; border-width: 0; line-height: 1.5em; }

/* AVP */

#avpInner { width: 300px; margin-left: -150px; height: 450px; margin-top: -225px; }
#avpInner .message { font-size: 1.3em; padding-bottom: 20px; }
#avpInner .dateSelect { height: 90px; }
#avpInner span.select { width: 90px; height: 90px; background-position: -150px -120px; margin: 0 5px; float: left; }
#avpInner span.select .value { width: 90px; height: 90px; font-size: 3em; line-height: 90px; }
#avpInner select { width: 90px; height: 90px; }

/* Easter Thing */


#findForm h2 { max-width: 300px; }
#easterEgg.pos0 { top: 1370px; margin-left: -120px; }
#easterEgg.pos1 { top: 330px; margin-left: 100px; }
#easterEgg.pos2 { top: 800px; margin-left: 95px; }
#easterEgg.pos3 { top: 110px; left: 280px; }
#easterEgg.pos4 { top: 1010px; margin-left: -100px; }

#content.secretPage h2 { background-size: contain; width: 320px; height: 67px; }
#content.secretPage .form { background-image: none; padding: 0; }

/* #CrabbiesPrizeTime */

#cptHeader { height: 330px; }
#cptHeader figure { display: none !important; }
#cptHeader .hashtag { -webkit-transform: scale(0.6); -webkit-transform-origin: 50% 0; transform: scale(0.6); transform-origin: 50% 0; }
#cptHeader h2 { width: 300px; margin-left: -150px; top: 90px; font-size: 2em; }
#cptHeader>p { top: 130px; width: 300px; font-size: 1.3em; margin: 0 0 0 -150px; }
#cptHeader #cptPost { display: none; }
#cptTweetBox { width: 300px; font-size: 1.25em; bottom: 20px; line-height: 1.3em; }
#cptWinnersList article { width: auto; height: auto; background-image:  none; background-color: #fff; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.4);
	margin: 45px 0 100px; }
#cptWinnersList article .winTime { transform: none; -webkit-transform: none; -ms-transform: none; right: 50%; top: -45px; margin-right: -100px; }
#cptWinnersList .prize { right: 10%; bottom: -25px; background: transparent none; box-shadow: none; width: 80%; height: auto; top: auto; text-align: center; }
#cptWinnersList .prize span { position: static; width: auto; margin: 0 auto; color: #000; display: block; }
#cptCountdown .foot { line-height: 1em; margin: 1em auto 2em; width: 80%; }
#cptCountdown .foot strong { font-size: inherit; line-height: inherit; position: static; }
#cptCountdown .foot strong:after { content: none; display: none; }
#cptCountdown .countdown { margin: 10px 6px 0; width: 288px; padding-bottom: 5px; overflow: auto; }
#cptCountdown .unit { margin: 0 5px; width: 76px; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 1em; }
#cptCountdown .unit .num { width: 76px; height: 77px; line-height: 77px; display: block; font-size: 3em; margin-bottom: 5px; position: relative;
	background: url(../images/countdownDigitBack.png) no-repeat 0 0; }
#cptCountdown .unit .num:after { display: block; content: ' '; width: 76px; height: 2px; background-color: #000; position: absolute; top: 50%; left: 0; margin-top: -1px; }

/* 2014 Grand National Page */

#content.gn21014 { font-size: 1.3em; }
#content.gn21014 .maxWidth { width: auto; padding-left: 15px; padding-right: 15px; }
#content.gn21014 .bottom { text-align: center; }
#content.gn21014 .bottom img { display: none; }


#appAdFooter { top: 315px !important; }
#appAd h4 { margin-top: 338px; float: none !important; }
#appAd .downloadLinks, #appAdFooter .downloadLinks { left: 0; right: 0 }
#appAd { margin-top: -40px !important; }
#content { padding-bottom: 180px; }
#homeBannerApp, #homeBannerFlavours { background-size: cover }

#h4hFooter { display: none; }

.single-event #appAd  { top: 685px !important; }
.single-event #appAd h4 { width: 100% }
.single-event #appAd h4 span { display: block }

#curry-comp h2 { width: 100%; max-width: 450px; text-align: center; padding: 0 1em; }
#curry-comp h2 span { display: block; margin: 0 auto; float: none; }