#now,
.weather-forecast {
    margin-bottom: 70px;
}

#now {
    display: flex;
    vertical-align: top;
    align-items: start;
}

#now .advertisement {
    width: 25%;
}

.weather-now {
    width: 75%;
    margin-bottom: 30px;
}

.weather-forecast:last-child {
    margin-bottom: 0;
}

.weather-now-info {
    display: flex;
    align-items: center;
    justify-content: center;
}

.weather-now-icon,
.weather-now-temp,
.weather-now-data {
    padding: 0;
}

.weather-now-icon {
    width: 27.5%;
}

.weather-now-icon img {
    display: inline-block;
    width: 80%;
    height: auto;
}

.weather-now-temp {
    width: 40%;
    padding: 0 20px;
    font-size: 600%;
    line-height: 100%;
    font-weight: bold;
}

.weather-now-data {
    width: 32.5%;
}

.weather-now-data ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.weather-now-data li {
    margin-bottom: 4px;
}

.weather-forecast-info {
    background: white;
    display: flex;
    margin: 30px 0;
    border: 1px solid rgba(0, 0, 0, .25);
    box-shadow: 0 0 25px rgba(0, 0, 0, .1);
}

.weather-forecast-col {
    width: 12.5%;
    font-size: 92.5%;
    border-right: 1px solid rgba(0, 0, 0, .05);
}

.weather-forecast-col:last-child {
    border-right: none;
}

.weather-forecast-col-cold-00,
.weather-forecast-col-cold-03 {
    background-color: rgba(0, 0, 0, .3)
}

.weather-forecast-col-cold-06,
.weather-forecast-col-cold-21 {
    background-color: rgba(0, 191, 255, .2)
}

.weather-forecast-col-cold,
.weather-forecast-col-cold-09,
.weather-forecast-col-cold-18 {
    background-color: rgba(0, 191, 255, .1)
}

.weather-forecast-col-cold-12,
.weather-forecast-col-cold-15 {
    background-color: rgba(0, 191, 255, .025)
}


.weather-forecast-col-hot-00,
.weather-forecast-col-hot-03 {
    background-color: rgba(255, 191, 0, .3)
}

.weather-forecast-col-hot-06,
.weather-forecast-col-hot-21 {
    background-color: rgba(255, 191, 0, .2)
}

.weather-forecast-col-hot,
.weather-forecast-col-hot-09,
.weather-forecast-col-hot-18 {
    background-color: rgba(255, 191, 0, .1)
}

.weather-forecast-col-hot-12,
.weather-forecast-col-hot-15 {
    background-color: rgba(255, 191, 0, .025)
}

.weather-forecast-time,
.weather-forecast-temp,
.weather-forecast-data {
    padding: 10px;
    margin: 0;
}

.weather-forecast-time,
.weather-forecast-temp {
    display: block;
    text-align: center;
}

.weather-forecast-col img {
    display: block;
    width: auto;
    height: 5em;
    margin: 0 auto;
}

.weather-forecast-temp {;
    font-size: 150%;
    font-weight: bold;
}

.weather-forecast-data {
    overflow-x: hidden;
    font-size: 87.5%;
}

.weather-forecast-description {
    font-size: 120%;
}

.weather-forecast-time-month-full {
    display: inline;
}

.weather-forecast-time-month-short {
    display: none;
}

.wind-direction::before {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px -1px 3px;
    background-image: url('/images/icons/wind_arrow.svg');
    background-size: 100% 100%;
    content: '';
}

.wind-direction-n::before {transform: rotate(180deg)}
.wind-direction-nne::before {transform: rotate(202.5deg)}
.wind-direction-ne::before {transform: rotate(225deg)}
.wind-direction-ene::before {transform: rotate(247.5deg)}
.wind-direction-e::before {transform: rotate(270deg)}
.wind-direction-ese::before {transform: rotate(292.5deg)}
.wind-direction-se::before {transform: rotate(315deg)}
.wind-direction-sse::before {transform: rotate(337.5deg)}
.wind-direction-s::before {transform: rotate(0deg)}
.wind-direction-ssw::before {transform: rotate(22.5deg)}
.wind-direction-sw::before {transform: rotate(45deg)}
.wind-direction-wsw::before {transform: rotate(67.5deg)}
.wind-direction-w::before {transform: rotate(90deg)}
.wind-direction-wnw::before {transform: rotate(112.5deg)}
.wind-direction-nw::before {transform: rotate(135deg)}
.wind-direction-nnw::before {transform: rotate(157.5deg)}

@media screen and (min-width: 480px) {
    .weather-forecast-description {
        height: 3.6em;
    }
}

@media screen and (max-width: 480px) {
    #now {
        display: block;
    }

    .weather-now-info {
        display: block;
    }

    .weather-now-icon {
    }

    .weather-now-icon img {
        width: auto;
        display: inline-block;
    }

    .weather-now-icon,
    .weather-now-temp,
    .weather-now-data {
        display: block;
        width: 100%;
    }

    .weather-now-temp {
        font-size: 400%;
        margin-bottom: 30px;
        padding: 0;
    }

    .weather-forecast-info {
        display: block;
        font-size: 95%;
    }

    .weather-forecast-col {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, .05);
    }

    .weather-forecast-col:last-child {
        border-bottom: none;
    }

    .weather-forecast-time {
        text-align: left;
        width: 20%;
    }

    .weather-forecast-col img {
        width: 20%;
        height: auto;
        margin: 0;
    }

    .weather-forecast-temp {
        width: 20%;
    }

    .weather-forecast-data {
        width: 40%;
    }

    .weather-forecast-time-month-full {
        display: none;
    }

    .weather-forecast-time-month-short {
        display: inline;
    }
}