/* fonts */
   
   @import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,700,700i');
   @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');
   
   /* colour scheme */
   
   :root  { --link: #00B0B5; --hover: #E32C22; --hot: #E32C22; --warm: #F47E2D; } 
   .light { color: #888888; }
   
   /* resets */
   
   * 
   { 
      box-sizing: border-box; border: none; outline: none; text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; 
   }
   html { height: 100%; -webkit-text-size-adjust: 100%; }
   body { margin: 0px; padding: 0px; }
   *:before, *:after { box-sizing: inherit; }
   table { border: 0; padding: 0; border-spacing: 0px; border-collapse: collapse; }   
   body.modal-open { overflow: hidden; } 
   sup, sub { vertical-align: baseline; position: relative; top: -0.4em; }
   sub { top: 0.4em; }
   
   /* type */
   
   body, input, textarea, select { font: 400 16px/25px 'Montserrat', sans-serif; }
   b { font-weight: 700; }
   p, h2, h3, h4, h5 { margin: 20px 0px; padding: 0px; }
   h2 { font: 400 36px/42px 'Montserrat', sans-serif; }
   h3 { font: 700 24px/30px 'Montserrat', sans-serif; }
   h4 { font: 500 20px/24px 'Montserrat', sans-serif; }
   h5 { font: 700 16px/20px 'Roboto Condensed', sans-serif; color: #E32C22; text-transform: uppercase; letter-spacing: 2px; }
   .masthead h5 { margin-bottom: 0px; }
   .date { font: 700 16px/20px 'Roboto Condensed', sans-serif; color: #000000; }
   .location { font: 500 13px/18px 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 1px; }
   dd { padding: 0px; margin: 20px 0px 20px 40px; }
   small, .small { font-size: 85%; line-height: 100%; }
   .placeholder { padding-bottom: 400px; }
   ul.loose li { margin-bottom: 10px; }
   blockquote { margin: 30px 0px; font-size: 24px; line-height: 30px; font-style: italic; }
   blockquote .attrib { font-size: 18px; line-height: 22px; font-style: normal; margin: 20px 0px 0px 0px; text-align: right; }
   blockquote .attrib::before { content: "\02014"; display: inline-block; margin-right: 10px; }
   blockquote::before, blockquote::after 
   { 
      display: block; text-align: center; font-weight: 700; opacity: 0.3; font-size: 60px;
      
   }
   blockquote::before { content: "\0201C"; padding: 10px 0px; }
   blockquote::after { content: "\0201D"; padding: 30px 0px 10px 0px; }
   .figure 
   { 
      margin: 30px 0px; padding: 30px 0px; color: #666666; border-top: 1px solid #999999; border-bottom: 1px solid #999999; 
      font-size: 90%;
   }
   .figure.right { width: 50%; float: right; margin-left: 30px; margin-top: 0px; }
   .figure img { width: 100%; height: auto; display: block; margin: 0px 0px 12px 0px; }
   .figure table { margin: 0px -10px 12px -10px; border-spacing: collapse; }
   .figure td { padding: 10px; }
   .figure td img { margin: 0px; }
   
   .portrait { width: 100%; height: auto; border-radius: 50%; margin: 20px 0px 10px 0px; }
   
   /* links */
   
   a { color: var(--link); text-decoration: none; }
   a:hover { color: var(--hover); }
   h5.section-banner a { margin-left: -20px; }
   h5.section-banner a::before 
   { 
      display: inline-block; color: #FFFFFF; width: 20px; text-align: center; content: "\0003C"; 
      position: relative; top: -1px;
   }
   
   /* structure */
   
   body { color: #000000; background-color: #FFFFFF; }
   body.reversed { color: #FFFFFF; background-color: #000000; }

   body#intro
   {
      background: #CFCBC6 url('images/bg/bg-intro.jpg') center center no-repeat; 
      background-size: cover; background-attachment: fixed;
   }
   body#intro #nav { background: linear-gradient(to bottom, rgba(219,216,211,1), rgba(219,216,211,0.8) 60%, rgba(219,216,211,0) 100%); }
   body#intro-map #container { margin-right: 40px; }
   body#observing
   { 
      background: #000000 url('images/performances/bg.jpg') center center no-repeat; 
      background-size: cover; background-attachment: fixed;
   }
   body#observing-solo-forest
   { 
      background: #000000 url('images/bg/bg-solo.jpg') center center no-repeat; 
      background-size: cover; background-attachment: fixed;
   }

   body#participating
   { 
      background: #3A2517 url('images/bg/bg-participating.jpg') center center no-repeat; 
      background-size: cover; background-attachment: fixed;
   }
   body#participating #nav { background: linear-gradient(to bottom, rgba(50,32,20,1), rgba(50,32,20,0.8) 60%, rgba(50,32,20,0) 100%); }
   body#reflecting
   { 
      background: #000000 url('images/bg/bg-reflecting.jpg') right center no-repeat; 
      background-size: cover; background-attachment: fixed;
   }   
   body#reflecting-giguere 
   { 
      background: #FFFFFF url('images/essays/giguere-bg2.jpg') center bottom no-repeat; 
      background-size: 100% auto; background-attachment: fixed;
   }
   body#reflecting-charmatz 
   { 
      background: #FFFFFF url('images/bg/bg-reflecting-charmatz.jpg') center bottom no-repeat; 
      background-size: 100% auto; background-attachment: fixed;
   }
   body#reflecting-hussie-taylor
   { 
      background: #EFEFEF url('images/bg/bg-hussie-taylor.jpg') right bottom no-repeat; 
      background-size: 80% auto; background-attachment: fixed;
   }
   body#reflecting-hussie-taylor #nav 
   { 
      background: linear-gradient(to bottom, rgba(239,239,239,1), rgba(239,239,239,0.8) 60%, rgba(239,239,239,0) 100%); 
   }
   body#reflecting-kang
   { 
      background: #FFFFFF url('images/bg/bg-kang.jpg') left center no-repeat; 
      background-size: cover; background-attachment: fixed;
   }
   

   #container { margin: 160px 120px 120px 240px; }
   #container.twocolumn { margin: 160px 120px 120px 240px; }
   .masthead { margin-right: 280px; }
   #container.twocolumn .masthead, .onecolumn .masthead { margin-right: 0px; }
   .content { display: flex; align-items: flex-start; width: 100%; }
   .content a { font-weight: 700; }
   .primary { flex-basis: 90%; flex-shrink: 1; flex-grow: 1; }
   .secondary { flex-basis: 200px; flex-grow: 0; flex-shrink: 0; margin-left: 80px; }
   
   .hasnote { position: relative; cursor: pointer; }
   .hasnote:hover { border-bottom: 1px dotted #666666; }
   .tooltip 
   { 
      position: absolute; left: 0px; background-color: #DEDEDE; padding: 10px; opacity: 0; 
      transition: opacity 0.2s ease-in-out; height: 0; width: 0;
   }
   .hasnote:hover .tooltip { z-index: 20; opacity: 1; height: auto; }
   .hasnote sup 
   { 
      color: #FFFFFF; background-color: #AAAAAA; display: inline-block; width: 16px; height: 16px; border-radius: 8px;
      text-align: center; top: -0.2em; font-size: 11px; line-height: 16px; margin: 0px 3px 0px 0px;
   }
   .hasnote .tooltip sup { display: none; }
   .footnotes, .footnotes sup { display: none; }

   .embed { padding: 56.25% 0 0 0; position: relative; }
   .embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }      
   video { width: 100%; height: auto; margin: 20px 0px; } 

   #pmd 
   { 
      background: transparent url('images/pmd-cpa.svg') center center no-repeat; z-index: 200; 
      position: fixed; top: 0px; left: 0px; width: 240px; height: 210px; background-size: 160px auto;
   }
   
   /* navigation bar */
   
   #nav 
   {
      position: fixed; top: 0px; left: 0px; right: 0px; z-index: 100; padding: 10px 10px 90px 240px;
      background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0.8) 70%, rgba(255,255,255,0) 100%);
   }
   body.reversed #nav { background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.8) 60%, transparent 100%); }
   #nav ul { list-style-type: none; margin: 0px 0px 0px -10px; padding: 0px; }
   #nav ul li { padding: 10px; margin: 0px 10px 0px 0px; text-transform: uppercase; float: left; }
   #nav ul li a { color: #999999; font-weight: 400; }
   #nav ul li.current a { color: #000000; font-weight: 700; }
   body.reversed #nav ul li.current a { color: #FFFFFF; }
   #nav ul li a:hover, body.reversed #nav ul li a:hover { color: var(--hot); }
   
   /* mobile */
   
   #mobilenav 
   { 
      display: none; width: 50px; height: 50px; background: transparent url('images/bars.svg') center center no-repeat; 
      background-size: 30px auto; cursor: pointer; float: right;
   }
   #mobilenav.active { background-image: url('images/times.svg'); }
   
   /* tiles */
   
   .tiles { display: flex; flex-wrap: wrap; margin: 40px -80px 0px 0px; }
   .tiles.credits { align-items: center; }
   .tiles.portraits { max-width: 670px; }
   .tile
   { 
      flex-basis: 33.3333%; padding: 0px 80px 60px 0px; color: inherit; margin-top: 30px; opacity: 0;
      transition: all 0.4s ease-out; transition-property: opacity, margin;
      font-size: 95%; line-height: 125%;
   }
   .tiles.portraits .tile { flex-basis: 50%; }
   .tiles.credits .tile { opacity: 1; margin-top: 0; }
   .tile img { width: 100%; height: auto; display: block; margin: 0px 0px 8px 0px; }
   .tile.active { margin-top: 0px; opacity: 1; }
   .thumb { cursor: pointer; }
   
   /* modals and controls */
   
   .cornercontrol { position: fixed; bottom: 0px; right: 0px; width: 120px; height: 120px; z-index: 500; cursor: pointer; opacity: 0.6; }
   .cornercontrol:hover { opacity: 1; }
   #photoview { background: transparent url('images/camera-retro.svg') center center no-repeat; background-size: 40px auto; }
   #modalclose { background: transparent url('images/times.svg') center center no-repeat; background-size: 40px auto; display: none;  }
   .modal 
   { 
      position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 200; 
      background-color: rgba(0,0,0,0.95); color: #FFFFFF; display: none; 
   }
   #modal-photo.open { display: flex; flex-direction: column; }
   .modal .caption { flex-basis: 160px; flex-shrink: 0; padding: 20px 120px 20px 120px; text-align: center; }
   .modal .image 
   { 
      flex-grow: 1; flex-shrink: 1; margin: 20px; background-size: contain; background-position: center center;
      background-repeat: no-repeat;
   }
   
   .newmode 
   { 
      position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.95); color: #FFFFFF; padding: 120px 0px; 
      display: none; z-index: 200;
   }
   .slider, .slider .slide { width: 100%; height: 100%; }
   .slidebox { display: flex; flex-direction: column; width: 100%; height: 100%; }
   .slidebox .img 
   { 
      flex-basis: 90%; flex-grow: 1; flex-shrink: 1; background-position: center center;
      background-size: contain; background-repeat: no-repeat;
   }
   .slidebox .legend { flex-basis: 10%; flex-grow: 1; flex-shrink: 1; padding: 10px; text-align: center; }

   /* expanding list */
   
   dl.expanding { border-bottom: 1px solid #000000; }
   dl.expanding dt 
   { 
      padding: 10px 0px; margin: 0px; border-top: 1px solid #000000; font: 500 20px/24px 'Montserrat', sans-serif; 
      cursor: pointer; color: var(--link); transition: all 0.4s ease-out; transition-property: padding;
      position: relative;
   }
   dl.expanding dt:hover { color: var(--hover); }
   dl.expanding dt::after { position: absolute; top: 10px; right: 0px; color: #999999; content: "+"; }
   dl.expanding dt.open { color: #000000; padding-top: 20px; }
   dl.expanding dt.open::after { content: "-"; }
   dl.expanding dd { display: none; padding: 0px 0px 10px 0px; margin: 0px; }
   
   /* schedule */
   
   table.schedule tr:first-child td { border-top: 1px solid #CCCCCC; }
   table.schedule td { padding: 9px 15px 9px 0px; border-bottom: 1px solid #CCCCCC; }
   table.schedule td:first-child { white-space: nowrap; }
   table.schedule td:last-child { padding-right: 0px; }
   
   /* video player */
   
   .playbtn 
   { 
      display: inline-block; width: 30px; height: 20px; opacity: 0.5; position: relative; top: 2px; cursor: pointer;
      background: transparent url('images/play-circle.svg') left center no-repeat; background-size: contain;
   }
   .playbtn.active { opacity: 1; background-image: url('images/pause-circle.svg'); }
   
   /* event map */
   
   #map { width: 100%; margin: 0px; padding: 0px; position: relative; }
   #map img { width: 100%; height: auto; display: block; }   

   .key { margin: 30px 0px; padding: 30px 0px; border-top: 1px solid #999999; border-bottom: 1px solid #999999; line-height: 30px; }
   .map-key 
   { 
      display: inline-block; padding-left: 22px; background-position: left 45%;
      background-repeat: no-repeat; background-size: 14px auto; margin-right: 20px; 
      white-space: nowrap;
   }
   .map-point
   {
      position: absolute; margin-left: -10px; margin-top: -10px; width: 21px; height: 21px;
      background-size: 17px auto; background-position: center center; background-repeat: no-repeat; 
      border-radius: 50%; cursor: pointer; display: block;
   }
   .map-point:hover { background-color: #F47E2D; }
   .map-danse { background-image: url('images/icons/danse.svg'); }
   .map-meet { background-image: url('images/icons/meet.svg'); }
   .map-palace { background-image: url('images/icons/palace.svg'); }
   .map-1973 { background-image: url('images/icons/1973.svg'); }
   .map-showtime { background-image: url('images/icons/showtime.svg'); }
   .map-solo-forest { background-image: url('images/icons/solo-forest.svg'); }
   .map-something { background-image: url('images/icons/something.svg'); }
   .map-soul-train { background-image: url('images/icons/soul-train.svg'); }
   .map-staged { background-image: url('images/icons/staged.svg'); }
   .map-warm-up { background-image: url('images/icons/warm-up.svg'); }
   #map-infowindow
   {
      position: absolute; width: 200px; border: 2px solid #000000; background-color: #000000; 
      background-position: center top; background-size: cover; background-repeat: no-repeat; 
      display: none; 
   }
   #map-infowindow div 
   { 
      padding: 70px 5px 5px 5px; color: #FFFFFF; font-size: 13px; line-height: 15px;
      background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2) 50px, rgba(0,0,0,0.6) 100%); 
      position: relative;
   }
   #map-infowindow > div::after 
   {
      display: block; position: absolute; bottom: -10px; left: 90px; content: " ";
      overflow: hidden; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;
      border-top: 10px solid #000000;
   }
   
   /* scroll-to-top control */
   
   a#totop
   {  
      position: fixed; width: 100px; height: 100px; bottom: 0px; left: 50%; margin-left: -50px; margin-bottom: -55px; 
      z-index: 25; text-align: center; color: #FFFFFF; border-radius: 50px; display: none; z-index: 150; 
      background: var(--link) url('images/arrow-up.svg') center 10px no-repeat; background-size: 24px auto; 
   }
   a#totop:hover { color: #FFFFFF; background-color: var(--hover); }
 
   /* credit tiles */
   
   @media screen and (min-width: 1400px)
   {
      .tiles.portraits { max-width: 100%; }
      .tiles.credits .tile, .tiles.portraits .tile { flex-basis: 25%; }
      body#reflecting { background-position: right top; }
   }
   
   /* large desktop */
   
   @media screen and (min-width: 1800px)
   {
      .primary { columns: 2; column-gap: 80px; padding-top: 10px; }
      .primary p { page-break-inside: avoid; margin: 0px; padding: 10px 0px; }
      #pmd { width: 300px; }
      #container { margin-left: 300px; }
      #nav { padding-left: 300px; }
      .tile { flex-basis: 25%; }
      .tiles.credits .tile { flex-basis: 20%; }
      .embedframe { top: 300px; left: 300px; }
   }
   


   /* standard desktop + tablet landscape */
   
   @media screen and (max-width: 1200px)
   {
      .masthead { margin-right: 0px; }
      .secondary { flex-basis: 160px; margin-left: 60px; font-size: 90%; }
      .tiles { margin-right: -40px; }
      .tile { padding: 0px 40px 30px 0px; }
      
   }
   
   /* tablet portrait (avg 768) */
   
   @media screen and (max-width: 1000px)
   {
      .content { flex-wrap: wrap-reverse; }
      .primary, .secondary { flex-basis: 100%; }
      .secondary { margin-left: 0px; display: flex; align-items: center; }
      .portrait { height: 100px; width: 100px; margin: 0px 30px 0px 0px; }
      #pmd { width: 180px; background-size: 120px auto; }
      #container { margin-left: 180px; }
      #nav { padding-left: 180px; }
      #nav ul li { margin-right: 0px; padding-right: 5px; font-size: 14px; }
      .tile { flex-basis: 50%; }
      .embedframe { left: 180px; }
      h2 { font-size: 30px; line-height: 34px; }
      .map-point { background-size: 12px auto; }
   }
   
   /* phone (avg 360) */
   
   @media screen and (max-width: 700px)
   {
      #pmd { background-image: url('images/pmd.svg'); width: 60px; height: 160px; background-size: auto 60px; }
      #container { margin-left: 60px; margin-right: 40px; }
      #photoview { display: none; }
      .embedframe { left: 60px; }

      #nav { padding-left: 60px; }
      #nav ul { display: none; padding-top: 10px; padding-bottom: 1000px; }
      #nav ul li { float: none; display: block; font-size: 18px; margin-top: 0px; margin-bottom: 0px; }
      #mobilenav { display: inline-block; }

      .modal .caption { padding: 20px; }
         
      body, input, textarea, select { font-size: 14px; line-height: 24px; }
      
      .map-point { background-size: 10px auto; }
   }
   
   
   /* print */

   @media print
   {
      body { color: #000000; background-color: #FFFFFF; background-image: none; }
      body, input, textarea, select { font-size: 14px; line-height: 18px; }
      h2 { font-size: 30px; line-height: 34px; }
      h3 { font-size: 22px; line-height: 26px; }
      h4 { font-size: 18px; line-height: 24px; }
      #nav, #photoview, #modalclose, #pmd, video, .embed, .playbtn, a#totop { display: none; }
      #container { margin: 0px; }
      #container::before { color: #CCCCCC; margin: 0px 0px 20px 0px; display: block; content: "Philadelphia Museum of Dance"; }
      .hasnote sup, .footnotes sup { display: inline; color: #000000; }
      .footnotes { display: block; font-size: 90%; }
      dl.expanding dt::after { display: none; }
      dl.expanding dd { display: block; }
   }