.nav-bar-container{
	display:grid;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;


}
.nav-bar{
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	z-index: 9;

}

.nav-bar>.nav-item-left>div{
	
	font-size:1em;

}

.nav-item{
	margin-right: 10px;
	font-size: 12px;
	display:flex;
	float:left;



}
.nav-item a{
	text-decoration: none;
	color: black;
	transition: color 0.5s;
	padding: 15.5px;


}

.nav-item a:hover{
	color: #fff ;

}
.nav-item-left ul{
	list-style: none;
	padding-left: 0;
	margin:0px;
	padding: 0px;

}
.nav-item-left ul li{
	

	height: 50px;
	background-color: white;
	
}

.nav-item-left ul li a{
	text-decoration:none;
	color:#0E4A92;
	display: block;
}
.nav-item-left a:hover{
	background-color: #0E4A92;
}
.nav-item-left ul li ul li{
	display:none;

	height: 60px;
	text-align: center;
	align-items: center;
}
.nav-item-left ul li:hover ul li{
	display:block;
}


.active-nav-link{
	/*border-bottom:1px solid black;*/
	font-weight: bolder;
	color: #0E4A92;
}


/*assign full width inputs*/ 
input[type=text], 
input[type=password] { 
    width: 100%; 
    padding: 12px 20px; 
    margin: 8px 0; 
    display: inline-block; 
    border: 1px solid #ccc; 
    box-sizing: border-box; 
} 

/*set a style for the buttons*/ 
button { 
    background-color: #0E4A92; 
    color: white; 
    padding: 14px 20px; 
    border: none; 
    cursor: pointer; 
    width: 100%; 
    margin: 5px;

} 

/* set a hover effect for the button*/ 
button:hover { 
    opacity: 0.8; 
} 

/*set extra style for the cancel button*/ 
.cancelbtn { 
    width: auto; 
    padding: 10px 18px; 
    background-color: #f44336; 
} 

/*centre the display image inside the container*/ 
.imgcontainer { 
    text-align: center; 
    margin: 24px 0 12px 0; 
    position: relative; 
} 
.color-overlay1{
	width:100%;
	height:100%;
	background: #3c1f41 ;
	opacity: .4;
	position: absolute;
}

/*set padding to the container*/ 

  
/*set the forgot password text*/ 
span.psw { 
    float: right; 
    padding-top: 16px; 
} 

/*set the Modal background*/ 
.modal { 
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0, 0, 0); 
    background-color: rgba(0, 0, 0, 0.4); 
    padding-top: 60px; 
} 

/*style the model content box*/ 
.modal-content { 
    background-color: #fefefe; 
    margin: 5% auto 15% auto; 
    border: 1px solid #888; 
    width: 80%; 
} 

/*style the close button*/ 
.close { 
    position: absolute; 
    right: 25px; 
    top: 0; 
    color: #000; 
    font-size: 35px; 
    font-weight: bold; 
} 
  
.close:hover, 
.close:focus { 
    color: red; 
    cursor: pointer; 
} 

/* add zoom animation*/ 
.animate { 
    -webkit-animation: animatezoom 0.6s; 
    animation: animatezoom 0.6s 
} 
  
@-webkit-keyframes animatezoom { 
    from { 
        -webkit-transform: scale(0) 
    } 
    to { 
        -webkit-transform: scale(1) 
    } 
} 
  
@keyframes animatezoom { 
    from { 
        transform: scale(0) 
    } 
    to { 
        transform: scale(1) 
    } 
} 
  
@media screen and (max-width: 300px) { 
    span.psw { 
        display: block; 
        float: none; 
    } 
    .cancelbtn { 
        width: 100%; 
    } 
}










h2{

	align-content: center;
	text-align: center;
	color: black;
	font-family: Helvetica;
	font-size:1.5rem;
}

.step-content-wrapper h3{
	display: flex;
		color:#0E4A92;
	font-size: 1.5rem;
	text-align: center;
	justify-content: center;
	align-items: center;
}
.step-content-wrapper{

	justify-content: center;
	align-items: center;
	position: relative;
	text-align: center;
}
img{
	
	height: 300px;

}
.end{
		text-align: center;
	color:#0E4A92;
}
	#footer{
	position:relative;
	background-color: #fff;
	color: white;
	text-align: right;
	bottom:0;
	width:100%;
	z-index: -1;


}
#footer-text{
	margin-right:20px;
	margin-top: 10px;
	margin-bottom:10px;
	color: #718FB3;

}
@media (min-width: 900px){
	#footer{
	position:relative;
	background-color: #fff;
	color: white;
	text-align: right;
	bottom:0;
	width:100%;
	z-index: -1;


}
#footer-text{
	margin-right:20px;
	margin-top: 10px;
	margin-bottom:10px;
	color: #718FB3;

}


.step-content-wrapper{

	padding:30px;
	font-family: "Open Sans", sans-serif;
	z-index: -2;
	text-align: left;
}

.step-content-wrapper h2{
	color:#0E4A92;
}

.step-content{
	margin:50px;
	z-index: -1;
}

.step-wrapper h2{
	text-align: center;
	color: #0E4A92;
	margin:50px;

}
.step-content-wrapper{
	padding-left:100px;
	padding-right:100px;

}

/*Navigation bar*/
.nav-bar-container{
	display:grid;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;


}
.nav-bar{
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	z-index: 9;

}

.nav-bar>.nav-item-left>div{
	margin-right:20px;
	font-size:1em;

}

.nav-item{
	margin-right: 10px;
	font-size: 15px;
	display:flex;
	float:left;



}
.nav-item a{
	text-decoration: none;
	color: black;
	transition: color 0.5s;
	padding: 18.5px;
	font-family: arial;

}

.nav-item a:hover{
	color: #fff ;

}
.nav-item-left ul{
	list-style: none;
	padding-left: 0;
	margin:0px;
	padding: 0px;
}
.nav-item-left ul li{
	float: left;
	width:150px;
	height: 50px;
	background-color: white;
	text-align: center;
}

.nav-item-left ul li a{
	text-decoration:none;
	color:#0E4A92;
	display: block;
}
.nav-item-left a:hover{
	background-color: #0E4A92;
}
.nav-item-left ul li ul li{
	display:none;

	height: 60px;
	text-align: center;
	align-items: center;
}
.nav-item-left ul li:hover ul li{
	display:block;
}


.active-nav-link{
	/*border-bottom:1px solid black;*/
	font-weight: bolder;
	color: #0E4A92;
}


/*assign full width inputs*/ 
input[type=text], 
input[type=password] { 
    width: 100%; 
    padding: 12px 20px; 
    margin: 8px 0; 
    display: inline-block; 
    border: 1px solid #ccc; 
    box-sizing: border-box; 
} 

/*set a style for the buttons*/ 
button { 
    background-color: #0E4A92; 
    color: white; 
    padding: 14px 20px; 
    border: none; 
    cursor: pointer; 
    width: 100%; 
    margin: 5px;

} 

/* set a hover effect for the button*/ 
button:hover { 
    opacity: 0.8; 
} 

/*set extra style for the cancel button*/ 
.cancelbtn { 
    width: auto; 
    padding: 10px 18px; 
    background-color: #f44336; 
} 

/*centre the display image inside the container*/ 
.imgcontainer { 
    text-align: center; 
    margin: 24px 0 12px 0; 
    position: relative; 
} 
.color-overlay1{
	width:100%;
	height:100%;
	background: #3c1f41 ;
	opacity: .4;
	position: absolute;
}

/*set padding to the container*/ 

  
/*set the forgot password text*/ 
span.psw { 
    float: right; 
    padding-top: 16px; 
} 

/*set the Modal background*/ 
.modal { 
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0, 0, 0); 
    background-color: rgba(0, 0, 0, 0.4); 
    padding-top: 60px; 
} 

/*style the model content box*/ 
.modal-content { 
    background-color: #fefefe; 
    margin: 5% auto 15% auto; 
    border: 1px solid #888; 
    width: 80%; 
} 

/*style the close button*/ 
.close { 
    position: absolute; 
    right: 25px; 
    top: 0; 
    color: #000; 
    font-size: 35px; 
    font-weight: bold; 
} 
  
.close:hover, 
.close:focus { 
    color: red; 
    cursor: pointer; 
} 

/* add zoom animation*/ 
.animate { 
    -webkit-animation: animatezoom 0.6s; 
    animation: animatezoom 0.6s 
} 
  
@-webkit-keyframes animatezoom { 
    from { 
        -webkit-transform: scale(0) 
    } 
    to { 
        -webkit-transform: scale(1) 
    } 
} 
  
@keyframes animatezoom { 
    from { 
        transform: scale(0) 
    } 
    to { 
        transform: scale(1) 
    } 
} 
  
@media screen and (max-width: 300px) { 
    span.psw { 
        display: block; 
        float: none; 
    } 
    .cancelbtn { 
        width: 100%; 
    } 
}

}