/* ==================== Art Stuff ==================== */
/* Art navigation wrapper */
#wrapper nav a,#wrapper nav span#nav-art-next,#wrapper nav span#nav-art-prev,#wrapper nav span#nav-art-latest {
	position: fixed;
	display: block;
	top: 50%;
	z-index: 4;
	background: transparent;
	color: transparent;
	padding: 0;
}

#wrapper nav span#nav-art-next,
#wrapper nav span#nav-art-prev,
#wrapper nav span#nav-art-latest {opacity: 0.3;}

#nav-art-next,#nav-art-prev {
	width: 40px;
	height: 82px;
	margin-top: -37px;

	animation: fadein 0.5s;
}

#nav-art-latest,#nav-art-all {
	width: 15px;
	height: 15px;
	left: 32px;
}

#nav-art-next {right: 20px; transition: 0.5s;}
#nav-art-prev {left: 20px;}
#nav-art-latest {margin-top: 58px;}
#nav-art-all {margin-top: 98px;}

a#nav-art-latest:hover::after,
a#nav-art-all:hover::after,
.blog-back:hover::after {
	content: "List all illustrations";
	display: block;
	background: rgba(67,82,96,0.7);
	color: #fff;
	padding: 5px 10px;
	border-radius: 30px;
	width: 9em;
	font-size: 0.85em;
	position: absolute;
	top: -5px;
	left: 40px;
	opacity: 0.9;
	text-align: center;
	text-shadow: 0 1px 0 #000;
}
a#nav-art-latest:hover::after {
	content: "Latest illustration";
}
.blog-back:hover::after {
	content: "Back to the blog";
	top: 10px;
}

/* Art illustration */

#art-wrapper, #art-wrapper a {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -1;
	padding: 2%;
	transition: 0.5s;
}

#art-wrapper::before {
	opacity: 0;
}

#art-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/*-webkit-filter: drop-shadow(0px 3px 40px rgba(0, 0, 0, 0.5));
	filter: drop-shadow(0px 3px 40px rgba(0, 0, 0, 0.5));*/
	
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
}

.reveal #art-wrapper img {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
}

.reveal #art-wrapper {
	width: 66%;
	padding: 4% 4% 4% 90px;
	transition: 0.5s;
}


.tall {margin-top:0 !important;} /*dirty hack to fix override the JS*/

.art-help {
	position: fixed;
	left: 0;
	right: 0;
	top: 50%;
	margin: -50px auto 0 auto;
	background: #435260;
	color: #fff;
	opacity: 0.9;
	
	width: 150px;
	padding: 60px 20px;
	border-radius: 100%;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	font-style: italic;
	pointer-events: none;
	
	-webkit-animation: fadedelay 0.5s, fadein 0.5s 0.5s;
	-moz-animation: fadedelay 0.5s, fadein 0.5s 0.5s;
	-ms-animation: fadedelay 0.5s, fadein 0.5s 0.5s;
	animation: fadedelay 0.5s, fadein 0.5s 0.5s;
}


/* Illustration content styles */
#content-wrapper h1 {
	font-size: 1.25em;
	line-height: 1em;
}

#content-wrapper h1 span {
	font-size: 2em;
	float: left;
	line-height: 1em;
	margin: 0 15px 15px 0;
}

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

.subtitle {
	font-size: 0.8em;
	font-weight: 700;
	font-style: italic;
	color: #435260;
}

.illustration-title {
	z-index: 3;
}

.illustration-title::before, .illustration-title::after {
	content: "";
	background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1));
	
	height: 60px;
	width: 25%;
	min-width: 300px;
	position: fixed;
	top: 50px;
	right: 0;
	z-index: 1;
	transition: 0.5s;
}

.illustration-title::after {
	top: auto;
	bottom: 0;
	height: 120px;

	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%);
}


#content-wrapper {
	width: 25%;
	min-width: 300px;
	right: 0;
	top: 50px;
	padding: 70px 40px 20px 20px;
	position: absolute;
	background: #fff;
	transition: 0.5s;
	overflow: hidden;
}



#content-wrapper::after {
	content: "";
	background: url('../images/wrapper-bg.png') no-repeat left top;
	
	position: fixed;
	width: 25%;
	height: 100%;
	top: 0;
	right: 0;

	padding-left: 200px;
	min-width: 300px;
	pointer-events: none;
	transition: 0.5s;
}
.reveal #content-wrapper::after {
	right: 0;
	transition: 0.5s;
}

.reveal .illustration-title,
.reveal .illustration-expand,
.reveal #content-wrapper::after,
.reveal .illustration-title::before,
.reveal .illustration-title::after {
	right: 0;
}

.illustration-title,
.illustration-expand,
#content-wrapper::after,
.illustration-title::before,
.illustration-title::after {
	right: -900px;
	transition: 0.5s;
}


.shadowappear {
	-webkit-filter: drop-shadow(0px 3px 40px rgba(0, 0, 0, 0.5));
	filter: drop-shadow(0px 3px 40px rgba(0, 0, 0, 0.5));
	transition: 0.5s;
}


#content-wrapper {background: none;}
.reveal #content-wrapper {background: fff;}



#content-wrapper p {
	font-size: 0.8em;
	line-height: 1.3em;
	padding-bottom: 2em;
	font-weight: 300;
}

#content-wrapper ul,
#content-wrapper ol {
	font-size: 0.8em;
	padding-left: 20px;
}

#content-wrapper .inspiration {
	text-transform: uppercase;
	font-size: 0.75em;
	margin: 1em 0;
	background: url('../images/inspiration-bg.png') no-repeat 7em top;
	line-height: 1em;
	color: #435260;
}

/* Prints buttons */
#art-prints {
	display: block;
}

#art-prints h2 {
	font-size: 0.75em;
	color: #435260;
	font-weight: 100;
	text-transform: uppercase;
	margin-bottom: 5px;
	display: inline-block; /* for the help text to work */
}

#prints-help {
	width: 100%;
	height: 15px;
	background: url('../images/prints-help.png') no-repeat 100% 0;
	position: absolute;
	right: 0;
	font-size: 0.75em;
	color: #fff;
	cursor: help;
}

#prints-help span {
	display: none;
	width: 102%;
	margin: -1%; /* To hide the transform on the buttons below it*/
	background: #435260;
	position: absolute;
	right: 0px;
	top: 25px;
	padding: 20px;
	z-index: 9;
	cursor: default;
}

#prints-help span em {
	text-transform: uppercase;
	font-weight: bold;
	font-style: italic;
	font-size: 0.85em;
}

#prints-help span::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-width: 7px;
	border-style: solid;
	border-color: transparent #435260 transparent transparent;
	top: -7px;
	right: 7px;
}

#prints-help:hover span {
	display: block;

	-webkit-animation: fadein 0.25s;
	-moz-animation: fadein 0.25s;
	-ms-animation: fadein 0.25s;
	animation: fadein 0.25s;
}

#art-prints ul {
	height: 2em;
	padding: 0;
}

#art-prints li,
.download {
	list-style: none;
	float: left;
	width: 50%;
	margin-bottom: 40px;

	-webkit-transform: skew(-8.3deg);
	-moz-transform: skew(-8.3deg);
	-ms-transform: skew(-8.3deg);
	transform: skew(-8.3deg);
	opacity: 0.5;
}

#art-prints li:hover,
.download:hover {
	opacity: 1;
	background: #435260;
}

#art-prints a,
.download {
	padding: 5px 10px;
	font-size: 0.65em;
	text-transform: uppercase;
	text-align: center;
	display: block;
	border-radius: 0;
}

.download {
	font-size: 0.85em;
	text-transform: none;
	width: 100%;
}

#art-prints li:first-child a {
	margin-right: 2px;
}

#art-prints li:last-child a {
	margin-left: 3px;
}


.illustration-expand {
	overflow: visible;
	height: auto;
	padding: 40px 0 100px 0;
	z-index: 1;
}

.reveal #nav-art-next {
	right: 400px;
	animation: fadein 0.5s;
}

@keyframes "fadein" {
	0% {opacity: 0;}
	100% {opacity: 100%;}
}

@-moz-keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 100%;}
}

@-webkit-keyframes "fadein" {
	0% {opacity: 0;}
	100% {opacity: 100%;}
}

@-ms-keyframes "fadein" {
	0% {opacity: 0;}
	100% {opacity: 100%;}
}


.ui-inactive #wrapper nav,.ui-inactive #wrapper #content-wrapper {
	-webkit-animation: fadeout 0.5s forwards;
	-moz-animation: fadeout 0.5s forwards;
	-ms-animation: fadeout 0.5s forwards;
	animation: fadeout 0.5s forwards;
}
.ui-inactive #wrapper.reveal #content-wrapper {
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	animation: none;
}

.ui-inactive #wrapper nav:hover,.ui-inactive #wrapper #content-wrapper:hover {
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	animation: none;
}

#wrapper nav {
	-webkit-animation: fadein 0.5s;
	-moz-animation: fadein 0.5s;
	-ms-animation: fadein 0.5s;
	animation: fadein 0.5s;
}

@keyframes "fadeout" {
 0% {opacity: 1;}
 100% {opacity: 0;}
}

@-moz-keyframes fadeout {
 0% {opacity: 1;}
 100% {opacity: 0;}
}

@-webkit-keyframes "fadeout" {
 0% {opacity: 1;}
 100% {opacity: 0;}
}

@-ms-keyframes "fadeout" {
 0% {opacity: 1;}
 100% {opacity: 0;}
}


/* Gallery all page */
#gallery-all {
	padding: 80px 20px 20px 20px;
}

#gallery-all li {
	width: 25%;
	float: left;
	list-style: none;
	padding: 10px;

	transition: 0.5s;
	transform: skew(-8.3deg);
}

#gallery-all li a {
	display: block;
	width: 100%;
	height: 120px;
	padding: 0;
	border-radius: 0;

	box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
	overflow: hidden;
	transition: 0.1s;
	background: #fff;
}

#gallery-all li a:hover {
	transition: 0.1s;
}

#gallery-all li:hover img {opacity: 0.7;}


#gallery-all li:active {
	transition: 0.05s;
	transform: scale(0.9) skew(-8.3deg);
}


#gallery-all span {
	position: absolute;
	bottom: 0;
	right: 10px;
	font-size: 2em;
	font-weight: 700;
	font-style: italic;
	text-shadow: 0 1px 1px #000, 0 0 10px #000;
	-webkit-font-smoothing: antialiased;
}

#gallery-all span::after {
	content: ".";
}

#gallery-all li img {
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}