.viewPopup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.85);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }
    .viewPopup-content {
      background-color: #1c1f1f;
      border-radius: 10px;
      max-width: 1000px;
      width: 95%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 0 20px rgba(0, 255, 200, 0.1);
      padding: 20px;
    }
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #333;
      margin-bottom: 15px;
    }
    .popup-header h2 {
      margin: 0;
      font-size: 1.5rem;
    }
    .close-btn {
      background: transparent;
      border: none;
      color: #aaa;
      font-size: 1.5rem;
      cursor: pointer;
    }
    .card-body-section {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
    .card-img {
      max-width: 320px;
      border-radius: 6px;
    }
    .card-meta {
      flex: 1;
    }
    .comments-section {
      margin-top: 30px;
    }
    .comment-box {
      background: #111;
      border-radius: 6px;
      padding: 10px 15px;
      margin-bottom: 10px;
    }
    .comment-box small {
      color: #999;
    }
    .comment-input {
      background: #111;
      border: none;
      color: white;
      width: 100%;
      padding: 10px;
      border-radius: 4px;
      margin-bottom: 10px;
    }
    .comment-input:focus {
      outline: none;
      background: #1a1a1a;
    }
    .btn-post {
      background: #2ecc71;
      border: none;
      padding: 8px 14px;
      border-radius: 4px;
      color: white;
    }

/*    //new styles*/
#viewPopup .panel {
    border-style: solid;
    border-width: 1px;
    border-color: #0d0d0d;
    margin-bottom: 1.25rem;
    padding: 0.625rem;
    background: #334e60;
    color: #e1e1e1;
    background-image: linear-gradient(to top, #334e60 0%, #2f495a 75%, #2a4150 100%);
    box-shadow: inset 0px 3px 10px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.15);
}
#viewPopup .panel > :first-child {
    margin-top: 0;
}
#viewPopup .inline-list {
    list-style: none;
    margin-top: 0;
    margin-bottom: 1.0625rem;
    margin-left: -1.375rem;
    margin-right: 0;
    overflow: hidden;
    padding: 0;
}
#viewPopup .right {
    float: right !important;
}
#viewPopup .text-left {
    text-align: left !important;
}
#viewPopup .headline{
      line-height: 1;
    margin-bottom: 0.625rem;
}
#viewPopup .articleBody{
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 1.25rem;
    text-rendering: optimizeLegibility;
}
#viewPopup .panel > :last-child {
    margin-bottom: 0;
}
#viewPopup .inline-list > li {
    display: block;
    float: left;
    list-style: none;
    margin-left: 1.375rem;
}

#viewPopup .panel.outburst {
    border-style: solid;
    border-width: 1px;
    border-color: #0d0d0d;
    margin-bottom: 1.25rem;
    padding: 0.625rem;
    background: #334e60;
    color: #e1e1e1;
    background-image: linear-gradient(to top, #272d42 0%, #23283c 75%, #1d2232 100%);
    box-shadow: inset 0px 3px 10px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.15);
}
#viewPopup .panel.outburst .roww {
    margin: 0 -0.9375rem;
    max-width: none;
    width: auto;
}
#viewPopup .spacer-xsmall, #viewPopup .spacer-small, #viewPopup .spacer-large, #viewPopup .spacer-xlarge {
    display: block;
    width: 100%;
}
#viewPopup .center {
    display: table;
    margin: 0 auto;
    text-align: center;
}
#viewPopup .columnn, .columnns {
    position: relative;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    float: left;
}
@media only screen and (min-width: 40.0625em) {
    #viewPopup .columnn, #viewPopup .columnns {
        position: relative;
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;
        float: left;
    }
}
@media only screen and (min-width: 64.0625em) {
    #viewPopup .large-12 {
        width: 100%;
    }
}
@media only screen and (min-width: 64.0625em) {
    #viewPopup .columnn, .columnns {
        position: relative;
        padding-left: 20px;
        padding-right: 10px;
        float: left;
    }
}
#viewPopup .panel.outburst p {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 1.25rem;
    text-rendering: optimizeLegibility;
}



#viewPopup [class^="icon-"],#viewPopup [class*=" icon-"] {
    font-family: 'cardsmith';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#viewPopup .panel a, .panel .fa{
  color:#89c196;
  text-decoration: none;
}
#viewPopup .roww .roww:before, #viewPopup .roww .roww:after {
    content: " ";
    display: table;
}
#viewPopup .roww .roww:after {
    clear: both;
}
#viewPopup .roww .roww:before,#viewPopup .roww .roww:after {
    content: " ";
    display: table;
}
#viewPopup .roww:after {
    clear: both;
}
#viewPopup .roww:before,#viewPopup .roww:after {
    content: " ";
    display: table;
}
#viewPopup h1,#viewPopup h2,#viewPopup h3,#viewPopup h4,#viewPopup h5,#viewPopup h6,#viewPopup .h1,#viewPopup .h2,#viewPopup .h3,#viewPopup .h4,#viewPopup .h5,#viewPopup .h6 {
    color: #fdffdf;
    font-family: "IM Fell English SC", serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    margin-top: 0.2rem;
    text-rendering: optimizeLegibility;
}
select#set_id {
    min-width: 80%;
    border: 1px solid #666;
    border-radius: 3px;
    padding: .5rem 1rem;
    transition: all .3s;
}



/* popup view ads  */
 .popup-overlay {
    display: none;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  opacity: 0;
  transition: all 700ms ease;
}

.popup-overlay.active {
    display: block;
  opacity: 1;
}

.popup-container {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 50px));
  font-family: "Raleway", sans-serif;
  color: #fff;
/*  padding: 12px 0;*/
  box-shadow: 0 6px 55px -10px rgba(0, 0, 0, 0.7);
/*  background-image: url("/img/popup/bg.png");*/
/*  background-size: cover;*/

  opacity: 0;
  pointer-events: none;
  transition: all 700ms ease;
}

.popup-overlay.active .popup-container {
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: auto;
}

.popup-overlay.active .left .bg-1,
.popup-overlay.active .left .bg-2 {
  transform: translateX(0);
}

.popup-container,
.popup-container * {
  box-sizing: border-box;
}

.popup-container .left img {
  position: absolute;
  bottom: 0;
}

.popup-container .left .bg-1 {
  left: 80px;
  transform: translateX(-20px);
  transition: all 1700ms ease;
}

.popup-container .left .bg-2 {
  left: 64px;
  transform: translateX(-20px);
  transition: all 1700ms ease;
  transition-delay: 600ms;
}

.popup-container .right {
/*  width: 540px;*/
  width: 470px;
  padding: 16px;
/*  padding-left: 250px;*/
  padding-left: 170px;
}

.popup-container .skip-button {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #000;
  padding: 2px 6px;
  font-size: 14px;
  cursor: pointer;
}

.popup-container p.logo {
  font-size: 13px;
  color: #febdff;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.popup-container h2.popup-heading {
  font-size: 30px;
  text-transform: uppercase;
  margin: 0;
}

.popup-container p.description {
  font-size: 15px;
  line-height: 1.8;
}

.popup-container .visit-button {
  background: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  color: #000;
  padding: 8px 24px;
  margin-top: 8px;
  display: inline-block;
}

.popup-container .hero-image-small {
  display: none;
}

@media (max-width: 560px) {
  .popup-container .left .bg-1,
  .popup-container .left .bg-2,
  .popup-container .left .hero-image {
    display: none;
  }

  .popup-container .right {
    padding: 16px;
    width: 300px;
    padding-top: 4px;
  }

  .popup-container .left .hero-image-small {
    display: block;
    width: 100%;
  }

  .popup-container .left .hero-image-small {
    position: relative;
  }

  .popup-container {
    padding: 0;
  }
}