.btn:hover, .btn:focus{
    outline: none;
    color:#fff;
}
.btn{
    text-transform: capitalize;
    color:#fff;
    padding: 14px 20px;
}
.btn:hover{
    color:#fff;
}
.btn-sm{
    padding: 11px 16px;
    border-radius: 5px;
}
.btn-lg{
    font-size: 15px;
}
.button-left > i{
    margin-left: 7px;
}
.button-right > i{
    margin-right: 7px;
}
 
/*First Row*/
 
.blue,
.light-brown,
.light-green,
.light-orange{
    background: #0088cc;
    box-shadow:0 4px 0 #006394;
    transition:all 0.2s ease-in-out 0s;
    position: relative;
    top:0;
}
.blue:hover,
.light-brown:hover,
.light-green:hover,
.light-orange:hover{
    top:2px;
    box-shadow:0 2px 0 #006394;
}
.light-brown{
    background: #cec2ab;
    box-shadow: 0 4px 0 #b9a888;
}
.light-brown:hover{
    box-shadow: 0 2px 0 #b9a888;
}
.light-green{
    background: #75d69c;
    box-shadow:0 4px 0 #4ac97d;
    border-radius: 25px;
}
.light-green:hover{
    box-shadow:0 2px 0 #4ac97d;
}
.light-orange{
    background: #f79468;
    box-shadow: 0 4px 0 #f46e33;
}
.light-orange:hover{
    box-shadow: 0 2px 0 #f46e33;
}
 
/*Second Row*/
 
.green,
.light-blue,
.yellow,
.purple{
    background: #6ab165;
    box-shadow: 0 5px 0 #4f934b;
    position: relative;
    top:0;
    transition:all 0.2s ease-in-out 0s;
}
.green:hover,
.light-blue:hover,
.yellow:hover,
.purple:hover{
    top:3px;
    box-shadow: 0 2px 0 #4f934b;
}
.light-blue{
    background: #4cadc9;
    box-shadow: 0 5px 0 #338faa;
}
.light-blue:hover{
    box-shadow: 0 2px 0 #338faa;
}
.yellow{
    background: #f7be68;
    box-shadow: 0 5px 0 #f4a733;
    border-radius: 25px;
}
.yellow:hover{
    box-shadow: 0 2px 0 #f4a733;
}
.purple{
    background: #b97ebb;
    box-shadow: 0 5px 0 #a559a8;
}
.purple:hover{
    box-shadow: 0 2px 0 #a559a8;
}
 
/*Third Row*/
 
.light-red,
.black,
.red,
.light-black{
    background: #ff675b;
    box-shadow: 0 5px 0 #ff3323;
    position: relative;
    top:0;
    transition:all 0.2s ease-in-out 0s;
}
.light-red:hover,
.black:hover,
.red:hover,
.light-black:hover{
    box-shadow: 0 2px 0 #ff3323;
    top:3px;
}
.black{
    background: #50485b;
    box-shadow: 0 5px 0 #342f3c;
}
.black:hover{
    box-shadow: 0 2px 0 #342f3c;
}
.red{
    background: #f4524d;
    box-shadow: 0 5px 0 #f11f18;
    border-radius: 25px;
}
.red:hover{
    box-shadow: 0 2px 0 #f11f18;
}
.light-black{
    background: #555;
    box-shadow: 0 5px 0 #393939;
}
.light-black:hover{
    box-shadow: 0 2px 0 #393939;
}
@media only screen and (max-width: 767px) {
    .btn{
        margin-bottom: 15px;
    }
}