/* Rest CSS */

html, body, div, p, a, img, article, section, video {
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
    margin             : 0;
    padding            : 0;
    border             : 0;
    vertical-align     : middle;
    font-weight        : 300;
    font-size          : 15px;
}

article, section {
    display : block;
}

a {
    display         : inline-block;
    text-decoration : none;
}

body {
    line-height : 1;
}

img {
    display : block;
    margin  : 0;
    padding : 0;
    border  : 0;
}

/* End of Reset */

@font-face {
  font-family: "AvenirNextLTPro-Regular";
  src: url('../fonts/AvenirNextLTPro-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

html, body, #main {
  height: 100%;
}

body {
  overflow: hidden;
  font-family: "AvenirNextLTPro-Regular", sans-serif;
}

section {
  position: relative;
}

.video {
  display: inline-block;
  width: 50%;
  height: 100vh;
  overflow: hidden;
  transition: width .3s ease-in;
}

.video.full-width {
  width: 100%;
  transition: width .3s ease-in;
}

video {
  height: 100%;
  width: 50vw;
  object-fit: cover;
  transition: width .3s ease-in;
}

.video.full-width video {
  width: 100vw;
  transition: width .3s ease-in;
}

.brand {
  display: inline-block;
  width: 48%;
  height: 100vh;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);`
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

a {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  color: #000;
}

.logo {
  width: 232px;
  height: auto;
}

@media (max-width: 768px) {

  .video, .brand {
    width: 100%;
    height: 50%
  }

  video {
    width: 100%;
  }

  .logo {
    width: 250px;
  }

}