/*********************** Opening ************************/
.opening {
    margin-top: 170px;
}

@keyframes scrollDown {
    0% {
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
        opacity: 0;
    }
  
    75% {
        -webkit-transform:translate(0, 45px);
        transform:translate(0, 45px);
        opacity: 1;
    }
  
    100% {
        -webkit-transform: translate(0, 45px);
        transform: translate(0, 45px);
        opacity: 0;
    }
}

.home_scroll {
    display: flex;
    justify-content: center;
    width: 80%;
	margin: 100px auto 80px;
}

.home_arrow {
    display: flex !important;
    justify-content: center;
    width: 100%;
	-webkit-transform: translate(0, 0px);
	transform: translate(0, 0px);
	font-size: 34px;
	-webkit-animation: scrollDown 1.6s infinite;
	animation: scrollDown 1.6s infinite;
	color: var(--dark-blue);
}

#intro,
#methods {
    position: absolute;
    margin-top: -130px;
}

@media (max-width: 1400px) {
    .home_scroll {
        margin: 20px auto 80px;
    }
}

@media (max-width: 1150px) {
    .opening {
        margin-top: 60px;
    }
}

@media (max-width: 750px) {
    .home_scroll {
        margin: 50px auto 100px;
    }
}

/*********************** Introduction ************************/
.introduction h1,
.banner h1,
.testimonial_wrapper h1 {
    text-align: center;
}

@media (min-width: 800px) {
    .intro_heading {
        margin: 0 auto;
    }
}

.intro_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 45px;
}

.checklist,
.intro_content .image {
    width: 45%;
}

.intro_content .image img {
    width: 100%;
}

.check {
    display: flex;
    align-items: flex-start;
    margin-bottom: 35px;
}

.check:last-of-type {
    margin-bottom: 0;
}

.check p {
    width: calc(100% - 71px);
    margin-top: -3px;
}

.check i {
    background-color: var(--yellow);
    color: var(--dark-blue);
    width: 46px;
    height: 46px;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 25px;
}

@media (max-width: 950px) {
    .intro_content .checklist {
        margin-bottom: 35px;
    }
}

@media (max-width: 750px) {
    .intro_content .checklist,
    .intro_content .image {
        width: 100% !important;
    }
}

/*********************** Banner ************************/
.banner {
    width: 100%;
    background-color: var(--light-blue);
    padding: 60px 0;
    /* margin: 100px 0; */
}

.banner h1 {
    color: var(--white);
    margin-top: -10px;
}

.feature_wrapper,
.feature_logo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.feature_wrapper {
    margin: 100px auto -100px auto;
}

.feature_logo {
    margin: 5px;
    max-width: 230px;
    margin-top: -140px;
    justify-content: center;
    transition: all .3s;
}

.feature_logo img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.7;
    max-width: 100%;
}

@media (max-width: 750px) {
    .feature_logo {
        max-width: 45%;
    }
}

@media (max-width: 570px) {
    .feature_wrapper {
        margin: 30px auto -60px auto;
    }

    .feature_logo {
        margin-top: -60px;
    }
}

/*********************** Testimonials ************************/
.testimonials {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.testimonial {
    width: 30%;
    background: #FFFFFF;
    box-shadow: 0px 5px 10px #00000014;
    border-radius: 10px;
    padding: 35px;
    box-sizing: border-box;
    margin-bottom: 45px;
}

.testimonial h4 {
    display: flex;
    justify-content: end;
    margin-bottom: 0;
}

.testimonial_wrapper .button {
    margin: 0 auto;
}

@media (max-width: 900px) {
    .testimonials,
    .intro_content {
        flex-direction: column;
    }

    .testimonial,
    .checklist,
    .intro_content .image {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .testimonial_wrapper .button {
        width: 100%;
    }
}

/*********************** Text Blocks ************************/
.text_block {
    margin: 60px auto 0;
}

.text_block h3 {
    color: var(--light-blue);
}

.text_block a {
    color: var(--yellow);
    font-weight: 700;
}