.gallery {
    width: 80%;

    margin: 50px 10%;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 sloupce */
    grid-template-rows: repeat(3, 1fr);
    /* 3 řádky */
    grid-gap: 10px;
    /* mezera mezi obrázky */

}


.image-container {
    position: relative;
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    width: 100%;
    height: auto;
}

.image-container img {
    width: 100%;
    height: 100%;
}

.image-container.large {
    grid-column: span 2;
    /* zabírá 2 sloupce */
    grid-row: span 2;
    /* zabírá 2 řádky */
}

.image-container.small {
    grid-column: span 1;
    /* zabírá 1 sloupec */
    grid-row: span 1;
    /* zabírá 1 řádek */
}

.gallery-image {
    width: 200px;
    height: 200px;
    transition: opacity 1.5s ease;
}

.gallery-image1 {
    width: 400px;
    height: 400px;
    transition: opacity 1.5s ease;
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: white;
    display: none;
    pointer-events: none;
}


.image-container:hover .gallery-image {
    opacity: 0.1;
}

.image-container:hover .search-icon {
    display: block;
}

/* Styly pro plnoobrazovkový režim */
#fullscreen-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    text-align: center;
    padding-top: 50px;
}

#fullscreen-view img {
    max-width: 90%;
    max-height: 80%;
}

#close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    cursor: pointer;
}

#prev,
#next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 30px;
}

#prev {
    left: 200px;
}

#next {
    right: 200px;
}





.grid-container2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 0px;
    margin: 50px 4px;
}

.grid-container1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 0px;
    margin: 50px 4px;
}

.nadpisVanovy {
    margin-top: 30px;
}

.grid-item1 {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: 25vw;
    margin-bottom: 5px;
    position: relative;
}
.grid-container1 a {
    text-decoration: none;
}

.grid-item1 img {
    width: 150px;
    margin: 5px;
    height: auto;
}
/*********************vanovy****************/





.grid-container1 .westernVanovy1 {
    background-image: url(../img/westernVanovy1.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-item1 p {
    padding: 40px 20px 20px 40px;
    text-align: center;
    
}

.grid-container1 .westernVanovy4 {
    background-image: url(../img/westernVanaPist.png);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-item1 .westernVanovy3 p {
    padding-top: 80px;
}

.grid-container1 .westernVanovy5 {
    background-image: url(../img/westernPera.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernVanovy8 {
    background-image: url(../img/westernNoha.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernVanovy9 {
    background-image: url(../img/westernVana.JPG);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernVanovy10 {
    background-image: url(../img/DSC_1051.JPG);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
/*****************vanovy-tridem***************/
.grid-container1 .westernVanovyTridem1 {
    background-image: url(../img/vanovyTridem\ \(4\).JPG);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-item1 p {
    padding: 40px 20px 20px 40px;
    text-align: center;
    
}

.grid-container1 .westernVanovyTridem4 {
    background-image: url(../img/westernVanovyTridemPist.JPG);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-item1 .westernVanovy3 p {
    padding-top: 80px;
}

.grid-container1 .westernVanovyTridem5 {
    background-image: url(../img/westernPera.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernVanovy8 {
    background-image: url(../img/westernNoha.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernVanovyTridem9 {
    background-image: url(../img/vanovyTridem\ \(8\).JPG);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernVanovyTridem10 {
    background-image: url(../img/vanovyTridem\ \(12\).JPG);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

/********************************/
.tabulkaWestern td {
  
    border: 1px solid rgb(231, 226, 226);
    padding: 10px 0;
}

.tabulkaWestern th {
    border: 1px solid rgb(231, 226, 226);
    padding: 10px 0;
}

.tabulkaWestern {
    font-size: 12px;
    border: 1px solid rgb(231, 226, 226);
    width: 80%;
    margin: 50px 10%;

}

.nadpisTabulka {
    margin-top: 30px;
}

.vybava {
    width: 80%;
    margin: 50px 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
   
    background-color: rgb(178, 176, 176);
    padding: 20px;
}
.vybava h3{
    color: white;
}

.vybava ul {
    margin: 20px;
}

.vybava .standardniVybava,
.vybava .priplatkovaVybava {
    padding: 10px 20px;
    margin-right: 60px;
    color: white;
}

.vybava ul li {
    padding: 5px 0;
    font-size: 14px;
    color: white;
}

.videoProdukt {
    width: 80%;
    margin: 50px 10%;
    display: flex;
    flex-direction: row;

    justify-content: center;
}

.videoProdukt iframe {
    margin: 0 20px;
}



/************prepravnik************/

.grid-container1 .westernPrepravnik1 {
    background-image: url(../img/westernPrepravnik1.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernPrepravnik4 {
    background-image: url(../img/westernPrepravnikHydraulika.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernPrepravnik5 {
    background-image: url(../img/westernPrepravnikBlatnik.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernPrepravnik8 {
    background-image: url(../img/westernPrepravnikPodlaha.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernPrepravnik9 {
    background-image: url(../img/westernPrepravnikTicho.png);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
.grid-container1 .westernPrepravnik12 {
    background-image: url(../img/westernDTV.JPG);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
.grid-container1 .westernPrepravnik13 {
    background-image: url(../img/westernDTVPistnice.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
.grid-container1 .westernPrepravnik16 {
    background-image: url(../img/westernDTVKola.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
.grid-container1 .westernPrepravnik17 {
    background-image: url(../img/westernDTVSpara.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
.grid-container1 .westernPrepravnik20 {
    background-image: url(../img/westernDTVBarvy.JPG);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
/******baliky*************/

.grid-container1 .westernbaliky1 {
    background-image: url(../img/westernBaliky2.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernbaliky4 {
    background-image: url(../img/westernBalikyStabilita.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernbaliky5 {
    background-image: url(../img/westernBalikyHardox.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernbaliky8 {
    background-image: url(../img/westernBalikyPera.jpeg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernbaliky9 {
    background-image: url(../img/westernBalikyTyc-tandem.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernbaliky12 {
    background-image: url(../img/westernBalikyNaraznik.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernbaliky13 {
    background-image: url(../img/westernBalikyUpinani.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

/******balíky tříosý*************/
.grid-container1 .westernBalikyTriosy1 {
    background-image: url(../img/6.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernBalikyTriosy4 {
    background-image: url(../img/westernBalikyTriosyCela.png);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernBalikyTriosy5 {
    background-image: url(../img/westernBalikyOj.jpeg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernBalikyTriosy8 {
    background-image: url(../img/westernBalikyPera.jpeg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernBalikyTriosy9 {
    background-image: url(../img/westernBalikyTyc-tandem.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernBalikyTriosy12 {
    background-image: url(../img/westernBalikyTriosyBarvy.png);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernBalikyTriosy13 {
    background-image: url(../img/westernBalikyTriosyBarvy.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
/**************safe-lock*************/

.grid-container1 .westernSafeLock1 {
    background-image: url(../img/safeLockA.png);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
.grid-container1 .westernSafeLock4 {
    background-image: url(../img/SR\ -\ WFRD.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
.grid-container1 .westernSafeLock5 {
    background-image: url(../img/safeLock1.png);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
.grid-container1 .westernSafeLock8 {
    background-image: url(../img/SR\ -\ WFRD\ 2.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

/****prekladaci***********/

.grid-container1 .westernPrekladaci1 {
    background-image: url(../img/westernPrekladacHlavni.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernPrekladaci4 {
    background-image: url(../img/westernPrekladacSnek.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernPrekladaci5 {
    background-image: url(../img/westernPrekladaciOj.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

/*************bantam***********/
.grid-container1 .westernBantam1 {
    background-image: url(../img/westernBantamHlavni.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernBantam4 {
    background-image: url(../img/westernBantamBocnice.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernBantam5 {
    background-image: url(../img/westernBantamBaliky.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernBantam8 {
    background-image: url(../img/westernBantamStrany.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernBantam9 {
    background-image: url(../img/westernBantamOj.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernBantam12 {
    background-image: url(../img/westernBantamPruziny.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernBantam13 {
    background-image: url(../img/westernBantamZpracovani.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

/********podval***********/
.grid-container1 .westernPodval1 {
    background-image: url(../img/westernPodvalHlavni.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernPodval4 {
    background-image: url(../img/westernPodvalTezko.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernPodval5 {
    background-image: url(../img/westernPodvalaa.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernPodval8 {
    background-image: url(../img/westernPodvalSirka.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

/******cisterna**********/

.grid-container1 .westernCisterna1 {
    background-image: url(../img/westernCisterna9.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernCisterna4 {
    background-image: url(../img/westernCisternaVnitrek.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernCisterna5 {
    background-image: url(../img/westernCisternaPera.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernCisterna8 {
background-image: url(../img/westernCisternaZpracovani.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernCisterna9 {
    background-image: url(../img/8LS.JPG);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
/******************cisterny2******************/

.grid-container1 .westernCisternaDvou1 {
    background-image: url(../img/cisternaDvou\ \(1\).JPG);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernCisternaDvou4 {
    background-image: url(../img/westernCisternaVnitrek.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernCisternaDvou5 {
    background-image: url(../img/westernCisternaPera.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernCisternaDvou8 {
background-image: url(../img/cisternaDvou\ \(5\).JPG);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernCisternaDvou9 {
    background-image: url(../img/cisternaDvou\ \(9\).JPG);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

/******************cisterny tridem*******************/

.grid-container1 .westernCisternaTridem1 {
    background-image: url(../img/westernCisternaHlavni.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernCisternaTridem4 {
    background-image: url(../img/westernCisternaVnitrek.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernCisternaTridem5 {
    background-image: url(../img/westernCisternaPera.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernCisternaTridem8 {
background-image: url(../img/westernCisterna5.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernCisternaTridem9 {
    background-image: url(../img/westernCisterna6.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}


/*********rozmetadlo jednonápravové************/

.grid-container1 .westernRozmetadlo1 {
    background-image: url(../img/westernRozmetadlo3.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernRozmetadlo4 {
    background-image: url(../img/rozmetadloRetezy.png);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernRozmetadlo5 {
    background-image: url(../img/westernRozmetadloOj.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernRozmetadlo8 {
    background-image: url(../img/westernBantamPruziny.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernRozmetadlo9 {
    background-image: url(../img/westernRozmetadloKvalitni.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernRozmetadlo12 {
    background-image: url(../img/westernRozmetadloZakryti.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
.grid-container1 .westernRozmetadlo14 {
    background-image: url(../img/aktualita6.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

/***************rozmetadlo tandem****************/


.grid-container1 .westernRozmetadloDvou1 {
    background-image: url(../img/rozmetadloA.png);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernRozmetadloDvou4 {
    background-image: url(../img/rozmetadloRetezy.png);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
.grid-container1 .westernRozmetadloDvou5 {
    background-image: url(../img/westernRozmetadloOj.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
.grid-container1 .westernRozmetadloDvou9 {
    background-image: url(../img/rozmetadloDvouA.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
.grid-container1 .westernRozmetadloDvou12 {
    background-image: url(../img/rozmetadloSvetla.png);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}
.grid-container1 .westernRozmetadloDvou14 {
    background-image: url(../img/aktualita6.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}


/*****************dumpery**************/
.grid-container-dumpery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(1, 1fr);
    gap: 4px;
    width: 80%;
    margin: 10px 10%;

}

.grid-container3 .westernDumpery1 {
    background-image: url(../img/western10.webp);
    background-size: cover;
    background-size: 100%;
    background-position: center;
    transition: background-size 5s ease;
    overflow: hidden;
}

.grid-container3 .westernDumpery1:hover {
    background-size: 110%;
    cursor: pointer;
}

.grid-container3 .westernDumpery2 {
    background-image: url(../img/western11.jpeg);
    background-size: cover;
    background-size: 100%;
    background-position: center;
    transition: background-size 5s ease;
    overflow: hidden;
}

.grid-container3 .westernDumpery2:hover {
    background-size: 110%;
    cursor: pointer;
}

/*************dumperLehky*************/
.grid-container1 .westernDumperLehky1 {
    background-image: url(../img/westernDumperLehkyHlavni.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernDumperLehky4 {
    background-image: url(../img/westernDumperLehkyZpracovani.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

/**********dumper těžký********/

.grid-container1 .westernDumperTezky1 {
    background-image: url(../img/westernDumperTezkyHlavni.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernDumperTezky4 {
    background-image: url(../img/westernDumpetTezkyZpracovani.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}

.grid-container1 .westernDumperTezky5 {
    background-image: url(../img/westernDumparTezkyGumy.jpg);
    background-size: cover;
    background-size: 100%;
    background-position: center;

    overflow: hidden;
}