@charset "UTF-8";
@import url(https://fast.fonts.com/cssapi/6e056d6d-8297-4637-b653-75e40f83f048.css);
/*
Theme Name: Webperture
Author URI: http://www.michalszymonczyk.com
Description: Photography portfolio.
Author: Michał Szymończyk
Version: 1.3
License: Commercial. All rights reserved.
Copyright: (c) 2013-2022 Szymończyk
*/


* {margin: 0; padding: 0;}
/*html, body {height:100%;}*/
body {font-size: 100%;}
.group:after {  content: "";  display: table;  clear: both;}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.hidden {visibility: hidden;}

/* colours */
body .video-js .vjs-tech {background: #000;}
body {background-color: #000; overflow: scroll;}
body section.menu {background-color: rgba(0,0,0, 0.5);}
body section.menu .header {color: #FFF; }
body section.menu nav .header { color: #EFEFEF;}
body a {color: #A1A1A1; }
body section.menu a {color: #A1A1A1; }
body section.menu a.current, section.menu a:hover, a:hover { color: #FFF; }

/* second scheme colours */
body.white {background-color: #FFF; color: #333333;}
section#toolbar {background-color: transparent;}
body.white section.menu {background-color: rgba(255,255,255, 0.75);}
body.white section.menu .header { color: #2A2A2A;  }
body.white section.menu nav .header { color: #5470df; }
body.white section.menu a, body.white  a { color: #000000 }
body.white section.menu a.current,body.white section.menu a:hover, a:hover { color: #000000; text-decoration: underline; }
body.white section#toolbar .arrow.prev {border-right: 10px solid #000; }
body.white section#toolbar .arrow.next {border-left: 10px solid #000; }
body.white section#toolbar .arrow.back {border-right: 10px solid #000;}
body.white section#toolbar .arrow.back div {border-right: 10px solid #000;}
body.white section#credits {color: #B5B5B5}
body.white .video-js .vjs-tech {background: #fff;}

.vjs-loading-spinner {background: #fff; display: none!important;}

/* typography and font colours*/
body section#credits { font-size:0.6em; font-family:'Futura W02 Light'; margin-left: 30px; color: #616161 }
body { font-family: 'Futura W02 Book', Arial, sans-serif; color: #CFCFCF; }
#content > .post > .entry {font-family: 'Futura W02 Light', Arial, sans-serif;}
h1, h2, h3 {display: block; font-weight: normal;}
h1{font-size: 3.7em; font-family: 'Adobe Garamond Pro 1167025', serif, Times New Roman; color: #333333;}
h2 {font-size: 1.55em; font-family: 'Adobe Garamond Pro 1167027', serif, Times New Roman; line-height: 2.1em; color: #333333;}
h3 {}
h1.extra {font-size: 5em; display: inline;}
:selection {background: #333;color: #fff;text-shadow: none;}

section.menu .header {text-align: right; font-family:'futura w02 book'; letter-spacing: 0.2px; font-size: 2.1em; line-height: 1;}
section.menu nav .header {text-align: right; font-size: 1em; font-family:'Futura W02 book'; letter-spacing: -0.1px; line-height: 0.95em; margin-bottom: 0.4em;}
section.menu nav ul li {padding-right: 20px;line-height: 1.2em; margin-bottom: 2px;}
section.menu nav ul li a {font-size: 0.95em;}

/* content containers */
body section#credits {position: fixed; z-index: 300;}
body section#credits img {height: 1.6em; margin-left: 10px; margin-top: -3px;vertical-align:middle;}
body section#credits img:hover {height: 4em; position: relative; border-radius: 4px;}
.mfp-content #entry {overflow-x:scroll; padding: 20px;}
.mfp-content #entry {background: #000}
body.white .mfp-content #entry {background: #fff}
.mfp-content #entry .photo:last-child {padding-right: 0px;}
#content {padding-left: 280px;}
#blog {position: relative; margin-left: 20px;}
#blog > .post {margin: 0 3px; margin-bottom: 60px; }
#blog > .post > a.post-link {display:block;}
#blog > .post > a.post-link:hover img {opacity: 0.5; }
#blog > .post > a.post-link:hover:after { height:48px; width:48px; content: url('http://www.michalszymonczyk.com/photography/wp-content/themes/webperture/images/loupe.png'); position:absolute; bottom: 32px; right: 5px;}
#blog > .post > a.post-link:hover div  {color: #fff; opacity: 1}
#blog > .post > a.gallery-link {font-family:'Futura W02 Light';text-align: center;display: block;font-size: 80%;margin-top: 5px;text-decoration: none;}
#blog > .post > a.gallery-link {	color: #626262;	text-shadow: 0 0 1px #232323;}
#blog > .post > a.gallery-link:hover { color: #FFF;  text-decoration:underline;}
body.white #blog > .post > a.gallery-link { color: #999;  }
body.white #blog > .post > a.gallery-link:hover {	color: #000;	;
}
#blog > .post img {max-width: 440px; height: auto;}

#infscr-loading {bottom: 60px;position: absolute;right: 50%;text-align: center;background: #000;border-radius: 10px;padding: 20px;}
section.menu {width: 280px; position: fixed; top: 0; left: 0; z-index: 23;}
section.menu a {text-decoration: none; }
section.menu .header {padding: 15px 16px 5px 25px; display: block;}
section.menu #mblog {margin-top: 16px; }
section.menu nav#info {position:absolute; bottom: 20px; width: 100%;}
section.menu nav .header { text-align: right; padding: 20px 20px 0px 20px;}
section.menu nav ul { list-style-type: none; text-align: right; width: 100%;}
/*div.navigation {display: none;}*/

section#toolbar {position: fixed; right: 20px; top: -35px; white-space: nowrap; cursor: pointer; z-index: 22;}
section#toolbar .arrow {opacity: 0.5; display: inline-block; scale: 1.8;}
section#toolbar .arrow.back {width: 0; height: 0; border-top: 0.65em solid transparent;border-bottom: 0.65em solid transparent;	border-right: 0.65em solid #FFF; margin-right: 40px; margin-left: -40px;}
section#toolbar .arrow.back div {position: relative; left: -0.65em; top:-10px; width: 0; height: 0; border-top: 0.65em solid transparent;border-bottom: 0.65em solid transparent;	border-right: 0.65em solid #FFF;opacity: 1;}
section#toolbar .arrow.prev {width: 0; height: 0; border-top: 0.65em solid transparent;border-bottom: 0.65em solid transparent;	border-right: 0.65em solid #FFF; margin-right: 30px;}
section#toolbar .arrow.next {width: 0; height: 0; border-top: 0.65em solid transparent;border-bottom: 0.65em solid transparent;	border-left: 0.65em solid #FFF; margin-right: 4px;}
section#toolbar img {height: 1.3em;}
section#toolbar .arrow:hover {opacity: 1;}
section#toolbar .lighter {display:none;}


section.gallery {display: inline-table; position:relative; left:0; z-index:10; vertical-align: top;}
section.gallery .photo, section.gallery > dl {position:relative; display: table-cell;white-space: normal; border: 0;padding-left: 60px;opacity:1;vertical-align: top;}
section.gallery .photo:first-of-type {padding-left:0px;}
section.gallery .photo:last-of-type {padding-right:60px;}
section.gallery .photo.active, section.gallery .photo:hover {opacity:1;}
section.gallery .photo:last-child {padding-right: 70px;}
section.gallery .photo img {width: auto;}

.video {display: inline-table; margin-right: 30px; margin-top: 0px;}
.video dd,section.gallery dd {color: #FFF; font-family: 'Futura W02 Light', Arial, sans-serif; font-size: 0.7em;  font-weight: bold;  text-align:right; padding-right: 0px; text-decoration:none}
body.white .video dd, body.white section.gallery dd {color: #000; }
.vjs-fluid {padding-top: 0!important;}

.typekit-badge {z-index: -10 !important;}
.popup {background: rgba(255, 255, 255, 0.58);; background-size: cover; position: fixed; z-index:300; top:0;bottom:0;left:0;right:0; padding: 5vh 0; text-align:center;}
/* animation prop. */

.duration-1 {
		transition-duration: 0.6s;
		-moz-transition-duration: 0.6s;
		-ms-transition-duration: 0.6s;
		-webkit-transition-duration: 0.6s;}

.duration-2 {
		transition-duration: 0.2s;
		-moz-transition-duration: 0.2s;
		-ms-transition-duration: 0.2s;
		-webkit-transition-duration: 0.2s;}
.duration-3 {
		transition-duration: 0.8s;
		-moz-transition-duration: 0.8s;
		-ms-transition-duration: 0.8s;
		-webkit-transition-duration: 0.8s;}

.timing-1 {
	   	transition-timing-function: cubic-bezier(0.44, 0.05, 0.55, 0.95);
		-moz-transition-timing-function: cubic-bezier(0.44, 0.05, 0.55, 0.95);
		-ms-transition-timing-function: cubic-bezier(0.44, 0.05, 0.55, 0.95);
 		-webkit-transition-timing-function: cubic-bezier(0.44, 0.05, 0.55, 0.95);}


.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  /* ideally, transition speed should match zoom duration */
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}


/* switcher */
.switcher {text-align: center;}
.switcherbottom {position: absolute; bottom: 2%; width: 100%;}
.bullet {display: inline-block; padding: 6px 0; width: 80px;}
.bullet:nth-child(1) {position: relative; z-index: 111;}
.bullet:nth-child(2) {position: relative; z-index: 110;}
.bullet:nth-child(3) {position: relative; z-index: 109;}
.bullet:nth-child(4) {position: relative; z-index: 108;}
.bullet a {display: block;}
.bullet a img {width: 60px;}
.floating {padding-left: 25px; position: fixed; top: 10px; right: 10px; background: url("images/white_noise.jpg"); width: auto; bottom: auto; opacity: 0.7; padding-bottom: 4px; z-index: 102;margin-top: 2%;}
.floating .bullet {margin-right: -5px;}
.pinched {position:relative;font-weight: bold;width: 100px; overflow: visible;padding:15px;margin:50px 0 20px -25px;text-align:center;	color:#fff;	background:#333; 	/* css3 */	-webkit-border-radius:10px;	-moz-border-radius:10px;	border-radius:10px; display: none;}
/* creates a rectangle of the colour wanted for the pointy bit */
.pinched:before {	content:"";	position:absolute;	bottom:-20px;	left:50%;	width:100px;height:20px;margin:0 0 0 -50px;	background:#333;}
/* creates a rounded rectangle to cover part of the rectangle generated above */
.pinched:after {content:"";	position:absolute;	bottom:-20px;left:0;	width:50%;	height:20px;background: url("images/white_noise.jpg");/* css3 */	-webkit-border-top-right-radius:15px;	-moz-border-radius-topright:15px;border-top-right-radius:15px;}
/* creates the other rounded rectangle */
.pinched > :first-child:before {content:""; position:absolute; bottom:-20px; right:0; width:50%; height:20px; background: url("images/white_noise.jpg");/* css3 */	-webkit-border-top-left-radius:15px;	-moz-border-radius-topleft:15px;	border-top-left-radius:15px;}
.floating .pinched {position: absolute; top: 30px;}
.floating .pinched:before {top:-10px;left:50%;height:20px;}
.floating .pinched:after {top:-20px;left:0;	width:50%;	height:20px;/* css3 */	-webkit-border-bottom-right-radius:15px;	-moz-border-radius-bottomright:15px;border-bottom-right-radius:15px;}
.floating .pinched > :first-child:before {top:-20px; right:0; width:50%; height:20px; /* css3 */	-webkit-border-bottom-left-radius:15px;	-moz-border-radius-bottomleft:15px;	border-bottom-left-radius:15px;}

/* changes */
#credits {display:none;}
section#toolbar {right: inherit; 	transform: scale(0.7);	left: 90vw; z-index: 55;}
nav#info{display:none;}
body.page-template-video-php #menu {background: white;}
.height.video-js {display:inline-block;}
#content > .post > .entry {white-space: nowrap;}
.navbar {display:none;}

@media only screen and (max-width: 950px) {
	section.menu .header {font-size: 1em; }
	section.menu {margin-top: 0px!important;width: 220px; height: 100vh!important;}
	section.menu nav .header {padding: 0px;}
	section.menu nav ul li a {font-size: 0.8em;}
	section.menu nav ul li {line-height: 1em; margin-bottom: 0px;}
	section.gallery .photo, section.gallery > dl {padding-left: 30px;}
	section.gallery .photo:last-of-type {padding-right: 30px;}
	section.gallery .photo:first-of-type {padding-left: 0px;}
	section#toolbar {margin-top: 100vh!important;}
}

/* mobile 2022 */
@media only screen and (orientation: portrait) {
#content {padding: 10px; overflow: hidden;}
section.gallery .photo, section.gallery > dl {display:block!important; padding-left: 0px!important; padding-bottom: 20px;}
section.gallery .photo, section.gallery > dl > img {height:auto!important;}
section.gallery .photo > img {height: auto!important; width: 100%!important;}
section.menu {width:100%!important;}
.menu-works-container, .menu-personal-container, .menu-blog-container {padding-right: 15wv!important;}
#menu2 {margin-top:0px!important;}
#content > .post > .entry {white-space:break-spaces;}
section.gallery .photo:last-of-type {padding-right: 0px;}
#menu {display:none;}
.embed-youtube {max-width: 95vw;max-height:95vh;}
.embed-youtube .youtube-player {width: 100%;}
section.menu nav .header{font-size:1.1em; }
body.white section.menu {background-color: rgba(255,255,255, 0.95);}
.menu-works-container {margin-top: 20px;}
section.menu #mblog {margin-top: 0px;}
#menu-item-2130  {line-height: 0.2rem;}
.links li, #menu2 .header {margin-right:1.5em;}
.wp-playlist {line-height:0.1!important;}
#menu2 .header {text-align: left; padding-left: 30vw;}
.container {
  max-width: 1050px;
  width: 100%;
  margin: auto;
}

.navbar {
  width: 100%;
  box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
	display:block; z-index: 9999;
position: fixed;top: 0;
background: white;

}
.logo {
  position: absolute;
  top: 20px;
  right: 15px;
  font-size: 1.2rem;
  color: #0e2431;
	font-family: 'futura w02 book';
}
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

.navbar .menu-items {
  display: flex;
}

.navbar .nav-container li {
  list-style: none;
}

.navbar .nav-container a {
  text-decoration: none;
  color: #0e2431;
  font-weight: 500;
  font-size: 1rem;
  padding: 0rem;
}

.navbar .nav-container a:hover{
    font-weight: bolder;
}

.nav-container {
  display: block;
  position: relative;
  height: 60px;
}

.nav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.navbar .menu-items {
  padding-top: 120px;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  height: 100vh;
  width: 100%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
/*  margin-left: -40px;
  padding-left: 60px;*/
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

.navbar .menu-items li {
  margin-bottom:0.7rem;
  font-size: 1.4rem;
  font-weight: 500;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked ~ .logo{
  display: none;
}

}