/**
 * @file
 * Positioning for a responsive layout.
 *
 * Define CSS classes to create a fluid grid layout with optional sidebars
 * depending on whether blocks are placed in the left or right sidebars.
 *
 * This layout uses the Zen Grids plugin for Compass: http://zengrids.com
 */

/**
 * Center the page.
 *
 * For screen sizes larger than 1200px, prevent excessively long lines of text
 * by setting a max-width.
 */
#page,
.region-bottom {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  width:100%;
}

/* Apply the shared properties of grid items in a single, efficient ruleset. */
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
#footer {
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
  *behavior: url("/path/to/boxsizing.htc");
  _display: inline;
  _overflow: hidden;
  _overflow-y: visible;
}

/* Containers for grid items and flow items. */
#header,
#main,
#footer {
  *position: relative;
  *zoom: 1;
}
#header:before,
#header:after,
#navigation:before,
#navigation:after,
#main:before,
#main:after,
#footer:before,
#footer:after {
  content: "";
  display: table;
}
#header:after,
#main:after,
#footer:after {
  clear: both;
}
#header{
  height: 100%;
 width: 91.77%;
  margin-left: auto;
  margin-right: auto;
}

/* Navigation bar */
@media all and (min-width: 980px) {
  #main {
    /* Move all the children of #main down to make room. */
    /*padding-top: 3em;*/
    position: relative;
    width: 97%;
    margin-left: auto;
    margin-right: auto;
  }
  #navigation {
    /* Move the navbar up inside #main's padding. */
    position: absolute;
    /*top: 113px;
    top: 0px;*/
    height: 2.688em;
    width: 100%;
    background-color: #6c80a4;
    -moz-box-shadow:    inset 8px 6px 6px black;
   -webkit-box-shadow: inset 8px 6px 6px black;
   box-shadow:         inset 0px -3px 6px #596a87;
  }
  #navigation .onlymobile-1{display: none;}
  #navigation .no-caret .caret{display: none;}
  /* Menu over ride from TB Megamenu*/
  /*#navigation li + li::before{content:" | ";font-size: 18px;color: #55a4d0;padding: 0 11px 0 11px;}*/
  #navigation li a{font-family: lato;text-decoration: none;}
  /*Submenu color*/
  #navigation .tb-megamenu-column-inner li a{font-family: lato;color: #494949;text-decoration: none;}
  /*#navigation .tb-megamenu-column-inner li a{color: #6c80a4;}*/

  #navigation .tb-megamenu-column-inner li a:hover{color:#6c80a4;}
  #navigation #block-tb-megamenu-main-menu{margin-top: 10px;padding-left: 5%;}
  .tb-megamenu .nav > li > a {
  border:none;
  border-top: 0;
  color: #fff;
  font-weight: bold;
  padding: 0 0 0 0;
  text-shadow: none;
  }

  .tb-megamenu .nav .tb-megamenu-column-inner li + li a::before{content:"";padding: 0 0px 0 0px;}

  .tb-megamenu {background-color:#6c80a4;}
  .tb-megamenu .nav > .active > a,
  .tb-megamenu .nav > .active > a:hover,
  .tb-megamenu .nav > .active > a:focus {
    background-color: #6c80a4;
    color: #fff;
    text-shadow: none; 
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    outline: none;
  }
  .tb-megamenu .nav li.dropdown.active > .dropdown-toggle,
  .tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle,
  .tb-megamenu .nav > li.dropdown.open.active > a:hover {
    background-color: #6c80a4; 
    border-color: #444;
    color: #eee;
  }
  .tb-megamenu .mega > .mega-dropdown-menu {
  min-width: 300px;
  display: none;
  margin-top: 9px;
  }
  /*2nd level submenu margins*/
  .tb-megamenu .mega > .mega-dropdown-menu .mega-dropdown-menu {
  margin: 0 0 0 9px;
  }

  .tb-megamenu .dropdown-menu {border-bottom: 3px solid #6c80a4;}
  #navigation li a .caret{margin-top: 10px;color: #ffffff;}
  /* Menu over ride from TB Megamenu - End*/
}

/**
 * Use 3 grid columns for smaller screens.
 */
@media all and (min-width: 480px) and (max-width: 959px) {

  /**
   * The layout when there is only one sidebar, the left one.
   */

  /* Span 2 columns, starting in 2nd column from left. */
  .sidebar-first #content {
    float: left;
    width: 66.66667%;
    margin-left: 33.33333%;
    margin-right: -100%;
  }
  .sidebar-first.page-press-release #content {
    float: left;
    width: 80%;
    margin-left: 20%;
    margin-right: -100%;
  }
   .sidebar-first.page-news #content {
    float: left;
    width: 80%;
    margin-left: 20%;
    margin-right: -100%;
  }
  .sidebar-first.page-events #content {
    float: left;
    width: 80%;
    margin-left: 20%;
    margin-right: -100%;
  }
  .sidebar-first.node-type-news-articles #content {
    float: left;
    width: 80%;
    margin-left: 20%;
    margin-right: -100%;
  }

  /* Span 1 column, starting in 1st column from left. */
  .sidebar-first .region-sidebar-first {
    float: left;
    width: 33.33333%;
    margin-left: 0%;
    margin-right: -33.33333%;
  }

  /**
   * The layout when there is only one sidebar, the right one.
   */

  /* Span 2 columns, starting in 1st column from left. */
  .sidebar-second #content {
    float: left;
    width: 66.66667%;
    margin-left: 0%;
    margin-right: -66.66667%;
  }

  /* Span 1 column, starting in 3rd column from left. */
  .sidebar-second .region-sidebar-second {
    float: left;
    width: 33.33333%;
    margin-left: 66.66667%;
    margin-right: -100%;
  }

  /**
   * The layout when there are two sidebars.
   */

  /* Span 2 columns, starting in 2nd column from left. */
  .two-sidebars #content {
    float: left;
    width: 66.66667%;
    margin-left: 33.33333%;
    margin-right: -100%;
  }

  /* Span 1 column, starting in 1st column from left. */
  .two-sidebars .region-sidebar-first {
    float: left;
    width: 33.33333%;
    margin-left: 0%;
    margin-right: -33.33333%;
  }

  /* Start a new row and span all 3 columns. */
  .two-sidebars .region-sidebar-second {
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 0;
    padding-right: 0;
    clear: left;
  }

  /* Apply the shared properties of grid items in a single, efficient ruleset. */
  .two-sidebars .region-sidebar-second .block {
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    *behavior: url("/path/to/boxsizing.htc");
    _display: inline;
    _overflow: hidden;
    _overflow-y: visible;
  }

  /* Span 1 column, starting in the 1st column from left. */
  .two-sidebars .region-sidebar-second .block:nth-child(3n+1) {
    float: left;
    width: 33.33333%;
    margin-left: 0%;
    margin-right: -33.33333%;
    clear: left;
  }

  /* Span 1 column, starting in the 2nd column from left. */
  .two-sidebars .region-sidebar-second .block:nth-child(3n+2) {
    float: left;
    width: 33.33333%;
    margin-left: 33.33333%;
    margin-right: -66.66667%;
  }

  /* Span 1 column, starting in the 3rd column from left. */
  .two-sidebars .region-sidebar-second .block:nth-child(3n) {
    float: left;
    width: 33.33333%;
    margin-left: 66.66667%;
    margin-right: -100%;
  }
}

/**
 * Use 5 grid columns for larger screens.
 */
@media all and (min-width: 960px) {

  /**
   * The layout when there is only one sidebar, the left one.
   */

  /* Span 4 columns, starting in 2nd column from left. */
  .sidebar-first #content {
    float: left;
    width: 80%;
    margin-left: 20%;
    margin-right: -100%;
  }
   .sidebar-first.page-press-release #content {
    float: left;
    width: 80%;
    margin-left: 20%;
    margin-right: -100%;
  }
  .sidebar-first.page-news #content {
    float: left;
    width: 80%;
    margin-left: 20%;
    margin-right: -100%;
  }
  .sidebar-first.node-type-news-articles #content {
    float: left;
    width: 80%;
    margin-left: 20%;
    margin-right: -100%;
  }
 .sidebar-first.page-events #content {
    float: left;
    width: 80%;
    margin-left: 20%;
    margin-right: -100%;
  }
  /* Span 1 column, starting in 1st column from left. */
  .sidebar-first .region-sidebar-first {
    float: left;
    width: 20%;
    margin-left: 0%;
    margin-right: -20%;
  }

  /**
   * The layout when there is only one sidebar, the right one.
   */

  /* Span 4 columns, starting in 1st column from left. */
  .sidebar-second #content {
    float: left;
    width: 80%;
    margin-left: 0%;
    margin-right: -80%;
  }

  /* Span 1 column, starting in 5th column from left. */
  .sidebar-second .region-sidebar-second {
    float: left;
    width: 20%;
    margin-left: 80%;
    margin-right: -100%;
  }

  /**
   * The layout when there are two sidebars.
   */

  /* Span 3 columns, starting in 2nd column from left. */
  .two-sidebars #content {
    float: left;
    width: 60%;
    margin-left: 20%;
    margin-right: -80%;
  }

  /* Span 1 column, starting in 1st column from left. */
  .two-sidebars .region-sidebar-first {
    float: left;
    width: 20%;
    margin-left: 0%;
    margin-right: -20%;
  }

  /* Span 1 column, starting in 5th column from left. */
  .two-sidebars .region-sidebar-second {
    float: left;
    width: 20%;
    margin-left: 80%;
    margin-right: -100%;
  }
}

/*CSS to add padding to menu links after 1025px*/
@media (min-width: 1025px){
  .tb-megamenu .nav li + li a::before{content:" | ";font-size: 18px;color: #b5bcd1;padding: 0 11px 0 11px;}
}

.tb-megamenu .nav li.tb-megamenu-item.level-2.mega a::before{content:"";padding:0px;}

/*CSS specific for 1024 px to alter the menu and search placement*/
 @media (min-width: 769px) and (max-width: 1024px){
  .tb-megamenu .nav li + li a::before{content:" | ";font-size: 17px;color: #b5bcd1;padding: 0 0px 0 0px;}
  #navigation #block-tb-megamenu-main-menu{margin-top: 10px;padding-left: 5px;}
  .header .header__region{width: 40%;}
    #navigation{padding-left: 0px;}
}

@media all and (max-width: 1000px) {
    .header #searchsloganwrapper{display: none;}
  .header__region #block-search-form{display: none;}
  .region-homepageslider .homepageslider .views-field-field-hyperlink{display: none;}
  /*.header__region:after{
    content: "\f002";
    font-family: FontAwesome;
  }*/
  .header .region-topheadermenu{display: none;}
  .breadcrumb{margin-top: 0px !important;}
}
@media all and (max-width: 768px) {
.tb-megamenu .nav-collapse .nav li a{border:none;}
  .tb-megamenu .nav-collapse .nav > li > a,.tb-megamenu .nav-collapse .dropdown-menu a {padding: 5px 15px;font-size: 15px;font-weight:normal;text-decoration: none;}
  .tb-megamenu .nav-collapse .dropdown-menu a:hover,
  .tb-megamenu .nav-collapse .dropdown-menu a:focus {
    border-bottom: 0;
    font-weight: normal;
  padding: 5px 15px;
    font-size: 15px;

  }
  .tb-megamenu .row-fluid + .row-fluid {
  padding-top: 0px;
  border-top: 1px solid #eeeeee;
  }
  
}
@media (max-width: 768px){
  .tb-megamenu .nav-collapse .nav{width:650px;}
  #navigation{position: fixed;top:20px;right:20px;}
  .tb-megamenu .nav-collapse .nav{float:right;}
  #header{margin-bottom: 10px;}
}
@media (max-width: 640px){
  .tb-megamenu .nav-collapse .nav{width:450px;}
  #navigation{position: fixed;top:5px;}
  #navigation{position: fixed;top:20px;right:20px;}
  .tb-megamenu .nav-collapse .nav{float:right;}
}
@media (max-width: 480px){
  .tb-megamenu .nav-collapse .nav{width:350px;/*height: 250px; overflow-x: hidden;overflow-x:scroll;*/}
  #navigation{position: fixed;top:10px;right:10px;}
  .tb-megamenu .nav-collapse .nav{float:right;}
  
}
@media (max-width: 320px){
  #navigation{position: fixed;top:5px;right:5px;}
  .tb-megamenu .nav-collapse .nav{float:right;width:250px;}
  .tb-megamenu .nav-collapse ul,.tb-megamenu .nav-collapse li{-webkit-transform: translate3d(0px, 0px, 1px);-webkit-transform: translateZ(0);}
  #navigation{position: fixed;top:20px;right:20px;}
  .tb-megamenu .nav-collapse .nav{float:right;}
  .region-bottom-wrapper{height: 80px;}
}