@font-face {
  font-family: 'cameoplayer';
  src:  url('fonts/cameoplayer.eot?4dbrjp');
  src:  url('fonts/cameoplayer.eot?4dbrjp#iefix') format('embedded-opentype'),
    url('fonts/cameoplayer.ttf?4dbrjp') format('truetype'),
    url('fonts/cameoplayer.woff?4dbrjp') format('woff'),
    url('fonts/cameoplayer.svg?4dbrjp#cameoplayer') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="cameo-icon-"], [class*=" cameo-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'cameoplayer' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
/*  letter-spacing: 14px; */

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cameo-icon-creative-commons:before {
  content: "\e901";
}
.cameo-icon-save:before {
  content: "\e902";
  width : 2rem;
  height : 2rem;
}
.cameo-icon-edit:before {
  content: "\e903";
}
.cameo-icon-email:before {
  content: "\e904";
}
.cameo-icon-flag:before {
  content: "\e905";
}
.cameo-icon-gauge:before {
  content: "\e907";
}
.cameo-icon-mask:before {
  content: "\e908";
}
.cameo-icon-new-message:before {
  content: "\e909";
}
.cameo-icon-typing:before {
  content: "\e90a";
}
.cameo-icon-circle-with-cross:before {
  content: "\e90b";
}
.cameo-icon-circle-with-minus:before {
  content: "\e90c";
}
.cameo-icon-circle-with-plus:before {
  content: "\e90d";
}
.cameo-icon-clapperboard:before {
  content: "\e90e";
}

.cameo-icon-scene:before {
  content: "\e90e";
}

.cameo-scene:before {
  content: "\e90e";
}
.cameo-cloud-download2:before {
content: "\e9c2";
}
.cameo-icon-video-camera:before {
  content: "\e914";
}
.cameo-icon-file-text:before {
  content: "\e922";
}
.cameo-icon-calendar:before {
  content: "\e953";
}
.cameo-icon-bubbles:before {
  content: "\e970";
}
.cameo-icon-spinner:before {
  content: "\e97b";
}
.cameo-icon-enter:before {
  content: "\ea13";
}
.cameo-icon-play:before {
  content: "\ea15";
}
.cameo-icon-pause:before {
  content: "\ea16";
}
.cameo-icon-stop:before {
  content: "\ea17";
}
.cameo-icon-previous:before {
  content: "\ea18";
}
.cameo-icon-next:before {
  content: "\ea1d";
}
.cameo-icon-backward:before {
  content: "\ea1f";
}
.cameo-icon-forward:before {
  content: "\ea20";
}
.cameo-icon-volume-medium:before {
  content: "\ea27";
}
.cameo-icon-volume-increase:before {
  content: "\ea2b";
}
.cameo-icon-volume-decrease:before {
  content: "\ea2c";
}
.cameo-icon-filter:before {
  content: "\ea5b";
}
.cameo-icon-table:before {
  content: "\ea70";
}
.cameo-icon-enlarge:before {
  content: "\e98b";
}
.cameo-icon-cog:before {
  content: "\e994";
}
.cameo-icon-cogs:before {
  content: "\e995";
}
.cameo-icon-stats-bars:before {
  content: "\e99c";
}
.cameo-icon-list2:before {
  content: "\e9bb";
}
.cameo-icon-warning:before {
  content: "\ea07";
}
.cameo-icon-info:before {
  content: "\ea0c";
}
.cameo-icon-cancel-circle:before {
  content: "\ea0d";
}
.cameo-icon-checkmark:before {
  content: "\ea10";
}
.cameo-icon-checkmark2:before {
  content: "\ea11";
}
.cameo-icon-sort-numeric-asc:before {
  content: "\ea4a";
}
.cameo-icon-home:before {
  content: "\e900";
}
.cameo-icon-pencil:before {
  content: "\e906";
}
.cameo-icon-headphones:before {
  content: "\e910";
}
.cameo-icon-music:before {
  content: "\e911";
}
.cameo-icon-diamonds:before {
  content: "\e919";
}
.cameo-icon-tv:before {
  content: "\e95b";
}
.cameo-icon-users:before {
  content: "\e972";
}
.cameo-icon-user-plus:before {
  content: "\e973";
}
.cameo-icon-user-minus:before {
  content: "\e974";
}
.cameo-icon-key:before {
  content: "\e98d";
}
.cameo-icon-eye:before {
  content: "\e9ce";
}
.cameo-icon-eye-plus:before {
  content: "\e9cf";
}
.cameo-icon-eye-minus:before {
  content: "\e9d0";
}
.cameo-icon-eye-blocked:before {
  content: "\e9d1";
}
.cameo-icon-notification:before {
  content: "\ea09";
}
.cameo-icon-blocked:before {
  content: "\ea0e";
}
.cameo-icon-shrink:before {
  content: "\e98c";
}
.cameo-icon-volume-mute:before {
  content: "\ea29";
}
.cameo-icon-volume-mute2:before {
  content: "\ea2a";
}
.cameo-icon-meter:before {
  content: "\e9a6";
}
.cameo-icon-circle-up:before {
  content: "\ea41";
}
.cameo-icon-circle-right:before {
  content: "\ea42";
}
.cameo-icon-circle-down:before {
  content: "\ea43";
}
.cameo-icon-circle-left:before {
  content: "\ea44";
}
.cameo-icon-radio-checked:before {
  content: "\ea54";
}
.cameo-icon-radio-checked2:before {
  content: "\ea55";
}
.cameo-icon-radio-unchecked:before {
  content: "\ea56";
}
.cameo-icon-tv {
  display: inline !important;
}

.cameo-icon-audio-tracks:before{content:"\E600"}

.cameo-icon-spinner:before {
		content:"\e97b";
		}
.cameo-icon-tv:before { 
		content:"\e95b";
		}
.cameo-icon-tv.jw-off:before {
		content: "\e95b";
		}

.cameo-icon-cc:before{content:"\e901"}

.cameo-icon-cue:before,
.cameo-icon-menu-bullet:before{content:"\e9bb"}

.cameo-icon-error:before{content:"\E607"}

.cameo-icon-enlarge2:before{ 
		content:"\e98b";
		}

.cameo-icon-enlarge2.jw-off:before { 
		content:"\e98c";
	}

.cameo-icon-hd:before{content:"\E60A"}

.mejs__addmarker-button{content: "\e266"}


html,body {
   width:100%;
   margin:0;
   padding:0;
   overflow-x:hidden;
 }
 
 #footer{
   width:100%; /*...instead of 1024px;...*/
/*   position: absolute; */
   right: 0;
   left: 0;
 } 
 
/* 
html {
   height: calc(100vh - 100%);
   min-height: calc(100vh - 100px);
   width: calc(100vw - 100%);
   min-width: calc(100vw - 100px);
   box-sizing: border-box;
}
*/
/* body{width: 100%; height: 100%; margin: 0; padding: 0; overflow:hidden;} */
/*
    .player1{
    	max-height:100% !important;     
    	width: 98dvw !important;
    	height:100%;         	
    	}
*/    
    
/*    .me-plugin {width: 100%; height: 100%;} */


body { 
	background-color:#000; 
/*	color:#ffffff;  */
	font-family: Segoe UI,Arial,sans-serif;
	font-size: 1.0em;
/*	height: 100%; */
	overflow: hidden;
/*	 transform: translateY(-0.8rem); */
	}

.greeting::before {
	content: "Welcome - ";
}

.signoutbtn::before {
	content: "Sign Out";
}

.mejs__container-fullscreen {
    bottom: 0 !important;
    left: 0 !important;
    overflow: hidden;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 98vw !important;
    height: 98vh !important;
    z-index: 1000;
}

/*
.mejs__fullscreen {
    bottom: 0 !important;
    left: 0 !important;
    overflow: hidden;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 98dvw !important;
    height: 98dvh !important;
    z-index: 1000;
}
*/


.mejs__container-fullscreen video {
    bottom: 0 !important;
    left: 0 !important;
    overflow: hidden;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 98dvw !important;
    height: 98dvh !important;
    z-index: 1000;
}

.mejs__fullscreen .menu {
   display:none;
}

.mejs__container-fullscreen .mejs__controls {
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 3.5rem;
    left: 0;
    list-style-type: none;
    margin: 0;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding: 0 0.625rem;
    position: absolute;
    width: 100%;
    z-index: 3;
 }   
    
.mejs__container {
background: #000;
box-sizing: border-box;
font-family: 'Helvetica', Arial, serif;
position: relative;
text-align: left;
text-indent: 0;
vertical-align: top;
}

.mejs__overlay {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    display: -webkit-box;
    /* display: -webkit-flex; */
    display: -ms-flexbox;
    /* display: flex; */
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    left: 0;
    position: absolute;
    top: 0;
}

.mejs__container:focus {
    outline-offset: 0.125rem;
    outline-style: none; 
    outline-width: 0.125rem;
}
	
.container {
    /* padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); */
    max-width: 1188px;
    /* margin-top: 0.5rem; */
    margin-left: auto;
    margin-right: auto;
    left: auto;
    right: auto;
    display: flex;
    flex-flow: column;
    position: relative;
    /* overflow: auto; */
    transform: translateY(0.4rem);
    height: 98vh;
 /*   width: 98vw; */
    align-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
}


.container .row.media-wrapper {
	width: inherit; 
 /*   aspect-ratio: 16/9; */
/*    padding-top: 56.25%; */
/*    flex: 0 1 auto; */
}

.container .row.ListItems {
text-indent: 0px;
background: #000000;
box-shadow: inset 0 0.1875rem 0.625rem rgba(0,0,0,.85);
-webkit-box-shadow: inset 0 0.1875rem 0.625rem rgba(0,0,0,.85);
-moz-box-shadow: inset 0 0.1875rem 0.625rem rgba(0,0,0,.85);
border-bottom-left-radius: 0.3125rem;
border-bottom-right-radius: 0.3125rem;
-moz-border-radius-bottomleft: 0.3125rem;
-moz-border-radius-bottomright: 0.3125rem;
-webkit-border-bottom-left-radius: 0.3125rem;
-webkit-border-bottom-right-radius: 0.3125rem;
-webkit-scrollbar-witdth: 0.75rem;
color: #000000;
text-decoration: none;
/*flex: 2 2 auto;*/
/* flex: 100%; */
overflow-x: scroll;
}


.container .row {
     /*   border: 3px dotted #fff; */
}




.row.footer {
		margin: 5px 4px 5px 10px;
        flex: 0 1 40px;
        }
        
.footdiv {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:60px;
    background:#333;
    
}

.cameo-button {
	padding: .2em .5em;
	display: inline-block;
	position: relative;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Support: IE <= 11 */
	overflow: visible;
}


#cameo_logo_corner {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    margin: auto;
    display: block;
    height: 25px;
    width: 120px;
   z-index:5;
}

* {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	outline: none; 
}

#cameo_logo_center {
	position: absolute; 
	top:5px;
  	left: 0; 
  	right: 0; 
  	margin-left: auto; 
  	margin-right: auto; 
    padding: 10px;
    display: block;
    height: 50px;
    width: 240px;
   z-index:2;
}


.dropbtn {
  background-color: #222222;
  color: white;
  padding: 0.25rem;
  font-size: 87.5%;
  border-radius: 0.3rem;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #444444;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333333;
  min-width: 10rem;
  overflow: auto;
  box-shadow: 0rem 0.5rem 1.0rem 0rem rgba(0,0,0,0.2);
  z-index: 10;
}

.dropdown-content a {
  color: white;
  padding: 0.25rem 0.375rem;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

.menu {
	display:block;
	background-color:#000000;
}

.menu-table {
   width:100%;
   table-layout:auto;
}

/*.menu-table tr { transform: translateY(-0.7rem);}*/

.img-cell {
	white-space: nowrap;
   width:7.5rem;
   align-items: flex-start;
}

.menu-signout-cell {
	white-space: nowrap;
	justify-content: right;
   display: flex;
    align-items: flex-end;
}

.signoutbtn {
  background-color: #222222;
  color: white;
  padding: 0.25rem;
  font-size: 87.5%;
  border-radius: 0.3rem;
  border: none;
  cursor: pointer;
}

.menu-project-cell {
	white-space: nowrap;
	justify-content: right;
}

.menu-cell {
	white-space: nowrap;
	
  
}

.topmenubtn {
  background-color: #222222;
  color: white;
  padding: 0.25rem;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.topmenubtn:hover, .topmenubtn:focus {
  background-color: #444444;
}


.ListItems div li {
	font-size:65%;
	text-align: center; 
	display: block;
	border-radius: 0.5rem;

}

.ListItems div a {
	text-indent: 0px;
	display: block;
	background: #000;
	border: 1px solid #666;
	border-radius: 0.5rem;
	margin: 0;
	color: #ffffff;
	text-decoration: none;
	text-align:center;
	list-style-type: none;
	list-style-position:inside;
	font-size: 0.7rem;
}

.dropt {
   /*  height: 5.85rem; */
      width: 9.12rem;
  	aspect-ratio : 14/9;
 /*   padding-top: 64.28%; */
    margin: 0.25rem 0.25rem 0.25rem 0.25rem;
}


div.cl_choosen {
    position: absolute;
    background-image: url(SVG/circle-outline.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: 0.5rem 0.5rem;
    height: 0.5rem;
    width: 0.5rem;
    filter: invert(1.0);
    /* cursor: pointer; */
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    margin: 0.4rem 0.45rem;
    z-index: 5;
}

div.cl_censured {
    position: absolute;
    background-image: url(SVG/eye-blocked.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: 0.8rem 0.8rem;
    height: 0.8rem;
    width: 0.8rem;
    filter: invert(1.0);
    /* cursor: pointer; */
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    margin: 0.4rem 7.45rem;
    z-index: 5;
}

span.dropt.unpublished a {
    list-style-type: none;
    border: 1px solid #ffffff;
    border-radius: 0.5rem;
    opacity: 50%;
}
/*.landscape_warning::before {
	content: "Please Flip your phone for better experince ";
}	*/
.landscape_warning {
	display:none ;
}

p {
	border: 0;
	font-family: inherit;
	font-size: 110%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	color: #999999;
}

.title p {
	border: 0;
	font-family: inherit;
	font-size: 120%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0px;
	outline: 0;
	padding: 0.625rem 1.25rem;
	color: #FFFFFF;
}

.title t {
	border: 0;
	font-family: inherit;
	font-size: 90$;
	font-style: inherit;
	font-weight: inherit;
	margin: 0px;
	outline: 0;
	padding: 0px 1.25rem;
	color: #999999;
}

t {
	border: 0;
	font-family: inherit;
	font-size: 90$;
	font-style: inherit;
	font-weight: inherit;
	margin: 0px;
	outline: 0;
	padding: 0px 1.25rem;
	color: #999999;
}

.list {
/* align-content: center; */
text-indent: 0px;
background: #000000;
box-shadow: inset 0 3px 10px rgba(0,0,0,.85);
-webkit-box-shadow: inset 0 3px 10px rgba(0,0,0,.85);
-moz-box-shadow: inset 0 3px 10px rgba(0,0,0,.85);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-scrollbar-witdth: 12px;
font-family: helvetica;
color: #000000;
text-decoration: none;
list-style-type: none;
list-style-position:inside;
padding:0 0 0 0px;
 display: flex;
    flex-wrap: wrap;
    justify-content: center
        
}

.ListItems div a:hover {
list-style-type: none;
border: 1px solid #ff00ff;
border-radius: 0,5rem;
}

.ListItems div a:active {
list-style-type: none;
border: 1px solid #ffff46;
border-radius: 0.5rem;
z-index:5;
}

.ListItems div a:playing {
list-style-type: none;
border: 1px solid #ffff46;
border-radius: 0.5rem;
z-index:5;
}
li.group-list-item.playing a {
 list-style-type: none;
border: 1px solid #ff0046;
border-radius: 0.5rem;
}

span.dropt.playing a {
 list-style-type: none;
border: 1px solid #ff0046;
border-radius: 0.5rem;
}
 
      
.dropt img{
  /* background-color: #BBBBBB; */ 
  width: inherit;
  max-width: 95%;
  aspect-ratio:16/9;
/*  padding-top: 56.25%; */
  padding:0.1 0.1 0.1 0.1rem;
  border-radius: 0.5rem;

  
}

.ListItems div a:cl_choosen  {
    background-image: url(SVG/cameo-location.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: -1.3rem -1.3rem;
    height: 1.3rem;
    width: 1.2rem;
    filter: invert(1.0);
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.4rem);
    z-index:5
}

.seldropt img {
  /* background-color: #BBBBBB; */ 
  width: inherit;
  max-width: 95%;
  aspect-ratio:16/9;
/*  padding-top: 56.25%; */
  padding:0.1 0.1 0.1 0.1rem;
  border-radius: 0.5rem;

  
}


.dl_list {
align-content: center;
text-indent: 0px;
background: #000000;
box-shadow: inset 0 3px 10px rgba(0,0,0,.85);
-webkit-box-shadow: inset 0 3px 10px rgba(0,0,0,.85);
-moz-box-shadow: inset 0 3px 10px rgba(0,0,0,.85);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-scrollbar-witdth: 12px;
font-family: helvetica;
color: #000000;
text-decoration: none;
list-style-type: none;
list-style-position:inside;
padding:0 0 0 0px;
overflow:scroll;
 display: flex;
    flex-wrap: wrap;
    justify-content: center
                
}

.sel_list {
align-content: center;
text-indent: 0px;
background: #000000;
box-shadow: inset 0 3px 10px rgba(0,0,0,.85);
-webkit-box-shadow: inset 0 3px 10px rgba(0,0,0,.85);
-moz-box-shadow: inset 0 3px 10px rgba(0,0,0,.85);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-scrollbar-witdth: 12px;
font-family: helvetica;
color: #000000;
text-decoration: none;
list-style-type: none;
list-style-position:inside;
padding:0 0 0 0px;
overflow:scroll;
 display: flex;
    flex-wrap: wrap;
    justify-content: center
                
}

.seldropt {
   /*  height: 5.85rem; */
      width: 9.12rem;
  	aspect-ratio : 14/9;
 /*   padding-top: 64.28%; */
    margin: 0.25rem 0.25rem 0.25rem 0.25rem;
}


.seldropt.cl_choosen div {
    position: absolute;
    background-image: url(SVG/circle-outline.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: 0.5rem 0.5rem;
    height: 0.5rem;
    width: 0.5rem;
    filter: invert(1.0);
    /* cursor: pointer; */
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    margin: 0.4rem 0.45rem;
    z-index: 5;
}

.seldropt.cl_censured div {
    position: absolute;
    background-image: url(SVG/eye-blocked.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: 0.5rem 0.5rem;
    height: 0.5rem;
    width: 0.5rem;
    filter: invert(1.0);
    /* cursor: pointer; */
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    margin: 0.4rem 0.45rem;
    z-index: 5;
}

span.seldropt a {
 list-style-type: none;
border: 1px solid #ffffff;
border-radius: 0.5rem;
opacity:50%;
}

span.seldropt.selected a {
 list-style-type: none;
border: 1px solid #ffff46;
border-radius: 0.5rem;
opacity:100%;
}

.location {
	align-content: center;
}

#cameo-calendar {
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 0.75rem;
}
 
::-webkit-scrollbar-button {
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,50.3); 
    border-radius: 0.5rem;
}
 
::-webkit-scrollbar-track {
	background: #111111;
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,5.3); 
    border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb {
    background: #333333;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 50.75);
}
 

::-webkit-scrollbar-corner {
    border-radius: 0.5rem;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}


#####################################################################################

#select_datepicker {
	position: absolute; 
	top:35px;
  	left: 0; 
  	right: 0; 
  	margin-left: auto; 
  	margin-right: auto; 
	font-family:Verdana, Arial, sans-serif;
	font-size:0.7em;
	text-align: center; 
	color: #999999;
	border-radius: 8px;
    background-color: #333333;
    background: transparent;
    width: 80px;
    padding: 0px;
    height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    visibility:hidden;
    z-index:0;
    }


#datepicker {
	position: absolute; 
	visibility:hidden;
	top:35px;
  	left: 0; 
  	right: 0; 
  	margin-left: auto; 
  	margin-right: auto; 
	font-family:Verdana, Arial, sans-serif;
	font-size:0.7em;
	text-align: center; 
	color: #999999;
	border-radius: 8px;
    background-color: #333333;
    background: transparent;
    width: 60px;
    padding: 15px;
    height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display:block;
    z-index:1010;
    }




/*############################################################################################
### scene select #### */



.selectscene div li {
/*	font-family:Verdana, Arial, sans-serif;
	font-size:0.5em;*/
	text-align: center; 
	display: block;
	float: left;
	list-style-type: none;
	list-style: none;
	line-height:200%;
}

/*  #feedback { font-size: 1.0em; } */
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white;font-size: 1.3rem; font-style:normal; font-weight:600; text-align: center; }
  #selectable .ui-selected-close { background: #1e1e1e; color: white; cursor: pointer;}
  #selectable { list-style-type: none; margin: 5; padding: 0; width: inherit; z-index:2147483648;}
  #selectable li {
  line-height:200%; 
  vertical-align:middle!important; 
  overflow:hidden; 
  border-radius: 0.25rem;
   margin-top: 1.0rem; 
   margin: 0.1875rem; 
   padding: 1px; 
   float: left; 
   width: 4.875rem; 
   height: 3.06rem; 
   font-size: 1.3rem; 
   font-style:normal; 
   font-weight:600; 
   text-align: center; 
   z-index:10;
}

  #lselectable .ui-selecting { background: #FECA40; }
  #lselectable .ui-selected { background: #F39814; color: white;font-size: 1.3rem; font-style:normal; font-weight:600; text-align: center; }
  #lselectable .ui-selected-close { background: #1e1e1e; color: white; cursor: pointer;}
  #lselectable { list-style-type: none; margin: 5; padding: 0; width: inherit; z-index:2147483648;}
  #lselectable li {
/*  line-height:200%;  */
  vertical-align:middle!important; 
  overflow:hidden; 
  border-radius: 0.25rem;
   margin-top: 1.0rem; 
   margin: 0.1875rem; 
   padding: 1px; 
   float: left; 
   width: 14.875rem; 
   height: 3.06rem; 
   font-size: 1.175rem; 
   font-style:normal; 
   font-weight:600; 
   text-align: center; 
   z-index:10;
}





.cameo_speed {
    margin: 0px;
    height: 2.5rem;
    width: 2.5rem;
}

.cameo_time  {
    box-sizing: content-box;
    color: #fff;
    font-size: 0,6875rem;
    font-weight: bold;
    height: 1.5rem;
    overflow: hidden;
    padding: 0.75rem 0rem 0;
    text-align: center;
    width: auto;
    z-index:5;
}

.cameo_time p {
	border: 0;
	font-family: inherit;
	font-size: 75%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0.05rem;
	vertical-align: baseline;
	color: #fff;
}

.cameo-project-icon {
    background-image: url(SVG/047-stack.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.2rem);
}

.cameo-filetype-icon {
    background-image: url(SVG/resource_types.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.2rem);
}
.cameo-calendar-icon {
    background-image: url(SVG/cameo-calendar.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.2rem);
}
.cameo-calendar-menu-icon {
    background-image: url(SVG/cameo-calendar.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.2rem);
}
.cameo-scene-menu-icon {
    background-image: url(SVG/cameo-clipboard.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.2rem);
}

.cameo-location-menu-icon{
    background-image: url(SVG/cameo-location.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.0rem;
    filter: invert(1.0);
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.26rem);
}

.cameo-project-icon:hover {
    background-image: url(SVG/047-stack.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    fill: #DA4567;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
      cursor: pointer;
      margin: 3px 3px;
    transform: translateY(0.2rem);
  
}
.cameo-signout {
    background-image: url(SVG/277-exit-inv.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.2rem;
    width: 1.2rem;
 /*   filter: invert(1.0);*/
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.2rem);
}

.cameo-signout:hover {
    background-image: url(SVG/277-exit-inv.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: 1.3rem 1.3rem;
    background-repeat: no-repeat;
    fill: #DA4567;
    height: 1.3rem;
    width: 1.3rem;
/*    filter: invert(1.0);*/
      cursor: pointer;
      margin: 3px 3px;
    transform: translateY(0.2rem);
  
}

.cameo-stills-icon {
    background-image: url(SVG/images-30.svg);
   background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.2rem;
    width: 1.1rem;
    filter: invert(1.0);
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.2rem);
}

.cameo-stills-icon:hover {
    background-image: url(SVG/images-30.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    fill: #DA4567;
    height: 1.2rem;
    width: 1.2rem;
/*    filter: invert(1.0);*/
      cursor: pointer;
      margin: 3px 3px;
    transform: translateY(0.2rem);
  
}

.cameo-dailies-icon {
    background-image: url(SVG/video-camera.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.2rem;
    width: 1.2rem;
    filter: invert(1.0);
    cursor: pointer;
    outline: none;
    border-style: none;
    background-color: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    margin: 3px 3px;
    transform: translateY(0.2rem);
}


.cameo-cloud-download {
    background-image: url(SVG/195-cloud-download.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.2rem);
}

.cameo-cloud-download:hover {
    background-image: url(SVG/195-cloud-download.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    fill: #DA4567;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
    cursor: pointer;
    margin: 3px 3px;
    transform: translateY(0.2rem);
  
}

.cameo-update_clips {
    background-image: url(SVG/database-reload-icon.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.2rem);
}

.cameo-update_clips:hover {
    background-image: url(SVG/database-reload-icon.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    fill: #DA4567;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
    cursor: pointer;
    margin: 3px 3px;
    transform: translateY(0.2rem);
  
}

.cameo-publish_clips {
    background-image: url(SVG/eye-plus.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.2rem);
}

.cameo-publish_clips:hover {
    background-image: url(SVG/eye-plus.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    fill: #DA4567;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
    cursor: pointer;
    margin: 3px 3px;
    transform: translateY(0.2rem);
  
}

.cameo-upload_script {
    background-image: url(SVG/rules-icon.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.2rem);
}

.cameo-upload_script:hover {
    background-image: url(SVG/rules-icon.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    fill: #DA4567;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
    cursor: pointer;
    margin: 3px 3px;
    transform: translateY(0.2rem);
  
}


.mejs__controls {
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 4.5rem;
    left: 0;
    list-style-type: none;
    margin: 0;
    padding: 0 0.625rem;
    position: absolute;
    width: 100%;
    z-index: 3;
}

.mejs__time-total, 
.mejs__time-buffering, 
.mejs__time-loaded, 
.mejs__time-current,  
.mejs__time-hovered, 
.mejs__time-float-corner, 
.mejs__time-marker {
    border-radius: 0.125rem;
    cursor: pointer;
    display: block;
    height: 0.325rem;
    position: absolute;
    transform: translateY(0.25rem);
}

.mejs__time-handle-content {
    border: 0.25rem solid rgba(205, 205, 205, 0.9);
    border-radius: 50%;
    height: 1.155rem;
    left: -0.4375rem;
    top: -0.7rem;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    width: 1.155rem;
    
}

.mejs__time {
    box-sizing: content-box;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: bold;
    height: 1.5rem;
    overflow: hidden;
    padding: 1rem 0.375rem 0;
    padding-top: 1rem;
    padding-right: 0.075rem;
    padding-bottom: 0px;
    padding-left: 0.075rem;
    text-align: center;
    width: auto;
}

.mejs__time-float, .mejs__time-float-current {
	display:none;
    border-radius: 0.125rem;
    cursor: pointer;
    display: block;
    height: 1.325rem;
    position: absolute;
    transform: translateY(0.25rem);
}

.mejs__time-float-current {
    display: block;
    left: 0;
    margin: 0.125rem;
    text-align: center;
    width: 1.875rem;
}

.mejs__time-float-corner {
    border: solid 0.3125rem #eee;
    border-color: #eee transparent transparent;
    border-radius: 0;
    display: block;
    height: 0;
    /* left: 50%; */
    line-height: 0;
    position: absolute;
    top: 100%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
}


.mejs__button > button {
background-color: transparent;
border: 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 0;
height: 1.225rem;
line-height: 0;
margin: 0.625rem 0.275rem;
overflow: hidden;
padding: 0;
position: absolute;
text-decoration: none;
width: 1.225rem;
}

.mejs__fforward-button > button,
.mejs-fforward-button > button,
.mejs__next-button > button,
.mejs-next-button > button,
.mejs__prev-button > button,
.mejs-prev-button > button {
    background: url('SVG/playlist-controls.svg') transparent no-repeat;
    background-size: auto auto;
}
.mejs__next-button > button,
.mejs-next-button > button {
    background-image: url(SVG/next.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
}
.mejs__prev-button > button,
.mejs-prev-button > button {
    background-image: url(SVG/previous.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
}

.mejs__fforward-button > button,
.mejs-fforward-button > button {
   background-image: url(SVG/forward.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
}

/*
.mejs__playlist-button > button,
.mejs-playlist-button > button {
    background-image: url(images/icons8-video-playlist-24.png);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
}
*/

.mejs__playpause-button > button,
.mejs__play,
.mejs__pause {
	 margin: 0.25rem;
}

.mejs__button svg {
    fill: transparent;
    height: 1.1rem;
    width: 1.1rem;
}
.mejs__icon-play {
background-image: url(SVG/play.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
}

.mejs__icon-pause {
background-image: url(SVG/pause.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
}
/*
.mejs__fullscreen-button > button {
	background: transparent url('./Cameo_mejs-controls.svg');
    background-position: -190px -27px;
}
*/
.mejs__fullscreen-button > button {
	background-image: url(IcoMoon/SVG/138-enlarge.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
    
}

.mejs__container-fullscreen .mejs__fullscreen-button > button {
	background-image: url(IcoMoon/SVG/139-shrink.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
    
}




.mejs__clapper-button > button,
.mejs_clapper-button > button {
	background: url('./Cameo_mejs-controls.svg') transparent no-repeat;
	background-position: -6.87rem -1.76rem;
	background-size: auto auto;
	background-repeat: no-repeat;
	
}


.mejs__location-button > button,
.mejs_location-button > button {
    background-image: url(SVG/cameo-location.svg);
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.1rem;
    width: 1.1rem;
    filter: invert(1.0);
      cursor: pointer;
     outline: none;
     border-style:none;
     background-color:transparent;
     box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	margin: 3px 3px;
    transform: translateY(0.4rem);
}

.mejs__calendar-button > button,
.mejs_calendar-button > button {
    background: url('./Cameo_mejs-controls.svg') transparent no-repeat;
	background-position: -5.13rem -1.73rem;
	background-size: auto auto;
	background-repeat: no-repeat;

}

.cameo__overlay-calendar-button > button,
.cameo_overlay-calendar-button > button {
    background-image: url('SVG/cameo-calendar.svg');
    background-color: rgba(10, 10, 10, .0);
    background-repeat: no-repeat;
    filter: invert(1.0);
    margin: 1.875rem;
    height: 2.0rem;
    width: 2.0rem;
    left:25%;
    padding 0.5rem 0.5rem;
     cursor: pointer;
     outline: none;
     border-style:none;

}


.cameo__overlay-play-button > button,
.cameo_overlay-play-button > button {
    background-image: url('SVG/play.svg');
    background-size: contain;
    background-color: rgba(10, 10, 10, .0);
    background-repeat: no-repeat;
    filter: invert(1.0);
    margin: 1.874rem;
    height: 1.5rem;
    width: 1.5rem;
    left:25%;
    padding 0.5rem 0.5rem;
     cursor: pointer;
     outline: none;
     border-style:none;

}

.mejs__overlay-button, .mejs__overlay-button svg {
    height: 3rem;
    width: 3rem;
}

.mejs__overlay-loading, .mejs__overlay-loading svg {
    height: 3rem;
    width: 2.3rem;
}
.mejs__overlay-loading svg {
	display:none;
    height: 3rem;
    width: 3rem;
}
.mejs__overlay-loading-bg-img {
	background-image: url('IcoMoon/SVG/131-spinner9.svg');
	background-size: contain;
    background-color: rgba(10, 10, 10, .0);
    background-repeat: no-repeat;
    filter: invert(1.0);
    -webkit-animation: mejs__loading-spinner 1s linear infinite;
    animation: mejs__loading-spinner 1s linear infinite;
    display: block;
    height: 3rem;
    width: 3rem;
    z-index: 1;
}

.mejs__addmarker-button > button,
.mejs_addmarker-button > button {
    background-image: url('SVG/bubbles.svg');
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    filter: invert(1.0);
/*    margin: 1.874rem; */
    height: 1.0rem;
    width: 1.0rem;
/*    left:25%;
    padding 8px 8px; */
    cursor: pointer;
    outline: none;
    border-style:none;
}


.mejs__tc-button > button,
.mejs_tc-button > button {
    background-image: url('IcoMoon/SVG/083-stopwatch.svg');
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    background-repeat: no-repeat;
    filter: invert(1.0);
/*    margin: 1.874rem; */
    height: 1.0rem;
    width: 1.0rem;
/*    left:25%;
    padding 8px 8px; */
    cursor: pointer;
    outline: none;
    border-style:none;
}


.mejs__camerainfo-button > button,
.mejs_camerainfo-button > button {
    background-image: url('SVG/info.svg');
    background-color: rgba(10, 10, 10, .0);
    background-size: contain;
    filter: invert(1.0);
/*    margin: 1.874rem; */
    height: 1.0rem;
    width: 1.0rem;
/*    left:25%;
    padding 8px 8px; */
    cursor: pointer;
    outline: none;
    border-style:none;
}

.mejs__overlay-clapper {
    cursor: pointer;
}

.mejs__overlay-calendar-button {
    cursor: pointer;
}

.cameo_overlay {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    height: 80%;
    z-index:4;
}

.cameolayer_info {
	font-size:0.8rem;
	align-items: top;
	height: 20%;
    width: 100%;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	background-color: #333333;
    background:-webkit-linear-gradient(top,#000,#000 25%,transparent);
    background:linear-gradient(180deg,#000 0,#000 25%,transparent);
    -webkit-box-pack: Left;
    -webkit-justify-content: Left;
    -ms-flex-pack: center;
    justify-content: Left;
    position: absolute;
    -webkit-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
     z-index:2;
}

.cameoworklayer {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.cameoworklayer_info {
	align-items: top;
	height: 100%;
    width: 100%;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	background-color: #333333;
    -webkit-box-pack: Left;
    -webkit-justify-content: Left;
    -ms-flex-pack: center;
    justify-content: Left;
    position: absolute;
    overflow: scroll;
     z-index:6;
}

.cameosmallworklayer_info {
	align-items: top;
	height: 90%;
	margin: 0.2 0.2 0.2 0.2;
   /*    width: fit-content; */
    width: 38ch;

    transition: 0.5s;
    -webkit-transition: 0.5s;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
	background-color: #333333;
    -webkit-box-pack: Left;
    -webkit-justify-content: Left;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    overflow: scroll;
     z-index:6;
}



.cameosmallworklayer_info-hidden {
    right: -33.33333%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.CameraInfo {
/*	width: 98vh; */
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    tr:nth-child(even) {
  		background-color: rgba(150, 150, 150, 0.4);
	}
	font-size: 0.8rem;
	tr { line-height: 1.5em }
}

.CameraInfoLayer a {
	font-size: 0.8rem;
	color: white;
	position: absolute;
	top: 0;
    padding: 0.5rem;
    background: #222;
    line-height: 0.3rem;
    text-decoration: none;
}



.wm {
	align-items: center;
	height: 20%;
    width: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
/*	background-color: #333333;
    background:-webkit-linear-gradient(top,#000,#000 25%,transparent);
    background:linear-gradient(180deg,#000 0,#000 25%,transparent);
    -webkit-box-pack: Left;
    -webkit-justify-content: Left; */
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute; 
    -webkit-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
     z-index:8;
}

.cameotclayer {
    font-size: 1.1rem;
    align-content: center;
    text-align: center;
    align-items: top;
    height: 1.6rem;
    width: 9rem;
    max-width: 9rem;
    max-height: 1.6rem;
    background-color: #333333;
    margin-left: auto;
    margin-right: auto;
    padding: 0.2rem;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    z-index: 4;
}

.cameolayer {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: Left;
    -webkit-justify-content: Left;
    -ms-flex-pack: center;
    justify-content: Left;
	height: 90%;
    position: absolute;
   
}
.cameocontrols {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    height: 70%;
    z-index:3;
}
.cameocontrolfr {
	position: absolute; 
  	left: 0; 
  	margin-left: auto; 
  	margin-right: auto; 
    padding: 1.0rem;
    display: block;
    height: 80%;
    width: 15%;
    border-radius: 40%;;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
    background-color:transparent;
    z-index:5;
  }

.cameocontrolplay {
	position: absolute; 
  	left: 0; 
  	right: 0; 
  	margin-left: auto; 
  	margin-right: auto; 
  	border: 0px solid #ff0046;
  	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
    padding: 1.0rem;
    display: block;
    height: 80%;
    width: 70%;
    background-color:transparent;
  }

.cameocontrolff {
	position: absolute; 
 	right: 0; 
  	margin-left: auto; 
  	margin-right: auto; 
  	border: 0px solid #ff0046;
  	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
    padding: 1.0rem;
    display: block;
    height: 80%;
    width: 15%;
    border-radius: 80%;
    background-color:transparent;
    z-index:5;
  }


			/* these are totally optional */

			/* hides focus marker around control buttons */
			.mejs-controls .mejs-button button:focus {
				outline: none;
			}

			/* replace svg with our png - chrome 36 has issues with bg position and svg (play arrow invisible) */
			.mejs-overlay-button {
				background-image: url(./bigplay.png);
			}
			/* makes loader bg transparent, not black, we also supply a different loading gif in demo/ */
			.mejs-overlay-loading {
				background: none;
			}
    tr:nth-child(even) {
  		background-color: rgba(150, 150, 150, 0.4);
	}	
	

	
/* Small Phone Portrat */
@media screen and (min-width: 300px) and (max-width: 450px) and (min-height: 500px) {


.player1 {
/*	height:98dvh !important;  */
/*    max-height: 100% !important; */
    width: 98dvw !important;
} 
/* 
body {
	font-size: 1.1rem;
}
*/
.container {
    max-width: 98vw;
    width: 98vw;
    display: flex;
    flex-flow: column;
    flex-direction: column;
    height: 98vh;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.container .row.ListItems {
	
    text-decoration: none;
    overflow-x: scroll;
}

.cameolayer_info {
	font-size: 0.65rem;
    padding-top: 0.0rem;
}


.cameosmallworklayer_info {
 /*   padding-top: 14vh; */
    margin: 0.2 0.2 0.2 0.2;
    height: 100%;
    width: fit-content;
 
}
.CameraInfo {
	height:fit-content;
    font-size: 0.6rem;
    tr:nth-child(even) {
  		background-color: rgba(150, 150, 150, 0.4);
	}
	tr { line-height: 1.6em; }
}
}

/* small Phone Landscape */
@media screen and (max-width: 860px) and (min-width: 500px) and (min-height: 270px) and (max-height: 520px) {

.player1 {
	height:98dvh !important; 
    max-height: 100% !important;
    width: 98dvw !important;
} 

body {
	font-size: 1.1rem;
}

.container {
    max-width: 98vw;
    display: flex;
    flex-flow: column;
    flex-direction: column;
    height: 98vh;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.cameolayer_info {
	font-size: 0.75rem;
    padding-top: 0.0rem;
}


.container .row.ListItems {
	display:none;
    text-decoration: none;
    overflow-x: scroll;
}

.cameosmallworklayer_info {
/*	padding-top: 14vh; */
    margin: 0.2 0.2 0.2 0.2;
    height: 100%;
/*    width: fit-content; */
    width: 38ch;
 
}
.CameraInfo {
	height:fit-content;
    font-size: 0.8em;
        tr:nth-child(even) {
  		background-color: rgba(150, 150, 150, 0.4);
	}
	tr { line-height: 1.0em; }
}

}

/* IPAD Landscape */
@media screen and (max-width: 1200px) and (min-width: 1100px) and (min-height: 700px) and (max-height:820px) {

.container {
    max-width: 98vw;
    display: flex;
    flex-flow: column;
    flex-direction: column;
    height: 98vh;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.container .row.media-wrapper {
	padding-top: 5vh;
    width: 98vw;
    align-content: center;
    min-width: 85vw;
    height: 98vh;
    flex: 0 1 auto;
}


.menu-table {
    width: 98vw;
    table-layout: auto;
    position: absolute;
    z-index: 3;
}

.cameolayer_info {
	font-size: 0.85rem;
    padding-top: 2.0rem;
}

.container .row.ListItems {
    margin-top: 0.5em;
    text-decoration: none;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 98vw;
}

.list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    flex-direction: row;
}

.dropt img {
    width: inherit;
    max-width: 11vw;
    border-radius: 0.5rem;
}

.mejs__controls {
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 3.5rem;
    left: 0;
    list-style-type: none;
    margin: 0;
    padding: 0 0.625rem;
    position: absolute;
    width: 100%;
    z-index: 3;
}

.cameosmallworklayer_info {
	margin: 0.2 0.2 0.2 0.2;
	height: 100%;
   /*    width: fit-content; */
    width: 38ch;

 
}
.CameraInfo {
	height:fit-content;
    font-size: 0.6rem;
    tr:nth-child(even) {
  		background-color: rgba(150, 150, 150, 0.4);
	}
	tr { line-height: 1.6em; }
}
}

		
/* Small Labtop */
@media screen and (max-width: 1440px) and (min-width: 1000px) and (max-height: 830px) {
.greeting::before {
	content: "Hi - ";
}
.container {
 max-width: 98vw;
    display: flex;
    flex-flow: column;
    flex-direction: row-reverse;
    height: 98vh 
    align-content: center;
    flex-wrap: nowrap;
    justify-content: left;
} 

.container .row.media-wrapper {
    width: 95dvw;
    min-width: 85vw;
    height: 90dvh;
    flex: 0 1 auto;
}
.container .row.ListItems {

    width: 12vw;
    min-width:12vw;
    height: 98vh;
}

cameosmallworklayer_info {
	margin: 0.2 0.2 0.2 0.2;
	height: 100%;
   /*    width: fit-content; */
    width: 38ch;

 
}
.CameraInfo {
	height:fit-content;
    font-size: 0.9rem;
	tr { line-height: 1.4rem; }
}
}

/* IPAD Portrat */
@media screen and (max-width: 896px) and (min-width: 766px) and (min-height: 1000px) {

body {
	font-size: 1.1rem;
}



.container {
    max-width: 98vw;
    width: 98vw;
    display: flex;
    flex-flow: column;
    flex-direction: column;
    height: 98vh;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.container .row.ListItems {

    text-decoration: none;
    overflow-x: scroll;
}

.cameosmallworklayer_info {
/*    padding-top: 14vh; */
    margin: 0.2 0.2 0.2 0.2;
    height: 100%;
    /*    width: fit-content; */
    width: 38ch;

 
}
.CameraInfo {
	height:fit-content;
    font-size: 0.6rem;
    tr:nth-child(even) {
  		background-color: rgba(150, 150, 150, 0.4);
	}
	tr { line-height: 1.6em; }
}
}

/* IPAD pro Portrat */
@media screen and (max-width: 950px) and (min-width: 888px) and (min-height: 1000px) {

.container {
    max-width: 98vw;
    display: flex;
    flex-flow: column;
    flex-direction: column;
    height: 98vh;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.container .row.ListItems {

    text-decoration: none;
    overflow-x: scroll;
}

.cameosmallworklayer_info {
/*	padding-top: 14vh; */
    margin: 0.2 0.2 0.2 0.2;
    height: 100%;
    /*    width: fit-content; */
    width: 38ch;

 
}
.CameraInfo {
	height:fit-content;
    font-size: 0.8em;
        tr:nth-child(even) {
  		background-color: rgba(150, 150, 150, 0.4);
	}
	tr { line-height: 1.0em; }
}

}

/* IPAD Landscape */
@media screen and (max-width: 1200px) and (min-width: 1100px) and (min-height: 700px) and (max-height:820px) {

.container {
    max-width: 98vw;
    display: flex;
    flex-flow: column;
    flex-direction: column;
    height: 98vh;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.container .row.media-wrapper {
	padding-top: 5vh;
    width: 98vw;
    align-content: center;
    min-width: 85vw;
    height: 98vh;
    flex: 0 1 auto;
}


.menu-table {
    width: 98vw;
    table-layout: auto;
    position: absolute;
    z-index: 3;
}

.cameolayer_info {
	font-size: 0.85rem;
    padding-top: 2.0rem;
}

.container .row.ListItems {
    margin-top: 0.5em;
    text-decoration: none;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 98vw;
}

.list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    flex-direction: row;
}

.dropt img {
    width: inherit;
    max-width: 11vw;
    border-radius: 0.5rem;
}

.mejs__controls {
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 3.5rem;
    left: 0;
    list-style-type: none;
    margin: 0;
    padding: 0 0.625rem;
    position: absolute;
    width: 100%;
    z-index: 3;
}

.cameosmallworklayer_info {
	margin: 0.2 0.2 0.2 0.2;
	height: 100%;
    /*    width: fit-content; */
    width: 38ch;

 
}
.CameraInfo {
	height:fit-content;
    font-size: 0.6rem;
    tr:nth-child(even) {
  		background-color: rgba(150, 150, 150, 0.4);
	}
	tr { line-height: 1.6em; }
}
}

/* IPAD pro Landscape */
@media screen and (max-width: 1366px) and (min-width: 1300px)  and (min-height: 900px) and (max-height:1024px) {

html {
	font-size:1.2em;
}
.container {
    max-width: 98dvw;
    display: flex;
    flex-flow: column;
    flex-direction: column;
    height: 95dvh;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.container .row.media-wrapper {
	padding-top: 4dvh; 
    width: 98dvw;
    align-content: center;
    min-width: 98dvw;
    height: 80dvh;
    flex: 0 1 auto;
}

.menu-table {
    width: 98dvw;
    table-layout: auto;
    position: absolute;
    z-index: 3;
}

.cameolayer_info {
	font-size: 0.85rem;
    padding-top: 2.0rem;
}

.container .row.ListItems {
    margin-top: 0.5em;
    text-decoration: none;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 98dvw;
}

.list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    flex-direction: row;
    padding-bottom: 2dvh;
}

.dropt {
    /* height: 5.85rem; */
    width: 9.5rem;

    margin: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.dropt img {
    width: inherit;
    max-width: 13dvw;
    border-radius: 0.5rem;
}

.cameosmallworklayer_info {
	margin: 0.2 0.2 0.2 0.2;
	height: 100%;
    /*    width: fit-content; */
    width: 38ch;

 
}

.mejs__controls {
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 3.0rem;
    left: 0;
    list-style-type: none;
    margin: 0;
    padding: 0 0.625rem;
    position: absolute;
    width: 100%;
    z-index: 3;
} 

.CameraInfo {
	height:fit-content;
    font-size: 0.6rem;
    tr:nth-child(even) {
  		background-color: rgba(150, 150, 150, 0.4);
	}
	tr { line-height: 1.4em; }
}
}







