@charset "utf-8";
/* CSS Document */
body, body *{
   -webkit-box-sizing: border-box;
   -mox-box-sizing: border-box;
   box-sizing: border-box;
}
body, p, div{font-family:verdana}
.wrapper{
   margin:2em auto;
   width: 500px;
   text-align: center;
}

.rainy_wrapper {position:absolute;left:5%;top:50%;transform:translateY(-50%) scale(.7);}
.cloudy_wrapper{position:absolute;left:45%;top:5%;transform:translateX(-50%) scale(.7);}
.sunny_wrapper {position:absolute;right:10%;top:50%;transform:translateY(-50%) scale(.7);}	

.barometer{
   transform:scale(1);
   width:500px;
   height:500px;
   border-radius:50%;
   background-color:rgba(5,68,116,0.20);
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   position:relative;
   display:flex;
   align-content: center;
}

.barometer_inner1,
.barometer_inner2,
.barometer_inner3{
   background-color:#fff;
   border-radius:50%;
   position:absolute;
   transform:translate(-50%,-50%);
   left:50%;
   top:50%;	
}	
.barometer_inner1{border:10px solid #7f7f7f;width:230px;height:230px;	}
.barometer_inner2{border:10px solid #b2b2b2;width:215px;height:215px;	}
.barometer_inner3{width:200px;height:200px;position:relative;}

.barometer_red_outer,
.barometer_orange_outer,
.barometer_green_outer{
   position:absolute;
   transform:translate(-50%,-50%);
   width:190px;
   height:190px;
   border-radius:50%;
   border:30px solid transparent;
   border-left-color:#ff0000;		
   left:50%;
   top:50%;		
}
.barometer_red_outer{		border-left-color:rgba(244,67,54,1.00); }
.barometer_orange_outer{	border-top-color:rgba(255,180,1,1.00);  }
.barometer_green_outer{		border-right-color:rgba(76,175,80,1.00);}

.barometer_red_inner,
.barometer_orange_inner,
.barometer_green_inner{
   position:absolute;
   transform:translate(-50%,-50%);
   width:130px;
   height:130px;
   border-radius:50%;
   border:30px solid transparent;
   left:50%;
   top:50%;
}
.barometer_red_inner{		border-left-color:rgba(244,67,54,0.5);}
.barometer_orange_inner{	border-top-color:rgba(255,180,1,0.5);}
.barometer_green_inner{		border-right-color:rgba(76,175,80,0.5);}

.barometer_needle {
   width:6em;
   position:absolute;
   left:43%;
   top:-19%;
   animation: barometer_needle_anim 2000ms ease-in-out infinite alternate;
   transform-origin: 1em 8.5em;
   transform: rotateZ(-85deg);
}
.barometer_pointer{
   position: absolute;
   top: 30px;
   left: 0;
   height: 0px;
   width: 0px;
   border-bottom: 90px solid #7f7f7f;
   border-top: 15px solid transparent;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;		
}	
.barometer_pivot {
   position: relative;
   top: 7.5em;
   width: 2em;
   height: 2em;
   border: .6em solid #b2b2b2;
   border-radius: 50%;
   background-color:#fff;
}

@keyframes barometer_needle_anim {
   0% {transform: rotateZ(-90deg);}
   45% {transform: rotateZ(20deg);}
   70% {transform: rotateZ(90deg);}
   100% {transform: rotateZ(80deg);}
}



/* https://github.com/Haonancx/css3-weather-barometer */	
/* SUNNY */
.sunny { 
   -webkit-animation: sunny 15s linear infinite; 
           animation: sunny 15s linear infinite;
   background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
   background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
   height: 140px;
   width: 20px; 
}
.sunny:before {
   background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
   background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
   content: ''; 
   height: 140px; 
   width: 20px;
   opacity: 1; 
   position: absolute;
   bottom: 0px;
   left: 0px; 
   -webkit-transform: rotate(90deg); 
       -ms-transform: rotate(90deg); 
           transform: rotate(90deg);
}
.sunny:after {
   background: #FFEE44; 
   border-radius: 50%; 
   box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
   content: '';  
   height: 80px;
   width: 80px;  
   position: absolute; 
   left: -30px; 
   top: 30px;
   }
@-webkit-keyframes sunny { 
   0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes sunny { 
   0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* CLOUDY */
.cloudy {
-webkit-animation: cloudy 5s ease-in-out infinite;
        animation: cloudy 5s ease-in-out infinite;
   background: #FFFFFF;
   border-radius: 50%;
   box-shadow: 
      #FFFFFF 65px -15px 0 -5px, 
      #FFFFFF 25px -25px, 
      #FFFFFF 30px 10px, 
      #FFFFFF 60px 15px 0 -10px, 
      #FFFFFF 85px 5px 0 -5px,
      #FFEE44 65px -20px;
   height: 50px;
   width: 50px; 
}
.cloudy:after {
   -webkit-animation: cloudy_shadow 5s ease-in-out infinite;
           animation: cloudy_shadow 5s ease-in-out infinite;
   background: #000000;
   border-radius: 50%;
   content: '';
   height: 15px;
   width: 120px;
   opacity: 0.2;
   position: absolute;
   left: 5px; 
   bottom: -60px;
   -webkit-transform: scale(.7);
      -ms-transform: scale(.7);
          transform: scale(.7);
}
@-webkit-keyframes cloudy {
   50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@keyframes cloudy {
   50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@-webkit-keyframes cloudy_shadow {
   50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity:.05; }
}
@keyframes cloudy_shadow {
   50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity:.05; }
}

/* RAINY */

.rainy {
   -webkit-animation: rainy 5s ease-in-out infinite 1s;
           animation: rainy 5s ease-in-out infinite 1s;
   background: #CCCCCC; 
   border-radius: 50%;
   box-shadow: 
      #CCCCCC 65px -15px 0 -5px, 
      #CCCCCC 25px -25px, 
      #CCCCCC 30px 10px, 
      #CCCCCC 60px 15px 0 -10px, 
      #CCCCCC 85px 5px 0 -5px;
   display: block;
   height: 50px;
   width: 50px;
}
.rainy:after {
   -webkit-animation: rainy_shadow 5s ease-in-out infinite 1s;
           animation: rainy_shadow 5s ease-in-out infinite 1s;
   background: #000000;
   border-radius: 50%;
   content: '';
   height: 15px;
   width: 120px;
   opacity: 0.2;
   position: absolute;
   left: 5px; 
   bottom: -60px;
   -webkit-transform: scale(.7);
       -ms-transform: scale(.7);
           transform: scale(.7);
}
.rainy:before {
   -webkit-animation: rainy_rain .7s infinite linear;
           animation: rainy_rain .7s infinite linear;
   content: '';
   background: #CCCCCC;
   border-radius: 50%;
   display: block;
   height: 6px;
   width: 3px;
   opacity: 0.3;
   -webkit-transform: scale(.9);
       -ms-transform: scale(.9);
           transform: scale(.9);
}
@-webkit-keyframes rainy {
   50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@keyframes rainy {
   50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@-webkit-keyframes rainy_shadow {
   50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; }
}
@keyframes rainy_shadow {
   50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; }
}
@-webkit-keyframes rainy_rain {
   0% {  
      box-shadow: 
         rgba(0,0,0,0) 30px 30px, 
         rgba(0,0,0,0) 40px 40px,  
         #000 50px 75px, 
         #000 55px 50px, 
         #000 70px 100px, 
         #000 80px 95px, 
         #000 110px 45px, 
         #000 90px 35px; 
   }
   25% {  
      box-shadow: 
         #000 30px 45px,
         #000 40px 60px,
         #000 50px 90px,
         #000 55px 65px,
         rgba(0,0,0,0) 70px 120px,
         rgba(0,0,0,0) 80px 120px,
         #000 110px 70px,
         #000 90px 60px;
   }
   26% {  
      box-shadow:
         #000 30px 45px,
         #000 40px 60px,
         #000 50px 90px,
         #000 55px 65px,
         rgba(0,0,0,0) 70px 40px,
         rgba(0,0,0,0) 80px 20px,
         #000 110px 70px,
         #000 90px 60px; 
   }
   50% { 
      box-shadow:
         #000 30px 70px,
         #000 40px 80px,
         rgba(0,0,0,0) 50px 100px,
         #000 55px 80px,
         #000 70px 60px,
         #000 80px 45px,
         #000 110px 95px,
         #000 90px 85px;
   }
   51% {
      box-shadow:
         #000 30px 70px,
         #000 40px 80px,
         rgba(0,0,0,0) 50px 45px,
         #000 55px 80px,
         #000 70px 60px,
         #000 80px 45px,
         #000 110px 95px,
         #000 90px 85px;
   }
   75% {
      box-shadow:
         #000 30px 95px,
         #000 40px 100px,
         #000 50px 60px,
         rgba(0,0,0,0) 55px 95px,
         #000 70px 80px,
         #000 80px 70px,
         rgba(0,0,0,0) 110px 120px,
         rgba(0,0,0,0) 90px 110px;
   }
   76% {
      box-shadow:
         #000 30px 95px,
         #000 40px 100px,
         #000 50px 60px,
         rgba(0,0,0,0) 55px 35px,
         #000 70px 80px,
         #000 80px 70px,
         rgba(0,0,0,0) 110px 25px,
         rgba(0,0,0,0) 90px 15px;
   }
   100% {
      box-shadow:
         rgba(0,0,0,0) 30px 120px,
         rgba(0,0,0,0) 40px 120px,
         #000 50px 75px,
         #000 55px 50px,
         #000 70px 100px,
         #000 80px 95px,
         #000 110px 45px,
         #000 90px 35px;
   }
}
@keyframes rainy_rain {
   0% {  
      box-shadow: 
         rgba(0,0,0,0) 30px 30px, 
         rgba(0,0,0,0) 40px 40px,  
         #000 50px 75px, 
         #000 55px 50px, 
         #000 70px 100px, 
         #000 80px 95px, 
         #000 110px 45px, 
         #000 90px 35px; 
   }
   25% {  
      box-shadow: 
         #f00 30px 45px,
         #f00 40px 60px,
         #000 50px 90px,
         #000 55px 65px,
         rgba(0,0,0,0) 70px 120px,
         rgba(0,0,0,0) 80px 120px,
         #000 110px 70px,
         #000 90px 60px;
   }
   26% {  
      box-shadow:
         #000 30px 45px,
         #000 40px 60px,
         #000 50px 90px,
         #000 55px 65px,
         rgba(0,0,0,0) 70px 40px,
         rgba(0,0,0,0) 80px 20px,
         #000 110px 70px,
         #000 90px 60px; 
   }
   50% { 
      box-shadow:
         #000 30px 70px,
         #000 40px 80px,
         rgba(0,0,0,0) 50px 100px,
         #000 55px 80px,
         #000 70px 60px,
         #000 80px 45px,
         #000 110px 95px,
         #000 90px 85px;
   }
   51% {
      box-shadow:
         #000 30px 70px,
         #000 40px 80px,
         rgba(0,0,0,0) 50px 45px,
         #000 55px 80px,
         #000 70px 60px,
         #000 80px 45px,
         #000 110px 95px,
         #000 90px 85px;
   }
   75% {
      box-shadow:
         #000 30px 95px,
         #000 40px 100px,
         #000 50px 60px,
         rgba(0,0,0,0) 55px 95px,
         #000 70px 80px,
         #000 80px 70px,
         rgba(0,0,0,0) 110px 120px,
         rgba(0,0,0,0) 90px 110px;
   }
   76% {
      box-shadow:
         #000 30px 95px,
         #000 40px 100px,
         #000 50px 60px,
         rgba(0,0,0,0) 55px 35px,
         #000 70px 80px,
         #000 80px 70px,
         rgba(0,0,0,0) 110px 25px,
         rgba(0,0,0,0) 90px 15px;
   }
   100% {
      box-shadow:
         rgba(0,0,0,0) 30px 120px,
         rgba(0,0,0,0) 40px 120px,
         #000 50px 75px,
         #000 55px 50px,
         #000 70px 100px,
         #000 80px 95px,
         #000 110px 45px,
         #000 90px 35px;
   }
}