#text1 {
    width: 45%;
    margin: 20% 0% 0% 10%;
}

#text2 {
    width: 50%;
    margin: 20% 0% 0% 10%;
}

#text3 {
    width: 40%;
    margin: 5% 0% 0% 10%;
}

#text4 {
    width: 45%;
    margin: 20% 0% 0% 15%;
}

#doll1 {
    clear: left;
    margin: 10% 0% 0% 15%;
}

#doll2 {
    float: right;
    margin: 30% 5% 0% 0%;
}

#doll3 {
    clear: left;
    margin: 20% 0% 0% 5%;
}

#doll4 {
    float: right;
    margin: 5% 10% 0% 0%;
}   

#doll5 {
    margin: 20% 0% 0% 10%;
}   

#doll6 {
    float: right;
    margin: 25% 5% 0% 0%;
}

#doll7 {
    clear: left;
    margin: 20% 0% 0% 5%;
}

#doll8 {
    float: right;
    margin: 25% 10% 0% 0%;
}

#doll9 {
    float: right;
    clear: right;
    margin: 5% 10% 0% 0%;
}

#doll10 {
    margin: 20% 0% 0% 10%;
}   

#doll11 {
    margin: 15% 0% 0% 27.5%;
}

.blockImg {
    margin-top: -20%;
}

@media only screen and (max-width: 800px) {

    #doll0, #doll1, #doll2, #doll3, #doll4, #doll5, #doll6, #doll7, #doll8, #doll9, #doll10, #doll11 {
        float: left;
        clear: left;
        width: 80%;
        margin-left: 10%;
        margin-top: 10%;
        margin-right: 10%;
        padding-bottom: 70%;
    }

    #text1, #text2, #text3, #text4 {
        width: 80%;
        margin: 10% 10% 0% 10%;
    }

    #dollImage3 {
        top: -30%;   
    }

    .blockImg {
        margin-top: 10%;
    }
}

@media only screen and (max-width: 600px) {

        #doll0, #doll1, #doll2, #doll3, #doll4, #doll5, #doll6, #doll7, #doll8, #doll9, #doll10, #doll11 {
        width: 100%;
        margin-left: 0%;
        margin-top: 10%;
        margin-right: 0%;
        padding-bottom: 100%;
    }
}

@media only screen and (max-width: 330px) {
    
    #text1, #text2, #text3, #text4 {
        width: 90%;
        margin: 5% 5% 0% 5%;
    }
}