.cssgrid.padding>div
{
	padding-top: 0.25em; padding-bottom: 0.25em; 
	padding-left: 0.25em; padding-right: 0.25em; 
	margin-top:2px;
	margin-left:2px;
	background-color:#a1d8f6;
	color:black;
	text-align:center;
	max-width: 100vw;
}

.cssgrid.padding>div.nobg
{
	background: none;
	text-align:left;
}

.cssgrid>div.tick
{
	position:relative;
}

.cssgrid>div.tick::before
{
	content: '';
	height: 100%;;
	width: 100%;;
	background-image: url('/img/tick_small.png');
	background-repeat:no-repeat;
	background-position: 50% 50%;
	background-size: 1em;
	display:block;
}

.cssgrid>div.cross::before
{
	content: '';
	height: 100%;;
	width: 100%;;
	background-image: url('/img/cross_small.png');
	background-repeat:no-repeat;
	background-position: 50% 50%;
	background-size: 0.8em;
	display:block;
}

.cssgrid .column1 {	grid-column-start:1; }
.cssgrid .column2 {	grid-column-start:2; }
.cssgrid .column3 {	grid-column-start:3; }
.cssgrid .column4 {	grid-column-start:4; }
.cssgrid .column5 {	grid-column-start:5; }

.cssgrid .span2 {	grid-column-end: span 2; }
.cssgrid .span3 {	grid-column-end: span 3; }
.cssgrid .span4 {	grid-column-end: span 4; }
.cssgrid .span5 {	grid-column-end: span 5; }

.cssgrid div.heading
{
	color: #ffffff; background-color: #008cd1;
	text-align:left;
}

.cssgrid>div.light
{
	background-color: #d3ecfa;
}

@media only screen and (max-width:920px){
	
	.cssgrid
	{
		font-size:0.8em; 
	}
	
	.cssgrid.padding>div
{
	padding-top: 0.15em; padding-bottom: 0.15em; 
	padding-left: 0.15em; padding-right: 0.15em; 
	margin-top:1px;
	margin-left:1px
}	
	
}

@media only screen and (max-width:700px){
	
	.cssgrid
	{
		font-size:0.6em; 
	}
	
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference)
		{

			.page_container .flexmain .flex>div .page_image {
			opacity: 0;
			scale:0.7;
			transform: translateY(100px);
			animation: content-fadein;
			animation-fill-mode: both;
			animation-timeline: view();
			xxanimation-range-start: normal;
			xxanimation-range-end: 40vh;									
		}
		
		.flexrow.parallax3.rowback
		{
			animation: background-zoom;
			animation-fill-mode: both;
			animation-timeline: view();
			background-size:110%;
			
		}

	}
}

@keyframes background-zoom {
0% {
	background-size:110%;
 }
 100% {
	background-size:100%;
 }
}

@keyframes content-fadein {
0% {
 opacity: 0;
	scale:0.7;
	transform: translateY(100px);
 }
 25% {
 opacity: 1;
 }
 40% {
 opacity: 1;
 scale:1;
 transform: translateY(0);
 }
 60% {
 opacity: 1;
 scale:1;
 transform: translateY(0);
 }
  75% {
 opacity: 1;
 }
 100% {
 opacity: 0;
	scale:1.3;
	transform: translateY(-100px);
 }
}