* {
	box-sizing:border-box;
}

body {
	margin: 0;
	background-color: #e5e5e5;
	font-family:Arial;
}

H1 {
	font-size: 3vmax;
}

H2 {
	font-size: 2.25vmax;
}

H3 {
	font-size: 2vmax;
}

p {
	font-size: 2vmin;
}

img {
	max-width: 100%;
	max-height: 100%;
}

.topnav {
	overflow: hidden;
	position:fixed;
	top: 0;
	width: 100%;
	border: 1px solid #e7e7e7;
	background-color: #ADD8E6;
}

.topnav a {
	float: left;
	display: block;
	color: black;
	padding: 14px 16px;
}

.home:hover {
	--fill: white;
}

.home {
	--fill: black;
}

.button:hover {
	background-color: #CC3232;
	color:white;
	transform: translate(10px, 10px);
}

.button {
	border-right: 1px solid #bbb;
	color: black;
	padding: 15px 40px;
	text-aligh: center;
	text-decoration: none;
	font-size: 16px;
	cursor:pointer;
}

.topnav .menu {
	display:none;
}

.menu {
	width: 25px;
	height: 25px;
	margin: 1px;
	background-image: linear-gradient(to right, #e91e63, #f44336);
	border-radius: 1px;
	cursor: pointer;
}

.menu div {
	width: 20px;
	height: 20px;
	margin:3px;
	position: relative;
}

.menu span {
	background: #fff;
	width: 100%;
	height: 2px;
	boder-radius: 1px;
	display: block; 
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.menu .line1 {
	transform: translate(-50%, -9px);
}

.menu .line3 {
	transform:translate(-50%, 7px)
}
	
.openmenu .line1 {
	 transform: translate(-50%, -50%) rotate(-45deg);
}
 
.openmenu .line3 {
 	transform: translate(-50%, -50%) rotate(45deg);
 }
.openmenu .line2 {
	width: 0;
}  


.header {
	background-color: blue;
	overflow: hidden;
	width: 100%;
	display:flex;
	align_item:center;
	justify-content:center;
	color:white;
	padding-top: 50px;
}	

.subheading {
	background-color: lightblue;
	display:flex;
	align_item:center;
	justify-content:center;
}

.flexwrapper {
  display: flex;
  flex-direction: row;
  background: linear-gradient(#e5e5e5,#ADD8E6);
  box-shadow: inset 0 0 10vw #ADD8EE;
}


.left {
  width: 25%;
  padding: 1vw; 
}

.middle { 
	width: 50%; 
	padding: 1vw;
}

.columnhead {
	color:blue;
	display: flex;
	align-item: center;
	justify-content: center;
}

.right {
   width: 25%; 
   padding: 1vw; 
}

.footer {
	background-color:lightblue;
	text-align: center;
	padding: 10px;
	width: 100%;
}



@media screen and (max-width: 1240px) {
	.flexwrapper {
		flex-direction:row;
		flex-wrap: wrap;
	}

	.left {
  		width: 100%;
  		order: 3;
  	}
  	
 	.middle {
  		width: 67%;
  		order: 2;
  	}
  	
  	.right {
  		width: 33%;
  		order: 1;
  	}
  	
}

@media screen and (max-width: 768px) {
	.topnav a:not(:first-child) {
		display:none;
	}
	
	.topnav.responsive {
		position: relative;
	}

	.topnav.responsive .menu {
		position: absolute;
		right: 0;
		top: 0;
	}

	.topnav.responsive a {
		float:none;
		display: block;
		text-aligh: left;
		
	}
	
	.topnav .menu {
		display: block;
		position:absolute;
		right: 3px;
		top: 3px	
	}
	
.flexwrapper {
	flex-direction:column;
}

 	.left, .middle, .right {
 	   width: 100%;
  	}
  	
  	.middle {
  		order: 1;
  	}
  	
  	.right {
  		order: 3;
  	}
  	
  	.left {
  		order: 2;
  	}
}