header a:focus, header a:hover, header nav ul li a[aria-expanded=true], header nav.primary ul li a[aria-expanded=true], header nav.primary ul li:hover > a {
    color: var(--suzuki-red)
}

.skip-content, header .btn-cart .quant {
    background-color: var(--suzuki-red);
    position: absolute
}

header .btn-cart, header .btn-menu, header .search-wrap, header nav ul, header nav ul li {
    position: relative
}

header, header nav.primary ul ul {
    box-shadow: 0 5px 5px rgba(0,0,0,.15);
    background-color: #fff
}

    header, header nav.secondary {
        position: fixed;
        top: 0;
        width: 100%
    }

:root {
    --suzuki-red: #df013a;
    --cubic-bezier-inout-sine: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    --cubic-bezier-out-expo: cubic-bezier(0.16, 1, 0.3, 1)
}

body.overflow-hidden {
    overflow: hidden
}

.skip-content {
    left: -10000px;
    top: 0;
    padding: 1.6rem 1.5rem;
    color: #fff !important;
    font-size: 1.6rem;
    z-index: 100;
    text-decoration: none !important
}

    .skip-content i {
        margin-right: 1rem
    }

    .skip-content:hover {
        color: #fff
    }

    .skip-content:focus {
        left: 0;
        outline-offset: 0 !important;
        outline-width: 0 !important
    }

header {
    left: 0;
    z-index: 10;
    padding: 0 25px;
    line-height: 1.25
}

    header a:focus {
        text-decoration: none
    }

    header .col .inner-col {
        width: 100%;
        height: 8rem;
        display: flex;
        align-items: center
    }

        header .col .inner-col.inner-right {
            justify-content: end
        }

    header .logo-link {
        width: 7.4rem;
        margin-right: 5rem
    }

    header .logo-img {
        width: 7.4rem;
        height: 5rem
    }

    header .inner-right nav ul li {
        font-weight: 500
    }

    header .icon-link {
        vertical-align: middle;
        margin-right: 1rem;
        transform: scale(1.75) translateY(-.05rem);
        display: inline-block
    }

        header .icon-link.fa-video-camera {
            margin-right: 1.5rem
        }

    header .icon {
        font-size: 2.4rem
    }

    header .fa-chevron-down {
        margin-left: .5rem
    }

    header .btn-menu {
        z-index: 1
    }

        header .btn-menu .fa-times {
            transform: scale(1.15)
        }

    header .btn-cart {
        padding-left: 1rem;
        padding-right: 1rem
    }

        header .btn-cart .quant {
            display: block;
            width: 1.6rem;
            height: 1.6rem;
            top: 50%;
            right: 0;
            border-radius: 2rem;
            color: #fff;
            font-family: "Open Sans";
            font-weight: 700;
            font-size: 1rem;
            text-align: center;
            line-height: 1.6;
            transform: translate(15%,-90%)
        }

    header .search-wrap input {
        width: 100%;
        border: none;
        border-bottom: 1px solid rgba(0,0,0,.25);
        font-size: 1.8rem;
        padding: 1rem 1rem 1rem 3.5rem
    }

        header .search-wrap input::-ms-input-placeholder, header .search-wrap input::placeholder {
            color: rgba(0,0,0,.25)
        }

        header .search-wrap input:focus {
            outline-color: var(--suzuki-red)
        }

    header .search-wrap .fa {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-55%);
        font-size: 2rem
    }

    header nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center
    }

        header nav ul li {
            text-transform: uppercase;
            font-weight: 700;
            font-size: 1.3rem;
            padding: 1.5rem 0
        }

            header nav ul li a[aria-expanded=true] + ul, header nav ul ul.is-visible, header nav.primary ul li:hover ul {
                display: block
            }

        header nav ul ul {
            display: none;
            padding: .6rem 2rem
        }

            header nav ul ul li {
                display: block;
                line-height: 1.3;
                margin: 1.5rem 0 !important;
                padding: 0
            }

    header nav.primary ul li:not(:last-child) {
        margin-right: 44px
    }

    header nav.primary ul ul {
        position: absolute;
        top: 4.6rem;
        left: -2rem;
        padding: .6rem 2rem;
        min-width: 22rem
    }

    header nav.primary#primaryNavRight ul li:not(:last-child) {
        margin-right: 34px
    }

    header nav.primary ul li.btn-cart ul {
        right: -2rem;
        left: auto;
        min-width: 32rem;
        padding: 0 .5rem .5rem
    }

        header nav.primary ul li.btn-cart ul .row {
            margin-top: 1rem
        }

        header nav.primary ul li.btn-cart ul hr {
            margin: .5rem 0
        }

        header nav.primary ul li.btn-cart ul .procedi {
            margin-top: 1.5rem
        }

    header nav.secondary {
        right: 0;
        height: 100%;
        pointer-events: none;
        overflow: hidden
    }

        header nav.secondary .dark-layer {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: background .6s var(--cubic-bezier-out-expo)
        }

        header nav.secondary .inner-nav {
            transform: translateX(100%);
            transition: transform .6s var(--cubic-bezier-out-expo);
            background-color: #fff;
            padding: 8rem 4.5rem 4.5rem;
            width: 30%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            flex-direction: column
        }

            header nav.secondary .inner-nav > ul {
                flex-direction: column;
                align-items: flex-start;
                margin-top: 40px;
                padding: 0 1.6rem;
                margin-left: -1.6rem;
                width: calc(100% + 3.6rem);
                height: calc(100% - 170px);
                overflow-y: scroll;
                scrollbar-width: auto;
                scrollbar-color: rgba(0,0,0,0.15) transparent
            }

                header nav.secondary .inner-nav > ul li {
                    font-weight: 700
                }

                header nav.secondary .inner-nav > ul > li {
                    width: 100%;
                    padding: .75rem 0
                }

                header nav.secondary .inner-nav > ul li a {
                    display: flex;
                    justify-content: space-between;
                    width: 100%
                }

                header nav.secondary .inner-nav > ul ul {
                    padding: 1.5rem;
                    background: #f4f4f4;
                    margin-top: 1rem;
                    border: 1px solid #ccc
                }

                    header nav.secondary .inner-nav > ul ul li {
                        margin: 1.5rem 0 0 !important
                    }

                        header nav.secondary .inner-nav > ul ul li:first-child {
                            margin-top: 0 !important
                        }

            header nav.secondary .inner-nav .lower-link {
                display: flex;
                justify-content: space-between;
                margin-top: auto;
                font-weight: 700;
                text-transform: uppercase;
                font-size: 1.3rem;
                text-align: center
            }

                header nav.secondary .inner-nav .lower-link .icon-link {
                    margin: 0 0 1rem;
                    display: block
                }

        header nav.secondary.active {
            pointer-events: inherit
        }

            header nav.secondary.active .dark-layer {
                background-color: rgba(0,0,0,.5)
            }

            header nav.secondary.active .inner-nav {
                transform: translateX(0)
            }

@media screen and (min-width:1136px) {
    body.overflow-hidden {
        padding-right: 14px
    }

        body.overflow-hidden header {
            padding-right: 42px
        }

    header nav.secondary .inner-nav {
        padding: 8rem 56px 45px 45px
    }

        header nav.secondary .inner-nav > ul::-webkit-scrollbar {
            width: .6rem
        }

        header nav.secondary .inner-nav > ul::-webkit-scrollbar-track {
            background: 0 0
        }

        header nav.secondary .inner-nav > ul::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,.15);
            border-radius: .6rem;
            border: .3rem solid transparent
        }
}

@media screen and (max-width:1200px) {
    header nav.primary ul li:not(:last-child) {
        margin-right: 3rem
    }

    header nav.secondary .inner-nav {
        width: 40%
    }
}

@media screen and (max-width:768px) {
    header nav.secondary .inner-nav {
        width: 65%
    }
}

@media screen and (max-width:564px) {
    header {
        padding: 0
    }

        header .col .inner-col {
            height: 5.5rem
        }

        header .logo-img, header .logo-link {
            width: 5.2rem;
            height: 3.6rem
        }

        header nav.secondary .inner-nav {
            padding: 5rem 3rem 3rem;
            width: 85%
        }

            header nav.secondary .inner-nav > ul {
                margin-top: 2rem;
                height: calc(100% - 130px)
            }

        header .icon-link {
            margin-right: .75rem;
            transform: scale(1.5) translateY(-.1rem)
        }

            header .icon-link.fa-video-camera {
                margin-right: 1rem
            }

        header nav.primary ul li.btn-cart ul {
            min-width: 100%;
            top: 5.5rem;
            right: 0;
            position: fixed
        }

        header nav.secondary .inner-nav .lower-link {
            font-size: 1.175rem
        }
}