* {
  box-sizing: border-box;
}

body, html, .wrapper, .container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  top: 0;
}


/* Size */
section { height: initial; }

.lyr-ovr, .lyr-img, .full, .partial { height:100%; }

.emoji img { height: 20px; }

.thumb { height: 30px; }

.info-circle { height:50px; }

.thumb-lrg, .preview, .profile_pic { height: 100px; }

.banner { height: 360px; }

.thumb-lrg { width: initial; }

.middle, .bottom, .msg-box { width: inherit; }

.container, .nav-container { max-width: 1170px; }

.banner, .pp, .lyr-ovr, .lyr-txt, .lyr-img, li a, .full, .row, .nav, .navbar, .nav-container, .subby, .sub-fixed, .partial, section { width: 100%; }

.thumb { width: 30px; }

.info-circle { width:50px; }

.preview, .profile_pic { width: 100px; }

.sub-lv-2 { width: 150px; }

.pp { max-width: 200px; }

.banner img { width: 1170px; }

.thumb, .thumb-lrg { clip: rect(0px,30px,30px,0px); }

.banner, .sub-lv-1, .sub-lv-2 { overflow: hidden; }

.bell {
  height:0;
  width:200px;
  overflow-y:scroll;
}


/* Position */
.wrapper, .top, .subby, .sub-fixed { top: 0; }

.bottom { margin-top: 0!important; }

.banner img, .left { left: 0; }

.right, .collapse, .sub-lv-2, .subby, .collapse .sub { right: 0; }

.bell { right:53px; }

.lyr-txt, .bottom { bottom: 0; }

.wrapper { z-index: 0; }

.banner img, .lyr-img, .subby { z-index: -1; }

.nav, .navbar { z-index: 1; }

.collapse, .sub-fixed { z-index: 5; }

.partial { z-index: 10; }

.container, ul, .full { display: block; }

.banner img, .lyr-ovr, .lyr-txt, .lyr-img, .top, .middle, .full, .bottom, .sub-lv-2, .subby, .collapse .sub { position: absolute; }

.inline { display: inline; }

.preview, .row, a, .stub { display: inline-block; }

.container, .banner, .post .middle, .panel-grid, .nav, .navbar { position: relative; }

.sub-fixed, .partial { position: fixed; }

.profile_pic, ul { margin: 0; }

.container, .info-circle, .center, .nav-container { margin: auto; }

.sub { margin-top: -6px; }

.lyr-ovr, .lyr-txt, .lyr-img { margin: -2px 0; }

.profile_pic > a { margin-bottom: 6px; }

.panel-grid { margin: 10px auto; }

.panel img { margin: 0 10px 0 0; }

.profile_pic, .lyr-ovr, .lyr-txt, .lyr-img, ul { padding: 0; }

.fa-close, .pp, .msg-box { padding: 5px; }

.fa { padding: 5px 0; }

.row { padding: 10px 0; }

li a { padding: 10px 5px; }

li, .left, .nav, .navbar { float: left; }

.right { float: right; }

.panel a { line-height: 15px; }

.thumb {
  margin: 8px 5px;
  vertical-align: middle;
  line-height: 1.2;
}

.middle {
  transform:translateY(-50%);
  top: 50%;
}

.sub-lv-2 {
  top: 53px;
  width: 150px;
}


/* Text  */
.left { text-align: left; }

.right { text-align: right; }

.center { text-align: center; }

.panel-grid, .panel { font-size: 15px; }


/* Links */
a, .full { text-decoration: none; }


/* Headers */
.h-short { display: none; }
.h-long { display: inline-block; }
@media (max-width:568px) {
  .h-short { display: inline-block; }
  .h-long { display: none; }
}

h1 { font-size: 22px; }
h2 { font-size: 20px; margin: 0; padding: 10px; }
h3 { margin: 0; padding: 0; }
h4 { font-size: 16px; margin: 0; padding: 0; }
h5 { font-size: 14px; margin: 0; padding: 0; }
h6 { font-size: 12px; }


/* Border */
.thumb, .thumb-lrg, .profile_pic > div, .lyr-ovr { border-radius: 5px; }

.preview { border: 1px solid #333; }

.sub-lv-2 { border:1px #ccc solid; }

.info-circle {
  border-radius: 30px 30px;
  background: #BADA55;
}


/* Background */
.preview, .profile_pic {
  background-position: center;
  background-repeat: no-repeat;
  background-size: top cover;
}

.sub-lv-2 { background:#fff!important; }


/* Lists */
li { list-style-type: none; }


/* Forms */
form, .search form, .search input, textarea { margin: 0; }

input, select { margin: 1px; }

.search form, .icon form { padding: 0; }

select, h1 { padding: 0 10px;}

input, textarea, .btn, .search label { padding: 10px; }

li { padding: 10px 0; }

.form-grp, label { display: block; }

.search, .search label { position: absolute; }

.search, .search label, .search form, .search input { width: 100%; }

.a { height: inherit; }

.search, .search label { height: 40px; }

.btn, input, textarea, select, option { font-family: 'Open Sans', sans-serif; }

.btn, input, textarea, select, option { font-size: 14px; }

.btn { font-weight: bold; }

.btn, .btn:visited, select { letter-spacing: 1px; color: #f6f6f6; }

option { color: #777; }

select { background: #4895e4; }

option { background: #f6f6f6; }

textarea { box-shadow: inset 0 1px 8px -1px #ccc; }

select { box-shadow: 0 0 8px -1px #ccc; }

select, .btn, textarea { border: none; }

select, .btn, textarea { border-radius: 2px; }

input, .btn, select {
  height: 37px;
  margin: 0 3px 0;
  vertical-align: middle;
}

.a, .search form, .search input {
  padding: inherit;
  margin-bottom: 3px!important;
}

textarea { resize: none; }

.form-grp {
  width: 300px;
  margin: 12px auto;
}

.search {
  margin-top: -40px;
  z-index: 1;
}

.search form, .search input {
  position: relative;
  text-align: center;
}

.btn {
  background: none;
  cursor: pointer;
  line-height: 0;
}

.log .btn:hover { color:#5cbc55; }

.btn:hover {
  color: #FFF;
  letter-spacing: 1px;
  font-weight: bold;
}

.btn:disabled, select:disabled { background: #777!important; }

.btn-good, .bg-good { background: #5cbc55; }

.btn-good:hover { background: #70C04B; }

.btn-good:focus { background: #62B83A; }

.btn-go, .bg-go { background: #368DD8; }

.btn-go:hover { background: #3d99e9; }

.btn-go:focus { background: #2C699D; }

.btn-warning, .bg-warning { background: #F2A12C; }

.btn-warning:hover { background: #FFA92E; }

.btn-warning:focus { background: #D89027; }

.btn-danger, .bg-danger { background: #d9534f; }

.btn-danger:hover { background: #E65854; }

.btn-danger:focus { background: #BF4946; }

@media (max-width: 568px) {
  .search input{
    text-align: left;
  }
}

@media (max-width:999px) {
  .form-grp{
    width: 100%;
  }
}


/* posts */
a {
  font-weight: bold;
}

.post{
  width: 100%;
  display: inline-block;
}

.grid{
  width: 200px;
  height: 200px;
  display: inline-block;
  margin: 15px;
}

.post-header{
  padding: 15px  20px;
}

.post-content{
  line-height: 2;
  padding: 5px 10px;
}

/* live search */
.live {
  position: relative;
}

.live-results {
  position: absolute;
  width: 100%;
  margin: 0;
  text-align: center;
  left: 0;
}

.live-item {
  background: #fff;
  border: solid #ccc 1px;
  margin: 0;
}

.live-item:hover {
  cursor: pointer;
  background: #f5f5f5;
}

/* Grid */
.col {
  padding: 0 10px;
  display: inline-block;
  float: left;
  position: relative;
}

.col-xs-1 {width: 8.33%;}
.col-xs-2 {width: 16.66%;}
.col-xs-3 {width: 25%;}
.col-xs-4 {width: 33.33%;}
.col-xs-5 {width: 41.66%;}
.col-xs-6 {width: 50%;}
.col-xs-7 {width: 58.33%;}
.col-xs-8 {width: 66.66%;}
.col-xs-9 {width: 75%;}
.col-xs-10 {width: 83.33%;}
.col-xs-11 {width: 91.66%;}
.col-xs-12 {width: 100%;}

.col-off-xs-1 {margin-left: 8.33%;}
.col-off-xs-2 {margin-left: 16.66%;}
.col-off-xs-3 {margin-left: 25%;}
.col-off-xs-4 {margin-left: 33.33%;}
.col-off-xs-5 {margin-left: 41.66%;}
.col-off-xs-6 {margin-left: 50%;}
.col-off-xs-7 {margin-left: 58.33%;}
.col-off-xs-8 {margin-left: 66.66%;}
.col-off-xs-9 {margin-left: 75%;}
.col-off-xs-10 {margin-left: 83.33%;}
.col-off-xs-11 {margin-left: 91.66%;}
.col-off-xs-12 {margin-left: 100%;}

@media (min-width:568px) {
  .col-sm-1 {width: 8.33%;}
  .col-sm-2 {width: 16.66%;}
  .col-sm-3 {width: 25%;}
  .col-sm-4 {width: 33.33%;}
  .col-sm-5 {width: 41.66%;}
  .col-sm-6 {width: 50%;}
  .col-sm-7 {width: 58.33%;}
  .col-sm-8 {width: 66.66%;}
  .col-sm-9 {width: 75%;}
  .col-sm-10 {width: 83.33%;}
  .col-sm-11 {width: 91.66%;}
  .col-sm-12 {width: 100%;}

  .col-off-sm-1 {margin-left: 8.33%;}
  .col-off-sm-2 {margin-left: 16.66%;}
  .col-off-sm-3 {margin-left: 25%;}
  .col-off-sm-4 {margin-left: 33.33%;}
  .col-off-sm-5 {margin-left: 41.66%;}
  .col-off-sm-6 {margin-left: 50%;}
  .col-off-sm-7 {margin-left: 58.33%;}
  .col-off-sm-8 {margin-left: 66.66%;}
  .col-off-sm-9 {margin-left: 75%;}
  .col-off-sm-10 {margin-left: 83.33%;}
  .col-off-sm-11 {margin-left: 91.66%;}
  .col-off-sm-12 {margin-left: 100%;}
}

@media (min-width: 999px) {
  .col-md-1 {width: 8.33%;}
  .col-md-2 {width: 16.66%;}
  .col-md-3 {width: 25%;}
  .col-md-4 {width: 33.33%;}
  .col-md-5 {width: 41.66%;}
  .col-md-6 {width: 50%;}
  .col-md-7 {width: 58.33%;}
  .col-md-8 {width: 66.66%;}
  .col-md-9 {width: 75%;}
  .col-md-10 {width: 83.33%;}
  .col-md-11 {width: 91.66%;}
  .col-md-12 {width: 100%;}

  .col-off-md-1 {margin-left: 8.33%;}
  .col-off-md-2 {margin-left: 16.66%;}
  .col-off-md-3 {margin-left: 25%;}
  .col-off-md-4 {margin-left: 33.33%;}
  .col-off-md-5 {margin-left: 41.66%;}
  .col-off-md-6 {margin-left: 50%;}
  .col-off-md-7 {margin-left: 58.33%;}
  .col-off-md-8 {margin-left: 66.66%;}
  .col-off-md-9 {margin-left: 75%;}
  .col-off-md-10 {margin-left: 83.33%;}
  .col-off-md-11 {margin-left: 91.66%;}
  .col-off-md-12 {margin-left: 100%;}
}

@media (min-width: 1200px) {
  .col-lg-1 {width: 8.33%;}
  .col-lg-2 {width: 16.66%;}
  .col-lg-3 {width: 25%;}
  .col-lg-4 {width: 33.33%;}
  .col-lg-5 {width: 41.66%;}
  .col-lg-6 {width: 50%;}
  .col-lg-7 {width: 58.33%;}
  .col-lg-8 {width: 66.66%;}
  .col-lg-9 {width: 75%;}
  .col-lg-10 {width: 83.33%;}
  .col-lg-11 {width: 91.66%;}
  .col-lg-12 {width: 100%;}

  .col-off-lg-1 {margin-left: 8.33%;}
  .col-off-lg-2 {margin-left: 16.66%;}
  .col-off-lg-3 {margin-left: 25%;}
  .col-off-lg-4 {margin-left: 33.33%;}
  .col-off-lg-5 {margin-left: 41.66%;}
  .col-off-lg-6 {margin-left: 50%;}
  .col-off-lg-7 {margin-left: 58.33%;}
  .col-off-lg-8 {margin-left: 66.66%;}
  .col-off-lg-9 {margin-left: 75%;}
  .col-off-lg-10 {margin-left: 83.33%;}
  .col-off-lg-11 {margin-left: 91.66%;}
  .col-off-lg-12 {margin-left: 100%;}
}



.gallery {
  border: solid 1px #ccc;
  list-style-type: none;
  max-height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.gallery li {
  display: -webkit-box;
  float: left;
  height: 100px;
  padding: 15px;
  margin: 10px 0;
}

.gallery-new {
  display: block;
  text-align:center;
  font-size: 40px;
}

.gallery-new a {
  width: 100%;
  height: 100%;
  padding: 0;
  line-height: inherit;
}

.gallery-img {
  width: 100%;
  min-width: 70px;
  border: solid #333 4px;
  margin: 0!important;
  border-radius: 5px;
}

.gallery-img:hover {
  border-color: #5cbc55;
  cursor: pointer;
}

.ui-selected img {
  border-color: #72C279;
}

.view {
  width: 100px;
}

.off {
  display: none!important;
}

.sidebar {
  position:fixed;
  width:276px;
  height:100%;
  overflow: hidden;
}

.side-ctrl {
  position:relative;
  height:51px;
  z-index:5;
}

.side-ctrl-l, .side-ctrl-r {
  display:inline-block;
}

.side-ctrl-l {
  margin-left:276px;
}

.side-ctrl-r {
  margin-right:276px;
}


/* Mobile */
@media (max-height:500px) {
  .gallery {
    height: 170px!important;
  }
}

@media (max-height:600px) {
  .gallery {
    height: 250px!important;
  }

  footer {
    position: relative;
  }
}

@media (max-width:568px) {
  .right-sm {
    text-align: right;
    float:right;
  }

  .left-sm {
    text-align: left;
    float: left;
  }

  .center-sm {
    margin: auto;
    text-align: center;
  }

  .bottom-sm {
    margin-top: 0!important;
    position: absolute;
    bottom: 0;
    width: inherit;
  }

  .row-sm{
    display: inline-block;
    width: 100%;
    padding: 15px;
    margin: 7px 0;
  }

  .hide-sm {
    display:none;
  }

  .panel-grid{
    float: left;
    margin: 10px;
  }

  .sub-lv-2, .sub-lv-2 ul, .bell {
    position: relative;
    width: 100%;
  }
  .subby {
    margin-top: 53px;
  }
  .stub {
    display: block;
  }
}

@media (max-width:999px) {
  .center-md {
    margin: auto;
    text-align: center;
  }
}


@media (max-width:1530px) {
  .sidebar {
    width: 0px;
  }

  .side-ctrl-l {
    margin-left:6px;
  }

  .side-ctrl-r {
    margin-right:6px;
  }
}

@media (min-width:1170px) {
  .right-lg{
    text-align: right;
    float:right;
  }
}
