#wrapper{
	width: 1200px;
	height: 1400px;
	margin-top: 50px;
	margin-bottom: 50px;
	position: absolute;
	left: 150px;
	top: 0px;
	box-shadow: 15px 15px 50px #300040;
	}
	
	#body{
	background-image: url("Dock Workers.png");
		}	
		

		
* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 33.33%;
  padding: 5px;
}
	
	#banner{
	width: 1080px;
	height: 180px;
    background-image: url("banner.png");
	border-radius: 10px;
	border: 2px solid #200040;
	font-family: Times;
	
	color: White;
	font-size: 25px;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-name: ban;
    animation-duration: 4s;
    animation-iteration-count: infinite;
	}
	
	@-webkit-keyframes ban {
		0%{background-image: url("banner1.png");border: 2px solid #a300d9;}	
		25%{background-image: url("banner1.png");border: 2px solid #a300d9;}
		50%{background-image: url("banner.png");border: 2px solid #200040;}
		75%{background-image: url("banner.png");border: 2px solid #200040;}
		100%{background-image: url("banner1.png");border: 2px solid #a300d9;}
		}
	
	
	
	
	#center{
    position: absolute;
    top: 30px;
    left: 350px;
	z-index: 1000;
	font-size: 50px;
	text-align: left;
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px #200040, 0 0 5px #200040;
	 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
	}
	
	@-webkit-keyframes example {
	0%{color: white;  text-shadow: 1px 1px 2px black, 0 0 25px #200040, 0 0 5px #200040;}
	25%{color: white; text-shadow: 1px 1px 2px black, 0 0 25px #200040, 0 0 5px #200040;}
	50%{color: #200040;text-shadow: 1px 1px 2px black, 0 0 25px #200040, 0 0 5px white;}
	75%{color: #200040;text-shadow: 1px 1px 2px black, 0 0 25px #200040, 0 0 5px white;}
	100%{color: white;text-shadow: 1px 1px 2px black, 0 0 25px #200040, 0 0 5px #200040;}
	}
	
	@keyframes example {
    0%{color: white;  text-shadow: 1px 1px 2px black, 0 0 25px #200040, 0 0 5px #200040;}
	25%{color: white; text-shadow: 1px 1px 2px black, 0 0 25px #200040, 0 0 5px #200040;}
	50%{color: #200040;text-shadow: 1px 1px 2px black, 0 0 25px #200040, 0 0 5px white;}
	75%{color: #200040;text-shadow: 1px 1px 2px black, 0 0 25px #200040, 0 0 5px white;}
	100%{color: white;text-shadow: 1px 1px 2px black, 0 0 25px #200040, 0 0 5px #200040;}
	}
	
	#navbar{
	width: 165px;
	height: 1100px;
	background-image: linear-gradient(#200040 , #b973ff);
	border-radius: 10px;
	padding: 5px;
	z-index: 999;
	position: absolute;
	float: left;
	
	}
	
	#content{
	width: 1080px;
	height: 1110px;
	border: 1px solid #300040;
	background-image: linear-gradient(#ffbfff , #ffffff);
	z-index: 998;
	border-radius: 10px;
	position: relative;
	float: left;
	
	
	}
	#complete{
		width: 835px;
		height: 1085px;
		background-color: #ffffff;
		border-radius:10px;
		border: 1px solid #300040;
		position: absolute;
		left: 240px;
		top: 10px;
		z-index: 1000;
		opacity: 0.8;
		box-shadow: -15px -15px 50px #300040;
		overflow: auto;
		
		
	}
	
	#main_place{
		color: #000000;
		font-size: 20px;
		font-family: arial;
		font-weight: bold;
		text-align: justify;
		margin-left: 0;
		padding: 40px;
		
		
		
		}
	

	#foot{
	width: 1080px;
	height: 120px;
	position: absolute;
	top: 1110px;
	left: 0;
	border: 1px solid #300040;
	background-image: url("footer.png");
	border-radius: 10px;
	float: left;
	}
	
	
	
	
	.boxshadow{
	width: 150px;
	height: 150px;
	border: 1px solid #ffbfff;
	border-radius: 10px;
	transition:  .3s width;
	text-align: center;
	margin: 22px 2px 22px 2px;
	font-size: 20px;
	color: white;
	line-height: 200px;
/*background-color: orange;*/
	background-image: url("cir4.png");
	box-shadow: 15px 15px 35px #cacaca;
	
	}
	
	.boxshadow:hover{
	box-shadow: 10px 10px 25px #cacaca;
	color: white;
	border: 1px solid #313140;
	text-shadow: 4px 4px #313140;
	font-size: 35px;
	width: 225px;
	
	background-image: url("banner.png");
	cursor: pointer;
	
	}
	.five:hover{
	background-image: url("king.png");
	}
	.two:hover{
	background-image: url("Belfast.png");
	}
	
	.three:hover{
	background-image: url("tree.png");
	}
	.four:hover{
	background-image: url("cenus.png");
	}
	.six:hover{
	background-image: url("time.png");
	}
	.link{
		text-decoration: none;
	}