/* Flex_SixSigmatas.CSS */
    *{
        margin:0px;
        padding:0px;
        box-sizing:border-box;
    }

    body{
        font-family: 'Roboto', sans-serif;
        background-color:lightblue;
        margin:auto;
        max-width:60em;
        min-width:280px;
        width:98%;
    }

/* Insere padding entre o ícone Awesome e o texto */
    i.fas{
        padding: 8px 16px 8px 4px;
        }

/* #logo */
    #logo{
        border:1px solid black;
        /*border-radius:10px;*/
        background-color: rgb(25, 75, 25);
        font-family: 'Raleway', sans-serif;
        font-weight: 400;
        font-size:1.0em;
        text-shadow: 2px 2px 0 #444;
    }

    #logo:hover{
        background-color:black;
        transition: background 0.4s;
    }

/* .iconTxtButton */    
    .iconTxtButton {
        display: flex;
        align-items: center;
        justify-content: center;
        height:48px;
        color:white;
        font-size:1.2em;
        font-weight: 400;
        font-size:1.2em;
        text-shadow: 2px 2px 0 #444;
        padding-left:16px;
        padding-right: 16px;
        text-decoration:none;
    }

/* #togleIcons */    
    #togleIcons{
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        height:48px;
        /*height:36px;*/
        border:none;
        background-color:blue;
        margin:0 0 0 auto;
        cursor: pointer;
    }

/* hamburguer */
    .iHamb{
        width: 50px;
        height:28px;
        margin-right: 20px;
    }
    #Xburger{
        display:none;
    }
    .iconTxtBtn{font-family: 'Raleway', sans-serif !important;}

/* #iconLinks */
    #iconLinks{
        display:flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        flex-basis: 100%;
        margin:0;
        padding:0;
        top: 0;
    }
    #iconLinks a{
        color:white;
        background:transparent;
        height: 48px;
        font-weight: bolder;
        display:flex;
        align-items: center;
        justify-content: center;
        padding:10px;
    }
    #iconLinks a:hover{
        /*background:rgb(44, 148, 44);*/
        transform: translate(5px,5px);
        color:yellow;
        transition: background 0.4s;
        transition: color 0.2s;
    }
    #iconLinks ul{
        list-style:none;
        display:flex;
    }
    #iconLinks li:hover{
        /*background: #d1d36c;*/
        color:black;
        transition: background 0.4s;
        transition: color 0.2s;
    }

/* .iconBtn */
    .iconBtn{
        font-size:1.2em;
        color:white;
        outline-style:none;
    }

/* #textLinks */
    #textLinks{
        display:flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        flex-basis: 100%;
        margin:0;
        padding:0;
        top: 0;
    }
    #textLinks a{
        color:white;
        background:transparent;
        height:48px;
        font-weight: bolder;
        display:flex;
        align-items: center;
        justify-content: center;
        padding:0 25px 0 25px;
        transition: background 0.4s;
        transition: color 0.2s;
    }
    #textLinks a:hover{
        transform: translate(5px,5px);
        transition: background 0.4s;
        transition: color 0.2s;
    }
    #textLinks ul {
        list-style: none; /* elimina os bullets */
        display:flex;     /* adota flex e coloca na horizontal */
    }
    #textLinks li:hover{
        display:flex;  /* testar com display flex */
        flex-direction:column;
        top: 0;
    }

/* .textBtn */
    .textBtn{
        height:48px;
        font-size:1.1em;
        color:white;
        outline-style:none;
    }
    
/* #avatar */
    #avatar{
        display:flex;
        align-items: center;
        background-color:blue;
        margin-right: 10px;
    }
    .me, .me2{
        width: 48px;
        height:48px;
        margin-left:15px;
        margin-right:15px;
        cursor: pointer;
    }

    .me2{
        width:36px;
        height:36px;
    }
    
    #avatar:hover{background-color:black;}
   

/* #dropDownMenu */
    #dropDownMenu{
        margin:5px;
        background-color: #3a4b53;
        flex-basis: 100%;
    }

/* #hamDdown */
    #hamDdown a{
        color:white;
        background:green;
        height: 36px;
        border:1px solid white;
        font-weight: bolder;
        display:flex;
        align-items: center;
        justify-content: flex-start;
        padding:15px;
        transition: background 0.4s;
        transition: color 0.2s;
        text-decoration: none;
    }
    #hamDdown a:hover{
        background: #97aaa8;
        color:black;
    }
    #hamDdown ul {
        list-style: none; /* elimina os bullets */
        display:flex;     /* adota flex e coloca na horizontal */
        flex-direction: column;
    }
    #hamDdown li:hover .hamDdownL2 > li {
        display:flex;  /* testar com display flex */
        flex-direction: column;
        top: 0;
    }
    #hamDdown li:hover{
        background: #d1d36c;
        color:black;
    }

    .hidden {
        display:none;
    }
    .show {
        display:flex;
        flex-direction: column;
    }
/* nav */
    nav{
        display:flex;
        justify-content: center;
        align-items: center;
        background-image:linear-gradient(to right,green,green,blue,blue);
        /*flex-basis: 100%;*/
        /*border-radius:10px;*/
    }

/* main */
    main{
        align-items: flex-start;
        justify-content: space-evenly;
        border:1px solid white;
        border-radius:10px;
        width:100%;
    }
    main_unic{
        align-items: flex-start;
        justify-content:left;
        border:1px solid white;
        border-radius:10px;
        width:100%;
    }

/* #mainColumn*/
    #mainColumn{
        padding:5px;
        margin:5px;
        border:1px solid white;
        border-radius:10px;
        background-color:wheat;
        box-shadow: 2px 4px 4px springgreen;
    }

    #unicColumn{
        padding:5px;
        margin:5px;
        border:1px solid white;
        border-radius:10px;
        background-color:wheat;
        width: 80%;
        box-shadow: 2px 4px 4px springgreen;
    }

    #unicColumn_cheia{
        padding:5px;
        margin:5px;
        border:1px solid white;
        border-radius:10px;
        background-color:wheat;
        width: 100%;
        box-shadow: 2px 4px 4px springgreen;
    }


/* #rightColumn */
    #leftColumn{
        display:flex;
        padding:5px;
        border:1px solid white;
        border-radius:10px;
        background-color:peachpuff;
        flex-basis:30%;
        box-shadow: 2px 4px 4px springgreen;
    } 

    
/* footer */
footer{
    display:flex;
    flex-direction: row;
    align-items: center;
    color:white;
    font-size:0.8em;
    display:flex;
    box-shadow: 2px 4px 4px springgreen;
    padding:0 16px 0 16px;
    background-color:green;
    border-radius:5px;
    margin:8px 0 0 0;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    width:100%;
}       

/* Elementos */

    .ftable{
        display:flex;
        flex-direction: column;
        align-items: center;
        width:98%;
        font-family: 'Raleway', sans-serif;
        font-size:1.1em;
        font-weight: bolder;
        font-style:italic;
        border-collapse: collapse;
    }

    .ftableInside{
        display:flex;
        flex-direction: column;
        align-items: flex-start;
        width:98%;
        font-family: 'Raleway', sans-serif;
        font-size:1.0em;
        font-weight: bolder;
        font-style:italic;
        border-collapse: collapse;
        margin-left: 2em;
    }

    .ftableInside ul{list-style-position: inside;}

    .ftableInside ul li ul li{
        margin-left: 2.2em;
        align-items:flex-start;    
    }

    .ftableInside li{
        margin-right: 2.0em;
        align-items:flex-start;    
    }
    
    td, th{    
        border: 1px solid black;
        text-align: left;
        padding: 8px;
    }
    tr:nth-child(odd) {
        background-color: #bece7a;
    }
    tr:nth-child(even) {
        background-color: #9edfdf;
    }

    .figCentral{
        display:flex;
        width:70%;
        flex-direction: column;
        margin:auto;
        justify-content: center;
        padding:16px;
    }

    .figCentralMaior{
        display:flex;
        width:90%;
        flex-direction: column;
        margin:auto;
        justify-content: center;
        padding:16px;
    }



    

    /* =====================================================================*/
    /* Figura à esquerda e texto explicativo à direita  */
    /* Estrutura                                        */
    /*      <blocoPrincipal>                            */
    /*          figLeft                                 */
    /*          textRight                               */
    /*      </blocoPrincipal>                           */

    .blocoPrincipal{
        display: flex;

        /* acrescentado : (07/02/23) */
        flex-wrap: wrap;

        flex-direction: row;
        align-items: stretch;
        justify-content: space-evenly;
        /*border:1px solid white;*/
        border-radius:10px;
        font-size:1.0em;
        width:100%;
    }

    .figLeft{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        /*border:1px solid gray;*/
        padding:0.25em;
        width:50%;
    }

    .textRight{
        display:flex;
        flex-direction:column;
        justify-content:right;
        align-content: start;
        /*border:1px solid gray;*/
        padding:0.25em;
        width:50%;
    }
    


/* =====================================================================*/
/* =====================================================================*/
    /* Figura à direita e texto explicativo à esquerda  */
    /* Estrutura                                        */
    /*      <blocoPrincipal>                            */
    /*          textLeft                               */   
    /*          figRight                                */
    /*      </blocoPrincipal>                           */

    .figRight{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        /*border:1px solid gray;*/
        padding:0.25em;
        width:50%;
    }

    .textLeft{
        display:flex;
        flex-direction:column;
        align-content: start;
        /*Acrescentado: (07/02/23) */
        /*font-size: 1.3em;*/
        /*border:1px solid gray;*/
        padding:0.25em;
        width:50%;
    }

    .textInsideLeft{
        /* coloca uma caixa de texto dentro da outra, deslocada*/
        display:flex;
        flex-direction:column;
        align-content: start;
        /*font-size: 1.3em;*/
        /*border:1px solid gray;*/
        padding-left:2.0em;
        width:100%;
    }

    .textJustif{
        /* Usar quando a figura ocupar toda a largura da tela */
        display:flex;
        flex-direction:column;
        align-content: start;
        /*Acrescentado: (07/02/23) */
        /*font-size: 1.3em;*/
        border:1px solid gray;
        padding:0.25em;
        width:100%;
    }
   /* =====================================================================*/

    .twoColumns{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        padding:8px;
    }

    /* figuras responsivas */    
    .responsive{
        max-width:99%;
        max-height: 500px;
    }

    .responsive_center{
        display:block;
        margin-left: auto;
        margin-right: auto;
        max-width:99%;
        max-height: 500px;
    }

    ul.textExplanation, ol.textExplanation{
        text-decoration: none;
        padding: 2.0em; 
    }

    /* ul sem links */
    .UlNolink{
        font-size:1.2em;
        color:black;
        outline:none;
        text-indent: 2em;
        line-height: 1.5;
        list-style-position:inside;
    }

  
  
/* creative commons */
    .creativeTop{
        display:flex;
        align-items: center;
        justify-content: space-between;
        border-radius:5px;
        box-shadow: 2px 4px 4px springgreen;
        color:white;
        padding:10px;
        font-family: 'Raleway', sans-serif;
        font-weight: 400;

        /* Alterado o tamanho da fonte */
        /* ERA: font-size:0.5em; (07/02/23) */
        font-size:0.8em; 

        text-shadow: 2px 2px 0 #444;
        background-image:linear-gradient(to right,green,green,blue,blue);
        margin:0 0 4px 0;
        height: 48px;
    }
    .creativeContent{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        border-radius:5px;
        box-shadow: 2px 4px 4px springgreen;
        color:black;
        padding:10px;
        background-color:wheat;

        /* Alterado o tamanho da fonte */
        /* ERA: font-size:0.8em; (07/02/23)*/
        font-size:1.0em;
    }


/*  Textos   */
    h1{
        font-size: 2em;
        line-height: 2;    
    }
    h2 {
        font-size:1.8em;
        line-height: 1.8;
    }
    h3{
        font-size:1.6em;
        line-height:1.6;
    }
    h4{
        font-size:1.4em;
        line-height:1.6;
    }
    h5{
        font-size:1.2em;
        line-height:1.6;
    }
    p.medium25{
        font-size:1.1em;
        letter-spacing: 0.03em;
        line-height: 1.4;
        padding-left:1.3em;
        padding-right:1.5em;
        hyphens:auto;
        text-align:justify;
        margin-top:1.0em;
        margin-bottom:1.0em; 
    }

    p.medium25i25{
        font-size:1.1em;
        letter-spacing: 0.03em;
        line-height: 1.4;
        padding-left:2.5em;
        padding-right:1.5em;
        hyphens:auto;
        text-align:justify;
        margin-top:1.0em;
        margin-bottom:1.0em; 
    }

    .obs{
        color:black;
        font-size:1em;
        font-style:italic;
        hyphens:auto;
        text-align:justify;
        padding-left:1.3em;
        padding-right:2.0em;
    }

    .itemTit{
        font-size:1.0em;
        font-weight: bold;
        font-style: italic;
    }


    /* Estilos para recuos em parágrafos */    
    .m5{
        margin-left: 0.3125em;
    }
    
    .m10{
        margin-left:1em;
    }

    .m15{
        margin-left:1.5em;
    }

    .m20{
        margin-left:2.0em;
    }

    .m25{
        margin-left:2.5em;
    }

    .m30{
        margin-left:3.0em;
    }

    .txtObs{
        font-size:1.0em;
        font-weight: bolder;
        line-height: 1.5;
        margin:5px 5px 5px 1px;
        padding:8px 8px 8px 16px;
    }
   
    .link{
        font-size:1.2em;
        color:blue;
        font-style:italic;
        font-weight: normal;
        list-style-position: inside;
        outline:none;
        text-indent: 25px;
        line-height: 1.5;
    }

    .linkIndex{
        font-size:1.1em;
        color:blue;
        outline:none;
        text-indent: 16px;
        line-height: 1.5;
        list-style: none;
    }

    a:link{text-decoration: none;}
   

    .estrangeirismo{
        font-style:italic;
        font-weight: normal;
        color:black;
        text-shadow:1px 1px yellow;
    }
    .et{
        font-style:italic;
        font-weight:bolder;
        color:black;
        
    }
    .figText{
        font-style:italic;
        font-weight: bold;
        font-size:1.1em;
        text-align: center;
        padding-top:0.5em;
        padding-left:1.5em;
        padding-right:1.5em;
    }
    p.hifenado{
        hyphens:auto;
        text-align:justify;
        margin-top:16px;
        margin-bottom:16px
    }
    h3.indice{
        line-height:1.2
    }

    p.codeBlk{
        font-size:1.0em;
        font-weight: normal;
        line-height: 1.5;
        font-style: italic;
        margin:5px 5px 5px 1px;
        padding:8px 8px 8px 16px;
        color:black;
    }

    p.codeRed{
        font-size:1.0em;
        font-weight: bolder;
        line-height: 1.5;
        font-style: italic;
        margin:5px 5px 5px 1px;
        padding:8px 8px 8px 16px;
        color:red;
    }

    /* tela até 30em ~480 px */
    @media screen and (max-width:30em){ 
        /*footer{justify-content: space-between;}*/
        #togleIcons,main{display:flex;}
        #iconLinks, #textLinks,#avatar{display:none;}
        main{
            flex-direction: column;
        }
        *{font-size:0.95em;}
        #togleIcons,.textBtn,.me{width:24px;}
        #leftColumn{
            width:95%;
            padding:0.2em;
            margin:0.2em auto;
        }
        #mainColumn{
            width:95%;
            padding:0.2em;
            margin:0.2em auto;
        }
        .figCentral{width:100%;}
        div#mn01a, div#ft01a, div#cft01a {display:none;}
        div#mn01b, div#ft01b, div#cft01b {display:none;}
        div#mn01c, div#ft01c, div#cft01c {display:inline-block;}
        div#mn02a, div#ft02a, div#cft02a {display:none;}
        div#mn02b, div#ft02b, div#cft02b {display:inline-block;}
        div#mn03a, div#ft03a, div#cft03a {display:none;}
        div#mn03b, div#ft03b, div#dvt03b {display:inline-block;}
        div#mn04a {display:none;}
        div#mn04b {display:inline-block;}
        div#mn05a {display:none;}
        div#mn05b {display:inline-block;}
    }

    /* tela entre 30em (480px) e 48em(768px)*/ 
    @media screen and (min-width: 30.0em) and (max-width: 48em){

        footer{justify-content: space-between;}
        *{font-size:0.99em;}
        #iconLinks,.textBtn,.me{width:36px;}
        .me{height:36px;}
        #togleIcons,#dropDownMenu,#textLinks {display:none;}
        #icontLinks,#avatar {display:flex;}
        main{flex-direction: column;}

        #leftColumn{
            width:98%;
            padding:0.2em;
            margin:0.2em auto;
        }
        #mainColumn{
            width:98%;
            padding:0.2em;
            margin:0.2em auto;
        }

        .figCentral{width:80%;}
        div#mn01a, div#ft01a, div#cft01a {display:none;}
        div#mn01b, div#ft01b, div#cft01b {display:inline-block;}
        div#mn01c, div#ft01c, div#cft01c {display:none;}
        div#mn02a, div#ft02a, div#cft02a {display:inline-block;}
        div#mn02b, div#ft02b, div#cft02b {display:none;}
        div#mn03a, div#ft03a, div#cft03a {display:none;}
        div#mn03b, div#ft03b, div#dvt03b {display:inline-block;}
        div#mn04a  {display:none;}
        div#mn04b  {display:inline-block;}
        div#mn05a  {display:none;}
        div#mn05b  {display:inline-block;}
    }

    /* tela acima de 48em (768px) */
    @media screen and (min-width: 48em){  
        footer{justify-content: space-between;}    
        *{font-size:1.0em;}

        #textLinks,.me{width:36px;}

        .me{height: 36px;}

        #togleIcons,#dropDownMenu,#iconLinks{display:none;}

        #textLinks,#avatar,main{display:flex;}

        main{flex-direction: row;}

        .figCentral{width:70%;}

        div#mn01a, div#ft01a, div#cft01a {display:inline-block;}
        div#mn01b, div#ft01b, div#cft01b {display:none;}
        div#mn01c, div#ft01c, div#cft01c {display:none;}
        div#mn02a, div#ft02a, div#cft02a {display:inline-block;}
        div#mn02b, div#ft02b, div#cft02b {display:none;}
        div#mn03a, div#ft03a, div#cft03a {display:inline-block;}
        div#mn03b, div#ft03b, div#dvt03b {display:none;}
        div#mn04a {display:inline-block;}
        div#mn04b {display:none;}
        div#mn05a {display:inline-block;}
        div#mn05b {display:none;}
    }

    /* tela entre 48em (480px) e 55em(768px)*/ 
    @media screen and (min-width: 47.5em) and (max-width: 55em){
        footer{justify-content: space-between;}
        .itemTit{font-size:0.90em;}
        #leftColumn{margin:5px;flex-basis:35%;}
        #mainColumn{margin:5px;flex-basis:65%;}
    }

    @media screen and (min-width: 55em){
        #leftColumn{margin:5px;flex-basis:28%;}
        #mainColumn{margin:5px;flex-basis:68%;}
    }

    

    /* Acrescentado para apresentar código na tela */
        .codeWindow{
            max-height: 20em;
            max-width: 40em;
            margin:auto;
            line-height: 1.8;
            border:1px solid black;
            overflow: auto;
            overflow-x:scroll;
            background-color:black;
            color:rgb(109, 214, 130);
            font-family:'Courier New', Courier, monospace;
            font-size: 0.9em;
            text-decoration: none;
        }
        
        .codeTxt4{
            padding-left:0.5em;
        }
        
        .codeTxt8{
            padding-left:1.5em;
        }
        
        .codeTxt12{
            padding-left:2.0em;  
        }
        
        .codeTxt16{
            padding-left:2.5em;
        }

        .codeTxt20{
            padding-left:3.0em;
        }
        
    /* tela até 30em ~480 px */
    @media screen and (max-width:30em){
       .codeWindow{font-size:1em;} 
       .codeTxt4{padding-left:0.5em;}
       .codeTxt8{padding-left:1em;}
       .codeTxt12{padding-left:1.5em;}
       .codeTxt16{padding-left:2em;}
       .codeTxt20{padding-left:2.5em;}
     
       .twoColumns{flex-direction: column;}
       p.codeBlk{font-size: 1.25em;}
       p.medium25{font-size:1.25em;}
    }   

     /* tela entre 30.1em e 48em (480px e 768px) */
    @media screen and (min-width: 30.1em) and (max-width:48em){ 
        .codeWindow{font-size:1.em;} 
        .codeTxt4{padding-left:0.5em;}
        .codeTxt8{padding-left:1.25em;}
        .codeTxt12{padding-left:1.75em;}
        .codeTxt16{padding-left:2.25em;}
        .codeTxt20{padding-left:2.75em;}
    
        .twoColumns{flex-direction: row;}
        p.codeBlk{font-size: 1.0em;}
        p.medium25{font-size:1.0em;}
    }
    /* tela acima de 48em (768px) */
    @media screen and (min-width: 48em){ 
        .codeWindow{font-size:0.9em;} 
        .codeTxt4{padding-left:0.5em;}
        .codeTxt8{padding-left:1.5em;}
        .codeTxt12{padding-left:2.0em;}
        .codeTxt16{padding-left:2.5em;}
        .codeTxt20{padding-left:3.0em;}

        .twoColumns{flex-direction: row;}
        p.codeBlk{font-size: 1.0em;}
        p.medium25{font-size:1.0em;}
    }

    .btcp {
        display:flex;
        justify-content: center;
        padding-right:2em; 
    }

    /* Acrescentado divisões para texto no lado esquerdo e figura no lado direito */
    .twoColumns{
        display:flex;
        padding:0.25em;
        margin-left:1.5em;
        margin-right:1.5em;
       
    }

    .tCtext{
        padding: 1em 0.5em 1em 0.5em;
        display:flex;
        flex-direction: column;
        flex-basis:50%;
    }

    .tCpict{
       display:flex;
       flex-direction: column;
       align-items: flex-end;
       padding: 1em 0.5em 1em 0.5em;
       flex-basis:50%;
    }