:root {
  --booked-cell-color: #283761; /* #6b3d13 */
  --header-cell-color: #d3e2f5; /* #6b3d13 */
  --time-cell-color: #c08d4b; /* #6b3d13 */
  --free-cell-hover-color: #fcdb78; /* #6b3d13 */
}


@font-face {
    font-family: 'Micra';
    font-style: normal;
    font-weight: 400;
    src: local('Micra'), local('Micra-Normal'), url(../fonts/micra/micra.woff) format('woff'), url(../fonts/micra/micra.ttf) format('truetype');
}

.mobile {
	display: none;
}

.desktop {
	display: block;
}

.contents-wrapper {
	position: relative;
	isolation: isolate;
}
.wrapper_dj_content {
	background-color: #000001;
}

.video-cage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0, rgba(18, 18, 18, 0.2) 70%, rgba(0, 0, 0, 1) 95%);
}

.table_over {
	margin: auto;
}

.contents-cage {
	max-width: 1200px;
	margin: auto;
}
.first_block_dj {
	display: grid;
	grid-template-columns: 470px 600px;
	justify-content: space-between;
	padding-left: 60px;
}
.first_block_video {
	position: relative;
}
.video_holder_dejavu {
	position: absolute;
	inset: 0;   
	z-index: -1;
	height: 100vh;
}

.video_holder_dejavu::after {
	content: "";
	position: absolute;
	background-color: rgba(0, 0, 0, 0.3);
	inset: 0;
}

.video_holder_dejavu > div {
	padding-bottom: 100px;
}


.text_descr_ready *,
.text_after_logo * {
	line-height: 2.1;
	text-align: right;
}
.text_after_logo {
	padding-top: 22px;
}

.moving-image-cage {
	width: 470px;
	height: 281px;
}

.moving-image-cage img {
	position: absolute;
	max-width: 100%;
	#transition: opacity 0.3s;
	opacity: 0;
}
.moving-image-cage img.visible,
.moving-image-cage img:first-child {
	opacity: 1;
}

.descr_dj {
	border-bottom: 1px solid #708fc2;
	line-height: 2.2;
	padding-bottom: 25px;
	margin-top: -9px;
}

.descr_dj p {
	color: #708fc2;
	font-size: 19px;
	text-transform: uppercase;
	text-align: center;
	font-family: 'Micra', arial;
}

.text_descr_ready .desktop {
	display: block;
}

.text_descr_ready .mobile {
	display: none;
}

.text_descr_ready h2 {
	color: #98bd07;
	font-weight: 400;
	font-size: 20px;
	margin-top: 38px;
	text-transform: uppercase;
	padding-left: 10px;
	margin-bottom: 24px;
}

.text_descr_ready div p {
	font-size: 20px;
	color: #708fc2;
}
.img_woman_dj {
	border: 1px solid #708fc2; 
}
.img_wrapper_dj {
	align-self: end;
}
.book_now.dj_btn {
	width: 270px;
	    padding: 1% 6% 1% 6%;
		margin-top: 55px;
		color: #000;
}
.block_book_dj {
	padding-left: 60px;
}
.block_book_dj * {
	color: #708fc2;
	font-size: 20px;
	line-height: 1.8;
}
.block_book_dj h2 {
	font-weight: 400;
	text-transform: uppercase;
	margin-top: 45px;
}
.block_book_dj ul {
	margin-top: 42px;
}
.block_book_dj li {
	list-style: none;
	position: relative;
	padding-left: 37px;
	line-height: 2.1;
}
.block_book_dj li::before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #708fc2;
	inset: 17px auto auto -3px;
}
.table_container {
	margin-top: 140px;
}
.opiniоn_dj h2,
.gallery_dj h2,
.table_container h2 {
	font-size: 28px;
	color: #98bd07;
	text-align: center;
	text-transform: uppercase;
	font-weight: 400;
	font-family: 'Micra', arial;
}
.opiniоn_dj {
	margin-top: 140px;
}
.price_dj {
	display: flex;
	justify-content: center;
	column-gap: 60px;
	margin-top: 50px;
	margin-left: 80px;
}
.price_dj div {
	width: 360px;
}
.price_dj div p {
	font-size: 20px;
	color: #aeb9d8;
	line-height: 1.6;
}
.price_dj div.special_align_vertical p {
	line-height: 1.6;
	#margin-top: 3px;
}
.price_dj div.special_align_vertical p:last-child {
	margin-bottom: -5px;
}
.price_dj div p  strong {
	font-weight: normal;
	font-size: 20px;
	margin-left: 5px;
}
.special_align_vertical {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
}
.gallery_dj {
	margin-top: 166px;
}
.btn_group {
	display: flex;
	justify-content: center;
	column-gap: 190px;	
	margin-top: 100px;
	padding-bottom: 219px;
}
.opinion_btn,
.book_btn {
	padding: 10px;
    color: #000;
    width: 279px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #7f9e05;
    border: 2px solid #c5c5c5;
    cursor: pointer;
    transition: all 0.4s;
    letter-spacing: 2px;
    border-radius: 5px;
	font-weight: 500;
}
.opinion_btn {
	background-color: #15161a;
	color: #c7c7c7;
	border: 1px solid #c5c5c5;
	font-size: 19px;
}

.book-table {
	max-width: 796px;
	width: 100%;
	height: 370px;
	margin: auto;
}

.week-column {
	display: flex;
	gap: 16px;
}

.dayUl {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.colHeader {
	text-transform: uppercase;
	border: solid 2px var(--header-cell-color);
	color:var(--header-cell-color);
	text-align: center;
	border-radius: 6px;
	padding: 10px 0;
	user-select: none; 
	font-size: 12px;
}

.colHeader span {
	display:block;
	margin-top: 6px;
	font-size: 20px;
}

.timeCell {
	border: solid 2px #5a7dbf;
	border-radius: 6px;
	color:#6e8cbe;
	width: 100px;
	text-align: center;
	padding: 8px 0;
	cursor: pointer;
	user-select: none; 
	font-size: 19px;
	height: 43px;
}

.timeCell.booked_time,
.timeCell.passed {
	color:#000;
	border-color: var(--booked-cell-color);
}


.timeCell.booked_time span,
.timeCell.passed span {
	opacity: 0;
}


.timeCell.free_time:hover {
	border: solid 2px #8cb3fc;
	color: #8cb3fc;
}


.wrapper_reserve {
	position: relative;
	margin-top: 60px;
	transition: opacity 0.5s;
	opacity: 0;
}

.wrapper_reserve.visible {
	opacity: 1;
}

.butn_next {
	position: absolute;
	top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.butn_next .right_arrow,
.butn_next .left_arrow {
	border-left: solid 3px #fff;
	border-top: solid 3px #fff;
	border-bottom:none;
	border-right: none;
	transform: rotate(-45deg);
	width: 20px;
	height: 20px;
	position: absolute;
	cursor: pointer;
}

.butn_next .right_arrow {
	transform: rotate(135deg);
	right: 0;
	
}

.bookingFormWrapper .formBtn {
	background: #708fc2 !important;
	color:#f3f3f3;
}

.bookingFormWrapper .clickButtons:hover ,
.bookingFormWrapper .clickButtons.selected {
	background: #708fc2 !important;
	color:#f3f3f3;
}

 

input[type="radio"]:checked + span, input[type="checkbox"]:checked + span {
    background: #708fc2 !important;
}

.bookingFormWrapper .clickButtons {
	position: relative;
}

.bookingFormWrapper .clickButtons.disabled {
	color: #b1b1b1 !important;
	pointer-events: none;
}

.bookingFormWrapper .clickButtons.disabled::after {
    content: "soon";
    font-size: 14px;
    bottom: -22px;
    position: absolute;
    left: 11px;
    text-align: center;
	color: #818181;
}
#gallery_car .owl-item {
	border: 1px solid #98bd07;
}
#gallery_car .owl-stage-outer::before {
	content: '';
	position: absolute;
	z-index: 100;
	inset: 0 0 0 0;
	 pointer-events: none;
	background: linear-gradient(90deg,rgba(0, 0, 1, 1) 0%, rgba(0, 0, 1, 0) 30%, rgba(0, 0, 1, 0) 70%, rgba(0, 0, 1, 1) 100%);
}
.teableSliderWrapper {
	position: relative;
	overflow: hidden;
	height:370px; 
}

.teableSliderWrapper > div {
	display: flex;
	position: absolute;
	gap: 16px;
}

#gallery_car {
	margin-top: 65px;
}

@media only screen and (max-width: 700px) {
	
	.mobile {
		display: block;
	}

	.desktop {
		display: none;
	}

	.gallery_dj  {
		padding: 0 10px;
		margin-top: 120px;
	}
	
	.text_descr_ready .desktop {
		display: none;
	}
	
	.text_descr_ready .mobile {
		display: block;
		
	}
	
	.text_descr_ready div {
		margin-left: 0 !important;
	}

	.text_descr_ready > div:last-of-type {
		text-align: center;
	}
	
	.text_descr_ready .mobile p {
		text-align: center;
	}
	
	.text_descr_ready h2 {
		font-size: 18px;
		text-align: center;
		margin: 80px 0 60px 0;
	}

	.text_descr_ready h2 > p {
		font-size: 18px;
		text-align: center;
	}
	
	.video_holder_dejavu video {
		transform: rotate(180deg);
		width: 1400px;
		# width: 100vh;
		# height: 100vw;
		# object-fit: cover; 
	}
	
	.video_holder_dejavu::after {
		content: "";
		position: absolute;
		background-color: rgba(0, 0, 0, 0.2);
		inset: 0;
	}
	
	.first_block_dj {
		 padding: 0 10px;
		 display: block;
	}
	.moving-image-cage {
		width: 100%;
		height: 229px;
		position: relative;
	}
	.img_wrapper_dj img {
		width: 100%;
	}
	.moving-image-cag img {
		left: 0;
		right: 0;
	}
	.block_book_dj {
		padding: 0;
	}
	.book_now.dj_btn {
		margin: 75px auto 0 auto;
	}
	
	.btn_group {
		display: flex;
		flex-direction: column;
		align-items: center;
		column-gap: 0;
		row-gap: 40px;
		margin-top: 100px;
		padding-bottom: 115px;
	}
	
	#gallery_car .owl-stage-outer::before {
		background: none;
	}
	.price_dj {
		flex-direction: column;
		row-gap: 40px;
		margin-left: 0;
	}
	
	.price_dj div {
		width: auto;
		text-align: center;
	}
	
	.block_book_dj *:not(a) {
		font-size: 18px;
	}
	
	.block_book_dj h2 {
		text-align: center;
		margin-top: 75px;
	}
	
	.descr_dj {
		margin-top: 10px;
		margin-bottom: 40px;
		border-bottom: none;
	}
	
	.table_container {
		margin-top: 100px;
	}
	
	.opiniоn_dj {
		margin-top: 125px;
	}
	
	.opinion_btn {
		border: 1px solid #c5c5c5;
		font-weight: 400;
		font-size: 18px;
	}
	
	.bookingFormWrapper {
		height: 670px;
	}
	
	.butn_next {
		top: -45px;
	}
	
	.wrapper_reserve {
		margin-top: 125px;
	}
	/*
	.butn_next .right_arrow,
	.butn_next .left_arrow {
		border-left: solid 3px #5a7dbf;
		border-top: solid 3px #5a7dbf;
	}
	*/
	
	.block_book_dj li::before {
		inset: 17px auto auto 3px;
	}
}