/********** DEFINIÇÕES **********/

@preto: #282828;
@branco: #fff;
@verde: #005939;
@verdeclaro: #B6D7C6;
@verdemedio: #63ad84;
@cinza: #F0F0F0;
@grafite: #707070;

/********/

@media screen and (max-width: 480px){

    .content{
        width: 90%;
    }

    .popup{
        display: block;
        z-index: 100;
        height: auto;
        border-radius: 0px;
        top: 0px;
        position: relative;
        h3{
            margin-right: 0px;
            float: none;
        }
        .close{
            position: absolute;
            right: 10px;
            top: 10px;
        }
    }

    .preheader{
        .keypress{
            display: none;
        }
    }

   .home .preheader{
        .keypress{
            display: none;
        }
    }

    .header{
        padding: 20px 15px 20px 15px;
        .search{
            display: none;
        }
        p.logo{
            width: 40%;
        }
        p.amigos{
            float: left;
            margin: 0px 0px 0px 25px;
            text-align: left;
            width: 30%;
            a{
                margin: 5px 0px 0px 0px;
                width: 100%;
            }
        }
        #menumobile.active{
            background: url('../images/icon-menu.png') no-repeat center -50px;
        }
        #menumobile{
            width: 40px;
            height: 40px;
            background: url('../images/icon-menu.png') no-repeat center top;
            float: right;
            margin-top: 10px;
            transition: all ease 0.2s;
        }
        .menu-menu-principal-container.active{
            clear: both;
            margin-top: 100px;
        }
        .menu-menu-principal-container{
            margin-top: 0px;
        }
        .menu{
            width: 100%;
            float: none;
            display: none;
            .menu-item-has-children{
                background-position: right 20px;
            }
            li{
                display: block;
                margin: 0px 0px;
                width: 100%;
                border-bottom: 1px solid @cinza;
                padding: 10px 0px;
                .sub-menu{
                    position: relative;
                    opacity: 1;
                    box-shadow: none;
                    top: 0px;
                    background: @cinza;
                    padding: 0px;
                    border-radius: 0px;
                    margin-top: 20px;
                    margin-bottom: -10px;
                    li{
                        display: block;
                        margin: 0px 0px;
                        width: 100%;
                        border-bottom: 1px solid @cinza;
                        padding: 10px 20px;
                    }
                }
            }
        }
    }

    .footer,
    .posfooter,
    .topo{
        width: 100%;
        float: none;
    }

    .footer{
        padding: 10px 0px;
        p.logo,
        p.logoicmbio,
        p.amigos{
            float: none;
            margin: 0px auto 30px auto;
        }
        .redes{
            float: none;
            margin: 10px auto;
            text-align: center;
        }
        .menu{
            float: none;
            margin: 50px auto 15px auto;
            text-align: center;
        }
    }

    .posfooter{
        p.copy,
        p.desenvolvido{
            float: none;
        }
    }

    .topo{
        writing-mode: horizontal-tb;
        height: auto;
        padding: 25px 0px;
        border: none;
    }

    // SLICK

    .slick-arrow{
        width: 30px;
        height: 30px;
    }

    .slick-prev{
        left: 120px;
        bottom: -25px;
        top: auto;
    }
    .slick-next{
        right: 150px;
        bottom: -25px;
        top: auto;
    }

    // HOME

    .slider{
        .slide{
            padding-top: 180px;
            .content{
                padding: 0px;
                h1{
                    font-size: 11vw;
                    line-height: 13vw;
                    max-width: 100%;
                }
                p,h2{
                    max-width: 100%;
                    font-size: 4vw;
                    line-height: 6vw;
                }
            }
        }
    }

    .noticiashome{
        .destaque{
            margin-bottom: 40px;
            .boxpost{
                width: 100%;
                float: none;
                margin: 0px auto;
            }
        }
        .subdestaque{
            width: 90%;
            margin: 20px auto;
            float: none;
            .boxpost{
                img{
                    display: none;
                }
                .txt{
                    width: 100%;
                    h2{
                        line-height: 6vw;
                        font-size: 4vw;
                    }
                }
            }
        }
    }

    .tempo{
        .left{
            width: 100%;
            float: none;
            margin: 30px auto;
            .week{
                display: inline;
                .daybox:first-child{
                    width: 100%;
                    margin-bottom: 20px;
                    .wheather{
                        margin-top: 90px;
                    }
                }
                .daybox:last-child{
                    margin-right: 0px;
                }
                .daybox{
                    display: inline-block;
                    width: 104px;
                }
            }
        }
        .right{
            width: 90%;
            float: none;
            margin: 30px auto;
        }
    }

    .faunaflora{
        .text,
        .fauna{
            width: 100%;
            float: none;
            margin-bottom: 50px;
        }
        .fauna{
            display: none;
        }
    }

    .cuidados{
        img{
            float: none;
            width: 90%;
            margin: 0px auto 30px auto;
        }
        p.text{
            width: 100%;
        }
    }

    .setores{
        display: block;
        height: auto;
        .setor{
            display: block;
            width: 100%;
        }
    }

    .setores:hover .setor {
        width: 100%;
        padding: 200px 0px;
    }

    .setores:hover .setor:hover {
        width: 100%;
        padding: 100px 50px;
    }

    .atividades{
        .listaatividadeshome{
            .boxatividade{
                width: 155px;
                height: 155px;
                p{
                    font-size: 5vw;
                }
            }
        }
    }

    .newsletter{
        h2{
            max-width: 100%;
            font-size: 6vw;
        }
        form{
            max-width: 100%;
        }
        p{
            max-width: 100%;
            font-size: 10px;
        }
    }

    .posfooter{
        .sede{
            display: block;
        }
    }

    // INTERNAS

    .fullwidth{
        .topointerna{
            margin-top: -255px;
            h1{
                font-size: 10VW;
            }
            p{
                font-size: 3.5vw;
                line-height: 6vw;
                max-width: 100%;
            }
        }
    }

    .halfwidth{
        .topointerna{
            padding: 200px 0px 20px 0px;
            h1{
                font-size: 10VW;
            }
            p{
                font-size: 3.5vw;
                line-height: 6vw;
            }
            .txt{
                max-width: 100%;
            }
            img{
                display: none;
            }
        }
    }

    .fullwidth .interna, .halfwidth .interna {
        margin: 0px auto 70px auto;
    }

    .equipepnt{
        .area{
            width: 100%;
            float: none;
            h4{
                font-size: 3vw;
            }
        }
        .time{
            width: 100%;
            float: none;
            margin-top: 20px;
        }
    }

    .listaorientacoes{
        .container{
            .item{
                width: 100%;
                margin-bottom: 0px;
                p{
                    margin-top: 5px;
                }
                img{
                    width: 30px
                }
            }
        }
    }

    .atividadespage{
        .sidebarativ,
        .listaatividades{
            width: 100%;
            float: none;
        }
    }

    .singleativpage{
        .text,.right{
            width: 100%;
            float: none;
            margin-bottom: 40px;
        }
    }

    .setorespage{
        .setorbox{
            .text{
                width: 100%;
                float: none;
            }
            img{
                display: none;
            }
        }
    }

    .interna .conteudo{
        .wp-block-image{
            margin-top: 30px;
        }
        iframe{
            width: 100%;
            margin-top: 50px;
        }
        .wpcf7{
            width: 100%;
            float: none;
            position: relative;
            z-index: 100;
        }
    }

    .projetospage{
        .projetobox{
            img{
                border-radius: 0px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                width: 100%;
                float: none;
            }
            .text{
                padding: 0px 30px 40px 20px;
                width: 100%;
                float: none;
                p{
                    padding-right: 0px;
                }
            }
        }
    }

    .singlelocaispage{
        .destaque,
        .text{
            width: 100%;
            float: none;
            margin-bottom: 20px;
        }
        .howto{
            .transporte,
            .atividadeslocal,
            .mapa{
                width: 100%;
                float: none;
            }
        }
    }

    // BLOG

    .pagblog{
        .singlepost{
            float: none;
            width: 100%;
        }
        .topointerna{
            .boxpostdestaque{
                width: 100%;
                border-radius: 10px;
                margin: 20px 0px;
                box-shadow: 0px 3px 6px #00000029;
                background: @branco;
                padding-bottom: 30px;
                img{
                    width: 100%;
                    max-height: 200px;
                    object-fit: cover;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                    margin-bottom: 20px;
                }
                .date{
                    font-size: 14px;
                    color: @verdemedio;
                    float: right;
                    margin-right: 20px;
                    margin-top: 3px;
                    svg{
                        width: 15px;
                        height: 15px;
                        margin-right: 5px;
                        margin-bottom: -2px;
                        path{
                            fill: @verdemedio;
                        }
                    }
                }
                .text{
                    padding: 0px 30px;
                    .post-categories{
                        list-style-type: none;
                        a{
                            font-weight: bold;
                            text-transform: uppercase;
                            font-size: 12px;
                            color: @verdemedio;
                        }
                        a:hover{
                            color: @verde;
                        }
                    }
                    h2{
                        margin: 10px 0px;
                        line-height: 28px;
                        a{
                            color: @verde;
                            font-size: 20px;
                        }
                        a:hover{
                            color: @verdemedio;
                        }
                    }
                    p{
                        font-size: 14px;
                        line-height: 24px;
                        margin-bottom: 20px;
                    }
                    .leiamais{
                        font-weight: bold;
                        text-decoration: underline;
                        color: @verde;
                        font-size: 14px;
                    }
                    .leiamais:hover{
                        color: @verdemedio;
                    }
                }
            }
        }
        .listaposts{
            .posts{
                display: block;
                width: 100%;
                float: none;
                .boxpost{
                    width: 100%;
                    border-radius: 10px;
                    margin: 20px 0px;
                }
            }
        }
        .sideblog{
            width: 100%;
            float: none;
        }
    }

}