[people/shoehn/ipfire.org.git] / static / scss / style.scss

/*!
 * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "bootstrap-4.0.0-alpha.6/scss/variables";
@import "bootstrap-4.0.0-alpha.6/scss/mixins";
@import "bootstrap-4.0.0-alpha.6/scss/custom";

// Reset and dependencies
@import "bootstrap-4.0.0-alpha.6/scss/normalize";
// @import "bootstrap-4.0.0-alpha.6/scss/print";

// Core CSS
@import "bootstrap-4.0.0-alpha.6/scss/reboot";
@import "bootstrap-4.0.0-alpha.6/scss/type";
//@import "bootstrap-4.0.0-alpha.6/scss/images";
// @import "bootstrap-4.0.0-alpha.6/scss/code";
@import "bootstrap-4.0.0-alpha.6/scss/grid";
// @import "bootstrap-4.0.0-alpha.6/scss/tables";
// @import "bootstrap-4.0.0-alpha.6/scss/forms";
@import "bootstrap-4.0.0-alpha.6/scss/buttons";

// Components
@import "bootstrap-4.0.0-alpha.6/scss/transitions";
//@import "bootstrap-4.0.0-alpha.6/scss/dropdown";
@import "bootstrap-4.0.0-alpha.6/scss/button-group";
//@import "bootstrap-4.0.0-alpha.6/scss/input-group";
//@import "bootstrap-4.0.0-alpha.6/scss/custom-forms";
@import "bootstrap-4.0.0-alpha.6/scss/nav";
@import "bootstrap-4.0.0-alpha.6/scss/navbar";
//@import "bootstrap-4.0.0-alpha.6/scss/card";
// @import "bootstrap-4.0.0-alpha.6/scss/breadcrumb";
// @import "bootstrap-4.0.0-alpha.6/scss/pagination";
// @import "bootstrap-4.0.0-alpha.6/scss/badge";
// @import "bootstrap-4.0.0-alpha.6/scss/jumbotron";
// @import "bootstrap-4.0.0-alpha.6/scss/alert";
@import "bootstrap-4.0.0-alpha.6/scss/progress";
@import "bootstrap-4.0.0-alpha.6/scss/media";
@import "bootstrap-4.0.0-alpha.6/scss/list-group";
// @import "bootstrap-4.0.0-alpha.6/scss/responsive-embed";
// @import "bootstrap-4.0.0-alpha.6/scss/close";

// Components w/ JavaScript
// @import "bootstrap-4.0.0-alpha.6/scss/modal";
// @import "bootstrap-4.0.0-alpha.6/scss/tooltip";
// @import "bootstrap-4.0.0-alpha.6/scss/popover";
// @import "bootstrap-4.0.0-alpha.6/scss/carousel";

// Utility classes
@import "bootstrap-4.0.0-alpha.6/scss/utilities";


// Colors

.amber-800 {
	color: $amber-800;
}

// Fonts

h1 {
	line-height: 3rem;
}

h2 {
	line-height: 2.75rem;
}

h3 {
	line-height: 2rem;
}

h4 {
	font-weight: 600;
	line-height: 1.75rem;
}

h5 {
	line-height: 1.5rem;
}

p {
	line-height: 1.5rem;
	&.lead {
		line-height: 2rem;
		@include media-breakpoint-down(md) {
			font-size: 1.5rem;
			line-height: 2rem;
		}
		@include media-breakpoint-down(sm) {
			font-size: 1rem;
			line-height: 1.5rem;
		}
	}
}

.display-2 {
	margin-bottom: 4rem;
	@include media-breakpoint-down(md) {
		font-size: 2.5rem;
		line-height: 3.5rem;
		margin-bottom: 3rem;
	}
	@include media-breakpoint-down(sm) {
		font-size: 2rem;
		line-height: 2.75rem;
	}
}

.display-4 {
	@include media-breakpoint-down(sm) {
		font-size: .875rem;
		line-height: 1.25rem;
	}
}

small {
	line-height: 1rem;
}

.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// Images
img {
	&.img-fluid {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

// Icons

.icon {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
	vertical-align: -.15rem;
	overflow: hidden;
	margin-right: .5rem;
}

.i_arrow_down {
	margin: 0;
	position: absolute;
	left: .75rem;
	top: -.25rem;
	animation: scroll 3s infinite;
	@include media-breakpoint-down(sm) {
		width: 2rem !important;
		height: 2rem !important;
		left: .15rem;
		top: -.75rem;
	}
}

.i_lg {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	transform: translateY(-.35rem);
	fill: $red_900;
}

.i_sm {
	vertical-align: top;
	transform: translateY(-.10rem);
}

footer {
	.btn-toolbar .icon {
		height: 2.25rem;
		width: 2.25rem;
		fill: rgba($blue-grey-900, .6);
	}
	.i_heart {
		vertical-align: top;
		transform: translateY(-.15rem);
		@include media-breakpoint-down(sm) {
			transform: translateY(-.75rem);
		}
	}
}

// Buttons

.btn-red900 {
  @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
}
.btn-white {
  @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
}
.btn-bluegrey900 {
  @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
}

button.navbar-toggler div {
	font-family: 'Ubuntu', sans-serif;
	font-size: 1rem;
	display: inline-block;
	position: relative;
	top: -4px;
}

.btn {
	height: 36px;
	text-transform: uppercase;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
	transition: box-shadow .25s ease-in-out;
	&:hover {
		box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
		transition: box-shadow .25s ease-in-out;
	}
	@include media-breakpoint-down(sm) {
		font-size: .875rem;
	}
}

.btn-outline-primary,
.btn-outline-secondary {
	transition: background-color .25s ease-in-out;
	&:hover {
		transition: background-color .25s ease-in-out;
	}
}

.btn-lg {
	height: 48px;
	margin: 0 24px;
	@include media-breakpoint-down(sm) {
		height: 36px;
		margin: 0 8px;
		padding: 1rem;
		font-size: .875rem;
		line-height: 0;
	}
}

.btn-md {
	font-size: 0.875rem;
	line-height: 1.25rem;
	padding: .4rem 1rem .5rem 1rem;
}

.btn-block {
	margin: 0 0 1.5rem 0;
	@include media-breakpoint-up(md) {
		margin: 0 0 2rem 0;	
	}
	@include media-breakpoint-down(sm) {
		font-size: .875rem;
		line-height: 0;
	}
}

button:focus {
	outline: none;
}

// Top Navigation

.fixed-top {
	transition: background-color 700ms linear;
	.navbar {
		width: 100%;
		@include media-breakpoint-down(md) {
			padding: .5rem 0;
		}
		.navbar-toggler-left {
			left: -1rem;
		}
	}
	.navbar-brand {
		opacity: 0;
		transition: opacity 700ms linear;
		@include media-breakpoint-up(lg) {
			opacity: 1;
		}
	}
}

.scrolled {
	background-color: rgba(255, 255, 255, .96);
	.navbar-brand {
		opacity: 1;
		transition: opacity 700ms linear;
	}
}

.menu-text.hidden {
	display: none;
	visibility: hidden;
}

.navbar {
	a {
		color: $blue-grey-900;
	}
	.btn {
		margin-top: .15rem;
	}
}

.navbar-brand {
	font-size: 1.25rem;
	@include media-breakpoint-up(sm) {
		font-size: 2rem;
	}
	font-weight: 300;
	strong {
		font-weight: 900;
	}
	img {
		margin-right: 1rem;
		transform: translateY(-5px);
	}
}

// Sections

section.intro {
	min-height: 100vh;
	background-image: url('../img/header-background.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: center top;
	position: relative;
	.branding {
		padding-top: 6rem;
		@include media-breakpoint-up(md) {
			padding-top: 192px;
		}
		margin-bottom: 64px;
		text-align: center;
		color: $blue-grey-600;
		h1 {
			font-weight: 300 !important;
			color: $blue-grey-900;
			@include media-breakpoint-down(sm) {
				font-size: 4.5rem;
			}
			strong {
				font-weight: 700 !important;
			}
		}
		h1:before {
			content: "";
			height: 60px;
			width: 76px;
			background-image: url('../img/ipfire-tux.png');
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			display: inline-block;
			position: relative;
			top: 4px;
			@include media-breakpoint-up(md) {
				height: 120px;
				width: 93px;
				margin-right: 32px;
				top: 8px;
			}
		}
	}
	.page-scroll {
		position: absolute;
		bottom: 48px;
		left: 50%;
		transform: translateX(-50%);
		.btn {
			width: 36px;
			height: 36px;
			fill: $red_900;
			@include media-breakpoint-up(md) {
				width: 64px;
				height: 64px;
			}
			&:hover .i_arrow_down {
				fill: white;
			}
		}
	}
}

section.content-section {
	padding: 3rem 0;
	@include media-breakpoint-up(md) {
		padding: 72px 0;
	}
}

.feature_icons {
	width: 40px;
	height: 100%;
	float: left;
	margin-right: .75rem;
}

section#news,
footer {
	background-color: rgba($blue-grey-900, .06);
}

section#news {
	color: rgba($blue-grey-900, .6);
	h2 {
		color: $blue-grey-900;
	}
}

section#wishlist {
	background-image: url('../img/wishlist-background.jpg');
	background-size: cover;
	background-position: center center;
}

.bg-progress {
	background-image: linear-gradient(to right, $yellow-700, $amber-800);
}

section#fireinfo {
	border-bottom: 1px solid rgba($blue-grey-900, .2);
}

.circle {
	position: relative;
	p.lead {
		color: $blue-grey-600;
		position: absolute;
		top: calc(50% - 1.25rem);
		width: 100%;
	}
}

footer {
	padding: 3rem 0 0 0;
	h4 {
		margin-bottom: 1.25rem;
		color: rgba($blue-grey-900, .6);
	}
	ul {
		li {
			font-size: $small-font-size;
			margin-bottom: .75rem;
			a {
				color: rgba($blue-grey-900, .6);
				text-decoration: none;
				&:hover {
					color: $blue-grey-900;
					text-decoration: underline;
				}
			}
		}
	}
	.btn-lg {
		margin-bottom: 2.75rem;
	}
	.btn-sm {
		box-shadow: none;
		&:hover {
			box-shadow: none;
		}
	}
}

#copyright {
	background-color: rgba($blue-grey-900, .06);
	padding: 1rem 0;
}

// Animation

@keyframes scroll {
  0%   { transform: translateY(30%); }
  50% { transform: translateY(50%); }
  100% { transform: translateY(30%); }
}
Commit	Line	Data
b2051dd7 S	1	/*!
	2	* Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
	3	* Copyright 2011-2017 The Bootstrap Authors
	4	* Copyright 2011-2017 Twitter, Inc.
	5	* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
	6	*/
	7
	8	// Core variables and mixins
	9	@import "bootstrap-4.0.0-alpha.6/scss/variables";
	10	@import "bootstrap-4.0.0-alpha.6/scss/mixins";
	11	@import "bootstrap-4.0.0-alpha.6/scss/custom";
	12
	13	// Reset and dependencies
	14	@import "bootstrap-4.0.0-alpha.6/scss/normalize";
	15	// @import "bootstrap-4.0.0-alpha.6/scss/print";
	16
	17	// Core CSS
	18	@import "bootstrap-4.0.0-alpha.6/scss/reboot";
	19	@import "bootstrap-4.0.0-alpha.6/scss/type";
22cfab2d	20	//@import "bootstrap-4.0.0-alpha.6/scss/images";
b2051dd7 S	21	// @import "bootstrap-4.0.0-alpha.6/scss/code";
	22	@import "bootstrap-4.0.0-alpha.6/scss/grid";
	23	// @import "bootstrap-4.0.0-alpha.6/scss/tables";
	24	// @import "bootstrap-4.0.0-alpha.6/scss/forms";
	25	@import "bootstrap-4.0.0-alpha.6/scss/buttons";
	26
	27	// Components
	28	@import "bootstrap-4.0.0-alpha.6/scss/transitions";
b6d1f3b7	29	//@import "bootstrap-4.0.0-alpha.6/scss/dropdown";
b2051dd7	30	@import "bootstrap-4.0.0-alpha.6/scss/button-group";
b6d1f3b7 S	31	//@import "bootstrap-4.0.0-alpha.6/scss/input-group";
b6d1f3b7 S	32	//@import "bootstrap-4.0.0-alpha.6/scss/custom-forms";
b2051dd7 S	33	@import "bootstrap-4.0.0-alpha.6/scss/nav";
b2051dd7 S	34	@import "bootstrap-4.0.0-alpha.6/scss/navbar";
b6d1f3b7	35	//@import "bootstrap-4.0.0-alpha.6/scss/card";
b2051dd7 S	36	// @import "bootstrap-4.0.0-alpha.6/scss/breadcrumb";
	37	// @import "bootstrap-4.0.0-alpha.6/scss/pagination";
	38	// @import "bootstrap-4.0.0-alpha.6/scss/badge";
	39	// @import "bootstrap-4.0.0-alpha.6/scss/jumbotron";
97ed546d	40	// @import "bootstrap-4.0.0-alpha.6/scss/alert";
b2051dd7 S	41	@import "bootstrap-4.0.0-alpha.6/scss/progress";
	42	@import "bootstrap-4.0.0-alpha.6/scss/media";
	43	@import "bootstrap-4.0.0-alpha.6/scss/list-group";
97ed546d S	44	// @import "bootstrap-4.0.0-alpha.6/scss/responsive-embed";
97ed546d S	45	// @import "bootstrap-4.0.0-alpha.6/scss/close";
b2051dd7 S	46
	47	// Components w/ JavaScript
	48	// @import "bootstrap-4.0.0-alpha.6/scss/modal";
	49	// @import "bootstrap-4.0.0-alpha.6/scss/tooltip";
	50	// @import "bootstrap-4.0.0-alpha.6/scss/popover";
	51	// @import "bootstrap-4.0.0-alpha.6/scss/carousel";
	52
	53	// Utility classes
97ed546d S	54	@import "bootstrap-4.0.0-alpha.6/scss/utilities";
97ed546d S	55
22cfab2d	56
a6a4d1cf S	57	// Colors
	58
	59	.amber-800 {
	60	color: $amber-800;
	61	}
	62
22cfab2d S	63	// Fonts
	64
	65	h1 {
	66	line-height: 3rem;
	67	}
	68
	69	h2 {
	70	line-height: 2.75rem;
	71	}
	72
	73	h3 {
	74	line-height: 2rem;
	75	}
	76
ccd81281 S	77	h4 {
ccd81281 S	78	font-weight: 600;
22cfab2d S	79	line-height: 1.75rem;
	80	}
	81
	82	h5 {
	83	line-height: 1.5rem;
	84	}
	85
	86	p {
	87	line-height: 1.5rem;
	88	&.lead {
	89	line-height: 2rem;
	90	@include media-breakpoint-down(md) {
	91	font-size: 1.5rem;
	92	line-height: 2rem;
	93	}
	94	@include media-breakpoint-down(sm) {
	95	font-size: 1rem;
	96	line-height: 1.5rem;
	97	}
	98	}
	99	}
	100
	101	.display-2 {
	102	margin-bottom: 4rem;
	103	@include media-breakpoint-down(md) {
	104	font-size: 2.5rem;
	105	line-height: 3.5rem;
	106	margin-bottom: 3rem;
	107	}
	108	@include media-breakpoint-down(sm) {
	109	font-size: 2rem;
	110	line-height: 2.75rem;
	111	}
	112	}
	113
	114	.display-4 {
	115	@include media-breakpoint-down(sm) {
	116	font-size: .875rem;
	117	line-height: 1.25rem;
	118	}
	119	}
	120
	121	small {
	122	line-height: 1rem;
	123	}
	124
	125	.truncate {
	126	width: 100%;
	127	white-space: nowrap;
	128	overflow: hidden;
	129	text-overflow: ellipsis;
	130	}
	131
	132	// Images
	133	img {
	134	&.img-fluid {
	135	width: 100%;
	136	max-width: 100%;
	137	height: auto;
	138	}
	139	}
	140
	141	// Icons
	142
143	.icon {
144	width: 1.5rem;
145	height: 1.5rem;
146	fill: currentColor;
147	vertical-align: -.15rem;
148	overflow: hidden;
149	margin-right: .5rem;
150	}
151
152	.i_arrow_down {
153	margin: 0;
efb8b657 S	154	position: absolute;
	155	left: .75rem;
	156	top: -.25rem;
22cfab2d	157	animation: scroll 3s infinite;
efb8b657 S	158	@include media-breakpoint-down(sm) {
	159	width: 2rem !important;
	160	height: 2rem !important;
	161	left: .15rem;
	162	top: -.75rem;
	163	}
22cfab2d S	164	}
	165
	166	.i_lg {
	167	width: 2.5rem;
	168	height: 2.5rem;
	169	margin: 0;
efb8b657	170	transform: translateY(-.35rem);
22cfab2d S	171	fill: $red_900;
	172	}
	173
	174	.i_sm {
efb8b657 S	175	vertical-align: top;
efb8b657 S	176	transform: translateY(-.10rem);
22cfab2d S	177	}
	178
	179	footer {
	180	.btn-toolbar .icon {
efb8b657 S	181	height: 2.25rem;
efb8b657 S	182	width: 2.25rem;
22cfab2d S	183	fill: rgba($blue-grey-900, .6);
	184	}
	185	.i_heart {
efb8b657 S	186	vertical-align: top;
	187	transform: translateY(-.15rem);
	188	@include media-breakpoint-down(sm) {
	189	transform: translateY(-.75rem);
	190	}
22cfab2d S	191	}
	192	}
	193
	194	// Buttons
	195
	196	.btn-red900 {
	197	@include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
	198	}
	199	.btn-white {
	200	@include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
	201	}
	202	.btn-bluegrey900 {
	203	@include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
ccd81281 S	204	}
	205
	206	button.navbar-toggler div {
	207	font-family: 'Ubuntu', sans-serif;
	208	font-size: 1rem;
	209	display: inline-block;
b3af5d9b S	210	position: relative;
b3af5d9b S	211	top: -4px;
ccd81281 S	212	}
ccd81281 S	213
97ed546d	214	.btn {
22cfab2d	215	height: 36px;
97ed546d	216	text-transform: uppercase;
9ce2074c S	217	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
	218	transition: box-shadow .25s ease-in-out;
	219	&:hover {
	220	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
	221	transition: box-shadow .25s ease-in-out;
	222	}
22cfab2d S	223	@include media-breakpoint-down(sm) {
22cfab2d S	224	font-size: .875rem;
9ce2074c	225	}
97ed546d S	226	}
97ed546d S	227
69a9b33d S	228	.btn-outline-primary,
	229	.btn-outline-secondary {
	230	transition: background-color .25s ease-in-out;
	231	&:hover {
	232	transition: background-color .25s ease-in-out;
	233	}
	234	}
	235
1e5bc9c9	236	.btn-lg {
22cfab2d	237	height: 48px;
1e5bc9c9	238	margin: 0 24px;
22cfab2d S	239	@include media-breakpoint-down(sm) {
22cfab2d S	240	height: 36px;
69a9b33d	241	margin: 0 8px;
22cfab2d S	242	padding: 1rem;
	243	font-size: .875rem;
	244	line-height: 0;
69a9b33d S	245	}
	246	}
	247
efb8b657 S	248	.btn-md {
	249	font-size: 0.875rem;
	250	line-height: 1.25rem;
	251	padding: .4rem 1rem .5rem 1rem;
	252	}
	253
b6d1f3b7	254	.btn-block {
22cfab2d	255	margin: 0 0 1.5rem 0;
ccd81281	256	@include media-breakpoint-up(md) {
22cfab2d S	257	margin: 0 0 2rem 0;
	258	}
	259	@include media-breakpoint-down(sm) {
	260	font-size: .875rem;
	261	line-height: 0;
ccd81281	262	}
b6d1f3b7 S	263	}
b6d1f3b7 S	264
848a7d41 S	265	button:focus {
	266	outline: none;
	267	}
	268
22cfab2d S	269	// Top Navigation
22cfab2d S	270
1e5bc9c9 S	271	.fixed-top {
1e5bc9c9 S	272	transition: background-color 700ms linear;
69a9b33d S	273	.navbar {
69a9b33d S	274	width: 100%;
22cfab2d S	275	@include media-breakpoint-down(md) {
	276	padding: .5rem 0;
	277	}
	278	.navbar-toggler-left {
	279	left: -1rem;
	280	}
69a9b33d S	281	}
	282	.navbar-brand {
	283	opacity: 0;
	284	transition: opacity 700ms linear;
	285	@include media-breakpoint-up(lg) {
	286	opacity: 1;
	287	}
	288	}
1e5bc9c9 S	289	}
	290
	291	.scrolled {
	292	background-color: rgba(255, 255, 255, .96);
69a9b33d S	293	.navbar-brand {
	294	opacity: 1;
	295	transition: opacity 700ms linear;
	296	}
1e5bc9c9 S	297	}
1e5bc9c9 S	298
ccd81281 S	299	.menu-text.hidden {
	300	display: none;
	301	visibility: hidden;
	302	}
	303
1e5bc9c9 S	304	.navbar {
	305	a {
	306	color: $blue-grey-900;
	307	}
b6d1f3b7 S	308	.btn {
	309	margin-top: .15rem;
	310	}
1e5bc9c9 S	311	}
1e5bc9c9 S	312
97ed546d	313	.navbar-brand {
ccd81281 S	314	font-size: 1.25rem;
	315	@include media-breakpoint-up(sm) {
	316	font-size: 2rem;
	317	}
97ed546d	318	font-weight: 300;
22cfab2d S	319	strong {
	320	font-weight: 900;
	321	}
97ed546d S	322	img {
	323	margin-right: 1rem;
	324	transform: translateY(-5px);
	325	}
	326	}
	327
22cfab2d	328	// Sections
97ed546d S	329
	330	section.intro {
	331	min-height: 100vh;
	332	background-image: url('../img/header-background.jpg');
	333	background-size: cover;
	334	background-attachment: fixed;
	335	background-position: center top;
	336	position: relative;
	337	.branding {
69a9b33d S	338	padding-top: 6rem;
	339	@include media-breakpoint-up(md) {
	340	padding-top: 192px;
	341	}
97ed546d S	342	margin-bottom: 64px;
	343	text-align: center;
	344	color: $blue-grey-600;
	345	h1 {
	346	font-weight: 300 !important;
	347	color: $blue-grey-900;
22cfab2d	348	@include media-breakpoint-down(sm) {
69a9b33d S	349	font-size: 4.5rem;
69a9b33d S	350	}
97ed546d S	351	strong {
	352	font-weight: 700 !important;
	353	}
	354	}
	355	h1:before {
	356	content: "";
69a9b33d S	357	height: 60px;
69a9b33d S	358	width: 76px;
97ed546d S	359	background-image: url('../img/ipfire-tux.png');
	360	background-repeat: no-repeat;
	361	background-position: center center;
	362	background-size: contain;
97ed546d S	363	display: inline-block;
97ed546d S	364	position: relative;
69a9b33d S	365	top: 4px;
	366	@include media-breakpoint-up(md) {
	367	height: 120px;
	368	width: 93px;
	369	margin-right: 32px;
	370	top: 8px;
	371	}
97ed546d S	372	}
97ed546d S	373	}
97ed546d S	374	.page-scroll {
	375	position: absolute;
	376	bottom: 48px;
97ed546d S	377	left: 50%;
	378	transform: translateX(-50%);
	379	.btn {
ac8ab589 S	380	width: 36px;
ac8ab589 S	381	height: 36px;
97ed546d	382	fill: $red_900;
69a9b33d S	383	@include media-breakpoint-up(md) {
	384	width: 64px;
	385	height: 64px;
	386	}
a6a4d1cf S	387	&:hover .i_arrow_down {
	388	fill: white;
	389	}
97ed546d S	390	}
97ed546d S	391	}
1e5bc9c9 S	392	}
	393
	394	section.content-section {
6a63d20a	395	padding: 3rem 0;
ccd81281	396	@include media-breakpoint-up(md) {
22cfab2d	397	padding: 72px 0;
ccd81281	398	}
1e5bc9c9 S	399	}
1e5bc9c9 S	400
22cfab2d S	401	.feature_icons {
	402	width: 40px;
	403	height: 100%;
	404	float: left;
	405	margin-right: .75rem;
1e5bc9c9 S	406	}
1e5bc9c9 S	407
b6d1f3b7 S	408	section#news,
b6d1f3b7 S	409	footer {
22cfab2d S	410	background-color: rgba($blue-grey-900, .06);
	411	}
	412
	413	section#news {
	414	color: rgba($blue-grey-900, .6);
	415	h2 {
	416	color: $blue-grey-900;
	417	}
1e5bc9c9 S	418	}
	419
	420	section#wishlist {
	421	background-image: url('../img/wishlist-background.jpg');
	422	background-size: cover;
	423	background-position: center center;
b6d1f3b7 S	424	}
b6d1f3b7 S	425
22cfab2d S	426	.bg-progress {
	427	background-image: linear-gradient(to right, $yellow-700, $amber-800);
	428	}
	429
b6d1f3b7 S	430	section#fireinfo {
	431	border-bottom: 1px solid rgba($blue-grey-900, .2);
	432	}
	433
22cfab2d S	434	.circle {
	435	position: relative;
	436	p.lead {
	437	color: $blue-grey-600;
	438	position: absolute;
	439	top: calc(50% - 1.25rem);
	440	width: 100%;
	441	}
b6d1f3b7 S	442	}
	443
	444	footer {
	445	padding: 3rem 0 0 0;
9ce2074c S	446	h4 {
9ce2074c S	447	margin-bottom: 1.25rem;
22cfab2d	448	color: rgba($blue-grey-900, .6);
9ce2074c S	449	}
	450	ul {
	451	li {
	452	font-size: $small-font-size;
	453	margin-bottom: .75rem;
	454	a {
22cfab2d	455	color: rgba($blue-grey-900, .6);
9ce2074c S	456	text-decoration: none;
9ce2074c S	457	&:hover {
22cfab2d	458	color: $blue-grey-900;
9ce2074c S	459	text-decoration: underline;
	460	}
	461	}
	462	}
	463	}
	464	.btn-lg {
	465	margin-bottom: 2.75rem;
9ce2074c S	466	}
	467	.btn-sm {
	468	box-shadow: none;
	469	&:hover {
	470	box-shadow: none;
	471	}
9ce2074c	472	}
b6d1f3b7 S	473	}
b6d1f3b7 S	474
22cfab2d S	475	#copyright {
	476	background-color: rgba($blue-grey-900, .06);
	477	padding: 1rem 0;
b6eb5162 S	478	}
b6eb5162 S	479
22cfab2d	480	// Animation
b6eb5162	481
22cfab2d	482	@keyframes scroll {
efb8b657 S	483	0% { transform: translateY(30%); }
	484	50% { transform: translateY(50%); }
	485	100% { transform: translateY(30%); }
97ed546d	486	}