#today_container{
 position: relative;
		height: 12vh;
		border-radius: 10px 10px 0 0;
		background-image: url("../img/1.jpg");
        background-size: 100% 100%;
		 padding:0 30px;
		-webkit-box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2);
		box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2);
	
	}
    .weather-gradient {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(49, 89, 253, 0.9);
        border-radius: 10px 10px 0 0;
        opacity: 0.8;
        z-index: 0;
      }
      .date-container {
        position: relative;
        z-index: 2;
        color: #fff;  width: 100%; display: flex; justify-content: space-between;
        height: 100%;
     z-index: 10;
      }
      .date_info{ padding: 10px; color: #fff; font-size: 14px; margin-top: 10px;}
      .date_info p{margin-left: 5px;}
      .date_info h3{background: url(../img/datebg.png); background-size: 100% 100%; font-size: 28px; width: 50px; height: 57px; text-align: center; line-height: 57px; margin-bottom: 4px; color: #fff;}
#today_container div img {
    margin: 0 40px 0 20px; width: 60px;
    float: left;
}
 .main_info{
    font-size: 14px;
    margin-bottom: 10px;
}
 .main_info p{
   color: #fff !important ; padding: 5px 0;
}
 .main_info span:first-child{
    margin-left: 0;
}
 .more_info {
    margin-top: 3px; display: flex; align-items: center;
    font-size: 13px; color: #fff !important ;
}
 .more_info span{
    margin: 0 15px 0 0; color: #fff !important ;
}
#future_container{
    margin: 80px auto 0 auto;
    width: 950px;
    text-align: center;
    overflow: hidden;
}
#future_container div{
    float: left;
    width: 150px;
    padding: 20px 0;
    margin: 0 20px;
    background: rgba(100, 100, 100, 0.3);
}
#future_container div:hover{
    background: rgba(200,200,200,0.5);
}
#future_container div span{
    display: block;
}
footer{
    position: absolute;
    bottom: 0;
    width: 100%;
}
footer div{
    width: 175px;
    margin: 0 auto;
}