#overlay {
    background: #fff;
    background-image: url(../images/transparent.png);
    color: #636;
    max-width: 600px;
    height: 100%;
    display: block;
}

.overlay {
    background: #fff;
    background-image: url(../images/transparent.png);
    color: #636;
    max-width: 600px;
    height: 100%;
    display: block;
}

/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
    height: 90%;
    overflow-y: auto;
    padding: 12px 18px;
}



#overlay .close {
    float: right !important;
    padding: 3px 6px !important;
    background: #000 !important;
    right: 14px !important;
    position: absolute !important;
    color: #fff !important;
    font-family: arial !important;
    font-weight: bold !important;
    margin: 6px 6px !important;
    opacity: .65 !important;
    filter: initial !important;
    text-shadow: initial;
    border-radius: 12px !important;
    font-size: 15px !important;
}

.close:after {
    content: "\00D7";
}

.close {
    display: none;
}


/* Hide popups initially */
.overLayBox {
    display: none;
    position: relative;
}

.popup_close {
    position: absolute;
    top: 10px;
    right: 4px;
    font-size: 2px;
    line-height: 1;
    color: #fff;
    z-index: 9999;
    cursor: pointer;
}

    /*.popup_close {
	background: transparent;
	border: none;
	cursor: pointer;
	color: #333;
	font-size: 24px;
	outline: none;
}
*/
.popup_close span {
    display: inline-block;
    transition: transform 0.3s ease;
}

/*.popup_close:hover, .popup_close:focus {
color: #f00;*/ /* Change color to red on hover and focus */
/*transform: scale(1.1);*/ /* Slightly enlarge the button */
/*}*/

.popup_close:focus {
    outline: 2px solid #f00; /* Add a red outline on focus for accessibility */
}

.popup_close span {
    font-size: 0; /* Hide the asterisk by setting font size to 0 */
    visibility: hidden;
}

/* Use the ::after pseudo-element to create an "X" */
.popup_close span::after {
   /* content: 'X'; */
    font-size: 24px; /* Set font size for the "X" */
    visibility: visible;
    display: block; /* Make sure it's displayed as a block-level element */
}

@media only screen and (min-width: 728px) {
    .cpLogoBox:hover img {
        width: 80%;
        transition: all 1.0s
    }
}