/*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 da educação infantil */
    div.PaginaEducacaoInfantil{
        max-width:100%;
        width:100%;
        display: grid;
        grid-template-columns: 100% ;
        grid-template-rows: 10vh 80vh 10vh ;
        grid-template-areas: "CabecalhoEducacaoInfantil" "ConteudoEducacaoInfantil" "RodapeEducacaoInfantil";
    }/*Final das configurações da class educação infantil */

/*========================================================================================================================================
                                                (Configurações para o cabeçalho da educação infantil) 
=========================================================================================================================================*/
div.CabecalhoEducaçãoInfantil{
    grid-area:CabecalhoEducacaoInfantil;
    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.ConteudodoCabecalhoEducaçãoInfantil{
            display:grid;
            grid-template-columns: 20% 80%;
            grid-template-rows: 10vh;
            grid-template-areas: "LogodoColegio FraseSloganEducacaoInfantil";
        }

    /*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: 45%;
                width:100%;
                margin-top:2%;
                margin-left: 20%;
            }
    
    /*Criando área para o slogan da educação infantil*/
        div.FraseSloganEducacaoInfantil{
            max-width: 100%;
            width: 100%;
            grid-area: FraseSloganEducacaoInfantil;
            background-color: #00AFEF;
            border-bottom: 0.2vw solid #F7E017;
        }

        /*Configurações do título da educação infantil*/
            p.TituloEducacaoInfantil{
                margin-top:1%;
                margin-left:30%;
                font-size:2vw;
                color: #F7E017;
            }

        /*Configurações do slogan da educação infantil*/
            p.SloganEducacaoInfantil{
                font-size:1vw;
                margin-left:31%;
                color:white;
            }

    


/*========================================================================================================================================
                                                (Configurações para o conteúdo da educação infantil) 
=========================================================================================================================================*/
div.ConteudoEducaçaoInfantil{
    display:grid;
    grid-area:ConteudoEducacaoInfantil;
    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 educação infantil)                  */

    /*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:"HistoriaEducacaoInfantil" "MissaoVisaoValores" ;
        }

/*========================================================================================================================================
                                                (Configurações do conteúdo da classe do lado esquerdo) 
=========================================================================================================================================*/
                                  
        /*Configurações da classe história*/
            div.HistoriaEducacaoInfantil{
                grid-area:HistoriaEducacaoInfantil;
                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 educação infantil*/
                p.DiretrizesEI{
                    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 educação infantil*/
            /*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 EI*/
                p.TextoMissãoEI{
                    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 EI*/ 

            /*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 EI*/
                p.TextoVisaoEI{
                    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 EI*/ 

            /*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 EI*/ 
            /*Configurações da classe texto valores EI*/
                p.TextoValoresEI{
                    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%;
        }

   

    /*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 educação infantil*/
        p.TitulodaEI{
            margin-top:-23%;
            margin-left: 40%;
            font-size: 2vw;
            font-weight:bold;

        }/*Final das configurações do titulo da educação infantil*/

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

    /*Configurações da classe apostilas etapa*/
        img.FiguraEtapa{
            max-width:20%;
            width:100%;
            height:18vw;
            margin-top:5%;
            margin-left:75%;
        }/*Final das configurações da classe apostilas etapa*/

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

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


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