@font-face {
    font-family: 'metropolisBold';
    src: url(../fonts/metropolis-bold-webfont.woff2) format('woff2'),
         url(../fonts/metropolis-bold-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metropolisLight';
    src: url(../fonts/metropolis-light-webfont.woff2) format('woff2'),
         url(../fonts/metropolis-light-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metropolisMedium';
    src: url(../fonts/metropolis-medium-webfont.woff2) format('woff2'),
         url(../fonts/metropolis-medium-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metropolisRegular';
    src: url(../fonts/metropolis-regular-webfont.woff2) format('woff2'),
         url(../fonts/metropolis-regular-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metropolisRegularItalic';
    src: url(../fonts/metropolis-regularitalic-webfont.woff2) format('woff2'),
         url(../fonts/metropolis-regularitalic-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'veneer';
    src: url(../fonts/veneer-clean-regular.woff2) format('woff2'),
         url(../fonts/veneer-clean-regular.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
    background-color: #181818;
}

header {
    width: 100%;
    position: fixed;
    background-color: #181818;
    z-index: 7;
}
footer {
    width: 100%;
    position: relative;
    background-color: #181818;
}
h1 {
    font-family: 'veneer';
    font-size: 18px;
    letter-spacing: 1.75px;
    color: #181818;
}
p {
    font-family: 'metropolisRegular';
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.5px;
    color: #181818;
}
span {
    font-size: 10px;
    letter-spacing: 1px;
}
.rect {
    width: 100%;
    height: 3px;
    background-color: #f7f5ed;
    margin-top: 8px;
}
.choice {
    position: relative;
    text-align: center;
    font-family: 'veneer';
}
.choice a {
    color: white;
    text-decoration: none;
    letter-spacing: 1.75px;
    transition: color .2s;
}
.projectImage img {
    width: 100%;
}
.clear {
    clear: both;
}
.transparent {
    opacity: 0.5;
}
.formItem {
    background: none;
    font-family: 'metropolisRegular';
    letter-spacing: 0.5px;
    font-size: 14px;
    color: white;
    padding-left: 9px;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    box-sizing: border-box;
}
.formItem::placeholder {
    font-family: 'metropolisRegularItalic';
}
.holder {
    float: left;
}
.titleHolder {
    float: left;
    width: 100%;
    height: 100%;
}
.thumbnailTitle {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 47%;
    color: white;
    opacity: 0;
    z-index: 5;
    font-size: 24px;
    letter-spacing: 1.5px;
    font-family: 'veneer';
}
.view {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    color: #f7f5ed;
    opacity: 0;
    z-index: 5
}
.overlay {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #181818;
    opacity: 0;
    z-index: 4;
}
.project {
    opacity: 0.85;
}
.icon {
    float: left;
}
.close {
    display: block;
    text-decoration: none;
    font-size: 14px;
    font-family: 'metropolisBold';
    color: white;
    line-height: 30px;
    text-align: center;
}
.mediaIcon {
    opacity: 0.5;
}
#logo {
    margin-left: 3.075vw;
    margin-top: 28px;
    float: left;
}
#logo img {
    width: 100%;
}
#logotype {
    background-repeat: no-repeat;
    background-position: center;
    position: fixed;
}
#logotype img {
    width: 100%;
}
#bar1 {
    margin-top: 5px;
}
#nav {
    width: 100%;
    z-index: 7;
}
#navIcons {
    float: right;
}
#leftIcon, #rightIcon {
    float: left;
}
#infoSection {
    background-color: white;
}
#infoCaption {
    color: #212322;
}
#workSection {
    float: left;
    width: 100%;
    background-color: white;
}
#gallery {
    padding-top: 30px;
}
#project10 {
    background-image: url('../images/thumbnails/Microcosmos Thumbnail.jpg');
    background-size: cover;
}
#project9 {
    background-image: url('../images/thumbnails/Leinies Thumbnail.jpg');
    background-size: cover;
}
#project8 {
    background-image: url('../images/thumbnails/Abduct Thumbnail.jpg');
    background-size: cover;
}
#project7 {
    background-image: url('../images/thumbnails/RF21 Thumbnail.jpg');
    background-size: cover;
}
#project6 {
    background-image: url('../images/thumbnails/Fracture Thumbnail.jpg');
    background-size: cover;
}
#project5 {
    background-image: url('../images/thumbnails/RF19 Thumbnail.jpg');
    background-size: cover;
}
#project4 {
    background-image: url('../images/thumbnails/Omission Thumbnail.jpg');
    background-size: cover;
}
#project3 {
    background-image: url('../images/thumbnails/Finis Thumbnail.jpg');
    background-size: cover;
}
#project2 {
    background-image: url('../images/thumbnails/UD Thumbnail.jpg');
    background-size: cover;
}
#project1 {
    background-image: url('../images/thumbnails/Mesh Thumbnail.jpg');
    background-size: cover;
}
#aboutSection {
    float: left;
    background-color: #ff4814;
}
#aboutHeading, #serviceHeading, #featureHeading, #contactHeading {
    color: white;
}
#portrait {
    position: relative;
    z-index: 1;
    background-image: url('../images/Portrait.png');
    background-size: cover;
}
#serviceSection {
    float: left;
}
#serviceCaption, #featureCaption {
    font-family: 'metropolisRegular';
    color: #ff4814;
}
#contactSection {
    float: left;
    width: 100%;
}
#imageSection {
    background-color: white;
}
#messageField {
    height: 165px;
    resize: none;
    padding-top: 5px;
}
#sendButton {
    color: white;
    background: none;
    border: 1.5px solid #ff4814;
    font-family: 'metropolisBold';
    cursor: pointer;
    letter-spacing: 1px;
}
#container {
    width: 100%;
    height: 100%;
    background color: #f7f5ed;
}
#tyContainer {
    width: 100%;
    height: 100vh;
}
#thanks {
    text-align: center;
    padding-top: 70px;
    font-size: 18px;
    font-family: 'metropolisLight';
    color: white;
}
#closeButton {
    height: 30px;
    margin-top: 50px;
    background: none;
    border: #ff4814 solid 2px;
    transition: background-color .2s;
}
#closeButton:hover {
    background-color: #ff4814;
}
#upButton {
    border: #ff4814 solid 2px;
}
#upArrow {
    width: 45%;
    height: 77%;
    margin-top: 23%;
    margin-left: auto;
    margin-right: auto;
}
#copyright {
    font-size: 10px;
    text-align: center;
    color: white;
    opacity: 0.5;
}

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px) {
  header {
      height: 100px;
      z-index: 8;
  }
  h1 {
      font-size: 28px;
  }
  footer {
      height: 240px;
  }
  .choice {
      width: 87.5vw;
      margin-left: 6.25vw;
      height: 66.666px;
      line-height: 65px;
      font-size: 18px;
      z-index: 3;
  }
  .choice a {
      padding: 12px 50px 12px 50px;
  }
  .project {
      width: 87.5vw;
      height: 87.5vw;
  }
  .holder {
      width: 87.5vw;
      height: 87.5vw;
      margin-left: 6.25vw;
      margin-top: 8.75vw;
  }
  .formItem {
      width: 71.875vw;
      height: 40px;
      margin-left: 14.063vw;
      margin-top: 4.688vw;
  }
  .projectImage {
      width: 87.5vw;
      margin-left: 6.25vw;
      padding-top: 8.75vw;
  }
  .icon {
      width: 32px;
      height: 32px;
      margin-left: 30px;
  }
  #logo {
      width: 42px;
      height: 42px;
      margin-left: 6.25vw;
      margin-top: 29px;
      float: left;
  }
  #logotype {
      background-image: url('../images/CGDC_Logotype_white.png');
      width: 32%;
      height: 100px;
      margin-left: 34%;
      background-size: 116px;
  }
  #menuIcon {
      width: 34px;
      height: 34px;
      right: 6.25%;
      margin-top: 33px;
      opacity: .5;
      position: fixed;
      z-index: 8;
  }
  #nav {
      display: none;
      height: 0px;
      padding-top: 100px;
      background-color: #181818;
      position: fixed;
  }
  #option2Alt {
      display: none;
  }
  #workSection {
      padding-top: 100px;
      padding-bottom: 100px;
  }
  #gallery {
      padding-top: 0px;
  }
  #aboutSection, #contactSection {
      width: 100%;
  }
  #serviceSection {
      width: 100%;
  }
  #portrait {
      float: left;
      width: 40.625vw;
      height: 40.625vw;
      margin-left: 29.688vw;
      margin-top: 100px;
  }
  #aboutHeading, #serviceHeading, #featureHeading, #contactHeading {
      float: left;
      width: 100%;
      margin-top: 100px;
      text-align: center;
  }
  #aboutHeading {
      margin-top: 8.125vw;
  }
  #aboutCaption {
      float: left;
      width: 72.5%;
      margin-left: 13.75%;
      margin-bottom: 100px;
      margin-top: 4vw;
      text-align: justify;
  }
  #serviceHeading {
      margin-top: 100px;
  }
  #serviceCaption, #featureCaption {
      float: left;
      width: 100%;
      margin-top: 6vw;
      font-size: 22px;
      text-align: center;
  }
  #featureCaption {
      margin-bottom: 100px;
  }
  #sendButton {
      width: 40.625vw;
      margin-left: 29.688vw;
  }
  #contactForm {
      margin-bottom: 100px;
  }
  #closeButton {
      width: 40.625vw;
      margin-left: 29.688vw;
  }
  #infoSection {
      width: 100%;
      padding-top: 100px;
      padding-bottom: 70px;
  }
  #imageSection {
      width: 100%;
      padding-bottom: 70px;
  }
  #infoHeading, #infoCaption {
      width: 71.25%;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
  }
  #infoHeading {
      margin-top: 46px;
  }
  #infoCaption {
      margin-top: 20px;
  }
  #navIcons {
      margin-top: 37px;
      margin-right: 6.25vw;
  }
  #leftIcon, #rightIcon {
      width: 28px;
      height: 28px;
  }
  #leftIcon {
      margin-right: 16px;
  }
  #media {
      width: 182px;
      height: 32px;
      padding-top: 130px;
      margin-left: auto;
      margin-right: auto;
  }
  #instaIcon {
      margin-left: 13px;
  }
  #upButton {
      width: 40px;
      height: 40px;
      border-radius: 22px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      bottom: 120px;
  }
  #upArrow {
      margin-top: 0px;
      height: 100%;
  }
  #arrow_Layer_1 {
      margin-top: 50%;
  }
  #copyright {
      position: relative;
      bottom: 8px;
  }
}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  header {
      height: 200px;
  }
  footer {
      height: 100px;
  }
  h1 {
      font-size: 30px;
  }
  .choice {
      width: 25%;
      font-size: 17px;
      line-height: 60px;
      float: left;
  }
  .choice a {
      padding: 10px;
  }
  .project {
      width: 28.646vw;
      height: 28.646vw;
  }
  .project:nth-child(3n+1) {
      margin-left: 3.906vw;
  }
  .holder {
      width: 28.646vw;
      height: 28.646vw;
      margin-left: 3.5vw;
      margin-bottom: 3.5vw;
  }
  .formItem {
      width: 34.896vw;
      height: 35px;
      margin-left: 32.552vw;
      margin-top: 1.563vw;
  }
  .projectImage {
      width: 100%;
      padding-top: 7.813vw;
  }
  .icon {
      width: 24px;
      margin-left: 3vw;
  }
  #logo {
      width: 46px;
      height: 46px;
      margin-left: 3.906vw;
      margin-top: 54px;
  }
  #logotype {
      background-image: url('../images/CGDC_Badge.png');
      width: 20%;
      height: 150px;
      margin-left: 40%;
      background-size: 155px;
  }
  #menuIcon {
      display: none;
  }
  #nav {
      height: 60px;
      position: fixed;
      top: 140px;
  }
  #options {
      margin-left: 19.792vw;
      width: 60.417vw;
  }
  #option2Alt {
      display: none;
  }
  #workSection {
      padding-top: 230px;
      padding-bottom: 80px;
  }
  #aboutSection {
      width: 100%;
      /*height: 41.667vw;*/
  }
  #portrait {
      float: left;
      width: 19.01vw;
      height: 19.01vw;
      margin-left: 16.667vw;
      margin-top: 11.719vw;
  }
  #aboutHeading {
      float: left;
      width: 44.531vw;
      margin-top: 13.021vw;
      margin-left: 5.729vw;
  }
  #aboutCaption {
      float: left;
      width: 39.714vw;
      margin-top: .75vw;
      margin-left: 5.729vw;
      margin-bottom: 12%;
  }
  #serviceSection {
      width: 100%;
      height: 60.417vw;
  }
  #contactSection {
      width: 100%;
      height: 55.99vw;
  }
  #leftColumn, #rightColumn {
      width: 23.828vw;
  }
  #leftColumn {
      float: left;
      margin-left: 19.792vw;
  }
  #rightColumn {
      float: right;
      margin-right: 19.792vw;
  }
  #serviceHeading, #featureHeading {
      width: 22.182vw;
      margin-top: 11.719vw;
  }
  #serviceCaption, #featureCaption {
      margin-top: 1.563vw;
      font-size: 18px;
      line-height: 16px;
  }
  #contactHeading {
      width: 12.76vw;
      margin-left: 43.62vw;
      margin-top: 5.124vw;
      text-align: center;
  }
  #sendButton {
      width: 12.76vw;
      margin-left: 43.62vw;
  }
  #closeButton {
      width: 15.886vw;
      margin-left: 42.057vw;
  }
  #infoSection {
      width: 100%;
      padding-top: 150px;
      padding-bottom: 65px;
  }
  #imageSection {
      width: 100%;
      padding-bottom: 7.813vw;
  }
  #projectGallery {
      width: 66.667vw;
      margin-left: 16.667vw;
  }
  #infoHeading, #infoCaption {
      width: 60.417vw;
      margin-left: 19.792vw;
      text-align: center;
  }
  #infoHeading {
      margin-top: 62px;
  }
  #infoCaption {
      margin-top: 20px;
  }
  #navIcons {
      margin-top: 57px;
      margin-right: 3.906vw;
  }
  #leftIcon, #rightIcon {
      width: 36px;
      height: 36px;
  }
  #leftIcon {
      margin-right: 16px;
  }
  #media {
      float: left;
      padding-top: 38px;
  }
  #instaIcon {
      margin-left: 3.906vw;
  }
  #copyright {
      width: 28.646vw;
      margin-left: 35.677vw;
      padding-top: 5.339vw;
  }
  #upButton {
      width: 32px;
      height: 32px;
      border-radius: 18px;
      float: right;
      margin-top: 34px;
      margin-right: 3.906vw;
  }
}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1024px) {
  header {
      height: 120px;
  }
  h1 {
      font-size: 32px;
  }
  p {
      font-size: 13px;
  }
  footer {
      height: 100px;
  }
  .choice {
      width: 19.565%;
      font-size: 18px;
      float: left;
      margin-top: 35px;
  }
  .choice a {
      line-height: 50px;
      padding: 12px;
  }
  .choice a:hover {
      color: #ff4814;
  }
  .project {
      width: 22.182vw;
      height: 22.182vw;
  }
  .holder {
      width: 22.182vw;
      height: 22.182vw;
      margin-left: 2.1962%;
      margin-bottom: 2.1962vw;
  }
  .thumbnailTitle {
      font-size: 32px;
  }
  .formItem {
      width: 100%;
      margin-top: 1.318vw;
      height: 37px;
  }
  .projectImage {
      width: 51.245vw;
      margin-top: 5.857vw;
  }
  .icon {
      width: 25px;
      height: 25px;
  }
  .mediaIcon {
      transition: opacity .25s;
  }
  .mediaIcon:hover {
      opacity: 1;
  }
  #logo {
      width: 50px;
      height: 50px;
      margin-left: 3.075vw;
      margin-top: 36px;
  }
  #logotype {
      background-image: url('../images/CGDC_Badge.png');
      width: 20%;
      height: 120px;
      margin-left: 40%;
      background-size: 150px;
  }
  #menuIcon {
      display: none;
  }
  #nav {
      width: 30.301vw;
      margin-right: 3.075vw;
      height: 120px;
      float: right;
      position: fixed;
      right: 0px;
  }
  #option1, #option2, #option3 {
      margin-right: 7.246%;
  }
  #workSection {
      margin-top: 120px;
      padding-bottom: 82px;
  }
  #aboutSection {
      width: 62.225vw;
      /*height: 43.924vw;*/
  }
  #portrait {
      width: 14.056vw;
      height: 14.056vw;
      margin-left: 8.272vw;
      margin-top: 18%;
      margin-bottom: 15%;
      float: left;
  }
  #aboutCopy {
      width: 23vw;
      margin-left: 4.25vw;
      margin-top: 18%;
      margin-bottom: 17%;
      float: left;
  }
  #aboutCaption {
      margin-top: 0.732vw;
  }
  #serviceHeading, #featureHeading {
      margin-left: 10.688vw;
      margin-top: 6.225vw;
  }
  #serviceCaption, #featureCaption {
      margin-left: 10.688vw;
      margin-top: 1.318vw;
      position: relative;
      z-index: 4;
      font-size: 18px;
      line-height: 15px;
  }
  #rightColumn {
      /*padding-bottom: 4.063vw;*/
  }
  #contactCopy {
      margin-top: 8.272vw;
      margin-bottom: 7.322vw;
  }
  #contactHeading {
      text-align: center;
  }
  #contactHeading, #contactForm {
      width: 30.307vw;
      margin-left: 34.846vw;
  }
  #sendButton {
      width: 8.199vw;
      margin-left: 36.232%;
      padding: 0;
      transition: background-color .2s;
  }
  #sendButton:hover {
      background-color: #ff4814;
  }
  #closeButton {
      width: 8.126vw;
      margin-left: 45.937vw;
  }
  #infoSection {
      width: 32.65vw;
      padding-top: 120px;
      position: fixed;
  }
  #imageSection {
      padding-left: 32.65vw;
      padding-top: 120px;
      padding-bottom: 10.688vw;
  }
  #projectGallery {
      width: 50.512vw;
      margin-left: auto;
      margin-right: auto;
  }
  #infoHeading, #infoCaption {
      width: 18.448vw;
      margin-left: auto;
      margin-right: auto;
  }
  #infoHeading {
      color: #212322;
      margin-top: 80px;
  }
  #infoCaption {
      margin-top: 15px;
      margin-bottom: 120px;
  }
  #navIcons {
      margin-top: 42px;
      margin-right: 3.075vw;
  }
  #leftIcon, #rightIcon {
      width: 36px;
      height: 36px;
  }
  #leftIcon {
      margin-right: 18px;
  }
  #media {
      float: left;
      padding-top: 38px;
      margin-left: 3.075vw;
  }
  #behanceIcon, #dribbbleIcon {
      margin-left: 28px;
  }
  #copyright {
      width: 18.448vw;
      margin-left: 40.776vw;
      padding-top: 42px;
  }
  #upButton {
      width: 32px;
      height: 32px;
      border-radius: 18px;
      float: right;
      margin-right: 2.343vw;
      margin-left: 0;
      margin-top: 34px;
      transition: background-color .2s;
  }
  #upButton:hover {
      background-color: #ff4814;
  }
}