:root {

    --cassiopeia-color-primary: #00ff00;
    --cassiopeia-color-link: #0000ff;
    --cassiopeia-color-hover: #ff0000;
    
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;  
    --body-color: #383838;
    --body-bg: #efefef;
}


.back-to-top-link {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 10000;
    padding: .5em;
    color: var(--cassiopeia-color-primary,#112855);
    pointer-events: all;
    background-color: var(--white,#fff);
    border: 1px solid var(--cassiopeia-color-primary,#112855);
    border-radius: .25rem;
    opacity: 0;
    transition: opacity .2s ease-in;
}
/*.block_icons .rhombus{
   opacity: 0;
   filter: alpha(opacity=0);
   position: relative;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
   transform: scale(0);
   border: 1px solid #dde0e7;
   padding: 40px;
}*/
.block_icons .rhombus{
/*   opacity: 0;
   filter: alpha(opacity=0);
   position: relative;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
   transform: scale(0);*/
   border: 1px solid #dde0e7;
   padding: 40px;
}
.rhombus.animations-effects{
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.rhombus:hover{
  background: #66A8DE;
}
.rhombus i{
  color: #666666;
}
.rhombus:hover i, .rhombus:hover h4, .rhombus:hover p, .rhombus:hover a{
  color: #fff;
}
.rhombus h3{
  margin: 10px;
}

  .block_icons{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .block_icons .span3{
    width: 48%;
    margin: 5px 0;
  }
}
@media (max-width: 600px){
  .blockp .span3{
    width: 100%;
  }
  .block_icons .span3{
    width: 100%;
  }
}

.cat25{
  width: 25%;
  height: auto;
}
.example-1 h3::after {
    position: absolute ;
    content: attr( data-date ) ; 
    padding-left: 0.625em ;
    font-size: 0.625em ;
    font-style: bold,italic ;
    color: green ;
}

.example-2 h3:after {
    position: absolute ;
/*    content: "01.03.2013" ; */
    padding-left: 0.625em ;
    font-size: 0.7em ;
    font-style: italic ;
    color:  red ;
}