html,
	body {
	position: relative;
	height: 100%;
	}

	body {
	margin: 0;
	padding: 0;
	background:rgb(0, 0, 0);
	}
	
	#video-container{
			margin-left:auto;
			margin-right:auto;
			height:var(--doc-height,100vh) ;
	}
	.content-wrapper{
			width:100%;
			position: relative;
			display: flex;
			align-content: center;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height:var(--doc-height,100vh) ;
	}
	#video-container video{
			width:100%;
			max-width:100vw;
	}
  /* Swiper */
	#video-container .swiper {
	width: 100%;
	height: var(--doc-height,100%);
	max-height:var(--doc-height,100vh);
	}
	#video-container .swiper-wrapper{
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
	}
	#video-container .swiper-slide {
			height:var(--doc-height,100vh);
	text-align: center;
	font-size: 18px;
	width:100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	overflow:hidden;
	}
	#video-container .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	}
	#video-container .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets{
	left:10px;
	right:auto;
	}
	#video-container .swiper-pagination-bullet-active{
	background:#696969;
	}

	/* Audio */
	.audiocontrol{
			position: absolute;
			right: 14px;
			top: calc(50vh - 41px);
			z-index: 99;
			background: #fff;
			border-radius: 32px;
			padding: 10px;
			display: flex;
			align-content: center;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			opacity: 0.2;
			box-shadow: 0 2px 20px rgb(0 0 0 / 20%);
			transition:all ease 1s;
			transform: translateX(150%);
	}
	.audiocontrol.muted{
			opacity: 1;
			transform: translateX(0%);
	}
	.audiocontrol svg{
			fill: #a73535;
			width: 32px;
			height: 32px;
	}
	.audiocontrol.muted ~ #circleText{
			opacity: 1;
			z-index: 98;
			width:auto;
			height:40px;
	}
	.audiocontrol ~ #circleText{
			opacity: 0;
			z-index: 0;
			position: absolute;
			right: 15px;
			top: calc(50vh - 85px);
			fill: currentColor;
			height: auto;
			max-width: 80px;
			transform-origin: center;
			width: 66%;
			
			color: #fff;
			text-shadow: 0 1px 2px #000;
			animation:circle 0.4s alternate infinite;
	}
	
	/* Redirect section */
	.redirect-start{
			background:#fff;
	}
	.warning-text{
			background:#fff;
			font-family:inherit;
			animation: blink 0.3s alternate infinite;
	}

  /* Keyframe */
	@keyframes blink {
			100%{
					opacity:0.5;
					transform:translateY(-5px);
			}
	}
	@keyframes circle {
			100%{
					transform:translateY(-20px);
			}
	}  
	@media screen and (min-width: 768px){
			body {
					background-color: #fff;
			}
			video{
					border-radius: 10px;
			}
      #video-container .swiper-pagination{
        display: none;
      }
	}