/* basic theme */

html {
  color:#28241F;
  background-color: #FAF4F1;
  font-size: 14px;
  font-family: 'Overpass', sans-serif;
  margin: 40px 30px;
}

h1, h2 {
  font-weight: 400;
  font-family: 'Vollkorn', serif;
}
h1 {
  font-size: 28px;
  line-height: 120%;
  margin: 0;
}
h2 {
  font-size: 19px;
  font-style: italic;
  color:#888;
  margin-top: 0;
}
p {
  margin-top: 10px;
  margin-bottom: 30px;
}
a {
  color: #000;
}

/* grid */

.row .row { margin:  0 -1.5em; }
.col      { padding: 0  1.5em; }

.row:after {
    content: "";
    clear: both;
    display: table;
}

@media only screen { .col {
    float: left;
    width: 100%;
    box-sizing: border-box;
}}

/* components */
.header {
  margin-bottom: 50px;
}
.header-info {
  color:#888;
  font-family: 'Vollkorn', serif;
}
.vis-legend {
  margin-bottom: 40px;
}

@media only screen and (min-width: 30em) {
  .stage {
    display:table;
  }
  .stage > * {
    display:table-cell;
    vertical-align:top;
    table-layout: fixed;
    float:none;
  }
  .vis-legend {
    width:240px;
  }

}

@media only screen and (min-width: 50em) {
  .header {
    display:table;
  }
  .header > * {
    display:table-cell;
    vertical-align:top;
    table-layout: fixed;
    float:none;
  }
  .header-title { width: 50.00%; }
  .header-info { width: 50.00%; }
}

@media only screen and (min-width: 70em) {
  .header-title {
    width:550px;
  }
  .header-info {
    width:650px;
  }
}


.lang-bg {
    pointer-events: all;
}
.lang-bg-page {
  stroke:#ccc ;
  stroke-width:1;
  fill:#fff;
}

.lang-bg-text, .lang-bg-text-dates, .lang-bg-life, .lang-bg-line, .lang-img,  .lang-img-bg, .img-link, .lang-focus  {
  pointer-events: none;
}
.lang-bg-text {
  font-size: 14px;
}
.lang-bg-text-small {
  fill:#999;
  font-size: 12px;
}

.lang-bg-life {
  stroke:none;
  fill:#ECECE7;
}

.lang-bg-line {
  stroke:rgba(0,0,0,0.2);
  stroke-width:2;
  fill:none;
}

.lang-focus {
  stroke:#ddd;
  fill:none;
}

.lang-img-bg {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  -moz-opacity: 0.20;
  -khtml-opacity: 0.20;
  opacity: 0.20;
}

.lang-img {
  stroke:#000;
  stroke-width:1.5;
  fill:#fff;
}
.lang-img.is-no-owner {
  fill:#fff;
}
.lang-img.is-active {
  stroke-width:6px;
}

.image-overlay {
  pointer-events: none;
  position: absolute;
  z-index: 1000;
  top:0;
  left:0;
  line-height: 0;
  -webkit-box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.75);
  box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.75);
  padding: 4px;
  background: #fff;
}
.image-overlay img {
}

.img-link {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.50;
  -khtml-opacity: 0.50;
  opacity: 0.50;
  stroke-width:2;
}

.lang-t-painting {
  fill:#D74A31;
  stroke:#D74A31;
}
.lang-t-photography {
  fill:#2FA0CF;
  stroke:#2FA0CF;
}
.lang-t-drawing {
  fill:#D69832;
  stroke:#D69832;
}
.lang-t-letter {
  fill:#7DB85B;
  stroke:#7DB85B;
}
.lang-t-newspaper {
  fill:#33C7CC;
  stroke:#33C7CC;
}
.lang-t-etching {
  fill:#CBD632;
  stroke:#CBD632;
}
.lang-t-sketch {
  fill:#E0DE71;
  stroke:#E0DE71;
}
.lang-t-map {
  fill:#33CCA1;
  stroke:#33CCA1;
}
.lang-t-signature {
  fill:#9B4334;
  stroke:#9B4334;
}