html {
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
	margin: 0;
	padding: 0;
    
} 
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#damrei-content-banner{

    position: absolute;
    width: 100%;
    height: 100%;

}
.damrei-popup-wrapper{
    position: absolute;
    width: 800px;
    height: 450px;
    overflow: hidden;
}

/*content-animation*/
#content-animation img{
    width: 100%;
    height: auto;
}
#background{
    background: url(../images/desktop/background.jpg) no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#text-1{
    background: url(../images/desktop/text-1.png) no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform-origin: 32% 29%;
}
#text-2{
    background: url(../images/desktop/text-2.png) no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    right: 30px;
    top: 0;
    opacity: 0;
}

#water{
    background: url(../images/desktop/water.png) no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 30px;
    opacity: 0;
}
#water-1{
    background: url(../images/desktop/water-1.png) no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 1;
}
#product{
    background: url(../images/desktop/product.png) no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 50px;
    opacity: 0;
}
.shine{
    -webkit-mask-image: url(../images/desktop/product-shadow.png);
    mask-image: url(../images/desktop/product-shadow.png);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: url(../images/desktop/shine.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
}


#shine.animated {
    -webkit-animation:shineEffect 5s 0s ease-out infinite;
    animation:shineEffect 5s 0s ease-out infinite;
}

@-webkit-keyframes shineEffect {
	0%,10% {background-position:-162px 0%; opacity:1}
	50%,100% {background-position:362px 0%; opacity:1}
}
@keyframes shineEffect {
	0%,30% {background-position:-162px 0%; opacity:1}
	70%,100% {background-position:362px 0%; opacity:1}
}

/*content-animation*/