@font-face {
  font-family: 'PingAR';
  src: url('./fonts/PingAR/PingAR+LT-Black.otf') format('opentype');
  font-weight: 900;
  /* Black */
}

@font-face {
  font-family: 'PingAR';
  src: url('./fonts/PingAR/PingAR+LT-Bold.otf') format('opentype');
  font-weight: 700;
  /* Bold */
}

@font-face {
  font-family: 'PingAR';
  src: url('./fonts/PingAR/PingAR+LT-ExtraLight.otf') format('opentype');
  font-weight: 200;
  /* Extra Light */
}

@font-face {
  font-family: 'PingAR';
  src: url('./fonts/PingAR/PingAR+LT-Hairline.otf') format('opentype');
  font-weight: 100;
  /* Hairline */
}

@font-face {
  font-family: 'PingAR';
  src: url('./fonts/PingAR/PingAR+LT-Heavy.otf') format('opentype');
  font-weight: 800;
  /* Heavy */
}

@font-face {
  font-family: 'PingAR';
  src: url('./fonts/PingAR/PingAR+LT-Light.otf') format('opentype');
  font-weight: 300;
  /* Light */
}

@font-face {
  font-family: 'PingAR';
  src: url('./fonts/PingAR/PingAR+LT-Medium.otf') format('opentype');
  font-weight: 500;
  /* Medium */
}

@font-face {
  font-family: 'PingAR';
  src: url('./fonts/PingAR/PingAR+LT-Regular.otf') format('opentype');
  font-weight: 400;
  /* Regular */
}

@font-face {
  font-family: 'PingAR';
  src: url('./fonts/PingAR/PingAR+LT-Thin.otf') format('opentype');
  font-weight: 100;
  /* Thin */
}

body {
  font-family: 'PingAR', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.main-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.main-page.active {
  display: block;
}


#home {
  background-color: #0F3576;
  padding: 20px;
  overflow: auto;
}

#home::before {
  display: none;
  width: 250px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(./bgs/top_shape1.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

#home::after {
  content: "";
  width: 100%;
  height: 40vh;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(./bgs/buttom_cover.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  z-index: -1;
}

#home .logo-contener {
  display: flex;
  flex-flow: row-reverse;
  justify-content: center;
  top: 10px;
  pointer-events: stroke;
  cursor: pointer;
}

#home .logo-contener .logo {
  width: 200px;
  height: auto;
}

#home .nav-layout {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-flow: column;
  align-items: center;
  align-content: center;
}

#home .nav-btns {
  width: 100%;
  max-width: 800px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

#home .nav-btns .section-title {
  flex: 1;
  flex: 0 0 100%;
  width: 100%;
  text-align: right;
  color: #20CC76;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: -10px;
}

#home .nav-btn {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 16px;
  height: 30vh;
  width: 100%;
  box-shadow: 5px 5px 10px rgb(0 0 0 / 25%);
  flex: 4;
  display: flex;
  flex-flow: column;
  align-items: end;
  justify-content: end;
  overflow: hidden;
  cursor: pointer;
}

@media (max-width:480px) {
  #home .nav-btn {
    flex: 2;
    flex: 0 0 45% !important;
  }
}

#home .nav-btn::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
  z-index: 2;
}

#home .nav-btns .nav-btn.cover {
  flex: 1;
  flex: 0 0 100% !important;
  background-image: url(../images/map1.png);
  display: flex;
  justify-content: center;
}

#home .nav-btn.cover::after {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
}

#home .nav-btns .nav-btn.cover div {
  display: flex;
  flex-direction: column;
  align-items: end;
  padding: 20px;
  color: #fff;
  z-index: 3;
  width: 100%;
}

#home .nav-btns .nav-btn.cover .top-title {
  color: #dbdddf;
  font-size: 1.3rem;
  font-weight: 600;
  width: 100%;
  text-align: center;
}

#home .nav-btns .nav-btn.cover .main-title {
  color: #dbdddf;
  font-size: 1.5rem;
  font-weight: 700;
  width: 100%;
  text-align: center;
}

#home .nav-btns .nav-btn.btn1 {
  background-image: url(../images/card_bgn1.png);
}

#home .nav-btns .nav-btn.btn1::before {
  content: "";
  position: absolute;
  width: 75px;
  height: 75px;
  background-image: url(./bgs/shape2.png);
  background-position: center;
  background-size: 75px 75px;
  background-repeat: no-repeat;
  opacity: 0.7;
  bottom: 0;
  left: 0;
  z-index: 1;
}

#home .nav-btns .nav-btn.btn2 {
  background-image: url(../images/card_bgn2.png);
}

#home .nav-btns .nav-btn.btn2::before {
  content: "";
  position: absolute;
  width: 75px;
  height: 75px;
  background-image: url(./bgs/shape1.png);
  background-position: center;
  background-size: 75px 75px;
  background-repeat: no-repeat;
  opacity: 0.6;
  top: 0;
  left: 0;
  z-index: 1;
}

#home .nav-btns .nav-btn.btn3 {
  background-image: url(../images/card_bgn3.png);
}

#home .nav-btns .nav-btn.btn3::before {
  content: "";
  position: absolute;
  width: 75px;
  height: 75px;
  background-image: url(./bgs/shape3.png);
  background-position: center;
  background-size: 75px 75px;
  background-repeat: no-repeat;
  opacity: 0.9;
  top: 0;
  right: 0;
  z-index: 1;
}

#home .nav-btns .nav-btn.btn4 {
  background-image: url(../images/card_bgn4.png);
}

#home .nav-btns .nav-btn.btn4::before {
  content: "";
  position: absolute;
  width: 75px;
  height: 75px;
  background-image: url(./bgs/shape2.png);
  background-position: center;
  background-size: 75px 75px;
  background-repeat: no-repeat;
  opacity: 0.8;
  bottom: 0;
  left: 0;
  z-index: 1;
}

#home .nav-btns .nav-btn .title {
  width: 100%;
  text-align: center;
  padding: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  z-index: 3;
}


/*------------------------------------------------------------------------------------------------------
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Page 2
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
------------------------------------------------------------------------------------------------------*/
#discover .logo-contener {
  display: flex;
  flex-flow: row-reverse;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 10px;
  pointer-events: stroke;
  cursor: pointer;
}

#discover .logo-contener .logo {
  width: 200px;
  height: auto;
}


.locations-cat-list {
  border-radius: 14px;
  background-color: #052977;
  top: 30px;
  width: 25vw;
  max-width: 300px;
  position: absolute;
  right: 30px;
  height: 48px;
  padding: 14px;
  box-shadow: 0px -1px 10px #000000b3;
  z-index: 99;
  pointer-events: stroke;
  transition: all 0.5s linear;
  overflow: hidden;
  /*
  -moz-animation: shakeme 3s infinite;
  -o-animation: shakeme 3s infinite;
  -webkit-animation: shakeme 3s infinite;
  animation: shakeme 3s infinite;
  */

  -webkit-animation: breathing 7s ease-out infinite normal;
  animation: breathing 7s ease-out infinite normal;

}

.locations-cat-list.active {
  height: fit-content;
  -webkit-animation: none;
  animation: none;
}

.locations-cat-list h3 {
  text-align: center;
  color: #20CC76;
  font-size: 1rem;
  text-align: center;
  color: #20CC76;
  font-size: 1rem;
  width: 100%;
  height: 25px;
  cursor: pointer;
}

.locations-cat-list h3::after {
  content: '';
  width: 70%;
  display: block;
  height: 2px;
  margin-left: 10px;
  background: #ffffff70;
  margin-bottom: 8px;
  border-radius: 4px;
  margin-left: 15%;
}

.locations-cat-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  padding: 5px;
  max-height: 100%;
  max-height: Calc(100% - 25px);
}

.locations-cat-list ul::-webkit-scrollbar {
  width: 8px;
}

.locations-cat-list ul::-webkit-scrollbar-track {
  background-color: #ebebeb17;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.locations-cat-list ul::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #00000082;
}

.locations-cat-list ul li {
  display: flex;
  margin-top: 8px;
  gap: 5px;
  height: 30px;
  margin-bottom: 15px;
  cursor: pointer;
  min-height: 45px;
  padding: 5px;
  border-radius: 7px;
}

.locations-cat-list ul li:hover {
  background-color: #ffffff82;
}

.locations-cat-list ul li img {
  height: 30px;
  width: 30px;
  object-fit: cover;
  border-radius: 50%;
}

.locations-cat-list ul li .title {
  height: 36px;
  display: flex;
  justify-items: center;
  align-items: center;
}

.locations-cat-list ul li .icon {
  width: 36px;
  background-size: 60%;
  background-position: center, center;
  background-repeat: no-repeat;
  background-color: #5c6e95;
  border-radius: 50%;
  height: 36px;
}

.locations-cat-list ul li.active .icon {
  background-color: #20cc76;
}

.cites-list {
  border-radius: 14px;
  background-color: #052977;
  min-width: 250px;
  width: 26vw;
  position: absolute;
  bottom: Calc(-75vh + 43px);
  left: 25px;
  height: 75vh;
  padding: 14px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0px -1px 10px #000000b3;
  z-index: 99;
  padding-bottom: 30px;
  pointer-events: stroke;
  transition: all 0.5s linear;
}

.cites-list.active {
  bottom: 0px;
}

.cites-list h3 {
  text-align: center;
  color: #20CC76;
  font-size: 1rem;
  text-align: center;
  color: #20CC76;
  font-size: 1rem;
  width: 100%;
  height: 25px;
  cursor: pointer;
}

.cites-list h3::before {
  content: '';
  width: 26%;
  display: block;
  height: 3px;
  margin-left: 10px;
  background: #ffffff70;
  margin-top: -8px;
  margin-bottom: 8px;
  border-radius: 4px;
  margin-left: 37%;
}

.cites-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #103576;
  border-radius: 14px;
  padding: 5px;
  max-height: 100%;
  overflow: auto;

}

.cites-list ul::-webkit-scrollbar {
  width: 8px;
}

.cites-list ul::-webkit-scrollbar-track {
  background-color: #ebebeb17;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.cites-list ul::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #00000082;
}

.cites-list li {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 9px;
  height: Calc(25vh - 24px);
  background: #000;
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: end;
  justify-content: end;
  overflow: hidden;
  margin-bottom: 10px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 11px;
  cursor: pointer;
}


.cites-list li::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));

}

.cites-list li .title {
  color: #ececed;
  font-size: 1rem;
  font-weight: 600;
  z-index: 101;
}

.cites-list li .disc {
  color: #c7c7c7;
  font-size: 0.7rem;
  font-weight: 400;
  z-index: 101;
}

@media (max-width:480px) {
  .locations-cat-list {
    top: 100px;
    width: 50vw;
    max-width: 50vw;
    right: 1vw;
  }

  .cites-list {
    width: 80%;
    left: 10%;
  }

  .location-info-popup {
    width: 80% !important;
    left: 10% !important;
  }
}


#container {
  bottom: 0;
  color: #fff;
  left: 0;
  overflow: hidden;
  perspective: 400;
  position: absolute;
  right: 0;
  top: 0;
  background: #f3be2121;
  z-index: 99;
  pointer-events: none;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.50));
}

#sky {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 512px;
  height: 512px;
  margin-left: -256px;
  margin-top: -256px;
  transform-style: preserve-3d;
  pointer-events: none;

}

#sky div {
  transform-style: preserve-3d;
  pointer-events: none;

}

.cloudLayer {
  pointer-events: none;

  position: absolute;

  width: 600px;
  height: 600px;
  margin-left: -300px;
  margin-top: -300px;
  transition: opacity 1s ease-out;

}



.hotspot {
  width: 10px;
  height: 10px;
  background-color: #003dc2;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: stroke;
}

.hotspot::after {
  content: '';
  background-color: #003dc2;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: puls 1.5s ease-out infinite normal;
  /* margin: -30px; */
  margin-top: -15px;
  margin-left: -15px;
  position: absolute;

}

.hotspot .city-title {
  position: absolute;
  width: max-content;
  margin-top: -42px;
  margin-left: -50px;
  background: #000871a6;
  text-align: center;
  border-radius: 50px;
  padding: 2px;
  color: #fff;
  padding-top: 5px;
  font-size: 0.7rem;
  box-shadow: 0px -1px 10px #000000b3;
  padding: 5px 10px;

}

@keyframes puls {
  from {
    transform: scale(1);
    opacity: .5
  }

  to {
    opacity: 0;
    transform: scale(1.8);
  }
}




.location-info-popup {
  border-radius: 14px;
  background-color: #052977;
  width: 38vw;
  max-width: 250px;
  max-width: 375px;
  position: absolute;
  top: 15vh;
  left: 25px;
  height: 75vh;
  padding: 14px;
  box-shadow: 0px -1px 10px #000000b3;
  z-index: 99;
  pointer-events: stroke;
  transition: all 0.5s linear;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  z-index: 102;
}

.card-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.share-btn {
  width: 40%;
  height: 2.3rem;
  background-color: #41c0ff;
  border-radius: 4px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
  justify-items: center;
  align-items: center;
  align-content: center;
  font-size: 0.8rem;
  text-align: center;
  padding-top: 5px;
  cursor: pointer;
  text-decoration: none
}

.close-btn {
  color: #ffb5b5;
  margin-top: 3px;
  margin-right: 4px;
  font-size: 1.2rem;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-btn i {
  margin-top: -4px;
  font-size: 1rem;
}

.image-container {
  width: 100%;
  min-height: 24vh;
  max-height: 26vh;
  object-fit: cover;
  overflow: hidden;
  display: block;
  border-radius: 6px;
}

.popup-title-location {
  text-align: right;
  font-size: 0.7rem;
  color: #20CC76;
  margin: 0px 6px;
  font-weight: 400;
}

.popup-title {
  text-align: right;
  font-size: 1.2rem;
  color: #4CC4FF;
  margin: 0px 6px;
  font-weight: 600;
}

.popup-description {
  border-top: 1px solid #aaa;
  padding: 6px;
  flex-grow: 1;
  max-height: -webkit-fill-available;
  overflow: hidden;
}

.popup-description h3 {
  text-align: right;
  font-size: 0.7rem;
  color: #20CC76;
  /* margin: 0px 6px; */
  font-weight: 400;
}

.popup-description p {
  display: block;
  text-align: right;
  font-size: 0.7rem;
  color: #4CC4FF;
  margin: 0px 2px;
  font-weight: 400;
  max-height: 100%;
  overflow: auto;
  padding: 2px 5px;
}

.popup-description p::-webkit-scrollbar {
  width: 8px;
}

.popup-description p::-webkit-scrollbar-track {
  background-color: #ebebeb17;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.popup-description p::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #00000082;
}

.location-hotspot {
  background: #052977c9;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
  animation: puls;
  box-shadow: 0px -1px 10px #000000b3;
  opacity: 0.2;
  -webkit-animation: none;
  animation: none;
  pointer-events: none;
}

.location-hotspot.active {
  background-color: #00c764c7;
  opacity: 1;
  -webkit-animation: breathing2 8s ease-out infinite normal;
  animation: breathing2 8s ease-out infinite normal;
  cursor: pointer;
  pointer-events: stroke;
}

.location-hotspot .loc-title {
  display: block;
  color: #080808;
  font-size: 0.8rem;
  /* line-height: 0.1px; */
  /* margin-top: 3px; */
  padding-left: 46px;
  /* padding-top: 19px; */
  width: 200px;
  position: absolute;
}

.qr-link {
  z-index: 9991;
  position: absolute;
  padding-top: 10px;
  font-size: 1rem;
  margin-left: -15px;
  font-weight: 700;
}





/* Video Modal
-----------------------------------------*/
.video-modal,
.video-modal .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
}

.video-modal {
  overflow: hidden;
  position: fixed;
  opacity: 0.0;

  -webkit-transform: translate(500%, 0%);
  transform: translate(500%, 0%);

  -webkit-transition: -webkit-transform 0s linear 0s;
  transition: transform 0s linear 0s;


  /* using flexbox for vertical centering */

  /* Flexbox display */
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;

  /* Vertical alignment */
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.video-modal .overlay {
  z-index: 0;
  background: rgba(13, 1, 61, 0.82);
  /* overlay color */

  opacity: 0.0;

  -webkit-transition: opacity 0.2s ease-out 0.05s;
  transition: opacity 0.2s ease-out 0.05s;
}


.video-modal-content {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  margin: 0 auto;
  overflow-y: visible;
  background: #000;
  width: calc(100% - 12em);
  height: 0;
  padding-top: calc((100% - 12em) * 0.5625);
  /* 16:9 calc */
  border-radius: 14px;
}

/* Scaling to fit within the current Viewport size:
   When viewport aspect ratio is greater than 16:9
   work off the height instead of the width for calc */
@media (min-aspect-ratio: 16/9) {
  .video-modal-content {
    width: 0;
    height: calc(100vh - 10em);
    padding-top: 0;
    padding-left: calc((100vh - 10em) * 1.7778);
    /* 16:9 calc */
  }
}

/* Mobile Layout Tweaks - side margins reduced */
@media (max-width: 640px) {
  .video-modal-content {
    width: calc(100% - 1em);
    padding-top: calc((100% - 1em) * 0.5625);
    /* 16:9 calc */
  }
}

/* modal close button */
.close-video-modal {
  display: block;
  position: absolute;
  left: 0;
  top: -40px;

  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

/* set the iframe element to stretch to fit its parent element */
.video-container video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;

  background: #000;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
  border-radius: 14px;
    overflow: hidden;
}

/* show the modal: 
   add class to the body to reveal */
.show-video-modal .video-modal {
  opacity: 1.0;

  transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
}

.show-video-modal .video-modal .overlay {
  opacity: 1.0;
}

.show-video-modal .video-modal-content {
  transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
}











.ol-zoom {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 5px;
  padding: 5px;
}

.ol-zoom-in,
.ol-zoom-out {
  color: #333;
  font-weight: bold;
  cursor: pointer;
}

.ol-zoom-in:hover,
.ol-zoom-out:hover {
  color: #000;
}

.map {
  height: 100%;
  width: 100%;
}

.map::after {
  /*content: '';*/
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(https://www.pngarts.com/files/3/White-Clouds-PNG-Transparent-Image.png) repeat-x 0 0;
  background-size: cover;
  top: 0;
  left: 0;
  z-index: 2;
  -webkit-animation: an-clouds 500s linear infinite;
  -moz-animation: an-clouds 500s linear infinite;
  -o-animation: an-clouds 500s linear infinite;
  animation: an-clouds 500s linear infinite;
  opacity: 0.7;
}

@-webkit-keyframes an-clouds {
  0% {
    background-position: 0 0;
  }

  to {
    background-position: 10000px 0;
  }
}

@-moz-keyframes an-clouds {
  0% {
    background-position: 0 0;
  }

  to {
    background-position: 10000px 0;
  }
}

@-o-keyframes an-clouds {
  0% {
    background-position: 0 0;
  }

  to {
    background-position: 10000px 0;
  }
}

@keyframes an-clouds {
  0% {
    background-position: 0 0;
  }

  to {
    background-position: 10000px 0;
  }
}

















@-webkit-keyframes breathing {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  10% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  30% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes breathing {
  0% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  10% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  30% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@-webkit-keyframes breathing2 {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  5% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  15% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes breathing2 {
  0% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  5% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  15% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}


@keyframes shakeme {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  5% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
  }

  10% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
  }

  15% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  20% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
  }

  30% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}