/* Updates for PresNow */
.headerBanner {
	height: 100%;
}
.headerBanner--presnow {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#005874+0,8fb6c2+100 */
	background: #005874; /* Old browsers */
	background: -moz-linear-gradient(left,  #005874 0%, #8fb6c2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #005874 0%,#8fb6c2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #005874 0%,#8fb6c2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.headerBanner--login {
	background-color: #005874;
    background-image: url("/Style Library/img/headerImage2-mobile.jpg");
    background-size: cover;
    height: 182px;
	position: relative;
}
.headerBanner--login:before {
	position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#005874+1,005874+100&0.65+0,0+100 */
	background: -moz-linear-gradient(left,  rgba(0,88,116,1) 0%, rgba(0,88,116,0.75) 30%, rgba(0,88,116,.45) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(0,88,116,1) 0%,rgba(0,88,116,0.75) 30%,rgba(0,88,116,.45) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(0,88,116,1) 0%,rgba(0,88,116,.75) 30%,rgba(0,88,116,.45) 100%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.headerBanner .headerTitle {
	color: #fff;
	height: 100%;
    padding: 0 20px;
    display: flex;
	align-items: center;
	margin: 0;
	line-height: 1.5;
}
.headerBanner--login .headerTitle {
	position: absolute;
}
.headerBanner .headerTitle h2,
.headerBanner .headerTitle h3 {
	color: #fff;
	width: 100%;
	line-height: 1.5;
}
.headerBanner .headerTitle h3
 {
	 font-size: 14px;
 }
.headerBanner--presnow .headerVideo {
    /*background-image: url("/Style Library/img/video-image.jpg");*/
	display: none;
}
.presnow--login {
    margin-top: 100px;
}
.presnow .highlightSectionContainer--oneMiddleColumn {
	text-align: center;
}
.presnow .highlightSectionContainer--oneMiddleColumn .highlightBox {
	padding-bottom: 5px;
}
.presnow .highlightSectionContainer--oneMiddleColumn .componentCTALink {
	margin: 20px 0 10px 0;
}
.presnow .highlightSectionContainer--oneMiddleColumn .componentCTALink .actionButton--red {
	box-shadow: none;
}
.presnow .highlightSectionContainer--login {
	margin-bottom: 30px;
}
.presnow .highlightSection h1 {
	margin-top: 16px;
}
.presnow .highlightSection h2 {
	margin: 25px 0 15px 0;
}
.presnow .highlightBox {
	border-radius: 10px;
	box-shadow: 2px 2px 3px #00000059;
	float: none;
	padding: 15px 15px 30px 15px;
	width: 100%;
}
.presnow .highlightBox--noShadow {
	box-shadow: none;
}
.presnow .highlightBox h3 {
	color: #555151;
	font-weight: normal;
	margin-top: 10px;
}
.presnow .highlightBox ul {
	line-height: 1.6;
	list-style-type: disc;
	margin-left: 20px;
}
.presnow .highlightBox li {
	margin-left: 10px;
	/*margin-top: 20px;*/
	margin-top: 10px;
}
.presnow .componentCTALink {
	margin: 30px 0;
	text-align: center;
}
.presnow .highlightSectionContainer--login .componentCTALink {
	margin: 0;
    margin-bottom: 10px;
    text-align: left;
}
.presnow .highlightSectionContainer--login p {
	margin-bottom: 5px;
}
.presnow .highlightSectionContainer--login .highlightBox {
	padding-bottom: 15px;
}
.presnow .highlightSectionContainer--login .buttonWrapper {
    margin-bottom: 0;
}
.presnow input.actionButton {
    margin-left: 0;
    width: auto;
}
.presnow--login a.actionButton {
    width: auto;
    display: inline-block;
    height: auto;
    padding-bottom: 11px;
}
.presnow a.actionButton--red:link,
.presnow a.actionButton--red:visited {
	background-color: #a71930;
    box-shadow: 1px 2px 4px #00000078;
    display: inline-block;
    width: auto;
}

.presnow a.actionButton--red:hover,
.presnow a.actionButton--red:active,
.presnow a.actionButton--red:focus {
	background-color: #2c2b2c;
}

.headerNavBarWrapper--presnow .signInLink {
	margin-top: 0;
}
.headerNavBarWrapper--presnow .signInLink a {
	color: #fff;
	display: flex;
	margin-right: -12px;
	padding-top: 12px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
}
.headerNavBarWrapper--presnow .manage-my-account-icon {
	background-image: url("/Style Library/img/manage-my-account.svg");
	background-size: 20px 20px;
	display: inline-block;
	height: 20px;
	margin-right: 0;
	width: 20px;
}
.headerNavBarWrapper--presnow .manage-my-account-text {
	display: none;
}
.presnow .ms-clear {
    clear: both;
}
.presnow a.clickToCall {
    white-space: nowrap;
}
.presnow .mobileVideo {
    width: 100%;
}

/* Mobile Landscape */
@media (min-width: 550px) {
    .headerBanner--login {
        background-image: url("/Style Library/img/headerImage2-tablet.jpg");
    }
}


/* Tablet + */
@media (min-width: 768px) {
	.headerBanner {
		height: 100%;
	}
	.headerBanner--presnow {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#005874+0,8fb6c2+100 */
		background: #005874; /* Old browsers */
		background: -moz-linear-gradient(left,  #005874 0%, #8fb6c2 50%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  #005874 0%,#8fb6c2 50%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  #005874 0%,#8fb6c2 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		display: flex;
    }
    .headerBanner--login {
        height: 100%;
    }
    .headerBanner--login .headerTitle h2 {
		font-size: 40px;
	}
	.headerBanner--login .headerTitle h3 {
		font-size: 18px;
	}
	.headerBanner--presnow .headerTitle {
		width: 50%;
	}
	.headerBanner--presnow .headerVideo {
		display: block;
        width: 50%;
        position: relative;
    }
    .headerBanner--presnow .headerVideoCaption {
        background-color: rgba(41,41,41,0.84);
        position: absolute;
        top: 10px;
        color: #fff;
        border-radius: 0 10px 10px 0;
        padding: 10px;
        width: auto;
    }
    .headerBanner--presnow .headerVideoCaption--space {
        background-color: rgba(255,255,255,0.2);
    }
    .headerBanner--presnow .headerVideoCaption h3 {
        color: #fff;
        font-size: 20px;
    }
    .headerBanner--presnow .headerVideoCaption p {
        margin-bottom: 0;
    }
	/* .headerBanner--presnow .brightcove-video-container {
		height: 226px;
		display: block;
	} */
	/* .presnow .brightcove-video-container {
		display: none;
	} */
	.headerNavBarWrapper--presnow .manage-my-account-icon {
		margin-right: 7px;
	}
	.headerNavBarWrapper--presnow .manage-my-account-text {
		display: inline;
	}
	.headerNavBarWrapper--presnow .signInLink a {
		padding-top: 15px;
		padding-bottom: 15px;
    }
    .presnow--login {
        margin-top: 0;
    }
	.presnow .highlightSectionContainer--oneMiddleColumn .componentCTALink {
		margin: 30px 0;
    }
    .presnow .highlightSectionContainer--login .highlightSection:nth-child(3) .highlightBox {
        width: 50%;
    }
    .presnow .privacyLink {
        text-align: right;
    }
    .presnow .highlightSectionContainer--login .highlightBox {
        padding: 30px 30px 15px 30px;
    }
    .presnow .mobileVideo {
        display: none;
    }
}

/* Tablet Landscape + */
@media (min-width: 1024px) {
    .headerBanner--presnow .headerVideo {
        overflow: hidden;
    }
    .headerBanner--presnow .headerVideo img {
        margin-left: calc(50% - 300px);
    }
    .headerBanner--presnow .headerVideoCaption {
        top: 20px;
        max-width: 400px;
        width: 100%;
    }
    .headerBanner--presnow .headerVideoCaption h3 {
        font-size: 30px;
    }
    .headerBanner--presnow .headerVideoCaption p {
        margin-bottom: 10px;
    }
    .headerBanner--login {
        background-image: url("/Style Library/img/headerImage2.jpg");
    }
	.headerBanner .headerTitle,
	.headerBanner .headerTitle h2 {
		font-size: 40px;
	}
	.headerBanner .headerTitle h3 {
		font-size: 18px;
	}

	.presnow .highlightSection h1 {
		margin: 30px 0;
	}
	.presnow .highlightSectionContainer--twoColumns {
		display: grid;
		display: -ms-grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 75px;
		-ms-grid-columns: 1fr 75px 1fr;
	}
	.presnow .highlightSectionContainer--twoColumns .highlightSection:nth-child(1) {
		-ms-grid-column: 1;
	}
	.presnow .highlightSectionContainer--twoColumns .highlightSection:nth-child(2) {
		-ms-grid-column: 3;
    }
    .presnow .highlightSectionContainer--login .highlightSection:nth-child(3) .highlightBox {
        width: 100%;
    }
	.presnow .highlightSectionContainer--twoColumns .highlightBox {
		height: calc(100% - 66px);
		margin-bottom: 0;
	}
	.presnow .highlightSectionContainer--oneMiddleColumn {
		margin-top: 40px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		max-width: 600px;
	}
	.presnow .highlightSectionContainer--oneMiddleColumn .highlightBox {
		padding-bottom: 10px;
	}
	.presnow .highlightSectionContainer--login {
		display: grid;
		display: -ms-grid;
		/*grid-template-columns: 2fr 1fr;
		grid-column-gap: 85px;
		-ms-grid-columns: 2fr 85px 1fr;*/
		grid-template-columns: 1fr 320px;
		grid-column-gap: 75px;
		-ms-grid-columns: 1fr 75px 320px;
	}
	.presnow .highlightSectionContainer--login .highlightSection:nth-child(1) {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
	}
	.presnow .highlightSectionContainer--login .highlightSection:nth-child(2) {
        -ms-grid-row: 2;
        -ms-grid-column-span: 3;
        grid-row: 2;
        grid-column: 1 / 3;
        padding-top: 20px;
    }
    .presnow .highlightSectionContainer--login .highlightSection:nth-child(3) {
        -ms-grid-column: 3;
        -ms-grid-row: 1;
	}
	.presnow .highlightSectionContainer--login .highlightBox {
		height: calc(100% - 66px);
        margin-bottom: 0;
        padding: 15px;
	}
	.presnow .highlightSectionContainer--login .highlightSection:first-child .highlightBox {
		display: flex;
		align-items: flex-end;
    }
    .presnow .highlightSectionContainer--login a.actionButton {
        display: block;
        width: 100%;
    }
    .presnow .highlightSectionContainer--login .highlightBox .signInForm .fieldGroup,
    .presnow .highlightSectionContainer--login .highlightBox .signInForm input[type="text"],
    .presnow .highlightSectionContainer--login .highlightBox .signInForm input[type="password"] {
        width: 219px;
    }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .presnow .highlightSectionContainer--login .highlightBox .signInForm .fieldGroup {
        width: 245px;
    }
    .presnow .highlightSectionContainer--login .highlightBox .signInForm input[type="text"],
    .presnow .highlightSectionContainer--login .highlightBox .signInForm input[type="password"] {
        width: 100%;
    }
    .presnow .highlightSectionContainer--login .signInForm .buttonWrapper,
    .presnow .highlightSectionContainer--login .formWrapper .passwordField {
        margin-left: 29px;
    }
    .presnow .highlightSectionContainer--login .highlightSection:nth-child(2) {
        padding-top: 20px;
    }

    .headerBanner--presnow {
        background: #fff;
    }
    .headerBanner--presnow .headerTitle {
        background: #005874;
        background: -moz-linear-gradient(left, #005874 0%, #8fb6c2 50%);
        background: -webkit-linear-gradient(left, #005874 0%,#8fb6c2 50%);
        background: linear-gradient(to right, #005874 0%,#8fb6c2 100%);
        height: 145px;
    }
    .headerBanner--presnow .headerVideo {
        height: 145px;
        overflow: hidden;
    }
    .headerBanner--presnow .headerVideo img {
        height: auto;
        width: 100%;
    }
    .presnow:not(.presnow--login) {
        margin-top: -81px;
    }
}

/* Fix for footer issue */
@media (max-width: 520px) {
    .footerMenu {
        width: 100%;
        max-width: 456px;
    }
    footer ul li a {
        padding: 6px 20px;
    }
    footer ul li:first-child a {
        padding-left: 0;
    }
    footer ul li:last-child a {
        padding-right: 0;
    }
}
@media (max-width: 350px) {
    footer ul li a {
        padding: 6px 9px;
    }
    
}