.redactor-styles {
	color: $body-color;
	font-size: $font-size;

	font-family: $content-font-family;
	line-height: $base-line;

	@media (max-width: $breakpoint-small) {
	    font-size: 16px;
	}

	@media (min-width: $breakpoint-small) {

		blockquote {
			padding-left: $base-line;
			border-left: 1px solid rgba(0, 0, 0, .1);
		}

	}

	&[dir="rtl"] {
		unicode-bidi: embed;
		direction: rtl;

		& ul,
		& ol {
			& li {
				text-align: right;
			}
		}
		ul,
		ol,
		ul ul,
		ol ol,
		ul ol,
		ol ul {
			margin: 0 $base-line 0 0;
		}
	}

	// links
	a {
		color: $link-color;
		&:focus,
		&:hover {
			color: $link-hover-color;
		}
	}

	// headings
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
		margin-bottom: 12px;
		padding: 0;
		color: $headings-color;
		text-transform: none;
		font-weight: bold;
		font-family: $headings-font-family;
		text-rendering: optimizeLegibility;

		&:empty {
    		min-height: $base-line;
		}
	}
	h1 {
		font-size: $font-size-h1;
		line-height: 44px;
	}
	h2 {
		font-size: $font-size-h2;
		line-height: 36px;
	}
	h3 {
		font-size: $font-size-h3;
		line-height: 32px;
	}
	h4 {
		font-size: $font-size-h4;
		line-height: $base-line;
	}
	h5 {
		font-size: $font-size-h5;
		line-height: $base-line;
	}
	h6 {
		font-size: $font-size-h6;
		line-height: $base-line;
	}


	// Line height and margin
	p,
	ul,
	ol,
	dl,
	blockquote,
	hr,
	pre,
	table,
	figure,
	address {
		margin: 0;
		padding: 0;
	}
	p,
	blockquote {
        &:empty {
    		min-height: $base-line;
		}
	}
    // Top Space
    p,
    ul,
    ol,
    dl,
    blockquote,
    hr,
    pre,
    table,
    form,
    figure {
    	+ h2,
    	+ h3,
    	+ h4,
    	+ h5,
    	+ h6 {
    		margin-top: $base-line;
    	}
    }
	ul,
	ol,
	ul ul,
	ol ol,
	ul ol,
	ol ul {
		margin: 0 0 0 $base-line;
	}
	ul li,
	ol li {
		text-align: left;
	}
	ol ol li {
		list-style-type: lower-alpha;
	}
	ol ol ol li {
		list-style-type: lower-roman;
	}
	p,
	ul,
	ol,
	dl,
	blockquote,
	hr,
	pre,
	table,
	figure,
	address {
		margin-bottom: 16px;
	}

	// quote
	blockquote {
		position: relative;
		padding-left: 1rem;
		color: rgba(0, 0, 0, .6);

		& cite {
			font-size: 80%;
		}
	}


	// address
	address {
		font-style: normal;
	}

	// definition list
	dl dt {
		font-weight: bold;
	}
	dd {
		margin-left: $base-line;
	}

	// text-level
	cite {
		color: rgba(0, 0, 0, .5);
		font-style: italic;
	}
	s,
	del {
		text-decoration: line-through;
	}
	abbr[title],
	dfn[title] {
		border-bottom: 1px dotted #000;
		cursor: help;
	}
	strong,
	b {
		font-weight: bold;
	}
	em,
	i {
		font-style: italic;
	}
	sub,
	sup {
		position: relative;
		margin-left: .2rem;
		font-size: 10px;
		line-height: 0;
	}
	sup {
		top: -.4rem;
	}
	sub {
		bottom: -.2rem;
	}
	strong, b, em, i, sup, sub, u, ins {
    	&:empty {
            display: inline-block;
            min-width: 1px;
            min-height: 1rem;
		}
	}
	figcaption {
		margin: 4px 0;
		color: #999;
		text-align: left;
		font-size: .85em;
	}
	ins,
	u {
		text-decoration: underline;
	}
	mark {
		background-color: $mark-background-color;
		color: #000;
		text-decoration: none;
	}

	// сode
	pre,
	code,
	kbd,
	samp,
	var,
	output {
		font-style: normal;
		font-size: 90%;
		font-family: $monospace-font-family;
	}
	pre {
		overflow: auto;
		margin-top: 16px;
		padding: 16px 20px;
		background: rgba(0, 0, 0, .03);
		color: rgba(0, 0, 0, .75);
		word-wrap: normal;
		font-size: 90%;
		line-height: $base-line;
	}
	mark,
	code,
	samp,
	kbd {
		display: inline-block;
		padding: 2px 4px 1px 4px;
		border-radius: 3px;
		line-height: 1;
	}
	code {
		background: $code-background-color;
	}
	pre code {
		padding: 0;
		border: none;
		background: none;
		font-size: 100%;
		line-height: $base-line;
	}
	var {
		color: rgba(0, 0, 0, .5);
	}
	samp {
		background: #46a9fc;
		color: rgba(255, 255, 255, .9);
	}
	kbd {
		background: #000;
		color: rgba(255, 255, 255, .85);
		white-space: nowrap;
	}


	// Normalize horizontal line
	hr {
		display: block;
		box-sizing: content-box;
		height: 1px;
		border: 0;
		border-top: 1px solid rgba(0, 0, 0, .1);
	}

	// Responsive media
	img,
	video,
	audio,
	embed,
	object {
		max-width: 100%;
	}
	img,
	video,
	embed,
	object {
		height: auto;
	}
	embed,
	object {
	    height: 100%;
	}
	img {
		vertical-align: middle;
		-ms-interpolation-mode: bicubic;
	}

	// tables
	table {
		max-width: 100%;
		width: 100%;
		border-collapse: collapse;
		empty-cells: show;

		caption {
			padding: 0;
			color: rgba(0, 0, 0, .5);
			text-transform: uppercase;
			font-size: 11px;
		}

		th,
		td {
			padding: 16px;
			padding-bottom: 15px;
			border: 1px solid #eee;
		}

		tfoot th,
		tfoot td {
			color: rgba(0, 0, 0, .5);
		}
	}


	// Responsive embedded objects
	& .video-container {
		position: relative;
		margin-bottom: 16px;
		padding-bottom: 56.25%; // ratio 16:9
		height: 0;
		& iframe,
		& object,
		& embed {
			position: absolute;
			top: 0;
			left: 0;
			width: 100% !important;
			height: 100% !important;
		}
	}

	& .p--intro {
		font-size: 1.25em;
	}

	& .p--footnote,
	& .p--caption {
		color: #999;
		font-size: .85em;
	}
}