@font-face {
	font-family: Antonio;
	src: url(Antonio.ttf);
}
@font-face {
	font-family: BebasNeue;
	src: url(BebasNeue.ttf);
}
* {
	font-family: BebasNeue;
}

/*________________________________________________________________________________*/
/*-------------------------------- banner styling --------------------------------*/

/*The Object on the page which loads "nav.html"*/
object.banner {
	width: 100vw;
	position: absolute;
	top: 0px;
	transition: height 100ms;
	z-index: 1000;
}
/*The div which contains all of the nav bar content*/
div.bannerContainer { /* container used to color background across the window */
	width: 100%;
	background-image: linear-gradient(to bottom, #EEEEEE 60%, #DDDDDD);
}

/* The div which sets dimensional constraints on the content in the banner */
div.banner {
	display: flex;
	align-items: center;
	transition: height 100ms;
	margin: 0 auto;
}

/* Banner logo */
img.logo {
	width: auto;
	transition: height 100ms;
}

/* Anchor tag for logo */
a.logoLink {
	text-decoration: inherit;
	color: inherit;
	cursor: auto;
}

/* Navigation list items */
li.navList {
	display: table-cell;
	text-align: center;
	font-weight: bold;
	padding-left: 10px;
	padding-right: 10px;
	transition: 100ms;
}
div.rhInfo {
	text-align: right;
	right: 20px;
}
.SMIcon {
    border: 0px;
    padding: 1px;
    transition: 100ms;
}

/* Anchor tag for navigation links */
a.navLink {
	text-decoration: none;
	color: #000000; /* Base Color */
	transition: color 100ms;
}
a.navMenuLink {
	text-decoration: none;
	color: #FFFFFF; /* Base Color */
	transition: color 100ms;
	margin-top: 0px;
	padding-top: 0px;
}
a.navLink:hover {
	color: #DD00CC; /* Mouseover Color */
}
a.navMenuLink:hover {
	color: #DD00CC; /* Base Color */
}


@media screen and (min-width: 1024px){ /* PC View */
	object.banner {
		height: 160px;
		box-shadow: 5px 5px 3px #555555, -5px 5px 3px #555555;
	}
	div.banner {
		height: 160px;
		width: 1024px;
		position: relative;
		overflow: hidden;
	}
	.lhInfo {
		position: absolute;
		left: 5px;
	}
	.rhInfo {
		position: absolute;
		right: 5px;
		font-size: 18px;
	}
	div.navBarContainer {
		position: absolute;
		height: 32px;
		margin-top: -42px;
		width: 100%;
	}
	div.navBar {
		width: fit-content;
		margin: 0px auto;
	}
	img.logo {
		height: 160px;
	}
	ul.navUL {
		display: flex;
		margin: auto;
	}
	li.navList {
		font-size: 28px;
	}
	div.navMenu {
		visibility: hidden;
		display: none;
	}
	.SMIcon {
    height: 30px;
    margin: 2px;
    width: auto;
    }
    .SMIcon:hover {
    height: 32px;
    padding: 0px;
    }

}
@media screen and (min-width: 768px) and (max-width: 1023px){ /* Large View */
	object.banner {
		height: 128px;
		box-shadow: 5px 5px 3px #555555, -5px 5px 3px #555555;

	}
	div.banner {
		height: 128px;
		width: 768px;
		position: relative;
		overflow: hidden;
	}
	.lhInfo {
		position: absolute;
		left: 5px;
	}
	.rhInfo {
		position: absolute;
		right: 5px;
		font-size: 16px;
	}
	div.navBarContainer {
		position: absolute;
		height: 32px;
		margin-top: -32px;
		width: 100%;
	}
	div.navBar {
		width: fit-content;
		margin: 0px auto;
	}
	img.logo {
		height: 122px;
	}
	ul.navUL {
		display: flex;
		margin: auto;
	}
	li.navList {
		font-size: 24px;
	}
	div.navMenu {
		visibility: hidden;
		display: none;
	}
	.SMIcon {
    height: 22px;
    margin: 2px;
    width: auto;
    }
    .SMIcon:hover {
    height: 24px;
    padding: 0px;
    }
}
@media screen and (min-width: 481px) and (max-width: 767px){ /* Medium View */
	object.banner {
		height: 160px;
		box-shadow: 5px 5px 3px #555555, -5px 5px 3px #555555;
	}
	div.banner {
		height: 160px;
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	.lhInfo {
		position: absolute;
		left: 5px;
	}
	.rhInfo {
		position: absolute;
		right: 5px;
		font-size: 16px;
	}
	div.navBarContainer {
		position: absolute;
		height: 32px;
		margin-top: -32px;
		width: 100%;
	}
	div.navBar {
		width: fit-content;
		margin: 0px auto;
	}
	img.logo {
		height: 122px;
	}
	ul.navUL {
		display: flex;
		margin: auto;
	}
	li.navList {
		font-size: 24px;
	}
	div.navMenu {
		visibility: hidden;
		display: none;
	}
	.SMIcon {
    height: 22px;
    margin: 2px;
    width: auto;
    }
    .SMIcon:hover {
    height: 24px;
    padding: 0px;
    }
}
@media screen and (min-width: 240px) and (max-width: 480px){ /*Small View*/
	object.banner {
		height: 120px;
	}
	div.banner {
		height: 120px;
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	.lhInfo {
		position: absolute;
		width: 100%;
	}
	.rhInfo {
		visibility: hidden;
		display: none;
	}
	div.navBarContainer {
		visibility: hidden;
		display: none;
	}
	div.navBar {
		visibility: hidden;
		display: none;
	}
	img.logo {
		height: 120px;
		display: block;
		margin: 0px auto;
	}
	ul.navUL {
		display: flex;
		margin: auto;
	}
	li.navList {
		font-size: 20px;
	}
	div.navMenu {
		width: 100%;
		text-align: center;
		font-size: 28px;
		height: 32px;
		background-image: linear-gradient(to bottom, #3E3E3E, #333333);
		box-shadow: 5px 5px 3px #555555, -5px 5px 3px #555555;
		transition: height 250ms;
		display: block;
	}
	#navLabel {
		display: block;
		height: 36px;
		color: #FFFFFF;
		width: 100%;
		content: url('imgs/MenuW.png');
		object-fit: scale-down;
		object-position: center;
	}
	#navLabel:hover {
		color: #EE33DD;
		content: url('imgs/MenuP.png');
	}
	a.navMenuLink {
		display: inline-block;
		width: 100%;
		border-top: 1px solid #2A2A2A;
		border-bottom: 1px solid #2A2A2A;
	}
	a.navMenuLink:hover {
		background-image: linear-gradient(to bottom right, #444444, #252525);
		border-top: 1px solid #999999;
		border-bottom: 1px solid #888888;
	}
	div.navMenuListContainer {
		visibility: hidden;
		display: none;
	}
	#navToggle:checked ~ div.navMenu div.navMenuListContainer{
		position: absolute;
		height: fit-content;
		width: 100%;
		visibility: visible;
		display: block;
		z-index: 1000;
		box-shadow: 5px 5px 3px #555555, -5px 5px 3px #555555;
		background-color: #2A2A2A;
		margin-top: -6px;
	}
	.SMIcon {
    height: 28px;
    margin: 2px;
    width: auto;
    }
    .SMIcon:hover {
    height: 30px;
    padding: 0px;
    }
}
@media screen and (max-width: 239px){ /* Rediculously Small View */
	object.banner {
		height: 64px;
	}
	div.banner {
		height: 64px;
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	.lhInfo {
		position: absolute;
		width: 100%;
	}
	.rhInfo {
		visibility: hidden;
		display: none;
	}
	div.navBarContainer {
		visibility: hidden;
		display: none;
	}
	div.navBar {
		visibility: hidden;
		display: none;
	}
	img.logo {
		height: 64px;
		display: block;
		margin: 0px auto;
	}
	ul.navUL {
		display: flex;
		margin: auto;
	}
	li.navList {
		font-size: 20px;
	}
	div.navMenu {
		width: 100%;
		text-align: center;
		font-size: 22px;
		height: 32px;
		background-image: linear-gradient(to bottom, #3E3E3E, #333333);
		transition: height 250ms;
		display: block;
	}
	#navLabel {
		display: block;
		height: 36px;
		color: #FFFFFF;
		width: 100%;
		content: url('imgs/menuW.png');
		object-fit: scale-down;
		object-position: center;
	}
	#navLabel:hover {
		color: #EE33DD;
		content: url('imgs/menuP.png');
	}
	a.navMenuLink {
		display: inline-block;
		width: 100%;
		border-top: 1px solid #2A2A2A;
		border-bottom: 1px solid #2A2A2A;
		font-size: 10px;
	}
	a.navMenuLink:hover {
		background-image: linear-gradient(to bottom right, #444444, #252525);
		border-top: 1px solid #999999;
		border-bottom: 1px solid #888888;
	}
	div.navMenuListContainer {
		visibility: hidden;
		display: none;
	}
	#navToggle:checked ~ div.navMenu div.navMenuListContainer{
		position: absolute;
		height: fit-content;
		width: 100%;
		visibility: visible;
		display: block;
		z-index: 1000;
		box-shadow: 5px 5px 3px #555555, -5px 5px 3px #555555;
		background-image: linear-gradient(to bottom, #303030, #252525);
		margin-top: -6px;
	}
	.SMIcon {
    height: 20px;
    margin: 2px;
    width: auto;
    }
    .SMIcon:hover {
    height: 22px;
    padding: 0px;
    }
}
#bannerObjectToggle {
	visibility: hidden;
	display: none;
}
#navToggle { /* Checkbox used to show/hide nav menu */
	visibility: hidden;
	display: none;
}

/*--------------------------------------------------------------------------------*/

/*Body tag*/
html {
	min-height: 100%;
	overflow-x: hidden;
}
body {
	margin: 0px;
	background-image: linear-gradient(to bottom, #FFFFFF, #EEEEEE);
	
}
/*div for page's content. Adds the margins on the sides*/
div.bodyContainer {
	margin: auto;
	background-color: 444444;
	height: 100%
}
p {
	font-family: Calibri;
}

h1, h2 {
	font-weight: normal;
	padding: 0px;
	margin: 0px;
}
#box2 {
	border-spacing: 0px;
	border-collapse: collapse;
}
div.cBox, div.aBox {
	display: block;
	border: 1px solid #555555;
	border-right: 0px;
	border-bottom: 0px;
	border-radius: 8px 8px 0px 0px;
	height: fit-content;
	box-shadow: 5px 5px 5px #999999;
	background-color: #F0F0F0;
}
div.cBoxHeader, div.aBoxHeader, div.bBoxHeader {
	border-radius: 6px 6px 0px 0px;
	background-color: #444444;
	color: #FFFFFF;
}
div.cBoxLeft, div.aBoxLeft {
	padding: 0px;
	background-color: #555555;
	color: #EEEEEE;
}
div.cBoxRight, div.aBoxRight {
	padding: 5px;
	vertical-align: top;
}
div.AboutContainer {
	display: block;
	width: 100%;
	background-color: 444444;
}
#hanna {
	height: auto;
	margin: auto;
}
@media screen and (min-width: 1024px){ /* PC View */
	div.bodyContainer {
		width: 1024px;
	}
	h1 {
		font-size: 32px;
		text-align: center;
	}
	h2 {
		font-size: 26px;
		text-align: center;
	}
	p {
		font-size: 18px;
	}
	#topP {
		margin-left: 80px;
		margin-right: 80px;
	}
	div.cBox {
		height: 365px;
	}
	div.aBox {
		height: 522px;
	}
	div.cBoxLeft {
		display: block;
		width: 60%;
		float: left;
		margin-right: 8px;
	}
	div.aBoxLeft {
		display: block;
		width: 50%;
		float: left;
		margin-right: 8px;
	}
	div.bBlockLeft{
		display: block;
		width: 100%;
	}
	div.cBoxRight {
		
	}
	#eSeries {
		width: 100%;
		height: auto;
	}
	#hanna {
		width: 100%;
		height: auto;
		display: block;
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px){ /* Large View */
	div.bodyContainer {
		width: 768px;
	}
	h1 {
		font-size: 28px;
		text-align: center;
	}
	h2 {
		font-size: 24px;
		text-align: center;
	}
	p {
		font-size: 18px;
	}
	#topP {
		margin-left: 40px;
		margin-right: 40px;
	}
	div.cBox {
		height: 319px;
	}
	div.aBox {
		height: 469px;
	}
	div.cBoxLeft {
		display: block;
		width: 70%;
		float: left;
		margin-right: 6px;
	}
	div.aBoxLeft {
		display: block;
		width: 460px;
		float: left;
		margin-right: 6px;
	}
	#eSeries {
		width: 100%;
		height: auto;
		display: block;
	}
	#hanna {
		width: 100%;
		height: auto;
		display: block;
	}
}
@media screen and (min-width: 481px) and (max-width: 767px){ /* Medium View */
	div.bodyContainer {
		width: 98%;
	}
	h1 {
		font-size: 24px;
		text-align: center;
	}
	h2 {
		font-size: 20px;
		text-align: center;
	}
	p {
		font-size: 16px;
	}
	#topP {
		margin-left: 40px;
		margin-right: 40px;
	}
	div.cBoxLeft {
		display: block;
		width: 100%;
	}
	#eSeries {
		width: 100%;
		height: 100px;
		display: box;
		object-fit: none;
		object-position: center;
		content: url('imgs/E-SeriesCrop.jpg');
	}
	#hanna {
		width: 100%;
		height: 400px;
		display: box;
		object-fit: cover;
		object-position: top;
		content: url('imgs/hannaSmall.jpg');
	}
	#eSub {
		visibility: hidden;
		display: none;
	}
}
@media screen and (min-width: 240px) and (max-width: 480px){ /*Small View*/
	div.bodyContainer {
		width: 100%;
	}
	div.cBox {
		border-radius: 0px;
		border-left: 0px;
		border-right: 0px;
	}
	div.cBoxHeader {
		border-radius: 0px;
	}
	h1 {
		font-size: 20px;
		text-align: center;
	}
	h2 {
		font-size: 18px;
		text-align: center;
	}
	p {
		font-size: 16px;
	}
	#topP {
	margin-left: 10px;
	margin-right: 10px;
	}
	#eSeries {
		width: 100%;
		height: 100px;
		display: box;
		object-fit: none;
		object-position: center;
		content: url('imgs/E-SeriesCrop.jpg');
	}
	#hanna {
		width: 100%;
		height: 400px;
		display: box;
		object-fit: cover;
		object-position: left;
		content: url('imgs/hannaSmall.jpg');
	}
	#eSub {
		visibility: hidden;
		display: none;
	}
}
@media screen and (max-width: 239px){ /* Rediculously Small View */
	div.bodyContainer {
		width: 100%;
	}
	div.cBox {
		border-radius: 0px;
		border-left: 0px;
		border-right: 0px;
	}
	h1 {
		font-size: 16px;
		text-align: center;
	}
	h2 {
		font-size: 12px;
		text-align: center;
	}
	p {
		font-size: 10px;
	}
	
	#eSeries {
		width: 100%;
		height: 40px;
		display: box;
		object-fit: none;
		object-position: center top;
		content: url('imgs/E-SeriesCrop.jpg');
	}
	#hanna {
		width: 100%;
		height: 200px;
		display: box;
		object-fit: cover;
		object-position: left;
		content: url('imgs/hannaSmall.jpg');
	}
	#eSub {
		visibility: hidden;
		display: none;
	}
}

/*---------------------------------------------------------------------------*/
/* Gallery and Contact Formatting */
div.GalleryContainer {
	
}
img.fullView {
    display: block;
    width: 100%;
}
img.xButton {
    width:32px;
    height: auto;
    float: right;
}
.textField {
    display: block;
    width: 99%;
    border: 1px #F0F0F0;
    background-color: #F0F0F0;
    box-shadow: 3px 3px 3px #CCCCCC;
    font-family: arial;
}
span.error {
    color: #AA0000;
}
img.galleryImg {
	object-fit: cover;
	box-shadow: 0px 0px 5px 3px #DDDDDD;
	margin: 5px;
}

@media screen and (min-width: 1024px){ /* PC View */
	img.galleryImg {
		width: 240px;
		height: 240px;
		
	}
	.textField {
	    font-size: 18px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px){ /* Large View */
	img.galleryImg {
		width: 240px;
		height: 240px;
		
	}
	.textField {
	    font-size: 18px;
	}
}
@media screen and (min-width: 481px) and (max-width: 767px){ /* Medium View */
	img.galleryImg {
		width: 44vw;
		height: 44vw;
	}
	.textField {
	    font-size: 18px;
	}
}
@media screen and (min-width: 240px) and (max-width: 480px){ /*Small View*/
	img.galleryImg {
		width: 100%;
		height: auto;
	}
	.textField {
	    font-size: 16px;
	}
}
@media screen and (max-width: 239px){ /* Rediculously Small View */
	img.galleryImg {
		width: 100%;
		height: auto;
		margin: auto;
	}
	.textField {
	    font-size: 12px;
	}
}
/*----------------------------------------------------------------------------*/
/*Contact Formatting */