@media (min-width: 960px) {
	.page .hero.page-header h1 span:last-child:not(:only-child) {
		font-size: 1em;
		font-family:"nexa","helvetica neue",arial,helvetica,sans-serif;
		font-weight:lighter;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;
		letter-spacing:.075em;
		text-transform:uppercase;
	}
}

section > .container {
	max-width: 960px;
}

#vid-ph {
	width: 600px;
	max-width: 100%;
	margin: 1.5em auto 0;
	display: block;
} 

#the-practices {
	margin-bottom: 3em;
	padding-top: 3em;
}

/*
h2.standout{
    font-size: 2.2em;
    margin-bottom: 0;
}

p.standout-med{
    font-size: 1.2em;
    line-height: 1.5em;
}

.hero.page-header p.standout{
    margin-bottom: .5em;
    letter-spacing: .15em;
    letter-spacing: .05em;
}
*/

h2:first-of-type{
    margin-bottom: 0;
}

.hero.page-header .text-content{
    width: 1000px;
}

.hero.page-header {
	color:#58595b;
}

.page-header.hero.home{
    padding: 50vh 0 33vh;
}


@media (max-width: 769px) {
    .page-header.hero.home {
        padding: 20vh 0 7vh;
    }
}
.content-wrapper {
	padding:6.75em 0;
}

.content-wrapper .container {
	position:relative;
}

#video-container {
	width:570px;
	max-width:100%;
	margin:0 0 1.5em;
}

@media (min-width: 1261px) {
	#the-path-to-hope .text-content {
		padding-right: 300px;
		padding-left: 300px;
	}
}

#video-container .iframe-wrapper {
	box-shadow:0 2px 20px rgba(0,0,0,0.15);
}

@media (min-width: 1261px) {
	#video-container {
		position:absolute;
		right:0;
		margin:-9em 0 0 42px;
	}
}

.hero .text-content.dark .blockquote {
	color:#58595b;
}

.hero .text-content.light {
	text-shadow:0 0 15px rgba(0,0,0,0.44);
}

.hero .text-content.light .blockquote {
	color:#fff;
}

blockquote {
	width:570px;
	max-width:100%;
	margin:0 0 1.5em;
}

@media (min-width: 1261px) {
	blockquote {
		position:absolute;
		left:0;
		margin:-9em 0 0;
	}
}

img.icon.medallion-main {
	display:block;
	margin:auto;
}

@media (min-width: 1261px) {
	img.icon.medallion-main {
		position:absolute;
		top:50%;
		right:0;
		bottom:0;
		left:50%;
	}
}

.form-wrapper {
	text-align:center;
}

.infusion-form {
	margin-right:-8px;
	margin-left:-8px;
}

.infusion-field {
	padding-right:8px;
	padding-left:8px;
}

@media (min-width: 961px) {
	.infusion-field:nth-child(2),.infusion-field:nth-child(3) {
		width:50%;
		float:left;
	}
	
	.infusion-field:nth-child(4) {
		clear:both;
	}
}

.sr-only {
	position:absolute;
	left:-9000em;
}

#share-form {
	padding:3.375em 0;
}

.site-body {
	padding-bottom: 0;
}

.page-header {
	position: relative;
	overflow: hidden;
}

.page-header .bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.bg {
	background-attachment: scroll !important;
}

.page-header .container {
	z-index: 6;
	color: #fff;
}

.page-header .emphasized {
	color: #fff;
}


@-webkit-keyframes fade-in-out-a {
	0.001%, 33.3323% {
		z-index: 3;
	}
	0%, 100% {
		opacity: 0;
		-webkit-transform: scale(1);
	}
	8.22511%, 33.3333% {
		opacity: 1;
	}
	41.5584%, 66.6667% {
		opacity: 0;
		-webkit-transform: scale(1.3);
	}
	33.3343%, 100% {
		z-index: 1;
	}
}
@-webkit-keyframes fade-in-out-b {
	0.001%, 33.3323% {
		z-index: 2;
	}
	0%, 100% {
		opacity: 0;
		-webkit-transform: scale(1);
	}
	8.22511%, 33.3333% {
		opacity: 1;
	}
	41.5584%, 66.6667% {
		opacity: 0;
		-webkit-transform: scale(1.15);
	}
	33.3343%, 100% {
		z-index: 1;
	}
}
@-webkit-keyframes fade-in-out-c {
	0.001%, 33.3323% {
		z-index: 2;
	}
	0%, 100% {
		opacity: 0;
		-webkit-transform: scale(1);
	}
	8.22511%, 33.3333% {
		opacity: 1;
	}
	41.5584%, 66.6667% {
		opacity: 0;
		-webkit-transform: scale(1.3);
	}
	33.3343%, 100% {
		z-index: 1;
	}
}



@keyframes fade-in-out-a {
	0.001%, 33.3323% {
		z-index: 3;
	}
	0%, 100% {
		opacity: 0;
		transform: scale(1);
	}
	8.22511%, 33.3333% {
		opacity: 1;
	}
	41.5584%, 66.6667% {
		opacity: 0;
		transform: scale(1.3);
	}
	33.3343%, 100% {
		z-index: 1;
	}
}
@keyframes fade-in-out-b {
	0.001%, 33.3323% {
		z-index: 2;
	}
	0%, 100% {
		opacity: 0;
		transform: scale(1);
	}
	8.22511%, 33.3333% {
		opacity: 1;
	}
	41.5584%, 66.6667% {
		opacity: 0;
		transform: scale(1.15);
	}
	33.3343%, 100% {
		z-index: 1;
	}
}
@keyframes fade-in-out-c {
	0.001%, 33.3323% {
		z-index: 2;
	}
	0%, 100% {
		opacity: 0;
		transform: scale(1);
	}
	8.22511%, 33.3333% {
		opacity: 1;
	}
	41.5584%, 66.6667% {
		opacity: 0;
		transform: scale(1.3);
	}
	33.3343%, 100% {
		z-index: 1;
	}
}






.page-header .bg.a {
	z-index: 3;
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
	-webkit-transform-origin: 100% 0 0;
	transform-origin: 100% 0 0;
	-webkit-animation-name: fade-in-out-a;
	-webkit-animation-duration: 23100ms;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: -1900ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: none;
/* 	-webkit-animation: 23100ms linear -1900ms normal none infinite running fade-in-out-a; */
	animation: 23100ms linear -1900ms normal none infinite running fade-in-out-a;
}

.page-header .bg.b {
	z-index: 2;
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
	-webkit-transform-origin: 0 0 0;
	transform-origin: 0 0 0;
	
	-webkit-animation-name: fade-in-out-b;
	-webkit-animation-duration: 23100ms;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 5800ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: none;
/* 	-webkit-animation: 23100ms linear 5800ms normal none infinite running fade-in-out-b; */
	animation: 23100ms linear 5800ms normal none infinite running fade-in-out-b;
}

.page-header .bg.c {
	z-index: 1;
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
	-webkit-transform-origin: 100% 100% 0;
	transform-origin: 100% 100% 0;
	
	-webkit-animation-name: fade-in-out-a;
	-webkit-animation-duration: 23100ms;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 13500ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: none;
/* 	-webkit-animation: 23100ms linear 13500ms normal none infinite running fade-in-out-c; */
	animation: 23100ms linear 13500ms normal none infinite running fade-in-out-c;
}

main > section {
	padding: 4.5em 0;
    text-align: center;
}

@media (max-width: 960px) {
	main > section {
		padding: 3em 0;
	}
}

@media (min-width: 960px) {
	
	h2 small {
		font-size: .6em;
		text-transform: lowercase;
		text-indent: 1.2em;
		display: inline-block;
	}
	
	h2 .script {
		font-family: 'mrsheffield_proregular';
		font-size: 7em;
		text-transform: lowercase;
		letter-spacing: 0;
		display: block;
		overflow: visible;
	}
}

main > #the-case-for-hope {
	padding: 2.25em 0;
	text-align: center;
	background-color: #f4f3f6;
}

#the-case-for-hope .text-content {
	margin-bottom: 1.5em;
}

@media (min-width: 961px) {
	
	main > #the-case-for-hope {
		text-align: left;
		padding: 4.5em 0;	
	}
	
	#the-case-for-hope .video,
	#the-case-for-hope .text-content {
		width: 50%;
		display: inline-block;
		vertical-align: top;
	}
	
	#the-case-for-hope .text-content{
		margin-bottom: 0;
		padding-right: 75px;
	}
}

@media (min-width: 960px) {

	#the-case-for-hope h2,
	#medallion {
		margin-right: 1em;
		display: inline-block;
		vertical-align: baseline;
	}	
}

.video img {
	display: block;
	max-width: 100%;
}

.video.framed {
	padding: 2em;
}

.video.framed, .video img {
	box-shadow: 0 .25em 1em rgba(0,0,0,0.15);
}

#stories-of-hope {
	padding-top: 7.5em;
}

@media (max-width: 960px) {
	
	.page-header p.standout,
	#share-your-story p.standout,
	#stories-of-hope p.standout {
	    font-size: 1em;
	    line-height: 1.5em;
	    margin-bottom: 1.5em;
	}
	
	#stories-of-hope,
	#share-your-story,
	#the-path-to-hope {
		padding: 2.25em 0;
		text-align: center;
	}
}


section#choose-hope{
    background: #93d5d3;
}

/* About Section */

section#about{
    position: relative;
    padding: 0;
}

section#about:after{
    content: "";
    display: table;
    clear: both;
}

section#about .visual{
    position: relative;
    background: url(/wp-content/themes/thisislivinghope2018/assets/images/home-about-bg.jpg);
    background-position: 50% 50%;
    background-size: cover;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    height: 18em;
}

@media (min-width: 769px) {
    section#about .visual{
        width: 50%;
        height: auto;
        position: absolute;
    }
}

section#about .text-content{
    text-align: left;
    padding: 4em 2.5em;
    background: #e5c875;
}

@media (min-width: 769px) {
    section#about .text-content{
        width: 50%;
        float: right;
    }
}

section#about .text-content p{
    max-width: 490px;
}

section#about .action{
    display: inline-block;
    margin: .25em;
}

/* Stories */

section.stories{
    padding: 0;
}

section.stories .feed{
    margin: 0;
}

section.stories .feed > section{
    padding: 0;
    position: relative;
    width: 50%;
    float: left;
    margin-bottom: 1em;
}

@media (max-width: 769px) {
    section.stories .feed > section:nth-child(odd){
        clear: both;
    }
}

@media (min-width: 769px) {
    section.stories .feed > section{
        width: 25%;
    }
}

section.stories .feed > section .visual{
    margin-bottom: 0;
}

section.stories .feed > section .visual img{
    position: relative;
}

section.stories .feed > section .visual img.placeholder{
    display: none;
}

section.stories .feed > section h3.title{
    font-family: baskerville,Athelas,Palatino,Garamond,Georgia,Cambria,"Times New Roman",Times,serif;
    text-align: center;
    padding: .5em;
}

@media (min-width: 769px) {
    section.stories .feed > section h3.title{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 20;
        padding: 0;
        width: 100%;
        height: 100%;
        font-family: baskerville,Athelas,Palatino,Garamond,Georgia,Cambria,"Times New Roman",Times,serif;
        opacity: 0;
        visibility: hidden;
        transition: all 0.33s ease;
        -moz-transition: all 0.33s ease;
        -ms-transition: all 0.33s ease;
        -o-transition: all 0.33s ease;
        -webkit-transition: all 0.33s ease;
    }
}

@media (min-width: 769px) {
    section.stories .feed > section:hover h3.title{
        opacity: 1;
        visibility: visible;
    }
    
    section.stories .feed > section.Resilience:hover h3.title{
        background: rgba(102, 45, 145, 0.7);
    }
    
    section.stories .feed > section.Joy:hover h3.title{
        background: rgba(174, 48, 145, 0.7);
    }
    
    section.stories .feed > section.Surrender:hover h3.title{
        background: rgba(52,121,153, 0.7);
    }
    
    section.stories .feed > section.Stillness:hover h3.title{
        background: rgba(199,185,162, 0.7);
    }
    
    section.stories .feed > section.Grief:hover h3.title{
        background: rgba(97,97,99, 0.7);
    }
    
    section.stories .feed > section.Honesty:hover h3.title{
        background: rgba(231,201,130, 0.7);
    }
    
    section.stories .feed > section.Curiosity:hover h3.title{
        background: rgba(143,215,213, 0.7);
    }
    
    section.stories .feed > section.Forgiveness:hover h3.title{
        background: rgba(203,159,119, 0.7);
    }
    
}

@media (min-width: 769px) {
    section.stories .feed > section h3.title a{
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        font-size: 1.5em;
        line-height: 1em;
        color: #fff;
        padding: 1em;
        transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
}


section#hashtag .container{
    position: relative;
}

section#hashtag .text-content{
    position: relative;
    z-index: 5;
}

section#hashtag h2{
    color: #347396;
}

section#hashtag .visual{
    position: absolute;
    width: 200px;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -2em;
    opacity: .1;
}

section#choose-hope-now .container{
    max-width: 1090px;
}

section#choose-hope-now .visual{
    max-width: 350px;
    margin: 0 auto;
}

@media (min-width: 769px) {
    section#choose-hope-now .visual{
        max-width: 350px;
        margin-right: 6em;
        float: left;
    }
}

section#choose-hope-now .visual img{
    width: 170px;
    margin-bottom: 1em;
}

@media (min-width: 769px) {
    section#choose-hope-now .text-content{
        text-align: left;
    }
}

section#choose-hope-now .text-content h2{
    padding-top: 1em;
    color: #347396;
}