@font-face {
    font-family: "Gotham";
    src: url("/fonts/Gotham-Bold.otf");
    font-weight: 600;
}

body {
  margin: 0; }

#main {
  display: flex;
  justify-content: center;
  align-items: center; }

.mobile-gif {
  height: 724px;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.mobile-gif video {
    object-fit: cover;
  /*width: auto;*/
  height: 100%; 
}

.desktop-gif {
  height: 724px;
  text-align: center;
  cursor: pointer;
}

.customBtnContainer {
  top: 96%;
  /*left: 35%;*/
  width: 100%;
  z-index: 2;
}

.moreBtn {
  background-color: #ff8300;
  border: 3px solid #ffffff;
  color: #ffffff;
  border-radius: 30px;
  padding: 6px 18px;
  font-size: 14px;
  font-weight: 600;
  /*font-family: "Gotham";*/
}

.moreBtn span {
  vertical-align: sub;
}

.moreBtn:hover {
  background-color: #ff8300!important;
  border: 3px solid #ffffff!important;
  color: #fff!important;
}

.moreBtn .fa-angle-up {
  color: #ff8201;
}

@media (max-width: 767px) {
  #main {
    /* height: 100%; */
    background-color: #0b1f50;
    display: block; 
  }

  .mobile-gif {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    /* padding-bottom: 56.25%;  */
  }
    
  .mobile-gif video {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: auto;
    object-fit: cover; 
  } 
  
  .customBtnContainer {
      top: 32.5%;
    }
}