@charset "utf-8";

@font-face {
	font-family: 'raleway';
	src: url('fonts/raleway_thin.eot');
}
@font-face {
	font-family: 'raleway';
	src: url('fonts/raleway_thin.ttf') format('truetype');
}

@font-face {
	font-family: "helvetica-neue-bold";
	src: url(fonts/HelveticaNeue-Bold.ttf);
}

@font-face {
	font-family: 'chalet-oblique-london';
	src: url('fonts/ChaletOblique-London.eot');	
}
@font-face {
	font-family: 'chalet-oblique-london';
	src: url('fonts/ChaletOblique-London.ttf') format('truetype');
}

@font-face {
	font-family: 'avantgarde-book';
	src: url('fonts/ITCAvantGardePro-Bk.eot');
}
@font-face {
	font-family: 'avantgarde-book';
	src: url('fonts/ITCAvantGardePro-Bk.ttf') format('truetype');
}

html, body { width: 100%; height: 100%; }

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
	margin: 0; padding: 75px 0 0 0;
}

div#side-bg {
	position: fixed;
	top: 0;
	width: 100%; height: 100%;
	z-index: -1;
	background: #fff;
}

div#side-bg > .bar {
	background: #efefef url(/img/waves_texture_10.png);
	margin-left: auto;
	width: 50%; height: 100%;
}

a {
	text-decoration: none;
	color: #b0b0b0;
}

li {
	list-style-type: none;
}

h1 {
	font-size: 46pt;
	font-weight: normal;
	letter-spacing: 5px;
	width: 812px;
	padding-bottom: 22px;
	margin: -16px 0 17px -3px;	
	border-bottom: solid 1px #D9D9D9;
	text-transform: uppercase;
}

section#content-area {
	width: 1153px;
	height: 100%;
	margin: auto;
	padding-top: 53px;
	padding-bottom: 43px;
	background-image: url(../img/background_white_w865.png);
	background-repeat: repeat-y;
	background-position: left;
	display: table;
}

div.content {
	width: 812px;
	margin-bottom: 43px;
	padding-bottom: 43px;
	border-bottom: solid 1px #D9D9D9;	
}

.date, .client-name {
	color: #9a9a9a;
	font-size: 7.5pt;
	margin-bottom: 23px;
	margin-top: 6px;
}

#side-bar p.date a {
	color: inherit;
}

.view-project, #side-bar {
	font-size: 12pt;
}

#content-area.content, h1, #content-area #project-client, #content-area #project-content, #project-content #download, 
#content-area #project-content dd, #content-area #contact-us-body, #content-area #contact-us-body dt,   
#playlist-view-button, #content-area #team, #content-area #about-us-content dd, #content-area #about-us-content {
	border-width: 1px;
	border-color:  #d9d9d9;
}

#left-arrow, #right-arrow {
	width: 50px;
	height: 50px;
	background-color: #575757;
	margin-top: 358px;
	background-repeat: no-repeat;
	background-position: center;
}

#left-arrow, #playlist-left-arrow {
	float: left;
	margin-left: 200px;
	background-image: url(../img/arrow_left.png);
}

#right-arrow, #playlist-right-arrow {
	float: right;
	margin-right: 145px;
	background-image: url(../img/arrow_right.png);
}

section#slideshow {
	overflow: hidden;
}

section#slideshow .overlay, section#map .overlay {
	width: 100%;
	height: 839px;
	margin: 0 auto;
	overflow: hidden;
}

section#slideshow div.plus-sign {
	background-image: url(../img/add_project_big_rollover.png);
	background-position: top left;
	width: 66px;
	height: 66px;
	left: 100%;
	margin-left: -66px;
	position: absolute;
	z-index: 20;
	cursor: pointer;
}

.add-to-playlist {
	font-family: 'Lato', sans-serif;
	color: #6c6c6c;
	font-size: 10pt;
	width: 153px;
	height: 26px;
	background-image: url(../img/add_to_playlist.png);
	background-repeat: no-repeat;
	position: absolute;
	padding-top: 6px;
	padding-left: 12px;
	z-index: 3;
}

section#slideshow div.add-to-playlist {
	margin: 21px 0 0 -235px;
	left: 100%;
	padding-left: 15px;
	display: none;
}

.overlay-bar {
	width: 100%;
	height: 77px;
	margin-top: 762px;
	position: absolute;
	z-index: 3;
	overflow: hidden;
}

section#slideshow div.canvas {
	position: absolute;
	z-index: 1;
	margin-top: 75px;
	height: 762px;
	width: 100%;
	background: #131313;
	overflow: hidden;
}

section#slideshow div.canvas img.content {
	position: absolute;
	width: 100%;
	min-width: 640px;
	height: auto;
}

section#slideshow div.canvas img.content.loaded {
	opacity: 0;
}

div.fill-board {
	position: absolute;
	left: 50%;
	margin-left: 288px;
	width: 50%;
	height: 77px;
	overflow: hidden;
}

section#slideshow ul.thumbs {
	width: 900px;
	margin-top: 777px;
	margin-left: -575px;
	left: 50%;
	position: absolute;
	z-index: 11;
}

section#slideshow ul.thumbs img {
	width: 82px;
	height: 46px;
}

section#slideshow ul.thumbs li {
	display: inline;
	margin-right: 13px;
	cursor: pointer;
}

section#slideshow ul.thumbs li span {
	display: none;
}

section#slideshow div.arrow {
	position: absolute;
	z-index: 15;
	width: 18px;
	height: 11px;
	margin: 615px 0 0 32px;
}

h1, #next-project, #territories, #project-page .content ul, table, #playlist-view-button, #playlist-video p, .text-balloon h4 {
	font-family: Lato, Arial, Verdana, sans-serif;
	color: #6c6c6c;
}

h1 {
	font-family: 'raleway', Arial, Verdana, sans-serif;
	color: #6c6c6c;
}

#side-bar dt, #side-bar h4, .date, .client-name, .job, #about-us-content dt, h2, #contact-us-body dt, #team p, #side-bar, 
#adress, #playlist-client-name, #playlist-page .text-balloon p, #project-grid li p {
	font-family: 'chalet-oblique-london', Arial, Verdana;
}

li.project img.panel {
	width: 587px;
	height: 330px;
}

#download {
	font-family: 'avantgarde-book', Arial, Verdana;
	font-size: 10pt;
	color: #282828;
}
#about-us-content dd p {
	font-family: 'avantgarde-book', Arial, Verdana;
	font-size: 9.5pt;
	color: #282828;
	line-height: 18px;
	letter-spacing: 0.06em;
}


/*
	Side bar
*/

#side-bar {
	width: 242px;
	float: right;
	font-size: 11.5pt;
	color: #282828;
	margin-right: 3px;
}

#content-area #side-bar h4 {
	font-weight: normal;
	margin-top: 11px;
	margin-bottom: 28px;
	line-height: 28px;
	padding-bottom: 13px;
}

#side-bar dl {
	margin-bottom: 65px;
	margin-top: 0px;
}

#side-bar dt, #side-bar h4 {
	font-size: 17.5pt;
	border-bottom: solid;
	border-width: 1px;
	border-color:  #b3b3b3;
	padding-bottom: 18px;
	margin-bottom: 21px;
	margin-top: -5px;
	letter-spacing: 0.1em; 
	text-transform: uppercase;
}

#side-bar #updates dt {
	margin-bottom: 20px;
}
#side-bar dd {
	margin-left: 0px;
}

#side-bar a:link, #side-bar a:visited {
	color: #ff005a;
}

#side-bar a:hover {
	color: #901741;
}

/*
	Project highlight
*/

#project-page-highlight {
	position: absolute;
	z-index: 10;
	width: 1491px;
	background-image: url(../img/transparent_texture.png);
	margin-top: -892px;
}

#image-highlight {
	width: 1491px;
	height: 762px;
	display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#project-page-highlight ul {
	margin: 0px 0px 0px 13px;
	display: inline-block;
	vertical-align: top;
}

#project-page-highlight ul li {
	margin-bottom: 5px;
}

section#slideshow a.mini-project-rollover {
	width: 82px;
	height: 46px;
	position: absolute;
	z-index: 10;
	background-image: url(../img/mini_project_rollover.png);
	background-position: top left;
}

section#slideshow div.overlay div.content {
	width: 1150px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 138px;
	position: relative;
	z-index: 3;
}

section#slideshow div.overlay-bar {
	background-image: url(../img/grey_texture.png);
}

section#slideshow div.fill-board {
	background-color: #131313;
}

ul.share {
	float: left;
	margin-top: -30px;
	line-height: 25px;
}

ul.share li {
	width: 26px;
	height: 26px;
	display: inline-block;
	margin-right: 4px;
	cursor: pointer;
}

/*
 * roll-over animations, implemented with background-image changing positions
 */

.social-network-icon {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url(../img/header_social_networks_icons.png);
	margin: -5px 0 0 0;
	padding: 0;
	cursor: pointer;
}

.social-network-icon-rollover {
	display: none;
	width: 26px;
	height: 26px;
	background-image: url(../img/header_social_networks_icons.png);
	margin: -5px 0 0 0;
	padding: 0;
	position: absolute;
	z-index: 10;
	cursor: pointer;
}

.facebook-icon {	
	background-position: top left;
}

.twitter-icon {
	background-position: 0px 130px;
}

.pinterest-icon {
	background-position: 0px 104px;
}

.vimeo-icon {
	background-position: 0px 78px;
}

.tumblr-icon {
	background-position: 0px 52px;
}

.google-plus-icon {
	background-position: 0px 26px;
}

.facebook-icon-rollover {	
	background-position: 26px 0px;
}

.twitter-icon-rollover {
	background-position: 26px 130px;
}

.pinterest-icon-rollover {
	background-position: 26px 104px;
}

.vimeo-icon-rollover {
	background-position: 26px 78px;
}

.tumblr-icon-rollover {
	background-position: 26px 52px;
}

.google-plus-icon-rollover {
	background-position: 26px 26px;
}


@media all and (device-width: 768px) and (device-height: 1024px) {
	#playlist {
		display: none;
	}
	.overlay .plus-sign {
		display: none !important;
	}
}