html, body{max-width:100%; margin:0; height:auto;}
body{ padding-bottom: 40px; font-family:calibri; font-size:16px; line-height:1.6;}
#documenter-cover{ min-height: 600px;}

.navbar .nav li a{border-radius:3px;display:block;white-space:nowrap;padding:6px 11px 7px;max-width:100px;overflow:hidden;text-overflow:ellipsis;text-decoration:none;margin-left: 3px;
	margin-bottom: 3px;}
.navbar .nav li ul{border-radius:5px;display:none;position:absolute;list-style-type:none;min-width:100px;padding:3px;box-shadow:0 0 3px rgba(0,0,0,0.3);}
.navbar .nav > li:hover ul{display:block;}

section{	margin-top:50px;}

 #documenter_nav {float: none;margin: 0;padding: 0;height: 600px;} 
 .nav {padding-left: 0;margin:0;list-style: none;} 
 #documenter_nav .nav .active ul {display: block;max-height: 400px;overflow-x: auto;  } 
 #documenter_nav .nav ul {list-style: none;padding: 0;display: none;} 
 #documenter_nav .nav ul li a {padding-left: 30px;font-size: 13px;  } 
 #documenter_nav li.active > a {background: #444;color: #fff;outline: none;  }
 
@media (max-width: 979px) {
	#documenter_content{padding-top: 0px;	}
	.navbar .nav {	margin: 10px 10px 0 0; }
	.navbar .nav > li > a{padding:6px 11px 7px;	max-width:100%;	overflow:hidden;text-overflow:ellipsis;}
	.navbar .nav li ul{	display:none;box-shadow:none;position:static;}
	.navbar .nav li:hover ul{display:block;}
	.navbar .nav li ul li{	display:block;}
	.navbar .nav li a{max-width:100%;}
	section{margin-top:80px;}
}
@media (max-width: 480px) {
	section{margin-top:30px;}
}
/* home style */
html, body{background-color:#FFFFFF;color:#383838;}
h1,h2,h3,h4,h5,h6{color:#383838;}
::-moz-selection{background:#444444;color:#DDDDDD;}
::selection{background:#444444;color:#DDDDDD;}

hr{ height:1px; background:#EBEBEB; width:100%; display:inline-block; margin:0 0 25px; border:0;}

section a { text-decoration:underline; font-weight:600;}
section a:hover {text-decoration:non; }

img { max-width:100%; }	
img,
a { outline:none !important; }		
#documenter_sidebar { position:fixed; left:0; top:0; width:300px; height:100%; background:#f0f1f1; box-shadow:3px 0px 6px rgba(0,0,0,0.3); z-index:999; }
h1.logo { background-color:#000; padding:10px 15px; text-align:center; margin:0; height:34px; }
h1.logo img {display:block;}

#documenter_nav { float:none; margin:0; padding:0; height:600px; }
#documenter_nav li {  list-style:none; border-bottom:1px solid #ddd;}
#documenter_nav li>a { display:block; margin:0; padding:8px 20px; font-size:14px; font-family:arial; display:block; max-width:100%; color:#000; list-style:none; text-decoration:none;}
#documenter_nav li a.current { background:#444; color:#fff; }
#documenter_nav li li:last-child { border:none; }

#documenter_content { left:300px ; position:absolute; padding:60px 40px;}

a { color:#6377f0; }
a:hover,
a:focus {  color:#6377f0; }

#documenter_content>section { margin:0; }
span.step { display:inline-block; line-height:20px; height:20px; width:20px; background:#e98602 ; color:#fff; text-align:center; margin-right:10px; font-size:12px;}
.mt50 { margin-top:50px; }

h2{ font-size:23px; color:#af7865; font-weight:600; padding-top:20px;}
section h3 { font-weight:400; font-size:20px; margin-top:0; color:#000; } 
section h4 { font-size:14px; font-weight:600; text-transform:uppercase; }

#documenter_content { padding-bottom:700px; }
#documenter_content .top-bar h2 { float:left; margin:0; padding:0; font-weight:400; font-size:18px; }
#documenter_content .top-bar h2 a { text-decoration:none;}
#documenter_sidebar .logo a { background-color: #000;padding: 6px; text-align: center;margin: 0 auto; max-width:102px; display:block;}

p { margin-bottom:20px; margin-top:0;}

.textarea { resize:none; border:1px solid #ddd; border-radius:5px; padding:20px;  overflow:hidden; height:1050px; width:80%; clear:both; }
#documenter_nav ol { list-style:none; padding:0; height:auto !important; }
#documenter_nav ol li a { padding-left:30px; font-size:13px; }

.steps { padding-left:10px; }
.steps li { padding-left:10px; font-family:18px; color:#000; padding-bottom:15px;}
.steps li li { padding-left:5px; }
.steps li p { font-weight:400;  }

code { color:#683625; font-size:16px; background:#f8f4ef; padding:5px 10px; letter-spacing:-0.5px;}
code a {text-decoration:none;  color:#683625;}
 
.dispaly-table { display:table; vertical-align:top;} 
.dispaly-table-cell { display:table-cell; vertical-align:top; padding-right:10px;} 
.dispaly-table-cell p { margin:0 0 10px 0; }

.top-bar { background:#333; width:100%; height:92px; padding:10px 25px; width:100%; color:#fff; position:absolute; top:0; left:0; z-index:99; box-sizing:border-box; text-decoration:none; display: flex;  justify-content: space-between;  align-items: center;}
.top-bar a { color:#fff; font-size:20px; }

.right-buttons { float:right; }
.right-buttons a { transition: all 0.3s ease-in-out 0s;text-decoration: none;float: right;color: #000;border-radius: 25px;font-size: 13px;text-transform: uppercase;background: #fff;margin-left: 10px;padding: 9px 35px; margin: 2px 0 0 10px; letter-spacing:0.2px; font-weight: 600;}
.right-buttons a:hover { background:#000; color:#fff; }
.right-buttons a.buy { background:#d67272; color:#fff; }
.right-buttons a.buy:hover { background:#000; color:#000; }

#documenter_content>section.welcome {  padding:70px 80px; margin:0 -40px; background:#fafafa; height:119px; border-bottom:1px solid #eee; }
#documenter_content>section.welcome h3 { color:#000; font-size:25px; font-weight:600; margin:0 0 15px; letter-spacing:0.5px; text-transform:uppercase; }
.welcome-text { color:#000; font-size:18px; line-height:25px; margin-bottom:30px; }
.welcome-text a { color:#000;  }

.copytext input { width:300px; }

.decimal ul { padding:10px 0 10px 30px; }
.decimal li { padding:6px 0;}

.btn-watch { background:#df3333 url(../images/arrow.png) no-repeat 83% 50%; color:#fff; padding:10px 45px 10px 20px; text-decoration:none; border-radius:25px; transition-duration:0.2s;}
.btn-watch:hover, .btn-watch:focus {text-decoration:none; background-color:#d12525; color:#fff;}
.btn-watch img {width:10px; margin-left:5px; vertical-align:sub;}

.btn-brown { background:#222; color:#fff; padding:10px 20px; text-decoration:none; border-radius:25px; transition-duration:0.2s;}
.btn-brown:hover, .btn-brown:focus {text-decoration:none; background-color:#444; color:#fff;}
.btn-brown img {width:10px; margin-left:5px; vertical-align:sub;}


.steps ul li {list-style:disc;}
.steps ul { padding-bottom:20px;}

.info  { margin:10px 0 40px; box-shadow:inset 0 1px 0 0 rgba(0,0,0,.1),inset 0 -1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 0 rgba(0,0,0,.1); background:#f2f8ff; color:#40648d; border-left:5px solid #2670af; font-size:14px !important; display:inline-block; clear:both;  padding:15px 25px; }
.info span {display:block; font-weight:700; padding-bottom:5px;}

.warning {background:#fff9c4; color:#000; border-left:5px solid #f9a825; margin-bottom:20px; font-size:14px !important; display:inline-block; clear:both;  padding:10px 15px; }
.warning span {display:block; font-weight:700; padding-bottom:5px;}


.f500 { font-weight:500;}
.f600 { font-weight:600;}


.f20 { font-size:20px;}
.tdu { text-decoration:underline;}
.tdn {text-decoration:none;}
.clrbrown { color:#af7865; font-weight:600;}
.clrred { color:#f8353e; font-weight:500;}

.hidevideo {display:none;}

#documenter_content .top-bar img { max-width: 120px;}

.fl { display:flex; justify-content: space-between;}
.freestore { padding-left: 50px; max-width: 450px;}
.freestore img { border-radius: 10px;}