.zoom {
  transition: transform .2s; /* Animation */
  width: 30px;
  height: 40px;
}

.zoom:hover {
  transform: scale(3); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

td{
	padding:5px;
	border: 1px solid white;
	
}

td.pkr{
	padding:5px;
}

table{
	border-collapse:collapse;	
	width:100%;
}

//bcstmblau: 077abf
//dangerred: e5351a
//
ul.nav li a, ul.nav li a:visited, a:visited {
    color: red !important;
}

ul.nav li a:hover, ul.nav li a:active , a:active, a:hover{
    color: red !important;
    font-weight: bold;
}

a.title::before {
	display:block;
	content:attr(title);
	font-weight: bold;
	height:0;
	overflow: hidden;
	visibility: hidden;
}

ul.nav li.active a, a {
    color: red !important;
}


.posts-container {
    max-width: 760px;
    /*background: rgba(222,248,255,1.0);*/
}

#photos-container{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	aling-items: center;
}

#img-sm {
  /* Just in case there are inline attributes */
  width: 80px !important;
  height: 100px !important;
  object-fit: cover;
  padding:2px;
}

#img-lg {
  /* Just in case there are inline attributes */
  width: 100px !important;
  height: 125px !important;
  object-fit: cover;
  padding:2px;
}


	
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	.photos-container img:nth-child(n+0) {
    	display:none;   
	}
	
	#img-lg, #img-sm {
	  /* Just in case there are inline attributes */
	  width: 70px !important;
	  height: 90px !important;
	  object-fit: cover;
	  padding:2px;
	}
	
	/* Force table to not be like tables anymore */
	table, #myTable thead, #myTable tbody, #myTable th, #myTable td, #myTable tr { 
		display: block; 
	}
	
	table, #myTablePosts thead, #myTablePosts tbody, #myTablePosts th, #myTablePosts td, #myTablePosts tr { 
		display: block; 
	}
	
	table, #myTableEvents thead, #myTableEvents tbody, #myTableEvents th, #myTableEvents td, #myTableEvents tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	#myTable thead #myTable tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table {width: 100%;}
	
	#myTable th, #myTablePosts th, #myTableEvents th{display: none;}
	
	#myTable tr, #myTablePosts tr, #myTableEvents tr { border: 2px solid white; }
	
	#myTable td, #myTablePosts td, #myTableEvents td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 2px solid white; 
		position: relative;
	}
	
	
}