.container {
    width: 100%;
    position: relative;
}

    .container .carousel {
        width: 100%;
    }

        .container .carousel .slide {
            width: 100%;
            position: relative;
        }

            .container .carousel .slide .slideInner {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }

                .container .carousel .slide .slideInner h1 {
                    font-size: 6vh;
                }


                .container .carousel .slide .slideInner a {
                    font-size: 1.8vh;
                }


    .container .carouselPrev {
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translate(-50%,-50%);
    }

    .container .carouselNext {
        position: absolute;
        top: 50%;
        left: 90%;
        transform: translate(-50%,-50%);
    }

    .container .sdots {
        width: 100%;
        position: absolute;
        top: 95%;
        left: 50%;
        transform: translate(-50%,-50%);
    }


@media only screen and (max-width: 640px) {
    /* define mobile specific styles come here */

    .container .carousel .slide .slideInner h1 {
        font-size: 3vh;
    }

    .container .carousel .slide .slideInner p {
        font-size: 1.6vh;
    }

    .container .carousel .slide .slideInner a {
        font-size: 1.4vh;
    }

    .slick-prev::before, .slick-next::before {
        font-size: 3vh;
    }

    .slick-prev, .slick-next {
        height: 3hv;
        width: 3hv;
    }

    .container .sdots {
        width: 100%;
        position: absolute;
        top: 90%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}

@media only screen and (max-width: 480px) {
    /* define mobile specific styles come here */

    .container .carousel .slide {
        min-height: 450px;
        text-align: center;
    }

        .container .carousel .slide .slideInner {
            position: relative;
            top: 0%;
            left: 50%;
            width: 70%;
            transform: translate(-50%,0%);
            padding-top: 15px;
        }


            .container .carousel .slide .slideInner h1 {
                font-size: 4vh;
            }

            .container .carousel .slide .slideInner p {
                font-size: 2.6vh;
            }

            .container .carousel .slide .slideInner a {
                font-size: 2.4vh;
            }

    .slick-prev::before, .slick-next::before {
        font-size: 3.5vh;
    }

    .slick-prev, .slick-next {
        height: 3.5hv;
        width: 3.5hv;
    }

    .container .carouselPrev {
        position: absolute;
        top: 60%;
        left: 10%;
        transform: translate(-50%,-40%);
    }

    .container .carouselNext {
        position: absolute;
        top: 60%;
        left: 90%;
        transform: translate(-50%,-40%);
    }

    .container .sdots {
        width: 100%;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}