@charset "utf-8";
/* CSS Document */
#weather-animation * {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* Font info*/
@font-face {
	font-family: 'meteocons';
	src:url('../fonts/meteocons.eot');
	src:url('../fonts/meteocons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/meteocons.svg#meteocons') format('svg'),
		url('../fonts/meteocons.woff') format('woff'),
		url('../fonts/meteocons.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'meteocons';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: 'meteocons';
	font-style: normal;
	speak: none;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-sun:before {
	content: "\e000";
}
.icon-moon:before {
	content: "\e001";
}
.icon-cloudy:before {
	content: "\e002";
}
.icon-rainy:before {
	content: "\e004";
}
.icon-snowy:before {
	content: "\e005";
}
.icon-lightning:before {
	content: "\e003";
}
#weather-animation
{
background:#fff;
height: 250px;

}


#weather-animation h2{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
}

/*animation weather cube*/
.stage{
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	width: 120px; 
	height: 120px;
}
#spinner div {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 1px solid #ccc;
    background: rgba(255,255,255,0.8);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    text-align: center;
    line-height: 120px;
    font-size: 100px;
	  padding-top:10px;
  }
  .face{
	
  }
  
/* Chrome*/
  #spinner .face1 { -webkit-transform: translateZ(60px);                                }
  #spinner .face2 { -webkit-transform: rotateY(90deg) translateZ(60px);                 }
  #spinner .face3 { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);  }
  #spinner .face4 { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); }
  #spinner .face5 { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); }
  #spinner .face6 { -webkit-transform: rotateX(-90deg) translateZ(60px);                }
/*Firefox*/  
  #spinner .face1 { -moz-transform: translateZ(60px);                                }
  #spinner .face2 { -moz-transform: rotateY(90deg) translateZ(60px);                 }
  #spinner .face3 { -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);  }
  #spinner .face4 { -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); }
  #spinner .face5 { -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); }
  #spinner .face6 { -moz-transform: rotateX(-90deg) translateZ(60px);                }
 /*Opera*/ 
  #spinner .face1 { -o-transform: translateZ(60px);                                }
  #spinner .face2 { -o-transform: rotateY(90deg) translateZ(60px);                 }
  #spinner .face3 { -o-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);  }
  #spinner .face4 { -o-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); }
  #spinner .face5 { -o-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); }
  #spinner .face6 { -o-transform: rotateX(-90deg) translateZ(60px);                }
  /* Edge  */
/*Final with out extension*/
  #spinner .face1 { transform: translateZ(60px);                                }
  #spinner .face2 { transform: rotateY(90deg) translateZ(60px);                 }
  #spinner .face3 { transform: rotateY(90deg) rotateX(90deg) translateZ(60px);  }
  #spinner .face4 { transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); }
  #spinner .face5 { transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); }
  #spinner .face6 { transform: rotateX(-90deg) translateZ(60px);                }

@-webkit-keyframes spincube {
    from,to  {                                                    }
    16%      { -webkit-transform: rotateY(-90deg);                }
    33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
    50%      { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
    66%      { -webkit-transform: rotateY(90deg) rotateX(90deg);  }
    83%      { -webkit-transform: rotateX(90deg);                 }
  }

@-moz-keyframes spincube {
    from,to  {                                                 }
    16%      { -moz-transform: rotateY(-90deg);                }
    33%      { -moz-transform: rotateY(-90deg) rotateZ(90deg); }
    50%      { -moz-transform: rotateY(180deg) rotateZ(90deg); }
    66%      { -moz-transform: rotateY(90deg) rotateX(90deg);  }
    83%      { -moz-transform: rotateX(90deg);                 }
  }
  @-o-keyframes spincube {
    from,to  {                                               }
    16%      { -o-transform: rotateY(-90deg);                }
    33%      { -o-transform: rotateY(-90deg) rotateZ(90deg); }
    50%      { -o-transform: rotateY(180deg) rotateZ(90deg); }
    66%      { -o-transform: rotateY(90deg) rotateX(90deg);  }
    83%      { -o-transform: rotateX(90deg);                 }
  }
/*Edge and Final*/
  @keyframes spincube {
    from,to  {                                            }
    16%      { transform: rotateY(-90deg);                }
    33%      { transform: rotateY(-90deg) rotateZ(90deg); }
    50%      { transform: rotateY(180deg) rotateZ(90deg); }
    66%      { transform: rotateY(90deg) rotateX(90deg);  }
    83%      { transform: rotateX(90deg);                 }
  }
  #spinner {
    -webkit-animation-name: spincube;
	 -webkit-animation-duration: 12s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
   -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 60px 60px 0;
	
	-moz-animation-name: spincube;
	 -moz-animation-duration: 12s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
   -moz-transform-style: preserve-3d;
    -moz-transform-origin: 60px 60px 0;
	
	-o-animation-name: spincube;
	 -o-animation-duration: 12s;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
   -o-transform-style: preserve-3d;
    -o-transform-origin: 60px 60px 0;
	/*Edge and Final*/	  
   animation-name: spincube;
   animation-duration: 12s;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   transform-style: preserve-3d;
   transform-origin: 60px 60px 0;
  }
  
  /*background animation*/
  
  

@-webkit-keyframes sky
{
from,to  {                                               }
0%   {background:#fff;}
25%  {background:#999;}
50%  {background:#99ccff;}
75%  {background:#333;}
100% {background:#fff;}
}
 
@-moz-keyframes sky
{
from,to  {                                               }
0%   {background:#fff;}
25%  {background:#999;}
50%  {background:#99ccff;}
75%  {background:#333;}
100% {background:#fff;}
}

@-o-keyframes sky{
from,to  {                                               }
0%   {background:#fff;}
25%  {background:#999;}
50%  {background:#99ccff;}
75%  {background:#333;}
100% {background:#fff;}
}

/*Edge and Final*/


@keyframes sky{
from,to  {                                               }
0%   {background:#fff;}
25%  {background:#999;}
50%  {background:#99ccff;}
75%  {background:#333;}
100% {background:#fff;}
}


#weather-animation{
	 -webkit-animation-name:sky; 
	 -webkit-animation-duration: 30s; /* Safari and Chrome */
	  -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-iteration-count: infinite;
 
 -moz-animation-name:sky;
	 -moz-animation-duration: 30s; /* firefox */
	  -moz-animation-timing-function: ease-in-out;
 -moz-animation-iteration-count: infinite;
 
 -o-animation-name:sky;
	 -o-animation-duration: 30s; /* 0pera */
	  -o-animation-timing-function: ease-in-out;
 -o-animation-iteration-count: infinite;
	
 
 animation-name:sky;
	animation-duration: 30s; /* css3 */
	 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
	 
 }