@font-face {
    font-family: 'gentium_basic_bold_italic';
    src: url('resources/genbasbi-webfont.woff2') format('woff2'),
         url('resources/genbasbi-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
	background: url('graphics/background-sweetshop-interior.jpg') center center no-repeat;
	background-size: cover;
  background-attachment: fixed;
	font-size: 17px;
	color: #555;
}

body {
	background-image: url('graphics/background-sweetshop-exterior-450h.jpg');
}

@media screen and (min-width: 780px) and (min-height: 450px) {body {
	background-image: url('graphics/background-sweetshop-exterior-600h.jpg');
}}
	
@media screen and (min-width: 1040px) and (min-height: 600px) {body {
	background-image: url('graphics/background-sweetshop-exterior.jpg');
}}
	

body.sweets {
	background-image: url('graphics/background-sweetshop-interior-500h.jpg');
}
		
@media screen and (min-width: 752px) and (min-height: 500px) {body.sweets {
	background-image: url('graphics/background-sweetshop-interior-638h.jpg');
}}
	
@media screen and (min-width: 960px) and (min-height: 638px) {body.sweets {
	background-image: url('graphics/background-sweetshop-interior-800h.jpg');
}}
	
@media screen and (min-width: 1204px) and (min-height: 800px) {body.sweets {
	background-image: url('graphics/background-sweetshop-interior.jpg');
}}

body.snacks {
	background-image: url('graphics/background-pub-interior-600h.jpg');
}
		
@media screen and (min-width: 669px) and (min-height: 600px) {body.snacks {
	background-image: url('graphics/background-pub-interior-960h.jpg');
}}
	
@media screen and (min-width: 1071px) and (min-height: 960px) {body.snacks {
	background-image: url('graphics/background-pub-interior.jpg');
}}
	
.container {
	width: 100%;
	margin: 30px auto 30px;
	padding-bottom: 0px;
}

@media screen and (min-width: 400px) {.container {
	width: 90%;
}}

.container > .top-graphic {
	background: url('graphics/logo.png'), url('graphics/background-container.png');
	background-position: top center, bottom center;
	background-repeat: no-repeat, no-repeat;
	background-size: contain, contain;
	background-color: rgba(255, 255, 255, 0.9);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.sidebar {
	display: inline-block;
	vertical-align: top;
	width: 20%;
	margin-left: 0vw;
	margin-top: 40vw;
	text-align: center;
}

.sidebar img {
	width: 70%;
	margin-top: 5px;
	opacity: .9;
	filter: alpha(opacity=90);
	border: 1px solid #fff;
	box-shadow: 1px 1px 2px #666;
}

.main {
	display: inline-block;
	vertical-align: top;
	width: 75%;
}

header {
	padding-top: 12.5vw;
	text-align: right;
}

.fb-wrapper {
	min-height: 25px;
	margin: -45px 0px  20px;
}

@media screen and (max-width: 600px) {.fb-wrapper {
		display: none;
	}
}



header .networks a {
	display: inline-block;
	width: 7.5vw;
	height: 7.5vw;
	margin-left: 2vw;
	border: 1px solid #fff;
}

header .networks a.facebook {
	background: url('graphics/facebook.png') center center no-repeat;
	background-size: cover;
}

header .networks a.twitter {
	background: url('graphics/twitter.png') center center no-repeat;
	background-size: cover;
}

header .networks a:hover {
	box-shadow: 0px 0px 1px 1px #999;
}


header .navbar {
	margin: 25px 0px 0px 0px;
}



@media screen and (max-width: 600px) {

	.container > div:first-child {
		padding-bottom: 20%;
	}
	.sidebar {
		display: none;
	}
	.main {
		width: 100%;
	}
	header {
		margin-left: 20%;
		margin-right: 5%;
	}
	
	
}

@media screen and (max-width: 470px) {

	.container > div:first-child {
		background-image:  url('graphics/heading-470.png'), url('graphics/background-container.png');
		background-position: 15px 2vw, bottom center;
		background-repeat: no-repeat, no-repeat;
		background-size: 60%, contain;
		background-color: rgba(255, 255, 255, 0.9);
	}
	header {
		margin: 0px 15px;
		padding-top: 2vw;
		text-align: right;
	}
	header .networks a {
		width: 10vw;
		height: 10vw;
		margin-left: 1vw;
	}
	header .navbar {
		margin: 1vw 0px 0px 0px;
	}
}

@media screen and (max-width: 380px) {

	.container > div:first-child {
		/* background:  url('graphics/heading-400.png') 15px 2vw no-repeat;
		background-repeat: no-repeat;
		background-size: contain;
		background-size: 98%;
		background-color: rgba(255, 255, 255, 0.9); */
		background-image:  url('graphics/heading-400.png'), url('graphics/background-container.png');
		background-position: 15px 2vw, bottom center;
		background-repeat: no-repeat, no-repeat;
		background-size: contain, contain;
	}
	header {
		padding-top: 17vw;
	}
	header .networks a {
		width: 12.5vw;
		height: 12.5vw;
		margin-left: 2vw;
	}
}




/* ==================================== MENU ============================================ */


.navbar-default {
	background-color: #283572;
	border-radius: 0px;
	border: 1px solid #fff;
	box-shadow: 0px 0px 1px 1px #999;	
}

.navbar-default > * {
	padding: 0px;
}

.navbar-default > * > * {
	padding: 0px;
}

.navbar-nav {
	width: 100%;
}

.nav > li {
	display: inline-block;
	/* width: 12%; */
	margin-left: 1px;
	padding: 0px;
	text-align: center;
}

.nav > li > a {
	display: inline-block;
	/* height: 4vw; */
	/* height: 1em; */
	/* min-height: 0px; */
	padding: 14px 1.8vw;
	font-family: 'gentium_basic_bold_italic';
	font-size: 1.3em;
	letter-spacing: -.5px;
	/* text-shadow: 1px 0px #939ab8;
	letter-spacing: 1px; */
	/* border-bottom: 2px solid #ddd;
	border-radius: 2px; */
	/* background: url('graphics/link-home.jpg') center center no-repeat; */
}

.nav > li:last-child > a {
	padding-bottom: 16px;
}

.nav > li hr {
	margin: 1px -2px 0px;
	height: 1px;
	background-color: #fff;
	border: 1px solid #939ab8;
	border-radius: 3px;
}

.nav > li img {
	height: 1em;
	margin-right: 5px;
	vertical-align: top;
}

@media screen and (min-width: 768px) {.navbar-nav > li:last-child {
	float: right;
	border-left: 1px solid #fff;
}}

@media screen and (max-width: 1000px) {.nav > li > a {
	font-size: 1.25em;
	letter-spacing: 0px;
}}

@media screen and (max-width: 900px) {.nav > li > a {
	font-size: 1.1em;
	letter-spacing: 0px;
}}

@media screen and (max-width: 900px) {.nav > li hr {
	margin: -2px -1px 0px;
	height: 1px;
	background-color: #fff;
	border: 0px solid #939ab8;
	border-radius: 3px;
}}

.navbar-default .navbar-nav > li > a {
	color: #fff;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
	color: #fff;
}

.navbar-default .navbar-nav > li:hover, .navbar-default .navbar-nav > li > a:focus {
	background-color: #3d487f;
}

.navbar-default .navbar-nav > li.active > a:hover, .navbar-default .navbar-nav > li.active > a:focus {
	background-color: #3d487f;
	color: #fff;
	
}

.navbar-default .navbar-nav > .active {
	background-color: #3d487f;
}

.navbar-default .navbar-nav > .active a {
	background-color: transparent;
	color: #fff;
}

.navbar {
	min-height: 0px;
}

.nav li a {
	background-size: 70%;
}



	/* 
.nav > .home {width: 12%; min-width: .74px; max-width: 80px;}
.nav > .home a {background-image: url('graphics/link-home.jpg');}
.nav > .active.home a, .nav > .home a:hover, .nav > .home a:focus {background-image: url('graphics/active-home.jpg');}

.nav > .sweets {width: 14%; min-width: .86px; max-width: 92px;}
.nav > .sweets a {background-image: url('graphics/link-sweets.jpg');}
.nav > .active.sweets a, .nav > .sweets a:hover, .nav > .sweets a:focus {background-image: url('graphics/active-sweets.jpg');}

.nav > .snacks {width: 14%; min-width: .86px; max-width: 92px;}
.nav > .snacks a {background-image: url('graphics/link-snacks.jpg');}
.nav > .active.snacks a, .nav > .snacks a:hover, .nav > .snacks a:focus {background-image: url('graphics/active-snacks.jpg');}

.nav > .drinks {width: 13%; min-width: .83px; max-width: 86px;}
.nav > .drinks a {background-image: url('graphics/link-drinks.jpg');}
.nav > .active.drinks a, .nav > .drinks a:hover, .nav > .drinks a:focus {background-image: url('graphics/active-drinks.jpg');}

.nav > .outlets {width: 15%; min-width: .89px; max-width: 95px;}
.nav > .outlets a {background-image: url('graphics/link-outlets.jpg');}
.nav > .active.outlets a, .nav > .outlets a:hover, .nav > .outlets a:focus {background-image: url('graphics/active-outlets.jpg');}

.nav > .about {width: 13%; min-width: .78px; max-width: 84px;}
.nav > .about a {background-image: url('graphics/link-about.jpg');}
.nav > .active.about a, .nav > .about a:hover, .nav > .about a:focus {background-image: url('graphics/active-about.jpg');}

.nav > .contact {width: 15%; min-width: .93px; max-width: 99px;}
.nav > .contact a {background-image: url('graphics/link-contact.jpg');}
.nav > .active.contact a, .nav > .contact a:hover, .nav > .contact a:focus {background-image: url('graphics/active-contact.jpg');}

 */


/* ==================================== TOGGLE ============================================ */

.navbar-default .navbar-toggle {
	margin-right: 30px;
	background-color: #535d8e;
	border: 1px solid #a9aec6;
}

.navbar-default .navbar-toggle:focus {
	background-color: #535d8e;
}

.navbar-default .navbar-toggle:hover {
	background-color: #68719c;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: #a9aec6;
}


/* ==================================== DROP DOWN MENU ============================================ */


@media screen and (max-width: 767px) {

	.navbar .navbar-collapse {
		margin: 0px;
		border-top: 0px solid #68719c;
		padding-bottom: 10px;
	}
	
	.navbar .navbar-collapse ul {
		margin: 0px;
	}
	
	.nav > li {
		display: block;
		padding-left: 20px;
		text-align: left;
		border-top: 1px solid #68719c;
	}
	.nav > li:last-child {
		border-bottom: 1px solid #68719c;
	}
	.nav > .home, .nav > .sweets, .nav > .snacks, .nav > .drinks, .nav > .outlets, .nav > .about, .nav > .contact  {
		width: 100%;
		max-width: 100%;
		margin: 0px;
	}
	
	.nav > li > a {
		display: block;
		background-position: 5% 50%;
		background-size: auto;
	}
	.nav > li > a > hr {
		display: none;
	}
}



/* ==================================== CONTENT ============================================ */

main {
	margin: 40px 40px;
}

main h2 {
	margin: 0px 0px 40px;
	text-align: center;
	font-size: 1.5em;
}

@media screen and (max-width: 600px) {
	main {
		margin: 40px 20px;
	}
}

@media screen and (max-width: 450px) {
	main h2 br {
		display: none;
	}
}

@media screen and (min-width: 900px) {
	main h2 br {
		display: none;
	}
}

.error {
	margin-bottom: 30px;
	color: #933;
	font-size: 1.25em;
	text-align: center;
}
	
.btn-primary {
	background-color: #283572;
	border: 1px solid #fff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background-color: #283572;
	border: 1px solid #fff;
	text-decoration: underline;
	box-shadow: 0px 2px 10px #89e;
	outline: 0px;
}


/* ==================================== HOME ============================================ */


	
.top {
	margin: 0px 0px 30px;
	text-align: center;
}
		
.latest-news {
	margin: 20px 0px;
	padding: 0px;
	border-radius: 10px;
	border: 10px solid #283572;
}

.latest-news > div {
	max-height: 250px;
	overflow: auto;
}

.latest-news div div {
	margin: 3px;
	padding: 10px;
	border: 3px solid #283572;
}

.latest-news h3 {
	margin: 0px;
	padding: 5px 0px 15px;
	font-size: 1.2em;
	color: #fff;
	background-color: #283572;
}

.latest-news a {
	display: block;
	padding: 5px 0px 0px;
	text-align: right;
	color: #fff;
	background-color: #283572;
}

.latest-news h4 {
	margin: 0px;
	font-size: 1.1em;
}

.latest-news hr {
	margin: 5px 0px;
	border-top: 1px dotted #999;
}

.latest-news p {
	margin: 0px;
	font-size: .8em;
}

.latest-news div p:last-child {
	margin: 5px 10px;
}

@media screen and (min-width: 1040px) {.latest-news {
		float: right;
		width: 45%;
		margin: 0px 0px 30px 50px;
}}

@media screen and (min-width: 1040px) {.latest-news > div {
		max-height: 430px;
}}

@media screen and (min-width: 1140px) {.latest-news > div {
		max-height: 350px;
}}

@media screen and (max-width: 762px) {.latest-news {
	margin: 20px 5% 20px 5%;
}}
			
@media screen and (max-width: 762px) {.latest-news > div {
				max-height: 250px;
}}
		
		

/* ==================================== FOOTER ============================================ */

.container > .bottom-graphic {
	padding-top: 40%;
	background: url('graphics/background-sweet.png');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
}

footer {
	padding: 30px 0px 20px;
	background-color: #283572;
	color: #ccc;
	text-align: center;
	border-radius: 0px;
	border: 1px solid #fff;
	box-shadow: 0px 0px 1px 1px #283572;
}

footer a {
	margin: 0px 5px;
	color: #ccc;
}

footer a:hover {
	color: #fff;
}

footer h5 {
	margin: 15px 0px;
	font-size: 1.1em;
}

footer p {
	margin: 5px 0px 0px;
	font-size: .75em;
}

footer div span::after {
	content: " | ";
} 

footer div span:last-child::after {
	content: "";
} 

@media screen and (max-width: 480px) {
	footer {
		padding-top: 5px;
	}
	footer div {
		margin-bottom: 30px;
	}
	footer div a {
		display: block;
		padding: 5px 20px;
		text-align: left;
		border-bottom: 1px dotted #888;
		border-right: 1px solid #283572;
		border-left: 1px solid #283572;
	}
	footer div span:first-child a {
		border-top: 1px solid #283572;
	}
	footer div span:first-child a:hover {
		border-top: 1px dotted #888;
	}
	footer div a:hover {
		background-color: #535d8e;
		border-right: 1px dotted #888;
		border-left: 1px dotted #888;
	}
	footer div span::after {
		content: "";
	} 
}