/* FONT FACE */
/* ------------------------------------------------------------------------ */
@font-face {
    font-family: 'HL';
    src: url('fonts/helveticaneue-ultralight-webfont.eot');
    src: url('fonts/helveticaneue-ultralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/helveticaneue-ultralight-webfont.woff') format('woff'),
         url('fonts/helveticaneue-ultralight-webfont.ttf') format('truetype'),
         url('fonts/helveticaneue-ultralight-webfont.svg#HelveticaNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: "DR";
	src: url('fonts/dinregular.eot') format("eot");
	src: url('fonts/dinregular.otf') format("opentype"), 
		 url('fonts/dinregular.ttf') format("truetype");
	font-weight: normal;
    font-style: normal;
}
/* ________________________________________________________________________ */

/* GENERAL */
/* ------------------------------------------------------------------------ */
*, html, body {
	margin: 0;
	padding: 0;
	border: none;
	text-decoration: none;
	list-style: none;
	line-height: normal;
	font-weight: normal;
    font-style: normal;
	color:#FFF;
}

#full {
	width: 100%;
	position:relative;
	overflow:hidden;
	z-index: 999;
}
b {
	font-weight:bold;
}
.selected {
	color: #666;
}
.clear {
	clear:both;
	display:block;
}
.red {
	color: #900;
}

h1 {
	font-family: "HL", Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	font-size: 44px;
	line-height: 42px;
	font-weight:100;
	font-style: normal;
}

h2 {
	font-family: "HL", Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	font-size: 44px;
	line-height: 42px;
	font-weight:100;
	font-style: normal;
}

/* ________________________________________________________________________ */

/* BODY */
/* ------------------------------------------------------------------------ */
#bgJs {
	position: fixed;
	z-index: -100;
	margin: 0;
	padding:0;
	height: 0;
	left: 0;
	top: 0;
	/*display:none;*/
}
body {
	width: 100%;
	background:#000;
	color:#FFF;
	font-family: "DR", Arial, Helvetica, sans-serif;
	font-size: 14px;
	letter-spacing: 0.02em;;
	overflow-x:hidden;
}
#all {
	position: relative;
    margin-left: auto;
    margin-top: auto;
	z-index: 99;
}
.tagTitle {
	font-family: "HL", Arial, Helvetica, sans-serif;
	line-height: normal;
	font-weight: normal;
    font-style: normal;
	text-transform:lowercase;
	letter-spacing: 3px;
	font-size: 64px;
	height: 70px;
}
.headTitle {
	font-family: "HL", Arial, Helvetica, sans-serif;
	line-height: normal;
	font-weight: normal;
    font-style: normal;
	text-transform:lowercase;
	letter-spacing: 3px;
	font-size: 64px;
	margin-bottom: 120px;
}
.content {
	background: #414142;
	width: 960px;
	display:block;
	height: 530px;
	margin-bottom: 12px;
	float:left;
}
.colsBlockInner {
	width: 238px;
	display:block;
	float:left;
	margin-right:2px;
}
.content .inner {
	padding: 20px 0px 0px 40px;
}
.contactContent .inner {
	padding: 20px 0px 0px 0px;
	width: 682px;
	margin-left: 40px;
	float:left;
}
@media screen and (min-width: 980px) {
	.content {
		background: #414142;
		width: 960px;
		display:block;
		height: 530px;
		margin-bottom: 12px;
		float:left;
	}
	#blog {
		width: 720px;
		display:block;
		float:right;
	}
	.blogCart {
		width: 720px;
		background: #414142;
		margin-bottom: 2px;
		min-height: 150px;
		display:block;
	}
	.blogColsContent .inner {
		width: 455px;
		display:block;
		float:left;
	}
	.text {
		width: 235px;
		margin-bottom: 20px;
		margin-top: 50px;
		float:left;
	}
}
@media screen and (min-width: 740px) and (max-width: 981px) {
	.content {
		background: #414142;
		width: 720px;
		display:block;
		height: 530px;
		margin-bottom: 12px;
		float:left;
	}
	#blog {
		width: 720px;
		display:block;
		float:right;
	}
	.blogCart {
		width: 720px;
		background: #414142;
		margin-bottom: 2px;
		min-height: 150px;
		display:block;
	}
	.blogColsContent .inner {
		width: 455px;
		display:block;
		float:left;
	}
	.text {
		width: 235px;
		margin-bottom: 20px;
		margin-top: 50px;
		float:left;
	}
}
@media screen and (min-width: 0px) and (max-width: 740px) {
	.content {
		background: #414142;
		width: 480px;
		display:block;
		height: 530px;
		margin-bottom: 12px;
		float:left;
	}
	#blog {
		width: 480px;
		display:block;
		float:right;
	}
	.blogCart {
		width:480px;
		background: #414142;
		margin-bottom: 2px;
		min-height: 150px;
		display:block;
	}
	.blogColsContent .inner {
		width: 240px;
		display:block;
		float:left;
	}
	.des {
		display: none;
	}
	.text {
		width: 460px;
		margin-bottom: 20px;
		margin-top: 50px;
		float:left;
	}
}
#tagController {
	margin-bottom: 12px;
}
#taglistController {
	padding:12px 0;
	border-top: 1px solid #29292a;
	border-bottom: 1px solid #29292a;
}
.cols {
	width: 480px;
	float:left;
}
.cols li {
	width: 240px;
	float:left;
}
.block {
	float:left;
	width: 480px;
	height: 70px;
	display:block;
}
.right {
	text-align:right;
}
.tag {
	font-family: "HL", Arial, Helvetica, sans-serif;
	line-height: normal;
	font-weight: normal;
	letter-spacing: 2px;
    font-style: normal;
	margin-top: 37px;
	font-size: 25px;
	text-transform:lowercase;
}

a:hover {
	color: #666;
}

@media screen and (min-width: 0px) and (max-width: 740px) {
	.tagTitle {
		font-size: 44px;
	}
	.block {
		width: 240px;
		height: 50px;
	}
	.tag {
		float:right;
		margin-top: 27px;
		font-size: 18px;
		letter-spacing: 1px;
	}
}
@media screen and (min-width: 740px) and (max-width: 980px) {
	.tagTitle {

	}
	.block {
		width: 360px;
	}
	.tag {
	}
}
/* ________________________________________________________________________ */

/* LAYOUT */
/* ------------------------------------------------------------------------ */
@media screen and (min-width: 980px) {
	#all {
		width: 960px;
		margin: 40px auto;
		min-height: 500px;
		padding-bottom: 40px;
	}
	#section {
		width: 960px;
		display:block;
		padding-top: 40px;
		display: none;
	}
	#filter {
		width: 240px;
		min-height: 20px;
		display:block;
		float:left;
		position:fixed;
	}
}

@media screen and (min-width: 740px) and (max-width: 980px) {
	#all {
		width: 720px;
		margin: 40px auto;
		min-height: 500px;
		padding-bottom: 80px;
	}
	#section {
		width: 720px;
		display:block;
		padding-top: 40px;
		display: none;
	}
	#filter {
		width: 240px;
		min-height: 20px;
		display:block;
		margin-bottom: 40px;
	}
}

@media screen and (min-width: 0px) and (max-width: 740px) {
	#all {
		width: 480px;
		min-height: 480px;
		display:block;
		margin: 0 auto;
		padding-bottom: 80px;
	}
	#section {
		width: 480px;
		display:block;
		padding-top: 40px;
		display: none;
	}
	#filter {
		width: 240px;
		min-height: 20px;
		display:block;
		margin-bottom: 40px;
	}
}


#branding {
	width: 238px;
	margin-right:2px;
	height: 50px;
	display:block;
	float:left;
	position:relative;
	z-index: 99999;
	background:url(assets/branding_white.png) no-repeat left;
	
}

@media screen and (min-width: 0px) and (max-width: 980px) {
	#branding {
		width: 100%;
		float:none;
		height: 70px;
	}
}

#header {
	position:relative;
	z-index: 100;
	display:block;
}

#loaderPage {
	padding-top: 40px;
	display:block;
	font-family: "HL", Arial, Helvetica, sans-serif;
	line-height: normal;
	font-weight: normal;
    font-style: normal;
	text-transform:lowercase;
	letter-spacing: 3px;
	font-size: 64px;
	height: 70px;
	color: #666666;
}
/* ________________________________________________________________________ */

/* MENU */
/* ------------------------------------------------------------------------ */
h2 {
	font-family: "HL", Arial, Helvetica, sans-serif;
	font-size: 33px;
	letter-spacing: 0.04em;
	text-transform:lowercase;
	margin-bottom: 21px;
}
#contentMenu .menu .sortMenu a {
	font-family: "HL", Arial, Helvetica, sans-serif;
	font-size: 72px;
	letter-spacing: 0.1em;
}
#nav {
	position:relative;
	z-index: 9999;
}
#nav .menu .sortMenu {
	float:left;
	height: 50px;
	display:block;
	font-size: 13px;
}
#nav .menu .sortMenu .contentMenu {
	width: 238px;
	height: 50px;
	margin-right: 1px;
	display:block;
}
@media screen and (min-width: 0px) and (max-width: 740px) {
	#nav .menu .sortMenu {
		margin-bottom: 2px;
	}
	#nav .menu .sort_2 .contentMenu {
		width: 478px;	
	}
}
#nav .menu .titleMenu {
	padding: 20px 5px 0px 10px;
	display:block;
	color: #FFF;
		font-size: 14px;
	text-transform: lowercase;
		letter-spacing: 0.1em;

}

.nextCur {
	cursor: url("assets/cursor_right.png"), auto;
}
.prevCur {
	cursor: url("assets/cursor_left.png"), auto;
}

#nav .menu .titleMenu:hover {
	color: #FFF;
}

#nav .menu .sort_0 .contentMenu {
	background: #414142;
}

#nav .menu .sort_1 .contentMenu {
	background: #4b4b4d;
}

#nav .menu .sort_2 .contentMenu {
	background: #5b5c5e;
}
.summer .menu .contentMenu {
	background: #fff;
}
.submenu {
	width: 238px;
	background: #414142;
	display:none;
	z-index: 9999;
	position:relative;
			letter-spacing: 0.1em;

}
#submenu_104 {
	background: #4b4b4d;
}
.sortMenu:hover .submenu {
	display:block;
}/*
.sortMenu:hover .submenu {
	display:block;
}*/
.submenu ul {
	padding: 10px;
}
.specialSub {
	margin-bottom: 10px;
}
/* ________________________________________________________________________ */

/* BOOK MIN */
/* ------------------------------------------------------------------------ */
img {
	display:block;
}
.minBook {
	float:left;
	margin-right:2px;
	margin-bottom: 2px;
	width: 238px;
	letter-spacing: 0.1em;
	height: 188px;
	display:block;
}
.minBook .inner {
	font-family: "DR", Arial, Helvetica, sans-serif;
	background: url(assets/minbook_background.png) bottom right;
	width: 238px;
	height: 188px;
	display: none;
}
.titleMinBook {
	font-family: "HL", Arial, Helvetica, sans-serif;
	margin-bottom: 30px;
	font-size: 24px;
	line-height:normal;
}
.minBook .inner .contentDiv {
	padding: 15px;
}
.minBook img {
	display:block;
}
/* ________________________________________________________________________ */

/* BOOK SLIDER */
/* ------------------------------------------------------------------------ */
#introduction {
	cursor: url("assets/cursor_right.png"), auto;
}
.titleBook {
	font-family: "HL", Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	font-size: 30px;
	margin-bottom: 30px;
}

#introduction {
	position:absolute;
	background: url(assets/blackBackground.png);
	width: 960px;
	height: 530px;
	z-index: 10;
}
#wrapper {
	position:absolute;
	z-index: 0;
}
#fg_book, #fg_gallery {
	width: 960px;
	height: 530px;
	margin-bottom: 12px;
}
.assetbook {
	float:left;
	display:block;
	width: 960px;
	height: 530px;
}
.video, .swf {
	width: 960px;
	height: 530px;
	display:block;
	background: #000;
	position:relative;
	z-index: 999999;
}

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

.innerswf {
	padding: 107px 156px;
}
.animflash_small {
	width: 606px;
	height: 315px;
	position:absolute;
	display:block;
	overflow:hidden;
}
#flashContent {
	position:relative;
	z-index: 0;
}
#innerControllers {
	width: 960px;
	height: 530px;
	display:block;
	position:absolute;
	z-index: 10;
}
@media screen and (min-width: 980px) {
	#introduction, #fg_book, #fg_gallery, .assetbook, #innerControllers {
		width: 960px;
	}
	.innervideo {
		padding: 93px 185px;
	}
	.innerswf {
		padding: 107px 156px;
	}
	.descriptionBook {
	font-family: "HL", Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	font-size: 44px;
	line-height: 42px;
	font-weight:100;
	width: 500px;
	display:block;
	font-style: normal;
}
	
	.innervideo {
	padding: 93px 160px;
	width: 590px;
	height: 344px;
	display:block;
	}
	#introduction .inner {
	padding: 35px;
	width: 900px;
	}
}

@media screen and (min-width: 740px) and (max-width: 980px) {
	#introduction, #fg_book, #fg_gallery, .assetbook, #innerControllers  {
		width: 720px;
		overflow:hidden;
		display:block;
		height: 400px;
	}
	
	.innervideo {
		padding: 93px 65px;
	}
	.innerswf {
		padding: 107px 36px;
	}
	
	.assetbook img {
		width: 720px;
	}
	.descriptionBook {
	font-family: "HL", Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	font-size: 34px;
	line-height: 32px;
	font-weight:100;
	width: 500px;
	display:block;
	font-style: normal;
}
	.innervideo {
	padding: 73px 55px;
	width: 590px;
	height: 254px;
	display:block;
	}
	#introduction .inner {
	padding: 35px;
	width: 720px;
	}
}

@media screen and (min-width: 0px) and (max-width: 740px) {
	#introduction, #fg_book, #fg_gallery, .assetbook, #innerControllers  {
		width: 480px;
		overflow:hidden;
		display:block;
		height: 320px;
	}
	
	.innervideo {
		padding: 93px 0px;
	}
	.assetbook img {
		width: 580px;
		margin-left: -50px;
	}
	.innerswf {
		padding: 107px 156px;
	}
	.descriptionBook {
		font-family: "HL", Arial, Helvetica, sans-serif;
		letter-spacing: 0.1em;
		font-size: 24px;
		line-height: 26px;
		font-weight:100;
		width: 320px;
		display:block;
		font-style: normal;
	}
	.innervideo {
		padding: 40px 80px;
		width: 320px;
		height: 240px;
		display:block;
	}
	#introduction .inner {
		padding: 35px;
		width: 320px;
		display:block;
	}
}

/* ________________________________________________________________________ */

/* BOOK CONTROLLER */
/* ------------------------------------------------------------------------ */
#controllers {
	float:left;
}
#counter {
	width: 76px;
	height: 35px;
	display:block;
	background: #29292a;
	float:left;
}
#counter .inner {
	padding: 12px;
	text-align:right;
}
#controller {
	width: 168px;
	height: 35px;
	display:block;
	background: #29292a;
	float:left;
}
.controller {
	width: 84px;
	height: 35px;
	display:block;
	background: #29292a;
	float:left;
}

#prev {
	background:url(assets/prev.png) #29292a no-repeat;
}
#prev:hover {
	background:url(assets/prev.png) #383839 no-repeat;
}
#next {
	background:url(assets/next.png) #29292a no-repeat;
}

#next:hover {
	background:url(assets/next.png) #383839 no-repeat;
}
#barplus {
	width: 340px;
	height: 35px;
	display:block;
	float: right;
	background: #29292a;
}
#barplus .inner {
	padding: 12px;
}
.studioText {
	font-size: 28px;
	line-height: 28px;
	font-family: "HL", Arial, Helvetica, sans-serif;
	letter-spacing: 0.04em;
}

.contactText {
	width: 220px;
	margin-top:30px;
}
#backselection .inner {
	padding: 12px 12px 0 12px;
	text-align:center;
	text-transform:lowercase;
}
#backselection {
	float:right;
	background: #29292A;
	display:block;
	height: 35px;
	margin-left: 2px;
	color: #4B4B4D;
	text-align:center;
}

@media screen and (min-width: 980px) {
	#barplus {
		width: 320px;
	}
	#fg_contact input[type=text] {
		width: 430px;
		height: 22px;
		background:#6d6f71;
		margin-bottom: 20px;
		font-size: 14px;
		font-weight:100;
		font-style:normal;
		padding-left:5px;
	}
	#fg_contact textarea {
		width: 430px;
		height: 130px;
		min-width: 430px;
		max-width: 430px;
		min-height: 120px;
		font-family: "DR", Arial, Helvetica, sans-serif;
		font-size: 14px;
		padding-left:5px;
		max-height: 430px;
		background:#6d6f71;
		margin-bottom: 20px;
		display:block;
	}
	#map {
		float:right;
		width: 238px;
		height: 530px;
	}
	.contact, .contact p {
		font-size: 28px;
		line-height: 28px;
		font-family: "HL", Arial, Helvetica, sans-serif;
		letter-spacing: 0.04em;
	}
	.contact p {
	margin-bottom: 18px;
}
	.studioText {
		width: 319px;
		margin-top:30px;
	}
}

@media screen and (min-width: 740px) and (max-width: 980px) {
	#barplus {
		width: 220px;
	}
	#fg_contact input[type=text] {
		width: 430px;
		height: 22px;
		background:#6d6f71;
		margin-bottom: 20px;
		font-size: 13px;
		font-weight:100;
		font-style:normal;
	}
	#fg_contact textarea {
		width: 430px;
		height: 22px;
		min-width: 430px;
		max-width: 430px;
		min-height: 22px;
		font-family: "DR", Arial, Helvetica, sans-serif;
		font-size: 13px;
		max-height: 22px;
		background:#6d6f71;
		margin-bottom: 20px;
		display:block;
	}
	#map {
		display:none;
	}
	.contact, .contact p {
		font-size: 18px;
		line-height: 18px;
		font-family: "HL", Arial, Helvetica, sans-serif;
		letter-spacing: 0.08em;
	}
	
	.contact p {
		margin-bottom: 14px;
	}

	.studioImage img, .studioImage .person { 
		display:none;
	}
	.studioText {
		width: 440px;
		margin-top:30px;
		font-size: 26px;
		line-height: 26px;
	}
	
	
}

@media screen and (min-width: 0px) and (max-width: 740px) {
	
	#barplus {
		display:none;
	}
	.map {
		display:none;
	}
	
	#fg_contact {
		display:none;	
	}
	.studioImage img, .studioImage .person { 
		display:none;
	}
	.studioText {
		font-size: 16px;
		line-height: 18px;
		font-family: "DR", Arial, Helvetica, sans-serif;
		letter-spacing: 0.01em;
	}
	.contactText {
		width: 460px;
	}
	.contact p {
		margin-bottom: 10px;
		font-size: 16px;
		line-height: 20px;
	}
	.contact .maj {
		font-size: 26px;
		line-height: 26px;
		font-family: "HL", Arial, Helvetica, sans-serif;
		letter-spacing: 0.04em;
		float:left;
		width:240px;
		height: 200px;
	}
	
	#fg_contact {
		display:none;
	}
	.content .inner {
		padding: 20px;
	}
	.contactContent .inner {
		padding: 20px 0px 0px 0px;
		margin-left: 20px;
	}

}
/* ________________________________________________________________________ */

/* BLOG */
/* ------------------------------------------------------------------------ */
.blog_img {
	width: 240px;
	height: 150px;
	display:block;
}
.blog_img .inner {
	font-family: "DR", Arial, Helvetica, sans-serif;
	background: url(assets/minbook_background.png) bottom right;
	width: 240px;
	height: 150px;
	display: block;
}
.colsSubmenu {
	float:left;
	text-transform: lowercase;
}
.blogFilter, .date {
	font-size: 33px;
	line-height: 30px;
	font-family: "HL", Arial, Helvetica, sans-serif;
	letter-spacing: 0.04em;
}

.blogFilter {
	color: #666;
}

.blogFilter:hover {
	color: #FFF;
}

#filter .selected {
	color: #FFF;
}

.base {
	height: 150px;
}
.preview {
	margin-top: 40px;
}


.blogColsImage {
	width: 240px;
	display:block;
	float:right;
}
/* ________________________________________________________________________ */

/* TOGGLE */
/* ------------------------------------------------------------------------ */
.toggle {
	font-size: 12px;
	color: #ccc;
}
.toggleClose {
	width: 25px;
	height: 24px;
	float:right;
	margin: 5px;
	display:block;
	background:url(assets/close.png);
}
.toggleClose:hover {
	background:url(assets/closehover.png);
}
.serialAssets {
	margin-top: 50px;
	width: 480px;
	float:right;
}
.toggle, .toggleClose {
	cursor: pointer;
}
/* ________________________________________________________________________ */

/* TIP */
/* ------------------------------------------------------------------------ */

/* Standard tip styling (default ID is "mooimagetip") */
#mooimagetip {
    padding: 2px;
    background-color: #29292a;
	height: 118px;
	position:relative;
	z-index:999999;
}

/* Customized tip styling (our ID is "mytip") */
#mytip {
	height: 118px;
	position:relative;
	z-index:999999;
    }
/* Customized tip styling (our ID is "mytip") */
#nextProjectSlider {
	float:right;
	width: 50px;
	height: 50px;
	display:block;
	background:url(assets/nextproject.png);
	position:absolute;
}
@media screen and (min-width: 980px) {
	#nextProjectSlider {
		top:225px;
		left: 910px;
	}
}
@media screen and (min-width: 740px) and (max-width: 980px) {
	#nextProjectSlider {
		top:175px;
		left: 670px;
	}
}
@media screen and (min-width: 0px) and (max-width: 740px) {
	#nextProjectSlider {
		top:135px;
		left: 430px;
	}
}
/* ________________________________________________________________________ */

/* PAGE INCLUDE */
/* ------------------------------------------------------------------------ */
.studioImage {
	width: 430px;
	margin-right: 25px;
}

.intro {
	
}
.lineRight {
	float:right;
}
.line_1 {
	width:238px;
	height: 20px;
	display:block;
	float:left;
	background: #4b4b4d;
	margin-right: 2px;
}
.line_2 {
	width:238px;
	height: 20px;
	display:block;
	float:left;
	background: #5b5c5e;
}
.textPerson {
	width: 180px;
	float:left;
	margin-right: 20px;
	margin-top: 20px;
}
.imgPerson {
	margin-bottom: 2px;
}

#fg_contact {
	margin-top: 40px;
}
#fg_contact input[type=submit] {
	background:none;
	font-size: 22px;
	font-weight:100;
	float:left;
	font-style:normal;
}

#contactContent {
	float:left;
}
#innerControllers .controllerSlider {
	width: 480px;
	height: 530px;
	display:block;
	float:left;
}
#nextSlider {
	cursor: url("assets/cursor_right.png"), auto;
	/*background: url("assets/cache.png");*/
	display:block;
}
#prevSlider {
	cursor: url("assets/cursor_left.png"), auto;
	/*background: url("assets/cache.png");*/
	display:block;
}
#fg_book #nextProject {
	display:block;
	/*background: url("assets/cache.png");*/
	/*cursor: url("assets/cursor_right.png"), auto;*/
}
.mask {
	width: 960px;
	height: 530px;
	display:block;
	position:absolute;
	z-index: 99;
}
#map {
	float:right;
	width: 238px;
	height: 530px;
}
.entrance {
	top: 50px;
	padding-top: 20px;
}