@font-face {
    font-family:"Helvetica";
    src: url("../fonts/Helvetica.ttf") format("truetype");
}
@font-face {
    font-family:"Helvetica-Bold";
    src: url("../fonts/Helvetica-Bold.ttf") format("truetype");
}

body{margin:0px;padding:0px;height:100vh;background:url(../images/videoimg.jpg) center no-repeat;background-size:cover;font-family:"Helvetica-bold";}

.videocircle{width: 130px;height: 130px; position: fixed;z-index:999999;right: 10px;bottom: 10px;border: 1px #ccc solid;border-radius: 75px;background: #000;overflow: hidden;}
.videocircle p{color: #fff;position: relative; line-height: 100px; text-align: center; text-shadow: 0 0 2px #ccc;}
.videocircle video{width:100%;height:100%;}
.videoplayerbox{display:none;height: 548px;width: 300px;position: fixed;bottom: 10px;right: 10px;border: 1px #ccc solid;z-index: 999999;background: #fff;overflow: hidden;border-radius: 10px;}
.videoplayerbox.open{display:block;}
.videoplayerbox .closevideobox,button,
.videoplayerbox .closediv{width: 30px;height: 30px;border: 1px #ccc solid;cursor:pointer;border-radius: 15px;text-align: center;line-height: 28px;font-weight: bold;position: absolute;top: 5px;z-index:9;background: #ccc;}
.videoplayerbox .closevideobox:hover,button:hover,.videoplayerbox .closediv:hover{background:#fff;}
.videoplayerbox .closevideobox.active{display:block;right: 10px;}
.videoplayerbox .videobox{display:block;width:100%;height:100%;position:relative;z-index:8;}
.videoplayerbox .videobox video{height:100%;}
.videoplayerbox .videobox button#playbutton{left:10px;}
.fa-play{background:url(../images/play.png) center no-repeat;background-size:20px;width:20px;height:20px;display:block;position:relative;margin:auto;}
.fa-play:hover{background:url(../images/playh.png) center no-repeat;background-size:20px;}

.fa-pause{background:url(../images/pause.png) center no-repeat;background-size:20px;width:17px;height:20px;display:block;position:relative;margin:auto;}
.fa-pause:hover{background:url(../images/pauseh.png) center no-repeat;background-size:20px;}


.videoplayerbox .videobox button#muteplay{left:50px;}
.videoplayerbox .videobox button#muteplay.unmute:after,
.videoplayerbox .videobox button#muteplay.mute:after{content:"";width: 20px;height: 20px; display: block; }
.videoplayerbox .videobox button#muteplay.unmute:after{background:url(../images/speaker.png) center no-repeat;   background-size: cover; }
.videoplayerbox .videobox button#muteplay.mute:after{background:url(../images/mute_sound.png) center no-repeat;background-size: cover;}





.videoplayerbox .threebtn{width: calc(33.3% - 10px);float: left;z-index:10;margin-left:10px; border: 1px #ccc solid; position: absolute; bottom: 5px;border-radius: 5px; background: #fff;height: 60px;transition: all 0.5s ease;}
.videoplayerbox .threebtn .vtitile{display: table;position: relative;width: 100%;height: 100%;}
.videoplayerbox .threebtn .vtitile p{text-align: center;display: table-cell;vertical-align: middle;font-size: 18px;font-weight: bold;}
.videoplayerbox .threebtn.callme{left:0;margin-left:5px;}
.videoplayerbox .threebtn.askquestion{left: calc(33.3% - 5px);}
.videoplayerbox .threebtn.savenow{right:5px;}
.videoplayerbox .threebtn.bgactive{bottom: 0;left: 0;right: 0;width: 100%;height: 100%;z-index: 999;margin: 0;}
.videoplayerbox .threebtn .closediv{visibility:hidden;right:10px;z-index:-1;}
.videoplayerbox .threebtn.bgactive .closediv{transition: all 2s ease;visibility:visible;z-index:1;}





.videolead{position:fixed;left:10px;bottom:5px;z-index:9999999;}
.videolead .vleadbox{width:130px;height:180px;position:relative;border: 4px #000 solid;border-radius: 5px;overflow: hidden;transition: all 2s ease;}
.videolead .vleadbox video{width:100%;height:auto;}
.videolead .vleadbox p{transition: all 0.1s ease;position:absolute;left: 0;right: 0;text-align: center;bottom: 30px;height: 30px;margin: auto;font-size: 24px;font-weight: bold;text-shadow: 1px 1px #020202;color: #fff;}
.videolead .vlclose{position: absolute;right: -10px;top: -10px;z-index: 999;cursor:pointer;background: #ccc;border-radius: 15px;height: 30px;width: 30px;text-align: center;line-height: 30px;font-weight: bold;}
.videolead .vlclose:hover{background:#fff;}
.videolead .vleadbox.videoexpand{width: 260px;height: 470px;}
.videolead .vleadbox.videoexpand p{visibility:hidden;}
.videolead .vleadbox.videoexpand .chatvideobtn{display:block;}
.videolead .chatvideobtn{display:none;position: absolute;bottom: 0;background-color: rgba(0,0,0,0.6);width:260px;}
.videolead .chatvideobtn h5{color:#fff;text-align:center;font-family:"Helvetica";font-weight: normal;font-size: 18px;margin: 10px;}
.videolead .chatvideobtn a{position: relative;display: block;background: #fff;height: 40px;line-height: 40px;text-align: center;border: 2px #a79f9f solid;border-radius: 20px;margin: 5px;text-decoration: none;color: #000;font-size: 20px;}
.videolead .chatvideobtn a:hover{background:#ff0;color:#000;}
.videolead .chatboxdisable{bottom:-490px;width: 260px;height: 470px;position:absolute;border: 4px #000 solid;border-radius: 5px;overflow: hidden;transition: all 2s ease;}
.videolead .chatboxdisable.enable{bottom:0;background:#fff;}