body {
	width: 320px;
	margin: auto; 
	background: #8dcdd8; 
	background-image:url(KielisolmunIsoLiikemerkki.png);
	background-size: 50%; 
	background-repeat: no-repeat; 
	background-position: right top;
}



/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px) {
body {
	width: 480px;
	margin: auto; 
	background: #8dcdd8; 
	background-image:url(KielisolmunIsoLiikemerkki.png);
	background-size: 60%; 
	background-repeat: no-repeat; 
	background-position: right top;
}

} 

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 920px) {
body {
	width: 700px;
	margin-top: 30px;
	margin-left: 300px;
	margin-right: auto;
	background: #8dcdd8; 
	background-image: url(bgVasen.png), url(KielisolmunIsoLiikemerkki.png);
	background-size: 20%, 70%;
	background-origin: border-box, initial;
	background-repeat: repeat-y, no-repeat;
	background-position: left, right top;
}
div {
    -webkit-columns: 200px 2; /* Chrome, Safari, Opera */
    -moz-columns: 200px 2; /* Firefox */
    columns: 200px 2;
	height: 800px;
} 
li.hold {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
	list-style-type:none;
}
}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px) {
body {
	width: 700px;
	margin-top: 30px;
	margin-left: 300px;
	margin-right: auto;
	background: #8dcdd8; 
	background-image: url(bgVasen.png), url(KielisolmunIsoLiikemerkki.png);
	background-size: 20%, 70%;
	background-origin: border-box, initial;
	background-repeat: repeat-y, no-repeat;
	background-position: left, right top;
}
div {
    -webkit-columns: 200px 2; /* Chrome, Safari, Opera */
    -moz-columns: 200px 2; /* Firefox */
    columns: 200px 2;
	height: 800px;
} 
li.hold {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
	list-style-type:none;
}
} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
body {
	width: 700px;
	margin-top: 30px;
	margin-left: 300px;
	margin-right: auto;
	background: #8dcdd8; 
	background-image: url(bgVasen.png), url(KielisolmunIsoLiikemerkki.png);
	background-size: 20%, 70%;
	background-origin: border-box, initial;
	background-repeat: repeat-y, no-repeat;
	background-position: left, right top;
}
div {
    -webkit-columns: 200px 2; /* Chrome, Safari, Opera */
    -moz-columns: 200px 2; /* Firefox */
    columns: 200px 2;
	height: 800px;
} 
li.hold {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
	list-style-type:none;
}
}