/* ===== Select Box ===== */

.label{
  display: inline-block;	
  font-size: 16px;
  font-family: 'Raleway', sans-serif;
}

.sel {
  display: inline-block;
  width: 250px;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  margin-left: 20px;
}

.sel__placeholder {
  display: block;
  color: black;
  text-align: left;
  pointer-events: none;
  user-select: none;
  visibility: visible;
  font-size: 20px;
}

.sel.active .sel__placeholder {
  color: #ddd;
  font-size: 20px;
}

.sel__box {
  position: absolute;
  top: calc(100% + 4px);
  left: -4px;
  display: none;
  list-style-type: none;
  text-align: left;
  background-color: #FFF;
  width: calc(100% + 8px);
  box-sizing: border-box;
}

.sel.active .sel__box {
  display: block;
  animation: fadeInUp 500ms;
}

.sel__box__options {
  display: list-item;
  color: black;
  padding: 0.5em 1em;
  user-select: none;
  border-bottom: solid 1px rgba(0, 0, 0, 0.3); 
}

.sel__box__options:hover {
  background: #e6aba2;
  opacity: .5;
  color: black;
}

/* ----- Select Box Black Panther ----- */
.sel {
  border-bottom: 4px solid rgba(0, 0, 0, 0.3);
}

.sel--black-panther {
  z-index: 3;
}

/* ===== Keyframes ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.submit-div {
  text-align: center;
  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
  margin-bottom: 20px; 
  margin-top: 50px;
}
 
/* The ghost, nudged to maintain perfect centering */
.submit-div:before {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.submit-button {
  display: inline-block;
  vertical-align: middle;
}