/*
	ALISTAIR WILLIAMS
	DIGITAL & ECOMMERCE DIRECTOR
*/

/**** Fonts ****/

@font-face {
    font-family: 'circular';
    src: url('../fonts/Circular.eot');
    src: url('../fonts/Circular-.eot#iefix') format('embedded-opentype'),
         url('../fonts/Circular.woff') format('woff'),
         url('../fonts/Circular.ttf') format('truetype'),
         url('../fonts/Circular.svg.xml#circular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/**** Global ***/

	html, body {
		overflow-x:hidden;
		width:100%;
		height:100%;
		min-height:100%;
	}
	
	body { 
		margin:0;
		padding:0;
		font-weight:normal;
		font-style:normal;
		text-align:center;
		font-size:67.5%;
		-webkit-font-smoothing: antialiased;
		-webkit-text-size-adjust: none;
		color:#696c7b;
		position:relative;
		height: 100%;
		width: 100%;
		}
		
		a {
			text-decoration: none;
            color:#14181e;
			-webkit-transition: all 0.4s ease;
		    -moz-transition:    all 0.4s ease;
		    -ms-transition:     all 0.4s ease;
		    -o-transition:      all 0.4s ease;
		    transition:         all 0.4s ease;
		}
		
		a:hover {
			color: #696c7b;
		}
		
	div#primaryContainer {
		
		width: 100%;
		height: 100%;
		display: table;
		vertical-align: middle;
		
		z-index: 6;
		position: absolute;
	}
	
	div#secondaryContainer {
		
		width: 100%;
		height: 100%;
		display: table;
		vertical-align: middle;
		min-height: 900px;
		z-index: 6;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
		padding: 0px 20px 0px 20px;
	}
		
		div.intro {
			display:table-cell;
			position:relative;
			vertical-align:middle;
		}	
		
		h1 {
			font-family: 'circular';
			font-size: 125px;
			letter-spacing: 40px;
			line-height: 225px;
			color: #fff;
            text-decoration: none;
		}
		
		img.logo {
			max-width: 600px;
			display: block;
			width: 100%;
			fill: #fff;
			margin: 0px auto;
			margin-bottom: 30px;
		}

		
		h2 {
			font-weight:normal;
			font-size:15px;
			line-height:0px;
			margin:0;
			padding:0 30px;
			font-family: baskerville;
			font-size: 22px;
			color: #fff;
			
			}
			
		h3 {
			font-weight:normal;
			font-style:italic;
			font-size:15px;
			line-height:15px;
			margin:0;
			padding:0 100px;
			}
		

		.panelToggle {
				display:block;
				top:40px;
				right:100px;
				position:fixed;
                background-color: #fff;
				z-index:50;
				-webkit-transition:opacity 0.6s ease, -webkit-transform 0.6s ease;
				-moz-transition:opacity 0.6s ease, -moz-transform 0.6s ease;
				transition:opacity 0.6s ease, transform 0.6s ease;
				text-transform: uppercase;
				color: #14181e;
				font-family: circular;
				font-style: normal;
				letter-spacing: 2px;
				padding: 5px;
				border-bottom: solid 2px #696c7b;
				text-decoration: none;
				
				font-size: 15px;
				}
		
			.panelToggle span {
				display:block;
				height:2px;
				margin:6px 0px;
				background:#696c7b;
				
				-webkit-transition:-webkit-transform 0.6s ease, background 0.6s ease;
				-moz-transition:-moz-transform 0.6s ease, background 0.6s ease;
				transition:transform 0.6s ease, background 0.6s ease;
				}
			
				.panelToggle a {
					text-decoration: none;
				}
				
				.panelToggle a:hover {
					text-decoration: none;
				}
		
	.panel {
		height:100%;
		background:rgba(19,20,29,1);
		position:fixed;
		top:0;
		left:0;
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
		z-index:40;
		width: 100%;		
		-webkit-transition:all 0.6s ease;
		-moz-transition:all 0.6s ease;
		transition:all 0.6s ease;
		opacity: 0;
		}
		
		body.hasPanel .panel {
			opacity: 1;
			}
			
			.tblCell {
				display: table-cell;
				vertical-align: middle;
				position:relative;
			}
			
			
			/**** Panel ****/
			
			div#logo {
				display:block;
				left:100px;
				top: 40px;
				position: absolute;
			}
			
				div#logo h1 {
					font-size: 22px;
					letter-spacing: 4px;
					text-align: left;
					line-height: 22px;
					
				}
			div#panel {
				background: #fff;	
			}
						

            div#panel h3 {
				color: #1C1F25;
				text-align: left;
				font-size: 22px;
				margin: 0px;
				padding: 0px;
				font-family: baskerville;
			}
			
			div#panel p {
				
				font-size: 16px;
				line-height: 26px;
				font-family: baskerville;
				text-align: left;
			}

			.container_btm {
				position:absolute;
				bottom:40px;
				left:0;
				width:100%;
			}
			
			.container_btm p {
				
				color: #fff;
				font-family: baskerville;
				font-style: normal;
				text-decoration: none;
				font-size: 18px;
						
			}
			
			.container_btm p a {
				color: #fff;
				text-decoration: none;
			}
			
			
			body.hasPanel .panelToggle {
				color: #14181e;
				border-bottom-color: #696c7b;
			}
			
			div.clear {
				height: 20px;
				clear: both;
			}

			.about {
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				padding-right: 20px;
			}
			
			.clients {
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				padding-left: 20px;
			}
			
			ul.offering {
				padding: 0px;
				list-style:none;
			}
			
			ul.offering li {
				padding: 0px;
				text-align: left;
				list-style: none;
				font-family: baskerville;
				font-size: 16px;
				margin-bottom: 5px;
			}
/* SLIDESHOW ------------------------------------------------------------ */

	/* Browser Resets
	*********************************/
	.flex-container a:active,
	.flexslider a:active,
	.flex-container a:focus,
	.flexslider a:focus  {outline: none;}
	.slides,
	.flex-control-nav,
	.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
	
	/* FlexSlider Necessary Styles
	*********************************/
	.flexslider {margin: 0; padding: 0;}
	.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
	
	/* Clearfix for the .slides element */
	.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
	html[xmlns] .slides {display: block;}
	* html .slides {height: 1%;}
	
	/* No JavaScript Fallback */
	/* If you are not using another script, such as Modernizr, make sure you
	 * include js that eliminates this class on page load */
	.no-js .slides > li:first-child {display: block;}
	
	/* FlexSlider LJ
	*********************************/
	.flexslider { 
		margin:0;
		background: #24243e;
		position:fixed;
		top:0;
		left:0;
		zoom: 1;
		height:100%;
		z-index:1;
		-webkit-backface-visibility:hidden;
		}
		
		.flexslider .slides,
		.flexslider .slides li {
			height:100%;
			}
			
		.flexslider,
		.flexslider .slides li {
			width:100%;
			}
			
		.flexslider .slides li {
			background-size:cover;
			-moz-background-size:cover;
			-webkit-background-size:cover;
			background-position:50% 50%;
			position:relative;
			background-color:#24243e;
			
			}
	
	.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
	.loading .flex-viewport { max-height: 300px; }
	.flexslider .slides { zoom: 1; }
	
	
	
/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
		

    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
		
		.panelToggle {
			
			width: 82px;
			margin: 0px auto;
			position: relative!important;
			right: 0;
		}
		
		img.logo {
			
			width: 290px;
		}
		
		.tblCell {
		  display:table-cell;
		  position:relative;
		  top:90px;
		  vertical-align:top;
		}

		.about, .clients {
			padding: 0px;
		}
    }