@font-face {
    font-family: 'Aaargh';
    src: url('http://www.kingsandfools.com/clients/fonts/Aaargh-webfont.eot');
    src: url('http://www.kingsandfools.com/clients/fonts/Aaargh-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.kingsandfools.com/clients/fonts/Aaargh-webfont.woff') format('woff'),
         url('http://www.kingsandfools.com/clients/fonts/Aaargh-webfont.ttf') format('truetype'),
         url('http://www.kingsandfools.com/clients/fonts/Aaargh-webfont.svg#aaarghnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
	font-family: 'Aaargh', Helvetica, Arial, sans-serif;
	font-weight:100 !important;
	font-size: 16px;
	color:#CCCCCC;
	line-height:21px;
	margin:0 0 0 0;
	width:100%;
	height:100%;
}
#shell{
	width:100%;
	max-width:1136px;
	margin:72px auto;
	min-width:300px;
	font-family: 'Aaargh', Helvetica, Arial, sans-serif;
/*	position: relative;
	float:left;
	margin-left:50%;
	left:-563px;*/
}
	#main_content{
		min-width:1px;
	}
	#header{
		width:100%;
	}
	#slogan,
	#slogan img{
		width:226px;
		height:72px;
	}
	.header,
	.tiles,
	#arrow{
		float:left;
		width:auto;
		margin:0 1px 1px 0;
		opacity:0.9;
		position:relative;
	}
	.header img{
		float:left;
	}
		.tiles{
			float:right;
			-webkit-transition: all 0.3s;
			-moz-transition: all 0.3s;
			-ms-transition: all 0.3s;
			-o-transition: all 0.3s;
			transition: all 0.3s;
		}
		#arrow:hover,
		.tiles:hover{
			cursor:pointer;
			cursor: hand;
			background:#09b5fc;
			-webkit-transition: all 0s;
			-moz-transition: all 0s;
			-ms-transition: all 0s;
			-o-transition: all 0s;
			transition: all 0s;
		}
			
			span.overlay{
				width:100%;
				height:100%;
				display:block;
				top:0px
				left:0px;
				position:absolute;
				background:none;
				-webkit-transition: all 0.3s;
				-moz-transition: all 0.3s;
				-ms-transition: all 0.3s;
				-o-transition: all 0.3s;
				transition: all 0.3s;
			}
				
				div.hover span.overlay{
					background:#09b5fc;
					opacity:0.7;
					-webkit-transition: all 0s;
					-moz-transition: all 0s;
					-ms-transition: all 0s;
					-o-transition: all 0s;
					transition: all 0s;
				}
#arrow{
	width: 72px;
	height:72px;
}
	#arrow a{
		display:block;
		width:100%;
		height:100%;
		background: transparent url(assets/ccd-device.png) center center no-repeat;
	}


/*TYPOGRAPHY*/
h1, h2, h3{
	float:left;
	display:inline;
	font-weight:bold;
}

h1{
	text-transform: uppercase;
	font-size: 16px;
	line-height: 37px;
	margin: 0px 0 1px 0;
	color: #fff;
	padding: 0 16px 0px;
	background: rgba(14,18,25, 0.8);
	display: block;
	height: 36px;
}
/*CONTACT*/
.section{
	float:left;
	clear:left;
	margin:72px 74px 0 73px;
	border-top:1px solid rgba(14,18,25, 0.8);
	border-right:1px solid rgba(14,18,25, 0.8);
}
	.sectionHolder{
		position: relative;
		width:100%;
		overflow:hidden;
		min-height:350px;
		height:auto;
	}
	#lee,#tania{
		position: absolute;
		float:none;
	}
#contact a{
	float:left;
	clear:left;
	display:block;
	background:#0e1219;
	background:rgba(14,18,25, 0.8);
	padding:8px 14px 6px;
	margin:0 0 1px 0;
}	
	#contact a:hover{
		background:#09b5fc;
	}
	#contact a span.icon{
		display:block;
		width:30px;
		float:left;
	}
		[data-icon]:before {
		  font-family: icons; /* BYO icon font, mapped smartly */
		  content: attr(data-icon);
		  speak: none; /* Not to be trusted, but hey. */
		}
		.screen-reader-text { /* Reusable, toolbox kind of class */
		  position: absolute;
		  top: -9999px;
		  left: -9999px;
		}
a{
	text-decoration:none;
	outline:none;
	color:#cfcfcf;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
a:hover{
	color:#fefefe;
	-webkit-transition: all 0s;
	-moz-transition: all 0s;
	-ms-transition: all 0s;
	-o-transition: all 0s;
	transition: all 0s;
}
img{
	border:none;
	outline:none;
}
p.ph_no{
	margin-top:-15px;
	font-size:24px;
	line-height:30px;
}

/*INFO*/

.content{
	float:left;
	clear:left;
	display:block;
	background:#0e1219;
	background: rgba(14,18,25, 0.6);
	padding:  0 0 54px 0;
}
	.content p{
		margin:0;
		padding: 60px 90px 0px;
		line-height: 30px;
	}

.tab{
	float:left;
	clear:left;
	display:block;
	background:#0e1219;
	background:rgba(14,18,25, 0.8);
	margin:1px 1px 1px 0px;
}
	.tab:hover{
		cursor:pointer;
		cursor: hand;
		background:#09b5fc;
	}

.close{
	width:36px;
	height: 36px;
	float:right;
	display:block;
	background:#0e1219;
	background:rgba(14,18,25, 0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
	.section .close{
		margin:0 0 1px 0;
	}
	.close:hover{
		cursor:pointer;
		cursor:hand;
		background:#09b5fc;
		opacity:0.8;
		color:#0e1219;
		-webkit-transition: all 0s;
		-moz-transition: all 0s;
		-ms-transition: all 0s;
		-o-transition: all 0s;
		transition: all 0s;
	}
	.close span{
		font-size:20px;
		line-height:39px;
		display:block;
		width:36px;
		text-align:center;
	}

#footer{
	width:100%;
	float:left;
	clear:left;
	margin:0;
	font-size:14px;
	line-height:13px;
}
	.holder{
		margin:72px 0;
	}

		#footer table{
			border-spacing:1px !important;
			border-color:yellow;
		}
		#footer td{
			background:#0e1219;
			background: rgba(14,18,25, 0.4);
			padding:12px 0 11px;
		}
			#photocaption{
				padding:0 14px;
				margin:0px;
				text-transform: uppercase;
			}
/*
	Background Stretcher jQuery Plugin
	© 2011 ajaxBlender.com
	For any questions please visit www.ajaxblender.com 
	or email us at support@ajaxblender.com
*/

HTML {_background: url(/images/trans.gif) no-repeat fixed;}
.bgstretcher-area { text-align: left; }
.bgstretcher, .bgstretcher UL, .bgstretcher UL LI {
	position: absolute;
	top: 0;
	left: 0;
}
.bgstretcher UL, .bgstretcher UL LI {
	margin: 0;
	padding: 0;
	list-style: none;
}
.bgstretcher {
	background: black;
	overflow: hidden;
	width: 100%;
	position: fixed;
	z-index: 1;
	_position: absolute; /*IE6 doesn't support fixed positioning*/
	top: 0;
	left: 0;
}

@media screen and (max-width:1280px){
	#shell{
		width:100%;
		margin:36px auto;
	}
	.holder{
		margin:36px;
	}
	#arrow{
		margin:0 1px 1px 36px;
	}
	.tiles.infoLink{
		margin:0 36px 1px 0px;
	}
	.section{
		margin:36px 109px 0px !important;
	}
}

@media screen and (max-width:820px) and (min-width:750px){
	#shell{
		float:none;
		margin:36px auto;
		width:750px;
	}
	.holder{
		margin:36px 0;
	}
	#arrow{
		margin:0 1px 1px 0;
	}
	.tiles.infoLink{
		margin:0 1px 0 0;
	}
	.tiles{
		margin:0 0 0 0;
		float:left;
	}
	.section{
		margin:36px 0 0 0 !important
	}
	
}

@media screen and (max-width:768px){
	#shell{
		margin:1px auto;
		margin-left:auto;
		position:static;
		float:none;
	}
	.holder{
		margin:1px;
	}
	.content{
		padding:0 0 45px 0;
	}
	.content p{
		padding: 45px 30px 0 30px;
	}

	#arrow{
		margin:0 1px 1px 1px;
	}
	.tiles.infoLink{
		margin:0 0 1px 1px;
	}
	.tiles{
		margin:0 1px 1px 1px;
		float:left;
	}
	.section{
		margin:36px 1px 0 1px !important
	}
}

@media screen and (max-width:749px){
	#shell, .holder{
		margin:9px auto;
		width:374px;
	}
	#slogan{
		margin:0 1px 1px 1px;
	}
	.tiles.infoLink{
		margin:0 1px 1px 0;
	}
	.tiles{
		margin:0 0 0 0;
		float:left;
	}
	.section{
		margin:36px 1px 73px 1px !important;
	}
	.content{
		padding:0 0 30px 0;
	}
	.content p{
		padding: 30px 30px 0 30px;
		font-size:14px;
		line-height:24px;
	}
}
@media screen and (max-width:481px) and (max-device-width:481px){
	#shell{
		margin:36px auto 0px !important;
		width:373px !important;
		float:none;
		margin-left:auto !important;
	}
	#arrow,
	#slogan,
	#logo{
		margin:0 1px 1px 0px;
	}

	#contact a:after{
		content:'  >';
	}
	.content{
		padding:0 0 27px 0;
	}
	.content p{
		padding:23px 30px 0;
		font-size:15px;
		line-height:25px;
	}
}

@media screen and (max-width:321px) and (max-device-width:321px){
	#shell, .holder{
		margin:9px auto 0px !important;
		width:300px !important;
		float:none;
		margin-left:auto;
	}
	.holder{
		margin:9px 0 !important;
	}
	body{
		font-size:90% !important;
	}
}