/* CSS Folha de Estilo / www.anagauna.eti.br  */
/* ============================================================================================== */

/* HTML5 Cores padrão = https://html-color.codes/  */
/* Cores Padrão HTML5 e CSS3 / Set a specific color for each brand */
/* https://www.w3schools.com/tags/ref_colornames.asp */
   
/*
	color: white;   = branco
	color: #ffffff; = branco
    color: #fffaff; = floralwhite

	color: #ffdead; = navajo 
    color: yellow; = amarelo 
	color: gold;   = amarelo ouro
    color: goldenrod; = amarelo ouro
	color: #fffddd; = amarelo claro 
    color: #fff000; = amarelo claro	
	
    color: #f4511e; = laranja escuro 
    color: #ffab62; = laranja medio
    color: #fdbcb4; = melon	
	
    color: pink;	= rosa pink
	color: #ffb6c1  = light pink
	color: #c71585; = rosa médio royal
    color: #ffe4e1 = misty rose
    color: hotpink;
	color: violet;
	color: purple;
    color: #6200ea; = violeta escuro
    color: #9F00FF; = violeta médio royal
	color: #6351ce; = violeta
	
	color: red; = vermelho
	color: darkred; = vermelho escuro
	color: #8B0000; = vermelho escuro

    color: blue; = azul 
	color: #e3f2fd; = branco azulado
    color: #D6EFFF; = azul muito claro 
    color: #C6E9FF; = azul-claro	
    color: #005aff; = azul-royal 	 
	color: #f0f0f0; = azul muito claro quase branco 
	color: #3B5998; = azul-escuro = Facebook
    color: #55ACEE; = azul-claro = Twitter 
    color: #007bff; = azul claro
    color: #120a8f; = azul escuro 
	color: darkblue; = azul escuro
	
	color: green; = verde
	color: darkgreen; = vermelho escuro	
    color: #4CAF50; = verde medio 			
    color: #90EE90; = verde claro
    color: #DBF9DB = verde claro 		 
    color: #f2f2f2; = verde azulado claro 	  
    color: #013220; = verde dark green
    color: #3b7a57; = verde amazon
    color: #7fffd4; = verde água (aquamarine)
    color: chartreuse;
 
	color: gray; = cinza
	color: darkgray; = cinza escuro
	color: silver;  = cinza prata
	color: #ffffff; = cinza claro 
	color: #e7e7e7; = cinza muito claro (prata) 
    color: #f1f1f1; = cinza muito claro   
    color: #d5d5d5; = cinza prata 			   
    color: #777777; = cinza médio          
    color: #818181; = cinza claro 
	color: #474A51; = cinza prateado escuro
	color: #303030; = cinza muito escuro	
    color: #6D6D6D; = cinza escuro 
	color: #000000; = black = preto	 
*/	 

/* ================================================================================================= */
/* Cores Gradiente Rosa e Violeta 
    background-color: linear-gradient(to right, #6200ea, #005aff, #6351ce);   	
    background-color: linear-gradient(to right, #c71585, #9F00FF, #9c27b0);  */  
/* ================================================================================================= */

/* Código de página UTF-8 / ISO-8859-1 / PT-BR */
   @charset 'UTF-8';

   /* Estiliza todos os elementos definidos como pt-br */
   :lang(pt-br) { font-family: Arial, sans-serif; }

   /* ============================================================================================== */

    @import url("../css/w3.css");
    @import url("../css/w3mobile.css");

    @import url("../fontawesome-free-7.2.0-web/*.css"); 
    @import url("../bootstrap5/*.css"); 
   
    /* ============================================================================================== */

   /* Reset margins and set up full window height */
    * { top: 0; left: 0; right: 0; bottom: 0; border: 0; 
        margin: 0 0 0 0; padding: 0 0 0 0; }


/* Root Valores padrão (Mobile) */
:root {
    margin: 0 0 0 0;
    padding: 18px 18px 18px 18px;
    color-scheme: light;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 400px; 
    background-color: #ededed; /* color: #FFF5EE; cor concha do mar */ 
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    z-index: -1;
    list-style: none;
    list-style-type: none;
    line-height: 1.123456789;
    letter-spacing: small; /* espaçamento entre letras */
    word-spacing: large;
    word-break: keep-all;
    white-space: normal;
    justify-content: center;
    align-content: center;
    text-align: justify;
    text-align-last: left;
    text-decoration: none;
    text-decoration-style: none;
    --font-size-celular: small;
    --font-size-mobile: small;
    --font-size-tablet: normal;
    --font-size-notebook: medium;   
    --font-size-desktop: large;
    --font-size-smarttv: x-large;
    --mediascreen-celular: 560px;
    --mediascreen-mobile: 768px;
    --mediascreen-tablet: 992px;
    --mediascreen-notebook: 1440px;
    --mediascreen-desktop: 3840px;
    --mediascreen-smarttv: 100%;
    --gradient-violeta: linear-gradient(to right, #6200ea, #005aff, #6351ce); 
    --gradient-rosa: linear-gradient(to right, #c71585, #9F00FF, #9c27b0);  
    --borda-solida: 2px solid #aaa; 
    --borda-tracejada: 2px dashed #aaa; 
    --borda-pontos: 2px dotted #aaa; 
    --borda-dupla: 2px double #aaa;        
    --borda-ranhuras3D: 2px groove #aaa;   
    --borda-texturizada3D: 3px ridge #aaa; 
    --borda-interna3D: 2px inset #aaa; 
    --borda-inicial3D: 2px outset #aaa; 
    --borda-ocultar: 0px hidden;     
} /* Fim do ROOT */

/* ================================================================================================================== */  

    html {  background-color: #6610f2; color:#fff; color: #000; 
            top: 0; left: 0; right: 0; bottom: 0;  border: 0; 
            margin: 0 0 0 0; padding: 18px 18px 18px 18px;
            display: inline-block; }
    

    body > .body-principal { background-color: #6610f2; color:#fff; 
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            top: 0; left: 0; right: 0; bottom: 0; 
            overflow: scroll; /* Prevents the main window from scrolling */
            position: relative;
            margin: 0 0 0 0; 
            padding: 18px 18px 18px 18px;
            display: inline; 
            text-decoration: none;
            list-style: none;
            list-style-type: none;
            text-align: justify;
        }


    main > .main-principal { 
           background-color: #D6EFFF; color:#005aff;
           margin: 0 0 0 0; padding: 18px 18px 18px 18px; 
           border: 1px solid #aaa;
           font-family: 'Roboto', sans-serif; 
           left: 0; right: 0; position: relative;
           display: inline; 
        }
   
    aside > .menu-sidebar { width: 150px; height: auto; display: block;
                           margin: 0 0 0 0; padding: 18px 18px 18px 18px; }

    aside > .sidebar-nav {  background-color: #f4f4f4;
                            padding: 18px 18px 18px 18px;
                            border-right: 1px solid #ccc;
                            }                       

    footer > .rodape  { background-color: #efefef; color: #333; text-align: center; 
                        justify-content: center; align-content: center;
                        align-items: center; align-self: center;
                        border: 1px solid #aaa; left:0; right:0; bottom:0; 
                        margin: 0 0 0 0; padding: 2% 2% 2% 2%; 
                        width: 100%; height: 100%; 
                        display: inline-block;  
                        }               

    nav .navbar { width: 100%; height: 100%; }                    
           
    header > .cabecalho { 
            width: 100%; height: auto;
            margin: 0 0 0 0; padding: auto;
            justify-content: center; 
            text-align: center;
            align-content: center;
            align-items: center;
            top:0; left:0; right:0; border:0;
            display: inline;  
            }


    div .row { min-width: 250px; max-width: 900px; height: 100%; margin: auto; padding: auto; 
               justify-content: center; align-content: center; align-self: center;}

    div .container-fluid { min-width: 250px; max-width: 100%; height: 100%; margin: auto; padding: auto; 
                           justify-content: center; align-content: center; align-self: center; }

    div .col-1, .col-sm-1 { width: 300px; height: 100%; justify-content: center; align-content: center; align-self: center; }

    @import url("../css/menu-navbar2026.css");
    @import url("../css/menu-sidebar2026.css"); 
    @import url("../css/menu_dropdown2026.css"); 
    @import url("../css/privacidade-modal.css");   

   /* =========================================================================================== */
   /* Body Background Images Responsive / Web Design Images Responsive */
   /* resize the browser windows to see how the image scales to fit the page. */
   /* Center and scale the image nicely. */

     .background-mp4 { background-image: url("../motion/cloud5.mp4");
                             background-size: 100% 100%; /* cover / 100% 100% / contain */
                             background-repeat: no-repeat; /* no-repeat / fixed / center;  */
                             background-attachment: fixed;
                             background-position: absolute;
                             background-clip: content-box;
                             background-origin: content-box;
                             }

   .background-jpg { background-image: url('../texturas/violetalindo.jpg');
                             background-size: 100% 100%; /* cover / 100% 100% / contain */
                             background-repeat: no-repeat; /* no-repeat / fixed / center;  */
                             background-attachment: fixed;
                             background-position: absolute;
                             background-clip: content-box;
                             background-origin: content-box;
                             }

    /* ========================================================================================== */


    .centralizar {  margin:auto; padding:auto;
                    justify-content:center;
                    align-content:center; 
                    align-items:center;
                    align-self: center;
                    text-align:center; 
                    }

                 
   .borda-solida { border: 2px solid #aaa; }
   .borda-tracejada { border: 2px dashed #aaa; }
   .borda-pontos { border: 2px dotted #aaa; }
   .borda-dupla { border: 2px double #aaa; }       
   .borda-ranhuras3D { border: 2px groove #aaa; }  
   .borda-texturizada3D { border: 2px ridge #aaa; }
   .borda-interna3D { border: 2px inset #aaa; }
   .borda-inicial3D { border: 2px outset #aaa; }
   .borda-oculta { border: 0px hidden }

    /* ============================================================================================================== */

   iframe > .googlemaps { width:100%; 
                          min-width:300px; 
                          height:150px; 
                          margin: 0 0 0 0; 
                          padding: 12px 12px 12px 12px; 
                        }

    .anuncio, .marketing, .adsgoogle {  background-color: transparent; color: silver; 
                                        text-align: center; display: inline; }

   /* Imagem Responsive */
   img { min-width: 20px; max-width: 300px; height: auto;
         margin: 0 0 0 0; /* Centraliza a figura */ 
         padding: auto;
         image-orientation: from-image;
         justify-content: center; 
         align-content: center; align-items: center;
         }


    /* imagem com borda arredondada  */
    .redondo {  border-radius: 9% 9% 9% 9%;  
                border: 2px solid #aaa; 
                align-content: center; 
                align-items: center;
                justify-content: center; } 

    /* imagem redonda em circulo */
    .circulo {  border-radius: 50% 50% 50% 50%;  
                border: 2px solid #aaa; 
                align-content: center; 
                align-items: center;
                justify-content: center; } 

    .responsive { width: 100%; min-width: 50%; max-width: 100%; height: 100%; min-height: 50%; }

   .vertical { display: block; align-content: center; gap: 10px; }

   .horizontal { display: inline; align-content: space-between; gap: 10px; }
   
    /* Imagem Redonda centralizada */
     .logo { font-size: 1.5rem; font-weight: bold; color: #C6E9FF;
                  min-width: 50%; max-width: 300px; height: 100%; 
                  margin: auto; /* Centraliza a figura */
                  padding: auto;
                  border: 1px solid #ccc;
                  text-align: center; /* Centraliza a imagem e o texto */
                  border-radius: 0;
                  }

    /* Figure Card Container */
    figure { background-color: transparent; 
            position: relative; gap: 20px;
            margin: auto; padding: auto; 
            display: inline-block; 
            align-content: center; 
            align-items: center; 
            justify-content: center;
            }

    /* Stylized Figure Caption */
    figcaption { background-color: #eee;
                color: #333;
                font-size: medium;
                font-style: italic;
                margin: auto; 
                padding: auto;
                text-align: center;
                border: 1px solid #aaa;
               }

    /* Adicionar reflexo abaixo de uma imagem: */
    img > .box-reflect { img {-webkit-box-reflect: below; } }
                  

    /* ============================================================================================== */
    /*  Div - Containers Principais */

    /* Impedir a seleção de texto de um elemento <div> */
    html, body, div, section, main, footer, .texto-bloqueio { -webkit-user-select: none; /* Safari */
                                                             -ms-user-select: none; /* IE 10 and IE 11 */
                                                             user-select: none; /* Standard syntax */
                                                              }   
        
    div > .container { background-color: #f1f1f1;
                     margin: 0 0 0 0;
                     padding: 12px 12px 12px 12px;
                     box-sizing: inherit;
                     list-style: none;
                     list-style-type: none;
                     table-layout: auto;
                     display: inline-block; 
                     text-align: justify;
                    justify-content: center;
                    align-content: center;
                    align-items: center;
                    text-align: justify;
                    text-decoration: none;
                    }    
                       
    div > .flex-container { margin: 0 0 0 0;
                          padding: 12px 12px 12px 12px;
                          display: flex; 
                          flex-direction: row; /* row; / column; / row-reverse; / column-reverse; */
                          flex-wrap: wrap; 
                          flex-basis: 100px;
                        }                 
    
    .item1 { grid-area: myArea; }

    div > .grid-container {  margin: 0 0 0 0;
                            padding: 12px 12px 12px 12px;
                            display: grid;
                            grid-template-areas: "myArea myArea myArea";
                            grid-template: 1fr 1fr;
                            grid-area: myArea;
                            grid-auto-flow: column;
                            grid: auto;
                            grid-gap: 20px; /* espaçamento entre as colunas da grade */
                            row-gap: 50px; /* espaçamento entre as linhas da grade  */
                            table-layout: auto;
                            grid-auto-flow: column;
                            grid-auto-columns: 50px;
                            grid-auto-rows: 150px;
                            grid-column: 1 / span 2;
                            grid-column-start: 2;
                            grid-column-end: span 3;
                            grid-row: 1 / span 2;
                            grid-row-start: 2;
                            grid-row-end: span 3;
                            }    

    /* Atribui sombras a diferentes elementos <div> */
     .sombra { box-shadow: 5px 10px #888888; }

    section { margin: 0 0 0 0; padding: 12px 12px 12px 12px; justify-content: center; align-content: center;
              align-items: center; text-align: justify; }        

   /* ================================================================================================= */

    article > .blogpost {  color: #222;
                            font-style: italic;
                            margin: 0 0 0 0;
                            padding: auto;   
                            font-family: Tahoma, Verdana, sans-serif;
                            line-height: 1.123456789;
                            letter-spacing: small;
                            word-spacing: large;
                            white-space: small;
                            text-decoration: none;
                            list-style: none;
                            list-style-type: none;
                            text-align: justify;
                            justify-content: center;
                            align-content: center;
                            align-self: center;
                            }


    blockquote {  color: #6200ea; 
                  margin: 0 0 0 0; padding: 12px 12px 12px 12px;
                  width: 100%; height: 100%; 
                  font-family: Tahoma, Verdana, sans-serif; font-style: italic;
                  text-align: justify; text-decoration: none;
                 }

   p { color: #000; text-align: justify; justify-content: left;
       margin: 0 0 0 0; padding: 12px 12px 12px 12px; text-indent: 50px; 
       line-height: 1.123456789; letter-spacing: normal;
       word-spacing: normal; white-space: normal; 
       text-decoration: none; list-style: none;
       list-style-type: none; text-align: justify; 
       align-content: center; align-self: center; 
        }

    span { color: #000; text-align: left; margin: 0 0 0 0; padding: 12px 12px 12px 12px; }

   /* Defina o espaçamento entre letras do titulo */
   h1 { letter-spacing: normal; }
   h2 { letter-spacing: normal; }
   h3 { letter-spacing: normal; }
   h4 { letter-spacing: normal; }
   h5 { letter-spacing: normal; }
   h6 { letter-spacing: normal; }

   /* ================================================================================ */

   /* Video Motion Background 2020 / Inicio do CSS de Background Video */
   /* CSS - Style the video: 100% width and height to cover the entire window */
   /* Controle de Volume / Som dos Videos */

   video, .motion { width: 350px; height: 350px; }

   video, .motion-volume { width: 0.5; }

   video, .motion-background { background: url('motion/Clouds_5.mp4');
                              width: 100%;
                              height: auto;
                              top: 0;
                              bottom: 0;
                              left: 0;
                              right: 0;
                              border: 0px solid #aaa;
                              margin: 0 0 0 0;
                              padding: auto;
                              background-repeat: no-repeat;
                              background-origin: content-box;
                              background-size: cover;
                              position: relative;
                              }

   /* ======================================================================== */
   /* Rede Social / Social Media Facebook 
            color: #005aff;
            azul medio color: #e3f2fd;
            azul claro color: #C6E9FF;
            azul claro color: #3B5998;
            azul-escuro color: #55ACEE;
   */

   .redesocial  li {  background-color: transparent;
                           color: darkblue;
                           border: 0px solid #aaa;
                           margin: 0 0 0 0;
                           padding: 0 0 0 0;
                           display: inline;
                           line-height: 1.5;
                           letter-spacing: small;
                           word-spacing: small;
                           white-space: small;
                           text-decoration: none;
                           list-style: none;
                           list-style-type: none;
                           text-align: center;
                           justify-content: center;
                           align-content: center;
                           align-self: center;
                           position: relative;
                           }

   .redesocial  a { display: inline !important;
                     justify-content: center;
                     align-items: center;
                     width: 25px;
                     height: 25px;
                     border-radius: 50%;
                     background-color: transparent;
                     color: #005aff;
                     font-size: 1.2rem;
                     transition: all 0.3s ease;
                     color: var(--primary-color);
                     text-decoration: none;
                     }

   .redesocial  a:hover { display: inline !important;
                           background-color: transparent;
                           color: var(--accent-color);
                           transform: translateY(-3px);
                           }

   /* Style facebok with font awesome icons */
    .redesocial .fa, .fas, .far, .fa-solid, .fa-brand { background-color: transparent; /* #C6E9FF; */
                                                        color: #005aff; }


   /* ================================================================================================= */

   .verde { background-color: #DBF9DB; color: darkgreen; 
            margin: 0 0 0 0; padding: auto; 
            display: inline; gap: 10px; 
            }

   .azul {  background-color: #C6E9FF; color: darkblue; 
            margin: 0 0 0 0; padding: auto; 
            display: inline; gap: 10px; 
            }

   .rosa {  background-color: #ffe4e1; color: darkviolet; 
            margin: 0 0 0 0; padding: auto; 
            display: inline; gap: 10px; 
            }        
  
   /* =========================================================================================== */
   /* Wrapper / Centering the page */

   .wrapper {  margin: 0 0 0 0;
               padding: 1% 1% 1% 1%;
               max-width: 100%;
               min-width: 20%;
               max-height: 100%;
               min-height: 20%;
               background: rgb(5, 68, 104);
               color: whitesmoke;
               position: fixed;
               top: 0;
               left: 0;
               transition: all 0.5s ease;
               }

    /* ========================================================================================== */

    .all-browsers, .browser { background-color: lightgray; 
                            margin: 0 0 0 0;
                            padding: 9px 9px 9px 9px;
                            }

   /* =========================================================================================== */
   /* LINKS / Remover os marcadores, as margens e o preenchimento da lista */

   /* :link = unvisited link */
   a:link { color: green; text-decoration: none;}

   /* mouse over link */
   a:hover { color: hotpink; text-decoration: none;}

   /* selected link */
   a:active { color: blue; text-decoration: none;}

   /* :visited = visited link */
   a:visited { color: purple; text-decoration: none; }

   /* :hover = mouse over link / The :hover selector is 
   used to select elements when you mouse over them. */
   a:hover { background-color: #D6EFFF; color: red; font-size: normal; text-decoration: none; }

 
/* ============================================================================================== */                         

    @import url("../css/media_screen2026.css");