body{
    font-family: Arial, Helvetica, sans-serif;
}
h1,p{
    font-family: Georgia, serif; 
}
h1{
    font-size: 45px;
}
p{
    line-height: 2;
    font-size: 20px;
}
#section{
    display: inline-block;
    width: 101%;
    margin-left: -7.5px;
   
}
.backgroundimage{
    float: right;
}
.intro{
    padding-left: 30px;
    padding-top: 280px;
    clear: left;
    background-color: #6a8d69;
    height: 320px;
    color: white;
}

#section2{
    display: inline-block;
    width: 101%;
    margin-left: -9.5px;
}
.wwdimage{
    float: left;
}
.wwd{
    clear: right;
    padding-top: 200px;
    padding-left: 750px;
    height: 296px;
}

#section3{
    display: inline-block;
    width: 101%;
    margin-left: -9.5px;
}
.otimage{
    float: right;
}
.ot{
    clear: left;
    padding-left: 30px;
    background-color: #fff8eb;
    height: 450px;
    padding-top: 50px;
}

#section4{
    display: inline-block;
    width: 101%;
    margin-left: -9.5px;
}
.timage{
    float: left;
}
.t{
    clear: right;
    background-color: #e8e3df;
    text-align: center;
    padding-top: 220px;
    height: 330px;
}

#section5{
    display: inline-block;
    width: 101%;
    margin-left: -9.5px;
}
.cuimage{
    float: right;
}
.cu{
    clear: left;
    text-align: center;
    background-color: #93c572 ;
    padding-top: 200px;
    height: 350px;
}

#header{
    display: inline-block;
    background-color: white;
	width:101%;
    height: auto;
    margin: -6px;
    border-style: hidden;
    position: sticky;
    top: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.logo{
    width: 250px; 
    height: auto;
    padding: 30px;
    margin: 0 100px;
}

#navigation{
    font-family: Arial, Helvetica, sans-serif;
    float: right;
	clear:both;
	padding: 30px;
	margin-right: 110px;
	list-style-type:none;
    background-color: white;
}
.primarynav{
    position: relative;
	display:inline-block;
	padding:2px 10px;
	text-align:center;
}
.primarynav a{
	text-decoration:none;
	color:black;
	font-weight:bold;
	font-size:100%;
	padding:12px;
}
.primarynav a:hover{
    color: #59ac80;
}
.current{
    border-bottom:solid 3px #59ac80;
}
.dropdown:hover .menu {
  display: block;
}
.menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #59ac80;
  padding: 0;
  margin: 0;
  list-style: none;
}
.menu li {
  display: block;
}
.menu li a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
}
.menu li:hover a {
  background-color: dimgray;
  color: white;
}

.skip{
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: #355e3b; 
    color: black;
}
.skip:hover {
    font-size:60px;
    color: #355e3b;
    text-decoration: none;
}
#skip-links {
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
#skip-links a {
    color: white;
}

@media screen and (max-width: 1200px){
	#wrapper{
		width:100%;
	}
    h1{
        font-size: 28px;
    }
    p{
        font-size: 22px;
    }
    #section{
        width: 102%;
        display: inline-flex;
        flex-direction: row-reverse;
        margin-left: -6px;
    }
    .intro{
        height: 500px;
        padding-top: 100px;
        padding-left: 5px;
    }
    .backgroundimage{
        height: 600px;
    }
    #section2, #section4{
        display: inline-flex;
        flex-direction: row;
        margin-left: -6px;
        margin-top: -5px;
    }
    .wwdimage, .otimage, .timage, .cuimage{
        width: 600px;
        height: 450px;
    }
    .wwd{
        height: 395px;
        padding: 0;
        padding-top: 50px;
        padding-left: 30px;
    }
    .skip:hover {
        font-size:30px;
    }
    #section3, #section5{
        display: inline-flex;
        flex-direction: row-reverse;
        margin-left: -6px;
        margin-top: -8px;
    }
    .ot{
        height: 400px;
        padding: 0;
        padding-top: 50px;
        padding-left: 30px;
    }
    .t, .cu{
        width: 650px;
        height: 400px;
        padding: 0;
        padding-top: 50px;
    }
    .padding{
        padding-top: 100px;
    }
}
@media screen and (max-width: 850px){
	#wrapper{
		width:100%;
	}
    h1{
        font-size: 20px;
    }
    p{
        font-size: 14px;
    }
    #header{
        display: inline-flex;
        flex-direction: column;
        width: 102%;
    }
    #navigation{
        display: flex;
        flex-direction: row;
        margin-top: -40px;
        font-size: 16px;
    }
    .primarynav{
        white-space: nowrap;
    }
    #section{
        width: 102%;
        display: inline-flex;
        flex-direction: row-reverse;
        margin-left: -6px;
    }
    .intro{
        height: 300px;
        padding-top: 100px;
        padding-left: 5px;
    }
    .backgroundimage{
        height: 400px;
    }
    #section2, #section4{
        display: inline-flex;
        flex-direction: row;
        margin-left: -6px;
        margin-top: -5px;
    }
    .wwdimage, .otimage, .timage, .cuimage{
        width: 400px;
        height: 300px;
    }
    .wwd{
        height: 245px;
        padding: 0;
        padding-top: 50px;
    }
    .skip:hover {
        font-size:30px;
    }
    #section3, #section5{
        display: inline-flex;
        flex-direction: row-reverse;
        margin-left: -6px;
        margin-top: -4px;
    }
    .ot{
        height: 250px;
        padding: 0;
        padding-top: 50px;
    }
    .t, .cu{
        width: 450px;
        height: 250px;
        padding: 0;
        padding-top: 50px;
    }
}
    @media screen and (max-width: 640px){
    #wrapper{
		width:100%;
	}
	h1, p{
		word-wrap:break-word;
	}
    h1{
        font-size: 16px;
    }
    p{
        font-size: 9px;
    }
    #header{
        display: inline-flex;
        flex-direction: column;
        width: 102%;   
    }
    #navigation{
        display: flex;
        flex-direction: row;
        margin-top: -40px;
        margin-left: -25px;
        font-size: 13px;
    }
    .primarynav{
        white-space: nowrap;
    } 
    #section{
        width: 102%;
        display: inline-flex;
        flex-direction: row-reverse;
        margin-left: -6px;
    }
    .intro{
        height: 200px;
        padding-top: 100px;
        padding-left: 5px;
    }
    .backgroundimage{
        height: 300px;
    }
    #section2, #section4{
        display: inline-flex;
        flex-direction: row;
        margin-left: -6px;
        margin-top: -5px;
    }
    .wwdimage, .otimage, .timage, .cuimage{
        width: 300px;
        height: 200px;
    }
    .wwd{
        height: 145px;
        padding: 0;
        padding-top: 50px;
    }
    .skip:hover {
        font-size:30px;
    }
    #section3, #section5{
        display: inline-flex;
        flex-direction: row-reverse;
        margin-left: -6px;
        margin-top: -4px;
    }
    .ot{
        height: 150px;
        padding: 0;
        padding-top: 50px;
    }
    .t, .cu{
        width: 350px;
        height: 150px;
        padding: 0;
        padding-top: 50px;
        }
    .padding{
        padding-top: 20px;
        }
}