/*-- =================================================================================== Font
 =================================================================================================================================================================================== --*/
 @import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap");

 /*-- =================================================================================== Typography
 =================================================================================================================================================================================== --*/
 * {
	--bs-title-font: "Lexend", sans-serif;
	--bs-title-font-weight: 300;
	--bs-title-font-color: #eee;
	--bs-subtitle-font-color: #bbb;
	--bs-title-font-size: 3rem;
	--bs-body-font:  "Lexend", sans-serif;
	--bs-body-font-size: 1rem;
	--bs-body-font-color: #132234;
	--bs-bg-light: #fff;
	--bs-foto-color:#f00;}

html {
	overflow-x: hidden;
	padding: 0;
	margin: 0;
	background: var(--bs-bg-light);}

body {
	background: var(--bs-bg-light);
	font-family: var(--bs-body-font);
	font-size: var(--bs-body-font-size);
	font-weight: 200;
	color: var(--bs-body-font-color);
	padding: 0;
	line-height: 1.7em;
	word-spacing: 0px;}

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

a:hover,
a:focus {
	color:#fff;
	opacity:.5;
    text-decoration: none;
    transition: all 0.3s;}

a.loc {
	color:var(--bs-body-font-color);}	
	
a.loc:hover {
	color:#085d5c;}	
	
ul, li {
	list-style:none;}
	
ul.equipment li {
	list-style:square;}	
	
h1,
h4,
h3,
h5,
h6 {
	margin-top: 0;
	font-family: var(--bs-title-font);
	font-weight: var(--bs-title-font-weight);
	color: var(--bs-title-font-color);}
	

h2	 {
	font-size:var(--bs-title-font-size);
	color:var(--bs-subtitle-font-color);}


.title{
	font-size:5rem;
	font-weight:600;
}

@media (max-width: 1370px) {
.title{
	font-size:2rem;}}

.h-100 {
	margin-top:300px;}
	
 /*-- =================================================================================== Navbar
 =================================================================================================================================================================================== --*/
.myMenu {
  --bs-menu-color: #814fff;
  --bs-menu-secondary-color: #212529;
  --bs-menu--font: "Lexend", sans-serif;
  --bs-menu-link-color:var(--bs-dark);}

.myMenu-header .nav-link {
  color: var(--bs-gray-800);}
  
.myMenu-header .nav-link:hover {
  color: var(--bs-menu-color);}
  
.myMenu-header .navbar-collapse {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  z-index: 9;}
  
@media (min-width: 992px) {
  .myMenu-header .navbar-collapse {
    position: initial;
    box-shadow: none;}}
	
@media (min-width: 992px) {
  .myMenu-header .dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    margin-top: 0.125rem;}}
	
.myMenu-header .dropdown .dropdown-menu {
  margin-top: 0.125rem;
  transition: all 0.3s ease-in-out;}
  
@media (min-width: 992px) {
  .myMenu-header .dropdown .dropdown-menu {
    opacity: 0;
    display: block;
    margin-top: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);}}
	
.myMenu-header .dropdown .dropdown-item {
  color: var(--bs-bs-dropdown-color);}
  
.myMenu-header .dropdown .dropdown-item:hover {
  color: var(--bs-menu-color);}
  
.myMenu-header .dropdown .dropdown-item:active {
  color: #FFF;
  background-color: var(--bs-menu-color);}
  
.myMenu-header .dropdown .dropdown-toggle::after {
  display: none;}
  
.myMenu-header .primary-btn {
  background-color: var(--bs-menu-secondary-color);}
  
.myMenu-header .primary-btn:hover {
  background-color: var(--bs-menu-color);}
  
.myMenu-hero {
  padding-top: 2rem;
  padding-bottom: 2rem;}
  
@media (min-width: 992px) {
.myMenu-hero {
    padding-top: 5rem;
    padding-bottom: 5rem;}}
.myMenu-hero p {
  font-size: 18px;
  line-height: 1.8;}
  
.myMenu-hero h1 {
  font-weight: 500;}
  
.myMenu-hero .primary-btn {
  background-color: var(--bs-menu-color);
  color: #fff;
  position: relative;
  z-index: 0;
  overflow: hidden;}
  
.myMenu-hero .primary-btn:after {
  transition: all 0.3s;
  height: 100%;
  left: -35%;
  top: 0;
  transform: skew(50deg);
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;}
  
.myMenu-hero .primary-btn:after, .myMenu-hero .primary-btn:before {
  background: var(--bs-menu-secondary-color);
  content: "";
  position: absolute;
  z-index: -1;}
  
.myMenu-hero .primary-btn:hover:after {
  height: 100%;
  width: 135%;}
  
 /*--============================================================================== Gallery
==============================================================================================================================================-- */		
.gallery {
	webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.75);
	box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.75);}

/*--============================================================================== Caption
==============================================================================================================================================-- */		
.caption {
	position:absolute;
	left:8%;
	bottom:25%;
	color:var(--bs-title-font-color);}

@media (max-width: 1370px) {
.caption {
	left:2%;
	bottom:75%;}}
	
.foto {
	position:absolute;
	top:35px;
	right:35px;
	color:var(--bs-foto-color);}

.name {
	position:absolute;
	left:25px;
	top:25px;
	color:#fff;
	font-weight:300;
	font-size:1.4em;}
	
.view_0 {
	position:absolute;
	right:50px;
	bottom:35px;
	font-weight:600;
	color:#fff;}
	
.view_1 {
	bottom:100px;}
	
.view_2 {
	bottom:155px;}	
	
.view_3 {
	bottom:200px;}		

.popover-header {
    color: #000 !important;}
	
@media (max-width: 576px) {
.name {
	font-size: 1rem; /* Smanjujemo font naslova */
	top: 10px;
	left: 10px;}
    
.view_0 {
	right: 10px;
	bottom: 10px;}

/* Smanjujemo razmake između gumba da ne prekriju cijelu sliku */
.view_1 { 
	bottom: 45px; }
	
.view_2 { 
	bottom: 80px; }
	
.view_3 { 
	bottom: 115px; }

.btn-sm {
	font-size: 0.7rem; /* Još manji gumbi na mobitelu */
	padding: 0.2rem 0.5rem;}}
	
/*--============================================================================== Section
==============================================================================================================================================-- */		
.section { 
	height: 100%; 
	overflow:auto;
	top:0;
	left:0;	
	padding:100px 15px;
    display: table;
    table-layout: fixed;
    box-sizing: border-box;
    margin: 20px auto;
	height:90vh;}	
	
/*--============================================================================== Accordion
==============================================================================================================================================-- */	
/* Removes background, border, and shadow from the button */
/* Uklanja pozadinu, obrub i sjenu sa gumba */
.accordion-button {
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: inherit;	/* Inherits text color from the parent */   /* Zadržava boju teksta roditelja */}

/* Removes the focus outline when clicked */
/* Uklanja (focus) kada se klikne */
.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;} /* Ili stavite transparent */


/* Button style when NOT collapsed – removes the default Bootstrap blue color */
/*Stil gumba kada NIJE skupljen (collapsed) - uklanja zadanu Bootstrap plavu boju */
.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: inherit;
    box-shadow: none;}

/* Optional: Removes top/bottom borders from the accordion item itself */
/* Opcionalno: Uklanja gornji/donji obrub samog accordion itema */
.accordion-item {
	overflow: hidden;
    border-bottom: .5px solid #ddd;
	border-left:0;
	border-right:0;}

.acc-title {
	font-size:1.5rem;
	font-weight:normal;
	text-align:center;}

.toc-tab-box .acc-content{
        padding:0px;}
		
.toc-tab-box h2.acc-title {
    color: #002d5b;
    background: #FAFAFA;
    padding: 30px 0px;
    padding-left: 60px;
    font-size: 20px;
    font-weight: 400;
    margin: 0px;
    margin-bottom: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.5s ease;
    width: 100%;
    float: left;}

.toc-tab-box .acc-content {
    background: #f00;
    width: 100%;
    margin-bottom: 4px;
    float: left;
    padding: 30px 30px 30px 60px;
    color: #617693;
    font-size: 14px;
    position: relative;
    overflow: hidden;}

.accordionItemHeading img{
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 8px;
	display: inline-block;}

.accordionItemHeading h4 {
    color: #389AD8;
    font-size: 16px;
    transition: all 0.5s ease;
    line-height: 24px;
    font-weight: 400;
    margin: 15px 0px;}

.quest .answer {
    border-left: 1px solid #58ABDF;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-top: 20px;
    margin-left: 20px;
    padding: 10px 20px 10px 36px;}

.acc-content .quest {
    margin: 10px 0px;}
	
.stay {
	color:#a60027}
	
.repo {
  height: 20px;}	

@media (max-width: 768px) {
    .toc-tab-box .acc-content{
        padding:0px;}}	  
		
.accordion-button:not(.collapsed) {		
	background-color:#f6f6f6;}
	
/*--============================================================================== Link (button)
==============================================================================================================================================-- */	
.bttnBkg{
	border:none;
	margin:0;
	width:auto;
	overflow:visible;
	background:transparent;
	color:inherit;
	font:400 1.5rem/1 Faktum,sans-serif;
	font:var(--bs-font-ui);
	line-height:1;
	outline:none;
	-webkit-font-smoothing:inherit;
	-moz-osx-font-smoothing:inherit;
	-webkit-appearance:none;}
	
.bttnBkg::-moz-focus-inner{
	border:0;
	padding:0;}
	
.bttnFor{
	font-size:var(--bs-scale-1);
	margin-top:2rem;}

.bttnFor.bttnBkg{
	position:relative;
	display:-webkit-inline-box;
	display:inline-flex;
	-webkit-box-align:center;
	align-items:center;
	font:var(--bs-font-ui);
	white-space:nowrap;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	font-size:var(--bs-scale-1);}
	
.bttnFor[data-theme=default]{
	color:#fff;
	padding:.5em 0!important;
	margin-left:1.35rem;
	background:url();}
	
.bttnFor[data-theme=default]:before{
	content:"";
	position:absolute;
	left:-.5rem;
	top:50%;
	width:.85em;
	height:.85em;
	-webkit-transform:translate(-100%,-50%);
	transform:translate(-100%,-50%);
	border-radius:var(--bs-radius-round);
	border:2px solid;
	-webkit-transition:background .15s var(--bs-easing-standard);
	transition:background .15s var(--bs-easing-standard);}
	
.bttnFor[data-theme=default]:after{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	-webkit-transform:scaleX(0);
	transform:scaleX(0);
	background:currentColor;
	-webkit-transition:-webkit-transform .15s var(--bs-easing-standard);
	transition:-webkit-transform .15s var(--bs-easing-standard);
	transition:transform .15s var(--bs-easing-standard);
	transition:transform .15s var(--bs-easing-standard),-webkit-transform .15s var(--bs-easing-standard);
	-webkit-transform-origin:left;
	transform-origin:left;}

.bttnFor[data-theme=default]:hover:before{
	background:currentColor;}
	
.bttnFor[data-theme=default]:hover:after{
	-webkit-transform:scaleX(1);
		transform:scaleX(1);}
		
@media (min-width:35em){
.bttnFor[data-theme=default][data-offset=true]{margin-left:0}}
	
.bttnFor[data-theme=cta]{
	border:1px solid;
	padding:1.25em 2em!important;
	text-align:center!important;
	-webkit-box-pack:center;
	justify-content:center;
	border-radius:var(--bs-radius-round);}
	
.bttnFor[data-busy=true]{
	opacity:.5;
	pointer-events:none;}
	
.bttnFor[disabled]{
	pointer-events:none;
	color:var(--bs-color-grey-500)!important;}
  
 .btn_line span {
	color:#000;}
	
/*--============================================================================== Signature
==============================================================================================================================================-- */	
.footer {
	background:url(../img/all/bkg.jpg) repeat;
	color:#74b1c0;}
	
.custom-footer {
    background: url('../img/all/bkg.jpg') repeat;
    color: #74b1c0;
    padding: 3rem 0; /* Bootstrap preporuka za razmak */
}
	
.signature, 
.signature span, 
.signature strong {
	-webkit-transition:all 0.4s ease-in-out;
	-moz-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;}

.signature {
	display:inline-block;
	position:relative;
	right:30px;
	top:12px;
	float:right;
	width:25px;
	height:25px;
	color:#fff;
	text-decoration:none;
	overflow:hidden;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);}
	
.signature.right {
	right:auto;}

.signature:hover {
	text-shadow:1px 1px #333;}

.signature span {
	display:block;
	width:24px;
	height:24px;
	position:absolute;
	z-index:10;
	background:#1d1d1d url('../img/all/sign1.png') center 5px no-repeat;
	background-size:18px auto;
	border-radius:50%;}

.signature span {
	background:transparent url('../img/all/sign2.png') center -2px no-repeat;
	background-size:30px auto;}

.signature:hover span {
	background-color:#d5261e;}

.signature strong {
	display:block;
	position:absolute;
	top:4px;
	left:15px;
	font-size:12px;
	font-weight:400;
	line-height:17px;
	opacity:0;}

.signature.right strong {
	left:-20px;}

.signature:hover {
	color:#fff;
	text-decoration:none;
	overflow:visible;}

.signature:hover span  {
	background-color:rgba(121,216,240, .8);;
	border-radius:6px;}

.signature:hover strong {
	left:30px;
	opacity:1;}

.signature.right:hover strong {
	left:-40px;}