.head-img {
	position: relative; 
	width: 35%;
	height: auto; 
	margin: 1%; 
	float: right;
}

.small-header {
	width: 100%;
	height:21%;
	background-color:#F1A100;
	overflow: visible;
	display: none;
}

.mid-header {
	width: 100%;
	height:20%;
	background-color:#F1A100;
	overflow: visible;
	display: none;
}

.large-header {
	width: 100%;
	height:22%;
	background-color:#F1A100;
	overflow: visible;
	display: block;
}

.midframe {
	width: 100%;
	height: 100%;
}

.small-footer {
	height:15%; 
	background-color:#F1A100;
	display: none;
}

.mid-footer {
	height:15%; 
	background-color:#F1A100;
	display: none;
}

.large-footer {
	height:15%; 
	background-color:#F1A100;
	display: block;
}

@media only screen and (max-width: 1050px) {
	.small-header, .large-header{
		display: none;
	}

	.mid-header {
		display: block;
	}

	.small-footer, .large-footer {
		display: none;
	}

	.mid-footer {
		height:20%; 
		display: block;
	}
	
}

@media only screen and (max-width: 850px) {
	.head-img {
		width: 100%; 
		height: 50%; 
	}

	.small-header {
		display: block;
	}

	.mid-header, .large-header {
		display: none;
	}

	.small-footer {
		height:17%; 
		display: block;
	}

	.mid-footer, .large-footer {
		display: none;
	}
}

.dropdown {
	position: relative;
	display: block;
}

.dropdown-content {
	display: none;
	position: absolute;
	color: black;
	background-color: #aaa;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,2);
	padding: 12px 16px;
	z-index: 1;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown-content a:hover {background-color: rgb(255, 255, 255);}

.scrollbar {
	background-color: #ffffff;
	float: left;
	width: 18%;
	height: 85%;
	overflow-x: hidden;
	overflow-y: scroll;
}

.scrollbar img {
	width: 90%;
	height: auto;
	margin: 1%;
}

.left-img {
	float:left;
	width:35%;
	height:auto;
	margin:15px;
}

.right-img {
	float:right;
	width:35%;
	height:auto;
	margin:15px;
}