/* ---------------------------------------------------------------------------------------------------- */
/* --- San Antonio Website Design & Development - Backyard Studios ------------------------------------ */
/* --- www.backyardstudios.com ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 768px),
(-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi),
(max-width: 980px) and (orientation : landscape) {
.hideTablet {
	display:none;
}
.showTablet {
	display:block;
}
.mobileBtn {
	display:block;
}
.hideItem {
    display: block;
}	
#mainNav {
	display:none;
}		
#imgContent.alignRight .mainImg, #testimonial .mainImg, #imgContent.alignLeft .mainImg, #formArea.halfForm.alignRight img {
    max-width: 375px;
}	
#teamSingle.mainContent .post-thumbnail img {
    text-align: center;
    margin: 0 auto;
    max-width: 350px;
}
#teamSingle {
    padding-left: 5%;
    padding-right: 5%;
}	
#teamSingle.mainContent .wrapper {
    padding: 40px 0 30px 0;
}	
.single-service #single #mainContent .col-lg-3 img {
    padding: 15px;
    border-radius: 55px 20px;
    margin: 0 auto 15px 0;
    max-width: 150px;
    text-align: left;
}
.pageTitle {
    text-align: center;
    padding: 140px 10% 0;
}
#imgContent .wrapper {
    padding: 10px 9% 40px;
}	
#mainContent .intro.ltText {
    width: 90%;
    margin: 0 auto;
}
ul.basicList {
    padding: 0 6%;
}
#highlightArea ul.basicList li {
    width: 48%;
}	
	
}
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
#highlightArea ul.basicList li {
    width: 48%;
}
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {


}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}
@media only screen and (max-width:820px), (max-device-width:820px) and (-webkit-min-device-pixel-ratio:1) {
#logoArea .bgrdColor1 {
    margin: 0;
    border-radius: 0;
    padding: 15px;
}
    
#imgContent, #formArea, #mainContent, #teamArea, #pageMenu .bgrdColor1, #calloutArea, #testimonial, #formArea.halfForm.alignRight .bgrdColor1,#teamArea.area1 .bgrdColor1, #teamArea.area2 .bgrdColor1, #teamArea.area4 .bgrdColor1 {
    background-image: unset !important;
    }
    
    #mainContent .container .row .col-md-3 {
        display: none;
    }
    #mainContent .container .row .col-md-9 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    
    }
ul.topList {
    margin: 10px 0 0px;
}	
.bigTitle {
    font-size: 49px;
    line-height: 60px;
}	
ul > li, ol > li {
    font-size: 17px;
    line-height: 21px;
}	
#headerBgrd .subtitle {
    font-size: 16px;
    line-height: 16px;
}	
#headerBgrd.headHalf .overContent {
    background-position: center 413px;
    background-size: 74%;
}	
#headerBgrd .col-md-6 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
}
#headerBgrd .pageTitle .btnsArea li {
    display: inline-block;
}	
#headerBgrd .btnMain {
    padding: 15px 30px 14px;
}	
.headHalf .pageTitle {
    text-align: center;
    padding: 0 5% 200px;
}	
#headerBgrd.headHalf img.mainImg {
    padding: 300px 0;
}	
#headerBgrd .content ul {
    display: inline-block;
    margin: 0;
    padding: 0px;
}	
#mainContent {
    background-position: -14% 0;
}
.intro {
    width: 85%;
}	
.lshowcase-boxInner-normal {
    width: 250px !important;
}
.lshowcase-boxInner-normal img {
    width: 180px !important;
}	
.lshowcase-wrap-hcarousel, .lshowcase-wrap-normal {
    width: 50%;
}	
#teamSingle.mainContent .post-thumbnail img {
    border-radius: 125px 20px;
}	
#teamSingle.mainContent h3 {
    font-size: 36px;
    line-height: 36px;
}
#highlightArea ul.basicList li {
    width: 32%;
}	
#locArea .col-lg-5, #locArea .col-lg-7 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}	
.single-location #mainContent .wrapper {
    margin: 0 6% 40px;
}
.clinicTitle {
    margin-right: 0;
}	
#map_canvas {
    height: 400px;
}	
#serviceArea .col-md-4 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;    
}
#serviceArea .botBox {
    margin-bottom: 25px;
    display: inline-block;
}	
#serviceArea .botBox ul.listingArea li {
    float: left;
    width: 44%;
}	
#serviceArea .botBox .iconImg img {
    margin-bottom: 10px;
    display: block;
    max-width: 76px;
}
#serviceArea {
    padding-left: 5%;
    padding-right: 5%;
}	
ul.listingArea {
    padding: 0 5%;
}	
ul.team-container li .subtitle {
    font-size: 14px;
    line-height: 16px;
}
#calloutArea {
    padding-left: 12%;
    padding-right: 12%;
}
#calloutArea .bgrdDark {
    border-radius: 0 0 20px 20px;
    margin-top: -60px;
}
#calloutArea .col-lg-5 img {
    border-radius: 20px 20px 0 0;
}
#calloutArea .col-lg-5, #calloutArea .col-lg-7 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}	
#pageMenu ul.feat-container.col3 li {
    width: 48%;
}
.postWidth .intro {
    width: 80%;
}
ul.feat-container li a span.iconImg img, ul.feat-container li .iconImg {
    margin-bottom: 25px;
    max-width: 90px;
}
#pageMenu .intro {
    width: 74%;
}	
#serviceArea .intro h3.main-title {
    font-size: 29px;
    line-height: 32px;
}	
.pageService #mainContent.smallBoth {
    padding-left: 5%!important;
    padding-right: 5%!important;
}
#pageMenu ul.feat-container.col4 li {
    width: 47%;
}
#imgContent.bgrdDark .popping-img {
    padding-bottom: 40px;
}	
#imgContent.alignRight .mainImg, #testimonial .mainImg, #imgContent.alignLeft .mainImg, #formArea.halfForm.alignRight img {
    max-width: 440px;
}	
.btnsArea li {
    margin: 0 6px 8px;
}	
.footer-widget-2.widget-area.ltText {
    padding: 0;
}	
#footerArea .bgrdArea {
    margin: 0;
	border-radius: 0;	
}
ul.officeHrs li span {
    width: 50%;
}	
    
    table.networkStatus tr {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    table.networkStatus tr td {
        width: 100%!important;
    }
    .content ul.networkStatus > li {
        flex: 1 0 100%;
        max-width: 100%;
    }
    ul.promo-container.col3 li {
        flex: 0 0 46%;
        max-width: 46%;
    }
ul.blogList li h5 a {
    font-size: 19px;
}
h5 {
    font-size: 19px;
    line-height: 22px;
}	
}
@media only screen and (max-width:800px), (max-device-width:800px) and (-webkit-min-device-pixel-ratio:1) {
.hideTablet {
	display:none;
}
.showTablet {
	display:block;
}
.mobileBtn {
	display:block;
} 
#highlightArea ul.basicList li {
    width: 48%;
}
#serviceArea .botBox {
    padding: 20px;
}
.bigTitle {
    font-size: 35px;
    line-height: 40px;
}	
#cardArea h3.main-title {
    font-size: 33px;
    line-height: 36px;
}	
#cardArea .intro {
    margin-bottom: 30px;
}
.page-id-2210 #headerBgrd.headSubpage img.mainImg {
    padding: 85px 0;
}
}
@media only screen and (max-width: 640px),
screen and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 1){
#logoArea .logoImg {
    max-width: 180px;
}
.postWidth .intro {
    width: 90%;
}
h3.main-title, #imgContent.bgrdDark .bgrdArea h3 {
    font-size: 31px;
    line-height: 34px;
}	  
#pageMenu ul.feat-container li .botBox {
    padding: 20px;
}	  
ul.feat-container li a span.iconImg img, ul.feat-container li .iconImg {
    margin-bottom: 15px;
    max-width: 80px;
}	  
#mapArea .intro {
    width: 80%;
}
#imgContent.alignRight .mainImg, #testimonial .mainImg, #imgContent.alignLeft .mainImg, #formArea.halfForm.alignRight img {
    max-width: 350px;
}
ul.team-container li {
    padding: 15px 15px 33px;
}	  
.catTag {
    font-size: 21px;
    line-height: 23px;
}	  
ul.team-container.col4 li {
    width: 48%;
}
#serviceArea .botBox ul.listingArea li {
    width: 40%;
}
#calloutArea {
    padding-left: 4%;
    padding-right: 4%;
}
#testimonial .container .content {
    padding: 20px 16% 20px;
}	

    ul.promo-container.col3 li {
        flex: 0 0 88%;
        max-width: 88%;
    }
ul.blogList.col3 li {
    width: 47%;
}	  
}
@media only screen and (max-width: 600px),
screen and (max-device-width: 600px) 
  and (-webkit-min-device-pixel-ratio: 1) {
      

}