﻿


.ownerPage .linkBtn {
    background: #E1636E;
    color: white;
    padding: 15px 20px;
    font-size: 15px;
    transition: all .3s;
    border-radius: 2px;
}

    .ownerPage .linkBtn:hover {
        background: #B72A37;
        transition: all .3s;
    }

.ownerPage h2 {
    text-align: left;
}

.ownerPage .whyElement {
    text-align: center;
    margin-bottom: 30px;
}

    .ownerPage .whyElement img {
        max-height: 125px;
    }    

.ownerPage .whyElement h3 {
    font-size: 20px;
    font-weight: 700;
    color: #5e5e5e;
    margin-top: 20px;
}

.extraSection {
    margin-top : 100px;
}

    .extraSection .umb-block-grid__area-container .umb-block-grid__area {
        margin-bottom: 50px;
    }



    .ownerPage .faqSeo {
        background-color: #F2F2F2;
        padding: 100px 0;
    }

.ownerPage .faqSeo .container {
    margin : 0 auto !important;
}


.howSection {
    background-color: #F2F2F2;
    padding: 100px 0 10px;
}



    .howSection .titleWithUnderline {
        position: relative;
    }
        .howSection .titleWithUnderline h3 {
            width: 100%;
            position: relative;
            margin-bottom: 25px;
            padding-bottom: 20px;
            font-size: 20px;
            font-weight: 700;
        }
            .howSection .titleWithUnderline h3:after {
                content: '';
                height: 2px;
                width: 100%;
                background: #9FCB39;
                position: absolute;
                bottom: 0;
                right: 0;
            }

.howItemContainer .number {
    right: inherit;
    left: -15px;
    position: absolute;
    bottom: 0;
    transform: translateY(50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    border-radius: 100px;
    background-color: #9FCB39;
    color: white;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    padding-right: 0px;
    z-index: 10;
}


.timeline {
    position: relative;
}

    .timeline:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0px;
        height: 100%;
        width: 1px;
        border-left: 2px dashed #9F9F9F;
    }

    .timeline .content h3, .timeline .content p {
        margin-left: 30px;
        width: calc(100% - 30px);
    }

    /* 
    
    RESPONSIVE 

*/
    @media screen and (min-width:550px) {
    }


@media screen and (min-width:768px) {
    .howSection .content p {
        width: 80%;
    }

    .timeline .content h3, .timeline .content p {
        margin-left: 0px;
    }

    .howSection .titleWithUnderline h3 {
        width: 100%;
        position: relative;
        margin-bottom: 25px;
        padding-bottom: 20px;
        font-size: 20px;
        font-weight: 600;
        width: 80%;
    }
    .howElementContainerParent:nth-child(even) {
        display: flex;
        flex-flow: row-reverse;
        margin-left: 30px;
    }

        .howElementContainerParent:nth-child(even) .howItemContainer {
            float: right;
            width: 50%;
        }

            .howElementContainerParent:nth-child(even) .howItemContainer h3, .howElementContainerParent:nth-child(even) .howItemContainer p {
                margin-left: auto;
            }

            .howElementContainerParent:nth-child(even) .howItemContainer .number {
                right: inherit;
                left: 29px;
                position: absolute;
                bottom: 0;
                transform: translateY(50%);
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50px;
                width: 50px;
                border-radius: 100px;
                background-color: #9FCB39;
                color: white;
                font-size: 32px;
                font-weight: 800;
                line-height: 1;
                padding-right: 2px;
                z-index: 10;
            }

                .howElementContainerParent:nth-child(even) .howItemContainer .number:after {
                    content: '';
                    width: 15px;
                    height: 15px;
                    background-color: #676767;
                    border-radius: 20px;
                    position: absolute;
                    top: 50%;
                    left: -50px;
                    transform: translateY(-50%);
                    z-index: 10;
                }

    .howElementContainerParent:nth-child(odd) {
        display: flex;
        margin-right: 30px;
    }

        .howElementContainerParent:nth-child(odd) .howItemContainer {
            width: 50%;
            float: left;
        }

            .howElementContainerParent:nth-child(odd) .howItemContainer .number {
                left: inherit;
                right: 26px;
                position: absolute;
                bottom: 0px;
                transform: translateY(50%);
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50px;
                width: 50px;
                border-radius: 100px;
                background-color: #9FCB39;
                color: white;
                font-size: 32px;
                font-weight: 800;
                line-height: 1;
                padding-right: 2px;
                z-index: 10;
            }


                .howElementContainerParent:nth-child(odd) .howItemContainer .number:after {
                    content: '';
                    width: 15px;
                    height: 15px;
                    background-color: #676767;
                    border-radius: 20px;
                    position: absolute;
                    top: 50%;
                    right: -50px;
                    transform: translateY(-50%);
                    z-index: 10;
                }

    .timeline:after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        height: 100%;
        width: 1px;
        border-left: 2px dashed #9F9F9F;
    }


}

@media screen and (min-width:1024px) {

    .ownerPage .linkBtn {
        margin: 30px auto 0;
    }
}

@media screen and (min-width:1200px) {

}
