img {
    font-size: var(--cpn-small-font-size);
    line-height: var(--cpn-small-line-height);
}

.img-sec {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    padding-top: 0;
    transition: padding-top 0.3s ease;
    -webkit-transition: padding-top 0.3s ease;
    -moz-transition: padding-top 0.3s ease;
    -ms-transition: padding-top 0.3s ease;
    -o-transition: padding-top 0.3s ease;
    /* background-color: rgba(255,0,0,0.5); */
}
.img-sec>.img-sec-size {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    z-index: 1;
}
.img-sec>.img-sec-file {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;    
    z-index: 2;
}
.img-sec>.img-sec-file .this-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.img-sec.bg-color {
    background-color: rgba(var(--cpn-bg-color-img),1);
}


.img-on-xxl,
.img-on-xl,
.img-on-lg,
.img-on-md,
.img-on-sm,
.img-on-xs {
    display: none;
}

/* img zoom on hover */
.img-zoom-on-hover {
    overflow: hidden;
}
.img-zoom-on-hover .this-img-zoom-on-hover {
    transform: scale(1);
    transition: transform 1s ease;
    -webkit-transition: transform 1s ease;
    -moz-transition: transform 1s ease;
    -o-transition: transform 1s ease;
    -ms-transition: transform 1s ease;
}
.img-zoom-on-hover:hover .this-img-zoom-on-hover {
    transform: scale(1.05);
}

/* xxl */
@media (min-width: 1400px) {

.img-on-xxl {
    display: block !important;
}

}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {

.img-on-xl {
    display: block !important;
}

}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {

.img-on-lg {
    display: block !important;
}

}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {

.img-on-md {
    display: block !important;
}

}

/* sm - xs */
@media (max-width: 767.98px) {}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {

.img-on-sm {
    display: block !important;
}

}

/* xs */
@media (max-width: 575.98px) {

.img-on-xs {
    display: block !important;
}

}

/* xs custom */
@media (max-width: 399.98px) {}