header {
  width: 99%;
  }
  
  body {
    font-family: 'Poppins', sans-serif;
    color: #edf3f1;
    margin: 0;
    background-color: #292929;
    padding: 1em;
  }
  
  h1, h2, h3 {
    font-family: 'Poppins', serif;
  }
  
  a {
    font-family: 'Poppins', sans-serif;
    text-decoration:none;
    color: #edf3f1;
    text-transform:uppercase;
  }
  
  a:hover {
    color: #ff4400;
  }

.headline {
  text-align: left;
  line-height: 6px;
  margin-right: 0 80px 30px 74px;
}

.headline p {
  font-family: 'Poppins', serif;
  text-align:left;
  text-transform: uppercase;
  font-size: 10pt;
}

.headline h2 {
  font-family: 'Poppins', serif;
  text-align:left;
  padding: 0;
  margin: 0;
}
      
h1 {
  font-family: 'Hoss-Round', sans-serif;
  color: #edf3f1;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 36px;
  font-weight: 700;
  margin: 30px;
}

.headline h1:hover {
  color: #ff4400;
}
  
  /* mobile */
  
  nav {
    display: block;
    text-align: center;
    margin: 0 auto;
  }
  
  .nav {
  
  }
  
  .nav1 li {
    display: block;
    text-align: center;
    padding-top: 5px;
  }
  
  .navlogo {
    width: 100px;
    margin: 5px auto;
    padding: 0px;
  }
  
  .social {
    display: inline;
    align-items:center;
    background-color: #292929;
    margin: 10px 0px 15px 0px;
  }
  
  nav img {
    width:100%;
    
  }
  
  .social img {
     width: 40px;
    margin: 15px auto;
  }
  
  ul {
    display: inline;
    padding:0;
    margin:0;
  }
  
  nav li {
    display: inline;
    padding:5px;
    list-style:none;
    color: #edf3f1;
  }
  
  .container a:hover {
    opacity:70%;
  }
  
  .container {
    width:100%;
    margin:0px auto;
    text-transform:uppercase;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
  }
  
  .container img {
    width:150px;
    margin:0px;
  }
    
    /* work items */
  
    .blurb1, .blurb2 {
      width:100%;
      padding: 0px;
      text-align: center;
      margin: 0;
    }
    
    .popup-gallery {
      width:100%;
      text-align: center;
      padding: 0px;
    }
  
    .work, .about {
      display:block;
      margin: 0 50px;
      text-align: center;
    }
    
    .work h2, .about h2 {
      font-weight: 500;
      margin: 15px 0px 0px 0px;
      padding: 0px;
      text-align: center;
    }
    
    .work h3, .about h3 {
      text-align: center;
      font-size: 9pt;
      font-weight:200;
      margin-top: 5px;
      margin-bottom: 15px;
    }
    
    .work p, .about p {
      font-weight: 300;
    }
    
    .work img {
      margin:10px;
      padding:0px;
    }
      
    .work a:hover {
      opacity:50%;
      transition: all 0.2s ease;
    }

.container h3 {
      font-size: 9pt;
      font-weight:400;
      margin:0;
      padding-top:4px;
      text-transform: none;
      }
      
      .tile {
        margin: 10px;
      }

.about {
      text-align: center;
    }
      
        .about h2 {
      font-weight: 500;
      margin: 0px;
      padding: 0px;
        text-align: center;
    }
    
    .about h3 {
        text-align: center;
      font-size: 11pt;
      font-weight:200;
      margin-top: 5px;
      margin-bottom: 35px;
    }

      .about img {
        width: 100%;
        margin-bottom:20px;
      }
  
    footer {
      font-size:9pt;
      background-color:#292929;
      padding:40px;
      margin: 50px auto;
      text-align:center;
      line-height:1.2;
    }

    .formcarry-container * {
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
    
      /* colors */
      --color-blue: #2552d0;
      --color-light-blue: #3266e3;
      --color-gray: #edf3f1;
      --color-dark-gray: #9da3ae;
      --color-pink: #ff4400;
    }
    
    .formcarry-container {
      /* container */
      --c-width: 50%;
      --c-max-width: 500px;
    
      width: var(--c-width);
      max-width: var(--c-max-width);
      display: block;
      margin: 10vh auto 0 auto;
    }
    
    .formcarry-form label {
      display: block;
      padding: 14px 0 2px 0;
      letter-spacing: -0.2px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 300;
    }
    
    .formcarry-form input,
    .formcarry-form textarea {
      font-size: 16px;
      display: block;
      width: 100%;
      padding: 10px;
      background-color: var(--color-gray);
      border: none;
      border: 4px solid var(--color-gray);
      outline: none;
      border-radius: 8px;
      color: var(--color-dark-gray);
    }
    
    .formcarry-form input:focus,
    .formcarry-form textarea:focus {
      background-color: #fff;
      color: var(--color-dark-gray);
      border: 4px solid #ff4400;
      outline: none;
      border-radius: 8px;
    }
    
    .formcarry-form input:focus:required:invalid {
      border-color: #ff4400;
      background-color: #fff;
    }
    
    .formcarry-form button {
      display: block;
      margin-top: 14px;
      width: 100%;
      padding: 12px 20px;
      border-radius: 8px;
      border: solid 3px #edf3f1;
      background-color: transparent;
      color: #edf3f1;
      font-weight: 400;
      font-size: 18px;
      transition: 200ms all;
    }
    
    .formcarry-form button:hover {
      color: #ff4400;
      border: solid 3px #ff4400;
    }
    
    .formcarry-alert {
      padding: 12px;
      border-radius: 10px;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      margin-top: 12px;
      display: none;
    }
    
    .formcarry-alert.visible {
      display: block;
    }
    
    .formcarry-alert.success {
      background: #ff4400;
    }
    
    .formcarry-alert.error {
      background: #ff4400;
    }

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 300px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
  width: 300px;
  object-fit:none;
}

/* Caption text */
.text {
  color: #292929;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

#duglogo:hover {
  content: url('images/duglogo02.png');
  }
  
  #resumelogo:hover {
    content: url('images/resumelogo02.png');
    }
  
  #linkedlogo:hover {
    content: url('images/linkedlogo02.png');
    }

/*
nav img:hover {
  opacity:70%;
  transition: all 0.1s ease;
}
*/

.headline {
  align-items: center;
  line-height: 4px;
  margin-top:0;
  margin-bottom: 30px;
}

.headline p {
  font-family: 'Poppins', serif;
  text-align:center;
  text-transform: uppercase;
  text-size: 10pt;
}

.headline h2 {
  font-family: 'Poppins', serif;
  font-weight:400;
  font-size: 17pt;
  text-align:center;
  padding: 0;
  margin: 0;
}
      
.next {
  text-align:center;
  margin-top: 50px;
  line-height:1;
 } 
      
      .next h3 {
        font-weight: 400;
        transform-text: none;
        padding: 0;
        margin: 0;
      }

      .resume {
        text-align:center;
        margin-top: 50px;
      }

      .resume h3 {
        font-weight: 400;
        transform-text: none;
        padding: 0;
        margin: 0;
      }
      
h1 {
  font-family: 'Hoss-Round', sans-serif;
  color: #edf3f1;
  align-items: center;
  text-align: center;
  text-decoration: none;
  font-size: 36px;
  font-weight: 700;
  margin:0;
  padding: 0px;
}

h1:hover {
  color: #ff4400;
}

input[type="radio"] {
  display:none;
  padding: 15px;
}

input[type="radio"]:hover + label {
  background:#ff4400;
  color: #edf3f1
}

label {
  display: none;
  width:100%;
  float:left;
  text-align:LEFT;
  background:#292929;
  color:#edf3f1;
  padding:1px;
  margin:10px 1.6% 5px 0;
  cursor:pointer;
}

.hero-work {
  width:auto;
  height:200px;
  padding: 0px
}
    
    @media screen and (min-width: 800px){
    
    /* Header and Navigation */
    
  
.headline {
  text-align: left;
  line-height: 4px;
  margin-left: 74px;
  margin-top:0;
  margin-bottom: 40px;
}

.headline p {
  font-family: 'Poppins', serif;
  text-align:left;
  text-transform: uppercase;
  text-size: 10pt;
}

.headline h2 {
  font-family: 'Poppins', serif;
  font-weight:400;
  font-size: 17pt;
  text-align:left;
  padding: 0;
  margin: 0;
}
      
.next {
  text-align:center;
  margin: 50px 75px 0 75px;
  line-height:1;
 } 
      
      .next h3 {
        font-weight: 400;
        transform-text: none;
        padding: 0;
        margin: 0;
      }

.buttons {
  display: flex;
  justify-content: center;
}
      
h1 {
  font-family: 'Hoss-Round', sans-serif;
  color: #edf3f1;
  align-items: center;
  text-align: center;
  text-decoration: none;
  font-size: 36px;
  font-weight: 700;
  margin:0;
  padding: 0px;
}

h1:hover {
  color: #ff4400;
}
    
    nav {
      width:97%;
      display:flex;
      justify-content: space-between;
      background-color: #292929;
    }
    
    .nav {
      display:flex;
      justify-content:flex-start;
    }
    
    .nav1 {
      display:flex;
      text-align:left;
      padding-top: 5px;
    }
      
    .nav1 li {
      padding: 15px 20px 
    }
    
    .navlogo {
      margin: 15px 15px 5px 50px;
      padding: 0px 0px 0px 0px;
    }
    
    .social {
      text-align:right;
      background-color: #292929;
      margin: 0px 50px 20px 0px;
    }
    
    nav img {
      width:100px;
    }

    #duglogo:hover {
      content: url('images/duglogo02.png');
      }
      
      #resumelogo:hover {
        content: url('images/resumelogo02.png');
        }
      
      #linkedlogo:hover {
        content: url('images/linkedlogo02.png');
        }

    /*
    nav img:hover {
      opacity:70%;
      transition: all 0.1s ease;
    }
    */
    
    .social img {
      width: 40px;
    }
    
    /* Main */
    
    .tile:hover {
      color:#ff4400;
    }
    
    .container {
      width:100%;
      margin:0px 30px 0px 40px;
      text-transform:uppercase;
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-start;
    }
    
    .container img {
      width:250px;
      margin:0px;
    }
  
    .container img:hover {
      opacity:70%;
    }
      
    .container h3 {
      font-size: 10pt;
      font-weight:300;
      margin:0;
      padding-top:4px;
      text-transform: none;
      }
      
      .tile {
        margin: 25px 35px;
      }
  
    /* work items */

    .award {
      padding: 1px 20px 1px 4px;
      background-color: #edf3f1;
      color: #292929;
    }
      
    .work, .about {
      display:flex;
    }
      
      .about img {
        padding: 10px 22px;
        width: 480px;
      }
    
    .blurb1 {
      width:40%;
      border-right:solid 1px;
      padding: 0px 50px;
      text-align: right;
      margin: 0;
    }
      
    .blurb2 {
      width:50%;
      padding: 0px 50px;
      text-align: left;
      margin: 0;
    }
    
    .popup-gallery {
      width:60%;
      text-align: left;
      padding: 6px 50px;
    }
    
    .about {
      text-align: center;
      align-content: center;
    }
    
    .work h2 {
      font-weight: 500;
      margin: 0px;
      padding: 0px;
        text-align: right;
    }
    
    .work h3 {
        text-align: right;
      font-size: 11pt;
      font-weight:200;
      margin-top: 5px;
      margin-bottom: 35px;
    }
      
        .about h2 {
      font-weight: 500;
      margin: 0px;
      padding: 0px;
        text-align: left;
    }
    
    .about h3 {
        text-align: left;
      font-size: 11pt;
      font-weight:200;
      margin-top: 5px;
      margin-bottom: 35px;
    }
    
    .work p {
      font-weight: 300;
    }
    
    .work img {
      margin:10px;
      padding:0px;
    }
      
    .work a:hover {
      opacity:50%;
      transition: all 0.2s ease;
    }
      
      .hero-work {
        object-fit:cover;
        width:100%;
        height:300px;
        padding: 6px 50px
      }

      iframe {
        padding:5px;
      }
    
    footer {
      font-size:9pt;
      background-color:#292929;
      padding:40px;
      margin: 50px auto;
      text-align:center;
      line-height:1.2;
    }

    /* filter stuff */

.container {
  width:90%;
  margin:0 auto;
  text-transform:uppercase;
}

input[type="radio"] {
  display:none;
  padding: 15px;

}

input[type="radio"]:hover + label {
  background:#ff4400;
  color: #edf3f1
}

.container label {
  display: block;
  width:15%;
  float:left;
  text-align:center;
  background:#292929;
  color:#edf3f1;
  padding:1px;
  margin:10px 1.6% 35px 0;
  cursor:pointer;
}

.tile {
  width:18%;
    text-transform:uppercase;
    float:left;
  margin:0 2% 2% 0;
  padding:0;
}

.container img {
    width:100%;
  }

input[type="radio"][id="reset"]:checked + label {
  background:#ff4400;
}

input[type="radio"][id="category-1"]:checked + label {
  background:#ff4400;
}

input[type="radio"][id="category-1"]:checked ~ .reset, 
input[type="radio"][id="category-1"]:checked ~ .category-2,
input[type="radio"][id="category-1"]:checked ~ .category-3, 
input[type="radio"][id="category-1"]:checked ~ .category-4, 
input[type="radio"][id="category-1"]:checked ~ .category-5 {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

input[type="radio"][id="category-2"]:checked + label {
  background:#ff4400;
}

input[type="radio"][id="category-2"]:checked ~ .reset, 
input[type="radio"][id="category-2"]:checked ~ .category-1,
input[type="radio"][id="category-2"]:checked ~ .category-3, 
input[type="radio"][id="category-2"]:checked ~ .category-4, 
input[type="radio"][id="category-2"]:checked ~ .category-5 {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

input[type="radio"][id="category-3"]:checked + label {
  background:#ff4400;
}

input[type="radio"][id="category-3"]:checked ~ .reset, 
input[type="radio"][id="category-3"]:checked ~ .category-2,
input[type="radio"][id="category-3"]:checked ~ .category-1, 
input[type="radio"][id="category-3"]:checked ~ .category-4, 
input[type="radio"][id="category-3"]:checked ~ .category-5 {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

input[type="radio"][id="category-4"]:checked + label {
  background:#ff4400;
}

input[type="radio"][id="category-4"]:checked ~ .reset, 
input[type="radio"][id="category-4"]:checked ~ .category-2,
input[type="radio"][id="category-4"]:checked ~ .category-3, 
input[type="radio"][id="category-4"]:checked ~ .category-1, 
input[type="radio"][id="category-4"]:checked ~ .category-5 {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

input[type="radio"][id="category-5"]:checked + label {
  background:#ff4400;
}

input[type="radio"][id="category-5"]:checked ~ .reset, 
input[type="radio"][id="category-5"]:checked ~ .category-2,
input[type="radio"][id="category-5"]:checked ~ .category-3, 
input[type="radio"][id="category-5"]:checked ~ .category-4, 
input[type="radio"][id="category-5"]:checked ~ .category-1 {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

    .formcarry-container * {
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
    
      /* colors */
      --color-blue: #2552d0;
      --color-light-blue: #3266e3;
      --color-gray: #edf3f1;
      --color-dark-gray: #9da3ae;
      --color-pink: #ff4400;
    }
    
    .formcarry-container {
      /* container */
      --c-width: 50%;
      --c-max-width: 500px;
    
      width: var(--c-width);
      max-width: var(--c-max-width);
      display: block;
      margin: 10vh auto 0 auto;
    }
    
    .formcarry-form label {
      display: inline-block;
      padding: 14px 0 2px 0;
      letter-spacing: -0.2px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 300;
    }
    
    .formcarry-form input,
    .formcarry-form textarea {
      font-size: 16px;
      display: block;
      width: 100%;
      padding: 10px;
      background-color: var(--color-gray);
      border: none;
      border: 4px solid var(--color-gray);
      outline: none;
      border-radius: 8px;
      color: var(--color-dark-gray);
    }
    
    .formcarry-form input:focus,
    .formcarry-form textarea:focus {
      background-color: #fff;
      color: var(--color-dark-gray);
      border: 4px solid #ff4400;
      outline: none;
      border-radius: 8px;
    }
    
    .formcarry-form input:focus:required:invalid {
      border-color: var(--color-pink);
      background-color: #fff;
    }
    
    .formcarry-form button {
      display: block;
      margin-top: 14px;
      width: 100%;
      padding: 12px 20px;
      border-radius: 8px;
      border: solid 3px #edf3f1;
      background-color: transparent;
      color: #edf3f1;
      font-weight: 400;
      font-size: 18px;
      transition: 200ms all;
    }
    
    .formcarry-form button:hover {
      color: #ff4400;
      border: solid 3px #ff4400;
    }
    
    .formcarry-alert {
      padding: 12px;
      border-radius: 10px;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      margin-top: 12px;
      display: none;
    }
    
    .formcarry-alert.visible {
      display: block;
    }
    
    .formcarry-alert.success {
      background: #69cf9d;
    }
    
    .formcarry-alert.error {
      background: #de524c;
    }
      

}