@charset "utf-8"; 
/* 
	CSS Document 
	AUTHOR: Appollinaire Egny
	WEBSITE:http://www.domainnane.co.uk

	Created in Mozilla Firefox3 

	THEME NAME: themename
	DESCRIPTION:Bespoke template for xxxx
	VERSION:1.0

	------------------------------------------------------------------
	[Master Stylesheet]
	-------------------------------------------------------------------
*/

/*	-------------------------------------------------------------
	IMPORT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

@import url(fonts.css);
@import url(normalize.css);
@import url(homepage.css);
@import url(navi.css);
@import url(forms.css);
@import url(tables.css);


/*	-------------------------------------------------------------
	STYLES FOR SCREEN / PROJECTION
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/


/*	-------------------------------------------------------------
	RESET
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
}

img, fieldset {
	border: 0;
}



/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}



* 									{ margin:0; padding:0}
html, body 							{ height:100%; margin: 0px;}

body 								{ margin:0; padding:0; border:0; color:#000; width:100%; background:#ccc; font-size:1em; line-height:1.5em; font-family: 'brandon-grotesque-regular','Open Sans', sans-serif; font-weight: 300; -webkit-text-size-adjust:none}

.fixed 								{ margin:0 auto; max-width:1200px; width:100%; text-align:left; position:relative }

a {}
a:hover {}
h1, h2, h3 							{ margin:0 0 .8em 0; padding:0 }
p 									{ margin:0 0 .8em 0; padding:0 }

/*
embed,
object,
iframe 								{ width: 100%; height: auto }
*/
/*	-------------------------------------------------------------
	HACKS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.clearfix:after 					{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix 							{ display: inline-block; }
.clearfix 							{ display: block; zoom: 1; }	
	
	
/*	-------------------------------------------------------------
	HEADER STYLES
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

#header 							{ position: fixed; top:0; width: 100%; height: 100px; text-transform:uppercase; font-family: 'brandon-grotesque-regular'; background:#ccc; z-index:101 }
#header 							{ text-transform:uppercase; font-family: 'brandon-grotesque-regular'; font-size:11px; letter-spacing:2px }
#header .nav 						{ position: absolute; top: 0; right: 0 }
#header .nav li 					{ float: left; display: inline-block }
#header .nav li a 					{ font-size: 11px; color: #000; padding: 24px 15px; text-decoration:none; display: block }
#header .nav li a:hover 			{ color: #000}

#header .nav li.selected a::before,
#header .nav li.selected a::after 	{ content: " | "; font-weight:bold; color:#B41116 }

#header .nav li#contact a			{ padding: 24px 50px 24px 15px !important}
#header .nav li#contact a::after 	{ content: url('../images/contact_red.png'); display: inline-block;padding:0 0 0 5px; position:absolute; bottom:20px; right:0 }

#header .logo 						{ position: absolute; top: 0; left: 0 }
#header .logo span 					{ font-size: 14px; color: #B50F19; padding: 24px 0; text-decoration:none; display: block; font-weight:600 }


/*	-------------------------------------------------------------
	CONTENT STYLES
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
#main 								{ position: relative; width:100%; margin:0 auto; overflow:hidden; }

h1, h2								{display:block; margin:0; padding:0 0 25px; font-size:16px; text-transform:uppercase; letter-spacing:1px;color:#B50F19; }
h2                                                            { font-size:14px;}
/* .section 							{ width: 100%; padding: 22% 0; position: relative;} */
.section 							{ width: 100%; padding: 10% 0; position: relative;}
.section ul 						{ list-style-type: none; width:100%; display: block; margin: 0 auto }
.section ul.appsnew 				{ width: 78.8% !important}

.section li 						{ float: left; width: 30%; display: block; padding: 0 1.5% }
.section ul.appsnew  li				{ width: 47% !important; padding: 0 1.5% 3% !important }
.section li.two 					{ width: 46.5% !important }
.section li.three 					{ width: 30% !important }



.section li img 					{ display: block; width: 100%; height: auto }
.section li img:hover 				{}


ul#filterOptions 					{ width: 93%; height: 50px; margin: 0 auto; display: block; overflow: hidden; }
ul#filterOptions li 				{ display:inline-block; text-transform:uppercase; font-size:12px; margin:0 20px 0 0; letter-spacing:2px; }
ul#filterOptions li.active 			{ font-weight:600; }
ul#filterOptions li a 				{ text-decoration: none; color:#000; }

#ourHolder 							{ width: 100%; padding:0; margin:0; overflow: hidden; }
#ourHolder div.item 				{ float: left; text-align: center; width: 30%; display: block; margin: 0 1.5% 2%; }
#ourHolder div.item span 			{ display:block; margin-top: 10px; font-size: 12px; line-height: 20px; text-transform:uppercase; letter-spacing:2px; height:50px; }

.sectionInner 					 	{ width: 100%; margin: 110px 0 65px; padding:0; position: relative; }

.content							{ width: 93%; margin: 0 auto; display: block; overflow: hidden; }	
.content p							{ line-height:2.0em; }	


img.floatleft						{ float: left; display: block; max-width: 100%; margin: 0 5% 4% 0; padding:0; }
.item img 							{ disply:block; max-width:315px; height:auto }


.table 								{ display: table; padding:0; margin: 0 auto; width:90% }
ul#horizontal-list 					{ width: 100%; list-style: none; padding: 0; display:block; }
ul#horizontal-list li 				{ display: inline; position:relative }
ul#horizontal-list li a 			{ display: block; position:relative; width:100%; height:auto; text-decoration:none; color:#000 }

#sitework__frame.table				{ width:62% !important }

.slicknav_menu 						{ display:none }


.rows__left							{ position:relative; float:left; padding:0; margin:0; width:40% }
.rows__left	 h1:after 				{ background-color:#cacaca; content: ''; display: block; height: 1px; margin-bottom: 5px; margin-top: 25px; width: 100% }
.rows__left	 .frame					{ padding:0 10% 0 0; width:90% }

.rows__left .post__items			{ position:relative; padding:0; margin:0 0 20px; min-height:333px; height:auto !important; height:333px; border-bottom:1px solid #cacaca }
.rows__left .post__nav				{ position:relative; padding:0; margin:0; height:50px }

.rows__left .post__nav span.prev	{ display:block; width:45%; float:left; padding:0; margin:0 }
.rows__left .post__nav span.next	{ display:block; width:45%; float:right; text-align:right; padding:0; margin:0 }
.rows__left .post__nav a			{ padding:0; margin:0; text-decoration:none; color:#000; text-transform:uppercase; font-size:12px }




.rows__right						{ position:relative; float:right; padding:0; margin:0; width:60% } /*float:left*/
.exp__large							{ display:block; width:100%; height:auto }


table.cvtable {
width:100%;
margin:0 0 60px;
}

table.cvtable td {
vertical-align:top;
padding: 5px 0;
}

table.cvtable td.left {
width:20%;
}



.caption__frame 					{ position:absolute; width:100%; margin:0 auto; padding:5px 0; bottom:0; background-color:rgba(0,0,0,0.5); color:#fff; font-weight:400 }
.caption__frame div 				{ display:table; padding:0; margin:0; width:100%; height:100% }
.caption__frame div span 			{ display:table-cell; padding:0 1.5% 0 0; margin:0; width:98.5%; height:100%; vertical-align:middle; text-align:center; font-size:13px; letter-spacing:1.2px; font-family: 'brandon-grotesque-regular' }



table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 25px
}
tr:nth-of-type(odd) {
	
}
th {
	
	color: black;
	font-weight: bold
}
td, th {
	padding: 6px;
	text-align: left
}
td:last-child, th:last-child {
	width: 80%
}
.press__items {
	position: relative;
	float: left;
	width: 25%
}
.press__items div {
	position: relative;
	padding: 2% 4%;
	margin: 0 0 2%
}
.press__items div span {
	display: block;
	text-align: center;
	padding: 5px 0;
	margin: 0;
	text-transform: uppercase
}
.press__items div a {
	display: block;
	height: 100%;
	color: #000;
	text-decoration: none
}
.press__items img {
	display: block;
	width: 100%;
	height: auto
}


/*	-------------------------------------------------------------
	FOOTER STYLES
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
#footer 							{ position: fixed; width:100%; height: auto; overflow:hidden; margin-top:55px; bottom: 0; text-transform:uppercase; font-family: 'brandon-grotesque-regular'; font-size:9px; letter-spacing:2px; background:#ccc; z-index:101; }
#footer .fixed 						{  max-width:100% !Important }

#footer span						{ display:block; padding:5px 25px 0 0; margin:0; text-align:right !important; }

#footer a#contactLink				{ display: block; position: absolute; top:5px; left:0; width: 22px; height: 15px; }



#catapult-cookie-bar {
	max-height: 200px !important;
	opacity:0.8 !important;
	padding:10px 20px !important;
}





@media screen and (max-width: 768px) {
	#header .logo 					{ left: 5px }
	#menu 							{ display:none }
	.slicknav_menu 					{ display:block }
	.section 						{ width: 96%; padding: 25% 2%; position: relative }
	
	.item img 						{ disply: block; max-width: 100%; height: auto }
	
	.section 						{ width: 96%; padding: 20% 2% 0; position: relative }
	.homeContent 					{ top: 15% }
	
	#footer a#contactLink 			{ left: 5px }
	
	
	.rows__left .post__items {
		min-height: 150px;
		height: auto !important;
		height: 150px;
	}
	
	
}

@media only screen and (min-width : 320px) and (max-width : 667px) {
	
	ul#filterOptions li 			{ font-size: 11px; margin: 0px 9px 0 0; letter-spacing: 1px }
	
	.section li 					{ float: left; width: 100%; display: block; padding: 0 0 25px }
	.section li.two               { width: 100% !important }
	.section li.three 	          { width: 100% !important }
	.section li img 				{ display: block; width: 100%; height: auto }

	#ourHolder div.item span 		{ font-size: 11px; line-height: 14px; letter-spacing: 1px; height: 80px }
	.content p 						{ line-height: 20px }

	#footer 						{ font-size: 10px; letter-spacing: 1px }
	.content 						{ font-size: 15px }
	
	.homeContent 					{ font-size: 20px; letter-spacing: 6px; line-height: 30px }
	
	.press__items { height:280px }
	.press__items div span { font-size: 12px; line-height:18px }
	#sitework__frame.table {
		width: 90% !important;
		padding:0 0 50px;
	}
	.table {
		padding: 0 0 50px;
	}
}

@media only screen and (min-width : 320px) and (max-width : 667px) and (orientation : landscape) {
	.section li 					{ float: left; width: 50%; display: block; padding: 0 0 1.5% }
	.section li.two 				{ width: 46% !important; margin:0 2% }
	.section li.three 				{ width: 30% !important; margin:0 2% }
}

@media only screen and (min-width : 320px) and (max-width : 667px) and (orientation : portrait) {
	.rows__left						{ position:relative; float:none; padding:0; margin:0; width:100% }
	.rows__left	 .frame				{ padding:0; margin:0 0 50px; width:100% }
	.rows__right					{ position:relative; float:none; padding:0; margin:0 0 30px; width:100% }
	
	#ourHolder div.item 			{ width: 46.5% }
	
	.press__items 					{ position: relative; float: left; width: 50%; height:280px }

}