/* 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; color: #333; }
    
 
    /* Cores HTML CSS ================================ 
    color: #f4511e;  Orange / laranja abobora escuro 
    color: #9F00FF;  violeta médio royal  
    color: #c71585;  rosa médio royal   
    color: #005aff;  azul royal          
    color: #3B5998;  azul-escuro         
    color: #55ACEE;  azul-claro          
    color: #4CAF50;  verde medio
    color: #ffffff;  cinza prata claro   
    color: #f1f1f1;  cinza muito claro   
    color: #303030;  cinza muito escuro  
    color: #777777;  cinza médio     
    color: #818181;  cinza claro         
    color: #fffddd cor amarelo claro 
    color: #f4511e = laranja escuro 
    color: #9F00FF = violeta royal 
    color: #6351ce = violeta médio
    color: #c71585 = rosa médio royal 		 
    color: #fff000 = amarelo claro
    color: #ffffff = branco escuro 
    color: #007bff = azul claro
    color: #005aff = azul royal 
    color: #120a8f = azul escuro 
    color: #4CAF50 = verde 
    color: #90ee90 = verde claro
    color: #7fffd4 = verde água (aquamarine)
    color: #D6EFFF = azul muito claro 
    color: #e3f2fd = branco azulado
    color: #C6E9FF = azul claro 
    color: #6D6D6D = cinza escuro 
    color: #474A51 = cinza muito escuro 		 
	HTML/CSS cores padrão */
    
/* =============================================================================================== */

    * { margin: 0 0 0 0; padding: 0 0 0 0; 
        top: 0; left: 0; right: 0; bottom: 0; 
        border: 0; box-sizing: border-box;
        list-style-type: none;
        text-decoration: none;
       }

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

    /* usar o grid large = 992px = col-lg-auto / font-zize: medium */
    /* Grid 992px / media screen / versão notebook de 15 polegadas */
    /* Grid 1200px / media screen / versão computador / monitor 29 polegadas */
    /* usar o grid extra-large = 1140px = col-xl-auto */
    /* Device-height = Descreve a altura do dispositivo de saída( ou seja, toda a tela ou página, em vez 
       de apenas a área de renderização, tal como a janela do documento). */
    /* Device-width = Descreve a largura do dispositivo e saída (ou seja, toda a tela ou página, em vez 
       de apenas a área de renderização, tal como a janela do documento). */

    html { margin: 0 0 0 0; 
           padding: auto auto auto auto; 
            box-sizing :border-box;
           -ms-text-size-adjust: 100%;
           -webkit-text-size-adjust: 100%;
           font-family: Verdana, sans-serif;
           width: 100%;
           font-size: small; 
           line-height: 1.5;
           overflow-x: hidden;
           }

    body { background-color: linear-gradient(to right, #6351ce, #005aff, #120a8f); 
            font-family: 'Arial, Helvetica, Sans Serif';
            font-size: medium; 
            color: #ffffff; 
            margin: 0 0 0 0; 
            padding: auto auto auto auto; 
            width: 80%;  
            display: inline-block; 
            position: absolute;
            }

    *:before, *:after { box-sizing: inherit }

    header { width: 1000px; height: auto; margin: 0px auto; }

    img { margin: auto auto auto auto; padding: auto auto auto auto; min-width: 300px; max-width: 100%; height: auto; }

    iframe { margin: auto auto auto auto; padding: auto auto auto auto; width: 100%; min-width: 300px; height: 300px; }

    /* remover os marcadores, as margens e o preenchimento da lista */
    div ul { list-style-type: none; margin: 0; padding: 0;}
        

    p { line-height: 1.5; }

    section , main {background-color: #ffffff; color: darkblue; font-size: medium; }

    div {  background-color: #ffffff; color: darkblue; 
            font-size: noral;
            margin: 20px auto;
            padding: 20px auto;
            width: 100%;
            height: auto;
            border: 1px solid #aaa;
            resize: vertical;
            overflow: auto;
            }

    
    .flex-container {   flex-direction: column; 
                        display: flex; 
                        position: flex; 
                        flex-wrap: wrap; /* wrap / nowrap */
                        justify-content: flex-start;
                        align-items: flex-start;
                        align-content: space-around;
                    }	
    
    .grid-container { display: inline-grid; /* inline / inline-grid */
                      grid-template-columns: auto auto auto auto;
                    }

    .box { box-sizing: border-box; 
           -moz-box-sizing: border-box; 
         }


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

    /* CSS / Background */
    .background { background-color: linear-gradient(to right, #6351ce, #005aff, #120a8f); 
                  /* background-image: url("assets/gif/star.gif"); */
                  background-repeat: no-repeat; 
				  background-size: cover; 
                  min-width:20%; 
                  max-width: 100%; 
                  height: auto; 
                  border: 0px; 
                }


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

    /* CSS / Image Responsive */ 
	img {  position: relative; 
            image-orientation: from-image; 
            z-index: auto; 
            display: inline-block;
            margin: 0 auto;
            max-width: 100%;
            text-align: center; 
          }

    figure { margin: 0px auto; 
              padding: 9% auto; 
              border: 0px solid #aaa;
              text-align: center; 
              position: relative;  
              z-index: auto; 
            }

    figcaption { background-color: #e3f2fd;
                  color: darkblue;
                  font-style: italic;
                  margin:auto;
                  padding: auto;
                  top: 29px;
                  bottom: 29px;
                  left: 29px;
                  right: 29px;
                  text-align: justify;
                  /* border: 1px #cccccc solid; */
                }

/* =============================================================================================== */
	
    /* Recomendamos que todas as imagens tenham um max-width de 100%, 
    que encolhe as imagens para caber no espaço disponível, impedindo
    que elas se estiquem além do tamanho inicial. */
    image, img, .thumbnail { min-width: 50%; max-width: 100%; 
        height: auto; display: block; margin: 0px; padding: 0px; 
        border: none; clear: left; float: left; }

    video, .motion { 
        min-width: 30%; width: 100%; max-width: 100% 100%; }

    h3 .jumbotron { background-color: darkorange; color: azure; 
                 margin: 0 0 0 0; padding: 29px 29px 29px 29px; }

    /* =============================================================================================== */
    
    /* Style The Navbar / Use CSS to customize the navigation bar: */
    /* Add a dark background color with a little bit see-through */
    nav { background-color: #fefefe; 
           color: black; 
           width: 100%; 
           height: 100%; 
           text-decoration: none; 
           size: 18px;
           border: 1px solid #555; 
           text-align: center; 
           position: absolute; 
           margin: 0 0 0 0; 
           padding: auto auto auto auto; 
           line-height: 1.5em; 
           display: inline-block; 
           list-style-type: none; 
           }
    
    .navbar { line-height: normal; 
              letter-spacing: normal; 
              align-content: right; 
              size: 18px;
              word-spacing: normal; 
              display: inline; 
              position: absolute; 
              list-style-type: none; 
              text-decoration: none; 
              text-align: justify; 
              }

    /* Add a gray color to all navbar links */
    .navbar li a, .navbar-brand { color: gray !important; }

    /* On hover, the links will turn blue */
    .navbar-nav li a:hover { color: blue !important; }

    /* The active link */
    .navbar-nav li a:active { color: #ffffff !important; background-color: #29292c !important; }

    /* Remove border color from the collapsible button */
    .navbar-default, .navbar-toggle {border-color: transparent;}
    
    /* Dropdown */
    .dropdown-toggle { color: #555555; background-color: #ffffff !important; }

    /* Dropdown links */
    .dropdown-menu li a {color: #000000 !important; }

    /* On hover, the dropdown links will turn red */
    .dropdown-menu li a:hover {background-color: #e5e5e5 !important;}

    .a {color: darkblue; text-decoration: none; list-style: none;}

    /* unvisited link */
    a.link {color: blue; text-decoration: none; list-style: none;}

    /* visited link */
    a.visited { color: green; text-decoration: none; list-style: none; }

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

    /* selected link */
    a.active { color: darkred; text-decoration: red; list-style: none; }

    /* Para criar um menu em HTML que permite desviar para diferentes 
    seções da mesma página, você pode usar âncoras. */
    nav ul { list-style-type: none; margin:0; padding: 0; }
    nav ul li { display: default; margin-right: 10px; }
    ul li a { display: inline; text-decoration: none; }
    ul li a.active { font-weight: bold; color: red; }

/* =============================================================================================== */
      
      /* celular de 5 polegadas até 6 polegadas */
      @media screen and (min-width: 576px) and (max-width: 767px) {
      html, body { background-color: beige; color: darkblue; 
              font-family: Georgia, 'Times New Roman', Times, serif;
              font-size: normal;
              }
      }
      
      /* tablet de 7 polegadas até 11 polegadas */
      @media screen and (min-width: 768px) and (max-width: 991px) {
      html, body { background-color: beige; color: darkblue; 
              font-family: Georgia, 'Times New Roman', Times, serif;
              font-size: normal;
              }
      }
      
      /* notebook 12 polegadas até 17 polegadas */
      @media screen and (min-width: 992px) and (max-width: 1199px) {
      html, body { background-color: beige; color: darkblue; 
              font-family: Georgia, 'Times New Roman', Times, serif;
              font-size: medium;
              }
      }

      /* desktop com monitor de 22 polegadas até 29 polegadas */
      @media screen and (min-width: 1200px) and (max-width: 1399px) {
      html, body { background-color: beige; color: darkblue; 
                font-family: Georgia, 'Times New Roman', Times, serif;
                font-size: large;
                }
        }

      /* desktop com monitor de 29 polegadas até 32 polegadas */
      @media screen and (min-width: 1400px) and (max-width: 100%) {
      html, body { background-color: beige; color: darkblue; 
                font-family: Georgia, 'Times New Roman', Times, serif;
                font-size: large;
                }
        }
  
 
/* =============================================================================================== */