.mainContainerVideo{
	width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;

    position: absolute;
}
.areaOut{
	width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    background-color: transparent;
    top: -50px;
}
.nopointerevents{
	pointer-events: none;
}
.controllerContainer{
	position: absolute;
    width: 500px;
    height: 460px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: transparent;
}
.controller.init{
	transform: scale(0) !important;
}
.controller{
	position: relative;
	width: 400px;
	height: 400px;
	top: 200px;
	left: 200px;
	padding: 10px;
}
.controller.modo2{
	background: rgba(0,0,0,.5);
	border-radius: 220px;
}
.controllerContainer.big{
	transform: translate(-50%,-50%) scale(1) 
	top: 50%;
	position: fixed;
}
.controllerContainer.pq{
	transform: translate(-50%,-50%) scale(.25) !important;
	top: 100%;
}
.svgContainer{
	position: absolute;
    width: 390px;
    padding: 15px;
    height: 390px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 400px;
    
}
.svgContainer.modo2{
	opacity: 0.85;
}
.svgContainer2{
	position: relative;
    /* padding: 5px; */
    /* box-sizing: border-box; */
    width: 100%;
    height: 100%;
    border-radius: 400px;
}
svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.hotspot{
	position: absolute;
	top: -10px;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-top: 5px;
	border-radius: 30px;
	background-color: rgba(255,255,255,1);;
	cursor: pointer;
}
.hotspot .c {
	position: absolute;
	width: 600%;
	height: 600%;
	left: 50%;
	top: 50%;
	border-radius: 30px;
	/*background-color: rgba(255,255,255,.25);*/
	background-color: rgba(0,0,0,.25);
	border: 1px solid white;
	transform: translate(-50%,-50%);
	opacity: 0;
}
.anim{
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .25s linear;
}
.hotspot:hover{
	/*background-color: #b99269;*/
	background-color: #fff;
}
.hotspot:hover .c{
	opacity: 1;
	width: 400%;
	height: 400%;
}
/*.vjs-volume-panel,.vjs-progress-control,.vjs-fullscreen-control,.vjs-remaining-time{*/
.vjs-volume-panel,.vjs-fullscreen-control,.vjs-remaining-time{
	display: none !important;
}

.controller {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 10px;
	margin-left: -210px;
	margin-top: -210px;
	transform: scale(0);
}
.video-js .vjs-big-play-button{
	outline: 0;
	top: 50%;
}
.video-js.fixed .vjs-control-bar{
	width: 100%;
	max-width: 100%;
	bottom: -10px;

    bottom: 0px;
    height: 20px;
}
.video-js button.vjs-play-control{
	position: absolute;
	top: -45px;
	left: 10px;
	outline: 0;
}
.video-js .vjs-progress-control .vjs-progress-holder{
	margin:0;
	height: 10px;
	height: 100%;
}
.video-js .vjs-slider{
	background-color: rgba(0, 0,0, .75);
}
.video-js .vjs-play-progress:before{
	top: -2px;
	font-size: 1.5em;
	content:'';
}
.controllerArea{
	position: absolute;
	bottom: 0px;
	width: 120px;
	left: 50%;
	transform: translateX(-50%);
	height: 50px;
	background-color: transparent;
	    width: 60%;
    max-width: 500px;
}
.controllerLinea{
	position: fixed;
	width: 100%;
	/*margin-top: 10px;*/
	top: 50%;
	height: 1px;
	background-color: rgba(255,255,255,0.5);
	opacity: 1;
}
.tituloController{
	color: white;
    font-family: Arial;
    position: absolute;
    top: 50%;
    width: 100%;
    max-width: 170px;
    margin-top: -8px;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    /*background: red;*/
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
.transparent{
	opacity: 0 !important;
}
.novisible{
	display: none !important;
}
.controllerThumbnails{
	font-family: 'Helvetica Neue', serif;
	position: absolute;
    bottom: -60px;
    width: 60%;
    max-width: 500px;
    left: 50%;
    transform: translateX(-50%);
    height: 60px;
    background-color: rgba(0,0,0,.5);
    font-size: 12px;
    display: flex;
    flex-direction: row-reverse;
}
.controllerThumbnails.init{
	bottom: -40px;
}
.controllerThumbnails.big{
    bottom: 0px;
}
.thumbnail{
	width: 33%;
	cursor: pointer;
	position: relative;
	display: flex;
	justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    text-align: center;
    padding: 0px;
    background-size: cover;
}

.thumbnail .bg{
	position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    opacity: 0;
}
.thumbnail .text{
	position: absolute;
}
.thumbnail div{
	pointer-events: none;
}
.thumbnail:hover .bg{
	opacity: 1;
}