/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* custom fonts */
@font-face {
	font-family: "GillSans";
	src: url('../fonts/gillb.otf');
}

@font-face {
	font-family: "GillSans-italic";
	src: url('../fonts/gillb-italic.otf');
}

html, body {
	height: 100%
}

body {
	margin: 0;
	padding: 0;
	background: transparent;
	font-family: "GillSans", Helvetica, Arial, sans-serif;
	font-size: 16px;
	min-height: 750px;
}

h1, h2 {
	font-weight: normal;
}

a, a:link, a:visited {
	color: #DDD;
}

a:hover {
	color: #FFF;
	text-decoration: none;
}

#dz_main,
#dz_about {
	position: fixed;
	left: 285px; /*585px;*/
	top: 0;
	width: 100%;
	height: 100%;
}

#dz_main img.dz_preview{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	-ms-interpolation-mode: bicubic;
}

#dz_loader {
	position: absolute;
	z-index: 10;
	width: 50px;
	height: 50px;
	padding: 0;
	top: 0;
	left: 0;
	color: #666;
	display: none;
	background: #999 url(../images/dz-loader.gif) center center no-repeat;
}

#loader img {
	margin-right: 20px;
}

#dz_container {
	position: relative;
	margin: 0;
	width: 320px; /*700px;*/
	padding: 0;
	z-index: 2;
	background: url(../images/dz-back_menu.png) repeat-y 0 0;
	height: 100%;
	min-height: 750px;
	overflow:hidden;
	left: -20px;
} 

#dz_container .inner {
	position: relative;
	width: 255px; /*585px;*/
	top: 0;
	float: left;
	margin-left: 30px;
}

#dz_container .content {
	clear: both;
	text-algin: center;
}

#dz_container .content .logo {
	padding: 0;
	margin: 58px 0 5px 38px;
}

#dz_container .content h1,
#dz_container .content h2,
#dz_small .header h2 {
	padding: 0;
	margin: 0 0 0 38px;
	color: #FFF;
	font-family: "GillSans", Helvetica, Arial, sans-serif;
	font-size: 20px;
}

#dz_container .content h2,
#dz_small .header h2 {
	padding: 0 0 15px 3px;
	font-size: 15px;
	font-family: "GillSans-italic", Helvetica, Arial, sans-serif;
	color: #FFF;
}

#dz_container .content h1 {
	display: none;
}

#dz_container .content h1 a {
	text-decoration: none;
	color: #FFF;
}

#dz_container .content p,
#dz_small .header p {
	padding: 5px;
	margin: 0 10px 10px 10px;
	color: #DDD;
	font-family: "GillSans", Helvetica, Arial, sans-serif;
	line-height: 26px;
}

#dz_container img,
#dz_small .header img {
	border: none;
}

#dz_back {
	position: absolute;
	cursor: pointer;
	z-index: 10;
	width: 40px;
	height: 40px;
	padding: 0;
	top: 50%;
	margin-top: -25px;
	left: 0;
	background: transparent url(../images/dz-arrow_back.png) 0 0 no-repeat;
	display: none;
}

#dz_back:hover {
	background-position: -40px 0;
}

#dz_next {
	position: fixed;
	cursor: pointer;
	z-index: 10;
	width: 40px;
	height: 40px;
	padding: 0;
	top: 50%;
	margin-top: -25px;
	right: 0;
	background: transparent url(../images/dz-arrow_next.png) -40px 0 no-repeat;
	display: none;

}

#dz_next:hover {
	background-position: 0px 0;
}


/*** NAVIGATION ***/
#dz_menu {
	position: absolute;
	width: 100%;
	top: 145px;
	left: 0px;
	z-index: 9;
}

.dz_navigation {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.dz_navigation li  {
	float: left;
	clear: both;
	margin-bottom: 8px;
	position: relative;
	width: 100%;
}

.dz_navigation li .dz_link {
	color: #FFF;
	float: left;
	position: relative;
	line-height: 28px;
	padding: 0;
	width: 228px;
	border-bottom: 1px solid #FFF;
	margin-bottom: 3px;
	margin-left: 28px;
}

.dz_navigation li .dz_title,
.dz_navigation li#about-me .dz_title_about {
	color: #FFF;
	text-transform: uppercase;
	cursor: pointer;
	float: left;
	padding: 0;
	font-size: 18px;
	width: 100%;
}

a.active,
.dz_navigation li.dz_current_album .dz_title,
.dz_navigation li .dz_title:hover {
	color: #32FFFF !important;
}

.dz_navigation li .dz_arrow_down,
.dz_navigation li .dz_arrow_up {
	position: absolute;
	right: 0;
	top: 6px;
	width: 18px;
	height: 13px;
	cursor: pointer;
	background: transparent url(../images/dz-arrow_menu.png) 0 -13px no-repeat;
}

.dz_navigation li .dz_arrow_up {
	background-position: 0 0;
}

.dz_navigation li#about-me .dz_arrow_left {
	position: absolute;
	left: 0;
	top: 3px;
	width: 13px;
	height: 18px;
	cursor: pointer;
	background: transparent url(../images/dz-arrow_about.png) 0 0 no-repeat;	
}

.dz_navigation #about-link {
	color: #FFF;
	text-decoration: none;
	float: right;
}

.dz_navigation #about-link:hover {
	color: #32FFFF;
}

.dz_navigation li#about-me .dz_title_about {
	text-align: right;
}

#dz_menu .social-links {
	margin: 50px 0 25px 38px;
	padding-left: 0;
	float: left;
	clear: both;
}

.menu .social-links p {
	margin-left: 20px;
	padding: 6px 10px 5px 0;
}

.menu .social-links p a {
	font-size: 16px;
	font-family: "GillSans-italic", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #FFF;
}

.menu .social-links .share-link {
	float: none;
	display: inline-block;
	height: 32px;
	width: 32px;
	cursor: pointer;
	padding: 0 8px 0 0;
}

.menu .social-links .share-link .share-button {
	background: transparent url(../images/bt-behance.png) 0 0 no-repeat;
	width: 32px;
	height: 32px;
	line-height: 32px;
	float: left;
	overflow: hidden;
}

.menu .social-links #bt-in .share-button,
.menu .social-links #bt-in-small .share-button {
	background: transparent url(../images/bt-in.png) 0 0 no-repeat;
}

.menu .social-links #bt-fb .share-button,
.menu .social-links #bt-fb-small .share-button {
	background: transparent url(../images/bt-fb.png) 0 0 no-repeat;
}

.menu .social-links #bt-tw .share-button,
.menu .social-links #bt-tw-small .share-button {
	background: transparent url(../images/bt-tw.png) 0 0 no-repeat;
}
.menu .social-links #bt-be .share-button
.menu .social-links #bt-behance .share-button {
	background: transparent url(../images/bt-behance.png) 0 0 no-repeat;
}

.menu .social-links #bt-pinterest .share-button {
	background: transparent url(../images/bt-pinterest.png) 0 0 no-repeat;
}


.menu .social-links .share-link .share-button:hover {
	background-position: 0 -32px !important;
}

.dz_wrapper {
	display: none;
	position:  absolute;
    width: 100%;
    height: 162px;
    overflow-y: hidden;
	top: 40px;
    left: 0px;
}

.dz_thumbs {
    height: 160px; /* 148px image + 6px margin-top + 6px margin-bottom */
    margin:  0;
	background-color: #999;
	opacity: 0.9;
	filter: progid: DXImageTransform.Microsoft.Alpha(opacity=70);
	margin-left: 28px;
}

.dz_thumbs img {
    float: left;
    margin: 0;
	margin: 6px 3px;
    cursor: pointer;
}

.dz_thumbs img:first-child {
	margin-left: 6px;
}

.dz_text {
	display: none;
}
 
#dz_info_box {
	position: absolute;
	right: 50px;
	top: 50px;
	width: 425px;
	background-color: #999;
	opacity: 0.95;
	color: #FFF;
	padding: 10px 20px;
	font-size: 18px;
	line-height: 20px;
	display: none;
	z-index: 10;
}

#dz_info_box h3 {
	color: #FFF;
	text-decoration: normal;
	font-weight: normal;
	margin: 0;
	padding: 15px 0;
}

#dz_info_box p {
	margin: 0;
	padding: 10px 0;
	font-family: "GillSans-italic", Helvetica, Arial, sans-serif;
}

#dz_close,
#dz_info {
	position: absolute;
	right: 50px;
	top: 50px;
	background: #999 url(../images/dz-info.png) center center no-repeat;
	width: 39px;
	height: 40px;
	z-index: 10;
	cursor: pointer;
	display: none;
}

#dz_close {
	background: transparent url(../images/dz-close.png) center center no-repeat;
}

#dz_watemark {
	position: absolute;
	left: 42px;
	top: 32px;
	background: transparent url(../images/dz-watemark.png) 0 0 no-repeat;
	width: 187px;
	height: 28px;
	z-index: 10;
	cursor: pointer;
	display: none;
}

#dz_home {
	display: none;
}

#dz_keys {
	position: absolute;
	right: 313px; /*28px;*/
	bottom: 50px;
	width: 92px;
	height: 46px;
	z-index: 10;
}

#dz_keys a {
	text-indent: -999px;
	width: 22px;
	height: 22px;
	background: url(../images/dz-keys.png) no-repeat 0 0;
	overflow: hidden;
	position: absolute;
}


#dz_keys a.key_up {
	left: 24px;
	text-indent: -999px;
	background-position: -24px 0;
}

#dz_keys a.key_up:hover,
#dz_keys a.key_up.hover {
	background-position: -24px -48px;
}

#dz_keys a.key_down {
	left: 24px;
	top: 24px;
	background-position: -24px -24px;
}

#dz_keys a.key_down:hover,
#dz_keys a.key_down.hover {
	background-position: -24px -72px;
}

#dz_keys a.key_left {
	left: 0px; 
	top:24px;
	background-position: 0px -24px;
}

#dz_keys a.key_left:hover,
#dz_keys a.key_left.hover {
	background-position: 0px -72px;
}

#dz_keys a.key_right {
	left: 46px;
	top: 24px;
	background-position: -46px -24px;
	width: 24px;
}

#dz_keys a.key_right:hover,
#dz_keys a.key_right.hover {
	background-position: -46px -72px;
}

/*** ABOUT ***/
#dz_about {
	position: absolute;
	left: -600px;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/dz-back_about.jpg) repeat;
	min-height: 750px;
	display: none;
}

#dz_about .inner {
	position: relative;
}

#dz_about #dz_portrait {
	position: absolute;
	background: url(../images/dz-me.jpg) no-repeat 0 0;
	width: 557px;
	height: 740px;
	overflow: hidden;
	left: 385px;
	top: 8px;
	display: none;
}

#dz_about .content,
#dz_about .content h2,
#dz_about .content .item,
#dz_about .content .sep {
	float: left;
	clear: both;	
}

#dz_about .content {
	position: relative;
	margin-top: 20px;
}

#dz_about h2 {
	width: 240px;
	margin-left: 156px;
	font-size: 30px;
	border-bottom: 2px solid #666;
	margin: 40px 0 19px 156px;
	padding: 0;
}

#dz_about .item {
	width: 396px; /*240p + 156px*/
}

#dz_about .sep {
	border-top: 2px solid #FFF;
	padding-top: 14px;
	margin-top: 4px;
	width: 240px;
	margin-left: 156px;
}

#dz_about .item .label {
	float: left;
	clear: both;
	text-align: right;
	font-size: 14px;
	line-height: 18px;
	height: 18px;
	padding: 0 16px 3px 0;
	width: 140px; /*156px - 16px (padding-right)*/
}

#dz_about .item .text {
	float: left;
	font-family: "GillSans-italic", Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 18px;
	height: 18px;
	color: #666;
	width: 240px;
}

#dz_about .item .text a {
	color: #333;
}

#dz_about .item .text a:hover {
	color: #999;
}

/*** SMALL SCREENS ***/
#dz_small {
	background-color: #111;
	padding: 20px;
	display: none;
}

#dz_small .header,
#dz_small .menu .social-links {
	margin: 0 auto;
	text-align: center;
}

#dz_small .header {
	margin-top: 20px;
}

#dz_small .header h2 {
	padding: 0 0 25px 0;
	margin-left: 0;
}

#dz_small .menu {
	display: block;
}

#dz_small .menu .dz_navigation {
	margin: 0 auto 20px;
	width: 240px;
	display: block;
	clear: both;
}

#dz_small .menu li a.menu-item {
	background: transparent url(../images/dz-arrow_menu.png) right -13px no-repeat;
    cursor: pointer;
    float: left;
	line-height: 28px;
    margin: 0;
    padding: 0;
	border-bottom: 1px solid #FFF;
	margin-bottom: 6px;
	text-decoration: none;
    width: 100%;
}

#dz_small .menu li a.menu-item .dz_button {
	color: #FFF;
	text-transform: uppercase;
	cursor: pointer;
	float: left;
	width: 100%;
	font-size: 18px;
	padding: 0;
}

#dz_small .menu li a img {
	width: 240px;
}

#dz_small .menu .social-links {
	padding-top: 33px;
	display: block;
	clear: both;
}

/* MEDIA QUERIES */
@media only screen and (min-width: 1000px) {
	#dz_main img.dz_preview{
		min-width: 1080px;
	}
}

@media only screen and (max-width: 540px) {
	#dz_keys {
		display: none;
	}
}

@media only screen and (max-width: 400px) {
	body {
		background-color: #111;
		min-height: 0;
	}
	
	#dz_menu,
	#dz_main,
	#dz_about,
	#dz_container,
	#dz_home {
		display: none !important;
	}
	
	#dz_small {
		display: block !important;
	}
	
	.menu .social-links p {
		margin-left: 0;
	}

}