@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade {
    animation-name: fadeIn;
    animation-duration: 1s;
}

.page-container {
    /* border: 1px solid black; */
    width: 85%;
    margin: 20px auto;
}

.page-container p{
    color: #A5A3A3;
    font-size: 30pt;
    font-weight: 200;
}

.label-affects{
    float: right;
    text-align: right;
    font-weight: 100;
    margin-top: -70px;
}

.line-horizontal {
    height: 2px;    /* line width */
    width: 100%; /* line length */
    margin-left: 0px;
    margin-top: 20px;
}

.line-vertical, .line-horizontal {
    position: relative;
    background: #4E4D4B;
}

.arrow-right:before {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
}

.arrow-right:before {
    top: -4px;
}

.arrow-right:before {
    right: -15px;
    border-left: 15px solid #4E4D4B;
}

.image-diagram{
    width: 100%; 
    display: flex;
}

.image-diagram img{
    width: 65%; 
    margin: 0 auto; 
}

h1 {
    font-size: 2rem;
}

.description{
    width: 100%; 
    margin-top: 80px; 
    text-align: justify; 
    font-size: 14pt; color:#4E4D4B;
}

@media (max-width: 600px) {
    .image-diagram img{
        width: 100%; 
        margin: 0 auto; 
    }

    .page-container p{
        font-size: 20pt;
    }

    .label-affects{
        margin-top: 0;
    }

    .description{
         margin-top: 100px; 
    }

    .page-container{
        width: 90%;
        padding-bottom: 40px;
    }
}