:root{--color-indigo-500:#6366f1;--color-indigo-700:#4338ca;--color-gray-900:#111827;--text:var(--color-gray-900);--link-active:var(--color-indigo-500);--link-hover:var(--color-indigo-700);--size-home_grid-height-min:300px;--size-home_grid-height-max:400px;--size-home_grid-width-min:300px;--size-home_grid-width-max:400px;--size-app-width:1440px;--space-home_grid-gap:24px;--font-heading:"rokkitt";}@font-face{font-family:"jakarta";src:url("fonts/plus_jakarta_sans.ttf") format("truetype");}@font-face{font-family:"rokkitt";src:url("fonts/rokkitt.ttf") format("truetype");}.ptop-4{padding-top:4px;}.ptop-12{padding-top:12px;}.ptop-16{padding-top:16px;}.ptop-20{padding-top:20px;}.ptop-24{padding-top:24px;}.ptop-32{padding-top:32px;}.ptop-60{padding-top:60px;}.ptop-32{padding-top:30px;}.subheader_wrapper li a{color:#505050;}.subheader_wrapper .subheader_active a{color:#1ab9fd;}.contact_form{width:90%;padding-right:10px;max-width:460px;margin:auto;}.thumb li a{display:block;width:220px;}#hiddenframe{height:1%;width:0px;position:absolute;border:none;margin:0 auto;}#dark{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;visibility:hidden;background-color:rgba(0,0,0,0.4);}.modal_window{margin:0 auto;width:400px;background-color:#fff;box-shadow:0 0 20px rgba(0,0,0,0.4);-moz-box-shadow:0 0 20px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.4);border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;box-shadow:0 3px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 0 20px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.4);}.input_01{border-radius:5px;border:none;height:30px;width:100%;max-width:470px;padding-left:10px;outline:none;background-color:#f2f2f2;}.btn_send{width:170px;height:30px;background-color:#719fb3;border-radius:20px;text-align:center;font-size:18px;color:#fff;padding-top:9px;margin:auto;}.btn_send:hover{background-color:#3db5ea;cursor:pointer;}.thumb_title div{display:inline-block;}#message{padding-top:10px;height:180px;}.footer a{color:#2b2b2b;display:inline-block;}.content_wrapper{width:90%;max-width:var(--size-app-width);margin:auto;}.header{width:90%;margin:auto;max-width:1440px;height:116px;display:flex;columns:2;flex-flow:row nowrap;justify-content:space-between;align-items:center;}.logo{width:74px;height:14px;background-image:url("img/oldhorse_logo.svg");background-repeat:no-repeat;}.logo:hover{color:var(--link-hover);}.main_menu_wrapper{height:116px;font-size:16px;line-height:116px;font-weight:600;display:flex;flex-flow:row nowrap;gap:40px;}.main_menu_wrapper a:hover{color:var(--link-hover);}.main_menu_wrapper .active{color:var(--link-active);}.home_grid{width:100%;max-width:var(--size-app-width);display:flex;flex-wrap:wrap;flex-direction:row;gap:var(--space-home_grid-gap);margin:auto;justify-content:left;}.home_grid-cell{display:block;max-height:var(--size-home_grid-height-max);min-height:var(--size-home_grid-height-min);background-size:cover;background-position:center;min-width:var(--size-home_grid-width-min);max-width:var(--size-home_grid-width-max);flex-grow:1;flex-shrink:1;margin:auto;}html,body{width:100%;height:100%;margin:0;padding:0;border:none;background-color:var(--bg-app);font-family:jakarta,inter,arial,sans-serif;font-weight:400;color:var(--text);overflow:scroll;font-variant-ligatures:no-common-ligatures;}div{overflow:visible;}a{text-decoration:none;outline:none;color:var(--text);}p{margin:12px;}.article_body{color:var(--text);padding:0 var(--spacing-content_block-l-r) 0 var(--spacing-content_block-l-r);}.body1,.article_body{font-size:16px;font-weight:400;line-height:24px;letter-spacing:0.02;color:var(--text);}.h1{font-size:60px;font-family:var(--font-heading);line-height:72px;font-weight:800;}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0;}.page_title{}@media screen and (max-width: 372px) {
  .btn-header-text {
    font-size: 14px;
  }
  .cover-web-screenshot-panoptique_01 {
    padding-bottom: 50px;
  }
  .cover-web-screenshot-panoptique_02 {
    padding-bottom: 50px;
  }
  .cover-label {
    padding-top: 50px;
    padding-bottom: 60px;
  }
  .icon-arrow {
    left: 84%;
  }
  .logo-panoptique {
    padding-bottom: 50px;
  }
}

@media screen and (max-width: 1200px) {
  .wrapper-personal_projects {
    width: 100%;
    max-width: 600px;
    margin: auto;
  }
}

@media screen and (max-width: 600px) {
  .cover-web-screenshot-nextwogames {
    width: 250%;
    margin-left: -75%;
  }
  .cover-mobile {
    margin-left: -15%;
    width: 130%;
  }
}

@media screen and (max-width: 1080px) {
  .cover-web-screenshot-panoptique_01,
  .cover-web-screenshot-panoptique_02 {
    margin-left: -5%;
  }
  .wrapper-main_menu {
    right: 20px;
  }
}

@media screen and (max-width: 960px) {
  .wrapper-main_menu {
    width: 180px;
    right: 0;
    top: 30px;
    display: block;
    margin: auto;
    position: relative;
  }
}

@media screen and (max-width: 742px) {
  .subheader_wrapper {
    width: 100%;
    padding-top: 0px;
  }
  .subheader_wrapper li {
    display: block;
    text-align: center;
    font-size: 1em;
    padding-left: 0px;
    padding-bottom: 30px;
  }
}@media screen and (max-width: 999px) {
  .iphone {
    border-radius: 4px;
  }
  .social_icons li {
    display: block;
  }
  .social_icons {
    height: auto;
    width: 300px;
    margin: auto;
  }
  .instagram_icon {
    margin-left: 0px;
  }
  .dribbble_icon {
    margin-left: 0px;
  }
  .social_links li {
    display: inline-block;
    margin-bottom: 25px;
  }
  .web_sample_wrapper {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .hero_image {
    margin-top: 30px;
  }
}

@media screen and (max-width: 400px) and (min-width: 50px) {
  .item {
    width: 100%;
  }
}

@media screen and (max-width: 600px) and (min-width: 401px) {
  .item {
    width: 100%;
  }
}

@media screen and (max-width: 1200px) and (min-width: 600px) {
  .item {
    width: 50%;
  }
}

@media screen and (max-width: 1600px) and (min-width: 1201px) {
  .item {
    width: 33%;
  }
}

@media screen and (max-width: 2000px) and (min-width: 1601px) {
  .item {
    width: 25%;
  }
}

@media screen and (max-width: 2400px) and (min-width: 2001px) {
  .item {
    width: 20%;
  }
}

@media screen and (max-width: 2800px) and (min-width: 2401px) {
  .item {
    width: 16.6%;
  }
}

@media screen and (max-width: 3200px) and (min-width: 2801px) {
  .item {
    width: 14.2%;
  }
}

@media screen and (max-width: 3600px) and (min-width: 3201px) {
  .item {
    width: 12.5%;
  }
}

@media screen and (max-width: 870px) {
  .services_block {
    text-align: center;
    width: 100%;
    display: block;
  }
}

@media screen and (max-width: 900px) {
  .ipad {
    width: 90%;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    margin: auto;
    border-radius: 10px;
    height: auto;
  }
  .ipad img {
    border-radius: 2px;
  }
}

@media screen and (max-width: 1200px) {
  .covers .full_width {
    width: 150%;
    margin-left: -25%;
  }
  .testimonials_wrapper {
    width: 100%;
    max-width: 580px;
  }
}

@media screen and (max-width: 372px) {
  .title_home_page li {
    display: block;
  }
}@media screen and (max-width: 640px) {
  .flex-block-cols-2 {
    columns: 1;
    flex-direction: column;
  }
  .col-1 {
    flex: 2;
  }
  .flex-block-cols-3 {
    flex-direction: column;
  }
}@media screen and (max-width: 1550px) {
  .home_grid-cell-width-2 {
    flex-basis: calc(
      100% - var(--size-home_grid-width-1) - var(--space-home_grid-gap)
    );
    flex-shrink: 1;
  }
}

@media screen and (max-width: 1024px) {
  .home_grid-cell-width-2 {
    width: 100%;
  }
  .home_grid-cell-width-1 {
    width: 100%;
  }
}

@media screen and (max-width: 640px) {
  .image_grid-cell-width-1 {
    width: 100%;
  }
}@media screen and (max-width: 1550px) {
}

@media screen and (max-width: 1024px) {
}@media screen and (max-width: 360px) {
  .header {
    flex-flow: column;
    justify-content: center;
    columns: 1;
    height: max-content;
  }
  .logo {
    margin: 24px 0 0 0;
  }
  .main_menu_wrapper {
  }
}@media screen and (max-width: 1550px) {
  .home_grid-cell-width-2 {
    flex-basis: calc(
      100% - var(--size-home_grid-width-1) - var(--space-home_grid-gap)
    );
    flex-shrink: 1;
  }
}

@media screen and (max-width: 1024px) {
  .home_grid-cell-width-2 {
    flex-basis: 100%;
  }
  .home_grid-cell-width-1 {
    flex-basis: 100%;
  }
}

@media screen and (max-width: 500px) {
  .home_grid-cell-width-1 {
    flex-basis: 100%;
    min-width: 320px;
  }
  .home_grid-cell {
    width: 100%;
    min-width: 320px;
  }
}@media screen and (max-width: 1024px) {
  :root {
    --gap-xl: 60px;
  }
}