/*
 * Shortcode: blockquote.scss
 * -----------------------------------------------
*/
$blockquote-border-color: #cdcdcd;
blockquote {
	position: relative;
	//background-color: #fcfcfc;
	//box-shadow: 0 0 1px #ddd;
	padding: 0;
	border-left: 2px solid $blockquote-border-color;
    padding-left: 1rem;
    margin: 15px 0;
	footer {
		color: #888;
		font-size: 15px;
	}
	p {
		color: #444;
		font-size: 1rem;
		line-height: 1.7;
		//font-family: $heading-font;
	}
	
	cite {
		font-size: 0.9rem;
	}

	&.tm-sc-blockquote {
		font-style: normal;
		padding: 20px;
		background-color: #fcfcfc;
		box-shadow: 0 0 1px #ddd;
		border-left: 5px solid $blockquote-border-color;
	}
	&.blockquote-style1 {
	}
	&.blockquote-style2 {
		background-color: #fcfcfc;
		box-shadow: 0 0 1px #ddd;
		border-left: 0;	
		margin-top: 0;
		padding: 20px;
		p {
			font-size: 24px;
			line-height: 1.7;
			color: #333;
		}
		footer {
			color: #888;
		}
	}
	&.blockquote-style3 {
		border-left: 3px solid $blockquote-border-color;
		padding: 0 30px 0;
		background-color: transparent;
		box-shadow: none;
		&:before {
			color: rgba(0, 0, 0, 0.3);
			content: "\f10e";
			font-family: "Font Awesome 5 Free";
			font-size: 50px;
			font-weight: 600;
			opacity: 0.20;
			position: absolute;
			left: 5px;
			top: -25px;
			transform: rotate(180deg);
		}
		&:before {
		}
	}
	&.blockquote-style4 {
		border-left: 3px solid $blockquote-border-color;
		padding: 0 30px 0;
		background-color: transparent;
		box-shadow: none;
		margin-top: 0;
		&:before {
			color: rgba(0, 0, 0, 0.3);
			content: "\f10e";
			font-family: "Font Awesome 5 Free";
			font-weight: 600;
			font-size: 50px;
			opacity: 0.20;
			position: absolute;
			left: 5px;
			top: -25px;
			transform: rotate(180deg);
		}
		&:before {
		}
		p {
			font-size: 24px;
			line-height: 1.7;
			color: #333;
		}
		footer {
			color: #888;
		}
	}
	&.blockquote-style5 {
		background: #f9f9f9;
		padding: 30px 30px 30px;
		border-left: 10px solid $blockquote-border-color;
		box-shadow: none;
		&:before {
			color: rgba(0, 0, 0, 0.3);
			content: "\f10e";
			font-family: "Font Awesome 5 Free";
			font-weight: 600;
			font-size: 50px;
			opacity: 0.20;
			position: absolute;
			left: 5px;
			top: -10px;
			transform: rotate(180deg);
		}
		&:before {
		}
	}
	&.blockquote-style6 {
		background: #f9f9f9;
		padding: 30px 30px 30px;
		border-left: 10px solid $blockquote-border-color;
		box-shadow: none;
		margin-top: 0;
		&:before {
			color: rgba(0, 0, 0, 0.3);
			content: "\f10e";
			font-family: "Font Awesome 5 Free";
			font-weight: 600;
			font-size: 50px;
			opacity: 0.20;
			position: absolute;
			left: 5px;
			top: -10px;
			transform: rotate(180deg);
		}
		&:before {
		}
		p {
			font-size: 24px;
			line-height: 1.7;
			color: #333;
		}
		footer {
			color: #888;
		}
	}
	&.blockquote-style7 {
		padding: 30px 30px 30px;
		border-left: 0;
		background: none;
		box-shadow: none;
		&:before {
			color: rgba(0, 0, 0, 0.3);
			content: "\f10e";
			font-family: "Font Awesome 5 Free";
			font-weight: 600;
			font-size: 70px;
			opacity: 0.20;
			position: absolute;
			left: 16px;
			top: -20px;
			transform: rotate(180deg);
		}
		&:before {
		}
	}
	&.blockquote-style8 {
		padding: 30px 30px 30px;
		border-left: 0;
		background: none;
		box-shadow: none;
		&:before {
			color: rgba(0, 0, 0, 0.3);
			content: "\f10e";
			font-family: "Font Awesome 5 Free";
			font-weight: 600;
			font-size: 70px;
			opacity: 0.20;
			position: absolute;
			left: 16px;
			top: -20px;
			transform: rotate(180deg);
		}
		&:before {
		}
		p {
			font-size: 24px;
			line-height: 1.7;
			color: #333;
		}
		footer {
			color: #888;
			cite {
				font-size: 0.9rem;
				font-style: normal;
				text-align: left;
			}
		}
	}
}