@font-face {font-family: basic-bold;    src: url('fonts/pfdindisplaypro-bold-webfont.eot');  font-weight: normal;  font-style: normal;}
@font-face {font-family: basic-regular; src: url('fonts/pfdindisplaypro-reg-webfont.eot'); }
@font-face {font-family: Hbasic-bold;   src: url('fonts/pfdintextcomppro-bold-webfont.eot'); font-weight: normal;  font-style: normal;}
@font-face {font-family: Hbasic-regular;src: url('fonts/pfdintextcomppro-regular-webfont.eot'); }

@font-face {font-family: basic-bold;    src: url('fonts/pfdindisplaypro-bold-webfont.ttf');    font-weight: normal;  font-style: normal; }
@font-face {font-family: basic-regular; src: url('fonts/pfdindisplaypro-reg-webfont.ttf'); }
@font-face {font-family: Hbasic-bold;   src: url('fonts/pfdintextcomppro-bold-webfont.ttf');   font-weight: normal;  font-style: normal; }
@font-face {font-family: Hbasic-regular;src: url('fonts/pfdintextcomppro-regular-webfont.ttf');}

/**********************************************************/
body
{
 font-family: basic-regular, Arial, sans-serif;
}


.blockdivider
{
 height: 3rem;
/* background-color: rgba(0, 0, 0, .1);
 border: solid rgba(0, 0, 0, .15);     */
 border-width: 1px 0;
 /*box-shadow: inset 0 0.5em 1.5em rgb(0 0 0 / 10%), inset 0 0.125em 0.5em rgb(0 0 0 / 15%);*/
}


.blockdividershadow
{
 margin: 0 0 3rem 0;
 padding: 3rem;
 background-color: #000000;
 color: #ffffff;
 border: solid rgba(0, 0, 0, .15);     */
 border-width: 1px 0;
 box-shadow: inset 0 0.5em 1.5em rgb(0 0 0 / 10%), inset 0 0.125em 0.5em rgb(0 0 0 / 15%);
}


.header
{
 margin: 0;
 display: grid;
 grid-gap: 8px;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: auto;
 align-items: stretch;
 padding-top: 2rem;
 padding-bottom: 2rem;
 border-bottom: 1px solid #000000;
 background-color: #ececec;
}

.header .vh-right
{
 display: flex;
 height: 100%;
 align-items: center;
 justify-content: right;
}

.header .vh-center
{
 display: flex;
 height: 100%;
 align-items: center;
 justify-content: center;
}

.header .vh-left
{
 display: flex;
 height: 100%;
 align-items: center;
 justify-content: left;
}

.header h1
{
 font-size: 200%;
 font-family: Hbasic-regular;
}

.header table
 {
  border-spacing:0;
  border-collapse: collapse;
 }

.header table td {font-family: Hbasic-regular;}
.header table td:nth-child(1) {font-family: Hbasic-bold; text-align:right;padding-right: 1rem;}


.section
{
  display: grid;   
  grid-column-gap: .5rem;
  grid-template-rows: 100%;
  height:100%;
  min-height: 20rem;
  margin-bottom: 3rem; 
}

.section:nth-child(odd)
{
  grid-template-columns: 10rem auto 20rem;
  grid-template-areas: "year info image";
}

.section:nth-child(even)
{
  grid-template-columns: 20rem auto 10rem;
  grid-template-areas: "image info year";
}

.section .yearblock
{
 grid-area:year;
 background-color: #ececec;
 position: relative;
}

.section .yearblock span
{
 text-shadow: -1px -1px 0 #cecece, 1px -1px 0 #cecece, -1px 1px 0 #cecece, 1px 1px 0 #cecece;
 transform: rotate(-90deg);
 left: -1rem;
 top: 1rem;
 position: absolute;
 color: #FFF;
 text-transform: uppercase;
 font-size: 5rem;
 font-weight: bold;
 font-family: Hbasic-regular;
}

.section .infoblock
{
 grid-area: info;
 font-family: basic-regular;
 padding: 1.5rem 3rem;
 font-size: 150%;
}

.section .infoblock h3
{
 font-family: Hbasic-regular;
 font-size: 150%; 
}

.section .infoblock h4
{
 font-family: Hbasic-regular;
 font-size: 120%; 
}


.section .imageblock
{
 grid-area:image;
}

@media(max-width: 1000px)
{
 .header {display: block;}
 .header img {width:50%;margin: 1rem 0;}

 .section {display: block;height:auto;min-height:0;}

 .section .yearblock {display:block;text-align: center;}

 .section .yearblock span
 {
  display: inline-block;
  text-shadow: -1px -1px 0 #cecece, 1px -1px 0 #cecece, -1px 1px 0 #cecece, 1px 1px 0 #cecece;
  transform: none;
  left: auto;
  top: auto;
  position: relative;
  color: #FFF;
  text-transform: uppercase;
  font-size: 5rem;
  font-weight: bold;
  font-family: Hbasic-regular;
 }

 .section .infoblock
 {
  display: block;
  padding: 1.5rem;
  font-size: 150%;
 }


 .section .imageblock
 {
  display:block;
  text-align: center;
 }

 .section .imageblock img
 {
  max-width: 50%;
 }

}