body {
    margin: 0;
    background-color: white;
}

.banner {
    width: 100%;
    height: 100%;
    max-height: 350px;
    margin-top: -4px;
}

.ci-main {
    width: 100%;
    max-width: 340px;
    height: auto;
    position: relative;
    margin-top: -355px;
}

.ci-rotate {
    text-align: center;
    width: 100%;
    max-width: 330px;
    height: auto;
    position: relative;
    margin-top: 50px;
}

.rotate {
    -webkit-animation: rotation 8s infinite linear;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

.red {
    color: red;
    font-weight: bold;
}

.com-info-section {
    width: 100%;
    height: auto;
    /*max-width: 1900px;*/
    text-align: center;
    margin: 0;
    margin-top: -10px;
}

.com-info-container {
    width: 100%;
    max-width: 1250px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
}

/* Clear floats after the columns */
.row-com-info:after {
    content: "";
    display: table;
    clear: both;
}

/* Create two equal columns that floats next to each other */
.column-cominfo-img {
    float: left;
    width: 40%;
    padding: 10px;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.column-cominfo-text {
    float: left;
    width: 60%;
    padding-top: 50px;
    text-align: left;
    color: black;
}

/************************************************/

.feaparts-section {
    background-color: #212121;
    width: 100%;
    height: auto;
    max-width: 1900px;
    text-align: center;
    margin: 0;
    margin-top: -10px;
}

.feaparts-container {
    width: 100%;
    max-width: 1000px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
}

/* Clear floats after the columns */
.row-feaparts:after {
    content: "";
    display: table;
    clear: both;
}

/* Create three equal columns that floats next to each other */
.column-feaparts {
    float: left;
    width: 20%;
    padding: 10px;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.feaparts-img {
    width: 100%;
    max-width: 200px;
    border-radius: 5px;
}

/************************************************/
.partners-section {
    width: 100%;
    /*max-width: 1900px;*/
    background-color: #212121;
    height: auto;
    padding-bottom: 40px;
}

.feat-web {
    color: white;
    font-size: 30px;
    font-weight: bold;
    padding-top: 20px;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.top-content {
    width: 100%;
    max-width: 1000px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 15px;
}

.carousel-control-prev {
    margin-left: -100px;
}

.carousel-control-next {
    margin-right: -100px;
}

.img-fluid {
    border-radius: 5px;
}

/*********************************************/
/* entire container, keeps perspective */
.flip-container {
    perspective: 1000px;
    cursor: pointer;
}

/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
    width: 100%;
    height: 100%;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front,
.back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

/**************************************************************/
.overlay-front {
    position: relative;
    width: 100%;
    cursor: pointer;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.6s ease;
}

.overlay-front:hover .overlay {
    height: 100%;
}

/******************************************************************/
.bg-vm {
    width: 100%;
    /*max-width: 1900px;*/
    height: 100%;
    max-height: 350px;
    margin-top: -4px;
}

.goal-section {
    width: 100%;
    height: auto;
    /*max-width: 1900px;*/
    text-align: center;
    margin: 0;
    margin-top: -10px;
}

.goal-container {
    width: 100%;
    max-width: 700px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Clear floats after the columns */
.row-goal:after {
    content: "";
    display: table;
    clear: both;
}

/* Create three equal columns that floats next to each other */
.column-goal {
    float: left;
    width: 50%;
    padding: 10px;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

/************************************************/
.vm-goal {
    width: 100%;
    max-width: 400px;
    padding-top: 10px;
}

/********************/
/* Wobble Bottom */
@-webkit-keyframes hvr-wobble-bottom {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

@keyframes hvr-wobble-bottom {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

.hvr-wobble-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.hvr-wobble-bottom:hover,
.hvr-wobble-bottom:focus,
.hvr-wobble-bottom:active {
    -webkit-animation-name: hvr-wobble-bottom;
    animation-name: hvr-wobble-bottom;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* -----------------------------------------------SMALL CAROUSEL-----------------------------------------------------*/
@media screen and (min-width: 576px) {
    .carousel-item {
        margin-right: 0;
    }

    /* show 2 items */
    .carousel-inner .active+.carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }

    /* left or forward direction */
    .active.carousel-item-left+.carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left+.carousel-item,
    .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* farthest right hidden item must be also positioned for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* right or prev direction */
    .active.carousel-item-right+.carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right+.carousel-item,
    .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
    }
}

/* MD */
@media screen and (min-width: 768px) {

    /* show 3rd of 3 item slide */
    .carousel-inner .active+.carousel-item+.carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }

    /* left or forward direction */
    .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* right or prev direction */
    .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
    }
}

/* LG */
@media screen and (min-width: 991px) {

    /* show 4th item */
    .carousel-inner .active+.carousel-item+.carousel-item+.carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item+.carousel-item {
        transition: none;
    }

    /* Show 5th slide on lg if col-lg-3 */
    .carousel-inner .active.col-lg-3.carousel-item+.carousel-item+.carousel-item+.carousel-item+.carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* left or forward direction */
    .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
    }
}

/* ----------------------------------------------------------------------------------------------------*/
.contact-section {
    width: 100%;
    /*max-width: 1910px;*/
    background-color: #212121;
    height: auto;
    border-radius: none;
    padding-bottom: 40px;
    border-bottom: 3px solid #5a5a5a;
}

.contact-container {
    width: 100%;
    max-width: 1000px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Clear floats after the columns */
.row-contact:after {
    content: "";
    display: table;
    clear: both;
}

/* Create three equal columns that floats next to each other */
.column-contact {
    float: left;
    width: 50%;
    height: 100%;
    padding: 10px;
    text-align: left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

/*************************************************/
.custom-serv-title {
    font-weight: bold;
    color: white;
    text-align: left;
}

.cs-parag {
    color: gray;
    text-align: left;
}

.cu-col {
    text-align: left;
    display: inline-block;
}

.img-cu {
    width: 100%;
    max-width: 50px;
    float: left;
}

.cu-details {
    font-size: 17px;
    color: gray;
    padding-left: 15px;
    float: left;
}

.img-contact {
    width: 100%;
    padding-top: 35px;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.join-us {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: red;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
    width: 100%;
    max-width: 150px;
    height: 50px;
    border-radius: 3px;
}