/*

Theme Name: Jo Duck Photography

Theme URI: http://www.mellomedia.com.au/

Author: Mello Media

Author URI: http://www.mellomedia.com.au/

Description: Wordpress theme for Jo Duck

Version: 1.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: clean, simple, responsive, gallery

*/





/**

 * Basic Styles

 */

body {font-size: 1em; font-family: 'Francois One', sans-serif; letter-spacing: 0.04em; font-weight: 400;}

h1 {color: #ffdd15; text-align: center; font-weight: 700;}

h1 {font-size: 1.5em; margin-bottom: 20px; text-transform: uppercase;}

/*h2 {font-size: 1.2em; margin-top: 45px;}*/

h1 a {color: #434343;}

h1 a:hover {color: #000000;}

a, a:hover, a:active, a:focus {text-decoration: none; outline: 0; color: #434343;}

#content {opacity: 1; position: absolute; left: 0; width: 100%; transition: opacity 0.40s linear; transition: left 0.40s ease; margin-top: 120px; padding-bottom: 120px; font-size: 0.8em; line-height: 1.7em;}

#content.loading {opacity: 0; transition: opacity 0.40s linear;}

#content img {max-width: 100%;}

i {vertical-align: top;}



/**

 * Header

 */

header {background: #fff; position: absolute; top: 0; left: 0; width: 100%; z-index: 99; transition: top 0.40s ease;}

header #header-wrapper {margin: 20px 40px; position: relative; display: flex; display: -webkit-flex;}

header #header-wrapper > a {position: fixed;}

header h1 {margin: 0; display: inline-block;}

#logo {width: 290px;}

#menuicon {display: none; font-size: 3em; color: #000000; cursor: pointer; position: absolute; right: 0; top: -2px;}

nav {background: none; color: #000; transition: right 0.40s ease; position: absolute; right: 0;}

nav ul {list-style-type: none; padding: 0; margin-top:0; display: flex; display: -webkit-flex;}

nav a:after {margin-left: 20px;}

nav ul li:last-of-type a:after {content: ""; margin-left: 0px;}

nav a {color: #000; text-align: left; padding: 0 10px 0 30px; display: block; font-size: 1em; text-transform: uppercase;}

nav a:hover, nav a:active, nav a:focus {color: #000000;}

nav a:hover {background: #fff; color: #000000;}



/**

 * Grid

 */

.item-content:hover img {opacity: 0.6;}

#griddy {visibility: hidden;}

#griddy span {display: block; font-size: 1.2em; color: #fff; line-height: 1.35em;}

#griddy span.albumtitle {color: #fff; font-size: 1.4em; margin-top: 3px; text-transform: uppercase;}

#griddy span a:hover {opacity: 0.6;}

#griddy {margin: 0 2%;}

.grid-sizer {width: 25%;}

#griddy .item {width: auto; float: left;}

#griddy .item:nth-child(2) {margin-top:60px;}

.item-content > a {display: block; position: relative;}

.item-content img {display: block;}

.hover-state {background: #ffdd15; opacity: 0; display: flex; display:-webkit-flex; height: 100%; width: 100%; position: absolute; top: 0; align-items: center; justify-content: center; flex-direction: column; -webkit-align-items: center; -webkit-justify-content: center; -webkit-flex-direction: column;}

.hover-state:hover {opacity: 0.8;}

.gallery-button {display: block; border: 1px solid #fff; padding: 9px; margin-top: 10px;}

.gallery-button:hover {background: #fff; color: #ffdd15 !important;}


/**

 * Gallery

 */

.gallery-layout {padding: 0 10%; text-align: center;}

.gallery-layout > div {margin-bottom: 150px;}

.gallery-layout img {max-width: 100%; max-height: 85vh; background: #ffdd15 url("images/ajax.gif") no-repeat scroll center center; min-width: 200px;}

.gallery-layout img {

    will-change: transition;

    -webkit-transition: opacity 1s ease-out;

    -moz-transition: opacity 1s ease-out;

    -ms-transition: opacity 1s ease-out;

    -o-transition: opacity 1s ease-out;

    transition: opacity 1s ease-out;

}

#content h1 {margin-bottom: 45px;}

#backhome {position: fixed; top: 50%; left: -3%; width: 3%; transition: left 0.30s ease;}

.gallerydescription {font-family: 'Raleway', sans-serif; max-width: 500px; margin: 0 auto; font-size: 1.0em;}

.play-button {position: absolute; top: calc(50% - 29px); left: calc(50% - 50px); width: 100px !important;}

/**

 * Pages

 */

#pagewrapper {font-family: 'Raleway', sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; text-align: left; font-size: 1.2em;}
#pagewrapper > h1 {font-family: 'Francois One', sans-serif;}


/**

 * Responsive

 */



@media (max-width: 1360px) {



#griddy .item {width: 30.66%;}



}



@media (max-width: 875px) {



	#menuicon {display: inline-block;}

	header #header-wrapper {margin: 20px 2%;}

	nav {background: #000000; height: 100%; overflow-y: auto; position: fixed; right: -240px; top: 84px; color: #fff; transition: right 0.40s ease;}

	nav ul {list-style-type: none; padding: 0; margin-top:0; display: block;}

	nav a:after {content: ""; margin-left: 0px;}

	nav a {color: #fff; min-width: 200px; text-align: left; padding: 10px 10px 10px 30px; display: block; font-size: 1.3em;}

	nav a:hover, nav a:active, nav a:focus {color: #fff;}

	nav a:hover {background: #fff; color: #000000;}



}



@media (max-width: 850px) {



	#griddy .item {width: 48%;}



}





@media (max-width: 717px) {



	.item-content {width: 100% !important;}

	.item-content img {width: 100%;}

	#griddy .item:nth-child(2) {margin-top: 0px;}



}





@media (max-width: 400px) {



	h1 {font-size: 1.5em;}

	#griddy .item {width: 98%;}

	#logo {width: 200px;}

	#menuicon {font-size: 2em;}



}



@media (max-width: 340px) {



	h1 {font-size: 1.5em;}

	.gallery-layout {padding: 0 5%;}

	header #header-wrapper {margin: 20px 5%;}



}



#griddy .item-content img{

	width: 100%;

	height: auto;

}