/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

body {line-height:1.2em;}
body * {-webkit-tap-highlight-color: rgba(0,0,0,0); box-sizing: border-box; font-family: 'Roboto', sans-serif; color:#666;}

footer, .footer {background:#666; width:100%; color:#fff;}
header .container, .header .container {}

strong, b {color:#f15822;}
p em {font-weight:300;}
.content ul li {font-weight:300; list-style-type: disc;}

form {margin:0;}

header a, .header a, footer a, .footer a,
header a:link, .header a:link, footer a:link, .footer a:link,
header a:visited, .header a:visited, footer a:visited, .footer a:visited  {color:#666; text-decoration:none; font-weight:300;}
 
/* body {font-family: "aktiv-grotesk-std";} */

h1 {font-size:40px; color:#f15822;}
h2 {font-size:30px;}

h3.current a {color:#3333CC;}

.print {display:none;}
.error {color:#ff9900;}
.hide {display:none;}

#logo { background:#333; }
#logo a {width:170px; padding:0; margin:0;}
#logo a img {margin:14px 10px 5px;}

p {    font-size: 16px;
    font-weight: 300;
    line-height: 1.4em;}

header {	
	-moz-box-shadow: 0px 0px 2px 2px #ccc;
	-webkit-box-shadow: 0px 0px 2px 2px #ccc;
	box-shadow: 0px 0px 5px 2px #ccc;
	position:fixed;
	left:0;
	height:100%;
	border-right:1px solid #999;
	width:170px;
	background-color:#fff;
	z-index:10;
}

header ul {margin-bottom: 0;}
header nav li {display:block; font-size:18px; line-height:50px; margin-bottom: 0px; }
header nav li:last-child, header nav li:first-child {}
header nav li.menuLogin {float:right;}
header nav li a {display:block; text-align:center; padding:0 10px; border-bottom: 1px solid #eee; }
header #description {padding:30px 20px; background-color:#f15822; color:#fff;}

header nav .l2 {
	font-size: 16px;
    line-height: normal;
    margin: 0;
}

header nav li.l2 a {
	margin-bottom:1px;
	padding:5px 0;
	background-color:#eee !important;
}

header nav li.l2.current a {
	background-color:#ddd !important;
}

header nav li.l2 a:hover {
	background-color:#ddd !important;
}

/* colours */

input[name=submit],input[name=next] {background-color:#3366FF; text-shadow:none; color:#fff;}
input[name=cancel],input[name=print] {background-color:#FF6600; text-shadow:none; color:#fff;}
input[name=finish],input[name=save] {background-color:#339900; text-shadow:none; color:#fff;}

input[name=submit]:hover,input[name=next]:hover {background-color:#1947D0;}
input[name=cancel]:hover,input[name=print]:hover {background-color:#DA5700;}
input[name=finish]:hover,input[name=save]:hover {background-color:#2D7D04;}

li.not-available a {color:#999;}

.cols {column-count:3;}
.portfolio.content {position:relative;}

#about-us .content img {width:100%; height:auto;}

#mainContent ul { display:block; }
#mainContent .contentCopy ul,#mainContent .content ul { margin-left:1.8em;  list-style: disc outside ; }
.content {width:calc(100% - 400px); margin:0 auto; max-width:1200px; padding-top: 50px;}

.portfolioItem {position:absolute;}

.portfolio-item, .portfolio-items {width:100%; position:relative; margin-bottom:40px; }
.portfolio-item {cursor:pointer;border-bottom:1px solid #ccc;}
a:last-child .portfolio-item {border:none;}
.portfolio-items {width:100%; margin: 20px auto; max-width:800px;}

.portfolio-items.video {text-align:center;}
.portfolio-items.video video {max-width:800px; max-height:540px;}

.portfolio-item .portfolio-title {color:#666; text-align: center;}
.portfolio-item .portfolio-title h2 {font-size:30px; font-weight:300;}
.portfolio-item .portfolio-title h3 {font-size:16px; font-weight:300;}
.portfolio-item .portfolio-title h2, .portfolio-item .portfolio-title h3 {text-decoration: none;}

.portfolio-image {max-width:1200px; margin-bottom:40px; width:100%; position:relative; background-size:contain; background-position:50%; background-repeat: no-repeat;}
.portfolio-item .portfolio-image {height:800px;}
.portfolio-items .portfolio-image {width:100%; margin: 20px auto; max-width:800px;}

.portfolio h1 {font-size:50px; text-align: center;}
.portfolio h3 {font-size:20px; text-align: center;}

a, a:visited {
    text-decoration: none;
}

.bg-container.second {padding:40px 0;}

#background {width:100%; height:100%; position:absolute; top:0; left:0; z-index:-2; background-color:#fff;}
#background .dynamic { top:0; left:0; width:100%; height:100%; display:none;}

/*CANVAS*/
#pre_loader {position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1;}
#pre_loader img {margin-left:calc(50% - 20px); margin-top:calc(50% - 20px); display:block; position:relative;}
#pre_loader .bg {position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000;}

/*assets*/
body.crosshair {cursor:url('../images/assets/crosshair.png') 10 10,crosshair;}
body.crosshair-red {cursor:url('../images/assets/crosshair-red.png') 10 10,crosshair;}
.mirror-right img {
	
	-moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
	
}

.clear {clear:both;}

img {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */
	@media only screen and (min-width: 130px) {

header li a:hover, #logo a:hover {  }
header li a:hover, header li.current a { background-color:#ddd !important; }


/* multicolumns for larger screens */
.two-thirds.column .contentCopy {
-webkit-columns: 2 150px;
-moz-columns: 2 150px;
columns: 2 150px;

-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;

margin-bottom: 18px;  }
footer .right {text-align:right;}

	}
@media only screen and (max-width: 1599px) {
	.content {
    margin: 0 0 0 200px;
    width: calc(100% - 240px);
	}
}

@media only screen and (max-width: 1299px) {

	.cols {column-count:2;}
	
}

@media only screen and (max-width: 1199px) {
	.portfolio-item .portfolio-image {
		height: 500px;
	}
}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
#logo {float:none;}
#logo a {width:170px; border-bottom: none;}

/* sub nav display on mobile */
/*header nav .current .l2 {display:block; margin:0; padding:0;}*/
header nav .menu li {display:block; border:none; padding:0; margin:0; float:none;  line-height:32px}
header nav .menu li a {display:block; text-align:left;  border-bottom-width:1px; border-left-style:solid; border-left-width:10px; width:auto; height:auto;	}
header nav .menu li {border-bottom:1px solid #fff;}
header nav .menu li:last-child {border-bottom:none;}
header nav .menu li a {border-bottom:none;}
header nav .menu li.current li:last-child {border-bottom:none;}
header nav .menu li.current li:first-child {border-top:1px solid #fff; }

.article-image {width:150px; max-height:150px; overflow:hidden; margin:5px 0 5px 0;}
.article-image img {max-width:150px;}
.article-text {width:270px; margin:5px 0 5px 10px;}

	}
	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.panel article.one-third.column div img {max-width:216px;}
		.one-third .panel input[type=text] {width:226px;}
		.one-third .panel select {width:226px;}
		
		}

	@media only screen and (max-width: 767px) {
		.searchBar {margin-top:4px;}
		.article-image {display:none}
		.article-text {width:auto; margin:5px 0 5px 10px;}
		header #description {display:none;}
		header {height:80px; width:100%;}
		#logo a img {
			height: 50px;
			width: auto;
		}
		header nav .menu li a {
			background-color: #fff;
		}
		#background .dynamic {
			top: 120px;
			position: absolute;
		}
		.content {
			width: 100%;
			margin:0;
			padding: 40px;
		}
		.portfolio-image {
			max-width:400px;
			max-height:400px;
			margin: 0 auto;
		}
		.cols {column-count:1;}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	.panel article.one-third.column div img {max-width:400px;}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		.portfolio-image {
			max-width:200px;
			max-height:200px;
			margin: 0 auto;
		}
	}

	/* larger (devices and browser) */
	@media only screen and (min-width: 1280px) {
		#logo {}
		header nav li {font-size:21px;}
header li.menuLogin {margin-right:-170px;}
header li.menuLogin a {min-width:150px;}

		}



/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/