/*---------------------------------------------------------
 3. Elements (_elements.scss)
-------------------------------------------------------- */
*{
	&,
	&:before,
	&:after {
		@include box-sizing(border-box);
	}
}

h1 {
	@include rem('font-size', $heading-size-1);
}

h2 {
	@include rem('font-size', $heading-size-2);
}

h3 {
	@include rem('font-size', $heading-size-3);
}

h4 {
	@include rem('font-size', $heading-size-4);
}

h5 {
	@include rem('font-size', $heading-size-5);
}

h6 {
	@include rem('font-size', $heading-size-6);
}

h1,
h2,
h3,
h4,
h5,
h6,
.button,
.stag-button,
input[type="submit"],
input[type="reset"],
.button-secondary {
	font-weight: normal;
	text-transform: uppercase;
	font-weight: 700;
}

blockquote {
	clear: both;
	color: #bdbdbd;
	@include media(600px) {
		@include rem('padding-left', $base*5);
	}
	@include media(max-width 599px) {
		@include rem('padding-left', $base*2);
	}
	p {
		@include for(medium-screens) {
			@include rem('font-size', 24px);
		}
		// @include rem('word-spacing', -1px);
		@include rem('font-size', 20px);
	}
	cite {
		color: $detail-lightgray;
		@include rem('margin-bottom', $base);
		@include rem('font-size', 17px); //reset
	}
}
q {
	&:before {
		content: "\201C";
	}
	&:after {
		content: "\201D";
	}
}
tt,
kbd,
pre,
code,
samp {
	font-family: $mono;
	color: $detail-washedgray;
	border: $rule;
	@include rem('padding', 1px 3px);
	@include rem('word-spacing', -1px);
	@include border-radius;
}
pre {
	overflow: auto;
	white-space: pre-wrap;
	@include rem('padding', $base);
	@include rem('margin-bottom', $base);
}
del,
strike {
	color: $detail-lightgray;
}
abbr,
acronym,
dfn {
	cursor: help;
	border-bottom: $rule;
	a & {
		border-bottom: 0; //reset
	}
}
details {
	summary {
		font-weight: 700;
		@include rem('margin-bottom', $base);
	}
	:focus {
		outline: none;
	}
}
ins,
mark {
	background-color: #fff9c0;
}
ins {
	text-decoration: none; //reset
	&:before {
		content: "\005B";
		position: relative;
		@include rem('right', 1px);
	}
	&:after {
		content: "\005D";
		position: relative;
		@include rem('left', 1px);
	}
}
small {
	font-size: .75em;
}
big {
	font-size: 1.25em;
}
sub,
sup {
	@include for(medium-screens) {
		font-size: 68.75%; //11px
	}
	font-size: 75%; //12px
}
address {
	font-style: normal; //reset
	font-weight: 700;
}
hr:not(.stag-divider) {
	height: 1px;
	border: 1px solid #333;
	max-width: 370px;
	margin: $base*2.5 auto;
	position: relative;
	&::before {
		content: "\f097";
		font-family: "FontAwesome";
		position: absolute;
		top: 50%;
		width: 70px;
		left: 50%;
		right: 50%;
		margin-left: -35px;
		text-align: center;
		@include transform(translateY(-50%));
	}
}
/*---------------------------------------------------------
 Definition lists (_elements.scss)
-------------------------------------------------------- */
dl {
	dt {
		margin-bottom: 0; //reset
	}
	dd {
		@include rem('margin-left', 40px);
	}
}
/*---------------------------------------------------------
 Tables (_elements.scss)
-------------------------------------------------------- */
table {
	width: 100%;
	text-align: center;
	border: $rule;
	@include rem('font-size', 14px);
	@extend %break-word;
	caption {
		@include rem('margin-bottom', $base);
	}
	th,
	td {
		@include rem('padding', $base/2 0);
	}
	th {
		color: $detail-black;
		border-left: $rule;
	}
	td {
		border-top: $rule;
		border-left: $rule;
		&[valign="top"] {
			vertical-align: top;
		}
		&[valign="bottom"] {
			vertical-align: bottom;
		}
	}
}

.button-secondary {
	background: transparent;
	display: inline-block;
	color: #333;
	border: 2px solid #333;
	line-height: 1;
	@include rem('padding', 14px 20px);
}

.block-button,
#infinite-handle {
	max-width: 970px;
	margin: 50px auto;
	border: 2px solid #000;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	@include transition(all 200ms);
	span {
		background: transparent;
		color: #000;
		padding: 0;
		@include rem('font-size', 18px);
	}
	a {
		color: inherit;
	}
	&:hover {
		background: #000;
		color: white;
		span {
			color: inherit;
		}
	}

	@include media( max-width $content-width+1 ) {
		margin: {
			left: $base;
			right: $base;
		}
	}
}

#infinite-handle {
	padding: 0;
	a {
		display: block;
		padding: 10px;
	}
}

.infinite-loader {
	margin: 50px auto;
	.spinner {
		margin: 0 auto;
		left: 0 !important;
	}
}

.stag-button--stroke {
	border-width: 2px;
	color: inherit;
}

.sticky,
.gallery-caption,
.bypostauthor {
	color: inherit;
}