/* ---------------------------------------------------------------------------------------------------- */
/* --- 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: 1650px),
screen and (max-device-width: 1650px) 
	and (-webkit-min-device-pixel-ratio: 1) {
#mainNav > div > ul > li > a {
    padding: 8px 9px;
    font-size: 16px;
}	
#sliderArea .sliderContentBox {
    bottom: -31%;
}	
#sliderArea ul.basicList li:hover {
    background-size: 100% 43%;
}		
}
@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 {
    padding: 50px 0;
}
#featuredArea ul.feat-container li .responsiveFeat {
    display: block;
}
ul.feat-container li a span.iconImg img {
    max-width: 65px;
	margin-top: 20px;
}
ul.feat-container li a span.overContent h6 span {
    padding: 8px 20px;
}
/* --- Typography --------------------------------------------------------------------------------- */
body {
    font-size: 17px;
    line-height: 26px;
}
h1 {
    font-size: 57px;
    line-height: 60px;
}
h3, h1.entry-title {
    font-size: 36px;
    line-height: 40px;
}
h4, #subpage #mainContent .intro .resume_preview h1 {
    font-size: 26px;
    line-height: 26px;
}
h5 {
    font-size: 22px;
    line-height: 26px;
}
h6, #subpage .single-resume .resume-manager-education h3, #subpage .single-resume .resume-manager-experience h3, .single-resume .resume-manager-education h3, .single-resume .resume-manager-experience h3 {
    font-size: 19px;
    line-height: 19px;
}
.subtitle {
    font-size: 29px;
    line-height: 29px;
}
.error404 .subtitle {
    font-size: 21px;
    line-height: 21px;
}
.bigTitle {
    font-size: 45px;
    line-height: 46px
}
/* --- News Area --------------------------------------------------------------------------------- */
#newsArea,
#galleryArea {
    padding-left: 40px;
    padding-right: 40px;
}
ul.blogList .overlayColor em {
    font-size: 22px;
    line-height: 22px;
}
/* --- Header Area --------------------------------------------------------------------------------- */
#headerBgrd img.mainImg {
    padding: 250px 0;
}
/* --- Page Menu Area --------------------------------------------------------------------------------- */
#pageMenu ul.feat-container li .responsiveFeat {
    display: block;
}

#sliderArea .contentTitle h2 {
    font-size: 32px;
    line-height: 32px;
}
#sliderArea .sliderContentBox {
    bottom: -237px;
    padding: 33px;
}
#sliderArea ul.basicList li:hover {
    background-size: 100% 45%;
}
#sliderArea ul.basicList li:hover > .sliderContentBox {
    bottom: 0px;
}
.hideTablet {
	display:none;
}
.showTablet {
	display:block;
}
.mobileBtn {
	display:block;
}
#mainNav {
	display:none;
}
#logoArea .innerB {
    vertical-align: middle;
}
#logoArea .logoImg {
    padding: 15px 0;
}
ul.topNumber {
    padding-top: 0px;
}
#testimonial .col-lg-7 {
    clip-path: circle(75% at 61% 50%);
}
#subpage #headerBgrd img.mainImg {
    padding: 80px 0;
}
    #headerBgrd img.mainImg {
        padding: 80px 0;
    }	  
}
@media only screen and (max-width: 1446px),
screen and (max-device-width: 1446px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  
#sliderArea ul.basicList li:hover {
    background-size: 100% 47%;
}  
#sliderArea .contentTitle h2 {
    font-size: 30px;
    line-height: 30px;
}
#sliderArea .sliderContentBox {
    bottom: -225px;
    padding: 33px;
}
#calloutArea .row {
    align-items: center;
}
#calloutArea .bgrdColor {
    padding: 40px 3%;
}
#testimonial .col-lg-7 {
    clip-path: circle(75% at 63% 50%);
}
#testimonial .intro {
    width: 60%;
}
#testimonial .wrapper .content {
    font-size: 23px;
    line-height: 30px;
    width: 78%;
}
}
@media only screen and (max-width: 1260px),
screen and (max-device-width: 1260px) 
  and (-webkit-min-device-pixel-ratio: 1) {
/* --- Navigation --------------------------------------------------------------------------------- */
#logoArea,#logoArea.down.clone {
    padding: 12px 20px 12px;
}
#mainNav > div > ul > li > a {
	font-size: 16px;
	line-height: 16px;
}

#logoArea.down.clone .wraplogo {
    padding: 0 0px;
}
#logoArea.down.clone .showScroll a {
    padding: 12px 15px 9px;
    font-size: 16px;
    line-height: 16px;
}
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;
} 
#newsArea ul.blogList li .botBox {
    font-size: 17px;
    line-height: 22px;
}
#logoArea .col-lg-3 {
    flex: 0 0 40%;
    max-width: 40%;
}
#logoArea .col-lg-9 {
    flex: 0 0 60%;
    max-width: 60%;
}
#sliderArea ul.basicList li:hover {
    background-size: 100% 50%;
}
#sliderArea .contentTitle h2 {
    font-size: 26px;
    line-height: 26px;
}
#sliderArea .sliderContentBox {
    padding: 23px;
}
h1 {
    font-size: 50px;
    line-height: 50px;
}
#imgContent.alignLeft .content {
    padding: 0 10% 0 0%;
}
#testimonial .intro {
    width: 85%;
}
#testimonial .col-lg-7 {
    padding: 50px 0;
    clip-path: circle(75% at 61% 50%);
}
#footerArea {
    padding: 330px 15px 30px;
}
#imgContent .sp-grab {
    transform: translate3d(0px, 0px, 0px) !important;
}
#imgContent .sp-thumbnail-container {
    margin: 3% 1% 1%;
}
#introFullwidth, #pageMenu {
    padding-left: 30px;
    padding-right: 30px;
}
#secondaryArea .content-secondary .videoWrapper {
    padding: 19%;
}
}
@media only screen and (max-width: 1200px),
screen and (max-device-width: 1200px) 
  and (-webkit-min-device-pixel-ratio: 1) {
/* --- Type --------------------------------------------------------------------------------- */
#headerBgrd .bigTitle {
	font-size: 45px;
    line-height: 45px;
}
.bigSubtitle {
    font-size: 30px;
    line-height: 30px;
}
.intro {
    width: 75%;
}
.mainContent {
    padding: 50px 0px;
}
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 9px;
    font-size: 16px;
    line-height: 16px;
}
/* --- Secondary Content Area --------------------------------------------------------------------------------- */
.content-secondary {
    padding: 0 60px;
}
/* --- 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: 23px;
    font-size: 23px;
}
/* --- Callout Area --------------------------------------------------------------------------------- */
#calloutArea .col-lg-5 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
/* --- Header Area --------------------------------------------------------------------------------- */
#single #headerBgrd img.mainImg, #subpage #headerBgrd.headSingle img.mainImg, #archive #headerBgrd img.mainImg {
    padding: 10px 0;
}
#headerBgrd img.mainImg, 	  
#subpage #headerBgrd img.mainImg {
    padding: 75px 0;
}	  
/* --- 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%;
}
ul.socialIcons li a img {
    height: 45px;
    width: auto;
}
#featuredArea .bgrdColor {
    padding: 0 3%;
}
ul.feat-container li .botBox h4 {
    font-size: 23px;
    line-height: 23px;
}	
#sliderArea ul.basicList li:hover {
    background-size: 100% 52%;
}
#sliderArea .sliderContentBox {
    padding: 20px 13px;
}
#testimonial .col-lg-7,
#accredBgrd,
#featuredArea {
    padding: 50px 0;
}
h2 {
    font-size: 35px;
    line-height: 35px;
}
ul.feat-container li .botBox h4 {
    font-size: 20px;
    line-height: 20px;
}
#testimonial .intro {
    width: 90%;
}
#imgContent .sp-thumbnail-container {
    margin: 3% 0% 1%;
}
#secondaryArea .content-secondary .videoWrapper {
    padding: 22%;
}
}
@media only screen and (max-width: 768px) {
#single #headerBgrd img.mainImg, #subpage #headerBgrd.headSingle img.mainImg, #archive #headerBgrd img.mainImg {
	padding-bottom:75px !important;
	}
}
@media only screen and (max-width: 1080px),
(max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){ 
.wpcf7-radio .wpcf7-list-item label {
    margin-left: 0px;
}
}
@media only screen and (max-width: 1024px),
(max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){ 
/* --- 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;
}	
/* --- Type --------------------------------------------------------------------------------- */
h1 {
    font-size: 37px;
    line-height: 40px;
}
h2,h3, h1.entry-title {
    font-size: 33px;
    line-height: 35px;
}
ul.feat-container li .botBox h4 {
    font-size: 23px;
    line-height: 23px;
}
.subtitle {
    font-size: 26px;
    line-height: 27px;
}
.bigTitle {
    font-size: 42px;
    line-height: 44px;
}
ul li, ol li {
    line-height: 25px;
}
#calloutArea .content {
    line-height: 30px;
    font-size: 25px;
}
#sliderArea ul.basicList li:hover {
    background-size: 100% 65%;
}
#sliderArea .contentTitle h2 {
    font-size: 23px;
    line-height: 23px;
}
#imgContent.alignLeft .content {
    padding: 0 0% 0 0%;
}
#accredBgrd .lshowcase-wrap-normal {
    width: 22%;
}
#imgContent .subContent {
    width: 78%;
    padding: 20px 10px 20px 0;
}
#testimonial .col-lg-7 {
    clip-path: circle(75% at 65% 50%);
}
#colLogo.col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
}
#footerArea .row {
    justify-content: center;
}
.ftLogo {
    text-align: center;
    padding-bottom: 25px;
}
ul.feat-container.col4 li {
    width: 42%;
}
#footerArea {
    padding: 330px 0px 30px;
}
#imgContent .sp-thumbnail-container {
    height: 130px !important;
    width: 130px !important;
}
#imgContent .sp-bottom-thumbnails .sp-thumbnail-container:first-child {
    margin-left: 0%;
}
#secondaryArea .content-secondary .videoWrapper {
    padding-top: 0;
    padding-bottom: 50%;
}
#secondaryArea .content-secondary .videoWrapper {
    padding: 28%;
}

.form-split tr {
	display: flex;
    flex-direction: column;
    align-items: center;
}
.form-split tr td {
	width: 100%;
	display: flex;
    flex-direction: column;
    align-items: center;
}
.form-split tr td h3 {
	text-align: center;
}
}
@media only screen and (max-width: 992px),
(max-device-width: 992px) and (-webkit-min-device-pixel-ratio: 1) {
.hideTablet {
	display:none;
}
.showTablet {
	display:block;
}
.mobileBtn {
	display:block;
}
/*------------- Navigation -------------------------------------------------------------------*/
#logoArea .wraplogo {
    padding: 15px 10px 0px;
}
#logoArea .logoImg img {
	max-height: 65px;
}
#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.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;
}

/* --- HeaderBgrd Area --------------------------------------------------------------------------------- */
#headerBgrd .bigTitle {
    font-size: 38px;
    line-height: 38px;
}	
.bigSubtitle {
    font-size: 25px;
    line-height: 25px;
}	
#single #headerBgrd img.mainImg, #archive #headerBgrd img.mainImg, .single-job_listing #single #headerBgrd img.mainImg {
    padding: 50px 0;
}
/* --- Footer Area --------------------------------------------------------------------------------- */
#copyrightContent {
    padding-top: 40px;
}
/* --- Typography --------------------------------------------------------------------------------- */
h2, h1.entry-title {
    font-size: 30px;
    line-height: 33px;
}
#featuredArea {
    padding: 50px 0;
}	
/* --- City Area --------------------------------------------------------------------------------- */
#cityArea .order-2 {
    order:1;
    text-align: center;
}
#cityArea .order-1 {
    order:2;
}
#cityArea .vertLeft {
    text-align: center;
}
#cityArea .col-lg-5,
#cityArea .col-lg-7 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
#cityArea .col-lg-5 .wrapper {
    padding-right: 0px;
    border-right: 0px solid rgba(66, 76, 85, 0.5);
    margin-right: 0;
    padding: 0 10%;
}
#cityArea ul.btnList a, #cityArea ul.btnList span {
    padding: 5px 12px;
    font-size: 16px;
    line-height: 16px;
}
#cityArea ul.btnList {
    font-size: 0px;
}
#cityArea ul.btnList li {
    list-style: none;
    margin: 8px 5px;
    padding: 0px;
    float: none;
    display: inline-block;
}
#single.prodPage #mainContent hr {
    border-top:0px;
    margin: 15px 0;
} 
ul.listItems li {
    width: 100%;
    float:none;
}
/* --- Resources Area --------------------------------------------------------------------------------- */
ul.list-columns.col3 > li {
	width: 50%;
}
/* --- News Area --------------------------------------------------------------------------------- */
ul.blogList.col3 li {
    width: 48%;
}
ul.blogList.col3 li.news3 {
	display:none;
}
.blog ul.blogList.col3 li.news3 {
	display:block;
}
#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%;
}
#introFullwidth, #socialFeedArea, #pageMenu {
    padding-left: 10px;
    padding-right: 10px;
}
#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;
}
#logoArea.down.clone {
    padding: 0px;
}
#logoArea.down.clone ul.topNumber {
    margin: 0;
    vertical-align: middle;
}
#sliderArea .sliderContentBox {
    padding: 20px 10px;
}
.intro {
    padding-bottom: 20px;
}
#testimonial .wrapper .content {
    font-size: 21px;
    line-height: 26px;
    width: 90%;
}
.alignleft {
    margin-right: 5%;
    margin-bottom: 35%;
}
#colFirst.col-lg-3,
#colSecond.col-lg-3,
#colSocial.col-lg-3 {
    flex: 0 0 33%;
    max-width: 33%;
}
#logoArea .logoImg {
    padding: 10px 0;
}
#imgContent .col-lg-7.gallery {
    flex: 0 0 100%;
    max-width: 100%;
}
#imgContent .col-lg-5.text {
    flex: 0 0 100%;
    max-width: 100%;
}
#imgContent .sp-slides-container img {
    margin: 0 auto;
}
.single-system #imgContent.mainContent {
    padding: 0px 2% 80px;
    margin: 0px;
}
.single-system #imgContent .sp-thumbnails.sp-grab {
    transform: translate3d(25%, 0px, 0px) !important;
}
.single-system #imgContent .topTitles {
    margin-top: 25px;
    margin-bottom: 15px;
}
}