/* ---------------------------------------------------------------------------------------------------- */
/* --- 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;
  }
    #calloutAreaBar .offset-lg-2 {
        margin-left: 0;
    }
    
    #calloutAreaBar.blue .bgrdDark2 {
        box-shadow: 0px 5px 0px 0px #eec26c;
        
    }
    #calloutAreaBar.gold .bgrdDark2 {
        box-shadow: 0px 5px 0px 0px #146bf2;
        
    }
    #calloutAreaBar .bgrdDark2 {
        border-radius: 30px;
    }
    #calloutAreaBar .overlap .container .row .row {
        text-align: center;
    }
    .intro .content .woocommerce table td {
        width: 100%;
    }
    .intro .content .woocommerce .woocommerce-checkout-review-order-table td {
        width: unset;
    }
    .woocommerce div.product form.cart .variations select {
        width: 100%;
    }
    .outerFormLogo {
        display: none;
    }
    .profileArea {
        padding-bottom: 35px;
    }
    .singleTop {
        margin-left: -15px;
        margin-right: -15px;
    }
    ul.list-columns.col2 > li {
        width: 100%;
    }
}
/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {}
/* 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:800px), (max-device-width:800px) and (-webkit-min-device-pixel-ratio:1) {
  .hideTablet {
    display: none;
  }
  .showTablet {
    display: block;
  }
  .mobileBtn {
    display: block;
  }
  #mainNav {
    display: none;
  }
  #logoArea.down.clone .logoImg a img {
    max-height: 76px;
  }
  .mainContent {
    padding: 65px 0;
  }
  #sliderArea .overlay .intro {
    padding-top: 30px;
  }
  #sliderArea .overlay .subtitle {
    font-size: 148px;
    line-height: 143px;
  }
  #featContent .intro .content {
    margin: 40px;
  }
  #featContent .col-lg-3 {
    padding: 50px 3% 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  #featContent .col-lg-3.order-1 {
    -ms-flex-order: 2;
    order: 2;
  }
  #featContent .col-lg-6.order-2 {
    -ms-flex-order: 1;
    order: 1;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  #calloutAreaFt .container {
    max-width: 600px;
  }
  #calloutAreaFt .col-md-5, #calloutAreaFt .col-md-7 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  #calloutAreaFt .vertLeft {
    text-align: center;
  }
  #calloutAreaFt .bgrdImage {
    padding: 45px 10% 15px;
  }
  .home li.news3 {
    display: none;
  }
  .home ul.blogList.col3 li {
    width: 47%;
  }
  #testimonial .content {
    font-size: 21px;
    line-height: 30px;
    padding: 0 6%;
  }
  #copyrightContent {
    padding-top: 0;
  }
  #colThird.col-lg-3 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  #colFirst.col-lg-3, #colSecond.col-lg-3 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  #footerArea .container {
    padding: 0 5%;
  }
    ul.feat-container.col4 li {
        width: 45.6%;
    }
    #extraBox ul.feat-container li {
        width: 46.8%;
    }
    #calloutArea {
        background-position: right;
    }
    li.news1, li.news2 {
        width: 100%;
    }
    #newsArea > div > div > div > ul > li.news2.advLayout > div.row {
        margin-left: 0;
        margin-right: 0;
    }
    #imageSlideArea * {
        text-align: center;
    }
    #imageSlideArea .slideContent {
        padding: 50px 5%;
    }
    #imageSlideArea > div.container {
        max-width: 95%;
    }
    #imageSlideArea > div > div > div > div.sliderBox > ul > div > div > li.slick-slide.slick-current.slick-active > div.row {
        flex-direction: column;
    }
    #imageSlideArea > div > div > div > div.sliderBox > ul > div > div > li.slick-slide.slick-current.slick-active > div.row div {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #imageSlideArea > div > div > div > div.sliderBox > ul > div > div > li.slick-slide.slick-current.slick-active > div > div > img {
        border-radius: 0 0 30px 30px;
    }
    #featuredArea ul.feat-container li span.iconImg img {
        width: 100px;
        margin-top: 5px;
    }
    #calloutAreaFt span.vertRight > span.inner {
        text-align: center;
    }
    .slideBox {
        width: 800px;
        margin-left: -106px !important;
        margin-top: -240px !important;
        background-color: rgb(242 243 247 / 76%);
        padding: 195px 30px !important; 
    }
    .contactAddress {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #calloutAreaFt {
        background-size: contain;
    }
    .location-search-box {
        margin: 0 20%;
    }
    ul.list-columns.noImage > li h6 {
        font-size: 18px;
    }
}
@media only screen and (max-width:768px), (max-device-width:768px) and (-webkit-min-device-pixel-ratio:1) {
    .slideBox {
        width: 768px;
        margin-left: 0px !important;
        margin-top: 0px !important;
        background-color: rgb(242 243 247 / 76%);
        padding: 332px 30px !important;
    } 
    #imageSlideArea > div.container {
        max-width: 94%;
    }
    #calloutAreaBar * {
        text-align: center;
    }
    #historyArea div.content-history div.row div.col-xs-12.col-sm-12.col-md-9.col-lg-9, #historyArea div.content-history div.row:first-child div.col-xs-12.col-sm-12.col-md-9.col-lg-9,#historyArea div.content-history div.row:last-child div.col-xs-12.col-sm-12.col-md-9.col-lg-9 {
        margin: 0;
        padding: 0 15px;
        flex: 0 0 100%;
        max-width: 100%;
        border: unset;
    }
    #historyArea div.content-history div.row div.col-xs-12.col-sm-12.col-md-3.col-lg-3 > h4 {
        position: initial;
    }
    #historyArea div.content-history div.row {
        margin-bottom: 65px;
    }
    #historyArea div.content-history div.row:last-child {
        margin-bottom: 0px;
    }
    #historyArea .content-history {
        margin-top: 65px;
    }
    #historyArea div.content-history div.col-xs-12.col-sm-12.col-md-9.col-lg-9 p:first-child {
        font-size: 18px;
    }
    .wpcf7-form .row {
        display: flex;
        flex-direction: column;
    }
    .wpcf7-form .row > div {
        flex: 0 0 100%;
        max-width: 100%;
    }
    ul.photoList.col3 li {
        width: 63%;
    }
    #teamSingle .post-thumbnail img {
        margin: 0 auto;
        float: none;
    }
    #teamSingle *:not(form *) {
        text-align: center;
    }
    .single #teamSingle .content ul li {
        justify-content: center;
        padding: 0;
        width: 100%;
    }
    .woocommerce-page .col2-set .col-1,
    .woocommerce-page .col2-set .col-2 {
        max-width: 100%;
    }
    .woocommerce-page .col2-set .col-1 {
        margin-bottom: 30px;
    }
    .woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last {
        width: 100%;
    }
    #calloutAreaBar.gold .container {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
    #calloutAreaBar.blue .container {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
}
@media only screen and (max-width: 640px), screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 1) {
  body {
    font-size: 18px;
    line-height: 29px;
  }
  h3.main-title {
    font-size: 42px;
    line-height: 42px;
  }
  .bigTitle {
    font-size: 34px;
    line-height: 63px;
  }
  #menuList .catTitle {
    font-size: 23px;
    line-height: 23px;
  }
  .logoDivider span:after {
    display: none;
  }
  .logoDivider {
    margin-bottom: 40px;
  }
  .logoDivider span img {
    padding: 0;
    max-width: 320px;
  }
  #sliderArea .overlay .subtitle {
    font-size: 113px;
    line-height: 94px;
  }
  #sliderArea .overlay .intro {
    padding-top: 50px;
  }
  #mainContent .intro h3.main-title:before, #featuredArea .intro h3.main-title:before, #mainContent .intro h3.main-title:after, #featuredArea .intro h3.main-title:after {
    width: auto;
    background-size: contain;
  }
  #calloutAreaFt .vertLeft, #calloutAreaFt .vertRight {
    text-align: center;
  }
  #calloutAreaFt .vertRight .inner {
    padding-top: 30px;
  }
  #testimonial {
    padding: 0;
  }
  #menuList h3.catTitle:before {
    background-position: left center;
    height: 16px;
    width: 66px;
    left: -77px;
    top: 2px;
  }
  #menuList h3.catTitle:after {
    background-position: right center;
    height: 16px;
    width: 66px;
    right: -77px;
    top: 2px;
  }
  #menuList .catDesc {
    font-size: 18px;
    line-height: 22px;
  }
  #menuArea article ul.col2 li {
    width: 49%;
  }
  #menuArea article ul.col2 li:nth-child(even) {
    padding-left: 40px;
  }
  #menuArea article ul.col2 li:nth-last-child(1):nth-child(odd) {
    padding-right: 0;
    padding-left: 0;
    width: 100%;
  }
  #menuArea article ul.col3 li {
    width: 48%;
  }
  #menuArea article ul.col3 li:nth-child(3n) {
    padding-left: 0;
  }
  #menuArea article ul.col3 li:first-child, #menuArea article ul.col3 li:nth-child(even) {
    padding-right: 0;
  }
  #menuArea article ul.col3 li:nth-child(odd) {
    padding-left: 20px;
  }
  #testimonial h6 {
    margin-top: 5px;
    font-size: 21px;
    line-height: 21px;
  }
  #copyrightContent {
    text-align: center;
    padding: 0 12%;
  }
  .ftCopy {
    font-size: 23px;
    line-height: 23px;
  }
    #sliderArea .slideBox h3 {
        font-size: 30px!important;
        line-height: 45px!important;
    }
    #extraBox ul.feat-container {
        text-align: center;
    }
    #extraBox ul.feat-container li {
        width: 75%;
    }
    #detailArea ul.feat-container.col3 li {
        width: 96%;
    }
    #imageSlideArea > div.container {
        max-width: 93%;
    }
    #extraBox > div > div > div > div > div > div.ltText {
        text-align: center;
    }
    #imageSlideArea ul.featList h3.main-title {
        font-size: 26px;
    }
    #calloutAreaBar h3.main-title {
        font-size: 28px;
    }
    .slideBox {
        width: 640px;
        margin-left: 0px !important;
        margin-top: 0px !important;
        background-color: rgb(242 243 247 / 76%);
        padding: 272px 30px !important;
    }
    #extraBox * {
        text-align: center;
    }
    #extraBox .col-lg-8 {
        padding: 0 2.5%;
    }
    #headerBgrd .pageTitle {
        max-width: unset;
        text-align: center;
    }
    #headerBgrd.bgrdOverlay .overContent {
        background: rgba(255, 255, 255, 0.7);
    }
/*
    #headerBgrd .backstretch > img {
        left: -513px!important;
    }
*/
    #featuredArea ul.feat-container.col3 li {
        width: 75%;
    }
    
    #historyArea div.content-history div.row div.col-xs-12.col-sm-12.col-md-3.col-lg-3 > h4 {
        font-size: 26px;
        width: 116px;
        height: 120px;
    }
    .page-id-1335 #headerBgrd {
        height: 260px;
    }
    #detailArea ul.feat-container.col4 li {
        width: 95%;
    }
    ul.feat-container.col3 li {
        width: 45%;
    }
    ul.team-container.col4 li {
        width: 48%;
        padding: 2%;
    }
    #headerBgrd.bgrdOverlay .backstretch > img {
        left: unset!important;
        right: -100px!important;
    }
    #imgContent .results-table > thead {
        display: none;
    }
    #imgContent .results-table tbody tr > td {
        display: block;
        text-align: left;
    }
    #imgContent .results-table tbody tr > td:not(:last-child) {
        padding-bottom: 0;
    }
    #imgContent .results-table tbody tr > td::before {
        display: inline-block;
        padding-right: 5px;
        font-weight: 600;
    }
    #imgContent.lodgeSearch .results-table tbody tr > td:nth-child(1)::before {
        content: 'Lodge: '
    }
    #imgContent.danceSearch .results-table tbody tr > td:nth-child(1)::before {
        content: 'Dance School: '
    }
    #imgContent.lodgeSearch .results-table tbody tr > td:nth-child(2)::before {
        content: 'Lodge Address: '
    }
    #imgContent.danceSearch .results-table tbody tr > td:nth-child(2)::before {
        content: 'School Address: '
    }
    #imgContent.lodgeSearch .results-table tbody tr > td:nth-child(3)::before {
        content: 'Lodge President: '
    }
    #imgContent.lodgeSearch .results-table tbody tr > td:nth-child(4)::before {
        content: 'Hall Rental: '
    }
    .results-table td {
        border: none;
    }
    .results-table tbody tr {
        border-color: #b7bbc0;
    }
    .intro .content table .contactAddress td {
        width: 100%;
    }
    h3.resourceCat {
        font-size: 22px;
        line-height: 22px;
    }
    .woocommerce-Price-amount bdi {
        font-size: 26px;
        line-height: 26px;
    }
}
@media only screen and (max-width: 600px), screen and (max-device-width: 600px) and (-webkit-min-device-pixel-ratio: 1) {
  #imgContent.alignLeft .order-2 .wrapper.left, #imgContent.alignRight .order-1 .wrapper.right {
    padding: 0 3% 80px;
  }
  #calloutArea .introContent {
    padding: 0px;
  }
  #testimonial h3.main-title {
    font-size: 32px;
    line-height: 32px;
  }
  #menuList .itemName {
    font-size: 18px;
    line-height: 24px;
  }
  #menuList h3.catTitle:after {
    display: none;
  }
  #menuList h3.catTitle:before {
    background-image: url(/wp-content/themes/Backyard/_images/gfx-line-top.webp);
    background-position: center;
    height: 19px;
    width: 193px;
    left: 0;
    right: 0;
    top: -10px;
  }
  #menuList .catTitle {
    font-size: 26px;
    line-height: 26px;
    padding-top: 40px;
  }
  .ftLogo a img, .widget_media_image img {
    max-width: 240px !important;
  }
    ul.feat-container.col4 li {
        width: 55%;
    }
    #imgContent .intro {
        margin-top: 20px;
    }
    #imgContent.alignLeft .order-2 .wrapper.left, #imgContent.alignRight .order-1 .wrapper.right {
        padding-bottom: 0;
    }
    #imageSlideArea > div.container {
        max-width: 93%;
    }
    .slideBox {
        width: 600px;
        margin-left: 0px !important;
        margin-top: 0px !important;
        background-color: rgb(242 243 247 / 76%);
        padding: 235px 30px !important;
    }
    #calloutAreaFt {
        background-image: unset;
    }
    ul.team-container.col5 li {
        width: 47%;
    }
    .product-search-box > br {
        display: block;
    }
    .product-search-box > label {
        margin-right: 0;
    }
    ul.photoList.col3 li {
        width: 82%;
    }
    #headerBgrd {
        height: 320px;
    }
    #headerBgrd .btnMain {
        font-size: 18px;
        line-height: 18px;
        padding: 11px 22px;
    }
}
@media only screen and (max-width: 576px), screen and (max-device-width: 576px) and (-webkit-min-device-pixel-ratio: 1) {
        .slideBox {
        width: 576px;
        margin-left: 0px !important;
        margin-top: 0px !important;
        background-color: rgb(242 243 247 / 76%);
        padding: 235px 30px !important;
    }
        ul.blogList.advLayout li.news2 * {
        text-align: center;
        
    }
}