/* Resolução Média */

.conteudo
{
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: relative;
}

.colunaEsquerda
{
    height: 100%;
    min-height: 100%;
    width: 14%;
    position: absolute;
    left: 0px;
    top: 0px;
}

    .colunaEsquerda .logo
    {
        height: 104px;
        width: 112px;
        display: block;
        background-repeat: no-repeat;
        margin-top: 25px;
        margin-bottom: 28px;
        background-image: url('../Imagens/Ilustrativas/Logos/logo_pinacoteca.png');
    }

        .colunaEsquerda .logo:hover
        {
            background-image: url('../Imagens/Ilustrativas/Logos/logo_hover.png');
            background-size: contain;
        }

.activeLogo
{
    background-image: url('../Imagens/Ilustrativas/Logos/logo_hover.png') !important;
    background-size: contain;
}

.colunaEsquerda .menu
{
    margin-bottom: 40px;
}

    .colunaEsquerda .menu li
    {
        height: 28px;
        line-height: 28px;
        width: 100%;
        display: block;
        margin-bottom: 6px;
        background-repeat: no-repeat;
    }

        .colunaEsquerda .menu li:nth-child(1)
        {
            background-image: url('../Imagens/Layout/Menu/botao1.png');
        }

        .colunaEsquerda .menu li:nth-child(2)
        {
            background-image: url('../Imagens/Layout/Menu/botao2.png');
        }

        .colunaEsquerda .menu li:nth-child(3)
        {
            background-image: url('../Imagens/Layout/Menu/botao3.png');
        }

        .colunaEsquerda .menu li:nth-child(4)
        {
            background-image: url('../Imagens/Layout/Menu/botao4.png');
        }

        .colunaEsquerda .menu li:nth-child(5)
        {
            background-image: url('../Imagens/Layout/Menu/botao5.png');
        }

        .colunaEsquerda .menu li:nth-child(6)
        {
            background-image: url('../Imagens/Layout/Menu/botao2.png');
        }

        .colunaEsquerda .menu li:nth-child(7)
        {
            background-image: url('../Imagens/Layout/Menu/botao7.png');
        }

        .colunaEsquerda .menu li:nth-child(8)
        {
            background-image: url('../Imagens/Layout/Menu/botao8.png');
        }

        .colunaEsquerda .menu li:nth-child(9)
        {
            background-image: url('../Imagens/Layout/Menu/botao9.png');
        }

        .colunaEsquerda .menu li:nth-child(10)
        {
            background-image: url('../Imagens/Layout/Menu/botao8.png');
        }

        .colunaEsquerda .menu li:nth-child(11)
        {
            background-image: url('../Imagens/Layout/Menu/botao8.png');
        }

        .colunaEsquerda .menu li:nth-child(12)
        {
            background-image: url('../Imagens/Layout/Menu/botao2.png');
        }

        .colunaEsquerda .menu li:nth-child(13)
        {
            background-image: url('../Imagens/Layout/Menu/botao7.png');
        }

        .colunaEsquerda .menu li:nth-child(14)
        {
            background-image: url('../Imagens/Layout/Menu/botao8.png');
        }

        .colunaEsquerda .menu li:nth-child(1):hover, .active1
        {
            background-image: url('../Imagens/Layout/Menu/botao1_hover.png') !important;
        }

        .colunaEsquerda .menu li:nth-child(2):hover, .active2
        {
            background-image: url('../Imagens/Layout/Menu/botao2_hover.png') !important;
        }

        .colunaEsquerda .menu li:nth-child(3):hover, .active3
        {
            background-image: url('../Imagens/Layout/Menu/botao3_hover.png') !important;
        }

        .colunaEsquerda .menu li:nth-child(4):hover, .active4
        {
            background-image: url('../Imagens/Layout/Menu/botao4_hover.png') !important;
        }

        .colunaEsquerda .menu li:nth-child(5):hover, .active5
        {
            background-image: url('../Imagens/Layout/Menu/botao5_hover.png') !important;
        }

        .colunaEsquerda .menu li:nth-child(6):hover, .active6
        {
            background-image: url('../Imagens/Layout/Menu/botao2_hover.png') !important;
        }

        .colunaEsquerda .menu li:nth-child(7):hover, .active7
        {
            background-image: url('../Imagens/Layout/Menu/botao7_hover.png') !important;
        }

        .colunaEsquerda .menu li:nth-child(8):hover, .active8
        {
            background-image: url('../Imagens/Layout/Menu/botao8_hover.png') !important;
        }

        .colunaEsquerda .menu li:nth-child(9):hover, .active9        
        {
            background-image: url('../Imagens/Layout/Menu/botao9_hover.png') !important;
        }

        .colunaEsquerda .menu li:nth-child(10):hover, .active10
        {
            background-image: url('../Imagens/Layout/Menu/botao8_hover.png') !important;
        }

        .colunaEsquerda .menu li:nth-child(11):hover, .active11
        {
            background-image: url('../Imagens/Layout/Menu/botao8_hover.png') !important;
        }

        .colunaEsquerda .menu li:nth-child(12):hover, .active12
        {
            background-image: url('../Imagens/Layout/Menu/botao2_hover.png') !important;
        }

        .colunaEsquerda .menu li:nth-child(13):hover, .active13
        {
            background-image: url('../Imagens/Layout/Menu/botao7_hover.png') !important;
        }

        .colunaEsquerda .menu li:nth-child(14):hover, .active14
        {
            background-image: url('../Imagens/Layout/Menu/botao8_hover.png') !important;
        }

        .colunaEsquerda .menu li:hover a,
        .active10 a
        {
            color: #fff !important;
        }

.active1 a,
.active2 a,
.active3 a,
.active4 a,
.active5 a,
.active6 a,
.active7 a,
.active8 a,
.active9 a,
.active10 a,
.active11 a,
.active12 a,
.active13 a,
.active14 a
{
    color: #fff !important;
}

.colunaEsquerda .menu a
{
    font-family: 'journalregular';
    font-size: 1.5em;
    color: #000;
    padding-left: 10px;
}

.colunaEsquerda .redesSociais
{
    height: auto;
    width: 100%;
    float: left;
}

    .colunaEsquerda .redesSociais a
    {
        margin-left: 10px;
        float: left;
        margin-bottom: 20px;
    }

        .colunaEsquerda .redesSociais a .imagem
        {
            height: 37px;
            width: 37px;
            background-image: url('../Imagens/Ilustrativas/Social/facebook.png');
            background-size: contain;
        }

        .colunaEsquerda .redesSociais a:hover .imagem
        {
            background-image: url('../Imagens/Ilustrativas/Social/facebook_hover.png');
        }

.colunaEsquerda footer
{
    margin-left: 5px;
}

    .colunaEsquerda footer p
    {
        font-size: 0.50em;
    }

.colunaDireita
{
    height: 100%;
    min-height: 100%;
    width: 86%;
    position: absolute;
    right: 0px;
    top: 0px;
}


/* Resolução Grande */

@media only screen and (min-width : 1624px)
{

    .colunaEsquerda .logo
    {
        height: 155px;
        width: 163px;
        display: block;
        margin-top: 25px;
        margin-bottom: 28px;
        background-image: url('../Imagens/Ilustrativas/Logos/logo_pinacoteca1920.png');
        background-size: cover;
    }

        .colunaEsquerda .logo:hover
        {
            background-image: url('../Imagens/Ilustrativas/Logos/logo_hover.png');
            background-size: cover;
            background-position: 0px 0px;
        }

    .activeLogo
    {
        background-image: url('../Imagens/Ilustrativas/Logos/logo_hover.png') !important;
    }

    .colunaEsquerda .menu
    {
        margin-bottom: 40px;
    }

        .colunaEsquerda .menu li
        {
            height: 34px;
            line-height: 34px;
            width: auto;
            display: block;
            margin-bottom: 3px;
            background-repeat: no-repeat;
            background-size: contain;
            margin-bottom: 20px;
        }

            .colunaEsquerda .menu li:nth-child(1)
            {
                background-image: url('../Imagens/Layout/Menu/botao1.png');
            }

            .colunaEsquerda .menu li:nth-child(2)
            {
                background-image: url('../Imagens/Layout/Menu/botao2.png');
            }

            .colunaEsquerda .menu li:nth-child(3)
            {
                background-image: url('../Imagens/Layout/Menu/botao3.png');
            }

            .colunaEsquerda .menu li:nth-child(4)
            {
                background-image: url('../Imagens/Layout/Menu/botao4.png');
            }

            .colunaEsquerda .menu li:nth-child(5)
            {
                background-image: url('../Imagens/Layout/Menu/botao5.png');
            }

            .colunaEsquerda .menu li:nth-child(6)
            {
                background-image: url('../Imagens/Layout/Menu/botao2.png');
            }

            .colunaEsquerda .menu li:nth-child(7)
            {
                background-image: url('../Imagens/Layout/Menu/botao7.png');
            }

            .colunaEsquerda .menu li:nth-child(8)
            {
                background-image: url('../Imagens/Layout/Menu/botao8.png');
            }

            .colunaEsquerda .menu li:nth-child(9)
            {
                background-image: url('../Imagens/Layout/Menu/botao9.png');
            }

            .colunaEsquerda .menu li:nth-child(10)
            {
                background-image: url('../Imagens/Layout/Menu/botao8.png');
            }

            .colunaEsquerda .menu li:nth-child(1):hover, .active1
            {
                background-image: url('../Imagens/Layout/Menu/botao1_hover.png') !important;
            }

            .colunaEsquerda .menu li:nth-child(2):hover, .active2
            {
                background-image: url('../Imagens/Layout/Menu/botao2_hover.png') !important;
            }

            .colunaEsquerda .menu li:nth-child(3):hover, .active3
            {
                background-image: url('../Imagens/Layout/Menu/botao3_hover.png') !important;
            }

            .colunaEsquerda .menu li:nth-child(4):hover, .active4
            {
                background-image: url('../Imagens/Layout/Menu/botao4_hover.png') !important;
            }

            .colunaEsquerda .menu li:nth-child(5):hover, .active5
            {
                background-image: url('../Imagens/Layout/Menu/botao5_hover.png') !important;
            }

            .colunaEsquerda .menu li:nth-child(6):hover, .active6
            {
                background-image: url('../Imagens/Layout/Menu/botao2_hover.png') !important;
            }

            .colunaEsquerda .menu li:nth-child(7):hover, .active7
            {
                background-image: url('../Imagens/Layout/Menu/botao7_hover.png') !important;
            }

            .colunaEsquerda .menu li:nth-child(8):hover, .active8
            {
                background-image: url('../Imagens/Layout/Menu/botao8_hover.png') !important;
            }

            .colunaEsquerda .menu li:nth-child(9):hover, .active9
            {
                background-image: url('../Imagens/Layout/Menu/botao9_hover.png') !important;
            }

            .colunaEsquerda .menu li:nth-child(10):hover, .active10
            {
                background-image: url('../Imagens/Layout/Menu/botao8_hover.png') !important;
            }

        .colunaEsquerda .menu a:hover
        {
            color: #fff;
        }

    .active1 a,
    .active2 a,
    .active3 a,
    .active4 a,
    .active5 a,
    .active6 a,
    .active7 a,
    .active8 a,
    .active9 a
    {
        color: #fff !important;
    }

    .colunaEsquerda .menu a
    {
        font-family: 'journalregular';
        font-size: 1.8em;
        color: #000;
        padding-left: 10px;
    }

    .colunaEsquerda .redesSociais
    {
        height: 27px;
        line-height: 27px;
        width: 100%;
        margin-bottom: 21px;
    }

        .colunaEsquerda .redesSociais a
        {
            margin-left: 10px;
            float: left;
        }

            .colunaEsquerda .redesSociais a .imagem
            {
                height: 40px;
                width: 40px;
                background-image: url('../Imagens/Ilustrativas/Social/facebook.png');
            }

            .colunaEsquerda .redesSociais a:hover .imagem
            {
                background-image: url('../Imagens/Ilustrativas/Social/facebook_hover.png');
            }

    .colunaEsquerda footer
    {
        margin-left: 5px;
    }

        .colunaEsquerda footer p
        {
            font-size: 0.8em;
        }

    .colunaDireita
    {
        height: 100%;
        min-height: 100%;
        width: 86%;
        position: absolute;
        right: 0px;
        top: 0px;
    }
}


/* Mobile */

@media (min-device-width : 768px) and (max-device-width : 1024px)
{
    .colunaEsquerda
    {
        height: 100%;
        min-height: 100%;
        width: 12%;
        position: absolute;
        left: 0px;
        top: 0px;
    }

        .colunaEsquerda .logo
        {
            height: 94px;
            width: 92px;
            display: block;
            background-repeat: no-repeat;
            margin-top: 25px;
            margin-bottom: 28px;
            background-image: url('../Imagens/Ilustrativas/Logos/logo_pinacoteca.png');
            background-size: 100% 100%;
        }

    .colunaEsquerda .logo:hover
    {
        background-image: url('../Imagens/Ilustrativas/Logos/logo_hover.png');
        background-size: 100% 100%;
    }

    .colunaEsquerda .menu li
    {
        height: 28px;
        line-height: 28px;
        width: 100%;
        display: block;
        margin-bottom: 10px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .colunaEsquerda .menu a
    {
        font-family: 'journalregular';
        font-size: 1.3em;
        color: #000;
        padding-left: 5px;
    }
}

@media (min-device-width : 320px) and (max-device-width : 480px)
{
    .colunaEsquerda .menu li:nth-child(4)
    {
        display: none;
    }
}