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

@preto: #4a4a4a;
@branco: #fff;
@laranja: #f06523;
@laranjaescuro: #8c3a13;
@cinza: #a7a7a7;
@cinzaclaro: #f8f8f8;

/********/

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

    *{
        margin: 0px;
        padding: 0px;
    }
    
    html,body{
        width:100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x:hidden;
    }

    .content{
        width: 90%;
    }

    body.on{
		#menumobile{
            background-position: center bottom;
            z-index: 9999;
        }
        .site,
        .footer,
        .posfooter{
            display: none;
        }
		.header{
            position: relative;
            height: -webkit-fill-available;
            background: @laranja;
            .btn{
                display: none;
            }
            .menu{
                display: block;
                position: fixed;
                width: 100%;
                height: -webkit-fill-available;
                top: 90px;
                left: 20px;
                margin-left: 0px;
                li{
                    display: block;
                    border: none;
                    margin-bottom: 30px;
                    a{
                        color: @branco;
                    }
                    .sub-menu{
                        position: relative;
                        li{
                            margin-bottom: 10px;
                            background: none;
                            .sub-menu{
                                position: relative;
                                left: 40px;
                                li{
                                    margin-bottom: 10px;
                                    background: none;
                                    a{
                                        color: @branco !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
	}

    #menumobile{
		display: block;
	    background: url(../images/icon-menu.svg) no-repeat center top;
	    height: 50px;
	    width: 50px;
	    overflow: hidden;
	    background-size: cover;
        position: absolute;
        right: 20px;
        top: 45px;
	}

    .header{
        .menu,
        .redes,
        p.user{
            display: none;
        }
    }

    .header{
        margin-bottom: 0px;
        .btn{
            display: block;
            font-size: 12px;
            padding: 10px 15px;
            margin-right: 60px;
            margin-top: 7px;
            margin-left: 0px;
            svg {
                width: 25px;
                height: 25px;
                margin: 0px 0px -10px -5px;
            }
        }
        p.logo{
            width: 95px;
        }
    }

    .footer{
        .quart{
            width: 100%;
            text-align: center;
            margin-bottom: 40px;
            .redes{
                float: none;
            }
            ul{
                margin-left: 0px;
            }
        }
    }

    .patrocinio{
        .content{
            width: 90% !important;
        }
        .divpatrocinio,
        .divrealizacao,
        .divapoio{
            width: 100%;
            float: none;
            text-align: center;
            .logopat{
                margin-bottom: 50px;
            }
        }
    }

    .videohome{
        iframe{
            width: 90%;
            height: 51vw;
        }
    }

    .titlehome{
        margin: 0px auto 10px auto;
        width: 90%;
        //background: @laranja;
        font-size: 4.5vw;
    }

    .slider{
        .slide.text{
            padding: 30px 0px;
            p{
                padding: 0px 30px;
                font-size: 18px;
            }
        }
        .slideone{
            padding: 60px 0px;
            background: url(../images/Artboard_1CAPSULA.jpg) no-repeat;
            background-position: right;
            background-size: cover;
            background-position: -57px;
            background-size: 900px;
            .box{
                img{
                    margin: 10px auto 40px auto;
                }
                p{
                    line-height: 55px;
                }
            }
            p{
                span{
                    display: inline;
                }
            }
            img{
                width: 170px;
                margin-bottom: 20px;
            }
            .buttons{
                margin-top: -50px;
            }
            form{
                width: 100%;
            }
        }
        .slide{
            .box{
                width: 100%;
                img,p{
                    float: none;
                    display: block;
                    margin: 10px auto;
                    text-align: center;
                }
            }
            iframe{
                height: 609px;
            }
        }
        p{
            img{
                width: 280px;
                margin: 0px 0px 40px 0px;
            }
        }
        .buttons{
            margin-top: 40px;
            a{
                margin: 10px;
            }
        }
    }

    label.ESTADO-label,
    label.IDADE-label,
    label.EMAIL-label,
    label.CIDADE-label{
        width: 100% !important;
    }

    .forminscricao{
        form{
            display: block;
            input{
                width: 100%;
                display: block;
                margin: 10px 0px;
            }
        }
    }

    .datasevento{
        .data{
            margin: 0px auto;
            display: block;
            padding: 15px 0px;
        }
        .data.border{
            border: none;
        }
    }

    .sobre{
        background: @cinzaclaro;
        .texto{
            width: 100%;
        }
    }

    .home .agenda{
        .title,.btn{
            float: none;
        }
        .btn{
            margin-top: 20px;
        }
    }

    .agenda{
        .listaagenda{
            .postagenda{
                width: 100%;
                margin: 15px auto;
                float: none;
            }
        }
        .filtro{
            position: relative;
            p{
                float: none;
                margin-top: 0px;
            }
            p.filterdown{
                display: block;
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 35px;
            }
            p.filterdown.active{
                transform: rotate(-180deg);
            }
            form{
                display: block;
            }
            .op{
                width: 80%;
                margin: 20px auto;
                display: none;
                transition: all ease 0.2s;
            }
            .op.active{
                display: block;
            }
        }
    }

    .single{
        img.destaque{
            width: 100%;
            float: none;
            margin: 20px auto 0px auto;
            display: block;
        }
        .resumo{
            margin: 30px 0px 20px 0px;
            width: 100%;
            float: none;
            p{
                img{
                    margin: 20px auto 0px auto;
                    width: auto;
                }
            }
        }
    }

    .pagelogin{
        .ladologin{
            border: none;
        }
        .ladologin,
        .ladocadastro {
            width: 100%;
            float: none;
            margin-right: 30px;
            padding-left: 50px;
            margin-bottom: 50px;
        }
    }

    .pagemeulivmundi{
        .nav{
            width: 100%;
            float: none;
            border: none;
            a{
                display: inline-block;
                margin-right: 20px;
            }
        }
        .favoritos{
            float: none;
            width: 100%;
        }
    }

    .artigo,
    .sidebar{
        float: none;
        width: 100%;
        margin-bottom: 40px;
        .listaartigos{
            .postartigo{
                float: none;
            }
        }
    }

    .paginacomum{
        .videos{
            iframe {
                width: 100%;
                height: 210px;
            }
        }
        figure{
            img{
                object-fit: cover;
                height: auto;
            }
        }
    }

    .page-template-page-inscricaoevento{
        .preheader,
        .header,
        .footer,
        .posfooter,
        #menumobile{
            display: none;
        }
        .inscricao{
            form{
                width: 100%;
                input[type=text],
			    input[type=email]{
                    width: 100%;
                }
                input[type=submit]{
                    width: 100%;
                }
            }
        }
    }

    // 2020

    .iniciativas{
        .boxesiniciativas{
            display: grid;
            grid-template:
            "festival"
            "quetai"
            "cultural"
            "educacao"
            "mutirao";
            gap: 20px;
            margin-top: 30px;
            align-items: center;
            .gridbox{
                padding: 80px 10px !important;
                p{
                    width: 50% !important;
                    margin: 0px auto;
                }
            }
        }
    }

    .popup{
        width: 90%;
        padding: 50px 30px 30px 30px;
        p{
            font-size: 3vw;
            line-height: 4vw;
        }
    }

    .barralogos{
        div{
            display: block;
            img{
                width: 50%;
            }
        }
        .apoiologos,
        .realizalogos{
            width: 100%;
            float: none;
        }
    }

    // FEIRA

    .feirapage{
        .maincategories{
            display: block;
        }
        .secoesfeira{
            .prodsfeira{
                padding: 50px 10px;
                .product{
                    width: 70%;
                    margin: 30px 0px;
                    display: block;
                    margin: 30px auto;
                }
            }
        }
    }
        

}