/*!
Theme Name: Dep Designs 2019
Theme URI: http://www.depdesigns.net/
Author: Donny Truong
Author URI: https://donnytruong.com/
Description: Responsive design, typography
Version: 1.0
*/
@font-face {
  src: url("/fonts/LibreFranklinGX-Romans.woff2") format("woff2");
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 40 200;
  font-display: swap;
}
/*orange*/
/*orange*/
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* Primary Styles
   Author: Donny Truong
*/
/* Base Rules */
body {
  color: #444;
  background-color: #fff;
  font: 100%/1.5 "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 84;
  text-align: left;
  padding: 0;
  margin: 0 auto;
  font-variant-ligatures: common-ligatures;
}

h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 1em 0 0 0;
  color: #000;
  line-height: 1.1;
  font-weight: 106;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.8em;
}

h3 {
  font-size: 1.6em;
}

h4 {
  font-size: 1.4em;
}

h5 {
  font-size: 1.2em;
}

h6 {
  font-size: 1em;
}

p {
  margin: 0;
  padding: 0.5em 0;
}

[role=contentinfo] {
  text-transform: lowercase;
}
[role=contentinfo] p {
  font-size: 0.8em;
}

img, iframe, embed, object, video {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: #de4c03;
  text-decoration: none;
}

a:visited {
  color: #de4c03;
}

a:hover {
  color: #000;
}

a {
  transition: all 0.5s ease;
}
a img {
  transition: opacity 0.2s ease-in-out;
}

a:hover img {
  opacity: 0.7;
}

[role=presentation], [role=banner], main {
  width: 100%;
  float: left;
}

ul, ol, dd {
  margin: 0;
  padding: 0;
}

ul li li, ol li li {
  margin: 0 0 0 1em;
}

nav ul, nav ol, .extra ul, .banner-about ul {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* Mobile First */
[role=banner] {
  padding: 0;
  margin: 0;
}

.logo {
  float: left;
  width: 80px;
}

.dep {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #878787;
}

.dot {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #DE4C03;
}

nav ul {
  font-size: 0.8em;
  text-transform: lowercase;
  padding-top: 1.35em;
}
nav ul li {
  display: inline;
  padding: 0 0 0 1em;
}
nav ul li a:link, nav ul li a:active, nav ul li a:visited {
  color: #444;
}
nav ul li a:hover {
  color: #de4c03;
}
nav ul li[aria-current=page] a {
  color: #de4c03;
}

[role=presentation] img {
  width: 100%;
  margin-bottom: 1em;
}

main {
  padding: 0;
}
main img {
  width: 100%;
}

.content, .description, [role=contentinfo] {
  padding: 2em;
}

[role=contentinfo] {
  clear: both;
}

.grid-item {
  line-height: 1.2;
  text-transform: lowercase;
}
.grid-item figure {
  margin: 0;
  position: relative;
  width: 100%;
}
.grid-item figcaption {
  text-align: center;
  padding: 0.5em 0;
  background: #444;
  font-size: 0.8em;
  position: absolute;
  bottom: 0.3em;
  width: 100%;
}
.grid-item a:link, .grid-item a:visited, .grid-item a:active, .grid-item a:hover {
  color: #fff;
}

.grid-item a:hover figcaption {
  opacity: 0.8;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 30em) {
  .home {
    position: absolute;
    z-index: 1;
  }
  .home .dep {
    fill: #fff;
  }
  .home nav ul li a:link, .home nav ul li a:active, .home nav ul li a:visited {
    color: #fff;
  }
  .home nav ul li a:hover {
    color: #de4c03;
  }

  .content {
    max-width: 40em;
  }

  .logo {
    float: left;
    width: 130px;
  }

  nav ul {
    font-size: 1em;
    padding-top: 2.2em;
  }
  nav ul li {
    padding: 0 0 0 2em;
  }

  .slide, .description {
    padding: 0 2em;
    max-width: 70em;
  }

  .grid-item figcaption {
    visibility: hidden;
  }

  .grid-item a:hover figcaption {
    visibility: visible;
  }
}
/*Close media*/
@media print {
  body {
    width: 100%;
    margin: 0;
    padding: 1em;
    font-size: 9pt;
    line-height: 1.5;
  }

  #logo, h1, h2, h3, h4, h5, h6 {
    font-size: 12pt;
  }
}
/*Close media*/

/*# sourceMappingURL=style.css.map */