* {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

/* BASIC */



h1 {
  font-family: Trebuchet, sans-serif;
  font-size: 50px;
  color: black;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  overflow-wrap:break-word;
  padding: 50px 0px 25px 0px;
}

h1.hero {
  font-family: Trebuchet MS, sans-serif;
  font-size: 50px;
  color: #000000;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  overflow-wrap:break-word;
  padding: 40px 20px;
  z-index:2;
  animation: h1;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
}

h2 {
  font-family: Trebuchet MS, sans-serif;
  font-size: 40px;
  color: black;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  overflow-wrap:break-word;
  padding: 50px 0px 25px 0px;
}

.split2brown h2 {
  color: #faf9f2;
}

.rowbrown h2 {
  color: #e3ddbb;
}

.split2green h2 {
  color: #faf9f2;
}

h3 {
  font-family: Trebuchet MS, sans-serif;
  font-size: 28px;
  color: black;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap:break-word;
  padding: 50px 0px 25px 0px;

}

.split2brown h3 {
  color: #000000;
}

.split2brown h3 {
  color: #000000;
}

.rowbrown h3 {
  color: #ffffff;
}

.footer h3 {
  color: #ffffff;
}

h4 {
  font-family: Trebuchet MS, sans-serif;
  font-size: 24px;
  color: black;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap:break-word;
  padding: 50px 0px 25px 0px;

}

.split2brown h4 {
  color: #000000;
}

.rowbrown h4 {
  color: #ffffff;
}

p {
  font-family: georgia, serif;
  color: #595959;
  font-size: 18px;
  line-height: 2;
  overflow-wrap:break-word;
  padding: 30px 0px;
}

p.quote {
  font-family: georgia, serif;
  color: #000000;
  font-size: 30px;
  line-height: 2;
  overflow-wrap:break-word;
  padding: 30px 0px;
  animation-name: quote;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

p.quote2 {
  font-family: georgia, serif;
  color: #595959;
  font-size: 20px;
  line-height: 2;
  overflow-wrap:break-word;
  padding: 30px 0px;
  animation-name: quote;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

p.imagetext {
  font-family: georgia, serif;
  color: #789d9d;
  font-size: 17px;
  line-height: 1.5;
  overflow-wrap:break-word;
  padding: 30px 0px;
  font-style: oblique;
}

.split2brown p {
  color: #ffffff;
}

.split2green p {
  color: #ffffff;
}

.rowbrown p {
  color: #ffffff;
}

a {
  font-family: Trebuchet MS, sans-serif;
  color: #789d9d;
  font-size: 18px;
  text-decoration: none;
  overflow-wrap:break-word;
  transition-duration: 0.4;
}

a:hover {
  font-family: Trebuchet MS, sans-serif;
  color: #2b4456;
  font-size: 18px;
  text-decoration: none;
  overflow-wrap:break-word;
  transition-duration: 0.4s;
}

a.link22 {
  font-family: Trebuchet MS, sans-serif;
  color: #789d9d;
  font-size: 22px;
  padding:10px 5px;
  text-decoration: none;
  line-height: 2;
  overflow-wrap:break-word;
  transition-duration: 0.4;
}

a.link22:hover {
  font-family: Trebuchet MS, sans-serif;
  color: #2b4456;
  font-size: 22px;
  padding:10px 5px;
  text-decoration: none;
  line-height: 2;
  overflow-wrap:break-word;
  transition-duration: 0.4s;
}

a.link30 {
  font-family: Trebuchet MS, sans-serif;
  color: #789d9d;
  font-size: 30px;
  text-decoration: none;
  line-height: 2;
  overflow-wrap:break-word;
  transition-duration: 0.4;
}

a.link30:hover {
  font-family: Trebuchet MS, sans-serif;
  color: #2b4456;
  font-size: 30px;
  text-decoration: none;
  line-height: 2;
  overflow-wrap:break-word;
  transition-duration: 0.4s;
}


a.footer {
  font-family: Georgia, serif;
  color: #c1c1c1;
  font-size: 18px;
  text-decoration: none;
  transition-duration: 0.4;
}

a.footer:hover {
  font-family: Georgia, serif;
  color: #ffffff;
  font-size: 18px;
  text-decoration: none;
  transition-duration: 0.4s;
}

a.social {
  margin: 25px;
}

a.social:hover {
  opacity:0.7;
  transition-duration: 0.4s;
}

a.image {
}

a.image:hover {
  opacity: 0.7;
  transition-duration: 0.4s;
}


.button {
  background-color: #3f5b74;
  border: none;
  color: White;
  padding: 20px 30px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  font-size: 20px;
  overflow-wrap:break-word;
  border-radius: 5px;
  cursor: pointer;
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #2b4456;
  color: white;
  font-size: 20px;
}

ul {
  font-family: georgia, serif;
  color: #000000;
  font-size: 18px;
  line-height: 2;
  overflow-wrap:break-word;
  padding: 30px;
}

/* NAVBAR */


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

.hamburger {
  position: absolute;
  top:0;
  right:0
}

.toggle, [id^=drop] {
	display: none;
}

nav {
	margin:0;
	padding: 0px 85px 0px 85px;
	background-color: #fbf9f1;
  position: sticky;
  top:0;
}

#logo {
	display: block;
	padding: 0 20px;
	float: left;
}

nav:after {
	content:"";
	display:table;
	clear:both;
}

nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}

nav ul li {
	margin: 0px;
	display: inline-block;
	float: left;
	background-color: #fbf9f1;
	}

nav a {
	display:block;
	padding:20px 20px 10px 20px;
	color:#797979;
  font-family: Georgia, serif;
	font-size:18px;
  line-height: 140%;
	text-decoration:none;
}


nav ul li ul li:hover { color: #000000; }

nav a:hover {
  font-family: Georgia, serif;
	color: #000000;
}

nav ul ul {
	display: none;
	position: absolute;
	top: 60px;
}

nav ul li:hover > ul {
	display:inherit;
}

nav ul ul li {
	width:200px;
	float:none;
	display:list-item;
	position: relative;

}

nav ul ul ul li {
	position: relative;
	top:-60px;
	left:200px;
}

li > a:after { content:  ' \25BC'; font-size:10px }
li > a:only-child:after { content: ''; }

@media all and (max-width : 1020px) {
	#logo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
	}

	.toggle + a,
	.menu {
		display: none;
	}

	.toggle {
		display: block;
		background-color: #fbf9f1;
		padding:14px 20px;
		color:#797979;
		font-size:18px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #fbf9f1;
    color: #000000;
    cursor: pointer;
	}

	[id^=drop]:checked + ul {
		display: block;
	}

	nav ul li {
		display: block;
		width: 100%;
    font-family: Georgia, serif;
    font-size: 18px;
    color: #797979;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #fbf9f1;
	}

	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;
		color:#797979;
		font-size:18px;

	}


	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #ffffff;
	}

	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
	}

	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}

	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
	}
}


@media all and (max-width : 320px) {
	nav ul li {
		display:block;
		width: 94%;
	}
}


/* GRAPHICS */


hr.line30 {
  border:none;
  border-top: 2px solid black;
  width: 30%;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

hr.line5dotted {
  border:none;
  border-top: 5px dotted #e3ddbb;
  width: 25px;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

hr.line80 {
  border:none;
  border-top: 1px solid black;
  width: 80%;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

hr.line80bold {
  border:none;
  border-top: 3px solid black;
  width: 80%;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

hr.line10footer {
  border:none;
  border-top: 1px solid grey;
  width: 10%;
  margin: 0% 0% 0% 90%;
}

.vlgrey {
  border-left: 2px solid #dcdcdce6;
  height: 300px;
  margin-left: 49.9%;
  margin-top: -200px;
  z-index:2;
  animation: h1;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
}

.circle {
  height: 300px;
  width: 300px;
  background-color: #ece686;
  border-radius: 50%;
  margin-left: 10%;
}




/* DIV STYLES */

.herobanner {
  text-align: center;
  width: 100%;
  height:700px
  animation-name: heroimage;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  background-color: #faf9f2;
}

.herobanner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.herobannerfrontpage {
  text-align: center;
  height:750px;
  background-image: url("images/banners/testbanner-sh.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /*animation-name: heroimage;
  animation-duration: 1.5s;
  animation-iteration-count: 1;*/

}

.herobannerfrontpage img {
  padding: 100px;
  width: 600px;
  height: 600px;
}

.heroimage-mobile {
  display: flex;
  background-color: #faf9f2;
  justify-content: center;
  align-items: center;
  padding: 50px 0px 50px 0px;
  animation-name: heroimage;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

.heroimage-mobile img {
  border-radius: 50%;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
}

.topimage {
  flex:100%;
  text-align: center;
  margin-top: 100px;
}

.topimage img {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  padding: 30px;
}




.row {
  display: flex;
  flex-wrap: wrap;
}

.rowgrey {
  display: flex;
  flex-wrap: wrap;
  background-color: #dcdcdc;
  padding: 30px 0px;
}

.rowbrown {
  display: flex;
  flex-wrap: wrap;
  color: #ffffff;
  background-color: #533b57;
  padding: 50px 30px;
}


/* Main frameset */

.sideleft {
  flex: 15%;
  background-color: #f6f3e8;
}


.main {
  flex: 70%;
  max-width: 1200px;
  background-color: #faf9f2;
}

.sideright {
  flex: 15%;
  background-color: #f6f3e8;
}

/* blog styles */

.blogcontent {
  flex: 76.99%;
  background-color: white;
  padding: 20px 30px;
  text-align:center;
}

.blogline {
  flex: 1.99%;
  background-color: white;
  text-align:center;
}

.blogsidebar {
  flex: 22.99%;
  background-color: white;
  padding: 20px 20px;
  text-align:center;
}


/* More div styles */


.full {
  flex: 100%;
  padding: 20px 20px;
  text-align: center;
}

.full img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  padding: 10px 0px 0px 0px;
}

.fullbrown {
  flex: 100%;
  padding: 20px 20px;
  text-align: center;
  background-color: #6e6f6a;
}

.fulltriangle {
  flex: 100%;
  padding: 20px 20px;
  text-align: center;
  background-image: url("images/graphics/yellow-triangle.svg");
}

.split2 {
  flex: 49.99%;
  padding: 20px 40px;
}

.split2center {
  flex: 49.99%;
  padding: 20px 30px;
  text-align: center;
}

.split2 img {
  width: 100%;
  aspect-ratio: 2 / 3;
  max-height: 500px;
  object-fit: cover;
  padding: 30px 0px 0px 0px;
  border-radius: 0px 0px 80px 0px;
}

.split2vignet {
  flex: 49.99%;
  padding: 20px 20px;
  text-align: center;
}

.split2vignet img {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 50%;
}

.split2brown {
  flex: 49.99%;
  padding: 30px;
  color: #ffffff;
  background-color: #6e6f6a;
  text-align: center;
  border-radius: 0px 15px 15px 15px;
}

.split2green {
  flex: 49.99%;
  padding: 30px;
  color: #ffffff;
  background-color: #6D7F55;
  text-align: center;
  border-radius: 0px 15px 15px 15px;
}

.fullimage {
  flex: 100%;
  padding: 0px 0px;
  text-align: center;
}

.fullimage img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  padding: 5px 5px 0px 5px;
}

.split2image {
  flex: 49.99%;
  text-align: center;
}

.split2image img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  padding: 5px 5px 0px 5px;
}

.split2image-v {
  flex: 49.99%;
  padding: 0px 0px;
  text-align: center;
}

.split2image-v img {
  width: 100%;
  height: 650px;
  object-fit: cover;
  padding: 5px 5px 0px 5px;
}

.split3 {
  flex: 33.33%;
  padding: 20px;
}

.split3 img {
  width: 100%;
  max-width:200px;
  aspect-ratio: 1/1;
  padding: 10px 5px 0px 5px;
}

.split3image-v {
  flex: 33.33%;
  padding: 20px;
  text-align: center;
}

.split3image-v img {
  flex: 33.33%;
  width: 100%;
  height: 500px;
  object-fit: cover;
  padding: 5px 0px 0px 0px;
}


.split3grey {
  flex: 33.33%;
  padding: 20px;
  background-color: #dcdcdc;
  border-radius: 0px 15px 15px 15px;
}

.split3logo {
  flex: 33.33%;
  padding: 0px 20px;
  text-align: center;
}

.split3logo img {
  width: 100%;
  height: 200px;
  aspect-ratio: 1.43/1;
  object-fit: cover;
}

.split4 {
  flex: 24.99%;
  padding: 20px;
}


.footer {
  flex: 100%;
  background: #6D7F55;
}

.footersplit2left {
  flex: 49.99%;
  padding: 50px 50px;
  text-align: left;
}

.footersplit2right {
  flex: 49.99%;
  padding: 50px 50px;
  text-align: right;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

.centerbutton {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.quote {
  flex: 100%;
  justify-content: center;
  align-items: center;
  padding: 50px;
  font-family: georgia, serif;
  text-align: center;
}

/* ANIMATIONS */

@keyframes quote {
  from {color: #00000000;}
  to {color: #000000ff;}
}

@keyframes h1 {
  from { opacity: 0; }
  to { opacity: 100; }
}

@keyframes heroimage {
  from { opacity: 0;}
  to { opacity: 100;}
}


/* MEDIA QUERIES */

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .row {
    flex-direction: column;
  }
}

@media screen and (max-width: 800px) {
  .rowbrown {
    flex-direction: column;
  }
}

@media screen and (max-width: 800px) {
  .column {
    width: 99.99%;
  }
}

/* Text queries */

@media screen and (max-width: 800px) {
.main p {
  font-size: 18px;
  line-height: 2;
}
}

@media screen and (max-width: 800px) {
.main p.quote {
  font-size: 22px;
  line-height: 2;
}
}

@media screen and (max-width: 800px) {
.main h1 {
  font-size: 26px;
}
}

@media screen and (max-width: 800px) {
h1.hero {
  font-size: 26px;
  color: black;
  margin: 0px 10% 0px 10%;
  padding: 30px 20px;
  z-index:2;
  border-width: 2px;
  border-style: solid solid none solid;
  border-color: #dcdcdc;
  animation-name: h1;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
}



@media screen and (max-width: 800px) {
 .vlgrey {
    border-left: 2px solid #dcdcdc;
    margin-left: 49.9%;
    margin-top: -100px;
    z-index:2;
    height: 150px;
  }
}


@media screen and (max-width: 800px) {
.main h2 {
  font-size: 24px;
}
}

@media screen and (max-width: 800px) {
.main h3 {
  font-size: 22px;
}
}

@media screen and (max-width: 800px) {
.main h4 {
  font-size: 20px;
}
}

@media screen and (max-width: 500px) {
.main a.link22 {
  font-size: 18px;
}
}

@media screen and (max-width: 1000px) {
.main a.link30 {
  font-size: 24px;
}
}

@media screen and (max-width: 500px) {
.main .button {
  font-size: 18px;
}
}


/* Main frame queries*/


@media screen and (max-width: 800px) {
.sideleft {
display: none;
}
}

@media screen and (max-width: 800px) {
.sideright {
display: none;
}
}

/* Footer queries */
@media screen and (max-width: 800px) {
.footersplit2left {
text-align: center;
}
}

@media screen and (max-width: 800px) {
.footersplit2right {
text-align: center;
}
}

@media screen and (max-width: 800px) {
hr.line10footer  {
margin: auto;
}
}


/* Image queries*/

@media screen and (max-width: 1400px) {
.split2image-v img  {
height:550px;
}
}

@media screen and (max-width: 1400px) {
.split2image img  {
height:350px;
}
}