body {
    background-color: #070825;
    margin: 0px;
  }
  
  h1 {
    font-family: 'Lato', sans-serif;
    color: white;
    text-align: center;
  }
  
  p {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    color: white;
    margin: 100px;
  }

.topnav {
    background-color: #070825;
    overflow: hidden;
    width: 1000px;
    margin: 0 auto;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 25px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: 'Lato', sans-serif;
    
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    color: #55e7b5;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
    background-color: #55e7b5;
    color: #070825;
  }

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav {
    width: auto;}
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
    margin: 0 0;
    height: 100%;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a:first-child {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    padding-left: 20%;
    padding-top: auto;
    padding-bottom: auto;
    text-align: left;
    text-transform: uppercase;
    font-size: 40px;
    
    
  }

  .topnav.responsive a:first-child:hover {
    background-color: #070825;
  }
  .topnav.responsive a:hover {
    background-color: #55e7b5;
    color: #070825;
  }

  .topnav.responsive a:last-child:hover {
    background-color: #070825;
  }

}

.video-container{
  position: relative;
  height: 500px;
  overflow:hidden;
  display:block;
  margin-left: auto; 
  margin-right: auto;
  background-color:#55e7b5;
}


.video {
  transform:translateY(-40%);
  display: block;
  /*margin: auto;*/
  min-width: 100%;
  min-height: 500px;
  
}
/* CHANGE OF VIDEO ALIGNEMENT ACCORDING TO SCREEN SIZE*/
@media screen and (max-width: 1500px) {
  .video {
    transform:translateY(-30%);
  }
}

@media screen and (max-width: 1300px) {
  .video {
    transform:translateY(-10%);
  }
}

@media screen and (max-width: 1000px) {
  .video {
    transform:translateY(0%);
  }
}

@media screen and (max-width: 600px) {
  .video {
    transform:translateY(0%);
    transform:translateX(-30%);
  }
}

.video-container-overlay {
  position:relative;
  width: 100%;
  height: 100%;
  opacity: 0.30;
  /*-moz-opacity: 20%;
  -webkit-opacity: 20%;
  z-index: 2;*/
}

.main-title-div{
  position: absolute;
  margin: auto;
  padding: 150px 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* When the screen is less than 800 pixels wide*/
@media screen and (max-width: 800px) {
  .main-title-div{
    padding: 80px 0;
  }
}


.main-title-text{
 font-size: 50px;
 color: #070825;
}

.app-stores{
  position: absolute;
  display:block;
  margin: 340px auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Center pictures mockups */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Footer styling */
.footer {
  background-color: #000000;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

.footer-div {
  overflow: hidden;
  width: 1000px;
  margin: 0 auto;
}
/* Copyright styling */
.copyright {
  color: #4d4d4d;
  font-size: 10px;
  text-align: center;
}

/* Responsive frame */
  .left_box, .right_box {
    float: left;
    width: 50%;
  }

  .text_box {
    float: left;
    width: 50%;
    margin: 120px auto auto auto;
  }




/* Responsive frame to change at less than 600px width: */
@media screen and (max-width: 600px) {
  .left_box, .right_box, .text_box {
    width: 100%; /* The width is 100%, when the viewport is 600px or smaller */
  }
}


/* BURGER MENU TO CROSS */

#nav-icon3 {
  width: 30px;
  height: 30px;
  position: relative;
  margin: auto auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #55e7b5;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 12px;
}

#nav-icon3 span:nth-child(4) {
  top: 24px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}


  /* PROGRESS BAR */

.myProgress {
    width: 100%;
    background-color: #4d4d4d;
}
  
.myBar {
    width: 1%;
    height: 30px;
    background-color: #55e7b5;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

.pulsate {
    -webkit-animation: pulsate 3s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.5;
}

@-webkit-keyframes pulsate {
    0% { 
        opacity: 0.5;
    }
    50% { 
        opacity: 1.0;
    }
    100% { 
        opacity: 0.5;
    }
}