* {
  margin: 0;
}

html, body {
  height: 100%;
  width:auto;

}

  body {
      background-image: url(assets/image.jpg);
      background-position: fixed;
      background-repeat: repeat;
      background-size: 100%;
  }

  /* .image {
    position: fixed;
      left: 2%;
      top: 4%;
      bottom: 4%;
  } */

  .info {

  position: absolute;
  right: 5%;
  top: 14%;
  height: 75%;
  width: 45%;
  background-color: white;


  }

  @font-face {
  font-family: "GTWalsheimProTrial-Bold";
  src:url("GT-Walsheim-Pro-Trial-Bold.otf") format("opentype");
  }

  @font-face {
  font-family: "GTWalsheimProTrial-Light";
  src:url("GT-Walsheim-Pro-Trial-Light.otf") format("opentype");
  }

  @font-face {
  font-family: "MyriadPro-Regular";
  src:url("MyriadPro-Regular.otf") format("opentype");
  }
  .title {
    position: inherit;
    left: 8%;
    top: 6%;
    font-family: 'GTWalsheimProTrial-Bold';
    font-size: 40px;
  }

  .subtitle {
    position: inherit;
    left: 8%;
    top: 16%;
    font-family: 'GTWalsheimProTrial-Light';
    font-size: 20px;
  }

  .text {
    position: inherit;
    left: 8%;
    top: 26%;
    font-family: 'MyriadPro-Regular';
    font-size: 15px;
    line-height: 1.7em;
    width: 85%;

  }

  .extraclass {
    position: inherit;
    left: 8%;
    top: 75%;
    font-family: 'GTWalsheimProTrial-Light';
    font-size: 14px;
  }

  .extradet {
    position: inherit;
    left: 8%;
    top: 78.5%;
    font-family: 'GTWalsheimProTrial-Bold';
    font-size: 14px;
  }


  .close {
    position: fixed;
    right: 2%;
    top: 1%;

  }

  .open {
    position: fixed;
    right: 5.5%;
    top: 1%;

  }

  .open:hover {
    transform:scale(1.2);
  }

  .close:hover {
    transform:scale(1.2);
  }