/* Roboto font is now loaded via an async in the HTML with preconnect, instead of a render-blocking @import here. */ @font-face { font-family: "AGAvalancheC"; src: url("../fonts/AGAvalancheC.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "AGAvalancheC"; src: url("../fonts/AGAvalancheC-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; font-display: swap; } html { font-family: "Roboto"; font-size: 20px; font-weight: normal; line-height: 1.2; color: #000000; } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } h1, h2, h3 { color: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; margin: 0; padding: 0; font-family: inherit; } .h1 { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; } p { margin: 0; } div, section { position: relative; } image, video { max-width: 100%; } .italic { font-style: italic; } .underline { text-decoration: underline; } .fw300 { font-weight: 300; } .fw400 { font-weight: 400; } .bold, b { font-weight: 700; } .fw900 { font-weight: 900; } .fw300 { font-weight: 300; } .disable-selection { -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .invisible { visibility: hidden; opacity: 0; } table, th, td { border-collapse: collapse; } a { text-decoration: none; color: inherit; outline: none; } a:hover { color: inherit; text-decoration: none; } .nobr { white-space: nowrap; } .flex-break { -ms-flex-preferred-size: 100%; flex-basis: 100%; height: 0; } .wrap { overflow: hidden; position: relative; background: #fff; } .d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-grid { display: grid !important; } .container { width: 100%; margin-right: auto; margin-left: auto; max-width: 910px; position: relative; } nav { height: 65px; width: 100%; top: 0; position: fixed; left: 0; z-index: 10; font-size: 17px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 115px; color: #fff; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: -webkit-gradient( linear, left top, left bottom, from(rgba(7, 13, 46, 0.7)), color-stop(50%, rgba(7, 13, 46, 0.4)), to(rgba(7, 13, 46, 0)) ); background: linear-gradient( 180deg, rgba(7, 13, 46, 0.7) 0%, rgba(7, 13, 46, 0.4) 50%, rgba(7, 13, 46, 0) 100% ); -webkit-transition: background 0.3s, height 0.3s, top 0.5s; transition: background 0.3s, height 0.3s, top 0.5s; } .nav__logo { width: 300px; position: relative; } .nav__tabs, .nav__tabs-inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .nav__tab { margin: 0 7px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-transition: color 0.3s; transition: color 0.3s; color: transparent; position: relative; } .nav__tab > div { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -65%); transform: translate(-50%, -65%); color: #fff; white-space: nowrap; } .nav__tab:hover > div { color: #fdec06; font-weight: bold; } .nav__lang-ua { background: #f9e931; } .nav__lang-ua::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 50%; background: #0d58a5; } .nav__lang-ru { background: #0d58a5; } .nav__lang-ru::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 33%; background: #fff; } .nav__lang-ru::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 33%; background: #ff0000; } .nav__lang-selector { position: relative; display: inline-block; width: 55px; height: 30px; margin-top: -5px; cursor: pointer; } .nav__lang-select-btn { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-left: 10px; } .nav__lang-selector:hover .nav__lang-select-btn:not(.active) { -webkit-transform: translateY(calc(100% + 5px)); transform: translateY(calc(100% + 5px)); } .nav__lang-select-btn.active { z-index: 2; pointer-events: none; } .nav__lang-ua { background: #f9e931; } .nav__lang-ua::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 50%; background: #0d58a5; } .nav__lang-ru { background: #0d58a5; } .nav__lang-ru::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 33%; background: #fff; } .nav__lang-ru::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 33%; background: #ff0000; } .nav__social { display: grid; grid-template-columns: 30px 30px 30px; grid-gap: 10px; margin-top: -5px; } .fs-header { font-size: 38px; } .fs-subHeader { font-size: 26px; } footer { position: relative; margin-top: 150px; text-align: justify; font-size: 14px; } footer::before { content: ""; position: absolute; /* pointer-events: none; */ left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: -75px; width: 300vw; height: 300vw; border-radius: 50%; background: -webkit-gradient( linear, left top, left bottom, color-stop(1.12%, rgba(157, 157, 157, 1)), color-stop(5.58%, rgba(149, 149, 149, 0.82)), color-stop(7.66%, rgba(140, 140, 139, 0.46)), color-stop(12%, rgba(137, 137, 136, 0)) ); background: linear-gradient( -180deg, rgba(157, 157, 157, 1) 1.12%, rgba(149, 149, 149, 0.82) 5.58%, rgba(140, 140, 139, 0.46) 7.66%, rgba(137, 137, 136, 0) 12% ); opacity: 0.3; } .footer__bottom-text { position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: unset; width: 120%; margin-top: 50px; } .footer__link { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .footer__link > a { text-decoration: underline; text-transform: uppercase; margin: 25px; color: rgb(190, 189, 189); font-weight: 500; } .footer__link > a:hover { text-decoration: none; } .nav__menu-btn { display: none; } @media all and (max-width: 1400px) { } @media all and (max-width: 1200px) { nav { padding: 0 50px; font-size: 14px; } .nav__logo { width: 250px; } .footer__bottom-text { width: 100%; } } @media all and (max-width: 991px) { .container { max-width: 720px; } .nav__delimiter { display: none; } .nav__lang-selector { right: 50px; top: 0; position: absolute; } .nav__tabs { position: relative; -ms-flex-item-align: start; align-self: flex-start; } .nav__tabs-inner { position: absolute; top: calc(100% + 15px); right: 0; width: 150px; height: 0; overflow: hidden; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-item-align: start; align-self: flex-start; -webkit-transition: height 0.3s, opacity 0.3s; transition: height 0.3s, opacity 0.3s; opacity: 0; } nav.active .nav__tabs-inner { height: 120px; opacity: 1; } .nav__tab { margin: 0; } nav { font-size: 16px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; padding-top: 20px; height: 70px; background: -webkit-gradient( linear, left top, left bottom, from(rgba(7, 13, 46, 0.8)), color-stop(80%, rgba(7, 13, 46, 0.5)), to(rgba(7, 13, 46, 0)) ); background: linear-gradient( 180deg, rgba(7, 13, 46, 0.8) 0%, rgba(7, 13, 46, 0.5) 80%, rgba(7, 13, 46, 0) 100% ); } nav.active { height: 200px; background: -webkit-gradient( linear, left top, left bottom, from(rgba(7, 13, 46, 0.9)), color-stop(90%, rgba(7, 13, 46, 0.5)), to(rgba(7, 13, 46, 0)) ); background: linear-gradient( 180deg, rgba(7, 13, 46, 0.9) 0%, rgba(7, 13, 46, 0.5) 90%, rgba(7, 13, 46, 0) 100% ); } .nav__menu-btn { position: relative; display: block; width: 30px; height: 30px; margin-top: -5px; } .nav__menu-btn > span { position: absolute; width: 100%; height: 1px; background: #fff; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: top 0.15s 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; transition: top 0.15s 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; transition: top 0.15s 0.15s ease-in-out, transform 0.15s ease-in-out; transition: top 0.15s 0.15s ease-in-out, transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; } .nav__menu-btn > span:nth-child(1) { top: 0; } .nav__menu-btn > span:nth-child(2) { top: 33.333%; } .nav__menu-btn > span:nth-child(3) { top: 66.666%; } .nav__menu-btn > span:nth-child(4) { top: 100%; } .nav__logo { margin-top: -5px; } nav.active .nav__menu-btn > span { top: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); -webkit-transition: top 0.15s ease-in-out, -webkit-transform 0.15s 0.15s ease-in-out; transition: top 0.15s ease-in-out, -webkit-transform 0.15s 0.15s ease-in-out; transition: top 0.15s ease-in-out, transform 0.15s 0.15s ease-in-out; transition: top 0.15s ease-in-out, transform 0.15s 0.15s ease-in-out, -webkit-transform 0.15s 0.15s ease-in-out; } nav.active .nav__menu-btn > span:last-child { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } } @media all and (max-width: 767px) { .container { max-width: 540px; width: calc(100% - 30px); } nav { padding: 15px; height: 60px; } .nav__logo { width: 160px; margin-top: 0; } .nav__lang-select-btn { margin-left: 0; width: 25px; height: 25px; } .nav__lang-selector { width: 25px; height: 25px; right: 35px; } .nav__menu-btn { width: 25px; height: 25px; } }