:root{
  --main-color: #501645;
  --text-color: #d20066;
  --btn-color1: #742064;
  --btn-color2: #d20066;
  --btn-blur: rgba(210, 0, 102, 0.64);
}

.popup_box {
  background: #ffffff;
  max-width: 45em;
  width: 100%;
  height: auto;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  padding: 0 15px;
  z-index: 999;
  border-left: 1px solid var(--text-color);
  border-right: 1px solid var(--text-color);
  border-bottom: 1px solid var(--text-color);
  border-radius: 0 0 10px 10px;
}
.popup_box img{
  width: 100%;
}
.popup_box h2{
  font-size: 1.2rem;
  line-height: 1.3rem;
}
.popup_box h2,
.popup_box p{
  color: #123b59;
}
.popup_box h2 span{
  color: var(--text-color);
}
.popup_box .btn-primary{
  font-size: 0.7rem;
  font-weight: 100;
  border-radius: 4px;
  line-height: normal;
  text-transform: capitalize;
  color: #fff;
  margin-top: 5px;
  background: transparent;
  border: 1px solid #fff;
  background-position: right center;
  padding: 7.5px 27.8px 7.5px 27.2px;
  background-image: linear-gradient(to right,var(--main-color) 0%, var(--btn-color1) 50%, var(--btn-color2) 100%);
  box-shadow: 0 12px 30px 0 var(--btn-blur);
}
.popup_box .btn-primary:hover{
  color: #000000 !important;
  background: transparent !important;
  border: 1px solid var(--btn-color2) !important;
  background-position: right center !important;
}

.popup_box2 {
  background: #ffffff;
  max-width: 38em;
  width: 100%;
  height: auto;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 0%;
  display: none;
  padding: 0 15px;
  border-left: 1px solid var(--text-color);
  border-right: 1px solid var(--text-color);
  border-bottom: 1px solid var(--text-color);
  border-radius: 0 0 10px 10px;
}
.popup_box2 h4{
  font-size: 0.9rem;
  line-height: 1.1rem;
  margin-top:10px;
  font-weight: 500;
}
.popup_box2 h4,
.popup_box2 p{
  color: #123b59;
  text-transform: none;
}
.popup_box2 h4 span{
  color: var(--text-color);
}
.popup_box2 .youtube.btn{
  padding: 5px 20px;
}
.popup_box2 .btn-primary{
  font-size: 0.7rem;
  font-weight: 100;
  border-radius: 4px;
  line-height: normal;
  text-transform: capitalize;
  color: #fff;
  margin-top: 10px;
  background: transparent;
  border: 1px solid #fff;
  background-position: right center;
  padding: 7.5px 27.8px 7.5px 27.2px;
  background-image: linear-gradient(to right,var(--main-color) 0%, var(--btn-color1) 50%, var(--btn-color2) 100%);
  box-shadow: 0 12px 30px 0 var(--btn-blur);
}
.popup_box2 .btn-primary:hover{
  color: #000000 !important;
  background: transparent !important;
  border: 1px solid var(--btn-color2) !important;
  background-position: right center !important;
}

.overlay {
  position: fixed;
  background-color: var(--main-color);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  cursor: pointer;
  opacity: 0.4;
}

.close {
  position: absolute;
  right: 20px;
  top: 20px;
  color: #dadada;
  font-size: 24px;
  transition: all 0.1s;
  cursor: pointer;
}
.close:hover {
  color: #ffffff;
  transition: all 0.1s;
  transform: rotate(45deg);
}

.boom-in {
  display: block;
  -webkit-animation: 0.4s zoomIn;
          animation: 0.4s zoomIn;
}

.boom-out {
  display: none;
  -webkit-animation: 0.4s zoomOut;
          animation: 0.4s zoomOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
  to {
    opacity: 0;
    transform: scale(0.3);
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
  to {
    opacity: 0;
    transform: scale(0.3);
  }
}

@media only screen and (max-width: 480px) {
  .popup_box {
    width: 90%;
  }
}


/* ----------------------------------------------
 * Generated by Animista on 2022-3-30 14:44:3
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-blurred-top
 * ----------------------------------------
 */
 .slide-in-blurred-down {
	-webkit-animation: slide-in-blurred-down 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: slide-in-blurred-down 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  }

 @-webkit-keyframes slide-in-blurred-down {
  0% {
    -webkit-transform: translateY(-1000px) scaleY(1) scaleX(1);
            transform: translateY(-1000px) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-down {
  0% {
    -webkit-transform: translateY(-1000px) scaleY(1) scaleX(1);
            transform: translateY(-1000px) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}


/* ----------------------------------------------
 * Generated by Animista on 2022-3-30 14:47:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-blurred-top
 * ----------------------------------------
 */
 .slide-in-blurred-up {
	-webkit-animation: slide-in-blurred-up 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) reverse both;
	        animation: slide-in-blurred-up 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) reverse both;
  }

 @-webkit-keyframes slide-in-blurred-up {
  0% {
    -webkit-transform: translateY(-1000px) scaleY(1) scaleX(1);
            transform: translateY(-1000px) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    opacity: 1;
  }
}
@keyframes slide-in-blurred-up {
  0% {
    -webkit-transform: translateY(-1000px) scaleY(1) scaleX(1);
            transform: translateY(-1000px) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    opacity: 1;
  }
}