@font-face{
  font-family: "Lato";
  src: url(Lato-Regular.ttf);
}

@font-face{
  font-family: "PT Sans";
  src: url(PT_Sans.ttf);
}

@font-face{
  font-family: "Open sans";
  src: url(OpenSans-Bold.ttf);
}

*{
  margin: 0;
  padding: 0;
  font-family: "Lato";
  scroll-behavior: smooth;
}

a{
  text-decoration: none;
}


h2,h3,h4{
  font-family: Open Sans;
}

#menu{
	position: fixed;
	line-height: 10vh;
  	width: 100%;
  	height: 10vh;
  	background-color: #2b2b2b;
}

#menu ul li{
  text-align: center;
  display: inline-block;
  width: 13%;
}

#menu img{
  margin-left: 1vh;
  margin-top: 1.25vh;
  float: left;
  width: 7.3vh;
}

#menu li a{
  text-decoration: none;
  color: #f4f4f4;
  display: block;
  height: 8.5vh;
  transition: 0.2s;
  font-size: 2.15vh;
  transition: 0.2s;
}

#menu a:hover{
  text-decoration: underline;
}

#menu span{
  text-align: right;
}

#header{
  margin-top: 10vh;
  text-align: center;
  margin: 0 auto;
  height: 75vh;
  width: 100%;
  background-image: url(../img/header.jpg);
  background-position: center;
  background-size: cover;
}

#header h1{
  padding-top: 30vh;
  margin: 0 auto;
  width: 80vh;
  text-align: center;
  font-size: 7.6vh;
  font-family: PT Sans;
}

#content img{
  border-radius: 4vh;
  padding: 3vh;
  width: 35vw;
  float: right;
}


#content p, #content li{
  width: 50%;
  margin-left: 4vw;
  margin-right: 4vw;
  color: #6d6d6d;
  font-size: 2.6vh;
  line-height: 3.8vh;
}

#content p{
	padding-top: 3vh;
	line-height: 4.5vh;
}

#content li{
	list-style: none;
	padding-top: 1vh;
}

#content1 h3{
  padding-top: 2vh;
  padding-bottom: 2vh;
  margin-left: 4vw;
  font-size: 2.7vh;
}

#content1,#content2{
	padding-top: 10vh;
}

#content1 p, #content2 p{
  margin-top: 2vh;
  margin-left: 4vw;
  margin-right: 4vw;
  color: #585858;
  font-size: 2.1vh;
  line-height: 3.8vh;
}

#content2 p{
	line-height: 4vh;
	font-size: 2.4vh;
	width: 50%;
}

#content1 h1{
  text-align: center;
  padding-top: 1vh;
}

#content1 h2, #content2 h2{
  margin-left: 4vw; 
  font-size: 3vh;
}

#content2 h2{
	margin-top: 2vh;
	font-size: 3.5vh;
}

#content2 img{
  margin-top: 20vh;
  border-radius: 4vh;
  padding: 3vh;
  width: 60vh;
  float: right;
}

.button{
	padding-top: 8vh;
 text-align: center;
}

#content1 span{
width: 50%;
text-align: center;
}

button{
  color: #f5f5f5;
  letter-spacing: 0.1vh;
  outline: none;
  margin-top: 2vh;
  font-size: 2.5vh;
  border-radius: 0.5vh;
  height: 7.5vh;
  width: 30vh;
  border: none;
  background-color:  #348e47;
  transition: 0.3s;
}

button:hover{
  background-color: rgb(37, 139, 60);
}

#content h1,#content h2{
  text-align: center;
  color: #101010;
  font-size: 4.8vh;
}

#content h1{
	padding-top: 3vh;
}

#content h2{
	padding: 2vh;
	font-size: 3.8vh;
	width:50%;
}

#footer{
  text-align: center;
  letter-spacing: 0.1vh;
  color: #e2e2e2;
  margin-top: 2vh;
  background-color: #2b2b2b;;
  height: 16vh;
  font-size: 3vh;
}

#footer a{
  color: #e2e2e2;
  font-size: 3vh;
  transition: 0.3s;
}

#footer div{
  padding-top: 2vh;
  width: 100%;
  float: left;
}

#footer p{
  padding-top: 2.3vh;
  padding-bottom: 2vh;
}

#footer span{
  color: #5bbf71;
  font-size: 3.4vh;
}

#footer img{
  vertical-align: middle;
  margin-right: 0.5vh;
  width: 4.3vh;
}

#footer a:hover{
  color: #5bbf71;
}

#copy{
  height: 3.5vh;
  background-color: #1d1d1d;
  color: #414141;
  text-align: center;
  line-height: 3.5vh;
  font-size: 2vh;
  letter-spacing: 0.1vh;
}

#filter li{
	display: inline-block;
	width: 12vw;
}

#filter a{
  color: #4a985b;
	font-size: 3vh;
}

#filter{
	padding-top: 2vh;
	text-align: center;
}

#filter span a{
	border-right: solid #d8d8d8;
	border-left: solid #d8d8d8;
	padding: 1vh 4vw 1vh 4vw;
}

#imgs1 img{
  width: 70vw;
  margin: 0 auto;
  display: block;
}

#imgs1{
  text-align: center;
  padding-top: 10vh;
}

#imgs1 h2.main{
  font-size: 4.2vh;
  letter-spacing: 0.3vh;
}

#imgs1 h2.other{
  padding-bottom: 6vh;
  font-size: 3vh;
}

#imgs1 h3{
  letter-spacing: 0.2vh;
  font-size: 2.7vh;
}