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

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

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

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

    /*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 medio*/
        div.FraseSloganEnsinoMedio{
            max-width: 100%;
            width: 100%;
            grid-area: FraseSloganEnsinoMedio;
            background-color: #00AFEF;
            border-bottom: 0.2vw solid #F7E017;
        }

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

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

    


/*========================================================================================================================================
                                                (Configurações para o conteúdo da ensino medio) 
=========================================================================================================================================*/
div.ConteudoEnsinoMedio{
    display:grid;
    grid-area:ConteudoEnsinoMedio;
    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 medio)                  */

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

/*========================================================================================================================================
                                                (Configurações do conteúdo da classe do lado esquerdo) 
=========================================================================================================================================*/
                                  
        /*Configurações da classe história*/
            div.HistoriaEnsinoMedio{
                grid-area:HistoriaEnsinoMedio;
                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.DiretrizesEM{
                    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 EM*/
                p.TextoMissãoEM{
                    max-width:85%;
                    width:100%;
                    margin-left: 13%;
                    margin-top:-10%;
                    font-size: 1vw;
                    text-align: justify;
                }/*Final das configurações da classe texto missão EM*/ 

            /*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 EM*/
                p.TextoVisaoEM{
                    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 EM*/ 

            /*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 EM*/ 

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

/*========================================================================================================================================
                                                 (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%;
            margin-left:2%;
        }/*Final das configurações das imagem crianças*/

    /* Configurações do título da ensino medio */
        p.TitulodaEM{
            margin-top:-23%;
            margin-left: 35%;
            font-size: 2vw;
            font-weight:bold;
        }/*Final das configurações do titulo da ensino médio */

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

    /*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:19vw;
            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:-30%;
            margin-left:2%;
            font-size: 1vw;
            text-align: justify;
        }/*Final das configurações do texto apostila Etapa*/

    /*Configurações da class subtitulo EM */
        p.SubtituloEM{
            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 EM */

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

    /*Configurações da class subtituloE-M */
        p.SubtituloE-M{
            max-width:30%;
            width:100%;
            margin-top:-31%;
            margin-left:65%;
            font-size: 1vw;
            text-align: justify;
        }/*Final das configurações da class subtitulo E-M*/

    /*Configurações da imagem da apostila digital */
        img.Simulados{
            max-width: 70%;
            width:100%;
            height:18vw;
            margin-top:29%;
            margin-left:25%;
        }/*Final das configurações da imagem apostila digital */

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

    /* Configurações do título novo ensino médio */
        p.TituloNovoEM{
            margin-top: 10%;
            font-size: 1.5vw;
            font-weight: bold;
            color: blue;
            text-align: center;
        } /*Final das configurações do título novo EM */

    /*Configurações do texto para o novo ensino médio */
        p.TextoNovoEM{
            max-width:30%;
            width:100%;
            margin-top: 20%;
            margin-left: 58%;
            font-size: 1vw;
            text-align: justify;
        } /* Final das configurações para o texto do novo ensino médio */

    /* Configurações imagem cursos do novo ensino médio */
        img.IMGCursosNovoEM{
            max-width: 50%;
            width:100%;
            height: 30vw;
            margin-top: -33%;
            margin-left: 2%;
        } /* Final das configurações da imagem do novo ensino médio */

    

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