@charset "UTF-8";
/* CSS styles for Doug Ogle Photography web version 2 */
* {
  box-sizing: border-box;

}

#menu:not(.mm-menu) {
    display: none;
}

body {
  background-color: #000;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  padding: 0;
  color: #fff;
  display: flex;
  justify-content: center;
  align-content: center;
}

p, li {
    line-height: 1.5;
}
li + li {
    margin-top: 4px;
}
a, a:link {
    color: #afa492; 
}

.col-2 {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  /*list-style-position: inside;*/
  margin-0: 0;
}
    .col-2 li {
  padding-right: 20px;
}

@media only screen and (max-width: 425px) {
  .col-2 {
  -webkit-columns: 1;
  -moz-columns: 1;
  columns: 1;
  /*list-style-position: inside;*/
  margin: inherit;
}
    .col-2 li {
  padding-right: 0;
} 
 
}


.dop-logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  text-decoration: none;
}
.dop-logo-icon {
  width: 45px;
  height: 45px;
  margin-right: 12px;
}
.dop-logo-icon::before {
  content: "";
  /*background-image: url("/draft2/images/DOP-logo-200x188.png");*/
  background-image: url("/draft2/images/logo_anim2_2_green.gif");
  background-size: contain;
  /*opacity: 0.5;*/
  opacity: 1;
  display: block;
  width: 45px;
  height: 45px;
}
.dop-logo-type {
  color: #fff;
  font-family: goudy-old-style, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  font-variant: small-caps;
  line-height: 1;
  margin-bottom: 0;
}
.title-bar {
  background-color: #423a2d;
  padding: 0;
  margin: .5em auto 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h1 {
  color: #afa492;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  font-weight: normal;
  padding: 6px 15px;
}



.trigger {
  color: #afa492;
  text-decoration: none;
  display: inline-block;
  padding: 6px 15px;
}
.menu-button a {
  text-decoration: none;
  padding: 8px 14px;
  display: inline-block;
}
.menu-btn-open:after {
  color: #afa492;
  content: "\f0c9";
  font-family: "FontAwesome";
  font-size: 1.5rem;
  transition-property: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -webkit-transition: all .2s linear 0s;
  -o-transition: all .2s linear 0s;
}
.menu-btn-open:hover:after {
  color: #34B484;
}
.menu-btn-close:after {
  color: #fff;
  content: "\f00d";
  font-family: "FontAwesome";
  transition-property: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -webkit-transition: all .2s linear 0s;
  -o-transition: all .2s linear 0s;
}
.menu-btn-close:hover:after {
  color: #afa492;
}


/* MMENU Styles (#menu) */

/*.mm-menu {
    background: #423a2d !important;
    color: #afa492 !important;
}*/

.mm-menu {
    --mm-color-background: #423a2d;
    --mm-color-text: #afa492;
    --mm-color-border: #52493d;
}

.mm-listitem__btn {
    border-color: #52493d;
}

.mm-spn--light {
  background: #423a2d !important;
  color: #afa492 !important;
  /*--mm-spn-item-height: 46px;
    --mm-ocd-max-width: 500px;*/
}
li.Selected {
  background-color: #5c513e;
}



.page-wrapper {
  width: 100%;
  /*height: 80vh;*/
  padding: 2em 4em;
  margin: 0;
  /*max-width: 900px;
  position: relative;*/
  /*background: #333;*/
}

.page-wrapper > section {
    max-width: 900px;
    margin: auto;
    padding:0;
}


/* portfolio photo grid */

.flex-grid {
    display: flex;
    flex-wrap: wrap;
}
.grid {
  display: grid;
  /*grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  grid-gap: .6rem;*/
  /*grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));*/
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 1rem;
  padding: 0;
}
.flex-grid > a {
    width: calc(16.6% - var(--gap));
}
@media only screen and (max-width: 768px) {
    .flex-grid > a {
        width: calc(25% - var(--gap));
    }
}
@media only screen and (max-width: 480px) {
    .flex-grid > a {
        width: calc(33.33% - var(--gap));
    }
}
.flex-grid > a, .grid > a {
  background: black;
  border: 1px solid #7b7b7b;
  padding: 0;
  position: relative;
  transition: transform .2s; /* Animation */
}
.flex-grid > a:hover, .grid > a:hover {
  border: 3px solid #fff;
  transform: scale(1.2);
    z-index: 3;
}
.flex-grid > a::before, .grid > a::before {
  content: "";
  padding-top: 100%;
  display: block;
}
.flex-grid > a > img, .grid > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.emulated-flex-gap {
  --gap: 1em;
  display: inline-flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
}

.emulated-flex-gap > * {
  margin: var(--gap) 0 0 var(--gap);
}
.copyright {
  font-size: .7rem;
  color: #999;
  margin-top: 2em;
}
.flex-content {
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
}
.flex-content p {
  width: 66%;
  margin: 0;
  align-self: flex-start;
}
.about-image, .awards-image, .clients-image, .contact-image {
  margin-right: 30px;
  width: calc(33% - 30px);
  height: 50vh;
  overflow: hidden;
  object-fit: cover;
  max-width: 264px;
  max-height: 417px;
  align-self: flex-start;
}

.contact-image {
    width: calc(45% - 30px);
  }

.slides-wrapper {
  width: 100%;
  height: 60vh;
  min-height: 400px;
  position: relative;
  margin-top: -2em;
}
#slides {
  position: fixed;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
#slideshow {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.slide-link {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  background: #191919;
  color: #fff;
  font-size: .9rem;
  text-align: right;
  margin: 0;
  padding: 6px;
  text-decoration: none;
}
@media only screen and (max-width: 767px) {
  .page-wrapper {
      width: 100%;
      height: 100vh;
      padding: 1em;
      margin: 0;
      /*max-width: 900px;
      position: relative;*/
      /*background: #333;*/
    }
  .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      grid-gap: .6rem;
      padding: 0;
    }
}
@media only screen and (max-width: 600px) {
  .flex-content {
    display: flex;
    flex-direction: column;
  }
  .flex-content p {
    width: 100%;
  }
  .about-image, .awards-image, .clients-image, .contact-image {
    margin: -32px 0 20px;
    width: 100%;
    height: 320px;
    overflow: hidden;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    align-self: center;
  }
  .awards-image {
    object-position: 100% 0;
  }
  .clients-image {
    object-position: bottom left;
  }
  .contact-image {
    object-position: 50% 50%;
  }
}
@media only screen and (max-width: 374px) {
  .dop-logo-type {
    font-size: 1.2rem;
    line-height: 1;
  }
}




@media only screen and (max-width: 600px) {
    .about-image {
      margin-right: 30px;
      height: 60vh;
      overflow: hidden;
      object-fit: cover;
      background-position-y: top;
      /*max-width: 264px;
      max-height: 500px;*/
      align-self: flex-start;
    }
}