/* Default media */
html, body { scroll-behavior: smooth; }

body
{
	font-family: 'Roboto', sans-serif;
	font-size: 11px;
	color: #666;
	text-align: left;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
}

a, a:link, a:visited, a:active
{
	color: #666;
	text-decoration: none;
	font-weight: 500;
} 

a:hover { color: #74AE18; text-decoration: none; }

img { border: none; }

#introcanvas
{
	font-size: 30px;
	font-weight: 300;
	line-height: 34px;
	color: #999999;
	width: 950px;
	height: 620px;
	margin: 0 auto;
	padding: 0;
	display: block;
	background-color: #FFFFFF;
	position: relative;
}

#introfooter
{
	font-size: 11px;
	color: #CCCCCC;
	width: 950px;
	margin: 0 auto;
	padding: 0;
	display: block;
	text-align: right;
	animation: fadeout 6s forwards;
	-webkit-animation: fadeout 6s forwards;
	animation-delay: 30s;
}

#introfooter a, #introfooter a:link, #introfooter a:visited, #introfooter a:active
{
	color: #ccc;
	text-decoration: none;
	font-weight: normal;
}  

#introfooter a:hover
{
	color: #74AE18;
	text-decoration: none;
}

.introsteps
{
	width: 150px;
	height: 150px;
	margin: 0 auto;
	padding: 210px 0;
	animation: fadeout 2s forwards;
	-webkit-animation: fadeout 2s forwards;
	animation-delay: 8s;
}

.introsteps img
{
	width: 150px;
	height: 150px;
}

@keyframes fadeout
{
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@-webkit-keyframes fadeout
{
	0% {opacity: 1;}
	100% {opacity: 0;}
}

.introtext1
{
	font-size: 34px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	animation: fadetxt 6s;
	-webkit-animation: fadetxt 6s;
	animation-delay: 10s;
	white-space: nowrap;
	opacity: 0;
}

.introtext2
{
	font-size: 34px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	animation: fadetxt 6s;
	-webkit-animation: fadetxt 6s;
	animation-delay: 16s;
	white-space: nowrap;
	opacity: 0;
}

.introtext3
{
	margin: 0;
	padding: 0;
	position: absolute;
	top: 15%;
	left: 5%;
	animation: fadetxt3 18s forwards;
	-webkit-animation: fadetxt3 18s forwards;
	animation-delay: 22s;
	white-space: nowrap;
	opacity: 0;
}

.introtext4
{
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	animation: fadetxt4 18s forwards;
	-webkit-animation: fadetxt4 18s forwards;
	animation-delay: 22s;
	white-space: nowrap;
	opacity: 0;
}

.linkglow4 { display: inline-block; animation: glow4 18s infinite; -webkit-animation: glow4 18s infinite; animation-delay: 22s; }

.introtext5
{
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 23%;
	right: 5%;
	animation: fadetxt5 18s forwards;
	-webkit-animation: fadetxt5 18s forwards;
	animation-delay: 22s;
	white-space: nowrap;
	text-align: right;
	opacity: 0;
}

.linkglow5 { display: inline-block; animation: glow5 18s infinite; -webkit-animation: glow5 18s infinite; animation-delay: 22s; }

.introtext6
{
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 10%;
	left: 5%;
	animation: fadetxt6 18s forwards;
	-webkit-animation: fadetxt6 18s forwards;
	animation-delay: 22s;
	white-space: nowrap;
	opacity: 0;
}

.linkglow6 { display: inline-block; animation: glow6 18s infinite; -webkit-animation: glow6 18s infinite; animation-delay: 22s; }

@keyframes fadetxt {
	0%		{opacity: 0;}
	20%		{opacity: 1;}
	80%		{opacity: 1;}
	90%		{opacity: 0;}
	100%	{opacity: 0;}
}

@-webkit-keyframes fadetxt {
	0%		{opacity: 0;}
	20%		{opacity: 1;}
	80%		{opacity: 1;}
	90%		{opacity: 0;}
	100%	{opacity: 0;}
}

@keyframes fadetxt3 {
	0%		{opacity: 0;}
	8%		{opacity: 1;}
	15%		{opacity: 1;}
	20%		{opacity: .3;}
	56%		{opacity: .3;}
	58%		{opacity: 1;}
	100%	{opacity: 1;}
}

@-webkit-keyframes fadetxt3 {
	0%		{opacity: 0;}
	8%		{opacity: 1;}
	15%		{opacity: 1;}
	20%		{opacity: .3;}
	56%		{opacity: .3;}
	58%		{opacity: 1;}
	100%	{opacity: 1;}
}

@keyframes fadetxt4 {
	15%		{opacity: 0;}
	20%		{opacity: 1;}
	27%		{opacity: 1;}
	32%		{opacity: .3;}
	56%		{opacity: .3;}
	58%		{opacity: 1;}
	100%	{opacity: 1;}
}

@-webkit-keyframes fadetxt4 {
	15%		{opacity: 0;}
	20%		{opacity: 1;}
	27%		{opacity: 1;}
	32%		{opacity: .3;}
	56%		{opacity: .3;}
	58%		{opacity: 1;}
	100%	{opacity: 1;}
}

@keyframes glow4 {
	15% {color: #666;}
	20% {color: #74AE18;}
	31% {color: #666;}
}

@-webkit-keyframes glow4 {
	15% {color: #666;}
	20% {color: #74AE18;}
	31% {color: #666;}
}

@keyframes fadetxt5 {
	27%		{opacity: 0;}
	32%		{opacity: 1;}
	39%		{opacity: 1;}
	44%		{opacity: .3;}
	56%		{opacity: .3;}
	58%		{opacity: 1;}
	100%	{opacity: 1;}
}

@-webkit-keyframes fadetxt5 {
	27%		{opacity: 0;}
	32%		{opacity: 1;}
	39%		{opacity: 1;}
	44%		{opacity: .3;}
	56%		{opacity: .3;}
	58%		{opacity: 1;}
	100%	{opacity: 1;}
}

@keyframes glow5 {
	27% {color: #666;}
	32% {color: #74AE18;}
	43% {color: #666;}
}

@-webkit-keyframes glow5 {
	27% {color: #666;}
	32% {color: #74AE18;}
	43% {color: #666;}
}

@keyframes fadetxt6 {
	39%		{opacity: 0;}
	44%		{opacity: 1;}
	100%	{opacity: 1;}
}

@-webkit-keyframes fadetxt6 {
	39%		{opacity: 0;}
	44%		{opacity: 1;}
	100%	{opacity: 1;}
}

@keyframes glow6 {
	39% {color: #666;}
	44% {color: #74AE18;}
	55% {color: #666;}
}

@-webkit-keyframes glow6 {
	39% {color: #666;}
	44% {color: #74AE18;}
	55% {color: #666;}
}


.hometext3
{
	margin: 0;
	padding: 0;
	position: absolute;
	top: 15%;
	left: 5%;
	animation: fadein 3s forwards;
	-webkit-animation: fadein 3s forwards;
}

.hometext4
{
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	animation: fadein 3s forwards;
	-webkit-animation: fadein 3s forwards;
	white-space: nowrap;
}

.hometext5
{
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 23%;
	right: 5%;
	animation: fadein 3s forwards;
	-webkit-animation: fadein 3s forwards;
	white-space: nowrap;
	text-align: right;
}

.hometext6
{
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 10%;
	left: 5%;
	animation: fadein 3s forwards;
	-webkit-animation: fadein 3s forwards;
	white-space: nowrap;
}

@keyframes fadein {
	0% {opacity: 0;}
	20% {opacity: 1;}
	100% {opacity: 1;}
}

@-webkit-@keyframes fadein {
	0%		{opacity: 0;}
	20%		{opacity: 1;}
	100%	{opacity: 1;}
}

.linkglow2 { display: inline-block; animation: glow2 6s infinite; -webkit-animation: glow2 6s infinite; }

@keyframes glow2 {
	0% {color: #666;}
	20% {color: #74AE18;}
	30% {color: #74AE18;}
	60% {color: #666;}
}

@-webkit-keyframes glow2 {
	0% {color: #666;}
	20% {color: #74AE18;}
	30% {color: #74AE18;}
	60% {color: #666;}
}



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

#introcanvas
{
	width: 100%;
	font-size: 22px;
	line-height: 28px;
}

#introfooter { width: 90%; }

.introtext1, .introtext2
{
	font-size: 24px;
	left: 5%;
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	white-space: normal;
}


}