header.lander{
 	padding-top: 7rem;
    background-image: url(../jpg/newsandresources-banner.jpg);
    background-position: center;
    padding-bottom: 1rem;
}

	header.lander .title{
		font-size: 3rem !important;
		animation: none !important
	}

header.min{
	padding-top: 6.5rem;
	padding-bottom: 0rem;
}

section .nav {
	position: sticky;
	text-align: center;
	margin-right: 2rem;
	top: 7rem;
    height: calc(90vh - 7rem);
    z-index: 15;
	max-width: 12rem;
	flex-shrink: 0}

	section .nav>a{
		width: 100%;}

	section .nav button{
		font-size: 1.1rem;
		width: 100%;
		box-shadow: var(--shadow-light);
	    margin: 0.5rem 0;
	    min-height: 3rem;}

	 section .nav button.alt, section .nav button:hover{
	 	box-shadow: none;}

	 section .nav label{
		font-size: 1.25rem; margin: 0.5rem;
		text-align: left;
	    font-family: var(--head);
	    text-transform: uppercase;
	    text-shadow: var(--text-shadow-light2) !important;
	 }

	 section .nav label:after{
		content: ' Resources';
	 }

section .navback{
	display: none;
}

section.lander.first{
	display: flex;
	padding-top: 1.5rem;
}

.content {
	display: flex;
	max-width: 1600px;
	margin: auto;
	width: 100%;
}
	.content.blog{
		max-width: 1200px;
	}

.nr{
	text-align: left;
	width: 100%;
}
	.nr.flex{
		display: flex;
	}

	.nr button{box-shadow: none !important;}
	.nr .container a:hover {text-decoration: none;}

/*document viewer page*/
.nr .pdf{
    width: 100%;
    height: calc(100vh - 7.5rem);
    width: 100%;
    display: flex;
    flex-direction: column;
    top: 6rem;
    position: sticky;
}

	.pdf .titlebox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0.5rem; margin-top: -0.5rem;

	}

	.pdf .titlebox .title.sub{
		text-align: left;
		margin: 0;
	}

	.pdf iframe{
		width: 100%;
	    height: 100%;
	    animation: show 0.3s ease;
	    border: 1px solid var(--gray3);
	    background-color: var(--d-gray3);
	    outline: 0 !important; margin: 0 !important;
	    border-radius: var(--radius-big);
	}

.nr .relatedbox{
	padding-left: 1.5rem;
    width: 30%;
    min-width: 280px;
}

	.relatedbox .subtitle{
		font-weight: 600;
		text-align: left;
		margin: 0 0.5rem;
	}

	.relatedbox .img-wrap{
		max-height: 18rem;
	    overflow: hidden;
	}

	.relatedbox .card{
		margin: 1rem 0;
		width: 100%;
		padding: 0;
		box-sizing: border-box;
	}

	.relatedbox .img-wrap img{
		width: 100%;
	}

	.relatedbox .card-text{
		padding: 1rem;
		padding-top: 0;
		box-sizing: border-box;
	}

	#request{
		padding: 1rem;
		margin-top: 0.5rem;
		text-align: left;
	}

	#request button, #request label{
		margin-top: 0.5rem;
	}

	#request .address, #request .address2{
		display: flex;
	}

	#state-holder, #request .num{
		margin-left: 1rem;
	}

	#request .num {
		width: 65% !important;
	}

	#request-back{
		cursor: pointer;
	}

/*index pages*/
.nr.resources{
	margin-right: -1.5rem;
}

.nr .container{
	max-width: none;
	width: 100%;
	justify-content: flex-start;
}

.nr .container a, .nr .container>article {
    flex-basis: calc(20% - 1.5em);
    margin-right: 1.5rem;
    margin-bottom: 1rem;
    cursor: pointer;
}
	.nr .container article{
		width: 100%;
		background-color: white;
		border-radius: var(--radius-small);
		box-shadow: var(--shadow);
		overflow: hidden;
		transition: var(--ease);
		visibility: hidden;
		animation: slide-up-origin ease both;} .nr .container article.appear{ 
			animation-duration: 0.3s;
			visibility: visible;}

		.nr .container article label{text-transform: uppercase;}

		.nr .container article:hover {
			box-shadow: var(--shadow-light);
		}

		.nr .container article:hover label{
			color: var(--blue1);
		}

		.nr .container article .cover {
			height: 18rem;
		   	width: 100%;
		   	overflow: hidden;
		}

		.nr .container article .cover img{
			width: 100%; height: auto;
		}

		.nr .container article .cover.wide img{
			width: 175%;
    		margin-left: -5rem;
		}

		.nr .container article .textwrapper{
			padding: 0 1rem;
			padding-bottom: 0.5rem;
		}

/*** Blog styling ***/
.blogpost{
	width: 100%;
    border-radius: var(--radius-big);
    padding: 1.5rem;
    border: 1px solid var(--gray3);
    background: white;
    box-sizing: border-box;
}

	.blogpost .flexchip{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 2rem;
	}

	.blogpost .blog-image{
		width: 100%;
		margin: 0.5rem 0;
	}

	.blogpost .center {
		display: block;
		margin: auto;
	}

	.blogpost .blog-body{
		font-size: 1.25rem;
		line-height: 1.25;
		text-align: left;
	}

	.blogpost .icon{
		font-size: 6rem;
		color: var(--green2);
		font-weight: 900;
		margin: 2rem 0;
		margin-right: 3rem;
	}

	.blogpost .video{
		width: 100%;
	    height: calc((100vw - 16rem) * 0.56);
	    max-height: 550px;
		border-radius: var(--radius-big);
	    overflow: hidden;
	    display: flex;
	    margin: 0 auto;
	}

	.blogpost .ulist li{
		list-style: initial; /*reset unordered list bullets*/
	}

/*CRISP QUARTERLY*/
cq{
	width: 100%;
	background-color: white;
	box-sizing: border-box;
	border-radius: var(--radius-big);
	box-shadow: var(--shadow);
	padding: 0.75rem 1.5rem;
	text-align: left;
	margin-top: -1rem;
}

.cq-title{
	display: flex;
    justify-content: space-between;
}
	.cq-title button{
		box-shadow: none;
	}

	.cq-title label, .cq-title .title {
		margin: 0;
	}

	.cq-title .button-holder{
		display: flex;
	    align-items: flex-start;
	    flex-wrap: wrap;
	    justify-content: flex-end;
	}

	.cq-title .button-holder button{
		margin-left: 0.5rem;
	}

	.cq-title .button-holder .mobile{
		display: none;
	}

	.cq-title .titlewrap{
		display: flex;
    	align-items: center;
	}

	.cq-title .titlewrap a{
		display: block;
	}

	.cq-title .zmdi{
		width: 1.5rem;
	    text-align: center;
	    font-size: 1.5rem;
	    margin-right: 0.25rem;
	}

cq-holder {
    display: flex;
    margin:0.5rem 0;
    width: 100%;
    align-items: stretch;
    height: calc(100vh - 15rem);
    min-height: 25vw;
    border: 1px solid var(--l-gray);
    max-height: 800px;
    background-image: linear-gradient(180deg, var(--l-gray),var(--l-gray));
    border-radius: var(--radius-big);
}

	cq-holder .embed-wrapper {
	    width: 100%;
	    background-color: var(--gray1);
	    display: flex;
	    border-radius: var(--radius-big);
	    overflow: hidden;
	}

	cq-holder iframe{
	    width: 100%;
	    border: 0;
	    outline: 0;
	    height: 100%;
	}

	.toc {
	    padding: 1rem 0;
	    padding-left: 1rem;
	    width: 12rem;
	    align-self: stretch;
	    box-sizing: border-box;
	    overflow: scroll;
	}

	.toc label {
		line-height: 1.2;
		text-transform: uppercase;
		font-weight: 700;
		margin-top: 0;
	}

	.toc .toc-link {
	    padding: 0.75rem 0;
	    padding-right: 0.75rem;
	    cursor: pointer;
	    font-weight: 600;
	    color: var(--gray1);
	    border-bottom: 1px solid var(--gray3);
	    transition: var(--ease);
	}

		.toc .toc-link:hover{
		    border-color: 1px solid var(--d-gray2);
		    color: var(--d-gray2);
		}
		.toc .toc-link:last-of-type{
			border-color: transparent;
		}

.issues{
	margin: 1rem 0;
}

	.issues>.subtitle{
		font-weight: 600;
	}

	.more{
	    display: flex;
	    margin-left: -1.5rem;
	    padding: 0 1.5rem;
	    width: calc(100% + 3rem);
	    box-sizing: border-box;
	    justify-content: flex-start;
	    align-items: flex-start;
	    overflow-x: scroll;
	}

	.more>a, .more>.request{
		display: block;
	    flex-basis: 18rem;
	    background-color: white;
	    flex-shrink: 0;
	    border-radius: var(--radius-big);
	    overflow: hidden;
	    border: 1px solid var(--gray3);
	    margin-right: 1rem;
	    transition: var(--ease);
	}

	.more>.request{
		margin-top: 0 !important;
		max-height: 24rem;
		overflow-y: scroll;
		border: 2px solid var(--gray3);
	}

	.more>a:hover{
		border-color: var(--gray2);
	}

	.more>.request:hover{
		border-color: var(--blue2);
	}

	.more>.request:hover #greenhover{
		color: var(--green2);
	}

	.more>a .cover{
		height: 21rem;
		overflow: hidden;
	}

	.more>a .cover img{
		width: 100%;
	}

	.more>a .textwrapper{
		margin: 0.5rem 0.75rem;
	}

	.request button{
		box-shadow: none; 
	}

#crispq {
	line-height: 0.3;
	padding-top: 1.5rem;
}
	#the{
		font-weight: 300;
	    margin-left: -7.25rem;
	    margin-right: -0.25rem;
	    vertical-align: top;
	    font-size: 1.1rem !important;
	    font-style: italic;
	    text-transform: lowercase !important;
	}
	#crisp{
		vertical-align: top;
		font-size: 2.25rem;
	}
	#qt{
		font-size: 5.2rem;
		font-weight: 300;
		text-transform: none;
		letter-spacing: 0.3rem;
		font-family: "Open Sans Condensed", Arial, Sans-Serif !important;}


@media screen and (max-width: 1600px), screen and (max-device-width: 1600px) {
	.nr.resources{
		margin-right: -1rem;
	}

	.nr .container a, .nr .container>article {
	    flex-basis: calc(25% - 1rem);
	    margin-right: 1rem;
	}
}

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

	section .nav {
		max-width: 10rem;
	}

	.nr .container a, .nr .container>article {
	    flex-basis: calc(33% - 1rem);
	}

	.content .relatedbox{
		padding-left: 1rem;
	    margin-right:-1.5rem;
	    min-width: 250px;
	}

	.nr .container article .cover {
	    height: 21rem;
	}

}

@media screen and (max-width: 1024px), screen and (max-device-width: 1024px) {
	.nr .container a, .nr .container>article {
	    flex-basis: calc(50% - 1rem);
	}

	.nr .container article .cover {
	    height: 18rem;
	}
}

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


	section .nav {
		margin-right: 1.5rem;
	}
	section .nav button{
		font-size: 1rem;
	}

	.content .relatedbox{
		display: none;
	}

}

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

	.content{
		flex-direction: column;
	}

	section .nav{
		top: 0;
		max-width: none;
	    height: auto;
	    margin: 0; margin-top: -1rem; margin-bottom: 1rem;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: center;
	    position: relative;
	}


	section .nav>a{
		min-height: 3rem;
		width: 32%;
    	margin: 0.25rem 0.5%;
    }

    section .nav button{
		height: 100%;
		margin: 0;
	}

	section .nav label{
		width: 100%;
		margin: 0.5rem 1.5rem;
	}

	.nr .container{
		justify-content: space-between;
	}

	.nr .container a, .nr .container>article {
	    flex-basis: calc(50% - 0.5rem);
	    margin-right: 0;
	}

    .nr .pdf{
	    margin-top: 0;
	}

	.blogpost .video{
		height: 50vw;
	}

	.content.cq{
		flex-direction: row;
	}

	.toc{
		display: none;
	}

}

@media screen and (max-width: 650px), screen and (max-device-width: 650px) {
	header.lander{
 		padding-top: 5rem;
 	}

 	header.lander .title{
		font-size: 2.25rem !important;
	}

}

@media screen and (max-width: 550px), screen and (max-device-width: 550px) {
	cq{
		padding: 1rem;
		padding-top: 0.5rem;
	}

	.cq-title {
		align-items: center;
	}

	    .cq-title .button-holder .desktop{
			display: none;
		}

		.cq-title .button-holder .mobile{
			display: block;
		}

	cq-holder{
		height: calc(95vh - 20rem);
	}

	.issues{
    	margin: 0.5rem 0;
	}

	.issues>.subtitle{
		text-align: center;
	}

	.more>.request{
		max-height: none;
    	margin-bottom: 1rem;
	}

}

@media screen and (max-width: 450px), screen and (max-device-width: 450px) {
	section .nav>a{
		width: calc(50% - 0.5rem)
    }

    .nr .container a, .nr .container>article {
	    flex-basis: 100%;
	    max-width: 360px;
	    margin: auto;
	    margin-bottom: 1rem;
	}

	section.first.lander.template{
		padding-left: 0; padding-right: 0; padding-bottom: 0;
		overflow: hidden;
	}

	section .nav.template, .download-button{
		display: none;
	}

	header.min{
		padding-top: 4.5rem;
	}

	section .navback{
		display: flex;
		justify-content: space-between;
		margin: 0 0.5rem;
		align-items: center;
		margin-top: -1rem;
		margin-bottom: 0.5rem;
	}

	section .navback button{
		border-radius: 2rem;
		box-shadow: none !important;
	}

	section .navback button.alt{
		font-weight: 700;
	}

	section .navback button .zmdi{
		margin-left: -0.5rem;
		margin-right: 0.25rem;
	}

	.pdf .titlebox {
		margin-top: 0
	}

	.blogpost .flexchip{
		text-align: center;
		flex-direction: column;
		margin: 0.5rem;
	}

		.blogpost .blog-image{
			width: calc(100% + 3rem);
    		margin-left: -1.5rem;
		}

		.blogpost .blog-body{
			font-size: 1.1rem;
		}

		.blogpost .icon{
			font-size: 4.5rem;
			margin: 0;
		}

}