html{overflow-y:scroll; overflow-x:hidden;}
html, body{margin:0; padding:0; font-size:14px; line-height:1.6em;}

*, *::before, *::after{box-sizing:border-box;}

.center{ text-align:center; }
.hidden{ display:none; }
.borderedbox{ border:1px solid; }
.overlay{position:relative; z-index:1;}
.overlay::after{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:-1;}

.btn{display:inline-block; padding:8px 18px 10px; text-transform:uppercase; border:1px solid; border-radius:8px;}

.clear, .group{display:block;}
.clear::before, .clear::after, .group::before, .group::after{display:table; content:"";}
.clear, .clear::after, .group, .group::after{clear:both;}
.left_align { float:left; }
.right_align { float:right; }

a{outline:none; text-decoration:none;}
img{width:auto; max-width:100%; height:auto; margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}



.banner_background { background-position: top center; background-repeat: no-repeat; background-size: cover; }


/* Civic Plus Style Header
--------------------------------------------------------------------------------------------------------------- */
#header { height: 85px; width: 100%; position: fixed; top: 0; left: 0; z-index: 50 !important; background-color: #fff; box-shadow: 0 0 5px rgba(10,10,10,0.4); }
#header .inner_container { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; -ms-grid-rows: auto; grid-columns: 1fr 1fr 1fr 1fr 1fr; grid-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: auto; }
#header .inner_container .item1 { -ms-grid-column: 1; -ms-grid-row: 1; grid-column: 1 / 2; grid-row: 1 / 2; }
#header .inner_container .item2 { -ms-grid-column: 2; -ms-grid-row: 1; grid-column: 2 / 3; grid-row: 1 / 2; }
#header .inner_container .item3 { -ms-grid-column: 3; -ms-grid-row: 1; grid-column: 3 / 4; grid-row: 1 / 2; }
#header .inner_container .item4 { -ms-grid-column: 4; -ms-grid-row: 1; grid-column: 4 / 5; grid-row: 1 / 2; }

#header .inner_container #logo { display: block; max-width: 124px; margin: 0 0 0 20px; padding: 5px 12px; background-color: #fff; border-radius: 0 0 6px 6px; }
#header .inner_container #logo a { display: block; margin: 0; cursor: pointer; }
#header .inner_container #logo img { height: auto; width: 98px; }

#header .header_nav_item a { display: block; margin: 7px 2px; padding: 25px 0; font-size: 20px; font-weight: 600; color: #000; font-family: 'Times New Roman', serif; text-align: center; background-color: #fff; border-radius: 10px; box-shadow: none; transition: all 0.1s ease; }
#header .header_nav_item a:hover { box-shadow: 0 0 3px rgba(30,30,30,0.4); background-color: #fffafa; }

#mobile_pre_header { display: none; }
#menu_lists_container .mobile_heading { display: none; }
#mobile_pre_header img, 
#menu_lists_container .mobile_heading img { height: 32px; width: auto; }

.nav_menu_dropdown { position: fixed; z-index: 1000; top: 90px; left: 0; right: 0; max-width: 1400px; margin: 10px auto; color: #fff; background-color: #057ebd; background-color: #026395; border-radius: 9px; box-shadow: 1px 4px 8px rgba(5,5,5,0.6); }
.nav_menu_dropdown .inner_container { display: flex; align-items: stretch; width: 100%; }

.nav_menu_dropdown .inner_container .x3col { flex: 1 1 auto; width: 33.3%; display: flex; flex-direction: column; }
.nav_menu_dropdown .inner_container .x4col { flex: 0 1 auto; width: 23.7%; display: flex; flex-direction: column; }
.nav_menu_dropdown .inner_container h4 { margin-bottom: 5px; text-transform: capitalize; }
.nav_menu_dropdown .inner_container ul { list-style: none; list-style-image: none; }
.nav_menu_dropdown .inner_container a { margin: 0; line-height: 1.5em; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 400; }
.nav_menu_dropdown .inner_container h4 a { font-weight: bold; }
.nav_menu_dropdown .inner_container ul li ul { padding-left: 16px; }
.nav_menu_dropdown .inner_container ul li ul li { margin: 8px 0; font-size: 15px; }

#dept_menu_expand { display: none; }
#dept_menu_expand.show { display: block; }

#contact_menu_expand { display: none; }
#contact_menu_expand.show { display: block; }

#howto_menu_expand { display: none; }
#howto_menu_expand.show { display: block; }


/* Fonts
--------------------------------------------------------------------------------------------------------------- */
body, input, textarea, select{font-family:Verdana, Geneva, sans-serif;}
h1, h2, h3, h4, h5, h6, .heading{font-family:Georgia, "Times New Roman", Times, serif;}


/* Forms
--------------------------------------------------------------------------------------------------------------- */
form, fieldset, legend{margin:0; padding:0; border:none;}
legend{display:none;}
label, input, textarea, select, button{display:block; resize:none; outline:none; color:inherit; font-size:inherit; font-family:inherit; vertical-align:middle;}
label{margin-bottom:5px;}
:required, :invalid{outline:none; box-shadow:none;}


/* Generalise
--------------------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .heading{margin:20px 0 20px 0; line-height:normal; font-weight:normal; text-transform:uppercase; font-stretch: expanded; }
h1, h2, h3 { font-size:22px; }
h4, h5, h6 { font-size:19px; }
.heading.nospace{margin-bottom:0;}

address{font-style:normal; font-weight:normal;}
hr{display:block; width:100%; height:1px; border:solid; border-width:1px 0 0 0;}

.font-xs{font-size:.8rem;}
.font-x1{font-size:1.2rem;}
.font-x2{font-size:1.8rem;}
.font-x3{font-size:2.8rem;}

.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left; word-wrap:break-word;}

.auto_center { display:block; margin:0 auto; }


/* HTML 5 Overrides
--------------------------------------------------------------------------------------------------------------- */
address, article, aside, figcaption, figure, footer, header, main, nav, section{display:block; margin:0; padding:0;}


/* Grid
--------------------------------------------------------------------------------------------------------------- */
.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:inline-block; float:left; margin:0 0 0 1.75%; list-style:none;} /*** Brandon changed this from margin:0 0 0 3.06748466257669% to margin:0 0 0 1.75% ***/

.first{margin-left:0; clear:left;}

.one_quarter{width:21.69938650306748%;}
.one_third{width:31.28834355828221%;}
.one_half, .two_quarter{width:48.46625766871166%;}
.two_third{width:65.6441717791411%;}
.three_quarter{width:74.23312883435584%;}




/* Spacing
--------------------------------------------------------------------------------------------------------------- */
.btmspace-10{margin-bottom:10px;}
.btmspace-15{margin-bottom:15px;}
.btmspace-30{margin-bottom:30px;}
.btmspace-50{margin-bottom:50px;}
.btmspace-80{margin-bottom:80px;}

.inspace-5{padding:5px;}
.inspace-10{padding:10px;}
.inspace-15{padding:15px;}
.inspace-30{padding:30px;}
.inspace-50{padding:50px;}
.inspace-80{padding:80px;}





/* Header
   Styles the logo to a set width and puts nearly inline with navigation
--------------------------------------------------------------------------------------------------------------- */
#header{}
#header #logo{ margin:50px 0 -30px 0; }
#header #logo h1{margin:0; padding:0; font-size:22px;}
#header #logo img { width: 350px; }


/* Content Area
   Styles the outer main object
--------------------------------------------------------------------------------------------------------------- */
.container { padding:20px 0; }
.container .content { padding: 10px; }

/* Misc Content Area alterations */
.content section { padding: 20px 15px; }
.subsec-head { font-size: 16px; font-weight: bold; margin-bottom: 10px; }
.content a { display: inline-block; padding: 10px 0; }
.no-blts { list-style: none; padding: 0; }

.page-blurb { padding: 20px; }

.contact-mobile-btn { display: none; }

/* In nav menu */
#ddmenu ul li.contact-cceo .contact-cceo-pc { display: block; }
#ddmenu ul li.contact-cceo .contact-cceo-mobile { display: none; }
#ddmenu ul li.contact-cceo .dropdown { width: 850px; }
#ddmenu ul li.contact-cceo .contact-cceo-pc > ul:first-child { width: 28%; }
#ddmenu ul li.contact-cceo .contact-cceo-pc > ul:nth-child(even) {width: 44%; }
#ddmenu ul li.contact-cceo .contact-cceo-pc > ul:last-child { width: 28%; }
#ddmenu .dd-inner .nav-direc-pc { display: block; width: 100%; padding: 0 0 6px 0; margin-top: -18px;  }
#ddmenu .dd-inner .nav-direc-pc a { display: block; width: 100%; }
#ddmenu .dd-inner .nav-direc-pc a ul { display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
#ddmenu .dd-inner .nav-direc-pc a ul li:last-child { text-align: center; font-size: 11px;  }



.phone-mobile { display: none; }


.hoc-center section:nth-child(even) .holo-dark { display: none; }
.hoc-center section:nth-child(even) .holo-light { display: block; }

.page-blurb p > a { display: inline; } 


/* Cta
   Effects the Featured Link section
--------------------------------------------------------------------------------------------------------------- */
.cta { padding:50px 10px; }
.cta > :first-child { margin-top:10px; margin-left: 15px; }
.cta > :last-child { margin-bottom:0; }  /* Used when elements stack in smaller viewports */


/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer { padding:60px 0; background-color: #a20000; }
#footer .heading { margin-bottom:35px; font-size:1.2rem; }

#footer .inner_container { display: flex; align-items: stretch; max-width: 1435px; margin: 0 auto; }
#footer .inner_container .col { flex: 1 1 auto; }
#footer .inner_container .col1 { width: 25%; }
#footer .inner_container .col2,
#footer .inner_container .col4, 
#footer .inner_container .col6 { width: 4%; }
#footer .inner_container .col3, 
#footer .inner_container .col5, 
#footer .inner_container .col7 { width: 20%; }
#footer .inner_container .col ul { list-style: none; list-style-image: none; padding-left: 0; }
#footer .inner_container .col h3, 
#footer .inner_container .col ul a { color: #fff !important; }
#footer .inner_container .col ul li { margin: 8px 0; font-size: 15px; font-family: 'Open Sans'; }


/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright { padding:20px 0; }
#copyright * { margin:0; padding:0; }
#copyright { color:#4e99d2; }
#copyright a { color:#4e99d2; }


/* Transition Fade
--------------------------------------------------------------------------------------------------------------- */
*::after { transition:all .3s ease-in-out; }
*::before { transition:all .3s ease-in-out; }
* { transition:all .3s ease-in-out; }
#mainav form * { transition:none !important; }


/* Navigation
   Styles basic features of navigation bar; other styles found in ddmenu.css
--------------------------------------------------------------------------------------------------------------- */
nav ol { margin:0; padding:0; list-style:none; }
nav ul { margin:0; padding:0; list-style:none; }

/* Site Hierarchy Path */
#site_path { padding: 10px 0; line-height:normal; }
#site_path ul { margin:0; padding:0; list-style:none; }
#site_path li { display:inline-block; margin:0 4px 0 0; padding:0; }
#site_path li a { display:block; position:relative; margin:0; padding: 0; font-size:12px; text-decoration: underline; }
#site_path li:last-child a { margin:0; padding:0; }


/* Breadcrumb */
#breadcrumb { padding:410px 0 20px; line-height:normal; }
#breadcrumb ul { margin:0; padding:0; list-style:none; text-transform:uppercase; }
#breadcrumb li { display:inline-block; margin:0 6px 0 0; padding:0; opacity: 0; }


/* Back to Top */
#backtotop { z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2; }
#backtotop i { display:block; width:100%; height:100%; line-height:inherit; }
#backtotop.visible { visibility:visible; opacity:.5; }
#backtotop:hover { opacity:1; }


/* Colours
--------------------------------------------------------------------------------------------------------------- */
a { color:#3f77c2; }
a:hover { text-decoration: none; color: #ff9900; font-weight:; }
a:focus { background:transparent; }
a:active { background:transparent; }    /* IE10 + 11 Bugfix - prevents grey background */
.borderedbox { border-color:#D7D7D7; }
hr { border-color:#D7D7D7; }
label span { color:#FF0000; background-color:inherit; }
*:required:focus { border-color:#56AED4; }
textarea:focus { border-color:#56AED4; }
input:focus { border-color:#56AED4; }
.overlay { color:#FFFFFF; background-color:inherit; }
.overlay::after { color:inherit; background-color:rgba(0,0,0,.40); }

.btn { color:#FFFFFF; background-color:#3F77c2; border-color:#3F77C21; }
.btn:hover { color:inherit; background-color:transparent; border-color:inherit; }
.btn.inverse { color:inherit; background-color:transparent; border-color:inherit; }
.btn.inverse:hover { color:#FFFFFF; background-color:#3F77c2; border-color:#3F77C21; }

.icon { color:#3F77C2; border-color:inherit; }
.icon:hover { color:#FFFFFF; background-color:#FFAA31; }
h3 { color:maroon; }
h5 { color:maroon; }
h6 { color:maroon; }


/* Rows */
.row1 { color:#FFFFFF; border-color:rgba(255,255,255,.2); }
.row3 { color:#000; background-color:#fff; } 
.row4 { color:#CBCBCB; }
.row5 a { color:#CBCBCB; }
.row5{ color:#CBCBCB; background-color:#1A1A1A; background-color: #6f0000; }

.coloured { color:#FFFFFF; background:linear-gradient(to top right,#072c53,#3f77c2); }
.coloured .btn { color:inherit; background-color:transparent; border-color:inherit; }
.coloured .btn:hover { color:#000000; background-color:#FFAA31; }

/* Header */
#header #logo a { color:inherit; }

/* Footer */
#footer .heading { color:#FFFFFF; }
#footer .linklist li { border-color:rgba(255,255,255,.2); }
#footer button { border-color:transparent; }
#footer input { border-color:transparent; }
#footer input { color:#FFFFFF; background-color:#1A1A1A; }
#footer input:focus { border-color:#C96D9F; }
#footer button { color:#FFFFFF; background-color:#C96D9F; }

#breadcrumb a { color:#fff; background-color:inherit; }
#breadcrumb li:last-child a { color:#99ccff; }

.container .sidebar nav a { color:inherit; border-color:#D7D7D7; }
.container .sidebar nav a:hover { color:#FFAA31; }

#backtotop { color:#FFFFFF; background-color:#FFAA31; }



/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:978px) {
    .auto_center {
        max-width: 978px;
    }
}

@media screen and (min-width:1280px) {
    .auto_center {
        max-width: 1220px;
    }
}







/* Moderately Large Screens
    (Anything up to 2799px but more than next media query - like a wide screen desktop monitor)
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:2799px) {
    .hoc { max-width:1220px; }
    .hoc-center { max-width:1220px; }
    /*.container { background-color: blue; }*/
}


/* Medium Screens
    (Anything up to 2200px but more than next media query - like a small desktop monitor or laptop)
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 2200px) {
    /*.container { background-color: black; }*/
}


/* Moderately Small Screens
    (Anything up to 1200px but more than next media query - like a decent sized tablet in landscape)
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    .hoc { max-width:978px; }
    .hoc-center { max-width:978px; }
    /*.container { background-color: green; }*/
}


/* Small Screens
    (Anything up to 800px but more than next media query - like a decent sized tablet in portrait or phone in landscape)
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
    /*.container { background-color: yellow; }*/

    .hoc{max-width:90%;}
    .hoc-center {max-width:100%;}
    .container { padding: 0; }

	#header{padding:30px 0 15px;}
	#header #logo{margin:0;}
    #header #logo img { width: 200px; }

	#mainav{}
	#mainav ul{display:none;}
	#mainav form{display:block;}

	#breadcrumb{}
	.container{}
	#footer{}

	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}

    .contact-mobile-btn { display: block; padding: 3px 0; }
    .contact-mobile-btn img { width: 24px; margin-left: -8px; margin-right: 8px; }
    .contact-mobile-btn a { background-color: #3f77c2; display: block; margin: 5px 10px 5px 0px; padding: 6px 0; color: white; border: solid 1px white; text-align: center; }
    .contact-mobile-btn a:hover { background-color: #2196f3; }
    .contact-mobile-btn a:active { background-color: #3f51b5; }

    .contact-web { display: none; }


    #ddmenu ul li.contact-cceo .dropdown { width: auto; }
    #ddmenu ul li.contact-cceo .contact-cceo-pc { display: none; }
    #ddmenu ul li.contact-cceo .contact-cceo-mobile { display: block; }
    #ddmenu .contact-cceo-mobile .nav-direc-mobile ul { display: flex; flex-direction: row; width: 100%; justify-content: space-evenly; align-items: center; }
    #ddmenu .contact-cceo-mobile .nav-direc-mobile ul li { flex: 1; text-align: center; }
    #ddmenu .contact-cceo-mobile .nav-direc-mobile ul li img { max-width: 45px; }
    #ddmenu .contact-cceo-mobile .nav-direc-mobile ul li a { color: #0073E6; font-weight: bold; }

    

    .hoc-center section:nth-child(even) { background: #f2f2f2; }
    .hoc-center section:nth-child(even) .holo-dark { display: block; }
    .hoc-center section:nth-child(even) .holo-light { display: none; }

    .container .content { padding: 0; }
    .homepg .content { padding: 10px; }
    .show-mobile { display: inline-block; }


    .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.imgl{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_right{display:block; float:none;}
	.fl_left{display:block; float:none;}
	.three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	.two_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	.one_quarter{display:block; float:none; width:auto; margin:0 0 0 0; padding:0;}

	.two_third{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	.one_third{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	.one_half{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	#header{text-align:left;}

	.cta > :first-child{margin-top:0;}

	#footer{padding-bottom:50px;}/* Not needed, just looks a little better */



    .feature-title { text-align: center; font-size: 20px; }
    .featured { display: block; text-align: center; }

    .parks-item > a > img { width: 100%; }
    .contr-item li { font-size: 12px; }
}


/* Phone Screens
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:750px){
	.imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.imgl{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_right{display:block; float:none;}
	.fl_left{display:block; float:none;}
	.three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	.two_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	.one_quarter{display:block; float:none; width:auto; margin:0 0 0 0; padding:0;}

	.two_third{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	.one_third{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	.one_half{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	#header{text-align:left;}

	.cta > :first-child{margin-top:0;}

	#footer{padding-bottom:50px;}/* Not needed, just looks a little better */



    .feature-title { text-align: center; font-size: 20px; }
    .featured { display: block; text-align: center; }


    #header .inner_container { -ms-grid-columns: 2fr 1fr 1fr 1fr; grid-columns: 2fr 1fr 1fr 1fr; grid-template-columns: 2fr 1fr 1fr 1fr; }
	#header .inner_container .header_nav_item { display: none; }

	#mobile_pre_header { display: block; width: 100%; height: 35px; background-color: #016ea6; }
	#header { position: relative; }

	#menu_lists_container { position: fixed; top: 0; left: 0; bottom: 0; right: 40px; z-index: 2000; background-color: #6f0000; box-shadow: 5px 0 5px rgba(10,10,10,0.5); overflow: scroll; display: none; }
	#menu_lists_container.show { display: block; }
	#menu_lists_container #mobile_menu_header { display: block; width: 100%; height: 35px; background-color: #016ea6; }
	#menu_lists_container h3.mobile_heading { display: block; padding-left: 15px; color: #fff; font-family: 'Open Sans'; }

	#dept_menu_expand.expand { display: block; }
	#contact_menu_expand.expand { display: block; }
	#howto_menu_expand.expand { display: block; }

	.nav_menu_dropdown { position: relative; top: 0; z-index: 1000; max-width: 1400px; margin: 10px auto; color: #fff; background-color: #6f0000; box-shadow: none; }
	.nav_menu_dropdown .inner_container { display: flex; flex-direction: column; align-items: stretch; width: 100%; }

	.nav_menu_dropdown .inner_container .col { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; }
	.nav_menu_dropdown .col > ul { margin: 0; padding-left: 20px; }
	.nav_menu_dropdown .inner_container ul li ul { padding-left: 0; }

}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.4rem;}
	.font-x3{font-size:1.6rem;}

    .contr-item li { font-size: 12px; }
}