/* SMALLEST */

@media (max-width: 575px) {
	.background-image-container {
	}

	.mobile-break {
		display: block;
		width: 100%;
	}

	.heroDetailContainer {
		width: 100%;
		height: 58rem;
		position: relative;
		display: flex;
		justify-content: center;
	}

	.logo {
		position: absolute;
		top: -20px;
		/*left: calc(50% - 12.5rem);*/
		width: max-content;
		height: auto;
		width: 20rem;

	}
	.menuMid {
		display:none;
	}
	.menuMidLeft, .menuRight {
		display: none;
	}
	.heroContent {
		width: calc(100% - 13rem);
		position: relative;
		margin: 0 0 10rem 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.heroDefaultLinksContainer {
	        position:absolute;
	        display: flex;
		flex-wrap:wrap;
	        left:0;
	        width:100%;
	        gap:1.5rem;
	        justify-content: center;
		bottom: 1.5rem;
	}
	
	.heroDefaultLinks {
	        font-size: 1.6rem;
	        line-height: 1.6rem;
	        font-weight: 700;
	        color: var(--white);
	        transition: color, 250ms ease-in-out;
		white-space: nowrap;
	}
	
	.heroDefaultLinksActive {
	        font-size: 1.6rem;
	        line-height: 1.6rem;
	        font-weight: 700;
	        color:var(--color-link-hover);
	        transition: color, 250ms ease-in-out;
		white-space: nowrap;
	}
	.heroOperaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap: 1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroOperaLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroOperaLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-opera);
		transition: color, 250ms ease-in-out;
	}

	.heroDramaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap:1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroDramaLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroDramaLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-drama);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap:1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroBaletLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-balet);
		transition: color, 250ms ease-in-out;
	}
	.heroTextAuthor {
		font-size: 2rem;
		margin: 0 0 .7rem 0;
	}
	.heroTextTitle {
		font-family: 'Lalezar', cursive;
		font-size: 6.2rem;
		line-height: 5.5rem;
		margin: 0 0 3rem 0;
	}
	.izvContentContainer {
		width: calc(100% - 8rem);
		overflow-x: hidden;
		position: relative;
		height: 4rem;
		background: var(--color-izvedbe-content-container);
		display: flex;
		align-items: center;
		text-overflow: clip;
		white-space: nowrap;
	}
	.izvContentTitle {
		position: absolute;
		left: 0;
		top: 0;
		height: 4rem;
		display: flex;
		align-items: center;
		padding: 0 2rem;
		background: var(--color-izvedbe-title);
		letter-spacing: .1rem;
	}
	.newsTitleContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.newsBoxContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap;
		gap: 3rem;
	}
	.newsBox {
		flex-grow: 1;
		flex-basis: 47%;
		cursor: pointer;
		transition: color, 250ms ease-in-out;
	}
	.novostiBoxContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap;
		gap: 3rem;
	}
	.novostiBox {
		flex-grow: 1;
		width: 46.9%;
		cursor: pointer;
		transition: color, 250ms ease-in-out;
	}
	.novostiTitle {
		font-family: 'Lalezar', cursive;
		font-size: 2.4rem;
		line-height: 2.4rem;
		cursor: pointer;
	}
	.premijereTitleContainer, .izvedbeTitleContainer, .novostiTitleContainer, .rasporedTitleContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.premijereBoxOpera, .premijereBoxDrama, .premijereBoxBalet {
		position: relative;
		flex-basis: 50%;
		cursor: pointer;
		aspect-ratio: 1 / 1;
		box-sizing: border-box;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.pretplataTitleContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		box-sizing: border-box;
	}
	.pretplataContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display:flex;
		flex-wrap: wrap;
		gap: 4rem;
	}
	.pretplataIconsContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display:flex;
		gap:2rem;
		padding:0;
		justify-content: space-between;
	}
	.pretplataTextContainer {
		width:100%; margin: 0 0 0 0;
	}
	.footerContentContainer {
		margin:0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.footerItem {
		width: 40%;
		color: var(--white);
	}
	.newsTitle {
		font-family: 'Lalezar', cursive;
		font-size: 2.6rem;
		line-height: 2.6rem;
		cursor: pointer;
	}
	.viseContainer {
		width: calc(100% - 8rem);
		margin:0 auto;
		padding: 0 0 6rem 0;
	}
	.viseContentContainer {
		width: 100%;
		height: 48rem;
		display:flex;
	}
	.viseLeft {
		width:30%;
		background:url(../images/vise_bg_left.jpg) right;
		background-size: cover;
	}
	.viseRight {
		position: relative;
		padding: 7rem;
		color: var(--black);
		background:url(../images/vise_bg_right.jpg) left;
		background-size: cover;
		width: calc(70% - 14rem);
	}
	.viseLogo {
		position: absolute;
		bottom: 0;
		left: 7rem;
		bottom: 7rem;
	}
	.viseLink {
		font-size: 2.4rem;
		line-height: 2.4rem;
		color: var(--black);
		font-family: 'Lalezar', cursive;
		transition: color, 250ms ease-in-out;
		cursor:pointer;
	}
	.viseLink:hover {
		color: var(--color-link-hover);
	}
	.newsletterContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		box-sizing: border-box;
		display:block;
	}
	.newsletterContentLeft {
		width: 35rem;
		margin: 0 0 3rem 0;
	}
	.newsletterInputContainer {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
	}
	.newsletterInput {
		height: 6rem;
		padding: 0 2rem;
		font-size: 2rem;
		font-weight: 400;
		border: .1rem solid var(--color-nl-input-border);
		width: 63rem;
	}
	.premijereOperaBoxLinksContainer, .premijereDramaBoxLinksContainer, .premijereBaletBoxLinksContainer {
		display:flex;
		gap: .6rem;
		margin-top:1rem;
	}
	.izvedbeBoxContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		position:relative;
		gap:3rem;
	}
	.izvedbeBox {
		flex-grow: 1;
		position: relative;
		flex-basis: 100%;
		aspect-ratio: 2 / 2.3;
		box-sizing: border-box;
		color: var(--white);
	}
	.izvedbeBoxOperaLabel, .izvedbeBoxDramaLabel, .izvedbeBoxBaletLabel {
		position: absolute;
		left: 3.2rem;
		top: 0;
	}
	.izvedbeBoxOperaDate {
		width: 10.6rem;
		display:block;
		background: var(--color-opera);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxOperaTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-opera);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	.izvedbeBoxDramaDate {
		width: 10.6rem;
		display:block;
		background: var(--color-drama);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxDramaTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-drama);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	.izvedbeBoxBaletDate {
		width: 10.6rem;
		display:block;
		background: var(--color-balet);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxBaletTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-balet);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	.izvedbeBoxTitle > .text48, .premijereBoxTitle > .text48 {
		font-size: 4.2rem;
		line-height: 4.2rem;
	}
	.premijereBoxTitle, .izvedbeBoxTitle {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 3.2rem;
		bottom: 3.2rem;
		gap: 1rem;
		width: calc(100% - 7rem);
	}
	.premijereOperaBoxContainer, .premijereDramaBoxContainer, .premijereBaletBoxContainer, .rasporedSelectContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap; 
		justify-content: space-between;
		box-sizing: border-box;
		gap:3rem;
		position:relative;
	}
	.premijereOperaBox, .premijereDramaBox, .premijereBaletBox {
		flex-grow: 1;
		position: relative;
		flex-basis: 100%;
		aspect-ratio: 2 / 1.6;
		box-sizing: border-box;
		color: var(--white);
		cursor: pointer;
		max-width: 100%;
	}
	.detailMainContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display:flex;
		flex-wrap: wrap;
		position: relative;
		box-sizing: border-box;
		gap: 4rem;
		justify-content: space-around;
		padding:6rem 0;
	}
	.detailLeftContentContainer {
		width: 100%;
	}
	.detailRightContentContainer {
		width: 100%;
		flex-grow: 1;
	}
	.detailGalleryContainer {
		width: 100%;
		display:flex;
		flex-flow: wrap;
	}
	.detailGalleryImage {
		width:50%;
		height:auto;
	}
	.detailTitleContainer {
		width: 100%;
		padding: 5rem 0 0 0;
		display:flex;
	}
	.detailTitleLeft {
		background:var(--white);
		flex-grow: 1;
	}
	.detailTitleMain {
		width: calc(100% - 8rem);
		flex-basis: calc(100% - 8rem);
		background-color: #FFFFFF;
	}
	.detailTitleRight {
		background:var(--white);
		flex-grow: 1;
	}
	.detailTitleContentContainer {
		width: 100%;
		background: var(--white);
	}
	.detailTitleContent {
		position: relative;
		width: 100%;
		background: var(--white);
		display:flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 0 2rem 0;
		padding: 4rem 0 0 0;
	}
	.detailTimeline {
		width: 100%;
		display: block;
		gap:2rem;
	}
	.detailOperaTimelineDuration, .detailDramaTimelineDuration, .detailBaletTimelineDuration {
		font-size:14px;
		height: 3.5rem;
		margin:0 0 5rem 0;
	}
	.rasporedSelectBox {
		position: relative;
		flex-basis: 100%;
		box-sizing: border-box;
	}
	.rasporedContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		box-sizing: border-box;
		position:relative;
	}
	.rasporedMainContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display:flex;
		flex-wrap:wrap;
		position: relative;
		box-sizing: border-box;
		gap: 4rem;
		justify-content: flex-start;
	}
	.rasporedMainContentLeft {
		width: 100%;
		display: flex;
		gap: 1.4rem;
		justify-content: flex-start;
		flex-direction: row-reverse;
	}
	.rasporedMainContentMid {
		margin:-.3rem 0 0 0;
		width: 100%;
	}
	.rasporedMainContentRight {
		/*width: 20rem;*/
		width: 100%;
		min-height:7rem;
		position:relative;
	}
	.item {
    		width: calc(50% - 0px);
	}

	.biographyImage {
		width: 100%;
		margin: 0 0 20px 0;
	}

	.technicalDetailsElement1 {
		width: 100%;
	}

	.technicalDetailsElement2 {
		width: 100%;
	}

	.technicalDetailsElement3 {
		width: 100%;
	}
	.image-items {
		width: 100%;
		display: grid;
		text-align: center;
		justify-content: center;
	}
	.half-image {
		width: 75%;
	}
	.menuHiddenItemLogo {
		display: none;
	}
	.menuHiddenContentContainer {
		display: none;
	}
	.menuHiddenContentContainerMobile {
		margin:0 auto;
		width:100%;
		display: flex;
		justify-content: center;
		gap: 4rem;
	}
	.heroDefaultLinksContainer {
	        position:absolute;
	        display: flex;
		flex-wrap:wrap;
	        left:0;
	        width:100%;
	        gap:1.5rem;
	        justify-content: center;
		bottom: 1.5rem;
	}
	
	.heroDefaultLinks {
	        font-size: 1.6rem;
	        line-height: 1.6rem;
	        font-weight: 700;
	        color: var(--white);
	        transition: color, 250ms ease-in-out;
		white-space: nowrap;
	}
	
	.heroDefaultLinksActive {
	        font-size: 1.6rem;
	        line-height: 1.6rem;
	        font-weight: 700;
	        color:var(--color-link-hover);
	        transition: color, 250ms ease-in-out;
		white-space: nowrap;
	}
	.heroOperaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap: 1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroOperaLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroOperaLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-opera);
		transition: color, 250ms ease-in-out;
	}

	.heroDramaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap:1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroDramaLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroDramaLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-drama);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap:1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroBaletLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-balet);
		transition: color, 250ms ease-in-out;
	}

	.accessibilityIcon {
		display: flex;
	}
}

/* 576 */

@media (min-width: 576px) {
	.background-image-container {
	}

	.mobile-break {
		display: block;
		width: 100%;
	}

	.logo {
		position: absolute;
		top: 0;
		left: calc(50% - 10rem);
		width: 20rem;
		height: auto;
	}
	.menuMid {
		width:calc(100% - 4rem);
		display: flex;
		justify-content:flex-end;
		height: 6rem;
	}
	.menuMidOposite {
		display: none;
	}
	.menuMidLeft, .menuRight {
		display: none;
	}
	.heroContent {
		width: calc(100% - 13rem);
		position: relative;
		margin: 0 0 10rem 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.heroOperaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:nowrap;
		left:0;
		width:100%;
		gap:3rem;
		justify-content: center;
	}
	.heroOperaLinks {
		font-size: 1.6rem;
		line-height: 2.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroDramaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:nowrap;
		left:0;
		width:100%;
		gap:3rem;
		justify-content: center;
	}
	.heroDramaLinks {
		font-size: 1.6rem;
		line-height: 2.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:nowrap;
		left:0;
		width:100%;
		gap:3rem;
		justify-content: center;
	}
	.heroBaletLinks {
		font-size: 1.6rem;
		line-height: 2.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.izvContentContainer {
		width: calc(100% - 8rem);
		overflow-x: hidden;
		position: relative;
		height: 4rem;
		background: var(--color-izvedbe-content-container);
		display: flex;
		align-items: center;
		text-overflow: clip;
		white-space: nowrap;
	}
	.newsTitleContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.newsBoxContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap;
		gap: 3rem;
	}
	.novostiBoxContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap;
		gap: 3rem;
	}
	.novostiBox {
		flex-grow: 1;
		width: 46.9%;
		cursor: pointer;
		transition: color, 250ms ease-in-out;
	}
	.novostiTitle {
		font-family: 'Lalezar', cursive;
		font-size: 2.4rem;
		line-height: 2.4rem;
		cursor: pointer;
	}
	.premijereTitleContainer, .izvedbeTitleContainer, .novostiTitleContainer, .rasporedTitleContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.premijereBoxOpera, .premijereBoxDrama, .premijereBoxBalet {
		position: relative;
		flex-basis: 50%;
		cursor: pointer;
		aspect-ratio: 1 / 1;
		box-sizing: border-box;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.newsletterContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		box-sizing: border-box;
		display:flex;
	}
	.pretplataTitleContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		box-sizing: border-box;
	}
	.pretplataContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display:flex;
		gap: 4rem;
	}
	.pretplataIconsContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display:flex;
		gap:0;
		padding:0;
		justify-content: space-between;
	}
	.pretplataTextContainer {
		width:100%; margin: 0 0 0 0;
	}
	.footerContentContainer {
		margin:0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.footerItem {
		width: 25%;
		color: var(--white);
	}
	.newsTitle {
		font-family: 'Lalezar', cursive;
		font-size: 2.6rem;
		line-height: 2.6rem;
		cursor: pointer;
	}
	.viseContainer {
		width: calc(100% - 8rem);
		margin:0 auto;
		padding: 0 0 6rem 0;
	}
	.viseContentContainer {
		width: 100%;
		height: 48rem;
		display:flex;
	}
	.viseLeft {
		width:30%;
		background:url(../images/vise_bg_left.jpg) right;
		background-size: cover;
	}
	.viseRight {
		position: relative;
		padding: 7rem;
		color: var(--black);
		background:url(../images/vise_bg_right.jpg) left;
		background-size: cover;
		width: calc(70% - 14rem);
	}
	.viseLogo {
		position: absolute;
		bottom: 0;
		left: 7rem;
		bottom: 7rem;
	}
	.viseLink {
		font-size: 2.8rem;
		line-height: 2.8rem;
		color: var(--black);
		font-family: 'Lalezar', cursive;
		transition: color, 250ms ease-in-out;
		cursor:pointer;
	}
	.viseLink:hover {
		color: var(--color-link-hover);
	}
	.newsletterContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		box-sizing: border-box;
		display:block;
	}
	.newsletterContentLeft {
		width: 35rem;
		margin: 0 0 3rem 0;
	}
	.newsletterInputContainer {
		display: flex;
		gap: 1rem;
	}
	.newsletterInput {
		height: 6rem;
		padding: 0 2rem;
		font-size: 2rem;
		font-weight: 400;
		border: .1rem solid var(--color-nl-input-border);
		width: 63rem;
	}
	.premijereOperaBoxLinksContainer, .premijereDramaBoxLinksContainer, .premijereBaletBoxLinksContainer {
		display:flex;
		gap: .6rem;
		margin-top:1rem;
	}
	.izvedbeBoxContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		position:relative;
		gap:3rem;
	}
	.izvedbeBox {
		flex-grow: 1;
		position: relative;
		flex-basis: 100%;
		aspect-ratio: 2 / 1.6;
		box-sizing: border-box;
		color: var(--white);
	}
	.izvedbeBoxOperaLabel, .izvedbeBoxDramaLabel, .izvedbeBoxBaletLabel {
		position: absolute;
		left: 3.2rem;
		top: 0;
	}
	.izvedbeBoxOperaDate {
		width: 10.6rem;
		display:block;
		background: var(--color-opera);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxOperaTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-opera);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	.izvedbeBoxDramaDate {
		width: 10.6rem;
		display:block;
		background: var(--color-drama);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxDramaTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-drama);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	.izvedbeBoxTitle > .text48, .premijereBoxTitle > .text48 {
		font-size: 4.2rem;
		line-height: 4.2rem;
	}
	.premijereBoxTitle, .izvedbeBoxTitle {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 3.2rem;
		bottom: 3.2rem;
		gap: 1rem;
		width: calc(100% - 7rem);
	}
	.premijereOperaBoxContainer, .premijereDramaBoxContainer, .premijereBaletBoxContainer, .rasporedSelectContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap; 
		justify-content: space-between;
		box-sizing: border-box;
		gap:3rem;
		position:relative;
	}
	.premijereOperaBox, .premijereDramaBox, .premijereBaletBox {
		flex-grow: 1;
		position: relative;
		flex-basis: 100%;
		aspect-ratio: 2 / 1.1;
		box-sizing: border-box;
		color: var(--white);
		cursor: pointer;
		max-width: 100%;
	}
	.detailMainContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display:flex;
		flex-wrap: wrap;
		position: relative;
		box-sizing: border-box;
		gap: 4rem;
		justify-content: space-around;
		padding:6rem 0;
	}
	.detailLeftContentContainer {
		width: 100%;
	}
	.detailRightContentContainer {
		width: 100%;
		flex-grow: 1;
	}
	.detailGalleryContainer {
		width: 100%;
		display:flex;
		flex-flow: wrap;
	}
	.detailGalleryImage {
		width:50%;
		height:auto;
	}
	.detailTitleContainer {
		width: 100%;
		padding: 5rem 0 0 0;
		display:flex;
	}
	.detailTitleLeft {
		background:var(--white);
		flex-grow: 1;
	}
	.detailTitleMain {
		width: calc(100% - 8rem);
		flex-basis: calc(100% - 8rem);
	}
	.detailTitleRight {
		background:var(--white);
		flex-grow: 1;
	}
	.detailTitleContentContainer {
		width: 100%;
		background: var(--white);
	}
	.detailTitleContent {
		position: relative;
		width: 100%;
		background: var(--white);
		display:flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 0 2rem 0;
		padding: 5rem 0 0 0;
	}
	.detailTimeline {
		width: 100%;
		display: flex;
		gap:2rem;
	}
	.detailTimelineContainer > * {
		font-size: 9px;
	}
	.detailOperaTimelineDuration, .detailDramaTimelineDuration, .detailBaletTimelineDuration {
		font-size:14px;
		height: 4.5rem;
		margin: none;
	}
	.detailTimelineContainer {
		width: 100%;
		height:.1rem;
		position:relative;
		background: var(--black);
		margin:3rem 0 0 0;
	}
	.rasporedSelectBox {
		position: relative;
		flex-basis: 100%;
		box-sizing: border-box;
	}
	.rasporedContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		box-sizing: border-box;
		position:relative;
	}
	.rasporedMainContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display:flex;
		flex-wrap:wrap;
		position: relative;
		box-sizing: border-box;
		gap: 4rem;
		justify-content: flex-start;
	}
	.rasporedMainContentLeft {
		width: 100%;
		display: flex;
		gap: 1.4rem;
		justify-content: flex-start;
	}
	.rasporedMainContentMid {
		margin:-.3rem 0 0 0;
		width: 100%;
	}
	.rasporedMainContentRight {
		/*width: 20rem;*/
		width: 100%;
		min-height:7rem;
		position:relative;
	}
	.item {
    		width: calc(50% - 0px);
	}

	.technicalDetailsElement1 {
		width: 100%;
	}

	.technicalDetailsElement2 {
		width: 100%;
	}

	.technicalDetailsElement3 {
		width: 100%;
	}
	.menuHiddenItemLogo {
		display: none;
	}
	.menuHiddenContentContainer {
		display: none;
	}
	.menuHiddenContentContainerMobile {
		margin:0 auto;
		width:100%;
		display: flex;
		justify-content: center;
		gap: 4rem;
	}
	.heroDefaultLinksContainer {
	        position:absolute;
	        display: flex;
		flex-wrap:wrap;
	        left:0;
	        width:100%;
	        gap:1.5rem;
	        justify-content: center;
		bottom: 1.5rem;
	}
	
	.heroDefaultLinks {
	        font-size: 1.6rem;
	        line-height: 1.6rem;
	        font-weight: 700;
	        color: var(--white);
	        transition: color, 250ms ease-in-out;
		white-space: nowrap;
	}
	
	.heroDefaultLinksActive {
	        font-size: 1.6rem;
	        line-height: 1.6rem;
	        font-weight: 700;
	        color:var(--color-link-hover);
	        transition: color, 250ms ease-in-out;
		white-space: nowrap;
	}
	.heroOperaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap: 1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroOperaLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroOperaLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-opera);
		transition: color, 250ms ease-in-out;
	}

	.heroDramaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap:1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroDramaLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroDramaLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-drama);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap:1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroBaletLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-balet);
		transition: color, 250ms ease-in-out;
	}

	.accessibilityIcon {
		display: none;
	}
}

/* 768 */

@media (min-width: 768px) {
	.background-image-container {
	}

	.mobile-break {
		display: block;
		width: 100%;
	}

	.menuMid {
		width: 64.8rem;
		display: flex;
		justify-content: space-between;
		height: 6rem;
	}
	.menuMidLeft {
		display: flex;
		align-items: flex-end;
		height: 6rem;
		gap: 2rem;
	}
	.menuRight {
		display: none;
	}
	.heroContent {
		width: 64.8rem;
		position: relative;
		margin: 0 0 10rem 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.izvContentContainer {
		width: calc(100% - 8rem);
		overflow-x: hidden;
		position: relative;
		height: 4rem;
		background: var(--color-izvedbe-content-container);
		display: flex;
		align-items: center;
		text-overflow: clip;
		white-space: nowrap;
	}
	.newsTitleContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.newsBoxContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap;
		gap: 4rem;
	}
	.novostiBoxContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap;
		gap: 4rem;
	}
	.novostiBox {
		width: 47%;
		cursor: pointer;
		transition: color, 250ms ease-in-out;
	}
	.novostiTitle {
		font-family: 'Lalezar', cursive;
		font-size: 2.4rem;
		line-height: 2.4rem;
		cursor: pointer;
	}
	.premijereTitleContainer, .izvedbeTitleContainer, .novostiTitleContainer, .rasporedTitleContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.premijereBoxOpera, .premijereBoxDrama, .premijereBoxBalet {
		position: relative;
		flex-basis: 33.3333%;
		cursor: pointer;
		aspect-ratio: 1 / 1;
		box-sizing: border-box;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.newsletterContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		box-sizing: border-box;
		display:flex;
	}
	.pretplataTitleContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		box-sizing: border-box;
	}
	.pretplataContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display:flex;
		gap: 4rem;
	}
	.pretplataIconsContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display:flex;
		justify-content: space-between;
		padding:0 0 0 0;
	}
	.pretplataTextContainer {
		width:100%; margin: 0 0 0 0;
	}
	.footerContentContainer {
		margin:0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.footerItem {
		width: 25%;
		color: var(--white);
	}
	.newsTitle {
		font-family: 'Lalezar', cursive;
		font-size: 2.6rem;
		line-height: 2.6rem;
		cursor: pointer;
	}
	.viseContainer {
		width: calc(100% - 8rem);
		margin:0 auto;
		padding: 0 0 6rem 0;
	}
	.viseContentContainer {
		width: 100%;
		height: 48rem;
		display:flex;
	}
	.viseLeft {
		width:45%;
		background:url(../images/vise_bg_left.jpg) right;
		background-size: cover;
	}
	.viseRight {
		position: relative;
		padding: 7rem;
		color: var(--black);
		background:url(../images/vise_bg_right.jpg) left;
		background-size: cover;
		width: calc(55% - 14rem);
	}
	.viseLogo {
		position: absolute;
		bottom: 0;
		left: 7rem;
		bottom: 7rem;
	}
	.viseLink {
		font-size: 3.2rem;
		line-height: 3.2rem;
		color: var(--black);
		font-family: 'Lalezar', cursive;
		transition: color, 250ms ease-in-out;
		cursor:pointer;
	}
	.viseLink:hover {
		color: var(--color-link-hover);
	}
	.newsletterContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		box-sizing: border-box;
		display:block;
	}
	.newsletterContentLeft {
		width: 35rem;
		margin: 0 0 3rem 0;
	}
	.newsletterInputContainer {
		display: flex;
		gap: 6rem;
	}
	.newsletterInput {
		height: 6rem;
		padding: 0 2rem;
		font-size: 2rem;
		font-weight: 400;
		border: .1rem solid var(--color-nl-input-border);
		width: 63rem;
	}
	.premijereOperaBoxLinksContainer, .premijereDramaBoxLinksContainer, .premijereBaletBoxLinksContainer {
		display:flex;
		gap: .6rem;
		margin-top:1rem;
	}
	.izvedbeBoxContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		position:relative;
		gap:3rem;
	}
	.izvedbeBox {
		flex-grow: 1;
		position: relative;
		flex-basis: 100%;
		aspect-ratio: 2 / 1.1;
		box-sizing: border-box;
		color: var(--white);
	}
	.izvedbeBoxOperaLabel, .izvedbeBoxDramaLabel, .izvedbeBoxBaletLabel {
		position: absolute;
		left: 3.2rem;
		top: 0;
	}
	.izvedbeBoxOperaDate {
		width: 10.6rem;
		display:block;
		background: var(--color-opera);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxOperaTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-opera);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	.izvedbeBoxDramaDate {
		width: 10.6rem;
		display:block;
		background: var(--color-drama);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxDramaTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-drama);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	.izvedbeBoxTitle > .text48, .premijereBoxTitle > .text48 {
		font-size: 4.2rem;
		line-height: 4.2rem;
	}
	.premijereBoxTitle, .izvedbeBoxTitle {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 3.2rem;
		bottom: 3.2rem;
		gap: 1rem;
		width: calc(100% - 7rem);
	}
	.premijereOperaBoxContainer, .premijereDramaBoxContainer, .premijereBaletBoxContainer, .rasporedSelectContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display: flex;
		flex-wrap: wrap; 
		justify-content: space-between;
		box-sizing: border-box;
		gap:3rem;
		position:relative;
	}
	.premijereOperaBox, .premijereDramaBox, .premijereBaletBox {
		flex-grow: 1;
		position: relative;
		flex-basis: 100%;
		aspect-ratio: 2 / 1.1;
		box-sizing: border-box;
		color: var(--white);
		cursor: pointer;
		max-width: calc(50% - 2rem);
	}
	.detailMainContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display:flex;
		flex-wrap: nowrap;
		position: relative;
		box-sizing: border-box;
		gap: 5rem;
		justify-content: space-around;
		padding:6rem 0;
	}
	.detailLeftContentContainer {
		width: calc(66.666666% - 8rem);
	}
	.detailRightContentContainer {
		width: calc(100% - 66.666666% - 8rem);
		flex-grow: 1;
	}
	.detailGalleryContainer {
		width: 100%;
		display:flex;
		flex-flow: wrap;
	}
	.detailGalleryImage {
		width:50%;
		height:auto;
	}
	.detailTitleContainer {
		width: 100%;
		padding: 5rem 0 0 0;
		display:flex;
	}
	.detailTitleLeft {
		background:var(--white);
		flex-grow: 1;
	}
	.detailTitleMain {
		width: calc(100% - 8rem);
		flex-basis: calc(100% - 8rem);
	}
	.detailTitleRight {
		background:var(--white);
		flex-grow: 1;
	}
	.detailTitleContentContainer {
		width: 100%;
		background: var(--white);
	}
	.detailTitleContent {
		position: relative;
		width: 100%;
		background: var(--white);
		display:flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-content: flex-end;
		margin: 0 0 2rem 0;
		padding: 5rem 0 0 0;
	}
	.detailTimeline {
		width: 100%;
		display: flex;
		gap:2rem;
	}
	.detailTimelineContainer > * {
		font-size: 14px;
	}
	.detailOperaTimelineDuration, .detailDramaTimelineDuration, .detailBaletTimelineDuration {
		font-size:18px;
		height: 5rem;
	}
	.detailTimelineContainer {
		width: 100%;
		height:.1rem;
		position:relative;
		background: var(--black);
		margin:3rem 0 0 0;
	}
	.rasporedSelectBox {
		position: relative;
		flex-basis: 100%;
		box-sizing: border-box;
	}
	.rasporedMainContentContainer {
		margin: 0 auto;
		width: calc(100% - 8rem);
		display:flex;
		flex-wrap:wrap;
		position: relative;
		box-sizing: border-box;
		gap: 4rem;
		justify-content: space-between;
	}
	.rasporedMainContentLeft {
		width: 50%;
		display: flex;
		gap: 1.4rem;
		justify-content: flex-start;
	}
	.rasporedMainContentMid {
		margin:-.3rem 0 0 0;
		width: calc(100% - 24rem);
	}
	.rasporedMainContentRight {
		width: 20rem;
		position:relative;
	}
	.item {
    		width: calc(33% - 0px);
	}

	.technicalDetailsElement1 {
		width: 100%;
	}

	.technicalDetailsElement2 {
		width: 50%;
	}

	.technicalDetailsElement3 {
		width: 50%;
	}
	.menuHiddenItemLogo {
		display: none;
	}
	.menuHiddenContentContainer {
		display: none;
	}
	.menuHiddenContentContainerMobile {
		margin:0 auto;
		width:100%;
		display: flex;
		justify-content: center;
		gap: 4rem;
	}
	.heroDefaultLinksContainer {
	        position:absolute;
	        display: flex;
		flex-wrap:wrap;
	        left:0;
	        width:100%;
	        gap:1.5rem;
	        justify-content: center;
		bottom: 1.5rem;
	}
	
	.heroDefaultLinks {
	        font-size: 1.6rem;
	        line-height: 1.6rem;
	        font-weight: 700;
	        color: var(--white);
	        transition: color, 250ms ease-in-out;
		white-space: nowrap;
	}
	
	.heroDefaultLinksActive {
	        font-size: 1.6rem;
	        line-height: 1.6rem;
	        font-weight: 700;
	        color:var(--color-link-hover);
	        transition: color, 250ms ease-in-out;
		white-space: nowrap;
	}
	.heroOperaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap: 1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroOperaLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroOperaLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-opera);
		transition: color, 250ms ease-in-out;
	}

	.heroDramaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap:1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroDramaLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroDramaLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-drama);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap:1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroBaletLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-balet);
		transition: color, 250ms ease-in-out;
	}

	.accessibilityIcon {
		display: none;
	}
}

/* 860 */

@media (min-width: 860px) {
	.background-image-container {
	}

	.mobile-break {
		display: none;
	}

	.menuRight {
		margin: 0 2.5rem 0 0;
		display: flex;
		align-items: flex-end;
		height: 6rem;
		position: absolute;
		right:0;
	}
	.menuRightOposite {
		display: none;
	}
	.item {
    		width: calc(33% - 0px);
	}

	.technicalDetailsElement1 {
		width: 100%;
	}

	.technicalDetailsElement2 {
		width: 40%;
	}

	.technicalDetailsElement3 {
		width: 50%;
	}
	.menuHiddenItemLogo {
		display: none;
	}
	.menuLogoHidden {
		display: none;
	}
	.menuHiddenContentContainer {
		display: none;
	}
	.menuHiddenContentContainer {
		display: none;
	}
	.heroDefaultLinksContainer {
	        position:absolute;
	        display: flex;
		flex-wrap:wrap;
	        left:0;
	        width:100%;
	        gap:1.5rem;
	        justify-content: center;
		bottom: 1.5rem;
	}
	
	.heroDefaultLinks {
	        font-size: 1.6rem;
	        line-height: 1.6rem;
	        font-weight: 700;
	        color: var(--white);
	        transition: color, 250ms ease-in-out;
		white-space: nowrap;
	}
	
	.heroDefaultLinksActive {
	        font-size: 1.6rem;
	        line-height: 1.6rem;
	        font-weight: 700;
	        color:var(--color-link-hover);
	        transition: color, 250ms ease-in-out;
		white-space: nowrap;
	}
	.heroOperaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap: 1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroOperaLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroOperaLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-opera);
		transition: color, 250ms ease-in-out;
	}

	.heroDramaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap:1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroDramaLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroDramaLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-drama);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap:1.5rem;
		justify-content: center;
		bottom: 1.5rem;
	}
	.heroBaletLinks {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinksActive {
		font-size: 1.6rem;
		line-height: 1.6rem;
		font-weight: 700;
		color:var(--color-balet);
		transition: color, 250ms ease-in-out;
	}

	.accessibilityIcon {
		display: none;
	}
}


/* 990 */

@media (min-width: 990px) {
	.background-image-container {
	}

	.mobile-break {
		display: none;
	}

	.menuMid {
		width: 79rem;
		display: flex;
		justify-content: space-between;
		height: 6rem;
	}
	.menuMidOposite {
		display: none;
	}
	.menuRight {
		margin: 0 2.5rem 0 0;
		display: flex;
		align-items: flex-end;
		height: 6rem;
		position: absolute;
		right:0;
	}
	.heroContent {
		width: 79rem;
		position: relative;
		margin: 0 0 10rem 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.izvContentContainer {
		width: 89rem;
		overflow-x: hidden;
		position: relative;
		height: 4rem;
		background: var(--color-izvedbe-content-container);
		display: flex;
		align-items: center;
		text-overflow: clip;
		white-space: nowrap;
	}
	.newsTitleContainer {
		margin: 0 auto;
		width: 89rem;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.newsBoxContainer {
		margin: 0 auto;
		width: 89rem;
		display: flex;
		flex-wrap: wrap;
		gap: 4rem;
	}
	.newsTitle {
		font-family: 'Lalezar', cursive;
		font-size: 2.6rem;
		line-height: 2.6rem;
		cursor: pointer;
	}
	.novostiBoxContainer {
		margin: 0 auto;
		width: 89rem;
		display: flex;
		flex-wrap: wrap;
		gap: 3rem;
	}
	.novostiBox {
		width: 22.4%;
		cursor: pointer;
		transition: color, 250ms ease-in-out;
	}
	.novostiTitle {
		font-family: 'Lalezar', cursive;
		font-size: 2.4rem;
		line-height: 2.4rem;
		cursor: pointer;
	}
	.premijereTitleContainer, .izvedbeTitleContainer, .novostiTitleContainer, .rasporedTitleContainer {
		margin: 0 auto;
		width: 89rem;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.premijereBoxOpera, .premijereBoxDrama, .premijereBoxBalet {
		position: relative;
		flex-basis: 25%;
		cursor: pointer;
		aspect-ratio: 1 / 1;
		box-sizing: border-box;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.newsletterContentContainer {
		margin: 0 auto;
		width: 89rem;
		box-sizing: border-box;
		display:flex;
	}
	.pretplataTitleContainer {
		margin: 0 auto;
		width: 89rem;
		box-sizing: border-box;
	}
	.pretplataContentContainer {
		margin: 0 auto;
		width: 89rem;
		display:flex;
		gap: 4rem;
	}
	.pretplataIconsContainer {
		margin: 0 auto;
		width: 89rem;
		display:flex;
		justify-content:flex-start;
		gap: 15rem;
		padding:0 0 0 5rem;
	}
	.pretplataTextContainer {
		width:100%; margin: 0 0 0 0;
	}
	.footerContentContainer {
		margin:0 auto;
		width:89rem;
		display: flex;
		justify-content: space-between;
	}
	.footerItem {
		width:auto;
		color: var(--white);
	}
	.viseContainer {
		width: 89rem;
		margin:0 auto;
		padding: 0 0 6rem 0;
	}
	.viseContentContainer {
		width:89rem;
		height: 48rem;
		display:flex;
	}
	.viseLeft {
		width:50%;
		background:url(../images/vise_bg_left.jpg) right;
		background-size: cover;
	}
	.viseRight {
		position: relative;
		padding: 7rem;
		color: var(--black);
		background:url(../images/vise_bg_right.jpg) left;
		background-size: cover;
		width: calc(50% - 14rem);
	}
	.viseLogo {
		position: absolute;
		bottom: 0;
		left: 7rem;
		bottom: 7rem;
	}
	.viseLink {
		font-size: 3.2rem;
		line-height: 3.2rem;
		color: var(--black);
		font-family: 'Lalezar', cursive;
		transition: color, 250ms ease-in-out;
		cursor:pointer;
	}
	.viseLink:hover {
		color: var(--color-link-hover);
	}
	.newsletterContentContainer {
		margin: 0 auto;
		width: 89rem;
		box-sizing: border-box;
		display:block;
	}
	.newsletterContentLeft {
		width: 35rem;
		margin: 0 0 3rem 0;
	}
	.newsletterInputContainer {
		display: flex;
		gap: 6rem;
	}
	.newsletterInput {
		height: 6rem;
		padding: 0 2rem;
		font-size: 2rem;
		font-weight: 400;
		border: .1rem solid var(--color-nl-input-border);
		width: 63rem;
	}
	.premijereOperaBoxLinksContainer, .premijereDramaBoxLinksContainer, .premijereBaletBoxLinksContainer {
		display:flex;
		gap: .6rem;
		margin-top:1rem;
	}
	.izvedbeBoxContainer {
		margin: 0 auto;
		width: 89rem;
		display: flex;
		flex-wrap:nowrap;
		box-sizing: border-box;
		position:relative;
		gap:1rem;
	}
	.izvedbeBox {
		flex-grow: 1;
		position: relative;
		flex-basis: 33.33%;
		aspect-ratio: 3 / 5;
		box-sizing: border-box;
		color: var(--white);
	}
	.izvedbeBoxOperaLabel, .izvedbeBoxDramaLabel, .izvedbeBoxBaletLabel {
		position: absolute;
		left: 3.2rem;
		top: 0;
	}
	.izvedbeBoxOperaDate {
		width: 10.6rem;
		display:block;
		background: var(--color-opera);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxOperaTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-opera);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	.izvedbeBoxDramaDate {
		width: 10.6rem;
		display:block;
		background: var(--color-drama);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxDramaTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-drama);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	.izvedbeBoxTitle > .text48, .premijereBoxTitle > .text48 {
		font-size: 4.2rem;
		line-height: 4.2rem;
	}
	.premijereBoxTitle, .izvedbeBoxTitle {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 3.2rem;
		bottom: 3.2rem;
		gap: 1rem;
		width: calc(100% - 7rem);
	}
	.premijereOperaBoxContainer, .premijereDramaBoxContainer, .premijereBaletBoxContainer, .rasporedSelectContainer {
		margin: 0 auto;
		width: 89rem;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		box-sizing: border-box;
		gap:1rem;
		position:relative;
	}
	.premijereOperaBox, .premijereDramaBox, .premijereBaletBox {
		position: relative;
		flex-basis: 33.33%;
		aspect-ratio: 1 / 1.3;
		box-sizing: border-box;
		color: var(--white);
		cursor: pointer;
		max-width: 33%;
	}
	.detailMainContentContainer {
		margin: 0 auto;
		width: 89rem;
		display:flex;
		flex-wrap: nowrap;
		position: relative;
		box-sizing: border-box;
		gap: 8rem;
		justify-content: space-around;
		padding:6rem 0;
	}
	.detailLeftContentContainer {
		width: calc(66.666666% - 8rem);
	}
	.detailRightContentContainer {
		width: calc(100% - 66.666666% - 8rem);
		flex-grow: 1;
	}
	.detailGalleryContainer {
		width: 100%;
		display:flex;
		flex-flow: wrap;
	}
	.detailGalleryImage {
		width:50%;
		height:auto;
	}
	.detailTitleContainer {
		width: 100%;
		padding: 5rem 0 0 0;
		display:flex;
	}
	.detailTitleLeft {
		background:var(--white);
		flex-grow: 1;
	}
	.detailTitleMain {
		width: 89rem;
		flex-basis: 89rem;
	}
	.detailTitleRight {
		background:var(--white);
		flex-grow: 1;
	}
	.detailTitleContentContainer {
		width: 100%;
		background: var(--white);
	}
	.detailTitleContent {
		position: relative;
		width: 100%;
		background: var(--white);
		display:flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-content: flex-end;
		margin: 0 0 2rem 0;
		padding: 5rem 0 0 0;
	}
	.detailTimeline {
		width: 100%;
		display: flex;
		gap:2rem;
	}
	.rasporedSelectBox {
		position: relative;
		flex-basis: 33.33%;
		box-sizing: border-box;
	}
	.rasporedContentContainer {
		margin: 0 auto;
		width: 89rem;
		box-sizing: border-box;
		position:relative;
	}
	.rasporedMainContentContainer {
		margin: 0 auto;
		width: 89rem;
		display:flex;
		flex-wrap:nowrap;
		position: relative;
		box-sizing: border-box;
		gap: 4rem;
		justify-content: space-around;
	}
	.rasporedMainContentLeft {
		width: 33.3333%;
		display: flex;
		gap: 1.4rem;
		justify-content: flex-start;
	}
	.rasporedMainContentMid {
		width: calc(100% - 20rem - 33.3333%);
	}
	.rasporedMainContentRight {
		width: 20rem;
		position:relative;
	}
	.item {
    		width: calc(33% - 0px);
	}
	.menuHiddenItemLogo {
		display: none;
	}
	.menuHiddenItem {
		width:20%;
	}
	.menuHiddenItemMobile {
		width:50%;
	}
	.menuLogoHidden {
		display: none;
	}
	.menuHiddenContentContainer {
		display: none;
	}
	.heroDefaultLinksContainer {
	        position:absolute;
	        display: flex;
		flex-wrap:wrap;
	        left:0;
	        width:100%;
	        gap:3rem;
	        justify-content: center;
	}
	
	.heroDefaultLinks {
	        font-size: 1.6rem;
	        line-height: 2.6rem;
	        font-weight: 700;
	        color: var(--white);
	        transition: color, 250ms ease-in-out;
		white-space: nowrap;
	}
	
	.heroDefaultLinksActive {
	        font-size: 1.6rem;
	        line-height: 2.6rem;
	        font-weight: 700;
	        color:var(--color-link-hover);
	        transition: color, 250ms ease-in-out;
		white-space: nowrap;
	}
	.heroOperaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap: 3rem;
		justify-content: center;
	}
	.heroOperaLinks {
		font-size: 1.6rem;
		line-height: 2.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroOperaLinksActive {
		font-size: 1.6rem;
		line-height: 2.6rem;
		font-weight: 700;
		color:var(--color-opera);
		transition: color, 250ms ease-in-out;
	}

	.heroDramaLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap:3rem;
		justify-content: center;
	}
	.heroDramaLinks {
		font-size: 1.6rem;
		line-height: 2.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroDramaLinksActive {
		font-size: 1.6rem;
		line-height: 2.6rem;
		font-weight: 700;
		color:var(--color-drama);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinksContainer {
		position:absolute;
		display: flex;
		flex-wrap:wrap;
		left:0;
		width:100%;
		gap:3rem;
		justify-content: center;
	}
	.heroBaletLinks {
		font-size: 1.6rem;
		line-height: 2.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinksActive {
		font-size: 1.6rem;
		line-height: 2.6rem;
		font-weight: 700;
		color:var(--color-balet);
		transition: color, 250ms ease-in-out;
	}

	.accessibilityIcon {
		display: none;
	}
}


/* 1260 */

@media (min-width: 1260px) {
	.mobile-break {
		display: none;
	}

	.menuMid {
		width: 106rem;
		display: flex;
		justify-content: space-between;
		height: 6rem;
	}
	.menuMidOposite {
		display: none;
	}
	.heroContent {
		width: 106rem;
		position: relative;
		margin: 0 0 10rem 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.izvContentContainer {
		width: 116rem;
		overflow-x: hidden;
		position: relative;
		height: 4rem;
		background: var(--color-izvedbe-content-container);
		display: flex;
		align-items: center;
		text-overflow: clip;
		white-space: nowrap;
	}
	.newsTitleContainer {
		margin: 0 auto;
		width: 116rem;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.newsBoxContainer {
		margin: 0 auto;
		width: 116rem;
		display: flex;
		flex-wrap: wrap;
		gap: 4rem;
	}
	.newsTitle {
		font-family: 'Lalezar', cursive;
		font-size: 3.6rem;
		line-height: 3.6rem;
		cursor: pointer;
	}
	.novostiBoxContainer {
		margin: 0 auto;
		width: 116rem;
		display: flex;
		flex-wrap: wrap;
		gap: 4rem;
	}
	.novostiBox {
		width: 22.4%;
		cursor: pointer;
		transition: color, 250ms ease-in-out;
	}
	.novostiTitle {
		font-family: 'Lalezar', cursive;
		font-size: 2.8rem;
		line-height: 2.8rem;
		cursor: pointer;
	}
	.premijereTitleContainer, .izvedbeTitleContainer, .novostiTitleContainer, .rasporedTitleContainer {
		margin: 0 auto;
		width: 116rem;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.premijereBoxOpera, .premijereBoxDrama, .premijereBoxBalet {
		position: relative;
		flex-basis: 16.66%;
		cursor: pointer;
		aspect-ratio: 1 / 1;
		box-sizing: border-box;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.viseContainer {
		width: 116rem;
		margin:0 auto;
		padding: 0 0 6rem 0;
	}
	.viseContentContainer {
		width:116rem;
		height: 54rem;
		display:flex;
	}
	.viseLogo {
		position: absolute;
		bottom: 0;
		left: 7rem;
		bottom: 7rem;
	}
	.viseLink {
		font-size: 4.2rem;
		line-height: 4.2rem;
		color: var(--black);
		font-family: 'Lalezar', cursive;
		transition: color, 250ms ease-in-out;
		cursor:pointer;
	}
	.viseLink:hover {
		color: var(--color-link-hover);
	}
	.newsletterContentContainer {
		margin: 0 auto;
		width: 116rem;
		box-sizing: border-box;
		display:flex;
	}
	.newsletterContentLeft {
		width: 35rem;
	}
	.newsletterInputContainer {
		display: flex;
		gap: 6rem;
	}
	.newsletterInput {
		height: 6rem;
		padding: 0 2rem;
		font-size: 2rem;
		font-weight: 400;
		border: .1rem solid var(--color-nl-input-border);
		width: 63rem;
	}
	.pretplataTitleContainer {
		margin: 0 auto;
		width: 116rem;
		box-sizing: border-box;
	}
	.pretplataContentContainer {
		margin: 0 auto;
		width: 116rem;
		display:flex;
		gap: 4rem;
	}
	.pretplataIconsContainer {
		margin: 0 auto;
		width: 116rem;
		display:flex;
		gap: 15rem;
		padding:0 0 0 20rem;
	}
	.pretplataTextContainer {
		width:76%; margin: 0 0 0 23rem;
	}
	.footerContentContainer {
		margin:0 auto;
		width:116rem;
		display: flex;
		justify-content: space-between;
		gap: 4rem;
	}
	.premijereOperaBoxLinksContainer, .premijereDramaBoxLinksContainer, .premijereBaletBoxLinksContainer {
		display:flex;
		gap: .6rem;
		margin-top:1rem;
	}
	.izvedbeBoxContainer {
		margin: 0 auto;
		width: 116rem;
		display: flex;
		box-sizing: border-box;
		position:relative;
		gap:4rem;
	}
	.izvedbeBox {
		flex-grow: 1;
		position: relative;
		flex-basis: 33.33%;
		aspect-ratio: 4 / 5;
		box-sizing: border-box;
		color: var(--white);
	}
	.izvedbeBoxOperaLabel, .izvedbeBoxDramaLabel, .izvedbeBoxBaletLabel {
		position: absolute;
		left: 4rem;
		top: 0;
	}
	.izvedbeBoxOperaDate {
		width: 10.6rem;
		display:block;
		background: var(--color-opera);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxOperaTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-opera);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	.izvedbeBoxDramaDate {
		width: 10.6rem;
		display:block;
		background: var(--color-drama);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxDramaTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-drama);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	.izvedbeBoxTitle > .text48 {
		font-size: 4.2rem;
		line-height: 4.2rem;
	}
	.premijereBoxTitle, .izvedbeBoxTitle {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 4rem;
		bottom: 4rem;
		gap: 1rem;
		width: calc(100% - 7rem);
	}
	.premijereOperaBoxContainer, .premijereDramaBoxContainer, .premijereBaletBoxContainer, .rasporedSelectContainer {
		margin: 0 auto;
		width: 116rem;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		gap:4rem;
		position:relative;
	}
	.premijereOperaBox, .premijereDramaBox, .premijereBaletBox {
		position: relative;
		flex-basis: 33.33%;
		aspect-ratio: 1 / 1;
		box-sizing: border-box;
		color: var(--white);
		cursor: pointer;
		max-width: 33%;
	}
	.detailMainContentContainer {
		margin: 0 auto;
		width: 116rem;
		display:flex;
		flex-wrap: nowrap;
		position: relative;
		box-sizing: border-box;
		gap: 8rem;
		justify-content: space-around;
		padding:6rem 0;
	}
	.detailLeftContentContainer {
		width: calc(66.666666% - 8rem);
	}
	.detailRightContentContainer {
		width: calc(100% - 66.666666% - 8rem);
		flex-grow: 1;
	}
	.detailGalleryContainer {
		width: 100%;
		display:flex;
		flex-flow: wrap;
	}
	.detailGalleryImage {
		width:33.3333%;
		height:auto;
	}
	.detailTitleContainer {
		width: 100%;
		padding: 5rem 0 0 0;
		display:flex;
	}
	.detailTitleLeft {
		background:var(--white);
		flex-grow: 1;
	}
	.detailTitleMain {
		width: 116rem;
		flex-basis: 116rem;
	}
	.detailTitleRight {
		background: none;
		flex-grow: 1;
	}
	.detailTitleContentContainer {
		width: 66.666666%;
		background: var(--white);
	}
	.detailTitleContent {
		position: relative;
		width: calc(100% - 8rem);
		background: var(--white);
		display:flex;
		justify-content: space-between;
		align-content: flex-end;
		margin: 0 0 2rem 0;
		padding: 5rem 0 0 0;
	}
	.detailTimeline {
		width: calc(100% - 8rem);
		display: flex;
		gap:2rem;
	}
	.rasporedContentContainer {
		margin: 0 auto;
		width: 116rem;
		box-sizing: border-box;
		position:relative;
	}
	.rasporedMainContentContainer {
		margin: 0 auto;
		width: 116rem;
		display:flex;
		position: relative;
		box-sizing: border-box;
		gap: 4rem;
		justify-content: space-around;
	}
	.rasporedMainContentLeft {
		width: 33.3333%;
		display: flex;
		gap: 1.4rem;
		justify-content: flex-start;
	}
	.rasporedMainContentMid {
		width: calc(100% - 20rem - 33.3333%);
	}
	.rasporedMainContentRight {
		width: 20rem;
		position:relative;
	}
	.item {
    		width: calc(25% - 0px);
	}
	.menuHiddenItemLogo {
		display: block;
	}
	.menuHiddenContentContainer {
		display: flex;
	}
	.menuHiddenContentContainerMobile {
		display: none;
	}

	.accessibilityIcon {
		display: none;
	}
}

/* MAX SIZE */

@media (min-width: 1590px) {
	.mobile-break {
		display: none;
	}

	/* Menu */
	.menuContainer {
		width: 100%;
		height: 6rem;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		background: var(--white);
	}

	.menuLogoHidden {
		display: none;
		position: fixed;
		z-index: 1001;
		top: 0;
		left: 50%;
		height: 5rem;
		transform: translate(-50%, 10%);
		animation: slideDown 1s ease-out forwards;
	}

	@keyframes slideDown {
	    0% {
	        top: 0;
	        transform: translate(-50%, 0%);
	    }
	    100% {
	        top: 0;
	        transform: translate(-50%, 10%);
	    }
	}

	.menuLeft {
		position: absolute;
		left: 0;
		padding: 0 0 0 2.5rem;
	}
	.menuMid {
		width: 139rem;
	}
	.menuMidOposite {
		display: none;
	}
	.menuMidLeft, .menuMidRight {
		display: flex;
		align-items: flex-end;
		height: 6rem;
		gap: 2rem;
	}
	.menuMidOposite {
		display: none;
	}
	.menuMidRight {
		gap: 1rem;
	}
	.menuRight {
		margin: 0 2.5rem 0 0;
		display: flex;
		align-items: flex-end;
		height: 6rem;
		position: absolute;
		right:0;
	}
	.linkMenu, .linkMenuOpera, .linkMenuDrama, .linkMenuBalet {
		font-size: 1.2rem;
		font-weight: 500;
		color: var(--black);
		display:inline-block;
		position:relative;
	}
	.linkMenu:after {
		cursor: pointer;
		display:block;
		content:'';
		padding:0 0 1.5rem 0;
		border-bottom: .8rem solid var(--color-link-hover);
		transform: scaleX(0);
		transition: transform 250ms ease-in-out;
	}
	.linkMenuOpera:after {
		cursor: pointer;
		display:block;
		content:'';
		padding:0 0 1.5rem 0;
		border-bottom: .8rem solid var(--color-opera);
		transform: scaleX(0);
		transition: transform 250ms ease-in-out;
	}
	.linkMenuOperaActive {
		font-size: 1.2rem;
		font-weight: 500;
		padding:0 0 1.5rem 0;
		color: var(--color-opera);
		display:inline-block;
		position:relative;
		border-bottom: .8rem solid var(--color-opera);
	}
	.linkMenuDrama:after {
		cursor: pointer;
		display:block;
		content:'';
		padding:0 0 1.5rem 0;
		border-bottom: .8rem solid var(--color-drama);
		transform: scaleX(0);
		transition: transform 250ms ease-in-out;
	}
	.linkMenuDramaActive {
		font-size: 1.2rem;
		font-weight: 500;
		padding:0 0 1.5rem 0;
		color: var(--color-drama);
		display:inline-block;
		position:relative;
		border-bottom: .8rem solid var(--color-drama);
	}
	.linkMenuBalet:after {
		cursor: pointer;
		display:block;
		content:'';
		padding:0 0 1.5rem 0;
		border-bottom: .8rem solid var(--color-balet);
		transform: scaleX(0);
		transition: transform 250ms ease-in-out;
	}
	.linkMenuBaletActive {
		font-size: 1.2rem;
		font-weight: 500;
		padding:0 0 1.5rem 0;
		color: var(--color-balet);
		display:inline-block;
		position:relative;
		border-bottom: .8rem solid var(--color-balet);
	}
	.linkMenu:hover:after, .linkMenuOpera:hover:after, .linkMenuDrama:hover:after, .linkMenuBalet:hover:after {
		transform: scaleX(1);
	}
	.linkMenu.fromLeft:after, .linkMenuOpera.fromLeft:after, .linkMenuDrama.fromLeft:after, .linkMenuBalet.fromLeft:after {
		transform-origin:  0% 50%;
	}
	.linkMenuActive {
		font-size: 1.2rem;
		font-weight: 500;
		display:inline-block;
		padding:0 0 1.5rem 0;
		position:relative;
		color: var(--color-link-hover);
		border-bottom: 8px solid var(--color-link-hover);
	}
	.linkMenuDivider {
		width: .1rem;
		height: 3.4rem;
		margin: 0 0 1.3rem 0;
		background: var(--color-menu-divider);
	}
	.linkMenuBTN {
		font-size: 1.2rem;
		font-weight: 500;
		color: var(--black);
		padding: .7rem 1.2rem;
		margin: 0 0 1.5rem 0;
		border: .1rem solid var(--color-link-menu-btn-border);
		box-sizing: border-box;
		transition: background, color, border, 250ms ease-in-out;
		cursor:pointer;
	}
	.linkMenuBTN:hover {
		border: .1rem solid var(--color-link-hover);
		background: var(--color-link-hover);
		color: var(--white);
	}
	.linkMenuBTNActive {
		font-size: 1.2rem;
		font-weight: 500;
		color: var(--white);
		padding: .7rem 1.2rem;
		margin: 0 0 1.5rem 0;
		border: .1rem solid var(--color-link-hover);
		background: var(--color-link-hover);
		box-sizing: border-box;
		cursor:pointer;
	}
	/* Hero */
	.heroContainer {
		width: 100%;
		height: 75rem;
		position: relative;
		display: flex;
		justify-content: center;
	}
	.heroTypeContainer {
		width: 100%;
		height: 48rem;
		position: relative;
		display: flex;
		justify-content: center;
	}
	.heroRadioContainer {
		position: absolute;
		bottom: 0;
		left: calc(50% - 20rem);
		width: 400px;
		height: 7.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1.5rem;
	}
	.heroRadioOff {
		box-sizing: border-box;
		width: 1.6rem;
		height: 1.6rem;
		border-radius: 50%;
		background: var(--white);
		border: none;
	}
	.heroRadioOn {
		box-sizing: border-box;
		width: 1.6rem;
		height: 1.6rem;
		border-radius: 50%;
		background: var(--red);
		border: .4rem solid var(--white);
	}
	.heroContentContainer {
		width: 100%;
		height: 75rem;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		position: relative;
	}
	.heroContent {
		width: 139rem;
	}
	.heroContentText {
		position: relative;
	}
	.heroTextAuthor {
		font-size: 2.6rem;
		margin: 0 0 1rem 0;
	}
	.heroTextTitle {
		font-family: 'Lalezar', cursive;
		font-size: 6rem;
		line-height: 6.5rem;
		margin: 0 0 3rem 0;
	}
	.heroTextDate {
		font-family: 'Lalezar', cursive;
		font-size: 3.2rem;
		line-height: 3rem;
	}
	.heroTextYear {
		font-size: 1.4rem;
	}
	.heroTextType {
		font-size: 1.6rem;
		letter-spacing: .5rem;
		position: absolute;
		top: -4.5rem;
		left: 0;
	}
	.heroIconType {
		position: absolute;
		top: -4.7rem;
		left: -4rem;
	}
	.heroBTNContainer {
		display: flex;
		gap: .6rem;
	}
	.heroOperaBTN {
		font-size: 1.4rem;
		font-weight: 600;
		color: var(--white);
		padding: 1rem 1.6rem;
		background: var(--color-opera);
		border: .1rem solid var(--color-opera);
		box-sizing: border-box;
		transition: background, color, border, 250ms ease-in-out;
		cursor:pointer;
	}
	.heroOperaBTN:hover {
		background: var(--white);
		color: var(--color-opera);
		border: .1rem solid var(--white);
	}
	.heroDramaBTN {
		font-size: 1.4rem;
		font-weight: 600;
		color: var(--white);
		padding: 1rem 1.6rem;
		background: var(--color-drama);
		border: .1rem solid var(--color-drama);
		box-sizing: border-box;
		transition: background, color, border, 250ms ease-in-out;
		cursor:pointer;
	}
	.heroDramaBTN:hover {
		background: var(--white);
		color: var(--color-drama);
		border: .1rem solid var(--white);
	}
	.heroBaletBTN {
		font-size: 1.4rem;
		font-weight: 600;
		color: var(--white);
		padding: 1rem 1.6rem;
		background: var(--color-balet);
		border: .1rem solid var(--color-balet);
		box-sizing: border-box;
		transition: background, color, border, 250ms ease-in-out;
		cursor:pointer;
	}
	.heroBaletBTN:hover {
		background: var(--white);
		color: var(--color-balet);
		border: .1rem solid var(--white);
	}
	.heroAnsBTN {
		font-size: 1.4rem;
		font-weight: 600;
		color: var(--white);
		padding: 1rem 1.6rem;
		background: none;
		border: .1rem solid var(--white);
		box-sizing: border-box;
		transition: background, color, 250ms ease-in-out;
		cursor:pointer;
	}
	.heroAnsBTN:hover {
		background: var(--white);
		color: var(--black);
	}
	.premijereDramaBox:hover .heroAnsBTN {
		background: var(--white);
		color: var(--black);
	}
	.premijereOperaBox:hover .heroAnsBTN {
		background: var(--white);
		color: var(--black);
	}
	.premijereBaletBox:hover .heroAnsBTN {
		background: var(--white);
		color: var(--black);
	}
	.heroContentOpera {
		position: absolute;
		width: 100%;
		height: calc(100% - .7rem);
		right: calc(100% + 3rem);
		bottom: 0;
		/*background: rgba(255,0,78,.10);*/
		background: rgba(220, 160, 30, 0.10);
		border-right: .1rem solid var(--color-opera);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
	/* Calendar */
	.calendarContainer {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.calendarContent {
		position: relative;
		box-sizing: border-box;
    		margin: 0 30px;
	}
	.calendarContentContainer {
		display: flex;
		gap: .2rem;
		position: relative;
		box-sizing: border-box;
	}
	.calendarBox {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		border: .1rem solid var(--color-calendar-border);
		width: 5rem;
		height: 5rem;
		color: var(--black);
	}
	.calendarBoxSunday {
		color: var(--red);
	}
	.calendarBoxMonth {
		border: none;
		background: var(--gold);
		color: var(--white);
	}
	.calendarBoxOpera::before {
		border: .1rem solid var(--color-opera);
		background:url(../images/cal_opera.svg) bottom right no-repeat;
		background-size: 1.4rem 1.4rem;
		cursor: pointer;
		transform: rotate(90deg);
	}
	.calendarBoxDrama::before {
		border: .1rem solid var(--color-drama);
		background:url(../images/cal_drama.svg) bottom right no-repeat;	
		background-size: 1.4rem 1.4rem;
		cursor: pointer;
	}
	.calendarBoxBalet::before {
		border: .1rem solid var(--color-balet);
		background:url(../images/cal_balet.svg) bottom right no-repeat;	
		background-size: 1.4rem 1.4rem;
		cursor: pointer;
	}
	.calendarBoxOperaStar {
		background:url(../images/cal_star.svg) left top no-repeat, url(../images/cal_opera.svg) bottom right no-repeat;	
		background-size: 1.3rem 1.3rem;
	}
	.calendarBoxDramaStar {
		background:url(../images/cal_star.svg) left top no-repeat, url(../images/cal_drama.svg) bottom right no-repeat;	
		background-size: 1.3rem 1.3rem;
	}
	.calendarBoxBaletStar {
		background:url(../images/cal_star.svg) left top no-repeat, url(../images/cal_balet.svg) bottom right no-repeat;	
		background-size: 1.3rem 1.3rem;
	}
	.calendarArrowLeft {
		position: absolute;
		left: -2.4rem;
		top: 1.1rem;
		width: 1.4rem;
		height: 2.8rem;
		background-image: url(../images/cal_arrowleft.svg);
		background-size: cover;
		cursor: pointer;
	}
	.calendarArrowRight {
		position: absolute;
		right: -2.4rem;
		top: 1.1rem;
		width: 1.4rem;
		height: 2.8rem;
		background-image: url(../images/cal_arrowright.svg);
		background-size: cover;
		cursor: pointer;
	}
	.calendarDescription {
		position: absolute;
		display: flex;
		gap: 2rem;
	}
	.calendarDescriptionElement {
		display: flex;
		align-items: center;
		gap: .5rem;
	}
	/* Izvanredne vijesti */
	.izvContainer {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.izvContentContainer {
		width: 139rem;
	}
	.izvContentTitle {
		position: absolute;
		left: 0;
		top: 0;
		height: 4rem;
		display: flex;
		align-items: center;
		padding: 0 2rem;
		background: var(--color-izvedbe-title);
		letter-spacing: .1rem;
	}
	.izvContentFade {
		position: absolute;
		right: 0;
		top: 0;
		height: 4rem;
		width: 23.8rem;
		background: url(../images/izv_gradient.png) right;
		background-repeat: no-repeat;
	}
	/* Novosti */
	.newsContainer {
		width: 100%;
		padding: 5rem 0 8rem 0;
		background: var(--color-news-container);
	}
	.newsTitleContainer {
		width: 139rem;
	}
	.sectionMainTitle {
		font-family: 'Lalezar', cursive;
		font-size: 3.2rem;
		color: var(--black);
		height: 4rem;
		line-height: 2.3rem;
		display: inline-block;
	}
	.sectionMainTitle:after {
		display: block;
		content:'';
		border-bottom: .1rem solid var(--black);
		padding: 0 0 1.6rem 0;
		width: 5rem;
	}
	.sectionAllBTN {
		display: flex;
		align-items: center;
		padding: 0 2rem;
		font-size: 1.4rem;
		font-weight: 600;
		background: none;
		border: .1rem solid var(--black);
		transition: background, color, 250ms ease-in-out;
		line-height: 0;
		cursor:pointer;
		color: var(--black);
		height: 3.8rem;
	}
	.sectionAllBTN:hover {
		background: var(--black);
		color: var(--white);
	}
	.newsBoxContainer {
		width: 1390px;
	}
	.newsBox {
		flex-grow: 1;
		flex-basis: 30%;
		cursor: pointer;
		transition: color, 250ms ease-in-out;
	}
	.newsBox:link, .newsBox:visited {
		color: var(--black);
	}
	.newsBox:hover {
		color: var(--color-link-hover);
	}
	/* Premijere */
	.premijereContainer {
		width: 100%;
		padding: 5rem 0 6rem 0;
	}
	.premijereTitleContainer, .izvedbeTitleContainer, .novostiTitleContainer, .rasporedTitleContainer {
		width: 139rem;
	}
	.premijereBoxContainer {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.premijereBoxOpera, .premijereBoxDrama, .premijereBoxBalet {
		position: relative;
		flex-basis: 16.66%;
		cursor: pointer;
		aspect-ratio: 1 / 1;
		box-sizing: border-box;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.premijereBoxOpera:hover {
		color:var(--color-opera);
	}
	.premijereBoxDrama:hover {
		color:var(--color-drama);
	}
	.premijereBoxBalet:hover {
		color:var(--color-balet);
	}
	.premijereBoxOperaLabel {
		position: absolute;
		gap: 1rem;
		left: 4rem;
		top: 0;
		display: flex;
		background: var(--color-opera);
		color: var(--white);
		align-items: center;
		font-size: 1.4rem;
		height: 4rem;
		padding: 0 1rem;
	}
	.premijereBoxDramaLabel {
		position: absolute;
		gap: 1rem;
		left: 4rem;
		top: 0;
		display: flex;
		background: var(--color-drama);
		color: var(--white);
		align-items: center;
		font-size: 1.4rem;
		height: 4rem;
		padding: 0 1rem;
	}
	.premijereBoxBaletLabel {
		position: absolute;
		gap: 1rem;
		left: 4rem;
		top: 0;
		display: flex;
		background: var(--color-balet);
		color: var(--white);
		align-items: center;
		font-size: 1.4rem;
		height: 4rem;
		padding: 0 1rem;
	}
	.premijereBoxTitle, .izvedbeBoxTitle {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 4rem;
		bottom: 4rem;
		gap: 1rem;
		width: calc(100% - 7rem);
	}
	/* Više... */
	.viseContainer {
		width: 139rem;
		margin:0 auto;
		padding: 0 0 6rem 0;
	}
	.viseContentContainer {
		width:139rem;
		height:54rem;
		display:flex;
	}
	.viseRightDivider {
		height: .1rem;
		background: var(--black);
		width: 5rem;
		margin:1.5rem 0 2rem 0;
	}
	/* Pretplata */
	.pretplataContainer {
		width: 100%;
		padding: 5rem 0 8rem 0;
		#background: var(--color-news-container);
		background: var(--light-grey);
	}
	.pretplataTitleContainer {
		width: 139rem;
	}
	.pretplataContentContainer {
		width: 139rem;
	}
	.pretplataIconsContainer {
		width: 139rem;
	}
	.pretplataBTN {
		display: flex;
		align-items: center;
		font-size: 2rem;
		font-weight: 600;
		background: var(--color-link-hover);
		border: .1rem solid var(--color-link-hover);
		transition: background, border, color, 250ms ease-in-out;
		line-height: 0;
		cursor:pointer;
		color: var(--white);
		height: 7rem;
		width: 20rem;
		justify-content: center;
	}
	.pretplataBTN:hover {
		border: .1rem solid var(--color-link-hover);
		background: var(--white);
		color: var(--color-link-hover);
	}
	.pretplataTextContainer {
		width:50%; margin: 0 0 0 35rem;
	}
	/* Footer */
	.footerContainer {
		width: 100%;
		padding: 5rem 0 8rem 0;
		background: var(--black);
	}
	.footerContentContainer {
		width:139rem;
	}
	.footerItem {
		width:auto;
		color: var(--white);
	}
	.footerDivider {
		width: 5rem;
		height: .1rem;
		margin: 1.7rem 0;
		background: var(--white);
	}
	/* menuHiddenContainer */
	.menuHiddenContainer {
		width: 100%;
		height: 100%;
		padding: 5rem 0 8rem 0;
		background: var(--white);
		position: fixed;
		z-index: 1001;
		display: none;
	}
	.menuHiddenContentContainer {
		width:139rem;
	}
	.menuHiddenItem {
		width:auto;
		color: var(--black);
	}
	.menuHiddenItemMobile {
		width:auto;
		color: var(--black);
	}
	.menuHiddenDivider {
		width: 5rem;
		height: .2rem;
		margin: 1.7rem 0;
		background: var(--color-link-hover);
	}
	/* Opera Content */
	.heroOperaContentContainer, .heroDramaContentContainer, .heroBaletContentContainer,  .heroDefaultContentContainer {
		width: 100%;
		height: 48rem;
		display: flex;
		justify-content: center;
		position:relative;
	}
	.heroOperaBG {
		width:20rem;
		height:37.5rem;
		background: var(--color-opera);
		display:flex;
		flex-direction: column;
		text-align: center;
	}
	.heroOperaLinksContainer {
		position:absolute;
		display: flex;
		left:0;
		width:100%;
		gap:3rem;
		justify-content: center;
	}
	.heroOperaLinks {
		font-size: 1.6rem;
		line-height: 2.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroOperaLinks:hover {
		cursor:pointer;
		color:var(--color-opera);
	}
	.premijereOperaBoxContainer, .premijereDramaBoxContainer, .premijereBaletBoxContainer, .rasporedSelectContainer {
		margin: 0 auto;
		width: 139rem;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		gap:4rem;
		position:relative;
	}
	.premijereOperaBox, .premijereDramaBox, .premijereBaletBox {
		position: relative;
		flex-basis: 33.33%;
		aspect-ratio: 1 / 1;
		box-sizing: border-box;
		color: var(--white);
		cursor: pointer;
		max-width: 33%;
	}
	.premijereOperaBoxLinksContainer, .premijereDramaBoxLinksContainer, .premijereBaletBoxLinksContainer {
		display:flex;
		gap: .6rem;
		margin-top:1rem;
	}
	.izvedbeContainer {
		width: 100%;
		padding: 5rem 0 6rem 0;
		background: var(--color-izvedbe-container);
		position: relative;
	}
	.izvedbeBoxContainer {
		margin: 0 auto;
		width: 139rem;
		display: flex;
		box-sizing: border-box;
		position:relative;
		gap:4rem;
	}
	.izvedbeBox {
		position: relative;
		flex-basis: 33.33%;
		aspect-ratio: 4 / 5;
		box-sizing: border-box;
		color: var(--white);
	}
	.izvedbeBoxOperaLabel, .izvedbeBoxDramaLabel, .izvedbeBoxBaletLabel {
		position: absolute;
		left: 4rem;
		top: 0;
	}
	.izvedbeBoxOperaDate {
		width: 10.6rem;
		display:block;
		background: var(--color-opera);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxOperaTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-opera);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	.izvedbeBoxDramaDate {
		width: 10.6rem;
		display:block;
		background: var(--color-drama);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxDramaTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-drama);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	.izvedbeBoxTitle > .text48 {
		font-size: 4.8rem;
		line-height: 4.8rem;
	}
	.izvedbeNavigationContainer {
		width: 139rem;
		margin: 0 auto;
		height: 0px;
		position: relative;
	}
	.izvedbeArrowLeft {
		position: absolute;
		left: -4.4rem;
		top: 25rem;
		width: 1.4rem;
		height: 2.8rem;
		background-image: url(../images/cal_arrowleft.svg);
		background-size: cover;
		cursor: pointer;
	}
	.izvedbeArrowRight {
		position: absolute;
		right: -4.4rem;
		top: 25rem;
		width: 1.4rem;
		height: 2.8rem;
		background-image: url(../images/cal_arrowright.svg);
		background-size: cover;
		cursor: pointer;
	}
	/* Novosti */
	.novostiContainer {
		width: 100%;
		padding: 5rem 0 6rem 0;
	}
	.novostiBoxContainer {
		margin: 0 auto;
		width: 139rem;
		display: flex;
		box-sizing: border-box;
		position:relative;
		gap:4rem;
	}
	.novostiBox {
		width: 22.84%;
		cursor: pointer;
		transition: color, 250ms ease-in-out;
	}
	.novostiTitle {
		font-family: 'Lalezar', cursive;
		font-size: 2.8rem;
		line-height: 2.8rem;
		cursor: pointer;
	}
	.novostiBox:link, .novostiBox:visited {
		color: var(--black);
	}
	.novostiBox:hover {
		color: var(--color-link-hover);
	}
	/* Newsletter */
	.newsletterContainer {
		width: 100%;
		padding: 5rem 0 8rem 0;
		background: var(--color-newsletter);
	}
	.newsletterContentContainer {
		margin: 0 auto;
		width: 139rem;
		box-sizing: border-box;
		display:flex;
	}
	.newsletterContentLeft {
		width: 35rem;
	}
	.newsletterInputContainer {
		display: flex;
		gap: 6rem;
	}
	.newsletterInput {
		height: 6rem;
		padding: 0 2rem;
		font-size: 2rem;
		font-weight: 400;
		border: .1rem solid var(--color-nl-input-border);
		width: 63rem;
	}
	.newsletterCheckbox {
		margin:0 1rem 0 0;
	}
	.newsletterBTN {
		display: flex;
		align-items: center;
		font-size: 2rem;
		font-weight: 600;
		background: var(--white);
		border: .1rem solid var(--color-link-hover);
		transition: background, border, color, 250ms ease-in-out;
		line-height: 0;
		cursor:pointer;
		color: var(--color-link-hover);
		height: 6rem;
		width: 20rem;
		justify-content: center;
	}
	.newsletterBTN:hover {
		border: .1rem solid var(--color-link-hover);
		background: var(--color-link-hover);
		color: var(--white);
	}
	/* Drama */
	.heroDramaBG {
		width:20rem;
		height:37.5rem;
		background: var(--color-drama);
		display:flex;
		flex-direction: column;
		text-align: center;
	}
	.heroDramaLinksContainer {
		position:absolute;
		display: flex;
		left:0;
		width:100%;
		gap:3rem;
		justify-content: center;
	}
	.heroDramaLinks {
		font-size: 1.6rem;
		line-height: 2.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroDramaLinks:hover {
		cursor:pointer;
		color:var(--color-drama);
	}
	.izvedbeBoxDramaDate {
		width: 10.6rem;
		display:block;
		background: var(--color-drama);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxDramaTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-drama);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	/* Balet */
	.heroBaletBG {
		width:20rem;
		height:37.5rem;
		background: var(--color-balet);
		display:flex;
		flex-direction: column;
		text-align: center;
	}
	.heroBaletLinksContainer {
		position:absolute;
		display: flex;
		left:0;
		width:100%;
		gap:3rem;
		justify-content: center;
	}
	.heroBaletLinks {
		font-size: 1.6rem;
		line-height: 2.6rem;
		font-weight: 700;
		color: var(--white);
		transition: color, 250ms ease-in-out;
	}
	.heroBaletLinks:hover {
		cursor:pointer;
		color:var(--color-balet);
	}
	.izvedbeBoxBaletDate {
		width: 10.6rem;
		display:block;
		background: var(--color-balet);
		color: var(--white);
		text-align: center;
		padding: 1.2rem 0;
	}
	.izvedbeBoxBaletTime {
		width: 10.6rem;
		display:block;
		background: var(--white);
		color: var(--color-balet);
		text-align: center;
		padding: 0.5rem 0 0 0;
	}
	/* Raspored */
	.heroNarrowContainer {
		width: 100%;
		height: 37.5rem;
		position: relative;
		display: flex;
		justify-content: center;
	}
	.heroGoldBG {
		width:20rem;
		height:20rem;
		background: var(--color-link-hover);
		display:flex;
		flex-direction: column;
		text-align: center;
	}
	.rasporedContainer {
		width: 100%;
		padding: 5rem 0 0 0;
	}
	.rasporedSelectBox {
		position: relative;
		flex-basis: 33.33%;
		box-sizing: border-box;
	}
	.rasporedSelect {
		font-size: 1.4rem;
		font-weight: 700;
		padding: .8rem 1.2rem;
		border: .1rem solid var(--black);
		-moz-appearance:none; /* Firefox */
		-webkit-appearance:none; /* Safari and Chrome */
		appearance:none;
		width: 100%;
		background-color: #FFFFFF;
	}
	.rasporedSelect option {
		font-size: 1.4rem;
		font-weight: 700;
		padding: .8rem 1.2rem;
		border: .1rem solid var(--black);
		-moz-appearance:none; /* Firefox */
	    	-webkit-appearance:none; /* Safari and Chrome */
	    	appearance:none;
		width: 100%;
		background-color: #FFFFFF;
	}
	.rasporedSelectArrow {
		position:absolute;
		right:1rem;
		top:1.3rem;
	}
	.sectionMainTitleBig {
		font-family: 'Lalezar', cursive;
		font-size: 6rem;
		color: var(--black);
		line-height: 6rem;
		display: inline-block;
	}
	.sectionMainTitleBig:after {
		display: block;
		content:'';
		border-bottom: .2rem solid var(--red);
		padding: 0 0 1.6rem 0;
		width: 8rem;
	}
	.rasporedContentContainer {
		margin: 0 auto;
		width: 139rem;
		box-sizing: border-box;
		position:relative;
	}
	.rasporedDivider {
		height:.1rem;
		border-bottom: .1rem solid var(--color-raspored-divider);
		margin:4rem 0;
	}
	.rasporedContainerSmall {
		width: 100%;
		padding: 0 0 4rem 0;
	}
	.rasporedMainContentContainer {
		margin: 0 auto;
		width: 139rem;
		display:flex;
		position: relative;
		box-sizing: border-box;
		gap: 4rem;
		justify-content: space-around;
	}
	.rasporedMainContentLeft {
		width: 33.3333%;
		display: flex;
		gap: 1.4rem;
		justify-content: flex-start;
	}
	.rasporedMainContentMid {
		width: calc(100% - 20rem - 33.3333%);
	}
	.rasporedMainContentRight {
		width: 20rem;
		position:relative;
	}
	.rasporedDateTimeBorderOpera {
		border: .1rem solid var(--color-opera)
	}
	.rasporedDateTimeBorderDrama {
		border: .1rem solid var(--color-drama)
	}
	.rasporedDateTimeBorderBalet {
		border: .1rem solid var(--color-balet)
	}
	.rasporedImageContainer {
		flex-grow:2;
		background: grey;
		position:relative;
	}
	.rasporedOperaIcon {
		position: absolute;
		gap: 1rem;
		right: 0;
		bottom: 0;
		display: flex;
		background: var(--color-opera);
		color: var(--white);
		align-items: center;
		font-size: 1.4rem;
		height: 4rem;
		padding: 0 1rem;
	}
	.rasporedDramaIcon {
		position: absolute;
		gap: 1rem;
		right: 0;
		bottom: 0;
		display: flex;
		background: var(--color-drama);
		color: var(--white);
		align-items: center;
		font-size: 1.4rem;
		height: 4rem;
		padding: 0 1rem;
	}
	.rasporedBaletIcon {
		position: absolute;
		gap: 1rem;
		right: 0;
		bottom: 0;
		display: flex;
		background: var(--color-balet);
		color: var(--white);
		align-items: center;
		font-size: 1.4rem;
		height: 4rem;
		padding: 0 1rem;
	}
	.rasporedOperaDivider {
		width: 8rem;
		height:.2rem;
		background: var(--color-opera);
		margin: .8rem 0 1.6rem 0;
	}
	.rasporedDramaDivider {
		width: 8rem;
		height:.2rem;
		background: var(--color-drama);
		margin: .8rem 0 1.6rem 0;
	}
	.rasporedBaletDivider {
		width: 8rem;
		height:.2rem;
		background: var(--color-balet);
		margin: .8rem 0 1.6rem 0;
	}
	.rasporedInfoUlaz {
		position:absolute;
		bottom:0;
		text-align: center;
		font-size:1.4rem;
		font-weight: 700;
		line-height: 0;
		padding:1.8rem;
		box-sizing: border-box;
		border: .1rem solid var(--black);
		width:20rem;
		color: #000000;
	}
	.rasporedInfoNA {
		position:absolute;
		bottom:0;
		text-align: center;
		font-size:1.4rem;
		font-weight: 700;
		line-height: 0;
		padding:1.8rem;
		color: var(--white);
		box-sizing: border-box;
		background:var(--color-raspored-info);
		width:20rem;
	}
	.rasporedBTNKupi {
		position:absolute;
		bottom:0;
		text-align: center;
		font-size:1.4rem;
		font-weight: 700;
		line-height: 0;
		padding:1.8rem;
		color: var(--white);
		box-sizing: border-box;
		background:var(--color-opera);
		border: .1rem solid var(--color-opera);
		width:20rem;
		transition: color, background, 250ms ease-in-out;
	}
	.rasporedBTNKupi:hover {
		cursor: pointer;
		background: var(--white);
		color: var(--color-opera);
	}

	.rasporedBTNKupiBalet {
		position:absolute;
		bottom:0;
		text-align: center;
		font-size:1.4rem;
		font-weight: 700;
		line-height: 0;
		padding:1.8rem;
		color: var(--white);
		box-sizing: border-box;
		background:var(--color-balet);
		border: 1px solid var(--color-balet);
		width:100%;
		transition: color, background, 250ms ease-in-out;
	}
	
	.rasporedBTNKupiBalet:hover {
		cursor: pointer;
		background: var(--white);
		color: var(--color-balet);
	}
	
	.rasporedBTNKupiDrama {
		position:absolute;
		bottom:0;
		text-align: center;
		font-size:1.4rem;
		font-weight: 700;
		line-height: 0;
		padding:1.8rem;
		color: var(--white);
		box-sizing: border-box;
		background:var(--color-drama);
		border: 1px solid var(--color-drama);
		width:100%;
		transition: color, background, 250ms ease-in-out;
	}
	
	.rasporedBTNKupiDrama:hover {
		cursor: pointer;
		background: var(--white);
		color: var(--color-drama);
	}

	/* Opera - detalj */
	.heroOperaDetailBG {
		width:20rem;
		height:20rem;
		background: var(--color-opera);
		display:flex;
		flex-direction: column;
		text-align: center;
	}
	.heroDramaDetailBG {
		width:20rem;
		height:20rem;
		background: var(--color-drama);
		display:flex;
		flex-direction: column;
		text-align: center;
	}
	.heroBaletDetailBG {
		width:20rem;
		height:20rem;
		background: var(--color-balet);
		display:flex;
		flex-direction: column;
		text-align: center;
	}
	.heroDetailContainer {
		width: 100%;
		height: 58rem;
		position: relative;
		display: flex;
		justify-content: center;
	}
	.detailTitleContainer {
		width: 100%;
		padding: 5rem 0 0 0;
		display:flex;
	}
	.detailTitleLeft {
		background:var(--white);
		flex-grow: 1;
	}
	.detailTitleMain {
		width: 139rem;
		flex-basis: 139rem;
	}
	.detailTitleRight {
		flex-grow: 1;
	}

	.detailTitleContentContainer {
		width: 66.666666%;
		background: var(--white);
	}
	.detailTitleContent {
		position: relative;
		width: calc(100% - 8rem);
		background: var(--white);
		display:flex;
		justify-content: space-between;
		align-content: flex-end;
		margin: 0 0 2rem 0;
		padding: 5rem 0 0 0;
	}
	.detailTextTitle {
		font-family: 'Lalezar', cursive;
		font-size: 6rem;
		color: var(--black);
		line-height: 6rem;
		display: inline-block;
	}
	.detailTimeline {
		width: calc(100% - 8rem);
		display: flex;
		gap:2rem;
	}
	.detailOperaTimelineDuration {
		width: 8rem;
		height: 5rem;
		border-bottom: .1rem solid var(--color-opera)
	}
	.detailDramaTimelineDuration {
		width: 8rem;
		height: 5rem;
		border-bottom: .1rem solid var(--color-drama)
	}
	.detailBaletTimelineDuration {
		width: 8rem;
		height: 5rem;
		border-bottom: .1rem solid var(--color-balet)
	}
	.detailTimelineContainer {
		width: 100%;
		height:.1rem;
		position:relative;
		background: var(--black);
		margin:3rem 0 0 0;
	}
	.detailTimelineDot {
		width:.9rem;
		height:.9rem;
		background: var(--black);
		border-radius: 50%;
		position:absolute;
	}
	.detailTimelineDot {
		width:.9rem;
		height:.9rem;
		background: var(--black);
		border-radius: 50%;
		position:absolute;
	}
	.detailTimelineDotOpera {
		width:.9rem;
		height:.9rem;
		background: var(--color-opera);
		border-radius: 50%;
		position:absolute;
	}
	.detailTimelineDotDrama {
		width:.9rem;
		height:.9rem;
		background: var(--color-drama);
		border-radius: 50%;
		position:absolute;
	}
	.detailTimelineDotBalet {
		width:.9rem;
		height:.9rem;
		background: var(--color-balet);
		border-radius: 50%;
		position:absolute;
	}

	.detailTimelineText {
		position:absolute;
	}

	.detailContainer {
		width:100%;
		background: var(--white);
	}
	.detailOperaBTN {
		font-size: 1.4rem;
		font-weight: 600;
		color: var(--white);
		padding: 1.1rem 1.6rem;
		background: var(--color-opera);
		border: .1rem solid var(--color-opera);
		box-sizing: border-box;
		transition: background, color, border, 250ms ease-in-out;
		cursor:pointer;
		margin:5.3rem 0 0 0;
		white-space: nowrap;
	}
	.detailOperaBTN:hover {
		cursor: pointer;
		background: var(--white);
		color: var(--color-opera);
	}
	.detailDramaBTN {
		font-size: 1.4rem;
		font-weight: 600;
		color: var(--white);
		padding: 1.1rem 1.6rem;
		background: var(--color-drama);
		border: .1rem solid var(--color-drama);
		box-sizing: border-box;
		transition: background, color, border, 250ms ease-in-out;
		cursor:pointer;
		margin:5.3rem 0 0 0;
		white-space: nowrap;
	}
	.detailDramaBTN:hover {
		cursor: pointer;
		background: var(--white);
		color: var(--color-drama);
	}
	.detailBaletBTN {
		font-size: 1.4rem;
		font-weight: 600;
		color: var(--white);
		padding: 1.1rem 1.6rem;
		background: var(--color-balet);
		border: .1rem solid var(--color-balet);
		box-sizing: border-box;
		transition: background, color, border, 250ms ease-in-out;
		cursor:pointer;
		margin:5.3rem 0 0 0;
		white-space: nowrap;
	}
	.detailBaletBTN:hover {
		cursor: pointer;
		background: var(--white);
		color: var(--color-balet);
	}
	.detailMainContentContainer {
		margin: 0 auto;
		width: 139rem;
		display:flex;
		flex-wrap: nowrap;
		position: relative;
		box-sizing: border-box;
		gap: 8rem;
		justify-content: space-around;
		padding:6rem 0;
	}
	.detailLeftContentContainer {
		width: calc(66.666666% - 8rem);
	}
	.detailRightContentContainer {
		width: calc(100% - 66.666666% - 8rem);
		flex-grow: 1;
	}
	.detailGalleryContainer {
		width: 100%;
		display:flex;
		flex-flow: wrap;
	}
	.detailGalleryImage {
		width:33.3333%;
		height:auto;
	}
	.item {
    		width: calc(25% - 0px);
	}
	.menuHiddenItemLogo {
		display: block;
	}
	

    	.accessibilityIcon {
		display: none;
    	}
}

/* Custom CWS */

.naslovnaBTN {
	display: flex;
	align-items: center;
	font-size: 2rem;
	font-weight: 600;
	background: var(--color-link-hover);
	border: 1px solid var(--color-link-hover);
	transition: background, border, color, 250ms ease-in-out;
	line-height: 0;
	cursor:pointer;
	color: var(--white);
	height: 7rem;
	width: 20rem;
	justify-content: center;
	padding: 0px 5px;
}

.naslovnaBTN:hover {
	border: 1px solid var(--color-link-hover);
	background: var(--black);
	color: var(--white);
}

.error-404{
	margin-left: auto;
	margin-right: auto;
	text-align: -webkit-center;
	margin-top: 50px;
	margin-bottom: 50px;
}

.heroDefaultBG {
        width:20rem;
        height:37.5rem;
        background: var(--color-link-hover);
        display:flex;
        flex-direction: column;
        text-align: center;
}


/* Basic table styling */
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

/* Table header styling */
th {
    color: var(--black);
    font-weight: bold;
    text-align: left;
}

/* Table row styling (alternating colors) */
tr:nth-child(even) {
    background-color: var(--color-news-container);
}

tr:nth-child(odd) {
    background-color: var(--white);
}

/* Table cell styling */
td {
    border: 1px solid var(--color-calendar-border);
}

/* Hover effect for table rows */
tr:hover {
    background-color: var(--color-newsletter);
}

.slides{
    background-size: cover; /* Adjust this property as needed */
    background-repeat: no-repeat;
    background-position: center;
}

.text-scroller {
    display: inline-block;
    animation: scrollText 25s linear infinite;
    width: -webkit-fill-available;
}

@keyframes scrollText {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.images {
    width: 100%;
    display: flex;
    justify-content: center;
}

.image-column {
    width: calc(50%-10px);
}

.playsHover {
	display: none;
	background: black;
	color: white;
	position: absolute;
	border-radius: 5px;
	padding: 15px;
  	width: max-content;
  	z-index: 99;
  	bottom: 100%;
	max-width: 50vw;
}

.dayOfMonth, .weekday {
	cursor: default;
}

.playsHover a {
	color: inherit;
  	text-align: center;
}

.calendarBoxOpera:hover .playsHover,
.calendarBoxDrama:hover .playsHover,
.calendarBoxBalet:hover .playsHover,
.calendarBoxOpera:focus .playsHover,
.calendarBoxDrama:focus .playsHover,
.calendarBoxBalet:focus .playsHover,
.calendarBoxOpera:active .playsHover,
.calendarBoxDrama:active .playsHover,
.calendarBoxBalet:active .playsHover {
	display: grid;
}

@media (max-width: 1150px) {
    .images {
        flex-direction: column;    
    }	
    .image-column > div > img {
   	width: 100%
    }

}