@import url("fonts.css");


/*#region Site Layout */

html, body {
	display: block;
	position: relative;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	background-color: #f9f9f9;
	font-family: 'Open Sans SemiCondensed',sans-serif;
	font-size: 13pt;
}

div#site-wrapper {
	display: block;
	position: relative;
	box-sizing: border-box;
	padding: 0;
	margin: 0 auto;
	max-width:1440px;
	min-height:100vh;
	background-color:#fff;
	
}

div#site-header {
	display:flex;
	position:relative;
	box-sizing:border-box;
	flex-flow:row nowrap;
	justify-content:flex-start;
	align-items:center;
	padding:.5em;
	border-bottom:5px solid #f9f9f9;
}

div#site-header > div.logo {
	flex:0 1 auto;
	align-self:center;
	padding:1em .5em;
}

	div#site-header > div.logo > a {
		text-decoration:none;
		outline:none;
	}

	div#site-header > div.logo > a > img {
		width:100%;
		vertical-align:middle;
	}

div#site-header > div:last-of-type {
	flex: 1 1 auto;
	align-self:center;
}

	div#site-header > div:last-of-type > h1 {
		font-size: 22pt;
		font-family: 'Open Sans SemiCondensed',sans-serif;
		padding:0; margin:0;
	}

div#site-content {
	display: block;
	position: relative;
	box-sizing: border-box;
	padding-bottom:2em;
	margin-bottom:3em;
}

div.page {
	display: block;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}

/*#endregion */

/*#region General Elements */


p {
	font-family: 'Open Sans SemiCondensed',sans-serif;
	font-size: inherit;
	margin: 0;
	padding: .25em;
}

a {
	font-size: inherit;
	font-family: inherit;
	color: #0078d7;
}

a:visited {
	font-size: inherit;
	font-family: inherit;
	color: #8764b8;
}

a.clean-link {
	text-decoration:none;
}

::placeholder {
	color: #b3b3b3;
	opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
	color: #b3b3b3;
}



/*#endregion */

/*#region Form Elements */

label {
	display: inline-block;
	font-size: inherit;
	width: 150px;
	font-weight: bold;
	font-family: 'Open Sans SemiCondensed',sans-serif;
}

button {
	font-size: medium;
	font-family: OpenSans-SemiBold,sans-serif;
	font-weight: normal;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
}

button:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
}


button[type=submit].green {
	font-size: medium;
	font-family: OpenSans_SemiCondensed-SemiBold;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	background-color: #008000;
	border: 1px solid #008000 ;
	color:#fff;
	padding:.5em 1em;
}

button[type=submit].red {
	font-size: medium;
	font-family: OpenSans_SemiCondensed-SemiBold;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	background-color: #a6111f;
	border: 1px solid #a6111f;
	color: #fff;
	padding: .5em 1em;
}

button[type=submit].gray {
	font-size: medium;
	font-family: OpenSans_SemiCondensed-SemiBold;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	border: 1px solid #b3b3b3;
	color: #000;
	padding: .5em 1em;
}

button[type=submit]:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
}


button[type=button].green {
	font-size: medium;
	font-family: OpenSans_SemiCondensed-SemiBold;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	background-color: #008000;
	border: 1px solid #008000;
	color: #fff;
	padding: .5em 1em;
	cursor:pointer;
}

button[type=button].red {
	font-size: medium;
	font-family: OpenSans_SemiCondensed-SemiBold;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	background-color: #a6111f;
	border: 1px solid #a6111f;
	color: #fff;
	padding: .5em 1em;
	cursor: pointer;
}

button[type=button].gray {
	font-size: medium;
	font-family: OpenSans_SemiCondensed-SemiBold;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	border: 1px solid #b3b3b3;
	color: #000;
	padding: .5em 1em;
	cursor: pointer;
}

button[type=button]:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
	cursor: pointer;
}







/*#endregion*/

/*#region Special Cases */

.bold {
	font-weight:bold;
}

.italic {
	font-style:italic;
}

.blue-text {
	color:#005497;
}

.green-text {
	color:#008000;
}

.red-text {
	color:#a6111f;
}


/*#endregion */

/*#region Proofs - Home */

div.proof-home {
	padding:1em;
}


form#proof-verify {
	margin:1em 0em;
	border:1px solid #fff;
}


	form#proof-verify div.textbox-wrapper {
		display:inline-block;
		border: 1px solid #e5e5e5;
		border-radius:5px;
	}

		form#proof-verify div.textbox-wrapper input[type=text] {
			display:inline-block;
			width:350px;
			padding: .25em;			
			font-family: OpenSans-SemiBold,sans-serif;
			font-size: 11pt;
			border: 1px solid #fff;
			outline:none;
		}

		form#proof-verify div.textbox-wrapper button[type=submit] {
			display:inline-block;
			padding: .35em 1em;
			font-family: OpenSans-SemiBold,sans-serif;
			font-size: 11pt;
			background-color:#005497;
			border:1px solid #005497;
			color:#fff;
			cursor:pointer;
			/*border: 1px solid #fff;*/
		}

/*#endregion */

/*#region Proofs - General */

.proof-approved {
	font-family:OpenSans-Bold,sans-serif;
	color:#008000;
}

.proof-rejected {
	font-family: OpenSans-Bold,sans-serif;
	color: #a6111f;
}

.proof-pending {
	font-family: OpenSans-Bold,sans-serif;
	color: #005497;
}

div.proof-content {
	display:block;
	position:relative;
	box-sizing:border-box;
	border-top:1px solid silver;

}

/*#endregion */

/*#region Proof - Header */

div.proof-header {
	display:flex;
	position:relative;
	box-sizing:border-box;
	flex-flow:row nowrap;
	justify-content:flex-start;
	align-items:stretch;
	padding:1em;
}

div.proof-header > div {
	flex:0 1 50%;
	/*border:1px solid red;*/
}

div.proof-header > div.proof-options {
	display:inline-flex;
	flex-flow:row nowrap;
	justify-content:flex-end;
	align-self:flex-end;

}

	div.proof-header > div.proof-options button {
		display: inline-block;
		padding: .5em .75em;
		font-weight: bold;
		margin-left: 1em;
		cursor: pointer;
		font-size: medium;
		font-family: 'Open Sans SemiCondensed',sans-serif;
		font-weight: 600;
	}

	div.proof-header > div.proof-options button:hover {
		display: inline-block;
		padding: .5em .75em;
		font-weight: bold;
		margin-left: 1em;
		cursor: pointer;
		font-size: medium;
		font-family: 'Open Sans SemiCondensed',sans-serif;
		font-weight: 600;
	}

	div.proof-header > div.proof-options button > i {
		display: inline-block;
		padding: 0em .25em;
		font-size: medium;
	}

	div.proof-header > div.proof-options button.send-proof-btn {
		border: 1px solid #005497;
		border-radius: 8px;
		background-color: #E6F2FB;
		color:#005497;
	}

	div.proof-header > div.proof-options button.download-pdf-btn {
		border-width:1px;
		border-radius: 8px;
	}

	div.proof-header > div.proof-options button.opt-out-btn {
		border: 1px solid #a6111f;
		border-radius: 8px;
		background-color: #F6E7E9;
		color: #a6111f;
	}

table.proof-header-info {
	table-layout:fixed;
	border-collapse:collapse;
	width:100%;
}



/*#endregion */


/*#region Proof - Actions */
div.proof-actions {
	display: flex;
	position: relative;
	box-sizing: border-box;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: stretch;
	column-gap: 2em;
	margin: 2em 0em;
	padding: 0em 1em;
	/*border:1px solid red;*/
}

div.proof-actions > a.button-link {
	padding: .5em 2em;
	text-decoration: none;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
}

div.proof-actions > a.button-link:hover {
	padding: .5em 2em;
	text-decoration: none;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
}

div.proof-actions > a.button-link.proof-approved {
	border:1px solid #008000;
	border-radius:10px;
	background-color:#008000;
	color:#fff;
}

div.proof-actions > a.button-link.proof-rejected {
	border: 1px solid #a6111f;
	border-radius: 10px;
	background-color: #a6111f;
	color: #fff;
}

div.proof-actions > a.button-link > i {
	margin-right:.5em;
}

/*#endregion */

/*#region Proof - Slideshow */


div.slideshow-container {
	display: block;
	position: relative;
	box-sizing: border-box;
	border-bottom:1px solid #e5e5e5;
}

div.slideshow-container > div.slide {
	display: flex;
	position: relative;
	box-sizing: border-box;
	flex-flow:row nowrap;
	justify-content:flex-start;
	align-items:stretch;
	column-gap:1em;
	margin: 0em 0em 0em 0em;
}

	div.slideshow-container > div.slide > div {
		/*border: 1px solid red;*/
	}


	div.slideshow-container > div.slide > div.proof-data {
		display: block;
		position: relative;
		box-sizing: border-box;
		flex:1 1 auto;
		padding:0em 1em;
		min-width:200px;
		max-width:500px;
		padding-top:1em;
		border-right:1px solid #e5e5e5;
		order:1;
	}

		div.slideshow-container > div.slide > div.proof-data > div.option-list {
			display:block;
			position:relative;
			box-sizing:border-box;
			margin-bottom:1.5em;
		}

			div.slideshow-container > div.slide > div.proof-data h3 {
				font-family:OpenSans-SemiBoldItalic,sans-serif;
				font-size:14pt;
				margin:0;
				padding:0;
			}

			div.slideshow-container > div.slide > div.proof-data p {
				color: #000;
				font-size: 11pt;
				font-weight: 500;
				font-family: 'Open Sans SemiCondensed',sans-serif;
			}

			div.slideshow-container > div.slide > div.proof-data p.display-name {
				padding-bottom: .25em;
				color: #005497;
				font-size: 12pt;
				font-weight: bold;
				font-family: 'Open Sans SemiCondensed',sans-serif;
			}

			div.slideshow-container > div.slide > div.proof-data p > label {
				color: #000;
				font-size: 11pt;
				font-weight: bold;
				font-family: 'Open Sans SemiCondensed',sans-serif;
			}

	div.slideshow-container > div.slide > div.proof-image {
		display: block;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
		flex: 3 1 auto;
		padding-bottom:2em;
		order:2;
	}

		div.slideshow-container > div.slide > div.proof-image > div.slide-navigation {
			display: flex;
			max-width: 90%;
			margin: 0 auto;
			padding: 1em;
			flex-flow:row nowrap;
			justify-content:space-between;
		}

		div.slideshow-container > div.slide > div.proof-image > div.slide-navigation p.page-count {
			font-family:'Open Sans SemiCondensed',sans-serif;
			font-weight:bold;
			font-size:18pt;
		}

		div.slideshow-container > div.slide > div.proof-image > div.slide-navigation > button[type=button] {
			cursor:pointer;
			color:#008000;
			font-family:'Open Sans SemiCondensed',sans-serif;
			font-weight:bold;
			font-size:16pt;
			background-color:transparent;
			background:none;
			border:0;
			box-shadow:none;

		}

		div.slideshow-container > div.slide > div.proof-image > div.slide-navigation > button > i {
			font-size:30pt;
			vertical-align:middle;
		}

		div.slideshow-container > div.slide > div.proof-image > div.image-wrapper {
			display: block;
			max-width: 95%;
			max-height: 800px;
			margin: 0 auto;
			text-align: center;
			/*border: 1px solid #e5e5e5;*/				
			background-color:#fff;
			cursor:grab;
		}

			div.slideshow-container > div.slide > div.proof-image > div.image-wrapper:after {
				content: '';
				display: block;
				width: 50px;
				height: 50px;
				position: absolute;
				top: 0;
				right: 0;
				background: url(../Content/Images/zoom-icon-large.png);
				background-repeat: no-repeat;
			}


	div .slideshow-container > div.slide > div.proof-image > div.image-wrapper > img {
			display: inline-block;
			width: auto;
			height:800px;
			

		}

/*#endregion */

/*#region Proof - Email */

div.email-proof-wrapper {
	display:block;
	position:relative;
	box-sizing:border-box;
}

	div.email-proof-wrapper > section {
		display: block;
		position: relative;
		box-sizing: border-box;
		margin-bottom: 2em;
		padding: 1em .5em;
	}

	div.email-proof-wrapper p {
		font-size:14pt;
	}

	div.email-proof-wrapper ul li {
		font-size: 14pt;
	}

form#send-email-form {
	display: block;
	position: relative;
	box-sizing: border-box;

}

	form#send-email-form > div.email-form-header {
		display:flex;
		position:relative;
		box-sizing:border-box;
		flex-flow:row nowrap;
		justify-content:flex-start;
		align-items:stretch;
		column-gap:1em;
		padding-bottom:2em;
	}

		form#send-email-form > div.email-form-header > div.email-left {
			display: block;
			position: relative;
			box-sizing: border-box;
			flex: 0 1 5%;
		}

		form#send-email-form > div.email-form-header > div.email-right {
			display: block;
			position: relative;
			box-sizing: border-box;
			flex: 1 1 auto;
		}

			form#send-email-form > div.email-form-header > div.email-right > div {
				margin-bottom:.25em;
			}

			form#send-email-form > div.email-form-header > div.email-right > div.email-form-content {
				margin-top: 1em;
			}

			form#send-email-form label {
				display: inline-block;
				width: 65px;
				font-size: 12pt;
				color: #555;
			}

	form#send-email-form input[type=text] {
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: 1px solid #ADD8E6;
		padding: .25em .25em 0em .25em;
		margin-bottom:.25em;
		width: 50%;
		outline: none;
		font-size: 12pt;
	}

	form#send-email-form button[type=submit] {
		width: 100%;
		height: 85px;
		cursor: pointer;
		border: 1px solid #005497;
		background-color: #005497;
		background-image: linear-gradient(#3376AC,#005497, #004379);
		color: #fff;
	}


div.email-result-wrapper {
	display:flex;
	position:relative;
	box-sizing:border-box;
	flex-flow:column nowrap;
	justify-content:center;
	align-items:center;
}


div.email-result-wrapper > div {
	flex:0 1 80%;
}

	div.email-result-wrapper > div.image-wrapper {
		flex: 0 1 80%;
		margin: 1em;
		text-align:center;
	}

	div.email-result-wrapper > div.image-wrapper > img {
		flex: 0 1 80%;
		margin: 1em;
		text-align: center;
		width:auto;
		height:300px;
	}

div.email-result-wrapper > div.message > div {
	margin-bottom:2em;
}


div.email-result-wrapper h1 {
	text-align:center;
	font-size:50pt;
	padding:0; margin:0;
}


div.email-result-wrapper p {
	font-family:OpenSans_SemiCondensed-SemiBold,sans-serif;
	font-size:14pt;
}

div.email-result-wrapper ul li {
	font-family: OpenSans_SemiCondensed-Regular,sans-serif;
	font-size: large;
	margin-bottom:1em;
}


div.email-result-wrapper div.button-container {
	display:block;
	position:relative;
	box-sizing:border-box;
	text-align:center;
	margin:2em 0em;
}


div.email-result-wrapper a.button-link {
	display:inline-block;
	font-family: 'Open Sans SemiCondensed',sans-serif;
	text-decoration: none;
	font-size: 14pt;
	padding: .5em 1em;
	background-color: #0078d7;
	color: #fff;
}



/*#endregion */

/*#region Proof - Set Approval */

div.set-approval-container {
	display:flex;
	position:relative;
	box-sizing:border-box;
	flex-flow:row nowrap;
	justify-content:center;
	align-items:flex-start;
	height:80vh;
	/*border:1px solid red;*/
}

div.set-approval-container > form {
	flex:0 1 80%;
}

div.set-approval-container h2 {
	font-family:'Open Sans SemiCondensed', sans-serif;
	font-size:16pt;
}

div.set-approval-container p {
	font-family: 'Open Sans SemiCondensed', sans-serif;
	font-size: 12pt;
}

div.set-approval-container textarea {
	display: block;
	width: 100%;
	min-height: 100px;
	font-family: 'Open Sans SemiCondensed', sans-serif;
	font-size: 12pt;
}

div.set-approval-container div.button-container {
	display: flex;
	position: relative;
	box-sizing: border-box;
	margin:2em 0em;
	flex-flow:row nowrap;
	justify-content:space-between;
	align-items:stretch;
}

div.set-approval-container div.button-container > button[type=submit] {
	font-family: 'Open Sans SemiCondensed', sans-serif;
	font-size: 12pt;
	cursor:pointer;
	background-image:none;
}

/*#endregion */


/*#region Unauthorized Access */

div.not-authorized-wrapper {
	display: flex;
	flex-flow: row wrap;
	position: relative;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	height: 80vh;
}

div.not-authorized-wrapper > div {
	flex:1 1 auto;
	text-align:center;
	/*border:1px solid red;*/
}

div.not-authorized-wrapper > div:first-of-type > img{
	max-width:600px;
	min-width:300px;
	height:auto;
}

div.not-authorized-wrapper > div:nth-of-type(2) {
	display:inline-flex;
	flex-flow:column nowrap;
	justify-content:center;
	align-items:center;
}

div.not-authorized-wrapper > div:nth-of-type(2) > div {
	flex:0 0 auto;
}

div.not-authorized-wrapper > div:nth-of-type(2) h1 {
	font-family:'Open Sans SemiCondensed',sans-serif;
	font-size:50pt;
	text-align:center;
	padding:0; margin:0;
}

	div.not-authorized-wrapper > div:nth-of-type(2) h2 {
		font-family: 'Open Sans SemiCondensed',sans-serif;
		text-align: center;
	}

div.not-authorized-wrapper > div:nth-of-type(2) > div:nth-of-type(2) {
	width:75%;
}

div.not-authorized-wrapper > div:nth-of-type(2) > div:nth-of-type(2) > p {
	font-family: 'Open Sans SemiCondensed',sans-serif;
	font-size:14pt;
}

div.not-authorized-wrapper > div:nth-of-type(2) > div:nth-of-type(3) {
	margin:2em 0em;
}

div.not-authorized-wrapper > div:nth-of-type(2) > div:nth-of-type(3) > a {
	font-family: 'Open Sans SemiCondensed',sans-serif;
	text-decoration: none;
	font-size: 14pt;
	padding:.5em 1em;
	background-color:#0078d7;
	color:#fff;
}

/*#endregion */


/*#region Not Ready for Viewing */

div.not-ready-container > div.proof-content {
	display:flex;
	position:relative;
	box-sizing:border-box;
	flex-flow: row nowrap;
	justify-content:center;
	align-items:center;
}

div.not-ready-container > div.proof-content h1 {
	font-family:OpenSans_SemiCondensed-Bold,sans-serif;
	font-size:40pt;
}

div.not-ready-container > div.proof-content p {
	font-family: OpenSans_SemiCondensed-Regular,sans-serif;
	font-size: large;
}

/*#endregion */