body { font-family: 'Lato', sans-serif; color: #666666; font-size: .95rem; }
#topleft .title, #topleft .subtitle, #navigation, h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Condensed', sans-serif !important; }

#header { padding-top: 15px; padding-bottom: 15px; }
#topleft .title { color: #3abdb2; font-size:  3rem; font-weight: 600; text-transform: uppercase; padding-bottom: 0.8rem; line-height: 3rem; }
#topleft .subtitle { color: #3abdb2; font-size:  1.1rem; text-transform: capitalize; padding-bottom: 0.8rem; line-height: 1.5rem; }
#logo {text-align: right;}

h1 { color: #3abdb2; }
h3 { color: #666666; }
a, .btn-link {color:#3abdb2;text-decoration:none;}
a:hover,  .btn-link:hover {color:#0F8B81;text-decoration:underline;}
hr { margin-top: 2rem; margin-bottom: 2rem; }
small { font-size: 65%; }


/*
.social { color: #2d2d2d; }
.social a { color: #2d2d2d; background-color: #eee; border-radius: 100px; padding: 5px 8px; display: block; }
.social a:hover { color: #fff; background-color: #3abdb2; }
*/

#navigation { background-color: #2d2d2d; text-transform: uppercase; }
#navigation .navbar-brand { display: none !important; }
#navigation > .container { padding: 0; }

#navigation .navbar-dark .navbar-nav .nav-item.active .nav-link { color: #3abdb2;}
#navigation .navbar-dark .navbar-nav .nav-link:hover { background-color: #3abdb2; color: #fff !important; }

.bg-dark { background-color: #2d2d2d !important; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,100); }
.navbar-dark .navbar-brand { display: hidden; }
.navbar-dark { padding-top: 0; padding-bottom: 0; }

.bg-green { background-color: #3abdb2; }

.alert-primary { color: #fff; background-color: #3abdb2; border: 0; } 

#carouselHome .carousel-caption { bottom: 25%; padding: 0; }
#carouselHome .carousel-item h5 { font-size: 3rem; text-shadow: 0 0 11px #000; }
#carouselHome .carousel-item p { font-size: 1.1rem; text-shadow: 0 0 8px #000; }
#carouselHome .carousel-item {}
#carouselHome .carousel-item {}

#heading { text-align: center; padding: 15px; display: block; background: #3abdb2; margin-bottom: 0; } 
#heading .heading { font-family: 'Roboto Condensed', sans-serif !important; color: #fff; text-transform: uppercase; font-size: 2.5rem; } 

#water, #sewer, #stormwater, #fire { border-bottom: 1px solid #eee; padding-bottom: 2rem; padding-top: 2.5rem; }

.content-container { padding-top: 2.5rem; padding-bottom: 2.5rem; }

#projects { padding-bottom: 2.5rem; padding-top: 2.5rem; }
#about { padding-bottom: 2rem; padding-top: 2.5rem; background-color: #eee; }
#pegouts { padding-top: 2.5rem; margin-bottom: 2.5rem; border-top: 1px solid #eee; }
#suburbs { padding-bottom: 2.5rem; padding-top: 2.5rem; background-color: #eee; }
#terms { font-size: .75rem; }

#logos {padding-bottom: 2.5rem; padding-top: 2.5rem; background-color: #2d2d2d; }

#contact {padding-bottom: 2.5rem; padding-top: 2.5rem; background-color: #3abdb2; }
#contact h2 { color: #fff; }
#contact p { color: #fff; font-size: 0.9rem; }
#contact a { color: #fff; }
#contact a:hover { color: #eee; }

/* Pages */
#content.page { padding-bottom: 2.5rem; padding-top: 2.5rem; }
#content.page h1 { font-size: 2.2em; margin-bottom: 2.2rem;}
#content.page h1, #content.page h2 { text-transform: none; }
#content ol >li { padding-bottom: .5rem; }

#suburbs .list-group-item { text-align: center; }
#pegouts h2 { text-transform: none; }

#content .btn-light { background-color: rgba(0,0,0,.04); }

#content.page .figure { padding: .25rem; border: 1px solid #dee2e6; border-radius: 0.25rem; }
#content.page .figure .img-thumbnail { border: 0; padding: 0; border-radius: 0.25rem; }
#content.page .figure .figure-caption {padding: .5rem .5rem .25rem .5rem;color: #999999;font-size: 80%;}

/* Cards */
.card { margin-bottom: 2rem; margin-top: 2rem; text-align: center; }
.card h5 { color:#3abdb2; }

.card-group { margin-bottom: 1rem; }
.card-group .card { margin-top: 0; }

.card-deck { margin-bottom: 1rem; }
.card-deck .card { margin-top: 0; }

.card-nomargin { margin-bottom: 0; margin-top: 0; text-align: left; }
.card-nomargintop { margin-top: 0; }

.card-suburbs { margin-bottom: 0; margin-top: 0; border: 0; }
.card-suburbs .card-img { border-radius: 0; }
.card-suburbs .card-text {position: absolute; width: 50%; text-align: center; bottom: 20%; font-size: 1.5rem; padding: 0 20px; left: 25%; }

.accordion .card { margin-bottom: 0; margin-top: 0; text-align: left; }
.accordion .card-header { padding: 1.25rem; }
.accordion .card-header .btn { padding: 0; white-space: normal; text-align: left; }


#icons { padding: 3rem 0; background-color: #f8f8f8; }
#icons .fa-stack { color: #3abdb2; }

@media (max-width:768px) {
	.card-deck{ -ms-flex-flow:column; flex-flow:column; }
	.card-deck .card { margin-top: 15px; }
	#breadcrumbs, .card-suburbs { display: none; }
}


/* Links */
.btn { white-space: pre-wrap; }
.btn-primary{color:#fff;background-color:#3abdb2;border:0;}
.btn-primary:hover{background-color:#0F8B81;}



/* Specials */
/*
#specials { 
	background-color: #3abdb2;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 1.25rem;
    margin: 1.5rem 0;
    padding: 2.5rem;
    text-align: center;
}

#specials p:first-child { font-weight: bold; font-size: 1.5em; line-height: 1.2em; } 


*/


@media (max-width: 992px) { 
	#navigation .navbar-brand { display: inline-block !important; }
	.navbar-dark .navbar-toggler { border: 0; }
	.navbar-dark .navbar-toggler { margin: 5px; }
	.navbar-collapse { margin-bottom: 1.5rem; border-bottom: 1px solid #666; }
	.navbar-collapse .navbar-nav .nav-link { padding: .5rem 1rem; border-top: 1px solid #666; }
}

@media (max-width: 575px) { 
	#header, .title, .subtitle, #contact { text-align: center !important; }
	#header #logo { display: none; }
	#header { padding-bottom: 0; }
	#logos .img-fluid { margin-bottom: .8rem; }
	
	h1 { font-size: 1.8rem; }
	h2 { font-size: 1.5rem; }
	h3 { font-size: 1.3rem; }

	
	#carouselHome .carousel-item h5 { font-size: 1.5rem;}
	.carousel-caption.d-none > a.btn { font-size: .9rem; padding: .23rem .23rem; }
	
	#specials .btn { white-space: normal!important; }
}

@media (max-width: 768px) {
	#carouselHome .d-none { display: block!important; }
	.carousel-caption.d-none > p { display: none!important; }
	.carousel-caption.d-none > a.btn { white-space: normal!important; }
	#logos .img-fluid { margin-bottom: .8rem; }
}