/* Put your custom css here */
.clipped-image{
 width: 418px; height: 240px; overflow: hidden;    
}

.home_left{
    width:49%;
        font-size:2em;
            background-color: RGBA(0,0,0,0.3);
        position:absolute;
        rigth:50%;
        color:white;
        top:40%;
        margin:0;
        font-family: 'Roboto', Helvetica neue;
    margin:0;
    padding-top: 0.6em;
    padding-bottom: 0.8em;

}
.home_right{
    margin:0;
    padding-top: 0.6em;
    padding-bottom: 0.8em;
    
    position:absolute;
    width:49%;
    color:white;
   font-family: 'Roboto', Helvetica neue;
    top:40%;
    left:50%;
    font-size:2em;
            background-color: RGBA(0,0,0,0.3);
}
.home_left:hover
{
 //           background-color: RGBA(0,0,0,0.3);
        background-color: RGBA(0,166,243,0.8);

}
.home_right:hover{
    
   //     background-color: RGBA(0,0,0,0.3);
    background-color: RGBA(255,204,0,0.8);

}


.home_left {
    -webkit-animation: myfirst 1s; /* Chrome, Safari, Opera */
    animation: myfirst 1s;
}
.home_right {
    -webkit-animation: myfirst2 1s; /* Chrome, Safari, Opera */
    animation: myfirst2 1s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from {top: 0;}
    to {top: 40%;}
}

/* Standard syntax */
@keyframes myfirst {
    from {top: 0;}
    to {top: 40%;}
}
@-webkit-keyframes myfirst2 {
    from {top: 100%;}
    to {top: 40%;}
}

/* Standard syntax */
@keyframes myfirst2 {
    from {top: 100%;}
    to {top: 40%;}
}