/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Gafata);
@import url(http://fonts.googleapis.com/css?family=Esteban);

* {
  box-sizing: border-box;
}

BODY {
	padding:0; margin:0;
	font-family:Helvetica, Arial, Verdana, sans-serif;
	font-size:12px;
	color:#ffffff;
	background-color:#343434;
	float:none;
	height:100%;
}

h2, h3 {font-family: 'Gafata', Helvetica, Arial, sans-serif; display:inline-block; padding:0; margin:0;}

p {line-height:20px;}

a {text-decoration:none; color:#ff9000; font-weight:bold;}
a:hover {color:#fff;}

img {border:0px;}

div.error {padding:20px; min-height:300px;}

div#wrapper {padding:0; margin:0;}

div#headerWrapper {margin-bottom:0px;}

div#header {margin:0; height:80px; background-color:#343434; position:relative;}

div#header div#outerTitle {background-color:#ff0000; margin-top:60px;}
div#header div#andy {background-color:#181818; text-align:right; float:left; padding:0px 0px 0px 10%;}
div#header div#andy p {text-align:right; padding:20px 10px 20px 0px; margin:0;}
div#header div#fine {text-align:left; float:left;}
div#header div#fine p {text-align:right; padding:20px 0px 20px 10px; margin:0;}

div#header p {font-family: 'Esteban', serif; font-size:30px; }
div#header p strong {font-family: 'Gafata', sans-serif; font-size:34px;}
	div#header p a {color:#fff;}
	div#header p a:hover {color:#aabb63;}
	div#header p a strong {color:#aabb63;}
	div#header p a:hover strong {color:#fff;}
	

div#content {background-color:#181818;}

/* Titles */

body#about h1.about, body#gallery h1.gallery {display:none;}

body#home h1.home {width:336px; height:285px; background-image:url('../imgs/title_showcase.jpg'); background-repeat:no-repeat; float:left; margin-top:120px;}
body#home h1.home span {display:none;}

body#contact h1.contact {font-family: 'Open Sans', Helvetica, Arial, sans-serif; color:#ffffff; font-size:20px; float:left; margin:0;}

/* Gallery page */

div#page-nav {display:none;}

#infscr-loading {
    text-align: center;
    z-index: 100;
    position: fixed;
    left: 45%;
    bottom: 40px;
    width: 200px;
    padding: 10px;
    background: #000;
    opacity: 0.8;
    color: #FFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

div#container {margin:auto; position:relative; padding:20px 0;}

.instruction {
	font-family: 'Esteban', serif; font-size:20px; line-height:24px; padding:40px; width:300px; text-align:center;}

div.box div {padding:0px; position:relative;}
.box img {padding:5px 0px 5px 5px; margin:0; border:0; display:inline;}

div.group {padding:0px;}

.smallPortrait {display:inline;}
	.smallPortrait img {width:200px; padding-right:5px;}
	div.group .smallPortrait img {width:180px;}
.mediumPortrait {display:inline;}
	.mediumPortrait img {width:300px; padding-right:5px;}
	div.group .mediumPortrait img {width:280px;}
.largePortrait {display:inline;}
	.largePortrait img {width:400px; padding-right:5px;}
	div.group .largePortrait img {width:380px;}
.smallLandscape {display:inline;}
	.smallLandscape img {width:300px; padding-right:5px;}
	div.group .smallLandscape img {width:280px;}
.mediumLandscape {display:inline;}
	.mediumLandscape img {width:400px; padding-right:5px;}
	div.group .mediumLandscape img {width:380px;}
.largeLandscape {display:inline;}
	.largeLandscape img {width:600px; padding-right:5px;}
	div.group .largeLandscape img {width:580px;}
	


div.box div:hover img {}
div.box div:hover img {opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */}

div.box div a {display:inline-block; position:relative;}
div.box div span.click {display:none;}
div.box div:hover span.click {display:block; position:absolute; margin:0px; padding:10px; width:100%; top:10%; text-align:center; font-family: 'Esteban', serif; font-size:20px;}
div.box div:hover span.click strong {font-family: 'Gafata', sans-serif; font-size:34px;}

	
	/* Navigation */

	div#nav {font-family: 'Gafata', sans-serif; position:absolute; bottom:0; margin:auto; width:98%; text-align:center;}

	div#nav ul {padding:0px; margin:0px 0px 40px 0px;}
	div#nav ul li {float:right; list-style-type:none; font-size:18px; color:#ececec;}
	div#nav ul li a {color:#ececec; padding:20px 10px 10px 10px; margin:0 5px; background-color:#181818;}
	div#nav ul li a:hover {background-color:#fff; color:#181818;}

	body#gallery div#nav ul li.gallery {font-size:30px;}
	body#gallery div#nav ul li.gallery a {font-size:30px;}
	
	body#about div#nav ul li.about {font-size:30px;}
	body#about div#nav ul li.about a {font-size:30px;}

	body#contact div#nav ul li.contact {font-size:30px;}
	body#contact div#nav ul li.contact a {font-size:30px;}


/* About page */

body#about div#content {height:700px; padding:10px; margin:0; background-image:url('../imgs/bg_about.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center; border-top:20px solid #181818; position:relative;}

body#about div#intro {width:40%; padding:20px; position:absolute; bottom:20px; left:2%; background-color:#181818; color:#fff;}



/* Image Page */

h2.process {padding:0 0 0 20px;}

div.imageFrame {text-align:center;}

div#landscape {}
div#portrait {}
div#imageWrapper {position:relative;}

div#content div#landscape h2, div#content div#portrait h2 {font-size:24px; line-height:30px;}
div#content div#landscape h3, div#content div#portrait h3 {font-size:14px; color:#888;}

div#content div#landscape h2, div#content div#portrait h2 {margin:20px auto 0 auto; text-align:center;}
div#content div#landscape h3, div#content div#portrait h3 {margin:10px auto 0 auto; text-align:center;}

div#content div#landscape p, div#content div#portrait p {text-align:center;}

div#content div#landscape img.mainImage {display:block; padding:0; margin:auto;}
div#content div#portrait img.mainImage {display:block; padding:0; margin:auto; max-height:900px;}

div#content div#landscape a span, div#content div#portrait a span  {display:none;}
div#content div#landscape a:hover span, div#content div#portrait a:hover span {font-family: 'Esteban', serif; display:block; position:absolute; bottom:40px; left:30%; right:30%; text-align:center; margin:auto; background-color:#000; color:#fff; padding:20px; font-size:20px;}


span.new {position:absolute; top:10px; left:0px; background-color:#ffffff; color:#888; padding:4px 4px 4px 20px;}
a:hover span.new {background-color:#888; color:#ffffff;}


/* share */
div#share {padding:0px; margin:auto; text-align:center;}
div#share div {padding:10px;}

div#comments {margin:40px 10px 10px 10px; padding:10px; background-color:#222;}

/* image process */

	div#imageProcess {position:relative; height:155px; margin-left:0px; margin-right:0px; margin-top:20px;}

	div#imageProcess ul {padding:0; margin:0;}
	div#imageProcess li {list-style-type:none; float:left;}

	div#imageProcess a {padding:0 20px 0 20px; margin:0; float:left; display:inline;}
	div#imageProcess img {padding:0; margin:0; border:2px solid #efefef;float:left; display:inline;}


/* Footer */

div#social {width:250px; float:left; clear:left; margin:0 0 10px 20px;}
div#social img {margin:0 20px 0 0;}

div#footer {color:#857c73; height:100px; clear:both; margin:0px 0 20px 0;}
div#footer a {color:#857c73;}
div#footer a:hover {color:#ff7f00;}

#footer #copyright {font-size:10px; padding:40px 10px 10px 10px; clear:both;}

#footer #smallprint {margin:4px 0px 30px 0px; float:left; clear:both;}
#footer #smallprint a {font-size:10px; margin:0px 10px 0 0; background-color:#181818; color:#ececec; padding:5px; clear:left;}
#footer #smallprint a:hover {color:#ff7f00;}

#footer p.yahuh {float:right;}

/* newsletter form bottom right corner */

#newsletter {float:right;}
#subscribed p {padding:0px 20px 40px 10px; color:#ececec;}

#newsletter form {margin:0px; padding:0px;}

#newsletter label {float:left; padding:10px 4px 10px 10px; font-weight:bold;display:none;}
#newsletter form input {padding:8px; margin:0px 5px 0 5px; font-size:12px; float:left; color:#181818;}
#newsletter form input.button {padding:8px; margin:4px;}
#newsletter #confirmation {font-weight:bold; padding:4px 20px 3px 0px;}

#newsletter form p {font-weight:bold; margin:8px 0 0 8px; color:#ececec;}

/* newsletter unsubscribe form */

#unnewsletter {float:left; height:56px;}

#unnewsletter form {margin:0px; padding:0px;}




/* Contact */

body#contact div#content {width:100%; height:700px; padding:0px; margin:0; background-image:url('../imgs/bg_contact.jpg'); background-repeat:no-repeat; background-size:cover; border-top:20px solid #181818; position:relative;}

body#contact div#information {width:80%; padding:20px; margin:auto; bottom:20px; background-color:#181818; position:absolute;}

body#contact div#information p.introduction {width:30%; padding:10px; float:left; clear:left;}

body#contact div#information p.email {float:left; margin:10px 0px 0px 20px;}
body#contact div#information p.social {float:left; margin:10px 0px 0px 20px;}

p.call strong, p.email strong, p.social strong {font-size:24px; font-family: 'Open Sans', Helvetica, Arial, sans-serif;}

/* General pages */

body#error div#content, body#unsubscribe div#content, body#privacy div#content {width:100%; height:700px; padding:10px; margin:0; background-image:url('../imgs/bg_error.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; border-top:20px solid #181818;}
body#error h1, body#unsubscribe div#content h1, body#privacy div#content h1 {font-family: 'Open Sans', Helvetica, Arial, sans-serif;}
body#error h1 strong, body#unsubscribe div#content h1 strong, body#privacy div#content h1 strong {font-size:30px;}

body#error div#intro, body#unsubscribe div#content div#intro, body#privacy div#content div#intro {width:400px; padding:10px; margin:200px -10px 0px 0px; background-color:#181818; float:right;}


/* Shows message to browsers with no javascript */

noscript p {font-weight:bold; padding:6px; text-align:center;}
noscript p strong {font-size:16px;}

/* Re-usables */

.cB {clear:both;}
.fR {float:right;}
.fL {float:left;}
.fC {float:center;}
.dN {display:none;}


@media only screen and (max-width: 1024px) {
	
.instruction {
	padding:20px; width:200px; text-align:center;}

	
.box {padding:0px;}

div.box div.smallPortrait :hover span.click {font-size:12px; top:0px;}
div.box div.mediumPortrait:hover span.click {font-size:14px; top:0px;}
div.box div.largePortrait:hover span.click {font-size:20px; top:10%;}
div.box div.smallLandscape:hover span.click {font-size:12px; top:0px;}
div.box div.mediumLandscape:hover span.click {font-size:14px; top:0px;}
div.box div.largeLandscape:hover span.click {font-size:20px; top:10%;}

div.box div.smallPortrait:hover span.click strong {display:none;}
div.box div.mediumPortrait:hover span.click strong {font-size:16px;}
div.box div.largePortrait:hover span.click strong {font-size:16px;}
div.box div.smallLandscape:hover span.click strong {display:none;}
div.box div.mediumLandscape:hover span.click strong {display:none;}
div.box div.largeLandscape:hover span.click strong {font-size:16px;}
	
	.smallPortrait img {width:60px;}
	.mediumPortrait img {width:140px;}
	.largePortrait img {width:200px;}
	.smallLandscape img {width:140px;}
	.mediumLandscape img {width:200px;}
	.largeLandscape img {width:260px;}
	
	
		.smallPortrait img {width:100px;}
		div.group .smallPortrait img {width:80px;}
		.mediumPortrait img {width:140px;}
		div.group .mediumPortrait img {width:120px;}
		.largePortrait img {width:200px;}
		div.group .largePortrait img {width:180px;}
		.smallLandscape img {width:140px;}
		div.group .smallLandscape img {width:120px;}
		.mediumLandscape img {width:200px;}
		div.group .mediumLandscape img {width:180px;}
		.largeLandscape img {width:360px;}
		div.group .largeLandscape img {width:340px;}
	
	/* About page */

	body#about div#intro {width:38%; position:absolute;}

}

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

	/* Image page */
	
	div#imageWrapper img {width:90%;}	

}


@media only screen and (max-width: 768px) {
	
.box {padding:10px;}

div#header {height:130px;}

div#header div#outerTitle {margin-top:10px;}

div#header p {font-family: 'Esteban', serif; font-size:30px; }
div#header p strong {font-family: 'Gafata', sans-serif; font-size:34px;}
	
	/* About page */

	body#about div#intro {width:100%; left:0; bottom:0;}
	
	/* Image page */
	
	div#imageWrapper img {width:90%;}
	

	/* Contact page */

	body#contact div#information {width:100%; bottom:0px;}

	body#contact div#information p.introduction {width:40%;}
}

@media only screen and (max-width: 480px) {
	
	div#header {height:110px;}

	div#header p {font-size:22px;}
	div#header p strong {font-size:26px;}
	
.box {padding:0px;}
.box img {padding:0; margin:0; border:0;}

#infscr-loading {
    left: 15%;
}
	
.smallPortrait img {width:320px;}
div.group .smallPortrait img {width:320px;}
.mediumPortrait img {width:320px;}
div.group .mediumPortrait img {width:320px;}
.largePortrait img {width:320px;}
div.group .largePortrait img {width:320px;}
.smallLandscape img {width:320px;}
div.group .smallLandscape img {width:320px;}
.mediumLandscape img {width:320px;}
div.group .mediumLandscape img {width:320px;}
.largeLandscape img {width:320px;}
div.group .largeLandscape img {width:320px;}

div.group {padding:0px;}
.instruction {padding:20px; width:310px; text-align:center;}

div.box div.smallPortrait:hover span.click, div.box div.mediumPortrait:hover span.click, div.box div.largePortrait:hover span.click, div.box div.smallLandscape:hover span.click, div.box div.mediumLandscape:hover span.click, div.box div.largeLandscape:hover span.click {display:block; font-size:20px; top:10%;}
div.box div.smallPortrait:hover span.click strong, div.box div.mediumPortrait:hover span.click strong, div.box div.largePortrait:hover span.click strong, div.box div.smallLandscape:hover span.click strong, div.box div.mediumLandscape:hover span.click strong, div.box div.largeLandscape:hover span.click strong {display:block; font-size:34px;}

/* About page */

body#about div#content {height:600px; padding:1px; margin:0; background-image:url('../imgs/bg_about.jpg'); background-repeat:no-repeat; background-position:center -80px ;}

body#about div#intro {font-size:10px;}


/* Contact page */

body#contact div#information {width:100%; padding:10px;}

body#contact div#information p.introduction {width:100%; padding:10px;}

body#contact div#information p.email {margin:5px;}
body#contact div#information p.social {margin:5px;}

p.call strong, p.email strong, p.social strong {font-size:24px; font-family: 'Open Sans', Helvetica, Arial, sans-serif;}


/* Navigation */

div#nav {font-family: 'Gafata', sans-serif; position:absolute; bottom:0; margin:auto; width:98%; text-align:center;}

div#nav ul {padding:0px; margin:0px 0px 20px 0px;}
div#nav ul li {float:right; list-style-type:none; font-size:18px; color:#ececec;}
div#nav ul li a {color:#ececec; padding:10px 5px 5px 5px; margin:0 5px; background-color:#181818;}
div#nav ul li a:hover {background-color:#fff; color:#181818;}

body#gallery div#nav ul li.gallery {font-size:30px;}
body#gallery div#nav ul li.gallery a {font-size:30px;}

body#about div#nav ul li.about {font-size:30px;}
body#about div#nav ul li.about a {font-size:30px;}

body#contact div#nav ul li.contact {font-size:30px;}
body#contact div#nav ul li.contact a {font-size:30px;}

/* newsletter form bottom right corner */

#newsletter form input {width:80%; margin:10px; float:center;}
	
}