.installer-card{
    width: 100%;
    height: 300px;
    display: flex;
    border-radius: .5rem;
    color: #606f7b;
    position: relative;
    box-shadow: 4px 4px 15px 0 rgba(36,37,38,.08);
    font-family: 'Lato', sans-serif;
}
.installer-card:hover{
    color: #fff;
}
.installer-card:after {
    border-radius: .5rem;
    content: "";
    display: block;
    height: 100%;
    width: 140px;
    -webkit-transition: width .4s;
    transition: width .4s;
    z-index: 0;
    position: absolute;
    
    background-color: #f19a1a;
    background-color: #386bd3;
    background-color: #d80010;
    background-color: #123A6D;
    background-color: #07c;
}
.installer-card:hover:after {
    width: 100%;
}
    .installer-card-left{
        padding-left: 15px;
        padding-right: 15px;
        /*margin-right: 1.5rem;*/
        border-radius: .5rem;
        display: flex;
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        flex-direction: column;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-pack: center;
        justify-content: space-around;
        z-index: 1;
    }
        .installer-card-skill-button{
            vertical-align: baseline;
            text-decoration: none;
            -webkit-transition: background-color .3s,border .3s;
            transition: background-color .3s,border .3s;
            background-color: hsla(0,0%,100%,.1);
            border-radius: 9999px;
            line-height: 1;
            padding: .2rem .5rem;
            text-align: center;
            color: #fff;
            font-size: .6rem;
            text-transform: uppercase;
            width: 100%;
            height: 27px;
        }
        /*.installer-card-skill-button:hover {
            background-color: #fff;
        }*/
            .installer-card-skill-button svg{
                max-height: 20px;
                max-width: 25px;
            }
        .installer-card-thumbnail{
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            margin: 1rem 0;
            width: 110px;
            height: 110px;
            background-image: none !important;
            text-decoration: none !important;
        }
            .installer-card-thumbnail .acronym{
                background-color: hsla(0,0%,100%,.25);
                border-radius: 4px;
                border-radius: 9999px;
                height: 64px;
                overflow: hidden;
                position: relative;
                width: 64px;
                margin: 0 auto;
                top: 32px;
            }
            .installer-card-thumbnail .acronym.one{
                background-color: #8fd195;
            }
            .installer-card-thumbnail .acronym.two{
                background-color: #dbc55e;
            }
            .installer-card-thumbnail .acronym.three{
                background-color: #7d8fcb;
            }
            .installer-card-thumbnail .acronym.four{
                background-color: #cf88a4;
            }
            .installer-card-thumbnail .acronym.five{
                background-color: #ffa871;
            }
            .installer-card-thumbnail .acronym.six{
                background-color: #37438e;
            }
            .installer-card-thumbnail .acronym.seven{
                background-color: #40a889;
            }
            .installer-card-thumbnail .acronym.eight{
                background-color: #be7ae7;
            }
                .installer-card-thumbnail .acronym .name{
                    font-size: 32px;
                    color: #fff;
                    line-height: 64px;
                    text-align: center;
                    text-transform: uppercase;
                    letter-spacing: -2px;
                }
        .installer-card-sectors{
            display: flex;
            -webkit-box-align: start;
            align-items: flex-start;
        }
            .card-sectors{
                margin-top: .3rem;
                margin-right: .5rem;
            }
                .card-sectors span{
                    display: block;
                    line-height: 1rem;
                    border-radius: .25rem;
                    width: .8rem;
                    height: .25rem;
                    background-color: rgba(255,255,255,.4);
                    margin-bottom: .75rem;
                }
                .card-sectors span:last-child{
                    margin-bottom: 0;
                }
                .card-sectors span.active{
                    background-color: #fff;
                }
            .card-sectors-text{
            
            }
                .card-sectors-text span{
                    display: block;
                    line-height: 1rem;
                    font-size: .75rem;
                    color: rgba(255,255,255,.4);
                    font-weight: 700;
                }
                .card-sectors-text span.active{
                    color: #fff;
                }
    .installer-card-right{
        display: flex;
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        flex-direction: column;
        padding: .75rem .75rem .75rem 1.5rem;
        z-index: 1;
        position: relative;
        width: 100%;
    }
        .installer-card-right h3{
            letter-spacing: 0;
            margin-bottom: 1rem;
            font-size: 1.2rem;
            line-height: 1.4rem;
            font-weight: bold;
        }
            .installer-card-right h3>a{
                color: #3d4852;
                color: #07c;
                -webkit-transition: background-color .3s,border .3s;
                transition: background-color .3s,border .3s;
            }
            .installer-card:hover .installer-card-right h3>a{
                color: #fff;
            }
        .installer-card-description{
            color: #606f7b;
            -webkit-box-flex: 1;
            flex: 1 1 0;
        }
        .installer-card:hover .installer-card-description{
            color: #fff;
        }
            .installer-card-description ul{
                list-style: disc;
                list-style-position: inside;
            }
                .installer-card-description ul li{
                    font-size: .75rem;
                    color: #606f7b;
                    opacity: .4;
                }
                .installer-card:hover .installer-card-description ul li{
                    color: #fff;
                }
                .installer-card-description ul li.active{
                    opacity: 1;
                    font-weight: 700;
                }
        .installer-card-meta{
            color: #8795a1;
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: end;
            justify-content: flex-end;
            font-size: .75rem;
            opacity: 1;
            -webkit-transition: opacity .1s;
            transition: opacity .1s;
            position: absolute;
            width: calc(100% - 2.25rem);
            bottom: .75rem;
        }
        .installer-card:hover .installer-card-meta{
            opacity: 0;
        }
            .installer-card-meta .meta-item{
                display: -webkit-box;
                display: flex;
                -webkit-box-align: start;
                align-items: flex-start;
                font-weight: 700;
                margin-left: 1rem;
                vertical-align: middle;
                line-height: 1;
                font-size: .8rem;
                color: #07c;
                color: #d80010;
            }
                .installer-card-meta .meta-item i{
                    margin-right: .5rem;
                }
        .installer-card-open-button{
            visibility: hidden;
            opacity: 0;
            -webkit-transition: opacity .4s;
            transition: opacity .4s;
            -webkit-transition-delay: .3s;
            transition-delay: .3s;
            background-color: hsla(0,0%,100%,.25);
            border-color: hsla(0,0%,100%,.25);
            border-radius: 9999px;
            border-width: 1px;
            display: -webkit-box;
            display: flex;
            -webkit-box-align: start;
            align-items: flex-start;
            -webkit-box-pack: center;
            justify-content: center;
            font-weight: 700;
            color: #fff;
            font-size: .875rem;
            height: 0;
            margin: 0;
            padding: 0;
            position: absolute;
            width: calc(100% - 3rem);
            bottom: .5rem;
        }
        .installer-card:hover .installer-card-open-button {
            visibility: visible;
            opacity: 1;
            height: auto;
            margin: initial;
            padding-top: .75rem;
            padding-bottom: .75rem;
            -webkit-transition: background .3s;
            transition: background .3s;
            text-decoration: none;
        }
        .installer-card:hover .installer-card-open-button:hover {
            background-color: #fff;
            color: #22292f;
        }

@media (max-width: 350px){
    .installer-card-right{
        padding: .75rem .25rem .75rem .5rem;
    }
    .installer-card-right h3{
        font-size: 1rem;
        line-height: 1.3rem;
    }
    .installer-card-description ul li{
        font-size: .65rem;
    }
    .installer-card-meta{
        width: calc(100% - 1rem);
        bottom: .5rem;
    }
    .installer-card-open-button {
        width: calc(100% - 1rem);
        font-size: .8rem;
    }
}