/*----------------------------------------------------1921px & beyond------------------------------------------------------*/

@media only screen and (min-width: 1921px) {
    
    .work_intro {
        padding-right: 2%;
    }
    
}

/*----------------------------------------------------1681px to 1920px------------------------------------------------------*/

@media only screen and (min-width: 1681px) and (max-width: 1920px) {
    
    .work_intro {
        padding-right: 1%;
    }
    
}

/*----------------------------------------------------1281px to 1680px------------------------------------------------------*/

@media only screen and (min-width: 1281px) and (max-width: 1680px) {
    
    .work_intro {
        padding-right: 0%;
    }    
    
}

/*----------------------------------------------------1025px to 1280px------------------------------------------------------*/

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
    
    .row {
        padding: 0 5%; 
    }
    
    .work_intro {
        display: block;
        width: 22%;
    }
    
}

/*----------------------------------------------------769px to 1024px------------------------------------------------------*/

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    
    .row {
        padding: 0 5%; 
    }
    
    .work_intro {
        display: block;
        width: 22%;
    }
 
    h2 {
        font-size: 130%;
    }

    h3 {
        margin: 5px 0;    
        font-size: 90%;
    }

    .work_intro li {
        font-size: 80%;
    }
}

/*----------------------------------------------------481px to 768px------------------------------------------------------*/

@media only screen and (min-width: 481px) and (max-width: 768px) {
    
    .row {
        padding: 0 7%; 
    }
    
    .work_intro {
        width: 100%;
        position: relative;
        margin-top: 20px;
        margin-right: 0px;
    }
    
    .work_showcase {
        width: 100%;
        margin-top: 50px;
        margin-left: 0%;
    }
 
    h2 {
        font-size: 130%;
    }

    h3 {
        margin: 5px 0;    
        font-size: 90%;
    }

    .work_intro li {
        font-size: 80%;
    }
    
    .work_image {
        margin-bottom: 50px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
    }

    .work_image1 {
        margin-bottom: 30px;
    }

    .work_image2 {
        margin-bottom: 15px;
    }

    .work_image3 {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e6e6e6;
    }

    .work_image3.last {
        border-bottom: 1px transparent;
        margin-bottom: 40px;
    }
    
    .work_image4 {
        margin-bottom: 60px;
    }
    
    .bottom {
        height: 90px;
        color: #fff;
    }
    
    .back {
        width: 33.33%;
        padding-top: 5px;
    }
    
    .previous {
        width: 33.33%;
        padding-top: 15px;
    }
    
    .previous_l {
        width: 45%;
        padding-right: 10px;
        text-align: right;
    }

    .previous_r {
        width: 55%;
    }
    
    .next {
        width: 33.33%;
        padding-top: 15px;
    }
    
    .next_l {
        width: 85%;
    }

    .next_r {
        width: 15%;
    }
}

/*----------------------------------------------------320px to 480px------------------------------------------------------*/

@media only screen and (min-width: 320px) and (max-width: 480px) {
    
    .row {
        padding: 0 10%; 
    }
    
    .work_intro {
        width: 100%;
        position: relative;
        margin-top: 10px;
        margin-right: 0px;
    }
    
    .work_showcase {
        width: 100%;
        margin-top: 50px;
        margin-left: 0%;
    }
 
    h2 {
        font-size: 130%;
    }

    h3 {
        margin: 5px 0;    
        font-size: 90%;
    }

    .work_intro li {
        font-size: 80%;
    }
    
     .work_image {
        margin-bottom: 40px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
    }

    .work_image1 {
        margin-bottom: 20px;
    }

    .work_image2 {
        margin-bottom: 5px;
    }

    .work_image3 {
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #e6e6e6;
    }

    .work_image3.last {
        border-bottom: 1px transparent;
        margin-bottom: 30px;
    }
    
    .work_image4 {
        margin-bottom: 30px;
    }
    
    .bottom {
        height: 70px;
        color: #fff;
    }
    
    .back {
        width: 33.33%;
        padding-top: 10px;
    }
    
    .previous {
        width: 33.33%;
        padding-top: 20px;
    }
    
    .previous_l {
        width: 45%;
        padding-right: 10px;
        text-align: right;
    }

    .previous_r {
        width: 55%;
    }
    
    .next {
        width: 33.33%;
        padding-top: 20px;
    }
    
    .next_l {
        width: 85%;
    }

    .next_r {
        width: 15%;
    }
}