/*Extra Small Devices (portrait phones, less than 544px) No media queries here because Bootstrap
is mobile first, so this is the default*/

body, html{
  position: relative;
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  background-color: rgba(0,0,0,.5);
}
h1, h2, h3, h4, h5, h6{
  font-family: 'Raleway', sans-serif;
}
h6{
  font-size: 1.25rem;
  font-weight: 600;
}
.htop{
  position: relative;
  width: 100%;
  text-align: center;
  min-height: auto;
  background-image: url("WesternStarTruck1.jpg");
  background-repeat: no-repeat;
  background-position: center;
  color: rgba(255,255,255,.8);
  background-origin: border-box;
  background-size: cover;
  padding: 1em;
}
 button.navbar-toggler.menu-pad.navbar-light{
  background-color: #428bca;
  color: white;
  padding: .4em;
  letter-spacing: .05em;
 }
 a.nav-link.lg-link{
  background-color: rgba(255,255,255,.85);
  width: 6em;
  text-indent: 1.5em;
  font-weight: 600;
 }
div.container-fluid.contact-wrapper{
  background-color: rgba(0,0,0,.7);
  color:white;
}
#about, #work_for_us{
  background-color: rgba(255,255,255,.8);
  padding-top: 1.5em;
}
h2.text-center.about-h2, h2.text-center.work-h2, h2.text-center.contact-h2{
    font-size: 1.5rem;
    font-weight: 600;
}
h3.card-title.text-center.card-header{
  font-size: 1.35rem;
  background-color: #428BCA;
}
span.menu-toggle-icon{
  width: 30px;
  height: 30px;
}
.btn-link{
  color: white;
}
#contact p.contact-p{
  padding-bottom: 2.5em;
  color: white;
}
#contact p{
  color: #428bca;
}
.contact-bottom{
  padding-bottom: 3em;
}
.form-wrapper{
  background-color: rgba(255,255,255,.8);
  border-radius: .5em;
  padding: 1.75em;
}
.work-wrapper{
  padding-bottom: 1em;
}
.contact-wrapper{
  padding-top: 2em;
}


/*###############################################################################################*/

/*-----------------------------------MEDIA QUERIES-----------------------------------------------*/

/*###############################################################################################*/

/*----Small devices (landscape phones, 544px and up)-----*/

@media(min-width: 544px) and (max-width: 767px){
  header#htop.htop{
    background-size: cover;
    padding: 3em;
  }
  button.navbar-toggler.menu-pad.navbar-light.bg-faded{
    padding: .5em;
    background-color: rgba(0,0,0,.8);
    color: ghostwhite;
  }
  #about, #work_for_us{
    padding-top: 2em;
  }
  h2.text-center.about-h2, h2.text-center.work-h2, h2.text-center.contact-h2{
    font-size: 1.5rem;
    font-weight: 600;
  }
  p.about-text-pad{
    padding-bottom: 1em;
  }
  h3.card-title.text-center.card-header{
    font-size: 1.35rem;
    background-color: #428BCA;
  }
  .form-wrapper{
    background-color: rgba(255,255,255,.8);
    border-radius: .5em;
    padding: 1.75em;
  }
  .work-wrapper{
    padding-bottom: 1em;
  }
  .contact-wrapper{
    padding-top: 2em;
  }
  p.contact-p{
    font-size: .8em;
  }
}

/*----Medium devices (tablets, 768px and up)The navbar toggle appears at this breakpoint-----*/

@media(min-width: 768px) and (max-width: 991px){
 header.htop{
  background-size: cover;
  padding: 5em;
 }
 button.navbar-toggler.menu-pad.navbar-light{
  background-color: rgba(0,0,0,.75);
  color: white;
  padding: .5em;
  text-transform: uppercase;
  letter-spacing: .05em;
 }
 a.nav-link.lg-link{
  background-color: rgba(255,255,255,.85);
  width: 7em;
  text-indent: 1.5em;
  font-weight: 600;
 }
 h1.star-intro-title.hidden-sm-down{
  font-size: 1.8em;
  padding-bottom: 2.2em;
  margin-top: -2.01em;
  font-weight: 600;
  color: rgba(0,0,0,.77);
  text-transform: uppercase;
  text-shadow: 2px 2px 4px #000000;
  font-family: 'Raleway', sans-serif;
 }
 a.btn.btn-primary.btn-sm.hidden-lg-up{
  margin-top: 2.5em;
 }
  .about-wrapper, .work-wrapper{
  padding-top: 2em;
  }
  h2.text-center.about-h2, h2.text-center.work-h2, h2.text-center.contact-h2{
    font-size: 1.75rem;
    font-weight: 600;
  }
  .card-wrap{
    padding-top: 2em;
  }
  .h3, h3 {
    font-size: 1.5rem;
  }
  p.card-text{
    font-size: .85rem;
  }
  p.work-text-pad{
    margin-bottom: 3rem;
    font-size: 1rem;
  }
  div.container.form-wrapper{
    background-color: rgba(255,255,255,.75);
    padding: 1.5em;
    border-radius: .3em;
  }
  div.container-fluid.contact-wrapper{
    padding-top: 2em;
  }
}

/*----Large devices (desktops, 992px and up)-----*/

@media(min-width: 992px){
  body{
    height: 100%;
  }
  nav#mainNav{
    letter-spacing: .1rem;
    font-weight: 600;
    background-color: rgba(0,0,0,.85);
  }
  .short-nav{
  height: 7em;
  }
  a.nav-link.lg-link{
    color: rgba(255,255,255,.85);
    text-transform: uppercase;
    background-color: transparent;
  }
  a.nav-link.lg-link:hover{
    color: rgba(255,255,255,.6);
  }

  .menu-pad{
  padding-bottom: 1em;
  }
  #about{
    padding-bottom: 1em;
  }
  .work-h2, .about-h2{
    padding-top: 2em;
  }
  .work-text-pad, .about-text-pad{
    padding-top: 2em;
    padding-bottom: 2.5em;
  }
  p.work-text-pad{
    line-height: 1.5em;
    font-size: 1.2em;
  }
  .form-wrapper{
    background: rgba(255,255,255,.85);
    padding: 2.5em;
    border-radius: 1.5em;

  }
  .card-wrap{
    padding-top: 0;
  }
  header.htop{
    background-size: cover;
    margin-top: 3.4em;
    margin-bottom: -3.3em;
    font-size: 2em;
    padding: 6.8em;
  }
  h1.star-intro-title.hidden-sm-down{
    font-weight: 600;
    margin-top: -3.5em;
    color: rgba(0,0,0,.77);
    text-transform: uppercase;
    text-shadow: 2px 2px 4px #000000;
    font-family: 'Raleway', sans-serif;
  }
  #about div.container-fluid.section-header{
    padding-top: 6em;
  }
  .about-wrapper, .work-wrapper{
    padding-top: 7em;
  }
  .contact-wrapper{
    padding-top: 7em;
  }
 /* #about, #work_for_us, #contact{
    padding-bottom: 5em;
  }*/
  #work_for_us p{
    padding-bottom: 3em;
  }
   .work-wrapper{
    padding-bottom: 2em;
  }
  .about-cards-pad{
    padding-top: 5em;
  }
  .about-text-pad, .work-text-pad{
   padding-top: 2em;
    line-height: 1.5;
    font-size: 1.2em;
  }
  h2.text-center.contact-h2{
    padding: 1em;
  }
}

/*----Extra large devices (large desktops, 1200px and up)-----*/

@media(min-width: 1200px){

}


/*--------------------------------CUSTOM MEDIA QUERIES-------------------------------------------*/