@font-face {
  font-family: 'SpaceRanger';
  src: url('../fonts/spaceranger.ttf');
}

@font-face {
  font-family: 'SpaceRangerOutline';
  src: url('../fonts/spacerangeracad.ttf');
}

html {
  scroll-behavior: smooth;
}

.hidden-bar {
  position: fixed;
  z-index: 10000;
  width: 100%;
  top: -4rem;
  background-color: #006099;
  border-bottom: 1px solid #fff;
  transition: top .5s ease;
}

.hidden-bar.show {
  top: 0rem;
}

.hidden-bar-title {
  padding: 1rem 0rem;
}

.top-bar {
  background-color: #006099;
}

.top-bar-border {
  width: 100%;
  min-height: 5vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  margin-top: 0;
}

.top-bar-contents {
  padding: .75rem 0.5rem;
  color: #fff;
}

.top-bar-contents a {
  font-size: 1.5rem;
  color: #fff;
  background-color: rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.4);
  border-radius: 100px;
  padding: .5rem .75rem;
  transition: background 0.25s ease, color 0.25s ease, border 0.25s ease;
}

.top-bar-contents a:hover {
  color: #000;
  /* color: #ffdf00;
  background-color: rgba(0,0,0,0.6); */
  background-color: rgb(255,255,255);
  border-color: #000;
}

a.google:hover {
  color: #EA4335;
}
a.facebook:hover {
  color: #4267B2;
}
a.yelp:hover {
  color: #D32323;
}

h1, h2, h3, h4, h5, .header h1, .hidden-bar-title {
  font-family: 'SpaceRanger', Verdana, Geneva, Tahoma, sans-serif;
}

body {
  font-family: 'Work-Sans',Verdana, Geneva, Tahoma, sans-serif;
}

.header-bg {
  background-image: url("../img/header_bg.jpg");
  background-size: cover;
  padding: 0;
}

.header {
  color: #fff;
  padding: 2rem 2rem;
}

.header a, header a:hover {
  color: #fff;
  text-decoration: none;
}

.header p {
  background-color: transparent;
  color: #fff;
}

.card-space {
  background: rgba(0, 25, 51, 0.65);
  margin: 0.5rem 0.0rem;
  border-radius: 25px;
  transition: background 0.25s ease, color 0.25s ease;
}

.card-space:hover {
  background: #00254d;
  /* color: #ffdf00; */
}

.header .card {
  background: rgba(0,0,0,0.45);
  border: 1px solid #fff;
  border-radius: 1.5rem;
  margin: 0.5rem 0.0rem;
  transition: background 0.25s ease, color 0.25s ease, border 0.25s ease;
}

.header .card:hover {
  background: #00254d;
  border-color: #ffbf00;
}

.navbar {
  padding: 0rem 1rem;
}

.navbar-toggler, .navbar-toggler .collapsed {
  margin: 0.5rem 0rem;
  padding: 0.5rem 1rem;
  transition: transform 0.25s, margin 0.25s, padding 0.25s;
  transform: rotate(0deg);
}

.navbar-toggler.open {
  padding: 1rem 0.5rem;
  margin: 0rem 0.5rem;
  transform: rotate(90deg);
}

.navbar-dark .navbar-toggler {
  color: #eef;
  border-color: #eef;
}

.navbar-dark {
  background-color: #006099;
  color: #fff;
}

.navbar-dark ul li a {
  color: #fff;
  padding: 10px;
  font-size: 15px;
  display: block;
  text-align: left;
  text-transform: none;
  letter-spacing: 2px;
  font-weight: normal;
}

.navbar-dark .navbar-nav .nav-item:hover {
  background-color: #ade;
  color: #000;
  }

.navbar-dark .navbar-nav .nav-item:hover>.nav-link {
background-color: #ade;
color: #000;
}

li.nav-item.emergency-color {
  background-color: #a22;
  color: #000;
}

.service-list {
  text-align: left;
  list-style-type: none;
  padding-left: 0;
}

.service-list li::before {
  content: "- ";
}

.card-img-container {
  width: 100%;
  align-items: center;
}

.card-img-top {
  padding-top: 1rem;
  max-width: 250px;
}

.emergency-color, .emergency-color a, a.emergency-color {
  color: #f44;
}

.emergency-color a:hover, a.emergency-color:hover {
  color: #f66;
}

.success-color, .success-color a, a.success-color {
  color: #4a4;
}

.success-color a:hover, a.success-color:hover {
  color: #6c6;
}

.highlight-row-border {
  border-top: 2px solid rgb(0, 69, 144);
  border-bottom: 2px solid rgb(0, 69, 144);
}

.highlight-row {
  background-color: rgba(0, 69, 144, 0.75);
  text-align: center;
}

.translucent-bg { 
  padding: 1rem;
  background: rgba(0,0,0,0.45);
}

.saiyan-text {
  font-size: 1.5em;
  line-height: 1.5em;
}

.contact-earth-bg { 
  padding: 2rem;
  background: rgba(0,0,0,0.45);
  border-radius: 2rem;
  margin-top: 40vh;
}

.carousel-control-glow:hover {
  border-radius: 0.5rem;
  background-color: rgba(255,255,255,0.2);
}

.testimonial {
  overflow-y: auto;
}

.testimonial-row {
  transition: all 0.5s;
}

.testimonial-container {
  padding: 1.5rem;
  background-color: rgba(46,46,46,0.7);
  border: 1px solid black;
  border-radius: 1rem;
}

.testimonial-signature::before {
  content: "- ";
  color: #aaf;
}

.testimonial-signature {
  width: 80%;
  text-align: right;
}

.testimonial-signature a {
  font-style: italic;
  text-align: right;
  color: #aaf;
}

.testimonial-signature a:hover {
  font-style: italic;
  text-align: right;
  color: #fff;
  text-decoration: underline;
}

a {
  color: #aaf;
}

a:hover {
  color: #fff;
  text-decoration: underline;
}

.hidden {
  display: none;
}

.btn-generic-success {
  background-color: #1b5e1b;
  border: 1px solid white;
  color: #fff;
  border-radius: 1rem;
  transition: all 0.5s;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  padding: 1rem 2rem;
  font-family: 'Work-Sans',Verdana, Geneva, Tahoma, sans-serif;
}

.btn-generic-success > a {
  color: #fff;
}

.btn-generic-success:hover {
  background-color: #5CB85C;
  border: 1px solid black;
  color: #000;
}

.btn-generic-success:hover > a {
  color: #000;
}

.submodal {
  background-color: #2e2e2e;
  border: 1px solid black;
  padding: 1rem;
  border-radius: 1rem;
}

.service-map {
  width: 100%;
  border:0; 
}

.poweredby {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  padding-top: 0.3rem;
}

.community-list, .community-list ul {
  list-style-type: none;
  padding-left: 0;
  padding-right: 0;
}

footer a:hover > .inline-donkey-logo path {
  fill: #ffbf00;
}

footer {
  background-color: #2e2e2e;
  color: #CCCCCC;
  padding: 1.5rem 0rem;
  font-family: 'Work-Sans',Verdana, Geneva, Tahoma, sans-serif;
}

footer i {
  color: #CCCCCC;
}

footer a {
  color: #CCCCCC;    
  padding-left: 1rem;
  padding-right: 1rem;

}

  footer a i {
      color: #CCCCCC;
  }

      footer a:hover > i {
          color: #ffbf00;
          /* color: #222299; */
      }

      footer a:hover {
          color: #ffbf00;
          /* color: #222299; */
      }

footer .container {
  text-align: left;
}

footer .centerblock {
  text-align: center;
}

footer .footerblock {
  color: #CCCCCC;
  /* color: #222244; */
  text-align: center;
  margin: 0.5rem 0rem;
}

footer .middle {
  border-color: #CCCCCC;
  border-width: 1px;
  border-left-style: solid;
  border-right-style: solid;
}

footer .footerblock #footertext {
  display: inline-block;
  font-size: 1em;
  text-align: left;
}

footer #socialmedia {
  font-size: 1.5em;
}


@media (min-width: 1px) {
  
  .card-deck {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
  }

  .nav-item {
    padding: 0rem 0.5rem;
  }
  .header h1 {
    margin: 0.5rem 0;
  }
  .header p, p.subheader {
    text-align: center;
  }
  

  h1 {
    text-align: center;
  }

  .card {
    text-align: center;
  }
  .top-bar-border {    
    background-image: url("../img/top-bar-flat.svg");
  }  
  .top-bar-contents {
    text-align: center;
  }  
  .top-bar-contents a {
    margin: 0.1rem;
  }  
    
  .contact-earth-bg { 
    padding: 2rem;
    background: rgba(0,0,0,0.45);
    border-radius: 2rem;
    margin-top: 25vh;
  }
  
  .service-map {
    height:350px;
  }  
}

@media (min-width: 512px) {
  .top-bar-contents a {
    margin: 0.5rem;
  }
}

@media (min-width: 576px) {
  .card-deck {
    display: flex;
    flex-direction: column;
    flex-flow: column;
    margin-left: auto;
    margin-right: auto;
    width: 50vw;
  }
  
  .testimonial-container {
    min-height: 40vh;
  }
}

@media (min-width: 768px) {
   
  .card-deck {
    flex-flow: row wrap;
    font-size: 0.8rem;
    width: 100%;
  }

  .nav-item {
    padding: 0.25rem 0.5rem;
  }
  .header h1 {
    margin: 1rem 0;
    text-align: left;
  }
  p.subheader {
    text-align: left;
  }
  .top-bar-border {    
    background-image: url("../img/top-bar.svg");
  }  
  .top-bar-contents {
    text-align: right;
  }
  .top-bar-contents a {
    margin: 0.1rem;
  }  
  
  .testimonial-container {
    min-height: 20vh;
  }
}

@media (min-width: 871px) {
  .top-bar-contents a {
    margin: 0.5rem;
  }  
}


@media (min-width: 992px) {
  .card-deck {
    font-size: 1rem;
  }
  .contact-earth-bg { 
    margin-top: 35vh;
  }
  
  .service-map {
    height:200px;
  }  
}

@media (min-width: 1130px) {
  .top-bar-contents a {
    margin: 1rem;
  }  
}

@media (min-width: 1320px) {
  
  .nav-item {
    padding: 0.25rem 0.5rem;
  }
  .header h1 {
    margin: 1rem 0;
    font-size: 3rem;
  }
}