html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
object{ outline: 0; }
strong, b, strong *, b * { font-weight: bold; }
em, i, em *, i * { font-style: normal !important; }
a:focus, input:focus{ outline-style: none; }
textarea{ outline: none; }
*{ box-sizing: border-box; }

body{ color: #fff; background: #000; font-size: 14px; line-height: 21px; padding: 0; font-family: 'Onest', sans-serif;  }


.text{ font-size: 18px; line-height: 1.7; font-family: "Libre Baskerville", serif; color: #15364B }
    .text.center{ text-align: center; }

.langs{ height: 50px; margin-left: 10px; }

/* Grid */
.grid{ display: grid; grid-gap: 64px; }
    .grid.narrow{ grid-gap: 32px; }
	.grid.no-gap{ grid-gap: 0; }
    .grid.grid-2{ grid-template-columns: 1fr 1fr; }
    .grid.grid-3{ grid-template-columns: 1fr 1fr 1fr; }
    .grid.grid-4{ grid-template-columns: 1fr 1fr 1fr 1fr; }
    .grid.grid-5{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    .grid.grid-6{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
    .grid.grid-2-3{ grid-template-columns: 2fr 3fr; }
    .grid.grid-3-9{ grid-template-columns: 3fr 9fr; }
    .grid.grid-9-3{ grid-template-columns: 9fr 3fr; }
    .grid.grid-7-5{ grid-template-columns: 7fr 5fr; }
    .grid.grid-6-4{ grid-template-columns: 6fr 4fr; }
    .grid.grid-3-1{ grid-template-columns: 3fr 1fr; }
    .grid.grid-1-3{ grid-template-columns: 1fr 3fr; }
    .grid.grid-1-2{ grid-template-columns: 1fr 2fr; }
    .grid.grid-5-2{ grid-template-columns: 5fr 2fr; }

.h1{ font-size: 36px; font-weight: 700; line-height: 1.3; }
.h2{ font-size: 30px; font-weight: 700; line-height: 1.3; }
.h3{ font-size: 24px; font-weight: 700; line-height: 1.3; }
.h4{ font-size: 20px; font-weight: 700; line-height: 1.3; }
.h5{ font-size: 18px; font-weight: 700; line-height: 1.3; }
.h6{ font-size: 16px; font-weight: 700; line-height: 1.3; }


/* Margin */

.m-0{ margin: 0 !important; }
.mb-1{ margin-bottom: 8px; }
.mb-2{ margin-bottom: 16px; }
.mb-3{ margin-bottom: 32px; }
.mb-4{ margin-bottom: 64px; }
.mt-1{ margin-top: 8px; }
.mt-2{ margin-top: 16px; }
.mt-3{ margin-top: 32px; }
.mt-4{ margin-top: 64px; }

.flex{ display: flex; }
    .flex .right{ margin-left: auto; }
    .flex.center{ align-items: center; justify-content: center; }
    .flex.flex-vcenter{  align-items: center; }

/* Padding */

.px-1{ padding-left: 8px; padding-right: 8px; }
.px-2{ padding-left: 16px; padding-right: 16px; }
.px-3{ padding-left: 24px; padding-right: 24px; }
.px-4{ padding-left: 36px; padding-right: 36px; }
.px-5{ padding-left: 48px; padding-right: 48px; }
.px-6{ padding-left: 64px; padding-right: 64px; }
.px-7{ padding-left: 96px; padding-right: 96px; }

.py-1{ padding-top: 8px; padding-bottom: 8px; }
.py-2{ padding-top: 16px; padding-bottom: 16px; }
.py-3{ padding-top: 24px; padding-bottom: 24px; }
.py-4{ padding-top: 36px; padding-bottom: 36px; }
.py-5{ padding-top: 48px; padding-bottom: 48px; }
.py-6{ padding-top: 64px; padding-bottom: 64px; }
.py-7{ padding-top: 96px; padding-bottom: 96px; }

.top-menu{ font-size: 16px; font-weight: 800; text-transform: uppercase; }
    .top-menu span{ border-bottom: transparent 4px solid; cursor: pointer; }
    .top-menu span:hover{ border-bottom-color: #1c9ccd; }

.logo{ width: 64px; }
.name{ font-size: 32px; font-weight: 800; padding-left: 18px; }

video{ width: 100%; aspect-ratio: 7/6; object-fit: cover; }

.container{ max-width: 640px; position: relative; margin: auto; }

.bars{ width: 36px; opacity: .5; }
    .bars > div{ background: #fff; height: 1px; margin: 8px 0; width: 80%; margin-left: auto; }
    .bars > div:nth-child(2){ width: 100%; }

header{ border-bottom: #222 1px solid; }

.main-text{ width: 100%; padding-left: 16px;  }
h1{ font-size: 56px; font-weight: 800; line-height: 1.1; }
h2{ font-size: 16px; font-weight: 400; line-height: 1.3; margin-top: 18px; }
    h2 strong{ font-weight: 800; font-size: 2em; line-height: 1.1em; }

.contact-btns{ font-size: 16px; grid-template-columns: 1fr 1fr; grid-gap: 0; display: grid; margin-top: 12px; }
    .contact-btns span{ padding: 8px 0; text-align: center; }
    .contact-btns span:first-child{ border-bottom: #1c9ccd 4px solid; }
    .contact-btns span:last-child{ box-shadow: 0 0 4px #1c9ccd; border: #1c9ccd 1px solid; }

.dialog{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; background: rgba(0, 0, 0, .8); padding: 24px 12px;; }
    .dialog .box{ background: #fff; padding: 18px 24px; color: #000; position: relative; }
    .dialog .box h2{ font-size: 24px; font-weight: 800; line-height: 1.2; margin: 0; text-transform: uppercase; }
    .dialog .close{ font-size: 36px; font-weight: 300; position: absolute; top: 12px; right: 12px; opacity: .5; border: #1c9ccd 1px solid; display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; }
    .dialog p{ font-size: 16px; line-height: 1.5; margin-top: 18px; }

.btn{ font-size: 18px; font-weight: 800; padding: 12px 18px; border: #666 1px solid; text-transform: uppercase; }
    .btn:hover{ border-color: #1c9ccd; border-bottom-width: 4px; }
    .btn.mail{ border-color: #1c9ccd; box-shadow: 0 0 4px #1c9ccd;}

.hidden{ display: none; }