/*============= RESETS ============= font-family: 'Lato', sans-serif;*/

/*-- iPhone X Remove Gutters --*/
.scrollable-element {
  scrollbar-color: dark;
}

html {
  
  padding: env(safe-area-inset);
}
/*-- Prevent Horizontal Scrolling & Font Style --*/
html, body {
  overflow-x: hidden;
  font-family: 'Lato', sans-serif;
  overflow: auto; /* Hide scrollbars */

}

a.nostyle:link {
  text-decoration: inherit;
  color: inherit;
  cursor: auto;
}

a.nostyle:visited {
  text-decoration: inherit;
  color: inherit;
  cursor: auto;
}

.text-j54j6 {
  color: #F07171;
}

.heading-underline {
  width: 10rem;
  height: .2rem;
  background-color: #F07171;
  margin: 0 auto 2rem;
}

.subHeading-underline {
  padding: .2rem;
}

/*--- Nav Scrolling Offset --*/
.offset:before {
  content: "";
  height: 4rem;
  display: block;
  margin-top: -4rem;
}

/*--- Extra Bootstrap Column Padding --*/

[class*="col-"] {
  padding: 1rem;
}

/*============= NAVIGATION =============*/
.navbar-brand img {
  height: 3.2rem;
}

.navbar {
  padding: .1rem 1rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .1rem;
  font-size: .9rem;
  transition: background-color .8s ease;

}

.navbar-nav li {
  padding-right: .8rem;
  padding-bottom: .2rem;
}

.navbar-nav .nav-link {
  color: white;
}
.navbar-nav .nav-link.active, 
.navbar-nav .nav-link:hover {
  color: #F07171;
}

.custom-toggler-icon {
  color:white;
  font-size: 1.6rem;
}
.navbar.solid,
.navbar.solid-toggle {
  background: rgba(0, 0, 0, .7)!important;
  transition: background-color 1.3s ease 0s;
}

/*-- Remove Button Outline --*/

button:focus, a:focus, a.btn:focus{
  outline: 0;
  -webkit-appearance: none;
  box-shadow: none;
  transition: all 1s ease;
}
button, a, a.btn {
  transition: all 1s ease;
}


/* -------- End Navbar -------*/

/* --------Start Landing Page Image -----*/
.bg-video {
  position: fixed;
  min-width: 100% !important;
  min-height: 100% !important;
  filter: brightness(19%);
  
}

@media (min-aspect-ratio: 16/9) {
  .bg-video {
    position: fixed;
    width: 100%;
    height: auto;
    filter: brightness(19%);
  }
}

@media (max-aspect-ratio: 16/9) {
  .bg-video {
    position: fixed;
    width: auto;
    height: 100%;
    filter: brightness(19%);
  }
}

.home-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.landing {
  position: relative;
   width: 100%;
   height: 100vh;
   display: table;
   z-index: -1;
}
/* --------End Landing Page Image -----*/

/* ----------Landing Page Caption --------- */
.caption {
  position: absolute;
  width: 100%;
  top: 15%;
  padding: .1rem;
  
}

.caption h1 {
  font-size: 2rem;
  padding: .1rem;
}

.caption h3 {
  padding: .4rem;
  letter-spacing: .2rem;
}

#landingPageLogo {
  position: relative;
  height: 14rem;
  padding: 1rem;
  }

.caption a:hover{
  background-color: #F07171;
  border-color: #F07171;
  color: white;
}


@media (min-width: 992px)
{
  .caption {
    position: absolute;
    width: 100%;
    top: 20%;
    padding: .1rem;
    
  }
  
  .caption h1 {
    font-size: 5rem;
    padding: .1rem;
  }
  
  .caption h3 {
    padding: 1.8rem;
    letter-spacing: .2rem;
  }
}
/*---------------End Landingpage Caption -------*/


/*---------------See More Button ------------*/
#seeMore {
  display: none;
}

@media (min-width: 992px) {
  #seeMore {
    display: inline;
  }
}
/*---------------End See More Button ------------*/


/* ---Bouncing Arrow ---*/
.arrow {
   position: absolute;
   bottom: 1%;
   width: 100%;
   animation: bounce 2s infinite;
   -webkit-animation: bounce 2s infinite;
}

.down-arrow .svg-inline--fa {
   color: #F07171;
   font-size: 2.2rem;
   opacity: .5;
}

.down-arrow .svg-inline--fa:hover {
   opacity: .8;
}

/* ------ End Bouncing Arrow -----*/

/*--------------------End Landingpage --------*/



/*----------- About Me ----------*/

#justin {
  width: 13rem;
  position: relative;
  left: 15%;
  right: 2rem;
  
}

#aboutMe .heading {
  text-align: center;
}

#hobbiesShort {
  padding-top: 2rem;
}
/*--------------End About Me ------------*/


/* -----------Services -------*/
.card {
  border-radius: 0;
  text-align: center;
  border: .1rem solid rgba(0,0,0,.05);
  box-shadow: 0 0 .8rem rgba(0,0,0,.075);
  transition: transform .4s ease;
  margin: 0.8rem;
  height: 25rem;
  

}

.card:hover {
  transform: scale(.90);
}

.card-logo {
  margin-top: 1.2rem;
}

.card-body {
  min-height: 5rem;

}

.owl-stage {
  display: flex;
}

#serviceCarousel {
  height: 100%;
  overflow: hidden;
  padding: 2rem;
}

.owl-dots {
  display: none;
}

.card-logo {
  transform: scale(.6);
}
/*----- End Services ------------------- */

/*------------ Projects -------------------*/
#projects {
  margin-bottom: 8rem;
}

/*------------ End Projects -------------------*/


/*------------ Footer / Contactform -------------------*/
.footer {
  background-color:  #4a4949;
  height: 100%;
  
}

.contactForm {
  padding: 3rem;
  color: white;
}

#emailInput {
  width: 40%;
}

.hide {
  visibility: hidden;
  display: none;
}

.nodist {
  margin: 0;
  padding: 0;
}

.nodistRight {
  padding: 0;
  margin: 0;
}

.nodistLeft {
  padding: 0;
  margin: 0;
}

/*------------ End Footer / Contactform---------------*/