* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
	font-size:1em;
	font-family: Arial;
	color:#0073ff;
	background-color:#ffffff;
}

#BHexPageContainer {
	width:1000px;
	max-width:100%;
	margin:0 auto;
}

.container {
	display:flex;
	display:-webkit-flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
}

.flexItemLogo {
	flex:1;
	-webkit-flex:1;
	display:flex;
	display:-webkit-flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
}
.flexItemLogo img {
	width:150px;
	max-width:100%;
	height:auto;
}

.flexItemTitle {
	flex:4;
	-webkit-flex:4;
}

.BHexTitle {
	text-align:center;
	text-shadow:0 0 10px #0073ff, 20px -20px 10px #008aff, -10px -10px 10px #00b7ff, 30px 30px 30px #0081ff;
	color:#fff;
	font-size:3em;
	font-family: Arial;
	margin-bottom:0em;
}
.BHexSubTitle {
	text-align:center;
	font-size:1em;
	font-family: Arial;
	color:#80c0ff;
	margin-top:0em;
}
.BHexSubTitle::after {
	content:"";
	display:block;
	clear:both;
	background: -webkit-linear-gradient(
	left, rgba(112, 176, 255, 0) 0%, rgba(112, 176, 255, 1) 20%,
	rgba(112, 176, 255, 1) 80%, rgba(112, 176, 255, 0) 100%);
	height:1px;
}

.navContainer {
	display:flex;
	display:-webkit-flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
}

.flexItemNavigation {
	flex:3;
	-webkit-flex:3;
}
.flexItemNavigation ul {
	display:flex;
	display:-webkit-flex;
	flex-direction:row;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.flexItemNavigation a {
	text-decoration: none;
	text-align:center;
	margin-top:1em;
	margin-bottom:1em;
	flex:1;
	-webkit-flex:1;
}
.flexItemNavigation li {
	padding:0.5em;
    background-color:#0073ff;
    color:white;
	font-weight: bold;
    box-shadow:0px 0px 5px rgba(0,0,0,0.5);
	border-top-left-radius: 5px;
	border-top-right-radius: 15px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 5px;
}
.flexItemNavigation li:hover {
    background-color:#22aaff;
	color:#ffcc00;
	box-shadow:0px 0px 5px rgba(192,92,0,0.9);
}

.flexItemSearch {
	display:none;
	flex:2;
	-webkit-flex:2;
}
.flexItemSearch form {
	float:right;
	width:95%;
	overflow:auto;
}
.flexItemSearch input {
	flex:1;
	-webkit-flex:1;
	font-size:1em;
	float:left;
	width:45%;
	padding:0.25em;
	margin-top:1em;
	margin-bottom:1em;
	border:solid 1px #80c0ff;
	color:#0073ff;
}
#SearchButton {
	float:right;
	width:50%;
	border-radius: 10px;
	background-color:white;
}
#SearchButton:hover {
	box-shadow:0px 0px 5px rgba(255,192,0,0.5);
}

.mainContainer {
	width: 60%;
	margin:0 auto;
	padding-top:1em;
}

.articleContainer {
	display:block;
	margin-bottom:1em;
	color:#7092be;
	background:#f2f9fb;
	background: -webkit-linear-gradient(#e0e0fb 0%, #f2f9fb 20%);
	box-shadow:2px 2px 2px rgba(0,0,0,0.15);
}
.articleContainer::after {
    content: "";
    clear: both;
    display: block;
}

.articleTitle {
	display:flex;
	display:-webkit-flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
}

.articleName {
	flex:4;
	-webkit-flex:4;
	color:#d26000;
}
.articleName h3 {
	color:#d26000;
	margin:0.65em;
	text-decoration: underline;
}
.articleBadge {
	flex:1;
	-webkit-flex:1;
}
.articleBadge img {
	max-width:100%;
	height:auto;
	float:right;
}

.articleShortStory img {
	max-width:33%;
	height:auto;
	float:right;
	margin-left: 20px;
	margin-bottom: 20px;
	border-radius: 25px;
}

.articleShortStory p {
  text-align: justify;
  text-indent: 2em;
  padding:1em;
}

.BHexFooter {
	text-align:center;
}
.BHexFooter::before {
	content:"";
	display:block;
	clear:both;
	background: -webkit-linear-gradient(
	left,rgba(0, 0, 255, 0) 0%,rgba(0, 0, 255, 1) 20%,rgba(0, 0, 255, 1) 80%,rgba(0, 0, 255, 0) 100%);
	height:1px;
}
.BHexFooter::after {
	content:"";
	display:block;
	clear:both;
	background: -webkit-linear-gradient(
	left,rgba(0, 0, 255, 0) 0%,rgba(0, 0, 255, 1) 20%,rgba(0, 0, 255, 1) 80%,rgba(0, 0, 255, 0) 100%);
	height:1px;
}


@media (max-width:640px) and (min-width: 320px) {

	#BHexPageContainer {
		width:100%;
	}
	
	.BHexTitle {
		font-size:2em;
	}
	
	.navContainer {
		flex-direction:column;
		align-items:stretch;
	}
	
	.mainContainer {
		width: 90%;
	}
	
	.flexItemNavigation ul {
		flex-direction:column;
		align-items:stretch;
	}

	.flexItemNavigation a {
		margin-top:0.1em;
		margin-bottom:0.1em;
	}
	
	.articleName h3 {
		text-align:center;
	}
	
	.articleBadge {
		flex:2;
		-webkit-flex:2;
	}
	
	.articleBadge img {
		width:auto;
		height:2em;
	}

}



@media (max-width:320px) {

	#BHexPageContainer {
		width:100%;
	}
	
	.BHexTitle {
		font-size:1em;
	}
	
	.navContainer {
		flex-direction:column;
		align-items:stretch;
	}
	
	.mainContainer {
		width: 90%;
	}
	
	.flexItemNavigation ul {
		flex-direction:column;
		align-items:stretch;
	}

	.flexItemNavigation a {
		margin-top:0.1em;
		margin-bottom:0.1em;
	}
	
	.articleName h3 {
		text-align:center;
	}
	
	.articleBadge {
		flex:2;
		-webkit-flex:2;
	}
	
	.articleBadge img {
		width:auto;
		height:2em;
	}

}