:root {
    --white-color: #FFF;
    --dark-color: #353535;
    --literdark-color: #4b4b4b;
    --lite-color: #D8D7D9;
    --green-color: #3ae374;
    --litergreen-color: #32ff7e;
    --red-color: #e04040;
    --literred-color: #fa6b6b;
    --yellow-color: #fff200;
    --literyellow-color: #fffa65;
    --orange-color: #ff9f1a;
    --literorange-color: #ffaf40;
    --blue-color: #17c0eb;
    --literblue-color: #18dcff;
    --background-color: #FFF;
    --font-color: #3d3d3d;
    --font-inversecolor: #FFF;
    --shadow-black: rgba(0, 0, 0, 0.3);
}

/*********************/
/* OPŠTA PODEŠAVANJA */
/*********************/
body, 
html {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    background-color: var(--background-color);
    font-family: 'Lato', sans-serif;
    color: var(--font-color);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

a:hover {
    text-decoration: none;
}

sub, sup {
    font-size: 50%;
}

sup {
    top: -.75em;;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
    outline: 0;
    background-color: #fff;
    color: var(--dark-color);
    border-color: var(--blue-color);
}

.uk-form-icon [class^="icofont-"] {
    font-size: 28px;
    color: var(--blue-color);
}

.uk-navbar-nav > li.uk-active > a, 
.uk-navbar-nav > li > a:hover {
    color: var(--blue-color);
}

.uk-navbar-nav > li > a {
    color: var(--white-color);
}

.uk-logo img {
    width: 130px;
    height: auto;
}

/*****************/
/* POMOĆNE KLASE */
/*****************/
.h100 {
    height: 100vh;
    position: relative;
}

.mr-10 {
    margin-right: 10px;
}

.mb-60 {
    margin-bottom: 60px;
}

.pt-0 {
    padding-top: 0;
}

.p0 {
    padding: 0;
}

.m0 {
    margin: 0;
}

.dark--text {
    color: var(--dark-color);
}

.lite--text {
    color: var(--white-color);
}

.red--text {
    color: var(--red-color) !important;
}

.blue--text {
    color: var(--blue-color) !important;
}

.orange--text {
    color: var(--orange-color);
}

.bold--text {
    font-weight: 700;
}

.text--shadow {
    text-shadow: 1px 2px rgba(0, 0, 0, 0.3);
}

.subtitle--faded {
    color: var(--lite-color);
    margin-bottom: 0;
}

.uk-divider-small.dark::after {
    border-top: 1px solid var(--literdark-color);
}

.uk-divider-small.blue::after {
    border-top: 1px solid var(--blue-color);
}

.uk-divider-small.red::after {
    border-top: 1px solid var(--red-color);
}

.red--section {
    background: radial-gradient(100% 100% at 0% 0%, var(--literred-color) 0%, var(--red-color) 100%) no-repeat 50% 50% / 100% 100%;
    color: var(--white-color);
}

.green--section {
    background: radial-gradient(100% 100% at 100% 0%, var(--litergreen-color) 0%, var(--green-color) 100%) no-repeat 50% 50% / 100% 100%;
    color: var(--white-color);
}

.blue--section {
    background: radial-gradient(100% 100% at 100% 0%, var(--literblue-color) 0%, var(--blue-color) 100%) no-repeat 50% 50% / 100% 100%;
    color: var(--white-color);
}

.dark--section {
    background: radial-gradient(100% 100% at 100% 0%, var(--literdark-color) 0%, var(--dark-color) 100%) no-repeat 50% 50% / 100% 100%;
    color: var(--white-color);
}

a.btn--primary {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    padding: 10px 40px 13px;
    margin-bottom: 25px;
    background: transparent;
    border: 1px solid var(--white-color);
    color: var(--white-color);
    text-transform: uppercase;
    transition: all .2s ease-out;
}

a.btn--primary.lite {
    border: 1px solid var(--white-color);
    color: var(--white-color);
}

a.btn--primary.lite:hover {
    border: 1px solid var(--white-color);
    background: var(--white-color);
    color: var(--red-color);
}

a.btn--primary.blue {
    border: 1px solid var(--blue-color);
    color: var(--blue-color);
}

a.btn--primary.blue:hover {
    border: 1px solid var(--literblue-color);
    background: var(--literblue-color);
    color: var(--white-color);
}

a.btn--primary.red {
    border: 1px solid var(--red-color);
    color: var(--red-color);
}

a.btn--primary.red:hover {
    border: 1px solid var(--literred-color);
    background: var(--literred-color);
    color: var(--white-color);
}

a.btn--primary--sm {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: .75rem;
    font-weight: 400;
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--red-color);
    color: var(--red-color);
    text-transform: uppercase;
    transition: all .2s ease-out;
}

a.btn--primary--sm:hover {
    border: 1px solid var(--literred-color);
    background: var(--literred-color);
    color: var(--white-color);
}

a.inline--link {
    text-decoration: none;
    border-bottom: 1px var(--white-color) dotted;
    font-weight: 700;
}

a.inline--link.lite {
    color: var(--white-color);
}

.uk-subnav-pill > .uk-active > a {
    background-color: var(--red-color);
    color: #fff;
}

.sticky--top {
    position: sticky;
    top: 0;
    background-color: #fff;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    z-index: 999;
}

/***********/
/* POČETNA */
/***********/

/* SEKCIJA 1 */
.hero--section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url(/assets/img/front_hero.jpg);
    background-size: cover;
}

.block--overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark-color);
    opacity: 0.6;
    /* background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); */
}

.hero--section div.hero--content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    /* height: 100%; */
}

.bigtitle--before {
    font-family: 'Raleway', sans-serif;
    font-size: 20rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.03);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}

.animated--arrow [class^="icofont-"] {
    position: relative;
    font-size: 2.5rem;
    top: 0px;
    margin: 0;
    padding: 0;
    color: var(--white-color);
    animation: floating 1s ease-in-out infinite alternate;
    will-change: top;
}

@keyframes floating {
    0%   { top: 0px; }
    100% { top: 15px; }
}

/* .hero--section h1, 
.hero--section h2 {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
} */

.hero--section p {
    margin: 0;
}

/* SEKCIJA 2 */
/* .second h1 > span {
    font-weight: 700;
} */

.second--section img {
    width: 200px;
    height: 200px;
}

/* SEKCIJA 3 */
#thirdSectionFront {
    background-image: url(/assets/img/front_bg.jpg);
    background-size: cover;
    background-position: center;
}

.third--section {
    padding-top: 40px;
    padding-bottom: 60px;
}

.img--slider--sm li {
    margin-right: 3px;
}

.img--slider--sm li img {
    width: 100%;
    height: 100%;
}

/* KONTAKT */
.contact--section [class^='icofont'] {
    font-size: 4rem;
}

/* FOOTER */

.footer--main .uk-card-primary {
    background-color: var(--literdark-color);
}

.footer--main [class^='icofont'] {
    font-size: 22px;
    margin-right: 10px;
}

.footer--main .social--media--icons [class^='icofont'] {
    font-size: 4rem;
}

.footer--main .fs1 {
    font-size: 7rem;
    line-height: 0;
}

.footer--main #wTemp {
    font-size: 4rem;
    padding-top: 0;
    margin-top: 0;
}

.footer--copyright {
    background: var(--dark-color);
    padding: 20px;
}

/*************/
/* PROIZVODI */
/*************/

.hero--section--sm {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.uk-tab > .uk-active > a {
    color: var(--red-color);
    border-color: var(--red-color);
}

.proizvod--single img {
    object-fit: contain;
    max-height: 250px;
}

.slider--proizvod > ul {
    min-height: 250px !important;
}

img.overflow--img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 160%;
    width: auto;
    box-sizing: content-box;
    padding: 0;
    box-shadow: 15px 25px 25px rgba(0, 0, 0, 0.3);
}

.proizvodi--img--sec {
    height: 40vh;
    background-image: url(/assets/img/stiletto-proizvodi-cackalice.jpg);
    background-size: cover;
    background-position: center center;
}


@media only screen and (max-width: 960px) {
    
    .third h2 {
        text-align: center;
    }

    .third img {
        height: 200px;
        width: 200px;
    }
}







/* Call to action */
.cta--sec {
    display: flex;
    align-items: stretch;
}

.cta {
    flex: 1 1 calc(100vw / 3);
    display: block;
    padding: 40px 15px;
    color: var(--white-color);
}

.cta.blue {
    background: radial-gradient(100% 100% at 100% 0%, var(--literblue-color) 0%, var(--blue-color) 100%) no-repeat 50% 50% / 100% 100%;
}

.cta.red {
    background: radial-gradient(100% 100% at 100% 0%, var(--literred-color) 0%, var(--red-color) 100%) no-repeat 50% 50% / 100% 100%;
}

.cta.yellow {
    background: radial-gradient(100% 100% at 100% 0%, var(--literyellow-color) 0%, var(--yellow-color) 100%) no-repeat 50% 50% / 100% 100%;
}

.cta h2, 
.cta p {
    color: var(--white-color);
}

/* Fun facts */
.ff--sec {
    display: flex;
    align-items: stretch;
    background: radial-gradient(100% 100% at 100% 0%, var(--litergreen-color) 0%, var(--green-color) 100%) no-repeat 50% 50% / 100% 100%;
}

.ff {
    flex: 1 1 calc(100vw / 4);
    display: block;
    padding: 40px 15px;
    color: var(--white-color);
}

.ff h2, 
.ff p {
    color: var(--white-color);
    margin-top: 20px;
}

.ff [class^="icofont-"] {
    font-size: 3rem;
}