body {
  background-color: #045532;
  background-image: url("https://id-lottery-public.s3.us-west-2.amazonaws.com/Millionaire-For-Life/bg-w-border1200x610.png");
  background-size: cover;
  height: 100vh;
  position: relative;
}
.main{
  /*background-color: #045532;*/
  /*background-image: url("https://id-lottery-public.s3.us-west-2.amazonaws.com/Millionaire-For-Life/bg-w-border%402x.png");*/
  /*background-size: contain;*/
  height: 100vh;
  width: 100%;
  overflow: auto;
  position: absolute;
}
/*.mill-img-area{*/
/*  height: 100%;*/
/*  width: 100%;*/
/*  background-image: url("https://id-lottery-public.s3.us-west-2.amazonaws.com/Millionaire-For-Life/millionaire-pattern1200X600.jpg");*/
/*  background-attachment: fixed;*/
/*  background-size: 100%;*/
/*  position: absolute;*/
/*  z-index: 1;*/
/*  display: none;*/
/*  !*border: 2px solid red;*!*/
/*}*/
.text-border{
  /*border: 2px solid greenyellow;*/
  position: relative;
}
.image-border{
  display: none;
}
.image-border-mobile{
  overflow: hidden;
  position: relative;
  height: 350px;
  width: 100vw;
}
.text-area {
  margin: 0px auto;
  height: auto;
  width: 100%;
  border: 5px solid #fcde08;
  outline: 2px solid #528236;
  outline-offset: -15px;
  padding: 25px;
  border-radius: 25px;
  background-color: #07492c;
  box-shadow: 12px -6px 20px 0px #00000096;
  text-align: center;
}
.text-area > img{
  width: 100%;
  height: auto;
}
.logo-image{
  position: relative;
  margin: 100px auto 20px;
  height: auto;
  width: 70%;
}
.logo-image > a > img{
  width: 100%;
}
.animate-slide{
  transform: translateY(150%);
  opacity: 0;
  transition: transform 2s, opacity 5s;
}
#eiffle-mobile{
  z-index: 1;
  position: absolute;
  bottom: -5px;
  left: -70px;
  width: 80%;
  /*transition: transform .5s;*/
}
#eiffle{
  position: absolute;
  display: none;
  bottom: -5px;
  left: -70px;
  width: 35%;
  /*transition: transform .5s;*/
  animation: .5s ease-out 0s 1 eiffleIn;

}
/*#eiffle.entrance{*/
/*  transform: translate(-20%, 100%);*/
/*}*/
#louvre-mobile{
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 67%;
}
#louvre{
  display: none;
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 30%;
  animation: .5s ease-out 0s 1 lourveIn;
}

#ticket-mobile{
  position: absolute;
  width: 40%;
  bottom: 15%;
  right: 27%;
  transform: translate(0px, 0px) rotate(4deg);
}
#ticket{
  display: none;
  position: absolute;
  width: 16%;
  bottom: 15%;
  right: 5%;
  transform: translate(0px, 0px) rotate(4deg);
  animation: .5s ease-out 0s 1 ticketIn;
}
.btn--medium span {
  color: #07492c;
}
/*tablet styles*/
@media (min-width: 540px) {
  .image-border-mobile{
    height: 38vh;
  }
  #eiffle-mobile{
    bottom: -5px;
    left: -70px;
    width: 60%;
  }
  #ticket-mobile{
    width: 30%;
    bottom: -3%;
    right: 32%;
  }
  #louvre-mobile{
    bottom: -5px;
    right: -5px;
    width: 50%;
  }
  .text-area{
    padding: 40px;
  }
}
/*laptop styles*/
@media (min-width: 1200px) {
  .image-border{
    display: inline-block;
  }
  .image-border-mobile{
    display: none;
  }
  .logo-image{
    margin: 150px auto 100px;
    height: auto;
    width: 600px;
  }
  .image-border{
    height: 100vh;
    width: 100%;
    position: absolute;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
  }
  .text-area {
    width: 50%;
    padding: 50px;
  }
}

@keyframes eiffleIn {
  0% {transform: translate(-20%, 100%);}
  80%{transform: translate(5px, -6px);}
  100% {transform: translate(0px, 0px);}
}
@keyframes lourveIn {
  0% {transform: translate(20%, 100%);}
  80%{transform: translate(-5px, -6px);}
  100% {transform: translate(0px, 0px);}
}
@keyframes ticketIn {
  0% {transform: translate(0px, 100%) rotate(4deg);}
  80%{transform: translate(0px, -10px) rotate(4deg);}
  100% {transform: translate(0px, 0px) rotate(4deg);}
}