@import "mclib.css";

@font-face {font-family: Roboto Slab; src: url(Roboto-Regular.ttf);}

html, body { font-family: 'Roboto Slab', serif; background: #fff; font-size: 13px; color: #333; }

section.container { width: 100%; position: relative; }
.wrapper{ padding: 0 25px; max-width: 900px; min-width: 320px; position: relative; margin: 0 auto; }

header.uTop { position: relative; width: 100%; padding: 40px 0; }
header .uTopLogotype { float: left; width: 450px; position: relative; margin-bottom: 25px; }
header .uTopLogo { width: 359px; height: 155px; display: block; background: url('../img/logo.png') no-repeat; }
header .uTopSlogan { float: left; text-align: center; width: 450px; position: relative; font-size: 34px; color: #00c7a0; }

article.uIndex { width: 100%; position: relative; clear: both; padding: 25px 0; }
article .uTitle { background: #e8fff9; font-size: 34px; text-align: center; padding: 10px 0; color: #00c7a0; }
article .uText { background: #d0efe7; text-align: center; font-size: 18px; color: #003d5a; padding: 10px 25px; margin: 15px 0; }
article .uBlock { text-align: center; padding: 20px 0; margin: 15px 0; }
article .uBlock ul li { width: 155px; display: inline-block; margin: 10px; font-size: 20px; }
article .uBlock ul li span { display: block; width: 100%; padding-top: 5px; }
article .uBlock ul li a { color: #003d5a; text-transform: uppercase; text-decoration: none; }
article .uBlock2 { text-align: center; padding: 20px 0; margin: 15px 0; }
article .uBlock2 ul li { width: 86px; display: inline-block; margin: 10px; font-size: 14px; }
article .uBlock2 ul li span { display: block; width: 100%; padding-top: 5px; }
article .uBlock2 ul li a { color: #003d5a; text-transform: uppercase; text-decoration: none; }
article .uBlock3 { text-align: center; padding: 20px 0; margin: 15px 0; }
article .uBlock3 ul li { width: 64px; display: inline-block; margin: 10px; font-size: 14px; }
article .uBlock3 ul li a { color: #003d5a; text-transform: uppercase; text-decoration: none; }
article .uBlock4 { text-align: center; padding: 20px 0; margin: 15px 0; }
article .uBlock4 ul li { width: 270px; display: inline-block; margin: 10px; font-size: 13px; }
article .uBlock4 ul li a { color: #00c7a0; text-decoration: none; display: block; }

@-webkit-keyframes progress
{
	to {background-position: 30px 0;}
}

@-moz-keyframes progress
{
  to {background-position: 30px 0;}
}

@keyframes progress
{
  to {background-position: 30px 0;}
}

.barBg {
	background:#003D5A;
	max-width: 900px;
	min-width: 320px;
	height:15px;
	border:5px solid #003D5A;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	box-shadow: 0px 5px 17px rgba(40, 40, 40, 0.5);
	margin:0px auto 15px auto;
}


.bar {
	background: #7aff32;
	height:30px;
	height: 15px;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 10px;
}

/* Set the linear gradient tile for the animation and the playback */

.barFill {
	width: 100%;
	height: 15px;
	border-radius: 20px;
	-webkit-animation: progress 1s linear infinite;
	-moz-animation: progress 1s linear infinite;
	animation: progress 1s linear infinite;
	background-repeat: repeat-x;
	background-size: 30px 30px;
	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

/* Here's some predefined widths to control the fill. Add these classes to the "bar" div */

.ten {
	width: 10%; /* Sets the progress to 10% */
}	

.twenty {
	width: 20%; /* Sets the progress to 20% */
}	

.thirty {
	width: 30%; /* Sets the progress to 30% */
}	

.forty {
	width: 40%; /* Sets the progress to 40% */
}	

.fifty {
	width: 50%; /* Sets the progress to 50% */
}

.sixty {
	width: 60%; /* Sets the progress to 60% */
}	

.seventy {
	width: 70%; /* Sets the progress to 70% */
}	

.eighty {
	width: 80%; /* Sets the progress to 80% */
}	

.ninety {
	width: 90%; /* Sets the progress to 90% */
}	

.hundred {
	width: 100%; /* Sets the progress to 100% */
}	

/* Some colour classes to get you started. Add the colour class to the "bar" div */

.aquaGradient{
	background: -moz-linear-gradient(top,  #00C7A0 0%, #E8FFF9 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00C7A0), color-stop(100%,#E8FFF9));
	background: -webkit-linear-gradient(top,  #00C7A0 0%,#E8FFF9 100%);
	background: -o-linear-gradient(top,  #00C7A0 0%,#E8FFF9 100%);
	background: -ms-linear-gradient(top,  #00C7A0 0%,#E8FFF9 100%);
	background: linear-gradient(to bottom,  #00C7A0 0%,#E8FFF9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00C7A0', endColorstr='#E8FFF9',GradientType=0 );
}




.progress-pie-chart {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #e8fff9;
  position: relative;
}
.progress-pie-chart.gt-50 {
  background-color: #00c7a0;
}

.ppc-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 75px);
  top: calc(50% - 75px);
  width: 150px;
  height: 150px;
  clip: rect(0, 150px, 150px, 75px);
}
.ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 75px);
  top: calc(50% - 75px);
  width: 150px;
  height: 150px;
  clip: rect(0, 75px, 150px, 0);
  background: #00c7a0;
  transform: rotate(60deg);
}
.gt-50 .ppc-progress {
  clip: rect(0, 75px, 150px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 150px, 150px, 75px);
  background: #e8fff9;
}

.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 130.43478px/2);
  top: calc(50% - 130.43478px/2);
  width: 130.43478px;
  height: 130.43478px;
  background: #003D5A;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #00c7a0;
}

.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.progress-pie-chart {
  margin: 50px auto 0;
}