html, body {
    min-height: 100%;
    height: auto;
}

#app{
    /*background-image: url('../assets/background.png');*/
}

.logo-wrapper{
    /* padding-top:10%; */
}
.logo-wrapper .logo{
    max-width:400px;
    height:auto;
    width:100%;
}
.btn-wrapper{
    margin-top:3rem;
    cursor: pointer;
}
.play-btn{
    width:100%;
    max-width:180px;
    height:auto;
    /*transition: all .5s;*/
    /*margin-bottom:2rem;*/
}
/*.play-btn:hover{
    transform:scale(1.1);
}*/

@keyframes flipinx {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  8% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  12% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  16% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg);
  }
  20% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes swinging {
    5% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    10% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    15% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    20% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    25% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
.custom-logo-animate {
  animation: swinging 4s 0s linear infinite;
}

.d-section {
    transition-property: opacity;
    transition-duration: 1.5s;
}

.d-section-active {
    opacity: 1;
}

.d-section-inactive {
    opacity: 0;
}

#home {
    min-height: 100vh;
}
#home-section {
    min-height: 100vh;
}
#register {
    min-height: 100vh;
}

#login {
    min-height: 100vh;
}

/* mobile */
@media(max-width:720px){
    #app{
        /*background-image: url('../assets/mobile-home.png');*/
        background-position: top center;
    }
    #home{
        justify-content: flex-start!important;
        /*padding-top:100px;*/
    }
    .logo{
        max-width: 250px!important;
    }
    .btn-wrapper{
        margin-top:2rem;
    }
    .btn-wrapper .play-btn{
        max-width:130px!important;
    }
}

/* ipad potrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    #app{
        /*background-image: url('../assets/mobile-home.png');*/
        background-position: top center;
    }

}
/* laptop */
@media (min-width:1400px) and (min-height:800px) {
    .logo{
        max-width:100%;
    }
    .btn-wrapper{
        margin-top:10rem;
    }
    .play-btn{
        max-width:134px!important;
    }
}