body {
  background-color: #030303;
}

.brand-color {
  color: #74c3ff !important;
}

h1,
h2,
h3,
h4 {
  font-family: "Oswald", sans-serif;
}

p > a {
  color: #74c3ff !important;
  transition: 0.2s ease-in-out;
}
p > a:hover {
  text-decoration: underline;
  transition: 0.2s ease-in-out;
}

/* 
NAVBAR ==============================================================
*/
@media screen and (min-width: 768px) {
  .navbar {
    transition: 0.2s ease-in-out;
    position: fixed;
    width: 100%;
    padding: 16px;
    background-color: transparent !important;
  }
}
@media screen and (max-width: 767px) {
  .navbar > .navbar-logo > img {
    max-width: 120px;
    transition: 0.2s ease-in-out;
  }
}
@media screen and (min-width: 768px) {
  .navbar > .navbar-logo > img {
    max-width: 180px;
    transition: 0.2s ease-in-out;
  }
}
@media screen and (min-width: 768px) {
  .navbar.minimized {
    z-index: 2;
    transition: 0.2s ease-in-out;
    width: 100%;
    background: rgba(0, 0, 0, 0.9) !important;
  }
}
.navbar.minimized > .navbar-logo > img {
  max-width: 140px;
  transition: 0.2s ease-in-out;
}
@media screen and (min-width: 768px) {
  .navbar .navbar-collapse {
    justify-content: flex-end;
  }
}
@media screen and (max-width: 767px) {
  .navbar .navbar-collapse {
    padding: 5%;
  }
}
.navbar .navbar-collapse > .navbar-nav {
  margin-right: 0 !important;
  gap: 10%;
  justify-content: flex-end;
}
.navbar .navbar-collapse > .navbar-nav > .nav-item {
  font-family: "Oswald", sans-serif;
}
@media screen and (max-width: 767px) {
  .navbar .navbar-collapse > .navbar-nav > .nav-item {
    font-size: 1.5rem;
  }
}
.navbar .navbar-collapse > .navbar-nav > .nav-item .nav-link {
  color: #fff !important;
  font-size: 20px;
  transition: 0.2s ease-in-out;
}
@media screen and (max-width: 767px) {
  .navbar .navbar-collapse > .navbar-nav > .nav-item .nav-link {
    text-align: center;
  }
}
.navbar .navbar-collapse > .navbar-nav > .nav-item .nav-link:hover {
  color: #ddd !important;
  text-decoration: underline;
  text-decoration-color: #74c3ff;
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
  transition: 0.2s ease-in-out;
}

/* END NAVBAR ======================================== */
@media screen and (max-width: 767px) {
  main.container {
    padding-top: 5%;
  }
}
@media screen and (min-width: 768px) {
  main.container {
    padding-top: calc(3% + 92px);
  }
}
@media screen and (max-width: 1199px) {
  main.container {
    max-width: 100% !important;
  }
}
@media screen and (min-width: 1200px) {
  main.container {
    max-width: 1920px !important;
  }
}
@media screen and (min-width: 1200px) {
  main.container.project {
    max-width: 1200px !important;
  }
}
@media screen and (max-width: 767px) {
  main.container.portfolio {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  main.container.portfolio ul,
  main.container.portfolio ol {
    text-align: left;
  }
}

@media screen and (max-width: 575px) {
  div.contact-col {
    text-align: center;
  }
}
div.contact-col h4 {
  margin-top: 3%;
}
div.contact-col h4:not(:last-child) {
  margin-top: 5%;
}

h1,
.accent-color {
  color: #74c3ff !important;
}

@media screen and (min-width: 600px) and (max-width: 767px) {
  h1 {
    font-size: 2.2rem;
  }
}
@media screen and (max-width: 599px) {
  h1 {
    font-size: 1.8rem;
  }
}

.secondary-color {
  color: #aaa !important;
}

.profile-img {
  width: 100%;
  border-radius: 50px;
}
@media screen and (max-width: 576px) {
  .profile-img {
    margin-bottom: 8%;
  }
}

h2 {
  color: #fff;
  font-weight: 200;
}
@media screen and (min-width: 768px) {
  h2 {
    font-size: 1.75rem !important;
  }
}
@media screen and (max-width: 767px) {
  h2 {
    font-size: 1.2rem !important;
  }
}

h3 {
  color: #74c3ff !important;
  margin-bottom: 16px;
}

h4 {
  color: #fff;
}

p,
ul,
ol {
  color: #fff !important;
}

@media screen and (min-width: 992px) {
  div.row:last-of-type {
    margin-bottom: 0;
    border-bottom: none !important;
  }
}

div.video-notes {
  padding: 3% 12% 3% 0;
}

script + .video-notes {
  margin-top: 2%;
}

img.pdf-icon {
  max-width: 24px;
  margin-right: 8px;
}

iframe {
  margin-top: 2%;
}

footer {
  text-align: center;
  background-color: #030303;
}
@media screen and (min-width: 768px) {
  footer {
    padding: 6% 0;
  }
}
@media screen and (max-width: 767px) {
  footer {
    padding: 10% 0;
  }
}
footer > h3 {
  font-size: 3rem;
}
footer > h4 {
  font-size: 1.2rem;
  margin-bottom: 48px;
}
footer > p:last-child {
  margin-top: 24px;
  color: #aaa !important;
}

@media screen and (min-width: 768px) {
  .title-row {
    margin-top: 10%;
  }
}
@media screen and (max-width: 767px) {
  .title-row {
    margin-top: 16%;
  }
}

@media screen and (min-width: 768px) {
  .thumbnail-row {
    margin-top: 2%;
    margin-bottom: 3%;
  }
}
@media screen and (max-width: 767px) {
  .thumbnail-row {
    margin-top: 3%;
  }
}
.thumbnail-row > .col-lg {
  position: relative;
}
.thumbnail-row > .col-lg img.thumbnail {
  width: 100%;
  border: solid 1px #444;
}
.thumbnail-row > .col-lg img.play-video {
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  filter: drop-shadow(4px 4px 3px #111);
}
@media screen and (max-width: 767px) {
  .thumbnail-row > .col-lg + .col-lg {
    margin-top: 3%;
  }
}

.moment-image {
  width: 100%;
}

/* NEW PAGE STYLING */
@media screen and (max-width: 767px) {
  .row-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .row-thumbnails {
    display: grid;
    grid-template-columns: auto auto;
    gap: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .row-thumbnails {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 8px;
  }
}
.row-thumbnails .div-thumbnail {
  position: relative;
}
.row-thumbnails .div-thumbnail a > .thumbnail {
  max-width: 100%;
  transition: 0.2s ease-in-out;
}
.row-thumbnails .div-thumbnail a > .text-hover {
  display: none;
  color: #fff;
  text-align: center;
  position: absolute;
  left: 0;
  top: 45%;
  width: 100%;
  font-weight: bold;
  filter: drop-shadow(0px 2px 0px black);
  transition: 0.2s ease-in-out;
}
@media screen and (max-width: 599px) {
  .row-thumbnails .div-thumbnail a > .text-hover {
    font-size: 16px;
  }
}
@media screen and (min-width: 600px) {
  .row-thumbnails .div-thumbnail a > .text-hover {
    font-size: 24px;
  }
}
.row-thumbnails .div-thumbnail a:hover > .thumbnail {
  opacity: 0.3;
  filter: blur(2px);
  transition: 0.2s ease-in-out;
}
.row-thumbnails .div-thumbnail a:hover > .text-hover {
  display: block;
  transition: 0.2s ease-in-out;
}

@media screen and (max-width: 599px) {
  footer {
    padding: 60px 16px !important;
  }
}
@media screen and (max-width: 599px) {
  footer p {
    font-size: 0.8rem !important;
  }
}
footer p .copyright {
  font-size: 12px !important;
}
footer img {
  max-width: 24px;
  margin: 24px;
  transition: 0.2s ease-in-out;
}
footer img:hover {
  opacity: 0.5;
  transition: 0.2s ease-in-out;
}

.back-button {
  text-align: center !important;
}
.back-button .btn-primary {
  background-color: transparent !important;
  color: #74c3ff !important;
  border-color: #74c3ff !important;
  transition: 0.2s ease-in-out;
}
.back-button .btn-primary:hover {
  color: #eee !important;
  border-color: #eee !important;
  transition: 0.2s ease-in-out;
}

@media screen and (max-width: 767px) {
  .moments-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 80px;
  }
}
@media screen and (min-width: 768px) {
  .moments-row {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 8px;
  }
}
.moments-row > .moment > img {
  max-width: 100%;
}

.back-button-row {
  margin-top: 80px;
}

@media screen and (max-width: 767px) {
  .container.project .vimeo-row {
    margin-top: 24px;
  }
}

.tools-container {
  text-align: center;
  margin-top: 6%;
}
.tools-container h4 {
  font-weight: 300 !important;
}
.tools-container .tools-row {
  display: flex;
  justify-self: center;
  margin-top: 24px;
}
@media screen and (max-width: 599px) {
  .tools-container .tools-row .tools img {
    max-height: 30px;
  }
}
@media screen and (min-width: 600px) {
  .tools-container .tools-row .tools img {
    max-height: 40px;
  }
}

.intro-row {
  margin-bottom: 30px;
}
@media screen and (max-width: 599px) {
  .intro-row {
    flex-direction: column-reverse;
    gap: 32px;
  }
}
@media screen and (max-width: 599px) {
  .intro-row .col {
    flex-basis: auto !important;
    -webkit-box-flex: 1 !important;
  }
}
@media screen and (max-width: 599px) {
  .intro-row .back-button {
    text-align: left !important;
  }
}
@media screen and (min-width: 600px) {
  .intro-row .back-button .btn {
    float: right;
  }
}

.row.row-about {
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}
.row.row-about img.image-at {
  max-width: 100%;
}
@media screen and (max-width: 599px) {
  .row.row-about img.image-at {
    margin-bottom: 36px;
  }
}
.row.row-about .row {
  border-top: solid 1px #666;
  margin-top: 46px;
  padding-top: 48px;
}
@media screen and (max-width: 599px) {
  .row.row-about .row {
    flex-direction: column-reverse;
  }
}

.process-row {
  margin-top: 6%;
}
.process-row .process-content {
  max-width: 700px;
}
@media screen and (min-width: 1248px) {
  .process-row .process-content {
    padding-bottom: 48px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1247px) {
  .process-row .process-content {
    padding: 24px 24px 60px 24px;
  }
}
@media screen and (max-width: 767px) {
  .process-row .process-content {
    padding: 24px 24px 0px 24px;
  }
}
.process-row.extra-margin {
  margin-top: 12% !important;
}

.vimeo-row + .vimeo-row {
  margin-top: 5%;
}
.vimeo-row + .moments-row {
  margin-top: 7%;
}
.vimeo-row + .moments-row + .moments-row {
  margin-top: 7%;
}

.index-header {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .index-header {
    margin-bottom: 8%;
  }
}
@media screen and (max-width: 767px) {
  .index-header {
    margin-bottom: 12%;
  }
}
@media screen and (min-width: 768px) {
  .index-header h1 {
    font-size: 4rem;
  }
}
@media screen and (max-width: 767px) {
  .index-header h1 {
    font-size: 2.8rem;
  }
}

#paypal-container-S7LZJEXLKYJEQ #paypal-form-fields-container-S7LZJEXLKYJEQ {
  justify-content: center;
}
#paypal-container-S7LZJEXLKYJEQ form label.input-label {
  color: #fff !important;
}