@media (max-width: 480px) {
    .recent-members > li > img {
        width: 35px;
    }

    .recent-members > li > .user-name {
        font-size: 0.6rem;
    }

    .recent-members > li > .joined-date {
        font-size: 0.45rem;
    }

    .sidebar .navigation {
        padding: 10px 0 0 10px;
    }

    .sidebar .navigation > li a {
        padding: 7px 5px;
        font-size: 12px;
        text-transform: uppercase;
        min-height: 35px;
    }
}

@media (min-width: 992px) {
    .navbar-toggleable-md .navbar-collapse, .page-content {
        width: 980px;
        margin: auto;
        display: flex !important;
    }
}

@media (min-width: 1200px) {
    .navbar-toggleable-md .navbar-collapse, .page-content {
        width: 1180px;
        margin: auto;
    }

    .swiper-container {
        max-width: 738px;
    }
}

@media (min-width: 1500px) {
    .navbar-toggleable-md .navbar-collapse, .page-content {
        width: 1480px;
        margin: auto;
    }

    .swiper-container {
        max-width: 932px;
    }
}

.swiper-container {
    max-width: 1226px;
}

.sidebar-content {
    max-width: 220px;
}

.card-new form label {
    font-size: 1.5em;
    display: block;
    font-weight: bold;
}

.button-info {
    background: #d02121;
}

.content {
    padding: 50px 20px 0 20px !important;
}

.content-wrapper {
    display: block !important;
}

.col-max {
    padding: 5px;
}

.col-max span {
    padding: 3px 10px;
    color: #FFF;
    margin: 3px;
    border-radius: 5px;
}

.col-max img {
    min-width: 17px;
}

h5 .right {
    font-size: 12px;
    margin: 4px 0;
}

.navbar .user-img {
    padding: 1px;
}

.loginButton {
    height: 60px;
}

.loginButton a:hover {
    background: #f21717;
}
.loginButton a {
    font-size: 19px;
    background: #d02121;
    color: #FFF;
    width: 40px;
    text-align: center;
    height: 40px;
    margin: 9px 2px;
    border-radius: 50%;
    display: inline-block;
    padding: 5px;
    transition: all 0.3s;
}

.col-max figure img {
    background: #cacaca;
    padding: 5px 15px;
    float: left;
    min-width: 198px;
    margin: 10px;
    border-radius: 10px;
}

.main-article-box .swiper-slide {
    min-width: 300px;
}

.app-type {
    background: #8f8f8f !important;
}

.col-max figure > div > div {
    background: #f21717;
    padding: 3px 15px;
    color: #FFF;
    display: inline-block;
    margin: 10px 0;
    border-radius: 10px;
}

.col-max figure > div > p {
    color: #f21717;
}

.col-max figure {
    height: 60px;
}

.col-max:hover {
    background: rgba(0, 0, 0, 0.075);
}

.card-new form ul {
    list-style: none;
    padding: 0 5px 5px 5px;
    margin: 0 0 -10px 0;
    background: #d02121;
    font-weight: bold;
    border-radius: 3px;
    color: #ffffff;
}

.card-new form input {
    width: 100%;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    margin: 5px 0;
    display: block;
    color: #d02121;
    font-size: 1.2em;
    border: 1px solid #c6c3c3;
}

.button-info {
    margin: 10px auto;
    padding: 0.4em 1em;
    font-size: 1.2em;
    transition: all 0.3s;
}

.button-info:hover {
    background: #f21717;
}

.button-info svg {
    margin-left: 8px;
}

.button-info.white {
    position: absolute;
    margin: 0;
    padding: 5px 10px;
    color: #d02121;
    min-width: 50px;
    background: #ffffff;
    border: 2px solid #d02121;
}

form .or {
    margin: 0;
    color: #d02121;
}

.button-simple {
    float: right;
    background: #FFF;
    border: none;
    margin-top: 5px;
    cursor: pointer;
    color: #d02121;
    font-weight: bold;
}

.or {
    text-align: center;
    margin: -8px;
    font-weight: bold;
}

.center {
    text-align: center;
}

.copyright {
    position: absolute;
    bottom: 5px;
    z-index: -1;
    left: calc(50% - 71px);
    color: #8f8f8f;
}

.copyright a {
    color: #8f8f8f;
    text-decoration: underline;
}

.submenu-block:hover .submenu-box {
    transition: opacity 0.5s linear;
    transform: translate(0);
    margin-top: 17px;
    opacity: 1;
}

.submenu-box .dropdown-toggle {
    display: none;
}

.settings-box a {
    border-top: none;
}

.submenu-box {
    padding: 3px 5px 0 5px;
}

.submenu-box .external {
    background: #fff;
    display: block;
    padding: 3px 5px;
    margin: -3px -3px 4px;
}

.submenu-box .external:hover {
    background: rgb(238, 238, 239);
}

.user-block {
    height: auto;
}

.user-block span {
    display: grid;
}

.article-box {
    display: inline-block;
}

.article-box:hover .inner {
    background: rgba(3, 28, 47, 0.7);
}

.team-box {
    margin: 10px;
    border-radius: 5px;
    background: #fff;
    padding: 5px;
}

.team-box > div  {
    margin: 10px -5px;
    border-radius: 5px;
    padding: 5px 10px;
    background: #f4f4f4;
}

.team-box .row  {
    margin: 0;
}

.team-box .swiper-container {
    max-width: 1130px;
}

.team-box h6 {
    font-weight: bold;
    color: #d02121;
}

.team-box .info-block  {
    margin: 0 auto;
    display: block;
    width: max-content;
}

.site-box .site-logo  {
    margin: 3px auto;
    height: 20px;
    filter: contrast(0%) brightness(200%);
    position: absolute;
    left: 20px;
}

.inputfile {
    display: none !important;
}

.file-button {
    display: inline-block !important;
    font-size: 1.2em !important;
}

.article-title {
    width: calc(100% - 170px);
    border: none;
    font-size: 24px;
    font-weight: bold;
}

textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:0 !important;
    -webkit-appearance:none;
}

h5 .right.mdle {
    margin: -9px 0;
}

.file-button svg {
    display: none;
}

.medium-editor-insert-plugin .medium-insert-buttons {
    left: -40px !important;
}

.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-addons {
    background: #FFF;
}

.medium-editor-insert-plugin .medium-insert-buttons button:hover {
    color: #d02121 !important;
    border: 1px solid #d02121 !important;
}
.medium-editor-insert-plugin .medium-insert-buttons button {
    color: #87a3b4 !important;
    font-size: 16px;
    background: #eeeeef !important;
    transition: all 0.3s;
    box-shadow: 0 16px 20px 0 rgba(219, 219, 219, 0.55);
    border: 1px solid #87a3b4 !important;
}

small .info-block {
    padding: 3px 5px;
    margin: 0 5px -8px;
}

.team-box .card-title {
    text-align: center;
    font-weight: bolder;
    font-size: 1.5rem;
}

.site-box .inner > span {
    position: absolute;
    right: 20px;
    font-size: 17px;
    color: #FFF;
    font-weight: bold;
}

.site-box .inner i {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    margin: 1px 5px;
}

.site-box .inner {
    min-height: 15px;
}

.site-box.margin-10 {
    width: auto;
    margin: -4px 10px;
}

.site-box .widget-overview {
    min-height: 55px;
    background: #cacaca;
}

.site-box .widget-overview:hover {
    opacity: 0.8;
}

.site-box .widget-overview {
    border-radius: 10px;
}

.recent-members > li {
    float: none;
    width: 24%;
    display: inline-block;
}

.team-box  h6 a {
    padding: 3px;
    color: #444;
    font-size: 0.8rem;
    opacity: 0.8;
}

.team-box  .swiper-slide {
    min-width: 275px;
}

.team-box  h6 a:hover {
    opacity: 1;
}

.article-box .inner {
    padding: 20px 0;
    text-align: center;
    font-size: 25px;
    line-height: 25px;
    min-height: 140px;
    display: table;
    width: 100%;
    color: #FFF;
    font-weight: bold;
    background: #0009;
    transition: all 0.3s;
}

.article-box .inner span {
    display: table-cell;
    vertical-align: middle;
    height: 75px;
    line-height: 25px;
}

.article-box .details a {
    color: #ffffff;
}

.article-box .details {
    color: #fff;
    font-weight: bold;
    position: absolute;
    display: block;
    bottom: 10px;
    left: 15px;
    padding: 3px;
    right: 15px;
}

@media only screen and (max-width: 667px) and (min-width: 320px) {
    .col-max figure > div {
        display: block;
        text-align: center;
        margin: -7px auto 3px auto;
    }

    .col-max figure > div > div {
        display: inline-block;
        margin: 5px auto 0 auto;
    }

    .col-max figure img {
        float: none;
        display: block;
        margin: 10px auto;
    }

    .col-max figure {
        height: auto;
        margin: -4px auto;
    }

    .col-max figure > div > p {
        display: none;
    }
}