/*Configuração para o documento inteiro*/
    *{
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;      
    }

body{
     overflow-y: hidden;
}
/*========================================================================================================================================
                                                (Configurações para a página) 
=========================================================================================================================================*/

/*Configurações do ensino fundamental I */
    div.PaginaEnsinoFundamentalII{
        max-width:100%;
        width:100%;
        display: grid;
        grid-template-columns: 100% ;
        grid-template-rows: 10vh 80vh 10vh ;
        grid-template-areas: "CabecalhoEnsinoFundamentalII" "ConteudoEnsinoFundamentalII" "RodapeEducacaoInfantil";
    }/*Final das configurações da class ensino fundamental I*/

/*========================================================================================================================================
                                                (Configurações para o cabeçalho do ensino fundamental II) 
=========================================================================================================================================*/
div.CabecalhoEnsinoFundamentalII{
    grid-area:CabecalhoEnsinoFundamentalII;
    max-width:100%;
    width:100%;
}

/*                                    (configurações dos conteúdos que estão dentro de cabeçalho do ensino fundamental II)                  */

    /*Criando as divisões para o conteúdo do cabeçalho*/
        div.ConteudodoCabecalhoEnsinoFundamentalII{
            display:grid;
            grid-template-columns: 20% 80%;
            grid-template-rows: 10vh;
            grid-template-areas: "LogodoColegio FraseSloganEnsinoFundamentalII";
        }

    /*Criando área para o logo do colegio e as configurações de seus filhos*/
        div.LogodoColegio{
            max-width: 100%;
            width: 100%;
            grid-area: LogodoColegio;  
            background-color: #00AFEF;
            border-bottom: 0.2vw solid #F7E017;
        }

        /*Configurações para a figura do logo do colegio*/
            img.LogoColegio{
                max-width: 48%;
                width:100%;
                margin-top:2%;
                margin-left: 20%;
            }
    
    /*Criando área para o slogan do ensino fundamental II*/
        div.FraseSloganEnsinoFundamentalII{
            max-width: 100%;
            width: 100%;
            grid-area: FraseSloganEnsinoFundamentalII;
            background-color: #00AFEF;
            border-bottom: 0.2vw solid #F7E017;
        }

        /*Configurações do título da ensino fundamental II*/
            p.TituloEnsinoFundamentalII{
                margin-top:1%;
                margin-left:20%;
                font-size:2vw;
                color: #F7E017;
            }

        /*Configurações do slogan da ensino fundamental II*/
            p.SloganEnsinoFundamentalII{
                font-size:1vw;
                margin-left:31%;
                color:white;
            }

    


/*========================================================================================================================================
                                                (Configurações para o conteúdo da ensino fundamental II) 
=========================================================================================================================================*/
div.ConteudoEnsinoFundamentalII{
    display:grid;
    grid-area:ConteudoEnsinoFundamentalII;
    max-width:100%;
    width:100%;
    grid-template-columns: 40% 60%;
    grid-template-rows: 80vh;
    grid-template-areas:"LateralEsquerda LateralDireita";
}

/*                                    (configurações dos conteúdos que estão dentro classe conteudo da ensino fundamental)                  */

    /*Configurações da classe lateral esquerda */
        div.LateralEsquerda{
            display:grid;
            grid-area:LateralEsquerda;
            max-width: 100%;
            width: 100%;
            grid-template-columns: 100%;
            grid-template-rows: 40vh 40vh;
            grid-template-areas:"HistoriaEnsinoFundamentalII" "MissaoVisaoValores" ;
        }

/*========================================================================================================================================
                                                (Configurações do conteúdo da classe do lado esquerdo) 
=========================================================================================================================================*/
                                  
        /*Configurações da classe história*/
            div.HistoriaEnsinoFundamentalII{
                grid-area:HistoriaEnsinoFundamentalII;
                max-width: 100%;
                width: 100%;
                border-right:0.2vw solid #F7E017;
                border-bottom:0.2vw solid #F7E017;
            }
            /*Configurações da classe imagem de nosso início*/
                img.NossoInicio{
                    max-width: 60%;
                    width:100%;
                    margin-top:7%;
                    margin-left:20%;
                }

            /*Configurações da classe missao visão e valores*/
                div.MissaoVisaoValores{
                    grid-area:MissaoVisaoValores;
                    max-width: 100%;
                    width: 100%;
                    border-right:0.2vw solid #F7E017;
                }
            
            /*Configurações da classe diretrizes da ensino fundamental II*/
                p.DiretrizesEFII{
                    max-width: 40%;
                    width:100%;
                    background-color: #00AFEF;
                    padding-top:1%;
                    padding-bottom: 1%;
                    font-size:1.3vw;
                    font-weight:bold;
                    color:white;
                    text-align: center;
                    border-left:0.2vw solid #F7E017;
                    border-right:0.2vw solid #F7E017;
                    border-bottom:0.2vw solid #F7E017;
                    border-bottom-left-radius: 1vw;
                    border-bottom-right-radius: 1vw;
                }/*Final da classe diretriz da ensino fundamental II*/

            /*Configurações da classe imagem misão visao e valores*/
                img.Missao{
                    max-width:10%;
                    width:100%;
                    margin-top:3%;
                    margin-left:2%;
                }
            /*Configurações da classe texto missão EFII*/
                p.TextoMissãoEFII{
                    max-width:85%;
                    width:100%;
                    margin-left: 13%;
                    margin-top:-9%;
                    font-size: 1vw;
                    text-align: justify;
                }/*Final das configurações da classe texto missão EFI*/ 

            /*Configurações da classe imagem visao*/
                img.Visao{
                    max-width:10%;
                    width:100%;
                    margin-top:5%;
                    margin-left:87%;
                }
            /*Configurações da classe texto visão EFII*/
                p.TextoVisaoEFII{
                    max-width:83%;
                    width:100%;
                    margin-left: 2%;
                    margin-top:-7%;
                    font-size: 1vw;
                    text-align: justify;
                }/*Final das configurações da classe texto visão EFII*/ 

            /*Configurações da classe imagem valores*/
                img.Valores{
                    max-width:10%;
                    width:100%;
                    margin-top:7%;
                    margin-left:1%;
                }/*Final das configurações da classe texto valores EFII*/ 

            /*Configurações da classe texto valores EFII*/
                p.TextoValoresEFII{
                    max-width:85%;
                    width:100%;
                    margin-left: 13%;
                    margin-top:-9%;
                    font-size: 1vw;
                    text-align: justify;
                }/*Final das configurações da classe texto valores EII*/ 

/*========================================================================================================================================
                                                 (Configurações do conteúdo da classe do lado direito) 
=========================================================================================================================================*/

    /*Configurações da classe lateral direita*/
        div.LateralDireita{
            grid-area:LateralDireita;
            max-width: 100%;
            width: 100%;
            overflow-y: scroll;
            scrollbar-width: auto;
            scrollbar-color:#F7E017  #00AFEF;
        }

   

    /*Configurações para imagem das crianças */
        img.FiguraCrianças{
            max-width: 25%;
            width:100%;
            margin-top:2%;
        }/*Final das configurações das imagem crianças*/

    /*Configurações do título da ensino fundamental II*/
        p.TitulodaEFII{
            margin-top:-23%;
            margin-left: 40%;
            font-size: 2vw;
            font-weight:bold;
        }/*Final das configurações do titulo da ensino fundamental II*/

    /*Configurações da classe descrição da ensino fundamental II*/
        p.DescricaoEFII{
            max-width: 65%;
            width:100%;
            margin-top: 3%;
            margin-left: 30%;
            font-size:1vw;
            text-align: justify;
        }/*final da classedescrição da ensino Fundamental II*/

    /*Configurações do título da apostila Etapa*/
        p.TituloTextoEtapa{
            margin-top:6%;
            margin-left: 20%;
            font-size:2vw;
            font-weight:bold;
        }/*Final das configurações do titulo da apostila Etapa*/

    /*Configurações da classe apostilas etapa*/
        img.FiguraEtapa{
            max-width:25%;
            width:100%;
            height:17vw;
            margin-top:2%;
            margin-left:65%;
        }/*Final das configurações da classe apostilas etapa*/

    /*Configurações do texto apostila Etapa*/
        p.TextoEtapa{
            max-width:60%;
            width:100%;
            margin-top:-20%;
            margin-left:2%;
            font-size: 1vw;
            text-align: justify;
        }/*Final das configurações do texto apostila Etapa*/

    /*Configurações da class subtitulo EFII */
        p.SubtituloEFII{
            max-width:90%;
            width:100%;
            margin-top:10%;
            margin-left:2%;
            font-size: 1.5vw;
            font-weight: bold;
            color:blue;
            text-align: center;
        }/*Final das configurações da class subtitulo EFII*/

    /*Configurações da classe apostila laboratório e física*/
        img.LaboratorioeFisica{
            max-width:25%;
            width:100%;
            height:18vw;
            margin-top:4%;
            margin-left:5%;
        }/*Final das configurações da classe apostila laboratorio e fisica */

    /*Configurações da class subtituloEFI-II */
        p.SubtituloEFI-II{
            max-width:50%;
            width:100%;
            margin-top:-25%;
            margin-left:35%;
            font-size: 1vw;
            text-align: justify;
        }/*Final das configurações da class subtitulo EFI-II*/

    /*Configurações da imagem da apostila digital */
        img.ApostilaDigital{
            max-width:40%;
            width:100%;
            height:13vw;
            margin-top:8%;
            margin-left:45%;
        }/*Final das configurações da imagem apostila digital */

    /*Configurações do texto do enriquecimento digital */
        p.TextoEnriquecimentoDigital{
            max-width:40%;
            width:100%;
            margin-top:-15%;
            margin-left:2%;
            font-size: 1vw;
            text-align: justify;
        }/*Final das configurações do enriquecimento digital */


/*========================================================================================================================================
                                                (Configurações para o rodape da ensino fundamental II) 
=========================================================================================================================================*/
div.RodapeEnsinoFundamentalI{
    grid-area:RodapeEducacaoInfantil;
    max-width:100%;
    width:100%;
    background-color: #00AFEF;
    border-top: 0.2vw solid #F7E017;
}


/* Inicio das configurações da frase do rodape */
p.FraseRodape{
    margin-top:1.5%;
    font-size:1.5vw;
    color: #F7E017;
    text-align: center;
} /* Final das configurações da frase do rodape */