.timeline-content {
    font-family: 'Roboto-Regular';
    font-size: 16px;
}

    .timeline-content p {
        margin-bottom: 0;
    }

    .timeline-content h2 {
        margin-bottom: 0;
        font-size: 76px;
    }

@media(min-width: 992px) {
    .about-images_container {
        width: 1170px;
    }

    .timeline-content {
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        -o-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    .about-images {
        -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        -o-transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
        -moz-perspective: 650px;
        -ms-perspective: 650px;
        -webkit-perspective: 650px;
        perspective: 650px;
    }

    .triangle-container {
        position: relative;
        float: left;
        position: absolute;
        width: 280px;
        left: 0;
        top: 0;
    }

    .triangle {
        width: 100%;
        padding-bottom: 100%;
        overflow: hidden;
        position: relative;
        top: 0;
        left: 0;
        -moz-transform: skewY(30deg);
        -ms-transform: skewY(30deg);
        -o-transform: skewY(30deg);
        -webkit-transform: skewY(30deg);
        transform: skewY(30deg);
        -moz-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
        -o-transform-origin: 0 50%;
        -webkit-transform-origin: 0 50%;
        transform-origin: 0 50%;
    }

        .triangle > div {
            width: 100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            -moz-transform: skewY(-30deg);
            -ms-transform: skewY(-30deg);
            -o-transform: skewY(-30deg);
            -webkit-transform: skewY(-30deg);
            transform: skewY(-30deg);
            -moz-transform-origin: 0 50%;
            -ms-transform-origin: 0 50%;
            -o-transform-origin: 0 50%;
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
        }

            .triangle > div > div {
                width: 100%;
                height: 100%;
                position: absolute;
                overflow: hidden;
                top: 0;
                left: 0;
                -moz-transform: skewY(-30deg);
                -ms-transform: skewY(-30deg);
                -o-transform: skewY(-30deg);
                -webkit-transform: skewY(-30deg);
                transform: skewY(-30deg);
                -moz-transform-origin: 0 50%;
                -ms-transform-origin: 0 50%;
                -o-transform-origin: 0 50%;
                -webkit-transform-origin: 0 50%;
                transform-origin: 0 50%;
            }

                .triangle > div > div > .fill {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    overflow: hidden;
                    top: 0;
                    left: 0;
                    -moz-transform: skewY(30deg) rotate(30deg) translateX(-25%);
                    -ms-transform: skewY(30deg) rotate(30deg) translateX(-25%);
                    -o-transform: skewY(30deg) rotate(30deg) translateX(-25%);
                    -webkit-transform: skewY(30deg) rotate(30deg) translateX(-25%);
                    transform: skewY(30deg) rotate(30deg) translateX(-25%);
                    -moz-transform-origin: 0 50%;
                    -ms-transform-origin: 0 50%;
                    -o-transform-origin: 0 50%;
                    -webkit-transform-origin: 0 50%;
                    transform-origin: 0 50%;
                }

                    .triangle > div > div > .fill img {
                        min-width: 100%;
                        min-height: 100%;
                    }

        .triangle.reverse, .triangle.reverse > div, .triangle.reverse > div > div {
            -moz-transform-origin: 100% 50%;
            -ms-transform-origin: 100% 50%;
            -o-transform-origin: 100% 50%;
            -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
        }

            .triangle.reverse > div > div > .fill {
                -moz-transform: skewY(30deg) rotate(30deg) translateX(25%);
                -ms-transform: skewY(30deg) rotate(30deg) translateX(25%);
                -o-transform: skewY(30deg) rotate(30deg) translateX(25%);
                -webkit-transform: skewY(30deg) rotate(30deg) translateX(25%);
                transform: skewY(30deg) rotate(30deg) translateX(25%);
                -moz-transform-origin: 100% 50%;
                -ms-transform-origin: 100% 50%;
                -o-transform-origin: 100% 50%;
                -webkit-transform-origin: 100% 50%;
                transform-origin: 100% 50%;
            }
}

@media(max-width: 1199px) and (min-width: 992px) {

    .about-images_container {
        left: 50%;
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        position: relative;
    }

    .about-images {
        -moz-transform: rotate(-30deg) scale(.8);
        -ms-transform: rotate(-30deg) scale(.8);
        -o-transform: rotate(-30deg) scale(.8);
        -webkit-transform: rotate(-30deg) scale(.8);
        transform: rotate(-30deg) scale(.8);
        margin-top: -120px;
    }
}



@media(max-width: 991px) {
    .timeline-content {
        margin: 0 !important;
        padding: 15px 0;
        font-size: 18px;
    }

        .timeline-content h2 {
            font-size: 40px;
        }
}


@media(max-width: 640px) {


    .timeline-content h2 {
        font-size: 34px;
    }
}


.yellow-bg {
    background-color: #ffd300;
}
/* 09. Animations */
@media(min-width: 767px) {
    .animate.swing {
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        -webkit-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        -webkit-transform: rotatex(-90deg) translateZ(0);
        -ms-transform: rotatex(-90deg) translateZ(0);
        -moz-transform: rotatex(-90deg) translateZ(0);
        -o-transform: rotatex(-90deg) translateZ(0);
        transform: rotatex(-90deg) translateZ(0);
        -webkit-transform-origin: 0 0 0;
        -ms-transform-origin: 0 0 0;
        -moz-transform-origin: 0 0 0;
        -o-transform-origin: 0 0 0;
        transform-origin: 0 0 0;
        opacity: 0;
    }

    .animate.active.swing {
        -webkit-transform: rotatex(0) translateZ(0);
        -ms-transform: rotatex(0) translateZ(0);
        -moz-transform: rotatex(0) translateZ(0);
        -o-transform: rotatex(0) translateZ(0);
        transform: rotatex(0) translateZ(0);
        opacity: 1;
    }

    .animate.expand {
        -moz-transition: .45s;
        -o-transition: .45s;
        -webkit-transition: .45s;
        transition: .45s;
        -webkit-transform: scale(.75) translateZ(0);
        -ms-transform: scale(.75) translateZ(0);
        -moz-transform: scale(.75) translateZ(0);
        -o-transform: scale(.75) translateZ(0);
        transform: scale(.75) translateZ(0);
        opacity: .25;
    }

        .animate.expand.active {
            -webkit-transform: scale(1) translateZ(0);
            -ms-transform: scale(1) translateZ(0);
            -moz-transform: scale(1) translateZ(0);
            -o-transform: scale(1) translateZ(0);
            transform: scale(1) translateZ(0);
            opacity: 1;
        }

    .delay1 {
        -moz-transition-delay: .15s;
        -o-transition-delay: .15s;
        -webkit-transition-delay: .15s;
        transition-delay: .15s;
    }

    .triangle-container.animate {
        -moz-transition: .7s ease-out .15s;
        -o-transition: .7s ease-out .15s;
        -webkit-transition: .7s ease-out .15s;
        transition: .7s ease-out .15s;
        -moz-transform: translateZ(140px);
        -ms-transform: translateZ(140px);
        -o-transform: translateZ(140px);
        -webkit-transform: translateZ(140px);
        transform: translateZ(140px);
        opacity: 0;
    }

    .triangle-container.active {
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -moz-transition: .7s ease-out .15s;
        -o-transition: .7s ease-out .15s;
        -webkit-transition: .7s ease-out .15s;
        transition: .7s ease-out .15s;
        opacity: 1;
    }

    .timeline-content.animate {
        -moz-transition: opacity .7s ease-out .25s;
        -o-transition: opacity .7s ease-out .25s;
        -webkit-transition: opacity .7s ease-out .25s;
        transition: opacity .7s ease-out .25s;
        opacity: 0;
    }

        .timeline-content.animate.active {
            opacity: 1;
        }
}




.divide0, .divide-xs-0 {
    width: 100%;
    display: block;
    height: 0;
}

.divide2, .divide-xs-2 {
    width: 100%;
    display: block;
    height: 2px;
}

.divide3, .divide-xs-3 {
    width: 100%;
    display: block;
    height: 3px;
}

.divide5, .divide-xs-5 {
    width: 100%;
    display: block;
    height: 5px;
}

.divide10, .divide-xs-10 {
    width: 100%;
    display: block;
    height: 10px;
}

.divide15, .divide-xs-15 {
    width: 100%;
    display: block;
    height: 15px;
}

.divide20, .divide-xs-20 {
    width: 100%;
    display: block;
    height: 20px;
}

.divide25, .divide-xs-25 {
    width: 100%;
    display: block;
    height: 25px;
}

.divide30, .divide-xs-30 {
    width: 100%;
    display: block;
    height: 30px;
}

.divide35, .divide-xs-35 {
    width: 100%;
    display: block;
    height: 35px;
}

.divide40, .divide-xs-40 {
    width: 100%;
    display: block;
    height: 40px;
}

.divide45, .divide-xs-45 {
    width: 100%;
    display: block;
    height: 40px;
}

.divide50, .divide-xs-50 {
    width: 100%;
    display: block;
    height: 50px;
}

.divide55, .divide-xs-55 {
    width: 100%;
    display: block;
    height: 55px;
}

.divide60, .divide-xs-60 {
    width: 100%;
    display: block;
    height: 60px;
}

.divide65, .divide-xs-65 {
    width: 100%;
    display: block;
    height: 65px;
}

.divide70, .divide-xs-70 {
    width: 100%;
    display: block;
    height: 70px;
}

.divide75, .divide-xs-75 {
    width: 100%;
    display: block;
    height: 75px;
}

.divide80, .divide-xs-80 {
    width: 100%;
    display: block;
    height: 80px;
}

.divide85, .divide-xs-85 {
    width: 100%;
    display: block;
    height: 85px;
}

@media(min-width:768px) {
    .divide-sm-0 {
        width: 100%;
        display: block;
        height: 0;
    }

    .divide-sm-2 {
        width: 100%;
        display: block;
        height: 2px;
    }

    .divide-sm-3 {
        width: 100%;
        display: block;
        height: 3px;
    }

    .divide-sm-5 {
        width: 100%;
        display: block;
        height: 5px;
    }

    .divide-sm-10 {
        width: 100%;
        display: block;
        height: 10px;
    }

    .divide-sm-15 {
        width: 100%;
        display: block;
        height: 15px;
    }

    .divide-sm-20 {
        width: 100%;
        display: block;
        height: 20px;
    }

    .divide-sm-25 {
        width: 100%;
        display: block;
        height: 25px;
    }

    .divide-sm-30 {
        width: 100%;
        display: block;
        height: 30px;
    }

    .divide-sm-35 {
        width: 100%;
        display: block;
        height: 35px;
    }

    .divide-sm-40 {
        width: 100%;
        display: block;
        height: 40px;
    }

    .divide-sm-45 {
        width: 100%;
        display: block;
        height: 40px;
    }

    .divide-sm-50 {
        width: 100%;
        display: block;
        height: 50px;
    }

    .divide-sm-55 {
        width: 100%;
        display: block;
        height: 55px;
    }

    .divide-sm-60 {
        width: 100%;
        display: block;
        height: 60px;
    }

    .divide-sm-65 {
        width: 100%;
        display: block;
        height: 65px;
    }

    .divide-sm-70 {
        width: 100%;
        display: block;
        height: 70px;
    }

    .divide-sm-75 {
        width: 100%;
        display: block;
        height: 75px;
    }

    .divide-sm-80 {
        width: 100%;
        display: block;
        height: 80px;
    }

    .divide-sm-85 {
        width: 100%;
        display: block;
        height: 85px;
    }
}

@media(min-width:992px) {
    .divide-md-0 {
        width: 100%;
        display: block;
        height: 0;
    }

    .divide-md-2 {
        width: 100%;
        display: block;
        height: 2px;
    }

    .divide-md-3 {
        width: 100%;
        display: block;
        height: 3px;
    }

    .divide-md-5 {
        width: 100%;
        display: block;
        height: 5px;
    }

    .divide-md-10 {
        width: 100%;
        display: block;
        height: 10px;
    }

    .divide-md-15 {
        width: 100%;
        display: block;
        height: 15px;
    }

    .divide-md-20 {
        width: 100%;
        display: block;
        height: 20px;
    }

    .divide-md-25 {
        width: 100%;
        display: block;
        height: 25px;
    }

    .divide-md-30 {
        width: 100%;
        display: block;
        height: 30px;
    }

    .divide-md-35 {
        width: 100%;
        display: block;
        height: 35px;
    }

    .divide-md-40 {
        width: 100%;
        display: block;
        height: 40px;
    }

    .divide-md-45 {
        width: 100%;
        display: block;
        height: 40px;
    }

    .divide-md-50 {
        width: 100%;
        display: block;
        height: 50px;
    }

    .divide-md-55 {
        width: 100%;
        display: block;
        height: 55px;
    }

    .divide-md-60 {
        width: 100%;
        display: block;
        height: 60px;
    }

    .divide-md-65 {
        width: 100%;
        display: block;
        height: 65px;
    }

    .divide-md-70 {
        width: 100%;
        display: block;
        height: 70px;
    }

    .divide-md-75 {
        width: 100%;
        display: block;
        height: 75px;
    }

    .divide-md-80 {
        width: 100%;
        display: block;
        height: 80px;
    }

    .divide-md-85 {
        width: 100%;
        display: block;
        height: 85px;
    }
    .story-of-american-family-sec > .container {
        max-width: 1540px;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
      }
      .story-of-american-family-top-content.row, .story-of-american-family-main-sec h4 {
  width: 1170px;
  margin: 0 auto;
}
.story-of-american-family-main-sec h4 {
    padding: 0px 15px;

}
      .story-of-american-family-sec .overflow-hidden {
        margin-left: 140px;
        margin-top: 100px;
      }
      .customer-review-sec .customer-review-content-col-left{
        text-align: center;

      }
}

@media(min-width:1200px) {
    .divide-lg-0 {
        width: 100%;
        display: block;
        height: 0;
    }

    .divide-lg-2 {
        width: 100%;
        display: block;
        height: 2px;
    }

    .divide-lg-3 {
        width: 100%;
        display: block;
        height: 3px;
    }

    .divide-lg-5 {
        width: 100%;
        display: block;
        height: 5px;
    }

    .divide-lg-10 {
        width: 100%;
        display: block;
        height: 10px;
    }

    .divide-lg-15 {
        width: 100%;
        display: block;
        height: 15px;
    }

    .divide-lg-20 {
        width: 100%;
        display: block;
        height: 20px;
    }

    .divide-lg-25 {
        width: 100%;
        display: block;
        height: 25px;
    }

    .divide-lg-30 {
        width: 100%;
        display: block;
        height: 30px;
    }

    .divide-lg-35 {
        width: 100%;
        display: block;
        height: 35px;
    }

    .divide-lg-40 {
        width: 100%;
        display: block;
        height: 40px;
    }

    .divide-lg-45 {
        width: 100%;
        display: block;
        height: 40px;
    }

    .divide-lg-50 {
        width: 100%;
        display: block;
        height: 50px;
    }

    .divide-lg-55 {
        width: 100%;
        display: block;
        height: 55px;
    }

    .divide-lg-60 {
        width: 100%;
        display: block;
        height: 60px;
    }

    .divide-lg-65 {
        width: 100%;
        display: block;
        height: 65px;
    }

    .divide-lg-70 {
        width: 100%;
        display: block;
        height: 70px;
    }

    .divide-lg-75 {
        width: 100%;
        display: block;
        height: 75px;
    }

    .divide-lg-80 {
        width: 100%;
        display: block;
        height: 80px;
    }

    .divide-lg-85 {
        width: 100%;
        display: block;
        height: 85px;
    }
}