body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        /* Slider wrapper*/
        .css-slider-wrapper {
            display: block;
            background: #FFF;
            overflow: hidden;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
        /* Slider */
        .slider {
            width: 100%;
            height: 100%;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 1;
            z-index: 0;
            display: flex;
            display: -webkit-flex;
            display: -ms-flexbox;
            flex-direction: row;
            flex-wrap: wrap;
            -webkit-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            justify-content: center;
            align-content: center;
            -webkit-transition: -webkit-transform 1600ms;
            transition: -webkit-transform 1600ms, transform 1600ms;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        /* each slide backgound color */
        .slide1 {
            background: #00206d;
            left: 0;
        }

        .slide2 {
            background: #00206d;
            left: 100%;
        }

        .slide3 {
            background: #00206d;
            left: 200%;
        }

        .slide4 {
            background: #00206d;
            left: 300%;
        }

        .slider > div {
            text-align: center;
        }
        /* Slider inner slide effect */
        .slider h2 {
            color: #FFF;
            font-weight: 900;
            text-transform: uppercase;
            font-size: 45px;
            line-height: 120%;
            opacity: 0;
            -webkit-transform: translateX(500px);
            transform: translateX(500px);
        }

        .slider .button {
    color: #FFF;
    padding: 25px 40px;
    background: rgba(255,255,255,0.3);
    text-decoration: none;
    opacity: 0;
    font-size: 30px;
    line-height: 30px;
    display: inline-block;
    -webkit-transform: translateX(-500px);
    transform: translateX(-500px);
    font-family: roboto;
        }

        .slider h2, .slider .button {
            -webkit-transition: opacity 800ms, -webkit-transform 800ms;
            transition: transform 800ms, opacity 800ms;
            -webkit-transition-delay: 1s; /* Safari */
            transition-delay: 1s;
        }
        /* Next and Preive arrow */
        .control {
            position: absolute;
            top: 50%;
            width: 50px;
            height: 50px;
            margin-top: -25px;
            z-index: 55;
        }

            .control label {
                z-index: 0;
                display: none;
                text-align: center;
                line-height: 50px;
                font-size: 50px;
                color: #FFF;
                cursor: pointer;
                opacity: 0.2;
            }

                .control label:hover {
                    opacity: 0.5;
                }

        .next {
            right: 1%;
        }

        .previous {
            left: 1%;
        }
        /* Slider Pagger */
        .slider-pagination {
            position: absolute;
            bottom: 20px;
            width: 100%;
            left: 0;
            text-align: center;
            z-index: 1000;
        }

            .slider-pagination label {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                display: inline-block;
                background: rgba(255,255,255,0.2);
                margin: 0 2px;
                border: solid 1px rgba(255,255,255,0.4);
                cursor: pointer;
            }
        /* Slider Pagger arrow event */
        .slide-radio1:checked ~ .next .numb2,
        .slide-radio2:checked ~ .next .numb3,
        .slide-radio3:checked ~ .next .numb4,
        .slide-radio2:checked ~ .previous .numb1,
        .slide-radio3:checked ~ .previous .numb2,
        .slide-radio4:checked ~ .previous .numb3 {
            display: block;
            z-index: 1;
        }
        /* Slider Pagger event */
        .slide-radio1:checked ~ .slider-pagination .page1,
        .slide-radio2:checked ~ .slider-pagination .page2,
        .slide-radio3:checked ~ .slider-pagination .page3,
        .slide-radio4:checked ~ .slider-pagination .page4 {
            background: rgba(255,255,255,1);
        }
        /* Slider slide effect */
        .slide-radio1:checked ~ .slider {
            -webkit-transform: translateX(0%);
            transform: translateX(0%);
        }

        .slide-radio2:checked ~ .slider {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }

        .slide-radio3:checked ~ .slider {
            -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
        }

        .slide-radio4:checked ~ .slider {
            -webkit-transform: translateX(-300%);
            transform: translateX(-300%);
        }

        .slide-radio1:checked ~ .slide1 h2,
        .slide-radio2:checked ~ .slide2 h2,
        .slide-radio3:checked ~ .slide3 h2,
        .slide-radio4:checked ~ .slide4 h2,
        .slide-radio1:checked ~ .slide1 .button,
        .slide-radio2:checked ~ .slide2 .button,
        .slide-radio3:checked ~ .slide3 .button,
        .slide-radio4:checked ~ .slide4 .button {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }

        @media only screen and (max-width: 767px) {
            .slider h2 {
                font-size: 20px;
            }

            .slider > div {
                padding: 0 2%;
            }

            .control label {
                font-size: 35px;
            }

            .slider .button {
                padding: 0 15px;
            }
        }