html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
    margin: 0px;
}

div.debug {
    position:fixed;
    background-color: #444444;
    color: white;
    top:50%;
    left:30px;
    width:50%;
    height:20%;
    z-index:100;
}

a {
  color: yellow;
  text-decoration: none;
}

.galeria {
  display: flex;
  flex-wrap: wrap;
  max-width:1280px;
  padding: 4px 4px;
  margin: 0px auto 200px auto;
/*  -webkit-box-shadow: 10px 10px 22px 3px rgba(168,168,168,0.25); */
  box-shadow: 10px 10px 22px 3px rgba(0,0,0,0.25); 
  background: #333;
/*  opacity: 0.1;*/
  animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.galeria::after {
  content: '';
  flex-grow: 1;
  position: relative;
}

.matka {
  background-color: #222;
  min-width: 10%;
  transition: all .5s;
  margin: 8px; border: 0px; padding: 0px;

/*  overflow: hidden;  */
  width: 100%; 
}


.matka:last-child {
  max-height: 150px;
}

div.ramka {
  position: relative;

  background-color: #222;
/*  overflow: hidden;   */
/*  margin: 8px;   */
  transition: all .5s; 
/*   padding: 4px;  */
/*  border: 0px #666 solid; */

}

.nope {   /* class ramka i .ramka img*/         /* to zapewnia, że mouseover przechodzi do class .matka i nowy obrazek pojawia się już po najechaniu na niepowiekszony zakres */
  pointer-events: none;  
}

.pe_auto { 
  pointer-events: auto;  
}


.podpis_zdjecia {
  position: absolute;
  bottom: 10px;
  right: 15px;
  opacity: 0;
  font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
  text-shadow: 0px 0px 7px #000;
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
  padding: 2px 5px;
  text-align: right;
  font-size: 8pt;
}

.podpis_zdjecia_mobile_pod {
  font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
  text-shadow: 0px 0px 7px #000;
/* background: rgba(0,200,0,0.3);*/
 background: #333;
 margin-top: 4px;
/*  border-radius: 10px; */
  padding: 2px 5px;
  text-align: right;
  font-size: 7pt;
}

.podpis_opis {
  color: white;
} 

.podpis_filename {
  color: #AAA;
}



.textarea_100 {
    background-color: inherit;
    font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    font-weight: 300;
    line-height: 36px;
    color: white;
    white-space: pre-wrap;
    text-align: center;
    font-size: 24px;

}  


div.reset_szerokosci {
  width:100%;
  height:0px;
  margin: 0px;
  padding: 0px;
}

div.ramka_tekstowa {
/*  margin: 2px; */
  background-color: #444;

  margin: 4px 8px;
/*  border-width: 4px 4px;
  border-style: solid;
  border-color: #222; */
   /*solid;*/
  color: #DDD;

  font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 28px;
    white-space: pre-wrap;
    text-align: center;
}

/* zarówno dla textarea jak i dla ramki tekstowej */



.duzo_tekstu {
    line-height: 19px !important;
    font-size: 18px !important;
}


.pelna_szerokosc {
  width: 100%;
  padding: 20 30;
}

.pion {
  width: 220px;
  flex-grow: 220;
  padding: 20 15;
}

.poziom {
  width: 360px;
  flex-grow: 360;
  padding: 20 15;
}

.ramka {
  z-index: 1;
  transition: all .2s; 
}


.ramka img {
  top: 0;
  width: 100%;
  max-width:100%;
  min-height:100%; /*   // wyrzucone bo na IE to sprawiało że obrazki miały pełną wysokość, wcześniej było po to, żeby obrazki wypełniały całe okienko */
/*  height: 250px; */
  object-fit: cover;
/*  pointer-events: none; */
  outline: 4px solid #222;  
  transition: all .5s; 

}

 @media screen and (orientation:landscape) and (pointer:coarse) { 
 #rama {
  max-width:500px;
  margin:auto;
  } 
}


@media only screen and (max-width: 768px) {   /* telefon i ipad niech mają jedno zdjęcie na pełną szerokość zawsze */

h1 {
  margin: 20px 50px 10px 50px;
}

.matka {
  width:100% !important;
}

.pelna_szerokosc {
  width: 100%;
  padding: 15 15;
}

.podpis_zdjecia {
  position: absolute;
  bottom: 10px;
  right: 15px;
  opacity: 0.6;
  font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
  text-shadow: 0px 0px 7px #000;
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
  padding: 2px 5px;
  text-align: right;
  font-size: 7pt;
}

.galeria {
  padding: 0px 0px;
}

}

@media only screen and (min-width: 600px) and (max-width: 768px) {   /* spacjalnie dla ipada */

.podpis_zdjecia {
  font-size: 20px;
}

.duzo_tekstu {
    line-height: 20px !important;
    font-size: 18px !important;
}


}

@media only screen and (max-width: 700px) {

div.ramka_tekstowa_jesli_sa_mobile_podpisy {
  margin-bottom:18px !important;
}

}







@media only screen and (pointer: fine) and (hover: hover) {  

.matka:hover {
/*  transition: all .2s; */
  z-index: 20; 
}

.powiekszaj_mocno_po_najechaniu .podpis_zdjecia       {  font-size: 6px; }
.powiekszaj_srednio_po_najechaniu .podpis_zdjecia     {  font-size: 8px; }
.powiekszaj_nieco_po_najechaniu .podpis_zdjecia       {  font-size: 10px; }
.powiekszaj_minimalnie_po_najechaniu .podpis_zdjecia  {  font-size: 12px; }

.matka:hover .podpis_zdjecia { opacity: 1; transition: all .3s; }

}

@media only screen and (pointer: fine) and (hover: hover) and ( min-width: 1480px) {  

.matka:hover .powiekszaj_mocno_po_najechaniu.l:not(.u) { z-index: 20; transform:scale(2.8) translateX(17%);  transition:.4s;   }
.matka:hover .powiekszaj_mocno_po_najechaniu.m:not(.u) { z-index: 20; transform:scale(2.8) translateX(0%);  border-radius: 20%; transition: all .4s;   }
.matka:hover .powiekszaj_mocno_po_najechaniu.r:not(.u) { z-index: 20; transform:scale(2.8) translateX(-17%);  transition:.4s;   }

.matka:hover .powiekszaj_mocno_po_najechaniu.l.u { z-index: 20; transform:scale(2.8) translate(17%,17%);  transition:.4s;   }
.matka:hover .powiekszaj_mocno_po_najechaniu.m.u { z-index: 20; transform:scale(2.8) translate(0%,17%);  border-radius: 20%; transition: all .4s;   }
.matka:hover .powiekszaj_mocno_po_najechaniu.r.u { z-index: 20; transform:scale(2.8) translate(-17%,17%);  transition:.4s;   }


.matka:hover .powiekszaj_srednio_po_najechaniu.l { z-index: 20; transform:scale(2) translateX(15%) ; transition:.3s;   }
.matka:hover .powiekszaj_srednio_po_najechaniu.m { z-index: 20; transform:scale(2) translateX(0%); border-radius: 20%; transition: all .3s; }
.matka:hover .powiekszaj_srednio_po_najechaniu.r { z-index: 20; transform:scale(2) translateX(-15%); transition:.3s;   }

.matka:hover .powiekszaj_srednio_po_najechaniu.l.u { z-index: 20; transform:scale(2) translate(15%,12%) ; transition:.3s;   }
.matka:hover .powiekszaj_srednio_po_najechaniu.m.u { z-index: 20; transform:scale(2) translate(0%,12%); border-radius: 20%; transition: all .3s; }
.matka:hover .powiekszaj_srednio_po_najechaniu.r.u { z-index: 20; transform:scale(2) translate(-15%,12%); transition:.3s;   }


.matka:hover .powiekszaj_nieco_po_najechaniu.l:not(.u) { z-index: 20; transform:scale(1.4) translateX(8%); transition:.3s;   }
.matka:hover .powiekszaj_nieco_po_najechaniu.m:not(.u) { z-index: 20; transform:scale(1.4) translateX(0%); transition:.3s;   }
.matka:hover .powiekszaj_nieco_po_najechaniu.r:not(.u) { z-index: 20; transform:scale(1.4) translateX(-8%); transition:.3s;   }

.matka:hover .powiekszaj_nieco_po_najechaniu.l.u { z-index: 20; transform:scale(1.4) translate(8%,8%); transition:.3s;   }
.matka:hover .powiekszaj_nieco_po_najechaniu.m.u { z-index: 20; transform:scale(1.4) translate(0%,8%); transition:.3s;   }
.matka:hover .powiekszaj_nieco_po_najechaniu.r.u { z-index: 20; transform:scale(1.4) translate(-8%,8%); transition:.3s;   }

.matka:hover .powiekszaj_minimalnie_po_najechaniu { z-index: 2; transform:scale(1.1) translateX(0%); transition:.3s;   }

.matka:hover .powiekszaj_subtelnie_po_najechaniu { z-index: 2; transform:scale(1.02) translateX(0%); transition:.1s;   }

}

@media only screen and (pointer: fine) and (hover: hover) and ( min-width: 1024px) and ( max-width: 1475px) {  

.matka:hover .powiekszaj_mocno_po_najechaniu.l { z-index: 20; transform:scale(2.8) translateX(32%);  transition:.4s;   }
.matka:hover .powiekszaj_mocno_po_najechaniu.m { z-index: 20; transform:scale(2.8) translateX(0%);  border-radius: 20%; transition: all .4s;   }
.matka:hover .powiekszaj_mocno_po_najechaniu.r { z-index: 20; transform:scale(2.8) translateX(-32%);  transition:.4s;   }

.matka:hover .powiekszaj_mocno_po_najechaniu.l.u { z-index: 20; transform:scale(2.8) translate(32%,32%);  transition:.4s;   }
.matka:hover .powiekszaj_mocno_po_najechaniu.m.u { z-index: 20; transform:scale(2.8) translate(0%,32%);  border-radius: 20%; transition: all .4s;   }
.matka:hover .powiekszaj_mocno_po_najechaniu.r.u { z-index: 20; transform:scale(2.8) translate(-32%,32%);  transition:.4s;   }


.matka:hover .powiekszaj_srednio_po_najechaniu.l { z-index: 20; transform:scale(2) translateX(25%) ; transition:.3s;   }
.matka:hover .powiekszaj_srednio_po_najechaniu.m { z-index: 20; transform:scale(2) translateX(0%); border-radius: 20%; transition: all .3s; }
.matka:hover .powiekszaj_srednio_po_najechaniu.r { z-index: 20; transform:scale(2) translateX(-25%); transition:.3s;   }

.matka:hover .powiekszaj_srednio_po_najechaniu.l.u { z-index: 20; transform:scale(2) translate(25%,20%) ; transition:.3s;   }
.matka:hover .powiekszaj_srednio_po_najechaniu.m.u { z-index: 20; transform:scale(2) translate(0%,20%); border-radius: 20%; transition: all .3s; }
.matka:hover .powiekszaj_srednio_po_najechaniu.r.u { z-index: 20; transform:scale(2) translate(-25%,20%); transition:.3s;   }


.matka:hover .powiekszaj_nieco_po_najechaniu.l:not(.u) { z-index: 20; transform:scale(1.4) translateX(14%); transition:.3s;   }
.matka:hover .powiekszaj_nieco_po_najechaniu.m:not(.u) { z-index: 20; transform:scale(1.4) translateX(0%); transition:.3s;   }
.matka:hover .powiekszaj_nieco_po_najechaniu.r:not(.u) { z-index: 20; transform:scale(1.4) translateX(-14%); transition:.3s;   }

.matka:hover .powiekszaj_nieco_po_najechaniu.l.u { z-index: 20; transform:scale(1.4) translate(14%,12%); transition:.3s;   }
.matka:hover .powiekszaj_nieco_po_najechaniu.m.u { z-index: 20; transform:scale(1.4) translate(0%,12%); transition:.3s;   }
.matka:hover .powiekszaj_nieco_po_najechaniu.r.u { z-index: 20; transform:scale(1.4) translate(-14%,12%); transition:.3s;   }

.matka:hover .powiekszaj_minimalnie_po_najechaniu { z-index: 2; transform:scale(1.01) translateX(0%); transition:.3s;   }

.matka:hover .powiekszaj_subtelnie_po_najechaniu { z-index: 2; transform:scale(1.02) translateX(0%); transition:.1s;   }

}


/*.galeria img:hover { box-shadow:0 0 3px 2px #333; transition:.2s; -webkit-transition:0.2s; }*/
/*

.galeria div.ramka:hover { z-index: 2;  top: 0;   left: 0;   bottom: 0;   right: 0;   width: 100vw;   height: 100vh;  }
*/

/*
.block:hover{
  top: 0;   left: 0;   bottom: 0;   right: 0;   width: 100%;   height: 100%;
}
*/

.kropa {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 20px;
  height: 20px;
  background-color: #AAA;
  border-radius: 10px;
  border: 3px black solid;
  opacity: 0.1;
  transition: .2s;
  pointer-events: auto;
  z-index: 5000;
}

.matka:hover .kropa {
  opacity: 1;
}

.checbox_over {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  opacity: 0.2;
  transition: .2s;
  pointer-events: auto;
}

.matka:hover .checbox_over {
  opacity: 1;
}

.pozycja_zdjecia {
  position: absolute;
  top: 10px;
  right: 20px;
  opacity: 0.2;
  pointer-events: auto;
  font-size: 2em;
  font-weight: bold;
  color: white;
}

.pozycja_zdjecia:hover {
  opacity: 1;
}

.obrazek_submenu {
  position: absolute;
  top: -5px;
  left: -5px;
  display: none;
  width: 300px;
  height: 250px;
  background-color: #AAA;
  border: 3px black solid;
  padding: 10px;
  border-radius: 10px;
  opacity: 1;
  transition: opacity .2s;
  color: black;
  overflow: visible;
  z-index: 5001;

  font-family: 'Open Sans', sans-serif;
  font-size: 10px;

}

.obrazek_submenu td {
  font-family: 'Open Sans', sans-serif;  
  font-size: 10px;
  color: black;
}

.kropa:hover .obrazek_submenu {
  display: block;
  opacity: 1;  
}

.galeria_kwadraty {

}

@media only screen and (min-width: 769) and (max-width: 1024px) {
.galeria_kwadraty div {
  width: 33.3% ;
}


@media only screen and (max-width: 768px) {

.galeria_kwadraty div {
  width: 50% !important;
}
.galeria_kwadraty  img {
  width:100%;
}

.pelna_szerokosc {
  width: 100%;
  padding: 15 15;
}

.podpis_zdjecia {
  position: absolute;
  bottom: 10px;
  right: 15px;
  opacity: 0.6;
  font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
  text-shadow: 0px 0px 7px #000;
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
  padding: 2px 5px;
  text-align: right;
  font-size: 12px;
}

.galeria_kwadraty {
  padding: 0px 0px;
}

}