@charset "utf-8";
/* CSS Document */

body{margin:0px; padding:0px; background-color:#DDD;
animation-iteration-count:2; 
-webkit-animation: bgAnim 5s 1 ease;
-moz-animation: bgAnim 5s 1 ease;
-o-animation: bgAnim 5s 1 ease;
animation-iteration-count:1}

@-webkit-keyframes bgAnim {
from { background:#0451a5; }
to { background:#DDD; }
}
@-moz-keyframes bgAnim {
from { background:#180e5e; }
to { background:#DDD; }
}
@-o-keyframes bgAnim {
from { background:#180e5e; }
to { background:#DDD; }
}




.mainContainer{width:100%; margin:0px auto;}
.contentContainer{width:960px; border:0px solid #FFF; margin:0px auto; margin-top: -232px;}

.guide{width:960px; height:200px; background-color:#F00; margin:0px auto; opacity:0.2;}

/* Declare Fonts */
@font-face{ font-family: "din"; src: url(fonts/DINMd.ttf); format("truetype");}
@font-face{ font-family: "dinB"; src: url(fonts/DINBd.ttf); format("truetype");}

/* Content */
.blueBar{width:100%; height:318px; overflow:hidden; background-color:#0071c1; margin:0px 0px 0px 0px;background:url(img/topBar.png) center top no-repeat;}
.logo{width:339px; height:345px;background:url(img/logo.png) center left no-repeat; margin:0px 0px 0px 667px;}

/* Content: Speech Bubble */
.speechBubble{background: url(img/speechBubble.png) top center no-repeat; width: 663px; height:257px; margin:-282px 0px 0px 0px; animation-iteration-count:1;-webkit-animation: speechBubble 3s 1 ease-out;-moz-animation: speechBubble 3s 1 ease-out;-o-animation: speechBubble 3s 1 ease-out;}

@-webkit-keyframes speechBubble {
from { margin:-882px 0px 0px 0px; }
to { margin:-282px 0px 0px 0px; }
}
@-moz-keyframes speechBubble {
from { margin:-882px 0px 0px 0px; }
to { margin:-282px 0px 0px 0px; }
}
@-o-keyframes speechBubble {
from { margin:-882px 0px 0px 0px; }
to { margin:-282px 0px 0px 0px; }
}

.speechBubbleText{ font-family: "Din", Helvetica, Arial, sans-serif; font-size:32px; color:#525252; width:541px; text-align:justify; margin:146px 0px 0px 35px; position:absolute;}
.leadText{ font-family: "Din", Helvetica, Arial, sans-serif; font-size:15px; color:#3f3f3f; width:900px; text-align:justify; margin:29px 0px 0px 37px; line-height:24px; position:absolute; }

.a_button {background-color:#3BB3E0; font-family: "DinB", Helvetica, Arial, sans-serif;font-size:16px;text-decoration:none;color:#FFFFFF !important;text-shadow: 0px 2px 0px #006cb8;position:relative; padding:10px 20px;margin:-12px 0px 0px 10px;position:absolute;text-transform:uppercase;background-image: linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -o-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -moz-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -webkit-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -ms-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #2CA0CA), color-stop(1, #3EB8E5) );border-radius: 5px;-webkit-box-shadow: inset 0px 1px 0px #2AB7EC, 0px 5px 0px 0px #156785, 0px 10px 5px #999;-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;box-shadow: inset 0px 1px 0px #2AB7EC, 0px 5px 0px 0px #156785, 0px 10px 5px #999;}
 .a_button:active {top:3px;background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%); box-shadow: inset 0px 1px 0px #0076ca, 0px 2px 0px 0px #005999, 0px 5px 3px #999;}
.a_button::before {background-color: #2591B4;}
.a_button:active::before {top:50%; margin-top:-12px;box-shadow: inset 0px 1px 0px #0076ca, 0px 3px 0px #19120f, 0px 6px 3px #0076ca;}







.fade-in {
	font: normal 40px/2 'Qlassik';
	color: #333;
}

.one {font-size: 50px;}
.five {font-size: 30px;}

@keyframes reset 
{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fade-in 
{
	0% {
		opacity: 0;
	}
	60% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fade-in {
	animation-name: reset, fade-in;
	animation-duration: 3s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
}

.fade-in.one {animation-delay: 0, 0;}
.fade-in.two {animation-delay: 0, 1s;}
.fade-in.three {animation-delay: 0, 1.5s;}
.fade-in.four {animation-delay: 0, 2s;}
.fade-in.five {animation-delay: 0, 3s;}

a.again {
    background-color: #6bd3ee;
    background-image: linear-gradient(top, #6bd3ee, #2c9bd4);
    font-size: 20px;
    font-weight: normal;
    padding: 5px 18px;
    border-radius: 20px;
    border-top: 1px solid #baebfc;
    box-shadow: 1px 1px 0 #1c92b0, 0 2px 2px rgba(0,0,0,0.4);
    color: #fff;    
    text-shadow: #257ca7 0 1px 1px;
    -webkit-background-clip: padding-box;
    text-decoration: none;
    font-family: 'Qlassik';
    margin: 40px 10px 0;
    display: inline-block;
    animation-name: reset, fade-in;
	animation-duration: 6s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-delay:0, 6s;
}
a.again:hover {
    background-color: #6ad9fa;
    background-image: linear-gradient(top, #6ad9fa), #39b0ed);
    color: #fff;
    text-decoration: none;
}
a.again:active {
    background-color: #22b4d9;
    background-image: none;
}
a.again.red {
    background-color: #b02b34;
    background-image: linear-gradient(top, #ee3c42), #b02b34);
    border-top: 1px solid #f1554a;
    box-shadow: 1px 1px 0 #bc2f38, 0 2px 2px rgba(0,0,0,0.4);
    text-shadow: #98262d 0 1px 1px;
}
a.again.red:hover {
    background-color: #ff434f;
    background-image: linear-gradient(top, #ff434f), #cb333a);
}
a.again.red:active {
    background-color: #ba313a;
    background-image: none;
}
a.again:before {
	content: '\2190   ';
	font-weight: bold;
}
a.again.red:before {
	content: '';
}