@import url('https://fonts.googleapis.com/css?family=Hind:400,500,600,700|Libre+Franklin:400,500,900i&display=swap');
@import url("https://use.typekit.net/evo6aml.css");

.intro-heading {
    font-size: 2.5em;
    line-height: 1.5em;
    margin: auto;
    height: 0.2em;
    text-shadow: 2px 2px 4px rgb(0, 64, 124);
    /* background-color: blue; */
}

.carousel-caption {
    position: relative;
    bottom: 0px;
    z-index: 10;
    padding-top: 10px;
    padding-bottom: 0px;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 4px rgb(0, 64, 124);
    height:  8em;
    right: 0%;
    left: 0%;
    padding-bottom: 0%;
    background-color: #0054a4;
    }

a:focus, a:hover {
    color: #23527c;
    text-decoration: none;
}

.promo-wrapper {
  background-color: #272629;
}

.secondary_text {
  color: #ffffff;
  padding: 20px;
  font-weight: 100;
  font-size: 1.2em;
  font-family: canada-type-gibson, sans-serif;
  font-style: normal;
}
.promo-button {
  background: #bf3138;
  border-radius: 0px;
  padding: 8px 34px;
  color: #ffffff;
  display: inline-block;
  text-align: center;
  font-size: 0.9em;
  margin-left: 15px;
  margin-bottom: 15px;
}

@media only screen and (min-width: 1200px) {
    .container-fluid {
        /* 
        Not sure why someone put a max-width on ".container-fluid" because container-fluid should allow things to be 100% width by default. 
        Use ".container" instead if you want a max width. Decided to leave this here incase it breaks anything though. Please lmk before uncommenting this. -Brodie
        max-width: 1170px;
        */
    }
    .promo-wrapper {
        /*height: 220px;*/

    }
    .recipe-wrapper{
        height: 380px; /* 98%; */
    }
    .navbar-default .navbar-nav>li>a {
        letter-spacing: 1px;
    }

    .intro-heading {
        font-size: 2em;
        margin: auto;
        height: 2.5em;
        text-shadow: 2px 2px 4px #000000;
    }
}

@media only screen and (min-width: 992px) {
.intro-heading {
    font-size: 2em;
    line-height: 2em;
    margin: auto;
    height: 0em;
    text-shadow: 2px 2px 4px rgb(0, 64, 124);
    /* background-color: blue; */
	}
  .secondary_text {
    height: 141px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.intro-heading {
    font-size: 1.5em;
    margin: auto;
    height: 0em;
    text-shadow: 2px 2px 4px rgb(0, 64, 124);
	}
}

@media only screen and (max-width: 991px) {
  .promo_block {
    margin-top: 10px;
    }
}



@media screen and (max-width: 767px) {
.carousel-indicators {
  bottom: 0px;
}

.carousel-caption {
    height:  5em;
    right: 0%;
    left: 0%;
    padding-bottom: 5%;
    padding-top: 3%;
    background-color: #0054a4;
	}
.intro-heading {
    font-size: 1.2em;
    line-height: 1em;
    margin: auto;
    height: 0.5em;
    text-shadow: 2px 2px 4px rgb(0, 64, 124);
    /* background-color: blue; */
	}
div.second-box {margin-top: 20px;}

}

.promo-label {
    color: #fff;
    text-align: left;
    margin-top: 0;
    padding-top: 20px;
    padding-left: 20px;
    font-family: canada-type-gibson, sans-serif;
    font-weight: 700;
    font-size: 2em;
}