.embed-video {
      background-color: black;
    }

    .embed-video-play-btn {
        z-index: 10;
        top: 50%;
        left: 50%;
        position: absolute;
        border-style: solid;
        border-width: 20px 0 20px 40px;
        border-color: transparent transparent transparent white;
    }
    
    .embed-video-pause-btn {
        display:none;
        z-index: 10;
        top: 50%;
        left: 50%;
        position: absolute;
        height: 40px;
        border-style: double;
        border-width: 0px 0px 0px 40px;
        border-color: white;
    }

    .embed-video-restart-btn {
        z-index: 10;
        top: 50%;
        left: 50%;
        position: absolute;
        height: 40px;
        width: 40px;
    }

    .embed-video-restart-btn:after {
	    content: '\0021BB';
	    z-index: 8;
	    top: 50%;
	    left: 50%;
	    position: absolute;
	    border: 1px solid white;
	    padding: 60px;
	    margin: -60px;
	    margin-left: -85px;
	    background-color: #02020233;
    }
    
    .embed-video-btn:hover {
        cursor:pointer
    }
    
    .embed-video-btn:after {
	    content: '';
	    z-index: 8;
	    top: 50%;
	    left: 50%;
	    position: absolute;
	    border: 1px solid white;
        padding: 60px;
        margin: -60px;
        margin-left: -80px;
	    background-color: #02020233;
    }

    .embed-play-pause-btn {
        float:left;
        border: 1px solid black;
        margin: 0;
        padding: 10px;
        line-height: 1;
        cursor: pointer;
        height: 35px;
        background: #fff;
	    color: #020202;
	    font-weight: 600;
	    width: 200px;
    }
    
    .embed-sound-btn {
        width:50px;
        float:left;
        border: 1px solid black;
        border-left: none;
        margin: 0;
        padding: 0;
        line-height: 1;
        height: 35px;
        text-align: center;
    	background: #fff;
    	cursor: pointer;
    }
    
    .embed-sound-btn img {
        width:40%;
        padding: 5px;
    }

  	.embed-sound-btn i {
      	line-height: 1.2;
      	font-size: 1.5em;
      	color: #020202;
          padding: 2px;
  	}
    
    .embed-progress-bar-container {
    width: auto;
    margin-top: 1px;
    margin-left: 250px;
    cursor: pointer;
    }

    .embed-progress-bar {
        width: calc(100% - 1px);
        background-color: #ffffff;
        outline: 1px solid #000000;
    }

    .embed-current-progress {
        width: 1%;
        height: 10px;
        background-color: #000000;
    }

    .tooltip-container {
        position: relative
    }

    .tooltip-span {
        display: none;
        position: absolute;
        bottom: 0px;
        padding: 0px 5px;
        background-color: black;
        color: white;
    }

    .slidecontainer {
        position: absolute;
        border: 1px solid black;
        border-left: none;
        transform-origin: top left;
        transform: rotate(-90deg);
	    background: none;
	    border: none;
		overflow: hidden;
	    bottom: -17px;
        margin-left: -1px;
	    height: 51px;
	    display:none
    }

     .myRange {
      -webkit-appearance: none !important;
      width: 100% !important;
      margin: 0px !important;
      height: 100% !important;
    }
    .myRange:focus {
      outline: none !important;
    }
    .myRange::-webkit-slider-runnable-track {
      width: 100% !important;
      height: 100% !important;
      cursor: pointer !important;
      background: white !important;
      border: 1px solid black !important;
      border-radius: 0 !important;
    }
    .myRange::-webkit-slider-thumb {
      border: 1px solid #000000 !important;
      height:  100% !important;
      width: 16px !important;
      border-radius: 0 !important;
      background: black !important;
      cursor: pointer !important;
      -webkit-appearance: none !important;
      margin-top: 0px !important;
    }
    .myRange:focus::-webkit-slider-runnable-track {
      background: white !important;
    }
    .myRange::-moz-range-track {
      width: 100% !important;
      height: 100% !important;
      cursor: pointer !important;
      /*background: #3071a9;*/
      border-radius: 1.3px !important;
      border: 0.2px solid #010101 !important;
    }
    .myRange::-moz-range-thumb {
      border: 1px solid #000000 !important;
      height: 100% !important;
      width: 16px !important;
      border-radius: 3px !important;
      background: #ffffff !important;
      cursor: pointer !important;
    }
    .myRange::-ms-track {
      width: 100% !important;
      height: 100% !important;
      cursor: pointer !important;
      background: transparent !important;
      border-color: transparent !important;
      border-width: 16px 0 !important;
      color: transparent !important;
    }
    .myRange::-ms-fill-lower {
      background: #2a6495 !important;
      border: 0.2px solid #010101 !important;
      border-radius: 2.6px !important;
    }
    .myRange::-ms-fill-upper {
      background: #3071a9 !important;
      border: 0.2px solid #010101 !important;
      border-radius: 2.6px !important;
    }
    .myRange::-ms-thumb {
      border: 1px solid #000000 !important;
      height: 100% !important;
      width: 16px !important;
      border-radius: 3px !important;
      background: #ffffff !important;
      cursor: pointer !important;
    }
    .myRange:focus::-ms-fill-lower {
      background: black !important;
    }
    .myRange:focus::-ms-fill-upper {
      background: white !important;
    }

  @media screen and (max-width: 767px) {
    .tooltip-span {
        display: none;
    }
  	.embed-play-pause-btn {
  		width:100px; 
  	}
  	.embed-sound-btn {
        display: none;
  		width: 30px;
  	}
  	.slidecontainer {
  		height: 30px;
  		bottom: 0px;
  	}
  	.embed-sound-btn i {
  		font-size: 1.2em;
  		line-height: 1.8;
  	}
  	.embed-progress-bar-container {
        margin-left: 100px;
  	}
  	.embed-video-btn:after {
        padding: 35px;
        margin: -35px;
    	margin-left: -55px;	
  	}
      
    .embed-video-play-btn,
    .embed-video-pause-btn{
        top: 40%;
        left: 45%;
    }
      

  }