/* Custom styles */
body { 
   font-family: Poppins !important; 
}

.navbar {
   padding: 0 !important;
}

.JSPhdLogo {
   font-family: 'Poppins', sans-serif !important;
   font-weight: 600;
   letter-spacing: -1px;
   font-size: 1.2em;
   color: #252525;
}

#JSNav {
    max-width: 1400px;
}

#navbar-links {
    margin-left: auto !important;
    margin-right: 13px !important;
}

.navbar-brand {
    display: flex;
    align-items: flex-start;
    margin-right: auto;
    margin-left: 2em;
    padding-top: 0px;
}

.nav-item {
   padding: 1.2em 0.8em 1.2em 0.8em;
   font-size: small;
}

.nav-item a {
   color: #b50707;
}

.nav-item:hover {
   background-color: #e0e0e0 !important;
   transition: color 0.15s ease-in-out, background-color 0.65s ease-in-out, border-color 0.15s ease-in-out;
}

.navSelected {
   background-color: #b50707 !important;
}

.navSelected a {
   color: #fff;
}

.nav-link:hover {
   color: #000;
}

.navSelected .nav-link:hover {
   color: #000;
}

.bg-image-home {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top right;
    clip-path: ellipse(130% 110% at 50% -10%);
    background-attachment: fixed;
}

.bg-image-othrpgs {
   position: relative;
   overflow: hidden;
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: top right;
   clip-path: ellipse(110% 110% at 50% -10%); 
   background-attachment: fixed;
}

.clipper-fixer {
    position: relative;
    top: 25vh;
}

.formButton {
   text-transform: unset !important;
   margin: 5px 0;
}

.formButton span {
   transform: rotate(0deg);
}

h1.display-weight {
   font-weight: 500;
   letter-spacing: -1px;
}

#JS-Photo {
   width: 80%;
   margin-top: 1.5em;
}

.photo-caption {
   margin-top: .8em;
   font-size: .6em;
   color: #95a5b9;
}

.form-bg {
   background-color: #fff !important;
}

.form-container {
   padding: 6em 1em 7em 1em;
}

.form-left {
   padding-right: 2em;
   text-align: right;
}

.form-right {
   padding-left: 2em;
   border-left: #cccccc 1px solid;
}

.card-container {
  display: flex;
  justify-content: flex-end;
  padding-left: 1em;
}

.card-container .card {
  width: fit-content;
}

@media (max-width: 1260px) {
   .JSPhdLogo {
      font-size: 1em;
   }
}

@media (max-width: 1090px) {
   .JSPhdLogo {
      font-size: .7em;
   }
}

@media (max-width: 992px) {
   .navbar-brand {
      margin-left: .2em;
      padding-top: 0px;
   }

   .nav-item {
      padding: .2em 0.8em .2em 0.8em;
      font-size: small;
   }

   #JS-Photo {
      width: 100%;
   }

   .formButton {
      margin: 5px 0;
   }

   .card-container {
     width: 100%;
   }

   .card-container .card {
     width: 100% !important;
   }

   /*.col-md-6 {
     padding-left: 0 !important;
   }*/
}

@media (max-width: 770px) {
   #JS-Photo {
      width: 60%;
   }

   .form-container {
      padding: 1em 1em 5em 1em;
   }

   .form-left {
      padding-right: 0;
      text-align: left;
   }

   .form-right {
      padding: 0 1em;
      border-left: none;
   }

   .card-container {
      justify-content: center;
      padding-left: 0;
   }

   .card-container .card {
      width: 100% !important;
   }
}

@media (max-width: 668px) {
  .form-right {
    padding-top: 3em !important;
  }
  .form-left {
    margin-top: 4em !important;
  }
}

/* Form button icon animation */
.formButton .far,
.formButton .fas {
  transition: transform 0.2s ease-in-out;
  transform-origin: center;
  transform: scale(0.75);
  margin-left: 4px;
}

.formButton[aria-expanded="true"] .far,
.formButton[aria-expanded="true"] .fas {
  transform: rotate(180deg) scale(0.75);
}