.container{
    padding-top: 20px;
    text-align: left;
    justify-content: center;
    align-items: center;
    width: 100%;
    float: left;
}

.picture{
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.icon img{
    height: 15%;
    width: 15%;
    float:left;
}

.text{
    float: right;
    width: 70%;
    transform: translate(-150px, -20px);
}

.picture img{
    width: 50%;
    height: 30%;
    border-radius: 10px;
}

.principle-container{
    width: 100%;
    padding: 30px 60px;
    display: flex;
    flex-direction: row;
}

.content{
    width:100%;
}

.intro{
    padding: 60px;
}

.w3-quarter{
    width: 19.999999%;
}

.work .w3-quarter{
    width: 24.99999%;
}

/* Fading text CSS*/

.fade{
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 10s;
}

.hidden{
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 10s;
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

.show2 {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

.hidden:nth-child(2){
    transition-delay: .5s;
}

.hidden:nth-child(3){
    transition-delay: 1s;
}

.hidden:nth-child(4){
    transition-delay: 1.5s;
}

.hidden:nth-child(5){
    transition-delay: 2s;
}

@media (prefers-reduced-motion: no-preference) {
    .fade {
        transition: all 1s;
    }
    .hidden {
        transition: all 1s;
    }
}

@media (max-width: 601px) {

    .intro{
        padding: 10px;
    }

    .test{
        width: 100%;
        display: flex;
        flex-direction:column-reverse;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .container{
        width: 100%;
        text-align: center;
    }

    .picture{
        width: 100%;
    }

    .text{
        width: 100%;
        transform: translate(0, 0);
    }

    .icon img{
        float:none;
    }

    .content{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .icon img{
        height: 50%;
        width: 50%;
    }

    .w3-quarter{
        width: 90%;
    }

    .work .w3-quarter{
        width: 90%;
    }

    .w3-display-left{
        text-align: center;
    }
}