html {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
}

img {
    pointer-events: none;
}

.h2 {
    color: #088fcc;
}

#navigacija {
    background-color: rgba(251, 251, 251, 1);
    height: 110px;
    width: 100%;
    position: fixed;
    top: 0;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 1px 15px 0px #696969;
    z-index: 2;
}

.displayFlex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

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

.navWrapper {
    height: 100%;
    width: 100%;
    justify-content: space-between;
}

#naslovna {
    height: 100vh;
    width: 100%;
    z-index: 2;
    position: relative;
    background-color: black;
}

#overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    overflow: hidden;
}

#logo {
    will-change: transform;
    background: url('resursi/logo.png');
    background-size: cover;
    width: 600px;
    height: 75px;
    cursor: pointer;
}

.logoWrapper {
    position: absolute;
    display: none;
    left: 50%;
    margin-left: -200pt;
    top: 40%;
}

.slideUpLogo {
    top: 40px;
}

.logoHr {
    border-top: 1px solid #eee;
    width: 0px;
    -webkit-transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    ;
    ;
    -moz-transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    ;
    ;
    -o-transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    ;
    ;
    transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    ;
    ;
}

#balonshopLogo {
    will-change: transform;
    background: url('resursi/balonshop-boja.png');
    background-size: cover;
    width: 300px;
    height: 51px;
    display: none;
    cursor: pointer;
}

#balonshopLogo:hover {
    background: url('resursi/balonshop-cb.png');
    background-size: cover;
    width: 300px;
    height: 51px;
}

.logoAnimacija {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#detaljnije {
    position: absolute;
    overflow: hidden;
    bottom: 0;
    -webkit-transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    -moz-transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    -o-transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#btnUslugeWrapper {
    width: 100%;
}

.btnUsluge {
    height: 50px !important;
    width: 100% !important;
    background-color: #088fcc !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.btn-5:before {
    font-size: 190% !important;
    line-height: 1.8 !important;
}

.btn-5:active:before {
    color: #68bcff !important;
}

.btn_detaljnije {
    bottom: -50px;
    height: 50px !important;
    min-width: 154px !important;
    background-color: #0aaaf3 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.btn.focus,
.btn:focus,
.btn:hover {
    color: #ffffff !important;
}

.btn span {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-weight: bold !important;
}

.btn {
    margin: 0 !important;
}

#naslovna .animacija {
    animation-name: naslovnaFadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 20s;
}

@keyframes naslovnaFadeInOut {
    0% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    92% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#naslovna .animacija:nth-of-type(1) {
    animation-delay: 15s;
}

#naslovna .animacija:nth-of-type(2) {
    animation-delay: 10s;
}

#naslovna .animacija:nth-of-type(3) {
    animation-delay: 5s;
}

#cnaslovna .animacija:nth-of-type(4) {
    animation-delay: 0s;
}

.animacija {
    z-index: -1;
}

#slika1 {
    background: url('albumi/slika1.jpg');
    background-size: cover;
    height: 100%;
    width: 100%;
    position: absolute;
}

#slika2 {
    background: url('albumi/slika2.jpg');
    background-size: cover;
    height: 100%;
    width: 100%;
    position: absolute;
}

#slika3 {
    background: url('albumi/slika3.jpg');
    background-size: cover;
    height: 100%;
    width: 100%;
    position: absolute;
}

#slika4 {
    background: url('albumi/slika4.jpg');
    background-size: cover;
    height: 100%;
    width: 100%;
    position: absolute;
}

#o-nama {
    width: 100%;
    height: 100vh;
    flex-direction: column !important;
    background-color: #0aaaf3;
    box-shadow: inset 0 -29px 60px -38px white;
}

.txtWrapper {
    height: 55%;
    width: 100%;
    padding-top: 120px;
    background-color: rgba(0, 0, 0, 0.4);
    flex-direction: column;
    justify-content: flex-start !important;
}

.sectionHr {
    margin-top: 0;
    margin-bottom: 35px;
    width: 70px;
    border-top: 2px solid #0aaaf3;
}

.verSectionHr {
    border-right: solid 1px white;
    height: 90%;
}

.txtWrapper h1,
.txtWrapper h3 {
    color: white;
}

.txtWrapper h1 {
    text-align: center;
    font-weight: bold;
}

.txtWrapper h3 {
    font-size: 15pt;
    line-height: 35px;
    max-width: 580px;
}

.oNamaContainer {
    text-align: center;
}

#usluge {
    overflow: hidden;
    height: 100vh !important;
    padding-top: 140px;
    padding-bottom: 10px;
    justify-content: space-around !important;
    background-color: #088fcc;
}

.leftSide {
    flex-wrap: wrap;
    height: 100%;
    width: 50%;
    justify-content: space-around;
    align-items: flex-start;
}

.rightSide {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 50%;
}

#album {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.96);
}

.carouselAlbum {
    width: 950px;
    height: 534px;
}

#albumLeteciObj .carouselAlbum {
    width: 950px;
    height: 713px;
}

.exitButton {
    position: fixed;
    top: 25px;
    right: 25px;
    cursor: pointer;
}

.exitButton span {
    font-size: 50px;
    color: #ffffff;
}

.hiden {
    opacity: 0;
    margin-top: -255px;
}

.firstColumn,
.secondColumn {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    will-change: transform;
}

.firstColumn {
    margin-bottom: 10%;
}

.wedding {
    margin: 0 35px;
}

.flyObj {
    margin: 0 35px;
}

.companies .iconTop {
    background: url('resursi/firme.png');
}

.wedding .iconTop {
    background: url('resursi/vencanja.png');
}

.birthday .iconTop {
    background: url('resursi/rodjendani.png');
}

.animacijeAlbum {
    -webkit-transition: all 0.6s cubic-bezier(0.58, 0.2, 0.38, 1.26);
    -moz-transition: all 0.6s cubic-bezier(0.58, 0.2, 0.38, 1.26);
    -o-transition: all 0.6s cubic-bezier(0.58, 0.2, 0.38, 1.26);
    transition: all 0.6s cubic-bezier(0.58, 0.2, 0.38, 1.26);
}

.albumContainer {
    background: url('resursi/balonalbum.jpg');
    background-size: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    display: none;
}

.wedding .verticalHr {
    margin-top: 5px;
}

.iconTop {
    background-size: cover !important;
    width: 100px;
    height: 100px;
}

.albumIcon {
    background-size: cover !important;
    width: 210px;
    height: 220px;
}

.wedding .albumIcon {
    background: url('resursi/iconSvadbe.png');
}

.birthday .albumIcon {
    background: url('resursi/iconRodjendani.png');
}

.companies .albumIcon {
    background: url('resursi/iconFirme.png');
}

.flyObj .albumIcon {
    background: url('resursi/leteci_objekti.png');
}

.iconHr {
    border-right: 1px solid #ffffff;
    margin: 25px 0;
    height: 0;
}

.topIconSlide {
    height: 45% !important;
}

.albumIconContainer {
    will-change: transform;
    border: 1px solid white;
    border-radius: 50%;
    box-shadow: 0 0 40px 0px black;
    overflow: hidden;
    width: 210px;
    height: 210px;
    cursor: pointer;
}

.hoverText {
    height: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    -moz-transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    -o-transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.albumIconContainer:hover .hoverText {
    height: 100%;
}

.hoverText h4 {
    color: #ffffff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.leftCards {
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    padding: 40px 0;
    border-radius: 10px;
    width: 400px;
    height: 81px;
    background-color: rgba(251, 251, 251, 0.98);
    box-shadow: 7px 7px 34px -7px #555;
}

.cardWrapper {
    flex-direction: column;
    justify-content: flex-start;
    will-change: transform;
    margin: 0 10px;
}

.cardIconSlide {
    margin-bottom: -35px !important;
}

#flyingObjects.cardOpen {
    min-height: 240px;
}

#decoration.cardOpen {
    min-height: 275px;
}

.icon {
    margin: 10px;
}

#decoration {
    margin-bottom: 10px;
    min-height: 0;
}

#flyingObjects {
    min-height: 0;
}

.iconWrapper {
    border-radius: 50%;
    background-color: rgba(251, 251, 251, 1);
    height: 70px;
    border: solid 1.5px transparent;
}

.animacije {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.animacijeAlbumIcon {
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
}

.iconContainer {
    z-index: 1;
    box-shadow: 0 0 48px -9px black;
    border-radius: 50%;
    margin-bottom: -76px;
}

.iconDecoration {
    background: url('resursi/dekoracije.png');
    background-size: cover;
    width: 45px;
    height: 45px;
}

.infoText {
    height: 100%;
    width: 109%;
    text-align: center;
    box-shadow: inset 0 0px 15px -3px #5d5d5d;
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-family: 'Candal', sans-serif;
}

.infoText h2 {
    color: #088fcc;
}

.infoText:hover {
    box-shadow: inset 0 0px 15px 0px #5d5d5d;
}

.descriptionInfo {
    margin-top: 5px;
    text-align: left;
    display: inline-block;
}

.bullet {
    color: #088fcc;
    font-size: small !important;
    margin-right: 10px;
}

.descriptionInfo h4 {
    display: flex;
    align-items: center;
}

.iconFlying {
    background: url('resursi/leteciobjekti.png');
    background-size: cover;
    width: 45px;
    height: 45px;
}

.navElement {
    margin: 0 30px;
}

#logoMegabrend {
    background: url('resursi/megabrend-logo.png');
    background-size: cover;
    height: 45px;
    width: 245px;
    cursor: pointer;
}

#linkovi {
    justify-content: flex-start;
}

.linkItem {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 70%;
}

.linkHr {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 30%;
}

.linkItem h4 {
    color: #5d5d5d;
    font-family: 'Anton', sans-serif;
    user-select: none;
    font-weight: bold;
}

.link2 {
    margin: 0 15px;
}

.link4 {
    margin: 0 15px;
}

.link1,
.link2,
.link3,
.link4 {
    height: 100%;
    cursor: pointer;
}

.navHr {
    border-top: 2px solid #088fcc;
    width: 0px;
    margin: 0;
    -webkit-transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    -moz-transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    -o-transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.navHrActive {
    width: 100%;
}

.link1:hover hr {
    width: 100%;
}

.link2:hover hr {
    width: 100%;
}

.link3:hover hr {
    width: 100%;
}

.link4:hover hr {
    width: 100%;
}

#drustveneMreze {
    display: flex;
    align-items: center;
    justify-content: center;
}

#leftNav {
    justify-content: flex-start !important;
}

#rightNav {
    justify-content: flex-end !important;
}

#logoBalonshop {
    background: url('resursi/balonshop-boja.png');
    background-size: cover;
    height: 30px;
    width: 180px;
    cursor: pointer;
}

#logoBalonshop:hover {
    background: url('resursi/balonshop-cb.png');
    background-size: cover;
    height: 30px;
    width: 180px;
}

.iconRadius {
    border-radius: 50%;
    padding: 11px;
    transition: 1s all cubic-bezier(0.18, 0.89, 0.32, 1.28);
    cursor: pointer;
}

.iconRadius:hover {
    background-color: #34495E;
}

.iconRadius:hover #insta {
    background: url('resursi/instaWhite.png');
    transition: 0.5s all cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.iconRadius:hover #fb {
    background: url('resursi/fbWhite.png');
    transition: 0.5s all cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.iconRadius:hover #yt {
    background: url('resursi/yt_white.png');
    transition: 0.5s all cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.verticalHr {
    height: 70px;
    border-right: 1px solid #bbbbbb;
    margin: 0;
}

.insta {
    border: 2px solid #d02d88;
    margin-left: 5px;
    margin-right: 5px;
}

.fb {
    border: 2px solid #2e78be;
    margin-right: 5px;
}

.yt {
    border: 2px solid #fd3832;
    margin-left: 5px;
}

#fb {
    background: url('resursi/fb.png');
    background-size: cover !important;
    height: 24px !important;
    width: 24px !important;
}

#yt {
    background: url('resursi/yt.png');
    background-size: cover !important;
    height: 25px;
    width: 25px;
}

#insta {
    background: url('resursi/insta.png');
    background-size: cover !important;
    height: 25px !important;
    width: 25px !important;
}

.backlayerContainer {
    will-change: transform;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    overflow: hidden;
}

.backlayer {
    background: url(resursi/baloniPozadina.jpg) no-repeat center center;
    background-size: cover;
    position: relative;
    width: 100vw;
    height: 100vh;
}

#klijenti {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.clientImg {
    background-size: cover !important;
    margin: 15px;
}

.clientImgHdn {
    visibility: hidden;
    width: 150px;
}

.c1 {
    background: url("resursi/klijenti/avia.png");
}

.c2 {
    background: url("resursi/klijenti/balkanbet.png");
}

.c3 {
    background: url("resursi/klijenti/carlsberg.png");
}

.c4 {
    background: url("resursi/klijenti/delta.png");
}

.c5 {
    background: url("resursi/klijenti/dunavosiguranje.png");
}

.c6 {
    background: url("resursi/klijenti/exitfestival.png");
}

.c7 {
    background: url("resursi/klijenti/glencore.png");
}

.c8 {
    background: url("resursi/klijenti/idea.png");
}

.c9 {
    background: url("resursi/klijenti/lafarge.png");
}

.c10 {
    background: url("resursi/klijenti/maxbet.png");
}

.c11 {
    background: url("resursi/klijenti/mercator.png");
}

.c12 {
    background: url("resursi/klijenti/otp.png");
}

.c13 {
    background: url("resursi/klijenti/raiffeisen-agro.png");
}

.c14 {
    background: url("resursi/klijenti/telenor.png");
}

#kontakt {
    background-color: rgba(52, 73, 94, 0.95);
    padding-top: 130px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    height: 95vh;
    display: flex;
}

.leftSideContact {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.rightSideContact {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#prodavnicaSlide {
    width: 80%;
    border: 15px solid #151d25;
}

.contactInfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.contactWrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.contactHr {
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
}

.contactHeading {
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.rightSideContact span {
    margin-right: 10px;
}

.contactInfo h1 {
    color: #ececec;
    margin-top: 0;
}

.contactInfo h2 {
    color: #088fcc;
    margin: 0;
}

.contactInfo h4 {
    color: #ececec;
}

.leftSideContact .iconRadius {
    padding: 30px;
}

.leftSideContact .insta {
    margin-left: 30px;
}

.leftSideContact #fb {
    width: 60px !important;
    height: 60px !important;
}

.leftSideContact #insta {
    width: 60px !important;
    height: 60px !important;
}

#footer {
    height: 40px;
    width: 100%;
    background-color: #2c3e50;
}

#footer h4 {
    color: white;
}

@media screen and (max-height:850px) {
    .topIconSlide {
        height: 25% !important;
    }
    .albumIconContainer {
        width: 180px;
        height: 180px;
    }
    #usluge {
        padding-top: 110px;
        padding-bottom: 20px;
    }
    #navigacija {
        height: 90px;
    }
    .leftCards {
        width: 340px;
        padding: 30px 0;
    }
    #flyingObjects.cardOpen {
        min-height: 200px;
    }
    #decoration.cardOpen {
        min-height: 230px;
    }
    #mapa {
        height: 200px;
    }
    .txtWrapper {
        height: 55%;
        width: 100%;
        padding-top: 50px;
        background-color: rgba(0, 0, 0, 0.4);
        flex-direction: column;
        justify-content: flex-start !important;
    }
}

@media screen and (max-width:960px) {
    #desktop-view {
        display: none!important;
    }
    #mobile-view {
        display: block !important;
    }
}

#desktop-view {
    display: block;
}

#mobile-view {
    display: none;
    height: 100vh;
    width: 100%;
}