.donut-chart svg {
	pointer-events: none;
  height: 100%;
}
.donut-chart svg path {
	fill: none;
	stroke-width: 35px;
}
.circle{
	position: absolute;
	border: 4px solid;
    border-radius: 50%;
    height: 200px;
    width: 200px;
	
}
.donut-item{
		text-align: center;
	}

.donut-chart {
	width: 200px;
	height: 200px;
	position: relative;
	display: inline-block;
	left:10%;
}
.donut-info {
	margin: 0;
	position: absolute;
	top: 35%;
	left: 0;
	width: 100%;
	text-align: center;
}
.donut-infop{
	text-align: center;
	padding: 0em 1em;
}
.donut-chart span {
	display: block;
	font-size: 0.5em;
}
.donut-container{
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.donut-item:nth-child(1) {
	    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}
.donut-item:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}
.donut-item:nth-child(2) .donut-chart  {
left:0%;
}
.donut-item:nth-child(3) .donut-chart  {
left:0%;
}
.donut-item:nth-child(4) .donut-chart  {
left:0%;
}
.donut-item:nth-child(5) .donut-chart  {
left:0%;
}
.donut-item:nth-child(1) .donut-chart  {
left:0%;
}
.donut-item:nth-child(3) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}
.donut-item:nth-child(4) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
	padding:1em 1em; 
}
.donut-item:nth-child(5) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
	padding:1em 1em; 
}

/* Just for the purpose of this pen */

.red svg path {
  stroke-width: .25em;	
}
@media screen and (max-width: 412px) {
.donut-item:nth-child(4) {
	padding:0em 0em; 
}
.donut-item:nth-child(5) {
	padding:0em 0em; 
}

	.donut-item{
		text-align: center;
	}
}

@media screen and (min-width: 600px) {
	.donut-item:nth-child(1) {
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
}
.donut-item:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}
.donut-item:nth-child(3) {
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
}
.donut-item:nth-child(4) {
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
	padding:1em 2em; 
}
	.donut-item:nth-child(5) {
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
	padding:1em 2em; 
}
	.donut-chart {
	left:10%;
}
.donut-item:nth-child(2) .donut-chart  {
left:10%;
}
.donut-item:nth-child(3) .donut-chart  {
left:10%;
}
.donut-item:nth-child(1) .donut-chart  {
left:10%;
}
.donut-item:nth-child(5) .donut-chart {
		left:30%;
}
}
@media screen and (min-width: 900px) {
	.donut-item:nth-child(5) .donut-chart {
		left:38%;
}
	.donut-item p{
		padding: 0em 0.75em;
	}
}
@media screen and (min-width: 1300px) {
.donut-item:nth-child(1) {
    -webkit-flex: 1 1 33%;
    -ms-flex: 1 1 33%;
    flex: 1 1 33%;
}
.donut-item:nth-child(2) {
    -webkit-flex: 1 1 33%;
    -ms-flex: 1 1 33%;
    flex: 1 1 33%;
}
.donut-item:nth-child(3) {
    -webkit-flex: 1 1 33%;
    -ms-flex: 1 1 33%;
    flex: 1 1 33%;
}
.donut-item:nth-child(4) {

    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
	padding:2em 4em; 
}
.donut-item:nth-child(5) {
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
	padding:2em 4em; 
}

.donut-infop{
	text-align: center;
	padding: 0em 2em;
}	
.donut-item:nth-child(2) .donut-chart  {
left:0%;
}
.donut-item:nth-child(3) .donut-chart  {
left:0%;
}
.donut-item:nth-child(4) .donut-chart  {
left:0%;
}
.donut-item:nth-child(5) .donut-chart  {
left:0%;
}
.donut-item:nth-child(1) .donut-chart  {
left:0%;
}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	/* STYLES GO HERE */
.donut-item:nth-child(1) {
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
}
.donut-item:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}
.donut-item:nth-child(3) {
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
}
.donut-item:nth-child(4) {
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
	padding:1em 2em; 
}
	.donut-item:nth-child(5) {
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
	padding:1em 2em; 
}

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 

.donut-item:nth-child(1) {
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
}
.donut-item:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}
.donut-item:nth-child(3) {
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
}
.donut-item:nth-child(4) {
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
	padding:1em 2em; 
}
	.donut-item:nth-child(5) {
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
	padding:1em 2em; 
}

}