/* FONT CUSTOMIZATIONS */
/* h2, h3, h4 {font-weight:bold !important}
h1 {font-size:2.5rem !important}
h2 {font-size:1.5rem !important}
h3 {font-size:1.2rem !important}
h4 {font-size: 1rem !important; line-height: 1.5rem !important;}
h5 {font-size: .8rem !important;}

body, p, li {
    font-family: "Interstate", Arial, sans-serif;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    font-weight: lighter;
}

.btn-primary {
    color: #002d72 !important;
    background-color: #c4d600 !important;
    border-color: #c4d600 !important;
}
.btn {
    border-radius: 25px !important;
} */

/* #main-header #blue-wave-inner #main-header-lob a {
    font-size: 1.6em;
}

#dropdownMenu2.btn-secondary {background-color:#ffffff; 
    border-color: #ffffff;
    color: #53565a; font-weight:lighter} */

/* LAYERS - MOBILE FIRST */
/* This first section pertains to xs size and up. media queries ahead to cover any overrides needed for sm, md, lg, xl */
/* Note also that any mods will cascade up to next size in order listed below and may need to be overridden in each */

/* Hero */
#hero {overflow:hidden; position:relative}
.mantle-bg-wrapper {position:absolute; overflow-x:visible; width:100%; margin-left: -10%; } /* NOTE: Added neg margin */
img.mantle-bg {position:absolute; margin-top:-1800px} /* NOTE: Moved up */
.mantle {position:relative; overflow:visible; min-height: 150px; } /* NOTE: Added min-height */

.mantle .row {overflow:visible; position: relative; }

#spring-hero-background-shape1 {
  margin-top: -1900px;
  transform: rotate(-45deg);
  opacity:0;
  transition: all 1.5s;
}
#spring-hero-background-shape1.reset { transform: rotate(-15deg) ; opacity:1; }

#spring-hero-background-shape2 {
  margin-top: -1845px;
  transform: rotate(-70deg);
  opacity:0;
  transition: all 1s;
}
#spring-hero-background-shape2.reset { transform: rotate(-40deg) ; opacity:1; }

#spring-hero-background-shape3 {
  transform: rotate(-45deg);
  opacity:0;
  transition: all 1.5s;
}
#spring-hero-background-shape3.reset { transform: rotate(-15deg) ; opacity:1; }

#spring-hero-background-shape4 {
  margin-top: -1710px; /* NOTE: Slight Reposition */
  transform: rotate(-41deg);
  opacity:0;
  transition: all 1s;
}
#spring-hero-background-shape4.reset { transform: rotate(-11deg) ; opacity:1; }

/* Articles List */
#articles .article-link {
  transition: all 0.3s ease;
}

/* Pagination */
#pagination .page-link {border-color: #f1f1f1;}

#get-started {overflow:hidden}
.get-started {overflow-x:visible; position: relative; margin-left: auto; margin-right: auto; }
.get-started-inner1 {position:absolute; height:300px; overflow:visible; transform: translateX(-50%); }
.get-started-inner2 {padding-left: 5%; padding-right: 5%; transform: translateY(-0%);}
#get-started-background-shapes img {height:300px; transform: translateY(0); transform: translateX(10%);}
#get-started-text {padding-right:10%; padding-top: 50px; padding-left:0%}
#get-started-form {padding-top: 50px; padding-left: 5%; padding-right: 5%; }

/* MEDIA QUERIES */
/* Extra small devices (portrait phones, less than 576px)
 No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .mantle-inner1 img.mantle-bg {width:800%; height:916%; transform: translateY(-60%);  } /* height of this image is 1.14 x width */
  .mantle-inner2  {
    padding-bottom: 0px;
  }
}

/* Medium-Large devices (desktops, Tablet and up, 768px and up)  */
@media (min-width: 768px) { 
  /* img.mantle-bg {margin-top:-1450px} */
  .mantle-bg-wrapper {
    margin-left: -150px; /* NOTE: Added neg margin */
  }
  .mantle-inner1 img.mantle-bg {width:200%; height:228%; transform: translateY(-60%);  } /* height of this image is 1.14 x width */
  .mantle-inner2 {padding-bottom:100px}
  #spring-hero-lines img {visibility:visible; width:140%; }

  .get-started-inner1 {height:300px; transform: translateX(-30%); }
  .get-started-inner2 {height:300px;  }
  #get-started-background-shapes img {height:300px; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .mantle-bg-wrapper {
    margin-left: -275px; /* NOTE: Added neg margin */
  }
  /* img.mantle-bg {margin-top:-1750px} */

  .mantle-inner2 {padding-bottom:120px}

  .get-started {overflow:visible; height:450px;}
  .get-started-inner1 {position:absolute; height:450px; transform: translateX(-70%); }
  .get-started-inner2 {position:absolute; height:450px; overflow:visible; margin-left: 0%;  }
  #get-started-background-shapes img {height:450px; }
  #get-started-text {padding-right:25%; }
  #get-started-form {padding-left:50px}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.mantle-bg-wrapper {
    margin-left: -375px; /* NOTE: Added neg margin */
  }
  /*img.mantle-bg { margin-top:-1750px} */
    
  .mantle-inner2 {padding-bottom:250px}

  .get-started-inner1 {transform: translateX(-60%); }
}




/* -------------- IE HACKS ------------------- */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .mantle-bg-wrapper { left:-960px; text-align:center }
}

/* IF NEEDED LATER - MORE MEDIA QUERIES FOR IE

@media all and (min-width: 768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}

@media all and (min-width: 1200px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
*/