Okay
  Print

Additional demo website custom styles

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;
}