body {
}

@import url(https://fonts.googleapis.com/css?family=Raleway);

* {
    padding: 0;
    margin: 0;
}

body {
    margin: 0px auto;
}

#BOX {
    margin-top: 20px;
}

#BOX1 {
    margin-top: 20px;
}

.SINGLE_BOX {
    position: relative;
    height: 300px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    transition: .6s;
}

    .SINGLE_BOX .IMG_BOX {
        position: absolute;
        top: 0;
        left: 0;
        transition: .6s;
        width: 100%;
        height: 100%;
    }


        .SINGLE_BOX .IMG_BOX img {
            height: 100%;
            border-radius: 8px;
        }


    .SINGLE_BOX:hover .IMG_BOX {
        opacity: .5;
    }


    .SINGLE_BOX .CONTENT_BOX {
        position: absolute;
        height: 80%;
        bottom: -100%;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
        transition: .6s;
        color: white;
    }



        .SINGLE_BOX .CONTENT_BOX h3 {
            margin: 0;
        }

        .SINGLE_BOX .CONTENT_BOX h4 {
            margin: 0;
            color: #ffd800;
        }


        .SINGLE_BOX .CONTENT_BOX p {
            font-size: 12px;
        }

        .SINGLE_BOX .CONTENT_BOX .SOCIALL ul {
            list-style: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }


            .SINGLE_BOX .CONTENT_BOX .SOCIALL ul li {
            }

                .SINGLE_BOX .CONTENT_BOX .SOCIALL ul li a {
                    color: white;
                    font-size: 16px;
                    padding: 0 8px;
                }




    .SINGLE_BOX:hover .CONTENT_BOX {
        bottom: 0;
    }





#BOX.SINGLE:nth-child(1) .CONTENT_BOX {
    background: linear-gradient(0deg,#c21833,transparent)
}

#BOX.SINGLE:nth-child(2) .CONTENT_BOX {
    background: linear-gradient(0deg, #3352FF, transparent)
}

#BOX.SINGLE:nth-child(3) .CONTENT_BOX {
    background: linear-gradient(0deg, #33FF58, transparent)
}


#BOX.SINGLE:nth-child(4) .CONTENT_BOX {
    background: linear-gradient(0deg, #ffd800, transparent)
}





#BOX1.SINGLE:nth-child(1) .CONTENT_BOX {
    background: linear-gradient(0deg,#c21833,transparent)
}

#BOX1.SINGLE:nth-child(2) .CONTENT_BOX {
    background: linear-gradient(0deg, #3352FF, transparent)
}

#BOX1.SINGLE:nth-child(3) .CONTENT_BOX {
    background: linear-gradient(0deg, #33FF58, transparent)
}


#BOX1.SINGLE:nth-child(4) .CONTENT_BOX {
    background: linear-gradient(0deg, #ffd800, transparent)
}




@-webkit-keyframes floatText {
    from {
        left: 00%;
    }

    to {
        /* left: auto; */
        left: 100%;
    }
}