/*******************************************************************************************
section page setup
*******************************************************************************************/

/*******************************************************************************************
Hand browser swaps
*******************************************************************************************/

.pc	{
     	display: block;
   	}

.hand	{
     	display: none;
   	}

	
	
	
/****************************************************************************
Index page setup
****************************************************************************/

section	{
	width: 1260px;
	}



/************************Top Banner Formatting******************************/

.pcBanner {
	border: 0px solid green;

	background-image: url("/sitimg/banner-lg.webp") ;
	background-repeat: no-repeat;
	background-size: cover;
	
	background-color: #ccc;
	margin: 40px 0px 10px 0px;
	padding: 50px 0px 70px 80px;
	transition: 1s;
}

.bannerTitle {
	color: #fff; 	
	font-family: Calibri, Helvetica, Arial; 
	font-size: 24px;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	
}

.bannerText {
	color: #fff; 
	font-family: Calibri, Helvetica, Arial;  
	font-size: 18px;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
}

.backColor {
	background-color: rgba(0, 0, 0, 0.2);
	padding: 0 3px 0 3px;
}

/************************The Four Activity Buttons******************************/

.selectorContainer {
	border: 0px solid red;
	
	margin: 0px 0px 0px 0px;
	padding: 0px;
	border-radius: 0px;
}

.selectButton {
	width: 120px;
	height: 110px;
	display: inline-block;
	margin:  4px 4px;
	padding: 10px;
	border-radius: 15px;
	border: 1px solid #fff;
	transition: 850ms;
	color: #fff;
}	

.selectorTitle {
	display: block;
	border: 0px solid red;
    font-family: Calibri, Helvetica;
    font-size: 21px;
	font-weight: normal;
	vertical-align: middle;	
	text-align: center;
	text-shadow: 0px 0px 0px #ccc;	
	margin: 8px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}

.selectorLevel {
	display: block;
	border: 0px solid red;
    font-family: Calibri, Helvetica;
    font-size: 14px;
	font-weight: normal;
	vertical-align: middle;
	text-align: center;
	text-shadow: 0px 0px 0px #ccc;	
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}

.selectorIconsOn {
	border-radius: 100%;
	display: block;
	width: 61px;
	margin: 0px auto;
	box-shadow: 1px 1px 1px #444;		
}

.selectorIconsOff {
	border-radius: 100%;
	display: block;
	width: 61px;
	margin: 0px auto;
	box-shadow: 1px 1px 1px #444;		
}




/* #e6822d  */
.colorEasy {
	border: 1px solid #e6822d;
	background-color: rgba(230, 130, 45, 0.03);
}

#easyButton:hover {
	background-color: rgba(230, 130, 45, 0.15);
}

/* #009999  */
.colorTV {
	border: 1px solid #009999;
	background-color: rgba(0, 153, 153, 0.03);
}

#TVButton:hover {
	background-color: rgba(0, 153, 153, 0.15);
}

/* #286da8  */
.colorNews {
	border: 1px solid #286da8;
	background-color: rgba(40, 109, 168, 0.03);	
}

#newsButton:hover {
	background-color: rgba(40, 109, 168, 0.15);
}

/* #b24385  */
.colorAcad {
	border: 1px solid #b24385;
	background-color: rgba(178, 67, 133, 0.03);	
}

#acadButton:hover {
	background-color: rgba(178, 67, 133, 0.15);
}

.block {
	transition: 1000ms;
}



	

/*****************The Sorting Menus on the Index Pages****************/

.sortingBar {
	width: 1188px;
	margin: 15px 0px 15px 0px;
	padding: 13px 0px 10px 16px;	
	border: 0px solid green;
	background-color: #fff;
	box-shadow: 2px 2px 2px #aaa;
}

.sorting {
	position: relative;
	line-height: 9px;
    display: inline-block;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	z-index: 200;
}

.sortingText {
	line-height: 0;
	display: inline;
	border: 0px solid yellow;
    color: #333;
    font-family: Tahoma, Helvetica, Arial;
    font-size: 19px;
	font-weight: 500;
	margin: 0px 7px 3px 5px;
	padding: 0px 0px 10px 0px;
}

.sortingbtn {
	
	line-height: 0;
	display: inline;
	border: 0px solid yellow;
    color: #4a6796;
    font-family: Tahoma, Helvetica, Arial;
    font-size: 17px;
	font-weight: normal;
    cursor: pointer;
	margin: 0px 7px 3px 5px;
	padding: 0px 0px 20px 0px;
	z-index: 200;
}

.sorting-content {
	position: relative;		
    font-family: Tahoma, Helvetica, Arial;
    font-size: 15px;
	font-weight: normal;
    color: #000;
    display: none;
    position: absolute;
	margin: 16px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid #000;
	border-radius: 2px;
    background-color: #fff;
    width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 200;	
}

.sorting-content a {
	position: relative;	
    color: #000;
	padding: 12px 12px 12px 12px;
    text-decoration: none;
    display: block;
    z-index: 200;	

}

.sorting:hover .sorting-content { z-index: 200; display: block; }
.sortingbtn:hover { z-index: 200; color: #000; }
.sorting-content a:hover {color: #fff; background-color: #000;  }





.bbcFrame {
	border-top: 0px solid #fff; 
	border-bottom: 0px solid #fff; 
	border-left: 1px solid #fff;  
	border-right: 1px solid #fff;  
	border-radius: 10px; 
	width: 220px; 
	padding: 6px 3px 4px 10px;	
	margin:	0px 0px 0px 35px;
	transition: 2s;
}

.bbcFrame:hover {
	background-color: rgba(0, 0, 0, 0.1);
}


.bbcTitle {
	color: #eee; 
	font-family: Calibri, Helvetica, Arial; 
	font-size: 15px; 
	padding: 0px 0px 0px 0px;
}

.bbcText {
	color: #eee; 
	font-family: Calibri, Helvetica, Arial; 
	font-size: 13px; 
	padding: 0px 0px 0px 10px;
}
	
.bbcMediapic {
	display: block;
	width: 48px;
	padding: 0px 0px 0px 0px; 
	margin: 0 8px 0 0;">	
	border: 0px solid black;
	border-radius: 8px;
	float: right;	
}
		
.bbcIcon {
	width: 30px; 
	padding: 5px 10px 10px 5px;
	float: left;
}

.bbcHover  {
	display: none;
}

.bbc:hover .bbcStart {
	display: none;
}

.bbc:hover .bbcHover {
	display: block;
}	




/****************The Media List Pages*********************/

.media {
	width: 385px;
	height: 110px;
	display: inline-block;
	padding: 0px 0px 0px 0px;
	margin: 3px 4px 3px 0px;
	border: 1px solid #eee;
	border-radius: 8px;
	box-shadow: 2px 2px 1px #aaa;
	background-color: #fff;
	transition: 0.5s;	
}

.medialeft {
	border: 0px solid red;
	padding: 14px 0px 0px 20px;
	display: inline-block;
	vertical-align: top;
	width: 245px;
}

.mediaright {
	border: 0px solid red;
	display: inline-block;
	vertical-align: middle;
	padding: 0px;
	text-align: right;
	float: right;	
}

.mediapic {
	display: block;
	max-height: 100px;
	padding: 0px 0px 0px 0px;
	margin: 6px 4px 0px 0px;	
	border: 0px solid black;
	border-radius: 8px;
	float: right;
}


.moreButton {
	cursor: pointer;
	width: 100px;  
	background-color: #fff; 
	border: 1px solid #000; 
	border-radius: 3px;  
	text-align: center; 
	font-family: Calibri, Arial, Helvetica; 
	font-size: 16px; 
	padding: 4px 0 6px 0; 
	margin: 10px auto;
}



/****************The Recent Media List Pages*********************/

.recentbox {
	max-width: 1210px;
	min-width: 600px;
	margin: auto;
	border: 0px solid green;
}

.recentmedia {
	width: 390px;
	height: 120px;
	display: inline-block;
	padding: 0px 0px 0px 0px;
	margin: 3px 4px 3px 0px;
	border: 1px solid #eee;
	border-radius: 8px;
	box-shadow: 3px 3px 3px #aaa;
	background-color: #fff;
	transition: 0.5s;
}

.rmedialeft {
	border: 0px solid red;
	padding: 14px 0px 0px 20px;
	display: inline-block;
	vertical-align: top;
	width: 250px;
}

.rmediaright {
	border: 0px solid red;
	display: inline-block;
	vertical-align: middle;
	padding: 0px;
	text-align: right;
	float: right;	
}

.rmediapic {
	display: block;
	max-height: 110px;
	padding: 0px 0px 0px 0px;
	margin: 6px 4px 0px 0px;	
	border: 0px solid black;
	border-radius: 8px;
}




.flip-section {
	  display: inline-block;
	  vertical-align: top;
	  width: 390px;
	  height: 120px;
	  margin: 3px 4px 3px 0px;  
	  perspective: 1000px;
}

.flip-wrapper {
	  position: relative;
	  width: 100%;
	  height: 100%;
}

.flip-card {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  backface-visibility: hidden;
	  transform-style: preserve-3d;
	  transform: rotateX(90deg);
	  opacity: 0;
	  transition: transform 1s ease, opacity 0.6s ease;
	  z-index: 1;
}

.flip-card.active {
	  transform: rotateX(0deg);
	  opacity: 1;
	  z-index: 2;
}







/****************The TV Carousel*********************/

.carousel-container {
	width: 100%; /* Adjust as needed */
	margin: 0 auto 10px auto;; /* Center the container */
	overflow: hidden; /* Hide overflow content */
	position: relative; /* Required for absolute positioning of buttons */
	border: 0px solid red;
	z-index: 1;
}

.carousel {
	width: 300%; /* Three times the width of pages */
	display: flex; /* Display pages in a row */
	margin: 4px 58px 4px 58px;;
	transition: transform 1.2s ease; /* Smooth transition for scrolling */
	border: 0px solid green;
}

.page {
	flex: 0 0 33.33%; /* Each page takes one-third of container width */
	height: 118px; /* Full viewport height */
	border: 0px solid blue;
}

.prevBtn, .nextBtn {
	position: absolute;
	top: 5%;
	height: 90%;
	padding: 0 5px;
	background-color: rgba(0, 0, 0, 0.3);
	color: #fff;
	border: none;
	cursor: pointer;
	z-index: 1000;
}

.arrow {
	width: 22px;
	height: 22px;
	border: solid white;
	border-width: 0 5px 5px 0;
	display: inline-block;
	position: relative;
}

.left {
  transform: rotate(135deg);
  left: 8px;

}

.right {
  transform: rotate(-45deg);
  right: 8px;

}

.prevBtn {
	left: 15px;
	display: none; /* Hide previous button initially */

}

.nextBtn {
	right: 15px;

}

.sourceImage {
	width: 114px;
	height: 114px;
	padding: 0px;
	margin: 2px;
}



/****************The EZ TV Carousel*********************/

.carouselContainerEz {
	width: 100%; /* Adjust as needed */
	margin: 0 auto 10px auto;; /* Center the container */
	overflow: hidden; /* Hide overflow content */
	position: relative; /* Required for absolute positioning of buttons */
	border: 0px solid red;
	z-index: 1;
}

.carouselEz {
	width: 200%; /* Three times the width of pages */
	display: flex; /* Display pages in a row */
	margin: 4px 58px 4px 58px;;
	transition: transform 1.2s ease; /* Smooth transition for scrolling */
	border: 0px solid green;
}

.carouselPageEz {
	flex: 0 0 50%; /* Each page takes half of container width */
	height: 118px; /* Full viewport height */
	border: 0px solid blue;
}

.prevBtnEz, .nextBtnEz {
	position: absolute;
	top: 5%;
	height: 90%;
	padding: 0 5px;
	background-color: rgba(0, 0, 0, 0.3);
	color: #fff;
	border: none;
	cursor: pointer;
	z-index: 1000;
}

.arrowEz {
  width: 22px;
  height: 22px;
  border: solid white;
  border-width: 0 5px 5px 0;
  display: inline-block;
  position: relative;
}

.leftEz {
  transform: rotate(135deg);
  left: 8px;

}

.rightEz {
  transform: rotate(-45deg);
  right: 8px;

}

.prevBtnEz {
	left: 15px;
	display: none; /* Hide previous button initially */
}

.nextBtnEz {
	right: 15px;
}

.sourceImageEz {
	width: 114px;
	height: 114px;
	padding: 0px;
	margin: 2px;
}







/****************The TV Images Expands*********************/

.sourceExpand {
    position: relative;
    display: inline-block;
}

.sourceExpand .sourceName {
    font-family: Calibri, Helvetica;
    font-size: 18px;
	font-weight: normal;
	color: #fff;
	text-shadow: 0px 0px 0px #ccc;
    text-align: center;
    padding: 0px 10px 0px 10px;	
}

.sourceExpand .sourceDetails {
    font-family: Calibri, Helvetica;
    font-size: 15px;
	font-weight: 200;
	color: #fff;
	text-shadow: 0px 0px 0px #ccc;
    text-align: center;
    padding: 0px 10px 2px 10px;	
}

.sourceExpand .sourceExpandText {
	opacity: 0;
	width: 170px;
	height: 125px;
	background-color: rgba(0,0,0,0.6);
	margin: 0;
	border: 1px solid #000;
	border-radius: 0px;	
	padding: 10px 0px 0px 0px;
	position: absolute;
	z-index: 2;
	top: -5px;
	left: -25px;
	transition: opacity 1500ms;
	box-shadow: 0px 0px 0px #aaa;				
}	

.sourceExpand .sourceActivities {
	font-family: Calibri, Helvetica;
	font-size: 14px;
	font-weight: 200;
	color: #fff;
	text-shadow: 0px 0px 0px #ccc;
	text-align: left;
	padding: 0px 10px 2px 30px;	
}

.sourceExpand .sourceHR {
	background-color: #fff; 
	width: 90%; 
	height: 1px; 
	margin: 5px auto;	
}

.sourceExpand:hover .sourceExpandText {
    opacity: 1;
	
}



/****************The Activitiy Explanation Hover Effect*********************/

.pop {
    position: relative;
    display: inline-block;
}

.pop .poptext {
    opacity: 0;
    width: 234px;
	height: 0px;
    background-color: rgba(221, 221, 221, 0.95); 

 	color: #000;
    font-family: Calibri, Helvetica;
    font-size: 16px;
	font-weight: normal;
	text-shadow: 0px 0px 0px #ccc;
	margin: 0;
    text-align: left;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;	
    border-radius: 0px;
    padding: 7px 8px 3px 8px;
    position: absolute;
    z-index: 1;
    top: 37px;
    left: 63px;
    margin-left: -50px;
	transition: opacity 1500ms, height 1200ms;
}

	
/****************icon set up*************************/

.icon	{
	float: left;
	width: 46px;
	padding: 6px 12px 0px 3px;
	}

.bigicon	{
	float: left;
	width: 65px;
	padding: 8px 5px 8px 15px;
	}

.indexicon {
	float: left;
	width: 42px;
	padding: 8px 10px 0px 3px;
	}	
	
.audiovideoicon	{
	width: 14px;
	vertical-align: -10%;
	}

.flag {
	vertical-align: middle;
	height: 11px;
}

.pdficon	{
	width: 22px;
	vertical-align: -3%;
	}

.titletag {
	font-family: Calibri, Helvetica, Arial;
	font-size: 11px; 
	margin: -7px 0px -16px 0px;
	line-height: 1.1;
	padding: 0;
}
	
	
	
/*******************************************************************************************
links and mouseovers
*******************************************************************************************/

	
a:link  {
	color: #000000;
	text-decoration:  none;
  	} 
a:visited {
	color: #000000;
	text-decoration:  none;
  	} 
a:hover {
	color: inherit;
	text-decoration:  none;
  	} 
a:active  {
	color: inherit;
	text-decoration:  none;
  	} 

.media:hover {
	box-shadow: 5px 5px 5px #aaa;
	background-color: #eee;
	opacity: 1; 
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	}

.recentmedia:hover {
	box-shadow: 6px 6px 5px #aaa;
	background-color: #eee;
	opacity: 1; 
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	}













								/*******************************************************************************************
								********************************************************************************************
								TABLET DEVICES
								********************************************************************************************
								*******************************************************************************************/


									@media only screen and (max-width: 1000px) {



										.pc	{
												display: block;
											}

										.pci	{
												display: inline-block;
											}		
											
										.hand	{
												display: none;
											}

										.handi	{
												display: none;
											}

										/******************Index page setup****************/


										
										
										
										section	{
											width: 850px;
											}

											
										/************************Top Banner Formatting******************************/			
											
										.pcBanner {
											border: 0px solid green;
											background-image: url("/sitimg/banner-lg.jpg");	
											background-repeat: no-repeat;
											background-size: cover;
											
											background-color: #ccc;
											margin: 40px 0px 20px 0px;
											padding: 30px 0px 30px 60px;
											transition: 1s;
										}

										.bannerTitle {
											font-family: Calibri, Helvetica, Arial;
											font-size: 20px;
											margin: 0px 0px 7px 0px;
											padding: 0px 0px 0px 0px;
										}

										.bannerText {
											font-family: Calibri, Helvetica, Arial;
											font-size: 14px;
											margin: 0px 0px 7px 0px;
											padding: 0px 0px 0px 0px;
										}			
										
										

										
										/************************The Four Activity Buttons******************************/	

										.selectButton {
											width: 95px;
											height: 90px;
											margin:  4px 4px;
											padding: 8px;
											border-radius: 12px;
										}	

										.selectorTitle {
											font-size: 16px;
											text-align: center;
											margin: 4px 0px 0px 0px;
											padding: 0px 0px 0px 0px;	
										}

										.selectorLevel {
											font-size: 13px;
											text-align: center;
											margin: 0px 0px 0px 0px;
											padding: 0px 0px 0px 0px;	
										}

										.selectorIconsOn {
											width: 50px;
										}

										.selectorIconsOff {
											width: 50px;
										}

											
									
										
										/****************icon set up*************************/
										
										.icon	{
											float: left;
											width: 40px;
											padding: 5px 10px 0px 3px;
											}

										.indexicon {
											float: left;
											width: 42px;
											padding: 8px 10px 0px 3px;
											}

										.audiovideoicon	{
											width: 14px;
											vertical-align: -10%;
											}

										.flag {
											vertical-align: middle;
											height: 11px;
										}

										.pdficon	{
											width: 22px;
											vertical-align: -3%;
											}

										.titletag {
											font-family: Calibri, Helvetica, Arial;
											font-size: 9px; 
											margin: -7px 0px -16px 0px;
											line-height: 1.1;
											padding: 0;
										}
									

										/****************The TV Carousel*********************/

											.carousel-container {
												width: 100%; /* Adjust as needed */
												margin: 0 auto 10px auto;; /* Center the container */
												overflow: hidden; /* Hide overflow content */
												position: relative; /* Required for absolute positioning of buttons */
												border: 0px solid red;
												z-index: 1;
											}
											
											.carousel {
												width: 300%; /* Three times the width of pages */
												display: flex; /* Display pages in a row */
												margin: 4px 46px 4px 46px;;
												transition: transform 1.2s ease; /* Smooth transition for scrolling */
												border: 0px solid green;
											}

											.page {
												flex: 0 0 33.33%; /* Each page takes one-third of container width */
												height: 75px; /* Full viewport height */
												border: 0px solid blue;
											}

											.prevBtn, .nextBtn {
												position: absolute;
												top: 5%;
												height: 90%;
												padding: 0 3px;
												background-color: rgba(0, 0, 0, 0.3);
												color: #fff;
												border: none;
												cursor: pointer;
												z-index: 1000;
											}

											.arrow {
											  width: 15px;
											  height: 15px;
											  border: solid white;
											  border-width: 0 5px 5px 0;
											  display: inline-block;
											  position: relative;
											}

											.left {
											  transform: rotate(135deg);
											  left: 5px;

											}

											.right {
											  transform: rotate(-45deg);
											  right: 5px;

											}

											.prevBtn {
												left: 15px;
												display: none; /* Hide previous button initially */

											}

											.nextBtn {
												right: 15px;

											}
											
											.sourceImage {
												width: 75px;
												height: 75px;
												margin: 0px;
											}


											/****************The EZ TV Carousel*********************/


											.carouselContainerEz {
												width: 100%; /* Adjust as needed */
												margin: 0 auto 10px auto;; /* Center the container */
												overflow: hidden; /* Hide overflow content */
												position: relative; /* Required for absolute positioning of buttons */
												border: 0px solid red;
												z-index: 1;
											}

											.carouselEz {
												width: 300%; /* Three times the width of pages */
												display: flex; /* Display pages in a row */
												margin: 4px 46px 4px 46px;;
												transition: transform 1.2s ease; /* Smooth transition for scrolling */
												border: 0px solid green;
											}

											.carouselPageEz {
												flex: 0 0 50%; /* Each page takes half of container width */
												height: 75px; /* Full viewport height */
												border: 0px solid blue;
											}


											.prevBtnEz, .nextBtnEz {
												position: absolute;
												top: 5%;
												height: 90%;
												padding: 0 3px;
												background-color: rgba(0, 0, 0, 0.3);
												color: #fff;
												border: none;
												cursor: pointer;
												z-index: 1000;
											}

											.arrowEz {
											  width: 15px;
											  height: 15px;
											  border: solid white;
											  border-width: 0 5px 5px 0;
											  display: inline-block;
											  position: relative;
											}

											.leftEz {
											  transform: rotate(135deg);
											  left: 5px;

											}

											.rightEz {
											  transform: rotate(-45deg);
											  right: 5px;

											}	

											.prevBtnEz {
												left: 15px;
												display: none; /* Hide previous button initially */
											}

											.nextBtnEz {
												right: 15px;
											}

											.sourceImageEz {
												width: 75px;
												height: 75px;
												padding: 0px;
												margin: 0px;
											}



											/****************The TV Images Expands*********************/

											.sourceExpand {
												position: relative;
												display: inline-block;
											}


											.sourceExpand .sourceName {
												font-family: Calibri, Helvetica;
												font-size: 10px;
												font-weight: normal;
												color: #fff;
												text-shadow: 0px 0px 0px #ccc;
												text-align: center;
												padding: 0px 10px 0px 10px;	
											}

											.sourceExpand .sourceDetails {
												font-family: Calibri, Helvetica;
												font-size: 8px;
												font-weight: 200;
												color: #fff;
												text-shadow: 0px 0px 0px #ccc;
												text-align: center;
												padding: 0px 10px 2px 10px;	
											}

											.sourceExpand .sourceExpandText {
												opacity: 0;
												width: 140px;
												height: 100px;
												background-color: rgba(0,0,0,0.6);
												margin: 0;
												border: 1px solid #000;
												border-radius: 0px;	
												padding: 10px 0px 0px 0px;
												position: absolute;
												z-index: 2;
												top: -5px;
												left: -25px;
												transition: opacity 1500ms;
												box-shadow: 0px 0px 0px #aaa;				
											}	

											.sourceExpand .sourceActivities {
												font-family: Calibri, Helvetica;
												font-size: 8px;
												font-weight: 200;
												color: #fff;
												text-shadow: 0px 0px 0px #ccc;
												text-align: left;
												padding: 0px 10px 2px 30px;	
											}

											.sourceExpand .sourceHR {
												background-color: #fff; 
												width: 90%; 
												height: 1px; 
												margin: 5px auto;	
											}

											.sourceExpand:hover .sourceExpandText {
												opacity: 1;
												
											}


											

											/*****************The Sorting Menus on the Index Pages****************/

											.sortingBar {
												width: 768px;
												margin: -5px 0px 5px 0px;
												padding: 14px 0px 12px 16px;	
												border: 0px solid green;
												background-color: #fff;
												box-shadow: 2px 2px 2px #aaa;
												z-index: 200;
											}

											.sorting {
												line-height: 9px;
												display: inline-block;
												margin: 0px 0px 0px 0px;
												padding: 0px 0px 0px 0px;
												z-index: 200;	
											}

											.sortingText {
												line-height: 0;
												display: inline;
												border: 0px solid yellow;
												color: #333;
												font-family: Tahoma, Helvetica, Arial;
												font-size: 20px;
												font-weight: 500;
												margin: 0px 7px 3px 5px;
												padding: 0px 0px 6px 0px;
												z-index: 200;	
											}

											.sortingbtn {
												line-height: 0;
												display: inline;
												border: 0px solid yellow;
												color: #4a6796;
												font-family: Tahoma, Helvetica, Arial;
												font-size: 16px;
												font-weight: normal;
												cursor: pointer;
												margin: 0px 7px 3px 5px;
												padding: 0px 0px 20px 0px;
												z-index: 200;	
											}

											.sorting-content {
												font-family: Tahoma, Helvetica, Arial;
												font-size: 15px;
												font-weight: normal;
												color: #000;
												display: none;
												position: absolute;
												margin: 20px 0px 0px 0px;
												padding: 0px 0px 0px 0px;
												border: 0px solid #000;
												border-radius: 2px;
												background-color: #fff;
												width: 150px;
												box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
												z-index: 200;
											}

											.sorting-content a {
												color: #000;
												padding: 12px 12px 12px 12px;
												text-decoration: none;
												display: block;

											}

											.sorting:hover .sorting-content {display: block;}
											.sortingbtn:hover {color: #000;}
											.sorting-content a:hover {color: #fff; background-color: #000; }
											

											.bbcFrame {
												border-top: 0px solid #fff; 
												border-bottom: 0px solid #fff; 
												border-left: 1px solid #fff;  
												border-right: 1px solid #fff;  
												border-radius: 10px; 
												width: 210px; 
												padding: 6px 3px 4px 10px;	
												margin:	0px 0px 0px 10px;
												transition: 2s;
											}

											.bbcTitle {
												color: #eee; 
												font-family: Calibri, Helvetica, Arial; 
												font-size: 14px; 
												padding: 0px 0px 0px 0px;
											}

											.bbcText {
												color: #eee; 
												font-family: Calibri, Helvetica, Arial; 
												font-size: 12px; 
												padding: 0px 0px 0px 10px;
											}
												
											.bbcMediapic {
												display: block;
												width: 46px;
												padding: 0px 0px 0px 0px; 
												margin: 0 8px 0 0;">	
												border: 0px solid black;
												border-radius: 8px;
												float: right;	
											}
													
											.bbcIcon {
												width: 30px; 
												padding: 5px 10px 10px 5px;
												float: left;
											}

										
											
											
											/****************The Media List Pages*********************/

											.media {
												width: 385px;
												height: 100px;
												display: inline-block;
												padding: 0px 0px 0px 0px;
												margin: 3px 2px 3px 2px;
												border: 1px solid #eee;
												border-radius: 8px;
												box-shadow: 2px 2px 1px #aaa;
												background-color: #fff;
												transition: 0.5s;	
											}

											.medialeft {
												border: 0px solid red;
												padding: 14px 0px 0px 20px;
												display: inline-block;
												vertical-align: top;
												width: 245px;
											}

											.mediaright {
												border: 0px solid red;
												display: inline-block;
												vertical-align: middle;
												padding: 0px;
												text-align: right;
												float: right;	
											}

											.mediapic {
												display: block;
												max-height: 90px;
												padding: 6px 4px 0px 0px;
												margin: 0px 0px 0px 0px;	
												border: 0px solid black;
												border-radius: 8px;
												float: right;
											}



											/****************The Recent Media List Pages*********************/

											.recentbox {
												max-width: 1210px;
												min-width: 600px;
												margin: auto;
												border: 0px solid green;
											}

											.recentmedia {
												width: 385px;
												height: 100px;
												display: inline-block;
												padding: 0px 0px 0px 0px;
												margin: 3px 2px 3px 2px;
												border: 1px solid #eee;
												border-radius: 8px;
												box-shadow: 2px 2px 1px #aaa;
												background-color: #fff;
												transition: 0.5s;
											}

											.rmedialeft {
												border: 0px solid red;
												padding: 14px 0px 0px 20px;
												display: inline-block;
												vertical-align: top;
												width: 245px;
											}

											.rmediaright {
												border: 0px solid red;
												display: inline-block;
												vertical-align: middle;
												padding: 0px;
												text-align: right;
												float: right;	
											}

											.rmediapic {
												display: block;
												max-height: 90px;
												padding: 6px 4px 0px 0px;
												margin: 0px 0px 0px 0px;	
												border: 0px solid black;
												border-radius: 10px;
												float: right;
											}



											.flip-section {
												  display: inline-block;
												  vertical-align: top;
												  width: 385px;
												  height: 100px;
												  margin: 3px 8px 5px 0px;   
												  perspective: 1000px;
											}

											.flip-wrapper {
												  position: relative;
												  width: 100%;
												  height: 100%;
											}

											.flip-card {
												  position: absolute;
												  width: 100%;
												  height: 100%;
												  backface-visibility: hidden;
												  transform-style: preserve-3d;
												  transform: rotateX(90deg);
												  opacity: 0;
												  transition: transform 1s ease, opacity 0.6s ease;
												  z-index: 1;
											}

											.flip-card.active {
												  transform: rotateX(0deg);
												  opacity: 1;
												  z-index: 2;
											}



									}








/*******************************************************************************************
********************************************************************************************
HANDHELD DEVICES
********************************************************************************************
*******************************************************************************************/


@media only screen and (max-width: 490px) {


/*******************************************************************************************
Hand browser swaps
*******************************************************************************************/

	.pc	{
			display: none;
		}

	.pci	{
			display: none;
		}	
		
	.hand	{
			display: block;
		}

	.handi	{
			display: block;
		}	
		



	/******the dropdown menus in the index****************/


	.handBanner {
		border: 0px solid green;
		background-image: url("/sitimg/banner-hand.jpg");	
		background-repeat: no-repeat;
		background-size: cover;
		
		background-color: #ccc;
		margin: 0px 0px -5px 0px;
		padding: 30px 0px 30px 0px;
		transition: 1s;
	}



	.selectorContainer {
		border: 0px solid red;
		width: 75vw;
		margin: 0px auto 0px auto;
		padding: 0px;
		border-radius: 0px;
	}


	.selectButton {
		width: 27vw;
		height: 26vw;
		display: inline-block;
		margin:  4px 4px;
		padding: 10px;
		border-radius: 15px;
		border: 1px solid #fff;
		transition: 850ms;
		color: #fff;
	}	

	.selectorTitle {
		display: block;
		border: 0px solid red;
		font-family: Helvetica;
		font-size: 4.4vw;
		font-weight: normal;
		vertical-align: middle;	
		text-align: center;
		text-shadow: 0px 0px 0px #ccc;	
		margin: 8px 0px 0px 0px;
		padding: 0px 0px 0px 0px;	
	}

	.selectorLevel {
		display: block;
		border: 0px solid red;
		font-family: Helvetica;
		font-size: 3.54vw;
		font-weight: normal;
		vertical-align: middle;
		text-align: center;
		text-shadow: 0px 0px 0px #ccc;	
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;	
	}

	.selectorIconsOn {
		border-radius: 100%;
		display: block;
		width: 15vw;
		margin: 0px auto;
		box-shadow: 1px 1px 1px #444;		
	}

	.selectorIconsOff {
		border-radius: 100%;
		display: block;
		width: 15vw;
		margin: 0px auto;
		box-shadow: 1px 1px 1px #444;		
	}


	/* #e6822d  */
	.colorEasy {
		border: 1px solid #e6822d
	}

	#easyButton:hover {
		background-color: rgba(202, 103, 19, 0.05);
	}


	/* #009999  */
	.colorTV {
		border: 1px solid #009999		
	}

	#TVButton:hover {
		background-color: rgba(0, 152, 153, 0.05);
	}


	/* #286da8  */
	.colorNews {
		border: 1px solid #286da8		
	}

	#newsButton:hover {
		background-color: rgba(40, 109, 168, 0.05);
	}


	/* #b24385  */
	.colorAcad {
		border: 1px solid #b24385		
	}

	#acadButton:hover {
		background-color: rgba(178, 67, 133, 0.05);
	}


	.block {
		transition: 1000ms;
	}







	.bannerTitle {
		font-family: Calibri, Helvetica, Arial;
		font-size: 4.5vw;
		margin: 0px 0px 5px 0px;
		padding: 0px 0px 0px 0px;
	}

	.bannerText {
		font-family: Calibri, Helvetica, Arial;
		font-size: 3.8vw;
		margin: 0px 0px 5px 0px;
		padding: 0px 0px 0px 0px;
	}

	.sortingBar {
		width: 99%;
		margin: 5px 0px 5px 0px;
		padding: 10px 0px 9px 10px;	
		border: 0px solid green;
		background-color: #fff;
		box-shadow: 2px 2px 2px #aaa;
	}

	.sortingText {
		line-height: 0;
		display: inline;
		border: 0px solid yellow;
		color: #333;
		font-family: Tahoma, Helvetica, Arial;
		font-size: 4.2vw;
		font-weight: 500;
		margin: 0px 7px 3px 5px;
		padding: 0px 0px 10px 0px;
	}

	.sorting {
		position: relative;
		line-height: 9px;
		display: inline-block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		z-index: 200;	
	}

	.sortingbtn {
		line-height: 0;
		display: inline;
		border: 0px solid yellow;
		color: #4a6796;
		background-color: #fff;
		font-family: Tahoma, Helvetica, Arial;
		font-size: 4.2vw;
		font-weight: normal;
		cursor: pointer;
		margin: 0px 2px 3px 2px;
		padding: 0px 0px 0px 0px;
	}

	.sorting-content {
		font-family: Tahoma, Helvetica, Arial;
		font-size: 4.2vw;
		font-weight: normal;
		color: #000;
		display: none;
		position: absolute;
		margin: 15px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		border: 0px solid #000;
		border-radius: 2px;
		background-color: #fff;
		width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 200;
	}

	.sorting-content a {
		color: #000;
		padding: 12px 8px 14px 6px;
		text-decoration: none;
		display: block;
	}

	.sorting:hover .sorting-content {display: block;}
	.sortingbtn:hover {color: #000;}
	.sorting-content a:hover {color: #fff; background-color: #000; }
		


	.bbcFrame {
		border-top: 0px solid #fff; 
		border-bottom: 0px solid #fff; 
		border-left: 1px solid #fff;  
		border-right: 1px solid #fff;  
		border-radius: 10px; 
		width: 55vw; 
		padding: 6px 3px 4px 10px;	
		margin:	0px 0px 0px 5vw;
		transition: 2s;
	}

	.bbcTitle {
		color: #eee; 
		font-family: Calibri, Helvetica, Arial; 
		font-size: 3.8vw; 
		padding: 0px 0px 0px 0px;
	}

	.bbcText {
		color: #eee; 
		font-family: Calibri, Helvetica, Arial; 
		font-size: 3.2vw; 
		padding: 3px 0px 0px 10px;
		line-height: 1.3;
	}
		
	.bbcMediapic {
		display: block;
		width: 12.8vw;
		padding: 0px 0px 0px 0px; 
		margin: 0 8px 0 0;">	
		border: 0px solid black;
		border-radius: 8px;
		float: right;	
	}
			
	.bbcIcon {
		width: 8vw; 
		padding: 5px 10px 10px 5px;
		float: left;
	}



		
	#carWrapper-pc {
		display: none;
	}


	#carWrapper-tab {
		display: none;
	}	
		
		
	#carWrapperEasy-pc {
		display: none;
	}


	#carWrapperEasy-tab {
		display: none;
	}	
		

	/****************index page content*********************/



	.recentbox {
		max-width: 100%;
		min-width: 310px;
		padding: 0px 0px 0px 0px;
		margin: 8px 0px 0px 0px;
		border: 0px solid green;
	}



	.recentmedia {
		width: 99%;
		height: 27.5vw;	
		border: 0px solid pink;
		border-radius: 8px;
		margin: 0vw 0vw 1vw 0vw;
		padding: 0px 0px 4px 0px;
	}

	.rmedialeft {
		border: 0px solid blue;
		display: inline-block;
		vertical-align: middle;
		width: 64%;
		}

	.rmediaright {
		border: 0px solid green;
		display: inline-block;
		vertical-align: middle;
		width: 28%;

		}

	.rmediapic {
		border: 0px solid red;	
		vertical-align: middle;
		max-height: 24.8vw;
		padding: 0px;
		margin: 1.1vw 1.1vw 0vw 0vw;
		}



		
	.media {
		width: 99%;
		height: 26vw;
		border: 0px solid pink;
		border-radius: 8px;
		margin: 1vw 0vw 1vw 0vw;
		padding: 0px 0px 4px 0px;
	}

	.medialeft {
		border: 0px solid blue;
		display: inline-block;
		vertical-align: middle;
		width: 64%;
		}

	.mediaright {
		border: 0px solid green;
		display: inline-block;
		vertical-align: middle;
		width: 28%;

		}

	.mediapic {
		border: 0px solid red;	
		vertical-align: middle;
		max-height: 24.8vw;	
		padding: 0px;
		margin: 1.1vw 1.1vw 0vw 0vw;
		}

		
	
	.flip-section {
		  display: block;
		  vertical-align: top;
		  width: 99vw;
		  height: 30vw; /* or adjust to your content */
		  margin: 0px 0px 0px 0px;   
		  perspective: 1000px;
	}

	.flip-wrapper {
		  position: relative;
		  width: 100%;
		  
 	}

	.flip-card {
		  position: absolute;
		  width: 100%;
		  height: 100%;
		  backface-visibility: hidden;
		  transform-style: preserve-3d;
		  transform: rotateX(90deg);
		  opacity: 0;
		  transition: transform 1s ease, opacity 0.6s ease;
		  z-index: 1;
	}

	.flip-card.active {
		  transform: rotateX(0deg);
		  opacity: 1;
		  z-index: 2;
	}



	
		
		
		
	/****************the pictures to choose media*************************/	
		
		

	.sourceImage {
		width: 110px;
		height: 110px;
		margin: 2px;
	}


		
	.carWrapper-hand {
		width: 100%;
		overflow: auto;
		padding: 0px 0px 0px 0px;
		overflow-y: hidden;  		
	}

	.carP-tv {
		width: 3100px;
		border: 0px solid #eaf2f4;
	}

	.carP-easy {
		width: 1600px;
		border: 0px solid #eaf2f4;
	}

	.scroll-touch {
		-webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
	}

	.scroll-auto {
		-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
	}	
		



	/****************icon set up*************************/


	.icon	{
		float: left;
		width: 11vw;
		padding: 3px 10px 0px 5px;
		}

	.bigicon	{
		float: left;
		width: 45px;
		padding: 8px 15px 8px 5px;
		}	

	.handSelector {
		border: 0px solid yellow;
		background: linear-gradient(to bottom, #003366 0%, #ffffff 100%);
		width: 102%;
		padding: 0px 0px 5px 0px;
		margin: -10px 0px 0px -6px;
	}

	.handSelectorHr {
		background-color: #003366;
		border: 0px;
		height: 1px;
		width: 95%;
	}

	table.indextable {
		border: 0px red solid;
		width: 85%;
		margin: -3px auto;
		color: black;
		font-family: Helvetica;
		font-size: 20px;
		padding: 0px 0px;
		margin: 10px auto 10px auto;
		}

	table tr td {
		border: 0px red solid;	
		vertical-align: middle;

	}
	 .tdright {
		 width: 110px;
	 }


	.handindexicon {
		border: 0px green solid;	
		width: 50px;
		border-radius: 100%;
		padding: 0px 0px 0px 0px;
		margin: -2px 0px -5px 35px;	
		box-shadow: 2px 2px 2px #444;
		}

		.audiovideoicon	{
			width: 14px;
			vertical-align: -10%;
			}

		.flag {
			vertical-align: middle;
			height: 11px;
		}

		.pdficon	{
			width: 20px;
			vertical-align: -3%;
			}

		.titletag {
			font-family: Calibri, Helvetica, Arial;
			font-size: 2.9vw; 
			margin: -7px 0px -16px 0px;
			line-height: 1.1;
			padding: 0;
		}



	/****************HAND Activitiy Hidden****************/
	.toggle {
		display: none;
		}




	/******the dropdown menus in the index****************/	


	.recentbox {
		max-width: 100%;
		min-width: 310px;
		border: 0px solid green;
	}

	.indexingbtn {
		line-height: 0;
		display: inline;
		border: 0px solid yellow;
		color: #4a6796;
		font-family: Calibri, Helvetica, Arial;
		font-size: 16px;
		font-weight: normal;
		cursor: pointer;
		margin: 0px 2px 0px 5px;
		padding: 0px 0px 0px 0px;
	}

	.indexing {
		line-height: 9px;
		display: inline-block;
		margin-left: 0px;
	}

	.indexing a:hover {
		 color: #000;
	 }

	.indexing-content {
		font-family: Calibri, Helvetica, Arial;
		font-size: 15px;
		font-weight: normal;
		color: #4a6796;	
		display: none;
		position: absolute;
		margin-top: 15px;
		border: 1px solid #000;
		border-radius: 2px;
		background-color: #eee;
		width: 145px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.indexing-content a {
		color: #4a6796;
		padding: 10px;
		text-decoration: none;
		display: block;
	}

	.indexing-content a:hover {
		background-color: #000;
		color: #ddd;
	}
		
	.linksselect {
		width: 100%;
		margin: 3px auto;
		border: 0px solid green;
	}

	.linksbox {
		width: 100%;
		margin: 0px auto;
		padding: 0px;	
		border: 0px solid red;
	}

	.linksselect{
		width: 100%;
		margin: 10px auto 15px auto;
		padding: 0px 0px 0px 0px;	
		border: 0px solid green;
	}	
		
	.linksbox {
		width: 100%;
		margin: 8px auto;
		border: 0px solid blue;
		padding: 0px 0px 0px 0px;
	}

	/* #e6822d  */
	.colorEasyHand {
		border: 1px solid #e6822d
	}

	/* #009999  */
	.colorTVHand {
		border: 1px solid #009999		
	}

	/* #286da8  */
	.colorNewsHand {
		border: 1px solid #286da8		
	}

	/* #b24385  */
	.colorAcadHand {
		border: 1px solid #b24385		
	}

	.block {
		transition: 1000ms;
	}













	
	
	


}