/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
.spacer3 { height: 3px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer5 { height: 5px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer8 { height: 8px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer10 { height: 10px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer11 { height: 11px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer12 { height: 12px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer13 { height: 13px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer14 { height: 14px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer15 { height: 15px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer20 { height: 20px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer21 { height: 21px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer22 { height: 22px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer23 { height: 23px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer24 { height: 24px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer25 { height: 25px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer26 { height: 26px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer27 { height: 27px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer28 { height: 28px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer29 { height: 29px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer30 { height: 30px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer35 { height: 35px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer40 { height: 40px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer45 { height: 45px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer50 { height: 50px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer55 { height: 55px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer60 { height: 60px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer65 { height: 65px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer70 { height: 30px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer75 { height: 75px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer80 { height: 80px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer90 { height: 90px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer95 { height: 95px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer100 { height: 100px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer105 { height: 105px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer110 { height: 110px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer118 { height: 118px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer120 { height: 120px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer125 { height: 125px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer130 { height: 130px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer135 { height: 135px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer140 { height: 140px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer150 { height: 150px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer200 { height: 200px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer250 { height: 250px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer400 { height: 400px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer500 { height: 500px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }



body {
  font-family: "Open Sans", sans-serif;
	/*background-color:cornflowerblue *//* color: #444444;*/
 /* background: url("../img/bluebackgrourd1.jpg")*/
  /*background-size: cover;*/
  /*overflow-y: hidden;*/ /* Hide vertical scrollbar */
  /*overflow-x: hidden;*/ /* Hide horizontal scrollbar */
}

a {
  color: #1bac91;
  text-decoration: none;
}

a:hover {
  color: #22d8b6;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/

.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #1bac91;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}
.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}
.back-to-top:hover {
  background: #21cfaf;
  color: #fff;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  height: 0px;
  transition: all 0.5s;
  z-index: 997;
  background: #000;
}
#header .logo h1 {
  font-size: 30px;
  margin: 0;
  padding: 6px 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#header .logo h1 a, #header .logo h1 a:hover {
  color: #fff;
  text-decoration: none;
}
#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 40px;
}
@media (max-width: 992px) {
  #header {
    height: 0px;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.classMenuSideLocation{
	position:absolute;
	z-index: 10;
	margin-left: 310px;
	margin-top: 160px;
	font-weight: 600;
	font-size: 20px;
	text-align: left;
	
}

.VideoList{
	display: none;
	color: white;
	background-color: black;
	position: absolute;
	margin-top: 60px;
	z-index: 2210;
	width: 250px;
	border: inset 3px gray;
	padding-left: 8px;
	}

.colv-1{
	width:15%!important;
}

.colv-2{
	width:70%!important;
}

.colv-3{
	width:15%!important;
}

.nav-link{
	color:lightgreen;
}

.nav-link:hover{
	color:lightblue;
}


.navbar {
  padding: 0;
}
.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}
.navbar li {
  position: relative;
}
.navbar > ul > li + li {
  margin-left: -530px;
  margin-top: -70px;
  /*filter: brightness(100%);*/
}
.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 20px;
  color: rgba(0,0,0,0);
  white-space: nowrap;
  transition: 0.3s;
  text-decoration: none;
}
.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}
.navbar > ul > li > a:before {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 3px;
  left: 0;
  background-color: #1bac91;
  visibility: hidden;
  width: 0px;
  transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before {
  visibility: visible;
  width: 100%;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #fff; text-decoration: underline;
}
/*controls drop down box*/
.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 120px;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: 	#E0E0E0;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}
.navbar .dropdown ul li {
  min-width: 200px;
}
.navbar .dropdown ul a {

  padding: 10px 20px;
  font-size: 16px;
  text-transform: none;
  font-weight: 500;
  color: #062822;
}
.navbar .dropdown ul a i {
  font-size: 16px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #1bac91;
}
.navbar .dropdown:hover > ul {
  opacity: 1;
  visibility: visible;
}
.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}
@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}
.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(16, 31, 29, 0.9);
  transition: 0.3s;
  z-index: 0;
}
.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}
.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}
.navbar-mobile > ul > li + li {
  margin: 0;
}
.navbar-mobile a:hover:before, .navbar-mobile li:hover > a:before, .navbar-mobile .active:before {
  visibility: hidden;
}
.navbar-mobile a, .navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #21413c;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #1bac91;
}
.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
  margin: 15px;
}
.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
  min-width: 200px;
}
.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #1bac91;
}
.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*.classMenuSideLocation{
	position: absolute;
	z-index: -10;
	margin-left: 24%;
	color: white;
	margin-top: 7px;
	font-weight: 500;
	font-size: 18px;
	margin-right: 50px;
	filter: brightness(100%);
}*/

/*.classMenuSideLocation{
	position: absolute;
	z-index: 110;
	float: left;
	margin-left: 210px;
	color: white;
	margin-top: 60px;
	font-weight: 500;
	font-size: 18px;
	filter: brightness(200%);
}*/
/*--------------------------------------------------------------
# Tool Tip
--------------------------------------------------------------*/
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
/*  color: #fff;*/
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
/*End Tool tip* =================================================/
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
/*PHP Look UP*/
.hero {
  display: table;
  z-index: 1;
  position: relative;
  background-image: url("../img/WebNestFrontPageMain4.fw.png") ;
  background-size: cover;
  
 
  /*color: #fff;*/
  width: 100%;
  height: 100vh;
}

.hero:after {
  content: "";
  z-index: 2;
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}




#RemoveUserWrapper{border: 20px #33F ;}
	
	
#hero #selectWrapper{
	border: inset 2px rgba(63,232,83,1.00) ; 
}
	
#hero #selectWrapper .container{
margin-top: 100px;
}
	
.LookupData{
	font-size: 233;
	/*color: white;*/
}

#hero #buttonswrapper button{
min-width: 140px; 	
color: white;
}

#hero #buttonswrapper button i {
padding-right: 10px;	
}	
	
#hero #buttonswrapper #show_hide_bt i {
padding-right: 15px;	
}	

#hero #buttonswrapper #RefreshVideo i {
padding-right: 15px;	
}

#hero #buttonswrapper #VolumeOn button {
background-color: #1bac91;	
}


/*#hero {
  width: 100%;
  height: 100%;
}*/

/*#hero:before {
  content: "";
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}*/

/*#hero .container {
  z-index: 2;
}*/
#hero h1 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
 /* color: #fff;*/
}
#hero h2 {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 35px;
  font-size: 24px;
}
/*#hero .btn-get-started {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 4px;
  transition: 0.5s;
  border: 2px solid #fff;
  color: #fff;
}
#hero .btn-get-started:hover {
  border-color: #1bac91;
  background: #1bac91;
}*/

.ShamButtons{
	display: block;
	position: absolute;
	z-index: 500;
	margin-top: 72px;
	margin-left: -12px;
}


#hero .btn-watch-video {
  font-size: 16px;
  width: 150px;
  align-items: center;
  transition: 0.5s;
  margin: -10px 20px 20px 0px;
  padding: 4px;
  color: #fff;
  background-color: green;
  line-height: 1;
  border: outset 2px lightblue; 
}

@media (max-width: 768px) {
 #hero .btn-watch-video  {
    width: 114px;
  }
}

@media (max-width: 300px) {
 #hero .btn-watch-video  {
	padding: 0px;
	margin: -10px 20px 0px 0px;
	}
}

/*@media (max-width: 365px) {
 #hero .btn-watch-video  {
    width: 114px;
  }
}*/

/*.GlenButton{
	display: none;
}*/

#hero .btn-watch-video i {
  line-height: 0;
  color: #fff;
  font-size: 22px;
  transition: 0.3s;
  margin-right: 8px;
  /*background-color: black;*/
  border-radius: 50%;
}

@media (max-width: 768px) {
 #hero .btn-watch-video i {
   display: none;
	}
}

@media (max-width: 576px) {
 #hero .btn-watch-video i {
   display: none;
	}
}

@media (max-width: 365px) {
 #hero .btn-watch-video i {
	display: none;
  }
}

#hero .btn-watch-video:hover i {
  color: black;
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}
@media (max-width: 992px) {
  #hero {
    margin-top: 0px;
  }
}
@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #hero h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
}

@media (min-width: 1024px){
#hero {
    background-attachment: fixed;
}
}

@media only screen and (max-width: 576px) {
	.ShamButtons{
		/*display: none;*/
}
/*.GlenButton{
	display: block;
}*/	
	
	
}


/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 0px 0;
  overflow: hidden;
}

.section-bg {
  background-color: #f2f9f8;
}

.section-title {
  padding-bottom: 40px;
  text-align: center;
}
.section-title h2 {
  font-size: 36px;
  font-weight: 300;
  margin-bottom: 20px;
  padding-bottom: 0;
  color: #21413c;
}
.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Video
---------- */

.VidControls{
	display: none;
    position: absolute;
    z-index: 3;
	width:768px;
	padding: 10px 5px 0px  15px;
	border: inset 3px lightgray;
	background: black;
	margin-left: -12px;
	}

.VidControls2{
	display: none;
	width:100%;
	padding: 15px 15px 0px 5px;
	background: black;
	font-size: 16px;
	margin-left: 150px;
}

.VidControls3{
	display: none;
	width:100%;
	padding: 15px 15px 0px 35px;
	background: black;
	font-size: 16px;
	margin-left: 150px;
}

.VidControls4{
	min-width: 480px;
	min-height: 60px;
	margin-left: -12px;
	position: absolute;
	z-index: 3;
	padding: 10px 5px 10px 5px;
	border: inset 3px lightblue;
	background: black;
	font-size: 20px;
}

#xspot{
	margin: 0;
}

.vidwrap{
width: 100%;
height:100%;
z-index: 100;
border: inset 4px lightgray;
padding: 0 0 0 0;
background-color: gray;
margin-top: 40px;
}

@media (max-width: 768px) {
  .vidwrap{
    margin-top: 60px;
  }
}

@media (max-width: 576px) {
  .vidwrap{
    margin-top: 70px;
  }
}

@media (max-width: 300px) {
 .vidwrap{
    margin-top: 80px;
  }
}
/*Disply none not showing X*/
#xspot .XReturnTheme i{
	position: absolute;
	z-index: 300;
	font-size: 40px!important;
	color: lightgreen !important;
	float: right;
	}

#xspot .XReturnTheme i:hover{
	color:white!important;
}


/*==========================================================================================
Save Place in Video
==========================================================================================*/

.ButtonCpaddingClear{
	float: left;
	margin-top: -20px;
	margin-left: 3px;
	font-size: 14px;
	color: #FFF!important;
 	padding-left: 20px;
    padding-right: 18px;
	}



#NamePlaceWrapper{
	display: none;
}

.NamePlace{
			height: 470px;
			width: 460px;
			border: solid 3px green;
			margin-top:-748px;
			margin-left: 312px;
            position: absolute;
			z-index: 200;
            text-align: center;
            background: #009;
			font-size: 14px;
			color: white;
}

.MainVideoTitle{
	font-size: 18px;
}

.MainVideText{
	Color: #ffc107;
	}

label{color: white; font-size: 14px; margin-bottom: 5px}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#VideoPlaceWrapper{
	height:30px;
	width:100%;
	border:inset 2px #ccc;
	background-color:#FFF;
}

.VideoPlaceIcon{
	width:31px;
	height:28px;
	background-color:#ccc;
	float:left
}

.VideoIcon{
	color:#009;
	padding-left:8px;
	padding-top:5px;
	float:left;
} 

.VideoPlace{
	float:left;
	height:100%;
	width:85%;
	border:none;
	color:#000;
	font-size:85%;
	padding-left:10px;
	outline:none;
}

#SavePlaceTimeID{
	
}

#SavePlacePercentID{
	
}

#PickSpotCancel{
	display: block;
}


.SavePlaceTimeText{
float: left;
text-align: left;
}

.SavePlaceTime{
text-align: left;
margin-left: 10px;
color: #ffc107;	
}

.SavePlacePercentText{
float: left;
text-align: left;
}

.SavePlacePercent{
text-align: left;
margin-left: 10px;
color: #ffc107;	
}

#OpenPlaceWrapper{
	display: none;
}

.OpenNamePlace{
			height: 470px;
			width: 460px;
			border: solid 3px green;
			margin-top:-620px;
			margin-left: 300px;
            position: absolute;
			z-index: 100;
            text-align: center;
            background: #009;
			font-size: 14px;
			color: white;	
}

.classTopBox{
	width: 100%;
	height: 25px;
	background-color: black;

}

.classTopBoxIcon{
	float: right;
	color: #ffc107;
	text-align: right;
	font-size: 26px;
	/*margin-right: 3px;*/
	margin-top: -2px;
	padding-left: 5px;
	padding-right: 5px;
	/*padding-top: 1px;*/
	padding-bottom: 1px;
}

.classTopBoxIcon:hover{
	background-color: green;
	
	
}


.ListSaveName{
	float: left;
	color: white;
	text-align: left;
	font-size: 16px;
	margin-left: 20px;
	width:150px;
}

.ListSaveName:hover{
	color: #ffc107;
}

.ListSaveTime{
	float: left;
	color: white;
	text-align: left;
	font-size: 16px;
	margin-left: 20px;
	width:80px;
	
}

.ListSavePercent{
	float: left;
	color: white;
	text-align: left;
	font-size: 16px;
	margin-left: 70px;
}

.MarkerNameTitle{
	float: left;
	color: white;
	text-align: left;
	text-decoration: underline;
	font-size: 14px;
	margin-left: 20px;
}

.TimeIntoVideo{
	float: left;
	color: white;
	text-align: left;
	text-decoration: underline;
	font-size: 14px;
	margin-left: 50px;
	
	
}
.PercentViewed{
	float: left;
	text-decoration: underline;
	color: white;
	text-align: left;
	font-size: 14px;
	margin-left: 30px;
}

/*Error Messages*/
#DesErrorMess{
	display: none;
}

.SaveRecordError{
	text-align: center;
	max-width: 350px;
}

.ErrorColors{
	color:red;
	margin-right: 4px;
}

/*Audio Settings Video Player ====================================================================*/
/*==========================================================================================
Speed Menus
==========================================================================================*/

li{
        cursor: pointer;
    }

        .context-menu {
			margin-top:-535px;
			margin-left: 40px;
            position: absolute;
			z-index: 100;
            text-align: center;
            background: #009;
			font-size: 14px;
            border: 2px inset #1bac91;
        }
  
        .context-menu ul {
            padding: 0px;
            margin: 0px;
            min-width: 150px;
            list-style: none;
        }
  
        .context-menu ul li {
            padding-bottom: 4px;
            padding-top: 4px;
            border: 1px inset #1bac91;
        }
  
        .context-menu ul li a {
            text-decoration: none;
            color: white;
        }
  
        .context-menu ul li:hover {
            background: black;
			        }
    
		.context-menu ul li a:hover {
            color:#ffc107
        }
			
		.rewindSpeed{
			color:#ffc107
		}
		
		.FastFowardSpeed{
			color:#ffc107
		}

		
/*======================================================================		
Fast Foward Menu
======================================================================*/

        .FastFoward-Menu {
			margin-top:-535px;
			margin-left: 210px;
            position: absolute;
			z-index: 200;
            text-align: center;
            background: #009;
			font-size: 14px;
            border: 2px inset #1bac91;
			
        }
  
        .FastFoward-Menu ul {
            padding: 0px;
            margin: 0px;
            min-width: 150px;
            list-style: none;
        }
  
        .FastFoward-Menu ul li {
            padding-bottom: 4px;
            padding-top: 4px;
            border: 1px inset #1bac91;
        }
  
        .FastFoward-Menu ul li a {
            text-decoration: none;
            color: white;
        }
  
        .FastFoward-Menu ul li:hover {
            background: black;
			        }
    
		.FastFoward-Menu ul li a:hover {
            color:#ffc107
        }

/* ==========================================================================================
END Speed Menus
==========================================================================================*/

#Help{
display: none;
}

#HelpControls{
	display: none;
}


ul{
list-style-position: outside;
list-style-type: none;
	
}

.Flipped{
            direction: rtl;
        }

.UnFlipped{
	direction: ltr;
}

#navbar{
	margin-top: 50px;

}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: green; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: black; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffc107; 
}

.HelpMenuUpper{
	position: absolute;
	z-index: 1000;
	font-size: 16px;
	margin-top: 100px;
	margin-left: 453px;
	color: white;
	font-weight: 500;
	filter: brightness(100%);
	writing-mode: vertical-rl;
	text-orientation: upright;
}

.HelpMenuUpper:hover{
		cursor: help;
		color: #ffc107;
		
}


.HelpInfo {
  z-index: 1200;
  background-color: #009;
  border: 1px solid green;
  text-align: center;
  font-size: 14px;
  color: white;
  left:640px;
  top:100px;
  min-height: 150px;
  min-width: 300px;
  max-height: 900px;
  max-width: 620px;
 overflow-x: hidden;
 overflow-y: scroll;		
}

/*Dragable */

.HelpInfo {
  position: absolute;
  height: 580px;
  width: 785px;
  overflow: auto;
  overflow-x: hidden;
}

.HelpInfo-header {
  width: 615px;
  margin-left: 250px;
	padding: 2px;
  cursor: move;
  z-index: 219;
  background-color: black;
  color: #fff;
	
}

/*Resizeable*/

.HelpInfo .resizer-right {
  width: 5px;
  height: 100%;
  background: transparent;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: e-resize;
}

.HelpInfo .resizer-bottom {
  width: 100%;
  height: 5px;
  background: transparent;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: n-resize;
}

.HelpInfo .resizer-both {
  width: 5px;
  height: 5px;
  background: transparent;
  z-index: 10;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: nw-resize;
}

.HelpInfo-header i {
	margin-left: 97%;
	color: black;
	font-size: 26px;
}
		

.HelpInfo * {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.InnerBox{
	height: 100%;
	
	width: 100%;
	padding-left: 40px;
	padding-right: 20px;
	/*border: solid 3px yellow;*/
	
	
}

.TopBox{
	width: 100%;
	height: 25px;
	background-color: yellow;
}

/*Rewind =============================*/

.HelpVideoTitle{
	font-size: 24px;
}

.HelpVideText{
	Color: #ffc107;
	font-size: 18px;
	}

.HelpOpenMenuIcon:before{content: '\f0c9';
  font-family: 'Font Awesome 5 Pro';
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(200%);
	color: green;
	text-shadow: 0px 0px 0px #000;
	margin-left: 5px;
	}


.HelpHelpIcon:before{content: '\f05a';
  font-family: 'Font Awesome 5 Pro';
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(200%);
	color: green;
	text-shadow: 0px 0px 0px #000;
	margin-left: 5px;
	}

.HelpRewindIcon:before{content: '\f049';
  font-family: 'Font Awesome 5 Pro';
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 5px;
	}

.RBText{
	
	margin-left: 10px;
	color: #ffc107;
}

.HelpText{
	float: left;
	color:white;
	text-align: left;
	margin-top: 10px;
	margin-bottom: 20px;
}


.HelpRRSpeedIconU:before{content: '\f0aa';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 5px;
	margin-top: 10px;
	}

.HelpRRSpeedIconD:before{content: '\f0ab';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 10px;
	margin-top: 10px;
	}
/* End Rewind =============================*/

/* Stop =============================*/
.HelpStopcon:before{content: '\f04d';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 500;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 10px;
	margin-top: 10px;
	}

/* Play Pause =============================*/


.HelpPlayIcon:before{content: '\f04b';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 500;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 5px;
	margin-top: 10px;
	}

.HelpPauseIcon:before{content: '\f04c';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 10px;
	margin-top: 10px;
	}

/* Fast Foward =============================*/

.HelpFFIcon:before{content: '\f050';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 5px;
	}

/* Control Button for Inside of Video  =============================*/
/*Off ----------------------*/
.HelpVidConInOff:before{content: '\f204';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 5px;
	margin-top: 10px;
	}

/*On ----------------------*/

.HelpVidConInOn:before{content: '\f205';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(110%);
	color: #ffc107;;
	text-shadow: 0px 0px 0px #000;
	margin-left: 10px;
	margin-top: 10px;
	}
/* End Control Button for Inside of Video =============================*/

/* Restart =============================*/

.HelpRestart:before{content: '\f021';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 10px;
	margin-top: 10px;
	}

/* Full Screen  =============================*/

.HelpFullScreen:before{content: '\f065';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 10px;
	margin-top: 10px;
	}

.HelpSavePlace:before{content: '\f0c7';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 5px;
	margin-top: 10px;
	}

.HelpOpenPlace:before{content: '\f07c';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 10px;
	margin-top: 10px;
	}

/* Play Pause =============================*/


.HelpVolUPIcon:before{content: '\f028';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 500;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 5px;
	margin-top: 10px;
	}

.HelpVolDOWNIcon:before{content: '\f6a9';
  font-family: 'Font Awesome 5 Pro';
	
	text-align: left;
	padding-top: 2px;
	font-weight: 600;
	font-size: 20px;
	filter: brightness(110%);
	color: white;
	text-shadow: 0px 0px 0px #000;
	margin-left: 10px;
	margin-top: 10px;
	}

.spacer{margin-bottom: 50px;}

#lastWrapper{
	padding-bottom: 50px;
	margin-bottom: 100px;
}

/*Side Menu ==========================================*/

.sidenav {
  height: 61%;
  width: 0;
  margin-top: -4px;
  margin-left: -40px;
  position: fixed;
  z-index: 1;
  top: 40;
  left: 10;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding:  8px 8px 8px 2px;
  text-decoration: none;
  font-size: 14px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  left: 5px;
  font-size: 24px;
  font-weight: 600;
  filter: brightness(200%);
  color: green;
}

.sidenav .closebtn:hover {
  color: #ffc107;
}


.openSideMenu{
margin-left: -32px;
font-size: 22px; 
cursor: pointer;
position: fixed;
font-weight: 600;
filter: brightness(200%);
color: green;	
}

.openSideMenu:hover{
color: #ffc107;	
}

.ExitHelpMenu:before{content: '\f00D';
  font-family: 'Font Awesome 5 Pro';
	float: right;
	padding-top: 0px;
	font-weight: 600;
	font-size: 22px;
	filter: brightness(200%);
	color: green;
	cursor: pointer;
	text-shadow: 0px 0px 0px #000;
	}

.ExitHelpMenu:hover::before{
color: #ffc107;	
}



@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


/* End Help =============================*/

/*Controls*/
				#Over1400Wrapper{
					display: block;
				}

				#Under1200Wrapper{
					display: none;
				}
				
				#Under1200Row2Wrapper{
					display: none;
				}
				
				#Under1200Row3Wrapper{
					display: none;
				}

				.SeperateTextThree{
					display: none;
				}

				#SPC30{
					display: none;
				}

				.RewindIcon{
					float: left;
					padding-top: 4px;
					padding-left: 4px;
					font-weight: 600;
					font-size: 22px;
					filter: brightness(110%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left: 0px;
					width: 60px;
					}

				.RewindIcon:hover{
				color: #ffc107;;
				}
				

				#RRSpeedText{
					float: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:#ffc107;
					text-shadow: 0px 0px 0px #000;
					width: 100px;
					margin-left: 10px;
					margin-right: 0px;
				}
				
				#RRSpeedShow{
					float: left;
					text-align: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:#ffc107;
					text-shadow: 0px 0px 0px #000;
					width: 40px;
					margin-left: 0px;
					margin-right: 0px;
				}

				#RRSpeed1400{
				display: none;
				float: left;
				padding-top: 4px;
				padding-left: 4px;
				font-weight: 600;
				font-size: 22px;
				filter: brightness(110%);
				color: #ffc107;
				text-shadow: 0px 0px 0px #000;
				margin-left: 40px;
				width: 80px;
				}

				.StopIcon{
					float: left;
					padding-left: 5px;
					font-weight: 500;
					padding-top: 2px;
					font-size: 26px;
					filter: brightness(200%);
					color:white;
					text-shadow: 0px 0px 0px #000;
					width: 35px;
					margin-left: 15px;
					
			        }	
			
				.StopIcon:hover{
					color: green;
				}


				.PlayIcon{
					float: left;
					font-weight: 500;
					padding-top: 2px;
					font-size: 26px;
					filter: brightness(200%);
					color: green;
					text-shadow: 0px 0px 0px #000;
					margin-left: -2px;
					margin-right:0px;
					width:25px;
					}
				
				.PlayIcon:hover{
				color:aqua;
				}

				#FFSpeedText{
					float: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:#ffc107;
					text-shadow: 0px 0px 0px #000;
					width: 75px;
					margin-left: 10px;
					margin-right: 0px;
				}

				#FFSpeed1400{
					display: none;
					float: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:#ffc107;
					text-shadow: 0px 0px 0px #000;
					width: 75px;
					margin-left: 10px;
					margin-right: 0px;
				}
				
				#FFSpeedShow{
					float: left;
					text-align: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:#ffc107;
					text-shadow: 0px 0px 0px #000;
					width: 40px;
					margin-left: 0px;
					margin-right: 0px;
				}

				.FastFowardIcon{
					float: left;
					padding-right: 0px;
					padding-top: 4px;
					font-weight: 600;
					font-size: 22px;
					filter: brightness(110%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left: 0px;
					width:40px;
				}
				
				.FastFowardIcon:hover{
				color: #ffc107;
				}

				.PlayText{
					float: left;
					padding-right: 0px;
					padding-top: 4px;
					font-weight: 600;
					font-size: 16px;
					filter: brightness(110%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left:-25px;
					width:100px;
				}
				
				/*.PlayText:hover{
				color: #ffc107;
				}*/
			
				#progress-bar{
						float:left;
						margin-left: 20px;
					}

				.OffIcon{
					float: left;  
					font-weight: 500;
					padding-top: 4px;
					font-size: 24px;
					filter: brightness(200%);
					color:white;
					text-shadow: 0px 0px 0px #000;
					width: 60px;
					margin-left: 7px;
					}	
			
				.OffIcon:hover{
					color: green;
				}
			
				.OnIcon{
					float: left;  
					font-weight: 500;
					padding-top: 4px;
					font-size: 24px;
					filter: brightness(200%);
					color:  green;
					text-shadow: 0px 0px 0px #000;
					width: 60px;
					margin-left: 7px;
					
					}	
			
				.OnIcon:hover{
					color: green;
				}

				.RestartIcon{
					float: left;
					padding-top: 4px;
					font-size: 24px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					width: 50px;
					margin-left: 4px;
				}
			    
				.RestartIcon:hover{
					color: green;
				}
			 
			    .FullScreenIcon{
					float: left;
					padding-top: 4px;
					font-size: 22px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					width: 50px;
					margin-left: 4px;
				}
		
				.FullScreenIcon:hover{
					color: green;
				}
				
				.VidBarInside{
					float: left;
					max-width: 450px;
					font-size: 15px;
					color: white;
  				}
					
				.MOptionsIcon{
				position: absolute;
				z-index: 2000;
				float: left;	
				font-size: 18px;
				padding-top: 62px;
				/*filter: brightness(160%);*/
				color: #ffc107;
				text-shadow: 0px 0px 0px #000;
				width: 35px;
				margin-left: 448px;
				}				

				.MOptionsIcon:hover{
					color: white;
					cursor: help;
				}

				.SavePlaceIcon{
					float: left;	
					font-size: 22px;
					padding-top: 4px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					width: 30px;
					margin-left: 6px;
				}				

				.SavePlaceIcon:hover{
					color: #ffc107;
				}
				
				.OpenSavePlaceIcon{
					float: left;	
					font-size: 22px;
					padding-top: 4px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					width: 25px;
					margin-left: 10px;
				}
				
				.OpenSavePlaceIcon:hover{
					color: #ffc107;
				}

				.VideoConrolsWrapperBottom{
				width: 106.9%;
				margin-left: -30px;
				height: 50px;
				overflow: hidden;
				margin-top: 5px;
    			display: flex;
				padding-top: 20px;
				padding-left: 35px;
    			align-items: center;
				border-top: solid 3px yellow;
				}
					
			    .VideoConrolsWrapper{
				width: 103%;
				margin-left: -20px;
				height: 50px;
				overflow: hidden;
				margin-top: 5px;
    			display: flex;
				padding: 4px;
    			align-items: center;		
				}
				
				.speakerON{
					float: left;
					padding-top: 3px;
					font-weight: 600;
					font-size: 22px;
					filter: brightness(120%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left: 7px;
					width: 25px;
				}

			.speakerON:hover{
					color: green;
							}
			.RewindMenuControl{
			color: white;	
			}
			
			.RewindMenuControl:hover{
			color: #ffc107;	
			}
			
			.FastFowardControl{
			color: white;	
			}
			
			.FastFowardControl:hover{
			color: #ffc107;	
			}
			
			.AudoConrolsWrapper{
				width: 100%;
				height: 40px;
				background-color: #009;
				border: inset 3px #1bac91;
    			display: flex;
				/*border-radius: 25px;*/
				padding: 4px;
    			/*margin-left: -43px;*/
    			align-items: center;	
			 }

				
						
			 .FFSpeedIconU{
					float: left;
					padding-top: 4px;
					font-weight: 600;
					font-size: 22px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left: 2px;
					width:30px;
				}
				
				.FFSpeedIconU:hover{
				color: #ffc107;
				}

				.FFSpeedIconD{
					float: left;
					padding-top: 4px;
					font-weight: 600;
					font-size: 22px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left: 5px;
					width:22px;
				}
				
				.FFSpeedIconD:hover{
				color: #ffc107;
				}
				
				.RRSpeedIconU{
					float: left;
					padding-top: 4px;
					padding-left: 3px;
					font-weight: 600;
					font-size: 22px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left: -20px;
					width:40px;
				}
				
				.RRSpeedIconU:hover{
				color: #ffc107;
				}

				.RRSpeedIconD{
					float: left;
					padding-top: 4px;
					font-weight: 600;
					font-size: 22px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left: 0px;
					width:20px;
				}
				
				.RRSpeedIconD:hover{
				color: #ffc107;
				}

				.MinusIcon{
					float: left;
					padding-top: 3px;
					font-weight: 600;
					font-size: 22px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left: 10px;
                    width: 30px;
				}
				
				.MinusIcon:hover{
				color: green;
				}
			
			.PlusIcon{
					float: left;
					padding-top: 3px;
					font-weight: 600;
					font-size: 22px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left: 15px;
					margin-right: 0px;	
				 width: 20px;
				}
				
				.PlusIcon:hover{
				color: green;
				}
			
			.BalanceLeftIcon{
				padding-top: 3px;
				font-weight: 600;
					font-size: 20px;
					color: white;
					margin-left: 5px;
			}
			
			.BalanceLeftIcon:hover{
				color: #ffc107;
				}
			
			.BalanceRightIcon{
				padding-top: 3px;
				font-weight: 600;
					font-size: 20px;
					color: white;
					margin-left: 15px;
			}
			
			.BalanceRightIcon:hover{
				color: #ffc107;
				}
			
			#BalanceWrapper{
				width: 100px;
				padding-bottom: 8px;
				margin-left: -20px;
							}
			
			.LeftBalanceImg{
				margin-left: 5px;
			}
			
			.RightBalanceImg{
				margin-left: 4px;
			}
			

			/*Base*/
			.BaseLeftIcon{
				padding-top: 3px;
				font-weight: 600;
					font-size: 20px;
					color: white;
					margin-left: 10px;
			}
			
			.BaseLeftIcon:hover{
				color: #ffc107;
				}
			
			.BaseRightIcon{
				padding-top: 3px;
				font-weight: 600;
					font-size: 20px;
					color: white;
					margin-left: 15px;
			}
			
			.BaseRightIcon:hover{
				color: #ffc107;
				}
			
			#BaseWrapper{
				width: 80px;
				padding-bottom: 8px;
				margin-left: -21px;
							}
			
			.LeftBaseImg{
				margin-left: 10px;
				padding-bottom: 2px;
			}
			
			.RightBaseImg{
				margin-left: 4px;
				padding-bottom: 7px;
			}

			#output{
				float: left;
				padding-top: 4px;
				filter: brightness(110%);
				color: #ffc107;
                text-shadow: 0px 0px 0px #000;
				width: 40px;
				margin-left: 15px;
				
				}

				.speakerOff{
					float: left;
					padding-top: 3px;
					font-weight: 600;
					font-size: 22px;
					filter: brightness(200%);
					color: green;
					text-shadow: 0px 0px 0px #000;
					margin-left: 10px;
					margin-right: 7px;	
					width: 22px;
				}	

				
				.dotsIcon{
					float: left;
					padding-left: 5px;
					font-weight: 500;
					padding-top: 2px;
					font-size: 26px;
					filter: brightness(200%);
					color:white;
					text-shadow: 0px 0px 0px #000;
					width: 35px;
					margin-left: 2px;
					
			        }	
			
				.dotsIcon:hover{
					color: green;
					}



				.VolumePercentNum{
					text-align: left;
					font-size: 20px;
					padding-top: 5px;
					color: #ffc107;
					margin-left: 0px;
					margin-top: 0px;
					width: 60px;
				}

				#VolSpeedText{
					float: left;
					padding-top: 3px;
					font-weight: 500;
					filter: brightness(200%);	
					color: white;
					text-shadow: 0px 0px 0px #000;
					width: 85px;
					margin-left: 5px;
					margin-right: 0px;
				}

	  progress {
	  float: left;
      color: #ffc107;
      font-size: 12px;
	  min-width: 130px;
      height: 16px;
      border: none;
      margin-right: 24px;
	  margin-left: 24px;
	  margin-top: 4px;
      background: green;
      border-radius: 9px;
      vertical-align: top;
	 
    }
    progress::-moz-progress-bar { 
      color:  black; 
      background: yellow; 
    }
    
    progress[value]::-webkit-progress-bar {
      background-color: yellow;
      border-radius: 2px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    }
    
    progress[value]::-webkit-progress-value {
      background-color: #ffc107;
    }
				#show_hide_bt{
					font-weight: 500;
					font-size: 16px;
					margin-left: 10px;
				}
				
				#VidBarWrapper{
					max-width: 100%;
				}
				
				#playWrapper{
				font-weight: 400;
				font-size: 16px;
				color: white;
				/*width: 65px;*/
				}
				
				#current{
				float: left;
				filter: brightness(110%);
				color: #ffc107;
                text-shadow: 0px 0px 0px #000;
				width: 25px;
				margin-left: 20px;
				margin-right: 0px;
				}
	
				#duration{
				float: left;
				filter: brightness(110%);
				color: #ffc107;
				text-shadow: 0px 0px 0px #000;
				width:25px;
				margin-left: 0px;
				margin-right: 10px;
				}
				
				.TimeSlash{
					float: left;
					filter: brightness(110%);
					color: #ffc107;
					text-shadow: 0px 0px 0px #000;
					margin-left: 10px;
					margin-right: 3px;
					width: 20px;
				}

				#percent{
				float: left;
				filter: brightness(110%);	
				color:#ffc107;
				text-shadow: 0px 0px 0px #000;
				width: 130px;
				margin-left: 20px;
				margin-right: 10px;
				}

				#PerPlayed{
				float: left;
				filter: brightness(110%);
				color: #ffc107;
				text-shadow: 0px 0px 0px #000;
				margin-left: 1px;
				}

				#StatusText{
					float: left;
					padding-top: 0px;
					filter: brightness(110%);	
					color:#ffc107;
					text-shadow: 0px 0px 0px #000;
					width: 65px;
					margin-left: 20px;
					margin-right: 0px;
				}
				#Status{
					float: left;
					padding-top: 0px;
					filter: brightness(110%);	
					color:white;
					text-shadow: 0px 0px 0px #000;
					width: 120px;
					margin-left:-5px;
					margin-right: 0px;
				}
				

/*==========================================================================================
End Icons
==========================================================================================*/

/*==========================================================================================
Speed Menus
==========================================================================================*/

li{
        cursor: pointer;
    }

        .context-menu {
			margin-top:-535px;
			margin-left: 40px;
            position: absolute;
			z-index: 100;
            text-align: center;
            background: #009;
			font-size: 14px;
            /*border: 2px inset #1bac91;*/
        }
  
        .context-menu ul {
            padding: 0px;
            margin: 0px;
            min-width: 150px;
            list-style: none;
        }
  
        .context-menu ul li {
            padding-bottom: 4px;
            padding-top: 4px;
            /*border: 1px inset #1bac91;*/
        }
  
        .context-menu ul li a {
            text-decoration: none;
            color: white;
        }
  
        .context-menu ul li:hover {
            background: black;
			        }
    
		.context-menu ul li a:hover {
            color:#ffc107
        }
			
		#RRSpeed1400{
			display: none
		}



		.rewindSpeed{
			color:#ffc107
		}
		
		.FastFowardSpeed{
			color:#ffc107
		}

		
/*======================================================================		
Fast Foward Menu
======================================================================*/

        .FastFoward-Menu {
			margin-top:-535px;
			margin-left: 210px;
            position: absolute;
			z-index: 200;
            text-align: center;
            background: #009;
			font-size: 14px;
			
        }
  
        .FastFoward-Menu ul {
            padding: 0px;
            margin: 0px;
            min-width: 150px;
            list-style: none;
        }
  
        .FastFoward-Menu ul li {
            padding-bottom: 4px;
            padding-top: 4px;
            border: 1px inset #1bac91;
        }
  
        .FastFoward-Menu ul li a {
            text-decoration: none;
            color: white;
        }
  
        .FastFoward-Menu ul li:hover {
            background: black;
			        }
    
		.FastFoward-Menu ul li a:hover {
            color:#ffc107
        }

		#Vol{
					position: absolute;
					z-index: 1000;
					float: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:white;
					text-shadow: 0px 0px 0px #000;
					width: 100px;
					margin-top: 0px;
					margin-left: 450px;
					margin-right: 0px;
				}

/* ==========================================================================================
END Speed Menus
==========================================================================================*/

/* ==========================================================================================
under 1400px
==========================================================================================*/

		@media (max-width: 1400px) {
			
				.navbar > ul > li + li {
				  margin-left: -290px;
				  margin-top: 60px;
				}
			
				.classMenuSideLocation{
					margin-left: 20%;
					margin-top: 7px;
					font-size: 20px;
					margin-right: 50px;
				}

				.MOptionsIcon{
					padding-top: 62px;
					width: 35px;
					margin-left: 380px;
					}				

				.HelpMenuUpper{
					font-size: 16px;
					margin-top: 100px;
					margin-left: 386px;
					font-weight: 500;
					writing-mode: vertical-rl;
					text-orientation: upright;
					}

			
				.RewindIcon{
					width: 20px;
					}

				.StopIcon{
					float: left;
					text-shadow: 0px 0px 0px #000;
					width: 25px;
					margin-left: 15px;
					
			        }	
			
				.PlayIcon{
					float: left;
					margin-right: 0px;
					width:25px;
					margin-left: 10px;
					}
				
				.VideoConrolsWrapper{
					width: 95%;
					margin-left: 15px;
					height: 50px;
					overflow: hidden;
					margin-top: 0px;
					display: flex;
					padding: 4px;
					align-items: center;		
				}	
					
				.OnIcon{
					float: left;  
					font-weight: 500;
					padding-top: 5px;
					width: 50px;
					margin-top: 3px;
					margin-left: -10px;
					}
			
				.OffIcon{
					float: left;  
					font-weight: 500;
					padding-top: 5px;
					width: 50px;
					margin-top: 3px;
					margin-left: -10px;
					}
			
			   .RestartIcon{
					float: left;
					padding-top: 6px;
					text-shadow: 0px 0px 0px #000;
					width: 30px;
					margin-left: 5px;
				}
			
				.FullScreenIcon{
					float: left;
					padding-top: 6px;
					color: white;
					text-shadow: 0px 0px 0px #000;
					width: 30px;
					margin-left: 10px;
				}
			
				.FastFowardIcon{
					float: left;
					padding-right: 0px;
					padding-top: 4px;
					margin-left: 0px;
					width:50px;
				}
			
				.SavePlaceIcon{
					position: absolute;
					z-index: 1000;
					float: left;	
					padding-top: 5px;
					width: 30px;
					margin-top: -15px;
					margin-left: -10px;
				}				

				.OpenSavePlaceIcon{
					position: absolute;
					z-index: 1000;
					float: left;	
					padding-top: 5px;
					width: 30px;
					margin-top: -15px;
					margin-left: 20px;
				}
			
					#current{
						float: left;
						filter: brightness(110%);
						color: #ffc107;
						text-shadow: 0px 0px 0px #000;
						width: 25px;
						margin-left: 25px;
						margin-right: 0px;
						}
			
				   #percent{
						float: left;
						color:#ffc107;
						width: 50px;
						margin-left:35px;
						}
			
			
			
			      #Status{
						float: left;
						padding-bottom: 0px;
						text-shadow: 0px 0px 0px #000;
						width: 130px;
						margin-top: 25px;
						margin-left: -48px;
						margin-right: 0px;
						} 

				#StatusText{
						float: left;
						padding-top: 0px;
						padding-bottom: 0px;
						filter: brightness(110%);	
						text-shadow: 0px 0px 0px #000;
						width: 40px;
						margin-top: -25px;
						margin-left: 7px;
					}
			
			#VolSpeedShowTip{
				display: none;
			}
			
			#RRSpeedText{
				display: none;
			}
			
			#RRSpeed1400{
				display: block;
				float: left;
				padding-top: 4px;
				font-size: 16px;
				color: #ffc107;
				text-shadow: 0px 0px 0px #000;
				margin-left: 10px;
				width: 35px;
			}
			
			#FFSpeedText{
				display: none
			}
			
			#FFSpeed1400{
				display: block;
				float: left;
				font-size: 16px;
				padding-top: 4px;
				color:#ffc107;
				text-shadow: 0px 0px 0px #000;
				width: 35px;
				margin-left: 5px;
				margin-top: 0px;
				}
			
			#VolSpeedText{
					position: absolute;
					z-index: 1000;
					float: left;	
					padding-top: 5px;
					width: 30px;
					margin-top: 0px;
					margin-left: 30px;
				}
			
			#Vol{
					float: left;
					padding-top: 3px;
					font-weight: 600;
					font-size: 16px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left: 350px;
					width: 30px;
			}
			
			.MinusIcon {
					float: left;
					padding-top: 3px;
					font-weight: 600;
					font-size: 22px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left: 130px;
					width: 30px;
			}
			
			.PlusIcon {
					float: left;
					padding-top: 3px;
					font-weight: 600;
					font-size: 22px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left: 145px;
					width: 30px;
			}
			
			.VideoConrolsWrapperBottom {
				margin-left: -32px;
				width: 108.2%;
			}
			
			.RRSpeedIconD{
					float: left;
					padding-top: 5px;
					margin-left: 0px;
					margin-top: -1px;
					width:20px;
				}
			
			
			.RRSpeedIconU{
					float: left;
					padding-top: 3px;
					padding-left: 3px;
					font-weight: 600;
					font-size: 22px;
					filter: brightness(200%);
					color: white;
					text-shadow: 0px 0px 0px #000;
					margin-left: 5px;
					width:40px;
				}
			}

/* ==========================================================================================
under 1200px
==========================================================================================*/

			@media (max-width: 1200px){

				.aoTable{
					max-height: 540px;
				}
				
				.classMenuSideLocation{
					margin-left: 13%;
					margin-top: 7px;
					font-size: 20px;
					margin-right: 50px;
				}

				
				#Over1400Wrapper{
					display: block;
					min-height: 80px;
					max-height: 80px;
				}
				
				#Under1200Wrapper{
					display: block;
					min-height: 80px;
					max-height: 80px;
				}
				
				#Under1200Row2Wrapper{
					display: block;
					min-height: 70px;
					max-height: 70px;
				}
				
				#Under1200Row3Wrapper{
					min-height: 70px;
					max-height: 70px;
				}
				
				.MOptionsIcon{
					padding-top: 62px;
					width: 35px;
					margin-left: 314px;
				}				

				.HelpMenuUpper{
					font-size: 16px;
					margin-top: 100px;
					margin-left: 318px;
					font-weight: 500;
					writing-mode: vertical-rl;
					text-orientation: upright;
					}
				
				.VideoConrolsWrapperBottom{
				width: 109.9%;
				margin-left: -30px;
				height: 60px;
				overflow: hidden;
				margin-top: 9px;
    			display: flex;
				padding-top: 25px;
				padding-left: 35px;
    			align-items: center;
				border-top: solid 3px yellow;
				}
				
				.RewindIcon{
					float: left;
					padding-top: 22px;
					padding-left: 4px;
					margin-left: -15px;
					width: 50px;
					}
					
				.StopIcon{
					float: left;
					padding-top: 22px;
					padding-left: 5px;
					font-size: 22px;
					width: 35px;
					margin-left: 10px;
			        }	
				
				.PlayIcon{
					float: left;
					font-weight: 500;
					padding-top: 23px;
					font-size: 22px;
					margin-left: 5px;
					width:50px;
					}
				
				.FastFowardIcon{
					float: left;
					padding-right: 0px;
					padding-top: 23px;
					margin-left: 0px;
					width:70px;
					}
				
				progress {
					float: left;
					color: #ffc107;
					font-size: 12px;
					min-width: 170px;
					height: 16px;
					border: none;
					margin-left: 24px;
					margin-top: 24px;
					background: yellow;
					}
				
				.OffIcon{
					float: left;  
					padding-top: 20px;
					font-size: 24px;
					width: 50px;
					margin-left: 0px;
					}
				
				.OnIcon{
					float: left;  
					padding-top: 20px;
					font-size: 24px;
					width: 50px;
					margin-left: 0px;
					}
				
				.RestartIcon{
					float: left;
					font-size: 24px;
					text-shadow: 0px 0px 0px #000;
					width: 50px;
					margin-top: 13px;
					margin-left: 10px;
				}
	
				.FullScreenIcon{
					float: left;
					font-size: 24px;
					padding-top: 19px;
					width: 50px;
					margin-left: 10px;
				}
				
				
				.SeperateText{
					margin-top: -55px;
					margin-left: -32px;
					width: 110%;
					border-bottom: inset 3px yellow;
				}
				
				#current{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					color: #ffc107;
					margin-left: -30px;
					width: 45px;
				}
				
				.TimeSlash{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					margin-left: 10px;
					width: 20px;
				}
				
				#duration{
				position: absolute;
				z-index: 1000;
				float: left;
				margin-top: 130px;	
				margin-left:30px;
				width:20px;
				}
				
				#percent{
				position: absolute;
				z-index: 1000;
				float: left;
				width: 110px;
				margin-left: 70px;
				margin-top: 130px;	
				}

				#PerPlayed{
				float: left;
				margin-left: 1px;
				margin-top: 0px;	
				}

				#StatusText{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					width: 55px;
					margin-left:190px;
				}
				#Status{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					width: 50px;
					margin-left:255px;
				}
				
				.RRSpeedIconU{
					float: left;
					padding-top: 5px;
					padding-left: 3px;
					margin-left: 340px;
					margin-top: -25px;
					width:40px;
				}

				.RRSpeedIconD{
					float: left;
					padding-top: 5px;
					margin-left: 4px;
					margin-top: -25px;
					width:20px;
				}
				
				#RRSpeed1400{
					display: block;
					float: left;
					padding-top: 5px;
					width: 100px;
					margin-top: -25px;
					margin-left: -25px;
				}
				
				#RRSpeedShow{
					float: left;
					padding-top: 5px;
					width: 20px;
					margin-top: -25px;
					margin-left: -25px;
				}
				
				.FFSpeedIconU{
					float: left;
					padding-top: 5px;
					margin-top: -25px;
					margin-left: 20px;
					width:30px;
				}

				.FFSpeedIconD{
					float: left;
					padding-top: 5px;
					margin-top: -25px;
					margin-left: 5px;
					width:22px;
				}
			
				#FFSpeed1400{
					display: block;
					float: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:#ffc107;
					text-shadow: 0px 0px 0px #000;
					width: 20px;
					margin-top: -25px;
					margin-left: 10px;
				}
				
				#FFSpeedShow{
					float: left;
					padding-top: 5px;
					width: 40px;
					margin-top: -25px;
					margin-left: 10px;
				}

				.SeperateText2{
					margin-top: 180px;
					margin-left: -2px;
					width: 115%;
					border-bottom: inset 3px yellow;
				}
				
				.SavePlaceIcon{
					position: absolute;
					z-index: 1000;
					float: left;	
					padding-top: 5px;
					width: 30px;
					margin-top: 25px;
					margin-left: -625px;
				}				

				.OpenSavePlaceIcon{
					position: absolute;
					z-index: 1000;
					float: left;	
					padding-top: 5px;
					width: 30px;
					margin-top: 25px;
					margin-left: -585px;
				}
				
					
				.PlusIcon{
					position: absolute;
					z-index: 1000;
					margin-left: -170px;
					margin-top: 30px;
					width: 20px;
				}
				
				.MinusIcon{
					position: absolute;
					z-index: 1000;
					margin-left: -450px;
					margin-top: 30px;
					width: 20px;
				}
				
				.VolumePercentNum{
					position: absolute;
					z-index: 1000;
					margin-left: -100px;
					margin-top: 23px;
					width: 30px;
				}

				#output{
					position: absolute;
					z-index: 1000;
					margin-left: -130px;
					margin-top: 27px;
					width: 20px;
					}
				
				#VolSpeedText{
					position: absolute;
					z-index: 1000;
					margin-left: -108px;
					margin-top: 23px;
					width: 30px;
				}
				
				#Vol{
					position: absolute;
					z-index: 1000;
					float: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:white;
					text-shadow: 0px 0px 0px #000;
					width: 100px;
					margin-top: 80px;
					margin-left: 75px;
					margin-right: 0px;
				}
				
				.speakerON{
					position: absolute;
					z-index: 1000;
					margin-left: -60px;
					margin-top: 28px;
					width: 20px;
				}
					
				.speakerOff{
					position: absolute;
					z-index: 1000;
					margin-left: -60px;
					margin-top: 28px;
					width: 20px;
				}	

}
/* ==========================================================================================
under 992PX
==========================================================================================*/
				
				@media (max-width: 992px){
				
				.aoTable{
					max-height: 565px;
				}
				
				#Over1400Wrapper{
					display: block;
					min-height: 80px;
					max-height: 80px;
				}
				
				#Under1200Wrapper{
					display: block;
					min-height: 80px;
					max-height: 80px;
				}
				
				#Under1200Row2Wrapper{
					display: block;
					min-height: 70px;
					max-height: 70px;
				}
				
				#Under1200Row3Wrapper{
					min-height: 70px;
					max-height: 70px;
				}
				
				.MOptionsIcon{
					padding-top: 62px;
					width: 35px;
					margin-left: 321px;
				}				

				.HelpMenuUpper{
					font-size: 16px;
					margin-top: 100px;
					margin-left: 325px;
					font-weight: 500;
					writing-mode: vertical-rl;
					text-orientation: upright;
					}
				
				.VideoConrolsWrapperBottom{
				width: 109%;
				margin-left: -30px;
				height: 60px;
				overflow: hidden;
				margin-top: 5px;
    			display: flex;
				padding-top: 30px;
				padding-left: 35px;
    			align-items: center;
				border-top: solid 3px yellow;
				}
				
				.RewindIcon{
					float: left;
					padding-top: 22px;
					padding-left: 4px;
					margin-left: -15px;
					width: 50px;
					}
					
				.StopIcon{
					float: left;
					padding-top: 22px;
					padding-left: 5px;
					font-size: 22px;
					width: 35px;
					margin-left: 10px;
			        }	
				
				.PlayIcon{
					float: left;
					font-weight: 500;
					padding-top: 23px;
					font-size: 22px;
					margin-left: 5px;
					width:50px;
					}
				
				.FastFowardIcon{
					float: left;
					padding-right: 0px;
					padding-top: 23px;
					margin-left: 0px;
					width:70px;
					}
				
				progress {
					float: left;
					color: #ffc107;
					font-size: 12px;
					min-width: 170px;
					height: 16px;
					border: none;
					margin-left: 24px;
					margin-top: 24px;
					background: yellow;
					}
				
				.OffIcon{
					float: left;  
					padding-top: 20px;
					font-size: 24px;
					width: 50px;
					margin-left: 0px;
					}
				
				.RestartIcon{
					float: left;
					font-size: 24px;
					text-shadow: 0px 0px 0px #000;
					width: 50px;
					margin-top: 13px;
					margin-left: 10px;
				}
	
				.FullScreenIcon{
					float: left;
					font-size: 24px;
					padding-top: 19px;
					width: 50px;
					margin-left: 10px;
				}
				
				#current{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					color: #ffc107;
					margin-left: -30px;
					width: 45px;
				}
				
				.TimeSlash{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					margin-left: 10px;
					width: 20px;
				}
				
				#duration{
				position: absolute;
				z-index: 1000;
				float: left;
				margin-top: 130px;	
				margin-left:30px;
				width:20px;
				}
				
				#percent{
				position: absolute;
				z-index: 1000;
				float: left;
				width: 110px;
				margin-left: 70px;
				margin-top: 130px;	
				}

				#PerPlayed{
				float: left;
				margin-left: 1px;
				margin-top: 0px;	
				}

				#StatusText{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					width: 55px;
					margin-left:190px;
				}
				#Status{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					width: 50px;
					margin-left:255px;
				}
				
				.RRSpeedIconU{
					float: left;
					padding-top: 5px;
					padding-left: 3px;
					margin-left: 340px;
					margin-top: -25px;
					width:40px;
				}

				.RRSpeedIconD{
					float: left;
					padding-top: 5px;
					margin-left: 4px;
					margin-top: -25px;
					width:20px;
				}
				
				#RRSpeed1400{
					display: block;
					float: left;
					padding-top: 5px;
					width: 100px;
					margin-top: -25px;
					margin-left: -25px;
				}
				
				#RRSpeedShow{
					float: left;
					padding-top: 5px;
					width: 20px;
					margin-top: -25px;
					margin-left: -25px;
				}
				
				.FFSpeedIconU{
					float: left;
					padding-top: 5px;
					margin-top: -25px;
					margin-left: 20px;
					width:30px;
				}

				.FFSpeedIconD{
					float: left;
					padding-top: 5px;
					margin-top: -25px;
					margin-left: 5px;
					width:22px;
				}
			
				#FFSpeed1400{
					display: block;
					float: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:#ffc107;
					text-shadow: 0px 0px 0px #000;
					width: 20px;
					margin-top: -25px;
					margin-left: 10px;
				}
				
				#FFSpeedShow{
					float: left;
					padding-top: 5px;
					width: 40px;
					margin-top: -25px;
					margin-left: 10px;
				}

				.SeperateText{
					margin-top: -65px;
					margin-left: -32px;
					width: 109%;
					border-bottom: inset 3px yellow;
				
				}
				
				.SavePlaceIcon{
					position: absolute;
					z-index: 1000;
					float: left;	
					padding-top: 5px;
					width: 30px;
					margin-top: 25px;
					margin-left: -640px;
				}				

				.OpenSavePlaceIcon{
					position: absolute;
					z-index: 1000;
					float: left;	
					padding-top: 5px;
					width: 30px;
					margin-top: 25px;
					margin-left: -600px;
				}
					
				.PlusIcon{
					position: absolute;
					z-index: 1000;
					margin-left: -170px;
					margin-top: 30px;
					width: 20px;
				}
				
				.MinusIcon{
					position: absolute;
					z-index: 1000;
					margin-left: -450px;
					margin-top: 30px;
					width: 20px;
				}
				
				.VolumePercentNum{
					position: absolute;
					z-index: 1000;
					margin-left: -100px;
					margin-top: 23px;
					width: 30px;
				}

				#output{
					position: absolute;
					z-index: 1000;
					margin-left: -130px;
					margin-top: 27px;
					width: 20px;
					}
				
				#VolSpeedText{
					position: absolute;
					z-index: 1000;
					margin-left: -108px;
					margin-top: 23px;
					width: 30px;
				}
				
				#Vol{
					position: absolute;
					z-index: 1000;
					float: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:#ffc107;
					text-shadow: 0px 0px 0px #000;
					width: 100px;
					margin-top: 80px;
					margin-left: 75px;
					margin-right: 0px;
				}
				
				.speakerON{
					position: absolute;
					z-index: 1000;
					margin-left: -60px;
					margin-top: 28px;
					width: 20px;
				}
					
				.speakerOff{
					position: absolute;
					z-index: 1000;
					margin-left: -60px;
					margin-top: 28px;
					width: 20px;
				}	
				
				.aoTable{
					max-height: 540px;
				}
}
/* ==========================================================================================
under 768PX
==========================================================================================*/
				
				@media (max-width: 768px){					
				
				.aoTable{
					max-height: 565px;
				}
					
				.MOptionsIcon{
					padding-top: 62px;
					width: 35px;
					margin-left: 295px;
				}				

				.HelpMenuUpper{
					font-size: 16px;
					margin-top: 100px;
					margin-left: 300px;
					font-weight: 500;
					writing-mode: vertical-rl;
					text-orientation: upright;
					}
				
				#Over1400Wrapper{
					display: block;
					min-height: 80px;
					max-height: 80px;
				}
				
				#Under1200Wrapper{
					display: block;
					min-height: 80px;
					max-height: 80px;
				}
				
				#Under1200Row2Wrapper{
					display: block;
					min-height: 70px;
					max-height: 70px;
				}
				
				#Under1200Row3Wrapper{
					min-height: 70px;
					max-height: 70px;
				}
				
				.VideoConrolsWrapperBottom{
				width: 109.4%;
				margin-left: -30px;
				height: 60px;
				overflow: hidden;
				margin-top: 5px;
    			display: flex;
				padding-top: 30px;
				padding-left: 33px;
    			align-items: center;
				border-top: solid 3px yellow;
				}
				
				.RewindIcon{
					float: left;
					padding-top: 22px;
					padding-left: 4px;
					margin-left: -15px;
					width: 50px;
					}
					
				.StopIcon{
					float: left;
					padding-top: 22px;
					padding-left: 5px;
					font-size: 22px;
					width: 35px;
					margin-left: 10px;
			        }	
				
				.PlayIcon{
					float: left;
					font-weight: 500;
					padding-top: 23px;
					font-size: 22px;
					margin-left: 5px;
					width:50px;
					}
				
				.FastFowardIcon{
					float: left;
					padding-right: 0px;
					padding-top: 23px;
					margin-left: 0px;
					width:50px;
					}
				
				progress {
					float: left;
					color: #ffc107;
					font-size: 12px;
					min-width: 170px;
					height: 16px;
					border: none;
					margin-left: 24px;
					margin-top: 24px;
					background: yellow;
					}
				
				.OffIcon{
					float: left;  
					padding-top: 20px;
					font-size: 24px;
					width: 50px;
					margin-left: -10px;
					}
				
				.OffIcon{
					float: left;  
					padding-top: 20px;
					font-size: 24px;
					width: 50px;
					margin-left: -10px;
					}
					
				.RestartIcon{
					float: left;
					font-size: 24px;
					text-shadow: 0px 0px 0px #000;
					width: 50px;
					margin-top: 13px;
					margin-left: 5px;
				}
	
				.FullScreenIcon{
					float: left;
					font-size: 24px;
					padding-top: 19px;
					width: 50px;
					margin-left: 0px;
				}
				
				.SeperateText{
					margin-top: -65px;
					margin-left: -33px;
					width: 110%;
					border-bottom: inset 3px yellow;
				
				}
				
				#current{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					color: #ffc107;
					margin-left: -30px;
					width: 45px;
				}
				
				.TimeSlash{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					margin-left: 10px;
					width: 20px;
				}
				
				#duration{
				position: absolute;
				z-index: 1000;
				float: left;
				margin-top: 130px;	
				margin-left:30px;
				width:20px;
				}
				
				#percent{
				position: absolute;
				z-index: 1000;
				float: left;
				color: blue;
				width: 110px;
				margin-left: 70px;
				margin-top: 130px;	
				}

				#PerPlayed{
				float: left;
				margin-left: 1px;
				margin-top: 0px;	
				}

				#StatusText{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					width: 55px;
					margin-left:190px;
				}
				#Status{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					width: 50px;
					margin-left:255px;
				}
				
				.RRSpeedIconU{
					float: left;
					padding-top: 5px;
					padding-left: 3px;
					margin-left: 340px;
					margin-top: -25px;
					width:40px;
				}

				.RRSpeedIconD{
					float: left;
					padding-top: 5px;
					margin-left: 4px;
					margin-top: -25px;
					width:20px;
				}
				
				#RRSpeed1400{
					display: block;
					float: left;
					padding-top: 5px;
					width: 100px;
					margin-top: -25px;
					margin-left: -25px;
				}
				
				#RRSpeedShow{
					float: left;
					padding-top: 5px;
					width: 20px;
					margin-top: -25px;
					margin-left: -25px;
				}
				
				.FFSpeedIconU{
					float: left;
					padding-top: 5px;
					margin-top: -25px;
					margin-left: 20px;
					width:30px;
				}

				.FFSpeedIconD{
					float: left;
					padding-top: 5px;
					margin-top: -25px;
					margin-left: 5px;
					width:22px;
				}
			
				#FFSpeed1400{
					display: block;
					float: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:#ffc107;
					text-shadow: 0px 0px 0px #000;
					width: 20px;
					margin-top: -25px;
					margin-left: 10px;
				}
				
				#FFSpeedShow{
					float: left;
					padding-top: 5px;
					width: 40px;
					margin-top: -25px;
					margin-left: 10px;
				}

				.SeperateText2{
					margin-top: 180px;
					margin-left: -2px;
					width: 115%;
					border-bottom: inset 3px yellow;
				}
				
				.SavePlaceIcon{
					position: absolute;
					z-index: 1000;
					float: left;	
					padding-top: 5px;
					width: 30px;
					margin-top: 25px;
					margin-left: -600px;
				}				

				.OpenSavePlaceIcon{
					position: absolute;
					z-index: 1000;
					float: left;	
					padding-top: 5px;
					width: 30px;
					margin-top: 25px;
					margin-left: -560px;
				}
				
					
				.PlusIcon{
					position: absolute;
					z-index: 1000;
					margin-left: -160px;
					margin-top: 30px;
					width: 20px;
				}
				
				.MinusIcon{
					position: absolute;
					z-index: 1000;
					margin-left: -420px;
					margin-top: 30px;
					width: 20px;
				}
				
				.VolumePercentNum{
					position: absolute;
					z-index: 1000;
					margin-left: -85px;
					margin-top: 23px;
					width: 30px;
				}

				#output{
					position: absolute;
					z-index: 1000;
					margin-left: -115px;
					margin-top: 27px;
					width: 20px;
					}
				
				#VolSpeedText{
					position: absolute;
					z-index: 1000;
					margin-left: -108px;
					margin-top: 23px;
					width: 30px;
				}
				
				#Vol{
					position: absolute;
					z-index: 1000;
					float: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:#ffc107;
					text-shadow: 0px 0px 0px #000;
					width: 100px;
					margin-top: 80px;
					margin-left: 75px;
					margin-right: 0px;
				}
				.speakerON{
					position: absolute;
					z-index: 1000;
					margin-left: -50px;
					margin-top: 28px;
					width: 20px;
				}
					
				.speakerOff{
					position: absolute;
					z-index: 1000;
					margin-left: -50px;
					margin-top: 28px;
					width: 20px;
				}	
				
				.aoTable{
					max-height: 540px;
				}
}

@media (max-width: 670px){	
	
				.MOptionsIcon{
					padding-top: 62px;
					width: 35px;
					margin-left: 247px;
				}				

				.HelpMenuUpper{
					font-size: 16px;
					margin-top: 100px;
					margin-left: 252px;
					font-weight: 500;
					writing-mode: vertical-rl;
					text-orientation: upright;
					}

				.RewindIcon{
					float: left;
					padding-top: 22px;
					padding-left: 0px;
					margin-left: -20px;
					width: 50px;
					}
					
				.StopIcon{
					float: left;
					padding-top: 22px;
					padding-left: 0px;
					font-size: 22px;
					width: 35px;
					margin-left: 0px;
			        }	
				
				.PlayIcon{
					float: left;
					font-weight: 500;
					padding-top: 23px;
					font-size: 22px;
					margin-left: -15px;
					width:50px;
					}
				
				.FastFowardIcon{
					float: left;
					padding-right: 0px;
					padding-top: 23px;
					margin-left: -10px;
					width:40px;
					}
				
					progress {
					font-size: 12px;
					min-width: 170px;
					height: 16px;
					border: none;
					margin-left: 20px;
					margin-top: 24px;
					background: yellow;
					}
								
				.OffIcon{
					float: left; 
					padding: 0px;
					color: white;
					width: 40px;
					margin-left: -15px;
					margin-top: 25px;
				}
				
				.OffIcon:hover{
					color: #ffc107;
				}
	
	
				.OnIcon{
					float: left;  
					padding: 0px;
					color: #ffc107;
					width: 40px;
					margin-left: -15px;
					margin-top: 25px;
					}	
				
				.OnIcon:hover{
					color: white;
					}
	
				.RestartIcon{
					float: left;
					font-size: 24px;
					text-shadow: 0px 0px 0px #000;
					width: 40px;
					margin-top: 13px;
					margin-left: 5px;
				}
	
				.FullScreenIcon{
					float: left;
					font-size: 24px;
					padding-top: 19px;
					width: 40px;
					margin-left: 0px;
				}
				
				.SeperateText{
					margin-top: -65px;
					margin-left: -33px;
					width: 112%;
					border-bottom: inset 3px yellow;
				
				}
				#current{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 100px;
					color: #ffc107;
					margin-left: -30px;
					width: 45px;
				}
				
				.TimeSlash{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 100px;
					margin-left: 10px;
					width: 20px;
				}
				
				#duration{
				position: absolute;
				z-index: 1000;
				float: left;
				margin-top: 145px;	
				margin-left:-24px;
				width:20px;
				}
				
				#percent{
				position: absolute;
				z-index: 1000;
				float: left;
				color: blue;
				width: 110px;
				margin-left: 20px;
				margin-top: 130px;	
				}

				#PerPlayed{
				float: left;
				margin-left: 1px;
				margin-top: 0px;	
				}

				#StatusText{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					width: 55px;
					margin-left:130px;
				}
				#Status{
					position: absolute;
					z-index: 1000;
					float: left;
					margin-top: 130px;
					width: 50px;
					margin-left:190px;
				}
				
				.RRSpeedIconU{
					float: left;
					padding-top: 5px;
					padding-left: -10px;
					margin-left: 270px;
					margin-top: -25px;
					width:30px;
				}

				.RRSpeedIconD{
					float: left;
					padding-top: 5px;
					margin-left: 4px;
					margin-top: -25px;
					width:20px;
				}
				
				#RRSpeed1400{
					display: block;
					float: left;
					padding-top: 5px;
					width: 40px;
					margin-top: -25px;
					margin-left: 4px;
				}
				
				#RRSpeedShow{
					float: left;
					padding-top: 5px;
					width: 20px;
					margin-top: -25px;
					margin-left: 5px;
				}
				
				.FFSpeedIconU{
					float: left;
					padding-top: 5px;
					margin-top: -25px;
					margin-left: 3px;
					width:30px;
				}

				.FFSpeedIconD{
					float: left;
					padding-top: 5px;
					margin-top: -25px;
					margin-left: 4px;
					width:22px;
				}
			
				#FFSpeed1400{
					display: block;
					float: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:#ffc107;
					text-shadow: 0px 0px 0px #000;
					width: 20px;
					margin-top: -25px;
					margin-left: 8px;
				}
				
				#FFSpeedShow{
					float: left;
					padding-top: 5px;
					width: 40px;
					margin-top: -25px;
					margin-left: 8px;
				}

				.SeperateText2{
					margin-top: 180px;
					margin-left: -2px;
					width: 115%;
					border-bottom: inset 3px yellow;
				}
				
				.SavePlaceIcon{
					position: absolute;
					z-index: 1000;
					float: left;	
					padding-top: 5px;
					width: 30px;
					margin-top: 25px;
					margin-left: -500px;
				}				

				.OpenSavePlaceIcon{
					position: absolute;
					z-index: 1000;
					float: left;	
					padding-top: 5px;
					width: 30px;
					margin-top: 25px;
					margin-left: -463px;
				}
				
					
				.PlusIcon{
					position: absolute;
					z-index: 1000;
					margin-left: -150px;
					margin-top: 30px;
					width: 20px;
				}
				
				.MinusIcon{
					position: absolute;
					z-index: 1000;
					margin-left: -340px;
					margin-top: 30px;
					width: 20px;
				}
				
				.VolumePercentNum{
					position: absolute;
					z-index: 1000;
					margin-left: -85px;
					margin-top: 23px;
					width: 30px;
				}

				#output{
					position: absolute;
					z-index: 1000;
					margin-left: -115px;
					margin-top: 27px;
					width: 20px;
					}
				
				#VolSpeedText{
					position: absolute;
					z-index: 1000;
					margin-left: -108px;
					margin-top: 23px;
					width: 30px;
				}
				
				#Vol{
					position: absolute;
					z-index: 1000;
					float: left;
					font-size: 16px;
					padding-top: 5px;
					filter: brightness(110%);	
					color:white;
					text-shadow: 0px 0px 0px #000;
					width: 100px;
					margin-top: 80px;
					margin-left: 65px;
					margin-right: 0px;
				}
				.speakerON{
					position: absolute;
					z-index: 1000;
					margin-left: -50px;
					margin-top: 28px;
					width: 20px;
				}
					
				.speakerOff{
					position: absolute;
					z-index: 1000;
					margin-left: -50px;
					margin-top: 28px;
					width: 20px;
				}	
				
				.aoTable{
					max-height: 540px;
				}
}
	
				@media (max-width: 576px){	
	
				.MOptionsIcon{
					padding-top: 62px;
					width: 35px;
					margin-left: 243px;
				}				

				.HelpMenuUpper{
					font-size: 16px;
					margin-top: 100px;
					margin-left: 247px;
					font-weight: 500;
					writing-mode: vertical-rl;
					text-orientation: upright;
					}	
}