/* build an initial inspiration from this codepen:
   https://codepen.io/nickpettit/pen/eBCrK 
*/
/*
$chart-dkBlue: 	#073B4C;
$chart-yellow: 	#ffd166;
$chart-green: 	#06D6A0;
$chart-red: 	#EF476F;
$chart-blue: 	#118AB2;
*/
html,
button,
input,
select,
textarea {
  color: #222; }

body {
  font-size: 1em;
  line-height: 1.4;
  font-family: 'Dosis', sans-serif;
  margin: 0.35em 0 0 0;
  overflow: hidden; }
  @media only screen and (max-width: 599.9px) {
    body {
      max-width: 100vw !important;
      margin: calc(4vh + 50px) 0 0 0; } }
  @media only screen and (min-device-width: 375px) and (min-device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    body {
      margin-top: calc(15px + 11vh); } }
  @media only screen and (max-width: 599.9px) {
    body .hideMobile {
      display: none; } }
  @media only screen and (min-width: 600px) {
    body .hideMobile {
      display: inherit; } }
  @media only screen and (max-width: 599.9px) {
    body .hideDesktop {
      display: inherit; } }
  @media only screen and (min-width: 600px) {
    body .hideDesktop {
      display: none; } }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
img {
  vertical-align: middle; }

em {
  letter-spacing: 0.0125em; }

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical; }

/********************
BASE STYLING
********************/
html, body {
  height: 100%; }

#content {
  position: absolute;
  width: 100%;
  height: 100%; }

body {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,181d9b+50,2989d8+65,d9fcff+90 
background: #000000; 
background:    -moz-linear-gradient(top, #000000 20%, #181d9b 50%, #2989d8 65%, #d9fcff 90%); 
background: -webkit-linear-gradient(top, #000000 20%,#181d9b 50%,#2989d8 65%,#d9fcff 90%); 
background:   		linear-gradient(to bottom, #000000 20%,#181d9b 50%,#2989d8 65%,#d9fcff 90%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#d9fcff',GradientType=0 );*/ }

/********************
Main Background Animation - Placement Z-Axis
********************/
#scroll-proxy {
  height: 10000px; }

#environment {
  position: fixed;
  width: 100%;
  height: 100%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px; }

#content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d; }
  #content section {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: 100%;
    background-color: transparent;
    background-position: center bottom;
    background-repeat: no-repeat; }
    #content section .svgScale.level0 .st0 {
      fill: #3C7C45; }
    #content section .svgScale.level0 .st1 {
      fill: #b8c9cA; }
    #content section .svgScale.level0 .st2 {
      fill: #a3b1b3; }
    #content section .svgScale.level0 .st3 {
      fill: #F7FBFC;
      stroke: #C7D9DD;
      stroke-miterlimit: 10; }
    #content section .svgScale.level0 .st4 {
      fill: #F4F8F9;
      stroke: #EBEDED;
      stroke-miterlimit: 10; }
    #content section .svgScale.level0 .st5 {
      fill: #84979B; }
    #content section .svgScale.level0 .st6 {
      opacity: 0.7;
      fill: url(#lake_1_); }
    #content section .svgScale.level0 .st7 {
      opacity: 0.8; }
    #content section .svgScale.level0 .st8 {
      fill: #D6D085; }
    #content section .svgScale.level0 .st9 {
      fill: #74AD83; }
    #content section .svgScale.level0 .st10 {
      fill: #9B9586; }
    #content section .svgScale.level0 .st12 {
      display: inline; }
    #content section .svgScale.level0 .st13 {
      fill: #637B7F; }
    #content section .svgScale.level0 .st14 {
      fill: #9B8E86; }
    #content section .svgScale.level0 .st15 {
      opacity: 0.9; }
    #content section .svgScale.level0 .st16 {
      fill: #74AF78; }
    #content section .svgScale.level0 .st17 {
      fill: #699E6E; }
    #content section .svgScale.level0 .st18 {
      display: inline;
      fill: #9B8E86; }
    #content section .svgScale.level0 .st19 {
      display: inline;
      fill: #CEC48A; }
    #content section .svgScale.level0 .st20 {
      display: inline;
      opacity: 0.71;
      fill: url(#SVGID_1_); }
    #content section .svgScale.level0 .st21 {
      display: inline;
      fill: #3C7C45; }
    #content section .svgScale.level0 .st22 {
      fill: #4D9154; }
    #content section svg.svgBackground {
      position: absolute;
      bottom: -5vh;
      pointer-events: none;
      transform: scale(1); }
      @media only screen and (orientation: portrait) {
        #content section svg.svgBackground {
          transform: scale(2); } }
      @media only screen and (max-width: 599.9px) {
        #content section svg.svgBackground {
          transform: scale(3);
          transform-origin: 50% 100%;
          bottom: -5vh; } }
      #content section svg.svgBackground g.svgScale {
        transform-origin: 50% 100%; }
        @media only screen and (orientation: landscape) {
          #content section svg.svgBackground g.svgScale {
            transform: scaleX(0.8) scaleY(0.7) translateY(-15vh); } }
        @media only screen and (orientation: portrait) {
          #content section svg.svgBackground g.svgScale {
            transform: scaleX(0.5) scaleY(0.6) translateY(-27.5vh); } }
        @media only screen and (min-width: 1200px) {
          #content section svg.svgBackground g.svgScale {
            transform: scaleX(0.75) scaleY(0.66) translateY(-10vh);
            transform-origin: bottom;
            transform-origin: 50% 100%; } }
        @media only screen and (min-width: 1500px) {
          #content section svg.svgBackground g.svgScale {
            transform: scaleX(0.65) scaleY(0.6) translateY(-4vh);
            transform-origin: bottom;
            transform-origin: 50% 70%; } }
        @media only screen and (max-width: 599.9px) {
          #content section svg.svgBackground g.svgScale {
            transform-origin: 50% 50%;
            transform: scaleX(0.375) scaleY(0.4) translateY(-15vh); } }
    #content section#fourth svg.svgBackground {
      transform: translateY(-15vh); }
      @media only screen and (max-width: 599.9px) {
        #content section#fourth svg.svgBackground {
          transform: translateY(-55vh); } }
    #content section .place3D {
      width: 100%;
      position: absolute;
      bottom: 0;
      height: 0px;
      /*
		  	&.stop1{
		  		//bottom: $placement;
		  		border:2px solid #f00;
		  	}
		  	&.stop2{
		  		//bottom:calc(3500px * 1);
		  		border:2px solid #0f0;
		  	}
		  	&.stop3{
		  		//bottom:calc(3500px * 2);
		  		border:2px solid #00f;
		  	}
		  	&.stop4{
		  		//bottom:calc(3500px * 3);
		  		border:2px solid #000;
		  	}
		  	&.stop5{
		  		//bottom:calc(3500px * 4);
		  		border:2px solid #fff;
		  	}
		  	*/ }
      #content section .place3D .perspectiveContainer {
        position: relative;
        top: -97.5vh;
        width: 80%;
        margin: auto;
        max-width: 1400px;
        display: flex;
        height: calc(60px + 5vh);
        z-index: 100;
        padding-left: 0.8vw;
        padding-right: 0.8vw; }
        @media only screen and (max-width: 919.9px) {
          #content section .place3D .perspectiveContainer {
            width: 90%; } }
        @media only screen and (min-width: 920px) and (max-width: 1299.9px) {
          #content section .place3D .perspectiveContainer {
            width: 88%; } }
        @media only screen and (max-width: 599.9px) {
          #content section .place3D .perspectiveContainer {
            flex-direction: column; } }
        @media screen and (orientation: landscape) and (max-height: 500px) {
          #content section .place3D .perspectiveContainer {
            height: 16vh; } }
        #content section .place3D .perspectiveContainer .typeFix {
          display: flex;
          width: 100%; }
          @media only screen and (min-width: 600px) {
            #content section .place3D .perspectiveContainer .typeFix.art {
              padding-left: 2.5%; } }
          #content section .place3D .perspectiveContainer .typeFix.art svg {
            max-width: 210px; }
        #content section .place3D .perspectiveContainer svg {
          width: 100%;
          display: flex;
          max-height: 11.5vh; }
          @media only screen and (max-width: 599.9px) {
            #content section .place3D .perspectiveContainer svg {
              margin-right: unset;
              transform: scale(1.1);
              height: 8.5vh; }
              #content section .place3D .perspectiveContainer svg.skills {
                width: 52.5%; }
              #content section .place3D .perspectiveContainer svg.interactive {
                width: 75%;
                height: 11vh; }
              #content section .place3D .perspectiveContainer svg.motion {
                width: 54%;
                transform: scale(1.1);
                height: 11vh; }
              #content section .place3D .perspectiveContainer svg.art {
                width: 95%; } }
          @media only screen and (min-width: 1400px) {
            #content section .place3D .perspectiveContainer svg.skills {
              max-width: 400px;
              transform: translateX(7.75vw); } }
          #content section .place3D .perspectiveContainer svg.interactive {
            max-width: calc(250px + 15vh + 1vh); }
          #content section .place3D .perspectiveContainer svg.motion {
            max-width: calc(130px + 15vh + 2vh); }
          #content section .place3D .perspectiveContainer svg g.heading {
            transform: scale(0.8);
            transform-origin: 0 50%; }
            #content section .place3D .perspectiveContainer svg g.heading path, #content section .place3D .perspectiveContainer svg g.heading line, #content section .place3D .perspectiveContainer svg g.heading polyline {
              stroke: #fff;
              stroke-width: 2px;
              fill: none;
              opacity: 1;
              stroke-dashoffset: 0;
              stroke-dasharray: 0,100; }
              @media only screen and (max-width: 599.9px), only screen and (max-height: 500px) {
                #content section .place3D .perspectiveContainer svg g.heading path, #content section .place3D .perspectiveContainer svg g.heading line, #content section .place3D .perspectiveContainer svg g.heading polyline {
                  stroke-width: 3px; } }
            @media only screen and (max-width: 999.9px) {
              #content section .place3D .perspectiveContainer svg g.heading {
                transform: scale(0.75); }
                #content section .place3D .perspectiveContainer svg g.heading.about {
                  transform: scale(0.7);
                  transform-origin: 15% 33%; } }
            @media (orientation: portrait) and (max-width: 599.9px) {
              #content section .place3D .perspectiveContainer svg g.heading.intro {
                transform-origin: 0% 60%; }
              #content section .place3D .perspectiveContainer svg g.heading.skills {
                transform-origin: 25% 55%;
                transform: scale(0.75) translateY(5%); }
              #content section .place3D .perspectiveContainer svg g.heading.interactive {
                transform-origin: 20% 60%;
                transform: scale(0.8) translateY(0%); }
              #content section .place3D .perspectiveContainer svg g.heading.motion {
                transform-origin: 20% 50%; }
              #content section .place3D .perspectiveContainer svg g.heading.art {
                transform-origin: 50% 60%;
                transform: scale(0.75) translateY(8%); }
              #content section .place3D .perspectiveContainer svg g.heading.about {
                transform-origin: 0% 60%; } }
            @media only screen and (orientation: landscape) and (max-width: 736px) {
              #content section .place3D .perspectiveContainer svg g.heading {
                transform: scale(0.675);
                transform-origin: 0 0; } }
          @media only screen and (orientation: landscape) and (max-width: 736px) {
            #content section .place3D .perspectiveContainer svg {
              max-height: unset; } }

#zero {
  transform: translate3d(0, 0, 0);
  pointer-events: all;
  z-index: 200000; }
  #zero .stop1 {
    transform: translateY(calc(-10000px * 16)); }
  #zero .stop2 {
    transform: translateY(calc(-10000px * 32)); }
  #zero .stop3 {
    transform: translateY(calc(-10000px * 48)); }
  #zero .stop4 {
    transform: translateY(calc(-10000px * 64)); }
  #zero .stop5 {
    transform: translateY(calc(-10000px * 80)); }

#first {
  -webkit-transform: translate3d(0, 0, -11500px) scale(16);
  -moz-transform: translate3d(0, 0, -11500px) scale(16);
  -ms-transform: translate3d(0, 0, -11500px) scale(16);
  -o-transform: translate3d(0, 0, -11500px) scale(16);
  transform: translate3d(0, 0, -11500px) scale(16); }
  #first .stop1 {
    transform: translateY(-10000px); }
  #first .stop2 {
    transform: translateY(calc(-10000px * 2)); }
  #first .stop3 {
    transform: translateY(calc(-10000px * 3)); }
  #first .stop4 {
    transform: translateY(calc(-10000px * 4)); }
  #first .stop5 {
    transform: translateY(calc(-10000px * 5)); }

#second {
  -webkit-transform: translate3d(0, 0, -24000px) scale(32);
  -moz-transform: translate3d(0, 0, -24000px) scale(32);
  -ms-transform: translate3d(0, 0, -24000px) scale(32);
  -o-transform: translate3d(0, 0, -24000px) scale(32);
  transform: translate3d(0, 0, -24000px) scale(32); }
  #second .stop1 {
    transform: translateY(calc(-10000px / 2)); }
  #second .stop2 {
    transform: translateY(-10000px); }
  #second .stop3 {
    transform: translateY(calc(-10000px / 2 * 3)); }
  #second .stop4 {
    transform: translateY(calc(-10000px / 2 * 4)); }
  #second .stop5 {
    transform: translateY(calc(-10000px / 2 * 5)); }

#third {
  -webkit-transform: translate3d(0, 0, -48000px) scale(64);
  -moz-transform: translate3d(0, 0, -48000px) scale(64);
  -ms-transform: translate3d(0, 0, -48000px) scale(64);
  -o-transform: translate3d(0, 0, -48000px) scale(64);
  transform: translate3d(0, 0, -48000px) scale(64); }
  #third .stop1 {
    transform: translateY(calc(-10000px / 4)); }
  #third .stop2 {
    transform: translateY(calc(-10000px / 2)); }
  #third .stop3 {
    transform: translateY(calc(-10000px / 4 * 3)); }
  #third .stop4 {
    transform: translateY(-10000px); }
  #third .stop5 {
    transform: translateY(calc(-10000px / 4 * 5)); }

#fourth {
  -webkit-transform: translate3d(0, 0, -64000px) scale(128);
  -moz-transform: translate3d(0, 0, -64000px) scale(128);
  -ms-transform: translate3d(0, 0, -64000px) scale(128);
  -o-transform: translate3d(0, 0, -64000px) scale(128);
  transform: translate3d(0, 0, -64000px) scale(128);
  background: #d9fcff;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+31,181d9b+54,2989d8+62,d9fcff+90 */
  background: -moz-linear-gradient(top, #000000 31%, #181d9b 54%, #2989d8 62%, #d9fcff 90%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #000000 31%, #181d9b 54%, #2989d8 62%, #d9fcff 90%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #000000 31%, #181d9b 54%, #2989d8 62%, #d9fcff 90%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#d9fcff',GradientType=0 );
  /* IE6-9 */
  height: 7500px !important;
  bottom: 400000px; }
  #fourth .stop1 {
    transform: translateY(calc(-10000px / 8)); }
  #fourth .stop2 {
    transform: translateY(calc(-10000px / 4)); }
  #fourth .stop3 {
    transform: translateY(calc(-10000px / 8 * 3)); }
  #fourth .stop4 {
    transform: translateY(calc(-10000px / 2)); }
  #fourth .stop5 {
    transform: translateY(calc(-10000px / 8 * 5)); }

@media only screen and (max-width: 800px) {
  .place3D.stop1 .perspectiveContainer {
    width: 100%;
    left: 2.5%; } }

.navMobileShow {
  display: none; }

.navPos .navLine.navLineMobile {
  display: none; }

@media only screen and (orientation: portrait) and (max-width: 599.9px), only screen and (orientation: landscape) and (max-height: 450px) and (max-width: 919.9px) {
  .navMobileShow {
    display: block;
    bottom: calc(7.9vw - 5px);
    left: 2.65vw;
    height: 9.5vw;
    width: 12vw;
    border: solid 1.6px rgba(255, 255, 255, 0);
    position: fixed;
    z-index: 250000;
    box-sizing: border-box;
    transform: skew(-8deg);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0); }
    .navMobileShow:active {
      background-color: rgba(255, 255, 255, 0.25) !important; } }
  @media only screen and (orientation: portrait) and (max-width: 599.9px) and (orientation: landscape) and (max-height: 450px) and (max-width: 919.9px), only screen and (orientation: landscape) and (max-height: 450px) and (max-width: 919.9px) and (orientation: landscape) and (max-height: 450px) and (max-width: 919.9px) {
    .navMobileShow {
      bottom: calc(1vw - 5px);
      width: 50vw;
      left: 0.9vw;
      height: 5.4vw;
      border: none !important; } }
  @media only screen and (orientation: portrait) and (max-width: 599.9px) and (min-height: 600px), only screen and (orientation: landscape) and (max-height: 450px) and (max-width: 919.9px) and (min-height: 600px) {
    .navMobileShow {
      bottom: calc(7.9vw + 15px); } }

@media only screen and (orientation: portrait) and (max-width: 599.9px), only screen and (orientation: landscape) and (max-height: 450px) and (max-width: 919.9px) {
  .navPos .navLine:not(.navLineMobile) {
    display: none; }
  .navPos .navLine.navLineMobile {
    display: block;
    background-color: #044dff;
    right: 0;
    top: calc(30px - 9.15vh);
    left: -11vw;
    width: 150vw; } }
  @media only screen and (orientation: portrait) and (max-width: 599.9px) and (orientation: portrait) and (min-height: 700px), only screen and (orientation: landscape) and (max-height: 450px) and (max-width: 919.9px) and (orientation: portrait) and (min-height: 700px) {
    .navPos .navLine.navLineMobile {
      top: calc(16px - 7.33vh); } }

@media only screen and (orientation: portrait) and (max-width: 599.9px), only screen and (orientation: landscape) and (max-height: 450px) and (max-width: 919.9px) {
  nav a {
    pointer-events: none; }
  nav .subStop {
    pointer-events: all; }
  .scene .carousel__cell {
    transition: opacity 0.33s, filter 0.33s, height 0.25s;
    transition-delay: 1s; }
  #content section .place3D .button-group,
  #content section .place3D .holder,
  #content section .place3D .art-container {
    transition: opacity 0.33s, filter 0.33s;
    transition-delay: 1s; }
  #content section .place3D .typeFix,
  #content section .place3D a.closeBtn {
    transition: opacity 0.33s, filter 0.33s;
    transition-delay: 1s; }
  #content section .place3D .svgBackground {
    transition: opacity 0.33s, filter 0.33s;
    transition-delay: 1s; }
  .holder .gridContain {
    transition: height 0.25s; }
  .clickAway {
    display: none;
    opacity: 0;
    transition: opacity 0.25s;
    transition-delay: 0.25s; }
  .navOpen #content section .place3D .button-group,
  .navOpen #content section .place3D .holder,
  .navOpen #content section .place3D .art-container,
  .navOpen #content section .place3D .carousel__cell {
    opacity: 0.67;
    filter: blur(10px);
    transition-delay: 0s; }
  .navOpen #content section .place3D .typeFix,
  .navOpen #content section .place3D a.closeBtn {
    opacity: 0.7;
    filter: blur(5px);
    transition-delay: 0s; }
  .navOpen #content section .place3D .svgBackground {
    opacity: 0.8;
    filter: blur(12px);
    transition-delay: 0s; }
  .navOpen #content section .place3D * {
    pointer-events: none; }
  .navOpen #content section {
    pointer-events: none; }
  .navOpen .clickAway {
    opacity: 1;
    transition-delay: 0s;
    position: fixed;
    display: block;
    bottom: 0;
    height: 110vh;
    left: 0;
    width: 100vw;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,000000+90&0.1+61,0.15+77,0.3+90 */
    background: -moz-linear-gradient(top, rgba(30, 87, 153, 0) 40%, rgba(10, 28, 49, 0.1) 61%, rgba(4, 13, 22, 0.15) 77%, rgba(0, 0, 0, 0.3) 90%);
    background: -webkit-linear-gradient(top, rgba(30, 87, 153, 0) 40%, rgba(10, 28, 49, 0.1) 61%, rgba(4, 13, 22, 0.15) 77%, rgba(0, 0, 0, 0.3) 90%);
    background: linear-gradient(to bottom, rgba(30, 87, 153, 0) 40%, rgba(10, 28, 49, 0.1) 61%, rgba(4, 13, 22, 0.15) 77%, rgba(0, 0, 0, 0.3) 90%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1e5799', endColorstr='#4d000000',GradientType=0 ); }
  .navOpen .holder .gridContain {
    height: 67vh; }
  .navOpen nav a, .navOpen .mainTitle {
    pointer-events: all; } }

@media only screen and (orientation: portrait) and (max-width: 599.9px) and (min-height: 600px), only screen and (orientation: landscape) and (max-height: 450px) and (max-width: 919.9px) and (min-height: 600px) {
  .navOpen .mainTitle {
    bottom: calc(7.9vw + 16px); } }

@media only screen and (orientation: portrait) and (max-width: 599.9px), only screen and (orientation: landscape) and (max-height: 450px) and (max-width: 919.9px) {
  .navOpen nav .subStop {
    border-width: 15px;
    top: -8px;
    right: -26px;
    width: 40px;
    height: 40px;
    pointer-events: all; }
  .navOpen .navMobileShow {
    display: none; } }

body.level0 .clickAway {
  display: none !important; }

.mainTitle {
  position: fixed;
  bottom: -11px;
  left: 8.5%;
  width: 650px;
  height: 130px;
  z-index: 200000;
  pointer-events: none; }
  .mainTitle canvas#textLogo {
    width: 100%;
    height: 100%; }
  .mainTitle .background {
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1; }
  @media (orientation: portrait) and (max-width: 599.9px) {
    .mainTitle {
      width: 100%;
      height: 10vw;
      right: unset;
      left: unset;
      overflow: hidden;
      bottom: calc(7.9vw - 9px); } }
  @media only screen and (orientation: portrait) and (max-width: 599.9px) and (min-height: 600px) {
    .mainTitle {
      bottom: calc(7.9vw + 11px); } }
  @media (orientation: portrait) and (max-width: 599.9px) {
      .mainTitle .background {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0.9vw;
        height: 3.9vw;
        box-sizing: border-box;
        border-right: none;
        border-left: none; } }
  @media only screen and (min-width: 600px) and (max-width: 919.9px) {
    .mainTitle {
      margin-left: -125px;
      bottom: 0px;
      left: calc(24% - 175px); } }
  @media only screen and (min-width: 600px) and (max-width: 699.99px) {
    .mainTitle {
      bottom: 15px;
      margin-left: -140px;
      left: calc(26% - 185px); } }
  @media only screen and (orientation: landscape) and (min-height: 700px) and (max-width: 919.9px) {
    .mainTitle {
      bottom: calc(-5px + 0.25vh); } }
  @media only screen and (orientation: landscape) and (min-height: 850px) {
    .mainTitle {
      bottom: calc(-12px + 1vh); } }
  @media only screen and (min-width: 920px) and (max-width: 979.99px) {
    .mainTitle {
      left: calc(28% - 325px);
      margin-left: -1vw; } }
  @media only screen and (min-width: 980px) and (max-width: 1299.99px) {
    .mainTitle {
      left: calc(28% - 325px);
      margin-left: 0; } }
  @media (min-width: 1800px) {
    .mainTitle {
      left: calc(50% - 745px); } }
  @media screen and (orientation: landscape) and (max-height: 500px) {
    .mainTitle {
      bottom: -35px; } }

.grass > div {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4e391+0,61c419+50,87b272+100 */
  background: #b4e391;
  /* Old browsers */
  background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #87b272 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #b4e391 0%, #61c419 50%, #87b272 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #b4e391 0%, #61c419 50%, #87b272 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#87b272',GradientType=0 );
  /* IE6-9 */
  background: #666;
  border-right: solid 2px rgba(180, 227, 145, 0.8);
  border-left: solid 1px rgba(127, 169, 97, 0.5);
  border-top-right-radius: 100%;
  bottom: 0;
  position: absolute;
  transform-origin: bottom;
  transition: all 100ms ease-in-out;
  width: 9px; }

.grass:not(.hidden) > div {
  transition: all 100ms ease-in-out; }

.grass:not(.hidden) > div:nth-child(1n) {
  animation: breeze 12s cubic-bezier(0.8, -0.5, 0.25, 1.5) infinite; }

.grass:not(.hidden) > div:nth-child(2n) {
  animation: breeze 12s cubic-bezier(0.6, -0.5, 0.25, 1.8) infinite;
  border-right: solid 2px rbga(140, 200, 90, 0.9); }

@keyframes breeze {
  0%, 100% {
    transform: auto; }
  50% {
    transform: rotate(5deg); } }

.grass:not(.hidden) > div:nth-child(5n) {
  animation-delay: 0.75s;
  animation: breeze2 12s cubic-bezier(0.8, -0.5, 0.25, 1.5) infinite; }

.grass:not(.hidden) > div:nth-child(3n) {
  animation-delay: 1s;
  animation: breeze2 12s cubic-bezier(0.6, -0.4, 1.25, 1.8) infinite; }

@keyframes breeze2 {
  0%, 100% {
    transform: auto; }
  50% {
    transform: rotate(10deg); } }

.cloudContainer {
  display: none; }

@media (orientation: portrait) and (max-width: 768px) and (max-height: 1024px), (orientation: landscape) and (max-height: 768px) and (max-width: 1024px) {
  .cloudContainer {
    display: block;
    max-width: 100vw;
    overflow: visible; }
  .mobileClouds {
    position: fixed;
    z-index: -10;
    left: -50vw;
    top: -130vh;
    bottom: -25vw;
    right: -50vw;
    background: url(../img/cloudMobile.jpg) no-repeat center center;
    background-size: cover;
    overflow: hidden;
    width: 200vw;
    height: 150vh; } }
  @media (orientation: portrait) and (max-width: 768px) and (max-height: 1024px) and (orientation: landscape), (orientation: landscape) and (max-height: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .mobileClouds {
      width: 120vw;
      left: -10vw;
      right: 0;
      top: -150vh;
      height: 190vh; } }

@media (orientation: portrait) and (max-width: 599.9px), (orientation: landscape) and (max-height: 500px) {
  #water {
    bottom: -1px;
    position: fixed; } }

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

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/*
.icon-expand:before {
  content: "\e01a";
}
.icon-facebook:before {
  content: "\e900";
  color: #3b5998;
}
.icon-github:before {
  content: "\e901";
}
.icon-linkedin:before {
  content: "\e902";
  color: #0077b5;
}
*/
.icon-graduate:before {
  content: "\e905";
  color: #fff;
  margin-right: 4px; }

.icon-briefcase:before {
  content: "\e9ae";
  color: #fff;
  margin-right: 4px;
  margin-left: 1px; }

.icon-heart:before {
  content: "\e9da";
  color: #fff;
  font-size: 0.9em;
  margin-right: 7px; }

button .icon-graduate:before,
button .icon-briefcase:before,
button .icon-heart:before {
  position: absolute;
  right: 0;
  bottom: 10%; }