/*start portfolio*/
    .portfolio {
        padding: 10px 0;
        background: #f7f7f7;
    }

    .portfolio p {
        color: rgba(255, 255, 255, .6);
        margin: 20px 40px;
        letter-spacing: 1px;
        line-height: 1.5em;
    }

    /*start tabs*/
    .portfolio input[type="radio"] {
        display: none;
    }

    .portfolio .tabs label {
        display: inline-block;
    color: #ffffff;
    text-transform: capitalize;
    background: #17355e;
    text-align: center;
    padding: 10px 18px;
    margin-bottom: 20px;
    cursor: pointer;
    font-weight: 600;
    margin-right: 7px;
    border-radius: 6px;
    }

    .portfolio .tabs .all {
        display: none;
        transform-origin: 10% 50%;
    }

    .portfolio .tabs .content {
        margin-bottom: 29px;
        position: relative;
        overflow: hidden;
    }

    .portfolio .tabs .content img {
        height: 190px;
        width: 100%;
        border-radius: 8px;
    }

    .portfolio .tabs label:not(:first-of-type) {
        margin-left: -4px;
    }

    .portfolio input[id="all"]:checked~.content .all {
        display: block;
        animation: animateTabe 1s;
    }

    .portfolio input[id="chemistrylab"]:checked~.content .chemistrylab {
        display: block;
        animation: animateTabe 1s;
    }

    .portfolio input[id="physicslab"]:checked~.content .physicslab {
        display: block;
        animation: animateTabe 1s;
    }

    .portfolio input[id="computerlab"]:checked~.content .computerlab {
        display: block;
        animation: animateTabe 1s;
    }
    .portfolio input[id="library"]:checked~.content .library {
        display: block;
        animation: animateTabe 1s;
    }
    .portfolio input[id="schoolbuilding"]:checked~.content .schoolbuilding {
        display: block;
        animation: animateTabe 1s;
    }
    .portfolio input[id="schoolfaculties"]:checked~.content .schoolfaculties {
        display: block;
        animation: animateTabe 1s;
    }
    .portfolio input[id="activity"]:checked~.content .activity {
        display: block;
        animation: animateTabe 1s;
    }
     .portfolio input[id="functiontab"]:checked~.content .functiontab {
        display: block;
        animation: animateTabe 1s;
    }

    .portfolio input[type="radio"]:checked+label {
        background-color: transparent;
    border: 1px solid #18355c;
    cursor: default;
    color: #17355e;
    }

    @keyframes animateTabe {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .classic-list {
        list-style-type: none;
    }