body{
	background: url(pics/puupuu1/puupuu1_bg.jpg);
}

#wrapper{
    background-size: cover;
    
    position: absolute;
    bottom: 0;
}

#bg{
	position: absolute;
	bottom: 0px;
	display: flex;
	align-items: flex-end;
}

#titel{
	position: absolute;
	left: 2%;
	width: 38%;
	margin-left: 5%;
	margin-top: 2%;
	-ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Safari */
    transform: rotate(-5deg);
}

.bla{
	width: 42%;
	position: absolute;
	left: 50%;
	bottom:51%;
	margin-left: 0%;
}

.svamp{
	width: 14%;
	position: absolute;
	left: 50%;
	bottom:7%;
	margin-left: -38%;
}

.ekorre1{
	width: 11%;
	position: absolute;
	left: 50%;
	margin-left: -1%;
	bottom: 10%;
}
.ekorre2{
	width: 9%;
	position: absolute;
	left: 50%;
	margin-left: 38%;
	bottom: 0%;
}


#fonsterLjus{
	width: 6%;
	position: absolute;
	left: 50%;
	margin-left: 37%;
	bottom: 15%;
}
#fonster{
	width: 6%;
	position: absolute;
	left: 50%;
	margin-left: 37%;
	bottom: 15%;
}
#dorrFast{
	position: absolute;
    width: 4.6%;
    bottom: 15%;
    left: 50%;
    margin-left: 27.7%;
}
#dorrOppen{
	position: absolute;
    width: 4.6%;
    bottom: 15%;
    left: 50%;
    margin-left: 27.7%;
}
#dorrLjus{
	position: absolute;
    width: 4.4%;
    bottom: 15.7%;
    left: 50%;
    margin-left: 27.8%;
}








.on1{
	animation: on1 2s ease-in-out infinite;
	transform-origin: right bottom;
	animation-duration: 4s;
}
@keyframes on1 {
    0%, 100% {
        transform: rotate3d(0, 0, 1, -4deg) translateY(0)
    }

    50% {
        transform: rotate3d(0, 0, 1, 4deg) translateY(-10px)
    }
}
.on2{
	animation: on2 2s ease-in-out infinite;
	transform-origin: center bottom;
	animation-duration: 3.8s;
}
@keyframes on2 {
    0%, 100% {
        transform: translateY(0) scaley(1)    }

    50% {
        transform: translateY(-10px) scaleY(1.1)
    }
}

.on3{
	animation: on3 2s  infinite;
	transform-origin: center bottom;
	animation-duration: 1.3s;
}
@keyframes on3 {
    0%, 100% {transform: translateX(0) translateY(0);}
    25% {transform: translateX(10px) translateY(-10px)}
    50% {transform: translateX(20px) translateY(0);}
    75% {transform: translateX(10px) translateY(-15px)}
}

.on4{
	animation: on4 2s ease-in-out infinite;
	transform-origin: center;
	animation-duration: 2.7s;
}
@keyframes on4 {
    0%, 100% {
        transform: translateX(0px) rotate(0)
    }

    50% {
        transform: translateX(-100px) rotate(-360deg)
    }
}





@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}