/*========================ADAMNA.NET FRAMEWORK verze 2.20================================*/

/*------------------------TILES ---------------------------------------------------------
  
  tile-container-scaling: udržují poměr šířek na řádku vždy do poloviny, pak se přeskládají
    fw-tile-100, fw-tile-50 nebo fw-tile-50-container a v něm 2x fw-tile-25
    u každé dlaždice musí být nastaven style height v px !!!

  tile-container-scaling: snazi se udrzet sirku, shrink max 10%, dorustaji aby byly zarovnane
    fw-tile-25,50,75,33,66
    u každé dlaždice musí být nastaven style height v px !!!

*/
/*------------------------IMAGES ---------------------------------------------------------
  
  hover-image: po najetí myší na img se zobrazí jeho figcaption pomocí jednoho z efektů. místo
    img lze použít div s pevně danými rozměry a pozadím obrázku - dosáhne se oříznutí tak, aby
    vyplnil celou plochu.
    effect-opacity: obrazek zprůhlední a přes něj najede titulek
    effect-title: pouze přes něj najede titulek
    effect-shift: obrázek se odsune kousek nahoru a zespodu přijede titulek 
    effect-shrink: obrázek se smrskne a zespodu přijede titulek 

*/
.fw-tile-container-scaling
{
  display:flex;
  flex-wrap:wrap;
  align-items: stretch;
}
.fw-tile-container-scaling .fw-tile-50
{
  flex-grow:1;
  flex-shrink:1;
  flex-basis:0;
  min-width:232.5px;
  max-width:475px;
  margin:5px;
  overflow: hidden;
}
.fw-tile-container-scaling .fw-tile-50-container
{
  flex-grow:1;
  flex-shrink:1;
  flex-basis:0;
  min-width:242.5px;
  max-width:485px;
  margin:0px;
  overflow: hidden;
  display:flex;
  flex-wrap:wrap;
  align-items: stretch;
}
.fw-tile-container-scaling .fw-tile-25
{
  flex-grow:1;
  flex-shrink:1;
  flex-basis:0;
  min-width:111.25px;
  max-width:232.5px;
  margin:5px;
  overflow: hidden;
}
.fw-tile-container-scaling .fw-tile-100
{
  flex-basis:auto;
  width:100%;
  margin:5px;
  overflow: hidden;
}



.fw-tile-container-growing
{
  display:flex;
  flex-wrap:wrap;
  align-items: stretch;
}
.fw-tile-container-growing .fw-tile-50
{
  flex-grow:50;
  flex-shrink:50;
  flex-basis:426.5px;
  max-width:100%;
  margin:5px;
  overflow: hidden;
}
.fw-tile-container-growing .fw-tile-25
{
  flex-grow:25;
  flex-shrink:25;
  flex-basis:208.25px;
  max-width:100%;
  margin:5px;
  overflow: hidden;
}
.fw-tile-container-growing .fw-tile-75
{
  flex-grow:75;
  flex-shrink:75;
  flex-basis:644.75px;
  max-width:100%;
  margin:5px;
  overflow: hidden;
}
.fw-tile-container-growing .fw-tile-33
{
  flex-grow:33;
  flex-shrink:33;
  flex-basis:278.09px;
  max-width:100%;
  margin:5px;
  overflow: hidden;
}
.fw-tile-container-growing .fw-tile-66
{
  flex-grow:66;
  flex-shrink:66;
  flex-basis:566.18px;
  max-width:100%;
  margin:5px;
  overflow: hidden;
}
 
/* hover images*/
.fw-hover-image
{
  margin: 0;
  position: relative;
  height: 100%;
  width: 100%;
}
.fw-hover-image>div
{
  background-position: center;
  background-size: cover;
  width:  100%;
  height: 100%;
}
.fw-hover-image>img
{
  width:  100%;
  height: 100%;
}
.fw-hover-image figcaption {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 2;
	display: block;
	width: 100%;
  height: 50%;
	margin: 0;
	padding: 20px 0;
	text-align: center;
	-webkit-transition: .3s ease;
	transition: .3s ease;
	opacity: 0;
}
.fw-hover-image:hover figcaption {
	top: 50%;
	opacity: 1;
}
/* hover images - opacity effect*/
.fw-hover-image.fw-effect-opacity>img, .fw-hover-image.fw-effect-opacity>div
{
	opacity: 1;
	-webkit-transition: .3s ease;
	transition: .3s ease;
}
.fw-hover-image.fw-effect-opacity:hover>img, .fw-hover-image.fw-effect-opacity:hover>div
{
	opacity: 0.3;
}
/* hover images - title effect*/
.fw-hover-image.fw-effect-title figcaption
{
  background-color: rgba(255,255,255,0.7);
}
div.fw-tile-100 .fw-hover-image figcaption.fw-title-lower {
  height: 38%;
}
div.fw-tile-100 .fw-hover-image:hover figcaption.fw-title-lower {
	top: 62%;
}
div.fw-tile-100 .fw-hover-image figcaption.fw-title-higher {
  height: 62%;
}
div.fw-tile-100 .fw-hover-image:hover figcaption.fw-title-higher {
	top: 38%;
}
/* hover images - shift effect*/
.fw-hover-image.fw-effect-shift>img, .fw-hover-image.fw-effect-shift>div
{
  position: relative;
  top: 0px;  
	-webkit-transition: .3s ease;
	transition: .3s ease;
}
.fw-hover-image.fw-effect-shift:hover>img, .fw-hover-image.fw-effect-shift:hover>div
{
  position: relative;
  top: -50%;
}
/* hover images - shrink effect*/
.fw-hover-image.fw-effect-shrink>img, .fw-hover-image.fw-effect-shrink>div
{
  height: 100%;
  -webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.fw-hover-image.fw-effect-shrink:hover>img, .fw-hover-image.fw-effect-shrink:hover>div
{
  height: 50%;
}
/* hover images - side effect*/
.fw-hover-image.fw-effect-side figcaption {
	top: 50%;
  height: auto;
	left: -100%;
  background-color: rgba(255,255,255,0.7);
  text-align: left;
  padding: 20px;
  width: auto;
}
.fw-hover-image.fw-effect-side:hover figcaption {
	left: 0%;
	opacity: 1;
}
/* hover images - zoom*/
.fw-hover-image.fw-effect-zoom>img, .fw-hover-image.fw-effect-zoom>div
{
  -webkit-transition: all .2s ease;
	transition: all .2s ease;
}
.fw-hover-image.fw-effect-zoom:hover>img, .fw-hover-image.fw-effect-zoom:hover>div
{
    -ms-transform: scale(1.2,1.2); /* IE 9 */
    -webkit-transform: scale(1.2,1.2); /* Chrome, Safari, Opera */
    transform: scale(1.2,1.2);
}