/*https://codepen.io/mayurbirle/pen/NvXKPq*/
.container2 {
    margin: 0 auto;
    margin-top: 20px;
    position: relative; /*settings parent Fit to div size*/
    width: 100%; /*settings parent Fit to div size*/
    height: 0; /*settings parent Fit to div size*/
    padding-bottom: 40%;
    user-select: none;
    background-color: #1c1c1c;
    box-shadow: 0 11px 22px rgba(0, 0, 0, 0.2), 0 7px 7px rgba(0, 0, 0, 0.24);
}

    .container2 input {
        display: none;
    }

    .container2 .slide_img {
        position: absolute;
        width: 100%; /*settings parent Fit to div size*/
        height: 100%; /*settings parent Fit to div size*/
        z-index: -1;
    }

        .container2 .slide_img img {
            width: inherit; /*Fit to div size*/
            height: inherit; /*Fit to div size*/
        }

        .container2 .slide_img .prev, .container2 .slide_img .next {
            width: 12%;
            height: inherit;
            position: absolute;
            top: 0;
            background-color: rgba(255, 82, 82, 0.05);
            z-index: 99;
            transition: 0.45s;
            cursor: pointer;
            text-align: center;
        }

        .container2 .slide_img .next {
            right: 0;
        }

        .container2 .slide_img .prev {
            left: 0;
        }

            .container2 .slide_img .prev:hover, .container2 .slide_img .next:hover {
                transition: 0.3s;
                background-color: rgba(255, 82, 82, 0.8);
            }

            .container2 .slide_img .prev span, .container2 .slide_img .next span {
                position: absolute;
                width: 0px;
                height: 0px;
                border: solid 20px;
                top: 50%;
                transform: translateY(-50%);
            }

            .container2 .slide_img .prev span {
                border-color: transparent #fff transparent transparent;/*Making arrow*/
                right: 35%;
            }

        .container2 .slide_img .next span {
            border-color: transparent transparent transparent #fff; /*Making arrow*/
            left: 35%;
        }

    .container2 #nav_slide {
        width: 100%;
        bottom: 12%;
        height: 11px;
        position: absolute;
        text-align: center;
        z-index: 99;
        cursor: default;
    }

        .container2 #nav_slide .dots {
            top: -5px;
            width: 18px;
            height: 18px;
            margin: 0 3px;
            position: relative;
            border-radius: 100%;
            display: inline-block;
            background-color: rgba(0, 0, 0, 0.6);
            transition: 0.4s;
            cursor: pointer;
        }

        .container2 #nav_slide #dot1:hover {
            background: #795548;
        }

        .container2 #nav_slide #dot2:hover {
            background: #F44336;
        }

        .container2 #nav_slide #dot3:hover {
            background: #2196F3;
        }

        .container2 #nav_slide #dot4:hover {
            background: #4CAF50;
        }

#i1:checked ~ #one,
#i2:checked ~ #two,
#i3:checked ~ #three,
#i4:checked ~ #four {
    z-index: 9;
    animation: scroll 1s ease-in-out;
}

#i1:checked ~ #nav_slide #dot1 {
    background: #795548;
}

#i2:checked ~ #nav_slide #dot2 {
    background: #F44336;
}

#i3:checked ~ #nav_slide #dot3 {
    background: #2196F3;
}

#i4:checked ~ #nav_slide #dot4 {
    background: #4CAF50;
}

@keyframes scroll {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 685px) {
    .container2 {
        border: none;
        width: 100%;
        height: 0;
        padding-bottom: 55%;
    }

        .container2 .slide_img .prev, .container2 .slide_img .next {
            width: 15%;
        }

            .container2 .slide_img .prev span, .container2 .slide_img .next span {
                border: solid 12px;
            }

            .container2 .slide_img .prev span {
                border-color: transparent #fff transparent transparent;
            }

            .container2 .slide_img .next span {
                border-color: transparent transparent transparent #fff;
            }

        .container2 #nav_slide .dots {
            width: 12px;
            height: 12px;
        }
}

.yt {
    margin: 0 auto;
    margin-top: 30px;
    width: 80px;
    height: 40px;
    border-radius: 4px;
    text-align: center;
    background: #2196F3;
    box-shadow: 0 11px 22px rgba(0, 0, 0, 0.2), 0 7px 7px rgba(0, 0, 0, 0.24);
    transition: 0.4s;
    opacity: 0.4;
}

    .yt a {
        position: relative;
        text-decoration: none;
        color: #fff;
        font-size: 23px;
        top: 4px;
    }

    .yt:hover {
        transition: 0.3s;
        box-shadow: none;
        opacity: 0.8;
    }

.container-fix {
    
    position: relative; /*settings parent Fit to div size*/
    top:0;
    left:0;
    width: 100%; /*settings parent Fit to div size*/
    height: calc(100%-400px);
    margin: 0 ; /*settings parent Fit to div size*/
    /*padding-bottom: 40%;
    user-select: none;
    background-color: #1c1c1c;
    box-shadow: 0 11px 22px rgba(0, 0, 0, 0.2), 0 7px 7px rgba(0, 0, 0, 0.24);*/
}
    .container-fix .container-fix-img {
        /*position: absolute;
        top:0;
        left:0;*/
        width: 100%; /*settings parent Fit to div size*/
        height: 100%; /*settings parent Fit to div size*/
        z-index: 1;
    }

        .container-fix .container-fix-img img {
            display: block;
            width:100%;
            height:auto;
            /*max-width: 100%;
            max-height: 100%;*/
            /*width: inherit;*/ /*settings parent Fit to div size*/
            /*height: inherit;*/ /*settings parent Fit to div size*/
        }

    .container-fix .container-fix-items {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-family: 'Roboto', sans-serif; /*'Open Sans', sans-serif;*/
        font-size: 2vw;
        color: white;
        background-color: rgba(0, 0, 0, 0.1);
        z-index: 2;
    }