@font-face {
  font-family: Roboto-Regular;
  src: url("css/fonts/Roboto-Regular.ttf") format("truetype"),
  url("css/fonts/Roboto-Regular.eot") format("embedded-opentype"),
  url("css/fonts/Roboto-Regular.WOFF") format("woff"),
  url("css/fonts/Roboto-Regular.woff2") format("woff2"),
  url("css/fonts/Roboto-Regular.svg") format("svg")
}

@font-face {
  font-family: Roboto-Bold;
  src: url("css/fonts/Roboto-Bold.ttf") format("truetype"),
  url("css/fonts/Roboto-Bold.WOFF") format("woff")
}

@font-face {
  font-family: Roboto-Italic;
  src: url("css/fonts/Roboto-Italic.ttf") format("truetype"),
  url("css/fonts/Roboto-Italic.WOFF") format("woff")
}

@font-face {
  font-family: RobotoCondensed-Regular;
  src: url("css/fonts/RobotoCondensed-Regular.ttf") format("truetype"),
  url("css/fonts/RobotoCondensed-Regular.WOFF") format("woff")
}

body {font-family: Roboto-Regular; font-size: 16px; line-height: 24px; margin: 0px; background-image: url(images/bg.jpg); background-size: cover; background-attachment: fixed; position: relative;}
h1 {margin: 0px 0px 30px; line-height: 36px; padding-top: 30px;}
.pageHeader {margin-bottom: 0px;}
h2 {font-size: 1.25em;}
h3 {margin: 0px 0px 30px; font-family: Roboto-Italic; font-weight: normal; font-size: 18px; color: #333;}

.credits {position: absolute; right: 10px; bottom: 10px; color: #555; font-size: 0.75em; z-index: 10;}
.credits a {color: #555; text-decoration: none;}

.bold {font-family: Roboto-Bold; }
.italic {font-family: Roboto-Italic;}
.section {margin-bottom: 60px;}
.section:last-child {margin-bottom: 0px;}

.container {max-width: 1000px; margin: 0px auto; padding: 0px 30px 30px; background-color: #FFF; border-width: 0px 3px; border-color: #CCC; border-style: dashed;}

.row {display: table; width: 100%;}
.row2 {display: table; }
.cell {display: table-cell; vertical-align: top;}
.middle {vertical-align: middle; background: linear-gradient(160deg, #b0a089, #FFF); border-radius: 0px 6px 6px 0px;}   /*b5a58e*/
.leftCell {padding-right: 0px;}
.rightCell {padding-left: 30px; padding-right: 30px; font-family: Roboto-Italic;}
.leftCell2 {padding-right: 4px;}
.rightCell2 {padding-left: 0px;}
.leftCell3 {padding-right: 0px; width: 135px;}
.myImg {width: 250px; display: block; border-radius: 6px 0px 0px 6px;}
.myImgSmall {width: 135px; display: block;}

#portfolio {text-align: center; position: relative;}
#activeCanvas {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; cursor: pointer;}
.activeItem {position: relative; border-radius: 8px; box-shadow: 0 4px 10px #666; -webkit-box-shadow: 0 4px 10px #666; -moz-box-shadow: 0 4px 10px #666; -ms-box-shadow: 0 4px 10px #666; -o-box-shadow: 0 4px 10px #666;}
.activeItem .pImgDiv { outline: 1px solid #CCC; }
.canvasUp {z-index: 3; background-color: #FFF; }
#items {position: relative; z-index: 2;}
.pItem {display: inline-block; vertical-align: top; margin: 0px 20px 40px; border: 1px solid grey; text-align: left; cursor: pointer; background-color: #FFF; }
.pItem:hover {box-shadow: 0 4px 10px #666; -webkit-box-shadow: 0 4px 10px #666; -moz-box-shadow: 0 4px 10px #666; -ms-box-shadow: 0 4px 10px #666; -o-box-shadow: 0 4px 10px #666; transition: box-shadow .4s, -webkit-box-shadow .4s, -moz-box-shadow .4s, -ms-box-shadow .4s, -o-box-shadow .4s;}
.pUpperTitle {display: none; position: relative; padding: 15px 0px; font-size: 1.75em; font-family: Roboto-Bold; }
.closeBtn {position: absolute; top: 18px; right: 0px; cursor: pointer; transition: transform .35s,-webkit-transform .35s;}
.closeBtn:hover {transform: scale(1.5); transition: transform .35s,-webkit-transform .35s;}
.pLowerTitle {text-align: center; padding: 8px 0px; transition: transform .35s,-webkit-transform .35s;}
.pItem:hover .pLowerTitle {transform: scale(1.1); transition: transform .35s,-webkit-transform .35s;}
.pImgDiv { margin-bottom: 1px; }
.pImg {width: 250px; display: block;}
/*.pDescription {display: none; padding: 15px 0px 8px; font-family: Roboto-Bold; }*/
.pDescription {display: none; padding: 12px 5px; font-family: Roboto-Bold; background-color: #555; color: #EEE; text-align: center; outline: 1px solid #555;}
/*.pScope {display: none; padding: 0px 0px 8px;}*/
.pScope {display: none; padding: 12px 0px 12px;}
.pProduction {display: none; padding: 0px 0px 8px;}
.pDevCopy {display: none; padding: 0px 0px 8px;}
.pDisplay {display: block;}
.wLink {font-family: Roboto-Bold;}

.details {}
.detailsC {vertical-align: top; padding-right: 10px;}
.detailsV {vertical-align: top; font-family: Roboto-Bold;}

.contactForm {}
.upworkLink {color: #108A00; font-family: Roboto-Bold;}
.field {display: block; font-family: Roboto-Regular; font-size: 1em; margin-bottom: 20px; padding: 6px; border: 1px solid grey; width: 360px;}
.textarea {height: 100px;}
.submit {font-family: Roboto-Regular; font-size: 1em; padding: 12px; background-color: #FFF; border: 1px solid grey; cursor: pointer; transition: background-color .35s, color .35s;}
.submit:hover {background-color: blue; color: white; transition: background-color .35s, color .35s;}
.invalidField {border-color: red; background-color: #FCC;}
.waitContainer {height: 24px;}
.formWait img {display: block;}
.formWait {display: none;}
.formConfirmation { padding: 10px; color: white; background-color: green; display: none; }
.formServerError {padding: 10px; color: white; background-color: red; display: none; }
.cfPlaceholder {display: none;}
.language {float: right;}
.langValue {font-family: Roboto-Bold;}

@media (max-width: 1000px) {
  .container {border: none;}
  .credits {display: none;}
}

@media (max-width: 720px) {
  .activeItem {margin-left: 0px; margin-right: 0px;}
}

@media (max-width: 640px) {
  .container {padding: 0px 15px 20px;}
  .longlink {font-family: RobotoCondensed-Regular; font-size: 0.8em;}
  .myImg {width: 35vw;}
}

@media (max-width: 580px) {
  .language {float: none;}
}

@media (max-width: 560px) {
  .cell {display: block;}
  .myImg {width: 250px; border-radius: 6px;}
  .rightCell {padding-left: 0px; padding-right: 0px;}
  .middle {background: #FFF; border-radius: 0px;}
}

@media (max-width: 440px) {
  .longlink {font-size: 0.7em;}
  .pUpperTitle {font-size: 1.5em;}
  .field { width: 320px;}
}

@media (max-width: 420px) {
  h1 {font-size: 1.8em;}
  .container {padding: 0px 10px 20px;}
}