@charset "UTF-8";
/* CSS Document */
/* General Styles */
html {
	color: #fff;
	background-color: #000;
}
body {
	width: 100%;
	margin: 0 auto;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
h2, h3 {
	color: #d4d193;
	font-size: 2.6em;
	font-weight: 500;
}
button {
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-size: 1.4em;
}
img {
	width: 100%;
	height: auto;
}
footer {
	text-align: center;
	color: #d4d193;
	padding: 0 0 2% 0;
	font-size: 1.2em;
}
.footerLogo {
	max-width: 250px;
	padding: 40px 0 10px 0;
}
a, a:visited {
	color: #d4d193;
	text-decoration: none;
}
.fancyButton {
	background: url("images/ButtonBG.png") center center no-repeat;
	border: none;
	background-size: 100%;
	min-width: 300px;
	min-height: 100px;
	color: #d4d193;
	margin: 1%;
}
.clear {
	clear: both;
}
/* Menu */
.headerIcon, .headerLogo {
	max-width: 10%;
	text-align: center;
	float: left;
	margin: 10px 2%;
}
.centerMenu {
	margin: 0 auto;
	width: 100%;
	max-width: 1280px;
	text-align: center;
}
.mobileLogo {
	display: none;
}
/* Splash Page */
.splashContainer {
	background: url('images/splashPageBG.jpg') no-repeat;
	background-position: center center;
	background-size: contain;
}
.hellContainer {
	background: url('images/hellscape.jpg') no-repeat;
	background-position: center center;
	background-size: contain;
	height: 800px;
}
.logoContainer {
	width: 100%;
	text-align: center;
}
.logo {
	max-width: 1250px;
}
.textContent {
	text-align: center;
	position: relative;
	margin: 50vh auto 0 auto;
}
.buttonContainer {
	position: relative;
	margin: 0 auto;
	text-align: center;
}
/* Home */
.homeTopSection {
	background: url('images/homeTopBackground.jpg') no-repeat;
	background-position: center center;
	height: 1000px;
	background-size: contain;
}
.homeTextBox {
	background: url('images/TextBox.png') no-repeat;
	background-position: center center;
	background-size: contain;
	width: 500px;
	margin: 5% auto;
	padding: 5% 0;
	text-align: left;
}
.boxSpacing {
	padding: 0 15%;
}
.smBookMaze {
	margin: 0 5% -5% -1%;
}
.leftSegment {
	width: 30%;
	float: left;
	margin: 1% 0 0 20%;
}
.rightSegment {
	width: 20%;
	float: left;
	margin: 2% 26% 0 0;
	padding: 2%;
}
.map {
	margin: 0 10%;
}
.homeGallery {
	background: url('images/galleryBG.jpg') no-repeat;
	background-position: top center;
	background-size: contain;
	height: 700px;
	padding: 7% 0;
}
.galleryContainer {
	width: 70%;
	margin: 5% auto;
}
/* About */
.aboutTopSection {
	background: url('images/aboutBG.jpg') no-repeat;
	background-color: #000;
	background-position: center center;
	height: 700px;
	margin: 5% 0;
	background-size: contain;
}
/* Blog */
.blogTopSectionOne {
	background: url('images/blogBG1.jpg') no-repeat;
	background-color: #000;
	background-position: center center;
	height: 700px;
	margin: 5% 0;
	background-size: contain;
}
.blogTopSectionTwo {
	background: url('images/blogBG3.jpg') no-repeat;
	background-color: #000;
	background-position: center center;
	height: 700px;
	margin: 5% 0;
	background-size: contain;
}
.blogTopSectionThree {
	background: url('images/blogBG2.jpg') no-repeat;
	background-color: #000;
	background-position: center center;
	height: 700px;
	margin: 5% 0;
	background-size: contain;
}
/* Discord */
.discordContainer {
	background: url('images/discordBG.jpg') no-repeat;
	background-position: center center;
	background-size: contain;
	height: 800px;
}
/* Events */
.eventImg {
	max-width: 600px;
	padding-bottom: 40px;
}
.eventsContainer {
	background: url('images/eventsBG.jpg') no-repeat;
	background-position: top center;
	background-size: 200%;
	height: auto;
}
/* Gift Certificates */
.giftCertsImg {
	max-width: 600px;
	padding-bottom: 40px;
}
.giftCertsContainer {
	background: url('images/mazeOfBooks.jpg') no-repeat;
	background-position: center center;
	background-size: contain;
	height: 800px;
}
/* Shop */
.shopImg {
	max-width: 600px;
	padding-bottom: 40px;
}
.shopContainer {
	background: url('images/mazeOfBooks2.jpg') no-repeat;
	background-position: center center;
	background-size: contain;
	height: 800px;
}
/* Lightbox Gallery */
.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 23%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow {
	border: 5px solid #000;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


@media only screen and (max-width: 576px) {
.homeTopSection {
                height: auto; /* Adjust as needed */
            }

            .homeGallery {
                height: auto; /* Adjust as needed */
            }

            .galleryContainer {
                width: 100%;
            }

            .leftSegment, .rightSegment {
                width: 90%;
                float: none;
                margin: 0 auto;
				padding: 5%;
            }

            .map {
                display: none;
            }
	.centerMenu {
		width: 98%;
		margin: 0 2%
	}
		.headerIcon {
	max-width: 20%;
	margin: 2% 6% 0 6%;
}
	.headerLogo {
		display: none;
	}
	.mobileLogo {
		display: block;
		max-width: 100%;
		padding: 5% 35%;
		text-align: center;
	}
	.homeTextBox {
		width: 100%;
		background: rgba(0, 0, 0, .5);
	}
	.homeTopSection {
		background-size: 200%;
	}
	.homeGallery {
	background-position: center center;
	background-size: 200%;
	height: auto;
}
	.column {
		width: 20%;
	}
	.aboutTopSection {
	height: auto;
	background-size: 200%;
}
	.eventsContainer {
	background-size: 200%;
	height: auto;
}
	.discordContainer {
	background-size: 200%;
	height: auto;
		padding: 10% 0;
}
	.blogTopSectionOne {
	height: auto;
	background-size: 200%;
}
.blogTopSectionTwo {
	height: auto;
	background-size: 200%;
}
.blogTopSectionThree {
	height: auto;
	background-size: 200%;
}
	.giftCertsContainer {
	background-size: 200%;
	height: auto;
}
		.shopContainer {
	background-size: 200%;
	height: auto;
}
}