/******************************************************************
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;
    width: 73%;
    }

    #header-right,
    #header-left {
    text-align: center;
    }

    #header-left .header-logo {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -5px;
    width: 106px;
    padding-right: 0;
    }

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

    #sidenav-col,
    #side-buttons {width: 27%;}

    .details_right{
    float: right;
    width: 48%;
    }

    .details_box {
    padding-top: 0;
    }

    #homepage-wrapper {
    min-height: 960px;
    }

    #newsWrapper,
    #calWrapper,
    #careersWrapper,
    #meetingsWrapper,
    #calWrapper,
    #careersWrapper,
    #meetingsWrapper {
    height: 422px !important;
    bottom: 463px !important;
    }

    .weather {
    width: 20%;
    }



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

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

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

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

    #big-bg-image {
    display: block;
    /*height: 100%;*/
    left: 0;
    overflow: hidden;
    position: fixed;
    width: 100%;
    top: 0px;
    }

    #big-bg-image .overlay{
    position: absolute;
    height: 100%;
    width: 100%;
    display: inline-block;
    background: rgba(59,59,59,0.3);
    z-index: 1;  
    pointer-events: none;
    }

    

    #dynamic-bg {
    display: block;
    height: auto !important;
    min-height: 100%;
    position: absolute;
    width: 100%;
    }

    #dynamic-bg .picture {
    background-position: center top;
    background-repeat: no-repeat;
    background-size:cover;
    display: block;
    height: auto !important;
    left: 0;
    min-height: 100%;
    position: fixed;
    width: 100%;
    }

    #color-bars {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    text-align: center;
    position: relative;
    background: transparent;
    z-index: 99;
    }
    
    #color-bars .color-bar {
    display:inline-block;
    vertical-align: top;
    margin-left: -2px;
    width: 24%;
    position: relative;
    padding: 10px 0;
    font-family: 'Oswald', sans-serif;
    font-weight: normal;
    text-align: left;
    font-size: 1.8em;
    cursor: pointer;
    text-transform: uppercase;

    background: rgba(2,16,30,1);
    background: -moz-linear-gradient(top, rgba(2,16,30,1) 0%, rgba(9,41,79,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(2,16,30,1)), color-stop(100%, rgba(9,41,79,1)));
    background: -webkit-linear-gradient(top, rgba(2,16,30,1) 0%, rgba(9,41,79,1) 100%);
    background: -o-linear-gradient(top, rgba(2,16,30,1) 0%, rgba(9,41,79,1) 100%);
    background: -ms-linear-gradient(top, rgba(2,16,30,1) 0%, rgba(9,41,79,1) 100%);
    background: linear-gradient(to bottom, rgba(2,16,30,1) 0%, rgba(9,41,79,1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02101e', endColorstr='#09294f', GradientType=0 );
    transition: background .3s ease-in-out;
    -o-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
    }

    #color-bars .color-bar a {
    font-size: inherit;
    color: white;
    font-weight: normal;
    padding: 0 0 0 10px;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    }

  

    #color-bars .color-bar a:before {
    font-family: FontAwesome;
    content: "\f0d8 ";
    color: #76818d;
    display: inline-block;
    padding-right: 3px;
    position: absolute;
    right: 8px;
    vertical-align: middle;
    }

    #newsWrapper,
    #calWrapper,
    #careersWrapper,
    #meetingsWrapper  {
    position: absolute;
    display: none;
    }

    p.closer {
    text-align: center;
    background: #000;
    color: #fff;
    cursor: pointer;
    width: 5%;
    position: absolute;
    top: 13px;
    right: 0;
    margin: 0;
    padding: 0;
    display: inline-block;
    }

    #newsIcon, #calIcon,#CareerIcon, #meetingIcon {
    border-right: 1px solid #C7C7C7;
    position: absolute;
    display: table;
    height: 340px;
    max-height: 340px;
    }

    #newsData,
    #calData,
    #careerData,
    #meetingData{ 
    background: transparent; 
    overflow-y: scroll; 
    overflow-x:hidden; 
    padding: 15px 15px 10px 20px; 
    margin-bottom: 0px; 
    height: 100% !important;
    max-height: 340px;
    }

    #newsLink, #calLink {display: inline-block;font-size: 1.25em;padding: 8px 0 0 0;} 

    li.searchlist {
    width: 30%;
    }

    /*------------------------------------------------------------------
    --> Icon Tray For Widgets
    ------------------------------------------------------------------*/

    #icons-wrap .owl-buttons {display: block;}

    #icons-wrap .owl-buttons div {
    color: #fff;
    background: transparent;
    filter: Alpha(Opacity=100);
    opacity:1;
    font-weight: normal;
    position: absolute;
    }

    #icons-wrap .owl-buttons .owl-next {
    right: -65px;
    top: 35px;
    }

    #icons-wrap .owl-buttons .owl-prev {
    left: -65px;
    top: 35px;
    }

    #icons-wrap .fa {
    font-size: 6em;
    font-weight: normal;
    }

    #icons-wrap p.mobile-help {display: none; }

    #icons-wrap {
    overflow: hidden;
    padding: 0 9%;
    } 

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

    /* hide "main navigation home in mega menu" */
    h4.nav-item.nav-item-1.section-heading { display: none; }

    /* --> 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%;
    background: transparent;
    }

    nav.main-nav, nav.main-nav.expanded {
    margin: 0;
    }


    /* --> Main Navigation Item --------------------------------------*/
    /* --> Main Navigation Item li below should add up to 100% ------------------------*/

    nav.main-nav ul.nav-list > li.nav-item-1,
    nav.main-nav ul.nav-list > li.nav-item-3,
    nav.main-nav ul.nav-list > li.nav-item-4 {width: 10%;}

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

    nav.main-nav ul.nav-list > li.nav-item-5,
    nav.main-nav ul.nav-list > li.nav-item-6 {width: 22%;}

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


    nav.main-nav ul.nav-list > li.nav-item {
    float: none;
    vertical-align: top;
    display: inline-block;
    }

    nav.main-nav ul.nav-list > li.nav-item > a {
    padding-left: 0;
    text-align: center;
    padding: 0 5px !important;
    }

    nav.main-nav ul.nav-list > li.nav-item:hover > a { background: #116fb8; color: #fff; }


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

    nav.main-nav ul li.nav-item > a {
    background: transparent;
    }

    /* 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;
    }

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

    nav.main-nav .dropdown {
    width: 200px;
    text-align: left;
    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;
    }
 .top-bar-section li.flyout-left.has-dropdown ul.dropdown {
    left: -80px;
 }


    /* Flyout to Left Link */
    .top-bar li.flyout-left .dropdown li.has-dropdown > a {
    padding-left: 15px;
    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: #116fb8;
    border-width: 5px;
    margin-top: -5px;
    display: block;
    }

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

    /* Side Buttons */

    #dynamic-side-btns .mm-button-wrap{ max-width: 100%; }


    nav#side-nav .sf-menu ul {
    position: absolute;
    background: white;
    border-top: 0;
    border-bottom: 0;
    width: 200px;
    right: 0;
    left: 100%;
    padding: 0;
    }

    nav#side-nav .sf-menu ul li a {
    color: #292929;
    }

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

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

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

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


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

    /* Breadcrumb List */
    ul.bcrumb-list {
    margin: 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: 3px;
    padding: 0;
    }

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

    /* System Button Link Text */
    ul.system-btns-list > li a.button {
    font-size: 0;
    padding: 20px 15px !important;
    }

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

    /* Email */
    #btn-email, #btn-edit, #btn-print { background-position: center center; }



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

/* --> Home Buttons ----------------------------------------------*/

    /* Hide separator that appeared below the buttons on the homepage */
    #dynamic-home-btns hr.home-btn-sep { display: none; }


/* --> 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#page-footer {
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 0;
    margin-bottom: 0px;
    position: absolute;
    }

    .footer-address{
    width: 47%;
    text-align: left;
    }

    .footer-steal {
    width: 117px;
    text-align: left;
    }

/* --> 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;
    }

    #footer-top {
    text-align: left;
    }

    #footer-bottom {
    text-align: left;
    }

    .footer-bottom-nav {width: 29%;}

    #dynamic-quote span {
    width: 66%;
    }

    .footer-social {width: 21%;}

    #dynamic-quote {margin-bottom: 3em;}

    /* Navigation list */
    .footer-ult ul.foot-nav-list {
    width: 50%;
    text-align: left;
    }

    /* Navigation list item */
    .footer-ult ul li { 
    width: auto;
    }

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

    a#footer-civica {
    text-align: right;
    }

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

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

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

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

}