/* headline: font-family: 'Gloock', serif;
 paragraph: font-family: 'Gloock', serif;
*/

/* Portfolio colors 
bright green: #2bd999
darker green: #238c6e
pink: #f2b3d6
pruple: #b7aef2
gray white: #f2eeeb
balck: #000000
darker pink: #C7699D
*/
body {
	background: #f2eeeb;
}
/*headline: font-family: 'Gloock', serif;
paragraph: font-family: 'Roboto', sans-serif;
*/
body {font-family: 'Roboto', sans-serif;}
h1 h2 h3 h4 h5 h6  {font-family: 'Gloock', serif; }
/* Background color for navbar and dropdown menus */
.navbar-custom, .navbar-custom .dropdown-menu {
    background-color: #F2EDED;
}
.navbar.fixed-top.navbar-expand-lg.navbar-custom {
}
.navbar-brand {
}


/* Text color for navbar and dropdown menus */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item {
    color: black ;
	font-family: 'Gloock', serif;
}
/* Background and text colors for current page link and links on hover and focus */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover, 
.navbar-custom .dropdown-item:focus {
    background-color: #F2EDED;
    color: #C7699D ;
	font-family: 'Gloock', serif;
	
}
/* Border and text colors for menu icon on small screens */
.custom-toggler.navbar-toggler {
    border-color: #f2b3d6;
    color: #C7699D;
	font-family: 'Gloock', serif;
}
/* Hamburger icon - use same rgb values as previous rule for stroke */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(199,105,157,1.00)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-brand {
    background-image: url(../images/kb_logo.png);
    background-repeat: no-repeat;
    background-size: 53px auto;
    background-position: 5% center;
    padding-left: 75px;
	
}
/* home banner*/
#home_banner {
	padding-left: 0px; 
	padding-right: 0px; 
	position: relative ;
}
/*carousel*/
.carousel{
	padding-left: 0px;
    padding-right: 0px;
}

/*3 column*/
.main h2 {
	text-align: center;
}
/*footer*/
footer {
	text-align: center; 
line-height: 60px;
	background-color: #b7aef2;
	color: white; 
}
.btn {
	color: #fff;
	background-color: #238c6e;
}
.jumbotron {
	background-color: #f2eeeb;
}

/*Media Query Breakpoints*/
/*X-SMALL ONLY*/
@media screen and (min-width:375px){
#home_banner h1 {
    font-size: 2rem;
    bottom: 50%;
    left: 1%;
    }    
}


/*SMALL SIZE ONLY*/
@media screen and (min-width:576px){
#home_banner h1 {
    font-size: 2rem;
    bottom: 50%;
    left: 20%;
    } 
}


/*MEDIUM SIZE ONLY*/
@media (min-width: 768px) {
  #home_banner h1 {font-size: 3rem;
               bottom: 50%;
               left: 20%;
              }
  }


/*LARGE SIZE ONLY*/
	@media screen and (min-width:992px){
    #home_banner h1 {
        font-size: 4rem;
        bottom: 50%;
        left: 20%;
        }
	}
.featurette-heading {
	color: #238c6e
}
/* Featurettes
------------------------- */
.featurette {
    text-align: center;
	display:flex;
}

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}
.progress-bar{
background: #238c6e;
}
.badge{
	background: #C7699D;
}
.contact_head {
	color: #b7aef2;
	font-weight: 900;
}
.contact_side {
	background:  no-repeat center center;
	background-size: cover;
	padding:0;
	height:540px;
}

.social a {margin: 0;
	display: inline-block;
	text-decoration: none;
    margin-left:1%;
	margin-right:2%;
}
/* Style all font awesome icons */
.fa {
  padding: 10px;
  font-size: 30px;
  width: 40px;
  margin-right: 5px;
  text-align: center;
  text-decoration: none;
}
/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.2;
}


/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #C7699D;
  color: #FFEEE0;
}

/* Instagram */
.fa-instagram {
  background: #C7699D;
  color: #FFEEE0;
}