/* fonts */
@font-face {
  font-family: "SpaceGrotesk";
  src: url("../fonts/SpaceGrotesk-Regular.eot");
  src: url("../fonts/SpaceGrotesk-Regular.eot#iefix")
          format("embedded-opentype"),
      url("../fonts/SpaceGrotesk-Regular.woff2") format("woff2"),
      url("../fonts/SpaceGrotesk-Regular.woff") format("woff"),
      url("../fonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SpaceGrotesk";
  src: url("../fonts/SpaceGrotesk-Medium.eot");
  src: url("../fonts/SpaceGrotesk-Medium.eot#iefix")
          format("embedded-opentype"),
      url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2"),
      url("../fonts/SpaceGrotesk-Medium.woff") format("woff"),
      url("../fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPSupplySans";
  src: url("../fonts/PPSupplySans-Regular.woff2") format("woff2"),
       url("../fonts/PPSupplySans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* css reset */
* { -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:none; }
*:before,*:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; }

/* Scrollbars Styles */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #2C2D2E; }
::-webkit-scrollbar-thumb { background: #212121; }
::-webkit-scrollbar-thumb:hover { background: #008B0E; }

/* Chrome, Safari, Edge, Opera, Firefox */
button, input, input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; border: none; padding: 0; -moz-appearance: none; }
progress[value] { -webkit-appearance: none;  appearance: none; -moz-appearance: none; }
input, button { font-family: "SpaceGrotesk"; }
input[type=number] { -moz-appearance: textfield; }
input[type=file] { opacity: 0; display: none; }
textarea { resize: none; border: none; font-family: "SpaceGrotesk"; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.container * { transition: all .2s; }
body { font-family: "SpaceGrotesk"; font-weight: 400; background: #2C2D2E; margin: 0; width: 100%; color: #E9F0F4; }
h1, h2, h3, h4 { font-weight: 400; font-family: "PPSupplySans"; text-transform: uppercase; }
b, strong { font-family: "SpaceGrotesk"; font-weight: 500; }
a { text-decoration: none; transition: all .3s; color: #7AE823; }
a:hover { text-decoration: none; color: #8FFC3A; text-shadow: 0px 1px 25px rgba(122, 232, 35, 0.6); }
.wow { visibility: hidden; }

#overlayer { width: 100%; height: 100%; position: fixed; z-index: 9998;background: #212121; top: 0; left: 0; }
/**===== circle2 =====*/
#circle2 { display: block; z-index: 9999; position: fixed; top: 50%; left: 50%; height: 50px; width: 50px; margin: -25px 0 0 -25px;  border: 4px #2C2D2E solid; border-top: 4px #008B0E solid; border-radius: 50%; -webkit-animation: spin2 1s infinite linear; animation: spin2 1s infinite linear; }

@-webkit-keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
 }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
 }
}
@keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
 }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
 }
}
/** END of circle2 */

.spacer { flex: 1 1 0%; }
.over { overflow: hidden; }
.webapp { position: fixed; top: 0; left: 0; width: 100%; max-height: 100vh; height: 100vh; background: url(../img/bg.png) no-repeat center; background-size: cover; padding: 10px 0; display: flex; }
.container {  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas:  "side top top top" "side center center center" "side bottom1 bottom2 bottom3"; width: 95%; height: 100%; max-height: 1100px; max-width: 1300px; margin: auto; overflow: hidden; }
.container>.side { grid-area: side; border:  1px solid rgba(255, 255, 255, 0.6); padding: 30px 30px 35px 30px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-bottom-left-radius: 10px; border-top-left-radius: 10px; }
.container>.top { grid-area: top; border:  1px solid rgba(255, 255, 255, 0.6); border-left: none; border-top-right-radius: 10px; }
.container>.center { grid-area: center; border-right:  1px solid rgba(255, 255, 255, 0.6); }
.container>.bottom { border-top:  1px solid rgba(255, 255, 255, 0.6); border-bottom:  1px solid rgba(255, 255, 255, 0.6); }
.container>.bottom>div>p { margin: 15px 0 0 0; font-size: 11px; line-height: 16px; color: #D3D3D5; max-width: 220px; }
.container>.bottom1 { grid-area: bottom1; border-right: 1px solid rgba(255, 255, 255, 0.6); }
.container>.bottom2 { grid-area: bottom2; border-right:  1px solid rgba(255, 255, 255, 0.6); }
.container>.bottom3 { grid-area: bottom3; border-right:  1px solid rgba(255, 255, 255, 0.6); border-bottom-right-radius: 10px; }
.container>.top, .container>.center, .container>.bottom1, .container>.bottom2, .container>.bottom3 { min-height: 33.33%; position: relative; }
.container>.top>.pic  { position: absolute; top: -10px; right: -5px; z-index: -2; filter: brightness(90%); }
.container>.top>.pic>img { width: 600px; height: auto; display: block; }
.container>.center { padding: 30px; }
.container>.center { display: flex; align-items: center; }
.container>.center h1 { font-size: 48px; line-height: 66px; letter-spacing: 0.08em; text-transform: uppercase; color: #FBFFF8; margin: 0; max-width: 680px; }
.container>.top:before { content: ""; display: block; width: calc(100% + 30px); height: 300%; position: absolute; top: 100%; right: 0; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); z-index: -1; }
.container.intpage>.top:before { display: none; }
.container>.side .logo { width: 122.3px; height: auto; margin-top: 20px; }
.container>.side .text { width: 192.3px; height: auto; }
.container>.bottom { padding: 30px; display: flex; flex-direction: column; justify-content: space-between; }
.container>.bottom h2, .container>.center.text h2 { font-family: "PPSupplySans"; font-size: 15px; line-height: 18px; letter-spacing: 0.2em; text-transform: uppercase; color: #EAEAEA; margin: 0; }
.container>.bottom .links { color: #EAEAEA; font-size: 18px; line-height: 23px; }
.container>.bottom .links a { color: #7AE823; display: inline-block; position: relative; }
.container>.bottom .links a span { border-bottom: 1px solid transparent; }
.container>.bottom .links a:first-child { color: #7AE823; margin-bottom: 13px; }
.madeby { position: relative; overflow: hidden; }
.container>.bottom .links a:first-child i { color: #fff; font-style: normal; }
.container>.bottom .links a img { position: absolute; top: 0px; right: -11px; opacity: 0; }
.container>.bottom .links a:hover { text-decoration: none; }
.container>.bottom .links a:hover img { opacity: 1; }
.container>.bottom .links a:hover span { border-bottom: 1px solid hsla(94, 81%, 52%, 0.2); }
.madeby:before { content: ""; position: fixed; width: 100%; height: 100%; left: 0; right: 0; background: rgba(0, 0, 0, 0.9); z-index: 800; }
.madeby:after { content: "Design: Valentine Chernik HTML/CSS: Ilya Leoshko"; color: #63ff61; z-index: 900; position: fixed; top: 50%; width: 300px; font-size: 24px; left: 50%; transform: translate(-50%, -50%); }
.container>.center.text .inp0 { border: none; color: transparent; opacity: 0; position: absolute; }
.tooltip { position: absolute; display: inline-block; top: 27px; right: 27px; }
.tooltip button { border: none; background: transparent; color: #7AE823; font-size: 18px; line-height: 21px; text-transform: lowercase; position: relative; }
.tooltip button span { color: transparent; position: absolute; right: 0; top: 0; }
.tooltip button.copied { color: transparent; }
.tooltip button.copied span { color: rgba(218, 219, 216, 0.6);; }
.tooltip:hover button { cursor: pointer; }
.tooltip .tooltiptext { width: 140px; background-color: #008B0E; color: #fff; text-align: center; padding: 3px; position: absolute; z-index: -1; bottom: 150%; right: 0; opacity: 0; transition: opacity 0.3s; font-size: 12px; }
.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; right: 15px; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #008B0E transparent transparent transparent; }
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; z-index: 5; }
.container.intpage .top { padding: 40px 30px 20px; }
.container.intpage .top>div { display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; height: 100%; }
.container.intpage .top h1 { margin: 0; font-size: 42px; line-height: 60px; color: #FBFFF8; text-transform: uppercase; letter-spacing: 0.08em; }
.container.intpage .top a { font-size: 18px; line-height: 21px; display: flex; align-items: center; }
.container.intpage .top a img { margin-right: 16px; margin-top: -1px; }
.container.intpage .top a span { border-bottom: 1px solid transparent; }
.container.intpage .top a:hover img { filter: brightness(1.09); }
.container.intpage .top a:hover span { border-bottom: 1px solid hsla(94, 81%, 52%, 0.2); }
.container>.center.text { flex-direction: column; justify-content: space-between; align-items: initial; }
.container>.center.text.withtable { flex-direction: row; align-items: center; }
.container>.center.text div>p { font-size: 28px; line-height: 36px; color: #EAEAEA; margin-top: 0; margin-bottom: 11px; }
.container>.center.text div>p:last-child { margin-bottom: 0; }
.container>.center.text.withtable .table { width: 100%; }
.container>.center.text.withtable .table .row { display: flex; margin-bottom: 20px; }
.container>.center.text.withtable .table .row:last-child { margin-bottom: 0; }
.container>.center.text.withtable .table .row h3 { font-size: 15px; line-height: 18px;letter-spacing: 0.2em; text-transform: uppercase; color: #fff; margin: 0; min-width: 270px; margin-top: 7px; }
.container>.center.text.withtable .table .row>div { font-size: 22px; line-height: 28px; color: #EAEAEA; max-width: 460px; }
.container>.center.text.withtable .table .row>div>span { color: #7AE823; }
.container>.center.text.withtable .table .row>div>a span { border-bottom: 1px solid transparent; }
.container>.center.text.withtable .table .row>div>a:hover span { border-bottom: 1px solid hsla(94, 81%, 52%, 0.2); }
.container>.center.text.withtable .table .row>div>a { position: relative; }
.container>.center.text.withtable .table .row>div>a img { position: absolute; top: 0px; right: -11px; opacity: 0; }
.container>.center.text.withtable .table .row>div>a:hover img { opacity: 1; }
.container.intpage>.top>img { display: none; }
.cpyr { display: none; }
.sidemenu { opacity: 0; z-index: -2; position: fixed; padding: 28px; background: #008B0E; width: 100%; top: 0; left: 0; }
.sidemenu { display: flex; flex-direction: column; }
.sidemenu a, .sidemenu span { margin-bottom: 10px; font-size: 26px; line-height: 33px; color: #F5FCEF; }
.sidemenu span { margin-bottom: 25px; }
.sidemenu.open { opacity: 1; z-index: 10; }
.container.intpage>.top>.pic { display: none; }
#cookie_c { cursor: pointer; }
@media (max-height:920px){
  .webapp { display: block; }
  .container>.center h1 { font-size: 42px; line-height: 60px; }
}
@media (max-height:770px){
  .container>.center h1 { font-size: 36px; line-height: 54px; }
  .container>.center.text.withtable .table .row>div { font-size: 18px; line-height: 24px; }
}
@media (max-height:750px){
  .webapp { padding: 20px 0; overflow-y: auto; }
  .container { max-height: 720px; min-height: 600px; }
}
@media (max-width:1366px){
  .container { height: auto; max-height: 90%; min-height: 89%; }
}
@media (max-width:1280px){
  .container { height: 100%; max-height: 100%; }
}
@media (max-width:1024px){
  .container { margin-top: auto; }
}
@media (max-width:940px) {
  .webapp { padding: 0 10px 15px 10px; position: relative; height: auto; min-height: 100vh; max-height: initial; display: block; }
  .container { position: relative; max-width: 100%; max-height: 100%; height: auto; width: 100%; display: flex; flex-wrap: wrap; border: none; }
  .container>.side { border: none; padding: 0; height: 340px; justify-content: center; width: 100%; }
  .container>.side .logo { width: 105px; margin-top: 0; margin-bottom: 22px; }
  .container>.top, .container>.center, .container>.bottom1, .container>.bottom2, .container>.bottom3 { border-left:  1px solid rgba(255, 255, 255, 0.6); border-right:  1px solid rgba(255, 255, 255, 0.6);  border-bottom:  1px solid rgba(255, 255, 255, 0.6); padding: 20px; min-height: 280px; }
  .container>.top { padding: 0; min-height: 0; width: 100%; border: none; }
  .container>.bottom1, .container>.bottom2 { border-right: none; }
  .container>.center { padding-top: 40px; padding-bottom: 40px; width: 100%; border-top:  1px solid rgba(255, 255, 255, 0.6); border-bottom: none; border-top-left-radius: 10px; border-top-right-radius: 10px; }
  .container>.center h1 { font-size: 26px; line-height: 50px; letter-spacing: 0.08em; max-width: 320px; }
  .container>.bottom { width: 33.33%; }
  .container>.bottom .links  { font-size: 26px; line-height: 33px; }
  .container>.top>.pic { position: fixed; height: auto; right: -270px; top: 257px; }
  .container>.top>.pic>img { width: 500px; }
  .container>.bottom1 { border-bottom-left-radius: 10px; }
  .container>.top:before { display: none; }
  .container>.center:before { content: ""; display: block; width: 100%; height: 400%; position: absolute; top: 0; left: 0; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); z-index: -1; }
  .container.intpage>.side { display: none; } 
  .container.intpage>.top>img { display: block; }

}
@media (max-width:767px){
  .container>.bottom { width: 100%; }
  .container>.bottom1, .container>.bottom2 { border-right:  1px solid rgba(255, 255, 255, 0.6); border-bottom: 0; }
  .container>.bottom3 { border-bottom-left-radius: 10px; }
  .container>.bottom1 { border-bottom-left-radius: 0; }
  .container.intpage .top>div { flex-direction: column; height: auto; }
  .container.intpage .top { padding: 14px 4px; min-height: 220px; display: flex; justify-content: center; align-items: center; }
  .container.intpage .top h1 { font-size: 36px; line-height: 48px; text-align: center; width: 100%; margin-top: 14px; max-width: 350px; }
  .container.intpage>.top>.pic { top: 120px; display: block; }
  .container>.center { padding-top: 26px; }
  .tooltip { top: 20px; }
  .container.intpage .top a { position: absolute; top: 14px; left: 4px; margin-top: 0; }
  .container>.center.text.withtable .table .row { flex-direction: column; }
  .container>.center.text.withtable .table .row>div { font-size: 22px; line-height: 28px; }
  .container>.center.text.withtable .table .row h3 { margin-top: 0;margin-bottom: 12px; }
  .container>.center.text.withtable .table .row { margin-bottom: 30px; }
  .container>.center.text div>p { line-height: 33px; margin: 40px 0 22px; }
  .container>.center.text div>p:last-child { margin: 0 0 10px; }
  .container.intpage>.bottom { display: none; }
  .container.intpage>.center { border-radius: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.6); }
  .webapp { padding-bottom: 80px; }
  .cpyr { position: absolute; bottom: 28px; left: 14px; font-size: 18px; line-height: 21px; color: #7AE823; display: block; }
  .container>.bottom .links a img { opacity: 1; }
  .m_menu { display: flex; flex-direction: column; width: 14px; height: 12px; padding: 0; justify-content: space-between; position: absolute; right: 15px; z-index: 12; top: 15px; transform: rotate(45deg); }
  .m_menu span { height: 3px; width: 14px; background: #fff; display: block; }
  .webapp.on .m_menu { position: fixed; transform: rotate(0deg); }
  .webapp.on .m_menu span { position: absolute; }
  .webapp.on .m_menu span:last-child { top: 6px; transform: rotate(45deg); background: #2C2D2E; }
  .webapp.on .m_menu span:first-child { top: 6px; transform: rotate(-45deg); background: #2C2D2E; }
  .webapp.on .closer { position: fixed; z-index: 6; top: 0; left: 0; width: 100%; height: 100vh; background: transparent; }
}