@import url('https://fonts.googleapis.com/css?family=Nunito:400,500,700');

/*
  ========================================
  Global Styles
  ========================================
*/

:root {
    --primary: #00aeef;
    --primarydark: #0078A6;
    --primarydark2: #005D81;
    --primarydark3: #004B67;
    --secondary: #bcbec0;
    --light: #EAF6FA;
    --background: #000A0E;
    /* --white: white; */
    /* in code -> var(--color) */
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Nunito', Arial, sans-serif;
  color: #222;
  background-color: var(--light);
}

.padding {
  padding-bottom: 2rem;
}

.bg-dark {
  background-color: var(--background) !important;
}

.inline {
  display: inline;
  margin-left: 5px;
}

.centered {
  margin: 0 auto;
}

/*
  ========================================
  Under Construction
  ========================================
*/

#two-column-section1,
/* #parallax-background, */
/* #packages-header,
#packages-cards, */
/* #connect, */
#two-column-section2 {
  display: none;
}


/*
  ========================================
  Navbar
  ========================================
*/

.navbar {
  /* padding: .8rem; */
  padding: 0 .8rem;
  /* border-bottom: 5px solid var(--primary); */
}

.navbar .navbar-brand {
  padding: 0.5rem 0;
}

#call-us-nav {
  /* margin-left: 1.5rem;
  margin-top: 0.7rem; */
  margin: 0.5rem 0 0 1rem;
  color: var(--secondary);
}

.navbar-nav li {
  padding-right: 20px;
}

.nav-link {
  /* font-size: 1.1em !important; */
  font-size: 1.1em;
}



/*
  ========================================
  Slider
  ========================================
*/

/* .carousel-inner {
  margin-top: 5.3rem;
} */

.slider-crop {
  display: none;
}

.carousel-inner img {
  width: 100%;
  height: 100%;
}

.carousel-caption {
  position: absolute;
  top: 50%;
  transform: translateY(-80%);
}

.carousel-caption#yellow-car {
  transform: translate(20%, -80%);
}

.carousel-caption#van {
  transform: translate(-40%, -80%);
}

.carousel-caption#wall {
  transform: translate(20%, -90%);
}
  .carousel-caption#wall h1 {
    font-size: 250%;
  }

.carousel-caption#fling {
  transform: translate(-30%, -80%);
}

.carousel-caption#wedding {
  transform: translate(-30%, -80%);
}

.carousel-caption#booth-right {
  transform: translate(0%, -50%);
}

.carousel-caption h1 {
  font-size: 300%;
  text-transform: uppercase;
  text-shadow: 1px 1px 10px black;
  word-spacing: 0.2em;
}

.carousel-caption h3 {
  font-size: 150%;
  font-weight: 1000;
  text-shadow: 1px 1px 10px black;
  padding-bottom: 1rem;
}

.carousel-caption h3.inline {
  line-height: 0em;
}

.carousel-caption .highlight {
  color: var(--primary);
  text-shadow: 1px 1px 3px black;
}

.btn-primary {
  background-color: var(--primary);
  border: 1px solid var(--primary);
}

.btn-primary:hover {
  background-color: var(--primarydark);
  border: 1px solid var(--primarydark);
}

/*
  ========================================
  Jumbotron
  ========================================
*/

.jumbotron {
  padding: 1rem;
  border-radius: 0;
  background-color: var(--primary);
  color: var(--light);
}

.jumbotron h2 {
  margin-bottom: 0 !important;
  font-family: 'Nunito', Arial, sans-serif !important;
}

/*
  ========================================
  Welcome
  ========================================
*/

.welcome {
  width: 80%;
  margin: 0 auto;
  padding-top: 2rem;
}

.welcome hr {
  border-top: 2px soid #b4b4b4;
  width: 95%;
  margin-top: .3rem;
  margin-bottom: 1rem;
}

.fa-ruler,
.fa-cut,
.fa-shipping-fast {
  color: var(--primary);
  font-size: 4em;
  margin: 1rem;
}


/*
  ========================================
  Stock
  ========================================
*/


.stock-cards {
  width: 80%;
  margin: 0 auto;
  /* padding-top: 2rem; */
}

.stock-cards hr {
  border-top: 2px soid #b4b4b4;
  width: 95%;
  margin-top: 2rem;
  margin-bottom: 1rem;
}



/*
  ========================================
  Parallax Background
  ========================================
*/

#premium-plx.plx {
  background: url(../images/bg-parallax_opt.jpg);
  background-position: 50% 80px !important;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.7;

  /* 
    fixed = parallax
    scroll = normal
  */
  background-attachment: fixed;
}

#premium-plx.plx #fixed {
  padding: 2rem;
}

/*
  ========================================
  Social Media
  ========================================
*/

.social a {
  font-size: 4.5em;
  padding: 3rem;
}

.fa-facebook {
  color: #3b5998;
}
.fa-twitter {
  color: #00aced;
}
.fa-google-plus-g {
  color: #dd4b39;
}
.fa-intagram {
  color: #517fa8;
}
.fa-youtube {
  color: #bb0000;
}

.fa-facebook:hover,
.fa-twitter:hover,
.fa-google-plus-g:hover,
.fa-instagram:hover,
.fa-youtube:hover {
  color: #d5d5d5;
}

/*
  ========================================
  Footer
  ========================================
*/

footer {
  /* background-color: #3f3f3f; */
  color: #d5d5d5;
}

footer img {
  margin-bottom: 1.2rem;
  margin-top: 2rem;
}

hr.light {
  border-top: 1px solid #d5d5d5;
  width: 75%;
  margin-top: 0.8rem;
  margin-bottom: 1rem;
}

footer a {
  color: #d5d5d5;
}

hr.light-100 {
  border-top: 1px solid #d5d5d5;
  width: 100%;
  margin-top: 0.8rem;
  margin-bottom: 1rem;
}

/*
  ========================================
  Media Queries
  ========================================
*/

/* Do these changes until you reach the max-width of ______, regardless of code for smaller widths. */

@media (max-width: 1024px) {
  /* Navbar */
  .navbar-brand img {
    height: 2.9em;
  }
  .navbar-nav li {
    padding-right: 0.7rem;
  }
  .nav-link {
    font-size: 0.9em;
  }
  #call-us-nav h4 {
    font-size: 1.2em;
  }
  
  /* Slider */
  .carousel-caption h1 {
    font-size: 200%;
  }
  .carousel-caption h3 {
    font-size: 120%;
  }
  .carousel-caption#fling {
    transform: translate(-30%, -100%);
  }
}

@media (max-width: 992px) {
  .social a {
    font-size: 4em;
    padding: 2rem;
  }
  #call-us-nav h4 {
    font-size: 90%;
  }
}
@media (max-width: 768px) {
  .navbar .navbar-collapse button {
    /* width: 100%;
    margin-bottom: .8rem;
    padding-right: 0.8rem; */
  }
  .navbar-brand img {
    height: 2em;
  }
  .navbar-nav li {
    padding-right: 0.5rem;
  }
  .nav-link {
    font-size: 0.7em;
  }
  #call-us-nav {
    margin-left: 0.4rem;
    margin-top: 0.6rem;
  }
    #call-us-nav h4 {
      font-size: 0.7em;
    }

  .carousel-caption {
    top: 45%;
  }
  
  .carousel-caption h1 {
    font-size: 1.5em;
  }

    .carousel-caption#wall h1 {
      font-size: 1.5em;
    }

  .carousel-caption h3 {
    font-size: 0.8em;
    font-weight: 800;
    padding-bottom: 1.5rem;
  }

  .carousel-caption#booth-right {
    transform: translate(0%, -30%);
  }
  .carousel-caption#fling {
    transform: translate(-30%, -80%);
  }

  .carousel-caption .btn {
    font-size: 0.8em;
    padding: 6px 10px;
  }

  .display-4 {
    font-size: 200%;
  }

  .social a {
    font-size: 2.5em;
    padding: 1.2rem;
  }

  /* Cards */
  .card .card-body {
    font-size: 0.8em;
  }
  .card .card-body ul {
    padding-left: 1rem;
  }
}

@media (max-width: 426px) {
  #call-us-nav h4 {
    font-size: 1em;
  }

  .slider-wide {
    display: none;
  }
  .slider-crop {
    display: block;
  }

  .carousel-caption {
    top: 40%;
  }
  
  .carousel-caption h1 {
    font-size: 0.7em;
  }
    .carousel-caption#wall h1 {
      font-size: 0.7em;
    }
  
  .carousel-caption h3 {
    font-size: 0.5em;
    padding-bottom: 0.5rem;
  }

  .carousel-caption .btn {
    font-size: 0.5em;
    padding: 4px 8px;
  }

  .carousel-caption#booth-right {
    transform: translate(-20%, 40%);
  }

  .carousel-caption#van {
    transform: translate(-20%, -70%);
  }

  .carousel-caption#watch {
    transform: translate(-30%, -70%);
  }

  .carousel-caption#fling {
    transform: translate(0%, 10%);
  }

  .carousel-caption#wall {
    transform: translate(40%, -70%);
  }

  .carousel-caption#wedding {
    transform: translate(-35%, -75%);
  }

  .carousel-indicators {
    display: none;
  }

  .plx {
    background-attachment: scroll;
  }

  .display-4 {
    font-size: 160%;
  }

  .social a {
    font-size: 2em;
    padding: .7rem;
  }
}

@media (max-width: 376px) {
  #call-us-nav h4 {
    font-size: 1em;
    padding-left: 7rem;
  }

  .carousel-caption#wall {
    transform: translate(37%, -60%);
  }
}

@media (max-width: 320px) {
  #call-us-nav h4 {
    padding-left: 6rem;
  }

  .carousel-caption#booth-right {
    transform: translate(-20%, 20%);
  }

  .carousel-caption#van {
    transform: translate(-20%, -75%);
  }

  .carousel-caption#watch {
    transform: translate(-30%, -75%);
  }

  .carousel-caption#wall {
    transform: translate(30%, -75%);
  }

  .carousel-caption#wedding {
    transform: translate(-30%, -80%);
  }
}


/*

Box-sizing
For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

.selector-for-some-widget {
  box-sizing: content-box;
}

*/