* { 
	margin:0; 
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-sizing: border-box;
}

html, body {
	height: 100%;
	-webkit-font-smoothing: antialiased !important;
}

body {
	font-size: 62.5%;
	background: url(../images/new/topLeftBg.jpg) no-repeat top left;
}

a img {
	border: none;
}

img {
	max-width: 100%;
	height: auto;
}

/* GRID */

.row {
	clear: both;
	width: 100%;
}

.unit {
	float: left;
	position: relative;
}

.full {
	width: 100%;
}

.half {
	width: 48%;
	margin-right: 4%;
}
.half:nth-of-type(even) {
	margin-right: 0;
	float: right;
	clear: right;
}

.fullHalf {
	width: 50%;
}

.third {
	width: 30.3333%;
	margin-right: 4%;
}
.twoThirds {
	width: 64.6666%;
	margin-right: 5%;
}

.fullThird {
	width: 33.3333%;
}
.fullTwoThirds {
	width: 66.6666%;
}

.quarter {
	width: 20.5%;
	margin-right: 6%;
}
.threeQuarters {
	width: 72%;
	margin-right: 4%;
}

.fullQuarter {
	width: 25%;
}
.fullThreeQuarters {
	width: 75%;
}

.last {
	margin-right: 0;
}


/* STRUCTURAL */
.wrap {
	padding: 5%;
	position: relative;
}
.wrap.large {
	padding: 5%;
}
.wrap.xlarge {
	padding: 20%;
}

.center {
	margin: 0 auto;
	text-align: center;
}

.left {
	float: left;
}
.right {
	float: right;
}

.bottom {
	position: absolute;
	bottom: 10%;
}

.noPaddingBtm {
	padding-bottom: 0;
}
.noPaddingTop {
	padding-top: 0;
}
.noPadding {
	padding: 0;
}
.borderBtm {
	border-bottom: 1px solid #ebebeb;
}
.marginBtm {
	margin-bottom: 5% !important;
}
.marginTop {
	margin-top: 5% !important;
}

.table {
	display: table;
}

.tableCell {
	display: table-cell;
	vertical-align: middle;
	position: relative;
}


/* CLEARFIX */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


/* TYPOGRAPHY */

body {
	font-family: 'Varela Round', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Varela Round', sans-serif;
	line-height: 1.3;
	margin-bottom: 10px;
	color: #000;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}
h1 {
	font-size: 4em;
	font-weight: 200;
}
h2 {
	font-size: 3.6em;
	font-weight: 200;
}
h3 {
	font-size: 2.4em;
	font-weight: 200;
	text-transform: none;
	letter-spacing: 0.05em;
}
h4 {
	font-size: 1.8em;
	font-weight: 700;
}
h5 {
	font-size: 1.4em;
	font-weight: 200;
}
h6 {
	font-size: 1.2em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}
.margin {
	margin-bottom: 50px;
}
.marginLarge {
	margin-bottom: 100px;
}

.border {
	border-bottom: 1px solid #efefef;
}

a {
	text-decoration: none;
	letter-spacing: 0.1em;
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	position: relative;
	left: 0;
	color: #fff;
}	
	a:hover {
		left: 10px;
	}

p {
	color: #f9f9f9;
	font-size: 1.6em;
	line-height: 1.6em;
	font-weight: 300;
	letter-spacing: 1px;
	margin: 0 0 1em 0;
}

.textRight {
	text-align: right;
}

header p {
	color: #383838;
}

.offset {
	margin-left: 25px;
	position: relative;
	margin-bottom: 2em;
}
	.offset:before {
		content: "";
		position: absolute;
		left: -25px; bottom: 3px;
		background: #000;
		width: 20px;
		height: 3px;
		display: block;
		border-radius: 10px;
	}
	.offset.dark:before {
		background: #323232;
	}

/* COLOURS */

.paleGray {
	color: #000;
}
.white {
	color: #f9f9f9;
}
.dark {
	color: #ccc;
}

.whiteBg {
	background-color: #fff;
}
	.whiteBg h5 {
		color: #252525;
	}
	.whiteBg p {
		color: #6b6b6b !important;
	}
	.whiteBg a {
		color: #c0360c;
	}
.orangeBg {
	background-color: #333;
}
.darkBg {
	background-color: #b90016;
}

.borderRight {
	border-right: 1px solid #dfdfdf;
}

/* BACKGROUNDS */

.bg {
	position: absolute;
	width: 50%;
	height: 50%;
	right: 0; bottom: 0;
}

/* BUTTONS */

/* HEADER */

header {
	height: 100%;
	position: relative;
	background: url(../images/new/headerBg.png) no-repeat bottom right;
}
	header .fullHalf, header .fullHalf .wrap {
		height: 100%;
	}

header .darkBg {
	background-image: url(../images/new/headerBg.png);
	background-repeat: no-repeat;
	background-position: bottom right;
}

.logo {
	display: block;
	margin: 0 auto;
}

/* WORK */

.item {
	height: 500px;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid #b90016;
}
.item.last {
	border-bottom: none;
}
	.viewItem {
		cursor: pointer;
		visibility: hidden;
		opacity: 0;
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		top: 0;
		background: rgba(185, 0, 22, 0.85);
		transition: all 0.5s;
		-moz-transition: all 0.5s;
		-webkit-transition: all 0.5s;
	}
	.viewItem.setLeft {
		left: 0; 
	}
	.viewItem.setRight {
		right: 0;
	}
		.expand {
			position: absolute;
			margin: auto;
			top: 0; bottom: 0; left: 0; right: 0;
			width: 1px;
			height: 50px;
			background: #fff;
			transition: transform 0.5s;
			-moz-transition: transform 0.5s;
			-webkit-transition: transform 0.5s;
			
			transition-delay: 0.2s;
			-moz-transition-delay: 0.2s;
			-webkit-transition-delay: 0.2s;
		}
			.expand:after {
				content: '';
				background: #fff;
				width: 1px;
				height: 50px;
				position: absolute;
				transform: rotate(90deg);
				-moz-transform: rotate(90deg);
				-webkit-transform: rotate(90deg);
			}
	/*
.viewItem.setLeft .expand {
		left: 0;
		right: 10%; 
	}
	.viewItem.setRight .expand {
		left: 10%;
		right: 0;
	}
*/
.item .image:hover .viewItem {
	visibility: visible;
	opacity: 1;
}
.item.active .image:hover .viewItem {
	visibility: hidden;
	opacity: 0;
}
.item .image:hover .viewItem .expand {
	transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

/* Item */
.item .image {
	position: relative;
	height: 500px;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
}
.item .image img {
	position: relative;	
	margin: 10% auto 0 auto;
	width: auto;
	transition: all 1s;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
}
.item .image img.noShadow {
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
}
.item .image.setLeft {
	float: left;
}
	.item .image.setLeft img {
		float: left;
		box-shadow: 20px 20px 1px #b90016;
		-moz-box-shadow: 20px 20px 1px #b90016;
		-webkit-box-shadow: 20px 20px 1px #b90016;
	}
.item .image.setRight {
	float: right;
}
	.item .image.setRight img {
		float: right;
		box-shadow: -20px 20px 1px #b90016;
		-moz-box-shadow: -20px 20px 1px #b90016;
		-webkit-box-shadow: -20px 20px 1px #b90016;
	}

.item .text {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s;
	transition: width 0.5s, opacity 0.2s linear 0.5s;
	-moz-transition: width 0.5s, opacity 0.2s linear 0.5s;
	-webkit-transition: width 0.5s, opacity 0.2s linear 0.5s;
	height: auto;
}
.item .text.setRight {
	float: right;
}

/* Active item */

.item.active, .item.active .image {
	height: auto;
}
.item.active .image {
	width: 100% !important;
	padding: 0 10%;
	cursor: url(../images/new/cursor.png), default;
}
.item.active .text {
	opacity: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}
.item.active .image img {
	margin: 10% auto;
	display: block;
}

.close {
	background: #3b3b3b;
	display: inline-block;
	color: #999999;
	font-size: 12px;
	padding: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	visibility: hidden;
	opacity: 0;
	transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
.item.active .close {
	visibility: visible;
	opacity: 1;
}

/* social */

.social a {
	font-size: 20px;
}
	.social a:hover {
		left: 0;
		color: #e8e8e8;
	}
	
@media screen and (max-width: 1024px) {
	
	.unit {
		width: 100%;
		float: none;
	}
	.table, .tableCell {
		display: block;
	}
	.textRight {
		text-align: left;
	}
	
	header {
		height: auto;
	}
	header .darkBg {
		background-position: top right;
	}
	
	
	.logoBox {
		background: #323232;
		background-image: none;
	}
	
	.wrap, .wrap.large, .wrap.xlarge {
		padding: 10%;
	}
	
	.item {
		height: auto;
		border-bottom: none;
	}
	.item .image img {
		margin: 0 auto;
	}
	
	.info .unit {
		margin-bottom: 80px;
	}

}

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

	.wrap, .wrap.large, .wrap.xlarge {
		padding: 15%;
	}
	
	.logo {
		margin: 0;
	}
	
	.item .image {
		height: 250px;
	}

}
