/****************************** HTML TYPES ******************************/

html, body {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', arial;
    overflow: hidden;
    height: 100%;
    width: 100%;
    background-color: white;
}


/****************************** HTML Classes ******************************/

.centrado {
    display: block;
    text-align: center;
}


.linhaSeparadora {
    display: block;
    width: 30vw;
    margin: 2vh auto 2vh auto;
    border-style: solid;
    border-color: black;
    color: black;
}

.flexbox {
    display: flex;
    height: 100%;
}

.flexbox > .appletonSide {
    height: 100%;
    flex: 1;
}


.flexbox > .livroSide {
    height: 100%;
    flex: 1;
}

/********** Appleton **********/


.imagemAppleton {
    width: 70%;
}

.textoAppleton {
    font-size: 0.75vw;
    text-align: left;
    margin-left: 10vw;
    margin-top: -3vh;
    width: 30vw;
}

.bulletList {
     list-style-type: disc;
     font-size: 0.75vw;
     text-align: justify;
 }

.siteConstruçao {
    font-size: 1.2vw;
    text-align: center;
}



/********** Livro **********/

.capituloLink{
    flex: 1;
    height: 100%;
    text-decoration: none;
    background-color: #e4eced;
}

.imagemLivro {
    width: 50%;
    height: auto;
    margin-top: 7%;
}

.textoLivro {
    margin-top: 7%;
    font-size: 1.5vw;
    color: #3d5567;
    font-family: 'Open Sans', arial
}




/******************************  Media Querys 700 ******************************/


@media (max-width: 700px) {

    /****************************** HTML TYPES ******************************/

    html, body {
        overflow: scroll;
    }


    /****************************** HTML Classes ******************************/


    .linhaSeparadora {
        width: 80vw;
    }


    .flexbox {
        flex-direction: column;
    }

    .flexbox > .appletonSide {
        height: auto;
        order: 2;
    }


    .flexbox > .livroSide {
        height: auto;
        order: 1;
    }

    /********** Appleton **********/


    .imagemAppleton {
        width: 90%;
    }

    .textoAppleton {
        margin-top: -7%;
        font-size: 3.5vw;
        text-align: justify;
        width: 80%;
    }

    .bulletList {
        list-style-type: disc;
        font-size: 3.5vw;
        text-align: justify;
    }

    .siteConstruçao {
        font-size: 5vw;
        text-align: center;
    }



    /********** Livro **********/

    .capituloLink{
        flex: 1;
        height: 100%;
        text-decoration: none;
        background-color: #e4eced;
    }

    .imagemLivro {
        width: 50%;
        height: auto;
        margin-top: 7%;
    }

    .textoLivro {
        font-size: 5vw;
        margin-bottom: 7%;
    }



}