@font-face {
    font-family: 'monteithsshovelfontregular'; src: url('../font/monteithsshovelfont-webfont.woff2') format('woff2'), url('../font/monteithsshovelfont-webfont.woff') format('woff'), url('../font/monteithsshovelfont-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal;
}


@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

html{background: #2F2C2D;}
body{font-family: 'Open Sans', sans-serif; background: #040404 url(textured-paper.jpg); background-size: cover;}
h1, h2, h3, h4, h5, h6 {text-align:center}
footer h2, footer h3, footer h4, table h3, .beer-item h3 {text-align:left}
h1{font-size:4.6rem; text-align:center; margin:-215px auto; color:#fff; position:relative; display:inline-block; text-shadow:0 0 4px rgba(0,0,3,0.3); position:absolute; left:0; right:0; line-height: 0.7em;}
h1, .top-nav ul li a{font-family: 'monteithsshovelfontregular'; text-transform: uppercase;}
h1 span {clear:both; width:100%; display:inline; background:url(h1-span-lines.png) center center no-repeat; background-size:100% 100%; font-family:'Montserrat',sans; font-size:19px; font-weight:700; padding:0.6em 0; line-height:2em}
h2, h3, h4, h5, h6{font-family: 'Montserrat'; text-transform: uppercase; font-weight:700}
h2{font-size:2.4rem;}
h3{font-size: 18px; line-height: 20px; color: #000000; font-weight: 700; text-transform: uppercase; font-family: 'ChaletComprimeHongKongSixty', sans-serif;}
p{ font-size: 17px; line-height: 18px; color: #333; font-weight: 400; margin-bottom: 18px; line-height:1.2em}
strong{color: #000; font-weight: 700;}
.margin{position:relative;}
.button, a.button, a.button:link, a.button:active, a.button:visited{background: #275B2A; font-family: 'Montserrat'; text-transform: uppercase; font-size: 1.45rem;  padding: 0.7rem 1.25rem; line-height: 1; font-weight:700}
.button:hover, a.button:hover{background: #fff; color: #275B2A;}
.button + .button {margin-left:0.6em}
.photoleft{float:left; margin:0 10px 15px 0; max-width:50%;}
.photoright{float:right; margin:0 0 15px 10px; max-width:50%;}
.small {font-size:0.9em}
.center{text-align:center!important; margin:0 auto}
.white{color:#fff!important;}
:not(.greenback) .white{text-shadow:0 0 4px rgba(0,0,0,0.3);}
.orange, .orange strong{color:#e65219!important;}
.gap{margin:0.5em;}
.caps{text-transform:uppercase;}
.boldcaps{text-transform:uppercase; font-weight:bold}
.left, .leftalign{text-align:left!important}
.right, .rightalign{text-align:right!important}
.clear{clear:both; width:100%; white-space:nowrap; height:0; overflow:hidden}
img{display: inline-block}
h2:focus, h3:focus,h4:focus{outline : none;}

/* AGECHECK */
.ac-container a.button{margin:0.7em 0 0 0;}

/* HEADERS */
header{position: relative; /*min-height: 350px;*/ background-color:#333}
#header-image{background:center center no-repeat rgba(30,30,30,0.4); height:0; padding:13% 0; padding:15vh 0; width:100%; max-height:33vh; overflow:hidden; background-size:cover; }
#header-image {background-image: url(../images/gallery-header.jpg);}
body.kitchen #header-image {background-image: url(../images/kitchen-header.jpg);}
body.tastings #header-image {background-image: url(../images/tastings-header.jpg);}
body.events #header-image {background-image: url(../images/events-header.jpg);}
body.functions #header-image {background-image: url(../images/functions-header.jpg);}
body.about #header-image {background-image: url(../images/history-header.jpg);}
body.tours #header-image {background-image: url(../images/tours-header.jpg);}
body.gallery #header-image {background-image: url(../images/gallery-header.jpg);}
body.in-the-area #header-image {background-image: url(../images/inthearea-header.jpg);}
.owl-item img, .full-img {display:block!important}

nav{background: transparent; position: absolute; top: 20px; top: 110px; z-index:999; }
	.top-nav ul{text-align: center;}
	.top-nav li{display: inline-block; float: none; vertical-align: middle; padding: 0.5rem 1rem; padding: 0rem 1rem;}
	.top-nav ul li a{font-size: 1.4rem; font-size: 1.5rem; border-bottom: 3px solid transparent; padding: 0 ; text-shadow:0 0 3px rgba(0,0,0,0.6);}
	.top-nav ul li a:hover{background: transparent; border-bottom: 3px solid #275B2A;}
	.top-nav ul li a.featured,.top-nav ul li a.book{background: #275B2A; padding: 0rem 0.4rem; font-size: 1.8rem; border-bottom: 0; box-shadow: 3px 3px 15px rgba(0,0,0,0.7);}
	.top-nav ul li a.featured:hover, .top-nav ul li a.book:hover{background: #fff; color: #275B2A;}

section.mobile-logo{background: #275B2A; padding: 50px 30px; text-align: center;}
section.logo{text-align: center; z-index:998; position:relative}
section.logo a{display:block; margin:0 auto -124px; padding:5px 0; }

section.intro{background: url(../images/watermark.png) no-repeat left bottom; padding: 18px 5px 30px;}
	section.intro h2{text-align: center;}
	section.intro  p {line-height:1.6em;}
	section.intro h2 + p{text-align: center; font-weight: 700; line-height: 20px; color: #2F2C2D; font-size: 18px;}
	/*section.intro .l-4{border-right: 3px solid #000;}*/
	section.intro .l-8{padding-left: 50px;}
	section div.hours {background:rgba(255,255,255,0.4); color:#fff; margin-right:; border:4px solid #275B2A; padding:1.3em 1.2em; }
	section div.hours p {font-size:0.9em!important}
	section div.hours h3 {font-family: 'Montserrat'; text-transform: uppercase; font-size:1.8em; margin-bottom:1em; line-height:1em;}
	body.tastings section div.hours, body.kitchen section div.hours , body.tours section div.hours {float:right; width:280px; margin:0 0 18px 30px;}
	#contentarea {padding-right:2em}
	#contentarea a, :not(a.button) {border-bottom:1px dotted #222; text-decoration:none!important}
	
section.main{padding: 35px 0 50px 0;}

section.banners{background: #111!important; text-align: center;}
section.banners p{background: url(grid-dark.svg) repeat center center; text-align: center; padding: 35px 0; margin-bottom:0}
	/*.banner {position: relative; height: 228px; transition: background-color 1s; background: rgba(0,0,0,0);}
	.banner:hover {background-color: rgba(188, 43, 22,0.6);}*/
	.banner {background-color: rgba(0, 0, 0,0.25);position: relative; height: 228px; transition: background-color 1s; background-size:cover}
	.banner:hover {background-color: rgba(39, 91, 42, 0.8);}	
	.banner:before {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: inherit; content: ' ';}
	#banner1{background-image: url('../images/kitchen-tap-room-banner.jpg');}
	#banner2{background-image: url('../images/functions-banner.jpg');}
	#banner3{background-image: url('../images/tours-banner.jpg');}
	.banner .bannertext{height: 1.1em; width: auto; background-repeat: no-repeat; background-position: left center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; display:block; font-family: 'Montserrat'; text-transform: uppercase; margin:auto; font-size: 1.9em; text-align: center; line-height: 1em; color:#fff; padding-left:55px; white-space: nowrap; width:0; font-weight:700;}
	.banner a{width:100%; height:100%; position:relative; display:block}
	/*	#banner1 .bannertext{background-image: url('../images/tuihq-text.png');}
	#banner2 .bannertext{background-image: url('../images/functions-text.png');}
	#banner3 .bannertext{background-image: url('../images/tours-text.png');}*/
	#banner1 .bannertext{background-image: url('../images/kitchen-text.png'); left:-52%; }
	#banner2 .bannertext{background-image: url('../images/functions-text.png'); left:-53%; height: 1.9em; padding-top: 15px; background-size: 75%;}
	#banner3 .bannertext{background-image: url('../images/tours-text.png'); left:-35%;}
	.banner:hover .bannertext{filter: brightness(0) invert(1);}

section.location{position: relative; min-height: 625px;}
	section.location h1, section.location h2, section.location h3{color: #fff;}
	#map{height: 625px; width: 100%; position: absolute; z-index: 99; background:rgba(30,30,30,0.4);}
	#locationbox1{position: absolute; top: 50px; right: 100px; color: #fff; background: #2F2C2D; height: 255px; width:480px; z-index: 100; text-align: center}
	#locationbox2{position: absolute; top: 320px; right: 100px; color: #fff; background: #2F2C2D; height: 200px; width:480px; z-index: 100; text-align: center}
	#locationbox1 p, #locationbox2 p{color: #fff;}
	ul#locationcontactdetails li a, ul#locationcontactdetails li a:hover {color: #fff;}
	ul#locationcontactdetails{list-style: none;}
	ul#locationcontactdetails li{display: inline-block;}
	ul#locationcontactdetails li#phone{background: url('phone.png') no-repeat; padding-left: 30px; line-height: 30px;}
	ul#locationcontactdetails li#email{background: url('email.png') no-repeat; padding-left: 30px; line-height: 30px;}

.left{float:left;}
.right{float: right;}

footer{background: #2F2C2D; padding: 50px 0;}
	footer h2{color: #fff; font-size: 1.2rem;}
	footer p{font-size: 13px; color:#7F7F7F}
	footer a, footer a:link, footer a:visited, footer a:hover, footer a:active{color: #7F7F7F; font-size: 13px; font-weight: 400;}
	footer a:hover, footer a:link:hover{color: #7F7F7F; text-decoration: underline}
	.footerleft img{max-width:88%; }
	.footermiddle, .footerright{padding-left: 22px; border-left: 1px solid #fff; min-height: 194px;}
	.footerright ul{column-count:2; list-style:none; padding:0}
	h2#findus{background: url('find.png') no-repeat; padding-left: 30px;}
	h2#contactus{background: url('contact.png') no-repeat; padding-left: 30px;}
	.footersocial{list-style: none; padding-left: 0;}
	.footersocial li{display: inline}
	.footersocial a{display: inline-block; padding: 12.5px;}
	.footersocial span{display: none}
	#twitter {background: url(twitter.png) center top no-repeat; background-size: 25px auto; background-size: cover;}
	#facebook {background: url(facebook.png) center top no-repeat; background-size: 25px auto; background-size: cover;}
	#instagram {background: url(instagram.png) center top no-repeat; background-size: 25px auto; background-size: cover;}
	#youtube {background: url(youtube.png) center top no-repeat; background-size: 25px auto; background-size: cover;}
	#cheers {background: url(cheers.png) center top no-repeat; background-size: 35px 15px auto; padding: 15px 35px; background-size: cover;}
	#cheers:hover{opacity: 0.6}
	#tripadvisor {background: url(tripadvisor.png) center top no-repeat; background-size: 25px auto; background-size: cover;}
	#twitter:hover, #facebook:hover, #instagram:hover, #youtube:hover, #tripadvisor:hover{background-position: center bottom;}

/* FUNCTIONS */	
	.gallery-left{float:left; max-width:700px; }
	.gallery-right{float:left; padding:0 0 0 25px; max-width:calc(100% - 710px); width:300px}
	.gallery-right h3 {clear:both}
	.gallery-right ul {width:100%; clear:both; min-height:1px; float:none; padding:0}
	.gallery-right li{list-style:none; font-size:0.6em; color:#000; text-align:center; float:left; display:inline-block; margin:5px 3px; max-width:60px; min-width:60px; position:relative}
	.gallery-right li strong {clear:both; font-size:2.7em; font-weight:bold; width:100%; display:block; max-width:60px; margin:3px 0;}
	.gallery-right li::first-line{display:block; width:60px; overflow:visible; position:relative; font-weight:500; font-size:1.1em; } 
	.gallery-right li:nth-child(2n) strong {font-size:1.6em;}
	.gallery-right li:nth-child(2n) .square {padding-top:9px;}
	.gallery-right li:nth-child(3n) strong {padding-bottom:5px;}
	.gallery-right ul + .button {clear:both; float:none; display:block}
	.modal {width:100%; z-index:9999; position:fixed; top:0; bottom:0; left:0; right:0; height:100%; background:rgba(0,0,0,0.85);display:none}
	.square{padding:3px 0; border:1px solid #000; height:60px; max-width:60px; min-width:60px; overflow:hidden; line-height:0.95; display:inline-block}
	.sparkling-modal-content{max-height:70vh}
	.modal iframe {width:900px; overflow-y:scroll;}
	#modal-frame{ max-height:64vh!important }
	#footer-buttons p{font-family: 'Montserrat'; text-transform: uppercase; font-size: 1.8em;  }
	#footer-buttons a{font-weight:600; max-width:23.5%; margin-right:1%; display:block; float:left; width:100%; text-transform:uppercase; color:#fff; text-align:center; background-color: rgba(188, 43, 22,0.8);}
	#footer-buttons a:last-child{margin-right:0;}
	#footer-buttons a:hover{filter: brightness(0) invert(1);}
	#footer-buttons a span { padding:28px 0; width:100%; display:block; background-size:cover; transition: opacity 0.2s}
	#footer-buttons a:hover span {opacity:0.5}
	#menus-img span{background:url(menu-bnw.jpg) center center no-repeat;}
	#transport-img span{background:url(transport-bnw.jpg) center center no-repeat;}
	#equipment-img span{background:url(equipment-bnw.jpg) center center no-repeat;}
	#hotel-img span{background:url(hotel-bnw.jpg) center center no-repeat;}
	.lSSlideWrapper{width:100%}
	#portfolio .button {margin-bottom:1.2em}


/* CONTACT */	
#sck-form {}
#sck-form .field {padding:8px 15px; margin-top:7px}
#sck-form textarea{width:50%; min-width:203px; max-width: 100%; height:150px;}
#sck-form .g-recaptcha {text-align:center; margin-bottom:2em}
#sck-form .g-recaptcha div{margin:0 auto}

/* PAGE SPECIFICS */	
body.homepage section.intro{padding-bottom:4em}
body.homepage h1 + p {max-width:85%; text-align:center; text-align:center; margin:0 auto 1.2em; font-size:1.2em}
body.enquiries .main, body.enquiries .main p, body.enquiries .main form{text-align:center}
body.tastings p, body.tastings hr{max-width:800px}
body.tours .greyback {border-bottom:6px solid #1e5328}
body.tours .greyback h2 {font-size:3.4em;}
body.tours .greyback h3 {font-size:2.9em; letter-spacing:3px; font-family: 'Montserrat'; text-transform: uppercase; color:#e65219; margin:26px 0 15px 0; line-height:0.8em;}
body.tours .greyback p {color:#fff; font-size:0.95em; max-width:800px}
body.tours .greyback .button {margin:1em auto 1.3em;}
/*body.about #header-image {margin-bottom:-5px}*/
body.about p iframe {width:48%; float:left; margin:0 1%; max-width:48%; border:7px solid #fff;}
body.about .photoleft {border:7px solid #fff; width:calc(33% - 6.8px); display:block; box-shadow: 4px 4px 20px rgba(0,0,0,0.5);}

/*IN THE AREA*/
div.photo{background: #fff; padding: 17px 19px; box-shadow: 7px 7px 25px rgba(0,0,0,0.3); margin-bottom: 25px;}
div.photo h2{font-size: 2rem; line-height:0.9em}
body.in-the-area .photo {position:relative; }
body.in-the-area .photo img{width:100%; height:auto}
body.in-the-area .imagetype {position:absolute; right:23px; bottom:20px}
body.in-the-area h2.left {font-size:1.2em;}
.imagetype {width:53px; height:53px; background-size:cover; }
.imagetype span {display:none}
.imagetype.accommodation{background-image:url(accom-icon.png)!important;}
.imagetype.attraction{background-image:url(general-activity-icon.png)!important;}
.imagetype.transport{background-image:url(transport-icon.png)!important}
.photobox{min-height: 122px;}
.photobox p{margin-bottom:4px;}
.specialphoto{width: calc(100% - 320px); margin-bottom: 20px; clear: both; float: left;}

/*TOURS*/
body.tours .leftspace h2{font-size:2.2em}
body.tours .leftspace {width:72%; float:left;}
body.tours .bottlespace{width:28%;float:left; margin:-110px 0 -60px 0; }
body.tours .bottlespace img{float:right; padding-right:20px;}
body.tours table {margin-bottom:2em;}
body.tours table td{text-transform:uppercase; font-size:1.3em; padding:10px 25px;}

/*TASTINGS*/
body.tastings .leftspace h2{font-size:2.2em}
body.tastings .leftspace {width:55%; float:left;}
body.tastings .bottlespace{width:45%;float:left; margin:-20px 0 -35px 0; }
body.tastings .bottlespace img{float:right; padding-right:10px;}
body.tastings table {margin-bottom:2em; max-width:700px;}
body.tastings table td{text-transform:uppercase; font-size:1.3em; padding:10px 25px;}

/*KITCHEN*/
.lSSlideOuter {}
#menuScroller{}
#menuScroller table{max-width:900px; margin:0 auto;}
#menuScroller table td{padding:0.625rem 1rem;}
#menuScroller h3{font-family: 'Montserrat'; text-transform: uppercase; font-size:1.7em; margin-top:8px; padding:5px 0 4px 90px; margin-left:-90px;line-height:1em}
#menuScroller p, #menuScroller td{font-size:1.1em; margin-bottom:10px; padding-left:90px!important}
#menuScroller td:nth-child(2){padding:0.625rem 30px!important}
#menuScroller p{margin-left:-90px}
#menuScroller td[colspan]:not([colspan="1"]) h3, #menuScroller td[colspan]:not([colspan="1"]) p {padding-right:90px!important; margin-left:0!important}
#menuScroller td[colspan]:not([colspan="1"]){position: relative; left: -40px;}
.veggie{background:url(vegetarian_icon.png) 12px center no-repeat; }
.glutenfree{background:url(gluten-free_icon.png) 12px center no-repeat; }
.glutenfree.veggie{background-image: url(veggie-gluten-free_icon.png); }
body.kitchen .greyback {padding:0}
.greenback{background:url(greenback.png) repeat #2a5c2f; color:#fff}
.greenback .leftspace { max-width:450px; padding:9% 0 7% 7%;}
.greenback h2, .greenback h3, .greenback p{color:#fff;}
.greyback{background:url(greyback.png) repeat;}
.greyback h2, .greyback p, .greyback a{color:#fff;}
.greyback h3 {color:#e65219;}
#beer-menu::before{ background: url(whatsontap.png) left center no-repeat transparent; display: inline-block; height: 104px; width: 74px; content: " ";  background-size: contain;  position: relative;  bottom: -31px; z-index:999}
.beer-item p{max-width:1000px; color:#111}
.beer-item h3{padding-top:1.75em;font-family: 'Montserrat'; text-transform: uppercase; font-size:2.5em; margin-bottom:18px }
.beer-item .photoleft{margin-right:2em }

/*LIGHTSLIDER*/
ul.lightSlider li {text-align:center!important}
ul.lightSlider li img{margin:0 auto!important;}
#lightSlider {
    list-style: none outside none;
    padding-left: 0;
    margin-bottom:0;
}
#lightSlider li {
    display: block;
    float: left;
    margin-right: 6px;
    cursor:pointer;
}
#lightSlider img {
    display: block;
    height: auto;
    max-width: 100%;
}
.cS-hidden {
    height: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
}


@media screen and (max-width: 1399px){
	#greenbox1, #greenbox2{left: 0; right: 0;}
}

@media screen and (max-width: 1140px){
	.main{padding:35px 20px 50px ;}
}


@media screen and (max-width: 1131px) and (min-width: 768px){
	h1 span, h1 br{display:none;}
}

@media screen and (max-width: 1039px){
	body.in-the-area .photo img {width:100%; height:auto}
	.photobox p{font-size:0.9em}
	.photobox {min-height:110px;}
	.imagetype {bottom:auto; right:28px; top:28px}
}

@media screen and (min-width: 768px){
	nav {top:auto;bottom:10px}
}

@media screen and (max-width: 768px){
	header{background-position: center; background-size: cover; min-height: 0; height: auto;}
	nav{background: #275B2A; /*top: -50px;*/ top:0; position:relative}
	nav p{margin:0!important}
	h1{margin:35px 0 20px 0; position:relative; text-align:center; display:block }
	section.intro{text-align: center;}
	.gallery-left, .gallery-right {float:none; width:100%; margin:8px 0; max-width:none; padding:0 20px}
	.gallery-right ul {text-align:center}
	.gallery-right li {float:none}
	.gallery-right ul + .button {margin:1em auto;}
	.specialphoto{width: 100%; float: none;}
	footer h2 {max-width:140px; margin:0 auto; text-align:center;}
	#footer-buttons a{max-width:47.5%; margin:1.167%}
	.owl-carousel .item img{/*border-bottom: 5px solid #275B2A;*/}
	.top-nav li{display: block; padding: 0;}
	.top-nav li a{padding: 20px;}
	.top-nav ul li a, .top-nav ul li a:hover{border-bottom: 0;}
	.top-nav ul li a.featured, .top-nav ul li a.book{background: transparent;}
	section.intro .l-4{border: 0;}
	section.intro .l-8{padding: 0;}
	footer{text-align: center; padding: 50px; border-bottom: 5px solid #275B2A;}
	.footermiddle, .footerright{padding-left: 0px; border-left: 0;}
	body.functions .center .button {margin:8px auto; clear:both; float:none; display:block}
}

@media screen and (max-width: 650px){
	#greenbox1, #greenbox2{width: 90%;}
	body.homepage .location, body.homepage #map{height: 700px;}
	body.homepage #locationbox1, body.homepage #locationbox2{width: 90%; left: 5%; right: 5%; height: auto; padding: 15px;}
	body.homepage #locationbox2{top: 375px;}
	body.enquiries #locationbox1, body.enquiries #locationbox2{display: none;}
}
@media screen and (max-width: 479px){
	body.homepage #map{display: none;}
	#footer-buttons a{max-width:100%; margin:8px}

	body.tastings section div.hours, body.kitchen section div.hours, body.tours section div.hours{
		width: 90%;
		float: none;
		margin: 5%;
	}
}