@font-face {
  font-family: 'thin';
  src: url('assets/fonts/Montserrat-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'regular';
  src: url('assets/fonts/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'bold';
  src: url('assets/fonts/Montserrat-Bold.ttf') format('truetype');
}
*{
    margin: 0;
    border: 0;
    padding: 0;
}
body{
    overflow: hidden;
}
#thanksMain{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000001;
    display: none;
}
#thanks{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 30%;
    height: 30%;
    z-index: 10000002;
    border-radius: 20px;
    border: 1px solid gold;
    background-color: rgba(0,0,0,0.7);
}
#thanksHeader{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 15%;
}
#closeThanks{
    position: absolute;
    right: 0;
    top: 0;
    width: 10%;
    height: 100%;
    cursor: pointer;
}
#closeThanks h1{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: white;
    font-family: thin;
    font-size: 1vw;
}
#hvala{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: white;
    font-family: regular;
    width: 100%;
    font-size: 1vw;
    text-align: center;
    
}
#container{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(assets/FrontPage.jpg);
    background-size: cover;
    background-position: center;
}
#header{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 15%;
    z-index: 600000;
}
#headerShadow{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(assets/gradient.png);
    background-size: cover;
    background-position: center;
    
}
#logo{
    position: absolute;
    left: 3%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 2;
    cursor: pointer;
}
#logo img{
    position: absolute;
    width: 10vw;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.3s all ease-in-out;
}
#logo img:hover{
    opacity: 0.65;
}
#headerMeni{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: inline-block;
    width: 35%;
}
#porijeklo{
    position: absolute;
    left: 0;
    top: 0;
    width: 25%;
    height: 100%;
}
#engNaslov{
    opacity: 0;
    z-index: 4;
}
#engNaslov1{
    opacity: 0;
    z-index: 4;
}
#engNaslov2{
    opacity: 0;
    z-index: 4;
}
#engNaslov3{
    opacity: 0;
    z-index: 4;
}
.naslov{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: white;
    font-size: 0.8vw;
    font-family: thin;
    z-index: 5;
}
.naslov:hover{
    color: gold;
    cursor: pointer;
}
#oNama{
    position: absolute;
    left: 25%;
    top: 0;
    width: 25%;
    height: 100%;
}
#proizvodi{
    position: absolute;
    left: 50%;
    top: 0;
    width: 25%;
    height: 100%;
}
#kontakt{
    position: absolute;
    left: 75%;
    top: 0;
    width: 25%;
    height: 100%;
}
#lang{
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-family: thin;
    width: 10%;
}
#mne{
    color: white;
    font-size: 0.4vw;
    position: absolute;
    right: 30%;
    width: 3vw;
    height: 1.5vw;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    cursor: pointer;
    transition: 0.3s all ease-in-out;
}
#mne h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.buttonBG{
    background-color: rgb(27,70,26);
    border-radius: 20px;
}
#eng{
    color: white;
    font-size: 0.4vw;
    position: absolute;
    right: 0;
    top: 50%;
    width: 3vw;
    height: 1.5vw;
    transform: translateY(-50%);
    cursor: pointer;
    transition: 0.3s all ease-in-out;
}
#eng h1{
    position: absolute;
    top: 50%;
    
    left: 50%;
    transform: translate(-50%,-50%);
}
#kontaktMain{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 500000;
    display: none;
    background-image: url(assets/kontaktBG.png);
    background-size: cover;
    background-position: right;
}
#rightKontakt{
    position: absolute;
    right: 0;
    top: 0;
    width: 70%;
    height: 100%;
    
}
#leftKontakt{
    position: absolute;
    left: 0;
    top: 56%;
    transform: translateY(-50%);
    width: 33%;
    height: 80%;
    z-index: 3;
}
#leftTop{
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 40%;
    color: white;
}
#naslovKontakt{
    font-family: regular;
    letter-spacing: 1px;
    font-size: 0.8vw;
    position: absolute;
    left: 0;
    top: 10%;
    
}
#adrese{
    position: absolute;
    left: 0;
    top: 60%;
    transform: translateY(-50%);
    font-family: regular;
    line-height: 1.2vw;
}
#adrese h1{
    font-size: 1vw;
}
#adrese h2{
    letter-spacing: 2px;
    font-family: thin;
    font-size: 0.6vw;
    color: rgba(255,255,255,0.8);
}
#forma{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 90%;
    width: 100%;
}
#ime{
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    height: 20%;
    font-family: regular;
    color: white;
}
#email{
    position: absolute;
    left: 0;
    height: 20%;
    width: 100%;
    top: 25%;
    font-family: regular;
    color: white;
}
.captionz{
    font-size: 0.8vw;
}
#naslovPoruke{
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    font-family: regular;
    color: white;
}
input{
    background-color: rgba(0,0,0,0);
    font-family: regular;
    border-bottom: 1px solid white;
    width: 85%;
    color: white;
    height: 30px;
    outline: none;
    font-size: 1vw;
    cursor: pointer;
}
textarea{
    width: 85%;
    height: 50px;
    background-color: rgba(0,0,0,0);
    resize: none;
    border-bottom: 1px solid white;
    outline: none;
    color: white;
    font-family: regular;
    font-size: 0.8vw;
}
button{
    width: 90px;
    height: 30px;
    border-radius: 5px;
    font-size: 1vw;
    color: white;
    background-color: rgb(27,70,26);
    font-family: regular;
}
#textPoruke{
    position: absolute;
    left: 0;
    top: 60%;
    width: 100%;
    height: 30%;
    font-family: regular;
    color: white;
}
#submitDugme{
    position: absolute;
    left: 0;
    bottom: 5%;
    width: 30%;
    text-align: center;
    background-color: rgb(27,70,26);
    border-radius: 10px;
}
#leftBot{
    position: absolute;
    right: 0;
    width: 60%;
    height: 60%;
    bottom: 0;
}
label{
    font-family: regular;
}

#popCont{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    z-index: 600000;
    display: none;
}
#closePop{
    position: absolute;
    right: 30%;
    top: 15%;
    color: white;
    font-family: thin;
    transition: 0.2s all ease-in-out;
}

#closePop:hover{
    color: gold;
    cursor: pointer;
}
#tekstPop{
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translate(-50%,-50%);
    width: 40%;
    height: 60%;
    color: white;
    font-family: thin;
}
#tekstPop a{
    color: gold;
}
#popNaslov{
    position: absolute;
    left: 30%;
    top: 15%;
    color: white;
    font-family: thin;
}
input[type=submit]{
    border-bottom: none !important;
}
#porukaNaslov{
    position: absolute;
    left: 0;
    top: 0;
    color: white;
    font-family: regular;
    letter-spacing: 2px;
    font-size: 0.6vw;
}
#body{
    position: absolute;
    top: 15%;
    left: 3%;
    width: 93.5%;
    height: 85%;
}
#bodyLeft{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 36%;
}
#bodyLeftMini{
    height: 80%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-right: 1px solid white;
}
#tekst1{
    color: white;
    font-family: bold;
    position: absolute;
    right: 10%;
    top: 10%;
    text-align: right;
    font-size: 1.3vw;
}
#tekst2{
    color: white;
    font-family: thin;
    font-style: italic;
    text-align: right;
    position: absolute;
    right: 10%;
    letter-spacing: 2px;
    line-height: 1.6vw;
    font-size: 0.9vw;
    top: 40%;
}
#tekst3{
    color: white;
    font-family: thin;
    position: absolute;
    right: 10%;
    top: 60%;
    font-size: 0.5vw;
    letter-spacing: 2px;
}
#bodyRight{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 60%;
    background-image: url(assets/flasa.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#footer{
    position: absolute;
    right: 8%;
    bottom: 5%;
    color: white;
    font-family: regular;
    font-size: 0.6vw;
    letter-spacing: 1px;
    text-align: right;
    z-index: 500000;
}
#followUs{
    position: absolute;
    right: 0%;
    top: 52%;
    width: 15%;
    transform: translateY(-50%);
    transform: rotate(-90deg);
    color: white;
    font-family: regular;
    letter-spacing: 1px;
    color: rgba(255,255,255,1);
    font-size: 1vw;
    z-index: 5000000;
}
#followUs a{
    color: white;
}
#followUs p{
    position: absolute;
    left: 0;
    bottom: 0;
    
}
#fb{
    position: absolute;
    right: 25%;
    bottom: 0;
    cursor: pointer;
    transition: 0.3s all ease-in-out;
}
#fb:hover{
    color: gold;
}
#ig{
    position: absolute;
    right: 10%;
    bottom: 0;
    cursor: pointer;
    transition: 0.3s all ease-in-out;   
}
#ig:hover{
    color: gold;
}
#followUs a:nth-child(){
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
#porMain{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 500000;
    display: none;
}
#porHeader{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 45%;
    background-image: url(assets/Porijeklo.jpg);
    background-position: center;
    background-size: cover;
}
#porBody{
    position: absolute;
    left: 0;
    top: 45%;
    width: 100%;
    height: 140%;
    background-color: white;
}
#porBodyMain{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 65%;
    height: 90%;
}
#porBodyMain2{
    position: absolute;
    width: 100%;
    height: 90%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
}
#top{
    width: 100%;
    height: 48%;
    position: absolute;
    left: 0;
    top: 0;
}
#bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 44%;
}
#topLeft{
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
    background-image: url(assets/Porijeklo_rade.jpg);
    background-size: cover;
}
#topRight{
    position: absolute;
    right: 0;
    top: 0;
    width: 66%;
    height: 100%;
}
#tHeader{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 10%;
    color: rgb(42,61,37);
    font-family: regular;
    font-size: 1.3vw;
    letter-spacing: 2px;
}
#tBody{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 100%;
    color: rgb(178,180,180);
    font-family: regular;
}
#tBody p{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2vw;
}
#readMore{
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: regular;
    font-size: 1.3vw;
}
#bLeft{
    position: absolute;
    left: 0;
    top: 10%;
    width: 30%;
    height: 100%;
    text-align: center;
}
#bLeftTekst{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    text-align: right;
    font-family: regular;
    font-size: 1.2vw;
    color: rgb(178,180,180);
}
#bLeftTekst a{
    color: rgb(42,61,37);
}
#bLeftReadMore{
    text-align: left;
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: regular;
    font-size: 1.3vw;
}
#bRight{
    position: absolute;
    right: 0;
    top: 0;
    width: 66%;
    height: 100%;
}
#video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    object-fit: contain;
}
video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}
#porFooter{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%;
    background-image: url(assets/footer.png);
}
#porFooter img{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 110%;
}
#foot{
    width: 40%;
    height: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-right: 1px solid white;
    border-left: 1px solid white;
}
#footTop{
    position: absolute;
    left: 50%;
    bottom: 40%;
    transform: translateX(-50%);
    color: white;
    font-family: regular;
    font-size: 0.8vw;
}
#footBot{
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%,0%);
    color: white;
    font-family: regular;
    font-size: 0.6vw;
    width: 18%;
}
#footBot a{
    color: white;
}
#proizvodiMain{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 500000;
    overflow-y: scroll;
    opacity: 0;
    
}
#headerProizvodi{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40%;
    background-image: url(assets/Layer%2014.png);
    background-position: center;
    background-size: cover;
}
#proizvodiBody{
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    height: 300%;
    background-color: white;
    overflow: hidden;
}
#voda1{
    position: relative;
    left: 50%;
    width: 80%;
    height: 25%;
    margin-top: 5%;
    transform: translateX(-50%);
}
#vodaSlikaLeft{
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
}
#vodaSlikaLeft img{
    position: absolute;
    right: 10%;
    top: 40%;
    transform: translateY(-50%);
    width: 50vh;
}
#vodaTekstRight{
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
}
#tekstovi{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 80%;
}
#naslovVode{
    position: absolute;
    left: 0;
    top: 13%;
    font-family: thin;
    line-height: 1.3vw;
    font-size: 1.4vw;
}
#naslovVode h1{
    letter-spacing: 1px;
}
#obojen{
    color: rgba(0,0,0,0.4);
    font-family:  thin;
    margin-left: 2%;
    letter-spacing: 2px;
    position: absolute;
    left: 3.7%;
    top: 150%;
}
#vodaTekstMain{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: rgba(0,0,0,0.4);
    width: 60%;
    font-size: 1.2vw;
    font-family: regular;
}
#voda2{
    position: relative;
    margin-top: -5%;
    left: 50%;
    top: 0;
    width: 80%;
    height: 25%;
    transform: translateX(-50%);
}
#vodaSlikaRight{
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
}
#vodaSlikaRight img{
    position: absolute;
    left: 0%;
    top: 40%;
    transform: translateY(-50%);
    width: 40vh;
}
#vodaTekstLeft{
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
}
#tekstovi{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 80%;
}
#tekstoviLeft{
    position: absolute;
    text-align: right;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 80%;
    color: white;
    background-color: white;
}
#naslovVodeLeft{
    position: absolute;
    right: 10%;
    top: 13%;
    font-family: thin;
    line-height: 1.3vw;
    font-size: 1.4vw;
    color: black;
}
#obojenLeft{
    color: rgba(0,0,0,0.4);
    font-family:  thin;
    margin-left: 2%;
    letter-spacing: 2px;
    top: 150%;
}
#vodaTekstMainLeft{
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    color: rgba(0,0,0,0.4);
    width: 60%;
    font-size: 1.2vw;
    font-family: regular;
}
#voda3{
    position: relative;
    left: 50%;
    width: 80%;
    height: 25%;
    transform: translateX(-50%);
}
#oNamaMain{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 500000;
    display: none;
}
#oNamaHeader{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 45%;
    background-image: url(assets/oNamaBG.png);
    background-position: center;
    background-size: cover;
}
#oNamaFooter{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 14%;
    z-index: 2;
    background-image: url(assets/footer.png);
}
#oNamaFooter img{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 110%;
}
#proFooter{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-top: 5%;
    height: 5%;
    z-index: 2;
    background-image: url(assets/footer.png);
}
#proFooter img{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 110%;
}
#oNamaBody{
    position: absolute;
    left: 0;
    top: 45%;
    width: 100%;
    height: 100%;
    background-color: white;
}
#oNamaTopBody{
    position: relative;
    left: 50%;
    width: 65%;
    height: 100%;
    transform: translateX(-50%);
}
#oNamaLeft{
    width: 30%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
#oNamaRight{
    position: absolute;
    right: 0;
    top: 12%;
    width: 65%;
    height: 65%;
    background-image: url(assets/fabrika.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#naslovOnama{
    position: absolute;
    text-align: right;
    font-size: 1.4vw;
    right: 0;
    top: 10%;
    color: rgb(42,61,37);
    font-family: regular;
    width: 100%;
}
#tekstoNama{
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translateY(-50%);
    font-family: regular;
    color: rgb(178,180,180);
    font-size: 1vw;
    text-align: right;
}

#tekstoNama a{
    color: rgb(42,61,37);
}
#readMoreOnama{
    position: absolute;
    left: 0;
    bottom: 0;
    font-family: regular;
    transition: 0.2s all ease-in-out;
}
#readMoreOnama:hover{
    cursor: pointer;
    color: gold;
}
#frame{
    display: none;
}