@charset "UTF-8";
/*
Theme Name: 	Jason Zambelli Photography
Description: 	This theme was designed and coded by Kitten Lane.
Author: 		Nichole @ Kitten Lane
Author URI: 	https://www.kittenlane.com.au
Version:        2.0
*/ 

/*-------------------------------
/*! normalize.css 2011-11-04T15:38 UTC - http://github.com/necolas/normalize.css */
/* HTML5 display definitions */
/*-------------------------------*/

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display: block;}
audio, canvas, video {display: inline-block; *display: inline; *zoom: 1;}
audio:not([controls]) {display: none;}
[hidden] {display: none;}
/* Base */
html {font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body {margin: 0;}
body, button, input, select, textarea {font-family: sans-serif;}
a {outline: 0;}
h1 {font-size: 2em;}
h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0; font-weight: normal;}
abbr[title] {border-bottom: 1px dotted;}
b, strong {font-weight: bold;}
blockquote, blockquote p {margin: 0; padding: 0;}
dfn {font-style: italic;}
mark {background: #000; color: #f5f5f5;}
pre, code, kbd, samp {font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em;}
pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word;}
q {quotes: none;}f
q:before, q:after {content: ''; content: none;}
small {font-size: 75%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
ul, ol {margin: 0; padding: 0;}
dd {margin: 0 0 0 40px;}
nav ul, nav ol {list-style: none; list-style-image: none;}
img {border: 0; padding: 0; -ms-interpolation-mode: bicubic;}
svg:not(:root) {overflow: hidden;}
figure {margin: 0;}
form {margin: 0;}
fieldset {border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend {border: 0; *margin-left: -7px;}
button, input, select, textarea {font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;}
button, input {line-height: normal;}
button, input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer; -webkit-appearance: button; *overflow: visible;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0;}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
textarea {overflow: auto; vertical-align: top;}
table {border-collapse: collapse; border-spacing: 0;}

/*-------------------------------
/* FONTS */
/*-------------------------------*/

@font-face {
  font-family: 'Didot Headline';
  src: url('fonts/didotheadline.woff2') format('woff2'),
  url('fonts/didotheadline.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/*-------------------------------
/* CUSTOM STYLES */
/*-------------------------------*/

html, body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #000;
	color: #f5f5f5;
	font: 12px/1.6em "kozuka-gothic-pro", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	height: 100%;
	letter-spacing: 0px;
}

.container {
	/*margin: 0 auto;
	width: 94.51%;
	padding: 3.27% 2.22% 2.22% 3.27%;
	overflow: auto;
	position: relative;
	display: none;*/
	padding: 30px 30px 33px 30px;
	box-sizing: border-box;
	height: 100%;
	/*display: none;*/
}

.gallery .container {
	/*padding: 48px 288px;
	width: auto;*/
	width: 100%;
	height: 100%;
	padding: 0;
	text-align: center;
	font-size: 10px;
	color: #000;
}

aside {
	width: 200px;
	padding-right: 30px;
	float: left;
	height: 100%;
	position: relative;
}

nav {
  font-size: 1.25em;
}

nav a,
.flex-caption {
  letter-spacing: 0.5px;
  opacity: 0.8;
  -webkit-transition: opacity 250ms;
  -moz-transition: opacity 250ms;
  -ms-transition: opacity 250ms;
  -o-transition: opacity 250ms;
  transition: opacity 250ms;
}

nav a:hover {
  opacity: 1;
}

section {
	margin-left: 230px;
	height: 100%;
}

section.contact {
  padding-top: 6.75em;
}

.gallery-nav {
	position: absolute;
	bottom: 0;
	left: 0;
	line-height: 1;
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6, nav, .slides {
  font-family: "Didot Headline", Georgia, "Times New Roman", serif;
  font-weight: 400;
}

h1 {
	/*background: url(../images/logo.png) center center no-repeat;
	background-size: contain;
	width: 107px;
	height: 46px;
	text-indent: -99999px*/
	font-size: 2.1em;
	line-height: 1em;
  /*margin: -4px 0 0 2px;*/
  margin: 0 0 0 2px;
}
/*
h1.logo {
	background: url(../images/JasonZambelli.png) top left no-repeat;
	background-size: contain;
  width: 105px;
  height: 15px;
	text-indent: -99999px;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
*/
/*h1.playfair {
	font-family: "Playfair Display", Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
h1.prata {
	font-family: "Prata", Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
h1.oran {
	font-family: "Oranienbaum", Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
h1.suranna {
	font-family: "Suranna", Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}*/

h2 {
	font-size: 1.75em;
	margin: 0;
	padding: 0 0 0.75em;
}

h3 {
  font-size: 1.5em;
  margin: 0;
  padding: 1em 0 1em 0;
}

h4 {
  font-size: 0.9em;
}

p {
  max-width: 700px;
}

.pad-top {
	padding-top: 3.75em;
}

.thin {
	font-weight: 300;
}
.helper {
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
.transparent {
    color: #000;
}
/*.home h1 {
	background: url(../images/logo.gif) center center no-repeat;
	width: 290px;
	height: 27px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -13px 0 0 -145px;
}

.home h1 a {
	width: inherit;
	height: inherit;
	display: block;
	text-indent: -9999px;
}*/

/*.intro .slides li.logo {background: url(../images/logo.gif) center center no-repeat;}*/

header {
	/*position: fixed;
	top: 50px;
	left: 50px;*/
}

section {
	/*width: 52.90%;
	float: right;
	font-size: 10px;
	color: #FFFFFF;*/
}

section li {
	list-style: none;
	/*width: 22.90%;
	float: left;
	margin: 0 1.68% 1.68% 0;
	padding: 0;
	line-height: 0;*/
}

section li img {width: 100%;}
section li a:hover {opacity: 0.5; filter: alpha(opacity=50);}

a:hover {
  text-decoration: none;
}

.social a {
    display: block;
    width: 20px;
    height: 20px;
    margin-top: 10px;
}
.instagram {
    background: url('../images/icon-instagram.png') center center no-repeat;
    background-size: contain;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
.logo a {
    text-decoration: none;
    display: block;
}

.flex-caption > * {
  display: inline-block;
  margin: 0 0 0.7em 0;
  padding: 0;
}

.grid {
  padding-bottom: 30px;
  overflow: auto;
}

.grid ul {

}

.grid li {
  width: 49.5%;
  float: left;
  overflow: hidden;
  /*margin: 5px 0 5px 0;
  padding: 0 5px 0 5px;*/
  margin: 1.2% 0;
  padding: 0 1.2%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid a {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 66.6666%;
  overflow: hidden;
}
.grid img {
  /* float: left;
  padding: 0 0 10px 10px;*/
  width: 100%;
  object-fit: contain;
}

/*
@media only screen and (max-width: 960px) {
    
    section li {
      overflow: hidden;
      float: left;
      display: block;
      width: 100%;
    }    
    section li img {
      float: left;
      padding-bottom: 24px;
    }
    section li img.split {
      width: 200%;
    }    
    section li img.split.mobile {
      float: right;    
    }
    
    .helper {
      display: block;
    }
    
    .flex-caption {
      margin-top: -12px;
      margin-bottom: 24px;
      clear: both;
      float: left;
    }

    .book01 li:nth-child(1) .flex-caption,
    .book01 li:nth-child(2) .flex-caption,
    .book01 li:nth-child(4) .flex-caption,
    .book01 li:nth-child(6) .flex-caption,
    .book01 li:nth-child(10) .flex-caption,
    .book01 li:nth-child(12) .flex-caption,
    .book01 li:nth-child(13) .flex-caption,
    .book01 li:nth-child(14) .flex-caption,
    .book01 li:nth-child(16) .flex-caption,
    .book01 li:nth-child(17) .flex-caption,
    .book01 li:nth-child(19) .flex-caption,
    .book02 li:nth-child(3) .flex-caption,
    .book02 li:nth-child(7) .flex-caption,
    .book02 li:nth-child(8) .flex-caption,
    .book02 li:nth-child(10) .flex-caption,
    .book02 li:nth-child(11) .flex-caption,
    .book02 li:nth-child(13) .flex-caption,
    .book02 li:nth-child(14) .flex-caption,
    .book02 li:nth-child(16) .flex-caption,
    .book02 li:nth-child(17) .flex-caption,
    .book02 li:nth-child(19) .flex-caption,
    .book02 li:nth-child(20) .flex-caption {
      display: none;
    }

}
*/

footer {
	position: fixed;
	bottom: 50px;
	left: 50px;
	margin-top: 50px;
}
footer img {
	max-width: 100%;
	height: auto;
}

a {color: #f5f5f5; text-decoration: none; transition: text-decoration 250ms ease;}
/*a:hover {text-decoration: underline;}*/

a.gallery-nav {line-height: 1; display: inline-block;}

img {color: #f5f5f5;}
b, strong {font-weight: 400;}
.light {font-weight: 400; color: #999999;}

table {width: 100%; height: 100%;}
table td {text-align: center; vertical-align: middle; /*padding: 15% 10% 10% 10%; width: 80%; height: 75%;*/}
table td img {}

/* @media only screen and (min-width: 961px) { */
    
    .mobile {
        display: none;
    }
    
    nav {
        padding-top: 3.75em;
    }

    /*
     * jQuery FlexSlider v2.0
     * http://www.woothemes.com/flexslider/
     *
     * Copyright 2012 WooThemes
     * Free to use under the GPLv2 license.
     * http://www.gnu.org/licenses/gpl-2.0.html
     *
     * Contributing author: Tyler Smith (@mbmufffin)
     */


    /* Browser Resets */
    .flex-container a:active,
    .flexslider a:active,
    .flex-container a:focus,
    .flexslider a:focus  {outline: none;}
    .slides,
    .flex-control-nav,
    .flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

    /* FlexSlider Necessary Styles
    *********************************/ 
    .flexslider {margin: 0; padding: 0;}
    .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */

    .flex-pauseplay span {text-transform: capitalize;}

    /* Clearfix for the .slides element */
    .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
    html[xmlns] .slides {display: block;} 
    * html .slides {height: 1%;}

    /* No JavaScript Fallback */
    /* If you are not using another script, such as Modernizr, make sure you
     * include js that eliminates this class on page load */
    .no-js .slides > li:first-child {display: block;}

    /* FlexSlider Default Theme
    *********************************/
    .flexslider {
        position: relative; 
        zoom: 1; 	
        margin: auto;
        overflow: hidden;
        vertical-align: middle;
    }

    .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
    .loading .flex-viewport {max-height: 300px;}
    .flexslider .slides {zoom: 1; line-height: 0 !important;}
    .flexslider .slides li {zoom: 1; position: relative; line-height: 0 !important;}

    .flexslider, .slides, .slides li {padding: 0; margin: 0; line-height: normal; height: 100% !important; white-space: nowrap; overflow: hidden; position: relative; text-align: center;}

    .flexslider .slides li > div {
      /*max-height: 100%;
      width: auto;
      height: auto;*/
      height: 100%;
      width: auto;
      display: inline-block;
      margin: 0 auto;
      position: relative;
      vertical-align: middle;
    }
    .flexslider .slides li div img {
        line-height: normal; 
        margin: 0 auto;
        padding: 0; 
        vertical-align: middle;
        /*width: auto;
        height: auto;*/
        width: 100%;
        height: 93%;
        max-width: 100%; 
        max-height: 93%;
        object-fit: contain;
    }
    .flexslider .slides li img.landscape,
    .flexslider .slides li img.h {
        width: 100%;
        /*float: left;*/
    }
    .flexslider .slides li img.portrait,
    .flexslider .slides li img.v {
      height: 100%;
    }
    /*
    .flexslider .slides li img.wideimg {width: 100%; height: auto;}
    .flexslider .slides li img.highimg {width: auto; height: 100%;}
    */

    /* Direction Nav */
    .flex-direction-nav {*height: 0;}

    .flex-direction-nav a {
      width: 50%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      z-index: 10;
      text-indent: -9999px;
      opacity: 0;
      -webkit-transition: all .3s ease;
    }

    .flex-direction-nav .flex-next {
        background-position: 100% 0; 
        right: 0; 
        /*cursor: url(../images/arrow_right.png), auto; cursor: e-resize;*/ 
        cursor: url('../images/arrow-next-w.png'), auto;
        /*cursor: -webkit-image-set(
          url('../images/arrow-next.png') 1x,
          url('../images/arrow-right@2x.png') 2x
        ), auto; */
    }
    .flex-direction-nav .flex-prev {left: 0; /*cursor: url(../images/arrow_left.png), auto; cursor: w-resize;*/ cursor: url('../images/arrow-prev-w.png'), auto;}
    .flexslider:hover .flex-next {opacity: 0.8; right: 0;}
    .flexslider:hover .flex-prev {opacity: 0.8; left: 0;}


    .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
    .flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

    /* Caption */
    .flex-caption {
        font-size: 1.25em;
        letter-spacing: 0.5px;
        position: absolute;
        left: 0;
        bottom: 0;
        opacity: 1;
        display: inline-block;
    }

    /*.close-btn {
        background: url(../images/close-btn.png) center center no-repeat;
        width: 45px;
        height: 45px;
        display: block;
        text-indent: -99999px;
        z-index: 100;
        cursor: pointer;
        position: absolute;
        top: 15px;
        right: 15px;
    }*/
    
/* } */ /* end flexslider media query */

/* MEDIA QUERIES */

@media only screen and (min-width: 1500px) {

  /*body {
    font-size: 13px;
  }

  /*h1.log{
      width: 125px;
      height: 18px;
  }*/

  .grid li {
    width: 33.33%;
  }

}

@media only screen and (min-width: 2000px) {

  /*body {
    font-size: 14px;
  }

  h1.logo {
      width: 155px;
      height: 22px;
  }*/

  .grid li {
    width: 25%;
  }

}


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

  body{
    font-size: 11px;
  }

  .container {
    padding: 20px 20px 20px 20px;
  }

  aside {
    width: 150px;
    padding-right: 10px;
  }

  nav, .pad-top {
    padding-top: 2.75em;
  }

  section {
    margin-left: 160px;
  }

  section.contact {
    padding-top: 5.2em;
  }

  section p {
    font-size: 12px;
    padding-right: 25px;
  }

  /*h1 {
    font-size: 2em;
  }

  nav {
    font-size: 1.1em;
  }*/

  h2 {
    font-size: 1.5em;
  }

  .flexslider .slides li div img {
    height: 90%;
    max-height: 90%;
  }

  .flex-caption h3 {
    font-size: 1.25em;
  }

}


@media only screen and (min-width: 769px) {

  .desktop {
    display: block;
  }
  .mobile {
    display: none;
  }

}

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

  body{
    font-size: 10px;
  }

  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }

  aside,
  section {
    width: 100%;
    height: auto;
    padding: 0 0 1em 0;
    margin: 0;
    clear: both;
  }

  aside {
    padding-top: 2.5em;
  }

  .all section.gallery .grid {
    padding: 0.5em 2.5em;
  }

  nav {
    padding-bottom: 2em;
    position: relative;
  }
  nav li {
    overflow: hidden;
  }
  nav li a {
    padding: 5px 0;
    display: inline-block;
  }
  .social {
    position: absolute;
    right: 0;
    top: 3.75em;
  }
  .pad-top {
    padding: 0;
    position: absolute;
    top: 2.75em;
    right: 0;
  }

  .all .gallery {
    padding-bottom: 4em;
  }

  .grid li {
    width: 100%;
    padding: 0;
    margin: 0.5% 0;
    position: relative;
  }

  .grid li:first-child {
    margin-top: 0;
  }

  .grid a {
    width: 100%;
    height: auto;
    padding: 0;
    pointer-events: none;
    float: left;
  }
  
  .all .grid img {
    float: left;
  }

  .all .grid li.no-margin {
    margin: 0;
  }
  .all .grid li.no-margin-top {
    margin-top: 0;
  }

  .all .grid li.v {
    margin: 0;
    text-align: center;
  }
  .all .grid li.v img {
    float: none;
    width: 50%;
  }
  .all .grid li.v.margin-top {
    margin-top: 0.5%;
  }

  .flex-caption {
    margin-top: 5px;
    margin-bottom: 4em;
    padding: 0;
    clear: both;
    float: left;
    position: static;
    vertical-align: bottom;
  }

  .flex-caption h3 {
    font-size: 1.25em;
    margin-bottom: 2px;
  }

  .flex-caption h4 {
    margin-bottom: 0;
    vertical-align: bottom;
  }

  .grid li .flex-caption {
    display: none;
  }

  .grid li:nth-child(3) .flex-caption,
  .grid li:nth-child(7) .flex-caption,
  .grid li:nth-child(11) .flex-caption,
  .grid li:nth-child(13) .flex-caption,
  .grid li:nth-child(14) .flex-caption,
  .grid li:nth-child(17) .flex-caption,
  .grid li:nth-child(23) .flex-caption,
  .grid li:nth-child(28) .flex-caption,
  .grid li:nth-child(32) .flex-caption,
  .grid li:nth-child(33) .flex-caption,
  .grid li:nth-child(35) .flex-caption,
  .grid li:nth-child(37) .flex-caption,
  .grid li:nth-child(44) .flex-caption,
  .grid li:nth-child(46) .flex-caption,
  .grid li:nth-child(48) .flex-caption,
  .grid li:nth-child(52) .flex-caption,
  .grid li:nth-child(56) .flex-caption,
  .grid li:nth-child(58) .flex-caption,
  .grid li:nth-child(59) .flex-caption,
  .grid li:nth-child(61) .flex-caption {
    display: block;
  }

}

@media screen and (max-device-width: 960px) and (orientation : landscape){

  /*.grid li {
    max-width: 88%;
  }

  .selected .grid.desktop {
    display: block;
  }
  .selected .grid.mobile {
    display: none;
  }*/

  .flex-caption {
    text-align: center;
    width: 100%;
  }

}

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

  body {
    font-size: 10px;
  }

  .container {
    padding: 20px 20px 24px 20px;
  }

  /*aside {
    width: 100px;
    padding-right: 20px;
  }

  section {
    margin-left: 120px;
  }*/

  section p {
    font-size: 11px;
    padding-right: 0;
  }

  h1 {
    font-size: 1.75em;
  }

}

/*
@media only screen and (max-width: 960px) {

body {
  height: auto;
  min-height: 100%;
  overflow: hidden;
}
.container {
    padding: 25px 20px;
  overflow: hidden;
  min-height: 100vh;
}
aside,
section {
  width: 100%;
  padding: 0 0 2em 0;
  margin: 0;
  clear: both;
}
  nav {
      font-weight: bold;
  }
  section.gallery {
      padding-top: 1em;
  }
  section.contact {
      padding-top: 2em !important;
  }

h2 {
  padding: 0.5em 0 1.5em;
      display: none;
}
  nav {
      margin-top: 2em;
      position: relative;
  }
  nav li {
      overflow: hidden;
  }
li a {
      padding: 0;
      font-weight: 400;
}
  .social {
      position: absolute;
      right: 0;
      top: 21px;
  }
.pad-top {
  padding: 0;
      position: absolute;
      top: 0;
      right: 0;
}
.flex-caption {

}
  .gallery-nav {
      width: 100%;
      visibility: hidden;
  }
  .flex-prev,
  .flex-next {
      visibility: visible;
      text-decoration: none !important;
      display: none;
  }
  .flex-prev {
      float: left;
  }
  .flex-prev:before {
      content: '⟨ ';
  }
  .flex-next {
      float: right;
  }
  .flex-next:after {
      content: ' ⟩';
  }

}
*/

/* RETINA DISPLAY */
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 768px),
only screen and (   -moz-min-device-pixel-ratio: 2) and (min-device-width: 768px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (min-device-width: 768px),
only screen and (        min-device-pixel-ratio: 2) and (min-device-width: 768px),
only screen and (                min-resolution: 192dpi) and (min-device-width: 768px),
only screen and (                min-resolution: 2dppx) and (min-device-width: 768px) { 
  .close-btn {background: url('../images/close-btn-large.png') center center no-repeat !important; background-size: 17px 17px !important;}
}