html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.container {
  max-width: 1280px;
  padding-right: 16px;
  padding-left: 16px;
  margin: 0 auto;
}

header {
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;

    .header-logo {
      padding-right: 16px;
      margin-right: 16px;
      border-right: 1px solid #eee;
    }

    .header-info {
      p {
        font-size: 12px;
        color: #aeaeae
      }
    }

    .header-article {
      display: flex;
      align-items: center;
      flex-basis: 200px;
      gap: 16px;
      padding-right: 16px;
      padding-left: 16px;
      border-right: 1px solid #eee;

      img {
        display: block;
        min-width: 60px;
        min-height: 60px;
        max-width: 60px;
        max-height: 60px;
        overflow: hidden;
        border-radius: 100%;
        object-fit: cover;
      }

      a {
        font-size: 14px;
        text-decoration: none;
        color: #000;

        &:hover {
          text-decoration: underline;
          color: #c0392b;
        }
      }
    }

    .header-profile {
      a {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        text-decoration: none;
        color: #999999;
        gap: 8px;

        svg {
          fill: #999999;
        }
      }
    }

    & {
      .header-article:nth-child(5){
        padding-right: 0px;
        padding-left: 0px;
        border-right: unset;
        margin-left: 16px;
        margin-right: 16px;
      }
    }

    @media screen and (max-width: 1170px) {
      .header-info {
        display: none;
      }
    }

    @media screen and (max-width: 1024px) {
      .header-article {
        a {
          font-size: 12px;
        }
      }
    }

    @media screen and (max-width: 960px) {
      .header-logo {
        border-right: unset;
      }
      .header-article {
        display: none;
      }
    }

    @media screen and (max-width: 580px) {
      gap: 32px;
      .header-logo {
        img {
          width: 100%;
        }
      }
    }
  }
}

nav {
  background: #3b4753;

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

    label {
      display: none;
      .mobile-menu-btn {
        background: none;
        border: none;
        cursor: pointer;
      }
      svg {
        fill: #fff;
      }
    }

    ul {
      display: flex;
      margin: 0;
      padding: 0;
      li {
        list-style-type: none;
        .dropdown {
          display: none;
        }
        &:hover {
          .dropdown {
              display: flex;
           }
        }
        a {
          display: inline-block;
          color: #fff;
          text-decoration: none;
          font-size: 14px;
          padding: 12px 10px;

          &:hover {
            background: #0000001a;
          }
        }
      }
    }

    .search-area {
      form {
        display: flex;
        align-items: center;
        position: relative;

        input {
          height: 30px;
          width: 30px;
          padding: 0;
          transition: width .5s;
          font-size: 14px;
          border-radius: 30px;
          background: #ffffff1a;
          border: none;
          position: relative;
          cursor: pointer;

          &:focus {
            cursor: text;
            outline: none;
            color: #fff;
            width: 200px;
            box-shadow: none;
            padding: 0px 0px 0px 32px;
          }
        }

        svg {
          position: absolute;
          top: 8px;
          left: 8px;
          fill: #fff;
        }
      }
    }

    @media screen and (max-width: 960px) {
      ul {
        li {
          a {
            padding: 10px 8px;
          }
        }
      }
    }
    @media screen and (max-width: 820px) {
      ul {
        li {
          a {
            padding: 8px 6px;
          }
        }
      }
    }
    @media screen and (max-width: 768px) {
      min-height: 48px;
      position: relative;

      .menu {
        display: none;
        flex-direction: column;
        padding: 16px;
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        background: #3b4753;
        box-sizing: border-box;

        &.active {
          display: flex;
        }

        li {
          a {
            width: 100%;
          }

          ul {
            flex-direction: column;
            padding-left: 16px;
          }
        }
      }

      label {
        display: block;
        cursor: pointer;
      }
      input:checked ~ .menu {
        cursor: pointer;
        display: flex !important;
      }
    }
  }
}

main {
  .container {
    .main__block {
      display: flex;
      gap: 32px;
      margin-bottom: 32px;

      h3 {
        a {
          color: #343040;
          text-decoration: none;
          &:hover {
            color: #c0392b;
          }
        }
      }
      
      .main__block-aside {
        ul {
          background: none repeat scroll 0 0 #f3f5f6;
          padding: 16px;
          overflow-x: hidden;
          overflow-y: auto;
          margin-bottom: 0;
          
          &.long {
            max-height: 1024px;
          }

          &.short {
            max-height: 400px;
          }

          li {
            list-style-type: none;
            display: flex;
            align-items: start;
            gap: 8px;
            padding: 10px 0px;
            max-width: 173px;
            line-height: 22px;
            border-bottom: 1px solid #e6eaed;

            h5 {
              margin: 0;

              a {
                color: #333333;
                text-decoration: none;
                font-weight: normal;
                &:hover {
                  color: #c0392b;
                }
              }
            }

            time {
              font-size: 10px;
              color: #959ba6;
            }
          }
        }

        .mba-bottom-btn {
          background: #f3f5f6;
          padding: 16px;

          a {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-align: center;
            background: #e9ecef;
            border: 1px solid #ced4da;
            color: #495057;
            padding: 6px 12px;
            font-size: 14px;
            border-radius: 4px;
            text-decoration: none;
            width: 171px;

            svg {
              width: 7px;
            }
          }
        }
      }
      .main__block-main {
        .main__block-main__items {
          display: flex;
          gap: 32px;
          flex-wrap: wrap;
          .main__block-main__item {
            max-width: 270px;
            .mbmi-cat {
              display: block;
              width: fit-content;
              margin-bottom: 6px;
              color: #959ba6;
              border: 1px solid #bdc3c7;
              font-weight: 400;
              text-transform: uppercase;
              font-size: 9px;
              line-height: 9px;
              padding: 2px 3px;
              border-radius: 3px;
              text-decoration: none;

              &:hover {
                color: #c0392b;
                border-color: #c0392b;
              }
            }
            .mbmi-img {
              display: block;
              max-width: 100%;
              max-height: 180px;
              overflow: hidden;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }

            .mbmi-title {
              a {
                color: #224;
                text-decoration: none;

                &:hover {
                  color: #c0392b;
                  text-decoration: underline;
                }
              }
            }
          }
        }
        .main__block-column {
          display: flex;
          gap: 32px;

          .col {
            .col__header {
              display: flex;
              align-items: center;
              gap: 8px;
              margin-bottom: 6px;
              time {
                font-size: 10px;
                color: #757575;
              }

              a {
                display: block;
                width: fit-content;
                color: #959ba6;
                border: 1px solid #bdc3c7;
                font-weight: 400;
                text-transform: uppercase;
                font-size: 9px;
                line-height: 9px;
                padding: 2px 3px;
                border-radius: 3px;
                text-decoration: none;
              
                &:hover {
                  color: #c0392b;
                  border-color: #c0392b;
               }
              }
            }

            .col__img {
              max-width: 270px;
              max-height: 180px;
              a {
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  display: block;
                }
              }
            }

            .col__title {
              margin-top: 10px;
              margin-bottom: 0;
              font-weight: normal;
              a {
                color: #4e5962;
                text-decoration: none;

                &:hover {
                  color:#c0392b;
                  text-decoration: underline;
                }
              }
            }
            .col__item-big {
              max-width: 300px;
              margin-bottom: 48px;
            }
            .col__item-small {
              display: flex;
              align-items: center;
              gap: 12px;
              max-width: 270px;
              margin-bottom: 16px;
              .col__img {
                max-width: 85px;
                max-height: 56px;
              }
              .col__text {
                .col__header {
                  margin-bottom: 0px;
                }

                .col__title {
                  font-size: 14px;
                  margin-top: 0;
                }
              }
            }

            &.rv  {
              .col__item-big {
                margin-bottom: 0;
                margin-top: 48px;
              }
            }
          }
        }
      }

      @media screen and (max-width: 768px) {
        flex-wrap: wrap;
        .main__block-aside {
          width: 100%;
          ul {
            li {
              max-width: 100%;
            }
          }
        }
        .main__block-main {
          width: 100%;

          .main__block-main__items {
            .main__block-main__item {
              max-width: 100%;

              .mbmi-img {
                max-height: unset;
              }
            }
          }

          .main__block-column {
            flex-wrap: wrap;

            .col {
              .col__img {
                max-width: 100% !important;
                max-height: unset !important;
              }
              .col__item-big, .col__item-small {
                max-width: 100%;
              }
            }
          }
        }
      }
    }
  }
  .read__also {
    background: #f3f5f6;
    border-top: 1px solid #eceff1;
    border-bottom: 1px solid #eceff1;

    .container {
      h3 {
        margin-bottom: 20px;
        margin-top: 20px;
        a {
          color: #224;
          text-decoration: none;
          font-weight: normal;

          &:hover {
            color: #c0392b;
            text-decoration: underline;
          }
        }
      }

      .ra__items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
        gap: 32px;

        .ra__item {
          .ra__item-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
            time {
              font-size: 10px;
              color: #757575;
            }

            a {
              background: #46c37b;
              color: #fff;
              display: block;
              width: fit-content;
              font-weight: 400;
              text-transform: uppercase;
              font-size: 9px;
              line-height: 9px;
              padding: 2px 3px;
              border-radius: 3px;
              text-decoration: none;
            
              &:hover {
                background: #38a566;
              }
            }
          }

          .ra__item-img {
            a {
              img {
                width: 100%;
                height: 100%;
              }
            }
          }

          .ra__item-title{
            margin-top: 8px;
            margin-bottom: 16px;
            a {
              color: #224;
              text-decoration: none;
              font-weight: normal;
          
              &:hover {
                color: #c0392b;
                text-decoration: underline;
              }
            }
          }

          .ra__item-descr {
            font-size: 14px;
            color: #7f848d;
            line-height: 24px;
          }
        }
      }
    }
  }
}

footer {
  background: #222;

  .container {
    padding-top: 32px;
    padding-bottom: 32px;
    font-size: 12px;
    a {
      color: #4f6db3;
      text-decoration: none;

      &:hover {
        color:#c0392b;
        text-decoration: underline;
      }
    }

    p {
      color: #7f848d;
      line-height: 24px;
    }

    .ft__menu {
      margin-top: 32px;
      margin-bottom: 32px;
      ul {
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
        padding: 0;
        li {
          list-style-type: none;
        }
      }
    }

    .ft__social {
      ul {
        display: flex;
        gap: 16px;
        padding: 0;
        li {
          list-style-type: none;
          a {
            svg {
              width: 24px;
              height: 24px;
            }
          }
        }
      }
    }

    .ft__block {
      display: flex;
      gap: 64px;
      flex-wrap: wrap;

      div {
        flex: 1;
      }

      @media screen and (max-width: 768px) {
        gap: 32px;
        div {
          flex: 1 1 100%;
          width: 100%;
        }
      }
    }

    .ft__footer {
      code {
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 4px;
        padding: 4px;
        font-size: 12px;
      }
    }
  }
}