@import url('https://cdnwmsi.e-i.com/SITW/wm/global/1.0.0/paywallet/lyf/fonts/poppins/poppins.css');

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body
{
    background: #111;
}

/* Background */

section
{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

section img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* object-fit: inherit; */
    object-fit: cover;
}


section h2
{
    position: relative;
    /* color: #e86d6f; */
    color: #ffffff;
    /* color: #f7a1a1; */
    /* color: #fe7180; */
    /* color: #c8F0de; */
    /* font-size: 21em; */
    font-size: 10em;
    /* text-shadow: 1px 1px 1px #ebebeb,
    1px 2px 1px #ebebeb,
    1px 3px 1px #ebebeb,
    1px 4px 1px #ebebeb,
    1px 5px 1px #ebebeb,
    1px 6px 1px #ebebeb,
    1px 7px 1px #ebebeb,
    1px 8px 1px #ebebeb,
    1px 9px 1px #ebebeb,
    1px 10px 1px #ebebeb,
1px 18px 6px rgba(16,16,16,0.4),
1px 22px 10px rgba(16,16,16,0.2),
1px 25px 35px rgba(16,16,16,0.2),
1px 30px 60px rgba(16,16,16,0.4); */
text-shadow: 1px 1px 1px #81b3dd, 1px 2px 1px #81b3dd, 1px 3px 1px #81b3dd, 1px 4px 1px #81b3dd, 1px 5px 1px #81b3dd, 1px 6px 1px #81b3dd, 1px 7px 1px #81b3dd, 1px 8px 1px #81b3dd, 1px 9px 1px #81b3dd, 1px 10px 1px #81b3dd, 1px 18px 6px rgb(16 16 16 / 10%), 1px 22px 10px rgb(16 16 16 / 10%), 1px 25px 35px rgb(16 16 16 / 10%), 1px 30px 60px rgb(16 16 16 / 10%);
/* text-shadow: 1px 1px 1px #aacacd, 1px 2px 1px #aacacd, 1px 3px 1px #aacacd, 1px 4px 1px #aacacd, 1px 5px 1px #aacacd, 1px 6px 1px #aacacd, 1px 7px 1px #aacacd, 1px 8px 1px #aacacd, 1px 9px 1px #aacacd, 1px 10px 1px #aacacd, 1px 18px 6px rgb(16 16 16 / 10%), 1px 22px 10px rgb(16 16 16 / 10%), 1px 25px 35px rgb(16 16 16 / 10%), 1px 30px 60px rgb(16 16 16 / 10%); */
/* text-shadow: 1px 1px 1px #fff, 1px 2px 1px #FFF, 1px 3px 1px #fff, 1px 4px 1px #fff, 1px 5px 1px #fff, 1px 6px 1px #fff, 1px 7px 1px #fff, 1px 8px 1px #fff, 1px 9px 1px #fff, 1px 10px 1px #FFF, 1px 18px 6px rgb(16 16 16 / 10%), 1px 22px 10px rgb(16 16 16 / 10%), 1px 25px 35px rgb(16 16 16 / 10%), 1px 30px 60px rgb(16 16 16 / 10%); */
/* filter: drop-shadow(0 0 2rem #111); */
}

/* Background */

/* GRAIN */
/* body:before {
    background-image: url(https://media3.giphy.com/media/FSqYDfsdaiG9W/giphy.gif);
    content: "";
    position: fixed;
    height: 970%;
    width: 150%;
    top: -100%;
    left: -50%;
    opacity: .06;
    z-index: 1;
} */

/* LOGO */
#logoLyf{
width: 7%;
/* width: 5%; */
height: auto;
position: relative;
display: inline-block;
z-index: 100;
}

/* BUTTON */
.button {
  cursor: pointer;
/* color: black; */
color: white;
margin: .75em 2vh 0;
font-size: 1em;
/* font-size: 0.5em; */
padding: 3.5vh 10vh;
border-radius: 10vh;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .05em;
/* border: 2px solid rgba(0, 0, 0, 0); */
/* background-color: #D3F971; */
background-color: #99a7ac;
/* background-color: #4e545b; */
/* background-color: #1e1d1b; */
/* background-color: #fff; */
/* background-color: #006464; */
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
/* position: absolute; */
/* margin-top: 18%; */
border-bottom: 8px solid #ffffff;
/* border-bottom: 8px solid #588e78; */
/* border-bottom: 8px solid #aacacd; */
/* border-bottom: 8px solid #e86d6f; */
z-index: 2;
position: relative;
/* background-image: linear-gradient(to bottom, rgb(0 77 76 / 95%), rgb(0 100 100 / 94%)), url(https://media3.giphy.com/media/FSqYDfsdaiG9W/giphy.gif); */
}
.button:hover {
  /* background-color: #f7a1a1; */
  /* background-color: #588e78; */
  background-color: #4e545b;
  /* background-color: #aacacd; */
  /* background-color: #e86d6f; */
  /* background-color: #fe6b70; */
  /* background-color: #ca6563; */
  color: #fff;
  text-decoration: none;
  border-bottom: 8px solid #fff;
  }


  section{
  position: absolute;
}

/* TEXT ANIM MENU */
.left {
background-image: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(50%, #fff), color-stop(50.1%, transparent));
background-image: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50.1%);
background-size: 0% 100%;
}
.left:hover {
background-size: 200% 100%;
}

.overlay ul li a {
cursor: pointer;
-webkit-text-stroke-color: #fff;
-webkit-text-stroke-width: 0.03em;
/* -webkit-text-stroke-width: 0.02em; */
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-repeat: no-repeat;
-webkit-transition: background-size 0.5s cubic-bezier(0.67, 0.01, 0.15, 0.98);
transition: background-size 0.5s cubic-bezier(0.67, 0.01, 0.15, 0.98);
}

@media screen and (max-width: 1024px) {
.left {
  background-size: 200% 100% !important;
}
}

/* RESPONSIVE */


@media screen and (max-width: 1600px) {
  .wrapperText {
    width: 80%;
    height: 90vh;
}
section h2 {
    font-size: 10em;
}
}

@media screen and (max-width: 1024px) {
  #header {
  background-size: cover;
  background-repeat: no-repeat;
  }
  .overlay {
    /* background-image: url(../img/bkg-navbar-filter.png) !important; */
}
/* .wrapperText {
  width: 70%;
} */
}

@media screen and (max-width: 1024px) {
#logoLyf {
  width: 11%;
}
section h2 {
    font-size: 14em;
    /* font-size: 8em; */
}
#myVideo {
    left: 0;
}
}

@media screen and (max-width: 768px) {
  #header {
  background-size: cover;
  background-repeat: no-repeat;
  }
  .wrapperText {
    width: 90%;
    padding: 50px 20px;
    font-size: 26px;
    height: 90vh;
}
section h2 {
    font-size: 9em;
    /* font-size: 6em; */
}
#myVideo {
    left: 0;
}
section img {
    object-position: 19%;
}
}

@media screen and (max-width: 550px) {
  #header {
  background-size: cover;
  background-repeat: no-repeat;
  }
  .wrapperText {
    width: 90%;
    /* width: 80%; */
    padding: 50px 0px;
    /* max-width: 500px; */
    font-size: 16px !important;
    margin: 0px auto;
    text-align: center;
    color: #fff;
    height: 90vh;
}
.outer-container {
    overflow-x: hidden;
}
#logoLyf {
    width: 14%;
}
section h2 {
    font-size: 4.5em;
}
#myVideo {
    left: -170px;
}
}

@media screen and (max-width: 550px) {
section {
/* border: 20px solid #fe6b70; */
}
.button_container {
    top: 31px;
    right: 4%;
}
.navbar-light .navbar-toggler-icon {
  background-image: none;
}
.button {
/* margin-top: 38%; */
}
#logoLyf {
width: 14%;
/* margin-bottom: 31%; */
}
.button_container.active {
  position: absolute !important;
}
.button_container {
  top: 32px !important;
}
.overlay ul li a {
  font-size: 1.8rem !important;
}
.bkgPhone {
  display: inherit;
}
}

/* VIDEO */
#myVideo {
  position: fixed;
  right: 0;
  /* bottom: 0; */
  min-width: 100%;
  min-height: 100%;
}