/*
	Pages > Why
*/
/*
	Base
*/
/*
	Variables
*/
/*
	Mixins
*/
/*
	Reset
*/
h1, h2, h3, h4, h5, h6 {
  margin: 0 0; }

/*
  Global
*/
body {
  font-size: 16px; }

.fluidrow {
  margin-left: -15px;
  margin-right: -15px; }

#wrapper {
  padding-top: 55px; }

/* ========== Hero ========== */
.page .hero {
  height: 150px; }

.page .hero h1 {
  font-size: 34px;
  margin-bottom: 10px; }

.page .hero h2 {
  font-size: 24px;
  font-weight: 400; }

/* ========== Intro ========== */
.intro {
  margin: 30px 0; }

.intro .video {
  margin-bottom: 30px; }

.intro h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px; }

.intro p {
  font-size: 16px;
  margin-bottom: 15px; }

/* ========== Pie ========== */
.pie {
  background-color: #f5f9fa;
  padding: 30px 0; }

.pie h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px; }

.pie p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 15px; }

.pie img {
  margin-bottom: 35px; }

.pie p.bigger {
  font-size: 18px;
  font-weight: 600; }

/* ========== Change ========== */
.change {
  background-color: #0f354c;
  padding: 30px 0;
  color: #fff; }

.change h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px; }

.change .brief p {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 15px; }

.change .brief p:last-child {
  margin-bottom: 30px; }

.change .features .feature {
  margin-bottom: 25px; }

.change .features img {
  margin-bottom: 15px; }

.change .features h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px; }

.change .features p {
  font-size: 16px;
  font-weight: 400; }

/* ========== Conclusion ========== */
.conclusion {
  padding: 50px 0; }

.conclusion h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px; }

.conclusion ul {
  margin-bottom: 30px; }

.conclusion ul li {
  font-size: 16px; }

.conclusion p {
  font-size: 20px;
  font-weight: 400; }

@media (min-width: 992px) {
  /* ========== Hero ========== */
  .page .hero {
    height: 209px; }

  /* ========== Intro ========== */
  .intro {
    margin: 60px 0; }

  .intro .video {
    margin-bottom: 60px; }

  /* ========== Pie ========== */
  .pie {
    padding: 60px 0; }

  .pie p {
    margin-bottom: 30px; }

  .pie img {
    margin-bottom: 70px; }

  /* ========== Change ========== */
  .change {
    padding: 60px 0; }

  .change .brief p {
    margin-bottom: 30px; }

  .chnage .features .feature {
    margin-bottom: 0; }

  .change .brief p:last-child {
    margin-bottom: 60px; }

  .change .features img {
    margin-bottom: 30px; }

  /* ========== Conclusion ========== */
  .conclusion {
    padding: 100px 0; }

  .conclusion ul {
    margin-bottom: 60px; } }