:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.d-flex{
    display: flex;
}
@media only screen and (min-width:1200px) {
  .flex-lg{
    display: flex;
  }
}
.d-none{
    display: none!important;
}
.align-items-center{
    align-items: center;
}
.bg-white{
    background-color: #ffffff;
}
.bg-ing{
    background-color: #FF6600;
}
.bk-square{
    background-image: url(../images/square.png);
    background-repeat: repeat;
}
.col-card-1{
    width: 100%;
    height: auto;
    background-color: #fff;
    margin-right: 3px;
    margin-bottom: 3px;
    border-radius: 7px;
    display: flex;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    overflow: hidden;
    cursor: pointer;

}
@media only screen and (min-width:1200px) {
  .col-card-1{
    width: 230px;
    height: 230px;
  }
}
.p-15{
  padding:15px;
}
a.col-card-1,
a.col-card-1:hover, 
a.col-card-1:focus,
a.col-card-1:active {
    color: #333333!important;
    text-decoration: none;
}
.col-card-1.active{
  cursor:default
}
.col-card-1.active .card-text{
  display: none;
}
.col-card-1 .hero{
  display: none;
}
@media only screen and (max-width:1200px) {
  .col-card-1{
    min-height: 120px;
  }
  .col-card-1 .article-url{
    pointer-events: none;
  }
  .col-card-1.active .article-url{
    pointer-events: all;
  }
  .col-card-1 .hero{
    width: 33%;
  }
  .col-card-1 .hero .realImg{
    object-fit: cover;
    min-height: 120px;
    background-position: 50%;
  }
  .empty .wo-info{
    min-width: 120px;
  }
}
.col-card-1.empty{
  background-image: url(../images/circle.png);
  background-size: 20%;
  background-repeat: repeat;
}
.col-card-1.empty .hero img{
  filter: blur(.2rem);
}
.col-card-1.active .hero{
  display: block;
}
.fwrap{
    flex-wrap: wrap;
    justify-content: center;
    padding:15px 0;
}
.flex-column{
    flex-direction: column;
}

@media only screen and (min-width:1200px) {
  .wo-info{
    background: rgba(255, 255, 255, 0.8);
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    width: 100%;
    transform: translateY(100%);
    padding: 7px 0;
    transition: transform .3s ease-out;
    color: #333333;
  }
  .realHero{
    height:230px;
    background-position: 100% 0;
    background-size:cover;

  }
}
.wo-info span{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}
@media only screen and (max-width:1200px) {
  .col-card-1.empty{
    background-size: 10%;
  }
  .col-card-1.active .hero{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .col-card-1 .hero.realHero{
    background-image: none!important;
  }
  .wo-info{
    padding-left: 15px;
    text-align: left;
    line-clamp:unset;
  }
  .realHeroSml{
    width: 100%;
    min-width: 120px;
    min-height: 120px;
    background-position: 100% 0;
    background-size:cover;
  }
}
.col-card-1:hover .wo-info{
  transform: translateY(0);
}
.position-relative{
  position: relative;
}
.border-0{border:0!important} .p-0{padding:0!important}
.tooltip-inner{
  background-color: #f0f0f0;
  color: #333333;
  font-size: 14px;
  border:1px solid #cecece!important;
}
.tooltip-arrow{
  border-top-color: #cecece!important;
}
.w-100{
  width: 100%;
}
.ing-header{
  background-image: url(../images/circle.png);
  background-repeat: repeat;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}
@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
.animate__flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

.pd-3{
  padding:15px 15px 0 15px;
}
.mobile-separator,
.mobile-separator::before,
.mobile-separator::after{
  border-radius: 50%;
  background-color: #ffffff;
}
.mobile-separator,
.mobile-separator::before,
.mobile-separator::after{
  margin-bottom: 15px;
}
.mobile-separator{
  margin:50px auto;
  width: 20px;
  height: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.mobile-separator::before,
.mobile-separator::after{
  content:' ';
  display: block;
  position: absolute;
  left: 50%;
  /* transform: translateX(); */
}
.mobile-separator::before{
  transform: translate(-50%, -130%);  
  width: 25px;
  height: 25px;
}
.mobile-separator::after{
  transform: translate(-50%, 200%);
  width: 15px;
  height: 15px;
}
.fs18{
  font-size: 18px;
  line-height: 1.6;
}