@font-face {
  font-family: "ProximaVara";
  src: url("../fonts/ProximaVara.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}
/* Сброс отступов */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Страница на весь экран */
html,
body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "ProximaVara",sans-serif;
  font-size: 20px
}

/* Контейнер для видео на весь экран */
.video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.video-wrapper video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* Паттерн поверх видео */
.video-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 1;
}

/* Контент поверх видео */
.content-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  flex-direction: column;
}

.content {
  background: #ffffff;
  max-width: 720px;
  width: 100%;
  padding: 24px;
  border-radius: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}


h1 {
  text-align: center;
  color:#0fc3c3;
}
h1 span {display: block}
h1 .z-title {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 2rem
}
h1 .z-label {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.9rem
}
.msk24logo {
  display:block;
  width:100%;
  position:relative;
  text-align:center
}
.msk24logo a {
  display:block;
  color:#fff;
  text-transform:uppercase;
  text-decoration:none;
  font-weight:800;
  font-size:32px;
  margin:1rem auto;
  text-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:all .25s ease-in-out
}
.z-title a {
  border-bottom:2px solid;
  transition: all .35s ease-in-out; 
   box-shadow: 0 0 0 #0cefed inset;
}
.z-title a:hover {
  color:#252525 !important;
  box-shadow: 0 -64px 0 #0cefed inset;
  border-bottom:transparent
}

/* Адаптив для iframe */
.content iframe {
  max-width: 100%;
  height: auto;
  min-height: 600px;
}

/* Для мобильных */
@media (max-width: 700px) {
  .content {
    padding:24px 0;
  }
  .content-wrapper {padding:20px 0}
  .content iframe {
    min-height: 700px;
    overflow-x: hidden;
    max-width: 100vw;
  }
  html,body {font-size: 16px}
}
@media (max-width: 480px) {
  .content iframe {
    min-height: 800px;
  }
  h1 .z-label {
    font-size: 11px
  }
  h1 .z-title {font-size: 24px}
}