/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
 html {
   line-height: 1.15;
   -webkit-text-size-adjust: 100%;
 }
 
 /* Sections
    ========================================================================== */
 /**
  * Remove the margin in all browsers.
  */
 body {
   margin: 0;
 }
 
 /**
  * Render the `main` element consistently in IE.
  */
 main {
   display: block;
 }
 
 /**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
  */
 h1, h2, h3, h4, h5, h6, p, span, ul, li {
   margin: 0;
   padding: 0;
 }
 
 /* Grouping content
    ========================================================================== */
 /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */
 hr {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   height: 0;
   overflow: visible;
 }
 
 /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 pre {
   font-family: monospace, monospace;
   font-size: 1em;
 }
 
 /* Text-level semantics
    ========================================================================== */
 /**
  * Remove the gray background on active links in IE 10.
  */
 a {
   background-color: transparent;
 }
 
 /**
  * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
 abbr[title] {
   border-bottom: none;
   text-decoration: underline;
   -webkit-text-decoration: underline dotted;
           text-decoration: underline dotted;
 }
 
 /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
 b,
 strong {
   font-weight: bolder;
 }
 
 /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 code,
 kbd,
 samp {
   font-family: monospace, monospace;
   font-size: 1em;
 }
 
 /**
  * Add the correct font size in all browsers.
  */
 small {
   font-size: 80%;
 }
 
 /**
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */
 sub,
 sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
 
 sub {
   bottom: -0.25em;
 }
 
 sup {
   top: -0.5em;
 }
 
 /* Embedded content
    ========================================================================== */
 /**
  * Remove the border on images inside links in IE 10.
  */
 img {
   border-style: none;
 }
 
 /* Forms
    ========================================================================== */
 /**
  * 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari.
  */
 button,
 input,
 optgroup,
 select,
 textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: 1.15;
   margin: 0;
 }
 
 /**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
 button,
 input {
   overflow: visible;
 }
 
 /**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */
 button,
 select {
   text-transform: none;
 }
 
 /**
  * Correct the inability to style clickable types in iOS and Safari.
  */
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button;
 }
 
 /**
  * Remove the inner border and padding in Firefox.
  */
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 /**
  * Restore the focus styles unset by the previous rule.
  */
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
 /**
  * Correct the padding in Firefox.
  */
 fieldset {
   padding: 0.35em 0.75em 0.625em;
 }
 
 /**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *		`fieldset` elements in all browsers.
  */
 legend {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   color: inherit;
   display: table;
   max-width: 100%;
   padding: 0;
   white-space: normal;
 }
 
 /**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
 progress {
   vertical-align: baseline;
 }
 
 /**
  * Remove the default vertical scrollbar in IE 10+.
  */
 textarea {
   overflow: auto;
 }
 
 /**
  * 1. Add the correct box sizing in IE 10.
  * 2. Remove the padding in IE 10.
  */
 [type="checkbox"],
 [type="radio"] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   padding: 0;
 }
 
 /**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 
 /**
  * 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari.
  */
 [type="search"] {
   -webkit-appearance: textfield;
   outline-offset: -2px;
 }
 
 /**
  * Remove the inner padding in Chrome and Safari on macOS.
  */
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
 ::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit;
 }
 
 /* Interactive
    ========================================================================== */
 /*
  * Add the correct display in Edge, IE 10+, and Firefox.
  */
 details {
   display: block;
 }
 
 /*
  * Add the correct display in all browsers.
  */
 summary {
   display: list-item;
 }
 
 /* Misc
    ========================================================================== */
 /**
  * Add the correct display in IE 10+.
  */
 template {
   display: none;
 }
 
 /**
  * Add the correct display in IE 10.
  */
 [hidden] {
   display: none;
 }
 
 /* Box sizing
 --------------------------------------------- */
 /* Inherit box-sizing to more easily change it's value on a component level.
 @link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
 *,
 *::before,
 *::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
 }
 
 html {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 
 /* Variables
 --------------------------------------------- */
 /* Mixins
 --------------------------------------------- */
 /* General
 --------------------------------------------- */
 body {
   background-color: #eff2f6;
   color: #444;
   font: 14px 'Roboto', sans-serif;
   font-weight: 400;
   margin: 0;
   padding: 0;
   width: 100%;
 }
 
 .container {
   margin: 0 auto;
   max-width: 1240px;
   padding-left: 16px;
   padding-right: 16px;
 }
 
 section {
   padding-bottom: 80px;
   padding-top: 60px;
 }
 
 main {
   width: 100%;
   max-width: 128rem;
 }
 
 a,
 select,
 option {
   font-family: inherit;
   font-weight: inherit;
   font-style: inherit;
   font-size: inherit;
   color: inherit;
   text-decoration: none;
 }
 
 select,
 option {
   font-size: 18px;
   line-height: 1.25;
   letter-spacing: normal;
   border: none;
 }
 
 @media (min-width: 640px) {
   .container {
     padding-right: 20px;
     padding-left: 20px;
   }
 }
 
 h1 {
   font-size: 24px;
 }
 
 @media (min-width: 940px) {
   h1 {
     font-size: 35px;
   }
 }
 
 /* Header
 --------------------------------------------- */
 header {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   background: -webkit-gradient(linear, left top, right top, from(#5778c6), to(#262b6a));
   background: linear-gradient(to right, #5778c6, #262b6a);
   -webkit-box-shadow: 0 5px 10px 0 #00000033;
           box-shadow: 0 5px 10px 0 #00000033;
   width: 100%;
   z-index: 100;
 }
 
 header .header__body {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   width: 100%;
 }
 
 header .header__body .logo {
   -ms-flex-item-align: center;
       -ms-grid-row-align: center;
       align-self: center;
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
 }
 
 header .header__body .logo img {
   height: 20px;
 }
 
 @media (min-width: 944px) {
   header .header__body .logo img {
     height: 40px;
   }
 }
 
 header .header__body .navigation {
   color: #47566b;
   -webkit-box-flex: 2;
       -ms-flex: 2;
           flex: 2;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 18px;
   font-weight: 300;
   display: none;
 }
 
 @media (min-width: 944px) {
   header .header__body .navigation {
     display: block;
   }
 }
 
 header .header__body .navigation .menu {
   width: 100%;
 }
 
 header .header__body .navigation .menu nav {
   width: inherit;
 }
 
 header .header__body .navigation .menu nav ul {
   color: #fff;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: distribute;
       justify-content: space-around;
   font-size: 18px;
   font-weight: 400;
 }
 
 header .header__body .navigation .menu nav ul li {
   list-style: none;
   font-weight: 400;
 }
 
 header .header__body .header_user {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -webkit-box-flex: 2;
       -ms-flex: 2;
           flex: 2;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
 
 header .header__body .header_user .header_buttons {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
 
 header .header__body .header_user .header_buttons .button {
   color: #fff;
   height: 30px;
   padding: 0 16px;
   border-radius: 4px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
           box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   -webkit-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
   -webkit-transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 header .header__body .header_user .header_buttons .button:active {
   -webkit-transition: background 0.4s ease-out;
   transition: background 0.4s ease-out;
   -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.15), 0 8px 14px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
           box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.15), 0 8px 14px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 header .header__body .header_user .header_buttons .login-button {
   margin-right: 10px;
   background: #5778c6;
 }
 
 header .header__body .header_user .header_buttons .login-button:active {
   background: #82a2f1;
 }
 
 header .header__body .header_user .header_buttons .register-button {
   margin-right: 10px;
   background: -webkit-gradient(linear, left bottom, right top, from(#0ebe6a), color-stop(#33be6a), color-stop(#47bd6a), color-stop(#56bd6b), to(#62bc6c));
   background: linear-gradient(to right top, #0ebe6a, #33be6a, #47bd6a, #56bd6b, #62bc6c);
 }
 
 header .header__body .header_user .header_buttons .register-button:active {
   background: #7edd89;
 }
 
 header .header__body .header_user .language {
   display: none;
 }
 
 @media (min-width: 944px) {
   header .header__body .header_user .language {
     display: block;
   }
   header .header__body .header_user .language .language_body {
     position: relative;
     cursor: pointer;
   }
   header .header__body .header_user .language .language_body .switcher-list {
     opacity: 0;
     background: #333;
     z-index: 3;
     font-size: 14px;
     position: absolute;
     right: -40px;
     top: 50px;
     text-align: left;
     padding: 0 10px;
   }
   header .header__body .header_user .language .language_body .switcher-list li > a,
   header .header__body .header_user .language .language_body .switcher-list li > span {
     color: #ddd;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     padding: 3px 0;
   }
   header .header__body .header_user .language .language_body .switcher-list li:first-child:after {
     content: '';
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 8px solid #333;
     position: absolute;
     right: 45px;
     top: -8px;
     -webkit-transition: 0.3s;
     transition: 0.3s;
   }
 }
 
 @media (min-width: 944px) {
   header .header__body .header_user {
     -webkit-box-flex: 0.8;
         -ms-flex: 0.8;
             flex: 0.8;
   }
 }
 
 header .header__body .nav-icon {
   color: #fff;
   font-size: 35px;
 }
 
 @media (min-width: 944px) {
   header .header__body .nav-icon {
     display: none;
   }
 }
 
 header .mobile-menu {
   opacity: 1;
   position: fixed;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   z-index: 4;
   -webkit-transition: 0.3s;
   transition: 0.3s;
   background: rgba(0, 0, 0, 0.5);
   display: none;
 }
 
 header .mobile-menu .mobile-menu__body {
   padding: 5px 20px;
   background: #fff;
 }
 
 header .mobile-menu .mobile-menu__body nav ul {
   list-style: none;
 }
 
 header .mobile-menu .mobile-menu__body nav ul li {
   padding: 5px 0 3px;
   font-size: 18px;
 }
 
 header .mobile-menu .mobile-menu__body nav ul li img {
   margin-right: 15px;
   max-width: 25px;
 }
 
 header .mobile-menu .mobile-menu__body #close-menu {
   position: fixed;
   right: 13px;
   top: 3px;
   color: #fff;
   font-size: 30px;
   margin-right: 10px;
   font-weight: 900;
 }
 
 /* Footer
 --------------------------------------------- */
 footer {
   background-color: #3b353b;
   padding: 30px 0 10px;
   font-size: 13px;
   font-weight: 400;
   line-height: 15px;
   color: #fff;
 }
 
 footer .footer-body .footer-contacts .center {
   text-align: center;
 }
 
 footer .footer-body .footer-contacts .social {
   margin-top: 10px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
 }
 
 footer .footer-body .footer-contacts .social div a img {
   height: 30px;
 }
 
 footer .footer-body .footer-contacts .floating-section-desc {
   display: none;
 }
 
 @media (min-width: 944px) {
   footer .footer-body .footer-contacts .floating-section-desc {
     display: block;
   }
 }
 
 footer .footer-body .footer-menu {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
 
 footer .footer-body .footer-menu .text {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   text-align: center;
   margin-bottom: 10px;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   height: 80px;
 }
 
 footer .footer-body .footer-menu .menu-items {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
 
 footer .footer-body .footer-menu .menu-items ul {
   list-style: none;
   padding: 10px 0;
 }
 
 footer .footer-body .footer-menu .menu-items ul li {
   margin-bottom: 5px;
 }
 
 footer .footer-body .social {
   margin-top: 10px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
 }
 
 footer .footer-body .social div a img {
   height: 30px;
 }
 
 footer .footer-body .floating-section-mobile {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
 
 @media (min-width: 944px) {
   footer .footer-body {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
   }
   footer .footer-body .footer-contacts .center {
     text-align: left;
   }
   footer .footer-body .footer-menu {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
   }
   footer .footer-body .footer-menu .text {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
     text-align: center;
     margin-bottom: 10px;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     height: 80px;
   }
   footer .footer-body .footer-menu .menu-items {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-pack: distribute;
         justify-content: space-around;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
   }
   footer .footer-body .footer-menu .menu-items ul {
     list-style: none;
     padding: 10px 0;
   }
   footer .footer-body .footer-menu .menu-items ul li {
     margin-bottom: 5px;
   }
   footer .footer-body .floating-section-mobile {
     display: none;
   }
 }
 
 /* Archive
 --------------------------------------------- */
 .articles .categories ul {
   list-style-type: none;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   margin: 0 0 3rem;
   padding: 0;
 }
 
 @media (min-width: 768px) {
   .articles .categories ul {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
     margin: 0 0 5rem;
   }
 }
 
 .articles .categories ul li {
   border-bottom: 1px solid #d8d8d8;
   padding: 10px 0;
 }
 
 .articles .categories ul li:first-child {
   border-top: 1px solid #d8d8d8;
 }
 
 .articles .categories ul li a {
   position: relative;
   display: block;
 }
 
 .articles .categories ul li .active::after {
   content: '';
   width: 0.5rem;
   height: 0.5rem;
   position: absolute;
   top: 50%;
   right: 0;
   -webkit-transform: translateY(-0.2rem);
           transform: translateY(-0.2rem);
   background-color: #000;
   opacity: 1;
   border-radius: 50%;
 }
 
 @media (min-width: 768px) {
   .articles .categories ul li {
     margin-left: 2rem;
     border: 0;
   }
   .articles .categories ul li:first-child {
     margin-left: 0;
     border: 0;
   }
   .articles .categories ul li .active::after {
     border-radius: 50%;
     top: calc(100% + 1rem);
     -webkit-transform: translateX(-50%);
             transform: translateX(-50%);
     background-color: #000;
     left: 50%;
     right: auto;
   }
 }
 
 .articles .articles__list {
   display: -ms-grid;
   display: grid;
   grid-gap: 3.2rem;
   margin-bottom: 3rem;
 }
 
 .articles .articles__list .article {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   text-decoration: none;
   position: relative;
   display: flex;
   flex-direction: column;
   background-size: auto 100%;
   background-position: 50%;
 }
 
 .articles .articles__list .article .article__image {
   width: 100%;
   position: relative;
   overflow: hidden;
 }
 
 .articles .articles__list .article .article__image img {
   width: 100%;
   -webkit-transition: -webkit-transform .5s;
   transition: -webkit-transform .5s;
   transition: transform .5s;
   transition: transform .5s, -webkit-transform .5s;
 }
 
 .articles .articles__list .article .article__details {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
 }
 
 .articles .articles__list .article .article__details h3 {
   padding-bottom: 15px;
 }
 
 .articles .articles__list .article .article__details p {
   padding-bottom: 30px;
 }
 
 .articles .articles__list .article .article__details .article__link {
   margin-top: auto;
   font-size: 16px;
   font-weight: 500;
   line-height: 1;
   border-top: 2px solid #d8d8d8;
   padding-top: 1.4rem;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   text-decoration: none;
   -webkit-transition: color 0.2s;
   transition: color 0.2s;
 }
 
 .articles .articles__list .article .article__details .article__link img {
   margin-left: 15px;
 }
 
 .articles .articles__list .article .article__details .article__link img:hover {
   -webkit-animation: bob-right 1s infinite;
           animation: bob-right 1s infinite;
 }
 
 @-webkit-keyframes bob-right {
   0% {
     -webkit-transform: translateX(0);
             transform: translateX(0);
   }
   50% {
     -webkit-transform: translateX(1rem);
             transform: translateX(1rem);
   }
   100% {
     -webkit-transform: translateX(0);
             transform: translateX(0);
   }
 }
 
 @keyframes bob-right {
   0% {
     -webkit-transform: translateX(0);
             transform: translateX(0);
   }
   50% {
     -webkit-transform: translateX(1rem);
             transform: translateX(1rem);
   }
   100% {
     -webkit-transform: translateX(0);
             transform: translateX(0);
   }
 }
 
 .articles .articles__list .article:first-child, .articles .articles__list .article:nth-child(6) {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   background-size: auto 100%;
   background-position: 50%;
   width: calc(100% + 3rem);
   margin: 0 0 0 -2rem;
 }
 
 @media (min-width: 768px) {
   .articles .articles__list .article:first-child, .articles .articles__list .article:nth-child(6) {
     width: auto;
     margin: unset;
   }
   .articles .articles__list .article:first-child .article__image, .articles .articles__list .article:nth-child(6) .article__image {
/*      position: absolute; */
     height: 100%;
     width: 100%;
   }
   .articles .articles__list .article:first-child .article__image img, .articles .articles__list .article:nth-child(6) .article__image img {
     height: inherit;
   }
 }
 
 .articles .articles__list .article:first-child .article__details, .articles .articles__list .article:nth-child(6) .article__details {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
   position: absolute;
   bottom: 0;
   z-index: 10;
   width: 100%;
   height: 100%;
   padding: 20px 20px 20px 35px;
   color: #fff;
   background: rgba(0, 0, 0, 0.5);
 }
 
 .articles .articles__list .article:first-child .article__details h3, .articles .articles__list .article:nth-child(6) .article__details h3 {
   font-size: 18px;
   line-height: 1.28;
   padding-bottom: 30px;
   position: absolute;
   padding-right: inherit;
   padding-bottom: 30px;
   bottom: 55px;
 }
 
 .articles .articles__list .article:first-child .article__details p, .articles .articles__list .article:nth-child(6) .article__details p {
   display: none;
 }
 
 .articles .articles__list .article:first-child .article__details .article__link, .articles .articles__list .article:nth-child(6) .article__details .article__link {
   border-top: 2px solid #fff;
   padding-top: 14px;
 }
 
 .articles .articles__list :hover .article__image img {
   -webkit-transform: scale(1.07);
           transform: scale(1.07);
   -webkit-transition: -webkit-transform 1s;
   transition: -webkit-transform 1s;
   transition: transform 1s;
   transition: transform 1s, -webkit-transform 1s;
 }
 
 @media (min-width: 768px) {
   .articles .articles__list {
     grid-gap: 3rem;
   }
   .articles .articles__list .article {
     width: auto;
     margin: 0;
   }
   .articles .articles__list .article:first-child {
     -ms-grid-column: 1;
     -ms-grid-column-span: 1;
     grid-column: 1/2;
     -ms-grid-row: 1;
     -ms-grid-row-span: 1;
     grid-row: 1/2;
   }
   .articles .articles__list .article:first-child h3 {
     font-size: 36px;
   }
 }
 
 @media (min-width: 1024px) {
   .articles .articles__list {
     -ms-grid-columns: (1fr)[4];
         grid-template-columns: repeat(4, 1fr);
     -ms-grid-rows: auto minmax(9rem, auto);
         grid-template-rows: auto minmax(9rem, auto);
   }
   .articles .articles__list .article {
     position: relative;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     text-decoration: none;
   }
   .articles .articles__list .article:first-child {
     -ms-grid-column: 1;
     -ms-grid-column-span: 2;
     grid-column: 1/3;
   }
   .articles .articles__list .article:first-child .article__details {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-flex: 1;
         -ms-flex-positive: 1;
             flex-grow: 1;
     position: absolute;
     bottom: 0;
     z-index: 10;
     width: 100%;
     padding: 100px 54px 54px 54px;
     background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.8)), color-stop(95%, transparent));
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 30%, transparent 95%);
   }
   .articles .articles__list .article:first-child .article__details h3 {
     bottom: 95px;
     font-size: 36px;
   }
   .articles .articles__list .article:nth-child(6) {
     -ms-grid-column: 3;
     -ms-grid-column-span: 2;
     grid-column: 3/5;
   }
   .articles .articles__list .article:nth-child(6) .article__details {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-flex: 1;
         -ms-flex-positive: 1;
             flex-grow: 1;
     position: absolute;
     bottom: 0;
     z-index: 10;
     padding: 100px 54px 54px 54px;
     background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.8)), color-stop(95%, transparent));
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 30%, transparent 95%);
   }
   .articles .articles__list .article:nth-child(6) .article__details h3 {
     bottom: 95px;
     font-size: 36px;
   }
 }
 
 /* Single
 --------------------------------------------- */
 .article-header {
   margin-bottom: 20px;
   text-align: center;
 }
 
 .article-header h1 {
   padding-bottom: 20px;
 }
 
 .article-header .article-header__info {
   padding-bottom: 30px;
 }
 
 .article-header .article-header__social .links {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
 .article-header .article-header__social .links .links__item {
   width: 35px;
   height: 35px;
   border-radius: 50%;
   border: 1px solid #d7d7d7;
   margin-right: 1rem;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-transition: 0.2s, border-color 0.2s;
   transition: 0.2s, border-color 0.2s;
 }
 
 .article-header .article-header__social .links .links__item:hover {
   background: #04b5ed;
   border-color: #04b5ed;
 }
 
 .article-image {
   text-align: center;
 }
 
 .article-image img {
   max-width: 100%;
   margin-bottom: 30px;
 }
 
 .article-body {
   max-width: 100%;
 }
 
 .article-body p {
   font-size: 16px;
   padding-bottom: 20px;
 }
 
 .article-body ul {
   margin-bottom: 20px;
 }
 
 .article-body li {
   margin-left: 20px;
 }
 
 .article-body img {
   max-width: 100%;
   height: auto;
 }
 
 @media (min-width: 940px) {
   .article-header {
     margin: 0 auto;
     margin-bottom: 40px;
     text-align: center;
     max-width: 600px;
   }
   .article-header h1 {
     padding-bottom: 20px;
   }
   .article-header .article-header__info {
     padding-bottom: 30px;
   }
   .article-body {
     max-width: 600px;
     margin: auto;
   }
   .article-body p {
     font-size: 20px;
   }
 }