ul.tab {
        list-style-type: none;
        margin: 3px;
        padding: 0;
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }

        /* Float the list items side by side */
        ul.tab li {
            float: left;
        }

            /* Style the links inside the list items */
            ul.tab li a {
                display: inline-block;
                color: black;
                text-align: center;
                padding: 5px 10px;
                text-decoration: none;
                transition: 0.3s;
                font-size: 17px;
                border-right:1px solid #D8D8D8;
            }

                /* Change background color of links on hover */
                ul.tab li a:hover {
                    background-color: #ddd;
                }

                /* Create an active/current tablink class */
                ul.tab li a:focus, .active {
                    background-color: #ccc;
                }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 5px 5px;
       /* -webkit-animation: fadeEffect 1s;
        animation: fadeEffect 1s;*/
    }

    @-webkit-keyframes fadeEffect {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeEffect {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }