/* CSS Document */

/*========grid-layout==========
===============================*/
.wrapper{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-auto-rows:minmax(0px, auto);
  grid-gap: 0;
  justify-items:stretch;
  align-items:stretch;
}

.wrapper .imager{
  /*align-self:start;*/
  grid-column:1/3;
  grid-row:1;
  max-height: 400px;
  overflow: hidden;
  position: relative;
}


.wrapper .imager picture {
  
}

.wrapper .imager picture img {
  filter: grayscale(100%);
  width: auto;
  width: 100%;
  height: 100%;
  object-position: 50% 50%;
  object-fit: cover;  
}

.wrapper .imager blockquote {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%);
  width: 50%;
  z-index: 2;
  padding: 25px;
  background: rgba(var(--white_tr),.5);
  border: rgba(var(--white_tr),.3) 1px solid;
  border-width: 1px 1px 1px 0px;

}

.wrapper .mainPage{
  /*align-self:start;*/
  grid-column:1/3;
  grid-row:3;
}

.noBnr .mainPage {
  grid-column:1/3;
  grid-row:2/4!important;

}

.wrapper .mainPage p{
  height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  color: rgba(var(--black_tr),.5);
  font-style: italic;
  margin: 0;
  padding: 0;
}

.wrapper .mainPage .button {
  float: right;
}

.wrapper .box1{
  grid-column: 1/3;
  grid-row: 2/3;
  background: rgba(var(--black_tr),.15)!important;
  height: auto;
}

.noBnr .box1 {
  grid-column: 1/3;
  grid-row: 1/1!important;
}

.mirorPage .wrapper .box1 {
  grid-row: 2/4;
  background: rgba(var(--black_tr),.05)!important;  
}


.wrapper .box2{
  grid-column: 3/4;
  grid-row: 1;
  filter: grayscale(0%);
  background: url(../img/foto_005_2.jpg), var(--tree-color)!important;
  color: var(--white);

  background-position: 50% 50%!important;
  background-repeat: no-repeat!important;
  background-size: cover!important;
}

.noBnr .box2 {
  /*display: none;*/
  
}


.wrapper .box2 a,
.wrapper .box3 a {
  color: rgba(var(--white_tr),1);
}

.wrapper .box2 a:hover {
  color: rgba(var(--white_tr),.5);
}


.wrapper .box3{
  grid-column: 3/4;
  grid-row: 2/4;
  background: var(--primary-color)!important;
  color: var(--white);
}

.noBnr .box3 {
  grid-row: 2/4;
}

/*.wrapper .box4{
  grid-column: 3/4;
  grid-row: 2/4;
  
}*/

.wrapper .box5{
  grid-column: 1/2;
  grid-row: 4;
  
}
.wrapper .box6{
  grid-column: 2/4;
  grid-row: ;
}

.wrapper .box7{
  grid-column: 1/4;
  grid-row: ;
  
}

.wrapper .box5,
.wrapper .box7 {
  background: linear-gradient(90deg,rgba(var(--black_tr),.05),rgba(var(--black_tr),.15))!important;
}

.box1 iframe,
.box2 iframe,
.box3 iframe,
.box4 iframe,
.box5 iframe,
.box6 iframe,
.box7 iframe,
.box8 iframe,
.box9 iframe {
  width:100%;
  min-height: 200px;
}

.innerGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-gap:.0em;
}

.innerGrid figure{
  filter: grayscale(10%);
  height: 200px;
  position: relative;
  z-index: 1;
}

.innerGrid .video::after {
  content: '\f144';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: rgba(var(--white_tr),.9);
  font-size: 400%;

  display: flex;
  justify-content: center;
  align-items: center; 
}

.innerGrid .video:hover::after {
  color: rgba(var(--primary-color_tr),1);
}

.innerGrid figure img {
  filter: grayscale(0%);
  width: auto;
  width: 100%;
  height: 100%;
  object-position: 50% 50%;
  object-fit: cover;  
}

.innerGrid > div:hover figure img{
  filter: grayscale(0%);
}

.innerGrid > div{
  padding:1em;
  border: rgba(var(--black_tr),.1) 0px solid;
  background: linear-gradient(90deg,rgba(var(--black_tr),.05),rgba(var(--black_tr),.075));
  background: var(--white);
  transition: all ease-in-out 300ms;
}

.innerGrid > div main{
  padding: 1em;
  border-right: rgba(var(--black_tr),.1) 1px solid;
}

.innerGrid > div:hover{
  background: rgba(var(--white_tr),.5); 
}

/*=======radkovy-vypis-clanku======
===================================*/
.articleGrid {
  grid-template-columns:repeat(1, 1fr);
}

.articleGrid article {
  display:grid;
  grid-template-columns: 1fr 2fr;
  grid-auto-rows: auto;
  grid-column-gap: 1em;
  border-bottom: rgba(var(--white_tr),.3) 1px solid;
}

.articleGrid figure{
  height: auto;
  height: 250px;
}


.homepage .wrapper > div {
  background: rgba(var(--black_tr),.05);
  padding: 1em 1.5em;
  text-align: left;
}

.homepage .wrapper > .imager,
.homepage .wrapper > .mainPage,
.innerGrid > div{
  padding: 0;
}


.mainPage h2 {
  height: 65px;
  overflow: hidden;
  text-overflow: ellipsis;

 
}

.mainPage h2 a {
  color: var(--black);
}

.mainPage h2 a:hover {
  color: var(--primary-color);
}



@media (max-width: 1024px) {
  .wrapper,
  .innerGrid {
    display: block;
    height: auto;
  }
  .wrapper .mainPage p {
    height: auto;
  }

  .innerGrid figure {
    float: left;
    margin-right: 20px;
    width: 250px;
    height: auto;
    
  }
  .articleGrid,
  .articleGrid article {
    display: flex;
    flex-direction: column;
  }
  .articleGrid figure {
   width: 100%;
    
    
  
  }

}

@media (max-width: 620px) {
  .innerGrid figure {
    float: none;
    margin: 10px auto;
    width: 100%; 
  }
  .wrapper .imager blockquote {
    display: none; 
  }
  .homepage .wrapper > div {
    padding: 1em 0.5em;
  }

}




.col_1,.col_2,.col_3,.col_4,.col_5,.col_6,.col_7,.col_8,.col_9,.col_10,.col_11,.col_12{display:inline-block;vertical-align:top;margin:10px 3px}

.col_2{width:48.0%;width:calc(100% / 2 - 20px);}
.col_3{width:33.0%;width:calc(100% / 3 - 30px);margin:10px 15px}
.col_4{width:24.5%;width:calc(100% / 4 - 10px)}
.col_12{width:8,33333%;width:calc(100% / 12 - 5px)}

.col_2:first-child,.col_3:first-child,.col_4:first-child{margin-left:0}
.col_2:last-child,.col_3:last-child,.col_4:last-child{margin-right:0px}

.col img{width:100%;height:auto;object-fit:cover;object-position:0% 100%;text-align:center;margin:0 auto}


@media (max-width: 1025px) {
    .col_1,.col_2,.col_3,.col_4,.col_5,.col_6,.col_7,.col_8,.col_9,.col_10,.col_11,.col_12,
    .section_offer .col_4 {
      width: 100%;
      height: auto!important;
      min-height: auto!important;
      display: block;
      margin: 0;
      margin-bottom: 40px;
      box-sizing: border-box;
    }
  }