/*******************************************************************************************
		load fonts
		*******************************************************************************************/

		@import url('https://fonts.googleapis.com/css?family=Ubuntu');




		/*******************************************************************************************
		transitions and animations
		*******************************************************************************************/

		@keyframes fadein {
			from { opacity: 0; }
			to   { opacity: 1; }
		}

		@-webkit-keyframes slide {
			100% { left: 0; }
		}

		@keyframes slide {
			100% { left: 0; }
		}

		/*******************************************************************************************
		********************************************************************************************
		PC BROWSER DEVICES
		********************************************************************************************
		*******************************************************************************************/


		/*******************************************************************************************
		PC browser swaps
		*******************************************************************************************/

		.pc	{
				display: block;
			}

		.pci	{
				display: inline-block;
			}

		.pconly	{
				display: block;
				}

		.hand	{
				display: none;
			}

		.handi	{
				display: none;
			}

		.tablet	{
				display: none;
			}
			
			

		/*******************************************************************************************
		PC browser page setup
		*******************************************************************************************/


		body {
			background-color: #edeef0;
			margin: 0;
			padding: 0;
			}

		header {
			border: 0px solid red;
			position: fixed;
			background-color:  #fff;
			width: 100%;
			height: 54px;
			padding: 0px 0px 0px 0px;
			margin: auto;
			z-index: 100;
			}

		#site-header-pc {
			box-shadow: 0px 3px 6px #272727;
			-webkit-box-shadow: 0px 3px 6px #27272780;
			-moz-box-shadow: 0px 3px 6px #27272780;
			position: fixed;
			z-index: 999999;
			}	

		section	{
			background-color: #edeef0;
			border: 0px solid green;
			width: 1260px;
			padding-left: 0px;
			padding-right: 0px;
			padding-top: 10px;
			padding-bottom: 10px;
			margin: auto;

			text-align: left;
			}

		.center {
			border: 0px solid red;
			vertical-align: top;
			display: block;
			width: 1185px;
			margin: 52px auto 0px auto;
			padding: 2px 0px;

			}

		footer {
			border-top: 1px solid #000;
			background-color:  #fff;
			width: 100%;
			padding: 0px 0px 12px 0px;
			margin: 0px;
			z-index: 100;
			}

		.dycent-h {
			position: relative;
			border: 0px solid red;
			padding: 7px 0px 12px 0px;
			top: 0px;
			margin: auto;
			width: 1260px;
			z-index: 100;
			height: 30px;
			background-color:  #fff;
		}







		/*******************************************************************************************
		PC & TABLET header setup
		*******************************************************************************************/

		/****************the Big L*************************/




		.logo-container {
			display: inline-block;
			border: 0px solid green;
			margin: 0px 0px 0px 15px;
			border: 0px solid green;	
		}


		.titlelogo {
			position: relative;
			top: 2px;
			height: 38px;
			vertical-align: -30%;	
			margin: 0px 0px 0px 5px;
			border: 0px solid red;	
		}

		.titletext	{
			position: relative;
			top: 0px;
			display: inline-block;
			color: #000;
			font-family: Ubuntu, Arial;
			font-size: 22px;
			font-weight: normal;
			border: 0px solid red;	
			}




		/******the dropdown menus in the header****************/
		.rightmenus-container {
			display: inline-block;
			position: absolute;
			top: 20px;
			right: 10px;
			border: 0px solid green;
			margin: 0px 20px 0px 0px;
		}

		button:focus {
			outline:0;
			}


		.dropbtn {
			display: inline-block;
			border: 0px solid red;
			background-color:  rgba(0,0,0,0);
			color: #555;
			font-family: Calibri, Helvetica, Arial;
			font-size: 18px;
			font-weight: normal;
			cursor: pointer;
			margin: 0px 0px 0px 5px;
			padding: 0px 5px 20px 5px;
		}

		.dropbtn:hover {
			color: #000;
		}

		.dropdown-lang {
			position: relative;
			top: 2px;
		}

		.dropdown {
			display: inline-block;
			margin: 0px 0px 0px 0px;
		}

		.dropdown-content {
			font-family: Calibri, Helvetica, Arial;
			font-size: 17px;
			font-weight: normal;
			display: none;
			position: absolute;
			top: 36px;
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
			border: 0px solid #000;
			border-radius: 0px;
			background-color: #fff;
			width: 165px;
			box-shadow: 2px 3px 3px #27272780;
			-webkit-box-shadow: 2px 3px 3px #27272780;
			-moz-box-shadow: 2px 3px 3px #27272780;	
			z-index: 1;
		}

		.ddflags {
			width: 135px;
		}

		.dropdown-content a {
			color: black;
			padding: 5px 12px 5px 12px;
			margin: 2px 0px 2px 0px;	
			text-decoration: none;
			display: block;
		}

		.dropbtn:hover {color: #000;}

		.dropdown-content a:hover {
			background-color: #cdcdcd;
			color: #000;
			cursor: pointer;
			}

		.dropdown:hover .dropdown-content {display: block;}

		.dropdown:hover .dropbtn {color: #000;}

		.headerLanguageFlag {
			width: 25px;
			border-radius: 100%;
		}

		.menuLanguageFlag {
			width: 24px;
			vertical-align: center;
		}


		.directionsFlagsBox {
			float: right;
			display: inline-block;
			padding: 10px 0 0 0;
		}

		.directionsLanguageFlag {
			width: 26px;
			vertical-align: center;
		}

		.directTitle {
			font-size: 19px;
		}

		.directExplain {
			font-size: 16px;
			padding: 3px 0px 3px 0px;
		}

		.tips {
			padding: 0 0 5px 0;
		}

		.ktips {
			line-height: 24px;
			font-size: 16px;	
			padding: 0 0 5px 0;
		}

		.headerSelector {
			padding: 6px 0px 6px 10px;
			cursor:pointer;
		}

		.headerSelector:hover {
			background-color: #ccc;
		}

		.eng {
			display: inline-block;	
		}

		.kor {
			display: none;
			font-family: 'Nanum Gothic Coding', monospace;
		}

		.spn {
			display: none;
		}

		.por {
			display: none;
		}

		.black {
			color: #000;
		}





		/********************blog / article formatting***********************/

		.articles {
			padding: 0px 200px;
		}


		.artPara {
			margin: 25px 0px 15px 0px;
			font-size: 21px;
			font-family: Calibri, Arial;
			line-height: 1.3;
		}

		.listenPara {
			margin: 10px 0px 25px 0px;
			font-size: 19px;
			font-family: Calibri, Arial;
			border-left: 10px #dddddd solid; 
			padding: 0px 15px;
			line-height: 1.3;	
		}

		.artImage {
			margin: 10px 0px;
			width: 100%;
		}

		.artLogo {
			height: 23px; 
			vertical-align: bottom;
		}




		/*********** PC Drop Down Catalogue****************/


		.dropPosition {
			margin: 0;
		}

		.c-wrapper {
				display: inline-block;
				color: #000;
				position: absolute;
				top: 16px;
				left: 230px;

		}

		.c-wrapper ul {
				margin: 0px;
				padding: 0px;
				list-style: none; 
				white-space: nowrap;
		}

		.c-wrapper .s0-Menu>li {
			display: inline-block;
		}

		.c-wrapper .s0-Menu a {
				position: relative;
				margin: 0px;
				text-align: left;
				font-family: Calibri;
				font-size: 17px;	
				color: #555;
				text-decoration: none;
				padding: 6px 6px 20px 6px;
				border: 0px solid red;
		}

		.c-wrapper .s1-Menu a {
				display: block;
				padding: 4px 2px 4px 2px;
				width: 165px;	
				color: #000;
				border: 0px solid green;
		}

		.c-wrapper .s2-Menu a {
				display: block;
				padding: 4px 2px 4px 2px;
				width: 200px;
				border: 0px solid green;
		}

		.c-wrapper .s3-Menu a {
				display: block;
				padding: 4px 2px 4px 2px;
				width: 195px;
				border: 0px solid green;
		}

		.c-wrapper .s3-Compact a {
				display: block;
				padding: 3px 2px 3px 2px;
				width: 255px;
				border: 0px solid green;
		}

		.c-wrapper .s1-Menu {
				position: absolute;
				top: 40px;
				left: -14px;
				display: none;
				background: rgba(255,255,255,0.97);
				width: 160px;
				min-height: 144px;	
				padding: 5px 0px 5px 15px;	/* around box */
				border: 0px solid #000;
				box-shadow: 2px 3px 3px #27272780;
				-webkit-box-shadow: 2px 3px 3px #27272780;
				-moz-box-shadow: 2px 3px 3px #27272780;	
		}

		.c-wrapper .s2-Menu {
				position: absolute;
				top: 0px;
				left: 177px;
				display: none;
				background: rgba(255,255,255,0.97);
				width: 195px;
				min-height: 145px;	
				padding: 5px 0px 5px 15px;	/* around box */ 	
				border: 0px solid #000;
				box-shadow: 2px 3px 3px #27272780;
				-webkit-box-shadow: 2px 3px 3px #27272780;
				-moz-box-shadow: 2px 3px 3px #27272780;
		}

		.c-wrapper .s3-Menu  {
				position: absolute;
				top: 0px;
				left: 212px;
				display: none;
				background: rgba(255,255,255,0.97);
				width: 253px;
				min-height: 182px;	
				padding: 5px 15px;	/* around box */
				border: 0px solid #000;
				box-shadow: 2px 3px 3px #27272780;
				-webkit-box-shadow: 2px 3px 3px #27272780;
				-moz-box-shadow: 2px 3px 3px #27272780;	
			overflow-y: auto;
		}

		.c-wrapper .s3-Easy {
			min-height: 406px;	 
		}

		.c-wrapper .s3-TV {
			min-height: 435px;	
		}

		.c-wrapper .s3-Movies {
			min-height: 406px;	 
		}

		.c-wrapper .s3-Compact {
			min-height: 412px;	 
		}

		.c-wrapper .s1-Menu li {
			padding: 0px 15px;
			margin-top: 0px;
			margin-bottom: 0px;
		}

		.c-wrapper .s2-Menu li {
			padding: 0px 15px;
			margin-top: 0px;
			margin-bottom: 0px;
		}

		.c-wrapper .s3-Menu li {
			padding: 0px 15px;
			margin-top: 0px;
			margin-bottom: 0px;
		}

		.c-wrapper .s0-Menu a:hover {
			color: #000;

		}

		.c-wrapper .s1-Menu li:hover {
			background-color: #cdcdcd;
			cursor: pointer;	
		}

		.c-wrapper .s0-Menu>li:hover .s1-Menu {
			display: block;
		}

		.c-wrapper .s1-Menu>li:hover .s2-Menu {
			display: block;
		}
		 
		.c-wrapper .s2-Menu>li:hover .s3-Menu {
			display: block;
		}

		.c-wrapper .arrowOne {
			display: inline-block;
			border: 2px solid #000;
			width: 4px;
			height: 4px;
			border-left: none;
			border-bottom: none;
			position: absolute;
			top: 13px;
			right: 22px;
			margin: 0px 0px;
			transition: all 0.5s
		}

		.c-wrapper .arrowTwo {
			display: inline-block;
			border: 2px solid #000;
			width: 4px;
			height: 4px;
			border-left: none;
			border-bottom: none;
			position: absolute;
			top: 13px;
			right: 22px;
			margin: 0px 0px;
			transition: all 0.5s
		}

		.c-wrapper .arrowOne {
				transform: rotateZ(45deg);
		}

		.c-wrapper .arrowTwo {
				transform: rotateZ(45deg);
		}

		.c-wrapper .s1-Menu>li:hover .arrowOne {
				transform: rotateZ(45deg) translate(5px, -5px);
		}

		.c-wrapper .s2-Menu>li:hover .arrowTwo {
				transform: rotateZ(45deg) translate(5px, -5px);
		}




		/*******************************************************************************************
		PC & Tablet footer setup
		*******************************************************************************************/

		.sharefoot {
			width: 150px;
			border: 0px solid red;
			margin: 5px auto 5px auto;
			padding: 30px 0px 0px 0px;
		}

		.ftext {
			margin: 1px 0px 1px 0px;
			color: #333;
			text-align: center;
			font-family: Calibri, Helvetica;
			font-size: 15px;
			font-weight: normal;
			text-shadow: 0px 0px 0px #ccc;
		}


		.socialIcon { 
			height: 32px;  
			margin: 0px 5px 5px 5px;
		}

		.friends {
			font-family: Arial; 
			font-size: 16px; 
		 
		}

		.footcenter {
			padding: 30px 0px 18px 70px;
			top: 0px;
			margin: auto;
			width: 1260px;
			z-index: 100;
			height: 30px;
			background-color:  #fff;
		}


		.gadvert {
			margin: auto;
			padding: 8px 0 0 0;
		}



		/*******************************************************************************************
		PC fonts
		*******************************************************************************************/


		h1	{
			color: #212121;
			font-family: Calibri, Helvetica;
			font-size: 13px;
			font-weight: normal;
			text-shadow: 0px 0px 0px #999;
			margin: 3px 0px 3px 0px;
			}

		h2	{
			color: #212121;
			font-family: Calibri, Helvetica;
			font-size: 24px;
			font-weight: normal;
			text-shadow: 0px 0px 0px #999;
			margin: 0px 0px 2px 0px;
			}

		h3	{
			color: #000;
			font-family: Calibri, Helvetica;
			font-size: 24px;
			font-weight: normal;
			text-shadow: 0px 0px 0px #999;
			margin: 0px;
			}

		h5 	{
			color: #212121;
			font-family: Calibri, Helvetica;
			font-size: 24px;
			font-weight: normal;
			text-shadow: 0px 0px 0px #999;
			margin: 0px 0px 2px 0px;
			}
			
		.sActTitles	{	
			color: #212121;
			font-family: Calibri, Helvetica;
			font-size: 19px;
			font-weight: normal;
			text-shadow: 0px 0px 0px #999;
			margin: 0px 0px 2px 0px;
			}

		.aDescriptors {
			color: #555;
			font-family: Calibri, Helvetica;
			font-size: 15px;
			font-weight: normal;
			text-shadow: 0px 0px 0px white;
			line-height: 1.2;
			margin: 0px;
			padding: 0px 0px 0px 15px;
			}
			
		.sumSentence	{
			color: #212121;
			font-family: Calibri, Helvetica;
			font-size: 20px;
			font-weight: bold;
			text-shadow: 0px 0px 0px #999;
			margin: 0px 0px 2px 0px;
			}

		p	{
			color: black;
			font-family: Calibri, Helvetica;
			font-size: 18px;
			font-weight: normal;
			margin-top: 2px;
			margin-bottom: 2px;
			margin-left: 2px;
			margin-right: 0px;
			}

		li	{
			color: black;
			font-family: Calibri, Helvetica;
			font-size: 17px;
			font-weight: normal;
			margin-top: 3px;
			margin-bottom: 3px;
			margin-left: -15px;
			margin-right: 0px;
			}

		.white 	{
				color: #fff;
			}

		.activityNumber {
			font-size: smaller;
			font-weight: 800;
			}

		.updated {
			font-size: smaller;
			font-weight: 800;
			color: green;
			}

		.pdftag {
			font-size: smaller;	
			color: red;
			}




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




		/****************advanced search*********************/

			.logiccontainer {
				display: grid;
				grid-template-columns: 70px 1fr;
				gap: 8px; /* Slightly less space between columns */
			}

			.searchbar {
				width: 97%;
				padding: 10px 0px 10px 10px;
				margin: 6px 0; /* Reduce margin to make it more compact */
				font-size: 16px;
				border-radius: 6px; /* Slightly less rounded corners */
				border: none;
				background-color: #f3f3f3;
				box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
				transition: background-color 0.3s, box-shadow 0.3s;
			}

			.operator {
				width: 100%;
				padding: 10px 0px 10px 10px;
				margin: 6px 0; /* Reduce margin to make it more compact */
				font-size: 12px;
				border-radius: 6px; /* Slightly less rounded corners */
				border: none;
				background-color: #f3f3f3;
				box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
				transition: background-color 0.3s, box-shadow 0.3s;
			}

			.logicbar {
				width: 97%;
				padding: 10px 0px 10px 10px;
				margin: 6px 0; /* Reduce margin to make it more compact */
				font-size: 16px;
				border-radius: 6px; /* Slightly less rounded corners */
				border: none;
				background-color: #f3f3f3;
				box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
				transition: background-color 0.3s, box-shadow 0.3s;
			}

			.searchbar:focus, .operator:focus, .logicbar:focus {
				background-color: #fff;
				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
				outline: none;

			}

			/* Modern card styling */
			#itemList {
				list-style-type: none;
				padding: 0;
				margin: 0;
			}

			#itemList li {
				padding: 20px; /* Reduced padding for smaller card size */
				margin: 8px 0; /* Less space between cards */
				background-color: #fff;
				border-bottom: 1px solid #dddddd;
				border-right: 1px solid #dddddd;
				border-radius: 10px;
				box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08); /* Softer shadow */
				transition: transform 0.3s, box-shadow 0.3s;
				display: none;
			}
		 
			#itemList li:hover {
				transform: translateY(-0px); 
				box-shadow: 4px 6px 6px rgba(0, 0, 0, 0.12); 
				
			}
		 
			.catTitle {
				font-size: 13px;  
				color: #333;
				text-transform: uppercase;
				letter-spacing: 0.8px;  
				margin-bottom: 3px;  
			}

			.srchName {
				font-size: 20px;  
				font-weight: 600;
				color: #333;
				margin: 1px 0 14px 0;  
			}

			.srchNum {
				font-size: 16px;  
				font-weight: 400;
				color: #333;
				margin: 0px 0 0px 0;  
			}

			.srchDetail {
				font-size: 13px;  
				color: #333;
				margin: 3px 0;  
				line-height: 1.1;  
			}

			.srchTags {
				font-size: 15px;
				color: #007bff;
				font-weight: 500;
				margin-top: 14px;  
			}




			 



		/****************grammar index*********************/

		#ipage {
			width: 1200px;
			border: 0px solid red;
			background-color: #fff;
		}

		.grammarpage  {
			width: 600px;
			padding: 0px 0px 0px 0px;
			margin: 54px auto 0px auto;
			background-color: #fff;
			box-shadow: 0px 0px 0px #aaa;	
		}


		.giTitle {
			color: #fff;
			background-color: #000;
			font-family: Calibri, Helvetica;
			font-size: 16px;
			font-weight: 400;
			margin: 25px 0px 0px 0px;
			padding: 2px 0px 2px 10px;
		}
			

		.giPoint {
			display: inline-block;	
			border-right: 1px solid #000;
			font-size: 16px;	
			text-align: right;
			width: 160px;
			padding: 0px 12px 0px 0px;

		}

		.giLink {
			display: inline-block;
			width: 300px;
			color: #333;
			font-family: Calibri, Helvetica;
			font-size: 16px;
			font-weight: normal;
			margin: 3px 0px 3px 12px
			}

		.grammarpage a:hover {
			color: #000;
			background-color: #ccc;
			font-weight: 600;
			cursor: pointer;
		}	


		.contactLogo {	
			display: block; 
			width: 340px; 
			margin: auto;
		}
			
			




			
		/****************levels page setup ****************/	


		.level-player {
			width: 100%;
			height: 40px;
			margin: auto;
			padding: 0px 0px 0px 0px;
			z-index: 0;
			}

		.leveltext {
			width: 486;	
			border: 1px solid #286da8;
			background-color: #fff;
			color: #fff;
			font-family: Calibri, Helvetica;
			font-size: 18px;
			font-weight: normal;
			padding: 4px 8px 4px 8px;
			margin: 3px 0px 5px 0px;
		}

		.answers {
			padding: 4px 15px;
			font-family: Calibri, Helvetica;
			font-size: 15px;
			font-weight: normal;
		}
			
		/****************contacts page setup ****************/		

		.left-contact {
				float: left;
				width: 600px;
		}

		.right-contact {
				margin: 0px 0px 0px 600px;
				width: 500px;
		}







		/****************activity page content*********************/
		.activitydescription {
			display: inline-block;
			position: relative;
			width: 650px;
			height: 260px;
			padding: 5px 10px 5px 15px;
			margin: 0px 10px 10px 0px;
			border-radius: 8px;	
			vertical-align: top;
			background-color: #fff;
			box-shadow: 3px 3px 2px #aaa;	
			border: 0px solid #4a6796;
		}

		.activitysection {
			vertical-align: top;
			width: 650px;
			background-color: #fff;
			box-shadow: 3px 3px 2px #aaa;	
			border-radius: 8px;		
			padding: 8px 10px 1px 15px;
			margin: 8px 0px 8px 0px;
		}

		.grammarsection {
			vertical-align: top;
			width: 650px;
			background-color: #fff;
			padding: 8px 10px 1px 15px;
			margin: 8px 0px 8px 0px;
		}

		.pcactivitypic {
			display: inline-block;
			width: 485px;
			height: 175px;
			vertical-align: top;
			padding: 0px;
			margin: 0px;
		}

		.handactivitypic {
			display: none;
		}


			
		/******social media icons for activities***********/	

		.share {
			position: absolute;
			bottom: 10px;
			width: 95%;
		}

		.reload {
			color: #000;
			font-family: Calibri, Helvetica, Helvetica;
			font-weight: 800;
			font-size: 20px;
		}


			


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

		.bigicon	{
			float: left;
			width: 54px;
			padding: 7px 15px 5px 5px;
			}

			
			
		/****************vocab popup setup******************/
		.popup {
			position: relative;
			display: inline-block;
			cursor: pointer;
		}

		.popup .vpopup  {
			visibility: hidden;
			width: 200px;
			background-color: #555;
			margin: auto;
			border-radius: 3px;
			padding: 5px 5px 1px 5px;
			position: absolute;
			z-index: 1;
			bottom: 125%;
			left: 50%;
			margin-left: -80px;
		}

		.popup .vpopup::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -27px;
			border-width: 5px;
			border-style: solid;
			border-color: #555 transparent transparent transparent;
		}

		.popup .show {
			visibility: visible;
			-webkit-animation: fadeIn 1s;
			animation: fadeIn 1s
		}

		@-webkit-keyframes fadeIn {
			from {opacity: 0;} 
			to {opacity: 1;}
		}

		@keyframes fadeIn {
			from {opacity: 0;}
			to {opacity:1 ;}
		} 




		/****************Summary Explanation******************/

		.sumExp  {
			border-radius: 3px;
			padding: 8px 8px 8px 8px;
			position: absolute;
			z-index: 1;
			
			visibility: hidden;
			width: 300px;
			margin: 0px 0px 0px 10px;
			bottom: 50%;	
			background-color: #ccffff;
			border: 1px solid black;
			
			color: #000;
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 15px;
		}


		.sumBut {
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 14px;
			vertical-align: top;
		}




		.tipExp  {
			border-radius: 3px;
			padding: 8px 8px 8px 8px;
			position: absolute;
			z-index: 1;
			
			visibility: hidden;
			width: 380px;
			margin: 0px 0px 0px 10px;
			bottom: 50%;	
			background-color: #ccffff;
			border: 1px solid black;
			
			color: #000;
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 15px;
		}


		.tipBut {
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 14px;
			vertical-align: top;
			
			
		}
			

		/****************Summary Slider******************/

		.revealWrapper {
		  position: relative;
		  width: 95%;
		  margin: 10px 0 10px 8px;
		}

		.revealText {
		  white-space: pre-line;			
		  word-break: break-word;
		  line-height: 1.3;
		  color: #286da8;
		  font-size: 110%;
		  width: 95%;
		  margin: 10px 0 10px 8px;
		  display: block; 
		}

		.revealText .char {
		  visibility: hidden;
		}

		.revealText .char.shown {
		  visibility: visible;
		}

		.revealControls {
		  display: flex;
		  align-items: center;
		  gap: .5rem;
		  margin: 0 0 10px 0;
		}

		.revealSlider {
		  -webkit-appearance: none;
		  appearance: none;
		  background: transparent;
		  width: 100%;
		  touch-action: pan-y;
		  cursor: pointer;
		  height: 0.4rem;
		  border-radius: 0.2rem;
		  accent-color: #33adad;
		  --progress: 0%;
		}

		.revealSlider::-webkit-slider-runnable-track {
		  height: 0.4rem;
		  border-radius: 0.2rem;
		  background: linear-gradient(
			to right,
			#33adad 0%,
			#33adad var(--progress, 0%),
			#ddd var(--progress, 0%),
			#ddd 100%
		  );
		}

		.revealSlider::-moz-range-track {
		  height: 0.4rem;
		  border-radius: 0.2rem;
		  background: #ddd;
		}

		.revealSlider::-moz-range-progress {
		  height: 0.4rem;
		  border-radius: 0.2rem;
		  background: #33adad;
		}

		.revealSlider::-webkit-slider-thumb {
		  -webkit-appearance: none;
		  appearance: none;
		  width: 2.4rem;
		  height: 1.2rem;
		  border-radius: 8%;
		  background: #33adad;
		  box-shadow: 0 2px 6px rgba(0,0,0,.25);
		  cursor: pointer;
		  position: relative;
		  z-index: 1;
		  margin-top: -0.4rem;
		}

		.revealSlider::-moz-range-thumb {
		  width: 2.4rem;
		  height: 1.2rem;
		  border-radius: 8%;
		  background: #33adad;
		  border: none;
		  box-shadow: 0 2px 6px rgba(0,0,0,.25);
		  cursor: pointer;
		}

		.revealSlider:focus {
		  outline: none;
		}

		.revealSlider:focus-visible::-webkit-slider-thumb,
		.revealSlider:focus-visible::-moz-range-thumb {
		  box-shadow: 0 0 0 4px rgba(0,153,153,.25),
					  0 2px 6px rgba(0,0,0,.25);
		}

		.revealSlider:hover::-webkit-slider-thumb,
		.revealSlider:hover::-moz-range-thumb {
		  filter: brightness(1.05);
		}

		.revealSlider:active::-webkit-slider-thumb,
		.revealSlider:active::-moz-range-thumb {
		  transform: scale(0.96);
		}

		.revealSlider:disabled {
		  opacity: .5;
		  cursor: not-allowed;
		}

		.revealSlider:disabled::-webkit-slider-thumb,
		.revealSlider:disabled::-moz-range-thumb {
		  background: #aaa;
		  box-shadow: 0 1px 3px rgba(0,0,0,.15);
		}


		/****************TOEFL 2026 Input******************/

		.cloze-wrap { 
			display: inline-flex; 
			align-items: center; 
			gap: .28rem; 
			padding: 0 .05rem; 
			margin: 0 .1rem; 
			position: relative; 
		}
			
		.cloze-input { 
			width: 1.15rem; 
			border: none; 
			border-bottom: 2px solid #cbd5e1; 
			text-align: center; 
			font: inherit; 
			outline: none; 
			background: none; 
		}
		
		.cloze-input:focus { 
			border-bottom-color: #2563eb; 
			box-shadow: 0 2px 0 0 rgba(37,99,235,.15); 
		}
			
		.cloze-prefix, .cloze-suffix { 
			letter-spacing: 0.02em; 
		}


		.cloze-result { font-size: .85rem; 
			margin-left: .25rem; 
			display: none; 
		}
		
		.cloze-wrap.correct { 
			background: #ecfdf5; 
			box-shadow: inset 0 0 0 2px #10b98122; 
			border-radius: 8px; 
		}
		
		.cloze-wrap.correct .cloze-result { color: #059669; 
			display: inline; 
		}
		
		.cloze-wrap.incorrect { 
			background: #fef2f2; box-shadow: inset 0 0 0 2px #ef444422; 
			border-radius: 8px; 
		}
		
		.cloze-wrap.incorrect .cloze-result { 
			color: #dc2626; 
			display: inline; 
		}




  






			
		/****************audio/video player setup*********************/

		.videoframe {
			display: inline-block;
			position: fixed;
			width: 480px;
			height: 270px;
			vertical-align: top;

			padding: 0px;
			box-shadow: 3px 3px 2px #aaa;	
			margin: auto;
			z-index: 10;
			}

		.audioframe	{
			display: inline-block;
			position: fixed;
			width: 485px;
			height: 268px;
			vertical-align: top;

			padding: 0px;
			box-shadow: 3px 3px 2px #aaa;
			border: 1px solid #000;
			margin: auto;
			z-index: 10;	
			}
			
		.player {
			position: relative;
			width: 100%;
			height: 60px;
			margin: 0px;
			padding: 0px;
			z-index: 1;
			}

		.inplayer {
			position: relative;
			width: 250px;
			height: 30px;
			margin: 25px 0px 5px 0px;
			padding: 0px;
			z-index: 1;
			}
			
			
		#hsticky {
			width: 100%;
			background-color: #fff;
			border: 0px solid black;
			padding: 0px 0px 0px 0px;
		}

		#psticky {
			width: 100%;
			background-color: #fff;
			border: 0px solid black;
			padding: 0px 0px 0px 0px;
		}


		/****************Natural Language Video Player**************/

		.natLangVid {
			height: 240px;
			width: 420px;
		}

		.natLangVid2 {
			height: 360px;
			width: 360px;
		}




		/****************PC background picture setup**************/

		.videotable {
			color: black;
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 16px;
			font-weight: normal;
			text-align: center;
		}
			
		.videopics {
			width: 100px;
			border: none;
			margin-top: 5px;
			margin-bottom: 5px;
			margin-left: 5px;
			margin-right: 5px;

			padding-top: 0px;
			padding-bottom: 0px;
			padding-left: 0px;
			padding-right: 0px;
		}

		.knownInfo {
			color: #444;

		}


		 
		/****************PC Vocab Accuracy <li> formatting**************/
		.vocabexplain {
			color: black;
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 14px;
			font-style: italic;
			font-weight: bold;
			margin: 5px 0px 20px 10px;
		}

		.grammarparagraph {
			border: 1px black solid;
			line-height: 1.6;
			padding: 6px 10px 6px 10px;
			margin: 6px 4px;
		}


		ul.ulPreps li {
				margin-bottom: 10px;
				line-height: 1.3;
			}




		/****************American English File*******************/


		.sectionMargin {
			padding: 10px 0px 0px 15px;
		}

		.roleplayCard {
			border: 1px solid #a30000;
			padding: 6px 3px 0px 10px;			
		}

		.roleplayTitle {
			color: #a30000;		
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 20px;
			font-weight: bold;			
		}
		
		.diaSpeaker	{
			color: #a30000;
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 16px;
			text-transform: uppercase;
		}

		.diaBullet	{
			margin: 20px 0px 2px -25px;
			font-size: 20px;
			list-style-type: none;		
		}

		.rewriteOrigin	 {
			color: #a30000;		
			padding: 2px 0px;
		}
		
		.tr3 {
			color: #286da8;
			text-decoration: underline;
			text-decoration-color: #286da8;		
		}
		
		.tr4 {
			color: #eee;
			text-decoration: underline;
			text-decoration-color: #286da8;	
		}	

		.tr6 {
			color: #eee;
			text-decoration: underline;
			text-decoration-color: #286da8;		
		}

		.red {
			color: red;
		}

		ol.grammarCheck li {
			padding-bottom: 20px;
		}



			
		/****************answer buttons setup*******************/

		.answers {
		  background-color: #ccc;
		  border: none;
		  border-radius: 4px;
		  color: white;
		  padding: 7px 12px;
		  text-align: center;
		  text-decoration: none;
		  display: inline-block;
		  font-size: 14px;
		  margin: 4px auto;
		  cursor: pointer;
			}

			
		.answers  {
		  color: #FFF;
		  transition: all 0.5s;
		  position: relative;
		}
		.answers::before {
		  content: '';
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 1;
		  background-color: rgba(255,255,255,0.2);
		  transition: all 0.5s;
		}
		.answers:hover::before {
		  opacity: 0 ;
		  transform: scale(0.5,0.5);
		}
		.answers::after {
		  content: '';
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 1;
		  opacity: 0;
		  transition: all 0.5s;
		  border: 1px solid rgba(255,255,255,0.5);
		  transform: scale(1.2,1.2);
		}
		.answers:hover::after {
		  opacity: 1;
		  transform: scale(1,1);
		}	
			
			
			
		.answerdiv {
			margin: 0px 5px;
			}

		/****************sign up message formatting************************/
		.signupinsert {
			color: black;
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 20px;
			font-weight: normal;
			text-align: center;
			padding: 0px 10px 10px 10px;
			margin: 20px auto 20px auto;
			}
			
		/****************Listen & Repeat setup************************/

		.previewPlayer {
			display: inline;
			margin: 2px; 
			width: 80px; 
			height: 25px;
			}


		.repeatPlayer {
			margin: 2px auto 0px auto; 
			width: 95%; 
			height: 25px;
			}

		.repeatText {
			width: 90%;
			background-color: #fff;
			color: #fff;
			padding: 4px 0px 4px 6px;
			margin: 2px 0px 6px 5px;
			transition: all 0.4s;	
			}
			
		.wordList {
			width: 90%;
			background-color: #fff;
			color: #fff;
			border: 0px solid red;
			padding: 3px 0px 3px 10px;
			margin: 8px 0px -6px 5px;	
			}
			
		.hint {
			background-color: #fff;
			color: #fff;
			border: 0px solid red;
			padding: 2px 0px 3px 5px;
			margin: 2px 0px 3px 0px;	
			}	

		.sumInput {
			width: 95%;
			margin: 3px 0px 0px 0px;
			}		
			

		/**************** Vocab li  and checkbox styling  ************************/
		 
		 .pos {
			font-size: 15px; 
		 }

		li {
			padding: 2px 10px 2px 10px;
			}

		.discussQuestion li {
			padding: 8px 10px 8px 10px;
			}

		#language li {
			padding: 4px 10px 4px 8px;
			}
			
		.Evcb {
				display: none;
		}

		.vocabli {	
			list-style-type: none;
			margin: 0px 0px 0px 0px;
			z-index: 5;
		}
			
		.vcbHid {
			visibility: hidden;
		}
			
			
		/******************************** Vocab Check marks *************************/

		.vcbCheck {
			position: relative;
			display: inline-block;
			left: -28px;
			margin: 0px -24px 0px 0px;

		}

		.vcbCheck label {
			cursor: pointer;
			position: absolute;
			width: 14px;
			height: 14px;
			top: 5px; left: 0px;
			border-radius: 4px;


			-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
			-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
			box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);

			background: -webkit-linear-gradient(top, #ccc 0%, #ddd 100%);
			background: -moz-linear-gradient(top, #ccc 0%, #ddd 100%);
			background: -o-linear-gradient(top, #ccc 0%, #ddd 100%);
			background: -ms-linear-gradient(top, #ccc 0%, #ddd 100%);
			background: linear-gradient(to top, #ccc 0%, #ddd 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccc', endColorstr='#d',GradientType=0 );
		}

		.vcbCheck label:after {
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			filter: alpha(opacity=0);
			opacity: 0;
			content: '';
			position: absolute;
			width: 7px;
			height: 3px;
			background: transparent;
			top: 3px;
			left: 2px;
			border: 3px solid #009999;
			border-top: none;
			border-right: none;
			z-index: 5;

			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}



		.vcbCheck input[type=checkbox]:checked + label:after {
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: alpha(opacity=100);
			opacity: 1;
			z-index: 5;
		}




			
		/****************Compare to the Text************************/	
			
		.text {	
			border: 0px solid red;
			font-family: Georgia;
			font-size: 16px;	
			font-weight: normal;
			line-height: 160%;
			color: #000;
			padding: 8px 18px;
		}	

		.textTitle {	
			border: 0px solid red;
			font-family: Georgia;
			font-size: 17px;	
			font-weight: bold;
			font-variant: small-caps;
			line-height: 160%;
			color: #000;
			padding: 8px 18px;
		}

		.tstamp {	
			border: 0px solid red;
			font-family: 'Berkshire Swash', cursive;
			font-size: 16px;	
			font-weight: normal;
			line-height: 160%;
			padding: 0px 5px 0px 0px;
			text-align: center;
		}


		.booktitle {	
			border: 0px solid red;
			font-family: centauri , cursive;
			font-size: 16px;	
			font-weight: normal;
			line-height: 160%;
			padding: 0px 5px 0px 0px;
		}

		.prTense {
			font-family: Calibri, Helvetica, Helvetica;
			font-weight: normal;
			color: red;
			padding: 0px 0px 0px 0px;
			font-size: smaller;	
		}



		hr.bookHr {
			border: 0;
			height: 1px;
			width: 90%;
			margin: 10px auto;
			background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
		}


		.dpractice {
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 14px;	
			font-weight: normal;
			color: grey;	
			padding: 0px 0px 0px 0px;
			vertical-align: 10%;
		}


			
		/****************scriptbox setup************************/
		.scriptbox {
			width: 90%;
			border: 0px solid black;
			background-color: white;
			padding: 0px 10px 10px 10px;
			margin: 20px auto 10px auto;
			}

		/****************watch next************************/
		.nextLesson {
				margin: 0 0 0 -26px;
				padding: 9px 0px 9px 34px;
				list-style: none;
				background-image: url(https://www.listeninenglish.com/sitimg/nextIcon.svg);
				background-repeat: no-repeat;
				background-position: left center;
				background-size: 26px;		 
				font-size: 19px;
			}



		/****************listen & draw setup**************/
		.drawing {
			width: 560px;
			border: 1px solid red;
			margin: 10px 0px 20px 6px;
			padding: 0px 0px 0px 0px;
			}

		.dict-table {
			border: 0px solid red;
			width: 550px;
			font-family: Calibri, Helvetica;
			font-size: 16px;
			font-weight: normal;
			color: black;
		}	

		.shapes {
			height: 60px;
			margin: 2px 10px 2px 10px;
		}

			
		/****************PC Activitiy Visible****************/

		.toggle {	
			display: none;
			}

		.ans3 {
				display: none;
				}

		.ans4 {
				display: none;
				}

		.ans5 {
				display: none;
				}		

		.ans6 {
				display: none;
				}
				
		.ans7 {
				display: none;
				}
				
		.ans8 {
				display: none;
				}
				
		.ans9 {
				display: none;
				}
				
		.ans10 {
				display: none;
				}

		.ans11 {
				display: none;
				}
				



		/*******************************************************************************************
		links and mouseovers
		*******************************************************************************************/



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

		.gramchoice {
				font-family: Calibri, Helvetica;
				font-size: 14px;
				border: 0px solid #000;
				margin: 2px 0px 2px 30px;
				}	
		









			
		/************************************************************************************************************************************************************************************************************************
		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;
		}	

		.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;
			}

		.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;
					}

				.pconly	{
						display: none;
				}


				.hand	{
						display: none;
					}

				.handi	{
						display: none;
					}

				.tablet	{
						display: block;
				}









				/*******************************************************************************************
				TABLET browser page setup
				*******************************************************************************************/


				body {
					background-color: #edeef0;
					margin: 0;
					padding: 0;
					}
					
				header {
					border: 0px solid red;
					position: fixed;
					background-color:  #fff;
					width: 100%;
					height: 54px;
					padding: 0px 0px 0px 0px;
					margin: auto;
					z-index: 100;
					}	
				
				section	{
					background-color: #edeef0;
					border: 0px solid green;
					max-width: 800px;
					min-width: 800px;
					padding-left: 0px;
					padding-right: 0px;
					padding-top: 10px;
					padding-bottom: 10px;
					margin: auto;
					text-align: left;
					}

				.center {
					border: 0px solid red;
					vertical-align: top;
					display: block;
					width: 780px;
					margin: 52px auto 0px auto;
					padding: 2px 0px;
					}

				.dycent-h {
					border: 0px solid red;
					padding: 7px 0px 12px 0px;
					top: 0px;
					margin: auto;
					width: 800px;
					z-index: 100;
					height: 30px;
					background-color:  #fff;
				}



				/*********** PC Drop Down Catalogue****************/

				.dropPosition {
					margin: 0;
				}

				.c-wrapper {
						display: inline-block;
						color: #000;
						position: absolute;
						top: 16px;
						left: 230px;

				}

				.c-wrapper ul {
						margin: 0px;
						padding: 0px;
						list-style: none; 
						white-space: nowrap;
						line-height: 1.0;
				}

				.c-wrapper .s0-Menu>li {
					display: inline-block;
				}

				.c-wrapper .s0-Menu a {
						position: relative;
						margin: 0px;
						text-align: left;
						font-family: Calibri;
						font-size: 14px;	
						color: #555;
						text-decoration: none;
						padding: 6px 6px 20px 6px;
						border: 0px solid red;
				}

				.c-wrapper .s1-Menu a {
						display: block;
						padding: 5px 2px 5px 2px;
						width: 145px;	
						color: #000;
						border: 0px solid green;
				}

				.c-wrapper .s2-Menu a {
						display: block;
						padding: 5px 2px 5px 2px;
						width: 185px;
						border: 0px solid green;
				}

				.c-wrapper .s3-Menu a {
						display: block;
						padding: 5px 2px 5px 2px;
						width: 195px;
						border: 0px solid green;
				}

				.c-wrapper .s3-Compact a {
						display: block;
						padding: 3px 2px 3px 2px;
						width: 225px;
						border: 0px solid green;
				}

				.c-wrapper .s1-Menu {
						position: absolute;
						top: 40px;
						left: -14px;
						display: none;
						background: rgba(255,255,255,0.97);
						width: 140px;
						min-height: 120px;	
						padding: 5px 0px 5px 15px;	/* around box */
						border: 0px solid #000;
						box-shadow: 2px 3px 3px #27272780;
						-webkit-box-shadow: 2px 3px 3px #27272780;
						-moz-box-shadow: 2px 3px 3px #27272780;	
				}

				.c-wrapper .s2-Menu {
						position: absolute;
						top: 0px;
						left: 157px;
						display: none;
						background: rgba(255,255,255,0.97);
						width: 180px;
						min-height: 120px;	
						padding: 3px 0px 5px 15px;	/* around box */ 	
						border: 0px solid #000;
						box-shadow: 2px 3px 3px #27272780;
						-webkit-box-shadow: 2px 3px 3px #27272780;
						-moz-box-shadow: 2px 3px 3px #27272780;
				}

				.c-wrapper .s3-Menu  {
						position: absolute;
						top: 0px;
						left: 197px;
						display: none;
						background: rgba(255,255,255,0.97);
						width: 220px;
						min-height: 122px;	
						padding: 5px 15px;	/* around box */
						border: 0px solid #000;
						box-shadow: 2px 3px 3px #27272780;
						-webkit-box-shadow: 2px 3px 3px #27272780;
						-moz-box-shadow: 2px 3px 3px #27272780;	
					overflow-y: auto;
				}

				.c-wrapper .s3-Easy {
					min-height: 310px;	 
				}

				.c-wrapper .s3-TV {
					min-height: 310px;	
				}

				.c-wrapper .s3-Movies {
					min-height: 286px;	 
				}

				.c-wrapper .s1-Menu li {
					padding: 0px 15px;
					margin-top: 0px;
					margin-bottom: 0px;
				}

				.c-wrapper .s2-Menu li {
					padding: 0px 15px;
					margin-top: 0px;
					margin-bottom: 0px;
				}

				.c-wrapper .s3-Menu li {
					padding: 0px 15px;
					margin-top: 0px;
					margin-bottom: 0px;
				}

				.c-wrapper .s0-Menu a:hover {
					color: #000;

				}

				.c-wrapper .s1-Menu li:hover {
					background-color: #cdcdcd;
					cursor: pointer;	
				}

				.c-wrapper .s0-Menu>li:hover .s1-Menu {
					display: block;
				}

				.c-wrapper .s1-Menu>li:hover .s2-Menu {
					display: block;
				}
				 
				.c-wrapper .s2-Menu>li:hover .s3-Menu {
					display: block;
				}

				.c-wrapper .arrowOne {
					display: inline-block;
					border: 2px solid #000;
					width: 4px;
					height: 4px;
					border-left: none;
					border-bottom: none;
					position: absolute;
					top: 10px;
					right: 22px;
					margin: 0px 0px;
					transition: all 0.5s
				}

				.c-wrapper .arrowTwo {
					display: inline-block;
					border: 2px solid #000;
					width: 4px;
					height: 4px;
					border-left: none;
					border-bottom: none;
					position: absolute;
					top: 10px;
					right: 22px;
					margin: 0px 0px;
					transition: all 0.5s
				}

				.c-wrapper .arrowOne {
						transform: rotateZ(45deg);
				}

				.c-wrapper .arrowTwo {
						transform: rotateZ(45deg);
				}

				.c-wrapper .s1-Menu>li:hover .arrowOne {
						transform: rotateZ(45deg) translate(5px, -5px);
				}

				.c-wrapper .s2-Menu>li:hover .arrowTwo {
						transform: rotateZ(45deg) translate(5px, -5px);
				}

			



				/******the dropdown menus in the header****************/
				.rightmenus-container {
					display: inline-block;
					position: absolute;
					top: 20px;
					right: 10px;
					border: 0px solid green;
					margin: 0px 20px 0px 0px;
				}

				button:focus {
					outline:0;
					}


				.dropbtn {
					display: inline-block;
					border: 0px solid red;
					background-color:  rgba(0,0,0,0);
					color: #555;
					font-family: Calibri, Helvetica, Arial;
					font-size: 16px;
					font-weight: normal;
					cursor: pointer;
					margin: 0px 0px 0px 5px;
					padding: 0px 5px 20px 5px;
				}

				.dropbtn:hover {
					color: #000;
				}

				.dropdown-lang {
					position: relative;
					top: 2px;
				}


				.dropdown {
					display: inline-block;
					margin: 0px 0px 0px 0px;
				}

				.dropdown-content {
					font-family: Calibri, Helvetica, Arial;
					font-size: 14px;
					font-weight: normal;
					display: none;
					position: absolute;
					top: 36px;
					margin: 0px 0px 0px 0px;
					padding: 0px 0px 0px 0px;
					border: 0px solid #000;
					border-radius: 0px;
					background-color: #fff;
					width: 150px;
					box-shadow: 2px 3px 3px #27272780;
					-webkit-box-shadow: 2px 3px 3px #27272780;
					-moz-box-shadow: 2px 3px 3px #27272780;	
					z-index: 1;
				}

				.ddflags {
					width: 120px;
				}

				.dropdown-content a {
					color: black;
					padding: 5px 12px 5px 12px;
					margin: 2px 0px 2px 0px;	
					text-decoration: none;
					display: block;
				}

				.dropbtn:hover {color: #000;}

				.dropdown-content a:hover {
					background-color: #cdcdcd;
					color: #000;
					cursor: pointer;
					}

				.dropdown:hover .dropdown-content {display: block;}

				.dropdown:hover .dropbtn {color: #000;}

				.headerLanguageFlag {
					width: 21px;
					border-radius: 100%;
				}

				.menuLanguageFlag {
					width: 20px;
					vertical-align: center;
				}

		


				/*******************************************************************************************
				TABLET fonts
				*******************************************************************************************/

				h1	{
					color: #212121;
					font-family: Calibri, Helvetica;
					font-size: 12px;
					font-weight: normal;
					text-shadow: 0px 0px 0px #999;
					margin: 0px 0px 2px 0px;
					}

				h2	{
					color: #212121;
					font-family: Calibri, Helvetica;
					font-size: 20px;
					font-weight: normal;
					text-shadow: 0px 0px 0px #999;
					margin: 0px 0px 2px 0px;
					}

				h3	{
					color: #000;
					font-family: Calibri, Helvetica;
					font-size: 19px;
					font-weight: normal;
					text-shadow: 0px 0px 0px #999;
					margin: 0px;
					}

				h5	{
					color: #212121;
					font-family: Calibri, Helvetica;
					font-size: 22px;
					font-weight: normal;
					text-shadow: 0px 0px 0px #999;
					margin: 0px 0px 2px 0px;
					}


				.sActTitles	{
					color: #212121;
					font-family: Calibri, Helvetica;
					font-size: 17px;
					font-weight: normal;
					text-shadow: 0px 0px 0px #999;
					margin: 0px;
					}


				.aDescriptors	{
					color: #777;
					font-family: Calibri, Helvetica;
					font-size: 13px;
					font-weight: normal;
					text-shadow: 0px 0px 0px white;
					line-height: 1.2;
					margin: 0px;
					padding: 0px 0px 0px 15px;
					}

				.sumSentence	{
					color: #212121;
					font-family: Calibri, Helvetica;
					font-size: 17px;
					font-weight: bold;
					text-shadow: 0px 0px 0px #999;
					margin: 0px 0px 2px 0px;
					}

				p	{
					color: black;
					font-family: Calibri, Helvetica;
					font-size: 14px;
					font-weight: normal;
					margin-top: 2px;
					margin-bottom: 2px;
					margin-left: 2px;
					margin-right: 0px;
					}

				li	{
					color: black;
					font-family: Calibri, Helvetica;
					font-size: 14px;
					font-weight: normal;
					margin-top: 3px;
					margin-bottom: 3px;
					margin-left: -15px;
					margin-right: 0px;
					}

				

				.directTitle {
						font-size: 16px;
					}

				/********************article***********************/

				.articles {
					padding: 0px 60px;
				}

				.artPara {
					margin: 23px 0px 13px 0px;
					font-size: 20px;
					font-family: Calibri, Arial;
					line-height: 1.5;
				}

				.listenPara {
					margin: 10px 0px 25px 0px;
					font-size: 18px;
					font-family: Calibri, Arial;
					border-left: 10px #dddddd solid; 
					padding: 0px 15px;
					line-height: 1.5;
				}

				.artImage {
					margin: 10px 0px;
					width: 100%;
				}

				.artLogo {
					height: 23px; 
					vertical-align: bottom;
				}


				.left-contact {
						float: left;
						width: 280px;
				}

				.right-contact {
						margin: 0px 0px 0px 300px;
						width: 500px;
				}			
				

				.contactLogo {	
					display: block; 
					width: 220px; 
					margin: 20px auto;
				}	


				#ipage {
					width: 100%;
					border: 0px solid red;
					background-color: #fff;
				}

				.grammarpage  {
					width: 100%;
					padding: 0px 0px 0px 0px;
					margin: 10px auto 0px auto;
					background-color: #fff;
					box-shadow: 0px 0px 0px #aaa;	
					
				}



				.giTitle {
					color: #fff;
					background-color: #000;
					font-family: Calibri, Helvetica;
					font-size: 3.6vw;
					font-weight: 400;
					margin: 25px 0px 0px 0px;
					padding: 2px 0px 2px 10px;
				}
					
					
				.giPoint {
					display: inline-block;	
					border-right: 1px solid #000;
					font-size: 3.4vw;	
					text-align: right;
					width: 39vw;
					padding: 0 1.2vw 0 0;

				}

				.giLink {
					display: inline-block;
					width: 48vw;
					color: #333;
					font-family: Calibri, Helvetica;
					font-size: 3.0vw;
					font-weight: normal;
					margin: 1.7vw 0 1.7vw 1.0vw;
					}

				.grammarpage a:hover {
					color: #000;
					background-color: #ccc;
					font-weight: 600;
					cursor: pointer;
				}





				/****************advanced search*********************/

					.logiccontainer {
						display: grid;
						grid-template-columns: 70px 1fr;
						gap: 2px; /* Slightly less space between columns */
					}

					.searchbar {
						width: 97%;
						padding: 8px 0px 8px 10px;
						margin: 5px 0; /* Reduce margin to make it more compact */
						font-size: 4.0vw;
						border-radius: 6px; /* Slightly less rounded corners */
						border: none;
						background-color: #f3f3f3;
						box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
						transition: background-color 0.3s, box-shadow 0.3s;
					}

					.operator {
						width: 100%;
						padding: 8px 0px 8px 10px;
						margin: 5px 0; /* Reduce margin to make it more compact */
						font-size: 4.0vw;
						border-radius: 6px; /* Slightly less rounded corners */
						border: none;
						background-color: #f3f3f3;
						box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
						transition: background-color 0.3s, box-shadow 0.3s;
					}

					.logicbar {
						width: 97%;
						padding: 8px 0px 8px 10px;
						margin: 5px 0; /* Reduce margin to make it more compact */
						font-size: 4.0vw;
						border-radius: 6px; /* Slightly less rounded corners */
						border: none;
						background-color: #f3f3f3;
						box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
						transition: background-color 0.3s, box-shadow 0.3s;
					}

					.searchbar:focus, .operator:focus, .logicbar:focus {
						background-color: #fff;
						box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
						outline: none;
					}

					/* Modern card styling */
					#itemList {
						list-style-type: none;
						padding: 0;
						margin: 0;
					}

					#itemList li {
						padding: 20px; /* Reduced padding for smaller card size */
						margin: 8px 0; /* Less space between cards */
						background-color: #fff;
						border-bottom: 1px solid #dddddd;
						border-right: 1px solid #dddddd;
						border-radius: 10px;
						box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08); /* Softer shadow */
						transition: transform 0.3s, box-shadow 0.3s;
						display: none;
					}
				 
					#itemList li:hover {
						transform: translateY(-0px); 
						box-shadow: 4px 6px 6px rgba(0, 0, 0, 0.12);  
					}
				 
					.catTitle {
						font-size: 3.3vw;  
						color: #333;
						text-transform: uppercase;
						letter-spacing: 0.8px;  
						margin-bottom: 3px;  
					}

					.srchName {
						font-size: 5.0vw;  
						font-weight: 600;
						color: #333;
						margin: 1px 0 14px 0;  
					}

					.srchNum {
						font-size: 3.5vw;  
						font-weight: 400;
						color: #333;
						margin: 0px 0 0px 0;  
					}

					.srchDetail {
						font-size: 3.5vw;  
						color: #333;
						margin: 3px 0;  
						line-height: 1.1;  
					}

					.srchTags {
						font-size: 3.9vw;
						color: #007bff;
						font-weight: 500;
						margin-top: 14px;  
					}











				/********************************************************************************************************************************************************************/
				/****************activity page content*******************************************************************************************************************************/
				/********************************************************************************************************************************************************************/
				
				
				.activitydescription {
					display: inline-block;
					position: relative;
					width: 380px;
					height: 220px;
					padding: 10px 5px 5px 10px;
					margin: 0px 10px 10px 0px;	
					vertical-align: top;
					background-color: #fff;
					border: 0px solid #4a6796;
				}

				.activitysection {
					vertical-align: top;
					width: 380px;
					background-color: #fff;
					padding: 9px 5px 1px 10px;
					margin: 8px 0px 8px 0px;
				}

				.pcactivitypic {
					display: inline-block;
					width: 350px;
					height: 126px;
					vertical-align: top;
					padding: 0px;
					margin: 0px;
				}

				.handactivitypic {
					display: none;
				}






					
				/******social media icons for activities***********/	

				.share {
					position: absolute;
					bottom: 10px;
					width: 95%;
				}

				.reload {
					color: #000;
					font-family: Calibri, Helvetica, Helvetica;
					font-weight: 800;
					font-size: 16px;
				}

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

				.bigicon	{
					float: left;
					width: 46px;
					padding: 7px 15px 8px 5px;
					}
				 
				.premiumStar {
					height: 18px;
					padding: 8px 0px 0px 0px;
					}	

				.pdfIcon {
					float: right;
					height: 50px;
					padding: 0px 0px 0px 0px;
					}	
					
				/****************audio/video player setup*********************/

				.videoframe {
					display: inline-block;
					position: fixed;
					width: 350px;
					height: 200px;
					vertical-align: top;

					padding: 0px;
					box-shadow: 3px 3px 2px #aaa;	
					margin: auto;
					z-index: 10;
					}

				.audioframe	{
					display: inline-block;
					position: fixed;
					width: 350px;
					height: 210px;
					vertical-align: top;

					padding: 0px;
					box-shadow: 3px 3px 2px #aaa;
					border: 1px solid #000;
					margin: auto;
					z-index: 10;
					}
					
				.player {
					position: relative;
					width: 100%;
					height: 50px;
					margin: 0px;
					padding: 0px;
					z-index: 1;
					}

				.inplayer {
					position: relative;
					width: 250px;
					height: 40px;
					margin: 5px 0px 5px 0px;
					padding: 0px;
					z-index: 1;
					}
					
					
				#hsticky {
					width: 100%;
					background-color: #fff;
					border: 0px solid black;
					padding: 0px 0px 0px 0px;
				}

				#psticky {
					width: 100%;
					background-color: #fff;
					border: 0px solid black;
					padding: 0px 0px 0px 0px;
				}



				.natLangVid {
					height: 180px;
					width: 320px;
				}

				.natLangVid2 {
					height: 280px;
					width: 280px;
				}


				.diaSpeaker	{
					color: #a30000;
					font-family: Calibri, Helvetica, Helvetica;
					font-size: 14px;
					text-transform: uppercase;
				}

				.diaBullet	{
					margin: 20px 0px 2px -30px;
					font-size: 17px;
					list-style-type: none;		
				}

				.answers {
				  background-color: #ccc;
				  border: none;
				  border-radius: 4px;
				  color: white;
				  padding: 6px 11px;
				  text-align: center;
				  text-decoration: none;
				  display: inline-block;
				  font-size: 12px;
				  margin: 4px auto;
				  cursor: pointer;
					}

					
				.answerdiv {
					margin: 0px 5px;
					}

				/****************TABLET background picture setup**************/

				.pos {
					font-size: 13px; 
				 }


				.videotable {
					color: black;
					font-family: Calibri, Helvetica, Helvetica;
					font-size: 12px;
					font-weight: normal;
					text-align: center;
				}
					
				.videopics {
					width: 65px;
					border: none;
					margin: 3px 2px;
					padding: 0px;
				}

					

					
				/****************answer buttons setup*******************/
				.button {
					font-size: 13px;
					text-align: center;
					padding: 2px 10px 2px 10px;
					margin: 5px 0 0 0;
					height: 25px;
					}

				.answerdiv {
					margin-left: 0px;
					}


				/****************scriptbox setup************************/
				.scriptbox {
					width: 90%;
					border: 0px solid black;
					background-color: white;
					padding: 0px 10px 10px 10px;
					margin: 20px auto 10px auto;
					}


				/****************watch next************************/
				.nextLesson {
						margin: 0 0 0 -26px;
						padding: 9px 0px 9px 30px;
						list-style: none;
						background-image: url(https://www.listeninenglish.com/sitimg/nextIcon.svg);
						background-repeat: no-repeat;
						background-position: left center;
						background-size: 22px;		 
						font-size: 16px;
					}



				/****************listen & draw setup**************/
				.drawing {
					width: 560px;
					border: 1px solid red;
					margin: 10px 0px 20px 6px;
					padding: 0px 0px 0px 0px;
					}

				.dict-table {
					border: 0px solid red;
					width: 550px;
					font-family: Calibri, Helvetica;
					font-size: 16px;
					font-weight: normal;
					color: black;
				}	

				.shapes {
					height: 60px;
					margin: 2px 10px 2px 10px;
				}





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


					
				/************************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;
				}	

				.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;
									}

								.pconly	{
										display: none;
										}

								.hand	{
										display: block;
									}

								.handi	{
										display: inline-block;
									}

								.tablet	{
										display: none;
								}


								.left-contact {
										width: 600px;
								}

								.right-contact {
										width: 95%;
										padding: 0px 5px 0px 5px;
										margin: 0px 0px 0px 0px;
								}



								/*******************************************************************************************
								Hand browser page setup
								*******************************************************************************************/

								header {
									background-color:  #fff;
									position: fixed;
									z-index: 1;
									max-width: 100%;
									min-width: 100%;
									padding: 0px 0px 0px 0px;
								}

								#site-header-hand {
									box-shadow: 0px 3px 6px #27272780;
									-webkit-box-shadow: 0px 3px 6px #27272780;
									-moz-box-shadow: 0px 3px 6px #27272780;
									position: fixed;
									z-index: 999999;
								}	
									
								body {
									background-color: #fff;
									margin: 0;
									padding: 0;
								}

								nav.hand {
									position: fixed;
									left: -2px;
									top: 0px;
									background-color:  #fff;
									max-width: 100%;
									min-width: 100%;
									height: 10.0vw;
									padding: 3px 0px 3px 0px;
								}

								section {
									background-color: #eee;
									max-width: 98%;
									min-width: 98%;
									padding: 48px 0px 10px 0px;
									margin: auto;
									text-align: left;
								}

								.center {
									border: 0px solid red;
									vertical-align: top;
									display: block;
									width: 100%;
									margin: auto;
									padding-left: 0px;
									padding-right: 0px;
									padding-top: 2px;
									padding-bottom: 2px;
								}

								footer {
									background-color:  #fff;
									border-top: 1px solid black;
									max-width: 100%;
									min-width: 100%;
									padding: 0px 0px 0px 0px;
									margin: 0px 0px 0px 0px;
									z-index: 100;
								}

								.dycent-h {
									max-width: 95%;
									min-width: 95%;
									margin: auto;
								}


								.ftext {
									margin: 0px 0px 0px 0px;
									color: #000;
									font-family: Calibri, Helvetica;
									font-size: 14px;
									font-weight: normal;
									text-shadow: 0px 0px 0px #ccc;
								}

								.sharefoot {
									width: 160px;
									border: 0px solid yellow;
									margin: 5px auto 5px auto;
								}







								/*******************************************************************************************
								Hand dropdown menu
								*******************************************************************************************/

								.ham-container {
									display: inline-block;
									width: 20px;
									position: relative;
									top: 8px;
									left: 10px;
									border: 0px solid red;
								}

								.logo-container-hand {
									display: inline-block;
									position: absolute;
									top: 12px;
									left: 36px;
									margin: 0px 0px 0px 0px;
									border: 0px solid green;	
								}


								.bar1, .bar2, .bar3 {
									width: 18px;
									height: 1px;
									background-color: #000;
									margin: 4px 0;
									transition: 0.4s;
									}

								/* Rotate first bar */
								.change .bar1 {
									-webkit-transform: rotate(-45deg) translate(-4px, 4px) ;
											transform: rotate(-45deg) translate(-4px, 4px) ;
									}

								/* Fade out the second bar */
								.change .bar2 {
									opacity: 0;
									}

								/* Rotate last bar */
								.change .bar3 {
									-webkit-transform: rotate(45deg) translate(-3px, -3px) ;
											transform: rotate(45deg) translate(-3px, -3px) ;
									}



								.titlelogo {
									height: 7.6vw;
									position: relative;
									top: 0px;
									left: 6px;
									margin: 0px 5px 0px 0px;
									border: 0px solid red;	
								}

								.titletext	{
									position: relative;
									top: -3px;
									display: inline-block;
									margin: 0px 0px 0px 0px;
									padding: 0px 0px 0px 10px;
									color: #000;
									font-family: Ubuntu, Arial;
									font-size: 5.6vw;
									font-weight: normal;
									border: 0px solid red;	
								}




								/******the dropdown menus in the header****************/

								.rightmenus-container-hand {
									position: relative;
									right: 15px;
									display: inline-block;
									float: right;
									border: 0px solid green;
									margin: 0px 20px 0px 0px;
								}


								.headerLanguageFlag {
									width: 7.0vw;
									border-radius: 100%;
								}

								.mobileHeaderLogin {
									position: fixed;
									right: 2.0vw;
									top: 2.4vw;	
								}

								.mobileHeaderHelp {
									position: fixed;
									right: 16vw;
									top: 2.4vw;	
									margin: 0px 0px 0px 0px;
									padding: 0px 0px 0px 0px;
								}

								.mobileHeaderLang {
									position: fixed;
									right: 4.0vw;
									top: 2.4vw;	
									margin: 0px 0px 0px 0px;
									padding: 0px 0px 0px 0px;
								}

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

								.helpbtn {
									border: 0px solid yellow;
									background-color:  #fff;
									color: #000;
									font-family: Calibri, Helvetica, Arial;
									font-size: 6.0vw;
									font-weight: normal;
									cursor: pointer;
									margin: 0px 0px 0px 5px;
									padding: 0px 0px 0px 0px;
								}


								.help-content {
									display: none;
									position: fixed;
									right: 2.5vw;
									top: 10.5vw;
									margin: 2.0vw 0vw 0vw 0vw;
									border: 0px solid #000;
									border-radius: 3px;
									background-color: #fff;
									width: 42vw;
									box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);	
									font-family: Calibri, Helvetica, Arial;
									font-size: 4.4vw;
									font-weight: normal;
									text-align: left;
									z-index: 1;
								}

								.help-content-lang {
									width: 36vw;	
								}

								.help-content a {
									color: black;
									padding: 3.5vw 2vw 3.5vw 2vw;
									text-decoration: none;
									display: block;
								}

								.helpbtn:hover {color: #ccc;}
								.help-content a:hover {color: #000; background-color: #ccc; }
								.help:hover .help-content {display: block;}
								.help:hover .helpbtn {color: #ccc;}



								/*******************************************Directions*****************************************/


								.directionsLanguageFlag {
									width: 7.1vw;
									vertical-align: center;
									margin: 0px 4px 0px 0px;
								}



								.directTitle {
									font-size: 4.0vw;
								}

								.directExplain {
									font-size: 3.6vw;
									padding: 4px 0px 4px 0px;
								}

								.headerSelector {
									padding: 3vw 0vw 3vw 2.6vw;
									cursor:pointer;
								}

								.headerSelector:hover {
									background-color: #ccc;
								}





								#mobileNav {
								  padding: 12px 0px 0px 14px;
								}
								
								#top-nav {
								  display: block;
								  width: 40px;
								  height: 32px;
								  position: absolute;
								  top: 0px;
								  left: 0px;
								  cursor: pointer;
								  opacity: 0;
								  z-index: 2;
								}

								.hamburgerspan {
								  cursor: pointer;
								  display: block;
								  width: 6.3vw;
								  height: 2px;
								  margin-bottom: 1.5vw;
								  position: relative;
								  background: #222;
								  z-index: 1;
								  transform-origin: 4px 0px;
								  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
									background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
								}

								.hamburgerspan:first-child {
								  transform-origin: 0% 0%;
								}
								.hamburgerspan:nth-last-child(2) {
								  transform-origin: 0% 100%;
								}
								#top-nav:checked ~ .hamburgerspan {
								  opacity: 1;
								  transform: rotate(45deg) translate(-0px, -0px);
								  background: #232323;
								}
								#top-nav:checked ~ .hamburgerspan:nth-last-child(3) {
								  opacity: 0;
								  transform: rotate(0deg) scale(0.2, 0.2);
								}
								#top-nav:checked ~ .hamburgerspan:nth-last-child(2) {
								  opacity: 1;
								  transform: rotate(-45deg) translate(1px, -1px);
								}

								input[id^="menu-"] {
								  position: absolute;
								  left: 0;
								  top: 0;
								  width: 100%;
								  height: 100%;
								  margin: 0;
								  cursor: pointer;
								  opacity:0;
								}

								div[id^="menu-cont-"] {
								  border-right: 1px solid #ccc;
								  width: 90vw;

								  background: rgba(255,255,255,0.97);
								  padding: 4px;
								  box-sizing: border-box;
								  margin: 0;
								  height: 80vh;
								  overflow: scroll;   
								  position: fixed;
								  margin: 0;
								  top: 0;
								  left: 0;
								  transform: translate(-100%, 0);
								  transition: transform 0.40s;
								  padding-right:0;
								}
								
								#top-nav:checked ~ div[id^="menu-cont-"],
								input[id^="menu-"]:checked ~ div[id^="menu-cont-"] {
								  transform: translate(0, 0);
								}


								input[id^="0menu-"] {
								  position: absolute;
								  left: 0;
								  top: 0;
								  width: 100%;
								  height: 100%;
								  margin: 0;
								  cursor: pointer;
								  opacity:0;
								}

								div[id^="0menu-cont-"] {
								  border-right: 1px solid #ccc;
								  width: 90vw;
								  background: rgba(255,255,255,0.97);
								  padding: 4px;
								  box-sizing: border-box;
								  margin: 0;
								  height: 80vh;
								  overflow: hidden;   
								  position: fixed;
								  margin: 0;
								  top: 0;
								  left: 0;
								  transform: translate(-100%, 0);
								  transition: transform 0.40s;
								  padding-right:0;
								}
								
								#top-nav:checked ~ div[id^="0menu-cont-"],
								input[id^="0menu-"]:checked ~ div[id^="0menu-cont-"] {
								  transform: translate3d(0, 0, 0);
								}

								input[id^="00menu-"] {
								  position: absolute;
								  left: 0;
								  top: 0;
								  width: 100%;
								  height: 100%;
								  margin: 0;
								  cursor: pointer;
								  opacity:0;
								}

								div[id^="00menu-cont-"] {
								  border-right: 1px solid #ccc;
								  width: 90vw;		  
								  background: rgba(255,255,255,0.97);
								  padding: 4px;
								  box-sizing: border-box;
								  margin: 0;
								  height: 80vh;
								  overflow: scroll;   
								  position: fixed;
								  margin: 0;
								  top: 50px;
								  left: 0px;
								  transform: translate(-100%, 0);
								  transition: transform 0.40s;
								  padding-right:0;
								}
								
								#top-nav:checked ~ div[id^="00menu-cont-"],
								input[id^="00menu-"]:checked ~ div[id^="00menu-cont-"] {
								  transform: translate3d(0, 0, 0);
								}

								li.nav-item {
								  width: 100%;
								  font-size: 4.9vw;
								  list-style: none;
								  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
								  padding: 6px 10px 6px 30px;
								  border-bottom: 1px solid #ccc;
								  box-sizing: border-box;
								  position:relative;
								}


								.menu-ul {
								  padding: 0;
								  margin: 13px 0 0 0;
								}
								
								.nav-item.sub-menu:after, label.menu-label:before {
								  content: "";
								  border: 2px solid transparent;
								  border-top-color: transparent;
								  border-top-style: solid;
								  border-top-width: 2px;
								  border-right-color: transparent;
								  border-bottom-color: transparent;
								  border-left-color: transparent;
								  border-left-style: solid;
								  border-left-width: 2px;
								  display: block;
								  background-color: #fff;
								  width: 7px;
								  height: 7px;
								  margin-bottom: -5px;
								  float: right;
								  -webkit-transform: rotate(-45deg);
								  -moz-transform: rotate(-45deg);
								  -ms-transform: rotate(-45deg);
								  -o-transform: rotate(-45deg);
								  transform: rotate(-45deg);
								  border-color: rgba(0, 0, 0, 0.3);
								  border-top: none;
								  border-top-color: currentcolor;
								  border-left: none;
								  border-left-color: currentcolor;
								  margin-top: 5px;
								}

								label.menu-label {
								  width: 100%;
								  display: block;
								  padding: 10px 10px 10px 20px;
								  border-bottom: 1px solid #ccc;
								  color: #222;
								  font-weight: bold;
								  box-sizing: border-box;
								  background-color:#dedede;
								}

								label.menu-label:before {
								  float:left;
								  margin:5px;
								  margin-left:0px;
								  background-color: #dedede;
								  -webkit-transform: rotate(135deg);
								  -moz-transform: rotate(135deg);
								  -ms-transform: rotate(135deg);
								  -o-transform: rotate(135deg);
								  transform: rotate(135deg);
								}
								#menu-cont-1{z-index:1001; margin: 46px 0px 0px 2px;}
								.zIndex1 {z-index:1001;}
								.zIndex2 {z-index:1002;}
								.zIndex3 {z-index:1003;}
								.hamburgerspan{z-index:9998;}
								#top-nav{z-index:9999;}




								/*******************************************************************************************
								Articles
								*******************************************************************************************/



								.articles {
									padding: 4.0vw 4.0vw;
								}

								.artPara {
									margin: 6.0vw 0 4.0vw 0;
									font-size: 4.5vw;
									line-height: 1.5;
									font-family: Calibri, Arial;
								}

								.listenPara {
									margin: 2.0vw 0.0vw 2.0vw 0.0vw;
									font-size: 4.2vw;
									line-height: 1.3;
									font-family: Calibri, Arial;
									border-left: 10px #dddddd solid; 
									padding: 2.0vw 2.0vw;
								}

								.artImage {
									margin: 2.0vw 2.0vw;
									width: 97%;
								}

								.artLogo {
									height: 5.0vw; 
									vertical-align: bottom;
								}








								/*******************************************************************************************
								HAND fonts
								*******************************************************************************************/

								h1	{
									color: #212121;
									font-family: Calibri, Helvetica;
									font-size: 3.2vw;
									font-weight: normal;
									text-shadow: 1px 1px 2px #ccc;
									margin: -6px 0px 6px 0px;
									padding: 0px 0px 0px 0px;
									}
									
								h2	{
									color: #212121;
									font-family: Calibri, Helvetica;
									font-size: 6.0vw;
									font-weight: normal;
									text-shadow: 2px 2px 3px #ccc;
									margin: 6px 0px 5px 0px;
									padding: 0px 0px 0px 0px;
									}

								h3	{
									color: #212121;
									font-family: Calibri, Helvetica;
									font-size: 5.4vw;
									font-weight: normal;
									text-shadow: 0px 0px 0px #ccc;
									margin: 0px 0px 4px 0px;
									padding: 2px 0px 0px 0px;
									}

								.sActTitles		{
									color: #212121;
									font-family: Calibri, Helvetica;
									font-size: 4.5vw;
									font-weight: normal;
									text-shadow: 0px 0px 0px #ccc;
									margin: 0px 0px 4px 0px;
									padding: 0px 0px 0px 0px;
									}

								.aDescriptors {
									color: #555;
									font-family: Calibri, Helvetica;
									font-size: 3.6vw;
									font-weight: normal;
									line-height: 1.15;
									text-shadow: 0px 0px 0px white;
									margin: 1px;
								}	

								.sumSentence	{
									color: #212121;
									font-family: Calibri, Helvetica;
									font-size: 4.4vw;
									font-weight: bold;
									text-shadow: 2px 2px 3px #ccc;
									margin: 1px 0px 5px 0px;
									padding: 0px 0px 0px 0px;
									}	

								p	{
									color: black;
									font-family: Calibri, Helvetica;
									font-size: 17px;
									font-weight: normal;
									margin: 0px;
									padding-top: 3px;
									line-height: 20px;
								}

								li	{
									color: black;
									font-family: Calibri, Helvetica;
									font-size: 17px;
									font-weight: normal;
									margin-top: 3px;
									margin-bottom: 3px;
									margin-left: -13px;
									margin-right: 0px;
								}








								/***********************************************************************************************************************************************************************************/	
								/************************activity page content**************************************************************************************************************************************/
								/***********************************************************************************************************************************************************************************/


								.activitydescription {
									display: inline-block;
									position: static;
									width: 96%;
									height: inherit;
									padding: 20px 5px 10px 10px;
									vertical-align: top;
									margin: 0px 0px 10px 0px;
									background-color: #fff;
									border: 0px solid #4a6796;
									border-radius: 0px;
									z-index: 0;
								}	


								.activitysection {
									vertical-align: top;
									width: 96%;
									background-color: #fff;
									padding: 8px 5px 1px 6px;
									margin: 4px 0px 0px 0px;
								}	
									
								.pcactivitypic {
									display: none;
									}

								.handactivitypic {
									border: 0px solid red;
									display: block;
									width: 100%;
									padding-top: 0px;
									margin: 8px 0px 0px 0px;
									}

									
								/******social media icons for activities***********/

								.share {
									position: static;
									margin: 15px 15px 0px 0;
									width: 95%;
								}

								.reload {
									color: #000;
									font-family: Calibri, Helvetica, Helvetica;
									font-weight: 800;
									font-size: 3.4vw;
								}

								.a2a_svg, .a2a_count { 
									border-radius: 5px 5px 5px 5px; 
									margin: 10px 2px 0px 2px;
									padding: 1px 4px 1px 4px;
								}
									

								/*********************icon set up********************/
									
								.bigicon {
									float: left;
									width: 12vw;
									padding: 8px 12px 11px 4px;
								}

								.premiumStar {
									height: 22px;
									padding: 2px 0px 0px 0px;
									}
									


								/**************** li spacing ************************/
								li {
									padding: 3px 10px 4px 10px;
									}

								.discussQuestion li {
									padding: 6px 10px 6px 10px;
									}


								#language li {
									padding: 4px 10px 4px 8px;
									}






								.tipExp  {
									border-radius: 3px;
									padding: 8px 10px 8px 10px;
									position: fixed;
									left: 10vw;
									z-index: 1;	
									visibility: hidden;
									top: 15vh;	
									bottom: auto;
									max-height: 70vh;
									overflow: scroll;
									width: 80vw;
									margin: 0px 0px 0px 0px;

									background-color: #ccffff;
									border: 1px solid black;
									
									color: #000;
									font-family: Calibri, Helvetica, Helvetica;
									font-size: 14px;
								}








									
									
								/****************next activity bar*****************/

								.nextbar {
									font-family: Calibri, Helvetica;
									font-size: 15px;
									font-weight: normal;
									text-shadow: 0px 0px 0px #ccc;	
									background-color: #4a6796;
									display: block;
									max-width: 100%;
									min-width: 100%;
									padding: 8px 0px 7px 8px;
									margin: 0px 0px 0px -2%;
									}

								.nextdiv {
									display: inline-block;
									border: 1px solid #fff;
									width: 46%;
									padding: 5px 0px 0px 4px;
									margin: 0px 3px 0px 3px;
								}

								.enddiv {
									display: inline-block;
									border: 0px solid #fff;
									width: 46%;
									padding: 5px 0px 0px 4px;
									margin: 0px 3px 0px 0px;
								}

								.nextleft {
									border: 0px yellow solid;	
									display: inline-block;
									width: 29%;		
									padding: 0px 0px 0px 0px;
									margin: 0px 0px 0px 0px;

								}

								.nextright {
									border: 0px red solid;
									display: inline-block;
									width: 57%;
									text-align: left;
									padding: 12px 0px 0px 0px;
									margin: 0px 0px 0px 0px;
									color: #fff;
									font-family: Calibri, Helvetica;
									font-size: 13px;
									font-weight: normal;
									text-shadow: 0px 0px 0px #ccc;
									vertical-align: top;
								}	
									
								.nextbarimg {
									width: 95%;
									padding: 3px 0px 0px 0px;
									margin: 0px 0px 0px 0px;
								}

								.nextprev {
									border: 0px green solid;
									display: inline-block;
									vertical-align: top;
									width: 7%;
								}

								.nextprevimg {
									height: 50px;
									margin: 0px 5px 0px 0px;
								}

								.white {
									color: #ffffff;
									}

									
								/****************audio/video player setup**************/

								.audioframe	{
									display: inline-block;
									position: fixed;
									width: 96%;
									height: 200px;
									vertical-align: top;
									padding: 5px 5px 5px 5px;
									border: 1px solid #000;
									margin: auto;
								}

								.player {
									border: 0px solid green;
									position: relative;
									width: 100%;
									height: 35px;
									margin: 20px 0px 0px 0px;
									padding: 0px;
									z-index: 1;
								}

								.inplayer {
									position: relative;
									width: 100%;
									height: 30px;
									margin: 25px 0px 0px 0px;
									padding: 0px 0px 7px 0px;
									z-index: 1;
								}	
									
								.videoframediv {
									position: relative;
									width: 96%;
									height: 0;
									padding:   60% 5px 5px 5px;

								 }
									
								.videoframe {
									display: block;
									position: absolute;
									top:      0;
									left:     0;
									bottom:   0;
									right:    0;
									width:    100%;
									height:   100%;
								}

								/* Style for video player */
								#vid-container {
									position: relative;
									width: 98%;
									padding-bottom: 57%;
									height: 0;
								
								}

								/* Style for fixed video player */
								#vid-container.fixed {
									position: fixed;
									bottom: 5px;
									right: 5px;
									width: 70%;  
									padding-bottom: 40%;
									height: 0;		
									z-index: 1000;
								}

								/* Style for toggle buttons */
								.toggle-button {
									-webkit-appearance: none;
									-moz-appearance: none;
									appearance: none;
									display: block;
									border: 1px black solid;
									border-radius: 4px;
									background: none;
									padding: 3px 5px;	        
									margin: 10px 0 10px 5px;
									height: 26px;
									color: #000;
									font-family: Calibri, Helvetica;
									font-size: 13px;
									font-weight: normal;		
								}

								#enable-button { 
									display: none; 
								} 
								
								.youtubeplayer {
									position: absolute;
									width: 100%;
									height: 100%;
									border: 0;


								}







									
								/****************Natural Language Video player**************/

								.natLangVid {
									height: 46vw;
									width: 80vw;
								}

								.natLangVid2 {
									height: 70vw;
									width: 70vw;
								}






									
								/****************answer buttons setup*******************/

								.answers {
									display: inline-block;
									position: relative;		
									background-color: #ccc;
									border: none;
									border-radius: 4px;
									text-decoration: none;	
									font-size: 3.6vw;
									text-align: center;
									color: #FFF;	
									padding: 2.5vw 3.5vw;
									margin: 4px auto;	
									cursor: pointer;
									transition: all 0.5s;	
									}
									

								.answers::before {
									content: '';
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									z-index: 1;
									background-color: rgba(255,255,255,0.2);
									transition: all 0.5s;
								}
								.answers:hover::before {
									opacity: 0 ;
									transform: scale(0.5,0.5);
								}
								.answers::after {
									content: '';
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									z-index: 1;
									opacity: 0;
									transition: all 0.5s;
									border: 1px solid rgba(255,255,255,0.5);
									transform: scale(1.2,1.2);
								}
								.answers:hover::after {
									opacity: 1;
									transform: scale(1,1);
								}	
									
									
									
								.answerdiv {
									margin: 0px 5px;
									}
									
									
								/**************** Dialogue Practice  ************************/

								.diaSpeaker	{
									color: #a30000;
									font-family: Calibri, Helvetica, Helvetica;
									font-size: 3.6vw;
									text-transform: uppercase;
								}

								.diaBullet	{
									margin: 20px 0px 2px -30px;
									font-size: 5.0vw;
									list-style-type: none;		
								}




									
								/**************** Vocab li  and checkbox styling  ************************/
								 
								.pos {
									font-size: 15px; 
								 }



								li {
									padding: 4px 10px 4px 10px;
									}

								.discussQuestion li {
									padding: 6px 10px 6px 10px;
									}


								#language li {
									padding: 4px 10px 4px 8px;
									}

									
								.Evcb {
										display: none;
								}



								.vocabli {	
									list-style-type: none;
									margin: 0px 0px 0px 0px;
								}


									
								.vcbHid {
									visibility: hidden;
								}
									
									
								/******************************** Vocab Check marks *************************/

								.vcbCheck {
									position: relative;
									display: inline-block;
									left: -28px;
									margin: 0px -26px 0px 0px;
								}

								.vcbCheck label {
									cursor: pointer;
									position: absolute;
									width: 18px;
									height: 18px;
									top: 5px; left: 2px;
									border-radius: 4px;

									-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
									-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
									box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);

									background: -webkit-linear-gradient(top, #ccc 0%, #ddd 100%);
									background: -moz-linear-gradient(top, #ccc 0%, #ddd 100%);
									background: -o-linear-gradient(top, #ccc 0%, #ddd 100%);
									background: -ms-linear-gradient(top, #ccc 0%, #ddd 100%);
									background: linear-gradient(to top, #ccc 0%, #ddd 100%);
									filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccc', endColorstr='#d',GradientType=0 );
								}

								.vcbCheck label:after {
									-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
									filter: alpha(opacity=0);
									opacity: 0;
									content: '';
									position: absolute;
									width: 9px;
									height: 4px;
									background: transparent;
									top: 4px;
									left: 3px;
									border: 3px solid #009999;
									border-top: none;
									border-right: none;

									-webkit-transform: rotate(-45deg);
									-moz-transform: rotate(-45deg);
									-o-transform: rotate(-45deg);
									-ms-transform: rotate(-45deg);
									transform: rotate(-45deg);
								}



								.vcbCheck input[type=checkbox]:checked + label:after {
									-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
									filter: alpha(opacity=100);
									opacity: 1;
								}
									
									
									
									

									
									
								/****************listen & draw setup**************/
								.drawing {
									width: 95%;
									border: 1px solid red;
									margin: 10px 0px 10px 6px;
									padding: 0px 0px 0px 0px;
								}

								.dict-table {
									border: 0px solid red;
									width: 98%;
									font-family: Calibri, Helvetica;
									font-size: 13px;
									font-weight: normal;
									color: black;
								}	

								.shapes {
									height: 30px;
									margin: 1px 5px 1px 2px;
								}


								/****************video background setup**************/
									
								.videotable {
									color: black;
									font-family: Calibri, Helvetica;
									font-size: 3.8vw;
									font-weight: normal;
									text-align: center;
									}
									
								.videopics {
									width: 22vw;
									border: none;
									margin: 2px 0px 2px 0px;
									padding: 0px;
									}

								/****************scriptbox setup**************/
									
								.scriptbox {
									width: 90%;
									border: 0px solid black;
									background-color: white;
									padding: 0px 10px 10px 10px;
									margin: 10px auto 10px auto;
									}	

								/****************watch next************************/
								.nextLesson {
										margin: 0 0 0 -26px;
										padding: 9px 0px 9px 32px;
										list-style: none outside ;
										background-image: url(https://www.listeninenglish.com/sitimg/nextIcon.svg);
										background-repeat: no-repeat;
										background-position: left center;
										background-size: 5.6vw;		 
										font-size: 4.2vw;
									}



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






								/*********************************************************************************************************************************************************************************/
								/******************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 {
									border: 0px solid #eaf2f4;
								}

								.carP-easy {
									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;
									}

								.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;
								}






							}