/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

@media screen and (min-width: 1430px) {
    #footer-logos .logo-02 { display: block; }
}

/* for 1250 or less */
@media screen and (max-width: 1250px) {

    #feature-wrap { padding: 220px 4% 0 4%; height: 360px; }
    #feature .feat-logo { width: 280px; }
    
    #footer-logos ul li { padding: 0 1.5% 0 1.5%; }
    
    #folio-coupons #folio-bg-02 { display: none; }
    #folio-sudoku { background: url(../folio/images/sudokusaviour/bg2.jpg) repeat center 0 #981b22; }
    #folio-canvas { background: #333332; }
    #folio-oceanscape { background: url(../folio/images/oceanscape/bg2.jpg) repeat-x center 0 #3a53ba; }
    #folio-runneradvisor { background: url(../folio/images/runneradvisor/bg3.jpg) repeat center bottom #f3f3f1; background-size: 100% auto; }

    #new-projects-wrap { float: left; width: 94%; padding: 50px 3%; }
}

@media screen and (max-width: 1025px) {
    
    #projects-wrap .project { width: 100%; }
    #projects-wrap .thumb img { width: 100%; height: auto; }
    #projects-wrap .pro-right .thumb { float: right; }
    #projects-wrap .pro-right .thumb .arrow { left: 0; background: url(../images/project-arrow-right.png) no-repeat left center; }
    #projects-wrap .text p { font-size: 1.0em; }
    
    #footer-logos h4 { float: left; width: 100%; text-align: center; font-size: 22px; margin-bottom: 20px; }
    #footer-logos ul { position: inherit; width: 90%; padding: 0 5%; }
    #footer-logos ul li { padding: 0; width: 20%; text-align: center; }
    
    #folio-health { background-size: auto 100%; }
    #folio-bargain { background: url(../folio/images/bargainspot/bg-ipad.jpg) repeat-y center 0 #ddc098; }
   
    .bx-wrapper .bx-prev { left: -65px!important; }
    .bx-wrapper .bx-next { right: -65px!important; }
    
    #contact-wrap { width: 70%; padding: 50px 15% 20px 15%; }
    

}

@media screen and (max-width: 800px) {
    #home-intro, #folio-intro { width: 90%; padding: 0 5%; }
    #feature-wrap { background-size: auto 80%; background-attachment: fixed; background-position: center top; }
    #projects-wrap .thumb img { width: 132%; height: auto; }
    
    #nav { width: 100%; margin: 0; position: inherit; }
    
    #folio .folio-white { height: 550px; }
    #folio .folio-white p { width: 80%; padding: 0 10%; position: relative; }
    #imac-wrap { width: 565px; }
    #imac { width: 515px; height: 500px; padding: 19px 25px 0 25px; background-size: 100% auto; }
    #imac-reflection { width: 565px; background-size: 100% auto; }
    
    #new-projects #featured li { width: 44%; padding: 0 3% 20px 3%; }
    #new-projects #featured li.last { width: 100%; padding: 50px 0 30px 0; border-top: solid 1px #dfdfdf; }
    #new-projects #featured li.last img { float: left; width: 44%; margin-right: 6%; margin-left: 3%; }
    #more ul li a { font-size: 0.9em; }
    #more ul li a span { }
    
    #services-wrap .third { float: left; width: 100%; }
    #coupon-stores .thumbnails li { float: left; width: 24%; padding: 15px 3% 0 3%; }
    #infographic-wrap p { width: 100%; }
    #infographic-wrap .infographic-bottom { text-align: left; }
}

/* for mobile */
@media screen and (max-width: 600px) {

    p, blockquote { font-size: 15px; }
    h1 { letter-spacing: -0.05em; line-height: 1.1em; }
    #header-wrap { width: 90%; padding: 8px 5% 0px 5%; }
    #header-wrap.small { padding: 8px 5% 0px 5%; width: 90%; }

    #header-wrap #logo { margin: 12px 0 10px 0; }
    #header-wrap #logo img { width: 120px; }
    #header-wrap #mob-menu-btn { margin-top: 0px; background-size: 30px auto; }

    h1, #home-intro h2 { font-size: 35px; }
    #nav { width: 100%; padding: 0 0 10px 0; border: none; }
    #nav li { padding: 0; width: 100%; text-align: center; }
    #nav li a { padding: 8px 0; width: 100%; border: none; border-top: solid 1px #dfdfdf; }
    #nav li a:hover { background: #202020; color: #fff; border: none; border-top: solid 1px #dfdfdf; }
    
    #feature-wrap { padding-top: 150px; height: 280px; background-size: auto 100%; }
    #feature .feat-logo { width: 220px; }
    
    #folio  .folio-white { height: 380px; }
    #imac-wrap { width: 365px; }
    #imac { width: 325px; height: 500px; padding: 12px 20px 0 20px; background-size: 100% auto; }
    #imac-reflection { width: 365px; background-size: 100% auto; }

    #about-wrap .left, 
    #about-wrap .right 
    { width: 100%; text-align: center; }
    
    #infographic-wrap .infographic-bottom .left,
    #infographic-wrap .infographic-bottom .right { width: 100%; }
    
    #contact-wrap { float: left; width: 86%; padding: 30px 7%; }
    
    #projects-wrap .project { width: 100%; }
    #projects-wrap .thumb { width: 100%; }
    #projects-wrap .text { width: 86%; padding: 30px 7%; text-align: center; }
    #projects-wrap .arrow { background: none!important; }
    
    #footer-logos ul li { width: 50%; padding: 10px 0; }
    #footer-logos .logo-01, #footer-logos .logo-02 { display: block; }
    #footer-logos ul li span { width: 100%; text-align: center; }
    #footer-logos ul li img { height: 30px; }
    #footer ul li { padding: 10px 0; width: 100%;  }
    #footer ul li a { float: left; width: 100%; text-align: center; } 
    
    #new-projects #featured li { width: 90%!important; padding: 0 5% 20px 5%!important; }
    #new-projects #featured li.last { border: none; }
    #new-projects #featured li.last img { width: 100%; margin-left: 0; margin-right: 0; }
    #more ul li { width: 50%; padding: 0; }
    
    .btn { margin: 0 5%; width: 79%; padding: 10px 5%; float: left; }
    
}

@media screen and (max-width: 450px) {
    .bx-wrapper .bx-prev, 
    .bx-wrapper .bx-next { display: none; }
    
    #contact-wrap .btn { float: left; width: 90%; padding: 20px 5%; text-align: center; margin: 0 0 30px 0; }
    
    #folio .folio-white { height: 380px; }
    #imac-wrap { width: 315px; }
    #imac { width: 283px; height: 400px; padding: 10px 16px 0 16px; background-size: 100% auto; }
    #imac-reflection { width: 315px; background-size: 100% auto; }
    
    #more ul li { width: 100%; text-align: center; padding: 0; }

}