h1
{
  margin: 0;
  font-family: "Poppins", sans-serif;
  text-shadow: 1px 1.5px #000000;
  color: #ffffff;
}

/* .menu-deco
{
  top: 30px !important;
}

.hamburger-menu
{
  top: 35px !important;
} */


section.header-top-bar
{
  position: fixed;

  z-index: 12;

  width: 100%;
  height: 110px;
  /* height: 110px; */

  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding-left: 5vw;
  padding-right: 110px;

  background-image: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.705), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3), #ffffff00);

  transition: all .8s;
}

section.header-top-bar a
{
  text-decoration: none;
  color: #fff;

  width: 20%;
  min-width: 225px;
  max-width: 265px;

  display: flex;
  align-items: center;
  justify-content: center;
}

section.header-top-bar a i
{
  display: none;

  color: #fff;
  font-size: 35px;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}

section.header-top-bar img
{
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,.7));
}

section.header-top-bar.sticky
{
  background-image: none;
  height: 80px;
}



header.banner-medium
{
  position: fixed;

  top: 0;
  left: 0;
  z-index: 10;

  width: 100%;
  height: 60vh;

  background-color: #000;

  box-shadow: 0 3px 4px rgba(0,0,0,.4);

  transition: all .8s;
}

h1
{
  text-align: center;
  position: absolute;
  z-index: 50;

  top: 50%;
  left: 0;
  transform: translate(100px, -50%);

  font-weight: 600;
  font-size: 4em;
  line-height: 69px;

  animation: myTransition2 .8s ease-out forwards;
}

.banner-medium img
{
  position: absolute;

  bottom: 0;
  left: 0;
  
  width: 100%;
  height: auto;

  opacity: .9;
  transition: all .8s ease-out;
}



header.banner-medium.sticky
{
  z-index: 11;
  height: 80px;
  background-color: var(--my-blue);
}

.banner-medium.sticky img
{
  opacity: 0;
  visibility: hidden;
}

.banner-medium.sticky h1
{
  animation: myTransition .8s -.05s ease-out forwards;
  
  font-size: 2em;
  line-height: 35px;
  font-weight: 500;
}

.banner-medium.sticky h1.long-title
{
  font-size: 1.6em !important;
  line-height: 26px !important;
}

.about-container
{
  margin-top: calc( 80px + 60vh ) !important;
  transition: all 1s;
}

.about-container.sticky
{
  margin-top: 50vh !important;
}





@keyframes myTransition
{
  0%
  {
    top: 50%;
    left: 0;
    transform: translate(100px, -50%);
  }
  100%
  {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@keyframes myTransition2
{
  0%
  {
    /* text-align: center; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  100%
  {
    /* text-align: left; */
    top: 50%;
    left: 0;
    transform: translate(100px, -50%);
  }
}

@keyframes myTransitionLong
{
  0%
  {
    /* text-align: center; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  100%
  {
    /* text-align: left; */
    top: 50%;
    left: 0;
    transform: translate(10px, -50%);
  }
}









@media (min-width: 1300px) {
  
}

@media (min-height: 1000px) {
  .banner-medium img
  {
    height: 100%;
    object-fit: cover;
  }
}


@media (max-width: 1000px) {
  
  h1
  {
    font-size: 3em;
    line-height: 54px;
  }

  section.header-top-bar.sticky a
  {
    display: unset;
    width: unset;
    min-width: unset;
    max-width: unset;
  }

  section.header-top-bar.sticky a i
  {
    display: block;
  }

  section.header-top-bar.sticky img
  {
    display: none
  }

}




@media (max-width: 880px) {
  .banner-medium img
  {
    height: 100%;
    object-fit: cover;
  }
  
}




@media (max-width: 800px) {

  header.banner-medium
  {
    justify-content: center;
  }
  
}

@media (max-width: 760px) {

  .banner-medium.sticky h1.long-title
  {
    font-size: 1.3em !important;
  }
}

@media (max-width: 700px) {

  /* h1.long-title
  {
    animation: myTransitionLong .8s ease-out forwards !important;
  } */
}


@media (max-width: 650px) {

  .banner-medium.sticky h1 {
    font-size: 1.3em;
    line-height: unset;
    /* padding:  0 115px; */
  }
  
}


@media (max-width: 600px) {

  header.banner-medium
  {
    height: 50vh;
  }

  .about-container
  {
    margin-top: calc( 80px + 50vh) !important;
  }
  
  h1
  {
    width: 100%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: none;
    transition: .8s;
  }

  .banner-medium.sticky h1
  {
    animation: none;
    padding:  0 115px;
  }

}


@media (max-width: 500px) {

  h1
  {
    font-size: 2em;
    line-height: 44px;
  }
}

@media (max-width: 475px) {

  .banner-medium.sticky h1.long-title
  {
    line-height: 26px !important;
  }
}

@media (max-width: 440px) {

  section.header-top-bar a i
  {
    display: block;
  }

  section.header-top-bar a
  {
    display: unset;
    width: unset;
    min-width: unset;
    max-width: unset;
  }
  
  section.header-top-bar.sticky a i,
  section.header-top-bar a img
  {
    display: none;
  }
  .banner-medium.sticky h1 
  {
    padding-left: 20px;
  }
  
}