/*
Theme Name: Water Conditioning and Purification Magazine
Theme URI: http://www.wcponline.com
Author: Arizona Computer Guru
Author URI: http://www.azcomputerguru.com;
Description: A custom theme for wcponline.com, designed and built by Arizona Computer Guru
Version: 1.0
*/

/* Global color variables */

:root{
  --main-bg:#e4e4e4;
  --page-bg:#303030;
  --content-area-bg:#ffffff;
  --main-heading-color:#000000;
  --secondary-heading-color:#ffffff;
  --main-font-color:#282828;
  --nav-bg:#303030;
  --nav-bg-hover:#336c76;
  --subnav-bg-hover:#323232;
  --nav-link-color:#ffffff;
  --accent1:#336c76;
  --accent2:#265259;
  --accent-text:#ffffff;
}

/* Top-level styles */

*{transition: all 0.3s ease;}

body{
  display:grid;
  column-count:3;
  grid-template-columns:0.5fr minmax(20ch, 260ch) 0.5fr;
  grid-template-areas:"leftmargin content rightmargin";
  background:var(--main-bg);
  color:var(--main-font-color);
  font-size:16px;
  line-height:3ch;
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}
p{margin-bottom:2ch;}
img{max-width:100%;}

/* Structure Elements */

.left-margin{
  grid-column:1;
  grid-area:leftmargin;
}
.content-wrapper{
  grid-column:2;
  grid-area:content;
}
.right-margin{
  grid-column:3;
  grid-area:rightmargin;
}
main{
  background:var(--content-area-bg);
}

.flex-wrapper{display:flex;}

/* Global extras */

.alignleft{float:left;padding:0 2ch 2ch 0;}
.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.alignright{float:right;padding:0 0 2ch 2ch;}

[class*='box-']{}
.box-10{width:10%;}
.box-15{width:15%;}
.box-20, .box-5{width:20%;}
.box-25, .box-4{width:25%;}
.box-30{width:30%;}
.box-40{width:40%;}
.box-50, .box-2{width:50%;}
.box-60{width:60%;}
.box-70{width:70%;}
.box-80{width:80%;}
.box-90{width:90%;}
.box-1{width:100%;}
.box-3{width:33.3333333%;}
.box-6{width:16.666666%;}
.box-7{width:14.285714%;}
.box-8{width:12.5%;}
.box-9{width:11.111111%;}
.box-66{width:66.666666%;}

.post-meta{
  line-height:4ch;
  margin-bottom:2ch;
  font-style:italic;
}

.search-box{
  width:600px;
  position:fixed;
  bottom:0px;
  right:-525px;
  border:2px var(--accent-1) solid;
  z-index:10;
}
.search-box:hover{
  height:auto;
  position:fixed;
  bottom:0px;
  right:0px;
}
.search-box img{
  float:left;
  width:75px;
  font-size:2em;
  background:var(--accent1);
  padding:10px;
  border-top:2px #484848 solid;
  border-left:2px #484848 solid;
}
.search-box:hover img{
  position:absolute;
  bottom:9999px;
}
.searchform input[type=search]{
  width:80%;
  height:75px;
  margin:0;
  background:#efefef;
  padding:20px;
  font-size:1.5em;
}
.searchform input[type=submit]{
  width:20%;
  height:75px;
  margin:0;
  border:0;
  font-size:1.5em;
  background:var(--accent1);
  color:var(--secondary-heading-color);
  text-transform:uppercase;
  cursor:pointer;
}
.searchform input[type=submit]:hover{
  background:var(--accent2);
}

.pagination{
  margin:2ch auto 2ch auto;
  text-align:center;
}
.pagination a{
  display:inline-block;
  background:var(--accent1);
  padding:1ch;
  text-transform:uppercase;
  text-decoration:none;
  color:#ffffff;
}
.pagination a:first-of-type{margin-right:.7ch;}
.pagination a:last-of-type{margin-left:.7ch;}
.pagination a:only-child{margin-left:0;}

.cat-tag{
  width:100%;
  text-align:center;
  background:var(--accent1);
  color:var(--accent-text);
  padding:1rem;
}

/* Upper */

.upper{display:flex;}
.upper [class*='box-']{
  flex-grow:1;
  margin:2ch 0 2ch 0;
}
.upper [class*='box-']:first-of-type{padding-right:1ch;}
.upper [class*='box-']:last-of-type{padding-left:1ch;}
.upper .ad-wrapper{
  height:15ch;
  min-height:5ch;
}
.upper .ad-placeholder h1{top:35%;}

ul#glossaryList{column-count:4;}

/* Navigation */

.main-nav{
  width:100%;
  background:var(--nav-bg);
  z-index:10;
}
.mobile-nav > span{
  position:absolute;
  left:-9999px;
  font-size:0px;
}
.main-nav ul{
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-around;
}
.main-nav ul li{
  list-style-type:none;
  flex-grow:1;
  line-height:10ch;
  position:relative;
}
.main-nav ul li:hover{
  background:var(--nav-bg-hover);
}
.main-nav ul li a{
  font-size:1em;
  display:block;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  color:var(--nav-link-color);
}
.main-nav ul > li > ul{
  display:none;
  position:absolute;
  top:75;
  width:40ch;
  background:var(--nav-bg-hover);
}
.main-nav ul > li:hover > ul{
  display:block;
  z-index:100;
}
.main-nav ul > li > ul > li{
  background:none;
  line-height:1.5ch;
  font-size:.8em;
  padding:20px;
}
.main-nav ul > li > ul > li:hover{
  background:var(--accent2);
}
.main-nav ul > li > ul > li a{
	display:block;
	text-align:left;
}

/* Header / logo area */

.logo-wrapper{background:#ffffff;position:relative;z-index:0;}
.logo-wrapper.flex-wrapper{align-items: center;justify-content: center;padding-right:1rem;}
.logo{position:absolute;left:0;max-width:25%;z-index:-1;height:100%;}
.agua-link{
	padding:0.5rem 1rem 0.5rem 1rem;
	background:var(--accent1);
}
.agua-link a{
	text-decoration:none;
	color:#ffffff;
	text-transform:uppercase;
}
.agua-link:hover{
	background:var(--accent2);
}
.logo img{height:100%;width:auto;}
.tagline{width:100%;z-index:1;}
.tagline h1{
  width:100%;
  text-align:center;
  font-size:2.6em;
  text-transform:uppercase;
  font-weight:normal;
  line-height:6ch;
  color:var(--accent1);
}
.tagline h1 span{
  font-weight:bold;
}

/* Feature */

.feature{background:var(--page-bg);}
.feat-col{
  position:relative;
  margin:2ch 1ch 2ch 1ch;
  border:1px #565656 solid;
}
.feat-col:first-of-type{margin:2ch 1ch 2ch 2ch;}
.feat-col:last-of-type{margin:2ch 2ch 2ch 1ch;}
.feat-col-bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:0.8;
}
.feat-col-contents{
  position:absolute;
  bottom:0;
  width:100%;
  min-height:18ch;
  max-height:30%;
  overflow:hidden;
  padding:3ch;
  background:rgba(0, 0, 0, 0.75);
  color:#ffffff;
  z-index:1;
}
.feat-col .entry-title{
  font-size:1.2em;
  font-weight:normal;
  line-height:2.5ch;
  margin-bottom:.75ch;
  max-width:75%;
}
.feat-col:nth-of-type(1) .entry-title{
  font-size:1.6em;
  line-height:2ch;
  margin-top:1ch;
}
.feat-col:nth-of-type(3){
  background:var(--nav-bg);
	min-height:25vh;
}
.feat-col .more-link{
  position:absolute;
  bottom:30%;
  right:2ch;
  background:rgba(255, 255, 255, 0.5);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
  border:1px #ededed solid;
  color:#ffffff;
  text-decoration:none;
  text-transform:uppercase;
  padding:1ch;
}
.feat-col .more-link:hover{
  background:rgba(255, 255, 255, 0.8);
}
.feat-col:hover .feat-col-bg{
  opacity:1;
}
.feat-col:hover .feat-col-contents{
  background:rgba(0, 0, 0, 0.9);
}
.feat-col .entry-author{font-style:italic;}

/* Front page main content area */

main.front-page{
  background:#ffffff;
  padding-top:0;
}
main.front-page > section{padding:0ch 6ch 2ch 6ch;}
main.front-page > section:first-of-type{padding:6ch 6ch 4ch 6ch;}
main.front-page > section:last-of-type{padding:0ch 6ch 6ch 6ch;}

.section-heading-wrap{
  width:100%;
  border-bottom:2px var(--accent1) solid;
  margin-bottom:1ch;
}
.section-heading{
  display:inline-block;
  background:var(--accent1);
  color:var(--secondary-heading-color);
  font-size:2em;
  width:auto!important;
  text-align:center;
  text-transform:capitalize;
  font-style:italic;
  font-weight:normal;
  padding:0.5ch 1ch 0.5ch 1ch;
}
.item .entry-title{
  font-size:1.5em;
  line-height:2ch;
  font-weight:normal;
}
.item .more-link{
  position:absolute;
  bottom:2ch;
  right:2ch;
  background:var(--accent1);
  color:var(--nav-link-color);
  text-decoration:none;
  text-transform:uppercase;
  padding:1ch;
}
.item .more-link:hover{
  background:var(--accent2);
}

.content-features{}
.content-features .content-feature:first-of-type{padding-right:1ch;}
.content-features .content-feature:last-of-type{padding-left:1ch;}

.content-features-item-bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:0.8;
}
.content-features-item-contents{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  min-height:12ch;
  max-height:20%;
  overflow:hidden;
  padding:2ch;
  background:rgba(0, 0, 0, 0.75);
  color:#ffffff;
  z-index:1;
}
.content-features-item-contents .entry-title{
  font-size:1.1em;
  font-weight:bold;
  line-height:2ch;
  margin-bottom:.50ch;
  max-width:75%;
}
.content-features-item-contents .post-meta{
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:0;
}
.content-features-item-contents .more-link{
  position:absolute;
  bottom:30%;
  right:2ch;
  background:rgba(255, 255, 255, 0.5);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
  border:1px #ededed solid;
  color:#ffffff;
  text-decoration:none;
  text-transform:uppercase;
  padding:1ch 2ch 1ch 2ch;
}
.content-features-item-contents .more-link:hover{
  background:rgba(255, 255, 255, 0.8);
}
.content-features-item-contents .entry-author{font-style:italic;}

.recent-issues{margin-bottom:2ch;}
.recent-issues .item{
  margin:1ch 0.5ch 1ch 0.5ch;
  width:12.5%;
  background-size:contain!important;
  position:relative;
  opacity:0.75;
  max-height:360px;
}
.recent-issues .item:hover, .recent-issues .item.current-issue{opacity:1;}
.recent-issues .item:first-of-type{padding-left:0;}
.recent-issues .item:last-of-type{padding-right:0;}
.recent-issues .item a{
  display:block;
  text-align:center;
  text-decoration:none;
  height:100%;
}
.recent-issues .item a img{width:100%;}
.recent-issues .item a p{
  width:100%;
  line-height:4ch;
  border-top:2px var(--accent2) solid;
  background:var(--accent1);
  color:var(--accent-text);
  margin:-1ch 0 0 0;
}
.current-issue-label{
  position:absolute;
  top:0;
  right:0;
  padding:1ch;
  font-size:.8em;
  text-transform:uppercase;
  border-left:2px var(--accent2) solid;
  border-bottom:2px var(--accent2) solid;
  background:var(--accent1);
  color:var(--accent-text);
}
.content-bottom .item{}
.writer-thumb{margin:0 2ch 2ch 0;}
.content-bottom .sy-box{margin-bottom:8ch;}
.front-page [class*='box-']{padding:1ch 1ch 1ch 1ch;}
.front-page [class*='box-']:first-of-type{padding:1ch 1ch 1ch 0;}
.front-page [class*='box-']:last-of-type{padding:1ch 0 1ch 1ch;}
.front-page [class*='box-'] .item{
  border:1px #d8d8d8 solid;
  position:relative;
  padding:1ch;
  height:90%;
  z-index:10;
}
.front-page .post-meta{
  padding-bottom:2ch;
  margin-bottom:2ch;
  border-bottom:1px #646464 solid;
}
.front-page .content-feature [class*="box-"] .item{
  height:100%!important;
}

/* Front Page Extras */

.front-page .content-bottom{
	margin-top:4rem;
}

.issue-dropdown{
  width:100%;
  flex:8;
}
.issue-dropdown select{
  padding:2rem;
  width:100%;
}
.digital-magazine-link{
	flex:2;
}
.front-page .content-bottom h2{
	font-size:3rem;
	line-height:3rem;
	margin-bottom:2rem;
}

/* Single post page */

main.single-post{display:flex;}

.single-post .post{
  padding:0 4ch 4ch 4ch;
  width:60%;
  border-top:2ch var(--page-bg) solid;
  border-bottom:2ch var(--page-bg) solid;
}
.single-post .post-content{
  font-size:1.2em;
  line-height:3ch;
}
.left-sidebar{padding-right:2ch;}
.right-sidebar{padding-left:2ch;}
.post .title{
  font-size:2.8em;
  font-weight:normal;
  line-height:1.2em;
  border-bottom:1px var(--page-bg) solid;
  margin-top:0.5em;
  margin-bottom:0.5em;
}

/* Category Posts Page */

main.category-posts{
  display:flex;
  background:var(--page-bg);
}

.category-posts article{padding:1ch;}

.category-posts article > div{
  background:#ffffff;
  padding:2ch;
  height:100%;
}

.category-posts .title{
  font-size:3ch;
  padding-bottom:1ch;
}

.category-posts .more-link{
  display:block;
  width:140px;
  background:var(--accent1);
  color:#ffffff;
  text-decoration:none;
  text-transform:uppercase;
  text-align:center;
  padding:1ch;
  margin-bottom:2ch;
}
.category-posts .more-link:hover{
  background:var(--accent2);
}

.category-contents{
  display:flex;
  flex-wrap:wrap;
  max-width:60%;
  padding-top:2ch;
  padding-bottom:2ch;
}

.category-contents [class*='box-']{
  flex-grow:1;
  margin:0!important;
}

/* Search Page */

.results-contents{
  max-width:60%;
  padding-top:2ch;
  padding-bottom:2ch;
}

.search-page article{
	width:100%;
	padding:0!important;
}
.search-page article:nth-of-type(1) > div{padding-top:2rem!important;}
.search-page article > div{
	padding:0rem 0rem 2rem 2rem;
}
.search-page .title{
	border:0px!important;
	font-size:2.2rem;
	padding-bottom:.5rem;
	font-weight:normal!important;
}
.page-title{
	color:#fff;
	font-size:3rem;
	margin-bottom:1rem;
}

/* Post-specific */

.post li{
  margin-left:20px;
}

/* Footer */

.front-page footer{
  padding:0ch 0 2ch 0;
  border-bottom:1px #484848 solid;
}
footer{
  padding:2ch;
}
footer .footer-logo{
  width:80%;
}
footer h2{
	margin-bottom:0.5rem;
}

/* By Issue Pages */

.by-issue-page.flex-wrapper{
	flex-wrap:wrap;
}
.by-issue-page.flex-wrapper > div{
	width:25%;
	text-align:center;
}
.by-issue-page.flex-wrapper > div img{
	display:block;
	width:100%!important;
	height:auto;
	padding:1rem;
}

/* Copyright section */

.credit{background:var(--main-bg);}
.credit p{line-height:6ch;text-align:center;}
.credit a{text-decoration:none;}

/* Sidebars */

.sidebar{padding:2ch;}
.left-sidebar, .right-sidebar{
  background:var(--page-bg);
  width:20%;
}
.sidebar .widget{
	margin:0 0 2ch 0;
	
}
.sidebar .widget h2{
  background:var(--accent1);
  color:var(--secondary-heading-color);
  font-size:2rem;
  width:auto!important;
  text-transform:capitalize;
  font-style:italic;
  font-weight:normal;
  padding:0.5ch 1ch 0.5ch 1ch;
}
.sidebar .textwidget{
	background:#ffffff;
	padding:2rem;
}

/* Ads */

main.front-page .g-single{border:1px #d8d8d8 solid;}
.g img{width:100%;max-height:100%;}
.g-col{width:100%;}
.g-3, .g-15, .g-17, .sidebar .a-single img{
  width:100%!important;
  max-width:100%!important;
}
.g-{
  margin-bottom:1.5rem!important;
}

/* Sabai Overrides */

.sabai-entity-bundle-name-producttradeshow_listing .sabai-navigation-bottom,
.sabai-entity-bundle-name-producttradeshow_listing .sabai-nav-tabs,
.sabai-entity-bundle-name-producttradeshow_listing #sabai-inline-content-reviews, .sabai-entity-bundle-type-directory_listing .sabai-btn-toolbar{display:none!important;}

/* Event Overrides */

.single-event .post-meta{display:none!important;}

/* Other */

.page-id-50 .flex-wrapper > div:first-of-type{flex:1;}
.page-id-50 .flex-wrapper > div:last-of-type{flex:4;}

/* Subscribe form overrides */

#mc_embed_signup_scroll input:not([type=checkbox]):not([type=radio]),
#mc_embed_signup_scroll textarea,
#mc_embed_signup_scroll select{
	width:50%;
	padding:1rem;
	font-size:1.2rem;
}
#mc_embed_signup_scroll label, #mc_embed_signup_scroll strong{
	font-size:1.6rem!important;
	line-height:3rem!important;
}

/* Media Queries / Responsive */

@media (max-width:2400px){body{grid-template-columns:0.5fr minmax(20ch, 225ch) 0.5fr;}}
@media (max-width:2200px){body{grid-template-columns:0.5fr minmax(20ch, 210ch) 0.5fr;}}
@media (max-width:2000px){
    body{grid-template-columns:0.5fr minmax(20ch, 190ch) 0.5fr;}
    .front-page [class*="box-"] .item{padding-bottom:2ch;font-size:0.8em;}
}

@media (max-width:1800px){
  body{grid-template-columns: 0.5fr minmax(20ch, 170ch) 0.5fr;}
  .feature{grid-template-columns:minmax(60ch, 400ch) minmax(30ch, 100ch) minmax(30ch, 100ch);}
  .ad-wrapper h1{font-size:1rem!important;}
  .recent-issues .item{max-height:260px;}
  .front-page [class*='box-'] .item{font-size:0.7em;line-height:2rem;}
  .feat-col:nth-of-type(1) .entry-title{font-size:1.2em;}
  .feat-col .entry-title{font-size:1em;}
  .feat-col-contents{min-height:12ch;}
  .feat-col .more-link{padding:0.5em;font-size:.8em;}
  ul#glossaryList{column-count:3;}
}

@media (max-width:1600px){
  body{grid-template-columns: 0.5fr minmax(20ch, 150ch) 0.5fr;font-size:14px;}
  .front-page [class*='box-'] .item{line-height:1.5em;}
  .recent-issues .item{height:32ch;}
  .upper
  .main-nav ul li a{font-size:.8em!important;}
  .ad-wrapper h1{font-size:1em!important;}
  .feature{grid-template-columns:1fr 1fr 1fr;}
  .feat-col-contents{padding:2ch;min-height:14ch;max-height:30%;}
  .feat-col .entry-title{font-size:1.2em;font-weight:normal;line-height:2ch;margin-bottom:.75ch;}
  .feat-col .more-link{bottom:1ch;right:1ch;padding:0.5ch;}
  main > section{padding:4ch 6ch 0 6ch;}
  .recent-issues .item{max-height:180px;}
}

@media (max-width:1200px){
  body{font-size:12px;}
  ul#glossaryList{column-count:2;}
}

@media (max-width:1000px){
  body{font-size:16px;overflow-x:hidden;}
  .content-wrapper{padding:0;}
  main{padding-right:2.5ch;}
  main > section, .content-feature{padding:0ch 0ch 8ch 0ch!important;}
  .flex-wrapper{display:block;}
  .mobile-nav > span{
    position:static;
    font-size:1.5em;
    color:var(--nav-link-color);
    padding:2ch;
    line-height:4ch;
  }
  .main-nav{
    position:fixed;
    bottom:0;
    background:var(--accent1);
    z-index:100;
  }
  .mobile-nav ul{
    display:none;
    background:var(--nav-bg);
    columns:2;
  }
  .mobile-nav:hover ul{
    display:block;
  }
  .main-nav ul li{
    line-height:4ch;
  }
  .main-nav ul li a{
    text-align:left;
    font-size:.8em;
    padding-left:2ch;
  }
  .tagline{font-size:1rem;}
  .feature{
    grid-template-columns:repeat(auto-fill, 100%);
    grid-template-areas:
    "featcol1"
    "featcol2"
    "featcol3";
  }
  .feat-col{min-height:40ch;margin:1ch 0 1ch 0!important;border:0!important;}
  .feat-col .entry-title{max-width:90%;}
  .feat-col:first-of-type .entry-title{font-size:2rem;}
  main.front-page{padding:1ch;}
  .columns-area{padding:0;padding-top:3em;}
  .content-features{grid-template-columns:repeat(auto-fill, 100%);}
  .content-features .content-feature:first-of-type, .content-features .content-feature:last-of-type{padding:0;}
  [class*='box-']{width:100%;padding:1ch 0 1ch 0!important;}
  [class*='box-'] .item, main .ad-wrapper div{min-height:40ch!important;}
  .recent-issues .flex-wrapper{display:flex;flex-wrap:wrap;}
  .recent-issues .item{width:100%;height:auto;}
  .recent-issues .item, .recent-issues .item:first-of-type, .recent-issues .item:last-of-type{padding:0ch;margin:2ch 10% 2ch 10%;}
  .recent-issue-thumb{width:100%;}
  main.single-post,main.category-posts{flex-direction:column;}
  .left-sidebar, .right-sidebar, .single-post .post,.category-contents{width:100%;max-width:100%;margin:1ch 1ch 1ch 1ch!important;}
  .g-3{max-width:100%!important;}
  .alignleft, .alignright, .aligncenter{display:block;margin:20px auto 20px auto;width:100%;float:none!important;}
  nav > div > div > ul > li{width:100%!important;border-bottom:1px #464646 solid;}
  nav > div > div > ul > li > ul{display:none!important;}
  nav > div > div > ul > li:hover ul{display:block!important;}
  nav > div > div > ul > li:hover ul{columns:1!important;}
  nav > div > div > ul > li:hover ul > li{
    line-height:.8ch;
    background:var(--page-bg)!important;
    border-bottom:1px var(--subnav-bg-hover) solid;
  }
    nav > div > div > ul > li:hover ul > li:hover{
      background:var(--accent1)!important;
    }
  .search{
    width:100%;
    bottom:50px;
    right:0px;
    border-bottom:5px var(--page-bg) solid!important;
  }
  .search:hover{bottom:50px;}
  .searchform.flex-wrapper{display:flex;}
  .search img{display:none;}
  .searchform input[type="search"],.searchform input[type="submit"]{
    font-size:1em;
    height:50px;
  }
  .credit p{font-size:.8em;line-height:2.5ch;padding:2ch;}
}


@media (max-width:700px){
  .tagline{font-size:0.7rem;margin-top:4ch;}
}
@media (orientation:portrait) and (max-width:1000px){
    .tagline{font-size:0.5rem;}
    .logo-wrapper h1{margin-top:0;}
    .upper{display:none;}
	.agua-link{display:none;}
}