/* MAIN STRUCTURE CSS */

/* VARIABLES */
:root {
    --darkpink: #ffe6e6;
    --pink: #f9d6d2;
    --lightpink: #f6eaec;
    --gold: #decda1;
    --darkgold: #d2b565;
    --slyel_20:rgba(254,193,39,.2);
    --slg_20:rgba(86,191,152,.2);
    --fl:24px;
    --fxl:36px;
    --fm:20px;
    --fn:16px;
    --fs:14px;
    --fxs:12px;
    --th:rgba(86,191,12,.05);
}

*{padding:0px; margin:0px; }
@font-face {font-family: icons; src: url(font-awesome/fonts/FontAwesome.otf);}
/*@font-face {font-family: asap; src: url('fonts/asap_regular.ttf');}*/
/*@font-face {font-family: cherokee; src: url('fonts/plantagenet_cherokee.ttf');}*/
@font-face {font-family: numbers; src: url('fonts/PlayfairDisplayRegular.ttf');}
@font-face {font-family: bobanFont; src: url('fonts/Montserrat-Regular.ttf');}
/* ELEMENTS*/

.buttons{
    background:var(--pg);
    min-width:200px;
    max-width:240px;
    margin:auto;
    box-sizing: border-box;
    padding:10px 16px;
    border-radius:6px;
    color:#eee;
    cursor: pointer;
    text-decoration: none;
}


HTML{width:100%; font-family: bobanFont}
BODY {width:100%; font-size:14px; font-family:bobanFont;}
img {border:0}
a{color:inherit;font-size:inherit;}
p{font-family: bobanFont; font-size: 16px; line-height: 1.5em}
.oblast_strane{width:100%; margin:auto; background: #010e1b;}
.index .oblast_zaglavlja{background: none}
.oblast_zaglavlja{
    font-family: bobanFont ;/*! width: 100%; */
    position: fixed; top: 0px; z-index: 10000; right: 0; left: 0;padding: 20px 0px 20px 10%; background: #010e1b;
    display: flex;
  justify-content: space-around;;
}
.oblast_zaglavlja.colorChange{background: rgba(1,1,1,.8);; transition: .3s;  ;
font-size: 16px!important;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-left: auto;
  _padding-right: 5%;
}
.oblast_zaglavlja.colorChange .zaglavlje_content{width: 85%; margin: auto;}
.oblast_zaglavlja.colorChange .glavni_meni ul{display: flex; justify-content: center;list-style: none; width:100%;}
.oblast_zaglavlja.colorChange .glavni_meni ul > li{}
.oblast_zaglavlja.colorChange .glavni_meni ul > li {text-align: center!important;;}

.oblast_zaglavlja_inner{width:960px;margin: auto; position:relative;}
.oblast_sadrzaja{width:100%; min-height:700px; ; margin:0 auto;}
p, a, h1,h2,h3,h4,h5,h6,li, label{color:#444;}
.top_baner, .mainTopBannerInner{width:100%;}

.pageBody p, .pageBody li, .pageBody a, .pageBody h1, .pageBody h2, .pageBody h3, .pageBody h4, .pageBody i{color: #f5f6f9}
/*CHANGE*/
.top_baner{overflow: hidden; height: 100vh!important; position: relative; z-index: 1; width: 100vw!important;}
.top_baner div{ height: 100%!important ;transform: none!important;width: 100%!important}
.top_baner img{height: auto!important;; width:auto!important;_left:-250px!important; ;right: 0px!important; ; display: block!important;;}
.icons {font-family: icons;text-decoration:none;}

.index .oblast_strane .pageTitle{color: #afa06a; text-align: center; padding: 20px 0px 10px; font-weight: normal; font-size: 30px; box-sizing: border-box}

.jssorb1 div,.jssorb1 .av{
   
  
    background: rgba(249, 214, 210,.5)!important;;
    border:1px solid var(--gold)!important;;
  
}

.jssorb1 .av { background-position: -65px -5px; background:rgba(255,255,255,.2)!important;}


/*EFFECTS*/







/* DISPLAY NONE */
#coll_middle .navigatorContainer{display: none!important;;}
.catalog_search{display: none;}
.popUpBox{display: none}
.fixed-futer{display: none}
.obavestenje{display:none;}
#mobBanner{display: none;}
.mobilni_baner{display: none;}
.flyOutMenu{

    width:20px;
    position:absolute;
    top:25px;right:69px;
    z-index: 200;
}
.flyOutMenu #cart_indication a{
    font-size:0;
    width:10px; height:10px;
    display: block;
    background: red;
    border-radius:50%;
    border:2px solid #fff;
}
.index .sideCatNav{display: block;}
.imageForMobile,
.mob_main_menu, .poruciTekst,.tempContainer,.footer_mob_info,
.wishListBar,.PageTrackNav,.iconOpis{
    display:none
}
.hidden{display: none!important}
.naslovna-slika-mobile{display: none}

.userBar,
.headerIconsDiv,
.CatTrackNav,
.homeMenu,
.popup_baner{display: none!important; }
.imate_nalog_dugme{display: none}
.nova_pesma-mobile{display: none}


.zaglavlje_content{position:relative;  _border-bottom: 1px solid var(--gold);}
.wrapperTraka .logo{position:absolute; top:14px;left:20px; width:250px; height:auto;display:block;}
.logo a{display:block; width:100%}
.logo img{display: block;width:100%;}

/*GLAVNI MENI*/
.glavni_meni{display:flex;justify-content:center; width: 100%; margin: 0 auto; _padding-right: 4%}
.glavni_meni ul{display: flex;list-style: none; width:;}
.glavni_meni ul > li{flex-grow: 1; text-align: center; }
.glavni_meni ul > li a{text-decoration: none; display: block; padding: 6px 20px; box-sizing: border-box; color:#8c6e26;  border-bottom:3px solid transparent; font-size:14px; }
.glavni_meni ul > li a:hover{border-bottom: #8c6e26; color: #8c6e26}
.glavni_meni ul > li a{color: #eee}
.glavni_meni ul > li{position: relative}
.glavni_meni ul > li:last-child{position: relative}
.glavni_meni li img{width: 140px; display: block; position: absolute; top: -13px; left: 0; right: 0;}
.glavni_meni ul > li:last-child:after{display: none}
.glavni_meni ul > li:last-child:before{display: none}
.mainMenuOver{position: relative}
.mainMenuOver:after{content: ""; height: 18px; width: 1px; background: var(--darkgold); display: inline-block; position: absolute; top: 10px; left: 20px;
animation-name: afterPomeranje; animation-iteration-count: 1; animation-duration: .3s; z-index: 1}
.mainMenuOver:before{content: ""; width: 18px; height: 1px; background: var(--darkgold); display: inline-block; position: absolute; top: 24px; left: 17px;
animation-name: beforePomeranje; animation-iteration-count: 1; animation-duration: .3s; z-index: 1} 

@keyframes afterPomeranje{
    from{height:0px};
    to{height: 18px};
}

@keyframes beforePomeranje{
    from{width:0px};
    to{width: 18px};
}


/* GORNJA TRAKA */
.wrapperTraka{ box-sizing:border-box;
    transition: all 1s;}
.oblast_zaglavlja .wrapperTraka{ position:relative; position: fixed;  top: 3px; left: 10%; _background: rgba(1, 14, 27); z-index: 100; }
.oblast_zaglavlja.colorChange .wrapperTraka{ position:relative; position: fixed;  top: 5px; left: 1%; _background: rgba(1, 14, 27); z-index: 100; }
.wrapperTraka h2{ text-align: center; display: flex; justify-content: center;}
.wrapperTraka h2 a{text-decoration: none;color: #eee;font-size: 27px; font-weight: lighter;  letter-spacing: 0.1em; font-family: ;}
.wrapperTraka .logo-slika{width: 60px; }
.wrapperTraka .logo-slika img{width: 100%; display: block}
.divLevi{padding:2px 10px;}
.divLevi .itemIcon{width:35px;  padding:4px 8px}
.divDesni .itemIcon{width:29px;  padding:8px 8px;}
.divDesni .item.right:last-child .itemIcon{padding: 8px 20px 8px 8px}

.fixedLink_form{display: flex; width:auto;position: absolute;top:6px; left:300px; display: none;}
.fixedLink_form div{margin:5px 0; display: flex;}
.fixedLink_form .slika{display: block; width: 44px;padding: 3px; box-sizing: border-box}
.fixedLink_form img{display: block; width: 100%; _filter:invert(1) contrast(5) saturate(1) }
.fixedLink_form a{text-decoration: none; display: flex; width: 100%; height:50px}
.fixedLink_form p{width: max-content;color:#fff; padding: 10px 5px;display:none}
.fixedLink_form a:hover{margin-left: 0; transition:.3s}


.logoScroll{
    display: none;
    width:110px;
    padding: 5px;
}
.logoScroll img{
    display: block;
    width: 100%;
}
/*HOME PAGE*/

/*TRAKA*/
.traka_obavestenje{position: absolute; top: -5%; left: 5%; background: var(--darkgold); z-index: 1; padding: 0px 20px 5px; box-sizing: border-box; }
.typewrite{text-decoration: none}
.wrap{font-size: 20px; text-decoration: none!important; color: #fff; font-family: number; font-weight: lighter}
/*END TRAKA*/
.home-strana{padding: 00px 0px; box-sizing: border-box;margin: auto;}
.home-strana >div >h2{width: 80%;margin: 0px auto;padding: 30px 0px 30px;font-weight: lighter;font-size: 35px;font-family: numbers}
.home-strana .prviBlok h2{color: transparent;background: url('../../cms_upload/pages/files/46_boban-rajovic-1.jpg');background-size: cover;background-clip: text;font-size: 70px;}
.home-strana .prviBlok h2{
  background: url('../../cms_upload/pages/files/8_show_effect.png') no-repeat;
    background-size: contain;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.home-strana .treci_blok .diskografija_naslov{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    color: transparent;
    background: url('../../cms_upload/pages/files/46_boban-rajovic-1.jpg');
    background-size: cover;
    background-clip: text;
    font-size: 100px;
    text-align: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    }
.home-strana .treci_blok .diskografija {
  background: url('../../cms_upload/pages/files/46_boban-rajovic-1.jpg') no-repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  }
.home-strana .termin-zakazivanje{width: 100%; margin: auto; text-align: center; background: var(--lightpink)}
.home-strana .termin-zakazivanje p a{display: block; padding: 20px; font-size: 32px; color: var(--darkgold); text-decoration: none;}

.home-strana .blok-flex{display: flex; justify-content: space-between; width: 100%; margin-top: 30px}
.home-strana .blok-flex .blok a{text-decoration: none;}
.home-strana .blok-flex .blok{width: 32%; margin: auto; border: 1px solid var(--gold); }
.home-strana .blok-flex .blok a img{width: 100%;}
.home-strana .blok-flex .blok h2{text-align: center; background: var(--lightpink)}
.home-strana .blok-flex .blok h2 a{color: var(--darkgold);  padding: 10px; box-sizing: border-box; display: block;}
.home-strana .blok-flex .vise{display: block; background: #fff; padding: 5px; color: var(--darkgold); font-size: 20px}


/*test*/
.blok-flex .blok {position: relative}

.blok:nth-child(1):hover:after{content: "";position: absolute;
    overflow: hidden; right: 0; bottom: 0; top: 0; left: 0; display: block; background-image:url(../../cms_upload/pages/files/46_hidzama_home_strana.jpg);
background-repeat: no-repeat; background-size: cover; background-position: center; pointer-events: none; cursor:pointer} 
.blok:nth-child(2):hover:after{content: "";position: absolute;
    overflow: hidden; right: 0; bottom: 0; top: 0; left: 0; display: block; background-image:url(../../cms_upload/pages/files/46_kvantna_analiza_home_strana.jpg);
background-repeat: no-repeat; background-size: cover; background-position: center;  pointer-events: none; cursor:pointer} 
.blok:nth-child(3):hover:after{content: "";position: absolute;
    overflow: hidden; right: 0; bottom: 0; top: 0; left: 0; display: block; background-image:url(../../cms_upload/pages/files/46_nutricionizam_home_strana.jpg);
background-repeat: no-repeat; background-size: cover; background-position: center; pointer-events: none; cursor:pointer} 




/* BANNER */


.top_baner div div .baner_slide_title{
    margin: 0;
    position: absolute;
    top: 50%!important;;
    left: 50%!important;;
    transform: translateY(50%)!important;;
    transform: translateX(-50%)!important;;
    color:#fff;
    font-size: 50px;
   height:100px!important; width: 600px!important;text-align: center!important;
    font-weight: bold;


}
.baner_slide_description{
    position:absolute;
    top:80px;right:0;
    z-index: 100;
    font-size:20px;
    background: var(--main);
    color:#eee;
    
}
/* HOME */
.blogHome{display: flex; justify-content: space-between;width: 70%; margin: auto; flex-wrap: wrap}
.izdvojeniTekst{display: flex;width: 100%;  box-sizing: border-box;background: rgba(1, 84, 61,1); position: relative; margin-bottom:20px}
.izdvojeniTekst p{color: #fff; box-sizing: border-box; padding:10px 0}
.izdvojeniTekst .slikaIzdvojeniTekst{width: 30%; height: max-content;margin:0 auto }
.izdvojeniTekst .izdvojenTekstTxt{width: 70%; padding: 20px; box-sizing: border-box}
.izdvojeniTekst a{position: absolute; right: 70px; bottom: 30px; background: ; color: #fff; width: 200px; display: block;
    padding: 10px 10px; text-align: center; text-decoration: none; font-size: 18px;
border: 1px solid #fff; box-shadow: 2px 2px 2px 3px #111}
.izdvojeniTekst .izdvojenTekstTxt:nth-child(1) a{ left: 20px}


.vesti .oblast_strane{position: relative; z-index: 1}
.colorChange{transition: .3s}
.oblast_sadrzaja{width:100%; min-height:700px;  margin:0px auto; position: relative;}
.index #coll_middle {box-sizing: border-box; width:100%; flex-basis:initial; flex-grow:initial; background: #;}
.homebox{width: 100%; background:  }

.obavestenjeTraka{background: red; position: absolute; top: 0; left: 0; right: 0; background:#ea1f3c;padding:5px 10px; box-sizing: border-box;
    text-align: center}
.obavestenjeTraka p{color: #fff;font-size:var(--fm)}



/*HOME PAGE*/
.prviBlok{width: 100%; margin: 0px auto 0px;}
.prviBlok .flexbox{ width: 80%; margin: auto;display: flex; justify-content: space-between; }
.prviBlok  > .flexbox{background: rgba(250,250,250, .7);}
.prviBlok .outerBox{width: 80%; margin: auto;position: relative;z-index: 2;
opacity: .9;
filter: brightness(1);}
.prviBlok .outerBox >div{padding: 10px; box-sizing: border-box}
.prviBlok .innerBox {justify-content: space-between; width: 100%}
.prviBlok .innerBox >div{width: 48%; margin-bottom: 20px; position: relative;}
.prviBlok .innerBox .image{width: 100%; display: block; overflow: hidden}
.prviBlok .innerBox .image img{width: 100%; display: block;transition: transform .4s}
.prviBlok .innerBox .slika-levo, .prviBlok .innerBox .slika-desno{position: relative;}
.prviBlok .innerBox .slika-levo .image:before{content: ""; position: absolute;height:0; width:0;right: 0;top: 25px;display: inline-block; 
  border-right:25px solid #111; border-top:20px solid transparent; border-bottom:20px solid transparent;  box-sizing: border-box; }
.prviBlok .innerBox .slika-desno .image:before{content: "" ; position: absolute; height:0; width:0; display: inline-block; border-left:25px solid #111; border-top:20px solid transparent; border-bottom:20px solid transparent;left:0;top:25px; box-sizing: border-box; }
.prviBlok .innerBox .tekst .datumVesti{ color: var(--darkgold); text-align: center; font-family: numbers; padding-top: 10px; font-size: 30px; position: absolute; bottom: 10px}
.prviBlok .innerBox .tekst .opisVesti{color: #666}
.prviBlok .innerBox:hover .opisVesti{color: #222}
.prviBlok .innerBox:hover img{ transform: scale(1.2); transition: transform .5s }

.drugiBlok{display: flex; position: relative; flex-wrap: wrap; background: rgba(250,250,250,.9)}
.drugiBlok div{width: 60vw; height: 50vh; padding: 50px 0px; display: flex; flex-wrap: wrap; position: relative; margin: 0px auto;z-index: 2;
opacity: .9;
filter: brightness(1); 

}


.drugiBlok .nova_pesma h3{font-size: 50px; font-family: number; font-weight: lighter; padding-top: 30px}


.drugiBlok div iframe{width: 100%; height: auto;-webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
     box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);}
.drugiBlok div .text{color: #fff; position: absolute;top:10px;width: max-content; z-index: 1; display: none; }
.drugiBlok .text p{color: #fff; }
.drugiBlok div img{width: 50%; display: block}
.drugiBlok .imageBox-1 img{clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 90% 0, 99% 100%, 0 100%);}
.imageBox-1 .text{left: 10px}
.drugiBlok .imageBox-3 img{clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);clip-path: polygon(1% 0, 100% 0, 100% 100%, 10% 100%); }
.imageBox-3 .text{right: 10px}
.drugiBlok .imageBox-3{position: absolute; top: 70px; left: 0; display: flex; justify-content: flex-end}
.drugiBlok .imageBox-2{ display: none;}

.cetvrti_blok{padding-top: 60px}
.treci_blok{position: relative; }
.treci_blok .icons{display: block; position: absolute; bottom: 10%; font-size: 70px; left: calc(100% - 55%);
color: transparent; background: url('../../cms_upload/pages/files/46_boban-rajovic-1.jpg');
background-size: cover; background-clip: text; font-size: 100px; text-align: center;}
.treci_blok .icons{
  background: url('../../cms_upload/pages/files/46_boban-rajovic-1.jpg') no-repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

}

.diskografija_home{ display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; padding: 20px 30px 60px; box-sizing: border-box; width: 80%; margin: auto; justify-content:space-between;
   
}
.diskografija_home div{ display: block; width: 20%; margin-bottom: 20px; position: relative;}
.diskografija_home div:hover img{filter: brightness(.5); transform: rotate(340deg); transition-duration: 4000ms; }
.diskografija_home div img{width: 100%; display: block; filter: brightness(.9);border-radius: 100%; box-shadow: 2px 2px 4px #111; position: relative;transform: rotate(0deg); transition-duration: 4000ms;}
.diskografija_home div:after{content: ""; position: absolute; left: calc(100% - 63.4%); top: calc(100% - 59.4%); right: 10px;z-index: 100; background: #010e1b; width: 50px; height: 50px; border-radius: 100%}
.diskografija_home div:before{content: ""; position: absolute; left: calc(100% - 68%); top: calc(100% - 64%); right: 10px; z-index: 90; background: rgb(255, 255, 255, .2); width: 70px; height: 70px; border-radius: 100%}

/*HOME STRANA SLIKE*/
.home-strana{width: 100%;}
.prviBlok{
    width: 100%;
    height:100vh; 
    background-image: url('../../cms_upload/pages/files/46_boban-rajovic-1.jpg'); 
    background-attachment: fixed; 
    background-size: cover; 
    _opacity: .9;
    
}
.prviBlok:after{content: ""; position: absolute;
top: 0; left: 0;  bottom: 0; right: 0; background: rgba(0,0,0,.3)}
.drugiBlok{
    width: 100%;
    height:100vh; 
    background-image: url('../../cms_upload/pages/files/46_boban-rajovic-3.jpg'); 
    background-attachment: fixed; 
    background-size: cover; 
    _opacity: .9;
    
}
.drugiBlok:after{content: ""; position: absolute;
top: 0; left: 0;  bottom: 0; right: 0; background: rgba(0,0,0,.6)}
.treci_blok{
    width: 100%;
    height:100vh; 
    background-image: url('../../cms_upload/pages/files/46_boban-rajovic-2.jpg'); 
    background-attachment: fixed; 
    background-size: cover; 
    opacity: .9;
    
}


.cetvrti_blok{
    width: 100%;
    height:100vh; 
    background-image: url('../../cms_upload/pages/files/46_boban-rajovic_nastup.jpg'); 
    background-attachment: fixed; 
    background-size: cover; 
    position: relative;
    z-index: ;
    
    _opacity: .9;
    
}
.cetvrti_blok:after{content: ""; position: absolute;
top: 0; left: 0;  bottom: 0; right: 0; background: rgba(0,0,0,.6)}

.cetvrti_blok .dugme_vise{
    background: rgba(0,0,0,.9);
    color: #fff;
    position: absolute; left: 50%; top: 45%;
    transform: translateX(-50%);
    z-index: 4;
}
.cetvrti_blok .dugme_vise a{padding: 10px; display: block; width: 200px; color: #fff; font-size: 30px; text-align: center; text-decoration: none; font-family: number; z-index: 10; cursor: pointer;}
.cetvrti_blok .dugme_vise:hover{background: rgba(250,250,250,.9); color: #1a1a1a;}
.cetvrti_blok .dugme_vise:hover a{color: #1a1a1a;}

.peti_blok{
    width: 100%;
    height:60vh; 
    background-image: url('../../cms_upload/pages/files/46_boban_rajovic-6.png'); 
    background-attachment: fixed; 
    background-size: cover; 
    position: relative;
    z-index: ;
    
    _opacity: .9;
    
}
.peti_blok:after{content: ""; position: absolute;
top: 0; left: 0;  bottom: 0; right: 0; background: rgba(0,0,0,.6); z-index: 1}

.peti_blok .eisberg-home-reklama{width: 40vw; display: block; box-sizing: border-box; margin-left: 10%; padding-top: 20px}
.peti_blok .eisberg-home-reklama a{width: 100%; display: block;}
.peti_blok .eisberg-home-reklama img{width: 100%; display: block;position: relative; z-index: 3;}

/*********/
.catTitle, .pageTitle{
}
.catTitle, .pageTitle{
    text-align: center; color: #f5f7f9; padding: 20px 0px 40px; font-size: 35px;
letter-spacing: .05em;
text-shadow: 0 -1px 0 #fff, 
    0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 
    0 3px 0 #2a2a2a, 0 4px 0 #282828, 
    0 5px 0 #262626, 0 6px 0 #242424, 
    0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e,
    0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 
    0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 
    0 22px 30px rgba(0,0,0,0.9);
}
.index #coll_middle{padding-top: 0}
#coll_middle{padding-top: 80px; position: relative;}



/*VESTI*/
.vesti{position: relative; z-index: 1}
.biografija .oblast_strane{position: relative; z-index: 2}
.vesti #coll_middle{padding-top: 120px; width: 80%; margin: auto; position: relative; z-index: 1}
.vesti .pages{display: flex; flex-wrap: wrap;}
.vesti .pages .page-pID{width: 30%; list-style: none; margin-right: 3%; margin-bottom: 5%;  box-shadow: 2px 2px 3px 1px #222; position: relative;} 
.vesti .page-pID .img{width: 100%; display: block; height: 200px; overflow: hidden}
.vesti .page-pID img{width: 100%; display: block}
.vesti .page-pID h2{font-weight: normal;; margin-top: 20px; font-size: 18px}
.vesti .page-pID a{text-decoration: none; display: block;padding: 10px 15px; box-sizing: border-box; color: #ffeeee;}
.vesti .page-pID .antrafile {font-size: 15px; line-height: 1.4em; padding: 20px 15px; box-sizing: border-box; color: #ffeeee;}
.vesti .page-pID .publish_date{position: absolute; top:-10px; right:-10px;background: #fff; padding: 10px 20px; font-size: 18px; background: #b59355; 
    color: #fff; font-family: number; border-radius: 5px; transform: rotate3d(1, 1, 1, 15deg);}

.vesti {
    width: 100%;
height: 50vh;
background-image: url('../../cms_upload/pages/files/46_boban-rajovic-1.jpg');
background-attachment: fixed;
background-size: cover;
opacity: .9;
    ;padding:30px 0px; box-sizing:border-box; border-top: 1px solid #aaa ;}

.vesti:after{content: ""; position: absolute;
top: 0; left: 0;  bottom: 0; right: 0; background: rgba(0,0,0,.6); z-index: -1}



/*VESTI SLIDE EFFECT*/
.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}

.active.fade-left {
  animation: fade-left 1s ease-in;
}
.active.fade-right {
  animation: fade-right 1s ease-in;
}

@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}





/*EISEBERG*/

.eiseberg .naslovna-slika{width: 100%; display: block; position: relative; z-index: 1;}
.eiseberg .naslovna-slika img{width: 100%; display: block}

.eiseberg .prvi-pasus, .eiseberg .drugi-pasus{display: flex;  width: 90%; margin: auto; justify-content: space-between; }
.eiseberg .prvi-pasus ul{margin-top: 15px; margin-left: 0px}
.eiseberg .prvi-pasus ul li{list-style-type:  disclosure-closed; margin-left: 15px; padding-bottom: 10px; font-size: 17px;}
.eiseberg .prvi-pasus .tekst, .eiseberg .drugi-pasus .tekst{padding: 40px 20px; box-sizing: border-box; width: 100%}
.eiseberg .prvi-pasus .slika, .eiseberg .drugi-pasus .slika{padding: 40px 20px; box-sizing: border-box; display: block; width: 100%}
.eiseberg .prvi-pasus .slika img, .eiseberg .drugi-pasus .slika img{display: block; width: 100%}
.eiseberg .drugi-pasus .tekst p:first-child::first-letter{
    color: #f3f3f3;
  float:  left;
  font-size: 4rem;
  line-height: 4vw;
  padding-right: 8px;
}
.eiseberg p{line-height:  1.6em; padding-bottom: 20px; font-size: 17px}
.eiseberg p i{display: block; padding-top: 15px; font-size: 18px;}
.eiseberg p a{color: #eee}
.eiseberg h3{padding-left: 40px; font-size: 22px; font-weight: normal }
.eiseberg >ul{padding: 20px 0px 40px 60px; box-sizing: border-box}
.eiseberg >ul li{list-style-type:  disclosure-closed; padding-bottom: 10px; font-size: 16px; line-height: 1.6em}

/*BIOGRAFIJA*/
.biografija .pageBody {width: 90%; margin: auto; padding: 40px 0px; position: relative; z-index: 1 }
.biografija .pageBody p{margin-bottom: 10px;  margin-top: 40px;}
.biografija .pageBody p:nth-child(3n){width: 90%;}
.biografija .pageBody p:nth-child(2n):first-letter{
    color: #f3f3f3;
  float:  left;
  font-size: 4rem;
  line-height: 4vw;
  padding-right: 8px;
}

.biografija .pageBody >p:nth-child(1){font-size: 25px; }
.biografija p i{

  transform: translate(-0%,-50%);
  padding: 12px 0px;
  color: #ffffff;
  background: linear-gradient(to right, #4d4d4d 0, white 10%, #4d4d4d 20%);
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
  font-weight: 600;
  font-size: 24px;
  text-decoration: none;
  white-space: nowrap;
    }
@keyframes shine{
  0%{
    background-position: 0;
  }
  60%{
    background-position: 500px;
  }
  100%{
    background-position: 800px;
  }
}

.biografija .pageBody p{font-size: 17px; line-height: 1.7em}
.biografija .pageBody p:last-child{font-size: 30px}
.biografija .pageBody ul{padding-left: 20px; margin-top: 20px}
.biografija .pageBody ul li{list-style-type:  disclosure-closed; padding-bottom: 10px; font-size: 17px; line-height: 1.6em}


.biografija{
    width: 100%;
    height:100vh; 
    background-image: url('../../cms_upload/pages/files/46_boban-rajovic-1.jpg'); 
    background-attachment: fixed; 
    background-size: cover; 
    opacity: .9;
    
    
}
.biografija .flex-biografija{display: flex; width: 100%; padding-top: 30px}
.biografija .flex-biografija .text{width: 50%; display: flex;  padding: 20px; box-sizing: border-box; color: #fff; font-size: 18px; line-height: 2.5em}
.biografija .video {width: 100%; height: 400px;display: block}
.biografija .video iframe{width: 100%; display: block; height: 100%;}
/*STUDIO CAFFE*/
.studio_caffe .pageBody .naslovna-slika{width: 100%; display: block; padding-bottom: 20px; position: relative; z-index: 1;}
.studio_caffe .pageBody .naslovna-slika img{width: 100%; display: block}
.studio_caffe .studio {width: 90%; margin: auto;}
.studio_caffe .pageBody .slike {display: flex; justify-content: space-around; width: 100%; margin: 40px auto }
.studio_caffe .studio p{padding:0px 20px; box-sizing: border-box; margin-top: 10px; font-size: 17px; }
.studio_caffe .pageBody .slike img{width: 30%}
.studio_caffe .studio p:nth-child(1):first-letter{
    color: #f3f3f3;
  float:  left;
  font-size: 4rem;
  line-height: 4vw;
  padding-right: 8px;
}

/*KONCERTI I TURNEJE*/

.koncerti_i_turneje .pageBody .naslovna-slika{width: 100%; display: block; position: relative;z-index: 1}
.koncerti_i_turneje .pageBody .naslovna-slika img{width: 100%; display: block}

.spisak_koncerata ul {width: 50%; margin: auto; color: #b59355; padding: 20px ;box-sizing: border-box; }
.spisak_koncerata ul li{padding-top: 15px; font-size: 17px; color:#b59355; border-bottom: 1px solid  #b59355; padding-bottom: 3px; list-style: none}

.specijal_nastup{font-family: number; font-size: 20px!important;; color: #d44!important; font-weight: lighter!important;}

/*DISKOGRAFIJA*/
.diskografija {
    width: 100%;
    height:  100vh;
    background-image: url('../../cms_upload/pages/files/162_background-diskografija.png');
    background-attachment: fixed;
    background-size:cover ;
    opacity: .9;
}

.diskografija .pageBody .naslovna-slika{width: 100%; display: block; position: relative; z-index: 1}
.diskografija .pageBody .naslovna-slika img{width: 100%; display: block}

.blok-cd{display: flex; flex-wrap: wrap;justify-content: space-around; width: 80%; margin: 40px auto}
.blok-cd .cd{width: 30%; margin-bottom: 30px; position: relative }
.blok-cd .cd a{width: 100%; display: block; cursor: pointer; text-decoration: none; }
.blok-cd .cd .image{width: 100%; display: block}
.blok-cd .cd .image img{width: 100%; filter:  grayscale(1)}
.blok-cd .cd span{display: block;}
.blok-cd  .cd .naziv_albuma{display: none; position: absolute; bottom: 20%; left: 50%;height: 100px;  transform: translateX(-50%); font-size: 30px; width: 100%; text-align: center;; font-family: number; font-weight: 600; padding-top: 25%; pointer-events: none; cursor: pointer; color: #b59355;}
.blok-cd  .cd .naziv_albuma:after{content: ""; background: rgba(0,0,0,.8); position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: -1; padding-top: 20px; pointer-events: none;  }
.blok-cd .cd:hover .naziv_albuma{display: block}
.blok-cd .cd:hover .image img{filter:  grayscale(0)}

.blok-cd .cd .godina_albuma{display: block; font-size: 40px; font-family: number; text-align: center; padding: 20px 0;  overflow: hidden;
  text-align: center; color: #b59355;}
.blok-cd .cd .godina_albuma:before, .blok-cd .cd .godina_albuma:after {
  background-color: #b59355;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

.blok-cd .cd .godina_albuma:before {
  right: 0.5em;
  margin-left: -25%;
}

.blok-cd .cd .godina_albuma:after {
  left: 0.5em;
  margin-right: -25%;
}

/*DISKOGRAFIJA - PESME*/
.diskografija_pesme{margin-bottom: 40px; font-family: number; position: relative; z-index: 50;}
.diskografija_pesme ul{display: flex; display: flex; justify-content: space-between; ;_background: rgba(0,0,0,.6); 
    ;width: 50%; margin:5px auto; padding: 10px 0; border-bottom: 1px solid #b59355; position: relative;}
.diskografija_pesme ul li h3{ font-family: number; text-transform: uppercase; font-weight: lighter}
.diskografija_pesme ul li{list-style: none; width: 100%; display: flex; align-items: center;}
.diskografija_pesme ul li .icon_song, .diskografija_pesme ul li .icon_text{width: 30px; display: inline-block; padding-right: 10px}
.diskografija_pesme ul li .icon_song img, .diskografija_pesme ul li .icon_text img{width: 100%; ;display: inline-block; filter: invert()}
.diskografija_pesme ul li .youtube_link, .diskografija_pesme ul li .text_pesme{font-size: 17px;}
.diskografija_pesme ul li a{text-decoration: none; display: flex; align-content: center; align-items: center; font-size: 17px}
.diskografija_pesme ul li:nth-child(2){display: flex;justify-content: center;}
.diskografija_pesme ul li:last-child{display: flex;justify-content: right;}

/*PESME ALERT BOX*/
#cela_pesma {display:none;}

#cela_pesma{
    display:none;
    position:fixed;
    top:20%;right:10%;
    z-index: 100;
    width:50vw;
    height: 50vh;
    background:#555555;
    border:3px solid #999;
    border-radius:10px;
    box-shadow: 30px 15px  30px 0 rgba(0,0,0,0.31), 0 5px 15px 0 rgba(0,0,0,0.38);
    overflow-y:auto;
    padding:40px 20px 0 20px;
    box-sizing: border-box;
    text-align: center;
    font-size: 20px;
}

#cela_pesma .close{
 position: absolute;
  top: 0;
  right: 0;
  display: block;
  padding: 4px 20px 0 10px;
  text-align: center;
  color: #FFF;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-family: icons;
  font-size: 30px;
}



#cela_pesma.hidden{position: absolute; top: 0; right:calc(100% - 80%) ;background: rgba(250,250,250,.9); color: #444; width: 400px; padding: 20px; z-index: 10; font-size: 18px;}
#cela_pesma.sakrij{display: none!important;}
#cela_pesma.sakrij.hidden{display: block!important;}
/*diskografija PAGE*/

.diskografija_home{
    
    color: #fff;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    position: relative;
     z-index: 2;
    opacity: .9;
    filter: brightness(1);
    width: 80%;
    margin: auto
}

.container{
    display: flex;
    flex-direction: row;
    margin: auto;
    width: 70vw;
    padding: 40px 0px;
}
.container .panel {background-size: 80vh; box-shadow: 2px 2px 3px 1px #666}
.panel{
    padding-top: 40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 70vh;
    border-radius: 50px;
    color: #fff;
    flex: 1.2;
    cursor: pointer;
    position: relative;
    transition: flex 0.7s ease-in;
    
}
.panel ul{
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
    opacity: 0;
    background: rgba(0,0,0,.8);
    padding: 15px; box-sizing: border-box;
}

.panel.active{
    flex: 6;
    
    
}
.panel.active ul{
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
    background: rgba(0,0,0,.8);
    padding: 15px; box-sizing: border-box;
    padding-left: 40px;
    border-radius: 40px
    
}
.panel.active ul a{text-decoration: none;}
.panel.active ul li{list-style-type:  disclosure-closed;}

/*VESTI*/
.vesti .pageBody{margin-bottom: 40px}
.vesti .pageBody p{font-size: 17px; line-height: 1.6em; margin-top: 15px}
.vesti .pageBody .video {margin-top: 20px; width: 50%; height: 300px; display: block}
.vesti .pageBody .video iframe{width: 100%; height: 100%; display: block}
.vesti .pageBody span{width: 100%; display: block;}
.vesti .pageBody span img{width: 100%; display: block}

.vesti .album_slika{display: flex; flex-wrap: wrap; justify-content: space-between;}
.vesti .album_slika span{width: 49%; margin-top: 30px}



/*ENTER MUSIC*/
.enter_music .pageBody .naslovna-slika{width: 100%; display: block; position: relative; z-index: 1}
.enter_music .pageBody .naslovna-slika img{width: 100%; display: block}

.enter_music .uvod-brenter {display: flex; width: 95%; margin: 80px auto}
.enter_music .uvod-brenter .tekst {width: 70%; margin-top: 10px}
.enter_music .uvod-brenter .tekst p{margin-bottom: 30px; line-height: 1.6em; }
.enter_music .uvod-brenter .slika{width: 30%;}
.enter_music .uvod-brenter .slika img{width: 100%; display: block}

.enter_music  .pageBody >p{width: 95%; margin: 50px auto 30px}
.kafanski-fakultet-izvodjaci{display: flex; flex-wrap: wrap; justify-content: space-between; width: 95%; margin: auto;}
.kafanski-fakultet-izvodjaci .video{width: 19%; margin-bottom: 30px}
.kafanski-fakultet-izvodjaci .video iframe{width: 100%!important;}

/*KONTAKT*/
.kontakt .pageBody{display: flex;  justify-content: space-between; width: 80%; margin: auto;;}
.kontakt .pageBody .saradnici-kontakt{width: 40%}
.kontakt .pageBody .saradnici-kontakt h2{margin-bottom: 20px}
.kontakt .pageBody .saradnici-kontakt p{padding-bottom: 5px; line-height: 1.6em}
.kontakt{
    width: 100%;
    height:100vh; 
    background-image: url('../../cms_upload/pages/files/46_boban-rajovic-1.jpg'); 
    background-attachment: fixed; 
    background-size: cover; 
    opacity: .9;
    
}
.kontakt_forma {width: 50%}
.kontakt_forma input {
  caret-color: red;
}


.kontakt_forma .container {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 20px;
  padding: 0px 50px 20px;
  box-sizing: border-box;
  background: rgba(0,0,0,.9);
  z-index: 1
 
}


.kontakt_forma form{width: 100%;}
.kontakt_forma .container .brand-title {
  padding-top: 10px;
  font-size: 30px;
  color: #f6f7f9;
}

.kontakt_forma .container .inputs {
  text-align: left;
  width: 100%; display: block
}

.kontakt_forma .container label,.kontakt_forma .container input,.kontakt_forma .container button {
  display: block;
  width: 100%;
  padding: 5px 0px;
  border: none;
  outline: none;
  box-sizing: border-box;
    color: #f6f7f9;
}

.kontakt_forma .container label {
  margin-bottom: 4px;
  font-size: 16px;
  margin-top: 15px
}

.kontakt_forma .container input::placeholder {
  color: gray;
}

.kontakt_forma .container input {
  width:100%;
  display: block;
  background: #ddd;
  padding: 6px 10px;
  padding-left: 15px;
  height: 40px;
  font-size: 14px;
  border-radius: 20px;
    color: #444
}
.kontakt_forma .container input:last-child{height: 100px}

.kontakt_forma .container button {
  color: white;
  margin-top: 20px;
  background: #1a1a1a;;
  height: 40px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 900;
  box-shadow: 6px 6px 6px #111;
  transition: 0.5s;
    width: 40%; margin: 30px auto 5px; display: block;
}

.kontakt_forma .container button:hover {
  box-shadow: none;
}

.kontakt_forma .container a {
 position: absolute;
  font-size: 8px;
  bottom: 4px;
  right: 4px;
  text-decoration: none;
  color: black;
  background: yellow;
  border-radius: 10px;
  padding: 2px;
}

.kontakt_forma .container h1 {
  position: absolute;
  top: 0;
  left: 0;
}

/*TRAKA OBAVESTENJE*/
.blinking_traka {
  position: absolute;
  top: -12%;
  right: 3%;
    width: 30%;
    height: 240px;
  _transform: translateX(-50%);
  z-index: 10;
  animation: blink-traka 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.blinking_traka iframe{width: 100%; height: 100%;}

@keyframes blink-traka{

    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}





/*FUTER*/
.oblast_futera{
    width: 100%;
min-height: 50vh;
background-image: url('../../cms_upload/pages/files/8_show_effect.png');
background-attachment: fixed;
background-size: cover;
opacity: .6;
    ;padding:30px 0px; box-sizing:border-box; border-top: 1px solid #aaa ;}

.oblast_futera:after{content: ""; position: absolute;
top: 0; left: 0;  bottom: 0; right: 0; background: rgba(0,0,0,.6); z-index: -1}

.oblast_futera .footer{ display: flex; flex-wrap: wrap; justify-content: space-around; align-items:center; position: relative; z-index: 1;opacity: .9;
filter: brightness(1);}
.footer a{text-decoration: none; color: #fff; display: block}
.footer p, .footer h2{color: #fff;}
.footer .verticalList{}
.footer .verticalList a{padding: 2px 0;font-size: 14px;position: relative; z-index: 2;filter: brightness(1);opacity: 1}
.footer .verticalList a:hover{opacity: .5}
.footer .moj_tim h2{}
.footer .moj_tim p{padding: 2px 0;font-size: 14px;position: relative; z-index: 2;filter: brightness(1);opacity: 1}
.footer .moj_tim a:hover{opacity: .5}
.footer .horizontalList{display: flex; }
.horizontalList a{padding: 20px 10px; box-sizing: border-box; display: block; width: 100px; }
.horizontalList a img{width: 100%; display: block;}
.horizontalList a:hover img{filter: invert(1)}
.horizontalList p:nth-last-child(1) a{border-right: none; }
.footerLogo{display: none;}