@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
@font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/BebasNeue-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/BebasNeue-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/BebasNeue-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: "Roboto", sans-serif;
}
img.lazy {
    background: #d5d5d5;
    background: linear-gradient(90deg, #d5d5d5 30%, #d5d5d5 25%, #b3b2b2 50%, #b3b2b2 60%, #d5d5d5 70%);
    background-size: 400% 100%;
    animation: skeleton 1.4s ease infinite;
    opacity: .35;
    filter: brightness(0.95) grayscale(1);
    transition: opacity 1s ease, filter 1s ease;
}

img.lazy.loaded {
    opacity: 1;
    filter: none;
    animation: none;          /* vypne shimmer */
    background: none;         /* odstraní šedý podklad */
}

@keyframes skeleton {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Text */

.text-decoration-underline {
    text-decoration: underline!important;
}

.modal-backdrop {
    opacity: .82;
}

.hide {
    display: none;
    opacity: 0;
}


img {
    border-radius: 2px;
}

.bg-main {
    background-color: #f3f3f3 !important;
}

.b-form-tags-input {
    min-height: 35px;
}

a:focus,
a:hover {
    color: #797979;
    text-decoration: none;
    -webkit-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    transition: 0.4s ease;
}

a:focus {
    outline: 0;
}

::-webkit-scrollbar {
    width: 19px;
    height: 19px;
}

::-webkit-scrollbar-thumb {
    background-color: #b3b2b2;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #acacac;
}

::-webkit-scrollbar-thumb:active {
    background-color: #797979;
}

::-webkit-scrollbar-track {
    background-color: #ffffff;
}

::selection {
    background: #2b282b;
    color: white;
}

.lead {
    font-size: 1.05rem;
    font-weight: 400;
}

.btn-primary {
    --bs-btn-color: #000;
    --bs-btn-bg: #e4e4e4;
    --bs-btn-border-color: #e4e4e4;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dee2e6;
    --bs-btn-hover-border-color: #e4e4e4;
    --bs-btn-focus-shadow-rgb: #dee2e6;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e4e4e4;
    --bs-btn-active-border-color: #dee2e6;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #e4e4e4;
    --bs-btn-disabled-border-color: #dee2e6;
}

.d-revert {
    display: revert;
}
.d-webkit-box {
    display: -webkit-box;
}
.btn:first-child:hover, :not(.btn-check) + .btn:hover {
    color: #000;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='26' xml:space='preserve'%3E%3Cpath d='M13 26a.997.997 0 0 1-.707-.293l-12-12a.999.999 0 0 1 0-1.414l12-12a.999.999 0 1 1 1.414 1.414L2.414 13l11.293 11.293A.999.999 0 0 1 13 26z'/%3E%3C/svg%3E%0A");
    filter: invert(1);
    width: 14px;
    height: 25px;
}

.user-select-none {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
}

.pointer-events-none {
    pointer-events: none;
}
.tablet-wide-view {
    display: none;
}

@media (max-width: 991.98px) {
    .nav-textbar input:focus {
        width: calc(100vw - 3rem)!important;
    }
    .search-content {width: calc(100% + 2rem)!important;
        height: calc(50vh - 75px); overflow-y: scroll; margin-top: 1rem !important; margin-left: -1rem; border-left: 0 !important; border-right: 0 !important}
    .tablet-wide-view {
        display: block;
    }

    .navbar-search:focus-within {
        position: absolute;
        width: 100%; /* pokud chceš, aby zabral celou šířku */
        z-index: 999; /* aby se dostal nad ostatní */
        background-color: white;
        margin: 0!important;
        padding-top: 1px;
    }


    .reply-list:before {
        left: -20px;
    }

    .bg-white .about {
        text-align: center;
        margin-bottom: 2rem;
    }

    .carousel .text {
        margin-left: 0.5rem;
    }

    .bg-primary .model {
        display: none;
    }

    .nav-link {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }


    .navbar-nav .list-group {
        padding: 0 !important;
    }

    .navbar-nav .list-group li {
        margin: 0 !important;
    }

    .navbar-nav .list-group li .list-group-item-action {
        border-radius: 0!important;
    }

    .navbar-nav .list-group li .small {
        margin-bottom: 0 !important;
        line-height: initial;
    }
    .nav-visibility-preload .navbar-nav { flex-direction: row;} .nav-visibility-preload {justify-content: flex-end; flex: auto;}
    .slide .fixed-bottom .btn-sm {
        margin-right: 8px;
        margin-left: 8px;
        max-width: 20%;
        width: 20%;
        min-width: 120px;
    }

    .carousel-caption .project-logo {
        margin-top: 0 !important;
    }


}

.navbar-nav .sub-text {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.navbar-light .navbar-nav .nav-link {
    color: black;
    font-weight: 400;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #797979;
}

@media (min-width: 768px) {
    .navbar-expand-md .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}
@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link {
        margin-left: 0.5rem;
    }
}
.navbar {
    padding: 1.094rem 1rem;
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-brand span {
    height: 2.4rem;
    font-size: 16pt;
    line-height: 33pt;
    white-space: nowrap;
    padding: 0 !important;
}

.navbar-brand svg {
    margin-right: 10px;
    width: 40px;
    fill: #9a51bc;
}

.qna-blocks .description {
    color: #5b5b5b !important;
    line-height: 22px !important;
    font-size: 15px !important;
}

.col-resp {
    max-width: 432.5px;
}

.title {
    margin-top: 50px;
}

/* Text */

.navbar-brand span, .bebas-neue{
    font-family: "Bebas Neue", "Arial Black", "Arial Bold", cursive !important;
    font-weight: 700 !important;
}

a, .text-info {
    color: #797979;
}

a[href^="#error:"] {
    background: red;
    color: white;
}

b,
strong {
    font-weight: 500;
}

.text-muted {
    color: #797979 !important;
    font-weight: 480;
}

.text-black {
    color: black !important;
}

.text-blue {
    color: #415190 !important;
}

.text-primary {
    text-transform: uppercase;
    color: #797979 !important;
    font-weight: 480;
}

.text-success {
}

.text-warning {
}

.text-danger {
}

form .required label {
    font-weight: bold;
}

.nav-link:focus, .nav-link:hover {
    color: #797979;
}

/* Tlačítka */

.btn-check:focus + .btn, .btn:focus {
    color: black;
}

.btn-primary {
    background: #dbd8d8;
    color: #151515;
    font-weight: 500;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border-color: #e4e4e4;
    font-size: 15px;
}

.btn-primary:hover {
    background: #d6d4d4;
    color: #151515;
    border-color: #dfdfdf;
}

.btn-primary:active {
    background: #cecaca !important;
}

.close, .close:focus {
    font-weight: 400;
    font-size: 24px;
    line-height: 1px;
    background: #dbd8d8 !important;
    color: #151515;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border-color: #e4e4e4 !important;
    opacity: 1;
    padding: 0.74rem !important;
    height: 36px;
    margin: 0.5rem !important;
}

.close:hover {
    background-color: #d6d4d4 !important;
    opacity: 1;
}

.close:active {
    background-color: #cecaca !important;
    opacity: 1;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: rgb(214 214 214);
    color: #151515;
    box-shadow: none !important;
    border-color: #d6d6d626 !important;
}

.btn-sm {
    z-index: 1;
    border-radius: 2rem;
    padding: 0.375rem 0.75rem;
    text-transform: uppercase;
    font-weight: 500;
    color: black;
    background: white;
}

.btn-so {
    z-index: 1;
    border-radius: 2rem;
    font-weight: 500;
    font-size: 15px;
    color: white;
}

.btn-so:hover {
    filter: brightness(0.9998);
}

.btn-so:active {
    border: 1px solid #ff000000;
}

.btn-so:active {
    border: 1px solid #ff000000;
}

.btn-so:focus {
    filter: brightness(0.985);
}

.btn-con {
    background-color: #ecdff1 !important;
    color: #9f64ba !important;
}

.btn-join {
    background-color: #f1eeda !important;
    color: #ad8f3df7 !important;
}

.btn-join-act {
    background-color: #bf9e43 !important;
    color: white !important;
}

.btn-so-circle {
    width: 37px !important;
    color: white !important;
}

.btn-foll-act, .btn-foll-act:focus {
    background: #757575 !important;
}

.btn-foll-act:hover {
    background: #6f6f6f !important;
}

.btn-foll {
    background-color: #e3e3e3 !important;
    color: #757575 !important;
}

.btn-dropdown {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    height: auto!important;
}
.btn-dropdown-icon {
    padding-right: 1.75rem!important;
}
.btn-con-cancel,.btn-con-act, .btn-dropdown {
    background: #9f64ba !important;
}


.btn-con-cancel:focus, .btn-con-act:focus .btn-dropdown:focus, .btn-dropdown:active {
    background: #975fb1 !important;

}

.fixed-bottom .btn-sm {
    margin-right: 15px;
    margin-left: 15px;
    min-width: 160px;
}

/* Prvky */

.slick-articles .thumbnail-zone,
.slick-articles .thumbnail-zone img {
    height: 150px !important;
}

.slick-articles h5 {
    height: 2.5rem;
    overflow: hidden;
}

.model-card-image {
    height: 500px;
    max-height: calc(85vh - 75px);
}

.series-card-image {
    transition: all 0.15s ease-in-out;
    object-fit: cover;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.slick-groups {
    max-height: 135px;
}
.slick-groups .series-card-image {
    height: 100px;
}
.slick-groups .btn-primary{
    color: #808080;
    border: 1px solid #dbd8d8!important;
    background: white;
    height: 100px;
}

@media (min-width: 776px) {
    .series-block {
        max-height: 450px;
        overflow: hidden;
    }
}

.series-card {
    width: calc(100% - 2rem);
    float: left;
    max-width: 190px;
    margin-right: 2rem;
}

.story-card {
    width: calc(100% - 2rem);
    height: 218px;
}

.series-card:hover .series-card-image {
    transition: all 0.15s ease-in-out;
    transform: scale(1.02);
}

.series-card .m-0 {
    opacity: 0;
}

.series-card:hover .m-0 {
    opacity: 1;
    color: black;
}

.card {
    border: 0 !important;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
}

.carousel-inner {
    overflow: inherit!important;
}

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    position: absolute;
    top: 0;
}

.carousel-preload {
    overflow: hidden;
}

.carousel, .carousel-item, .carousel-preload {
    height: calc(50vh + 75px);
    min-height: 500px;
    max-height: 50vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center !important;
    background-size: cover !important;
    top: 0;
}

.carousel .gradient-cover {
    background-position: center !important;
    background-size: cover !important;
}

.bg-primary {
    background: rgba(144, 71, 176, 1);
    background: linear-gradient(43deg, rgb(136 68 165) 0%, rgb(128 65 153) 100%);
}

.bg-none {
    background: #ffffff00 !important;
}

.slice article:hover .cover::after {
    opacity: 0.5;
}

.carousel-control-next {
    transform: scaleX(-1);
}

.carousel-control-next,
.carousel-control-prev {
    transition: 0.25s !important;
}

.carousel-control-prev:hover {
    left: -10px;
}

.carousel-control-next:hover {
    right: -10px;
}

.carousel-indicators {
    margin: 0;
    bottom: 0;
}

.carousel-indicators li {
    height: 4px;
    width: 50px;
    cursor: pointer;
}

.carousel-caption {
    align-content: center;
    z-index: 2;
    display: contents;
}

.carousel-project .gradient-cover {
    transition: all 0.25s ease 0s;
}

.paralax {
    background-size: cover !important;
}

.carousel-caption .project-logo {
    filter: invert(1);
    height: 6rem;
    width: auto;
    max-width: 35rem;
    transition: .1s;
}

.bg-black {
    background-color: black !important;
}

.bg-dark {
    background-color: #3e3e3e !important;
}

.bg-light {
    background-color: #f3f3f3 !important;
}

.shadow-sm {
    box-shadow: 0 2px 6px -1px #0000000a, 0 0 1px 1px #00000012 !important;
}

.card-deck .card:hover {
    box-shadow: 0 2px 12px -1px #00000014, 0 0 1px 1px #00000012;
}

/* Odsazení */
.t-nav {
    top: 74px;
}
.nav-height {
    height: 74px;
}

.height-287 {
    height: 287px;
}

.middle-icon {
    height: 36px;
    width: 36px;
}

.medium-icon {
    z-index: 1;
    width: 40px;
    height: 40px;
    padding-bottom: 0.031rem;
}

.big-icon {
    width: 42px;
    height: 42px;
}

.social-icon {
    width: 40px;
    height: 40px;
}

.social-icon img {
    opacity: 0.4;
    padding-bottom: calc(0.52rem + 1px) !important;
    padding-right: calc(0.52rem + 1px) !important;
}

.social-icon:hover {
    background: #999999;
    border-color: #999999 !important;
}

.social-icon:hover img {
    filter: invert(1);
    opacity: 1;
    transition: 0s;
    background: none;
}

.mini-icon {
    height: 24px !important;
    width: 24px !important;
}

.small-icon {
    height: 30px !important;
    width: 30px !important;
    background: #e1e1e1;
}

.small-dropdown-icon {
    margin-top: 2px;
}


.navbar-light .navbar-toggler {
    color: #797979;
    border-color: transparent;
    box-shadow: none !important;
    outline: none;
    margin: 0;
    padding: 0;
    background-color: #b3b2b2 !important;
}

.navbar-light .navbar-toggler-icon {
    background-image: url(../img/icons/menu.svg);
    filter: invert(1);
    height: 20px;
}

#model-photo {
    max-height: 400px;
}

#david {
    margin-top: calc(5rem - 21px) !important;
    max-height: 430px;
    position: absolute;
    width: auto;
    margin-left: -40px;
}

@media (max-width: 991.98px) {
    #david,
    #model-photo {
        display: none !important;
    }
        .navbar-nav .sub-text {
            padding-left: 0;
            padding-right: 0;
            padding-top: 1.25rem;
            padding-bottom: 1.25rem;
        }

    }


.text-description {
    font-size: 9pt;
    color: #616161 !important;
}

.text-description a:hover {
    text-decoration: underline;
}

.action small:hover, .text-underline-hover:hover {
    text-decoration: underline !important;
}

/* formuláře */

.border-md {
    border-width: 2px;
}

.custom-select {
    padding: 14px;
    border: 1px solid #e3e3e3;
    font-size: 14px;
    height: 51px;
}

.form-control {
    padding: 14px;
    color: #000 !important;
    border: 1px solid #dfdfdf;
    font-weight: 500;
    font-size: 14px;
    resize: none;
    line-height: 19px;
}

select.form-control {
    height: 52px;
    padding-left: 0.5rem;
}

.form-control::placeholder {
    color: #797979;
    font-weight: 500;
}

.slick-series {
    overflow: hidden;
}

.side-app {
    min-width: 290px;
}

.connection-options-bar {
    display: inline-flex;
    flex: auto!important;
}
@media (max-width: 991.98px) {

    .match-action {
        margin-top: 1rem!important;
    }
    .dropdown-menu.show {
        border-radius: 0;
        width: 100%;
        position: fixed !important;
        bottom: 0;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        background: white;
        border: none;
        padding: 20px;
        padding-bottom: 14px;
        -webkit-box-shadow: 0px 0px 0px 200vh rgb(0 0 0 / 80%);
        -moz-box-shadow: 0px 0px 0px 200vh rgb(0 0 0 / 80%);
    }

    .dropdown-menu.show li {
        background: white;
        padding-top: 2px;
        line-height: 32px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        margin-bottom: 4px;
        overflow: hidden;
    }

    .list-group-request li {
        min-height: 58px;
    }

    .side-hider {
        display: none;
    }
}

.mini-icon-heart {
    padding-top: 1px !important;
    padding-bottom: 2px !important;
}

.interaction .btn, .interaction-active .btn {
    border-radius: 22px;
}

.comment-bar {
    overflow-y: scroll;
    scrollbar-width: 0.8rem !important;
}

.comment-bar #comment-upload input {
    width: calc(100% - 1.5rem - 40px);
    float: right;
    margin-right: 0.5rem;
}

.comment-bar #comment-feed .form-check {
    margin-left: 1rem;
    margin-right: -1.6rem;
}

.comment-bar .comments-list .col-sm-1, .comments-highlight .col-sm-1 {
    width: 40px;
    margin-left: .5rem;
}

.comment-bar .comments-list .col-sm-11, .comments-highlight .col-sm-11 {
    max-width: calc(100% - 4rem);
    margin-left: 0.5rem;
}

#comment-feed .form-check {
    padding-left: 1.75rem;
    margin-right: -1.5rem;
    margin-top: .05rem;
}

@media (max-width: 775px) {
    .carousel .mobile-hide {
        display: none!important;
    }
    .img-profile {
        margin: auto;
    }
    .profile-bar {
        margin: auto;
        display: table !important;
        width: 100%;
    }
    .text-profile {
        text-align: center !important;
        position: absolute;
        width: 100%;
        padding-top: 0 !important;
        margin: 0 !important;
        margin-top: -1rem !important;
    }

    .profile-img-upload {
        margin-top: 0;
    }
    .carousel-text {
        padding: 1rem;
        max-height: 100%;
        height: 100%;
    }
    .carousel-text .row {
        padding-left: 0;
    }
    .carousel-text .intro {
        margin-left: 0 !important;
    }

    .post .dropdown .dropdown-toggle {
        height: 40px;
        width: 40px;
        line-height: 4px;
    }

    .interaction img, .interaction-active img {
        margin-right: 0 !important;
        padding: 0.02rem;
    }

    .mini-icon-heart {
        padding-top: 2px !important;
        padding-bottom: 1px !important;
    }

    .interaction .btn, .interaction-active .btn {
        padding: 9px !important;
        padding-top: 8px !important;
        height: 43px;
        padding-right: 0.55rem !important;
    }

    #comment-upload input {
        width: calc(100% - 1.5rem - 40px);
        float: right;
        margin-right: 0.5rem;
    }

    #comment-feed .headings {
        margin-left: .75rem !important;
        margin-right: .75rem !important;
    }

    #comment-feed {
        margin: 0.5rem;
    }

    #comment-upload img {
        margin-left: 0.5rem;
    }

    .comments-list .col-sm-1, .comments-highlight .col-sm-1 {
        width: 40px;
        margin-left: .5rem;
    }

    .comments-list .col-sm-11, .comments-highlight .col-sm-11 {
        max-width: calc(100% - 4rem);
        margin-left: 0.5rem;
    }

    .reply-list:before, .comments-list:before, .comments-list:after {
        display: none !important;
    }

    .container {
        max-width: 540px;
    }

    .series-container .slick-series {
        border-bottom: 3rem solid white;
        transition: 0s;
    }

    .slick-series .slick-track {
        width: 100% !important;
        transform: inherit !important;
        transition-timing-function: ease !important;
    }

    .slick-series .slick-list {
        height: calc(85vw - 5px);
        transition: 0s;
        max-height: 458px;
    }

    .series-card .m-0 {
        opacity: 0 !important;
        height: 19.2px !important;
        display: table-caption;
    }

    .slick-series .slick-slide {
        width: 33.33% !important;
    }

    .carousel-caption .project-logo {
        max-width: calc(100vw - 150px);
        min-width: 80%;
    }
}

.not-draggable {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.form-control:focus, .custom-select:focus {
    border-color: #e4e4e4;
    box-shadow: 0 0 0 1px rgb(228 228 228);
}

button:focus {
    outline: none !important;
    transition: 0s;
}

.btn.focus,
.btn:focus {
    box-shadow: none;
}

.scaleable:hover {
    transition: all 0.15s ease-in-out;
    border-color: #cfcfcf !important;
    cursor: pointer;
}

.hoverable {
    font-size: 1rem;
    transition: 0.2s !important;
}

.hoverable:hover {
    background-color: #ebeaea !important;
    border-color: #ebeaea !important;
}

.card-dark .hoverable:hover {
    background-color: #00000033 !important;
    border-color: #00000000 !important;
}

.hoverable-border {
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    transition: 0s;
}

.hoverable-border:hover {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.hoverable:active {
    background-color: #e4e4e4 !important;
    border-color: #e4e4e4 !important;
}

.text-danger {
    color: #dc3545 !important;
    font-size: 80%;
}

.custom-select.is-invalid,
.form-control.is-invalid,
.was-validated .custom-select:invalid,
.was-validated .form-control:invalid {
    border: 2px solid #dc354580;
    transition: 0s;
}

.custom-select.is-invalid:focus,
.form-control.is-invalid:focus,
.was-validated .custom-select:invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: #dc3545;
    box-shadow: none;
}

.custom-select.is-valid,
.form-control.is-valid,
.was-validated .custom-select:valid,
.was-validated .form-control:valid {
    border: 2px solid #28a74580;
}

.custom-select.is-valid:focus,
.form-control.is-valid:focus,
.was-validated .custom-select:valid:focus,
.was-validated .form-control:valid:focus {
    border-color: #5ebd74;
    box-shadow: none;
}

.btn-primary.focus,
.btn-primary:focus {
    box-shadow: 0 0 0 1px #d6d6d680;
}

.btn-group-lg > .btn, .btn-lg {
    padding: 0.5rem 0.8rem;
}

/* About */

.qna-blocks .card {
    min-height: 250px;
    max-height: 250px;
    margin-bottom: 30px;
    overflow: hidden;
}

@media (min-width: 992px) {
    .qna-blocks .card {
        min-height: 200px;
        max-height: 200px;
        margin-bottom: 30px;
    }
}

.bg-gray {
    background: #797979 !important;
}

.bg-dark-transparent {
    background-color: rgb(0 0 0 / 25%) !important;
}

.bg-dark-transparent:hover {
    background-color: rgb(0 0 0 / 30%) !important;
}

.gallery-caption .project-logo {
    filter: invert(1);
    height: 3rem;
    width: 18rem;
    max-width: 100%;
    margin: auto;
}

.img-contain {
    object-fit: contain;
}

.img-cover {
    object-fit: cover;
}

.project-photos img {
    height: 250px;
    width: 100%;
    object-position: left bottom;
}

.overflow-hidden {
    overflow: hidden;
}

.post iframe,
.action iframe {
    width: 100%;
    border-radius: 0.5rem !important;
}

.form-btn {
    font-size: 15px !important;
    line-height: 1.6rem;
    border: none !important;
    border-radius: 2rem;
    height: 36.5px;
    max-width: 180px;
    box-shadow: none !important;
}

.bg-purple-important {
    background-color: #9c57ba !important;
}

.event-name {
    overflow: hidden;
    height: 24px;
    display: block;
}

.page-link {
    border: 1px solid #ffffff00;
    color: #5b5b5b !important;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 4px !important;
    font-size: 15px;
    line-height: 23px;
    text-align: center;
    margin-left: 2px;
    margin-right: 2px;
    background: #ffffff00;
    padding-left: 0.67rem;
}

.page-arrow a {
    border: 1px solid #e4e4e4;
    background: #e4e4e4;
    transition: 0.2s;
}

.page-arrow a:hover {
    border: 1px solid #dfdfdf;
    background: #dfdfdf;
}

.page-item.active .page-link {
    border-color: #e4e4e4;
    font-weight: 500;
    color: #000000 !important;
    background: #e4e4e4;
    transition: 0.2s;
}

.page-item.disabled .page-link {
    background-color: #fff0;
    border-color: #ffffff00;
    font-weight: 500;
}

.page-link:hover {
    border: 1px solid #e4e4e400;
    background: #e4e4e480;
}

.page-link:focus {
    border-color: #e4e4e408;
    background: #e4e4e480;
    box-shadow: 0 0 0 1px #e4e4e400;
}

.arrow-symbol {
    height: 100%;
    width: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='black' d='M209.4,500c0-17.9,6.8-35.8,20.5-49.5L659.8,20.7c27.4-27.3,71.7-27.3,99,0c27.3,27.3,27.3,71.7,0,99 L378.5,500l380.4,380.3c27.3,27.3,27.3,71.7,0,99c-27.3,27.3-71.7,27.3-99,0L230,549.5C216.4,535.8,209.5,518,209.4,500z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.arrow-link {
    margin-right: 0.4rem;
    margin-left: 0.6rem;
}
@media (min-height: 600px) {

    .md-close {
        width: 32px;
        height: 32px;
        z-index: 1051;
        cursor: pointer;
        top: 2.25rem;
        right: 3rem;
        pointer-events: none;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xNy40NTksMTYuMDE0bDguMjM5LTguMTk0YzAuMzk1LTAuMzkxLDAuMzk1LTEuMDI0LDAtMS40MTRjLTAuMzk0LTAuMzkxLTEuMDM0LTAuMzkxLTEuNDI4LDAgIGwtOC4yMzIsOC4xODdMNy43Myw2LjI4NGMtMC4zOTQtMC4zOTUtMS4wMzQtMC4zOTUtMS40MjgsMGMtMC4zOTQsMC4zOTYtMC4zOTQsMS4wMzcsMCwxLjQzMmw4LjMwMiw4LjMwM2wtOC4zMzIsOC4yODYgIGMtMC4zOTQsMC4zOTEtMC4zOTQsMS4wMjQsMCwxLjQxNGMwLjM5NCwwLjM5MSwxLjAzNCwwLjM5MSwxLjQyOCwwbDguMzI1LTguMjc5bDguMjc1LDguMjc2YzAuMzk0LDAuMzk1LDEuMDM0LDAuMzk1LDEuNDI4LDAgIGMwLjM5NC0wLjM5NiwwLjM5NC0xLjAzNywwLTEuNDMyTDE3LjQ1OSwxNi4wMTR6IiBmaWxsPSIjZmZmZmZmIiBpZD0iQ2xvc2UiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=);
    }

}
@media (max-height: 599px) and (min-width: 720px) {
    .md-close {
        width: 32px;
        height: 32px;
        z-index: 1051;
        cursor: pointer;
        top: 2.25rem;
        right: 3rem;
        pointer-events: none;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xNy40NTksMTYuMDE0bDguMjM5LTguMTk0YzAuMzk1LTAuMzkxLDAuMzk1LTEuMDI0LDAtMS40MTRjLTAuMzk0LTAuMzkxLTEuMDM0LTAuMzkxLTEuNDI4LDAgIGwtOC4yMzIsOC4xODdMNy43Myw2LjI4NGMtMC4zOTQtMC4zOTUtMS4wMzQtMC4zOTUtMS40MjgsMGMtMC4zOTQsMC4zOTYtMC4zOTQsMS4wMzcsMCwxLjQzMmw4LjMwMiw4LjMwM2wtOC4zMzIsOC4yODYgIGMtMC4zOTQsMC4zOTEtMC4zOTQsMS4wMjQsMCwxLjQxNGMwLjM5NCwwLjM5MSwxLjAzNCwwLjM5MSwxLjQyOCwwbDguMzI1LTguMjc5bDguMjc1LDguMjc2YzAuMzk0LDAuMzk1LDEuMDM0LDAuMzk1LDEuNDI4LDAgIGMwLjM5NC0wLjM5NiwwLjM5NC0xLjAzNywwLTEuNDMyTDE3LjQ1OSwxNi4wMTR6IiBmaWxsPSIjZmZmZmZmIiBpZD0iQ2xvc2UiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=);
    }

}

@media (max-width: 575px) {

    .mobile-hide {
        display: none;
    }
    .slide .carousel-item {
        background-size: 250rem!important;
    }
    .slide .gradient-cover  {
        background-size: cover !important;
        background-position: center center;
    }
    #modal-login .modal-body {
        width: 100%!important;
        margin: auto!important;
    }
}

.banner .gradient-cover {
    transition: transform 0.1s ease-out;
}

.gradient-cover .bg-dark-transparent {
    -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff80;
    -moz-box-shadow: inset 0px 0px 0px 1px #ffffff80;
    box-shadow: inset 0px 0px 0px 1px #ffffff80;
    background: transparent;
}

.project-logo {
    transition: transform 0.1s ease-out;
}

.gradient-cover::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #000000bf 0%, #41519000 75%, #0000001a 100%);
    transition: 0.28s;
    z-index: 1;
}

.carousel-inner .gradient-cover::after {
    background: linear-gradient(0deg, #00000080 0%, #0000001c 25%, #00000000 90%, #00000026 100%);
}

.gradient-cover-text::after{
    background: linear-gradient(0deg, #000000d9 5%, #00000033 75%, #0000000d 100%);
}

.carousel-project .gradient-cover::after {
    background: linear-gradient(0deg, #000000d9 0%, #000000bf 15%, #00000059 50%, #00000026 75%, #00000000 100%);
}
#top-button {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #151515;
    color: white;
    cursor: pointer;
    padding: 15px;
    width: 44px !important;
    height: 44px !important;
    padding-top: 12px !important;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    color: white;
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

#scrollUp {
    z-index: 999 !important;
    bottom: 30px;
    right: 30px;
    background-color: #b3b2b2;
    width: 40px;
    height: 40px;
    position: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Vrstva_1' x='0px' y='0px' viewBox='0 0 1000 1000' style='enable-background:new 0 0 1000 1000;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M548.5,240.8l421.4,421.4c26.8,26.8,26.8,70.3,0,97.1c-26.8,26.8-70.3,26.8-97.1,0L500,386.4L127.2,759.2 c-26.8,26.8-70.3,26.8-97.1,0s-26.8-70.2,0-97.1l421.4-421.4c13.4-13.4,31-20.1,48.5-20.1C517.6,220.7,535.1,227.4,548.5,240.8z'/%3E%3C/g%3E%3C/svg%3E")
}

.ui-circle {
    border-radius: 50%;
    line-height: 60px;
    width: 60px;
    height: 60px;
    border: 0;
    background: #FFFFFF;
    display: inline-block;
}

.problem-alert {
    max-height: 31px
}

.container-full-height {
    display: table;
    width: 100%;
    height: calc(100vh - 75px);
}

.container-alert {
    display: table-cell;
    vertical-align: middle;
}

.page-info-box {
    margin-top: -2rem;
    z-index: 10;
}

.breadcrumb-content {
    margin-bottom: -48px;
    opacity: 0;
}

.breadcrumb, .breadcrumb-content {
    background-color: #e1dede;
}

.breadcrumb-content:hover {
    opacity: 1;
}

.breadcrumb-item.active {
    cursor: pointer;
    color: #262626;
    font-weight: 500;
}

#progress-container-el {
    background-color: transparent !important;
    top: calc(100% - 4px) !important; /* remove if Vue 3.x */
}

.spinner-grow {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    -webkit-animation: spinner-grow .75s linear infinite;
    animation: spinner-grow .75s linear infinite;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.post-control {
    border-radius: 42px;
    height: 42px;
}

.post-comment {
    word-break: break-all;
    border-radius: 20px;
    min-height: 42px;
    border: 1px solid #ebeaeaa8;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 400;
}

.comment-selected {
    box-shadow: 0 0 0px 1px #e0e0e0;
}

.modal-title {
    padding-top: 1.1rem;
}

.profile-image-main {
    height: 120px !important;
    width: 120px !important;
}

.head-index {
    padding: 0.2rem;
}

.camera-icon {
    margin-top: 0.35rem;
}

.border-red {
    border: 3px solid rgb(176 32 28 / 85%);
    box-shadow: 0 0 0 0.025rem #b0201c !important;
}

.border-purple {
    border: 3px solid rgb(154 81 188 / 85%);
    box-shadow: 0 0 0 0.025rem #9a51bc !important;
}

.border-white {
    border: 3px solid white;
    box-shadow: 0 0 0 0.025rem white !important;
}

.min-visibility {
    border-left: 1px solid rgba(211, 211, 211, 0.63);
    padding-left: 10px;
    margin-left: 10px;
}

.browser .custom-control-label {
    height: 175px;
    width: 180px;
    position: absolute;
    left: 0;
    z-index: 3;
}

.image-hover .gradient-hover {
    opacity: 0;
    top: 0;
    height: calc(100% - 1rem);
    width: calc(100% - 1rem);
}

.image-hover:hover .gradient-hover {
    opacity: 1;
    z-index: 1;
    position: absolute;
    background: linear-gradient(0deg, #000000bf 0%, #00000040 100%);
}

.input-cleaner, .b-form-tags.focus {
    border: 0;
    box-shadow: none;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #9a51bc !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff;
}

.custom-control-input:active ~ .custom-control-label::before {
    background-color: #e4e4e4;
}

.browser .custom-control-label::before, .custom-control-label::after {
    transform: scale(1.3);
    left: 0;
    top: 2px;
    border-radius: 100%;
}

.modal-title img {
    margin-bottom: 1px;
}

.upload-box img, .upload-box strong {
    opacity: 0.5 !important;
    transition: 0s !important;
}

.upload-box:hover img, .upload-box:hover strong {
    opacity: 1 !important;
}

.dropdown-item {
    margin-left: 4px;
    margin-right: 4px;
    width: calc(100% - 8px);
    border-radius: 4px;
    border: 1px solid #ff000000;
}

.dropdown-item:hover {
    background-color: #f1f1f1;
}

.dropdown-item.active, .dropdown-item:active {
    color: #030302;
    background-color: #f1f1f1;
}

.dropdown-menu {
    border: 1px solid rgb(0 0 0 / 8%);
    box-shadow: 0 2px 6px -1px #0000000a, 0 0 1px 1px #00000003;
}

.border-drop-btn {
    background-color: white !important;
    padding-top: 0.328rem;
    padding-bottom: 0.328rem;
}

.btn:first-child:hover, :not(.btn-check) + .btn:hover, .btn:first-child:active {
    background-color: #d6d4d4;
}

.b-dropdown .btn-secondary:focus {
    box-shadow: none !important;
}

.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
    color: #000;
    background-color: #f3f3f3;
    border-color: #e3e3e3cc;
}

.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 1px #75757503;
}

.btn-secondary:focus {
    box-shadow: 0 0 0 1px #75757500;
}

.btn:active {
    box-shadow: 0 0 0 1px #75757514;
}

.btn {
    transition: .15s ease-in-out!important;
}


.collapse .medium-icon {
    z-index: 2;
}


.comments-list:before {
    content: '';
    width: 1px;
    height: calc(100% - 105px);
    margin-top: 50px;
    background: #e3e3e3;
    position: absolute;
    left: 2.15rem;
    top: 0;
}

.comments-list:after {
    content: '';
    position: absolute;
    background: #c7cacb;
    bottom: 50px;
    left: 1.95rem;
    width: 7px;
    height: 7px;
    border: 1px solid #c7cacb;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.reply-list:before {
    content: '';
    width: 50px;
    height: 1px;
    background: #e3e3e3;
    position: absolute;
    top: 19px;
    left: calc(1rem - 5.9999%);
}

.preview {
    object-fit: cover;
    height: 266px !important;
}

.image-preview {
    margin-top: calc(-267px - 1rem);
    border-radius: 5px;
    margin-bottom: 17px;
    overflow: hidden;
}

.form-upload {
    background: #00000000;
}

.image-preview .preview {
    z-index: 0;
    position: relative;
}

.file-upload-form input {
    cursor: pointer;
}

.image-upload-form {
    background: #e4e4e4;
    border-radius: 100%;
    padding: 9px;
    transform: scale(0.63);
    margin: 5px;
}

.no-caret .dropdown-toggle {
    background: none !important;
    color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.tab-content .border-0 .nav-link {
    border: 0;
    padding: 0;
}

.tab-content .border-0 .nav-item .sub-text {
    opacity: 0;
    min-width: 25px;
}

.tab-content .border-0 .nav-item .active .sub-text {
    opacity: 1;
    margin-right: 1rem !important;
}

.card-dark {
    font-weight: 400 !important;
    max-width: 525px;
    background-color: #00000080;
}

.sub-transparent-text {
    opacity: 0.75;
}
.play-button {
    padding: 0.75rem
}

#modal-login .modal-body {
    padding: 0;
    width: 600px;
    height: 400px;
    margin-left: -60px;
}
.textbar {
    padding-top: .6rem;
    height: 40px;
    border-radius: 20px;
    overflow: hidden;
    padding-right: 2.75rem !important;
}
.nav-textbar {
    background-color: #b3b2b2;
}
.nav-textbar {
    min-width: 40px;
}
.nav-textbar input{
    font-weight: 400;
    background: #e3e3e3 !important;
    border-radius: 40px;
    width: 40px;
    height: 40px !important;
    margin-right: 0;
    transition: .5s;
    transition-timing-function: ease-in-out;
    z-index: 1;
}
.nav-textbar input::placeholder {
    opacity: 0;
}

.nav-textbar .nav-textbar-icon {
    pointer-events: none;
    transform: scale(0.9);
    position: absolute;
    margin-left: -2.2rem;
    margin-top: .5rem;
}

.nav-textbar input:focus {
    width: 20rem;
    outline: none;
}
.nav-textbar input:focus::placeholder {
    opacity: 1;
}

.search-content {
    min-width: 20rem;
    border: 1px solid rgb(0 0 0 / 8%);
    box-shadow: 0 2px 6px -1px #0000000a, 0 0 1px 1px #00000003;
    opacity: 0;
    display: none;
}
.break-spaces {
    white-space: break-spaces;
}

.search-content{
    opacity: 1;
    display: block;
}

.user-name {
    line-height: 1rem;
    padding-top: 0.5rem;
}

.user-sub {
    line-height: 1.4rem;
}

.tagline {
    display: block;
    margin-bottom: 5rem;
}

.carousel-control-next, .carousel-control-prev {
    margin-bottom: 5rem;
    padding-top: 5rem;
    height: calc(100% - 5rem);
}

.list-group-whisperer {
    z-index: 10;
    position: absolute;
    width: calc(100% - 30px);
}

.list-group-item {
    padding: 14px;
}

@media (max-width: 370px) {
    .navbar-search {
    display: none!important;

    }
}


.btn-block:not(.bg-white) {
    position: relative !important;
    overflow: hidden !important;
    --ripple-size: 0%;
    background-image:
            radial-gradient(
                    circle,
                    rgba(255,255,255,0.2) 0%,
                    rgba(255,255,255,0.2) 50%,
                    transparent 51%
            ) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: var(--ripple-size) var(--ripple-size) !important;
    transition:
            background-size 0.6s ease-out, transform .15s ease-in-out,
box-shadow     .15s ease-in-out !important;
}

.btn-block:not(.bg-white):hover,
.btn-block:not(.bg-white):focus {
    transform: scale(.98) !important;
    outline: none !important;
    text-decoration: none !important;
}

.btn-block:not(.bg-white):active {
    --ripple-size: 200% !important;
    transform: scale(.95) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2) !important;
}

.btn-block:not(.bg-white) > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Progressive background loading */
.progressive-bg {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    --progressive-preview-blur: blur(18px);
    --progressive-loaded-blur: blur(0);
}

.progressive-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: inherit;
    background-position: inherit;
    background-repeat: inherit;
    background-size: inherit;
    filter: var(--progressive-preview-blur);
    transition: filter .4s ease, opacity .3s ease;
    pointer-events: none;
    will-change: filter, opacity;
}

.progressive-bg.progressive-bg--loaded::before {
    filter: var(--progressive-loaded-blur);
    opacity: 0;
}

.progressive-bg.progressive-bg--preview {
    filter: var(--progressive-preview-blur);
    transition: filter .4s ease;
}

.progressive-bg.progressive-bg--loaded {
    filter: var(--progressive-loaded-blur);
}

.progressive-bg.progressive-bg--error::before {
    opacity: 0.5;
}

/* Hide content until Vue loads */
[v-cloak] {
    display: none !important;
}

.vue-skeleton {
    background: #e8e8e8;
    background: linear-gradient(90deg, #e8e8e8 30%, #e8e8e8 25%, #d0d0d0 50%, #d0d0d0 60%, #e8e8e8 70%);
    background-size: 400% 100%;
    animation: skeleton 1.4s ease infinite;
    opacity: 0.75;
    filter: grayscale(1);
    transition: opacity 1s ease, filter 1s ease, background 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    outline: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
}