#today {
    /*background: #11487e url(../img/today-bg-tile.jpg) repeat-x 0 top; #001C37*/
    background-color: #af8454;
    color: #fff;
    padding: 40px 0px 40px;
}

    #today li a:link,
    #today li a:visited {
        color: #fff;
    }

    #today li a:hover,
    #today li a:focus,
    #today li a:active {
        color: #fff;
    }

    #today > div > ul > li.locations,
    #today > div > ul > li.help {
        padding-left: 15px;
        background: #1a63a9;
    }

    #today .owl-nav {
        position: absolute;
        left: 0px;
        top: 25%;
        z-index: 100;
        width: 100%;
        opacity: .8;
        margin-top: -10px;
        transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
    }

        #today .owl-nav .owl-prev {
            position: absolute;
            left: -70px;
            width: 60px;
            height: 60px;
            color: #ffffff;
            line-height: 56px;
            font-size: 24px;
            text-align: center;
            border-radius: 50px;
            transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            -webkit-transition: all 500ms ease;
            -ms-transition: all 500ms ease;
            -o-transition: all 500ms ease;
            border: 2px solid rgba(255,255,255,0.60);
        }

        #today .owl-nav .owl-next {
            position: absolute;
            right: -70px;
            color: #ffffff;
            font-size: 24px;
            width: 60px;
            height: 60px;
            color: #ffffff;
            line-height: 56px;
            border-radius: 50px;
            text-align: center;
            transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            -webkit-transition: all 500ms ease;
            -ms-transition: all 500ms ease;
            -o-transition: all 500ms ease;
            border: 2px solid rgba(255,255,255,0.60);
        }

.city {
    float: right;
    padding-right: 20px;
}

    .city ul > li {
        float: left;
        margin-left: 8px;
        border: 1px solid #F00;
    }

        .city ul > li > a {
            display: block;
            height: 31px;
            line-height: 31px;
            padding: 0 10px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    .city li {
        width: 170px;
        cursor: pointer;
        position: relative;
        text-align: left;
    }

        .city li.closed {
            background: #1a63a9 url(../img/today-city-arrow-down.png) no-repeat 135px center;
        }

        .city li.open {
            background: #1a63a9 url(../img/today-city-arrow-up.png) no-repeat 135px center;
        }

        .city li ul {
            width: 170px;
            background-color: #fff;
            z-index: 999;
            position: absolute;
            top: 31px;
            display: none;
        }

    .city ul li:hover ul,
    .city ul li:focus ul,
    .city ul li:hover a:focus + ul {
        display: block;
        visibility: visible;
    }

    .city li ul > li a {
        display: block;
        width: 170px;
        height: 30px;
        line-height: 30px;
        border-top: 1px solid #c3d8ec;
        padding-left: 10px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .city ul li ul li a:link,
    .city ul li ul li a:visited,
    .city ul li ul li a:hover,
    .city ul li ul li a:focus,
    .city ul li ul li a:active {
        color: #195b9b !important;
    }
.capitals {
    clear: both;
}

.capital {
    border-right: 2px solid #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .capital:last-child {
        margin-right: 0;
        padding-right: 0;
        border-right: none;
        background-image: none;
    }

    .capital a:hover,
    .capital a:focus,
    .capital a:active {
        text-decoration: none !important;
    }

    .capital h3 {
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        margin: 0;
        padding: 0 0 6px 0;
    }

        .capital h3:hover {
            text-decoration: underline;
        }
.now {
    margin: 0;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
}

    .now .val {
        display: block;
        padding-top: 3px;
        font-size: 24px;
        line-height: 42px;
        font-weight: bold;
    }

.weicon {
    margin: 0;
}

.minmax {
    margin: 0;
    padding-top: 12px;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
}

    .minmax .max {
        color: #fddd71;
    }

    .minmax .wrd {
        font-size: 14px;
    }

.precis {
    height: 50px;
    margin: 4px 0 0 0;
    color: #bfdefb;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
}

.wind {
    margin: 0;
    padding-top: 5px;
    font-size: 13px;
    line-height: 16px;
    color: #fff;
}

    .wind:hover,
    .wind:focus {
        text-decoration: none;
    }

.rain {
    margin: 0;
    padding-top: 7px;
    font-size: 13px;
    line-height: 16px;
}

    .rain a:hover,
    .rain a:focus,
    .rain a:active {
        text-decoration: underline !important;
    }

/* SUNNY */
.sunny {
    animation: sunny 15s linear infinite;
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    height: 42px;
    width: 6px;
    margin: auto;
    margin-right: 50%;
}

    .sunny:before {
        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: 42px;
        width: 6px;
        opacity: 1;
        position: absolute;
        bottom: 0px;
        left: 0px;
        transform: rotate(90deg);
    }

    .sunny:after {
        background: #FFEE44;
        border-radius: 50%;
        box-shadow: rgba(255,255,0,0.2) 0 0 0 5px;
        content: '';
        height: 24px;
        width: 24px;
        position: absolute;
        left: -6px;
        top: 6px;
    }

@keyframes sunny {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* CLOUDY */
.cloudy {
    animation: cloudy 5s ease-in-out infinite;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: #FFFFFF 26px -4px 0 -2px, #FFFFFF 10px -10px, #FFFFFF 12px 3px, #FFFFFF 24px 4px 0 -3px, #FFFFFF 34px 1px 0 -1px;
    height: 20px;
    width: 20px;
    margin: auto;
    margin-right: 50%;
}

    .cloudy:after {
        animation: cloudy_shadow 5s ease-in-out infinite;
        background: #000000;
        border-radius: 50%;
        content: '';
        height: 4px;
        width: 48px;
        opacity: 0.2;
        position: absolute;
        left: 5px;
        bottom: -24px;
        transform: scale(1);
    }

@keyframes cloudy {
    50% {
        transform: translateY(-8px);
    }
}

@keyframes cloudy_shadow {
    50% {
        transform: translateY(8px) scale(.7);
        opacity: .05;
    }
}

/* RAINY */
.rainy {
    animation: rainy 5s ease-in-out infinite 1s;
    background: #CCCCCC;
    border-radius: 50%;
    box-shadow: #CCCCCC 26px -4px 0 -2px, #CCCCCC 10px -10px, #CCCCCC 12px 3px, #CCCCCC 24px 4px 0 -3px, #CCCCCC 34px 1px 0 -1px;
    display: block;
    height: 20px;
    width: 20px;
    margin: auto;
    margin-right: 50%;
}

    .rainy:after {
        animation: rainy_shadow 5s ease-in-out infinite 1s;
        background: #000000;
        border-radius: 50%;
        content: '';
        height: 6px;
        width: 48px;
        opacity: 0.2;
        position: absolute;
        left: 1px;
        bottom: -24px;
        transform: scale(1);
    }

    .rainy:before {
        animation: rainy_rain .7s infinite linear;
        content: '';
        background: #CCCCCC;
        border-radius: 50%;
        display: block;
        height: 3px;
        width: 1px;
        opacity: 0.3;
        transform: scale(.9);
    }

@keyframes rainy {
    50% {
        transform: translateY(-8px);
    }
}

@keyframes rainy_shadow {
    50% {
        transform: translateY(8px) scale(.7);
        opacity: 0.05;
    }
}

@keyframes rainy_rain {
    0% {
        box-shadow: rgba(0,0,0,0) 12px 12px, rgba(0,0,0,0) 16px 16px, #000 20px 30px, #000 22px 20px, #000 28px 40px, #000 32px 38px, #000 44px 18px, #000 36px 14px;
    }

    25% {
        box-shadow: #000 12px 18px, #000 16px 24px, #000 20px 36px, #000 22px 26px, rgba(0,0,0,0) 28px 48px, rgba(0,0,0,0) 32px 48px, #000 44px 28px, #000 36px 24px;
    }

    26% {
        box-shadow: #000 12px 18px, #000 16px 24px, #000 20px 36px, #000 22px 26px, rgba(0,0,0,0) 28px 16px, rgba(0,0,0,0) 32px 8px, #000 44px 28px, #000 36px 24px;
    }

    50% {
        box-shadow: #000 12px 28px, #000 16px 32px, rgba(0,0,0,0) 20px 40px, #000 22px 32px, #000 28px 24px, #000 32px 18px, #000 44px 38px, #000 36px 34px;
    }

    51% {
        box-shadow: #000 12px 28px, #000 16px 32px, rgba(0,0,0,0) 20px 18px, #000 22px 32px, #000 28px 24px, #000 32px 18px, #000 44px 38px, #000 36px 34px;
    }

    75% {
        box-shadow: #000 12px 38px, #000 16px 40px, #000 20px 24px, rgba(0,0,0,0) 22px 38px, #000 28px 32px, #000 32px 28px, rgba(0,0,0,0) 44px 48px, rgba(0,0,0,0) 36px 44px;
    }

    76% {
        box-shadow: #000 12px 38px, #000 16px 40px, #000 20px 24px, rgba(0,0,0,0) 22px 14px, #000 28px 32px, #000 32px 28px, rgba(0,0,0,0) 44px 10px, rgba(0,0,0,0) 36px 6px;
    }

    100% {
        box-shadow: rgba(0,0,0,0) 12px 48px, rgba(0,0,0,0) 16px 48px, #000 20px 30px, #000 22px 20px, #000 28px 40px, #000 32px 38px, #000 44px 18px, #000 36px 14px;
    }
}


/* RAINBOW */
.rainbow {
    animation: rainbow 5s ease-in-out infinite;
    border-radius: 68px 0 0 0;
    box-shadow: #FB323C -2px -2px 0 1px, #F99716 -4px -4px 0 3px, #FEE124 -6px -6px 0 5px, #AFDF2E -8px -8px 0 7px, #6AD7F8 -10px -10px 0 9px, #60B1F5 -12px -12px 0 11px, #A3459B -14px -14px 0 13px;
    height: 28px;
    width: 28px;
    margin: auto;
    margin-right: 50%;
    transform: rotate(40deg);
}

    .rainbow:after {
        animation: rainbow_shadow 5s ease-in-out infinite;
        background: #000000;
        border-radius: 50%;
        content: '';
        opacity: 0.2;
        height: 6px;
        width: 48px;
        position: absolute;
        bottom: -9px;
        left: 7px;
        transform: rotate(-40deg);
        transform-origin: 50% 50%;
    }

@keyframes rainbow {
    50% {
        transform: rotate(50deg);
    }
}

@keyframes rainbow_shadow {
    50% {
        transform: rotate(-50deg) translate(3px) scale(.7);
        opacity: 0.05;
    }
}

/* STARRY */
.starry {
    animation: starry_star 5s ease-in-out infinite;
    background: #fff;
    border-radius: 50%;
    box-shadow: #FFFFFF 26px 7px 0 -1px, rgba(255,255,255,0.1) -36px -19px 0 -1px, rgba(255,255,255,0.1) -51px -34px 0 -1px, #FFFFFF -52px -62px 0 -1px, #FFFFFF 14px -37px, rgba(255,255,255,0.1) 41px -19px, #FFFFFF 34px -50px, rgba(255,255,255,0.1) 14px -71px 0 -1px, #FFFFFF 64px -21px 0 -1px, rgba(255,255,255,0.1) 32px -85px 0 -1px, #FFFFFF 64px -90px, rgba(255,255,255,0.1) 60px -67px 0 -1px, #FFFFFF 34px -127px, rgba(255,255,255,0.1) -26px -103px 0 -1px;
    height: 4px;
    width: 4px;
    opacity: 1;
}

    .starry:after {
        animation: starry 5s ease-in-out infinite;
        border-radius: 50%;
        box-shadow: #FFFFFF -25px 0;
        content: '';
        height: 100px;
        width: 100px;
        position: absolute;
        top: -106px;
        transform: rotate(-5deg);
        transform-origin: 0 50%;
    }

@keyframes starry {
    50% {
        transform: rotate(10deg);
    }
}

@keyframes starry_star {
    50% {
        box-shadow: rgba(255,255,255,0.1) 26px 7px 0 -1px, #FFFFFF -36px -19px 0 -1px, #FFFFFF -51px -34px 0 -1px, rgba(255,255,255,0.1) -52px -62px 0 -1px, rgba(255,255,255,0.1) 14px -37px, #FFFFFF 41px -19px, rgba(255,255,255,0.1) 34px -50px, #FFFFFF 14px -71px 0 -1px, rgba(255,255,255,0.1) 64px -21px 0 -1px, #FFFFFF 32px -85px 0 -1px, rgba(255,255,255,0.1) 64px -90px, #FFFFFF 60px -67px 0 -1px, rgba(255,255,255,0.1) 34px -127px, #FFFFFF -26px -103px 0 -1px;
    }
}

/* STORMY */
.stormy {
    animation: stormy 5s ease-in-out infinite;
    background: #222222;
    border-radius: 50%;
    box-shadow: #222222 26px -4px 0 -2px, #222222 10px -10px, #222222 12px 3px, #222222 24px 4px 0 -3px, #222222 34px 1px 0 -1px;
    height: 20px;
    width: 20px;
    margin: auto;
    margin-right: 50%;
}

    .stormy:after {
        animation: stormy_shadow 5s ease-in-out infinite;
        background: #000;
        border-radius: 50%;
        content: '';
        height: 6px;
        width: 48px;
        opacity: 0.2;
        position: absolute;
        left: 2px;
        bottom: -24px;
        transform: scale(1);
    }

    .stormy:before {
        animation: stormy_thunder 2s steps(1, end) infinite;
        border-left: 0px solid transparent;
        border-right: 3px solid transparent;
        border-top: 17px solid yellow;
        box-shadow: yellow -3px -13px;
        content: '';
        display: block;
        height: 0;
        width: 0;
        position: absolute;
        left: 23px;
        top: 28px;
        transform: rotate(14deg);
        transform-origin: 50% -24px;
    }

@keyframes stormy {
    50% {
        transform: translateY(-8px);
    }
}

@keyframes stormy_shadow {
    50% {
        transform: translateY(8px) scale(.7);
        opacity: 0.05;
    }
}

@keyframes stormy_thunder {
    0% {
        transform: rotate(20deg);
        opacity: 1;
    }

    5% {
        transform: rotate(-34deg);
        opacity: 1;
    }

    10% {
        transform: rotate(0deg);
        opacity: 1;
    }

    15% {
        transform: rotate(-34deg);
        opacity: 0;
    }
}

/* SNOWY */
.snowy {
    animation: snowy 5s ease-in-out infinite 1s;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: #FFFFFF 26px -4px 0 -2px, #FFFFFF 10px -10px, #FFFFFF 12px 3px, #FFFFFF 24px 4px 0 -3px, #FFFFFF 34px 1px 0 -1px;
    display: block;
    height: 20px;
    width: 20px;
    margin: auto;
    margin-right: 50%;
}

    .snowy:after {
        animation: snowy_shadow 5s ease-in-out infinite 1s;
        background: #000000;
        border-radius: 50%;
        content: '';
        height: 6px;
        width: 48px;
        opacity: 0.2;
        position: absolute;
        left: 3px;
        bottom: -24px;
        transform: scale(1);
    }

    .snowy:before {
        animation: snowy_snow 2s infinite linear;
        content: '';
        border-radius: 50%;
        display: block;
        height: 3px;
        width: 3px;
        opacity: 0.8;
        transform: scale(.9);
    }

@keyframes snowy {
    50% {
        transform: translateY(-8px);
    }
}

@keyframes snowy_shadow {
    50% {
        transform: translateY(8px) scale(.7);
        opacity: 0.05;
    }
}

@keyframes snowy_snow {
    0% {
        box-shadow: rgba(238,238,238,0) 12px 12px, rgba(238,238,238,0) 16px 16px, #EEEEEE 20px 30px, #EEEEEE 22px 20px, #EEEEEE 28px 40px, #EEEEEE 32px 38px, #EEEEEE 44px 18px, #EEEEEE 36px 14px;
    }

    25% {
        box-shadow: #EEEEEE 12px 18px, #EEEEEE 16px 24px, #EEEEEE 20px 36px, #EEEEEE 22px 26px, rgba(238,238,238,0) 28px 48px, rgba(238,238,238,0) 32px 48px, #EEEEEE 44px 28px, #EEEEEE 36px 24px;
    }

    26% {
        box-shadow: #EEEEEE 12px 18px, #EEEEEE 16px 24px, #EEEEEE 20px 36px, #EEEEEE 22px 26px, rgba(238,238,238,0) 28px 16px, rgba(238,238,238,0) 32px 8px, #EEEEEE 44px 28px, #EEEEEE 36px 24px;
    }

    50% {
        box-shadow: #EEEEEE 12px 28px, #EEEEEE 16px 32px, rgba(238,238,238,0) 20px 40px, #EEEEEE 22px 32px, #EEEEEE 28px 24px, #EEEEEE 32px 18px, #EEEEEE 44px 38px, #EEEEEE 36px 34px;
    }

    51% {
        box-shadow: #EEEEEE 12px 28px, #EEEEEE 16px 32px, rgba(238,238,238,0) 20px 18px, #EEEEEE 22px 32px, #EEEEEE 28px 24px, #EEEEEE 32px 18px, #EEEEEE 44px 38px, #EEEEEE 36px 34px;
    }

    75% {
        box-shadow: #EEEEEE 12px 38px, #EEEEEE 16px 40px, #EEEEEE 20px 24px, rgba(238,238,238,0) 22px 38px, #EEEEEE 28px 32px, #EEEEEE 32px 28px, rgba(238,238,238,0) 44px 48px, rgba(238,238,238,0) 36px 44px;
    }

    76% {
        box-shadow: #EEEEEE 12px 38px, #EEEEEE 16px 40px, #EEEEEE 20px 24px, rgba(238,238,238,0) 22px 14px, #EEEEEE 28px 32px, #EEEEEE 32px 28px, rgba(238,238,238,0) 44px 10px, rgba(238,238,238,0) 36px 6px;
    }

    100% {
        box-shadow: rgba(238,238,238,0) 12px 48px, rgba(238,238,238,0) 16px 48px, #EEEEEE 20px 30px, #EEEEEE 22px 20px, #EEEEEE 28px 40px, #EEEEEE 32px 38px, #EEEEEE 44px 18px, #EEEEEE 36px 14px;
    }
}