/*
    Theme Name: Axtra - Digital Agency Portfolio Template
    Author: Crowdyflow
    Support: habib.crowdyflow@gmail.com
    Description: BUILDY – is a  Constructor HTML5 template that comes with high-quality 3 Pre build Home Pages and many built-in awesome inner pages  which are perfect for any creative agencies, designers, digital agencies, freelancers, developers, designers, marketing, startup, blog and portfolio.
    Version: 1.0
*/

body {
    background-color: #000000!important;
}

.portfolio-category li {
    display: inline!important;
    cursor: pointer;
}

.port-active {
    color: white!important;
}

.portfolio-category li {
    color: #800020!important;
    /* color: #e9edf0!important; */
}

::-webkit-scrollbar {
    width: 3px;
    background-color: #4d3a3a;
    height: 5px;
}

::-ms-overflow-style {
    -webkit-border-radius: 5px;
    border-radius: 10px;
    background: #4d3a3a;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 10px;
    background: #4d3a3a;
}

::-webkit-scrollbar-track {
    background-color: #e9edf0;
    border-left: 1px solid #ededed;
}

#snackbar {
    visibility: hidden;
    /* Hidden by default. Visible on click */
    width: 40%!important;
    /* Set a default minimum width */
    margin-left: -20%!important;
    alignment: center!important;
    /* Divide value of min-width by 2 */
    background-color: #000000;
    /* Black background color */
    color: #800020;
    /* White text color */
    text-align: center;
    /* Centered text */
    border-radius: 30px!important;
    /* Rounded borders */
    padding: 16px;
    /* Padding */
    position: fixed;
    /* Sit on top of the screen */
    z-index: 9999;
    /* Add a z-index if needed */
    left: 50%;
    /* Center the snackbar */
    bottom: 25px;
    /* 30px from the bottom */
}


/* Show the snackbar when clicking on a button (class added with JavaScript) */

#snackbar.show {
    visibility: visible;
    /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 3.5s, fadeout 0.5s 2.5s;
    animation: fadein 2.5s, fadeout 0.5s 2.5s;
}


/* PRODCUTIONS PAGE */

body {
    background-color: #000000!important;
}

.home-wrapper-5,
.hero__content-5,
.hero__text-5,
.hero__area-5,
.portfolio__area-5,
.footer__area-5 {
    background-color: #000000!important;
}

#portfolio__inner-5 div {
    margin: auto!important;
    padding: 2px!important;
}

.wc-btn-secondary:hover {
    color: white!important;
}

div.hero__text-5.text-anim {
    display: flex!important;
    padding: 5px auto!important;
    margin: 0 auto;
    justify-content: center!important;
}

@media only screen and (min-width: 200px) and (max-width: 391px) {
    div.hero__text-5.text-anim {
        margin: 0px auto!important;
        margin-left: -16px!important;
    }
    ul#port-categories.portfolio-category {
        width: 100%!important;
        display: block!important;
        justify-content: center!important;
        margin: 0px auto!important;
        padding: 5px!important;
    }
    #port-categories li {
        font-size: 15px!important;
    }
}

@media only screen and (min-width: 392px) and (max-width: 420px) {
    div.hero__text-5.text-anim {
        margin: 0 auto!important;
        margin-left: -15px!important;
    }
    ul#port-categories.portfolio-category {
        word-break: break-all!important;
        width: 100%!important;
        display: inline!important;
        float: inline-start!important;
        justify-content: center!important;
        margin: 0px auto!important;
        padding: 8px!important;
    }
    #port-categories li {
        font-size: 18px!important;
    }
}

@media only screen and (min-width: 421px) and (max-width: 640px) {
    div.hero__text-5.text-anim {
        margin: 0 auto!important;
        /* margin-left: -15px!important; */
    }
    ul#port-categories.portfolio-category {
        word-break: break-all!important;
        width: 100%!important;
        display: inline!important;
        justify-content: center!important;
        margin: 0px auto!important;
        padding: 10px!important;
    }
    #port-categories li {
        font-size: 18px!important;
    }
}

@media only screen and (min-width: 641px) and (max-width: 800px) {
    div.hero__text-5.text-anim {
        margin: 0 auto!important;
        /* margin-left: -15px!important; */
    }
    ul#port-categories.portfolio-category {
        word-break: break-all!important;
        width: 100%!important;
        display: inline!important;
        float: inline-start!important;
        justify-content: center!important;
        margin: 0px auto!important;
        padding: 10px!important;
    }
    #port-categories li {
        font-size: 18px!important;
    }
}

@media only screen and (min-width: 801px) and (max-width: 1024px) {
    div.hero__text-5.text-anim {
        margin: 0 auto!important;
        /* margin-left: -15px!important; */
    }
    ul#port-categories.portfolio-category {
        word-break: break-all!important;
        width: 100%!important;
        display: inline!important;
        /* float:inline-start!important; */
        justify-content: center!important;
        margin: 0px auto!important;
        padding: 10px!important;
    }
    #port-categories li {
        font-size: 1.1em!important;
    }
}

@media only screen and (min-width: 1025px) {
    div.hero__text-5.text-anim {
        margin: 0 auto!important;
        /* margin-left: -15px!important; */
    }
    ul#port-categories.portfolio-category {
        word-break: break-all!important;
        width: 100%!important;
        display: flex!important;
        /* float:inline-start!important; */
        justify-content: center!important;
        margin: 0px auto!important;
        padding: 10px!important;
    }
    #port-categories li {
        font-size: 1.2em!important;
    }
}

.pipe {
    color: #808080!important;
}