@font-face { font-family: Chivo Mono; src: url('/chivomono.woff2'); font-display: swap; }
@font-face { font-family: Chivo Mono Italic; src: url('/chivomono-italic.woff2'); font-display: swap; }
@font-face { font-family: Prata; src: url('/prata.woff2'); font-display: swap; }
body { background-color: #f7f7f7; font-family: Chivo Mono; color: #2c2c2c; font-variant-ligatures: none;}
h1, h2, h3, h4, h5 { font-family: Prata; text-transform: uppercase; font-size:20pt; letter-spacing:.06em; font-weight:100; }

body sidebar { width: 400px; display:block; font-size:10pt; padding-top:136px;}
body sidebar h1 { margin-bottom: 50px; }
body sidebar ul { padding: 0; line-height:13pt; }
body sidebar li { list-style-type:none; margin-bottom:20px;}
body sidebar li span { font-weight:600; display:block;}
body sidebar li a { font-weight:300; display:inline-block; text-decoration: none; color: #88c5be}
body article img { width:100%; height:auto; }

.hero-divider {
  position: relative;
  left: 50%;
  width: 101%;
  text-align: center;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%); 
  z-index: 9;
}

.top-divider { 
  top:0;
  transform: translateX(-50%) scaleY(-1);
  -webkit-transform: translateX(-50%) scaleY(-1);
  -moz-transform: translateX(-50%) scaleY(-1);
  -o-transform: translateX(-50%) scaleY(-1);
  -ms-transform: translateX(-50%) scaleY(-1);
}
.bottom-divider {
    bottom: 203px;
}

.hero {
  position: relative;
  top:-100px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 2;
}

.hero picture {
    height:500px;
    overflow:hidden;
}

#divider-tilt-left path { fill: #f7f7f7; }
#divider-tilt-right path { fill: #f7f7f7}

footer { width:1100px; font-family:Chivo Mono Italic; display:block; margin:auto; font-size:8pt; color:#808080;}

@media only screen and (min-width:990px) {
    main { display: flex; justify-content: center; padding-top:50px;}
    main article { max-width: 700px; }
}

@media only screen and (max-width:990px) {
    main { justify-content: none; padding-top:none; display:block;}
    main sidebar { width: 100%; }
    main article { padding-top:25px;}
    main sidebar { padding-top:50px;}
}