* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    background: url('../img/bg.jpg');
    background-size: contain;
    background-repeat: repeat;
    font-family: sofia-pro, sans-serif;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

p {
    font-size: 16px;
}

a {
    text-decoration: none;
    color: #131313;
}

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.grd {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: space-between;
    margin-left: 15px;
    margin-right: 15px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.log {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 3rem;
}

.log img {
    width: 70%;
    max-width: 300px;
}

.logo {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.logo img {
    height: 60vw;
    background-color: #fff;
    padding: 1vw;
    margin: 2rem 0rem;

}

.logom {
    padding-bottom: 1rem;
}

.face {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.face i {
    padding-right: 1rem;
}

.btn {
    background-color: #ba9546;
    color: #fff;
    text-transform: uppercase;
    padding: 1.5rem 2rem;
    font-size: 2rem;
    font-weight: 500;

}

.btn a {
    color: #fff;
}

.btn:hover {
    background-color: #a37d2c;
}

.content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

}

.pozadina {
    background-color: #fcdeda;
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 15px 8rem;
    padding-top: 4vw;
}

@media (min-width: 992px) {
    .grd {
        width: 1200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: center;
        margin-left: none;
        margin-right: none;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .logo img {
        height: 15vw;
        background-color: #fff;
        padding: 1vw;
        margin: 2rem 0rem;
        width: 100% \9;

    }

    .pozadina {
        background-color: #fcdeda;
        width: 1200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 0rem 8rem 10rem;
        padding-top: 0rem;
    }

    .btn {
        background-color: #ba9546;
        color: #fff;
        text-transform: uppercase;
        padding: 1rem 2rem;
        font-size: 1rem;

    }

    .log img {
        width: 40%;
    }

    .log.lapiel img {
        width: 90%;
    }

    .log {
        padding-bottom: 1.25rem;
    }
}


.container-grid {
    width: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[10];
    grid-template-columns: repeat(10, 1fr);
    -ms-grid-rows: (200px)[52];
    grid-template-rows: repeat(52, 200px);
    grid-gap: 25px;
    padding: 4rem 2rem 8rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media (min-width: 992px) {

    .container-grid {
        -ms-grid-rows: (minmax(100px, 1fr))[24];
        grid-template-rows: repeat(24, minmax(100px, 1fr));
        grid-gap: 10px;
    }

}

.dan {
    background-color: #333;
    color: #fff;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.jedan {

    -ms-grid-column: 1;

    -ms-grid-column-span: 5;

    grid-column: 1 / span 5;
    -ms-grid-row: 9;
    -ms-grid-row-span: 4;
    grid-row: 9 / span 4;
    background: url('../img/zlatna.jpg');
    background-size: cover;
    background-position: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

}

.cont {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.jedan h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 40rem;
    color: #131313;
    line-height: 1;
    margin-top: -10rem;
}

.broj {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.crno {
    background-color: #131313;
    text-transform: uppercase;
    font-size: 3rem;
    padding: .25rem 1.25rem;
    color: #fff;
}

.pow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 1rem;
    -ms-flex-item-align: center;
    align-self: center;
}

.pow p {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 900;
    padding-bottom: .75rem;
    text-align: center;
}

.black {
    color: #131313;
}

.logm {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.logm img {

    width: 10rem;
}

.log.dvadeset  {
    width: 13rem;
    background: transparent;
}

.log.dvadeset img {
    width: 110%;
}

@media (min-width: 992px) {
    .log.dvadeset  {
        width: 5rem;
        background: transparent;
    }

    .jedan {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / span 2;
        -ms-grid-row: 1;
        -ms-grid-row-span: 4;
        grid-row: 1 / span 4;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .jedan h1 {
        font-family: 'Playfair Display', serif;
        font-weight: 900;
        font-size: 20rem;
        color: #131313;
        line-height: 1;
        margin-top: -3vw;
    }

    .crno {
        background-color: #131313;
        text-transform: uppercase;
        font-size: 1.25rem;
        padding: .25rem 1.25rem;
        color: #fff;
    }

    .pow p {
        font-size: .6rem;
        text-transform: uppercase;
        font-weight: 900;
        padding-bottom: .5rem;
    }

    .logm img {

        width: 7rem;
        padding-bottom: 2rem;
    }

}

.prazan {

    -ms-grid-column: 1;

    -ms-grid-column-span: 10;

    grid-column: 1 /span 10;
    -ms-grid-row: 1;
    -ms-grid-row-span: 5;
    grid-row: 1 /span 5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    padding: 1rem;
    font-size: 16px;
}

.naslov {
    text-transform: uppercase;
    font-size: 5rem;
    line-height: 1.25;
    font-weight: 900;
    padding-bottom: 2.5rem;
}

.vijuga img {
    width: 20%;
}

.vijuga {
    padding-bottom: 1.25rem;
}

.prazan p {
    font-family: 'Playfair Display', serif;
    padding: 0;
    line-height: 1.5;
    font-size: 2.5rem;
}

@media (min-width: 992px) {
    .prazan {
        -ms-grid-column: 3;
        -ms-grid-column-span: 6;
        grid-column: 3 /span 6;
        -ms-grid-row: 1;
        -ms-grid-row-span: 3;
        grid-row: 1 /span 3;
        padding: 1rem 2rem;

    }

    .prazan p {
        font-family: 'Playfair Display', serif;
        padding: 0 2rem;
        line-height: 1.6;
        font-size: 1rem;
    }
}

.tri {

    -ms-grid-column: 6;

    -ms-grid-column-span: 5;

    grid-column: 6 / span 5;
    -ms-grid-row: 11;
    -ms-grid-row-span: 4;
    grid-row: 11 / span 4;
    background-color: #fff;
}

.zlatno {
    background: url('../img/zlatna.jpg');
    background-position: center;
    padding: .25rem 2rem;
}

.zlatno p {
    color: #131313;
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 900;
}

.tri .broj {
    padding: 12vw 0vw;
}

.tri .broj h1 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    font-size: 12rem;
    font-weight: 900;
    color: #131313;
    font-family: 'Playfair Display', serif;
    padding-bottom: 2vw;
}

@media (min-width: 992px) {
    .tri {

        -ms-grid-column: 9;

        -ms-grid-column-span: 2;

        grid-column: 9 / span 2;
        -ms-grid-row: 1;
        -ms-grid-row-span: 4;
        grid-row: 1 / span 4;
        background-color: #fff;
    }

    .tri .broj {
        padding: 3vw 0 2vw;
    }

    .naslov {
        text-transform: uppercase;
        font-size: 2.25rem;
        font-weight: 900;
        padding-bottom: 1.5rem;
    }

    .tri .broj h1 {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        font-size: 6rem;
        font-weight: 900;
        color: #131313;
        font-family: 'Playfair Display', serif;
        padding-bottom: 1vw;
    }

    .zlatno {
        background: url('../img/zlatna.jpg');
        background-position: center;
        padding: .1rem 2rem;
    }

    .zlatno p {
        color: #131313;
        text-transform: uppercase;
        font-size: 1.25rem;
        font-weight: 900;
    }
}

.dva {

    -ms-grid-column: 6;

    -ms-grid-column-span: 5;

    grid-column: 6 / span 5;

    -ms-grid-row: 9;

    -ms-grid-row-span: 2;

    grid-row: 9 / span 2;

    background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0.5))), url('../img/tockice.jpg');

    background: url('../img/tockice.jpg');
    background-size: cover;
    background-color: #fff;

}

.bijelo {
    background-color: #fff;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 2rem;

}

.dva .broj {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;


}

.dva h1 {
    font-size: 16rem;
    color: #131313;
    line-height: 1;
    letter-spacing: -5;
}

.dva .broj p {
    font-size: 3rem;
    color: #131313;
    position: relative;
    top: -125px;
    font-family: 'Playfair Display', serif;
}

@media (min-width: 992px) {
    .dva {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / span 2;
        -ms-grid-row: 5;
        -ms-grid-row-span: 4;
        grid-row: 5 / span 4;

        background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0.5))), url('../img/tockice.jpg');

        background: url('../img/tockice.jpg');
        background-size: cover;
        background-color: #fff;

    }

    .dva h1 {
        font-size: 10rem;
        color: #131313;
        line-height: 1;
        letter-spacing: -5;
    }

    .dva .broj p {
        font-size: 1.5rem;
        color: #131313;
        position: relative;
        top: -75px;
        font-family: 'Playfair Display', serif;
    }

    .bijelo {
        background-color: #fff;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 1vw;

    }
}

.trenutni {

    -ms-grid-column: 1;

    -ms-grid-column-span: 10;

    grid-column: 1 / span 10;
    -ms-grid-row: 5;
    -ms-grid-row-span: 4;
    grid-row: 5 / span 4;
    background-color: #fff;
    color: #131313;
    text-align: center;
    position: relative;
}

.trenutni .bijelo {
    background-color: #fff;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 4rem;
    border: 1rem solid #131313;

}

.dans p {
    background-color: #131313;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 2.5rem;
    padding: .5rem 4rem;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.tren-dan p {
    color: #bf9948;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2.75rem;
    padding-top: 2rem;
}

.trenutni h1 {
    padding: 1rem 2rem 2rem;
    font-family: 'Playfair Display', serif;
    line-height: 1.25;
    font-size: 4.5rem;
    font-weight: 900;

}

.trenutni .pow p {
    font-size: .75rem;
}

.btn-black {
    color: #fff;
    text-transform: uppercase;
    padding: 1.5rem 6rem;
    margin: .5rem 0;
    background-color: #131313;
    font-size: 2.2rem;
    font-weight: 500;

}

.zl_bor {
    position: absolute;
    right: 0;
    bottom: 0;

}

.zl_bor img {
    width: 25rem;
}

@media (min-width: 992px) {
    .trenutni {
        -ms-grid-column: 3;
        -ms-grid-column-span: 6;
        grid-column: 3 / span 6;
        -ms-grid-row: 4;
        -ms-grid-row-span: 5;
        grid-row: 4 / span 5;
        background-color: #fff;
        color: #131313;
        text-align: center;
        position: relative;

    }

    .trenutni .bijelo {
        background-color: #fff;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        margin: 2vw;
        border: .5vw solid #131313;

    }

    .trenutni h1 {
        padding: 1vw 2vw 2vw;
        font-family: 'Playfair Display', serif;
        line-height: 1.25;
        font-size: 3rem;
        font-weight: 900;
        width: 100%;
    }

    .tren-dan p {
        color: #bf9948;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 1.25rem;
        padding-top: 2rem;
    }

    .dans p {
        background-color: #131313;
        color: #fff;
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 1.25vw;
        padding: .25vw 1.5vw;
        -ms-flex-item-align: start;
        align-self: flex-start;
    }

    .zl_bor img {
        width: 14vw;
    }

    .btn-black {
        color: #fff;
        text-transform: uppercase;
        padding: .6rem 2.6rem;
        background-color: #131313;
        font-size: .95vw;
        font-weight: 500;
    }
}

.cetiri {

    -ms-grid-column: 6;

    -ms-grid-column-span: 5;

    grid-column: 6 / span 5;
    -ms-grid-row: 15;
    -ms-grid-row-span: 2;
    grid-row: 15 / span 2;
    background: url('../img/pahulje.png');
    background-size: 90%;
    background-position: top left;
    background-repeat: no-repeat;
    background-color: #131313;
    padding-top: 1vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}



.cetiri .cont {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.cetiri .broj {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

}

.cetiri .broj h1 {
    font-size: 16rem;
    line-height: 1;
    font-family: 'Playfair Display', serif;
    margin-top: -4rem;
    padding-left: 2rem;
}

.cetiri .broj p {
    color: #bf9948;
    font-weight: 600;
    font-size: 4rem;
}

.cetiri .pow p {
    font-weight: 400;
}

.cetiri .pow {
    padding-top: .25rem;
}

.cetiri img {
    width: 8rem;
}


@media (min-width: 992px) {
    .cetiri {

        -ms-grid-column: 9;

        -ms-grid-column-span: 2;

        grid-column: 9 / span 2;
        -ms-grid-row: 5;
        -ms-grid-row-span: 2;
        grid-row: 5 / span 2;
        background: url('../img/pahulje.png');
        background-size: 90%;
        background-position: top left;
        background-repeat: no-repeat;
        background-color: #131313;
        padding-top: 1vw;

    }

    .cetiri .broj h1 {
        font-size: 6rem;
        line-height: 1;
        font-family: 'Playfair Display', serif;
        margin-top: -2rem;
    }

    .cetiri .broj p {
        color: #bf9948;
        font-weight: 600;
        font-size: 2rem;
    }

    .cetiri img {
        width: 4rem;
    }

}

.pet {
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    grid-column: 1 / span 5;
    -ms-grid-row: 13;
    -ms-grid-row-span: 4;
    grid-row: 13 / span 4;
    background: url('../img/zlatna.jpg');
    background-size: cover;
    background-position: center;
}

.pet .bijelo {
    background: url('../img/zvjezdice.png');
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: 20% 5%;

}

.pet .bijelo .broj {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.pet .broj h1 {
    color: #131313;
    font-style: italic;
    font-size: 16rem;
    text-align: center;
    line-height: 1;
}

.pet .broj p {
    color: #131313;
    font-size: 4rem;
    text-align: center;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    font-weight: 700;
}

.pet .pow {
    padding-top: 3rem;
}

@media (min-width: 992px) {
    .pet {
        -ms-grid-column: 9;
        -ms-grid-column-span: 2;
        grid-column: 9 / span 2;
        -ms-grid-row: 7;
        -ms-grid-row-span: 4;
        grid-row: 7 / span 4;
    }

    .pet .broj h1 {
        color: #131313;
        font-style: italic;
        font-size: 6rem;
        text-align: center;
        line-height: 1;
    }

    .pet .broj p {
        color: #131313;
        font-size: 2rem;
        text-align: center;
        font-family: 'Playfair Display', serif;
        text-transform: uppercase;
        font-weight: 700;
    }

}

.sest {

    -ms-grid-column: 1;

    -ms-grid-column-span: 10;

    grid-column: 1 / span 10;
    -ms-grid-row: 17;
    -ms-grid-row-span: 2;
    grid-row: 17 / span 2;
    background: url('../img/zlatna.jpg');
    background-size: 50% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    background-color: #131313;

}

.zlat {
    width: 50%;
    background: url('../img/zvijezde.png');
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;


}

.zlat .pow {
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.zlat .pow p {}

.cont-hor {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    max-width: 100%;

}

.sest .cont-hor {
    max-width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-right: 1vw;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sest .broj {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.sest .broj p {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    font-size: 2.25rem;
    text-transform: uppercase;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    min-width: 100;
    text-align: center;

}

.sest .broj h1 {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    font-size: 14rem;
    font-family: 'Playfair Display', serif;
    font-weight: 900;

}



@media (min-width: 992px) {
    .sest {
        -ms-grid-column: 1;
        -ms-grid-column-span: 4;
        grid-column: 1 / span 4;
        -ms-grid-row: 9;
        -ms-grid-row-span: 2;
        grid-row: 9 / span 2;
        background: url('../img/zlatna.jpg');
        background-size: 50% 100%;
        background-position: left center;
        background-repeat: no-repeat;
        background-color: #131313;
    }

    .sest .broj h1 {
        -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
        font-size: 8rem;
        font-family: 'Playfair Display', serif;
        font-weight: 900;

    }

    .sest .cont-hor {
        max-width: 50%;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        padding-right: 1vw;
    }

    .sest .broj p {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        font-size: 1rem;
        text-transform: uppercase;
        -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
        min-width: 100;
        text-align: center;

    }
}

.sedam {

    -ms-grid-column: 1;

    -ms-grid-column-span: 10;

    grid-column: 1 / span 10;
    -ms-grid-row: 19;
    -ms-grid-row-span: 2;
    grid-row: 19 / span 2;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    -webkit-box-pack: justify;
    justify-content: space-around;

}

.sedam .cont-hor {
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.kugla {
    margin-top: 0rem;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.kugla img {

    width: 12vw;
}

.sedam .broj {
    font-weight: 900;
}

.sedam h1 {
    color: #bf9948;
    padding: 0 1rem;
    font-size: 10rem;
    font-weight: 900;
    font-family: 'Playfair Display', serif;
    line-height: 1;
}

.sedam .broj > p {
    color: #131313;
    text-align: center;
    text-transform: uppercase;
    font-size: 3.5rem;
    line-height: 1;
}

.seda,
.pow {
    padding-top: 2rem;
}


@media (min-width: 992px) {
    .sedam {

        -ms-grid-column: 1;

        -ms-grid-column-span: 4;

        grid-column: 1 / span 4;
        -ms-grid-row: 11;
        -ms-grid-row-span: 2;
        grid-row: 11 / span 2;
        background-color: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        -webkit-box-pack: justify;
        justify-content: space-around;

    }

    .sedam h1 {
        color: #bf9948;
        padding: 0 1vw;
        font-size: 4rem;
        font-weight: 900;
        font-family: 'Playfair Display', serif;
        line-height: 1;
    }

    .sedam .broj > p {
        color: #131313;
        text-align: center;
        text-transform: uppercase;
        font-size: 2rem;
        line-height: 1;
    }

    .seda,
    .pow {
        padding-top: 1rem;
    }

    .kugla {
        -ms-flex-item-align: start;
        align-self: flex-start;
    }

    .kugla img {

        width: 3vw;
    }
}

.osam {
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    grid-column: 1 / span 5;
    -ms-grid-row: 21;
    -ms-grid-row-span: 4;
    grid-row: 21 / span 4;
    background-color: #fff;

}

.osam .cont {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.osam .broj > p {
    color: #131313;
    text-transform: uppercase;
    padding-bottom: 1.5rem;
    font-size: 3.5rem;
    font-weight: 900;
}

.krug {
    background: url('../img/krug.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 24rem;
    height: 24rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    color: #131313;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.krug p {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 16rem;
    padding-bottom: 1rem;
}

@media (min-width: 992px) {
    .osam {
        -ms-grid-column: 5;
        -ms-grid-column-span: 2;
        grid-column: 5 / span 2;
        -ms-grid-row: 9;
        -ms-grid-row-span: 4;
        grid-row: 9 / span 4;
        background-color: #fff;

    }


    .krug {
        background: url('../img/krug.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 9vw;
        height: 9vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

        color: #131313;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

    }

    .krug p {
        text-align: center;
        font-family: 'Playfair Display', serif;
        font-weight: 900;
        font-size: 6vw;
        padding-bottom: 1rem;
    }

    .osam .broj p {
        color: #131313;
        text-transform: uppercase;
        padding-bottom: 1.5rem;
        font-size: 1.5rem;
        font-weight: 900;
    }
}

.devet {

    -ms-grid-column: 6;

    -ms-grid-column-span: 5;

    grid-column: 6 / span 5;
    -ms-grid-row: 21;
    -ms-grid-row-span: 4;
    grid-row: 21 / span 4;
    background-color: #fff;
    color: #131313;
}

.devet .broj {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.devet h1 {

    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    line-height: 1;
    height: 100%;
    padding-bottom: 2rem;
    font-size: 10rem;

}

.devet h2 {
    text-transform: uppercase;
    font-size: 3rem;
    padding-top: 9rem;
}

.zvijezda {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 9rem;
}

.zvijezda img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .devet {
        -ms-grid-column: 7;
        -ms-grid-column-span: 2;
        grid-column: 7 / span 2;
        -ms-grid-row: 9;
        -ms-grid-row-span: 4;
        grid-row: 9 / span 4;
        background-color: #fff;
        color: #131313;
    }

    .devet h1 {

        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        line-height: 1;
        height: 100%;
        padding-bottom: 1rem;
        font-size: 4.5rem;

    }

    .devet h2 {
        text-transform: uppercase;
        font-size: 1.5rem;
        padding-top: 4rem;
    }

    .zvijezda {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-bottom: 4rem;
    }

    .zvijezda img {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

.deset {
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    grid-column: 1 / span 5;
    -ms-grid-row: 25;
    -ms-grid-row-span: 4;
    grid-row: 25 / span 4;
    background: url('../img/crte.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #fff;
    color: #131313;
}

.deset .broj {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.deset h1 {
    font-size: 12rem;
    font-style: italic;
    line-height: 2;
    font-weight: 900;
}

.deset .broj p {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 6rem;
}

@media (min-width: 992px) {
    .deset {
        -ms-grid-column: 9;
        -ms-grid-column-span: 2;
        grid-column: 9 / span 2;
        -ms-grid-row: 11;
        -ms-grid-row-span: 4;
        grid-row: 11 / span 4;
        background: url('../img/crte.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-color: #fff;
        color: #131313;
    }

    .deset h1 {
        font-size: 6vw;
        font-style: italic;
        line-height: 2;
        font-weight: 900;
    }

    .deset .broj p {
        font-family: 'Playfair Display', serif;
        font-weight: 500;
        font-size: 4rem;
    }
}

.jedanaest {
    -ms-grid-column: 6;
    -ms-grid-column-span: 5;
    grid-column: 6 / span 5;
    -ms-grid-row: 25;
    -ms-grid-row-span: 2;
    grid-row: 25 / span 2;
    background: url('../img/poklon.png');
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #131313;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.jedanaest .broj {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.jedanaest h1 {
    line-height: 1;
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    padding-top: .5vw;
}

.jedanaest .broj p {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 3rem;
    border-bottom: 5px solid #fff;
    padding-bottom: 2px;

}

@media (min-width: 992px) {
    .jedanaest {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / span 2;
        -ms-grid-row: 13;
        -ms-grid-row-span: 2;
        grid-row: 13 / span 2;
        background: url('../img/poklon.png');
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #131313;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .jedanaest h1 {
        line-height: 1;
        font-family: 'Playfair Display', serif;
        font-size: 1.8vw;
        padding-top: .5vw;
    }

    .jedanaest .broj p {
        text-transform: uppercase;
        font-weight: 900;
        font-size: 1.25rem;
        border-bottom: 5px solid #fff;
        padding-bottom: 2px;

    }
}

.dvanaest {

    -ms-grid-column: 6;

    -ms-grid-column-span: 5;

    grid-column: 6 / span 5;
    -ms-grid-row: 27;
    -ms-grid-row-span: 4;
    grid-row: 27 / span 4;
    background: url('../img/stapic.png');
    background-color: #fff;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    color: #131313;
}

.dvanaest .broj {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.dvanaest h1 {
    font-family: 'Playfair Display', serif;
    font-size: 16rem;
    line-height: 1;
    letter-spacing: -5;
    padding-left: 2rem;

}

.dvanaest .broj p {
    text-transform: uppercase;
    font-size: 4rem;
    letter-spacing: 25;
    margin-right: -25;
    font-weight: 700;
    text-align: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

@media (min-width: 992px) {
    .dvanaest {

        -ms-grid-column: 3;

        -ms-grid-column-span: 2;

        grid-column: 3 / span 2;
        -ms-grid-row: 13;
        -ms-grid-row-span: 4;
        grid-row: 13 / span 4;
        background: url('../img/stapic.png');
        background-color: #fff;
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;
        color: #131313;
    }

    .dvanaest h1 {
        font-family: 'Playfair Display', serif;
        font-size: 7vw;
        line-height: 1;
        letter-spacing: -5;

    }

    .dvanaest .broj p {
        text-transform: uppercase;
        font-size: 1.25vw;
        letter-spacing: 25;
        margin-right: -25;
        font-weight: 700;
        text-align: center;
        -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    }
}

.trinaest {

    -ms-grid-column: 1;

    -ms-grid-column-span: 5;

    grid-column: 1 / span 5;
    -ms-grid-row: 29;
    -ms-grid-row-span: 4;
    grid-row: 29 / span 4;
    background: url('../img/zvijezdice2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #131313;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

}

.trinaest .broj {
    width: 100%;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    text-align: center;
}

.trinaest h1 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    line-height: 1;
    font-size: 8rem;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.trinaest .broj > p {
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: 1.5;
    padding-bottom: 14rem;
    padding-top: 6rem;
}

@media (min-width: 992px) {
    .trinaest {

        -ms-grid-column: 5;

        -ms-grid-column-span: 4;

        grid-column: 5 / span 4;
        -ms-grid-row: 13;
        -ms-grid-row-span: 2;
        grid-row: 13 / span 2;
        background: url('../img/zvijezdice2.png');
        background-repeat: no-repeat;
        background-position: center;
        background-color: #131313;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

    }

    .trinaest .broj {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

        text-align: center;
    }

    .trinaest h1 {
        font-family: 'Playfair Display', serif;
        font-style: italic;
        line-height: 1;
        font-size: 3.5vw;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .trinaest .broj > p {
        text-transform: uppercase;
        font-size: 1.5rem;
        font-weight: 300;
        letter-spacing: 1.5;
        padding-bottom: 0;
        padding-top: 0;
    }
}

.cetranaest {
    -ms-grid-column: 6;
    -ms-grid-column-span: 5;
    grid-column: 6 / span 5;
    -ms-grid-row: 31;
    -ms-grid-row-span: 2;
    grid-row: 31 / span 2;
    background: url('../img/zlatna.jpg');
    background-position: bottom;
    color: #131313;
}

.cetranaest h1 {
    font-family: 'Playfair Display', serif;
    font-size: 16rem;
    line-height: 1;
    margin-top: -6vw;
    padding-left: 3rem;
}

.cetranaest .crno {
    font-size: 2rem;
    position: relative;
    left: -65px;
    font-weight: 900;
    padding: .5rem 2rem;
    letter-spacing: 3;

}

@media (min-width: 992px) {
    .cetranaest {

        -ms-grid-column: 5;

        -ms-grid-column-span: 2;

        grid-column: 5 / span 2;
        -ms-grid-row: 15;
        -ms-grid-row-span: 2;
        grid-row: 15 / span 2;
        background: url('../img/zlatna.jpg');
        background-position: bottom;
        color: #131313;
    }

    .cetranaest h1 {
        font-family: 'Playfair Display', serif;
        font-size: 7vw;
        line-height: 1;
        margin-top: -1vw;
    }

    .cetranaest .crno {
        font-size: 1vw;
        position: relative;
        left: -35px;
        font-weight: 900;
        padding: .15vw .5vw;
        letter-spacing: 3;

    }
}

.petanaest {
    -ms-grid-column: 1;
    -ms-grid-column-span: 10;
    grid-column: 1 / span 10;
    -ms-grid-row: 33;
    -ms-grid-row-span: 2;
    grid-row: 33 / span 2;
    background: url('../img/zigzag.png');
    background-repeat: no-repeat;
    background-size: 25% 100%;
    background-position: right;
    background-color: #fff;
    color: #131313;
}

.petanaest .cont-hor {
    width: 70%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.petanaest .broj {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.petanaest .broj > p {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 2rem;
}

.petanaest h1 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 15rem;
    line-height: 1;
    font-weight: 900;
    margin-top: -4rem;
    padding-left: 2rem;
}

@media (min-width: 992px) {
    .petanaest {
        -ms-grid-column: 7;
        -ms-grid-column-span: 4;
        grid-column: 7 / span 4;
        -ms-grid-row: 15;
        -ms-grid-row-span: 2;
        grid-row: 15 / span 2;
        background: url('../img/zigzag.png');
        background-repeat: no-repeat;
        background-size: 25% 100%;
        background-position: right;
        background-color: #fff;
        color: #131313;
    }

    .petanaest h1 {
        font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 6vw;
        line-height: 1;
        font-weight: 900;
        margin-top: -1.5vw;
    }

    .petanaest .broj > p {
        text-transform: uppercase;
        font-weight: 300;
        font-size: 1.65rem;
    }
}

.sesnaest {

    -ms-grid-column: 1;

    -ms-grid-column-span: 5;

    grid-column: 1 / span 5;
    -ms-grid-row: 35;
    -ms-grid-row-span: 4;
    grid-row: 35 / span 4;
    background-color: #fff;
    color: #131313;
}

.sesnaest .cont {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.ukras img {
    max-width: 5rem;
}

.sesnaest h1 {
    font-weight: 900;
    font-size: 12rem;
    line-height: 1;
}

.sesnaest .broj > p {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 3rem;
    letter-spacing: 2;
}

@media (min-width: 992px) {
    .sesnaest {

        -ms-grid-column: 1;

        -ms-grid-column-span: 2;

        grid-column: 1 / span 2;
        -ms-grid-row: 15;
        -ms-grid-row-span: 5;
        grid-row: 15/ span 5;
        background-color: #fff;
        color: #131313;
    }

    .sesnaest h1 {
        font-weight: 900;
        font-size: 6vw;
        line-height: 1;
    }

    .sesnaest .broj > p {
        text-transform: uppercase;
        font-weight: 300;
        font-size: 2.25vw;
        letter-spacing: 2;
    }

    .ukras img {
        max-width: 2vw;
    }
}

.sedamnaest {

    -ms-grid-column: 6;

    -ms-grid-column-span: 5;

    grid-column: 6 / span 5;
    -ms-grid-row: 35;
    -ms-grid-row-span: 2;
    grid-row: 35 / span 2;
    background: url('../img/borici.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: left center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    color: #131313;

}

.sedamnaest .cont-hor {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.sedamnaest .broj > p {
    font-size: 3rem;
    font-style: italic;
    text-transform: uppercase;
    font-weight: 900;
    color: #fff;
}

.sedamnaest h1 {
    font-family: 'Playfair Display', serif;
    font-size: 12rem;
    font-weight: 600;
    line-height: 1;
    margin-top: -3rem;
    color: #fff;
}

@media (min-width: 992px) {
    .sedamnaest {

        -ms-grid-column: 3;

        -ms-grid-column-span: 4;

        grid-column: 3 / span 4;
        -ms-grid-row: 17;
        -ms-grid-row-span: 2;
        grid-row: 17 / span 2;
        background: url('../img/borici.jpg');
        background-size: 50% 100%;
        background-repeat: no-repeat;
        background-color: #fff;
        background-position: left center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        color: #131313;

    }

    .sedamnaest .cont-hor {
        width: 50%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .sedamnaest .broj > p {
        font-size: 1.25vw;
        font-style: italic;
        text-transform: uppercase;
        font-weight: 900;
        color: #131313;
    }

    .sedamnaest h1 {
        font-family: 'Playfair Display', serif;
        font-size: 5vw;
        font-weight: 400;
        line-height: 1;
        margin-top: -1vw;
        color: #131313;
    }
}

.osamnaest {

    -ms-grid-column: 6;

    -ms-grid-column-span: 5;

    grid-column: 6 / span 5;
    -ms-grid-row: 37;
    -ms-grid-row-span: 4;
    grid-row: 37 / span 4;
    background-color: #fff;
    color: #131313;
    padding: 1vw 0;
}

.osamnaest .cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.pahulja img {
    width: 12rem;
}

.osamnaest h1 {
    font-family: 'Playfair Display', serif;
    font-size: 14rem;
    line-height: 1;
    font-weight: 900;
}

.osamnaest .broj > p {
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 700;
}

@media (min-width: 992px) {
    .osamnaest {

        -ms-grid-column: 7;

        -ms-grid-column-span: 2;

        grid-column: 7 / span 2;
        -ms-grid-row: 17;
        -ms-grid-row-span: 4;
        grid-row: 17 / span 4;
        background-color: #fff;
        color: #131313;
        padding: 1vw 0;
    }

    .pahulja img {
        width: 7vw;
    }

    .osamnaest h1 {
        font-family: 'Playfair Display', serif;
        font-size: 5vw;
        line-height: 1;
        font-weight: 900;
    }

    .osamnaest .broj > p {
        text-transform: uppercase;
        font-size: 1.5vw;
        font-weight: 700;
    }
}

.devetnaest {

    -ms-grid-column: 1;

    -ms-grid-column-span: 5;

    grid-column: 1 / span 5;
    -ms-grid-row: 39;
    -ms-grid-row-span: 4;
    grid-row: 39 / span 4;
    background: url('../img/tockice2.jpg');
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 1vw 0;
}

.devetnaest .cont {
    max-width: 50%;
    color: #131313;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.devetnaest h1 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    font-family: 'Playfair Display', serif;
    font-size: 6rem;
    padding-bottom: .5vw;
}

.devetnaest .broj > p {
    text-transform: uppercase;
    font-size: 2.5rem;
    padding-bottom: 14rem;
}

.devetnaest .pow {
    padding-top: 4vw;
}

@media (min-width: 992px) {
    .devetnaest {

        -ms-grid-column: 9;

        -ms-grid-column-span: 2;

        grid-column: 9 / span 2;
        -ms-grid-row: 17;
        -ms-grid-row-span: 4;
        grid-row: 17 / span 4;
        background: url('../img/tockice2.jpg');
        background-size: 50% 100%;
        background-repeat: no-repeat;
        background-color: #fff;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        padding: 1vw 0;
    }

    .devetnaest .cont {
        max-width: 50%;
        color: #131313;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-around;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .devetnaest h1 {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        font-family: 'Playfair Display', serif;
        font-size: 2.75vw;
        padding-bottom: .5vw;
    }

    .devetnaest .broj > p {
        text-transform: uppercase;
        font-size: 1vw;
        padding-bottom: 6vw;
    }

    .devetnaest .pow {
        padding-top: 4vw;
    }
}

.dvadeset {

    -ms-grid-column: 6;

    -ms-grid-column-span: 5;

    grid-column: 6 / span 5;
    -ms-grid-row: 41;
    -ms-grid-row-span: 2;
    grid-row: 41 / span 2;
    background: url('../img/brush.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
    background-color: #fff;
    color: #131313;
    -ms-flex-pack: distribute;
    justify-content: space-around;

}

.dvadeset .cont-hor {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.dvadeset .broj {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

.dvadeset h1 {
    line-height: 1;
    margin-top: -.5vw;
    font-size: 12rem;
    letter-spacing: -5;
    font-style: italic;
}

.dvadeset .broj p {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 3rem;
    padding-right: .05vw
}

.dvadeset .pow {
    width: 25%;
}

@media (min-width: 992px) {
    .dvadeset {

        -ms-grid-column: 3;

        -ms-grid-column-span: 4;

        grid-column: 3 / span 4;
        -ms-grid-row: 19;
        -ms-grid-row-span: 2;
        grid-row: 19 / span 2;
        background: url('../img/brush.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 85%;
        background-color: #fff;
        color: #131313;
        -ms-flex-pack: distribute;
        justify-content: space-around;

    }

    .dvadeset .cont-hor {
        width: 100%;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .dvadeset .broj {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 75%;
    }

    .dvadeset h1 {
        line-height: 1;
        margin-top: -.5vw;
        font-size: 5vw;
        letter-spacing: -5;
        font-style: italic;
    }

    .dvadeset .broj p {
        font-weight: 300;
        text-transform: uppercase;
        font-size: 1.2vw;
        padding-right: .05vw
    }

    .dvadeset .pow {
        width: 25%;
    }
}

.dvadesetjedan {

    -ms-grid-column: 1;

    -ms-grid-column-span: 5;

    grid-column: 1 / span 5;
    -ms-grid-row: 43;
    -ms-grid-row-span: 4;
    grid-row: 43 / span 4;
    background-color: #fff;
    color: #131313;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}

.dvadesetjedan .cont {

    -ms-flex-pack: distribute;

    justify-content: space-around;
    height: 70%;
}

.dvadesetjedan h1 {
    font-family: 'Playfair Display', serif;
    font-size: 14rem;
    line-height: 1;
    margin-top: -3rem;
    font-weight: 900;

}

.dvadesetjedan .broj > p {
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 900;

}



.bor img {
    width: 16rem;
    height: auto;

}

@media (min-width: 992px) {
    .dvadesetjedan {

        -ms-grid-column: 1;

        -ms-grid-column-span: 2;

        grid-column: 1 / span 2;
        -ms-grid-row: 20;
        -ms-grid-row-span: 5;
        grid-row: 20/ span 5;
        background-color: #fff;
        color: #131313;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
    }

    .dvadesetjedan .cont {

        -ms-flex-pack: distribute;

        justify-content: space-around;
        height: 70%;
    }

    .dvadesetjedan h1 {
        font-family: 'Playfair Display', serif;
        font-size: 6vw;
        line-height: 1;
        margin-top: -1.5vw;
        font-weight: 900;

    }

    .dvadesetjedan .broj > p {
        text-transform: uppercase;
        font-size: 1vw;
        font-weight: 900;

    }



    .bor img {
        width: 8vw;
        height: auto;

    }
}

.dvadesetdva {

    -ms-grid-column: 6;

    -ms-grid-column-span: 5;

    grid-column: 6 / span 5;
    -ms-grid-row: 43;
    -ms-grid-row-span: 4;
    grid-row: 43 / span 4;
    background-color: #131313;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 1vw 0;
}

.dvadesetdva .cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.jelen img {
    width: 14rem;
}

.dvadesetdva .broj > p {
    text-transform: uppercase;
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 1.5;
    padding-bottom: .25vw;
}

.dvadesetdva h1 {
    font-size: 4.5rem;
    text-align: center;
    line-height: 1.1;
}

@media (min-width: 992px) {
    .dvadesetdva {

        -ms-grid-column: 3;

        -ms-grid-column-span: 2;

        grid-column: 3 / span 2;
        -ms-grid-row: 21;
        -ms-grid-row-span: 4;
        grid-row: 21 / span 4;
        background-color: #131313;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        padding: 1vw 0;
    }

    .dvadesetdva .cont {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    .jelen img {
        width: 6.5vw;
    }

    .dvadesetdva .broj > p {
        text-transform: uppercase;
        font-size: 1vw;
        font-weight: 300;
        letter-spacing: 1.5;
        padding-bottom: .25vw;
    }

    .dvadesetdva h1 {
        font-size: 1.5vw;
        text-align: center;
        line-height: 1.25;
    }
}

.dvadesettri {

    -ms-grid-column: 1;

    -ms-grid-column-span: 10;

    grid-column: 1 / span 10;
    -ms-grid-row: 47;
    -ms-grid-row-span: 2;
    grid-row: 47 / span 2;
    background-color: #fff;
    color: #131313;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 1vw 0;
}

.dvadesettri .cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.dvadesettri .zlatno {
    padding: .5rem 4rem;
}

.dvadesettri .zlatno p {
    text-transform: none;
}

.dvadesettri h1 {
    font-weight: 900;
    font-style: italic;
    letter-spacing: -1;
    line-height: 1;
    font-size: 12rem;
}



.ho img {
    max-width: 14rem;

}

@media (min-width: 992px) {
    .dvadesettri {

        -ms-grid-column: 5;

        -ms-grid-column-span: 2;

        grid-column: 5 / span 2;
        -ms-grid-row: 21;
        -ms-grid-row-span: 4;
        grid-row: 21 / span 4;
        background-color: #fff;
        color: #131313;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        padding: 1vw 0;
    }

    .dvadesettri .cont {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .dvadesettri .zlatno {
        padding: 0.01vw 1vw;
    }

    .dvadesettri .zlatno p {
        text-transform: none;
    }

    .dvadesettri h1 {
        font-weight: 900;
        font-style: italic;
        letter-spacing: -1;
        line-height: 1;
        font-size: 4.5vw;
    }



    .ho img {
        max-width: 6vw;

    }
}

.dvadesetcetri {

    -ms-grid-column: 1;

    -ms-grid-column-span: 10;

    grid-column: 1 / span 10;
    -ms-grid-row: 49;
    -ms-grid-row-span: 4;
    grid-row: 49 / span 4;
    background: url('../img/zlatna.jpg');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1rem solid #131313;
    color: #131313;
}

.dvadesetcetri .cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.dvadesetcetri .broj > p {
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 900;
}

.dvadesetcetri h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 20rem;
    line-height: 1;
    margin-top: -6rem;
    padding-left: rem;

}

.dvadesetcetri h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 6rem;
    padding-top: .5vw;

}

@media (min-width: 992px) {
    .dvadesetcetri {
        -ms-grid-column: 7;
        -ms-grid-column-span: 4;
        grid-column: 7 / span 4;
        -ms-grid-row: 21;
        -ms-grid-row-span: 4;
        grid-row: 21 / span 4;
        background: url('../img/zlatna.jpg');
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: cover;
        border: 0.5vw solid #131313;
        color: #131313;
    }

    .dvadesetcetri .cont {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around
    }

    .dvadesetcetri .broj > p {
        text-transform: uppercase;
        font-size: 1vw;
        font-weight: 900;
    }

    .dvadesetcetri h1 {
        font-family: 'Playfair Display', serif;
        font-weight: 900;
        font-size: 7vw;
        line-height: 1;
        margin-top: -2vw;
        padding-left: 1vw;
    }

    .dvadesetcetri h2 {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-style: italic;
        font-size: 2vw;
        padding-top: .5vw;

    }
}


footer {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.sadr {
    max-width: 1200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 10vw;
    margin-right: auto;
    margin-left: auto;
}

.miss {
    width: 20vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.miss img {
    width: 20vw;
}

.leg {
    padding-top: 6vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.leg p {
    font-size: 2rem;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 1rem;
    font-weight: 700;

}

@media (min-width: 992px) {
    footer {
        padding-top: 0rem;
    }

    .sadr {
        max-width: 1200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-bottom: 10vw;
        margin-right: auto;
        margin-left: auto;
    }

    .leg {
        padding-top: 2vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .leg p {
        font-size: 1rem;
        text-align: center;
        text-transform: uppercase;
        padding-bottom: 1rem;
        font-weight: 700;
        padding-left: 2rem;

    }

    .miss {
        width: 5vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-top: 0;
    }

    .miss img {
        width: 5vw;
    }

    .sadr {
        max-width: 1200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-bottom: 2vw;
        margin-right: auto;
        margin-left: auto;
    }
}