@import url(../webfonts/ss-social-regular.css);
article, aside, details, figcaption, figure, header, footer,
hgroup, nav, section, summary { display: block; }

audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
[hidden] { display: none; }

html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
* { margin: 0; padding: 0; }

a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
mark { background: #ff0; color: #000; }
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
button, input { line-height: normal; -webkit-appearance: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }
table { border-collapse: collapse; border-spacing: 0; }

h1 {
  font-weight: 100;
  font-family: "brandon-grotesque-1","brandon-grotesque-2";
  line-height: 0;
}

h2 {
  color: #c2c2c2;
  font-size: 1.618em;
  font-weight: 400;
  line-height: 1.3em;
  text-transform: uppercase;
  margin: 0 auto 2.617924em auto;
  padding: 0 0 1em 0;
  border-bottom: 1px solid #242424;
}

h3 {
  color: #c2c2c2;
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1.3em;
  text-transform: uppercase;
  margin: 0 0 0.35em 0;  
  padding: 0;
  border: none;
}

h3 + ul {
  margin-top: 0;
}

p, ul {
  color: #c2c2c2;
  font-weight: 300;
  font-size: 1.4em;
  line-height: 1.8em;
  margin-bottom: 1.5em;
}

ul {
  padding-left: 1.2em;
  list-style-type: square;
}

.hover-box {
  position: absolute;
  opacity: 0;
  background-color: rgba(40, 40, 40, 0.85);
  color: #fff;
  font-size: 0.9em;
  padding: 6px 10px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2000;
  transition: opacity 0.2s ease-in-out;
  white-space: nowrap;
}

main { float: left; position: relative; height: 100%; width: 100%; }
@media (min-width: 600px) { main { padding-left: 26em; box-sizing: border-box; } }

.image-grid { width: 100%; height: 100%; padding: 0; list-style: none; }
.image-grid li { display: none; width: 100%; line-height: 0; margin-bottom: 0; text-align: center; }
@media (min-width: 600px) { .image-grid li { float: left; border: 5px solid black; box-sizing: border-box; } }
@media (min-width: 800px) { .image-grid li { width: 50%; } }
@media (min-width: 1260px) { .image-grid li { width: 25%; } }

.image-grid li a > img { display: block; width: 100%; height: auto; opacity: 0.85; transition: 0.1s; }
.image-grid li a > img:hover { opacity: 1; transition: 0.3s; }
.image-grid li p { display: none; clear: both; font-size: 1em; line-height: 2.617924em; font-style: italic; color: #666; }

html, body { height: 100%; }
body { width: 100%; font-size: 10px; font-family: "petala-pro"; background: black; color: white; }

.image > img, p > img { opacity: 0.9; max-width: 100%; margin: 1.5em 0 3em 0; }

.hover-box { position: absolute; opacity: 0; background-color: rgba(40,40,40,0.591); color: white; font-size: 0.9em; padding: 8px 12px; border-radius: 5px; pointer-events: none; z-index: 1000; transition: opacity 0.3s ease-in-out; }
.image-grid li a > img { transform: scale(1); transition: transform 0.3s ease; }
.image-grid li a > img:hover { transform: scale(1.05); }

.content { width: 90%; max-width: 122.966em; margin: 4.2358em auto 0 auto; }
@media (min-width: 1000px) { .content { float: left; margin: 6.8535em 0 0 6.8535em; } }
.content .left { float: left; width: 100%; }
@media (min-width: 1000px) { .content .left { width: 50%; } }
.content .right { float: right; width: 100%; }
@media (min-width: 1000px) { .content .right { width: 40%; margin-left: 5%; } }

/* Use the same tighter bottom margin for h3 in the right column */
.content .right h3 { margin-bottom: 0.35em; }

.content a { color: #8ea209; transition: 0.3s; }
.content a:hover { color: #c1dc0c; transition: 0.3s; }

.scroll-box { max-height: 300px; overflow-y: auto; border: 2px solid #8ea209; border-radius: 10px; padding: 10px; background-color: #1f1f1f; margin-bottom: 20px; }

.sidebar { position: relative; left: 0; z-index: 100; width: 100%; padding: 2em 0; text-align: center; background: #1f1f1f; box-shadow: 0 0 5px black; box-sizing: border-box; }
@media (min-width: 600px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; padding: 3em 0 0 0; text-align: left; width: 26em; }
}

h1 { display: inline-block; width: 11.089em; }
@media (min-width: 600px) { h1 { width: 13.7069em; margin: 0 1.6em; } }
h1 img { width: 100%; line-height: 0; }
h1 > a { line-height: 1em; }

.tagline { display: block; width: 100%; font-size: 0.92em; color: #666; text-transform: uppercase; }
@media (min-width: 600px) { .tagline { margin-left: 2.2em; font-size: 1.111em; } }

.sidebar footer { display: none; position: absolute; bottom: 1.6em; left: 1.6em; color: #4d4d4d; }
@media (min-width: 600px) { .sidebar footer { display: block; left: 2.3em; } }

.sidebar .btn-nav { position: absolute; top: 2.4em; left: 2em; width: 1.8em; height: 1.8em; opacity: 0.4; background: url("../images/nav-icon.svg"); background-size: 100%; border: none; }
@media (min-width: 600px) { .sidebar .btn-nav { display: none; } }

.sidebar nav { position: absolute; top: 0; left: -55%; width: 55%; background: #030303; }
@media (min-width: 600px) { .sidebar nav { position: relative; left: 0; width: 100%; background: #212121; margin-top: 2em; box-shadow: none; } }

.open { box-shadow: 1px 5px 10px black; }

.sidebar nav a { float: left; clear: left; color: #b3b3b3; width: 100%; font-size: 1.1em; padding: 1.2em 0 1.2em 1.6em; text-align: left; text-transform: uppercase; text-decoration: none; box-sizing: border-box; }
@media (min-width: 600px) { .sidebar nav a { font-size: 1.2em; padding: 1.2em 0 1.2em 2em; } }
.sidebar nav a:hover { color: #ebebeb; }

.sidebar nav .btn-photography, .sidebar nav .btn-video { font-size: 1em; padding: 1.6em 0 1.6em 4.4em; border-top: 1px solid black; }
@media (min-width: 600px) { .sidebar nav .btn-photography, .sidebar nav .btn-video { font-size: 1.1em; padding: 1.6em 0 1.6em 4em; } }

.sidebar nav .btn-photography { background: #1a1a1a url("../images/camera.png") no-repeat 2.2em 50%; background-size: 12px 10px; }
.svg .sidebar nav .btn-photography { background: #1a1a1a url("../images/camera.svg") no-repeat 2.2em 50%; background-size: 12px 10px; }

.sidebar nav .btn-video { border-bottom: 1px solid black; background: #1a1a1a url("../images/video.png") no-repeat 2.2em 50%; background-size: 12px 10px; }
.svg .sidebar nav .btn-video { background: #1a1a1a url("../images/video.svg") no-repeat 2.2em 50%; background-size: 12px 10px; }

.sidebar nav a.active { color: #ccc; padding-left: 3.4em; background-size: 12px 8px; background: #1a1a1a url("../images/selected.png") no-repeat 1.8em 50%; }
.svg .sidebar nav a.active { background: #1a1a1a url("../images/selected.svg") no-repeat 1.8em 50%; background-size: 12px 8px; }

.sidebar .social-links { float: left; width: 50%; margin: 3em 0 0 1.6em; text-align: left; }
@media (min-width: 600px) { .sidebar .social-links { width: 70%; margin: 3em 0 0 2.4em; } }
.sidebar nav .social-links a { float: left; clear: none; width: auto; color: #4d4d4d; font-size: 1.618em; padding: 0; margin: 0 0.9em 1.2em 0; }
.sidebar nav .social-links a:hover { color: #ccc; }
@media (min-width: 600px) { .sidebar nav .social-links a { margin: 0 1.6em 1.2em 0; } }

/* Symbolset Instagram icon */
.ss-icon {
  font-family: "SS Social","SS Social Regular", sans-serif;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "liga","dlig";
  font-feature-settings: "liga","dlig";
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  line-height: 1;
}
.sidebar nav .social-links a.ss-icon { text-transform: none; }

.big-button { float: left; width: 100%; color: black !important; text-decoration: none; text-transform: uppercase; text-align: center; font-size: 1.618em; padding: 2em 2.4em; box-sizing: border-box; margin: 1em 0 3em 0; border-radius: 4px; background: #8ea209; }
.big-button:hover { background: #b0c90b; }

.about .first { margin-right: 10%; }
.about .btnSubscribe { float: left; width: 45%; margin-bottom: 2.617924em; }
.about .btnSubscribe img { max-width: 100%; }

.sidebar h1 { display: block; width: auto; margin-left: 2.2em; margin-right: 1.6em; line-height: 0; }
@media (max-width: 599.98px) { .sidebar h1 { margin: 0 auto; } }
.sidebar h1 img { display: block; max-width: 100%; height: auto; }
@media (min-width: 600px) { .sidebar h1 img { margin-left: -18px; } }

@media (max-width: 599.98px) {
  .sidebar { padding-top: 5em; text-align: center; }
  .sidebar .btn-nav { z-index: 2; }
  .sidebar h1 { margin: 0 auto; text-align: center; width: auto !important; }
  .sidebar h1 img { width: auto !important; max-width: 340px !important; height: auto; margin: 0 auto; display: block; }
  .tagline { font-size: 1.3em; margin-top: 0.6em; }

  .sidebar nav {
    position: absolute;
    top: 0;
    left: -55%;
    width: 55%;
    display: block;
    background: #030303;
    transition: left .25s ease;
    padding-top: 4.2em;
  }

  .sidebar nav.open { left: 0; }

  main { padding-left: 0; margin-left: 0; width: 100%; }

}

.about-footer-image {
  width: 100%;
  margin-top: 2em;
}

.about-footer-image img {
  display: block;
  width: 100%;
  height: auto;       
  max-width: 100%;
  margin: 0 auto;     
  opacity: 0.9;       
}