/* article oriented pages like 704 big picture */

h2 {     /* temp override for bp articles (until other markup fixed) */
   font-size:220%;
   color:#D59480;
   margin-bottom:7%;
   font-weight:bold;
}

h3 {
   font-size:140%;
   color:#B3583C;
}

h4 {
   margin-top:4%;
   margin-bottom:-2%;
}

.linkarea {
   position:sticky; 
   background-color:#E9E3FF;  /* #E7EFCD */
   width:99%;
   padding:0 0 1% 0;
   margin:5% 0 3% 0;
}

.links {
   margin:0;
   padding:0 0 0.05% 2%;
}

.linkarea .sidehead {
   margin:0 0 1% 0;
   padding:1% 0 0 2%;
   font-weight:bold;
   font-size:108%;
   color:white;
   background-color:#583CB3;
}

.standout {
   font-size:90%;
   color:#583CB3;
   font-weight:500;
   background-color:#f6f4fb;
   border-top:1px solid #E9E3FF;
   padding:1px 2px; 
}

.fig {   /* image styling */
   width:40%;
   display:block;
   margin-left:auto;
   margin-right:auto;
   transition: width 0.5s;
}

.fig:hover {
   width:110%;
   box-shadow: -6px 6px 5px #888888;
   border:1px solid black;
   margin-bottom:2%;
   padding:3%;
   transform:translate(-8%,0);
   cursor:zoom-in;
}

.clickable {
   
}

.clickable:hover {
  box-shadow: 0 0 30px 2px rgba(0, 140, 186, 0.5);
  transition: box-shadow 3.0s;
  transition: width 0.8s;
  cursor:pointer;
}

.fig-caption {   /* obsolete, see <figure> env */
   text-align:justify;
   margin:2% 5%;
   font-size:85%;
   color:#B3583C;
   font-weight:500;
   line-height:1.5;
   
   word-wrap: break-word;
   overflow-wrap: break-word;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
}

.fig-label {
   text-align:center;
   text-transform: uppercase; 
   margin:auto;
   font-size:75%;
   color:#999;
}

.label-color1 {
   color:#999;
}

.label-color2 {
   color:#6FA0B9;
}

.keyword {
   font-weight:bolder;
}

figure {
    break-inside: avoid;
    margin:6% auto;

}

figcaption {
   text-align:justify;
   margin:auto 6%;
   font-size:85%;
   
   font-weight:500;
   line-height:1.45;

   
   word-wrap: break-word;
   overflow-wrap: break-word;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
}

figcaption, figcaption code {
   color:#B3583C;
}

figcaption code {
   font-weight: bold;
}
figcaption p {
   margin: 1% 0 0;
   
}


@media print {

   article.resp  {
      width: 80%;
   }
   
   header {
      text-align: center;
   }
   
   #intro {
      margin:2% 15% 0;
      text-align: left;
   }

 }
 
.side-art {
   line-height:1.2;
   margin-top: 4%;
   margin-bottom: 0;
}

.side-art2 {
   font-style:italic;
   font-weight:normal;
   display: block;
   font-size:90%;
}

.h4-art {
   margin-top:0;
   font-size:110%;
}

.art-intro, .art-intro + p {
   margin:10% 5% 10% 5%;
}

.art-intro + p {
   font-size:95%;
}

.art-intro + p + figure>figcaption {
   margin-left:10%;
   margin-right:10%;
   margin-bottom:10%;
   font-size:80%;
}