﻿ 
/*-------------------------------- Media Query --------------------------------------*/
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 370px) {
    .container {
        max-width: 1690px;
        padding: 0 1.15rem;
    }

    .headerBottom .siteLogo {
        height: 122px;
        width: 120px;
    }

    .headerBottom .hIcon, .headerBottom .weatherBlock {
        margin-top: 0.6rem;
    }

    .quickLinks .btnsearch {
        font-size: 1rem;
    }

        .quickLinks .btnsearch i {
            font-size: 1.3rem;
            padding: 11px 11px 11px 11px;
        }

}
 @media (min-width: 576px) {
     .container {
         max-width: 628px;
         padding-left: 15px;
         padding-right: 15px;
    }

     .headerInside, .headerBottom {
         height: 125px;
    }
     .headerBottom .siteLogo{
         height: 145px;
         width: 147px;
    }
     #upcomingEventsCont h4.eventTitle, #recentNewsCont h4.card-text {
         font-size: 1rem;
         font-weight: 600;
    }
     .noticeBottomLinks a, .eventBottomLinks a {
         font-size: 0.9rem;
    }
          #innerQuicklink .navbar-toggler i 
     {
           font-size: 1.5rem;
     }
               #quickLinks {
    top: -49px;
}
     #innerQuicklink .navbar-toggler {
    font-size: 1.3rem;
}
      .footerHighLights .jcarouselHighlight li h4 {
    max-width: 80%;
}
       .footerHighLights .top-indicator {
     display:block;
}
       .bottom-indicator
       {
           display:none;
       }
.jcarouselHighlight img {
    max-width: 95%;
}


     .footerBottom .fTitle:after {
         width: 9.5%;
         margin-left:0;
         margin-right:0;
    }
     .footerBottom .facebookIcon {
         padding-bottom: 1rem;
    }
     .footerBottom .facebookIcon a {
         top: 0;
         left: 3rem;
    }
     .footerBottom cite a.companyIcon:before {
         background-position-x: right;
    }
}
/*Medium devices (tablets, 768px and up)*/
 @media (min-width: 768px) {
                  .headerInside
     {
         right:3%;
     }
                   .btnHeaderYahooWeather {
                       font-size: 1.2rem;
    right: 0;
        bottom: 3px;
}
     .container {
         max-width: 826px;
    }
     .noticeDesktop {
         display: flex;
    }
     .noticeMobile {
         display: none;
    }
            .footerHighLights .carousel-item .card {
    width:33.33%
}
            .footerHighLights .carousel-item .card h4
            {
                width:75%;
            }
}
/*Large devices (desktops, 992px and up)*/
 @media (min-width: 992px) {
     .container {
         max-width: 1070px;
    }
                        .btnHeaderYahooWeather {
font-size:1.4rem;
}
     .weatherBlock
     {
      margin-left: 19px;
    margin-right: 28px;
     }
     .headerInside
     {
         right:1.8%;
     }
.btnHeaderYahooWeather {
    right: 7px;
}
     .weatherBlock
     {
      margin-left: 19px;
    margin-right: 28px;
     }
     .headerBottom .hIcon .fa-circle {
         font-size: 2.7rem;
    }
     .headerBottom span.hIcon {
         width: 4em;
    }
     .headerBottom .hIcon .fa-map-marker-alt, .headerBottom .hIcon .fa-phone-alt, .headerBottom .hIcon .fa-clock {
         font-size: 1.4rem;
    }
     .headerBottom span.hIcon {
         display: inline-block;
         height: 2.4em;
         line-height: 2.6em;
         position: relative;
         vertical-align: middle;
         width: 6em;
    }
     .headerBottom .menuIcon {
    padding: 1rem 2rem 1rem 2rem;
    font-size: 1.2rem;
}
     #upcomingEventsCont h4.eventTitle, #recentNewsCont h4.card-text {
         font-size: 0.9rem;
    }
     #upcomingEventsCont small, #recentNewsCont small {
         font-size: 0.8rem;
    }
     #upcomingEventsCont ul li {
         padding-top: 1rem;
         padding-bottom: 1rem;
    }
     .noticeBottomLinks {
         margin-top: 4.5rem;
    }

    #quickLinks .navbar-expand-lg .navbar-toggler {
    display: none!important;
}
    #quickLinks .navbar-nav .nav-link
{
    line-height:18px;
}
       #innerQuicklink .navbar-nav li a
   {
       height: 98px;
   }
           #innerQuicklink .navbar-nav li a
 {
font-size: 0.9rem;
    padding-left: 8px;
 }
           
 #innerQuicklink .navbar-nav li
 {
 font-weight:700;
 }
   #innerQuicklink .navbar-nav li i
   {
        padding-right: 8px;
       font-size:1.3rem;
   }
    #quickLinks .navbar-nav
 {
     width:100%;

 }
   #innerQuicklink .navbar-nav li:first-child {
       border-top-left-radius: 0;
    border-top-right-radius:  0;
}
  #innerQuicklink .navbar-nav li:last-child
 {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
 }
    #innerQuicklink .navbar-nav li
 {
     border-left:1px solid rgb(215,216,217);
 }
         #quickLinks .navbar-nav:before {
         content:none;
    }


     .footerBottom .facebookIcon {
         padding-bottom: 2.8rem;
    }
}
@media (min-width: 1100px) {
         .headerInside
     {
         right:6%;
     }
              #upcomingEventsCont ul li {
         padding-top: 1.5rem;
         padding-bottom: 1.5rem;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/
 @media (min-width: 1200px) {
     .container {
         max-width: 1620px;
    }
     .TopBanner .carousel-inner{
    border-bottom-left-radius: 78px;
    border-bottom-right-radius: 78px;
}
      h2.categoryTitle {
     border-bottom-left-radius:70px;
     border-bottom-right-radius:70px;
}
 h2.categoryTitle:before {

     border-bottom-left-radius:70px;
     border-bottom-right-radius:70px;
}
    /*---------------------------- header top -------------------------------------*/
     .headerInside {
         position: inherit;
         justify-content: space-between!important;
    }
     .headerBottom .menuIcon {
         padding: 1rem 1rem 1rem 1rem;
         font-size: 1.1rem;
    }
     .headerBottom .headerInside {
         margin-left: 15%;
    }
     .headerBottom .hInfo {
         font-size: 0.9rem;
    }
     .headerBottom span.hIcon {
         width: 4em;
    }
    /*------------------------------- END -------------------------------------*/
    #recentNewsCont img {
         height: 168px;
    }
    #recentNewsCont .card-body {
    height: 163px;
}
     #upcomingEventsCont h4.eventTitle, #recentNewsCont h4.card-text {
         font-size: 1rem;
    }
     #upcomingEventsCont small, #recentNewsCont small {
         font-size: 0.8rem;
    }
     .noticeBottomLinks a, .eventBottomLinks a {
         font-size: 1.02rem;
    }

           #innerQuicklink .navbar-nav li a
 {
    font-size:1rem;
    padding-left: 12px;
 }
   #innerQuicklink .navbar-nav li i
   {
        padding-right: 13px;
       font-size:2.3rem;
   }

   .footerHighLights .carousel-item .card {
    width:20%
}
     .footerHighLights h3, #recentNewsCont h3, #upcomingEventsCont h3 {
         font-size: 1.5rem;
    }
}
 @media (min-width: 1400px) {
    /*---------------------------- header top -------------------------------------*/
     .headerBottom .siteLogo {
         height: 152px;
         width: 180px;
    }
     .headerBottom .menuIcon {
         padding: 1rem 2.2rem 1rem 2.2rem;
         font-size: 1.3rem;
    }
     .headerBottom .hInfo {
         font-size: 1rem;
    }
     .headerBottom span.hIcon {
         width: 6em;
    }
     .footerHighLights h3, #recentNewsCont h3, #upcomingEventsCont h3 {
         font-size: 1.7rem;
    }
     #upcomingEventsCont h4.eventTitle, #recentNewsCont h4.card-text {
         font-size: 1rem;
    }
     #upcomingEventsCont small, #recentNewsCont small {
         font-size: 0.9rem;
    }
     .noticeBottomLinks a, .eventBottomLinks a {
         font-size: 1.03rem;
    }

      #innerQuicklink .navbar-nav li a
 {
    font-size:0.98rem;
    padding-left: 33px;
    padding-right: 33px;
 }
   #innerQuicklink .navbar-nav li i
   {
        padding-right: 20px;
       font-size:2.3rem;
   }


     .footerHighLights .carousel-item .card h4 {
         font-size:1.1rem;
    }
    /*------------------------------- END -------------------------------------*/
}





/*--------------------------------------------------------------------------------*/
@media only screen and (max-width:1700px) {
        h2.categoryTitle {
        font-size: 3.5rem;
		min-height: 420px;
    }
    h2.categoryTitle .subCatTitle {
        font-size: 1.8rem;
    }
}
@media only screen and (max-width:1330px) {
        h2.categoryTitle {
        min-height: 350px;
        font-size: 3rem;
    }
    h2.categoryTitle .subCatTitle {
        font-size: 1.6rem;
    }
}
 @media only screen and (max-width:1190px) {
     .desktopNav, ul.subMainMenu, ul.subSubMainMenu {
         display: none;
    }
     .mobileNav, .menuIcon, .closeNav {
         display: inherit;
    }
     .menuIcon {
         top: auto;
         margin-top: 1rem;
         left:0.5rem;
    }
     h1.siteLogo, h1.siteLogoFR {
         width: 235px;
         height: 68px;
        /*top:4rem;
        */
         margin-top: 1.65rem;
    }
     .headerTop {
         padding: 1.5rem 1rem 1.5rem 12rem;
         float: right;
    }
     .headerTop a, .headerTop a:link {
         margin-right:2rem;
         margin-left:0;
         font-size:0.85rem;
    }
     .headerTop a::before {
         color: #e4a834 !important;
         -webkit-transition: color 300ms ease 0s;
         -moz-transition: color 300ms ease 0s;
         -o-transition: color 300ms ease 0s;
         transition: color 300ms ease 0s;
    }
     .headerTop a:hover::before {
         color: #701226 !important;
    }
     .headerTop .contright a:last-child{
         margin-right:0;
    }
     .headerTop a span{
         display:none;
    }
     .headerTop .contleft, .headerTop .contright{
         float:none;
         display: inline-block;
    }
     .moreOptionMainMenu, .moreOptionSubMainMenu {
         position: absolute;
         top: 0;
         right: 0;
         font-size: 1.1rem;
         color: #fff;
         font-weight:bold;
         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;
         background: none;
         z-index: 5;
    }
     .moreOptionSubMainMenu {
         padding: 0.9rem 1.1rem;
         color: rgb(51,50,51);
    }
     .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: #fff;
         padding: 0.5em;
         margin: 0.5rem 0.5rem 0.5rem 0;
         border: none;
         cursor: pointer;
         background: none;
         left:auto;
    }
     nav {
         position: fixed;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         text-align: right;
         -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);
         -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;
         width:100%;
    }
     .mobileNav {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         width: 339px;
         min-width: 300px;
         -webkit-transition: transform 500ms ease 0s;
         -moz-transition: transform 500ms ease 0s;
         -o-transition: transform 500ms ease 0s;
         transition: transform 500ms ease 200ms;
         -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);
         background:rgb(32,153,195);
    }
     .mobileNav ul.mainMenu {
         background: rgb(32,153,195) url(../images/nav-vector.png) right bottom no-repeat;
         background-size:17rem;
    }
     ul.mainMenu {
         margin-top: 4rem;
    }
     ul.mainMenu i {
         margin-right: 0.5rem;
         display: inline-block;
        /*display: none;
        */
    }
     ul.mainMenu a, ul.mainMenu a:link {
         font-family: 'Open Sans', sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 1.15rem;
         position: static;
         text-align: left;
         border-left: none;
         display: block;
         padding: 1rem;
         color: #fff;
         background: rgb(32,153,195);
         -webkit-transition: all 300ms ease 0s;
         -moz-transition: all 300ms ease 0s;
         -o-transition: all 300ms ease 0s;
         transition: all 300ms ease 0s;
         letter-spacing:0;
        /*border-bottom: 1px solid rgb(230,233,232);
        */
    }
     ul.mainMenu a:visited {
         color:#fff;
    }
     ul.mainMenu a:hover {
         background:#a38757;
    }
     ul.mainMenu a:active {
         background:#a38757;
    }
     ul.mainMenu a:focus {
         color:#fff;
    }
     ul.mainMenu > li {
         position: relative;
    }
     ul.mainMenu > li.hasChild > a {
         padding-right: 2.5em;
    }
     ul.mainMenu > li.selected > a {
         color: rgb(255,255,255);
         border-bottom-color: rgb(247,185,12);
         background: rgb(247,185,12);
    }
     ul.mainMenu > li.selected .moreOptionMainMenu {
         color: rgb(255,255,255);
    }
     ul.mainMenu > li:hover > a {
         color: rgb(255,255,255);
         border-bottom-color:rgb(247,185,12);
         background: rgb(247,185,12);
    }
     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(51,50,51);
         text-transform: none !important;
         padding-left: 1.5rem !important;
         border-bottom: none !important;
         background: #fff !important;
         -webkit-transition: all 300ms ease 0s;
         -moz-transition: all 300ms ease 0s;
         -o-transition: all 300ms ease 0s;
         transition: all 300ms ease 0s;
    }
     ul.subMainMenu a:visited {
         color:rgb(51,50,51);
    }
     ul.subMainMenu a:hover {
         color: rgb(255,255,255);
         background: #01405f!important;
    }
     ul.subMainMenu a:active {
         color: rgb(255,255,255);
         background: #01405f!important;
    }
     ul.subMainMenu a:hover {
         color: rgb(255,255,255);
         background: #01405f!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: #01405f!important;
    }
     ul.subMainMenu > li.selected .moreOptionSubMainMenu {
         color: rgb(255,255,255);
    }
     ul.subMainMenu > li:hover > a {
         color: rgb(255,255,255);
         border-bottom-color: rgb(32,153,195);
         background: rgb(32,153,195)!important;
    }
     ul.subMainMenu > li.hasChild:hover .moreOptionSubMainMenu {
         color: rgb(255,255,255);
    }
     ul.subSubMainMenu a, ul.subSubMainMenu a:link {
         font-style: normal;
         color: #20161f !important;
         background: #74aad0 !important;
         border-bottom: none !important;
         padding-left: 2rem !important;
    }
     ul.subSubMainMenu a:visited {
         color: #20161f !important;
    }
     ul.subSubMainMenu > li a:hover {
         color: rgb(255,255,255) !important;
         background: #0a5fa0 !important;
    }
     ul.subSubMainMenu > li.selected > a {
         color: rgb(255,255,255) !important;
         background: #0a5fa0 !important;
    }
}
@media only screen and (max-width:1023px) {
      .mainContainer aside.col-sm
  {
    margin-top: 0;
  }
        .mobileBreadcrumb
    {
       display:block;
       padding-top: 1rem;
    }
    .desktopBreadcrumb
    {
      display:none;
    }
        ul.sideMenu {
        display: none;
    }
        .adContainer.desk{
		display:none;
	}
	.adContainer.mob{
		display:block;
	}
	.headerTop a, .headerTop a:link,
	.headerTop p{
		font-size: .6rem;
	}

    .mainContainer aside.col-sm,
    .mainContainer main.col-sm {
        flex-basis: auto;
    }
    .mainContainer main.col-sm {
        padding: 1.5rem 1rem;
    }
    .mainContainer main.col-sm {
    margin-top: 1rem;
}

	ol.breadCrumb {
		display:none;
	}
    	#folder-view ol.breadCrumb{
		display:block;
	}
	.toolBox{
		float:left;
	}

     .sideMenuNav {
        display: inherit;
        width: 100%;
        font: normal 700 1rem 'Open Sans', Arial, sans-serif;
        color: rgb(255,255,255);
        cursor: pointer;
        text-align: left;
        text-transform: uppercase;
        border: none;
        padding: 0.7rem 1rem;
        margin: 0;
        background:rgb(0,104,133);
    }
     ul.sideMenu li:first-child a {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
          ul.sideMenu li:last-child a {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
    .sideMenuNav:before {
        content: normal;
        margin-left: 0;
    }
    .sideMenuNav:after {
        content: "\f067";
        color: #fff;
        margin-left: 1rem;
		float: right;
    }
    .sideMenuNav.openSideMenuIcon:after {
        content: "\f068";
    }


    .articlePost {
        border-top: none;
        padding-top: 0;
    }
        h2.categoryTitle {
        min-height: 320px;
        font-size: 2.5rem;
    }
    h2.categoryTitle .subCatTitle {
        font-size: 1.3rem;
    }
	.mainContainer .container{
		padding:0 !important;
	}	
    .frmSearch input[type="search"] {
        font-size: 0.8rem;
    }
    .frmSearch button[type="submit"] {
        padding: .96rem 1.55rem;
		font-size: 1.15rem;
    }


    h3.pageTitle {
        font-size: 1.2rem;
    }
}
@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;
    }
}
@media only screen and (max-width:767px) {
    h2.categoryTitle .catTitleCont{
	top:7rem;
}
h2.categoryTitle {
    min-height: 278px;
   
}
}
 @media only screen and (max-width: 500px) {
     .mobileNav {
         width: 300px;
         background-size: 13rem;
    }
}
@media only screen and (max-width:480px) {
        h2.categoryTitle {
        min-height: 280px;
        font-size: 1.85rem;
    }
    h2.categoryTitle .subCatTitle {
        font-size: 1.1rem;
    }
	h2.categoryTitle .catTitleCont{
		bottom:6rem;
	}
	h2.categoryTitle::before{
		bottom: 0;
		height: 40%;
	}
}
@media only screen and (max-width:400px) {
    	.frmSearch{
		min-width: 280px;
	}
	.frmSearch button[type="submit"] {
    padding: .96rem 1.35rem;
}

    .btnPollQuestionVote {
       /* width: 100%;*/
        max-width: 100%;
        font-size: 0.8rem;
    }

    .headerTop a, 
    .headerTop a:link,.headerTop p
	{
        margin-right: 0.5rem;
    }


}
 