.main {
    height: 50vh;
}

.hover-effect1 {
    min-height: 20px;
    background: #F44336;
    text-align: center;
}

    .hover-effect1 ul {
        padding-top: 1px;
    }

        .hover-effect1 ul li {
            display: inline-block;
        }

            .hover-effect1 ul li a {
                font-size: 30px;
                text-align: center;
                color: #fff;
                margin: 0px 10px;
                line-height: 50px;
                display: inline-block;
                width: 50px;
                height: 50px;
                background: #dc3545;
                -webkit-transition: all .6s ease;
                -moz-transition: all .6s ease;
                -ms-transition: all .6s ease;
                -o-transition: all .6s ease;
                transition: all .6s ease;
            }

            .hover-effect1 ul li:hover a {
                border-radius: 50%;
                background: #dc3545;
                -moz-transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }