/*Main RWD Elements*/

@media (max-width: 320px) {

    .panel-bg {

        background-position: 50% 2%;

    }
}

@media (max-width: 375px) {

    .panel-bg {

        background-position: 50% 2%;

    }

}

@media (min-width: 375px) and (max-width: 575.98px) {

    .rwd-test {

        background-color: orange !important;

    }

    .server-main-info {

        flex-direction: column;
        align-items: flex-start;
    }

    .server-detalis-item {

        flex-wrap: wrap;

    }

    .server-container {

        padding-left: 0px;
        padding-top: 30px !important;
    }

    .my-p {

        padding: .5rem 1rem;

    }

    .server-logo {

        margin-bottom: 15px;

    }

    .p-35 {

        padding: 0px 20px 20px 20px;

    }

    .panel-bg {

        background-position: 50% 2%;

    }

    .ref-bg {

        background-position: 75% 5%;
    }

    .dl-bg {

        background-position: 48% 3%;
    }
}


@media (min-width: 576px) and (max-width: 767.98px) {

    .rwd-test {

        background-color: pink !important;

    }

    .server-main-info {

        flex-direction: column;
        align-items: flex-start;
    }

    .server-detalis-item {

        flex-wrap: wrap;

    }

    .server-container {

        padding-left: 0px;
        padding-top: 30px !important;
    }
    
    .server-logo {

        margin-bottom: 15px;

    }

    .avatar-big {

        display: none;

    }

    .my-p {

        padding: .5rem 1rem;

    }

    .p-35 {

        padding: 0px 20px 20px 20px;

    }

    .ref-bg {

        background-position: 75% 5%;
    }

    .dl-bg {

        background-position: 48% 3%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .rwd-test {

        background-color: lightseagreen !important;

    }

    .my-p {

        padding: .5rem 1rem;

    }

    .server-container {

        padding-left: 0px;
        padding-top: 30px !important;
    }

    .p-35 {

        padding: 0px 20px 20px 20px;

    }

    .ref-bg {

        background-position: 75% 5%;
    }

    .dl-bg {

        background-position: 48% 3%;
    }

}

@media (min-width: 992px) and (max-width: 1199.98px) {


    .rwd-test {

        background-color: magenta !important;

    }
    .server-main-info {

        flex-direction: column;
        align-items: flex-start;
    }

    .server-detalis-item {

        flex-wrap: wrap;

    }

    .server-container {

        padding-left: 0px;
        padding-top: 30px !important;
    }
    .server-logo {

        margin-bottom: 15px;

    }

    .server-container {

        padding-left: 0px;
        padding-top: 30px !important;
    }

    .p-35 {

        padding: 0px 50px 50px 50px;

    }

    .widget-add-server,
    .with-bg {

        background-position: 70% 0%;

    }

    .avatar-big {

        display: none;

    }
}

@media (min-width: 1200px) and (max-width: 1440px) {

    .server-main-info {

        flex-direction: row;
        align-items: center;
    }

    .server-logo {

        margin-bottom: 15px;

    }

}



@media (max-width: 768px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
    }

    .navbar-collapse.collapsing {
        height: auto;
        -webkit-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        transition: left 0.3s ease;
        left: -100%;
    }

    .navbar-collapse.show {
        left: 0;
        -webkit-transition: left 0.3s ease-in;
        -o-transition: left 0.3s ease-in;
        -moz-transition: left 0.3s ease-in;
        transition: left 0.3s ease-in;
    }
}


@media (max-width: 992px) {
    .navbar-collapse {
        position: absolute;
        top: 47px;
        right: 100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
        transition: all 0.2s ease;
        display: block;
        z-index: 2;
        background-color: var(--boxes-color);
        border-bottom: 1px solid var(--low-border);
    }

    .navbar-collapse.collapsing {
        height: auto !important;
        margin-right: 50%;
        transition: all 0.2s ease;
        display: block;
    }

    .navbar-collapse.show {
        right: 0;
    }
}