/*   
Theme Name: Sarah Llewellyn - Custom Theme
Theme URI: http://1348design.com
Description: A custom WordPress theme for the website of Sarah Llewellyn
Author: Jan Hacker @ 1348 Design
Author URI: http://1348design.com
Version: 1.0
*/

/***** Reset *****/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	-webkit-text-size-adjust: 100%;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ul {
	list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/***** Clear Fix *****/
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}

/***** Styles *****/
.skip-to-content-link {
	position: absolute;
	left: 50%;
	padding: 13px 22px;
	background: #f2f2f2;
	color: #000;
	text-decoration: underline;
	font-size: 16px;
	transform: translateY(-150%);
	transition: transform 0.3s;
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
	border-radius: 0 0 8px 8px;
	z-index: 999;
}
.skip-to-content-link:focus {
	transform: translateY(0%);
}
.header-nav-mobile{
	display: none;
}
body{
	background: #F7F8F4;
	background-image: url("_images/background-texture-tint-1.jpg");
	background-attachment: fixed;
	font-family: 'Spectral', serif;
	font-size: 20px;
	font-weight: 300;
	color: #222;
}

h1{
	font-size: 46px;
}
.text-area h1{
	border-bottom: 1px solid #d6d6d6;
	padding-bottom: 20px;
	overflow: hidden; /* ensures correct display when next to a floated image */
}
h2{
	font-size: 30px;
}
.text-area h2{
	display: inline-block;
	border-bottom: 1px solid #d6d6d6;
	padding-bottom: 20px;
}
h3{
	font-size: 27px;
}
h4, h5{
	font-size: 24px;
}
p{
	margin-top: 20px;
	line-height: 1.5;
}
p a,
.main li a{
	color: #222;
	text-decoration: underline;
}
p a:hover,
.main li a:hover{
	color: #000;
	text-decoration: none;
}
p a:focus-visible,
.main li a:focus-visible{
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
	border-radius: 3px;
}
em{
	font-style: italic;
}
strong, b, h4, h6{
	font-weight: 600;
}
p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6{
	margin-top: 40px;
}
.main{
	min-height: 70vh;
	padding-top: 156px;
	z-index: 100;
}
.main ul{
	list-style: circle;
}
.main ul,
.main ol{
	overflow: hidden; /* ensures correct display when next to a floated image */
	margin: 20px 0 20px 0;
	padding: 0 20px 0 40px;
}
.main ul li,
.main ol li{
	margin: 0 0 10px 0;
	line-height: 1.2;
}
.main .text-center{
	text-align: center;
}
.button,
input[type=button],
.nf-form-content button,
.nf-form-content input[type=button],
.nf-form-content input[type=submit]{
	display: inline-block;
	padding: 12px 30px !important;
	line-height: 1 !important;
	background: #e9eded !important;
	color: #333 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	font-family: 'Spectral', serif !important;
	font-weight: 300 !important;
}
.content-section.dark-background .button{
	background: #D9D9D9 !important;
}
.button:hover,
input[type=button]:hover,
.nf-form-content button:hover,
.nf-form-content input[type=button]:hover,
.nf-form-content input[type=submit]:hover{
	opacity: 0.8 !important;
	transition: all 0.3s !important;
}
.button:focus-visible,
input[type=button]:focus-visible,
.nf-form-content button:focus-visible,
.nf-form-content input[type=button]:focus-visible,
.nf-form-content input[type=submit]:focus-visible{
	text-decoration: underline !important;
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
	border-radius: 3px;
}

.wrap{
	position: relative;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 40px;
}
.header{
	position: fixed;
	height: 156px;
	width: 100%;
	border-top: 2px solid #e9eded;
	box-shadow: rgba(0, 0, 0, 0.025) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	background: #F7F8F4;
	background-image: url("_images/background-texture-tint-1.jpg");
	z-index: 200;
	transition: all 0.3s;
}
.header-content{
	position: relative;
	width: 100%;
	height: 94px;
	padding: 30px 0;
	transition: all 0.3s;
}
.header-stave{
	position: absolute;
    bottom: 36px;
	width: 100%;
	height: 40px;
	background: url("_images/header-stave.svg");
	background-position: 50% 50%;
    background-repeat: repeat-x;
    background-size: contain;
	z-index: 210;
	transition: all 0.3s;
}
.header-branding{
	position: relative;
	z-index: 220;
	transition: all 0.3s;
}
.header-title{
	font-size: 40px;
	color: #222;
	text-decoration: none;
	transition: all 0.3s;
}
.header-title a{
	color: #222;
	text-decoration: none;
}
.header-title a:focus-visible{
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
	border-radius: 3px;
}
.header-subtitle{
	display: block;
	font-size: 32px;
	margin: 11px 0 0 0;
	transition: all 0.3s;
}
.header-nav-mobile{
	display: none;
}
.header-nav-main{
	position: absolute;
	right: 0;
	bottom: 35px;
	height: 40px;
	text-align: right;
	z-index: 220;
	transition: all 0.3s;
}
.header-nav-main ul li{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	padding: 0 0 0 26px;
}
.header-nav-main ul li a{
	display: block;
	color: #222;
	line-height: 40px;
	text-decoration: none;
	transition: 0.3s;
}
.header-nav-main ul li a:focus-visible{
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
	border-radius: 3px;
}
.header-nav-main ul.sub-menu{
	display: block;
	position: absolute;
	top: calc(100% - 2px);
	left: 26px;
	width: 160%;
	margin: 0;
	visibility: hidden;
	opacity: 0;
	text-align: left;
	background: #F7F8F4;
	background-image: url("_images/background-texture-tint-1.jpg");
	box-shadow: rgba(50, 50, 50, 0.20) 0px 13px 27px -5px, rgba(0, 0, 0, 0.10) 0px 8px 16px -8px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
	z-index: 999;
}
.header-nav-main .menu-item:last-child ul.sub-menu{	
	max-width: 100%;
}
.header-nav-main .menu-item:hover ul.sub-menu,
.header-nav-main ul.sub-menu:hover{
	visibility: visible;
	opacity: 1;
}
.header-nav-main ul.sub-menu .menu-item{
	display: block;	
	padding: 0;
	border-right: none;
	line-height: 1.2;
}
.header-nav-main ul.sub-menu .menu-item a{
	height: auto;
	padding: 5px 26px;
	border-bottom: none;
	background: #F7F8F4;
	background-image: url("_images/background-texture-tint-1.jpg");
	font-size: 16px;
}
.header-nav-main ul.sub-menu .menu-item a:hover{
	background: #E6EAEB;
	background-image: url("_images/background-texture-tint-2.jpg");
}
.header--sticky{
	height: 40px;
	background: #E2E4E6;
	background-image: url("_images/background-texture-tint-3.jpg");
	border-top: 0;
}
.header--sticky .header-content{
	height: 40px;
	padding: 0;
}
.header--sticky .header-stave{
	bottom: 0;
}
.header--sticky .header-title{
	padding-top: 8px;
	font-size: 26px;
}
.header--sticky .header-subtitle{
	opacity: 0;
}
.header--sticky .header-nav-main{
	bottom: 0;
}

.content-hero{
	position: relative;
	width: 100%;
	height: 600px;
	overflow: hidden;
}
.hero-image-container{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 600px;
	overflow: hidden;
}
.hero-image{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-text-container{
	display: flex;
	align-items: center;
	height: 600px;
}
.hero-text{
	position: relative;
	width: 100%;
	padding: 10px 30px;
    max-width: 600px;
	background: rgba(0,0,0,0.65);
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.98);
    line-height: 1.6;
	color: #FEFEF8;
}
.hero-h1{
	font-size: 55px;
}
.hero-h2{
	font-size: 37px;
}
.content-hero--slim,
.content-hero--slim .hero-image-container,
.content-hero--slim .hero-text-container{
	height: 300px;
}

.taxonomy-links-wrap{
	width: 100%;
	text-align: center;
	padding: 40px 0 10px 0;
}
.taxonomy-link{
	margin: 0 7px;
	border-bottom: 2px solid transparent;
}
.taxonomy-link.selected.button{
	border-bottom-color: #222;
	color: #222 !important;
	background: #E2E4E6;
	background-image: url("_images/background-texture-tint-3.jpg") !important;
}

.col-container{
	position: relative;
	display: flex;
	align-content: space-around;
	flex-flow: row wrap;
	width: calc(100% + 40px);
	margin-left: -20px;
}
.col{
	position: relative;
	padding: 0 20px;
}
.col--25{
	width: calc(25% - 40px);
}
.col--40{
	width: calc(40% - 40px);
}
.col--33{
	width: calc(33% - 40px);
}
.col--50{
	width: calc(50% - 40px)
}
.col--60{
	width: calc(60% - 40px);
}
.col--75{
	width: calc(75% - 40px);
}
.breaker{
	display: block;
	width: 100%;
	height: 0;
}
.section-container:last-child .col--main-right{
	margin-bottom: 40px;
}
.content-section{
	padding: 40px 0;
}
.content-section.reduce-space-above{
	padding-top: 0;
}
.content-section.reduce-space-below{
	padding-bottom: 0;
}
.col--40 .content-section{
	padding: 20px 0;
}
.content-section.dark-background{
	padding: 60px 0;
	background: #E6EAEB;
	background-image: url("_images/background-texture-tint-2.jpg");
	background-size: cover;
	background-attachment: fixed;
}
.col--50 .content-section.dark-background,
.col--60 .content-section.dark-background{
	padding: 40px;
}
.col--40 .content-section.dark-background{
	padding: 20px;
}
.content-hero + .content-section,
.content-hero + .section-container .col-container .content-section:first-child{
	padding-top: 60px;
}
.content-section.no-content{
	padding-bottom: 0;
}
.content-section.no-content + .content-section,
.content-section.no-content + .section-container .col-container .content-section:first-child{
	padding-top: 0;	
}
.content-section p:first-child,
.content-section .wrap:first-child p:first-child,
.content-section .text-area p:first-child{
	margin-top: 0;
}

.content-title{
	border-bottom: 1px solid #d6d6d6;
	padding-bottom: 20px;
	margin-bottom: 30px;
}
.intro-text{
	font-size: 23px;
}
.divider{
	border-bottom: 1px solid #d6d6d6;
	line-height: 0;
}
.card-content{
	display: block;
}
.card-a{
	display: block;
	color: #222;
	text-decoration: none;
	transition: all 0.3s;
}
.card-img{
	width: 100%;
	height: auto;
}
.card-a:hover .card-img{
	opacity: 0.8;
	transition: all 0.3s;	
}
.card-text{
	position: relative;
	margin: -40px 0 1px 0;
	padding: 10px 16px 12px 16px;
	width: 75%;
	line-height: 1.3;
	background: #E6EAEB;
	background-image: url("_images/background-texture-tint-2.jpg");
	background-size: cover;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	transition: all 0.3s;
}
.dark-background .card-text{
	background: #E2E4E6;
	background-image: url("_images/background-texture-tint-3.jpg");
}
.card-title{
	font-size: 30px;	
}
.col--33 .card-title{
	font-size: 26px;
}
.col--50 .card-title{
	font-size: 24px;
}
.card-text p{
	margin-top: 10px;
}
.card-a:hover .card-text{
	margin: -50px 0 11px 0;	
}
.card-a:focus-visible {
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
	text-decoration: underline;
	border-radius: 3px;
}
.content-button{
	text-align: center;
}

.content-image-container,
.text-area-image{
	line-height: 0;
}
.text-area-image{
	float: left;
	width: 33%;
	margin: 6px 30px 20px 0;
}
.text-area-image.float-right{
	float: right;
	width: 33%;
	margin: 6px 0 20px 30px;
}
.content-quote .text-area-image{
	width: 20%;
	overflow: hidden;
	border-radius: 9999px;
}
.col--40 .text-area-image,
.col--40 .text-area-image.float-right{
	width: 100%;
	margin: 0 0 20px 0;
}
.col--40 .content-quote .text-area-image{
	width: 10%;
	margin: 6px 0 10px 20px;
}
.col--60 .text-area-image{
	width: 45%;
}
.col--60 .content-quote .text-area-image{
	width: 20%;
}
.content-img{
	width: 100%;
	height: auto;
}
.content-image-caption,
.wp-caption-text{
	display: block;
	padding: 4px 10px;
	background: #E6EAEB;
	background-image: url("_images/background-texture-tint-2.jpg");
	font-size: 14px;
	text-align: left;
	line-height: 1.1;
}
.content-text-and-image .content-image-container,
.content-text-and-image .text-area{
	margin-bottom: 20px;
}

.content-video{
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	line-height: 0;
}
.content-video iframe{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.content-social-a{
	display: inline-block;
	margin: 0 20px 20px 0;
	transition: all 0.3s;
}
.content-social-a:hover{
	opacity: 0.8;	
}
.content-social-a:focus-visible{
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
	border-radius: 3px;
}
.content-social-img{
	max-width: 30px;
	height: auto;
}

.content-quote{
	border-top: 1px solid #d6d6d6;
	border-bottom: 1px solid #d6d6d6;
	padding: 40px 60px;
	font-size: 22px;
}
.content-quote + .content-quote{
	border-top: none;
}
.col--40 .content-quote{
	padding: 20px 0 20px 20px;
	font-size: 18px;
}
.col--60 .content-quote{
	padding: 40px;
	font-size: 22px;
}
blockquote{
	line-height: 1.5;
	text-indent: -0.70em;
	quotes: "“" "”" "‘" "’";
}
blockquote::before{
    content: open-quote;
    display: inline;
}
blockquote::after{
    content: close-quote;
    display: inline;
}
.content-quote-name{
	text-align: right;
}
.content-credits .col{
	padding-right: 0;
}
.content-credits p{
	margin: 0;
}
.credit-name,
.credit-role{
	padding: 0 0 12px 0;
}
.credit-name{
	margin-left: -10px;
}
.image-link{
	padding-bottom: 30px;
	text-decoration: none;
	color: #222;
	transition: all 0.3s;
}
.image-link-title{
	display: block;
	font-size: 24px;
	font-weight: 600;
}
.col--33 .image-link p,
.col--60 .image-link p{
	font-size: 18px;
}
.image-link:focus-visible{
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
	border-radius: 3px;
}
.track{
	padding: 10px;
	background: #fff;
	border-bottom: 1px solid #d9d9d9;
}
.track-title{
	padding: 0 0 8px 0;
}
.image-group .col-container{
	width: calc(100% + 20px);
    margin-left: -10px;
	align-items: center;
}
.image-group .col{
	padding: 0 10px;
}
.image-group .col--25{
	width: calc(25% - 20px);
}
.image-group .col--33{
	width: calc(33% - 20px);
}
.image-group .col--50{
	width: calc(50% - 20px);
}

.nf-form-fields-required{
	display: none;
}

.footer-social{
	background: #E2E4E6;
	background-image: url("_images/background-texture-tint-3.jpg");
	background-size: cover;
	background-attachment: fixed;
	text-align: center;
	padding: 20px 0;
}
.footer-social-a{
	display: inline-block;
	vertical-align: middle;
	padding: 0 20px;
	transition: all 0.3s;
}
.footer-social-a:focus-visible{
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
	border-radius: 3px;
}
.footer-social-img{
	width: 30px;
	height: 30px;
}

.footer-content{
	background: #d9d9d9;
	background-image: url("_images/background-texture-tint-4.jpg");
	background-size: cover;
	background-attachment: fixed;
	font-size: 16px;
	padding: 20px 0;
}
.footer-content p{
	margin-top: 0;	
	line-height: 1;
}
.footer-content-left{
	display: inline-block;
	vertical-align: middle;
	width: 50%;
}
.footer-content-right{
	display: inline-block;
	vertical-align: middle;
	width: 50%;
	text-align: right;
}
.faded{
	opacity: 0.7;
}



/***** Blog *****/
.archive-post-container{
	padding: 0 20px 40px 20px;
}
.archive-post{
	display: block;
	padding: 20px;
	background: #E6EAEB;
	background-image: url(_images/background-texture-tint-2.jpg);
	text-decoration: none;
	overflow: hidden;
}
.archive-post:hover{
	opacity: 0.7;	
}
.archive-post_title{
	margin: 0 0 14px 0;
	font-size: 26px;
	line-height: 1.3;
	color: #000;
}
.archive-post_date{
	margin: 0 0 10px 0;
	font-size: 16px;
	color: #404040;
}
.archive-post_excerpt{
	font-size: 16px;
	color: #404040;
}
.archive-post_excerpt p{
	margin: 0;
}
.archive-post-nav{
	text-align: center;
}
.page-numbers{
	display: inline-block;
	vertical-align: middle;
	padding: 8px;
	background: #f2f2f2;
	color: #89bab9;
	text-decoration: none;
}
.page-numbers.current,
a.page-numbers:hover{
	background: #333;
	color: #fff;
}
.single-post-meta{
    display: inline-block;
    margin: 0 0 40px 0;
    border-bottom: 1px solid #d6d6d6;
    font-size: 15px;
}
.single-post-meta_date,
.single-post-meta_author{
	margin: 0;
}
.single-post-entry{
	line-height: 1.5;
	padding: 0 0 80px 0;
}
.single-post-nav{
	line-height: 2;
	padding: 0 0 80px 0;
}
.single-post-nav .screen-reader-text{
	display: none;
}
.single-post-nav a{
    color: #000;
}
.single-post-nav a:hover{
    color: #d6d6d6;
}


/***** Load Animations *****/

@-webkit-keyframes animate-fade-in{
  	0%    { opacity: 0; }
	100%  { opacity: 1; }
}
@-moz-keyframes animate-fade-in{
  	0%    { opacity: 0; }
	100%  { opacity: 1; }
}
@-o-keyframes animate-fade-in{
  	0%    { opacity: 0; }
	100%  { opacity: 1; }
}
@keyframes animate-fade-in{
  	0%    { opacity: 0; }
	100%  { opacity: 1; }
}
.header,
.header-stave,
.header-nav-main ul li,
.content-hero,
.taxonomy-links-wrap,
.content-section,
.footer{
	opacity: 0; /* animate to 1 */
	-webkit-animation: animate-fade-in 0.8s normal forwards ease-in-out;
	-moz-animation: animate-fade-in 0.8s normal forwards ease-in-out;
	-o-animation: animate-fade-in 0.8s normal forwards ease-in-out;
	animation: animate-fade-in 0.8s normal forwards ease-in-out;
}
.header-nav-main ul li:first-child{
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-o-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.header-nav-main ul li:nth-child(2){
	-webkit-animation-delay: 0.525s;
	-moz-animation-delay: 0.525s;
	-o-animation-delay: 0.525s;
	animation-delay: 0.525s;
}
.header-nav-main ul li:nth-child(3){
	-webkit-animation-delay: 0.550s;
	-moz-animation-delay: 0.550s;
	-o-animation-delay: 0.550s;
	animation-delay: 0.550s;
}
.header-nav-main ul li:nth-child(4){
	-webkit-animation-delay: 0.575s;
	-moz-animation-delay: 0.575s;
	-o-animation-delay: 0.575s;
	animation-delay: 0.575s;
}
.header-nav-main ul li:nth-child(5){
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	-o-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
.header-nav-main ul li:nth-child(6){
	-webkit-animation-delay: 0.625s;
	-moz-animation-delay: 0.625s;
	-o-animation-delay: 0.625s;
	animation-delay: 0.625s;
}
.header-nav-main ul li:nth-child(7){
	-webkit-animation-delay: 0.650s;
	-moz-animation-delay: 0.650s;
	-o-animation-delay: 0.650s;
	animation-delay: 0.650s;
}
.header-nav-main ul li:nth-child(8){
	-webkit-animation-delay: 0.675s;
	-moz-animation-delay: 0.675s;
	-o-animation-delay: 0.675s;
	animation-delay: 0.675s;
}
.header-nav-main ul li:nth-child(9),
.header-nav-main ul li:nth-child(10){
	-webkit-animation-delay: 0.7s;
	-moz-animation-delay: 0.7s;
	-o-animation-delay: 0.7s;
	animation-delay: 0.7s;
}
.content-hero{
	-webkit-animation-delay: 0.7s;
	-moz-animation-delay: 0.7s;
	-o-animation-delay: 0.7s;
	animation-delay: 0.7s;
}
.taxonomy-links-wrap,
.content-section,
.footer{
	-webkit-animation-delay: 0.9s;
	-moz-animation-delay: 0.9s;
	-o-animation-delay: 0.9s;
	animation-delay: 0.9s;
}

@media only screen and (max-width: 1400px) {
	
	.content-hero,
	.hero-image-container,
	.hero-text-container{
		height: 540px
	}
	.content-hero--slim,
	.content-hero--slim .hero-image-container,
	.content-hero--slim .hero-text-container{
		height: 290px;
	}
	.card-title{
		font-size: 26px;	
	}
	h2{
		font-size: 26px;
	}
	
}

@media only screen and (max-width: 1100px) {
	
	.header-title{
		font-size: 36px;
	}
	.header-subtitle{
		font-size: 30px;
		margin: 16px 0 0 0;
	}
	.header-nav-main ul li{
    	padding: 0 0 0 20px;
	}
	.header-nav-main ul li a{
		font-size: 18px;
	}
	.content-hero,
	.hero-image-container,
	.hero-text-container{
		height: 500px
	}
	.content-hero--slim,
	.content-hero--slim .hero-image-container,
	.content-hero--slim .hero-text-container{
		height: 284px;
	}
	.hero-h1{
		font-size: 50px;
	}
	.hero-h2{
		font-size: 33px;
	}
	.col-container{
		position: relative;
		display: flex;
		align-content: space-around;
		flex-flow: row wrap;
		width: calc(100% + 20px);
		margin-left: -10px;
	}
	.col{
		position: relative;
		padding: 0 10px;
	}
	.col--25{
		width: calc(25% - 20px);
	}
	.col--40{
		width: calc(40% - 20px);
	}
	.col--33{
		width: calc(33% - 20px);
	}
	.col--50{
		width: calc(50% - 20px)
	}
	.col--60{
		width: calc(60% - 20px);
	}
	.col--75{
		width: calc(75% - 20px);
	}
	.card-title{
		font-size: 20px;
	}
	.content-image-links p{
		font-size: 18px;
	}
	.taxonomy-link{
		margin: 0 4px;
	}
	.track-title{
		font-size: 17px;
	}
	
}

@media only screen and (max-width: 1000px) {
	
	.header-nav-main ul li{
    	padding: 0 0 0 16px;
	}
	.content-hero,
	.hero-image-container,
	.hero-text-container{
		height: 450px
	}
	.content-hero--slim,
	.content-hero--slim .hero-image-container,
	.content-hero--slim .hero-text-container{
		height: 270px;
	}
	.hero-h1{
		font-size: 48px;
	}
	.hero-h2{
		font-size: 30px;
	}
	.content-image-links .col--33{
		width: calc(100% - 20px);
	}
	.content-quote{
    	padding: 40px 20px;
	}
	
}

@media only screen and (max-width: 900px), screen and (orientation:portrait), screen and (hover: none) {
	
	.header-nav-main{
		display: none;
	}
	.header-nav-mobile{
		position: absolute;
		display: block;
		right: 4px;
		top: 79px;
		width: 180px;
		padding: 6px 20px;
		text-align: left;
		background: #F7F8F4;
		background-image: url("_images/background-texture-tint-1.jpg");
		box-shadow: rgba(50, 50, 50, 0.20) 0px 13px 27px -1px, rgba(0, 0, 0, 0.10) 0px 8px 16px -3px;
		z-index: 220;
		transition: all 0.3s;
	}
	.header--sticky .header-nav-mobile{
		top: 2px;
	}
	.header-nav-mobile:hover{
		box-shadow: rgba(50, 50, 50, 0.3) 0px 13px 27px -1px, rgba(0, 0, 0, 0.1) 0px 8px 16px -3px;
	}
	.nav-mobile_toggle{
		display: block;
		cursor: pointer;
		width: 180px;
		height: 24px;
	}
	.nav-mobile_text{
		display: inline-block;
		vertical-align: middle;
		font-size: 18px;
		line-height: 24px;
		transition: 0.4s;
	}
	.nav-mobile_icon{
		display: inline-block;
		vertical-align: middle;
    	float: right;
	}
	.menu-bar-1, .menu-bar-2, .menu-bar-3{
		width: 24px;
		height: 2px;
		background-color: #333;
		margin: 5px 0 0 0;
		transition: 0.4s;
		border-radius: 9999px;
		overflow: hidden;
	}
	/* Rotate first bar */
	.menu-open .menu-bar-1{
		-webkit-transform: rotate(-45deg) translate(-4px, 5px);
		transform: rotate(-45deg) translate(-4px, 5px);
		width: 27px;
	}
	/* Fade out the second bar */
	.menu-open .menu-bar-2{
		opacity: 0;
	}
	/* Rotate last bar */
	.menu-open .menu-bar-3{
		-webkit-transform: rotate(45deg) translate(-5px, -6px);
		transform: rotate(45deg) translate(-5px, -6px);
		width: 27px;
	}
	.nav-mobile_menu{
		display: none;
		position: relative;
	}
	.nav-mobile_menu ul li a{
		display: block;
		padding: 12px 0;
		font-size: 18px;
		text-decoration: none;
		color: #333;
		cursor: pointer;
	}
	.nav-mobile_menu ul li a:hover{
		text-decoration: underline;
	}
	.nav-mobile_menu ul li:first-child a{
		padding-top: 24px;
	}
	.nav-mobile_menu .sub-menu{
		display: none !important;
	}
	.col--25{
		width: calc(50% - 20px);
	}
	.image-link .col--25{
		width: calc(25% - 20px);
	}
	.card.col--25{
	    padding-bottom: 40px;
	}
	.content-image-links .col--33,
	.content-image-links .col--50{
		width: calc(100% - 20px);
	}
	.taxonomy-link{
		margin: 6px 4px;
		font-size: 17px;
	}

}

@media only screen and (max-width: 800px) {
	
	.wrap{
		padding: 0 28px;
	}
	h1{
		font-size: 40px;
	}
	.content-hero,
	.hero-image-container,
	.hero-text-container{
		height: 380px
	}
	.content-hero--slim,
	.content-hero--slim .hero-image-container,
	.content-hero--slim .hero-text-container{
		height: 240px;
	}
	.hero-text{
		max-width: 700px;
		line-height: 1.4;
	}
	.hero-h1{
		font-size: 40px;
	}
	.hero-h2{
		font-size: 27px;
	}
	.col--main-left,
	.col--main-right{
		width: calc(100% - 20px);
	}
	.col--main-right{
		padding-bottom: 40px;
	}
	.card-text,
	.card-a:hover .card-text{
		margin: -4px 0 0 0;
		width: calc(100% - 32px);
		box-shadow: none;
	}
	.testimonial-list .col--50{
		width: calc(100% - 20px)
	}
	.footer-social-a{
		padding: 20px;
	}
	
}

@media only screen and (max-width: 600px) {
	
	.header-nav-mobile,
	.nav-mobile_toggle{
		width: 150px;
	}
	.content-hero,
	.hero-image-container,
	.hero-text-container{
		height: 280px
	}
	.content-hero--slim,
	.content-hero--slim .hero-image-container,
	.content-hero--slim .hero-text-container{
		height: 210px;
	}
	.hero-text{
		max-width: 700px;
		line-height: 1.2;
	}
	.hero-h1{
		font-size: 33px;
	}
	.hero-h2{
		font-size: 22px;
	}
	.col--33,
	.image-group .col--33{
		width: calc(100% - 20px);
		margin-bottom: 20px;
	}
	.card{
		width: calc(100% - 20px);
	}
	.image-link .col--40{
		width: calc(25% - 20px);
	}
	.image-link .col--60{
		width: calc(75% - 20px);
	}
	.content-quote{
		font-size: 18px;
	}
	.faded{
		opacity: 1 !important;
	}
	.footer-content-left,
	.footer-content-right{
		width: 100%;
		text-align: center;
		padding: 10px 0;
	}
	
}

@media only screen and (max-width: 570px) {
	
	.header-nav-mobile,
	.nav-mobile_toggle{
		width: 140px;
	}
	
}

@media only screen and (max-width: 520px) {
	
	
	.header-nav-mobile{
		padding: 6px;
		width: 24px;
	}
	.nav-mobile_toggle{
		width: 24px;
		transition: all 0.3s;
	}
	.header-nav-mobile.menu-open,
	.nav-mobile_toggle.menu-open{
		width: 140px;
	}
	.nav-mobile_text{
		display: none;
	}
	.col--40,
	.col--60,
	.image-link .col--25,
	.image-link .col--40,
	.image-link .col--60,
	.image-link .col--75{
		width: calc(100% - 20px);
		margin-bottom: 10px;
	}
	
}

@media only screen and (max-width: 400px) {
	
	.header-title{
		font-size: 34px;
	}
	.header-stave{
		display: none;
	}
	
}

@media only screen and (max-width: 350px) {
	
	.header{
		position: relative;
	}
	.header-title{
		font-size: 32px;
	}
	.header-stave{
		display: none;
	}
	.main{
		padding-top: 0;
	}
	
}
