:root {
    --canvas-width: calc(1360px * var(--multiplyer));
    --phone-height: calc(778px * var(--multiplyer));

    --inner-screen-width: calc(360px * var(--multiplyer));
    --inner-screen-height: calc(700px * var(--multiplyer));

    --outer-screen-width: calc(320px * var(--multiplyer));
    --outer-screen-height: calc(622px * var(--multiplyer));


    --animations-duration: 1s;

    --multiplyer: 0.8;

}

.canvas{
  position: relative;
  margin: 0 auto;
  width: var(--canvas-width);
  height: var(--phone-height);

}

.phone {
  position: absolute;
  height: var(--phone-height);
  width: calc(400px * var(--multiplyer));  /* 1/5 from total wdth*/
  left: calc(480px * var(--multiplyer));
  top: 0px;
  background-image: url('../../img/header-images/Phone-Frame.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.screen-1 {
  position: absolute;
  height: var(--inner-screen-height);
  width: var(--inner-screen-width);  /* 1/5 from total width*/
  left: calc(200px * var(--multiplyer));
  top: calc(40px * var(--multiplyer));
  background-image: url('../../img/header-images/2.png');
  background-size: cover;
  background-repeat: no-repeat;
    -webkit-animation-name: screen-1-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: var(--animations-duration); /* Safasri 4.0 - 8.0 */
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
    /* -webkit-animation-delay: 2s; */
}

.screen-2 {
  position: absolute;
  height: var(--outer-screen-height);
  width:  var(--outer-screen-width); /* 1/5 from total width */
  left: 0px;
  top: calc(80px * var(--multiplyer));
  background-image: url('../../img/header-images/5.png');
  background-size: cover;
  background-repeat: no-repeat;
    -webkit-animation-name: screen-2-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: var(--animations-duration); /* Safasri 4.0 - 8.0 */
    -webkit-animation-iteration-count: 1;
    /* -webkit-animation-delay: 2s; */
}


.screen-main {
  position: absolute;
  height: calc(778px * var(--multiplyer));
  width: calc(400px * var(--multiplyer));  /* 1/5 from total wdth*/
  left: calc(480px * var(--multiplyer));
  top: 0px;
  opacity: 1;
  background-image: url('../../img/header-images/1-1.png');
  background-size: cover;
  background-repeat: no-repeat;
    -webkit-animation-name: screen-main-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.8s; /* Safasri 4.0 - 8.0 */
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
    /* -webkit-animation-delay: 2s; */
}


.screen-3 {
  position: absolute;
  height: var(--inner-screen-height);
  width: var(--inner-screen-width); /* 1/5 from total width*/
  left: calc(800px * var(--multiplyer));
  top: calc(40px * var(--multiplyer));
  background-image: url('../../img/header-images/3.png');
  background-size: cover;
  background-repeat: no-repeat;
    -webkit-animation-name: screen-3-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: var(--animations-duration); /* Safasri 4.0 - 8.0 */
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
    /* -webkit-animation-delay: 2s; */
}

.screen-4 {
  position: absolute;
  height: var(--outer-screen-height);
  width: var(--outer-screen-width);   /* 1/5 from total wdth*/
  left: calc(1040px * var(--multiplyer));
  top: calc(80px * var(--multiplyer));
  background-image: url('../../img/header-images/4.png');
  background-size: cover;
  background-repeat: no-repeat;
    -webkit-animation-name: screen-4-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: var(--animations-duration); /* Safasri 4.0 - 8.0 */
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
    /* -webkit-animation-delay: 2s; */
}

/* Animations */
@keyframes screen-1-animation {
    0%   { left:calc(480px * var(--multiplyer)); top:0px;   height: calc(778px * var(--multiplyer)); width: calc(400px * var(--multiplyer)); }
    100% {left:calc(200px * var(--multiplyer)); top:calc(40px * var(--multiplyer));  height: var(--inner-screen-height); width: var(--inner-screen-width); }
}

@keyframes screen-2-animation {
    0%   { left: calc(480px * var(--multiplyer)); top:0px; height: calc(778px * var(--multiplyer)); width: calc(400px * var(--multiplyer)); }
    100% {left:0px; top:calc(80px * var(--multiplyer)); height: var(--outer-screen-height); width: var(--outer-screen-width);}
}


@keyframes screen-main-animation {
    0%   { opacity: 1;}
    100% {opacity: 1;}
}

@keyframes screen-3-animation {
    0%   { left:calc(480px * var(--multiplyer)); top:0px;   height: calc(778px * var(--multiplyer)); width: calc(400px; * var(--multiplyer)) }
    100% { left:calc(800px * var(--multiplyer)); top: calc(40px * var(--multiplyer));  height: var(--inner-screen-height); width: var(--inner-screen-width); }
}

@keyframes screen-4-animation {
    0%   { left: calc(480px * var(--multiplyer)); top:0px; height: calc(778px * var(--multiplyer)); width: calc(400px * var(--multiplyer)); }
    /* 25%  { left:250px; top:100px;}
    50%  {left:300px; top:100px;}
    75%  { left:350px; top:100px;} */
    100% {left: calc(1040px * var(--multiplyer)); top:calc(80px * var(--multiplyer)); height: var(--outer-screen-height); width: var(--outer-screen-width);}
}


@media screen and (min-width:1400px) {
  :root {
    --multiplyer: 0.65
  }

  #heading-paragraph-bellow {
    margin-top: 0px !important;

  }
}

@media screen and (max-width:1400px) {
  :root {
    --multiplyer: 0.5
  }

  #heading-paragraph-bellow {
    margin-top: 160px !important;

  }
}

@media screen and (max-width:992px) {
  :root {
    --multiplyer: 0.4
  }

  #heading-paragraph-bellow {
    margin-top: 0px !important;

  }

}

@media (max-width: 768px) {
  :root {
    --multiplyer: 0.3
  }

  #heading-paragraph-bellow {
    margin-top: 0px !important;

  }
}

@media (max-width: 500px) {
  :root {
    --multiplyer: 0.2
  }

  #heading-paragraph-bellow {
    margin-top: 0px !important;

  }
}


/* @media (max-width: 300px) {
  :root {
    --multiplyer: 0.1
  } */

  #heading-paragraph-bellow {
    margin-top: 0px !important;

  }
}