/**
 * @file
 * Layout Styling (DIV Positioning)
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This layout is based on the Zen Columns layout method.
 *   http://drupal.org/node/201428
 *
 * Only CSS that affects the layout (positioning) of major elements should be
 * listed here.  Such as:
 *   display, position, float, clear, width, height, min-width, min-height
 *   margin, border, padding, overflow
 */





@media screen and (max-width: 1029px) {
    /*
     * Globals
     */
      .hide-if-fluid{
        display:none !important;
      }
}


@media screen and (max-width: 800px) {
    /*
     * Globals
     */      
      .hide-if-1col,
      #block-views-rightside-wildcards-block{
        display:none !important;
      }
}






/***   all fluid width display sizes ***/
@media screen and (max-width: 1029px) {




    /*
     *   FLUID IMAGES and VIDEOS 
     */

    #content img,
    .column img,
    #footer-wrapper img{
        max-width: 100%;
        height: auto;
    }
    #content iframe,
    .column iframe,
    #footer-wrapper iframe{
        max-width: 100%;
        margin-left: 0;
        /* height: auto; */    
    }
    bodypage-node #content .node h1.title,
    body.node-type-event #page-title.event-page-title,
    bodypage-node #content .node,
    body.node-type-event #content .node.node-event{
        max-width: 100%;
        margin-left: 0 !important;
    }




  /* MAIN CONTENT */

    #block-views-homepage-slideshow-block{
        display: none !important;
    }
    
    #field-slideshow-1-wrapper .field-slideshow,
    #field-slideshow-1-wrapper .field-slideshow .field-slideshow-slide,
    #field-slideshow-1-wrapper .field-slideshow .field-slideshow-slide img{
      width: 100% !important;
      max-width: 100% !important;
    }



  /* SIDEBAR */

    /*
     * First sidebar
     */
     
     /* NO CONTENT IN FIRST SIDEBAR */
     
     
     
    /*
     * Second sidebar
     */
    
    .region-sidebar-second{
        float: left;
    }
    #block-views-rightside-wildcards-block,    #block-multiblock-4,
    #block-block-9,
    #block-block-12,
    #block-views-9bf4d0c41ad7c04b91b90566d8a15545,
    #block-menu-menu-admin-menu,
    #block-masquerade-masquerade,
    #block-views-534cdf51e1747521a607fdf8ac26e199,
    #block-views-upcoming-events-block,
    #block-views-rightside-wildcards-block-1,
    #block-views-homepageupcoming-events-block-2,
    #block-views-homepageupcoming-events-block-4,
    #block-views-homepageupcoming-events-block{
        float: left;
        width: 100%;
        max-width: none;
    }
    #block-views-rightside-wildcards-block,    #block-multiblock-4,
    #block-block-9,
    #block-block-12{
        max-width: 320px;
        max-width: 385px;
    }
    
    .view-rightside-wildcards .views-field-body,
    .view-rightside-wildcards .views-field-field-wildcard-link,
    .view-rightside-wildcards .views-field-field-wildcard-image,
    #four-blocks-sidebar-wrapper h4{
        margin-left: 0 !important;
    }
    .email-subscribe-wrapper{
        width: 100%;
        background-size: 100% auto;
    }
    .view-homepageupcoming-events,
    .view-upcoming-events{
        margin-left: 0 !important;
    }
    #four-blocks-sidebar-wrapper ul li a {
        margin-right: 0%;
        width: 50%;
    }
    #block-views-homepageupcoming-events-block h2.block-title,
    #block-views-homepageupcoming-events-block-2 h2.block-title,
    #block-views-upcoming-events-block-1 h2.block-title,
    #block-views-upcoming-events-block h2.block-title{
        margin-left: 0 !important;
    }



/* closing tag of Media Query */
/*  @media screen and (max-width: 1029px) {  */
}











/***   all smaller display sizes ***/
@media screen and (max-width: 800px) {

        
    /*
     * Body
     */
    html,
    body {
      width: 100vw;
      overflow-x: hidden;
      overflow-y: auto;
    }
    
    #page-wrapper{
      margin-top: 1px !important;
      margin-top: 0px !important;
    }
    
    #page-wrapper,
    .region-bottom {
      max-width: 100vw;
      width: 100%;
      box-sizing: border-box;
    }
    #page-wrapper,
    .region-bottom{
      padding-left: 1px;
      padding-right: 1px;
      padding-left: 0;
      padding-right: 0;
    }
    
    #page {
      width: 100%;
      box-sizing: border-box;
    }
    
    /*
     * Header
     */
    #header {
    }
    
    #header .section {
    }
    #logo{
    }
    #logo img{
    }
    #name-and-slogan{
      float: right;
      width: 75.2% !important;
      height: 150px;
      display: block;
    }
    #site-name,
    #site-slogan{
      max-width: 100% !important;
      background-size: 100% auto !important;
    }
    h1#site-name a, 
    div#site-name a{
      max-width: 100% !important;
      width: 100% !important;
      background-size: 100% auto;
    }
    
    .region-header {
    }
    
    /*
     * Main (container for everything else)
     */
    #main-wrapper, 
    #footer-wrapper {
      position: relative;
      width: 100%;
      box-sizing: border-box;
    }
    #main {
      width: 100%;
      box-sizing: border-box;
    }
    #main img,
    #main iframe{
      max-width: 100%;
    }
    
    #content-top{
      width: 100%;
    }
    #content-top .section{
      width: 100%;
      background: #FFFFFF;
    }
    
    /*
     * Content
     */
    #content {
      float: left; /* LTR */
      width: 100%;
      margin-left: 0; /* LTR */
      margin-right: -100%; /* LTR */ /* Negative value of #content's width + left margin. */
      padding: 0; /* DO NOT CHANGE. Add padding or margin to #content .section. */
    }
    
    #content .section,
    .no-sidebars #content .section {
      margin: 0;
      padding: 0;
    }
    
    .sidebar-first #content .section {
      padding-left: 200px; /* LTR */ /* The width + left margin of .region-sidebar-first. */
      padding-left: 0;
      padding-right: 0; /* LTR */
    }
    
    .sidebar-second #content .section {
      padding-left: 0; /* LTR */
      padding-right: 200px; /* LTR */ /* The width + right margin of .region-sidebar-second. */
      padding-right: 0;
    }
    
    .two-sidebars #content .section {
      padding-left: 200px; /* The width + left margin of .region-sidebar-first. */
      padding-right: 200px; /* The width + right margin of .region-sidebar-second. */
    }
    
    /*
     * Navigation
     */
    #navigation,
    body.page-node-3 #navigation{
      float: left;
      width: 100vw !important;
      left: -10px !important;
      right: auto;
      margin-left: 0;
      margin-right: 0;
      padding: 0;
      height: 3em;
    }
    #navigation .region-navigation{
        width: 100%;      
    }
    
    
    .with-navigation #content,
    .with-navigation .region-sidebar-first,
    .with-navigation .region-sidebar-second {
      margin-top: 3em; /* Set this to the same value as the navigation height above. */
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }
    
    .with-navigation #content{
      margin-top: 1em;  
    }
    
    #navigation .section {
    }
    
    /*
     * First sidebar
     */
    .region-sidebar-first {
      float: left; /* LTR */
      width: 200px;
      margin-left: 0; /* LTR */
      margin-right: -200px; /* LTR */ /* Negative value of .region-sidebar-first's width + left margin. */
      padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-sidebar-first .section. */
    }
    
    .region-sidebar-first .section {
      margin: 0 20px 0 0; /* LTR */
      padding: 0;
    }
    
    /*
     * Second sidebar
     */
    .region-sidebar-second {
      float: right; /* LTR */
      width: 200px;
      margin-left: -200px; /* LTR */ /* Negative value of .region-sidebar-second's width + right margin. */
      margin-right: 0; /* LTR */
      padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-sidebar-second .section. */
    }
    
    .region-sidebar-second .section {
      margin: 0;
      padding: 0;
    }
    
    /*
     * Footer
     */
    .region-footer {
    }
    
    /*
     * Page bottom
     */
    .region-bottom /* See also the #page-wrapper declaration above that this div shares. */ {
    }
    
    /*
     * Prevent overflowing content
     */
    #header,
    #content,
    #navigation,
    .region-sidebar-first,
    .region-sidebar-second,
    .region-footer,
    .region-bottom {
      overflow: visible;
      word-wrap: break-word; /* A very nice CSS3 property */
    }
    
    /*
     * If a div.clearfix doesn't have any content after it and its bottom edge
     * touches the bottom of the viewport, Firefox and Safari will mistakenly
     * place several pixels worth of space between the bottom of the div and the
     * bottom of the viewport. Uncomment this CSS property to fix this.
     * Note: with some over-large content, this property might cause scrollbars
     * to appear on the #page-wrapper div.
     */
    /*
    #page-wrapper {
      overflow-y: hidden;
    }
    */
    
    
    
    
    
    
    
    
    
    /* 
     *  Slideshow
     *********************************************************************************/
    
    .field-slideshow{
      max-width: 100%;
    }
    
    /**********************************************************************************
     *  END --   Slideshow
     */
     
     
     
     
     
     
    
    
    
    
    
    
    
    /* 
     *  Front Page
     *********************************************************************************/
    
    #block-views-homepage-slideshow-block{
      height: auto !important;  
      width: 100% !important;
      background-color: #020087 !important;
    }
    #block-views-homepage-slideshow-block .views-field-field-slideshow-image{
      float:left;
      display:block;
      width: 100% !important;
      height:382px;
    }
    
    #block-views-homepage-news-block .views-row{
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    
    /**********************************************************************************
     *  END --   Front page
     */
     
    
    
    
    /* 
     *  Front Page -- SIDEBAR
     *********************************************************************************/
    
    #four-blocks-sidebar-wrapper{
      width: 100% !important;
    }
    #four-blocks-sidebar-wrapper ul{
      width: 100% !important;
    }
    
    /**********************************************************************************
     *  END --   Front page -- SIDEBAR
     */
     
    
    
    
    /* 
     *  Front Page -- FOOTER
     *********************************************************************************/
    
    #footer-wrapper, .region-footer{
      width: 100% !important;
    }
    #block-block-1{
      height: auto !important;
      float:left;
    }
    #block-block-1 .footer-tagline,
    #block-block-1 h2{
      width: 100% !important;
    }
    
    #block-menu-menu-footer-menu-1,
    #block-menu-menu-footer-menu-2,
    #block-menu-menu-footer-menu-3{
      width: 33% !important;
    }
    #block-menu-menu-footer-menu-1 .content > ul,
    #block-menu-menu-footer-menu-2 .content > ul,
    #block-menu-menu-footer-menu-3 .content > ul{
      height: auto !important;
    }
    
    
    /**********************************************************************************
     *  END --   FOOTER
     */
    



 


/* closing tag of Media Query */
/*  @media screen and (max-width: 800px) {  */
}














/***   all medium desktop display sizes ***/
@media screen and (max-width: 1029px) and (min-width: 801px){
  
  
    #page-wrapper,
    .region-bottom {
        width: 100%;
        box-sizing: border-box;
        padding-left: 2vw;
        padding-right: 2vw;
        padding-left: 10vw;
        padding-right: 10vw;
        box-sizing: border-box;
    }
    #page,
    #header,
    #main-wrapper,
    #main,
    #content-top,
    #content-top .section,
    #content{
        width: 100%;
        box-sizing: border-box;
    }    
    body.page-node-3 #content-top,
    body.page-node-3 #content-top .section{    
        width: 100% !important;
    }
    
    
    /*
     * Navigation
     */


    #navigation,
    #main-wrapper #navigation,
    body.page-node-3 #navigation{
        width: calc(100% + 20px);  
        padding: 0;
        width: 100vw;
        left: -3vw;
        left: -11vw;
        height: 71px;
        background-size: 97% 100%;
        background-position: 50% 50%;
    }
    body.page-node-3 #navigation {
        top: auto;
        bottom: -24px;
    }
    #navigation .region-navigation{
        width: 40%;
    }
    .sidebar-second #content{
        float: left;
        width: 60%;
        margin-right: -60%;
        margin-left: 0;
    }
    .region-sidebar-second{
        float: left;
        width: 40% !important;
        margin-left: 60%;
        margin-right: -40%;
    }
    .region-sidebar-second *{
        max-width: 100%;
    }


  
}
/* closing tag of Media Query */
/*  @media screen and (max-width: 1029px) and (min-width: 801px)  */






/*** large screens ***/
@media screen and (min-width: 1031px) {

    #superfish1,
    #block-superfish-1{
        display: none;
    }
    
}
/* closing tag of Media Query */
/*  @media screen and (min-width: 1031px)  */