/*

<script src="js/themes/kp-custom/kp-text-with-cut.js?v=1"></script>

<!-- kp_textWithCut(textBoxInitHeight, animaTime)  -->

<div class="kp_text_with_cut-main-box">
    <div class="kp_text_with_cut-text_and_shadow_box">
        <div class="kp_text_with_cut-text_box" id="js-kp_text_with_cut-text-box">
            = CONTENT =
        </div>
        <div class="kp_text_with_cut-shadow_box" id="js-kp_text_with_cut-shadow_box"></div>
    </div>

    <div class="kp_text_with_cut-show_all_text_btn_row">
        <span class="kp_text_with_cut-show_all_text_btn" id="js-kp_text_with_cut-show_all_text_btn">Read more</span>
    </div>
</div>
*/

.kp_text_with_cut-main-box {

}
    /*
        main text and lists setting - 
    */
    .kp_text_with_cut-text_and_shadow_box {
        position: relative;
    }
        .kp_text_with_cut-text_box {
            text-align: justify;
            overflow: hidden;
            position: relative;
            z-index: 2;
            border-radius: 0 0 10px 10px;
            padding: 5px 10px;
        }
        .kp_text_with_cut-text_box h1, 
        .kp_text_with_cut-text_box h2, 
        .kp_text_with_cut-text_box h3, 
        .kp_text_with_cut-text_box h4 {
            text-align: left;
        }
               
        .kp_text_with_cut-shadow_box {
            position:absolute;
            bottom: 0;
            width: 100%;
            height: 120px;
            z-index: 2;
            background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
            border-radius: 0 0 10px 10px;
        }

    .kp_text_with_cut-show_all_text_btn_row {
        text-align: center;
    }
        .kp_text_with_cut-show_all_text_btn {
            line-height: 1em;
            background-position-y: 3px;
            background-repeat: no-repeat;
            background-position-x: right;
            padding-right: 26px;
            display: inline-block;
            color: #9e9e9e;
            white-space: nowrap;
            font-size: 20px;
            font-weight: 100;
        }
        .kp_text_with_cut-show_all_text_btn:hover {
            cursor: pointer;
        }
        .kp_text_with_cut-show_all_text_btn.kp_text_with_cut-show_more_state {
            background-image: url("images/show-more-arrow.png");
        }
        .kp_text_with_cut-show_all_text_btn.kp_text_with_cut-show_less_state {
            background-image: url("images/show-less-arrow.png");
        }


/*
    text content settings
    can be overriten on page style
*/

.kp_text_with_cut-text_box h2,
.kp_text_with_cut-text_box h3,
.kp_text_with_cut-text_box h4 {
    color: #212121;
    margin-top: 30px;
    margin-bottom: 14px;
}
.kp_text_with_cut-text_box h2 {
    font-size: 22px;
}
.kp_text_with_cut-text_box h3 {
    font-size: 20px;
}
.kp_text_with_cut-text_box h3 {
    font-size: 18px;
}
.kp_text_with_cut-text_box ul {
    text-align: left;
    margin-bottom: 10px;
}
.kp_text_with_cut-text_box p {
    text-align: justify;
    margin-bottom: 10px;
}

.kp_text_with_cut-text_box ul li,
.kp_text_with_cut-text_box p {
    font-size: 16px;
    color: #757575;
    font-weight: 100;
}
.kp_text_with_cut-text_box ul li {
    background-image: url("images/list-bullit-1.png");
    background-repeat:  no-repeat;
    background-position: 0 2px;
    padding-left: 30px;
    display: block;
}

@media screen and (max-width: 1200px) {
    .kp_text_with_cut-main-box {
        display: inline-block;
        vertical-align: top;
        width: 92%;
        min-width: 319px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 490px) {
    .kp_text_with_cut-main-box {
        width: 90%;
        min-width: 0;
    }
    .kp_text_with_cut-text_box {
        text-align: left;
    }
}