:root {

    --itonut-width: 498px;}

/* --------------------------- HP BANNERS  ---------------------*/
.peulot.hp .lobby-actions .container {
    display: flex;
    flex-wrap: wrap;
}

a.hp-banner-corona:after, a.hp-banner-corona:before {
    display: block!important;
}

.hp.peulot a.hp-banner-corona {
    background: var(--circlebg);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.4em;
    margin: 0 0 -4px 0;
    text-decoration: none!important;
    font-size: 1.45em;
    font-weight: bold;
    color: var(--button2hoverTxt);
    border: 0.06em solid #fff;
    box-sizing: border-box;
    border-width: .06em 0em 0.5em 0.2em;
    font-family: 'Arimo', sans-serif!important;
    line-height: 3em;
    width: 33%;
    min-width: calc(50% - 160px);
    position: relative;
    line-height: 1.2em!important;
    min-height: 6em!important;
    padding: 0.5em 6em 0.5em 6em;
}

a.hp-banner-corona:before {
    margin: auto auto auto .5em!important;
    font-family: 'Font Awesome 5 Free';
    width: 2em;
    height: 2em;
    border-radius: 50%;
    display: block!important;
    min-width: 2em;
    box-sizing: border-box;
    content: "";
    font-size: 25px;
    float: none!important;
    line-height: 2em;
    position: absolute;
    right: calc(50% - 11em);
    font-size: 1.1em;
    top: calc(50% - 1em);
    display: block!important;
}

/*--- hirum banner---*/
.hp.peulot a.hp-banner-hirum.hp-banner-corona {
    font-size: 1.3em!important;
    padding: .5em 7em .5em 2em;
}

a.hp-banner-hirum.hp-banner-corona:before {
    color: #d0133d!Important;
    content: "";
    text-align: center;
    font-size: 1.6em;
    right: calc(50% - 10.5em);
    background: url(/SystemFiles/SVG/phone.svg) rgba(255, 255, 255, 0)!important;
    width: 2.5em;
    height: 2.5em;
    background-repeat: no-repeat!important;
    top: calc(50% - 1.25em);
    filter: hue-rotate(45deg);
    background-position: center!important;
    background-size: 100%!important;
    transition: .2s ease;
}

a.hp-banner-hirum.hp-banner-corona:hover:before {
    background-size: 110%!important;
    transition: .2s ease;
    background-color: white!important;
}

@media (min-width: 768px) {
    a.hp-banner-hirum.hp-banner-corona:before {
        right: 6.2%;
    }
}

a.hp-banner-corona + a.hp-banner-corona {
    border-left: 0!important;
}

@media (max-width: 768px) {
    a.hp-banner-corona {
        border-left: 0!important;
    }

    a.hp-banner-corona.hp-banner-hirum {
        padding: 1em 12%!important;
    }
}

/*------------------ bitachon banner --------------*/
.hp.peulot a.hp-banner-corona.hp-banner-bitachon {
    font-size: 1.3em!important;
    background-image: linear-gradient(to right, #a9d4f8, #caeafe)!important;
    color: #094A79!important;
    padding: .5em 3.6em .5em 2em;
    position: relative;
    order: 2;
    border-right: 0px solid white;
    width: calc(100% - (var(--itonut-width) / 2))!important;
    min-width: calc(50% - (var(--itonut-width) / 2))!important;
}

a.hp-banner-bitachon:after {
    content: ""!important;
    display: block!important;
    background: url(/PublishingImages/flag-banner-bg.png) no-repeat;
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
}

.hp.peulot a.hp-banner-corona.hp-banner-bitachon:hover {
    background-image: linear-gradient(to right, #dbfaff, #91d5ff)!important;
    color: #11393c!important;
}
a.hp-banner-aruzey-sherut.hp-banner-corona:hover:before, 
a.hp-banner-bitachon.hp-banner-corona:hover:before, a.hp-banner-itonut.hp-banner-corona:hover:before, a.hp-banner-zikaron.hp-banner-corona:hover:before {
    background-size: 110%!important;
    transition: .2s ease;
    /* background-color: white!important; */
}

a.hp-banner-bitachon.hp-banner-corona:before {
    content: "";
    text-align: center;
    right: calc(50% - 6.6em);
    font-size: 1.6em;
    padding: 0;
    margin: 0!important;
    background: url(/SystemFiles/SVG/war.svg) rgba(255, 255, 255, 0)!important;
    background-size: 100%!important;
    background-position: center!important;
    width: 2.5em;
    height: 2.5em;
    background-repeat: no-repeat;
    top: calc(50% - 1.25em);
    transition: .2s ease;
}

@media (max-width: 768px) {

.hp.peulot a.hp-banner-corona.hp-banner-aruzey-sherut {
    width: 100%!important;
    min-width: 100%!important;
}

    
    a.hp-banner-bitachon.mobile {
        display:none!important
    }

    html[lang="en"] a.hp-banner-bitachon.mobile.en-display {
        display: flex!important
    }

    html[lang="he"] a.hp-banner-bitachon.mobile.he-display {
        display: flex!important
    }

    html[lang="ar"] a.hp-banner-bitachon.mobile.ar-display {
        display: flex!important
    }

    html[lang="ru"] a.hp-banner-bitachon.mobile.ru-display {
        display: flex!important
    }

    html[lang="fr"] a.hp-banner-bitachon.mobile.fr-display {
        display: flex!important
    }

    a.hp-banner-bitachon.mobile {
        font-size: 1.3em!important;
        background-image: linear-gradient(to right, #C8F7FF, #85BCDE)!important;
        color: #094A79!important;
        padding: 0.5em 2em 0.5em 2em;
        height: 5em;
        position: relative;
        align-items: center;
        font-weight: bold;
        text-decoration: none!important;
        justify-content: stretch;
        text-align: right;
    }

    a.hp-banner-bitachon.mobile:after {
        content: ""!important;
        display: block!important;
        background: url(/PublishingImages/flag-banner-bg.png) no-repeat;
        position: absolute;
        left: 0;
        height: 100%;
        width: 100%;
    }

    a.hp-banner-bitachon.mobile:before {
        content: "";
        text-align: center;
        font-size: 1.6em;
        padding: 0;
        background: url(/SystemFiles/SVG/war.svg)!important;
        background-size: contain!important;
        background-position: center!important;
        width: 2.5em;
        height: 2.5em;
        background-repeat: no-repeat;
        transition: .2s ease;
        border-radius: 50%;
        display: block!important;
        min-width: 2.5em;
        box-sizing: border-box;
        margin-left: 0.5em!important;
    }

    .hp.peulot a.hp-banner-bitachon.hp-banner-corona:not(.mobile) {
        display: none!important;
    }

    html[dir="ltr"] a.hp-banner-bitachon.mobile {
        text-align: left;
    }

    html[dir="ltr"] a.hp-banner-bitachon.mobile:before {
        margin: 0 0.5em 0 0!important;
    }
}

/* --------------- itonut -----------------*/
.hp.peulot a.hp-banner-itonut.hp-banner-corona {
    width: var(--itonut-width);
    min-width: var(--itonut-width);
    border-right: 9px solid white;
    padding: 0 3em 0 0;
    box-sizing: border-box;
    background-color: #ffecbd;
    color: #035aa1;
    font-size: 1.3em!important;
    border-left: 0;
    order: 3;
}

html[dir="ltr"] .hp.peulot a.hp-banner-itonut.hp-banner-corona {order:1}

.hp.peulot a.hp-banner-itonut.hp-banner-corona:hover {
    background: #ffe094!important;
}

a.hp-banner-itonut.hp-banner-corona:before {
    content: "";
    text-align: center;
    right: calc(50% - 4.2em);
    font-size: 1.6em;
    padding: 0;
    margin: 0!important;
    background: url(/SystemFiles/SVG/bullhorn.svg)!important;
    background-size: contain!important;
    background-position: center!important;
    width: 2.5em;
    height: 2.5em;
    background-repeat: no-repeat;
    top: calc(50% - 1.25em);
    transition: .2s ease;
}

@media (max-width: 768px) {
    a.hp-banner-corona:before {
        position: initial;
        margin: 0 auto .5em!important;
        min-width: 2.5em;
        max-width: 2.5em;
        height: 2.5em;
        min-height: 2.5em;
    }

    a.hp-banner-corona {
        font-size: 1.4em;
        text-align: center;
        padding: 2.4em 2.5em;
        height: auto;
        background-size: 180%!important;
        width: 100%;
        box-sizing: border-box;
    }

    .hp.peulot a.hp-banner-corona {
        flex-direction: column;
        line-height: inherit;
        width: 100%;
        min-width: 100%;
        padding: 1em!important;
        border-right: 0;
        border-top-width: 0.2em;
        min-width: 100%!important;
        border-right: 0!important;
        height: auto;
    }

    .hp.peulot a.hp-banner-corona .update {
        margin-top: 1.2em;
        font-size: .8em
    }
}

/*----------zikaron---------------*/

.peulot ul {order:10}

.hp.peulot a.hp-banner-corona.hp-banner-zikaron {
    font-size: 1.3em!important;
    background-image: linear-gradient(to right, #579bc6, #2c6798)!important;
    color: #094A79!important;
    padding: .5em 3.3em .5em 2em;
    position: relative;
    color: white!important;
    order: 1;
}

a.hp-banner-zikaron.hp-banner-corona:before {
    content: "";
    text-align: center;
    right: calc(50% - 6.6em);
    font-size: 1.6em;
    padding: 0;
    margin: 0!important;
    background: url(/SystemFiles/SVG/ner2.svg) rgba(255, 255, 255, 0)!important;
    background-size: 100%!important;
    background-position: center!important;
    width: 2.5em;
    height: 2.5em;
    background-repeat: no-repeat;
    top: calc(50% - 1.25em);
    transition: .2s ease;
}

html[dir="ltr"] a.hp-banner-zikaron.hp-banner-corona:before {
    right: unset!important;
    left: calc(50% - 6.6em);
}

html[dir="ltr"] .hp.peulot a.hp-banner-corona.hp-banner-bitachon {
    /* border-left: 9px solid white!important; */
}
html[dir="ltr"] .hp.peulot a.hp-banner-itonut.hp-banner-corona {
    border-left: 0px
    border-right:0
}


html[dir="ltr"] a.hp-banner-zikaron:after {
    transform: scaleX(-1);
}

html[dir="ltr"] .hp.peulot a.hp-banner-corona.hp-banner-zikaron {
    background-image: linear-gradient(to left, #579bc6, #2c6798)!important;
    padding: .5em 2em .5em 7.3em!important;
}

a.hp-banner-zikaron:after {
    content: ""!important;
    display: block!important;
    background: url(/PublishingImages/nerot-banner-bg.png) no-repeat;
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background-size: cover;
    opacity: .4;
    transition: .3s ease;
}

.hp.peulot a.hp-banner-corona.hp-banner-zikaron:hover {
    background-image: linear-gradient(to right, #71b6e1, #4787bd)!important;
}

a.hp-banner-zikaron:hover:after {
    opacity: 1;
    transition: .3s ease
}


/*--------- aruzey sherut--------*/

.hp.peulot a.hp-banner-corona.hp-banner-aruzey-sherut {
    font-size: 1.3em!important;
    background-image: linear-gradient(to right, #a3cdca, #cdedeb)!important;
    color: #094A79!important;
    padding: .5em 4.3em 0.5em 8em;
    position: relative;
    order: 2;
    border-right: 0px solid white;
    width: calc(50% - (var(--itonut-width) / 2));
    min-width: calc(50% - (var(--itonut-width) / 2));
    border-right: 9px solid white;
}

.hp.peulot a.hp-banner-corona.hp-banner-aruzey-sherut:hover {
    background-image: linear-gradient(to right, #aad7d4, #cdf9f6)!important;
    color: #11393c!important;
}


a.hp-banner-aruzey-sherut.hp-banner-corona:before {
    content: "";
    text-align: center;
    right: calc(50% - 6.7em);
    font-size: 1.6em;
    padding: 0;
    margin: 0!important;
    background: url(/SystemFiles/SVG/map-marker.svg) rgba(255, 255, 255, 0)!important;
    background-size: 100%!important;
    background-position: center!important;
    width: 2.5em;
    height: 2.5em;
    background-repeat: no-repeat;
    top: calc(50% - 1.25em);
    transition: .2s ease;
}

a.hp-banner-aruzey-sherut:after {
    content: ""!important;
    display: block!important;
    background: url(/PublishingImages/hp-banner-aruzey-sherut.png) no-repeat;
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background-position-y: 0.6em;
    background-position-x: 0.5em;
}

@media (max-width:1280px) {

    a.hp-banner-aruzey-sherut:after {
    background-position-y: -0.8em;
    background-position-x: -0.2em;
}
}

@media (max-width:768px) {

    a.hp-banner-aruzey-sherut:after {display: none!important;}
}