body {
    background: black;
    color: #fff;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: "fk-grotesk-regular";
    src: url("./fonts/fk-grotesk/regular.woff2");
    font-display: swap;
  }
  
  @font-face {
    font-family: "fk-grotesk-light";
    src: url("./fonts/fk-grotesk/light.woff2");
    font-display: swap;
  }
  
  @font-face {
    font-family: "fk-grotesk-thin";
    src: url("./fonts/fk-grotesk/thin.woff2");
    font-display: swap;
  }
  
  @font-face {
    font-family: "flecha-l-extra-light-italic";
    src: url("./fonts/flecha-l/extra-light-italic.woff2");
    font-display: swap;
  }
  
  @font-face {
    font-family: "flecha-l-light-italic";
    src: url("./fonts/flecha-l/light-italic.woff2");
    font-display: swap;
  }
  
  @font-face {
    font-family: "flecha-l-regular";
    src: url("./fonts/flecha-l/regular.woff2");
    font-display: swap;
  }
  
  @font-face {
    font-family: "flecha-l-regular-italic";
    src: url("./fonts/flecha-l/regular-italic.woff2");
    font-display: swap;
  }
  
  @font-face {
    font-family: "flecha-l-bold";
    src: url("./fonts/flecha-l/bold.woff2");
    font-display: swap;
  }
  
  @font-face {
    font-family: "roboto-mono-variable";
    src: url("./fonts/roboto-mono/variable.woff2");
    font-display: swap;
  }
  
  @font-face {
    font-family: "roboto-mono-variable-italic";
    src: url("./fonts/roboto-mono/variable-italic.woff2");
    font-display: swap;
  }
  
  @font-face {
    font-family: "Roboto Mono";
    src: url("./fonts/roboto-mono/RobotoMono-ExtraLight.ttf");
    font-display: swap;
  }

h1,h2,h3,p, a {
    margin: 0;
    padding: 0;
}

h1 {
    font-family: 'Roboto Mono';
}

h2 {
    font-family: Helvetica, sans-serif;
    font-size: 40px;
}

a { 
    text-decoration: none;
    color: #fff;
}

header {
    width: 100%;
    display: flex;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    justify-content: space-between;
    align-items: center;
    margin-top: 17px;
}

#pw-wrap{
	height:100vh;
	overflow:hidden;
}
#pwmask{
	position: absolute;
    background-color: rgba(0, 0, 0, .95);
    height: 100vh;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;

/*    display:none; */
}
#pwform{
	width:400px;
	background-color:#fff;
	padding:20px;
 	display: flex;
    align-items: center;
    justify-content: center;
}
#pwform input{
	border:1px solid #000;
	border-radius: 0px;
	border-right:0px;
	padding:10px;
}
#pwform button{
	border:1px solid #000;
	border-radius: 0px;
	padding:10px;
	cursor:pointer
}

.fadein > *{
	opacity:0;
	transform:translateY(20px);
	transition: opacity .5s ease-out,
				transform .5s ease-out;
}
.fadein > *.show{
	opacity:1;
	transform:translateY(0px);
}

.logo {
  width: 401px;
}
.logo img {
  width: 100%;
}

.contactus .cta {
    display: flex;
    align-items: center;
}

.contactus .cta h2 {
    margin-right: 24px;
}

.contactus .arrow {
    border-left: 2px solid #fff; 
    height: 100%;
    padding: 21px 12px;
}

.social {
  position: absolute;
  right: 42px;
  bottom: 0;
}
.social a {
  margin: 0 11px;
}

/* Video */

.container {
  display: flex;
  justify-content: center;
  margin-bottom: 42px;
}

.container video {
  width: auto;
  height: 78vh;
  border-radius: 10px;
  border: 1px solid #fff;
  overflow: hidden;
  margin-top: 40px;
}


@media only screen and (max-width: 768px) {
  
  h2 {
    font-family: Helvetica, sans-serif;
    font-size: 25px;
  }

  header {
    flex-wrap: wrap;
    margin-top: 50px;
  }

  .logo {
    width: 100%;
    border-bottom: 2px solid #fff;
    padding: 12px 0;
    padding-left: 11px;
  }

  .logo img {
    width: 224px;
  }

  .contactus {
    width: 100%;
  }
  .contactus .cta {
    padding-left: 20px;
  }

  .contactus .cta h2 {
    margin-right: 0;
    width: 43%;
  }

  .contactus .arrow {
      border-left: 2px solid #fff; 
      padding: 10px 15px;
      width: 57%;
  }

  .contactus .arrow img {
    width: 34px;
  }

  .container video {
    height: 73vh;
    border-radius: 10px;
    border: 1px solid #fff;
    overflow: hidden;
    margin-top: 40px;
  }

  .social {
    position: inherit;
    width: 100%;
    display: flex;
    justify-content: center;
    border-top: 1px solid #fff;
    padding-top: 12px;
    padding-bottom: 18px;
  }

}

@media only screen and (max-width: 393px) {
  h2 {
    font-size: 6.5vw;
  }

  .container video {
    width: 89%;
    height: auto;
  }

}