@font-face {
 font-family: "Poppins";
 src: url("font/Poppins-Black.woff") format("woff");
 font-style: normal;
 font-weight: 900;
 font-display: swap;
}

@font-face {
 font-family: "Poppins";
 src: url("font/Poppins-ExtraBold.woff") format("woff");
 font-style: normal;
 font-weight: 800;
 font-display: swap;
}

@font-face {
 font-family: "Poppins";
 src: url("font/Poppins-Bold.woff") format("woff");
 font-style: normal;
 font-weight: 700;
 font-display: swap;
}

@font-face {
 font-family: "Poppins";
 src: url("font/Poppins-SemiBold.woff") format("woff");
 font-style: normal;
 font-weight: 600;
 font-display: swap;
}

@font-face {
 font-family: "Poppins";
 src: url("font/Poppins-Medium.woff") format("woff");
 font-style: normal;
 font-weight: 500;
 font-display: swap;
}

@font-face {
 font-family: "Poppins";
 src: url("font/Poppins-Regular.woff") format("woff");
 font-style: normal;
 font-weight: 400;
 font-display: swap;
}

@font-face {
 font-family: "Poppins";
 src: url("font/Poppins-Light.woff") format("woff");
 font-style: normal;
 font-weight: 300;
 font-display: swap;
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

ol,
ul,
li {
 list-style: none;
}

body {
 line-height: 1;
 font-family: "Poppins";
}

.wrapper {
 width: 100%;
 height: 100vh;
 background: #10103e url('img/main-img.jpg') 0 0 no-repeat;
 background-size: cover;
}

.warning-page {
 width: 100%;
 height: 100%;
 max-width: 1200px;
 padding: 0 15px;
 margin: 0 auto;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 text-align: center;
}

.warning-page-content {
 width: 100%;
 max-width: 600px;
}

img {
 max-width: 100%;
}

.logo {
 margin-bottom: 70px;
}

.h2 {
 font-size: 48px;
 text-transform: uppercase;
 color: #8f5cfa;
 font-weight: 500;
 margin-bottom: 30px;
}

.warning-page-content p {
 color: #fff;
 line-height: 1.7;
 font-size: 16px;
 font-weight: 300;
}

.cta-block {
 display: flex;
 margin: 70px 0;
 justify-content: center;
}

a {
 text-decoration: none;
 color: currentColor
}

.enter,
.exit {
 display: inline-flex;
 width: 48%;
 height: 55px;
 align-items: center;
 justify-content: center;
 font-size: 24px;
 text-transform: uppercase;
 border: 2px solid transparent;
 border-radius: 30px;
 transition: all .3s;
}

.enter {
 background: linear-gradient(to bottom, #fb6b48, #f4872c);
 color: #fff;
 outline: none;
 font-weight: 800;
 margin-right: 10px;
}

.enter:hover {
 opacity: 0.8;
 transform: translateY(-2px);
}

.enter .icon {
 width: 30px;
 height: 23px;
 flex: none;
 margin-right: 5px;
}

.enter .icon svg {
 display: block;
 width: 100%;
 height: 100%;
}

.exit {
 border-color: #314b68;
 color: #6485a9;
 font-weight: 300;
}

.exit:hover {
 opacity: 0.7;
}

.menu {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 color: #fff;
 text-transform: uppercase;
 font-size: 12px;
 margin-bottom: 10px;
}

.menu li {
 margin-bottom: 10px;
}

.menu a {
 transition: all .3s;
}

.menu a:hover {
 color: #8f5cfa;
}

.footer p {
 font-size: 12px;
 color: #888ca5;
 line-height: 1.4;
 margin-bottom: 10px;
}

.footer p a {
 text-decoration: underline;
}

.footer p a:hover {
 text-decoration: none;
}

@media(max-width: 1220px) {
 .wrapper {
  background-position: -220px 0;
  overflow: hidden;
 }

 .warning-page-content {
  height: 100%;
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
 }
}

@media(max-width: 990px) {
 .wrapper {
  background-position: -220px 0;
 }

 .warning-page {
  justify-content: center;
  height: auto;
  min-height: 100vh;
 }

 .warning-page-content {
  justify-content: flex-start;
  margin-top: 140px;
 }
}

@media(max-width: 767px) {
 .wrapper {
  height: auto;
 }

 .warning-page-content {
  margin-top: 30px;
 }

 .h2 {
  font-size: 30px;
  margin-bottom: 15px;
 }

 .logo {
  margin-bottom: 40px;
 }

 .warning-page-content p {
  font-size: 14px;
 }

 .cta-block {
  margin: 30px 0;
 }

 .enter,
 .exit {
  height: 50px;
  font-size: 17px;
 }
}