@font-face {
  font-family: mainfont;
  src: url('../assets/fonts/DMSans_24pt-Regular.ttf');
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: monospace;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

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; /* 1 */
  font-size: 1em; /* 2 */
}
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; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}


[hidden] {
  display: none;
}


/* Site specific CSS
   ========================================================================== */
   body, html {
    width: 100%;
    height: 100%;
  }
  


body {
  margin: 0;
  padding: 0;
  font-family: mainfont;
  background: #111619;
  color: #FFF;
}

.hero {
    background-color: #000;
    background-image:url('../assets/bg/c53d13bb-8998-41d2-8e0e-0f2bba8fadcb.png');
    background-size: cover;
    background-position: center;    
    width: 100%;
    min-height: 50vh;
    display: block;
}

.bg1 {
  background: rgba(17, 22, 25, 0.65);
  padding: 2rem;
  display:inline-block;
  border-radius: 0.25rem;
  
}

.logo-hero {
  filter: drop-shadow(0px 0px 12px rgb(0 0 0 / 0.8));
  width: 100%;
  max-width: 28rem;
}

.bg2 {
  background: rgba(17, 22, 25, 0.85);
  padding: 2rem;
  display:inline-block;
  font-size: 2.4rem;
  font-weight: bold;
  border-radius: 0.25rem;
}

.f-green {
  color: #5dbd72;
}
.f-yellow {
  color: #f5b13c;
}
.f-orange {
  color: #f1824f;
}
.f-blue {
  color: #269e94;
}
.f-red {
  color: #e2376e;
}


.bg2-norm {
  font-weight: normal;
  font-size: 1.2rem;
}

.container {
  width:100%;
  max-width:64rem;
  margin:0 auto;
  padding:0 2rem;
  display:block;
  box-sizing: border-box;
}

.t-spacer-4 {
  margin-top:4rem;
}
.t-spacer-2 {
  margin-top:2rem;
}
.t-spacer-1 {
  margin-top:1rem;
}

.b-spacer-4 {
  margin-bottom:4rem !important;
}

.tagfont {
  font-family: mainfont;
  letter-spacing: 0.05rem;
  line-height: 1.5rem;
}

/* green #5dbd72 */
/* yellow #f5b13c */
/* orange #f1824f */
/* blue #269e94 */
/* red #e2376e */
/* dark #111619 */

.btn {
  display: inline-block;
  padding: 0.8rem 1.2rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-family: mainfont;
  filter: drop-shadow(0px 0px 20px rgba(0 0 0 0.8));
  font-weight: bold;
  box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.3);
}

.btn-primary {
  background-color: rgb(92, 188, 113);
  color: #FFF;
  background: linear-gradient(0deg, rgba(84, 180, 105,1) 0%, rgba(100, 196, 121,1) 100%);
}

nav {
  padding: 2rem 0;
  
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
}
nav .logo {
  max-height: 2rem;
  vertical-align: middle;
}

nav ul {
  display: inline-block;
  list-style: none;
  vertical-align: middle;
}
nav ul li {
  display: inline-block;

}
nav ul li a {
  font-family: mainfont;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-decoration: none;
  color: #FFF;
  display: inline-block;
}

.hover-green:hover {
  color: #5dbd72;
}
.hover-orange:hover {
  color: #f1824f;
}
.hover-blue:hover {
  color: #269e94;
}
.hover-red:hover {
  color: #e2376e;
}

h1,h2,h3 {
  font-family: mainfont;
}

h1 {
  margin-top: 4rem;
}

footer {
  font-size: 0.8rem;
  color: #BBB;
  padding: 2rem 0;
  background: #000;
  height: 2rem;
}

.footer-icon {
  width: 4rem;
  max-width: 2rem;
  max-height: 2rem;
}

.email {
  text-decoration: none;
  font-size: 2rem;
  color:#5dbd72;
  vertical-align: middle;
}
.email img {
  width: 2rem;
}
.email-link {
  text-decoration: none;
  color:#FFF;
}

.main-wrapper {
  min-height: calc(100vh - 6rem);
}

.project-image {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.25rem;
  display: block;
}

.project-image img {
  width: 100%;
  max-width: 100%;
}

.project-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}
.project-info {
  padding-left: 0;
}

.project-image {}

.project-wrapper + .project-wrapper {
  margin-top: 2rem;
}

.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(17, 22, 25, 0.92);
}

section {
  line-height: 1.5rem;
}

.hide-mobile {
  display: none;
}

nav {
  text-align: center;
}

.contact-email {
  font-size: 1.5rem;
}

@media (min-width: 720px) {
  nav {
    text-align: left;
  }
  .contact-email {
    font-size: 2.0rem;
  }
  .project-wrapper {
      grid-template-columns: 18rem 1fr;
  }
  .hide-mobile {
    display: inline;
  }
  .project-image {
    width: 18rem;
  }
  .project-info {
    padding-left: 2rem;
  }
}

/*
body {
  transition: all 0.5s ease-out;
}
  */