@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

  html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* Ingen scroll! */
  font-family: 'Open Sans', sans-serif;
  background-color: #FFFAF6;
}

section {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh; /* Full skärm */
  position: relative;
  overflow: hidden; /* Ingen scroll! */
  font-family: 'Open Sans', sans-serif;
  background-color: #FFFAF6;
}

  .logotop {
  width: 200px;
  height: 500px;
  position: absolute;
  right:20px;
  z-index: 100;
  background-image: url("original.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
  /*Basic Phone styling*/

  .phone {
    border: 40px solid #ddd;
    border-width: 55px 7px;
    border-radius: 40px;
    margin: 50px auto;
    overflow: hidden;
    transition: all 0.5s ease;
    height:70vh;
    width: 37vh;
    z-index: 1000;
  }

  .gradient {
    width: 50vw;
    height: 100vh;
    background: linear-gradient(90deg,rgb(14, 0, 92) 0%, rgb(174, 230, 22) 70%, rgba(255, 255, 255, 1) 100%);
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    z-index: 3;
    opacity: 40%;
  }
  
    .info {
    width: 50vw;
    height: 85vh;
    position: absolute;
    top: 15vh;
    right:-22vh;
    z-index: 40;
    opacity: 100%;
  }

  .phone iframe {
    border: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  
  .phone.view {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    box-shadow: 0px 3px 0 #BBB, 0px 4px 0 #BBB, 0px 5px 0 #BBB, 0px 7px 0 #BBB, 0px 10px 20px #777;
    position: relative;
    z-index: 5;
  }
  
  /*Buttons*/

  /* Knappen nedåt */
#goDown {
  opacity: 0;
  position: absolute;
  top: 120px;
  left: -14px;
  height: 50px;
  width: 50px;
  transform: translateX(50%);
  border-radius: 15px;
  border-style:dotted;
  z-index: 10;

}

/* Knappen uppåt */
#goUp {
  position: absolute;
  top: 300px;
  left: 0%;
  transform: translateX(50%);
  z-index: 10;
}

/* Font */

h1 {
  font-family: "Stack Sans Headline", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100px;
  font-size: 4vw;
  font-style: normal;
}

p {
  font-family: "Stack Sans Headline", sans-serif;
  font-optical-sizing: auto;
  font-weight: 0px;
  font-size: 1vw;
  font-style: normal;
}

a {
  font-family: "Stack Sans Headline", sans-serif;
  font-optical-sizing: auto;
  font-weight: 0px;
  font-size: 1.5vw;
  font-style: normal;
}

/*Screen size*/
  
  @media (max-width:900px) {
  .phone {
      opacity: 100%;
  }

  .info {
    visibility: hidden;
    width: 50vw;
    height: 85vh;
    position: absolute;
    top: 15vh;
    right:-22vh;
    z-index: 40;
    opacity: 100%;
  }

.logotop {
    visibility: hidden;
    width: 200px;
    height: 500px;
    position: absolute;
    right:20px;
    z-index: 100;
    background-image: url("original.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

  }
  
  @media (max-width:700px) {
  .phone {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100dvw;
    height:100dvh;
    border:none;
    margin:0;
    padding:0;
    overflow:hidden;
    transition: all 0.5s ease;
    border-width: 0px;
    border-radius: 0px;
	padding-bottom: env(safe-area-inset-bottom);
  }

  .logotop {
    visibility: hidden;
    width: 200px;
    height: 500px;
    position: absolute;
    right:20px;
    z-index: 100;
    background-image: url("original.png");
    background-repeat: no-repeat;
    background-size: 100%;
}


  .info {
    visibility: hidden;
    width: 50vw;
    height: 85vh;
    position: absolute;
    top: 15vh;
    right:-22vh;
    z-index: 40;
    opacity: 100%;
  }


  }
  
  @media (max-width:500px) {
  .phone {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100dvw;
    height:100dvh;
    border:none;
    margin:0;
    padding:0;
    overflow:hidden;
    transition: all 0.5s ease;
    border-width: 0px;
    border-radius: 0px;
	padding-bottom: env(safe-area-inset-bottom);
  }

  .logotop {
    visibility: hidden;
    width: 200px;
    height: 500px;
    position: absolute;
    right:20px;
    z-index: 100;
    background-image: url("original.png");
    background-repeat: no-repeat;
    background-size: 100%;
}


  .info {
    visibility: hidden;
    width: 50vw;
    height: 85vh;
    position: absolute;
    top: 15vh;
    right:-22vh;
    z-index: 40;
    opacity: 100%;
  }

    }