/*
Theme Name:		Melissa Grey
Author:			801red
Author URI: 	http://www.801red.com
Version: 		1.0
Text Domain: 	beowulf
*/

/* IMPORTS */
@import url(assets/css/reset.css);


/* COLOR SELECTORS*/
.white { color:#FFF; }
.black { color:#000; }
.bg-white { background-color:#FFF; }


/**
 * 1.0 Global
 * ----------------------------------------------------------------------------- */
 
/* INNER BOX PADDING FOR RESPONSIVE COLUMNS */
* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */	
}

/* CLEAR FIX */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/* BASIC SETUP */
body {
	font-family: "Open Sans", Helvetica, Arial, "sans-serif";
	font-size:14px;
	background-color: #FFF;
}

/* TYPOGRAPHY */

/* Headings */
h1, h2, h3, h4, h5, h6, p {
	margin:0 0 22px;
	padding:0;
}
h1, h1 a {
	font: 32px "Cinzel", "Times New Roman", "serif";
}
h2, h2 a {
	font: 24px "Cinzel", "Times New Roman", "serif";
}
h3 {
	font-weight: 700;
	font-style: italic;
	font-size: 20px;
	color: #666666;
}
h4, h4 a {
	color: #000;
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
}
h5 {
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	color: #750030;
}
h6 {
	font-weight: 700;
	font-size: 14px;
}

/* Text elements */
p { clear: both; }
p, li {
}
strong, .bold { font-weight:700; }
em { font-style:italic; }
p:last-child { margin-bottom:0; }
a,
a:focus {
	outline:none;
	color: #0D3F50;
}
article a {
	font-weight: 700;	
}
a:hover {
}
a[href^="tel:"] {
}
ul, ol {
	margin: 0 0 1.5em 3em;
}
ul {
	list-style: disc;
}
ol {
	list-style: decimal;
}
li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}
img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}
blockquote p:before { content: open-quote; }
blockquote p:after { content: close-quote; }
blockquote {
}



/* TABLES */
table { width:100%; }
tr { height:40; }
th { vertical-align:middle; text-align:right; padding:0 10; }
td { padding:6px; }
table.lined td { border-bottom:1px dotted #ddd; }	



/* FORMS */
.search-form {
	display:inline; 
}
.searchbox {
	background-color: #CCC;
	border: none;
	color: #000;
	font: 10px/18px proxima-nova, sans-serif;
	margin-left: 10px;
	-webkit-appearance: none;
	border-radius: 0 !important;
	width: 92%;
	padding: 10px;
	margin-top: 10px;
}
.searchbox.dynamic {
	width:0;
    -webkit-transition: width .5s; /* Safari */
    -o-transition: width .5s;
    transition: width .5s;
	padding:0;
}
.searchbox.dynamic.open {
	width:300;
	padding:2px;
}
input, textarea {
	border:solid 1px #999;;
	width:100%;
	padding:6px;
}
input.radio { width:auto; }
.wpcf7-submit {
	background-color: #02a297;
	border: medium none;
	color: #fff;
	display: block;
	float: right;
	width: auto;
	margin: 20 6px;
	text-transform: uppercase;
	padding: 6px 28px;
	cursor:pointer;
}


/* TAGS */
.text-left   { text-align: left   !important; }
.text-center { text-align: center !important; }
.text-center ul { margin-left: 0; list-style-position:inside; }
.text-right  { text-align: right  !important; }


.caps { text-transform:uppercase; }
.rounded {
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border-radius: 9px;
}
.round {
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.border {
	border:1px solid #000;
}
.text-shadow {
	text-shadow: 0 0 6px #054172;
}
.menu-toggle { display:none; }
.border-bottom {
	border-bottom:solid 1px #CCCCCC;
	padding:20px 0;
	margin-bottom:40px;
}
.border-bottom:last-child { border: none; }
.relative {	position:relative; }
.absolute {	position:absolute; }
.no-margin { margin:0; }
.none { padding:0; margin:0; list-style-type:none; }

.masonry { 
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}
.masonry > div, .masonry > article { /* Masonry bricks or child elements */
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
	-webkit-column-break-inside: avoid; 
	page-break-inside: avoid; 
	break-inside: avoid;
}

.default-image {
	width:100;
	height:100;
	background-color:#0E4E96;
	-webkit-box-shadow: inset 0 0 7px 0 rgba(50, 50, 50, 0.75);
	box-shadow:         inset 0 0 7px 0 rgba(50, 50, 50, 0.75);
	font-size:16px;
	color:rgba(255,255,255,.8);
	text-align:center;
	font-weight:700;
	padding-top:30;
}
.default-image:before {
	content: "Picture Not Available";
}
.background-image {
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
}
.overlay { position:relative; }
.overlay > div { position:relative; z-index:9; }
.overlay::after {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	content:'';
	background-color:rgba(0,0,0,.4);
}
.hover-shadow {
  display: block;
  position: relative; /* For positioning the pseudo-element */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
.hover-shadow::before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 500ms;
}
.hover-shadow:hover::before {
  opacity: 1;
}


/**
 * 2.0 Layout
 * ----------------------------------------------------------------------------- */

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.flex-container.justify {
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
}
.flex-container.justify-left {
	-webkit-box-pack:start;
	    -ms-flex-pack:start;
	        justify-content:flex-start;
}
.flex-container.justify-center {
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
}
.flex-container.justify-right {
	-webkit-box-pack:end;
	    -ms-flex-pack:end;
	        justify-content:flex-end;
}
.flex-container.align-top {
	-webkit-box-align:start;
	    -ms-flex-align:start;
	        align-items:flex-start;
}
.flex-container.align-center {
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
}
.flex-container.align-bottom {
	-webkit-box-align:end;
		-ms-flex-align:end;
			align-items:flex-end;
}
.flex-container.wrap {
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
}
.flex-container.column {
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	    -ms-flex-direction:column;
	        flex-direction:column;
}
.grid {
	max-width:1000px;
	margin:auto;
}
.row { padding:40px 0; position: relative; background-color: #FFF; }
.row.large { padding: 60px 0; }
.column-wrapper { -webkit-box-flex:1; -ms-flex:1 0 25%; flex:1 0 25%; max-width:335px; position:relative; margin:0 2% 20px; }
.fixed {
	position:fixed;
	width:100%;
	z-index:99;
}

/**
 * 3.0 Header
 * ----------------------------------------------------------------------------- */
.header-image {
    background-image: url("assets/images/clouds.jpg");
    height: 300px;
    width: 100%;
    position: absolute;
    z-index: 0;
}
.home .header-image { height: 600px; }
.new-overlay .elementor-background-overlay,
.header-image.overlay::after {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#750030+0,006a7f+100 */
    background: #750030; /* Old browsers */
    background: -moz-linear-gradient(left,  #750030 0%, #006a7f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #750030 0%,#006a7f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #750030 0%,#006a7f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#750030', endColorstr='#006a7f',GradientType=1 ); /* IE6-9 */
    mix-blend-mode: multiply;
}
header {
    padding: 20px 2% 0;
	position: relative;
}
.logo {
	background-image: url("assets/images/melissa-grey.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size:contain;
	height: 30px;
	width: 335px;
	text-indent:-9999px;
}

/**
 * 4.0 Navigation
 * ----------------------------------------------------------------------------- */

nav ul { margin:0; padding:0; list-style-type:none; }
nav ul li { display:inline-block; }


/**
 * 5.0 Asides
 * ----------------------------------------------------------------------------- */

/* SIDEBAR */
aside {
	width: 35%;
}
aside ul {
}
aside ul li {
}

/* WIDGETS */
.instagram-feed .jr-insta-thumb ul.thumbnails {
	margin-left: 0;
}
.instagram-feed .jr-insta-thumb ul.thumbnails.jr_col_6 li {
	width: 16.6666% !important;
}
.instagram-feed .jr-insta-thumb ul.thumbnails li {
	margin: 0;
}
.twitter-feed {
	background-color: #424095;
}
.rotatingtweet p, .rotatingtweet a { color: #FFF; }
.rotatingtweet { padding-left: 100px; position: relative; width: 100%;  }
.rotatingtweet::before {
	content: "\f099";
	font-family: 'Font Awesome 5 Brands';
	position: absolute;
	top: 50%;
	left: 0;
	color: #FFF;
	font-size: 40px;
	font-weight: 900;
	transform: translateY(-50%);
}
.tumblr-feed {
	background-color: #FFF;
	border-top: solid 1px #CECECE;
}
.tumblr-feed .grid { position: relative; }
.tumblr-feed .grid::before {
	content: "\f173";
	font-family: 'Font Awesome 5 Brands';
	position: absolute;
	bottom: 0;
	left: 0;
	color: #CECECE;
	font-size: 40px;
	font-weight: 900;
}
.tumblr-feed h2 { display: none; }
.f2-tumblr-post {
	margin-bottom: 10px;
	flex: 0 0 30%;
}
.gform_confirmation_message {
	margin-top: 40px;
	border: 1px solid green;
	padding: 20px;
	text-align: center;
}

/**
 * 6.0 Content
 * ----------------------------------------------------------------------------- */
.home .bx-wrapper, .home .bx-viewport, .home .slideshow, .home .slide {
	height: 435px !important;
}
.slide a { height: 100%; }
.slide p {
	max-width: 800px;
	margin-bottom: 20px;
	color: #FFF;
	text-align: center;
}

.main-body {
	background-color: #FFF;
}
.title { height: 95px; width: 100%; }
.title h1 { color: #FFF; }
.content {
	max-width: 60%;
}
.content.wide { max-width: 100%; }
.section.thin {
	max-width: 480px;
	position: relative;
}
.section.thin::before {
	background-image: url("assets/images/feather.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	height: 400px;
	position: absolute;
	content: '';
	left: -280px;
	top: -145px;
	width: 250px;
}
.section.offset article {
	margin-left: 45px;
	padding: 0 0 15px;
}
.section.offset .content {
	width: 100%;
	max-width: 100%;
}
.content article.full {
	padding-top: 35px;
	padding-bottom: 100px;
}
.content__section { padding-bottom: 50px; }
.content__section:last-child { padding-bottom: 0; }
a.read-more {
	color: #000;
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	float: right;
}
.recent-posts { border-top: solid 1px #CCC; }


/* BOOKS */
.purchase-areas {
	margin-bottom: 35px;
}
.purchase-areas h6 {
	text-transform: uppercase;
	padding: 6px;
	margin-bottom: 12px;
	border-bottom: solid 1px #CCCCCC;
}
.purchase-areas a {
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
	color: #006A7F;
	display: inline-block;
	width: 100%;
	background-color: #FFF;
	transition: background-color .2s;
	padding: 6px;
}
.purchase-areas a:hover {
	background-color: #99C3CC;
}


/* GALLERY */
.gallery {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
}
#gallery-2 .gallery-item {
	float: none !important;
	margin: 0 1% 10px !important;
	flex: 0 0 30%;
}
#gallery-2 img {
	border: none !important;
}

/* TESTIMONIALS */
.testimonial {
	padding: 30px;
	background-color: #006A7F;
	text-align: center;
	color: #FFF;
	font-style: italic;
}


/* WORDPRESS */
.widgets, .widget ul { list-style: none; margin: 0; padding: 0; }
.alignleft { float: left; margin: 0 20px 0 0; }
.alignright { float: right; margin: 0 0 0 20px; }
.aligncenter { display: block; margin: 0 auto; }
.wp-post-image { margin-bottom: 30px; }
p.postmetadata {}
.byline {}
.acf-map {
	width: 100%;
	height: 400;
	border: #ccc solid 1px;
	margin: 20 0;
}
.page-link {
	border-top:solid 1px #CECECE;
	margin-top:20;
	text-align:center;
	clear:both;
	padding:2%;
}
.page-link a {
	font-weight:700;
}
.previous, .next { display:inline; }
.previous { margin-right:10; padding-right:10; border-right:solid 1px #646464;  }
.previous i { margin-right:6px; }
.next i { margin-left:6px; }



/* SOCIAL ICONS */
.social {
	font-size:16px;
	text-align:center;
	margin-bottom: 20px;
}
.social a {
	display: inline-block;
	text-align: center;
	color: #000;
	width: 24px;
	margin: 0 10px;
	background-color: rgba(255,255,255,.5);
	height: 24px;
	border-radius: 100%;
}
footer .social a {
	background-color: rgba(255,255,255,1);
}

/* BUTTONS */
.button {
    background: #750030; /* Old browsers */
    background: -moz-linear-gradient(left,  #750030 0%, #006a7f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #750030 0%,#006a7f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #750030 0%,#006a7f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#750030', endColorstr='#006a7f',GradientType=1 ); /* IE6-9 */
	color:#FFF;
	font-weight: 700;
	border: none;
	display:inline-block;
	text-align:center;
	text-transform:uppercase;
	text-decoration:none;
	padding:10px 30px;
	cursor: pointer;
}
.button.white {
	border:solid 1px #FFF;
	background-color:transparent;
}


/**
 * 7.0 Footer
 * ----------------------------------------------------------------------------- */

/* FOOTER */
footer {
}

/* COLOPHON */
.colophon {
	padding:20px 0;
}
.colophon p {
	color:#fff;
	font: 14px "Cinzel", "Times New Roman", "serif";
}

/**
 * 8.0 Responsive
 * ----------------------------------------------------------------------------- */


@media all and (max-width: 1000px) {
	.grid { padding: 0 2%; }
	.tumblr-feed .grid::before {
		bottom: -35px;
		left: 2%;
	}
}
@media all and (max-width: 768px) {
}
@media all and (max-width: 767px) {
	/* MAIN NAV RESPONSIVE */
	.main-nav, .secondary nav {
		display: none !important;
	}
	.flexnav, .recent-posts .grid > div {
		display:block;
	}
	.f2-tumblr-widget-class { display: block; }
	.f2-tumblr-post, .column-wrapper.third {
		margin-bottom: 30px !important;
		display: block !important;
		width: 80%;
		max-width: 100%;
		border-bottom: solid 1px #CECECE;
		margin: 30px auto !important;
		padding-bottom: 30px;
	}
}
@media all and (max-width: 568px) {
	.home .bx-wrapper, .home .bx-viewport, .home .slideshow, .home .slide {
		height: 396px !important;
	}
	.home .header-image { height: 550px; }
	.logo { width: 90%; }
	.section.offset article {
		margin-left:0;
	}	
	.f2-tumblr-post, .column-wrapper.third {
		width: 100%;
	}
	.tumblr-feed .grid::before {
		bottom: -55px;
	}
	.instagram-feed .jr-insta-thumb ul.thumbnails.jr_col_6 li {
		width: 33.3333% !important;
	}
	.colophon p {
		text-align: center;
		font-size: 12px;
		padding: 20px 2%;
	}
	.content {
		max-width: 100%;
	}
	.content.wide { max-width: 100%; }
	.content article.full {
		padding: 35px 0;
	}
	.content-wrapper, .gallery,
	.tax-book-category .row.flex-container {
		-ms-flex-wrap:wrap;
			flex-wrap:wrap;		
	}
	aside { width: 100%; }
	.content-wrapper .content { max-width: 100%; }
	.content-wrapper .title { height: auto; }
	.content-wrapper .title h1 { color: #000; text-align: center; width: 100%; }
	.retailer {
		display: inline-block;
	}
	#gallery-2 .gallery-item,
	.single-book .column-wrapper,
	.tax-book-category .column-wrapper.third {
		-webkit-box-flex: 1;
		-ms-flex: 0 0 48%;
		flex: 0 0 48%;
		margin: 0 2%;
	}	
	.single-book .column-wrapper img,
	.tax-book-category .column-wrapper.third img { margin: 0; }
	.column-wrapper.third {
		margin-bottom: 0 !important;
		border-bottom: none;
		padding-bottom: 0;
	}
}
@media all and (max-width: 340) {
}