html {
  font-size: 16px;
  font-family: "Arial"
}

body {
    color: black;
    background-color: white;
}

.mainDiv {
    display: block;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.titleDiv {
    display: block;
    position: relative;
    padding-top: 0;
    padding-right: calc(10px + (20 - 10) * ((100vw - 300px) / (1920 - 300)));
    padding-bottom: 0;
    padding-left: calc(10px + (20 - 10) * ((100vw - 300px) / (1920 - 300)));
    width: calc(100% - 2 * (10px + (20 - 10) * ((100vw - 300px) / (1920 - 300))));
    font-size: calc(16px + (40 - 16) * ((100vw - 300px) / (1920 - 300)));
    text-align: center;
    font-weight: bold;
    background-color: transparent;
    z-index: 0;
}

.prviRed {
    display: block;
    position: relative;
    top: calc(15px + ((100vw - 300px) / (1920 - 300)));
    left: 0;
    width: 100%;
    height: calc(104px + (400 - 104) * ((100vw - 300px) / (1920 - 300)));
    background-color: transparent;
}

.slikaGrbDiv {
    display: block;
    position: relative;
    top: calc(0px + ((100vw - 300px) / (1920 - 300)));
    left: calc(5px + (200 - 5) * ((100vw - 300px) / (1920 - 300)));
    width: calc(78px + (300 - 78) * ((100vw - 300px) / (1920 - 300)));
    height: calc(104px + (400 - 104) * ((100vw - 300px) / (1920 - 300)));
    background-color: transparent;
}

.slikaGrbImg {
    width: calc(78px + (300 - 78) * ((100vw - 300px) / (1920 - 300)));
    height: calc(104px + (400 - 104) * ((100vw - 300px) / (1920 - 300)));
    object-fit: scale-down;
}

.tekstDiv {
    display: block;
    position: relative;
    top: calc(-104px - (400 - 104) * ((100vw - 300px) / (1920 - 300)));
    left: calc(100% - ((5px + (200 - 5) * ((100vw - 300px) / (1920 - 300))) + (186px + (1150 - 186) * ((100vw - 300px) / (1920 - 300)))));
    width: calc(186px + (1150 - 186) * ((100vw - 300px) / (1920 - 300)));
    height: calc(104px + (400 - 104) * ((100vw - 300px) / (1920 - 300)));
    font-size: calc(10px + (18 - 10) * ((100vw - 300px) / (1920 - 300)));
    overflow: auto;
    background-color: transparent;
}

.medjuRed {
    display: block;
    position: relative;
    text-align: center;
    top: calc(25px + ((100vw - 300px) / (1920 - 300)));
    left: 0;
    width: 100%;
    height: calc(28px + (60 - 28) * ((100vw - 300px) / (1920 - 300)));
    background-color: transparent;
}

.dugmePrvo {
    display: block-inline;
    position: relative;
    left: calc(118 * ((100vw - 300px) / (1920 - 300)));
    width: calc(85px + (160 - 85) * ((100vw - 300px) / (1920 - 300)));
    height: calc(26px + (60 - 26) * ((100vw - 300px) / (1920 - 300)));
    font-size: calc(10px + (18 - 10) * ((100vw - 300px) / (1920 - 300)));
    border: 1px solid black;
    border-radius: calc(13px + (30 - 13) * ((100vw - 300px) / (1920 - 300)));
    color: black;
    background-color: transparent;
    cursor: pointer;
}

.dugme {
    display: block-inline;
    position: relative;
    left: calc(118 * ((100vw - 300px) / (1920 - 300)));
    width: calc(85px + (160 - 85) * ((100vw - 300px) / (1920 - 300)));
    height: calc(26px + (60 - 26) * ((100vw - 300px) / (1920 - 300)));
    font-size: calc(10px + (18 - 10) * ((100vw - 300px) / (1920 - 300)));
    border: 1px solid black;
    border-radius: calc(13px + (30 - 13) * ((100vw - 300px) / (1920 - 300)));
    color: black;
    background-color: transparent;
    cursor: pointer;
}

.drugiRed {
    display: block;
    position: relative;
    top: calc(35px + ((100vw - 300px) / (1920 - 300)));
    left: 0;
    width: 100%;
    height: calc(104px + (400 - 104) * ((100vw - 300px) / (1920 - 300)));
    background-color: transparent;
}

.slikaTepicDiv {
    display: block;
    position: relative;
    top: calc(0px + ((100vw - 300px) / (1920 - 300)));
    left: calc(100% - ((5px + (200 - 5) * ((100vw - 300px) / (1920 - 300))) + (78px + (300 - 78) * ((100vw - 300px) / (1920 - 300)))));
    width: calc(78px + (300 - 78) * ((100vw - 300px) / (1920 - 300)));
    height: calc(104px + (400 - 104) * ((100vw - 300px) / (1920 - 300)));
    background-color: transparent;
}

.slikaTepicImg {
    width: calc(78px + (300 - 78) * ((100vw - 300px) / (1920 - 300)));
    height: calc(104px + (400 - 104) * ((100vw - 300px) / (1920 - 300)));
    object-fit: scale-down;
}

.slikaZastavaDiv {
    display: block;
    position: relative;
    top: calc(-104px - (400 - 104) * ((100vw - 300px) / (1920 - 300)));
    left: calc(5px + (200 - 5) * ((100vw - 300px) / (1920 - 300)));
    width: calc(138.67px + (533.33 - 138.67) * ((100vw - 300px) / (1920 - 300)));
    height: calc(104px + (400 - 104) * ((100vw - 300px) / (1920 - 300)));
    background-color: transparent;
}

.slikaZastavaImg {
    width: calc(138.67px + (533.33 - 138.67) * ((100vw - 300px) / (1920 - 300)));
    height: calc(104px + (400 - 104) * ((100vw - 300px) / (1920 - 300)));
    object-fit: scale-down;
}