﻿/*********************************************************
GENERAL THEME OF THE SITE
*********************************************************/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import '../fonts/droid-serif-family/stylesheet.css';
@import '../fonts/aleo-family/stylesheet.css';


body {
    min-width: 320px;
    font: normal 400 1rem/1.5 'Roboto', Arial, sans-serif !important;
    color: rgb(37,37,37);
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    background: rgb(255,255,255);
}


.cf:before,
.cf:after {
    content: "";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

img {
    max-width: 100%;
    height: auto;
    border: none;
}

h1, h2, h3, h4, h5, h6 {
    font: normal 700 2rem 'Roboto', Arial, sans-serif;    
    padding: 0;
    margin: 0 0 1rem;
}
h2 {
    font-size: 1.8rem;
    color: rgb(1, 87, 155);
}
h3 {
    font-size: 1.6rem;
    color: rgb(63,160,71);
}
h4 {
    font-size: 1.4rem;
    color: rgb(125, 125, 125);
}
h5 {
    font-size: 1.2rem;
}
h6 {
    font-size: 1rem;
}

h2.categoryTitle {
    position: relative;
    height: auto;    
    font: normal 4em 'droid_serifitalic', serif;
    color: rgb(255,255,255);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    text-align: left;
    margin: 0;
    padding: 1rem 1rem;    
    width: 67%;
    float: right;
}
h2.categoryTitle.frmPage {
    width: 100%;
    text-align: center;
}
    h2.categoryTitle.passwordPage {
        width: 100%;
        text-align: center;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    /*h2.categoryTitle:before {
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 51px;
    display: block;
    background: url(../images/bgBackgroundInnerPages.png) left bottom repeat-x;
}*/
h2.categoryTitle .catTitleCont {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 100%;
    padding: 0 1.5rem;
    display: block;
}
h2.categoryTitle .subCatTitle {
    font: italic 400 2em 'Roboto', Arial, sans-serif;
    display: block;
}

h3.pageTitle, main.formPage h3.conf {
    font: normal 500 2em 'Roboto', Arial, sans-serif;
    text-transform: uppercase;
    color: rgb(1,87,155);
    display: block;
    margin-bottom: 1.5rem;
}
/* styling for content area tables */
table th {
    background: #01579b;
	color: #ffffff;
}
/* end */
main.formPage h3.conf{
    font-size:1em !important;
}
 main.formPage h3.conf{
     margin-top:1.5rem;
 }
.pageCover {
    position: absolute;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position-y: 45%;
    height: 96vh;
}
.innerGradient {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 95%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 95%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 95%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
    height: 40%;
}

p {
    padding: 0;
    margin: 0 0 1rem;
}

a,
a:link,
ul.directory-list button {
    font-weight: 700;
    color: rgb(1,87,155);
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: color 300ms ease 0s;
    -moz-transition: color 300ms ease 0s;
    -o-transition: color 300ms ease 0s;
    transition: color 300ms ease 0s;     
}
a:visited {
    color: rgb(1,87,155);
}
    a:hover,
    ul.directory-list button:hover {
        color: rgb(241,177,32);
        text-decoration: none;
    }
    a:active,
    ul.directory-list button:active {
        color: rgb(241,177,32);
    }
    a:focus,
    ul.directory-list button:focus {
        color: rgb(241,177,32);
        text-decoration: none;
    }
button, button:active, button:visited, button:focus {
   
    box-shadow: none !important;
}

    

cite,
small {
    font-style: normal;
}

figure {
    padding: 0;
    margin: 0;
}

address {
    font-style: normal;
}

.mobileNav,
.sideMenuNav,
.moreOption > span,
.scrollup > span {
    display: none;
}

    .btnFireRating h3:after,
    .dynamicRoadBan a:before,
    ul.footerCol3 > li:last-child:before,
    ul.phoneColsList > li:before,
    .desktopNav ul.mainMenu a:after,
    .headerTop a:before,
    .footerTop a:before,
    ul.footerNav a:before,
    ul.footerNav a:after,
    dd.ddMap:before,
    dd.ddPhone:before,
    dd.ddFax:before,
    dd.ddEmail:before,
    .frmPSubmit:after,
    .searchIcon:after,
    .serviceRequest h2:before,
    .headerTopRight a:before,
    ol.breadCrumb a.breadcrumbHome:before,
    ol.breadCrumb a:after,    
    .moreOptionMainMenu:before,
    .moreOptionSubMainMenu:before,
    .moreOption:before,
    .menuIcon:after,
    .socialMedia a:before, .idLiketoSearchContainer > .idliketoModal:after {
        content: "\f10c";
        font-family: fontawesome;
        font-size: inherit;
        font-weight: normal;
        font-style: normal;
        color: inherit;
        display: inline-block;
        margin-left: 0.5rem;
    }

.sideMenuNav:before,
.sideMenuNav:after {
    content: "\f10c";
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-weight: normal;
    font-style: normal;
    color: inherit;
    display: inline-block;
    margin-left: 0.5rem;
}
ul.phoneColsList,
ul.phoneColsList > li,
ul.relatedLinks,
ul.relatedLinks > li,
ul.search-page,
ul.search-page > li,
ol.breadCrumb,
ol.breadCrumb > li,
ul.mainMenu,
ul.mainMenu > li,
ul.subMainMenu,
ul.subMainMenu > li,
ul.subSubMainMenu,
ul.subSubMainMenu > li,
ul.sideMenu,
ul.sideMenu > li,
ul.subSideMenu,
ul.subSideMenu > li,
ul.textResizer,
ul.textResizer > li,
ul.footerNav,
ul.footerNav > li {
    list-style: none;
    padding: 0;
    margin: 0;
}


/** Set the .container's width here based on the design **/
.container {
    max-width: 1250px;
}
.municipalServices .container {
    max-width: 100%;
}


.skipToContent {
    position: absolute;
    top: -9999rem;
    left: 1rem;
    width: 300px;
    height: 1px;
    padding: 1.5rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 0.7rem;
    overflow: hidden;
    z-index: 9999;
    background: rgba(0,0,0,0.9);
}
.skipToContent.showSkipToContents {
    top: 1rem;
    height: auto;
}
.skipToContent h2 {
    font-size: 1rem;
    color: rgb(1,138,182);
    margin-bottom: 0.5em;
}
ol.skipLinks,
ol.skipLinks > li {
    font-size: 0.9rem;
    color: rgb(255,255,255);
    padding: 0;
    margin: 0;
}
ol.skipLinks {
    margin-left: 1.5rem;
}
.skipToContent a,
.skipToContent a:link {
    font-size: inherit;
    font-weight: 700;
    display: block;
    padding: 0.3rem;
    color: rgb(255,255,255);
}
.skipToContent a:visited {
    color: rgb(255,255,255);
}
.skipToContent a:hover {
    color: rgb(1,138,182);
}
.skipToContent a:active {
    color: rgb(1,138,182);
}
.skipToContent a:focus {
    color: rgb(255,255,255);
    outline: 1px solid rgb(1,138,182);
}

.hideMe {
    position: absolute;
    top: -9999rem;
    left: -9999rem;
}

.btnScrollup {
    position: fixed;
    bottom: 1rem;
    right: 5rem;
    color: rgb(255,255,255);
    cursor: pointer;
    padding: 0.8rem 1.2rem 0.5rem;
    display: none;
    border: none;
    -webkit-transition: background 300ms ease;
    -moz-transition: background 300ms ease;
    -o-transition: background 300ms ease;
    transition: background 300ms ease;
    z-index: 1;
    background: rgb(252,198,31);
    font-size: 1.5rem;
}
.btnScrollup:hover {
    color: rgb(255,255,255);
    background: rgb(72,175,78);
}
.btnScrollup:focus {
    color: rgb(255,255,255);
    background: rgb(72,175,78);
}



header.masterHeader {
    position: relative;
    z-index: 10;
}

.headerTop {
    padding: 1.230rem 1rem 1.230rem 27rem;
    background: rgb(1,87,155);
}

.headerBottom {
    position: relative;
    background: rgb(255,255,255);    
}

.footerMiddle {
    padding-top: 2rem;
    background: rgb(255,255,255) url(../images/bgTrees.png) left bottom repeat-x;
}
.footerMiddle > .container {
    padding: 8rem 32rem 2rem 2rem;
    background: url(../images/bgPhones.png) right bottom no-repeat;
}

.footerBottom {
    position: relative;    
    background: rgb(1,87,155);
}
    .footerBottom > .container {
        background: url(../images/logo-footer.png) left center no-repeat;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
.fb1.row .col-sm {
    /*padding-left: 2rem;
    padding-right: 2rem;*/
}
.fb1.row .col-sm:nth-child(2) {
    border-left: 1px solid rgba(255,255,255,0.15);
    border-right: 1px solid rgba(255,255,255,0.15);
}



.fb2.row {
    /*padding-top: 1.5rem;    */
}
.fb2.row .col-sm:first-child {
    text-align: left;
}
.fb2.row .col-sm:nth-child(2) {
    text-align: center;
}
.fb2.row .col-sm:last-child {
    text-align: right;
}


.headerTop a,
.headerTop a:link {
    font: normal 500 0.8em 'Roboto', Arial, sans-serif;
    color: rgb(255,255,255);
    display: inline-block;
    margin-right: 2.5rem;
    text-transform: uppercase;
}
.headerTop a:visited {
    color: rgb(255,255,255);
}
.headerTop a:hover {
    color: rgb(252,176,64);
}
.headerTop a:active {
    color: rgb(252,176,64);
}

.headerTop a:before {
    margin-left: 0;
    margin-right: 0.5rem;
}
.headerTop a.hMap:before {
    content: "\f041";
}
.headerTop a.hPhone:before {
    content: "\f095";
}
.headerTop a.hFax:before {
    content: "\f1ac";
}
    .headerTop a.hEmail:before {
        content: "\f0e0";
    }
.headerTop a#weather:before,
.headerTop a.langTranslateBTN:before,
.headerTop a.langTranslateBTN:before {
    content: normal;
}

.langCont {
    float: right;
}
.headerTop a.langTranslateBTN,
.headerTop a.langTranslateBTN:link {
    text-transform: uppercase;
    margin-right: 0;
}
.headerTop a.langTranslateBTN:after {
    content: "/";
    display: inline-block;
    margin-left: 0.5em;
    margin-right: 0.5em;
}
.headerTop a.langTranslateBTN.langFrench:after {
    content: normal;
    margin-left: 0;
    margin-right: 0;
}
.headerTop a.langTranslateBTN:after,
.headerTop a.langTranslateBTN:hover:after {
    color: rgb(255,255,255);
}
.headerTop a.langTranslateBTN.selected-lan {
    color: rgb(252, 176, 64);
}



h1.siteLogo,
h1.siteLogoFR {
    /*float: left;*/
    position: absolute;
    display: inline-block;
    bottom: 0;
    left: 0;
    width: 307px;
    height: 150px;
    display: inline-block;
    margin: 0;
}
h1.siteLogo > a,
h1.siteLogoFR > a {
    width: inherit;
    height: inherit;
    display: block;
    text-indent: -9999rem;
    background: url(../images/logo.png) left center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
h1.siteLogoFR > a {
    background: url(../images/French-River-FR.png) left center no-repeat;
}




.addthis-smartlayers.addthis-smartlayers-desktop #at4-share {
    top: 26% !important;
}
.addthis-smartlayers.addthis-smartlayers-desktop .atss {
    z-index: 1;
}
.quickLinks {
    position: fixed;
    top: 40%;
    right: 0;
    padding: 1rem 0.5rem;
    z-index: 5;
    background: rgba(67,153,68,0.9);
}
.quickLinks:hover .qlContainer,
.qlContainer.hasFocus{
    -webkit-transform: translate3d(-80%,0,0);
    -moz-transform: translate3d(-80%,0,0);
    -ms-transform: translate3d(-80%,0,0);
    -o-transform: translate3d(-80%,0,0);
    transform: translate3d(-80%,0,0);
}

    .quickLinks a,
    .quickLinks a:link {
        position: relative;
        width: 50px;
        height: 50px;
        font: normal 600 1rem 'Open Sans', Arial, sans-serif;
        color: rgb(255,255,255);
        text-align: center;
        text-transform: uppercase;
        display: block;
        /* margin-bottom: 0.5em;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;*/        
        z-index: 2;
        background: none;
    }
        .quickLinks a i {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            margin-left: 0;
            color: rgb(255,255,255);
            font-size: 1.8rem;
            webkit-transition-property: color !important;
            -moz-transition-property: color !important;
            -o-transition-property: color !important;
            transition-property: color !important;
        }
.quickLinks a i:visited {
    color: rgb(255,255,255);
}
.quickLinks a i:hover {
    color: rgb(3,155,229);    
}
    .quickLinks a i:active {
        color: rgb(3,155,229);        
    }
    .quickLinks a i:focus {
        color: rgb(3,155,229);        
    }
.quickLinks a:last-of-type {
    margin-bottom: 0;
}

       
.quickLinks a[title="E-Service Request"]{
    margin-top: 0.3rem;
}
.quickLinks a:nth-of-type(2),
.quickLinks a:nth-of-type(3),
.quickLinks a:nth-of-type(4),
.quickLinks a:nth-of-type(5) {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}
.quickLinks a[title="E-Service Request"]:before,
.quickLinks a[title="Meeting Minutes and Agendas"]:before,
.quickLinks a[title="Business Directory"]:before,
.quickLinks a[title="Property Listings"]:before,
.quickLinks a[title="FAQs"]:before,
.quickLinks a[title="Community Events"]:before,
.quickLinks a[title="Tax Calculator"]:before {
    content: normal;
}

.qlContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    -webkit-transform: translate3d(100%,0,0);
    -moz-transform: translate3d(100%,0,0);
    -ms-transform: translate3d(100%,0,0);
    -o-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    -webkit-transition: transform 300ms ease 0s;
    -moz-transition: transform 300ms ease 0s;
    -o-transition: transform 300ms ease 0s;
    transition: transform 300ms ease 0s;
    z-index: 1;
    background: rgb(67,153,68);
    background: rgba(67,153,68,0.9);
}
    .qlContainer a,
    .qlContainer a:link {
        color: rgb(255,255,255);
        width: auto !important;
        height: auto !important;
        padding: 1.15rem 5rem 1.15rem 2rem;
        margin: 0 !important;
        text-align: left !important;
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        border-radius: 0 !important;
        -webkit-transition-property: color !important;
        -moz-transition-property: color !important;
        -o-transition-property: color !important;
        transition-property: color !important;
        background: none !important
    }
.qlContainer a:visited {
    color: rgb(255,255,255);
}
.qlContainer a:hover {
    color: rgb(3,155,229);
}
.qlContainer a:active {
    color: rgb(3,155,229);
}
.qlContainer a:focus {
    color: rgb(3,155,229);
}

.qlContainer a:before {
    content: normal;
    position: static;
    top: auto;
    left: auto;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
}
.quickLinks .qlContainer a[title="E-Service Request"]:before,
.quickLinks .qlContainer a[title="Meeting Minutes and Agendas"]:before,
.quickLinks .qlContainer a[title="Business Directory"]:before,
.quickLinks .qlContainer a[title="Community Events"]:before,
.quickLinks .qlContainer a[title="Tax Calculator"]:before {
    content: normal;
}


/* Search Section */
.modal .frmSearch {
    width: 100%;
    position: relative;
    max-width: initial;
    min-width: initial;
    display: block;
    top: auto!important;
    left: auto;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
    margin: 0;
}
.frmSearch {
    position: absolute;
    top: 20rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    min-width: 300px;
    display: block;
    margin: 0;
    z-index: 1;
}
.activePopupAlert .frmSearch {
    top: 21rem;
}
.frmSearch input[type="search"] {
    width: 100%;
    font: italic 500 1.125rem 'Roboto', Arial, sans-serif;    
    color: rgb(38,50,56);
    padding: 1rem 3rem 1rem 1.2rem;
    border: none;
    -webkit-border-radius: 0.8rem;
    -moz-border-radius: 0.8rem;
    border-radius: 0.8rem;
    -webkit-transition: background 300ms ease 0s;
    -moz-transition: background 300ms ease 0s;
    -o-transition: background 300ms ease 0s;
    transition: background 300ms ease 0s;
    background: rgb(244,242,241);
    background: rgba(244,242,241,0.75);
}
.frmSearch input[type="search"]:focus {
    background: rgba(244,242,241,1);
}
::-webkit-input-placeholder {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    color: inherit;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"!important;
    filter: alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    -khtml-opacity: 1!important;
    opacity: 1!important;
}
::-moz-placeholder { 
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    color: inherit;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"!important;
    filter: alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    -khtml-opacity: 1!important;
    opacity: 1!important;
}
:-ms-input-placeholder {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    color: inherit;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"!important;
    filter: alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    -khtml-opacity: 1!important;
    opacity: 1!important;
}
:-moz-placeholder {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    color: inherit;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"!important;
    filter: alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    -khtml-opacity: 1!important;
    opacity: 1!important;
}
.frmSearch button[type="submit"] {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 1.3rem;
    padding: 0.5rem;
    margin: 0;
    border: none;
    cursor: pointer;
    background: none;
}
    .frmSearch button[type="submit"] i {
        color: rgb(241,177,32);
        -webkit-transition: color 300ms ease 0s;
        -moz-transition: color 300ms ease 0s;
        -o-transition: color 300ms ease 0s;
        transition: color 300ms ease 0s;
        font-weight:500;
    }
    .frmSearch button[type="submit"] i:hover {
        color: rgb(227,83,13);
    }


.footerTop {
    position:relative;
    height: auto;
    min-height: 20rem; 
    background: url(../images/bgVoteNow.jpg) left top no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
    .footerTop .container {
        min-height: inherit;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    

.pollQuestionCont {
    max-width: 500px;
    min-height: inherit;
    text-align: center;
    margin: 0 0 0 auto;
    padding: 2rem 1.5rem;
    background: rgba(255,255,255,0.9);
}
.pollQuestionCont i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
}
.btnPollQuestionVote {
    max-width: 200px;
    font: normal 700 1.2rem 'Open Sans', Arial, sans-serif;
    color: rgb(255,255,255);
    display: block;
    margin: auto;
    padding: 0.6rem 1.5rem;
    border: none;
    cursor: pointer;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
    margin-top: 1.5rem;
    text-transform: uppercase;
    text-shadow: none;
    -webkit-transition: background 300ms ease 0s;
    -moz-transition: background 300ms ease 0s;
    -o-transition: background 300ms ease 0s;
    transition: background 300ms ease 0s;
    background: rgb(1,138,182);
}
.btnPollQuestionVote:hover {
    background: rgb(252,176,64);
}
.btnPollQuestionVote:focus {
    background: rgb(252,176,64);
}


/** Model Search **/
#btnSearch .modal-header {
    border-bottom: none;
}
#btnSearch .modal-footer {
    display: none;
}
#btnSearch .modalTitleLogo {
    width: 180px;
    height: 100px;
    display: block;
    text-indent: -9999rem;
    margin: 1.1em auto 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
#btnSearch .modal-body {
    padding: 0;
}


/** Navigation **/
.menuIcon,
.closeNav,
.desktopNav .moreOptionMainMenu,
.desktopNav .moreOptionSubMainMenu,
.desktopNav ul.subSubMainMenu,
.desktopNav ul.subSubMainMenu,
ul.mainMenuCol2 h3 {
    display: none;
}

.menuIcon {
    position: absolute;
    top: 50%;
    right: 1rem;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font: normal 700 1.375rem 'Roboto', Arial, sans-serif;
    color: rgb(38,50,56);
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    margin: 0;
    border: 0;
    cursor: pointer;
    -webkit-transition: color 300ms ease 0s;
    -moz-transition: color 300ms ease 0s;
    -o-transition: color 300ms ease 0s;
    transition: color 300ms ease 0s;
    background: rgb(255,255,255);
}
    .menuIcon:hover {
        color: rgb(241,177,32);       
    }
    .menuIcon:focus {
        color: rgb(241,177,32);        
    }
.menuIcon:after {
    content: "\f0c9";    
}

nav {
    /* float: right;*/
}

.navContainer {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 350ms ease;
}

.topNavContainer {
    min-height: 18rem;
    background: rgba(38,50,56,0.9);
}
    .topNavContainer > .container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }


.desktopNav ul.mainMenu > li:nth-child(2) .bottomNavContainer {
    background: rgba(250,184,33,0.9);
}
.desktopNav ul.mainMenu > li:nth-child(3) .bottomNavContainer {
    background: rgba(3, 155, 229,0.9);
}
.desktopNav ul.mainMenu > li:nth-child(4) .bottomNavContainer {
    background: rgba(67, 160, 71,0.9);
}
.desktopNav ul.mainMenu > li:nth-child(5) .bottomNavContainer {
    background: rgba(1, 87, 155,0.9);
}
.desktopNav ul.mainMenu > li:last-child .bottomNavContainer {
    background: rgba(1250,184,33,0.9);
}
.bottomNavContainer .container {
    padding: 0;    
}
.bottomNavContainer a,
.bottomNavContainer a:link {
    font-size: 1.563em !important;
    color: rgb(255,255,255) !important;
    text-align: left !important;
    padding: 1rem 2rem !important;
    position:relative !important;
    display: inline-block !important;
    border-left: none !important;
    transition-property: color !important;
    background: none !important;   
}
.bottomNavContainer a:visited {
    color: rgb(255,255,255)!important;
}
    .bottomNavContainer a:hover {
        color: rgb(38,50,56) !important;
    }
    .bottomNavContainer a:active {
        color: rgb(38,50,56) !important;
    }
    .bottomNavContainer a:focus {
        color: rgb(38,50,56) !important;
    }
/*.bottomNavContainer a:after {
        content: "\f054" !important;
        position: relative !important;
         top:28%;
        left: auto !important;
        right: auto;
        bottom: auto !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -o-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        display: inline-block !important;
        margin-left: 0.5rem !important;
        width: unset !important;
        border-bottom: none !important;
    }*/
    
.bottomNavContainer a span i {
    margin-left:0.5rem;
    font-weight:700;
}
ul.mainMenu a,
ul.mainMenu a:link {
    position: relative;
    font: normal 700 1.2em 'Roboto', Arial, sans-serif;
    color: rgb(38,50,56);
    display: block;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    padding: 1.71rem 1rem;
    -webkit-transition-property: background;
    -moz-transition-property: background;
    -o-transition-property: background;
    transition-property: background;
}
ul.mainMenu a:visited {
    color: rgb(15,61,57);
}
ul.mainMenu a:hover {
   /* color: rgb(255,255,255);
    background: rgb(15,61,57);*/
}
    ul.mainMenu a:active {
        /*  color: rgb(255,255,255);
    background: rgb(15,61,57);*/
    }
ul.mainMenu a:focus {
   /* color: rgb(255,255,255);
    background: rgb(15,61,57);*/
}

ul.mainMenu a i {
    display: inline-block;
    margin-right: 0.5rem;
}

.desktopNav ul.mainMenu a:after {
    content: normal;
    margin-left: 0;
}


.desktopNav ul.mainMenu > li {
    float: left;
    /* height: 10rem;*/    
    width: 13%;
    
}
    .desktopNav ul.mainMenu > li:first-child {
        margin-left: 20.2rem;
    }
.desktopNav ul.mainMenu > li > a:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    color: rgb(220,230,229);
    display: block;
    z-index: 1;
}

    /*.desktopNav ul.mainMenu > li:hover a:after, .desktopNav ul.mainMenu > li.selected:hover a:after {
        content: "";
        bottom: 0;
    }*/
    .desktopNav ul.mainMenu > li:first-child:hover a:after {
        border-bottom: 5px solid rgb(38,50,56);
        width: 50%;
    }
    .desktopNav ul.mainMenu > li:nth-child(2):hover a:after {
        border-bottom: 5px solid rgb(250,184,33);
        width: 50%;
    }
    .desktopNav ul.mainMenu > li:nth-child(3):hover a:after {
        border-bottom: 5px solid rgb(3,155,229);
        width: 100%;
    }
    .desktopNav ul.mainMenu > li:nth-child(4):hover a:after {
        border-bottom: 5px solid rgb(67,160,71);
        width: 80%;
    }
.desktopNav ul.mainMenu > li:nth-child(5):hover a:after {
        border-bottom: 5px solid rgb(1,87,155);
        width: 80%;
    }
    .desktopNav ul.mainMenu > li:last-child:hover a:after {
        border-bottom: 5px solid rgb(250,184,33);
        width: 80%;
    }

    .desktopNav ul.mainMenu > li.selected:first-child a:after {
        border-bottom: 5px solid rgb(38,50,56);
        width: 50%;
    }

    .desktopNav ul.mainMenu > li.selected:nth-child(2) a:after {
        border-bottom: 5px solid rgb(250,184,33);
        width: 50%;
    }

    .desktopNav ul.mainMenu > li.selected:nth-child(3) a:after {
        border-bottom: 5px solid rgb(3,155,229);
        width: 100%;
    }

    .desktopNav ul.mainMenu > li.selected:nth-child(4) a:after {
        border-bottom: 5px solid rgb(67,160,71);
        width: 80%;
    }
.desktopNav ul.mainMenu > li.selected:nth-child(5) a:after {
        border-bottom: 5px solid rgb(1,87,155);
        width: 80%;
    }

    .desktopNav ul.mainMenu > li.selected:last-child a:after {
        border-bottom: 5px solid rgb(250,184,33);
        width: 80%;
    }
@-moz-document url-prefix() {
    .desktopNav ul.mainMenu > li:hover a:after {
        /* bottom: -0.7rem;*/
    }
}


.desktopNav ul.mainMenu > li.selected a,
.desktopNav ul.mainMenu > li:hover a,
.desktopNav ul.mainMenu > li[aria-expanded="true"] > a {
    /* color: rgb(255,255,255);
    background: rgb(15,61,57);*/
}
.desktopNav ul.mainMenu > li.hasChild[aria-expanded="true"] .navContainer,
.desktopNav ul.mainMenu > li:hover .navContainer {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    visibility: visible;
}

.desktopNav .bottomNavContainer a[role="menuitem"] {
    display: inline-block!important;
}

.desktopNav ul.subMainMenu {
    position: relative;
    /*padding: 1.5em 0 0;*/
    margin: auto;
}
    .desktopNav ul.subMainMenu > li {
        float: left;
        width: 25%;
        height: 140px;
        display: table;
        padding:1em;       
        overflow: hidden;
    }
    .desktopNav ul.subMainMenu a,
    .desktopNav ul.subMainMenu a:link {
        font:normal 700 1.125em 'Roboto', sans-serif;
        position: relative;        
        color: rgb(255,255,255) !important;
        border-left: none;
        display: table-cell;
        padding:1rem;
        text-align: center;
        -webkit-transition-property: color;
        -moz-transition-property: color;
        -o-transition-property: color;
        transition-property: color;
        background: #e2dddb !important;
    }
    .desktopNav ul.mainMenu > li:first-child ul.subMainMenu a {
        background: rgb(38,50,56) !important;
    }
    .desktopNav ul.mainMenu > li:nth-child(2) ul.subMainMenu a {
        background: rgb(250,184,33) !important;
    }
    .desktopNav ul.mainMenu > li:nth-child(3) ul.subMainMenu a {
        background: rgb(3,155,229) !important;
    }
    .desktopNav ul.mainMenu > li:nth-child(4) ul.subMainMenu a {
        background: rgb(67,160,71) !important;
    }
.desktopNav ul.mainMenu > li:nth-child(5) ul.subMainMenu a {
        background: rgb(1,87,155) !important;
    }
    .desktopNav ul.mainMenu > li:last-child ul.subMainMenu a {
        background: rgb(250,184,33) !important;
    }
.desktopNav ul.subMainMenu a:visited {
    color: rgb(255,255,255)!important;
}
.desktopNav ul.subMainMenu a:hover {
    color: rgb(38,50,56)  !important;
}
/*.desktopNav ul.subMainMenu > li > a:after {
        content: normal;
        position: absolute;
        right: 0;
        top: 50%;
        left: auto;
        bottom: auto !important;
        -webkit-transform: translateY(-50%) !important;
        -moz-transform: translateY(-50%) !important;
        -o-transform: translateY(-50%) !important;
        -ms-transform: translateY(-50%) !important;
        transform: translateY(-50%) !important;
        color: rgb(163,191,188) !important;
        border-bottom: none !important;
    }*/

.desktopNav ul.subMainMenu > li.selected a {
    color: rgb(38,50,56) !important;
}


ul.relatedLinks a,
ul.relatedLinks a:link {
    position: relative;
    font-size: 1.3rem!important;
    color: rgb(15,61,57)!important;
    padding: 1rem 0.5rem 1rem 4rem!important;
    text-align: left!important;
    -webkit-transition-property: background;
    -moz-transition-property: background;
    -o-transition-property: background;
    transition-property: background;
    background: rgb(163,191,188)!important;
}
ul.relatedLinks a:visited {
    color: rgb(15,61,57) !important;
}
ul.relatedLinks a:hover {
    color: rgb(255,255,255) !important;
    background: rgb(227,83,13)!important;
}
ul.relatedLinks a:active {
    color: rgb(255,255,255) !important;
    background: rgb(227,83,13)!important;
}
ul.relatedLinks a:focus {
    color: rgb(255,255,255) !important;
    background: rgb(227,83,13)!important;
}
ul.relatedLinks a:after {
    content: normal!important;
    position: static!important;
    left: auto!important;
    bottom: auto!important;
    -webkit-transform: none!important;
    -moz-transform: none!important;
    -o-transform: none!important;
    -ms-transform: none!important;
    transform: none!important;
}
ul.relatedLinks a > span {
    font: normal 0.8rem aleoitalic, Aria, sans-serif;
    display: block;
    text-transform: none;
}

ul.relatedLinks i {
    position: absolute;
    top: 50%;
    left: 1.1rem;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%) ;
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 2rem;
}

ul.relatedLinks > li {
    float: left;
    width: 47%;
    height: 8em;
    margin-right: 4%;
    margin-bottom: 4%;
    display: table;
}
ul.relatedLinks > li:nth-child(even) {
    margin-right: 0;
}




.passwordProtectedIcon {
    background: rgb(223,230,233);
}


/****************************************************************
Main Content - Inside Pages
****************************************************************/
.mainContainer {
    position: relative;    
    padding-top: 11rem;
}
.mainContainer .row {
    margin: 0;
}
.mainContainer main {
    width: 100%;
    height: auto;
    min-height: 25rem;
    overflow-x: hidden;
}
    .mainContainer aside.col-sm {
        flex-grow: 1;
        padding: 0;
        background: rgb(223,230,233);
    }
    .mainContainer main.col-sm {
        flex-grow: 2;
        padding: 0 2.5rem 1.5rem 2.5rem;
        background: rgb(255,255,255);
    }

    .mainContainer main.searchPage,
    .mainContainer main.passwordCo,
    .mainContainer main.formPage {
        padding-top: 2rem;
    }


/** Aside Menu - Inside Pages **/
ul.subSideMenu {
    display: none;
}

.moreOption {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1rem;
    color: rgb(15,61,57);
    display: inline-block;
    padding: 0.73rem;
    cursor: pointer;
    border: none;
    -webkit-transition: background 300ms ease 0s;
    -moz-transition: background 300ms ease 0s;
    -o-transition: background 300ms ease 0s;
    transition: background 300ms ease 0s;
    background: none;
}
.moreOption:hover {
    color: rgb(255,255,255)!important;
}

.moreOption:before {
    content: "\f078";
    margin-left: 0;
    -webkit-transform: transform 300ms ease 0s;
    -moz-transform: transform 300ms ease 0s;
    -o-transform: transform 300ms ease 0s;
    transition: transform 300ms ease 0s;
}

.moreOption.openIcon:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

ul.sideMenu a,
ul.sideMenu a:link {
    font: normal 400 1.25em 'Roboto', Arial, sans-serif;
    color: rgb(0,0,0);
    display: block;
    padding: 0.8rem 1.5rem;
    -webkit-transition: background 300ms ease 0s;
    -moz-transition: background 300ms ease 0s;
    -o-transition: background 300ms ease 0s;
    transition: background 300ms ease 0s;
    background: rgb(223,230,233);
}
    ul.sideMenu a:visited {
        color: rgb(0,0,0);
    }
    ul.sideMenu a:hover {
        color: rgb(255,255,255);
        background: rgb(38,50,56);
    }
    ul.sideMenu a:active {
        color: rgb(255,255,255);
        background: rgb(38,50,56);
    }
    ul.sideMenu a:focus {
        color: rgb(255,255,255);
        background: rgb(38,50,56);
    }

ul.sideMenu > li {
    position: relative;
}

ul.sideMenu > li.hasChild a {
    padding-right: 2.5rem;
}

    ul.sideMenu > li.selected a {
        color: rgb(255,255,255);
        background: rgb(38,50,56);
    }
ul.sideMenu > li.selected .moreOption {
    color: rgb(255,255,255);
}

    ul.sideMenu > li:hover > a {
        color: rgb(255,255,255);
        background: rgb(38,50,56);
    }
ul.sideMenu > li:hover .moreOption {
    color: rgb(255,255,255);
}

ul.subSideMenu a,
ul.subSideMenu a:link {
    font: italic 400 1.125rem 'Roboto', Arial, sans-serif !important;
    color: rgb(255,255,255) !important;
    padding: 0.8rem 1.5rem !important;
    display: block;
    background: rgb(84,110,122) !important;
}
ul.subSideMenu a:visited {
    color: rgb(255,255,255)!important;
}
ul.subSideMenu a:hover {
    color: rgb(255,255,255)!important;
    background: rgb(93,118,115)!important;
}
ul.subSideMenu a:active {
    color: rgb(255,255,255)!important;
    background: rgb(93,118,115)!important;
}
ul.subSideMenu a:focus {
    color: rgb(255,255,255)!important;
    background: rgb(93,118,115)!important;
}
ul.subSideMenu > li.selected a {
    color: rgb(255,255,255) !important;
    background: rgb(93,118,115) !important;
}


/** TOOLBAR [ TEXTSIZER && GOOGLE TRANSLATE ] **/
.headerContent {
    /*  padding: 1.5rem 0.8rem;*/
    background: rgba(38,50,56,0.7);
}
    .headerContent.town-color {
        background: rgba(38,50,56,0.7) url(../images/logo-inner.png) left bottom no-repeat;
    }
    .headerContent.water-color {
        background: rgba(38,50,56,0.7) url(../images/logo-inner-lightblue.png) left bottom no-repeat;
    }
    .headerContent.community-color {
        background: rgba(38,50,56,0.7) url(../images/logo-inner-lightblue.png) left bottom no-repeat;
    }
    .headerContent.departments-color {
        background: rgba(38,50,56,0.7) url(../images/logo-inner-green.png) left bottom no-repeat;
    }
    .headerContent.covid-19-virus-info-color {
        background: rgba(38,50,56,0.7) url(../images/logo-inner-darkblue.png) left bottom no-repeat;
    }
    .headerContent.job-opportunities-color {
        background: rgba(38,50,56,0.7) url(../images/logo-inner.png) left bottom no-repeat;
    }
.toolBox{
    padding:1.5rem 0;
}
ol.breadCrumb a,
ol.breadCrumb a:link {
    font: normal 400 0.9375em 'Roboto', Arial, sans-serif;
    color: rgb(84,110,122);
    display: inline-block;
    text-transform: uppercase;
}
ol.breadCrumb a:visited {
    color: rgb(84,110,122);
}
    ol.breadCrumb a:hover {
        color: rgb(241,177,32);
    }
    ol.breadCrumb a:active {
        color: rgb(241,177,32);
    }
    ol.breadCrumb a:active {
        color: rgb(241,177,32);
    }

ol.breadCrumb a:after {
    content: "\f105";    
    margin-right: 1rem;
    margin-left: 1rem;
}


ol.breadCrumb {
    float: left;
}
ol.breadCrumb > li {
    float: left;
}
ol.breadCrumb > li:first-child a:before {
    content: "\f015";
    margin-left: 0;
}
ol.breadCrumb > li:last-child a:after {
    content: normal;
    margin-right: 0;
    margin-left: 0;
}


ul.textResizer {
    float: right;    
}
ul.textResizer > li {
    float: left;
    margin-right: 0.5rem;
}
ul.textResizer > li:last-child {
    margin-right: 0;
}

ul.textResizer span,
ul.textResizer a,
ul.textResizer a:link {
    font: normal 400 0.9375em/0 'Roboto', Arial, sans-serif;
    color: rgb(52,68,76);
    text-transform: uppercase;
    display: inline-block;
}
ul.textResizer a,
ul.textResizer a:link {
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: normal;
}
ul.textResizer a:visited {
    color: rgb(15,61,57);
}
    ul.textResizer a:hover {
        color: rgb(1,87,188);
    }
    ul.textResizer a:active {
        color: rgb(1,87,188);
    }
    ul.textResizer a:focus {
        color: rgb(1,87,188)
    }

ul.textResizer span {
    margin-right: 0.5rem;
}
    ul.textResizer a.small-text {
        font-size: 0.9375rem;
    }

    ul.textResizer a.medium-text {
        font-size: 1.188rem;
    }

    ul.textResizer a.large-text {
        font-size: 1.563rem;
    }
ul.textResizer a.textresizer-active {
    color: rgb(1,87,188);
}
#google_translate_element {
    position: relative;
    top: 1rem;
    display: inline-block;
}


ul.phoneColsList {
    margin-bottom: 2rem;
}
ul.phoneColsList > li:before {
    content: "\f105";
    margin-left: 0;
    margin-right: 0.5rem;
}

.footerTop .eNews{
    padding: 4.5em 0 ;
    border-bottom: 1px solid rgb(183, 183, 183);
}
.footerTop .poll {
    padding: 4.5em 0;
}
    .footerTop .eNews h3,
    .footerTop .poll h3 {
        font: normal 300 2em "Roboto", Arial, sans-serif;
        text-transform: uppercase;
        color: rgb(255,255,255);
        margin-bottom:0;
    }
    .footerTop .eNews h3 span,
    .footerTop .poll h3 span {
        font-weight:700;
    }
        .footerTop .eNews h3 i {
            color: #0896da;
        }
        .footerTop .poll h3 i {
            color: #439944;
        }
        .footerTop .eNews h3 i,
        .footerTop .poll h3 i {
            position: absolute;
            right: 15%;
        }
    .footerTop .eNews p,
    .footerTop .poll p {
        font: normal 500 1.5em "Roboto", Arial, sans-serif;        
        color: rgb(255,255,255);
        margin-bottom: 0;
    }
.footerTop .btnRegister {
    background: #0896da;
}
.footerTop .pollQuestion {
    background: #439944;
}
.footerTop .btnRegister, .footerTop .pollQuestion {
    font: normal 700 1.25em 'Roboto', Arial, sans-serif;
    color: rgb(255,255,255);
    text-transform: uppercase;
    text-align: center;
    display: block;
    margin: 0;
    padding: 0.8rem 4rem;
    cursor: pointer;
    border: none;
    -webkit-transition: background 300ms ease 0s;
    -moz-transition: background 300ms ease 0s;
    -o-transition: background 300ms ease 0s;
    transition: background 300ms ease 0s;
    /* -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;*/
    float:right;
}

    .footerTop .btnRegister:hover, .footerTop .pollQuestion:hover {
        border-color: rgb(241,177,32);
        background: rgb(241,177,32);
    }

    .footerTop .btnRegister:focus, .footerTop .pollQuestion:focus {
        border-color: rgb(241,177,32);
        background: rgb(241,177,32);
    }

.footerBottom h2 {
    color: rgb(255,255,255);
    text-transform: uppercase;
    margin-bottom: 0.7rem;
}
.footerBottom .french h2 {
	font-size: 1.5rem;
    color: rgb(255,255,255);
    text-transform: uppercase;
    margin-bottom: 0.7rem;
}
.footerBottom p {
    font: normal 400 1.25em 'Roboto', Arial, sans-serif;
    color: rgb(255,255,255);
    margin-top: 1rem;
}
.footerBottom p.mob{
    display:none
}
.footerBottom p img {
    display: inline-block;
    margin-top: 2rem;
    margin-right: 3rem;
}
.footerBottom p img + img {
    margin-right: 0;
}
.footerBottom a,
.footerBottom a:link {
    font-size: inherit;
    font-weight: normal;
    color: rgb(255,255,255);
}
.footerBottom a:visited {
    color: rgb(255,255,255);
}
    .footerBottom a:hover {
        color: rgb(241,177,32);        
    }
    .footerBottom a:active {
        color: rgb(241,177,32);
    }
    .footerBottom a:focus {
        color: rgb(241,177,32);
    }


.pipe {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

ul.footerNav a,
ul.footerNav a:link {
    position: relative;
    font: normal 1rem 'Aleo Regular', Arial, sans-serif;
    color: rgb(255,255,255);
    display: block;
    padding: 0.5rem;
}
ul.footerNav a:visited {
    color: rgb(255,255,255);
}
ul.footerNav a:hover {
    color: rgb(35,183,169);
}
ul.footerNav a:active {
    color: rgb(35,183,169);
}
ul.footerNav a:focus {
    color: rgb(35,183,169);
}

ul.footerNav a:before {
    content: normal;
    margin-left: 0;
}
ul.footerNav a:after {
    content: "\f105";
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: rgb(121,173,174);
    margin-left: 0;
}


.footerBottom cite {
    font: normal 400 1em 'Roboto', Arial, sans-serif;
    color: rgb(255,255,255);
    text-transform: uppercase;
    text-align: left;
    display: inline-block;
    margin-top: 0.5rem;
}
.footerBottom small {
    font: normal 500 1.25em 'Roboto', Arial, sans-serif;
    color: rgb(255,255,255);
    text-transform: uppercase;
    text-align: left;
    display: inline-block;
    margin-top:0;
}
.footerBottom cite a > span{
    color: rgb(255,255,255);
    width: 71px;
    height: 22px;
    display: inline-block;
    text-indent: -9999Rem;
    background: url(../images/All-Net-Municipal-Solutions.png) center center no-repeat;
}
.footerBottom cite a:visited {
    color: rgb(255,255,255);
}
.footerBottom cite a:hover {
    color: rgb(241,177,32);
}
.footerBottom cite a:active {
    color: rgb(241,177,32);
}
.footerBottom cite a:focus {
    color: rgb(241,177,32);
}
    
.headerTop .socialMedia{
    display:inline-block;   
}
    .headerTop .socialMedia a, .headerTop .socialMedia a:link {
        font: normal 600 1.250em 'Roboto', Arial, sans-serif;
    }
.socialMedia a,
.socialMedia a:link {
    font: normal 600 2em 'Roboto', Arial, sans-serif;
    color: rgb(255,255,255);
    display: inline-block;
    margin: 0 0.5rem;
}
.socialMedia a:visited {
    color: rgb(255,255,255);
}
    .socialMedia a:hover {
        color: rgb(241,177,32);
    }
    .socialMedia a:active {
        color: rgb(241,177,32);
    }
    .socialMedia a:focus {
        color: rgb(241,177,32);
    }

.socialMedia a:before {
    margin-left: 0;
}
.footerBottom .socialMedia a.facebook {
    margin-left:0;
}
.socialMedia a.facebook:before {
    content: "\f230";
}
.socialMedia a.twitter:before {
    content: "\f099";
}
.socialMedia a.instagram:before {
    content: "\f16d";
}
.socialMedia a.youtube:before {
    content: "\f167";
}
.socialMedia a.linkedIn:before {
    content: "\f0e1";
}
.socialMedia a.tripAdvisor:before {
    content: "\f262";
}



    

.municipalServices .col-5,
.municipalServices .col-7 {
    text-align: center;
}
.municipalServices .col-5 h2,
.municipalServices .col-7 h2 {
    color: rgb(255,255,255);
    margin-bottom: 2rem;
}

.municipalServices .col-7 h2 {
    margin-bottom: 0.5rem;
}
.municipalServices .col-5 h2 span {
    font-size: 0.9rem;
    display: block;
    padding-top: 0.5rem;
}
.municipalServices .col-7 {
    overflow: hidden;
    background: url(../images/bgRoadBan.jpg) center bottom no-repeat;
}


.roadBanCont{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.municipalServices .col-7 i {
    font-size: 2rem;
    color: rgb(255,255,255);
}
a.inEffectLink,
a.inEffectLink:link {
    color: rgb(255,255,255);
    text-align: center;
    display: block;
    padding: 0.5rem;
    -webkit-transition: background 300ms ease 0s;
    -moz-transition: background 300ms ease 0s;
    -o-transition: background 300ms ease 0s;
    transition: background 300ms ease 0s;
    background: rgb(22,87,81);
}
a.inEffectLink:visited {
    color: rgb(255,255,255);
}
a.inEffectLink:hover {
    background: rgb(38,148,138);
}
a.inEffectLink:active {
    background: rgb(38,148,138);
}
a.inEffectLink:focus {
    background: rgb(38,148,138);
}

a.roadBanInEffect,
a.roadBanInEffect:link {
    background: rgb(227,83,13);
}
a.roadBanInEffect:hover {
    background: rgb(255,100,24);
}
a.roadBanInEffect:active {
    background: rgb(255,100,24);
}
a.roadBanInEffect:focus {
    background: rgb(255,100,24);
}














/*---------------------table styling-------------------------*/
/* 
Generic Styling, for Desktops/Laptops 
*/
table {
    width: 100%;
    border-collapse: collapse;
}

    table .council-table {
        font-size: 1em;
    }

td, th {
    padding: 6px;
    border: none;
    text-align: left;
}

table.tblAgendaMinutes td,
table.tblAgendaMinutes th {
    padding: 1em;
}

    table.tblAgendaMinutes td span {
        display: none;
    }

table.tblAgendaMinutes tbody td:nth-child(3),
table.tblAgendaMinutes tbody td:nth-child(4),
table.tblAgendaMinutes tbody td:nth-child(5) {
    padding-left: 2em;
}

table.tblAgendaMinutes thead tr {
    background: rgb(35,156,123);
    color: #ffffff;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
}

table.tblAgendaMinutes tbody {
    background: rgb(242,242,235);
}

    table.tblAgendaMinutes tbody td {
        color: rgb(0,35,65);
    }

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        table.tblAgendaMinutes tbody td:nth-child(3),
        table.tblAgendaMinutes tbody td:nth-child(4),
        table.tblAgendaMinutes tbody td:nth-child(5) {
            padding-left: 1em;
        }

        table.tblAgendaMinutes td span {
            display: inline-block;
            margin-right: 1em;
        }

        table.tblAgendaMinutes thead {
            display: none;
        }

            table.tblAgendaMinutes thead tr {
                position: relative;
                top: auto;
                left: auto;
            }

    tr {
        border: none;
        border-bottom: 1px solid rgb(15,61,57);
    }

    .council-table td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #ccc;
        position: relative;
        padding-left: 50%;
    }

        .council-table td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }
}




/*-------------responsive tables generic---------------------*/
.responsive-table {
    text-transform: none;
}

tr:nth-of-type(2n) {
    background: none !important;
}

tr td:first-child {
    background: none !important;
}
/* table */
.responsive-table table {
    width: 100%;
    margin-bottom: 0.5em;
    font-size: 0.8em;
    border-collapse: collapse;
    border-spacing: 0;
}

.responsive-table table {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-align: left;
    color: #333;
}

    .responsive-table table tr {
        color: #222;
    }

    .responsive-table table tr {
        background: #efefef;
    }

        .responsive-table table tr:nth-child(even) {
            background: #efefef;
        }

    .responsive-table table th {
        font-weight: bold;
        padding: 0.35em;
        font-size: 1em;
    }

    .responsive-table table td {
        padding: 0.6em;
        font-size: 1.1em;
    }

    .responsive-table table td {
        text-align: left;
    }



#idLiketoSearchModal .modal-header {
    background: rgb(1,87,155) url(../images/logo-footer.png) left center no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
}



ul.notices,
ul.notices > li {
    list-style: none;
    padding: 0;
    margin: 0;
}
a.img {
    padding-left: 0;
}
a.img img {
    max-width: 150px;
    height: auto;
    float: left;
    margin-right: 0.5rem;
    display: block;
}
/****************************************************************
MEDIA QUERY
****************************************************************/
@media only screen and (max-width:1880px) {
    ul .mainMenu a, ul.mainMenu a:link {
        /*font-size: 1.5rem;*/
        padding: 1.74rem 1rem;
    }
}
@media only screen and (max-width:1830px) {
    
}

@media only screen and (max-width:1680px) {
	.desktopNav ul.mainMenu > li {
    
    width: 12%;
	}
    h1.siteLogo,
    h1.siteLogoFR {
        width: 300px;
        height: 145px;
    }   

    ul.mainMenu a,
    ul.mainMenu a:link {
        font-size: 1.2rem;
    }
    /*.desktopNav ul.mainMenu > li:hover a:after {
        bottom: -0.6rem;
    }*/
    .topNavContainer {
        min-height: 20rem;
    }
    ul.relatedLinks a,
    ul.relatedLinks a:link {
        font-size: 1.2rem !important;
    }
    ul.relatedLinks > li {
        height: 7.3em;
    }
    .bottomNavContainer a,
    .bottomNavContainer a:link {
        font-size: 1.250rem !important;
    }


    .popupAlert a, 
    .popupAlert a:link {
        font-size: 0.8rem;
    }

    /*.headerTop a,
    .headerTop a:link {
        font-size: 0.95rem;
    }*/
    .headerTop a.langTranslateBTN,
    .headerTop a.langTranslateBTN:link {
        margin-top: 0.25rem;
    }


    h2.categoryTitle {
        font-size: 3.5rem;
    }
    .headerContent, .headerContent.town-color, .headerContent.water-color, .headerContent.community-color, headerContent.departments-color {
        background-size: 30% 80%;
    }
    h2.categoryTitle .subCatTitle {
        font-size: 1.8rem;
    }

    .frmSearch input[type="search"] {
        font-size: 1rem;
    }
    .frmSearch button[type="submit"] {
        right: 0.3rem;
    }

    .municipalServices .col-5 h2, 
    .municipalServices .col-7 h2 {
        font-size: 1.5rem;
    }
    a.inEffectLink,
    a.inEffectLink:link {
        font-size: 0.9rem;
    }
}
@media only screen and (max-width:1620px){
    .headerTop {
        padding: 1.250rem 1rem 1.250rem 24rem;        
    }
    .desktopNav ul.mainMenu > li:first-child {
        margin-left: 18rem;
    }

    
}
@media only screen and (max-width:1520px) {
	
	h1.siteLogo, h1.siteLogoFR {
    width: 300px;
    height: 143px;
}
ul.mainMenu a, ul.mainMenu a:link {
    font-size: 1.1rem;
}
.headerTop {
    padding: 1.250rem 1rem 1.250rem 22rem;
}
.headerTop a, .headerTop a:link {
    font-size: 0.8rem;
    margin-right: 1.5rem;
}
}
@media only screen and (max-width:1450px) {
	
    h1.siteLogo,
    h1.siteLogoFR {
        width: 275px;
        height: 139px;
    }
    .headerTop .socialMedia a, .headerTop .socialMedia a:link {
       font-size:1rem;
    }
    .headerTop a, .headerTop a:link {
        /*font-size: 0.8rem;*/        
        margin-right: 1.5rem;   
   }
    .headerTop {
        padding: 1.250rem 1rem 1.250rem 20rem;
    }
    .desktopNav ul.mainMenu > li:first-child {
        margin-left: 15.5rem;
    }
    ul.mainMenu a,
    ul.mainMenu a:link {
        font-size: 1rem;
    }
    .topNavContainer {
        min-height: 17rem;
    }
    ul.relatedLinks a,
    ul.relatedLinks a:link {
        font-size: 1.1rem !important;
    }
    ul.relatedLinks > li {
        height: 6.6rem;
    }
	  .desktopNav ul.subMainMenu > li {
        height: 130px;
    }


    .desktopNav ul.subMainMenu a, 
    .desktopNav ul.subMainMenu a:link {
        font-size: 0.8em!important;
    }
    .bottomNavContainer a,
    .bottomNavContainer a:link {
        font-size: 0.9em !important;
    }
   
}

@media only screen and (max-width:1400px) {
    .desktopNav ul.subMainMenu a, 
    .desktopNav ul.subMainMenu a:link {
        font-size: 0.85rem;
    }
    /*.bottomNavContainer a, 
    .bottomNavContainer a:link {
        font-size: 1.150rem!important;
    }*/
    ul.relatedLinks a, 
    ul.relatedLinks a:link {
        font-size: 1rem!important;
    }

    .municipalServices .col-5 h2, 
    .municipalServices .col-7 h2 {
        font-size: 1.3rem;
    }

    a.inEffectLink,
    a.inEffectLink:link {
        font-size: 0.85rem;
    }
}

@media only screen and (max-width:1330px) {
    h1.siteLogo, 
	h1.siteLogoFR {
		width: 275px;
		height: 138px;
	}

    ul.mainMenu a,
    ul.mainMenu a:link {
        font-size: 0.9rem;
    }

    .topNavContainer {
        min-height: 17rem;
    }
    ul.relatedLinks a,
    ul.relatedLinks a:link {
        font-size: 1rem !important;
    }
    ul.relatedLinks > li {
        height: 6rem;
    }
    /*.bottomNavContainer a,
    .bottomNavContainer a:link {
        font-size: 1.2rem !important;
    }*/

    h2.categoryTitle {        
        font-size: 3rem;
    }
    h2.categoryTitle .subCatTitle {
        font-size: 1.6rem;
    }

    h3.pageTitle {
        font-size: 1.5rem;
    }
    h4.searchTitle {
        font-size: 1.3rem;
    }

    .frmSearch {
        top: 19rem;
    }
    .activePopupAlert .frmSearch {
        top: 20rem;
    }
    .frmSearch input[type="search"] {
        font-size: 0.9rem;
    }
    .frmSearch button[type="submit"] {
        right: 0.2rem;
    }

    main.formPage i {
        font-size: 4rem;
    }
    main.formPage .textSuccess {
        font-size: 1.3rem;
    }

}

@media only screen and (max-width:1265px){
/*    h1.siteLogo, h1.siteLogoFR {
        width: 260px;
        height: 130px;
    }*/
    .headerTop a, .headerTop a:link {
        margin-right: 1rem;
    }
    .headerTop .socialMedia a, .headerTop .socialMedia a:link {
        margin: 0 0.5rem;
    }
}
@media only screen and (max-width:1250px) {
	h1.siteLogo, h1.siteLogoFR {
    width: 275px;
    height: 136px;
}
    .scrollup {
        bottom: 1.5rem;
        right: 1.5rem;
    }
   
        .desktopNav ul.mainMenu > li:first-child {
            margin-left: 17rem;
        }
    ul.mainMenu a, ul.mainMenu a:link {
        font-size: 0.85rem;
    }
}
@media only screen and (max-width:1210px){
    .footerTop .eNews p, .footerTop .poll p {
        font-size: 1.25rem;        
    }
    .footerTop .eNews h3, .footerTop .poll h3 {
        font-size:1.750rem;
    }
    .footerTop .btnRegister, .footerTop .pollQuestion{
        font-size:1rem;
    }
    
}
@media only screen and (max-width:1190px) {
	h1.siteLogo, h1.siteLogoFR {
    width: 275px;
    height: 131px;
}
    .desktopNav,
    ul.subMainMenu,
    ul.subSubMainMenu, .headerTop > div a > span {
        display: none;
    }

    .mobileNav,
    .menuIcon,
    .closeNav {
        display: inherit;
    }

    .headerBottom {        
        min-height: 4.2rem;
    }
    .headerTop a::before {
        margin-left: 0;
        margin-right: 0;
    }
    .headerTop .socialMedia a, .headerTop .socialMedia a:link {
        font-size: 0.9rem;
    }
    .headerTop .head{
        float:right;
    }
    .moreOptionMainMenu,
    .moreOptionSubMainMenu {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 1rem;
        color: rgb(255,255,255);
        display: inline-block;
        padding: 1rem 1.1rem;
        cursor: pointer;
        -webkit-transition: background 300ms ease 0s;
        -moz-transition: background 300ms ease 0s;
        -o-transition: background 300ms ease 0s;
        transition: background 300ms ease 0s;
        border: none;
        cursor: pointer;
        background: none;
        z-index: 5;
    }
    .moreOptionSubMainMenu {
        padding: 0.9rem 1.1rem;
    }

    .moreOptionMainMenu:before,
    .moreOptionSubMainMenu:before {
        content: "\f078";
        margin-left: 0;
        -webkit-transform: transform 300ms ease 0s;
        -moz-transform: transform 300ms ease 0s;
        -o-transform: transform 300ms ease 0s;
        transition: transform 300ms ease 0s;
    }
    .moreOptionMainMenu.openIcon:before,
    .moreOptionSubMainMenu.openIcon:before {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .moreOptionMainMenu:hover,
    .moreOptionSubMainMenu:hover {
        color: rgb(255,255,255);
    }

    nav.navOpen {
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .closeNav {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 1.3rem;
        color: rgb(255,255,255);
        padding: 0.5em;
        margin: 0.5rem 0.5rem 0.5rem 0;
        border: none;
        cursor: pointer;
        background: none;
    }

    nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 400px;
        min-width: 300px;
        text-align: right;
        -webkit-transform: translate3d(100%,0,0);
        -moz-transform: translate3d(100%,0,0);
        -ms-transform: translate3d(100%,0,0);
        -o-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        -webkit-transition: transform 300ms ease 0s;
        -moz-transition: transform 300ms ease 0s;
        -o-transition: transform 300ms ease 0s;
        transition: transform 300ms ease 0s;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        z-index: 20;
        background: rgb(65,87,97);
    }

    ul.mainMenu {
        margin-top: 4rem;
    }

    ul.mainMenu i {
        margin-right: 0.5rem;
        display: inline-block;
        /*display: none;*/
    }

        ul.mainMenu a,
        ul.mainMenu a:link {
            position: static;
            font-size: 1rem;
            text-align: left;
            border-left: none;
            display: block;
            padding: 1rem;
            color: rgb(255,255,255) !important;
        }

    ul.mainMenu > li {
        position: relative;
    }

    ul.mainMenu > li.hasChild > a {
        padding-right: 2.5em;
    }

        /* ul.mainMenu > li.selected > a {
        color: rgb(255,255,255);        
        background: rgb(22,87,81);
    }*/
	ul.mainMenu > li:first-child > a {
            
            background: rgb(38,50,56);
        }
        ul.mainMenu > li:nth-child(2) > a {
            
            background: rgb(241,177,32);
        }

        ul.mainMenu > li:nth-child(3) > a {
            background: rgb(3,155,229);
        }

        ul.mainMenu > li:nth-child(4) > a {
            background: rgb(67,160,71);
        }

        ul.mainMenu > li:last-child > a {
            background: rgb(1,87,155);
        }
    ul.mainMenu > li.selected .moreOptionMainMenu {
        color: rgb(255,255,255);
    }
        ul.mainMenu > li:first-child.selected > a {
            color: rgb(255,255,255);
            background: rgb(42, 80, 99);
        }
        ul.mainMenu > li:nth-child(2).selected > a {
            color: rgb(255,255,255);
            background: rgb(240, 198, 101);
        }

        ul.mainMenu > li:nth-child(3).selected > a {
            color: rgb(255,255,255);
            background: rgb(111, 197, 115);
        }

        ul.mainMenu > li:nth-child(4).selected > a {
            color: rgb(255,255,255);
            background: rgb(4, 113, 199);
        }

        ul.mainMenu > li:last-child.selected > a {
            color: rgb(255,255,255);
            background: rgb(89, 191, 241);
        }
    ul.mainMenu > li.selected .moreOptionMainMenu {
        color: rgb(255,255,255);
    }

        /* ul.mainMenu > li:hover > a {
        color: rgb(255,255,255);        
        background: rgb(22,87,81)
    }*/
        ul.mainMenu > li:first-child:hover > a {
            color: rgb(255,255,255);
            background: rgb(42, 80, 99);
        }
        ul.mainMenu > li:nth-child(2):hover > a {
            color: rgb(255,255,255);
            background: rgb(240, 198, 101);
        }
        ul.mainMenu > li:nth-child(3):hover > a {
            color: rgb(255,255,255);
            background: rgb(89, 191, 241);
            
        }
        ul.mainMenu > li:nth-child(4):hover > a {
            color: rgb(255,255,255);
            background: rgb(111, 197, 115);
            
        }
        ul.mainMenu > li:last-child:hover > a {
            color: rgb(255,255,255);
            background: rgb(4, 113, 199);
        }
    ul.mainMenu > li.hasChild:hover .moreOptionMainMenu {
         color: rgb(255,255,255);
    }


    ul.subMainMenu a,
    ul.subMainMenu a:link {
        font-size: 1rem;
        font-weight: 400;
        color: rgb(255,255,255);
        text-transform: none !important;
        padding-left: 1.5rem !important;
        border-bottom: none !important;
        background: rgb(65,87,97) !important;
    }
    
    ul.subMainMenu a:visited {
        color: rgb(255,255,255);
    }
        ul.subMainMenu a:hover {
            color: rgb(255,255,255);
            background: rgb(176,190,197) !important;
        }
        ul.subMainMenu a:active {
            color: rgb(255,255,255);
            background: rgb(176,190,197) !important;
        }
        

    ul.subMainMenu > li {
        position: relative;
    }

    ul.subMainMenu > li.hasChild > a {
        padding-right: 2.7rem;
    }

        ul.subMainMenu > li.selected > a {
            color: rgb(255,255,255);
            background: rgb(176,190,197) !important;
        }
    ul.subMainMenu > li.selected .moreOptionSubMainMenu {
        color: rgb(255,255,255);
    }


    
    ul.subMainMenu > li:hover > a {
        color: rgb(255,255,255);        
        background: rgb(176,190,197) !important;
    }
   
    ul.subMainMenu > li.hasChild:hover .moreOptionSubMainMenu {
        color: rgb(255,255,255);
    }


    ul.subSubMainMenu a,
    ul.subSubMainMenu a:link {
        font-style: italic;
        color: rgb(255,255,255) !important;
        background: rgb(26,36,41) !important;
        border-bottom: none !important;
        padding-left: 2rem !important;
    }
        ul.subSubMainMenu a:visited {
            color: rgb(255,255,255) !important;
        }
    ul.subSubMainMenu > li a:hover {
        color: rgb(255,255,255) !important;
        background: rgb(84,110,122) !important;
    }

    ul.subSubMainMenu > li.selected > a {
        color: rgb(255,255,255) !important;
        background: rgb(84,110,122) !important;
    }


    .btnPollQuestionVote {
        font-size: 1rem;
    }


    .frmSearch {
        top: 13rem;
    }
    .activePopupAlert .frmSearch {
        top: 16rem;
    }
    .frmSearch input[type="search"] {
        font-size: 1rem;
    }
    .frmSearch button[type="submit"] {
        font-size: 1.2rem;
    }


    ol.breadCrumb a,
    ol.breadCrumb a:link {
        font-size: 0.8rem;
    }

    .toolBox {
        padding: 1rem 0 1.5rem;
    }
    .footerBottom small{
        font-size:1rem;
    }
    .footerBottom p{
        font-size:1rem;
    }
    

   .footerBottom .socialMedia a{
       font-size:1.5rem;
   }


    .idLiketoSearchBTN {
        font-size: 0.9rem;
    }
}

@media only screen and (max-width:1160px) {
    .headerTop {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .headerTop a.langTranslateBTN,
    .headerTop a.langTranslateBTN:link {
        margin-top: 0.5rem;
    }
    .headerTop a,
    .headerTop a:link {
        font-size: 0.7rem;
    }
}

@media only screen and (max-width:1085px) {
    .footerMiddle h2 {
        font-size: 1rem;
    }
    .footerMiddle p,
    ul.phoneColsList {
        font-size: 0.9rem;
    }
    .footerMiddle > .container {
        padding-right: 26rem;
        -webkit-background-size: 400px 255px;
        -moz-background-size: 400px 255px;
        background-size: 400px 255px;
    }
	.quickLinks{
		display: none;
	}
    .btnScrollup {        
        bottom: 5rem;
        right: 1rem;        
    }
}

@media only screen and (max-width:1050px) {

    h1.siteLogo, h1.siteLogoFR {
        width: 250px;
        height: 107px;
        top: -40px;
    }

    .headerTop {
        padding: 0.5rem 1rem;
    }

    .headerTop a,
    .headerTop a:link {
        font-size: 0.9rem;
        
    }
        .headerTop .socialMedia a, .headerTop .socialMedia a:link {
            font-size: 1rem;
        }
    
}

@media only screen and (max-width:1024px) {
    .footerBottom h2 {
        font-size: 1.4rem;
    }
    .pageTitle {
        font-size: 1.1rem;
    }

}

@media only screen and (max-width:1023px) {
    ul.sideMenu {
        display: none;
    }

    .mainContainer aside.col-sm,
    .mainContainer main.col-sm {
        flex-basis: auto;
    }
    .mainContainer main.col-sm {
        padding: 0 1rem 1.5rem 1rem;
    }
    .passwordProtectedIcon {
        padding-bottom: 1rem;
    }
    .mainContainer main.searchPage,
    .mainContainer main.passwordCo {
        padding-top: 2rem;
    }

    .sideMenuNav {
        display: inherit;
        width: 100%;
        font: normal 700 1rem 'Roboto', Arial, sans-serif;
        font-size: 1rem;
        color: rgb(255,255,255);
        cursor: pointer;
        text-align: center;
        text-transform: uppercase;
        border: none;
        padding: 0.8rem 1rem;
        margin: 0;
        background: rgb(38,50,56) url(../images/logo-sidemenu.png) left bottom no-repeat;
    }
        .sideMenuNav:before {
            content: "\f055";
            margin-right: 1rem;
        }
        .sideMenuNav:after {
            content: normal;
            margin-left: 0;
        }
        .sideMenuNav.openSideMenuIcon:before {
            content: "\f056";
        }


    .articlePost {
        border-top: none;
        padding-top: 0;
    }


    .toolBox ol.breadCrumb{
        display:none;
    }
    
    ol.breadCrumb a,
    ol.breadCrumb a:link {
        font-size: 1rem;
    }


    h2.categoryTitle {
        font-size: 2rem;
        float: none;
        width: 100%;
        text-align: center;
    }
    h2.categoryTitle .subCatTitle {
        font-size: 1.3rem;
    }

    .frmSearch {
        top: 12rem;
    }
    .activePopupAlert .frmSearch {
        top: 14rem;
    }
    .frmSearch input[type="search"] {
        font-size: 0.8rem;
    }
    .frmSearch button[type="submit"] {
        right: 0.1rem;
    }


    h3.pageTitle {
        font-size: 1.2rem;
    }


    .municipalServices .col-5 h2, 
    .municipalServices .col-7 h2 {
        font-size: 1.2rem;
    }
    .headerContent, .headerContent.town-color, .headerContent.water-color, .headerContent.community-color, .headerContent.departments-color {
        background-color: rgba(38,50,56,0.7);
        background-image: none;
    }
    ul.sideMenu > li:hover > a {
        color: rgb(255,255,255);
        background: rgb(84,110,112);
    }
    ul.sideMenu > li.selected a {
        color: rgb(255,255,255);
        background: rgb(84,110,112);
    }
}
@media only screen and (max-width:991px){
    .footerTop .eNews {
        padding: 3em 0 1.5rem;        
    }
    .footerTop .poll {
        padding: 1.5em 0 3rem;
    }
    .footerTop .eNews h3, .footerTop .poll h3 {
        font-size:1.5rem;
    }
    .footerTop .eNews p, .footerTop .poll p {
        font-size:1.25rem;
        margin: 1rem 0;
    }
    .footerTop .btnRegister, .footerTop .pollQuestion {
        font-size: 0.9rem;
        float: none;
        padding: 0.5em 2rem;
    }
    .footerTop .eNews h3 i, .footerTop .poll h3 i {       
        right: auto;
        left: 15rem;
    }
}
@media only screen and (max-width:960px) {
    .fb1.row .col-sm {
        flex-basis: auto;
    }
    .fb1.row .col-sm:nth-child(2) {
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(255,255,255,0.15);
        border-bottom: 1px solid rgba(255,255,255,0.15);
        padding-top: 2rem;
        padding-bottom: 2rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}



@media only screen and (max-width:890px) {
    .footerBottom h2 {
        font-size: 1.3rem;
    }
}

@media only screen and (max-width:880px) {
    .fb2.row .col-sm {
        flex-basis: auto;
    }
    .fb2.row .col-sm:first-child,
    .fb2.row .col-sm:last-child {
        text-align: left;
    }
    .fb2.row .col-sm:nth-child(2) {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .footerBottom p.desk {
        display:none;
    }

    .footerBottom p.mob {
        display: block;
    }
}

@media only screen and (max-width:850px) {
    .popupAlert > .container {
        font-size: 0.8rem;
    }
}

@media only screen and (max-width:767px) {
    .popupAlert > .container {
        font-size: 0.8rem;
    }
    .headerTop .socialMedia{
        margin:0;
    }
    /*  .socialMedia {
        position: static;
        bottom: auto;
        left: auto;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        transform: none;
        max-width: 400px;
        margin: 2rem auto 0;
        display: block;
        text-align: center;
    }

    .footerBottom small,
    .footerBottom cite {
        float: none;
        display: block;
        text-align: center;
        margin-top: 0.5rem;
    }
    .footerBottom cite {
        margin-bottom: 1.5rem;
    }*/
}

@media only screen and (max-width:750px) {    
    ol.breadCrumb a,
    ol.breadCrumb a:link {
        font-size: 0.9rem;
    }
}

@media only screen and (max-width:720px) {
    .footerMiddle > .container {
        text-align: center;
        padding: 1rem 1rem 18rem;
        background-position: center bottom;
    }
    ul.phoneColsList {
        max-width: 300px;
        text-align: left;
        display: block;
        margin: 0 auto 2rem;
    }

    .idLiketoSearchBTN {
        font-size: 0.8rem;
    }
}

@media only screen and (max-width:680px) {
    
    .sideMenuNav {
        font-size: 0.95rem;
    }
    ul.sideMenu a, 
    ul.sideMenu a:link {
        font-size: 0.9rem!important;
    }
    ul.subSideMenu a, 
    ul.subSideMenu a:link {
        font-size: 0.8rem!important;
    }

    .municipalServices .col-5, 
    .municipalServices .col-7 {
        flex-basis: auto;
        max-width: 100%;
    }
    .municipalServices .col-7 {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
    }
    .roadBanCont {
        position: static;
        top: auto;
        left: auto;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        transform: none;
        max-width: 300px;
        display: block;
        margin: auto;
        padding: 4rem 0;
    }


    h3.pageTitle,
    .footerBottom h2 {
        font-size: 1.1rem;
    }
    .btnRegister {
        font-size: 0.8rem;
    }
    .articlePost {
        font-size: 0.95rem;
    }

    .idLiketoSearchBTN {
        font-size: 0.7rem;
    }
}

@media only screen and (max-width:630px) {
    .quickLinks {
        display: none;
    }
}

@media only screen and (max-width:600px) {
    .mainContent img {
        float: none;
        display: block;
        margin: 1rem;
    }
    .adContainer img {
        width: 100%;
        margin: 0;
    }

    .btnPollQuestionVote {
        font-size: 0.9rem;
    }

    .popupAlert a,
    .popupAlert a:link {
        font-size: 0.8rem;
    }

    main.formPage i {
        font-size: 2.5rem;
    }
    main.formPage .textSuccess {
        font-size: 1.1rem;
    }

    .btnSearchPage span {
        display: none;
    }
    .btnSearchPage i {
        font-size: 1.1rem;
        display: block;
        margin-right: 0;
    }
    .searchPage input[type="text"] {
        padding-right: 5rem;
    }
}

@media only screen and (max-width:580px) {
    .menuIcon > span {
        display: none;
    }
    .menuIcon {
        right: 0;
        color: rgb(255,255,255);
        background: rgb(38,50,56);
    }
    .headerBottom {
        min-height: 2.2rem;
    }
    .menuIcon {
        font-size: 1rem;
    }

    .menuIcon:after {
        margin-left: 0;
    }

    h1.siteLogo,
    h1.siteLogoFR {
        width: 160px;
        height: 75px;
    }

    .headerTop a.langTranslateBTN, 
    .headerTop a.langTranslateBTN:link {
        font-size: 0.75rem;
        margin-top: 0.3rem;
    }
    .headerTop a, .headerTop a:link {
        font-size: 0.8rem;
        margin-right: 0.8rem;
    }
    .headerTop .socialMedia a, .headerTop .socialMedia a:link {
        font-size: 0.85rem;
    }
}

@media only screen and (max-width:575px) {
    .searchColPages.col-sm {
        padding-right: 0;
    }
    .searchColDocuments.col-sm {
        padding-left: 0;
        padding-top: 2.5rem;
    }
}

@media only screen and (max-width:530px) {
    .popupAlert > .container {
        padding-left: 1rem;
    }

    .popupAlert > .container:before {
        content: none;
        position: static;
        display: block;
        margin-right: 0;
        margin-bottom: 0.8rem;
        margin-top: 0.8rem;
        text-align: center;
    }
}

@media only screen and (max-width:500px) {
    nav {
        width: 300px;
    }

    .moreOptionMainMenu {
        padding-bottom: 0.8rem;
        padding-top: 0.8rem;
    }
    .moreOptionSubMainMenu {
        padding-bottom: 0.8rem;
        padding-top: 0.8rem;
    }
    /*@-moz-document url-prefix() {
        .moreOptionMainMenu {
            padding-bottom: 0.7rem;
            padding-top: 0.7rem;
        }
        .moreOptionSubMainMenu {
            padding-bottom: 0.65rem;
            padding-top: 0.65rem;
        }
    }*/

    ul.mainMenu a,
    ul.mainMenu a:link,
    ul.subMainMenu a,
    ul.subMainMenu a:link,
    ul.subSubMainMenu a, 
    ul.subSubMainMenu a:link {
        font-size: 0.9rem!important;
    }
}

@media only screen and (max-width:480px) {
    h2.categoryTitle {        
        font-size: 1.3rem;
    }
    h2.categoryTitle .subCatTitle {
        font-size: 1.1rem;
    }

    .frmSearch {
        top: 10rem;
    }
    .activePopupAlert .frmSearch {
        top: 12rem;
    }
    .frmSearch input[type="search"] {
        font-size: 0.7rem;
    }
    .frmSearch button[type="submit"] {
        right: 0;
    }


    .innerPageRBCont {
        padding: 0.5rem 1rem;
    }
    .roadBanStatus {
        font-size: 0.85rem;
    }
    .footerBottom > .container {        
        background-size: contain;
    }
}

@media only screen and (max-width:470px) {
    .footerMiddle > .container {
        padding-bottom: 16rem;
        -webkit-background-size: 350px 223px;
        -moz-background-size: 350px 223px;
        background-size: 350px 223px;
    }
}
@media only screen and (max-width:450px){
    .footerTop .eNews p, .footerTop .poll p {
        font-size: 0.85rem;
    }
}
@media only screen and (max-width:400px) {
    h1.siteLogo,
    h1.siteLogoFR {
        width: 150px;
        height: 70px;
    }
    .headerTop {
        padding: 0.5rem;
    }

    .btnPollQuestionVote {
        width: 100%;
        max-width: 100%;
        font-size: 0.8rem;
    }


    .footerMiddle > .container {
        padding-bottom: 14rem;
        -webkit-background-size: 300px 191px;
        -moz-background-size: 300px 191px;
        background-size: 300px 191px;
    }


    .headerTop a, 
    .headerTop a:link {
        margin-right: 0.5rem;
    }
    .headerTop .socialMedia a, .headerTop .socialMedia a:link {
        margin: 0 0.4rem;
    }

    #weather h2 {
        font-size: 0.8rem;
    }
    #weather i {
        font-size: 1.6rem;
    }


    .frmSearch {
        top: 9rem;
    }
    .activePopupAlert .frmSearch {
        top: 11rem;
    }
   
}
@media only screen and (max-width:350px){
    h1.siteLogo, h1.siteLogoFR {
        width: 120px;
        height: 60px;
    }
}