Polyclinic: Demo website custom styles

This post contains some useful custom CSS styles used on Polyclinic WordPress theme demo website.

This additional custom CSS is used in theme demo website (how to apply custom CSS?):

Rounded column

To apply this effect, just add a round-it class on page builder column and set the column paddings to your needs.

@media only screen and (min-width: 1200px) {
    .round-it .fl-col-content {
        background-color: rgba(250,252,254,.8);
        border-radius: 50%;
    }
}
@media only screen and (max-width: 1200px) {
    .fl-col-group .fl-col.round-it {
        margin-top: 2.62rem;
        margin-bottom: 2.62rem;
    }

    .round-it .fl-col-content {
        padding: 3.62rem 2.62rem;
    }
}

Ken Burns row background effect

To apply this effect, just add a ken-burns-effect class on page builder row. Alternatively use a paid version of Beaver Builder page builder plugin to add a Ken Burns slideshow as a row background.

@-webkit-keyframes kenburns {
    0% {
        -webkit-transform: scale(1.146);
        transform: scale(1.158);
    }

    15% {
        -webkit-transform: scale(1.146);
        transform: scale(1.158);
    }

    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}
@keyframes kenburns {
    0% {
        -webkit-transform: scale(1.146);
        transform: scale(1.158);
    }

    15% {
        -webkit-transform: scale(1.146);
        transform: scale(1.158);
    }

    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}
.ken-burns-effect .fl-row-content-wrap {
    overflow: hidden;
}
.ken-burns-effect .fl-row-content-wrap::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: inherit;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-origin: 60% 40%;
    transform-origin: 60% 40%;
    -webkit-animation: kenburns 8s ease-in-out;
    animation: kenburns 8s ease-in-out;
}
.ken-burns-effect .fl-col-group {
    position: relative;
}