@import url('https://fonts.googleapis.com/css?family=Markazi+Text:400,700|Squada+One&display=swap');
@import url('https://fonts.googleapis.com/css?family=Codystar|Markazi+Text');
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0; -webkit-font-smoothing: antialiased;}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

/* Reset CSS */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}
body {line-height: 1;  text-align:center; font-family: 'Markazi Text', serif; color: #fff}
ol, ul {	list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}
table {	border-collapse: collapse;	border-spacing: 0;}

.constrain{width:100%; padding:0 20px; margin:0 auto; max-width:1155px;}
h1#logo{margin:0; padding:19px 0 0 100px; float:left; display:table-cell; vertical-align:bottom; background:none;}
h1#logo img{vertical-align:bottom; border:none;}
#head {position:fixed; top:0; left:0; width:100%; height:60px; padding:0; margin:0; background:#fff; z-index:99; font-weight:700; -webkit-box-shadow: 0 3px 15px 0 #222; box-shadow: 0 3px 15px 0 #222;}
ul.work{display:inline-block; padding:10px 0 0; margin:0 auto; position:relative; width:1050px}
ul.work li{display:inline-block; margin:-33px 10px 0;}
ul.work li.first{border-left:none;}
ul.work li a{color:#fff; position: relative;display: inline-block; font-size:22px;text-decoration: none;font-weight: 300;zoom: 1; text-transform:uppercase;}
ul.work li a:hover{}
ul.work.clear{margin-top:-20px; margin-left:40px;}
ul.work li.clear, #head ul li.clear a:hover, #head ul li.clear a{float:none; display:block; padding:0; margin:0; border:none;}


ul.work2{display:inline-block; padding:10px 0 0; margin:0 auto; position:relative; width:1050px}
ul.work2 li{display:inline-block; margin:-33px 10px 0;}
ul.work2 li.first{border-left:none;}
ul.work2 li a{color:#fff; position: relative;display: inline-block; font-size:22px;text-decoration: none;font-weight: 300;zoom: 1; text-transform:uppercase;}
ul.work2 li a:hover{}
ul.work2.clear{margin-top:-20px; margin-left:40px;}
ul.work2 li.clear, #head ul li.clear a:hover, #head ul li.clear a{float:none; display:block; padding:0; margin:0; border:none;}
.heightauto {height:auto}
.heightauto img {margin: 0!important; }
.container .heightauto #nav #clearboth a img {height:auto!important; padding-bottom: 24px; }

a.homelink {display:inline-block; margin:20px ; padding: 10px 20px; background:#fff; color:#39c6f4; text-decoration:none; font-size:20px; border:3px solid #39c6f4; 
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}

h1, h2, h3, h4, h5 {font-family: 'Squada One', cursive;}

h1 {font-size: 40px; margin: 0 0 20px 0; font-weight: normal; text-align: center;	letter-spacing: 1px; 	background: url(../images/line.png) top center no-repeat; padding-top: 10px; }
h1 span {font-size: 20px; text-transform:none; letter-spacing:0; line-height: 23px; text-align:center; font-style:italic;}

h2 { font-weight: normal;   text-transform: uppercase;  font-size: 36px;    letter-spacing: 1px;    margin: 0 0 23px 0; color:#39c6f4;   text-shadow:
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
	 -webkit-text-stroke: 1px white;}
p {font-size: 16px; line-height: 23px; margin: 0 0 23px 0}
p strong{font-weight:700;}
p a{color:inherit;}

.trusted {display:block; text-align:center; margin:auto; max-width:150px}
	
.3cols{-moz-column-count: 3;
-moz-column-gap: 15px;
-webkit-column-count: 3;
-webkit-column-gap: 15px;
column-count: 3;
column-gap: 15px;}
.4cols{-moz-column-count: 4;
-moz-column-gap: 15px;
-webkit-column-count: 4;
-webkit-column-gap: 15px;
column-count: 4;
column-gap: 15px;}
.5cols{-moz-column-count: 5;
-moz-column-gap: 15px;
-webkit-column-count: 5;
-webkit-column-gap: 15px;
column-count: 5;
column-gap: 15px;}

.bg-top {background: url(../images/1.jpg) no-repeat center center fixed;    -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
.bg-top2 {background: url(../images/restaurant.jpg) no-repeat center center fixed;    -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
.bg-top2 img {max-width: 220px; height:auto}

.bg-top3 {background: url(../images/restaurant8.jpg) no-repeat center center fixed!important;    -webkit-background-size: cover!important;  -moz-background-size: cover;  -o-background-size: cover!important;  background-size: cover!important; z-index:2}
.bg-top3 img {max-width: 220px; height:auto}
		
		
.northampton {background: url(../images/places/northampton.jpg) no-repeat center center fixed!important;    -webkit-background-size: cover!important;  -moz-background-size: cover;  -o-background-size: cover!important;  background-size: cover!important; z-index:2}
.northampton img {max-width: 220px; height:auto}

.bolton {background: url(../images/places/bolton.jpg) no-repeat center center fixed!important;    -webkit-background-size: cover!important;  -moz-background-size: cover;  -o-background-size: cover!important;  background-size: cover!important; z-index:2}
.bolton img {max-width: 220px; height:auto}
		
		select {

  /* styling */
  background-color: white;
  border: thin solid blue;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;

  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}


/* arrows */

select.classic {
  background-image:
    linear-gradient(45deg, transparent 50%, blue 50%),
    linear-gradient(135deg, blue 50%, transparent 50%),
    linear-gradient(to right, skyblue, skyblue);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}

select.classic:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    linear-gradient(to right, gray, gray);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
  border-color: grey;
  outline: 0;
}


/* Dropdown Button */
.dropbtn {  background-color: #4CAF50;  color: white;  padding: 16px;  font-size: 16px;  border: none;  cursor: pointer; width:300px}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

/* The search field */
#myInput {  border-box: box-sizing;  background-image: url('../images/searchicon.png');  background-position: 14px 12px;  background-repeat: no-repeat;  font-size: 16px;  padding: 14px 20px 12px 45px;  border: none;  border-bottom: 1px solid #ddd;}

/* The search field when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}

/* The container <div> - needed to position the dropdown content */
.dropdown { position: relative;  display: inline-block; margin-bottom:50px}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {  display: none;  position: absolute;  background-color: #f6f6f6;  min-width: 300px;  border: 1px solid #ddd;  z-index: 1;}

/* Links inside the dropdown */
.dropdown-content a { color: black;  padding: 12px 16px;  text-decoration: none;  display: block;}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

select:-moz-focusring {  color: transparent;  text-shadow: 0 0 0 #000;}

.content {margin-top: 150px; margin:auto; max-width:1000px}
 
#home{height:auto; margin:0 auto 0; position:relative; text-align:center; clear:both; display:table-cell; vertical-align:middle;}
#home2 {height:auto; margin:0 auto 0; text-align:center; clear:both; }

nav{position:fixed; top:0; left:50%; -ms-transform: translate(-50%,0px); /* IE 9 */ -webkit-transform: translate(-50%,0px); /* Chrome, Safari, Opera */
transform: translate(-50%,0px); background:#fff; z-index:9999; height:50px; width:100.01%; background: #a90329; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #a90329 0%, #8f0222 44%, #780003 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#780003)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #a90329 0%,#8f0222 44%,#780003 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #a90329 0%,#8f0222 44%,#780003 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #a90329 0%,#8f0222 44%,#780003 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #a90329 0%,#8f0222 44%,#780003 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#780003',GradientType=1 );}
#home img.logo{margin:none; padding:none; width:95%; max-width:330px; height:auto;}

#home img.social{margin:-10px 10px 5px}
.container {padding-top: 50px}
.container2 {padding-top: 0}

.buttons{margin:0 3%; width:12%; height:auto;}
.container nav #nav img {height:35px; margin-right:30px}



#about { width: 90%; max-width:900px; margin:0 auto; padding:50px; top:50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); background:rgba(245, 7, 30, 0.75); position: relative; border-radius:30px; }
#about:before { content:""; position: absolute; right: 100%; top: 60%; width: 0; height: 0; border-top: 25px solid transparent; border-right: 50px solid rgba(245, 7, 30, 0.75); border-bottom: 25px solid transparent;}

#about p{}

#contact {width:100%; position:relative; background:#FFF; padding:50px 0; -webkit-box-shadow: 0 -3px 15px 0 rgba(0,0,0,0.5), 0 3px 15px 0 rgba(0,0,0,0.5);
	box-shadow: 0 -3px 15px 0 rgba(0,0,0,0.5), 0 3px 15px 0 rgba(0,0,0,0.5); }
#concon{width:800px; margin:0 auto;}
.conleft{float:left; width:35%; text-align:left;}
.conright{float:right; width:60%; text-align:left;}

#menu {width:100%; max-width:1250px; padding: 20px; background:rgba(152, 0, 14, 0.5); width:calc(96% - 40px); border-radius: 40px; margin: auto}

#gallery {width:80%; max-width:900px; border-radius:240px 10px; position:relative; background:rgba(127,4,16,0.6); padding:50px 10px; margin:0 auto; overflow:hidden}
#gallery p, #gallery h1, #about p, #about h1{text-shadow:0 1px 2px #000; color:#eee!important}
#gbox{width:100%; padding:0px 10px 0; margin:0 auto; height:auto; text-align:center; overflow:hidden;}
#gbox img{border:1px solid #444; margin:5px; width:150px; height:150px;}
#gbox img:hover{border:1px solid #C00;}
#gleft{float:left; width:45%; margin:0; padding:0;}
#gright{float:right; width:45%; margin:0; padding:0;}

#menu-nav{width: 100%;box-shadow: #ccc 5px 1px 3px;margin: 0;padding: 0;height: 45px;position: relative;clear: both;}
ul#menunav{width:970px; padding:0; margin:0 auto;}
ul#menunav li{margin: 0;padding: 0;float: none;}
ul#menunav li a{font-weight: 700; border-left: 1px solid #ccc; padding: 15px 32px; float: left; width: auto; text-transform:uppercase; color:#333;text-decoration:none;}
ul#menunav li a:hover{color:#ccc;}
.menu-box{width:100%; padding:15px 10px 0; margin:0 auto; height:auto; display:inline-block}
.menu-left{float:left; margin:0; padding:0; width: calc(50% - 50px);}
.menu-right{float:right; width:45%; margin:0; padding:0;width: calc(50% - 50px);}

#menu h2 {margin:30px!Important; padding:0; border-bottom: 2px solid #fca8b0; padding: 10px; text-transform:capitalize; margin: 0 10px}

#menu h2 span{font-size:0.65em; text-decoration:none!important;}
#menu p span.price{float:right; font-weight:700;}
#menu p span.price:before{content:'\00A3'}


	
#footer{width:100%; background:#000; padding:60px 10px; color:white; clear:both;}
#footer2{width:90%; margin:0 auto; max-width:1155px;}
#footer h1{text-transform:capitalize; text-align:center; font-size:30px; color:#fff; letter-spacing:0px; margin:0 auto 25px;}
#footer span{float:right; padding-top:4px;}
#footer span img{margin-left:5px;}
#footer p{width:100%; border-top:1px solid #fff;}

.menucentre {text-align:center}
.menucentreprice {width:12.5%; float:left}

.tav {width: 155px; float:none}
.third {width: 33.33%; float:left}

#ulvenues p{ text-align:center;display: inline-block; background:#e81854; margin:0 10px; padding: 10px; font-size: 22px}

.videoWrapper {margin:20px auto; overflow:hidden}
.videoWrapper iframe {border: 1px solid #39c6f4!important}

ul#regionnav {margin-top:20px}
ul#regionnav li {display:inline-block; background:#e81854; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom:10px}
ul#regionnav li a {color:#fff; text-decoration:none}


.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
	margin-bottom:1px
}

.active, .accordion:hover {
    background-color: #ccc;
}

.panel {padding: 0 18px; background-color: white;  max-height: 0;  overflow: hidden;  transition: max-height 0.2s ease-out;}
.panel p {color:#000}

.homep {margin-top: 40px; padding: 10px 0}
.homep img {max-width: 180px}

#footertop img {border-radius:50%}

.info {background:#a00327; margin:8px; display:inline-block; padding:1px}
.info p {margin:5px 0 10px; line-height:1em; font-size:15px}


@media screen and (max-width: 720px) {
	.book-item{float:none; margin:0; clear:both;}
	.bookrow{padding:0; margin:0; background:none; border:none;}
	#bookbox{background:none;}
	.conright{clear:both; float:none; width:40%;}
	.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;}
.content {margin-top: 50px}
.dropdown {margin-bottom:20px}
.nomob {display:none}
}

        
        @media screen and (min-width: 768px){
            .rwd-break { display: none; }
        }
        



@media screen and (max-width:800px) {	
	#about p{-moz-column-count: 2;-moz-column-gap: 15px;-webkit-column-count: 2;-webkit-column-gap: 15px;column-count: 2;column-gap: 15px;}
	#about{width:100%; border-radius:0; position:relative; transform:none; top:inherit; margin:0; padding:50px 10px; -ms-transform: none!important; -webkit-transform: none!important; transform:none!important;}
	#gallery{width:100%; border-radius:0;}
	#home{transform:none; vertical-align:inherit; display:block;}
	#home img.logo{margin-top:35px!important}
	#about:before{display:none;}
	#gallery:before{display:none;}
	#fbsection2, #fbsection3, #fbsection4{padding:50px 0!important; height:auto;}
	#fbsection1{height:auto; padding:10px;}
	#home center img{bottom:auto!important;}
	#gbox{padding:0;}
	#gbox img{width:84px; height:auto;}
	#book{border:none; padding:5px 0; border-radius:0 0 0 0;}
	#footer img{display:none;}}
	
	@media screen and (max-width:900px) {
	.buttons{margin:0 3%; width:30%; height:auto;}
	#fbsection6a img {float:left; width: 48%; margin-right:1%}
	#ulvenues p {display:block; margin-bottom:10px}
	
	}
@media screen and (max-width:600px) {	
	#about p{-moz-column-count: 1;-moz-column-gap: 15px;-webkit-column-count: 1;-webkit-column-gap: 15px;column-count: 1;column-gap: 15px;}
	#home{height: auto; margin: 0 auto 0; position: relative; padding: 0; text-align: center; padding-top: 20px; clear: both; vertical-align: middle; }
	.tape-top{display:none;}
#menu {width:calc(96% - 10px)}
	.homep {margin-top:0}
	}
	
	.slicknav_menu {
	display:none;}
	
	
.menu-left {width:100%}
.menu-right {width:100%}
	
}
@media screen and (max-width:500px) {	
#home img.logo{margin-top:-20%;}}
@media screen and (max-width:400px) {	
#home img.logo{margin-top:-40%;}}

@media screen and (max-width: 1020px) {
	.js #nav {
		display:none;
	}
	
	.js .slicknav_menu {
		display:block;
		z-index:999999999999999
	}
	
	.xmas{padding:100px 0 50px!important}
}