@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: local('Montserrat Italic'), local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUQjIg1_i6t8kCHKm459WxRyS7j.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_aZA3gnD-w.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459Wlhzg.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3gnD-w.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v8/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevT.ttf) format('truetype');
}
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
nav ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}
* {
  outline: 0;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
}
html,
body {
  height: 100%;
}
svg,
img {
  display: block;
}
img {
  max-width: 100%;
}
.woda-icons {
  height: 0;
  overflow: hidden;
}
.woda-container {
  height: 100%;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 60px auto 50px;
  grid-template-areas: "header header header header" "what overview detail action" "footer footer footer footer";
  overflow: hidden;
  transition: all 1s;
}
.woda-container__heading {
  grid-area: header;
  background-color: #05aef6;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 20px;
  padding: 10px;
  position: relative;
}
.woda-container__heading:before {
  content: ' ';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: url(logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.woda-container__footer {
  grid-area: footer;
  background-color: #293133;
  color: white;
}
.woda-container__footer * {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 10px;
}
.woda-container[data-active='even'] .woda-container-item__heading {
  writing-mode: horizontal-tb;
}
@media only screen and (min-width: 0) {
  .woda-container[data-active='what'] {
    grid-template-columns: auto 40px 40px 40px;
  }
}
@media only screen and (max-width: 0) {
  .woda-container[data-active='what'] {
    grid-template-columns: auto 40px 40px 40px;
  }
}
@media only screen and (min-width: 576px) and (orientation: landscape) {
  .woda-container[data-active='what'] {
    grid-template-columns: auto 20% 15% 5%;
  }
}
@media only screen and (min-width: 576px) and (orientation: portrait) {
  .woda-container[data-active='what'] {
    grid-template-columns: auto 9% 6% 3%;
  }
}
@media only screen and (min-width: 1200px) and (orientation: landscape) {
  .woda-container[data-active='what'] {
    grid-template-columns: auto 25% 15% 10%;
  }
}
.woda-container[data-active='what'] .woda-container-item[data-item='what'] .woda-container-item__heading {
  writing-mode: horizontal-tb;
}
@media only screen and (min-width: 0) {
  .woda-container[data-active='what'].woda-container--expanded {
    grid-template-columns: auto 40px 40px 40px;
  }
}
@media only screen and (max-width: 0) {
  .woda-container[data-active='what'].woda-container--expanded {
    grid-template-columns: auto 40px 40px 40px;
  }
}
.woda-container[data-active='overview'] {
  grid-template-columns: 40px auto 40px 40px;
}
.woda-container[data-active='overview'] .woda-container-item[data-item='overview'] .woda-container-item__heading {
  writing-mode: horizontal-tb;
}
.woda-container[data-active='detail'] {
  grid-template-columns: 40px 40px auto 40px;
}
.woda-container[data-active='detail'] .woda-container-item[data-item='detail'] .woda-container-item__heading {
  writing-mode: horizontal-tb;
}
.woda-container[data-active='action'] {
  grid-template-columns: 40px 40px 40px auto;
}
.woda-container[data-active='action'] .woda-container-item[data-item='action'] .woda-container-item__heading {
  writing-mode: horizontal-tb;
}
.woda-container-item[data-item='what'] {
  grid-area: "what";
}
.woda-container-item[data-item='overview'] {
  grid-area: "overview";
}
.woda-container-item[data-item='detail'] {
  grid-area: "detail";
}
.woda-container-item[data-item='action'] {
  grid-area: "action";
}
.woda-container-item + .woda-container-item {
  border-left: solid 1px #05aef6;
}
.woda-container-item__headline {
  display: block;
  height: 100%;
  writing-mode: vertical-lr;
  padding: 10px;
  text-transform: uppercase;
}
.woda-container-item__header-icon--shorten {
  display: none;
}
.woda-container--expanded.woda-container-item__header-icon--expand {
  display: none;
}
.woda-container--expanded.woda-container-item__header-icon--shorten {
  display: block;
}
.debug {
  height: 100%;
  display: flex;
  align-items: center;
}
.debug__template-btn {
  border: 0;
  background: transparent;
}
.debug__template-btn img {
  height: 40px;
}
.debug input {
  display: inline-block;
  width: 60px;
}
.debug input + input {
  margin-left: 10px;
}