* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.window {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
}

.body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 100%;
  overflow: hidden;
}

p {
  margin-top: .75em ;
  margin-bottom: .75em ; ;
}

.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

.home, .home-on, .nav, .nav-on, .text, .contact, .cw {
  font-family: 'courier new', courier, monospace;
}

.home, .home-on {
  font-size: 1.700em;
  text-align: center;
  padding-bottom: 0;
  padding-top: 5px;
  white-space: nowrap;
}

.section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding-bottom: 15px;
}

.nav, .nav-on {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.700em;
  width: 33%;
  padding-top: 10px;
}

.shift {
  position: relative;
  right: 8px;
}

.home a:link, .nav a:link { color: #909090; text-decoration: none;}
.home a:visited, .nav a:visited { color: #909090; text-decoration: none;}
.home a:hover, .home-on a:hover, .nav a:hover, .nav-on a:hover { color: #000; text-decoration: none;}
.home a:active, .nav-on a:active { color: #909090; text-decoration: none;}

.home-on a:link, .nav-on a:link, .contact a:link { color: #000; text-decoration: none;}
.home-on a:visited, .nav-on a:visited, .contact a:visited { color: #000; text-decoration: none;}
.home-on a:active, .nav-on a:active, .contact a:active { color: #000; text-decoration: none;}

.content {
  overflow: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
}

.center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: auto;
  padding: 20px 20px;
}

.works {
  overflow: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  padding: 10px 10px;
}

.thumb {
  height: 133px;
  width: 200px;
  margin: 8px 10px;
}

.thumb:hover {
  opacity: 0.8;
  -webkit-transition:all 0.13s ease-in-out;
  -o-transition:all 0.13s ease-in-out;
  transition:all 0.13s ease-in-out;
}

.contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.600em;
}

.contact a:hover { color: #909090; text-decoration: none;}

.text {
  color: #000;
  font-size: 0.900em;
  line-height: 1.8em;
  text-decoration: none;
}

.footer-box {
  width: 100%;
  padding: 5px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -ms-flex-line-pack: center;
      align-content: center;
}

.footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  white-space: nowrap;
  padding: 0 10px;
}

.cw {
  font-size: 0.800em;
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 10px;
}

.social-icons {
  margin-right: 5px;
}

.icon {
  margin: 0px 3px;
  height: 22px;
  width: 22px;
}

.icon:hover {
  opacity: .65;
  -webkit-transition:all 0.13s ease-in-out;
  -o-transition:all 0.13s ease-in-out;
  transition:all 0.13s ease-in-out;
}

@media only screen and (min-width: 500px) {

  .text {
    font-size: 1.050em;
  }

}

@media only screen and (min-width: 1000px) {

  .body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row
  }

  .menu {
    width: 30%;
    height: 100%;
    padding-left: 30px
  }

  .home, .home-on {
    font-size: 2.00em;
    text-align: left;
    padding-bottom: 20px;
  }

  .section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .nav, .nav-on {
    font-size: 2.500em;
    padding: 0;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    width: 100%;
  }

  .shift {
    position: relative;
    right: 0;
  }

  .content, .works, .contact {
    width: 70%;
  }

  .contact {
    font-size: 1.700em;
  }

  .text {
    font-size: 1.200em;
  }

  .footer {
    padding: 0 20px;
  }
}