@font-face{
        font-family:"Avenir Next W01_n4";
        src:url("Fonts/0ecef829-586e-426d-a633-4c8a8c926769.eot?#iefix") format("eot")
    }
    @font-face{
        font-family:"Avenir Next W01";
        src:url("Fonts/0ecef829-586e-426d-a633-4c8a8c926769.eot?#iefix");
        src:url("Fonts/0ecef829-586e-426d-a633-4c8a8c926769.eot?#iefix") format("eot"),url("Fonts/49c5f3e1-5867-4b1d-a843-2d07fa60d85d.woff2") format("woff2"),url("Fonts/f401df6f-54eb-406c-b46a-90b9451c598d.woff") format("woff"),url("Fonts/276fe25e-e430-4376-b33c-705dd77b3dba.ttf") format("truetype"),url("Fonts/869dc33b-3685-4d74-a51c-82b435579093.svg#869dc33b-3685-4d74-a51c-82b435579093") format("svg");
font-weight: 400;
font-style: normal;
    }
    @font-face{
        font-family:"Avenir Next W01_i4";
        src:url("Fonts/440b64c9-a97b-4a0c-a6af-a6bb6d49c252.eot?#iefix") format("eot")
    }
    @font-face{
        font-family:"Avenir Next W01";
        src:url("Fonts/440b64c9-a97b-4a0c-a6af-a6bb6d49c252.eot?#iefix");
        src:url("Fonts/440b64c9-a97b-4a0c-a6af-a6bb6d49c252.eot?#iefix") format("eot"),url("Fonts/62e28d52-436d-40b8-a5f0-00479f3f44ed.woff2") format("woff2"),url("Fonts/5b8c6fdc-0ba4-4b65-87e4-d5ae51245ea5.woff") format("woff"),url("Fonts/c677d79d-442e-4c76-8db1-c29ac7788039.ttf") format("truetype"),url("Fonts/216291a0-f927-4f75-9de7-6e36c7fd7ebf.svg#216291a0-f927-4f75-9de7-6e36c7fd7ebf") format("svg");
font-weight: 400;
font-style: italic;
    }
    @font-face{
        font-family:"Avenir Next W01_n5";
        src:url("Fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix") format("eot")
    }
    @font-face{
        font-family:"Avenir Next W01";
        src:url("Fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix");
        src:url("Fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix") format("eot"),url("Fonts/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2") format("woff2"),url("Fonts/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff"),url("Fonts/46cf1067-688d-4aab-b0f7-bd942af6efd8.ttf") format("truetype"),url("Fonts/52a192b1-bea5-4b48-879f-107f009b666f.svg#52a192b1-bea5-4b48-879f-107f009b666f") format("svg");
font-weight: 500;
font-style: normal;
    }
    @font-face{
        font-family:"Avenir Next W01_i5";
        src:url("Fonts/d1fddef1-d940-4904-8f6c-17e809462301.eot?#iefix") format("eot")
    }
    @font-face{
        font-family:"Avenir Next W01";
        src:url("Fonts/d1fddef1-d940-4904-8f6c-17e809462301.eot?#iefix");
        src:url("Fonts/d1fddef1-d940-4904-8f6c-17e809462301.eot?#iefix") format("eot"),url("Fonts/7377dbe6-f11a-4a05-b33c-bc8ce1f60f84.woff2") format("woff2"),url("Fonts/92b66dbd-4201-4ac2-a605-4d4ffc8705cc.woff") format("woff"),url("Fonts/18839597-afa8-4f0b-9abb-4a30262d0da8.ttf") format("truetype"),url("Fonts/1de7e6f4-9d4d-47e7-ab23-7d5cf10ab585.svg#1de7e6f4-9d4d-47e7-ab23-7d5cf10ab585") format("svg");
font-weight: 500;
font-style: italic;
    }
    @font-face{
        font-family:"Avenir Next W01_n7";
        src:url("Fonts/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?#iefix") format("eot")
    }
    @font-face{
        font-family:"Avenir Next W01";
        src:url("Fonts/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?#iefix");
        src:url("Fonts/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?#iefix") format("eot"),url("Fonts/aad99a1f-7917-4dd6-bbb5-b07cedbff64f.woff2") format("woff2"),url("Fonts/91b50bbb-9aa1-4d54-9159-ec6f19d14a7c.woff") format("woff"),url("Fonts/a0f4c2f9-8a42-4786-ad00-fce42b57b148.ttf") format("truetype"),url("Fonts/99affa9a-a5e9-4559-bd07-20cf0071852d.svg#99affa9a-a5e9-4559-bd07-20cf0071852d") format("svg");
font-weight: 700;
font-style: normal;
    }
    @font-face{
        font-family:"Avenir Next W01_n8";
        src:url("Fonts/dccb10af-07a2-404c-bfc7-7750e2716bc1.eot?#iefix") format("eot")
    }
    @font-face{
        font-family:"Avenir Next W01";
        src:url("Fonts/dccb10af-07a2-404c-bfc7-7750e2716bc1.eot?#iefix");
        src:url("Fonts/dccb10af-07a2-404c-bfc7-7750e2716bc1.eot?#iefix") format("eot"),url("Fonts/14c73713-e4df-4dba-933b-057feeac8dd1.woff2") format("woff2"),url("Fonts/b8e906a1-f5e8-4bf1-8e80-82c646ca4d5f.woff") format("woff"),url("Fonts/890bd988-5306-43ff-bd4b-922bc5ebdeb4.ttf") format("truetype"),url("Fonts/ed104d8c-7f39-4e8b-90a9-4076be06b857.svg#ed104d8c-7f39-4e8b-90a9-4076be06b857") format("svg");
font-weight: 800;
font-style: normal;
    }

*{box-sizing: border-box;}
html{width:100%; height:100%; padding:0px; margin:0px;}
body{width:100%; min-height: 100%; overflow-x: hidden; padding:0px; margin:0px; font-family: 'Avenir Next W01', sans-serif; letter-spacing: 1px; font-size: 18px; line-height: 1.4em; background-color:#FFF; font-weight: 500;}
body.home{position: relative;}
a{color:#319096; transition:all 0.3s;}
ol{}
ol li{margin-bottom:24px; padding-left: 24px;}

h1{font-size: 1.7em; margin:32px 0px 32px 0px; line-height: 1.2em;}
h2{color:#999; font-weight: 200; font-size: 36px; line-height: 1.1em; letter-spacing: 0.5px;}
h4{color:#000; font-weight: 900; font-size: 24px; line-height: 1.1em;}
h4 span{display: block; font-weight: 300; font-size: 0.8em;}

p.emp{font-size: 1em; font-style: italic;}
img{max-width: 100%;}
img.aside{width:30%; height: auto;}
img.aside.right{float:right; margin: 0px 0px 16px 32px; padding:8px; border:1px solid #333;}

figure.aside{display: block; float:left;}
figure.aside.left{float:left;}
figure.aside.right{float:right;}
figure.aside figcaption{text-align: center; font-size: 18px; margin-top:12px;}

.smaller{font-size: 0.8em;}
.em-underline em{text-decoration: underline; font-style: normal;}
.no-wrap{white-space: nowrap;}
.content-wrap{width:100%; max-width: 1400px; margin:0px auto; position: relative; display: block;}
.content-wrap:after{content:''; display: block; clear: both;}
.content-wrap.padding-bottom{padding-bottom: 64px;}
.content-wrap.padding-top{padding-top:64px;}

.astrisk{font-size: 0.8em; font-style: italic; line-height: 1.2em;}
.center{text-align: center; margin-left:auto; margin-right: auto; display: block;}
.table-content{display: table; width:100%;}
.table-content .spacer{display: table-cell;}
.table-row{display: table-row;}
.table-cell{display: table-cell;}
.highlight{background-size:cover; background-color:#909090; background-position: center; background-attachment: fixed; color:#fff;}
.clear{clear:both;}
.learn-more{position: absolute; bottom:16px; left:0px; width:100%; text-align: right;}
a.button{display: inline-block; margin-right: 24px; background-color: #0e192f; color:#fff; padding:8px 24px; border:2px solid #fff; text-decoration: none; box-shadow: rgba(0,0,0,0.2) 1px 1px 1px; transition:all 0.3s ease;}
a.button:hover{box-shadow: rgba(0,0,0,0.5) 1px 1px 3px; background-color:#ea4901;}


header{height: 85px; background-color: #FFF; position: relative; border-top:5px solid #999;  position: fixed; top:0px; left:0px; z-index: 999; width:100%; transition:all 0.5s ease;}
header a.logo{position: absolute; top:0px; left:41px; width:286px; height: 150px; margin-top:7px; background-size: contain; background-position: left center; background-repeat: no-repeat; background-image: url(../images/town-seal.png); transition:all 0.5s ease;z-index: 999;}
header nav{}
header nav ul{margin:0px; padding:0px; text-align: right;}
header nav li{display:inline-block; list-style: none; margin:0px 12px 0px 0px; padding:0px; color:#666; text-transform: uppercase;}
header nav .no-link,
header nav a{color:#666; padding:27px 16px; text-decoration: none; display: inline-block; cursor: pointer; font-size: 16px; transition:all 0.5s ease; position: relative;}

header:after{content:''; display: block; width:100%; height: 8px; position: absolute; bottom:0px; left:0px; z-index: 998; background-color:#fff; box-shadow: rgba(0,0,0,0.5) 0px 2px 1px 1px; }



header nav .submenu {position: absolute; top:100%; right:0px; height:0px; padding:0px 0px; width:936px; background-color:#fff; box-shadow: rgba(0,0,0,0.0) 0px 0px 0px;  overflow: hidden; transition: all 0.3s;}
header nav .submenu.on{height: 310px; padding:24px 0px;box-shadow: rgba(0,0,0,0.5) 0px 0px 5px;}
header nav .submenu ul{display: block; width:360px; margin:0px; padding:0px 16px 0px 52px; float:left;}
header nav .submenu li{display:block; text-align: left; border-bottom: 2px solid #fff;}
header nav .submenu li:nth-child(1) a{padding-left: 16px;}
header nav .submenu li:hover{border-bottom: 2px solid #333;}
.offtop header nav .submenu a,
header nav .submenu a{color:#000; font-style: normal; text-transform: none; padding:8px 16px;}

header nav .submenu .menu-image{ display: block; float:right; margin-right: 32px; width:426px; height: 250px; background-color: #333; background-size: cover; background-repeat: no-repeat; background-position: right top;}

header nav .submenu.about .menu-image{background-image: url(../images/government-menu.jpg);}
header nav .submenu.government .menu-image{background-image: url(../images/about-menu.jpg);}
header nav .submenu.services .menu-image{background-image: url(../images/services-menu.jpg);}
header nav .submenu.planning .menu-image{background-image: url(../images/about-zoning.jpg);}

header nav > ul > li > a:before,
header nav > ul > li > .no-link:before{content:''; display: block; position: absolute; top:25px; height: 0px; left:50%; width:0px; background-color:rgba(255,255,255,0.0); border:1px solid rgba(153,153,153,0); transition:all 0.3s ease; z-index: -1}

header nav > ul > li:hover > a,
header nav > ul > li:hover > .no-link{}

header nav > ul > li:hover > a:before,
header nav > ul > li:hover > .no-link:before{top:20px; left:0px; width: 100%; height: 39px; background-color:rgba(255,255,255,0.0); border:1px solid rgba(153,153,153,1);}

header nav > ul > li > .no-link:after{content:''; display: block; position: absolute; bottom:34px; left:50%;  width:0px; height: 0px; border-left:6px solid transparent; border-right:6px solid transparent; border-top:10px solid rgba(153,153,153,0);z-index: 999; margin-left: -6px; transition:all 0.3s ease;}
header nav > ul > li:hover > .no-link:after{bottom:9px; border-top:10px solid rgba(153,153,153,1);}

header nav > ul > li:hover > a.button:before{display: none;}


.offtop header{height: 65px;}
.offtop header a.logo{height: 94px;}
.offtop header nav .no-link, 
.offtop header nav a{padding-top:18px; padding-bottom: 18px;}
.offtop header nav:hover > ul:after{top:44px;}
.offtop header nav > ul > li:hover > a:before,
.offtop header nav > ul > li:hover > .no-link:before{ top:15px; height: 28px;}
.offtop header nav > ul > li:hover > .no-link:after{bottom:7px;}

footer nav{display: inline-block; vertical-align: top; width:65%; margin-right: 5%; text-align: left;}
footer nav ul{list-style: none; padding-left:0px; margin-top:0px;}
footer nav > ul > li{display: inline-block; width:25%; padding-right: 24px; vertical-align: top; text-align: left; }
footer nav > ul > li:last-child{padding-right: 0px;}
footer nav > ul > li > a,
footer nav > ul > li .no-link{display: inline-block; margin-bottom: 12px; font-weight: 900; text-transform: uppercase;}
footer .contact-info{display: inline-block; width:30%; vertical-align: top; text-align: left;}
footer .contact-info .address{display: inline-block; width:50%; vertical-align: top; padding-right: 24px; font-size: 0.8em;}
footer .contact-info .contact{display: inline-block; width:50%; vertical-align: top; padding-left: 24px; text-align: right; font-size: 0.8em;}
footer .contact-info .map{display: block; margin-top:48px;}
footer .contact-info h5{font-weight: 900; font-size: 18px; margin-bottom: 12px; margin-top:0px;}


footer{background-color: #0e192f; color:#FFF; width:100%; padding-top:0px; border-top:2px solid #668bbc; padding-bottom: 32px;}
footer:before{content:''; display: block; width:100%; height: 3px; background-color:#a7694e; margin-bottom: 40px;}
footer .logo{}
footer a{color:#fff; text-decoration: none;}
footer .footer-bottom{}
footer .submenu a{font-size: 0.8em; color:#FFF; display: inline-block; padding:8px 0px;}
footer .copyright{background-color:#0e192f; text-align: center; font-size: 12px; color:#999;}


#Main{min-height: 300px;}
.interior header a.logo{}
.interior .hero{padding-top:85px; background-color:#253e74; height: 250px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#253e74+44,ffffff+100&1+62,0+100 */
background: -moz-linear-gradient(left, rgba(37,62,116,1) 44%, rgba(107,124,161,1) 62%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(37,62,116,1) 44%,rgba(107,124,161,1) 62%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(37,62,116,1) 44%,rgba(107,124,161,1) 62%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#253e74', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */}
.interior .hero h1{margin-top:60px; color:#729dd5; padding-left: 250px;}
/*.interior .hero h1:before{content:''; display: inline-block; vertical-align: middle; height: 150px; width:150px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(../images/icons/icon1.svg); margin-right: 24px;}*/

#Main.has-sidebar{display: table; width:100%; min-height: 600px;}
.sidebar{display: table-cell; background-color:#729dd5; width: 320px;  vertical-align: top; padding-top:64px;}
.sidebar nav ul{list-style: none; padding:0px; margin:0px;}
.sidebar nav ul li{padding:0px; margin:0px; border-bottom: 1px solid #253e74;}
.sidebar nav a{padding:16px 24px 16px 48px; color:#253e74; text-decoration: none; display: block;}
.sidebar nav a:hover{color: #0e192f;}
.sidebar nav .selected a{font-weight: bold; margin-left:18px;}
.sidebar nav .selected a:before{}
.sidebar nav a span{font-size: 0.9em; font-style: italic; display: block;}
#Main.has-sidebar .main-content{ width:auto; padding:64px 48px; display: table-cell;padding-right:15%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+44,ffffff+100&0.85+62,0+100 */
background: -moz-linear-gradient(left, rgba(255,255,255,0.85) 44%, rgba(255,255,255,0.85) 62%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0.85) 44%,rgba(255,255,255,0.85) 62%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,0.85) 44%,rgba(255,255,255,0.85) 62%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */}




.filters{}
.filters .filter{display: inline-block; font-size: 0.8em; margin-right: 4px; margin-bottom: 7px; padding:8px 16px; cursor: pointer; border:1px solid #999; border-radius: 2px; background-color:rgba(255,255,255,1); transition:all 0.3s; box-shadow: rgba(0,0,0,0.5) 1px 1px 0px; cursor: pointer;}
.filters .filter.on{background-color:rgba(125,125,125,1); color:#fff;}
.filters .filter:hover{background-color:rgba(199,199,199,1);}

.forms-list li{width:90%; margin-bottom: 16px;}

input[type="text"],input[type="password"]{display: inline-block; font-size:18px; padding:8px 12px; border:1px solid #999; border-radius: 3px; margin:4px 0px 12px 0px; }
.button{ font-size: 18px; padding:8px 12px; border: 1px solid #999; border-radius: 3px; margin:4px 0px 12px 4px; box-shadow: rgba(0,0,0,0.5) 1px 1px 0px; cursor: pointer; background-color:rgba(199,199,199,0); transition:all 0.3s;}
.button:hover{background-color:rgba(199,199,199,1);}


.home .hero{height: auto; background-color:#253e74; background-image: url(../images/home-hero.jpg); background-size: cover; background-position: left top; background-repeat: no-repeat; margin-top:85px; padding:1px 0px;}
.home .hero .content-wrap{}
.home .hero .notice-bar{background-color:rgba(58,88,140,0.85); border-top:1px solid #fff; border-bottom: 1px solid #fff;}
.home .hero .notice-bar a{color:#fff;}
.home .welcome-wrap{ color:#fff; right:0px; top:0px; bottom:0px; left:auto; width: 590px; max-width: 48%; }
.home .welcome-wrap .alert{ padding:24px; font-size: 0.9em;  }
.home .hero h1{text-align: right; margin:0px; padding:0px; color:#fff; font-size: 45px; font-weight: 300; margin-top:78px; margin-bottom: 78px;}
.home .hero h1 span{display: block; text-align: right; font-size: 24px; font-style: italic;}
.home .hero .flex-content{display: flex; flex-direction: row-reverse; justify-content: space-between;}
.home .hero .pay-wrap{width:590px; max-width:48%;  padding:24px 48px; color:#fff; display: flex; align-items: center;}
.home .public-notices{background-color: #0e192f; padding:24px 0px; color:#fff; text-align: center;}
.home .public-notices h4{color: #fff;}
.home-links{padding-top:64px; padding-bottom: 64px;}
.home-links a{display: inline-block; width:30%; margin-right: 5%; margin-bottom: 32px; vertical-align: top; color:#333; text-decoration: none; position: relative; padding-left:100px;}
.home-links a:nth-child(3n){margin-right: 0px}
.home-links a:nth-child(3n+1){clear:left;}
.home-links a:before{content: ''; display: block; position: absolute; background-color:#333; background-image: url(../images/icons/icon1.svg); background-size: contain; background-position: center; background-repeat: no-repeat; width:50px; height:50px; left:0px; top: 0px;}
.home-links a h5{margin-top:0px; color:#253e74; font-weight: 700; letter-spacing: 3px;}
.home-links a p{font-size: 0.8em;}

.home-links a.town-council:before{background-image: url(../images/icons/icon8.svg);}
.home-links a.water:before{background-image: url(../images/icons/icon7.svg);}
.home-links a.Ordinances:before{background-image: url(../images/icons/icon1.svg);}
.home-links a.meetings:before{background-image: url(../images/icons/icon4.svg);}
.home-links a.services:before{background-image: url(../images/icons/icon9.svg);}
.home-links a.documents:before{background-image: url(../images/icons/icon2.svg);}
.home-links a.employment:before{background-image: url(../images/icons/icon5.svg);}
.home-links a.zoning:before{background-image: url(../images/icons/icon6.svg);}
.home-links a.permits:before{background-image: url(../images/icons/icon3.svg);}

ul.contact-list{list-style: none;}
ul.contact-list li{display: inline-block; width:30%; margin-right: 2%; margin-bottom: 2%; vertical-align: top;}

table.minutes{max-width:100%; width:800px; border:1px solid #999; border-collapse: collapse;}
table.minutes .date{text-align: left; padding:0.5rem 1rem; width: 33%;}
table.minutes .agenda,
table.minutes .minutes{text-align: center; padding:0.5rem 1rem;}
table.minutes tr:nth-child(2n){background-color:#dedede;}
table.minutes td{padding:8px 16px;}

/*here are the backgrounds*/
.interior{background-position: top 85px right; background-repeat: no-repeat;}
.interior.about.history{background-image: url(../images/backgrounds/yellowbuttercup.jpg);}
.interior.about.facts{background-image: url(../images/backgrounds/wintertrees.jpg);}
.interior.government.council{background-image: url(../images/backgrounds/yellowleaves.jpg);}
.interior.government.meetings{background-image: url(../images/backgrounds/redtreesinpark.jpg);}
.interior.government.employment{background-image: url(../images/backgrounds/blueskywclouds.jpg);}
.interior.government.documents{background-image: url(../images/backgrounds/sunthroughgrass.jpg);}
.interior.services.water{background-image: url(../images/backgrounds/watertower.jpg);}
.interior.services.waste{background-image: url(../images/backgrounds/branchwgreenleaves.jpg);}
.interior.services.county{background-image: url(../images/backgrounds/yellowdaisies.jpg);}
.interior.planning.commission{background-image: url(../images/backgrounds/pinkskyandgrass.jpg);}
.interior.planning.permits{background-image: url(../images/backgrounds/threeyellowflowers.jpg);}


.event{padding-bottom: 24px; border-bottom: 1px solid #aaa;}
#login-form{width:auto; max-width: 500px; margin:48px auto;}
#login-form input{display: block; width:100%;}

@media only screen and (max-width:1464px){
    .content-wrap{width:auto; margin-left:32px; margin-right: 32px;}
    #Main.has-sidebar .main-content{padding-right: 48px;}
}


@media only screen and (max-width:1294px){
    footer nav{width:auto; display: block; margin-right: 0px;}
    footer .contact-info{display: block; width:auto; max-width: 500px; margin-top: 48px;}
    
    ul.contact-list li{width:48%; margin-right: 4%;}
    ul.contact-list li:nth-child(2n){margin-right: 0px;}
}

@media only screen and (max-width:1194px){
    table.minutes{width:100%;}
    table.minutes .agenda, 
    table.minutes .minutes,
    table.minutes .date{width:auto;}
}

@media only screen and (max-width:1024px){
    
    header a.logo{left:32px;}
    
    header .content-wrap{position: static;}
    header nav:hover > ul:after{display: none;}
    header:before{content:'MENU'; display: block; position: absolute; top:13px; right: 16px; color:#333; width:48px; font-size: 16px; border-bottom: 2px solid #333; padding-bottom: 0px;}
    header:after{content:''; display: block; position: absolute; top:43px; right:16px; bottom:auto; left:auto; background:none; z-index: auto; box-shadow: none; border-top:2px solid #333; border-bottom:2px solid #333; width:48px; height: 3px;}
    
    header nav{position: fixed; top:0px; left:100%; height: 100vh; width:100%; margin:0px; background-color:#000; z-index: 999; overflow-y: scroll; transition:all 0.3s ease;}
    header nav ul{margin-top:48px; margin-bottom: 48px; height: auto; }
    header nav .submenu.competitions li,
    header nav .submenu li,
    header nav .submenu li:hover,
    header nav li{display: block; width:100%; border-bottom:1px solid #fff; text-align: left;}
    header nav li:last-child a,
    header nav .no-link, header nav a{padding:16px 24px 16px 124px; display: block; font-size: 18px;}
    header nav .submenu .menu-image{display: none;}
    header nav.on{left:0px;}
    
    header nav .submenu{display: block; position:fixed; top:0px; left:100%; height: 100vh; width:100%; margin:0px; background-color:#333; z-index: 999; overflow-y: scroll; padding-top:48px; padding-bottom: 48px; box-shadow: rgba(0,0,0,0.0) 0px 0px 0px 0px;}
    header nav:before,
    header nav .submenu:before{content:''; display: block; position: absolute; top:16px; left:16px; width:24px; height: 24px; background-image:url('../images/menu-back.svg'); background-size: contain; background-repeat: no-repeat; background-position: center;}
    header nav .submenu.calendar ul,
    header nav .submenu ul{height: auto; padding:0px; width:auto; float:none;}
    header nav .submenu.competitions li{display: block; width: auto;}
    
    .offtop header nav .submenu a, header nav .submenu a,
    header nav .submenu li:nth-child(1) a,
    header nav .submenu a{color:#fff; padding:16px 24px 16px 124px; font-weight: normal; display: block;}
    header nav .submenu.on{left:100px;height: 100vh; padding:48px 0px 48px 0px; box-shadow: rgba(0,0,0,0.5) 0px 0px 4px 4px;}
    
    header nav > ul > li:hover > a:before, header nav > ul > li:hover > .no-link:before{display: none;}
    header nav > ul > li > .no-link:after{display: none;}
    
    header nav .no-link, header nav a{color:#dedede;}
    .offtop header nav .submenu a, header nav .submenu a{text-transform: uppercase;}
    header{height: 70px;}
    .home .hero {/*height: 340px;*/ margin-top: 70px;}
    .home .hero h1{/*margin-top:150px;*/ font-size: 34px;}
    .home .welcome-wrap .alert{background-color:rgba(58,88,140,0.75);}
    header a.logo{height: 104px;}
    
    .home-links a h5{margin-bottom: 0px;}
    .home-links a p{margin:0px 0px;}
    
    .sidebar{width:270px;}
    
    .interior{background-position: top 70px right;}
    .interior .hero{height: 200px; padding-top: 70px;}
    .interior .hero h1{margin-top: 46px; padding-left: 120px;}
}


@media screen and (max-width:800px){
    
    .home-links a{display: block; width:auto; margin:0px 0px 32px;}
    footer:before{margin-bottom: 0px;}
    footer nav > ul > li{display: block; width:auto; margin-left:-32px; margin-right: -32px; padding:24px 32px; border-bottom: 1px solid #fff;}
    footer .submenu li{display: inline-block; margin:0px 32px 12px 0px;}
    footer .submenu a{font-size: 1em;}
    
    .sidebar{display: none;}
    #Main.has-sidebar .main-content{display: block; padding:32px 0px;}
    
    .interior{background-image: none !important;}
    .interior .hero{background-size:auto 100%; background-position: top 70px right; background-repeat: no-repeat; background-color:#253e74; }
    .interior.about.facts .hero{background-image: url(../images/backgrounds/wintertrees-med.png);}
     .interior.about.history .hero{background-image: url(../images/backgrounds/yellowbuttercup-med.png);}
     .interior.government.council .hero{background-image: url(../images/backgrounds/yellowleaves-med.png);}
     .interior.government.meetings .hero{background-image: url(../images/backgrounds/redtreesinpark-med.png);}
     .interior.government.employment .hero{background-image: url(../images/backgrounds/blueskywclouds-med.png);}
     .interior.government.documents .hero{background-image: url(../images/backgrounds/sunthroughgrass-med.png);}
     .interior.services.water .hero{background-image: url(../images/backgrounds/watertower-med.png);}
    .interior.services.waste .hero{background-image: url(../images/backgrounds/branchwgreenleaves-med.png);}
    .interior.services.county .hero{background-image: url(../images/backgrounds/yellowdaisies-med.png);}
    .interior.planning.commission .hero{background-image: url(../images/backgrounds/pinkskyandgrass-med.png);}
    .interior.planning.permits .hero{background-image: url(../images/backgrounds/threeyellowflowers-med.png);}
    .interior.services.county .hero{background-image: url(../images/backgrounds/threeyellowflowers-med.png);}
}

@media screen and (max-width:700px){
    header{height: 48px;}
    .home .hero{/*height: 200px;*/ margin-top:48px;}
    .home .hero h1{/*margin-top:68px;*/}
    header:before{top:0px;}
    header:after{top:31px;}
    
    .interior .hero{background-position: top 48px right;}
}
@media screen and (max-width:600px){
    .home .hero{position: relative; padding-bottom: 0px; height: auto;}
    .home .hero .content-wrap{height: auto; margin-left:0px; margin-right: 0px;}
    .home .hero h1{/*position: absolute;*/ bottom:0px; left:0px; width:100%; background-color:rgba(37,62,116,0.8); text-align: center; padding:16px 24px; /*margin-top:0px;*/}
    .home .welcome-wrap{width:auto; position: static;height: auto;}
}
@media screen and (max-width:500px){
    
    .home .hero h1{font-size: 24px;}
    .home .hero h1 span{font-size: 14px;}
    
    footer .contact-info .address{display: block; width:auto; padding-right: 0px;}
    footer .contact-info .contact{display: block; width:auto; padding-left: 0px; text-align: left;}
    
    ul.contact-list li{width:auto; display: block; margin-right: 0px;}
    ul.contact-list li h4{margin-bottom: 12px;}
    
    .content-wrap{margin-left: 16px; margin-right: 16px;}
    footer nav > ul > li{margin-left:-16px; margin-right: -16px;}
    .home-links a{margin-bottom: 16px; padding-left: 60px;}
    header a.logo{width:54px; height: 54px;}
    .home .hero{background-image: url(../images/home-hero-sm.jpg);}
    .home .hero h1{/*margin-top:59px;*/}
    .home .public-notices{min-height: 24px;}
    .home-links{padding-top:24px; padding-bottom: 32px;}
    
    header nav li:last-child a, 
    header nav .no-link, 
    header nav a,
    .offtop header nav .submenu a, 
    header nav .submenu a, 
    header nav .submenu li:nth-child(1) a, 
    header nav .submenu a{padding-left:32px;}
    header nav .submenu.on{left:32px;}
    
    .interior .hero{height: 115px; margin-bottom: 24px;}
    .interior .hero h1{margin-top:59px; padding-left: 0px; text-align: center; position: relative; z-index: 1;}
    
    h2{font-size: 24px; text-align: center;}
    .interior.government.meetings .hero,
    .interior.government.employment .hero,
    .interior.council .hero{margin-bottom: 50px }
    
    ul.contact-list{padding-left: 12px;}
}