@keyframes grow {
    100%{
        transform: scale(1.2)
    }
}

div.sub-page-container{
    width: 100%;
    height: 100%;
    position: relative;
}
div.background{
    position: fixed;
    margin-top:4.2rem;
    z-index: -1;
    filter: brightness(50%);
    min-height: 625px;
    width: 100%;
}
.page-header{
    position: relative;
    text-align: center;
    padding-top: 4rem;
    color: #fff;
}
.page-header h1{
    margin-top: 8rem;
}
.three-column-layout .row{
}
.three-column-layout .col-lg{
    border: solid 5px transparent;
    border-top: solid 15px transparent;
    position: relative;
    padding: 5rem 2rem;
    color: #fff;
    text-align: center;
}
.three-column-layout .col-lg h2{
    margin-bottom: 2.5rem;
}
.three-column-layout .col-lg p{
    font-size: 1.3rem
}

.three-column-layout .img{
    color: #fff;
    text-align: center;
}

.main-text{
    padding: 5rem;
    font-size: 1.5rem;
    margin-top: 5rem;
    text-align: center;
    background:rgba(237,237,237,1);
}

.three-column-layout .row .col-first{
    background: #35e82f;
    color: #fff;
}
.three-column-layout .row .col-middle{
    background: #4cca05;
    color: #fff;
}
.three-column-layout .row .col-end{
    background: #31b31e;
    color: #fff;
}

.three-column-layout .row .col:hover{
    background: #333;
    color: #fff;
}
/*** TWO COLUMN LAYOUT**/
.two-column-layout .row{
    height: 400px;
    overflow: hidden;
}
.two-column-layout .col-lg{
    border: none;
    position: relative;
    padding: 5rem 2rem;
    color: #000;
    background: #fff;
}
.two-column-layout .col-lg h2{
    margin-bottom: 2.5rem;
}
.two-column-layout .col-lg p{
    font-size: 1.5rem;
    line-height: 2rem;
}

.two-column-layout .img{
    color: #fff;
    text-align: center;
    overflow: hidden;
    background: #4cca05;
}

.two-column-layout .img h2{
    margin-top: 75px;
}


.two-column-layout .conventional, .two-column-layout .lng, .two-column-layout .renewable{
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: cover;
    z-index: -1;
    filter: brightness(40%);
    top: 0;
    left: 0;
}
.two-column-layout .conventional{
    background:  url("css/images/site/two-column-layout-conventional.jpg") left no-repeat;
    filter: brightness(100%);
}
.two-column-layout .lng{
    background:  url("css/images/site/two-column-layout-lng.jpg") left no-repeat;
}
.two-column-layout .renewable{
    background:  url("css/images/site/two-column-layout-renewable.jpg") left no-repeat;
}
div.two-column-layout .img:hover > .image{
    animation: grow 3s infinite alternate steps(60);
}

.sub-page-text{
    padding: 5rem;
    font-size: 1.5rem;
    text-align: center;
    background: #fff;
}

.sub-page-text .img{
    background: #4cca05;
    color: #fff;
    padding: 4rem 3rem;
}
.sub-page-text .text{
    padding: 1rem 3rem .5rem 3rem;
    font-size: 1.3rem;
}

@media screen and (max-width: 992px) {
    div.background {
        margin-top: 4.2rem;
        height: 100%;
        width: 100%;
    }

    .page-header h1 {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }

    .main-text{
        padding: 4rem 2rem;
        font-size: 1.5rem;
        margin-top: 5rem;
        text-align: center;
    }

    .three-column-layout .row .col-first{
        background: rgba(53,232,47, 0.8);
        color: #000;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .three-column-layout .row .col-middle{
        background: rgba(255,255,255, 0.7);
        color: #000;
        margin-bottom: 1rem;
    }
    .three-column-layout .row .col-end{
        background: rgba(255,255,255, 0.6);
        color: #000;
        margin-bottom: 1rem;
    }

    .two-column-layout .row{
        height: auto;
        overflow: hidden;
    }
}