/******************************************************************
768up.css
-------------------------------------------------------------------
Stylesheet: Tablet & Small Desktop
-------------------------------------------------------------------

Here's where you can start getting into the good stuff.
This size will work on iPads, other tablets, and desktops.
So you can start working with more styles, background images,
and other resources. You'll also notice the grid starts to
come into play. Have fun!

******************************************************************/


/* These styles are applied for viewports 768px and higher */
@media only screen and (min-width: 768px) {


    /* 2 column layouts - Moves buttons to opposite side for desktop views */
    #col2Content{
        float: right;
    }

    .code_snippet_box{
    margin-bottom: 1.25em;
    width: 49%;
    margin-right: 1.25em;
    }
 
    .details_right{
    float: right;
    width: 48%;
    }

    .details_box {
    padding-top: 0;
    }
    
    div#newsContent{ height: 258px; overflow: hidden; }

    div#newsButton {
    display: inline-block;
    margin: 12px 0;
    text-align: right;
    padding: 30px;
    }

    div#newsFeed {
    height: 543px;
    overflow: hidden;
    }

    div#newsFeed .news-summary{ margin:0; }

    a.nhNewsImg {
    display: inline-block;
    border: 1px solid red;
    width: 33%;
    float: left;
}


    #newsFeed a.news-img-link { margin: 0 0 0 0; }

/*------------------------------------------------------------------
--> Header 
------------------------------------------------------------------*/
    #header-right {
    margin: 40px 0 0 0;
    }

    ul.head-links li {
    float: left;
    width: auto;
    }

    a.head-link {    
    margin-right: 20px;
    }    

    #utilLinks ul.foot-nav-list { float: right; }
    #utilLinks ul.foot-nav-list li { padding: 6px 9px 0 9px;}
    #utilLinks ul.foot-nav-list li:nth-child(2) a{  border-left:1px solid #fff; border-right: 1px solid #fff; color: #fcb804; padding: 0 10px; }

    #utilLinks ul.foot-nav-list li a { padding: 0; }

/*------------------------------------------------------------------
--> Homepage
------------------------------------------------------------------*/

    div#NH-idliketo a.mm-button-link { margin: 0 0 20px 0;}

    /* --> 9 squares----------------------------------------------*/

    #NH-dynamic-buttons .mm-button-wrap {
    width: 26.666%;
    }
    
    #NH-dynamic-buttons .mm-button-wrap a { padding: 25% 0 0 0; }

    /* News Wrapper */
    div#newsWrap, div#mayorWrap { height: 639px;}

    /* --> Mayors Message ----------------------------------------------*/
    div#mayorImage a.mm-button-link {    margin-left: 0%; }
    
    div#mayorImage .mm-button-txt-wrap {
    color: #000;
    float: left;
    }
    
    div#mayorImage img.mm-button-img {
    float: left;
    }

    div#newsContent {width: 100%;}

    div#newsContent article.news-article a.read-more { padding: 0 10px 0 0; }

    div#newsFeed article.news-article a.read-more { 
    width: 66.66%;
    padding: 0 10px 0 0; 
    float: right;
    }

    /* --> Lighthouse BG image ----------------------------------------------*/
    div#eventsWrap {
    display: block;
    }

    div#nhCalWrap {
    padding: 80px 0 0 0;
    }

    section#hp-events-wrapper { box-shadow: 3px 3px 10px #888; }

    /* --> Culture Buttons ----------------------------------------------*/
    div#cultureBtns a {
    width: 48%;
    }

    div#cultureWrap {
    width: 100%;
    }

/*------------------------------------------------------------------
--> Homepage Calendar
------------------------------------------------------------------*/
/* --> Calendar Wrapper -----------------------------------------------*/
    section#hp-events-wrapper { 
        width: 100%;
    margin: 0 0 30px 0;

    background: rgba(255,255,255,.8);
}



/* --> Calendar Wrapper -----------------------------------------------*/

    #aj-calwrapper {
    width: 100%;
    padding: 0 15px 15px 5px;
    }

/* --> Events List Homepage -----------------------------------------------*/

    #cal-list-wrapper{
    width: 100%;
    padding: 0 0 0 15px;

    }

/* --> Events List -----------------------------------------------*/

    /* Description for event */
    p.events-description {
    font-size: 1.3em;
    }





    /* --> Homepage News Alert ---------------------------------*/

    #alert_overlay {
    right: 68px;
    width: 62%;
    }

    #alert-overlay-inner h3{
    font-size: 1.8em;
    }

    .civica-top {
    right: 20px;
    bottom: 20px;
    }

    
/*------------------------------------------------------------------
--> Main Navigation
------------------------------------------------------------------*/
@keyframes NHidliketo {
     0%   {background-color: #004173; }
    25%  {background-color: #00a14b; }
    50%  {background-color: #00a14b; }
    100% {background-color: #004173; }
}

nav.main-nav ul.nav-list > li.nav-item.nav-item-1 > a {
    text-align: center;

   background-color: #004173;
   /* animation-name: NHidliketo;*/
    animation-duration: 3s;
    animation-delay: 1.5s;
  

}

/* --> Main Navigation Container ---------------------------------*/

    section#top-nav .nav-row .columns {
    padding: 0 8px;
    }


/* --> Main Navigation Title -------------------------------------*/

    nav.main-nav .name {
    display: none;
    }

    nav.main-nav ul {
    width: 100%;
    text-align: center;
    background: none;
    }

    .top-bar-section ul li {
    display: inline-block;
    float: none;
    }

/* --> Main Navigation Item --------------------------------------*/

    nav.main-nav ul.nav-list > li.nav-item {
    width: 16.4%;
    }

    nav.main-nav ul.nav-list > li.nav-item > a {
    text-align: center;
    }

    nav.main-nav ul.nav-list > li.nav-item > a:hover {
    background: #00a14b;
    }


/* --> Main Navigation Item Link ---------------------------------*/


    nav.main-nav ul li.nav-item > a {
    font-size: .72em;
    padding: 0 4px;
    font-weight: 900;
    }

    /* Dropdown Item Link */
    nav.main-nav .dropdown li.nav-item a {
    text-transform: none;
    font-size: 0.9em;
    line-height: 18px;
    background: #fff;
    padding: 10px 15px;
    text-align: left;
    border-bottom: 1px solid #ccc;
    color: #333;
    }

	nav.main-nav .dropdown li.nav-item a:hover{
    padding-left:15px;
	}
   

/* --> Main Navigation Dropdown Container ------------------------*/

    nav.main-nav .dropdown {
    width: 200px;
    text-align: left;
    border-top: 3px solid #00a14b;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    background: white;
    -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.4);
    }

    /* Has-Dropdown Arrow */
    nav.main-nav .has-dropdown > a:after {
    display: none;
    }

    /* Flyout to Left */
    .top-bar li.flyout-left .dropdown li .dropdown {
    left: -200px;
    width: 200px;
    }

    /* Flyout to Left Link */
    .top-bar li.flyout-left .dropdown li.has-dropdown > a {
    padding-left: 40px;
    padding-right: 15px !important;
    }

    .top-bar li.flyout-left .dropdown li.has-dropdown > a:hover {
    padding-left: 5px;
    }
/* 
    Flyout Link 
    .top-bar .has-dropdown .dropdown li.has-dropdown > a {
    background: #333;
    }*/

    /* Flyout Icon (text arrows) */
    .top-bar .has-dropdown .dropdown li.has-dropdown > a:after {
    left: 91%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-left-color: #00a14b;
    border-width: 5px;
    margin-top: -5px;
    display: block;
    }

    /* Hide navigation dividers */
    nav.main-nav .top-bar-section > ul > .divider {
    display: none;
    }


    /* Side Navigation */
    #side-nav.size1 .sf-menu a{ font-size: 1.4em; }

    /* Side Button Link Wrapper */
    #dynamic-side-btns a.mm-button-link {  margin: 0 5px 15px 0;
    }



/*------------------------------------------------------------------
--> Custom Hero image
------------------------------------------------------------------*/

    div#NHCustomHero {
        display: block;
        height: auto;
        position: relative;
    }

    div#NHCustomHero .mm-button-link {
    display: inline-block;
    /*background-size: 100% !important;*/
    background-position: center center !important;
    min-height: 180px;

    -webkit-transition: min-height .3s ease-in-out;
    -moz-transition: min-height .3s ease-in-out;
    -o-transition: min-height .3s ease-in-out;
    transition: min-height .3s ease-in-out;
    }

    div#NHCustomHero span.mm-button-txt {
    font-size: 3em;
    color: #fff;
    background: rgba(0, 105, 0, .8);
    padding: 20px 6%;
    position: absolute;
    bottom: 0;
    display: block;
    left: 0;
    }


/*------------------------------------------------------------------
--> BreadCrumbs / System Buttons
------------------------------------------------------------------*/

/* --> System Buttons ----------------------------------------------*/

    /* Column that contains the system buttons */
    .columns.system-btns-col { padding: 0 8px; }

    nav#side-nav .sf-menu ul {
    left: 100%;
    position: absolute;
    width: 200px;
    }


    /* Flyout Indicator (Arrow) */
    nav#side-nav .sf-sub-indicator {
    border: solid transparent;
    border-color: transparent;
    border-top-color: transparent;
    border-left-color: #00a14b;
    border-width: 5px;
    }

    
    nav.main-nav ul li.nav-item.youAreTopNav a {
    background: #000;
    display: block;
    width: 100%;
    height: 100%;
    }

/* --> Breadcrumbs ----------------------------------------------*/

    /* Breadcrumb List */
    ul.bcrumb-list {
    margin: 18px 0;
    }

/* --> System Buttons ----------------------------------------------*/

    /* Email, Edit, Print List Container */
    ul.system-btns-list {
    float: right;
    width: auto;
    }

    /* System Button Item */
    ul.system-btns-list > li {
    width: auto;
    margin-bottom: 0;
    margin-left: 15px;
    padding: 0;
    }

    /* System Button Dropdown Menu */
    ul.system-menu {
    width: 180px;
    }

    /* System Button Link Text */
    ul.system-btns-list > li a.button {
    font-size: 1.0em;
    }

    /* System Button Style */
    .button.system-button { width: auto; }

    /* Email */
    #btn-email { background-position: 5px 1px; }

    /* Edit */
    #btn-edit { background-position: 5px 2px; }

    /* Print */
    #btn-print { background-position: 5px 1px; }


/*------------------------------------------------------------------
--> Home Contents
------------------------------------------------------------------*/

    div#squaresWrap{
    width: 100%;
    background: url(/img/00/layout/NH-BG-rep.jpg) center center #eee;
    background-size: 200% !important;
    }

/* --> Home Slideshow ----------------------------------------------*/
    #home-slideshow-span {
    margin:0;
    }

    #dynamic-orbit h3{
    font-size: 3em;
    }

    #dynamic-orbit .orbit-container {
    max-height: 400px;
    }
    



    #dynamic-orbit .orbit-container .orbit-slides-container>*{
          height: 100%;
    overflow: hidden;
    }

    #dynamic-orbit .orbit-container .orbit-slides-container>* .orbit-caption{ 
    background-color: rgba(18,111,0,.85);
    width: 46.66%;
    padding-left: 4.666%; 
    }

    #dynamic-orbit .orbit-container .orbit-prev, .orbit-container .orbit-next {
    background-color: rgba(18,111,0,.85);
    position: absolute;
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
    }

     #dynamic-orbit .orbit-container .orbit-next {
     background: url(/img/00/layout/NHNext.png) no-repeat center center #196b00;   
     }
    
    #dynamic-orbit .orbit-container .orbit-prev {
    right: 52px;
    background: url(/img/00/layout/NHPrev.png) no-repeat center center #196b00;
    height: 60px;
    background-size: initial;
    width: 50px;
    }


/* --> Most Popular ----------------------------------------------*/

    /* Most Popular list */
    section#home-mostpop ul.az-list {
    width: 92%;
    padding-left: 8%;
    }

    /* Most Popular list item link */
    section#home-mostpop ul.az-list li a {
    font-size: 1.4em;
    }


/* --> Events List -----------------------------------------------*/

    /* Description for event */
    p.events-description {
    font-size: 1.3em;
    }


/*------------------------------------------------------------------
--> Page Footer
------------------------------------------------------------------*/
    /*footer logo*/
    div#PageContacts .Logo {
    float: left;
    max-width: 125px;
    display: inline-block;
    }


    div#PageContacts .Logo img {
    width: auto;
    }

    #page-footer h4.footerHeadings {
    width: 66%;
    text-align: left;
    }

    #page-footer p.NHaddress {   float: left;}
    
    p.NHphone {
    float: left;
    width: 66%;
    text-align: left;
    margin: 0;
    margin: 10px 0 0 0;
    }

    p.NHphone span{
        font-weight: bold;
    }


    #dynamic-social-btns .mm-buttongen-cont {
    width: 38.33%;
    float: right;
    position: absolute;
    right: 0;
    }

    #copyright-span { 
    padding: 30px 0;
    }


/* --> Footer Navigation -----------------------------------------*/

    /* Navigation list */
    nav.foot-nav ul.foot-nav-list {
    margin-left: 0;
    }

    /* Navigation list item link */
    nav.foot-nav ul.foot-nav-list li a {
    font-size: 1.3em;
    }


/* --> Google Translate ------------------------------------------*/

    #google_translate_element {
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: 300px; 
    }
    
    select.goog-te-combo { 
    background: #004173;
    }

/* Civica logo ------------------------------------------*/

    #civica-foot-logo { 
    float: right;
    width: 26.66667%;
    }

    #civica-foot-logo a{
    text-align: right;
    width: 100%;
    }

/* --> Copyright -------------------------------------------------*/

    #copyright-span p.copyright {
    text-align: left;
    }

/* --> Divider (Mobile only)--------------------------------------*/

    /* Hide the divider for desktop */
    hr.footer-divider { display: none; }

	div#newsContent {
    width: 100%;
}
	
	
}