html,body{
    	margin: 0;
    	padding: 0;
    	overflow: hidden;

    }
    .pageContainer{
        position: fixed;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: lightgrey;
        background-image: url("./assets/pictures/backgroundpaper.jpg");
        background-position: center;
        background-size: contain;
    }

    .backgroudimg{
        position: absolute;
        height: 100%;
        width: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    #bgImage{
        height: 100%;
        /*width: auto ;*/
    /*height: 100vh;*/

    /*  flex-grow: 1;
      background-color: forestgreen;*/

    }
    .childeFlex{
        height: 100%;
            position: relative;
      /*background-color: forestgreen; */
    }

    .hidden{
    	display: none;
    }

    .footer{
position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%;
    background-image: url(assets/pictures/footer.png);
    background-repeat-y: no-repeat;
    background-position-x: center;
    background-size: cover;
    }
    #footerIcon{
        /*position:;*/
        width: 100%;
    }
    #preymaker{
    position: absolute;
    bottom: 0;
    right: 1px;
    /* width: 17%; */
    height: 45%;
    margin: 2vh;
    z-index: 10;
    }

    #present{

        position: absolute;
        bottom: 19%;
        left: 50%;
        transform: translate(-50%, 0);
        transform-origin: 38% 65%;
    }


    .presentGrp{
            transform-origin: 38% 80%;
    /*        width: 100%;
    height: 100%;*/
        animation: giggle 5s 3s ease infinite;
    }

    .images{
        left: 0;
        top: 0;
        position: absolute;
        /*height: 25vh;*/
        width: 100%;
    }

    #presentBG{
        position: relative;
        width: 100%;
    }


    #tag{
        transform-origin: 55% 35%;
    /*    animation: rotation 2s linear infinite alternate;
        animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);*/

    animation: swing 2s ease infinite;

    }




    #qrcodeurl{
    	width: auto;
    	font-size: 1.2vw;
    	padding: 8px;
    	border-radius: 5px;
    }
    /* #URLqr_code{
     padding: 7vh;
    position: absolute;
    left: 50%;
    top: 41%;
    transform: translate(-50%, -50%) scale(0.85) rotate(
45deg);
    background-image: url(./assets/pictures/snow.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 12%;
    } */

    #qrCodeContainer{
        position: absolute;
        height: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

    }
    #qrcodeBG{
    height: 100%;

    }

#headerIcon{
  position: absolute;
    top: 0;
    left: 50%;
    height: 10%;
    transform: translate(-50%, 0);
}



    #qrcode{
        position: absolute;
        top: 0;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
    }


    #arInfo{
        position: absolute;
        top: 0;
    }



    #warmInfo{
    position: absolute;
    width: 55%;
    left: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    .startARcontainer{
        display: flex;
        /*align-items: center;*/
        /*flex-direction: column;*/
        justify-content: center;
        height: 100%;
    }

    .warmInfoContainer{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #000000cc;
    }



    .deviceInfo{

        position: absolute;
        top: 0;
        left: 0;
        background-color: white;
    }

    @keyframes scaleZoom {
        from {
            transform: translate(0%, 0) scale(1.0);
        }
        20% {
            transform: translate(0%, 0) scale(1.1);
          }

        50% {
            transform: translate(0%, 0) scale(1.0);
          }

        to {
            transform: translate(0%, 0) scale(1.0);
        }
      }


    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }
        20% {
            transform: rotate(-45deg);
          }

        50% {
            transform: rotate(-45deg);
          }

        to {
            transform: rotate(0deg);
        }
      }
      @keyframes swing {
      0% {  transform: rotate(0deg) }
      10% {  transform: rotate(-20deg) }
      20% {  transform: rotate(8deg) }
      30% {  transform: rotate(-10deg) }
      40% {  transform: rotate(5deg) }
      50% {  transform: rotate(-3deg) }
      60% {  transform: rotate(0deg) }
      70% {  transform: rotate(-1deg) }
      80% {  transform: rotate(0deg) }
      90% {  transform: rotate(0deg) }
      100% {  transform: rotate(0deg) }
    }



      @keyframes giggle {
      0% {  transform: rotate(0deg) }
      2% {  transform: rotate(-1.5deg) }
      5% {  transform: rotate(3deg) }
      8% {  transform: rotate(-3deg) }
      10% {  transform: rotate(3deg) }
      12% {  transform: rotate(-3deg) }
      15% {  transform: rotate(3deg) }
      18% {  transform: rotate(-1deg) }
      20% {  transform: rotate(1deg) }
      22% {  transform: rotate(0deg) }
      100% {  transform: rotate(0deg) }
    }