@font-face {
  font-family: 'kettering_105bold';
  src: url("../fonts/kettering_105_bold-webfont.eot");
  src: url("../fonts/kettering_105_bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/kettering_105_bold-webfont.woff2") format("woff2"), url("../fonts/kettering_105_bold-webfont.woff") format("woff"), url("../fonts/kettering_105_bold-webfont.ttf") format("truetype"), url("../fonts/kettering_105_bold-webfont.svg#kettering_105bold") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'kettering_105regular';
  src: url("../fonts/kettering_105_book-webfont.eot");
  src: url("../fonts/kettering_105_book-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/kettering_105_book-webfont.woff2") format("woff2"), url("../fonts/kettering_105_book-webfont.woff") format("woff"), url("../fonts/kettering_105_book-webfont.ttf") format("truetype"), url("../fonts/kettering_105_book-webfont.svg#kettering_105regular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'kettering_105light';
  src: url("../fonts/kettering_105_light-webfont.eot");
  src: url("../fonts/kettering_105_light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/kettering_105_light-webfont.woff2") format("woff2"), url("../fonts/kettering_105_light-webfont.woff") format("woff"), url("../fonts/kettering_105_light-webfont.ttf") format("truetype"), url("../fonts/kettering_105_light-webfont.svg#kettering_105regular") format("svg");
  font-weight: 100;
  font-style: normal; }

html, body {
  height: 100%;
  margin: 0; }

body {
  font-family: Source Sans Pro, Helvetica, Arial, Courier, sans-serif;
  color: #fff;
  font-size: 1.4em;
  font-weight: 200;
  line-height: 1.4em;
  background: #231f20; }
  @media (min-height: 1025px) {
    body {
      font-size: 1.7em; } }
  @media (max-width: 420px) {
    body {
      font-size: 1em; } }

h1 {
  font-family: kettering_105regular; }

.off {
  opacity: 0; }

.navtab {
  position: fixed;
  top: 0px;
  left: 0px;
  display: block;
  height: 62px;
  width: 50px;
  font-size: 9px;
  background: "";
  cursor: pointer; }

@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 420px) and (min-resolution: 192dpi), (max-width: 420px) and (min-resolution: 2dppx) {
  .navtab {
    width: 15%;
    height: 15%; } }
  .navtab #tab {
    fill: #8CC63F;
    position: absolute;
    height: 62px;
    width: 50px; }
  .navtab .star_wrapper {
    width: 100%;
    min-width: 50px;
    min-height: 62px;
    position: absolute; }
  .navtab #star {
    cursor: pointer;
    position: absolute;
    width: 35px;
    height: 35px;
    bottom: 10%;
    left: 15%;
    fill: #000; }
  .navtab .navimages {
    position: absolute;
    fill: "#ff00ff"; }

.navtab:hover > .star_wrapper #star {
  -webkit-animation-play-state: running;
          animation-play-state: running; }

.navtab.open {
  top: -100px; }

.bodyfiller {
  display: block;
  height: 200vh;
  width: 100vw;
  background-color: blue; }

.invisible {
  opacity: 0; }

.offScreen {
  display: none; }

.navoverlay {
  top: 0;
  position: fixed;
  display: block;
  height: 100vh;
  width: 100vw;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  background-color: black;
  opacity: .9;
  cursor: pointer; }

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 768px) and (min-resolution: 192dpi), (max-width: 768px) and (min-resolution: 2dppx) {
  .navoverlay {
    opacity: 1;
    /*performance for mobile */ } }

@media (max-height: 500px) and (-webkit-min-device-pixel-ratio: 2), (max-height: 500px) and (min-resolution: 192dpi), (max-height: 500px) and (min-resolution: 2dppx) {
  .navoverlay svg#star2, .navoverlay svg#gripper {
    display: none; } }
  .navoverlay svg#star2 {
    position: relative;
    left: 50%;
    bottom: -90vh;
    margin-left: -22px;
    width: 50px;
    height: 50px;
    fill: #c9ad91; }
    .navoverlay svg#star2.intro {
      top: -50px; }
  .navoverlay svg#gripper {
    position: relative;
    left: 50%;
    top: 5vh;
    margin-left: -50px;
    width: 50px;
    height: 50px;
    fill: #c9ad91; }

.hideme {
  display: none; }

ul.navUl {
  position: absolute;
  top: 50%;
  padding: 0px;
  width: 100%;
  line-height: 2em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }
  ul.navUl a:hover, ul.navUl a:link {
    font-family: 'kettering_105regular';
    color: #5da102;
    text-decoration: none; }
  ul.navUl li:before {
    content: "";
    height: 1px;
    margin-left: 30%;
    margin-top: 0px;
    margin-bottom: .5em;
    margin-right: 30%;
    display: block; }
  ul.navUl li:after {
    content: "";
    height: 1px;
    margin-left: 35%;
    margin-right: 35%;
    margin-top: .5em;
    margin-bottom: 0px;
    display: block;
    border-bottom: 1px solid #897464; }

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 768px) and (min-resolution: 192dpi), (max-width: 768px) and (min-resolution: 2dppx) {
  ul.navUl li:after {
    margin-left: 25%;
    margin-right: 25%; } }
  ul.navUl li:first-child:before-after {
    content: none; }
  ul.navUl li {
    padding: 0px;
    width: 100%;
    font-size: 3.5rem;
    list-style-type: none;
    text-align: center;
    color: white;
    font-family: 'kettering_105light'; }

@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 420px) and (min-resolution: 192dpi), (max-width: 420px) and (min-resolution: 2dppx) {
  ul.navUl li {
    font-size: 6vh;
    line-height: 6vh; } }
    ul.navUl li a:active, ul.navUl li a:hover, ul.navUl li a:visited {
      text-decoration: none;
      font-family: 'kettering_105regular';
      color: #5da102; }
    ul.navUl li:hover {
      color: white;
      background-color: #142401;
      text-decoration: none; }
  ul.navUl a:last-child > li:after {
    content: "";
    height: 1px;
    margin-left: 30%;
    margin-top: .5em;
    margin-bottom: 0px;
    margin-right: 30%;
    display: block;
    border-bottom: 0px solid; }

main {
  position: relative; }

.about-page {
  width: 60%;
  max-width: 997px;
  margin: 0px auto; }
  .about-page h1 {
    margin-top: 5vh;
    color: #8CC63F;
    width: 66vw;
    font-size: 3em;
    font-family: 'kettering_105light';
    letter-spacing: -.05em; }
  .about-page .subtext {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    font-size: 1.5em; }
  .about-page hr.intro {
    width: 100%;
    margin-left: 0;
    margin-top: 3em;
    margin-bottom: 3em;
    text-align: left; }
  .about-page strong {
    font-family: 'kettering_105bold';
    font-size: 1.2em;
    line-height: 1.2em; }
    .about-page strong.capabilities {
      font-family: Source Sans Pro, Helvetica, Arial, Courier, sans-serif; }

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 768px) and (min-resolution: 192dpi), (max-width: 768px) and (min-resolution: 2dppx) {
  .about-page {
    margin: 6vw;
    width: 88vw; }
    .about-page h1 {
      margin-top: 75px;
      width: 80vw;
      font-size: 5vh; } }
  .about-page .provided {
    padding-left: 0;
    padding-right: 30px;
    line-height: 1.2em;
    padding-top: .5em;
    padding-bottom: .5em;
    padding-left: 0;
    padding-right: 30px;
    font-size: 1.3em; }
  .about-page .services-list {
    font-weight: bold; }
  .about-page .services {
    overflow: hidden; }
  .about-page .services strong {
    font-family: 'kettering_105light';
    color: #8CC63F;
    font-size: 2em; }
  .about-page .hideStuff:before {
    content: attr(data-website) "@" attr(data-user);
    unicode-bidi: bidi-override;
    direction: rtl;
    font-weight: normal; }
  .about-page .miniStatement {
    margin-top: .5em;
    margin-bottom: 1.2em;
    display: block;
    color: #e8e200;
    font-size: 1.9em;
    line-height: .9em; }
  .about-page .content {
    position: relative;
    padding-bottom: 100px; }
  .about-page .vineFront {
    left: 0px;
    position: absolute;
    width: 100%;
    display: block; }
    .about-page .vineFront img {
      height: 60vh;
      position: absolute;
      top: -100px;
      -webkit-transform-origin: center top;
              transform-origin: center top; }

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 768px) and (min-resolution: 192dpi), (max-width: 768px) and (min-resolution: 2dppx) {
  .about-page .vineFront {
    left: -5%; } }
  .about-page #vineFront1, .about-page #vineFront2, .about-page #vineFront3, .about-page #vineFront4 {
    position: absolute; }
  .about-page #vineFront1.intro {
    -webkit-transform: rotate(-4deg) scale(1.7) translateY(-50vh);
            transform: rotate(-4deg) scale(1.7) translateY(-50vh); }
  .about-page #vineFront2.intro {
    -webkit-transform: rotate(1deg) translateY(-100vh) scale(-1.2, 1.2);
            transform: rotate(1deg) translateY(-100vh) scale(-1.2, 1.2); }
  .about-page #vineFront3.intro {
    -webkit-transform: rotate(1deg) translateY(-100vh);
            transform: rotate(1deg) translateY(-100vh); }
  .about-page #vineFront1 {
    left: 5%;
    -webkit-transform: rotate(-4deg) scale(1.7) translate(0px, -30px);
            transform: rotate(-4deg) scale(1.7) translate(0px, -30px); }
  .about-page #vineFront2 {
    left: 5%;
    -webkit-transform: rotate(1deg) scale(-1.2, 1.2) translateY(-10vh);
            transform: rotate(1deg) scale(-1.2, 1.2) translateY(-10vh); }
  .about-page #vineFront3 {
    left: 0%;
    -webkit-transform: rotate(1deg) translateY(-10vh);
            transform: rotate(1deg) translateY(-10vh); }

.news-page {
  width: 60%;
  max-width: 997px;
  margin: 0px auto;
  font-size: 1.2em;
  font-family: Source Sans Pro, Helvetica, Arial, Courier, sans-serif;
  margin-top: 5vh; }

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 768px) and (min-resolution: 192dpi), (max-width: 768px) and (min-resolution: 2dppx) {
  .news-page {
    margin: 6vw;
    width: 88vw; }
    .news-page h1 {
      width: 80vw;
      font-size: 5vh; } }
  .news-page p {
    margin-bottom: 1.5em; }
  .news-page h1 {
    margin-top: 0;
    color: #8CC63F;
    width: 66vw;
    font-size: 4vw;
    font-family: 'kettering_105light';
    letter-spacing: -.05em; }
  .news-page h2 {
    margin-top: 0px;
    font-family: 'kettering_105regular';
    color: white; }
  .news-page date {
    font-size: .7em;
    color: gray; }
  .news-page .subtext {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    font-size: 1.5em; }
  .news-page hr.intro {
    width: 100%;
    margin-left: 0;
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: left; }
  .news-page strong {
    font-family: 'kettering_105bold';
    font-size: 1.2em;
    line-height: 1.2em; }
    .news-page strong.capabilities {
      font-family: Source Sans Pro, Helvetica, Arial, Courier, sans-serif; }
  .news-page .services strong {
    font-family: 'kettering_105light';
    color: #8CC63F;
    font-size: 2em; }
  .news-page .content-block {
    padding: 50px;
    margin-bottom: 50px;
    color: #8CC63F;
    display: block;
    background: rgba(0, 0, 0, 0.2); }
    .news-page .content-block a:link {
      text-decoration: underline; }
    .news-page .content-block a, .news-page .content-block a:active, .news-page .content-block a:hover, .news-page .content-block a:visited {
      text-decoration: underline;
      color: #62ff00; }
      .news-page .content-block a:hover, .news-page .content-block a:active:hover, .news-page .content-block a:hover:hover, .news-page .content-block a:visited:hover {
        color: white; }

.portfolio {
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #194f2a 0%, #000000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-radial-gradient(center ellipse, #194f2a 0%, #000000 100%);
  background: radial-gradient(ellipse at center, #194f2a 0%, #000000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$port-start', endColorstr='$port-end',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  overflow: hidden;
  background-attachment: fixed;
  min-height: 100vh;
  /*.col-sm-4.port-wrap:nth-child(4n+1) {
		clear:both;		
	}*/ }
  .portfolio .PortfolioList {
    opacity: 0;
    /*default value */
    width: 80%;
    max-width: 1200px;
    margin: 0px auto;
    margin-top: 5vh; }

@media (max-width: 1023px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1023px) and (min-resolution: 192dpi), (max-width: 1023px) and (min-resolution: 2dppx) {
  .portfolio .PortfolioList {
    margin: 3vw auto;
    width: 92%; } }
  .portfolio .PortfolioList:after {
    clear: both; }
  .portfolio .portfolio-tile {
    position: relative;
    display: block;
    width: 100%;
    line-height: 1.2em;
    min-height: 200px;
    margin: 0px auto;
    margin-bottom: 25px;
    text-align: center;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out; }
    .portfolio .portfolio-tile h2 {
      font-family: kettering_105light;
      font-size: 1.2em;
      margin: 0px;
      padding-left: 20px;
      padding-right: 20px;
      margin-bottom: .2em; }
      @media (max-width: 1024px) {
        .portfolio .portfolio-tile h2 {
          font-size: 1em; } }

@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 420px) and (min-resolution: 192dpi), (max-width: 420px) and (min-resolution: 2dppx) {
  .portfolio .portfolio-tile h2 {
    font-size: 1.5em; } }

@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 420px) and (min-resolution: 192dpi), (max-width: 420px) and (min-resolution: 2dppx) {
  .portfolio .portfolio-tile {
    width: 80%; }
    .portfolio .portfolio-tile h1 {
      font-size: 2.5em; } }
    .portfolio .portfolio-tile hr {
      width: 50%;
      border-top: 1px solid white; }
    .portfolio .portfolio-tile:hover .portThumb {
      -webkit-transform: scale(0.95, 0.95);
              transform: scale(0.95, 0.95); }
    .portfolio .portfolio-tile:not(:hover :active) .portThumb {
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1); }
  .portfolio .port-wrap {
    padding-left: 0px;
    padding-right: 0px;
    padding-left: 7px;
    padding-right: 7px;
    float: none;
    vertical-align: top;
    display: inline-block; }
    .portfolio .port-wrap a, .portfolio .port-wrap a:link, .portfolio .port-wrap a:hover {
      text-decoration: none;
      color: white; }

@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 420px) and (min-resolution: 192dpi), (max-width: 420px) and (min-resolution: 2dppx) {
  .portfolio .port-wrap {
    padding: 0px; } }
    .portfolio .port-wrap .portThumb {
      -webkit-transition: all .1s ease-in-out;
      transition: all .1s ease-in-out;
      width: 85%;
      margin: 1.5em; }

@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 420px) and (min-resolution: 192dpi), (max-width: 420px) and (min-resolution: 2dppx) {
  .portfolio .port-wrap .portThumb {
    width: 75%; } }
  .portfolio .port-sub-text, .portfolio .client-name {
    color: #69aa04;
    font-weight: bold; }

@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 420px) and (min-resolution: 192dpi), (max-width: 420px) and (min-resolution: 2dppx) {
  .portfolio .port-sub-text, .portfolio .client-name {
    font-size: 1.5em; } }
  .portfolio .port-text-wrap {
    position: relative; }
  .portfolio .port-wrap:nth-child(odd) div.portfolio-tile {
    /*border: 1px solid #fff000;  
		  	finds even children!!!
		*/ }

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 768px) and (min-resolution: 192dpi), (max-width: 768px) and (min-resolution: 2dppx) {
  .portfolio .port-wrap:nth-child(odd) {
    text-align: center; }
  .portfolio .port-wrap {
    text-align: center; } }

#bgWrapper {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0px; }

.bg-grad {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3b7a1a+0,000000+100 */
  background: #3b7a1a;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #3b7a1a 0%, #000000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-radial-gradient(center ellipse, #3b7a1a 0%, #000000 100%);
  background: radial-gradient(ellipse at center, #3b7a1a 0%, #000000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b7a1a', endColorstr='#000000',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }

.testSpacer {
  display: block;
  height: 20vh; }

.home {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  clip: rect(0, 100vw, 100vh, 0); }
  .home .screen {
    position: absolute;
    height: 768px;
    width: 1024px;
    top: 50vh;
    left: 50vw;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }

@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 420px) and (min-resolution: 192dpi), (max-width: 420px) and (min-resolution: 2dppx) {
  .home .screen {
    -webkit-transform: translate(-50%, -50%) scale(0.65);
            transform: translate(-50%, -50%) scale(0.65); } }
    .home .screen .logo {
      width: 500px;
      position: absolute;
      top: 335px;
      left: 260px;
      -webkit-transform-origin: center;
              transform-origin: center;
      -webkit-transform: scale(0.1, 0.1);
              transform: scale(0.1, 0.1); }
    .home .screen .logo.intro {
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1); }
    .home .screen .toucan {
      width: 200px;
      position: absolute;
      top: 260px;
      left: 540px; }
    .home .screen .frog {
      top: 333px;
      left: 316px;
      width: 41px;
      position: absolute;
      -webkit-transform: scale(0.1, 0.1);
              transform: scale(0.1, 0.1); }
    .home .screen .toucan.rock {
      -webkit-transform: rotate(15deg);
              transform: rotate(15deg); }
    .home .screen .toucan.intro {
      -webkit-transform: translateY(-200px);
              transform: translateY(-200px); }
    .home .screen .dropShadow {
      -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
      filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
      -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')"; }
    .home .screen .bananaTop {
      opacity: 1;
      width: 350px;
      height: 350px;
      top: 190px;
      left: 520px;
      position: absolute;
      -webkit-transform-origin: left center;
              transform-origin: left center; }
      .home .screen .bananaTop div img {
        height: 200px;
        position: absolute;
        -webkit-transform-origin: center 92% 0;
                transform-origin: center 92% 0; }
      .home .screen .bananaTop div:nth-of-type(2) img {
        -webkit-transform: rotate(-60deg);
                transform: rotate(-60deg); }
      .home .screen .bananaTop div:nth-of-type(3) img {
        -webkit-transform: rotate(-30deg);
                transform: rotate(-30deg); }
      .home .screen .bananaTop div:nth-of-type(4) img {
        -webkit-transform: rotate(30deg);
                transform: rotate(30deg); }
      .home .screen .bananaTop div:nth-of-type(5) img {
        -webkit-transform: rotate(60deg);
                transform: rotate(60deg); }
    .home .screen .bananaTop.intro {
      -webkit-transform: rotate(-90deg) scale(0.1);
              transform: rotate(-90deg) scale(0.1); }
    .home .screen .bananaLower {
      opacity: 1;
      width: 350px;
      height: 350px;
      top: 190px;
      left: 420px;
      position: absolute;
      -webkit-transform-origin: left center;
              transform-origin: left center; }
      .home .screen .bananaLower div img {
        height: 200px;
        position: absolute;
        -webkit-transform-origin: center 90% 0;
                transform-origin: center 90% 0;
        -webkit-transform: rotate(120deg);
                transform: rotate(120deg); }
      .home .screen .bananaLower div:nth-of-type(1) img {
        -webkit-transform: rotate(150deg);
                transform: rotate(150deg); }
      .home .screen .bananaLower div:nth-of-type(2) img {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg); }
      .home .screen .bananaLower div:nth-of-type(3) img {
        -webkit-transform: rotate(210deg);
                transform: rotate(210deg); }
      .home .screen .bananaLower div:nth-of-type(4) img {
        -webkit-transform: rotate(240deg);
                transform: rotate(240deg); }
    .home .screen .bananaLower.intro {
      -webkit-transform: rotate(90deg) scale(0.05);
              transform: rotate(90deg) scale(0.05); }
    .home .screen .yellowLeafUpper {
      opacity: 1;
      width: 350px;
      height: 350px;
      left: 370px;
      top: 210px;
      position: absolute;
      -webkit-transform-origin: left center;
              transform-origin: left center; }
      .home .screen .yellowLeafUpper div img {
        height: 160px;
        position: absolute;
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
        -webkit-transform: rotate(-60deg) scale(1.2, 1.2);
                transform: rotate(-60deg) scale(1.2, 1.2); }
      .home .screen .yellowLeafUpper div:nth-of-type(1) img {
        -webkit-transform: rotate(-40deg) scale(1.2, 1.2);
                transform: rotate(-40deg) scale(1.2, 1.2); }
      .home .screen .yellowLeafUpper div:nth-of-type(2) img {
        -webkit-transform: rotate(-20deg) scale(1.4, 1.4);
                transform: rotate(-20deg) scale(1.4, 1.4); }
      .home .screen .yellowLeafUpper div:nth-of-type(3) img {
        -webkit-transform: rotate(0deg) scale(1.5, 1.5);
                transform: rotate(0deg) scale(1.5, 1.5); }
      .home .screen .yellowLeafUpper div:nth-of-type(4) img {
        -webkit-transform: rotate(20deg) scale(1.4, 1.4);
                transform: rotate(20deg) scale(1.4, 1.4); }
      .home .screen .yellowLeafUpper div:nth-of-type(5) img {
        -webkit-transform: rotate(40deg) scale(1.2, 1.2);
                transform: rotate(40deg) scale(1.2, 1.2); }
      .home .screen .yellowLeafUpper div:nth-of-type(6) img {
        -webkit-transform: rotate(60deg) scale(1.2, 1.2);
                transform: rotate(60deg) scale(1.2, 1.2); }
    .home .screen .yellowLeafUpper.intro {
      -webkit-transform: rotate(90deg) scale(0.05);
              transform: rotate(90deg) scale(0.05); }
    .home .screen .yellowLeafLower {
      opacity: 1;
      width: 350px;
      height: 350px;
      left: 690px;
      top: 200px;
      position: absolute;
      -webkit-transform-origin: left center;
              transform-origin: left center; }
      .home .screen .yellowLeafLower div img {
        height: 170px;
        position: absolute;
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
        -webkit-transform: rotate(40deg);
                transform: rotate(40deg); }
      .home .screen .yellowLeafLower div:nth-of-type(1) img {
        -webkit-transform: rotate(60deg);
                transform: rotate(60deg); }
      .home .screen .yellowLeafLower div:nth-of-type(2) img {
        -webkit-transform: rotate(80deg);
                transform: rotate(80deg); }
      .home .screen .yellowLeafLower div:nth-of-type(3) img {
        -webkit-transform: rotate(100deg);
                transform: rotate(100deg); }
      .home .screen .yellowLeafLower div:nth-of-type(4) img {
        -webkit-transform: rotate(120deg);
                transform: rotate(120deg); }
      .home .screen .yellowLeafLower div:nth-of-type(5) img {
        -webkit-transform: rotate(140deg);
                transform: rotate(140deg); }
    .home .screen .yellowLeafLower.intro {
      -webkit-transform: rotate(-60deg) scale(0.05);
              transform: rotate(-60deg) scale(0.05); }
    .home .screen .bambooLeftBott {
      position: relative; }
      .home .screen .bambooLeftBott img {
        height: 170px;
        position: absolute;
        top: 230px;
        left: 280px;
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
        -webkit-transform: rotate(120deg);
                transform: rotate(120deg); }
      .home .screen .bambooLeftBott img:nth-of-type(1) {
        -webkit-transform: rotate(150deg);
                transform: rotate(150deg); }
      .home .screen .bambooLeftBott img:nth-of-type(2) {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg); }
      .home .screen .bambooLeftBott img:nth-of-type(3) {
        -webkit-transform: rotate(210deg) scale(1.2, 1.2);
                transform: rotate(210deg) scale(1.2, 1.2); }
      .home .screen .bambooLeftBott img:nth-of-type(4) {
        -webkit-transform: rotate(240deg);
                transform: rotate(240deg); }
    .home .screen .bambooLeftBott.intro {
      opacity: 0; }
    .home .screen .bambooLeftTop {
      position: relative; }
      .home .screen .bambooLeftTop img {
        height: 170px;
        position: absolute;
        top: 150px;
        left: 310px;
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
        -webkit-transform: rotate(-30deg) translate(70px, -100px);
                transform: rotate(-30deg) translate(70px, -100px); }
      .home .screen .bambooLeftTop img:nth-of-type(1) {
        -webkit-transform: rotate(10deg) translate(30px, -60px);
                transform: rotate(10deg) translate(30px, -60px); }
      .home .screen .bambooLeftTop img:nth-of-type(2) {
        -webkit-transform: rotate(20deg) scale(1.2, 1.2) translate(110px, -80px);
                transform: rotate(20deg) scale(1.2, 1.2) translate(110px, -80px); }
      .home .screen .bambooLeftTop img:nth-of-type(3) {
        left: 600px;
        -webkit-transform: rotate(25deg) scale(0.9);
                transform: rotate(25deg) scale(0.9); }
      .home .screen .bambooLeftTop img:nth-of-type(4) {
        -webkit-transform: rotate(30deg) translate(370px, -200px);
                transform: rotate(30deg) translate(370px, -200px); }
    .home .screen .bambooLeftTop.intro {
      opacity: 0; }
    .home .screen .bambooRighBott {
      position: relative; }
      .home .screen .bambooRighBott img {
        height: 170px;
        position: absolute;
        top: 220px;
        left: 580px;
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
        -webkit-transform: rotate(120deg);
                transform: rotate(120deg); }
      .home .screen .bambooRighBott img:nth-of-type(1) {
        -webkit-transform: rotate(150deg) scale(1.2, 1.2);
                transform: rotate(150deg) scale(1.2, 1.2); }
      .home .screen .bambooRighBott img:nth-of-type(2) {
        top: 240px;
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg); }
      .home .screen .bambooRighBott img:nth-of-type(3) {
        left: 590px;
        -webkit-transform: rotate(210deg) scale(1.2, 1.2);
                transform: rotate(210deg) scale(1.2, 1.2); }
      .home .screen .bambooRighBott img:nth-of-type(4) {
        top: 260px;
        left: 650px;
        -webkit-transform: rotate(-220deg);
                transform: rotate(-220deg); }
      .home .screen .bambooRighBott img:nth-of-type(5) {
        top: 200px;
        left: 520px;
        -webkit-transform: rotate(170deg);
                transform: rotate(170deg); }
    .home .screen .bambooRighBott.intro {
      opacity: 0; }
    .home .screen .vineBottRigh {
      position: relative; }
      .home .screen .vineBottRigh div img {
        height: 250px;
        position: absolute;
        top: 400px;
        left: 680px;
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
        -webkit-transform: rotate(2deg);
                transform: rotate(2deg); }
      .home .screen .vineBottRigh div:nth-of-type(1) img {
        -webkit-transform: rotate(-10deg) scale(-1.2, 1.2) translate(70px, 30px);
                transform: rotate(-10deg) scale(-1.2, 1.2) translate(70px, 30px); }
      .home .screen .vineBottRigh div:nth-of-type(2) img {
        -webkit-transform: rotate(5deg) scale(1.2, 1.2) translate(-150px, 30px);
                transform: rotate(5deg) scale(1.2, 1.2) translate(-150px, 30px); }
      .home .screen .vineBottRigh div:nth-of-type(3) img {
        -webkit-transform: rotate(-12deg) scale(-1, 1) translate(0px, -30px);
                transform: rotate(-12deg) scale(-1, 1) translate(0px, -30px); }
    .home .screen .vineBottRigh.intro {
      opacity: 0; }
    .home .screen .vineBottLeft {
      position: relative; }
      .home .screen .vineBottLeft div img {
        height: 250px;
        position: absolute;
        top: 400px;
        left: 400px;
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
        -webkit-transform: rotate(4deg);
                transform: rotate(4deg); }
      .home .screen .vineBottLeft div:nth-of-type(1) img {
        -webkit-transform: rotate(0deg) scale(0.9, 0.9) translate(-130px, -40px);
                transform: rotate(0deg) scale(0.9, 0.9) translate(-130px, -40px); }
      .home .screen .vineBottLeft div:nth-of-type(2) img {
        -webkit-transform: rotate(1deg) translate(40px, 80px);
                transform: rotate(1deg) translate(40px, 80px); }
      .home .screen .vineBottLeft div:nth-of-type(3) img {
        -webkit-transform: rotate(-10deg) scale(0.9, 0.9) translate(0px, 100px);
                transform: rotate(-10deg) scale(0.9, 0.9) translate(0px, 100px); }
      .home .screen .vineBottLeft div:nth-of-type(4) img {
        -webkit-transform: rotate(0deg) scale(0.9, 0.9) translate(-20px, 30px);
                transform: rotate(0deg) scale(0.9, 0.9) translate(-20px, 30px); }
    .home .screen .vineBottLeft.intro {
      opacity: 0; }
    .home .screen .vineTop {
      position: relative; }
      .home .screen .vineTop div img {
        height: 250px;
        position: absolute;
        top: 0px;
        left: 480px;
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom; }
      .home .screen .vineTop div:nth-of-type(1) img {
        -webkit-transform: rotate(0deg) scale(-1.5, 1.5) translate(110px, 10px);
                transform: rotate(0deg) scale(-1.5, 1.5) translate(110px, 10px); }
      .home .screen .vineTop div:nth-of-type(2) img {
        -webkit-transform: rotate(2deg) translate(160px, -10px);
                transform: rotate(2deg) translate(160px, -10px); }
      .home .screen .vineTop div:nth-of-type(3) img {
        -webkit-transform: rotate(-3deg) scale(-1.2, 1.2) translate(-140px, 30px);
                transform: rotate(-3deg) scale(-1.2, 1.2) translate(-140px, 30px); }
      .home .screen .vineTop div:nth-of-type(4) img {
        -webkit-transform: rotate(-10deg) scale(-1.5, 1.5) translate(0px, 0px);
                transform: rotate(-10deg) scale(-1.5, 1.5) translate(0px, 0px); }
    .home .screen .vineTop.intro {
      opacity: 0; }
    .home .screen .vineFront {
      /*div:nth-of-type(1) img {
				transform: rotate(-4deg) scale(1.7) translate(0px,0px);
			}
			div:nth-of-type(2) img {
				transform: rotate(1deg) scale(-1.2,1.2) translate(-130px,310px);
			}*/ }
      .home .screen .vineFront div img {
        height: 350px;
        position: absolute;
        top: -100px;
        left: 400px;
        -webkit-transform-origin: center top;
                transform-origin: center top; }
      .home .screen .vineFront #vineFront1.intro {
        -webkit-transform: rotate(-90deg) scale(0.05, 0.05);
                transform: rotate(-90deg) scale(0.05, 0.05); }
      .home .screen .vineFront #vineFront2.intro {
        -webkit-transform: rotate(-90deg) scale(-0.05, 0.05);
                transform: rotate(-90deg) scale(-0.05, 0.05); }
      .home .screen .vineFront #vineFront2 {
        top: 370px;
        left: 550px; }
    .home .screen .fatLeaf {
      position: relative; }
      .home .screen .fatLeaf div img {
        height: 250px;
        position: absolute;
        top: 80px;
        left: 330px;
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
        -webkit-transform: rotate(-65deg) scale(1, 1);
                transform: rotate(-65deg) scale(1, 1); }
      .home .screen .fatLeaf div:nth-of-type(2) img {
        -webkit-transform: rotate(-40deg) scale(1.2, 1.2);
                transform: rotate(-40deg) scale(1.2, 1.2); }
      .home .screen .fatLeaf div:nth-of-type(3) img {
        -webkit-transform: rotate(20deg) scale(-1.2, 1.2) translate(-180px, -60px);
                transform: rotate(20deg) scale(-1.2, 1.2) translate(-180px, -60px); }
      .home .screen .fatLeaf div:nth-of-type(4) img {
        -webkit-transform: rotate(40deg) scale(-1, 1) translate(-230px, -160px);
                transform: rotate(40deg) scale(-1, 1) translate(-230px, -160px); }
    .home .screen .fatLeaf.intro {
      opacity: 0;
      -webkit-transform: scale(0.7, 1);
              transform: scale(0.7, 1); }
    .home .screen .flower div img {
      height: 250px;
      position: absolute;
      top: 130px;
      left: 440px;
      -webkit-transform-origin: bottom left;
              transform-origin: bottom left; }
    .home .screen .flower #flower1.intro {
      -webkit-transform: rotate(4deg) scale(0.05);
              transform: rotate(4deg) scale(0.05); }
    .home .screen .flower #flower2.intro {
      -webkit-transform: scale(-0.05, 0.05) translate(80px, 10px);
              transform: scale(-0.05, 0.05) translate(80px, 10px); }

.star_wrapper #tab.rosaline {
  fill: #5668BF; }

.star_wrapper #tab.miyabi {
  fill: #c983f7; }

.star_wrapper #tab.aegis {
  fill: #efc752; }

.star_wrapper #tab.mit {
  fill: #f23857; }

.star_wrapper #tab.alliant {
  fill: #b4d031; }

.star_wrapper #tab.ufcu {
  fill: #c29a1a; }

.star_wrapper #tab.wingsports {
  fill: #39b54a; }

.star_wrapper #tab.msa {
  fill: #eb0000; }

@-webkit-keyframes rosaline_dots {
  10% {
    fill: pink; }
  33% {
    fill: black; }
  66% {
    fill: yellow; }
  100% {
    fill: orange; } }

@keyframes rosaline_dots {
  10% {
    fill: pink; }
  33% {
    fill: black; }
  66% {
    fill: yellow; }
  100% {
    fill: orange; } }

@-webkit-keyframes rosaline_dots2 {
  10% {
    fill: black; }
  33% {
    fill: pink; }
  66% {
    fill: orange; }
  100% {
    fill: aqua; } }

@keyframes rosaline_dots2 {
  10% {
    fill: black; }
  33% {
    fill: pink; }
  66% {
    fill: orange; }
  100% {
    fill: aqua; } }

@-webkit-keyframes rosaline_dots3 {
  10% {
    fill: coral; }
  33% {
    fill: orange; }
  66% {
    fill: pink; }
  100% {
    fill: black; } }

@keyframes rosaline_dots3 {
  10% {
    fill: coral; }
  33% {
    fill: orange; }
  66% {
    fill: pink; }
  100% {
    fill: black; } }

.align-left-0 {
  margin-left: 0px;
  margin-right: auto; }

.align-right-0 {
  margin-left: auto;
  margin-right: 0px; }

.align-left-10 {
  margin-left: 10px;
  margin-right: auto; }

.align-right-10 {
  margin-left: auto;
  margin-right: 10px; }

.footnote {
  font-style: italic;
  font-size: .8em; }

@media (max-width: 420px) {
  .notMobile {
    display: none; } }

.project {
  opacity: 1;
  font-size: 1em; }
  .project a:link, .project a:visited {
    color: white; }

@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 420px) and (min-resolution: 192dpi), (max-width: 420px) and (min-resolution: 2dppx) {
  .project {
    font-size: 14px; } }
  .project .screen {
    position: relative;
    height: 100vh;
    overflow: hidden; }
    .project .screen .tabletBg2 {
      background: #f2f2f2;
      /* Old browsers */
      /* FF3.6-15 */
      background: -webkit-radial-gradient(top, ellipse cover, #f2f2f2 0%, #c4c4c8 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: -webkit-radial-gradient(top ellipse, #f2f2f2 0%, #c4c4c8 100%);
      background: radial-gradient(ellipse at top, #f2f2f2 0%, #c4c4c8 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startGrad', endColorstr='$endGrad',GradientType=1 );
      /* IE6-9 fallback on horizontal gradient */ }
    .project .screen .tabletBg, .project .screen .phoneBg {
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;White+Gloss+%232 */
      background: #ffffff;
      /* Old browsers */
      /* FF3.6-15 */
      background: -webkit-linear-gradient(-45deg, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: -webkit-linear-gradient(315deg, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
      background: linear-gradient(135deg, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
      /* IE6-9 fallback on horizontal gradient */
      border-radius: 2.5em; }
      .project .screen .tabletBg.dark, .project .screen .phoneBg.dark {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#545454+0,0e0e0e+100 */
        background: #545454;
        /* Old browsers */
        /* FF3.6-15 */
        background: -webkit-linear-gradient(-45deg, #545454 0%, #0e0e0e 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: -webkit-linear-gradient(315deg, #545454 0%, #0e0e0e 100%);
        background: linear-gradient(135deg, #545454 0%, #0e0e0e 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#0e0e0e',GradientType=1 );
        /* IE6-9 fallback on horizontal gradient */ }
      @media (max-width: 768px) {
        .project .screen .tabletBg, .project .screen .phoneBg {
          border-radius: 1.5em; } }
      @media (max-width: 420px) {
        .project .screen .tabletBg, .project .screen .phoneBg {
          border-radius: 1em; } }
    .project .screen .tabletBg {
      margin: 0px auto;
      width: 65%;
      -webkit-transform: scale(0.9);
              transform: scale(0.9); }
      @media (max-height: 768px) {
        .project .screen .tabletBg {
          width: 50%; } }
      @media (max-height: 420px) {
        .project .screen .tabletBg {
          width: 30%; } }
      @media (max-width: 768px) {
        .project .screen .tabletBg {
          width: 85%; } }
      @media (max-width: 420px) {
        .project .screen .tabletBg {
          width: 85%; } }
      .project .screen .tabletBg:after {
        padding-top: 75%;
        /* 4:3 ratio */
        display: block;
        content: ''; }
      .project .screen .tabletBg .tabletScreen {
        position: absolute;
        width: 82%;
        top: 5%;
        overflow: hidden;
        left: 10%;
        height: 90%;
        width: 80%;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #b2b2b2;
        border-right: 1px solid #b2b2b2; }
    .project .screen .screenThing {
      width: 100%; }
    .project .screen .phoneBg {
      position: relative;
      width: 22%;
      margin-top: -35%;
      overflow: hidden;
      right: -85%;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
      border-radius: 1em;
      -webkit-transform: translateY(20%);
              transform: translateY(20%);
      height: auto; }
      @media (max-height: 1024px) {
        .project .screen .phoneBg {
          right: -72%;
          width: 16%;
          margin-top: -27%; } }
      @media (max-height: 768px) {
        .project .screen .phoneBg {
          right: -65%; } }

@media (max-height: 768px) and (max-width: 768px) {
  .project .screen .phoneBg {
    width: 20%;
    right: -75%;
    border-radius: .5em; } }
      .project .screen .phoneBg .phoneScreen {
        position: absolute;
        width: 85%;
        top: 10%;
        overflow: hidden;
        left: 7.5%;
        height: 80%;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #b2b2b2;
        border-right: 1px solid #b2b2b2; }
      .project .screen .phoneBg:after {
        padding-top: 180%;
        /* 4:3 ratio */
        display: block;
        content: ''; }
    .project .screen.samples {
      padding-top: 10vh;
      text-align: center;
      background: white; }
    .project .screen.samples:last-of-type {
      padding-bottom: 10vh; }
    .project .screen .stillFrame {
      position: fixed;
      height: 100vh;
      width: 100vw;
      top: 0;
      overflow: hidden; }
      .project .screen .stillFrame.off {
        top: -100vh; }
      .project .screen .stillFrame .portLabel {
        position: absolute;
        width: 100%;
        font-size: 1em;
        margin-top: 2%; }
    .project .screen .textWrapperCentered {
      text-align: center;
      position: absolute;
      display: block;
      top: 50%;
      font-size: 1em;
      left: 50%;
      max-height: 90vh;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      width: auto; }
    .project .screen .projWrapper {
      max-width: 1200px; }
    .project .screen .projWrapper .portItem {
      opacity: 0;
      position: absolute; }
    .project .screen img.img_port_content {
      width: 80%; }
    .project .screen .portfolio.arrow {
      position: absolute;
      bottom: 0vh;
      background: none;
      left: 50%;
      width: 100%;
      min-height: 7vh;
      -webkit-transform: translate(-50%, -150%);
              transform: translate(-50%, -150%);
      display: block;
      opacity: 0;
      cursor: pointer;
      text-align: center;
      padding: 15px 15px 0px 15px; }
      .project .screen .portfolio.arrow.mover {
        bottom: 0vh;
        -webkit-transform: translate(-50%, -10px);
                transform: translate(-50%, -10px);
        opacity: 1; }
      .project .screen .portfolio.arrow svg.projArrow {
        height: 25px;
        width: 48px;
        -webkit-transform: scale(1.2);
                transform: scale(1.2); }
        .project .screen .portfolio.arrow svg.projArrow .st0 {
          fill: white; }
  .project .desc .textWrapperCentered {
    width: 100%;
    text-align: left;
    margin: 0px auto;
    font-family: 'kettering_105regular';
    margin-top: 0px;
    padding-bottom: .2em;
    border-top: 1px solid white;
    border-bottom: 1px solid white; }
    .project .desc .textWrapperCentered h2 {
      font-family: 'kettering_105light';
      text-transform: uppercase;
      font-size: 1.2em;
      margin-top: 0px;
      margin-bottom: .5em; }
    .project .desc .textWrapperCentered h1 {
      margin-top: 0px;
      font-weight: 100;
      font-size: 4rem; }

@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 420px) and (min-resolution: 192dpi), (max-width: 420px) and (min-resolution: 2dppx) {
  .project .desc .textWrapperCentered h1 {
    font-size: 3em;
    width: 90vw;
    margin: 0px auto; } }
    .project .desc .textWrapperCentered hr {
      width: 30%; }
    .project .desc .textWrapperCentered #port-svg {
      width: 66px;
      height: 50px;
      margin-top: 10px; }
      .project .desc .textWrapperCentered #port-svg circle {
        fill: white; }
    .project .desc .textWrapperCentered h2 {
      font-size: 1.3em; }
    @media (max-width: 768px) {
      .project .desc .textWrapperCentered {
        width: 80vw; } }

@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 420px) and (min-resolution: 192dpi), (max-width: 420px) and (min-resolution: 2dppx) {
  .project .desc .textWrapperCentered {
    width: 75vw; } }
    .project .desc .textWrapperCentered .barDecoration {
      border-top: 8px solid white;
      width: 25%; }
    .project .desc .textWrapperCentered .portIntro {
      width: 50%;
      text-align: left;
      margin: 0px auto;
      max-width: 800px; }
      @media (max-width: 768px) {
        .project .desc .textWrapperCentered .portIntro {
          width: 100%; } }
    .project .desc .textWrapperCentered .introBarBottom {
      display: block;
      width: 50%;
      max-width: 800px;
      height: 1px;
      border-top: 1px solid white;
      position: relative;
      bottom: 0;
      margin: 0px auto;
      -webkit-transform: translateY(-60vh);
              transform: translateY(-60vh);
      opacity: 0;
      max-width: 800px; }
      @media (max-width: 768px) {
        .project .desc .textWrapperCentered .introBarBottom {
          width: 100%; } }
      .project .desc .textWrapperCentered .introBarBottom.mover {
        opacity: 1;
        bottom: 0;
        -webkit-transform: translateY(0vh);
                transform: translateY(0vh); }
    .project .desc .textWrapperCentered .subText {
      font-family: Source Sans Pro, Helvetica, Arial, Courier, sans-serif;
      font-weight: 200;
      width: 50%;
      padding-right: 1em;
      display: inline-block;
      vertical-align: top;
      margin-bottom: 2em; }
      @media (max-width: 1024px) {
        .project .desc .textWrapperCentered .subText {
          width: 100%;
          display: block;
          font-size: 1.2em; }
          .project .desc .textWrapperCentered .subText.responsibilities {
            display: none; } }
      @media (max-width: 420px) {
        .project .desc .textWrapperCentered .subText {
          display: none; } }
      .project .desc .textWrapperCentered .subText h3 {
        color: white;
        font-size: 1em;
        font-weight: bold;
        margin-top: 0px; }
        @media (max-width: 420px) {
          .project .desc .textWrapperCentered .subText h3 {
            display: none; } }
    .project .desc .textWrapperCentered p {
      margin-top: 1em;
      margin-bottom: 1em; }
    .project .desc .textWrapperCentered .summary {
      font-size: 2em;
      line-height: 1.2em; }
      @media (max-width: 420px) {
        .project .desc .textWrapperCentered .summary {
          font-size: 1.5em; } }
  .project a:hover div.next-project {
    text-decoration: none; }
  .project .screen.next-project {
    background: #631063;
    height: auto;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    display: block; }
    @media (max-width: 420px) {
      .project .screen.next-project {
        padding-top: 1.3rem;
        padding-bottom: 1.3rem; } }
    .project .screen.next-project a:hover {
      text-decoration: none; }
    .project .screen.next-project h3 {
      display: inline-block;
      font-family: kettering_105regular;
      font-size: 1.5em;
      margin: 0px;
      text-transform: uppercase;
      color: #c983f7; }
      @media (max-width: 420px) {
        .project .screen.next-project h3 {
          font-size: 1.2rem; } }
    .project .screen.next-project h2 {
      display: inline-block;
      font-family: kettering_105bold;
      color: white;
      font-size: 2.5rem;
      margin-top: 10px; }
      @media (max-width: 420px) {
        .project .screen.next-project h2 {
          font-size: 2rem;
          margin-top: .5rem;
          line-height: 2rem; } }

.project.off {
  opacity: 0; }

/*   INDIVIDUAL PROJECTS   */
.project.miyabi {
  background: #700070;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #540054 0%, #000000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-radial-gradient(center ellipse, #540054 0%, #000000 100%);
  background: radial-gradient(ellipse at center, #540054 0%, #000000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#540054', endColorstr='#000000',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  background-attachment: fixed; }
  .project.miyabi .intro h2 {
    color: #c983f7; }
  .project.miyabi .tabletObject rect {
    fill: #141414; }
  .project.miyabi .screen.desc {
    height: 100vh;
    margin-bottom: 10px; }
    .project.miyabi .screen.desc h2 {
      margin-top: 2rem;
      text-transform: uppercase;
      color: #f4f4a3; }
    .project.miyabi .screen.desc p {
      margin-top: 0; }
    .project.miyabi .screen.desc .textWrapperCentered {
      border-top: none;
      border-bottom: none; }
      .project.miyabi .screen.desc .textWrapperCentered .portIntro {
        border-top: 1px solid #c983f7; }
      .project.miyabi .screen.desc .textWrapperCentered .barDecoration {
        border-top: 8px solid #c983f7; }
      .project.miyabi .screen.desc .textWrapperCentered .introBarBottom {
        max-width: 800px;
        border-top: 1px solid #c983f7; }
      .project.miyabi .screen.desc .textWrapperCentered .subText h3 {
        color: #c983f7; }
  .project.miyabi .screen.samples {
    background: none;
    height: 50vh;
    background-attachment: fixed; }
    .project.miyabi .screen.samples .projWrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
  .project.miyabi .screen.samples.part2 .projWrapper {
    width: 100%;
    height: auto;
    opacity: 1; }
    @media (max-width: 768px) {
      .project.miyabi .screen.samples.part2 .projWrapper {
        width: 100%; } }
    .project.miyabi .screen.samples.part2 .projWrapper .portItem {
      opacity: 0;
      position: relative; }
  .project.miyabi .screen.samples.part3 .projWrapper {
    width: 90vw;
    max-width: 1200px; }

@media (max-width: 768px) and (orientation: landscape) {
  .project.miyabi .screen.samples.part3 .projWrapper {
    width: 100%; } }
    .project.miyabi .screen.samples.part3 .projWrapper .portItem {
      width: 20%;
      margin: 4%;
      padding: 4%;
      background: #141414;
      position: relative; }
      @media (max-width: 768px) {
        .project.miyabi .screen.samples.part3 .projWrapper .portItem {
          height: auto;
          display: block;
          width: 30%;
          margin: 6% auto;
          padding: 5%;
          margin-top: 0; } }
      @media (max-width: 420px) {
        .project.miyabi .screen.samples.part3 .projWrapper .portItem {
          height: auto;
          width: 40%;
          margin: 6% auto;
          padding: 5%;
          margin-top: 0; } }
  .project.miyabi .screen.samples.part4 .projWrapper {
    width: 100%;
    max-width: 1200px;
    text-align: center; }
    .project.miyabi .screen.samples.part4 .projWrapper.off {
      opacity: 1; }
    .project.miyabi .screen.samples.part4 .projWrapper .portLabel {
      position: relative; }
    .project.miyabi .screen.samples.part4 .projWrapper .portItem {
      position: relative;
      display: block;
      float: left;
      margin: 0px auto; }
      .project.miyabi .screen.samples.part4 .projWrapper .portItem .portLabel {
        position: relative; }
      .project.miyabi .screen.samples.part4 .projWrapper .portItem.item4_01 {
        width: 40%;
        padding: 1%;
        margin-left: 5%;
        margin-left: 15%;
        padding-top: 0; }
        @media (max-width: 768px) {
          .project.miyabi .screen.samples.part4 .projWrapper .portItem.item4_01 {
            width: 60%;
            margin-left: 20%;
            clear: both; } }
      .project.miyabi .screen.samples.part4 .projWrapper .portItem.item4_02 {
        width: 20%;
        margin-left: 5%;
        margin-right: 15%; }
        @media (max-width: 768px) {
          .project.miyabi .screen.samples.part4 .projWrapper .portItem.item4_02 {
            width: 35%;
            margin-left: 10%;
            margin-right: 5%;
            margin-top: 10%; } }
      .project.miyabi .screen.samples.part4 .projWrapper .portItem.item4_03 {
        margin-top: 2%;
        width: 20%;
        margin-left: 5%;
        margin-right: 15%; }
        @media (max-width: 768px) {
          .project.miyabi .screen.samples.part4 .projWrapper .portItem.item4_03 {
            width: 35%;
            margin-left: 5%;
            margin-right: 10%;
            margin-top: 10%; } }
      .project.miyabi .screen.samples.part4 .projWrapper .portItem.item4_04 {
        position: relative;
        width: 30%;
        float: left;
        margin-top: 1.5%; }
        @media (max-width: 768px) {
          .project.miyabi .screen.samples.part4 .projWrapper .portItem.item4_04 {
            width: 100%;
            margin: 1%; } }
      .project.miyabi .screen.samples.part4 .projWrapper .portItem.item4_05 {
        position: relative;
        width: 50%;
        right: 5%;
        bottom: -2vh; }
  .project.miyabi .screen.samples.part5 .projWrapper {
    width: 768px;
    min-height: 600px;
    width: 100%; }
    .project.miyabi .screen.samples.part5 .projWrapper.off {
      opacity: 1; }
    .project.miyabi .screen.samples.part5 .projWrapper .portItem.item5_01 {
      right: 60%;
      width: 15%;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); }
    .project.miyabi .screen.samples.part5 .projWrapper .portItem.item5_02 {
      top: 0%;
      left: 48%;
      width: 30%;
      -webkit-transform: translateY(-20%);
              transform: translateY(-20%); }
  .project.miyabi .screen.samples.part5 .projWrapper .portItem.done, .project.miyabi .screen.samples.part4 .projWrapper .portItem.done, .project.miyabi .screen.samples.part3 .projWrapper .portItem.done, .project.miyabi .screen.samples.part2 .projWrapper .portItem.done {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1; }
  .project.miyabi .screen.next-project {
    background: #631063; }
    .project.miyabi .screen.next-project h3 {
      color: #c983f7; }

.project.alliant {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3b7a1a+0,000000+100 */
  background: #1e5457;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #1e5457 0%, #000000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-radial-gradient(center ellipse, #1e5457 0%, #000000 100%);
  background: radial-gradient(ellipse at center, #1e5457 0%, #000000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5457', endColorstr='#000000',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  background-attachment: fixed; }
  .project.alliant .screen.desc {
    height: 100vh;
    margin-bottom: 10px; }
    .project.alliant .screen.desc h2 {
      margin-top: 2rem;
      text-transform: uppercase;
      color: #b4d031; }
    .project.alliant .screen.desc p {
      margin-top: 0; }
    .project.alliant .screen.desc .textWrapperCentered {
      border-top: none;
      border-bottom: none; }
      .project.alliant .screen.desc .textWrapperCentered .portIntro {
        border-top: 1px solid #47c5ca; }
      .project.alliant .screen.desc .textWrapperCentered .barDecoration {
        border-top: 8px solid #47c5ca; }
      .project.alliant .screen.desc .textWrapperCentered .introBarBottom {
        max-width: 800px;
        border-top: 1px solid #47c5ca; }
      .project.alliant .screen.desc .textWrapperCentered .subText h3 {
        color: #47c5ca; }
  .project.alliant .screen.samples {
    background: none;
    height: 50vh;
    background-attachment: fixed; }
    .project.alliant .screen.samples .projWrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
  .project.alliant .screen.samples.part2 .projWrapper {
    width: 90vw;
    opacity: 1; }
    @media (max-width: 768px) {
      .project.alliant .screen.samples.part2 .projWrapper {
        width: 100%; } }
    .project.alliant .screen.samples.part2 .projWrapper .portItem {
      width: 30%;
      max-height: 300px;
      margin: 1%;
      opacity: 0;
      position: relative; }
      @media (max-width: 768px) {
        .project.alliant .screen.samples.part2 .projWrapper .portItem {
          width: 40%; } }
      .project.alliant .screen.samples.part2 .projWrapper .portItem.item2_07 {
        margin: 0;
        width: 100%; }
      @media (max-width: 420px) {
        .project.alliant .screen.samples.part2 .projWrapper .portItem {
          width: 60%;
          max-height: 20%; }
          .project.alliant .screen.samples.part2 .projWrapper .portItem:nth-of-type(2), .project.alliant .screen.samples.part2 .projWrapper .portItem:nth-of-type(6) {
            display: none; } }
  .project.alliant .screen.samples.part3 .projWrapper {
    width: 90vw;
    max-width: 1200px;
    max-height: 90vh; }
    @media (max-width: 768px) {
      .project.alliant .screen.samples.part3 .projWrapper {
        width: 100%;
        height: 75vh; } }
    .project.alliant .screen.samples.part3 .projWrapper.off {
      -webkit-transform: translate(-50%, -200%);
              transform: translate(-50%, -200%); }
    .project.alliant .screen.samples.part3 .projWrapper .portItem.cards {
      position: relative;
      width: 22%;
      top: 0;
      margin-left: 3%;
      -webkit-transform: translateX(-120%);
              transform: translateX(-120%); }

@media (min-width: 421px) and (max-width: 768px) {
  .project.alliant .screen.samples.part3 .projWrapper .portItem.cards {
    width: 40%; } }
      @media (max-width: 420px) {
        .project.alliant .screen.samples.part3 .projWrapper .portItem.cards {
          width: 50%;
          margin-bottom: 5%; } }
    .project.alliant .screen.samples.part3 .projWrapper .portItem.letterhead {
      position: relative;
      left: 3%;
      width: 25%;
      -webkit-transform: translateY(-150%);
              transform: translateY(-150%); }

@media (min-width: 421px) and (max-width: 768px) {
  .project.alliant .screen.samples.part3 .projWrapper .portItem.letterhead {
    width: 35%;
    margin-left: 5%; } }
      @media (max-width: 420px) {
        .project.alliant .screen.samples.part3 .projWrapper .portItem.letterhead {
          width: 60%;
          margin-bottom: 6%; } }
    .project.alliant .screen.samples.part3 .projWrapper .portItem.folder {
      position: relative;
      width: 26%;
      left: 7%;
      -webkit-transform: translateX(120%);
              transform: translateX(120%); }

@media (min-width: 421px) and (max-width: 768px) {
  .project.alliant .screen.samples.part3 .projWrapper .portItem.folder {
    width: 35%;
    margin-left: -5%;
    margin-top: -5%; } }
      @media (max-width: 420px) {
        .project.alliant .screen.samples.part3 .projWrapper .portItem.folder {
          width: 60%;
          margin-left: -20%;
          left: 30%;
          margin-bottom: 6%; } }
    .project.alliant .screen.samples.part3 .projWrapper .portItem.env {
      position: relative;
      top: 0%;
      margin-right: 5%;
      margin-left: 22%;
      width: 25%;
      left: 0%;
      -webkit-transform: translateY(150%);
              transform: translateY(150%); }

@media (min-width: 421px) and (max-width: 768px) {
  .project.alliant .screen.samples.part3 .projWrapper .portItem.env {
    width: 35%;
    margin-left: 5%; } }
      @media (max-width: 420px) {
        .project.alliant .screen.samples.part3 .projWrapper .portItem.env {
          width: 60%;
          margin-left: -20%; } }
    .project.alliant .screen.samples.part3 .projWrapper .portItem.notebook {
      position: relative;
      width: 12%;
      left: -50%;
      margin-left: 0%;
      -webkit-transform: translateX(-200%);
              transform: translateX(-200%); }

@media (min-width: 421px) and (max-width: 768px) {
  .project.alliant .screen.samples.part3 .projWrapper .portItem.notebook {
    width: 20%;
    left: 0;
    margin-left: 50%;
    margin-top: -5%; } }
      @media (max-width: 420px) {
        .project.alliant .screen.samples.part3 .projWrapper .portItem.notebook {
          display: none; } }
  .project.alliant .screen.samples.part4 .projWrapper {
    width: 100%;
    height: auto;
    opacity: 1; }
    @media (max-width: 768px) {
      .project.alliant .screen.samples.part4 .projWrapper {
        width: 100%; } }
    .project.alliant .screen.samples.part4 .projWrapper .portItem {
      opacity: 0;
      position: relative; }
      .project.alliant .screen.samples.part4 .projWrapper .portItem.item4_01 {
        margin: 0px auto;
        -webkit-transform: scale(0.8);
                transform: scale(0.8); }
  .project.alliant .screen.samples.part5 .projWrapper {
    width: 768px;
    min-height: 600px;
    width: 100%; }
    @media (max-width: 768px) {
      .project.alliant .screen.samples.part5 .projWrapper {
        min-height: auto;
        width: 100%; } }
    .project.alliant .screen.samples.part5 .projWrapper.off {
      opacity: 1; }
    .project.alliant .screen.samples.part5 .projWrapper .portItem.item5_01 {
      left: 0%;
      height: 80vh;
      position: relative;
      -webkit-transform: translateY(-20%);
              transform: translateY(-20%); }
      @media (max-width: 768px) {
        .project.alliant .screen.samples.part5 .projWrapper .portItem.item5_01 {
          height: auto;
          width: 80vw; } }
    .project.alliant .screen.samples.part5 .projWrapper .portItem.item5_02 {
      position: relative;
      right: 0%;
      margin-left: 10%;
      width: 15%;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); }
      @media (max-width: 768px) {
        .project.alliant .screen.samples.part5 .projWrapper .portItem.item5_02 {
          width: 60%;
          display: NONE;
          margin-left: 0; } }
  .project.alliant .screen.samples.part5 .projWrapper .portItem.done, .project.alliant .screen.samples.part4 .projWrapper .portItem.done, .project.alliant .screen.samples.part3 .projWrapper .portItem.done, .project.alliant .screen.samples.part2 .projWrapper .portItem.done {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1; }
  .project.alliant .screen.next-project {
    background: #105052; }
    .project.alliant .screen.next-project h3 {
      color: grey; }

.project.aegis-mad {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3b7a1a+0,000000+100 */
  background: #261c10;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #261c10 0%, #000000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-radial-gradient(center ellipse, #261c10 0%, #000000 100%);
  background: radial-gradient(ellipse at center, #261c10 0%, #000000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#261c10', endColorstr='#000000',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  background-attachment: fixed; }
  .project.aegis-mad .screen.desc {
    height: 100vh;
    margin-bottom: 10px; }
    .project.aegis-mad .screen.desc h2 {
      margin-top: 2rem;
      text-transform: uppercase;
      color: #efc752; }
    .project.aegis-mad .screen.desc p {
      margin-top: 0; }
    .project.aegis-mad .screen.desc .textWrapperCentered {
      border-top: none;
      border-bottom: none; }
      .project.aegis-mad .screen.desc .textWrapperCentered .portIntro {
        border-top: 1px solid #ff9700; }
      .project.aegis-mad .screen.desc .textWrapperCentered .barDecoration {
        border-top: 8px solid #ff9700; }
      .project.aegis-mad .screen.desc .textWrapperCentered .introBarBottom {
        max-width: 800px;
        border-top: 1px solid #ff9700; }
      .project.aegis-mad .screen.desc .textWrapperCentered .subText h3 {
        color: #ff9700; }
  .project.aegis-mad .screen.samples {
    background: none;
    height: 50vh;
    background-attachment: fixed; }
    .project.aegis-mad .screen.samples .projWrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
  .project.aegis-mad .screen.samples.part2 .projWrapper {
    width: 100%;
    height: auto; }
    .project.aegis-mad .screen.samples.part2 .projWrapper.off {
      opacity: 0; }
    .project.aegis-mad .screen.samples.part2 .projWrapper .portLabel {
      position: relative;
      bottom: -3vh; }
    .project.aegis-mad .screen.samples.part2 .projWrapper .portItem.item2_01 {
      left: 250%;
      width: 50%;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); }
    .project.aegis-mad .screen.samples.part2 .projWrapper .portItem.item2_02 {
      top: 35%;
      right: 15%;
      width: 15%;
      -webkit-transform: translateX(20%);
              transform: translateX(20%); }
      @media (max-width: 768px) {
        .project.aegis-mad .screen.samples.part2 .projWrapper .portItem.item2_02 {
          display: none; } }
    .project.aegis-mad .screen.samples.part2 .projWrapper .portItem.item2_03 {
      left: 50%;
      width: 600px;
      min-height: 367px;
      position: relative;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      overflow: hidden; }
      .project.aegis-mad .screen.samples.part2 .projWrapper .portItem.item2_03.done {
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%); }
      .project.aegis-mad .screen.samples.part2 .projWrapper .portItem.item2_03 > video {
        background: url(../../images/aegis/aegis_page3_madison.jpg);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background-size: cover; }
  .project.aegis-mad .screen.samples.part3 .projWrapper {
    max-width: 1200px;
    width: 90%; }

@media (max-width: 768px) and (orientation: landscape) {
  .project.aegis-mad .screen.samples.part3 .projWrapper {
    width: 100%;
    height: auto; } }
    .project.aegis-mad .screen.samples.part3 .projWrapper .portItem {
      width: 42%;
      margin: 10px;
      display: inline-block;
      position: relative; }
      @media (max-width: 420px) {
        .project.aegis-mad .screen.samples.part3 .projWrapper .portItem.item3_01, .project.aegis-mad .screen.samples.part3 .projWrapper .portItem.item3_02, .project.aegis-mad .screen.samples.part3 .projWrapper .portItem.item3_03 {
          height: 20vh;
          width: auto; } }
      @media (max-width: 420px) {
        .project.aegis-mad .screen.samples.part3 .projWrapper .portItem.item3_04 {
          display: none; } }
  .project.aegis-mad .screen.samples.part4 .projWrapper {
    width: 768px;
    height: 600px;
    width: 100%; }
    .project.aegis-mad .screen.samples.part4 .projWrapper.off {
      opacity: 1; }
    .project.aegis-mad .screen.samples.part4 .projWrapper .portItem.tablet {
      left: 25%;
      width: 50%;
      -webkit-transform: translateX(-20%);
              transform: translateX(-20%); }
    .project.aegis-mad .screen.samples.part4 .projWrapper .portItem.mobile {
      top: 40%;
      left: 68%;
      width: 15%;
      -webkit-transform: translateY(10%);
              transform: translateY(10%); }
  .project.aegis-mad .screen.samples.part5 .projWrapper .portItem.done, .project.aegis-mad .screen.samples.part4 .projWrapper .portItem.done, .project.aegis-mad .screen.samples.part3 .projWrapper .portItem.done, .project.aegis-mad .screen.samples.part2 .projWrapper .portItem.done {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1; }
  .project.aegis-mad .screen.next-project {
    background: #490303; }
    .project.aegis-mad .screen.next-project h3 {
      color: grey; }

.project.wingsports {
  background: #700070;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #194f2a 0%, #000000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-radial-gradient(center ellipse, #194f2a 0%, #000000 100%);
  background: radial-gradient(ellipse at center, #194f2a 0%, #000000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#194f2a', endColorstr='#000000',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  background-attachment: fixed; }
  .project.wingsports .intro h2 {
    color: #c983f7; }
  .project.wingsports .tabletObject rect {
    fill: #141414; }
  .project.wingsports .screen.desc {
    height: 100vh;
    margin-bottom: 10px; }
    .project.wingsports .screen.desc h2 {
      margin-top: 2rem;
      text-transform: uppercase;
      color: #fcee21; }
    .project.wingsports .screen.desc p {
      margin-top: 0; }
    .project.wingsports .screen.desc .textWrapperCentered {
      border-top: none;
      border-bottom: none; }
      .project.wingsports .screen.desc .textWrapperCentered .portIntro {
        border-top: 1px solid #39b54a; }
      .project.wingsports .screen.desc .textWrapperCentered .barDecoration {
        border-top: 8px solid #39b54a; }
      .project.wingsports .screen.desc .textWrapperCentered .introBarBottom {
        border-top: 1px solid #39b54a; }
      .project.wingsports .screen.desc .textWrapperCentered .subText h3 {
        color: #39b54a; }
  .project.wingsports .screen.samples {
    background: none;
    height: 50vh;
    background-attachment: fixed; }
    .project.wingsports .screen.samples .projWrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
  .project.wingsports .screen.samples.part2 .projWrapper {
    width: 90vw; }
  .project.wingsports .screen.samples.part2 .portItem {
    position: relative;
    display: table-cell;
    margin: 0px auto; }
    @media (max-width: 420px) {
      .project.wingsports .screen.samples.part2 .portItem .portLabel {
        position: relative; } }
    .project.wingsports .screen.samples.part2 .portItem.item2_01 {
      width: 35%; }
      .project.wingsports .screen.samples.part2 .portItem.item2_01 img {
        width: 75%; }
        @media (max-width: 420px) {
          .project.wingsports .screen.samples.part2 .portItem.item2_01 img {
            max-height: 30vh;
            width: auto; } }
      @media (max-width: 768px) {
        .project.wingsports .screen.samples.part2 .portItem.item2_01 {
          width: 70%; } }
    .project.wingsports .screen.samples.part2 .portItem.item2_02 {
      width: 65%; }
      .project.wingsports .screen.samples.part2 .portItem.item2_02 img {
        max-height: 80vh;
        width: auto; }
        @media (max-width: 420px) {
          .project.wingsports .screen.samples.part2 .portItem.item2_02 img {
            max-height: 45vh;
            margin-top: 2vh; } }
      @media (max-width: 768px) {
        .project.wingsports .screen.samples.part2 .portItem.item2_02 {
          width: 100%; } }
    @media (max-width: 768px) {
      .project.wingsports .screen.samples.part2 .portItem {
        width: 100%;
        display: block; } }
  .project.wingsports .screen.samples.part3 .projWrapper {
    width: 90vw; }
  .project.wingsports .screen.samples.part3 .portItem {
    position: relative;
    display: table-cell;
    margin: 0px auto; }
    @media (max-width: 768px) {
      .project.wingsports .screen.samples.part3 .portItem .portLabel {
        position: relative; } }
    .project.wingsports .screen.samples.part3 .portItem img {
      width: 100%;
      height: auto; }
      @media (max-width: 768px) {
        .project.wingsports .screen.samples.part3 .portItem img {
          max-height: 35vh;
          width: auto; } }
    .project.wingsports .screen.samples.part3 .portItem.item3_01 {
      width: 50%;
      padding-right: 2vw; }
    .project.wingsports .screen.samples.part3 .portItem.item3_02 {
      width: 50%;
      padding-left: 2vw; }
    @media (max-width: 768px) {
      .project.wingsports .screen.samples.part3 .portItem.item3_01, .project.wingsports .screen.samples.part3 .portItem.item3_02 {
        margin-top: 2vh;
        padding: 0;
        width: auto;
        display: block; } }
  .project.wingsports .screen.samples.part4 .projWrapper {
    width: 90vw; }
  .project.wingsports .screen.samples.part4 .portItem {
    position: relative;
    display: table-cell;
    margin: 0px auto; }
    .project.wingsports .screen.samples.part4 .portItem .portLabel {
      position: relative; }
    .project.wingsports .screen.samples.part4 .portItem.item4_01 {
      width: 50%;
      padding-right: 2%; }
    .project.wingsports .screen.samples.part4 .portItem.item4_02 {
      width: 50%;
      padding-left: 2%; }
    @media (max-width: 768px) {
      .project.wingsports .screen.samples.part4 .portItem.item4_01, .project.wingsports .screen.samples.part4 .portItem.item4_02 {
        width: 100%;
        padding: 0;
        margin-bottom: 2vh;
        display: block; } }
  .project.wingsports .screen.samples.part5 .projWrapper {
    width: 90vw;
    display: table; }
  .project.wingsports .screen.samples.part5 .portItem {
    position: relative;
    display: table-cell;
    margin: 0px auto; }
    .project.wingsports .screen.samples.part5 .portItem.item5_01 {
      padding-right: 2%; }
      @media (max-width: 768px) {
        .project.wingsports .screen.samples.part5 .portItem.item5_01 {
          display: none; } }
      .project.wingsports .screen.samples.part5 .portItem.item5_01 img {
        max-height: 50vh;
        width: auto; }
    .project.wingsports .screen.samples.part5 .portItem.item5_02 img {
      max-height: 50vh;
      width: auto;
      border: 3px solid white; }
    .project.wingsports .screen.samples.part5 .portItem.item5_03 {
      padding-left: 2%; }
      .project.wingsports .screen.samples.part5 .portItem.item5_03 img {
        max-height: 50vh;
        width: auto;
        border: 3px solid white; }
    .project.wingsports .screen.samples.part5 .portItem.item5_01, .project.wingsports .screen.samples.part5 .portItem.item5_02, .project.wingsports .screen.samples.part5 .portItem.item5_03 {
      width: 33%; }
    @media (max-width: 768px) {
      .project.wingsports .screen.samples.part5 .portItem.item5_02, .project.wingsports .screen.samples.part5 .portItem.item5_03 {
        padding: 0;
        width: 60%;
        display: block;
        margin-bottom: 2vh; }
        .project.wingsports .screen.samples.part5 .portItem.item5_02 img, .project.wingsports .screen.samples.part5 .portItem.item5_03 img {
          width: 80%; } }
    .project.wingsports .screen.samples.part5 .portItem .portLabel {
      position: relative; }
  .project.wingsports .screen.samples.part5 .projWrapper .portItem.done, .project.wingsports .screen.samples.part4 .projWrapper .portItem.done, .project.wingsports .screen.samples.part3 .projWrapper .portItem.done, .project.wingsports .screen.samples.part2 .projWrapper .portItem.done {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1; }
  .project.wingsports .screen.next-project {
    background: #003d52; }
    .project.wingsports .screen.next-project h3 {
      color: #00b1ec; }

.project.mit {
  background: #5c1319;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #5c1319 0%, #000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-radial-gradient(center ellipse, #5c1319 0%, #000 100%);
  background: radial-gradient(ellipse at center, #5c1319 0%, #000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$mit-grad-start', endColorstr='$mit-grad-end',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  background-attachment: fixed; }
  .project.mit .intro h2 {
    color: #c983f7; }
  .project.mit .tabletObject rect {
    fill: #141414; }
  .project.mit .screen.desc {
    height: 100vh;
    margin-bottom: 10px; }
    .project.mit .screen.desc h2 {
      margin-top: 2rem;
      text-transform: uppercase;
      color: #f4f4a3; }
    .project.mit .screen.desc p {
      margin-top: 0; }
    .project.mit .screen.desc .textWrapperCentered {
      border-top: none;
      border-bottom: none; }
      .project.mit .screen.desc .textWrapperCentered .portIntro {
        border-top: 1px solid #f23857; }
      .project.mit .screen.desc .textWrapperCentered .barDecoration {
        border-top: 8px solid #f23857; }
      .project.mit .screen.desc .textWrapperCentered .introBarBottom {
        max-width: 800px;
        border-top: 1px solid #f23857; }
      .project.mit .screen.desc .textWrapperCentered .subText h3 {
        color: #f23857; }
  .project.mit .screen.samples {
    background: none;
    height: 50vh;
    background-attachment: fixed; }
    .project.mit .screen.samples .projWrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
  .project.mit .screen.samples.part2 .projWrapper {
    width: 100%;
    height: auto;
    /* display: flex;
            align-items: center;
            justify-content: center;
*/
    opacity: 1; }
    @media (max-width: 768px) {
      .project.mit .screen.samples.part2 .projWrapper {
        width: 100%; } }
    .project.mit .screen.samples.part2 .projWrapper .portItem {
      margin: 0px auto;
      opacity: 0;
      position: relative; }
      .project.mit .screen.samples.part2 .projWrapper .portItem.item2_03 {
        width: 5%;
        right: 5%;
        bottom: 40%;
        margin-top: -10%;
        height: auto;
        position: absolute;
        display: block;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        /*@include media("<=desktop", "height<=tablet"){ //targeting phone!!!
                     width:10%;
                     background: orange;
                     right:45%;
                     bottom:-40%;
                  }*/ }
        @media (max-width: 768px) {
          .project.mit .screen.samples.part2 .projWrapper .portItem.item2_03 {
            width: 10%;
            right: 45%;
            bottom: -30%; } }
        @media (max-width: 420px) {
          .project.mit .screen.samples.part2 .projWrapper .portItem.item2_03 {
            width: 10%;
            right: 45%;
            bottom: -30%; } }
  .project.mit .screen.samples.part3 .projWrapper {
    width: 90vw;
    max-width: 1200px; }

@media (max-width: 768px) and (orientation: landscape) {
  .project.mit .screen.samples.part3 .projWrapper {
    width: 100%; } }
    .project.mit .screen.samples.part3 .projWrapper .portItem {
      width: 33%;
      padding: 1%;
      position: relative; }
      @media (max-width: 768px) {
        .project.mit .screen.samples.part3 .projWrapper .portItem {
          width: 40%;
          margin: 6%;
          padding: 5%;
          margin-top: 0; } }
      @media (max-width: 420px) {
        .project.mit .screen.samples.part3 .projWrapper .portItem {
          width: 80%;
          margin: 2%;
          padding: 5%;
          margin-top: 0; }
          .project.mit .screen.samples.part3 .projWrapper .portItem:first-of-type, .project.mit .screen.samples.part3 .projWrapper .portItem:nth-of-type(5) {
            display: none; } }
  .project.mit .screen.samples.part4 .projWrapper {
    width: 100%;
    height: auto;
    margin: 0px auto;
    text-align: center; }
    .project.mit .screen.samples.part4 .projWrapper.off {
      opacity: 1; }
    .project.mit .screen.samples.part4 .projWrapper .portLabel {
      position: relative; }
    .project.mit .screen.samples.part4 .projWrapper .portItem {
      position: relative;
      display: inline-block; }
      .project.mit .screen.samples.part4 .projWrapper .portItem .portLabel {
        position: relative; }
      .project.mit .screen.samples.part4 .projWrapper .portItem.item4_01 {
        width: 65%;
        position: relative;
        float: left;
        margin-left: 5%; }
        @media (max-height: 1024px) {
          .project.mit .screen.samples.part4 .projWrapper .portItem.item4_01 {
            width: 60%;
            margin-left: 7%; } }
        @media (max-width: 768px) {
          .project.mit .screen.samples.part4 .projWrapper .portItem.item4_01 {
            width: 90%;
            margin-left: 5%;
            clear: both; } }
      .project.mit .screen.samples.part4 .projWrapper .portItem.item4_01b {
        position: absolute;
        width: 55%;
        top: 3.5%;
        overflow: hidden;
        left: 9%;
        height: 90%;
        width: 82%;
        border: 1px solid #ccc; }
      .project.mit .screen.samples.part4 .projWrapper .portItem.item4_02, .project.mit .screen.samples.part4 .projWrapper .portItem.item4_03 {
        width: 25%;
        position: relative;
        float: left;
        margin-left: 5%; }
        @media (max-height: 1024px) {
          .project.mit .screen.samples.part4 .projWrapper .portItem.item4_02, .project.mit .screen.samples.part4 .projWrapper .portItem.item4_03 {
            width: 20%; } }
        @media (max-width: 768px) {
          .project.mit .screen.samples.part4 .projWrapper .portItem.item4_02, .project.mit .screen.samples.part4 .projWrapper .portItem.item4_03 {
            width: 35%;
            margin-left: 10%;
            margin-right: 5%;
            margin-top: 10%; } }
      .project.mit .screen.samples.part4 .projWrapper .portItem.item4_04 {
        position: relative;
        width: 25%;
        float: left;
        margin-left: 5%;
        margin-top: 1.5%; }
        @media (max-height: 1024px) {
          .project.mit .screen.samples.part4 .projWrapper .portItem.item4_04 {
            width: 20%; } }
        @media (max-width: 768px) {
          .project.mit .screen.samples.part4 .projWrapper .portItem.item4_04 {
            width: 100%;
            margin: 1%; } }
      .project.mit .screen.samples.part4 .projWrapper .portItem.item4_05 {
        position: relative;
        width: 50%;
        right: 5%;
        bottom: -2vh; }
  .project.mit .screen.samples.part5 .projWrapper {
    width: 768px;
    min-height: 600px;
    width: 100%; }
    .project.mit .screen.samples.part5 .projWrapper.off {
      opacity: 1; }
    .project.mit .screen.samples.part5 .projWrapper .portItem.item5_01 {
      right: 60%;
      width: 15%;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); }
    .project.mit .screen.samples.part5 .projWrapper .portItem.item5_02 {
      top: 0%;
      left: 48%;
      width: 30%;
      -webkit-transform: translateY(-20%);
              transform: translateY(-20%); }
  .project.mit .screen.samples.part5 .projWrapper .portItem.done, .project.mit .screen.samples.part4 .projWrapper .portItem.done, .project.mit .screen.samples.part3 .projWrapper .portItem.done, .project.mit .screen.samples.part2 .projWrapper .portItem.done {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1; }
  .project.mit .screen.next-project {
    background: #631063; }
    .project.mit .screen.next-project h3 {
      color: #c983f7; }

.project.rosaline {
  background: #5c1319;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #212f6e 0%, #000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-radial-gradient(center ellipse, #212f6e 0%, #000 100%);
  background: radial-gradient(ellipse at center, #212f6e 0%, #000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$rosaline-grad-start', endColorstr='$rosaline-grad-end',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  background-attachment: fixed; }
  .project.rosaline .intro h2 {
    color: #c983f7; }
  .project.rosaline .tabletObject rect {
    fill: #141414; }
  .project.rosaline .screen.desc {
    height: 100vh;
    margin-bottom: 10px; }
    .project.rosaline .screen.desc h2 {
      margin-top: 2rem;
      text-transform: uppercase;
      color: #ef33f5; }
    .project.rosaline .screen.desc p {
      margin-top: 0; }
    .project.rosaline .screen.desc .textWrapperCentered {
      border-top: none;
      border-bottom: none; }
      .project.rosaline .screen.desc .textWrapperCentered .portIntro {
        border-top: 1px solid #716eff; }
      .project.rosaline .screen.desc .textWrapperCentered .barDecoration {
        border-top: 8px solid #716eff; }
      .project.rosaline .screen.desc .textWrapperCentered .introBarBottom {
        max-width: 800px;
        border-top: 1px solid #716eff; }
      .project.rosaline .screen.desc .textWrapperCentered .subText h3 {
        color: #716eff; }
  .project.rosaline .screen.samples {
    background: none;
    height: 50vh;
    background-attachment: fixed; }
    .project.rosaline .screen.samples .projWrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
  .project.rosaline .screen.samples.part2 .projWrapper {
    width: 90vw;
    opacity: 1; }
    @media (max-width: 768px) {
      .project.rosaline .screen.samples.part2 .projWrapper {
        width: 100%; } }
    .project.rosaline .screen.samples.part2 .projWrapper .portItem {
      width: 30%;
      margin: 1%;
      opacity: 0;
      position: relative; }
      .project.rosaline .screen.samples.part2 .projWrapper .portItem.item2_01 {
        width: 60%;
        padding: 1%;
        margin-left: 20%;
        padding-top: 0;
        -webkit-transform: scale(0.8);
                transform: scale(0.8); }
        @media (max-width: 768px) {
          .project.rosaline .screen.samples.part2 .projWrapper .portItem.item2_01 {
            width: 70%;
            margin-left: 15%;
            clear: both; } }
      .project.rosaline .screen.samples.part2 .projWrapper .portItem.item2_02 {
        position: absolute;
        width: 82%;
        top: 2.5%;
        overflow: hidden;
        left: 7.5%;
        height: 90%;
        width: 82%;
        border: 1px solid #333; }
      .project.rosaline .screen.samples.part2 .projWrapper .portItem .screenThing {
        width: 100%; }
      @media (max-width: 768px) {
        .project.rosaline .screen.samples.part2 .projWrapper .portItem {
          width: 40%; } }
  .project.rosaline .screen.samples.part3 .projWrapper {
    width: 90vw;
    max-width: 1200px; }

@media (max-width: 768px) and (orientation: landscape) {
  .project.rosaline .screen.samples.part3 .projWrapper {
    width: 100%; } }
    .project.rosaline .screen.samples.part3 .projWrapper .portItem {
      position: relative;
      display: inline-block;
      padding: 1%; }
      .project.rosaline .screen.samples.part3 .projWrapper .portItem img {
        height: auto;
        width: 100%; }
      .project.rosaline .screen.samples.part3 .projWrapper .portItem.item3_01 {
        float: left;
        width: 33%;
        height: 100%;
        -webkit-transform: scale(0.8);
                transform: scale(0.8); }
      .project.rosaline .screen.samples.part3 .projWrapper .portItem.item3_02 {
        max-height: 40%;
        width: 66%;
        -webkit-transform: translateY(-20%);
                transform: translateY(-20%); }
      .project.rosaline .screen.samples.part3 .projWrapper .portItem.item3_03 {
        max-height: 40%;
        -webkit-transform: translateY(-20%);
                transform: translateY(-20%);
        width: 66%; }
  .project.rosaline .screen.samples.part4 .projWrapper {
    width: 100%;
    max-width: 1200px;
    text-align: center; }
    .project.rosaline .screen.samples.part4 .projWrapper.off {
      opacity: 1; }
    .project.rosaline .screen.samples.part4 .projWrapper .portLabel {
      position: relative; }
    .project.rosaline .screen.samples.part4 .projWrapper .portItem {
      position: relative;
      display: block;
      float: left;
      margin: 0px auto; }
      .project.rosaline .screen.samples.part4 .projWrapper .portItem .portLabel {
        position: relative; }
      .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_01, .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_02 {
        width: 50%;
        padding: 4%;
        text-align: center; }
        .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_01 img, .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_02 img {
          max-width: 300px; }
        @media (max-width: 768px) {
          .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_01, .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_02 {
            width: 100%; } }
      .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_01 {
        padding-left: 20%; }
        @media (max-width: 768px) {
          .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_01 {
            padding: 20%;
            padding-bottom: 5%; } }
      .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_02 {
        padding-right: 20%; }
        @media (max-width: 768px) {
          .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_02 {
            padding: 20%;
            padding-top: 0; } }
      .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_03 {
        margin-top: 2%;
        width: 20%;
        margin-left: 5%; }
        @media (max-width: 768px) {
          .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_03 {
            width: 35%;
            margin-left: 5%;
            margin-right: 10%;
            margin-top: 10%; } }
      .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_04 {
        position: relative;
        width: 30%;
        float: left;
        margin-top: 1.5%; }
        @media (max-width: 768px) {
          .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_04 {
            width: 100%;
            margin: 1%; } }
      .project.rosaline .screen.samples.part4 .projWrapper .portItem.item4_05 {
        position: relative;
        width: 50%;
        right: 5%;
        bottom: -2vh; }
  .project.rosaline .screen.samples.part5 .projWrapper {
    width: 768px;
    min-height: 600px;
    width: 100%; }
    .project.rosaline .screen.samples.part5 .projWrapper.off {
      opacity: 1; }
    .project.rosaline .screen.samples.part5 .projWrapper .portItem.item5_01 {
      right: 60%;
      width: 15%;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); }
    .project.rosaline .screen.samples.part5 .projWrapper .portItem.item5_02 {
      top: 0%;
      left: 48%;
      width: 30%;
      -webkit-transform: translateY(-20%);
              transform: translateY(-20%); }
  .project.rosaline .screen.samples.part5 .projWrapper .portItem.done, .project.rosaline .screen.samples.part4 .projWrapper .portItem.done, .project.rosaline .screen.samples.part3 .projWrapper .portItem.done, .project.rosaline .screen.samples.part2 .projWrapper .portItem.done {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1; }
  .project.rosaline .screen.next-project {
    background: #631063; }
    .project.rosaline .screen.next-project h3 {
      color: #c983f7; }

.project.answerdesk {
  background: #5c1319;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #212f6e 0%, #000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-radial-gradient(center ellipse, #212f6e 0%, #000 100%);
  background: radial-gradient(ellipse at center, #212f6e 0%, #000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$rosaline-grad-start', endColorstr='$rosaline-grad-end',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  background-attachment: fixed; }
  .project.answerdesk .intro h2 {
    color: #c983f7; }
  .project.answerdesk .tabletObject rect {
    fill: #141414; }
  .project.answerdesk .screen.desc {
    height: 100vh;
    margin-bottom: 10px; }
    .project.answerdesk .screen.desc h2 {
      margin-top: 2rem;
      text-transform: uppercase;
      color: #ffdb6d; }
    .project.answerdesk .screen.desc p {
      margin-top: 0; }
    .project.answerdesk .screen.desc .textWrapperCentered {
      border-top: none;
      border-bottom: none; }
      .project.answerdesk .screen.desc .textWrapperCentered .portIntro {
        border-top: 1px solid #fcbf0f; }
      .project.answerdesk .screen.desc .textWrapperCentered .barDecoration {
        border-top: 8px solid #fcbf0f; }
      .project.answerdesk .screen.desc .textWrapperCentered .introBarBottom {
        max-width: 800px;
        border-top: 1px solid #fcbf0f; }
      .project.answerdesk .screen.desc .textWrapperCentered .subText h3 {
        color: #fcbf0f; }
  .project.answerdesk .screen.samples {
    background: none;
    height: 50vh;
    background-attachment: fixed; }
    .project.answerdesk .screen.samples .projWrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
  .project.answerdesk .screen.samples.part2 .projWrapper {
    width: 90vw;
    opacity: 1; }
    @media (max-width: 768px) {
      .project.answerdesk .screen.samples.part2 .projWrapper {
        width: 100%; } }
    .project.answerdesk .screen.samples.part2 .projWrapper .portItem {
      margin: 0px auto;
      opacity: 0;
      position: relative; }
  .project.answerdesk .screen.samples.part4 .projWrapper {
    width: 100%;
    max-width: 1200px;
    text-align: center; }
    .project.answerdesk .screen.samples.part4 .projWrapper.off {
      opacity: 1; }
    .project.answerdesk .screen.samples.part4 .projWrapper .portLabel {
      position: relative; }
    .project.answerdesk .screen.samples.part4 .projWrapper .portItem {
      position: relative;
      display: block;
      float: left;
      margin: 0px auto; }
      .project.answerdesk .screen.samples.part4 .projWrapper .portItem .portLabel {
        position: relative; }
      .project.answerdesk .screen.samples.part4 .projWrapper .portItem.item4_01, .project.answerdesk .screen.samples.part4 .projWrapper .portItem.item4_02 {
        width: 50%;
        padding: 4%;
        text-align: center; }
        .project.answerdesk .screen.samples.part4 .projWrapper .portItem.item4_01 img, .project.answerdesk .screen.samples.part4 .projWrapper .portItem.item4_02 img {
          max-width: 500px; }
        @media (max-width: 768px) {
          .project.answerdesk .screen.samples.part4 .projWrapper .portItem.item4_01, .project.answerdesk .screen.samples.part4 .projWrapper .portItem.item4_02 {
            width: 100%; } }
      .project.answerdesk .screen.samples.part4 .projWrapper .portItem.item4_01 {
        padding-left: 10%; }
        @media (max-width: 768px) {
          .project.answerdesk .screen.samples.part4 .projWrapper .portItem.item4_01 {
            padding: 20%;
            padding-bottom: 5%; } }
      .project.answerdesk .screen.samples.part4 .projWrapper .portItem.item4_02 {
        padding-right: 0%; }
        @media (max-width: 768px) {
          .project.answerdesk .screen.samples.part4 .projWrapper .portItem.item4_02 {
            padding: 20%;
            padding-top: 0; } }
  .project.answerdesk .screen.samples.part5 .projWrapper {
    width: 768px;
    min-height: 600px;
    width: 100%; }
    .project.answerdesk .screen.samples.part5 .projWrapper.off {
      opacity: 1; }
    .project.answerdesk .screen.samples.part5 .projWrapper .portItem.item5_01 {
      right: 60%;
      width: 15%;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); }
    .project.answerdesk .screen.samples.part5 .projWrapper .portItem.item5_02 {
      top: 0%;
      left: 48%;
      width: 30%;
      -webkit-transform: translateY(-20%);
              transform: translateY(-20%); }
  .project.answerdesk .screen.samples.part5 .projWrapper .portItem.done, .project.answerdesk .screen.samples.part4 .projWrapper .portItem.done, .project.answerdesk .screen.samples.part3 .projWrapper .portItem.done, .project.answerdesk .screen.samples.part2 .projWrapper .portItem.done {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1; }
  .project.answerdesk .screen.next-project {
    background: #631063; }
    .project.answerdesk .screen.next-project h3 {
      color: #c983f7; }

.project.msvs {
  background: #5c1319;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #212f6e 0%, #000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-radial-gradient(center ellipse, #212f6e 0%, #000 100%);
  background: radial-gradient(ellipse at center, #212f6e 0%, #000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$rosaline-grad-start', endColorstr='$rosaline-grad-end',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  background-attachment: fixed; }
  .project.msvs .intro h2 {
    color: #c983f7; }
  .project.msvs .tabletObject rect {
    fill: #141414; }
  .project.msvs .screen.desc {
    height: 100vh;
    margin-bottom: 10px; }
    .project.msvs .screen.desc h2 {
      margin-top: 2rem;
      text-transform: uppercase;
      color: #ef33f5; }
    .project.msvs .screen.desc p {
      margin-top: 0; }
    .project.msvs .screen.desc .textWrapperCentered {
      border-top: none;
      border-bottom: none; }
      .project.msvs .screen.desc .textWrapperCentered .portIntro {
        border-top: 1px solid #716eff; }
      .project.msvs .screen.desc .textWrapperCentered .barDecoration {
        border-top: 8px solid #716eff; }
      .project.msvs .screen.desc .textWrapperCentered .introBarBottom {
        max-width: 800px;
        border-top: 1px solid #716eff; }
      .project.msvs .screen.desc .textWrapperCentered .subText h3 {
        color: #716eff; }
  .project.msvs .screen.samples {
    background: none;
    height: 50vh;
    background-attachment: fixed; }
    .project.msvs .screen.samples .projWrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
  .project.msvs .screen.samples.part2 .projWrapper {
    width: 90vw;
    opacity: 1; }
    @media (max-width: 768px) {
      .project.msvs .screen.samples.part2 .projWrapper {
        width: 100%; } }
    .project.msvs .screen.samples.part2 .projWrapper .portItem {
      width: 30%;
      margin: 1%;
      opacity: 0;
      position: relative; }
      .project.msvs .screen.samples.part2 .projWrapper .portItem.item2_01 {
        left: 50%;
        width: 700px;
        min-height: 437px;
        position: relative;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        overflow: hidden; }
        .project.msvs .screen.samples.part2 .projWrapper .portItem.item2_01.done {
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%); }
        .project.msvs .screen.samples.part2 .projWrapper .portItem.item2_01 > video {
          background: url(../../images/msvs/cover.jpg);
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: auto;
          background-size: cover; }
      .project.msvs .screen.samples.part2 .projWrapper .portItem.item2_02 {
        position: absolute;
        width: 82%;
        top: 2.5%;
        overflow: hidden;
        left: 7.5%;
        height: 90%;
        width: 82%;
        border: 1px solid #333; }
      .project.msvs .screen.samples.part2 .projWrapper .portItem .screenThing {
        width: 100%; }
      @media (max-width: 768px) {
        .project.msvs .screen.samples.part2 .projWrapper .portItem {
          width: 40%; } }
  .project.msvs .screen.samples.part3 .projWrapper {
    width: 90vw;
    max-width: 1200px; }

@media (max-width: 768px) and (orientation: landscape) {
  .project.msvs .screen.samples.part3 .projWrapper {
    width: 100%; } }
    .project.msvs .screen.samples.part3 .projWrapper .portItem {
      position: relative;
      display: inline-block;
      padding: 1%; }
      .project.msvs .screen.samples.part3 .projWrapper .portItem img {
        height: auto;
        width: 100%; }
      .project.msvs .screen.samples.part3 .projWrapper .portItem.item3_01 {
        float: left;
        width: 33%;
        height: 100%;
        -webkit-transform: scale(0.8);
                transform: scale(0.8); }
      .project.msvs .screen.samples.part3 .projWrapper .portItem.item3_02 {
        max-height: 40%;
        width: 66%;
        -webkit-transform: translateY(-20%);
                transform: translateY(-20%); }
      .project.msvs .screen.samples.part3 .projWrapper .portItem.item3_03 {
        max-height: 40%;
        -webkit-transform: translateY(-20%);
                transform: translateY(-20%);
        width: 66%; }
  .project.msvs .screen.samples.part4 .projWrapper {
    width: 100%;
    max-width: 1200px;
    text-align: center; }
    .project.msvs .screen.samples.part4 .projWrapper.off {
      opacity: 1; }
    .project.msvs .screen.samples.part4 .projWrapper .portLabel {
      position: relative; }
    .project.msvs .screen.samples.part4 .projWrapper .portItem {
      position: relative;
      display: block;
      float: left;
      margin: 0px auto; }
      .project.msvs .screen.samples.part4 .projWrapper .portItem .portLabel {
        position: relative; }
      .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_01, .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_02 {
        width: 50%;
        padding: 4%;
        text-align: center; }
        .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_01 img, .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_02 img {
          max-width: 600px; }
        @media (max-width: 768px) {
          .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_01, .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_02 {
            width: 100%; } }
      .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_01 {
        padding-left: 10%; }
        @media (max-width: 768px) {
          .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_01 {
            padding: 20%;
            padding-bottom: 5%; } }
      .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_02 {
        padding-right: 10%; }
        @media (max-width: 768px) {
          .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_02 {
            padding: 20%;
            padding-top: 0; } }
      .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_03 {
        margin-top: 2%;
        width: 20%;
        margin-left: 5%; }
        @media (max-width: 768px) {
          .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_03 {
            width: 35%;
            margin-left: 5%;
            margin-right: 10%;
            margin-top: 10%; } }
      .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_04 {
        position: relative;
        width: 30%;
        float: left;
        margin-top: 1.5%; }
        @media (max-width: 768px) {
          .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_04 {
            width: 100%;
            margin: 1%; } }
      .project.msvs .screen.samples.part4 .projWrapper .portItem.item4_05 {
        position: relative;
        width: 50%;
        right: 5%;
        bottom: -2vh; }
  .project.msvs .screen.samples.part5 .projWrapper {
    width: 768px;
    min-height: 600px;
    width: 100%; }
    .project.msvs .screen.samples.part5 .projWrapper.off {
      opacity: 1; }
    .project.msvs .screen.samples.part5 .projWrapper .portItem.item5_01 {
      right: 60%;
      width: 15%;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); }
    .project.msvs .screen.samples.part5 .projWrapper .portItem.item5_02 {
      top: 0%;
      left: 48%;
      width: 30%;
      -webkit-transform: translateY(-20%);
              transform: translateY(-20%); }
  .project.msvs .screen.samples.part5 .projWrapper .portItem.done, .project.msvs .screen.samples.part4 .projWrapper .portItem.done, .project.msvs .screen.samples.part3 .projWrapper .portItem.done, .project.msvs .screen.samples.part2 .projWrapper .portItem.done {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1; }
  .project.msvs .screen.next-project {
    background: #631063; }
    .project.msvs .screen.next-project h3 {
      color: #c983f7; }

.project.msa {
  background: #5c1319;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #5c1319 0%, #000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-radial-gradient(center ellipse, #5c1319 0%, #000 100%);
  background: radial-gradient(ellipse at center, #5c1319 0%, #000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$msa-grad-start', endColorstr='$msa-grad-end',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  background-attachment: fixed; }
  .project.msa .intro h2 {
    color: #c983f7; }
  .project.msa .tabletObject rect {
    fill: #141414; }
  .project.msa .screen.desc {
    height: 100vh;
    margin-bottom: 10px; }
    .project.msa .screen.desc h2 {
      margin-top: 2rem;
      text-transform: uppercase;
      color: #f4f4a3; }
    .project.msa .screen.desc p {
      margin-top: 0; }
    .project.msa .screen.desc .textWrapperCentered {
      border-top: none;
      border-bottom: none; }
      .project.msa .screen.desc .textWrapperCentered .portIntro {
        border-top: 1px solid #eb0000; }
      .project.msa .screen.desc .textWrapperCentered .barDecoration {
        border-top: 8px solid #eb0000; }
      .project.msa .screen.desc .textWrapperCentered .introBarBottom {
        max-width: 800px;
        border-top: 1px solid #eb0000; }
      .project.msa .screen.desc .textWrapperCentered .subText h3 {
        color: #eb0000; }
  .project.msa .screen.samples {
    background: none;
    height: 50vh;
    background-attachment: fixed; }
    .project.msa .screen.samples .projWrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
  .project.msa .screen.samples.part3 .projWrapper {
    width: 100%;
    height: auto;
    /* display: flex;
            align-items: center;
            justify-content: center;
*/
    opacity: 1; }
    @media (max-width: 768px) {
      .project.msa .screen.samples.part3 .projWrapper {
        width: 100%; } }
    .project.msa .screen.samples.part3 .projWrapper .item3_02 {
      background: url(../../images/msa/home_bg.jpg);
      background-size: 100%;
      margin: 2px;
      border: 0px none; }
      .project.msa .screen.samples.part3 .projWrapper .item3_02 img.screenThing {
        -webkit-transform: scale(3) translateY(50%) translateX(34%);
                transform: scale(3) translateY(50%) translateX(34%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: all 1s ease-out;
        transition: all 1s ease-out; }
        .project.msa .screen.samples.part3 .projWrapper .item3_02 img.screenThing.s2 {
          -webkit-transform: scale(3) translateY(50%) translateX(0);
                  transform: scale(3) translateY(50%) translateX(0); }
        .project.msa .screen.samples.part3 .projWrapper .item3_02 img.screenThing.s3 {
          -webkit-transform: scale(3) translateY(50%) translateX(-34%);
                  transform: scale(3) translateY(50%) translateX(-34%); }
    .project.msa .screen.samples.part3 .projWrapper .item3_03 {
      width: 10%;
      right: -25%;
      bottom: 40%;
      margin-top: -10%;
      height: auto;
      position: absolute;
      display: block;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%); }
      @media (max-width: 768px) {
        .project.msa .screen.samples.part3 .projWrapper .item3_03 {
          width: 10%;
          right: 40%;
          bottom: -30%; }
          .project.msa .screen.samples.part3 .projWrapper .item3_03 img {
            width: 80%; } }
      @media (max-width: 420px) {
        .project.msa .screen.samples.part3 .projWrapper .item3_03 {
          width: 20%;
          right: 30%;
          bottom: -20%; }
          .project.msa .screen.samples.part3 .projWrapper .item3_03 img {
            display: none; } }
    .project.msa .screen.samples.part3 .projWrapper .portItem.tabletBg.done .arrow_left {
      left: 0;
      opacity: 1; }
    .project.msa .screen.samples.part3 .projWrapper .portItem.tabletBg.done .arrow_right {
      right: 0;
      opacity: 1; }
    .project.msa .screen.samples.part3 .projWrapper .portItem {
      margin: 0px auto;
      opacity: 0;
      position: relative; }
      .project.msa .screen.samples.part3 .projWrapper .portItem.item3_01 .arrow_left, .project.msa .screen.samples.part3 .projWrapper .portItem.item3_01 .arrow_right {
        display: block;
        width: 10%;
        height: 100%;
        position: absolute;
        cursor: pointer;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: all 1s ease-out;
        transition: all 1s ease-out;
        -webkit-transition-delay: 1s;
        transition-delay: 1s;
        opacity: 0; }
        .project.msa .screen.samples.part3 .projWrapper .portItem.item3_01 .arrow_left:active, .project.msa .screen.samples.part3 .projWrapper .portItem.item3_01 .arrow_right:active {
          -webkit-transform: scale(0.9);
                  transform: scale(0.9); }
        .project.msa .screen.samples.part3 .projWrapper .portItem.item3_01 .arrow_left::after, .project.msa .screen.samples.part3 .projWrapper .portItem.item3_01 .arrow_right::after {
          display: block;
          width: 60%;
          position: absolute;
          top: 45%;
          content: '';
          height: 10%;
          background: url("../../images/arrows.png") no-repeat;
          background-size: 400%; }
      .project.msa .screen.samples.part3 .projWrapper .portItem.item3_01 .arrow_left {
        left: 10%; }
        .project.msa .screen.samples.part3 .projWrapper .portItem.item3_01 .arrow_left::after {
          background-position: 60% 0%; }
      .project.msa .screen.samples.part3 .projWrapper .portItem.item3_01 .arrow_right {
        right: 10%; }
        .project.msa .screen.samples.part3 .projWrapper .portItem.item3_01 .arrow_right::after {
          right: 0;
          background-position: 40% 0%; }
      .project.msa .screen.samples.part3 .projWrapper .portItem.item3_01:after {
        padding-top: 63%; }
  .project.msa .screen.samples.part2 .stillFrame {
    background: url(../../images/msa/00_splitter_rev01.jpg) black;
    background-size: cover;
    background-position: 50% 50%; }
    @media (max-width: 1024px) {
      .project.msa .screen.samples.part2 .stillFrame {
        background-size: contain;
        background-repeat: no-repeat; } }
  .project.msa .screen.samples.part4 .projWrapper {
    width: 90vw; }
  .project.msa .screen.samples.part4 .portItem {
    position: relative;
    display: table-cell;
    margin: 0px auto; }
    @media (max-width: 768px) {
      .project.msa .screen.samples.part4 .portItem .portLabel {
        position: relative; } }
    .project.msa .screen.samples.part4 .portItem img {
      width: 100%;
      height: auto; }
      @media (max-width: 768px) {
        .project.msa .screen.samples.part4 .portItem img {
          width: 100%; } }
    .project.msa .screen.samples.part4 .portItem.item4_01 {
      width: 50%;
      padding-right: 2vw; }
    .project.msa .screen.samples.part4 .portItem.item4_02 {
      width: 50%;
      padding-left: 2vw; }
    @media (max-width: 768px) {
      .project.msa .screen.samples.part4 .portItem.item4_01, .project.msa .screen.samples.part4 .portItem.item4_02 {
        margin-top: 2vh;
        padding: 0;
        width: auto;
        display: block; } }
  .project.msa .screen.samples.part5 .projWrapper {
    width: 768px;
    min-height: 600px;
    width: 100%; }
    .project.msa .screen.samples.part5 .projWrapper.off {
      opacity: 1; }
    .project.msa .screen.samples.part5 .projWrapper .portItem.item5_01 {
      right: 60%;
      width: 15%;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); }
    .project.msa .screen.samples.part5 .projWrapper .portItem.item5_02 {
      top: 0%;
      left: 48%;
      width: 30%;
      -webkit-transform: translateY(-20%);
              transform: translateY(-20%); }
  .project.msa .screen.samples.part5 .projWrapper .portItem.done, .project.msa .screen.samples.part4 .projWrapper .portItem.done, .project.msa .screen.samples.part3 .projWrapper .portItem.done, .project.msa .screen.samples.part2 .projWrapper .portItem.done {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    opacity: 1; }
  .project.msa .screen.next-project {
    background: #292929; }
    .project.msa .screen.next-project h3 {
      color: #ff0000; }

#mlogo {
  position: absolute;
  top: 300px; }

#mlogo2 {
  position: absolute;
  top: 100px;
  left: 50px;
  width: 100px;
  height: auto;
  display: block; }

#mlogo3 {
  position: absolute;
  top: 130px;
  left: 50px;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
  width: 100px;
  height: auto;
  display: block; }