/************************************
TABLE OF CONTENTS
=====================================
1. Progress basic
2. Progress value
3. Progress width
4. Progress size
5. Progress animation
6. Progress label
7. Progress styles
	7.1 Progress border
	7.2 Progress radius
	7.3 Progress outline 
	7.4 Progress stripes 
8. Progress color
***********************************/

/* 1. Progress basic */
.mk-progress-bar{
	color:#d2d1d1;
	height:10px;
	min-width:100px;
	position:relative;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/172299/bubbles-mask.gif);
	background:#f5f5f5;
	margin-bottom:15px;
	border:1px solid;
	-webkit-box-shadow: inset 9px 9px 5px -8px rgba(0,0,0,0.39);
-moz-box-shadow: inset 9px 9px 5px -8px rgba(0,0,0,0.39);
box-shadow: inset 9px 9px 5px -8px rgba(0,0,0,0.39);
}
.mk-progress-bar:before{
	top:0;
	left:0;
	bottom:0;
	opacity:.8;
	content:'';
	height:100%;
	background: #444;
	position:absolute;
}

/* 2. Progress value */
.mk-progress-bar[data-mk-value]{
	margin-right:50px;
}
.mk-progress-bar[data-mk-value]:after{
	top:50%;
	color:#fff;
	right:-50px;
	padding:0 5px;
	font-size:90%;
	height:inherit;
	min-height:15px;
	background:#444;
	line-height:15px;
	margin-top:-8px;
	position:absolute;
	border-radius:inherit;
	content:attr(data-mk-width)attr(data-mk-value);
}

/* 3. Progress width */
.mk-progress-bar[data-mk-width="1"]:before{width:1%}
.mk-progress-bar[data-mk-width="2"]:before{width:2%}
.mk-progress-bar[data-mk-width="3"]:before{width:3%}
.mk-progress-bar[data-mk-width="4"]:before{width:4%}
.mk-progress-bar[data-mk-width="5"]:before{width:5%}
.mk-progress-bar[data-mk-width="6"]:before{width:6%}
.mk-progress-bar[data-mk-width="7"]:before{width:7%}
.mk-progress-bar[data-mk-width="8"]:before{width:8%}
.mk-progress-bar[data-mk-width="9"]:before{width:9%}
.mk-progress-bar[data-mk-width="10"]:before{width:10%}
.mk-progress-bar[data-mk-width="11"]:before{width:11%}
.mk-progress-bar[data-mk-width="12"]:before{width:12%}
.mk-progress-bar[data-mk-width="13"]:before{width:13%}
.mk-progress-bar[data-mk-width="14"]:before{width:14%}
.mk-progress-bar[data-mk-width="15"]:before{width:15%}
.mk-progress-bar[data-mk-width="16"]:before{width:16%}
.mk-progress-bar[data-mk-width="17"]:before{width:17%}
.mk-progress-bar[data-mk-width="18"]:before{width:18%}
.mk-progress-bar[data-mk-width="19"]:before{width:19%}
.mk-progress-bar[data-mk-width="20"]:before{width:20%}
.mk-progress-bar[data-mk-width="21"]:before{width:21%}
.mk-progress-bar[data-mk-width="22"]:before{width:22%}
.mk-progress-bar[data-mk-width="23"]:before{width:23%}
.mk-progress-bar[data-mk-width="24"]:before{width:24%}
.mk-progress-bar[data-mk-width="25"]:before{width:25%}
.mk-progress-bar[data-mk-width="26"]:before{width:26%}
.mk-progress-bar[data-mk-width="27"]:before{width:27%}
.mk-progress-bar[data-mk-width="28"]:before{width:28%}
.mk-progress-bar[data-mk-width="29"]:before{width:29%}
.mk-progress-bar[data-mk-width="30"]:before{width:30%}
.mk-progress-bar[data-mk-width="31"]:before{width:31%}
.mk-progress-bar[data-mk-width="32"]:before{width:32%}
.mk-progress-bar[data-mk-width="33"]:before{width:33%}
.mk-progress-bar[data-mk-width="34"]:before{width:34%}
.mk-progress-bar[data-mk-width="35"]:before{width:35%}
.mk-progress-bar[data-mk-width="36"]:before{width:36%}
.mk-progress-bar[data-mk-width="37"]:before{width:37%}
.mk-progress-bar[data-mk-width="38"]:before{width:38%}
.mk-progress-bar[data-mk-width="39"]:before{width:39%}
.mk-progress-bar[data-mk-width="40"]:before{width:40%}
.mk-progress-bar[data-mk-width="41"]:before{width:41%}
.mk-progress-bar[data-mk-width="42"]:before{width:42%}
.mk-progress-bar[data-mk-width="43"]:before{width:43%}
.mk-progress-bar[data-mk-width="44"]:before{width:44%}
.mk-progress-bar[data-mk-width="45"]:before{width:45%}
.mk-progress-bar[data-mk-width="46"]:before{width:46%}
.mk-progress-bar[data-mk-width="47"]:before{width:47%}
.mk-progress-bar[data-mk-width="48"]:before{width:48%}
.mk-progress-bar[data-mk-width="49"]:before{width:49%}
.mk-progress-bar[data-mk-width="50"]:before{width:50%}
.mk-progress-bar[data-mk-width="51"]:before{width:51%}
.mk-progress-bar[data-mk-width="52"]:before{width:52%}
.mk-progress-bar[data-mk-width="53"]:before{width:53%}
.mk-progress-bar[data-mk-width="54"]:before{width:54%}
.mk-progress-bar[data-mk-width="55"]:before{width:55%}
.mk-progress-bar[data-mk-width="56"]:before{width:56%}
.mk-progress-bar[data-mk-width="57"]:before{width:57%}
.mk-progress-bar[data-mk-width="58"]:before{width:58%}
.mk-progress-bar[data-mk-width="59"]:before{width:59%}
.mk-progress-bar[data-mk-width="60"]:before{width:60%}
.mk-progress-bar[data-mk-width="61"]:before{width:61%}
.mk-progress-bar[data-mk-width="62"]:before{width:62%}
.mk-progress-bar[data-mk-width="63"]:before{width:63%}
.mk-progress-bar[data-mk-width="64"]:before{width:64%}
.mk-progress-bar[data-mk-width="65"]:before{width:65%}
.mk-progress-bar[data-mk-width="66"]:before{width:66%}
.mk-progress-bar[data-mk-width="67"]:before{width:67%}
.mk-progress-bar[data-mk-width="68"]:before{width:68%}
.mk-progress-bar[data-mk-width="69"]:before{width:69%}
.mk-progress-bar[data-mk-width="70"]:before{width:70%}
.mk-progress-bar[data-mk-width="71"]:before{width:71%}
.mk-progress-bar[data-mk-width="72"]:before{width:72%}
.mk-progress-bar[data-mk-width="73"]:before{width:73%}
.mk-progress-bar[data-mk-width="74"]:before{width:74%}
.mk-progress-bar[data-mk-width="75"]:before{width:75%}
.mk-progress-bar[data-mk-width="76"]:before{width:76%}
.mk-progress-bar[data-mk-width="77"]:before{width:77%}
.mk-progress-bar[data-mk-width="78"]:before{width:78%}
.mk-progress-bar[data-mk-width="79"]:before{width:79%}
.mk-progress-bar[data-mk-width="80"]:before{width:80%}
.mk-progress-bar[data-mk-width="81"]:before{width:81%}
.mk-progress-bar[data-mk-width="82"]:before{width:82%}
.mk-progress-bar[data-mk-width="83"]:before{width:83%}
.mk-progress-bar[data-mk-width="84"]:before{width:84%}
.mk-progress-bar[data-mk-width="85"]:before{width:85%}
.mk-progress-bar[data-mk-width="86"]:before{width:86%}
.mk-progress-bar[data-mk-width="87"]:before{width:87%}
.mk-progress-bar[data-mk-width="88"]:before{width:88%}
.mk-progress-bar[data-mk-width="89"]:before{width:89%}
.mk-progress-bar[data-mk-width="90"]:before{width:90%}
.mk-progress-bar[data-mk-width="91"]:before{width:91%}
.mk-progress-bar[data-mk-width="92"]:before{width:92%}
.mk-progress-bar[data-mk-width="93"]:before{width:93%}
.mk-progress-bar[data-mk-width="94"]:before{width:94%}
.mk-progress-bar[data-mk-width="95"]:before{width:95%}
.mk-progress-bar[data-mk-width="96"]:before{width:96%}
.mk-progress-bar[data-mk-width="97"]:before{width:97%}
.mk-progress-bar[data-mk-width="98"]:before{width:98%}
.mk-progress-bar[data-mk-width="99"]:before{width:99%}
.mk-progress-bar[data-mk-width="100"]:before{width:100%}

/* 4. Progress size*/
.mk-progress-bar[data-mk-size="1"]{
	height:15px;
}
.mk-progress-bar[data-mk-size="1"]:after{
	margin-top:-7.5px;
	line-height:15px;
}
.mk-progress-bar[data-mk-size="2"]{
	height:20px;
}
.mk-progress-bar[data-mk-size="2"]:after{
	margin-top:-10px;
	line-height:20px;
}
.mk-progress-bar[data-mk-size="3"]{
	height:25px;
}
.mk-progress-bar[data-mk-size="3"]:after{
	margin-top:-12.5px;
	line-height:25px;
}
.mk-progress-bar[data-mk-size="4"]{
	height:30px;
}
.mk-progress-bar[data-mk-size="4"]:after{
	margin-top:-15px;
	line-height:30px;
}


/* 5. Progress animation */
.mk-progress-bar[data-mk-animate="true"]{
	-webkit-animation:mk-show .2s forwards;
	animation:mk-show .2s forwards;
}
.mk-progress-bar[data-mk-animate="true"]:before{
	-webkit-animation:mk-width 2s forwards;
	animation:mk-width 2s forwards;
}
.mk-progress-bar[data-mk-animate="true"]:after{
	-webkit-animation:mk-scale 2s forwards;
	animation:mk-scale 2s forwards;
}
@-webkit-keyframes mk-show{
	0%{display:none}
	100%{display:inherit}
}
@keyframes mk-show{
	0%{display:none}
	100%{display:inherit}
}
@-webkit-keyframes mk-width{
	0%{width:0}
	10%{width:0}
	100%{}
}
@keyframes mk-width{
	0%{width:0}
	10%{width:0}
	100%{}
}
@-webkit-keyframes mk-scale{
	0%{-webkit-transform:scale(0);transform:scale(0)}
	100%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes mk-scale{
	0%{-webkit-transform:scale(0);transform:scale(0)}
	100%{-webkit-transform:scale(1);transform:scale(1)}
}

/* 6. Progress label */
.mk-progress-bar-wrap .mk-label{
	margin-bottom:4px;
}


/* 7. Progress styles */

/* 7.1 Progress border */
.mk-progress-bar[data-mk-border="0"]{
	border:none;
	background:#ecf0f1;
}
.mk-progress-bar[data-mk-border="0"]:before{
	background:rgba(0,0,0,.4);
}
.mk-progress-bar[data-mk-border="0"]{background:rgba(68,68,68,.4)}
.mk-progress-bar[data-mk-border="2"]{border-width:2px}
.mk-progress-bar[data-mk-border="3"]{border-width:3px}
.mk-progress-bar[data-mk-border="4"]{border-width:4px}
.mk-progress-bar[data-mk-border="5"]{border-width:5px}
.mk-progress-bar[data-mk-color="flat-tur"][data-mk-border="0"]{background:rgba(26,188,156,.35)}
.mk-progress-bar[data-mk-color="flat-eme"][data-mk-border="0"]{background:rgba(46,204,113,.35)}
.mk-progress-bar[data-mk-color="flat-pet"][data-mk-border="0"]{background:rgba(52,152,219,.35)}
.mk-progress-bar[data-mk-color="flat-ame"][data-mk-border="0"]{background:rgba(155,89,182,.35)}
.mk-progress-bar[data-mk-color="flat-wet"][data-mk-border="0"]{background:rgba(52,73,94,.35)}
.mk-progress-bar[data-mk-color="flat-sun"][data-mk-border="0"]{background:rgba(241,196,15,.35)}
.mk-progress-bar[data-mk-color="flat-car"][data-mk-border="0"]{background:rgba(230,126,34,.35)}
.mk-progress-bar[data-mk-color="flat-ali"][data-mk-border="0"]{background:rgba(231,76,60,.35)}
.mk-progress-bar[data-mk-color="flat-con"][data-mk-border="0"]{background:rgba(149,165,166,.35)}

/* 7.2 Progress radius */
.mk-progress-bar[data-mk-radius]:before{border-radius:inherit}
.mk-progress-bar[data-mk-radius="1"]{border-radius:1px}
.mk-progress-bar[data-mk-radius="2"]{border-radius:2px}
.mk-progress-bar[data-mk-radius="3"]{border-radius:3px}
.mk-progress-bar[data-mk-radius="4"]{border-radius:4px}
.mk-progress-bar[data-mk-radius="5"]{border-radius:5px}
.mk-progress-bar[data-mk-radius="6"]{border-radius:6px}
.mk-progress-bar[data-mk-radius="7"]{border-radius:7px}
.mk-progress-bar[data-mk-radius="8"]{border-radius:8px}
.mk-progress-bar[data-mk-radius="9"]{border-radius:9px}
.mk-progress-bar[data-mk-radius="10"]{border-radius:10px}
.mk-progress-bar[data-mk-radius="11"]{border-radius:11px}
.mk-progress-bar[data-mk-radius="12"]{border-radius:12px}
.mk-progress-bar[data-mk-radius="13"]{border-radius:13px}
.mk-progress-bar[data-mk-radius="14"]{border-radius:14px}
.mk-progress-bar[data-mk-radius="15"]{border-radius:15px}

/* 7.3 Progress outline */
.mk-progress-bar[data-mk-outline="true"]{
	outline:1px solid;
    outline-offset:1px;
}

/* 7.4 Progress stripes */
.mk-progress-bar[data-mk-stripes="true"]:before{
	background:-webkit-repeating-linear-gradient(145deg,#444,#444 10px,rgba(68,68,68,.4) 10px,rgba(68,68,68,.4) 20px);
	background:repeating-linear-gradient(-55deg,#444,#444 10px,rgba(68,68,68,.4) 10px,rgba(68,68,68,.4) 20px);
}
.mk-progress-bar[data-mk-color="flat-tur"][data-mk-stripes="true"]:before{
	background:-webkit-repeating-linear-gradient(145deg,#1abc9c,#1abc9c 10px,rgba(26,188,156,.4) 10px,rgba(26,188,156,.4) 20px);
	background:repeating-linear-gradient(-55deg,#1abc9c,#1abc9c 10px,rgba(26,188,156,.4) 10px,rgba(26,188,156,.4) 20px);
}
.mk-progress-bar[data-mk-color="flat-eme"][data-mk-stripes="true"]:before{
	background:-webkit-repeating-linear-gradient(145deg,#2ecc71,#2ecc71 10px,rgba(46,204,113,.4) 10px,rgba(46,204,113,.4) 20px);
	background:repeating-linear-gradient(-55deg,#2ecc71,#2ecc71 10px,rgba(46,204,113,.4) 10px,rgba(46,204,113,.4) 20px);
}
.mk-progress-bar[data-mk-color="flat-pet"][data-mk-stripes="true"]:before{
	background:-webkit-repeating-linear-gradient(145deg,#3498db,#3498db 10px,rgba(52,152,219,.4) 10px,rgba(52,152,219,.4) 20px);
	background:repeating-linear-gradient(-55deg,#3498db,#3498db 10px,rgba(52,152,219,.4) 10px,rgba(52,152,219,.4) 20px);
}
.mk-progress-bar[data-mk-color="flat-ame"][data-mk-stripes="true"]:before{
	background:-webkit-repeating-linear-gradient(145deg,#9b59b6,#9b59b6 10px,rgba(155,89,182,.4) 10px,rgba(155,89,182,.4) 20px);
	background:repeating-linear-gradient(-55deg,#9b59b6,#9b59b6 10px,rgba(155,89,182,.4) 10px,rgba(155,89,182,.4) 20px);
}
.mk-progress-bar[data-mk-color="flat-wet"][data-mk-stripes="true"]:before{
	background:-webkit-repeating-linear-gradient(145deg,#34495e,#34495e 10px,rgba(52,73,94,.4) 10px,rgba(52,73,94,.4) 20px);
	background:repeating-linear-gradient(-55deg,#34495e,#34495e 10px,rgba(52,73,94,.4) 10px,rgba(52,73,94,.4) 20px);
}
.mk-progress-bar[data-mk-color="flat-sun"][data-mk-stripes="true"]:before{
	background:-webkit-repeating-linear-gradient(145deg,#f1c40f,#f1c40f 10px,rgba(241,196,15,.4) 10px,rgba(241,196,15,.4) 20px);
	background:repeating-linear-gradient(-55deg,#f1c40f,#f1c40f 10px,rgba(241,196,15,.4) 10px,rgba(241,196,15,.4) 20px);
}
.mk-progress-bar[data-mk-color="flat-car"][data-mk-stripes="true"]:before{
	background:-webkit-repeating-linear-gradient(145deg,#e67e22,#e67e22 10px,rgba(230,126,34,.4) 10px,rgba(230,126,34,.4) 20px);
	background:repeating-linear-gradient(-55deg,#e67e22,#e67e22 10px,rgba(230,126,34,.4) 10px,rgba(230,126,34,.4) 20px);
}
.mk-progress-bar[data-mk-color="flat-ali"][data-mk-stripes="true"]:before{
	background:-webkit-repeating-linear-gradient(145deg,#e74c3c,#e74c3c 10px,rgba(231,76,60,.4) 10px,rgba(231,76,60,.4) 20px);
	background:repeating-linear-gradient(-55deg,#e74c3c,#e74c3c 10px,rgba(231,76,60,.4) 10px,rgba(231,76,60,.4) 20px);
}
.mk-progress-bar[data-mk-color="flat-con"][data-mk-stripes="true"]:before{
	background:-webkit-repeating-linear-gradient(145deg,#95a5a6,#95a5a6 10px,rgba(149,165,166,.4) 10px,rgba(149,165,166,.4) 20px);
	background:repeating-linear-gradient(-55deg,#95a5a6,#95a5a6 10px,rgba(149,165,166,.4) 10px,rgba(149,165,166,.4) 20px);
}

/* 8. Progress color */
.mk-progress-bar[data-mk-color="flat-tur"]{color:#1abc9c}
.mk-progress-bar[data-mk-color="flat-tur"]:before,
.mk-progress-bar[data-mk-color="flat-tur"]:after{background:#1abc9c}
.mk-progress-bar[data-mk-color="flat-eme"]{color:#2ecc71}
.mk-progress-bar[data-mk-color="flat-eme"]:before,
.mk-progress-bar[data-mk-color="flat-eme"]:after{background:#2ecc71}
.mk-progress-bar[data-mk-color="flat-pet"]{color: linear-gradient(45deg, #f5f5f5, #fff);}
.mk-progress-bar[data-mk-color="flat-pet"]:before,
.mk-progress-bar[data-mk-color="flat-pet"]:after{background:linear-gradient(45deg, #f5f5f5, #fff);}
.mk-progress-bar[data-mk-color="flat-ame"]{color:#9b59b6}
.mk-progress-bar[data-mk-color="flat-ame"]:before,
.mk-progress-bar[data-mk-color="flat-ame"]:after{background:#9b59b6}
.mk-progress-bar[data-mk-color="flat-wet"]{color:#34495e}
.mk-progress-bar[data-mk-color="flat-wet"]:before,
.mk-progress-bar[data-mk-color="flat-wet"]:after{background:#34495e}
.mk-progress-bar[data-mk-color="flat-sun"]{color:#f1c40f}
.mk-progress-bar[data-mk-color="flat-sun"]:before,
.mk-progress-bar[data-mk-color="flat-sun"]:after{background:#f1c40f}
.mk-progress-bar[data-mk-color="flat-car"]{color:#e67e22}
.mk-progress-bar[data-mk-color="flat-car"]:before,
.mk-progress-bar[data-mk-color="flat-car"]:after{background:#e67e22}
.mk-progress-bar[data-mk-color="flat-ali"]{color:#e74c3c}
.mk-progress-bar[data-mk-color="flat-ali"]:before,
.mk-progress-bar[data-mk-color="flat-ali"]:after{background:#e74c3c}
.mk-progress-bar[data-mk-color="flat-con"]{color:#95a5a6}
.mk-progress-bar[data-mk-color="flat-con"]:before,
.mk-progress-bar[data-mk-color="flat-con"]:after{background:#95a5a6}