html,
body,
ul,
ol {
  margin: 0;
  padding: 0; }

* {
  box-sizing: border-box; }

[class*="col-"] {
  width: 100%; }

[class*="col-"] {
  float: left; }

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

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-m-1 {
    width: 8.33%; }

  .col-m-2 {
    width: 16.66%; }

  .col-m-3 {
    width: 25%; }

  .col-m-4 {
    width: 33.33%; }

  .col-m-5 {
    width: 41.66%; }

  .col-m-6 {
    width: 50%; }

  .col-m-7 {
    width: 58.33%; }

  .col-m-8 {
    width: 66.66%; }

  .col-m-9 {
    width: 75%; }

  .col-m-10 {
    width: 83.33%; }

  .col-m-11 {
    width: 91.66%; }

  .col-m-12 {
    width: 100%; } }
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {
    width: 8.33%; }

  .col-2 {
    width: 16.66%; }

  .col-3 {
    width: 25%; }

  .col-4 {
    width: 33.33%; }

  .col-5 {
    width: 41.66%; }

  .col-6 {
    width: 50%; }

  .col-7 {
    width: 58.33%; }

  .col-8 {
    width: 66.66%; }

  .col-9 {
    width: 75%; }

  .col-10 {
    width: 83.33%; }

  .col-11 {
    width: 91.66%; }

  .col-12 {
    width: 100%; } }
.header_margin {
  height: 10em; }

@media only screen and (min-width: 600px) {
  .header_margin {
    height: 1em; } }
a.hash {
  position: relative;
  top: -9em; }
  @media only screen and (min-width: 600px) {
    a.hash {
      top: -1em; } }

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #32405f;
  z-index: 100; }
  .header ul {
    list-style-type: none;
    margin: 0;
    padding: 0; }
  .header a {
    text-decoration: none; }
  .header li {
    margin: 3px;
    display: block; }
  @media only screen and (min-width: 600px) {
    .header li {
      display: inline; } }
  .header a:link {
    color: white; }
  .header a:visited {
    color: white; }
  .header a:hover {
    color: #d3e0f5;
    background-color: #819acd; }
  .header a:active {
    color: white; }

.headback {
  background: -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)), url("images/pattern.png");
  background: -o-linear-gradient(left, black, rgba(0, 0, 0, 0)), url("images/pattern.png");
  background: -moz-linear-gradient(left, black, rgba(0, 0, 0, 0)), url("images/pattern.png");
  background: linear-gradient(to left, black, rgba(0, 0, 0, 0)), url("images/pattern.png");
  text-align: left; }
  .headback img {
    margin: 0 0 0 7%;
    max-width: 100%;
    height: auto; }
    @media only screen and (min-width: 600px) {
      .headback img {
        margin-top: 2em; } }
  .headback h1 {
    font-size: 10vw;
    font-weight: 600;
    padding: 0;
    line-height: 1; }
  .headback h2 {
    font-size: 8vw;
    color: #819acd;
    font-weight: 300;
    line-height: 1.3;
    margin: 0.4em 0 0.6em 0; }
  @media only screen and (min-width: 600px) {
    .headback h1 {
      font-size: 4.6vw; }
    .headback h2 {
      font-size: 2.8vw; } }
  @media only screen and (min-width: 1600px) {
    .headback h1 {
      font-size: 4.4em; }
    .headback h2 {
      font-size: 3em; } }

#coding li, #agile li, #domains li {
  list-style-type: none;
  margin-left: 2em; }
#coding h3, #agile h3, #domains h3 {
  line-height: 1;
  margin: 0 0 0 1em;
  padding: 0; }
#coding ul, #agile ul, #domains ul {
  margin: 0 0 1em 0; }

#agile h3 {
  line-height: 1.3; }

#word_clouds {
  background-size: auto;
  background-color: #222;
  background-repeat: no-repeat; }

#coding .big, #domains .medium, #agile .small, #agile .medium {
  color: #e4b9a9; }

#coding .small, #coding .medium, #agile .big, #domains .big {
  color: #819acd; }

#coding .big, #agile .big {
  font-size: 6.5rem; }
#coding .small, #agile .small {
  font-weight: 300;
  font-size: 0.9rem; }
#coding .medium, #agile .medium {
  font-weight: 300;
  font-size: 2.4rem; }

#domains .big {
  font-size: 3.7rem; }

#domains .medium {
  font-weight: 300;
  font-size: 1.4rem; }

#coding .sentence {
  position: relative;
  top: -3rem;
  left: -0.4rem; }

#agile .sentence {
  position: relative;
  top: 0.9rem;
  left: -3.6rem; }

.headlines {
  line-height: 1.2;
  text-align: left; }
  .headlines ul {
    background-color: #32405f;
    padding: 0.8em;
    margin: 0.8em; }
    .headlines ul li {
      white-space: nowrap;
      font-weight: 600;
      color: #819acd;
      list-style-type: none; }
  @media only screen and (min-width: 600px) {
    .headlines {
      height: 0;
      text-align: right;
      float: right; } }
  @media only screen and (min-width: 1074px) {
    .headlines {
      font-size: 1.4em; } }

.summary {
  margin: 2.3em 0;
  font-size: 1em;
  line-height: 1.4; }
  @media only screen and (min-width: 900px) {
    .summary {
      font-size: 1.5vw; } }

.wrapper {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: #CCC; }

.h_iframe {
  position: relative;
  padding-top: 56%; }

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.langtech {
  background-color: #151b29; }

.languages, .technologies {
  margin: 1em 0; }
  .languages img, .technologies img {
    width: 3em;
    height: 3em; }
  .languages figure, .technologies figure {
    float: left;
    margin: 1em; }
  .languages h3, .technologies h3 {
    text-align: left; }
  .languages figcaption, .technologies figcaption {
    text-align: center; }

.role li {
  margin-left: 2em;
  font-family: Roboto;
  color: #888;
  padding: 1em; }
.role cite {
  color: #d3e0f5; }

html {
  font-family: 'Advent Pro', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: white;
  background-color: black;
  background-image: url("images/ibanez.png");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: bottom right; }
  html p {
    font-family: "Roboto"; }
  html h3 {
    font-size: 1.8em; }
  html h4 {
    font-size: 1.6em;
    color: #819acd; }
  html h5 {
    font-size: 1.2em; }
  html h6 {
    font-size: 1.0em;
    color: #d3e0f5; }
  html a:link {
    color: #d3e0f5; }
  html a:visited {
    color: #d3e0f5; }
  html a:active {
    color: #819acd; }
  html a:hover {
    color: #819acd; }
  html .page {
    padding: 0 3%;
    max-width: 1600px; }
  html .row {
    padding: 0 3%; }
  html #copyright {
    font-size: 0.7em;
    text-align: center;
    color: #819acd; }
  html .role {
    padding: 1em;
    margin: 4px;
    background: #222; }
  html .attrib {
    color: #888;
    white-space: nowrap; }
  html .quote {
    margin: 2.3em 0;
    font-family: 'Advent Pro';
    font-size: 1.07em;
    line-height: 1.08; }
    @media only screen and (min-width: 900px) {
      html .quote {
        font-size: 1.5vw; } }
  html img {
    margin: 0;
    max-width: 100%; }

/*# sourceMappingURL=kat.css.map */