/* Thomsoon.com - OnePage CSS Responsive theme
-- version 1.0
-- Copyright (c) 2014 Thomsoon.com
-- licensed under the MIT
--
-- http://www.thomsoon.com/
--
*/

/* Font Google - strong reaload time */
@import url(http://fonts.googleapis.com/css?family=Lato:400,300,100,700,900&subset=latin,latin-ext);

@import url(//db.onlinewebfonts.com/c/79927a8d010a79419f5c30e4d87409d5?family=Visby+CF+Medium);

/*
 * Theme Name: Onepage
 * Author: Thomsoon
 * Created: 14/11/2014
 */

@font-face {
	font-family: 'effra';
	src: url ('effra.ttf'); 
	src: 
		local('effra'),
		local('effra'),
		url('effra.ttf') 
		format('truetype');
}

@font-face {
	font-family: 'effra-lt';
	src: url ('effra-lt.ttf'); 
	src: 
		local('effra-lt'),
		local('effra-lt'),
		url('effra-lt.ttf') 
		format('truetype');
}


@font-face {
    font-family: 'proxima-nova-light';
    src: url(proxima-nova-light.otf);
}

@font-face {
    font-family: "proxima nova";
    src: url(proxima-nova-regular.otf);
}

@font-face {
	font-family: 'proxima-nova-semibold';
	src: url ('proxima-nova-semibold.otf'); 
	src: 
		local('proxima-nova-semibold'),
		local('proxima-nova-semibold'),
		url('proxima-nova-semibold.otf') 
		format('opentype');
}

@font-face {
    font-family: 'proxima-nova-bold';
    src: url(proxima-nova-bold.otf);
}


@font-face {font-family: "Visby CF Medium";
    src: url("//db.onlinewebfonts.com/t/79927a8d010a79419f5c30e4d87409d5.eot");
    src: url("//db.onlinewebfonts.com/t/79927a8d010a79419f5c30e4d87409d5.eot?#iefix") format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/79927a8d010a79419f5c30e4d87409d5.woff2") format("woff2"),
    url("//db.onlinewebfonts.com/t/79927a8d010a79419f5c30e4d87409d5.woff") format("woff"),
    url("//db.onlinewebfonts.com/t/79927a8d010a79419f5c30e4d87409d5.ttf") format("truetype"),
    url("//db.onlinewebfonts.com/t/79927a8d010a79419f5c30e4d87409d5.svg#Visby CF Medium") format("svg");
}

@font-face {
	font-family: 'visby-bold';
	src: url ('visby-bold.ttf'); 
	src: 
		local('visby-bold'),
		local('visby-bold'),
		url('visby-bold.ttf') 
		format('truetype');
}

@font-face {
	font-family: 'visby-med';
	src: url ('visby-med.ttf'); 
	src: 
		local('visby-med'),
		local('visby-med'),
		url('visby-med.ttf') 
		format('truetype');
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


/*art-page*/

h4 {
  margin-right:auto;
  margin-left:auto;
  text-transform: uppercase;
  color: #1e1e1e;
  font-family: 'proxima nova', sans-serif;
  letter-spacing: .9pt;
}

.logos {
  width:200px;
  height:40px;
  border-bottom:5px;
  border-color:black;
  position:relative;
  margin:0px auto 0px;
  background:none;
}

.art-content {
  margin: auto;
    width: 1245px;
    margin-top:150px;
}

.artwork {
  margin-left: 405px;
  width: 1100px;
}
.artwork img {
  max-width: 825px;
  margin-bottom: 25px;
  max-height: 750px;
}

.artwork-english{
  margin-left: 0px;
}
.artwork-english img {
  min-width:1000px;
  padding:15px;
  background-color: #1e1e1e;
  max-width: 1200px;
  margin-bottom: 15px;
  max-height: 800px;
}

.artwork-drip img {
  min-width:1000px;
  padding:15px;
  background-color: #fff;
  max-width: 1300px;
  margin-bottom: 15px;
  max-height: 800px;
}


/*art-page-end*/


.preloader{
  position:fixed;
  width:100%;
  height:100%;
  background:white;
  z-index:9999;
}
 
.preloader .item{
  position:absolute;
  width:30px;
  height:30px;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-50px;
} 


html, body{
  font-family: 'proxima nova', sans-serif;
  font-size:15px;
  -webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
  -webkit-font-smoothing: subpixel-antialiased!important;
  color:black;
  background-color: #fffbf7;
  height:100%;
  width:100%;
}

body {
    background-color: #fff8f1;
}

a{
  text-decoration:none;
  outline:none;
  font-size:14px;
}

h1{
  font-size:42px;
  font-family: 'proxima-nova-bold', sans-serif;
}


p{
  font-size:14px;
}


h1 span{
  color:#2fa68e;
}


::selection {
  background: #7ca5a5;
  color:white;
}

::-moz-selection {
  background: #7ca5a5;
  color:white;
}


.container{
  position:relative;
  width:100%;
  height:100%;
}






/* Start page */

.start-page{
  position:relative;
  width:100%;
  height:100%;
  background-color: #fff8f1;
  background: linear-gradient(to bottom right, #fcfbf9, #fff8f1);
  background-image: radial-gradient(
    farthest-corner at 40px 40px,
    #fcfbf9 0%,
    #fff8f1 75%
  );
      -webkit-animation: start-fadein .8s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: start-fadein .8s; /* Firefox < 16 */
        -ms-animation: start-fadein .8s; /* Internet Explorer */
         -o-animation: start-fadein .8s; /* Opera < 12.1 */
            animation: start-fadein .8s;
}

@keyframes start-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes start-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes start-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes start-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes start-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
  /*
          opacity:0;
        -webkit-animation:fadeIn ease-in 1;
        -moz-animation:fadeIn ease-in 1;
        -o-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
        -o-animation-fill-mode:forwards;
        animation-fill-mode:forwards;

	        -webkit-animation-duration:1.5s;
        -moz-animation-duration:1.5s;
        -o-animation-duration:1.5s;
        animation-duration:1.5s;
	
	        -webkit-animation-delay:.3s;
        -moz-animation-delay:.3s;
        -o-animation-delay:.3s;
        animation-delay:.3s;
        */


/*
.start-page hr{
  color: black;
  margin-top:30px;
  background-color: #fff;
  height: 2px;
  width:106px;
  border:0;

}

.start-page .opacity{
  position:absolute;
  width:100%;
  height:100%;
}

.start-page .content{
  position:relative;
  width:100%;
  margin:0 auto;
  height:100%;
}

*/

 
/* Blue Rectangles */

.start-page .blue-rect1{
      width: .1%;
      height: 11%;
      background: #115c63;
      position: absolute;
      animation-delay: 1.9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect1;
      animation-duration: 2.4s;
      
      /*
         opacity:0;
        -webkit-animation:fadeIn ease .23;
        -moz-animation:fadeIn ease .23;
        -o-animation:fadeIn ease .23;
        animation:fadeIn ease .23;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
        -o-animation-fill-mode:forwards;
        animation-fill-mode:forwards;

	        -webkit-animation-duration:1.5s;
        -moz-animation-duration:1.5s;
        -o-animation-duration:1.5s;
        animation-duration:1.5s;
	
	        -webkit-animation-delay:.6s;
        -moz-animation-delay:.6s;
        -o-animation-delay:.6s;
        animation-delay:.6s;
      */
   }     @keyframes move-blue-rect1 {
          from {top: 4%; left: 4%; opacity:0;}
          to {top: 7%; left: 4%; opacity: .4;}
}
@-webkit-keyframes move-blue-rect1 {
          from {top: 4%; left: 4%; opacity:0;}
          to {top: 7%; left: 4%; opacity: .4;}
}

.start-page .blue-rect2{
      width: 14%;
      height: .9%;
      background: #115c63;
      position: absolute;
      top:7%;
      left:60%;
      opacity:.34;
            animation-delay: 1.7s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect2;
      animation-duration: 2.9s;
}

@keyframes move-blue-rect2 {
  0% {transform: translateX (0%); opacity:0;
  }
  100% {transform: translateX(-60%); opacity:.34;
  }
}

.start-page .blue-rect3{
      width: 9%;
      height: .4%;
      background: #115c63;
      position: absolute;
      top: 6.5%; left: -9%; opacity: .14;
      animation-delay: 2.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect3;
      animation-duration: 3.5s;
}
@keyframes move-blue-rect3 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(150%); opacity:.14; }
}


.start-page .blue-rect4{
      width: 7%;
      height: .4%;
      background: #115c63;
      position: absolute;
      top: 26%; left: 0%; opacity: .24;
            animation-delay: 2.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect4;
      animation-duration: 2s;
}
@keyframes move-blue-rect4 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(150%); opacity:.24; }
}


.start-page .blue-rect5{
      width: 11%;
      height: 1.2%;
      background: #115c63;
      position: absolute;
      top: 32%; left: 3%; opacity: .14;
                  animation-delay: 1.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect5;
      animation-duration: 1.6s;
}
@keyframes move-blue-rect5 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(70%); opacity:.14; }
}


.start-page .blue-rect6{
      width: 16%;
      height: .3%;
      background: #115c63;
      position: absolute;
      top: 36%; left: 17%; opacity: .48;
                        animation-delay: 1.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect6;
      animation-duration: 1.2s;
}
@keyframes move-blue-rect6 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(33%); opacity:.48; }
}


.start-page .blue-rect7{
      width: 20%;
      height: .45%;
      background: #115c63; 
      position: absolute;
      top: 36.7%; left: 47.5%; opacity: .31;
                              animation-delay: .9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect7;
      animation-duration: 1.9s;
}
@keyframes move-blue-rect7 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-60%); opacity:.31; }
}

.start-page .blue-rect8{
      width: 6%;
      height: .8%;
      background: #115c63;
      position: absolute;
      top: 22%; left: 36%; opacity: .18;
                                    animation-delay: 1.4s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect8;
      animation-duration: 1.9s;
}
@keyframes move-blue-rect8 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-100%); opacity:.18; }
}


.start-page .blue-rect9{
      width: 9%;
      height: .5%;
      background: #115c63;
      position: absolute;
      top: 43%; left: 20%; opacity: .26;
                                          animation-delay: 1.2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect9;
      animation-duration: 2s;
}
@keyframes move-blue-rect9 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-100%); opacity:.26; }
}


.start-page .blue-rect10{
      width: 11%;
      height: .6%;
      background: #115c63;
      position: absolute;
      top: 43.4%; left: 15%; opacity: .29;
                                                animation-delay: .9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect10;
      animation-duration: 2.6s;
}
@keyframes move-blue-rect10 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(100%); opacity:.26; }
}


.start-page .blue-rect11{
      width: 5%;
      height: .45%;
      background: #115c63;
      position: absolute;
      top: 41.8%; left: 39%; opacity: .5;
                                                animation-delay: 1.7s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect11;
      animation-duration: 1.6s;
}
@keyframes move-blue-rect11 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-100%); opacity:.48; }
}


.start-page .blue-rect12{
      width: 32.5%;
      height: .55%;
      background: #115c63;
      position: absolute;
      top: 48.4%; left: 12%; opacity: .23;
                                                      animation-delay: 2.2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect12;
      animation-duration: 1.9s;
}
@keyframes move-blue-rect12 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(20%); opacity:.21; }
}

.start-page .blue-rect13{
      width: 5%;
      height: .34%;
      background: #115c63;
      position: absolute;
      top: 51%; left: 13%; opacity: .11;
                                animation-delay: 2.4s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect13;
      animation-duration: 2.8s;
}
@keyframes move-blue-rect13 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(100%); opacity:.21; }
}

.start-page .blue-rect14{
      width: 10%;
      height: .2%;
      background: #115c63;
      position: absolute;
      top: 52%; left: 14%; opacity: .5;
                 animation-delay: 1.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect14;
      animation-duration: 2.4s;
}
@keyframes move-blue-rect14 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(100%); opacity:.5; }
}


.start-page .blue-rect15{
      width: 13%;
      height: .24%;
      background: #115c63;	
      position: absolute;
      top: 53%; left: 38%; opacity: .48;
	      animation-delay: .9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect15;
      animation-duration: 2s;
}
@keyframes move-blue-rect15 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-100%); opacity:.5; }
}


.start-page .blue-rect16{
      width: 3.3%;
      height: 1.3%;
      background: #115c63;
      opacity: .41;
      position: absolute;
      top:55.3%;
      left:37.6%;
	      animation-delay: .9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect16;
      animation-duration: 1.8s;
}
@keyframes move-blue-rect16 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(100%); opacity:.41; }
}

.start-page .blue-rect17{
      width: 11%;
      height: .4%;
      background: #115c63;
      position: absolute;
      top: 59%; left: 36.7%; opacity: .27;
	      animation-delay: 1.7s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect17;
      animation-duration: 1.9s;
}
@keyframes move-blue-rect17 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-100%); opacity:.27; }
}

.start-page .blue-rect18{
      width: 8%;
      height: .36%;
      background: #115c63;
      position: absolute;
      top: 59.8%; left: 10.7%; opacity: .42;
	      animation-delay: 1.1s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect18;
      animation-duration: 2.8s;
}
@keyframes move-blue-rect18 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-100%); opacity:.42; }
}

.start-page .blue-rect19{
      width: 9.5%;
      height: 1%;
      background: #115c63;
      position: absolute;
      top: 68%; left: -5.8%; opacity: .18;
	      animation-delay: 1.5s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect19;
      animation-duration: 2.3s;
}
@keyframes move-blue-rect19 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(100%); opacity:.18; }
}

.start-page .blue-rect20{
      width: 12%;
      height: 1%;
      background: #115c63;
      opacity: .36;
      position: absolute;
      top:80%;
      left:40%;
	      animation-delay: 1.96s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect20;
      animation-duration: 2.9s;
}
@keyframes move-blue-rect20 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(100%); opacity:.31; }
}

.start-page .blue-rect21{
      width: 31%;
      height: .3%;
      background: #115c63;
      position: absolute;
      top: 82.5%; left: 69%; opacity: .29;
	      animation-delay: 3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect21;
      animation-duration: 2.1s;
}
@keyframes move-blue-rect21 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-20%); opacity:.28; }
}

.start-page .blue-rect22{
      width: 9%;
      height: .45%;
      background: #115c63;
      position: absolute;
      top: 58%; left: 88%; opacity: .46;
	      animation-delay: 3.8s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect22;
      animation-duration: 2.8s;
}
@keyframes move-blue-rect22 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-100%); opacity:.46; }
}



.start-page .blue-rect23{
      width: 8.4%;
      height: .3%;
      background: #115c63;
      opacity: .37;
      position: absolute;
      top:72.2%;
      left:79.3%;
	      animation-delay: .8s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect23;
      animation-duration: 3s;
}
@keyframes move-blue-rect23 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-100%); opacity:.37; }
}


.start-page .blue-rect24{
      width: 12%;
      height: .21%;
      background: #115c63;
      opacity: .19;
      position: absolute;
      top:14%;
      left:73.7%;
	      animation-delay: 2.9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect24;
      animation-duration: 2.1s;
}
@keyframes move-blue-rect24 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-100%); opacity:.19; }
}

.start-page .blue-rect25{
      width: 7%;
      height: .19%;
      background: #115c63;
      opacity: .38;
      position: absolute;
      top:33%;
      left:58%;
	      animation-delay: .8s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect25;
      animation-duration: 3.6s;
}
@keyframes move-blue-rect25 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-100%); opacity:.38; }
}


.start-page .blue-rect26{
      width: 6.3%;
      height: .36%;
      background: #115c63;
      opacity: .29;
      position: absolute;
      top:55.6%;
      left:63.3%;
	      animation-delay: 1.89s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect26;
      animation-duration: 2.8s;
}
@keyframes move-blue-rect26 {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-100%); opacity:.29; }
}


.start-page .blue-rect27{
      width: .23%;
      height: 11%;
      background: #115c63;
      opacity: .27;
      position: absolute;
      top:44%;
      left:49.5%;
	      animation-delay: 2.7s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect27;
      animation-duration: 1.87s;
}
@keyframes move-blue-rect27 {
  0% { transform: translateY (0%); opacity:0; }
  100% { transform: translateY(100%); opacity:.27; }
}


.start-page .blue-rect28{
      width: .18%;
      height: 29%;
      background: #115c63;
      opacity: .3;
      position: absolute;
      top:56%;
      left:70%;
	      animation-delay: 2.2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect28;
      animation-duration: 2.3s;
}
@keyframes move-blue-rect28 {
          from {top: 39%; left: 70%; opacity:0;}
          to {top: 56%; left: 70%; opacity: .27;}
}
@-webkit-keyframes move-blue-rect28 {
          from {top: 39%; left: 70%; opacity:0;}
          to {top: 56%; left: 70%; opacity: .27;}
}


.start-page .blue-rect29{
      width: 6%;
      height: .13%;
      background: #115c63;
      position: absolute;
	      animation-delay: 2.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-blue-rect29;
      animation-duration: 2.2s;
}
@keyframes move-blue-rect29 {
          from {top: 64%; left: 10%; opacity:0;}
          to {top: 64%; left: 36%; opacity: .28;}
}
@-webkit-keyframes move-blue-rect29 {
          from {top: 64%; left: 10%; opacity:0;}
          to {top: 64%; left: 36%; opacity: .28;}
}



/* Green Rectangles */

.start-page .green-rect1{
      width: 16%;
      height: .6%;
      background: #89aa61;
      opacity: .28;
      position: absolute;
      top:16%;
      left:21%;
	      animation-delay: .6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect1;
      animation-duration: 3.2s;
}
@keyframes move-green-rect1 {
          from {top: 16%; left: 9%; opacity:0;}
          to {top: 16%; left: 21%; opacity: .28;}
}
@-webkit-keyframes move-green-rect1 {
          from {top: 64%; left: 10%; opacity:0;}
          to {top: 64%; left: 36%; opacity: .28;}
}

.start-page .green-rect2{
      width: .3%;
      height: 11%;
      background: #89aa61;
      opacity: .18;
      position: absolute;
      top:13.4%;
      left:34%;
	      animation-delay: .9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect2;
      animation-duration: 3.7s;
}
@keyframes move-green-rect2 {
          from {top: 2%; left: 34%; opacity:0;}
          to {top: 13.4%; left: 34%; opacity: .18;}
}
@-webkit-keyframes move-green-rect2 {
          from {top: 2%; left: 34%; opacity:0;}
          to {top: 13.4%; left: 34%; opacity: .18;}
}

.start-page .green-rect3{
      width: .27%;
      height: 20%;
      background: #89aa61;
      opacity: .38;
      position: absolute;
      top:21%;
      left:39%;
	      animation-delay: 3.1s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect3;
      animation-duration: 3.5s;
}
@keyframes move-green-rect3 {
          from {top: 5%; left: 39%; opacity:0;}
          to {top: 21%; left: 39%; opacity: .38;}
}
@-webkit-keyframes move-green-rect3 {
          from {top: 5%; left: 39%; opacity:0;}
          to {top: 21%; left: 39%; opacity: .38;}
}

.start-page .green-rect4{
      width: .45%;
      height: 15%;
      background: #89aa61;
      opacity: .6;
      position: absolute;
      top:24.9%;
      left:30.3%;
	      animation-delay: 1.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect4;
      animation-duration: 3.1s;
}
@keyframes move-green-rect4 {
          from {top: 9%; left: 30.3%; opacity:0;}
          to {top: 24.9%; left: 30.3%; opacity: .59;}
}
@-webkit-keyframes move-green-rect4 {
          from {top: 9%; left: 30.3%; opacity:0;}
          to {top: 24.9%; left: 30.3%; opacity: .59;}
}

.start-page .green-rect5{
      width: .16%;
      height: 23%;
      background: #89aa61;
      opacity: .29;
      position: absolute;
      top:34.1%;
      left:36.3%;
	      animation-delay: 4s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect5;
      animation-duration: 1.8s;
}
@keyframes move-green-rect5 {
          from {top: 53%; left: 36.3%; opacity:0;}
          to {top: 34.1%; left: 36.3%; opacity: .29;}
}
@-webkit-keyframes move-green-rect5 {
          from {top: 53%; left: 36.3%; opacity:0;}
          to {top: 34.1%; left: 36.3%; opacity: .29;}
}


.start-page .green-rect6{
      width: .75%;
      height: 16%;
      background: #89aa61;
      opacity: .48;
      position: absolute;
      top:28%;
      left:41%;
	      animation-delay: 4.2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect6;
      animation-duration: 2.3s;
}
@keyframes move-green-rect6 {
          from {top: 38%; left: 41%; opacity:0;}
          to {top: 28%; left: 41%; opacity: .48;}
}
@-webkit-keyframes move-green-rect6 {
          from {top: 38%; left: 41%; opacity:0;}
          to {top: 28%; left: 41%; opacity: .48;}
}


.start-page .green-rect7{
      width: 4.8%;
      height: .5%;
      background: #89aa61;
      position: absolute;
	      animation-delay: 4.2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect7;
      animation-duration: 3.4s;
}
@keyframes move-green-rect7 {
          from {top: 31%; left: 41%; opacity:0;}
          to {top: 31%; left: 27%; opacity: .3;}
}
@-webkit-keyframes move-green-rect7 {
          from {top: 31%; left: 41%; opacity:0;}
          to {top: 31%; left: 27%; opacity: .3;}
}


.start-page .green-rect9{
      width: 18%;
      height: .4%;
      background: #89aa61;
      opacity: .41;
      position: absolute;
      top:37.7%;
      left:16.5%;
	      animation-delay: 1.5s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect9;
      animation-duration: 4.4s;
}
@keyframes move-green-rect9 {
          from {top: 37.7%; left: -18%; opacity:0;}
          to {top: 37.7%; left: 16.5%; opacity: .41;}
}
@-webkit-keyframes move-green-rect9 {
          from {top: 37.7%; left: -18%; opacity:0;}
          to {top: 37.7%; left: 16.5%; opacity: .41;}
}


.start-page .green-rect10{
      width: .4%;
      height: 10%;
      background: #89aa61;
      opacity: .29;
      position: absolute;
      top: 33.8%;
      left:5.7%;
	      animation-delay: 2.4s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect10;
      animation-duration: 4.7s;
}
@keyframes move-green-rect10 {
          from {top: 69%; left: 5.7%; opacity:0;}
          to {top: 33.8%; left: 5.7%; opacity: .29;}
}
@-webkit-keyframes move-green-rect10 {
          from {top: 69%; left: 5.7%; opacity:0;}
          to {top: 33.8%; left: 5.7%; opacity: .29;}
}


.start-page .green-rect11{
      width: .17%;
      height: 9%;
      background: #89aa61;
      opacity: .40;
      position: absolute;
      top: 28%;
      left:7%;
	      animation-delay: 2.2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect11;
      animation-duration: 4s;
}
@keyframes move-green-rect11 {
          from {top: 0%; left: 7%; opacity:0;}
          to {top: 28%; left: 7%; opacity: .4;}
}
@-webkit-keyframes move-green-rect11 {
          from {top: 0%; left: 7%; opacity:0;}
          to {top: 28%; left: 7%; opacity: .4;}
}


.start-page .green-rect12{
      width: .15%;
      height: 5%;
      background: #89aa61;
      opacity: .32;
      position: absolute;
      top: 36.6%;
      left:14%;
	      animation-delay: 2.5s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect12;
      animation-duration: 3.2s;
}
@keyframes move-green-rect12 {
          from {top: 60%; left: 36.9%; opacity:0;}
          to {top: 36.6%; left: 36.9%; opacity: .32;}
}
@-webkit-keyframes move-green-rect12 {
          from {top: 60%; left: 36.9%; opacity:0;}
          to {top: 36.6%; left: 36.9%; opacity: .32;}
}


.start-page .green-rect13{
      width: .13%;
      height: 15%;
      background: #89aa61;
      opacity: .49;
      position: absolute;
      top: 41%;
      left:28.8%;
	      animation-delay: 4.1s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect13;
      animation-duration: 2.9s;
}
@keyframes move-green-rect13 {
          from {top: 12%; left: 28.6%; opacity:0;}
          to {top: 41%; left: 28.6%; opacity: .49;}
}
@-webkit-keyframes move-green-rect13 {
          from {top: 12%; left: 28.6%; opacity:0;}
          to {top: 41%; left: 28.6%; opacity: .49;}
}


.start-page .green-rect14{
      width: .63%;
      height: 13%;
      background: #89aa61;
      opacity: .29;
      position: absolute;
      top: 52%;
      left:17%;
	      animation-delay: 3.9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect14;
      animation-duration: 3.3s;
}
@keyframes move-green-rect14 {
          from {top: 15%; left: 17%; opacity:0;}
          to {top: 52%; left: 17%; opacity: .29;}
}
@-webkit-keyframes move-green-rect14 {
          from {top: 15%; left: 17%; opacity:0;}
          to {top: 52%; left: 17%; opacity: .29;}
}


.start-page .green-rect15{
      width: .59%;
      height: 15%;
      background: #89aa61;
      opacity: .17;
      position: absolute;
      top: 52.5%;
      left:32.4%;
	      animation-delay: 2.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect15;
      animation-duration: 4s;
}
@keyframes move-green-rect15 {
          from {top: 75%; left: 32.4%; opacity:0;}
          to {top: 52.5%; left: 32.4%; opacity: .17;}
}
@-webkit-keyframes move-green-rect15 {
          from {top: 75%; left: 32.4%; opacity:0;}
          to {top: 52.5%; left: 32.4%; opacity: .17;}
}


.start-page .green-rect16{
      width: .52%;
      height: 8%;
      background: #89aa61;
      opacity: .31;
      position: absolute;
      top: 46.7%;
      left:38.7%;
	      animation-delay: 1.4s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect16;
      animation-duration: 2.1s;
}
@keyframes move-green-rect16 {
          from {top: 36.7%; left: 38.7%; opacity:0;}
          to {top: 46.7%; left: 38.7%; opacity: .31;}
}
@-webkit-keyframes move-green-rect16 {
          from {top: 36.7%; left: 38.7%; opacity:0;}
          to {top: 46.7%; left: 38.7%; opacity: .31;}
}


.start-page .green-rect17{
      width: .56%;
      height: 9%;
      background: #89aa61;
      position: absolute;
	      animation-delay: 1.9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect17;
      animation-duration: 3.6s;
}
@keyframes move-green-rect17 {
          from {top: 10%; left: 42%; opacity:0;}
          to {top: 49%; left: 42%; opacity: .26;}
}
@-webkit-keyframes move-green-rect17 {
          from {top: 10%; left: 42%; opacity:0;}
          to {top: 49%; left: 42%; opacity: .26;}
}


.start-page .green-rect18{
      width: .58%;
      height: 12%;
      background: #89aa61;
      opacity: .34;
      position: absolute;
      top: 67.7%;
      left:48%;
	      animation-delay: 1.4s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect18;
      animation-duration: 2.6s;
}
@keyframes move-green-rect18 {
          from {top: 83%; left: 48%; opacity:0;}
          to {top: 67.7%; left: 48%; opacity: .34;}
}
@-webkit-keyframes move-green-rect18 {
          from {top: 83%; left: 48%; opacity:0;}
          to {top: 67.7%; left: 48%; opacity: .34;}
}


.start-page .green-rect19{
      width: .94%;
      height: 11.8%;
      background: #89aa61;
      opacity: .12;
      position: absolute;
      top: 79%;
      left:11%;
	      animation-delay: 2.2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect19;
      animation-duration: 3.9s;
}
@keyframes move-green-rect19 {
          from {top: 30%; left: 11%; opacity:0;}
          to {top: 79%; left: 11%; opacity: .12;}
}
@-webkit-keyframes move-green-rect19 {
          from {top: 30%; left: 11%; opacity:0;}
          to {top: 79%; left: 11%; opacity: .12;}
}


.start-page .green-rect20{
      width: .75%;
      height: 15.6%;
      background: #89aa61;
      opacity: .30;
      position: absolute;
      top: 67.5%;
      left:28%;
	      animation-delay: 1.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect20;
      animation-duration: 5.2s;
}
@keyframes move-green-rect20 {
          from {top: 10%; left: 28%; opacity:0;}
          to {top: 67.5%; left: 28%; opacity: .3;}
}
@-webkit-keyframes move-green-rect20 {
          from {top: 10%; left: 28%; opacity:0;}
          to {top: 67.5%; left: 28%; opacity: .3;}
}


.start-page .green-rect21{
      width: 7%;
      height: .4%;
      background: #89aa61;
      opacity: .18;
      position: absolute;
      top: 60%;
      left:46%;
	      animation-delay: 1s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect21;
      animation-duration: 5.4s;
}
@keyframes move-green-rect21 {
          from {top: 60%; left: -7%; opacity:0;}
          to {top: 60%; left: 46%; opacity: .18;}
}
@-webkit-keyframes move-green-rect21 {
          from {top: 60%; left: -7%; opacity:0;}
          to {top: 60%; left: 46%; opacity: .18;}
}


.start-page .green-rect23{
      width: 21%;
      height: .37%;
      background: #89aa61;
      opacity: .21;
      position: absolute;
      top: 73.6%;
      left:68.4%;
	      animation-delay: 4.9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect23;
      animation-duration: 2.6s;
}
@keyframes move-green-rect23 {
          from {top: 73.6%; left: 49%; opacity:0;}
          to {top: 73.6%; left: 68.4%; opacity: .21;}
}
@-webkit-keyframes move-green-rect23 {
          from {top: 73.6%; left: 49%; opacity:0;}
          to {top: 73.6%; left: 68.4%; opacity: .21;}
}


.start-page .green-rect24{
      width: 15.4%;
      height: .39%;
      background: #89aa61;
      opacity: .36;
      position: absolute;
      top: 58%;
      left:50.6%;
	      animation-delay: 3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect24;
      animation-duration: 4.7s;
}
@keyframes move-green-rect24 {
          from {top: 58.6%; left: 80%; opacity:0;}
          to {top: 58.6%; left: 51%; opacity: .33;}
}
@-webkit-keyframes move-green-rect24 {
          from {top: 58.6%; left: 80%; opacity:0;}
          to {top: 58.6%; left: 51%; opacity: .33;}
}


.start-page .green-rect25{
      width: 8.7%;
      height: .24%;
      background: #89aa61;
      opacity: .37;
      position: absolute;
      top: 28.4%;
      left:57%;
	      animation-delay: 3.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect25;
      animation-duration: 1.9s;
}
@keyframes move-green-rect25 {
          from {top: 28.4%; left: 38%; opacity:0;}
          to {top: 28.4%; left: 57%; opacity: .37;}
}
@-webkit-keyframes move-green-rect25 {
          from {top: 28.4%; left: 38%; opacity:0;}
          to {top: 28.4%; left: 57%; opacity: .37;}
}


.start-page .green-rect26{
      width: .35%;
      height: 9.7%;
      background: #89aa61;
      opacity: .28;
      position: absolute;
      top: 17.2%;
      left:52.4%;
	      animation-delay: 3.2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect26;
      animation-duration: 2.9s;
}
@keyframes move-green-rect26 {
          from {top: -9.7%; left: 52.4%; opacity:0;}
          to {top: 17.2%; left: 52.4%; opacity: .28;}
}
@-webkit-keyframes move-green-rect26 {
          from {top: -9.7%; left: 52.4%; opacity:0;}
          to {top: 17.2%; left: 52.4%; opacity: .28;}
}


.start-page .green-rect27{
      width: .14%;
      height: 15%;
      background: #89aa61;
      opacity: .41;
      position: absolute;
      top: 30%;
      left:47.7%;
	      animation-delay: 2.15s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect27;
      animation-duration: 1.7s;
}
@keyframes move-green-rect27 {
          from {top: 18%; left: 47.7%; opacity:0;}
          to {top: 30%; left: 47.7%; opacity: .41;}
}
@-webkit-keyframes move-green-rect27 {
          from {top: 18%; left: 47.7%; opacity:0;}
          to {top: 30%; left: 47.7%; opacity: .41;}
}


.start-page .green-rect28{
      width: .11%;
      height: 4%;
      background: #89aa61;
      opacity: .31;
      position: absolute;
      top: 31%;
      left:47%;
	      animation-delay: 1.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect28;
      animation-duration: 2.7s;
}
@keyframes move-green-rect28 {
          from {top: 57%; left: 47%; opacity:0;}
          to {top: 31%; left: 47%; opacity: .31;}
}
@-webkit-keyframes move-green-rect28 {
          from {top: 57%; left: 47%; opacity:0;}
          to {top: 31%; left: 47%; opacity: .31;}
}


.start-page .green-rect29{
      width: 5.2%;
      height: .54%;
      background: #89aa61;
      opacity: .13;
      position: absolute;
      top: 45.4%;
      left:39.9%;
	      animation-delay: 3.2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect29;
      animation-duration: 2.9s;
}
@keyframes move-green-rect29 {
          from {top: 45.4%; left: 70%; opacity:0;}
          to {top: 45.4%; left: 39.9%; opacity: .13;}
}
@-webkit-keyframes move-green-rect29 {
          from {top: 45.4%; left: 70%; opacity:0;}
          to {top: 45.4%; left: 39.9%; opacity: .13;}
}


.start-page .green-rect30{
      width: 4.8%;
      height: .52%;
      background: #89aa61;
      opacity: .39;
      position: absolute;
      top: 60%;
      left:24.8%;
	      animation-delay: 4s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect30;
      animation-duration: 1.7s;
}
@keyframes move-green-rect30 {
          from {top: 60%; left: 12%; opacity:0;}
          to {top: 60%; left: 24.8%; opacity: .39;}
}
@-webkit-keyframes move-green-rect30 {
          from {top: 60%; left: 12%; opacity:0;}
          to {top: 60%; left: 24.8%; opacity: .39;}
}


.start-page .green-rect31{
      width: .3%;
      height: 10.2%;
      background: #89aa61;
      opacity: .28;
      position: absolute;
      top: 35%;
      left:34.69%;
	      animation-delay: 3.1s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect31;
      animation-duration: 1.9s;
}
@keyframes move-green-rect31 {
          from {top: 72%; left: 34.69%; opacity:0;}
          to {top: 35%; left: 34.69%; opacity: .28;}
}
@-webkit-keyframes move-green-rect31 {
          from {top: 72%; left: 34.69%; opacity:0;}
          to {top: 35%; left: 34.69%; opacity: .28;}
}

.start-page .green-rect32{
      width: .17%;
      height: 15.6%;
      background: #89aa61;
      opacity: .5;
      position: absolute;
      top: 29%;
      left:33.6%;
	      animation-delay: .4s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect32;
      animation-duration: 4.1s;
}
@keyframes move-green-rect32 {
          from {top: 83%; left: 33.6%; opacity:0;}
          to {top: 29%; left: 33.6%; opacity: .5;}
}
@-webkit-keyframes move-green-rect32 {
          from {top: 83%; left: 33.6%; opacity:0;}
          to {top: 29%; left: 33.6%; opacity: .5;}
}


.start-page .green-rect33{
      width: .16%;
      height: 34.7%;
      background: #89aa61;
      opacity: .38;
      position: absolute;
      top: 9.3%;
      left:23.2%;
	      animation-delay: .2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect33;
      animation-duration: 4.5s;
}
@keyframes move-green-rect33 {
          from {top: -34.7%; left: 23.2%; opacity:0;}
          to {top: 9.3%; left: 23.2%; opacity: .38;}
}
@-webkit-keyframes move-green-rect33 {
          from {top: -34.7%; left: 23.2%; opacity:0;}
          to {top: 9.3%; left: 23.2%; opacity: .38;}
}


.start-page .green-rect34{
      width: .15%;
      height: 17%;
      background: #89aa61;
      opacity: .48;
      position: absolute;
      top: 28.4%;
      left:68.6%;
	      animation-delay: 4.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect34;
      animation-duration: 1.7s;
}
@keyframes move-green-rect34 {
          from {top: 42%; left: 68.6%; opacity:0;}
          to {top: 28.4%; left: 68.6%; opacity: .48;}
}
@-webkit-keyframes move-green-rect34 {
          from {top: 42%; left: 68.6%; opacity:0;}
          to {top: 28.4%; left: 68.6%; opacity: .48;}
}


.start-page .green-rect35{
      width: .14%;
      height: 20%;
      background: #89aa61;
      opacity: .27;
      position: absolute;
      top: 25%;
      left:82.2%;
	      animation-delay: 4.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect35;
      animation-duration: 3.3s;
}
@keyframes move-green-rect35 {
          from {top: 11%; left: 82.2%; opacity:0;}
          to {top: 25%; left: 82.2%; opacity: .27;}
}
@-webkit-keyframes move-green-rect35 {
          from {top: 11%; left: 82.2%; opacity:0;}
          to {top: 25%; left: 82.2%; opacity: .27;}
}


.start-page .green-rect36{
      width: .17%;
      height: 19.8%;
      background: #89aa61;
      opacity: .14;
      position: absolute;
      top: 4.6%;
      left:88.5%;
	      animation-delay: 4.8s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-green-rect36;
      animation-duration: 3.9s;
}
@keyframes move-green-rect36 {
          from {top: -20%; left: 88.5%; opacity:0;}
          to {top: 4.6%; left: 88.5%; opacity: .14;}
}
@-webkit-keyframes move-blue-rect36 {
          from {top: -20%; left: 88.5%; opacity:0;}
          to {top: 4.6%; left: 88.5%; opacity: .14;}
}



/* Yellow Rectangles */

.start-page .yellow-rect1{
      width: .3%;
      height: 15%;
      background: #f9d793;
      opacity: .37;
      position: absolute;
      top:13%;
      left:12.2%;
	      animation-delay: 1.9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect1;
      animation-duration: 3.4s;
}
@keyframes move-yellow-rect1 {
          from {top: -15%; left: 12.2%; opacity:0;}
          to {top: 13%; left: 12.2%; opacity: .37;}
}
@-webkit-keyframes move-yellow-rect1 {
          from {top: -15%; left: 12.2%; opacity:0;}
          to {top: 13%; left: 12.2%; opacity: .37;}
}


.start-page .yellow-rect2{
      width: .3%;
      height: 13.7%;
      background: #f9d793;
      opacity: .32;
      position: absolute;
      top:18.4%;
      left:27.9%;
	      animation-delay: 2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect2;
      animation-duration: 3.9s;
}
@keyframes move-yellow-rect2 {
          from {top: 60%; left: 27.9%; opacity:0;}
          to {top: 18.4%; left: 27.9%; opacity: .32;}
}
@-webkit-keyframes move-yellow-rect2 {
          from {top: 60%; left: 27.9%; opacity:0;}
          to {top: 18.4%; left: 27.9%; opacity: .32;}
}


.start-page .yellow-rect3{
      width: .55%;
      height: 10.6%;
      background: #f9d793;
      opacity: .41;
      position: absolute;
      top: 23%;
      left: 37.1%;
	      animation-delay: 3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect3;
      animation-duration: 2.7s;
}
@keyframes move-yellow-rect3 {
          from {top: -10.6%; left: 37.1%; opacity:0;}
          to {top: 23%; left: 37.1%; opacity: .41;}
}
@-webkit-keyframes move-yellow-rect3 {
          from {top: -10.6%; left: 37.1%; opacity:0;}
          to {top: 23%; left: 37.1%; opacity: .41;}
}


.start-page .yellow-rect4{
      width: 6.5%;
      height: .65%;
      background: #f9d793;
      opacity: .18;
      position: absolute;
      top: 29.7%;
      left: 17.8%;
	      animation-delay: 2.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect4;
      animation-duration: 4s;
}
@keyframes move-yellow-rect4 {
          from {top: 29.7%; left: 80%; opacity:0;}
          to {top: 29.7%; left: 17.8%; opacity: .18;}
}
@-webkit-keyframes move-yellow-rect4 {
          from {top: 29.7%; left: 80%; opacity:0;}
          to {top: 29.7%; left: 17.8%; opacity: .18;}
}


.start-page .yellow-rect5{
      width: .3%;
      height: 16.8%;
      background: #f9d793;
      opacity: .29;
      position: absolute;
      top: 30.4%;
      left: 32.3%;
	      animation-delay: .1s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect5;
      animation-duration: 3.4s;
}
@keyframes move-yellow-rect5 {
          from {top: 2%; left: 32.3%; opacity:0;}
          to {top: 30.4%; left: 32.3%; opacity: .29;}
}
@-webkit-keyframes move-yellow-rect5 {
          from {top: 2%; left: 32.3%; opacity:0;}
          to {top: 30.4%; left: 32.3%; opacity: .29;}
}


.start-page .yellow-rect6{
      width: 6.5%;
      height: .65%;
      background: #f9d793;
      opacity: .30;
      position: absolute;
      top: 49%;
      left: 4%;
	      animation-delay: .4s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect6;
      animation-duration: 4.9s;
}
@keyframes move-yellow-rect6 {
          from {top: 49%; left: 40%; opacity:0;}
          to {top: 49%; left: 4%; opacity: .3;}
}
@-webkit-keyframes move-yellow-rect6 {
          from {top: 49%; left: 40%; opacity:0;}
          to {top: 49%; left: 4%; opacity: .3;}
}


.start-page .yellow-rect7{
      width: .8%;
      height: 12%;
      background: #f9d793;
      opacity: .41;
      position: absolute;
      top: 39.8%;
      left: 39.7%;
	      animation-delay: 3.2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect7;
      animation-duration: 2.2s;
}
@keyframes move-yellow-rect7 {
          from {top: 50%; left: 39.7%; opacity:0;}
          to {top: 39.8%; left: 39.7%; opacity: .41;}
}
@-webkit-keyframes move-yellow-rect7 {
          from {top: 50%; left: 39.7%; opacity:0;}
          to {top: 39.8%; left: 39.7%; opacity: .41;}
}


.start-page .yellow-rect8{
      width: 6.5%;
      height: .26%;
      background: #f9d793;
      opacity: .31;
      position: absolute;
      top: 25%;
      left: 41.6%;
	      animation-delay: 2.7s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect8;
      animation-duration: 3s;
}
@keyframes move-yellow-rect8 {
          from {top: 25%; left: 90%; opacity:0;}
          to {top: 25%; left: 39.7%; opacity: .31;}
}
@-webkit-keyframes move-yellow-rect8 {
          from {top: 25%; left: 90%; opacity:0;}
          to {top: 25%; left: 39.7%; opacity: .31;}
}


.start-page .yellow-rect9{
      width: 15.5%;
      height: .29%;
      background: #f9d793;
      opacity: .16;
      position: absolute;
      top: 54.3%;
      left: 16%;
	      animation-delay: 3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect9;
      animation-duration: 3s;
}
@keyframes move-yellow-rect9 {
          from {top: 54.3%; left: -15.5%; opacity:0;}
          to {top: 54.3%; left: 16%; opacity: .16;}
}
@-webkit-keyframes move-yellow-rect9 {
          from {top: 54.3%; left: -15.5%; opacity:0;}
          to {top: 54.3%; left: 16%; opacity: .16;}
}


.start-page .yellow-rect10{
      width: 7.6%;
      height: .575%;
      background: #f9d793;
      opacity: .22;
      position: absolute;
      top: 75.1%;
      left: 11.4%;
	      animation-delay: 4.1s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect10;
      animation-duration: 2.9s;
}
@keyframes move-yellow-rect10 {
          from {top: 75.1%; left: 40%; opacity:0;}
          to {top: 75.1%; left: 11.4%; opacity: .22;}
}
@-webkit-keyframes move-yellow-rect10 {
          from {top: 75.1%; left: 40%; opacity:0;}
          to {top: 75.1%; left: 11.4%; opacity: .22;}
}


.start-page .yellow-rect11{
      width: 15%;
      height: .37%;
      background: #f9d793;
      opacity: .14;
      position: absolute;
      top: 73.9%;
      left: 26.5%;
	      animation-delay: .5s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect11;
      animation-duration: 4s;
}
@keyframes move-yellow-rect11 {
          from {top: 73.9%; left: -15%; opacity:0;}
          to {top: 73.9%; left: 26.5%; opacity: .14;}
}
@-webkit-keyframes move-yellow-rect11 {
          from {top: 73.9%; left: -15%; opacity:0;}
          to {top: 73.9%; left: 26.5%; opacity: .14;}
}


.start-page .yellow-rect12{
      width: 10.7%;
      height: .59%;
      background: #f9d793;
      opacity: .39;
      position: absolute;
      top: 52.7%;
      left: 40%;
	      animation-delay: .9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect12;
      animation-duration: 4.4s;
}
@keyframes move-yellow-rect12 {
          from {top: 52.7%; left: 80%; opacity:0;}
          to {top: 52.7%; left: 40%; opacity: .39;}
}
@-webkit-keyframes move-yellow-rect12 {
          from {top: 52.7%; left: 80%; opacity:0;}
          to {top: 52.7%; left: 40%; opacity: .39;}
}


.start-page .yellow-rect13{
      width: .32%;
      height: 11.7%;
      background: #f9d793;
      opacity: .32;
      position: absolute;
      top: 66.3%;
      left: 52%;
	      animation-delay: 3.1s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect13;
      animation-duration: 2.7s;
}
@keyframes move-yellow-rect13 {
          from {top: 87%; left: 52%; opacity:0;}
          to {top: 66.3%; left: 52%; opacity: .32;}
}
@-webkit-keyframes move-yellow-rect13 {
          from {top: 87%; left: 52%; opacity:0;}
          to {top: 66.3%; left: 52%; opacity: .32;}
}


.start-page .yellow-rect14{
      width: .3%;
      height: 16.8%;
      background: #f9d793;
      opacity: .41;
      position: absolute;
      top: 68%;
      left: 65%;
	      animation-delay: 2.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect14;
      animation-duration: 2.9s;
}
@keyframes move-yellow-rect14 {
          from {top: 15%; left: 65%; opacity:0;}
          to {top: 68%; left: 65%; opacity: .41;}
}
@-webkit-keyframes move-yellow-rect14 {
          from {top: 15%; left: 65%; opacity:0;}
          to {top: 68%; left: 65%; opacity: .41;}
}


.start-page .yellow-rect15{
      width: 5.3%;
      height: .78%;
      background: #f9d793;
      opacity: .37;
      position: absolute;
      top: 67.4%;
      left: 55.6%;
	      animation-delay: 4.2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect15;
      animation-duration: 1.7s;
}
@keyframes move-yellow-rect15 {
          from {top: 67.4%; left: 45%; opacity:0;}
          to {top: 67.4%; left: 55.6%; opacity: .37;}
}
@-webkit-keyframes move-yellow-rect15 {
          from {top: 67.4%; left: 45%; opacity:0;}
          to {top: 67.4%; left: 55.6%; opacity: .37;}
}


.start-page .yellow-rect16{
      width: 9.5%;
      height: .34%;
      background: #f9d793;
      opacity: .19;
      position: absolute;
      top: 62.5%;
      left: 73.1%;
	      animation-delay: 4.4s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect16;
      animation-duration: 2.7s;
}
@keyframes move-yellow-rect16 {
          from {top: 62.5%; left: 90%; opacity:0;}
          to {top: 62.5%; left: 73.1%; opacity: .19;}
}
@-webkit-keyframes move-yellow-rect16 {
          from {top: 62.5%; left: 90%; opacity:0;}
          to {top: 62.5%; left: 73.1%; opacity: .19;}
}


.start-page .yellow-rect17{
      width: .43%;
      height: 12.2%;
      background: #f9d793;
      opacity: .42;
      position: absolute;
      top: 44.6%;
      left: 62.4%;
	      animation-delay: 3.9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect17;
      animation-duration: 2.9s;
}
@keyframes move-yellow-rect17 {
          from {top: 87%; left: 62.4%; opacity:0;}
          to {top: 44.6%; left: 62.4%; opacity: .42;}
}
@-webkit-keyframes move-yellow-rect17 {
          from {top: 87%; left: 62.4%; opacity:0;}
          to {top: 44.6%; left: 62.4%; opacity: .42;}
}


.start-page .yellow-rect18{
      width: .14%;
      height: 9.3%;
      background: #f9d793;
      opacity: .21;
      position: absolute;
      top: 36.5%;
      left: 83.6%;
	      animation-delay: 3.1s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect18;
      animation-duration: 3.4s;
}
@keyframes move-yellow-rect18 {
          from {top: 80%; left: 83.6%; opacity:0;}
          to {top: 36.5%; left: 83.6%; opacity: .21;}
}
@-webkit-keyframes move-yellow-rect18 {
          from {top: 80%; left: 83.6%; opacity:0;}
          to {top: 36.5%; left: 83.6%; opacity: .21;}
}


.start-page .yellow-rect19{
      width: .12%;
      height: 20%;
      background: #f9d793;
      opacity: .42;
      position: absolute;
      top: 11%;
      left: 59%;
	      animation-delay: .7s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect19;
      animation-duration: 4.4s;
}
@keyframes move-yellow-rect19 {
          from {top: 79%; left: 59%; opacity:0;}
          to {top: 11%; left: 59%; opacity: .42;}
}
@-webkit-keyframes move-yellow-rect19 {
          from {top: 79%; left: 59%; opacity:0;}
          to {top: 11%; left: 59%; opacity: .42;}
}


.start-page .yellow-rect20{
      width: .11%;
      height: 10%;
      background: #f9d793;
      opacity: .34;
      position: absolute;
      top: 34%;
      left: 44.5%;
	      animation-delay: .1s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect20;
      animation-duration: 5.6s;
}
@keyframes move-yellow-rect20 {
          from {top: -10%; left: 44.5%; opacity:0;}
          to {top: 34%; left: 44.5%; opacity: .34;}
}
@-webkit-keyframes move-yellow-rect20 {
          from {top: -10%; left: 44.5%; opacity:0;}
          to {top: 34%; left: 44.5%; opacity: .34;}
}




/* Red Text */

 p.church-street-branding{
  text-align: center;
  top: 45.2%;
  left: -22.1%;
  opacity: .92;
  font-size: 1.3vw;
  text-transform: uppercase;
  color: #9e4939;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .35vw;
  position: absolute;
  z-index: 991;
  display: inline-block;
  backface-visibility: hidden;
  filter: blur(0);
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  -moz-osx-font-smoothing: subpixel-antialiased!important;
	      animation-delay: 4.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-church-street-branding;
      animation-duration: 3.3s;
          -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
@keyframes move-church-street-branding {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(106%); opacity:.92; }
}

@-webkit-keyframes move-church-street-branding {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(106%); opacity:.92; }
}

 p.church-street-branding:hover {
  color: #277566;
 }


 p.drip-branding{
  top: 35.32%;
  left: 21.8%;
  opacity: .9;
  font-size: 1.1vw;
  text-transform: uppercase;
  color: #9e4939;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .31vw;
  position: absolute;
  z-index: 992;
  backface-visibility: hidden;
  filter: blur(0);
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  -moz-osx-font-smoothing: subpixel-antialiased!important;
	      animation-delay: 4.8s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-drip-branding;
      animation-duration: 2.5s;
          -webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
 }
@keyframes move-drip-branding {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-106%); opacity:.89; }
}

 p.drip-branding:hover {
  color: #277566;
 }

 p.english-book{
  top: 40.4%;
  left: 71.8%;
  opacity: .88;
  font-size: 1.27vw;
  text-transform: uppercase;
  color: #9e4939;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .4vw;
  position: absolute;
  z-index: 993;
  backface-visibility: hidden;
  filter: blur(0);
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  -moz-osx-font-smoothing: subpixel-antialiased!important;
	      animation-delay: 4.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-english-book;
      animation-duration: 3.7s;
          -webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}
@keyframes move-english-book {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-149%); opacity:.87; }
}


 p.english-book:hover {
  color: #277566;
 }
 
 
 p.swiss-style-poster {
  top: 23.51%;
  left: 82.46%;
  opacity: .89;
  font-size: .96vw;
  text-transform: uppercase;
  color: #9e4939;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .32vw;
  position: absolute;
  z-index: 994;
  backface-visibility: hidden;
  filter: blur(0);
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  -moz-osx-font-smoothing: subpixel-antialiased!important;
	      animation-delay: 4.9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-swiss-style-poster;
      animation-duration: 3.2s;
          -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
@keyframes move-swiss-style-poster {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-83%); opacity:.89; }
}

 p.swiss-style-poster:hover {
  color: #277566;
 }
 

 p.bernie-sanders-poster {
  top: 48.3%;
  left: 32.49%;
  opacity: .76;
  font-size: .96vw;
  text-transform: uppercase;
  color: #b16d5b;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .31vw;
  position: absolute;
  z-index: 995;
  backface-visibility: hidden;
  filter: blur(0);
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  -moz-osx-font-smoothing: subpixel-antialiased!important;
	      animation-delay: 3.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-bernie-sanders-poster;
      animation-duration: 5.1s;
          -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
@keyframes move-bernie-sanders-poster {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(180%); opacity:.92; }
}

 p.bernie-sanders-poster:hover {
  color: #277566;
 }
 

 p.publication-designs {
  top: 50%;
  left: 55.3%;
  opacity: .87;
  font-size: 1vw;
  text-transform: uppercase;
  color: #9e4939;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .29vw;
  position: absolute;
  z-index: 995;
  backface-visibility: hidden;
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  font-smoothing: subpixel-antialiased!important;
	      animation-delay: 3.9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-publication-designs;
      animation-duration: 2s;
          -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
@keyframes move-publication-designs {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(-72%); opacity:.87; }
}

 p.publication-designs:hover {
  color: #277566;
 }


 p.sisters-of-anarchy-website {
  top: 60.3%;
  left: 53.59%;
  font-size: .86vw;
  text-transform: uppercase;
  color: #c28c7a;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .28vw;
  position: absolute;
  z-index: 996;
  backface-visibility: hidden;
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  font-smoothing: subpixel-antialiased!important;
	      animation-delay: 2.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-sisters-of-anarchy-website;
      animation-duration: 5.5s;
          -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
@keyframes move-sisters-of-anarchy-website {
  0% { transform: translateX (0%); opacity:0; }
  100% { transform: translateX(90%); opacity:.88; }
}

 p.sisters-of-anarchy-website:hover {
  color: #277566;
 }


 p.webster-ink-portfolio {
    z-index: 996;
  top: 59.2%;
  left: 22.35%;
  font-size: 1.13vw;
  text-transform: uppercase;
  color: #9e4939;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .33vw;
  position: absolute;
  white-space: nowrap;
writing-mode: vertical-rl;

  backface-visibility: hidden;
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  -moz-osx-font-smoothing: subpixel-antialiased!important;
	      animation-delay: 3.8s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-webster-ink-portfolio;
      animation-duration: 4.2s;
          -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
@keyframes move-webster-ink-portfolio {
  0% { transform: translateY (0%); opacity:0; }
  100% { transform: translateY(-20%); opacity:.91; }
}


 p.webster-ink-portfolio:hover {
  color: #277566;
 }


 p.effects-of-a-stroke {
  z-index: 996;
  bottom:30%;
  left: 44.5%;
  opacity: .86;
  font-size: 1.12vw;
  text-transform: uppercase;
  color: #9e4939;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .28vw;
  position: absolute;
writing-mode: vertical-rl;
  backface-visibility: hidden;
    white-space: nowrap;
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  font-smoothing: subpixel-antialiased!important;
	      animation-delay: 4s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-effects-of-a-stroke;
      animation-duration: 3.6s;
          -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
@keyframes move-effects-of-a-stroke {
  0% { transform: translateY (0%); opacity:0; }
  100% { transform: translateY(52%); opacity:.86; }
}

 p.effects-of-a-stroke:hover {
  color: #277566;
 }


 p.new-leaf-website {
  top: 65%;
  left: 67.2%;
  opacity: .58;
  font-size: .88vw;
  text-transform: uppercase;
  color: #9e4939;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .36vw;
  position: absolute; 
writing-mode: vertical-rl;
  backface-visibility: hidden;
    white-space: nowrap;
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  font-smoothing: subpixel-antialiased!important;
	      animation-delay: 5.6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-new-leaf-website;
      animation-duration: 2.7s;
          -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
@keyframes move-new-leaf-website {
  0% { transform: translateY (0%); opacity:0; }
  100% { transform: translateY(-46%); opacity:.58; }
}

 p.new-leaf-website:hover {
  color: #277566;
 }
 

 p.i-am-in-here-poster {
  top: 6%;
  left: 18.3%;
  opacity: .40;
  font-size: .76vw;
  text-transform: uppercase;
  color: #d0a697;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .25vw;
  position: absolute;
writing-mode: vertical-rl;
  backface-visibility: hidden;
    white-space: nowrap;
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  font-smoothing: subpixel-antialiased!important;
	      animation-delay: 5.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-i-am-in-here-poster;
      animation-duration: 3.4s;
          -webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
}
@keyframes move-i-am-in-here-poster {
  0% { transform: translateY (0%); opacity:0; }
  100% { transform: translateY(10%); opacity:.95; }
}

 p.i-am-in-here-poster:hover {
  color: #277566;
 }
 

 p.sketches {
  top: 17.2%;
  left: 25.6%;
  opacity: .55;
  font-size: .93vw;
  text-transform: uppercase;
  color: #c18a78;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .3vw;
  position: absolute;
writing-mode: vertical-rl;
  backface-visibility: hidden;
    white-space: nowrap;
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  font-smoothing: subpixel-antialiased!important;
	      animation-delay: 5.9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-sketches;
      animation-duration: 1.9s;
          -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

@keyframes move-sketches {
  0% { transform: translateY (0%); opacity:0; }
  100% { transform: translateY(40%); opacity:.95; }
}

 p.sketches:hover {
  color: #277566;
 }
 

 p.yipes-portfolio {
  top: 22.7%;
  left: 39.5%;
  opacity: .82;
  font-size: 1.168vw;
  text-transform: uppercase;
  color: #9e4939;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .29vw;
  position: absolute;
writing-mode: vertical-rl;
  backface-visibility: hidden;
    white-space: nowrap;
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  font-smoothing: subpixel-antialiased!important;
	      animation-delay: 3.9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yipes-portfolio;
      animation-duration: 4.5s;
          -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

@keyframes move-yipes-portfolio {
  0% { transform: translateY (0%); opacity:0; }
  100% { transform: translateY(-49%); opacity:.82; }
}

 p.yipes-portfolio:hover {
  color: #277566;
 }
 

 p.baskerville-poster {
  top: 13.4%;
  left: 48.8%;
  opacity: .75;
  font-size: .9vw;
  text-transform: uppercase;
  color: #9e4939;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .31vw;
  position: absolute;
writing-mode: vertical-rl;
  backface-visibility: hidden;
    white-space: nowrap;
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  font-smoothing: subpixel-antialiased!important;
	      animation-delay: 5.7s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-baskerville-poster;
      animation-duration: 2.7s;
          -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

@keyframes move-baskerville-poster {
  0% { transform: translateY (0%); opacity:0; }
  100% { transform: translateY(-9%); opacity:.76; }
}

p.baskerville-poster:hover {
  color: #277566;
 }
 
 
 p.lions-sheer-beauty {
  top: 12.7%;
  left: 66.7%;
  opacity: .77;
  font-size: .95vw;
  text-transform: uppercase;
  color: #b3705e;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .34vw;
  position: absolute;
writing-mode: vertical-rl;
  backface-visibility: hidden;
    white-space: nowrap;
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  font-smoothing: subpixel-antialiased!important;
	      animation-delay: 5.9s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-lions-sheer-beauty;
      animation-duration: 2.9s;
          -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

@keyframes move-lions-sheer-beauty {
  0% { transform: translateY (0%); opacity:0; }
  100% { transform: translateY(-13%); opacity:.91; }
}


p.lions-sheer-beauty:hover {
  color: #277566;
 }
 
 
 p.mike-brown-design {
  bottom: 2%;
  right: 2%;
  font-size: 6.75vw;
  letter-spacing: -0.22vw;
  color: #89463d;
  font-family: Helvetica Neue bold,Helvetica,Arial,sans-serif;
  font-weight: bolder;
  position: absolute;
  opacity: 0.04;
	      animation-delay: .5s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: move-yellow-rect5;
      animation-duration: 9.5s;
                -webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}
@keyframes move-yellow-rect5 {
          0% {opacity:0;}
          20% {opacity: .04;}
	  60% {opacity: .04;}
	  80% {opacity: .04; transform: scale(1);}
	  90% {opacity: .1; transform: scale(1.025);}
	  100% {opacity: .04; transform: scale(1);}
}

 p.mike-brown-design:hover {
  color: #35110b;
 }

.content {
background-color: #fff8f1;
}

.start-page .content .text{
  position:absolute;
  text-align:center;
  margin:auto;
  top:0; 
  left:0; 
  bottom:0; 
  right:0;
  width:100%;
  height:100%;
  
  /*
            opacity:0;
        -webkit-animation:fadeIn ease-in 1;
        -moz-animation:fadeIn ease-in 1;
        -o-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
        -o-animation-fill-mode:forwards;
        animation-fill-mode:forwards;

	        -webkit-animation-duration:2s;
        -moz-animation-duration:2s;
        -o-animation-duration:2s;
        animation-duration:2s;
	
	        -webkit-animation-delay:1s;
        -moz-animation-delay:1s;
        -o-animation-delay:1s;
        animation-delay:1s;
        */
}
/*
.start-page .content .text .logo{
  width:123px;
  height:123px;
  margin:0 auto 50px;
  
            opacity:0;
        -webkit-animation:fadeIn ease-in 1;
        -moz-animation:fadeIn ease-in 1;
        -o-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
        -o-animation-fill-mode:forwards;
        animation-fill-mode:forwards;

	        -webkit-animation-duration:3s;
        -moz-animation-duration:3s;
        -o-animation-duration:3s;
        animation-duration:3s;
	
	        -webkit-animation-delay:1s;
        -moz-animation-delay:1s;
        -o-animation-delay:1s;
        animation-delay:1s;
  
}
*/

.arrow-box  a{
z-index: 10;
    position: absolute;
  bottom: 6px;
  left: 49.45%;
  width: 24px;
  height: 28px;
}

.start-page .content .arrow-down{
  position: absolute;
  bottom: 110px;
  left: 50%;
  margin-left: -10px;
  width: 21px;
  height: 29px;
  background: url(../img/arrow-down3.png) no-repeat center center;
  display: block;
  -webkit-animation: bounce-fade 1.5s ease-in-out infinite; /* Safari 4+ */
  -moz-animation:    bounce-fade 1.5s ease-in-out infinite; /* Fx 5+ */
  -o-animation:      bounce-fade 1.5s ease-in-out infinite; /* Opera 12+ */
   animation:        bounce-fade 1.5s ease-in-out infinite; /* IE 10+ */
}


@-webkit-keyframes bounce-fade {
    0%   { opacity: 0; bottom: 16px; }
    100% { opacity: 1; bottom: 6px; }
}
@-moz-keyframes bounce-fade {
    0%   { opacity: 0; bottom: 20px; }
    100% { opacity: 1; bottom: 6px; }
}
@-o-keyframes bounce-fade {
    0%   { opacity: 0; bottom: 20px; }
    100% { opacity: 1; bottom: 6px; }
}
@keyframes bounce-fade {
    0%   { opacity: .3; bottom: 10px; }
    50% { opacity: .6  ; bottom: 4px; }
    100% { opacity: .3; bottom: 10px; }
}


/* Menu mobile */

.menu-media{
  position:relative;
  width:100%;
  height:90px;
  background:#7e132b;
  z-index:1000;
  display:none;
}

.menu-media .menu-content{
  width:280px;
  position:relative;
  margin:0 auto;
}

.menu-media .menu-content .logo {
   color:white;
   font-size:24px;
   width:200px;
   line-height:90px;
   float:left;
   list-style: none;
}

.menu-media .menu-content .icon{
  width:41px;
  height:23px;
  float:right;
  line-height:100px;
}

.menu-click{
  display:none;
}


.menu-click li {
  position:relative;
  width:100%;
  height:70px;
  color:#333333;
  font-size:18px;
  text-align:center;
  line-height:70px;
  z-index:1000;
  border-bottom:1px solid #f2f2f2;
  -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
 }

.menu-click li:hover {
  color:#7e132b;
 }


/* Menu */

.menu{
  position:fixed;
  width:100%;
  height:60px;
  width: 100%;
  margin-top:-150px;
  background: #ffffff;
  border-bottom:1px solid #f2f2f2;
  z-index:1000;
}

.menu-content{
  width:1245px;
  position:relative;
  margin:0 auto;
}

.menu-content .logo {
   color:#333;
   font-size:10px;
   width:300px;
   line-height:0px;
   float:left;
   list-style: none;
 }

.menu-content ul{

  width:347px;
  list-style:none;
  margin:0 auto;
}

.menu-content li{
   display:inline-block;
   position:relative;
}

.menu-content li a{
text-align: center;
  top: 41.4%;
  left: -22.1%;
  opacity: .92;
  font-size: 1.3vw;
  text-transform: uppercase;
  color: #9e4939;
  font-family: 'proxima-nova-bold', sans-serif;
  letter-spacing: .35vw;
  position: absolute;
  z-index: 991;
  display: inline-block;
  backface-visibility: hidden;
  -webkit-filter: blur(0);
  -webkit-font-smoothing: subpixel-antialiased!important;
  font-smoothing: subpixel-antialiased!important;
  -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.menu-content li.active a{
  color:#7e132b;
}

.menu-content li a:hover{
  color:#7e132b;
}


/* About us */

.about-us h1{
  font-size:42px;
    margin-left:auto;
  margin-right:auto;
    width: 75%;
  max-width: 590px;
  color:black;
  text-align:center;
  padding-top:9%;
  letter-spacing:-.03em;
  line-height:1.2em;
  margin-bottom:-.6em;
  font-family:  'proxima-nova-bold', sans-serif;
    -webkit-font-smoothing: subpixel-antialiased!important;
}

.about-us h2{
    margin-left:auto;
  margin-right:auto;
  text-align:center;
  padding-top:11vh;
  width: 75%;
  max-width: 590px;
    font-size:38px;
  color:black;
  text-align:center;
  letter-spacing: -.03em;
  line-height:1.2em;
      margin-bottom:-.6em;
  font-family: 'proxima-nova-bold', sans-serif;
    -webkit-font-smoothing: subpixel-antialiased!important;
}

.about-us p{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
    padding-top: 40px;
  margin-bottom:7vh;
  font-size:16px;
  width: 75%;
  max-width: 480px;
  color: rgba(33,33,33,.87);
  letter-spacing: .04em;
  line-height:1.8em;
  text-wrap: balanced;
  font-family: 'proxima-nova-semibold', sans-serif;
    -webkit-font-smoothing: subpixel-antialiased!important;
    
}

.about-us{
  position:relative;
  width:100%;
  background:#fffbf7;
  z-index:10;
}

.about-us .content{
  position:relative;
  width:100%;
  margin: 0 auto;
}


.animated-underline {
        width: 100px;
      height: 3px;
      background: #fffbf7;
      margin-left: auto;
      opacity:.8;
      margin-right: auto;
      margin-top:38px;
      margin-bottom: -1.35em;
}


.about-me {
  background-color: #fff8f1;
  min-height: 400px;
}

.about-me .animated-underline{
  background-color: rgba(33,33,33,.95);
}

.about-me h1{
  color:rgba(33,33,33,.87);
}

.about-me p{
  color: rgba(33,33,33,.87);
}



.graphic-design {
  background-color: #115c63;
  height:82vh;
  min-height: 560px;
  }
  /* background: linear-gradient(309deg, #115c63, #0e5151, #1b6d6d, #217573);
  background-size: 800% 800%;
  overflow:hidden;
  animation: GradientAnimation 47s ease infinite; 
  width: 100%;
  overflow: none;
  position: relative;
}
@keyframes GradientAnimation {
  0% {
    background-position: 0% 46%;
  }
  50% {
    background-position: 100% 55%;
  }
  100% {
    background-position: 0% 46%;
  }
}
*/

.graphic-design h2{
  color: #fffbf7;
}

.graphic-design p{
  color: #fffbf7;
}

.web-bg{
  height:82vh;
  margin-top:-35vh;
  min-height: 560px;
  background-color: #ffd24a;
}
.web-design {
  height:35vh;
  margin: 0 auto;
  background-color: #ffd24a;
}

.web-design .animated-underline{
  background-color: rgba(33,33,33,.95);
}

.web-design h2{
  color: rgba(33,33,33,.95);
}

.web-design p{
 color: rgba(33,33,33,.9);
}


.ui-design {
  margin-top: -35vh;
  height:82vh;
  min-height: 560px; 
  background-color: #80a058;
}

.ui-design h2{
  color: #fffbf7;
}

.ui-design p{
 color: #fffbf7;
}


.portfolio .animated-underline{
  background-color: rgba(33,33,33,.95);
}

.about-us hr{
  color: black;
  margin-top:30px;
  height: 2px;
  width:106px;

}

.about-us .column-one{
  margin-top:40px;
  width:300px;
  float:left;
  margin-bottom:70px;
  height:350px;
}

.about-us .column-one .circle-one{
  height: 100px;
  position:relative;
  margin:0 auto;
  border:2px solid #f0f0f0;
  background-color: #fffbf7;
  background: url(../img/icons/graphic-s-r.png) #fffbf7 no-repeat center center;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius: 100px;
  width: 100px;
  cursor:pointer;
    -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.about-us .column-one .circle-one:hover{
  border:2px solid #7e132b;

}

.about-us .column-two{
  margin-top:40px;
  width:300px;
  float:left;
  margin-bottom:70px;
  height:350px;
}

.about-us .column-two .circle-two{
  height: 100px;
  position:relative;
  margin:0 auto;
  border:2px solid #f0f0f0;
  background: url(../img/icons/web-s-r.png) #fffbf7 no-repeat center center;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius: 100px;
  width: 100px;
    cursor:pointer;
    -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.about-us .column-two .circle-two:hover{
  border:2px solid #7e132b;
}


.about-us .column-three{ 
  margin-top:40px;
  width:300px;
  float:left;
  margin-bottom:70px;
  height:350px;
}

.about-us .column-three .circle-three{ 
  height: 100px;
  position:relative;
  margin:0 auto;
  border:2px solid #f0f0f0;
  background: url(../img/icons/ux.png) #fffbf7 no-repeat center center;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius: 100px;
  width: 100px;
  cursor:pointer;
  -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.about-us .column-three .circle-three:hover{ 
  border:2px solid #7e132b;
}



/* Portfolio */


#works {
  margin-top:70px;
  padding-bottom: 100px;
}

.portfolio{
  margin-top:-35vh;
  position:relative;
  width:100%;
  background:#fffbf7;
  z-index:10;

}

.portfolio .portfolio-margin{
  position:relative;
  max-width:1560px;
  overflow:hidden;
  background:#fffbf7;
  padding-left:2vw;
  padding-right:2vw;
  margin:0 auto;
}

.portfolio .portfolio-margin h1{
  font-size:44px;
    margin-left:auto;
  margin-right:auto;
    width: 75%;
  max-width: 590px;
  color:rgba(20,20,20,0.9);
  text-align:center;
  margin-top:11vh;
letter-spacing: -.01em;
  margin-bottom: -30px;
  font-family:  'proxima-nova-bold', sans-serif;
    -webkit-font-smoothing: subpixel-antialiased!important;
}




/* Portfolio grid */

.grid{
  margin-top:80px;
  width:100%;
  position:relative;
  margin-bottom:70px;
  overflow:hidden;
}

.grid li{
  width:406px;
  margin:0 8px 8px 0;
  float: left;
  position: relative;
  overflow: hidden;
}

.grid img{
  width:406px;
  float: left;
  position: relative;
}

.grid .text {
  position: absolute;
  width: 100%;
  height:100%;
  background: rgba(20,20,20,0);
  z-index: 2;
  opacity:0;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.grid .text p{
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.grid .text:hover {
  background: rgba(20,20,20,0.4);
  opacity:1;
 }
 
 .grid .text:hover p {
	      animation-delay: 20ms;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-duration: 600ms;
      animation-name: move-port-down;
        mouseout-transition: all .2s ease-in-out;
          -webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
 }

@keyframes move-port-down {
  0% { transform: translateY (0%); opacity:0; }
  100% { transform: translateY(60%); opacity:1; }
}

@-webkit-keyframes move-port-down {
  0% { transform: translateY (0%); opacity:0; }
  100% { transform: translateY(60%); opacity:1; }
}


.grid p {
  font-size:30px;
  text-align:center;
        animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
  letter-spacing: -.025em;
  font-family: 'proxima-nova-bold', sans-serif;
    -webkit-font-smoothing: subpixel-antialiased!important;
  position: relative;
  opacity: 0;
    top: 44%;
    left: 0;
    right: 0;
    margin-top: -17px;
  color: #FFF;
            -webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

p.description {
    text-transform: uppercase;
    font-size:12px;
    letter-spacing:.08em;
      top: 50%;
      margin-top:28px;
  font-family: 'proxima-nova-bold', sans-serif;
  color: #fffbf7;
}

.grid .animated-underline {
        width: 100px;
      height: 3px;
      background: #fffbf7;
      margin-left: auto;
      margin-right: auto;
      top: 50%;
      margin-top: 8px;
      position: relative;
}


.clear { 
    clear:both; 
}

/* Partners */

.partners{
  position:relative;
  width:100%;
  z-index:10;
  height:200px;
  background:url('../img/background/start-page4.jpg') 0px 0px fixed;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.partners .opacity{
  position:absolute;
  width:100%;
  height:200px;
  background:rgba(255,255,255,0.3);
}

.partners .content{
  position:absolute;
  width:900px;
  height:190px;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color: transparent;
}

.partners h2{
  font-size:44px;
margin: 0 auto;
margin-top: 80px;
    width: 75%;
  max-width: 590px;
  color: #fffbf7;
  text-align:center;
letter-spacing: -.01em;
  font-family:  'proxima-nova-bold', sans-serif;
    -webkit-font-smoothing: subpixel-antialiased!important;
}

.partners .logo{
  position:relative;
  width:900px;
  overflow:hidden;
  margin-top:50px;
  text-align:center;
}

.partners .logo img{
  opacity:0.5;
  -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.partners .logo img:hover{
  opacity:1;
}

/*art-title */

.art-title{
  position:relative;
  width:100%;
  z-index:10;
  height:200px;
  background:url('../img/background/start-page4.jpg') 0px 0px fixed;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.art-title .opacity{
  position:absolute;
  width:100%;
  height:200px;
  background:rgba(255,255,255,0.3);
}

.art-title .content{
  position:absolute;
  width:900px;
  height:190px;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

.art-title h2{
  padding-top: 60px;
  text-transform: uppercase;
  color:white;
  letter-spacing:1px;
  font-size:40px;
  text-align:center;
}

.art-title .logo{
  position:relative;
  width:900px;
  overflow:hidden;
  margin-top:50px;
  text-align:center;
}

.art-title .logo img{
  opacity:0.5;
  -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.art-title .logo img:hover{
  opacity:1;
}

/* Contact */

.contact{
  position:relative;
  width:100%;
  background: #fffbf7;
  z-index:10;
  overflow:hidden;
  padding-bottom: 90px;  
}


.contact .content{
  position:relative;
  width:900px;
  background: #fffbf7;
  overflow:hidden;
  margin: 0px auto 0px auto;
}

.contact h1{
  font-size:44px;
    margin-left:auto;
  margin-right:auto;
    width: 75%;
  max-width: 590px;
  color:rgba(20,20,20,0.9);
  text-align:center;
  margin-top:11vh;
letter-spacing: -.01em;
  margin-bottom: 80px;
  font-family:  'proxima-nova-bold', sans-serif;
    -webkit-font-smoothing: subpixel-antialiased!important;
}

.contact hr{
  color: black;
  margin-top:30px;
  background-color: #7e132b;
  height: 1px;
  width:106px;
  border:0;
}

.contact .content .form{
  width:455px;
  overflow:hidden;
  height:auto;
  float:left;
}

.contact .content .form .column{
  width:180px;
  overflow:hidden;
  height:auto;
  float:left;
  letter-spacing:1px;
  margin-bottom:30px;
}

.contact .content .form .column-2{
  width:210px;
  padding-left:60px;
  overflow:hidden;
  height:auto;
  float:left;
  letter-spacing:1px;
  margin-bottom:30px;  
}

.contact .content .form .column-3{
  width:450px;
  overflow:hidden;
  height:auto;
  float:left;
  letter-spacing:1px;
}

.contact .content .contact-text{
  width:405px;
  overflow:hidden;
  height:auto;
  float:left;
  padding-left:40px;
  color:black;
  font-size:14px;
  line-height:26px;
}



input{

  width:180px;
  height:40px;
  background:#f8f7f7;
  border-top:1px solid #f8f7f7;
  border-bottom:0;
  border-left:0;
  border-right:0;
  color:#333;
  line-height:40px;
  padding-left:15px;
  font-family: 'proxima nova', sans-serif;
  font-size:14px;
  margin-bottom:10px;
}

input:focus{background:#f4f4f4;}

textarea{

  width:420px;
  height:150px;
  border-top:1px solid #f8f7f7;
  border-bottom:0;
  line-height:20px;
  border-left:0;
  border-right:0;
  background:#f8f7f7;
  color:#333;
  padding:15px 0 0 15px;
  font-family: 'proxima nova', sans-serif;
  font-size:14px;
  margin-bottom:10px;
}

textarea:focus{background:#f4f4f4;}


input.submit{
  width:100px;
  height:34px;
  float:right;
  margin:20px 10px 0 0;
  border:0;
  text-align:right;
  background:none;
  -webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
}

/* Footer */



/* Footer */

#footer-container {
  position: absolute;
  width:100%;
  height: 82px;
  background-color: #666160;
-webkit-box-shadow: inset 0px 20px 11px -5px rgba(79,72,67,0.27);
-moz-box-shadow: inset 0px 20px 11px -5px rgba(79,72,67,0.27);
box-shadow: inset 0px 20px 11px -5px rgba(79,72,67,0.27);
}

.footer-inset {
  margin-top: 25px;
  width:80%;
  max-width:1100px;
  margin-left:auto;
  margin-right: auto;
}

.footer-inset h3{
      text-align: center;
    font-family: 'proxima-nova-bold', sans-serif;
    font-size: 15px;
    color: #fffbf7;
    letter-spacing: .02em;
    margin-bottom: 5px;
}

.footer-inset p {
        text-align: center;
    margin-top: 0px;
    font-family: 'proxima nova', sans-serif;
    font-size: 13px;
    color: #fffbf7;
    letter-spacing: .02em;
        -webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.footer-inset p:hover {
  color: #c9c1bc;
}

.footer-email {
  float: left;
  margin-left:4%;
}

.footer-resume {
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  display: block;
  
}

.footer-backtotop{
  margin-top:8px;
    float: right;
  margin-right:8%;
    display: block;
}

.footer-backtotop h3{
          -webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.footer-backtotop h3:hover {
  color: #c9c1bc;
}