.vision-mission {
    background: #000;
    padding: 3rem 0
}

@media (min-width:768px) {
    .vision-mission {
        padding: 7rem 0
    }
}

@media (min-width:992px) {
    .vision-mission {
        padding: 10rem 0
    }
}

@media (min-width:1199px) {
    .vision-mission {
        padding: 20rem 0
    }
}

@media (min-width:1599px) {
    .vision-mission {
        padding: 26rem 0
    }
}

.vision-mission .mission,
.vision-mission .vision {
    display: block;
    position: relative
}

@media (min-width:1199px) {
    .vision-mission .mission,
    .vision-mission .vision {
        align-items: center;
        display: flex
    }
}

.vision-mission .mission h2,
.vision-mission .vision h2 {
    font-size: 30px;
    line-height: 30px;
    margin-top: 2rem;
    text-transform: uppercase;
    z-index: 5
}

@media (min-width:768px) {
    .vision-mission .mission h2,
    .vision-mission .vision h2 {
        font-size: 60px;
        line-height: 60px
    }
}

@media (min-width:992px) {
    .vision-mission .mission h2,
    .vision-mission .vision h2 {
        font-size: 110px;
        line-height: 110px
    }
}

@media (min-width:1199px) {
    .vision-mission .mission h2,
    .vision-mission .vision h2 {
        font-size: 140px;
        line-height: 140px;
        margin-bottom: 0;
        margin-top: 0
    }
}

@media (min-width:1599px) {
    .vision-mission .mission h2,
    .vision-mission .vision h2 {
        font-size: 178px;
        line-height: 178px
    }
}

.vision-mission .mission p,
.vision-mission .vision p {
    color: #fff;
    margin-bottom: 0;
    transition: all .3s linear
}

@media (min-width:1199px) {
    .vision-mission .mission p,
    .vision-mission .vision p {
        color: #262626
    }
}

.vision-mission .mission:hover p,
.vision-mission .vision:hover p {
    color: #fff;
    transition: all .3s linear
}

.vision-mission .mission:hover:before,
.vision-mission .vision:hover:before {
    opacity: 1
}

.vision-mission .mission:before,
.vision-mission .vision:before {
    content: "";
    display: block;
    height: 255px;
    opacity: 1;
    position: relative;
    transition: all .3s linear;
    width: 100%;
    z-index: 1
}

@media (min-width:1199px) {
    .vision-mission .mission:before,
    .vision-mission .vision:before {
        height: 235px;
        opacity: 0;
        position: absolute;
        width: 315px
    }
}

@media (min-width:1599px) {
    .vision-mission .mission:before,
    .vision-mission .vision:before {
        height: 300px;
        width: 410px
    }
}

.vision-mission .vision {
    margin-bottom: 2rem
}

@media (min-width:1199px) {
    .vision-mission .vision {
        margin-bottom: 3rem
    }
}

.vision-mission .vision:before {
    background: url(../../assets/images/vision-mission.png) no-repeat transparent scroll;
    transform: rotate(0);
    transition: all .3s linear
}

@media (min-width:1199px) {
    .vision-mission .vision:before {
        left: 152px;
        top: -108%;
        transform: rotate(-11.4deg)
    }
}

@media (min-width:1599px) {
    .vision-mission .vision:before {
        left: 190px;
        top: -125%
    }
}

.vision-mission .vision h2 {
    margin-right: 0
}

@media (min-width:1199px) {
    .vision-mission .vision h2 {
        margin-right: 2rem
    }
}

@media (min-width:1599px) {
    .vision-mission .vision h2 {
        margin-right: 3rem
    }
}

.vision-mission .mission:before {
    background: url(../../assets/images/vision-mission.png) no-repeat transparent scroll;
    transform: rotate(0);
    transition: all .3s linear
}

@media (min-width:1199px) {
    .vision-mission .mission:before {
        bottom: -120%;
        right: 70px;
        transform: rotate(11.4deg)
    }
}

@media (min-width:1599px) {
    .vision-mission .mission:before {
        bottom: -123%
    }
}

.vision-mission .mission p {
    margin-right: 0
}

@media (min-width:1199px) {
    .vision-mission .mission p {
        margin-right: 2rem
    }
}

@media (min-width:1599px) {
    .vision-mission .mission p {
        margin-right: 3rem
    }
}