.image {
    position: absolute;

    top: 35%;
    /*left: 10%;*/
    right: 10%;
    width: 170px;
    height: 170px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 5s linear infinite;
    -moz-animation:spin 5s linear infinite;
    animation:spin 5s linear infinite;
    z-index: 1;
}

@media (min-width: 1000px) {
    .image {
        position: absolute;

        top: 45%;
        /*left: 10%;*/
        right: 20%;
        width: 170px;
        height: 170px;
        margin:-60px 0 0 -60px;
        -webkit-animation:spin 5s linear infinite;
        -moz-animation:spin 5s linear infinite;
        animation:spin 5s linear infinite;
        z-index: 1;
    }
}

.aboutustext{
    display: none;
}

.image5 {
    position: absolute;
    top: 40%;
    /*left: 10%;*/
    left: 20%;
    width: 130px;
    height: 130px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 5s linear infinite;
    -moz-animation:spin 5s linear infinite;
    animation:spin 5s linear infinite;
    z-index: 1;
}
.imagelarge {
    position: absolute;
    top: 30%;
    /*left: 10%;*/
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    text-align: center;
    -webkit-animation:spin1 10s linear infinite;
    -moz-animation:spin1 10s linear infinite;
    animation:spin1 10s linear infinite;
    z-index: 1;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


@-moz-keyframes spin1 { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin1 { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

.aimate{
    position:relative;
    -webkit-animation:glide 2s ease-in-out alternate infinite;
}

@-webkit-keyframes glide  {
    from {
        left:0px;
        top:0px;
    }

    to {
        left:0px;
        top:10px;
    }

}
.displayonmobile {
    display: none;
}

@media only screen and (max-width: 500px) {
    .hideonmobile {
        display: none;

    }
    .displayonmobile {
        display: block;
    }
}

@media (min-width: 640px) {
    .mobileonly{
        display: none;
    }
}

.circle_1{
    position: absolute;
    top: 300px;
    left: 44%;
    width: 110px;
    height: 100px;
}

.circle_2{
    position: absolute;
    top: 300px;
    left: 56%;
    width: 110px;
    height: 100px;
}
.circle_3{
    position: absolute;
    top: 220px;
    right: 29%;
    width: 110px;
    height: 100px;
}


@media (max-width: 1500px) {
    .circle_1{
        position: absolute;
        top: 300px;
        left: 33%;
        width: 110px;
        height: 100px;
    }

    .circle_2{
        position: absolute;
        top: 280px;
        left: 46%;
        width: 110px;
        height: 100px;
    }
    .circle_3{
        position: absolute;
        top: 220px;
        right: 35%;
        width: 110px;
        height: 100px;
    }
}

@media (max-width: 1200px) {
    .circle_1{
        position: absolute;
        top: 270px;
        left: 33%;
        width: 110px;
        height: 100px;
    }

    .circle_2{
        position: absolute;
        top: 240px;
        left: 46%;
        width: 110px;
        height: 100px;
    }
    .circle_3{
        position: absolute;
        top: 200px;
        right: 32%;
        width: 110px;
        height: 100px;
    }
}

@media (max-width: 1000px) {
    .circle_1{
        position: absolute;
        top: 210px;
        left: 32%;
        width: 90px;
        height: 100px;
    }

    .circle_2{
        position: absolute;
        top: 210px;
        left: 48%;
        width: 80px;
        height: 100px;
    }
    .circle_3{
        position: absolute;
        top: 180px;
        right: 35%;
        width: 80px;
        height: 100px;
    }
}


@media (max-width: 800px) {
    .circle_1{
        position: absolute;
        top: 210px;
        left: 25%;
        width: 90px;
        height: 100px;
    }

    .circle_2{
        position: absolute;
        top: 230px;
        left: 48%;
        width: 80px;
        height: 100px;
    }
    .circle_3{
        position: absolute;
        top: 190px;
        right: 27%;
        width: 80px;
        height: 100px;
    }

    .about_img{
        width: 100%;
    }
}


@media (max-width: 640px) {
    .about_img{
        width: 100%;
    }
    .circle_1{
        position: absolute;
        top: 350px;
        left: 25%;
        width: 90px;
        height: 100px;
    }

    .circle_2{
        position: absolute;
        top: 330px;
        left: 48%;
        width: 80px;
        height: 100px;
    }
    .circle_3{
        position: absolute;
        top: 300px;
        right: 25%;
        width: 80px;
        height: 100px;
    }
}


@media (max-width: 500px) {
    .about_img{
        width: 100%;
    }
    .circle_1{
        position: absolute;
        top: 310px;
        left: 25%;
        width: 60px;
        height: 80px;
    }

    .circle_2{
        position: absolute;
        top: 310px;
        left: 44%;
        width: 60px;
        height: 80px;
    }
    .circle_3{
        position: absolute;
        top: 280px;
        right: 25%;
        width: 60px;
        height: 80px;
    }
}


@media (max-width: 500px) {

    .aboutustext{
        display: block;
    }
    .about_img{
        width: 100%;
    }
    .circle_1{
        position: absolute;
        top: 310px;
        left: 25%;
        width: 60px;
        height: 80px;
    }

    .circle_2{
        position: absolute;
        top: 310px;
        left: 44%;
        width: 60px;
        height: 80px;
    }
    .circle_3{
        position: absolute;
        top: 280px;
        right: 25%;
        width: 60px;
        height: 80px;
    }


}@media (max-width: 400px) {


    .about_img{
        width: 100%;
    }
    .circle_1{
        position: absolute;
        top: 240px;
        left: 25%;
        width: 60px;
        height: 80px;
    }

    .circle_2{
        position: absolute;
        top: 240px;
        left: 44%;
        width: 60px;
        height: 80px;
    }
    .circle_3{
        position: absolute;
        top: 220px;
        right: 25%;
        width: 60px;
        height: 80px;
    }
}

@media (max-width: 330px) {
    .about_img{
        width: 100%;
    }
    .circle_1{
        position: absolute;
        top: 220px;
        left: 27%;
        width: 40px;
        height: 60px;
    }

    .circle_2{
        position: absolute;
        top: 220px;
        left: 44%;
        width: 40px;
        height: 60px;
    }
    .circle_3{
        position: absolute;
        top: 200px;
        right: 25%;
        width: 40px;
        height: 60px;
    }
}
