@import url("https://fonts.googleapis.com/css?family=Sen&display=swap");

.menu-container {
    /* margin-top: 20px; */
}

    .menu-container h3 {
        font-size: 24px;
        margin-bottom: 10px;
        text-align: center;
    }

    .menu-container:nth-child(3) {
        margin-top: 200px;
    }

nav {
    width: 100%;
    display: flex;
    justify-content: center;
}

.menu {
    display: flex;
    justify-content: center;
    margin: 0;
}

.dropdown {
    padding: 10px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background: #c06162;
    background: #0d3861;
    position: relative;
    /* font-size: 18px; */
    perspective: 1000px;
    z-index: 100;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all,.5s;
}

    .dropdown a {
        color: #fff !important;
    }

    .dropdown:hover a {
        color: #149cd7;
    }

    .dropdown:hover  {
        background: rgb(240 240 240);
        cursor: pointer;
        color: #0d3861;
    }
    .dropdown:hover >a  {
        cursor: pointer;
        color: #0d3861 !important;
    }
        .dropdown:hover .dropdown_menu li {
            display: block;
            /* border-top: 1px solid #dc3545; */
        }

.dropdown_menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    perspective: 1000px;
    z-index: -1;
}

    .dropdown_menu li {
        display: none;
        color: #656565;
        background-color: #0d3861;
        padding: 10px 20px;
        font-size: .9rem;
        opacity: 0;
        transition: all .5s;
        -moz-transition: all .5s;
        -webkit-transition: all,.5s;
    }

        .dropdown_menu li:hover {
            background-color: #dddddd;
        }

.dropdown:hover .dropdown_menu--animated {
    display: block;
}

.dropdown_menu--animated {
    display: none;
}

    .dropdown_menu--animated li {
        display: block;
        opacity: 1;
    }

.dropdown_menu-6 {
    animation: growDown 300ms ease-in-out forwards;
    transform-origin: top center;
}

.dropdown_menu-7 {
    animation: rotateMenu 400ms ease-in-out forwards;
    transform-origin: top center;
}

.dropdown_menu-8 {
    animation: downOut 300ms ease-in-out forwards;
    transform-origin: center center;
}

.dropdown_menu-9 {
    animation: growOut 300ms ease-in-out forwards;
    transform-origin: top center;
}

.dropdown_menu-10 {
    animation: rotateY 300ms ease-in-out forwards;
    transform-origin: top center;
}

.dropdown_menu-1 .dropdown_item-1 {
    transform-origin: top center;
    animation: slideDown 300ms 60ms ease-in-out forwards;
}

.dropdown_menu-1 .dropdown_item-2 {
    transform-origin: top center;
    animation: slideDown 300ms 120ms ease-in-out forwards;
}

.dropdown_menu-1 .dropdown_item-3 {
    transform-origin: top center;
    animation: slideDown 300ms 180ms ease-in-out forwards;
}

.dropdown_menu-1 .dropdown_item-4 {
    transform-origin: top center;
    animation: slideDown 300ms 240ms ease-in-out forwards;
}

.dropdown_menu-1 .dropdown_item-5 {
    transform-origin: top center;
    animation: slideDown 300ms 300ms ease-in-out forwards;
}

.dropdown_menu-2 .dropdown_item-1 {
    transform-origin: top center;
    animation: rotateX 300ms 60ms ease-in-out forwards;
}

.dropdown_menu-2 .dropdown_item-2 {
    transform-origin: top center;
    animation: rotateX 300ms 120ms ease-in-out forwards;
}

.dropdown_menu-2 .dropdown_item-3 {
    transform-origin: top center;
    animation: rotateX 300ms 180ms ease-in-out forwards;
}

.dropdown_menu-2 .dropdown_item-4 {
    transform-origin: top center;
    animation: rotateX 300ms 240ms ease-in-out forwards;
}

.dropdown_menu-2 .dropdown_item-5 {
    transform-origin: top center;
    animation: rotateX 300ms 300ms ease-in-out forwards;
}

.dropdown_menu-3 .dropdown_item-1 {
    transform-origin: top center;
    animation: rotateZ 300ms 60ms ease-in-out forwards;
}

.dropdown_menu-3 .dropdown_item-2 {
    transform-origin: top center;
    animation: rotateZ 300ms 120ms ease-in-out forwards;
}

.dropdown_menu-3 .dropdown_item-3 {
    transform-origin: top center;
    animation: rotateZ 300ms 180ms ease-in-out forwards;
}

.dropdown_menu-3 .dropdown_item-4 {
    transform-origin: top center;
    animation: rotateZ 300ms 240ms ease-in-out forwards;
}

.dropdown_menu-3 .dropdown_item-5 {
    transform-origin: top center;
    animation: rotateZ 300ms 300ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-1 {
    transform-origin: top center;
    animation: scaleZ 300ms 60ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-2 {
    transform-origin: top center;
    animation: scaleZ 300ms 120ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-3 {
    transform-origin: top center;
    animation: scaleZ 300ms 180ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-4 {
    transform-origin: top center;
    animation: scaleZ 300ms 240ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-5 {
    transform-origin: top center;
    animation: scaleZ 300ms 300ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-1 {
    transform-origin: top center;
    animation: scaleZ 300ms 60ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-2 {
    transform-origin: top center;
    animation: scaleZ 300ms 120ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-3 {
    transform-origin: top center;
    animation: scaleZ 300ms 180ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-4 {
    transform-origin: top center;
    animation: scaleZ 300ms 240ms ease-in-out forwards;
}

.dropdown_menu-4 .dropdown_item-5 {
    transform-origin: top center;
    animation: scaleZ 300ms 300ms ease-in-out forwards;
}

.dropdown_menu-5 .dropdown_item-1 {
    transform-origin: top center;
    animation: translateX 300ms 60ms ease-in-out forwards;
}

.dropdown_menu-5 .dropdown_item-2 {
    transform-origin: top center;
    animation: translateX 300ms 120ms ease-in-out forwards;
}

.dropdown_menu-5 .dropdown_item-3 {
    transform-origin: top center;
    animation: translateX 300ms 180ms ease-in-out forwards;
}

.dropdown_menu-5 .dropdown_item-4 {
    transform-origin: top center;
    animation: translateX 300ms 240ms ease-in-out forwards;
}

.dropdown_menu-5 .dropdown_item-5 {
    transform-origin: top center;
    animation: translateX 300ms 300ms ease-in-out forwards;
}

@-moz-keyframes growDown {
    0% {
        transform: scaleY(0);
    }

    80% {
        transform: scaleY(1.1);
    }

    100% {
        transform: scaleY(1);
    }
}

@-webkit-keyframes growDown {
    0% {
        transform: scaleY(0);
    }

    80% {
        transform: scaleY(1.1);
    }

    100% {
        transform: scaleY(1);
    }
}

@-o-keyframes growDown {
    0% {
        transform: scaleY(0);
    }

    80% {
        transform: scaleY(1.1);
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes growDown {
    0% {
        transform: scaleY(0);
    }

    80% {
        transform: scaleY(1.1);
    }

    100% {
        transform: scaleY(1);
    }
}

@-moz-keyframes rotateMenu {
    0% {
        transform: rotateX(-90deg);
    }

    70% {
        transform: rotateX(20deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

@-webkit-keyframes rotateMenu {
    0% {
        transform: rotateX(-90deg);
    }

    70% {
        transform: rotateX(20deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

@-o-keyframes rotateMenu {
    0% {
        transform: rotateX(-90deg);
    }

    70% {
        transform: rotateX(20deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

@keyframes rotateMenu {
    0% {
        transform: rotateX(-90deg);
    }

    70% {
        transform: rotateX(20deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

@-moz-keyframes downOut {
    0% {
        transform: translateZ(200px) transLateY(40px);
    }

    80% {
        transform: translateZ(-10px) transLateY(0px);
    }

    100% {
        transform: translateZ(0px) transLateY(0px);
    }
}

@-webkit-keyframes downOut {
    0% {
        transform: translateZ(200px) transLateY(40px);
    }

    80% {
        transform: translateZ(-10px) transLateY(0px);
    }

    100% {
        transform: translateZ(0px) transLateY(0px);
    }
}

@-o-keyframes downOut {
    0% {
        transform: translateZ(200px) transLateY(40px);
    }

    80% {
        transform: translateZ(-10px) transLateY(0px);
    }

    100% {
        transform: translateZ(0px) transLateY(0px);
    }
}

@keyframes downOut {
    0% {
        transform: translateZ(200px) transLateY(40px);
    }

    80% {
        transform: translateZ(-10px) transLateY(0px);
    }

    100% {
        transform: translateZ(0px) transLateY(0px);
    }
}

@-moz-keyframes growOut {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes growOut {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@-o-keyframes growOut {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes growOut {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@-moz-keyframes rotateY {
    0% {
        transform: rotateY(90deg);
    }

    80% {
        transform: rotateY(-10deg);
    }

    100% {
        transform: rotateY(0);
    }
}

@-webkit-keyframes rotateY {
    0% {
        transform: rotateY(90deg);
    }

    80% {
        transform: rotateY(-10deg);
    }

    100% {
        transform: rotateY(0);
    }
}

@-o-keyframes rotateY {
    0% {
        transform: rotateY(90deg);
    }

    80% {
        transform: rotateY(-10deg);
    }

    100% {
        transform: rotateY(0);
    }
}

@keyframes rotateY {
    0% {
        transform: rotateY(90deg);
    }

    80% {
        transform: rotateY(-10deg);
    }

    100% {
        transform: rotateY(0);
    }
}

@-moz-keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-o-keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-moz-keyframes rotateX {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }

    50% {
        transform: rotateX(-20deg);
    }

    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

@-webkit-keyframes rotateX {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }

    50% {
        transform: rotateX(-20deg);
    }

    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

@-o-keyframes rotateX {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }

    50% {
        transform: rotateX(-20deg);
    }

    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

@keyframes rotateX {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }

    50% {
        transform: rotateX(-20deg);
    }

    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

@-moz-keyframes rotateZ {
    0% {
        opacity: 0;
        transform: translateZ(290px);
    }

    80% {
        transform: translateZ(10px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@-webkit-keyframes rotateZ {
    0% {
        opacity: 0;
        transform: translateZ(290px);
    }

    80% {
        transform: translateZ(10px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@-o-keyframes rotateZ {
    0% {
        opacity: 0;
        transform: translateZ(290px);
    }

    80% {
        transform: translateZ(10px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes rotateZ {
    0% {
        opacity: 0;
        transform: translateZ(290px);
    }

    80% {
        transform: translateZ(10px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@-moz-keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    80% {
        transform: scale(1.07);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    80% {
        transform: scale(1.07);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-o-keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    80% {
        transform: scale(1.07);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    80% {
        transform: scale(1.07);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-moz-keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    80% {
        transform: scale(1.07);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    80% {
        transform: scale(1.07);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-o-keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    80% {
        transform: scale(1.07);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleZ {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    80% {
        transform: scale(1.07);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-moz-keyframes translateX {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

    80% {
        transform: translateX(-5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@-webkit-keyframes translateX {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

    80% {
        transform: translateX(-5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@-o-keyframes translateX {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

    80% {
        transform: translateX(-5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes translateX {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

    80% {
        transform: translateX(-5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}