@font-face {
    font-family: 'PFAgoraSlabProBold';
    src: url('../fonts/pfagoraslabpro-bold.eot');
    src: url('../fonts/pfagoraslabpro-bold.eot') format('embedded-opentype'),
         url('../fonts/pfagoraslabpro-bold.woff') format('woff'),
         url('../fonts/pfagoraslabpro-bold.ttf') format('truetype'),
         url('../fonts/pfagoraslabpro-bold.svg#PFAgoraSlabProBold') format('svg');
}

@font-face {
    font-family: 'PFAgoraSlabProRegular';
    src: url('../fonts/pfagoraslabpro-reg.eot');
    src: url('../fonts/pfagoraslabpro-reg.eot') format('embedded-opentype'),
         url('../fonts/pfagoraslabpro-reg.woff') format('woff'),
         url('../fonts/pfagoraslabpro-reg.ttf') format('truetype'),
         url('../fonts/pfagoraslabpro-reg.svg#PFAgoraSlabProRegular') format('svg');
}

body {
	font-family: Arial;
}
h1 {
	font-size: 26px;
	line-height: 1.5;
}
.w980 {
	width: 980px;
	margin: auto;
}

p {
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 1.5;
}

.m-t {margin-top: 30px;}
.m-b {margin-bottom: 30px;}
.m-tb {margin: 30px auto;}

#maximage:after {
	background-image: url("../img/dot.png");
	content: "";
	position: absolute;
	opacity: 0.3;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 15;
}

.redcircle {
	color: #fff;
	background-color: rgba(255, 0, 0, 0.35);
	border-radius: 50%;
	width: 500px;
	height: 500px;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.redcircle div {
	margin: auto;
}

.redcircle i {
	font-style: normal;
	margin-top: 12%;
	font-size: 8em;
	text-shadow: 0 7px 0 rgba(0, 0, 0, 0.4);
}

.redcircle h1 {
	font: 90px/90px 'PFAgoraSlabProBold';
	margin: 15px 0 40px;
	text-shadow: 0 7px 0 rgba(0, 0, 0, 0.4);
}

.redcircle span {
	font-size: 36px;
	text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}

/* 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 img load */
	position:fixed !important;
}

/*Set my logo in bottom left*/
#logo {
	bottom:30px;
	height:auto;
	left:30px;
	position:absolute;
	width:34%;
	z-index:1000;
}

#logo img {
	width:100%;
}

#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;
}

.in-slide-content { 
	color:#333;
	float:right;
	font-family:'Helvetica Neue', helvetica;
	font-size:60px;
	font-weight:bold;
	right:0;
	margin:40px;
	padding:20px;
	position:absolute;
	top:0;
	width:700px;
	z-index:9999; /* Show above .gradient */
	text-shadow: 0 1px 0 #fff;
	-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;
}