/* Core */
html {
  margin: 0px;
  padding: 0px;
}

body {
  position: absolute;
  min-width: 100% !important;
  min-height: 100% !important;
  background-color: var(--waveColor);
}

a {
  text-decoration: none;
}

h1 {
  font-size: 5rem;
  font-family: 'Josefin Sans', sans-serif;
  text-shadow: 4px 0px var(--waveColor);
}

h2 {
  font-size: 3.5rem;
  font-family: 'Josefin Sans', sans-serif;
  text-shadow: 2px 2px var(--waveColor);
}

h3 {
  font-size: 2rem;
}

h4 {
  font-family: 'Maven Pro', sans-serif;
  color: var(--waveColor);
  font-size: 2rem;
}

h5 {
  font-size: 2.5rem;
  font-family: 'Maven Pro', sans-serif;
  font-weight: 400;
  text-shadow: 0px 0px 5px var(--waveColor);
}

.card-text {
  color: rgb(0, 0, 0);
  padding: 0px;
  font-size: 1.3rem;
}

.justifyText {
  text-align: justify;
}

footer {
  height: 150px;
  width: 100%;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  background-color: #102136;
}

footer p {
  color: rgba(255, 255, 255, 1);
  padding: 0px;
  margin: 0px;
}

#footer-bg {
  opacity: .3;
  width: 100%;
}

/* Global */
:root {
  --waveColor: rgb(18 33 56);
  --waveColorLight: rgb(28, 67, 126);
}

/* Positioning and Sizing */
.vertical-center {
  min-height: 100%;
  display: flex;
  align-items: center;
}

.full {
  height: 100% !important;
  width: 100% !important;
}

/* Loader */
.loader {
  position: fixed;
  width: 100vw !important;
  height: 100vh !important;
  background: rgb(3, 21, 47);
  background: linear-gradient(180deg, rgba(3, 21, 47, 1) 0%, rgba(2, 11, 23, 1) 100%);
  z-index: 999;
  perspective: 500px;
}

.loader-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.loader-svg {
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  animation-duration: 2s;
  animation-name: loader3D;
  animation-timing-function: cubic-bezier(.59, .12, .15, .94);
  animation-iteration-count: infinite;
}

.loader-bg {
  position: fixed;
  bottom: -50px;
  left: -200px;
  opacity: .5;
  z-index: -1;
  width: 100vw;
}

#loader-bg {
  min-width: 100%;
  min-height: 20%;
}

@keyframes loader3D {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

/* Slides */
.slide>div.container-fluid {}

.slide>div.vid {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 1;
}

#slideMJF {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.slide.MJF {
  min-height: 85vh;
}

.mjf-title {
  position: fixed;
  z-index: 2;
}

div.slide>*>* {
  color: rgb(255, 255, 255);
}

.slide.welcome>.container-fluid {
  background-color: var(--waveColor);
}

.vid-shade {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.welcome {

  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 5;
  border-bottom: solid 7px rgb(183 215 246);
}

.contact-container {
  position: absolute;
  bottom: 10px;
  right: 40px;
  perspective: 2000px;
  transition: .75s;
  transform: rotateX(0deg) translate(0%, -50%);
  background-color: rgba(255, 255, 255, .5);
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, .15);
  border-radius: 5px;
  width: 200px;
  height: 60px;
}

.contact-container:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 1);
}

.contact-container>.contactCard {}

.contactHover {
  transform: rotateX(180deg) translate(0%, 50%);
  height: 50vh;
  width: 50vw;
  box-shadow: 0px 0px 75px 8px rgba(0, 0, 0, .3);
  background-color: rgba(255, 255, 255, 1);
}

.cardOut {
  z-index: -1;
  opacity: 0;
  transition: .5;
}

.front {
  transform: translate(0%, 50%);
  transition: .5s;
}

.back {
  transform: rotateX(180deg);
  color: white;
  transition: .5s;
}

.bg-parallax {
  width: 100vmax;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  pointer-events: none;
}

.img-parallax {
  position: absolute;
  z-index: -1;
  left: 0px;
  top: 0px;
  pointer-events: none;
  transform: translate(0px, 0px);
}

.toProj {
  position: fixed;
  bottom: 30px;
  z-index: -1;
  opacity: .3;
  animation: text-vert 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.mf-bg {
  width: 100% height: 100%;
  padding: 0px;
  margin: 0px;
}

.mf-bg img {
  width: 100vmax;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  pointer-events: none;
}

.mf-cliff img {
  position: absolute;
  bottom: -5%;
  left: 0px;
  height: 45%;
}

.mjf-cliff-content {}

.mjf-pic {
  border: 2px solid var(--waveColorLight);
  border-radius: 50%;
  box-shadow: 3px 1px 10px 0px rgb(18, 33, 56, .75);
  background-color: rgba(147, 189, 232, 0);
}


.trees {
  z-index: -2;
}

.cliff-bg {
  z-index: -3;
}

.ticker-container {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.ticker-container li {
  opacity: 0;
  color: var(--waveColor);
  list-style: none;
  display: none;
}

.slide.temp {
  background-image: url(/img/bg/slide1test.jpg);
  background-size: cover;
}

.ticker-services {
  overflow: hidden;
}

.ticker-service {
  opacity: 0;
  list-style: none;
  display: none;
  overflow: hidden;
}

.proj {
  background: rgb(2, 0, 36);
  background: linear-gradient(180deg, rgb(29 33 64) 0%, rgba(8, 2, 23, 1) 90%, rgba(25, 12, 1, 1) 100%);
  color: white;
  width: 100%;
  position: relative;
  overflow: hidden;
  z-index: 5;
}

.proj-content {}

.proj-content>h5:not(.tCenter) {
  text-align: justify;
  color: #f9f1d2;
}

.proj-content>h5 {}

.proj svg {
  z-index: -1;
}

.proj h2 {
  z-index: 3;
  position: relative;
}

.proj h3 {
  text-shadow: 0px 0px 4px var(--waveColor);
}

.proj-item {
  height: 25vh;
}

.proj-item-img {
  height: 200px;
}

.proj-item a {
  color: white;
}

.card-title {
  color: rgb(51 91 153);
}

.card{
  transform: rotateY(0deg);
  transition: .3s;

}
.card-body{
  position: absolute;
  opacity: 0;
  transform: rotateY(180deg);
  transition: .2s;
}
.vid-item:hover > .card > .card-body{
  opacity: 1;
}

.vid-item:hover > .card{
  transform: rotateY(180deg);
}
.vid-item > .card > img{
  opacity: 1;
  transition: .2s;
}
.vid-item:hover > .card > img{
  opacity: 0;
}


.moonRow {
  position: relative;
}

.moon {
  position: relative;
  animation: moon-vert 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.magic-text-container>span {
  transition: 2.5s;
  text-shadow: 0px 0px 15px rgba(255, 0, 0, 0);
}

@keyframes colorCycle {
  0% {
    color: #f9f1d2;
    text-shadow: 0px 0px 15px rgba(255, 0, 0, 0);
  }

  20% {
    color: #ed1c24;
    text-shadow: 0px 0px 15px rgba(237, 28, 36, 1);
  }

  30% {
    color: #fff200;
    text-shadow: 0px 0px 15px rgba(255, 242, 0, 1);
  }

  40% {
    color: #006DB7;
    text-shadow: 0px 0px 15px rgba(0, 109, 184, 1);
  }

  50% {
    color: #f9f1d2;
    text-shadow: 0px 0px 15px rgba(249, 241, 210, 0);
  }

  100% {
    color: #f9f1d2;
    text-shadow: 0px 0px 15px rgba(249, 241, 210, 0);
  }
}

.cycle-color {
  animation: colorCycle 2.5s;
  animation-timing-function: cubic-bezier(0.21, -0.01, 0.65, 0.96);
  animation-iteration-count: infinite;
}

.mred {
  color: #ed1c24;
}

.mblue {
  color: #006DB7;
}

.myellow {
  color: #fff200;
}

.mdefault {
  color: #f9f1d2;
}

.nhcacBtn {
  background-color: #0053a0;
  color: white;
  font-size: 2rem;
}

#moon-svg {}

#ady-logo {
  animation: ady-vert 7s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.ady-container, .mjf-container, .vid-container, .vid-item{
  perspective: 5000px;
}

.ady-img {
  animation: ady-spin 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.mjf-svg {
  animation: mjf-spin 15s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.735, 0.000, 0.280, 1.005);
}

#sigma-stars {
  position: absolute;
  right: 20%;
  top: 0px;
  z-index: -1;
  opacity: 1;
}

#ring1 {
  transform: rotate(0deg);
  animation: moon-cclockwise 120s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
  stroke: rgb(236, 240, 159);
}

#ring2 {
  transform: rotate(0deg);
  animation: moon-clockwise 250s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
}

#ring3 {
  transform: rotate(0deg);
  animation: moon-clockwise 40s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
  stroke: rgb(252, 164, 164);
}

canvas {
  background: rgba(255, 255, 255, 0);
}

.space-canvas {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

.temp img {
  position: absolute;
  top: 0px;
  left: 0px;
}

/* SVG Design and Animation */
@keyframes mjf-intro {
  0% {
    transform: translate(-15px);
    opacity: 0;
  }

  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}

@keyframes mjf-line {
  from {
    stroke: rgba(177, 203, 233, 1);
    stroke: rgba(12, 62, 121, 0);
  }

  20% {
    stroke: rgba(177, 203, 233, 0);
  }

  50% {
    stroke: rgba(177, 203, 233, 1);
  }

  75% {
    stroke: rgba(177, 203, 233, 1);
    fill: rgb(255, 255, 255);
  }

  to {
    stroke-dasharray: 2500;
    stroke: rgba(12, 62, 121, 0);
  }
}

@keyframes vid-fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes moon-clockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes moon-cclockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes moon-vert {
  0% {
    transform: translate(0, -20px) rotate(-5deg);
  }

  50% {
    transform: translate(0, 20px) rotate(5deg);
  }

  100% {
    transform: translate(0, -20px) rotate(-5deg);
  }
}

@keyframes text-vert {
  0% {
    transform: translate(0, -10px);
    opacity: .4;
  }

  50% {
    transform: translate(0, 10px);
    opacity: .8;
  }

  100% {
    transform: translate(0, -10px);
    opacity: .4;
  }
}

@keyframes ady-vert {
  0% {
    transform: translate(0, 10px);
    opacity: .7;
  }

  50% {
    transform: translate(0, -10px);
    opacity: 1;
  }

  100% {
    transform: translate(0, 10px);
    opacity: .7;
  }
}

@keyframes ady-spin {
  0% {
    transform: rotateX(-10deg) rotateY(20deg) rotateZ(0deg);
  }

  50% {
    transform: rotateX(-20deg) rotateY(-20deg) rotateZ(-5deg);
  }

  100% {
    transform: rotateX(-10deg) rotateY(20deg) rotateZ(0deg);
  }
}

@keyframes mjf-spin {
  0% {
    transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
  }

  50% {
    transform: rotateX(0deg) rotateY(-20deg) rotateZ(10deg);
  }

  75% {
    transform: rotateX(-20deg) rotateY(30deg) rotateZ(-5deg);
  }

  100% {
    transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
  }
}

@keyframes vid-vert1 {
  0% {
    transform: translate(0, 10px);
  }

  50% {
    transform: translate(0, -10px);
  }

  100% {
    transform: translate(0, 10px);
  }
}

@keyframes vid-vert2 {
  0% {
    transform: translate(0, -5px);
  }

  50% {
    transform: translate(0, 5px);
  }

  100% {
    transform: translate(0, -5px);
  }
}

/* SVG Classes */
.cls-1,
.cls-2,
.cls-3 {
    fill: none;
    stroke-linecap: round;
}

.cls-1 {
    stroke: #7498d1;
    stroke-width: 2px;
    stroke-dasharray: 20;
}

.cls-1,
.cls-2,
.cls-3,
.cls-4,
.cls-6 {
    stroke-miterlimit: 10;
}

.cls-2,
.cls-3 {
    stroke: #a5c1ef;
}

.cls-2 {
    stroke-dasharray: 10;
}

.cls-3 {
    stroke-dasharray: 80;
}

.cls-4 {
    fill: #fcf9e8;
}

.cls-4,
.cls-6 {
    stroke: #c1c1c1;
}

.cls-5 {
    fill: #f9f1d2;
}

.cls-6 {
    fill: #e2decc;
}

.cls-7 {
    fill: #fff;
}

.mjf>path:not(.mjf-white) {
  opacity: 0;
  animation-duration: .75s;
  animation-timing-function: cubic-bezier(.59, .12, .15, .94);
  animation-fill-mode: forwards;
}

.mjf-blue {
  animation-delay: .3s;
}

.mjf-yel {
  animation-delay: .1s;
}

.mjf-red {
  animation-delay: 0s;
}

.mjf>path {
  transform: translate(0px, 0px);
  opacity: 1;
  transition-duration: .3s;
  transition-timing-function: ease-out;
}

.mjf:hover>path.mjf-blue {
  transform: translate(-30px, 0px);
  opacity: 0;
}

.mjf:hover>path.mjf-yel {
  transform: translate(-20px, 0px);
  opacity: 0;
}

.mjf:hover>path.mjf-red {
  transform: translate(-8px, 0px);
  opacity: 0;
}

.mjf:hover>path.mjf-white {}

.mjf-white {
  fill: rgb(255, 255, 255);
  /* stroke animation
  stroke: rgba(177, 203, 233, 0);
  stroke-width: 3;
  stroke-dasharray: 400;
  animation: mjf-line 3s linear;
  */
}

.mjf-red {
  fill: #ED1C24;
}

.mjf-yel {
  fill: #FFF200;
}

.mjf-blue {
  fill: #006DB7;
}

.socialLogo {
  fill: rgb(28, 67, 126, .65);
  transition-duration: .3s;
  transition-timing-function: ease-out;
}

.socialLogo:hover {
  fill: rgb(28, 67, 126, .8);
}


/* MEDIA QUERIES */
@media (min-width: 1px) and (max-width: 767px) {
  h1 {
    font-size: 3rem;
    font-family: 'Josefin Sans', sans-serif;
    text-shadow: 4px 0px var(--waveColor);
  }

  h2 {
    font-size: 4rem;
    font-family: 'Josefin Sans', sans-serif;
    text-shadow: 2px 2px var(--waveColor);
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-family: 'Maven Pro', sans-serif;
    color: var(--waveColor);
    font-size: 1.5rem;
  }

  h5 {
    font-size: 1.25rem;
    font-family: 'Maven Pro', sans-serif;
    font-weight: 400;
    text-shadow: 0px 0px 5px var(--waveColor);
  }

  .card-text {
    font-size: 1rem;
  }

  .proj-content {
    background-color: rgb(47 50 78 / 75%);
    border-radius: 7px;
    box-shadow: #100e27 14px 12px 9px 0px;
  }
  .nhcacBtn {
    font-size: 1rem;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  h1 {
    font-size: 3rem;
    font-family: 'Josefin Sans', sans-serif;
    text-shadow: 4px 0px var(--waveColor);
  }

  h2 {
    font-size: 4rem;
    font-family: 'Josefin Sans', sans-serif;
    text-shadow: 2px 2px var(--waveColor);
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-family: 'Maven Pro', sans-serif;
    color: var(--waveColor);
    font-size: 1.5rem;
  }

  h5 {
    font-size: 1.25rem;
    font-family: 'Maven Pro', sans-serif;
    font-weight: 400;
    text-shadow: 0px 0px 5px var(--waveColor);
  }

  .card-text {
    font-size: .75rem;
  }

  .proj-content {
    background-color: rgb(47 50 78 / 75%);
    border-radius: 7px;
    box-shadow: #100e27 14px 12px 9px 0px;
  }
  .nhcacBtn {
    font-size: 1rem;
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3rem;
    font-family: 'Josefin Sans', sans-serif;
    text-shadow: 4px 0px var(--waveColor);
  }

  h2 {
    font-size: 4rem;
    font-family: 'Josefin Sans', sans-serif;
    text-shadow: 2px 2px var(--waveColor);
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-family: 'Maven Pro', sans-serif;
    color: var(--waveColor);
    font-size: 1.5rem;
  }

  h5 {
    font-size: 1.25rem;
    font-family: 'Maven Pro', sans-serif;
    font-weight: 400;
    text-shadow: 0px 0px 5px var(--waveColor);
  }

  .card-text {
    font-size: .75rem;
  }

  .proj-content {
    background-color: rgb(47 50 78 / 75%);
    border-radius: 7px;
    box-shadow: #100e27 14px 12px 9px 0px;
  }
  .nhcacBtn {
    font-size: 1rem;
  }
}





/* Temp Stuff */

/*
.col, .proj > .row > *, .tv-container, .debug{
  border: red solid 1px;
}
*/