@font-face {
  font-family: MulishBold;
  src: url(../fonts/Mulish-ExtraBold.woff) format("woff");
}

@font-face {
  font-family: MulishReg;
  src: url(../fonts/Mulish-Regular.woff) format("woff");
}

html{
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
  font-size: 16px;
  width:100%;
  height:100%;
}

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

img[src$=".gif"], img[src$=".png"] {
  image-rendering: -webkit-optimize-contrast;
}

body{
  overflow-x:hidden;
  font-family: MulishReg;
  background-image: url(../imgs/bg.jpg);
  background-position: center;
  background-size: cover;
  width:100%;
  height:100%;
  opacity: 0;
  animation-name: fadein;
  animation-duration: .2s;
  animation-fill-mode: forwards;
  animation-delay: .5s;
}

@keyframes fadein {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

header {
  top: 0;
  z-index: 11;
  transition: ease top 0.5s;
  width: 100%;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:.5rem
}


.copy{
  position: absolute;
  left:calc((50% - 160px)/2);
  width:calc(48% - 160px);
  max-width: 28%;
  transform:translate(-50%, -50%);
  top:40%;
  color:white;
  font-size: 20px;
}


.copy h1 {
  font-family: MulishBold, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 2em;
}

.copy p {
  font-family: MulishReg, Arial, Helvetica, sans-serif;
  font-size: .9em;
}

@media screen and (max-width:1300px) {
  .copy{
    font-size:1.5vw;
  }
}