/* Description: Transfer the in-page styles from cuban_mini_cigars.php to a separate CSS file.  Last Updated: 2025-06-02 */

    body {
        font-family: "Montserrat", "Noto Sans SC", chinese !important;
    }
	
	.img_desktop { 
		display: block;
		cursor: pointer;
	}
	
	.img_mobile { 
		display: none!important; 
	}
	
	.cuban_mini_cigars {
		width: 100%;
		overflow-x: hidden;
	}
	
    .cmc_container {
		position: relative;
        font-family: "Montserrat", "Noto Sans SC", chinese !important;
		background: #fff;
		padding: 0;
		line-height: 1;
		overflow-x: hidden;
    }
	
	.mini_banner_container img {
		width: 100%;
	}
	
	.cmc_logo {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 85px 34% 70px;
		padding: 80px 34%;
		background: #fff;
	}
	
	.cmc_logo img {
		width: 100%;
		max-width: 170px;
		height: auto;
	}
	
	.cmc_block {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
	}
	
	.cmc_block.short {
		height: calc(100vh - 300px);
		overflow: hidden;
	}
	
	.cmc_block.wideshort {
		height: calc(100vh - 254px);
		overflow: hidden;
	}
	
	.cmc_block.short video {
		height: 80vh;
	}

	.cmc_block.video_frame {
		background: url(/library/images/tc/cuban_mini_cigars/cmc_main_video_bg2.jpg) no-repeat center #94805b;
		background-size: cover;
		padding: 0 0 100px;
	}

	.cmc_block.video_frame .cmc_title {
		position: relative;
	}


	
	.cmc_block.short .cmc_title > div:nth-child(1) img {
		filter: drop-shadow(0 0 10px #fff);
	}
	
	.cmc_block.short .cmc_title > div:nth-child(2) {
		text-shadow: 0 -2px 50px #fff, 0 -2px 50px rgba(104, 177, 194, 0.9), 0 -2px 25px #fff;
	}
	
	
	.cmc_blocks .cmc_title {
		filter: drop-shadow(0 0 1px #00000066) drop-shadow(0 0 3px #00000066);
	}
	
	
	.cmc_block.short .btn_general {
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(4px);
    	-webkit-backdrop-filter: blur(4px);
	}
/*
	.cmc_block.short .cmc_title {
		position: relative;
		padding-bottom: 2vh;
	}
*/
	.cmc_blocks {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.cmc_blocks .cmc_block {
		width: 50%;
		aspect-ratio: 1 / 1;
	}
	
	.cmc_video {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;	
	}
	
	
	.cmc_block.short {
		background: #eee;
	}
	
	/*
	.cmc_block.short .cmc_title {
		background: rgb(74,137,154);
		background: linear-gradient(180deg, rgba(74,137,154,1) 60%, rgba(74,137,154,0) 90%);
	}
	*/
	
	.cmc_block.wideshort {
		background: #ffc229;
	}
	
	.cmc_block.wideshort .cmc_title {
		background: rgb(255,194,41);
		background: linear-gradient(180deg, rgba(255,194,41,1) 60%, rgba(255,194,41,0) 90%);
	}
	
	.cmc_video video {
		object-fit: cover;
      	width: 100vw;
      	height: 65vh;
      	position: absolute;
      	bottom: 0;
	}
	

	
	
	.cmc_visual {
		display: flex;
		width: 100%;
		height: 100%;
		align-items: flex-end;
	}
	
	.cmc_visual img {
		display: block;
    	width: 100%;
		height: 100%;
    	object-fit: cover;
		margin: 0 auto;
	}
	
	.cmc_blocks .cmc_block .cmc_visual video {
		object-fit: cover;
		width: 100%;
		height: 100%;
		aspect-ratio: 1 / 1.025641025641;
		position: absolute;
	}
	
	.cmc_title {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 16px;
		padding: 7vh 15px;
		z-index: 1;
	}
	
	.cmc_title > div:nth-child(1) {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: flex-end;
		gap: 10px;
		font-size: 44px;
	}
	
	.cmc_title > div:nth-child(1) span {
		display: block;
		margin-bottom: -2px;
	}
	
	.cmc_title > div:nth-child(1) img {
		max-height: 44px;
		width: 100%;
	}
	
	.cmc_blocks .cmc_title > div:nth-child(1) img {
		max-width: fit-content;
	}
	
	[lang=en] .cmc_blocks .cmc_title > div:nth-child(1) img {
		max-height: 60px;
		width: auto;
	}
	
	.cmc_title > div:nth-child(2) {
		font-size: 36px;
		font-weight: 300;
		line-height: 1.25;
		margin-bottom: 4px;
	}
	
	[lang=en] .cmc_title > div:nth-child(2) {
		font-size: 30px;
	}
	
	.cmc_title > div:nth-child(3) {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: flex-end;
		gap: 24px;
	}
	
	.cmc_title .btn_general {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 12px 36px;
		font-size: 14px;
		text-align: center;
		color: #000;
		border: 1px solid #000;
		border-radius: 100px;
		letter-spacing: 0.05em;
		cursor: pointer;
		min-width: 140px;
	}
	
	.cmc_title .btn_general:hover {
		background: #000;
		color: #fff;
	}
	
	.cmc_blocks .cmc_block {
		color: #fff;
	}
	
	.cmc_blocks .cmc_block .cmc_title img {
		filter: brightness(0) invert(1);
	}
	
	.cmc_blocks .cmc_block .btn_general {
		border-color: #fff;
		color: #fff;
		background: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(4px);
    	-webkit-backdrop-filter: blur(4px);
	}
	
	.cmc_blocks .cmc_block .btn_general:hover {
		border-color: #fff;
		background: #fff;
		color: #000;
	}
	
	.cmc_block.last {
		justify-content: space-between;
		background: #f0f3f5;
		position: relative;
		z-index: 10;
	}
	
	.cmc_block.last .cmc_title {
		position: relative; 
	}
	
	.cmc_video_slider {
		padding: 80px 0;
		background: #f5edd6;
	}
	
	.cmc_btmBox {
		position: relative;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: flex-end;
		aspect-ratio: 8.5 / 1;
	}
	
	.cmc_btmBox .btmBox_ani {
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		text-align: center;
		opacity: 0;
	}
	
	.cmc_btmBox .btmBox_ani img {
		width: 20vw;
	}

	.cmc_video_top,
	.cmc_video_main {
		display: flex; 
		justify-content: center; 
		align-items: flex-start; 
		width: 100vw; 
	}

	.cmc_video_top {
		max-height: 52vh; 
		background: #f4dc9a;
		cursor: pointer;
	}

	.cmc_video_top video,
	.cmc_video_main video {
		width: 100vw; 
		max-width: 90vw; 
		object-fit: contain;
	}

	.cmc_video_top video {
		max-height: 52vh; 
	}
	
	
	#btmBox1.anime { animation: mv_btmBox1 1.75s ease-in-out; animation-delay: 0.2s; animation-fill-mode: forwards; opacity: 0; }
	@keyframes mv_btmBox1 { from { left: 0; opacity: 0; } to { left: -71vw;  opacity: 1; } }
	
	#btmBox2.anime { animation: mv_btmBox2 1.25s ease-in-out; animation-delay: 0.7s; animation-fill-mode: forwards; opacity: 0; }
	@keyframes mv_btmBox2 { from { left: 0; opacity: 0; } to { left: -23vw;  opacity: 1; } }
	
	#btmBox3.anime { animation: mv_btmBox3 1.25s ease-in-out; animation-delay: 0.6s; animation-fill-mode: forwards; opacity: 0; }
	@keyframes mv_btmBox3 { from { right: 0; opacity: 0; } to { right: -23vw;  opacity: 1; } }
	
	#btmBox4.anime { animation: mv_btmBox4 1.75s ease-in-out; animation-delay: 0.4s; animation-fill-mode: forwards; opacity: 0; }
	@keyframes mv_btmBox4 { from { right: 0; opacity: 0; } to { right: -71vw;  opacity: 1; } }

/* Owl Carousel Config */
video {
  max-width: 100%;
  -webkit-transform-style: preserve-3d;
}

video::-webkit-media-controls {
  display: none!important;
}

video::-webkit-media-controls-start-playback-button {
  display: none!important;
}

video::slotted::-webkit-media-controls-container,
video:host::shadow::-webkit-media-controls-container {
      display:none !important;
      visibility: hidden!important;
      opacity: 0 !important;
     -webkit-appearance: none !important;
 }

*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

*::--webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}


.slider-mask::before,
.slider-mask::after {
  position: absolute;
  z-index: 1;
  left: 100%;
  width: 100vw;
  height: 100%;
  background: rgba(34,34,34,.8);
  display: block;
  content: ' ';
}

.slider-mask::after {
  left: auto;
  right: 100%;
}

.owl-carousel {
  width: 100%;
  /*max-width: 30vw;*/
  position: relative;
  z-index: 1;
}

.owl-stage-outer {
  overflow: visible !important;
}

.owl-item {
  width: 100%;
  background-color: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.owl-nav {
  font-size: 60px;
}

.owl-next {
  float: right;
}

.owl-dots {
  text-align: center;
  width: 80%;
  margin: -40px auto 0;
}

.owl-dot span{
  background: white;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: block;
  margin: 0 4px;
}

.owl-dot.active span{
  background: red;
}

	
.owl-item {
	opacity: 0.6;
	pointer-events: none!important;
}

.owl-item.active {
	opacity: 1;
	pointer-events: none!important;
}
	
.owl-item .item {
	position: relative;
	padding-left: 30%;
	pointer-events: none!important;
}

.owl-item video,
.owl-item.active video {
	position: relative;
	z-index: -1!important;
	-webkit-transform-style: preserve-3d;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
}

.owl-item video:after {
	content :'';
	position: absolute;
	width: 50px;
	height: 50px;
	background: #000;
}
	
.owl-item .item .video_title {
	position: absolute;
	top: 0;
	left: 10%;
	width: 55%;
	height: 100%;
	display: flex;
	flex-direction: column;
	/*color: #fff;*/
	color: #66511b;
	font-size: 2vw;
	/*text-shadow: 0 4px 8px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.3), 0 -1px 0 rgba(0,0,0,0.2);*/
	text-shadow: 0 2px 4px rgba(245,237,214,1), 0 0px 1px rgba(245,237,214,0.8), 0 0 1px rgba(245,237,214,0.6);
	padding-top: 8%;
	z-index: 2!important;
	font-family: "Montserrat", "Noto Sans SC", chinese !important;
	-webkit-transform: translateZ(0) 
}
	
.owl-item .item .video_title div:nth-child(1) {
	font-size: 2.15em;
	font-weight: 400;
	letter-spacing: -0.025em;
	margin-bottom: 1vw;
	line-height: normal;
}

.owl-item .item .video_title div:nth-child(2) {
	display: flex;
	flex-direction: column;
	font-size: 0.65em;
	font-weight: 300;
	line-height: 1.25;
	min-height: 50px;
}

.owl-item .item .video_title div:nth-child(2) span {
	font-size: 1.75em;
	margin-bottom: 0.25vw;
}

.owl-theme .owl-nav {
	position: absolute;
	left: 0;
	bottom: 30%;
	margin: 0;
	width: 100vw;
	height: 0;
	color: #fff;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
	
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
	width: 5vw;
	height: 5vw;
	max-width: 100px;
	aspect-ratio: 1 / 1;
	background: rgba(0,0,0,0.6)!important;
	margin: 0!important;
	/*border: 0.2vw solid #fff;*/
	border: none;
	font-size: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
	
.owl-carousel .owl-nav button span {
	display: block;
	width: 1vw;
	height: 1vw;
	border: 0.2vw solid #fff;
	border-width: 0 0 0.2vw 0.2vw;
}

.owl-carousel .owl-nav button.owl-prev {
	border-radius: 0 5% 5% 0;
}
	
.owl-carousel .owl-nav button.owl-next {
	border-radius: 5% 0 0 5%;
}
	
.owl-carousel .owl-nav button.owl-prev span {
	transform: rotate(45deg);
	margin-right: -0.4vw;
}
	
.owl-carousel .owl-nav button.owl-next span {
	transform: rotate(-135deg);
	margin-left: -0.4vw;
}
	
.owl-carousel .owl-nav button:hover {
	background: #000!important;
}
	
.owl-carousel .owl-nav button:hover span {
	border-color: #fff;
}

.owl-theme .owl-dots {
	position: relative;
	width: 100vw;
	margin-top: 10px;
	display: none;
}
	
.owl-theme .owl-dots .owl-dot span {
	background: #ec9e41;	
}
	
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
	background: #fff;	
}
	
	.cmc_block.last .cmc_visual.mobile { 
		display: none;
	}
	
	.btmSlider.owl-carousel {
		max-width: none;
	}
	
	.btmSlider .owl-item {
		filter: blur(3.5px);
		scale: 0.7;
		opacity: 0.8;
		transform-origin : 50% 100%;
		z-index: 1;
	}
	
	.btmSlider .owl-item.center {
		filter: none;
		scale: 1.2;
		opacity: 1;
		z-index: 2;
	}
	
	.btmSlider .owl-item .item {
		padding: 0;
	}
	
	.btmSlider .owl-item .item img {
		width: 100%;
		max-width: 220px;
	}
	
	.fixbtn { 
		position: fixed; 
		bottom: 125px; 
		left: 50%; 
		height: 44px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: -100px; 
		z-index: 11; 
		letter-spacing: 3px; 
		cursor: pointer; 
		transform:translateX(-50%);
		border-radius: 100px;
		overflow: hidden;
		background: #fff;
		padding: 1.5px;
		box-shadow: 0px 6px 30px rgba(0,0,0,0.6), 0px 2px 12px rgba(254,201,98,0.8), 0px 2px 2px rgba(0,0,0,0.7);
	}
	
    .fixbtn div {
		display: flex;
		justify-content: center;
		align-items: center;
		max-width: 220px;
		min-width: 180px;
		background: rgb(0,0,0);
		background: -moz-linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(60,60,60,1) 50%, rgba(0,0,0,1) 100%);
		background: -webkit-linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(60,60,60,1) 50%, rgba(0,0,0,1) 100%);
		background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(60,60,60,1) 50%, rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
		height: 100%;
		padding: 0 25px;
		font-family: arial, chinese;
		font-weight: 400;
		text-shadow: 1px 1px 2px #000;
		letter-spacing: 2px;
		color: #ffffff;
		text-align: center;
		border-radius: 100px;
		overflow: hidden;
		z-index: 2;
    }
	
	 .fixbtn i {
		display: block;
		position: absolute;
		animation: rotate360-ani 4s infinite ease-in-out;
		width: 300px;
		height: 300px;
		background: url(/library/images/tc/cuban_mini_cigars/cmc_fixbtn_bg2.png) no-repeat center;
		background-size: cover;
		z-index: 1;
	}
	
	@keyframes rotate360-ani {
		0% {
			transform: rotate(0deg);
			}
		50% {
			transform: rotate(180deg);
			}
		100% {
			transform: rotate(360deg);
		}
	}
	
/* Owl Carousel Config ends */
	

    @media only screen and (max-width: 1024px) {
		
		.cmc_title {
			padding: 35px 15px;
		}
		
		.cmc_title > div:nth-child(1) img {
			max-height: 4vw;
		}
		
		.cmc_title > div:nth-child(2) {
			font-size: 3vw;
		}
		
		[lang=en] .cmc_title > div:nth-child(2) {
			font-size: 2.5vw;
		}
		
		.cmc_title > div:nth-child(3) {
			gap: 3%;
		}
		
		.cmc_title .btn_general {
			padding: 10px 30px;
			min-width: 120px;
		}
		
		.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
			width: 7vw;
    		height: 7vw;
		}
		
		.owl-carousel .owl-nav button span {
			width: 1.5vw;
			height: 1.5vw;
		}
		
		.cmc_video_top video,
		.cmc_video_main video {
			max-width: 100vw;
		}

    }
	
    @media only screen and (max-width: 820px) {
		
		.cmc_block {
			min-height: 400px;
		}

		
		.cmc_title, .cmc_block.wideshort .cmc_title  {
			padding: 50px 15px;
		}
		
		.cmc_title > div:nth-child(1) img {
			max-height: 5vw;
		}
		
		.cmc_title > div:nth-child(2) {
			font-size: 3vw;
		}
		
		.cmc_block.last {
			min-height: 380px;
		}
	}
	
	@media only screen and (max-width: 767px) {
		
		.img_desktop { 
			display: none!important; 
		}
	
		.img_mobile { 
			display: block!important; 
		}
		
		.cmc_short_video {
			padding-bottom: 0;
		}
		
		.cmc_block.wideshort {
			height: 520px;
		}
		
		.cmc_block.short .cmc_visual img {
			max-width: 96%;
		}
		
		.cmc_title > div:nth-child(2) {
			font-size: 18px!important;
		}
		
		.cmc_blocks .cmc_block {
			width: 100%;
			
			aspect-ratio: auto;
        	min-height: 65vh;
		}
		
		.owl-carousel {
  			max-width: 44vw;
		}
		
		.owl-item .item .video_title {
			font-size: 3.5vw;
		}
		
		.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
			width: 60px;
    		height: 60px;
			border-width: 2px;
		}
		
		.owl-carousel .owl-nav button span {
			width: 15px;
			height: 15px;
			border-width: 0 0 2px 2px;
		}
		
		.owl-carousel .owl-nav button.owl-prev span {
			margin-right: -4px;
		}
		
		.owl-carousel .owl-nav button.owl-next span {
			margin-left: -4px;
		}
		
		
    }

    @media only screen and (max-width: 500px) {
		
		.fixbtn {
			z-index: 10;
		}
		
        .mini_cigar_container>div:nth-of-type(2) {
            padding: 0;
        }
		
		.cmc_container {
			padding: 0 0 50px;
		}
		
		.cmc_title > div:nth-child(1) img {
			max-height: 32px;
		}
		
		[lang=en] .cmc_block.last .cmc_title > div:nth-child(1) img,
		[lang=en] .cmc_blocks .cmc_title > div:nth-child(1) img {
			max-height: 40px;
			max-width: 300px;
		}
		
		.cmc_title > div:nth-child(2) {
			font-size: 20px;
		}
		
		.owl-carousel {
  			max-width: 92vw;
		}
/*	
		.owl-item .item .video_title {
			font-size: 6vw;
		}
*/	
		.cmc_video video {
			height: 55vh;
		}
		
		.cmc_block.short {
			height: calc(100vh - 300px);
		}
	
		.cmc_block.short video {
			height: 65vh;
		}
		
		.cmc_block.last .cmc_visual {
			display: none;
		}
		
		.cmc_block.last .cmc_visual.mobile {
			display: block;
		}
		
		.owl-theme .owl-dots {
			display: block;
		}

.owl-item .item .video_title {
	font-size: unset!important;
}
	
.owl-item .item .video_title div:nth-child(1) {
	font-size: 56px!important;
	line-height: normal;
	margin-bottom: 10px;
}
.owl-item .item .video_title div:nth-child(2) {
	font-size: 17px!important;
	margin-bottom: 5px;
	line-height: normal;
}
	
.owl-item .item .video_title div:nth-child(2) span {
	font-size: 32px!important;
	font-weight: 300;
	line-height: normal;
}
	
	.cmc_block.video_frame {
		padding-bottom: 50px;
		background-position: top left -150px;
		background-size: 300%;
	}
		
}
	
	.icon-icon_envelop:after,
	.specialnotify_promotion_alert { display: none!important; }

				.cmc_short_animation { position: relative; display: flex; width: 100%; justify-content: center; align-items: flex-end; overflow: hidden; background: #eee; }
				.box_container { position: relative; display: flex; width: 100%; justify-content: center; align-items: flex-end; max-width: 90vw; padding: 0 5vw; }
				#box { position: relative; width: 25vw; max-width: 300px; height: auto; aspect-ratio: 1 / 1.75; }
				#box img { width: 100%; height: auto; }
				
				#box_left { position: absolute; width: 100%; opacity: 0; bottom: -2%; }
				#box_left.anime { animation: mv_box_left 0.8s ease-out; animation-delay: 1.3s; animation-fill-mode: forwards; opacity: 0; }
				@keyframes mv_box_left { from { left: 0; opacity: 0; } to { left: -90%;  opacity: 1; } }
				
				#box_right { position: absolute; width: 100%; opacity: 0; bottom: -2%; }
				#box_right.anime { animation: mv_box_right 0.8s ease-out; animation-delay: 1.3s; animation-fill-mode: forwards; opacity: 0; }
				@keyframes mv_box_right { from { right: 0; opacity: 0; } to { right: -90%;  opacity: 1; } }
				
				#box_front { position: absolute; z-index: 4; width: 100%; bottom: -98%; opacity: 0; box-shadow: 0 0 40px rgba(0,0,0,0.3) }
				#box_front.anime { animation: mv_box_front 1s ease-out; animation-delay: 0s; animation-fill-mode: forwards; opacity: 0; }
				@keyframes mv_box_front { 0% { bottom: -98%;  opacity: 0; } 70% { bottom: -1%; opacity: 1; } 100% { bottom: -2%; opacity: 1; } }
				
				#box_back { position: absolute; width: 100%; bottom: -10%; opacity: 0; }
				#box_back.anime { animation: mv_box_back 1s ease-out; animation-delay: 0.5s; animation-fill-mode: forwards; opacity: 0; }
				@keyframes mv_box_back { from { bottom: -40%;  opacity: 1; } to { bottom: 0; opacity: 1; } }
				
				.box_mini_cigar { position: absolute; width: 22%; bottom: -50%; opacity: 0; }
				
				#box_mc1 { left: 1.5%; z-index: 1; }
				#box_mc1.anime { animation: mv_box_mc1 1s ease-in-out; animation-delay: 1.25s; animation-fill-mode: forwards; opacity: 0; }
				@keyframes mv_box_mc1 { from { bottom: -50%; opacity: 0; } to { bottom: -14%; opacity: 1; } }
				
				#box_mc2 { left: 20.5%; z-index: 2; }
				#box_mc2.anime { animation: mv_box_mc2 1s ease-in-out; animation-delay: 0.85s; animation-fill-mode: forwards; opacity: 0; }
				@keyframes mv_box_mc2 { from { bottom: -50%; opacity: 0; } to { bottom: -8%; opacity: 1; } }
				
				#box_mc3 { left: 39.5%; z-index: 3; }
				#box_mc3.anime { animation: mv_box_mc3 1s ease-in-out; animation-delay: 0.75s; animation-fill-mode: forwards; opacity: 0; }
				@keyframes mv_box_mc3 { from { bottom: -50%; opacity: 0; } to { bottom: -2%; opacity: 1; } }
				
				#box_mc4 { left: 58.5%; z-index: 2; }
				#box_mc4.anime { animation: mv_box_mc4 1s ease-in-out; animation-delay: 1s; animation-fill-mode: forwards; opacity: 0; }
				@keyframes mv_box_mc4 { from { bottom: -50%; opacity: 0; } to { bottom: -8%; opacity: 1; } }
				
				#box_mc5 { left: 77.5%; z-index: 1; }
				#box_mc5.anime { animation: mv_box_mc5 1s ease-in-out; animation-delay: 1.35s; animation-fill-mode: forwards; opacity: 0; }
				@keyframes mv_box_mc5 { from { bottom: -50%; opacity: 0; } to { bottom: -14%; opacity: 1; } }

#popupContainer ,#popupContainer2{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
	
  padding: 2vh 2vw 6vh;
}

#popupContent {
  position: relative;
  width: 100%;
  height: 100%;
  animation: gb-popup-slide-zoom-right 0.5s forwards;
}

#popupContent2 {
  position: relative;
  width: 100%;
  height: 100%;
  animation: gb-popup-slide-zoom-left 0.5s forwards;
}
	
.popup_container { 
	display: flex; 
	justify-content: center; 
	align-items: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
}

@keyframes gb-popup-slide-zoom-right {
  0% {opacity: 0; transform: scale(0.2) translate(-200%, 0%);}
  100% {opacity: 1; transform: scale(1) translate(0%, 0%);}
}

@keyframes gb-popup-slide-zoom-left {
 0% {opacity: 0;transform-origin: 100% 50%;transform: scale(0.2) translate(200%, 0%);}
 100% {opacity: 1;transform-origin: 100% 50%;transform: scale(1) translate(0%, 0%);}
}

#closeButton ,#closeButton2 {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 50px;
  font-weight: 100;
  line-height: 1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background: #ffffff80;
  border-radius: 100px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
	
	
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1366px) {
	::-webkit-scrollbar {
        display: none;
    }

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1366px) 
and (orientation : landscape) {
	
	
	.cmc_block.short video {
		height: 90vh;
	}
	
	.cmc_block.short {
    	height: calc(100vh - 150px);
	}


}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1366px) 
and (orientation : portrait) {
	
	.cmc_block.short video {
		height: 65vh;
	}
	
	.cmc_block.short {
		height: calc(100vh - 500px);
	}
	
	.cmc_block.wideshort {
		height: calc(100vh - 400px);
	}
	
	.cmc_block.short .cmc_title,
	.cmc_block.wideshort .cmc_title {
		padding: 80px 15px;
	}
	
}