/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
   padding-top: 0;
}
body, h1, h2, h3, h4, h5, h6 {
   font-family: "Helvetica Neue", Lato, Arial, sans-serif !important;
}

.scala {
   color: #DC322F;
}

.btn-scala {
   color: #FFF;
   background-color: #DC322F;
   border-color: #B51915;
}

ul.navbar-nav {
  padding-top: 12px;
  font-size: 20px;
}

ul.navbar-nav li a {
  color: #666;
}

.btn-scala:active,
.btn-scala:focus,
.btn-scala:hover {
   color: #FFF;
   background-color: #B51915;
   boder-color: #DC322F;
}

.octicon-btn {
   margin-right: 0.2em;
   font-size: 24px;
}

.normal {
   font-weight: normal;
}

.margin-top {
   margin-top: 20px !important;
}

.margin-top-wide {
  margin-top: 40px !important;
}

.margin-bottom {
   margin-bottom: 20px !important;
}

.margin-bottom-wide {
   margin-bottom: 40px !important;
}

.spacing {
   margin: 40px 0;
}

.table-cell {
   display: table-cell !important;
}

.v-middle {
   vertical-align: middle;
}

.lg-block {
   display: none;
}

.lg-hidden {
   display: inherit;
}

#logo-gitbucket {
   height: 40px;
   color: #fff;
}

#navigation {
   position: absolute;
   height: 80px;
   background: none;
}

#title-gitbucket {
   /*color: #fff;*/
   position: relative;
}

#title-gitbucket h1 {
   font-family: "Helvetica Neue", "Lato", "Arial", "Meiryo", "メイリオ", "sans-serif" !important;
   font-weight: bold;
   margin: 10px 0;
}

#title-gitbucket h1 span.normal {
   font-family: "Helvetica Neue", "Lato", "Arial", "Meiryo", "メイリオ", "sans-serif" !important;
   font-weight: normal;
   font-size: 90%;
}

#title-gitbucket h1:last-of-type {
   margin-bottom: 20px;
}

#title-gitbucket p {
   margin: 4px 0;
   font-size: 20px;
}

#masthead {
   padding-top: 124px;
   background-color: #FFF;
   overflow: hidden;
   margin-bottom: 40px;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+64,ff5e3a+64,ff2a68+100 */
   background: #ffffff; /* Old browsers */
   background: -moz-linear-gradient(-30deg,  #ffffff 64%, #ff5e3a 64%, #ff2a68 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(-30deg,  #ffffff 64%,#ff5e3a 64%,#ff2a68 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(120deg,  #ffffff 64%,#ff5e3a 64%,#ff2a68 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ff2a68',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.library-icons {
   display: block;
   max-width: 100%;
   min-width: 100%;
}

#activities {
   background-image: url("../img/bg-masthead.png");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: top center;
   overflow: hidden;
   color: #FFF;
   margin-bottom: 0;
}

#activities .num {
   color: #d4d4d4;
   font-size: 42px;
   font-family: "Helvetica Neue", "Lato", "Arial", "Meiryo", "メイリオ", "sans-serif" !important;
   font-style: normal !important;
   font-weight: 100 !important;
}

#activities .num span.octicon{
   color: #999;
   font-size: 48px;
}

#activities .stars,
#activities .forks,
#activities .contributors,
#activities .releases {
   color: #ddd;
   font-size: 20px;
   font-style: normal !important;
   font-weight: 100 !important;
}

#activities .divider {
   color: #b0b0b0;
   font-style: normal !important;
   font-weight: 100 !important;
}

#activities .divider .pipe {
   font-size: 15px;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
}


#features {
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d6cec3+0,e4ddca+100 */
   background: #d6cec3; /* Old browsers */
   background: -moz-linear-gradient(left,  #d6cec3 0%, #e4ddca 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left,  #d6cec3 0%,#e4ddca 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right,  #d6cec3 0%,#e4ddca 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6cec3', endColorstr='#e4ddca',GradientType=1 ); /* IE6-9 */
   color: #685741;
}

#features hr {
   border-top-color: #9E906E;
}

ul.features > li{
   position: relative;
   font-size: 20px;
   margin-bottom: 24px;
   cursor: pointer;
}

ul.features > li span{
   display: inline-block;
}

ul.features > li span.octicon{
   color:  #9E906E;
   font-size: 24px;
   position: absolute;
   top: 2px;
   left: 10px;
}

ul.features > li span.feature{
   margin-left: 48px;
   cursor: pointer;
}

ul.features > li:before {
   content: ".";
   font-size: 0em;
   display: block;
   position: absolute;
   z-index: 1;
   background: none;
   width: 40px;
   height: 40px;
   top: -6px;
   border: 2px solid #9E906E;
   border-radius: 50%;
}

ul.features > li.selected{
   position: relative;
   font-size: 32px;
   margin-bottom: 24px;
   cursor: pointer;
}

ul.features > li.selected span.octicon{
   color:  #9E906E;
   font-size: 32px;
   position: absolute;
   top: 6px;
   left: 10px;
}

ul.features > li.selected span.feature{
   margin-left: 56px;
   cursor: pointer;
}

ul.features > li.selected:before {
   content: ".";
   font-size: 0em;
   display: block;
   position: absolute;
   z-index: 1;
   background: none;
   width: 48px;
   height: 48px;
   top: -2px;
   border: 2px solid #9E906E;
   border-radius: 50%;
}

img.screenshot {
   width: 100%;
   border: 1px solid #a7a296;
}

#eyecatch {
   display: none;
   background-image: url("../img/eyecatch-laptop.png");
   background-position: right bottom;
   background-repeat: no-repeat;
}

p.text-muted {
  font-weight: normal;
}

@media screen and (max-width: 768px){
   .text-muted {
      color: #4d4d4d;
   }
}

@media screen and (min-width: 768px) {
}

@media screen and (min-width: 992px) {
   #eyecatch {
      display: block;
      position: absolute;
      right: -30px;
      top: 30px;
      min-height: 466px;
      width: 970px;
      background-size: 584px 387px;
   }
}

@media screen and (min-width: 1200px) {
   .col-lg-offset-half {
      margin-left: 4.16666667%;
   }

   .lg-block {
      display: block;
   }

   .lg-hidden {
      display: none;
   }

   #eyecatch {
      display: block;
      position: absolute;
      right: -70px;
      top: 0;
      min-height: 466px;
      width: 1170px;
      background-size: 704px 466px;
   }

   #slides {
      padding-top: 40px;
      background-image: url(../img/screenshot-navigation.png);
      background-repeat: no-repeat;
      background-position: top left;
      background-size: contain;
   }

   #slides,
   #slides > div {
      min-height: 312px;
   }
}

@media screen and (min-width: 1400px) {

   .minus-margin-left {
      margin-left: -70px;
   }

   .minus-margin-right {
      margin-right: -70px;
   }

}