/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display:block;
}
body {
	line-height:1;
}
ol, ul {
	list-style:none;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}

textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
button {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-clip:padding-box;
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius:0px;
    outline:none;
    outline-width:0;
    border:0;
}
input:focus, select:focus, textarea:focus, button:focus {
    outline:none;
    outline-width:0;
}

/* --------------- */
/* --- General --- */
/* --------------- */

body {
    /*font-family: Helvetica, Arial, sans-serif; font-weight: bold;*/
    /*font-family: 'Roboto', sans-serif;*/
    font-family: 'Gothic A1', sans-serif;
    
    background-color:#fff;
    color:#000;
    font-size:16px;
    
    overflow-x:hidden;
    
    /* Nao recomendo, pois fica piscando a cada requisicao no modo noturno
    -webkit-transition:all .15s ease;
    transition:all .15s ease;*/
}
    body.dark {
        background-color:#000;
        color:#fff;
    }

a {
    text-decoration:none;
    cursor:pointer;
    color:#65c466;
}

.hide {
    display:none;
}



/* -------------- */
/* --- Loader --- */
/* -------------- */
@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
/*
.spinner:before {
    content: '';
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid#fff;
    border-top-color:transparent;
    animation: spinner .6s linear infinite;
    opacity:0.5;
}
.spinner:before {
    content: '';
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-bottom-color: #fff;
    animation: spinner .8s ease infinite;
}
.spinner:before {
    content: '';
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border-top: 2px solid #fff;
    border-right: 2px solid transparent;
    animation: spinner .6s linear infinite;
}
*/
.spinner:before {
    content: '';
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    border-radius: 50%;
    border: 1px solid #fff;
    border-top-color:transparent;
    animation: spinner .6s linear infinite;
    opacity:0.5;
}
    body.dark .spinner:before {
        opacity:0.2;
    }

/* ------------ */
/* --- Home --- */
/* ------------ */
#home {
    /* Serao recalculados no js, pq o safari do ios nao desconta a altura da barra de endereco de vh
    min-height:calc(100vh - 50px - 50px);
    */
    padding-top:50px;
    -webkit-transition:all .15s ease;
    transition:all .15s ease;
    
    position:relative;
    max-width:100%;
    margin:0 auto;
}
    /*body.ios #home {}*/

#home input[type='text'] {
    display:block;
    width:calc(100% - 30px);
    margin:0 15px;
    padding:0;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border:0px;
    text-align:center;
    font-size:16px;
    height:38px;
    /*line-height:38px;*/
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    
    background-color:#f1f1f1;
    color:#000;
}
    body.dark #home input[type='text'] {
        background-color:#333;
        color:#fff;
    }
    
.ui_filterNoResult {
    text-align:center;
    padding-top:30px;
}

#home ul {
    list-style-type: none;
    margin:10px 0 0 0;
    padding:0;
}

#home ul li {
    border-bottom:1px solid #f1f1f1;
}
    body.dark #home ul li {
        border-bottom-color:#333 !important;
    }

#home ul li:last-child {
    border-bottom:none;
}

#home ul li a {
    display:block;
    padding:0 15px;
    height:50px;
    line-height:50px;
    color:#444;
    
    /* Nao recomendo
    -webkit-transition:all .15s ease-out;
    transition:all .15s ease-out;*/
}
    body.dark #home ul li a {
        color:#fff;
    }

#home ul li a:hover, #home ul li a:active {
    background-color:#65c466;
    color:#fff;
}

#home ul li a svg {
    width:16px;
    height:16px;
    fill:#65c466;
    margin-left:-1px;
    margin-bottom:-3px;
    margin-right:7px;
}

    #home ul li:first-child a svg {
        margin-left:0;
        margin-right:5px;
    }

#home ul li a:hover svg, #home ul li a:active svg {
    fill:#fff;
}

#home ul li a:after {
    content:"❯"; /*〉*/ /* arrow-link */
    font-weight:normal;
    font-size:19px;
    float:right;
    color:#65c466;
}

#home ul li a:hover:after, #home ul li a:hover:after {
    color:#fff;
    /*text-shadow:1px 0 1px #fff;*/
}

#home ul li span { /* tags do filtro (visivel apenas apos a filtragem) */
    /*
    padding:0 15px;
    margin-top:-10px;
    display:block;
    margin-bottom:10px;
    */
    font-style:italic;
    font-size:12px;
    opacity:0.6;
}

/* ------------------------- */
/* --- Interna - General --- */
/* ------------------------- */

/* --- Header --- */
.header {
    position:fixed; z-index:9;
    top:0;
    left:0;
    width:100%;
    height:50px;
    overflow:hidden;
    background-color:rgba(255, 255, 255, 0.92);
}
    body.dark .header {
        background-color:rgba(0, 0, 0, 0.83);
    }

.header .header_content {
    position:relative;
    max-width:100%;
    margin:0 auto;
}

.header h1, .header a {
    line-height:55px;
    font-size:16px;
    font-weight:normal;
}

.header h1 {
    position:absolute; z-index:2;
    text-align:center;
    width:100%;
}

.header a {
    position:absolute; z-index:3;
}

    .header a.header_link_nav {
        left:15px;
    }
    
        .header a.header_link_nav svg {
            fill:#65c466;
            height:16px;
            width:16px;
            padding-right:2px;
            margin-bottom:-1px;
        }

        .header a.header_link_nav.header_link_nav_home {}

        .header a.header_link_nav.header_link_nav_arrow {}
        
        .header a.header_link_nav.header_link_nav_arrow svg {
            display:none;
        }
        
        .header a.header_link_nav.header_link_nav_arrow:before {
            content:"❮"; /*〈 */ /* arrow-link */
            font-weight:normal;
            font-size:19px;
            padding-right:3px;
            
            padding-top:0px;
            display:inline-block;
            
            /*float:left;*/
            vertical-align:middle;
        }

    .header a.header_link_opt {
        right:20px;
    }
        
        .header a.header_link_opt svg {
            fill:#65c466;
            vertical-align:sub;
            height:18px;
            width:18px;
            margin-left:-3px;
            margin-bottom:1px;
        }

        .header a.header_link_opt.header_link_opt_dark {}

        .header a.header_link_opt.header_link_opt_dark svg {
            height:18px;
            width:18px;
        }
        
        .header a.header_link_opt.header_link_opt_light {}

        .header a.header_link_opt.header_link_opt_light svg {
            height:17px;
            width:17px;
            padding-left:1px;
            padding-right:1px;
        }

/* --- Mensagem --- */
#message {
    display:block;
    /* Serao recalculados no js, pq o safari do ios nao desconta a altura da barra de endereco de vh
    height:calc(100vh - 50px - 50px);
    line-height:calc(100vh - 50px - 50px);
    */
    /*width:100vw;*/ /* nao habilite essa linha, pois da erro quando $width_limit nao for "100%" */
    -webkit-transition:all .15s ease;
    transition:all .15s ease;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    text-align:center;
    font-size:20px; /* msg-font */
    
    color:#666;
    font-weight:bold;
}

#message a {
    flex:initial;
    font-size:20px; /* msg-font */
}

#message a:before {
    display:none;
}

/* --- Footer --- */
#footer {
    /*font-family:'Nunito', sans-serif;*/
    width:100%;
    height:50px;
    line-height:50px;
    overflow:hidden;
    text-align:center;
}

#footer_content {
    position:relative;
    max-width:100%;
    margin:0 auto;
}

#footer a {
    text-decoration:none;
    color:#000;
}
    body.dark #footer a {
        color:#fff;
    }



/* ------------------------- */
/* --- Internal - Layout --- */
/* ------------------------- */
#internal {
    /* Serao recalculados no js, pq o safari do ios nao desconta a altura da barra de endereco de vh
    min-height:calc(100vh - 50px - 50px);
    */
    padding-top:50px;
    
    max-width:100%;
    margin:0 auto;
    
    -webkit-transition:all .15s ease;
    transition:all .15s ease;
}
    /*body.ios #internal {}*/

.container {
}

.container a {
    position:relative;
    /*
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    */
    background:#262626;
    
    font-size:0;
    color:transparent;
}

.container a:before {
    content:"";
    display:block;
    padding-bottom:100%; /* Aspect ratio 1:1 */
    /*
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    */
}

.container a.clickableBG1{ background: #808080; }
.container a.clickableBG2{ background: #a1a1a1; }
.container a.clickableBG3{ background: #d1d1d1; }
.container a.clickableBG4{ background: #a4a4a4; }
.container a.clickableBG5{ background: #b4b4b4; }
    body.dark .container a.clickableBG1{ background: #262626; }
    body.dark .container a.clickableBG2{ background: #181e24; }
    body.dark .container a.clickableBG3{ background: #1d252c; }
    body.dark .container a.clickableBG4{ background: #1c1c1b; }
    body.dark .container a.clickableBG5{ background: #363636; }

.container a img {
    position:absolute;
    top:0;
    left:0;
    object-fit:cover; /* Nao distorcer imagem */
}

.container a#next, .container a#prev {
    position:relative;
    background:#fff;
}
    body.dark .container a#next, body.dark .container a#prev {
        background:#000;
    }

.container a#next svg, .container a#prev svg {
    position:absolute;
    top:50%;
    left:50%;
    width:30%;
    height:30%;
    margin:calc(-15%) 0 0 calc(-15%); /* Metade de width/height */
    fill:#999;
}
    body.dark .container a#next svg, body.dark .container a#prev svg {
        fill:#fff;
    }

.container a#prev svg {
    transform:rotate(180deg);
}



/* --- Layout 1 --- */

.container.layout1 {
    display:flex;
    flex-wrap:wrap;
    margin:1.5px;
}

.container.layout1 a {
    flex:1 0 calc((100%/) - 3px); /* Colunas (100%/num) - Gap, ex: Se Colunas=3 e Gap=10, logo calc(33.33% - 10px) */ * apesar de 3, é melhor comecar com 1 e deixar o media-query resolver acima de 1 coluna */
    margin:1.5px;
}

.container.layout1 a:before {
}

.container.layout1 a img {
    width:calc(100% + 1px); /* 101% */ /* acrescimo para cobrir decimais se dimensoes de .box for nao-inteiro (acresimo poderia estar apenas na altura, mas coloca-lo na largura evita distorcoes */
    height:calc(100% + 1px); /* 101% */ /* acrescimo para cobrir decimais se dimensoes de .box for nao-inteiro */
}



/* --- Layout 2 --- */

.container.layout2 {
    display:grid;
    grid-gap:3px;
    margin:3px;
    grid-template-columns: repeat(1, 1fr); /* Colunas */ /* apesar de 3, é melhor comecar com 1 e deixar o media-query resolver acima de 1 coluna */
}

.container.layout2 a {
}

.container.layout2 a:before {
}

.container.layout2 a img {
    width:100%;
    height:100%;
}


/* --- Media Query --- */
/*
320px - 480px: Mobile devices
481px - 768px: iPads, Tablets
769px - 1024px: Small screens, laptops
1025px - 1200px: Desktops, large screens
1201px and more - Extra large screens, TV
*/
/*
@media screen and (min-width: 2260px) {
    .container.layout1 a {
        flex:1 0 calc((100%/10) - 3px);
    }
   .container.layout2 {
        grid-template-columns: repeat(10, 1fr);
    }
}

@media screen and (min-width: 1921px) and (max-width: 2260px) {
    .container.layout1 a {
        flex:1 0 calc((100%/9) - 3px);
    }
   .container.layout2 {
        grid-template-columns: repeat(9, 1fr);
    }
}

@media screen and (min-width: 1641px) and (max-width: 1920px) {
    .container.layout1 a {
        flex:1 0 calc((100%/8) - 3px);
    }
   .container.layout2 {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media screen and (min-width: 1331px) and (max-width: 1640px) {
    .container.layout1 a {
        flex:1 0 calc((100%/7) - 3px);
    }
   .container.layout2 {
        grid-template-columns: repeat(7, 1fr);
    }
}

@media screen and (min-width: 1025px) and (max-width: 1330px) {
    .container.layout1 a {
        flex:1 0 calc((100%/6) - 3px);
    }
   .container.layout2 {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .container.layout1 a {
        flex:1 0 calc((100%/5) - 3px);
    }
    .container.layout2 {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .container.layout1 a {
        flex:1 0 calc((100%/4) - 3px);
    }
    .container.layout2 {
        grid-template-columns: repeat(4, 1fr); 
    }
}

@media screen and (min-width: 321px) and (max-width: 480px) { /* Colunas - Default */
    .container.layout1 a {
        flex:1 0 calc((100%/3) - 3px);
    }
    .container.layout2 {
        grid-template-columns: repeat(3, 1fr); 
    }
}

@media screen and (min-width: 281px) and (max-width: 320px) {
        .container.layout1 a {
        flex:1 0 calc((100%/2) - 3px);
    }
    .container.layout2 {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media screen and (max-width: 280px) {
        .container.layout1 a {
        flex:1 0 calc((100%/1) - 3px);
    }
    .container.layout2 {
        grid-template-columns: repeat(1, 1fr); 
    }
}
*/

            /* Colunas: 1 (Start) */
            @media screen and (max-width: 200px) {
                .container.layout1 a {
                    flex:1 0 calc((100%/1) - 3px);
                }
                .container.layout2 {
                    grid-template-columns: repeat(1, 1fr); 
                }
            }
        /* Colunas: 2 (-1 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 201px) and (max-width: 330px) {
            .container.layout1 a {
                flex:1 0 calc((100%/2) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(2, 1fr); 
            }
        }
        /* Colunas: 3 (0 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 331px) and (max-width: 460px) {
            .container.layout1 a {
                flex:1 0 calc((100%/3) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(3, 1fr); 
            }
        }
        /* Colunas: 4 (1 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 461px) and (max-width: 590px) {
            .container.layout1 a {
                flex:1 0 calc((100%/4) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(4, 1fr); 
            }
        }
        /* Colunas: 5 (2 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 591px) and (max-width: 720px) {
            .container.layout1 a {
                flex:1 0 calc((100%/5) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(5, 1fr); 
            }
        }
        /* Colunas: 6 (3 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 721px) and (max-width: 850px) {
            .container.layout1 a {
                flex:1 0 calc((100%/6) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(6, 1fr); 
            }
        }
        /* Colunas: 7 (4 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 851px) and (max-width: 980px) {
            .container.layout1 a {
                flex:1 0 calc((100%/7) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(7, 1fr); 
            }
        }
        /* Colunas: 8 (5 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 981px) and (max-width: 1110px) {
            .container.layout1 a {
                flex:1 0 calc((100%/8) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(8, 1fr); 
            }
        }
        /* Colunas: 9 (6 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 1111px) and (max-width: 1240px) {
            .container.layout1 a {
                flex:1 0 calc((100%/9) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(9, 1fr); 
            }
        }
        /* Colunas: 10 (7 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 1241px) and (max-width: 1370px) {
            .container.layout1 a {
                flex:1 0 calc((100%/10) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(10, 1fr); 
            }
        }
        /* Colunas: 11 (8 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 1371px) and (max-width: 1500px) {
            .container.layout1 a {
                flex:1 0 calc((100%/11) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(11, 1fr); 
            }
        }
        /* Colunas: 12 (9 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 1501px) and (max-width: 1630px) {
            .container.layout1 a {
                flex:1 0 calc((100%/12) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(12, 1fr); 
            }
        }
        /* Colunas: 13 (10 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 1631px) and (max-width: 1760px) {
            .container.layout1 a {
                flex:1 0 calc((100%/13) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(13, 1fr); 
            }
        }
        /* Colunas: 14 (11 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 1761px) and (max-width: 1890px) {
            .container.layout1 a {
                flex:1 0 calc((100%/14) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(14, 1fr); 
            }
        }
        /* Colunas: 15 (12 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 1891px) and (max-width: 2020px) {
            .container.layout1 a {
                flex:1 0 calc((100%/15) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(15, 1fr); 
            }
        }
        /* Colunas: 16 (13 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 2021px) and (max-width: 2150px) {
            .container.layout1 a {
                flex:1 0 calc((100%/16) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(16, 1fr); 
            }
        }
        /* Colunas: 17 (14 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 2151px) and (max-width: 2280px) {
            .container.layout1 a {
                flex:1 0 calc((100%/17) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(17, 1fr); 
            }
        }
        /* Colunas: 18 (15 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 2281px) and (max-width: 2410px) {
            .container.layout1 a {
                flex:1 0 calc((100%/18) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(18, 1fr); 
            }
        }
        /* Colunas: 19 (16 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 2411px) and (max-width: 2540px) {
            .container.layout1 a {
                flex:1 0 calc((100%/19) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(19, 1fr); 
            }
        }
        /* Colunas: 20 (17 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 2541px) and (max-width: 2670px) {
            .container.layout1 a {
                flex:1 0 calc((100%/20) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(20, 1fr); 
            }
        }
        /* Colunas: 21 (18 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 2671px) and (max-width: 2800px) {
            .container.layout1 a {
                flex:1 0 calc((100%/21) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(21, 1fr); 
            }
        }
        /* Colunas: 22 (19 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 2801px) and (max-width: 2930px) {
            .container.layout1 a {
                flex:1 0 calc((100%/22) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(22, 1fr); 
            }
        }
        /* Colunas: 23 (20 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 2931px) and (max-width: 3060px) {
            .container.layout1 a {
                flex:1 0 calc((100%/23) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(23, 1fr); 
            }
        }
        /* Colunas: 24 (21 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 3061px) and (max-width: 3190px) {
            .container.layout1 a {
                flex:1 0 calc((100%/24) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(24, 1fr); 
            }
        }
        /* Colunas: 25 (22 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 3191px) and (max-width: 3320px) {
            .container.layout1 a {
                flex:1 0 calc((100%/25) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(25, 1fr); 
            }
        }
        /* Colunas: 26 (23 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 3321px) and (max-width: 3450px) {
            .container.layout1 a {
                flex:1 0 calc((100%/26) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(26, 1fr); 
            }
        }
        /* Colunas: 27 (24 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 3451px) and (max-width: 3580px) {
            .container.layout1 a {
                flex:1 0 calc((100%/27) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(27, 1fr); 
            }
        }
        /* Colunas: 28 (25 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 3581px) and (max-width: 3710px) {
            .container.layout1 a {
                flex:1 0 calc((100%/28) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(28, 1fr); 
            }
        }
        /* Colunas: 29 (26 de default - Ps: nunca abaixo de 0) */
        @media screen and (min-width: 3711px) and (max-width: 3840px) {
            .container.layout1 a {
                flex:1 0 calc((100%/29) - 3px);
            }
            .container.layout2 {
                grid-template-columns: repeat(29, 1fr); 
            }
        }
            /* Colunas: 30 (End) */
            @media screen and (min-width: 3840px) {
                .container.layout1 a {
                    flex:1 0 calc((100%/30) - 3px);
                }
                .container.layout2 {
                    grid-template-columns: repeat(30, 1fr); 
                }
            }

#topmenu {
    display:block !important;
}
#sidemenu {
    display:none !important;
}
    @media screen and (min-width: 1000px) {
        #topmenu {
            display:none !important;
        }
        #sidemenu {
            display:block !important;
        }
        
        #home, #internal {
            height:calc(100vh - 65px) !important; /* -(padding-top e $footer_height) */
            overflow-y:scroll;
            /* sdCont 1 de 3 - Proximas duas linhas tiram a fluidez do conteudo de acordo com a largura do sidemenu, no entanto, se remove-las, o input text de index.php nao pode ser 100% */
            /*max-width:calc(100% - 50px);
            margin-left:50px;*/
            padding-top:15px;
        }
            #home { display:flow-root; }
            
        #home input[type='text']{
            width:50%; /* sdCont 2 de 3 */
            margin:0;
        }
        
        #home ul li a:after {
            float:none;
            margin-left:10px;
        }
        
        .header {
            position:relative;
            float:left; /* sdCont 3 de 3 */
            width:50px;
            height:100%;
            -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
            -moz-box-sizing: border-box;    /* Firefox, other Gecko */
            box-sizing: border-box;         /* Opera/IE 8+ */
            border-right:1px solid #f1f1f1;
            border:0;
            
            background-color:transparent !important;
            
            -webkit-transition:all .3s ease;
            transition:all .3s ease;
        }
            body.dark .header {
                border-right-color:#333 !important;
            }
            
        .header.active {
            width:220px;
        }
        
        .header a { /* Objetivo aqui é zerar o que foi implementado globalmente */
            display:block;
            
            position:relative;
            line-height:150%;
            
            left:0 !important;
            right:0 !important;
            
            margin:0;
            padding:0;
            
            white-space:nowrap;
        }
        
        .header .header_content {
            opacity:0;
            -webkit-transition:all .2s linear;
            transition:all .2s linear;
            padding:0 15px;
            width:calc(220px - 30px);
            max-width:none;
        }
        
        .header .header_content.active {
            opacity:1;
        }
        
        .header .header_content h1 {
            display:block;
            margin:0 0 15px 0;
            padding:0;
        
            position:relative;
            text-align:left;
            line-height:150%;
        }
        
        .header .header_content a {
            padding:0;
            margin:10px 0;
        }

        
        /* --- Links grandes --- */


        .header .header_content a.header_link_sup {
        }
        
        .header .header_content a.header_link_sup svg {
            fill:#65c466;
            vertical-align:sub;
            width:17px;
            height:17px;
            margin-left:-3px;
            margin-bottom:2px;
        }

        .header .header_content a.header_link_sup.header_link_sup_home {}

        .header .header_content a.header_link_sup.header_link_sup_special {}
        
        .header .header_content a.header_link_sup.header_link_sup_special svg {
            margin-bottom:1px;
            padding-right:2px;
        }

        .header .header_content a.header_link_sup.header_link_sup_dark {}

        .header .header_content a.header_link_sup.header_link_sup_dark svg {
            height:18px;
            width:18px;
        }

        .header .header_content a.header_link_sup.header_link_sup_light {}

        .header .header_content a.header_link_sup.header_link_sup_light svg {
            height:17px;
            width:17px;
            padding-left:1px;
            padding-right:1px;
            margin-bottom:1px;
        }
        
        .header .header_content a.header_link_sup.header_link_sup_dark {}
        
        .header .header_content a.header_link_sup.header_link_sup_dark svg {
            margin-bottom:1px;
        }
        
        /* --- Links pequenos --- */

        .header .header_content a.header_link_list {
            font-size:12px;
            color:#000;
            margin:0;
            padding:6px 0;
        }
            body.dark .header .header_content a.header_link_list {
                color:#fff;
            }
            
        .header .header_content a.header_link_list:after {
            content:"❯"; /*〉*/ /* arrow-link */
            transform:rotate(90deg);
            font-weight:normal;
            font-size:12px;
            /*float:right;*/
            display:inline-block;
            margin-left:7px;
            color:#65c466;
        }
        
        .header .header_content a.header_link_list.active {
        }
        
        .header .header_content a.header_link_list.active:after {
            transform:rotate(270deg);
        }
        
        .header .header_content a.header_link_list.loading {
        }
        
        .header .header_content a.header_link_list.loading div.spinner:before {
            margin-top:-12px;
            opacity:1;
            border-color:#ccc;
        }
            body.dark .header .header_content a.header_link_list.loading div.spinner:before {
                border-color:#555;
            }
        

        /* --- Sublinks (ajax) --- */

        .header .header_content p {
            font-size:13px;
            padding:10px 0;
            opacity:.4;
        }
        
        .header .header_content .ajaxContent {
            font-size:12px;
            margin-top:5px;
        }
        
        /* submenu ajax */
        
        .header .header_content .ajaxContent .ui_filterNoResult {
            padding:10px 0;
            margin:0;
        }
        
        .header .header_content .ajaxContent input[type='text']{
            margin:0 0 5px 0;
            padding:5px 0;
            text-align:center;
            font-size:12px;
            width:100%;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            border-radius:10px;
            background-color:#f1f1f1;
            color:#000;
        }
            body.dark .header .header_content .ajaxContent input[type='text']{
                background-color:#333;
                color:#fff;
            }
        
        .header .header_content .ajaxContent ul {
            margin-bottom:10px;
        }
        
        .header .header_content .ajaxContent ul li {
            border-bottom:1px solid #f1f1f1;
        }
            .header .header_content .ajaxContent ul li:last-child {
                border-bottom:0;
            }
            body.dark .header .header_content .ajaxContent ul li {
                border-bottom-color:#333;
            }
        
        .header .header_content .ajaxContent ul li a {
            font-size:12px;
            white-space:break-spaces;
            margin:3px 0;
            padding:2px 3px;
        }
        
        .header .header_content .ajaxContent ul li a span {
            font-style:italic;
            font-size:11px;
            color:#ccc;
        }
            body.dark .header .header_content .ajaxContent ul li a span {
                color:#fff;
            }
        

        /* Hamburguer */
        
        /* Versao simples svg
        .hamburger {
            padding:15px 0 15px 17px;
        }
            .hamburger svg {
                fill:#65c466;
                height:16px;
                width:16px;
                padding-right:2px;
                margin-bottom:-1px;
            }
        */

        /* Versao animada Css - Mais em hamburgers.min.css */
        .hamburger {}

        .hamburger-box {
            width:22px;
        }
        
        .hamburger.is-active:hover, .hamburger:hover {
            opacity:1;
        }
        
        .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
            width:22px;
            height:2px;
            /*background-color:#000;*/
            background-color:#65c466;
        }
            /*body.dark .hamburger-inner, body.dark .hamburger-inner:after, body.dark .hamburger-inner:before {
                background-color:#fff;
            }*/
        
        .hamburger-inner:before {
            top:-7px;
        }
            .hamburger.is-active .hamburger-inner:before {
                top:-5px;
            }
        
        .hamburger-inner:after {
            bottom:-7px;
        }
            .hamburger.is-active .hamburger-inner:after {
                /*bottom:-5px;*/ /*hamburger--arrow*/
                bottom:0; /*hamburger--squeeze*/
            }
        
        .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before {
            background-color:#65c466;
        }
        
        #footer{
            position:absolute; z-index:9;
            bottom:0;
        }
    }


/* --- Baguette Box (lightbox) --- */
#baguetteBox-overlay {
}
    body:not(.dark) #baguetteBox-overlay {
        background-color:rgba(255, 255, 255, 0.9) !important;
    }

.baguetteBox-button#close-button,
.baguetteBox-button#previous-button,
.baguetteBox-button#next-button {
    /*background-color:transparent;*/
}
    body:not(.dark) .baguetteBox-button#close-button,
    body:not(.dark) .baguetteBox-button#previous-button,
    body:not(.dark) .baguetteBox-button#next-button {
        background-color:rgba(255,255,255,.5);
    }
    body:not(.dark) .baguetteBox-button#close-button svg polyline,
    body:not(.dark) .baguetteBox-button#previous-button svg polyline,
    body:not(.dark) .baguetteBox-button#next-button svg polyline {
        stroke:#7c7c7c !important;
    }
    
#baguetteBox-overlay .full-image img {
}
    body:not(.dark) #baguetteBox-overlay .full-image img {
        -webkit-box-shadow:none;
        -moz-box-shadow:none;
        box-shadow:none;
    }

.baguetteBox-double-bounce1, .baguetteBox-double-bounce2 {
}
    body:not(.dark) .baguetteBox-double-bounce1, body:not(.dark) .baguetteBox-double-bounce2 {
        background-color:#333;
    }

#download, #rotate {
    position:fixed; z-index:9999999;
    bottom:15px;

    font-size:0;
    width:41px;
    height:41px;
    line-height:43px;
    display:inline-block;
    text-align:center;
    
    -webkit-border-radius:99px;
    -moz-border-radius:99px;
    border-radius:99px;
    
    opacity:0.5;
    
    /*background-color:#65c466;*/
    /*background-color:#ddd;*/
    background-color:#323232;
}
    #download { right:15px; }
    #rotate { left:15px; }

        body:not(.dark) #download, body:not(.dark) #rotate {
            background-color:#fff;
            -webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.3);
            -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.3);
            box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.3);
        }

/*
#download:before, #rotate:before {
    display:inline-block;
    font-weight:bold;
    font-size:25px;
    color:#fff;
}
    #download:before { content:"\2193"; }
    #rotate:before { content:"\2193"; }
    
        body:not(.dark) #download:before, body:not(.dark) #rotate:before {
            color:#000;
        }
*/

#download svg, #rotate svg {
    margin-top:9px;
    fill:#fff;
}
    #download svg { width:20px; height:20px; }
    #rotate svg { width:25px; height:25px; }
    body:not(.dark) #download svg, body:not(.dark) #rotate svg {
        fill:#000;
    }



/* ------------- */
/* --- Modal --- */
/* ------------- */
#ui_modalFrame {
	z-index:100;
}

#ui_modalFrameBg {
	background-color: #000;
	cursor: no-drop;
	height: 100%;
	left:0;
	/*position: absolute;*/
	position:fixed;
	top: 0;
	width: 100%;
	z-index: 101;
}

#ui_modalFrameBox {
	background-color: #fff;
	border: 1px solid #ccc;
	position: fixed;  z-index:102;

	padding:20px;
	overflow:auto;
	
	max-width:500px;
	/*min-height:100px;*/
	
	font-size:15px;
}
    body.dark #ui_modalFrameBox {
        background-color:#1c252c;
        border-color:#1c252c;
        color:#fff;
    }

#ui_modalFrameBox a {
	color: #ab0000;
	text-decoration: none;
}
    body.dark #ui_modalFrameBox a {
        text-decoration:underline;
    }

#ui_modalFrameBox a:hover {
	text-decoration: underline;
}

#ui_modalFrameBoxHeader {
    padding-bottom:10px;
}

#ui_modalFrameBoxHeaderClose {
    display:none;
	float:right;
	margin:0;
	padding:0;
	cursor:pointer;
}

#ui_modalFrameBoxHeaderClose a {
    font-size:0;
}

#ui_modalFrameBoxHeaderClose a:before {
    display:block;
    content:"x";
    font-size:25px;
}

#ui_modalFrameBoxHeader .newModalClose {
    display:block;
    float:right;
    width:20px;
    height:20px;
    padding:0 !important;
    margin:-2px -5px 0 0 !important;
}

#ui_modalFrameBoxHeader .newModalClose svg {
    fill:#bbb;
}
    body.dark #ui_modalFrameBoxHeader .newModalClose svg {
        fill:#fff;
    }

#ui_modalFrameBoxBody {
	word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
	overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
	white-space: normal; /* importante para a quebra de linha */
	-webkit-overflow-scrolling: touch;
	line-height:150%;
	padding-top:15px;
	text-align:center;
}

#ui_modalFrameBoxBody input {
    width:100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    padding:5px;
    margin:15px 0 0 0;
    text-align:center;
    font-size:16px;
}

#ui_modalFrameBoxBody button {
    cursor:pointer;
    width:40%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    padding:10px;
    background-color:#65c466;
    color:#fff;
    font-size:16px;
    margin:15px 5px 3px 5px;
}
    /*#ui_modalFrameBoxBody button:first-of-type {
        background-color:transparent;
    }*/