body{
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background: white;
}
.box{
  display: flex;
  align-items: center;
  align-content: center;
  width: 100%;
  height: 100vh;
  z-index: 50;
  position: absolute;
}
.contain{
  display: block;
  width: 1020px;
  margin: 0 auto;
}
.bk{
  position: absolute;
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: 5;
}
.logo{
  display: block;
  margin: 0 auto;
  max-width: 550px;
}
 .title{
   display: block;
   width: 100%;
   margin-top: 30px;
   margin-bottom: 20px;
   font-family: 'Raleway', sans-serif;
   font-size: 1.3em;
   font-weight: 300;
   line-height: 1.5em;
   color: #5C5A5A;
   text-align: center;
   text-transform: uppercase;
 }
 .info{
   display: block;
   font-family: 'Laila', serif;
   font-size: 1.4em;
   font-weight: bold;
   color: #5C5A5A;
   text-align: center;
   margin: 0;
   margin-top: 40px;
 }
 .extra-info{
   display: block;
   font-family: 'Laila', serif;
   font-size: 1.2em;
   font-weight: normal;
   color: #838181;
   text-align: center;
   margin-top: 5px;
 }
 span{
   display: block;
   width: 100%;
   font-family: 'Raleway', sans-serif;
   font-size: 1.1em;
   font-weight: 300;
   line-height: 1.5em;
   color: #B4B4B4;
   text-align: center;
   text-transform: uppercase;
 }
a{
  display: block;
  width: 100%;
  font-family: 'Laila', serif;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.2em;
  color: #5C5A5A;
  text-align: center;
  text-decoration: none;
  letter-spacing: 5px;
  margin-top: 10px;
}
@media (min-width:768px) and (max-width:960px){
  .logo{ max-width: 400px; }
}
@media (min-width:480px) and (max-width:768px){
  .logo{ max-width: 350px; }
  .info{font-size:1.35em;}
  .extra-info{font-size: 1.05em;}
  a{font-size: 1.1em;letter-spacing: 4px;}
}
@media screen and (max-width:480px) {
  .logo{ width: 70%;}
  .info{font-size:1.2em;}
  .extra-info{font-size: 0.9em;}
  a{font-size: 1em;letter-spacing: 3px;}
}