/* Last updated:  23-Jun-2022   Version: 1.0                   */
/* Copyright 2022  MusicBiz Enterprises, All rights reserved.   */

/* add the following to the webpage CSS and modify accordingly */


/*-----------------*/
/* carousel: Video */
/*-----------------*/
.carouselContainer_video {
/*	position: relative; */
	clear: both;
	float: left;
	width: 100%;
	/*height: 1000px; */
}
.videoCarousel {
	clear: both;
	width:  996px;   /* carousel: 832; arrowPad: 50x2; arrow: 32x2  */
	height: 850px;
	margin: 0 auto;
	/*background-color: red;*/
	}
.videoCarousel_title {
   clear: both;
   width: 100%;
   text-align: center;
   font-size: 1.5rem;
   padding: 10px 0 10px 0;
}

/*-----------------------------*/
/* carousel: LeftRight_overlap */
/*-----------------------------*/
#videoCarousel_LeftRight_overlap {
	position: relative;
}
.videoCarousel_videoBox {
}
.video-container {
}

/* video sizes:                           offsetLeft   offsetRight
    center:  100%             360 x 640      236
    offset1:  75% of center   270 x 480      101           461
    offset2:  75% of offset1  202 x 360        0           630
    Carousel width:           832 

                              
    center:  100%             270 x 480      177           
    offset1:  75% of center   202 x 360       76           346
    offset2:  75% of offset1  152 x 270        0           472
	Carousel width:           624 
*/
.videoCarousel_center {
	position: absolute; 
	width:  360px;
	height: 640px;
	top:      0px;
	left:   318px;    /* 236 + 50 + 32 */
	z-index: 3;
	/* border: 1px solid black; */
}
.videoCarousel_offset1 {
	position: absolute;
	width:  270px; 
	height: 480px;
	top:    80px;  
	z-index: 2;
	/* border: 1px solid black; */
}
.videoCarousel_offset2 {
	position: absolute;
	width:  202px;
	height: 360px;
	top:    140px;
	z-index: 1;
}
.videoCarousel_offset2_left {
	position: absolute;
	left: 82px;      /* 0 + 50 + 32 */
}
.videoCarousel_offset1_left {
	position: absolute;
	left: 183px;      /* 101 + 50 + 32 */
}
.videoCarousel_offset1_right {
	position: absolute;
	left: 543px;      /* 461 + 50 + 32 */
}
.videoCarousel_offset2_right {
	position: absolute;
	left: 712px;      /* 630 + 50 + 32 */
}

/*---------------*/
/* carousel text */
/*---------------*/
.carousel_TextBox {
	position: absolute;
	top: 650px;
	width: 100%;
}
.carouselText1 {
	/* position: absolute; */
	font-size: 3rem;
}
.carouselText2 {
	/* position: absolute; */
	font-size: 2.5rem;
}
.carouselText3 {
	/* position: absolute; */
	font-size: 1.5rem;
}
.carouselTitle_LeftRight {
	/*top:  65%;
	left: 0%;
    */
	width: 100%;
	text-align: center;
}
.carouselVenue_LeftRight {
	/*top:  68%;
	left: 0%;
    */
	width: 100%;
	text-align: center;
}
.carouselDate_LeftRight {
	/*top:  72%;
	left: 0%;
    */
	width: 100%;
	text-align: center;
}
/*-----------------------------*/
/* carousel: outside arrows    */
/*-----------------------------*/
.carousel_outsideArrowBox {
	position: absolute;
	width:  100%; 
	height: 32px;
	top:    304px; 
	z-index: 0;
	/* background-color:red; */
}
.carousel_outsideArrow_left {
	float: left;
}
.carousel_outsideArrow_right {
	float: right;
}

img.carousel_outsideArrow {
	height: 32px;
	width:  32px;
}



/*-----------------------------*/
/* carousel: dot Indicator     */
/*-----------------------------*/
.carousel_dotIndicator {
	position: absolute;
	/*clear: both; */
	width:  288px; 
	height: 50px;
	top:  740px;
	left: 355px;       /* 273 + 50 + 32 */
 }
 .carousel_dotIndicator_Box {
	 width: 100%;
	 /* background-color: grey; */
 }
 .carousel_arrowBox {
     visibility: hidden;
 }
 .carousel_arrow {
    cursor: pointer;
	width: 32px;
	height: 32px;
 }
.carousel_arrowLeft {
	 float: left; 
	 width: 64px;
	 padding-right: 32px;
}
.carousel_arrowRight {
	 float: left; 
	 width: 64px;
	 padding-left: 32px;
}
 .carousel_dotBox {
	float: left;
	padding-top: 8px;
	/* position:absolute;
	top:  0%;
	left: 64px;  /* figure out if possible to auto center with absolute */
	width: 160px;
 }
 .carousel_dotIndicator_dot {
	width: 16px;
	height: 16px;
 }
 .carousel_dotIndicator_Arrow {
	width: 32px;
	height: 32px;
 }

 .genSplash_dotImage {        /* used by genDotIndicator.js  */
	float: left; 
}

.carousel_linkBox {
	padding: 0;
}

/*-----------------------*/
/*  @media definitions   */
/*-----------------------*/
@media only screen and (max-width: 1700px) { 
	.videoCarousel {
		width:  788px;      /* carousel: 624; arrowPad: 2x50; arrowHead: 2x32  */
		height: 750px;
		}
	.videoCarousel_center {
		width:  270px;
		height: 480px;
		top:      0px;
		left:   259px;        /* 177 + 50 + 32 */
	}
	.videoCarousel_offset1 {
		width:  202px; 
		height: 360px;
		top:    60px;  
	}
	.videoCarousel_offset2 {
		width:  152px;
		height: 270px;
		top:    105px;
	}
	.videoCarousel_offset2_left {
		left: 82px;        /* 0 + 50 + 32 */
	}
	.videoCarousel_offset1_left {
		left: 158px;       /* 76 + 50 + 32 */
	}
	.videoCarousel_offset1_right {
		left: 428px;      /* 346 + 50 + 32 */
	}
	.videoCarousel_offset2_right {
		left: 554px;      /* 472 + 50 + 32 */
	}
	.carousel_TextBox {
		top:  500px;
	}
	.carousel_outsideArrowBox {
		top:    224px; 
	}
	.carousel_dotIndicator {
		top:  590px;
		left: 252px;      /* 170 + 50 + 32 */
	 }
}


@media only screen and (max-width: 820px) {
	.videoCarousel {
		width:  624px;      /* carousel: 624; arrowPad: 2x50; arrowHead: 2x32  */
	}
	.carousel_outsideArrowBox {
		/* visibility: hidden; */
		display: none;
       	 }
	.carousel_arrowBox {
		visibility: unset;
	 }
	 .videoCarousel_center {
		left:   177px;        /* 177 + 50 + 32 */
	}
	.videoCarousel_offset2_left {
		left: 0px;        /* 0 + 50 + 32 */
	}
	.videoCarousel_offset1_left {
		left: 76px;       /* 76 + 50 + 32 */
	}
	.videoCarousel_offset1_right {
		left: 346px;      /* 346 + 50 + 32 */
	}
	.videoCarousel_offset2_right {
		left: 472px;      /* 472 + 50 + 32 */
	}
	.carousel_dotIndicator {
		left: 170px;      /* 170 + 50 + 32 */
	 }

}

@media only screen and (max-width: 623px) {
	.videoCarousel_offset2 {
        display: none;
	}

	.videoCarousel {
		width:  472px;
		}
	.videoCarousel_center {
		left:   101px;  
	}
	.videoCarousel_offset1_left {
		left:     0px;
	}
	.videoCarousel_offset1_right {
		left:   270px;
	}
	.carousel_dotIndicator {
		left:   91px; 
	}

 }

 @media only screen and (max-width: 471px) { 
	.videoCarousel_offset1 {
		display: none;
	    }
	.videoCarousel {
		width:  320px;
		}
	.videoCarousel_center {
		left:   25px;  
		}
	.carousel_dotIndicator {
		left:   15px; 
		}
 }