/* Gov2go Microsite */
/* colors
yellow #F0BF00
main blue #0179BF
*/

.badge1, .badge2, .badge3, button, .btn { cursor: pointer; }

body{
    background-color: #ffffff;
    margin-top:20px;
    padding: 0;
    color: #333333 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.49em;
}

h1 {
  font-weight: 100;
  font-size: 3em;
}

h2 {
  font-weight: 200;
  font-size: 2.5em;
  color: #0179BF;
}
h3 {
  font-weight: 300;
  font-size: 1.5em;
  color: #333333;
  line-height: 1.49;
}
h4, h5 {
  font-weight: 300;
}
p {
  color: #333333;
}

a {
  color: #0179BF ;
}

li, .bottomPadding {
  padding-bottom: 3%;
}

.fa-circle {
  color: #0179BF;
  font-size: .5em;
  background-color: #0179BF;
}

.headerText {
  padding-top: 5%;
}

.homeImage > img{
  width: 90%;
  padding: 5% 0 0 0;
}

.homeImageMobile > img {
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.homeImage2  {
  width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 8%;

}

/* footer */
.footerText {
  color: #0179BF ;
  font-size: 1em;
  margin-bottom: 0;
}

/* mobile */
.footerLogo {
  display: block;
  /* margin-left: auto;
  margin-right: auto; */
  padding-bottom: 1%;
  padding-right: 2%;
  width: 40%;
  float: right;
}



/* buttons */
.btn-outline-primary {
  color: #0179BF;
  border: 2px solid #0179BF;
  /* padding: 10px 48px; */
  padding: 3% 15%;
  margin: 3%;
}

.btn-outline-primary:hover {
  color: white;
  background-color: #0179BF;
}

.fa-chevron-right {
  padding-left: 8px;
}

/* blue box */

  #overlay {
    z-index: 10;
    position: absolute;
    background: #0179BF;
    text-align: center;
    min-height: 500px;
    display: none;
    left: 0;
    right:0;/*Added right attribut to make width 100%*/
    top: 0;/*Added top attribut to make your div attach to the top of the parent div*/
  }

  #overlay.blue {
    display: inline-block;
  }
.blue {
  background-color: #0179BF;
  color: white;
  padding: 3%;
  margin-bottom: 50px;
}

/* grey box */

  #overlay2 {
    z-index: 10;
    position: absolute;
    background: #f1f1f1;
    text-align: center;
    min-height: 500px;
    display: none;
    left: 0;
    right:0;/*Added right attribut to make width 100%*/
    top: 0;/*Added top attribut to make your div attach to the top of the parent div*/
  }

  #overlay2.grey {
    display: inline-block;
  }
.grey {
  background-color: #f1f1f1;
  color: white;
  padding: 5%;
  margin-bottom: 50px;
  margin-top: 20px;
}

/* hamburger */
.fa-bars, .navbar-toggler{
  background-color: white !important;
  color: #0179BF;
  font-size: 1.5em;
}
a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
    background-color: white!important;
    border: none;
}
/* menu. */
.add-shadow {
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px;

}

/* line under menu items */
li.active > a {
   border-bottom:2px solid #F0BF00;
   font-weight: 500;
}

li.mobileActive > a{
   border-bottom:2px solid #F0BF00;
   font-weight: 500;
}

/*************************************************
**************************************************
Page specific styles
**************************************************/
/* microsite */
.mainLogo > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 1%;
  width: 25%;
}

.mainIcons > img {
  width: 15%;
}

.footerLogo > img {
  width: 40%;
  float: right;
}

.badge1 > img {
  width: 100%;
  float: right;
}
.badge2 > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.badge3 > img {
  width: 100%;
  float: left;
}
/**************************************************
*************************************************
 media queries *
 *************************************************
 *************************************************/
@media only screen and (max-width: 758px) {
  h1 {
    font-size: 2.5em;
  }
  h2 {
    font-size: 2em;
  }
  h3 {
    font-size: 1.5em;
  }
  .mobileActive {
    display: inline-block;
    padding: 2%;
  }
  .homeNav {
    padding-top: 25px;
  }

  .active {
    display: none;
  }
  .homeImage {
display: none;
  }
  .homeImageMobile {
    display: inline;
  }
  /* buttons */
  .btn-outline-primary {
    margin: 0 !important;
  }
button, a {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
  #footerNavMobile {
    display: inline;
  }
  #footerNav {
    display: none;
  }
  .learningImage {
    width: 80%;
  }
  .footerLogo {
    float: none;
    display: block;
 margin-left: auto;
 margin-right: auto;
 width: 70%;
  }
  .desktop {
    display: none;
  }
  .mobile {
    display: inline;
  }
  .mainLogo > img {
    padding: 4%;
    width: 40%;
  }
  .badge1 > img, .badge2 > img, .badge3 > img  {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    float: none;
    padding-bottom: 5%;
  }



}

@media only screen and (min-width: 759px) {
  .mobileActive {
    display: none;
  }
.homeImageMobile {
  display: none;
}
  #footerNavMobile {
    display: none !important;
  }
  .desktop {
    display: inline;
  }
  .mobile {
    display: none;
  }
}