/* ***  canvas 0, canvas SVG ********************************************************************/











/* ***  canvas 0, canvas01, div sa layerima ********************************************************************/





.containerCameleon,
.containerCameleonBG {

    width: 960px;
    height: 591px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    align-items: center;
    position: relative;
    text-align: center;
    border-style: solid;
    border-width: thin;
    z-index: -80;
    display: flexbox;
}

.containerCameleonBG {

    /*PROMENITI ORIGINAL SLIKA*/
    background-size: cover;

    background-repeat: no-repeat;
    background-position: center;
    background-position: top;
    background-size: cover;


    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -100;
}

.containerCameleon img {
    position: absolute;
    top: 0;
    left: 0;
}


.containerCameleonLayers {

    position: absolute;
    top: 0;
    left: 0;

}

.containerCameleonLayers img {
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;


}

/* ***  END canvas0, 01 i div sa Layersima  *****************************************************************************/

/* ***   canvasD   ***************************************************************************************/

.DetaljGrid {

    display: flex;
    flex-direction: row;
    justify-items: center;
    /* ?????  */
    text-align: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    display: grid;

    cursor: pointer;




    /* NE UNOSI SE WIDTH, HEIGHT BROJ KOLONA ITD, UCITAVA IZ Elements i pise u HTML ID styleHTML
  */

}

.AreaWinDetalj {
    /* deo ovoga styla se ispisuje u html direktno width & heigth
  NE UNOSITI WIDTH / HEIGHT, to se ucitava iz Elements ;*/

    float: left;
    text-align: center;
    background-color: transparent;
    object-fit: none;
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;


}

.AreaWinDetalj:hover {
    /* deo ovoga styla se ispisuje u html direktno width & heigth
  NE UNOSITI WIDTH / HEIGHT, to se ucitava iz Elements ;*/
    background-color: #424242;



}

.ThumbZone {
    /* deo ovoga styla se ispisuje u html direktno width & heigth
  NE UNOSITI WIDTH / HEIGHT, to se ucitava iz var ThumbW ThumbH ;*/
    float: left;
    background-color: transparent;
    object-fit: none;
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle
}

.ThumbZone:hover {
    border: 2px solid #21ccf7;
}

/* MASKE ODABIR SEKCIJE SLIKE ***************************************************************************************/
.GalerijaSVG {
    width: 960px;
    height: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    align-items: center;
    position: relative;
    text-align: center;
    z-index: -90;

}

.svg_image,
.svg_image1,
.svg_image2,
.svg_image3,
.svg_image4 {
    fill: #f76c21;
    opacity: 0;
    /*opacity za sve ostale */
    -webkit-opacity: 0;
    /* ov obavezno za apple uredjaje */

}

.svg_image:hover {
    fill: #ffffff;
    opacity: 0.5;
    /*opacity za sve ostale */
    -webkit-opacity: 0.5;
    /* ov obavezno za apple uredjaje*/

    cursor: pointer;
    /*filter: 
    invert(0.5)
    sepia(1)
    hue-rotate(200deg)
    saturate(50)
    brightness(1);*/
}

.svg_image1:hover {
    fill: #21ccf7;
    opacity: 0.5;
    /*opacity za sve ostale */
    -webkit-opacity: 0.5;
    /* ov obavezno za apple uredjaje*/
    cursor: pointer;
}

.svg_image2:hover {
    fill: #f7e921;
    opacity: 0.5;
    /*opacity za sve ostale */
    -webkit-opacity: 0.5;
    /* ov obavezno za apple uredjaje*/
    cursor: pointer;
}

.svg_image3:hover {
    fill: #3100b9;
    opacity: 0.5;
    /*opacity za sve ostale */
    -webkit-opacity: 0.5;
    /* ov obavezno za apple uredjaje*/
    cursor: pointer;
}

.svg_image4:hover {
    fill: #114b41;
    opacity: 0.5;
    /*opacity za sve ostale */
    -webkit-opacity: 0.5;
    /* ov obavezno za apple uredjaje*/
    cursor: pointer;
}




/* MEDIA ****************************************************************************************************************************************************************************************************************************************/





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


    .TopPageNaziv {
        width: 100%;

        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        margin-bottom: 20px;
        align-items: center;
        position: relative;
        text-align: center;

    }

    .GalerijaSVG {

        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        margin-bottom: 0px;
        align-items: center;
        position: relative;
        text-align: center;

    }

    .DisplayDetaljiAndArrows {
        /*Thumbnails display and color arrows outside div*/
        -webkit-tap-highlight-color: transparent;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;

        cursor: pointer;
        margin-left: auto;
        margin-right: auto;
    }

    .containerCameleon,
    .containerCameleonBG,
    .containerCameleonLayers {
        /* CHANGE display: block;*/

        width: 100%;
        margin-left: auto;
        margin-right: auto;
        display: block;


        /*OVO JE BITNO ZA RESIZE UNUTAR DIVA-a*/
    }

    .containerCameleon,
    .containerCameleonBG img {
        display: flex;
        width: 100%;
        position: relative;

    }

    .kuku {

        width: 100%;
        height: 0px;

    }


    .svg_image,
    .svg_image:hover {
        width: 100%;

        position: relative;


    }

    .svg_image:hover {

        fill: #f76c21;
        opacity: 0.5;
        /*opacity za sve ostale */
        -webkit-opacity: 0.5;
        /* ov obavezno za apple uredjaje*/

        cursor: pointer;

    }


}