@font-face {
    font-family: 'Oswald Regular';
    src: url(Fonts/Oswald-Regular.ttf);
}
@font-face {
    font-family: 'Oswald Light';
    src: url(Fonts/Oswald-Light.ttf);
}
@font-face {
    font-family: 'Oswald Bold';
    src: url(Fonts/Oswald-Bold.ttf);
}
.hide{
   display: none;
}
.show{
    display: block;
}
* {
    margin: 0;
    padding: 0;
    border: 0;
}
html,
body{ 
    width:100%;
    height: 100vh;
    margin: 0;
}
.main-container {
    background-image: url('images/Background_Table.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.firstPage-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 100%;
}
.logo {
    position: absolute;
    width: 30vh;
    left: 2%;
    z-index: 1;
    cursor: pointer;
}
.soundDiv img {
    position: absolute;
    right: 11%;
    width: 12vh;
    top: 2%;
    cursor: pointer;
}
.infodiv img {
    position: absolute;
    right: 3%;
    width: 5%;
    top: 2%;
    cursor: pointer;
    z-index: 3;
}
.infodiv .sound {
    right: 9%;
}
@keyframes slide-bottom {
    0% {
        -webkit-transform: translateY(-50vh);
        transform: translateY(-50vh);
    }
    100% {
        -webkit-transform: translateY(8vh);
        transform: translateY(8vh);
    }
}
@keyframes slide-bottom_mobile {
    0% {
        -webkit-transform: translateY(-50vh);
        transform: translateY(-50vh);
    }
    100% {
        -webkit-transform: translateY(8vh);
        transform: translateY(4vh);
    }
}
@keyframes slide-bottom2 {
     0% {
         -webkit-transform: translateY(-50vh);
         transform: translateY(-50vh);
     }
     100% {
         -webkit-transform: translateY(42vh);
         transform: translateY(42vh);
     }
 }
@keyframes slide-bottom2_mobile {
    0% {
        -webkit-transform: translateY(-50vh);
        transform: translateY(-50vh);
    }
    100% {
        -webkit-transform: translateY(42vh);
        transform: translateY(24vh);
    }
}
@keyframes slide-bottom3 {
    0% {
        -webkit-transform: translateY(-50vh);
        transform: translateY(-50vh);
    }
    100% {
        -webkit-transform: translateY(42vh);
        transform: translateY(25vh);
    }
}
@keyframes slide-bottom3_mobile {
    0% {
        -webkit-transform: translateY(-50vh);
        transform: translateY(-50vh);
    }
    100% {
        -webkit-transform: translateY(12vh);
        transform: translateY(12vh);
    }
}

.firstPage-container .popup {
    background-image: url(images/Info_PopUp.png);
    background-repeat: no-repeat;
    width: 73vh;
    height: 56vh;
    background-size: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 3;
    -webkit-animation: slide-bottom_mobile 2s ease-in forwards;
    animation: slide-bottom_mobile 2s ease-in forwards;
    font-family: 'Oswald Regular';
}
.firstPage-container .popup1.question {
    -webkit-animation: slide-bottom 1s ease-in forwards;
    animation: slide-bottom 1s ease-in forwards;
    z-index: 4;
}
.firstPage-container .popup.bonusPopup {
    background-image: url(images/PopUp.png);
    -webkit-animation: slide-bottom3_mobile 1s ease-in forwards;
    animation: slide-bottom3_mobile 1s ease-in forwards;
    width: 82vh;
    height: 82vh;
}
.firstPage-container .popup.popup2 {
    -webkit-animation: slide-bottom2_mobile 1s ease-in forwards;
    animation: slide-bottom2_mobile 1s ease-in forwards;
}
.firstPage-container .closeInfo {
    position: absolute;
    width: 2.5vh;
    right: -5vh;
    cursor: pointer;
}
.firstPage-container .lotty {
    position: absolute;
    bottom: 30.5%;
    width: 75vh;
    left: 0;
    right: 40%;
    margin: auto;
}
.firstPage-container .love {
    position: absolute;
    left:0;
    right:0;
    margin: auto;
    bottom: 30.5%;
    width: 22vh;
    cursor: pointer;
}
.firstPage-container .luck {
    position: absolute;
    left:0;
    right:32%;
    margin: auto;
    bottom: 30.5%;
    width: 22vh;
    cursor: pointer;
}
.firstPage-container .curse {
    position: absolute;
    left:32%;
    right:0;
    margin: auto;
    bottom: 30.5%;
    width: 22vh;
    cursor: pointer;
}
.firstPage-container .potions.ticket {
    width: 15.5vh;
    z-index: 2;
}
.firstPage-container .potions.potion {
    bottom: 34.5%;
}
.glowLove {
    animation: glowLove 2s infinite;
    /*border-radius: 168px;*/
}
@keyframes glowLove {
    100% {
        filter: drop-shadow(0 -34px 55px #fd000e);
    }
}
.glowLoveIngredient {
    animation: glowLoveIngredient 2s infinite;
    /*border-radius: 168px;*/
}
@keyframes glowLoveIngredient {
    100% {
        filter: drop-shadow(0 0px 8px #fd000e);
    }
}
.glowLuck {
    animation: glowLuck 2s infinite;
    /*border-radius: 168px;*/
}
@keyframes glowLuck {
    100% {
        filter: drop-shadow(0 -34px 55px #00CB2B);
    }
}
.glowLuckIngredient {
    animation: glowLuckIngredient 2s infinite;
    /*border-radius: 168px;*/
}
@keyframes glowLuckIngredient {
    100% {
        filter: drop-shadow(0 0px 8px #00CB2B);
    }
}
.glowCurseIngredient {
    animation: glowCurseIngredient 2s infinite;
    /*border-radius: 168px;*/
}
@keyframes glowCurseIngredient {
    100% {
        filter: drop-shadow(0 0px 8px #FDF80A);
    }
}
.glowCurse {
    animation: glowCurse 2s infinite;
    /*border-radius: 168px;*/
}
@keyframes glowCurse {
    100% {
        filter: drop-shadow(0 -34px 55px #FDF80A);
    }
}
.firstPage-container .popup p.popupTitle {
    font-family: 'Oswald Light';
    text-align: center;
    position: absolute;
    top: 4%;
    font-size: 5.5vh;
    color: #f5cd34;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0.9;
}
.firstPage-container .popup.bonusPopup p.popupTitle {
    font-family: 'Oswald Regular';
    top: 2%;
    font-size: 5.2vh;
    color: #fff;
}
.firstPage-container .popup p.popupContent {
    font-family: 'Oswald Light';
    text-align: center;
    position: absolute;
    top: 29%;
    font-size: 4vh;
    color: #fff;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0.8;
    width: 88%;
}
.firstPage-container .popup.bonusPopup .potionAnimation{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 16%;
    width: 17vh;
}
.firstPage-container .popup.bonusPopup p.popupContent{
    color: #000;
    font-size: 6vh;
    top: 45%;
}
.firstPage-container .popup.bonusPopup p.popupContent b{
    font-family: 'Oswald Bold';
}
.firstPage-container .popup.bonusPopup .btn-coupon-promo-code{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    top: 58%;
    font-size: 5vh;
}
.firstPage-container .popup.bonusPopup .btn-coupon-promo-code .clipboard{
    background-color: #ab2b2b;
    color: #fff;
    padding: 0px 12px;
}
.firstPage-container .popup.bonusPopup .redeemNowBtn{
    position: absolute;
    left: 0;
    right: 0;
    top: 70%;
    margin: auto;
    width: 29vh;
    cursor: pointer;
}
.firstPage-container .popup.bonusPopup p.playAgain {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top:82%;
    font-size: 3.2vh;
}
.firstPage-container .popup.bonusPopup p.playAgain a {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.firstPage-container .popup.bonusPopup .closeImg {
    position: absolute;
    top: 2vh;
    cursor: pointer;
    width: 5vh;
    right: -8vh;
}
.main-container .ingredients {
    position: absolute;
    width: 100%;
    bottom: 4vh;
    text-align: center;
}
.main-container .ingredients .ingredient {
    width: 14vh;
    margin: 2vh;
    cursor: pointer;
}

.portrait {
    display: none;
}

@media (min-width: 320px) and (orientation: portrait) {
   
  .portrait {
      display: block;
      background: black;
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;
  }
  .portrait img {
      width: 300px;
      height: 300px;
      left: 0;
      right: 0;
      margin: auto;
      top: 45%;
      bottom: 45%;
      position: absolute;
  }
  .main-container{
      display: none;
  }
}
@media (min-width: 992px) {
    .firstPage-container .popup {
        width: 50vh;
        height: 37vh;
        -webkit-animation: slide-bottom 2s ease-in forwards;
        animation: slide-bottom 2s ease-in forwards;
    }
    .firstPage-container .popup p.popupTitle {
        top: 10%;
        font-size: 2.5vh;
    }
    .firstPage-container .popup p.popupContent {
        top: 30%;
        font-size: 2vh;
    }
    .firstPage-container .popup.popup2 {
        -webkit-animation: slide-bottom2 1s ease-in forwards;
        animation: slide-bottom2 1s ease-in forwards;
    }
    .firstPage-container .popup.bonusPopup {
        width: 48vh;
        height: 50vh;
        -webkit-animation: slide-bottom3 1s ease-in forwards;
        animation: slide-bottom3 1s ease-in forwards;
    }
    .firstPage-container .popup.bonusPopup p.popupTitle {
        font-size: 3.2vh;
    }
    .firstPage-container .popup.bonusPopup .potionAnimation {
        width: 11vh;
    }
    .firstPage-container .popup.bonusPopup p.popupContent{
        font-size: 3vh;
    }
    .firstPage-container .popup.bonusPopup .btn-coupon-promo-code {
        font-size: 2vh;
    }
    .firstPage-container .popup.bonusPopup .redeemNowBtn {
        width: 18vh;
    }
    .firstPage-container .popup.bonusPopup p.playAgain {
        font-size: 1.2vh;
    }
    .firstPage-container .popup.bonusPopup .closeImg {
        right: -4vh;
        width: 2.5vh;
    }
}
@media (min-width: 992px) {
    .logo {
        position: absolute;
        width: 20vh;
        left: 4%;
    }
}
@media (min-width: 1200px){
    .infodiv img {
        width: 3%;
    }
    .infodiv .sound {
        right: 7%;
    }
}