﻿.cta.cta-full {
    padding-top: 75px;
    padding-bottom: 75px;
}

.cta.cta-full {
    padding-top: 40px;
    padding-bottom: 40px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    height:300px;
}

.cta .cta-content
{
    width:600px;
}

    .cta .cta-content h1, .cta .cta-content h2, .cta .cta-content h3 {
        font-size: 28px;
    }

    .cta .cta-content p {
        font-size: 16px;
    }

        .cta .cta-content p.intro {
            font-size:19.5px;
        }

        .cta .cta-content .btn {
            margin:15px 0 45px 0;
        }


.cta .cta-img {
    height: 100%;
    width: 380px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    clip-path: polygon(calc(100% - 80px) 0,100% 0,100% 100.1%,0 100.1%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 2;
}

    .cta .cta-img:after {
        content: '';
        background: rgba(24, 45, 76, .8);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
    }

    .cta .cta-img:before {
        content: '';
        width: 52px;
        height: 65%;
        background: #00a886;
        position: absolute;
        top: 35%;
        left: -2px;
        display: block;
        -webkit-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        transform-origin: 0 100%;
        -webkit-transform: skew( -45deg ) translateY(100%);
        -ms-transform: skew(-45deg) translateY(100%);
        transform: skew( -45deg ) translateY(100%);
        -webkit-transition: -webkit-transform .4s ease-out;
        transition: -webkit-transform .4s ease-out;
        -o-transition: transform .4s ease-out;
        transition: transform .4s ease-out;
        transition: transform .4s ease-out,-webkit-transform .4s ease-out;
        -webkit-transform: skew( -45deg ) translateY(0);
        -ms-transform: skew(-45deg) translateY(0);
        transform: skew( -45deg ) translateY(0);
        z-index: 20;
    }



@media (min-width: 768px) and (max-width: 991px) {
    .cta .cta-content {
       width:400px;
    }
}


@media screen and (max-width: 767px) {
    .cta .cta-content {
        width:90%;
    }

    .cta .cta-img, .cta .cta-img:after, .cta .cta-img:before {
        display: none;
    }

}

