.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #7b7ee97d;
            border-top-right-radius: -1px;
            border-top-left-radius: -41px;
        }

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

* {
    box-sizing: border-box;
}

/*body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}*/

.topnav {
    overflow: hidden;
    background-color: #e9e9e9;
}

    .topnav a {
        float: left;
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

        .topnav a:hover {
            background-color: #808080;
            color: black;
        }

        .topnav a.active {
            background-color: #e9e9e9;
            color: black;
        }

            .topnav a.active:hover {
                background-color: #808080;
                color: white;
            }

    .topnav .search-container {
        float: right;
    }

    .topnav input[type=text] {
        padding: 6px;
        margin-top: 8px;
        font-size: 17px;
        border: none;
    }

    .topnav .search-container button {
        float: right;
        padding: 6px 10px;
        margin-top: 8px;
        margin-right: 16px;
        background: #ddd;
        font-size: 17px;
        border: none;
        cursor: pointer;
    }

        .topnav .search-container button:hover {
            background: #ccc;
        }

@media screen and (max-width: 600px) {
    .topnav .search-container {
        float: none;
    }

        .topnav a, .topnav input[type=text], .topnav .search-container button {
            float: none;
            display: block;
            text-align: left;
            width: 100%;
            margin: 0;
            padding: 14px;
        }

    .topnav input[type=text] {
        border: 1px solid #ccc;
    }

    .col-centered {
        float: none;
        margin: 0 auto;
    }

    .carousel-control {
        width: 8%;
        width: 0px;
    }

        .carousel-control.left,
        .carousel-control.right {
            margin-right: 40px;
            margin-left: 32px;
            background-image: none;
            opacity: 1;
        }

        .carousel-control > a > span {
            color: white;
            font-size: 29px !important;
        }

    .carousel-col {
        position: relative;
        min-height: 1px;
        padding: 5px;
        float: left;
    }

    .active > div {
        display: none;
    }

        .active > div:first-child {
            display: block;
        }

    /*xs*/
    @media (max-width: 767px) {
        .carousel-inner .active.left {
            left: -50%;
        }

        .carousel-inner .active.right {
            left: 50%;
        }

        .carousel-inner .next {
            left: 50%;
        }

        .carousel-inner .prev {
            left: -50%;
        }

        .carousel-col {
            width: 50%;
        }

        .active > div:first-child + div {
            display: block;
        }
    }

    /*sm*/
    @media (min-width: 768px) and (max-width: 991px) {
        .carousel-inner .active.left {
            left: -50%;
        }

        .carousel-inner .active.right {
            left: 50%;
        }

        .carousel-inner .next {
            left: 50%;
        }

        .carousel-inner .prev {
            left: -50%;
        }

        .carousel-col {
            width: 50%;
        }

        .active > div:first-child + div {
            display: block;
        }
    }

    /*md*/
    @media (min-width: 992px) and (max-width: 1199px) {
        .carousel-inner .active.left {
            left: -33%;
        }

        .carousel-inner .active.right {
            left: 33%;
        }

        .carousel-inner .next {
            left: 33%;
        }

        .carousel-inner .prev {
            left: -33%;
        }

        .carousel-col {
            width: 33%;
        }

        .active > div:first-child + div {
            display: block;
        }

            .active > div:first-child + div + div {
                display: block;
            }
    }

    /*lg*/
    @media (min-width: 1200px) {
        .carousel-inner .active.left {
            left: -25%;
        }

        .carousel-inner .active.right {
            left: 25%;
        }

        .carousel-inner .next {
            left: 25%;
        }

        .carousel-inner .prev {
            left: -25%;
        }

        .carousel-col {
            width: 25%;
        }

        .active > div:first-child + div {
            display: block;
        }

            .active > div:first-child + div + div {
                display: block;
            }

                .active > div:first-child + div + div + div {
                    display: block;
                }
    }

    .block {
        width: 306px;
        height: 230px;
    }

    .red {
        background: red;
    }

    .blue {
        background: blue;
    }

    .green {
        background: green;
    }

    .yellow {
        background: yellow;
    }

    .section-slider .home-slider {
        border-radius: 10px;
        overflow: hidden
    }

    .slick-slider {
        position: relative;
        display: block;
        box-sizing: border-box;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-tap-highlight-color: transparent
    }

        .slick-slider .slick-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 99;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 0;
            background: #f26d7d;
            border: 1px #f26d7d solid;
            height: 30px;
            width: 30px;
            transition: 0.3s all;
            opacity: 0;
            overflow: hidden
        }

            .slick-slider .slick-arrow.slick-next {
                right: -30px
            }

                .slick-slider .slick-arrow.slick-next:before {
                    content: "\f054";
                    font-size: 11px;
                    color: #fff
                }

            .slick-slider .slick-arrow.slick-prev {
                left: -30px
            }

                .slick-slider .slick-arrow.slick-prev:before {
                    content: "\f053";
                    font-size: 11px;
                    color: #fff
                }

            .slick-slider .slick-arrow:hover {
                background: #FFF
            }

                .slick-slider .slick-arrow:hover:before {
                    color: #f26d7d
                }

        .slick-slider:hover .slick-arrow {
            opacity: 1;
            overflow: visible
        }

            .slick-slider:hover .slick-arrow.slick-next {
                right: 0
            }

            .slick-slider:hover .slick-arrow.slick-prev {
                left: 0
            }

    .slick-list {
        position: relative;
        overflow: hidden;
        display: block;
        margin: 0;
        padding: 0
    }

        .slick-list:focus {
            outline: none
        }

        .slick-list.dragging {
            cursor: pointer;
            cursor: hand;
        }

    .slick-slider .slick-track, .slick-slider .slick-list {
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    .slick-track {
        position: relative;
        left: 0;
        top: 0;
        display: block;
        margin-left: auto;
        margin-right: auto
    }

        .slick-track:before, .slick-track:after {
            content: "";
            display: table
        }

        .slick-track:after {
            clear: both
        }

    .slick-loading .slick-track {
        visibility: hidden
    }

    .slick-slide {
        float: left;
        height: 100%;
        min-height: 1px;
        outline: none;
        display: none
    }

    [dir="rtl"] .slick-slide {
        float: right
    }

    .slick-slide img {
        display: block;
        width: 100%
    }

    .slick-slide.slick-loading img {
        display: none
    }

    .slick-slide.dragging img {
        pointer-events: none
    }

    .slick-initialized .slick-slide {
        display: block
    }

    .slick-loading .slick-slide {
        visibility: hidden
    }

    .slick-vertical .slick-slide {
        display: block;
        height: auto;
        border: 1px solid transparent
    }

    .slick-arrow.slick-hidden {
        display: none
    }