﻿/******Header******/
.burger { display: none; width: 25px; }
    .burger > ul { direction: ltr; }
        .burger > ul > li { height: 3px; border-radius: 5px; background-color: #000000; 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; position: relative; display: flex; align-items: center; background-color: #fff; box-shadow: 0px 3px 6px #00000029; padding:10px 30px;box-sizing:border-box;}
.logo { max-width: 204px;width:100%;}
    .logo > img { width: 100%; vertical-align: middle; }

header nav { margin-right:30px; }
header nav .close_nav{ display:none; }
    header nav > div > ul { display: flex; flex-wrap: wrap;align-items:center; }
        header nav > div > ul > li {position:relative;  }
            header nav > div > ul > li.mobile_item {display:none; }
            header nav > div > ul > li:last-child { border-left: none; }
            header nav > div > ul > li > a { display: flex; align-items: center; justify-content: space-between; font-size: 1.3em; color: #313131; font-weight: 400; padding: 10px 15px; box-sizing: border-box; position: relative; }
                header nav > div > ul > li > a > span {position:relative; }
            header nav > div > ul > li a.has_drop { padding-left: 40px; }
                header nav > div > ul > li a.has_drop > .arrow_conti { position: absolute; left: 10px; top: 8px;}
                header nav > div > ul > li a.has_drop > .arrow_conti .arrow {padding:3px; }
            /*header nav > div > ul > li > a > span::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; }*/
            header nav > div > ul > li > a > span::before { content: ""; position: absolute; bottom: -8px; right: 0; width: 100%; height: 5px; background-color: rgba(1, 183, 184, 0.25); transition: all 0.5s ease-in-out; opacity: 0; pointer-events: none; }
            header nav > div > ul > li > a:hover > span::after, header nav > div > ul > li > a:focus > span::after, header nav > div > ul > li > a:hover > span::before, header nav > div > ul > li > a:focus > span::before { opacity: 1; }
            header nav > div > ul > li > a.active > span::after, header nav > div > ul > li > a.active > span::before { opacity: 1; }

header .side_items { position: absolute; left: 10px; top:50%;transform:translateY(-50%); display: flex; align-items: center; color: #313131;font-size:1.3em; }
header .side_items > ul > li {position:relative;display:flex;flex-wrap:wrap; align-items:center;}
    header .side_items > ul > li > a:not(.button) { display: flex; align-items: center; color: #01B7B8; }
    header .side_items > ul > li > * {margin-right:10px; }
header .side_items > ul > li .button {font-size:1em; }
    header .side_items > ul > li .button {width:auto; }
.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 : 1100px) {
    header .side_items {font-size:1em; }
    header .side_items > ul > li > span:nth-child(1) {display:none; }
    header .side_items > ul > li .button {padding:10px;font-size:1em; }

    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 {display:block; width: 115px;position:absolute;right:45px;top:50%;transform:translateY(-50%); transition: all 0.8s ease-in-out; z-index:1001;}
    .burger { display: block; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 1001; }
    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;z-index:1000; }
        header nav > div { position: absolute; width: 100%; max-width: 290px; background-color: #019a9a; border-radius: 0 0 0 50px; box-shadow: 0px 3px 6px #00000029; right: -300px; top: 0; min-height: 100%; overflow-y: auto; transition: all 0.5s ease-in-out; padding: 0 10px 20px 10px; border-top: 78px solid #00000029; box-sizing: border-box; }
        header nav.active { opacity: 1; pointer-events: all; transition-delay: 0s; }
        header nav.active > div { right:0;}
        header nav > div > ul > li { width: 100%; border-bottom: 1px solid #fff; }
            header nav > div > ul > li.mobile_item { display: block; }
            header nav > div > 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; }

    header nav > div > ul > li > a.has_drop { position: relative; }
        header nav > div > ul > li > a.has_drop > .arrow_conti { position: absolute; left: 0; padding: 6px 0 14px 0; width: 40px; text-align: center; }
            header nav > div > 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); }
    header .side_items > ul > li { }*/
    header .side_items > ul { width: 100%; }
        header .side_items > ul > li { width: 100%; min-height: 42px; }
    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; }

    header nav > div > ul > li > a::before, header nav > div > 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 : 370px) {
    .logo { width:95px;}
    header .side_items {font-size:0.8em; }
    header .side_items > ul > li > a:not(.button) {margin-right:5px; }
}

@media only screen and (max-width : 340px) {
}
