/* Normalize-css */ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type="button"],[type="reset"],[type="submit"],button{-webkit-appearance:button}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
html {scroll-behavior: smooth;}
body {background-color: black;color: white;font-family: Snapfolio, sans-serif; font-weight: 100;}

.button {border-radius: 30px; border: 0;background: #555;padding: 10px 25px 12px 27px;display: inline-block;color: #fff;margin-top: 10px;font-size: 17px;text-transform: uppercase;font-weight: 400;width: auto;line-height: 20px;text-decoration: none;}
.button:hover {background-color: darkgrey;}

.top-bar {padding: 0 25px 0 20px;background: #111314;position: fixed;top:0;left:0;right:0;height: 60px;display: flex;z-index: 1000;}
.top-bar img {width: 20px;}
.top-bar div.back {height: 100%;width: 20%}
.top-bar div.back a, .top-bar div.back a:visited {color: white; text-decoration: none;font-size: 32pt;}
.top-bar div.tools {display: flex;width:80%;justify-content:flex-end;align-items: center;}
.top-bar div.tools a, .top-bar div.tools a:visited {display:block;color:white;text-transform:capitalize; padding-left:40px;font-size: 17pt;text-decoration: none;}
.top-bar div.tools div.current a {color: gold;font-weight: normal;}
.top-bar div.tools a span {padding: 0 5px;}
.top-bar div.tools a small {display: block; font-size: 10pt;padding: 0 5px;color: gold;}
.top-bar.transparent {background: none;}

.photos.scatter {position: absolute;top:0;bottom: 0;left: 0;right: 0;overflow: hidden;}
.photos.scatter div.photo-frame {width: 400px; height: 454px; padding: 15px;box-sizing: border-box; background: #ffffff; box-shadow: 0 0 35px 10px #000000; opacity: 1;transition: all .5s;position: absolute;transform:scale(1);}
.photos.scatter div.photo-frame:hover {transform: rotate(0) scale(1.2)!important;z-index: 1000!important;}
.photos.scatter .photo-frame a.detail { position: absolute; top:0;bottom:0;left: 0;right: 0;cursor: pointer;}
.photos.scatter .photo-container { width: 100%;height: calc(100% - 44px);display: flex;align-items: center;justify-content:center;background-color: black;overflow: hidden;}
.photos.scatter .photo-container img { height: auto;max-width: 100%;object-fit: cover;}
.photos.scatter .photo-description { width: 100%;height: 50px;display: flex;align-items: center;justify-content:center;color: black;font-size: 20pt}
.photos.scatter .photo-container img.logo { height: 120px ;width: auto;object-fit: cover;}

.photos.scatter div.photo-frame.menu {top:30%;left:5%;z-index: 100;}
.photos.scatter div.photo-frame.menu .photo-container {background-color: #202020;display: flex; flex-direction: column; align-items: center;justify-content: space-around}
.photos.scatter div.photo-frame.menu .photo-container img {display:block; max-width: 60%;margin: 10px auto 0;}
.photos.scatter div.photo-frame.menu .photo-container ul {list-style: none;font-size: 17pt;padding: 10px;padding-top: 0;width: 200px; margin: 0 auto;}
.photos.scatter div.photo-frame.menu .photo-container ul li {margin: 10px 0;text-transform: capitalize;}
.photos.scatter div.photo-frame.menu .photo-container ul li:first-child {margin-top: 0;}
.photos.scatter div.photo-frame.menu .photo-container ul li.separator {height: 10px;}
.photos.scatter div.photo-frame.menu .photo-container ul a, .photos.scatter div.photo-frame.menu .photo-container ul a:visited {color: white;text-decoration: none;}
.photos.scatter div.photo-frame.menu .photo-container ul a:hover {color: gold;}
.photos.scatter div.photo-frame.menu .photo-description img {width: 30px; height: 30px;vertical-align: sub;margin-left: 5px;}
.photos.scatter div.photo-frame.menu div.photo-icon {position: absolute; right: 5px; bottom: 5px}
.photos.scatter div.photo-frame.menu div.photo-icon a {display: block}
.photos.scatter div.photo-frame.menu div.photo-icon a img {width: 60px; height: 60px}

.photos.scatter div.photo-frame.about {top:40%;right:5%;transform: rotate(12deg);z-index: 99;}

.about-container {padding: 20px;display: flex;margin-top: 60px;color: white;}
.about-container .about-left {width: 40%;padding-right: 30px;}
.about-container .about-right {width: 60%}
.about-container img {width: 100%}

div#album-container {margin-top: 60px;display: grid;grid-gap: 10px;grid-template-columns: repeat(auto-fill, minmax(400px,1fr));grid-auto-rows: 20px;}
div#album-container div.photo-wrapper div.photo-content {position: relative;}
div#album-container div.photo-wrapper div.photo-content a {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
div#album-container div.photo-wrapper div.photo-content img {width: 100%;}
div#album-container div.photo-wrapper div.photo-content div {width: 100%;height: 40px; background-color: #111314;color: white;line-height: 40px;text-align: center;}
div.loader {width: 80%;margin: 10px auto;}
div.loader a {display: block; width: 100%; height: 100%;text-align: center;}
div#more-photos {display: none;}

div#photo-container {position: fixed;left: 0;right: 0;bottom: 0;top: 0;}
div#photo-container div.image {position:absolute;top:0;left:0;right:0;bottom:0;background-position: center center;background-repeat: no-repeat;background-size: contain;transition: opacity 150ms ease-out;}
div#photo-container div.image.hide {opacity: 0;transition: opacity 150ms ease-in;}
div#photo-container div.image div.image-description {position:absolute; bottom: 35px; left: 280px; right: 10%;height:40px;color: white;transition: opacity 500ms;font-size: 36px;text-shadow: 0 1px 2px rgba(0,0,0,0.75);}
div#photo-container div.hidden {display: none;}

div#photo-container div#navigation {height:90px;width:320px;position:fixed;left:20px;bottom:20px;display: flex;align-items:flex-end;}
div#photo-container div#navigation div.navigation-item {width: 90px;height:90px;overflow: hidden;}
div#photo-container div#navigation div.navigation-item img {display:block;width: 78%;height:78%;margin:8px auto;border-radius:100%;box-shadow: 0 0 8px 1px rgba(0,0,0,0.75);}
div#photo-container div#navigation div.navigation-item:nth-child(1) {height: 0;width: 0;}
div#photo-container div#navigation div.navigation-item:nth-child(2) {height: 65px;width: 65px;}
div#photo-container div#navigation div.navigation-item:nth-child(3) {height: 90px;width: 90px;}
div#photo-container div#navigation div.navigation-item:nth-child(4) {height: 65px;width: 65px;}
div#photo-container div#navigation div.navigation-item:nth-child(5) {height: 0;width: 0;}
div#photo-container div#navigation.animate div.navigation-item {transition: 300ms ease-out;}

div#photo-container div#navigation.left div.navigation-item:nth-child(1) {height: 65px;width: 65px;}
div#photo-container div#navigation.left div.navigation-item:nth-child(2) {height: 90px;width: 90px;}
div#photo-container div#navigation.left div.navigation-item:nth-child(3) {height: 65px;width: 65px;}
div#photo-container div#navigation.left div.navigation-item:nth-child(4) {height: 0;width: 0;}
div#photo-container div#navigation.left div.navigation-item:nth-child(5) {height: 0;width: 0;}

div#photo-container div#navigation.right div.navigation-item:nth-child(1) {height: 0;width: 0;}
div#photo-container div#navigation.right div.navigation-item:nth-child(2) {height: 0;width: 0;}
div#photo-container div#navigation.right div.navigation-item:nth-child(3) {height: 65px;width: 65px;}
div#photo-container div#navigation.right div.navigation-item:nth-child(4) {height: 90px;width: 90px;}
div#photo-container div#navigation.right div.navigation-item:nth-child(5) {height: 65px;width: 65px;}

div#blogs-container {margin: 60px 10% 0;}
div#blogs-container div.blog-category-wrapper {height: 300px;display: flex;flex-direction: column;justify-content:flex-end;background-position: center center;background-size: cover;background-color: darkgoldenrod;}
div#blogs-container div.blog-category-wrapper div {background-color: rgba(255,215,0, 0.6);padding: 10px 20px;color: black;}
div#blogs-container div.blog-category-wrapper div.blog-category-title {font-size: 36pt;}
div#blogs-container div.blog-category-wrapper div.blog-category-subtitle {font-size: 26pt;padding-left: 80px}

div#blogs-container div.blog-category-items {display: grid;grid-template-columns:repeat( auto-fill, 200px);grid-gap: 5px;justify-content:space-between;margin-bottom: 30px;}
div#blogs-container div.blog-item-wrapper {background-color: white;margin: 5px 0;height: 300px;position: relative;color: black;overflow: hidden;text-align: center;}
div#blogs-container div.blog-item-wrapper a {position: absolute;left:0;right: 0;top:0;bottom: 0;z-index: 100;}
div#blogs-container div.blog-item-wrapper div.blog-item-image {width: 100%;height:130px;background-position: center center;background-repeat: no-repeat;background-size: cover;}
div#blogs-container div.blog-item-wrapper div.blog-item-main div.blog-item-published {margin-top: 30px;color:gray;text-transform: uppercase;font-size: 10pt;}
div#blogs-container div.blog-item-wrapper div.blog-item-main div.blog-item-title {margin-top: 10px;font-size: 13pt;}
div#blogs-container div.blog-item-wrapper div.blog-item-main div.blog-item-subtitle {margin-top: 5px;font-size: 11pt;font-style: italic;color: #555;}
div#blogs-container div.blog-item-wrapper div.blog-item-footer {border-top: 1px solid #d8d8d8;background: #f5f5f5;position: absolute;left: 0;right: 0;bottom: 0;height: 30px;text-align: center;line-height: 30px;text-decoration: underline;font-size: 11pt;color: #555;}

div#blog-container {margin: 60px 10% 0;}
div#blog-container h1 {font-size: 40pt;margin-bottom: 0;}
div#blog-container h2 {font-size: 30pt;margin-bottom: 0;margin-top:0;padding: 10px 50px;font-style: italic;}
div#blog-container hr {}
div#blog-container div.blog-published {font-size: 14pt;padding: 10px 0;color: gold;text-transform: uppercase;}
div#blog-container div.blog-content {margin-top: 40px; }
div#blog-container div.blog-image {text-align: center;padding: 40px 0;}
div#blog-container div.blog-image img {max-width: 100%;}
div#blog-container div.blog-text {font-size: 17pt;line-height: 28pt; margin: 0 80px;}

div#subscribe-container {margin-top: 60px;text-align: center;}
div#subscribe-container h1 {font-size: 32pt;margin-top: 100px;}

div#subscribe-container form {display: block; margin: 0 auto; width: 460px;}
div#subscribe-container form ul {list-style: none;text-align: left;padding: 0;}
div#subscribe-container form input[type="text"], div#subscribe-container form input[type="email"] {display: block;width: 100%;padding: 10px 15px 12px;margin-bottom: 10px;border: 1px solid #d8d8d8;font-style: normal;font-size: 16px;border-radius: 3px;line-height: 20px;background: #fff;text-align: left;box-sizing: border-box;}
div#subscribe-container form input[type="submit"] {cursor: pointer;}
div#subscribe-container form div.form-switch {display: flex;align-items:stretch;justify-content:stretch;width: 100%;height:40px;margin-bottom: 10px;}
div#subscribe-container form div.form-switch a {width: 100%;font-size:14pt;text-decoration:none;border: 1px solid #d8d8d8;padding: 8px 12px 10px;background-color: darkgrey;}
div#subscribe-container form div.form-switch a:first-child {border-radius: 3px 0 0 3px;border-right: 0;}
div#subscribe-container form div.form-switch a:last-child {border-radius: 0 3px 3px 0;border-left: 0;}
div#subscribe-container form div.form-switch a.active {background-color: dodgerblue;color: white;}
div#subscribe-container p {font-size: 30px;margin-top: 100px;}

blockquote {color: rgba(250, 200, 130, 0.6);font-size: 40px;width: 60%;margin: 0 auto;}
blockquote.long {font-size: 26px;width: 90%;margin: 0 auto;}
blockquote p {font-style: italic;margin-bottom: 0;}
blockquote p::before, blockquote p::after {content: "“";font-size: 8rem;margin: -2rem 0 0 -4rem;position: absolute;opacity: 0.5;}
blockquote p::after {content: "”";margin: -1rem -4rem 0 0;}

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

    .photos.scatter div.photo-frame {width: 300px; height: 344px; padding: 10px;}
    .photos.scatter .photo-description { font-size: 18pt}

    .photos.scatter div.photo-frame.menu {width: 400px; height: 454px;}
    .photos.scatter div.photo-frame.about {width: 400px; height: 454px;}

    div#album-container {grid-template-columns: repeat(auto-fill, minmax(250px,1fr));}
    .top-bar div.tools a {padding-left:40px;font-size: 14pt;}

}

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

    .photos.scatter div.photo-frame {width: 255px; height: 292px; padding: 10px;}

    .photos.scatter div.photo-frame.menu {top: 4%;left: 7%;width: 390px;height: 447px;}
    .photos.scatter div.photo-frame.menu .photo-container img {max-height: 90px;}
    .photos.scatter div.photo-frame.menu .photo-container ul {font-size:24pt;padding:0 80px;width: 200px;}
    .photos.scatter div.photo-frame.menu .photo-container ul li {margin: 5px 0;}
    .photos.scatter div.photo-frame.menu .photo-container ul li:first-child {margin-top: 0;}
    .photos.scatter div.photo-frame.menu .photo-container img.logo { height: 120px;max-height:initial;width: auto;object-fit: cover;}
    .photos.scatter div.photo-frame.about {top:63%;right:5%;width: 340px;height: 390px;}

    div#blogs-container {margin: 60px 0 0;}
    div#blog-container {margin: 60px 0 0;}
    div#album-container {grid-template-columns: repeat(auto-fill, minmax(250px,1fr));}
    .top-bar div.tools a {padding-left:40px;font-size: 12pt;}
}