@import "reset.css";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
    /* COLORS */
    --lightest-blue: #EBF2F9;
    --white: #ffffff;
    --danger-color: #FF3F3F;
    --info-color: #a2dde4;
    --warning-color: #ffc31f;
    --success-color: #66be4f;
    --secondary-blue: #1963EF;
    --primary-blue: #0D2B69;
    --primary-orange: #FF3F3F;
    --lightest-gray: #f4f4f4;
    --light-gray: #ddd;
    --medium-gray: #777;
    --gray: #434343;
    --black: #000;

    /* CONTAINER */
    --container-width: 1400px;

    /* FONT SIZE */
    --h1-size: 30px;
    --h2-size: 24px;
    --h3-size: 20px;
    --h4-size: 16px;
    --normal-font-size: 14px;
    --small-font-size: 12px;
    --xs-font-size: 11px;

    /* SPACING */
    --gutter: 20px;
    --gutter-half: 10px;
    --gutter-fourth: 5px;

    /* BORDER */
    --border-radius: 4px;
}

/***************************
 * GENERAL
 **************************/
body {
    font-family: 'Inter', sans-serif;
    font-size: var(--normal-font-size);
    background: var(--lightest-blue);
    margin: 0;
    padding: 0;
    height: 100%;
    color: var(--medium-gray);
}

a {
    color: var(--primary-blue);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--primary-orange);
}

em {
    font-style: italic;
}

h1, h2, h3, h4,
h1 a, h2 a, h3 a, h4 a {
    color: var(--black);
    font-weight: bold;
}

h1 {
    font-size: var(--h1-size);
}

h2 {
    font-size: var(--h2-size);
}

h3 {
    font-size: var(--h3-size);
}

h4 {
    font-size: var(--h4-size);
}

/***************************
 * HELPER CLASS
 **************************/

.container {
    max-width: var(--container-width);
    margin: auto;
    padding: 0 var(--gutter);
}

.mb-1 {
    margin-bottom: var(--gutter-fourth);
}

.mb-3 {
    margin-bottom: var(--gutter-half);
}

.mb-6 {
    margin-bottom: var(--gutter);
}

.panel {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: var(--gutter);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.panel ul {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-fourth);
}

.space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/***************************
 * ALERT
 **************************/

.alert {
    display: block;
    border-radius: var(--border-radius);
    padding: var(--gutter-half);
    font-size: var(--normal-font-size);
}

.alert.alert-danger {
    color: var(--white);
    background: var(--danger-color);
}

.alert.alert-success {
    color: var(--white);
    background: var(--success-color);
}

.alert.alert-info {
    background: var(--info-color);
}

.alert.alert-warning {
    background: var(--warning-color);
}

/***************************
 * FORMS
 **************************/

.form-inline {
    display: flex;
    gap: var(--gutter-fourth);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-fourth);
}

.form-control {
    font-family: 'Inter', sans-serif;
    background: var(--white);
    border-radius: var(--border-radius);
    padding: var(--gutter-half);
    border: 1px solid var(--lightest-blue);
    outline: none;
    color: var(--medium-gray);
    font-size: var(--normal-font-size);
    display: block;
}

.form-control.full {
    width: 100%;
}

.form-control:focus {
    border: 1px solid var(--primary-orange);
}

.form-control::placeholder {
    color: var(--light-gray);
}

.btn {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    border-radius: var(--border-radius);
    padding: var(--gutter-half);
    border: none;
    outline: none;
    cursor: pointer;
    font-size: var(--normal-font-size);
}

.btn:hover {
    opacity: .8;
}

.btn.btn-sm {
    padding: var(--gutter-fourth) var(--gutter-half);
    font-size: var(--small-font-size);
}

.btn.btn-default {
    color: var(--white);
    background: var(--primary-orange);
}

.btn.btn-danger {
    color: var(--white);
    background: var(--danger-color);
}

.btn.btn-success {
    color: var(--white);
    background: var(--success-color);
}

.btn.btn-info {
    color: var(--white);
    background: var(--info-color);
}

.btn.btn-warning {
    color: var(--white);
    background: var(--warning-color);
}

/***************************
 * BREADCRUMB
 **************************/

.breadcrumb-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gutter) 0;
}

.breadcrumb ul {
    display: flex;
}

.breadcrumb ul li:not(:last-child) {
    position: relative;
}

.breadcrumb ul li:not(:last-child)::after {
    content: '>';
    padding: var(--gutter-fourth);
    opacity: .5;
}

/***************************
 * FONT-SIZE
 **************************/

.font-size {
    display: flex;
    gap: var(--gutter-fourth);
    align-items: center;
}

.font-size .label {
}

.font-size .font {
    padding: var(--gutter-fourth);
    background: var(--white);
    font-size: var(--small-font-size);
    border-radius: var(--border-radius);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

/***************************
 * HEADER
 **************************/

header {
    color: var(--white);
    background: var(--primary-blue);
    background: linear-gradient(0deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    padding: 10px 0;
}

header .navbar-brand img {
    max-width: 300px;
    position: relative;
    top: -10px
}

header .contacts {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-half);
    align-content: flex-end;
    align-items: flex-end;
}

header .contacts a {
    color: var(--white);
    opacity: .5;
}

header .contacts a:hover,
header .contacts a:focus {
    color: var(--white);
    opacity: 1;
}

header .hamburger {
    display: none;
}

/***************************
 * NAV
 **************************/

nav {
    background: var(--white);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

nav .nav__list {
    padding: var(--gutter) 0;
    display: flex;
    gap: var(--gutter);
}

nav .nav__list li {

}

nav .nav__list li.current_page_item a {
    color: var(--primary-orange);
    font-weight: bold;
}

nav .nav__list li a[data-toggle] {
    position: relative;
}

nav .nav__list li a[data-toggle]:after {
    font: normal normal normal 12px/1 FontAwesome;
    font-size: var(--xs-font-size);
    text-rendering: auto;
    content: "\f107";
}

nav .nav__list li .nav__dropdown-collapse {
    display: none;
    position: absolute;
    flex-direction: column;
    gap: var(--gutter-fourth);
    background: var(--white);
    padding: var(--gutter);
    margin-top: var(--gutter-half);
    border-radius: var(--border-radius);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    min-width: 150px;
    transition: all ease .3s;
}

nav .nav__list li .nav__dropdown-collapse.open {
    display: flex;
}

/***************************
 * BANNER
 **************************/

.banner-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
}

.banner-wrapper .banner-iban {
    display: flex;
    align-items: center;
    gap: var(--gutter);
}

.banner-wrapper .banner-iban .title,
.banner-wrapper .banner-iban .content {
    width: 50%;
}

.banner-wrapper .banner-iban .title {
    color: var(--primary-orange);
    font-size: var(--h1-size);
    font-weight: bold;
    text-align: right;
}

.banner-wrapper .banner-iban .content {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-fourth);
}

.banner-wrapper .banner-iban .content .label {
    font-size: var(--h4-size);
}

.banner-wrapper .banner-iban .content .iban {
    font-size: var(--h3-size);
}

.banner-wrapper .banner-iban .content .iban .code {
    color: var(--primary-orange);
}

.banner-wrapper .banner-5x1000 {
    overflow: hidden;
    display: flex;
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.banner-wrapper .banner-5x1000 .aside-label {
    background: var(--primary-orange);
    color: var(--white);
    display: flex;
}

.banner-wrapper .banner-5x1000 .aside-label .label {
    transform: rotate(90deg) translateX(-18px);
    display: flex;
    align-items: center;
    font-weight: bold;
    width: 30px;
    height: 100%;
}

.banner-wrapper .banner-5x1000 .content {
    padding: var(--gutter);
    width: 100%;
}

.banner-wrapper .banner-5x1000 .content .assets {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.banner-wrapper .banner-5x1000 .content .cf {
    color: var(--primary-orange);
}

.banner-wrapper .banner-5x1000 .content .visits {
    display: flex;
    align-items: center;
    gap: var(--gutter-fourth);
}

/***************************
 * MAIN + SIDEBAR
 **************************/

.main-wrapper {
    display: grid;
    grid-template-columns: 20% 1fr 20% ;
    grid-template-rows: 1fr;
    grid-gap: var(--gutter);
}

.main-wrapper .sidebar_left,
.main-wrapper .sidebar_right,
.main-wrapper main {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
}

.main-wrapper main .main_img img {
    border-radius: var(--border-radius);
}

.main-wrapper main .post_meta {
    display: flex;
    gap: var(--gutter-half);
}

.main-wrapper main .post_meta i {
    color: var(--primary-blue);
}

.main-wrapper main .post_content {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-half);
}

.main-wrapper main .posts-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
}

.main-wrapper main .post-resume {
    display: flex;
    gap: var(--gutter);
}

.main-wrapper main .post-resume .thumbnail {
    width: 25%;
}

.main-wrapper main .post-resume .thumbnail img {
    border-radius: var(--border-radius);
}

.main-wrapper main .post-resume .content {
    width: 75%;
}

.main-wrapper main .post-resume.post-spotlight .thumbnail {
    width: 40%;
}

.main-wrapper main .post-resume.post-spotlight .content {
    width: 60%;
}


.main-wrapper main .comments-wrapper {
    margin-top: var(--gutter);
}

.main-wrapper main .comments-wrapper .post__comments {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
}

.main-wrapper main .comments-wrapper .post__comment {
    display: flex;
    gap: var(--gutter-half);
    background: var(--lightest-blue);
    border-radius: var(--border-radius);
    padding: var(--gutter);
}

.main-wrapper main .comments-wrapper .post__comment > .post__comment__meta {
    width: 25%;
}

.main-wrapper main .comments-wrapper .post__comment > .post__comment__meta .post__comment__avatar {
    text-align: center;
    background: var(--white);
    border-radius: var(--border-radius);
    margin-bottom: var(--gutter-half);
}

.main-wrapper main .comments-wrapper .post__comment > .post__comment__meta .post__comment__meta {
    font-size: var(--small-font-size);
}

.main-wrapper main .comments-wrapper .post__comment > .post__comment__content {
    width: 75%;
}

.main-wrapper main .comments-wrapper .post__comment > .post__comment__content .comment-reply-link {
    margin-top: var(--gutter-half);
    display: inline-block;
}

.main-wrapper main .comments-wrapper .comment-respond .logged-in-as,
.main-wrapper main .comments-wrapper .comment-respond .comment-reply-title {
    margin-bottom: var(--gutter-half);
}

.main-wrapper main .comments-wrapper .comment-respond {

}

.main-wrapper main .comments-wrapper .comment-respond form {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-half);
}

.main-wrapper main .comments-wrapper .comment-respond .comment-form-cookies-consent {
    margin: var(--gutter-half) 0;
}

/***************************
 * FOOTER
 **************************/

footer {
    padding: var(--gutter);
    text-align: center;
}


@media (max-width: 767px) {
    .main-wrapper {
        grid-template-columns: 1fr;
    }

    .main-wrapper .sidebar_left {
        order: 2;
    }

    .main-wrapper .sidebar_right {
        order: 3;
    }

    .main-wrapper main {
        order: 1;
    }

    header .navbar-brand img {
        max-width: 180px;
    }

    header .contacts {
        display: none
    }

    header .hamburger {
        cursor: pointer;
        display: flex;
    }

    header .hamburger.open {
        z-index: 11111111;
        color: var(--black);
    }

    header .hamburger.open i:before {
        content: "\f00d";
    }

    nav {
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: -100%;
        bottom: 0;
        right: 0;
        z-index: 111;
        transition: all ease .1s;
    }

    nav.open {
        left: 0;
    }

    nav .nav__list {
        flex-direction: column;
    }

    nav .nav__list li .nav__dropdown-collapse.open {
        display: flex;
        position: relative;
    }

    .breadcrumb-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--gutter-fourth);
    }

    .breadcrumb-wrapper .breadcrumb {
        margin-bottom: var(--gutter-fourth);
    }

    .banner-wrapper .banner-5x1000,
    .banner-wrapper .banner-5x1000 .assets,
    .banner-wrapper .banner-iban {
        flex-direction: column;
        gap: var(--gutter-fourth);
    }

    .banner-wrapper .banner-5x1000 .content .assets {
        align-items: flex-start;
    }

    .banner-wrapper .banner-5x1000 .aside-label .label {
        transform: rotate(0deg);
        padding: var(--gutter-half);
    }

    .banner-wrapper .banner-iban .title,
    .banner-wrapper .banner-iban .content {
        width: 100%;
        text-align: center;
    }

    .main-wrapper main .posts-wrapper .post-resume {
        display: flex;
        flex-direction: column;
        gap: var(--gutter-half);
    }

    .main-wrapper main .posts-wrapper .post-resume .thumbnail,
    .main-wrapper main .posts-wrapper .post-resume .content {
        width: 100%;
    }
}