body {
	background: #022915;
  width: 92%;
  
}

ul {
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}

h1 {
	font-size: 23px;
}

h2 {
	font-size: 17px;
}

p {
	font-size: 15px;
}

a {
	text-decoration: none;
	font-size: 15px;
}
	a:hover {
		text-decoration: underline;
	}

h1, h2, p, a, span{
	color: #fff;
}
	.scnd-font-color {
		color: #9099b7;
	}
.titular {
display: block;
line-height: 60px;
margin: 0;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.horizontal-list {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
	.horizontal-list li {
		float: left;
	}
		.block {
			margin: 25px 25px 25px 25px;
			background: #010e1b;
			border-radius: 5px;
      float: left;
      width: 100%;
      overflow: hidden;
      height: 500px;
      align-items: center;
      margin-left: 15px;
      position: relative;
       
      padding: 0px;

		}
		/******************************************** LEFT CONTAINER *****************************************/
 				
			.line-chart-block, .bar-chart-block {
				height: 610px;
			}
				.line-chart {
					height: 400px;
					background: #11a8ab;
          line-height: 11px;
          padding-left: 18px;
           
				}
				.time-lenght {
					padding-top: 22px;
					padding-left: 38px;
          overflow: hidden;
				}
					.time-lenght-btn {
						display: block;
						width: 150px;
						line-height: 31px;
						background: #50597b;
						border-radius: 5px;
						font-size: 14px;
						text-align: center;
						margin-right: 5px;
						-webkit-transition: background .3s;
						transition: background .3s;
					}
						

          .time-lenght-btn  {
            text-decoration: none;
            background: #18c944;
          }

          .time-lenght-btn:hover {
            text-decoration: none;
            background: #18c3c9;
          }


				.month-data {
					padding-top: 28px;
				}
					.month-data p {
						display: inline-block;
						margin: 0;
						padding: 0 25px 15px;            
						font-size: 16px;
					}
						.month-data p:last-child {
							padding: 0 25px;
              float: right;
							font-size: 15px;
						}
						.increment {
							color: #e64c65;
						}






            .donut-chart-block4 {
              overflow: hidden;
              height: 185px;
              display: none;
            }

            .donut-chart-block4 img {
              overflow: hidden;
              height: 45px;
            }
              .donut-chart-block4 .titular {
                padding: 10px 0;
                border-bottom: 2px solid #394264;
              }
              .os4-percentages li {
                width: 50%;
                border-left: 2px solid #394264;
               
                
                text-align: center;					
                background: #0c415a;
                align-items: center;
              }
                .os4 {
                  margin: 0;
                  padding: 10px 0 5px;
                  font-size: 12px;
                   
                }
                  .os4.ios {
                    border-top: 8px solid #11A8AB;
                     
                     
                  }
                  
                  .os4.win {
                    border-top: 8px solid #aeb90b;
                  }
                .os4-percentage {
                  margin: 0;
                  padding: 0 0 10px 10px;
                  font-size: 18px;
                }


                @media only screen  and   (max-width:618px ){
                  
               .donut-chart-block4 {
              overflow: hidden;
              height: 381px;
              display: block;
            }

            .donut-chart-block4 img {
              overflow: hidden;
              height: 221px;
              display: block;
            } 
            .os4 {
              margin: 0;
              padding: 10px 0 5px;
              font-size: 14px;
               
            }

            figcaption{
              display: inline-block;
               width: 100%;
 
               border: 1px solid #20638f;
               padding: 0.4em 0.6em;
               background-color: #3eb95d;
               text-decoration: none;
               text-align: center;
               font-weight: 800;
               font-size: 14px;
               text-transform: uppercase;
               border-radius: 0px;
               color: #ffffff;
               line-height: 20px;
               border-left: 1px solid #2E4476;
               box-shadow: 0px 5px 0px 0px #2E4476;
               } 
          } 
          
          
        figcaption{
         display: inline-block;
          width: 100%;
            
          border: 1px solid #20638f;
          padding: 0.4em 0.6em;
          background-color: #3eb95d;
          text-decoration: none;
          text-align: center;
          font-weight: 800;
          font-size: 12px;
          text-transform: uppercase;
          border-radius: 0px;
          color: #ffffff;
          line-height: 20px;
          border-left: 1px solid #2E4476;
          box-shadow: 0px 5px 0px 0px #2E4476;
          } 
/******************************************** LEFT CONTAINER *****************************************/
 

.donut-chart-block {
  overflow: hidden;
  background: url("../img/31.jpg")    ;
  height: 372px;
  border-bottom: 4px solid #010e1b;
  box-shadow: 3px 0 rgba(0,0,0,.1), 3px -3px rgba(0,0,0,.1);
}
  .donut-chart-block .titular {
    padding: 10px 0;
    
  }
  .os-percentages li {
    width: 50%;
    border-left: 2px solid #394264;
    
    text-align: center;					
    background: #0c415a;
    align-items: center;
  }
    .os {
      margin: 0;
      padding: 10px 0 5px;
      font-size: 15px;	
    
    }
      .os.ios {
        border-top: 8px solid #11A8AB;
        
      }
      
      .os.win {
        border-top: 8px solid #aeb90b;
      }
    .os-percentage {
      margin: 0;
      padding: 0 0 10px 10px;
      font-size: 18px;
    }
 


    .os1 {
      margin: 0;
      padding: 10px 0 5px;
      font-size: 15px;		
    }

    .os1.ios {
      border-top: 8px solid #1154ab;
    }
    
    .os1.win {
      border-top: 8px solid #30db4c;
      border-radius: 0px;
    }
  .os1-percentage {
    margin: 0;
    padding: 0 0 5px 10px;
    font-size: 18px;
  } 
/******************************************
  CIRCULAR PIE CHART
******************************************/
.donut-chart {
  position: relative;
	width: 200px;
  height: 200px;
	margin: 0 auto 2rem;
	border-radius: 100%;
  box-shadow: 3px 0 rgba(0,0,0,.1), 3px -3px rgba(0,0,0,.1);
  box-shadow: 0 1px 0 #ccc,
  0 2px 0 #111111,
  0 3px 0 rgb(17, 17, 17),
  0 4px 0 #181818,
  0 5px 0 #aaa,
  0 6px 1px rgba(0,0,0,.1),
  0 0 5px rgba(0,0,0,.1),
  0 1px 3px rgba(0,0,0,.3),
  0 3px 5px rgba(0,0,0,.2),
  0 5px 10px rgba(0,0,0,.25),
  0 10px 10px rgba(0,0,0,.2),
  0 20px 20px rgba(0,0,0,.15);
 }
p.center-date {
  background: #d1d4df;
  position: absolute;
  text-align: center;
	font-size: 28px;
  top:0;left:0;bottom:0;right:0;
  width: 50px;
  height: 50px;
  margin: auto;
  border-radius: 50%;
  line-height: 35px;
  padding: 15% 0 0;
}
.center-date span.scnd-font-color {
 line-height: 0; 
}
.recorte {
    border-radius: 50%;
    clip: rect(0px, 200px, 200px, 100px);
    height: 100%;
    position: absolute;
    width: 100%;
   
  }
.quesito {
    border-radius: 50%;
    clip: rect(0px, 100px, 200px, 0px);
    height: 100%;
    position: absolute;
    width: 100%;
    font-family: monospace;
    font-size: 1.5rem;
  }
#porcion1 {
    transform: rotate(0deg);
  }

#porcion1 .quesito {
    background-color: #aeb90b;
    transform: rotate(256deg);
    box-shadow: 3px 0 rgba(0,0,0,.1), 3px -3px rgba(0,0,0,.1);
  }
#porcion2 {
    transform: rotate(76deg);
  }
#porcion2 .quesito {
    background-color: #11A8AB;
    transform: rotate(-81deg);
  }
#porcion3 {
    transform: rotate(215deg);
  }
#porcion3 .quesito {
    background-color: #11A8AB;
    transform: rotate(173deg);
  }
#porcionFin {
    transform:rotate(-33deg);
  }
#porcionFin .quesito {
    background-color: #aeb90b;
    transform: rotate(213deg);
    box-shadow: 3px 0 rgba(0,0,0,.1), 3px -3px rgba(0,0,0,.1);
    
  }
.nota-final {
  clear: both;
  color: #4FC4F6;
  font-size: 1rem;
  padding: 2rem 0;
}
.nota-final strong {
  color: #E64C65;
}
.nota-final a {
  color: #FCB150;
  font-size: inherit;
}




.recorte {
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
  height: 100%;
  position: absolute;
  width: 100%;
}
.quesito {
  border-radius: 50%;
  clip: rect(0px, 100px, 200px, 0px);
  height: 100%;
  position: absolute;
  width: 100%;
  font-family: monospace;
  font-size: 1.5rem;
}
#porcion11 {
  transform: rotate(0deg);
}

#porcion11 .quesito {
  background-color: #30db4c;
  transform: rotate(155deg);
  box-shadow: 0px 5px 10px -5px #fdfe22;
}
#porcion21 {
  transform: rotate(21deg);
}
#porcion21 .quesito {
  background-color: #1154ab;
  transform: rotate(-85deg);
}
#porcion31 {
  transform: rotate(155deg);
}
#porcion31 .quesito {
  background-color: #1154ab;
  transform: rotate(184deg);
}
#porcionFin1 {
  transform:rotate(-33deg);
}
#porcionFin1 .quesito {
  background-color: #1154ab;
  transform: rotate(33deg);
}
.nota-final {
clear: both;
color: #4FC4F6;
font-size: 1rem;
padding: 2rem 0;
}
.nota-final strong {
color: #E64C65;
}
.nota-final a {
color: #FCB150;
font-size: inherit;
}
/******************************************
 
******************************************/
 




[class^='eje-'] {
  position: absolute;
  left: 0;
  bottom: 0rem;
  width: 100%;
  padding: 1rem 1rem 0 2rem;
  height: 80%;
}
.eje-x {
  height: .4rem;
}

.eje-x1 {
  height: 2.4rem;
}


.eje-x1 li {
  width: 10%;
  float: left;
  text-align: center;
}
.eje-y li {
  height: 10%;
  border-top: 1px solid #777;
}
[data-ejeY]:before {
  content: attr(data-ejeY);
  display: inline-block;
  width: 2rem;
  text-align: right;
  line-height: 0;
  position: relative;
  left: -2.5rem;
  top: -.5rem;
} 
.eje-x li {
  width: 10%;
  float: left;
  text-align: center;
}


/**************************
BAR-CHART
**************************/
.grafico.bar-chart {
  background: #0b52b6;
  padding: 0 1rem 2rem 1rem;
  width: 100%;
  height: 61%;
  position: relative;
  color: #fff;
  font-size: 80%;
  cursor: pointer;background-color: rgba(14,81,117,0.9);
  
}
.bar-chart [class^='eje-'] {
  padding: 0 1rem 0 3rem;
  bottom: 1rem;
}
.bar-chart .eje-x {
  bottom: 0;
   
}
 .bar-chart .eje-y li {
  height: 9%;
  border-top: 1px solid #fff;
   
}
.bar-chart .eje-x li {
  width: 9%;
  position: relative;
  text-align: left;
}
.bar-chart .eje-x li i {
  transform: rotatez(-45deg) translatex(-1rem);
  transform-origin: 25% 70%;
  display: block;
}
.bar-chart .eje-x li:before {
  content: '';
  position: absolute;
  bottom: 2.1rem;
  width: 70%;
  right: 15%;
  box-shadow: 3px 0 rgba(0,0,0,.1), 3px -3px rgba(0,0,0,.1);
}
.bar-chart .eje-x li:nth-child(1):before {
  background: #64da04;  
  height: 50%; border-bottom: solid 1px #0DABD9;
 }
.bar-chart .eje-x li:nth-child(2):before {
  background: #8d04a8; 
  height: 85%;
}
.bar-chart .eje-x li:nth-child(3):before {
  background: #e98f09;  
  height: 105%;
}
.bar-chart .eje-x li:nth-child(4):before {
  background: #4FC4F6;  
  height: 440%;  
  border-left: solid 2px rgba(255,255,255,0.5); 
}
.bar-chart .eje-x li:nth-child(5):before {
  background: #FFED0D;  
  height: 620%;
}
.bar-chart .eje-x li:nth-child(6):before {
  background: #F46FDA;  
  height: 870%;
}

.bar-chart .eje-x li:nth-child(7):before {
  background: #05b454;  
  height: 880%;
}
.bar-chart .eje-x li:nth-child(8):before {
  background: #FCB150;  
    height: 890%;
}
.bar-chart .eje-x li:nth-child(8):hover {
 
  zoom: 1.5;
	}


.bar-chart .eje-x li:nth-child(9):before {
  background: #15BFCC;  
  height: 900%;
}