body{
	background-color: #fff;
	font-family: Helvetica;
	padding:0px;
	margin:0px;
	overflow:auto;
}
/*navigation bar style and buttons on top, with profile and logout*/
.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;

}

.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%; 
    } 
}

.text-container{
	position: relative;
	text-align: center;
}
.text-container h1{
	font-family: Helvetica;
	font-size:60px;
	color: white;
	z-index: 1;
	
	margin:0;
	padding: 0;
}

.text-container h2{
	color:white;
	
	margin:0;
	padding:0;
}


#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;

}
.App-Header{
	background-image:url('../Images/poly2.jpg');
	height:180px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.App-Header h1{
	text-align: center;
	font-family: Helvetica;
	color: #fff;
	font-size:30px;
	
	text-decoration-color: #718FB3;
	margin: 20px;
	padding:20px;


}
.App-Header2{
	margin: 0;
	padding: 0;
	height:35px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.App-Header2 h1{
	text-align: center;
	font-family: Helvetica;
	color: #0E4A92;
	font-size:30px;
	
	text-decoration-color: #718FB3;

}


.apps-container{
	position: relative;
	width:1200px;
	height:300px;
	margin:60px auto;
	background: #fff;

	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;

	justify-content: center;
	align-items: center;


}
.apps-container2{
	position: relative;
	width:1200px;
	height:270px;
	margin:auto;
	background: #fff;
	padding:0;

	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	justify-content: center;
	align-items: center;


}
.apps-container .box,.apps-container2 .box{
	position: relative;
	width: calc(350px - 30px);
	height: calc(250px - 30px);
	background: #fff;
	float:left;
	margin:15px;
	box-sizing: border-box;
	overflow:hidden;
	border-radius:10px;
	border:#0E4A92 2px solid;

}


.apps-container .box .icon,.apps-container2 .box .icon{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%; 
	background: #fff;
	transition:0.5s;
	z-index:1;
}
.apps-container .box:hover .icon img,.apps-container2 .box:hover .icon img{
	opacity: 0;


}
.apps-container .box .icon img, .apps-container2 .box .icon img{
	position:absolute;
	top:58%;
	
	left:50%;
	transform: translate(-50%, -50%);
	font-size:80px;
	transition: 0.5s;
	color:#0E4A92;
}


.apps-container .box:hover .icon,.apps-container2 .box:hover .icon{

	left:calc(50% - 40px);
	width:80px;
	height:10px;
	color:#0E4A92;



}
.apps-container .box:hover .icon h3,.apps-container2 .box:hover .icon h3{

	left:calc(50% - 40px);
	width:80px;
	height:80px;
	color:#fff;



}
.apps-container .box .icon .fa,.apps-container2 .box .icon .fa{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	font-size:80px;
	transition: 0.5s;
	color:#0E4A92;
}

.apps-container .box .icon h3,.apps-container2 .box .icon h3{
	position:absolute;
	top:20%;
	left:50%;
	transform: translate(-50%, -50%);
	text-align: center;	
	color:#0E4A92;
	margin:0 0 10px;
	padding:0;
	display: inline;
	font-size:24px;
}


.apps-container .box:hover .icon .fa,.apps-container2 .box:hover .icon .fa{
	font-size:40px;
}
.apps-container .box .content,.apps-container2 .box .content{
	position:absolute;
	top:100%;
	height:calc(100% - 100px);
	text-align:center;
	padding:20px;
	box-sizing: border-box;
	transition:0.5s;
	opacity: 0;

}
.apps-container .box:hover .content{
	top:20px;
	opacity:1;
}
.apps-container2 .box:hover .content{
	top:30px;
	opacity:1;
}
.apps-container .box .content h3,.apps-container2 .box .content h3{
	margin:0 0 10px;
	padding:0;
	color:#0E4A92;
	font-size:24px;
}
.apps-container .box .content p,.apps-container2 .box .content p{
	margin:0;
	padding:0;
	color: #0E4A92;
}


@media (max-width: 900px){
	.apps-container{
	position: relative;
	width:1200px;
	height:300px;
	margin:60px auto;
	background: #fff;

	display: grid;
	grid-template-columns: 1fr;

	justify-content: center;
	align-items: center;


}
.apps-container2{
	position: relative;
	width:1200px;
	height:270px;
	margin:auto;
	background: #fff;
	padding:0;

	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	align-items: center;


}


}