/* Desktops and laptops ----------- */
@media screen and (min-width:1024px) {
    .bx-wrapper{max-width:79.9935% !important; float:left;}
    
}

@media screen and (max-width:1024px) {
.container{ margin: 40px 1.9531%; width: 96.0938%; max-width: 984px; float:left;}
.works-slider {max-width: 984px;}
.bx-wrapper{max-width:76.2195% !important; float:left;}
#bx-pager, .bx-pagerBtns{float:left; max-width:20.7317% !important; width:204px; margin-left:3.0487%; position: relative;}
#bx-pager ul li img {width:100%; position: relative;} 
#bx-pager ul li.left {width:45%; margin-right: 10%;} 
#bx-pager ul li.right {width:45%;}
#bx-pager ul li a{display: block;}
    
}

/*-----970 break------*/
@media screen and (max-width:970px){
.container{margin:20px 2%; width:96%; max-width:930px;}
#bx-pager {height: 470px}

}


/*----Tablet Breakpoint-----*/
@media screen and (max-width:780px){
    .works{height: auto;}
    .works-slider {height: auto;}
    .name{width:35%; padding-top:10px;}
    .name h1 {font-size: 1.6em;}
    .bx-wrapper{max-width:100% !important;}
    #bx-pager{width:100%; max-width:100% !important; height: auto; margin:0 auto;}
    #bx-pager ul li img {width:100%; position: relative;}
    #bx-pager ul li.left, #bx-pager ul li.right {width:15%; margin:2%;} 
    #bx-pager ul li a{display: block;}
    .bx-pagerBtns{display:none;}
    #about.content-text{width:100%;float:left;}	
    #about-pic{display:none;}
    
}

/*----Mobile Breakpoint ----*/

@media screen and (max-width:660px){
    .container{margin:20px 2%;}
    
    .header{margin:0;}
    .name{width:60%; padding:10px 0;}
    .name h1 {font-size: 2em;}
    
    .works-slider{width:100%;}
    .pieceInfo{font-size:.7em; line-height:1.2em;}
    
    #bx-pager ul li.left, #bx-pager ul li.right {width:18%; margin: 2%;}
    
    .instagramDT {display: none;}
    .instagramMbl {display: block;}
   /*Mobile Next and Prev btn styling in jqueryBxslider.css */
}

    
}

@media screen and (max-width:480px){
    .name h1 {font-size:1.4em;}
    #bx-pager ul li.left, #bx-pager ul li.right {width:19%; margin: 2%;}
}

@media screen and (max-width:360px){
    .name h1 {font-size: 1.5em;}
    #bx-pager ul li.left, #bx-pager ul li.right {width:20%; margin: 1%;}
}