/******Header******/
.burger { display: none; width: 25px; }
    .burger > ul { direction: ltr; }
        .burger > ul > li { height: 3px; border-radius: 5px; background-color: #212121; margin-bottom: 4px; position: relative;transition:all 0.5s ease-in-out; }
            .burger > ul > li:last-child { margin-bottom: 0; }
    .burger.active > ul > li { width: 100% !important;background-color:#fff; }
        .burger.active > ul > li:nth-child(1) { transform: rotate(-45deg); top: 6px; }
        .burger.active > ul > li:nth-child(2) { opacity: 0; }
        .burger.active > ul > li:nth-child(3) { transform: rotate(45deg); top: -8px; }

        header {z-index:1000;}
.desktop_header { width: 100%; box-sizing: border-box; transition: all 0.5s ease-out; background-color: #a7a7a71b; border-top: 2px solid #3D3D3D ;}
    .desktop_header:hover, .desktop_header:focus { background-color: #fff; }
.logo { width: 155px;display:inline-block; background-image:url('/National_Library/oe_/https://oknin.co.il/Resources/General/Logo.svg');background-position:center center;background-size:contain;background-repeat:no-repeat;}
    .logo > img { width: 100%; vertical-align: middle;opacity:0; }

.desktop_header nav { margin-right: 60px;display:inline-block;vertical-align:bottom; }
    .desktop_header nav > ul { display: flex; flex-wrap: wrap; }
        .desktop_header nav > ul > li {position:relative;  }
            .desktop_header nav > ul > li.mobile_item {display:none; }
            .desktop_header nav > ul > li:last-child { border-left: none; }
            .desktop_header nav > ul > li > a { display: flex; align-items: center; justify-content: space-between; font-size: 1.2em; color: #262626; font-weight: 400; padding: 11.5px 15px; box-sizing: border-box; position: relative; }
            .desktop_header nav > ul > li a.has_drop { padding-left: 40px; }
                .desktop_header nav > ul > li a.has_drop > .arrow_conti { position: absolute; left: 10px; top: 8px;}
                .desktop_header nav > ul > li a.has_drop > .arrow_conti .arrow {padding:3px; }
            .desktop_header nav > ul > li > a::after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 5px; background-color: #000; transition: all 0.5s ease-in-out; opacity: 0; pointer-events: none; }
            .desktop_header nav > ul > li > a::before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background-color: #000; transition: all 0.5s ease-in-out; opacity: 0; pointer-events: none; }
            .desktop_header nav > ul > li > a:hover::after, .desktop_header nav > ul > li > a:focus::after, .desktop_header nav > ul > li > a:hover::before, .desktop_header nav > ul > li > a:focus::before { opacity: 1; }
            .desktop_header nav > ul > li > a.active::after, .desktop_header nav > ul > li > a.active::before { opacity: 1; }

.desktop_header .side_items { position: absolute; left: 10px; bottom: 5px; display: flex; justify-content: center; align-items: center; }
.desktop_header .side_items > ul > li {position:relative; overflow:hidden;}
.toggle_search {display:flex; border-radius:50%;border:1px solid transparent;transition:border-color 0.5s ease-in-out;width:42px;height:42px;align-items:center;justify-content:center; }
    .toggle_search.active { opacity: 0; pointer-events: none; position: absolute; }
    .toggle_search:hover, .toggle_search:focus { border-color: #ccc; }
.search_form_header { position: absolute; left: -100%; top: 0;  width: 100%; max-width: 170px;  overflow: hidden; transition: all 0.5s ease-in-out; }
    .search_form_header.active {left:0; position:relative;width:100%;
    }
    .search_form_header form { width: 100%; position: relative; }
        .search_form_header form input {height:42px;line-height:42px;width:100%; font-size:1.2em;border-radius:25px;padding:0 10px;box-sizing:border-box; background-color:transparent;border:1px solid #ccc;}
.search_form_header form button {position:absolute;left:0;top:0; display:flex;width:42px;height:42px; align-items:center;justify-content:center;border-radius:50%;background-color:transparent;}

nav .drop {min-width:250px; position:absolute;right:0;top:100%;opacity:0;pointer-events:none;border-radius:0 0 5px 5px;background-color:#fff;box-shadow:0 3px 6px #00000029; z-index:10;}
    nav .drop > ul { padding: 0 10px; }
        nav .drop > ul > li { border-bottom: 1px solid rgb(0 0 0 / 0.5); }
            nav .drop > ul > li:last-child { border-bottom: none; }
            nav .drop > ul > li > a { color: #000; font-size: 1.1em; font-weight: 300; padding: 17px 10px; display: block; transition:all 0.5s ease-in-out;}
                nav .drop > ul > li > a:hover, nav .drop > ul > li > a:focus {padding-right:25px; }
    nav .drop:hover, nav .drop:focus, .has_drop:hover ~ .drop, .has_drop:focus ~ .drop { opacity: 1; pointer-events: all; }

/******End Header******/


@media only screen and (max-width : 1020px) {
    header {min-height:78px;background-color:#ffffffe9 !important;display:block;position:relative;z-index:1000;}
    header > .auto_margin {position:absolute;right:0;top:0;width:100%;height:100%; }
    .logo {  width: 86px; position: absolute; right: 0;left:0;margin:0 auto; top: 5px;z-index:2; transition:all 0.8s ease-in-out;}
        .logo.active { background-image: url('/National_Library/oe_/https://oknin.co.il/Resources/General/logoWhite.svg'); right: 100px; left: calc(100% - 180px); }
    .burger { display: block;position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:10; }
    .desktop_header nav { position: fixed; right: 0; top: 0; width: 100%; min-height: 100%; margin: 0; opacity: 0; transition: all 0.5s ease-in-out; pointer-events: none; background-color: transparent; transition-delay: 0.25s; }
        .desktop_header nav.active { opacity: 1; pointer-events: all; transition-delay: 0s; }
        .desktop_header nav > ul { display: block; top: 0; width: 100%; max-width:283px; padding-top: 76px; background-color: #000; min-height: 100%; overflow-y: auto; position: absolute; right: -100%; transition: all 0.5s ease-in-out; }
        .desktop_header nav.active > ul { right: 0; transition-delay: 0.25s; }
    .desktop_header nav > ul > li { width: 100%; border-bottom: 1px solid #fff; }
        .desktop_header nav > ul > li.mobile_item {display:block; }
        .desktop_header nav > ul > li > a {display:block; color:#fff;padding:15px;box-sizing:border-box;}
    .header_search form > ul > li:last-child { display: none; }
    .header_search { position: absolute; left: 5px; top: 5px; width: calc(100% - 175px); max-width: 240px; }
        .header_search::after { content: ""; position: absolute; right: -5px; top: 0; height: 100%; width: 1px; background-color: #D4D4D4; }
        .header_search form > ul > li > input { font-size: 1.2em; padding: 8px 8px 8px 40px; }

    .desktop_header .side_items {bottom:initial;top:50%;transform:translateY(-50%);left:10px;width:calc(100% - 70px); }
    .desktop_header nav > ul > li > a.has_drop {position:relative; }
        .desktop_header nav > ul > li > a.has_drop > .arrow_conti { position: absolute; left: 0;  padding:6px 0 14px 0;width:40px;text-align:center;}
            .desktop_header nav > ul > li > a.has_drop > .arrow_conti .arrow { border-color: #fff; }
    nav .drop {position:static;pointer-events:all;opacity:1;border-radius:0;display:none;transition:none; box-shadow:none;background-color:#000;}
        nav .drop > ul > li {border-bottom-color:#ccc; }
        nav .drop > ul > li > a {color:#fff; }

/*    .toggle_search.active { }
    .search_form_header { }
    .search_form_header.active {position:absolute;width:calc(100% - 70px); }
    .desktop_header .side_items > ul > li { }*/
    .desktop_header .side_items > ul { width: 100%; }
    .desktop_header .side_items > ul > li {width:100%; min-height:42px;}
    .desktop_header .side_items.active { z-index: 3; }
    .search_form_header {width:100%;max-width:100%;}
    .toggle_search {position:absolute;left:0; }
    .search_form_header form input {background-color:#fff; }

    .desktop_header nav > ul > li > a::before, .desktop_header nav > ul > li > a::after {background-color:#fff; }
}

@media only screen and (max-width : 440px) {
}

@media only screen and (max-width : 414px) {
}

@media only screen and (max-width : 380px) {
}

@media only screen and (max-width : 340px) {
}