.text1 {
    background-color:white;

}

.text2 {
    background-color:white;

}



.main1{	
max-width:1600px;
	padding:0px;
    margin: 0 auto  !important;
}



	
	
@media screen and (min-width:900px){
    .grid1 {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows:  repeat(3,auto) ;
        grid-gap:5px;
        grid-template-areas:
        "t1 s1 s2 s3 s3 s4"
        "t1 s5 s6 s3 s3 s4"
        "t1 s5 s7 s7 s8 s4";		
    }
	
#home-main{
max-width:1600px;
padding:5px 5px 5px 5px;
    margin: 0 auto  !important;
background-color:white;
  position:relative;
  left:0;
  z-index:1;
  -webkit-transform:translate3d(0,0,0.01);
  transform:translate3d(0,0,0.01);

}	

}

@media screen and (max-width:900px){
    .grid1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:  1fr repeat(7,100px) ;
        grid-template-areas:
        "t1 t1"
        "s7 s7"
        "s5 s1"
        "s5 s2"
		"s3 s3"
        "s3 s3"
        "s6 s4"
        "s8 s4";
        grid-gap:5px;
    }
.grid1{
padding-top:1px !important;
margin-left:1px !important;
margin-right:1px !important;
	}
.grid2{
margin-top:1px !important;
margin-left:1px !important;
margin-right:1px !important;
	}
.text2 {
margin-top:0px !important;	
	}

	
#home-main{
max-width:1600px;
padding:5px 5px 5px 5px;
    margin: 0 auto  !important;
background-color:white;
  position:relative;
  left:0;
  z-index:1;
  -webkit-transform:translate3d(0,0,0.01);
  transform:translate3d(0,0,0.01);

}	
	
	
}

h1{
font-size:25px !important;
	}
.text1 {
    grid-area: t1;

}


.slika1 {
    grid-area: s1;
    background-size: cover;
    background-position: center;
}



.slika2 {
    grid-area: s2;
    background-size: cover;
    background-position: center;
}

.slika3 {
    grid-area: s3;
    background-size: cover;
    background-position: center;
}

.slika4 {
    grid-area: s4;
    background-size: cover;
    background-position: center;
    object-fit: cover;
}



.slika5 {
    grid-area: s5;
    background-size: cover;
    background-position: center;
}

.slika6 {
    grid-area: s6;
    background-size: cover;
    background-position: center;
}

.slika7 {
    grid-area: s7;
    background-size: cover;
    background-position: center;
    object-fit: cover;
}



.slika8 {
    grid-area: s8;
    background-size: cover;
    background-position: center;
}




@media screen and (min-width:770px){
.grid2 {
    display: grid;
    grid-template-columns: 1fr 0.7fr 0.7fr 1fr 2fr;
    grid-template-rows:  repeat(2,auto) ;
    grid-gap:5px;
    grid-template-areas:
    " s9 s11 s11 s12 t2"
    " s10 s11 s11 s13 t2";
	margin-top:5px !important;
    margin-bottom:0px;
}
	
.grid3 {
    display: grid;
    grid-template-columns: 1fr 0.7fr 0.7fr 1fr 2fr;
    grid-template-rows:  repeat(2,200px) ;
    grid-gap:5px;
    grid-template-areas:
    " s9 s11 s11 s12 t2"
    " s10 s11 s11 s13 t2";
	margin-top:5px !important;
    margin-bottom:0px;
}
	
.grid4 {
    display: grid;
    grid-template-columns: 2fr 0.7fr 0.7fr 1fr 1fr;
    grid-template-rows:  repeat(2,200px) ;
    grid-gap:5px;
    grid-template-areas:
    "t2 s9 s11 s11 s12 "
    "t2 s10 s11 s11 s13 ";
	margin-top:5px !important;
    margin-bottom:0px;
}	
}

@media screen and (max-width:770px){
  .grid2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows:  1fr 100px 70px 70px 100px;
      grid-template-areas:
      "t2 t2"
      "s9 s10"
      "s11 s11"
	  "s11 s11"
	  "s12 s13";
      grid-gap:5px;
	margin-top:5px !important;
	  margin-bottom:0px;
  }
	
  .grid3 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows:  1fr 100px 70px 70px 100px;
      grid-template-areas:
	   "t2 t2"		
      "s9 s10"
      "s11 s11"
	  "s11 s11"
	  "s12 s13"
  ;
      grid-gap:5px;
	margin-top:5px !important;
	  margin-bottom:0px;
  }
	
  .grid4 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows:  1fr 100px 70px 70px 100px;
      grid-template-areas:
	   "t2 t2"		
      "s9 s10"
      "s11 s11"
	  "s11 s11"
	  "s12 s13";
      grid-gap:5px;
	margin-top:5px !important;
	  margin-bottom:0px;
  }
}


	
  .text2 {
      grid-area: t2;

  }


  .slika9 {
    grid-area: s9;
    background-size: cover;
     background-position: center;
  }


  .slika10 {
  grid-area: s10;
  background-size: cover;
  background-position: center;
  }

  .slika11 {
  grid-area: s11;
  background-size: cover;
  background-position: center;
  }

  .slika12 {
  grid-area: s12;
  background-size: cover;
  background-position: center;
  }

  .slika13 {
  grid-area: s13;
  background-size: cover;
  background-position: center;
  }