.bounce {
    -moz-animation: bounce .85s ease infinite;
    -webkit-animation: bounce .85s ease infinite;
    animation: bounce .85s ease infinite
}

@keyframes bounce {
    0% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    55% {
        -moz-transform: translateX(6px);
        -ms-transform: translateX(6px);
        -webkit-transform: translateX(6px);
        transform: translateX(6px)
    }
    75% {
        -moz-transform: translateX(5px);
        -ms-transform: translateX(5px);
        -webkit-transform: translateX(5px);
        transform: translateX(5px)
    }
    80% {
        -moz-transform: translateX(4px);
        -ms-transform: translateX(4px);
        -webkit-transform: translateX(4px);
        transform: translateX(4px)
    }
    85% {
        -moz-transform: translateX(3px);
        -ms-transform: translateX(3px);
        -webkit-transform: translateX(3px);
        transform: translateX(3px)
    }
    90% {
        -moz-transform: translateX(2px);
        -ms-transform: translateX(2px);
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }
    95% {
        -moz-transform: translateX(1px);
        -ms-transform: translateX(1px);
        -webkit-transform: translateX(1px);
        transform: translateX(1px)
    }
    100% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.section-main-c .page-wrapper {
    overflow: hidden;
    margin: 0
}

#main_c_inner_container_top_image {
    text-align: center;
    padding: 130px 0 0;
    position: relative;
    z-index: 11
}

.main_c_bg_graphs {
    display: none
}

.hero h1.animation_start_text, .hero #slide-8 h1.animation_start_text {
    font-family: "Averta Light";
    font-size: 32px;
    line-height: 44px
}

.main_c_close_animation {
    position: absolute;
    right: 12%;
    top: 85px;
    z-index: 20;
    display: inline-block;
    color: #9baacb;
    border: 1px solid #9baacb;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-family: "OpenSans Light";
    font-size: 12px;
    padding: 3px 8px 2px;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -ms-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s
}

.hero h1.animation_start_text {
    opacity: 0
}

.hero #slide-8 h1.animation_start_text {
    opacity: 0
}

.hero #slide-1 .slide-main-image, .hero #slide-8 .slide-main-image {
    opacity: 0
}

#slide-1, .hero h1.animation_start_text, .hero #slide-1 .slide-main-image {
    opacity: 1
}

.hero #slide-1 h1, .hero #slide-8 h1 {
    position: relative;
    top: -10px
}

.section-main-s .hero-wrapper {
    background: url(/new_images/starwars/starwars_background.png) 100% no-repeat;
    background-position: center center
}

.section-main-s #main_c_inner_container_top_image #main_starwars_start_play_button {
    color: #ffc20f;
    background: #361919;
    background: rgba(54, 25, 25, 0);
    border: 1px solid;
    width: 210px;
    font-family: "Averta SemiBold";
    font-size: 125%;
    border-radius: 4px;
    padding: 10px 31px;
    display: inline-block;
    outline: none
}

.section-main-s .hero-wrapper {
    height: 860px
}

.section-main-s #main_c_inner_container_top_image {
    text-align: center;
    padding: 0;
    position: relative;
    z-index: 11
}

#play-again-button {
    opacity: 0
}

.animation_white_arrow {
    background: url(/new_images/main_page_animation_images/animation_arrow.png) no-repeat;
    width: 8px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 0 0 10px
}

#last_start_play_button {
    opacity: 0
}

#start_play_button, #last_start_play_button {
    color: #fff !important;
    background: rgba(0, 0, 0, .7);
    border-radius: 5px;
    padding: 13px 24px 14px !important;
    font-family: "Averta SemiBold" !important;
    font-size: 120% !important;
    border: none;
    outline: none;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    z-index: 5
}

#start_play_button {
    position: absolute;
    left: 41%;
    top: 335px
}

#last_start_play_button {
    position: absolute;
    left: 43%;
    top: 335px
}

#start_play_button:hover, #last_start_play_button:hover {
    background: rgba(0, 0, 0, .6)
}

#animation_block_with_button, #last_animation_block_with_button {
    position: relative;
    width: auto;
    z-index: 1;
    opacity: 1;
    display: block;
    padding: 49px 0
}

.hero-wrapper {
    height: 900px;
    overflow: hidden;
    background: -webkit-gradient(linear, left bottom, right top, color-stop(21%, #38285f), color-stop(139%, #367fca));
    background: -webkit-linear-gradient(45deg, #38285f 21%, #367fca 139%);
    background: linear-gradient(45deg, #38285f 21%, #367fca 139%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#38285f', endColorstr='#367fca', GradientType=1);
    padding: 113px 0 0;
    position: relative;
    left: 0;
    margin: 0;
    -webkit-background-size: cover;
    background-size: cover
}

.main_c_bg_graphs, #main_a_container.main_d_container .main_c_bg_graphs {
    background: url(/new_images/main_b_images/main_b_graphs.png) 100% no-repeat;
    background-size: 100%;
    height: 495px;
    width: 100%;
    position: absolute;
    bottom: 0
}

.hero-wrapper {
    height: 634px;
    overflow: hidden
}

.hero-wrapper {
    padding: 0;
    width: 100%;
    overflow: hidden
}

.hero-wrapper {
    /*height: 900px;*/
    height: 800px;
}

.hero {
    margin: 60px auto 0;
    width: 768px;
    position: relative
}

.hero h1 {
    font-family: "Averta Light", sans-serif;
    font-size: 22px;
    line-height: 30px;
    margin: 0;
    opacity: 0
}

.hero h2 {
    opacity: 0
}

#main_c_inner_container_top_image h2#front_text {
    font-family: "Averta SemiBold";
    font-size: 250%;
    color: #fff;
    width: 955px;
    margin: 0 auto;
    text-align: center;
    font-weight: 400;
    line-height: 40px;
    opacity: 1
}

#main_b_top_fold_image_title_second_line {
    font-family: "Averta";
    font-size: 85%;
    width: 810px;
    display: inline-block;
    line-height: 35px;
    margin: 10px 0 0
}

.hero h1 {
    font-size: 32px
}

.hero h2 {
    margin: 0;
    padding: 6px 0;
    font-size: 22px;
    font-family: Averta, sans-serif;
    font-weight: 300
}

.hero h2 {
    font-size: 24px
}

.hero {
    width: 1200px
}

.hero img {
    max-width: 100%
}

.hero .slide {
    width: 768px;
    color: #fff;
    text-align: center;
    margin: -50px 0 0;
    width: 1200px
}

.hero .slide-main-image {
    padding-top: 0;
    margin: 0 auto
}

.hero #slide-1 .slide-main-image, .hero #slide-8 .slide-main-image {
    position: relative
}

.hero #slide-1 .slide-1-cover {
    position: absolute;
    left: 28%;
    background: #fff;
    width: 140px;
    margin-top: 17px;
    height: 14px;
    left: 29.6%;
    width: 200px;
    margin-top: -2px;
    height: 18px;
    background: #fff
}

.hero #slide-2 .slide-main-image {
    margin-top: -110px
}

.hero #slide-3 .slide-main-image {
    margin-top: -20px
}

.hero #slide-4 .slide-main-image {
    position: relative;
    top: 70px
}

#slide-2 .slide-main-image img, #slide-4 .slide-main-image img {
    width: auto
}

.hero #slide-5, .hero #slide-6, .hero #slide-7 {
    position: relative;
    height: 500px;
    height: 700px
}

.hero #slide-5 h1, .hero #slide-6 h1, .hero #slide-7 h1 {
    width: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    margin: 0;
    padding: 0;
    text-align: left
}

.hero #slide-5 .slide-main-image {
    opacity: 0;
    padding-top: 0;
    width: 50%;
    position: absolute;
    left: 44%;
    top: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.hero #slide-6 .slide-main-image {
    width: 40%
}

.hero #slide-5 h1, .hero #slide-6 h1, .hero #slide-7 h1 {
    font-size: 26px
}

.hero #slide-5 h1, .hero #slide-6 h1, .hero #slide-7 h1 {
    font-size: 36px
}

.hero #slide-8 h1 {
    font-weight: 300
}

.hero #slide-8 h1 strong {
    font-weight: 400
}

.hero #jmx-icon {
    position: absolute;
    left: 30%;
    top: 60%
}

.hero #jmx-icon img {
    width: 50%;
    width: 100%
}

.hero .logos {
    position: relative;
    top: -8%;
    right: 8%;
    height: 100%;
    width: 100%
}

.hero .logo {
    position: absolute;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
    width: 70px;
    height: 70px;
    width: 150px;
    height: 150px
}

.hero #logo-1 {
    right: 20%;
    top: 38%;
    top: 34%
}

.hero #logo-2 {
    right: 21%;
    top: 14%;
    top: 13%
}

.hero #logo-3 {
    right: 11%;
    top: 21%
}

.hero #logo-4 {
    right: 8%;
    top: 57%;
    top: 38%
}

.hero #logo-5 {
    right: 12%;
    top: 54%;
    top: 53%
}

.hero #logo-6 {
    right: 20%;
    top: 61%
}

.hero #logo-7 {
    right: 29%;
    top: 53%
}

.hero #logo-8 {
    right: 33%;
    top: 37%
}

.hero #logo-9 {
    right: 30%;
    top: 22%
}

.hero .start-testing-button, .hero .start-testing-button2 {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    font-size: 120%;
    font-family: "Averta SemiBold", sans-serif;
    text-transform: uppercase;
    color: #fff;
    background: #dd4343;
    padding: 11px 24px 13px !important;
    border-radius: 6px;
    text-decoration: none;
    text-transform: capitalize;
    margin: 0;
    letter-spacing: 0;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    border-radius: 3px !important;
    display: inline
}

.button.get_started_button.start-testing-button2 {
    position: relative;
    top: -80px;
    z-index: 99999;
    opacity: 0
}

.hero #slide-2 .start-testing-button {
    opacity: 0
}

.hero .start-testing-button:hover {
    background: #ff4343
}

.hero .start-testing-button {
    margin: 0
}

div#animation_block_with_button {
    margin: 20px 0 0 5%
}

.hero .star_testing_button2_block {
    left: 31.5%
}

#top_animation_scale {
    position: absolute;
    display: inline-block;
    left: 35.9%;
    top: 760px
}

#star_testing_button2_block {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 610px;
    z-index: 99;
    width: 100%;
    text-align: center
}

.progressbar {
    width: 110px;
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 3px;
    border-bottom: 2px solid #605480;
    height: 0
}

.progressbar:before {
    content: '';
    width: 6px;
    height: 6px;
    display: inline-block;
    background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    left: 0;
    top: -2px
}

.point.first, .point.two, .point.three, .point.four {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: transparent;
    border-radius: 10px;
    position: absolute;
    border: 1px solid #fff;
    z-index: 1;
    margin: 0
}

.point.first {
    -webkit-box-shadow: 0 0 0 #fff;
    -moz-box-shadow: 0 0 0 #fff;
    box-shadow: 0 0 0 #fff;
    -webkit-transition: box-shadow .1s;
    -moz-transition: box-shadow .1s;
    -ms-transition: box-shadow .1s;
    -o-transition: box-shadow .1s;
    transition: box-shadow .1s
}

.point.two {
    left: 110px;
    -webkit-box-shadow: 0 0 0 #fff;
    -moz-box-shadow: 0 0 0 #fff;
    box-shadow: 0 0 0 #fff;
    -webkit-transition: box-shadow .1s;
    -moz-transition: box-shadow .1s;
    -ms-transition: box-shadow .1s;
    -o-transition: box-shadow .1s;
    transition: box-shadow .1s
}

.point.three {
    left: 220px;
    -webkit-box-shadow: 0 0 0 #fff;
    -moz-box-shadow: 0 0 0 #fff;
    box-shadow: 0 0 0 #fff;
    -webkit-transition: box-shadow .1s;
    -moz-transition: box-shadow .1s;
    -ms-transition: box-shadow .1s;
    -o-transition: box-shadow .1s;
    transition: box-shadow .1s
}

.point.four {
    left: 324px;
    -webkit-box-shadow: 0 0 0 #fff;
    -moz-box-shadow: 0 0 0 #fff;
    box-shadow: 0 0 0 #fff;
    -webkit-transition: box-shadow .1s;
    -moz-transition: box-shadow .1s;
    -ms-transition: box-shadow .1s;
    -o-transition: box-shadow .1s;
    transition: box-shadow .1s
}

.outer_progressbar, .outer_progressbar_two, .outer_progressbar_three {
    display: inline-block;
    height: 6px;
    background: linear-gradient(to right, #608be3 0%, #b75ec2 100%);
    width: 0;
    position: absolute;
    left: 10px;
    top: -2px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px
}

.progressbar.two {
    position: absolute;
    left: 113px
}

.progressbar.three {
    position: absolute;
    left: 223px
}

.steps {
    position: absolute;
    top: 20px
}

#run_at_scale {
    position: absolute;
    left: 17px;
    z-index: 99;
    width: 200px
}

#analyze {
    position: absolute;
    left: 200px;
    z-index: 99
}

.progressbar.three:after {
    content: '';
    width: 6px;
    height: 6px;
    display: inline-block;
    background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    right: 0;
    top: -2px
}

#automate {
    position: absolute;
    left: 300px
}

#build_progress, #run_at_scale, #analyze, #automate {
    font-size: 100%
}

#animation_block_with_button .start-testing-button, #last_animation_block_with_button .start-testing-button, #star_testing_button2_block .start-testing-button2 {
    font-size: 130%;
    font-family: "Averta SemiBold", sans-serif;
    background: linear-gradient(90deg, #cc1e2e 0%, #d42626 101%);
    cursor: pointer
}

#star_testing_button2_block .start-testing-button2:hover, #animation_block_with_button .start-testing-button:hover, #last_animation_block_with_button .start-testing-button:hover {
    font-size: 130%;
    font-family: "Averta SemiBold", sans-serif;
    background: linear-gradient(90deg, #dd1e2e 0%, #e42626 101%)
}

.hero h1.animation_start_text .animation_bold_text, .hero #slide-8 h1.animation_start_text .animation_bold_text {
    font-family: "Averta Semibold", sans-serif;
}

#slide-1 img, #slide-8 img {
    margin: 0;
    width: auto
}

#slide-1, #slide-8 {
    margin: 0;
    opacity: 0
}

#slide-2 h1, #slide-3 h1, #slide-5 h1 {
    width: 270px;
    font-family: "Averta Light";
    font-size: 22px;
    text-align: left;
    line-height: 32px
}

#slide-2 h1 {
    position: absolute;
    top: 240px;
    left: 12%
}

#slide-3 h1 {
    position: absolute;
    right: 7%;
    top: 255px;
    width: 330px
}

#slide-2 h1 .animation_light_text, #slide-3 h1 .animation_light_text, #slide-4 h1 .animation_light_text, #slide-5 h1 .animation_light_text, #slide-6 h1 .animation_light_text, #first_part_light_text, #second_part_light_text {
    font-family: "Averta Light";
    font-size: 28px
}

#slide-2 h1 .animation_bold_text, #slide-3 h1 .animation_bold_text, #slide-4 h1, #slide-5 h1 .animation_bold_text {
    font-family: "Averta";
    font-size: 32px
}

#slide-2 h1 .animation_bold_text {
    position: relative;
    top: -17px
}

.hero #slide-5 h1 {
    position: absolute;
    top: 90px;
    left: 12%;
    opacity: 0
}

#slide-3 h1 .animation_bold_text {
    position: absolute;
    top: -17px
}

#slide-2 h1 .animation_light_text, #slide-3 h1 .animation_light_text {
    position: absolute;
    top: -55px
}

div#overlay_image_blazemeter {
    background: url(/new_images/main_page_animation_images/slide-2_first_overlay_image.png) no-repeat;
    width: 510px;
    height: 347px;
    position: relative;
    left: 0;
    z-index: 1;
    right: 0
}

div#ovarlay_image_jmeter {
    background: url(/new_images/main_page_animation_images/slide-2_second_overlay_image.png) no-repeat;
    width: 510px;
    height: 347px;
    position: absolute;
    right: -40px;
    z-index: 0
}

.hero #slide-2 .slide-main-image {
    position: absolute;
    top: 230px;
    right: 0;
    opacity: 0;
    z-index: 3
}

div#overlay_image_separator {
    background: url(/new_images/main_page_animation_images/separator_overlay_images.png) no-repeat;
    width: 44px;
    height: 382px;
    position: absolute;
    top: -16px;
    right: -20px;
    z-index: 4
}

#slide-4 h1 {
    position: relative;
    top: 40px;
    font-family: "Averta SemiBold";
}

#slide-4 h2 {
    position: relative;
    top: 58px;
    line-height: 30px;
    font-size: 28px
}

#slide-5 h1 .animation_bold_text {
    position: absolute;
    top: -130px
}

#slide-5 #first_part_light_text {
    position: relative;
    top: -23px
}

#second_part_light_text {
    position: relative;
    top: -77px;
    left: 0;
    opacity: 0
}

@media screen and (max-width: 1680px) {
    .main_c_bg_graphs
    #main_a_container.main_d_container .main_c_bg_graphs {
        background-size: 100%
    }

    .main_c_bg_graphs, #main_a_container.main_d_container .main_c_bg_graphs {
        height: 430px
    }
}

@media screen and (max-width: 1600px) {
    .hero-wrapper {
        height: 750px
    }

    .main_c_bg_graphs, #main_a_container.main_d_container .main_c_bg_graphs {
        height: 410px
    }

    #main_c_inner_container_top_image {
        padding: 60px 0 0
    }

    #slide-1 img, #slide-8 img {
        width: 650px
    }

    #slide-2 .slide-main-image img, #slide-4 .slide-main-image img {
        width: 600px
    }

    #top_animation_scale {
        top: 670px
    }

    #star_testing_button2_block {
        top: 540px
    }

    .hero #slide-2 .slide-main-image {
        margin-top: -180px
    }

    #slide-2 h1 {
        top: 190px
    }

    #slide-3 h1 {
        top: 160px
    }

    #slide-4 h1 {
        top: 20px
    }

    #slide-4 h2 {
        top: 38px
    }

    .hero #slide-4 .slide-main-image {
        top: 50px
    }

    .hero #slide-5 h1 {
        top: 40px
    }

    #slide-5 h1 .animation_bold_text {
        top: -130px
    }

    .hero #slide-5 .slide-main-image {
        top: -50px
    }

    .hero .logos {
        top: -15%
    }
}

@media screen and (max-width: 1440px) {
    #main_c_inner_container_top_image {
        padding: 40px 0 0
    }

    .main_c_bg_graphs, #main_a_container.main_d_container .main_c_bg_graphs {
        height: 370px
    }
}

@media screen and (max-width: 1366px) {
    .main_c_bg_graphs, #main_a_container.main_d_container .main_c_bg_graphs {
        height: 350px
    }
}

@media screen and (max-width: 1280px) {
    .hero-wrapper {
        height: 730px
    }

    #star_testing_button2_block {
        top: 500px
    }

    #top_animation_scale {
        top: 630px
    }

    #main_c_inner_container_top_image {
        padding: 60px 0 0
    }

    .hero {
        margin: 130px auto 0
    }

    #slide-2 .slide-main-image img, #slide-4 .slide-main-image img {
        width: 520px
    }

    #slide-2 h1 {
        top: 160px
    }

    #slide-3 h1 {
        top: 130px
    }

    #slide-5 .slide-main-image img {
        width: 450px
    }

    .main_c_bg_graphs, #main_a_container.main_d_container .main_c_bg_graphs {
        height: 330px
    }
}

@media screen and (max-width: 1200px) {
    .hero {
        width: 100%
    }

    #slide-2 h1 {
        left: 10%
    }

    #top_animation_scale {
        left: 34%
    }

    #slide-3 h1 {
        right: 5%
    }

    .hero #slide-5 h1 {
        left: 10%
    }

    .main_c_close_animation {
        right: 3%
    }
}

@media screen and (max-width: 1100px) {
    .main_c_bg_graphs, #main_a_container.main_d_container .main_c_bg_graphs {
        height: 290px
    }
}

@media screen and (max-width: 1024px) {
    .main_c_close_animation {
        top: 75px
    }
}

@media screen and (max-width: 1020px) {
    #top_animation_scale {
        left: 32%
    }
}

@media screen and (max-width: 1000px) {
    #slide-5 .slide-main-image img {
        width: 400px
    }

    #top_animation_scale {
        left: 32%
    }

    #slide-2 .slide-main-image img, #slide-4 .slide-main-image img {
        width: 400px
    }

    .hero #slide-2 .slide-main-image {
        margin-top: -150px
    }

    .hero .logos {
        right: 6%
    }

    .hero #logo-4 {
        right: 5%
    }

    .hero #logo-5 {
        right: 10%
    }

    .hero #logo-7 {
        right: 31%
    }

    .hero #logo-8 {
        right: 36%
    }

    .hero #logo-9 {
        right: 32%
    }

    .hero #logo-3 {
        right: 10%
    }
}

@media screen and (max-width: 950px) {
    .main_c_bg_graphs, #main_a_container.main_d_container .main_c_bg_graphs {
        height: 250px
    }
}

@media screen and (max-width: 900px) {
    #top_animation_scale {
        left: 28%
    }

    .hero #slide-5 h1 {
        left: 5%
    }

    .hero #slide-5 .slide-main-image {
        left: 49%
    }
}

@media screen and (max-width: 850px) {
    .main_c_bg_graphs, #main_a_container.main_d_container .main_c_bg_graphs {
        height: 230px
    }
}

@media screen and (max-width: 800px) {
    .hero #logo-3 {
        right: 9%
    }

    .hero #logo-4 {
        right: 3%
    }

    .hero #logo-7 {
        right: 32%
    }

    .hero #logo-8 {
        right: 38%
    }

    .hero #logo-5 {
        right: 9%
    }
}

@media screen and (min-width: 1921px) {
    .main_c_bg_graphs, #main_a_container.main_d_container .main_c_bg_graphs {
        height: 667px
    }

    #main_c_inner_container_top_image {
        padding: 70px 0 0
    }
}

@media screen and (-moz-device-pixel-ratio) {
    .main_c_close_animation {
        padding: 3px 8px
    }
}

@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {
    .start-testing-button2.get_started_button.button, .start-testing-button2.get_started_button.button:hover {
        margin: 0;
        padding: 9px 20px 11px !important
    }

    #slide-5 #first_part_light_text {
        top: 77px !important
    }
}