@media (max-width: 1425px) {
    * {
        font-size: 55%;
    }   
}

@media (max-width: 1366px) {
    #header-admin .wrapper { width: 90vw; max-width: 1370px; height: 100%; display: flex; justify-content: space-between;}
    #header-admin2 .container { width: 90vw; max-width: 1370px; height: 44px; display: flex; justify-content: space-between; margin: 0 auto; }
    #header-menu .wrapper .container {width: 100%;  height: 100%; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; }
    
    #header-menu .normal { 
        width: 90%; 
        border-radius: 5px; 
        transition: width .8s, border-radius 1s;
    }
    #header-menu .scroll { 
        width: 100%; 
        border-radius: 0px; 
        transition: width .8s, border-radius 1s;
    }
}


@media (max-width: 1150px) {
    
    .box { width: 90vw; height: 100%; display: flex; }
    #header-admin .wrapper { width: 100vw; max-width: 1370px; height: 100%; display: flex; justify-content: space-between;}
    #header-admin2 .container { width: 100vw; max-width: 1370px; height: 44px; display: flex; justify-content: space-between; margin: 0 auto; }
    #header-menu .normal { 
        width: 100%; 
        border-radius: 0px; 
        transition: width .8s, border-radius 1s;
    }
    #header-menu .scroll { 
        width: 100%; 
        border-radius: 0px; 
        transition: width .8s, border-radius 1s;
    }
} 


@media (max-width: 1024px) {
    * {
        font-size: 55%;
    }
}

@media (max-width: 980px) {
    #header-admin { display: none;}
    #header-menu { top: 0px;}
    #header-admin2 {display: none;}
    #header-menu nav#menu-h { display: none }
    #header-menu a.menu-burguer { display: flex; }
}

@media (max-width: 550px) {
    * {
        font-size: 62.5%;
    }
    #header-admin { display: none;}
    #header-menu { top: 0px;}

    #header-menu #mobile-nav {width: 90vw; right: -90vw  }
    #header-menu #mobile-nav .items-menu a {font-size: 1.5rem; }

    #header-admin2 {display: none;}

    /* ###################### TOP ###################### */
    #top .box .title-box { width: 100%; height: 50%; display: flex; justify-content: center; align-items: flex-end; }
    #top .box .title-box h2 { width: 90%; color: #fff; font-size: 4rem; font-style: italic; line-height: 7rem; text-align: center; margin-top: 100px;}
    
    #top #top-separador { width: 100%; margin-top: 50px;}

    /* @keyframes fadeIn {
        from {
            opacity: 0;
            top: -70px;    
        }
        to {
            opacity: 1;
            top: 0px;
        }
    
    } */

    /* ###################### HISTORIA ###################### */
    #historia {width: 100vw; height: auto; padding: 40px}
    #historia .box { flex-direction: column; align-items: center; justify-content: space-between; }
    #historia p {width: 90%; margin-bottom: 20px;}

    /* ###################### SERVIÇOS - PLANOS / PROTEÇÃO ###################### */
    #servicos #protecao.box,
    #servicos #planos.box { padding: 40px 0; flex-direction: column; align-items: center; min-height: 45vh; }

    #servicos #protecao.box .double-block,
    #servicos #planos.box .double-block{ flex-direction: column; }
    /*  */
    #servicos #protecao.box .btn-container,
    #servicos #planos.box .btn-container { width: 100%; display: flex;}

    #servicos #protecao.box .left,
    #servicos #planos.box .left { width: 90%;  }

    #servicos #protecao.box .left p,
    #servicos #planos.box .left p { width: 100% }

    #servicos #protecao.box .right,
    #servicos #planos.box .right { width: 90%; flex-direction: column ; align-items: flex-start; padding: 10px 0px 10px;  }

    #servicos #protecao.box .right .item,
    #servicos #planos.box .right .item { flex-direction: row; width: auto; align-items: flex-start; gap: 20px;}

    #servicos #protecao.box .right .item .title-text,
    #servicos #planos.box .right .item .title-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    #servicos #protecao.box .right .item p,
    #servicos #planos.box .right .item p { text-align: left;}
    /*  */


    /* ###################### SERVIÇOS - ACESSO ###################### */
    #servicos #acesso.box { height: auto; margin: 0 0 60px 0;}
    #servicos #acesso.box .container-acesso { flex-direction: column; align-items: center; }

    #servicos #acesso.box .container-acesso .left { 
        width: 100%; 
        padding: 40px 40px 20px;  
    }

    #servicos #acesso.box .container-acesso .right { 
        width: 100%; 
        padding: 20px 40px 40px;  
        justify-content: center; 
    }

    /* ###################### NOTÍCIAS ###################### */
    #ultimas-noticias .box .container-cards{ grid-template-columns: 1fr; }

    /* ###################### FOOTER ###################### */
    /* ###################### FOOTER - CONTADORES  ###################### */
    footer .contadores { height: 75vh; display: grid; grid-template-columns: 1fr ; align-items: center;}

    footer .contadores .associados,
    footer .contadores .veiculos,
    footer .contadores .protecoes { height: 25vh;  position: relative;}

    footer .contadores .associados .content,
    footer .contadores .veiculos .content ,
    footer .contadores .protecoes .content { padding: 40px;}

    footer .contadores .associados .contar ,
    footer .contadores .veiculos .contar ,
    footer .contadores .protecoes .contar {height: 90px; }

    footer .contadores .associados .contar .num,
    footer .contadores .veiculos .contar .num,
    footer .contadores .protecoes .contar .num {height: 90px;  }

    /* ###################### FOOTER - RODAPE - APP-BOX ###################### */
    footer #rodape #app-box .app-store { height: 120px;  margin: 0 0 40px 0; position: relative; display: flex; justify-content: flex-end; padding: 0 15px;}
    footer #rodape #app-box .app-store img.abs { position: absolute; bottom: 0px; left: 20px;}
    footer #rodape #app-box .app-store .content { width: 55%; flex-direction: column; justify-content: center;}
    footer #rodape #app-box .app-store .text { height: auto; margin-bottom: 10px; margin-right: 0;}
    footer #rodape #app-box .app-store .text h4 { display: none; }
    footer #rodape #app-box .app-store .text p { font-size: 1.3rem; font-weight: 600; line-height: 1.5rem; color: var(--text-light-1); width: 100%;}
    footer #rodape #app-box .app-store .link { flex-direction: column; align-items: center; justify-content: space-evenly;}
    footer #rodape #app-box .app-store .link span {display: none;}
    /* ###################### FOOTER - RODAPE - INFO CONTATO ###################### */
    footer #rodape #info-contato.box { flex-direction: column; }

    footer #rodape #info-contato.box .sobre { display: flex; flex: 1; flex-direction: column; align-items: center; }
    footer #rodape #info-contato.box .links ,
    footer #rodape #info-contato.box .acesso-rapido { display: none; }
    footer #rodape #info-contato.box .contato { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 40px 0;}

    footer #rodape #info-contato.box .sobre p { width: 100%; font-size: 1.2rem; text-align: center;}

    footer #rodape #info-contato.box .contato h4 { display: none;}
    footer #rodape #info-contato.box .contato .fones span { width: 100%; display: flex; justify-content: center;}
    footer #rodape #info-contato.box .contato .fones label { font-size: 1.4rem; font-weight: 300; line-height: 2.1rem; color: var(--text-light-1); margin-right: 10px; text-align: left;}

    /* ###################### QUEM SOMOS ###################### */

    #quem-somos .box { flex-direction: column;}

    #quem-somos .box .content-image { display: flex; flex-direction: column-reverse; align-items: center;}

    #quem-somos .box .content h2 { margin: 0 0 30px 0;}
    #quem-somos .box .content .text { padding: 0 0 0 0;}
    #quem-somos .box .content .text p { margin: 0 0 30px 0; }
    #quem-somos .box .content a.btn-termo { padding: 22px 40px;  margin-bottom: 20px;}
    #quem-somos .box .img { width: 50%; padding: 0;}
    #quem-somos .box .img .icon { width: 100%; height: 150px; margin-bottom: 40px ; }


    /* ###################### PROTEÇÕES ###################### */
    #protecoes .catalog,
    #planos-auxilio .catalog { gap: 40px; margin-bottom: 60px;}
    #protecoes .catalog .item-catalog,
    #planos-auxilio .catalog .item-catalog { flex-direction: column;}
    #protecoes .catalog .item-catalog img ,
    #planos-auxilio .catalog .item-catalog img { margin-right: 0; width: 100%; height: auto; border-radius: 10px; object-fit: cover; }

    #protecoes .catalog .item-catalog .content-item ,
    #planos-auxilio .catalog .item-catalog .content-item { flex: 2; display: flex; flex-direction: column; padding: 10px;}

    #protecoes .catalog .item-catalog .content-item .title ,
    #planos-auxilio .catalog .item-catalog .content-item .title { margin-top: 20px; margin-bottom: 15px;align-items: flex-start;}
    #protecoes .catalog .item-catalog .content-item .text ,
    #planos-auxilio .catalog .item-catalog .content-item .text { margin-right: 0px; }
    
    /* ###################### NOTÍCIAS - PAGE ###################### */

    #page-noticias .box .title-icon { flex-direction: column; margin: 0 0 43px 0; align-items: flex-start;}
    #page-noticias .box .title-icon .box-search {display: flex; width: 42px; justify-content: flex-end; overflow: hidden; margin-top: 20px; transition: width 1s; align-self: flex-end;}
    #page-noticias .box .title-icon .box-search.open { width: 100%; transition: width 1s;}
    #page-noticias .box .title-icon .box-search input { width: 100%; padding-left: 40px; }

    /* SLIDER */
    #page-noticias .box .group-slider .slideshow-container .mySlides .content { padding: 40px 30px 40px;}
    #page-noticias .box .group-slider .slideshow-container .mySlides .content .description { width: 100%; }
    #page-noticias .box .group-slider .slideshow-container .mySlides .content .ticket {  margin-bottom: 10px;}
    #page-noticias .box .group-slider .slideshow-container .mySlides .content h2 { font-size: 2rem; font-weight: 600; line-height: 3.2rem; color: var(--text-light-1); margin-bottom: 10px;}
    #page-noticias .box .group-slider .slideshow-container .mySlides .content .data { font-size: 1.5rem; font-weight: 400; line-height: 2.25rem; color: var(--text-light-1); opacity: 0.6;}

    #page-noticias .box .container-cards{ grid-template-columns: 1fr; gap: 30px; padding: 0 0 40px 0;}

    /* ###################### NOTÍCIAS FULL- TOP ###################### */
    #top-noticias .box h2 { color: #fff; font-size: 2.5rem; line-height: 3.5rem; text-align: center; margin-top: 100px;}


    /* ###################### NOTÍCIAS FULL- CONTENT-NOTICIA ###################### */
    #content-noticia .box ul {display: none; }
    
    /* CONTENT */
    #content-noticia .box .content h2 { font-size: 3.0rem; line-height: 4.4rem; font-weight: 700; margin-top: 40px; margin-bottom: 28px}

    /* ###################### CONTATOS ###################### */
    #contatos .box .entre-contato { flex-direction: column;}
    #contatos .box .entre-contato form {flex: 1; }
    #contatos .box .entre-contato .formulario { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 200px 1fr; row-gap: 20px; }
    /* #contatos .box .entre-contato .formulario .item-single {  } */
    #contatos .box .entre-contato .formulario .item-double { grid-column: 1}

    #contatos .box .entre-contato .atendimento { flex: 1; padding: 10px }

    #modal-sucess .modal-content {
        width: 350px;
        height: 200px;
        top: calc(50% - 100px);
    }

    #modal-sucess .modal-content .content {
        display: flex;
        flex-direction: column;
        padding: 18px 40px 35px;
    }
    
    #modal-sucess .modal-content .content .text {
        width: 100%;
        font-size: 2.0rem;
        line-height: 2.0rem;
        font-weight: 500;
        margin-bottom: 20px ;
    }

    #modal-sucess .modal-content .content a span{ 
        font-size: 1.2rem; 
        font-weight: 600;
    }

}