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

/* ---------------------------------------------------------------------------------------------------- */
/* --- Basic Elements --------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
.mobileBtn {
	display:none;
}
.showTablet {
	display:none;
}
@media only screen and (max-width: 1538px),
screen and (max-device-width: 1538px) 
  and (-webkit-min-device-pixel-ratio: 1) {
/* --- SLider --------------------------------------------------------------------------------- */
#sliderArea a.btnBrown {
	padding: 21px 29px;
    font-size: 21px;
    line-height: 21px;
    margin-top: 21px;
}
#sliderArea .slideBox {
    width: 350px;
}
/* --- Featured Area --------------------------------------------------------------------------------- */
#featuredArea ul.feat-container li .responsiveFeat {
    display: block;
}
ul.feat-container li a span.iconImg img {
    max-width: 65px;
	margin-top: 20px;
}

/* --- Typography --------------------------------------------------------------------------------- */
body {
    font-size: 17px;
    line-height: 26px;
}
h1 {
    font-size: 42px;
    line-height: 42px;
}
h3, h1.entry-title {
    font-size: 46px;
    line-height: 46px;
}
.subtitle {
    font-size: 29px;
    line-height: 29px;
}
.bigTitle {
    font-size: 45px;
    line-height: 46px
}
/* --- News Area --------------------------------------------------------------------------------- */
ul.blogList .overlayColor em {
    font-size: 22px;
    line-height: 22px;
}
/* --- Header Area --------------------------------------------------------------------------------- */

/* --- Page Menu Area --------------------------------------------------------------------------------- */

#sliderArea:after {
    left: 12vw;
    width: clamp(200px, 21vw, 400px);
    height: calc(100vw * 0.35);
    z-index: 1;
    background-repeat: no-repeat;
    pointer-events: none;
    bottom: -190px;
}
#sliderArea .sliderBox {
    height: 33vw;
    width: 33vw;
    transform: translate(-5%, 0%);
}
#sliderArea h1 {
    font-size: 3vw !important;
    line-height: 3vw !important;
    color: #fff;
    text-align: left !important;
}
#sliderArea .sliderContent .btnOrange {
    padding: 12px 18px !important;
}
#featuredArea ul.feat-container.col3 li a.imgLink img {
    clip-path: circle(49% at 50% 50%);
}
#featuredArea ul.feat-container li:hover a.imgLink:before {
    width: 95%;
    height: 95%;
}
#featuredArea ul.feat-container li a.imgLink:before {
    width: 108%;
    height: 108%;
}

}
@media only screen and (max-width: 1446px),
screen and (max-device-width: 1446px) 
  and (-webkit-min-device-pixel-ratio: 1) {
   
#logoArea {
    padding: 0px 0px 0px;
}      
#logoArea .navLogo {
    position: absolute;
    height: 17vw;
    width: 28vw;
}
#logoArea .logoImg img {
	max-width: 90%;
    margin: 0 auto;
}
#logoArea.down.clone .logoImg,
#logoArea .logoImg {
    margin: 3% 0;
}
#calloutArea .bigTitle {
    font-size: clamp(30px, 7vw, 85px);
    line-height: 1em;
}
#highlightArea:after,
#imgContent.addDivider:after,
#mainContent:after,
#secondaryArea.dividerYes:after {
    width: 90%;
    transform: translate(5%, 0%);
}
}
@media only screen and (max-width: 1260px),
screen and (max-device-width: 1260px) 
  and (-webkit-min-device-pixel-ratio: 1) {
#featuredArea:after {
    width: 88%;
    transform: translate(6%, 0%);
}     
.videoWrapper {
    max-width: 100%;
}      
#featuredArea ul.feat-container.col3:before {
    width: 75%;
    transform: translate(22%, 0%);
}
#calloutArea .outerCircle {
    clip-path: circle(63% at 50% 50%);
}
h5 {
    font-size: 18px;
    line-height: 22px;
}      
#sliderArea h1 {
    font-size: clamp(25px, 2.7vw, 30px) !important;
    line-height: 1em !important;
}
#sliderArea:after {
    left: 12vw;
    bottom: -170px;
}

.maxWidth .container, .container {
    max-width: 1150px;
}  
/* --- Navigation --------------------------------------------------------------------------------- */
#mainNav > div > ul > li > a {
	font-size: 18px;
	line-height: 1em;
}

#logoArea.down.clone .wraplogo {
    padding: 0 0px;
}
ul.topList li .btnWhite {
    padding: 8px 15px 8px;
    margin-top: 4px;
}
#mainNav > div > ul > li {
    margin: 0px 0 0 6px;
}
#logoArea ul.topList li a.btnBlue, #logoArea ul.topList li a.btnBrown {
    margin-top: 0px;
    padding: 10px 20px;
    font-size: 15px;
    line-height: 15px;
}
/* --- Navigation - Dropdown Area --------------------------------------------------------------------------------- */
#mainNav ul.sub-menu {
	top: 32px;
}
#mainNav ul.sub-menu li a {
    font-size: 15px;
    line-height: 15px;
    padding: 10px 10px;
}	
h2 {
	font-size: 53px;
    line-height: 53px;
}	  
#headerBgrd .bigTitle {
    font-size: 80px;
    line-height: 80px;
}	  
.home ul.blogList.col3 li.news1 {
    width: 48%;
}	  
#newsArea ul.blogList li .botBox {
    font-size: 17px;
    line-height: 22px;
	width: 100%;
}
ul.feat-container li .botBox {
    padding: 20px 0px 10px;
}
#featuredArea .bgrdColor {
    padding: 10px 5%;
}	  
#testimonial .wrapper {
    font-size: 26px;
    line-height: 37px;
}
ul.basicList li img {
    max-width: 100px;
}	  
#pageMenu ul.feat-container li .botBox {
    padding: 20px 10px 20px;
    flex: 60%;
}
#pageMenu ul.feat-container li a {
    flex: 40%;
}

}
@media only screen and (max-width: 1200px),
screen and (max-device-width: 1200px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  
#pageMenu {
    padding-left: 0px;
    padding-right: 0px;
}
.accredShort {
    display: inline-block;
    margin: 0 0 20px 0;
}
#calloutArea .outerCircle {
    clip-path: circle(63% at 50% 50%);
    background-color: #ee954b;
}
#sliderArea:after {
    bottom: -135px;
}
/* --- Type --------------------------------------------------------------------------------- */
.bigSubtitle {
    font-size: 30px;
    line-height: 30px;
}
.intro {
    width: 75%;
}

a.btnBlue, .btnBlack, .searchandfilter input[type="submit"], #subpage #calloutPage a.btnRed, .search404 form input[type="submit"], a.btnGreen, a.btnGreyOutline,.btnBlack, a.btnWhite, .btnGrey, .btnBlue, .btnRed, .btnGreen, .btnYellow, .btnOrange, .btnPurple, .btnPink, .btnBrown, .searchandfilter input[type="submit"], .search404 form input[type="submit"], .wpcf7-form .wpcf7-submit, input[type="submit"], .postNav .td2 a, .postNav .td1 a, .postNav .td3 a, a.btnOutline {
    padding: 12px 20px 11px;
    font-size: 16px;
    line-height: 16px;
}
ul.basicList li h3 {
    font-size: 70px;
    line-height: 70px;
}
/* --- Logo Area --------------------------------------------------------------------------------- */
#logoArea .col-lg-4 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
#logoArea .col-lg-8 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}
#logoArea.down.clone ul.topList {
    padding: 0;
}
#mainNav > div > ul > li.current_page_item > a:after, #mainNav > div > ul > li.current-menu-item > a:after {
    margin-right: -4px;
}	  
ul.topNumber li {
    line-height: 18px;
    font-size: 18px;
}
/* --- Callout Area --------------------------------------------------------------------------------- */
#calloutArea .col-lg-5 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
/* --- Header Area --------------------------------------------------------------------------------- */

/* --- Page Menu Area --------------------------------------------------------------------------------- */ 
#pageMenu ul.feat-container.col4 li {
    width: 32%;
}
/* --- Single Post --------------------------------------------------------------------------------- */
#single #mainContentX .container, #single #mapContentX .container {
    max-width: 900px;
}
/* --- City Area --------------------------------------------------------------------------------- */
#cityArea ul.btnList a, #cityArea ul.btnList span {
    padding: 5px 12px;
    font-size: 17px;
    line-height: 17px;
}
ul.basicIcons li img {
    max-width: 60%;
}  
/* --- Footer Area --------------------------------------------------------------------------------- */
.ftCopy {
    padding: 25px 18%;
}

#featuredArea .bgrdColor {
    padding: 0 5%;
}
ul.feat-container li .botBox h4 {
    font-size: 23px;
    line-height: 23px;
}	  
}
@media only screen and (max-width: 1024px),
(max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){ 

#imgContent .feat-thumbnail img {
    margin: 0 auto;
}
#featuredArea ul.feat-container.col3 li {
    width: 30%;
}
#sliderArea:after {
    bottom: -160px;
}    
#mainNav > div > ul > li > a, #wp-megamenu-mega > .wpmm-nav-wrap ul.wp-megamenu > li > a {
    padding: 12px 9px 12px;
}
/* --- Navigation --------------------------------------------------------------------------------- */
#logoArea.down.clone .showScroll {
    display: none;
}
#mainNav > div > ul > li.current_page_item > a:after, #mainNav > div > ul > li.current-menu-item > a:after {
    margin-bottom: -40px;
    padding-top: 21px;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    padding: 0px 10px 0px 10px;
    font-size: 16px;
}	
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.dashicons-search.mega-menu-link {
    font-size: 0!important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    font-size: 16px;
}	
/* --- Type --------------------------------------------------------------------------------- */
.intro {
    width: 85%;
}
ul li, ol li {
    line-height: 25px;
}
#secondaryArea .content {
    margin-top: 20px;
}	
#featuredArea .bgrdColor {
    padding: 3%;
}
#staffArea ul.col4 li {
    width: 30.8%;
}
ul.feat-container.col5 > li {
    width: 32%;
}	
#highlightArea ul.basicList li:nth-child(even) {
    margin: -7% 0 -7% auto;
}	
}
@media only screen and (max-width: 992px),
(max-device-width: 992px) and (-webkit-min-device-pixel-ratio: 1) {

#mobileBtn {
    margin-left: 0px;
}
ul.topNumber li.showScroll {
    display: none;
}  
ul.topNumber {
    padding: 30px 0;
}
#logoArea ul.socialIcons {
    display: none;
}    
#sliderArea:after {
    bottom: -130px;
}    
#sliderArea .sliderBox {
    height: 30vw;
    width: 30vw;
    transform: translate(-20%, 0%);
}
.hideTablet {
	display:none;
}
.showTablet {
	display:block;
}
.mobileBtn {
	display:block;
}
/*------------- Navigation -------------------------------------------------------------------*/
#logoArea .wraplogo {
    padding: 15px 10px 0px;
}

#logoArea .lineRot {
    height: 35px;
    -moz-transform: rotate(-1.0deg);
    -webkit-transform: rotate(-1.0deg);
    -o-transform: rotate(-1.0deg);
    -ms-transform: rotate(-1.0deg);
    transform: rotate(-1.0deg);
}
#logoArea .col-lg-4,
#logoArea .col-lg-8 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
#mainNav {
	display:none;
}
ul.topNumber {
    margin: 0px 0 0px;
	vertical-align: middle;
}
ul.topNumber li.listPhone {
    padding-top: 4px;
}
ul.topNumber li {
    font-size: 22px;
}
ul.topList li .btnWhite {
    margin-top: 0;
}
ul.topList {
    display:none;
}
ul.topList li.showTablet {
	line-height: 0px;
}
.vertCenterT {
  height: 100%;
  display: table;
  text-align: right;
  width: 100%; }

.innerT {
  display: table-cell;
  vertical-align: middle;
  line-height: 0px;
}
#logoArea .logoImg a img {
    min-height: 85px;
}
h3, h1.entry-title {
    font-size: 40px;
    line-height: 40px;
}	
.intro {
    width: 90%;
}
.intro .content table thead th {
    font-size: 14px;
    line-height: 14px;
}	
/* --- HeaderBgrd Area --------------------------------------------------------------------------------- */

/* --- Footer Area --------------------------------------------------------------------------------- */
#copyrightContent {
    padding-top: 40px;
}
#badgeArea {
    padding: 15px 25%;
}	
/* --- Typography --------------------------------------------------------------------------------- */
	
#single.prodPage #mainContent hr {
    border-top:0px;
    margin: 15px 0;
} 
ul.listItems li {
    width: 100%;
    float:none;
}
ul.basicList li {
    font-size: 18px;
    line-height: 28px;
}	
ul.basicList li h3 {
    font-size: 60px;
    line-height: 60px;
}	
ul.basicList li img {
    max-width: 80px;
}	
/* --- News Area --------------------------------------------------------------------------------- */
ul.blogList.col3 li {
    width: 48%;
}
.home #newsArea ul.blogList li.news2 .botBox .content, .home #newsArea ul.blogList li.news3 .botBox .content {
    display: none;
}
.home #newsArea ul.blogList li.news2 .botBox h6,
.home #newsArea ul.blogList li.news3 .botBox h6 {
    margin-bottom: 20px;
}	
.blog ul.blogList.col3 li.news3 {
	display:block;
}
.single #newsArea ul.blogList.col3 li.news3 {
    display: none;
}	
#testimonial .wrapper {
    font-size: 22px;
    line-height: 33px;
    padding: 20px 40px;
}
#footerArea {
    font-size: 16px;
    line-height: 20px;
}
.subheading {
    font-size: 22px;
    line-height: 34px;
}
ul.team-container.col4 li {
    width: 32%;
}

#calloutArea .content {
    line-height: 27px;
    font-size: 24px;
}
#breadCrumbs {
    padding: 35px 20px 20px;
}
.bg-flex-holder .showTablet img {
    padding: 50px 0;
}
#logoArea.clone ul.topNumber {
    display: inline-block;
}
#imgContent .col-lg-5 {
    width: 100%;
}
#imgContent .col-lg-7 {
    width: 100%;
}
#imgContent .col-lg-5.order-1 {
    order: 2 !important;
}
#imgContent .col-lg-7.order-2 {
    order: 1 !important;
}
#imgContent .col-lg-5 .content {
    padding: 35px 5% 0;
}

#accredBgrd h4:after {
    margin: 20px auto;
}
#pageMenu ul.feat-container li.botYes {
    flex-direction: column;
}
#pageMenu ul.feat-container li .botBox,
#pageMenu ul.feat-container li a {
    flex: unset;
}
#pageMenu ul.feat-container li .botBox {
    padding: 20px 10px 0px;
}
#headerBgrd .bigTitle {
    font-size: 65px;
    line-height: 1em;
}
h2 {
    font-size: 50px;
    line-height: 50px;
}
}