@font-face {
    font-family:'Lemur-Regular';
    src: url('../fonts/Lemur-Regular.eot');
    src: url('../fonts/Lemur-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Lemur-Regular.woff2') format('woff2'),
         url('../fonts/Lemur-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*  
Colours 
Mint = #C6EDBE
*/

body,td,th {
    font-family: 'Lemur-Regular', arial, sans-serif;
    font-size:18px;
	line-height:1.2;
    margin:0;
    padding:0;
    background:#AD8521;
	color:#ffffff;
	text-align:left;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    letter-spacing: 1px;
	animation: change-background 10s ease infinite;
}



.ease {
-webkit-transition: 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-moz-transition: 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-o-transition: 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

#fs img {
-webkit-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-moz-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-o-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
    

b, strong {font-family: 'Lemur-Regular', sans-serif;font-weight: bold;}
h1 {font-family:'Lemur-Regular', sans-serif;font-size:112px;line-height: 0.8;padding:0;margin:0 0 1em;font-weight: normal;text-transform: uppercase;}
h2 {font-family:'Lemur-Regular', sans-serif;font-size:18px;line-height: 1;padding:0;margin:0;font-weight: normal;text-transform: uppercase;letter-spacing: 1px;}
h2 span {margin-right:1em;}


a {color:inherit;text-decoration:none;border-bottom:1px solid transparent;opacity: 1;}
a:hover {color:#C6EDBE;text-decoration:none;border-bottom:1px solid #C6EDBE;opacity: 1;}

a {
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
transition: color 0.2s linear;
}

.clear:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}   

.t {display: table;height: 100%;width: 90%;margin: 0 auto;padding:0 auto;text-align: center;}
.tc {vertical-align: middle;display: table-cell;}
    
p {margin: 0 0 1.5em;}

#logo {
	position:fixed;
 	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	z-index: 1;
 }

#logo svg {
	width: auto;
    max-width: 50%;
    max-height: 50%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0px!important;
    padding: 0px!important;
    z-index: 10;
}

#wordmark {
	position:fixed;
 	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	z-index: 10;
 }

#wordmark img {
	width: auto;
    max-width: 75%;
    max-height: 75%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0px!important;
    padding: 0px!important;
    z-index: 10;
}



#meta {
	position:fixed;
 	top:1.5vw;
	right: 1.5vw;
	left:1.5vw;
	text-align: center;
	z-index: 10;
 }

#signup {
	position:fixed;
	bottom:1.5vw;
	right: 1.5vw;
	left:1.5vw;
	text-align: center;
	z-index: 10;
}

#meta .link {position: fixed;bottom:1.5vw;left:50vw;}
#meta .link:before {content:"↳ ";}


/* Keyframes */
@keyframes change-background {
	0% {
		background: #AD8521;
	}
	25% {
		background: #505B3D;
	}
	75% {
		background: #999787;
	}
	100% {
		background: #AD8521;
	}
  }

  /* Keyframes */
@keyframes change-color {
	0% {
		color: #AD8521;
	}
	25% {
		color: #505B3D;
	}
	75% {
		color: #999787;
	}
	100% {
		color: #AD8521;
	}
  }



/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:0.4s;
	-moz-animation-duration:0.4s;
	animation-duration:0.4s;

	-webkit-animation-delay:0;
	-moz-animation-delay:0;
	-o-animation-delay:0;
	animation-delay:0;

}


@media screen and (max-width: 1023px) {

    
}

@media screen and (max-width: 767px) {
	#wordmark img {max-width: 90%;max-height: 90%;}
	#meta {top:5vw;right: 5vw;left:5vw;}
	#signup {bottom:5vw;right: 5vw;left:5vw;}
	
}