.actionBlocks_container {
   display: grid;
   margin-top: 10px;
   /*  grid-template-columns: repeat(auto-fit, 300px); */
   grid-template-columns: repeat(auto-fit, 12.31rem );
   justify-content: center;  
}

.infoBlock {
   position: relative;
   /* Text go to new line if word very long */
   word-wrap: break-word;
   /* Hide long text in block */
   overflow: hidden;
   display: inline-block;
   vertical-align: top;
   /*width: 280px;*/
   width: 11.11rem;
   margin: 10px;
   cursor: pointer;
   /* outline: 1px solid #303030; */
   border-radius: 8px;
    /*
   background-image: linear-gradient( 0deg,#482340,#3a2d62);
  
   background-image: linear-gradient(34deg,#11142a,#5d66a7);
   */
   
   /* background-image: linear-gradient(0deg,#0a1218,#3a2d62); */
   /* background-image: linear-gradient(0deg,#45779d,#3a2d62); */
   background-image: linear-gradient(0deg, #ffffff, #e7e3f2);
   /*
   background-image: linear-gradient(0deg,#475b6c,#d37c9d);
   background-color: #1c1c1e;
   */

   /* Set outline */
   /* box-shadow: 0 0 0.1pt 0.4pt #7364ed4d; */
   box-shadow: 5px 5px 15px rgb(162 130 190);

 
   /* Speed of animation on mouse hover and over of element */
   transition: 0.6s linear;
   
   /* Speed of animation just on mouse over
   transition: transform 0.5s;
   -webkit-transition: transform 0.5s;
   -moz-transition: transform 0.5s;
   -o-transition: transform 0.5s;
   *//**/

   /*
   box-shadow: 0 0 0.1pt 0.23pt #6495ed45;
   */
   
   box-shadow: 5px 5px 15px rgb(0 0 0 / 90%);
}

.infoBlock img {
   width:100%; 
   /*height:250px;*/
   height: 11.11rem;
   /* padding: 3px; */
   border-radius: 8px;
   /* Image cut */
   -o-object-fit:cover;
      object-fit:cover;
   /**/
   box-shadow: 2px 2px 50px rgba(0, 0, 0, 0.2);
}

.infoBlock:hover {

   box-shadow: 0 0 3pt 2pt blueviolet;
    -webkit-box-shadow: 0 0 3pt 2pt blueviolet;
    -moz-box-shadow: 0 0 3pt 2pt blueviolet;

   /* Set outline light around block with image */
   /*
   box-shadow: 0px 0px 5px 2px #000000; 
   -webkit-box-shadow: 0px 0px 5px 5px #000000;
   -moz-box-shadow: 0px 0px 5px 5px #000000;
   */
   /* box-shadow: 10px 20px 30px lightblue;
   -webkit-box-shadow: 10px 20px 30px lightblue;
   -moz-box-shadow: 10px 20px 30px lightblue; */
} 

.infoBlock:active {
   /* Set outline light around block with image */
   box-shadow: 0px 0px 1px 1px #4285f4; 
   -webkit-box-shadow: 0px 0px 5px 2px #4285f4;
   -moz-box-shadow: 0px 0px 5px 2px #4285f4;
   /**/
   transition: 0s linear;
}

.actionBlocks_container .title {
   width: 100%;
   font-size: 16px;

   display: inline-block;
   padding: 15px 15px;
   /* new line for long text */
   word-wrap: break-word;
   /* color: #c7c7c7; */
   color: #6c6c6c;
}


.infoBlock .block_resizer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   overflow: hidden;
   width: 100%;
   height: 100%;
   -webkit-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: .3s ease;
   transition: .3s ease;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
}

.infoBlock .settings {
   position: absolute;
   top: 0;
   right: 0;
   overflow: hidden;
   width: 30px;
   height: 30px;
   -webkit-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: .3s ease;
   transition: .3s ease;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   background-color: #ffffff2b;
   border-radius: 8px;
   margin: 3px;
}

.infoBlock .settings:hover {
   box-shadow: 0 0 3pt 2pt blueviolet;
   -webkit-box-shadow: 0 0 3pt 2pt blueviolet;
   -moz-box-shadow: 0 0 3pt 2pt blueviolet;
   /* Set outline light around block with image */
   /* box-shadow: 0px 0px 1px 1px #4285f4; 
   -webkit-box-shadow: 0px 0px 5px 2px #4285f4;
   -moz-box-shadow: 0px 0px 5px 2px #4285f4; */
   /**/
   transition: 0s linear;
}

.infoBlock .settings .icon {
   content:url('../icons/settings-white.png');
   color: white;
   font-size: 100px;
   position: absolute;
   top: 50%;
   left: 50%;
   height: 20px;
   width: 20px;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   text-align: center;
}


.folder {
   position: absolute;
   bottom: 0;
   right: 0;
   background-color: #008CBA;
   overflow: hidden;
   width: 50%;
   height: 4px;
   -webkit-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: .3s ease;
   transition: .3s ease;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
}


.perspective_img_effect_container {
   /* 3D effect for img. Less value is more offset img from cursor */
   perspective: 15px;  
}



/*
@media (max-width: 900px) {
   .actionBlocks_container {
      grid-template-columns: repeat(auto-fit, 100px);
   }
   .infoBlock {
      width: 100px;
      margin: 0px;
      (comment) Speed of animation 
      transition: 0.1s linear;
   }
   .infoBlock img {
      width:100%;
      height:100px;
   }
   .title {
      font-size: 11px;
      display: inline-block;
      padding: 15px 10px;
   }
}
*/

@media (max-width: 1300px) {
   .actionBlocks_container {
      grid-template-columns: repeat(auto-fit, 7.2rem); 
      /* grid-template-columns: repeat(auto-fit, 125px); */
      /* grid-template-columns: repeat(auto-fit, 150px); */
      padding-left: 0px;
      padding-right: 0px;
   }
   .infoBlock img {
      height: 6rem;
      /*height: 143px;*/
   }
   .infoBlock {
      width: 7rem; 
       /* width: 143px;*/
      margin: 5px;
      /* background-color: #1c1c1e; */
      /*
      background-image: linear-gradient(0deg,#0a1218,#3a2d62);
      */
   }

   .actionBlocks_container .title {
      font-size: 14px;
      display: inline-block;
      padding: 15px 10px;
   }
}

@media (max-width: 600px) {
  
}