/*
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Slab', serif;
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background: url(img/pattern.png) #F8F3E7;
    background-repeat: repeat;
    background-size: contain;
    background-position: center;
}

.nav {
    width: 100%;
    background: #FEFBF5;
    border-bottom: 1px solid #127248;
}

.navwrap {
    width: 100%;
    max-width: 1726px;
    margin: 0 auto;
    display: flex;
    padding: 1rem;
}

.logowrap {
    width: 30%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logowrap a{
    width: 100%;
}

.logo {
    width: 100%;
    max-width: 280px;
}

.prijavite_btn {
    width: 169px;
}

.menuwrap {
    width: 70%;
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: space-evenly;
    padding: 1rem;
}

.menuitem {
    margin-left: 1rem;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    font-size: .9rem;
    position: relative;
}

.finalisti-li {
    list-style-type: none;
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.finalisti-li a{    
    color: #D5664E !important;
    font-family: Roboto;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

.finalisti-ul {
    position: absolute;
    display: none; /* Hide by default */
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    background-color: #FEFBF5;
}

.menuitem:hover .finalisti-ul {
    display: flex; /* Show on hover */
    opacity: 1;
}

.finalisti-ul {
    transition: opacity 0.2s ease-in-out;
}

.finalist{
    padding-top: .4rem;
}

.finalisti{
    font-family: 'Roboto', sans-serif;
    max-width: 960px;
    margin: 0 auto;
    padding-top: 6rem;
    font-size: 1.3rem;
}

.redbtn{
    border: 1px solid #D5664E;
    border-radius: 5px;
    color: #D5664E;
    padding: .5rem 1rem;
    transition: all .4s ease-in-out;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    background: none;
}

.redbtn:hover{
    background: #D5664E;
    color: #fff !important;
}



.menuimg {
    background: #FAAD3C;
    color: #fff;
    border-radius: 6px;
    padding: .3rem .6rem;
    position: relative;
    z-index: 2;
    width: 145px;
    margin-right: 40px;
}

.menuimgicon {
    width: 100px;
    position: absolute;
    right: -54px;
    top: 0;
    animation: lelu 2s forwards infinite;
    transform-origin: left bottom;
}

@keyframes lelu {
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(6deg);
    }
    100%{
        transform: rotate(0deg);
    }
}


.shareitem {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sharealica {
    vertical-align: middle;
    padding-left: .7rem;
}


.heroimg {
    width: 100%;
}

.link{
    color: #117349;
    text-decoration: underline;
}

.content {
    width: 100%;
    max-width: 1726px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.title {
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-size: 6rem;
    line-height: 1.2;
    padding-top: 4rem;
    font-weight: 900;
    padding-bottom: 3rem;
}

.lead {
    font-family: 'Roboto', sans-serif;
    padding-top: 2rem;
    text-align: left;
    line-height: 1.5;
    font-size: 1.3rem;
}

.pitanje{
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 1.4rem;
    padding-top: 10rem;
}

.pitanje a{
    color: #117349;
}

.finallead{
    font-family: 'Roboto', sans-serif;
    text-align: left;
    line-height: 1.2;
    font-size: 1.2rem;
    padding-top: 1rem;
    min-height: 6rem;
}

.prijavitebtnbig {
    display: block;
    margin: 3rem auto 0 auto;
    width: 220px;
    padding: 1rem .6rem;
    text-align: center;
    font-size: 1.2rem;
}

.oprojektu {
    display: block;
    width: 90%;
    max-width: 640px;
    margin: 6rem auto 0 auto;
}

.nagrada {
    display: block;
    width: 90%;
    max-width: 540px;
    margin: 0 auto;
}

.inagrada {
    display: block;
    width: 90%;
    max-width: 120px;
    margin: 5rem auto;
}

.prijavise {
    display: block;
    width: 90%;
    max-width: 840px;
    margin: 0 auto;
    padding-top: 6rem;
}

.mtminus {
    margin-top: -2.2rem;
}

.mtminushalf {
    margin-top: -2.3rem;
}

.mt40 {
    margin-top: 40vh;
    position: relative;
    z-index: 99;
}

.bg1 {
    /* background: url();
    background-position: right 10vh;
    background-size: 45vh;
    background-repeat: no-repeat;
    min-height: 90vh; */
    position: relative;
    min-height: 5vh;
}

.side1{
    position: absolute;
    right: 0;
    width: 45vh;
}

.bg2 {
    background: url(img/side2.png);
    background-position: left 20vh;
    background-size: 45vh;
    background-repeat: no-repeat;
    min-height: 90vh;
}

.mw50 {
    width: 80%;
    max-width: 460px;
    margin: 0 auto;
}

.mw80{
    width: 80%;
    max-width: 720px;
}

.subtitle {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 1.8rem;
    text-align: left;
}

.pt0 {
    padding-top: 0;
}

.bbot {
    width: 80%;
    display: block;
    margin: 12rem auto 0 auto;
    max-width: 680px;
}

.sponsorsblock {
    margin-top: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #127248;
    background: #FEFBF5;
}

.secondary{
    margin-top: 0;
    border-top: none;
    padding-bottom: 2rem;
}

.sponsor {
    margin-top: 4rem;
    width: 20%;
}

.spotitle {
    font-family: 'Roboto', sans-serif;
    color: #117349;
    font-weight: 300;
    font-size: 1rem;
    text-align: center;
    padding-bottom: 1rem;
}

.frmsub {
    font-family: 'Roboto', sans-serif;
    color: #D5664E;
    text-align: center;
    font-size: 1.6rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.spoimage {
    display: block;
    margin: 0 auto;
}

.spliter {
    width: 100%;
}

.mt5 {
    margin-top: 5rem;
}

.mt7{
    margin-top: 7rem;
}

.dobitniciimg{
    width: 100%;
    max-width: 705px;
}

.forma {
    margin: 6rem auto 0 auto;
    width: 90%;
    max-width: 720px;
}

.frmblock {
    padding-top: 1rem;
}

.labela {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    padding-bottom: .6rem;
}

.textbox,
.textareabox {
    width: 100%;
    display: block;
    margin: 0 auto;
    padding: .8rem;
    background: none;
    border: 1px solid #117349;
    border-radius: 6px;
    color: #117349;
    font-size: 1.1rem;
}

.textbox:focus,
.textareabox:focus {
    outline: none;
    border: 1px solid #FAAD3C;
}

.boxerror {
    border: 1px solid red;
}

.error {
    color: red;
    padding-top: .6rem;
    font-family: 'Roboto', sans-serif;
}

.spacearound {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}

.spaceblock {
    width: 40%;
}

.row {
    display: flex;
    flex-direction: row;
    padding-top: .6rem;
}

.rowblock {
    display: flex;
    flex-direction: row-reverse;
    width: 30%;
    padding-right: 1rem;
    justify-content: flex-end;
    align-items: baseline;
}

.checker {
    margin-right: .4rem;
    zoom: 1.8;
}

.labelaradio {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: 'Roboto', sans-serif;
    margin-left: 10px;
}

.labelaradio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: -8px;
    left: -10px;
    height: 36px;
    width: 36px;
    border-radius: 40%;
    border: 1px solid #117349;
}

.labelaradio:hover input~.checkmark {
    background: #117349;
}

.labelaradio input:checked~.checkmark {
    background-color: #117349;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.labelaradio input:checked~.checkmark:after {
    display: block;
}

.labelaradio .checkmark:after {
    top: 7px;
    left: 7px;
    width: 20px;
    height: 20px;
    border-radius: 40%;
    background: #F8F3E7;
}

::placeholder {
    color: #117349;
    opacity: 1;
    font-size: .8rem;
}

.sendbtn {
    color: #D5664E;
    width: 90%;
    max-width: 220px;
    display: block;
    cursor: pointer;
    border: 1px solid #D5664E;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
    padding: 1rem;
    font-size: 26px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 3rem;
    font-weight: 700;
    margin-right: 0;
    background: none;
}

.btnblock{
    display: flex;
    justify-content: flex-end;
}

#hvala {
    font-family: 'Roboto', sans-serif;
    color: #117349;
    text-align: center;
    font-size: 1.5rem;
    margin-top: 4rem;
}

/*colors*/
.zelena {
    color: #117349;
}

.zelena_light {
    color: #A9CF38;
}

.beige {
    color: #F8F3E7;
}

.orange {
    color: #D5664E;
}

.bold {
    font-weight: 900;
}

.menuitem a,
.redbtn a {
    color: #117349;
    text-decoration: none;
}


.redbtn:hover > a{
    color: #fff;
}

.menuimg a {
    color: #fff;
    text-decoration: none;
}


.mobnav {
    display: none;
}

.mobmenu {
    display: none;
}

.nounder{
    text-decoration: none;
}

.hero{
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.info{
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    background: url(img/medalja-logo.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 2rem 0;
}

.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.mxauto{
    margin: 0 auto;
}

.txc{
    text-align: center;
}

.txr{
    text-align: right;
}

.mt3{
    margin-top: 3rem;
}

.hands{
    margin-top: 4rem;
    width: 100%;
}

.griddual{
    display: flex;
    padding: 1rem;
}

.block50{
    width: 50%;
}

.block40{
    width: 40%;
}

.block60{
    width: 60%;
}

.subbox{
    display: flex;
    align-items: baseline;
}

.arrowo{
    padding-right: 1rem;
}

.parent{
    width: 100%;
    height: 700px;
    overflow: hidden;
}

.dobitniciimg{
    width: 100%;
    height: 100%;
    background-color: black;
    background-image: url("img/dobitnici.png");
    background-position: center;
    background-size: cover;
    overflow: hidden;
    transition: all .4s ease-in-out;
}

.dobitniciimg:hover{
    transform: scale(1.2);
}

.dobitniciinfo{
    padding-top: 1rem;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
}

.fotogrid{
    display: flex;
    margin: 4rem auto;
    align-items: center;
    justify-content: space-around;
}

.picitem{
    width: calc(33% - 30px);
}

.finalsgrid{
    display: flex;
    padding: 1rem;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}

.finalitem{
    width: 25%;
    text-decoration: none;
    color: unset;
}

.finalpic{
    width: 100%;
}

.finaltitle{
    font-family: 'Roboto Slab', serif;
    font-size: 1.4rem;
    padding-top: .6rem;
}

.dodjela1{
    background: url(img/slider/slika-dodjela.png);
    height: 357px;
    transition: all .4s ease-in-out;
}

.dodjela2{
    background: url(img/slider/slika-dodjela-1.png);
    height: 357px;
    transition: all .4s ease-in-out;
}


.dodjela3{
    background: url(img/slider/slika-dodjela-2.png);
    height: 357px;
    transition: all .4s ease-in-out;
}

.picitem{
    overflow: hidden;
    height: 357px;
}

.dodjela1:hover,
.dodjela2:hover,
.dodjela3:hover{
    transform: scale(1.3);
}

.finalimg{
    position: relative;
    font-size: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all .4s ease-in-out;
}

.finalpic{
    transition: all .4s ease-in-out;
}

.finaltxtlead{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 1.2rem;
    color: #fff;
    background: #D5664E;
    padding: .5rem 0;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    width: 100%;
    transition: all .4s ease-in-out;
    transform: translateX(-100%);
    opacity: 0;
}

.finalimg:hover > .finaltxtlead{
    width: 100%;
    transform: translateX(0);
    opacity: 1;
}

.finalimg:hover > .finalpic{
    transform: scale(1.2);
}

.overlay{
    background: #D5664E;
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: all .4s ease-in-out;
    z-index: 10;
}

.finalimg:hover > .overlay{
    opacity: .2;
}

a{
    text-decoration: unset;
}


@media (max-width: 1651px) {
    .content{
        width: 90%;
    }
}

@media (max-width: 1380px) {
    html {
        font-size: 90%;
    }
    .content{
        width: 90%;
    }
    .title {
        font-size: 4rem;
    }
    .logowrap{
        width: 20%;
    }
    .menuwrap{
        width: 80%;
    }
}

@media (max-width: 980px) {
    .menuwrap {
        display: none;
    }

    .logowrap {
        margin: 0 auto;
        width: 55%;
    }

    .title {
        font-size: 2.5rem;
    }

    .bg1,
    .bg2 {
        background: none;
        height: auto;
        min-height: auto;
        margin-top: 3rem;
    }

    .content {
        width: 100%;
        margin: 0 auto;
    }

    .prijavitebtnbig {
        width: 260px;
    }

    .mtminus {
        margin-top: -2.5rem;
    }

    .nagrada {
        margin-top: 4rem;
    }

    .inagrada {
        max-width: 80px;
    }

    .forma {
        width: 100%;
    }

    .spaceblock,
    .rowblock {
        width: 100%;
    }

    .spacearound,
    .row {
        flex-direction: column;
    }

    .rowblock {
        margin-top: 1rem;
    }

    .nav {
        padding-top: 4rem;
    }

    .mobnav {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 4rem;
        z-index: 999;
        background: #117349;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

    .barholder {
        padding-right: 1rem;
        padding-bottom: .5rem;
    }

    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #fff;
        margin: 6px 0;
        transition: all .4s ease-in-out;
    }


    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 6px);
    }


    .change .bar2 {
        opacity: 0;
    }

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -8px);
    }

    .mobmenu {
        position: fixed;
        right: -100%;
        top: 0;
        padding-top: 6rem;
        width: 100%;
        height: 100%;
        background: #117349;
        transition: all .4s ease-in-out;
        display: block;
        z-index: 99;
    }

    .toggle {
        transform: translateX(-100%);
    }

    .mobwrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        list-style: none;
    }

    .mobitem {
        color: #fff;
        text-decoration: none;
        font-family: 'Roboto', sans-serif;
        text-transform: uppercase;
        margin-top: 1rem;
    }

    .mobitem a {
        color: #fff;
        text-decoration: none;
        font-family: 'Roboto', sans-serif;
        text-transform: uppercase;
    }
    .side1{
        display: none;
    }
    .medtext{
        max-width: 320px;
    }
    .griddual{
        flex-direction: column;
        padding: 0;
    }
    .block60{
        width: 100%;
    }
    .block40,
    .mw80{
        width: 100%;
    }
    .content{
        width: 90%;
    }
    .mt5{
        margin-top: 5rem;
    }
    .dobitniciimg{
        margin-top: 3rem;
        background-position: 60% center;
    }
    .fotogrid,
    .finalsgrid{
        flex-direction: column;
        padding: 0;
    }
    .picitem,
    .finalitem{
        width: 100%;
        margin: 1rem auto;
    }
    .sponsorsblock{
        flex-direction: column;
    }
    .sponsor{
        width: 100%;
    }
}