/* Space out content a bit */

body {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

/* Everything but the jumbotron gets side spacing for mobile first views */

.header, .marketing, .footer {
	padding-right: 1rem;
	padding-left: 1rem;
}

/* Custom page header */

.header {
	padding-bottom: 1rem;
	border-bottom: .05rem solid #e5e5e5;
}

/* Make the masthead heading the same height as the navigation */

.header h3 {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 3rem;
}

/* Custom page footer */

.footer {
	padding-top: 1.5rem;
	color: #777;
	border-top: .05rem solid #e5e5e5;
}

/* Customize container */

@media (min-width: 48em) {
	.container {
		max-width: 46rem;
	}
}
.container-narrow>hr {
	margin: 2rem 0;
}

/* Main marketing message and sign up button */

.jumbotron {
	text-align: center;
	border-bottom: .05rem solid #e5e5e5;
}
.jumbotron .btn {
	padding: .75rem 1.5rem;
	font-size: 1.5rem;
}

/* Supporting marketing content */

.marketing {
	margin: 3rem 0;
}
.marketing p+h4 {
	margin-top: 1.5rem;
}

/* Responsive: Portrait tablets and up */

@media screen and (min-width: 48em) {
	/* Remove the padding we set earlier */
	.header, .marketing, .footer {
		padding-right: 0;
		padding-left: 0;
	}
	/* Space out the masthead */
	.header {
		margin-bottom: 2rem;
	}
	/* Remove the bottom border on the jumbotron for visual effect */
	.jumbotron {
		border-bottom: 0;
	}
}


.c-icon {
    width:  72px;
    height: 72px;
    fill: currentColor;
    transition: .2s;
	margin-left: -5px;
}

.c-link--facebook:hover  { color: #3b5998 }
.c-link--twitter:hover   { color: #55acee }
.c-link--pinterest:hover { color: #bd081c }
.c-link--instagram:hover { color: #833ab4 }
.c-link--facebook:hover::after  { background: #3b5998 }
.c-link--twitter:hover::after   { background: #55acee }
.c-link--pinterest:hover::after { background: #bd081c }
.c-link--instagram:hover::after { background: #833ab4 }

.c-link {
    position: relative;
    color: #bbb;
}

.c-link:not(:last-of-type) {
    margin-right: 15px;
}

.c-tooltip::before,
.c-tooltip::after {
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -10px);
    opacity: 0;
    transition: .2s;
}

.c-tooltip::before {
    content: '';
    bottom: calc(100% + 44px);
    border: solid 5px transparent;
    border-top-color: currentColor;
}

.c-tooltip::after {
    content: attr(aria-label);
    bottom: calc(100% + 53px);
    padding: .61em .93em;
    font-size: .875rem;
    color: white;
    border-radius: 3px;
}


.c-tooltip:hover::before,
.c-tooltip:hover::after {
    opacity: 1;
    transform: translate(-50%);
}