.btn-1a:before {
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 60px;
    line-height: 1.9;
    font-size: 2.2rem;
    display: inline-block;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    z-index: 2;
    -webkit-clip-path: polygon(0 0, 100% 0%, 36% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0%, 36% 100%, 0 100%);
    padding-right: 2rem;


}



/* ####################### INDIVIDUAL BUTTON BACKGROUND ###################################*/

/* ######### HOME  BUTTON ######### */

.btn-home {
    background-color: rgb(250, 165, 202);
}

.btn-home:hover {
    background-color: hsl(334, 79%, 78%);
}


/* ######### BAR  BUTTON ######### */

.btn-bar {
    background-color: hsl(1, 17%, 49%);
}

.btn-bar:hover {
    background-color: hsl(1, 22%, 49%);

}

/* ######### CHECK  BUTTON ######### */

.btn-check {
    background-color: hsl(355, 10%, 50%);
}

.btn-check:hover {
    background-color: hsl(355, 10%, 42%);

}

/* ######### CLOUD  BUTTON ######### */

.btn-cloud {
    background-color: hsl(300, 7%, 50%);
}

.btn-cloud:hover {
    background-color: hsl(300, 7%, 44%);

}


/* ######### DB  BUTTON ######### */

.btn-db {
    background-color: hsl(68, 13%, 65%);
}

.btn-db:hover {
    background-color: hsl(68, 13%, 57%);

}


/* ######### COG  BUTTON ######### */

.btn-cog {
    background-color: rgb(250, 165, 202);
}

.btn-cog:hover {
    background-color: hsl(342, 67%, 74%);

}


/* ######### DATE  BUTTON ######### */

.btn-date {
    background-color: hsl(4, 85%, 70%);
}

.btn-date:hover {
    background-color: hsl(4, 85%, 67%);

}

/* ######### MAIL  BUTTON ######### */

.btn-mail {
    background-color: hsl(267, 39%, 40%);
}

.btn-mail:hover {
    background-color: hsl(267, 39%, 35%);

}

/* ######### DESKTOP  BUTTON ######### */

.btn-desktop {
    background-color: hsl(207, 97%, 30%);
}

.btn-desktop:hover {
    background-color: hsl(207, 97%, 26%);

}

/* ######### EYE  BUTTON ######### */

.btn-eye {
    background-color: hsl(208, 43%, 70%);
}

.btn-eye:hover {
    background-color: hsl(208, 43%, 65%);

}


/* ######### INFO  BUTTON ######### */

.btn-info {
    background-color: hsl(155, 99%, 40%);
}

.btn-info:hover {
    background-color: hsl(155, 99%, 35%);

}

/* ######### HEART  BUTTON ######### */

.btn-heart {
    background-color: hsl(4, 85%, 70%);
}

.btn-heart:hover {
    background-color: hsl(4, 85%, 67%);

}

/* ######### GEARS  BUTTON ######### */

.btn-gears {
    background-color: hsl(156, 53%, 70%);
}

.btn-gears:hover {
    background-color: hsl(156, 53%, 65%);

}

/* ######### INBOX  BUTTON ######### */

.btn-inbox {
    background-color: hsl(194, 100%, 50%);
}

.btn-inbox:hover {
    background-color: hsl(194, 100%, 42%);

}



/* ######### HISTORY  BUTTON ######### */

.btn-history {
    background-color: hsl(314, 33%, 60%);
}

.btn-history:hover {
    background-color: hsl(314, 33%, 53%);

}



/* ######### LAPTOP  BUTTON ######### */

.btn-laptop {
    background-color: hsl(33, 93%, 60%);
}

.btn-laptop:hover {
    background-color: hsl(33, 93%, 54%);

}



/* ######### MUSIC  BUTTON ######### */

.btn-music {
    background-color: hsl(58, 60%, 45%);
}

.btn-music:hover {
    background-color: hsl(58, 60%, 39%);

}


/* ######### BED  BUTTON ######### */

.btn-bed {
    background-color: hsl(156, 53%, 75%);
}

.btn-bed:hover {
    background-color: hsl(156, 53%, 68%);

}


/* ######### CODE BUTTON ######### */

.btn-code {
    background-color: hsl(103, 15%, 75%);
}

.btn-code:hover {
    background-color: hsl(103, 15%, 68%);

}


/* ######### LOCK  BUTTON ######### */

.btn-lock {
    background-color: hsl(355, 14%, 40%);
}

.btn-lock:hover {
    background-color: hsl(355, 14%, 33%);

}



/* #########################  ROW 5 ########################################### */

/* ######### phone  BUTTON ######### */

.btn-phone {
    background-color: hsl(6, 20%, 60%);
}

.btn-phone:hover {
    background-color: hsl(6, 20%, 58%);

}

/* ######### pencil  BUTTON ######### */

.btn-pencil {
    background-color: hsl(231, 10%, 40%);
}

.btn-pencil:hover {
    background-color: hsl(231, 10%, 38%);

}


/* ######### navicon  BUTTON ######### */

.btn-navicon {
    background-color: hsl(103, 15%, 70%);
}

.btn-navicon:hover {
    background-color: hsl(103, 15%, 68%);

}


/* ######### reply  BUTTON ######### */

.btn-reply {
    background-color: hsl(355, 14%, 40%);
}

.btn-reply:hover {
    background-color: hsl(355, 14%, 33%);

}


/* ######### tag  BUTTON ######### */

.btn-tag {
    background-color: hsl(72, 59%, 70%);
}

.btn-tag:hover {
    background-color: hsl(72, 59%, 68%);

}



/* #########################  ROW 6 ########################################### */

/* ######### cart  BUTTON ######### */

.btn-cart {
    background-color: hsl(355, 78%, 75%);
}

.btn-cart:hover {
    background-color: hsl(355, 78%, 69%);

}

/* ######### tint  BUTTON ######### */

.btn-tint {
    background-color: hsl(41, 27%, 65%);
}

.btn-tint:hover {
    background-color: hsl(41, 27%, 60%);

}


/* ######### tablet  BUTTON ######### */

.btn-tablet {
    background-color: hsl(287, 73%, 50%);
}

.btn-tablet:hover {
    background-color: hsl(287, 73%, 44%);

}


/* ######### trash  BUTTON ######### */

.btn-trash {
    background-color: hsl(38, 80%, 68%);
}

.btn-trash:hover {
    background-color: hsl(38, 80%, 62%);

}


/* ######### tree  BUTTON ######### */

.btn-tree {
    background-color: hsl(72, 59%, 70%);
}

.btn-tree:hover {
    background-color: hsl(72, 59%, 68%);

}


/* #########################  ROW 7 ########################################### */

/* ######### card  BUTTON ######### */

.btn-card {
    background-color: hsl(20, 97%, 70%);
}

.btn-card:hover {
    background-color: hsl(20, 97%, 60%);

}

/* ######### server  BUTTON ######### */

.btn-server {
    background-color: hsl(32, 100%, 40%);
}

.btn-server:hover {
    background-color: hsl(32, 100%, 36%);

}


/* ######### bolt  BUTTON ######### */

.btn-bolt {
    background-color: hsl(185, 35%, 60%);
}

.btn-bolt:hover {
    background-color: hsl(185, 35%, 57%);

}


/* ######### bell  BUTTON ######### */

.btn-bell {
    background-color: hsl(20, 97%, 65%);
}

.btn-bell:hover {
    background-color: hsl(20, 97%, 60%);

}


/* ######### close  BUTTON ######### */

.btn-close {
    background-color: hsl(190, 3%, 50%);
}

.btn-close:hover {
    background-color: hsl(190, 3%, 42%);

}



/* #########################  ROW 8 ########################################### */

/* ######### eraser  BUTTON ######### */

.btn-eraser {
    background-color: hsl(58, 60%, 45%);
}

.btn-eraser:hover {
    background-color: hsl(58, 60%, 39%);

}

/* ######### excel  BUTTON ######### */

.btn-excel {
    background-color: hsl(172, 34%, 60%);
}

.btn-excel:hover {
    background-color: hsl(172, 34%, 52%);

}


/* ######### paypal  BUTTON ######### */

.btn-paypal {
    background-color: hsl(207, 97%, 30%);
}

.btn-paypal:hover {
    background-color: hsl(207, 97%, 26%);

}


/* ######### fire  BUTTON ######### */

.btn-fire {
    background-color: hsl(168, 76%, 40%);
}

.btn-fire:hover {
    background-color: hsl(168, 76%, 36%);

}


/* ######### flask  BUTTON ######### */

.btn-flask {
    background-color: hsl(260, 2%, 45%);
}

.btn-flask:hover {
    background-color: hsl(260, 2%, 38%);

}



/* ####################### individual button icons  ::BEFORE pseudo classes ######################### */

/* ######### HOME  BUTTON ######### */

.btn-home:before {

    content: "\f015";
}


/* ######### BAR  BUTTON ######### */

.btn-bar:before {

    content: "\f080";



}

/* ######### CHECK  BUTTON ######### */

.btn-check:before {

    content: "\f00c";



}

/* ######### CLOUD  BUTTON ######### */

.btn-cloud:before {

    content: "\f0c2";



}

/* ######### DB  BUTTON ######### */

.btn-db:before {

    content: "\f1c0";



}

/* ######### COG  BUTTON ######### */

.btn-cog:before {

    content: "\f013";



}

/* ######### DATE  BUTTON ######### */

.btn-date:before {

    content: "\f073";



}

/* ######### MAIL  BUTTON ######### */

.btn-mail:before {

    content: "\f0e0";



}


/* ######### DESKTOP  BUTTON ######### */

.btn-desktop:before {

    content: "\f108";



}

/* ######### EYE  BUTTON ######### */

.btn-eye:before {

    content: "\f06e";



}

/* ######### INFO  BUTTON ######### */

.btn-info:before {

    content: "\f129";



}

/* ######### HEART  BUTTON ######### */

.btn-heart:before {

    content: "\f004";



}

/* ######### GEARS  BUTTON ######### */

.btn-gears:before {

    content: "\f085";



}

/* ######### INBOX  BUTTON ######### */

.btn-inbox:before {

    content: "\f01c";



}

/* ######### HISTORY  BUTTON ######### */

.btn-history:before {

    content: "\f1da";



}



/* ######### LAPTOP  BUTTON ######### */

.btn-laptop:before {

    content: "\f109";



}

/* ######### music  BUTTON ######### */

.btn-music:before {

    content: "\f001";



}

/* ######### bed  BUTTON ######### */

.btn-bed:before {

    content: "\f236";



}

/* ######### code  BUTTON ######### */

.btn-code:before {

    content: "\f126";



}

/* ######### LOCK  BUTTON ######### */

.btn-lock:before {

    content: "\f023";



}





/* ############################### ROW 5################################### */

/* ######### phone  BUTTON ######### */

.btn-phone:before {

    content: "\f095";



}

/* ######### pencil  BUTTON ######### */

.btn-pencil:before {

    content: "\f14b";



}

/* ######### navicon  BUTTON ######### */

.btn-navicon:before {

    content: "\f0c9";



}

/* ######### reply  BUTTON ######### */

.btn-reply:before {

    content: "\f122";



}

/* ######### tag  BUTTON ######### */

.btn-tag:before {

    content: "\f02b";



}




/* ############################### ROW 6 ################################### */

/* ######### cart  BUTTON ######### */

.btn-cart:before {

    content: "\f07a";



}

/* ######### tint  BUTTON ######### */

.btn-tint:before {

    content: "\f043";



}

/* ######### tablet  BUTTON ######### */

.btn-tablet:before {

    content: "\f10a";



}

/* ######### trash  BUTTON ######### */

.btn-trash:before {

    content: "\f1f8";



}

/* ######### tree  BUTTON ######### */

.btn-tree:before {

    content: "\f1bb";



}



/* ############################### ROW 7 ################################### */

/* ######### card  BUTTON ######### */

.btn-card:before {

    content: "\f2bb";



}

/* ######### server  BUTTON ######### */

.btn-server:before {

    content: "\f233";



}

/* ######### bolt  BUTTON ######### */

.btn-bolt:before {

    content: "\f0e7";



}

/* ######### bell  BUTTON ######### */

.btn-bell:before {

    content: "\f1f6";



}

/* ######### close  BUTTON ######### */

.btn-close:before {

    content: "\f00d";



}






/* ############################### ROW 8 ################################### */

/* ######### eraser  BUTTON ######### */

.btn-eraser:before {

    content: "\f12d";



}

/* ######### excel  BUTTON ######### */

.btn-excel:before {

    content: "\f1c3";



}

/* ######### paypal  BUTTON ######### */

.btn-paypal:before {

    content: "\f1ed";



}

/* ######### fire  BUTTON ######### */

.btn-fire:before {

    content: "\f06d";



}

/* ######### flask  BUTTON ######### */

.btn-flask:before {

    content: "\f0c3";



}









/*############################### MEDIA QURIES FOR RESPONSIVE ################################*/

@media screen and (max-width:991px) {


    .btn-1a {
        font-size: 1.4rem !important;
        width: 100%;
    }

    .btn-1a:before {

        background: rgba(0, 0, 0, 0.2) !important;
        font-size: 2rem !important;
        color: #fff;
        z-index: 2;
        -webkit-clip-path: polygon(0 0, 100% 0%, 18% 100%, 0 100%) !importantt;
        clip-path: polygon(0 0, 100% 0%, 18% 100%, 0 100%) !important;

    }
}

@media screen and (max-width:767px) {


    .jumbotron h1 {
        font-size: 2.5rem !important
    }
    .jumbotron p {
        font-size: 1.2rem !important;
    }
    .btn-1a {
        margin: .5rem !important;
        width: 50% !important;
        position: relative !important;
        left: 0px;
    }

    .btn-1a:before {
        line-height: 5rem !important;
        background: rgba(0, 0, 0, 0.2) !important;
        font-size: 2rem !important;
        color: #fff;
        z-index: 2;
        -webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%, 0 100%) !important;
        clip-path: polygon(0 0, 100% 0%, 50% 100%, 0 100%) !important;

    }
}

@media screen and (max-width:480px) {

    /*    body{background: red !important;}*/
    .jumbotron h1 {
        font-size: 2.5rem !important;
    }
    .btn-1a {
        width: 50% !important;
    }

    .btn-1a:before {

        background: rgba(0, 0, 0, 0.2) !important;
        font-size: 1.5rem !important;


    }
}