/* CSS Folha de Estilo */

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

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

/* Import CSS Libraries */
   @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css");
   @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
   @import url("https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js");
   @import url("https://code.jquery.com/jquery-3.7.1.js"); 

/* =============================================================== */
/* HTML5 Cores padrão = https://html-color.codes/  */
/* Cores Padrão HTML5 e CSS3 / Set a specific color for each brand */

/*
	color: white;   = branco
	color: #ffffff; = branco

	color: #ffdead; = navajo 
   color: yellow; = amarelo 
	color: gold;   = 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: #DBF9DB = Light Rose 		 
	color: violet;
	color: purple;
    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: #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;  = conza 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: #474A51=cinza muito escuro
   
    color: black; = preto
	color: #000000; = preto	 	 
*/

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

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

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

.html { background: linear-gradient(to right, #c71585, #005aff, #6351ce); 
       color: #fff; 
       font-size: normal;
       font-family: Georgia, 'Times New Roman', Times, serif;
       font-size: normal;
       font-style: normal;
       font-variant: normal;
       font-weight: bold;
       text-align: justify;
       /* recuo de texto */
       text-indent: normal;
       /* altura da linha */
       line-height: normal;
       /* espaçamento entre letras */
       letter-spacing: normal;
       /* espaçamento entre palavras */
       word-spacing: normal;
       /* quebra de linha automatica */
       word-wrap: normal;
       /* espaços em branco */
       white-space: normal;
       /* espaçamento entre linhas e colunas */
       text-decoration: none;
       text-align: justify;
       justify-content: center;
       align-content: center;
       align-items: center;  
       width: 100%; 
       height: 100%;
       margin: 0 0 0 0; 
       padding: 0 0 0 0;
       border: 0;
       top: 0;
       bottom: 0;
       right: 0;
       left: 0;
       }


.body {
   background-color: floralwhite;
   color: #000;
   border: 2px solid salmon;
   display: inline;
   position: relative;
   max-width: 80%;
   min-width: 50%;
   height: auto;
   margin: auto auto auto auto;
   padding: auto auto auto auto;
   text-align: justify;
   text-decoration: none;
   text-align: justify;
   justify-content: center;
   align-content: center;
   align-items: center;
   text-decoration: none;
}

.section { background-color:  blanchedalmond;
         color: #005aff;
         max-width: 90%;
         min-width: 50%;
         height: auto;
         margin: 0 0 0 0;
         padding: 0 0 0 0;
         display: inline;
         position: relative;
         border: 0;
         gap: 10px;
      }


.header { background-color: #fffddd;
         color: #000;
         width: 100%;
         height: 100%;
         margin: 0 0 0 0;
         padding: 0 0 0 0;
}


.main {
   background: blanchedalmond;
   color: #000;
   border: 2px solid gold;
   max-width: 90%; 
   min-width: 50%;
   height: auto;
   margin: auto auto auto auto;
   padding: 15px 15px 15px 15px;
   text-align: justify;
   align-content: center; 
   align-items: none;
   align-self: none;
   list-style: none;
   text-decoration: none;
   position: relative;
   float: none;
   text-align: justify;
   justify-content: center;
   align-content: center;
   align-items: center;
   text-decoration: none;
}
   
.verde {
   background-color: #DBF9DB;
   color: darkgreen;
}

.azul {
   background-color: #C6E9FF;
   color: darkblue;
}


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

.container {
   margin: 0 0 0 0;
   padding-left: auto auto auto auto;
   text-align: justify;
   justify-content: center;
   align-content: center;
   align-items: center;
   text-align: justify;
   text-decoration: none;
}


.flex {
   display: flex;
   flex: wrap;
   float: right;
   align-content: center;
   text-align: justify;
   margin: 0 0 0 0;
   padding: 15px 15px 15px 15px;
   background-color: transparent;
   display: flex;
   border: 1px solid silver;
   position: relative;
   flex-basis: auto;
   flex-direction: row;
   flex-flow: row;
   flex-wrap: wrap;
   /* wrap / nowrap */
   justify-content: flex-start;
   text-decoration: none;
   gap: 20px;
   /* GAP Espaço entre linhas e colunas */
   align-items: flex-start;
   align-content: center;
   inline-size: 100%;
   text-decoration: none;
}

.grid {
   display: grid;
   gap: 10px;
   align-content: center;
   text-align: justify;
   margin: 0 0 0 0;
   padding: 15px 15px 15px 15px;
   grid-template-columns: repeat (auto-fill, minmax(250px, 1fr));
   background-color: transparent;
   /* Nomeie todos os itens e crie um modelo de página da Web pronto para uso: */
   /* inline / inline-grid */
   position: grid;
   text-decoration: none;
   gap: 10px;
   /* GAP espaço intervalo entre linhas */
   grid: auto;
   justify-content: grid-start;
   align-items: grid-start;
   align-content: space-around;
   /* grid-template Especifica o conteúdo do template */
   /* 3 colunas automaticas */
   /* min-content: 100px; max-content: 500px;  */
   /* grid-row = Faça com que "item1" comece na linha 1 e se estenda por 2 linhas: */
   grid-area: grid-row-start;
   grid-template-rows: auto;
   /* Especifica o tamanho da linha (altura) */
   grid-auto-rows: auto;
   flex-basis: grid-column;
   grid-auto-flow: column;
   grid-template-columns: repeat (auto-fill, minmax(150px, 1fr));
   grid-column-start: navbar;
   grid-column-end: footer;
   grid-auto-columns: auto;
   text-decoration: none;
}

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


.curriculo {
   background: #fff;
   color: #000;
   border: 1px solid #aaa;
   margin: 0 0 0 0;
   width: auto;
   height: auto;
   gap: 10px;
   margin: 0 0 0 0;
   padding-left: 5%;
   padding-right: 5%;
   padding-top: 1%;
   padding-bottom: 1%;
   max-width: 1024px;
   min-width: 450px;
   display: inline-block;
   position: left;
   text-align: justify;
   align-content: none;
   align-items: none;
   justify-content: none;
   text-decoration: none;
}

.logo {
   font-size: 1.5rem;
   font-weight: bold;
   color: #C6E9FF;
}

.article {
   background-color: #DBF9DB;
   color: #444;
   margin: 0 0 0 0;
   padding-left: 5%;
   padding-right: 5%;
   padding-top: 1%;
   padding-bottom: 1%;
   border: 0;
   font-size: normal;
   font-family: Tahoma, Verdana, sans-serif;
   text-align: justify;
   justify-content: left;
   align-content: left;
   align-items: left;
   text-decoration: none;
}

.blockquote {
   background-color: #C6E9FF;
   color: #005aff;
   margin: 0 0 0 0;
   padding-left: 5%;
   padding-right: 5%;
   padding-top: 1%;
   padding-bottom: 1%;
   border: 0;
   font-size: normal;
   font-family: Tahoma, Verdana, sans-serif;
   text-align: justify;
   justify-content: left;
   align-content: left;
   align-items: left;
   text-decoration: none;
}

/* ================================================================================ */
/* Typography */


.p {
   background-color: #fffddd;
   color: #000;
   margin: 0 0 0 0;
   padding-left: 8%;
   padding-right: 8%;
   padding-top: 0px;
   padding-bottom: 1%;
   border: 0;
   text-align: justify;
   text-decoration: none;
   text-align: justify;
   justify-content: center;
   align-content: center;
   align-items: center;
   text-decoration: none;
}


.h1, .h2, .h3, .h4, .h5, .h6 {
   background-color: #C6E9FF;
   color: #005aff;
   font-size: 4.5rem;
   margin: 0 0 0 0;
   padding: 9% 9% 9% 9%;
   text-align: center;
   text-align: justify;
   justify-content: center;
   align-content: center;
   align-items: center;
   text-decoration: none;
}


/* BOX - Adiciona preenchimento e borda no box */
.box {
   box-sizing: border-box;
}

.span {
   color: darkblue;
   text-align: justify;
   justify-content: center;
   align-content: center;
   align-items: center;
   text-decoration: none;
}



/* ======================================================================= */
/* CSS Shadow Box */
/* Here's a very interesting note displayed in a lovely shadowed box. */

.shadowbox {
   width: 15em;
   border: 1px solid #333;
   box-shadow: 8px 8px 5px #444;
   padding: 8px 12px;
   background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}


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

/* 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-url {
   background-image: url("");
   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;
   border: 0px solid #aaa;
   align-content: center;
   max-width: max-content;
   min-width: min-content;
   max-height: max-content;
   min-height: min-content;
   /* Full height=100%  */
}


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

/* 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 */

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

.motion-audio-volume {
   width: 0.5;
}

.motion-video-background {
   background: url('motion/Clouds_5.mp4');
   width: 100%;
   height: auto;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   border: 0px;
   margin: 0;
   padding: 0;
   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;
   */

.social-links {
   font-family: Arial, Helvetica, sans-serif;
   font-size: normal;
   background-color: transparent;
   color: darkblue;
   border: 0px solid #aaa;
   margin: 0 0 0 0;
   padding: auto auto auto auto;
   display: inline;
   line-height: 1.5;
   letter-spacing: small;
   width: 100%;
   height: auto;
   word-spacing: small;
   white-space: normal;
   text-decoration: none;
   list-style: none;
   list-style-type: none;
   text-align: center;
   align-content: center;
   align-self: center;
   position: relative;
}

.social-links 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;
}

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


.fa,
.fa-brand {
   background-color: transparent;
   /* #C6E9FF; */
   color: #005aff;
   border: 0px solid #aaa;
   display: inline !important;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   gap: 10px;
   width: 25px;
   position: relative;
   text-align: justify;
   align-content: left;
   align-items: left;
   align-self: left;
   text-decoration: none;
   text-decoration-style: none;
}


/* Style facebok with font awesome icons */
.fa-2x .fa-fw {
   background-color: transparent;
   /* #C6E9FF; */
   display: inline !important;
   /* posição hotizontal */
   width: 100%;
   line-height: 1.123456789;
   letter-spacing: normal;
   word-spacing: normal;
   background-color: transparent;
   color: #005aff;
}

/* ================================================================================ */
/* CSS Figure Imagem Circle */
/*  Image Responsive / Web Design images resize the browser windows 
/*  to see how the image scales to fit the page.  */

.figure {
   margin: 0 0 0 0;
   padding: 5%;
   width: 350px;
   height: 350px;
   align-content: left;
   list-style-image: none;
   border: 0;
}

.figcaption {
   background-color: #ffffff;
   color: darkblue;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   display: inline-flex;
   position: relative;
   text-align: justify;
   border: 0;
}

.img {
   width: 250px;
   height: 250px;
   margin: 0 0 0 0;
   padding: 5%;
}

.image-flex {
   display: flex;
}

.image-grid {
   display: grid;
}

.image-responsive a {
   display: block;
   width: 250px;
   height: 250px;
   position: relative;
   margin: 0 0 0 0;
   padding: auto;
   gap: 10px;
}


/* Adiciona um reflexo na imagem */
.image-reflect {
   -webkit-image-reflect: below 10px;
}


/* Adiciona uma sombra na imagem */
.image-shadow {
   box-shadow: 5px 10px #888888;
}


/* Circulo */
.img-circle {
   background-color: blue;
   width: 100%;
   height: 100%;
   border: 5px;
   border-radius: 50% !important
      /* Torna a borda redonda */
   ;
   align-content: center;
   width: 250px;
   height: auto;
}


/* Add a hover effect if you want */
.img-circle:hover {
   opacity: 0.7;
}

/* ======================================================================== */
/* CSS Button Dropdown */
/* <button class="dropbtn"> */
/* Style The Dropdown Button */

.button, .btn {
   list-style: none;
   cursor: default;
   font-size: normal;
   width: auto;
   border: 0;
   margin: 0 0 0 0;
   padding: 10 10 10 10;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   display: flex;
   gap: 10px;
}


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

/* UL LISTA DESORDENADA / OL LISTA NUMERADA */

/* Barra de navegação vertical CSS */
/* Para construir uma barra de navegação vertical, pode estilizar os elementos <a> dentro da lista */
/* display: block;- A exibição dos links como elementos de bloco torna toda a área do link clicável 
	   e permite especificar a largura (e preenchimento, margem, altura, etc se desejar) */

/* Queremos especificar uma largura de 60 pixels = width: 60px; 
	   Os elementos do bloco ocupam a largura total disponível por padrão. 
	   Você também pode definir a largura de <ul> e remover a largura de <a>, 
	   pois eles ocuparão toda a largura disponível quando exibidos como 
	   elementos de bloco. */

/* remove the bullets and the margins and padding from the list */
/* Add a gray right border to all list items */
/* Style the links inside the navigation bar */

/* Menu posição horizontal / Fazendo ficar posição horizontal */
/* Barra de navegaçao horizontal / display: inline-block; */
/* Barra de navegação vertical CSS = li a {display: block;} */
/* Style the links inside the navigation bar */

/* LISTA NUMERADA ORDENADA ALFABÉTICA */
.ol .li {
   position: relative;
   font-size: normal;
   color: black;
   display: block;
   text-decoration: none;
   font-weight: bold;
   border: 0;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
}


/* LISTA NÃO ORDENADA */
.ul .li {
   position: relative;
   font-size: normal;
   color: black;
   display: block;
   text-decoration: none;
   font-weight: bold;
   border: 0;
   margin: 0 0 0 0;
   padding: 10 10 10 10;
   text-decoration: none;
}


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

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


/* :visited = visited link */
.a:visited {
   color: purple;
   font-size: normal;
   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;
}


/* :active = selected link */
.a:active {
   color: blue;
   font-size: normal;
   text-decoration: none;
}



/* ============================================================================================= */
/* CSS do Carousel / Banner de imagens */
/* Style The Carousel / Use CSS to style the carousel: */
/* Set width to 100% / Banners = width: 500px; height: 250px; */
/* Hide the carousel text when the screen is less than 600 pixels wide */
/*color #ffffff branco */

.carousel-caption {
   display: none;
   color: #ffffff !important;
   width: 100%;
   height: auto;
}

.carousel-inner .img {
   -webkit-filter: grayscale(0%);
   opacity: 0;
   margin: 0 0 0 0;
   padding: 10 10 10 10;
   align-content: center;
   filter: grayscale(0%);
   /* make all photos black and white */
   width: 100%;
   /* Set width to 100% / 500px; */
   height: auto;
   /* Set width to 100% / auto / height: 250px; */
}

.carousel-control.right,
.carousel-control.left {
   background-image: none;
   color: #f4511e;
}

.carousel-indicators .li {
   border-color: #f4511e;
}

.carousel-indicators .li:active {
   background-color: #f4511e;
}



.SCROLLBAR {
   SCROLLBAR-FACE-COLOR: #ededed;
   SCROLLBAR-HIGHLIGHT-COLOR: #999999;
   CURSOR: default;
   SCROLLBAR-SHADOW-COLOR: #4b4b4b;
   SCROLLBAR-3DLIGHT-COLOR: #666666;
   SCROLLBAR-ARROW-COLOR: #3333ff;
   SCROLLBAR-TRACK-COLOR: #ffffff;
   SCROLLBAR-DARKSHADOW-COLOR: #000000;
   SCROLLBAR-BASE-COLOR: #789789
}

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

   @import url("assets/css/menu2026.css");
   @import url("assets/css/footer2026.css");

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