/*########################################################################################
 Simple Web Template, (c) 2025 webapps@cjpj, P. Janko
 MIT License: https://www.cjpj.de/contact.htm#terms
 https://github.com/cjpjwa/simple-web-template
########################################################################################*/

.screenshot_img2		{border: 1px solid #999999; padding: 0px;  margin: 18px 1% 0px 1%; width: 440px; height:auto; aspect-ratio:512/288; box-shadow: 0 2px 4px 0 rgba(51,51,51,0.1),0 2px 10px 0 rgba(51,51,51,0.1); }
.screenshot_img3		{border: 1px solid #999999; padding: 0px;  margin: 18px 1% 0px 1%; width: 210px; height:auto; aspect-ratio:213/379; box-shadow: 0 2px 4px 0 rgba(51,51,51,0.1),0 2px 10px 0 rgba(51,51,51,0.1); }
.screenshot_img4		{border: 1px solid #999999; padding: 0px;  margin: 18px 1% 0px 1%; width: 210px; height:auto; aspect-ratio:213/426; box-shadow: 0 2px 4px 0 rgba(51,51,51,0.1),0 2px 10px 0 rgba(51,51,51,0.1); }

main .images			{padding:10px 20px 0px 40px; margin:0px;}
main .round_icon_start	{padding:4px; margin:5px 2px 5px 0px; width:40px; height:40px; aspect-ratio:40/40; border: 1px solid #999999; border-radius:10px; box-shadow: 0 2px 4px 0 rgba(51,51,51,0.1),0 2px 10px 0 rgba(51,51,51,0.1); }
main .round_icon_list	{padding:0px; margin:15% 5% 0% 5%; border: 1px solid #999999; width:145px; height:145px; aspect-ratio:145/145; border-radius:15px; box-shadow: 0 2px 4px 0 rgba(51,51,51,0.1),0 2px 10px 0 rgba(51,51,51,0.1); }
main .qrcode_icon		{padding:0px; margin:15% 5% 0% 5%; border: 1px solid #999999; width:145px; height:145px; aspect-ratio:145/145; border-radius:15px; box-shadow: 0 2px 4px 0 rgba(51,51,51,0.1),0 2px 10px 0 rgba(51,51,51,0.1); }
main .important		{color:#990000}

div.col0 hr			{padding:0px; margin:10px 40px 10px 40px;}
div.col1 hr			{margin:10px 40px 10px 40px;}
div.col2 hr			{margin:10px 40px 10px 40px;}
a.download			{padding:5px 15px 5px 15px; margin:0px 10px 5px 0px; display:inline-block; text-decoration:none; color:#ffffff !important; border:1px solid #cccccc; border-radius:5px; background:#337ab7}

/* tablet size */
@media (max-width: 1020px) {
	main .round_icon_list	{margin:1% 5% 0% 5%;}
	main .qrcode_icon		{margin:1% 5% 0% 5%}
}

/* smart phone size */
@media (max-width: 800px) {
	div.col0 hr			{margin:10px 20px 10px 20px;} 
	div.col1 hr			{margin:10px 20px 10px 20px;}
	div.col2 hr			{margin:10px 20px 10px 20px;}
	main table.app		{margin:40px auto;}
	.screenshot_img2		{width: 87%;}
}

/* smart phone size tables */
@media (max-width: 700px) {
	main table.app		{margin:20px;}
}