/* Last updated:  02-May-2022   Version: 1.0                   */
/* Copyright 2013  MusicBiz Enterprises, All rights reserved.   */

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

.mContainer_slideshow {
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	height: auto;
}
#slideshow1 {
    float:left;
	width:492px;
	margin-top: 50px;
	margin-left:240px;
}

/*------------------------*/
/* carousel: rightOverlap */
/*------------------------*/
.carouselContainer_rightOverlap {
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	height: 800px;
}
#carousel_rightOverlap {
	position: relative;
	clear: both;
    float:left;
	width:50%;
	height: 400px;
	margin-top: 50px;
	margin-left: 28%;
}
.imgBox_rightOverlap {
}
img.rightOverlap {
    position: absolute;
	left: 0%;
	width: 320px;
	height: 320px;
}

/*---------------*/
/* carousel text */
/*---------------*/
.carouselText1 {
	position: absolute;
	font-size: 3rem;
}
.carouselText2 {
	position: absolute;
	font-size: 2.5rem;
}
.carouselText3 {
	position: absolute;
	font-size: 1.5rem;
}
.carouselDate {
	top:  82%;
    left: 0%; 
}
.carouselType {
	top:  85%;
    left: 23%; 
}
.carouselLink {
	top:  97%;
	left: 23%;
}


/*-----------------------------*/
/* carousel: LeftRight_overlap */
/*-----------------------------*/
.carouselContainer_LeftRight_overlap {
    display: block;
	clear: both;
	float: left;
	width: 100%;
	height: 1000px;
}
#carousel_LeftRight_overlap {
	position: relative;
	clear: both;
	width:  1425px;
	height: 670px;
    margin: auto;
	/* margin-top: 50px;
	margin-left: 20%; */
}
.imgBox_LeftRight_overlap {
}
img.LeftRight_overlap {
    position: absolute;
}
img.carousel_center {
	position: absolute;
	left:   33.33%;
	top:    0%;
	width:  480px;
	height: 480px;
	border: 1px solid black;
}
img.carousel_offset1 {
	position: absolute;
	top:    60px;
	width:  360px; 
	height: 360px;
	border: 1px solid black;
}
img.carousel_offset2 {
	position: absolute;
	top:    105px;
	width:  270px;
	height: 270px;
	border: 1px solid black;
}
img.carousel_offset1_left {
	position: absolute;
	left: 14.2%;
}
img.carousel_offset1_right {
	position: absolute;
	left: 60.5%;
}
img.carousel_offset2_left {
	position: absolute;
	left: 0%;
}
img.carousel_offset2_right {
	position: absolute;
	left: 81%;
}

.carouselDate_LeftRight {
	top:  73%;
    left: 33.3%; 
}
.carouselType_LeftRight {
	top:  74%;
    left: 51%; 
	width: 15%;
	text-align: right;
}
.carouselLink_LeftRight {
	top:  80%;
	left: 0%;
	/* left: 42.5%; */
	width: 100%;
	text-align: center;
}

/*-----------------------------*/
/* carousel: dot Indicator     */
/*-----------------------------*/
.carousel_dotIndicator {
	position: absolute;
	/*clear: both; */
	width:  480px; 
	height: 50px;
	top:  88%;
	left: 33.3%; 
 }
 .carousel_dotIndicator_Box {
	 width: 100%;
	 /* background-color: grey; */
 }
 .carousel_arrowBox {
 }
 .carousel_arrow {
    cursor: pointer;
	width: 32px;
	height: 32px;
 }
.carousel_arrowLeft {
	 float: left; 
	 margin-left: 80px;
}
.carousel_arrowRight {
	 float: right; 
	 margin-right: 80px;
}
 .carousel_dotBox {
	position:absolute;
	top:  10%;
	left: 35%;  /* figure out if possible to auto center with absolute */
 }
 img.carousel_dotIndicator_dot {
	width: 16px;
	height: 16px;
 }
 img.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: 1425px) { 
	.carouselContainer_LeftRight_overlap {
		height: 900px;
	}
	#carousel_LeftRight_overlap {
		width:  1190px;
		height: 550px;
	}
	img.carousel_center {
		width:  400px; 
		height: 400px; 
	}
	img.carousel_offset1 {
		top:    50px;
		width:  300px;
		height: 300px; 
	}
	img.carousel_offset2 {
		top:    87.5px;
		width:  225px;
		height: 225px;
	}
	.carouselLink_LeftRight {
		top:  81%;
	}
	.carousel_dotIndicator {
		width: 400px;
	 }
	.carousel_dotBox {
		left: 32%;  /* figure out if possible to auto center with absolute */
	 }

 }


@media only screen and (max-width: 1190px) { 
	.carouselContainer_LeftRight_overlap {
		height: 800px;
	}
	#carousel_LeftRight_overlap {
		width:  950px;
		height: 500px;
	}
	img.carousel_center {
		width:  320px; 
		height: 320px; 
	}
	img.carousel_offset1 {
		top:    40px;
		width:  240px;
		height: 240px; 
	}
	img.carousel_offset2 {
		top:    80px;
		width:  160px;
		height: 160px;
	}
	.carouselDate_LeftRight {
		top:  66%;
	}
	.carouselType_LeftRight {
		top:  67%;
	}
	.carouselLink_LeftRight {
		top:  78%;
	}
	.carousel_dotIndicator {
		top: 88%;
		width: 320px;
	}
	.carousel_arrowLeft { 
		margin-left: 40px;
    }
    .carousel_arrowRight {
		margin-right: 40px;
    }
	.carousel_dotBox {
		left: 27%;  /* figure out if possible to auto center with absolute */
	 }

 }
 

 @media only screen and (max-width: 950px) { 
	#carousel_LeftRight_overlap {
		width:  680px;
	}
	img.carousel_offset2 {
        display: none;
	}
	img.carousel_center, .carouselDate_LeftRight, .carousel_dotIndicator {
		left:   26.47%;
	}
	img.carousel_offset1_left {
		left: 0%;
	}
	img.carousel_offset1_right {
		left: 64.7%;
	}
	.carouselType_LeftRight {
		width: 22%;
	}
	.carousel_dotIndicator {
		width:  320px; 
	 }

 }

 @media only screen and (max-width: 680px) { 
	#carousel_LeftRight_overlap {
		width:  320px;
	}
	img.carousel_offset1 {
        display: none;
	}
	img.carousel_center, .carouselDate_LeftRight, .carousel_dotIndicator {
		left:   0%;
	}
	.carouselType_LeftRight {
		width: 50%;
	}

 }

 @media only screen and (max-width: 540px) { 
    .carouselContainer_LeftRight_overlap {
	   height: 900px;
	}
}