/**
 * personalize
 *************************/

fieldset {
  border: none;
  margin: 0;
  padding:0;
}

/**
 * micro clearfix
 *************************/

.clearfix::before, 
.clearfix::after { 
  content:""; 
  display:table; 
} 
.clearfix:after { 
  clear:both; 
} 
.clearfix { 
  zoom:1; 
}

/**
 * document reset
 *************************/

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 16px;
  text-rendering: optimizelegibility;
  -ms-touch-action: manipulation;
      touch-action: manipulation; /* remove 300ms delay in some browsers */
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  margin : 0;
  padding: 0;
}

*, *::before, *::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

a:focus,
button:focus { /* http://a11yproject.com/posts/never-remove-css-outlines/ */
  outline: thin dotted;
}

a[href^="http"]:empty::before {
  content: attr(href);
}

figure,
img {
  display: inline-block;
  font-size: 0;
  height: auto;
  line-height: normal;
  margin: 0;
  max-width: 100%;
  vertical-align: middle;
}
img[src=""] { display: none ;}
img[alt] {}

figure {
  font-size: inherit;
  line-height: inherit;
}

figcaption {
  font-size: 0.75rem;
  line-height: 1.125rem;
  margin: 0;
}

/* fix for old Android browsers */
body {
  -webkit-animation: bugfix infinite 1s; 
}
@-webkit-keyframes bugfix { 
  from {padding:0;} 
    to {padding:0;} 
}

/**
 * typography
 *************************/

body {
	font-weight: 400;
	line-height: 1.5em;
}

b,
strong {
	font-weight: 700;
}

cite,
dfn,
em {
	font-style: italic;
}

small {
	font-size: 0.875em;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-weight: 700;
}

h1, .h1,
h2, .h2, 
h3, .h3 {
  margin: 48px 0 24px;
  margin: 3rem 0 1.5rem;
}

h4, .h4, 
h5, .h5, 
h6, .h6 {
  margin: 24px 0 24px;
  margin: 1.5rem 0 1.5rem;
}

h1 small,
h2 small {
  font-weight: normal;
}

h1, .h1 {
  font-size: 2em; /* 2em */
  line-height: 1.2em;
}

h2, .h2 {
  font-size: 1.5em; /* 1.5em */
  line-height: 1.2;
}

h3, .h3 {
  font-size: 1.3125em; /* 1.3125em */
  line-height: 1.3;
}

h4, .h4 {
  font-size: 1.125em; /* 1.125em */
  line-height: 1.25;
}

h5, .h5 {
  font-size: 1em; /* 1em */
}

h6, .h6 {
  font-size: 0.857em; /* 0.857em */
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

ol, ul {
	padding-left: 32px;
}

ol li {
	list-style-type: decimal;
}

ul li {
	list-style-type: square;
}

dl {
	margin: 1.5rem 0;
}

dt {
	font-weight: 700;
	margin: 1.5rem 0 0.25rem;
}

dd {
	font-size: 0.857rem;
	margin: 0.25em 0 0.5em;
}

/**
 * structure
 *************************/

html { 
  height: 100%; 
}

body {
  min-height: 100%;
}

/**** IE hack ****/
  .page__wrapper {
    display: flex;
    flex-direction: row;
  }
/**** IE hack ****/

.page__body {
  display: flex;
  flex-direction: column;
  height: auto;
  margin: 0 auto;
  min-height: 100vh;
  overflow: auto;
  overflow-x: hidden;
  padding: 0;
  width: 100%;
}

.page__body > * {
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
}

header, footer {
  flex: none;
}
main {
  flex: 1 0 auto;
}

.page__body > header { order: 2 ; }
.page__body > main   { order: 3 ; }
.page__body > footer { order: 4 ; }

.content {
  margin   : 0 auto ;
  padding  : 0 ;
  position : relative ;
}

.page__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.page__body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

header, 
nav, 
footer {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
}

main {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}

.page__body > header { -webkit-box-ordinal-group: 3 ; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ; }
.page__body > main   { -webkit-box-ordinal-group: 4 ; -webkit-order: 3 ; -ms-flex-order: 3 ; order: 3 ; }
.page__body > footer { -webkit-box-ordinal-group: 5 ; -webkit-order: 4 ; -ms-flex-order: 4 ; order: 4 ; }

/**
 * index.html
 *************************/

body.isAlbum .page__body {
	border-style: solid;
  max-width: 1140px;
}

body.isAlbum header {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-style: solid;
  border-width: 0;
  position: relative;
}

body.isAlbum header span.aspectRatio {
  content: "";
	display: block;
}

body.isAlbum header h1 {
  line-height: 1.125em;
  margin: 0;
  padding: 0 12px;
  position: absolute; top: 0; left: 0;
  text-shadow: 1px 2px 4px rgba(0,0,0,0.5);
	width: 100%; height: 100%;

  display: flex;
  align-items: center; /* center, flex-start, flex-end */
  justify-content: center; /* center, flex-start, flex-end */

}

body.isAlbum footer {
  border: 0 solid #eee;
  border-width: 1px 0 0;
  padding-left: 12px;
  padding-right: 12px;
}

body.isAlbum footer p {
  font-size: 0.75rem;
  margin: 24px 0;
}

.description {
  margin: 2.5rem 0;
  padding-left: 12px;
  padding-right: 12px;
}

.description > * {
  margin-bottom: 1.25rem;
}

/**
 * pagination
 *************************/

.pagination {
	border: 0 solid #eee;
	border-width: 1px 0;
  margin: 2.5rem auto;
}

#pagination-bottom.pagination {
	margin-top: calc(2.5rem - 12px);
}

.pagination ul {
	font-size: 0;
	margin: 0 9px;
	padding: 0;
	text-align: right;
}

.pagination ul > li {
	display: inline-block;
	font-size: 0.875rem;
	height: 24px;
	line-height: 24px;
	list-style: none;
	margin: 0 3px;
	min-width: 24px;
	padding: 0;
	text-align: center;
	vertical-align: top;
}

.pagination ul > li a {
	cursor: pointer;
	display: block;
	height: 100%;
}

/**
 * single image pages
 *************************/

body.isSingle .page__body {
  background-color: #2c2c2c;
}

body.isSingle header,
body.isSingle footer {
  min-height: 48px;
  position: relative;
  width: 100%;  
}

body.isSingle header {
  padding-left: 48px;
  text-align: right;
}

body.isSingle footer > div {
	font-size: 0.75rem;
	line-height: 0.875rem;
	margin: 0 auto;
	min-height: 48px;
	padding: 0 48px;
	position: fixed; bottom: 0; left: 0;
	width: 100%;
}

body.isSingle footer > div > div {
	margin: 0 auto;
	max-width: 1140px;
	padding: 17px 0;
}

body.isSingle footer > div.caption-collapsed > div {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.caption-toggle,
.caption-toggle:hover {
	background-color: transparent;
	border: none;
	cursor: pointer;
	display: block;
	margin: 0 6px;
	opacity: 0;
	position: absolute; top: 6px; right: 0;
	text-align: center;
	transition: 0.25s opacity;
	visibility: hidden;
	width: 36px; height: 36px;
}

.caption-toggle.caption-toggleable {
	opacity: 1;
	visibility: visible;
}

.caption-toggle::before {
	border: solid white;
	border-width: 0 2px 2px 0;
	content: "";
	display: inline-block;
	font-size: 0;
	padding: 3px;
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.caption-collapsed .caption-toggle::before {
	-webkit-transform: rotate(-135deg);
	        transform: rotate(-135deg);
}

body.isSingle main {
  display: flex;
  flex-direction: row;
  padding: 48px;
}
@media all and (max-width: 800px) {
  body.isSingle main {
    padding: 0;
  }
}

.single {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.single img {
  display: none;
}

.single-button--close {
  display: block;
  position: absolute; top: 0; left: 0;
  width: 48px; height: 48px;
}

.single-button--close span {
	display: none;
}

.single-button--close::before, .single-button--close::after {
  background: #fff;
  content: '';
  display: inline-block;
  position: absolute;
  height: 2px;
  width: 16px;
  top: calc(50% - 1px);
  left: calc(50% - 8px);
}

.single-button--close::before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg); 
}

.single-button--close::after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.single-button {
  color: #fff;
  opacity: 0.5;
  transition: 0.1s;
}

.single-button:hover:not([disabled]) {
  background-color: transparent;
  color: #fff;
  opacity: 1;
}

.single-arrow {
	background: none;
	color: #fff;
	cursor: pointer;
	display: block;
	position: fixed; top: 50%;
	margin: -50px 0 0 0;
	outline: none;
	opacity: 0;
	padding: 0;
	transition: opacity .25s;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	width: 54px; height: 100px;
}

.single-arrow > span {
	display: none;
}

.single-arrow::after {
	background-color: black;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgNGwtMS40MSAxLjQxTDE2LjE3IDExSDR2MmgxMi4xN2wtNS41OCA1LjU5TDEyIDIwbDgtOHoiLz48L3N2Zz4=);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 24px 24px;
	content: '';
	position: absolute; top: 28px;	
	width: 44px; height: 44px;
}

.single-arrow--next {
  right: 0;
}

.single-arrow--previous {
	left: 0;
	-webkit-transform: scaleX(-1);
	    -ms-transform: scaleX(-1);
	        transform: scaleX(-1); 
}

.single-arrow--next::after,
.single-arrow--previous::after {
	left: 0;
}

a.single-arrow {
	opacity: 0.6;
}

span.single-arrow {
	opacity: 0.3;
}

/**
 * fancybox
 *************************/

.fancybox-button {
  line-height: 48px;
  width: 48px; height: 48px;
}

.fancybox-button::before,
.fancybox-button::after,
.fancybox-button--left::after,
.fancybox-button--right::after {
  top: 50%; right: auto; bottom: auto;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

.fancybox-button--close::before {
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
      -ms-transform: translate(-50%,-50%) rotate(45deg);
          transform: translate(-50%,-50%) rotate(45deg);
}

.fancybox-button--close::after {
  -webkit-transform: translate(-50%,-50%) rotate(-45deg);
      -ms-transform: translate(-50%,-50%) rotate(-45deg);
          transform: translate(-50%,-50%) rotate(-45deg); 
}

.fancybox-arrow,
.fancybox-arrow::after {
  margin: 0;
  top: 50%; left: 0;
  -webkit-transform: translate(0,-50%);
      -ms-transform: translate(0,-50%);
          transform: translate(0,-50%);
}

.fancybox-arrow--right {
  left: auto; right: 0;
}

.fancybox-arrow--left {
  -webkit-transform: translate(0,-50%) scaleX(-1);
      -ms-transform: translate(0,-50%) scaleX(-1);
          transform: translate(0,-50%) scaleX(-1);	
}

/** customize the "small" close button */

.fancybox-close-small:focus,
.fancybox-close-small:focus::before,
.fancybox-close-small:focus::after {
  outline: none;
}

.fancybox-close-small,
.fancybox-close-small:hover {
  background-color: #fafafa;
  border-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  color: transparent;
  position: absolute; top: 6px; right: 6px;
  width: 36px; height: 36px;
}

.fancybox-slide--iframe .fancybox-close-small,
.fancybox-slide--iframe .fancybox-close-small:hover {
  position: fixed; top: 6px; right: 12px;
}

.fancybox-close-small::before, .fancybox-close-small::after {
  background-color: #333 !important;
  content: '';
  display: inline-block;
  opacity: 0.75;
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
}
.fancybox-close-small::before {
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
      -ms-transform: translate(-50%,-50%) rotate(45deg);
          transform: translate(-50%,-50%) rotate(45deg);
}
.fancybox-close-small::after {
  -webkit-transform: translate(-50%,-50%) rotate(-45deg);
      -ms-transform: translate(-50%,-50%) rotate(-45deg);
          transform: translate(-50%,-50%) rotate(-45deg); 
}
.fancybox-close-small:hover::before, .fancybox-close-small:hover::after {
  opacity: 1;
}

/** inline content styling */

.fancybox-slide--html > *,
.fancybox-slide--inline > * {
  background-color: #fff;
  color: #212121;
  border-radius: 3px;
  margin: 48px;
  padding: 72px 48px;
  width: auto; max-width: 100%;
}

.fancybox-slide--html > :first-child > :first-child,
.fancybox-slide--inline > :first-child > :first-child {
  margin-top: 0;
}

.fancybox-slide--html > :first-child > :nth-last-child(2),
.fancybox-slide--inline > :first-child > :nth-last-child(2) {
  margin-bottom: 0;
}

.fancybox-slide--html,
.fancybox-slide--inline {
  font-size: 1rem;
  line-height: 1.5em;
}

.fancybox-slide--html p,
.fancybox-slide--inline p {
  margin: 1.5em 0;
}

@media all and (max-width: 800px) {

  .fancybox-slide--html > *,
  .fancybox-slide--inline > * {
    border-radius: 0;
    margin: 0;
    min-height: 100%;
    padding-bottom: 72px;
  }

  .fancybox-slide--html,
  .fancybox-slide--inline {
    font-size: 0.875rem;
  }

}

/**
 * fancybox-album
 *************************/

 /* background */

 .fancybox-album .fancybox-bg {
  background-color: #2c2c2c;
  opacity: 1;
}

/* toolbar */

.fancybox-album .fancybox-toolbar {
  background: #191919;
  padding-left: 48px;
  text-align: right;
  width: 100%;
}

.fancybox-album .fancybox-button--close {
  position: fixed; top: 0; left: 0;
}

@media screen and (min-width: 801px) {

  .fancybox-album .fancybox-toolbar {
    opacity: 1;
    visibility: visible;
  }

  .fancybox-album .fancybox-stage {
    top: 48px; bottom: 48px;
  }

}

.fancybox-button {
	background: transparent;
  color: #fff;
  opacity: 0.65;
  transition: 0.1s;
}

.fancybox-button:hover:not([disabled]) {
  background-color: transparent;
  color: #fff;
  opacity: 1;
}

.fancybox-show-thumbs .fancybox-button.fancybox-button--thumbs {
  opacity: 1;
}

/* thumbnails */

@media all and (min-width: 800px) {
  
    .fancybox-thumbs {
      padding: 0;
      width: 240px;
    }
  
    .fancybox-thumbs > ul {
      box-sizing: border-box;
      margin: 0 auto;
      padding:3px;
    }
  
    .fancybox-thumbs > ul > li {
      border-width: 3px;
      width: 120px;
    }
  
    .fancybox-show-thumbs .fancybox-inner {
      right: 240px;
    }
  
  }

/**
 * fancybox "Caption" module
 *************************/

 .fancybox-caption-collapsible .fancybox-caption-wrap {
	background: #191919;
	padding: 0 48px;
}

.fancybox-caption-collapsible .fancybox-caption {
	border: none;
	box-sizing: border-box;
	color: #fff;
	font-size: 0.75rem;
	line-height: 0.875rem;
	margin: 0 auto;
	max-width: 1140px;
	min-height: 48px;
	padding: 17px 0;
	text-align: center;
}

@media all and (min-width: 801px) {
	.fancybox-caption-collapsible .fancybox-caption-wrap {
		opacity: 1;
		visibility: visible;
	}
}

.fancybox-caption-toggle,
.fancybox-caption-toggle:hover {
	background-color: transparent;
	border: none;
	cursor: pointer;
	display: block;
	margin: 0 6px;
	opacity: 0;
	position: absolute; top: 6px; right: 0;
	text-align: center;
	transition: 0.25s opacity;
	visibility: hidden;
	width: 36px; height: 36px;
}

.fancybox-caption-toggle.fancybox-caption-toggleable {
	opacity: 1;
	visibility: visible;
}

.fancybox-caption-toggle::before {
	border: solid white;
	border-width: 0 2px 2px 0;
	content: "";
	display: inline-block;
	font-size: 0;
	padding: 3px;
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.fancybox-caption-collapsed .fancybox-caption-toggle::before {
	-webkit-transform: rotate(-135deg);
	        transform: rotate(-135deg);
}

.fancybox-caption-collapsed .fancybox-caption {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/**
 * album grid
 *************************/

.album {
  font-size: 0.75rem;
  margin: 2.5rem auto calc(2.5rem - 12px);
  padding: 6px;
  position: relative;
}

.album-item {
  border-style: solid;
	box-sizing: content-box;
	float: left;
  margin: 0 6px 12px;
	opacity: 0;
	visibility: hidden;
}

.flex-images-ready .album-item {
	opacity: 1;
	visibility: visible;
}

.album figcaption {
  display: none;
}

.album figure {
	height: 100%;
	overflow: hidden;
}

.album img {
	box-sizing: border-box;
  border-style: solid;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  max-width: none;
  width: 100%; height: 100%;
}

.album-item ul {
  padding: 0.25em 4px;
}

.album-item ul li {
  line-height: 1.5em;
  list-style: none;
  max-width: 100%;
  min-height: 1.5em;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drop-shadow .album-item {
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.25);
	   -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.25);
	        box-shadow: 2px 2px 2px rgba(0,0,0,0.25);
}
