@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

html { direction:ltr; height: 100%; }
body { direction:ltr; width:100vw; height:100vh; padding:0; margin:0; font-size:16px; }

h1, h2, h3, h4, h5, h6, .btn, .app-sidebar nav { font-family: 'Open Sans', sans-serif; }
.btn, .app-sidebar nav  { text-transform: uppercase; }

.circle { border-radius: 50%; }
.btn-circle { border-radius: 50%; padding:0; }

.spacing10 { display:block; height:20px; }
.spacing20 { display:block; height:20px; }
.spacing30 { display:block; height:30px; }
.spacing40 { display:block; height:40px; }
.spacing50 { display:block; height:50px; }

.app { position:relative; width:100vw; height:100vh; min-width:400px; overflow-x:auto; }
.app-header { background-color:#2e83cb; }
.app-header h1 { margin:0; padding:0; color:#fff; background-color:#2e83cb; font-size: 34px;
  				 font-weight: 400; line-height: 80px; }
.app-header h1 span { font-size:24px; font-weight:200; }

.cover { height:80px; background: transparent url('../images/cover.jpg') 0 0 no-repeat; margin-bottom:30px; }

.breadcrumb { background-color:#fff; }

.app-view { margin-bottom:30px; }

.app-content article h1 { color:#2e83cb; font-size:24px; font-weight: 400; text-transform: uppercase; padding: 10px 15px 10px 30px; margin:0; border-left:5px solid #2e83cb; }
.app-content article h2 { text-transform: uppercase; }
.app-content article h3 { font-size:22px; text-transform: capitalize; padding:15px 0 15px; margin:15px 0 30px; border-bottom:2px solid #000; }
.app-content article .content { padding: 10px 15px 10px 30px; border-left:5px solid #ccc; min-height: 500px; }
.app-content article .content p { font-size: 18px; }

.media-list { margin:20px 0; }
.media-list .media { padding:20px; border-left:5px solid #bbb; background:#e5e5e5; }
.media-list .media h4 { color:#777; text-transform: capitalize; }
.media-list .media-left img { width:64px; height:64px; }
.media-list .media-body small { color:#777; }

.media-list .media-success { border-left:5px solid #449d44; }
.media-list .media-success h4 { color:#000; }

.media-list .media-primary { border-left:5px solid #2e83cb; }
.media-list .media-primary h4 {  color:#2e83cb; }

.media-list .media-default { padding:0; border:none; background:transparent; }

.btn-default-invert { font-weight: 600; color:#000; background: transparent; border: 2px solid #000; }
.btn-primary-invert { font-weight: 600; color:#2e83cb; background: transparent; border: 2px solid #2e83cb; }
.btn-success-invert { font-weight: 600; color:#449d44; background: transparent; border: 2px solid #449d44; }
.btn-warning-invert { font-weight: 600; color:#eea236; background: transparent; border: 2px solid #eea236; }

@media (max-width: 992px){
	.app-sidebar { margin-bottom:20px; }
	.app-content article .content { padding: 10px 0; border-left:none; }
}

@media (max-width: 480px){
	.app-header h1 { font-size:28px; }
	.app-header h1 span { font-size:18px; }
}