@keyframes softPulse {
  0% { background-color: rgb(68, 68, 68); }
  100% { background-color: rgb(33, 33, 33); }
}

@keyframes iconPulse {
  0% { color: rgba(255, 204, 1, .3); }
  100% { color: rgba(255, 204, 1, 1); }
}


#supersplashcontainer {
    display: block;
    position: relative;
    width: 100%;
    background-color: var(--greyscaleaccent70);
    z-index: 1;
    line-height: normal;
}

#supersplashtoggle {
    display: none;
}
#supersplashtogglelabel {
    display: block;
    width: fit-content;
    text-align: center;
    font-size: 1em;
    white-space: nowrap;
    color: var(--armygold);
    background-color: rgb(68, 68, 68);
    line-height: 100%;
    box-shadow: rgba(0, 0, 0, 0.2) -4px -4px 20px 5px;
    margin: 0px 0px 0px auto;
    padding: 0px 0px 0px 0.8em;
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    cursor:pointer;
}
#supersplashtogglelabel:hover {
    cursor: pointer;
}

#supersplashtogglelabel::after {
    display: inline-block;
    padding: .8em;
    margin-left: .8em;
    font-family: "armyicons";
    content: "\e96f";
    background-color: #000;
    color: rgba(255, 204, 1, .3);
    transition: color .3s ease-in-out;
    cursor:pointer;
}

#supersplashtogglelabel:hover::after {
    color: rgba(255, 204, 1, 1);
}

#supersplashtoggle:checked~#supersplashinner {
  height: 0px;
}

#body.SpcAnncHidden #supersplashinner {
  height: 0px;
  transition: none;
}


/* changes icon */
#supersplashtoggle:checked~ .supersplashtogglelabel::after  {
  content: "\e90d";
  transform: rotate(90deg);
  animation: iconPulse .8s ease-in-out infinite alternate forwards;
}
/* soft pulse when closed */
#supersplashtoggle:checked~ .supersplashtogglelabel  {
  animation: softPulse 2.5s ease-in-out infinite alternate forwards;
}
/* removes anim on hover */
#supersplashtoggle:checked~ .supersplashtogglelabel:hover::after  {
  animation: none;
}

#supersplashinner {
    display: block;
    overflow: hidden;
    width: 100%;
    background-color: #111;
    position: relative;
    z-index: 0;
    transition: height .3s ease-in-out;
}


/* CUSTOM SPLASH CONTENT */ 

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1; 
  }
}

@keyframes backgroundscale {
  from {
    background-position-x: 105%;
    -webkit-transform: translate3d(0, 0, 0);
  }
  to {
    background-position-x: 5%; 
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@keyframes TYFlogo {
  0% {
    opacity: 0;
    margin-left: 100%;
    transform: translateX(-50%) translateY(50%) scale(.1);
    -webkit-transform: translate3d(0, 0, 0);
  }
  5% {
    margin-left: 100%;
    transform: translateX(-50%) translateY(50%) scale(1.2);
  }
   40% {
    opacity: 1;
  }
  80% {
    opacity: 1;
    margin-left: 100%;
    transform: translateX(-50%) translateY(50%) scale(1.2);
  }
  100% {
    opacity: 1;
    margin-left: 0%;
    transform: translateX(0%) translateY(0%) scale(1);
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@keyframes laptop {
  from {
    margin-left: 120%;
  }
  to {
    margin-left: -15%; 
  }
}
@keyframes mobile {
  from {
    right: -100%;
  }
  to {
    right: -5%;
  }
}

@keyframes animbkgd {
  from {
    transform: scale(1.5) rotate(10deg);
  }
  to {
    transform: scale(2.75) rotate(-45deg);
  }
}

#annc_tyf {
  display: block;
  position: relative;
  padding: 45px 0;
  background-image: url("/e2/homepage/rv7/super-splash/images/tyf_202606/bkgd_annc_tyf.jpg");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 105%;
  background-color: #333;
  box-sizing: border-box;
  /* typography */
  font-size: clamp(14px, 1.15vw, 21px);
}

#annc_tyf:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(51, 51, 51, .8);
  z-index: 0;
}

#annc_tyf .container, #annc_tyf .inner-container  {
  display: block;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 0px;
  z-index: 3;
}

#annc_tyf .row {
  position: relative;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: stretch;

  > div {
    box-sizing: border-box;
    margin: 1%;
  }
}

#annc_tyf .row .span6 {
  width: 48%;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
  /* border: .5px solid green; */

}
#annc_tyf h1 {
  color: transparent;
  font-size: 1px;
}
#annc_tyf .TYFlogo {
  position: relative;
  z-index: 2;
  display:block;
  width: 90%;
  max-width: 550px;
  aspect-ratio: 2.75/1;
  background-image: url("/e2/homepage/rv7/super-splash/images/tyf_202606/tyf_logo_gld.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#annc_tyf .btn {
  margin: 1em 0px;
}
#annc_tyf .content p {
  width: 85%;
}

#annc_tyf .devices {
  position: relative;
}

#annc_tyf .devices a {
  display: block;
  text-decoration: none;
  border: 0px solid transparent;
  position: relative;
}
#annc_tyf .devices a:before {
  content: "VISIT WEBSITE";
  display: inline-block;
  font-size: .75em;
  color: var(--armygold);
  position: absolute;
  top: 0px;
  left: 0px;
  padding: .5em .75em;
  line-height: 105%;
  z-index: 2;
  background-color: #333;
  border: .5px solid;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

#annc_tyf .devices a:hover:before {
  opacity: 1;
}

#annc_tyf .devices #mobile {
  display: block;
  width: 50%;
  max-height: 90%;
  position: absolute;
  right: -5%;
  z-index: 2;
}

#annc_tyf .devices #laptop {
  display: block;
  width: 130%;
  position: absolute;
  z-index: 1;
}
#annc_tyf .devices img  {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top left;
  transition: margin-left 1s ease-in-out;
}

#annc_tyf .devices a:hover img {
  margin-left: -3%;
}


#annc_tyf .devices #laptop img  {
  max-height: 55vh;
}

#annc_tyf .animbkgd {
  display: block;
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  background: linear-gradient(120deg,rgba(51, 51, 51, 1) 16%, rgba(51, 51, 51, 1) 46%, rgba(102, 102, 102, 1) 54%, rgba(68, 68, 68, 1) 64%, rgba(0, 0, 0, 1) 79%);
  top: 0px;
  left: 0px;
  z-index: 2;
}
#annc_tyf:before {
  content: "";
  display: block;
  width: 80%;
  height: 50%;
  position: absolute;
  right: 0%;
  bottom: 0%;
  z-index: 3;
  background: linear-gradient(162deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 71%, rgba(0, 0, 0, 1) 93%);
}

@media screen and (min-width:800px) {
  #annc_tyf {
    height: 70vh;
    min-height: 500px;
    animation-name: backgroundscale;
    animation-duration: 25s;
    animation-fill-mode: both;
    animation-iteration-count: 3;
    animation-direction: alternate;
    animation-delay: -1s;
  }
  #annc_tyf:after {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
  }
  #annc_tyf .TYFlogo {
    animation-name: TYFlogo;
    animation-duration: 3.8s;
    animation-timing-function: ease-out;
    animation-delay: .5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
  }
  #annc_tyf .btn {
    animation-name: fadeIn;
    animation-duration: .5s;
    animation-timing-function: ease-in;
    animation-delay: 6.25s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
  }
  #annc_tyf .content p {
    animation-name: fadeIn;
    animation-duration: .5s;
    animation-timing-function: ease-in;
    animation-delay: 6s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
  }
  #annc_tyf .devices {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-delay: 4s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
  }
  #annc_tyf .devices #mobile {
    animation-name: mobile;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-delay: 4.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
  }
  #annc_tyf .devices #laptop {
    animation-name: laptop;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 4.9s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
  }
  #annc_tyf .animbkgd {
    animation: fadeIn 2s linear both 1 12s, animbkgd 7s linear both infinite alternate-reverse;
  }
}

@media screen and (max-width:800px) {
  #annc_tyf .row .span6 {
    width: 98%;
    &.devices {
      display: none;
    }
  }
  #annc_tyf .TYFlogo {
    margin: 0px auto;
  }
  #annc_tyf .content p {
    width: 100%;
  }
  #annc_tyf .content .btn {
    margin: 20px auto;
  }
}