#hero {
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.homeimage{
   
    background-size:cover;
    background-repeat:no-repeat;
    background-position: left;
}

.carousel-fade {
    transition-duration: .3s;
    transition-property: opacity
}

.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right,
.carousel-item.active {
    opacity: 1
}

.active.carousel-item-left,
.active.carousel-item-right {
    opacity: 0
}

.active.carousel-item-left,
.active.carousel-item-prev,
.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
    transform: translateX(0)
}

#hero .carousel-item{

    width: 100%;
    height: calc(100vh - 15vh);
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    background-attachment: relative;
  
}

#hero .carousel-item-1 {
    max-width: 100%;
    height: calc(100vh -15vh);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    background-attachment: relative;

}

#hero .carousel-item-2 {
    max-width: 100%;
    height: calc(100vh - 15vh);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    background-attachment: relative;
    background-image: url(../img/sliderimages/InternetCenter-Background.jpg)
}

#hero .carousel-item-3 {
    max-width: 100%;
    height: calc(100vh - 15vh);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    background-attachment: relative;
    background-image: url(../img/sliderimages/CloudSolution-Background.jpg)
}

#hero .carousel-item-4 {
    max-width: 100%;
    height: calc(100vh - 15vh);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    background-attachment: relative;
    background-image: url(../img/sliderimages/EnterpriseTelephony-Background.jpg)
}

#hero .carousel-item-5 {
    max-width: 100%;
    height: calc(100vh - 15vh);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    background-attachment: relative;
    background-image: url(../img/sliderimages/DataCenter-Background.jpg)
}


#hero .carousel-item-6 {
    max-width: 100%;
    height: calc(100vh - 15vh);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    background-attachment: relative;
    background-image: url(../img/sliderimages/Web-Background.jpg)
}

#hero .carousel-container {
    display: flex;
    height: 100vh !important;
    justify-content: center;
    align-items: center;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden
}

#hero .carousel-content {
    text-align: center;
  
}

#hero .carousel-content img {
    width: 30%;
    float:left;
}

#hero .btn-get-started {
    font-family: "open sans";
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    transition: .9s;
    line-height: 1;
    margin: 10px;
    color: #fff;
    -webkit-animation-delay: .2s;
    animation-delay: 1.7s;
    border: 0;
    background: #fff;
    color: #c60808
}

#hero .btn-get-started:hover {
    background: #d1d1d1;
    box-shadow: 0 2px 4px 0 rgba(255, 52, 52, .616)
}

#hero h2 {
    color: #fff;
    margin-bottom: 30px;
    font-size: 48px;
    font-weight: 900;
    font-family: 'Open Sans', sans-serif
}

#hero h3 {
    color: #fff;
    font-size: 34px;
    font-weight: 900;
    -webkit-animation-delay: .9s;
    animation-delay: .9s;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    padding: 0 80px
}

#hero h4 {
    color: #fff;
    font-size: 48px;
    font-weight: 900;
    -webkit-animation-delay: .9s;
    animation-delay: .9s;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    padding: 0 80px;
    /* text-shadow: 1px 1px 1px #dcdcdc, 1px 1px 1px #919191, 1px 1px 1px #919191, 1px 4px 4px rgba(16, 16, 16, .1), 1px 6px 6px rgba(16, 16, 16, .1), 1px 6px 6px rgba(16, 16, 16, .1), 1px 6px 6px rgba(16, 16, 16, .1) */
}

#hero p {
    width: 100%;
    text-align: center;
    -webkit-animation-delay: .9s;
    animation-delay: .9s;
    font-weight: 500;
    color: #fff;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    padding: 0 30px;
    text-align: center;
    /* text-shadow: 1px 1px 1px #dcdcdc, 1px 1px 1px #919191, 1px 1px 1px #919191, 1px 4px 6px rgba(16, 16, 16, .041), 1px 8px 6px rgba(16, 16, 16, .041), 1px 8px 6px rgba(16, 16, 16, .041), 1px 8px 6px rgba(16, 16, 16, .041), */
}

#hero .carousel-control-next,
#hero .carousel-control-prev {
    width: 10%
}

#hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon {
    background: 0 0;
    font-size: 35px;
    line-height: 1;
    width: auto;
    height: auto
}



@media screen and (min-width: 620px) and (max-width:992px) {
  
    #hero .carousel-container {
        display: flex;
        height: 70vh !important;
        justify-content: center;
        align-items: center;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden
    }
 
    #hero .carousel-item {
        height:60vh;
        width:100%;

    }

   
    #hero .carousel-content img {
        width: 40%;
        float:left;
    }

    #hero .carousel-control-next,
#hero .carousel-control-prev {
    width: 10%;
    height:50vh;
}

    #hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon {
    background: 0 0;
    font-size: 35px;
    line-height: 1;
    width: auto;
    height: auto;
}


    #hero h2 {
        font-size: 26px;
        font-family: 'Open Sans', sans-serif
    }

    #hero h3 {
        font-size: 26px;
        font-family: 'Open Sans', sans-serif;
        text-align: center
    }

    #hero h4 {
        color: #fff;
        font-size: 26px;
        font-weight: 700;
        -webkit-animation-delay: .9s;
        animation-delay: .9s;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
        padding: 0 80px;
        text-shadow: 1px 1px 1px #dcdcdc, 1px 1px 1px #919191, 1px 1px 1px #919191, 1px 4px 4px rgba(16, 16, 16, .1), 1px 6px 6px rgba(16, 16, 16, .1), 1px 6px 6px rgba(16, 16, 16, .1), 1px 6px 6px rgba(16, 16, 16, .1)
    }

    #hero p {
        font-size: 18px;
        font-family: 'Open Sans', sans-serif;
        text-align: center
    }

    #hero .btn-get-started {
        font-family: "open sans";
        font-weight: 700;
        font-size: 12px;
        display: inline-block;
        padding: 10px 10px;
        border-radius: 50px;
        transition: .9s;
        margin: 10px;
        color: #fff;
        -webkit-animation-delay: .2s;
        animation-delay: 1.7s;
        border: 0;
        background: #fff;
        color: #c60808
    }
}

@media screen and (min-width: 0px) and (max-width:620px) {
    #hero .carousel-container {
        display: flex;
        height: 90vh !important;
        justify-content: center;
        align-items: center;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden
    }

    #hero .carousel-item-mobile {
        max-width: 100%;
        height: calc(100vh -10vh);
        background-size: cover;
        background-position: left;
        background-repeat: no-repeat;
        overflow: hidden;
        background-attachment: relative;
        background-image: url(../img/sliderimages/DataCenter.jpg)
    }



    #hero .carousel-content img {
        width: 60%;
        margin:auto;
        float:none ;
    }

    
    #hero .carousel-control-next,
#hero .carousel-control-prev {
    width: 10%;
    height:90vh;
}

    #hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon {
    background: 0 0;
    font-size: 35px;
    line-height: 1;
    width: auto;
    height: auto;
}

    #hero h2 {
        font-size: 26px;
        font-family: 'Open Sans', sans-serif
    }

    #hero h3 {
        font-size: 26px;
        font-family: 'Open Sans', sans-serif;
        text-align: center
    }

    #hero h4 {
        color: #fff;
        font-size: 26px;
        font-weight: 700;
        -webkit-animation-delay: .9s;
        animation-delay: .9s;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
        padding: 0 80px;
        text-shadow: 1px 1px 1px #dcdcdc, 1px 1px 1px #919191, 1px 1px 1px #919191, 1px 4px 4px rgba(16, 16, 16, .1), 1px 6px 6px rgba(16, 16, 16, .1), 1px 6px 6px rgba(16, 16, 16, .1), 1px 6px 6px rgba(16, 16, 16, .1)
    }

    #hero p {
        font-size: 18px;
        font-family: 'Open Sans', sans-serif;
        text-align: center
    }

    #hero .btn-get-started {
        font-family: "open sans";
        font-weight: 700;
        font-size: 12px;
        display: inline-block;
        padding: 10px 10px;
        border-radius: 50px;
        transition: .9s;
        margin: 10px;
        color: #fff;
        -webkit-animation-delay: .2s;
        animation-delay: 1.7s;
        border: 0;
        background: #fff;
        color: #c60808
    }
}

@media (orientation: landscape ) 
{



}

@media  (max-device-width: 640px)and (max-device-height: 360px) { 

    #hero .carousel-item{
        max-width: 100%;
        height: calc(100vh - 10vh);
        margin-top:3%;
        background-repeat: no-repeat;
        overflow: hidden;
        background-attachment: relative;
    }
    #hero .carousel-container {
        display: flex;
        height: 100vh !important;
        justify-content: center;
        align-items: center;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden
    }

    #hero .carousel-content{
        margin-top:3%;
    }

    #hero .carousel-control-next,
    #hero .carousel-control-prev {
        width: 10%;
        height:100vh;
    }

        #hero .carousel-control-next-icon,
    #hero .carousel-control-prev-icon {
        background: 0 0;
        font-size: 35px;
        line-height: 1;
        width: auto;
        height: auto;
    }

}

@media  (max-device-width: 480px)and (max-device-height: 320px) { 

    #hero .carousel-item{
        max-width: 100%;
        height: calc(100vh - 10vh);
        margin-top:3%;
        background-repeat: no-repeat;
        overflow: hidden;
        background-attachment: relative;
    }


    

    #hero .carousel-container {
        display: flex;
        height: 100vh !important;
        justify-content: center;
        align-items: center;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden
    }



    #hero .carousel-control-next,
    #hero .carousel-control-prev {
        width: 10%;
        height:100vh;
    }

        #hero .carousel-control-next-icon,
    #hero .carousel-control-prev-icon {
        background: 0 0;
        font-size: 35px;
        line-height: 1;
        width: auto;
        height: auto;
    }

    #hero .carousel-content img {
        width: 100%;
        float:left;
    }


}