import url('base.css');

/* ==========================================================================
   Global Styles
   ========================================================================== */
* {
	/*font-family: "Playfair Display", sans-serif;*/
}
a:hover {
	color: inherit; 
}
.font-serif {
	/*font-family: 'Playfair Display', serif;*/
}
.font-sans {
	/*font-family: "Arimo", sans-serif;*/
}
.parallax {
	background: transparent; /* required for parallax.js plugin */
}
header {

}
body {
	background-color: white;
}
.invisible {
	visibility: invisible;
}
.header-logo{
	width: 205px;
	height: auto;
}
.no-top-margin{
	margin-top: 0;
}
.body-wrap, .dropdown-nav.dropdown-nav {
	margin: auto;
	width: 100%;
	min-height:40px;
}
.body-wrap.full-width {
	width:100%;
}
.body-wrap.no-margin-top,
.body-wrap.no-margin-top > *:not(nav),
.body-wrap.no-margin-top #main-content {
	margin-top:0;
}

.body-wrap.full-width.gray-bg {
	background-color:#f8f8f8;
}
.body-wrap.full-width.blue-bg, .home .blue-bg {
	color: white;
	background: #141E30;
	background: -webkit-linear-gradient(to bottom, #243B55, #141E30);
	background: linear-gradient(to bottom, #243B55, #141E30);
}
.body-wrap.full-width.darker-gray-bg {
	background-color:#555;
}
.body-wrap.full-width.darker-gray-bg footer {
	color:#FFF;
}
.body-wrap.full-width.darker-gray-bg #footer ul li {
	border-right:1px solid #CCC;
}
.body-wrap.full-width.darker-gray-bg #footer ul li:last-child {
	border-right:none;
}
.body-wrap.full-width.darker-gray-bg #footer ul a {
	display:inline-block;
	color:#FFF;
	padding:2px 10px;
}
.body-wrap.full-width .body-wrap-cont {
	width: 1199px;
	margin: auto;
	max-width: 100%;
}
/*body.home #main-content, #callouts {
	margin-top: 40px;
	color:#F8F8FF;
}*/
./*body-wrap > *:not(nav) {
	margin-top: 40px;
}*/

body.internal #main-content > .container > .row > .col-sm-9, .floating-container {
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 40px;
}
@media(max-width: 767px) {
	body.internal #main-content > .container > .row > .col-sm-9 {
		margin-bottom: 24px;
	}

}
.no-top-padding-margin {
	margin-top: 0;
	padding-top: 0;
}
@media(min-width: 768px) {
	.flex-md {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
}
.margin-top {
	margin-top: 24px;
}
.flex-column {
	display: flex;
	flex-direction: column;
}
/* ==========================================================================
   Home Page Styles
   ========================================================================== */

/* Primary Navigation Menu
   ========================================================================== */


.dropdown-nav {
	display: flex;
	justify-content: center;
	align-items: center;	margin-top:-20px;
	position:fixed;
	top: 0;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-animation: fadein .6s ease-out; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein .6s ease-out; /* Firefox < 16 */
	-ms-animation: fadein .6s ease-out; /* Internet Explorer */
	-o-animation: fadein .6s ease-out; /* Opera < 12.1 */
	animation: fadein .6s ease-out;
	z-index:1;
/*Fade-In/Slide-down animation*/
}
@media(max-width: 991px) {
	.header-logo {
		width: 200px;
	}
	.dropdown-nav {
		-webkit-animation: fadein 0s ease-out;
		-o-animation: fadein 0s ease-out;
		animation: fadein 0s ease-out;
	}
}
.internal .dropdown-nav { /* don't fade in on an internal page, but we're still sticky */
	-webkit-animation: fadein 0s ease-out;
	-o-animation: fadein 0s ease-out;
	animation: fadein 0s ease-out;
}
@media(min-width: 992px) {
	.internal #internal-splash {
		margin-top: 80px;
	}
}

@keyframes fadein {
	from { opacity: 0;transform: translateY(-100px); }
	to   { opacity: 1; transform: translateY(0px); }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
	from { opacity: 0; transform: translateY(-100px); }
	to   { opacity: 1; transform: translateY(0px);}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
	from { opacity: 0; transform: translateY(-100px);}
	to   { opacity: 1; transform: translateY(0px);}
}

/* Internet Explorer */
@-ms-keyframes fadein {
	from { opacity: 0; transform: translateY(-100px);}
	to   { opacity: 1; transform: translateY(0px);}
}

/* Opera < 12.1 */
@-o-keyframes fadein {
	from { opacity: 0; transform: translateY(-100px);}
	to   { opacity: 1; transform: translateY(0px);}
}

@media (max-width: 991px){
	.dropdown-nav{
		opacity:0;
		-webkit-animation: fadeout 1s ease-out;
		-moz-animation: fadeout 1s ease-out;
		-ms-animation: fadeout 1s ease-out;
		-o-animation: fadeout 1s ease-out;
		animation: fadeout 1s ease-out;
		z-index:1;

	}
	@keyframes fadeout {
		from { opacity: 1;transform: translateY(0px); }
		to   { opacity: 0; transform: translateY(-100px); }
	}

	@-moz-keyframes fadeout {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	@-webkit-keyframes fadeout {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	@-ms-keyframes fadeout {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	@-o-keyframes fadeout {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

}

.dropdown-nav a {
	text-transform: uppercase;
	font-size: 16px;
}
.dropdown-nav > ul li, .dropdown-nav, .sidebar-nav ul {
	background: #FFFFFF; !important; /* override sidebar-nav.css */
}
.dropdown-nav ul li {
	/*padding: 12px;*/
}
.dropdown-nav > ul > li {
	margin: 0 14px;
}
.dropdown-nav a {
	border-top: 4px solid transparent;
	color: black;
}
.dropdown-nav a:hover:not(.glyphicon):not(.close-nav-menu):not(.header-logo-link) {
	text-decoration: none;
	/*border-top: 4px solid black;*/
}
.dropdown-nav li:hover {
	background-color: #F4C35E;
	-webkit-transition: background-color .25s, color .25s;
	-moz-transition: background-color .25s, color .25s;
	-ms-transition: background-color .25s, color .25s;
	-o-transition: background-color .25s, color .25s;
	transition: background-color .25s, color .25s;
}
.dropdown-nav li:hover > a {
	color: white;
}
.dropdown-nav a.active-page {
	color: #F4C35E;
}
.dropdown-nav .header-logo-link {
	padding: 5px;
}
.nav-btn {
	color: white;
	text-shadow: 0px 0px 20px black;
	font-size: 4em;
	position: fixed;
	right: 15px;
	top: 15px;
	-webkit-animation: fadein 1s ease-out; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1s ease-out; /* Firefox < 16 */
	-ms-animation: fadein 1s ease-out; /* Internet Explorer */
	-o-animation: fadein 1s ease-out; /* Opera < 12.1 */
	animation: fadein 1s ease-out;
	z-index:1;
}
.nav-btn:hover {
	text-decoration: none;
	color: #383838;
	cursor: pointer;
}
@media (min-width: 991px){
	.nav-btn {
		display: block;
	}


	.nav-btn{
		opacity:0;
		-webkit-animation: fadeout 1s ease-out;
		-moz-animation: fadeout 1s ease-out;
		-ms-animation: fadeout 1s ease-out;
		-o-animation: fadeout 1s ease-out;
		animation: fadeout 1s ease-out;
		z-index:1;

	}

}




/* Home Page Splash Image Content
   ========================================================================== */
#homepage-cover-image {
	min-height: 500px;
	background: no-repeat center/cover;
	display: flex;
	justify-content:  center;
	align-items: center;
	padding: 40px;
	position: relative;
	overflow: hidden;
}

#homepage-cover-image .homepage-splash {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	text-align: center;
	
}
#homepage-cover-image .homepage-splash-content {
	/*background: #FFFFFE;*/
	padding: 20px 80px;
	display: flex;
	flex-direction: column;
	align-items:  center;
	margin-bottom: 20px;
	
}
#homepage-cover-image .homepage-splash-content h1 {
	font-size: 8.2rem;
	color:white;
	text-shadow: 0 0 20px black
}
#homepage-cover-image .homepage-splash-content h4 {
	font-weight: 200;
	color: white;
	font-size: 3.6rem;
	text-shadow: 0 0 20px black
}

#homepage-cover-image .splash-video{
	position: fixed;
	top: 0;
	width: 100vw;
	left: 0;
	bottom:0;
	overflow: hidden;
	z-index: -200;
}
@media(max-width: 991px) {
	#homepage-cover-image .splash-video {
		min-height: 100%;
		width: unset;
	}
}
/*@media(max-width: 764px) {*/
	/*#homepage-cover-image .splash-video {*/
		/*width: unset;*/
	/*}*/
/*}*/
/*@media(max-width: 1199px) {
	#homepage-cover-image .splash-video {
		min-height: 100%;
	}
}*/
#homepage-cover-image .rounded-rectangle {
	display: block;
	width: 300px;
	padding-left: 12px;
	padding-right: 12px;
	white-space: unset;
}
.home .rounded-rectangle {
	padding-top: 17px;
	padding-bottom: 17px;
	text-transform: uppercase;
	font-weight: bold;
	border-radius: 4px;
}
@media(max-width: 500px) {
	#homepage-cover-image .homepage-splash-content {
		padding: 25px 0;
	}
	#main-content .container{

	}

}
@media(min-width: 768px) {
	body.home #main-content #comp-jddfddtd > *:first-child {
		margin-top: 0;
		padding-top: 0;
	}

}
.rounded-rectangle {
	background: #383838;
	border-radius: 17px;
	color: white;
	padding: 10px;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	white-space: nowrap;
}
.rounded-rectangle:hover, .rounded-rectangle.white:hover {
	background: #f3c160;
	cursor: pointer;
	text-decoration: none;
	color: white;
}
.rounded-rectangle *, .rounded-rectangle *:hover {
	text-decoration: none;
	color: white;
	/*font-family: 'Raleway', sans-serif;*/
 }
.rounded-rectangle.white {
	background: rgb(245,244,245);
	color: #383838;
}
#homepage-cover-image hr {
	width: 0px;
	margin-left: auto;
	margin-right: auto;
	border-top-color: rgb(71,71,71);
}

/* Home Page Callouts
   ========================================================================== */
#callouts {
	min-height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px;
}
#callouts .callout-img {
	height: 115px;
	width: auto;
	margin: auto;
}
#callouts .callout {
	/* width: 223px; */
	color:#F8F8FF;
}
#callouts .callout:hover {
	text-decoration: none;
}
#callouts h2 {
	margin: 7px 0;
}
#callouts .callout p {
	font-size: 1.4rem;
}
#callouts .callout .expand {
	border-radius: 14px;
	background: #f3c160;
	width: 5px;
	line-height: 5px;
	margin: auto;
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
	-ms-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}
.hover-up, .hover-down {
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
	-ms-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}
#callouts .callout:hover .hover-up {
	-webkit-transform: translateY(-15px);
	-moz-transform: translateY(-15px);
	-ms-transform: translateY(-15px);
	-o-transform: translateY(-15px);
	transform: translateY(-15px);
}
#callouts .callout:hover .expand {
	width: 80%;
}
#callouts .callout:hover .hover-down {
	-webkit-transform: translateY(15px);
	-moz-transform: translateY(15px);
	-ms-transform: translateY(15px);
	-o-transform: translateY(15px);
	transform: translateY(15px);
}

/* Home Book Feature
   ========================================================================== */
#featured-book {
	color: white;
	text-align: center;
	background: no-repeat center/cover fixed;
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	/*padding: 30px 15px;*/
}
@media(max-width: 720px) {
	#featured-book {
		background: no-repeat center/cover;
	}
}
#featured-book .title {
	font-size: 55px;
	letter-spacing: 0.1em;
    text-shadow: 0 0 20px black;
}
@media(max-width: 599px) {
	#featured-book .title {
		font-size: 46px;
	}
}
#featured-book .subtitle {
	/*font-family: "Libre Baskerville", serif;*/
	font-size: 18px;
	margin-top: 10px;
	line-height: 1.7em;
	font-style:  italic;
	text-shadow: 0 0 20px black
}

/* Home Page main content + verse
   ========================================================================== */
#main-content {
	padding-top: 30px;
	padding-bottom: 30px;
	width:100%;
}
#main-content .ipad {
	max-height: 637px;
	margin: auto;
}
/* Home Page Covenant Maker
   ========================================================================== */
#covenant-maker {
	color: white;
}
#covenant-maker .row {
	display: flex;
}
#covenant-maker > .row > div {
	min-height: 60vh;
}
#covenant-maker > .row > div:nth-child(2) { /* the div with text */
	padding: 60px;
}
#covenant-maker .header {

}
#covenant-maker .content {
	line-height: 2;
}

/* Footer
   ========================================================================== */
#footer {
	/*margin-top:40px;*/
	padding: 40px;
	/*margin-top: 0px;*/
	font-size:12px;
	background: white;
}
#footer .footer-nav-zone {
	/* text-align: center; */
}
#footer .header {
	margin-bottom: 30px;
}
#footer ul, #footer li {
	list-style: none;
	padding: 0 7px;
	margin: 0;
	display: inline;
}
#footer ul a {
	color: black;
}
#footer ul a {
	cursor: pointer;
}
@media(min-width: 992px) {
	#footer .row {
		display: flex;
		align-items: center;
	}
}
#footer .footer-book {
	text-align: center;
}
#footer .footer-book img {
	width: 150px;
	display: inline;
}
#footer .footer-book span {
	line-height: 3em;
}

/* ==========================================================================
   Internal Page Styles
   ========================================================================== */

/* Splash Heading
   ========================================================================== */
#internal-splash {
	/*max-width: 100vw;*/
	height: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
#internal-splash .container {
	color: white;
}
#internal-splash .page-title {
	font-size: 71px;
	letter-spacing: normal;
	text-shadow: 0 0 20px black;
}
#internal-splash .subtitle {
	font-size: 25px;
	text-shadow: 0 0 20px black;
}

/* TODO  the one not used */
#main-content .internal-book-feature-alternate {
	text-align: center;
	color: #383838;
	border: 2px solid #383838;
	padding: 15px;
	margin-left: 12px;
	margin-right: 12px;
}
#main-content .internal-book-feature {
	color: white;
	background: #383838;
	padding: 7px;
	-webkit-box-shadow: 0 4px 8px 0 black;
	-moz-box-shadow: 0 4px 8px 0 black;
	box-shadow: 0 4px 8px 0 black;
	margin-bottom: 15px;
	margin-left: 12px;
	margin-right: 12px;
	text-align: center;
}
#main-content .internal-book-feature h3, #main-content .internal-book-feature-alternate h3 {
	margin-top: 0;
	padding-top: 0;
}
#main-content .internal-book-feature-alternate img, #main-content .internal-book-feature img {
	margin-left: auto;
	margin-right: auto;
}
#main-content .internal-book-feature a {
	color: white;
	text-decoration: underline;
	text-align: center;
}
#main-content .internal-book-feature-alternate a {
	color: #383838;
	text-decoration: underline;
	text-align: center;
}
#main-content .internal-book-feature a:hover {
	color: white;
	cursor: pointer;
}
#main-content .internal-book-feature-alternate a:hover {
	cursor: pointer;
}
#main-content .internal-book-feature p, #main-content .internal-book-feature-alternate p {
	font-size: 17px;
}
@media(max-width: 767px) {
	/* TODO remove unused */
	#main-content .internal-book-feature-alternate, #main-content .internal-book-feature {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
}

.callout-title {
	display:block;
	font-size:32px;
	text-align:center;
	float:none;
	margin-bottom:60px;
}

.internal #main-content {
	background-color: rgb(245,244,245);
}
.internal #main-content > .container {
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 40px;
	background: #fff;
}

#covenant-maker .button-center {
	text-align: center;
}