tiles

.image1, .image2{
  position: absolute;
  -webkit-transition: 0.4s all ease-in-out;
  -moz-transition: 0.4s all ease-in-out;
  -ms-transition: 0.4s all ease-in-out;
  -o-transition: 0.4s all ease-in-out;
  transition: 0.4s all ease-in-out;
  width:100%;
  height:100%;
}

.image2
{
  opacity: 0 ;
  .links{
    width: 100%;
    height:100%;
    overflow: hidden;
    //padding: 30% 0%;

    ul{
      padding:0;
      width:100%;
      height:100%;
      list-style-type: none;
      transform:translateY(35%);
      li{
        .tile-link
        {
          font-family: 'Source Sans Pro', sans-serif;
          color: white;
          display: block;
          font-size:18px;
          padding:5px 20px;
          text-transform: uppercase;
          text-decoration: none;
          -webkit-transition: all 0.3s;
          -moz-transition: all 0.3s;
          -ms-transition: all 0.3s;
          -o-transition: all 0.3s;
          transition: all 0.3s;

          &:hover{
            font-weight:bold;
          }
        }
      }
    }


  }
}

.tilecontainer{
  margin: 15px;
  display: inline-block;
  .tile{
    position:relative;
    border: none !important;
    width: 250px;
    height: 250px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    img {
      position:absolute;
      left:0;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
    }
    &.diagnostyka
    {
      .image1{
        opacity:1;
        background: url("./images/diagnostyka_icon.jpg");
      }

      .image2{
        opacity:0;
        background: url("./images/diagnostyka_grayscale.jpg");
      }

      &:hover{
        .image1{
          opacity:0 !important;
        }

        .image2{
          opacity:1 !important;
        }
      }
    }

    &.specjalistyka
    {
      .image1{
        opacity:1;
        background: url("./images/specjalistyka_icon.jpg");
      }

      .image2{
        opacity:0;
        background: url("./images/specjalistyka_grayscale.jpg");
      }

      &:hover{
        .image1{
          opacity:0 !important;
        }

        .image2{
          opacity:1 !important;
        }
      }
    }

    &.medycyna-pracy
    {
      .image1{
        opacity:1;
        background: url("./images/medycyna_pracy_icon.jpg");
      }

      .image2{
        opacity:0;
        background: url("./images/medycyna_pracy_grayscale.jpg");
      }

      &:hover{
        .image1{
          opacity:0 !important;
        }

        .image2{
          opacity:1 !important;
        }
      }
    }

    &.inne
    {
      .image1{
        opacity:1;
        background: url("./images/inne_icon.jpg");
      }

      .image2{
        opacity:0;
        background: url("./images/inne_grayscale.jpg");
      }

      &:hover{
        .image1{
          opacity:0 !important;
        }

        .image2{
          opacity:1 !important;
        }
      }
    }

    &.apteka-arnica
    {
      .image1{
        opacity:1;
        background: url("./images/arnica_icon.jpg");
      }

      .image2{
        opacity:0;
        background: url("./images/arnica_grayscale.jpg");
      }

      &:hover{
        .image1{
          opacity:0 !important;
        }

        .image2{
          opacity:1 !important;
        }
      }
    }

    &.nfz
    {
      .image1{
        opacity:1;
        background: url("./images/nfz_icon.jpg");
      }

      .image2{
        opacity:0;
        background: url("./images/nfz_grayscale.jpg");
      }

      &:hover{
        .image1{
          opacity:0 !important;
        }

        .image2{
          opacity:1 !important;
        }
      }
    }


  }
}