#infografik {
  position: relative;
  max-height: 100%;
  overflow: hidden;
}

#infografik video {
  width: 100%;
}

#infografik img {
  width: 2700px;
}

#c4429 {
  display: none;
}

.ctaPointsInner {
  width: 100vw;
  height: calc(100vw * 0.63);
}

#ctaPoints {
  position: absolute;
  z-index: 1250;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
}

.ctapointRed {
  background-color: #e61313;
  position: absolute;
  border-radius: 100%;
  cursor: pointer;
  width: 2.5%;
  height: 4%;
}

.ctapointBlue {
  background-color: #1393e6;
  position: absolute;
  border-radius: 100%;
  cursor: pointer;
  width: 2.5%;
  height: 4%;
}

.ctapointGreen {
  background-color: #1cd87d;
  position: absolute;
  border-radius: 100%;
  cursor: pointer;
  width: 2.5%;
  height: 4%;
}

.ctapointGreen,
.ctapointBlue,
.ctapointRed {
  transition: all 0.3s ease;
  border: 5px solid #fff;
}

.ctapointGreen:hover,
.ctapointBlue:hover,
.ctapointRed:hover {
  border: 10px solid #fff;
  /* transition: all 0.3s ease; */
}

/* Blue Buttons */
#ctap1 {
  top: 21%;
  left: 15%;
}

#ctap2 {
  top: 27%;
  left: 5%;
}

#ctap3 {
  top: 46%;
  left: 8%;
}

#ctap4 {
  top: 72%;
  left: 11%;
}

/* Red Buttons */
#ctap5 {
  top: 28%;
  left: 56%;
}

#ctap6 {
  top: 33%;
  left: 48%;
}

#ctap7 {
  top: 64%;
  left: 46%;
}

/* #ctap8 {
    top: 66%;
    left: 60%;
} */

#ctap9 {
  top: 59%;
  left: 74%;
}

/* Green Buttons */
#ctap10 {
  top: 18%;
  left: 92%;
}

#ctap11 {
  top: 30%;
  left: 94%;
}

#ctap12 {
  top: 44%;
  left: 88%;
}

#ctap13 {
  top: 70%;
  left: 86%;
}

/* Modal */
.modal-body {
  margin-top: 25px;
}

.modal-content {
  height: auto;
  border-radius: 0 !important;
}

.modalBlue .modal-content {
  border: 3px solid #1393e6;
}

.modalBlue h2 {
  color: #1393e6;
}

.modalGreen .modal-content {
  border: 3px solid #1cd87d;
}

.modalGreen h2 {
  color: #1cd87d;
}

.modalRed .modal-content {
  border: 3px solid #e61313;
}

.modalRed h2 {
  color: #e61313;
}

.modal-dialog {
  width: 60vw !important;
  position: absolute;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.modal-inner .ce-bodytext {
  width: 70%;
  float: right;
}

.modal-inner .ce-gallery {
  width: 30%;
}

.modal-inner .ce-gallery .ce-column {
  height: min-content !important;
}

.modal-inner .image-embed-item {
  width: 300px;
}

.modal-content h2 {
  font-size: 36px;
  font-weight: 400;
}

.modal-content p {
  font-size: 17px;
  font-weight: 300;
}

.modalClose {
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 28px;
}

.modalRed .modalClose {
  color: #e61313;
}

.modalGreen .modalClose {
  color: #1cd87d;
}

.modalBlue .modalClose {
  color: #1393e6;
}

#info5 li::before,
#info6 li::before,
#info7 li::before,
#info9 li::before {
  color: #e61313;
}

#info10 li::before,
#info11 li::before,
#info12 li::before,
#info13 li::before {
  color: #1cd87d;
}

#info1 li::before,
#info2 li::before,
#info3 li::before,
#info4 li::before {
  color: #1393e6;
}

#info5 a,
#info6 a,
#info7 a,
#info9 a {
  color: #e61313;
  text-decoration: underline;
}

#info10 a,
#info11 a,
#info12 a,
#info13 a {
  color: #1cd87d;
  text-decoration: underline;
}

#info1 a,
#info2 a,
#info3 a,
#info4 a {
  color: #1393e6;
  text-decoration: underline;
}

.modal ul {
  padding-left: 0 !important;
}

.modal .ce-bodytext p {
  margin-bottom: 25px !important;
}

/* Grabbing hand anim */
.grabAnim {
  display: none !important;
  position: absolute;
  top: -170px;
  right: 20px;
  width: 130vw;
  height: 59vh;
  /* z-index: 50; */
}

.grabAnim i {
  top: 50%;
  left: 50%;
  position: relative;
  transform: translate(-50%, -50%) !important;
  font-size: 50px;
}

.modal-inner .ce-column:first-of-type {
  display: none;
}

.ce-gallery[data-ce-columns="2"] .ce-column {
  width: auto;
}

/* Responsive Media Querys */
@media screen and (max-width: 1201px) {
  .modal-dialog {
    width: 70vw !important;
  }
}

@media screen and (max-width: 992px) {
  .modal-dialog {
    width: 80vw !important;
  }

  .modal-inner .ce-gallery {
    width: 50%;
  }

  .modal-inner .ce-bodytext {
    float: none;
    width: 50%;
    padding-left: 10px;
  }

  #infografik video {
    width: 100% !important;
    height: auto !important;
  }

  .dragWrapper {
    width: 150%;
    top: -150px;
    left: -260px;
  }

  #infografik {
    height: 70vh !important;
  }

  .ctapointGreen,
  .ctapointBlue,
  .ctapointRed {
    width: 5%;
    height: 7.5%;
  }

  #ctap1 {
    top: 28%;
    left: 20%;
  }

  #ctap2 {
    top: 43%;
    left: 11%;
  }

  #ctap3 {
    top: 70%;
    left: 8%;
  }

  #ctap4 {
    top: 109%;
    left: 17%;
  }

  #ctap5 {
    top: 41%;
    left: 87%;
  }

  #ctap6 {
    top: 48%;
    left: 73%;
  }

  #ctap7 {
    top: 94%;
    left: 79%;
  }

  /* #ctap8 {
        top: 131%;
        left: 119%;
    } */

  #ctap9 {
    top: 88%;
    left: 115%;
  }

  #ctap10 {
    top: 27%;
    left: 137%;
  }

  #ctap11 {
    top: 45%;
    left: 140%;
  }

  #ctap12 {
    top: 66%;
    left: 133%;
  }

  #ctap13 {
    top: 108%;
    left: 130%;
  }
}

@media screen and (max-width: 767px) {
  #infografik {
    height: 55vh !important;
  }

  .modal-dialog {
    width: 100vw !important;
    height: 100vh !important;
    margin-top: 100px !important;
    margin-bottom: 100px !important;
  }

  .modal-inner .ce-gallery {
    width: 100%;
  }

  .modal-inner .ce-bodytext {
    float: none;
    width: 100%;
    padding-left: 0;
  }

  .dragWrapper {
    width: 200%;
    top: -200px;
    left: -355px;
  }

  /* Blue Buttons */
  #ctap1 {
    top: 41%;
    left: 27%;
  }

  #ctap2 {
    top: 56%;
    left: 17%;
  }

  #ctap3 {
    top: 92%;
    left: 14%;
  }

  #ctap4 {
    top: 150%;
    left: 22%;
  }

  /* Red Buttons */
  #ctap5 {
    top: 54%;
    left: 113%;
  }

  #ctap6 {
    top: 69%;
    left: 90%;
  }

  #ctap7 {
    top: 127%;
    left: 101%;
  }

  /* #ctap8 {
    top: 66%;
    left: 60%;
} */

  #ctap9 {
    top: 119%;
    left: 151%;
  }

  /* Green Buttons */
  #ctap10 {
    top: 38%;
    left: 183%;
  }

  #ctap11 {
    top: 58%;
    left: 188%;
  }

  #ctap12 {
    top: 89%;
    left: 180%;
  }

  #ctap13 {
    top: 143%;
    left: 177%;
  }

  .modal-inner .ce-column:first-of-type {
    display: block;
  }

  .modal-inner .ce-column:nth-child(2) {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .ctapointGreen,
  .ctapointBlue,
  .ctapointRed {
    width: 8%;
    height: 12.5%;
  }

  .dragWrapper {
    width: 200%;
    top: -120px;
    left: -230px;
  }

  /* Blue Buttons */
  #ctap1 {
    top: 36%;
    left: 25%;
  }

  #ctap2 {
    top: 53%;
    left: 15%;
  }

  #ctap3 {
    top: 87%;
    left: 14%;
  }

  #ctap4 {
    top: 146%;
    left: 21%;
  }

  /* Red Buttons */
  #ctap5 {
    top: 52%;
    left: 114%;
  }

  #ctap6 {
    top: 66%;
    left: 86%;
  }

  #ctap7 {
    top: 124%;
    left: 100%;
  }

  /* #ctap8 {
    top: 66%;
    left: 60%;
} */

  #ctap9 {
    top: 113%;
    left: 155%;
  }

  /* Green Buttons */
  #ctap10 {
    top: 34%;
    left: 182%;
  }

  #ctap11 {
    top: 56%;
    left: 186%;
  }

  #ctap12 {
    top: 86%;
    left: 179%;
  }

  #ctap13 {
    top: 144%;
    left: 176%;
  }
}

@media screen and (max-width: 400px) {
  .modal-inner {
    padding-top: 15px;
  }

  #infografik {
    height: 35vh !important;
  }

  .dragWrapper {
    width: 200%;
    top: -93px;
    left: -192px;
  }

  /* Blue Buttons */
  #ctap1 {
    top: 37%;
    left: 26%;
  }

  #ctap2 {
    top: 53%;
    left: 14%;
  }

  #ctap3 {
    top: 90%;
    left: 15%;
  }

  #ctap4 {
    top: 141%;
    left: 21%;
  }

  /* Red Buttons */
  #ctap5 {
    top: 50%;
    left: 115%;
  }

  #ctap6 {
    top: 64%;
    left: 89%;
  }

  #ctap7 {
    top: 120%;
    left: 102%;
  }

  /* #ctap8 {
    top: 66%;
    left: 60%;
} */

  #ctap9 {
    top: 118%;
    left: 151%;
  }

  /* Green Buttons */
  #ctap10 {
    top: 33%;
    left: 182%;
  }

  #ctap11 {
    top: 56%;
    left: 187%;
  }

  #ctap12 {
    top: 84%;
    left: 181%;
  }

  #ctap13 {
    top: 141%;
    left: 175%;
  }
}