Edit in JSFiddle

Result
HTML
CSS
JavaScript

<body class="blog-post sidebar-collapse">
  <nav class="navbar navbar-transparent navbar-color-on-scroll fixed-top navbar-expand-lg" color-on-scroll="100" id="sectionsNav">
    <div class="container">
      <div class="navbar-translate">
        <a class="navbar-brand" href="https://www.creative-tim.com/product/material-kit/?partner=101249" target="_blank">
          Material Kit </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="sr-only">Toggle navigation</span>
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
          <li class="dropdown nav-item">
            <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
              <i class="material-icons">apps</i> Components
            </a>
            <div class="dropdown-menu dropdown-with-icons">
              <a href="../index.html" class="dropdown-item">
                <i class="material-icons">layers</i> All Components
              </a>
              <a href="https://demos.creative-tim.com/material-kit/docs/2.0/getting-started/introduction.html" class="dropdown-item">
                <i class="material-icons">content_paste</i> Documentation
              </a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/creativetimofficial/material-kit/archive/master.zip">
              <i class="material-icons">cloud_download</i> Download
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://twitter.com/CreativeTim" target="_blank" data-original-title="Follow us on Twitter">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://www.facebook.com/CreativeTim" target="_blank" data-original-title="Like us on Facebook">
              <i class="fa fa-facebook-square"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://www.instagram.com/CreativeTimOfficial" target="_blank" data-original-title="Follow us on Instagram">
              <i class="fa fa-instagram"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="page-header header-filter" data-parallax="true" style="background-image: url('https://images.unsplash.com/photo-1534123405290-6611a98d11f3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=db9feeda1786e37ebd7be78aeaabb9ac&auto=format&fit=crop&w=6000&q=80 6000w');">
    <div class="container">
      <div class="row">
        <div class="col-md-8 ml-auto mr-auto text-center">
          <h1 class="title">Visit the forest and get relaxed</h1>
          <h4>The last 48 hours of my life were total madness. This is what I did.
          </h4>
          <br>
          <a href="#pablo" class="btn btn-rose btn-round btn-lg">
            <i class="material-icons">format_align_left</i> Read Article
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="main main-raised">
    <div class="container">
      <div class="section section-text">
        <div class="row">
          <div class="col-md-8 ml-auto mr-auto">
            <h3 class="title">The Forest Looks Different at Night...</h3>
            <p>This is the paragraph where you can write more details about your product. Keep you user engaged by providing meaningful information. Remember that by this time, the user is curious, otherwise he wouldn't scroll to get here. Add a button if you want the user to see more. We are here to make life better.
              <br> <br>
              And now I look and look around and there’s so many Kanyes I've been trying to figure out the bed design for the master bedroom at our Hidden Hills compound... and thank you for turning my personal jean jacket into a couture piece.</p>

            <div class="blockquote undefined">
              <p>
                “And thank you for turning my personal jean jacket into a couture piece.”
              </p>
              <small>
                Kanye West, Producer.
              </small>
            </div>
          </div>

          <div class="section col-md-10 ml-auto mr-auto">
            <div class="row">
              <div class="col-md-4">
                <img class="img-raised rounded img-fluid" alt="Raised Image" src="https://images.unsplash.com/photo-1514125669375-59ee3985d08b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=87a32c1192a51ef5b126e3c1bda20024&auto=format&fit=crop&w=600&h=800&q=80 4000w">
              </div>
              <div class="col-md-4">
                <img class="img-raised rounded img-fluid" alt="Raised Image" src="https://images.unsplash.com/photo-1524482131769-b23c0f633d7c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=07b4c55ab5d14393ef67287eb918b1e0&auto=format&fit=crop&w=600&h=800&q=80 3203w">
              </div>
              <div class="col-md-4">
                <img class="img-raised rounded img-fluid" alt="Raised Image" src="https://images.unsplash.com/photo-1540280369237-dea08361593a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7f031f7878a3c611ddce1db800a0a55&auto=format&fit=crop&w=600&h=800&q=60 2592w">
              </div>
            </div>
          </div>

          <div class="col-md-8 ml-auto mr-auto">
            <h3 class="title">Rest of the Story:</h3>
            <p>We are here to make life better. And now I look and look around and there’s so many Kanyes I've been trying to figure out the bed design for the master bedroom at our Hidden Hills compound... and thank you for turning my personal jean jacket into a couture piece. <br> I speak yell scream directly at the old guard on behalf of the future. daytime All respect prayers and love to Phife’s family Thank you for so much inspiration. </p>
            <p> Thank you Anna for the invite thank you to the whole Vogue team And I love you like Kanye loves Kanye Pand Pand Panda I've been trying to figure out the bed design for the master bedroom at our Hidden Hills compound...The Pablo pop up was almost a pop up of influence. All respect prayers and love to Phife’s family Thank you for so much inspiration daytime I love this new Ferg album! The Life of Pablo is now available for purchase I have a dream. Thank you to everybody who made The Life of Pablo the number 1 album in the world! I'm so proud of the nr #1 song in the country. Panda! Good music 2016!</p>
            <p> I love this new Ferg album! The Life of Pablo is now available for purchase I have a dream. Thank you to everybody who made The Life of Pablo the number 1 album in the world! I'm so proud of the nr #1 song in the country. Panda! Good music 2016!</p>

          </div>
        </div>
      </div>

      <div class="section section-blog-info">
        <div class="row">
          <div class="col-md-8 ml-auto mr-auto">

            <div class="row">
              <div class="col-md-6">
                <div class="blog-tags">
                  Tags:
                  <span class="badge badge-primary badge-pill">Photography</span>
                  <span class="badge badge-primary badge-pill">Stories</span>
                  <span class="badge badge-primary badge-pill">Castle</span>
                </div>
              </div>
              <div class="col-md-6">
                <a href="#pablo" class="btn btn-google btn-round float-right">
                  <i class="fa fa-google"></i> 232
                </a>
                <a href="#pablo" class="btn btn-twitter btn-round float-right">
                  <i class="fa fa-twitter"></i> 910
                </a>
                <a href="#pablo" class="btn btn-facebook btn-round float-right">
                  <i class="fa fa-facebook-square"></i> 872
                </a>

              </div>
            </div>

            <hr>

            <div class="card card-profile card-plain">
              <div class="row">
                <div class="col-md-2">
                  <div class="card-avatar">
                    <a href="#pablo">
                      <img class="img" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f04dc2d459bcd9af12f227a279880523&auto=format&fit=crop&w=600&h=600&q=80 2848w">
                    </a>
                    <div class="ripple-container"></div>
                  </div>
                </div>
                <div class="col-md-8">
                  <h4 class="card-title">Alec Thompson</h4>
                  <p class="description">I've been trying to figure out the bed design for the master bedroom at our Hidden Hills compound...I like good music from Youtube.</p>
                </div>
                <div class="col-md-2">
                  <button type="button" class="btn btn-default pull-right btn-round">Follow</button>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      <div class="section section-comments">
        <div class="row">
          <div class="col-md-8 ml-auto mr-auto">
            <div class="media-area">
              <h3 class="title text-center">3 Comments</h3>
              <div class="media">
                <a class="float-left" href="#pablo">
                  <div class="avatar">
                    <img class="media-object" src="https://images.unsplash.com/photo-1513673054901-2b5f51551112?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a1d6a15c11651045821dcf22ebb8d4dd&auto=format&fit=crop&w=600&h=600&q=60 2592w" alt="...">
                  </div>
                </a>
                <div class="media-body">
                  <h4 class="media-heading">Tina Andrew <small>· 7 minutes ago</small></h4>
                  <h6 class="text-muted"></h6>

                  <p>Chance too good. God level bars. I'm so proud of @LifeOfDesiigner #1 song in the country. Panda! Don't be scared of the truth because we need to restart the human foundation in truth I stand with the most humility. We are so blessed!</p>

                  <div class="media-footer">
                    <a href="#pablo" class="btn btn-primary btn-link float-right" rel="tooltip" title="" data-original-title="Reply to Comment">
                      <i class="material-icons">reply</i> Reply
                    </a>
                    <a href="#pablo" class="btn btn-danger btn-link float-right">
                      <i class="material-icons">favorite</i> 243
                    </a>
                  </div>
                </div>
              </div>

              <div class="media">
                <a class="float-left" href="#pablo">
                  <div class="avatar">
                    <img class="media-object" alt="Tim Picture" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a723711f2c79ac1dc3c8718d82850f30&auto=format&fit=crop&w=600&h=600&q=80 5771w">
                  </div>
                </a>
                <div class="media-body">
                  <h4 class="media-heading">John Camber <small>· Yesterday</small></h4>

                  <p>Hello guys, nice to have you on the platform! There will be a lot of great stuff coming soon. We will keep you posted for the latest news.</p>
                  <p> Don't forget, You're Awesome!</p>

                  <div class="media-footer">
                    <a href="#pablo" class="btn btn-primary btn-link float-right" rel="tooltip" title="" data-original-title="Reply to Comment">
                      <i class="material-icons">reply</i> Reply
                    </a>
                    <a href="#pablo" class="btn btn-link float-right">
                      <i class="material-icons">favorite</i> 25
                    </a>
                  </div>
                  <div class="media">
                    <a class="float-left" href="#pablo">
                      <div class="avatar">
                        <img class="media-object" alt="64x64" src="https://images.unsplash.com/photo-1513673054901-2b5f51551112?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a1d6a15c11651045821dcf22ebb8d4dd&auto=format&fit=crop&w=600&h=600&q=60 2592w">
                      </div>
                    </a>
                    <div class="media-body">
                      <h4 class="media-heading">Tina Andrew <small>· 12 Hours Ago</small></h4>

                      <p>Hello guys, nice to have you on the platform! There will be a lot of great stuff coming soon. We will keep you posted for the latest news.</p>
                      <p> Don't forget, You're Awesome!</p>

                      <div class="media-footer">
                        <a href="#pablo" class="btn btn-primary btn-link float-right" rel="tooltip" title="" data-original-title="Reply to Comment">
                          <i class="material-icons">reply</i> Reply
                        </a>
                        <a href="#pablo" class="btn btn-link btn-secondary float-right">
                          <i class="material-icons">favorite</i> 2
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <h3 class="title text-center">Post your comment</h3>
            <div class="media media-post">
              <a class="author float-left" href="#pablo">
                <div class="avatar">
                  <img class="media-object" alt="64x64" src="https://images.unsplash.com/photo-1513673054901-2b5f51551112?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a1d6a15c11651045821dcf22ebb8d4dd&auto=format&fit=crop&w=600&h=600&q=60 2592w">
                </div>
              </a>
              <div class="media-body">
                <div class="form-group label-floating bmd-form-group">
                  <label class="form-control-label bmd-label-floating" for="exampleBlogPost"> Write some nice stuff or nothing...</label>
                  <textarea class="form-control" rows="5" id="exampleBlogPost"></textarea>
                </div>
                <div class="media-footer">
                  <a href="#pablo" class="btn btn-primary btn-round btn-wd float-right">Post Comment</a>
                </div>
              </div>
            </div> <!-- end media-post -->
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2 class="title text-center">Similar Stories</h2>
          <br>
          <div class="row">
            <div class="col-md-4">
              <div class="card card-blog">
                <div class="card-header card-header-image">
                  <a href="#pablo">
                    <img class="img img-raised" src="https://images.unsplash.com/photo-1518057014654-ba829c396280?ixlib=rb-0.3.5&s=c21eb5e0547df3ad3d4eebaef472ca90&auto=format&fit=crop&w=750&q=80">
                  </a>
                  <div class="colored-shadow" style="background-image: url('https://images.unsplash.com/photo-1518057014654-ba829c396280?ixlib=rb-0.3.5&s=c21eb5e0547df3ad3d4eebaef472ca90&auto=format&fit=crop&w=750&q=80'); opacity: 1;"></div>
                </div>
                <div class="card-body">
                  <h6 class="category text-info">Enterprise</h6>
                  <h4 class="card-title">
                    <a href="#pablo">Autodesk looks to future of 3D printing with Project Escher</a>
                  </h4>
                  <p class="card-description">
                    Like so many organizations these days, Autodesk is a company in transition. It was until recently a traditional boxed software company selling licenses.<a href="#pablo"> Read More </a>
                  </p>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="card card-blog">
                <div class="card-header card-header-image">
                  <a href="#pablo">
                    <img class="img img-raised" src="https://images.unsplash.com/photo-1525332193053-dee9e7348624?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a171c64a1cb121a923c4e95d8308ca9e&auto=format&fit=crop&w=750&q=80">
                  </a>
                  <div class="colored-shadow" style="background-image: url('https://images.unsplash.com/photo-1525332193053-dee9e7348624?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a171c64a1cb121a923c4e95d8308ca9e&auto=format&fit=crop&w=750&q=80'); opacity: 1;"></div>
                </div>
                <div class="card-body">
                  <h6 class="category text-success">
                    Startups
                  </h6>
                  <h4 class="card-title">
                    <a href="#pablo">Lyft launching cross-platform service this week</a>
                  </h4>
                  <p class="card-description">
                    Like so many organizations these days, Autodesk is a company in transition. It was until recently a traditional boxed software company selling licenses.<a href="#pablo"> Read More </a>
                  </p>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="card card-blog">
                <div class="card-header card-header-image">
                  <a href="#pablo">
                    <img class="img img-raised" src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b17958c40e777065643cb65954bede79&auto=format&fit=crop&w=750&q=80">
                  </a>
                  <div class="colored-shadow" style="background-image: url('https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b17958c40e777065643cb65954bede79&auto=format&fit=crop&w=750&q=80'); opacity: 1;"></div>
                </div>
                <div class="card-body">
                  <h6 class="category text-danger">
                    <i class="material-icons">trending_up</i> Enterprise
                  </h6>
                  <h4 class="card-title">
                    <a href="#pablo">6 insights into the French Fashion landscape</a>
                  </h4>
                  <p class="card-description">
                    Like so many organizations these days, Autodesk is a company in transition. It was until recently a traditional boxed software company selling licenses.<a href="#pablo"> Read More </a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="footer text-center">
    <p>Made with <a href="https://www.creative-tim.com/product/material-kit/?partner=101249" target="_blank">Material Kit</a> by Creative Tim</p>
  </footer>
</body>

/* google fonts */

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngRUXZYTXPIvIBgJJSb6u92w7CLwR2oefDofMY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngRUXZYTXPIvIBgJJSb6u92w7CCwR2oefDofMY.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngRUXZYTXPIvIBgJJSb6u92w7CKwR2oefDofMY.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngRUXZYTXPIvIBgJJSb6u92w7CFwR2oefDofMY.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngRUXZYTXPIvIBgJJSb6u92w7CJwR2oefDofMY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngRUXZYTXPIvIBgJJSb6u92w7CIwR2oefDofMY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngRUXZYTXPIvIBgJJSb6u92w7CGwR2oefDo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

html * {
  -webkit-font-smoothing: antialiased;
}

/* typography */

h1,
.h1 {
  font-size: 3.3125rem;
  line-height: 1.15em;
}

h2,
.h2 {
  font-size: 2.25rem;
  line-height: 1.5em;
}

h3,
.h3 {
  font-size: 1.5625rem;
  line-height: 1.4em;
}

h4 {
  font-size: 1.125rem;
  line-height: 1.5em;
}

h5,
.h5 {
  font-size: 1.0625rem;
  line-height: 1.55em;
  margin-bottom: 15px;
}

h6,
.h6 {
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 500;
}

p {
  font-size: 14px;
  margin: 0 0 10px;
}

.h1,
.h2,
.h3,
.h4,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
}


.card-title,
.card-title a,
.footer-big h4,
.footer-big h4 a,
.footer-big h5,
.footer-big h5 a,
.footer-brand,
.footer-brand a,
.info-title,
.info-title a,
.media .media-heading,
.media .media-heading a,
.title,
.title a {
  color: #3c4858;
  text-decoration: none;
}

.card-title,
.footer-big h4,
.footer-big h5,
.footer-brand,
.info-title,
.media .media-heading,
.title {
  font-weight: 700;
  font-family: Roboto Slab, Times New Roman, serif;
}

/* animtaions */

@keyframes topbar-x {
  0% {
    top: 0px;
    transform: rotate(0deg);
  }

  45% {
    top: 6px;
    transform: rotate(145deg);
  }

  75% {
    transform: rotate(130deg);
  }

  100% {
    transform: rotate(135deg);
  }
}

@-webkit-keyframes topbar-x {
  0% {
    top: 0px;
    -webkit-transform: rotate(0deg);
  }

  45% {
    top: 6px;
    -webkit-transform: rotate(145deg);
  }

  75% {
    -webkit-transform: rotate(130deg);
  }

  100% {
    -webkit-transform: rotate(135deg);
  }
}

@-moz-keyframes topbar-x {
  0% {
    top: 0px;
    -moz-transform: rotate(0deg);
  }

  45% {
    top: 6px;
    -moz-transform: rotate(145deg);
  }

  75% {
    -moz-transform: rotate(130deg);
  }

  100% {
    -moz-transform: rotate(135deg);
  }
}

@keyframes topbar-back {
  0% {
    top: 6px;
    transform: rotate(135deg);
  }

  45% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(5deg);
  }

  100% {
    top: 0px;
    transform: rotate(0);
  }
}

@-webkit-keyframes topbar-back {
  0% {
    top: 6px;
    -webkit-transform: rotate(135deg);
  }

  45% {
    -webkit-transform: rotate(-10deg);
  }

  75% {
    -webkit-transform: rotate(5deg);
  }

  100% {
    top: 0px;
    -webkit-transform: rotate(0);
  }
}

@-moz-keyframes topbar-back {
  0% {
    top: 6px;
    -moz-transform: rotate(135deg);
  }

  45% {
    -moz-transform: rotate(-10deg);
  }

  75% {
    -moz-transform: rotate(5deg);
  }

  100% {
    top: 0px;
    -moz-transform: rotate(0);
  }
}

@keyframes bottombar-x {
  0% {
    bottom: 0px;
    transform: rotate(0deg);
  }

  45% {
    bottom: 6px;
    transform: rotate(-145deg);
  }

  75% {
    transform: rotate(-130deg);
  }

  100% {
    transform: rotate(-135deg);
  }
}

@-webkit-keyframes bottombar-x {
  0% {
    bottom: 0px;
    -webkit-transform: rotate(0deg);
  }

  45% {
    bottom: 6px;
    -webkit-transform: rotate(-145deg);
  }

  75% {
    -webkit-transform: rotate(-130deg);
  }

  100% {
    -webkit-transform: rotate(-135deg);
  }
}

@-moz-keyframes bottombar-x {
  0% {
    bottom: 0px;
    -moz-transform: rotate(0deg);
  }

  45% {
    bottom: 6px;
    -moz-transform: rotate(-145deg);
  }

  75% {
    -moz-transform: rotate(-130deg);
  }

  100% {
    -moz-transform: rotate(-135deg);
  }
}

@keyframes bottombar-back {
  0% {
    bottom: 6px;
    transform: rotate(-135deg);
  }

  45% {
    transform: rotate(10deg);
  }

  75% {
    transform: rotate(-5deg);
  }

  100% {
    bottom: 0px;
    transform: rotate(0);
  }
}

@-webkit-keyframes bottombar-back {
  0% {
    bottom: 6px;
    -webkit-transform: rotate(-135deg);
  }

  45% {
    -webkit-transform: rotate(10deg);
  }

  75% {
    -webkit-transform: rotate(-5deg);
  }

  100% {
    bottom: 0px;
    -webkit-transform: rotate(0);
  }
}

@-moz-keyframes bottombar-back {
  0% {
    bottom: 6px;
    -moz-transform: rotate(-135deg);
  }

  45% {
    -moz-transform: rotate(10deg);
  }

  75% {
    -moz-transform: rotate(-5deg);
  }

  100% {
    bottom: 0px;
    -moz-transform: rotate(0);
  }
}

.nav-open .navbar-collapse {
  -webkit-transform: translate3d(0px, 0, 0);
  -moz-transform: translate3d(0px, 0, 0);
  -o-transform: translate3d(0px, 0, 0);
  -ms-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}

.nav-open .navbar-translate {
  -webkit-transform: translate3d(-230px, 0, 0);
  -moz-transform: translate3d(-230px, 0, 0);
  -o-transform: translate3d(-230px, 0, 0);
  -ms-transform: translate3d(-230px, 0, 0);
  transform: translate3d(-230px, 0, 0);
}

/* navbar */

.navbar {
  border: 0;
  border-radius: 3px;
  padding: 10px 0;
  margin-bottom: 20px;
  color: #555;
  background-color: #fff !important;
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, .12), 0 7px 10px -5px rgba(0, 0, 0, .15);
  z-index: 9999;
  transition: all .15s ease 0s;
}

.navbar.navbar-transparent {
  background-color: transparent !important;
  box-shadow: none;
  padding-top: 25px;
  color: #fff;
}

.navbar.fixed-top {
  border-radius: 0;
}

.navbar .navbar-brand {
  position: relative;
  color: inherit;
  height: 50px;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 30px;
  padding: .625rem 0;
}

.navbar .navbar-toggler .navbar-toggler-icon {
  position: relative;
  width: 22px;
  height: 2px;
  vertical-align: middle;
  outline: 0;
  display: block;
  border-radius: 1px;
  background-color: #fff;
}

.navbar .navbar-toggler .navbar-toggler-icon+.navbar-toggler-icon {
  margin-top: 4px;
}

.navbar .navbar-toggler .navbar-toggler-icon:nth-child(2) {
  top: 0px;
  -webkit-animation: topbar-back 500ms linear 0s;
  -moz-animation: topbar-back 500ms linear 0s;
  animation: topbar-back 500ms 0s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.navbar .navbar-toggler .navbar-toggler-icon:nth-child(3) {
  opacity: 1;
}

.navbar .navbar-toggler .navbar-toggler-icon:nth-child(4) {
  bottom: 0px;
  -webkit-animation: bottombar-back 500ms linear 0s;
  -moz-animation: bottombar-back 500ms linear 0s;
  animation: bottombar-back 500ms 0s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.navbar .navbar-toggler.toggled .navbar-toggler-icon:nth-child(2) {
  top: 6px;
  -webkit-animation: topbar-x 500ms linear 0s;
  -moz-animation: topbar-x 500ms linear 0s;
  animation: topbar-x 500ms 0s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.navbar .navbar-toggler.toggled .navbar-toggler-icon:nth-child(3) {
  opacity: 0;
}

.navbar .navbar-toggler.toggled .navbar-toggler-icon:nth-child(4) {
  bottom: 6px;
  -webkit-animation: bottombar-x 500ms linear 0s;
  -moz-animation: bottombar-x 500ms linear 0s;
  animation: bottombar-x 500ms 0s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.navbar .navbar-nav .nav-item .nav-link {
  position: relative;
  color: inherit;
  padding: .9375rem;
  font-weight: 400;
  font-size: 12px;
  border-radius: 3px;
  line-height: 20px;
  text-transform: uppercase;
}

.navbar .navbar-nav .nav-item .nav-link:not(.btn) .material-icons {
  margin-top: -7px;
  top: 3px;
  position: relative;
  margin-right: 3px;
}

.navbar .navbar-nav .nav-item .nav-link .material-icons {
  font-size: 1.25rem;
  max-width: 24px;
  margin-top: -1.1em;
}

.navbar .navbar-nav .nav-item .nav-link:not(.btn) .material-icons {
  margin-top: -7px;
  top: 3px;
  position: relative;
  margin-right: 3px;
}

.navbar .navbar-nav .nav-item .nav-link .fa,
.navbar .navbar-nav .nav-item .nav-link .material-icons {
  font-size: 1.25rem;
  max-width: 24px;
  margin-top: -1.1em;
}

.navbar .navbar-nav .nav-item .nav-link:not(.btn-just-icon) .fa {
  position: relative;
  top: 2px;
  margin-top: -4px;
  margin-right: 4px;
}

a .material-icons {
  vertical-align: middle;
}

/* dropdown */

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 10rem;
  margin: .125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: .25rem;
}

.dropdown-menu.dropdown-with-icons .dropdown-item {
  padding: .75rem 1.25rem .75rem .75rem;
}

.dropdown-menu .dropdown-item,
.dropdown-menu li>a {
  position: relative;
  width: auto;
  display: flex;
  flex-flow: nowrap;
  align-items: center;
  color: #333;
  font-weight: 400;
  text-decoration: none;
  font-size: .8125rem;
  border-radius: .125rem;
  margin: 0 .3125rem;
  -webkit-transition: all 150ms linear;
  -moz-transition: all 150ms linear;
  -o-transition: all 150ms linear;
  -ms-transition: all 150ms linear;
  transition: all 150ms linear;
  min-width: 7rem;
  padding: .625rem 1.25rem;
  overflow: hidden;
  line-height: 1.428571;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

.dropdown-menu.dropdown-with-icons .dropdown-item .material-icons {
  vertical-align: middle;
  font-size: 24px;
  position: relative;
  margin-top: -4px;
  top: 1px;
  margin-right: 12px;
  opacity: .5;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu a:active,
.dropdown-menu a:focus,
.dropdown-menu a:hover {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(156, 39, 176, .4);
  background-color: #9c27b0;
  color: #FFF;
}


.blog-post .page-header {
  min-height: 100vh;
}

.page-header {
  height: 100vh;
  background-position: 50%;
  background-size: cover;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
}

.header-filter:before {
  background: rgba(0, 0, 0, .5);
}

.header-filter:after,
.header-filter:before {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  top: 0;
  content: "";
}

.page-header .title,
.page-header>.container {
  color: #fff;
}

.card-title,
.footer-big h4,
.footer-big h5,
.footer-brand,
.info-title,
.media .media-heading,
.title {
  font-weight: 700;
  font-family: Roboto Slab, Times New Roman, serif;
}

.title {
  margin-top: 30px;
  margin-bottom: 25px;
  min-height: 32px;
}

.header-filter .container {
  z-index: 2;
  position: relative;
}


.main-raised {
  margin: -60px 30px 0;
  border-radius: 6px;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
}

.main {
  background: #fff;
  position: relative;
  z-index: 3;
}

.section {
  padding: 70px 0;
}

.blog-post .section-text {
  padding-bottom: 0;
}

.section,
.section-image {
  background-position: 50%;
  background-size: cover;
}

.blog-post .section-text p {
  font-size: 1.188rem;
  line-height: 1.5em;
  color: #555;
  margin-bottom: 30px;
}

p {
  font-size: 14px;
  margin: 0 0 10px;
}


.blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  border-left: 5px solid #eee;
  font-size: 1.25rem;
}

.blog-post .section-text .blockquote p {
  font-size: 1.5rem;
}

.blog-post .section-text p {
  font-size: 1.188rem;
  line-height: 1.5em;
  color: #555;
  margin-bottom: 30px;
}

.blockquote p {
  font-size: 1.063rem;
  font-style: italic;
}


.blockquote small {
  display: block;
  font-size: 80%;
  line-height: 1.42857143;
  color: #777;
}

.rounded {
  border-radius: 6px !important;
}

.img-raised {
  box-shadow: 0 5px 15px -8px rgba(0, 0, 0, .24), 0 8px 10px -5px rgba(0, 0, 0, .2);
  width: 100%;
}

.img-fluid,
.img-thumbnail {
  max-width: 100%;
  height: auto;
}


img {
  vertical-align: middle;
  border-style: none;
}

.badge {
  display: inline-block;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  padding: 5px 12px;
  text-transform: uppercase;
  font-size: 10px;
  color: #fff;

}

.badge-pill {
  border-radius: 10rem;
}


.badge.badge-primary {
  background-color: #9c27b0;
}


.blog-post .section-blog-info .btn {
  margin-top: 0;
  margin-bottom: 0;
}

.blog-post .section-blog-info .card-profile {
  margin-top: 0;
  text-align: left;
}

h4.card-title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
}

.card-plain {
  background: transparent;
  box-shadow: none;
}


.card .card-title {
  margin-top: .625rem;
}


.blog-post .section-blog-info .card-profile .description {
  font-size: 1rem;
  font-weight: 300;
}

.card-description,
.description,
.footer-big p {
  color: #999;
}

.blog-post .section-blog-info .card-profile .btn {
  margin-top: 25px;
}

.card-plain.card-profile .card-avatar,
.card-plain.card-testimonial .card-avatar {
  margin-top: 0;
}

.card-profile [class*=col-] .card-avatar {
  width: auto;
}

.card-profile .card-avatar,
.card-testimonial .card-avatar {
  margin: -50px auto 0;
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 16px 38px -12px rgba(0, 0, 0, .56), 0 4px 25px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
}

.card-profile .card-avatar {
  width: 130px;
  max-width: 130px;
  max-height: 130px;
}


.card-profile .card-avatar img,
.card-testimonial .card-avatar img {
  width: 100%;
  height: auto;
}

.media {
  display: flex;
  align-items: flex-start;
}


.media .media-body {
  padding-right: 10px;
}


.media-body {
  flex: 1;
}

.media .media-heading {
  color: #3c4858;
  text-decoration: none;
}


.media .media-heading small {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 75%;
  color: #777;
}

.blog-post .media p {
  color: #555;
}

.media-footer {
  height: 100px;
}

.media .media-footer .btn {
  margin-bottom: 20px;
}

.media p {
  color: #999;
  font-size: 1rem;
  line-height: 1.6em;
}

.media-left,
.media>.float-left {
  padding: 10px;
}


.media .avatar {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 15px;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2);
}


.media .avatar img {
  width: 100%;
}

.media .media-body textarea {
  margin-top: 15px;
}

.is-focused .form-control {
  border-color: #d2d2d2;
}

.form-control,
.is-focused .form-control {
  background-image: linear-gradient(0deg, #9c27b0 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
}

.bmd-form-group:not(.has-success):not(.has-danger) [class*=" bmd-label"].bmd-label-floating,
.bmd-form-group:not(.has-success):not(.has-danger) [class^=bmd-label].bmd-label-floating {
  color: #aaa;
}

.bmd-form-group .custom-file-control,
.bmd-form-group .form-control,
.bmd-form-group input::placeholder,
.bmd-form-group label {
  line-height: 1;
  box-shadow: none;
}

.bmd-form-group label {
  font-size: .875rem;
}

:focus {
  outline: 0 !important;
  box-shadow: none;
}

.card-blog {
  margin-top: 60px;
}

.card-blog .card-title a {
  font-weight: 700;
}

.card-blog .card-title a:hover {
  color: inherit;
}


.card-blog .card-description {
  font-weight: 300;
}

.card .card-header.card-header-image {
  position: relative;
  padding: 0;
  z-index: 1;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: -30px;
  border-radius: 6px;
}

.card .card-header.card-header-image .colored-shadow {
  transform: scale(.94);
  top: 12px;
  filter: blur(12px);
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  z-index: -1;
  transition: opacity .45s;
  opacity: 0;
}


.card .card-header.card-header-image img {
  width: 100%;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 5px 15px -8px rgba(0, 0, 0, .24), 0 8px 10px -5px rgba(0, 0, 0, .2);
}

.card .card-body,
.card .card-footer {
  padding: .9375rem 1.875rem;
}

.text-info {
  color: #00bcd4 !important;
  font-weight: 500;
  margin-top: 10px;
}

.text-danger {
  color: #f44336 !important;
  font-weight: 500;
  margin-top: 10px;
}

.text-success {
  color: #4caf50 !important;
  font-weight: 500;
  margin-top: 10px;
}

a {
  color: #3e3947;
  text-decoration: none;
  font-weight: 300;
}

a:focus,
a:hover {
  color: #89229b;
  text-decoration: none;
}

footer {
  padding: 1.9375rem 0;
}

footer p {
  color: #3e4857;
  font-weight: 300;
  margin-bottom: 0px;
}

footer p a {
  color: #4c4854;
  font-weight: 400;
}

footer p a:hover {
  color: #8f37aa;
  text-decoration: none;
}

/* buttons */

.btn {
  position: relative;
  padding: 12px 30px;
  margin: .3125rem 1px;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.428571;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  border-radius: .2rem;
  outline: 0;
  transition: box-shadow .2s cubic-bezier(.4, 0, 1, 1), background-color .2s cubic-bezier(.4, 0, .2, 1);
  will-change: box-shadow, transform;
}

.btn.btn-round {
  border-radius: 30px !important;
}

.btn,
.btn.btn-default {
  color: #fff;
  background-color: #999;
  border-color: #999;
  box-shadow: 0 2px 2px 0 hsla(0, 0%, 60%, .14), 0 3px 1px -2px hsla(0, 0%, 60%, .2), 0 1px 5px 0 hsla(0, 0%, 60%, .12);
}


.btn.btn-default:active,
.btn.btn-default:focus,
.btn.btn-default:hover,
.btn:active,
.btn:focus,
.btn:hover {
  box-shadow: 0 14px 26px -12px hsla(0, 0%, 60%, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px hsla(0, 0%, 60%, .2);
}

.btn.btn-default:active:focus {
  color: #fff;
  background-color: #999;
}

.btn.btn-rose.focus,
.btn.btn-rose:focus,
.btn.btn-rose:hover {
  color: #fff;
  background-color: #ea2c6d;
  border-color: #b8124a;
}

.btn .material-icons,
.btn:not(.btn-just-icon):not(.btn-fab) .fa {
  position: relative;
  display: inline-block;
  top: 0;
  margin-top: -1em;
  margin-bottom: -1em;
  font-size: 1.1rem;
  vertical-align: middle;
}

.btn.btn-rose {
  color: #fff;
  background-color: #e91e63;
  border-color: #e91e63;
  box-shadow: 0 2px 2px 0 rgba(233, 30, 99, .14), 0 3px 1px -2px rgba(233, 30, 99, .2), 0 1px 5px 0 rgba(233, 30, 99, .12);
}

.btn-group-lg .btn,
.btn-group-lg>.btn,
.btn.btn-lg {
  padding: 1.125rem 2.25rem;
  font-size: .875rem;
  line-height: 1.333333;
  border-radius: .2rem;
}

.btn.btn-google {
  color: #fff;
  background-color: #dd4b39;
  border-color: #dd4b39;
  box-shadow: 0 2px 2px 0 rgba(221, 75, 57, .14), 0 3px 1px -2px rgba(221, 75, 57, .2), 0 1px 5px 0 rgba(221, 75, 57, .12);
}

.btn.btn-google:active,
.btn.btn-google:focus,
.btn.btn-google:hover {
  box-shadow: 0 14px 26px -12px rgba(221, 75, 57, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(221, 75, 57, .2);
}

.btn.btn-google:active:focus {
  color: #fff;
  background-color: #dd4b39;
}

.btn.btn-twitter {
  color: #fff;
  background-color: #55acee;
  border-color: #55acee;
  box-shadow: 0 2px 2px 0 rgba(85, 172, 238, .14), 0 3px 1px -2px rgba(85, 172, 238, .2), 0 1px 5px 0 rgba(85, 172, 238, .12);
}

.btn.btn-twitter:active,
.btn.btn-twitter:focus,
.btn.btn-twitter:hover {
  box-shadow: 0 14px 26px -12px rgba(85, 172, 238, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(85, 172, 238, .2);
}

.btn.btn-twitter:active:focus {
  color: #fff;
  background-color: #55acee;
}

.btn.btn-facebook {
  color: #fff;
  background-color: #3b5998;
  border-color: #3b5998;
  box-shadow: 0 2px 2px 0 rgba(59, 89, 152, .14), 0 3px 1px -2px rgba(59, 89, 152, .2), 0 1px 5px 0 rgba(59, 89, 152, .12);
}

.btn.btn-facebook:active,
.btn.btn-facebook:focus,
.btn.btn-facebook:hover {
  box-shadow: 0 14px 26px -12px rgba(59, 89, 152, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(59, 89, 152, .2);
}

.btn.btn-facebook:active:focus {
  color: #fff;
  background-color: #3b5998;
}

.btn.btn-primary {
  color: #fff;
  background-color: #9c27b0;
  border-color: #9c27b0;
  box-shadow: 0 2px 2px 0 rgba(156, 39, 176, .14), 0 3px 1px -2px rgba(156, 39, 176, .2), 0 1px 5px 0 rgba(156, 39, 176, .12);
}

.btn.btn-primary.focus,
.btn.btn-primary:focus,
.btn.btn-primary:hover {
  color: #fff;
  background-color: #9124a3;
  border-color: #701c7e;
}

.btn.btn-primary:active {
  color: #fff !important;
  background-color: #9c27b0 !important;
}

.btn.btn-primary:focus:active {
  outline: none;
}

.btn.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:hover {
  box-shadow: 0 14px 26px -12px rgba(156, 39, 176, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(156, 39, 176, .2);
}

.btn.btn-primary.btn-link {
  box-shadow: none;
}

.btn.btn-danger.btn-link {
  box-shadow: none;
}

.btn.btn-link:active,
.btn.btn-link:focus,
.btn.btn-link:hover {
  text-decoration: none !important;
}

.btn.btn-default.btn-link,
.btn.btn-link {
  background-color: transparent;
  color: #999;
  box-shadow: none;
}

.btn.btn-primary.btn-link,
.btn.btn-primary.btn-link:active,
.btn.btn-primary.btn-link:focus,
.btn.btn-primary.btn-link:hover {
  background-color: transparent;
  color: #9c27b0;
}

.btn.btn-danger.btn-link,
.btn.btn-danger.btn-link:active,
.btn.btn-danger.btn-link:focus,
.btn.btn-danger.btn-link:hover {
  background-color: transparent;
  color: #f44336;
}

a.btn.btn-primary.btn-link.float-right:active {
  background: transparent !important;
  box-shadow: none;
  color: #9c27b0 !important;
}

a.btn.btn-primary.btn-link.float-right:active:focus {
  box-shadow: none;
}

a.btn.btn-danger.btn-link.float-right:active:focus {
  box-shadow: none;
}

/* tooltips */

body .tooltip-arrow {
  display: none;
}

body .tooltip.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0px, 0);
  -moz-transform: translate3d(0, 0px, 0);
  -o-transform: translate3d(0, 0px, 0);
  -ms-transform: translate3d(0, 0px, 0);
  transform: translate3d(0, 0px, 0);
}

body .tooltip {
  opacity: 0;
  transition: opacity, transform .2s ease;
  -webkit-transform: translate3d(0, 5px, 0);
  -moz-transform: translate3d(0, 5px, 0);
  -o-transform: translate3d(0, 5px, 0);
  -ms-transform: translate3d(0, 5px, 0);
  transform: translate3d(0, 5px, 0);
  font-size: 0.75rem;
}

body .tooltip.bs-tooltip-top .arrow::before,
body .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before,
body .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #fff;
}

body .tooltip.bs-tooltip-right .arrow::before,
body .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before,
body .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #fff;
}

body .tooltip.bs-tooltip-left .arrow::before,
body .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before,
body .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #fff;
}

body .tooltip.bs-tooltip-bottom .arrow::before,
body .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
body .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #fff;
}

body .tooltip-inner {
  padding: 10px 15px;
  min-width: 130px;
}

body .popover,
body .tooltip-inner {
  line-height: 1.5em;
  background: #fff;
  border: none;
  border-radius: 3px;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  color: #555;
}

body .popover {
  padding: 0;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.popover.left>.arrow,
.popover.right>.arrow,
.popover.top>.arrow,
.popover.bottom>.arrow {
  border: none;
}

.popover.bs-popover-top .arrow::before,
.popover.bs-popover-auto[x-placement^="top"] .arrow::before,
.popover.bs-popover-auto[x-placement^="top"] .arrow::before,
.popover.bs-popover-bottom .arrow::before,
.popover.bs-popover-auto[x-placement^="bottom"] .arrow::before,
.popover.bs-popover-auto[x-placement^="bottom"] .arrow::before,
.popover.bs-popover-right .arrow::before,
.popover.bs-popover-auto[x-placement^="right"] .arrow::before,
.popover.bs-popover-auto[x-placement^="right"] .arrow::before,
.popover.bs-popover-left .arrow::before,
.popover.bs-popover-auto[x-placement^="left"] .arrow::before,
.popover.bs-popover-auto[x-placement^="left"] .arrow::before {
  border: 0;
}

body .popover-header {
  background-color: #fff;
  border: none;
  padding: 15px 15px 5px;
  font-size: 1.125rem;
  margin: 0;
  color: #555;
}

body .popover-body {
  padding: 10px 15px 15px;
  line-height: 1.4;
  color: #555;
}

@media (max-width: 991px) {
  .navbar .navbar-translate {
    width: 100%;
    position: relative;
    display: flex;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: transform .5s cubic-bezier(.685, .0473, .346, 1);
    -moz-transition: transform .5s cubic-bezier(.685, .0473, .346, 1);
    -o-transition: transform .5s cubic-bezier(.685, .0473, .346, 1);
    -ms-transition: transform .5s cubic-bezier(.685, .0473, .346, 1);
    transition: transform .5s cubic-bezier(.685, .0473, .346, 1);
  }

  .navbar-collapse {
    position: fixed;
    display: block;
    top: 0;
    height: 100vh;
    width: 230px;
    right: 0;
    margin-right: 0 !important;
    z-index: 1032;
    visibility: visible;
    background-color: #fff;
    overflow-y: visible;
    border-top: none;
    text-align: left;
    padding-right: 0;
    padding-left: 0;
    max-height: none !important;
    -webkit-transform: translate3d(230px, 0, 0);
    -moz-transform: translate3d(230px, 0, 0);
    -o-transform: translate3d(230px, 0, 0);
    -ms-transform: translate3d(230px, 0, 0);
    transform: translate3d(230px, 0, 0);
    -webkit-transition: all .5s cubic-bezier(.685, .0473, .346, 1);
    -moz-transition: all .5s cubic-bezier(.685, .0473, .346, 1);
    -o-transition: all .5s cubic-bezier(.685, .0473, .346, 1);
    -ms-transition: all .5s cubic-bezier(.685, .0473, .346, 1);
    transition: all .5s cubic-bezier(.685, .0473, .346, 1);
  }

  .navbar-collapse .navbar-nav .nav-item .nav-link {
    color: #3C4858;
    margin: 5px 15px;
  }

  .navbar-collapse .navbar-nav .nav-item:after {
    width: calc(100% - 30px);
    content: "";
    display: block;
    height: 1px;
    margin-left: 15px;
    background-color: #e5e5e5;
  }

  .navbar-collapse .dropdown-toggle:after {
    position: absolute;
    right: 16px;
    margin-top: 8px;
  }

  .navbar .dropdown .dropdown-menu,
  .navbar .dropdown.show .dropdown-menu {
    background-color: transparent;
    border: 0;
    padding-bottom: 15px;
    transition: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    transform: none !important;
    width: auto;
    margin-bottom: 15px;
    padding-top: 0;
    height: 300px;
    animation: none;
    opacity: 1;
    overflow-y: scroll;
  }

  .navbar .dropdown-menu .dropdown-item {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }


}

var big_image;

$(document).ready(function() {
  BrowserDetect.init();

  // Init Material scripts for buttons ripples, inputs animations etc, more info on the next link https://github.com/FezVrasta/bootstrap-material-design#materialjs
  $('body').bootstrapMaterialDesign();

  window_width = $(window).width();

  $navbar = $('.navbar[color-on-scroll]');
  scroll_distance = $navbar.attr('color-on-scroll') || 500;

  $navbar_collapse = $('.navbar').find('.navbar-collapse');

  //  Activate the Tooltips
  $('[data-toggle="tooltip"], [rel="tooltip"]').tooltip();

  // Activate Popovers
  $('[data-toggle="popover"]').popover();

  if ($('.navbar-color-on-scroll').length != 0) {
    $(window).on('scroll', materialKit.checkScrollForTransparentNavbar);
  }

  materialKit.checkScrollForTransparentNavbar();

  if (window_width >= 768) {
    big_image = $('.page-header[data-parallax="true"]');
    if (big_image.length != 0) {
      $(window).on('scroll', materialKit.checkScrollForParallax);
    }

  }


});

$(document).on('click', '.navbar-toggler', function() {
  $toggle = $(this);

  if (materialKit.misc.navbar_menu_visible == 1) {
    $('html').removeClass('nav-open');
    materialKit.misc.navbar_menu_visible = 0;
    $('#bodyClick').remove();
    setTimeout(function() {
      $toggle.removeClass('toggled');
    }, 550);

    $('html').removeClass('nav-open-absolute');
  } else {
    setTimeout(function() {
      $toggle.addClass('toggled');
    }, 580);


    div = '<div id="bodyClick"></div>';
    $(div).appendTo("body").click(function() {
      $('html').removeClass('nav-open');

      if ($('nav').hasClass('navbar-absolute')) {
        $('html').removeClass('nav-open-absolute');
      }
      materialKit.misc.navbar_menu_visible = 0;
      $('#bodyClick').remove();
      setTimeout(function() {
        $toggle.removeClass('toggled');
      }, 550);
    });

    if ($('nav').hasClass('navbar-absolute')) {
      $('html').addClass('nav-open-absolute');
    }

    $('html').addClass('nav-open');
    materialKit.misc.navbar_menu_visible = 1;
  }
});

materialKit = {
  misc: {
    navbar_menu_visible: 0,
    window_width: 0,
    transparent: true,
    fixedTop: false,
    navbar_initialized: false,
    isWindow: document.documentMode || /Edge/.test(navigator.userAgent)
  },

  initFormExtendedDatetimepickers: function() {
    $('.datetimepicker').datetimepicker({
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
      }
    });
  },

  initSliders: function() {
    // Sliders for demo purpose
    var slider = document.getElementById('sliderRegular');

    noUiSlider.create(slider, {
      start: 40,
      connect: [true, false],
      range: {
        min: 0,
        max: 100
      }
    });

    var slider2 = document.getElementById('sliderDouble');

    noUiSlider.create(slider2, {
      start: [20, 60],
      connect: true,
      range: {
        min: 0,
        max: 100
      }
    });
  },

  checkScrollForParallax: function() {
    oVal = ($(window).scrollTop() / 3);
    big_image.css({
      'transform': 'translate3d(0,' + oVal + 'px,0)',
      '-webkit-transform': 'translate3d(0,' + oVal + 'px,0)',
      '-ms-transform': 'translate3d(0,' + oVal + 'px,0)',
      '-o-transform': 'translate3d(0,' + oVal + 'px,0)'
    });
  },

  checkScrollForTransparentNavbar: debounce(function() {
    if ($(document).scrollTop() > scroll_distance) {
      if (materialKit.misc.transparent) {
        materialKit.misc.transparent = false;
        $('.navbar-color-on-scroll').removeClass('navbar-transparent');
      }
    } else {
      if (!materialKit.misc.transparent) {
        materialKit.misc.transparent = true;
        $('.navbar-color-on-scroll').addClass('navbar-transparent');
      }
    }
  }, 17)
};

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    }, wait);
    if (immediate && !timeout) func.apply(context, args);
  };
};

var BrowserDetect = {
  init: function() {
    this.browser = this.searchString(this.dataBrowser) || "Other";
    this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
  },
  searchString: function(data) {
    for (var i = 0; i < data.length; i++) {
      var dataString = data[i].string;
      this.versionSearchString = data[i].subString;

      if (dataString.indexOf(data[i].subString) !== -1) {
        return data[i].identity;
      }
    }
  },
  searchVersion: function(dataString) {
    var index = dataString.indexOf(this.versionSearchString);
    if (index === -1) {
      return;
    }

    var rv = dataString.indexOf("rv:");
    if (this.versionSearchString === "Trident" && rv !== -1) {
      return parseFloat(dataString.substring(rv + 3));
    } else {
      return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
    }
  },

  dataBrowser: [{
      string: navigator.userAgent,
      subString: "Chrome",
      identity: "Chrome"
    },
    {
      string: navigator.userAgent,
      subString: "MSIE",
      identity: "Explorer"
    },
    {
      string: navigator.userAgent,
      subString: "Trident",
      identity: "Explorer"
    },
    {
      string: navigator.userAgent,
      subString: "Firefox",
      identity: "Firefox"
    },
    {
      string: navigator.userAgent,
      subString: "Safari",
      identity: "Safari"
    },
    {
      string: navigator.userAgent,
      subString: "Opera",
      identity: "Opera"
    }
  ]

};