.my-header-zone {
  min-height: 1em;
}

.my-header {
  margin-top: 0;
  text-align: center;
}

.my-banner {
  margin-top: 0;
}

.my-navbar {
  box-shadow: none;
}

.my-navbar {
  background: rgb(240, 173, 87);
  background: -moz-linear-gradient(90deg,
      rgba(240, 173, 87, 1) 0%,
      rgba(236, 177, 103, 1) 39%,
      rgba(246, 202, 145, 1) 100%);
  background: -webkit-linear-gradient(90deg,
      rgba(240, 173, 87, 1) 0%,
      rgba(236, 177, 103, 1) 39%,
      rgba(246, 202, 145, 1) 100%);
  background: linear-gradient(90deg,
      rgba(240, 173, 87, 1) 0%,
      rgba(236, 177, 103, 1) 39%,
      rgba(246, 202, 145, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0ad57", endColorstr="#f6ca91", GradientType=1);
}

.my-icon img {
  height: 50px;
}

.text-main {
  color: var(--main);
}

.display-5 {
  font-size: calc(1.425rem + 0.5vw);
}

.my-subtitle {
  font-size: 1em;
}

.my-title-mark {
  font-size: 2em;
  color: var(--primary);
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary.active {
  background-color: var(--primary);
  border-color: var(--primary);
}

.bg-light {
  background-color: #fdf3ef !important;
}

.my-page-director {
  opacity: 0;
  padding-top: 2em;
}

@media screen and (min-width: 990px) {
  .my-header-zone {
    min-height: 100vh;
  }

  .my-navbar {
    background: rgb(231, 154, 56);
    background: -moz-linear-gradient(90deg,
        rgba(231, 154, 56, 1) 0%,
        rgba(236, 177, 103, 1) 39%,
        rgba(246, 202, 145, 0) 100%);
    background: -webkit-linear-gradient(90deg,
        rgba(231, 154, 56, 1) 0%,
        rgba(236, 177, 103, 1) 39%,
        rgba(246, 202, 145, 0) 100%);
    background: linear-gradient(90deg,
        rgba(231, 154, 56, 1) 0%,
        rgba(236, 177, 103, 1) 39%,
        rgba(246, 202, 145, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e79a38", endColorstr="#f6ca91", GradientType=1);
  }

  .sticky-top .my-navbar {
    background: rgb(240, 173, 87);
    background: -moz-linear-gradient(90deg,
        rgba(240, 173, 87, 1) 0%,
        rgba(236, 177, 103, 1) 39%,
        rgba(246, 202, 145, 1) 100%);
    background: -webkit-linear-gradient(90deg,
        rgba(240, 173, 87, 1) 0%,
        rgba(236, 177, 103, 1) 39%,
        rgba(246, 202, 145, 1) 100%);
    background: linear-gradient(90deg,
        rgba(240, 173, 87, 1) 0%,
        rgba(236, 177, 103, 1) 39%,
        rgba(246, 202, 145, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0ad57", endColorstr="#f6ca91", GradientType=1);
  }

  .my-header {
    margin-top: 9em !important;
  }

  .my-banner {
    margin-top: 9em !important;
  }

  .display-5 {
    font-size: calc(1.425rem + 1.7vw);
  }

  .my-subtitle {
    font-size: 1.3vw;
  }
}