body { background-color: #F7F7F7; }
* {
    -webkit-transition: all 1.2s ease;
    -moz-transition: all 1.2s ease;
    -o-transition: all 1.2s ease;
    transition: all 1.2s ease;
}

.row { padding: 0; margin: 0; margin: 0 auto; border-bottom:5px solid white; background-color: white; }
.city {
    height:140px;
    background-image:url('../files/city.png');
    background-position: top left;
    background-size: contain;
    opacity: 0.03;
    -webkit-transition: background-position 12.0s ease, opacity 4.0s ease;
    -moz-transition: background-position 12.0s ease, opacity 4.0s ease;
    -o-transition: background-position 12.0s ease, opacity 4.0s ease;
    transition: background-position 12.0s ease, opacity 4.0s ease;
}
.city:hover { opacity: 0.3; background-position: top right; }

.section-canvas {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 180%;
    outline: 0;
    height: 320px;
    padding:0;
    cursor: pointer;
}
.section-canvas:hover { background-size: 150%; }

.gradient-left, .gradient-right { height:100%; }
.gradient-left:hover, .gradient-right:hover { opacity:0; }
.gradient-left{
    background-image: -webkit-gradient( linear, left top, right top, from(rgba(255, 255, 255, 1.0)), to(rgba(255, 255, 255, 0)) );
    background-image: -moz-linear-gradient( left center, rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95% );
    filter: progid:DXImageTransform.Microsoft.gradient( gradientType=1, startColor=0, endColorStr=#FFFFFF );
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( gradientType=1, startColor=0, endColoStr=#FFFFFF );
    text-align: right;
}
.gradient-right{
    background-image: -webkit-gradient( linear, right top, left top, from(rgba(255, 255, 255, 1.0)), to(rgba(255, 255, 255, 0)) );
    background-image: -moz-linear-gradient( right center, rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95% );
    filter: progid:DXImageTransform.Microsoft.gradient ( gradientType=1, startColor=0, endColorStr=#FFFFFF );
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( gradientType=1, startColor=0, endColoStr=#FFFFFF );
    text-align: left;
}

.content-left, .content-right {
    position: absolute;
    z-index: 9999;
    font-size:26px;
    font-weight:bold;
    padding: 4px 12px;
    font-size: 32px;
    color: white;
    width: auto;
}

.content-left { top:20px; right:40px; text-align:right; }
.content-right { top:20px; left:40px; text-aling:left; }
.section-canvas:hover .content-left { width:90%; }
.section-canvas:hover .content-right { width:90%; }