/* starters */
@import url('https://fonts.googleapis.com/css?family=Faustina:400|Oswald:500,700|Bungee');

body {
	font-family: 'Faustina', serif;
	font-weight: 400;
	margin: 0;
	text-decoration: none;
	color: #F8F5F5;
	height: 100%;
}

a, a:link, a:visited	{
	text-decoration: none;
	color: #F8F5F5;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	cursor: pointer;
	font-weight: 500;
	letter-spacing: 4px;
}

a:hover {
	color: #ccc;
}

img {
	max-width: 100%;
}

iframe {
	margin:auto;
}

ul {

}

hr {
		margin-top:15px;
		margin-bottom:15px;
		height: 1px;
		background-color: #F8F5F5;
		color: #F8F5F5;
		border: 0;
}

h1, h2, h3, h4, h5 {
	font-family: 'Oswald',sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 2px;
}

h1 { font-size: 2.2em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.8em; }


p {
	font-size:0.9em;
	line-height:1.7em;
}

.box-contents p > a {
	font-family: 'Faustina', serif;
	letter-spacing: 0;
	text-transform: none;
}

.hamburger_menu {
	display: none;
	position: fixed;
	cursor:pointer;
	top:0;
	left:0;
	padding:3vw;
	width: 13vw;
	height: 12vw;
	border-radius: 0px 0px 10px 0px;
	z-index: 999;
	text-align: left;
	background-color: rgba(163,2,17, 0.8)
}

.close-button {
	display: none;
	position:absolute;
	right:0;
	top:0;
	padding: 12px 30px;
	height: 55px;
	cursor: pointer;
}


#navcontainer ul {
	list-style: none;
}

* {
	box-sizing: border-box;
}

/* Menu */

#navcontainer {
	position:fixed;
	z-index:200;
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	background-color: rgba(34,33,14, 0.5);
}

#topnav {
	padding: 0;
	max-width: 80%;
	margin: auto;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

#topnav li {
	-webkit-flex-grow: 1;
	flex-grow: 1;
	text-align: center;
	height: 100%;
}

#topnav li a {
  padding: 10px;
	display: block;
	color: #C9C6C6;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.3em;
}

#topnav li a:hover {
	color: #39C1C7;
}

#topnav li a.current {
	font-weight: 900;
}

/* submenus */

#topnav li > ul {
	display:none;
	position:absolute;
	background-color: rgba(34,33,14, 0.8);
	margin:0;
	padding:0;
}

#topnav li:hover > ul {
	display:block;
}


#topnav li > ul > li > a {
	padding: 10px 20px;
}

#topnav li > ul > li:last-child > a {
	padding-bottom: 20px;
}

.social-li {
	margin-left: 30px;
}

.social-icon {
	max-height: 25px;
}


/*home header */
.rotating-item {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:inherit;
	background-size: cover;
	background-repeat: no-repeat;
	z-index:10;
}

.mobile-logo,
.mobile-header-content {
	display:none;
}

.header-container{
	position: relative;
	width:100%;
	height:100%;
	/*	min-height:100vh; */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding-top:50px;
	padding-bottom: 5vw;
}

.header-content {
	position: relative;
	z-index:100;
	width: 37%;

	background-image:
	    linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0)), /* gradient 1 as solid color */
	    linear-gradient(to right, rgba(10, 22, 56, 0.82), rgba(10, 22, 56, 0.82)), /* gradient 2 as solid color */
	    linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0)) /* gradient 3 as solid color */
	;
	background-repeat: no-repeat;
	background-position: left 0, center 0, right 0;
	background-size: 13.5% 100%, 73% 100%, 13.5% 100%;
}

.header-body,
#navcontainer {
		color:#C6C2C2;
}


.header-body {
	text-align: center;
	padding:5% 11%;
	width: 72%;
	margin:0 auto;
}
.header-body::first-letter {
	font-family: 'Bungee', sans-serif;
	font-weight: 700;
	font-size:1.4em;
	font-style:normal;
}

.header-body p:first-child {
	font-style:italic;
}


.header_logo {
	width: 100%;
	height: auto;
	margin-top: 38px;
}
.body_logo {
		display: block;
	  margin: 2vw auto;
		max-width:3em;
}

/* booking sidebar */
.booking {
	display: block;
	position: fixed;
	right: 0px;
	top: 45%;
	z-index: 999;
	background-color: rgba(163,2,17, 0.8);
	border-top-left-radius: 4em;
	border-bottom-left-radius: 4em;
}

.book-now {
	margin-top:48px;
	margin-bottom:48px;
	margin-right:30px;
	margin-left: 14px;
	font-size: 1.3em;
	-webkit-text-orientation: mixed;
	text-orientation: mixed;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	display: block;
}
.booking a.book-now {
	color: #FEEDE0;
	letter-spacing: 0.3em;
}

a.book-now:hover {
	color: #39C1C7;
}

/* Hide booking sidebar on food/drinks pages as it covers the prices */
body.menu .booking,
body.drinks .booking {
	display: none;
}



/* home page boxes */
.box-container {
	display: -webkit-flex;
	display: flex;
}

.box-container	{
}
.box_title {
	margin-bottom: 0px;
}

.box-contents h4 {
	font-family: 'Faustina', serif;
	font-weight: 400;
	letter-spacing: 5px;
	margin-top: -6px;
}

.box_body {
	margin-top:0px;
}

.box-container:nth-child(2n) {
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.box-contents {
	text-align: center;
	padding: 6.4vw;
	-webkit-flex: 0 0 32%; /* no flex-growing or shrinking, 32% width */
	flex: 0 0 32%; /* no flex-growing or shrinking, 32% width */
}

.box-map {
	margin-top: 10%;
	margin-left: 11%;
	height: 100%;
}
.box-map iframe {
	height: 40%;
	width: 31%;
}

.box-featured-image {
	background-size: cover;
	background-repeat: no-repeat;
	-webkit-flex: 0 0 68%; /* no flex-growing or shrinking */
	flex: 0 0 68%; /* no flex-growing or shrinking */
}

a.menulinks {
	display:inline-block;
	margin-bottom: 1.2em;
}


/* home page Gallery */

.gallery-box {
	background-color:#01081B;
	text-align: center;
	padding: 6.4vw;
}

.gallery-container {
	margin-top:2vw;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.gallery-images {
	flex: 0 0 auto;
	margin-bottom:3vw;
}


/* Eveve Bookings iframe */
iframe#eveve{
 max-width:500px;
 width:100%;
 min-height:600px;
}


@media screen and (max-width: 1180px) {
  h2 { font-size: 2.0em; }
	.box-contents { padding:4.4vw; }
}

@media screen and (max-width: 980px) {
  h2 { font-size: 1.9em; }
}

/* Menu page */
.menu-container {
	background-image: url('/site/templates/images/menus_page.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.menu-container h2, .menu-container h3, .menu-container p {
	margin: 0;
}
.cat-container {
		background-color: rgba(210, 3, 21, 0.82); /* #D20315 red */
		padding: 6.4vw 3.4vw;
		margin:0 auto;
		width:55%;
}
.cat-container > h2 {
	margin:0;
}
.prod-container {
	margin: 20px 0;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

.prod-container .title-wrapper {
	max-width:90%;
}

.prod-container .title {
	display: inline;
	font-weight: bold;
	font-size: 1.15em;
	line-height: 1.15em;
	text-transform: uppercase;
}

.prod-container .note {
	font-weight: bold;
  font-style: italic;
	vertical-align: top;
	margin-left:3px;
}
.prod-container .price {
	display: inline;
	text-align: right;
}
.prod-container .des {
	display: block;
	font-style: italic;
	width:100%;
	padding-left: 15px;
	padding-right: 40px;
	padding-bottom: 10px;
}
.drink-prod-container .des p {
	font-style: italic;
	font-size: 0.9em;
	margin-left:30px;
	max-width:80%;
}
.cat-container-inner h2 {
	margin-top: 20px;
}

.var-container {
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.var-container .title {
	display: inline;
	font-size: 0.9em;
  line-height: 1.5em;
	text-transform: none;
	font-weight: normal;
	padding-right:10px;
}

.var-container .price {
	display: inline;
	text-align: right;
  line-height: 1.5em;
}
/* Drink page */
.drinks-cat-container {
	background-color: rgba(210, 3, 21, 0.82); /* #D20315 red */
	padding: 6.4vw 3.4vw;
	margin:0 auto;
	width:55%;
}

.type-title, .drink-size {
	font-weight: bold;
}
.wrapped1 {
	line-height:1.5em;
	margin-left:15px;
}
.wrapped1.type-title {
	font-size:1.3em;
	margin-left:0px;
}
.the-wrapper {
	display: -webkit-flex;
	display: flex;
}
.the-wrapper .wrapped1 {
	width: 80%;
}
.the-wrapper .wrapped2 {
	width: 20%;
	text-align:right;
	margin-right:10px;
}

/* Mobile Styles at 1100px wide */
@media screen and (max-device-width:1100px), 
screen and (max-width:1100px) {

	#topnav {	max-width: 95%; }

	#topnav li a {
	  padding: 6px;
		letter-spacing: 0.2em;
	}
	.header-container {
		padding-top: 42px;
	}

	.social-li { margin-left: 15px; }

}



/* Mobile Styles at 900px wide */
@media screen and (max-device-width:900px),
screen and (max-width:900px) {

	/* header box widens and comes into the middle */
	.header-content {
		width: 90%;
		margin:auto;
	}

	/* space at top for menu no longer needed, height needed */
	.header-container {
		padding-top:0;
	}

	/* nav goes to mobile view */
	.hamburger_menu {
		display: block;
		padding:2vw;
		width: 9vw;
		height: 8vw;
	}

	#navcontainer {
		display:none;
		background-color:
		rgba(163,2,17, 0.8);
		padding:0vw;
		max-height: 100vh;
		overflow-y: auto;
	}
	#topnav {
		-webkit-flex-flow: column;
		flex-flow: column;
		max-width: 100%;
	}
	#topnav li { text-align:left; border-bottom: 1px white solid; }
	#topnav li:last-child { border-bottom: 0px white solid; }
	#topnav li a { font-size: 1.1em; padding:10px 20px; color:white; }
	.close-button {
		display: block;
	}

	.social-li {
		margin-left: 0;
	}

		/* submenus */
		#topnav li > ul {
			display: block;
			position: relative;
			background-color: transparent;
		}

		#topnav li > ul > li {
				padding-left: 40px;
				border: none;
		}

		#topnav li > ul > li > a {
				padding: 5px 20px 6px 20px;
		}


	/* home content widens to match header (73% of 90% = 65.7%) */
	.cat-container,
	.drinks-cat-container {
		width: 65.7%;
	}

}/* end of 900px styles */


@media screen and (max-device-width:768px),
screen and (max-width:768px) {

	/* hamburger icon is larger mobile view */
	.hamburger_menu {
		display: block;
		padding:3vw;
		width: 13vw;
		height: 12vw;
	}

	.header-container {
		height:66vw;
	 	padding-bottom: 0;
	}

	.header-content {
		display:none;
	}

	.header_logo {
    margin-top: 0;
	}

	.mobile-logo,
	.mobile-header-content {
		display:block;
		background-color: #1C2138;
		padding: 6.4vw;
		width: 100%;
	}

	.header-body {
		padding: 6.4vw 10vw;
	}

	/* booking button shrinks and gets closer to top */
	.booking {
		top:20%;
	}
	.book-now {
		margin-top:40px;
		margin-bottom:40px;
	}
	.booking a.book-now {
		font-size:1em;
	}

	/* homepage sections stop flexing and go to 100% width */
	/* do we need to adjust the height of the image boxes? */
	.box-container { display: block; }

	/* menu content widens to 100% */
	.cat-container,
	.drinks-cat-container {
		width:100%;
	}
	
	/* menu item titles need room for price alongside */
	.prod-container .title-wrapper {
		max-width:85%;
	}

	/* menu item options go to one column */
	.var-container {
		width:100%;
	}
	.box-map {
		margin:0;
		height: 70vw;
	}
	.box-map iframe {
		width: 100%;
		height: 100%;
	}
} /* end of 768px styles */