/*======================================================================================================= 
									SECTION: VIDEO PLAYER
=========================================================================================================*/
.puma { /*overall container*/
	position:relative;
	width: 100%; min-height:350px; 
	border:0px solid lightgreen;   
	display: flex;
	justify-content: center;
	align-items: center; font-size:1.55rem;
} 
	
.puma-main {/*main container*/
	display: block; position:relative; margin: 0 auto; 
	height:100% width:auto; 
	border:0px solid black; overflow: visible;   
} 
	
.puma-main.active { 
	box-shadow: 5px 10px 15px #ccc;
} 
	


/*--------------------------------------------------
Left Box
--------------------------------------------------*/
.puma-main .box-left { /*main content (video)*/
	float:left; display: block; position:relative;
 	width: 650px; 
	height:600px; /*must set the height*/ 
 	border:0px solid blue; 
	text-align:center; 
}

.puma-main .box-left.active {
  border-radius: 10px 0px 0px 10px; 
}

 



/*vertical menu*/
.puma-main .box-left .subbox1 { 
	display: inline-block; 
	position: absolute; 
	float:right; 
 
 	height:80%; 
	width:60px; 

	right:-70px; /*follow the vertical menu width and -10px*/
	
	padding: 2px;
	box-sizing: border-box; 
 	
	bottom:10px; 
	color:#000;
	border:0px solid pink;  
	text-align:center; z-index:1200; visibility:visible;  
}

 
.puma-main .box-left .subbox1.active {
  /*background-color:#FF6; 
  background-color:yellow; */
  width:60px; 
  right:3px;
  color:#fff;
  opacity: 1; 
  /*transition:all .1s; */
  transition:all 150ms; 
}



.puma-box .box-left .subbox2 { /*bottom menu (for desktop only*/
   	display: block;  position:absolute; clear:both;  background-color:#3F6; float:none;  bottom:0; left:0;
	min-height:30px; 
	width: 650px;  
	border:2px solid blue; padding:3px;
} 


 

/*--------------------------------------------------
Right Box
--------------------------------------------------*/
.puma-main .box-right {
	float:left; display: none;  
	text-align:center; height:100%; background-color:#CFC; 
	width: 0px; /*when active, JS is to update the width */
	/*min-height:150px; max-height:100%; */
	/*height:600px;*/
	height:600px;
	
	border:0px solid blue; position: relative;
 	border-radius: 0px 10px 10px 0px; 
	
	/*
	transition-property: width;
  	transition-duration: 4s;
	 
	transition: width 2s;*/
	overflow:hidden;
} 

.puma-main .box-right.active {
  	/*width: 250px;  display: block; */
  	width: 350px;  
	display: block; 
	transition: width 4s;
}

 


/*----Right panel: desktop only--------------------------*/
.puma-main .box-right .header { /*header container*/
	 background-color: #EBEBEB; 
	 display:block; top:0; left:0; position:absolute; 
	 width:100%; height:40px; padding:5px; font-size:2rem; font-weight:800; 
}

.puma-main .box-right .content { /*content container*/
	 background:#fff; border-radius: 5px; position:relative; display:block; 
	 height:100%; width:100%; padding:7px; 
	 overflow-y: scroll;  
}

.puma-main .box-right .content::-webkit-scrollbar { /*vertical scrollbar size*/
  width:7px;
}

.puma-main .box-right .content::-webkit-scrollbar-track { /*the vertical track line*/
  background:#ccc; border-radius: 50px;
}

.puma-main .box-right .content::-webkit-scrollbar-thumb { /*the moving part*/
  background:#666; border-radius: 50px;
}


/*the sub-container for each list elem*/
.puma-main .box-right .content .vid {  
 display:flex; 
 align-items:center; 
 gap: 15px; background:#f7f7f7; 
 margin-bottom:10px; 
 padding:5px 10px; 
 /*border:1px solid rgba(0,0,.1);*/
 border:0px solid #E1E1E1; 
 cursor:pointer;
 align-items: flex-start; /*aligns the flex items at the top of the container*/
}

.puma-main .box-right .content .vid:hover {
 background:#eee; 
}

.puma-main .box-right .content .vid.active {
 background: #9CC; 
}

.puma-main .box-right .content .vid.active .title {
  color:#fff;
}


.puma-main .box-right .content .vid video {  /*the poster image list*/
 	border-radius: 5px; width:150px; background-color:#666;
}

.puma-main .box-right .content .vid .vidtitle { /*the video title*/
  	color: #333; font-size:1.5rem; margin-top:0; border: 0px solid yellow;
}
/*---------------------end right panel-----------------------------*/





.puma-main .sBox3 { /*video title*/
   	display: block; position:absolte;  background-color:#3F6; float:none; clear:both; bottom:0; left:0;
	min-height:30px; 
	width: 650px;  /*follow box-left*/
	border:2px solid blue; padding:3px;
} 





 

/*--------------------------------------------------
Bottom Box
--------------------------------------------------*/
.puma-box .box-bottom { /*bottom menu (for desktop only)*/
   	display: block;  position:relative; clear:both;  background-color:lightgreen; float:left;   
	min-height:30px; 
	width: 650px;  
	border:2px solid blue; padding:3px;
} 








/*--------------------------------------------------
Common
--------------------------------------------------*/
.puma:after, 
.puma-main:after, 
.puma-main .box-left:after, 
.puma-main .subbox1:after, 
.puma-main .box-right:after,
.puma-main .box-bottom:after
 { /*to avoid the parent div's height is 0*/
	content: " ";
	display:block;
	clear:both; 
}


@media(max-width:480px) {
		
	.puma  {
 		 width:100%; 
		 height:400px; /*the height will be optimised by JS*/ 
 	} 
 	
	.puma-main {
 		 width:100%; height:100%; 
	}
	
	.puma-main .box-left {/*video content*/
 		 width:100%; /*follow the parent height*/
		 height:100%; /*follow the parent height*/

		 position:relative;
	}
	
	
	.puma-main .sBox3 {/*video title*/
 		 width:100%; /*follow the parent height*/
		 height:100%; /*follow the parent height*/
		 display:none;
	}
	
	
	.puma-main .subbox1 {
 		right:5px;
 		/*background: rgb(232 240 254 / 0.2);*/
 	}
	
	.puma-main .box-right {
		display: none; float:none;   
 	}
}


 
.vid-nav { 
	font-size:3.25rem; font-weight:bold
 } 


/*----------------------------------------------------------------------------------
doth3 = dot horizontal:  video player
------------------------------------------------------------------------------------*/
.butt-dots { /*wrapper*/
	border: 1px solid green; 
 	text-align: center;  
	height:40px; 
	width:100%;  
	padding:5px; border-radius:5px; 
}  

.butt-dots span {
  height: 5px;width: 5px; margin: 1px;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
  pointer-events: none;  
}

.butt-dots span.active {
  background-color: #fff; 
}

 




/*---------------------------------------- 
vertical menu
----------------------------------------*/
.verticalmenu {
	display: flex; 
	flex-direction: column;
	/*background-color: DodgerBlue;*/
	justify-content: end; /*up down pos*/
	align-items: center; /*left right pos*/
	z-index:1100; color: #000; height:100%;
}

.verticalmenu > div {
	width: 50px; height:50px; 
	margin-top:5px;
	border: 0px solid red;
	text-align: center;
	
	justify-content: center;
	align-items: center;
}

.verticalmenu > div.active {
	width: 45px; height:45px; 
	margin-top:4px;
	border: 0px solid yellow;
}

.verticalmenu > div > button {
	display: flex; 
	justify-content: center;
	align-items: center; 
	text-align:center; 
	transition:all .5s ease-in-out; 
	
	background-color: #f1f1f1;
	border:0px solid blue; 
	width:100%; height:100%; 
	border-radius:50%; padding:5px; 
	cursor:pointer; color: #000;
}

.verticalmenu > div > button:hover {
  background-color: rgba(210, 210, 210, 0.7)
}

.verticalmenu > div > button.active {
  color:#fff;
  background-color: rgba(240, 240, 240, 0.1)
}

.verticalmenu > div > button.active:hover {
  color:#fff;
  background-color: rgba(240, 240, 240, 0.5)
}
 
 
 

/*--------------------------------------------------
Swiper
--------------------------------------------------*/
*::before,
*::after {
   box-sizing: border-box;
}


 

/* Body styling */
html,
body {
 position: relative; 
 height: 100%;
}
 

.swipercontainer {
	width:100%; background-color:#0F0;
	height:100%;  
 	justify-content: center;	 
}



/* Swiper container styling */
.swiper {
  /*right: 1rem; */
   width: 100%;
   height: 100%; 
  /* padding:2px; border:2px solid yellow; */
   
   position:relative;
}


.swiper-slide {
   text-align: center;
    /* Center slide text vertically */
   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;  
    
  /* background-color:orange;*/ 
}



/* Default image styling*/
.swiper-slide img {
   display: block;
    height: auto;
   object-fit: cover;
   
   /*border:1px solid red;*/    
 } 


.imgwrapper {
   display: block; 
   width: 100%;
   height: 70%;
 } 


/* each slide bground styling 
.slide_0 { background-color:#9FF;} 
.slide_1 { background-color:#643ca3;} 
.slide_2 { background-color:#e38364;}
.slide_3 { background-color:#faf47a;}
.slide_4 { background-color:#64e3c1;}
.slide_5 { background-color:#00C;}
*/
 /*.slide_1, .slide_2, .slide_3, .slide_4, .slide_5 { background-color:#fff ;}*/

.vidsource {position:relative; bottom:0; left 0; z-index:3000; font-size:1.75rem; clear:both;}


/*video dimension properties*/
iframex, videox {
 	
	display: block; 
	clear:both; 
	margin: 0 auto;
	
	width: 100%;
	height: calc(.5625 * 100vw);  /* .5626 is for 16:9 video screen video. Use .75 for 4:3*/
	
	max-width: 1280px;
 	max-height: 720px; /*max-height is .5626 times the max-width*/
 	
	min-width: 120px;
 	min-height: 180px; /*min-height is .5626 times the min-width*/
	
}


/*------------------------------------------------
Media Queries
------------------------------------------------*/
@media all and (max-width:2400px){ /*largescreen*/

}

@media all and (max-width:1600px){ /*wide screen laptop*/

}

@media all and (max-width:1200px){ /*laptop*/

}

@media all and (max-width:991px){ /*small screen*/

}

@media all and (max-width:768px){ /*iPads, Tablets*/
}

@media all and (max-width:480px){ /*mobile screen*/
	.swiper-slide img {
	   padding: 0.25rem;
	   max-width: 100%;
	   height: auto;
	}
}


 
/*-------------------------------------------
three dot button
-------------------------------------------*/
.flex-container {
  display: flex;
  align-items: stretch;
  /*background-color: #999;*/
}

.flex-container:hover {
  background-color: #666; 
  cursor:pointer;
}

.flex-container > div {
  /*background-color: DodgerBlue;*/
  color: white;
  margin: 2px; padding:5px; 
  text-align: left;
  line-height: 20px;
  font-size: 1.55rem;
}
 
 
 
 

/*--------------------------------------------------
Modal popup
--------------------------------------------------*/
/* Modal Background type #0 */
.vmodal-bground {
    display: none;  
    position: fixed;  
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w, opacity */
    /*background-color: rgba(60, 179, 113, 0.7);  Black w, opacity */
}

/* Modal Background type #1 */
.vmodal-bground1 {
    display: none;  
    position: fixed;  
    left: 0; top: 0;
    width: 100%; height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w, opacity */
}

.vmodal-bground1.active {top:40%; height: 60%; }



 /*from smallest size to widest box size*/
.vmodal-ct40 {height: 300px; margin:0 auto; margin-top:110px; margin-bottom:50px; padding: 5px; background-color:transparent;}  
.vmodal-ct70 {height: 450px; margin:0 auto; margin-top:110px; margin-bottom:50px; padding: 5px; background-color:transparent;}  

.vmodal-ct40:after, 
.vmodal-ct70:after 
{ /*to avoid the parent div's height is 0*/
	content: "";
	display:block;  
	clear:both;
}






/*------------------------------------------------
Media Queries
------------------------------------------------*/
@media all and (max-width:2400px){ /*largescreen*/
	.vmodal-ct70 { width: 65%; padding:3px;} 
	.vmodal-ct40 { width: 35%; padding:3px;} 
}

/*MAIN REFERENCE FOR DESKTOP*/
@media all and (max-width:1600px){ /*wide screen laptop e.g. HP*/
	.vmodal-ct70 { width: 70%; /*background-color:blue;*/} /*pricing graph*/
	.vmodal-ct40 { width: 40%; /*background-color:gold;*/}  /*submit form image, dialog box*/
}

@media all and (max-width:1200px){ /*laptop*/
	.vmodal-ct70 { width: 80%;} 
	.vmodal-ct40 { width: 50%;} 
}

@media all and (max-width:991px){ /*small screen*/
	.vmodal-ct70 { width: 72%;} 
	.vmodal-ct40 { width: 60%;} 
}

@media all and (max-width:768px){ /*iPads, Tablets*/
	.vmodal-ct70 { width: 76%;} 
	.vmodal-ct40 { width: 65%;} 
}

/*MAIN REFERENCE FOR MOBILE*/
@media all and (max-width:480px){ /*wide screen laptop*/
	.vmodal-ct70 {position:absolute; bottom:0px; left:0; right:0; width:100%; height:100%; 
	 padding-left:5px;  padding-right:5px; margin-bottom:0; background-color:transparent;}  
  	
	.modal-ct40 { margin-top:50px; padding: 3px; }  
	.modal-ct40 { width: 70%; /*background-color:gold;*/} 
}



/*------------------------------------------------
Close Button
------------------------------------------------*/
/*overal box*/
.close-vmodalbox 
{
	float:right; top:0;  right:0; 
	position: absolute;   
	display: flex;
	justify-content: center;
	text-align:center; align-items: center;
	width:35px; height:35px; 
	font-size: 3.75rem; 
}



/*text color is dark*/
.close-vmodalbox {color: #036; font-weight:normal; }

 	
/*hover and focus*/
.close-vmodalbox:hover, .close-vmodalbox:focus 
{ 
color: #FFF; text-decoration: none;cursor: pointer; background-color: #C60; 
}


/*overal box*/
.vclose-modalbox 
{
	float:right; top:0;  right:0; 
	position: absolute;   
	display: flex;
	justify-content: center;
	text-align:center; align-items: center;
	width:35px; height:35px; 
	font-size: 3.75rem; 
}



/*text color is dark*/
.vclose-modalbox {color: #036; font-weight:normal; }

 	
/*hover and focus*/
.vclose-modalbox:hover, .vclose-modalbox:focus 
{ 
color: #FFF; text-decoration: none;cursor: pointer; background-color: #C60; 
}



 

/*--------------------------------------------------
Modal-magic
--------------------------------------------------*/
.vmodal-ct70 .modal-magic { 
	display: block; position:relative;  
	height:100%; width: 100%;
 	border:1px solid #CCC;  
	/*border-radius: 10px 10px 0px 0px; */
	border-radius: 10px; 
	overflow:hidden;
} 
 
.vmodal-ct70  .modal-magic .header { /*header container*/
	 display:block; top:0; left:0; right:0; position:relative; 
	 width:100%; height:40px; padding:5px; font-size:2rem; 
	 font-weight:bold; background-color: #CCC; color:#000; text-align:left; 
	/*
	 scroll-behaviour: smooth; 
	 scroll-padding-top: -100px;
	 */
	  
}

.vmodal-ct70 .modal-magic .content { /*content container*/
	 background:#fff;    
	 
	 position:relative; display:block; 
	 height:100%; width:100%; padding:5px; bottom:0; left:0;  text-align:left;
	 overflow-y: scroll; 
}

.vmodal-ct70 .modal-magic .content::-webkit-scrollbar { /*vertical scrollbar size*/
  width:7px;
}

.vmodal-ct70 .modal-magic .content::-webkit-scrollbar-track { /*the vertical track line*/
  background:#ccc; border-radius: 50px;
}

.vmodal-ct70 .modal-magic .content::-webkit-scrollbar-thumb { /*the moving part*/
  background:#666; border-radius: 50px;
}


/*the sub-container for each list elem*/
.vmodal-ct70 .modal-magic .content .vid {  
 display:flex; 
 align-items:center; 
 gap: 15px; background:#f7f7f7; 
 margin-bottom:10px; 
 padding:5px 10px; 
 /*border:1px solid rgba(0,0,.1);*/
 border:0px solid #E1E1E1; 
 cursor:pointer;
 align-items: flex-start; /*aligns the flex items at the top of the container*/
}

.vmodal-ct70 .modal-magic .content .vid:hover {
 background:#eee; 
}

.vmodal-ct70 .modal-magic .content .vid.active {
 background: #9CC; 
}

.vmodal-ct70 .modal-magic .content .vid.active .title {
  color:#fff;
}


.vmodal-ct70 .modal-magic .content .vid video {  /*the poster image list*/
 border-radius: 5px; width:150px; background-color:#666;
}

.vmodal-ct70 .modal-magic .content .vid .vidtitle { /*the video title*/
  color: #333; font-size:1.5rem; margin-top:0; border: 0px solid yellow;
}
/*---------------------end modal popup-----------------------------*/