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

@import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);

@font-face {
    font-family: 'danielblack';
    src: url('font/Daniel-Black-webfont.eot');
    src: url('font/Daniel-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Daniel-Black-webfont.woff') format('woff'),
         url('font/Daniel-Black-webfont.ttf') format('truetype'),
         url('font/Daniel-Black-webfont.svg#danielblack') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'danielbold';
    src: url('font/danielbd-webfont.eot');
    src: url('font/danielbd-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/danielbd-webfont.woff') format('woff'),
         url('font/danielbd-webfont.ttf') format('truetype'),
         url('font/danielbd-webfont.svg#danielbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




			/* I wanted to center my loader */
			#cycle-loader {
				height:32px;
				left:50%;
				margin:-8px 0 0 -8px;
				position:absolute;
				top:50%;
				width:32px;
				z-index:999;
			}
			
			/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
			#maximage {
				display:none;/* Only use this if you fade it in again after the images load */
				position:fixed !important;
			}
			
			/*Set my gradient above all images*/
			#gradient {
				left:0;
				height:100%;
				position:absolute;
				top:0;
				width:100%;
				z-index:999;
			}
			
			/*Set my logo in bottom left*/
			/* #logo-bottom {
				bottom:30px;
				height:149px;
				width: 193px;
				left:30px;
				position:absolute;
				
				z-index:1000;
			} */
			#logo img {
				width:100%;
			}
			
			
			/* BANNER 1 - CONTENT */
			
			#b1_content {
				position: fixed;
				width: 355px;
				height: 260px;
				float:right;
				top: 200px;
				
	
			}
		
			
			/* BANNER 2 - CONTENT */
			.banner2 {
				
				position: absolute;
				margin-right: 100px;
				top: 230px;
				right: 0;	
				font-family: 'Amatic SC';
				font-weight: 700;
				letter-spacing: 2.5px;
				
			}
			
			.banner2 h1 {
				color:#FFF;
				font-size: 38px;	
			}
			
			.banner2 p {
				color: #000;
				font-size: 29px;
				float: right;	
				clear: both;	
			}
			
			.clickbtn {
				position: absolute;
				width:127px;
				height:31px;	
				background:url(../images/page2_clickbtn.png) no-repeat;
			}
			
			.clickbtn:hover{
				background:url(../images/page2_clickbtn_hover.png);
				-webkit-transition: all 0.3s ease-out 0s; /* chrome */
				-moz-transition: all 0.3s ease-out 0s;
				-o-transition: all 0.3s ease-out 0s;
				transition: all 0.35s ease-out 0s; 	
			}
			
			.b2_clickbtn {
				right: 0;
				margin-top: 25px;
						
			}
	
			/* BANNER 3 - CONTENT */
			
			.banner3 {
				position: absolute;
				top: 230px;
				left: 50%;
   				margin-left: -181px;
			
			}
			
			.b3_clickbtn{
				left: 50%;
				margin-left: -63px;
				margin-top: 10px;
			}
			
			
			#arrow_left, #arrow_right {
				bottom:30px;
				height:67px;
				position:absolute;
				right:30px;
				width:36px;
				z-index:1000;
			}
			#arrow_left {
				right:86px;
			}
			
			#arrow_left:hover, #arrow_right:hover {
				bottom:29px;
			}
			#arrow_left:active, #arrow_right:active {
				bottom:28px;
			}
			
			
			a {color:#FFF;text-decoration:none;}
			a:hover {text-decoration:underline;}
			
			
			.in-slide-content { 
				
				width: 960px;
				height: 1000px;
				margin: 0 auto;
				z-index:9999; /* Show above .gradient */
				
				-webkit-font-smoothing:antialiased;
				
		
			}
			.light-text {color:#ddd;text-shadow: 0 1px 0 #666;}
			.smaller-text {font-size:30px;}
			.youtube-video, video {
				left:0;
				position:absolute;
				top:0;
			}