* {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Georgia";
  background: #151515;
}
.loading {
  position: absolute;
  top: 73%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.percent {
  color: #999;
  font-size: 100px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 15px;
}
.progress-bar {
  width: 406px;
  height: 21px;
  background: #111;
  border-radius: 13px;
  padding: 3px;
  box-sizing: border-box;
}
.progress {
  width: 10px;
  height: 15px;
  background: #6b1c23;
  border-radius: 13px;
}
.text {
  position: absolute;
  left: 140px;
  color: white;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 21px;
  display: none;
  text-align: center;
  align-items: center;
}
.text-blink {
  animation: animate 0.7s ease-in-out 0.1s;
}
/*Start Title*/

.title {
  text-align: center;
  margin-top: 2%;
}
.imageTitle {
  width: 500px;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .imageTitle {
    width: 600px;
  }
  .title {
    text-align: center;
    margin-top: 8%;
  }
}

/*End Title*/
@keyframes animate {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

/* Start flag */
.flag {
  position: absolute;
  top: 82%;
  left: 37%;
}

.imageFlag {
  width: 500px;
  height: auto;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 2) {
  .flag {
    position: absolute;
    top: 54%;
    left: 26%;
  }

  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  .flag {
    position: absolute;
    top: 66%;
    left: 26%;
  }
  .loading {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
  .flag {
    position: absolute;
    top: 84%;
    left: 34%;
  }
}

@media screen and (min-width: 2000px) {
  .flag {
    position: absolute;
    top: 62%;
    left: 40.3%;
  }
  .loading {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
/* End flag */

/* Start bridge */
.bride {
  text-align: center;
  margin-top: 7%;
}

.imageBridge {
  width: auto;
  height: auto;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 2) {
  .bride {
    text-align: center;
    margin-top: 10%;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  .bride {
    text-align: center;
    margin-top: 7%;
  }
}

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
  .bride {
    text-align: center;
    margin-top: 1%;
  }
}

/* End bridge */

.row {
  display: flex;
  flex-direction: column;
}