﻿/*enlarge.css*/
.enlarge img {
    transition-duration: 2s;
    margin: 0 auto;
    display: block;
}
.enlarge img:hover {
    transform: scale(2.0);
    -webkit-transform: scale(2.0);
    -moz-transform: scale(2.0);
    z-index: 0;
}
/*********************************************************************************/
/*enlargeAdmPan - Administracja Państwowa*/
.enlargeAdmPan img {
    transition-duration: 1s;
    margin: 0 auto;
    display: block;
}
.enlargeAdmPan img:hover {
    transform: scale(5.0) translate(50%, -50%);
    -webkit-transform: scale(5.0);
    -moz-transform: scale(5.0);
    z-index: 0;
    visibility: visible;
}
/*********************************************************************************/
/* enlargeWissa - Rzeka Wissa */
.enlargeWissa img {
    transition-duration: 1.0s; ease;
    margin: 1 auto;
    display: block;
    
}
.enlargeWissa img:hover {
    transform: /*rotate(15deg)*/ scale(20.1) translate(50%, -50%);
/*    -webkit-transform: scale(20.1);
     -moz-transform: scale(20.1);
      z-index: 0;
    translate: (-50%, -50%);
    translate: (50%, -50%);
    -webkit-animation:bounceFromRight;*/
}
/*********************************************************************************/
/* Powiększanie obrazka + animacja czasowa + animowany podpis na dole obrazka*/
   .containerCOT {
    position: relative;
    display: inline-block;
/*    padding: 20px;
    background: #f0f0f0;*/
    cursor: pointer;
  }

  .delayed-imageCOT {
    /* Pozycjonowanie na środku ekranu */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    
    /* Ukrycie obrazka */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /* Animacja i opóźnienie */
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.1s;
    transition-delay: 0s; /* Brak opóźnienia przy znikaniu */
    z-index: 1000;
    
    /* Obramowanie powiększanego obrazka */
    border:1px blue solid;
  }

  .delayed-imageCOTpodpis {
    /* Pozycjonowanie na środku ekranu */
    position: fixed;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    
    /* Ukrycie obrazka */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /* Animacja i opóźnienie */
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.1s;
    transition-delay: 0s; /* Brak opóźnienia przy znikaniu */
    z-index: 1000;
    
    /* Obramowanie powiększanego obrazka */
    border:1px blue solid;
  }

    /* Efekt po najechaniu na kontener */
  .containerCOT:hover .delayed-imageCOT {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    
    /* 1 sekunda opóźnienia przed pokazaniem */
    transition-delay: 0.5s; 
  }
  
      /* Efekt po najechaniu na kontener */
  .containerCOT:hover .delayed-imageCOTpodpis {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    
    /* 1 sekunda opóźnienia przed pokazaniem */
    transition-delay: 1.5s; 
  }
.imageCOTpodpis	{
				border:0;
				color:blue;
				font-style:italic;
				font-size:small;
}
/*********************************************************************************/
/* Powiększanie obrazka */
  /* Kontener lub tekst, na który najeżdżamy */
  .hover-target {
    display: inline-block;
/*    padding: 10px 20px;*/
    background: #eee;
    cursor: pointer;
    border: 1px solid #ccc;
    text-align:center;
  }

  /* Ukryty obrazek */
  .centered-image {
    display: none; /* Domyślnie niewidoczny */
    position: fixed; /* Pozycjonowanie względem okna przeglądarki */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Idealne wyśrodkowanie */
    z-index: 9999; /* Wyświetlanie nad wszystkimi elementami */
    max-width: 80%;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
  }

  /* Pokaż obrazek, gdy najeżdżamy na tekst */
  .hover-target:hover + .centered-image {
    display: block;

  }
/*********************************************************************************/


