#navbar {
    border-bottom: 1px solid #dedede;
    top: 0;
    position: fixed !important;
    width: 100%;
    background-color: #fff;
    z-index: 10000;
    font-size: 1em;
    line-height: 4em;
    height: 4em;
    -webkit-transition: transform 0.2s ease-out;
    -moz-transition: transform 0.2s ease-out;
    -o-transition:transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
    -moz-transform: translateX(0) translateY(0);
    -webkit-transform: translateX(0) translateY(0);
    -ms-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
}

#navbar.hide {
    -moz-transform: translateX(0) translateY(-4em);
    -webkit-transform: translateX(0) translateY(-4em);
    -ms-transform: translateX(0) translateY(-4em);
    transform: translateX(0) translateY(-4em);
}

#navbar ~ section:nth-of-type(2) {
    margin-top: 4em
}

#navbar > .inner{
    font-size: 0.8em;
}


#navbar #navicon {
    display: none;
    list-style: none;
    font-size: 1.7em;
    margin: 0;
}
#navbar #navicon li {
    padding: 0;
    line-height: inherit;
}

#navbar #topmenu {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    line-height: inherit;
}

#navbar #topmenu > * {
    line-height: inherit;
    flex-shrink: 0;
}

#navbar #topmenu #logoplace {
    z-index: 0;
    width: 200px;
    margin: 0 2em;
    flex-shrink: 1;
}
#navbar #topmenu #logoplace * {
    width:inherit;
}


#navbar #topmenu #logoplace img {
    vertical-align: middle;
    max-height: 3em !important;
    min-width: 80px;
    width: auto;
}


#navbar ul {
    white-space: nowrap;
    position: relative
}

#navbar #mainmenu,
#navbar #navicons {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    list-style: none;
}
#navbar #mainmenu {
    -moz-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;
    font-family: Hack, Arial, Helvetica, sans-serif;
    margin-left: 0;
}
#navbar #navicons {
    -moz-justify-content: flex-end;
    -webkit-justify-content: flex-end;
    -ms-justify-content: flex-end;
    justify-content: flex-end;
}
#navbar #mainmenu > li{
    line-height: inherit;
    padding: 0 0.5em;
}
#navbar #mainmenu > li.active > .row{
    border-bottom-color: #23739f;
}
#navbar #navicons > li {
    line-height: inherit;
    min-width: 3em;
    text-align: center;
    padding: 0;
}

#navbar #mainmenu > li > .row a {
    border-bottom: none;
    line-height: inherit;
}

#navbar #navicons > li > a[href^=tel]{
    font-family: Hack, Arial, Helvetica, sans-serif;
}

#navbar #mainmenu > li > .row,
#navbar #navicons > li > .icon,
#navbar #navicons > li > a{
    position: relative;
    -moz-transition: color 0.2s ease;
    -webkit-transition: color 0.2s ease;
    -ms-transition: color 0.2s ease;
    transition: color 0.2s ease;
    text-transform: uppercase;
    display: block;
    line-height: inherit;
    border: none;
}

#navbar #navicons > li > .icon,
#navbar #navicons > li > a {
    padding: 0;
}

#navbar #mainmenu > li > .row:after,
#navbar #navicons > li > .icon:after,
#navbar #navicons > li > a:after{
    border-radius: 0.5em;
    bottom: 0;
    content: '';
    position: absolute;
    right: 0;
    width: 100%;
    -moz-transition: background-color 0.2s ease;
    -webkit-transition: background-color 0.2s ease;
    -ms-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
    height: 2px;
    background-color: transparent;
}

#navbar #mainmenu > li:hover > .row a,
#navbar #navicons > li:hover > .icon,
#navbar #navicons > li:hover > a{
    color:#23739f;
}

#navbar #mainmenu > li:hover > .row:after,
#navbar #navicons > li:hover > .icon:after,
#navbar #navicons > li:hover > a:after {
    background-color: #23739f;
}

#navicons {
    white-space: nowrap;
}

#navicons .icon {
    font-size: 1.5em;
}

#navicons .cartcount {
    font-size: 10pt;
    line-height: 1em;
}

#navbar li .arrows {
    display: none
}



#navbar .submenu {
    position: fixed;
    left:0;
    background-color: #f0f0f0;
    border-bottom: 1px solid #dedede;
    border-top: 1px solid #dedede;
    width: 100%;
}

#navbar .submenu .inner {
    padding: 2em 0.5em;
}
#navicons .iconbar {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
    -o-transition:opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
    transition: opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
    -moz-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

#navicons>li:hover .iconbar{
    opacity: 1;
    visibility: visible;
    -moz-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);

}

#navicons #cartbar {
    width: 500px;
    box-sizing: border-box;
}

#navbar #mainmenu .submenu li {
    display: block;
    line-height: 2.5em;
    padding:0;
    border-bottom: none;
    text-transform: none;
}

@media screen and (min-width: 981px) {
    #navbar .submenu {
        visibility: hidden;
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
        -moz-transition: opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
        -o-transition:opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
        transition: opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
        -moz-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        border-top: none;
    }
    #navbar #mainmenu li:hover > .submenu {
        opacity: 1;
        visibility: visible;
        -moz-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
    }

}

@media screen and (max-width: 980px) {

    #navbar #topmenu > * {
        width: auto;
    }

    #navbar #topmenu #logoplace {
        z-index: 0;
        width: 150px;
        margin: 0 0 0 1em;
    }

    #navbar #navicon {
        display: block
    }
    #navbar #mainmenu {
        visibility: hidden;
        position: absolute;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        background-color: #f0f0f0;
        line-height: 3em;
        left:0;
        padding-bottom: 1em;
        margin: 0;
        border: 1px solid #dedede;
        border-top: none;
        -moz-box-shadow: 0 15px 10px -14px #000;
        -webkit-box-shadow: 0 15px 10px -14px #000;
        box-shadow: 0 15px 10px -14px #000;
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
        -moz-transition: opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
        -o-transition:opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
        transition: opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
        -moz-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        max-height: calc(100vh - 4.5em);
        overflow: auto;
    }
    #navbar #mainmenu.showed {
        opacity: 1;
        visibility: visible;
        -moz-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
    }
    #navbar #mainmenu.showed .submenu {
        display: block;
    }
    #navbar #mainmenu li {
        padding:0 2em;

    }
    #navbar #mainmenu a{
        min-width: 200px;
        width: 100%;
    }
    #navbar #mainmenu li .submenu{
        display: none;
        position: relative;
        left:auto;
        border: none;
        visibility: hidden;
        height: 0px;
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
        -moz-transition: opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
        -o-transition:opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
        transition: opacity 0.2s ease-out,background-color 0.2s ease-out,transform 0.2s ease-out;
        -moz-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    }
    #navbar #mainmenu li .submenu .inner {
        padding: 0;
    }
    #navbar #mainmenu .submenu li {
        padding: 0;
    }


    #navbar #mainmenu li .row {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-direction: row;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -moz-justify-content: space-between;
        -webkit-justify-content: space-between;
        -ms-justify-content: space-between;
        justify-content: space-between;
        -moz-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;

    }
    #navbar #mainmenu > li > .row:after{
        height: 1px;
        background-color: #dedede;
    }



    #navbar #mainmenu .submenu li a {
        border: none;
        white-space: normal;
        line-height: inherit;
        display: inline-block;
        vertical-align: middle;

    }
    #navbar #mainmenu .submenu li {
        padding: 0 1em;
        border-bottom: 1px solid #dedede;
    }
    #navbar #mainmenu .submenu ul {
        margin-left: 0;
    }
    #navbar #mainmenu li .arrows {
        display: block;
        width: 2em;
        text-align: center;
    }

    #navbar #mainmenu .arrows .fa-angle-down,#navbar #mainmenu .clicked .arrows .fa-angle-right{
        display: none;
    }

    #navbar #mainmenu .clicked .arrows .fa-angle-down {
        display: block;
    }

    #navbar #mainmenu .row.clicked + .submenu {
        opacity: 1;
        visibility: visible;
        -moz-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
        height: auto;
    }
}

@media screen and (max-width: 460px) {

    #navbar #navicons > li > a[href^="tel"] {
        display: none;
    }
}

/* right menu icons bars */

#navicons .iconbar {
    position: absolute;
    z-index: 10000;
    right: 0;
    /*margin-right: 0.8em;*/
    -moz-box-shadow:0 15px 10px -14px #000;-webkit-box-shadow: 0 15px 10px -14px #000;box-shadow: 0 15px 10px -14px #000;
    text-align: right;
    padding: 1em 2em;
    line-height: 1em;
    border:1px solid #dedede;
    border-top: none;
    background-color: #f0f0f0;
}

#navicons .flags.iconbar {
    text-align: center;
}
#navicons .flags.iconbar div {
    margin-bottom: 5px;
}


#navicons #searchbar form{
    text-align: left;
}

#navicons #phonebar a[href^="tel:"]{
    font-size: 1.5em;
    white-space: nowrap;
    margin-top: 1em;
    padding: 0;
    border-bottom: none;
    display: block;
    font-family: Hack, Arial, Helvetica, sans-serif;
}

#navicons #phonebar .worktime {
    font-size: 1em;
    margin: 0.6em 0;
}

#navicons #phonebar .worktime .button {
    font-size: 0.65em;
}

#navicons #searchbar input[type=text]{
    min-width: 30em;
    background-color: #fff;
}

/* inputwithbutton */

.inputwithbutton {
    -moz-display: flex;
    -webkit-display: flex;
    -ms-display: flex;
    display: flex;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -moz-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;
    -moz-align-items: stretch;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.inputwithbutton > *:first-child{
    border-radius: 3px;
    height: 100%;
    width: 100%;
    box-shadow: none;
    border: solid 1px rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.05);
    outline: none;
    padding: 0.5em;
    line-height: 1.2em;
}

.inputwithbutton > *:first-child:focus {
    border-color: #727272;
}

.inputwithbutton .searchResponse {
    display: none;
    background-color: #f8e2b5;
    color:#333;
    border-radius:0px 0px 3px 3px;
    border: 1px solid #ccc;
    border-top: none;
    line-height: 1em;
    padding: 0;
    position: absolute;
    font-size: 10pt;
    overflow-y: auto;
    text-align: left;
    max-height: 20em;
    z-index: 1;
    margin-top: 2.2em;
}

.inputwithbutton .searchResponse .fa-times-circle {
    position: absolute;
    right: 0;
    cursor: pointer;
    margin: -6px 3px;
}
.inputwithbutton .searchResponse .responseBody > * {
    display: block;
    text-decoration: none;
    padding: 0.7em 1.5em 0.7em 1em;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
}

.inputwithbutton .searchResponse .responseBody > *:hover {
    background-color: rgba(255,255,255,0.3);
    cursor: pointer;
    color:inherit;
}


.inputwithbutton > *:first-child:empty{
    min-height: 2.2em;
}
.inputwithbutton  input[type=submit]{
    border-radius: 0 3px 3px 0;
    padding: 0 0.5em;
    line-height: 1em;
    height: inherit;
    display: none;
}

.inputwithbutton.fixed > *:first-child,
.inputwithbutton.changed > *:first-child {
    border-radius: 3px 0 0 3px;
    border-right: none;

}
.inputwithbutton.fixed input[type=submit],
.inputwithbutton.changed input[type=submit]{
    display: block;
}



@media screen and (max-width: 680px){
    #navicons #searchbar input[type=text]{
        min-width: auto;
    }
}

#navicons .lang-label {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    color: #23739f;
    border-bottom: 1px dotted;
    cursor: pointer;
    font-size: inherit;

}
#navicons .iconbar.flags ul {
    list-style: none;
    text-align: left;
    display: inline-block;
}
#navicons .iconbar.flags li {
    margin: 0.5em;
}
#navicons .iconbar.flags .lang-label{
    display: inline-block;

    text-transform: none;
}


#navicons #cartbar .wrapper .cartinfo {
    width: 100%;
}
#navicons #cartbar .wrapper .cartinfo th {
    padding: 5px;
    text-align: center;
    font-weight: bold;
}

#navicons #cartbar .wrapper .cartinfo td {
    white-space: nowrap;
    text-align: center;
    padding: 5px 20px;
    border-top: 1px solid rgb(222, 221, 228);
}

#navicons #cartbar .wrapper .cartinfo .cartrow .text {
    white-space: normal;
    text-align: left;
}
#navicons #cartbar .wrapper .cartinfo .count {
    padding: 5px 0;
}

#navicons #cartbar .wrapper .cartinfo strike + span{
    color: red;
    display: block;
}

#navicons #cartbar .wrapper .cartinfo .cartrow.offer .text .name span {
    background-color: yellow;
}

#navicons #cartbar .buttons {
    margin-top: 1em;
    width: 100%;
    -moz-display: flex;
    -webkit-display: flex;
    -ms-display: flex;
    display: flex;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}
#navicons #cartbar .buttons .button {
    margin: 0 5px;
    color: #333;
}

.loginerrortext  {
    display: none;
    font-size: 0.8em;
    margin-bottom: 1em;
    color: rgb(255, 153, 153);
}

#navicons #loginbar .username {
    font-weight: bold;
    margin-bottom: 1em;
}
#navicons #loginbar .refs {
    margin-bottom: 1em;
}

#navicons #loginbar .refs a {
    display: inline-block;
    padding: 0;
}

#navicons .iconbar .button {
    margin-top: 1em;
}

#navicons #loginbar label span{
    padding-right: 0;
}

@media screen and (max-width: 480px) {
    #navicons #cartbar .buttons {
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-align-items: stretch;
        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        align-items: stretch;

    }
    #navicons #cartbar .buttons .button {
        margin: 5px 0;
    }

    #navicons .iconbar {
        width: 100%;
        position: fixed;
        margin: 0;
    }
}