/* doctype css */

:root {

	--form-column-1: 150px;

	--adobe-sign-color: #574bcc;

}










.content.intro {
	font-size: 1.4rem;
	line-height: 1.2;
	font-weight: 300;
	margin-top: 2em;
}
.content.intro h3 {
	font-size: 1.6rem;
}
@media screen and (max-width: 500px) {
	.content.intro {
		font-size: 1.3rem;
	}
	.content.intro h3 {
		font-size: 1.4rem;
	}
}









nav {
	/* height of the opened menu */
	--nav-menu-height: 290px;
}









header {

	--title-font-size: 16px;

	background-color: var(--adobe-sign-color);
	background-image: linear-gradient(#dfbffe 55%, #ac5dfc);
	color: #000;
	font-size: var(--title-font-size);
	margin-bottom: 2em;
	overflow: hidden;
}
header h1 {
	font-size: 3em;
	line-height: 1;
}
header .content {
	display: flex;
	align-items: center;
	margin-top: 1em;
	margin-bottom: 1em;
}
header .content .title {
	width: 65%;
	margin: 2.5em 0;
}
header .content .title h1 br {
	display: none;
}
header .content .device {
	width: 35%;
	/* image 930x788 */
	background: url(../images/banner/adobe_sign_desktop.png) no-repeat 0 0;
	background-size: contain;
}
header .content .device::before {
	content: '';
	display: block;
	padding-top: 84.73%;
}

@media screen and (max-width: 1200px) {
	header {
		--title-font-size: 1.33vw;   /*  (16px / 1200) * 100 = .0133  */
	}
}

@media screen and (max-width: 900px){
	header .content .device {
		/* 911x788 */
		background-image: url(../images/banner/adobe_sign_tablet.png);
	}
	header .content .device::before {
		padding-top: 86.49%;
	}
}
@media screen and (max-width: 500px){
	header .content .device {
		/* 893x875 */
		background-image: url(../images/banner/adobe_sign_mobile.png);
	}
	header .content .device::before {
		padding-top: 97.98%;
	}
}

@media screen and (max-width: 425px) {
	header {
		--title-font-size: 7px;   /*  (16px / 1200) * 100 = .0133  */
	}
	header .content .title h1 br {
		display: inline;
	}
}













section.highlight {
	padding-bottom: calc( var(--section-spacing) * .50 );
	padding-top: calc( var(--section-spacing) * .75 );
	background-color: var(--section-background-color);
	margin-bottom: var(--section-spacing);
}










/* resource overrides of global_styles.css */

.resource_container.featured {
	display: block;
}
.resource_container.featured .resource {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 1.5em auto;
}

.resource_container.featured .resource.video a.thumbnail::after {
	height: 55px;
	left: 50%;
	margin: -30px 0 0 -28px;
	top: 50%;
	width: 55px;
}





















@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: 660px) {

	form { padding: 30px; }
	form .row { display: block; }
	form .row > div:nth-child(1) { text-align: left; width: auto; margin-bottom: 6px; }
	form .row > div:nth-child(1) br { display: none; }
	form .row.required > div:nth-child(1)::after { position: static; padding-left: 10px; }
	form .row > div:nth-child(2) { width: auto; }

	form .row.submit { padding-left: 10px; text-align: left; }

}

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

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