/********************************************
  Media queries: mobile styles are elsewhere
*********************************************/

/** Large phones **/
@media only screen and (min-width : 466px) {
  .top {
    grid-template-rows: 3fr 1fr 1fr;
  }
  .header-breakout {
    grid-area: content-start / content-start / content-ext-end / content-ext-end;
  }

  footer .section_list li {
    margin:0 1em;
    padding:0;
  }
  .navbar li a {
    color: #333;
    text-decoration: none;
    border-bottom:none;
    font-weight:normal;
  }
  .navbar li a:hover {
    text-decoration: underline;
  }
  ol.morebar {
    position: absolute;
    right:50px;
    top: 0;
    overflow: hidden;
    margin:0;
    height:auto;
    width: auto;
    cursor:default;
    list-style-type:none;
    text-align: right;
    background:white;
    opacity:0.8;
    font-size:80%;
    padding:8px 0.6em;
}
  .hero .articlethumb,
    .herowide .articlethumb {
        display:inline-block;
        float:left;
        width:60%;
    }
    .hero .articletext,
    .herowide .articletext {
        display:inline-block;
    }
  .herowide .articletext,
  .herowide .articlethumbfront {
    width:48%;
    display: inline-block;
  }
  .thumbgrid a {
    width:11.3%;
    margin:0 2px;
    border-bottom:none;
  }
  .thumbgrid img {
    height:64px;
  }
  .gallerygrid figure {
    width:24%;
    margin:0 2px;
  }
  .articlethumb, .articlelistimg, .articlegrid {
    max-width:60%;
  }
  .social_icons {
    margin-right: 1em;
  }
}

/** Large phones: landscape **/
@media only screen and (min-width : 375px) and (orientation : landscape) {
.nescobar {
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
  .copyblock {
    grid-template-columns: repeat(2, 1fr);
  }
.bigger {
  grid-column: span 6;
  grid-row: span 8;
}
  .frontpage h1 {
    font-size:4vw;
  }
  .frontpage h2 {
    font-size:3.5vw;
  }
  .locations-list {
    font-size:1.5vw;
  }
  .articletext {
    padding:10px 0.5rem 0.5rem;
  }
  .article .articletext,
  #s-piano .articletext,
  #s-pianos .articletext,
  #s-faq .articletext {
    max-width:76%;
    margin: 0 auto;
  }
  .footblock img {
    width: 130px;
  }

  .thumbgrid a {
    width:24%;
  }
  .thumbgrid img {
    height:120px;
  }
  select.comSelect{
    padding:0.4rem;
    margin:1em 0;
    width: 60%;
  }
  input.comText,
  textarea.comTextarea,
  input.comEmail {
    padding:0.4rem;
    margin:1em;
    width: 50.6%;
  }
  .articlethumbfront {
     max-width:220px;
  }
  .articlethumb, .articlelistimg, .articlegrid {
    max-width:40%;
  }
  .highlight img {
    width:40%;
  }
  .embed-vertical {
    width:50%;
    margin:0 25%;
  }
}

/** Tablets **/
@media only screen and (min-width : 768px) {
  .gridhero {
    grid-template-rows: 1fr;
  }
  .gridhero {
    grid-template-columns: repeat(2, 1fr);
  }
.gridhero {
  grid-template-areas: 
    "title title"
    "about about"
    "aside aside";
}
.bigfoot {
  grid-template-columns: repeat(3, 1fr);
}

#header {
  grid-area: title;
}
.about-us {
  grid-area: about;
}
.primary-cta {
  grid-area: aside;
}
.dual {
  display:flex;
}
.listy {
  width:50%;
}
  .clear-desktop {
      clear: both;   
  }
  .delivery {
    font-size:100%;
  }
  .gallerygrid figure {
    width:24%;
    margin:0 2px;
  }
  #header .tagline {
    font-weight:100;
  }
  .herowide {
    width: 100%;
  }
  .hero_mini {
    flex: 1 1 auto;
    width: 23.7%;
    margin-right:12px;
  }
  .hero .articlethumb,
  .herowide .articlethumb {
    display:block;
    float:none;
    width:100%;
    max-width:100%;
  }
  .herowide .articletext,
  .herowide .articlethumbfront {
    width:40%;
    display: inline-block;
  }
  .hero .articletext {
    width:98%;
    display: block;
  }
  .testimonials .article {
    flex: 1 1 auto;
    width: 32.6%;
    margin: 3px;
  }
  .thumbgrid a {
    width:11.7%;
  }
  .thumbgrid img {
    height:80px;
  }
  #s-reviews {
    margin: 0 3px;
  }
  h1 {
    padding:0 0.3em 0;
  }
  h2 {
    padding:0.5em 0.3em 0.3em;
  }
  .articlethumbfront {
     max-width:240px;
  }
  .hero_inline {
    margin: 1em 0.25em;
  }
  .embed-vertical {
    width:35%;
    margin:0 33%;
  }
}

/** Tablets portrait **/
@media only screen and (min-width : 913px) {
  .herowide {
    width: 49.6%;
  }
  .thumbgrid a {
    width:11.6%;
    border-bottom: none;
  }
  .thumbgrid img {
    height:62px;
  }
  .herowide .articletext,
  .herowide .articlethumbfront {
    width:98%;
    display: block;
  }
  .highlight img {
    width:30%;
  }
}

/** Desktops **/
@media only screen and (min-width : 1166px) {
  .bigfoot {
    grid-template-columns: repeat(6, 1fr);
  }
  body,
  footer {
    max-width:1150px;
  }
  footer {
    text-align:left;
  }
  .articlethumbfront {
     max-width:280px;
  }
}

/** Wide screens **/
@media only screen and (min-width : 1200px) {
  .frontpage h1 {
    font-size: 3vw;
  }
  .frontpage h2 {
    font-size: 2.5vw;
  }
  .locations-list {
    font-size:1.4vw;
  }
}

/** Bigger-wide screens **/
@media only screen and (min-width : 1800px) {
  .frontpage h1 {
    font-size: 2vw;
  }
  .frontpage h2 {
    font-size: 2vw;
  }
  .locations-list {
    font-size:1.3vw;
  }
}

/** Super-wide screens **/
@media only screen and (min-width : 2400px) {
  .frontpage h1 {
    font-size: 1.5vw;
  }
  .frontpage h2 {
    font-size: 1vw;
  }
  .locations-list {
    font-size:0.7vw;
  }
}