/*----------------------------------------*/
/*            PLUNK SHORTCODES            */
/*----------------------------------------*/


/*   Dropcap   */

.dropcap {
	display: block;
	float: left;
	padding: 4px 13px 6px 13px;
	background-color: #d1d3d7;
	color: #fff;
	font-weight: 400;
	line-height: 40px;
	font-size: 40px;
	margin: 8px 8px 0 0;
}


/*   Intro text   */

.text-box {
	padding: 20px 30px 22px;
	margin-bottom: 30px;
	background: #f7f8f9;
	color: #747678;
	line-height: 33px;
	font-size: 22px;
}


/*   Blockquote   */

blockquote {
	margin-bottom: 30px;
	margin-left: 30px;
	padding-left: 25px;
	border-left: 3px solid $primary-color;
}

blockquote p {
	color: #848688;
	font-size: 28px;
	font: 300 30px/40px $body-font;
}

blockquote cite::before {
	content: "\2014 \00A0";
}

blockquote cite {
	display: block;
	margin-top: 14px;
	color: #c4c6c8;
	font: 300 16px/30px $heading-font;
}

blockquote cite a {
	color: #c4c6c8;
	font: 300 16px/30px $heading-font;
}


/*   Preformatted text   */

pre {
	padding: 22px 30px;
	margin-bottom: 30px;
	background: #f7f8f9;
	font: 13px/20px Consolas, "Andale Mono", Courier, "Courier New", monospace;
}


/*   Progress Bar   */

.progress {
	color: #717377;
	font-size: 18px;
}

.progress-bar {
	background-color: #f3f4f5;
	width: 100%;
	height: 20px;
	-webkit-border-radius: 1px;
	   -moz-border-radius: 1px;
		-ms-border-radius: 1px;
		 -o-border-radius: 1px;
			border-radius: 1px;
	overflow: hidden;
}

.progress-bar div { height: 100%; }

.progress-bar .pb-red { background-color: #F64747; }
.progress-bar .pb-orange { background-color: #F2784B; }
.progress-bar .pb-yellow { background-color: #F7CA18; }
.progress-bar .pb-green { background-color: #1BBC9B; }
.progress-bar .pb-blue { background-color: #52B3D9; }
.progress-bar .pb-purple { background-color: #D2527F; }
.progress-bar .pb-gray { background-color: #95A5A6; }


/*   Alert Boxes   */

.alert-box {
	position: relative;
	padding: 14px 54px 14px 20px;
	background-color: #333;
	color: #fff;
	line-height: 24px;
	font-size: 18px;
	-webkit-border-radius: 1px;
	   -moz-border-radius: 1px;
		-ms-border-radius: 1px;
		 -o-border-radius: 1px;
			border-radius: 1px;
}

.alert-box span {
	display: block;
	position: absolute;
	top: 19px;
	right: 20px;
	width: 14px;
	height: 14px;
	background: url(../images/close.png) no-repeat 0 0;
	cursor: pointer;
}

.alert-box span:hover {
	background: url(../images/close.png) no-repeat 0 -14px;
}

.alert-box.ab-red { background-color: #F64747; }
.alert-box.ab-orange { background-color: #F27935; }
.alert-box.ab-yellow { background-color: #FFB700; }
.alert-box.ab-green { background-color: #03A678; }
.alert-box.ab-blue { background-color: #22A7F0; }
.alert-box.ab-purple { background-color: #D2527F; }
.alert-box.ab-gray { background-color: #6C7A89; }


/*   Buttons   */

.btn-custom {
	display: inline-block;
    margin: 0 8px 30px 0;
    padding: 7px 15px;
    font: 300 14px/21px 'Roboto', Helvetica, Arial, sans-serif;
	text-shadow: 0 1px 0 rgba(0,0,0,.07);
    background: #e3e4e5;
    border-top: 1px solid rgba(0,0,0,.04);
    border-bottom: 1px solid rgba(0,0,0,.08);
	-webkit-border-radius: 2px;
       -moz-border-radius: 2px;
        -ms-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
    -webkit-transition: all, 0.1s, ease-in;
       -moz-transition: all, 0.1s, ease-in;
        -ms-transition: all, 0.1s, ease-in;
         -o-transition: all, 0.1s, ease-in;
            transition: all, 0.1s, ease-in;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.08);
}

.btn-custom.small {
	margin-right: 7px;
	padding: 4px 10px;
    font: 300 12px/18px 'Roboto', Helvetica, Arial, sans-serif;
}

.btn-custom.medium {
	margin-right: 8px;
	padding: 7px 15px;
    font: 300 14px/21px 'Roboto', Helvetica, Arial, sans-serif;
}

.btn-custom.large {
	margin-right: 9px;
	padding: 9px 20px;
    font: 300 16px/24px 'Roboto', Helvetica, Arial, sans-serif;
}

.btn-custom.red,
.btn-custom.red:visited {background: #f64747; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.red:hover,
.btn-custom.red:focus {background: #f42727; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.red:active {background: #f64747;}

.btn-custom.orange,
.btn-custom.orange:visited {background: #f27935; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.orange:hover,
.btn-custom.orange:focus {background:#f06415; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.orange:active {background:#f27935;}

.btn-custom.yellow,
.btn-custom.yellow:visited {background: #ffae00; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.yellow:hover,
.btn-custom.yellow:focus {background: #efa301; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.yellow:active {background: #ffae00;}

.btn-custom.green,
.btn-custom.green:visited {background: #03a678; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.green:hover,
.btn-custom.green:focus {background: #05976e; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.green:active {background: #03a678;}

.btn-custom.cyan,
.btn-custom.cyan:visited {background: #18cccc; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.cyan:hover,
.btn-custom.cyan:focus {background: #14bfbf; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.cyan:active {background: #18cccc;}

.btn-custom.blue,
.btn-custom.blue:visited {background: #0ca7d3; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.blue:hover,
.btn-custom.blue:focus {background: #0a9ac2; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.blue:active {background: #0ca7d3;}

.btn-custom.purple,
.btn-custom.purple:visited {background: #d2527f; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.purple:hover,
.btn-custom.purple:focus {background: #cb376b; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.purple:active {background: #d2527f;}

.btn-custom.gray,
.btn-custom.gray:visited {background: #95a5a6; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.gray:hover,
.btn-custom.gray:focus {background: #859798; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.gray:active {background: #95a5a6;}

.btn-custom.black,
.btn-custom.black:visited {background: #313337; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.black:hover,
.btn-custom.black:focus {background: #111317; text-decoration: none; color: #fff; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.08);}
.btn-custom.black:active {background: #313337;}


/*   Small Screens   */

@media (max-width: 767px) {

	.dropcap {
		margin: 6px 8px 0 0;
		line-height: 36px;
		font-size: 36px;
	}
	
	p.text-box {
		line-height: 27px;
		font-size: 18px;
	}
}

@media (max-width: 400px) {

	blockquote {
		margin-left: 0;
		padding-left: 15px;
	}

	blockquote p {
		line-height: 33px;
		font-size: 22px;
	}
}