::-ms-clear, ::-ms-reveal{display: none;}

.sunny {
    position:absolute;
    left:0px;
    width: 170px;
    height: 170px;
    background-image: url('/Login/images2/login/images/sun.png');
    opacity:0.8;
}

@-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); }
}

.hide
{
    display: none;
}

#rain-canvas, #weather-canvas, #cloud-canvas, #time-canvas, #lightning-canvas, #lightning-canvas1
{
    position: absolute;
    z-index: -1;
   width:400px;
   height:300px;
   border-top-right-radius:100px;
   border-bottom-right-radius:100px;
   border-bottom-left-radius:200px;
}

#lightning-canvas{
    
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background-color: rgba(255,255,255,0.8);
    left: 160px;
    top: 150px;
    position: absolute;
    animation: myfirst 5s linear 0.5s infinite alternate;
    /* Firefox: */
    -moz-animation: myfirst 5s linear 0.5s infinite alternate;
    /* Safari and Chrome: */
    -webkit-animation: myfirst 5s linear 0.5s infinite alternate;
    /* Opera: */
    -o-animation: myfirst 5s linear 0.5s infinite alternate;
    z-index: 999;
}
#lightning-canvas1{
            width:35px;
            height:35px;
            border-radius:17.5px;
            background-color:rgba(255,255,255,0.8);
            left:150px;
            top:140px;
            position:absolute;
            animation: myfirst 5s linear 0.5s infinite alternate;
            /* Firefox: */
            -moz-animation: myfirst 5s linear 0.5s infinite alternate;
            /* Safari and Chrome: */
            -webkit-animation: myfirst 5s linear 0.5s infinite alternate;
            /* Opera: */
            -o-animation: myfirst 5s linear 0.5s infinite alternate;
            z-index:1;
        }
        @keyframes myfirst {
            0% {
               opacity:0;
            }
            10% {
                opacity:0.1;
            }
            20% {
                opacity:0.2;
            }
            30% {
                opacity:0.25;
            }

            40% {
                 opacity:0.3;
            }
            50% {
               opacity:0.35;
            }
            55% {
               opacity:0.4;
            }
            60% {
                opacity:0.35;
            }
            70% {
                opacity:0.3;
            }
            80% {
                opacity:0.25;
            }
            90% {
                opacity:0.2;
            }
            100% {
                opacity:0.1;
            }
        }
        @-moz-keyframes myfirst /* Firefox */
        {
            0% {
               opacity:0;
            }
            10% {
                opacity:0.1;
            }
            20% {
                opacity:0.2;
            }
            30% {
                opacity:0.25;
            }

            40% {
                 opacity:0.3;
            }
            50% {
               opacity:0.35;
            }
            55% {
               opacity:0.4;
            }
            60% {
                opacity:0.35;
            }
            70% {
                opacity:0.3;
            }
            80% {
                opacity:0.25;
            }
            90% {
                opacity:0.2;
            }
            100% {
                opacity:0.1;
            }
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
                0% {
               opacity:0;
            }
            10% {
                opacity:0.1;
            }
            20% {
                opacity:0.2;
            }
            30% {
                opacity:0.25;
            }

            40% {
                 opacity:0.3;
            }
            50% {
               opacity:0.35;
            }
            55% {
               opacity:0.4;
            }
            60% {
                opacity:0.35;
            }
            70% {
                opacity:0.3;
            }
            80% {
                opacity:0.25;
            }
            90% {
                opacity:0.2;
            }
            100% {
                opacity:0.1;
            }
        }

        @-o-keyframes myfirst /* Opera */
        {   0% {
               opacity:0;
            }
            10% {
                opacity:0.1;
            }
            20% {
                opacity:0.2;
            }
            30% {
                opacity:0.25;
            }

            40% {
                 opacity:0.3;
            }
            50% {
               opacity:0.35;
            }
            55% {
               opacity:0.4;
            }
            60% {
                opacity:0.35;
            }
            70% {
                opacity:0.3;
            }
            80% {
                opacity:0.25;
            }
            90% {
                opacity:0.2;
            }
            100% {
                opacity:0.1;
            }
        }
/* Canvas Background Classes */

.rain
{
    background-color: #2080B6;
}
.snow
{
    background-color: #959B9F;
}
.clouds
{
    background-color: #3498DB;
}
.clearsky, .default-weather
{
    background-color: #6FC2D4; /*背景颜色*/
    pointer-events:none;/*天气层不拦截鼠标事件*/
    position: fixed;
    z-index:0;
    left: 0px;
    top: 0px;    
}

.middle
{
    margin: 10px 0;
}

@media all and (min-width:500px)
{
    .middle
    {
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

.temp-change
{
    clear: both;
}

.weather-container
{
    position: relative;
}

.weather-description
{
    display: inline-block;
    text-transform: capitalize;
}

.weather-description, .weather-box
{
    padding: 10px 0;
}

.temperature
{
    font-size: 8rem;
    line-height: 1;
    margin-left: 35px;
}

@media all and (min-width:320px)
{
    .temperature
    {
        font-size: 12rem;
    }
}

/* Sticky Footer */

*
{
    margin: 0;
}
html, body
{
    height: 100%;
}
.page-wrap
{
    min-height: 100%; /* equal to footer height */
    margin-bottom: -100px;
}
.page-wrap:after
{
    content: "";
    display: block;
}
.site-footer, .page-wrap:after
{
    height: 100px;
}
.site-footer
{
    background: #fff;
    color: #555;
    font-size: 14px;
}

.site-footer-section
{
    padding: 5px 5px 0 5px;
    font-size: 14px;
}

.noun-project
{
    border: none;
    background: none;
    padding: 0;
    text-decoration: underline;
}

@media all and (min-width:341px)
{
    .page-wrap
    {
        /* equal to footer height */
        margin-bottom: -64px;
    }
    .site-footer, .page-wrap:after
    {
        height: 64px;
    }
}

@media all and (min-width:861px)
{

    .site-footer-section
    {
        display: inline-block;
        width: 50%;
        padding: 25px 25px 0 25px;
    }

    .author
    {
        text-align: right;
    }

}