/*------------------------------------------------------------------ 
                            LOADER 
-------------------------------------------------------------------*/

.loader img {
    width: 100%;
}

 #preloader {
     width: 100%;
     height: 100%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 11000;
     position: fixed;
     display: block;
     display: flex;
     justify-content: center;
     align-items: center;
     background: #000;
     opacity: 0.9;
}
 .loader {
     display: block;    
     flex-wrap: wrap;
     height: auto;
     width: 200px;
     -webkit-transform-style: preserve-3d;
}

/*------------------------------------------------------------------ 
                           END LOADER 
-------------------------------------------------------------------*/

/* ------------------------------------------------------------------------ 

                          Global Modal window

------------------------------------------------------------------------ */

/* Overlay modal prozor */
.globalModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: 100;
}

/* Klasa za fade-in efekt */
.globalModal.show {
    display: flex;
    opacity: 1;
}

/* Okvir oko slike za pozicioniranje gumba */
.globalModal-content {
    position: relative;
    display: inline-block;
}

/* Slika u globalnom modalu */
.globalModal-img {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 10px;
    transform: scale(0.8);
    transition: transform 0.4s ease-in-out;
}

/* Kada se modal otvori, slika se lagano povećava */
.globalModal.show .globalModal-img {
    transform: scale(1);
}

.globalModal-text {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 15px;
    font-size: 0.8rem;
    border-radius: 5px;
    white-space: nowrap;
    max-width: 90%;
    text-align: center;
}

@media only screen and (min-width: 768px) {
	.globalModal-text {
       font-size: 18px;
	}
}

/* Gumb za zatvaranje (unutar slike) */
.close-btn {
    position: absolute;
    top: 10px;
    right: 25px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 50px;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    z-index: 10;
}

.close-btn:hover {
    background: rgba(255, 0, 0, 0.6);
}
/* ----------------------------------------- end modals --------------------------------------------- */

/* -------------------------------- 

Secondary Fixed Navigation

-------------------------------- */
.cd-secondary-nav {
  position: relative;
  z-index: 3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cd-secondary-nav ul {
  /* mobile first - secondary navigation hidden by default, triggered by tap/click on .cd-secondary-nav-trigger*/
  position: fixed;
  list-style-type: none;
  width: 90%;
  max-width: 400px;
  right: 12px;
  top: 5%;
  border-radius: 0.25em;
  background: rgba(73,134,30, 0.96);
  visibility: hidden;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 100% 0%;
  -moz-transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -o-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
  transition: transform 0.3s, visibility 0s 0.3s;
}
.cd-secondary-nav ul.is-visible {
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
}
.cd-secondary-nav li a {
  display: block;
  padding: 1.6em;
  border-bottom: 1px solid #33cc33;
  color: #f0eee1;
  text-decoration: none;
}
.cd-secondary-nav li:last-child a {
  border-bottom: none;
}
.cd-secondary-nav-trigger {
  position: fixed;
  top: 5%;
  right: 12px;
  width: 44px;
  height: 44px;
  background: rgba(73,134,30, 0.96) url(../../img/content/cd-icon-secondary-nav-trigger.svg) no-repeat;
  border-radius: 0.25em;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  z-index: 2;
}

/* -------------------------------- 

          CD-top

-------------------------------- */

.cd-top {
 display: inline-block;
 height: 45px;
 width: 45px;
 border-radius: 10%;
 position: fixed;
 right: 12px;
 bottom: 30px;
 box-shadow: 0 0 10px rgba(0, 0, 0, .05);
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 background: rgba(73,134,30, .96) url(../../img/content/cd-top-arrow.svg) no-repeat center 50%;
 visibility: hidden;
 opacity: 0;
 -webkit-transition: opacity .3s 0s, visibility 0s .3s;
 -moz-transition: opacity .3s 0s, visibility 0s .3s;
 transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-fade-out,
.cd-top.cd-is-visible,
.no-touch .cd-top:hover {
 -webkit-transition: opacity .3s 0s, visibility 0s 0s;
 -moz-transition: opacity .3s 0s, visibility 0s 0s;
 transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
 visibility: visible;
 opacity: 1;
}
.cd-top.cd-fade-out {
 opacity: .8;
}
.cd-top:hover {
 background-color: #339933;
 opacity: 1;
}

@media only screen and (min-width: 768px) {
	.cd-secondary-nav ul, .cd-secondary-nav-trigger, .cd-top {
		right: 5%;
	}
}
/* ----------------------- end CD-top --------------------------------- */

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

body {
    font-size: 100%;
    font-family: Ubuntu, sans-serif;
    background-color: #000;
    padding-bottom: 50px;
}
.fltlft {
    float: left
}
.fltrgt {
    float: right
}
.clearfloat {
    clear: both
}
img {
    max-width: 100%;
}
.italic {
	font-style: italic;
}
.underline {
	text-decoration: underline;
}

/* ------------------------------------------------------------------------ 

                            Okvir

------------------------------------------------------------------------ */

.okvir-column-in {
    margin: 0;
    padding: 0 12px;
}
.okvir-tl {
    width: 24px;
    height: 21px;
    background: url(../../img/events/images/star_wars/cf_frame_tl.gif) top left no-repeat;
    display: table-cell;
}
.okvir-tm {
    width: 100%;
    height: 21px;
    background: url(../../img/events/images/star_wars/cf_frame_tm.gif) repeat-x;
    display: table-cell;
}
.okvir-l,
.okvir-tr {
    width: 24px;
    display: table-cell;
}
.okvir-tr {
    height: 21px;
    background: url(../../img/events/images/star_wars/cf_frame_tr.gif) top right no-repeat;
}
.okvir-l {
    background: url(../../img/events/images/star_wars/cf_frame_ml.gif) top left repeat-y;
}
.okvir-m {
    width: 100%;
    background-color: #cabea5;
    display: table-cell;
}
.okvir-bl,
.okvir-r {
    width: 24px;
    display: table-cell;
}
.okvir-r {
    background: url(../../img/events/images/star_wars/cf_frame_mr.gif) top right repeat-y;
}
.okvir-bl {
    height: 25px;
    background: url(../../img/events/images/star_wars/cf_frame_bl.gif) top left no-repeat;
}
.okvir-bm {
    width: 100%;
    height: 25px;
    background: url(../../img/events/images/star_wars/cf_frame_bm.gif) repeat-x;
    display: table-cell;
}
.okvir-br {
    width: 24px;
    height: 25px;
    background: url(../../img/events/images/star_wars/cf_frame_br.gif) top right no-repeat;
    display: table-cell;
}
@media only screen and (min-width: 768px) {

    .okvir-column-in {
        margin: 0;
        padding: 0 32px;
    }
    .okvir-tl {
        width: 64px;
        height: 56px;
        background: url(../../img/events/images/star_wars/frame_tl.gif) top left no-repeat;
        display: table-cell;
    }
    .okvir-tm {
        width: 100%;
        height: 56px;
        background: url(../../img/events/images/star_wars/frame_tm.gif) repeat-x;
        display: table-cell;
    }
    .okvir-l,
    .okvir-tr {
        width: 64px;
        display: table-cell;
    }
    .okvir-tr {
        height: 56px;
        background: url(../../img/events/images/star_wars/frame_tr.gif) top right no-repeat;
    }
    .okvir-l {
        background: url(../../img/events/images/star_wars/frame_ml.gif) top left repeat-y;
    }
    .okvir-m {
        width: 100%;
        background-color: #cabea5;
        display: table-cell;
    }
    .okvir-bl,
    .okvir-r {
        width: 64px;
        display: table-cell;
    }
    .okvir-r {
        background: url(../../img/events/images/star_wars/frame_mr.gif) top right repeat-y;
    }
    .okvir-bl {
        height: 67px;
        background: url(../../img/events/images/star_wars/frame_bl.gif) top left no-repeat;
    }
    .okvir-bm {
        width: 100%;
        height: 67px;
        background: url(../../img/events/images/star_wars/frame_bm.gif) repeat-x;
        display: table-cell;
    }
    .okvir-br {
        width: 64px;
        height: 67px;
        background: url(../../img/events/images/star_wars/frame_br.gif) top right no-repeat;
        display: table-cell;
    }
}
/* ----------------------- end okvir --------------------------------- */

/* ------------------------------------------------------------------------ 

                            Telefon

------------------------------------------------------------------------ */
#phone {
    float: left;
    position: relative;
}
@media only screen and (min-width: 768px) {
	#phone {
       visibility: hidden;
   }
}
/* ----------------------- end telefon --------------------------------- */

/* ------------------------------------------------------------------------ 

                          Odabir Jezika

------------------------------------------------------------------------ */

.cd-container,
header {
    width: 90%;
    min-width: 295px;
    max-width: 1170px;
    margin: 0 auto
}
.cd-btn {
	margin-top: 20px;
	float: right
}
.cd-btn img {
	width: 60px;
   height: 30px;
   margin-left: 10px;
   border: 1px solid #fff;
}
@media only screen and (min-width: 768px) {
	.cd-btn img {
		width: inherit;
	   height: inherit;
	}
}

/* ------------------------------------- KRAJ GLOBALNOG STILA --------------------------------------- */
 header {
 	text-align: center;
 }
 h1 {
 	font-size: 1.5rem;
 	margin: 20px 0;
 	text-align: center;
 	font-weight: 500;
 }
 h2 {
 	font-size: 1.3rem;
 	margin: 20px 0;
 	text-align: center;
 	font-weight: 500;
 }
p {
	text-align: justify;
	font-size: 1rem;
	line-height: normal;
}
#journey img,
.IFC a img,
.IFC img,
.galerija a img,
.videos img {
    border: 1px solid #000;
}
#journey p {
    margin: 20px 0 0;
    padding: 0;
    text-align: justify;
    font: italic 16px Georgia;
    color: #000;
}
#journey span {
    font-size: 20px;
    font-family: Georgia;
    font-style: oblique;
    float: right;
}
#journey img {
    width: 100%;
    max-width: 272px;
    display: block;
    margin: auto;
}
#journey hr {
    border: 0;
    color: #7d7463;
    background-color: #7d7463;
    height: 1px;
    margin-top: 15px;
    margin-bottom: 20px;
}
img#Ink-Fusion_Empire {
    display: block;
    margin: auto;
    padding-bottom: 15px;
}
.IFC img {
    width: 100%;
    margin: 10px 10px 10px 0;
}
#actors {
	text-align: center;
}
#actors img,
.videos img {
   display: inline-table;
   margin: 10px 0;
   width: inherit;
}
.galerija,
.videos {
	text-align: center;
}
.galerija img {
	margin: 10px;
}

@media only screen and (min-width: 768px) {
	 header {
	 	text-align: left;
	 }
	 header img {
	   margin-left: 100px;
	 }
	 h1 {
      font-size: 2.5rem;
      padding-bottom: 20px;
   }
    h2 {
        font-size: 2rem;
    }   
	#journey img {
	   float: left;
	   margin: 0 15px 0 0;
	   padding-bottom: 0;
	}
	img#Ink-Fusion_Empire {
		float: left;
		padding-bottom: 0;
	}
   .IFC img {
      margin: 10px 20px 10px 0;
   }
   #actors img,
   .videos img {
   	margin: 10px;
   }
}