* {
    margin: 0;
    padding: 0;
}

body {
	min-width: 100%;
	background-color: var(--background);
}

:root{
	--background: #efefef;
	--blue: #115280;
	--orange: #d0593d;
	--letters: #000;
	--loaderBackground: #efefef9c;
	--darkBlue: #2712a1;
	--headings: #115280;
	--selectionBackground: #115280;
	--selectionLetters: #efefef;
	--notificationsBackground: #efefefd6;
}

@media (prefers-color-scheme: dark){
	:root{
		--background: #252733;
		--blue: #0d2f4a;
		--orange: #d0593d;
		--letters: #efefef;
		--loaderBackground: #2527339c;
		--darkBlue: #2712a1;
		--headings: #efefef;
    	--selectionBackground: #efefef;
    	--selectionLetters: #0d2f4a;
    	--notificationsBackground: #252733d6;
	}
	
	/*.loader::after{*/
	/*    background-image: url('../images/WEBP/MonakoLogoDarkLIconLoader.webp');*/
	/*}*/
	
}

@media (prefers-color-scheme: light){
    /*.loader::after{*/
    /*    background-image: url('../images/WEBP/Monako_Ikonica-favicon.webp');*/
    /*}*/
}

@font-face {
	font-family: 'JakartaMedium';
	src: url('../fonts/PlusJakartaSans-Medium.ttf');
}

@font-face {
	font-family: 'JakartaLight';
	src: url('../fonts/PlusJakartaSans-Light.ttf');
}

@font-face {
	font-family: 'JakartaRegular';
	src: url('../fonts/PlusJakartaSans-Regular.ttf');
}

@font-face {
	font-family: 'JakartaSemiBold';
	src: url('../fonts/PlusJakartaSans-SemiBold.ttf');
}

.loader {
    z-index: 2;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--loaderBackground);
	transition: opacity 0.5s, visibility 0.5s;
}

.loader img{
	width: 4vw;
	aspect-ratio: 1/1;
	animation: loading 1.2s ease infinite;
}

.loader--hidden {
	opacity: 0;
	visibility: hidden;
}

/*.loader::after{*/
/*	content: "";*/
/*	width: 4vw;*/
/*	height: 4vw;*/
/*	background-size: 4vw ;*/
/*	animation: loading 1.2s ease infinite;*/
/*}*/

@keyframes loading {
  from {transform: rotateY(0deg)}
  to {transform: rotateY(720deg)}
}

.scrollingBar{
	top: 0;
	position: fixed;
	z-index: 3;
	width: 100%;
	transition: top 0.3s ease;
}

.scrollingProgress{
	background-color: var(--orange);
	text-align: right;
	width: 0;
	height: 8px;
	border-radius: 8px;
	color: var(--orange);
}

.ScrollToTopButton{
	position: fixed;
	width: 4vw;
	aspect-ratio: 1/1;
	height: auto;
	background-color: var(--blue);
	cursor: pointer;
	bottom: -100%;
	right: 1vw;
	z-index: 6;
	border-radius: 50%;
	transition: opacity 0.2s ease-out;
	transition: bottom 0.3s cubic-bezier(0.42, 0, 0.39, 1)
}

.ScrollToTopButton img{
	width:100%;
	aspect-ratio: 1/1;
	height: auto;
}

.main{
	min-height: 98vh;
}

/*QuestionsBlock*/

.QuestionsBlock{
	/*margin-top: 8vw;*/
	margin-top: 2vw;
}

.QuestionsBlock h1#QuestionsHeading{
    font-family: 'JakartaSemiBold';
	font-size: 6vw;
	line-height: 170%;
    color: var(--headings);
	margin: 0;
	margin-bottom: 2vw;
	text-align: center;
}

.QuestionsBlock .QuestionBlock .Question ul{
	margin: 0;
	position: relative;
    list-style: none;
    padding: 0;
    font-family: 'JakartaMedium';
    font-size: 2vw;
    padding-bottom: 2.5vw;
     padding-top: 2.5vw;
	transition: 0.3s;
	
}

.QuestionsBlock .QuestionBlock .Question ul li{
	width: 100%;
    padding: 0;
	color: var(--headings);
	/* color: #fff; */
	padding-left: 1%;
	transition: 0.3s;
	display: inline;
}

.QuestionBlock {
	cursor: pointer;
	border-style: solid;
	border-width: 2px 2px 2px 2px;
	border-color: var(--headings);
	margin-top: 2vw;
	margin-bottom: 2vw;
	border-radius: 2vw;
	transition: 0.3s;
	
	cursor: pointer;
	margin-top: 2vw;
	margin-bottom: 2vw;
	border-width: 2px 2px 2px 2px;
	border-style: solid;
	border-radius: 2vw;
}

.QuestionBlock:hover{
    background-color: var(--blue);
    transition: 0.3s;
}

.QuestionBlock:hover .Question ul li{
    color: #efefef;
}

.QuestionBlock:hover .barDiv .bar, .QuestionBlock:hover .barDiv:after{
    background-color: #fff;
    transition: background-color 0.3s;
}

.QuestionBlock .Answer{
	overflow: hidden;
	max-height: 0;
	transition: 0.3s;
}

.QuestionBlock .Answer h1{
    font-family: 'JakartaMedium';
	font-size: 2vw;
	margin: 0;
	color: var(--background);
	padding-left: 2%;
	padding-right: 2%;
	color: #fff;
	
}

.QuestionBlock .Answer p{
	font-size: 3.5vw;
	margin: 0;
	padding-bottom: 3vw;
	color: #fff;
	padding-left: 2%;
	padding-right: 2%;
	transition: 0.3s;
}

.QuestionBlock .Answer ul{
	margin-bottom: 3vw;
	padding-right: 2%;
	padding-left: 6%;
	margin-top: 1vw;
	transition: 0.2s;
}

.QuestionBlock .Answer ul li{
	color: var(--background);
	font-family: 'JakartaRegular';
	font-size: 1.5vw;
	line-height: 170%;
	transition: 0.1s;
	width: 94%;
	/* padding-left: 1%; */
}

.QuestionBlock .Answer ul li a{
	color: var(--orange);
	font-family: 'JakartaRegular';
	font-size: 1.5vw;
	line-height: 170%;
	text-decoration: none;
	transition: 0.2s;
}

.QuestionBlock.open {
	background-color: var(--blue);
	border-color: none;
	border-radius: 2vw;
	border-color: #efefef00;
	transition: 0.3s;
}

.QuestionsBlock .QuestionBlock.open .Question ul{
	padding-bottom: 3vw;
	transition: 0.2s;
}

.QuestionsBlock .QuestionBlock.open .Question ul li{
	padding-left: 2%;
	color: #fff;
	transition: 0.2s;
}

.QuestionBlock.open .Answer{
	max-height: 300vw;
	margin-bottom: 1vw;
	transition: 0.2s;
}

.QuestionBlock.open .Answer h1{
    color: #fff;
    transition: 0.1s;
}

.QuestionBlock.open .Answer ul{
	transition: 0.2s;
}

.QuestionBlock.open .Answer ul li{
    color: #fff;
    transition: 0.1s;
    width: 94%;
}

.QuestionBlock.open .Answer ul li a{
    color: var(--orange);
    text-decoration: none;
    transition: 0.1s;
}

.QuestionBlock.open .Answer ul li a:hover{
    text-decoration: underline;
}

.QuestionBlock .barDiv{
    display: block;
	position: absolute;
	top: 2vw;
	right: 2%;
    width: 4vw;
    aspect-ratio: 1/1;
    background-color: none;
	/* float: right; */
    transition: 0.3s;	
}

.QuestionBlock .barDiv .bar, .barDiv:after{
	content: '';
	display: block;
	width:100%;
	background-color: var(--headings);
	height: 0.5vw;
	border-radius: 5vw;
	max-height: 0.5vw;
}

.QuestionBlock .barDiv .bar{
	transform: translateY(2vw);
}

.QuestionBlock .barDiv:after{
	transform: rotate(90deg) translateX(1.5vw);
}

.QuestionBlock.open .barDiv{
	transform: rotate(-90deg);
}

.QuestionBlock.open .barDiv:after{
	transform: rotate(90deg) translateX(1.8vw) translateY(0.2vw);
	background-color: #fff;
}

.QuestionBlock.open .barDiv .bar{
	max-height: 0vw;
}

/*QuestionsBlock*/

/*@media screen and (max-width: 10000px) and (min-width: 699px){*/
@media screen and (max-width: 10000px) and (min-width: 700px){
	.pre-header-telefon{
		display: none;
	}
	
	.headerPhoneScroll{
	    display: none;
	}
	
	.MainMenuPhone{
		display: none;
	}
	
	/*.ScrollToTopButton{*/
	    /*display: none;*/
	/*}*/
	
	/*.QuestionsBlockAndContainer{
	    display: none;
	}*/
	
	.PoslednjiRedTelefonNovi{
	    display: none;
	}
	
    .QuestionBlock.open .Answer ul li#Telefon{
        display: none;
    }
    
    .QuestionBlock .Answer ul li#Telefon{
        display: none;
    }
    
    /*.QuestionBlock.open .Answer ul li#Desktop{*/
    /*    display: block;*/
    /*}*/
	
}

@media screen and (max-width: 1800px) and (min-width: 1600px){
	.container {
		max-width: 1500px; 
	}
}

@media screen and (max-width: 2000px) and (min-width: 1800px){
	.container {
		max-width: 1700px !important; 
	}
}

/**/
@media screen and (max-width: 2500px) and (min-width: 2000px){
	.container {
		max-width: 1800px !important; 
	}
}

@media screen and (max-width: 3200px) and (min-width: 2500px){
	.container {
		max-width: 2300px;
	}
}

@media screen and (max-width: 3700px) and (min-width: 3200px){
	.container {
		max-width: 3000px;
	}
}

@media screen and (max-width: 4200px) and (min-width: 3700px){
	.container {
		max-width: 3500px;
	}
}

@media screen and (max-width: 4700px) and (min-width: 4200px){
	.container {
		max-width: 4000px;
	}
}

@media screen and (max-width: 5000px) and (min-width: 4700px){
	.container {
		max-width: 4600px !important;
	}
}

@media screen and (max-width: 5300px) and (min-width: 5000px){
	.container {
		max-width: 4900px !important;
	}
}

@media screen and (min-width: 5300px){
	.container {
		max-width: 5200px !important;
	}
}

/*NOVI HEADER PC*/

.HeaderPc {
	height: 3.4vw;
	width: 100%;
	background-color:var(--blue);
}

.HeaderPc .HeaderContainer{
	width: 90%;
	margin-left: 5%;
	position: relative;
}

.HeaderPc .HeaderContainer .ButtonDiv{
	/* display: inline-block; */
	/* vertical-align: middle; */
	height: 3.4vw;
	aspect-ratio: 640/241;
	width: auto;
	position: relative;
}

.HeaderPc .HeaderContainer .ButtonDiv button{
	border: 0;
	width: 100%;
	height: 100%;
	background-color: unset;
	position: absolute;
	top: 0;
}

.HeaderPc .HeaderContainer .ButtonDiv button picture{
	width: 100%;
	height: 100%;
	display: block;
}

.HeaderPc .HeaderContainer .ButtonDiv button picture img{
	height: 100%;
	width: 100%;
	display: block;
	/* display: inline-block; */
}

.HeaderPc .HeaderContainer .HeaderInformations{
	line-height: 2vw;
	/*display: inline-block;*/
	/*vertical-align: middle;*/
	width: 62vw;
	text-align: right;
	margin-left: 15vw;
    position: absolute;
	right: 0; 
	top: 0.7vw;
}

.HeaderPc .HeaderContainer .HeaderInformations .OneHeaderInformation{
	display: inline-block;
	margin-left: 1.4vw;
	line-height: 2vw;
}

.HeaderPc .HeaderContainer .HeaderInformations .OneHeaderInformation p{
	font-family: 'JakartaMedium';
	font-size: 0.9vw;
	color: #efefef;
	line-height: 2vw;
	vertical-align: middle;
	display: inline;
}

.HeaderPc .HeaderContainer .HeaderInformations .OneHeaderInformation a{
	font-family: 'JakartaMedium';
	font-size: 0.9vw;
	color: var(--orange);
	line-height: 2vw;
	vertical-align: middle;
	display: inline;
	text-decoration: none;
}

.HeaderPc .HeaderContainer .HeaderInformations .HeaderIconsRow{
	display: inline-block;
	margin-left: 1vw;
	line-height: 1.6vw;
	height: 1.6vw;
	vertical-align: middle;
}

.HeaderPc .HeaderContainer .HeaderInformations .HeaderIconsRow button{
	width: 1.6vw;
	height: 1.6vw;
	margin-left: 0.1vw;
	border: 0;
	border-radius: 0.3vw;
	background-color: red;
	background-color: var(--blue);
	display: inline-block;
	vertical-align: unset;
	position: relative;
}

.HeaderPc .HeaderContainer .HeaderInformations .HeaderIconsRow button:hover{
	background-color: var(--orange);
	transition: ease-out 0.2s;
}

.HeaderPc .HeaderContainer .HeaderInformations .HeaderIconsRow button img{
	width: 1.4vw;
	aspect-ratio: 1/1;
	height: auto;
	position: absolute;
	top: 0.1vw;
	left: 0.1vw;
	/* vertical-align: unset; */
	/* display: unset; */
	/* margin-left: auto; */
	/* margin-right: auto; */
	/* margin-top: auto; */
	/* margin-bottom: auto; */
}

/*NOVI HEADER PC*/

/*newPhoneHeader*/

.headerPhoneScroll{
	height: 23vw;
	background-color: var(--blue);
	position: fixed;
	width: 100%;
	top: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	z-index: 4;
}

.headerPhoneScroll img#scrollMenuLogo{
	height: 23vw;
	position: absolute;
	padding-left: 6%;
	/*left: 6%;*/
}

.headerPhoneScroll ul{
	right: 6%;
	list-style: none;
}

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

.headerPhoneScroll .openMenu{
	width: 11vw;
	height: 11vw;
	top: 6vw;
	z-index: 8;
	display: block;
	position: absolute;
	right: 6vw;
	border: 2px solid #efefef;
	border-radius: 1.5vw;
	/*transition: z-index 0.2s ease;*/
	background-color: var(--blue);
}

/*newMenuPhone*/

.headerPhoneScroll .openMenu .openMenuBarDiv{
	position: absolute;
	/*width: 70%;*/
	/*left: 15%;*/
	width: 74%;
	left: 13%;
	/*height: 7vw;*/
	height: 7.6vw;
	/*margin-top: 1.5vw;*/
	margin-top: 1.2vw;
	display: block;
}

.headerPhoneScroll .openMenu .openMenuBarDiv .bar, .openMenuBarDiv:after, .openMenuBarDiv:before{
	content: '';
	display: block;
	width: 100%;
	/*height: 1vw;*/
	height: 1.1vw;
	border-radius: 5vw;
	background-color: #fff;
	/*margin-top: 1vw;*/
	/*margin-bottom: 1vw;*/
	margin-top: 1.2vw;
	margin-bottom: 1.2vw;
	transition: 0.3s;
}

.headerPhoneScroll .openMenu .openMenuBarDiv:before{
	margin-top: 1vw;
	margin-bottom: 0;
}

.headerPhoneScroll .openMenu .openMenuBarDiv:after{
	margin-top: 0;
	margin-bottom: 1vw;
}

.headerPhoneScroll.open .openMenu .bar{
	opacity: 0;
	transition: 0.2s;
}

.headerPhoneScroll.open .openMenu .openMenuBarDiv:before{
	/*transform: translateY(2vw) rotate(-45deg);*/
	transform: translateY(2.3vw) rotate(-45deg);
	transition: 0.3s;
}

.headerPhoneScroll.open .openMenu .openMenuBarDiv:after{
	/*transform: translateY(-2vw) rotate(45deg);*/
	transform: translateY(-2.3vw) rotate(45deg);
	transition: 0.3s;
}

.headerPhoneScroll .Menu{
	max-width: 0vw;
	position: fixed;
	right: 0;
	transition: max-width 0.3s ease;
}

.headerPhoneScroll.open .Menu{
	max-width: 100vw;
	width: 100vw;
	height: 100vh;
	position: fixed;
	overflow: scroll;
}

.headerPhoneScroll.open .Menu .mainMenuScroll{
    max-width: 100vw;
}

.headerPhoneScroll .openMenu img#scrollMenuBars{
	width: 100%;
	height: 100%;
	/*margin-left: 5%;
	margin-top: 5%;*/
	right: 0;
}

.headerPhoneScroll .mainMenuScroll {
	height: 124vh;
	width: 100vw;
	/*position: fixed;*/
	position: absolute;
	top: 0;
	z-index: 7;
	align-items: center;
	/*transition: right 0.5s ease;*/
	background-color: var(--blue);
	padding:0;
	/*right: -100vw;*/
	transition: max-width 0.3s ease;
	right: 0;
	max-width: 0;
}

/* NOVIMENU */

.MenuItems{
	margin-top: 22vw;
}

.MenuItems .MenuItem{
	width: 100vw;
	/* transition: 0.3s ease; */
	/* border-top: solid 2px #efefef; */
	/* border-bottom: solid 2px #efefef; */
	margin-top: -2px;
	margin-bottom: 4vw;
}

.MenuItems .MenuItem .MainMenuItem{
    margin-bottom: 3vw;
	text-align: center;
	transition: 0.2s ease-out;
}

.MenuItems .MenuItem .MainMenuItemHeading{
	text-align: center;
	display: inline-block;
	vertical-align: bottom;
	margin-right: 2vw;
	transition: 0.2s ease-out;
}

.Menu .mainMenuScroll .MenuItems .MenuItem .MainMenuItem .OpenSubmenuBarDiv{
	width: 9vw;
	height: 9vw;
    display: inline-block;
	vertical-align: bottom;
	position: relative;
	transition: 0.2s ease-out;
}

.Menu .mainMenuScroll .MenuItems .MenuItem .MainMenuItem .OpenSubmenuBarDiv .bar, .Menu .mainMenuScroll .MenuItems .MenuItem .MainMenuItem .OpenSubmenuBarDiv:after{
	content: '';
    display: block;
    width: 6vw;
    height: 0.5vw;
    border-radius: 2vw;
    background-color: #efefef;
	position: absolute;
	top: 4.4vw;
	/* color: var(--letters); */
    transition: 0.3s ease-out;
	transform: rotate(45deg);
	transition: ease-out 0.2s;
}


.Menu .mainMenuScroll .MenuItems .MenuItem .MainMenuItem .OpenSubmenuBarDiv:after{
	transform: translateX(3.9vw) rotate(-45deg);
	transition: ease-out 0.2s;
}


.MenuItems .MenuItem .MainMenuItemHeading h1{
	/* font-size: 6vw; */
	color: #efefef;
	font-weight: 200;
	font-size: 9vw;
	margin: 0;
	transition: transform 0.1s, color 0.3s;
	font-family: 'JakartaRegular';
}

.MenuItems .MenuItem .MainMenuItemHeading a{
	color: #efefef;
	font-weight: 200;
	font-size: 9vw;
	margin: 0;
	display: inline-block;
	transition: transform 0.1s, color 0.3s;
	text-decoration: none;
	font-family: 'JakartaRegular';
}

.MenuItems .MenuItem .MainMenuItemHeading a:hover{
	/*font-size: 10vw;*/
	color: var(--orange);
	transform: scale(1.2);
}

.MenuItems .MenuItem .SubMenuItems{
	text-align: center;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s;
}

.MenuItems .MenuItem .SubMenuItems ul{
	padding: 0;
	margin: 0;
}

.MenuItems .MenuItem .SubMenuItems ul li{
	margin-bottom: 3vw;
}

.MenuItems .MenuItem .SubMenuItems ul li a{
    font-size: 6vw;
    color: #efefef;
    font-weight: 200;
	text-decoration: none;
	display: inline-block;
	transition: transform 0.1s, color 0.3s;
	font-family: 'JakartaLight';
}

.MenuItems .MenuItem .SubMenuItems ul li a:hover{
	color: var(--orange);
	transform: scale(1.1);
	
}

.Menu .mainMenuScroll .MenuItems .MenuItem.open .MainMenuItem{
    padding-left: 5vw;
    transition: ease-out 0.2s;
}

.Menu .mainMenuScroll .MenuItems .MenuItem.open .MainMenuItemHeading{
    margin-right: 7vw;
    transition: 0.2s ease-out;
}

.MenuItems .MenuItem.open .MainMenuItemHeading h1{
	/* font-size: 6vw; */
	color: var(--orange);
	/*font-size: 10vw;*/
	transform: scale(1.2);
	transition: transform 0.1s, color 0.3s;
}

.Menu .mainMenuScroll .MenuItems .MenuItem.open .OpenSubmenuBarDiv{
	transform: rotate(180deg) scale(1.2);
	transition: ease-out 0.2s;
}

.Menu .mainMenuScroll .MenuItems .MenuItem.open .OpenSubmenuBarDiv .bar{
	background-color: var(--orange);
	transition: ease-out 0.2s;
}

.Menu .mainMenuScroll .MenuItems .MenuItem.open .OpenSubmenuBarDiv:after{
	background-color: var(--orange);
	transition: ease-out 0.2s;
} 

.MenuItems .MenuItem.open .SubMenuItems{
	max-height: 50vw;
	/*transition: 0.3s;*/
}


/* NOVIMENU */

.headerPhoneScroll .mainMenuScroll li{
	/*width: 44vw;*/
	/*margin-left: 28vw;*/
	text-align: center;
	margin-bottom: 5vw;
	transition: 1s ease;
}

.headerPhoneScroll .mainMenuScroll li#Prvi{
	margin-top: 22vw;
	/*margin-bottom: 0vw;*/
	transition: 0.75s ease;
}	 

.headerPhoneScroll .mainMenuScroll li#Prvi:hover{
	margin-bottom: 54vw;
	transition: 0.5s ease;
}

.headerPhoneScroll .mainMenuScroll li#Drugi:hover{
	margin-bottom: 54vw;
	transition: 0.5s ease;
}

.headerPhoneScroll .mainMenuScroll li#Treci:hover{
	margin-bottom: 30vw;
	transition: font-size 0.5s ease;
	transition: margin-bottom 0.5s ease;
	width: 48vw;
	margin-left: 26vw;
}

.headerPhoneScroll .mainMenuScroll li a{
    font-weight: 200;
	font-size: 9vw;
	transition: 0.3s ease;
}

.headerPhoneScroll .mainMenuScroll li a:hover{
	color: var(--orange);
	font-size: 10vw;
	transition: 0.3s ease;
}

.headerPhoneScroll .submenuScroll{
	width: 42vw;
	right: 29vw;
	padding: 0;
	margin-bottom: 6vw;
	visibility: hidden;
	position: absolute;
	opacity: 0;
	transition: opacity 0.2s ease;
	margin-top: 3vw;
}

.headerPhoneScroll .mainMenuScroll li:hover .submenuScroll{
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s ease;
}

.headerPhoneScroll #second.submenuScroll{
	width: 90vw;
	right: 5vw;
}

.headerPhoneScroll #third.submenuScroll{
	width: 40vw;
	right: 30vw;
}

.headerPhoneScroll .submenuScroll li{
	margin: 0;
	width: 42vw;
	transition: 0.1s ease;
	margin-bottom: 3vw;
}

.headerPhoneScroll #second.submenuScroll li{
	width: 90vw;
	/*right: 5vw;*/
	margin-bottom: 3vw;
}

.headerPhoneScroll .submenuScroll li a{
	font-size: 6vw;
	transition: 0.3s ease;
}

.headerPhoneScroll .submenuScroll li a:hover{
	color: var(--orange);
	font-size: 7vw;
}

/*.headerPhoneScroll .mainMenuScroll .closeMenu{*/
.headerPhoneScroll .Menu .closeMenu{
	display: block;
	position: absolute;
	top: 6vw;
	right: 6vw;
	z-index: 7;
	width: 11vw;
	height: 11vw;
	border: 2px solid #efefef;
	border-radius: 1.5vw;
	background-color: var(--blue);
}

.headerPhoneScroll .Menu .closeMenu img{
	width: 90%;
	height: 90%;
	margin: 5%;
	left: 0;
}

.headerPhoneScroll .Dugmici{
	margin-top: 12vw;
	background-color: var(--blue);
	margin-bottom: 10vw;
	display: none;
}

.headerPhoneScroll .Dugmici button{
	text-decoration: none;
	border: 2px solid #efefef;
	outline: none;
	width: 14vw;
	height: 14vw;
	color: #efefef;
	border-radius: 50%;
	background-size: 100% 100%;
	margin-left: 5vw;
	background-color: var(--blue);
}

.headerPhoneScroll .Dugmici button#Prvi{
	margin-left: 13vw;
}

.headerPhoneScroll .Dugmici button img{
	width: 10vw;
	height: 10vw;
}

.headerPhoneScroll .Dugmici button:hover{
	border-color: var(--orange);
	border-width: 2px;
	background-color: var(--orange);
	transition: 0.3s ease-out;
}

/*newPhoneHeader*/

/*NOTIFICATIONS*/

.NotificationsWrapper{
    display: none;
}

@keyframes notificationsLoading{
	0%{
		max-width: 0;
		opacity: 0;
	}
	1%{
		max-width: 100vw;
		opacity: 0;
	}
	100%{
		max-width: 100vw;
		opacity: 1;
	}
  }

.headerPhoneScroll .Notifications{
    width: 11vw;
    height: 11vw;
    top: 6vw;
    z-index: 5;
    display: block;
    position: absolute;
    right: 19vw;
    border: 2px solid #efefef;
    border-radius: 1.5vw;
    transition: z-index 0.2s ease;
    background-color: var(--blue);
}

.headerPhoneScroll .Notifications img{
	position: absolute;
	width: 80%;
	height: 80%;
	left: 10%;
	top: 10%;
}

.headerPhoneScroll .Notifications .OrangeDot{
	width: 2.5vw;
	background-color: var(--orange);
	position: absolute;
	top: -1vw;
	right: -1vw;
	aspect-ratio: 1/1;
	border: 1px solid var(--orange);
	border-radius: 1vw;
}

.headerPhoneScroll .NotificationsWrapper .NotificationsList{
	max-width: 0;
	opacity: 0;
	position: fixed;
	/* width: 100vw; */
	width: 100vw;
	height: 100vh;
	right: 0;
	top: 0;
	background-color: var(--notificationsBackground);
}

.headerPhoneScroll .NotificationsWrapper.open .NotificationsList{
	max-width: 100vw;
	opacity: 1;
	animation: notificationsLoading 0.2s ease 1;
	/*backdrop-filter: blur(1px);*/
	z-index: 6;
}

.headerPhoneScroll .NotificationsWrapper.open .NotificationsList .AllNotificationsWrapper{
	position: absolute;
    top: 30%;
    width: 90%;
    left: 5%;
}

.headerPhoneScroll .NotificationsWrapper.open .NotificationsList .AllNotificationsWrapper .Notification{
    background-color: var(--blue);
    color: #efefef;
    border: 2px solid #efefef;
    border-radius: 3vw;
}

.headerPhoneScroll .NotificationsWrapper.open .NotificationsList .AllNotificationsWrapper .Notification h1{
	margin-top: 3vw;
	margin-bottom: 3vw;
	text-align: center;
	font-family: 'JakartaSemiBold';
	font-size: 7vw;
}

.headerPhoneScroll .NotificationsWrapper.open .NotificationsList .AllNotificationsWrapper .Notification .NotificationTextWrapper{
	width: 92%;
	margin-left: 4%;
	margin-bottom: 2vw;
}

.headerPhoneScroll .NotificationsWrapper.open .NotificationsList .AllNotificationsWrapper .Notification .NotificationTextWrapper p{
    font-family: 'JakartaMedium';
	font-size: 3.8vw;
	line-height: 6vw;
	margin: 0;
}

.headerPhoneScroll .NotificationsWrapper.open .NotificationsList .AllNotificationsWrapper .Notification .NotificationSignatureWrapper{
	width: 90%;
	margin-left: 5%;
	margin-bottom: 3vw;
	text-align: right;
}

.headerPhoneScroll .NotificationsWrapper.open .NotificationsList .AllNotificationsWrapper .Notification .NotificationSignatureWrapper p{
    font-family: 'JakartaMedium';
	font-size: 3.8vw;
	line-height: 6vw;
	margin: 0;
}

.headerPhoneScroll .NotificationsWrapper.open .NotificationsList .AllNotificationsWrapper .CloseNotifications{
	width: 11vw;
	height: 11vw;
	margin-left: 79vw;
	position: relative;
}

.headerPhoneScroll .NotificationsWrapper.open .NotificationsList .AllNotificationsWrapper .CloseNotifications .CloseNotificationsBarDiv{
	position: absolute;	
	/*width: 70%;*/
	/*left: 15%;*/
	width: 84%;
	left: 8%;
	/*height: 7vw;*/
	height: 7.6vw;
	/*margin-top: 1.5vw;*/
	margin-top: 1.4vw;
	display: block;
}

.headerPhoneScroll .NotificationsWrapper.open .NotificationsList .AllNotificationsWrapper .CloseNotifications .CloseNotificationsBarDiv .bar, .CloseNotificationsBarDiv:before{
	content: '';
	display: block;
	width: 100%;
	height: 1.1vw;
	border-radius: 5vw;
	background-color: var(--selectionBackground);
	margin-top: 1.2vw;
	margin-bottom: 1.2vw;
}

.CloseNotificationsBarDiv .bar{
	transform: rotate(45deg);
}

.CloseNotificationsBarDiv:before{
	transform: rotate(-45deg) translateY(1.7vw) translateX(-1.5vw);
}

/*NOTIFICATIONS*/

/*NOVI MAIN MENU PC*/

.MainMenuPc{
    background-color: var(--background);
	border-style: solid;
    border-width: 0;
    border-bottom-width: 1px;
    border-color: var(--blue);
}

.MainMenuPc .MainMenuContainer{
	width: 90%;
	margin-left: 5%;
}

.MainMenuPc .MainMenuContainer > ul{
    list-style: none;
    margin-bottom: 0px;
    padding-left: 0;
	width: 100%; 
}

.MainMenuPc .MainMenuContainer > ul li{
    display: inline-block;
	vertical-align: middle;
    width: auto;
	color: var(--letters);
	background-color: var(--background);
	position: relative;
}

.MainMenuPc .MainMenuContainer > ul li .SpanDiv{
	font-family: 'JakartaRegular';
	font-size: 1vw;
	display: inline-block;
	vertical-align: middle;
    padding-left: 3vw;
    padding-right: 3vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
}

.MainMenuPc .MainMenuContainer > ul li .SpanDiv{
	font-size: 1vw;
}

.MainMenuPc .MainMenuContainer > ul li .SpanDiv span{
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.MainMenuPc .MainMenuContainer > ul li .SpanDiv .OpenSubmenuBarDiv{
	width: 1.2vw;
	height: 1.2vw;
    display: inline-block;
	vertical-align: middle;
	position: relative;
	transition: 0.2s ease-out;
	margin-left: 0.2vw;
}

.MainMenuPc .MainMenuContainer > ul li .SpanDiv .OpenSubmenuBarDiv .bar, .MainMenuPc .MainMenuContainer > ul li .SpanDiv .OpenSubmenuBarDiv:after{
	content: '';
    display: block;
    width: 0.8vw;
    height: 0.1vw;
    border-radius: 2vw;
    background-color: var(--letters);
	position: absolute;
	top: 0.5vw;
	color: var(--letters);
    transition: 0.3s ease-out;
	transform: rotate(45deg);
	transition: ease-out 0.2s;
}


.MainMenuPc .MainMenuContainer > ul li .SpanDiv .OpenSubmenuBarDiv:after{
	transform: translateX(0.55vw) rotate(-45deg);
	transition: ease-out 0.2s;
}

.MainMenuPc .MainMenuContainer > ul li a{
	font-family: 'JakartaRegular';
	font-size: 1vw;
	text-decoration: none;
	color: var(--letters);
	display: inline-block;
    padding-left: 3vw;
    padding-right: 3vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
}

.MainMenuPc .MainMenuContainer > ul li a:hover{
	color: #efefef;
	background-color: var(--blue);
}

.MainMenuPc .MainMenuContainer ul li ul{
	display: none;
}

.MainMenuPc .MainMenuContainer ul li ul li{
	display: block;
	background-color: var(--blue);
	text-align: left;
}

.MainMenuPc .MainMenuContainer ul li ul li a{
    padding-top: 1.2vw;
    padding-bottom: 1.2vw;
    display: block;
    padding-left: 2vw;
	color: #efefef;
	padding-right: 2vw;
}

.MainMenuPc .MainMenuContainer ul li:hover{
	color: #efefef;
	background-color: var(--blue);
	cursor: pointer;
}

.MainMenuPc .MainMenuContainer ul li:hover .SpanDiv .OpenSubmenuBarDiv{
	transform: rotate(180deg);
	transition: ease-out 0.2s;
}

.MainMenuPc .MainMenuContainer ul li:hover .SpanDiv .OpenSubmenuBarDiv .bar{
	background-color: #efefef;
	transition: ease-out 0.2s;
}

.MainMenuPc .MainMenuContainer ul li:hover .SpanDiv .OpenSubmenuBarDiv:after{
	background-color: #efefef;
	transition: ease-out 0.2s;
}

.MainMenuPc .MainMenuContainer ul li:hover ul{
	display: block;
	position: absolute;
	background-color: var(--blue);
	width: 125%;
	padding-left: 0;
	text-align: left;
	z-index: 2;
}

.MainMenuPc .MainMenuContainer ul li:hover ul li a:hover{
	background-color: var(--background);
	color: var(--letters);
}

/*NOVI MAIN MENU PC*/


body {
    /*background-color: #57d1db*/
	margin: 0;
	padding; 0;
}



@-webkit-keyframes pictures_animation {
    0%{right: 0px;}
    16%{right: 0px;}
    18%{right: 100%;}
    /*20%{right: 100%;}*/
    34%{right: 100%;}
    36%{right: 200%;}
    56%{right: 200%;}
    58%{right: 300%;}
    78%{right: 300%;}
    80%{right: 400%;}
    /*80%{right: 400%;}*/
    98%{right: 400%;}
    100%{right: 0px;}
}

.SliderContainer{
	width: 80vw;
    height: 45vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vw;
}

.SliderContainer .slider{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.slides{
    position: absolute;
    width: 800%;
    height: 40vw;
    margin-right: -700%;
	transition: margin-right 650ms cubic-bezier(0.87, 0.01, 0.26, 0.98);
	-webkit-animation-name: pictures_animation;
    -webkit-animation-duration: 50s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: paused; 
}

.slide {
    width: 80vw;
    height: 40vw;
    float: left;
    position: relative;
    background-color: var(--blue);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.slide-data {
    width: 90%;
    margin-left: 5%;
    top: 15.8vw !important;
    position: absolute;
    text-align: center;
}

.slide-data h1 {
    font-size: 3vw;
	font-family: 'JakartaSemiBold';
	text-shadow: 0 0 8px #000000;
	color: #ffffff;
}

.slide-data p {
	font-family: 'JakartaMedium';
    font-size: 1.3vw;
    margin-bottom: 1.5vw;
	text-shadow: 0 0 8px #000000;
	color: #ffffff;
}

.slide-data a {
	font-family: 'JakartaMedium';
    text-decoration: none;
    font-size: 1.3vw;
    background-color: transparent;
    padding: 0.8vw;
    /* margin-top: 1%; */
    color: #fff;
    border: 1px;
    border-style: solid;
    border-color: #fff;
	text-shadow: 0 0 8px #000000;
	box-shadow: 0 0 4px 0 #000000;
	color: #ffffff;
}

#controls {
    width: 100%;
    height: 4vw;
    z-index: 2;
    position: relative;
    top: 35vw;
}

#controls label {
    transition: opacity 0.2s ease-out;
    display: none;
    width: 4vw;
    height: 4vw;
}

#controls .ImageLeftDiv, #controls .ImageRightDiv {
    width: 100%;
    height: 100%;
    display: block;
}

#controls .ImageLeftDiv img, .ImageRightDiv img {
    width: 100%;
    height: 100%;
	vertical-align: unset;
}

#controls label:hover{
    cursor: pointer;
}

#bullets {
    width: 100%;
	height: 5vw;
	text-align: center;
    position: absolute;
    top: 40vw;
    transition: 0.2s ease-out;
}

#bullets label {
    display: inline-block;
    width: 1.5vw;
    height: 1.5vw;
    margin-top: 1.75vw;
	margin-bottom: 1.75vw;
    border-radius: 100%;
    background: var(--blue);
    margin-right: 1.2vw;
}

.slides .slide img{
	width: 100%;
	height: 100%;
}

.slides .slide img#Telefon{
	display: none;
}

.slides .slide img#Desktop{
	display: block;
}

.slide-data a:hover{
    background-color: #fff;
    color: black;
    border: 1px;
    border-style: solid;
    border-color: #fff;
    text-shadow: none;
	transition: background-color 0.3s, color 0.3s;
}

/*Slider sa strelicama*/

#slide_1:checked ~ .slides {
	margin-left: 0%;
}

#slide_2:checked ~ .slides {
	margin-right: -600%;
}
#slide_3:checked ~ .slides {
	margin-right: -500%;
}
#slide_4:checked ~ .slides {
	margin-right: -400%;
}
#slide_5:checked ~ .slides {
	margin-right: -300%;
}
#slide_6:checked ~ .slides {
	margin-right: -200%;
}
#slide_7:checked ~ .slides {
	margin-right: -100%;
}
#slide_8:checked ~ .slides {
	margin-right: 0%;
}

.slides{
	/*transition: margin-right 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);*/
	transition: margin-right 650ms cubic-bezier(0.87, 0.01, 0.26, 0.98);
}

#slider label{
	cursor: pointer;
	text-decoration: none;
}

#slider input[type=radio] {
	display: none;
}

#controls label:hover{
    cursor: pointer;
}

@keyframes arrowAnimation{
	0% {width: 100%;}
	50% {width: 80%;}
	100% {width: 100%;}
}

#slide_1:checked ~ #controls label:nth-child(2),
#slide_2:checked ~ #controls label:nth-child(3),
#slide_3:checked ~ #controls label:nth-child(4),
#slide_4:checked ~ #controls label:nth-child(5),
#slide_5:checked ~ #controls label:nth-child(6),
#slide_6:checked ~ #controls label:nth-child(7),
#slide_7:checked ~ #controls label:nth-child(8),
#slide_8:checked ~ #controls label:nth-child(1){
	/* background: url('../images/WEBP/arrow-white-right-11.webp') no-repeat; */
	float: right;
	display: block;
	background-size: 100%;
}


#slide_1:checked ~ #controls label:nth-last-child(1),
#slide_2:checked ~ #controls label:nth-last-child(8),
#slide_3:checked ~ #controls label:nth-last-child(7),
#slide_4:checked ~ #controls label:nth-last-child(6),
#slide_5:checked ~ #controls label:nth-last-child(5),
#slide_6:checked ~ #controls label:nth-last-child(4),
#slide_7:checked ~ #controls label:nth-last-child(3),
#slide_8:checked ~ #controls label:nth-last-child(2){
	/* background: url('../images/WEBP/arrow-white-left-21.webp') no-repeat; */
	float: left;
	display: block;
	background-size: 100%;
}

#slide_1:checked ~ #controls label:nth-child(2) .ImageLeftDiv,
#slide_2:checked ~ #controls label:nth-child(3) .ImageLeftDiv,
#slide_3:checked ~ #controls label:nth-child(4) .ImageLeftDiv,
#slide_4:checked ~ #controls label:nth-child(5) .ImageLeftDiv,
#slide_5:checked ~ #controls label:nth-child(6) .ImageLeftDiv,
#slide_6:checked ~ #controls label:nth-child(7) .ImageLeftDiv,
#slide_7:checked ~ #controls label:nth-child(8) .ImageLeftDiv,
#slide_8:checked ~ #controls label:nth-child(1) .ImageLeftDiv{
	display: none;
}


#slide_1:checked ~ #controls label:nth-last-child(1) .ImageRightDiv,
#slide_2:checked ~ #controls label:nth-last-child(8) .ImageRightDiv,
#slide_3:checked ~ #controls label:nth-last-child(7) .ImageRightDiv,
#slide_4:checked ~ #controls label:nth-last-child(6) .ImageRightDiv,
#slide_5:checked ~ #controls label:nth-last-child(5) .ImageRightDiv,
#slide_6:checked ~ #controls label:nth-last-child(4) .ImageRightDiv,
#slide_7:checked ~ #controls label:nth-last-child(3) .ImageRightDiv,
#slide_8:checked ~ #controls label:nth-last-child(2) .ImageRightDiv{
	display: none;
}

#slide_1:checked ~ #controls label:nth-child(2):active .ImageRightDiv img,
#slide_2:checked ~ #controls label:nth-child(3):active .ImageRightDiv img,
#slide_3:checked ~ #controls label:nth-child(4):active .ImageRightDiv img,
#slide_4:checked ~ #controls label:nth-child(5):active .ImageRightDiv img,
#slide_5:checked ~ #controls label:nth-child(6):active .ImageRightDiv img,
#slide_6:checked ~ #controls label:nth-child(7):active .ImageRightDiv img,
#slide_7:checked ~ #controls label:nth-child(8):active .ImageRightDiv img,
#slide_8:checked ~ #controls label:nth-child(1):active .ImageRightDiv img{
	animation: 0.2s arrowAnimation 1;
}


#slide_1:checked ~ #controls label:nth-last-child(1):active .ImageLeftDiv img,
#slide_2:checked ~ #controls label:nth-last-child(8):active .ImageLeftDiv img,
#slide_3:checked ~ #controls label:nth-last-child(7):active .ImageLeftDiv img,
#slide_4:checked ~ #controls label:nth-last-child(6):active .ImageLeftDiv img,
#slide_5:checked ~ #controls label:nth-last-child(5):active .ImageLeftDiv img,
#slide_6:checked ~ #controls label:nth-last-child(4):active .ImageLeftDiv img,
#slide_7:checked ~ #controls label:nth-last-child(3):active .ImageLeftDiv img,
#slide_8:checked ~ #controls label:nth-last-child(2):active .ImageLeftDiv img{
	animation: 0.2s arrowAnimation 1;
}

#bullets label:hover{
    cursor: pointer;
}

#slide_1:checked ~ #bullets label:nth-child(1),
#slide_2:checked ~ #bullets label:nth-child(2),
#slide_3:checked ~ #bullets label:nth-child(3),
#slide_4:checked ~ #bullets label:nth-child(4),
#slide_5:checked ~ #bullets label:nth-child(5),
#slide_6:checked ~ #bullets label:nth-child(6),
#slide_7:checked ~ #bullets label:nth-child(7),
#slide_8:checked ~ #bullets label:nth-child(8){
	background: #fff;
	transition: 0.2s ease-out;
}

/*Slider sa strelicama*/

.container .VaznoObavestenje{
    display: none;
	background-color: var(--blue);
	width: 100%;
	aspect-ratio: 5/2;
	height: auto;
	border: 4px solid #fff;
	border-radius: 2vw;
	margin-top: 5vw;
    margin-bottom: 3vw;
}

.container .VaznoObavestenje h1{
	color: #efefef;
	text-align: center;
	padding-top: 3%;
	font-size: 4vw;
	font-family: 'JakartaSemiBold';
	margin-bottom: 6%;
}

.container .VaznoObavestenje .container p{
	color: #efefef;
	font-size: 2vw;
	font-family: 'JakartaMedium';
    margin-bottom: 1vw;
	text-align: center;
}

.Naslov1{
	text-align: center;
	width: 90%;
	margin-left: 5%;
	margin-top: 2vw;
	margin-bottom: 1vw;
}

.Naslov1 button{
	/*border: 0.4vw solid var(--headings);*/
	border-width: 0.4vw 0 0.4vw 0;
	border-style: solid;
	border-color: var(--headings);
	border-radius: 0vw;
	width: 100%;
	padding-top: 3vw;
	padding-bottom: 4vw;
	background-color: var(--background);
	transition: 0.2s ease-out;
}

body .Naslov1 button h1{
	text-align: center;
	font-family: 'JakartaSemiBold';
	line-height: 170%;
	/*line-height: 2.2;*/
	color: var(--headings);
	/*font-size: 5vw;*/
	font-size: 4.4vw;
	margin: 0;
	display: inline-block;
	vertical-align: middle;
}

body .Naslov1 button .DivGodineKonstrukcija{
	display: inline-block;
	vertical-align: middle;
}

body .Naslov1 button .DivGodineKonstrukcija h1#BrojGodina{
	/* font-size: 18vw; */
	/* line-height: 13vw; */
	font-family: 'JakartaSemiBold';
	font-size: 14vw; 
	line-height: 11vw;
	display: inline-block;
	vertical-align: bottom;
}

body .Naslov1 button .DivGodineKonstrukcija .SpanDiv{
	text-align: left;
	display: inline-block;
	vertical-align: bottom;
	/* font-size: 5vw;
	line-height: 4.5vw; */
	font-family: 'JakartaSemiBold';
	font-size: 4vw;
	line-height: 3.8vw;
	margin-left: 1vw;
}

body .Naslov1 button .DivGodineKonstrukcija .SpanDiv span{
	margin-bottom: 1vw;
	color: var(--headings);
}

.Naslov1 button:hover{
	background-color: var(--blue);
	border-color: var(--blue);
	border-radius: 0 5vw;
	transition: 0.2s ease-out;
}

.Naslov1 button:hover h1{
	color: #efefef;
	transition: 0.2s ease-out;
}

.Naslov1 button:hover .DivGodineKonstrukcija .SpanDiv span{
	color: #efefef;
	transition: 0.2s ease-out;
}

body .Podnaslovi .podnaslov_kartica{
	width: 100%;
	text-align: center;
	color: var(--letters);
}

body .Podnaslovi .podnaslov_kartica h2{
    font-family: 'JakartaSemiBold';
	font-size: 6vw;
	margin-bottom:2vw;
	margin-top: 2vw;
	color: var(--headings);
}

body .kategorije-ukratko {
	width:100%;
	margin-bottom: 2%;
}

.kategorije-ukratko > .container{
    width: 70%;
}

body .kategorije-ukratko .kartica{
	width: 24%;
	aspect-ratio: 1/2;
	border-style: solid;
	/*border-left-style: none;*/
	border-color: #fff;
	text-align: center;
    margin-left: 1%;
	background-color: var(--blue);
	border-radius: 0 5vw 0 5vw;
}

.kategorije-ukratko .kartica a img{
	/*width: 78%;*/
	width: 50%;
	margin-top: 6%;
	margin-bottom: 10%;
}

body .kategorije-ukratko #teorijaBrojPitanja.kartica a p{
	/*margin-bottom: 1.5em;*/
}

body .kategorije-ukratko #teorijaTrajanjeIspita.kartica a p{
	/*margin-bottom: 3em;*/
}

body .kategorije-ukratko #teorijaProlazUslov.kartica a p{
	/*margin-bottom: 3em;*/
}


body .kategorije-ukratko #praksaProsecnoTrajanje.kartica a p{
	/*margin-bottom: 1.5em;*/
}


body .kategorije-ukratko .kartica{
	display: table;
    padding: 0;
    border-radius: 0 5vw 0 5vw;
}

.kategorije-ukratko .kartica a{
    text-decoration: none;
    display: table-cell;
    color: #efefef;
}

.kategorije-ukratko .kartica a h1{
    text-decoration: none;
    margin-top: 5%;
    font-family: 'JakartaSemiBold';
	/*font-size: 5.6vw;*/
	font-size: 3.6vw;
	line-height: 150%;
    margin-bottom: 5%;
    /*color: #efefef;*/
}

.kategorije-ukratko .kartica a p{
    /*font-size: 120%;*/
    /*color: #efefef;*/
    font-family: 'JakartaMedium';
	font-size: 1.5vw;
	/*font-size: 2.3vw;*/
	line-height: 170%;
	margin-bottom: 5%;
}
body .kategorije-ukratko .kartica:hover{
    border-color: #fff;    
}


.kategorije-ukratko .kartica a:hover{
    background-color: var(--orange);
	border-radius: 0 4.7vw 0 4.7vw;
	transition: background-color 0.3s
}

.kategorije-ukratko .kartica a:hover h1{
    /*color: var(--darkBlue);*/
    color: #efefef;
	/*font-size: 4vw;*/
}

.kategorije-ukratko .kartica a:hover p{
    /*color: var(--darkBlue);*/
    color: #efefef;
	/*font-size: 2vw;*/
}

/**/

body .Podnaslov-Teorija .row{
	margin-left: 20%;
	margin-right: 20%;	
	margin-bottom: 3%;
	color: var(--letters);
}

body .Podnaslov-Teorija .kartica{
	width: 24%;
	border-style: solid;
	border-color: black;
	text-align: center;
    margin-left: 0.5%;
	background-color: var(--blue);
}

body .Podnaslov-Teorija .kartica{
	/*display: table;*/
    padding: 0;
    border-radius: 3%;
    border-color: #fff;
    text-align: center;
}

body .Podnaslov-Teorija #prazan1.kartica{
    border-style: none;
}

body .Podnaslov-Teorija #prazan2.kartica{
    border-style: none;
}

.Podnaslov-Teorija .kartica a{
    text-decoration: none;
    color: #efefef;
    text-align: center;
}

.Podnaslov-Teorija .kartica a h1{
	font-size: 3vw;
    text-decoration: none;
    margin-top: 5%;
    margin-bottom: 10%;
    color: #efefef;
}

.Podnaslov-Teorija .kartica a p{
    font-size: 2vw;
    color: #efefef;
    text-align: center;
}

.Podnaslov-Teorija .kartica:hover{
    background-color: var(--orange);
    transition: 0.3s;
}

.Podnaslov-Teorija .kartica:hover a{
    text-decoration: none;
    border-radius: 1%;
    /*color: var(--darkBlue);*/
    color: #efefef;
    /*transition: 0.3s;*/
}

.Podnaslov-Teorija .kartica:hover a h1{
    /*color: var(--darkBlue);*/
    color: #efefef;
    transition: 0.3s;
}

.Podnaslov-Teorija .kartica:hover a p{
    /*color: var(--darkBlue);*/
    color: #efefef;
    transition: 0.3s;
}

/*
.Podnaslov-Teorija .kartica a:hover{
    text-decoration: none;
    background-color: var(--orange);
    border-radius: 1%;
    color: var(--darkBlue);
}

.Podnaslov-Teorija .kartica a:hover h1{
    color: var(--darkBlue);
}

.Podnaslov-Teorija .kartica a:hover p{
    color: var(--darkBlue);
}
*/

/**/

@media screen and (max-width: 699px) and (min-width: 200px){
	.Podnaslovi{
		display: none;
	}
	.kategorije-ukratko{
		display: none;
	}
} 

@media screen and (min-width: 700px) and (max-width: 10000px){
	.Podnaslov-Teorija{
		display: none !important;
	}
}

/*NOV FOOTER*/

.PoslednjiRed{
	background-color: var(--blue);
	max-width: 100%;
}

.PoslednjiRed .GornjiDeo{
    width: 100%;
    background-color: var(--blue);
    height: 24vw;
}

.PoslednjiRed .GornjiDeo .LeviDeo{
    width: 50%;
    height: 24vw;
	display: inline-block;
	vertical-align: middle;
}
.PoslednjiRed .GornjiDeo .LeviDeo .LeviNaslovDiv{
	margin-left: 13%;
	margin-top: 4vw;
	margin-bottom: 1.4vw;
}

.PoslednjiRed .GornjiDeo .LeviDeo .LeviNaslovDiv h1{
	font-family: 'JakartaSemiBold';
	font-size: 2.4vw;
    color: #efefef;
	line-height: 2.6vw;
}

.PoslednjiRed .GornjiDeo .LeviDeo .InformacijeDiv{
	margin-left: 13%;
	margin-top: 1vw;
}

.PoslednjiRed .GornjiDeo .LeviDeo .InformacijeDiv .Informacija{
	margin-top: 1vw;
	line-height: 1.2vw;
}

.PoslednjiRed .GornjiDeo .LeviDeo .InformacijeDiv .Informacija img{
	width: 1.6vw;
	aspect-ratio: 1/1;
	display: inline;
	vertical-align: middle;
}

.PoslednjiRed .GornjiDeo .LeviDeo .InformacijeDiv .Informacija p{
	font-family: 'Jakartamedium';
	font-size: 1.1vw;
	color: #efefef;
	display: inline;
	vertical-align: middle;
	margin-left: 1%;
}

.PoslednjiRed .GornjiDeo .LeviDeo .InformacijeDiv .Informacija a{
	font-family: 'Jakartamedium';
	font-size: 1.1vw;
	text-decoration: none;
	color: var(--orange);
	display: inline;
	vertical-align: middle;
}

.PoslednjiRed .GornjiDeo .DesniDeo{
    width: 48.6%;
    height: 24vw;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}

.PoslednjiRed .GornjiDeo .DesniDeo h1{
	font-family: 'JakartaSemiBold';
	font-size: 2.8vw;
	color: #efefef;
	margin-top: 4vw;
	line-height: 3vw;
	margin-bottom: 1vw;
}

.PoslednjiRed .GornjiDeo .DesniDeo p{
	font-family: 'Jakartamedium';
	font-size: 1.1vw;
	line-height: 2vw;
	width: 74%;
	margin-left: 13%;
	color: #efefef;
	margin-bottom: 0;
}

.PoslednjiRed .GornjiDeo .DesniDeo .DrustveneMrezeDiv{
	line-height: 2.3vw;
	margin-top: 2vw;
}

.PoslednjiRed .GornjiDeo .DesniDeo .DrustveneMrezeDiv p{
	margin-bottom: 0;
	margin-left: 0 !important;
	font-weight: 600;
	font-family: 'JakartaSemiBold';
	font-size: 2.3vw;
	line-height: 2.3vw;
	color: #efefef;
	display: inline;
	vertical-align: middle;
}

.PoslednjiRed .GornjiDeo .DesniDeo .DrustveneMrezeDiv .IkoniceDiv{
	display: inline-block;
	vertical-align: middle;
	height: 2vw;
	line-height: 2.3vw;
}

.PoslednjiRed .GornjiDeo .DesniDeo .DrustveneMrezeDiv .IkoniceDiv button{
	width: 2vw;
	height: 2vw;
	margin-left: 0.5vw;
	display: inline-block;
	vertical-align: middle;
	background-color: unset;
	border: 0;
	border-radius: 20%;
}

.PoslednjiRed .GornjiDeo .DesniDeo .DrustveneMrezeDiv .IkoniceDiv button:hover{
	background-color: var(--orange);
	transition: 0.2s ease-out;
}

.PoslednjiRed .GornjiDeo .DesniDeo .DrustveneMrezeDiv .IkoniceDiv button img{
	width: 100%;
	aspect-ratio: 1/1;
	vertical-align: unset;
}

.PoslednjiRed .DonjiDeo{
    width: 100%;
    height: 4vw;
    text-align: center;
    background-color: #00000087;
	line-height: 1.2vw;
}

.PoslednjiRed .DonjiDeo{
	font-family: 'JakartaMedium';
	font-size: 1.1vw;
	color: #efefef;
	padding-top: 1.4vw;
	margin: 0;
}

.PoslednjiRed #PravaPc.DonjiDeo{
	background-color: #000000ad;
}

/*NOV FOOTER*/


/* LAP-TOP */ /* LAP-TOP */ /* LAP-TOP */ /* LAP-TOP */ /* LAP-TOP */

/* LAP-TOP */ /* LAP-TOP */ /* LAP-TOP */ /* LAP-TOP */ /* LAP-TOP */


/* TELEFON */

.Podnaslov-Teorija .container {
    max-width: 100vw;
}

body .Podnaslov-Teorija .row{
	margin-bottom: 3%;
	color: var(--letters);
}

body .Podnaslov-Teorija .rowCustom{
	margin-bottom: 3%;
	color: var(--letters);
}

.Podnaslov-Teorija .container h2{
    color: var(--headings);
    text-align: center;
    margin-bottom: 3%;
}

body .Podnaslov-Teorija .kartica{
	width: 24%;
	border-style: solid;
	border-color: black;
	text-align: center;
    /*margin-left: 0.5%;*/
    margin-left: 0%;
	background-color: var(--blue);
	display: inline-block;
}

body .Podnaslov-Teorija .kartica{
	/*display: table;*/
    padding: 0;
    border-radius: 3%;
}

body .Podnaslov-Teorija #prazan1.kartica{
    border-style: none;
}

body .Podnaslov-Teorija #prazan2.kartica{
    border-style: none;
}

.Podnaslov-Teorija .kartica a{
    text-decoration: none;
    /*display: table-cell;*/
    color: #efefef;
}

.Podnaslov-Teorija .kartica a h1{
	font-size: 3vw;
    text-decoration: none;
    margin-top: 5%;
    margin-bottom: 10%;
    color: #efefef;
}

.Podnaslov-Teorija .kartica a p{
    font-size: 2vw;
    color: #efefef;
}

#PrakticnaObuka.Podnaslov-Teorija {
    margin-bottom: 10%;
    margin-top: 6%;
}

@media screen and (max-width: 699px){
    
    .main{
        margin-bottom: 24vw;
    }
	
	.HeaderPc{
	    display: none;
	}
	
    .headerPhoneScroll{
        display: block;
    }
    
    .ScrollToTopButton{
    	position: fixed;
    	width: 16vw;
    	aspect-ratio: 1/1;
    	height: auto;
    	background-color: var(--blue);
    	bottom: -100%;
    	right: 6vw;
    	z-index: 6;
    	border-radius: 50%;
    	transition: opacity 0.2s ease-out;
    	transition: bottom 0.6s ease;
    }
    
    .ScrollToTopButton img{
    	width:100%;
    	aspect-ratio: 1/1;
    	height: auto;
    }
	
	.MainMenuPc{
	    display: none;
	}
	
	.slides .slide img#Desktop{
		display: none;
	}

	.slides .slide img#Telefon{
		display: block;
	}
	
	.PoslednjiRed{
		display: none;
	}
	
	.container .VaznoObavestenje{
		background-color: var(--blue);
		width: 100%;
		aspect-ratio: 3/2;
		height: auto;
		border-radius: 4vw;
		margin-top: 2vw;
		margin-bottom: 6vw;
		border: 3px solid #fff;
	}
	
	.container .VaznoObavestenje h1{
		text-align: center;
		font-size: 8vw;
		font-family: 'JakartaSemiBold';
		color: #efefef;
		padding-top: 6%;
		margin-bottom: 4%;
	}
	
	.container .VaznoObavestenje .container p{
		font-size: 4vw;
		font-family: 'JakartaMedium';
		color: #efefef;
		/*padding-top: 3%;*/
		margin-bottom: 2%;
		text-align: unset;
	}
	
	.Naslov1{
    	width: 90%;
    	margin-left: 5%;
    	/*margin-top: 4%;*/
    	margin-top: 6%;
    	margin-bottom: 6%;
	}
	
	.Naslov1 button{
    	/*border: 4px var(--headings) solid;*/
    	/*border-width: 0 0.6vw 0 0.6vw;*/
    	border-width: 0.6vw;
    	border-color: var(--background) var(--headings) var(--background) var(--headings);
    	border-radius: 0vw;
    	padding-top: 4vw;
    	padding-bottom: 4vw;
	}
	
    body .Naslov1 h1{
    	font-family: 'JakartaSemiBold';
    	font-size: 5vw;
    	line-height: 4.5vw;
    	margin: 0;
    }
    
    .Naslov1 button:hover{
        border-radius: 2vw;
        border-color: #efefef;
    }
	
	body .Podnaslov-Teorija .row{
	    --bs-gutter-x: 0rem !important;
    	margin-left: 0vw !important; 
    	margin-right: 0vw !important;	 
    	border: 0vw !important;
    	padding: 0vw !important;
    	margin-bottom: 3%;
    	color: black;
        height: 38vw !important;
        max-width: 100%;
    }
    
	body .Podnaslov-Teorija .rowCustom{
	    --bs-gutter-x: 0rem !important;
    	margin-left: 0vw !important; 
    	margin-right: 0vw !important;	 
    	border: 0vw !important;
    	padding: 0vw !important;
    	margin-bottom: 3%;
    	color: black;
        height: 38vw !important;
        max-width: 100%;
    }
    
    .Podnaslov-Teorija .container h2{
        font-size: 7vw;
        font-family: 'JakartaSemiBold';
    }

	body .Podnaslov-Teorija .kartica{
		width: 24%;
		border-style: solid;
		border-color: black;
		text-align: center;
		/*margin-left: 0.5%;
		margin-right: 0.5%;*/
		background-color: var(--blue);
		border-color: #fff;
	}
	/*
	body .Podnaslov-Teorija #teorija40.kartica {
	    margin-left: 0.5% !important;
	}
	
	body .Podnaslov-Teorija #praksa40.kartica {
	    margin-left: 0.5% !important;
	}
    */
	body .Podnaslov-Teorija .kartica{
		/*display: table;*/
		padding: 0;
		border-radius: 2vw;
	}
	
	body .Podnaslov-Teorija .kartica :hover{
		border-radius: 1.5vw;
	}

	body .Podnaslov-Teorija #prazan1.kartica{
		border-style: none;
	}

	body .Podnaslov-Teorija #prazan2.kartica{
		border-style: none;
	}

	.Podnaslov-Teorija .kartica a{
		text-decoration: none;
		/*display: table-cell;*/
		color: var(--background);
	}

	.Podnaslov-Teorija .kartica a h1{
		font-family: 'JakartaSemiBold';
		font-size: 6vw;
		text-decoration: none;
		margin-top: 5%;
		margin-bottom: 10%;
	}

	.Podnaslov-Teorija .kartica a p{
        font-size: 3.8vw;
        line-height: 6vw;
        font-family: 'JakartaMedium';
	}
	
	#PrakticnaObuka.Podnaslov-Teorija {
        /*margin-bottom: 24%;*/
        margin-top: 14%;
	}
	
    .QuestionsBlock{
    	margin-top: 16vw;
    }
    
    .QuestionsBlock h1#QuestionsHeading{
    	font-size: 7vw;
    	font-family: 'JakartaSemiBold';
        color: var(--headings);
    	margin: 0;
    	margin-bottom: 1vw;
    	text-align: center;
    }
    
    .QuestionsBlock .QuestionBlock .Question ul{
    	margin: 0;
    	position: relative;
        list-style: none;
        padding: 0;
        font-family: 'JakartaMedium';
        font-size: 3.8vw;
        padding-bottom: 4vw;
        padding-top: 4vw;
    	transition: 0.3s;
    }
    
    .QuestionsBlock .QuestionBlock .Question ul li{
    	width: 100%;
        padding: 0;
    	color: var(--headings);
    	/* color: #fff; */
    	padding-left: 1%;
    	transition: 0.3s;
    	display: inline;
    }
    
    .QuestionBlock {
    	cursor: unset;
        border-style: dashed;
        border-width: 0 0 2px 0;
        border-color: var(--headings);
    	margin-top: 0;
    	margin-bottom: 0;
    	border-radius: 0;
    	transition: 0.3s;
    }
    
    .QuestionBlock:hover{
        background-color: unset;
        transition: none;
    }
    
    .QuestionBlock:hover .Question ul li{
        color: var(--headings);
    }
    
    .QuestionBlock:hover .barDiv .bar, .QuestionBlock:hover .barDiv:after{
        background-color: var(--headings);
        transition: none;
    }
    
    .QuestionBlock .Answer{
    	overflow: hidden;
    	max-height: 0;
    	transition: 0.3s;
    }
    
    .QuestionBlock .Answer h1{
        font-size: 3.8vw;
        font-family: 'JakartaSemiBold';
        margin: 0;
        color: var(--background);
        padding-left: 2%;
        padding-right: 2%;
    }
    
    .QuestionBlock .Answer p{
    	font-size: 3.5vw;
    	margin: 0;
    	padding-bottom: 3vw;
    	color: #fff;
    	padding-left: 2%;
    	padding-right: 2%;
    	transition: 0.3s;
    }
    
    .QuestionBlock .Answer ul{
    	margin-bottom: 3vw;
    	padding-right: 4%;
    	padding-left: 8%;
    	margin-top: 1vw;
    	transition: 0.2s;
    }
    
    .QuestionBlock .Answer ul li{
        color: var(--background);
        font-size: 3.5vw;
        line-height: 5.4vw;
        font-family: 'JakartaMedium';
        transition: 0.1s;
        /* padding-left: 1%; */
        width: 100%;
    }
    
    .QuestionBlock .Answer ul li a{
    	color: var(--background);
        font-size: 3.5vw;
        line-height: 5.4vw;
        font-family: 'JakartaMedium';
    	text-decoration: none;
    	transition: 0.1s;
    }
    
    .QuestionBlock.open {
    	background-color: var(--blue);
    	border-color: none;
    	border-radius: 2vw;
    	border-color: #efefef00;
    	transition: 0.3s;
    }
    
    .QuestionsBlock .QuestionBlock.open .Question ul{
    	padding-bottom: 3vw;
    	transition: 0.2s;
    }
    
    .QuestionsBlock .QuestionBlock.open .Question ul li{
    	padding-left: 2%;
    	color: #fff;
    	transition: 0.2s;
    }
    
    .QuestionBlock.open .Answer{
    	max-height: 300vw;
    	margin-bottom: 1vw;
    	transition: 0.2s;
    }
    
    .QuestionBlock.open .Answer h1{
        color: #fff;
        transition: 0.1s;
    }
    
    .QuestionBlock.open .Answer ul{
    	transition: 0.2s;
    }
    
    .QuestionBlock.open .Answer ul li{
        color: #fff;
        transition: 0.1s;
        width: 100%;
        margin-bottom: 1.2vw;
    }
    
    .QuestionBlock.open .Answer ul li a{
        color: var(--orange);
        text-decoration: none;
        transition: 0.1s;
    }
    
    .QuestionBlock.open .Answer ul li a:hover{
        text-decoration: underline;
    }
    
    .QuestionBlock .barDiv{
        display: block;
    	position: absolute;
    	top: 3.5vw;
    	right: 2%;
        width: 7vw;
        aspect-ratio: 1/1;
        background-color: none;
    	/* float: right; */
        transition: 0.3s;	
    }
    
    .QuestionBlock .barDiv .bar, .barDiv:after{
    	content: '';
    	display: block;
    	width:100%;
    	background-color: var(--headings);
    	height: 1vw;
    	border-radius: 5vw;
    	max-height: 1vw;
    }
    
    .QuestionBlock .barDiv .bar{
    	transform: translateY(3vw);
    }
    
    .QuestionBlock .barDiv:after{
    	transform: rotate(90deg) translateX(2vw);
    }
    
    .QuestionBlock.open .barDiv{
    	transform: rotate(-90deg);
    }
    
    .QuestionBlock.open .barDiv:after{
    	transform: rotate(90deg) translateX(3vw);
    	background-color: #fff;
    }
    
    .QuestionBlock.open .barDiv .bar{
    	max-height: 0vw;
    }
    
    .QuestionBlock.open .Answer ul li#Desktop{
        display: none;
    }

    .QuestionBlock .Answer ul li#Desktop{
        display: none;
    }
    
    /*.QuestionBlock.open .Answer ul li#Telefon{*/
    /*    display: block;*/
    /*}*/
	
}

@media screen and (max-width: 389px) and (min-width: 0px){
    
    /*.loader::after{*/
    /*	content: "";*/
    /*	width: 7vh;*/
    /*	height: 7vh;*/
    /*	background-size: 7vh ;*/
    /*	animation: loading 1.2s ease infinite;*/
    /*}*/
    
    .loader img{
    	width: 7vh;
    	aspect-ratio: 1/1;
    	animation: loading 1.2s ease infinite;
    }
    
}

@media screen and (max-width: 699px) and (min-width: 390px){
    
    /*.loader::after{*/
    /*	content: "";*/
    /*	width: 6vh;*/
    /*	height: 6vh;*/
    /*	background-size: 6vh ;*/
    /*	animation: loading 1.2s ease infinite;*/
    /*}*/
    
    .loader img{
    	width: 6vh;
    	aspect-ratio: 1/1;
    	animation: loading 1.2s ease infinite;
    }
    
}

.pre-header-telefon{
    background-color: var(--blue);
    color: aliceblue;
	overflow:hidden;
}

.pre-header-telefon .container ul{
	margin: 0;
	padding:0;
}

.pre-header-telefon .container ul li{ 
	display: inline;
}

.pre-header-telefon .container ul .Slika-Logoa {
	vertical-align: middle;
	list-style: none;
	display: inline-block;
	padding-left: 3%;
    padding-right: 2%;
    background-image: linear-gradient(to right, var(--blue) 50%, #fff 50%);
}

@media screen and (max-width: 300px) { 
	.pre-header-telefon .container ul .Slika-Logoa img{
		width: 76px !important;	
	}
}

@media screen and (max-width: 400px) and (min-width: 300px) { 

	.pre-header-telefon .container ul .Slika-Logoa img{
		width: 85px !important;	
	}
	
	.pre-header-telefon .container ul .Slika-Logoa {
		padding-left: 4%;
		padding-right: 4%;
	}
}

@media screen and (max-width: 600px) and (min-width: 400px) { 

	.pre-header-telefon .container ul .Slika-Logoa img{
		width: 107px !important;	
	}
	
	.pre-header-telefon .container ul .Slika-Logoa {
		padding-left: 6%;
		padding-right: 4%;
	}
}

@media screen and (max-width: 600px) and (min-width: 500px) { 

	.pre-header-telefon .container ul .Slika-Logoa img{
		width: 126px !important;	
	}
	
	.pre-header-telefon .container ul .Slika-Logoa {
		padding-left: 6%;
		padding-right: 4%;
	}
}

@media screen and (max-width: 700px) and (min-width: 600px) { 
	.container{
		max-width: 650px !Important;
	}
	
	.pre-header-telefon .container ul .Slika-Logoa img{
		width: 148px !important;	
	}
	
	.pre-header-telefon .container ul .Slika-Logoa {
		padding-left: 6%;
		padding-right: 4%;
	}
}

@media screen and (max-width: 1440px) and (min-width: 1024px){
	.pre-header-telefon .container ul .Slika-Logoa img{
		width: 166px;
	}
}

@media screen and (max-width: 1802px) and (min-width: 1440px){
	.pre-header-telefon .container ul .Slika-Logoa img{
		width: 166px;
	}
}

.pre-header-telefon .container ul .Top-right-1 {
    list-style: none;
	float: right;
	vertical-align: middle;
	margin: 0;
	height: auto;
	margin-top: 1%;
	margin-bottom: 1%;
}

.pre-header-telefon .container ul .Top-right-1 .Top-right{
	padding:0;
	vertical-align: middle;
	display: inline;
}

.pre-header-telefon .container ul .Top-right-1 .Top-right li{
    display: table;
    color: aliceblue;
	font-size: 2.5vw;
	vertical-align: middle;
	margin-bottom: 2%;
}

.pre-header-telefon .container ul .Top-right-1 .Top-right li a{
    color: aliceblue;
    text-decoration: none;
	font-size: 2.5vw;
	margin-right: 1vw;
	color: #f45922;
	font-family: 'JakartaRegular';
}

.pre-header-telefon .container ul .Top-right-1 .Top-right li p{
    color: aliceblue;
    text-decoration: none;
	font-size: 2.5vw;
	margin-bottom: 0;
	font-family: 'JakartaRegular';
}

/*NOVI MAIN MENU PHONE*/

.MainMenuPhone{
    background-color: var(--background);
	border-style: solid;
    border-width: 0;
    border-bottom-width: 1px;
    border-color: var(--blue);
}

.MainMenuPhone .MainMenuPhoneContainer{
	width: 100%;
}

.MainMenuPhone .MainMenuPhoneContainer > ul{
    list-style: none;
    margin-bottom: 0px;
    padding-left: 0;
	width: 100%; 
	text-align: center;
}

.MainMenuPhone .MainMenuPhoneContainer > ul li{
    display: inline-block;
	vertical-align: top;
    width: auto;
	color: var(--letters);
	background-color: var(--background);
	position: relative;
	line-height: 3vw;
}

.MainMenuPhone .MainMenuPhoneContainer > ul li#MenuButton5,
.MainMenuPhone .MainMenuPhoneContainer > ul li#MenuButton6,
.MainMenuPhone .MainMenuPhoneContainer > ul li#MenuButton7{
	vertical-align: bottom;
}

.MainMenuPhone .MainMenuPhoneContainer > ul li .SpanDiv{
	font-family: 'JakartaMedium';
	font-size: 3vw;
	/* line-height: 3vw; */
	display: inline-block;
	vertical-align: middle;
    padding-left: 4vw;
    padding-right: 4vw;
    padding-top: 5.6vw;
    padding-bottom: 5.6vw;
}

.MainMenuPhone .MainMenuPhoneContainer > ul li .SpanDiv span{
	font-size: 3vw;
	line-height: 3vw;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.MainMenuPhone .MainMenuPhoneContainer > ul li .SpanDiv .OpenSubmenuBarDiv{
	width: 3vw;
	height: 3vw;
    display: inline-block;
	vertical-align: middle;
	position: relative;
	transition: 0.2s ease-out;
	margin-left: 0.2vw;
}

.MainMenuPhone .MainMenuPhoneContainer > ul li .SpanDiv .OpenSubmenuBarDiv .bar, .MainMenuPhone .MainMenuPhoneContainer > ul li .SpanDiv .OpenSubmenuBarDiv:after{
	content: '';
    display: block;
    width: 2vw;
    height: 0.3vw;
    border-radius: 2vw;
    background-color: var(--letters);
	position: absolute;
	top: 1.25vw;
	color: var(--letters);
    transition: 0.3s ease-out;
	transform: rotate(45deg);
	transition: ease-out 0.2s;
}


.MainMenuPhone .MainMenuPhoneContainer > ul li .SpanDiv .OpenSubmenuBarDiv:after{
	transform: translateX(1.3vw) rotate(-45deg);
	transition: ease-out 0.2s;
}

.MainMenuPhone .MainMenuPhoneContainer > ul li a{
	font-family: 'JakartaMedium';
	font-size: 3vw;
	line-height: 3vw;
	text-decoration: none;
	color: var(--letters);
	display: inline-block;
    padding-left: 4vw;
    padding-right: 4vw;
    padding-top: 5.6vw;
    padding-bottom: 5.6vw;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.MainMenuPhone .MainMenuPhoneContainer > ul li a:hover{
	color: #efefef;
	background-color: var(--blue);
}

.MainMenuPhone .MainMenuPhoneContainer ul li ul{
	display: none;
}

.MainMenuPhone .MainMenuPhoneContainer ul li ul li{
	display: block;
	background-color: var(--blue);
	text-align: left;
}

.MainMenuPhone .MainMenuPhoneContainer ul li ul li a{
    padding-top: 3.8vw;
    padding-bottom: 3.8vw;
    display: block;
    padding-left: 3vw;
	color: #efefef;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.MainMenuPhone .MainMenuPhoneContainer ul li:hover{
	color: #efefef;
	background-color: var(--blue);
	cursor: pointer;
}

.MainMenuPhone .MainMenuPhoneContainer ul li:hover .SpanDiv .OpenSubmenuBarDiv{
	transform: rotate(180deg);
	transition: ease-out 0.2s;
}

.MainMenuPhone .MainMenuPhoneContainer ul li:hover .SpanDiv .OpenSubmenuBarDiv .bar{
	background-color: #efefef;
	transition: ease-out 0.2s;
}

.MainMenuPhone .MainMenuPhoneContainer ul li:hover .SpanDiv .OpenSubmenuBarDiv:after{
	background-color: #efefef;
	transition: ease-out 0.2s;
}

.MainMenuPhone .MainMenuPhoneContainer ul li:hover ul{
	display: block;
	position: absolute;
	background-color: var(--blue);
	width: 125%;
	padding-left: 0;
	text-align: left;
	z-index: 2;
}

.MainMenuPhone .MainMenuPhoneContainer ul li:hover ul li a:hover{
	background-color: var(--background);
	color: var(--letters);
}

/*NOVI MAIN MENU PHONE*/


@media screen and (max-width: 389px) and (min-width: 0px){

	.SliderContainer{
		width: 93vw;
		height: 72vw;
		margin-left: auto;
		margin-right: auto;
		margin-top: 5vw;
	}
	
	.SliderContainer .slider {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 1;
	}
	
	.slides {
		position: absolute;
		width: 800%;
		height: 62vw !important;
		margin-right: -700%;
	}
	
	.slide {
		width: 93vw;
		height: 62vw;
		float: left;
		position: relative;
		background-color: var(--blue);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	.slide-data {
		width: 96%;
		margin-left: 2%;
		height: auto !important;
		top: 12vw !important;
		position: absolute;
		text-align: center;
	}
	
	.slide-data h1{
		font-family: 'JakartaSemiBold';
		font-size: 7vw;
		line-height: 8vw;
		margin-bottom: 3vw;
		text-shadow: 0 0 4px #000000;
	}
	
	.slide-data p{
		margin-bottom: 3vw;
		font-family: 'JakartaMedium';
		font-size: 3vw;
		line-height: 6vw;
		text-shadow: 0 0 4px #000000;
	}
	
	.slide-data a{
		font-family: 'JakartaMedium';
		font-size: 3vw;
		padding: 1.2vw;
		text-shadow: 0 0 8px #000000;
	    box-shadow: 0 0 4px 0 #000000;
	}
	
	#controls{
		width: 100%;
		height: 8vw;
		position: absolute;
		top: 54vw;
	}
	
    #controls label {
        transition: opacity 0.2s ease-out;
        display: none;
        width: 8vw;
        height: 8vw;
    }
	
	#controls .ImageLeftDiv, #controls .ImageRightDiv{
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
	}
	
	#controls .ImageLeftDiv img, #controls .ImageRightDiv img{
		width: 100%;
		height: 100%;
		max-height: 100%;
		max-width: 100%;
		vertical-align: unset;
		display: block;
	}
	
	#bullets{
		text-align: center;
		position: absolute;
		height: 10vw;
		width: 100%;
		transition: 0.2s ease-out;
		top: 62vw;
	}
	
	#bullets label{
		display: inline-block;
		width: 4vw;
		height: 4vw;
		border-radius: 100%;
		background: var(--blue);
		margin: 0 1vw;
		margin-top: 3vw;
		margin-bottom: 3vw;
		border: 1px solid #efefef;
	}
    
    #slide_1:checked ~ #controls label:nth-child(2),
    #slide_2:checked ~ #controls label:nth-child(3),
    #slide_3:checked ~ #controls label:nth-child(4),
    #slide_4:checked ~ #controls label:nth-child(5),
    #slide_5:checked ~ #controls label:nth-child(6),
    #slide_6:checked ~ #controls label:nth-child(7),
    #slide_7:checked ~ #controls label:nth-child(8),
    #slide_8:checked ~ #controls label:nth-child(1){
    	/*background: url('../images/WEBP/arrow-white-right-11.webp') no-repeat;*/
    	float: right;
    	display: block;
    	background-size: 100%;
    }
    
    
    #slide_1:checked ~ #controls label:nth-last-child(1),
    #slide_2:checked ~ #controls label:nth-last-child(8),
    #slide_3:checked ~ #controls label:nth-last-child(7),
    #slide_4:checked ~ #controls label:nth-last-child(6),
    #slide_5:checked ~ #controls label:nth-last-child(5),
    #slide_6:checked ~ #controls label:nth-last-child(4),
    #slide_7:checked ~ #controls label:nth-last-child(3),
    #slide_8:checked ~ #controls label:nth-last-child(2){
    	/*background: url('../images/WEBP/arrow-white-left-21.webp') no-repeat;*/
    	float: left;
    	display: block;
    	background-size: 100%;
    }
    
	#slide_1:checked ~ #controls label:nth-child(2) .ImageLeftDiv,
	#slide_2:checked ~ #controls label:nth-child(3) .ImageLeftDiv,
	#slide_3:checked ~ #controls label:nth-child(4) .ImageLeftDiv,
	#slide_4:checked ~ #controls label:nth-child(5) .ImageLeftDiv,
	#slide_5:checked ~ #controls label:nth-child(6) .ImageLeftDiv,
	#slide_6:checked ~ #controls label:nth-child(7) .ImageLeftDiv,
	#slide_7:checked ~ #controls label:nth-child(8) .ImageLeftDiv,
	#slide_8:checked ~ #controls label:nth-child(1) .ImageLeftDiv{
		display: none;
	}
	
	
	#slide_1:checked ~ #controls label:nth-last-child(1) .ImageRightDiv,
	#slide_2:checked ~ #controls label:nth-last-child(8) .ImageRightDiv,
	#slide_3:checked ~ #controls label:nth-last-child(7) .ImageRightDiv,
	#slide_4:checked ~ #controls label:nth-last-child(6) .ImageRightDiv,
	#slide_5:checked ~ #controls label:nth-last-child(5) .ImageRightDiv,
	#slide_6:checked ~ #controls label:nth-last-child(4) .ImageRightDiv,
	#slide_7:checked ~ #controls label:nth-last-child(3) .ImageRightDiv,
	#slide_8:checked ~ #controls label:nth-last-child(2) .ImageRightDiv{
		display: none;
	}
	
	#slide_1:checked ~ #controls label:nth-child(2):active .ImageRightDiv img,
	#slide_2:checked ~ #controls label:nth-child(3):active .ImageRightDiv img,
	#slide_3:checked ~ #controls label:nth-child(4):active .ImageRightDiv img,
	#slide_4:checked ~ #controls label:nth-child(5):active .ImageRightDiv img,
	#slide_5:checked ~ #controls label:nth-child(6):active .ImageRightDiv img,
	#slide_6:checked ~ #controls label:nth-child(7):active .ImageRightDiv img,
	#slide_7:checked ~ #controls label:nth-child(8):active .ImageRightDiv img,
	#slide_8:checked ~ #controls label:nth-child(1):active .ImageRightDiv img{
		animation: 0.2s arrowAnimation 1;
	}
	
	
	#slide_1:checked ~ #controls label:nth-last-child(1):active .ImageLeftDiv img,
	#slide_2:checked ~ #controls label:nth-last-child(8):active .ImageLeftDiv img,
	#slide_3:checked ~ #controls label:nth-last-child(7):active .ImageLeftDiv img,
	#slide_4:checked ~ #controls label:nth-last-child(6):active .ImageLeftDiv img,
	#slide_5:checked ~ #controls label:nth-last-child(5):active .ImageLeftDiv img,
	#slide_6:checked ~ #controls label:nth-last-child(4):active .ImageLeftDiv img,
	#slide_7:checked ~ #controls label:nth-last-child(3):active .ImageLeftDiv img,
	#slide_8:checked ~ #controls label:nth-last-child(2):active .ImageLeftDiv img{
		animation: 0.2s arrowAnimation 1;
	}
    
	.Podnaslov-Teorija .kartica a p{
		font-size: 4vw;
	}

}

@media screen and (max-width: 700px) and (min-width: 390px){

	.SliderContainer{
		width: 93vw;
		height: 72vw;
		margin-left: auto;
		margin-right: auto;
		margin-top: 5vw;
	}
	
	.SliderContainer .slider {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 1;
	}
	
	.slides {
		position: absolute;
		width: 800%;
		height: 62vw !important;
		margin-right: -700%;
	}
	
	.slide {
		width: 93vw;
		height: 62vw;
		float: left;
		position: relative;
		background-color: var(--blue);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	.slide-data {
		width: 96%;
		margin-left: 2%;
		height: auto !important;
		top: 12vw !important;
		position: absolute;
		text-align: center;
	}
	
	.slide-data h1{
		font-family: 'JakartaSemiBold';
		font-size: 7vw;
		line-height: 8vw;
		margin-bottom: 3vw;
		text-shadow: 0 0 4px #000000;
	}
	
	.slide-data p{
		font-family: 'JakartaMedium';
		font-size: 3vw;
		line-height: 6vw;
	    margin-bottom: 1vw; 
		text-shadow: 0 0 4px #000000;
	}
	
	.slide-data a{
		font-family: 'JakartaMedium';
		font-size: 3vw;
		padding: 1.2vw;
    	text-shadow: 0 0 8px #000000;
    	box-shadow: 0 0 4px 0 #000000;
	}
	
	#controls{
		width: 100%;
		height: 8vw;
		position: absolute;
		top: 54vw;
	}
    #controls label {
        transition: opacity 0.2s ease-out;
        display: none;
        width: 8vw;
        height: 8vw;
    }
	
	#controls .ImageLeftDiv, #controls .ImageRightDiv{
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
	}
	
	#controls .ImageLeftDiv img, #controls .ImageRightDiv img{
		width: 100%;
		height: 100%;
		max-height: 100%;
		max-width: 100%;
		vertical-align: unset;
		display: block;
	}
	
	#bullets{
		text-align: center;
		position: absolute;
		height: 10vw;
		width: 100%;
		transition: 0.2s ease-out;
		top: 62vw;
	}
	
	#bullets label{
		display: inline-block;
		width: 4vw;
		height: 4vw;
		border-radius: 100%;
		background: var(--blue);
		margin: 0 1vw;
		margin-top: 3vw;
		margin-bottom: 3vw;
		border: 1px solid #efefef;
	}
    
    #slide_1:checked ~ #controls label:nth-child(2),
    #slide_2:checked ~ #controls label:nth-child(3),
    #slide_3:checked ~ #controls label:nth-child(4),
    #slide_4:checked ~ #controls label:nth-child(5),
    #slide_5:checked ~ #controls label:nth-child(6),
    #slide_6:checked ~ #controls label:nth-child(7),
    #slide_7:checked ~ #controls label:nth-child(8),
    #slide_8:checked ~ #controls label:nth-child(1){
    	/*background: url('../images/WEBP/arrow-white-right-11.webp') no-repeat;*/
    	float: right;
    	display: block;
    	background-size: 100%;
    }
    
    
    #slide_1:checked ~ #controls label:nth-last-child(1),
    #slide_2:checked ~ #controls label:nth-last-child(8),
    #slide_3:checked ~ #controls label:nth-last-child(7),
    #slide_4:checked ~ #controls label:nth-last-child(6),
    #slide_5:checked ~ #controls label:nth-last-child(5),
    #slide_6:checked ~ #controls label:nth-last-child(4),
    #slide_7:checked ~ #controls label:nth-last-child(3),
    #slide_8:checked ~ #controls label:nth-last-child(2){
    	/*background: url('../images/WEBP/arrow-white-left-21.webp') no-repeat;*/
    	float: left;
    	display: block;
    	background-size: 100%;
    }
    
	#slide_1:checked ~ #controls label:nth-child(2) .ImageLeftDiv,
	#slide_2:checked ~ #controls label:nth-child(3) .ImageLeftDiv,
	#slide_3:checked ~ #controls label:nth-child(4) .ImageLeftDiv,
	#slide_4:checked ~ #controls label:nth-child(5) .ImageLeftDiv,
	#slide_5:checked ~ #controls label:nth-child(6) .ImageLeftDiv,
	#slide_6:checked ~ #controls label:nth-child(7) .ImageLeftDiv,
	#slide_7:checked ~ #controls label:nth-child(8) .ImageLeftDiv,
	#slide_8:checked ~ #controls label:nth-child(1) .ImageLeftDiv{
		display: none;
	}
	
	
	#slide_1:checked ~ #controls label:nth-last-child(1) .ImageRightDiv,
	#slide_2:checked ~ #controls label:nth-last-child(8) .ImageRightDiv,
	#slide_3:checked ~ #controls label:nth-last-child(7) .ImageRightDiv,
	#slide_4:checked ~ #controls label:nth-last-child(6) .ImageRightDiv,
	#slide_5:checked ~ #controls label:nth-last-child(5) .ImageRightDiv,
	#slide_6:checked ~ #controls label:nth-last-child(4) .ImageRightDiv,
	#slide_7:checked ~ #controls label:nth-last-child(3) .ImageRightDiv,
	#slide_8:checked ~ #controls label:nth-last-child(2) .ImageRightDiv{
		display: none;
	}
	
	#slide_1:checked ~ #controls label:nth-child(2):active .ImageRightDiv img,
	#slide_2:checked ~ #controls label:nth-child(3):active .ImageRightDiv img,
	#slide_3:checked ~ #controls label:nth-child(4):active .ImageRightDiv img,
	#slide_4:checked ~ #controls label:nth-child(5):active .ImageRightDiv img,
	#slide_5:checked ~ #controls label:nth-child(6):active .ImageRightDiv img,
	#slide_6:checked ~ #controls label:nth-child(7):active .ImageRightDiv img,
	#slide_7:checked ~ #controls label:nth-child(8):active .ImageRightDiv img,
	#slide_8:checked ~ #controls label:nth-child(1):active .ImageRightDiv img{
		animation: 0.2s arrowAnimation 1;
	}
	
	
	#slide_1:checked ~ #controls label:nth-last-child(1):active .ImageLeftDiv img,
	#slide_2:checked ~ #controls label:nth-last-child(8):active .ImageLeftDiv img,
	#slide_3:checked ~ #controls label:nth-last-child(7):active .ImageLeftDiv img,
	#slide_4:checked ~ #controls label:nth-last-child(6):active .ImageLeftDiv img,
	#slide_5:checked ~ #controls label:nth-last-child(5):active .ImageLeftDiv img,
	#slide_6:checked ~ #controls label:nth-last-child(4):active .ImageLeftDiv img,
	#slide_7:checked ~ #controls label:nth-last-child(3):active .ImageLeftDiv img,
	#slide_8:checked ~ #controls label:nth-last-child(2):active .ImageLeftDiv img{
		animation: 0.2s arrowAnimation 1;
	}
    
}

.PoslednjiRedTelefonNovi{
	background-color: var(--blue);
	text-align: center;
}

.PoslednjiRedTelefonNovi .Slika{
	text-align: center;
}

.PoslednjiRedTelefonNovi .Slika img { 
	width: 40vw;
	margin-top: 10vw;
	margin-bottom: 6vw;
}

.PoslednjiRedTelefonNovi #PrviNaslov.Naslov h1{
	margin-top: 10vw;
	padding-top: 10vw;
	font-size: 9vw;
	margin-bottom: 4vw;
	font-family: 'JakartaSemiBold';
}

.PoslednjiRedTelefonNovi .Tekst p{
	color: #efefef;
	margin-bottom: 10vw;
	font-size: 3.8vw;
	line-height: 6.6vw;
	font-family: 'JakartaMedium';
}

.PoslednjiRedTelefonNovi .Naslov h1{
	color: #efefef;
	font-size: 8vw;
	margin-bottom: 4vw;
	font-family: 'JakartaSemiBold';
}

.PoslednjiRedTelefonNovi .Informacije .JednaInformacija{
	margin-top: 3vw;
}

.PoslednjiRedTelefonNovi .Informacije .JednaInformacija p{
	display: inline;
	color: #efefef;
	font-size: 3.8vw;
	line-height: 6.6vw;
	font-family: 'JakartaMedium';
}

.PoslednjiRedTelefonNovi .Informacije .JednaInformacija a{
	text-decoration: none;
	color: var(--orange);
	font-size: 3.8vw;
	line-height: 6.6vw;
	font-family: 'JakartaMedium';
}

.PoslednjiRedTelefonNovi .Dugmici{
	margin-top: 15vw;
	background-color: var(--blue);
	margin-bottom: 10vw;
}

.PoslednjiRedTelefonNovi .Dugmici .DugmiciPrviRed button{
	text-decoration: none;
	border: 2px solid #efefef;
	outline: none;
	width: 14vw;
	height: 14vw;
	color: #efefef;
	border-radius: 50%;
	background-size: 100% 100%;
	margin-left: 5vw;
	background-color: var(--blue);
}

.PoslednjiRedTelefonNovi .Dugmici .DugmiciPrviRed button#PrviButton, .PoslednjiRedTelefonNovi .Dugmici .DugmiciDrugiRed button#DrugiRedPrviButton{
	margin-left: 0;
}

.PoslednjiRedTelefonNovi .Dugmici button img{
	width: 9vw;
	height: 9vw;
}

.PoslednjiRedTelefonNovi .Dugmici .DugmiciDrugiRed button{
	text-decoration: none;
	border: 2px solid #efefef;
	outline: none;
	width: 14vw;
	height: 14vw;
	color: #efefef;
	margin-left: 5vw;
	border-radius: 50%;
	background-size: 100% 100%;
	background-color: var(--blue);
}

.PoslednjiRedTelefonNovi .Dugmici .DugmiciDrugiRed{
	margin-top: 3.2vw;
}

.PoslednjiRedTelefonNovi .Dugmici button:hover{
	border-color: var(--orange);
	border-width: 2px;
	background-color: var(--orange);
	transition: 0.3s ease-out;
}

.PoslednjiRedTelefonNovi .Prava {
	background-color: #00000094;
	vertical-align: center;
}

.PoslednjiRedTelefonNovi .MaliTekst p{
	font-size: 3.3vw;
	line-height: 6.6vw;
	color: #efefef;
	font-family: 'JakartaMedium';
}

.PoslednjiRedTelefonNovi .Prava p{
	color: #efefef;
	margin: 0;
	padding: 4vw 0 4vw 0;
	font-family: 'JakartaMedium';
	font-size: 3.8vw;
	line-height: 6.6vw;
}

/*TELEFON*/


*::selection{
    color: var(--selectionLetters);
    background-color: var(--selectionBackground);
}

.HeaderPc p::selection, .HeaderPc a::selection, .PoslednjiRed h1::selection, .PoslednjiRed p::selection, .PoslednjiRed a::selection, .PoslednjiRed img::selection,
.pre-header-telefon p::selection, .pre-header-telefon a::selection, 
.headerPhoneScroll p::selection, .headerPhoneScroll a::selection, 
.PoslednjiRedTelefonNovi h1::selection, .PoslednjiRedTelefonNovi p::selection, .PoslednjiRedTelefonNovi a::selection, 
.mainMenuScroll p::selection, .mainMenuScroll a::selection{
    color: var(--blue);
    background-color: #efefef;
}