/*----------------- 
*	@ +1100px  
-----------------*/

/*
*	GENERAL STYLES
*----------------------------*/
body {
	padding: 0;
	margin: 0;
	background-color: #fafafa;/*#fff1c3;/*#fffaf0;/*#fff7e6;*/
}

h1, h2, h3, h4, p, a, span {
	/*font-family: 'Open Sans', sans-serif; */
	font-family: 'Frank Ruhl Libre', serif;
}

hr {
	width: 60%; 
	border-top: 1px solid purple;
}

section {
	margin-top: 70px;
}

.clearfix {
	content: "";
	display: table;
	clear: both;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}


@font-face {
  font-family: Canterbury;
  src: url('../fonts/canterbury/Canterbury.ttf');
}

@font-face {
  font-family: English-Towne;
  src: url('../fonts/english-towne/EnglishTowne.ttf');
}


/*
*	HEADER STYLES
*----------------------------*/
header {
	/*margin-top: 60px;*/
}

.headerDiv {
	background-image: url('../img/banner.jpg'); 
	background-repeat: no-repeat; 
	background-size: cover; 
	background-attachment: fixed; 
	background-position: 0px 0px; 
	height: 100vh;
}

.headerOverlay {
	background: rgba(0,0,0,0.15); 
	width: 100%; 
	height: 100%; 
	display: table;
}

.headerText {
	/*display: table-cell; 
	vertical-align: middle;
	text-align: center; */
	font-size: 6em; 
	font-family: auto; 
	color: white; 
	text-shadow: 5px 4px 4px #000000;
	margin: 0; 
	position: fixed;
	height: 50%;
	width: 100%;
	top: 25%;
}

.headerText p {
	text-align: center;	
	/*font-family: 'UnifrakturMaguntia', cursive; */
	/*font-family: Canterbury; */
	font-family: English-Towne;
}


/*
*	NAVBAR STYLES
*----------------------------*/
#defaultNav {
	position: fixed; 
	width: 100%; 
	height: 60px;
	top: 0; 
	left: 0;
	z-index: 50;
	/*background-color: rgba(62,14,118, .75);*/
	background: transparent;
}


#defaultNav a {
	display: inline-block;
}

img.logo, img.logoAlt {
	width: 130px;
	position: absolute;
	padding-top: 5px;
	padding-left: 15px;
	z-index: 10;
}

img.logo {
	display: none;
}

img.logo.show {
	display: block;
}

img.secondary.logo {
	display: block;
}

.menuItems {
	height: 100%;
}

.menuItem {
    overflow: hidden;  
	width: 110px;
	height: 60px;
	display: inline-block;
    color: black;
    text-align: center;
}

.menuItem:hover {
	cursor: pointer;
	box-shadow: 0px 0px 6px 0px darkgrey;
}

.menuItem.selected, .sideMenuItem.selected {
	background-color: #212121;
}

.menuItem a {
	text-decoration: none;
	position: relative;
	top: 30%;
	color: white;
}

.secondary#defaultNav .menuItem.selected a, .sideMenuItem.selected a {
	color: white;
}

.menuIcon {
	float: right;
	padding-right: 20px;
	padding-top: 20px;
	display: none;
}

.menu, .menuAlt {
	color: white;
}

.menuAlt {
	display: none;
}


/*---------------*/
#defaultNav {
	transition-duration: .75s;
	-webkit-transition: background-color 1s; /* Safari 3.1 to 6.0 */
}

#defaultNav .menuItem, #defaultNav ul {
	box-shadow: none;
}

#defaultNav .menuItem li:hover {
	background: #fafafa;
	color: black;
	opacity: .8
}

#defaultNav.navbar-opaque, .secondary#defaultNav {
	background: #fafafa;
	box-shadow: 0px 2px 8px #888888;
}

#defaultNav.navbar-opaque a, .secondary#defaultNav a, #defaultNav.navbar-opaque .menuItem.selected ul a {
	transition-duration: 1s;
	color: black;
}

#defaultNav.navbar-opaque .menuItem.selected a {
	color: white;
}

#defaultNav.navbar-opaque a:hover:not(.active) {

}



ul, .sideMenuItem div {
	display: none;
	position: absolute;
	top: 44px;
	list-style: none;
	padding: 0;
}

.menuItem:hover > ul {
	display: block;
	box-shadow: 2px 3px 3px 0px grey;
}

ul li, .sideMenuItem span {
	padding: 10px 10px 10px 30px;
	text-align: left;
	color: white;
	width: 180px;
}

#defaultNav.navbar-opaque ul {
	background: #fafafa;
}

#defaultNav.navbar-opaque ul li:hover {
	background: gray;
}

#defaultNav.navbar-opaque ul li, .secondary#defaultNav ul li {
	/*transition-duration: 1s;*/
	color: black;
	background: #fafafa;
}





.sideMenu {
	transition-duration: 1s; 
	background: #fafafa;
	position: fixed;
	top: 60px;
	right: 0;
	height: 100vh;
	width: 0px;
	z-index: 1000;
	opacity: .8;
}

.sideMenu.displayMenu {
	transition-duration: 1s; 
	display: block;
	width: 250px;
}

.sideMenuItem, .sideMenuItem.headerRow{
	display: block;
	padding: 20px 20px;
	transition: box-shadow .5s;
}

.sideMenuItem:hover {
	/*background: #dcdcdc;*/
	cursor: pointer;
	box-shadow: 0px 0px 6px 0px darkgrey;
	background: black;
	color: white;
}

.sideMenuItem:hover > a {
	color: white;
}

.sideMenuItem a {
	text-decoration: none;
	color: black;
}



.sideMenu-opaque {
	opacity: 1;
}

.sideMenu-opaque .sideMenuItem:hover {
	background: #fafafa;
}

.sideMenu-opaque .sideMenuItem:hover > a, .sideMenu-opaque .headerRow:hover {
	color: black;
}

.sideMenuItem.expanded span {
	display: block;
}



.sideMenuItem.subRow {
	display: none;
	padding-left: 40px;
}


/*
*	MAIN STYLES
*----------------------------*/
main {
    background: #fafafa;
    position: relative;	
	z-index: 5;
	min-height: 100vh;
}


.columns {
	padding-top: 10vh;
	display: flex;
	flex-wrap: wrap;
}

.column {
	margin-bottom: 45px;
	
}



/*
*	SECTION STYLES
*----------------------------*/
.section {
	width: 100%;
	margin: auto;
	margin-bottom: 45px;
	background: #fafafa;
}

.section h1 {
	margin-top: 0;
	padding-top: 50px;
	font-family: Canterbury, 'Montserrat', sans-serif; 
}

.sectionTitle {
	padding-top: 7vh;
	
}

.sectionHeading {
	font-size: 2em;
	font-style: italic;
}


.pictureBreak1 {
	background-image: url('../img/carriage_outside.jpg'); 
	background-repeat: no-repeat; 
	background-size: cover; 
	background-attachment: fixed; 
	background-position: 0px 0px; 
	height: 70vh;
}

.section1 {
	
}



.overlay {
	background: rgba(0,0,0,0.15); 
	width: 100%; 
	height: 100%; 
	display: table;
}


/*
*	CARD STYLES
*----------------------------*/
.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 75%;
  margin: auto;
  max-width: 300px;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 0px 6px 5px rgba(0,0,0,0.2)
}

.card img {
	width: 100%;
	height: 198px;
	max-height: 198px;
}

.card h2 {
	font-family: 'Frank Ruhl Libre', serif;
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}



/*
*	FOOTER STYLES
*----------------------------*/

footer {
	min-height: 270px; 
	background-color: #212121;
	/*height: 40vh;*/
}

.footerHeading {
	text-align: center; 
	color: white; 
	margin-top: 10px;
}

.footerHeading p {
	padding-top: 20px;
	font-family: Canterbury, 'Montserrat', sans-serif;
	font-size: 2.5em;
}

.columnWrapper {
	display: flex;
}

.footerColumn {
	/*display: inline-block; */
	width: 33%; 
	font-size: .9em;
	color: white; 
	padding-bottom: 50px;
}

.footerColumn.left {
	float: left;
	padding-left: 50px;
	text-align: left;
}

.footerColumn.center {
	text-align: center;
}

.footerColumn.right {
	float: right;
	padding-right: 90px;
	text-align: right;
	text-align: center;
}


.footerColumn span {
	margin-left: 10px;
}

.footerParagraph {
	margin-left: 10px;
	margin-bottom: 5px;
	display: inline-block;
}

.footerLogoDiv {
	display: inline-block;
	text-align: center;
	margin-bottom: 15px;
}

.footerLogo {
	width: 150px;
	color: white;
}

.copyright {
	font-size: .75em;
	text-align: left; 
	color: white; 
	margin-top: 30px;
	padding-left: 10px;
}


/*-------------------------------------------------------
*
* 				 RESPONSIVE DESIGN
*
*--------------------------------------------------------*/


/*----------------- 
*	Extra Small  
-----------------*/
@media (max-width: 767px) { 

	.menuItems {
		display: none;
	}
	
	.menuIcon {
		display: block;
	}
	
	.menu.showAlt {
		transition-duration: .75s;
		display: none;
	}
	
	.menuAlt.showAlt {
		transition-duration: .75s;
		display: inline-block;
	}

	.headerDiv {
	/*	background-position: -760px 0px; */
	}

	.column {
		width: 100%;
	}


}



/*----------------- 
*	Small  
-----------------*/
@media (min-width: 768px) and (max-width: 991px) { 

	.menuItems {
		display: none;
	}
	
	.menuIcon {
		display: block;
	}
	
	.menu.showAlt {
		transition-duration: .75s;
		display: none;
	}
	
	.menuAlt.showAlt {
		transition-duration: .75s;
		display: inline-block;
	}

	.headerDiv {
	/*	background-position: -500px 0px; */
	}

	.column {
		width: 50%;
	}

}



/*----------------- 
*	Medium  
-----------------*/
@media (min-width: 992px) and (max-width: 1199px) { 

	.headerDiv {
	/*	background-position: -300px 0px; */
	}

	.column {
		width: 50%;
	}

}


@media (max-width: 1100px) { 

	.menuItems {
		font-size: 14px;
		text-align: right;
		margin-right: 60px;
	}

}

/*----------------- 
*	Large  
-----------------*/
@media (min-width: 1200px) { 

	.headerDiv {
	/*	background-position: -100px 0px; */
	}

	.column {
		width: 25%;
	}


}