.view{
	left: 0; top: 0;
	display: none;
	position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(31, 31, 31, 0.375);
    z-index: 16;
    overflow-y: scroll;
}

.popup.video{
	max-width: 1000px;
    width: calc(90% - 2rem);
    box-sizing: border-box;
    margin: auto;
    margin-top: 15vh;
    color: var(--d-gray);
    background-color: white;
}

.popup.video .titlebar{
	display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}
.popup.video .titlebar .title{
	margin: 0.5rem 0;
}

.video-wrapper{
	overflow: hidden;
    border-radius: var(--radius-big);
}

.video-wrapper iframe{
	border: none;
    background-color: var(--d-gray);
}

.video-play{
	display: inline-block;
}

button.video-play{
	margin: 1.5rem auto;
}

.play-overlay{
    margin-left: 1.5rem;
    position: absolute;
    text-align: center;
    font-size: 6rem;
    cursor: pointer;
    color: white;
    opacity: 0.9;
    transition: var(--ease);
}
	.play-overlay:hover{
		opacity: 1;
	}

header{
	padding-top: 8rem;
	padding-bottom: 6rem;
	background-image: var(--gradient2);
}
	header .textwrapper{
		max-width: 1000px;
		padding: 1rem;
		box-sizing: border-box;
	}

	header .title{
		text-shadow: var(--text-shadow-light);
	}

	header .subtitle{
		margin-top: 0.75rem;
		padding-top: 0 !important;
	}

section.first .container{
	max-width: 1440px;
	justify-content: center !important;
	margin-top: -6.5rem !important;
}

.story-left, .story-right{
	width: 50%;
}	
	.story-left .story:first-of-type{margin-top: 0 !important;}
	.story-right .story:first-of-type{margin-top: 0 !important;}

.story{
	width: calc(100% - 1.5rem);
	box-sizing: border-box;
	margin: 1.5rem 0.75rem;
	text-align: left;
	overflow: hidden;
	background-color: white;
	box-shadow: var(--shadow);
	border-radius: var(--radius-big);
	transition: var(--ease);
}

.story-pic{
	display: none;
	height: 13.5rem;
	overflow: hidden;
	margin-bottom: -0.5rem;
}
	.story-pic img{
		width: 100%;
		margin-top: -1.5rem;
	}

.story-body{
	padding: 1rem 2rem;
	padding-bottom: 1.5rem;
}

.client-logo{
	display: none;
	padding: 0.5rem 0;
}
	.client-logo img{max-height: 4.5rem; max-width: 100%;}
	.client-logo.square img{max-height: 7.5rem;}

.client.title{
	text-transform: none;
	margin-top: 0; margin-bottom: 1rem;
}


.story .fa-quote-left{
	font-size: 1.5rem;
	color: var(--gray1);
	transition: var(--ease);
	margin-left: -0.25rem;
}

.story .text{
	margin: 0.5rem 0;
	font-weight: 600;
}
	.story .text:after{
		content:'”';
		font-size: 1.2rem;
		font-weight: 700;
	}

.person-holder{
	display: flex;
	align-items: flex-end;
	}

	.person-holder .divider{
		display: none;
	}

	.person-holder .mug{
		margin-top: 1rem;
		width: 6rem; height: 6rem;
		margin-left: -0.25rem;
	    border: 3px solid var(--blue2);
	    border-radius: 50%;
	    overflow: hidden;
	    flex-shrink: 0;
	}
		.mug img{width: 100%;}

	.person-holder .person{
		margin: 1rem 0.75rem;
		font-size: 1.2rem;
	}

.cta{
	display: none;
}
	.cta button{
		border-radius: 5rem;
	    box-shadow: none !important;
	    margin-top: 1rem;
	   	margin-left: -0.25rem;
	   	font-size: 1.2rem;
	}

	.cta button .zmdi{
		font-weight: 700;
    	margin-right: -0.25rem;
    	margin-left: 0.25rem;
	}


.story:hover{
	box-shadow: var(--shadow-light);
}
	.story:hover .fa-quote-left{
		color: var(--blue2);
	}

/* different types of stories*/
	
	.story.withlogo .client-logo{
		display: block;
	}

	.story.notitle .client.title{
		display: none;
	}
		.story.notitle .client-logo{
			padding-bottom: 1rem;
		}

	.story.bigtext .text{
		font-size: 1.75rem;
	}

	.story.highlight{
		border: 3px solid var(--green3);
		box-shadow: none !important;
	}
		.story.highlight:hover{
			border-color: var(--green4);
		}

	.story.noquote .fa-quote-left{
		display: none;
	}
		.story.noquote .text{
			margin-top: 1rem;
		}
		.story.noquote .text:after{content: '';}

	.story.withpic .story-pic{
		display: block;
	}

	.story.nomug .person-holder{
		display: block;
	}
		.story.nomug .mug{
			display: none;
		}
		.story.nomug .divider{
			display: inline-block;
		}
		.story.nomug .person-holder .person{
			margin: 0;
		}

	.story.withcta .cta{
		display: block;
	}

	.story.noperson .person-holder{
		display: none;
	}

	/*custom microadjustments */
	#oneand2{
		margin-top: -6rem;
	}

	#crmm{
		margin-bottom: 0.5rem;
	}

	@media screen and (max-width: 650px), screen and (max-device-width: 650px){

		header{
			padding-top: 5.5rem;
		}

		header .title{
			font-size: 3rem !important
		}


		.story-left, .story-right{
			width: 100%;
			max-width: 550px;

		}
		.story{
			width: calc(100% - 2rem);
			margin: 1rem;
		}
	}

	@media screen and (max-width: 450px), screen and (max-device-width: 450px){

		.popup.video{
			margin-top: 20vh;
			width: 100%;
		}

		.story-pic{
			min-height: 9rem;
		}

		.cta button{
			font-size: 1.1rem;
		}

		.story.bigtext .text{
			font-size: 1.5rem;
		}

		.person-holder .person{
			margin: 0.75rem;
			margin-right: 0;
			font-size: 1.1rem;
		}

		.story{
			width: 100%;
			margin: 1rem 0;
		}
	}