*{
margin:0;
padding:0;
box-sizing:border-box;
transition: all .1s ease-in;
}

body{
background:#2f88b7;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
padding:40px;
}

.container{
width:1170px;
margin:0 auto;
}

h1{
color:white;
margin-bottom:20px;
text-align: left;
font-weight: normal;
font-size:21px;
}

.weather{
list-style:none;
border:2px solid #FFFFFF;
font-size:0;
background-color:#FFFFFF;
}

.weather li{
display:inline-block;
color:#FFFFFF;
font-size: 22px;
height:147px;
padding: 25px 20px;
border:2px solid #FFFFFF;
vertical-align:top;
opacity: 1;
text-align:center;
line-height:2;
}

.lisbon{width:50%; background:#3399cc;}
.paris{width:25%; background:#33cccc;}
.belgrade{width:25%; background:#996699;}
.venice{width:25%; background:#c24747;}
.telaviv{width:25%; background:#e2674a;}
.cair{width:25%; background:#ffcc66;}
.newyork{width:25%; background:#99cc99;}
.delhi{width:25%; background:#669999;}
.sanfran{width:50%; background:#cc6699;}
.tokyo{width:25%; background:#339966;}
.sydney{width:100%; background:#666699;}

.weather .wi{
font-size:42px;
margin-left:5px;
vertical-align: -8px;
}

h1 .wi{
font-size:27px;
margin-left: 8px;
}

.weather:hover li {
    opacity: 0.7;
}
.weather li:hover {
    opacity:1;
}

.footer {
margin-top: 30px;
color:#FFFFFF;
font-size:16px;
text-align: left;
}