/* =====================================================================
   AmCham - Desktop design layer (>= 1042px)
   ---------------------------------------------------------------------
   Loaded LAST from application/views/include/_head.php with
   media="only screen and (min-width: 1042px)", so mobile/tablet
   (css/responsive.css) is never affected.

   Restyles the existing desktop markup (.containervisible-sm) only.
   No form, id, name, onclick or AJAX endpoint depends on it.
   Same colours as css/responsive.css. To roll back: remove the <link>.
   ===================================================================== */

:root {
    --dk-navy: #132C57;
    --dk-blue: #284585;
    --dk-red: #B21A21;
    --dk-red-dark: #8F141A;
    --dk-bg: #F3F5F9;
    --dk-card: #FFFFFF;
    --dk-tint: #EEF2F8;
    --dk-line: #DDE3EC;
    --dk-muted: #66758C;
    --dk-soft: #8E9AAD;
    --dk-radius: 12px;
    --dk-shadow: 0 1px 2px rgba(19, 44, 87, .06), 0 4px 14px rgba(19, 44, 87, .08);
    --dk-shadow-hover: 0 2px 4px rgba(19, 44, 87, .08), 0 10px 24px rgba(19, 44, 87, .14);
    --dk-focus: 0 0 0 3px rgba(40, 69, 133, .18);
    --dk-ease: .18s ease;
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- Page shell ---------- */
#bodycontainer {
    background: var(--dk-bg) !important;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    padding-bottom: 8px;
}

/* main menu: soft hover + red underline instead of a red block */
#main-menu > li > a {
    position: relative;
    border-radius: 8px 8px 0 0;
    transition: background-color var(--dk-ease);
    cursor: pointer;
}
#main-menu > li > a::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--dk-red);
    transform: scaleX(0);
    transition: transform var(--dk-ease);
}
#main-menu > li:hover > a,
#main-menu > li .active { background: rgba(255, 255, 255, .08) !important; }
#main-menu > li:hover > a::after,
#main-menu > li .active::after { transform: scaleX(1); }

/* ---------- Scrollbars (jScrollPane) ---------- */
.containervisible-sm .jspVerticalBar { width: 6px; background: transparent; }
.containervisible-sm .jspTrack { background: rgba(19, 44, 87, .07); border-radius: 3px; }
.containervisible-sm .jspDrag { background: rgba(19, 44, 87, .32); border-radius: 3px; transition: background-color var(--dk-ease); }
.containervisible-sm .jspDrag:hover,
.containervisible-sm .jspDrag.jspActive { background: var(--dk-red); }

/* ---------- Form controls ---------- */
.containervisible-sm input[type=text]:not(.searchmystafff):not(.searchmystafff2),
.containervisible-sm input[type=password],
.containervisible-sm input[type=email],
.containervisible-sm textarea,
#bodycontainer .page_contact .input-xxlarge,
#bodycontainer .page_contact .ckeditor {
    border: 1px solid var(--dk-line) !important;
    border-radius: 8px;
    background: #fff;
    color: var(--dk-navy);
    box-shadow: none;
    outline: none;
    transition: border-color var(--dk-ease), box-shadow var(--dk-ease);
}
.containervisible-sm input[type=text]:focus,
.containervisible-sm input[type=password]:focus,
.containervisible-sm input[type=email]:focus,
.containervisible-sm textarea:focus {
    border-color: var(--dk-blue) !important;
    box-shadow: var(--dk-focus);
}
.containervisible-sm select:not(.selectBox) {
    border: 1px solid var(--dk-line);
    border-radius: 8px;
    background-color: #fff;
    color: var(--dk-navy);
    padding: 0 8px;
    outline: none;
    cursor: pointer;
}
.containervisible-sm select:not(.selectBox):focus { border-color: var(--dk-blue); box-shadow: var(--dk-focus); }

/* search boxes (events, newsletter, directory) */
.containervisible-sm .search,
.containervisible-sm .search2 {
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--dk-line);
    transition: box-shadow var(--dk-ease);
}
.containervisible-sm .search:focus-within,
.containervisible-sm .search2:focus-within { box-shadow: 0 0 0 1px var(--dk-blue), var(--dk-focus); }
.containervisible-sm .searchmystafff,
.containervisible-sm .searchmystafff2 { outline: none; }
.containervisible-sm .ico-search img,
.containervisible-sm .ico-search2 img { opacity: .75; }

/* buttons */
.containervisible-sm .contact,
.containervisible-sm .blogin,
.containervisible-sm input[type=submit],
.containervisible-sm input[type=button] {
    border: 0;
    border-radius: 8px;
    background: var(--dk-red) !important;
    color: #fff;
    cursor: pointer;
    transition: background-color var(--dk-ease), transform var(--dk-ease);
}
.containervisible-sm .contact:hover,
.containervisible-sm .blogin:hover,
.containervisible-sm input[type=submit]:hover,
.containervisible-sm input[type=button]:hover { background: var(--dk-red-dark) !important; }

/* ---------- Side menus (About us, Membership) ---------- */
.containervisible-sm .leftpagemenu {
    background: var(--dk-card);
    border-radius: var(--dk-radius);
    box-shadow: var(--dk-shadow);
    overflow: hidden;
}
.containervisible-sm .leftmenuab,
.containervisible-sm .accordionButton {
    border-bottom: 1px solid var(--dk-line) !important;
    font-size: 15px;
    transition: background-color var(--dk-ease), color var(--dk-ease), box-shadow var(--dk-ease);
}
.containervisible-sm .leftmenuab:hover,
.containervisible-sm .accordionButton:hover { background-color: var(--dk-bg); color: var(--dk-red); }
.containervisible-sm .leftmenuab.activeleft,
.containervisible-sm .accordionButton.on {
    background-color: var(--dk-tint) !important;
    color: var(--dk-navy) !important;
    font-weight: bold;
    box-shadow: inset 4px 0 0 var(--dk-red);
}
.containervisible-sm .descBusactive { background: var(--dk-bg); }
.containervisible-sm .descBusactive .active { color: var(--dk-red); }

/* content card */
.containervisible-sm .rightaboutcont,
.containervisible-sm .rightaboutcont_co {
    border-radius: var(--dk-radius);
    box-shadow: var(--dk-shadow);
    overflow: hidden;
}
.containervisible-sm .titleabout,
.containervisible-sm .titlecom { font-size: 20px; letter-spacing: .01em; }
.containervisible-sm .descriptionabout,
.containervisible-sm .descriptioncom { line-height: 1.65; }

/* ---------- Membership > Services and Benefits (cards) ---------- */
.containervisible-sm .descr_mme2 { counter-reset: dk-sb; padding: 6px 30px 30px; }
.containervisible-sm .sb-intro { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--dk-line); }
.containervisible-sm .sb-intro-title { color: var(--dk-red); font-size: 20px; font-weight: bold; }
.containervisible-sm .sb-intro-text { color: var(--dk-muted); font-size: 13.5px; margin-top: 4px; }
.containervisible-sm .descr_mme2 > br { display: none; }

.containervisible-sm .accordionButtonservices {
    counter-increment: dk-sb;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    margin: 0 0 10px;
    padding: 10px 52px 10px 66px;
    box-sizing: border-box;
    background: #fff !important;
    border: 1px solid var(--dk-line) !important;
    border-radius: 12px;
    color: var(--dk-navy);
    font-size: 15px;
    font-weight: bold;
    line-height: 1.35;
    transition: border-color var(--dk-ease), box-shadow var(--dk-ease), transform var(--dk-ease);
}
/* number badge */
.containervisible-sm .accordionButtonservices::before {
    content: counter(dk-sb, decimal-leading-zero);
    position: absolute;
    left: 14px; top: 50%;
    width: 38px; height: 38px;
    margin-top: -19px;
    border-radius: 10px;
    background: var(--dk-tint);
    color: var(--dk-blue);
    font-size: 13px;
    font-weight: bold;
    line-height: 38px;
    text-align: center;
    letter-spacing: .02em;
    transition: background-color var(--dk-ease), color var(--dk-ease);
}
/* arrow */
.containervisible-sm .accordionButtonservices::after {
    content: "";
    position: absolute;
    right: 20px; top: 50%;
    width: 9px; height: 9px;
    margin-top: -7px;
    border-right: 2px solid var(--dk-soft);
    border-bottom: 2px solid var(--dk-soft);
    transform: rotate(45deg);
    transition: transform var(--dk-ease), border-color var(--dk-ease), margin-top var(--dk-ease);
}
.containervisible-sm .accordionButtonservices:hover,
.containervisible-sm .accordionButtonservices.over {
    border-color: #C5CFDE !important;
    box-shadow: var(--dk-shadow);
    transform: translateY(-1px);
}
.containervisible-sm .accordionButtonservices:hover::before { background: var(--dk-navy); color: #fff; }

/* open service */
.containervisible-sm .accordionButtonservices.on {
    margin-bottom: 0;
    border-color: var(--dk-line) !important;
    border-bottom-color: transparent !important;
    border-radius: 12px 12px 0 0;
    color: var(--dk-red);
    box-shadow: inset 4px 0 0 var(--dk-red);
    transform: none;
}
.containervisible-sm .accordionButtonservices.on::before { background: var(--dk-red); color: #fff; }
.containervisible-sm .accordionButtonservices.on::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--dk-red); }

.containervisible-sm .accordionContentservices {
    margin: 0 0 10px;
    padding: 2px 26px 18px 66px;
    background: #fff;
    border: 1px solid var(--dk-line);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: inset 4px 0 0 var(--dk-red);
    color: var(--dk-navy);
    font-size: 14px;
    line-height: 1.65;
}
.containervisible-sm .accordionContentservices p { margin: 0 0 10px; }
.containervisible-sm .accordionContentservices a { color: var(--dk-blue); text-decoration: none; border-bottom: 1px solid rgba(40, 69, 133, .3); }
.containervisible-sm .accordionContentservices a:hover { color: var(--dk-red); border-bottom-color: var(--dk-red); }

/* ---------- Committees ---------- */
.containervisible-sm .leftpagemenu_co {
    background: var(--dk-card);
    border-radius: var(--dk-radius);
    box-shadow: var(--dk-shadow);
    box-sizing: border-box;
    padding: 20px 18px 10px 10px;
    width: 430px;
}
.containervisible-sm .title_committees {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dk-line);
}
.containervisible-sm .all_co { margin-bottom: 22px; }
.containervisible-sm .leftmenuab_co {
    padding: 7px 10px 7px 14px;
    border-radius: 8px;
    line-height: 1.4;
    transition: background-color var(--dk-ease), color var(--dk-ease);
}
.containervisible-sm .leftmenuab_co:hover { background: var(--dk-bg); color: var(--dk-red); }
.containervisible-sm .leftmenuab_co.activeleft_co { background: var(--dk-tint); font-weight: bold; }
.containervisible-sm .circle { border-color: var(--dk-red); margin-top: 5px; margin-right: 9px; }
.containervisible-sm .activeleft_co .circle,
.containervisible-sm .leftmenuab_co:hover .circle { background: var(--dk-red); }
.containervisible-sm .rightpagemenu_co { width: 580px; }
.containervisible-sm .arrow-up { display: none; }

/* ---------- Events ---------- */
.containervisible-sm .yearsele { padding-top: 8px; font-weight: bold; }
.containervisible-sm #scrollevents { height: 36px; }
.containervisible-sm .titleevents {
    border-radius: 10px;
    box-shadow: var(--dk-shadow);
    border-left: 4px solid var(--dk-red);
    font-size: 20px;
    margin-right: 14px;
}
.containervisible-sm .carousel > ul > li > img,
.containervisible-sm .carousel img {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(19, 44, 87, .12);
    object-fit: cover;
    transition: transform var(--dk-ease), box-shadow var(--dk-ease);
}
.containervisible-sm .carousel li:hover img { transform: translateY(-3px); box-shadow: var(--dk-shadow-hover); }

/* ---------- Newsletter ---------- */
.containervisible-sm .imgnewsletter {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--dk-shadow);
    transition: transform var(--dk-ease), box-shadow var(--dk-ease);
}
.containervisible-sm .newsletterbox:hover .imgnewsletter { transform: translateY(-4px); box-shadow: var(--dk-shadow-hover); }
.containervisible-sm .newsletterbox .namenews { margin-top: 12px; }

/* ---------- Useful info ---------- */
.containervisible-sm .titlecountry { font-size: 18px; }
.containervisible-sm .allubyc {
    background: var(--dk-card);
    border-radius: var(--dk-radius);
    box-shadow: var(--dk-shadow);
    overflow: hidden;
}
.containervisible-sm .sefull {
    padding: 11px 16px;
    border-bottom: 1px solid var(--dk-bg);
    transition: background-color var(--dk-ease);
}
.containervisible-sm .useful1 { background: #F8F9FC; }
.containervisible-sm .sefull:hover { background: var(--dk-tint); }
.containervisible-sm .linkus a { color: var(--dk-blue); }
.containervisible-sm .linkus a:hover { color: var(--dk-red); }

/* ---------- Contact ---------- */
#bodycontainer .page_contact .title { font-size: 20px; }
#bodycontainer .page_contact .input-xxlarge { height: 32px; box-sizing: border-box; padding: 0 10px; font-size: 13px; }
#bodycontainer .page_contact .ckeditor { box-sizing: border-box; padding: 8px 10px; font-size: 13px; }
#bodycontainer .middle-content.page_contact { background: transparent !important; }
#bodycontainer #allinfocontact {
    width: 420px;
    padding: 26px 30px 22px;
    background: var(--dk-card);
    border-radius: var(--dk-radius);
    box-shadow: var(--dk-shadow);
    box-sizing: border-box;
    overflow: hidden;
}
#bodycontainer .contact-main-holder .contact { border-radius: 8px; padding: 8px 10px; }

/* ---------- Home ---------- */
.containervisible-sm .footerhome {
    background: transparent;
    border-bottom: 0;
    border-top: 1px solid var(--dk-line);
    margin-bottom: 0;
}

/* ---------- Home slider: photo album (with dkSlide() + album strip in home.php) ---------- */
/* the picture is a print: white border, soft shadow, photo corners */
#bodycontainer #animated_about {
    box-sizing: border-box;
    border: 10px solid #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(19, 44, 87, .10), 0 14px 34px rgba(19, 44, 87, .24);
    perspective: 2400px;
    background: #e9edf4;
    isolation: isolate;
}
#bodycontainer #animated_about::after {      /* four album photo corners */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    --c: rgba(19, 44, 87, .78);
    background:
        linear-gradient(135deg, var(--c) 0 calc(50% - 1.5px), rgba(255, 255, 255, .85) calc(50% - 1.5px) 50%, transparent 50%) left top / 30px 30px no-repeat,
        linear-gradient(225deg, var(--c) 0 calc(50% - 1.5px), rgba(255, 255, 255, .85) calc(50% - 1.5px) 50%, transparent 50%) right top / 30px 30px no-repeat,
        linear-gradient(45deg, var(--c) 0 calc(50% - 1.5px), rgba(255, 255, 255, .85) calc(50% - 1.5px) 50%, transparent 50%) left bottom / 30px 30px no-repeat,
        linear-gradient(315deg, var(--c) 0 calc(50% - 1.5px), rgba(255, 255, 255, .85) calc(50% - 1.5px) 50%, transparent 50%) right bottom / 30px 30px no-repeat;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
}
/* slides fill the print (the inline size 1012x515 was bigger than the frame) */
#bodycontainer #animated_about .img_animated > div { width: 100% !important; height: 100% !important; overflow: hidden; }
#bodycontainer #animated_about .img_animated img { object-fit: cover; }
#bodycontainer #animated_about .div_banner { right: 0; }

/* page turn: the page lifts from its left edge (the album spine) */
#bodycontainer .img_animated { backface-visibility: hidden; transform-origin: 0% 50%; }
#bodycontainer .img_animated.dk-out-next { animation: dk-page-out 1.1s cubic-bezier(.4, .1, .3, 1) both; z-index: 6 !important; }
#bodycontainer .img_animated.dk-in-next  { animation: dk-page-under 1.1s ease-out both; z-index: 5 !important; }
#bodycontainer .img_animated.dk-in-prev  { animation: dk-page-back 1.1s cubic-bezier(.4, .1, .3, 1) both; z-index: 6 !important; }
#bodycontainer .img_animated.dk-out-prev { animation: dk-page-covered 1.1s ease-in both; z-index: 5 !important; }
@keyframes dk-page-out {                   /* top page turns away to the left */
    0%   { transform: rotateY(0); filter: brightness(1); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
    60%  { filter: brightness(.8); box-shadow: 30px 0 60px rgba(0, 0, 0, .35); }
    100% { transform: rotateY(-92deg); filter: brightness(.55); box-shadow: 30px 0 60px rgba(0, 0, 0, 0); }
}
@keyframes dk-page-under {                 /* next page shows from under its shadow */
    0%   { filter: brightness(.55); transform: scale(.985); }
    100% { filter: brightness(1); transform: none; }
}
@keyframes dk-page-back {                  /* previous page comes back over */
    0%   { transform: rotateY(-92deg); filter: brightness(.55); }
    40%  { filter: brightness(.8); box-shadow: 30px 0 60px rgba(0, 0, 0, .35); }
    100% { transform: rotateY(0); filter: brightness(1); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
}
@keyframes dk-page-covered {
    0%   { filter: brightness(1); }
    100% { filter: brightness(.55); transform: scale(.985); }
}
/* slow zoom on the picture that is showing */
#bodycontainer .img_animated.ActiveImg img { animation: dk-kenburns 9s ease-out both; }
@keyframes dk-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
/* caption slides in after the turn */
#bodycontainer .img_animated.ActiveImg .div_banner { animation: dk-caption .7s cubic-bezier(.2, .7, .2, 1) .75s both; }
@keyframes dk-caption {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: none; }
}
/* time to next photo (pauses with the mouse on the album) */
#bodycontainer #animated_about.dk-auto .img_animated.ActiveImg > div::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--dk-red);
    transform-origin: 0 50%;
    animation: dk-progress 7s linear both;
    z-index: 10;
}
#bodycontainer #animated_about.dk-paused .img_animated.ActiveImg > div::after { animation-play-state: paused; opacity: .5; }
@keyframes dk-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* album strip: small prints, a little crooked, the open one straight and lifted */
#bodycontainer .dk-album {
    position: absolute;
    top: 546px;
    right: 14px;
    width: 1012px;
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 6px 0 10px;
}
#bodycontainer .dk-thumb {
    flex: 0 1 112px;
    min-width: 64px;
    height: 74px;
    padding: 5px;
    border: 0;
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(19, 44, 87, .12), 0 4px 10px rgba(19, 44, 87, .16);
    transform: rotate(-3deg);
    transition: transform .25s ease, box-shadow .25s ease;
}
#bodycontainer .dk-thumb:nth-child(2n)   { transform: rotate(2.5deg); }
#bodycontainer .dk-thumb:nth-child(3n)   { transform: rotate(-1.5deg); }
#bodycontainer .dk-thumb:nth-child(4n+1) { transform: rotate(3deg); }
#bodycontainer .dk-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: filter .25s ease; }
#bodycontainer .dk-thumb:hover,
#bodycontainer .dk-thumb:focus-visible { transform: rotate(0) translateY(-4px); box-shadow: 0 2px 4px rgba(19, 44, 87, .14), 0 10px 20px rgba(19, 44, 87, .22); outline: none; }
#bodycontainer .dk-thumb:hover img { filter: none; }
#bodycontainer .dk-thumb.active {
    transform: rotate(0) translateY(-6px) scale(1.06);
    box-shadow: 0 0 0 2px var(--dk-red), 0 12px 22px rgba(19, 44, 87, .26);
}
#bodycontainer .dk-thumb.active img { filter: none; }
/* room for the strip above the footer */
#bodycontainer .containervisible-sm .footerhome { margin-top: 650px; }

/* round arrows */
#bodycontainer .leftbanner,
#bodycontainer .rightbanner {
    width: 48px; height: 48px;
    margin-top: -6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88) center / 18px no-repeat;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    transition: background-color var(--dk-ease), transform var(--dk-ease);
    z-index: 999;
}
#bodycontainer .leftbanner  { left: 18px !important;  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23132C57' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
#bodycontainer .rightbanner { right: 18px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23132C57' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
#bodycontainer .leftbanner img,
#bodycontainer .rightbanner img { opacity: 0; width: 48px; height: 48px; }
#bodycontainer .leftbanner:hover,
#bodycontainer .rightbanner:hover { background-color: #fff; transform: scale(1.08); }

/* ---------- Login (directory & offers) ---------- */
.containervisible-sm .loginpage .contenu {
    border-radius: var(--dk-radius);
    box-shadow: var(--dk-shadow);
}
.containervisible-sm .loginpage .field-header { height: 34px; box-sizing: border-box; padding: 0 10px; }
.containervisible-sm .loginpage .blogin { padding: 9px 22px; font-weight: bold; letter-spacing: .03em; }

/* =====================================================================
   Directory & Offers
   ===================================================================== */
.containervisible-sm .filters { padding: 0 20px; box-sizing: border-box; }

/* sector picker */
.containervisible-sm .filters .mainselect {
    margin-left: 0;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--dk-line);
    transition: box-shadow var(--dk-ease);
}
.containervisible-sm .filters .mainselect:hover { box-shadow: 0 0 0 1px var(--dk-blue); }
.containervisible-sm .filters .selectDefault {
    margin-top: 0;
    padding-left: 14px;
    line-height: 38px;
    height: 38px;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Directory / Offers tabs as a pill switch */
.containervisible-sm .filters .directory_btn {
    margin: 2px 0 0 12px;
    padding: 9px 16px;
    border: 0 !important;
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--dk-muted);
    line-height: 16px;
    transition: background-color var(--dk-ease), color var(--dk-ease);
}
.containervisible-sm .filters .directory_btn2 { margin-left: 4px; margin-right: 0; }
.containervisible-sm .filters .directory_btn:hover { color: var(--dk-navy); background: rgba(19, 44, 87, .07); }
.containervisible-sm .filters .directory_btn_active,
.containervisible-sm .filters .directory_btn_active:hover { background: var(--dk-navy); color: #fff; }

.containervisible-sm .filters .search2 { width: 470px; margin-right: 0; }
.containervisible-sm .filters .searchmystafff2 { width: 430px; font-size: 15px; color: var(--dk-navy); }
.containervisible-sm .filters .ico-search2 { padding-top: 6px; }

/* member / offer cards (left column) */
.containervisible-sm .directoryoffers .column1 { margin-top: 18px; }
.containervisible-sm #left1 .list {
    display: block;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-height: 96px;
    margin: 0 18px 12px 20px;
    padding: 10px;
    background: var(--dk-card);
    border-radius: var(--dk-radius);
    box-shadow: var(--dk-shadow);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--dk-ease), transform var(--dk-ease);
}
.containervisible-sm #left1 .list:first-child { margin-top: 4px; }
.containervisible-sm #left1 .list:hover { box-shadow: var(--dk-shadow-hover); transform: translateY(-1px); }
.containervisible-sm #left1 .list.is-active { box-shadow: 0 0 0 2px var(--dk-red), var(--dk-shadow); }
.containervisible-sm #left1 .list.mystaff-box2 { margin-right: 18px; }

.containervisible-sm #left1 .list_image {
    float: left;
    width: 76px;
    height: 76px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--dk-tint);
}
.containervisible-sm #left1 .list_image img {
    display: block;
    width: 76px !important;
    height: 76px !important;
    border: 0 !important;
    object-fit: cover;
}
.containervisible-sm #left1 .list_main {
    float: none;
    width: auto;
    height: auto;
    margin-left: 90px;
    padding: 2px 4px 0 0;
    border: 0;
    background: transparent;
}
.containervisible-sm #left1 .list_title,
.containervisible-sm #left1 .list_name,
.containervisible-sm #left1 .list_position { padding-left: 0; }
.containervisible-sm #left1 .list_title { padding-top: 0; font-size: 15px; line-height: 1.3; }
.containervisible-sm #left1 .list_title:empty { display: none; }
.containervisible-sm #left1 .list_name { font-size: 13px; line-height: 1.4; margin-top: 2px; color: var(--dk-muted); }

/* sector as a small chip */
.containervisible-sm .directoryoffers .list_position:not(:empty) {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--dk-tint);
    color: var(--dk-blue);
    font-size: 11.5px;
    line-height: 1.5;
}

/* no photo: building icon instead of the "NO IMAGE AVAILABLE" picture
   (#bodycontainer prefix so it beats the #left1 / #right1 box rules) */
#bodycontainer .containervisible-sm .list_image:has(img[src$="no_image.png"]),
#bodycontainer .containervisible-sm .column2_list_image:has(img[src$="no_image.png"]) {
    background-color: var(--dk-tint);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E9AAD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16'/%3E%3Cpath d='M15 9h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 42%;
    background-repeat: no-repeat;
}
#bodycontainer .containervisible-sm .list_image img[src$="no_image.png"],
#bodycontainer .containervisible-sm .column2_list_image img[src$="no_image.png"] { visibility: hidden; }

/* profile panel (right column) */
.containervisible-sm .directoryoffers .column2 {
    border-radius: 14px;
    box-shadow: var(--dk-shadow);
    overflow: hidden;
    margin-top: 22px;
}
.containervisible-sm #right1 { width: 500px; padding: 0 10px 20px 0; box-sizing: border-box; }
.containervisible-sm #right1 > div[style*="margin-top:220px"] { color: var(--dk-soft) !important; }
.containervisible-sm #right1 .column2_list {
    height: auto;
    min-height: 104px;
    padding: 20px 0 0 20px;
    overflow: hidden;
}
.containervisible-sm #right1 .column2_list_image {
    width: 104px;
    height: 104px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--dk-tint);
}
.containervisible-sm #right1 .column2_list_image img {
    display: block;
    width: 104px !important;
    height: 104px !important;
    border: 0 !important;
    object-fit: cover;
}
.containervisible-sm #right1 .column2_list_main { width: 340px; height: auto; margin-left: 20px !important; }
.containervisible-sm #right1 .business_phone,
.containervisible-sm #right1 .fax,
.containervisible-sm #right1 .email {
    padding-top: 2px;
    margin-bottom: 9px;
    font-size: 14px;
    font-weight: normal;
    color: var(--dk-navy);
    padding-left: 30px !important;
    background-size: 18px auto;
    background-position: left center;
    word-break: break-word;
}
.containervisible-sm #right1 .business_phone { padding-top: 6px; }
.containervisible-sm #right1 .business_phone:empty,
.containervisible-sm #right1 .fax:empty,
.containervisible-sm #right1 .email:empty { display: none; }
.containervisible-sm #right1 .email a { color: var(--dk-blue); text-decoration: none; }
.containervisible-sm #right1 .email a:hover { color: var(--dk-red); text-decoration: underline; }

.containervisible-sm #right1 > .containervisible-sm > .column2_list_title {
    padding: 4px 20px 0;
    font-size: 20px;
    line-height: 1.3;
}
.containervisible-sm #right1 > .containervisible-sm > .column2_list_title2 { padding: 4px 20px 0; font-size: 14px; }
.containervisible-sm #right1 > .containervisible-sm > .list_position:not(:empty) {
    display: inline-block;
    margin: 8px 0 0 20px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--dk-tint);
    color: var(--dk-blue);
    font-size: 12px;
    line-height: 1.6;
}
.containervisible-sm #right1 > .containervisible-sm > .column2_list_link { padding: 8px 20px 0; }
.containervisible-sm #right1 .column2_list_link a { color: var(--dk-red); text-decoration: none; }
.containervisible-sm #right1 .column2_list_link a:hover { text-decoration: underline; }

.containervisible-sm #right1 .offer_title,
.containervisible-sm #right1 .offerst {
    display: block;
    float: none;
    clear: both;
    margin: 22px 20px 0;
    padding: 14px 0 0;
    width: auto;
    height: auto;
    border-top: 1px solid var(--dk-line);
    background: none;
    color: var(--dk-soft);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.containervisible-sm #right1 .offer_description {
    float: none;
    width: auto;
    margin: 0;
    padding: 8px 20px 0;
    line-height: 1.6;
    color: var(--dk-navy);
}
.containervisible-sm #right1 .offerst + .column2_list,
.containervisible-sm #right1 .column2_list + .column2_list { padding-top: 14px; }
.containervisible-sm #right1 .column2_list2_title { margin-top: 0; padding-left: 0; font-size: 15px; }
.containervisible-sm #right1 .column2_list_main .column2_list_title2,
.containervisible-sm #right1 .column2_offer_description { padding-left: 0; }
.containervisible-sm #right1 .column2_list_main .column2_list_title2 { font-size: 12.5px; color: var(--dk-soft); }
.containervisible-sm #right1 .column2_offer_description { padding-top: 6px; line-height: 1.55; }

/* ---------- Directory profile v2 (views data_sector_directory.php, data_offers.php, helpers/dir_helper.php) ---------- */
/* no photo: the AmCham emblem on a light card */
#bodycontainer .dk-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 12%;
    background: linear-gradient(135deg, #fff, var(--dk-tint));
}
#bodycontainer .containervisible-sm .dk-noimg img {
    width: auto !important;
    height: 100% !important;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(19, 44, 87, .18));
}

/* list: count + cards */
#bodycontainer .containervisible-sm #left1 .dk-count {
    margin: 2px 18px 10px 22px;
    color: var(--dk-soft);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .08em;
}
#bodycontainer .containervisible-sm #left1 .dk-count b { color: var(--dk-navy); font-size: 13px; }
#bodycontainer .containervisible-sm #left1 .list_image { border-radius: 14px; }
#bodycontainer .containervisible-sm #left1 .list { border-left: 3px solid transparent; transition: box-shadow var(--dk-ease), transform var(--dk-ease), border-color var(--dk-ease); }
#bodycontainer .containervisible-sm #left1 .list:hover { border-left-color: var(--dk-blue); }
#bodycontainer .containervisible-sm #left1 .list.is-active { border-left-color: var(--dk-red); box-shadow: 0 0 0 1px rgba(178, 26, 33, .35), var(--dk-shadow-hover); }

/* right panel before a member is chosen */
#bodycontainer .containervisible-sm #right1:empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 470px;
    gap: 14px;
}
#bodycontainer .containervisible-sm #right1:empty::before {
    content: "";
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--dk-tint) center / 34px no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E9AAD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M9 3a4 4 0 1 0 0 8a4 4 0 1 0 0-8z'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.9'/%3E%3Cpath d='M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
}
#bodycontainer .containervisible-sm #right1:empty::after {
    content: "Select a member to see the profile";
    color: var(--dk-soft);
    font-size: 15px;
}

/* the card */
#bodycontainer .dk-profile { padding: 0 0 26px; color: var(--dk-navy); }
#bodycontainer .dk-profile .dk-muted { padding: 40px 24px; color: var(--dk-soft); text-align: center; }
#bodycontainer .dk-profile-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 16px 14px 0 16px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--dk-tint), #F8FAFD);
}
#bodycontainer .dk-profile-photo {
    flex: 0 0 104px;
    width: 104px;
    height: 104px;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 4px #fff, 0 8px 22px rgba(19, 44, 87, .20);
}
#bodycontainer .dk-profile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#bodycontainer .dk-profile-id { min-width: 0; }
#bodycontainer .dk-profile-name { font-size: 22px; font-weight: bold; line-height: 1.25; color: var(--dk-navy); word-break: break-word; }
#bodycontainer .dk-profile > .dk-profile-name { padding: 20px 24px 0; }
#bodycontainer .dk-profile-person { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--dk-muted); }
#bodycontainer .dk-pill {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 11px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--dk-line);
    color: var(--dk-blue);
    font-size: 12px;
    line-height: 1.6;
}
#bodycontainer .dk-profile > .dk-pill { margin-left: 24px; background: var(--dk-tint); box-shadow: none; }
#bodycontainer .dk-pill-off { color: var(--dk-red); background: #FBEDEE !important; box-shadow: none; }

/* contact rows */
#bodycontainer .dk-contact { margin: 16px 14px 0 16px; border: 1px solid var(--dk-line); border-radius: 12px; overflow: hidden; }
#bodycontainer .dk-row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; }
#bodycontainer .dk-row + .dk-row { border-top: 1px solid var(--dk-line); }
#bodycontainer .dk-row > div { min-width: 0; font-size: 14px; line-height: 1.4; word-break: break-word; }
#bodycontainer .dk-row small { display: block; margin-bottom: 1px; color: var(--dk-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
#bodycontainer .dk-row a { color: var(--dk-blue); text-decoration: none; }
#bodycontainer .dk-row a:hover { color: var(--dk-red); text-decoration: underline; }
#bodycontainer .dk-ico {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--dk-tint);
    position: relative;
}
#bodycontainer .dk-ico::before {
    content: "";
    position: absolute;
    inset: 9px;
    background: var(--dk-blue);
    -webkit-mask: var(--dk-icon) center / contain no-repeat;
            mask: var(--dk-icon) center / contain no-repeat;
}
#bodycontainer .dk-i-phone { --dk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
#bodycontainer .dk-i-fax   { --dk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v8H6z'/%3E%3C/svg%3E"); }
#bodycontainer .dk-i-mail  { --dk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E"); }
#bodycontainer .dk-i-web   { --dk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20a10 10 0 1 0 0-20z'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
#bodycontainer .dk-i-file  { --dk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E"); }
#bodycontainer .dk-i-mail .dk-ico, #bodycontainer .dk-i-web .dk-ico { background: #FBEDEE; }
#bodycontainer .dk-i-mail .dk-ico::before, #bodycontainer .dk-i-web .dk-ico::before { background: var(--dk-red); }

/* sections: profile text, offers */
#bodycontainer .dk-section { margin: 22px 14px 0 16px; }
#bodycontainer .dk-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--dk-soft);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .08em;
}
#bodycontainer .dk-section h3::after { content: ""; flex: 1; height: 1px; background: var(--dk-line); }
#bodycontainer .dk-badge { padding: 0 7px; border-radius: 999px; background: var(--dk-red); color: #fff; font-size: 11px; line-height: 18px; letter-spacing: 0; }
#bodycontainer .dk-text { font-size: 14px; line-height: 1.65; color: var(--dk-navy); word-break: break-word; }
#bodycontainer .dk-text p { margin: 0 0 10px; }
#bodycontainer .dk-text img { max-width: 100%; height: auto; }
#bodycontainer .dk-offer {
    display: flex;
    gap: 14px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--dk-line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--dk-ease), box-shadow var(--dk-ease), transform var(--dk-ease);
}
#bodycontainer .dk-offer:hover { border-color: transparent; box-shadow: var(--dk-shadow-hover); transform: translateY(-1px); }
#bodycontainer .dk-offer-img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--dk-tint); }
#bodycontainer .dk-offer-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
#bodycontainer .dk-offer-main { min-width: 0; }
#bodycontainer .dk-offer-title { font-size: 15px; font-weight: bold; line-height: 1.3; }
#bodycontainer .dk-offer .dk-pill { margin-top: 5px; padding: 1px 9px; font-size: 11.5px; }
#bodycontainer .dk-offer-text { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--dk-muted); }
#bodycontainer .dk-offer-hero { margin: 20px 24px 0; border-radius: 14px; overflow: hidden; box-shadow: var(--dk-shadow); }
#bodycontainer .dk-offer-hero img { display: block; width: 100%; max-height: 300px; object-fit: cover; }

/* =====================================================================
   Effects (with js/desktop-fx.js)
   ===================================================================== */

/* ---------- waving flags (background) ---------- */
.dk-wave { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; visibility: visible; }
.dk-wave i {
    position: absolute;
    top: -10px;                     /* PAD in the JS */
    height: calc(100% + 20px);
    background-repeat: no-repeat;
    animation: dk-wave 4.2s ease-in-out infinite;   /* same period as WAVE_PERIOD in the JS */
    will-change: transform;
}
.dk-wave i.still { animation: none; will-change: auto; }
@keyframes dk-wave {
    0%, 100% { transform: translateY(-7px); }
    50%      { transform: translateY(7px); }
}
/* light and shade bands travelling with the wave */
.dk-wave-light {
    position: absolute;
    top: 0; left: 0;
    width: calc(100% + 560px);
    height: 100%;
    background: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .22) 140px,
        rgba(255, 255, 255, 0) 280px,
        rgba(0, 0, 0, .30) 420px,
        rgba(255, 255, 255, 0) 560px);
    mix-blend-mode: soft-light;
    animation: dk-wave-light 4.2s linear infinite;
    will-change: transform;
}
@keyframes dk-wave-light {
    from { transform: translateX(-560px); }
    to   { transform: translateX(0); }
}

/* ---------- twinkling stars (header) ---------- */
.dk-stars { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.dk-star { position: absolute; transform: translate(-50%, -50%); }
.dk-star i {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 1.8l2.95 7.02 7.6.62-5.78 4.98 1.76 7.42L12 17.86l-6.53 3.98 1.76-7.42L1.45 9.44l7.6-.62z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dk-star .tw {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)) drop-shadow(0 0 9px rgba(170, 195, 255, .7));
}
/* only while the site opens (js/desktop-fx.js adds .dk-tw-on for 3s): each star flashes once, then still */
.dk-stars.dk-tw-on .tw {
    animation: dk-twinkle var(--dk-tw-dur, 1.8s) ease-in-out var(--dk-tw-del, 0s) 1;
}
/* little light cross on the star while it shines */
.dk-star .tw::before,
.dk-star .tw::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 170%; height: 2px;
    margin: -1px 0 0 -85%;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0));
}
.dk-star .tw::after { transform: rotate(90deg); }
@keyframes dk-twinkle {
    0%   { opacity: 0;   transform: scale(.75) rotate(0deg); }
    7%   { opacity: .95; transform: scale(1.06) rotate(8deg); }
    16%  { opacity: 0;   transform: scale(.8) rotate(14deg); }
    100% { opacity: 0;   transform: scale(.75) rotate(0deg); }
}
/* page open: stars flash one after another, outward from the logo */
.dk-stars.dk-burst .bu {
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px rgba(255, 214, 140, .85));
    animation: dk-burst 1.1s ease-out var(--dk-burst-del, 0s) both;
}
@keyframes dk-burst {
    0%   { opacity: 0; transform: scale(.5); }
    30%  { opacity: .85; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(1); }
}

/* ---------- page open: logo shine ---------- */
.dk-shine {
    position: absolute;
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 58%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    opacity: 0;
}
.dk-shine.dk-go { animation: dk-shine 1.5s cubic-bezier(.4, 0, .2, 1) .1s both; }
@keyframes dk-shine {
    0%   { opacity: 1; background-position: 100% 0; }
    90%  { opacity: 1; background-position: 0 0; }
    100% { opacity: 0; background-position: 0 0; }
}

/* ---------- page open: content rises in ---------- */
/* filter bars (sector picker panel) stay above the cards that rise in after them */
#bodycontainer .containervisible-sm .filters { position: relative; z-index: 30; }
@keyframes dk-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
#bodycontainer > .containervisible-sm > *:not(.page_about):not(.directoryoffers):not(script):not(style):not(link) {
    animation: dk-rise .55s cubic-bezier(.2, .7, .2, 1) backwards;
}
#bodycontainer .page_about > * { animation: dk-rise .55s cubic-bezier(.2, .7, .2, 1) .26s backwards; }
#bodycontainer .page_about > :nth-child(1) { animation-delay: 0s; }
#bodycontainer .page_about > :nth-child(2) { animation-delay: .07s; }
#bodycontainer .page_about > :nth-child(3) { animation-delay: .14s; }
#bodycontainer .page_about > :nth-child(4) { animation-delay: .2s; }
#bodycontainer .directoryoffers > .column1 { animation: dk-rise .55s cubic-bezier(.2, .7, .2, 1) .06s backwards; }
#bodycontainer .directoryoffers > .column2 { animation: dk-rise .55s cubic-bezier(.2, .7, .2, 1) .14s backwards; }
#bodycontainer #right1 > .containervisible-sm { animation: dk-rise .45s cubic-bezier(.2, .7, .2, 1) backwards; }

/* cards one after another */
#bodycontainer #left1 .list:nth-child(-n+8),
#bodycontainer .allnewsl .newsletterbox:nth-child(-n+8) { animation: dk-rise .5s cubic-bezier(.2, .7, .2, 1) backwards; }
#bodycontainer #left1 .list:nth-child(1), #bodycontainer .allnewsl .newsletterbox:nth-child(1) { animation-delay: .12s; }
#bodycontainer #left1 .list:nth-child(2), #bodycontainer .allnewsl .newsletterbox:nth-child(2) { animation-delay: .17s; }
#bodycontainer #left1 .list:nth-child(3), #bodycontainer .allnewsl .newsletterbox:nth-child(3) { animation-delay: .22s; }
#bodycontainer #left1 .list:nth-child(4), #bodycontainer .allnewsl .newsletterbox:nth-child(4) { animation-delay: .27s; }
#bodycontainer #left1 .list:nth-child(5), #bodycontainer .allnewsl .newsletterbox:nth-child(5) { animation-delay: .32s; }
#bodycontainer #left1 .list:nth-child(6), #bodycontainer .allnewsl .newsletterbox:nth-child(6) { animation-delay: .37s; }
#bodycontainer #left1 .list:nth-child(7), #bodycontainer .allnewsl .newsletterbox:nth-child(7) { animation-delay: .42s; }
#bodycontainer #left1 .list:nth-child(8), #bodycontainer .allnewsl .newsletterbox:nth-child(8) { animation-delay: .47s; }

/* visitors who turned animations off on their device */
@media (prefers-reduced-motion: reduce) {
    #bodycontainer *, #bodycontainer *::after, .dk-wave *, .dk-stars *, .dk-shine { animation: none !important; }
    .dk-wave, .dk-stars, .dk-shine { display: none !important; }
}