@import url('css/bootstrap.min.css');
@import url('css/font-awesome.min.css');

/* main */

* {
	box-sizing: border-box
}

html {
	-webkit-font-smoothing: antialiased;
	word-wrap: break-word
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.52;
	color: #686868;
	background: #fff;
	-webkit-text-size-adjust: 100%
}

p {
	margin: 20px 0px 0px 0px
}

img {
	max-width: 100%
}

pre {
	padding: 0px;
	margin: 20px 0px
}

code {
	padding-bottom: 20px!important;
	padding-left: 30px!important;
	max-height: 200px;
	background: #fafafa!important;
	margin: 0px;
	box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1)
}

a {
	color: #4777CD;
	transition: color 0.3s ease-out
}

a:hover, a:focus, a:active {
	color: #4777CD;
	outline: none;
	text-decoration: none
}

/* headlines */

h1 {font-size:29px;line-height:1.3;font-weight:700;margin:0px 0px 25px 0px;color:#fff}
h2 {position:relative;margin:0px 0px 25px 0px;font-size:22px;line-height:1.25;font-weight:600;color:#686868}
h3 {font-size:20px;line-height:1.25;font-weight:600;color:#4777CD;margin:20px 0px 20px 0px}
h4 {font-size:15px;line-height:1.4;font-weight:700;color:#686868;margin:0}

/* buttons */

a.button, .btn {position:relative;display:inline-block;white-space:normal;background:#4777CD;border:2px solid #4777CD;padding:12px 26px;margin:0px 25px 10px 0px;border-radius:30px;text-decoration:none;font-size:12px;color:#fff;letter-spacing:0.05em;font-weight:700;text-transform:uppercase;transition:all .5s ease-out}
.btn:hover, .btn:focus, .btn:active {background-color:#fff!important;border-color:#fff!important;color:#4777CD;outline:none}

/* list */

ol {margin:0px;padding:0px;list-style:none}
ol ol {margin:20px 0px 20px 0px}
ol li  {position:relative;padding:20px 0px 20px 38px;margin:0px;font-size:14px;border-bottom:1px solid #eee}
ol li li {border:0px;padding:10px 0px 10px 0px;font-size:14px}

ol {counter-reset:my-badass-counter}
ol li:before {content:counter(my-badass-counter, decimal-leading-zero);counter-increment:my-badass-counter;position:absolute;top:15px;left:0px;font-size:25px;font-weight:700;color:#e0e0e0}
ol li li:before {top:-1px;left:-25px;font-size:16px;padding:10px 0px 10px 0px;color:#e0e0e0}
ol li ul li:before {content:''}
ol li ul li {padding:5px 0px}

/* navbar */

.navbar-toggle {
    position: absolute;
    z-index: 9;
	background: rgba(255,255,255,0.3);
	border-radius: 4px;
	margin: 0px;
	top: 30px;
	right: 30px;
}

.navbar-toggle.collapsed {
	background: rgba(255,255,255,0.3);
}

.navbar-toggle {
	background: rgba(0,0,0,0.3);
}

.navbar-toggle.collapsed .fa-bars {
	display: block
}

.navbar-toggle.collapsed .fa-close {
	display: none
}

.navbar-toggle .fa-bars {
	display: none
}

.navbar-toggle .fa-close {
	display: block
}

.navbar-toggle.collapsed .fa {
    color: #fff;
}

.navbar-toggle .fa {
    color: #686868;
}

.collapse.in {
}

.left {padding:10px;height:300px!important;background:#fff;box-shadow:0px 3px 10px rgba(0,0,0,0.3)}
.left nav ul li a {font-weight:600}
.left nav ul ul {position:static;padding:0px 0px 0px 20px!important}
.left nav ul ul li a {padding:5px 10px;font-size:14px;font-weight:400;color:#686868}
.left nav ul ul li.active a {background:#eee!important;color:#686868!important}
.left .nav-pills>li.active>a, .left .nav-pills>li.active>a:focus, .left .nav-pills>li.active>a:hover {background:#4777CD;color:#fff}

.head {position:relative;float:right;width:100%;padding:100px 40px 60px 40px;background:url(img/theme-head.jpg) no-repeat center center;background-size:cover}
.head-content {position:relative;z-index: 1;color:#fff;font-size:16px}
.head-layer {background:rgba(0,0,0,0.35);position:absolute;top:0px;right:0px;bottom:0px;left:0px}

.reminder {position:relative;float:right;width:100%;background:#fcf8e3;padding:40px}
.reminder h2 {font-size:20px;margin-bottom:15px}	
.reminder img {display:none;width:80px;height:80px;border-radius:50%;margin:0px 30px 15px 0px}

.right {float:right;width:100%;padding:20px 20px}

.alert {font-size:14px}
.topic-img {display:block;margin:30px 0px 35px 0px}

@media (min-width: 768px) {

.left {float:left;z-index:99;position:fixed;top:0px;right:0px;left:0px}	
.left.navbar-collapse.collapse {overflow-y:auto!important}	
.left {right:75%;bottom:0px;height:auto!important;box-shadow:none;border-right:1px solid #eee}

.head {width:75%;padding:140px 80px 140px 80px}
.head-content {font-size:25px}	
	
.reminder {width:75%;padding:40px 80px}	
.reminder img {float:left;display:inline-block}

.right {width:75%;padding:40px 80px}

.topic-img {max-width: 80%}
	
}

@media (min-width: 992px) {

body {font-size:16px;padding-top:0px}

h1 {font-size:36px}
h2 {font-size:29px}

ol li  {padding:50px 0px 50px 87px;font-size:18px}
ol li li {padding:10px 0px 10px 44px;font-size:16px}

ol li:before {top:34px;left:-3px;font-size:45px}
ol li li:before {top:-3px;left:-25px;font-size:20px;padding:10px 0px 10px 25px}

a.button, .btn {padding:16px 36px}
	
	
.left {padding:10px}

.alert {font-size:16px}

}

@media (min-width: 1170px) {

h1 {font-size:54px}

.head {padding:240px 160px 240px 160px}
.reminder {padding:60px 160px}	
	
.left {padding:40px!important}


}