@media (min-width: 1200px){

    #pic1{
        position: absolute;
        box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
        width: 53%;
        left: -69px;
        bottom: -266px;
        z-index: 5;
        transition: 0.5s;
    }
    #pic2{
        position: absolute;
        box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
        width: 43%;
        left: 194px;
        bottom: -229px;
        z-index: 2;
        transition: 0.5s;
    }
    #pic3{
        position: absolute;
        box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
        width: 41%;
        left: -217px;
        bottom: -236px;
        transition: 0.5s;
    }
    #pic4{
        position: absolute;
        box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
        width: 28%;
        left: 410px;
        bottom: -163px;
        transition: 0.5s;
    }
    /*--picture hover effect--*/
    #pic1:hover{
        width: 60%;
        left: -70px;
        bottom: -277px;
        transition: 0.4s;
    }

    #pic2:hover{

        left: 240px;

        transition: 0.4s;
    }
    #pic3:hover{

        left: -297px;	        	
        transition: 0.4s;
    }

    #pic4:hover{

        left: 430px;
        transition: 0.4s;
    }
}

@media (min-width:992px)and (max-width: 1199px){

    #pic1{
        position: absolute;
        box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
        width: 53%;
        left: -69px;
        bottom: -266px;
        z-index: 5;
        transition: 0.5s;
    }
    #pic2{
        position: absolute;
        box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
        width: 43%;
        left: 156px;
        bottom: -229px;
        z-index: 2;
        transition: 0.5s;
    }
    #pic3{
        position: absolute;
        box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
        width: 41%;
        left: -217px;
        bottom: -236px;
        transition: 0.5s;
    }
    #pic4{
        position: absolute;
        box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
        width: 28%;
        left: 329px;
        bottom: -163px;
        transition: 0.5s;
    }

    /*--picture hover effect--*/
    #pic1:hover{
        width: 60%;
        left: -70px;
        bottom: -277px;
        transition: 0.4s;
    }

    #pic2:hover{

        left: 190px;

        transition: 0.4s;
    }
    #pic3:hover{

        left: -267px;	        	
        transition: 0.4s;
    }

    #pic4:hover{

        left: 350px;
        transition: 0.4s;
    }
}


@media (min-width:768px) and (max-width: 991px){

    #pic1{
        position: absolute;
        box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
        width: 31%;
        left: 170px;
        bottom: -149px;
        z-index: 5;
        transition: 0.5s;
    }
    #pic2{
        position: absolute;
        box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
        width: 32%;
        left: 363px;
        bottom: -149px;
        z-index: 2;
        transition: 0.5s;
    }
    #pic3{
        position: absolute;
        box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
        width: 30%;
        left: 17px;
        bottom: -149px;
        transition: 0.5s;
    }
    #pic4{
        position: absolute;
        box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
        width: 19.575em;
        left: 470px;
        bottom: -149px;
        transition: 0.5s;
    }

}


@media (min-width:640px) and (max-width: 767px){

    #pic1{
        position: absolute;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
    width: 62%;
    left: 31px;
    bottom: -149px;
    z-index: 5;
    transition: 0.5s;
    }
    #pic2{
        position: absolute;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
    width: 64%;
    left: 176px;
    bottom: -149px;
    z-index: 2;
    transition: 0.5s;
    }
    #pic3{
        position: absolute;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
    width: 60%;
    left: -165px;
    bottom: -149px;
    transition: 0.5s;
    }
    #pic4{
        position: absolute;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
    width: 20.575em;
    left: 269px;
    bottom: -149px;
    transition: 0.5s;
    }

}

@media (min-width:373px) and (max-width:639px){

    #pic1{
        position: absolute;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
    width: 62%;
    left: 31px;
    bottom: -149px;
    z-index: 5;
    transition: 0.5s;
    }
    #pic2{
        position: absolute;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
    width: 64%;
    left: 176px;
    bottom: -149px;
    z-index: 2;
    transition: 0.5s;
    }
    #pic3{
        position: absolute;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
    width: 60%;
    left: -165px;
    bottom: -149px;
    transition: 0.5s;
    }
    #pic4{
        position: absolute;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
    width: 19.575em;
    left: 269px;
    bottom: -149px;
    transition: 0.5s;
    }

}

@media (max-width:372px){

    #pic1{
        position: absolute;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
    width: 62%;
    left: 31px;
    bottom: -149px;
    z-index: 5;
    transition: 0.5s;
    }
    #pic2{
        position: absolute;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
    width: 64%;
    left: 176px;
    bottom: -149px;
    z-index: 2;
    transition: 0.5s;
    }
    #pic3{
        position: absolute;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
    width: 60%;
    left: -165px;
    bottom: -149px;
    transition: 0.5s;
    }
    #pic4{
        position: absolute;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 1);
    width: 17.575em;
    left: 269px;
    bottom: -149px;
    transition: 0.5s;
    }

}