.sol-header h2{
    margin-top: 2rem;
    text-align: center;
    font-size: 3.2rem;
    font-weight: 600;
    color: #c72424;
    text-decoration: underline;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1.2px;
}
.sol-sect-one{
    position: relative;
    height: 55vh;
    border-left: white;
    margin: 8% 6% 2%;
}


/*.sol-sect-one{*/
/*    width:100%*/
/*}*/
.sol-sect-one .header{
    /*width:100%;*/
    /*left:0;*/
    /*top:-60px;*/
    /*color:#265fff;*/

    /*transform:translate(0,650%);*/
    /*position:absolute;*/
    /*text-align:center;*/
    /*transition: transform 0.8s;*/
    width: 100%;
    left: 0;
    top: -60px;
    color: #c72424;
    transform: translate(0,720%);
    position: absolute;
    text-align: center;
    font-size: 3rem;

    font-family: sans-serif;
    transition: transform 0.8s;
    background: linear-gradient(45deg, #7ea0b3, transparent);
}
.sol-sect-one .card:hover .header{
    transform:translate(0,250%);
    color:#fff;
}
.sol-sect-one .sm-description{
    /*max-width:80%;*/
    /*text-align:center;*/
    /*display:block;*/
    /*color:#fcfcfc;*/
    /*position:absolute;*/
    /*top:65%;*/
    /*left:10%;*/
    /*transition: top 0.8s;*/
    max-width: 80%;
    text-align: center;
    display: block;
    color: #f5f5f5;
    position: absolute;
    top: 75%;
    font-size: 1.8rem;
    font-weight: 500;
    left: 10%;
    transition: top 0.8s;
    background: linear-gradient(45deg, #3e5a5d, transparent);
}

.sol-sect-one .card:hover .sm-description{
    top:-30%;
    color:#265fff;
}

.sol-sect-one .card {
    float:left;
    position:relative;
    width: 30%;
    height: 300px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin:10px;
    overflow:hidden;
}
.card--animate-hori{
    background-image: url('../images/sols/webservices.jpg');

}

.card--animate-hori .card__top {


 /*hover*/
    left:100%;
    transition: left 0.6s;

    width: 100%;
    height: 50%;
    transition: left 0.6s;
 /*left:0;*/
    top:0;
/*//*/
position: absolute;
    overflow: hidden;

}
.card--animate-hori .card__top::before {
    width: 100%;
    height: 200%;
/*//*/
content:"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum magni     deleniti quidem maiores fuga cum voluptas repudiandae, reiciendis facere corporis ad voluptatem harum omnis hic aliquid et dignissimos? Quae, possimus.";
    color:white;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    background-color:rgba(0,0,0,0.6);
    box-sizing: border-box;
}

.card--animate-hori .card__bottom {
/*//hover*/
left: -100%;
    transition: left 0.6s;


    width: 100%;
    height: 50%;
    transition: left 0.6s;
/*// left:0;*/
    bottom:0;
/*//*/
position: absolute;
    overflow: hidden;

}
.card--animate-hori .card__bottom::before {
    width: 100%;
    height: 200%;
    transform: translateY(-50%);
/*//*/
content:"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum magni deleniti quidem maiores fuga cum voluptas repudiandae, reiciendis facere corporis ad voluptatem harum omnis hic aliquid et dignissimos? Quae, possimus.";
    color:white;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    background-color:rgba(0,0,0,0.6);
    box-sizing: border-box;
}

.card--animate-hori:hover .card__top {

/*// normal*/
left:0;

/*// left:100%;*/
    transition: left 0.6s;
}
.card--animate-hori:hover .card__bottom {
/*// normal*/
left:0;
/*// left: -100%;*/
    transition: left 0.6s;
}




.card--animate-vert{
    background-image: url('../images/sols/it-service.jpg');
}


.card--animate-vert .card__top {
    width: 50%;
    height: 100%;
    left:0;
    top:-100%;
    transition: top 0.6s;

/*//*/
position: absolute;
    overflow: hidden;

}
.card--animate-vert .card__top::before {
    width: 200%;
    height: 100%;
/*//*/

content:"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum magni deleniti quidem maiores fuga cum voluptas repudiandae, reiciendis facere corporis ad voluptatem harum omnis hic aliquid et dignissimos? Quae, possimus.";
    color:white;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    background-color:rgba(0,0,0,0.6);
    box-sizing: border-box;
}

.card--animate-vert .card__bottom {
    width: 50%;
    height: 100%;
    right:0;
    top:100%;
    transition: top 0.6s;

/*//*/

position: absolute;
    overflow: hidden;

}
.card--animate-vert .card__bottom::before {
    width: 200%;
    height: 100%;
    transform: translateX(-50%);
/*//*/

content:"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum magni deleniti quidem maiores fuga cum voluptas repudiandae, reiciendis facere corporis ad voluptatem harum omnis hic aliquid et dignissimos? Quae, possimus.";
    color:white;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    background-color:rgba(0,0,0,0.6);
    box-sizing: border-box;
}

.card--animate-vert:hover .card__bottom{
    top: 0;
    transition: top 0.6s;
}
.card--animate-vert:hover .card__top {
    top:0;
    transition: top 0.6s;
}

.card--animate-diag{
    background-image: url('../images/sols/construction.jpg');
}

.card--animate-diag .card__top {
    width: 100%;
    height: 100%;
    transform: translate(-100%, -100%);
    left:0;
    top:0;

    /*clip-path: polygon(50% 0, 40% 21%, 62% 32%, 48% 48%, 66% 67%, 37% 81%, 50% 100%, 0 100%, 0 0);*/
/*// transform: translate(0%, 0%);*/
 clip-path: polygon(0% 0%,100% 100%, 0% 100%);
    transition: transform 0.9s;
/*//*/

position: absolute;
    overflow: hidden;

}
.card--animate-diag .card__top::before {
    width: 100%;
    height: 100%;
/*//*/

content:"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum magni deleniti quidem maiores fuga cum voluptas repudiandae, reiciendis facere corporis ad voluptatem harum omnis hic aliquid et dignissimos? Quae, possimus.";
    color:white;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    background-color:rgba(0,0,0,0.6);
    box-sizing: border-box;
}

.card--animate-diag .card__bottom {
    width: 100%;
    height: 100%;
    transform: translate(100%, 100%);
/*// right:0;*/
/*// top:0;*/
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
    /*clip-path: polygon(50% 0, 40% 21%, 62% 32%, 48% 48%, 66% 67%, 37% 81%, 50% 100%, 100% 100%, 100% 0);*/
/*// transform: translate(0%, 0%);*/
    transition: transform 1.0s;
/*//*/
position: absolute;
    overflow: hidden;

}
.card--animate-diag .card__bottom::before {
    width: 100%;
    height: 100%;
/*//*/

content:"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum magni deleniti quidem maiores fuga cum voluptas repudiandae, reiciendis facere corporis ad voluptatem harum omnis hic aliquid et dignissimos? Quae, possimus.";
    color:white;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    background-color:rgba(0,0,0,0.6);
    box-sizing: border-box;
}


.card--animate-diag:hover .card__top {
/*// left:0;*/
/*// top:0;*/
 clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
/*// clip-path: polygon(50% 0, 40% 21%, 62% 32%, 48% 48%, 66% 67%, 37% 81%, 50% 100%, 0 100%, 0 0);*/
    transform: translate(0%, 0%);
/*// transform: translate(-100%, -100%);*/
    transition: transform 0.9s;
}

.card--animate-diag:hover .card__bottom {
    right:0;
    top:0;
   clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
    /*clip-path: polygon(50% 0, 40% 21%, 62% 32%, 48% 48%, 66% 67%, 37% 81%, 50% 100%, 100% 100%, 100% 0);*/
    transform: translate(0%, 0%);
/*// transform: translate(100%, 100%);*/
    transition: transform 1.1s;
}