@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");

:root {
	--body-color: #2c2d2a;
	--savanna-bg: #e9bf8b;
	--body2-color: #2c2d2a67;
	--beach-bg: #e7dfcf;
	--glacier-bg: #b6d6c8;
	--coral-bg: #e86357;
	--arrow-fill: #333231;
	--body-font: "Montserrat", sans-serif;
	--italic-font: "EB Garamond", serif;
}

* {
	box-sizing: border-box;
	outline: none;
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
	color: var(--body-color);
}

h1,
h2,
h3 {
	margin: 0;
}
#mobile-message {
	display: none;
	text-align: center;
}

#desktop-message {
	display: none;
	text-align: center;
	font-size: 1.5rem;
	color: #d8d8d8;
}




	/* form registration */
@media (min-width: 992px) {

	body {
		font-family: var(--body-font);
		background-color: #1d1e20;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 2em;
		width: 100%;
		height: 100vh;
		color: var(--body-color);
		overflow-x: hidden;
		overflow-y: hidden;
		
		@media (max-width: 480px) {
			padding: 0;
		}
	}


.block-register{
	position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

	max-width: 1100px;
	width: 1040px;
	padding: 42px 0 30px;
	height:500px;
}
.block-register .background{
	width: 100%;
	height:100%;
	
	background-position: center;
	background-size: cover;
	border-radius: 30px;
	
}
.form-register{
	position: relative;
	display: inline-block;
	float:left;
	width: 680px;
	height:100%;
}
.form-register .opacity{
	position: absolute;
	width:100%;
	height:100%;
	background-color: #E6DECF;
	opacity: 0.9;	
}
.form-register .form{
	position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	width:500px;
	height:350px;
}
.form-register .form .mt-4{
	display: inline-block;
	float:left;
	border-radius: 15px;
	width: 200px;
	margin-top: 25px;
	margin-left: 25px;
	margin-right: 25px;
	font-weight: 600;
	font-size: 15px;
}
.form-register .form span{
	color: rgb(131, 26, 26);	
}
.form-register .form input{
	border: 0;
	box-shadow: 1px 1px 3px #333231;
	border-radius: 10px;
	width: 100%;
	padding: 7px;
	background: transparent;
}
.form-register .form textarea{
	border: 0;
	box-shadow: 1px 1px 3px #333231;
	border-radius: 10px;
	width: 100%;
	padding: 7px;
	background: transparent;
}
.form-register .form input:hover{
	box-shadow: 1px 1px 3px #000000;
	cursor: pointer;
}
.form-register .form button{
	position: absolute;
    bottom: 0;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	border-radius: 5px;
	border: 0;
	box-shadow: 1px 1px 3px #333231;
	width: 250px;
	padding: 7px;
	background: transparent;
}
.bg-register{
	position: relative;
	display: inline-block;
	float:right;
	width: 360px;
	height:100%;	
}
.bg-text{
	position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	width:300px;
	height:280px;
}
.bg-text h1{
	font-weight: 600;
	font-size: 23px;
}
.bg-text h2{
	padding-top: 15px;
	font-weight: 600;
	font-size: 17px;
}

.container {
	max-width: 1100px;
	border-radius: 4px;
	max-height: 680px;
	height: 90vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	scroll-behavior: smooth;
	background-color: #e6decf;
	padding: 0 30px;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	@media (max-width: 480px) {
	height: 100%;
	max-height: 100%;
	}
}
.logo {
	width: 76px;
}
.header {
	display: flex;
	align-items: center;
	height: 62px;
	width: 100%;
	white-space: nowrap;
	flex-shrink: 0;
	font-weight: 600;
	font-size: 15px;
	border-bottom: 1px solid rgba(44, 45, 42, 0.25);
	position: sticky;
	top: 0;
	left: 0;
	background-color: var(--beach-bg);
	z-index: 6;
	
	@media (max-width: 575px) {
		width: calc(100% + 20px);
        margin-left: -10px;
	}
}
	.header-menu {
		align-items: center;
		margin-left: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
		@media screen and (max-width: 740px) {
			display: none;
		}
    }
    .header-menu a{
        margin-left: 5px;
        margin-right: 5px;
    }
		.header-menu:not(:first-child) {
			margin-left: 30px;
		}
	.menu-icon {
		display: flex;
		align-items: center;
		margin-right: 20px;
    }
    .menu-icon svg {
			width: 22px;
		}
	.header-icons {
		margin-left: auto;
		display: flex;
		align-items: center;
    }
		.header-icons svg {
			width: 18px;
        }
			.header-icons svg:not(:last-child) {
				margin-right: 20px;
			}
.left-side {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 320px;
	
	@media screen and (max-width: 930px) {
		text-align: center;
		max-width: 450px;
	}
}
.mySwiper {
	display: flex;
	flex-grow: 1;
	position: relative;
}
.main {
	padding: 42px 0 30px;
	display: flex;
	flex-grow: 1;
	position: absolute;

	@media screen and (max-width: 930px) {
		flex-direction: column-reverse;
		align-items: center;
		justify-content: center;
	}
}
	.main-header {
		text-transform: uppercase;
		font-size: 14px;
		letter-spacing: 4px;
		font-weight: 600;
		transition-delay: 0.2s;
	}
	.main-title {
		font-family: var(--italic-font);
		font-size: 100px;
		font-weight: 400;
		margin-top: 10px;
		line-height: 1em;
		transition-delay: 0.3s;
	}
	.main-subtitle {
		font-family: var(--italic-font);
		font-weight: 400;
		font-size: 32px;
		margin-top: 14px;
		margin-bottom: 60px;
		transition-delay: 0.4s;
	}
		.main-content__title {
			font-size: 26px;
			font-family: var(--italic-font);
			font-style: italic;
			margin-bottom: 14px;
			transition-delay: 0.2s;
		}
		.main-content__subtitle {
			font-size: 14px;
			line-height: 1.5;
			margin-bottom: 24px;
			letter-spacing: -0.01em;
			transition-delay: 0.3s;
		}
		.more-menu {
			font-size: 13px;
			font-weight: 500;
			display: flex;
			align-items: center;
			transition-delay: 0.4s;	
			@media screen and (max-width: 930px) {
				justify-content: center;
			}
        }
			.more-menu svg {
				width: 28px;
				height: 18px;
				margin-left: 10px;
			}
.center {
	display: flex;
	margin-left: 120px;
	position: relative;
	flex-shrink: 0;

	@media screen and (max-width: 930px) {
		margin-left: 0;
		margin-bottom: 56px;
	}
}
	.center .bottle-bg {
		width: 320px;
		height: 450px;
		object-fit: cover;
		border-radius: 160px;

		@media screen and (max-width: 930px) {
			width: 260px;
			height: 390px;
		}
		@media screen and (max-width: 575px) {
			width: 220px;
			height: 340px;
		}
	}

	.bottle-img {
		position: absolute;
		top: 25%;
		left: 0;
		transform: scale(1.6);
	}
.swiper-pagination {
	position: absolute;
	right: 30px;
	left: auto;
	top: 100px;
	width: auto;
	bottom: auto;
	z-index: 2;
	font-size: 14px;
	font-family: var(--body-font);
	font-weight: 500;
}
.button-wrapper {
	position: absolute;
	right: 30px;
	bottom: 20px;
	z-index: 1;
	display: flex;
	align-items: center;

	@media screen and (max-width: 930px) {
		top: 0;
		left: 0;
		width: 100%;
		justify-content: space-between;
		padding: 0 60px;
	}
	
	@media screen and (max-width: 575px) {
		padding: 0 20px;
	}
}
	.button-wrapper svg {
		width: 28px;
	}
	.button-wrapper .swiper-button {
		border: 1px solid var(--body-color);
		border-radius: 50%;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, var(--body-color) 40%, transparent 0%);
		background-size: 200% 100%;
		background-position: right bottom;
		transition: all 0.3s ease-out;
		cursor: pointer;
    }
		.swiper-button + .swiper-button {
			margin-left: 16px;

			@media screen and (max-width: 930px) {
				margin-left: 0;
			}
		}

		.swiper-button:hover {
			background-color: var(--body-color);
			background-position: left bottom;
        }
			.swiper-button:hover svg {
				stroke: #fff;
			}
		
	

	.swiper-prev-button {
		background: linear-gradient(to left, var(--body-color) 40%, transparent 0%);
		background-size: 200% 100%;
		background-position: left bottom;
		transition: all 0.3s ease-out;
    }
		.swiper-prev-button svg {
			transform: rotate(-180deg);
		}
		.swiper-prev-button:hover {
			background-position: right bottom;
		}


.swiper-slide {
	opacity: 0 !important;
	transition: 0.4s;
}
	.swiper-slide-active {
		opacity: 1 !important;
	}


.swiper-slide .main-wrapper > *,
.swiper-slide .main-content > * {
	transform: translateY(-30px);
	opacity: 0;
	transition-duration: 0.8s;
}

.swiper-slide-active .main-wrapper > *,
.swiper-slide-active .main-content > * {
	transform: none;
	opacity: 1;
}

.swiper-slide .bottle-bg {
	transition-duration: 0.6s;
	opacity: 0;
	object-position: 60%;
}

.swiper-slide-active .bottle-bg {
	opacity: 1;
	transform: none;
	object-position: 50%;
}

.swiper-slide .bottle-img {
	transition-duration: 0.8s;
	transform: scale(1.2);
	opacity: 0;
}

.swiper-slide-active .bottle-img {
	opacity: 1;
	transform: scale(1.6);
}
	.header[data-sld="3"] {
		background-color: var(--savanna-bg);
	}
    .container[data-sld="3"] {
		background-color: var(--savanna-bg);
	}
	.header[data-sld="2"] {
		background-color: var(--glacier-bg);
	}
    .container[data-sld="2"] {
		background-color: var(--glacier-bg);
	}
    .header[data-sld="1"] {

		background-color: var(--coral-bg);
	}
    .container[data-sld="1"] {
       
		background-color: var(--coral-bg);
	}

	.create-qrcode{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%);
		padding: 20px;
		width:250px;
		border-bottom: 1px solid var(--arrow-fill);
		text-align: center;
		font-family: var(--italic-font);
		font-size: 20px;
		font-weight: 400;
		transition: all 0.3s;
	}
	.create-qrcode:hover{
		cursor: pointer;
		width:300px;
	}


	.itc-container {
		display: none;
	  }
  
	 .itc-pc{
		position: relative;
		width:100%;
		height:500px;
		background-color: red;
		
	 }
		  
}



























		/* form registration phone */
@media (min-width: 480px) and (max-width: 991px) {

	body {
		font-family: var(--body-font);
		padding: 0;
		margin: 0;
		background-color: #E6B938;

		width: 100%;
		height: 100%;
		color: var(--body-color);
		overflow-x: hidden;
		overflow-y: hidden;
		position: relative;
	
	}
	.block-register{
		position: relative;
		
		width: 100%;
		height:130%;
	}
	.block-register .background{
		width: 100%;
		height:100%;
		background-image: url('https://cdn.shopify.com/s/files/1/0689/1443/t/34/assets/Beach_1920.jpg?v=1029210661698833530');
		background-position: center;
		background-size: cover;

	}
	.form-register{
		position: relative;
		
		width: 100%;
		height: 100%;
	}
	.form-register .opacity{
		position: absolute;
		width:100%;
		height:100%;
		background-color: #E6DECF;
		opacity: 0.9;	
	}
	.form-register .form{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%);
		width:70%;
		height:100%;
	}
	.form-register .form .mt-4{
		display: inline-block;
		float:left;
		border-radius: 15px;
		width: 100%;
		margin-top: 30px;
	
		font-weight: 600;
		font-size: 45px;
	}
	.mt-6{
		position: relative;
		display: inline-block;
		float:left;
		border-radius: 15px;
		width: 100%;
		margin-top: 30px;
	
	
		font-weight: 600;
		font-size: 45px;
	}
	.mt-checkbox{
		display: inline-block;
		float:left;
		border-radius: 15px;
		margin-top: 30px;
		padding-left: 30px;
		font-weight: 600;
		font-size: 29px;
	}
	  
	  /* Hide the browser's default checkbox */
	  .mt-container input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	  }
	  
	  /* Create a custom checkbox */
	  .mt-checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 25px;
		width: 25px;
		background-color: #eee;
	  }
	  
	  /* On mouse-over, add a grey background color */
	  .mt-container:hover input ~ .mt-checkmark {
		background-color: #ccc;
	  }
	  
	  /* When the checkbox is checked, add a blue background */
	  .mt-container input:checked ~ .mt-checkmark {
		background-color: #2196F3;
	  }
	  
	  /* Create the checkmark/indicator (hidden when not checked) */
	  .mt-checkmark:after {
		content: "";
		position: absolute;
		display: none;
	  }
	  
	  /* Show the checkmark when checked */
	  .mt-container input:checked ~ .mt-checkmark:after {
		display: block;
	  }
	  
	  /* Style the checkmark/indicator */
	  .mt-container .mt-checkmark:after {
		left: 9px;
		top: 5px;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 3px 3px 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	  }





	.form-register .form select{
		border: 0;
		box-shadow: 1px 1px 3px #333231;
		border-radius: 10px;
		width: 100%;
		padding: 12px;
		font-size: 42px;
		background: transparent;
		text-decoration: none;
		color:#2c2d2a;
	}
	.form-register .form select option,
	.form-register .form select optgroup{
		font-size: 12px;
	

		text-decoration: none;
		color:#2c2d2a;
	}
	.form-register .form span{
		color: rgb(131, 26, 26);	
	}
	.form-register .form input,select{
		
		box-shadow: 1px 1px 3px #333231;
		border-radius: 10px;
		width: 100%;
		padding: 12px;
		font-size: 40px;
		background: transparent;
		text-decoration: none;
		color:#2c2d2a;
	
	}

	.form-register .form textarea{
		border: 0;
		box-shadow: 1px 1px 3px #333231;
		border-radius: 10px;
		width: 100%;
		padding: 12px;
		font-size: 40px;
		background: transparent;
	}

	p {
		display: none;
	  }
		.mt-8{
			position: relative;
		display: inline-block;
		
		float:left;
		border-radius: 15px;
		width: 100%;
		margin-top: 30px;
	
		
		font-weight: 600;
		font-size: 45px;
	  }
	.form-register .form input:hover{
		box-shadow: 1px 1px 3px #000000;
		cursor: pointer;
	}
	.form-register .form button{
		position: absolute;
		top: 105%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%);
		border-radius: 5px;
		border: 0;
		box-shadow: 1px 1px 3px #333231;
		width: 350px;
		padding: 17px;
		font-size: 33px;
		background: transparent;
	}
	.bg-register{
		position: relative;
		width: 100%;
		height: 15%;	
		background-image: url('img/10.jpg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: 90%;
		background-color: #E6B938;
	}
	.bg-text{
		position: absolute;
		top: 70%;
		left: 73%;
		margin-right: -50%;
		transform: translate(-50%, -50%);
		width:500px;
		height:300px;
	}
	.bg-text h1{
		font-weight: 600;
		font-size: 34px;
	}
	.bg-text h2{
		padding-top: 15px;
		font-weight: 600;
		font-size: 26px;
	}
	
	.container {
		border-radius: 4px;

		height:100%;
		min-height: 100%;
		width: 100%;
		
		background-color: #EFEFEF;
		
		overflow-y: auto;
		overflow-x: hidden;
		position: relative;

	}
	.continue-form{
		position: relative;
		width:100%;
		height:500px;
	
	}
	.continue-button{
		position: relative;
		width:70%;
		margin-left: 15%;
		margin-top: 15px;
		background-color: var(--body-color);
	}
	.continue-buttonfixed{
		position: relative;
		width:100%;
	}
	.continue-buttonfixed div{
		position: relative;
		display: inline-block;
		float:left;
		width:50%;
		font-size: 30px;
		font-weight: 600;
		text-align: center;
		padding: 25px;
		background-color: var(--body-color);
		color:#fff;
	}
	.logo {
		margin-left: 30px;
		width: 196px;
	}
	.second-logo{
		position: absolute;
		top: calc(50% - 10px);
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%);
		width: 110px;
		height: 110px;
		margin-left: 15px;
		background-image: url("img/secondlogo.png");
		background-position: center;
		background-size: cover;
	}
	.header {
		display: flex;
		align-items: center;
		height: 142px;
		width: 100%;
		white-space: nowrap;
		flex-shrink: 0;
		font-weight: 600;
		padding: 0px 30px;
		font-size: 25px;
		border-bottom: 1px solid rgba(44, 45, 42, 0.25);
		position: relative;
		top: 0;
		left: 0;
		background-color: #E6B938;
		z-index: 6;
		
	
	}
		.header-menu {
			align-items: center;
			margin-left: auto;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);

			display: none;
		
		}
		.header-menu a{
			margin-left: 8px;
			margin-right: 8px;
		}
			.header-menu:not(:first-child) {
				margin-left: 30px;
			}
		.menu-icon {
			display: flex;
			align-items: center;
			margin-right: 20px;
		}
		.menu-icon svg {
				width: 62px;
			}
		.header-icons{
			position: absolute;
			top: 50%;
			left: 92.5%;
			margin-right: -50%;
			transform: translate(-50%, -50%);

			width:52px;
		}
		.main {
				padding: 42px 0 30px;
				display: flex;
				flex-grow: 1;
				position: absolute;
		}
		.confirm{
			position: absolute;
			top: 30%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);

			width:100%;
			height:500px;

		}
		.confirm-block{
			position: relative;
			width:100%;
			height:100%;
		}
		.confirm-block h1{
			font-size: 35px;
			font-weight: 500;
			text-align: center;
			padding: 50px;
		}

		.confirm-block input{
			position: relative;
			box-shadow: 1px 1px 3px #333231;
			border-radius: 10px;
			width: 80%;
			padding: 12px;
			font-size: 30px;
			margin-left: 10%;
			background: transparent;
			text-decoration: none;
			color:#2c2d2a;
			margin-top: 50px;
		
		}
		.faq{
			position: relative;
			width:100%;
			height:80%;
			overflow-y: auto;
		}
		/* .faq-menu{
			position: relative;
			width:100%;
		
			background-color: red;
		}
		.faq-menu h5{
			padding: 0;
			margin: 0;
			padding: 10px;
			position: relative;
			width:100%;

			font-size: 25px;
			font-weight: 800;
		} */
		.faq h1{
			position: relative;
			width:80%;
			margin-left: 10%;
			text-align: center;
			padding-top: 50px;
			padding-bottom: 50px;
			font-size: 48px;
			font-weight: 800;
		}
		.faq h2{
			position: relative;
			width:90%;
			margin-left: 5%;
			font-size: 28px;
			font-weight: 500;
		}
		.confirm-block button{
			position: absolute;
			top: 80%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);
			border-radius: 5px;
			border: 0;
			box-shadow: 1px 1px 3px #333231;
		
			padding: 17px;
			
			font-size: 33px;
			background: transparent;
		}
		.error-block{
			position: relative;
			width:100%;
			height:90%;
		}
		.error-block{
			position: absolute;
			top: 35%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);

			width:80%;
		}
		.attention-rules{
			position: fixed;
			bottom:0%;
			width:100%;
			padding: 30px;
			height:400px;
			background-color: #242424;
			z-index: 999;

		}
		.attention-rules input[type="checkbox"]{
			position: relative;
			display: inline-block;
			float:left;
			width: 61px;
			height: 61px;
			border: 1px solid #808080;
			content: "";
			background: #FFF;
		  }
		.attention-rules h1{
			position: relative;
			display: inline-block;
			float:left;
			font-size: 45px;
			text-align: left;
			width: calc(100% - 100px);
			color:#fff;
			margin-left: 30px;
		
		}
		.attention-rules a{
			color:#E6B938;
		
		}
		.attention-rules button{
			position: absolute;
			top: 50%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);

			border: 0;
			width:50%;
			height:80px;
			border-radius: 15px;
			font-size: 40px;
			font-weight: 600;

			background-color: #E6B938;
		}
		.lang-block{
			position: absolute;
			top: 50%;
			left: 80%;
			margin-right: -50%;
			transform: translate(-50%, -50%);
			width:100px;
			height:100%;
		}
		.lang-img{
			position: absolute;
			top: 50%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);
			width:100%;
			height:60px;
			background-image: url('img/uk.png');
			background-position: center;
			background-size: cover;
			border: 2px solid #000;
		}
		.lang-block:active,.lang-block:hover .lang-active{
			display: block;
		}
		.lang-active{
			display: none;
			position: absolute;
			top: 240px;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);
			width:110%;
			height:200px;
			padding: 10px;
			background-color: rgba(75, 75, 75, 0.588);
			border-radius: 10px;
		}
		.lang-img-first{
			position: relative;
			width:100%;
			height:60px;
			background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Flag_of_the_U.S..svg/1200px-Flag_of_the_U.S..svg.png');
			background-position: center;
			background-size: cover;
		}
		.lang-img-two{
			position: relative;
			width:100%;
			height:70px;
			margin-top: 25px;
			background-image: url('img/sp.jpg');
			background-position: center;
			background-size: cover;
		}
		
		.rules-block{
			position: relative;
			margin-top: 150px;
			margin-left: 2%;
			width:96%;
			font-size: 25px;
		}
		.rules-block p{
			display: block;
			text-align: center;
		}
		.error-svg{
			position: absolute;
			top: 35%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);

			font-size: 45px;
			text-align: center;
			width:70%;
		}
		.error-svg svg{
			width:30%;
			fill: #b38f2c;
		}
		.feedback-block{
			position: absolute;
			top: 50%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);

			font-size: 50px;
			text-align: center;
			width:98%;
			font-weight: 800;
		}
		.feedback-block p{
			display: block;
		}
		.whatsapp-feedback{
			position: absolute;
			top: 82.5%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);
			width: 150px;
			height: 150px;
			border-radius: 50%;
			background-image: url('img/whatsapp.png');
			background-position: center;
			background-size: cover;
		}
		.feedback-maps{
			position: absolute;
			top: 80%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);
			width:300px;
		}
		.feedback-maps svg{
			fill: #E6B938;
		}
		.error-page{
			position: absolute;
			top: 50%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);

			font-size: 50px;
			text-align: center;
			width:80%;
			font-weight: 800;
		}
		#slider {
			position: relative;
			overflow: hidden;
			
		  }
		  
		  #slider ul {
			position: relative;
			margin: 0;
			padding: 0;
			width:100%;
			height: 1280px;
			list-style: none;
		  }
		  
		  #slider ul li {
			position: relative;
			display: block;
			float: left;
			margin: 0;
			padding: 0;
			height: 100%;
			width: 100%;
		  }
		  
		  a.control_prev, a.control_next {
			position: absolute;
			top: 50%;
			z-index: 999;
			display: block;
			padding: 8% 3%;
			width: auto;
			height: auto;
			background: #E6B938;
			color: #ffffff;
			text-decoration: none;
			font-weight: 600;
			font-size: 56px;
			border-radius: 50%;
			opacity: 0.8;
			cursor: pointer;
		  }
		  
		  a.control_prev:hover, a.control_next:hover {
			opacity: 1;
			-webkit-transition: all 0.2s ease;
		  }
		  
		  a.control_prev {
			border-radius: 0 25px 25px 0;
		  }
		  
		  a.control_next {
			right: 0;
			border-radius: 25px 0 0 25px;
		  }

		  .footer-scanning-tutorial{
			position: fixed;
			bottom: 0;
			width: 100%;
		
			background-color: rgb(255, 255, 255);
			z-index: 9999;
		}
		.footer-scanning-tutorial-gif{
			position: relative;
			display: inline-block;
			float:left;
			width: 40%;
		}
		.footer-scanning-tutorial-text{
			position: relative;
			display: inline-block;
			float:left;
			width: 60%;
			margin-top: 60px;
		}
		.footer-scanning-tutorial-text h5{
			margin: 0 0;
			width: 90%;
			color: #606060;
			text-align: left;
			font-size: 35px;
		}

		.footer-block-active{
			position: fixed;
			bottom: 0;

			display: flex;
			align-items: center;
			height: 272px;
			width: 100%;
			white-space: nowrap;
			flex-shrink: 0;
			font-weight: 600;
			padding: 0px 30px;
			font-size: 25px;
			
			background-color: #ffffff;
			
			border-top: 2px solid rgba(44, 45, 42, 0.25);
			z-index: 999;
		}
		.footer-block-active h1{
			position: absolute;
			top: 33%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);
			color: #ffffff;
			border: 5px solid #606060;
			border-radius: 25px;
			font-size: 55px;

			background-color: #00d200;
			padding: 9px 15px;
			text-align: center;
		}
		.footer-block-active h5{
			position: absolute;
			top: -2%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);
			color: #606060;
			border: 5px solid #606060;
			border-radius: 25px;
			font-size: 55px;
			background-color: #e6b838;
			padding: 8px 15px;
			text-align: center;
		}
		.footer-block-active h2{
			position: absolute;
			top: 75%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);
			color: #606060;
			text-align: center;
			font-size: 30px;
			
		}
		.footer-block-active-a{
			color:#E6B938;
			font-size: 30px;
		}
		.footer-block-checkbox{
			position: absolute;
			top: 70%;
			left: 18%;
			margin-right: -50%;
			transform: translate(-50%, -50%);

			width: 37px;
			border: 0;
			height: 37px;
			border: 1px solid #808080;
			content: "";
			background: #FFF;
		}

		.footer-block{
			position: absolute;
			top:142;

			width:100%;
			height: calc(100% - 142px);
			overflow-y: hidden;
			background-color: rgba(33, 33, 33, 0.705);
			
			z-index: 9999;

		
		}
		
	
		.footer-menu-block{
			position: relative;
			
			width:100%;
			height:150px;

			background-color: rgb(33, 33, 33);
			border: 2px solid rgb(81, 81, 81);
		
		}


		#example_2 {
			position: absolute;
			top: -100%;
			margin-top: 145px;
			animation: anim1 1s infinite;
			animation-iteration-count: 1;
		  }
		  @keyframes anim1 {
			from   {top: -100%; left: 0px;}
			to {top: 0px; left: 0px;}
		  }

		.footer-menu{
			position: relative;
			display: block;
			width:23%;
			height:100%;
			margin-left: 1%;
			margin-right: 1%;
			color: #606060;
		
			
		}
		.footer-menu-icon-block{
			position: absolute;
			top: 50%;
			left: 15%;
			margin-right: -50%;
			transform: translate(-50%, -50%);
		}
		.footer-menu-icon-block svg{
			fill:#b38f2c;
		}

		.footer-menu-block h2,h3,h4{
			position: absolute;
			top: 50%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);

			width:500px;
			text-align: left;
			letter-spacing: 2px;
			font-size: 38px;
			color:#fff;
		}
		

	

		.create-qrcode{
			position: absolute;
			top: 30%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%);
			padding: 20px;
			width:600px;
			border-bottom: 1px solid var(--arrow-fill);
			text-align: center;
			font-family: var(--italic-font);
			font-size: 50px;
			font-weight: 400;
		}








		@import url(https://fonts.googleapis.com/css?family=Varela+Round);


		
		.itc-container {
			max-width: 100%;
			margin: 0 auto;
			height:100%;
		  }
	  
		  .itc-slider__items {
			counter-reset: slide;
		  }
	  
		  .itc-slider__item {
			flex: 0 0 100%;
			max-width: 100%;
			counter-increment: slide;
			height: 1220px;
			position: relative;
		  }
	  
		  .itc-slider__item::before {
			content: counter(slide) "/5";
			position: absolute;
			top: 10px;
			right: 20px;
			color: #fff;
			font-style: italic;
			font-size: 32px;
			font-weight: bold;
			display: none;
		  }
	  
		  .itc-slider__item:nth-child(1) {
			background-image: url("img/8.jpg");
			background-position: center;
			background-size: cover;
		  }
	  
		  .itc-slider__item:nth-child(2) {
			background-image: url("img/2.jpg");
			background-position: center;
			background-size: cover;
		  }
	  
		  .itc-slider__item:nth-child(3) {
			background-image: url("img/3.jpg");
			background-position: center;
			background-size: cover;
		  }
	  
		  .itc-slider__item:nth-child(4) {
			background-image: url("img/4.jpg");
			background-position: center;
			background-size: cover;
		  }
	  
		  .itc-slider__item:nth-child(5) {
			background-image: url("img/5.jpg");
			background-position: center;
			background-size: cover;
		  }
		  .itc-slider__item:nth-child(6) {
			background-image: url("img/6.jpg");
			background-position: center;
			background-size: cover;
		  }
		  .itc-slider__item:nth-child(7) {
			background-image: url("img/7.jpg");
			background-position: center;
			background-size: cover;
		  }
		  .itc-slider__item:nth-child(8) {
			background-image: url("img/9.jpg");
			background-position: center;
			background-size: cover;
		  }
		.nav-dots {
			width: 100%;
			bottom: 5px;
			height: 11px;
			display: block;
			position: absolute;
			text-align: center;
		}
		.nav-dots .nav-dot {
			top: -5px;
			width: 18px;
			height: 18px;
			margin: 0 4px;
			position: relative;
			border-radius: 100%;
			display: inline-block;
			background-color: rgba(0, 0, 0, 0.25);
		}

		.nav-dott{
			top: -5px;
			width: 18px;
			height: 18px;
			margin: 0 4px;
			position: relative;
			border-radius: 100%;
			display: inline-block;
			background-color: rgba(0, 0, 0, 0.8);
		}
	}