/*

	/!\ DESIGNER NOTICE /!\
	========================================================================

	Please do not edit this file unless you have permission to do so. 

	Steps have been taken to ensure the integrity of all files related to 
	this site. To maintain this ALL changes must be verified.


	RESPONSIVE HTML TEMPLATE
	========================================================================	

	+ HTML Layout 
		- Grid: max-width 1200px, 12 Columns, 60px 

*/

.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, section, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


.c { margin: 0 auto; max-width: 1200px; }

.col { box-sizing: border-box; display: block; float: left;	margin: 1% 0 1% 1.6%; }
.col:first-child { margin-left: 0 !important; }

.c-12 {	width: 100%; margin-left: 0; margin-right: 0; }
.c-11 { width: 91.53%; }
.c-10 { width: 83.06%; }
.c-9  { width: 74.6%;  }
.c-8  { width: 66.13%; }
.c-7  { width: 57.66%; }
.c-6  { width: 49.2%;  }
.c-5  { width: 40.73%; }
.c-4  { width: 32.26%; }
.c-3  { width: 23.8%;  }
.c-2  { width: 15.33%; }
.c-1  { width: 6.866%; }

.nt { margin-top: 0; }
.nb { margin-bottom: 0; }

	.mobile-yes { display: none; }
	.mobile-no { display: inline-block; }

			table {
				border-collapse: collapse;
				border-spacing: 0;
			}

			.content { padding: 18px; }


			/*
				1: Body, Typography & Link Styles  
			*/

			body {
				background: #FFFFFF;
				font-family: "Source Sans Pro", Arial, Sans-Serif;
				font-style: normal;
				font-size: 18px;
				font-weight: 400;
				line-height: 24px;
				padding: 0;
			}

			h1 { 
				clear: both;
				font-size: 48px;
				font-weight: 700; 
				line-height: 48px;
				margin: 0 0 36px 0;
			}
			h2 { 
				font-size: 38px;
				font-weight: 700; 
				line-height: 42px;
				margin: 0 0 32px 0;
			}
			h3 { font-weight: 600; }
			h4 { font-weight: 600; }
			h5 { font-weight: 600; }
			h6 { font-weight: 600; }

			p {
				margin: 0 0 24px 0;
				padding: 0 0 0 0;
			}


			/*
				2: HTML Styling
			*/

			#brand-logo {
				display: inline-block;
				margin: 24px 0 36px 0;
				width: 280px;
				position: relative; 
			}
				a#brand-logo:after {
					content: "";
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
				}
			#brand-logo object {
				max-width: 100%;
				pointer-events: none;
			}

			#brand-intro p { margin-right: 30px; }

			#iPad {
				text-align: center;
			}

			#client-list {
				background: #FFFFFF;
				border: 1px solid #D4D4D4;
				text-align: center;
				width: 100%;
			}

			#client-list tr th {
				background: #F0F0F0;
				border-bottom: 1px solid #D4D4D4;
				border-top: 1px solid #D4D4D4;
				box-sizing: border-box;
				font-weight: 700;
				padding: 6px 0 6px 0;
			}

			#client-list tr:first-of-type th {
				border-top: none;
				width: 50%;
			}

			#client-list tr:first-of-type th:first-child {
				border-right: 1px solid #D4D4D4;
			}

			#client-list td {
				border-right: 1px solid #D4D4D4;
				padding: 30px 0;
			}

			#client-list td:last-child { border-right: 0; }

			#footer {
				background: #F0F0F0;
				float: left;
				margin: 72px 0 0 0;
				width: 100%;
			}
	

/* =============================================================================
   Tablet & Mobile
   ========================================================================== */

@media screen and (min-width: 320px) and (max-width: 800px) {

    body { font-size: 18px; }

    .col {  margin: 0; }
    
    .c-1, .c-2, .c-3, .c-4, .c-5, .c-6, 
    .c-7, .c-8, .c-9, .c-10, .c-11, .c-12 {	width: 100%; }
	
	
	/*
		Styling
	*/
    
	#iPad img {
		width: 80%;
	}
	
	#brand-colour-wrapper {
		height: 850px		
	}
	
	#brand-intro, #main-content  { text-align: center; }
	#brand-intro h1, #main-content h2 {
		font-size: 32px;
		line-height: 36px;
	}
	#brand-intro p { margin-right: 0; }

	#main-content p { padding-left: 2.5%; padding-right: 2.5%; }
	
	
	.mobile-yes { display: inline-block; }
	.mobile-no { display: none; }
    
	
}