@import url(//fonts.googleapis.com/css?family=Parisienne);

div.mobile-header,
div.menu-mobile,
div.menu div.logo p
{
    display: none;
}

@media(max-width: 768px)
{
    div.info,
    div.category,
    div.topo
    {
        display: none;
    }

    body
    {
        overflow-x: hidden;
    }

    body.overflow-hidden
    {
        overflow: hidden;
    }

    div.mobile-header.visible,
    body.fixed div.mobile-header
    {
        background-color: #241632;
        border-bottom: 2px solid #645572;
    }

    div.mobile-header.visible a,
    body.fixed div.mobile-header a
    {
        left: 18px;
    }

    div.menu-mobile
    {
        top: 62px;
        bottom: 0;
        width: 100%;
        right: -100%;
        z-index: 1010;
        display: block;
        position: fixed;
        text-align: left;
        background-color: #333;
        transition: all .3s ease;
    }

    div.menu-mobile.visible
    {
        right: 0;
    }

    div.menu-mobile >button
    {
        background-color: #645572;
    }

    div.menu-mobile button
    {
        width: 100%;
        border: none;
        padding: 20px;
        color: #C8A96D;
        display: block;
        text-align: left;
        text-transform: uppercase;
        background-color: transparent;
        font: 20px 'Ubuntu Condensed', sans-serif;
    }

    div.menu-mobile button i
    {
        float: right;
        transition: all .3s ease;
    }

    div.menu-mobile .categories
    {
        top: 64px;
        bottom: 80px;
        overflow-y: auto;
        position: absolute;
        background-color: #333333;
    }

    div.menu-mobile .categories .category-links
    {
        max-height: 0;
        overflow-y: auto;
        transition: all .3s ease;
        border-bottom: 1px solid #645572;
    }

    div.menu-mobile .categories .category-links table
    {
        width: 100%;
        padding: 10px;
        border-spacing: 0;
    }

    div.menu-mobile .categories .category-links table tr td
    {
        width: 50%;
    }

    div.menu-mobile .categories .category-links a
    {
        padding: 20px;
        display: block;
        font-size: 20px;
        text-transform: uppercase;
    }

    div.menu-mobile .categories .category-links .category-sub-links
    {
        overflow: hidden;
        background-color: #222;
        transition: all .3s ease;
    }

    div.menu-mobile .categories .category-links .category-sub-links a
    {
        padding: 10px;
        font-size: 18px;
    }

    div.menu-mobile .categories .category-links .category-sub-links.hidden
    {
        height: 0 !important;
    }

    div.menu-mobile .categories .main
    {
        margin-top: 20px;
    }

    div.menu-mobile .categories .main a
    {
        padding: 20px;
        display: block;
        font-size: 20px;
        text-transform: uppercase;
    }

    div.menu-mobile .categories .main a img
    {
        float: left;
        margin-right: 6px;
    }

    div.menu-mobile.expanded .categories .category-links
    {
        max-height: 385px;
    }

    div.menu-mobile:not(.expanded) >button i,
    div.menu-mobile .categories .category-links button.collapsed i
    {
        transform: rotate(180deg);
    }

    div.menu-mobile .social
    {
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px;
        position: absolute;
        text-align: center;
        background-color: #241632;
    }

    div.menu-mobile .social a
    {
        margin: 0 10px;
    }

    div.mobile-header
    {
        top: 0;
        left: 0;
        right: 0;
        z-index: 1010;
        display: block;
        position: fixed;
        transition: all .3s ease;
        background-color: transparent;
    }

    div.mobile-header a
    {
        left: -200px;
        display: block;
        font-size: 24px;
        font-weight: bold;
        position: absolute;
        transition: all .3s ease;
        padding: 14px 10px 13px 42px;
        font-family: 'Parisienne', cursive;
    }

    div.mobile-header a img
    {
        left: 0;
        position: absolute;
    }

    div.mobile-header #button-menu
    {
        float: right;
        border: none;
        padding: 18px;
        color: #c8a96d;
        display: block;
        font-size: 24px;
        background: transparent;
    }

    div.menu
    {
        width: 100%;
        height: auto;
        padding: 20px;
        background: none;
        position: initial;
        box-sizing: border-box;
    }

    div.menu div.content
    {
        margin: 0;
        width: 100%;
        display: table;
        position: initial;
    }

    div.menu div.logo
    {
        position: initial;
    }

    div.menu div.logo a
    {
        display: block;
        margin: 40px 0;
    }

    div.menu div.logo p
    {
        display: block;
        color: #c8a96d;
        font-size: 26px;
        font-family: 'Parisienne', cursive;
    }

    div.menu div.content div.link
    {
        display: none;
    }

    div.slider
    {
        position: initial;
    }

    div.slider div.slides div.container
    {
        display: block;
    }

    div.slider div.slides div.container div.slide
    {
        background-size: contain;
    }

    div.slider div.slides ul.pagination
    {
        left: 0;
        right: 0;
        padding: 0;
        margin: auto;
        bottom: 20px;
    }

    div.slider div.slides ul.pagination li
    {
        margin: 0 6px;
    }

    div.page
    {
        margin: 0;
        position: initial;
        background: none;
    }

    div.page div.content
    {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        background: url('../images/bg_content.png');
    }

    div.foot
    {
        margin: 0;
        height: auto;
        display: table;
        background: none;
        position: initial;
    }

    div.foot div.content
    {
        padding: 20px;
        display: table;
        background: none;
    }

    div.foot div.content div.institucional,
    div.foot div.content div.categorias,
    div.foot div.content div.facebook,
    div.foot div.content div.newsletter
    {
        width: 100%;
        float: none;
        margin: 0 0 20px;
        text-align: center;
        line-height: normal;
    }

    div.foot div.content div h2
    {
        display: inline-block;
    }

    div.foot div.content div a
    {
        display: block;
    }

    div.foot div.content div.newsletter form
    {
        width: 232px;
        float: none;
        margin: 0 auto;
    }

    div.foot div.content div.newsletter form input
    {
        float: left;
        width: 180px;
        margin: 0 auto;
        display: block;
        background: #fff;
        border-radius: 6px;
    }

    div.foot div.rights p
    {
        margin: 0 20px;
    }

    div.page div.content table,
    div.page div.content table tbody,
    div.page div.content table tbody tr,
    div.page div.content table tbody td
    {
        width: 100%;
        display: block;
    }
}