body {
  background-color: #EEF;
  background: linear-gradient(rgba(240, 255, 240, 0.8), rgba(240, 255, 240, 0.8)), url("../images/salad.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  margin-bottom: 60px; }

header {
  max-width: 1024px;
  margin: auto; }
  header .navbar-brand i {
    margin-right: 8px; }

footer {
  max-width: 1024px;
  height: 56px;
  margin: auto;
  display: inline-block;
  position: fixed !important;
  bottom: 0;
  right: 0;
  left: 0;
  padding: .5rem 1.5rem;
  z-index: 50; }

main {
  max-width: 1024px;
  margin: auto;
  position: relative; }

.title {
  margin: 50px 0 50px;
  width: 100%; }

main {
  min-width: 320px;
  margin-top: 30px;
  margin-bottom: 56px; }

.recipe {
  font-size: 12px;
  border: 1px solid black;
  border-radius: 6px;
  background-color: #fcffe1;
  background-color: rgba(252, 255, 225, 0.8);
  margin-bottom: 20px;
  box-shadow: -1px 2px 4px #552;
  box-shadow: -1px 2px 4px rgba(85, 85, 34, 0.5); }
  .recipe .recipe-title {
    text-align: center;
    font-size: 1.4rem;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 43px;
    text-transform: capitalize; }
  .recipe .recipe-time {
    text-align: center;
    font-size: 1em;
    margin-top: -1px;
    border-top: 1px solid black;
    border-bottom: 1px solid black; }
  .recipe .section-title {
    font-size: 1.1rem; }
  .recipe .recipe-section {
    border: 1px solid gray;
    height: 115px;
    padding: 5px;
    overflow-y: auto;
    border-radius: 4px;
    box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5); }
    .recipe .recipe-section ol {
      padding-left: 16px; }
  .recipe .btn-group {
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%; }
    .recipe .btn-group button {
      width: 33.3333%;
      font-size: 0.8rem; }

.form-check {
  margin-bottom: 0; }
  .form-check .form-check-input {
    margin-right: 5px;
    vertical-align: text-bottom; }

.newRecipeButton {
  width: 100%;
  height: 396px;
  text-align: center;
  border-radius: 6px;
  display: table;
  background-color: #c8c8aa;
  background-color: rgba(20, 20, 5, 0.2);
  box-shadow: -1px 2px 6px #552; }
  .newRecipeButton .inner {
    opacity: 0.75;
    display: table-cell;
    vertical-align: middle;
    font-size: 2rem;
    font-weight: 500; }
    .newRecipeButton .inner:hover {
      opacity: 0.9; }
  .newRecipeButton:hover {
    border-color: rgba(0, 0, 0, 0.5);
    background-color: #a0a087;
    background-color: rgba(20, 20, 5, 0.3); }

.modal-content .modal-body .input-group {
  margin-bottom: 20px; }
.modal-content .modal-recipe-section-header {
  margin-top: 20px; }
.modal-content .modal-recipe-section {
  border: 1px solid gray;
  min-height: 100px;
  max-height: 400px;
  padding: 5px;
  overflow-y: auto;
  overflow-x: wrap;
  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5); }
  .modal-content .modal-recipe-section ol {
    padding-left: 16px; }
.modal-content .recipe-directions {
  padding-left: 10px; }

.fade.in {
  opacity: 1; }

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0); }

.modal-backdrop.in {
  opacity: 0.5; }

a:hover {
  text-decoration: none; }

.text-shadow {
  text-shadow: -3px 3px 8px #444; }

.white-shadow:hover {
  text-shadow: 0 0 8px #EEE; }

.display-6 {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.1; }

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default; }

.form-control::-webkit-input-placeholder {
  color: lightgray; }

.form-control:-moz-placeholder {
  color: lightgray; }

.form-control::-moz-placeholder {
  color: lightgray; }

.form-control:-ms-input-placeholder {
  color: lightgray; }

@media screen and (max-width: 720px) {
  .title {
    font-size: 3rem; } }
@media screen and (min-width: 576px) {
  .modal-dialog {
    max-width: 800px; } }
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc; }

.btn-default.focus, .btn-default:focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c; }

.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad; }

.btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad; }

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open > .dropdown-toggle.btn-default.focus, .open > .dropdown-toggle.btn-default:focus, .open > .dropdown-toggle.btn-default:hover {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c; }

.btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default {
  background-image: none; }

.btn-default.disabled.focus, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled].focus, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover {
  background-color: #fff;
  border-color: #ccc; }

.btn-default .badge {
  color: #fff;
  background-color: #333; }

/*# sourceMappingURL=app.css.map */