@import url("https://use.typekit.net/prh6bqv.css");
/* STYLE IE ONLY */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}
/********************************************************************************************************/
/* RESET */
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: 0 0;
  font-weight: 400;
}
select {
  width: 100%;
}
sub, sup {
  font-size: smaller;
}
*, body, ul, ul li {
  padding: 0;
  margin: 0;
}
*, body {
  text-decoration: none;
}
input {
  border: none;
}
body {
  overflow-x: hidden;
  background-color: #f7f4f3;
}
* {
  outline: 0 !important;
  -webkit-box-sizing: box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
ul {
  list-style: none;
}
a, input[type=submit] {
  cursor: pointer !important;
}
sub {
  vertical-align: sub;
}
sup {
  vertical-align: super;
}
b, strong {
  font-weight: bolder;
}
em, i, strike {
  font-weight: 400;
}
em, i {
  font-style: italic;
}
strike {
  text-decoration: line-through;
}
u {
  text-decoration: underline;
}
a {
  text-decoration: none;
}

/********************************************************************************************************/



/*
font-size: 14px;
font-size: min(max(10px, 2.5vw), 14px);
		*/

/********************************************************************************************************/
/********************************************************************************************************/
/* Firefox */
body {
  font-size: 100%;
		background-color: #ffffff;
}
body, html, h1, h2, h3, h4, h5, h6, ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}
#wrapper, #wrapper * {
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
#wrapper div {display: flex;}
#wrapper * {
font-family: "klavika-web", sans-serif;
}
#wrapper {
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
		width: 100vw;
		height: 100vh;
}
#wrapper #bgvideo {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
z-index: 0;
}
#wrapper #bgvideo:before {
content: "";
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-color: #414042;
opacity: 0.6;
}
#wrapper #bgvideo video {
width: 100%;
height: 100%;
object-fit: cover;
}
#wrapper #content {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 60px 150px;
}
#wrapper #content > div {
z-index: 10;
}
#wrapper #content .top {
flex-direction: row;
justify-content: space-between;
gap:50px;
flex-wrap: wrap;
}
#wrapper #content .top > a {
max-width: 300px;
min-width: 200px;
width: 100%;
height: auto;
display: block;
}
#wrapper #content .top .social {
display: flex;
flex-direction: row;
gap:20px;
}
#wrapper #content .top .social li a {
display: block;
width: 40px;
height: auto;
text-align: center;
}
#wrapper #content .top .social li a img {
width: 100%;
height: auto;
}
#wrapper #content .mid {
flex-direction: column;
align-items: center;
justify-content: center;
}
#wrapper #content .mid h1 {
text-align: center;
color: #ffffff;
font-weight: 600;
font-size: 60px;
font-size: min(max(30px, 6vw), 60px);
line-height: 120%;
}
#wrapper #content .mid h1 strong {
display: block;
font-weight: 700;
line-height: 95%;
font-size: 130px;
font-size: min(max(60px, 10vw), 130px);
}
#wrapper #content .mid h2 {
color: #ed1c24;
font-weight: 600;
font-size: 60px;
line-height: 100%;
font-size: min(max(30px, 6vw), 60px);
}
#wrapper #content .bot h3 {
color: #ed1c24;
font-weight: 400;
font-size: 52px;
line-height: 180%;
font-size: min(max(20px, 4vw), 52px);
}
#wrapper #content .bot h3 strong {
display: block;
color: #ffffff;
font-weight: 700;
font-size: 100px;
font-size: min(max(40px, 10vw), 100px);
}
/********************************************************************************************************/
/********************************************************************************************************/
@media only screen and (max-width: 1000px) {
#wrapper #content {padding: 40px;}
#wrapper #content .top .social li a img {width: 30px;}
}
@media only screen and (max-width: 750px) {
#wrapper #content {padding: 20px;}
#wrapper #content .top {
flex-direction: column;
align-items: center;
gap:20px;
}
}
@media only screen and (max-width: 400px) {
#wrapper #content .top .social {
gap:10px;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
#wrapper #content .top > a {
max-width: 100%;
min-width: 150px;
}
}
@media only screen and (max-height: 450px) {
#wrapper,
#wrapper #content {height: auto;}
#wrapper #content {gap:30px;}
}