html {
    height: 100%;
    overflow: hidden;
}
body {
    height: 100%;
}
body.main-login-page {
    overflow: hidden;
}
.container.marketing .leftlinks,
.container.marketing .copyright {
    float: left;
    margin-left: 10px;
    display: block;
}
.marketing-blocks {
    padding-top: 26px;
    width: 100%;
    height: auto;
    padding-bottom: 50px;
    text-align: center;
}
.marketing-blocks .cards {
    width: 100%;
}
.marketing-blocks .card {
    text-decoration: none;
}
.marketing-blocks .card,
.footerlinks .card {
    height: auto;
    vertical-align: top;
    width: 280px;
}

.marketing-blocks .card-img {
    width: 100%;
    display: block;
    height: auto;
}
.marketing-blocks .card-img img {
    max-width: 100%;
}
#errMsg:focus {
    outline: 0;
}
/* added to adjust page issues */
.login-window input[type="text"],
.login-window input[type="password"] {
    font-family: "Amplitude";
}
.login-fields {
    height: auto;
}
.login-fields:focus {
   outline: 0;
}
.navbar.navbar-inverse,
.loginnav .navbar-collapse,
#menu-list-toggle.open {
    background: #321c0f;
}
.form-row:focus {
    outline: 0;
}

.toggle-token-group {
position: relative;
}

.what-is-token {
top: -100px;
}

.forgotten-pw:after, .forgotten-un:after, .forgotten-pin:after,
.marketing-blocks .card-copy-link .jpmmicon
 {
top: 0;
font-size: 8px;
}
.show-what-is-token:hover {
text-decoration: none;
}


a#new-jpmm-login-banner {
text-decoration: none;
}
.banner__container {
position: relative;
width: 100vw;
overflow: hidden;
}
.banner__text-block {
background-color: #202d39;
color: #f2f4f6;
font-family: "OpenSans";
position: relative;
z-index: 1;
text-align: left;
}
.banner__text-block::before {
background: #202d39;
bottom: 0;
border-right: solid 3px #73c9e5;
content: "";
display: block;
width: 2.8em;
position: absolute;
right: -1.4em;
transform: skewX(7deg);
transform-origin: 100%;
z-index: 2;
}
.banner__header {
font-weight: 300;
letter-spacing: -0.29px;
line-height: 44px;
}
.banner__copy {
font-family: "OpenSans";
font-size: 22px;
letter-spacing: -0.29px;
line-height: 30px;
}

.banner__button {
font-family: "OpenSans-Bold";
font-size: 12px;
color: #ffffff;
letter-spacing: 0.5px;
padding: 0.75em;
background: #00477b;
border: none;
margin-top: 25px;
width: 200px;
}
.banner__image {
position: absolute;
top: 0;
right: 0;
z-index: 0;
width: 60vw;
height: inherit;
background-image: url("/jpmcp-cm/content/dam/jpm-cp/jpmm/janus/public/banner-image.png");
background-repeat: no-repeat;
background-size: cover;
}

/* Mobile View */
@media screen and (max-width: 500px) {
.banner__container {
	height: 800px;
}
.banner__text-block {
	height: 345px;
	text-align: center;
	padding: 3em 2.5em;
}
.banner__text-block::before {
	background: #202d39;
	bottom: -1.8em;
	border-bottom: solid 3px #73c9e5;
	content: "";
	width: 100%;
	display: block;
	height: 1.8em;
	left: 0;
	position: absolute;
	right: 1px;
	transform: skewY(3deg);
	transform-origin: 100%;
	z-index: 2;
}
.banner__header {
	font-size: 36px;
}
.banner__copy {
	font-size: 18px;
}
.banner__image {
	position: relative;
	display: block;
	width: 100%;
	max-height: 400px;
	height: 100%;
	background-size: cover;
}
}

/* Mobile - Tablet View */
@media screen and (min-width: 501px) and (max-width: 768px) {
.banner__container {
	height: 400px;
}
.banner__text-block {
	width: 375px;

	padding: 2.5em;
	height: 330px;
}
.banner__text-block::before {
	height: 410px;
}
.banner__header {
	font-size: 40px;
}
.banner__copy {
	font-size: 18px;
}
}

/* Tablet - Laptop View */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.banner__container {
	height: 400px;
}
.banner__text-block::before {
	width: 3.8em;
	right: -2em;
	transform: skewX(9deg);
}
.banner__text-block {
	width: 55vw;
	padding: 2.5em;
	height: 330px;
}
.banner__text-block::before {
	height: 410px;
}
.banner__header {
	font-size: 40px;
}
.banner__copy {
	font-size: 18px;
}
}

/* Laptop View */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
.banner__container {
	height: 400px;
}
.banner__text-block::before {
	width: 3.8em;
	right: -2em;
	transform: skewX(9deg);
}
.banner__text-block {
	width: 50vw;
	padding: 2.5em;
	padding-left: 150px;
	height: 330px;
}
.banner__text-block::before {
	height: 410px;
}
.banner__header {
	font-size: 42px;
}

.banner__copy {
	max-width: 450px;
}
}

/* Laptop - Desktop View */
@media screen and (min-width: 1280px) and (max-width: 1440px) {
.banner__container {
	height: 400px;
}
.banner__text-block::before {
	width: 3.8em;
	right: -2em;
	transform: skewX(9deg);
}
.banner__text-block {
	width: 50vw;
	padding: 2.5em;
	padding-left: 150px;
	height: 330px;
}
.banner__text-block::before {
	height: 410px;
}
.banner__header {
	font-size: 44px;
}

.banner__copy {
	max-width: 450px;
}
.banner__image {
	width: 48vw;
}
}

/* Desktop View */
@media screen and (min-width: 1440px) and (max-width: 1600px) {
.banner__container {
	height: 400px;
}
.banner__text-block::before {
	width: 3.8em;
	right: -2em;
	transform: skewX(9deg);
}
.banner__text-block {
	width: 45vw;
	padding: 2.5em;
	padding-left: 250px;
	height: 330px;
}
.banner__text-block::before {
	height: 410px;
}
.banner__header {
	font-size: 44px;
}

.banner__copy {
	max-width: 450px;
}
.banner__image {
	width: 48vw;
}
}
/* Large Desktop View */
@media screen and (min-width: 1600px) {
.banner__container {
	height: 400px;
}
.banner__text-block::before {
	width: 3.8em;
	right: -2em;
	transform: skewX(9deg);
}
.banner__text-block {
	width: 45vw;
	padding: 2.5em;
	padding-left: 250px;
	height: 330px;
}
.banner__text-block::before {
	height: 410px;
}
.banner__header {
	font-size: 44px;
}

.banner__copy {
	max-width: 450px;
}

.banner__image {
	width: 48vw;
}
}