.blue{background:#5b9bd5;}
.yellow{background:#f5b83d;}
.light-blue{background:#bdd7ee;}
.light-yellow{background:#fad894;}
.patch{width:10px; height:10px!important; padding:0 3px; margin:0 5px; display:inline-block;}
.gp-table{table-layout:static; width:100%;}
.gp-table td{padding:8px;}

.piePortal{border:1px solid #ddd; padding:15px; text-align:center; width:240px; margin-bottom:30px;}

.piePortal-wide{position:relative; border:1px solid #ddd; padding:15px; text-align:center; width:480px;margin-bottom:30px;}

.nobonus{font-weight:bold; font-size:14px; position:absolute; top:40%; left:41%; z-index:10;}
.bonus{font-weight:bold; font-size:14px; position:absolute; top:50%; left:50%; z-index:10;}

.pieContainer {
          height: 100px;
          width:100px;
          margin:15px auto;
}
    
 .pie {
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 50px, 100px, 0px);
}
     
.hold {
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 100px, 100px, 50px);
}
 /***Lower Quatile Pie Chart***/
 #pieSlice-male-lq {
          -webkit-transform:rotate(0deg);
          -moz-transform:rotate(0deg);
          -o-transform:rotate(0deg);
          transform:rotate(0deg);
     }  

#pieSlice-male-lq .pie {
          background-color: #5b9bd5;
          -webkit-transform:rotate(150deg);
          -moz-transform:rotate(150deg);
          -o-transform:rotate(150deg);
          transform:rotate(150deg);
}
#pieSlice-female-lq {
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
}
#pieSlice-female-lq .pie {
          background-color: #f5b83d;
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
     }
     #pieSlice-female-lq2 {
          -webkit-transform:rotate(150deg);
          -moz-transform:rotate(150deg);
          -o-transform:rotate(150deg);
          transform:rotate(150deg);
     }
      #pieSlice-female-lq2 .pie {
          background-color: #f5b83d;
          -webkit-transform:rotate(30deg);
          -moz-transform:rotate(30deg);
          -o-transform:rotate(30deg);
          transform:rotate(30deg);
     }
/***Lower Middle Quatile Pie Chart***/
#pieSlice-male-lmq {
          -webkit-transform:rotate(0deg);
          -moz-transform:rotate(0deg);
          -o-transform:rotate(0deg);
          transform:rotate(0deg);
     }  

#pieSlice-male-lmq .pie {
          background-color: #5b9bd5;
          -webkit-transform:rotate(170deg);
          -moz-transform:rotate(170deg);
          -o-transform:rotate(170deg);
          transform:rotate(170deg);
     }
     #pieSlice-female-lmq {
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
     }
     #pieSlice-female-lmq .pie {
          background-color: #f5b83d;
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
     }
     #pieSlice-female-lmq2 {
          -webkit-transform:rotate(170deg);
          -moz-transform:rotate(170deg);
          -o-transform:rotate(170deg);
          transform:rotate(170deg);
     }
      #pieSlice-female-lmq2 .pie {
          background-color: #f5b83d;
          -webkit-transform:rotate(10deg);
          -moz-transform:rotate(10deg);
          -o-transform:rotate(10deg);
          transform:rotate(10deg);
     }
     /***Upper Middle Quatile Pie Chart***/
#pieSlice-male-umq {
          -webkit-transform:rotate(0deg);
          -moz-transform:rotate(0deg);
          -o-transform:rotate(0deg);
          transform:rotate(0deg);
     }  

#pieSlice-male-umq .pie {
          background-color: #5b9bd5;
          -webkit-transform:rotate(175deg);
          -moz-transform:rotate(175deg);
          -o-transform:rotate(175deg);
          transform:rotate(175deg);
     }
     #pieSlice-female-umq {
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
     }
     #pieSlice-female-umq .pie {
          background-color: #f5b83d;
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
     }
     #pieSlice-female-umq2 {
          -webkit-transform:rotate(175deg);
          -moz-transform:rotate(175deg);
          -o-transform:rotate(175deg);
          transform:rotate(175deg);
     }
      #pieSlice-female-umq2 .pie {
          background-color: #f5b83d;
          -webkit-transform:rotate(5deg);
          -moz-transform:rotate(5deg);
          -o-transform:rotate(5deg);
          transform:rotate(5deg);
     }
      /***Upper Quatile Pie Chart***/
#pieSlice-male-uq {
          -webkit-transform:rotate(0deg);
          -moz-transform:rotate(0deg);
          -o-transform:rotate(0deg);
          transform:rotate(0deg);
     }  

#pieSlice-male-uq .pie {
          background-color: #5b9bd5;
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
     }
  #pieSlice-male-uq2 {
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
     }
      #pieSlice-male-uq2 .pie {
          background-color: #5b9bd5;
          -webkit-transform:rotate(50deg);
          -moz-transform:rotate(50deg);
          -o-transform:rotate(50deg);
          transform:rotate(50deg);
     }
     #pieSlice-female-uq {
          -webkit-transform:rotate(230deg);
          -moz-transform:rotate(230deg);
          -o-transform:rotate(230deg);
          transform:rotate(230deg);
     }
     #pieSlice-female-uq .pie {
          background-color: #f5b83d;
          -webkit-transform:rotate(130deg);
          -moz-transform:rotate(130deg);
          -o-transform:rotate(130deg);
          transform:rotate(130deg);
     }
 /***Male Bonus***/
#pieSlice-male-nobonus {
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(260deg);
          -o-transform:rotate(260deg);
          transform:rotate(260deg);
     }  

#pieSlice-male-nobonus .pie {
          background-color: #bdd7ee;
          -webkit-transform:rotate(100deg);
          -moz-transform:rotate(100deg);
          -o-transform:rotate(100deg);
          transform:rotate(100deg);
     }
  #pieSlice-male-bonus {
          -webkit-transform:rotate(0deg);
          -moz-transform:rotate(0deg);
          -o-transform:rotate(0deg);
          transform:rotate(0deg);
     }
      #pieSlice-male-bonus .pie {
          background-color: #5b9bd5;
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
     }
     #pieSlice-male-bonus2 {
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
     }
     #pieSlice-male-bonus2 .pie {
          background-color: #5b9bd5;
          -webkit-transform:rotate(80deg);
          -moz-transform:rotate(80deg);
          -o-transform:rotate(80deg);
          transform:rotate(80deg);
     }
     /***Female Bonus***/
#pieSlice-female-nobonus {
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(240deg);
          -o-transform:rotate(240deg);
          transform:rotate(240deg);
     }  

#pieSlice-female-nobonus .pie {
          background-color: #fad894;
          -webkit-transform:rotate(120deg);
          -moz-transform:rotate(120deg);
          -o-transform:rotate(120deg);
          transform:rotate(120deg);
     }
  #pieSlice-female-bonus {
          -webkit-transform:rotate(0deg);
          -moz-transform:rotate(0deg);
          -o-transform:rotate(0deg);
          transform:rotate(0deg);
     }
      #pieSlice-female-bonus .pie {
          background-color: #f5b83d;
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
     }
     #pieSlice-female-bonus2 {
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
     }
     #pieSlice-female-bonus2 .pie {
          background-color: #f5b83d;
          -webkit-transform:rotate(60deg);
          -moz-transform:rotate(60deg);
          -o-transform:rotate(60deg);
          transform:rotate(60deg);
     }
@media only screen
and (min-width : 768px){

}	
@media only screen
and (min-width : 992px){

}