hippie/source/style/modules/demo/_demo_module.scss

.demo__intro {
	@extend .sec__main_center;
	border-top-width: $border_width_8;
	border-top-style: solid;
	border-color: $basic_border_color;
	padding-top: $space_3;
}

.demo__header {
	padding: $double_space;

	nav {

		ul {
			margin: 0;
		}
	}
}

.header__fancy {
	background-color: transparentize($bravo_color, .4);

	nav {

		a {
			background-color: transparentize($alpha_color, .4);
			color: $alpha_color;

			&:active,
			&:focus,
			&:hover {
				background-color: rgba($brightest_color, .2);
				color: $brightest_color;
			}
		}
	}
}

.header__fix {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	background-color: transparentize($charlie_color, .4);

	nav {

		a {

			&:active,
			&:focus,
			&:hover {
				background-color: rgba($brightest_color, .2);
				color: $brightest_color;
			}
		}
	}
}

.demo__footer {
	width: 100%;
	// height: 128px;
	padding: $double_space 0;
	background-color: $dark_color;
	color: $bright_color;

	nav {

		a {
			color: $brightest_color;
		}
	}
}

.demo__avatar {

	img {
		opacity: 1;
		width: 128px;
		height: auto;
		min-width: 128px;
		min-height: 128px;
		border-radius: 50%;
		background-color: $delta_color;
	}
}

.demo__flag {
	height: 40vh;
}

.demo__credits {
	margin: $space_3 0 $basic_space 0;
}

.demo__button_32 {
	width: 32px;
	height: 32px;
}



.demo__queries > p {
  padding: $basic_padding;
}

.query__phoneUp {
  background-color: rgba($basic_front_color, .2);
}

.query__phoneOnly {
  @include forPhoneOnly { background-color: rgba($basic_front_color, .2); }
}

.query__tabletPortaitOnly {
  @include forTabletPortraitOnly { background-color: rgba($basic_front_color, .2); }
}

.query__tabletPortraitUp {
  @include forTabletPortraitUp { background-color: rgba($basic_front_color, .2); }
}

.query__tabletLandscapeOnly {
  @include forTabletLandscapeOnly { background-color: rgba($basic_front_color, .2); }
}

.query__tabletLandscapeUp {
  @include forTabletLandscapeUp { background-color: rgba($basic_front_color, .2); }
}

.query__desktopOnly {
  @include forDesktopOnly { background-color: rgba($basic_front_color, .2); }
}

.query__desktopUp {
  @include forDesktopUp { background-color: rgba($basic_front_color, .2); }
}

.query__bigDesktopUp {
  @include forBigDesktopUp { background-color: rgba($basic_front_color, .2); }
}

.demo__query_example {
	@include goingLarge($screen_tiny/1px) {background-color: $alpha_color; }
	@include goingLarge($screen_small/1px) {background-color: $bravo_color; }
	@include goingLarge($screen_medium/1px) {background-color: $charlie_color; }
	@include goingLarge($screen_large/1px) {background-color: $delta_color; }
	@include goingLarge($screen_huge/1px) {background-color: $echo_color; }
	@include goingLarge($screen_gigantic/1px) {background-color: $foxtrot_color; }
	margin-bottom: $space_3;
	padding: $space_3;
	text-align: center;

	&:after {
		@extend code;
		@include goingLarge($screen_tiny/1px) {
			& { content: '768px'; }
		}
		@include goingLarge($screen_small/1px) {
			& { content: '1024px'; }
		}
		@include goingLarge($screen_medium/1px) {
			& { content: '1280px'; }
		}
		@include goingLarge($screen_huge/1px) {
			& { content: '1680px'; }
		}
		@include goingLarge($screen_gigantic/1px) {
			& { content: '1920px'; }
		}
		content: '< 768px';
		padding: $basic_padding;
		border-radius: $basic_corner_radius;
		background-color: rgba($basic_front_color, .2);
	}
}