.akciova, .akciova:hover {
		display: inline-block;
		text-align: left;
		height: 50px;
		line-height: 50px;
		padding: 0 20px;
		margin-top: 15px;
		font-family: var(--font-primary);
		font-weight: 700;
		text-transform: uppercase;
		color: var(--color-teal);
		background-image: url(../img/nbtn.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
	}

	.posunto {
		padding-left: 60px;
	}

	.row-order .stara-cena {
		font-size: 18px!important;
		color: var(--color-text);
		text-decoration: line-through;
		font-weight: normal;
		position: relative;
		top: -40px;
		left: -15px;
	}

	#pocket p {
		line-height: 22px;
	}

	.img-responsive {
		max-width: 100%;
	}

	@media (max-width: 768px){
	.posunto { max-height: 180px; }
}

	.row-trash {
		background-color: var(--color-white);
		padding: 60px 0px;
	}

	.row-video {
		background-color: #f3f1f0;
		padding: 40px 0px;
	}

	.vyhody-vpravo {
		color: var(--color-text);
	}

	.vyhody-vpravo li {
		background-image: url(../img/textLi.jpg);
		background-repeat: no-repeat;
		background-position: left 50%;
		padding-left: 21px;
		margin-bottom: 10px;
		color: var(--color-text);
	}

	.row-banner {
		background-position: center top;
		background-size: cover;
		color: var(--color-white);
		padding: 30px 0;
		height: 420px;
	}

	@media (max-width: 420px) {
	.row-banner { padding: 60px 0; height: 520px; /* Upravte výšku pre toto rozlíšenie */ }
}

	.row-before {
		background-position: center top;
		background-size: cover;
		padding: 70px 0;
		height: 420px;
		color: var(--color-text);
	}

	.row-before p {
		color: var(--color-text);
	}


	.row-before h3 {
		font-family: var(--font-primary);
		font-weight: 700;
		color: var(--color-text);
		text-transform: uppercase;
		font-size: 20px;
		margin-bottom: 20px;
	}

	.row-akcia {
		background: url(/img/relex-smile/bg-akcia.png) repeat-x;
		color: var(--color-white);
		height: 90px;
		line-height: 90px;
	}

	.row-process {
		background-position: center top;
		background-size: cover;
		padding: 50px 0;
		color: var(--color-white);
		height: 580px;
	}
	.row-order {

		background-image: url(/img/magic-pocket/azure.jpg);
		background-position: center top;
		background-size: cover;
		padding: 80px 0;
		color: var(--color-white);
		height: 305px;
	}

	.row-laser {
		background-image: url(/img/magic-pocket/ziemer-femto-ldv-z8-back.png);
		background-color: #f3f1f0;
		background-position: center top;
		background-size: cover;
		padding: 50px 0;
		color: var(--color-white);
		height: 570px;
	}

	.row-anime {
		background-image: url(/img/magic-pocket/iclinic-magic-pocket-oko-priebeh.png);
		background-position: center top;
		background-size: cover;
		height: 456px;
	}

	.row-banner h1 {
		font-family: var(--font-primary);
		font-weight: 700;
		color: var(--color-white);
		font-size: 42px;
		text-transform: uppercase;
	}
	.row-banner h2 {
		font-family: var(--font-primary);
		font-weight: 400;
		color: var(--color-white);
		font-size: 20px;
	}
	.row-banner p {
		font-family: var(--font-primary);
		font-weight: 400;
		color: var(--color-white);
		font-size: 18px;
		margin-top: 20px;
	}
	.row-banner .headline {
		max-width: 655px;
		padding: 30px 80px 30px 30px;
		background-color: rgba(29,96,113, 0.8);
		margin-top: 30px;
	}

	.row-trash h2 {
		font-family: var(--font-primary);
		font-weight: 700;
		color: var(--color-teal);
		font-size: 36px;

	}
	.row-trash h3 {
		font-family: var(--font-primary);
		font-weight: 700;
		color: var(--color-text);
		text-transform: uppercase;
		font-size: 20px;
		margin-top: 30px;
		margin-bottom: 20px;
	}
	.row-trash  {
		color: var(--color-text);
	}

	.row-trash ul {
		margin-top: 20px;
	}

	.row-trash li {
		font-family: var(--font-primary);
		font-weight: 400;
		color: var(--color-text);
		font-size: 16px;
		margin-top: 5px;
	}

	.row-trash .vyhody li {
		padding-left: 40px;
		background: url('/img/magic-pocket/check-icon.svg') no-repeat;
		background-size: 30px 30px;
		min-height: 30px;
	}
	.row-trash .vyhody li span {
		position:relative;
		top: 5px;
	}

	.row-process h3 {
		font-family: var(--font-primary);
		font-weight: 700;
		color: var(--color-text);
		text-transform: uppercase;
		font-size: 20px;
		margin-top: 20px;
	}

	.row-process p {
		font-family: var(--font-primary);
		font-weight: 400;
		color: var(--color-text);
		font-size: 16px;
		margin-top: 15px;
		max-width: 540px;
		width: auto;
	}


	.row-video h3 {
		font-family: var(--font-primary);
		font-weight: 700;
		color: var(--color-text);
		text-transform: uppercase;
		font-size: 20px;
		margin-top: 20px;
	}

	.row-video p {
		font-family: var(--font-primary);
		font-weight: 400;
		color: var(--color-text);
		font-size: 16px;
		margin-top: 15px;
		width: auto;
	}

	.akciova {
		color: var(--color-white)!important;
	}

	.row-laser h3 {
		font-family: var(--font-primary);
		font-weight: 700;
		color: var(--color-text);
		text-transform: uppercase;
		font-size: 20px;
		margin-top: 20px;
	}

	.row-laser p {
		font-family: var(--font-primary);
		font-weight: 400;
		color: var(--color-text);
		font-size: 16px;
		margin-top: 5px;
		max-width: 480px;
		width: auto;
	}

	.row-laser table {
		margin-top: 60px;
		margin-bottom: 40px;
	}

	.row-laser table td.lave{
		text-align: left;
		height: 120px;
	}
	.row-laser table td.prave{
		text-align: right;
	}

	.row-order .first-cena {
		font-family: var(--font-primary);
		font-weight: 700;
		color: var(--color-text);
		text-transform: uppercase;
		font-size: 20px;
		margin-top: 10px;
	}
	.row-order .second-cena {
		font-family: var(--font-primary);
		font-weight: 700;
		color: var(--color-teal);
		text-transform: uppercase;
		font-size: 56px;
	}

	.row-order .second-cena .sup{
		color: var(--color-teal);
		text-transform: initial;
		font-size: 28px;
		position: relative;
		top: -17px;
	}

	.row-order .third-cena {
		font-family: var(--font-primary);
		font-weight: 400;
		color: var(--color-text);
		text-transform: uppercase;
		font-size: 18px;
	}

	.row-order .text-right img {
		margin-right: 10px;
		margin-top: 8px;
	}
	.row-order .posun {
		margin-top: 20px;
	}
	.row-order .btn-order {
		font-family: var(--font-primary);
		font-weight: 700;
		color: var(--color-white);
		text-transform: uppercase;
		font-size: 20px;
		background-color: var(--color-teal);
		padding: 15px 20px;
		display: -webkit-inline-box;
		cursor: pointer;
	}

	.row-order .btn-order i {
		margin-left: 20px;
	}


	.row-order .under-button {
		font-family: var(--font-primary);
		font-weight: 400;
		color: var(--color-text);
		font-size: 16px;
		width: 60%;
		margin-top: 5px;
		text-align: center;
		display: -webkit-inline-box;
	}

	.row-anime h3 {
		font-family: var(--font-primary);
		font-weight: 700;
		color: var(--color-teal);
		text-transform: uppercase;
		font-size: 36px;
	}
	.row-anime p {
		font-family: var(--font-primary);
		font-weight: 400;
		color: var(--color-text);
		font-size: 15px;
		margin-top: 5px;
		max-width: 580px;
		width: auto;
	}

	.row-anime .btn-order {
		font-family: var(--font-primary);
		font-weight: 700;
		color: var(--color-white);
		text-transform: uppercase;
		font-size: 16px;
		background-color: var(--color-teal);
		padding: 15px 20px;
		display: -webkit-inline-box;
		cursor: pointer;
		margin-top: 20px;
	}

	.row-anime .btn-order i {
		margin-left: 20px;
	}

	.row-anime .prava-strana {

		background-image: url('/img/magic-pocket/sh.png');
		min-height: 456px;

	}

	.row-anime .kroky {
		margin-top: 35px;
		background: url('/img/magic-pocket/kroky.jpg') repeat-y;
		background-position: 5px left;
	}

	.row-anime .kroky li{
		font-family: var(--font-primary);
		font-weight: 700;
		color: var(--color-text);
		text-transform: uppercase;
		font-size: 16px;
		margin-bottom: 20px;
		cursor: pointer;
		display: block;
		width: 100%;
		overflow: hidden;
	}

	.row-anime .kroky li .krok {
		font-family: var(--font-primary);
		font-weight: 700;
		color: #8e8e93;
		text-transform: uppercase;
		font-size: 36px;
		border: 2px solid #8e8e93;
		width: 60px;
		height: 60px;
		line-height: 60px;
		margin-right: 20px;
		background-color: var(--color-white);
	}
	.row-anime .kroky li .krok-title {
		height: 60px;
		display: table-cell;
	}
	.row-anime .kroky li:last-child {
		margin-bottom: 0px;
	}
	.row-anime .kroky li.active .krok, .row-anime .kroky li:hover .krok {
		color: var(--color-white);
		border: 2px solid var(--color-teal);
		background-color: var(--color-teal);
	}

	.row-anime .kroky li.active .krok-title, .row-anime .kroky li:hover .krok-title {
		color: var(--color-teal);
	}



	@media (min-width: 1030px) AND (max-width: 1366px){

		.row-anime .kroky li .krok-title {

			width: 200px;
		}

	}



	@media (min-width: 569px) AND (max-width: 650px){

		.row-anime .kroky li .krok-title {
			position: relative;
			top: 2px;
			display: -webkit-inline-box;
			width: 150px;
		}

	}




	.row-anime .oko {
		margin-top: 120px;
		position: relative;
		max-width: 413px;
	}

	.row-anime .oko img {
		max-width: 413px;
	}

	.row-anime .puzdro {
		position: absolute;
		top: 98px;
		right: 171px;
		height: 40px;
		display: none;
	}
	.row-anime .pocket {
		position: absolute;
		display: none;
		top: 101px;
		right: -433px;
	}

	.row-anime .odsavacka {
		position: absolute;
		display: none;
		top: 101px;
		right: -433px;
	}

	.row-anime .pocket-full {
		position: absolute;
		display: none;
		top: 101px;
		right: 181px;
	}




	@media (max-width: 768px){
	.row-anime { height: auto; }
	.row-anime .prava-strana { background-image: none; }
}

	@media (max-width: 1024px){
	.row-banner .headline { max-width: 475px; padding: 70px 35px 70px 30px; background-color: rgba(29,96,113, 0.8); margin-top: 30px; }
	.row-laser { height: auto; }
	.row-process { height: auto; }
	.row-anime .prava-strana { background-image: none; padding: 40px 20px; text-align: center; }
	.row-order .symbol-euro { display: none; }
	.row-order .ceny { text-align: center; }
	.row-order { height: auto; }
	.row-order .under-button { width: auto; margin-top: 15px; text-align: center; display: block; }
	.row-anime p { max-width: inherit; }
	.row-laser img { max-width: 100%; }
	.row-laser table { margin-top: 20px; }
	.row-process { background-position: 69% top; }
	.row-process p { max-width: 70%; }
	.row-anime .oko { text-align: center; }
	.row-anime .oko .oko-element { width: 100%; }
	.row-anime .anim-prava { width: 50%; float: right; margin-top: 40px; }
	.row-anime .anim-lava { width: 50%; float: left; }
	.row-anime .anim-celky { width: 100%; }
	.row-order .ceny { width: 50%; float: right; text-align: left; }
	.row-order .symbol-euro { width: 50%; float: left; display: inherit; }
}

	@media (max-width: 960px){
	.row-banner .headline { max-width: 585px; padding: 70px 35px 70px 30px; background-color: rgba(29,96,113, 0.8); margin-top: 30px; }
	.row-order .under-button { width: auto; margin-top: 15px; text-align: center; }
	.row-process { background-position: left top; }
	.row-banner { background-position: 60% top; }
	.row-process p { max-width: 50%; }
}

	@media (max-width: 800px){
	.posunto { padding-left: 0px; }
	.row-anime .oko { text-align: center; max-width: 274px; }
}

	@media (max-width: 768px){
	.row-before { height: auto; }
	.row-before img { margin-top: 20px; }
}

	@media (max-width: 736px){
	.row-banner .headline { padding: 70px 30px 70px 30px; }
	.row-anime .anim-celky { width: inherit; }
	.row-order .under-button { width: 80%; margin-top: 15px; }
}

	@media (max-width: 667px){
	.row-banner h1 { font-size: 36px; }
}


	@media (max-width: 568px){
	.row-trash h2 { font-size: 26px; }
	.row-anime .anim-prava { width: initial; float: initial; margin-top: initial; }
	.row-anime .anim-lava { width: initial; float: initial; }
	.row-process p { max-width: 80%; }
	.row-anime .oko { text-align: center; max-width: 274px; margin: 70px auto 30px auto; }
}

	@media (max-width: 420px){
	.mobil-navi li a br { display: none; }
	.row-banner .headline { padding: 30px 30px 30px 30px; }
	.row-banner h1 { font-size: 30px; }
	.row-process p { max-width: 100%; }
	.row-before p { padding: 0px -15px; }
	.row-order .under-button { width: 100%; margin-top: 15px; }
	.row-laser table td { width: 100%; clear: both; display: block; text-align: center; height: auto; }
	.row-laser table td.lave { text-align: center; }
	.row-laser table td.prave { text-align: center; }
	.row-order .ceny { width: inherit; float: inherit; text-align: center; }
	.row-order .symbol-euro { width: inherit; float: inherit; display: none; }
}

	@media (max-width: 380px){
	.row-banner .headline { padding: 20px 30px 20px 30px; margin-top: 30px; }
	.row-banner { height: 440px; }
	.row-order .btn-order, .row-anime .btn-order { font-size: 14px; }
	.row-anime .kroky li { font-size: 16px; }
}


	@media (max-width: 320px){
	.row-banner .headline { padding: 20px 30px 20px 30px; margin-top: 0px; }
	.row-banner { height: 370px; }
}

.row-trash .cattegory {
    display: flex;
    border: 2px solid #c1c3c2;
    padding: 12px;
    margin-bottom: 40px;
}

.row-trash .cattegory a {
    padding: 0 15px;
    border-right: 1px solid #eee;
    line-height: 20px;
    font-family: var(--font-primary);
    text-transform: uppercase;
    color: var(--color-text);
    font-size: 14px;
	font-weight: 700;
	display: inline-table;
}
.row-trash .cattegory a span{
   height: 60px;
}

.row-trash .cattegory a:last-child {
	border-right: none;
}

.row-trash .cattegory a.active {
    color: var(--color-teal);
    font-weight: 700
}

.row-trash .cattegory a:hover {
    color: var(--color-teal)
}

.row-trash .select {
    height: 103px;
    padding: 0 18px;
    border: 2px solid #c1c3c2;
	background: var(--color-white);
    width: 100%;
    font-family: var(--font-primary);
    font-size: 20px;
    color: var(--color-text);
	background-image: url(../img/relex-smile/select2.png) !important;
    background-position: right !important;
    background-repeat: no-repeat !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	padding-right: 45px;
	padding-left: 20px;
}
.mobil-navi {
	margin-bottom: 30px;
	display: none;
}

.mobil-navi ul {
	border-left: 2px solid #c1c3c2;
	border-right: 2px solid #c1c3c2;
	border-bottom: 2px solid #c1c3c2;
    margin-top: 0px;
	position: absolute;
    top: 103px;
    width: calc(100% - 1px);
    background: var(--color-white);
    z-index: 100;
	display: none;
}
.mobil-navi ul li {
	padding: 10px 10px;
	margin: 0px;
}

.mobil-navi ul li:hover {
	background-color: #c1c3c2;
}
.bok {
	border-right: 2px solid var(--color-teal);
}
@media (max-width: 1024px){
	.row-trash .mobil-navi { display: block; }
	.row-trash .cattegory { display: none; }
	.bok { border: none; }
}

.per {
	width: 20%!important;
}

        .vignette-img {
            width: 250px; /* Customize the size as needed */
            height: auto;
            position: absolute;
            top: 120px; /* Move image above the text */
            right: 38%; /* Adjust position as needed */
            z-index: 10; /* Ensure the image stays above the text */
        }

		@media (max-width: 1280px) {
	.vignette-img { width: 230px; /* Smaller size for mobile devices */ top: 130px; right: 30%; }
}

		@media (max-width: 1024px) {
	.vignette-img { width: 230px; /* Smaller size for mobile devices */ top: 150px; right: 380px; }
}

        @media (max-width: 768px) {
	.vignette-img { width: 160px; /* Smaller size for mobile devices */ top: 180px; right: -3%; }
}

		@media (max-width: 430px) {
}		


.drop-element {
	position: absolute;
    display: none;
    top: 0px;
    right: 182px;;
}

.lentikula {
	position: absolute;
    top: 98px;
    right: 171px;
    height: 40px;
    display: none;
}

.sosovka {
	position: absolute;
    top: 98px;
    right: 171px;
    height: 40px;
    display: none;
}

.laser-element {
	position: absolute;
	top: -17px;
    right: 182px;
    height: 150px;
    width: 32px;
    display: none;
}
.skalpel-element {
	position: absolute;
	top: 120px;
    right: -480px;
    display: none;
}
.waves-element {
	position: absolute;
	top: 120px;
    right: -480px;
    display: none;
}
.rana-element {
	position: absolute;
	top: 130px;
    right: 190px;
    display: none;
}
.multi-element {
	position: absolute;
	top: 91px;
    right: -170px;
    display: none;
}

/* .z-index-2: no Bootstrap 4.6 z-index utility exists for this exact value. Used on the
   krokovac step-animation's right-side text (h3/p/a inside .posunto), which needs to stay
   above other absolutely-positioned decorative elements in .row-anime. */
.z-index-2 {
    z-index: 2;
}