blockquote,
body,
button,
dd,
dl,
figcaption,
figure,
h1,
h2,
h3,
h4,
li,
p {
  margin: 0;
}
*,
::after,
::before,
pre {
  box-sizing: border-box;
}
hr,
img,
time {
  display: block;
}
.article-style,
.home-header,
.video,
blockquote,
blockquote *,
pre {
  position: relative;
}
hr,
img {
  max-width: 100%;
}
.intro p a,
.list-item:hover .h3 a,
.projects-footer > p a {
  text-decoration: underline;
}
.article-animated-content h2,
.topNav ul li a.menuActive,
.topNav ul li a:focus {
  border-bottom: 1px solid #000;
}
.kt .link-dark:hover,
.kt .link-light:hover,
.kt a:hover,
a {
  text-decoration: none;
}
.footer-site .footer-contact,
body,
html {
  scroll-behavior: smooth;
}
@font-face {
  font-family: '512';
  font-weight: 400;
  font-style: normal;
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0hSRkAAAEoAAAAVmNtYXDnIOd0AAABoAAAAEJnbHlm6xRYrgAAAfgAAAPoaGVhZBikHDkAAADQAAAANmhoZWEHiwNxAAAArAAAACRobXR4H1j/8gAAAYAAAAAgbG9jYQQ+A2AAAAHkAAAAEm1heHABHgBhAAABCAAAACBuYW1lLcLJwAAABeAAAAH1cG9zdD0ZbegAAAfYAAAAWQABAAADUv9qAFoEAP/y//4D6gABAAAAAAAAAAAAAAAAAAAACAABAAAAAQAAJ2rE0V8PPPUACwPoAAAAANrU67UAAAAA2tTrtf/yAAAD6gPqAAAACAACAAAAAAAAAAEAAAAIAFUADAAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPrAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wHnBwNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPo//ID6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAC4AAAAEAAQAAQAA5wf//wAA5wH//wAAAAEABAAAAAEAAgADAAQABQAGAAcAAAAAAAAAGgCIALgBBAF4AdQB9AAAAAH/8gAAA+oDRgAJAAABBAIXNgQXFQkBAq/+NfIQhgIJHgE7/sUCnhj+d1boKxWoATsBZAADAAAAAAPqA+oAHwAjAEMAABMHBhQXFjI/AT4BJwcWBg8BBiInJjQ/AT4BFzcmJyIGHwEBJxMHDgEXNyY2PwE2MhcWFA8BDgEnBxY2PwE2NCcuASIGt3g9PUClQHctFxU9AxMWdylrKScndxc4HT0jJSlMbzcBKTcbdy0XFT0DExZ3KWspJyd4FjgePDh2Lng8PB9LUUsB23dApUA9PXgudTk9HTgXdycnKWspdxYTAz0NAR5+NgEoNwEJeC51OT0dOBZ4Jycpayl3FhMDPRUXLXdApUAeHh4AAAAABAAAAAAD6gOZAAYADwATABgAAAEzFyE3FzcnFAYiJjQ2MhYBIREhBRMRIScDJk5B/eSZQnnhJDUjIzUk/wAC3v0i/vbYAjN6AXDqrCypDxokJDUjI/57AiMm/lQCBPAAAwAAAAADmgPqABEAKAAuAAABITIWFxEOASMhLgE1ERcWNi8BMQcxBzczBxUHER4BFyE+ATcRLgEnITchETMRIQGGATYICgEBCgj99AgKZVYrA0MCNzQBwiUBNCgCDCg1AQE1KP7FdgFaSf5dAy8LCP1ECAsBCggB0AMDWweoAjo3zAEn/iUoNQEBNSgCvCg1AS/9RAL9AAAMAAAAAANtA+oABQANABMAGwAhACkALQA1ADkAPABGAFQAACUzFTM1IycxFTM1MzUjNzMVMzUjJzEVMzUzNSM3MxUzNSMnMRUzNTM1IzcVIzUHMxEjFSM1IzczNSMFIzUnFTMRITUjFSMRIxEUFhchPgE3ESchIgYBmR8+XV4/H15eHz5dXj8fXl4fPl1ePx9efD0/uj49Pz8+PgGKcT/b/mpefT4jGwJxGyMB7v4+GyN/Pl4fPj4fHz5eHz8/Hx8+Xh8+Ph+8X1+dARk+PgE+P3Es3P1xHx8Da/yVGyMBASMbArztIwAAAwAAAAAD6gPkABEAJAA3AAABDgEfAQYWFxY/ATY0LwEmIyI3FjMeARcOAQ8BFTM2EjcmAi8BBwYCBxYSFzM1Jy4BJz4BPwE1IgGtDgYBAgEHDhIUuhESvA0MB44DAnOQAgKQcwUDuOsDA+u4A5m36gUF6rcEBnKQAgKQcgYCAoQIIRKuESIJDA5zDSMNbwi8Ah6zenuzHQKhIAEPv78BDiABASD+8sC//vIhogIds3p7sx4BogAAAAIAAAAAA+kDIgAHAA8AABMVBTUnNTc1BRcVBxUlNSUBAUPT0wFi09MBQ/69AjR974KqAqqCg6kDqoHufe8AAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAMAAQABAAAAAAACAAcABAABAAAAAAADAAMACwABAAAAAAAEAAMADgABAAAAAAAFAAsAEQABAAAAAAAGAAMAHAABAAAAAAAKACwAHwABAAAAAAALABIASwADAAEECQAAAAIAXQADAAEECQABAAYAXwADAAEECQACAA4AZQADAAEECQADAAYAcwADAAEECQAEAAYAeQADAAEECQAFABYAfwADAAEECQAGAAYAlQADAAEECQAKAFgAmwADAAEECQALACQA8yA1MTJSZWd1bGFyNTEyNTEyVmVyc2lvbiAxLjA1MTJGb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgADUAMQAyAFIAZQBnAHUAbABhAHIANQAxADIANQAxADIAVgBlAHIAcwBpAG8AbgAgADEALgAwADUAMQAyAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgBAgEDAQQBBQEGAQcBCAEJAANvdXQEbGluawdwaWN0dXJlA2RvYwN6aXAFdmlkZW8EY29kZQAAAAAA)
    format('truetype');
}
.anchor-item:before,
.closeClone:before,
[class*=' icon-link']:before,
[class^='icon-link']:before {
  font-family: '512' !important;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.closeClone:before {
  content: '\e701';
}
.anchor-item:before {
  font-size: 1rem;
  font-weight: 700;
  margin-right: 0.5rem;

  content: '\e702';
}
.icon-link-archive:before,
.icon-link-code:before,
.icon-link-document:before,
.icon-link-image:before,
.icon-link-video:before,
.icon-link:before {
  font-size: 0.7rem;
  font-weight: 700;
  margin-right: 0.5rem;
}
.icon-link:before {
  content: '\e702';
}
.icon-link-document:before {
  font-size: 0.8rem;
  font-weight: 400;

  content: '\e704';
}
.icon-link-archive:before {
  font-size: 1rem;
  font-weight: 400;

  content: '\e705';
}
.icon-link-video:before {
  font-size: 0.8rem;
  font-weight: 400;

  content: '\e706';
}
.icon-link-code:before {
  display: inline-block;

  content: '\e707';
  transform: translateY(2px);
}
.icon-link-image:before {
  font-size: 0.9rem;
  font-weight: 400;

  content: '\e703';
}
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}
a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}
img {
  height: auto;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  font-family: inherit;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';
  font-size: 100%;
  line-height: 1;
  padding: 0;
  border: 0;
  background: 0 0;
}
body,
html {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: #3e3e3e;
}
h1,
h1.title,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  margin-bottom: 16px;
  color: #15151d;
  text-rendering: optimizeLegibility;
}
.h1 a,
.h2 a,
.h3 a,
.h4 a,
.h5 a,
.h6 a,
a,
a strong,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}
h1.title {
  font-size: 60px;
  line-height: 64px;
  margin-bottom: 20px;
}
.h1,
h1 {
  font-size: 48px;
  font-weight: 400;
  line-height: 52px;
}
.h2,
h2 {
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
}
.h3,
.h4,
h3,
h4 {
  line-height: 32px;
}
.h3,
h3 {
  font-size: 24px;
}
.h4,
h4 {
  font-size: 21px;
}
.h5,
h5 {
  font-size: 18px;
  line-height: 28px;
}
.h6,
h6 {
  font-size: 16px;
  line-height: 24px;
}
p + h2,
p + h3,
p + h4,
p + h5,
p + h6 {
  margin-top: 24px;
}
li ul {
  margin-bottom: 0;
}
p {
  line-height: 28px;

  margin-bottom: 16px;
}
p strong {
  font-weight: 700;
}
.small p {
  line-height: 1.7;
}
i {
  font-weight: 400;
}
hr {
  margin: 1.65em 0;

  border: none;
  border-bottom: 1px solid #ddd;
}
blockquote {
  font-size: 115%;
  font-weight: 700;
  font-style: italic;
  overflow: hidden;
  margin-bottom: 1.65em;
  padding: 5vmin 3vmin;
  color: #000;
  background: #f8f8f8;
}
blockquote * {
  z-index: 3;
}
.video {
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.link-dark,
.link-light {
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-block;

  padding: 9px 15px;
  border-radius: 5px;
}
.video .html5,
.video embed,
.video iframe,
.video object {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
pre {
  font-family: Consolas, 'Courier New', Courier, monospace;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;

  overflow: auto;
  margin: 1em 0;
  padding: 20px;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  background: var(--dark);
  -webkit-font-smoothing: auto;
}
pre code {
  color: var(--grey);
}
.link-light {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #424242;
  background-color: #f3f3f3;
}
.link-dark {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f3f3f3;
  background-color: #15151d;
}
.link-dark-big,
.link-light-big {
  font-size: 0.9rem;
  font-weight: 600;

  padding: 9px 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 5px;
}
.link-light-big {
  color: #424242;
  background-color: #f3f3f3;
}
.link-dark-big {
  color: #f3f3f3;
  background-color: #15151d;
}
.link-dark.link-absolute,
.link-light.link-absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -99999px;
  background-color: transparent;
}
time {
  font-size: 0.8rem;
  margin-bottom: 1em;
}
.articleTags {
  padding-top: 1em;
}
.tag-boutton {
  font-size: 0.68rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 7px;
  white-space: nowrap;
  border: 1px solid #939393;
  border-radius: 5px;
}
.tag-boutton.tagActive {
  color: #868686;
  border: 1px solid transparent;
  background-color: #000;
}
.tag-boutton.tagActive span {
  margin-right: 1px;
  padding-right: 5px;
  border-right: 1px solid #868686;
}
:root {
  --item-full-pos-y: 0;
  --item-full-pos-x: 0;
  --item-full-width: 100vw;
  --item-full-height: 100vh;
  --initialy: 0;
  --initialx: 0;
  --initialw: 0;
  --initialh: 0;
  --item-full-figure-height: 70vh;
}
@-webkit-keyframes slideInArticle {
  from {
    top: var(--initialy);
    left: var(--initialx);
    width: var(--initialw);
    height: var(--initialh);
  }
  to {
    top: var(--item-full-pos-y);
    left: var(--item-full-pos-x);
    width: var(--item-full-width);
    height: var(--item-full-height);
  }
}
@keyframes slideInArticle {
  from {
    top: var(--initialy);
    left: var(--initialx);
    width: var(--initialw);
    height: var(--initialh);
  }
  to {
    top: var(--item-full-pos-y);
    left: var(--item-full-pos-x);
    width: var(--item-full-width);
    height: var(--item-full-height);
  }
}
@-webkit-keyframes slideOutArticle {
  from {
    top: var(--item-full-pos-y);
    left: var(--item-full-pos-x);
    width: var(--item-full-width);
    height: var(--item-full-height);
  }
  to {
    top: var(--initialy);
    left: var(--initialx);
    width: var(--initialw);
    height: var(--initialh);
  }
}
@keyframes slideOutArticle {
  from {
    top: var(--item-full-pos-y);
    left: var(--item-full-pos-x);
    width: var(--item-full-width);
    height: var(--item-full-height);
  }
  to {
    top: var(--initialy);
    left: var(--initialx);
    width: var(--initialw);
    height: var(--initialh);
  }
}
@-webkit-keyframes contentWrapperAnim {
  from {
    transform: translateY(15em);
  }
  to {
    transform: translateY(-5rem);
  }
}
@keyframes contentWrapperAnim {
  from {
    transform: translateY(15em);
  }
  to {
    transform: translateY(-5rem);
  }
}
@-webkit-keyframes contentAnim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes contentAnim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes imgFullOpacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes imgFullOpacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slideInFigureHeight {
  from {
    height: var(--initialh);
  }
  to {
    height: var(--item-full-figure-height);
  }
}
@keyframes slideInFigureHeight {
  from {
    height: var(--initialh);
  }
  to {
    height: var(--item-full-figure-height);
  }
}
@-webkit-keyframes slideOutFigureHeight {
  from {
    height: var(--item-full-figure-height);
  }
  to {
    height: var(--initialh);
  }
}
@keyframes slideOutFigureHeight {
  from {
    height: var(--item-full-figure-height);
  }
  to {
    height: var(--initialh);
  }
}
@-webkit-keyframes animMenu {
  from {
    transform: translateY(-2em) translateX(-50%);

    opacity: 0;
  }
  to {
    transform: translateY(0) translateX(-50%);

    opacity: 1;
  }
}
@keyframes animMenu {
  from {
    transform: translateY(-2em) translateX(-50%);

    opacity: 0;
  }
  to {
    transform: translateY(0) translateX(-50%);

    opacity: 1;
  }
}
@-webkit-keyframes animPopupImg {
  from {
    transform: translateY(-2em);

    opacity: 0;
  }
  to {
    transform: translateY(0);

    opacity: 1;
  }
}
@keyframes animPopupImg {
  from {
    transform: translateY(-2em);

    opacity: 0;
  }
  to {
    transform: translateY(0);

    opacity: 1;
  }
}
.header {
  min-height: 50px;
}
.home-header {
  display: flex;
  flex-direction: column;

  height: 90vh;
  min-height: 500px;
  margin-bottom: 1px;
  background-color: #000;
}
.home-header.home-header-white {
  background-color: #fff;
}
.home-header h1 {
  font-size: calc(2rem + 3vmin);
  font-weight: 700;
  line-height: 1.2;
  z-index: 1;
  display: inline-block;
  width: 90%;
  max-width: 350px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 0.5em;
}
.home-header h1 span {
  padding: 0 10px 7px;
  color: #fff;
  box-decoration-break: clone;

  -webkit-box-decoration-break: clone;
}
.article-style figcaption h3,
.article-style figcaption h3 a {
  font-weight: 700;

  padding: 5px 13px;
  color: #000;
}
.home-header h1.home-h1-black span {
  color: #000;
}
.home-header:after {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.intro {
  width: 100%;
  max-width: 48rem;
  margin: 9rem auto;
}
.intro > h2 {
  margin-bottom: 1.35em;
}
.intro p {
  font-size: 1.45rem;
  line-height: 1.6;
}
.logosite {
  font-size: 1.3rem;
  font-weight: 600;

  display: flex;
  color: #000;
  justify-content: center;
}
.footer-site,
.header,
main {
  width: calc(100% - 2.7rem);
  margin-right: auto;
  margin-left: auto;
}
.error {
  display: flex;
  height: 70vh;
  margin-top: 3em;
  background: linear-gradient(to top, rgba(249, 249, 249, 0.95) 0, rgba(0, 0, 0, 0) 100%);
  justify-content: center;
  align-items: center;
}
.btnOpenClone,
.thumb {
  width: 100%;
  height: 100%;
}
.error > div {
  max-width: 700px;
  text-align: center;
}
.animated-items-container {
  display: flex;
  flex-direction: row;
  max-width: 1920px;
  margin: auto;
  flex-wrap: wrap;
}
.bodyFixed {
  overflow: hidden;
  margin-right: 17px;
}
.article-style {
  z-index: 8;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  margin: 1px;

  will-change: top, left, width, height;
  align-items: center;
}
.thumb {
  -o-object-fit: cover;
  object-fit: cover;
}
.duplicated {
  opacity: 0.25;
}
.imgFull,
.slidein.slideout .article-animated-content {
  opacity: 0;
}
.article-style figcaption h3 {
  margin-bottom: 0;
  transition: margin-right 0.15s;
  letter-spacing: 1px;
  background: #fff;
}
.btnOpenClone {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  cursor: zoom-in;
}
.article-style figcaption {
  font-weight: 700;
  position: absolute;
  top: 2rem;
  right: 0;
  overflow: hidden;
  transition: transform 0.15s ease-in-out, opacity 0.15s;
  transform: translate(-2rem, 2rem);
  text-align: right;
  white-space: nowrap;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.article-style,
.imgFull {
  -webkit-backface-visibility: hidden;
}
.closeClone:before,
.footer-site,
.projects-footer {
  text-align: center;
}
.article-style:hover figcaption {
  z-index: 3;

  transform: translate(-2em, 2rem);
  opacity: 1;
}
.article-style > figure {
  width: 100%;
  margin: 0;
  background-color: #0d0c0c;

  order: 1;
}
.blog-text > .h1,
.list-items > h2,
.list-items > p {
  margin-right: auto;
  margin-left: auto;
}
.article-animated-content {
  z-index: -1;
  width: 100%;
  height: 0;
  padding: 0 3rem;
  background-color: #fff;

  order: 2;
}
.article-animated-content:after {
  content: '';
}
.article-animated-content h2 {
  font-weight: 400;
  display: block;
  overflow: hidden;
  width: 100%;
  margin-bottom: 1em;
  padding: 4rem 2rem;
  text-align: center;
  text-transform: uppercase;

  color: #131313;
}
.article-animated-content p {
  line-height: 1.4;

  position: relative;
  color: #424242;
}
.article-animated-content p a {
  color: #357cff;
}
.imgFull {
  position: absolute;
  top: 0;
  left: 0;

  display: none;
  width: 100%;
  backface-visibility: hidden;
}
.imgFull:not(.video) {
  height: 70vh;
  -o-object-fit: cover;
  object-fit: cover;
}
.imgFull .html5 {
  width: 100%;
  max-width: 100%;
  height: 70vh !important;
  -o-object-fit: cover;
  object-fit: cover;
}
.slidein .imgFull {
  display: block;
  -webkit-animation: 0.55s ease-in 0.1s both imgFullOpacity;
  animation: 0.55s ease-in 0.1s both imgFullOpacity;
}
.closeClone,
.slidein .articleBtn,
.slidein .btnOpenClone,
.slidein figcaption,
.slidein.slideout .closeClone,
.slidein.slideout .imgFull {
  display: none;
}
.article-style {
  backface-visibility: hidden;
}
.slidein {
  position: fixed;
  z-index: 10;
  overflow-y: scroll;

  margin: 0;
  cursor: text;
  -webkit-animation: 0.55s cubic-bezier(0.23, 1, 0.32, 1) both slideInArticle;
  animation: 0.55s cubic-bezier(0.23, 1, 0.32, 1) both slideInArticle;
  background: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.closeClone,
img.kt-img-lightbox-js {
  cursor: pointer;
}
.slidein figure {
  -webkit-animation: 0.55s cubic-bezier(0.23, 1, 0.32, 1) both slideInFigureHeight;
  animation: 0.55s cubic-bezier(0.23, 1, 0.32, 1) both slideInFigureHeight;
}
.slidein.slideout {
  z-index: 9;
  overflow: hidden;
  -webkit-animation: 0.55s cubic-bezier(0.23, 1, 0.32, 1) both slideOutArticle;
  animation: 0.55s cubic-bezier(0.23, 1, 0.32, 1) both slideOutArticle;
}
.slidein.slideout figure {
  -webkit-animation: 0.55s cubic-bezier(0.23, 1, 0.32, 1) both slideOutFigureHeight;
  animation: 0.55s cubic-bezier(0.23, 1, 0.32, 1) both slideOutFigureHeight;
}
.slidein .article-animated-content {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 60rem;
  height: auto;
  -webkit-animation: 0.55s ease-out both contentWrapperAnim;
  animation: 0.55s ease-out both contentWrapperAnim;
}
.slidein .article-animated-content header {
  -webkit-animation: 0.55s cubic-bezier(0.23, 1, 0.32, 1) 0.25s both contentAnim;
  animation: 0.55s cubic-bezier(0.23, 1, 0.32, 1) 0.25s both contentAnim;
}
.slidein .article-animated-content p {
  -webkit-animation: 0.55s cubic-bezier(0.23, 1, 0.32, 1) 0.7s both contentAnim;
  animation: 0.55s cubic-bezier(0.23, 1, 0.32, 1) 0.7s both contentAnim;
}
.slidein .closeClone {
  display: block;
}
.closeClone {
  position: absolute;
  z-index: 10;
  top: 1em;
}
.closeClone:before {
  font-size: 1rem;
  display: block;
  padding: 10px;
  cursor: pointer;
  color: #000;
  border-radius: 50%;
  background: #fff;
}
.blog-text > .h1,
.blog-text > p,
.projects-footer > h2 span,
.projects-footer > p {
  color: #fff;
}
.list-items {
  padding: 9em 0;
  border-bottom: 1px solid #eee;
  background: linear-gradient(to top, #f8f8f8 0, rgba(255, 255, 255, 0) 100%);
}
.list-items > h2 {
  font-weight: 400;

  max-width: 65rem;
}
.blog-text > p,
.list-items > p {
  font-weight: 600;

  max-width: 65rem;
}
.list-items > h2 span {
  display: block;
  max-width: 700px;
}
.list-items-container {
  max-width: 65rem;
  margin: 4.65em auto auto;
  padding-left: 0;
}
.list-item {
  margin-bottom: 2rem;
  padding: 2rem;
  list-style: none;
  border-radius: 2rem;
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(41, 37, 51, 0.1);
}
.list-item h2.h3 {
  font-weight: 700;
}
.list-item h2.h3 a {
  white-space: normal;

  color: #000;
}
.list-item p {
  font-size: 17px;
  margin-bottom: 2em;
}
.blog-items {
  background-color: #070707;
}
.blog-items.blog-items-home {
  align-items: center;
  justify-content: space-between;
}
.blog-text {
  padding: 5em 2em 2em;
}
.blog-text > .h1 {
  max-width: 65rem;
}
.blog-text > .h1 span {
  display: block;
  max-width: 700px;
}
.blog-text > p {
  margin-right: auto;
  margin-bottom: 1.65em;
  margin-left: auto;
}
.projects-footer > h2,
.projects-footer > p {
  max-width: 45rem;
  margin-right: auto;
  margin-left: auto;
  padding: 0 1em;
}
.blog-items-container {
  position: relative;
  padding: 2em 0;
  border-top: 1px solid #202020;
  border-left: none;
}
.blog-items-container:not(.blog-items-container-blog) {
  display: -ms-grid;
  display: grid;
  overflow: auto;

  height: 750px;
  white-space: nowrap;
  -ms-grid-columns: (auto) [7];
  grid-template-columns: repeat(7, auto);
  align-items: center;
  grid-gap: 5rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.blog-item:not(.blog-item-blog) {
  width: 350px;
}
.blog-item:not(.blog-item-blog):first-child {
  margin-left: 3em;
}
.blog-item {
  position: relative;
  display: inline-block;
  padding: 2rem;
  white-space: normal;
  border: 1px solid #f0f0f0;
  border-radius: 2rem;
  background-color: #fff;
}
.blog-item .mini-thumb,
.blog-item-blog .mini-thumb {
  position: absolute;
  right: 0;
  border-radius: 5px;
  box-shadow: -10px 10px 30px 0 #000;
}
.blog-item figure,
.blog-item h3 {
  margin-bottom: 1em;
}
.blog-item figure img {
  margin: 0 auto;
}
.blog-item.blog-mini-thumb-item .h3 {
  line-height: 1.2;

  max-width: 200px;
}
.blog-item .mini-thumb {
  top: 0;
  width: 120px;
  height: 120px;
  transform: translate(2em, -3em);
  -o-object-fit: cover;
  object-fit: cover;
}
.lightBox,
.lightBox .closelightbox {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.projects-footer {
  max-width: 1920px;
  margin-top: 1px;
  margin-right: auto;
  margin-left: auto;
  padding: 6em 0;
  border-bottom: 1px solid #eee;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0, #000 100%);
}
.projects-footer > h2 {
  font-weight: 400;

  margin-bottom: 1.35em;
}
.pagination ul,
.topNav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.navInput {
  display: none;
}
.topNav {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0 2em;
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
}
.topNav ul {
  display: flex;
  flex-direction: row;
}
.topNav ul li {
  margin-left: 1.2rem;
}
.topNav ul li a {
  font-weight: 700;

  padding: 5px 0;
}
.menuBtns {
  display: none;
}
.blog-items:not(.blog-items-home) {
  display: block;
}
.blog-items-container-blog {
  display: -ms-grid;
  display: grid;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 7em 2em;
  grid-gap: 6rem 2.5rem;
}
.lightBox.lightBoxVisible,
.pagination {
  display: flex;
}
.blog-text-blog > .h1,
.blog-text-blog > p {
  max-width: 70rem;
}
.blog-item-blog .mini-thumb {
  top: 0;
  transform: translate(1em, -3em);
  -o-object-fit: cover;
  object-fit: cover;
}
.pagination {
  flex-direction: row;
  padding: 0 1em 5em;
  justify-content: center;
}
.pagination ul {
  display: flex;
  flex-direction: row;
}
.pagination ul li a,
.pagination ul li span {
  font-size: 0.81rem;
  line-height: normal;

  display: inline-block;
  margin: 3px;
  padding: 5px 1em;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 2px;
  background: #1f1f1f;
}
.pagination ul li .currentPage {
  border: 1px solid #707070;
}
.kt hr {
  margin: 0 0 1.65em;
}
.kt figure {
  margin-bottom: 1.65em;
}
.kt figure.img-fullwidth img {
  width: 100%;
}
.kt figcaption {
  font-size: 85%;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.5rem;
}
.kt p {
  font-size: 18px;
  line-height: 30px;
}
.kt h3,
.kt h4,
.kt h5 {
  font-weight: 700;
}
.kt .link-dark,
.kt .link-light,
.kt a {
  font-weight: 600;
  white-space: nowrap;

  color: #357cff;
}
.kt .link-dark,
.kt .link-light {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.kt .link-dark {
  color: #f3f3f3;
}
figure.full img {
  width: 100%;
}
.info-red {
  margin-bottom: 0;
  padding: 2em;
  background-color: rgba(255, 115, 115, 0.39);
}
.lightBox {
  position: fixed;
  z-index: 10;

  display: none;
  padding: 2em;
  -webkit-animation-name: lbAnim;
  animation-name: lbAnim;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.lightBox .closelightbox {
  position: absolute;
  z-index: 1;
  cursor: zoom-out;
  color: #fff;
}
.lightBox .closelightbox span {
  font-size: 1.5em;
  font-weight: 400;

  position: absolute;
  top: 1em;
  right: 1.65em;
}
.lightBox img {
  position: relative;
  z-index: 2;

  max-width: 90vw;
  max-height: 90vh;
  -webkit-animation-name: animPopupImg;
  animation-name: animPopupImg;
  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.footer-site .footer-logo {
  padding: 6em 0;
}
.footer-site .social img,
.footer-site .social svg {
  display: inline-block;

  width: auto;
  max-height: 18px;
}
.footer-site .footer-contact {
  padding: 6em 1em;

  background-color: #f8f8f8;
}
.footer-site .contact-text {
  max-width: 600px;
  margin: 0 auto 2em;
}
.footer-site .copyright {
  font-size: 13px;
  display: block;

  margin-top: 2em;
  opacity: 0.8;
}
.footer-site .footer-email,
.footer-site .tel {
  display: inline-block;

  margin: 0 10px;
}
@media (min-width: 32rem) {
  .footer-site,
  .header,
  main {
    width: calc(100% - 4rem);
  }
}
@media (min-width: 48rem) {
  .home-header h1 {
    font-size: calc(2rem + 5vmin);
    line-height: 1.05;

    margin-left: 5vw;
  }
}
@media (min-width: 650px) {
  .article-style {
    width: calc(50% - 2px);
  }
}
@media (min-width: 651px) {
  .closeClone {
    right: 1em;
  }
}
@media (min-width: 769px) {
  .blog-items-container-blog {
    -ms-grid-columns: (1fr) [2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1050px) {
  .article-style figcaption {
    transform: translate(4rem, 2rem);

    opacity: 0;
  }
  .list-items-container {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(470px, 1fr));
    grid-auto-flow: dense;
    grid-gap: 2rem;
  }
  .list-item {
    margin-bottom: 0;
    padding: 3rem;
  }
  .list-item.list-item-large {
    -ms-grid-column-span: 2;
    grid-column: span 2;
  }
  .blog-items {
    display: flex;
    flex-direction: row;
  }
  .blog-text:not(.blog-text-blog) {
    width: 30%;
    padding: 0 2em;
  }
  .blog-text {
    min-width: 400px;
  }
  .blog-items-container:not(.blog-items-container-blog) {
    width: 65%;
    border-top: none;
    border-left: 1px solid #202020;
  }
}
@media (min-width: 1090px) {
  .article-style {
    width: calc(33.3333333% - 2px);
  }
}
@media (min-width: 1100px) {
  .blog-items-container-blog {
    -ms-grid-columns: (1fr) [3];
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .blog-items-container-blog {
    -ms-grid-columns: (1fr) [1];
    grid-template-columns: repeat(1, 1fr);
  }
  .blog-item-blog {
    max-width: 320px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (max-width: 649px) {
  .article-style {
    margin-bottom: 1em;
  }
}
@media (max-width: 64rem) {
  .menuBtns,
  .topNav .nav-mobile {
    -webkit-backface-visibility: hidden;
  }
  .menuBtn1,
  .navInput:checked ~ .topNav .menuBtns .menuBtn2 {
    transition: all 0.2s;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  .topNav .nav-mobile {
    display: none;
    opacity: 0;
    backface-visibility: hidden;
  }
  .navInput:checked ~ .home-h1 {
    transition: opacity 0.2s;
    opacity: 0;
  }
  .navInput:checked ~ .topNav .nav-mobile {
    position: absolute;
    top: 100px;
    left: 50%;
    display: flex;
    flex-direction: column;
    width: calc(90% - 4em);
    padding: 3em 0;
    -webkit-animation-name: animMenu;
    animation-name: animMenu;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    text-align: right;

    opacity: 1;
    border-radius: 5px;
    background: #000;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.815);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  .navInput:checked ~ .topNav .nav-mobile.nav-mobile-home {
    border: 1px solid #888;
  }
  .navInput:checked ~ .topNav .nav-mobile a {
    font-weight: 500;
    display: inline-block;
    margin-right: 1em;
    margin-bottom: 5px;
    padding: 0.5em;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: #fff;
  }
  .menuBtns {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #fff;
    backface-visibility: hidden;
  }
  .menuBtn1,
  .menuBtn2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    fill: #000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .menuBtn2 {
    transition: all 0.2s;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  .navInput:checked ~ .topNav .menuBtns .menuBtn1 {
    transition: all 0.2s;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
}