.wrapper{ 
width: 100%;
}

.info h1{ 
color: black; 
	font-size:25px; 
		font-family: arial;
			background-color: lightgrey;
				border-left: 6px solid #E0B0FF;
}

.info u{
color: black;
	font-size: 6px;
		font-family: arial;
			text-decoration: none;
				position: static;
					top: 95%;
						left: 50%;
							margin-right: -50%;
								transform: translate(-50%, -50%)
}

.info p{
color: black; 
	font-size:25px; 
		font-family: arial;
}

.topnav{
 background-color: #E0B0FF;
	overflow: hidden;
}

.topnav a {
font-family: arial;
float: left;
  color: Black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover{
 background-color: #967bb6;
	color: black;
}

.topnav a.active{
background-color: lightgrey;
	color: white;
}

.FYPcontainer {
	position: relative;
		width: 400px;
			height: 150px;
}

.FYPimage {
	opacity: 1;
		display: block;
			width: 400px;
				height: 150px;
					transition: .5s ease;
						backface-visibility: hidden;
}

.FYPtext {
position: absolute;
		top: 0;
			bottom: 0;
				left: 0;
					right: 0;
						height: 100%;
							width: 100%;
								opacity: 0;
									transition: .5s ease;
										font-family: arial;
											font-size: 15px;
}

.FYPcontainer:hover .FYPimage {
opacity: 0.0;
}

.FYPcontainer:hover .FYPtext {
opacity: 1;
}

.BMcontainer {
	position: relative;
		left:450px;
			bottom:150px;
				width: 400px;
					height: 150px;
}

.BMimage{
	opacity: 1;
		display: block;
			width: 400px;
				height: 150px;
					transition: .5s ease;
						backface-visibility: hidden;
}


.BMtext {
position: absolute;
		top: 0;
			bottom: 0;
				left: 0;
					right: 0;
						height: 100%;
							width: 100%;
								opacity: 0;
									transition: .5s ease;
										font-family: arial;
											font-size: 15px;
										
}

.BMcontainer:hover .BMimage {
	opacity:0.0;
}

.BMcontainer:hover .BMtext {
	opacity:1;
}
	
/*.AScontainer{
	position: relative;
		left:900px;
			bottom:300px;
				width: 400px;
					height: 150px;
}

.ASimage{
	opacity: 0;
		display: block;
			width: 400px;
				height: 150px;
					transition: .5s ease;
}

.AStext {
position: absolute;
		top: 0;
			bottom: 0;
				left: 0;
					right: 0;
						height: 100%;
							width: 100%;
								opacity: 1;
									transition: .5s ease;
										font-family: arial;
											font-size: 15px;
												backface-visibility: hidden;
}

.AScontainer:hover .ASimage {
	opacity:1;
}

.AScontainer:hover .AStext {
	opacity:0.0;
}*/

.FMcontainer {
	position: relative;
		left:900px;
			bottom:300px;
				width: 400px;
					height: 150px;
}

.FMimage{
	opacity: 1;
		display: block;
			width: 500px;
				height: 250px;
					transition: .5s ease;
						backface-visibility: hidden;
}


.FMtext {
position: absolute;
		top: 0;
			bottom: 0;
				left: 0;
					right: 0;
						height: 100%;
							width: 100%;
								opacity: 0;
									transition: .5s ease;
										font-family: arial;
											font-size: 15px;
										
}

.FMcontainer:hover .FMimage {
	opacity:0.0;
}

.FMcontainer:hover .FMtext {
	opacity:1;
}

.MRescontainer {
	position: relative;
		width: 450px;
			height: 475px;
}

.MResimage{
	opacity: 1;
		display: block;
			width: 450px;
				height: 475px;
					transition: .5s ease;
						backface-visibility: hidden;
}


.MRestext {
position: absolute;
		top: 0;
			bottom: 0;
				left: 0;
					right: 0;
						height: 100%;
							width: 100%;
								opacity: 0;
									transition: .5s ease;
										font-family: arial;
											font-size: 15px;
										
}

.MRescontainer:hover .MResimage {
	opacity:0.0;
}

.MRescontainer:hover .MRestext {
	opacity:1;
}