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

main h3 a					{color:#337ab7; text-decoration:none} 
main div.images				{padding:10px 20px 0px 40px; margin:0px;}
main img.round_icon_start	{padding:5px; margin:5px 2px 5px 0px; width:40px; height:40px; aspect-ratio:40/40; border: 1px solid #cccccc; 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 img.round_icon_small	{padding:0px; margin:8px 8px 5px 0px; width:24px; height:24px; aspect-ratio:40/40; float:left;  border-radius:6px; box-shadow: 0 2px 4px 0 rgba(51,51,51,0.1),0 2px 10px 0 rgba(51,51,51,0.1); }

main img.proimg	{margin:20px 40px 0px 10px; padding:4px; height:220px; border:1px solid #cccccc; border-radius:4px; float:right; width:auto; aspect-ratio:1250/720; box-shadow: 0 2px 4px 0 rgba(51,51,51,0.1),0 2px 10px 0 rgba(51,51,51,0.1); cursor:pointer;}
main img.promob	{margin:20px 10px 0px 10px; padding:4px; height:220px; border:1px solid #cccccc; border-radius:4px; float:right; width:auto; aspect-ratio: 360/620; box-shadow: 0 2px 4px 0 rgba(51,51,51,0.1),0 2px 10px 0 rgba(51,51,51,0.1); cursor:pointer;}

div.col0 hr			{padding:0px; margin:10px 40px 10px 40px;}


/* popup images */
#popupbg			{display:none; position:fixed; left:0px; top:0px; width:100%; height:120%; overflow:hidden; background-color:rgba(0,0,0,0.8); text-align:center; z-index: 600;}
#popupclose			{display:none; position:fixed; right:25px; top:0px; padding:0px; margin:0px; font-size:60px; color:#eeeeee; font-weight:bold; cursor:pointer;}
.popupimg   		{display:none; position:relative; top: 30%; -webkit-transform: translateY(-30%);-ms-transform: translateY(-30%); transform: translateY(-30%); padding:0px; margin: 0 auto; width:auto; font-size:14px; color:#eeeeee; font-weight:normal;}
.popupimg img 		{width:100%; margin:0px; padding:2px; background:#cccccc; border-radius:6px; border: 1px solid #999999; cursor:pointer;}


/* laptop size */
@media (max-width: 1200px) {
	main img.round_icon_small	{margin:4px 8px 5px 0px;}
	main img.proimg	{height:160px;}
	main img.promob	{height:160px;}
}

/* tablet size */
@media (max-width: 1020px) {
	main img.round_icon_small	{margin:2px 8px 5px 0px;}
	main img.proimg	{margin:20px 10px 30px 40px; height:180px; float:none;}
	main img.promob	{margin:20px 10px 30px 10px; height:180px; float:none;}
}

/* smart phone size */
@media (max-width: 800px) {
	main img.proimg	{margin:20px 10px 30px 30px; height:120px;}
	main img.promob	{margin:20px 10px 30px 0px;  height:120px;}
	div.col0 hr		{margin:10px 20px 10px 20px;}
}

/* iphone 5,SE */
@media (max-width: 320px) {
	main img.proimg	{height:80px;}
	main img.promob	{height:80px;}
}

/* print view */
@media print {
	main img.proimg	{height:180px;}
	main img.promob	{height:180px;}
}