.dm{
    background-color: #FFF;
    height: 100px;
    position: fixed;
    width: 100%;
    z-index: 999;
}

.dm .nav-inner{
    height: 100px;
    margin: 0 auto;
    width: 100%;
}

.dm .nav-complete{
    display: flex;
    height: 100px;
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.dm .nav-logo{
    background-image: url(../../img/jaa_logo-3.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 130px;
    left: 0;
    margin: -4px 0 0 15px;
    position: relative;
    top: 0;
    transition: .2s;
    width: 320px;
    z-index: 10;
}

.nav-logo.onscroll{
    background-image: url(../../img/jaa_logo-3.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 105px;
    left: 0;
    margin: -4px 0 0 15px;
    position: relative;
    top: 0;
    width: 257px;
    transition: .2s;
}

.dm .nav-rows{
    display: block;
    height: 100px;
    list-style: none;
    list-style-image: none;
    margin: 0 20px 0 0;
    padding: 0;
    text-align: right;
    float: right;
    position: relative;
    width: calc(100% - 175px);
}

.dm .nav-rows .nav-row{
    display: flex;
    float: right;
    height: 50px;
    position: absolute;
    right: 0;
    width: auto;
}

.dm .nav-row.nav-row-bottom{
    bottom: 0;
    height: auto;
    top: 40px;
}

/* Start mainmenu */
.dm .nav-items{
    display: flex;
    list-style-type: none;
    margin: 16px 0 0 0;
    width: auto;
}

.dm .nav-li{
    display: block;
    height: 100%;
}

.dm .nav-li a{
    color: #001D27;
    display: flex;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    margin: 10px 0 0 50px;
    padding: 0;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-color: white;
}

.nav-items .nav-li.triangle.active:not(.hide) > a:after,
.nav-items .nav-li.triangle:not(.hide):hover > a:after{
    content: '';
    position: absolute;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    top: 25px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #FFFFFF;
    z-index: 99;
}

.dm .mainmenu-title:after{
    background-color: #03435B;
    content: "";
    display: block;
    height: 1px;
    left: 50%;
    margin: 1px 0 0 0;
    position: absolute;
    transform: translateX(-50%);
    transition: 0.3s;
    width: 0;
    -webkit-transition: width 0.3s; /* Safari */
}

.dm .mainmenu-title:hover:after{
    margin: 1px 0 0 0;
    width: 100%;
}

.mainmenu-arrow{
    background-image: url(/static/img/icons/submenu-arrow-right.svg);
    background-size: 20px 10px;
    height: 10px;
    margin: 4px 0 0 0;
    width: 16px;
}

.nav-items .nav-li.active:not(.hide) .mainmenu-arrow,
.nav-items .nav-li:not(.hide):hover .mainmenu-arrow{
    background-image: url(/static/img/icons/submenu-arrow-down.svg);
}

/* End mainmenu */
/* Start submenu */
.dm .submenu{
    padding: 0;
    position: relative;
    top: -31px;
    width: 100vw;
    z-index: 98;
}

.dm .nav-li > .container{
    background-color: #E3E3E7;
    box-sizing: border-box;
    display: none;
    flex-flow: wrap;
    justify-content: flex-end;
    left: 0;
    padding: 0 20px;
    position: fixed;
    right: 0;
    top: 100px;
}

.dm .nav-li.active:not(.hide) > .container,
.dm .nav-li:not(.hide):hover > .container{
    display: flex;
    z-index: 1;
}

.dm .nav-li.active > .container{
    display: flex;
}

.dm .nav-li .subitem{
    display: flex;
    height: 32px;
    line-height: 44px;
    padding: 0 12px;
    text-align: center;
    text-transform: none;
    z-index: 1;
}

.dm .nav-li > .container:after{
    content: '';
    background-color: #E3E3E7;
    height: 28px;
    width: 100%;
    display: block;
}

.dm .nav-li > .container:after:last-of-type{
    display: none;
}

.dm .nav-li .subitem a{
    color: #001D27;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    height: 32px;
    margin: 0;
    padding: 8px 0;
    position: relative;
}

.dm .nav-li .subitem a:after{
    background-color: #03435B;
    content: "";
    display: block;
    height: 1px;
    left: 50%;
    margin: 33px 0 0 0;
    position: absolute;
    transform: translateX(-50%);
    transition: 0.3s;
    width: 0;
    -webkit-transition: width 0.3s; /* Safari */
}

.dm .nav-li .subitem a:hover:after{
    background-color: #03435B;
    content: "";
    display: block;
    height: 1px;
    left: 50%;
    margin: 32px 0 0 0;
    position: absolute;
    transform: translateX(-50%);
    transition: 0.3s;
    width: 100%;
    -webkit-transition: width 0.3s; /* Safari */
}
/* End nav rows */

/* Start search */
.nav-search{
    cursor: pointer;
    display: flex;
    height: 39px;
    margin: 4px 0 0 0;
    opacity: 1;
}

.search-icon {
    background-color: transparent;
    background-image: url('../../img/icons/search.svg');
    background-position: 10px 2px;
    background-repeat: no-repeat;
    background-size: 31px;
    height: 32px;
    margin-top: 13px;
    width: 32px;
}

.search-underline {
    background-color: #001D27;
    display: inline-block;
    height: 1.5px;
    left: 42px;
    margin-top: -4px;
    position: absolute;
    top: 45px;
    transform: scale(0, 1);
    transition: all 0.6s linear;
    width: 190px;
    -webkit-transform: scale(0, 1);
    -webkit-transition: all 0.1s linear;
}

input[type=text]{
    border: none;
    box-sizing: border-box;
    color: #001D27;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 10px;
    font-weight: 400;
    opacity: 1;
    padding: 9px 3px 2px 12px;
    transition: width 0.3s ease-in-out;
    transition: color 1s ease;
    width: 0;
    -webkit-transition: width 0.3s ease-in-out;
}

input[type=text]:hover{
    cursor: pointer;
    opacity: 1;
}

input[type=text]#input-field:focus{
    color: #001D27;
    cursor: text;
    font-size: 14px;
    line-height: 0px;
    margin: 3px 0 0 0;
    opacity: 1;
    padding-left: 10px;
    padding-right: 0;
    outline: none;
    transition: color 1s ease;
    transition: width 0.5s ease-in-out;
    width: 220px;
    -webkit-transition: width 0.5s ease-in-out;
}

input:focus+.search-underline{
    transform: scale(1);
    -webkit-transition: all 0.3s linear;
    -webkit-transition-delay: 0.3; /* Safari */
    transition-delay: 0.3s;
}

input::placeholder{
    color: #001D27;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus l {
    -webkit-box-shadow: 0 0 0 30px #FFFFFF inset;
}
/* End search */

/* Start login button */
 div.dm .login-btn{
    background-image: url('../../img/icons/account.svg');
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 23px;
    margin-left: 5px;
    opacity: 1;
    position: relative;
    top: 23px;
    transition: 0.2s;
    width: 25px;
}

div.dm .login-btn:hover{
    background-image: url('/static/img/icons/account-full.svg');
    transition: 0.2s;
}

div.dm .login-btn.active{
    background-image: url('/static/img/icons/account-full.svg');
}

.login-container{
    cursor: pointer;
    display: flex;
    margin: -3px 0 0 8px;
}

.login-hover{
    display: none;
    height: 100%;
    line-height: 70px;
    font-size: 14px;
    margin-left: 5px;
}

.login-container:hover ~ .login-btn{
    background-image: url('/static/img/icons/account-full.svg');
}
/* End login button */

@media screen and (max-width: 1500px){
    .dm .nav-li a{
        font-size: 15px;
        margin: 10px 0 0 35px;
    }

    .dm .mainmenu-title:after{
        background-color: #03435B;
        content: "";
        display: block;
        height: 1px;
        left: 50%;
        margin: 1px 0 0 0;
        position: absolute;
        transform: translateX(-50%);
        transition: 0.3s;
        width: 0;
        -webkit-transition: width 0.3s; /* Safari */
    }

    .dm .mainmenu-title:hover:after{
        margin: 1px 0 0 0;
        width: 100%;
    }
    /* End mainmenu */

    /* Start submenu */
    .dm .submenu{
        padding: 0;
        position: relative;
        top: -31px;
        width: 100vw;
        z-index: 98;
    }

    .dm .nav-li .subitem{
        display: flex;
        height: 32px;
        line-height: 44px;
        padding: 0 12px;
        text-align: center;
        text-transform: none;
        z-index: 1;
    }

    .dm .nav-li .subitem a{
        color: #001D27;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        font-weight: 600;
        margin: 0;
        padding: 8px 0;
    }

    .dm .nav-li .subitem a:after{
        background-color: #03435B;
        content: "";
        display: block;
        height: 1px;
        left: 50%;
        margin: 33px 0 0 0;
        position: absolute;
        transform: translateX(-50%);
        transition: 0.3s;
        width: 0;
        -webkit-transition: width 0.3s; /* Safari */
    }

    .dm .nav-li .subitem a:hover:after{
        background-color: #03435B;
        content: "";
        display: block;
        height: 1px;
        left: 50%;
        margin: 32px 0 0 0;
        position: absolute;
        transform: translateX(-50%);
        transition: 0.3s;
        width: 100%;
        -webkit-transition: width 0.3s; /* Safari */
    }
    /* End nav rows */

    /* Start search */
    .nav-search{
        cursor: pointer;
        display: flex;
        height: 42px;
        margin: 6px 0 0 0;
        opacity: 1;
    }

    .search-icon {
        background-color: transparent;
        background-image: url('../../img/icons/search.svg');
        background-position: 10px 16px;
        background-repeat: no-repeat;
        background-size: 32px;
        height: 40px;
        margin: 0;
        width: 32px;
    }

    .search-underline {
        background-color: #001D27;
        display: inline-block;
        height: 1.5px;
        left: 42px;
        margin-top: -4px;
        position: absolute;
        top: 45px;
        transform: scale(0, 1);
        transition: all 0.6s linear;
        width: 190px;
        -webkit-transform: scale(0, 1);
        -webkit-transition: all 0.1s linear;
    }

    input[type=text]{
        border: none;
        box-sizing: border-box;
        color: #001D27;
        cursor: pointer;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        line-height: 10px;
        font-weight: 400;
        opacity: 1;
        padding: 9px 3px 2px 12px;
        transition: width 0.3s ease-in-out;
        transition: color 1s ease;
        width: 0;
        -webkit-transition: width 0.3s ease-in-out;
    }

    input[type=text]:hover{
        cursor: pointer;
        opacity: 1;
    }

    input[type=text]#input-field:focus{
        color: #001D27;
        cursor: text;
        font-size: 14px;
        line-height: 0px;
        margin: 3px 0 0 0;
        opacity: 1;
        padding-left: 10px;
        padding-right: 0;
        outline: none;
        transition: color 1s ease;
        transition: width 0.5s ease-in-out;
        width: 220px;
        -webkit-transition: width 0.5s ease-in-out;
    }

    input:focus+.search-underline{
        transform: scale(1);
        -webkit-transition: all 0.3s linear;
        -webkit-transition-delay: 0.3; /* Safari */
        transition-delay: 0.3s;
    }

    input::placeholder{
        color: #001D27;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus
    input:-webkit-autofill,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus l {
        -webkit-box-shadow: 0 0 0 30px #FFFFFF inset;
    }
    /* End search */

    /* Start login button */
     div.dm .login-btn{
        background-image: url('../../img/icons/account.svg');
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
        height: 23px;
        margin-left: 5px;
        opacity: 1;
        position: relative;
        top: 23px;
        transition: 0.2s;
        width: 25px;
    }

    div.dm .login-btn:hover{
        background-image: url('../../img/icons/account-full.svg');
        transition: 0.2s;
    }

    div.dm .login-btn.active{
        background-image: url('../../img/icons/account-full.svg');
    }

    .login-container{
        cursor: pointer;
        display: flex;
        margin: -3px 0 0 8px;
    }

    .login-hover{
        display: none;
        height: 100%;
        line-height: 70px;
        font-size: 14px;
        margin-left: 5px;
    }

    .login-container:hover ~ .login-btn{
        background-image: url('../../img/icons/account-full.svg');
    }
    /* End login button */
}

@media screen and (max-width: 1300px){
    .dm .nav-li a {
        font-size: 15px;
        margin: 10px 0 0 20px;
    }

@media screen and (max-width: 1160px){
    /* Start menu basics */
    div.dm{
        display: none;
    }
    /* End menu basics */
}