:root {
	--bebas-bold: 600;
	--lato-regular: 400;
	--lato-bold: 700;
	--lato-black: 900;
}

#kreatorMain {aspect-ratio: 934/533; margin: 0 auto; position: relative;}
#kreatorMain #lodka_img {position: absolute; z-index: 10;}
#kreatorMain #krok1_img {position: absolute; z-index: 10;}

#kreatorContent {background-color: #fff; margin: 0 auto; position: absolute; overflow-x: hidden; padding: 0; font-family: "bebas-neue-pro", sans-serif; font-style: normal; font-weight: 400; color: #000; background-size: contain;}

#kreatorContent #krok1 {display: block;}
#kreatorContent #krok2 {display: none;}
#kreatorContent #krok3 {display: none;}
#kreatorContent #krok4 {display: none;}
#kreatorContent #krok5 {display: none;}
#kreatorContent #krok6 {display: none;}

.kreator-button {background-color: #0a428b; color: #ffc000; font-family: "bebas-neue-pro", sans-serif; font-style: normal; font-weight: var(--bebas-bold); border: none; text-transform: uppercase; cursor: pointer;}
.kreator-button:hover { transform: scale(1.1); }
.kreator-button.back {background-color: #c2d0e2; color: #0a428b;}
.checkbox-wrapper { display: flex; align-items: start;  font-family: "lato", sans-serif; font-weight: var(--lato-regular); }
.custom-checkbox { appearance: none; -webkit-appearance: none; border: none; background-color: #dbf2ff; display: inline-block; position: relative; cursor: pointer;}
.custom-checkbox:checked::before { content: ''; position: absolute; background-color: #0a428b; }
.checkbox-wrapper input {flex-shrink: 0;}
.checkbox-wrapper div {flex-grow: 0;}

#kreatorContent #krok1 #action {position: absolute; text-align: center;}
#kreatorContent #krok1 #subtitle {text-transform: uppercase; font-weight: var(--bebas-bold);}
#kreatorContent #krok1 #action .txt1 {color: #1c2a45; font-family: "lato", sans-serif; font-weight: var(--lato-regular); font-style: normal; }
#kreatorContent #krok1 #action .txt2 {color: #0a428b; font-family: "lato", sans-serif; font-weight: var(--lato-bold); font-style: normal; }
#kreatorContent #krok1 #cameraPreview {display: none; position: absolute; }
#kreatorContent #krok1 #takePhotoBtn {display: none; position: absolute;}

#kreatorContent #krok2 #title {font-weight: var(--bebas-bold); text-align: center; text-transform: uppercase;}
#kreatorContent #krok2 #editor #canvas-container {position: absolute; display: flex; justify-content: center; align-items: center; background-color: #dbf2ff}
#kreatorContent #krok2 #editor #sidebar {position: absolute; background-color: #dbf2ff; display: flex; flex-wrap: wrap; align-content: start; overflow-x: hidden; overflow-y: scroll; scrollbar-width: 4.167vw; scrollbar-color: #bb2390 #df409b; scrollbar-gutter: stable;}
#kreatorContent #krok2 #action {position: absolute;}

#kreatorContent #krok3 #imagePreviewBlock {text-align: center; position: absolute;}
#kreatorContent #krok3 #content {position: relative; aspect-ratio: 803/440; width: 100%;}
#kreatorContent #krok3 #title {text-align: center; font-weight: var(--bebas-bold); text-transform: uppercase;}
#kreatorContent #krok3 #subtitle {text-align: left; display: flex; flex-direction: column; font-family: "lato", sans-serif; font-weight: var(--lato-regular); position: absolute;}
#kreatorContent #krok3 #action {display: flex; justify-content: center; position: absolute;}

#kreatorContent #krok4 #title {text-align: center; font-weight: var(--bebas-bold); text-transform: uppercase;}
#kreatorContent #krok4 #action {display: flex; justify-content: center; position: absolute;}
#kreatorContent #krok4 #content {display: flex; flex-direction: column;}
#kreatorContent #krok4 #content .row {display: flex;}
#kreatorContent #krok4 #content input[type="text"], #kreatorContent #krok4 #content input[type="email"] {background-color: #dbf2ff; border: none; color: #a3bdd8; font-weight: var(--bold);}
#kreatorContent #krok4 #content input[type="text"]::placeholder, #kreatorContent #krok4 #content input[type="email"]::placeholder {color: #a3bdd8; font-weight: var(--bold);}

#kreatorContent #krok5 #txt {position: absolute;}
#kreatorContent #krok5 #txt #title {text-transform: uppercase; font-weight: var(--bebas-bold);}
#kreatorContent #krok5 #txt #title2 {text-transform: uppercase; font-weight: var(--bebas-bold);}
#kreatorContent #krok5 #txt #subtitle {font-family: "lato"; font-weight: var(--lato-black);}
#kreatorContent #krok5 #txt #info {font-family: "lato"; font-weight: var(--lato-regular);}
#kreatorContent #krok5 #action {display: flex; justify-content: center; position: absolute;}
#kreatorContent #krok5 #imagePreviewBlock {text-align: center; position: absolute;}

#kreatorContent #krok6 #content {display: flex; justify-content: center; align-items: center; flex-direction: column; aspect-ratio: 803/450; font-weight: var(--bebas-bold); text-transform: uppercase;}

#kreatorMain {width: 934px;}
#kreatorMain #lodka_img {top: 352px; left: 0px; width: 164px;}
#kreatorMain #krok1_img {top: 0px; left: 206px; width: 502px;}
#kreatorContent {top: 24px; left: 100px; width: 803px; height: 450px; border-radius: 23px; border: 8px solid #caecff;}
#kreatorContent #krok1 #action {left: 492px; top: 77px;}
#kreatorContent #krok1 #subtitle {font-size: 36px; line-height: 32px; margin-bottom: 20px;}

.kreator-button {font-size: 30px; line-height: 62px; border-radius: 33px; width: 214px;}
.kreator-button.small {font-size: 16px; line-height: 36px; width: 120px;}
.checkbox-wrapper { font-size: 12px; line-height: 13px; }
.custom-checkbox { width: 25px; height: 21px; border: 1px solid #dbf2ff; margin-right: 10px; border-radius: 8px; margin-top: 0;}
.custom-checkbox:checked::before {top: 3px; left: 3px; width: 17px; height: 13px; border-radius: 8px;}

#kreatorContent #krok1 #action .txt1 {margin-top: 20px; margin-bottom: 20px; font-size: 22px; line-height: 28px;}
#kreatorContent #krok1 #action .txt2 {margin-top: 5px; font-size: 14px; line-height: 28px;}
#kreatorContent #krok1 #cameraPreview {left: 70px; top: 80px; width: 400px;}
#kreatorContent #krok1 #takePhotoBtn {left: 70px; top: 385px;}

#kreatorContent #krok2 #title {font-size: 36px; line-height: 32px; margin-top: 40px;}
#kreatorContent #krok2 #editor #canvas-container {width: 370px; max-height: 290px; border-radius: 8px; left: 70px; top: 106px;}
#kreatorContent #krok2 #editor #sidebar {border-radius: 12px; width: 274px; height: 230px; column-gap: 20px; row-gap: 20px; max-height: 258px; left: 456px; top: 106px; padding: 20px 10px;}
#kreatorContent #krok2 #action {left: 70px; bottom: 20px; width: 680px;}
#kreatorContent #krok2 #action #btn_step2Next {float: right;}
#kreatorContent #krok2 #editor #sidebar .kreator_asset {width: 100px; height: 100px;}
#kreatorContent #krok2 #editor #sidebar .kreator_asset img {max-width: 100%;}

#kreatorContent #krok3 #content {padding-top: 40px;}
#kreatorContent #krok3 #imagePreviewBlock {left: 70px; top: 106px; width: 370px; height: 290px;}
#kreatorContent #krok3 #krok3_imagePreview {max-width: 100%; max-height: 100%; z-index: 2;}
#kreatorContent #krok3 #title {font-size: 36px; line-height: 32px;}
#kreatorContent #krok3 #subtitle {top: 130px; left: 520px; font-size: 22px; line-height: 22px; row-gap: 30px;}
#kreatorContent #krok3 #subtitle img {width: 116px;}
#kreatorContent #krok3 #action {left: 520px; bottom: 30px; column-gap: 12px; z-index: 2;}

#kreatorContent #krok4 {padding-top: 40px;}
#kreatorContent #krok4 #title {font-size: 36px; line-height: 32px;}
#kreatorContent #krok4 #action {left: 510px; bottom: 15px; column-gap: 12px; z-index: 2;}
#kreatorContent #krok4 #content {width: 650px; row-gap: 10px; margin: 0 auto; margin-top: 15px;}
#kreatorContent #krok4 #content .row {column-gap: 20px;}
#kreatorContent #krok4 #content input[type="text"], #kreatorContent #krok4 #content input[type="email"] {font-size: 22px; line-height: 22px; padding: 18px 0 18px 25px; width: 100%; margin: 0; border-radius: 8px;}
#kreatorContent #krok4 #content input[type="text"]::placeholder, #kreatorContent #krok4 #content input[type="email"]::placeholder {font-size: 22px; line-height: 22px;}

#kreatorContent #krok5 #txt {left: 390px; top: 65px; padding-right: 15px;}
#kreatorContent #krok5 #txt #title {font-size: 54px; line-height: 48px;}
#kreatorContent #krok5 #txt #title2 {font-size: 36px; line-height: 32px; margin-top: 50px;}
#kreatorContent #krok5 #txt #subtitle {font-size: 22px; line-height: 22px; margin-top: 25px;}
#kreatorContent #krok5 #txt #info {font-size: 16px; line-height: 18px; margin-top: 20px;}
#kreatorContent #krok5 #action {left: 510px; bottom: 15px; column-gap: 12px; z-index: 2;}
#kreatorContent #krok5 #imagePreviewBlock {left: 30px; top: 65px; width: 340px; height: 290px;}
#kreatorContent #krok5 #krok5_imagePreview {max-width: 100%; max-height: 100%; z-index: 2;}

#kreatorContent #krok6 #content img {width: 182px;}
#kreatorContent #krok6 #content #title {font-size: 54px; line-height: 48px; margin-top: 40px;}
#kreatorContent #krok6 #content #subtitle {font-size: 36px; line-height: 32px; margin-top: 15px;}
#kreatorContent #krok6 #content #action {margin-top: 50px;}


@media (min-width: 768px) and (max-width: 950px) {
	#kreatorMain {width: 98.316vw;}
	#kreatorMain #lodka_img {top: 37.053vw; left: 0px; width: 17.263vw;}
	#kreatorMain #krok1_img {top: 0px; left: 21.684vw; width: 52.842vw;}
	#kreatorContent {top: 2.526vw; left: 10.526vw; width: 84.526vw; height: 47.368vw; border-radius: 2.421vw; border: 0.842vw solid #caecff;}
	#kreatorContent #krok1 #action {left: 51.789vw; top: 8.105vw;}
	#kreatorContent #krok1 #subtitle {font-size: 3.789vw; line-height: 3.368vw; margin-bottom: 2.105vw;}

	.kreator-button {font-size: 3.158vw; line-height: 6.526vw; border-radius: 3.474vw; width: 22.526vw;}
	.kreator-button.small {font-size: 1.684vw; line-height: 3.789vw; width: 12.632vw;}
	.checkbox-wrapper { font-size: 1.263vw; line-height: 1.368vw; }
	.custom-checkbox { width: 2.632vw; height: 2.211vw; border: 0.105vw solid #dbf2ff; margin-right: 1.053vw; border-radius: 0.842vw; margin-top: 0;}
	.custom-checkbox:checked::before {top: 0.316vw; left: 0.316vw; width: 1.789vw; height: 1.368vw; border-radius: 0.842vw;}

	#kreatorContent #krok1 #action .txt1 {margin-top: 2.105vw; margin-bottom: 2.105vw; font-size: 2.316vw; line-height: 2.947vw;}
	#kreatorContent #krok1 #action .txt2 {margin-top: 0.526vw; font-size: 1.474vw; line-height: 2.947vw;}
	#kreatorContent #krok1 #cameraPreview {left: 7.368vw; top: 8.421vw; width: 42.105vw;}
	#kreatorContent #krok1 #takePhotoBtn {left: 7.368vw; top: 40.526vw;}

	#kreatorContent #krok2 #title {font-size: 3.789vw; line-height: 3.368vw; margin-top: 4.211vw;}
	#kreatorContent #krok2 #editor #canvas-container {width: 38.947vw; max-height: 30.526vw; border-radius: 0.842vw; left: 7.368vw; top: 11.158vw;}
	#kreatorContent #krok2 #editor #sidebar {border-radius: 1.263vw; width: 28.842vw; height: 24.211vw; column-gap: 2.105vw; row-gap: 2.105vw; max-height: 27.158vw; left: 48vw; top: 11.158vw; padding: 2.105vw 1.053vw;}
	#kreatorContent #krok2 #action {left: 7.368vw; bottom: 2.105vw; width: 71.579vw;}
	#kreatorContent #krok2 #action #btn_step2Next {float: right;}
	#kreatorContent #krok2 #editor #sidebar .kreator_asset {width: 10.526vw; height: 10.526vw;}
	#kreatorContent #krok2 #editor #sidebar .kreator_asset img {max-width: 100%;}

	#kreatorContent #krok3 #content {padding-top: 4.211vw;}
	#kreatorContent #krok3 #imagePreviewBlock {left: 7.368vw; top: 11.158vw; width: 38.947vw; height: 30.526vw;}
	#kreatorContent #krok3 #krok3_imagePreview {max-width: 100%; max-height: 100%; z-index: 2;}
	#kreatorContent #krok3 #title {font-size: 3.789vw; line-height: 3.368vw;}
	#kreatorContent #krok3 #subtitle {top: 13.684vw; left: 54.737vw; font-size: 2.316vw; line-height: 2.316vw; row-gap: 3.158vw;}
	#kreatorContent #krok3 #subtitle img {width: 12.211vw;}
	#kreatorContent #krok3 #action {left: 54.737vw; bottom: 3.158vw; column-gap: 1.263vw; z-index: 2;}

	#kreatorContent #krok4 {padding-top: 4.211vw;}
	#kreatorContent #krok4 #title {font-size: 3.789vw; line-height: 3.368vw;}
	#kreatorContent #krok4 #action {left: 53.684vw; bottom: 1.579vw; column-gap: 1.263vw; z-index: 2;}
	#kreatorContent #krok4 #content {width: 65.263vw; row-gap: 1.3vw; margin: 0 auto; margin-top: 1vw;}
	#kreatorContent #krok4 #content .row {column-gap: 2.105vw;}
	#kreatorContent #krok4 #content input[type="text"], #kreatorContent #krok4 #content input[type="email"] {font-size: 2.316vw; line-height: 2.316vw; padding: 1.895vw 0 1.895vw 2.632vw; width: 100%; margin: 0; border-radius: 0.842vw;}
	#kreatorContent #krok4 #content input[type="text"]::placeholder, #kreatorContent #krok4 #content input[type="email"]::placeholder {font-size: 2.316vw; line-height: 2.316vw;}

	#kreatorContent #krok5 #txt {left: 41.053vw; top: 6.842vw; padding-right: 1.579vw;}
	#kreatorContent #krok5 #txt #title {font-size: 5.684vw; line-height: 5.053vw;}
	#kreatorContent #krok5 #txt #title2 {font-size: 3.789vw; line-height: 3.368vw; margin-top: 5.263vw;}
	#kreatorContent #krok5 #txt #subtitle {font-size: 2.316vw; line-height: 2.316vw; margin-top: 2.632vw;}
	#kreatorContent #krok5 #txt #info {font-size: 1.684vw; line-height: 1.895vw; margin-top: 2.105vw;}
	#kreatorContent #krok5 #action {left: 53.684vw; bottom: 1.579vw; column-gap: 1.263vw; z-index: 2;}
	#kreatorContent #krok5 #imagePreviewBlock {left: 3.158vw; top: 6.842vw; width: 35.789vw; height: 30.526vw;}
	#kreatorContent #krok5 #krok5_imagePreview {max-width: 100%; max-height: 100%; z-index: 2;}

	#kreatorContent #krok6 #content img {width: 19.158vw;}
	#kreatorContent #krok6 #content #title {font-size: 5.684vw; line-height: 5.053vw; margin-top: 4.211vw;}
	#kreatorContent #krok6 #content #subtitle {font-size: 3.789vw; line-height: 3.368vw; margin-top: 1.579vw;}
	#kreatorContent #krok6 #content #action {margin-top: 5.263vw;}
}

@media (max-width: 767px) {
	#kreatorMain {aspect-ratio: 917/930; margin-top: 6.543vw; margin-left: 4.167vw;}
	#kreatorMain #lodka_img {top: 102.778vw; left: 0px; width: 23.796vw;}

	#kreatorMain #krok1_img {top: 0px; left: 24.463vw; width: 58.667vw;}
	#kreatorContent {top: 4.352vw; left: 7.315vw; width: 74.352vw; height: 114.167vw; border-radius: 2.13vw; border: 0.741vw solid #caecff;}

	#kreatorContent #krok1 #action {left: 17.481vw; top: 54.87vw;}
	#kreatorContent #krok1 #subtitle {font-size: 6.481vw; line-height: 5.741vw margin-bottom: 3.704vw;}

	.kreator-button {font-size: 5.463vw; line-height: 11.204vw; border-radius: 6.019vw; width: 38.889vw;}
	.kreator-button.small {font-size: 3.684vw; line-height: 5.789vw; width: 20.632vw;}
	.checkbox-wrapper { font-size: 2.263vw; line-height: 2.568vw; }
	.custom-checkbox { width: 3.632vw; height: 3.211vw; border: 0.105vw solid #dbf2ff; margin-right: 1.053vw; border-radius: 0.842vw; margin-top: 0;}
	.custom-checkbox:checked::before {top: 0.416vw; left: 0.516vw; width: 2.389vw; height: 2.168vw; border-radius: 0.842vw;}

	#kreatorContent #krok1 #action .txt1 {margin-top: 2.105vw; margin-bottom: 2.105vw; font-size: 3.981vw; line-height: 5.093vw;}
	#kreatorContent #krok1 #action .txt2 {margin-top: 1.526vw; font-size: 2.593vw; line-height: 2.593vw;}

	#kreatorContent #krok1 #cameraPreview {left: 8.5vw; top: 3.421vw; width: 56.105vw;}
	#kreatorContent #krok1 #takePhotoBtn {left: 25.368vw; top: 46.526vw;}

	#kreatorContent #krok2 #title {font-size: 4.789vw; line-height: 4.368vw; margin-top: 4.211vw;}
	#kreatorContent #krok2 #editor #canvas-container {width: 69vw; max-height: 45vw; border-radius: 0.842vw; left: 2vw; top: 11vw;}
	#kreatorContent #krok2 #editor #sidebar {border-radius: 1.263vw; width: 69vw; height: 35.211vw; column-gap: 2.105vw; row-gap: 2.105vw; max-height: 35.158vw; left: 2vw; top: 60vw; padding: 2.105vw 1.053vw;}
	#kreatorContent #krok2 #action {left: 20vw; bottom: 3.105vw; width: 50vw;}
	#kreatorContent #krok2 #action #btn_step2Next {float: right;}
	#kreatorContent #krok2 #editor #sidebar .kreator_asset {width: 17.526vw; height: 17.526vw;}
	#kreatorContent #krok2 #editor #sidebar .kreator_asset img {max-width: 100%;}

	#kreatorContent #krok3 #content {padding-top: 4.211vw; aspect-ratio: 800/1240}
	#kreatorContent #krok3 #imagePreviewBlock {left: 2vw; top: 11w; width: 69vw; height: 45vw;}
	#kreatorContent #krok3 #krok3_imagePreview {max-width: 100%; max-height: 100%; z-index: 2;}
	#kreatorContent #krok3 #title {font-size: 4.789vw; line-height: 4.368vw;}
	#kreatorContent #krok3 #subtitle {top: 63vw; left: 2vw; width: 69vw; text-align: center; font-size: 5vw; line-height: 6vw; row-gap: 3.158vw;}
	#kreatorContent #krok3 #subtitle img {width: 16.211vw;}
	#kreatorContent #krok3 #action {left: 25vw; bottom: 3.105vw; column-gap: 4.263vw; z-index: 2;}

		#kreatorContent #krok4 {padding-top: 4.211vw;}
	#kreatorContent #krok4 #title {font-size: 4.789vw; line-height: 4.368vw;}
	#kreatorContent #krok4 #action {left: 25vw; bottom: 3.105vw; column-gap: 4.263vw; z-index: 2;}
		#kreatorContent #krok4 #content {width: 65.263vw; row-gap: 1.579vw; margin: 0 auto; margin-top: 2.632vw;}
	#kreatorContent #krok4 #content .row {row-gap: 2.105vw; flex-direction: column;}
	#kreatorContent #krok4 #content input[type="text"], #kreatorContent #krok4 #content input[type="email"] {font-size: 4.316vw; line-height: 4.316vw; padding: 1.895vw 0 1.895vw 2.632vw; width: 100%; margin: 0; border-radius: 0.842vw;}
	#kreatorContent #krok4 #content input[type="text"]::placeholder, #kreatorContent #krok4 #content input[type="email"]::placeholder {font-size: 4.316vw; line-height: 4.316vw;}

	#kreatorContent #krok5 #txt {left: 7vw; top: 50vw; width: 59vw; text-align: center; padding-right: 0;}
	#kreatorContent #krok5 #txt #title {font-size: 7.684vw; line-height: 7.053vw;}
	#kreatorContent #krok5 #txt #title2 {font-size: 6.789vw; line-height: 6.368vw; margin-top: 5.263vw;}
	#kreatorContent #krok5 #txt #subtitle {font-size: 3.316vw; line-height: 3.316vw; margin-top: 2.632vw;}
	#kreatorContent #krok5 #txt #info {font-size: 2.684vw; line-height: 3.895vw; margin-top: 2.105vw;}
	#kreatorContent #krok5 #action {left: 25vw; bottom: 3.105vw; column-gap: 4.263vw; z-index: 2;}
	#kreatorContent #krok5 #imagePreviewBlock {left: 2vw; top: 3vw; width: 69vw; height: 45vw;}
	#kreatorContent #krok5 #krok5_imagePreview {max-width: 100%; max-height: 100%; z-index: 2;}

	#kreatorContent #krok6 #content {aspect-ratio: 800/1240}
	#kreatorContent #krok6 #content img {width: 28.158vw;}
		#kreatorContent #krok6 #content #title {font-size: 5.684vw; line-height: 5.053vw; margin-top: 4.211vw;}
		#kreatorContent #krok6 #content #subtitle {font-size: 5.789vw; line-height: 6.368vw; margin-top: 2.579vw;}
		#kreatorContent #krok6 #content #action {margin-top: 5.263vw;}
	}
}