@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Roboto');
#navbar {
  /*overflow: hidden;*/
  background-color: #ffffff;
  z-index: 10;
}

.content {
  /*padding: 15px;*/
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  /*padding-top: 100px;*/
}

body {
   /*margin: 0;
 max-width:1488px;*/
 margin:auto;
	max-width:1488px;
  font-size: 95%;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color:#555555;
}



input,textarea {
	color:#555555;
	border: 1px solid #999999;
	padding:1%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-appearance:none;
	font-size:100%;
}

a {
  color:#2F7367;
}

a:hover {
  color:#555555;
}

.navlink {
  color:#ffffff;
  font-weight:bold;
  text-decoration:none;
}

.navlink:hover {
  color:#D0DDD9;
}


select {
	color:#555555;
	border: 1px solid #999999;
	padding:1%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-size:100%;
}

.button {
	color:#555555;
	background-color:#2F7367;
	border: 2px solid #ffffff;
	padding:2%;
	cursor:pointer;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-appearance:none;
	font-size:100%;
	
}

.button:hover {
	background-color:#ffffff;
	color:#2F7367;
}

h1 {
	font-size:150%;
	font-style:normal;
	color:#346B45;
}

h2 {
	font-style:normal;
	font-size:120%;
}

h3 {
	font-style:normal;
	font-size:110%;
}

h4 {
	font-style:normal;
	font-size:100%;
	color:#2F7367;
}

.blockimage {
	width:100%;	
	border:0px #cccccc solid;
}

.linkimage {
	width:100%;	
	border:0px #cccccc solid;
}

.linkimage:hover {
	opacity:0.9;
}


.textdiv {
	padding-left:20px;	
	padding-right:20px;
}

.intro-text {
	font-size: 13pt;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0px;
}

/* Create four equal columns that sits next to each other */
.column16 {
  flex: 16%;
  max-width: 16%;
  padding: 0 0px;
}

.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 0px;
}

.column33 {
  flex: 33.333%;
  max-width: 33.333%;
  padding: 0 0px;
}

.column50 {
  flex: 50%;
  max-width: 50%;
  padding: 0 0px;
}

.column66 {
  flex: 66.66%;
  max-width: 66.66%;
  padding: 0 0px;
}
.column75 {
  flex: 75%;
  max-width: 75%;
  padding: 0 0px;
}
.column100 {
  flex: 100%;
  max-width: 100%;
  padding: 0 0px;
}
.desktop_left {
	text-align:left;	
}
.desktop_center {
	text-align:center;	
}
.desktop_right {
	text-align:right;	
}


/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}
/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; 
}
/*  GRIDS  */

             
.contentblock {
	width: 32.25%;
	
}
.contentblock66 {
	width: 65.95%;
}
.container {
	width:97%;
	margin:auto;
	max-width:1488px;

}

.imageblockbg {
	background-size:110%;	
}

.blockimage_desktop {
	width:100%;
	display:block;	
}

.navlogo {
	max-height:90px;	
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1380px) {
	.imageblockbg {
		background-size:130%;
	}
}
@media screen and (max-width: 1152px) {
	.imageblockbg {
		background-size:140%;
	}
}

@media screen and (max-width: 1024px) {
	.imageblockbg {
		background-size:160%;
	}
}
@media screen and (max-width: 768px) {
	
	.sticky {
	  position:relative;
	  top: 0;
	  width: 100%;
	}
	.navlogo {
		height:160px;	
	}
	#navbar {
	  /*background-color: #ffffff;*/
	}
	body {
		font-size:130%;	
	}
	.imageblockbg {
		background-size:110%;
		min-height:200px;	
	}
	.blockimage_desktop {
		display:none;
	}

  .column {
    flex: 50%;
    max-width: 50%;
  }
  .column33 {
    flex: 100%;
    max-width: 100%;
	text-align:center;
  }
  .column16 {
	 flex: 100%;
    max-width: 100%;
	text-align:center; 
  }
  .column50 {
    flex: 100%;
    max-width: 100%;
  }
  .column66 {
    flex: 100%;
    max-width: 100%;
  }
  .column75 {
    flex: 100%;
    max-width: 100%;
  }
  .desktop_left {
	text-align:center;	
	}
	.desktop_right {
		text-align:center;	
	}
	.col { 
		margin: 1% 0 1% 0%;
	}
   .contentblock {
		width: 100%;
		text-align:center;
	}
	.contentblock66 {
		width: 100%;
		text-align:center;
	}

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 640px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
  
}