.blur{filter: blur(5px);}
.mask{background: rgba(0, 0, 0, .45); filter: blur(50px)}
.mask-agenda{background: linear-gradient(241.36deg, #FFE2C0 44.48%, #152234 187.82%);}
.mask-banner{background: rgba(0,0,0,.54)}

.shadow{box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);}
.shadow-alt{box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.13);}
.shadow-alt-2{box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.13);}
.text-shadow{text-shadow: 0px 2px rgba(96, 71, 110, .5)}
.text-shadow-white{text-shadow: 0px 0px 4px rgba(255, 255, 255, .25);}

.gradient-banner{background: linear-gradient(0deg, rgba(6, 26, 83, 0.51), rgba(6, 26, 83, 0.51));}
.gradient-article{background: linear-gradient(180deg, rgba(6, 26, 83, 0.26) 0%, rgba(0, 0, 0, 0.6) 100%);}
.gradient-shortcut{background: linear-gradient(180deg, rgba(180, 185, 199, 0) 0%, #000000 45.14%, #000000 47.03%, rgba(180, 185, 199, 0) 87.54%);}

.transparent{opacity: 0.6}
.transparent-alt{opacity: .12}
.transparent-alt-2{opacity: .78}
.transparent-alt-2{opacity: .87}

a.special:hover{text-decoration: underline}
.lspacing{letter-spacing: 0.15em;}

/*
#menu.opened{max-height: calc(100vh - var(--header-height))}
@media(max-width:768px){
    #menu{
        max-height: 0px;
        overflow: hidden;
        z-index: -1;
    }
    #menu.opened{overflow: auto}
} */

/* #header nav + div{height: 8.489583333vw} */

.topmenu div{z-index: 1; max-height: 0px; min-width: 100%}
.topmenu:hover div{max-height: 10vw}

li.menu.active, li.menu:hover{color: var(--warning-color)}
li.menu > ul, li.menu > div{
    display: none;
    width: 25vw;
}
li.menu > div.special{
    width: 38vw;
}
li.menu:hover ul{display: block}
li.menu:hover > div{display: flex}
li.menu li > *:before{
    content: "";
    display: block;
    position: absolute;
    padding: 0px;
    background: var(--warning-color);
    border-radius: 50%;
    right: 100%;
    transform: translateX(-100%);
    transition: all .5s;
}
li.menu li:hover > *:before{padding: var(--5px);}
li.menu .special a:hover > i.circle{padding: var(--5px);}

#floatingBtn{opacity: .5}
#floatingBtn:hover{opacity: 1}

.banner{height: 16.895833333vw}

.shortcut icon{filter: contrast(0%) brightness(200%)}
.shortcut:hover icon{filter: contrast(100%) brightness(100%)}
.shortcut > i{opacity: 0}
.shortcut:hover > i{opacity: 1}

.shortcut-banner{z-index: 0; opacity: 0}
.shortcut-banner.active{z-index: 0; opacity: 1}

#links{max-height: 0px}
#links.opened{max-height: 35vh}
.link{margin-top: 100%;}
#links.opened .link{margin-top: 0%;}
.link:hover .transition{
    background-color: var(--warning-color);
    color: white;
}
.link:hover img{filter: contrast(0%) brightness(200%)}

.title-header.title-h3{padding: var(--10px) 0px}

#slider .slide-dot.active{background: var(--success-color)}

.news figure{height: 33.28125vw; min-height: 33.28125vw}
.video figure{height: 13.28125vw}
@media(max-width:768px){
    .news figure, #homeArticles > i.absolute{height: 75vw; min-height: 75vw}
    .os-slider-child .news figure{width: 75vw; min-width: 75vw}
}

.job:hover > span{height: calc(100% - var(--30px))}
.account .monthlyFee{font-size: .65em}
.branch .flag{width: 12vw; margin-left: -6vw}

.os-tab-head.active *{font-weight: 900}
.os-tab-head::after{
    content: "";
    bottom: calc(-1 * var(--1px));
    left: 0; right: 0;
    margin: auto;
    width: 0%;
    height: var(--5px);
    position: absolute;
    background: var(--success-color);
    transition: all 1s
}
.os-tab-head.active::after{width: 100%;}

.yt-preview{width: 56.5625vw; height: 31.6145vw}
.flickr-frame, .youtube-frame, .map-frame, #article .slide-box{height: 32vw;}
textarea{height: 12vw}
@media(max-width:768px){
    .yt-preview, .map-frame{width: 80vw; height: 40vw}
    .flickr-frame, .youtube-frame, .map-frame, #article .slide-box{height: 220px;}
    textarea{height: 150px}
}

header.shadow{
    box-shadow: 1px 1px 2px 2px rgb(199 199 199 / 10%), 0 0 1em 0 rgb(0 0 0 / 61%);
}

@media(max-width:768px){
    :root{
        --header-height: 90px!important;
    }
    .banner {
        height: 100%;
        min-height: 35.895833vw!important;
    }
   
    .shadow-alt-2 {
        box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.08);
    }
    .shadow {
        box-shadow: 0px 1px 8px 0px rgb(0 0 0 / 30%);
    }
    .os-file {
        --file-h: var(--40px) !important;
    }
    .file-edit input{
        margin: 0!important;
        padding-left: 5px!important;
    }
   
    .os-form input[type='text'], .os-form input[type='email'], .os-form input[type='password'], .os-form input[type='url'], .os-form input[type='date'], .os-form input[type='search'], .os-form input[type='tel'], .os-form input[type='number'], .os-form select, .os-form textarea, .os-input {
        font-size: 17px;
        margin-bottom: unset;
    }
    .record-box {
        padding: 10px 10px 0px 10px!important;
    }
    .record tr > * {
        padding: 10px 5px!important;
    }
    .black {
        color: rgb(19, 19, 19) !important;
    }
    .black-alt {
        color: rgb(79 79 79) !important;
    }

    footer .gray-alt{
        --gray-color-alt: rgba(196, 196, 196, 1) !important;
    }

    header.shadow{
        box-shadow: 1px 1px 2px 2px rgb(199 199 199 / 25%)!important;
    }
}

#cookiesBox .parameters {
    display: none;
}

#cookiesBox .parameters.opened {
    display: block;
}

footer .logo {
    width: 26.09vw;
    height: 4.11458vw;
}

footer .list-menu a {
    transition: all .5s ease-in-out;
}
footer .list-menu a:hover {
    color: var(--success-color-alt);
    transition: all .5s ease-in-out;
}

footer .list-input input {
    background: transparent;
}
footer .list-input input::placeholder {
    color: var(--black-color);
    font-size: var(--p-size-alt);
}

footer form button {
    border: none;
}

#footer ul > li > a{
    font-weight: 300;
    display: block;
    transform: translateX(0px);
    transition: all .5s;
    padding-top: var(--3px);
    padding-bottom: var(--10px);
}
#footer ul > li > a:hover{transform: translateX(10px);}

@media(max-width:768px) {

    footer .logo {
        width: 62.09vw;
        height: 11.11458vw;
    }

}



/* ========== Reveal animations ========== */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s cubic-bezier(.2, .8, .2, 1), transform 1s cubic-bezier(.2, .8, .2, 1);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

.reveal.delay-1 {
    transition-delay: .08s;
}

.reveal.delay-2 {
    transition-delay: .16s;
}

.reveal.delay-3 {
    transition-delay: .24s;
}

.reveal.delay-4 {
    transition-delay: .32s;
}



/* Image "fake-photo" gradients — different brand tints per card */
.bg-1 {
    background: linear-gradient(135deg, #0A1C3D 0%, #1E5BB8 50%, #2BB3E0 100%);
}

.bg-2 {
    background: linear-gradient(160deg, #B89968 0%, #8C6F3E 100%);
}

.bg-3 {
    background: linear-gradient(135deg, #1F6B4C 0%, #2BB3E0 100%);
}

.bg-4 {
    background: linear-gradient(160deg, #C45A3D 0%, #B89968 100%);
}

.bg-5 {
    background: linear-gradient(135deg, #133466 0%, #0A1C3D 100%);
}

.bg-6 {
    background: linear-gradient(160deg, #2BB3E0 0%, #1E5BB8 50%, #0A1C3D 100%);
}

.bg-7 {
    background: linear-gradient(135deg, #8C6F3E 0%, #0A1C3D 100%);
}

.bg-8 {
    background: linear-gradient(160deg, #0B1426 0%, #1E5BB8 100%);
}

/* SVG decorative pattern overlay */
.bg-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
    background-size: 22px 22px;
    mix-blend-mode: overlay;
}

.bg-pattern-lines {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 1px, transparent 14px);
}

.bg-pattern-grid {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .5) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .5) 1px, transparent 1px);
    background-size: 48px 48px;
}