/****************************
FONTS
****************************/
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600');

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;600;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');


* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/****************************
GLOBAL STYLE
****************************/
 :root{
    --body: rgba(69,70,77,1);
    --divider: rgba(153,153,153,1);
        
    --primary-color: rgb(0, 95, 184);
    --primary-color-alt: rgb(0,56,133);

    --secondary-color: rgb(39, 153, 69);
    --secondary-color-alt: rgb(26, 117, 50);

    --tertiary-color: rgb(236, 245, 255);
    --tertiary-color-alt: rgb(220, 235, 249);

    --nav-item: rgba(0, 95, 184,1);
    --nav-item-hover-active:rgb(255,255,255);
    --nav-bar-bg:rgb(255,255,255);

    --job-bg: rgba(0, 95, 184,1);
    --job-color: rgba(255,255,255,1);

    --home-tagline-bg: rgba(243,243,243,1);
    --home-tagline-color: rgba(94,97,107,1);

    --social-color: rgba(255,255,255,0.8);
    --social-a: rgba(255,255,255,0.8);
    --social-a-hover: rgba(255,255,255,1);

    --btn-color: rgba(255,255,255,1);
    --btn-cta-bg: rgb(39, 153, 69);
    --btn-cta-bg-alt: rgb(39, 153, 69);
    --btn-cta-color: rgb(255,255,255,1);
}

body {font-family: 'Source Sans Pro', sans-serif; color:var(--body);}
h1,h2,h3,h4,h5,h6 {font-family: "poppins", sans-serif; font-weight: 600;color: var(--primary-color);}
.divider{display:block; border-top: 1px solid var(--divider); height:0px; margin:25px 0px; clear:both;}
a {color:var(--secondary-color); text-decoration: none;}
a:hover {color:var(--primary-color); text-decoration: underline;}
.color-primary {color: var(--primary-color);}
.color-secondary {color: var(--secondary-color);}
.no_job .lead {font-size: 1.5rem;}
.card {margin-bottom: 1rem; background-color: var(--tertiary-color);}

/***************************
BLOCKQUOTES
****************************/
figure {border-left: solid 5px var(--secondary-color-alt); padding-left: 1rem; color: var(--primary-color-alt);}

/***************************
BUTTONS
****************************/
.btn-primary {background-color: var(--primary-color); border-color: var(--primary-color); color: var(--btn-color);}
.btn-primary:hover {border-color: var(--primary-color-alt); background-color: var(--primary-color-alt); color: var(--btn-color); text-decoration: none;}
.btn-cta {background-color: var(--btn-cta-bg); border-color: var(--btn-cta-bg); color: var(--btn-cta-color);}
.btn-cta:hover {border-color: var(--btn-cta-bg-alt); background-color: var(--btn-cta-bg-alt); color: var(--btn-cta-color); text-decoration: none;}
.btn-success:hover {text-decoration: none;}
.alert {margin-top:20px;}

/***************************
SEARCH ICON
****************************/
.input-group-text {background-color: var(--secondary-color);border: 1px solid var(--secondary-color);color: var(--btn-color);}

/****************************
NAVIGATION
****************************/
.navbar-brand img{max-height:40px;}
.navbar {padding: 0.8rem 0;}
.navbar-bg {background-color: var(--tertiary-color);}
.navbar-light .navbar-nav .nav-link {color: var(--nav-item); margin-left: 1rem; padding: 6px 12px;}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show > .nav-link {color: var(--nav-item-hover-active); text-decoration: none;}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {color: var(--nav-item-hover-active); text-decoration: none;}
.dropdown-item:focus, .dropdown-item:hover {color: var(--secondary-color);background-color:var(--primary-color); text-decoration: none;}
.navbar ul.nav li a:hover {color: var(--nav-item-hover-active);}
.navbar ul.nav .active a, .navbar ul.nav .active a:hover {color: var(--nav-item-hover-active); background:none; box-shadow: none;}
.navbar-light .navbar-nav .nav-link:focus {outline: none; text-decoration: overline;}
/* .nav-item:last-of-type .nav-link{padding-right: 0;} */
.navbar-light .navbar-toggler {color:var(--secondary-color); border-color: var(--nav-item-hover-active);background-color: var(--nav-bar-bg);}
.navbar-light .navbar-toggler-icon svg {stroke:red;}
.dropdown-menu.show {box-shadow: 0 .5rem 1rem rgba(0,0,0,.35)!important;}
.dropdown-item:focus, .dropdown-item:hover {background-color: var(--nav-bar-bg); color:var(--nav-item-hover-active)}

/************************
GIANT BULLETS - NORMAL BULLETS
*************************/
.giant-bullet{font-size: 2.5rem; color:var(--secondary-color);}
.bullet-content h4 {color: var(--secondary-color);}
.bullet-content p {font-size: 1.1rem; line-height: 1.5; color:var(--primary-color-alt);}
ol li {margin: 1rem 0;color:var(--primary-color-alt);}

/****************************
HOME
****************************/
.hero {background-size:cover; background-position: center center; background-color: var(--tertiary-color); overflow: hidden; padding: 3rem 0; border-top: 8px solid var(--secondary-color);}
.hero h1, .hero h2 {text-shadow: 1px 1px 2px rgba(0,0,0,0.2);}
.hero h1 {font-weight: 600;}
.home-search {background-color:var(--primary-color);}
.home-tagline {color:var(--home-tagline-color); background-color:var(--tertiary-color);padding:1rem 0.5rem;}

/****************************
BANNER
****************************/
.banner {background:var(--primary-color); background-size: cover; background-position: center center; height:170px; border-top: 8px solid var(--secondary-color);}
.banner h1 {text-shadow: var(--text-shadow);}
.banner .social a {color:var(--social-color); display: inline-block; transition: transform 0.3s; text-shadow: var(--text-shadow); margin-left:3px;}
.banner .social a:hover, .banner .phone a:hover {color:var(--btn-color);transform: scale(1.1); cursor: pointer;}
.banner .phone, .banner .phone a{color:var(--social-color); text-shadow: var(--text-shadow); letter-spacing: 1px;}

/****************************
JOBS
****************************/
#clearJobSearch {cursor:pointer;}
.jobs-table h1 {font-size:1.2rem;}
.jobs-table h1 a, .jobs-table h2 {color:var(--job-color);}
.jobs-view h2, .jobs-apply h2 {font-size: 1.5rem;}
.home-job, .jobs-job {background-color: var(--job-bg); box-shadow: 0 .125rem 0.25rem rgba(0,0,0, 0.075); color: var(--job-color);}
/* .home-job {border: solid 1px #ddd; box-shadow: 0 .125rem 0.25rem, rgba(0,0,0, 0.095);} */
.home-job, .jobs-job {border-top: solid 10px var(--secondary-color); box-shadow: 0 .125rem 0.25rem, rgba(0,0,0, 0.095);border-left: none;border-right: none; border-bottom: none;}
.jobs p, .jobs-table h2{font-size: 0.9rem;}

/****************************
BLOG
****************************/
.blog-table h1 {font-size:20px; font-weight: 600;}
.blog-table h2 {color:#5E616B; font-size:15px; font-weight: 600; margin:10px 0 15px 0;}
.blog-view h2 {color:#5E616B; font-size:15px; font-weight: 600; margin:10px 0 15px 0;}

/****************************
GOOGLE
****************************/
#map {width: 100%; height: 400px; float:right;}
.g-recaptcha {margin-top:25px;}

/****************************
CONTACT
****************************/
address {margin-top:25px;}
address .block {display:inline-block; vertical-align: top;}
address .fa {width:20px; display:inline-block; position:relative; top:1px; color:var(--primary-color-alt);}

/****************************
DESKTOP
****************************/
@media screen and (min-width: 992px) {
    .navbar-brand img{max-height:35px;}
    .navbar {padding: 1rem 0;}
    .hero h1 {font-size: 5rem;}
    .hero h2 {font-size: 2rem;}
    .size {width:50%;}
    .hero {padding: 5rem 0;}
    .home-tagline {padding: 3rem 0;}
    .home-job {min-height: 230px;}
    .jobs-job {min-height: 270px;}
    .banner {padding: 2rem 0;}
}

/****************************
Custom
****************************/
.lead {font-weight: 400;}
.jobs p {color: rgb(255,255,255)}
.jobs-table h1, .jobs-table h2 {color: rgb(255,255,255)}
.jobs .btn-primary {background-color: var(--tertiary-color); color: #333;}
.jobs .btn-primary:hover {background-color: var(--tertiary-color-alt); color: #333;}
.home-search {border-top: 1px solid var(--tertiary-color)}
.txt-green {color: var(--secondary-color);}
.blockquote {color: var(--primary-color); border-left: 5px solid var(--secondary-color); padding-left: 15px; margin: 20px 0;}
.card {padding: 15px; border: none;}
.card-title {margin-bottom: 1.5rem; text-align: center; border-bottom: 1px solid #005fb8;  padding-bottom: 1.5rem; font-weight: 700;}
.card-footer {padding: 1rem 0 0 0; background-color: transparent; margin-top: 1.5rem; border-top: none;}
.hero h1 {font-size: 2rem;}
.hero h2 {font-size: 1.2rem;}

.jobs-table h1 a:active, .jobs-table h1 a:visited, .jobs-table h1 a:hover {color:#dddddd;}

#special li {list-style-type:none; position: relative; padding-left: 32px;}

/* remove default UL spacing */
#special {padding: 0 0 0.4rem 0; margin: 0; list-style: none; border-bottom: 1px solid var(--primary-color);}

/* list items become grid items */
#special {display: grid; gap: 1rem 3rem;}

/* single column on mobile/tablet */
#special {grid-template-columns: 1fr;}

/* two columns on large screens */
@media (min-width: 992px) {#special {grid-template-columns: 1fr 1fr;}}

#special li::before {
    font-family: 'Font Awesome 5 Free'; /* or your FA family name */
    font-weight: 900;                   /* needed for solid icons in FA5+ */
    content: "\f046";
    position: absolute;
    top: -3px;
    left: 0;
    font-size: 1.5rem;
    color: var(--primary-color);
    /* no margin needed */
}
#special h4 {font-size: 1.1rem; display: inline-block;}
#special p {font-size: 1rem;}
.card-title {font-size: 1.8rem;}

/**** NAV ****/
.nav-pills .nav-link {background: 0 0; background-color: rgba(0, 0, 0, 0); border: 0; border-radius: 999px; padding: 6px 12px;}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {color: #fff; background-color: var(--primary-color);}
.navbar ul.nav li a:hover  {background-color: var(--primary-color);}
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible,
.navbar .nav-link:hover {text-decoration: none !important;}

/***** DESKTOP ******/
@media screen and (min-width: 992px) {
.navbar-brand img {max-height:65px;}
#special li {padding-right: 150px;}
.card {padding: 15px;}
.card-title {font-size: 2.5rem;}
.super-lead {font-size: 1.8rem; line-height: 38px; padding-bottom: 2rem;}
#special h4 {font-size: 1.4rem;}
#special p {font-size: 1.1rem;}
.hero h1 {font-size: 5rem;}
.hero h2 {font-size: 2rem;}
}

/* ANIMATIONS */
.animate-main-heading {
    opacity: 0;
    animation: mainHeading 1000ms 250ms cubic-bezier(.01,.95,.99,.99) forwards;
  }
  @keyframes mainHeading {
    0% {
      opacity: 0; transform: translateX(-10%);
    }
    100% {
      opacity: 1; transform: translateY(0);
    }
  }
  
  .animate-subheading {
    opacity: 0;
    animation: subHeading 2s 500ms forwards;
  }
  @keyframes subHeading {
    0% {
      opacity: 0; 
    }
    100% {
      opacity: 1;
    }
  }
.home-job, .jobs-job {background-color: var(--job-bg); transition: box-shadow 0.3s;}
  .home-job:hover, .jobs-job:hover {box-shadow: 1px 4px 8px rgba(0, 22, 78, 0.4);}