body{
	
}
#wrapper{
	background: url(pics/tjolahapp/tjolahapp_bg.jpg);
}


#row1{
	height: 30%;
	padding-top: 2%;
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
#title{
	width: 40%;
}
#figur1{
	width: 20%;
	padding-right: 10%;
}

#row2{
	height: 70%;
	align-items: stretch;
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
#figur2{
	width: 30%;
	align-self: flex-end;
}
#figur3{
	width: 50%;
	
}
#figur4{
	width: 20%;
	align-self: flex-end;
}
#figur2 img{
	position: absolute;
	bottom:10%;
}
#figur4 img{
	position: absolute;
	bottom:4%;
}


#figur1, #figur2, #figur3, #figur4{
	position: relative;
}





.on1{
	animation: on1 4s ease-in-out infinite;
	transform-origin: center bottom;
	animation-duration: 4s;
}
@keyframes on1 {
    0%, 100% {transform: translateX(0px);}
    49%{transform: translateX(-40px);}
}


.on2{
	animation: on2 2s ease-in-out infinite;
	transform-origin: center bottom;
	animation-duration: 2.8s;
}
@keyframes on2 {
    0%, 100% {transform: translateY(0px) scaleY(0.7);}
	50% {transform: translateY(-20px) scaleY(1.3);}
}


.on3{
	animation: on3 2s ease-in-out infinite;
	transform-origin: center bottom;
	animation-duration: 2.7s;
}
@keyframes on3 {
    0%, 100% {transform: rotate(0)}
	50% {transform: rotate(20deg);}
}


.on4{
	animation: on4 2s ease-in infinite;
	transform-origin: center bottom;
	animation-duration: 0.6s;
}
@keyframes on4 {
    0%, 100% {transform: translateY(0)}
	60% {transform: translateY(-10px);}
}












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