body,
html {
  width: 100%;
  height: 100%;
}

.Sandbox {
	background-color: #fff3cd;
}

.white-bg {
	background-color: #fff;
}

.mt-my {
	margin-top: 5rem;
	padding: 1rem
}

.my-bg {
	height: 100%;
}

.my-bg h1, .my-bg h2, .my-bg h3, .my-bg h4 {
	color: #000;
}

.btn-primary {
  background-color: #f4623a !important;
  border-color: #f4623a !important;
}

.btn-primary:hover {
  background-color: #f24516 !important;
  border-color: #ee3e0d !important;
} 
.btn-primary:focus, .btn-primary.focus {
  background-color: #f24516 !important;
  border-color: #ee3e0d !important;
  box-shadow: 0 0 0 0.2rem rgba(246, 122, 88, 0.5) !important;
} 
.btn-primary.disabled, .btn-primary:disabled {
  background-color: #f4623a !important;
  border-color: #f4623a !important;
} 
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
  background-color: #ee3e0d !important;
  border-color: #e23a0d !important;
} 
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(246, 122, 88, 0.5);
} 

.btn-xl { 
  padding: 1.25rem 2.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  border-radius: 10rem;
}

.container {
	max-width: 98% !important;
}

header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 4.5rem);
  background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../images/photo-of-man-holding-camera-3062541.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
} 
header.masthead h1 { 
  font-size: 2.25rem;
}

@media (min-width: 992px) {
  header.masthead {
    min-height: 40rem;
    padding-bottom: 0;
  }
  header.masthead p {
    font-size: 1.15rem;
  }
  header.masthead h1 {
    font-size: 3rem;
  } 
} 
@media (min-width: 1200px) {
  header.masthead h1 {
    font-size: 3.5rem;
  }
} 

#resources .container-fluid .portfolio-box, #resources .container-sm .portfolio-box, #resources .container-md .portfolio-box, #resources .container-lg .portfolio-box, #resources .container-xl .portfolio-box {
  position: relative;
  display: block;
}
#resources .container-fluid .portfolio-box .portfolio-box-caption, #resources .container-sm .portfolio-box .portfolio-box-caption, #resources .container-md .portfolio-box .portfolio-box-caption, #resources .container-lg .portfolio-box .portfolio-box-caption, #resources .container-xl .portfolio-box .portfolio-box-caption {
  display: flex; 
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  bottom: 0;
  text-align: center;
  opacity: 0;
  color: #fff;
  background: rgba(244, 98, 58, 0.9);
  transition: opacity 0.25s ease;
  text-align: center;
} 
#resources .container-fluid .portfolio-box .portfolio-box-caption .project-category, #resources .container-sm .portfolio-box .portfolio-box-caption .project-category, #resources .container-md .portfolio-box .portfolio-box-caption .project-category, #resources .container-lg .portfolio-box .portfolio-box-caption .project-category, #resources .container-xl .portfolio-box .portfolio-box-caption .project-category {
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
}
#resources .container-fluid .portfolio-box .portfolio-box-caption .project-name, #resources .container-sm .portfolio-box .portfolio-box-caption .project-name, #resources .container-md .portfolio-box .portfolio-box-caption .project-name, #resources .container-lg .portfolio-box .portfolio-box-caption .project-name, #resources .container-xl .portfolio-box .portfolio-box-caption .project-name {
  font-size: 1.2rem;
} 
#resources .container-fluid .portfolio-box:hover .portfolio-box-caption, #resources .container-sm .portfolio-box:hover .portfolio-box-caption, #resources .container-md .portfolio-box:hover .portfolio-box-caption, #resources .container-lg .portfolio-box:hover .portfolio-box-caption, #resources .container-xl .portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}

.text-white-75 {
  color: rgba(255, 255, 255, 0.75);
}