// ----- Mixins -----
@mixin clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}


// ----- Base styles -----

// Reset the box-sizing
*,
*:before,
*:after {
  box-sizing: border-box;
}

// Body reset
html {
  font-size: 10px;
}

body {
  padding-top: 90px;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: #333;
  background-color: #fff;
}

a {
  color: #1976D2;
  text-decoration: none;
  transition: color 0.3s;

  &:hover, &:focus {
    color: #2196F3;
  }
}

// Type
h1, h2, h3, h4, h5, h6 {
  font-weight: 300;

  small {
    font-size: 60%;
  }
}
h1, h2, h3 {
  margin: 20px 0;
}
h4, h5, h6 {
  margin: 10px 0;
}

h1 { font-size: 38px; }
h2 { font-size: 34px; }
h3 { font-size: 26px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p {
  margin: 0 0 15px 0;
}

strong {
  font-weight: 400;
}

.btn {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid #bbb;
  padding: 4px 12px 6px 12px;
  font-size: 18px;
  background-color: #fff;
  border-radius: 4px;
  transition: background-color .3s, color .3s;

  &:hover, &:active {
    background-color: #f3f3f3;
  }
}

.btn-white {
  color: #fff;
  border-color: #fff;
  background-color: transparent;
}



// ----- Layout -----
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  @include clearfix();
}

  .row {
    margin-left: -15px;
    margin-right: -15px;
    @include clearfix();
  }

    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
    }

@media (min-width: 768px) {
  .container {
    width: 750px;
  }

      .col-sm-6 {
        width: 50%;
      }
      .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
      }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}



// ----- Header and footer -----
.header {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  padding: 15px 0;
  color: #fff;
  background-color: #1976D2;
  box-shadow: 0 0 6px 6px rgba(0,0,0,0.1);

  .logo {
    float: right;
    margin: 22px 0 0 15px;
    width: 44px;
    height: 8px;

    @media (min-width: 768px) {
      width: 54px;
      height: 10px;
    }

    .line {
      fill: none;
      stroke: #fff;
      stroke-width: 2;
      stroke-dasharray: 52px;
      stroke-dashoffset: 52px;
      animation: linefill 2.2s linear forwards;
    }

    circle {
      fill: #ccc;
    }
    .circle1 {
      fill: #fff;
    }
    .circle2, .circle3 {
      animation: circleactive .2s linear forwards;
    }
    .circle2 {
      animation-delay: 1s;
    }
    .circle3 {
      animation-delay: 2s;
    }
  }

  .logo-text, .btn {
    margin: 0;
  }

  .logo-text {
    @media (max-width: 767px) {
      font-size: 30px;
    }
    @media (min-width: 768px) {
      display: inline-block;
    }
  }

  .btn {
    margin-top: 7px;
    margin-left: 7px;

    @media (min-width: 768px) {
      float: right;
    }
  }

}

@keyframes linefill {
  100% {
    stroke-dashoffset: 0px;
  }
}

@keyframes circleactive {
  to {
    fill: #fff;
  }
}


.footer {
  padding-bottom: 15px;
  font-size: 12px;
  text-align: center;
}



// ----- Demo styling -----
// Container for each demo
.demo {
  margin: 40px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

// Blocks of code
pre {
  display: block;
  padding: 10px 15px;
  margin: 0 0 20px 0;
  overflow: auto;
  font-family: 'Cutive Mono', monospace;
  font-size: 14px;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f3f3f3;
  border: 1px solid #bbb;
  border-radius: 4px;
}

.install {

  .btn {
    margin-right: 15px;
    margin-bottom: 15px;
  }

  h3 {
    margin-top: 0;
  }
}

.usage {
  font-size: 18px;
}
