@charset "utf-8";
/* CSS Document */




@font-face {
    font-family: "ArenoSerifRounded"; 
    src: url(/fonts/Areno-Serif-Rounded.otf) format("opentype");
}

/*@font-face {
 font-family: 'ArenoSerifRounded';   
 src: url(/fonts/Areno-Serif-Rounded.otf) format("opentype");
 unicode-range: U+00-FF;
}*/



@font-face {
    font-family: "Montserrat-Black";
    src: url(/fonts/Montserrat-Black.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-BlackItalic";
    src: url(/fonts/Montserrat-BlackItalic.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-BoldItalic";
    src: url(/fonts/Montserrat-BoldItalic.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-Bold";
    src: url(/fonts/Montserrat-Bold.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-ExtraBoldItalic";
    src: url(/fonts/Montserrat-ExtraBoldItalic.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-ExtraLight";
    src: url(/fonts/Montserrat-ExtraLight.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-ExtraLightItalic";
    src: url(/fonts/Montserrat-ExtraLightItalic.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-Italic";
    src: url(/fonts/Montserrat-Italic.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-Light";
    src: url(/fonts/Montserrat-Light.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-LightItalic";
    src: url(/fonts/Montserrat-LightItalic.otf) format("opentype");
}


@font-face {
    font-family: "Montserrat-Medium";
    src: url(/fonts/Montserrat-Medium.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-MediumItalic";
    src: url(/fonts/Montserrat-MediumItalic.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-Regular";
    src: url(/fonts/Montserrat-Regular.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-SemiBold";
    src: url(/fonts/Montserrat-SemiBold.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-SemiBoldItalic";
    src: url(/fonts/Montserrat-SemiBoldItalic.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-Thin";
    src: url(/fonts/Montserrat-Thin.otf) format("opentype");
}

@font-face {
    font-family: "Montserrat-ThinItalic";
    src: url(/fonts/Montserrat-ThinItalic.otf) format("opentype");
}



@font-face {
    font-family: "Brown-Light";
    src: url(/fonts/Brown/Brown-Light.otf) format("opentype");
}
@font-face {
    font-family: "Brown-Bold";
    src: url(/fonts/Brown/Brown-Bold.otf) format("opentype");
}
@font-face {
    font-family: "Brown-Regular";
    src: url(/fonts/Brown/Brown-Regular.otf) format("opentype");
}
@font-face {
    font-family: "Brown-Thin";
    src: url(/fonts/Brown/Brown-Thin.otf) format("opentype");
}
@font-face {
    font-family: "Brown-Regular-Alt";
    src: url(/fonts/Brown/Brown-Regular-Alt.otf) format("opentype");
}
@font-face {
    font-family: "Brown-Bold-Alt";
    src: url(/fonts/Brown/Brown-Bold-Alt.otf) format("opentype");
}
@font-face {
    font-family: "Brown-Bold-Italic";
    src: url(/fonts/Brown/Brown-Bold-Italic.otf) format("opentype");
}
@font-face {
    font-family: "Brown-Light-Italic";
    src: url(/fonts/Brown/Brown-Light-Italic.otf) format("opentype");
}
@font-face {
    font-family: "Brown-Regular-Italic";
    src: url(/fonts/Brown/Brown-Regular-Italic.otf) format("opentype");
}
@font-face {
    font-family: "Brown-Thin-Italic";
    src: url(/fonts/Brown/Brown-Thin-Italic.otf) format("opentype");
}




html,body{
    height: 100%
}

body{

	font-family: 'Brown-Light', sans-serif;
	color:#000000;
	margin:0px;
	background-color: #ccc;
  margin: 0;
  padding: 0;
  font-size:0.9rem;
    

  /*

   https://fonts.google.com/specimen/Source+Sans+Pro?category=Sans%20Serif&fbclid=IwAR1If_TAgRwK0cZ6Gp47UViTlKqVw3ZzhC9bbkh--Mv2e7B7lp4YfIVVMq8

   */

	}

/*hr.style-six {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}*/

hr.style-six {
    border: 0;
    height: 0;
    border-top: 2px solid rgba(5, 36, 96, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

strong{font-family: 'Brown-Bold', sans-serif;font-weight: normal;}




h1 {
  font-size: 1.8rem;;
  /*margin-bottom: 0;*/
  color: #000;
  font-family: 'Montserrat-Light', sans-serif;
  text-transform: uppercase;
}
h2 {
  font-size: 1.6rem;
  margin-bottom: 0.625rem;
  color: #5b104b;
  font-family: 'Montserrat-Light', sans-serif;
  font-style: italic;
}
h3 {
 font-size: 1.8rem;;
  /*margin-bottom: 0;*/
  color: #000;
  font-family: 'Montserrat-Light', sans-serif;
  text-transform: uppercase;
  margin-top:2rem;
}

h4 {
  font-size: 1.6rem;
  margin-bottom: 0.625rem;
  color: #000;
  font-family: 'Montserrat-Light', sans-serif;
  font-style: italic;
}
h5 {
  font-size: 12px;
  margin-bottom: 0;
  color: #000;
}
h6 {
  font-size: 10px;
  margin-bottom: 0;
  color: #000;
}
p {
  margin-top: 0;
  margin-bottom: 0;
  color: #000;
  
}

a, a:link, a:visited, a:hover, a:active{color:#5b104b}



hr{border-bottom: 1px solid #000;}



/******************************************** SCROLLBAR *****************************/

::-webkit-scrollbar {
  width: 6px;
  background-color: #fff;
}
::-webkit-scrollbar-thumb {
  

  background-color: #5b104b;

}

.scrollable{

  scrollbar-color: #000 #ffffff;
scrollbar-width: thin;
}




/******************************************** PRELOADER *****************************/

#preloader {
  z-index: 100;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #fff;
}
.loader {
  width: 250px;
  height: 250px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  -webkit-animation: sk-rotateplane 1.8s infinite ease-in-out;
  animation: sk-rotateplane 1.8s infinite ease-in-out;
  -webkit-transition-duration: 2s;
  transition-duration: 2s;
  background:url('/template/zdko/logo_purple_big.png');
  background-repeat: no-repeat;
  background-size: contain ;
  background-position: center center;
}


#preloader2 {
  z-index: 100;
  width: 100%;
  height: 100%;
  position: fixed;
  /*background-color: #000;*/
  display: none;
}
.loader2 {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  -webkit-animation: sk-rotateplane 1.8s infinite ease-in-out;
  animation: sk-rotateplane 1.8s infinite ease-in-out;
  -webkit-transition-duration: 2s;
  transition-duration: 2s;
  background:url('/template/zdko/logo_purple_big.png');
  background-repeat: no-repeat;
  background-size: contain ;
  background-position: center center
}





@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(10px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}


/********************************* SHUFFLE ******************************/

#gallery_grid figure{    margin-right: 0.5rem;
    margin-bottom: 0.5rem;}

.aspect {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}

.aspect__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Add more aspect ratios here */
.aspect--16x9 {
  padding-bottom: 56.25%;
}





.gallery_item a{text-decoration: none !important;}

/*.gallery_item figure{margin-right:0.5rem;}
*/
.gallery_item .opis{padding:0.5rem 0rem 0.25rem 0;display: block;font-size:0.8rem;text-decoration: none;} 
.gallery_item .naziv{padding:0rem 0rem 0.25rem 0;display: block;font-size:0.8rem;text-decoration: none;font-style: italic;}










/******************************************** LEFT FRAME *****************************/

	#frame_left.boforeLoad{

		width:100%;
	}

	#frame_left{
		background-color: #fff;
		position: absolute;
		left:0;
		top:0; 
		width:25%;
		z-index: 11;
		transition: width 700ms ;
  }

	/*#big_white.boforeLoad{

		opacity: 0;
	}

	#big_white{

		background:url('/template/big_white.png');
		background-repeat: no-repeat;
		background-size: contain ;
		background-position: left bottom;
		opacity: 1;
		transition: all 1500ms ease-in-out;
		

	}*/

  #small_white img{max-width: 60% !important;}

  #small_white.boforeLoad img{max-width: 60% !important;}



  #main_menu.boforeLoad{
		
	
  }


	#main_menu{

    margin-top:3rem;


  }


	#main_menu li{
	  /*font-size: 16px;*/


  }

  #main_menu li{/*padding:0px 5px;*/}

	#main_menu li a{font-family: 'Montserrat-SemiBold';font-size:0.9rem;text-transform: uppercase;color:#000;;/*padding:0*/display: inline-block;}

	#main_menu li:hover a, #main_menu li.selected a{/*border-bottom:1px solid #fff;*/ color:#5b104b;}


  #main_menu.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after {
    /*display: block;
    width: 0;
    height: 0;
    border: inset 6px;*/
    border:none;
    /*content: '';
    border-bottom-width: 0;
    border-top-style: solid;
    border-color: #1779ba transparent transparent;
    position: absolute;
    top: 50%;
    margin-top: -3px;
    right: 1rem;*/
}



#main_menu.accordion-menu .nested.is-accordion-submenu {
    margin-right: 0;
    margin-left: 0;
}


#main_menu.accordion-menu .is-accordion-submenu-item a{font-size:0.75rem;font-family: 'Montserrat-Regular';text-transform: none;}


#frame_left #left_lang a.lang{font-size:0.8rem;color:#000000;}

#frame_left #left_lang a.lang:hover, #frame_left #left_lang a.lang:active,  #frame_left #left_lang a.lang.active{color:#5b104b;}


#frame_left #left_lang.boforeLoad{


opacity: 0;
  



}

#frame_left #left_lang{line-height: 2rem;background-color: #ad87a5;opacity: 1;transition: all 1500ms ease-in-out;}


#frame_left #left_lang{text-align: center;color: #fff}

#frame_left #left_lang a.lang{font-size:0.8rem;color:#fff;}

#frame_left #left_lang a.lang:hover, #frame_left #left_lang a.lang:active,  #frame_left #left_lang a.lang.active{color:#5b104b;}



/******************************************** MAIN *****************************/

.panel {
  position: absolute !important;
  left:0  !important;
  top:0  !important; 
  overflow: auto;
  margin-left: -102%;
  z-index: 2;
  -webkit-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
  /*transition: margin 700ms ;*/
}

.panel .content{padding:3.5rem 4rem 3.5rem 4rem}

#frame_main{}
 
.item{

  position:relative;
  padding-top:1.875rem;
  padding-bottom:1.875rem;

  -webkit-transition: opacity 1s cubic-bezier(0.155, 0.505, 0.175, 1.000) , -webkit-transform 1s cubic-bezier(0.155, 0.505, 0.175, 1.000); 
  -moz-transition: opacity 1s cubic-bezier(0.155, 0.505, 0.175, 1.000) , -moz-transform 1s cubic-bezier(0.155, 0.505, 0.175, 1.000); 
  transition:  opacity 1s cubic-bezier(0.155, 0.505, 0.175, 1.000), transform 1s cubic-bezier(0.155, 0.505, 0.175, 1.000);  /* custom */

  border-top: 1px solid rgba(5, 36, 96, 0.9);

}

/*.item img{float: left;width:33%;margin:0rem 1rem 1rem 0rem}*/

.content .item:first-child, #ajax_content .item{
   padding-top:0rem !important;
   border-top: 0px !important;
}

.content h3:first-child{margin-top:0;}

 .content p, .item p{ text-align: justify;}


 .content a{text-decoration: underline;}
 .content a:hover{text-decoration: none;}

 .content h3 a{text-decoration: none;}
 .content h3 a:hover{text-decoration: underline;}


 .content ul {list-style: none}

.content ul li::before {
  content: "\2022"; 
  color: #000;
  display: inline-block; 
  width: 1.5rem;
  margin-left: -1rem;

font-weight: bold;
font-size: 1.5rem; 
line-height: 1.6rem;
vertical-align: bottom}


.item.hidden-section {
  opacity: 0;
    -ms-transform: translate(0px,100px); /* IE 9 */
    -webkit-transform: translate(0px,100px); /* Safari */
    transform: translate(0px,100px);
}

.item.visible-section {
  opacity: 1;
}

.item h3 a{color:#000000;}
.item h3 a:hover{color:#000;}


.item h3 {
  font-size: 1.8rem;;
  /*margin-bottom: 0;*/
  color: #000;
  font-family: 'Montserrat-Light', sans-serif;
  text-transform: uppercase;
  margin-top:0px !important;
}
.item h4 {
  font-size: 1.6rem;
  margin-bottom: 0.625rem;
  color: #000;
  font-family: 'Montserrat-Light', sans-serif;
  font-style: italic;
}


/*.frame_central:not(#program,#ajax_content) .item .datum{
   font-size: 0.7rem;
  color: #000;
  font-family: 'Brown-Light', sans-serif;
  font-style: normal;
  font-weight: 400;
  display: block;
  text-align: right;
  text-transform: uppercase;
}
*/


.item .datum{

  font-size: 0.7rem;
  color: #000;
  font-family: 'Brown-Light', sans-serif;
  font-style: normal;
  font-weight: 400;
  display: block;
  text-align: right;
  text-transform: uppercase;

}

.item .datum sup{

  font-size: 0.6rem;


}


.item .sadrzaj{
 
  display: block;
  margin-top:0.975rem;

}

.item .sadrzaj, #item .sadrzaj p{
  color: #000000;
  font-family: 'Brown-Light', sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

}



.frame_right h1{ font-size: 2.5rem;;
  /*margin-bottom: 0;*/
  color: #ffffff;
  font-family: 'Montserrat-Regular', sans-serif;
  text-transform: uppercase;}

/*.scrollable{position: relative}*/

/******************************************** FRONTPAGE *****************************/

#frontpage{
 
  width: calc(72% + 4px);
  margin-left: calc(25% - 2px);

  position: absolute !important;
  left:0  !important;
  top:0  !important; 
  overflow: auto;
  z-index: 1;
  -webkit-transition: all 600ms ease-in-out;
  transition: all 600ms ease-in-out;

  /*background-image:url(/template/backgrounds/bg_1.jpg);*/
  background-position:center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /*background-attachment:fixed; */
  background-repeat:no-repeat;


}

#frontpage img{
  width: 50%
  }


#frontpage.boforeLoad{
  margin-left: 102%;
}

#frontpage .overlej{
  background-image:url(/template/overlej.png);
  position: absolute;
  top:0;left:0;right:0;bottom:0;
}



/******************************************** NEWS *****************************/

#news{
  width:36%;
  background-color: #f2f2f2;

}

#news:target {
  margin-left: 25%;
}

#news_right{


  margin-left:61%;
  width:36%; 
  z-index: 2;
  -webkit-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
  /*-webkit-transition-delay: 1s;
  transition-delay: 1s;*/



  background-image:url(/template/zdko/backgrounds/slide_3.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  /*background-attachment:fixed; */
  background-repeat:no-repeat;


}

#news_right.boforeLoad{

  /*background-image:url(/template/GVSD-keyviz-cello-dark4.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
 
  background-repeat:no-repeat;*/


  margin-left: 102%;
}

/******************************************** PROGRAM *****************************/

#program{
  width:36%;
  background-color: #f2f2f2;

}

#program:target {
  margin-left: 25%;
}


#program_right{

  margin-left:61%;
  width:36%; 
  z-index: 2;
  -webkit-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
  /*-webkit-transition-delay: 1s;
  transition-delay: 1s;*/



  background-image:url(/template/zdko/backgrounds/slide_4.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  /*background-attachment:fixed; */
  background-repeat:no-repeat;


}

#program_right.boforeLoad{

  /*background-image:url(/template/GVSD-keyviz-violina-dark4.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
 
  background-repeat:no-repeat;*/


  margin-left: 102%;
}

#program .datum, .program .datum{

  text-align: left;

  font-size: 1rem;
  color: #000;
  font-family: 'Brown-Light', sans-serif;
  font-style: normal;
  font-weight: 700;
  display: block;

}

#program .vise{
font-size: 0.8rem;
  /*color: #f2f2f2;*/
  font-family: 'Brown-Light', sans-serif;
  font-style: normal;
  font-weight: 900;
  display: block;
  text-transform: uppercase;
  padding-top:0.9375rem;
  /*display:none;*/

}

#program .ulaz, .program .ulaz{

  font-size: 0.8rem;
  color: #000000;
  font-family: 'Brown-Light', sans-serif;
  font-style: normal;
  font-weight: 900;
  display: block;
  text-transform: uppercase;
  padding-top:0.6375rem;

}

#program .sadrzaj, .program .sadrzaj{
 
  display: block;
  margin-top:0.975rem;

}

#program .sadrzaj, #program .sadrzaj p, .program .sadrzaj, .program .sadrzaj p{
  color: #000000;
  font-family: 'Brown-Light', sans-serif;
  font-style: italic;
  font-weight: 400;
  line-height: normal;

}



#program .sadrzaj p.repertoar, .program .sadrzaj p.repertoar{

  color: #000;
  margin-top:0.975rem;
}


#program .ulaznice, .program .ulaznice{

 
  margin-top:0.975rem;
  font-size: 0.8rem;
  color: #000000;
  font-family: 'Brown-Light', sans-serif;
  font-style: normal;
  font-weight: 900;
  display: block;
  text-transform: uppercase;

}


/******************************************** about *****************************/

#about{
  width:36%;
  background-color:  #f2f2f2;

}

#about:target {
  margin-left: 25%;
}




#about_right{


  margin-left:61%;
  width:36%; 
  z-index: 2;
  -webkit-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
  /*-webkit-transition-delay: 1s;
  transition-delay: 1s;*/



  background-image:url(/template/zdko/backgrounds/slide_0.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  /*background-attachment:fixed; */
  background-repeat:no-repeat;


}

#about_right.boforeLoad{

  /*background-image:url(/template/PRVI-KONCERT-ZADARSKOG-KOMORNOG-ORKESTRA_Ante-Brkan.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
 
  background-repeat:no-repeat;*/


  margin-left: 102%;
}

#about_right h1{color:#000;}



#about .item {position: relative;}

#about .item::after{

 content: "";
  display: table;
  clear: both;
}


#about .item img{float: left;width:33%;margin:0rem 1rem 1rem 0rem}



/******************************************** conductor *****************************/




#conductor{
  width:36%;
  background-color:  #f2f2f2;

}

#conductor:target {
  margin-left: 25%;
}




#conductor_right{


  margin-left:61%;
  width:36%; 
  z-index: 2;
  -webkit-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
  /*-webkit-transition-delay: 1s;
  transition-delay: 1s;*/



  /*background-image:url(/template/GVSD-keyviz-donat-dark4.jpg);*/
  background-image:url(/template/zdko/backgrounds/slide_2.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  /*background-attachment:fixed; */
  background-repeat:no-repeat;


}

#conductor_right.boforeLoad{

  /*background-image:url(/template/GVSD-keyviz-donat-dark4.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;

  background-repeat:no-repeat;*/


  margin-left: 102%;
}

/*#about_right h1{color:#000;}*/





#conductor h3{margin-top:2rem !important;}

#conductor .content h3:first-child{margin-top:0 !important;;}









/******************************************** multimedia *****************************/




#multimedia{
  width:36%;
  background-color:  #f2f2f2;

}

#multimedia:target {
  margin-left: 25%;
}




#multimedia_right{


  margin-left:61%;
  width:36%; 
  z-index: 2;
  -webkit-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
  /*-webkit-transition-delay: 1s;
  transition-delay: 1s;*/



  /*background-image:url(/template/GVSD-keyviz-donat-dark4.jpg);*/
  background-image:url(/template/zdko/backgrounds/slide_1.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  /*background-attachment:fixed; */
  background-repeat:no-repeat;


}

#multimedia_right.boforeLoad{

  /*background-image:url(/template/GVSD-keyviz-donat-dark4.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;

  background-repeat:no-repeat;*/


  margin-left: 102%;
}

/*#about_right h1{color:#000;}*/





#multimedia h3{margin-top:2rem !important;}

#multimedia .content h3:first-child{margin-top:0 !important;;}














/******************************************** press *****************************/



#press{
  width:36%;
  background-color: #f2f2f2;

}

#press:target {
  margin-left: 25%;
}

#press_right{


  margin-left:61%;
  width:36%; 
  z-index: 2;
  -webkit-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
  /*-webkit-transition-delay: 1s;
  transition-delay: 1s;*/



  background-image:url(/template/zdko/backgrounds/slide_1.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  /*background-attachment:fixed; */
  background-repeat:no-repeat;


}

#press_right.boforeLoad{

 /* background-image:url(/template/GVSD-keyviz-cello-dark4.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;

  background-repeat:no-repeat;*/


  margin-left: 102%;
}
/******************************************** locations *****************************/




#locations{
  width:36%;
  background-color: #f2f2f2;

}

#locations:target {
  margin-left: 25%;
}

#locations_right{


  margin-left:61%;
  width:36%; 
  z-index: 2;
  -webkit-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
  /*-webkit-transition-delay: 1s;
  transition-delay: 1s;*/



 /* background-image:url(/template/GVSD-keyviz-cello-dark4.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;

  background-repeat:no-repeat;*/


}

#locations_right.boforeLoad{

  /*background-image:url(/template/GVSD-keyviz-cello-dark4.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
 
  background-repeat:no-repeat;*/


  margin-left: 102%;
}
/******************************************** impressum *****************************/


#impressum{
  width:36%;
  background-color: #f2f2f2;

}

#impressum:target {
  margin-left: 25%;
}

#impressum_right{

  margin-left:61%;
  width:36%;
  z-index: 2;
  -webkit-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;

}

#impressum_right.boforeLoad{

  margin-left: 102%;
}

#impressum .item{

  border:none;
  border-bottom: 1px solid rgba(5, 36, 96, 0.9);

}

#impressum .item:first-child {
   padding-top:0rem;
}



#impressum img{

  -webkit-filter: grayscale(100%);
filter: grayscale(100%);
 -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    transition: all 0.25s ease;

}


#impressum img:hover  { 
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
transform: scale(1.6);

}

#impressum #partneri h4{text-align: left}


#impressum #partneri .cell{text-align: center}

#impressum #partneri img{float: none; width:auto;}





/******************************************** sponsors *****************************/

/*
#sponsors{
  width:77%;
  background-color: #f2f2f2;

}

#sponsors:target {
  margin-left: 20%;
}

#sponsors_right{
  display:none;


  margin-left:80%;
  width:17%; 
  z-index: 2;
  -webkit-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;



  background-image:url(/template/GVSD-keyviz-cello-dark4.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;

  background-repeat:no-repeat;


}

#sponsors_right.boforeLoad{

 


  margin-left: 102%;
}



#sponsors .item{



  
  border:none;
  border-bottom: 1px solid rgba(5, 36, 96, 0.9);

}

#sponsors .item:first-child {
   padding-top:0rem;
  
}


*/





/******************************************** archive *****************************/



#archive{
  width:36%;
  background-color: #f2f2f2;

}

#archive:target {
  margin-left: 25%;
}


#archive_right{

  margin-left:61%;
  width:36%; 
  z-index: 2;
  -webkit-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
  /*-webkit-transition-delay: 1s;
  transition-delay: 1s;*/



  background-image:url(/template/zdko/backgrounds/slide_0.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  /*background-attachment:fixed; */
  background-repeat:no-repeat;


}

#archive_right h1{color:#000;}

#archive_right.boforeLoad{

 /* background-image:url(/template/GVSD-keyviz-violina-dark4.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
 
  background-repeat:no-repeat;*/


  margin-left: 102%;
}

#archive .datum{

  text-align: left;

  font-size: 1rem;
  color: #000;
  font-family: 'Brown-Light', sans-serif;
  font-style: normal;
  font-weight: 700;
  display: block;

}

#archive .ulaz{

  font-size: 0.8rem;
  color: #000000;
  font-family: 'Brown-Light', sans-serif;
  font-style: normal;
  font-weight: 900;
  display: block;
  text-transform: uppercase;

}

#archive .sadrzaj{
 
  display: block;
  margin-top:0.975rem;

}

#archive .sadrzaj, #archive .sadrzaj p{
  color: #000000;
  font-family: 'Brown-Light', sans-serif;
  font-style: italic;
  font-weight: 400;
  line-height: normal;

}

#archive .sadrzaj p.repertoar{

  color: #000;
  margin-top:0.975rem;
}


#archive .ulaznice{

 
  margin-top:0.975rem;
  font-size: 0.8rem;
  color: #000000;
  font-family: 'Brown-Light', sans-serif;
  font-style: normal;
  font-weight: 900;
  display: block;
  text-transform: uppercase;

}
#archive_container{border-top: 1px solid rgba(5, 36, 96, 0.9);padding-top: 1.875rem;}
/***************************************************/




.flag{
position: relative;
border-radius: 20%;
/*width: 100%;
height: auto;
padding-top: 100%;
background: white;*/
background-repeat: no-repeat !important;
background-size: 100%  100% !important;
background-position: center center !important;
/*border:2px solid #fff;*/
/*
font-style: normal;
font-variant: normal; 
text-rendering: auto;
line-height: 1;*/



}



#copy_frame{
    background-color: #5b104b;
    position: absolute;
    left:0;
    margin-left:97%;
    top:0; 
    width:3%; 
    z-index: 10;
    text-align: center;
    -webkit-transition: all 700ms ease-in-out;
    transition: all 700ms ease-in-out;
    color:#ffffff;
    cursor: pointer;
  }

  #copy_frame.selected{

    width:20%;
    margin-left:80%;

}
#copy_frame #social{/*padding-top: 3.5rem*/}

#copy_frame #social a{margin-top:0.6375rem;}
#copy_frame #social a:first-child{margin-top:0rem;}
#copy_frame #social a i{}


#copy_frame.selected #social  a{display: inline-block;margin-top:0rem;margin-left:0.5rem;}
#copy_frame.selected #social  a:first-child{margin-left:0rem;}


#copyright{padding-bottom: 3.5rem}
#copyright span {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-writing-mode: tb-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: tb-rl;
  color: #fff;
  font-weight: 300;
  font-family: 'Brown-Light', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  display: inline-block;
  vertical-align: middle;
}


#copy_frame.selected span{

    -webkit-transform: none;
  transform: none;
  -webkit-writing-mode: horizontal-tb; 
  -ms-writing-mode: horizontal-tb;
  writing-mode: horizontal-tb;
 }


 #copyright .credits{display:none;}
 #copyright .credits i{padding-right:0.225rem;}

 #copy_frame.selected #copyright .credits{display:block;}




.rounded-social-buttons {
  text-align: center;
  padding-top:2rem;
}

.rounded-social-buttons .social-button {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  border: 0.125rem solid transparent;
  padding: 0;
  text-decoration: none;
  text-align: center;
  color: #5b104b;
  font-size: 0.9rem;
  font-weight: normal;
  line-height: 2em;
  border-radius: 1.6875rem;
  transition: all 0.5s ease;
 /* margin-right: 0.25rem;*/
  margin-bottom: 0.25rem;
}

.rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {
  /*-webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);*/
}

.rounded-social-buttons .social-button.facebook {
  background: #fff;
}

.rounded-social-buttons .social-button.facebook:before {
  font-family: "Font Awesome 5 Brands";
  content: "\f39e";
  font-weight: 900;
}

.rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {
  color: #3b5998;
  background: #fefefe;
  border-color: #3b5998;
}

.rounded-social-buttons .social-button.twitter {
  background: #fff;
}

.rounded-social-buttons .social-button.twitter:before {
  font-family: "Font Awesome 5 Brands";
  content: "\f099";
  font-weight: 900;
}

.rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {
  color: #55acee;
  background: #fefefe;
  border-color: #55acee;
}

.rounded-social-buttons .social-button.linkedin {
  background: #007bb5;
}

.rounded-social-buttons .social-button.linkedin:before {
  font-family: "Font Awesome 5 Brands";
  content: "";
  font-weight: 900;
}

.rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {
  color: #007bb5;
  background: #fefefe;
  border-color: #007bb5;
}

.rounded-social-buttons .social-button.youtube {
  background: #fff;
}

.rounded-social-buttons .social-button.youtube:before {
  font-family: "Font Awesome 5 Brands";
  content: "\f167";
  font-weight: 900;
}

.rounded-social-buttons .social-button.youtube:hover, .rounded-social-buttons .social-button.youtube:focus {
  color: #5b104b;
  background: #fefefe;
  border-color: #5b104b;
}

.rounded-social-buttons .social-button.instagram {
  background: #fff;
}

.rounded-social-buttons .social-button.instagram:before {
  font-family: "Font Awesome 5 Brands";
  content: "\f16d";
  font-weight: 900;
}

.rounded-social-buttons .social-button.instagram:hover, .rounded-social-buttons .social-button.instagram:focus {
  color: #125688;
  background: #fefefe;
  border-color: #125688;
}

.rounded-social-buttons .social-button.pinterest {
  background: #cb2027;
}

.rounded-social-buttons .social-button.pinterest:before {
  font-family: "Font Awesome 5 Brands";
  content: "";
  font-weight: 900;
}

.rounded-social-buttons .social-button.pinterest:hover, .rounded-social-buttons .social-button.pinterest:focus {
  color: #cb2027;
  background: #fefefe;
  border-color: #cb2027;
}

.rounded-social-buttons .social-button.google-plus {
  background: #dd4b39;
}

.rounded-social-buttons .social-button.google-plus:before {
  font-family: "Font Awesome 5 Brands";
  content: "";
  font-weight: 900;
}

.rounded-social-buttons .social-button.google-plus:hover, .rounded-social-buttons .social-button.google-plus:focus {
  color: #dd4b39;
  background: #fefefe;
  border-color: #dd4b39;
}

.rounded-social-buttons .social-button.github {
  background: #000000;
}

.rounded-social-buttons .social-button.github:before {
  font-family: "Font Awesome 5 Brands";
  content: "";
  font-weight: 900;
}

.rounded-social-buttons .social-button.github:hover, .rounded-social-buttons .social-button.github:focus {
  color: #000000;
  background: #fefefe;
  border-color: #000000;
}

.rounded-social-buttons .social-button.tumblr {
  background: #32506d;
}

.rounded-social-buttons .social-button.tumblr:before {
  font-family: "Font Awesome 5 Brands";
  content: "";
  font-weight: 900;
}

.rounded-social-buttons .social-button.tumblr:hover, .rounded-social-buttons .social-button.tumblr:focus {
  color: #32506d;
  background: #fefefe;
  border-color: #32506d;
}




/***************************************** AJAX CONTENT **********************************************/




#ajax_content{
  width:36%;
  background-color: #f2f2f2;
  z-index:3;
  margin-left: 25%;

}

#ajax_content.boforeLoad {
   margin-left: -102%;
}


#ajax_content .program_description, #ajax_content .program_description p{

  font-style: normal !important;
}



#ajax_close{float:right;margin-top: -2.5rem;margin-right: -2rem}
#ajax_close i{font-size: 3rem;}

/***************************************** animation CONTENT **********************************************/






#animation_content{
  width:100%;
  background-color: #1a255b;
  z-index:12;
  margin-left: 102%;
  position: relative;
      -webkit-transition: all 700ms ease-in-out;
    transition: all 700ms ease-in-out;

}

#animation_content.selected{

  width:100%;
  margin-left:0;

}


#animation_container{display: inline-block;position: relative;}
#animation_close{/*float:right;margin-top: 2.5rem;margin-right: 2rem; *//*display:none;*/}
#animation_close i{font-size: 3rem;color:#fff;}

  





/******************************************** TOOLTIPSTER  *****************************/

.mytooltip{  font-size:0.9rem !important;
  font-family: 'Montserrat-Light';
  text-transform: uppercase;}
 
  .tooltip_templates { display: none; }

  .tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box {
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(243,243,243,1) 100%);
  border: 3px solid #000;
  /*border-radius: 6px;
  box-shadow: 5px 5px 2px 0 rgba(0,0,0,0.4);*/
}

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content{

  padding: 0.2375rem;

}

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content div {

  padding: 0.2375rem 0.6375rem;
  color:#312f32;
    font-family: 'Montserrat-Light';
  text-transform: uppercase;
  font-size:0.9rem !important;
}

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content div a{

  padding: 0.2375rem 0.6375rem;
  color:#312f32;

  font-size:0.9rem !important;
  font-family: 'Montserrat-Light';
  text-transform: uppercase;



}


.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content div a:hover{

  padding: 0.2375rem 0.6375rem;
  color:#000;
  font-family: 'Montserrat-Light';
  text-transform: uppercase;
  font-size:0.9rem !important;
}


.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content div h5{
margin:0;padding:0;
line-height: 1rem;
}

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content div h5 a{
  font-size: inherit !important;
PADDING-LEFT:0;
}
.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content div h5 a:hover{
PADDING-LEFT:0;
font-size: inherit !important;
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-borderless-customized .tooltipster-content{

  
    font-family: 'Montserrat-Light';
  text-transform: uppercase;
  font-size:0.8rem !important;

}


.tooltipster-sidetip.tooltipster-borderless.tooltipster-borderless-customized .tooltipster-box {

  border-radius: 15px;
  background-color: #312f32
}

.markerTitle{  
  font-size: 1.6rem !important;
  margin-bottom: 0.625rem !important;
  line-height: inherit;
  color: #000;
  font-family: 'Brown-Light', sans-serif;
  font-style: italic;}



.markerAddress{

  font-family: 'Brown-Light', sans-serif;
  color:#000000;
  font-weight:400;
  font-size: 1rem


}

/******************************************** test *****************************/

#test{
  width:36%;
  background-color: #f2f2f2;

}

#test:target {
  margin-left: 25%;
}

#test_right{


  margin-left:61%;
  width:36%; 
  z-index: 2;
  -webkit-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
  /*-webkit-transition-delay: 1s;
  transition-delay: 1s;*/



  background-image:url(/template/backgrounds/bg_12.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  /*background-attachment:fixed; */
  background-repeat:no-repeat;


}

#test_right.boforeLoad{

  /*background-image:url(/template/GVSD-keyviz-cello-dark4.jpg);
  background-position:center center; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
 
  background-repeat:no-repeat;*/


  margin-left: 102%;
}



.leaflet-popup-content {
  width:auto !important;
  min-width:250px
}











.fancybox-caption {
   
    border-top: 0px !important;
   
}