/* Includes
---------------------------*/
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* Elements
---------------------------*/
* {padding: 0px; margin: 0px;}

html, body {width: 100%; height: 100%;}
body {font-family: "Open Sans"; color: #6E6E6E; font-size: 1em; line-height: 1.3;}

h1,h2,h3,h4,h5 {font-family: "Oswald"; color: #444444;}
h1 {font-size: 3em; line-height: 1.5em;}
h2 {font-size: 2.2em; line-height: 1.5em;}
p {font-family: "Open Sans"; color: #6E6E6E; margin-top: 0px; font-size: 1em; line-height: 1.3em;}
a {color: #009ACD;}
hr {margin: 10px 0 10px 0;}

/* Classes
---------------------------*/
.outerContainer {position: relative; width: 100%;}
.innerContainer {position: relative; width: 100%; max-width: 1080px; margin: auto; background: #FFFFFF;}
.horizontalPadding {padding: 0 15px 0 15px;}

.button:hover {cursor: pointer;}

.category {float: left; width: 23.3%; margin: 16px 2% 0 0; font-size: 18px;}
.category img {display: inline-block; width: 100%;}
.category h3 {clear: both;}

.article {box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; text-align: center !important;}
.article > div > img.articleImage {width: 100%; min-height: 187px; display: block; position: relative;}
.article img {width: 100%;}
.article div center img {width: 95%;}

.headerSocialButton {width: 35px; display: inline-block; margin-left: 6px; background: #BCC3D2; border-radius: 20px;}
.headerSocialButton:hover {background: #CDD4E3;}

.infoBlock {background: #BCC3D2; color: white; padding: 4px 15px; font-size: 17px;}

.homeFeatureNewsItem {width: 38%; float: left; border: 6px solid #DDDDDD; box-sizing: border-box; margin-right: 2%; position: relative;}
.homeFeatureNewsItem img {width: 100%; display: block;}
.homeFeatureNewsItem div {position: absolute; width: 100%; width: 100%; bottom: 0px; background: #FFFFFF; opacity: 0.85; bottom: 0px; text-align: center;}
.homeFeatureNewsItem div h2 {font-size: 30px; line-height: 40px; color: #333333; text-transform: uppercase; padding: 20px 10px 0 10px;}
.homeFeatureNewsItem div p {padding: 10px 10px 20px 10px; font-size: 18px; line-height: 22px;}

.homeNewsItem {width: 18.7%; float: left; border: 6px solid #DDDDDD; box-sizing: border-box; margin-right: 1.3%; margin-bottom: 12px; position: relative;}
.homeNewsItem img {width: 100%; display: block;}
.homeNewsItem div {position: absolute; width: 100%; width: 100%; bottom: 0px; background: #FFFFFF; opacity: 0.85; bottom: 0px; text-align: center;}
.homeNewsItem div h2 {font-size: 18px; line-height: 22px; color: #333333; text-transform: uppercase; padding: 12px 10px 0 2px;}
.homeNewsItem div p {padding: 7px 10px 10px 11px; font-size: 12px; line-height: 14px;}

/* ID's and sections
---------------------------*/
#headerContainer {width: 100%; height: 320px; top: 0px; position: absolute; z-index: 0;}
#header {width: 100%; height: 320px; top: 0px; background-size: 100%; background-repeat: no-repeat; background-position: center center; border-bottom: 3px solid #666666; position: fixed; z-index: 0;}

#headerContent {width: 100%; height: 320px; top: 0px; position: relative; color: white; text-align: right;}
#headerContent img {z-index: 2; position: relative;}

#mobileMenu {width: 70%; height: 100%; background: #CCD4E1; position: absolute; left: -70%; z-index: 1000; -webkit-box-shadow: 0px 0px 73px 0px rgba(0,0,0,0.7); -moz-box-shadow: 0px 0px 73px 0px rgba(0,0,0,0.7); box-shadow: 0px 0px 73px 0px rgba(0,0,0,0.7); opacity: 0;}
#mobileMenuClose {width: 100%; height: 100%; z-index: 999; position: fixed; background: rgba(0, 0, 0, 0.4); top: 0px; left: 0px; display: none;}

#nav {width: 100%; position: relative; top: -22px;}
#nav #logo {width: 1080px; height: auto; margin: auto; position: relative; z-index: 1;}
#nav #navbgl {background: #BCC3D2; height: 101px; width: 25%; position: absolute; top: 17px; z-index: 0; left: 0px;}
#nav #navbgr {background: #BCC3D2; height: 101px; width: 25%; position: absolute; top: 17px; z-index: 0; right: 0px;}
#nav #leftGroup .navItem {float: left; margin-right: 1.3%;}
#nav #rightGroup .navItem {float: left; margin-left: 1.3%;}
#nav .navItem {width: 32%; height: 101px; overflow: hidden; text-align: center; position: relative;}
#nav .navItem img {width: 60%; margin-top: 9px;}
#nav .navItem span {position: absolute; bottom: 9px; left: 0px; width: 100%; text-align: center; color: white; font-size: 18px;}

/* Group: 285px */
/* Item: 85px */
#nav #navInnerContainer {width: 100%; height: 101px; margin: auto; z-index: 2; position: absolute; top: 17px;}
#nav #leftGroup {width: 285px; height: 101px; position: absolute; left: 0px; top: 0px; z-index: 3;}
#nav #rightGroup {width: 285px; height: 101px; position: absolute; right: 0px; top: 0px; z-index: 3;}

#navDropdown {width: 100%; color: white; padding: 5px 3px; position: absolute; top: 100px; left: 0px; background: #BCC3D2; box-sizing: border-box; display: none; z-index: 2;}
#navDropdown * {text-decoration: none;}
#navDropdown a:hover {color: #BCC3D2;}

#body {padding: 25px 0 60px 0;}
#body p {margin-top: 15px;}

#footerBGHider {width: 100%; position: absolute; z-index: 0; background-image: url("/site/images/components/headerimage.jpg"); background-size: 100%; background-repeat: no-repeat; background-position: center bottom;}
#footer {background: rgba(30, 30, 30, 0.8); color: #FFFFFF;}
#footer * {font-size: 14px; color: #FFFFFF;}

/* Forms
******************************************/
.mainForm {width: 100%;}
.mainForm td {padding: 8px 0 8px 0px;}
.mainForm input {width: 100%; padding: 5px; height: 34px; font-size: 14px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.mainForm textarea {width: 100%; max-width: 100%; height: 50px; max-height: 100px; padding: 5px; font-size: 14px; font-family: "Open sans"; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.mainForm select {width: 100%; padding: 5px; height: 34px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.mainForm input[type="checkbox"] {width: 100%; height: 18px;}
.mainForm input[type="submit"] {width: 100%; height: 30px; background: #BCC3D2; color: white; font-weight: bold; border: 0px; height: 40px; border-radius: 10px;}
.mainForm input[type="submit"]:hover {cursor: pointer;}

.mainForm .search-field {width: 100%; border: 1px solid #CCCCCC; position: relative;}
.mainForm .search-field input[type='text'] {border: none; width: 87%; text-transform: uppercase; padding: 5px;}
.mainForm .search-field input[type='submit'] {background-image: url("../images/components/search.jpg"); background-repeat: no-repeat; background-position: right; width: 27px; height: 26px; border: none; 
position: absolute; right: 3px; background-color: white; top: 2px;}

/* Pagination
******************************************/
.pagination {margin: 20px 0 10px 0; clear: both; float: left; width: 100%;}

.pagination .item {
	padding: 2px 7px 3px 7px;
	display: inline-block;
	margin-right: 3px;
	border: 1px solid #CCCCCC;
	background: #EEEEEE;
	color: #e2ae63;
	text-decoration: none;
	font-size: 13px;
}

.pagination div.item {color: #999999; background: #F6F6F6;}
.pagination a.item.selected {background: #ed1556; color: white !important;}
.pagination a.item:hover {background: #ed1556; color: white !important;}

/* Breadcrumbs
--------------------------------------------------------*/
.breadcrumbs {display: block; padding: 9px 0 9px 0; font-size: 13px; border-bottom: 1px solid #CCCCCC; margin-bottom: 15px;}
.breadcrumbs span {font-size: 11px;}
.breadcrumbs a {text-decoration: none;}

/* Mobile only */
@media screen and (max-width: 1080px){
	#headerContainer {display: none;}
	#header {display: none;}
	#headerContent {display: none;}
	#nav {display: none;}
	#footer {display: none;}
	#footerBGHider {display: none;}

	.nonMobileOnly {display: none !important;}
	.article {width: 100% !important;}
}

/* Non mobile only*/
@media screen and (min-width: 1080px){
	.mobileOnly {display: none;}
}

.showOnPrint {display: none;}
/* Print */
@media print {
	#headerContainer {display: none;}
	#header {display: none;}
	#headerContent {display: none;}
	#nav {display: none;}
	#footer {display: none;}
	#footerBGHider {display: none;}
	.mobileOnly {display: none;}
	.hideOnPrint {display: none;}
	.showOnPrint {display: block;}
}