/*
Theme name: newhousemvj2020
Author: Jeff Passetti
Version: 1.0
*/

@media all and (min-width:320px) {
    body {
     background-color: #f8f8f8;   
    }
 .header-container {
  height: auto;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
 }
 .header-container h1 {
  float: left;
  line-height: 75px;
  font-size: 18px;
  color: black;
  font-family: 'Arvo', Arial, sans-serif;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
  padding-left: 30px;
 }
 .logo2017 {
  height: 45px;
  float: left;
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 60px;
 }
 .search-row {
  padding-top: 15px;
  padding-bottom: 15px;
  display: none;
 }
  ul.nav2017 {
   float: none;
   display: none;
   margin: 0px;
   padding: 0px;
   padding-left: 30px;
  }
 
 ul.nav2017 li {
  float: none;
  display: block;
    font-family: 'Arvo', Arial, sans-serif;
   font-size: 18px;
  line-height: 36px;
   font-weight: bold;
   text-transform: uppercase;
   cursor:pointer;
   color: #337ab7;
   border-bottom: 1px solid #ccc;
 }
  ul.nav2017 li:last-child {
      border-bottom: 0px;
      border-right: 0px;
  }
  ul.nav2017 ul li a {
   font-weight: 300;
   text-transform: none;
   display: block;
  }
 

  .showcase2017 {
   position: relative; 
  }
  .showcase2017 ul, .showcase2017 ul li {
   list-style: none;  
   padding: 0;
   margin: 0;
   /*height: 70vw;*/
  }
  .showcase2017 ul li {
   display: none;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
  }
  .showcase2017 ul li img {
   width: 100%;
   height: auto;
  }
  
  .disc {
   width: 536px;
   height: 536px;
   background-color: rgba(255,255,255,.8);
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -268px;
   margin-left: -268px;
   z-index: 10;
  }
  .inner {
     display: table;
    height: 100%;
    width: 75%;
    margin: 0 12.5%; 
  }
  .inner-content {
   display: table-cell;
    vertical-align: middle;
    text-align: center;   
  }
  .page-content h1 {
   text-align: center;   
     font-family: "museo-sans", sans-serif;
     font-size: 28px;
     font-weight: bold;
     margin-bottom: 20px;
  }
  .page-content h2 {
   text-align: center;   
     font-family: "museo-sans", sans-serif;
     font-size: 22px;
     font-weight: bold;
  }
  .page-content h3 {   
     font-family: "museo-sans", sans-serif;
     font-size: 22px;
     font-weight: bold;
     text-transform: uppercase;
  }
  .page-content p {   
     font-family: "museo-sans", sans-serif;
     font-size: 16px;
     line-height: 24px;
     margin-bottom: 20px;
     font-weight: 300;
  }
  .single-featured-image {
  /*  background-color: #ddd; */
   text-align: center;
  }
  .single-featured-image--portrait img {
   height: 600px;
   width: auto;
  }
  .single-featured-image--landscape img {
   width: 100%;
   height: auto;
  }
  .item {
   overflow: hidden;
   cursor:pointer;
   margin-bottom: 20px;
  }
  .item-inner {
   position: relative;  
   margin: 0 2px 4px;
  }
  .item-image {
   width: 100%;
   height: 300px;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
  }
  .item img {
   width: 100%;
   height: auto;
   position: relative;
   top: 0px;
   left: 0px;
  }
  .item-info {
   background-color: white;
   padding: 15px;
   box-sizing: border-box;
   text-align: center;
   position:absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   display: none;
  }
  .item-info h2 {
        font-family: "museo-sans", sans-serif;
        font-size: 20px;
        line-height: 20px;
        font-weight: bold;
        padding: 0px;
        margin: 0px;
        margin-bottom: 10px;
  }
  .item-info h3 {
        font-family: "museo-sans", sans-serif;
        font-size: 16px;
        line-height: 16px;
        font-weight: 400;
         padding: 0px;
        margin: 0px;
        margin-bottom: 10px;
        font-weight: bold;
  }
  .item-info h3 a {
   color: black;   
  }
   .item-info h4 {
        font-family: "museo-sans", sans-serif;
        font-size: 14px;
        line-height: 14px;
        font-weight: 400;
         padding: 0px;
        margin: 0px;
        margin-bottom: 10px;
  }
  .flex-video {
  position: relative;
  padding-top: 1.5625rem;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 1rem;
  overflow: hidden; }
  .flex-video.widescreen {
    padding-bottom: 56.34%; }
  .flex-video.vimeo {
    padding-top: 0; }
  .flex-video iframe,
  .flex-video object,
  .flex-video embed,
  .flex-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    
    .white-content-container {
        padding: 30px 0px;
     /*background-color: white;*/
    }
    .single-story-showcase-container, .footer-container {
     padding: 30px 0px;
    /* background-color: #eaeaea;*/
    }
    .footer-container  {
        background-color: #eaeaea;
    }
    .single-story-showcase-container {
       /*background-image: url('http://newhousemilitary.syr.edu/2017/wp-content/uploads/sites/3/2017/04/striped-bg.png');   */
    }
    
    .photoGalleryGridItem {
     margin-bottom: 20px;   
    }
    
    .story-meta img, .photoGalleryGridItem img {
     width: 100%;
     height: auto;
    }
    .grayBlock {
     width: 100%;
     height: 300px;
     background-color: #ccc;
    }
    .story-content {
     margin-bottom: 20px;   
    }
    .utilityNav {
     float: right; 
     text-align: right;
     width: 50%;
    }
    .utilityNav li {
     display: inline-block;
    
    }
    .utilityNav li a {
     color: black;
     font-size: 20px;
     display:block;
      height: 75px;
     width: 40px;
     line-height: 75px;
     text-align: center;
    }
    .footer-container {
     text-align: center;   
    }
    .footer-logo {
        height: 40px;
    }
    .section-title-block {
     text-align: center;   
    }

} /* ------------ end of mobile base styles -------*/


@media all and (min-width:992px) {
    .header-container {
     height:75px;   
    }
 .header-container h1 {
     float: left;
     font-size: 24px;
 }
 ul.nav2017 {  
     float: left;
     display:inline-block;
 }
 ul.nav2017 li {
  display: inline-block;
  line-height: 75px;
  padding-left: 20px;
  padding-right: 20px;
  border-right: 1px solid #ccc;
  border-bottom: 0px;
  position: relative;
 }
  
  ul.nav2017 li a {
     /* color: #888;*/
  }
  ul.nav2017 ul {
      padding: 0px;
      margin: 0px;
   position: absolute;
   top: 50px;
   left: 0px;
   width: 200px;
   background-color: white;
   z-index: 200;
  display:none;
  }
   ul.nav2017 ul li {
    border-right: 0px;
    display: block;
   }
 
    ul.nav2017 ul li a {
   font-size: 16px;
   text-transform: none;
   font-weight: 300;
   
  }
  ul.nav2017 ul li:hover {
   background-color: #ccc;
   
  }
   ul.nav2017 ul li:hover a {
       color: white;
   }

  ul.nav2017 li:hover ul {
   display: block;   
  }
  #menuBtn {
   display: none;   
  }
 
    .utilityNav {
        width: 20%;
    }
}