/*
    * Plugin :  an-skill-bar
    * Version: 1.0.1
    * Description: A plugin that fills bars with a percentage you set.
    * Author: Hasan Misbah
    * Copyright 2018, Hasan Misbah
    * Free to use and abuse under the MIT license.
    * http://www.opensource.org/licenses/mit-license.php
    */
			
			.skillbar {
				left: -1%;
				width: 100%;
				padding: 10px;
				margin: 10px 0;
				position: relative;
				display: block;
				overflow: hidden;
				height: 5px;
				background-color: rgba(0, 0, 0, 0.8);
				border-radius: 6px;
			}
			
			.skillbar.html .title {
				background-color: #c96300
			}
			
			.skillbar.html .filled {
				background-color: #ff8817
			}
			
			.skillbar.css .title {
				background-color: #0f5487
			}
			
			.skillbar.css .filled {
				background-color: #177fcb
			}
			
			.skillbar.js .title {
				background-color: #f0b109
			}
			
			.skillbar.js .filled {
				background-color: #f8ca4d
			}
			
			.skillbar.php .title {
				background-color: #FFFEFE
			}
			
			.skillbar.php .filled {
				background-color: #FFFFFF
			}
			
			.skillbar.jquery .title {
				background-color: #064a7a
			}
			
			.skillbar.jquery .filled {
				background-color: #0977c3
			}
			
			.skillbar.sass .title {
				background-color: #ba437d
			}
			
			.skillbar.sass .filled {
				background-color: #cf7aa4
			}
			
			.skillbar.less .title {
				background-color: #1f3861
			}
			
			.skillbar.less .filled {
				background-color: #31599b
			}
			
			.skillbar.react .title {
				background-color: #33c7f0
			}
			
			.skillbar.react .filled {
				background-color: #7adbf5
			}
			
			.skillbar.nodejs .title {
				background-color: #5e8f35
			}
			
			.skillbar.nodejs .filled {
				background-color: #83bf51
			}
			
			.skillbar.angular .title {
				background-color: #8f0023
			}
			
			.skillbar.angular .filled {
				background-color: #dc0035
			}
			
			.skillbar.vue .title {
				background-color: #2f8f67
			}
			
			.skillbar.vue .filled {
				background-color: #47c390
			}
			
			.skillbar.meteor .title {
				background-color: #cc2b2c
			}
			
			.skillbar.meteor .filled {
				background-color: #de6566
			}
			
			.skillbar.backbone .title {
				background-color: #005086
			}
			
			.skillbar.backbone .filled {
				background-color: #007dd3
			}
			
			.skillbar.ember .title {
				background-color: #c63d2d
			}
			
			.skillbar.ember .filled {
				background-color: #dc7064
			}
			
			.skillbar.mysql .title {
				background-color: #003e58
			}
			
			.skillbar.mysql .filled {
				background-color: #0073a5
			}
			
			.skillbar.python .title {
				background-color: #295479
			}
			
			.skillbar.python .filled {
				background-color: #3d7cb2
			}
			
			.skillbar.django .title {
				background-color: #010705
			}
			
			.skillbar.django .filled {
				background-color: #0e4731
			}
			
			.skillbar.agile .title {
				background-color: #198cb7
			}
			
			.skillbar.agile .filled {
				background-color: #37b6e4
			}
			
			.skillbar.photoshop .title {
				background-color: #211a56
			}
			
			.skillbar.photoshop .filled {
				background-color: #382c90
			}
			
			.skillbar.illustrator .title {
				background-color: #572e11
			}
			
			.skillbar.illustrator .filled {
				background-color: #98511d
			}
			
			.skillbar.indesign .title {
				background-color: #a42b69
			}
			
			.skillbar.indesign .filled {
				background-color: #d04c8f
			}
			
			.skillbar.laravel .title {
				background-color: #f0280f
			}
			
			.skillbar.laravel .filled {
				background-color: #f56856
			}
			
			.skillbar .title {
				background-color: rgba(0, 0, 0, .6);
				height: 30px;
				width: 85px;
				text-align: center;
				left: 0;
				color: #f0f0f0;
				border-radius: 6px;
			}
			
			.skillbar .percent,
			.skillbar .title {
				padding: 5px;
				position: absolute;
				top: 0;
				z-index: 9
			}
			
			.skillbar .percent {
				right: 0;
				color: #000;
				font-weight: 700
			}
			
			.skillbar .filled {
				z-index: 8;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0, 80, 80, .3);
				height: 100%;
				width: 20px;
				border-radius: 6px;
			}
			
			.skillbar {
				display: none;
			}
			
			.skillbarpresent {
				top: -10px;
				font-size: 20px;
				color: #ffffff;
				display: none;
			}

			
			@media screen and (max-width: 1800px) and (min-width:1360px) {
				.skillbar {
					height: 4px;
				}
				.skillbarpresent {
					top: -15px;
					font-size: 20px;
				}
			}

			@media screen and (max-width: 1360px) and (min-width: 1180px) {
				.skillbar {
					height: 2px;
					left: -2%;
					padding: 8px;
				}
				.skillbarpresent {
					top: -12px;
					font-size: 18px;
				}
			}
			
			@media screen and (max-width: 1180px) {
				.skillbar {
					height: 1px;
					left: -2%;
					padding: 5px;
				}
				.skillbarpresent {
					top: -10px;
					font-size: 15px;
				}
			}
			
			/*# sourceMappingURL=an-skill-bar.css.map */