﻿
.grid-container {
  display: flex;
  width:100%;
  flex-wrap: wrap;
/*  justify-content: space-between;   or space-around */
}
.grid-container-line {
  display: flex;
  width:100%;
  flex-wrap: wrap;
/*  justify-content: space-between;   or space-around */
}

@media  screen and (min-device-width : 768) {
   /* Smartphone view: 1 tile */
   .figure{
    width: calc(100% - 4px);
  }  
   .figure-line{
    width: calc(100% - 4px);
  }  
}
@media  screen and (max-device-width : 1024px) and (min-device-width : 769px) {
   /* Tablet view: 2 tiles */
   .figure{
    width: calc(50% - 4px);
  }  
   .figure-line{
    width: calc(50% - 4px);
  }  
}
@media  screen and    (min-device-width : 1025px) {
   /* Small desktop / ipad view: 3 tiles */

   .figure {
    max-width: calc(33.3% - 4px);
  }  

   .figure-line {
    max-width: calc(33.3% - 2px);
  }  
}
 /* 
@media only screen and (min-width : 1051px) {
     Medium desktop: 4 tiles 

  .figure {
    width: calc(25% - 4px);
  }
  .figure-line {
    width: calc(25% -4px);
  }
  }
  
 */ 

.GridHeading {
	            
		    	 
		    	background-color: #ddd;
				max-width: 100%;
				boader-top: 2px solid black;
				
				 
				border: 1px solid gray;
		}
.GridHeading2 {
	            margin-top: 8px;
		    	border-radius: 10px 10px  0px  0px;
		    	background-color: #ddd;
				max-width: 100%;
				boader-top: 2px solid black;
				
				 
				border: 1px solid gray;
		}
.GridHeading-normal {
 
				max-width: 100%;
				border: 1px solid #999999;

 
		}
		
.grid-link:hover .grid-img {
  transform: scale(1.15);
}
/*


.figure {
  display: inline-block;
  margin-bottom: 8px;
  width: calc(100% - 4px);
  text-decoration: none;
  color: black;
  

}
*/
.figure {
	margin-right:4px;
}

.figure-line {
  
 
  border: 1px solid #999999;
 
 
 
}

figcaption {
 
  margin-bottom:8px;
}

.grid-img {
  border: none;
  max-width: 100%;
  height: auto;
  display: block;
  background: #ccc;
  transition: transform .2s ease-in-out;
    margin: 0;
  overflow: hidden;
}

.p-font-1em{
	font-size:1.2em;
	font-style:bold;
	margin-top: 0;
    margin-bottom:0;
	
}
.blink {
	color:red;
  animation: blink-animation 3s steps(5, start) infinite;
  -webkit-animation: blink-animation 3s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

