/* doctype css */

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



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;
		/*margin-right: calc( (100% + var(--title-width)) * -.92 );*/
	}
}
@media screen and (max-width: 475px){
	header {
		--img-scale: .5;
		--img-phone-left: 100%;
		--img-phone-bottom: calc( var(--img-phone-height) * -.18 );
	}
	header .title h2 {
		margin-right: -90%;
	}
}










section.bg_light_blue {
	padding-bottom: calc( var(--section-spacing) * .25 );
	padding-top: calc( var(--section-spacing) * .75 );
	background-color: #f1f1f1;
}










@media screen and (max-width: 900px) {

	h2 { font-size: 2.1rem; margin: 30px 0 20px 0; }
	h3 { font-size: 1.6rem; margin-bottom: 12px; }

}


@media screen and (max-width: 500px) {

	h2 { font-size: 1.6rem }
	h3 { font-size: 1.4rem; }

}