@font-face { font-family: "Jura-Semi-Bold"; font-display: block; src: url("../fonts/JuraSemiBold.ttf"); }

@font-face { font-family: "MyriadPro-Regular"; font-display: block; src: url("../fonts/MyriadPro-Regular.ttf"); }

@font-face { font-family: "MyriadPro-Bold"; font-display: block; src: url("../fonts/MyriadPro-Bold.ttf"); }

@font-face { font-family: "Oswald-Regular"; font-display: block; src: url("../fonts/Oswald-Regular.ttf"); }

* { margin: 0; padding: 0; }

html, body { height: 100%; }

body { color: #292929; font: 500 12.85714px "Jura-Semi-Bold", sans-serif; background: #fff; margin: 0 !important; padding: 0; top: 0; }

/* ================================================ */
/* ================================================ */
/* CONTENT */
/* ================================================ */
#home-wrapper { display: grid; position: fixed; top: 0; left: 0; background: url(../img/bg-home.jpg) no-repeat; background-size: cover; width: 100%; min-height: 100%; }

label.nav__sidebar { display: none; }

#main-container { display: grid; grid-template-columns: 320px 1fr; }

#main-container #sidebar { height: 100vh; background: #292929; }

#main-container #sidebar .speed .speed-img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

#main-container #sidebar .cogwheel .cogwheel-img { display: block; max-width: 100%; height: auto; margin: 0 auto; padding: 0 0 0 16px; }

#main-container #sidebar .cogwheel .cogw-1 { display: block; position: absolute; width: 170px; height: 170px; top: 20px; left: 30px; animation: 5s linear 0s normal none infinite running cogw-1; animation--webkit-animation: 4s linear 0s normal none infinite running cogw-1; }

#main-container #sidebar .cogwheel .cogw-2 { display: block; position: absolute; width: 100px; height: 100px; top: 138px; left: 180px; animation: 4s linear 0s normal none infinite running cogw-2; animation--webkit-animation: 4s linear 0s normal none infinite running cogw-2; }

#main-container #sidebar .earth .earth-img { display: block; max-width: 100%; height: auto; margin: 0 auto; padding: 48px 0 0 16px; }

#main-container #sidebar .earth .point-earth { display: block; position: absolute; top: 34px; left: 156px; animation: jump 1s infinite; }

@keyframes jump { 0% { top: 0; }
  10% { top: -5px; }
  15% { top: -10px; }
  20% { top: -15px; }
  25% { top: -20px; }
  30% { top: -25px; }
  35% { top: -20px; }
  40% { top: -15px; }
  45% { top: -10px; }
  50% { top: 0; }
  55% { top: 5px; }
  60% { top: 10px; }
  65% { top: 15px; }
  70% { top: 20px; }
  75% { top: 25px; }
  80% { top: 20px; }
  85% { top: 15px; }
  90% { top: 10px; }
  95% { top: 5px; }
  100% { top: 0; } }

@keyframes cogw-1 { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

@-webkit-keyframes cogw-1 { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

@keyframes cogw-2 { 0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); } }

@-webkit-keyframes cogw-1 { 0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); } }

.strelka { width: 110px; height: 8px; background-color: #4f788b; border-radius: 50% 5px 5px 50%; position: absolute; left: 44px; top: 150px; transform: rotate(-10deg); transform-origin: 100%; animation: move 5s infinite; transition: .2s; animation-duration: 8s; }

@keyframes move { 0% { opacity: 1; }
  45% { opacity: 1; }
  60% { opacity: 1; }
  61% { transform: rotate(-10deg); }
  80% { transform: rotate(190deg); }
  100% { transform: rotate(-10deg); } }

.dot { width: 25px; height: 25px; background-color: #4f788b; border-radius: 100%; position: absolute; left: 144px; top: 142px; }

.navbar { position: relative; margin-top: 60px; height: auto; }

.navbar ul { list-style-type: none; margin: 0; }

.navbar ul li { border-bottom: solid 1px #646667; }

.navbar ul li a { display: block; position: relative; padding: 22px 0; color: #fff; text-decoration: none; font-family: "Oswald-Regular"; font-size: 24px; text-align: center; }

.navbar ul li a:hover { color: #9bdecf; }

.navbar ul li .active { color: #9bdecf; }

[aria-current]:not([aria-current="false"]) { color: #9bdecf; }

.contact { display: grid; position: relative; grid-template-rows: 1fr 1fr; margin-top: 20px; }

.contact .number { display: grid; position: relative; grid-template-columns: 120px 1fr; padding: 22px 0; }

.contact .number img { display: block; position: relative; height: auto; max-width: 100%; margin: auto; }

.contact .number__item { display: grid; position: relative; }

.contact .number__item a { display: block; position: relative; text-decoration: none; color: #9bdecf; font-family: "MyriadPro-Regular"; font-size: 24px; margin: auto; margin-left: 0; }

.contact .address { display: grid; position: relative; grid-template-columns: 120px 1fr; padding: 22px 0; }

.contact .address img { display: block; position: relative; height: auto; max-width: 100%; margin: auto; }

.contact .address a { display: block; position: relative; text-decoration: none; }

.contact .address__item { display: grid; position: relative; }

.contact .address__item p { display: block; position: relative; color: #9bdecf; font-family: "MyriadPro-Regular"; font-size: 24px; margin: 0; }

#content .content { display: block; position: relative; max-width: 100%; min-height: 623px; background: url(../img/tringl.png) no-repeat; background-size: 100% 100%; }

#content .content h1 { position: relative; text-align: center; color: #9bdecf; font-family: "Jura-Semi-Bold"; font-size: 46px; margin: 0; padding-top: 45px; line-height: 1.2; }

#content .content .number { display: none; position: relative; text-align: center; padding: 11px 0; }

#content .content .number img { display: inline-block; position: relative; height: auto; max-width: 100%; margin: auto; top: 4px; }

#content .content .number__item { display: inline-block; position: relative; top: -7px; left: 4px; }

#content .content .number__item a { display: block; position: relative; text-decoration: none; color: #9bdecf; font-family: "MyriadPro-Regular"; font-size: 34px; margin: auto; margin-left: 0; }

#content .content p.nice-price { position: relative; text-align: center; color: #fff; font-family: "Jura-Semi-Bold"; font-size: 34px; padding: 25px; margin: 0; line-height: 1.2; }

#content .content p.entrust-repair { position: relative; text-align: center; color: #fff; font-family: "Jura-Semi-Bold"; font-size: 28px; padding: 20px; margin: 0; line-height: 1.2; }

#content .content a { display: grid; grid-template-columns: 1fr; position: relative; text-decoration: none; color: #fff; font-family: "Jura-Semi-Bold"; font-size: 24px; text-align: center; width: 230px; margin: 0 auto; margin-top: 80px; }

#content .content .button { border: none; background: none; color: #fff; vertical-align: middle; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; }

#content .content .button:focus { outline: none; }

#content .content .button--pipaluk { padding: 12px 15px; color: #9bdecf; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#content .content .button--pipaluk.button--inverted { color: #fff; border: 2px solid #9bdecf; }

#content .content .button--pipaluk.button--inverted::before { border-color: #9bdecf; }

#content .content .button--pipaluk.button--inverted::after { background: #9bdecf; }

#content .content .button--pipaluk::before { border: 2px solid #9bdecf; -webkit-transform: scale3d(0.7, 0.7, 1); transform: scale3d(0.7, 0.7, 1); content: ''; border-radius: inherit; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s; -webkit-transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1); background: transparent; }

#content .content .button--pipaluk::after { content: ''; border-radius: inherit; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s; -webkit-transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1); background: #292929; }

#content .content .button--pipaluk:hover { color: #292929; }

#content .content .button--pipaluk:hover::before { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

#content .content .button--pipaluk:hover::after { -webkit-transform: scale3d(0.7, 0.7, 1); transform: scale3d(0.7, 0.7, 1); }

#content .content .button--pipaluk:hover::after, #content .content .button--inverted:hover::after { background-color: #9bdecf; }

#content-services { background: #fff; }

#content-services h1 { text-align: center; padding-top: 25px; font-family: "Oswald-Regular"; font-size: 30px; color: #9bdecf; font-weight: 500; }

#content-services .our { position: relative; margin: 50px 0; height: 700px; }

#content-services .our .serv { position: relative; height: 700px; overflow: auto; }

#content-services .our .serv  .our-services { display: grid; width: 100%; height: auto; grid-template-columns: 445px 445px; grid-template-rows: 334px 334px; grid-gap: 2rem; justify-content: center; align-content: start; }

#content-services .our .serv::-webkit-scrollbar { position: relative; width: 8px; height: 3px; }

#content-services .our .serv::-webkit-scrollbar-button { background-color: #5b6e7e; }

#content-services .our .serv::-webkit-scrollbar-track { background-color: #5b6e7e; }

#content-services .our .serv::-webkit-scrollbar-track-piece { background-color: #5b6e7e; }

#content-services .our .serv::-webkit-scrollbar-thumb { height: 40px; background-color: #9bdecf; border-radius: 3px; }

#content-services .our .serv::-webkit-scrollbar-corner { background-color: #5b6e7e; }

#content-services .our .serv::-webkit-resizer { background-color: #5b6e7e; }

#content-services .our .serv::-moz-scrollbar { position: relative; width: 8px; height: 3px; }

#content-services .our .serv::-moz-scrollbar-button { background-color: #5b6e7e; }

#content-services .our .serv::-moz-scrollbar-track { background-color: #5b6e7e; }

#content-services .our .serv::-moz-scrollbar-track-piece { background-color: #5b6e7e; }

#content-services .our .serv::-moz-scrollbar-thumb { height: 50px; background-color: #9bdecf; border-radius: 3px; }

#content-services .our .serv::-moz-scrollbar-corner { background-color: #5b6e7e; }

#content-services .our .serv::-moz-resizer { background-color: #5b6e7e; }

#content-services .our .serv  .our-services .item { display: block; position: relative; max-width: 445px; height: 334px; }

#content-services .our .serv  .our-services .item img { display: block; position: relative; max-width: 100%; height: 334px; }

#content-services .our .serv  .our-services .item p { position: absolute; width: 100%; font-family: "Jura-Semi-Bold"; font-size: 18px; text-align: center; color: #fff; line-height: 26px; vertical-align: middle; margin: 0; padding: 30px 0; bottom: 0; background-color: rgba(91, 110, 126, 0.7); }

#content-contact { background: #fff; }

#content-contact #map { width: 100%; height: 100%; }

footer { height: 38px; background: #5b6e7e; position: absolute; text-align: center; left: 0; right: 0; bottom: 0; width: 100%; }

footer .copyright { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }

footer .copyright a { position: relative; text-align: right; max-width: 100%; height: auto; margin: 0 5px; padding: 10px 0; font-family: "MyriadPro-Bold"; font-size: 14px; color: #fff; text-decoration: none; }

footer .copyright a img { position: relative; width: 13px; height: 13px; top: 1px; left: -4px; }

footer .copyright p { position: relative; text-align: left; margin: 0 5px; padding: 10px 0; font-family: "MyriadPro-Bold"; font-size: 14px; color: #fff; }

section.footer-txt { position: absolute; background: rgba(91, 110, 126, 0.7); height: 120px; bottom: 38px; width: auto; }

section.footer-txt .text { position: relative; padding: 15px 15px 15px 20px; margin-right: 20px; max-height: 120px; bottom: 0; overflow: auto; }

section.footer-txt .text p { position: relative; text-align: left; font-family: "Jura-Semi-Bold"; font-size: 16px; color: #fff; margin: 0; }

section.footer-txt .text h2 { position: relative; text-align: left; font-family: "Jura-Semi-Bold"; font-size: 24px; color: #fff; margin: 0; margin-top: 10px;}

section.footer-txt .text h3 { position: relative; text-align: left; font-family: "Jura-Semi-Bold"; font-size: 20px; color: #fff; margin: 0; margin-top: 10px;}

section.footer-txt .text::-webkit-scrollbar { position: relative; width: 8px; height: 3px; }

section.footer-txt .text::-webkit-scrollbar-button { background-color: #504d4e; }

section.footer-txt .text::-webkit-scrollbar-track { background-color: #504d4e; }

section.footer-txt .text::-webkit-scrollbar-track-piece { background-color: #504d4e; }

section.footer-txt .text::-webkit-scrollbar-thumb { height: 40px; background-color: #5b6e7e; border-radius: 3px; }

section.footer-txt .text::-webkit-scrollbar-corner { background-color: #504d4e; }

section.footer-txt .text::-webkit-resizer { background-color: #504d4e; }

section.footer-txt .text::-moz-scrollbar { position: relative; width: 8px; height: 3px; }

section.footer-txt .text::-moz-scrollbar-button { background-color: #504d4e; }

section.footer-txt .text::-moz-scrollbar-track { background-color: #504d4e; }

section.footer-txt .text::-moz-scrollbar-track-piece { background-color: #504d4e; }

section.footer-txt .text::-moz-scrollbar-thumb { height: 50px; background-color: #5b6e7e; border-radius: 3px; }

section.footer-txt .text::-moz-scrollbar-corner { background-color: #504d4e; }

section.footer-txt .text::-moz-resizer { background-color: #504d4e; }

/* ================================================ */
/* ================================================ */
/* 404 */
/* ================================================ */
#wrapper-error { display: grid; position: fixed; top: 0; left: 0; background: #fff; width: 100%; min-height: 100%; }

#wrapper-error .number { display: grid; position: relative; grid-template-columns: 120px 1fr; margin-left: 20%; }

#wrapper-error .number img { display: block; position: relative; height: auto; max-width: 100%; margin: auto; }

#wrapper-error .number__item { display: grid; position: relative; }

#wrapper-error .number__item a { display: block; position: relative; text-decoration: none; color: #5b6e7e; font-family: "MyriadPro-Regular"; font-weight: 800; font-size: 24px; margin: auto; margin-left: 0; }

#wrapper-error .error { position: relative; }

#wrapper-error .error .container { position: relative; margin: 0 9%; }

#wrapper-error .error .container .error-404 { display: grid; position: relative; grid-template-columns: 1fr; justify-items: center; }

#wrapper-error .error .container .error-404 img { display: block; position: relative; max-width: 100%; height: auto; margin: 0 auto; }

#wrapper-error .error .container .error-404 h1 { position: relative; text-align: center; font-family: "Oswald-Regular"; font-weight: 600; font-size: 55px; color: #5b6e7e; margin-top: -158px; text-rendering: optimizeLegibility; }

#wrapper-error .error .container .error-404 p { position: relative; text-align: center; padding: 36px 0; font-family: "Oswald-Regular"; font-weight: 500; font-size: 24px; color: #292929; margin-top: -100px; text-rendering: optimizeLegibility; }

#wrapper-error .error .container .error-404 .return { position: relative; margin: 0 auto; cursor: pointer; width: 270px; height: 60px; }

#wrapper-error .error .container .error-404 .return a { display: block; font-size: 18px; font-family: "Oswald-Regular"; color: #292929; text-decoration: none; text-align: center; padding: 16px 0; font-weight: 400; background: #9bdecf; }

#wrapper-error .error .container .error-404 .return a:hover { background: #3f6b61; color: #fff; }

/* Media @mixin ==============================*/
@media only screen and (max-width: 1700px) { 
  #content-services .our .serv .our-services .item img { width: 100%; }
 }

@media only screen and (max-width: 1280px) { #content-services .our .serv .our-services { display: grid;  grid-template-columns: 350px 350px; }
  #content-services .our .serv .our-services div div { width: 350px; } }

@media only screen and (max-width: 1170px) { #content-services .our .serv .our-services { display: grid; }
  #content-services .our .serv .our-services div div { width: 300px; } }

@media only screen and (max-width: 1100px) { #content-services .our .serv .our-services { display: grid;  grid-template-columns: 200px 200px; }
  #content-services .our .serv .our-services div div { width: 250px; } }

@media only screen and (max-width: 850px) { #home-wrapper { background: url(../img/bg-home-table.jpg) no-repeat; background-size: cover; position: relative; height: 100vh; }
  #wrapper-error { position: relative; }
  label.nav__sidebar { display: block; position: absolute; color: #fff; cursor: pointer; top: 24px; left: 26px; z-index: 2; }
  .page-template-contact label.nav__sidebar { top: 70px; }
  #content .content h1 { font-size: 32px; }
  #content .content p.nice-price { font-size: 24px; padding: 0; }
  #content .content p.entrust-repair { font-size: 20px; }
  #content .content .number { display: block; }
  #content .content a { margin-top: 30px; }
  #main-container { grid-template-columns: 1fr; }
  #main-container #sidebar { display: none; position: absolute; width: 300px; height: 100%; z-index: 3; }
  #main-container #sidebar label.nav__sidebar { position: absolute; color: #fff; cursor: pointer; top: 10px; left: 83%; z-index: 2; }
  #content .content { background: url(../img/tringl-table.png) no-repeat; background-size: 100% 100%; }
  #content-services .our .serv .our-services { display: grid; grid-template-columns: repeat(auto-fit, 320px); justify-content: center; }
  #content-contact #map { position: relative; height: 100vh; }
  section.footer-txt { margin-top: 300px; bottom: 38px; padding: 0 15px; }
  footer { position: absolute; }
  .page-template-services footer { position: relative; height: 42px; }
  .page-template-contact footer { position: relative; height: 42px; } }

@media only screen and (max-width: 800px) { #wrapper-error .number { margin-left: 0; } #content-services .our-services div img { height: 290px; } }

@media only screen and (max-width: 768px) {
  #wrapper-error .number { margin-top: -120px; }
  #wrapper-error .error { margin-top: -130px; } }

@media only screen and (max-width: 700px) { #content .content h1 { font-size: 30px; }
  #content .content p.nice-price { font-size: 30px; }
  #content .content p.entrust-repair { font-size: 24px; }
  #content-services .our .serv .our-services div img { width: 100%; height: 220px; }
 }

@media only screen and (max-width: 600px) { #content .content { background: url(../img/tringl-mobile.png) no-repeat; background-size: 100% 100%; }
  #content .content h1 { font-size: 30px; padding-top: 60px; }
  #content .content p.nice-price { font-size: 30px; }
  #content .content p.entrust-repair { font-size: 24px; }
  section.footer-txt { margin-top: 100px; }
  footer { height: 42px; }
  .page-template-services #home-wrapper { height: 100vh; position: relative; }
  .page-template-services footer { position: absolute; }
  .page-template-contact #home-wrapper { height: 100vh; position: relative; }
  .page-template-contact footer { position: absolute; }
  #wrapper-error .error .container .error-404 h1 { margin-top: -62px; }
  #wrapper-error .error .container .error-404 p { margin-top: -16px; } }

@media only screen and (max-width: 550px) { #home-wrapper { height: auto; }
  #content-services .our .serv .our-services .item img { width: 100%; }
  footer .copyright a { text-align: center; margin: 0 auto; }
  footer .copyright p { text-align: center; margin: 0 auto; }
  .page-template-services footer { position: relative; bottom: 0; }
  .page-template-contact footer { bottom: 0; } }

@media only screen and (max-width: 480px) { #home-wrapper { background: url(../img/bg-home-mobile.jpg) no-repeat; background-size: cover; }
  #content-services .our { position: relative; height: auto; width: auto; margin: auto; }
  #content-services .our .serv { position: relative; height: auto; overflow: none; }
  #content-services .our .serv .our-services { grid-template-columns: 1fr; }
  #content .content h1 { font-size: 28px; }
  #content .content p.nice-price { font-size: 28px; }
  #content .content p.entrust-repair { font-size: 24px; padding: 10px 10px 0; }
  section.footer-txt { position: absolute; margin-top: 100px; }
  footer { height: 54px; }
  footer .copyright { grid-template-columns: 1fr; }
  footer .copyright a, footer .copyright p { padding: 2px 0; }
  .page-template-services footer { height: 50px; }
  .page-template-contact footer { height: 50px; }
  #content .content h1{padding-top:15px}
  #content .content a{margin-top:10px}
  section.footer-txt{bottom:50px}
}

/****Height****/
@media only screen and (max-width: 1900px) and (max-height: 960px) { .contact { margin-top: 0; }
  .contact .number { padding: 7px 0; }
  .contact .address { padding: 7px 0; } }

@media only screen and (max-width: 1900px) and (max-height: 900px) { .navbar { margin-top: 0; } }

@media only screen and (max-width: 1900px) and (max-height: 870px) { #content-services h1 { padding-top: 0; }
  #content-services .our .serv .our-services { margin: 0; } }

@media only screen and (max-width: 1900px) and (max-height: 840px) { .navbar ul li a { padding: 10px 0; } }

@media only screen and (max-width: 1900px) and (max-height: 820px) { #content-services .our .serv .our-services { grid-gap: 25px; } }

/**************/
@media only screen and (max-width: 1900px) and (max-height: 800px) { #home-wrapper { position: fixed; height: auto; } #main-container #sidebar { height: 100%; } .navbar { margin-top: 0; }
  .contact .address { padding: 0; }
  #content-services .our .serv .our-services { grid-template-columns: repeat(auto-fit, 345px); } }

@media only screen and (max-width: 1900px) and (max-height: 740px) { #home-wrapper {position: relative;} .contact { margin-top: 0; } }

@media only screen and (max-width: 1900px) and (max-height: 600px) { #home-wrapper { position: absolute; height: auto; }
  section.footer-txt { position: relative; margin-top: 300px; bottom: 0; }
  .window_wrap { position: relative; }
  #main-container #sidebar { height: 100%; }
  footer { position: relative; }
  .page-template-services footer { position: relative; height: 50px; }
  .page-template-contact footer { position: relative; height: 50px; } }