.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 300px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 900px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 768px) {
    .menu-animado {
        width: 100%;
        overflow: hidden;
        height: 95px;
        position: relative;
    }

    nav {
        top: -20px;
        position: absolute;
        left: 0;
        right: 0;
        margin: 20px auto;
        width: 100%;
    }

        nav ul {
            list-style: none;
            padding-left: 0px;
        }

        nav > ul {
            display: table;
            width: 100%;
            position: relative;
        }

            nav > ul li {
                display: table-cell;
                color: #575962 !important;
            }

            /*Sub-menu*/
            nav > ul > li:hover > ul {
                display: block;
                height: 100%;
            }

            nav > ul > li > ul {
                display: block;
                position: absolute;
                background: #000;
                overflow: hidden;
                height: 0%;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
            }

            nav > ul li a {
                color: #575962 !important;
                display: block;
                line-height: 20px;
                padding: 20px;
                position: relative;
                text-align: center;
                text-decoration: none;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
            }

            nav > ul > li > ul > li a:hover {
                background: #5da5a2;
            }

            nav > ul > li > a span {
                display: block;
                height: 100%;
                width: 100%;
                padding-top: 5px;
                left: 0;
                position: absolute;
                top: 0;
                color: #fff !important;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
            }

                nav > ul > li > a span .icon {
                    display: block;
                    line-height: 60px;
                }

            nav > ul > li > a:hover > span {
                top: 0;
                color: #fff !important;
            }
}

@media (min-width: 960px) {
    .menu-animado {
        width: 100%;
        overflow: hidden;
        height: 75px;
        position: relative;
    }

    nav {
        top: -20px;
        position: absolute;
        left: 0;
        right: 0;
        margin: 20px auto;
        width: 100%;
    }

        nav ul {
            list-style: none;
            padding-left: 0px;
        }

        nav > ul {
            display: table;
            width: 100%;
            position: relative;
        }

            nav > ul li {
                display: table-cell;
                color: #575962 !important;
                flex: 0 0 16.66667%;
            }

            /*Sub-menu*/
            nav > ul > li:hover > ul {
                display: block;
                height: 100%;
            }

            nav > ul > li > ul {
                display: block;
                position: absolute;
                background: #000;
                overflow: hidden;
                height: 0%;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
            }

            nav > ul li a {
                color: #575962 !important;
                display: block;
                line-height: 20px;
                padding: 20px;
                position: relative;
                text-align: center;
                text-decoration: none;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
            }

            nav > ul > li > ul > li a:hover {
                background: #5da5a2;
            }

            nav > ul > li > a span {
                display: block;
                height: 100%;
                width: 100%;
                padding-top: 20px;
                left: 0;
                position: absolute;
                top: 0;
                color: #fff !important;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
            }

                nav > ul > li > a span .icon {
                    display: block;
                    line-height: 60px;
                }

            nav > ul > li > a:hover > span {
                top: 0;
                color: #fff !important;
            }
}

@media (min-width: 1200px) {
    .menu-animado {
        width: 100%;
        overflow: hidden;
        height: 180px;
        position: absolute;
        z-index: 1;
    }

    nav {
        top: -20px;
        position: absolute;
        left: 0;
        right: 0;
        margin: 20px auto;
        width: 100%;
    }

        nav ul {
            list-style: none;
            padding-left: 0px;
        }

        nav > ul {
            display: table;
            width: 100%;
            position: relative;
        }

            nav > ul li {
                display: table-cell;
                color: #575962 !important;
                flex: 0 0 16.66667%;
            }

            /*Sub-menu*/
            nav > ul > li:hover > .submenu {
                display: block;
                height: 120px;
            }

            nav > ul > li > ul {
                display: block;
                position: absolute;
                background: #000;
                overflow: hidden;
                height: 0%;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
            }

            nav > ul li a {
                font-size: 1.2rem;
                color: #575962 !important;
                display: block;
                line-height: 20px;
                padding: 20px;
                position: relative;
                text-align: center;
                text-decoration: none;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
            }

            nav > ul > li > a span {
                display: block;
                height: 100%;
                width: 100%;
                padding-top: 5px;
                left: 0;
                top:0;
                position: absolute;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
            }


            nav > ul > li > a:hover > span {
                top: 0;
                color: #fff !important;
            }

            nav > ul > li > ul {
                background-color: #fff;
                color: #000;
                width: 30%;
                margin: auto;
            }

                nav > ul > li > ul > li > a {
                    padding: 10px;
                }

    .btn-orange {
        background-color: #ff7e22 !important;
        border-color: #ff7e22 !important;
        color: #fff !important;
    }

    .submenu li a {
        max-width: 100%;
        height: 100%;
        text-align: left;
    }

    .activo {
        top: 0 !important;
        color: #fff !important;
    }

    .orange a:hover {
        text-decoration: none;
        color: #fff !important;
        background-color: #ff7e22;
    }

    .yellow a:hover {
        text-decoration: none;
        color: #fff !important;
        background-color: #ffb822;
    }

    .green a:hover {
        text-decoration: none;
        color: #fff !important;
        background-color: #34bfa3;
    }

    .purple a:hover {
        text-decoration: none;
        color: #fff !important;
        background-color: #5867dd;
    }
}