1/* Space out content a bit */
 2body {
 3  padding-top: 20px;
 4  padding-bottom: 20px;
 5}
 6
 7/* Everything but the jumbotron gets side spacing for mobile first views */
 8.header,
 9.marketing,
10.footer {
11  padding-right: 15px;
12  padding-left: 15px;
13}
14
15/* Custom page header */
16.header {
17  border-bottom: 1px solid #e5e5e5;
18}
19/* Make the masthead heading the same height as the navigation */
20.header h3 {
21  padding-bottom: 19px;
22  margin-top: 0;
23  margin-bottom: 0;
24  line-height: 40px;
25}
26
27/* Custom page footer */
28.footer {
29  padding-top: 19px;
30  color: #777;
31  border-top: 1px solid #e5e5e5;
32}
33
34/* Customize container */
35@media (min-width: 1024px) {
36  .container {
37    max-width: 1000px;
38  }
39}
40.container-narrow > hr {
41  margin: 30px 0;
42}
43
44/* Main marketing message and sign up button */
45.jumbotron {
46  text-align: center;
47  border-bottom: 1px solid #e5e5e5;
48}
49.jumbotron .btn {
50  padding: 14px 24px;
51  font-size: 21px;
52}
53
54/* Supporting marketing content */
55.marketing {
56  margin: 40px 0;
57}
58.marketing p + h4 {
59  margin-top: 28px;
60}
61
62/* Responsive: Portrait tablets and up */
63@media screen and (min-width: 768px) {
64  /* Remove the padding we set earlier */
65  .header,
66  .marketing,
67  .footer {
68    padding-right: 0;
69    padding-left: 0;
70  }
71  /* Space out the masthead */
72  .header {
73    margin-bottom: 30px;
74  }
75  /* Remove the bottom border on the jumbotron for visual effect */
76  .jumbotron {
77    border-bottom: 0;
78  }
79}
80