:root {
    --white: #ffffff;
    --white-dark: rgba(250,250,250,1);
    --black: rgba(0, 0, 0, 1);
    --primary: #343a40;
    --primary-dark: #2a2e32;
    --primary-light: #3d4247;
    --secondary: #1a4781;
    --grey: rgb(193, 193, 193);
    --grey-light: rgb(230, 230, 230);
    --grey-dark: rgb(127, 127, 127);
}

html,body {
    font-family: "Cormorant", serif;
    font-size: 22px;
}
@media (max-width: 600px){
    html,body {
        font-size: 18px;
    }
    h1 {font-size: 1.5rem;}
    h2 {font-size: 1.4rem;}
    h3 {font-size: 1.3rem;}
    h4 {font-size: 1.2rem;}
    h5 {font-size: 1.1rem;}
    h6 {font-size: 1.0rem;}
}
a {color: var(--primary);text-decoration: none;}
a:hover {color: var(--primary-light);}


.element-animation {opacity: 0;transform: translateY(2rem);}
.element-animation.element-show {opacity: 1;transition: all 1s;transform: translateY(0%);}
.element-animation.top {opacity: 0;transform: translateY(-2rem);}
.element-animation.top.element-show {opacity: 1;transition: all 1s;transform: translateY(0%);}
.element-animation.left {opacity: 0;transform: translateX(-2rem);}
.element-animation.left.element-show {opacity: 1;transition: all 1s;transform: translateX(0%);}
.element-animation.right {opacity: 0;transform: translateX(2rem);}
.element-animation.right.element-show {opacity: 1;transition: all 1s;transform: translateX(0%);}

.white {color: var(--white) !important;}
.white-dark {color: var(--white-dark) !important;}
.black {color: var(--black) !important;}
.primary {color: var(--primary);}
.secondary {color: var(--secondary) !important;}
.grey {color: var(--grey) !important;}
.grey-light {color: var(--grey-light) !important;}

.bg-white {background-color: var(--white) !important;}
.bg-black {background-color: var(--dark) !important;}
.bg-primary {background-color: var(--primary) !important;}
.bg-secondary {background-color: var(--secondary) !important;}
.bg-grey {background-color: var(--grey) !important;}
.bg-grey-light {background-color: var(--grey-light) !important;}

.btn-primary {background-color: var(--primary) !important;border-color: var(--primary) !important;outline: none !important;border: 0 !important;box-shadow: none !important;}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {color: var(--white) !important;background-color: var(--primary-light) !important;border-color: var(--primary-light) !important;outline: none !important;border: 0 !important;box-shadow: none !important;}

#mainErrors,
#mainSuccess {z-index: 100500;width: fit-content;margin-top: 0.5rem;}

.background-image {background-size: cover;background-position: center;background-repeat: no-repeat;background-image: url("/img/no-image.jpg")}
.background-image.contain {background-size: contain;}
.text-smaller,.text-small,.small {font-size: 0.8rem !important;}

.navbar .nav-link {color: var(--white);}

.main-container {width: 980px;margin: 0 auto;padding: 0 1rem;}
.main-container>.container-fluid {padding: 0;}
@media (max-width: 980px) {.main-container {width: 100%;}}

.pagination {margin: 1rem 0;}
.pagination .page-item .page-link {color: var(--grey-dark);}
.pagination .page-item.active .page-link {background-color: var(--primary-light);border-color:var(--primary);color: var(--white);}

.app-breadcrumb {padding: 0.5rem 0;margin-bottom: 1rem;font-size: 0.8rem;font-style: italic;border-bottom: 1px solid var(--grey-light)}
.app-breadcrumb a {color: var(--grey-dark);}
.app-breadcrumb a:hover {color: var(--grey-dark);text-decoration: none;}
.app-breadcrumb a:after {font-family: 'FontAwesome', serif;content: '\f101';margin-left: 0.3rem;}
.app-breadcrumb a:last-child:after {content: '';}

.like {}
.like.active {color: var(--primary-light);}
.dislike.active {color: var(--primary-light);}

.comments-container {}
.comments-container .comment {/*border-top: 1px solid var(--grey-light);*/margin-top: 0.5rem;}
.comments-container .comment-list>div>.comment:first-child {/*border-top: 0 solid var(--grey);*/}
.comments-container .comment-title {padding: 0.3rem 0.5rem 0.2rem 0.5rem;font-size: 0.8rem;}
.comments-container .comment-title .comment-user {font-style: italic;font-weight: bold;}
.comments-container .comment-title .comment-date {color: var(--grey-dark);font-style: italic;font-size: 0.7rem;margin-left: 1rem;}
.comments-container .comment-text {padding: 0 0.5rem;font-size: 0.8rem;white-space: pre-line;/*max-height: 8rem;overflow-x: auto;*/}
.comments-container .comment-likes {padding: 0 0.55rem;font-size: 0.8rem;margin-top:0.5rem;}
.comments-container .comment-answer-block {padding: 0 1rem;margin-top:0.5rem;font-size: 0.8rem;}
.comments-container .comment-replay-link {cursor: pointer;color: var(--primary);font-weight: bold;}

.comments-container .comment-children {margin-left: 1rem;}
.comments-container .comment .comment-body {border-left: 3px solid var(--primary);background-color: var(--white-dark);}
.comments-container .comment.disabled .comment-body {opacity: 0.8;background-color: var(--grey-light);border-left-width: 0;}
.comments-container .comment.trashed .comment-body {opacity: 0.8;background-color: var(--white-dark);border-left: 3px solid var(--grey);}


.article-columns-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.article-columns {
    -webkit-column-count: 3; /*Выставляем кол-во колонок*/
    -moz-column-count: 3; /*Выставляем кол-во колонок*/
    column-count: 3; /*Выставляем кол-во колонок*/
    -webkit-column-gap: 15px; /*Отступы между колонками*/
    -moz-column-gap: 15px; /*Отступы между колонками*/
    column-gap: 15px; /*Отступы между колонками*/
    orphans: 1; /*минимальное число строк в блочном контейнере*/
    widows: 1; /*минимальное количество линий на странице*/
}

.card {
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: 100%;

    word-wrap: break-word;
    border-radius: 8px;
    margin-bottom: 10px;
}

.card-reveal .card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 2;
    height: 100%;
    bottom: -100%;
    -webkit-transition: bottom .2s ease-in-out;
    transition: bottom .2s ease-in-out;
}

.card-reveal .card-img-top {
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}

.card-reveal:hover .card-body {bottom: 0;background-color: rgba(0, 0, 0, 0.5);}
.card-reveal:hover .card-img-top {-webkit-transform: scale(1.3);transform: scale(1.3);}
.card-reveal .card-body .card-title {font-size: 1rem;margin: 0;font-weight: bolder;color: #fff;}

@media (max-width: 768px) {
    .article-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}
@media (max-width: 500px) {
    .article-columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}