/*

blue: #668799


*/


body {
	margin:0;
	padding:0;
	font:16px Arial,sans-serif;
}

/* jott45 normal */

.header {
	height:300px;
	background-image: url(img/header_bg.jpg);
	background-position:0 0;
	background-repeat: no-repeat;
	border-top:20px solid #7479a6;
	position:relative;
}

.header>div {
	text-align:right;
	position:absolute;
	right:3em;
	top:50%;
	transform: translateY(-50%);
}

.header h1 {
	font: 8em 'Kaushan Script', cursive;
	color:white;
	margin:0; 
	padding:0;
	line-height:1em;
}

.header h2 {
	margin:0; 
	padding:0;
	font: 1.5em Arial,sans-serif;
	color:white;

}

.header img {
	position:absolute;
	top:50%;
	transform: translateY(-50%);	
	left:20px;
	width:100%;
	max-width:320px;
	height:auto;
}

.footer {
	background-color:#7794a2;
}

.footer>div {
	max-width:960px;
	margin:0 auto;
	text-align:right;
	padding:40px 20px;
	box-sizing:border-box;
}

img.foot_social {
	width:100%;
	max-width:60px;
	height:auto;
	transition: transform .1s;
}

img.foot_social:hover {
	transform: scale(1.15);
}

ul.navs {
	list-style:none;
	margin:0;
	padding:5px 0;
	text-align:center;
	background-color: #152226;
}

ul.navs li {
	display:inline-block;
	margin:0 2.5em;
}

ul.navs a {
	font:bold 1em Quicksand,sans-serif;
	text-decoration: none;
	color:#FFF;
	transition:color .25s;
}

ul.navs a:hover {
	color:#FFCC00;
}

.content {
	max-width:960px;
	margin:0 auto;
	font-family: 'Fenix', serif;
	padding:40px 20px;
	box-sizing:border-box;
	xoverflow:hidden;
}


.color_bkg_1 {
	/* dark gray blue */
	background-color:#1b2a2f;
	color:white;
}
.color_bkg_2 {
	/* lightest blue */
	background-color:#e5eef2;
	color:#333;
}

.book_flex_left,
.book_flex_right {
	display:flex;
	justify-content:space-between;
	align-items:stretch;
	align-content:flex-start;
	flex-flow:row nowrap;
	margin-top:60px;
}

.book_flex_left img,
.book_flex_right img {
	width:100%;
	max-width:250px;
	height:auto;
}

img.annybanner {
	position:absolute;
	top:-30px;
	left:-10%;
	width:110%;
	height:auto;
	max-width:300px;
}



.book_flex_left>div:first-child {
	flex:1 1 100%;
	max-width: 250px;
	min-width:200px;
	padding-right:20px;

	position:relative;
}



.book_flex_right>div:last-child {
	flex:1 1 100%;
	max-width: 250px;
	padding-left:20px;
}

.color_bkg_1 {
	position:relative;
	xoverflow:hidden;
}


.home_content h2 {
	font-size:2.5em;
	letter-spacing:5px;
	margin:0;
}

.home_content p {
	line-height:1.35em;
	font-size:1.5em;
}

.button_white_border {
	display:inline-block;

	border:1px solid white;
	border-radius:10px;
	padding:5px 30px;

	font:.75em Quicksand,sans-serif;

	text-decoration:none;
	color:white;
	text-transform: uppercase;
	letter-spacing:.25em;

	transition: background-color .25s;
}

.button_white_border:hover {
	background-color:#7794a2;
}

.buy_book_content {
	text-align:center;
}

.buy_book_content .buy_book_img{
	width:100%;
	max-width:300px;
	height:auto;
}

.buy_book_content h2 {
	font-size:1.5em;
	margin:0;
}

.buy_book_content h3 {
	font-size:1.25em;
	margin:0;
}

.shop_out_link {
	display:inline-block;
	margin-top:40px;
	transition: transform .25s;
}

.shop_out_link:hover {
	transform:scale(1.025);
}


.about_content p {
	line-height:1.35em;
	font-size:1.25em;
}

label {
	display:block;
	margin-top:1em;
	font-size:1.25em;
}

input[type=text], textarea {
	padding:3px;
	font-size:1.25em;
	width:100%;
	max-width:400px;
}

textarea {
	height:4em;
}

#btn-submit {

	border:1px solid #7794a2;
	border-radius:10px;
	padding:5px 30px;

	font:bold 1em Quicksand,sans-serif;

	text-decoration:none;
	color:#152226;
	text-transform: uppercase;
	letter-spacing:.25em;

	transition: background-color .25s;
	cursor:pointer;

	background-color:white;
	margin-top:2em;
}

#btn-submit:hover {
	background-color:#7794a2;
}

.mail_overlay {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.75);
}

.overlay_message_wrap {
	display:table;
	width:100%;
	height:100%;
}

.overlay_message_wrap>div {
	display:table-cell;
	width:100%;
	height:100%;
	text-align:center;
	vertical-align:middle;
}


/* LOADING ANIMATION */

.loader {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}
.loader div {
	position: absolute;
	border: 4px solid #fff;
	opacity: 1;
	border-radius: 50%;
	animation: loaderanim 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.loader div:nth-child(2) {
	animation-delay: -0.5s;
}
@keyframes loaderanim {
	0% {
		top: 36px;
		left: 36px;
		width: 0;
		height: 0;
		opacity: 1;
	}
	100% {
		top: 0px;
		left: 0px;
		width: 72px;
		height: 72px;
		opacity: 0;
	}
}



@media all and (max-width:1220px) {
	.header h1 {
		font-size:4em;
	}
}

@media all and (max-width:1000px) {
	.header h1 {
		font-size:4em;
	}

	ul.navs {
		text-align:right;
	}

	ul.navs li {
		display:inline-block;
		margin:0 .5em;
	}

	.header img {
		max-width:250px;
	}
}


@media all and (max-width:730px) {
	.header img {
		max-width:200px;
	}

	.header h1 {
		font-size:3em;
	}

	.header {
		height:180px;
	}
}


@media all and (max-width:600px) {
	.book_flex_left {
		flex-direction:column-reverse;
	}

	.book_flex_left>div:first-child {
	padding-right:0;
	text-align:center;
	max-width:100%;
	border-bottom:1px solid rgba(255,255,255,.5);
	padding-bottom:30px;
}

img.annybanner {
	
	position:absolute;
	top:-30px;
	left:50%;

	transform: translateX(-50%); 
		
			

	width:110%;
	height:auto;
	xoutline:1px solid red;
	max-width:300px;
}

.book_flex_left>div:last-child {
	max-width:100%;
	padding-left:0;
}

.book_flex_left>div:last-child p:last-child {
	text-align:center;
	}
}

@media all and (max-width:535px) {
	.header img {
		position:relative;
		transform:none;
		top:auto;
		left:auto;
		margin:0 auto;
		display:block;
	}

	.header>div {
		position:relative;
		transform:none;
		top:auto;
		right:auto;
		text-align:center;
		margin-top:20px;
	}

	.header {
		height:auto;
		padding:20px 0;
	}

	ul.navs {
		text-align:center;
	}

	ul.navs li {
		margin:0 5px;
		font-size:.75em;
	}
}