/* ---------------------------------------------------------------------------------------------------- */
/* --- Outdoor Water Solutions Website ---------------------------------------------------------------- */
/* --- Copyright 2019  -------------------------------------------------------------------------------- */
/* --- San Antonio Website Design & Development - Backyard Studios ------------------------------------ */
/* --- www.backyardstudios.com ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------------- */
/* --- Basic Elements --------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
.mobileBtn {
	display:none;
}
.showTablet {
	display:none;
}
@media only screen and (max-width: 1440px),
screen and (max-device-width: 1440px) 
  and (-webkit-min-device-pixel-ratio: 1) {
#logoArea, #logoArea.down.clone {
    padding: 15px 30px 15px;
} 
.footer-widget-2 {
    padding: 0px 15% 0;
}
#imgContent .wrapper {
    margin-top: 10px;
}
}
@media only screen and (max-width: 1260px),
screen and (max-device-width: 1260px) 
  and (-webkit-min-device-pixel-ratio: 1) {
/* --- Navigation --------------------------------------------------------------------------------- */  
#mainNav > div > ul > li > a {
    padding: 8px;
    font-size: 17px;
    line-height: 17px;
}
#logoArea {
    padding: 15px 10px 15px;
}
#logoArea.down.clone {
    padding: 0px 10px 0px;
}
#mainNav > div > ul > li {
    margin: 0px 0 0 5px;
}
ul.topNumber {
    margin: 0px 0 3px;
}
#mainNav ul.sub-menu {
    top: 31px;
}
#mainNav ul.sub-menu li a {
    font-size: 15px;
    line-height: 15px;
}
ul.topNumber li {
    margin: 0 0 0 9px;
}
/* --- SLider --------------------------------------------------------------------------------- */
#sliderArea a.btnBrown {
	padding: 21px 29px;
    font-size: 21px;
    line-height: 21px;
    margin-top: 21px;
}
#sliderArea .slideBox {
    width: 350px;
}
/* --- Featured Area --------------------------------------------------------------------------------- */
#featuredArea {
    padding-left: 50px;
    padding-right: 50px;
}
#featuredArea ul.feat-container li .mainFeat {
	display: none;
}
#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: 18px;
    line-height: 26px;
}
h1 {
    font-size: 40px;
    line-height: 43px;
}
h2, .itemSection .content h2 {
    font-size: 35px;
    line-height: 36px;
}
h3, h1.entry-title {
    font-size: 36px;
    line-height: 40px;
}
h4, #subpage #mainContent .intro .resume_preview h1 {
    font-size: 22px;
    line-height: 22px;
}
h5 {
    font-size: 20px;
    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: 20px;
    line-height: 23px;
}
.bigTitle {
    font-size: 45px;
    line-height: 46px
}
/* --- Main Elements --------------------------------------------------------------------------------- */
.mainContent {
    padding: 50px 0;
}
/* --- Half Page Image --------------------------------------------------------------------------------- */
.itemSection .content {
    padding: 50px 50px;
}
.itemSection .content .wrapper {
    margin-top: 25px;
}
/* --- News Area --------------------------------------------------------------------------------- */
#newsArea,
#galleryArea {
    padding-left: 40px;
    padding-right: 40px;
}
ul.blogList .overlayColor em {
    font-size: 22px;
    line-height: 22px;
}
/* --- Callout Area --------------------------------------------------------------------------------- */
#calloutArea .vertCenter {
    padding: 80px 40px;
}
#calloutArea .col-lg-4 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}
#calloutArea .offset-lg-8 {
    margin-left: 58.333333%;
}
/* --- Header Area --------------------------------------------------------------------------------- */
#headerBgrd img.mainImg {
    padding: 150px 0;
}
/* --- Page Menu Area --------------------------------------------------------------------------------- */
#pageMenu ul.feat-container li .responsiveFeat {
    display: block;
}
#pageMenu ul.feat-container li .mainFeat {
    display: none;
}

.maxWidth .container, .container, .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-info, .woocommerce-message {
    max-width: 1190px;
}
.content-secondary {
    margin-top: 15px;
}

.woocommerce-product-search {
    padding: 0 10%;
}
.signupTable .btnSub .wpcf7-submit {
    height: 40px;
    padding: 13px 20px;
}
#introFullwidth, #pageMenu {
    padding-left: 0px;
    padding-right: 0px;
}
#pageMenu ul.feat-container li .botBox {
    padding: 10px 15px 0px;
}
}
@media only screen and (max-width: 1200px),
screen and (max-device-width: 1200px) 
  and (-webkit-min-device-pixel-ratio: 1) {
/* --- Featured Area --------------------------------------------------------------------------------- */ 
#featuredArea {
    padding: 60px;
}
ul.feat-container.col4 li {
    width: 23.8%;
}
#featuredArea ul.feat-container li .responsiveFeat {
    display: none;
}
#featuredArea ul.feat-container li .mainFeat {
    display: block;
}
/* --- Type --------------------------------------------------------------------------------- */
.intro {
    font-size: 105%;
}
.mainContent {
    padding: 60px 0;
}
a.btnBlue, .btnBlack, .searchandfilter input[type="submit"], #subpage #calloutPage a.btnRed, .search404 form input[type="submit"], #single .single_job_listing .application .application_button, .mainContent input[type=submit].um-button, #subpage .job-manager-form input[type="submit"].button, #subpage .resume_preview_title input#resume_preview_submit_button, #job-manager-alerts table tfoot a, a.btnGreen, .submit-bookmark-button, .button.wp_job_manager_send_application_button, .apply_with_resume input[type="submit"], #subpage .resume_preview_title input.button, .postNav .td2 a, a.btnBrown, a.btnWhite, .postNav .td1 a, .postNav .td3 a, a.btnGreyOutline, #single .jobMeta a.bookmark-notice, #single .wp-job-manager-bookmarks-form a.remove-bookmark, a.btnGreen, .submit-bookmark-button, .button.wp_job_manager_send_application_button, .apply_with_resume input[type="submit"], #subpage .resume_preview_title input.button, .postNav .td2 a, .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, #single .jobMeta a.bookmark-notice, #single .wp-job-manager-bookmarks-form a.remove-bookmark,.btnPDF, .btnVideo, #photoMenu ul.feat-container li a span.overContent h6 span, .woocommerce div.product form.cart .button, .btnBlack, a.btnWhite, .itemSection .content .btnsArea .btnGrey, .btnGrey, .btnBlue, .btnRed, .btnGreen, .btnYellow, .btnOrange, .btnPurple, .btnPink, .btnBrown, .btnVideo, .btnPDF, .searchandfilter input[type="submit"], .search404 form input[type="submit"], .search form input[type="submit"], .wpcf7-form .wpcf7-submit, input[type="submit"], .postNav .td2 a, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .postNav .td1 a, .postNav .td3 a, a.btnOutline, .woocommerce-account .woocommerce-MyAccount-navigation ul li a, .woocommerce button.button.alt, #photoMenu ul.feat-container li a span.overContent h6 span{
    padding: 12px 20px;
    font-size: 16px;
    line-height: 16px;
}
.btnPDF, .btnVideo {
	padding-left: 35px;
}
.btnVideo {
	background-size: 35% 40%;
}
.woocommerce-product-search .search-field {
    width: 78%;
}
.woocommerce-product-search {
    padding: 0 5%;
}
/* --- Half Page Area --------------------------------------------------------------------------------- */
.itemSection .content {
    padding: 60px 45px;
}
.itemSection .content .wrapper {
    margin-top: 25px;
}
.itemSection .content .line, .line {
	margin: 20px 0;
}
/* --- Secondary Content Area --------------------------------------------------------------------------------- */
.content-secondary {
    padding: 0 60px;
}
/* --- Logo Area --------------------------------------------------------------------------------- */
#logoArea {
    padding: 8px 5px;
}
#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%;
}
#mainNav > div > ul > li {
    margin: 0px 0 0 5px;
}
ul.topNumber li {
    line-height: 18px;
    font-size: 18px;
}
/* --- SLider --------------------------------------------------------------------------------- */
#sliderArea a.btnYellow {
	padding: 20px 30px;
    font-size: 24px;
    line-height: 24px;
    margin-top: 24px;
}
/* --- Callout Area --------------------------------------------------------------------------------- */
#calloutArea .col-lg-5 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
/* --- Header Area --------------------------------------------------------------------------------- */
#headerBgrd img.mainImg {
    padding: 120px 0;
}
/* --- Page Menu Area --------------------------------------------------------------------------------- */ 

#pageMenuX ul.feat-container.col4 li {
    width: 49.8%;
}
#pageMenu ul.feat-container li .responsiveFeat {
    display: none;
}
#pageMenu ul.feat-container li .mainFeat {
    display: block;
}
/* --- Single Post --------------------------------------------------------------------------------- */
#single #mainContent .container, #single #mapContent .container {
    max-width: 900px;
}
/* --- Footer Area --------------------------------------------------------------------------------- */
.ftCopy {
    padding: 25px 18%;
    font-size: 18px;
    line-height: 26px;
}
ul.socialIcons li a img {
    height: 45px;
    width: auto;
}
h4.entry-title,
h4.catTitle,
h4.resourceCat{
    font-size: 32px;
    line-height: 32px;
}
ul.blogList.list li .line {
	margin: 30px 10% 25px;
}
.offset-md-7 {
    margin-left: 50%;
}
ul.feat-container li .botBox h4 {
    font-size: 23px;
    line-height: 23px;
}
}
@media only screen and (min-width: 801px) and (max-width: 1024px) {
.home ul.blogList.col3 {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
}
}
@media only screen and (max-width: 1024px),
(max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){ 
/* --- Navigation --------------------------------------------------------------------------------- */
#mainNav > div > ul > li > a {
    padding: 7px 8px;
}
.menu-main-menu-container {
	line-height: 0px;
}
#topBar,
#topBar ul li {
    font-size: 15px;
    line-height: 15px;
}
/* --- Slider --------------------------------------------------------------------------------- */
#sliderArea .slideBox a {
    font-size: 17px;
    line-height: 17px;
	padding: 12px 20px;
}
#sliderArea .slideBox h4 {
	font-size: 40px;
	line-height: 40px;
}
#sliderArea .slideBox .subtitle {
	font-size: 25px;
	line-height: 26px;
}
/* --- Type --------------------------------------------------------------------------------- */
h1 {
    font-size: 37px;
    line-height: 40px;
}
h2,h3, h1.entry-title {
    font-size: 33px;
    line-height: 35px;
}
.intro {
    font-size: 105%;
	width: 100%;
}
.bigTitle, #calloutArea .bigTitle {
    font-size: 35px;
    line-height: 35px;
}
.pageTitle .bigSubtitle {
    font-size: 17px;
    line-height: 20px;
}
ul li, ol li {
    line-height: 25px;
}

/* --- News Area --------------------------------------------------------------------------------- */
ul.blogList.col3 li {
    width: 49%;
}
.blog ul.blogList.col3 li.news3 {
	display:block;
}
/* --- Header Area --------------------------------------------------------------------------------- */
#headerBgrd img.mainImg {
    padding: 90px 0;
}
/* --- Featured Area --------------------------------------------------------------------------------- */
#featuredArea ul.feat-container.col5 li,
#featuredArea ul.feat-container.col4 li,
#pageMenu ul.feat-container.col4 li,
ul.feat-container > li, .woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
    width: 32.333%;
}
.maxWidth .container, .container, .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-info, .woocommerce-message,
#single #mainContent .container, #single #mapContent .container{
    max-width: 96%;
}
#calloutArea .content {
    line-height: initial;
}
#photoMenu ul.feat-container li a span.overContent h6 {
    display:none!important;
} 
#pageMenu ul.feat-container.col4 li, ul.feat-container > li {
    width: 38%
}
}
@media only screen and (max-width: 992px),
(max-device-width: 992px) and (-webkit-min-device-pixel-ratio: 1) {

/*------------- Navigation -------------------------------------------------------------------*/
#logoArea {
	    padding: 8px 0px;
}
#logoArea .logoImg img {
	max-height: 75px;
}
#logoArea .col-lg-4 {
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
}
#logoArea .col-lg-8 {
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    max-width: 70%;
}
#mainNav {
    margin-top: 4px;
}
/* --- Half Page Area --------------------------------------------------------------------------------- */
.bg-flex {
    position: relative !important;
}
.bg-flex-holder {
	position: relative;
}
.bg-flex-holder .showTablet {
	display:block!important;
}
.bg-flex-holder .showTablet img {
	max-height: 450px;
}
.itemSection .content .wrapper {
    margin-top: 25px;
}
.itemSection .col-lg-6 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
} 
.itemSection .offset-lg-6 {
    margin-left: 0%;
}
/* --- HeaderBgrd Area --------------------------------------------------------------------------------- */
#headerBgrd img.mainImg {
    padding: 50px 0;
}
#single #headerBgrd img.mainImg, #archive #headerBgrd img.mainImg, .single-job_listing #single #headerBgrd img.mainImg {
    padding: 10px 0;
}
/* --- Footer Area --------------------------------------------------------------------------------- */
#copyrightContent {
    padding-top: 10px;
}
/* --- Typography --------------------------------------------------------------------------------- */
h2, h3, h1.entry-title {
    font-size: 30px;
    line-height: 33px;
}	
/* --- Callout Photos --------------------------------------------------------------------------------- */
#photoMenu ul.feat-container.col3 li {
    width: 50%;
}
#photoMenu ul.feat-container.col3 li:nth-child(3) {
   display: none;
}
/* --- Callout Big Background --------------------------------------------------------------------------------- */
#calloutArea .col-lg-4 {
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%;
    margin: 0 auto;
}
#calloutArea .offset-lg-8 {
    margin-left: auto;
}
#calloutArea .intro, #calloutArea h3.main-title {
    text-align: center;
}
#calloutArea {
    background-size: cover;
    background-attachment: initial;
}
#calloutArea .vertCenter {
    padding: 50px 40px;
}
#mainContent .subheading, .sameStyles .subheading {
    padding: 0px 0 0;
}
.mainContent {
    padding: 45px 0;
}
body {
    font-size: 17px;
    line-height: 25px;
}
h2, .itemSection .content h2 {
    font-size: 30px;
    line-height: 32px;
}
#footerArea {
    font-size: 16px;
    line-height: 17px;
}
#footerArea .widget-area ul.menu li {
	line-height: 20px;
}
#productArea .col-lg-6 {
	-ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.prodDesc {
	margin-top: 25px;
}
.woocommerce-product-search button[type="submit"] {
	height:40px;
	padding: 8px;
	    font-size: 17px;
    line-height: 17px;
}
.woocommerce-product-search .search-field {
    height: 28px;
    font-size: 17px;
    line-height: 17px;
}
hr {
    margin: 25px 25%;
}
#faqArea h5.quesTitle {
    font-size: 18px;
    line-height: 21px;
}
h4.entry-title,
h4.catTitle,
h4.resourceCat {
    font-size: 28px;
    line-height: 28px;
}
.signupTable .btnSub .wpcf7-submit {
    padding: 12px 20px;
    font-size: 17px;
    line-height: 17px;
	height: 39px;
}
#videoList {
    width: 90%;
}
}