/* CSS Document */

//---------------   CSS termometro de Reputación     ------------
            .container {
                //margin: 0px auto;
                //width: 300px;
                //text-align: center;
            }
     .radio {
                display: none;
				//visibility:hidden;
            }

     .label {
		 
                display: inline-block;
                margin: 0 0.5px 1px;
                padding: 1px 0.5px;
                color: #666666;
                text-shadow: 0 1px black;
                border-radius: 3px;
                cursor: pointer;
				
            }

     .radio:checked + .label {
                color: white;
				//background: rgb(52, 68, 73);
				background: rgb(102, 102, 102);
            }			

     .container .progress {
                //margin: 0 auto;
                width: 115px;
            }

     .progress-bar {
                height: 14px;
                border-radius: 4px;
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                transition: 0.4s linear;
                transition-property: width, background-color;
                box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
            }			

            .progress {
                padding: 1px;
				background: rgb(52, 68, 73);
				//background: rgb(102, 102, 102);
                border-radius: 4px;
            }

  

            #five:checked ~ .progress > .progress-bar {
                width: 5%;
                background-color: #f34213;
            }

            #twentyfive:checked ~ .progress > .progress-bar {
                width: 25%;
                background-color: #f27011;
            }

            #fifty:checked ~ .progress > .progress-bar {
                width: 50%;
                background-color: #f2b01e;
            }

            #seventyfive:checked ~ .progress > .progress-bar {
                width: 75%;
                background-color: #f2d31b;
            }

            #onehundred:checked ~ .progress > .progress-bar {
                width: 100%;
                background-color: #86e01e;
            }
			
//--------------------    Fin     ---------------------------------------			

            .container0 {
                //margin: 0px auto;
                //width: 300px;
                //text-align: center;
            }       

     .container0 .progress0 {
		 
                //margin: 0 auto;
                width: 115px;
				
            }

     .progress-bar0 {
		 
                height: 14px;
                border-radius: 4px;
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                transition: 0.4s linear;
                transition-property: width, background-color;
                box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
				
            }	
		
          .progress0 { 
		  
                padding: 1px;
				background: rgb(52, 68, 73);
				//background: rgb(102, 102, 102);
                border-radius: 4px;
				
            }

  

            #five:checked ~ .progress0 > .progress-bar0 {
                width: 5%;
                background-color: #f34213;
            }

            #twentyfive:checked ~ .progress0 > .progress-bar0 {
                width: 25%;
                background-color: #f27011;
            }

            #fifty:checked ~ .progress0 > .progress-bar0 {
                width: 50%;
                background-color: #f2b01e;
            }

            #seventyfive:checked ~ .progress0 > .progress-bar0 {
                width: 75%;
                background-color: #f2d31b;
            }

            #onehundred:checked ~ .progress0 > .progress-bar0 {
                width: 100%;
                background-color: #86e01e;
            }			


//-------------------------     Fin     ---------------------------

            .container1 {
                //margin: 0px auto;
                //width: 300px;
                //text-align: center;
            }       

     .container1 .progress1 {
                //margin: 0 auto;
                width: 115px;
            }

     .progress-bar1 {
                height: 14px;
                border-radius: 4px;
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                transition: 0.4s linear;
                transition-property: width, background-color;
                box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
            }	
		
          .progress1 {
                padding: 1px;
				background: rgb(52, 68, 73);
				//background: rgb(102, 102, 102);
                border-radius: 4px;
            }

  

            #five:checked ~ .progress1 > .progress-bar1 {
                width: 5%;
                background-color: #f34213;
            }

            #twentyfive:checked ~ .progress1 > .progress-bar1 {
                width: 25%;
                background-color: #f27011;
            }

            #fifty:checked ~ .progress1 > .progress-bar1 {
                width: 50%;
                background-color: #f2b01e;
            }

            #seventyfive:checked ~ .progress1 > .progress-bar1 {
                width: 75%;
                background-color: #f2d31b;
            }

            #onehundred:checked ~ .progress1 > .progress-bar1 {
                width: 100%;
                background-color: #86e01e;
            }			


//-------------------------     Fin     ---------------------------


            .container2 {
                //margin: 0px auto;
                //width: 300px;
                //text-align: center;
            }       

     .container2 .progress2 {
                //margin: 0 auto;
                width: 115px;
            }

     .progress-bar2 {
                height: 14px;
                border-radius: 4px;
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                transition: 0.4s linear;
                transition-property: width, background-color;
                box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
            }	
		
          .progress2 {
                padding: 1px;
				background: rgb(52, 68, 73);
				//background: rgb(102, 102, 102);
                border-radius: 4px;
            }

  

            #five:checked ~ .progress2 > .progress-bar2 {
                width: 5%;
                background-color: #f34213;
            }

            #twentyfive:checked ~ .progress2 > .progress-bar2 {
                width: 25%;
                background-color: #f27011;
            }

            #fifty:checked ~ .progress2 > .progress-bar2 {
                width: 50%;
                background-color: #f2b01e;
            }

            #seventyfive:checked ~ .progress2 > .progress-bar2 {
                width: 75%;
                background-color: #f2d31b;
            }

            #onehundred:checked ~ .progress2 > .progress-bar2 {
                width: 100%;
                background-color: #86e01e;
            }			


//-------------------------     Fin     ---------------------------


            .container3 {
                //margin: 0px auto;
                //width: 300px;
                //text-align: center;
            }       

     .container3 .progress3 {
                //margin: 0 auto;
                width: 115px;
            }

     .progress-bar3 {
                height: 14px;
                border-radius: 4px;
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                transition: 0.4s linear;
                transition-property: width, background-color;
                box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
            }	
		
          .progress3 {
                padding: 1px;
				background: rgb(52, 68, 73);
				//background: rgb(102, 102, 102);
                border-radius: 4px;
            }

  

            #five:checked ~ .progress3 > .progress-bar3 {
                width: 5%;
                background-color: #f34213;
            }

            #twentyfive:checked ~ .progress3 > .progress-bar3 {
                width: 25%;
                background-color: #f27011;
            }

            #fifty:checked ~ .progress3 > .progress-bar3 {
                width: 50%;
                background-color: #f2b01e;
            }

            #seventyfive:checked ~ .progress3 > .progress-bar3 {
                width: 75%;
                background-color: #f2d31b;
            }

            #onehundred:checked ~ .progress3 > .progress-bar3 {
                width: 100%;
                background-color: #86e01e;
            }			


//-------------------------     Fin     ---------------------------


            .container4 {
                //margin: 0px auto;
                //width: 300px;
                //text-align: center;
            }       

     .container4 .progress4 {
                //margin: 0 auto;
                width: 115px;
            }

     .progress-bar4 {
                height: 14px;
                border-radius: 4px;
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                transition: 0.4s linear;
                transition-property: width, background-color;
                box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
            }	
		
          .progress4 {
                padding: 1px;
				background: rgb(52, 68, 73);
				//background: rgb(102, 102, 102);
                border-radius: 4px;
            }

  

            #five:checked ~ .progress4 > .progress-bar4 {
                width: 5%;
                background-color: #f34213;
            }

            #twentyfive:checked ~ .progress4 > .progress-bar4 {
                width: 25%;
                background-color: #f27011;
            }

            #fifty:checked ~ .progress4 > .progress-bar4 {
                width: 50%;
                background-color: #f2b01e;
            }

            #seventyfive:checked ~ .progress4 > .progress-bar4 {
                width: 75%;
                background-color: #f2d31b;
            }

            #onehundred:checked ~ .progress4 > .progress-bar4 {
                width: 100%;
                background-color: #86e01e;
            }			


//-------------------------     Fin     ---------------------------


            .container5 {
                //margin: 0px auto;
                //width: 300px;
                //text-align: center;
            }       

     .container5 .progress5 {
                //margin: 0 auto;
                width: 115px;
            }

     .progress-bar5 {
                height: 14px;
                border-radius: 4px;
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                transition: 0.4s linear;
                transition-property: width, background-color;
                box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
            }	
		
          .progress5 {
                padding: 1px;
				background: rgb(52, 68, 73);
				//background: rgb(102, 102, 102);
                border-radius: 4px;
            }

  

            #five:checked ~ .progress5 > .progress-bar5 {
                width: 5%;
                background-color: #f34213;
            }

            #twentyfive:checked ~ .progress5 > .progress-bar5 {
                width: 25%;
                background-color: #f27011;
            }

            #fifty:checked ~ .progress5 > .progress-bar5 {
                width: 50%;
                background-color: #f2b01e;
            }

            #seventyfive:checked ~ .progress5 > .progress-bar5 {
                width: 75%;
                background-color: #f2d31b;
            }

            #onehundred:checked ~ .progress5 > .progress-bar5 {
                width: 100%;
                background-color: #86e01e;
            }			


//-------------------------     Fin     ---------------------------


            .container6 {
                //margin: 0px auto;
                //width: 300px;
                //text-align: center;
            }       

     .container6 .progress6 {
                //margin: 0 auto;
                width: 115px;
            }

     .progress-bar6 {
                height: 14px;
                border-radius: 4px;
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                transition: 0.4s linear;
                transition-property: width, background-color;
                box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
            }	
		
          .progress6 {
                padding: 1px;
				background: rgb(52, 68, 73);
				//background: rgb(102, 102, 102);
                border-radius: 4px;
            }

  

            #five:checked ~ .progress6 > .progress-bar6 {
                width: 5%;
                background-color: #f34213;
            }

            #twentyfive:checked ~ .progress6 > .progress-bar6 {
                width: 25%;
                background-color: #f27011;
            }

            #fifty:checked ~ .progress6 > .progress-bar6 {
                width: 50%;
                background-color: #f2b01e;
            }

            #seventyfive:checked ~ .progress6 > .progress-bar6 {
                width: 75%;
                background-color: #f2d31b;
            }

            #onehundred:checked ~ .progress6 > .progress-bar6 {
                width: 100%;
                background-color: #86e01e;
            }			


//-------------------------     Fin     ---------------------------


            .container7 {
                //margin: 0px auto;
                //width: 300px;
                //text-align: center;
            }       

     .container7 .progress7 {
                //margin: 0 auto;
                width: 115px;
            }

     .progress-bar7 {
                height: 14px;
                border-radius: 4px;
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                transition: 0.4s linear;
                transition-property: width, background-color;
                box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
            }	
		
          .progress7 {
                padding: 1px;
				background: rgb(52, 68, 73);
				//background: rgb(102, 102, 102);
                border-radius: 4px;
            }

  

            #five:checked ~ .progress7 > .progress-bar7 {
                width: 5%;
                background-color: #f34213;
            }

            #twentyfive:checked ~ .progress7 > .progress-bar7 {
                width: 25%;
                background-color: #f27011;
            }

            #fifty:checked ~ .progress7 > .progress-bar7 {
                width: 50%;
                background-color: #f2b01e;
            }

            #seventyfive:checked ~ .progress7 > .progress-bar7 {
                width: 75%;
                background-color: #f2d31b;
            }

            #onehundred:checked ~ .progress7 > .progress-bar7 {
                width: 100%;
                background-color: #86e01e;
            }			


//-------------------------     Fin     ---------------------------


            .container8 {
                //margin: 0px auto;
                //width: 300px;
                //text-align: center;
            }       

     .container8 .progress8 {
                //margin: 0 auto;
                width: 115px;
            }

     .progress-bar8 {
                height: 14px;
                border-radius: 4px;
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                transition: 0.4s linear;
                transition-property: width, background-color;
                box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
            }	
		
          .progress8 {
                padding: 1px;
				background: rgb(52, 68, 73);
				//background: rgb(102, 102, 102);
                border-radius: 4px;
            }

  

            #five:checked ~ .progress8 > .progress-bar8 {
                width: 5%;
                background-color: #f34213;
            }

            #twentyfive:checked ~ .progress8 > .progress-bar8 {
                width: 25%;
                background-color: #f27011;
            }

            #fifty:checked ~ .progress8 > .progress-bar8 {
                width: 50%;
                background-color: #f2b01e;
            }

            #seventyfive:checked ~ .progress8 > .progress-bar8 {
                width: 75%;
                background-color: #f2d31b;
            }

            #onehundred:checked ~ .progress8 > .progress-bar8 {
                width: 100%;
                background-color: #86e01e;
            }			


//-------------------------     Fin     ---------------------------


            .container9 {
                //margin: 0px auto;
                //width: 300px;
                //text-align: center;
            }       

     .container9 .progress9 {
                //margin: 0 auto;
                width: 115px;
            }

     .progress-bar9 {
                height: 14px;
                border-radius: 4px;
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                transition: 0.4s linear;
                transition-property: width, background-color;
                box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
            }	
		
          .progress9 {
                padding: 1px;
				background: rgb(52, 68, 73);
				//background: rgb(102, 102, 102);
                border-radius: 4px;
            }

  

            #five:checked ~ .progress9 > .progress-bar9 {
                width: 5%;
                background-color: #f34213;
            }

            #twentyfive:checked ~ .progress9 > .progress-bar9 {
                width: 25%;
                background-color: #f27011;
            }

            #fifty:checked ~ .progress9 > .progress-bar9 {
                width: 50%;
                background-color: #f2b01e;
            }

            #seventyfive:checked ~ .progress9 > .progress-bar9 {
                width: 75%;
                background-color: #f2d31b;
            }

            #onehundred:checked ~ .progress9 > .progress-bar9 {
                width: 100%;
                background-color: #86e01e;
            }			


//-------------------------     Fin     ---------------------------