/* ========================================================================
 * General common BootBites.com styling
 * Note specific to the tutorial.
 *
 * @see: css/tutorial.css file for tutorial specific CSS
 * ========================================================================
 * Copyright 2015 Bootbites.com (unless otherwise stated)
 * For license information see: http://bootbites.com/license
 * ======================================================================== */
/* ==================================================
  Regions
  ================================================== */
@import url('https://fonts.googleapis.com/css2?family=Metal&display=swap');
.navbar-bootbites {
    background-color: #063;
    margin-bottom: 0px;
    color: #e3e3e3;
    -webkit-box-shadow: 0px 0 2px 2px #F9F7F7;
    box-shadow: 0px 0 2px 2px #F9F7F7;
}
.navbar-bootbites .navbar-brand,
.navbar-bootbites .navbar-nav > li > a {
  color: #e3e3e3;
}
.navbar-bootbites .btn {
  color: #f3f3f3;
}
.jumbotron-bootbites {
    background-color: #F7F4F5;
}
.content {
    padding-right: 0;
    padding-left: 0;
    opacity: 1;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
}

/* ==================================================
  Styling
  ================================================== */
.btn {
    border-radius: 12px;
    font-size: 16px;
    text-align: center;
}
.btn-bootbites {
	background-color: #3D466D;
	border-color: #E9EBEC !important;
}
.btn-bootbites:hover,
.btn-bootbites:focus,
.btn-bootbites:active,
.btn-bootbites.active {
  background: #523e71;
}
.btn-bootbites-invert {
  background: #523e71;
  border-color: #523e71 !important;
  border-radius: 0;
}
.btn-bootbites-invert:hover,
.btn-bootbites-invert:focus,
.btn-bootbites-invert:active,
.btn-bootbites-invert.active {
  background: #6f5499;
}
/* ==================================================
  Common
  ================================================== */
.intro {
  margin-bottom: 3em;
  padding-bottom: 3em;
  border-bottom: 5px solid #eee;
}
.demos .demo {
  margin-bottom: 3em;
  padding-bottom: 3em;
  border-bottom: 1px solid #eee;
}
.demos .demo:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
hr {
	height: 1px;
	background: #eee;
}
hr.hr-lg {
  height: 5px;
}

/*RRM Update*/
html, body {
  overflow-x: hidden;
  font-size: 16px;
}
.container { padding-left: 20px; padding-right: 20px;}
.pagetitle { margin:0!important; padding:0!important}
.cta-btn { text-align:center}
.cta-btn a { background-color:#063; padding:10px 15px;}
.btn-primary, .btn-toolbar {padding:10px 15px;}
.btn-toolbar {
  color:#ffffff!important;
}
.btn-toolbar:hover {
  color:#ffffff;
  background: #000000;
}
.resources h5 {
  color: #000;
  padding:0; margin:0 0 20px 0;
  font-weight: bold;
}
.resources p  a {font-weight: bold;}
ul li {
  font-weight: normal!important;
}
.stickytop {

    position: fixed;
    top: 0;
  z-index: 9999;
  background:#f5f3f4;
  width: 100%;
}
body {
  /*padding-top:215px;*/
    padding-top:268px;  
  /* Covid message space */
  margin-top: -60px; 
}
.phonebar {
  color:#000000;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
}
.phonebar a {
  color:#063!important;
  text-decoration: none;
  font-size: 16px!important;
}
.phonebar a:hover {
  color: #000000!important;
}
.covidbar {
  background: #437ed4;
  padding:5px 20px;
  text-align: center;
  margin-bottom: 10px;

}
.covidbar a {
 color:#ffffff;
 text-decoration: none;
 display: inline-block;
 font-size: 12px;
 font-weight:normal;
}
.covidbar a strong {font-size:14px;}
.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
 pointer-events: none;
}
.navbar-dark .navbar-nav .nav-link {
  color:#ffffff!important;
}
.brand-logo {     width: auto;
    margin: 0 auto;
    /*max-height: 180px;*/
    max-height: 145px;
}
.navbar-dark .navbar-toggler {
  color:#ffffff;
  border-color:#ffffff;
}
.text-center { text-align: center;}
.panel-group {margin-top: 30px;}
.panel-body {
  padding-top:20px;
  padding-bottom: 20px;
}
.panel-title {
  margin:0;
}
.panel-title a {
  font-size:16px!important;
}
#accordion .panel-heading a:before {
  top:0!important;
}
.panel-heading {padding:10px!important}
footer {
  padding-top: 40px;
  padding-bottom: 20px;
  text-align: center;
  font-size: 14px;
}
footer p {
  font-size: 14px;
}
p {
  padding:0; margin:0 0 20px 0;
}
.fronth2 {
  margin-left: 0!important;
}
.common-footer {
  margin-top:30px;
}
.common-footer .img img {
max-width: 100%;
height: auto;
}
.gap20 {
  height: 20px;
}
.common-footer h4 {
  padding:10px 0 20px 0
}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
footer a {font-size: 14px; font-weight: normal;}
@media screen and (max-width:768px) {
  .pagetitle h1 { font-size: 28px;}
  .phonebar {text-align: center;font-size: 14px; }
  .phonebar a {font-size: 14px;}
  .brand-logo { width:250px; margin:10px auto;}

  .navbar-dark .navbar-nav .nav-link, .dropdown-item {
    font-size: 14px;
  }
  body {
   /* padding-top: 145px;*/
    padding-top: 180px;
  }
}

/*FORM*/

.help-block { color:red; font-size:11px}

.buttonwrap { text-align: center;}
.buttonwrap a { margin:10px 20px}
.accordion-head a { position: relative; display: block;}
.accordion-head i{

  position: absolute;
  right: 10px;
  top: calc(50% - 0.4rem);
}
.accordion-head h2 { font-size:18px; padding: 10px 20px 10px 10px; margin: 0;}
.accordion-head > .collapsed > i:before{
  content: "\f105";
}

#accordion .card-header { background:#063; color:#fff}
#accordion .card-header a {color:#ffffff}

#accordion .card-block {
  background:#ffffff;
  padding:20px
}

#accordion .card-block p:before,
#accordion .card-block p:after {
  display: none;
}

.resources ul li {
  margin-bottom:15px;
}

/*.covidbar {display:none}
.phonebar {padding-top:10px;}*/

/****/



.banner-home { 
	padding:40px 60px;
	background-image:url('../img/WBSPFH_Directions.jpg');
	background-repeat:no-repeat;
	background-size: clamp(1000px, 100%, 100%) auto;
	background-position:center center;
	height:400px;
	display:flex;
	flex-direction: column;
	align-items: left;
	justify-content: flex-end;
  }
  .banner-home h1 {
	font-family: "Metal", serif;
	font-weight: 400;
	font-style: bold;
	color:#ffffff;
	font-size: clamp(1.5rem, calc(1.6rem + .9vw), 3.5rem);
	line-height:1.3;
	margin:0 0 20px 0;
	padding:0;
	text-shadow: 3px 3px 1px rgba(0,0,0,0.8);
	max-width:540px;
  }
  
  .banner-home figure {background:white; display:inline-block; padding:0; margin:0; max-width:200px}
   .banner-home figure img {max-width:100%}
  
  body {margin-top:15px;}
  @media screen and (max-width:767px){
	.banner-home {
	  height:300px;
	  background-size: clamp(1000px, 100%, 100%) 100%;
	  padding:40px 20px;
	}
body {margin-top:110px;}
body.home {margin-top:75px;}
  }
  
  @media (min-width:768px) and (max-width:991px){
   .banner-home {
	  height:370px;
	  background-size: clamp(1000px, 100%, 100%) 100%;
	  padding:40px 20px;
	} 
	.banner-home h1 {
	  max-width:440px;
	}
  }
  
  @media (min-width:992px) and (max-width:1499px){ 
  .banner-home {
	  height:400px;
	  background-size: clamp(1000px, 100%, 100%) 100%;
	  padding:40px 20px;
	}
  }