/*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.PaginaEnsinoFundamentalI{
        max-width:100%;
        width:100%;
        display: grid;
        grid-template-columns: 100% ;
        grid-template-rows: 10vh 80vh 10vh ;
        grid-template-areas: "CabecalhoEnsinoFundamentalI" "ConteudoEnsinoFundamentalI" "RodapeEducacaoInfantil";
    }/*Final das configurações da class ensino fundamental I*/

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

/*                                    (configurações dos conteúdos que estão dentro de cabeçalho da educação infantil)                  */

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

    /*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: 46%;
                width:100%;
                margin-top:2%;
                margin-left: 20%;
            }
    
    /*Criando área para o slogan do ensino fundamental I*/
        div.FraseSloganEnsinoFundamentalI{
            max-width: 100%;
            width: 100%;
            grid-area: FraseSloganEnsinoFundamentalI;
            background-color: #00AFEF;
            border-bottom: 0.2vw solid #F7E017;
        }

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

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

    


/*========================================================================================================================================
                                                (Configurações para o conteúdo da ensino fundamental I) 
=========================================================================================================================================*/
div.ConteudoEnsinoFundamentalI{
    display:grid;
    grid-area:ConteudoEnsinoFundamentalI;
    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:"HistoriaEnsinoFundamentalI" "MissaoVisaoValores" ;
        }

/*========================================================================================================================================
                                                (Configurações do conteúdo da classe do lado esquerdo) 
=========================================================================================================================================*/
                                  
        /*Configurações da classe história*/
            div.HistoriaEnsinoFundamentalI{
                grid-area:HistoriaEnsinoFundamentalI;
                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 I*/
                p.DiretrizesEFI{
                    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 I*/
            /*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 EFI*/
                p.TextoMissãoEFI{
                    max-width:85%;
                    width:100%;
                    margin-left: 13%;
                    margin-top:-13%;
                    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 EFI*/
                p.TextoVisaoEFI{
                    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 EFI*/ 

            /*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 EFI*/ 
            /*Configurações da classe texto valores EFI*/
                p.TextoValoresEFI{
                    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 EI*/ 

/*========================================================================================================================================
                                                 (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 I*/
        p.TitulodaEFI{
            margin-top:-23%;
            margin-left: 40%;
            font-size: 2vw;
            font-weight:bold;
        }/*Final das configurações do titulo da ensino fundamental I*/

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

    /*Configurações do título da apostila Etapa*/
        p.TituloTextoEtapa{
            margin-top:2%;
            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:30%;
            width:100%;
            height:15vw;
            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 subtituloEFI */
        p.SubtituloEFI{
            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 EFI*/

    /*Configurações da classe apostila enriquecida*/
        img.ApostilaEnriquecida{
            max-width:30%;
            width:100%;
            height:15vw;
            margin-top:2%;
            margin-left:5%;
        }/*Final das configurações da classe apostila enriquecida*/

    /*Configurações da class subtituloEFI-II */
        p.SubtituloEFI-II{
            max-width:50%;
            width:100%;
            margin-top:-21%;
            margin-left:40%;
            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:55%;
            width:100%;
            height:18vw;
            margin-top:8%;
            margin-left:35%;
        }/*Final das configurações da imagem apostila digital */

    /*Configurações do texto da apostila digital */
        p.TextoApostilaDigital{
            max-width:30%;
            width:100%;
            margin-top:-19%;
            margin-left:2%;
            font-size: 1vw;
            text-align: justify;
        }/*Final das configurações da apostila digital */


/*========================================================================================================================================
                                                (Configurações para o rodape da educação infantil) 
=========================================================================================================================================*/
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 */