
:root {
	--font-base: 'Nunito Sans', sans-serif;
	--font-heading: 'Abril Fatface', serif;
	--font-script: 'Kristi', cursive;
}


/**
* Base Styling
*/

body {
	font-family: var(--font-base);
	color: #3c3c3e;
	overflow-x: hidden;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-family: var(--font-heading);
	color: var(--secondary);
	line-height: 1.1;
	margin-bottom: 2rem;
}

h1 em, .h1 em,
h2 em, .h2 em,
h3 em, .h3 em,
h4 em, .h4 em,
h5 em, .h5 em,
h6 em, .h6 em {
	font-family: var(--font-script);
}

a {
	transition: all .2s;
}

img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

ul > li ul { list-style-type: circle; }
ol > li > ol { list-style-type: lower-alpha; }
ol > li > ol > li > ol	{ list-style-type: lower-roman; }

.fas.fa-phone::before {
	display: inline-block;
	transform: scaleX(-1);
}


/**
* Heading Garnishes
*/

.garnish {
	position: relative;
}

.garnish::after {
	content: "";
	position: absolute;
	top: calc(100% + .5rem);
	left: 0;
	display: block;
	width: 110px;
	height: 2px;
	background-color: var(--secondary);
}

.text-center .garnish::after,
.garnish.garnish-center::after {
	left: 50%;
	transform: translateX(-50%);
}


/**
* Buttons
*/

.btn * {
	color: inherit !important;
	transition: all .2s;
}

.btn em {
	font-family: var(--font-script);
}


/**
* Section Background Image
*/

.bg-image {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


/**
* Section Parallax Effect
*/

.bg-parallax {
	background-attachment: fixed;
}

@supports (-webkit-touch-callout: none) {
	.bg-parallax {
		background-position: center;
		background-attachment: initial;
	}
}


/**
* Site Header
*/

header.main {
	background-color: #fff;
	padding: 3rem 0;
}

header.main .menu-link {
	display: inline-block;
	padding: .5rem .9rem .4rem 1.2rem;
	color: #2b2b2b;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: .3rem;
}

header.main .menu-link:hover,
header.main .menu-link:focus {
	text-decoration: none;
	background-color: var(--secondary);
	color: #fff;
}


/**
* Social Icons
*/

.social-links {
	display: flex;
	align-items: center;
}

.social-links .social-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 37px;
	height: 37px;
}

.social-links .social-icon:hover,
.social-links .social-icon:focus {
	text-decoration: none;
	background-color: var(--secondary);
	color: #fff;
}

.social-links .social-icon:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	display: inline-block;
	width: .05rem;
	height: 40%;
	transform: translateY(-50%);
	background-color: var(--secondary);
}


/**
* Carousel (Slideshow)
*/

.carousel-overlay {
	position: relative;
	z-index: 1;
}

.carousel-inner picture img {
	width: 100%;
}


/**
* Carousel (Slideshow) Site Specific
*/

.carousel-inner {
	overflow: visible;
}

.carousel-inner .scrollable {
	overflow-y: auto;
	max-height: 90px;
	margin-bottom: 1rem;
	padding-right: 1rem;
	scrollbar-color: #2b2b2b transparent;
}

.carousel-inner .scrollable *:last-child {
	margin-bottom: 0;
}

.carousel-text {
	line-height: 1.3;
	z-index: 0;
	color: #fff;
	background-color: #f6c1b1;
	position: relative;
	padding: 2rem;
}

.carousel-text::before,
.carousel-text::after {
	content: "";
	position: absolute;
	top: 0;
	width: 100vw;
	height: 100%;
	background-color: #f6c1b1;
}

.carousel-text::before {
	right: 100%;
}

.carousel-text::after {
	left: 100%;
}

.carousel-text *:not(.btn) {
	color: #2b2b2b;
}

.carousel-text h1 {
	font-family: var(--font-script);
	font-size: 38px;
	line-height: .8;
	margin-bottom: 1.7rem;
}

.carousel-text .btn {
	margin-top: 1rem;
	box-shadow: 4px 4px 5px 0 rgba(0,0,0,0.2);
}

.carousel-inner .cover-art {
	position: relative;
	margin-bottom: 2rem;
	z-index: 1;
}

@media (min-width: 1200px) {
	.carousel-text h1 {
		font-size: 40px;
	}
	.carousel-text {
		padding: 4rem 2rem;
	}
}

@media (min-width: 1500px) {
	.carousel-text h1 {
		font-size: 40px;
	}
}

@media (min-width: 1700px) {
	.carousel-inner .cover-art {
		max-width: none;
	}
}


/**
* Main Section
*/

section.main {
	padding: 6rem 0;
}

section.main .btn-outline-primary {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 0;
	border-width: 3px;
	width: 170px;
	height: 170px;
}

section.main .btn-outline-primary em {
	font-size: 38px;
	display: inline-block;
}

section.main .btn-outline-primary:not(:hover):not(:focus) em {
	color: #272c3a !important;
}

section.main .btn-outline-primary .h3 {
	margin: 0;
	font-size: 30px;
}


/**
* Books Section
*/

section.books {
	padding: 6rem 0;
}

section.books {
	background-image: url('../../images/books-bg.png');
	background-repeat: repeat-x;
	background-position: 0px 300px;
	text-align: center;
}

section.books .book {
	display: block;
}

section.books .book:hover,
section.books .book:focus {
	transform: scale(1.1);
}

section.books h1 {
	margin-bottom: 4rem;
}

section.books .btn {
	box-shadow: 4px 4px 5px 0 rgba(0,0,0,0.2);
	font-size: 24px;
	font-family: var(--font-heading);
	margin-bottom: 3rem;
	margin-top: 2rem;
}

.books .col-xl-5 {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10), 0 8px 18px rgba(0, 0, 0, 0.16), 0 18px 35px rgba(0, 0, 0, 0.08);
    background-color: #fff;
    padding: 50px 25px 50px;
	margin-top: 22px;
}

@media(min-width: 1500px) {
	.books .col-xl-5 {
		margin-right: 200px;
	}
}


/**
* Follow / Gallery Section
*/

section.follow {
	position: relative;
	padding: 4rem 0;
}

section.follow .pagegalleryheading {
	pointer-events: none;
	visibility: hidden;
	display: none;
}

section.follow .container {
	pointer-events: none;
}

section.follow .follow-text-container {
	display: flex;
	align-items: stretch;
	height: 100%;
	z-index: 1;
}

section.follow .follow-text {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #fff;
	padding-right: 1rem;
	padding-left: 1rem;
	width: 100%;
	font-size: 18px;
	pointer-events: all;
}

@media (min-width: 768px) {
	section.follow .follow-text-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	section.follow .follow-text {
		width: 50%;
		padding-right: 5rem;
		padding-left: 2rem;
	}
}

@media (min-width: 1350px) {
	section.follow .follow-text {
		width: 32.5%;
	}
}

@media (min-width: 1600px) {
	section.follow .follow-text {
		width: 31%;
	}
}

section.follow .follow-text::before {
	content: "";
	position: absolute;
	top: 0;
	display: block;
	width: 100vw;
	height: 100%;
	background-color: inherit;
}

section.follow .follow-text::before {
	right: 100%;
}

section.follow .follow-text .social-icon {
	font-size: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	color: #3c3c3e;
}

section.follow .follow-text .social-icon:hover,
section.follow .follow-text .social-icon:focus {
	background-color: var(--secondary);
	color: #fff;
	text-decoration: none;
}


/**
* Subscribe / Newsletter Section
*/

section.subscribe {
	background-color: var(--primary);
	background-image: url('../../images/subscribe-bg.png');
	background-repeat: none;
	background-size: cover;
	padding: 6rem 0;
	color: #fff;
}

section.subscribe *:not(.btn):not(.form-control) {
	color: inherit;
}

section.subscribe .form-control {
	padding: 1.675rem 2rem;
	font-size: 18px;
	border-width: 2px;
}

section.subscribe .form-control:not(:focus) {
	color: inherit;
}

section.subscribe .form-control:focus {
	color: #111;
	background-color: #fff;
}

section.subscribe .form-control:focus::placeholder {
	color: #666;
}

section.subscribe button {
	font-family: var(--font-heading);
	font-size: 22px;
	color: #3c3c3e;
}


/**
* Contact Form Section
*/

.form-control {
	background-color: transparent;
	padding: 1.375rem 1rem;
	border-color: #fff;
	overflow: clip;
}

.form-control::placeholder {
	color: #eee;
	font-size: 87%;
}

.contact .form-control:focus {
	color: #111;
	background-color: #fff;
}

.contact .form-control:focus::placeholder {
	color: #666;
}

#ContactFormUserEmail {
	display: none!important;
}

/* IMAGE LIBRARY */

#imagelibrary { margin: 4px; padding: 4px; }
#imagelibrary img { margin: 3px; }


/* IMAGE STYLING */

html>body .outerpair1	{ background: url(../images/upperrightfade.png) no-repeat right top; }
html>body .outerpair2	{ background: url(../images/lowerleftfade.png) no-repeat left bottom; padding-top: 8px; padding-left: 8px; }
html>body .shadowbox	{ background: url(../images/shadow.png) bottom right; }
html>body .innerbox	{ position: relative; left: -8px; top: -8px; }
.shadowbox img		{ border: 1px solid #000000; vertical-align: bottom; }

.pageimagecenter	{ text-align: center; margin: 0 auto; padding: 0; max-width: 100%; }
.pageimageright		{ float: right; margin: 5px 0 5px 5px; padding: 0; max-width: 100%; }
.pageimageleft		{ float: left; margin: 5px 5px 5px 0; padding: 0; max-width: 100%; }
.pageimagenone img	{ margin: 3px; padding: 0; }


/* SOCIAL SHARING BUTTONS */

#social {
	height: auto;
	padding: 20px 0;
	overflow: hidden;
}


/**
* Review Banner
*/

section.review {
	background-color: #2b2b2b;
	padding: 4.5rem 0;
	color: #fff;
	font-size: 22px;
}

@media (min-width: 1440px) {
	section.review .container {
		max-width: 1300px;
	}
}

section.review h1 {
	font-size: 40px;
	font-style: italic;
}


/**
* Page Gallery
*/

.pagegalleryheading {
	font-size: 2.5rem;
	margin-bottom: 2rem;
	text-align: center;
	font-weight: 700;
	font-family: var(--font-heading);
}

.pagegalleryinner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	margin: 0 -.5rem 2.5rem;
}

.pagegalleryimage {
	flex: 0 0 50%;
	display: flex;
	align-items: stretch;
	padding: .5rem;
}

@media (min-width: 830px) {
	.pagegalleryimage {
		flex: 0 0 33.333%;
	}
}

.pagegalleryimage a {
	display: block;
	position: relative;
	overflow: hidden;
}

.pagegalleryimage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .2s;
}

.pagegalleryimage a:hover img,
.pagegalleryimage a:focus img {
	transform: scale(1.1);
}


/**
* Social Icons
*/

.social-icon {
	padding: .3rem;
}


/**
* Footer
*/

footer.main {
	padding: 6rem 0;
	clear: both; /* Don't like it, but provides a little layout protection where floats are used larger than the document flow */
	background: #111 url('../../images/footer-bg.png') no-repeat;
	background-size: cover;
	color: #fff;
}

footer.main *:not(.btn) {
	color: inherit;
}

footer.main .legal {
	color: rgba(255,255,255,0.5);
	font-size: 12px;
	padding-top: 4rem;
}


/**
* Debug
*/

#debug { position: relative; padding: 10px 15px; text-align: left; background: #cfdaff; border-top: 12px solid #c4d2ff; border-bottom: 12px solid #c4d2ff; }
#debug h1 { border: none; color: #001b51; text-transform: none; text-decoration: none; }
#debug pre { color: #000d27; }
