body {
    font-family: 'Gudea', serif;
    margin-top: 2%;
}

p, ul {
    color:rgb(94, 94, 94);
}

h1, h2 {
    background-color: black;
    color: white;
    padding: 1%;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin: auto;
    font-size: 16px;
    display: inline;
    padding-left: 3%;
    padding-right: 3%;
}
h3 {
  border-bottom: rgba(226, 226, 226, 0.7);
  line-height: 1.25;
  font-family: 'Noto Sans JP',sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  color: rgb(27, 27, 27);
}
.skip-to-main-content-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: black;
  color: black;
  opacity: 0;
}
.skip-to-main-content-link:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  color:white;
}


nav{
  display: flex;
  width: 100%;
  height: 20%;
  align-items: center;
  justify-content: center;
}

a{
  text-decoration: none;
  color: rgba(0,0,0,0.8);
  margin: 0 13px;
}

#logo{
  width: 100%;
  height: 100%;
  text-align: center;
}
.topnav {
  overflow: hidden;
  background-color: #f0efef;
  margin-top:3%;
  display: flex;

}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  text-align: center;
  padding: 9px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav span {
    line-height: 50px;
}

/* Change the color of links on hover */
.topnav a:hover, nav a:hover,  .sidenav a:hover {
  border-bottom: 2px solid black;
}

.desktop-nav a:active, .sidenav a:active {
    border-bottom: 2px solid black;
}

.desktop-nav a {
    padding: .5%;
    font-size: 14px;
}



/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
.image img {
  width: 100%;
  height: 100%;
  }
  
  .image {
  position: relative;
  }
  
  .image figcaption{
  position: absolute;
  top: 50%;
  width: 100%;
  }

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: white; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  transition: 0.3s;
  text-transform: uppercase;
  letter-spacing: 2px;
}



/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}


#views {
  position: relative;
  height: 969px;
}

#about {
  position: absolute;
  text-align: center;
  margin-top: 5%;
  padding: 3%;
}

.about-sections p {
    color: black;
    font-size: 14px;
    line-height: 1.75;
    text-align: left;
    font-family: 'Noto Sans JP',sans-serif;
}

ul {
  text-align: left;
}

#about h3 span {
  border-bottom: 1px solid rgba(226, 226, 226, 0.7);
  padding: 1%;
}

#subscribe {
  height: 415px;
}

.subscribe {
  width: 100%;
}

footer {
  text-align: center;
  border-top: 1px solid rgb(226, 226, 226);
  margin-top: 110px;
}

footer a {
  margin: 0;
}

/* SERVICES HTML */
#services-cards {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

h1 {
    margin-bottom: 10px;
}

  .cards {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 40px;
    font-family: 'Gudea', sans-serif;
    justify-content: center;
  }
  
  .cards img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
  }
  
  .cards_item {
    display: flex;
    padding: 1rem;
  }
  
  @media (min-width: 675px) {
    .cards_item {
      width: 45%;
    }
  }
  
  @media (min-width: 1025px) {
    .cards_item {
      width: 30%;
    }
  }
  
  .card-prod {
    background-color: white;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
    #services-cards .card_content {
      padding: 1rem;
      height: 100%;
    }
    .card_title {
      font-size: 1.25rem;
      font-weight: 300;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin: 0px;
      padding: 2%;
      border-bottom: 1px solid rgba(226, 226, 226, 0.7);
    }
  
    .card_text {
      font-size: 0.975rem;
      line-height: 1.5;
      margin-bottom: 1.25rem;    
      font-weight: 400;
    }


/*-- -------------------------- -->
<---       clients       -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #client-list {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #client-list .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #client-list .cs-content {
    text-align: center;
    width: 100%;
    display: contents;
    flex-direction: column;
    align-items: flex-start;
  }
  #client-list .cs-title {
    margin: 0;
    max-width: 23ch;
    text-align: center;
  }
  #client-list .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 20px - 40px */
    column-gap: clamp(1.25rem, 1.9vw, 2.5rem);
    /* 24px - 40px */
    row-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  #client-list .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    gap: 1rem;
  }
  #client-list .cs-item:hover {
    cursor: pointer;
  }
  #client-list .cs-item:hover .cs-link {
    opacity: 1;
  }
  #client-list .cs-item:hover .cs-name {
    color: var(--primary);
  }
  #client-list .cs-item:hover .cs-picture:after {
    opacity: 1;
  }
  #client-list .cs-item:hover .cs-picture img {
    transform: scale(1.1);
  }
  #client-list .cs-picture {
    width: 100%;
    /* 300px - 380px */
    height: clamp(18.75rem, 35vw, 23.75rem);
    /* clips img tag from overflowing it on hover */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #client-list .cs-picture:after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 39.89%);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    transition: opacity 0.3s;
  }
  #client-list .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* makes sure the top of the image is at the top of the parent, heads won't get cut off this way */
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform 0.7s;
  }
  #client-list .cs-info {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    gap: 0.25rem;
    text-align: center;
  }
  #client-list .cs-name {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #client-list .cs-job {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    display: block;
  }
  #client-list .cs-link {
    gap: 0.5rem;
    position: absolute;
    right: 0.5rem;
    bottom: 4.5rem;
    z-index: 1;
    padding: 0.5rem;
    opacity: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #client-list .cs-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}
/* Tablet - 500px */
@media only screen and (min-width: 31.25rem) {
  #client-list .cs-item {
    grid-column: span 6;
  }
}
/* Small Desktop - 850px */
@media only screen and (min-width: 53.125rem) {
  #client-list .cs-item {
    grid-column: span 3;
  }
}
                                





/* ABOUT HTML */
.wrapper { 
    overflow:hidden;
    margin-top: 40px;
  }
  
  .wrapper div {
     padding: 10px;
  }
  #one {
    float:left; 
    width:50%;
    text-align: center;
  }
  #one img {
      width: 75%;
  }
  #two { 
    background-color: white;
    margin:10px;
    min-height:170px;
  }

  #two ul {
    text-align: center;
    padding: 0;
  }
  
  @media screen and (max-width: 675px) {
     #one { 
      float: none;
      margin-right:0;
      width:auto;
      border:0;
    }
  }

  #us {
      text-align: center;
      margin-top: 40px;

  }

  .about-cards_item {
      list-style: none;
  }

  #two button {
      text-align: center;
      background-color: black;
      color: white;
      padding: 1%;
      text-transform: uppercase;
      letter-spacing: 5px;
      margin: auto;
      font-size: 16px;
      display: inline;
      padding-left: 3%;
      padding-right: 3%;
      font-family: 'Gudea',sans-serif;
  
  }

  #two button a {
      color: white;
  }

  #aboutus {
    text-align: center;
    margin-top: 40px;
  }

  #aboutus h3 {
    margin-top: 40px;
    font-family: 'Gudea';
    font-size: 24px;
    padding-bottom: 1%;
  }

  /* CONTACT */
  #form {
    height: auto;
  }
  #openform {
    background-color: transparent;
    text-align: center;
    padding: 1%;
    color: black;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin: auto;
    font-size: 16px;
    display: inline;
    padding-left: 3%;
    padding-right: 3%;
    font-family: 'Gudea',sans-serif;
  }
  
  .contactinfo {
    padding-bottom: 5%;
  }
  
  #ghost-form {
    text-align: center;
    width: 100%;
    margin: auto;
  }
  
  #views {
    margin-top:20px;
    height: 950px;
  }

  #subscribe {
    position: relative;
    text-align: center;
  }


  /* .image {
    width: 70%; 
    margin: auto;
  } */

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


/* RESPONSIVE MEDIA */
@media screen and (max-width:675px) {
  .topnav a {
      display: none;
  }
  .topnav a.icon {
    display: block;
    font-size: 1.5rem;
  }

  .desktop-nav {
      display: none;
  }
  .image figcaption {
    position: relative;
    /* width: 60%; */
    margin-top: 1%;
    text-align: center;
  }

  figure .image {
    width: 100%;
  }

  .about-img {
    display: none;
  }
  #views {
    margin-bottom: 13%;
  }
  #about {
    background-image: url(img/about-bk.jpg);
    background-size: cover;
    background-position: center;
  }
  #views {
    height: 800px;
  }
  .about-container {
    background-color: #ffffffcf;
    padding: 5%;

  }
}

@media screen and (min-width:676px) {
   .mobile-nav {
      display: none;
  }
  #views img {
    height: 700px;
  }

  #about {
    width: 60%;
    background-color: #fffffff7;
    position: relative;
    transform: translate(11%, -43rem);
    padding: 3%;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .2);
  }
  .views img {
    height: 700px;
  }
  #views {
    height: 825px;
  }
}

@media screen and (max-width: 375px) {
  #views {
    height: 1065px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 675px) {
  .topnav.responsive {
      position: relative;
      width: 100%;
      margin-right:0;
      background-color: rgb(255,224,227);
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
    font-size: 3rem;
  }

  .topnav {
      background-color: transparent;
  }      
  .subscribe {
    margin-top: 150px;
  }

} 





/* TEMP BLOG POPUP */
/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 14px;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}