/* doctype css */

/* debug rules */
/*header .title { border: 1px solid #000; }*/
/*.section_subgroup { border: 1px solid #0f0; }*/
/*.content { border: 2px dashed #888; }*/
/*nav .links_container { border: 1px dotted #000; }*/
/*nav .links_container p { border: 1px solid #ccc; }*/
/*h2 { border: 1px solid #f00; }*/
/*h3 { border: 1px solid #00f; }*/


:root {
	--form-column-1:         150px;
}










.bg_light_blue {
	background-color: #f1f1f1;
}




nav {
	--nav-menu-height: 255px;
}





header {

	--title-font-size:       1rem;
	--title-font-size-h1:    3rem;
	--title-width:            55%;
	--title-margin-top:      45px;
	--title-margin-bottom:   45px;
	--title-max-width:      650px;

	--img-scale: 1;

	/* phone 652x468 */
	--img-phone-left:         calc( 100% + 60px );
	--img-phone-width:       425px;
	--img-phone-height:       calc( var(--img-phone-width) * 0.717 );
	--img-phone-bottom:       calc( var(--img-phone-height) * -.36 );

	background-color: var(--adobe-red);
	color: #fff;
	margin-bottom: var(--section-spacing);
	overflow: hidden;
	position: relative;
}
header .content {
	position: relative;
}
header .title {
	font-size: var(--title-font-size);
	margin-top: var(--title-margin-top);
	margin-bottom: var(--title-margin-bottom);
	max-width: var(--title-max-width);
	position: relative;
	width: var(--title-width);
}
header .title h1 {
	font-size: var(--title-font-size-h1);
	line-height: 1.1;
	margin-bottom: 10px;
}
header .title h2 {
	color: #fff;
	font-size: 1.8em;
	line-height: 1;
	margin: 0 0 1em 0;
}
header .title p {
	font-weight: 400;
	font-size: 1.1em;
	line-height: 1.3;
}
header img {
	position: absolute;
}
header img.phone {
	left: var(--img-phone-left);
	bottom: var(--img-phone-bottom);
	transform-origin: left center;
	width: calc( var(--img-phone-width) * var(--img-scale) );
}

@media screen and (max-width: 1100px){
	header {
		--img-phone-left: calc( 100% + 20px );
	}
}
@media screen and (max-width: 960px){
	header {
		--title-max-width: 450px;
		--img-phone-left: 102%;
	}
}
@media screen and (max-width: 900px){
	header {
		--title-font-size-h1: 2.7em;
		--img-scale: .85;
	}
}
@media screen and (max-width: 800px){
	header {
		--title-font-size: .9rem;
		--title-margin-top: 35px;
		--title-margin-bottom: 35px;
		--img-scale: .75;
		--img-phone-bottom: calc( var(--img-phone-height) * -.28 );
	}
}
@media screen and (max-width: 725px){
	header {
		--title-font-size: .85rem;
	}
	header .title h1 {
		font-size: 2.6em;
	}
}
@media screen and (max-width: 580px){
	header {
		--title-margin-top: 25px;
		--title-margin-bottom: 25px;
		--img-scale: .7;
		--img-phone-left: 80%;
	}
	header .title h1 {
		font-size: 2.3em;
	}
}
@media screen and (max-width: 475px){
	header {
		--img-scale: .5;
		--img-phone-left: 95%;
		--img-phone-bottom: calc( var(--img-phone-height) * -.18 );
	}
}
@media screen and (max-width: 415px){
	header {
		--img-scale: .45;
		--img-phone-left: 110%;
	}
}


















/* resource overrides of global_styles.css */
.resource_container.featured .resource {
	max-width: 900px;
	box-shadow: none;
}
.resource_container.featured .resource a.thumbnail::after {
	height: 70px;
	width: 70px;
	margin: -35px 0 0 -35px;
}
.resource_container.featured .video a.thumbnail:hover img {
	transform: scale(1.05);
}
.resource_container.featured .resource {
	margin-bottom: 0;
}









.walkthrough {
	background-color: #ddf5f3;
	margin-bottom: var(--section-spacing);
}
.walkthrough .section_subgroup {
	align-items: center;
	background-color: #fff;
	display: flex;
	padding: calc( var(--section-spacing) / 2 );
	margin: var(--section-spacing) 0 0 0;
}
.walkthrough .section_subgroup a.thumbnail {
	width: 50%;
	display: block;;
	position: relative;
	overflow: hidden;
}
.walkthrough .section_subgroup a.thumbnail::before {
	content: '';
	display: block;
	padding-top: 56.25%;
}
.walkthrough .section_subgroup a.thumbnail::after {
	background: url(../../resource-hub-assets/images/icons/interactive.svg) no-repeat 0 0;
	background-size: cover;
	content: '';
	display: block;
	height: 40px;
	left: 50%;
	margin: -20px 0 0 -20px;
	position: absolute;
	top: 50%;
	transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	width: 40px;
}
.walkthrough .section_subgroup a.thumbnail img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: transform .3s;
}
.walkthrough .section_subgroup a.thumbnail:hover::after {
	transform: scale(1.3);
}
.walkthrough .section_subgroup a.thumbnail:hover img {
	transform: scale(1.1);
}
.walkthrough .section_subgroup .info {
	flex: 1;
	padding-left: 90px;
	text-align: left;
}

@media screen and (max-width: 1075px) {
	.walkthrough .section_subgroup { padding: 25px; }
	.walkthrough .section_subgroup .info { padding-left: 40px; }
}

@media screen and (max-width: 800px) {
	.walkthrough .section_subgroup { display: block; }
	.walkthrough .section_subgroup a.thumbnail { width: 100%; margin-bottom: 25px; }
	.walkthrough .section_subgroup .info { width: auto; flex: none; text-align: center; padding-left: 0; }
}

@media screen and (max-width: 615px) {
	.walkthrough .section_subgroup { margin-top: 50px; }
}