nav ul {
    margin: 0;
}

nav li {
    position: relative;
    display: inline-block;
    float: left;
}

nav a {
    position: relative;
    z-index: 999;
    color: #4b4f5e;
    text-decoration: none;
    display: block;
    padding: 35px 10px 30px 10px;
    font-weight: 500;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    border-top: solid 5px #fff;
    font-size:18px;
    text-transform:uppercase
}

    nav a i[class*="caret"] {
        color: #3b536b;
        margin-left: .15em;
        font-size:16px;
    }

    nav a:hover {
        color: var(--renk);
        border-top: solid 5px var(--renk)
    }

        nav a:hover + .submenu {
            opacity: 1;
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            -ms-transform: rotateX(0deg);
            -o-transform: rotateX(0deg);
            transform: rotateX(0deg);
            visibility: visible;
        }

nav .eiob .submenu {
    -webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
    -moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
}

nav .ln .submenu {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

nav .ei .submenu {
    -webkit-transition: all 0.3s ease-in, opacity 0.2s linear;
    -moz-transition: all 0.3s ease-in, opacity 0.2s linear;
    transition: all 0.3s ease-in, opacity 0.2s linear;
}

nav .eo .submenu {
    -webkit-transition: all 0.3s ease-out, opacity 0.2s linear;
    -moz-transition: all 0.3s ease-out, opacity 0.2s linear;
    transition: all 0.3s ease-out, opacity 0.2s linear;
}

nav .submenu {
    display: block;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    z-index: 499;
    width: 250px;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 5px 5px rgba(68, 68, 68, 0.3);
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

    nav .submenu li > .submenu {
        top: 0;
        left: 100%;
    }

    nav .submenu:hover {
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        -o-transform: rotateX(0deg);
        transform: rotateX(0deg);
        visibility: visible;
    }

    nav .submenu li {
        float: none;
        display: block;
    }

    nav .submenu a {
        width: 100%;
        display: block;
        font-weight: 400;
        padding: 5px 10px 5px 20px;
        font-size:17px;
        text-transform:capitalize
    }

        nav .submenu a:hover {
            background: #f5f0f0;
            border-color: #f5f0f0;
        }

nav.rx li:hover + .submenu {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

nav.rx .submenu {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    -o-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
}

    nav.rx .submenu:hover {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
/*=== Fade Dwn ===*/

nav.fd li:hover + .submenu {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}

nav.fd .submenu {
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    transform: translateY(-50px);
}

    nav.fd .submenu:hover {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }

nav.fu li:hover + .submenu {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}

nav.fu .submenu {
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
}

    nav.fu .submenu:hover {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
/*=== Scale ===*/

nav.sc li:hover + .submenu {
    opacity: 1;
    -webkit-transform: rotateY(0deg) scale(1);
    -moz-transform: rotateY(0deg) scale(1);
    -ms-transform: rotateY(0deg) scale(1);
    -o-transform: rotateY(0deg) scale(1);
    transform: rotateY(0deg) scale(1);
}

nav.sc .submenu {
    -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    -ms-transform-origin: center top;
    -o-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

    nav.sc .submenu:hover {
        -webkit-transform: rotateY(0deg) scale(1);
        -moz-transform: rotateY(0deg) scale(1);
        -ms-transform: rotateY(0deg) scale(1);
        -o-transform: rotateY(0deg) scale(1);
        transform: rotateY(0deg) scale(1);
    }
/*==== Rotate ====*/

nav.rt li:hover + .submenu {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

nav.rt .submenu {
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

    nav.rt .submenu:hover {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
/*==== Move/Skew In ====*/

nav.mv li:hover + .submenu {
    -webkit-transform: translateX(0px) skewX(0deg);
    -moz-transform: translateX(0px) skewX(0deg);
    -ms-transform: translateX(0px) skewX(0deg);
    -o-transform: translateX(0px) skewX(0deg);
    transform: translateX(0px) skewX(0deg);
}

nav.mv .submenu {
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: translateX(-40px) skewX(-7deg);
    -moz-transform: translateX(-40px) skewX(-7deg);
    -ms-transform: translateX(-40px) skewX(-7deg);
    -o-transform: translateX(-40px) skewX(-7deg);
    transform: translateX(-40px) skewX(-7deg);
}

    nav.mv .submenu:hover {
        -webkit-transform: skewX(0deg);
        -moz-transform: skewX(0deg);
        -ms-transform: skewX(0deg);
        -o-transform: skewX(0deg);
        transform: skewX(0deg);
    }
/*==== Door ====*/

nav.dc li:hover + .submenu {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

nav.dc .submenu {
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    -o-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
}

    nav.dc .submenu:hover {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }