/*
   
   Theme Name: Academy of Vocal Arts 2020
   Text Domain: ava2020
   Author: Zero Defect Design LLC
   Author URI: https://zerodefectdesign.com
      
   */
   
   /* font */

   @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

   /* resets */

   *, *::before, *::after { box-sizing: border-box; }
   html { height: 100%; -webkit-text-size-adjust: 100%; }
   body { margin: 0; padding: 0; min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; }   
   table { border: 0; padding: 0; border-spacing: 0px; border-collapse: collapse; }
   sup, sub { vertical-align: baseline; position: relative; top: -0.4em; }
   sub { top: 0.4em; }
   img { vertical-align: bottom; max-width: 100%; display: block; height: auto; }
   img.disc, .disc img { border-radius: 50%; }

   /* structure */
   
   body { margin: 0; padding: 100px 0 0 0; background-color: #DEDEDE; color: #000000; }
   .frame { padding-left: 280px; padding-right: 80px; }
   body.home .frame { padding-left: 80px; }
   .content { padding-top: 50px; padding-bottom: 50px; background-color: #FFFFFF; }
   #footer { padding-top: 50px; padding-bottom: 50px; color: #000000; font-weight: 400; }
   #footer b { color: #000000; }
   .container { display: flex; align-items: flex-start; }
   .container .primary { width: 66.667%; padding-right: 40px; }
   .container .secondary { width: 33.333%; padding-left: 20px; }
   table.calendar { background-color: #FFFFFF; }
   
   /* type */
   
   body, input, button, textarea, select { font: 300 16px/1.5 'Montserrat', sans-serif; }
   i, em {  }
   b, strong { font-weight: 700; }
   
   h2 { font-weight: 400; font-size: 200%; line-height: 1.2; margin: 15px 0 0.7em 0; padding: 0; }
   h2 select { font-weight: 400; margin: 0; font-size: inherit; line-height: inherit; border: 1px solid #DEDEDE; cursor: pointer; }
   h2 .prevnext { font-weight: 300; }
   h3 { font-weight: 700; font-size: 150%; line-height: 1.2; margin: 0 0 0.5em 0; }
   h3.subtitle { margin-top: -0.7em; margin-bottom: 0; }
   h4 { font-weight: 700; font-size: 125%; line-height: 1.2; margin: 0 0 1em 0; }
   h4.subtitle { margin-top: -0.5em; margin-bottom: 1.5em; }
   h5 { font-weight: 700; font-size: 90%; line-height: 1.2; margin: 0 0 1.5em 0; padding: 0 0 0.5em 0; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid #D2A359; }
   h6, .breadcrumb { font-weight: 700; font-size: 90%; line-height: 1.2; margin: 0 0 1.5em 0; padding: 0; text-transform: uppercase; letter-spacing: 2px; }
   h6 a, .breadcrumb a { text-decoration: none; }
   .breadcrumb a { display: inline-block; }
   body p { margin: 0 0 1.5em 0; }
   .dot { display:  inline-block; margin: 0 0.3em; font-weight: 700; color: #D2A359; }
   .date, .credit { color: #999999; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; font-size: 90%; }
   
   .columnar { columns: 2; }
   
   /* links and controls */
   
   a { color: #693A77; text-decoration: none; }
   a:hover { color: #D2A359; }
   body.home a, #footer a { text-decoration: none; }

   /*
   #footer a { color: #A267B3; text-decoration: none; }
   #footer a:hover { color: #D2A359; }
   */
   .menu .calendar 
   { 
      height: 1.2em; width: 1.2em; display: inline-block; background: transparent url('images/icon-calendar.svg') center center no-repeat; background-size: contain; 
      position: relative; top: 0.2em; cursor: pointer;
   }
   .searchbtn
   { 
      height: 1.2em; width: 1.2em; display: inline-block; background: transparent url('images/icon-search.svg') center center no-repeat; background-size: contain; 
      position: relative; top: 0.2em; cursor: pointer;
   }
   .mobilenav
   { 
      height: 1.2em; width: 1.2em; display: inline-block; background: transparent url('images/icon-menu.svg') center center no-repeat; background-size: contain; 
      position: relative; top: 0.2em; cursor: pointer;
   }
   
   button, input[type=button], .btn, a.btn, a.tix
   { 
      color: #FFFFFF; background-color: #693A77; text-decoration: none; line-height: 1; padding: 0.5em 1em; display: inline-block;
      white-space: nowrap; font-weight: 400; border: 0; text-transform: uppercase; font-size: 16px; letter-spacing: 1px; 
   }
   button:hover, input[type=button]:hover, .btn:hover, a.btn:hover, a.tix:hover { color: #FFFFFF; background-color: #D2A359; }
   a.tix { font-size: inherit; letter-spacing: inherit; padding: 2px 4px; }
   
   .btn::before 
   { 
      display: inline-block; margin-right: 8px; content: "\2192"; font-size: 27px; line-height: 0px; color: #ffc66c; font-weight: 400; 
      position: relative; top: 1px;
   }
   .btn:hover::before { color: #FFFFFF; }
   
   a.moar { font-style: italic; font-weight: 600; display: block; margin-top: 20px; }
   a.moar::before 
   { 
      display: inline-block; margin-right: 8px; content: "\2192"; font-size: 27px; line-height: 0px; color: #D2A359; font-weight: 400; 
      position: relative; top: 1px;
   }
   
   /* header */

   #hd
   {
      display: flex; position: fixed; top: 0px; left: 0px; right: 0px; height: 100px; background-color: #693A77; z-index: 100;
      justify-content: flex-end; align-items: flex-end; padding-top: 15px; padding-bottom: 15px; padding-left: 210px;
      font-weight: 400;
   }
   #ava 
   { 
      display: block; position: fixed; top: 0px; left: 0px; width: 200px; height: 200px; background: #000000 url('images/ava.svg') center 48px no-repeat;
      background-size: 70% auto; z-index: 110; transition: 0.25s all;
   }
   #ava.contracted { height: 110px; top: -10px; width: 160px; border-bottom: 10px solid #000000; }

   /* main menu */
   
   #hd .menu { text-align: right; }
   #hd .menu a { color: #FFFFFF; text-decoration: none; }
   
   #menu { list-style-type: none; margin: 0; padding: 0; }
   #menu li { display: inline-block; margin: 0 0 0 1.2em;  }
   #menu li:first-child { margin-left: 0; }
   #menu li a { color: #FFFFFF; text-transform: uppercase; letter-spacing: 0.05em; display: inline-block;  }
   #menu li a:hover { color: #f8c069; }
   #menu li svg { height: 22px; width: auto; position: relative; top: 4px; }
   
   #menu li ul { display: none; position: absolute; z-index: 220; margin: 0px; padding: 0px; list-style-type: none; }
   #menu li:hover ul 
   { 
      display: block; text-align: left; background: transparent url('images/wedge.svg') 10px 7px no-repeat; 
      background-size: 20px 10px; padding-top: 15px; 
   }
   #menu li ul li { margin: 0px; padding: 0px; list-style-type: none; text-transform: none; display: block; float: none; }
   #menu li ul li a 
   { 
      color: #FFFFFF; display: block; font-size: 16px; padding: 3px 9px; background-color: #a475b3; background-image: none; 
      text-transform: none; letter-spacing: 0; margin: -1px 0px; 
   }
   #menu li ul li:first-child { border-top: 6px solid #a475b3; }
   #menu li ul li:last-child { border-bottom: 6px solid #a475b3; }
   #menu li ul li a:hover { color: #FFFFFF; background-color: #D2A359; }
   
   #toolbar { text-align: right; margin-bottom: 15px; }
   #toolbar a.donate 
   { 
      text-transform: uppercase; background-color: #a475b3; font-size: 90%; line-height: 1; letter-spacing: 0.1em; 
      display: inline-block; padding: 2px 13px; border-radius: 12px; font-weight: 700;
   }
   #toolbar a.donate:hover { color: #FFFFFF; background-color: #D2A359; }
   
   /* hero + featured + sliders */
   
   .hero, .slide 
   { 
      width: 100%; height: 50vw; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; 
      max-height: calc(100vh - 200px);
   }
   .sub-page .slide { height: 0; padding-top: 50%; }
   .hero .caption, .slide .caption 
   { 
      position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 70px 35px 35px 35px; color: #FFFFFF; 
      background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.75));
   }
   .slide .caption h2, .hero .caption h2 { margin: 0 0 0.2em 0; }
   .slide .caption .date { font-weight: 700; font-size: 125%; line-height: 1.2; margin: 0 0 0.5em 0; color: #D2A359; text-transform: none; letter-spacing: 0; }

   .credit { letter-spacing: 0; font-weight: 300; }
   .hero .caption .date { color: #999999; font-size: 100%; }
   .credit { margin: 0.5em 0; }
   .slide-container { position: relative; }   
   .featured { width: 100%; height: 20vw; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; }
   .featured.medium { height: 33.333vw; }
   .date div { margin: 0; }
   img.alignright { float: right; margin: 0 0 50px 50px; width: 33.333%; height: auto; }
   
   /* zone */
   
   .zone { padding-top: 60px; padding-bottom: 60px; }
   .zone.outreach { background: #090808 url('images/bg-outreach.jpg') center center no-repeat; background-size: cover; color: #FFFFFF; }
   .zone.outreach .col { width: 50%; }
   .zone.outreach h2 { color: #e4ac54; }
   .columns { display: flex; align-items: flex-start; margin: -30px -30px; }
   .columns.vcenter { align-items: center; }
   .columns .col { padding: 30px 30px; }
   .twocol .col { width: 50%; }
   .threecol .col { width: 33.3333%; flex-grow: 0; flex-shrink: 0; }
   .threecol .col.double { width: 66.6666%; }
   .col img { width: 100%; height: auto; }
   .leafy .columns { align-items: center; }
   .not-reversed { background-color: #FFFFFF; }
   .shade { background-color: #f0ebf1; }
   
   /* quote */
   
   blockquote { position: relative; margin: 60px 0px; padding: 0px; }
   blockquote p { font-size: 150%; line-height: 1.2; margin: 0px; color: #D2A359; font-weight: 400; position: relative; }
   blockquote p::before { position: absolute; left: -1em; width: 1em; top: 0; display: inline-block; content: '\201C'; text-align: right; padding-right: 5px; }
   blockquote p::after {display: inline; content: '\201D'; padding-left: 5px; }
   blockquote p::before, blockquote p::after { font-weight: 700; }
   blockquote cite { display: block; text-align: right; margin-top: 15px; font-style: italic; font-weight: 400; color: #999999; }
   blockquote cite::before { display: inline-block; margin-right: 5px; content: "\2014"; }
   blockquote cite a { font-weight: 600; }
   blockquote img { position: absolute; width: 120px; height: 120px; border-radius: 50%; left: -160px; top: 0px; }
   blockquote a { text-decoration: none; }
   .col blockquote { margin: 0px; }
   .col blockquote p { color: #000000; font-size: 125%; line-height: 1.3; }
   .secondary blockquote { margin: 20px 0px; }
   .secondary blockquote p { font-size: 125%; line-height: 1.3; }
 
   /* event listings */
   
   .event-list .event { display: flex; align-items: flex-start; margin: 0 0 15px 0; }
   .event-list .event .info { align-self: center; }
   .event-list .event .info a.title { font-weight: 400; line-height: 1; }
   
   .daymonth { width: 40px; padding: 5px 3px; background-color: #D2A359; color: #FFFFFF; text-align: center; margin-right: 15px; overflow: hidden; }
   .daymonth .day { font-weight: 400; font-size: 20px; line-height: 1; }
   .daymonth .month { font-weight: 400; font-size: 12px; text-transform: uppercase; color: #000000; }

   
   /* event tiles */
   
   .tiles { display: flex; align-items: stretch; margin: 20px -20px 20px -20px; flex-wrap: wrap; }
   .tiles .tile { width: 33.3333%; padding: 20px; }
   .tiles .tile .img
   { 
      display: block; width: 100%; height: 0; padding-top: 57%; position: relative; background-position: center center; background-size: cover; background-repeat: no-repeat; 
      margin: 0;
   }
   .tiles .tile .img .daymonth { position: absolute; top: 0; left: 15px; }
   .tile h4 { font-weight: 400; margin-top: 15px; margin-bottom: 5px; }
   
   /* home page slogan or announce bar */
   
   .slogan, .announce { padding-top: 10px; padding-bottom: 10px; text-align: right; font-weight: 400; }
   .slogan { color: #D2A359; background-color: #44264D; text-transform: uppercase; letter-spacing: 0.1em; }
   .announce { color: #FFFFFF; background-color: #C63444; font-weight: 400; }
   a .announce { color: #FFFFFF; background-color: #44264D; }
   a:hover .announce { color: #FFFFFF; background-color: #D2A359; }
   
   /* artist block */
   
   .artists { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 20px -20px; }
   .artists .artist { width: 240px; padding: 20px; text-align: center; }
   .artists .artist img { width: 100%; height: auto; display: block; border-radius: 50%; margin-bottom: 10px; }
   .artists a.artist { text-decoration: none; font-weight: 600; font-size: 110%; }
   .artists .artist .date { font-size: 12px; font-weight: 400; letter-spacing: 0px; line-height: 1.2; }
   .artists h5 { width: calc(100% - 40px); margin: 20px; }
   .artist .date .part, .artist .date.part { color: #000000; font-weight: 700; }
   
   /* alumni list */
   
   ul.alumni-list, ul.alumni-list li { list-style-type: none; margin-left: 0; padding: 0; }
   ul.alumni-list li { list-style-type: none; margin: 0; padding: 0; }
   ul.alumni-list li a { font-weight: 700; }
   
   /* mobile navigation */
   
   #mobilemenu 
   { 
      position: fixed; top: 0; right: 0; left: 0; z-index: 99; overflow: scroll; height: 0px; opacity: 0; transition-duration: 0.3s;  
      background-color: #44264D;
   }
   #mobilemenu.active { height: 100vh; opacity: 1; }
   #mobilemenu a { color: #FFFFFF; display: block; font-size: 20px; line-height: 20px; padding: 10px 25px 10px 0; font-weight: 300; text-decoration: none; }
   #mobile-menu { list-style-type: none; margin: 0px; padding: 80px 0px 0px 0px; color: #FFFFFF; }
   #mobile-menu > li { border-bottom: 1px solid rgba(255,255,255,0.33); padding-right: 50px; }
   #mobile-menu > li.menu-item-has-children { background: transparent url('images/icon-down.svg') right 7px no-repeat; background-size: 12px auto; }
   #mobile-menu > li.menu-item-has-children.expanded { background-image: url('images/icon-up.svg'); }
   #mobile-menu > li > ul { display: none; }   
   #mobile-menu > li.expanded > ul { display: block; list-style-type: disc; margin-bottom: 15px; }
   #mobile-menu > li > ul > li a { font-size: 15px; line-height: 19px; padding: 7px 0px; }
   
   /* search modal */
   
   #searchmodal
   { 
      position: fixed; top: 0; right: 0; left: 0; z-index: 500; overflow: hidden; height: 0px; opacity: 0; transition-duration: 0.3s;  
      background-color: rgba(255,255,255,0.97);
   }
   #searchmodal.active { height: 100vh; opacity: 1; overflow: auto; }
   #searchmodal .content { padding: 35px; }
   #searchmodal .closebtn 
   { 
      width: 50px; height: 48px; background: transparent url('images/icon-close.svg') center center no-repeat; background-size: contain; cursor: pointer; 
      opacity: 0.5;
   }
   #searchmodal .closebtn:hover { opacity: 1; }
   #searchmodal form { white-space: nowrap; display: flex; align-items: flex-end; }
   #searchmodal input
   {
      font-size: 48px; line-height: 48px; background-color: transparent; border: none;
      -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0px;
   }
   #searchmodal input:focus { outline: none; }
   #searchmodal input#s 
   { 
      width: calc(100% - 60px); border-bottom: 1px solid #666666; color: #000000; margin-right: 10px; 
      font-weight: 300;
   }
   #searchmodal.active::after 
   { 
      position: fixed; left: 0px; bottom: 0px; right: 0px; height: 100px; z-index: 501;
      content: " "; display: block; background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
   }
   #autoresults .tiles { margin-top: 40px; }
   #autoresults h3 { margin-bottom: 20px; }
   .searchresult { margin-bottom: 1em; }
   .tiles .tile .searchresult a .img { display: block; margin-bottom: 0.5em; }
   .searchresult .excerpt { color: #777777; font-size: 90%; line-height: 125%; }
   .searchresult a { display: block; line-height: 1.2; margin-bottom: 0.25em; }
   #autoresults .date { font-size: 90%; }
   
   #autoresults .artists a.artist { display: flex; flex-wrap: nowrap; align-items: center; width: auto; text-align: left; line-height: 115%; }
   #autoresults .artists a.artist img { width: 75px; height: 75px; border-radius: 50%; margin: 0px 10px 0px 0px; }
   #autoresults .artists a.artist .date { font-size: 80%; line-height: 125%; }
   
   /* tables */
   
   figure.wp-block-table { margin: 1.5em 0; padding: 0; }
   figure.wp-block-table table { width: auto; }
   figure.wp-block-table td, .wp-block-table th { padding: 3px 18px 3px 3px; text-align: left; }
   figure.wp-block-table td:last-child, .wp-block-table th:last-child { padding-right: 3px; }
   figure.wp-block-table th { border-bottom: 1px solid #000000; }
   figure.wp-block-table td { border-bottom: 1px solid #CCCCCC; }
   
   
   /* calendar grid */
   
   .calendar-controls { float: right; margin: 0px 0px 20px 20px; }
   .calendar-controls a, .calendar-controls span 
   { 
      display: inline-block; width: 40px; height: 40px; margin-left: 5px; border-radius: 50%; background-color: #693A77;
      background-position: center center; background-repeat: no-repeat; background-size: 50% auto;
   }
   .calendar-controls .view-list { background-image: url('images/icon-list.svg'); }
   .calendar-controls .view-grid { background-image: url('images/icon-calendar.svg'); }
   .calendar-controls a:hover { background-color: #D2A359; }
   .calendar-controls span.current { background-color: #000000; }
   .calendar-container { margin: 0px -20px; }
   table.calendar-month { border-spacing: 20px; border-collapse: separate; width: 100%; }
   table.calendar-month th { font: 700 18px/18px 'lars', sans-serif; text-align: left; padding: 0px; }
   table.calendar-month td 
   { 
      padding: 20px 0px 20px 0px; border-top: 1px solid #000000; width: 14.286%; color: #000000;
      font-size: 16px; line-height: 20px; vertical-align: top;
   }
   table.calendar-month td h3 { font-weight: 400; font-size: 20px; line-height: 20px; color: inherit; margin-bottom: 8px; }
   table.calendar-month td.empty { color: #999999; border-color: #CCCCCC; }
   table.calendar-month td.blank { border-color: transparent; }
   table.calendar-month tbody tr:first-child td.empty, table.calendar-month tbody tr:first-child td.blank { border-color: #000000; }
   table.calendar-month td.today { border-top: 3px solid #D2A359; padding-top: 18px; }
   table.calendar-month td.today h3 { color: #D2A359; font-weight: 700; }
   table.calendar-month td a { display: block; font-weight: 400; margin-bottom: 10px; }
   table.calendar-month td a:last-child { margin-bottom: 0px; }
   table.calendar-month td img { display: block; width: 100%; height: auto; margin: 6px 0px; }
   table.calendar-month td .time { color: #D2A359; display: block; text-transform: uppercase; font-weight: 700; font-size: 75%; }
   table.calendar-month td .img
   { 
      display: block; width: 100%; height: 0; padding-top: 57%; position: relative; background-position: center center; 
      background-size: cover; background-repeat: no-repeat; margin: 0 0 6px 0;
   }
   
   
   /* wp gallery */
   
   .wp-block-gallery .blocks-gallery-item__caption, .wp-block-gallery .blocks-gallery-item__caption a 
   { 
      text-align: left !important; color: #FFFFFF; text-decoration: none; font-weight: 400 !important; font-size: 110%;
   }
   
   /* lists */

   ul.loose li { margin-bottom: 5px; }
   ul.roles a { font-weight: 400; }
   ul.post-list a { font-weight: 400; }
   
   /* video */
   
   .video-container { overflow: hidden; height: 0; padding-bottom: 56.25%; position: relative; margin-bottom: 30px; }
   .video-container iframe { position:absolute; left: 0; top: 0; height: 100%; width: 100%; }
   
   /* home page */
   
   body.home .profiles h2 { margin: 10px 0px; }
   body.home .profiles h6 { margin: 0px; }
   body.home .resident img { max-width: 200px; }
   body.home ul.post-list { list-style-type: none; margin: 1em 0; padding: 0; }
   body.home ul.post-list li { margin: 0 0 0.5em 0; padding: 0; }
   body.home .no-home { display: none; }
   
   /* social media sidebar */
   
   .social-bar { position: fixed; left: 0px; bottom: 0px; z-index: 500; }
   .social-bar .social-icon, .social-bar .close-icon 
   { 
      display: block; width: 36px; height: 36px; background-position: center center; background-repeat: no-repeat;
      background-size: auto 60%; cursor: pointer;
   }
   .social-icon.facebook { background-image: url('images/icon-facebook.svg'); background-color: #3d5b97; }
   .social-icon.instagram { background-image: url('images/icon-instagram.svg'); background-color: #b54189; }
   .social-icon.twitter { background-image: url('images/icon-twitter.svg'); background-color: #2eaadf; }
   .social-bar .close-icon { background-image: url('images/icon-close-reversed.svg'); background-color: #CC0000; display: none; }
   .social-bar .close-icon.active { display: block; }
   #social-sidebar 
   { 
      position: fixed; z-index: 490; top: 0px; left: 0px; bottom: 0px; width: 380px; overflow: hidden; display: none; opacity: 0; transition: opacity .5s ease-in-out; 
      background-color: #FFFFFF; padding-left: 36px;
   }
   #social-sidebar.active { display: block; opacity: 1; transition: opacity .5s ease-in-out; }
   #social-sidebar iframe { width: 100%; height: 100%; }
   
   /* wpforms fixes */
   
   div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button
   {
      color: #FFFFFF !important; border: 0 !important; background-color: #693A77 !important;
   }
   
   /* large desktop */
   
   @media screen and (min-width: 1600px)
   {
      body { font-size: 0.9vw; }
      body.home { background-color: #FFFFFF; }
      body.home .messaging .col:first-child { width: 66.667%; }
      body.home .messaging .col:last-child { width: 33.333%; }
      
      body.home #ava { width: 250px; height: 250px; background-position: center 60px; }
      body.home #ava.contracted { height: 110px; width: 160px; background-position: center 48px; }
      
      body.home .col.resident { padding-right: 50px; padding-bottom: 60px; }
      body.home .col.double.alumni-profile { width: 33.333%; order: 2; border-left: 1px solid #999999; padding-left: 50px; }
      body.home .col.has-disc { order: 3; }
      body.home .col.has-disc img.disc { width: 80%; height: auto; margin: 0 auto; }
      body.home .zone.outreach 
      { 
         background-position: -30px center; background-size: 66.667% auto; background-color: #f0ebf1;
         padding-top: 0px; padding-bottom: 0px; 
      }
      body.home .zone.outreach .columns { justify-content: space-between; margin-bottom: 0px; }
      body.home .zone.outreach .columns .col { width: 33.333%; padding-bottom: 50px; }
      body.home .zone.news { display: none; }
      
      body.home .hero h2 { font-size: 250%; }
      
      .content.frame.no-home { padding-right: calc(100vw - 1500px); }
      
      .columnar { columns: 3; }
   
   }
   @media screen and (max-width: 1599px)
   {
      body.home .col.resident, body.home .col.sidenews { display: none; }
   }
   
   /* standard desktop + tablet landscape */
   
   @media screen and (min-width: 1101px)
   {
      .mobileonly { display: none !important; } 
   }
   
   @media screen and (max-width: 1100px)
   {
      .nomobile { display: none !important; } 
      body { padding-top: 54px; }
      .frame, body.home .frame { padding-left: 40px; padding-right: 40px; }
      
      #hd, #ava, #ava.contracted { height: 54px; }
      #ava, #ava.contracted { border-bottom: 0px; top: 0px; width: 80px; background: #000000 url('images/ava-mobile.svg') center center no-repeat; background-size: 90% auto; }
      #hd li.menu-item { display: none; }
      blockquote.has-image { padding-left: 160px; }
      blockquote img { left: 0px; }
      .slogan, .announce { text-align: center; }
   }
   
   
   /* tablet portrait (avg 768) */
   
   @media screen and (max-width: 900px)
   {
      .frame, body.home .frame { padding-left: 40px; padding-right: 40px; }

      .columns { flex-wrap: wrap; }
      .twocol .col { width: 100%; }
      .threecol .col { width: 50%; }
      .threecol .col.double { width: 100%; }
      
      .tiles .tile { width: 50%; }
      body.home .tile:nth-child(3) { display: none; }
   
      .zone.frame.outreach { display: block; }
      .zone.outreach { background: #090808 url('images/bg-outreach.jpg') right top no-repeat; background-size: 200% auto; padding-top: 77vw; }
      .zone.outreach .col { width: 100%; }
      
      
      .container { flex-wrap: wrap; }
      .container .primary { width: 100%; padding-right: 0px; }
      .container .secondary { width: 100%; padding-left: 0px; }
      body.single-artist .container .primary { order: 2; }
      body.single-artist .container .secondary { order: 1; margin-bottom: 20px; }
      
      #searchmodal input#s { width: calc(100% - 40px); }
      
      #searchmodal .closebtn  { width: 30px; height: 32px; }
      #searchmodal input { font-size: 32px; line-height: 32px; }
      
      .columnar { columns: 1; }
   }
   
   
   
   /* phone (avg 360) */
   
   @media screen and (max-width: 600px)
   {
      h2 { font-size: 150%; }
      h3 { font-size: 125%; }
      h4 { font-size: 110%; }
      .hero .caption { padding-top: 60px; padding-bottom: 30px; }
      .hero .date { display: none; }
      blockquote.has-image { padding-left: 0px; padding-top: 160px; }
      .tiles .tile { width: 100%; margin-bottom: 40px; }
      .slogan, .announce { letter-spacing: 0; }
      .slide .caption .date { font-size: 100%; }
      img.alignright { float: none; margin-left: 0; width: 100%; }
            
   }  
   
   /* wp admin bar */
   
   body.admin-bar #hd, body.admin-bar #mobilemenu, body.admin-bar #searchmodal { top: 32px; }
   body.admin-bar #ava { top: 21px; }
   @media screen and (max-width: 782px) { body.admin-bar #ava, body.admin-bar #hd, body.admin-bar #mobilemenu, body.admin-bar #searchmodal { top: 46px; } }
   @media screen and (max-width: 600px)  { body.admin-bar #ava, body.admin-bar #hd, body.admin-bar #mobilemenu, body.admin-bar #searchmodal { top: 0px; } }
   
   /* print */

   @media print
   {

   }