body {
  font-size:14px;
  color: #7c8ea6;
  text-align: center;
  margin: 0;
  font-family: 'Oswald', sans-serif;
}

.sch-style-4 .sch-chart-percent {
  margin-top: 50px;
  display: inline-block;
  width: 100%;
  padding-top: 50px;
}
.sch-style-4 input[name="fill"] {
  display:none;
}

.sch-style-4 input[name="fill"] + label {
color: #1f4a74;
font-size: 20px;
white-space: nowrap;
background: rgba(204, 204, 204, .5);
padding:10px 20px;
margin: 10px;
line-height: normal;
cursor: pointer;
border-radius: 6px;
}

.sch-style-4 input[name="fill"]:checked + label {
  background-color: #082643;
  color: #ccc;
}

.sch-style-4 .sch-chart-column {
  position: relative;
  width: 250px;
  height: 350px;
  font-size: 20px;
  margin: 0 auto;
}
.sch-style-4 .sch-chart-block1 {
  width: 200px;
  height: 100%;
  position: absolute;
  top: -2.5em;
  left: 0;
  z-index: 1; 
  background-color: rgba(160, 160, 160, .1); 
}

.sch-style-4 .sch-chart-block1:before,
.sch-style-4 .sch-chart-block1:after {
  content: "";
  position: absolute;
}

.sch-style-4 .sch-chart-block1:before {
  bottom: -2.5em;
  left: 1.25em;
  width: 200px;
  height: 2.5em;
  background-color: rgba(160, 160, 160, .2);
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  -o-transform: skew(45deg);
  -ms-transform: skew(45deg);
  transform: skew(45deg);
}

.sch-style-4 .sch-chart-block1:after {
  top: 1.25em;
  left: 100%;
  width: 2.5em;
  height: 100%;
  background-color: rgba(160, 160, 160, .05);
  -webkit-transform: skew(0deg, 45deg);
  -moz-transform: skew(0deg, 45deg);
  -o-transform: skew(0deg, 45deg);
  -ms-transform: skew(0deg, 45deg);
  transform: skew(0deg, 45deg);
}

.sch-style-4 .sch-chart-block3 {
    z-index: 3;
    background-color: #a0a0a0;
    background-color: rgba(160, 160, 160, .1);
}
.sch-style-4 .sch-chart-block3,
.sch-style-4 .sch-chart-block2 {
  position: absolute;
  width: 200px;
  height: 100%;
  top: 0;
  right: 0;
}

.sch-style-4 .sch-chart-block3:before,
.sch-style-4 .sch-chart-block3:after,
.sch-style-4 .sch-chart-block2:before,
.sch-style-4 .sch-chart-block2:after {
  content: "";
  position: absolute;
}

.sch-style-4 .sch-chart-block3:before,
.sch-style-4 .sch-chart-block2:before {
  top: -1.25em;
  left: -50px;
  width: 2.5em;
  height: 100%;
  background-color: rgba(160, 160, 160, .27);
  -webkit-transform: skew(0deg, 45deg);
  -moz-transform: skew(0deg, 45deg);
  -o-transform: skew(0deg, 45deg);
  -ms-transform: skew(0deg, 45deg);
  transform: skew(0deg, 45deg);
}

.sch-style-4 .sch-chart-block3:after,
.sch-style-4 .sch-chart-block2:after {
  top: -2.5em;
  left: -1.25em;
  width: 200px;
  height: 2.5em;
  background-color: rgba(160, 160, 160, .2);
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  -o-transform: skew(45deg);
  -ms-transform: skew(45deg);
  transform: skew(45deg);
}

.sch-style-4 .sch-chart-block2 {
  z-index: 2; 
  top: auto;  
  background-color: #053e7b;
  background-color: rgba(5, 62, 123, .7);
  height: 0;
  bottom: -2.5em;
  color: transparent;
  -webkit-transition: height 1s linear, bottom 1s linear;
  -moz-transition: height 1s linear, bottom 1s linear;
  -o-transition: height 1s linear, bottom 1s linear;
  -ms-transition: height 1s linear, bottom 1s linear;
  transition: height 1s linear, bottom 1s linear;
}
.sch-style-4 .sch-chart-block2,
.sch-style-4 .sch-chart-block2:before {
  background-color: rgba(5, 62, 123, .7);
}
.sch-style-4 .sch-chart-block2:after {
  background-color: rgba(5, 62, 123, .6); 
}

.sch-style-4 .sch-chart-block3 .sch-chart-percent-item {
  position: absolute;
  line-height: .2em;
  font-size: .7em;
  font-weight: normal;
  width: 100%;
  left: 0;
  color: #5a5a5a;
}

.sch-style-4 .sch-chart-block3 .sch-chart-percent-item:before,
.sch-style-4 .sch-chart-block3 .sch-chart-percent-item:after {
  content: "";
  position: absolute;
  border-style: none none solid;
  border-color: rgba(177, 177, 177, .4);
  border-width: 0 0 1px;
  background: rgba(221, 221, 221, .3);
}

.sch-style-4 .sch-chart-block3 .sch-chart-percent-item:before {
  width: 100%;
  bottom: -.1em;
  left: 0;
}

.sch-style-4 .sch-chart-block3 .sch-chart-percent-item:after {
width: 35%;
bottom: 22px;
left: -60px;
  z-index: 2;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.sch-style-4 .sch-chart-block3 .sch-chart-percent-item span {
  position: absolute;
  left: 103%;
  top: -.1em;
}
.sch-style-4 .p15 {
  bottom: 15%;
}
.sch-style-4 .p25 {
  bottom: 25%;
}
.sch-style-4 .p33 {
  bottom: 33%;
}
.sch-style-4 .p50 {
  bottom: 50%;
}
.sch-style-4 .p75 {
  bottom: 75%;
}
.sch-style-4 .sch-chart-block2,
.sch-style-4 .sch-chart-block2:before {
  background-color: #053e7b;
  background-color: rgba(133, 165, 204, .3);
}
.sch-style-4 .sch-chart-block2:after {
  background-color: rgba(133, 165, 204, .2);
}

.sch-style-4 .sch-chart-block3 .sch-chart-percent-item {
  color: #000;
}
.sch-style-4 .sch-chart-block3 .sch-chart-percent-item:before,
.sch-style-4 .sch-chart-block3 .sch-chart-percent-item:after {
 border-color: rgba(255, 255, 255, 0.9);
  background: rgba(221, 221, 221, .3);
}

.sch-style-4 input#full:checked ~ div .sch-chart-block2 { height: 100%; bottom: 0; }
.sch-style-4 input#f75:checked ~ div .sch-chart-block2 { height: 75%; bottom: 0; }
.sch-style-4 input#f50:checked ~ div .sch-chart-block2 { height: 50%; bottom: 0; }
.sch-style-4 input#f33:checked ~ div .sch-chart-block2 { height: 33%; bottom: 0; }
.sch-style-4 input#f25:checked ~ div .sch-chart-block2 { height: 25%; bottom: 0; }
.sch-style-4 input#f15:checked ~ div .sch-chart-block2 { height: 15%; bottom: 0; }

@media only screen and ( max-width:374px){
	.sch-style-4 .sch-chart-column {
  width: 200px;
}
.sch-style-4 .sch-chart-block1,
.sch-style-4 .sch-chart-block3, .sch-style-4 .sch-chart-block2,
.sch-style-4 .sch-chart-block1::before,
.sch-style-4 .sch-chart-block3::after, .sch-style-4 .sch-chart-block2::after {
  width: 150px;
}
.sch-style-4 .sch-chart-block3 .sch-chart-percent-item::after {
  width: 47%;
  bottom: 23px;
}
}