html {
    scroll-behavior: smooth;
  }

body{
    font-family: franklin-gothic-urw, sans-serif;
font-size: 18px;
max-width: 100vw;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

header{
    background-color: #FE8371;
    position: relative;
    min-height: unset;
    background: url('../img/tocka1.svg') no-repeat, url('../img/tocka2.svg') no-repeat,url('../img/bottom-bijeli.svg') no-repeat, linear-gradient(180deg, rgba(254,131,113,1) 0%, rgba(254,131,113,1) 99%, rgb(255, 255, 255) 100%, rgb(255, 255, 255) 100%);
    background-position: left center, 45% 85%, bottom center;
    background-size: 10%, 17%, 100%;
    padding: 0;
}

#cijela{
    background: url('../img/tocka1.svg') no-repeat, url('../img/bottom-rozi.svg') no-repeat, linear-gradient(180deg, rgba(254,131,113,1) 0%, rgba(254,131,113,1) 99%, rgba(241,210,219,1) 100%, rgba(241,210,219,1) 100%);
    background-position: left center, bottom center;
    background-size: 10%, contain; 
}

.ruka{
    position: absolute;
    right: 0;
    top: 26%;
    max-width: 80vw;
}

header p{
    color: #fff;
    font-weight: 400;
}



.logs{
    padding-top: 2rem;
}

.tekst{
    padding-top: 12rem;
}

.tekst p{
    font-size: 1rem;
    padding-right: 0.75rem;
}

.btn-skrol{
    background-color: #201F6D;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 25px;
    margin-top: 1rem;
    margin-bottom: 0;
    width: 100%;
}

.btn p{
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 700;
}

.text-muted {
    color: rgb(89, 88, 186)!important;
}

.form-control:focus {
    color: #201F6D;
    background-color: #fff;
    border-color: #FE8371;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgb(89, 88, 186);
    opacity: 1; /* Firefox */
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(89, 88, 186);
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: rgb(89, 88, 186);
  }

  .btn-prijava:hover{
      color: #fff;
      background-color:rgb(226, 96, 76) ;
  }

  .btn-skrol:hover{
      color: #fff;
      background-color: rgb(16, 15, 76);
  }

  .btn-face{
      border: 2px solid #fff;
      color: #fff;
      text-transform: uppercase;
      font-weight: 700;
      padding: 1rem;
      width: 100%;
      border-radius: 25px;
      margin-top: 1.5rem;
      margin-bottom: 6rem;
      margin-left: 0;
  }

  .btn-face:hover{
      color: #fff;
      border: 2px solid #201F6D;
      background-color: #201F6D;
      transition: all 250ms ease;
      -webkit-transition: all 250ms ease;
      -moz-transition: all 250ms ease;
      -ms-transition: all 250ms ease;
      -o-transition: all 250ms ease;
}


@media (min-width: 992px) {
    header{
        background-color: #FE8371;
        position: relative;
        min-height: 100vh;
        background: url('../img/tocka1.svg') no-repeat, url('../img/tocka2.svg') no-repeat,url('../img/bottom-bijeli.svg') no-repeat, linear-gradient(180deg, rgba(254,131,113,1) 0%, rgba(254,131,113,1) 99%, rgb(255, 255, 255) 100%, rgb(255, 255, 255) 100%);
        background-position: left center, 45% 85%, bottom center;
        background-size: 10%, 17%, contain;
        padding: 0;
    }
    .logs{
        padding-top: 0;
    }

    .ruka{
        position: absolute;
        right: 0;
        top: 18%;
        max-width: 45vw;
    }

    .tekst{
        padding-top: 2rem;
    }

    .btn-skrol{
        background-color: #201F6D;
        padding: 1rem 2rem;
        border-radius: 25px;
        margin-top: 1rem;
        width: unset;
    }

    .btn-face{
        border: 2px solid #fff;
        color: #fff;
        text-transform: uppercase;
        font-weight: 700;
        padding: 1rem 2rem;
        border-radius: 25px;
        margin-top: 1rem;
        margin-bottom: 6rem;
        margin-left: 1rem;
        width: unset;
    }

    .tekst p{
        font-size: 1.25rem;
    }
    
}

.naslov h1{
    font-family: acuta, serif;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
}

.naslov span{
    background-color: #FE8371;
    padding: .5rem 1rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

#natjecaj{
    background-color: #201F6D;
    padding: 4rem 0 14rem;
    position: relative;
}

.zadaci{
    padding-top: 8rem;
    color: #fff;
}

.zadaci h5{
    background-color: #FE8371;
    padding: .25rem .75rem;
    text-transform: uppercase;
    color: #201F6D;
    font-weight: 700;
font-size: 1rem;
  
}

.naslovcic h5{
    transform: rotate(-2.75deg);
    margin-top: .5rem;
}

.drugi{
    padding-top: 2rem;
}

.form-control{
    background-color: #3B3A96;
    border: none;
    color: #fff;
    font-weight: 500;
}

.form-check-label{
    font-size: .8rem;
    font-weight: normal;
}

.form-check-label a{
    color: #FE8371;
}

label{
    text-transform: uppercase;
    font-size: .85rem;
    font-weight: 700;
  
}

form{
    border: 3px solid #3B3A96;
    border-radius: 5px;
    padding: 3rem 1.5rem;
    margin-top: 10rem;
}

form h2{
    text-transform: uppercase;
    font-size: 1.25rem;
    padding-bottom: 1rem;
    color: #FE8371;
}

.form-control{
    padding: 1.5rem 1rem;
}

.form-check-label{
    text-transform: none;
}

.btn-prijava{
    background-color: #FE8371;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 25px;
    padding: 1rem 3rem;
    width: 100%;
    margin: 1.5rem auto 0;
}

.ruka1, .ruka2, .ruka3{
    position: absolute;
}

.ruka1{
    left: 0;
    top: 28%;
    width: 40vw;
}

.ruka2{
    bottom: 0;
    left: 28%;
    width: 40vw;
}

.ruka3{
    right: 0;
    top: 10%;
    width: 40vw;
}

.dobitnici{
align-items: center;
margin-bottom: 1rem;
}


.dobitnici h5{
    white-space: nowrap;
    margin-bottom: 0;
    margin-right: .75rem;
    font-size: 1rem;
    color: #201F6D!important;
    padding-bottom: 0!important;
}

.dobitnici img{
    max-width: 2rem;
}

.dobitnici:hover img{
    transform: translateX(5px);
}

.btn-dobitnici{
    padding: 0;
}

.modal-header{
    background-color: #201F6D;
    border-bottom: .5px solid #FE8371;
    color: #FE8371;
    padding: 1.5rem 2rem 1rem;
}

#headerNaslov{
    color: #FE8371;
}

.modal-body, .modal-footer{
    background-color: #201F6D
}

.modal-body{
    padding: 2rem;
}

.modal-footer{
    border-top: none;
}

.btn-zatvori{
    background-color: #FE8371;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
}

.btn-zatvori:hover{
    background-color: #e2614d;
    color: #fff;
}

.close{
    color: #fff;
    opacity: 1;
}

.close:hover{
    color: #fff;
}

@media (min-width: 992px){
    .zadaci{
        padding-top: 10rem;
        color: #fff;
    }

    form{
        border: 3px solid #3B3A96;
        border-radius: 5px;
        padding: 3rem;
        margin-top: 0;
    }

    #natjecaj{
        background-color: #201F6D;
        padding: 4rem 0;
        position: relative;
    }

    .naslov h1{
        font-family: acuta, serif;
        color: #fff;
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.6;
    }

    .btn-prijava{
        background-color: #FE8371;
        color: #fff;
        font-weight: 700;
        text-transform: uppercase;
        border-radius: 25px;
        padding: 1rem 3rem;
        width: 75%;
        margin: 1.5rem auto 0;
    }

    .ruka1{
        left: 0;
        top: 10%;
        width: 15vw;
    }
    
    .ruka2{
        bottom: 0;
        left: 25%;
        width: 15vw;
    }

    .ruka3{
        right: 0;
        top: 15%;
        width: 15vw;
    }

    .dobitnici{
        align-items: center;
        margin-bottom: 2rem;
        }
}

.logy{
    padding-top: 1.5rem;
}

.tekst h2{
    font-family: acuta, serif;
    color: #201F6D;
    font-weight: 700;
    font-size: 2.5rem;
    padding-bottom: 1rem;
    line-height: 1.1;
    padding-top: 8rem;
}

.tekst h5{
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    padding-bottom: .5rem;
}

.reveal{
    position: absolute;
    right: 15px;
    top: 20%;
    max-width: 100vw;
    min-width: 100vw;
}

.plavi span{
    background-color: #201F6D;
    
}

.rozi span{
    color: #F1D2DB;
}

.narancasti-bg span{
    background-color: #FE8371;
    color: #201F6D
}



@media (min-width: 992px){
    .reveal{
        position: absolute;
        right: 10%;
        top: 10%;
        max-width: 50vw;
        min-width: unset;
    }
    .tekst h2{
        font-family: acuta, serif;
        color: #201F6D;
        font-weight: 700;
        font-size: 2.5rem;
        padding-bottom: 2rem;
        padding-top: 0;
    }
}

#usporedba{
    padding: 6rem 0;
    background-color: #F1D2DB;
    color: #0D0C48;

    background: url('../img/bottom-narancasti.svg') no-repeat, linear-gradient(180deg, rgba(241,210,219,1) 0%, rgba(241,210,219,1) 99.8%, rgba(254,131,113,1) 99.8%, rgba(254,131,113,1) 100%);
    background-position: bottom center;
    background-size: 100%;
}

.naslov p{
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    font-weight: 400;
    line-height: 1.35;
    font-size: 1rem;
}

#video{
    padding: 6rem 0 0;
    background-color: #F1D2DB;
    color: #0D0C48;
    background: url('../img/bottom-rozi.svg') no-repeat, url('../img/video-bg-mob.svg') no-repeat,linear-gradient(180deg, rgba(32,31,109,1) 0%, rgba(32,31,109,1) 99.8%, rgba(241,210,219,1) 99.8%, rgba(241,210,219,1) 100%);
    background-position: bottom center, center center;
    background-size: 100%, 100%;
}

#video p{
    color: #fff;
}

.videy{
    padding: 5rem 0 10rem;
}

#clanci{
    padding: 6rem 0 10rem;
    background-color: #F1D2DB;
    color: #0D0C48;
    background: url('../img/bottom-rozi.svg') no-repeat, linear-gradient(180deg, rgba(32,31,109,1) 0%, rgba(32,31,109,1) 99.8%, rgba(241,210,219,1) 99.8%, rgba(241,210,219,1) 100%);
    background-position: bottom center, center center;
    background-size: 100%, cover;
}

#clanci p{
    color: #fff;
}

.clanak{
    padding-top: 4rem;
}

a:hover{
    text-decoration: none;
}

a .clanak {
    color: #fff;
}

a .clanak h5:hover{
    text-decoration: none;
    color: #FE8371;
}

#clanci h5{
    padding-top: 1rem;
    font-size: 1.25rem;
    text-align: center;
}


.prva{
    background: url('../img/clanci/1.jpeg') no-repeat;
}

.druga{
    background: url('../img/clanci/2.jpeg') no-repeat;
}

.fotka{
    width: 100%;
    height: 15rem;
    border-radius: 15px;
    background-size: cover;
    background-position: center center;
}

@media (min-width: 992px){
    #usporedba{
        padding: 6rem 0;
        background-color: #F1D2DB;
        color: #0D0C48;
        background: url('../img/bottom-narancasti.svg') no-repeat, linear-gradient(180deg, rgba(241,210,219,1) 0%, rgba(241,210,219,1) 99%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%);
        background-position: bottom center;
        background-size: contain;
    }
    .naslov p{
        padding-top: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        font-weight: 400;
        line-height: 1.35;
        font-size: 1.25rem;
    }

    #video{
        padding: 6rem 0;
        background-color: #F1D2DB;
        color: #0D0C48;
        background: url('../img/bottom-rozi.svg') no-repeat, url('../img/video-bg.svg') no-repeat,linear-gradient(180deg, rgba(32,31,109,1) 0%, rgba(32,31,109,1) 99%, rgba(241,210,219,1) 100%, rgba(241,210,219,1) 100%);
        background-position: bottom center, center center;
        background-size: contain, 100%;
    }

    .videy{
        padding: 5rem 0 14rem;
    }

    #clanci{
        padding: 4rem 0 16rem;
        background-color: #F1D2DB;
        color: #0D0C48;
        background: url('../img/bottom-rozi.svg') no-repeat, linear-gradient(180deg, rgba(32,31,109,1) 0%, rgba(32,31,109,1) 99%, rgba(241,210,219,1) 100%, rgba(241,210,219,1) 100%);
        background-position: bottom center, center center;
        background-size: contain, cover;
    }

    .clanak{
        padding-top: 6rem;
    }

    #clanci h5{
        padding-top: 1rem;
        font-size: 1.5rem;
        text-align: center;
    }
}

#aplikacija{
    padding: 10rem 0 12rem;
    color: #0D0C48;
    position: relative;
    background: url('../img/bottom-plavi.svg') no-repeat, linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 99.8%, rgba(32,31,109,1) 99.8%, rgba(32,31,109,1) 100%);
    background-position: bottom center;
    background-size: 120%;
}

.ruka12{
    position: absolute;
    left: 0;
    top: 3rem;
    width: 35vw;
}

.ruka13{
    position: absolute;
    right: 0;
    top: 32rem;
    width: 35vw;
}

.bijeli span{
    color: #fff;
}

.apli{
    background-color: #201F6D;
    border-radius: 25px;
    padding: 6rem .5rem 8rem;
    margin-top: 8rem;
}

.apli h3{
  color: #fff;
  font-size: 1.5rem;
  padding-bottom: 3rem;

}

.apli span{
    color: #FE8371;

}

.upload, .slider{
    height: 15rem;
    width: 100%;
    background-color: #fff;
    border-radius: 15px;
    padding: 0 15px;
}

.slider p{
    text-transform: uppercase;
    font-weight: 700;
    color: #201F6D;
    font-size: .9rem;
    padding-top: 1rem;
}

.upload{
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.klik{
  border: 3px dashed #C4C4C4;  
  height: 100%;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.klik img{
    max-width: 6rem;
}

.klik p{
    text-transform: uppercase;
    font-weight: 700;
    color: #201F6D;
    font-size: .9rem;
    padding-top: 1rem;
}

.natpis{
    transform: rotate(-1.58deg);
    margin-top: -2.25rem;
    max-width: 90%;
}

.natpis span{
    background-color: #FE8371;
    padding: .5rem 1rem;
    font-weight: 700;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.natpis h2{
text-transform: uppercase;
font-size: 1.25rem;
line-height: 1.5;
}

@media (min-width: 992px){
    #aplikacija{
        padding: 6rem 0 22rem;
        color: #0D0C48;
        position: relative;
        background: url('../img/bottom-plavi.svg') no-repeat, linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 99%, rgba(32,31,109,1) 100%);
        background-position: bottom center;
    }
    .apli{
        background-color: #201F6D;
        border-radius: 25px;
        padding: 3rem 2rem 8rem;
        margin-top: 4rem;
    }
    .upload{
        padding: 1rem;
        margin-bottom: 0;
    }
    .slider p{
        text-transform: uppercase;
        font-weight: 700;
        color: #201F6D;
        font-size: 1rem;
        padding-top: 1rem;
    }
    .klik p{
        text-transform: uppercase;
        font-weight: 700;
        color: #201F6D;
        font-size: 1rem;
        padding-top: 1rem;
    }
    .natpis{
        transform: rotate(-1.58deg);
        margin-top: -1.25rem;
        max-width: 80%;
    }
    .natpis h2{
        text-transform: uppercase;
        font-size: 1.5rem;
        }
        .natpis span{
            background-color: #FE8371;
            padding: .5rem 1.5rem;
            font-weight: 700;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
        }
        .ruka12{
            position: absolute;
            left: 0;
            top: 10rem;
            width: 15vw;
        }
        
        .ruka13{
            position: absolute;
            right: 0;
            top: 30rem;
            width: 15vw;
        }
}

#fotka{
    visibility: hidden;
}

.uploadtarget{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.labela{
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 1.5rem 0;
}

.usporedy{
    padding-top: 4rem;
}

.arrows {
    top: 40%;
    position: absolute;
    width: 85%;

}


#previous,

.prev {

    position: absolute;

    cursor: pointer;

    display: block;

    height: 40px;

    width: 40px;

    left: 0px;

    background: url("../img/prev.svg") no-repeat;

    background-position: top;

    background-size: contain;



}

#next,

.next {

    position: absolute;

    cursor: pointer;

    display: block;

    height: 40px;

    width: 40px;

    right: 5px;

    background: url("../img/next.svg") no-repeat;

    background-position: top;

    background-size: contain;

}

@media (min-width: 992px){
    .arrows {
        top: 35%;
        position: absolute;
        width: calc(100% - 60px);
    
    }

    #previous,

.prev {

    position: absolute;

    cursor: pointer;

    display: block;

    height: 40px;

    width: 40px;

    left: 0px;

    background: url("../img/prev.svg") no-repeat;

    background-position: top;

    background-size: contain;



}

#next,

.next {

    position: absolute;

    cursor: pointer;

    display: block;

    height: 40px;

    width: 40px;

    right: 0px;

    background: url("../img/next.svg") no-repeat;

    background-position: top;

    background-size: contain;

}
}

.slidy img{
    max-height: 11rem;
}

.narancasti span{
    color: #FE8371;
}


#infografika{
    background-color: #FE8371;
    color: #fff;
    padding: 6rem 0 8rem;
    background: url('../img/bottom-plavi.svg') no-repeat, linear-gradient(180deg, rgba(254,131,113,1) 0%, rgba(254,131,113,1) 99.8%, rgba(32,31,109,1) 99.8%, rgba(32,31,109,1) 100%);
    background-position: bottom center;
}


.slikice{
    padding-top: 2rem;
}

.slikice p{
    background-color: #201F6D;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    padding: .25rem 1rem;
    margin-bottom: 4rem;
}

#proizvodi{
    background-color: #F1D2DB;
    padding: 6rem 0 6rem;
}

#proizvodi p{
    font-family: acuta, serif;
    font-size: 1rem;
    color: #201F6D;
}

footer{
    background-color: #FE8371;
    color: #201F6D;
    padding: 4rem 0;
}

.legal{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 3rem;
}

.legal a{
    text-transform: uppercase;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    padding-left: .5rem;
    padding-right: .5rem; 
    text-align: center;   
}

.legal a:hover{
    text-decoration: none;
    color: #201F6D;
    font-weight: 700;
}

@media (min-width: 992px){
    .slikice{
        padding-top: 4rem;
    }
    .slikice p{
        background-color: #201F6D;
        color: #fff;
        text-transform: uppercase;
        font-weight: 500;
        padding: .25rem 1rem;
        margin-bottom: 0;
    }
    #infografika{
        background-color: #FE8371;
        color: #fff;
        padding: 6rem 0 18rem;
        background: url('../img/bottom-plavi.svg') no-repeat, linear-gradient(180deg, rgba(254,131,113,1) 0%, rgba(254,131,113,1) 99%, rgba(241,210,219,1) 100%, rgba(241,210,219,1) 100%);
        background-position: bottom center;
    }
    #proizvodi p{
        font-family: acuta, serif;
        font-size: 1.1rem;
        color: #201F6D;
    }

    .legal{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    footer{
        background-color: #FE8371;
        color: #201F6D;
        padding: 6rem 0;
    }

    .legal a{
        text-transform: uppercase;
        color: #fff;
        font-size: .95rem;
        font-weight: 500;
        padding-left: 1rem; 
        padding-right: 0;
        text-align: right;   
    }

    .legal{
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 0;
    }

    #proizvodi{
        background-color: #F1D2DB;
        padding: 3rem 0 6rem;
    }
    
}

.form-rez{
    text-align: center;
    padding-top: 2rem;
    font-size: 2rem;
}

.text-bad{
    border: 2px solid #DA2C1F !important;
  }