.opener{
	width:56px;
	height:56px;
	background:#000000;
	box-sizing:border-box;
	padding:3px 0 0;
	position:absolute;
	top:0px;
	left:-56px;
	cursor:pointer;
	border:1px solid #313440;
	border-top:0;
	border-right:0;
}
.opener .line{
	width:12px;
	height:2px;
	display:block;
	margin:0 auto 2px;
	background:#000;
}

.panel{
	border:1px solid #313440;
	position:fixed;
	right:-200px;
	top:0;
	width:200px;
	padding:5px;
	box-sizing:border-box;
	background:#000000;
	height:100%;
	transition:all 0.3s ease;
}
.panel:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	/* border:1px solid #ffffff; */
	box-sizing:border-box;
	z-index:0;
}
.panel.active{right:0;}

.circle {
}

.circle.one {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAFMklEQVRoQ+1YP2wbVRj/fS8pEUlc2g2JoWchsaGmC2KgjTMxJCjnkakuW52FTrCRbGxNJeyOjRlYc1WxytbUZUFCIhXM5CTExEASJy0ttX/onX3nd5e7s89unFLlBjs5f+973+/78/u+9wSvySOvCQ6cAnnVInkakdOIRDxwxa6vCjjvv26Baz86n2xlddSJp9Z88fttQC76hpO41XAWP/8fAqnTM1p/ivf1sLG5WHhlgRTs+1ZbWvOKM3e3nIXdgv3gXAuHNxWkFGoCBCgsNTaXahqMlmvL4bL/fxLAsaXWlWJ9SwCvFtjmA4G8B4V3kgwj+SsoEIX3vTXEWsNZXD1RIB/Z9woToh4EKaT/GMCFJCC+HLkrmMnraMaBGUBd1mw9Km8WNElIYF1HlsBdENsitM3C70YiAJNGBGMBUrDrcxQ4IC5EIrEnRGHLWdz24V+26yUluBO4o0sCAB8LZwonGhG/aFs4/FmJvNuPao9SMmsNZ6mUlhtjiUiSt1tsL8Q1P69JCr7y1wmnzydFIpAZvQIG13B5+d4PSqmP/RVt8sYjZ2k9quFKse4IsNyTw7VHzuLGiUdE9wLiiWatuUjPcAXTl0xvd+vplyD9ugRHYrXhLK6dKP2GWCvKvIRLYJ0i28K2LUAJIueMOjJZK7GXjKVGQkzkde6B2ggIQgxhIS6ZDGdGZyQgVuVgDsK3TIVuOfcwLvzzxboL4IL+rU0+FZFJAc4kpQqJZwJM+alIpjPXaECqzWDs6KWCXHJXZoO+4L/X3V1B2QrY0F7VtdASbihj8u3pYE1hxpuAW3hii8BWnC6lMddIQPLVZmdyNR5Srrkrs6kM44t3SeBvnUKdZPPU/dZwlrz5KsszNBCdViIM2KXHMqy55bOpzcs00Ew5/b5fCg3NWtbtp5Z7/U2d36HnQqX5nQg+NT3h+ZP8C+rMB9E11k2ec2/IkYFvmJ4RB6ZvRPKVfU2PuqAdiNpqvZj4fWLy328FYqWFnoJVYLKGdmsZQk2rBQoW3Ou5zMfYQVIsFYhVaYZGhY7HjdG6zw6hMdxbStctn80PYlhWmUQgOhXwRnNHus0pK4hezYR7RhYyyAImGUg0GjGRIPAYlHUodmqILAnkatSAYBLvFPMunufycfWSxfCobHpEpg50n7hoGhJ4mrjrruTsqEKrum8LZNN8b6bY2CPiG2JV9zcAuRpGzD0+y1lJXtVrzMh0gHCPVIW4ZjlKJPy1fVlLC1qVpiPSG6uZEI0A/O1mQYjOGb378Nns+ZedTqb+wYB8c/C1KH5hpNUtdyWXeIlmxQDZKecG2mvY6PRV7g2G4H0RvG0w0UO3nEu8RLMqByURBuduPfCC8tmgo8swYNL7SHXfBnFHnw+igmnNzao2tzVJGBH0zhT63OGWczeGMbTfmhT6DXv1CKVqGlVSNDu113umDu4IEGKzEGsBjlvOFfsZlvX3ZCARGo2jYK91AHrk0GP7HMg5v4H2qjx8JNR3u2lpmRXAQKxlRc4bSWDSNj8ypjD+vDIsgMGARNmnjT/aCkoh+c62Rwj8h8CfCsY9FrKN+FnADcBazVWI7EImHH8094ZJ8EuITMVtRrAGObOq5fUxAO1WAaCN57Ol4+olfYEkeUWPIoiMIp4s5Sd3ZfbDLN58GbLDA7n91BK+2DnKZlhzV3KJ1/8vw+g4HUMD0cry1f1dQEK3KASLbvmsc1wGJ+kdCYhVaa5DMBdSLpOluKPxcQMbCchxG5dF/ymQLN4ah+xpRMbh5Sx7vDYR+Q+jvz1RGXuwqQAAAABJRU5ErkJggg==");
  height: 50px;
  width: 50px;
}

.panel:hover .circle.one{
	 -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

.panel-box{
	width:100%;
	margin:0 auto;
	padding:10px 14px 0;
	height:100%;
	position:relative;
	transition:all 0.3s ease;
	box-sizing:border-box;
	z-index:1;
}
.panel-box .title{
	font-size:20px;
	line-height:22px;
	font-weight:normal;
	display:block;
	margin:0 0 20px;
	padding:0 0 20px;
	text-transform:uppercase;
	text-align:center;
	color:#FFFFFF;
	position:relative;
}
.panel-box .title:after{
	content:'';
	position:absolute;
	bottom:0;
	height:1px;
	left:50%;
	width:70%;
	margin-left:-35%;
	background:#000000;
}

.panel-box label{
	font-family: 'Titillium Web', sans-serif;
	display:block;
	font-size:16px;
	line-height:20px;
	font-weight:normal;
	display:block;
	margin:0 0 20px;
	color:#FFFFFF;
	text-align:left;
	margin-left: 10px;
}

.panel-box .wrap{margin:0 0 20px;}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.button1 {
  font-family: 'Titillium Web', sans-serif;
  width: 50px;
  height: 50px;
  border-radius: 10%;
  background: linear-gradient(to bottom, #363636 0%, #292929 100%);
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.7), inset 0 2px 0 -1px rgba(98, 98, 98, 0.5), 0 3px 7px -3px rgba(0, 0, 0, 0.7);
  color: #ADADAD;
  text-align: center;
  font-size: 22px;
  line-height: 50px;
  cursor: pointer;
  transition: color .3s ease;
  border: 0;
  outline: none;
  margin-right: 10px;
  margin-left: 10px;
}

.button1.active{
  background: linear-gradient(to bottom, #890d0d 0%, #c14545 100%);
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4), 0 3px 0 -1px rgba(98, 98, 98, 0.5), inset 0 4px 15px -2px rgba(0, 0, 0, 0.5);
  color: green;
}

.button2 {
  font-family: 'Titillium Web', sans-serif;
  width: 80px;
  height: 30px;
  border-radius: 10%;
  background: linear-gradient(to bottom, #363636 0%, #292929 100%);
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.7), inset 0 2px 0 -1px rgba(98, 98, 98, 0.5), 0 3px 7px -3px rgba(0, 0, 0, 0.7);
  color: #ADADAD;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: color .3s ease;
  border: 0;
  outline: none;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  margin-left: 5px;
}

.button2.active{
  background: linear-gradient(to bottom, #890d0d 0%, #c14545 100%);
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4), 0 3px 0 -1px rgba(98, 98, 98, 0.5), inset 0 4px 15px -2px rgba(0, 0, 0, 0.5);
  color: green;
}

#loaderdiv
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#captiondiv
{
font-family: 'Titillium Web', sans-serif;
color: #ffffff;
background-color: rgba (255, 0, 0, 0.4);
position: absolute;
width: 200px;
height: 400px;
top: 20px;
left: 20px
}


body {
color: #ffffff;
background-color: #000000;
margin: 0px;
overflow: hidden;
width: 100%;
}

#info {
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
font-weight: bold;
}
a {
color: #fff;
}