/*
Theme Name: Concept Art Empire
Author: CAE Team
Version: 1.2
*/

/***
 * CSS Styles Tabular Sorting
 * K00A - CSS Resets
 * K00B - Normalize
 * T00A - Typography
 * K00C - Page Structure
 * K00D - Navigation
 * K00E - Sidebar
 * K00F - Homepage
 * K00G - Archives
 * K00H - Single Posts
 * K00I - Footer
 * K00J - Pagination
 * K00K - Search
 * K00L - In-Post Native Block
 * K00M - Author Bio
 * K00N - Product UIs
 * K00Y - Dark UI Styles
 * K00Z - Clearfix
 * MISC - Miscellaneous
 * MQ00 - Media Queries
**/
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,700|Roboto+Condensed:400,700');

/** K00A CSS Reset **/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video { 
  vertical-align: baseline;
  outline: none;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

body { font-size: 62.5%; background: #d5dadf; }

img { border: 0; max-width: 100%; height: auto; }

ul { margin: 0; padding: 0; -webkit-margin-before: 0em;  -webkit-margin-after: 0em; }
ul, ol { margin-left: 25px; }

p { -webkit-margin-before: 0; -webkit-margin-after: 0; }

::selection { background: #c7f1b3; }
::-moz-selection { background: #c7f1b3; }

/** K00B normalize **/
html {
  font-family: Arial, Helvetica, sans-serif; 
  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%; 
  overflow-y: scroll;
}

body { margin: 0; }

article, aside, details, figcaption, figure,footer, header, main,  menu, nav, section, summary { 
  display: block;
}

audio, canvas, progress, video { display: inline-block; }


audio:not([controls]) { display: none; height: 0; }

progress { vertical-align: baseline; }


template, [hidden] { display: none; }
a { background-color: transparent; -webkit-text-decoration-skip: objects;  }

a:active, a:hover { outline-width: 0; }

abbr[title] {
  border-bottom: none; 
  text-decoration: underline; 
  text-decoration: underline dotted; 
}

b,strong { font-weight: inherit; }
b,strong { font-weight: bolder; }

dfn { font-style: italic; }

mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }

sub,sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

svg:not(:root) { overflow: hidden; }

code, kbd, pre, samp {
  font-family: monospace, monospace; 
  font-size: 1em; 
}

figure {
  /* reset chrome user agent styles */
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
}

hr {
  box-sizing: content-box; 
  height: 0; 
  overflow: visible; 
}

button, input, select, textarea { font: inherit; margin: 0; }

optgroup { font-weight: bold; }

button, input {  overflow: visible; }
button, select {  text-transform: none; }

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button; 
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  box-sizing: border-box; 
  color: inherit; 
  display: table; 
  max-width: 100%; 
  padding: 0; 
  white-space: normal; 
}
textarea { overflow: auto; }

[type="checkbox"], [type="radio"] {
  box-sizing: border-box; 
  padding: 0; 
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-input-placeholder { color: inherit; opacity: 0.54; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;  }



/*** T00A Typography ***/
h1, h2, h3, h4, h5, h6, ul, ol, blockquote { margin: 0; }
h1, h2, h3, h4 { color: #313131; font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; }

h1 { font-size: 4.1em; line-height: 1.15em; color: #313131; margin-bottom: 13px; }
h2 { font-size: 3.2em; color: #343434; margin-bottom: 6px; }
h3 { font-size: 2.6em; color: #414141; line-height: 1.2em; margin-bottom: 10px; }
h4 { font-size: 2.5em; color: #414141; line-height: 1.2em; margin-bottom: 15px; }
h5 { font-family: 'Ubuntu', Helvetica, sans-serif; font-weight: bold; font-size: 1.55em; letter-spacing: -0.01em; text-transform: uppercase; }

p { font-family: Arial, Helvetica, sans-serif; display: block; font-size: 1.7em; line-height: 1.5em; color: #444; margin-bottom: 22px; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { font-size: 1.65em; margin-bottom: 22px; color: #444; line-height: 1.55em; }

hr { border: 0; height: 3px; background: #eaeef5; margin: 11px 0; }
hr.spacer { margin-bottom: 22px; height: 2px; }

a { color: #4cb111; }
a:hover { text-decoration: underline; }
/** alternate anchor colors
 * #4eb512
*/

blockquote { 
  position: relative;
  background: #f1f1f1;
}
blockquote:before, blockquote:after {
    color: #ccc;
    font-size: 6.5em;
    position: absolute;
    line-height: 0.1em;
    font-family: 'Georgia', serif;
}
blockquote:before {
    content: "\201C";
    left: 7px;
    top: 30px;
}
blockquote:after {
    content: "\201D";
    right: 20px;
    bottom: 3px;
}
.fullpage blockquote p { padding:0; }
.fullpage blockquote p:last-child { margin:0; }

/*** K00C Page Structure ***/
.wrapper { display: block; max-width: 1140px; margin: 0 auto; }
/*** if updating this       ^ max-width be sure to change the first MQ00 media query value too!! **/

.bodywrap { display: block; background: #fff; padding-top: 15px; min-height: 500px; } 
/* 85px padding on top for fixed navbar space -- remove 70px if not fixed */

.pagewrap { display: block; float: left; margin-bottom: 20px; }

.content { display: block; padding-left: 20px; margin-right: 370px; }

.sidebar { float: right; width: 300px; margin-left: -320px; margin-right: 20px; }


.fullpage p, .fullpage ul, .fullpage ol, .fullpage h1, .fullpage h2, .fullpage h3, .fullpage h4, .fullpage h5, .fullpage h6, .fullpage .boxy, .fullpage .dual { padding: 0 45px; }
.fullpage blockquote { padding: 25px 45px; margin-bottom: 22px; }
.fullpage ul, .fullpage ol { margin-left: 25px; }

body.page .content ul, body.page .content ol { margin-left: 30px; }

/*** K00D Navigation ***/
.navbar { display: block; width: 100%; background: #212223; height: 70px; overflow: hidden; /*position: fixed; z-index: 99;*/ }
.topbar { width: 100%; }

.logo { display: block; float: left; padding-top: 5px; padding-left: 10px; }
.logo img.smlogo { display: none; }

.navigation { display: block; float: right; }
.navigation ul { margin: 0; list-style: none; }
.navigation ul li { display: block; float: left; }

.navigation ul li a { 
  display: block; 
  padding: 0 14px; 
  font-size: 0.85em;
  line-height: 70px;
  color: #ededed; 
  font-family: 'Ubuntu', 'Helvetica', sans-serif; 
  text-transform: uppercase; 
  font-weight: bold;
  text-decoration: none;
}
.navigation ul li a:hover { color: #8fc76e; }

.threebar { padding: 0 10px; color: #ededed; cursor: pointer; float: right; margin-right: 10px; }
.threebar.fa { display: none; position: relative; float: right; z-index: 99; font: normal normal normal 2.4em/70px FontAwesome; }


.searchicon {
  padding: 0 10px;
  color: #ededed;
  cursor: pointer;
  float: right;
  margin-right: 15px;
  position: relative;
  z-index: 99;
}
.searchicon .fa {
  font: normal normal normal 1.9em/70px FontAwesome;
}
.searchicon:hover, .threebar.fa:hover { color: #8fc76e; }


/** Search dropdown bar styles **/
.searchdropdown { 
  background: #212223;
  float: none; 
  display: block; 
  position: absolute; 
  width: 100%; 
  top: 70px;
  left: 0;
  height: 0px;
  z-index: 79;

  -webkit-transition: height 0.5s; 
  -moz-transition: height 0.5s; 
  transition: height 0.5s;
}
.searchdropdown form { display: none; text-align: center; }


.searchdropdown.show { height: 80px; }
.searchdropdown.show form { display: block; }

.dropdownsrch { display: block; padding-top: 15px; }
.dropdownsrch .searchfield { 
  display: inline-block;
  margin-right: 15px;
  padding: 6px 10px;
  border: 0;
  width: 70%; 
  color: #f1f1f1;
  background: #484c50; 
}


.dropdownsrch .searchsubmit { 
    position: relative;
    color: #fff;
    background: #6f9658;
    display: inline-block;
    padding: 12px 22px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-family: Ubuntu;
    font-size: 1.6em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: -0.01em; 
    text-shadow: none;
    box-shadow: none;
    margin: 0;
    top: -3px;

}
.dropdownsrch .searchsubmit:hover {
    color: #e9f8e3;
    background: #6a8e54;
    text-decoration: none; 
}



/*** K00E Sidebar ***/
.widget { display: block; margin-bottom: 40px; letter-spacing: -0.01em; }

.widget h3 { 
  display: block; font-family: 'Ubuntu', Helvetica, sans-serif; 
  font-size: 1.65em; 
  text-transform: uppercase; 
  color: #484848;
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}
.widget hr {
  margin: 0;
  margin-bottom: 10px;
  width: 25%;
  height: 3px;
  border: 0;
  background: #89b96d;
}

.recent-posts { max-width: 420px; margin: 0 auto; margin-bottom: 40px; }

.postlist { 
  display: block;
  list-style: none;
}
.postlist li { margin-bottom: 22px; }
.postlist a { width: 100%; }
.postlist h4 {
  display: block;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.05em;
  color: #414141;
}
.postlist a { text-decoration: none; }
.postlist a:hover h4 { text-decoration: underline; }


.postlist-sml {
  display: block;
  list-style: none;
}
.postlist-sml li {
  margin-bottom: 12px;
}
.postlist-sml a { width: 100%; color: #414141; }
.postlist-sml img { float: left; margin-right: 10px; width: 130px; margin-top: 2px; }
.postlist-sml a h4 { font-size: 1.1em; color: #414141; padding-left: 140px; margin-bottom: 5px; }


/* sidebar newsletter box styles */
.newsletter-signup { 
  display: block;
  background: #2a343e;
  margin-bottom: 30px;
  padding: 20px 15px;
  background-image: url('./images/email-envelope-icon@2x.png');
  background-repeat: no-repeat;
  background-size: 88px 60px;
  background-position: 97% 3px;
}
.newsletter-signup h3 { color: #fff; }
.newsletterbox { padding-top: 15px; }
.newsletterbox p { font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; color: #a9b2bc; line-height: 1.3em; margin-bottom: 25px; }

.newsletterbox .emailoptin { box-sizing: border-box; background: #fff; padding: 12px 6px; border-radius: 3px; border: 0; width: 100%; outline: none; font-family: 'Ubuntu', Arial, sans-serif; font-size: 1.25em; font-weight: bold; color: #515151; margin-bottom: 12px; }
.newsletterbox .emailbutton { display: block; background: #6f9658; border: 0; padding: 8px 5px; border-radius: 3px; width: 100%; outline: none; font-family: 'Ubuntu', Arial, sans-serif; font-size: 1.4em; font-weight: bold; text-transform: uppercase; color: #fff; letter-spacing: normal; }
.newsletterbox .emailbutton:hover { cursor: pointer; }


/*** K00F Homepage Styles ***/
.feature {
  display: block;
  width: 100%;
  height: auto;
  color: rgb(255, 255, 255);
  font-weight: bold;
  background: rgb(0, 0, 0);
  overflow: hidden;
  margin-bottom: 20px;
}
.feature a {
  display: block;
  position: relative;
  height: 100%;
  color: rgb(255, 255, 255);
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.feature a::before {
  bottom: 0;
  content: "";
  display: block;
  height: 80%;
  width: 100%;
  position: absolute;
  z-index: 2;
  background: -moz-linear-gradient(top, rgba(14,19,22,0) 0%, rgba(14,19,22,0.4) 60%, rgba(14,19,22,1) 100%);
  background: -webkit-linear-gradient(top, rgba(14,19,22,0) 0%,rgba(14,19,22,0.4) 60%,rgba(14,19,22,1) 100%);
  background: linear-gradient(to bottom, rgba(14,19,22,0) 0%,rgba(14,19,22,0.4) 60%,rgba(14,19,22,1) 100%);
}

.feature a img { opacity: 1; height: auto; }

.feature a h3 {
  position: absolute;
  z-index: 2;
  width: 100%;
  bottom: 0px;
  color: #ececec;
  font-size: 2.8em;
  text-shadow: rgba(0, 0, 0, 0.85) 1px 1px 2px;
  padding: 6px 10px;
}

.centerblock { display: block; text-align: center; margin: 0 auto; margin-bottom: 25px;  }



/*** K00G Archive Listing ***/
.heading-break { font-family: 'Ubuntu', Helvetica, sans-serif; border-bottom: 3px solid #eaeef5; display: block; margin: 0 0 1.5em 0; padding: 0 0 0.5em; text-transform: uppercase; font-size: 1.1em; color: #a0adb8; }
.article-list { display: block; }

.article { display: block; }
.article-list .clear { margin-bottom: 45px; }
.article .thumb { float: left; margin: 0 20px 3px 0; }

.article h3 { font-size: 3em; line-height: 1.15em; font-family: 'Roboto Condensed', Helvetica, sans-serif; }
.article h3 a { text-decoration: none; color: #444; }
.article h3 a:hover { text-decoration: underline; }

.catlist {  display: block; }
.catlist a { font-family: 'Ubuntu', Helvetica, sans-serif; text-transform: uppercase; background: #6f9658; padding: 6px 8px; border-radius: 3px; color: #fff; font-weight: bold; margin-right: 6px; }
.catlist a:hover { text-decoration: none; background: #61864b; }

.fullpage .catlist { margin-bottom: 22px; }

/*** K00H Single Post Styles ***/
.post-feature { display: block; margin-bottom: 15px; }

figure { display: block; margin-bottom: 25px; margin-left:0; margin-right:0; }
figcaption { padding-top: 3px; display: block; font-size: 1.4em; font-style: italic; color: #666; text-align: center; }
figure p { margin: 0; }

.post-feature .post-fixed-sizeimg { /* width: 750px; height: 330px; */ display: block; }

.post-feature figure { margin-bottom: 8px; margin-top: 0; /* fixes a FF bug */ }

.disclose {
  margin-top: -5px;
  display: block;
  margin-bottom: 15px;
  font-size: 1.35em;
  line-height: 1.3em;
/*  letter-spacing: -0.01em;
  text-transform: uppercase;*/
  font-family: 'Ubuntu';
  color: #666;
} 

.basecta {
  color: #fff;
  display: inline-block;
  padding: 11px 22px;
  margin-bottom: 10px;
  border-radius: 5px;
  font-family: Ubuntu;
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.midsize {
  padding: 9px 20px;
}
.smlsize {
  padding: 6px 16px;
}
.fullsize {
  width: 100%;
  text-align: center;
}

.ctapurp {
  background: #9e5c6d;
}
.ctapurp:hover {
  color: #f9e4ed;
  background: #925a68;
  text-decoration: none;
}

.ctagrn {
  background: #6f9658;
}
.ctagrn:hover {
  color: #e9f8e3;
  background: #6a8e54;
  text-decoration: none;
}

.ctaorng {
  background: #f8860f;
}
.ctaorng:hover {
  background: #e68117;
  text-decoration: none;
}

.ctararr:after {
  content: "\f061";
  font-family: FontAwesome;
  font-size: 1em;
  position: relative;
  padding-left: 10px;
  top: -1px;
}

.float-r .basecta {
    /* add space to CTAs floating underneath images */
    margin-top: 5px;
}


/*** K00I Website Footer ***/
.footer { display: block; width: 100%; max-width: 1080px; margin: 0 auto; padding-top: 30px; padding-bottom: 12px; border-top: 3px solid #eaeef5; }

.footlinks { display: block; text-align: center; margin-bottom: 5px; }
.footlinks ul { list-style: none; }
.footlinks li { float: left; margin-right: 20px; }
.footlinks li a { display: block; float: left; font-family: 'Ubuntu', Helvetica, sans-serif; font-size: 0.9em; letter-spacing: -0.01em; font-weight: bold; text-transform: uppercase; color: #97a6b2; }

.footer p { color: #adb8c1; font-family: 'Ubuntu', Helvetica, sans-serif; font-size: 1.1em; text-transform: uppercase; text-align: center; font-weight: bold; }



/*** K00J Pagination ***/
.wp-pagenavi { padding-top: 20px; margin-left: 0px; }
.pagewrap .wp-pagenavi span, .pagewrap .wp-pagenavi a { 
  display: inline-block;
  padding: 10px 18px;
  font-size: 1.4em;
  font-weight: 700;
  background-color: #ededed;
  color: #8d969e;
  border: 0;
  border-radius: 3px;
  margin-right: 4px;
  font-family: 'Ubuntu', Helvetica, sans-serif;
}

.pagewrap .wp-pagenavi span.current {
  background: #9da5ad;
  color: #fff;
}

.pagewrap .wp-pagenavi a:hover { 
  background: #e5e5e5;
  color: #767d84;
}


/*** K00K Search ***/

/* main search page form style */
.pagesearchform { 
  display: block;
  width: 100%;
}

.searchfield { 
  display: block;
  width: 100%; 
  padding: 6px 8px;
  color: #414141;
  font-size: 2.6em;
  outline: none;
}

.searchsubmit {
    cursor: pointer;
    margin: 0;
    border: 0;
    font-size: 1.7em;
    display: inline-block;
    width: 180px;
    margin: 15px 0;
    padding: 10px 15px 12px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 1px rgba(0,0,0,.1), inset 0 -10px 20px rgba(0,0,0,.1);
    background: #77bf4c;
    outline: none;
}

/* search results archive search form */
.searchform {
  display: block;
  width: 100%;
  margin-bottom: 18px;
}
.searchfieldflex {
  width: 78%; 
  padding: 2px 8px;
  color: #414141;
  font-size: 2.6em;
  outline: none;
}
.searchsubmitflex {
    cursor: pointer;
    margin: 0;
    border: 0;
    font-size: 1.7em;
    display: inline-block;
    width: 20%;
    padding: 10px 12px 10px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 1px rgba(0,0,0,.1), inset 0 -10px 20px rgba(0,0,0,.1);
    background: #77bf4c;
    outline: none;
    position: relative;
    top: -4px;
}



/*** K00L In-Post Native ***/
.inpostwrap { clear: both; } 
.inpostblk {
  display: block;
  padding: 6px 8px;
  margin-bottom: 4px;
  /* alt style with drop shadow
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
  */
  border-top: 3px solid #eaeef5;
  border-bottom: 3px solid #eaeef5;
}
.inpostdisclose {
  display: block;
  font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 1.1em;
  color: #bbb;
  margin-bottom: 22px;
}
.inpost-copy-wrap { float: left; width: 100%; }
.inpost-btn-wrap { position: relative; width: 150px; margin-left: -150px; float: right; }
.inpost-copy { margin-right: 150px; margin-left: 95px; }
.inpost-thumb { float:left; margin-left: -95px; }
.inpost-thumb-wide { display: none; }

.inpost-copy h4 { padding: 0; margin-bottom: 5px; color: #646464; line-height: 1.05em; }
.inpost-copy-parag { display: block; width: 100%; color: #5c5c5c; font-family: Arial, Helvetica, sans-serif; font-size: 1.4em; line-height: 1.45em; }


.inpost-cta { background: #6f9658; padding: 8px 12px; border-radius: 3px; font-family: 'Ubuntu', Helvetica, sans-serif; text-transform: uppercase; font-weight: bold; color: #fff; font-size: 1.25em; letter-spacing: 0.05em; position: relative; top: 32px; left: 20px; }



/*** K00M Author Bio Styles ***/
.authorbio { display: block; width: 100%; padding: 18px 0; padding-bottom: 0px; }
.authorbio img { width: auto; }

.authorpic, .wp-user-avatar, .avatar-default { border-radius: 50%; float: right; margin-left: 25px; height: 140px; }
.authorbio h4 { font-family: 'Ubuntu', Helvetica, sans-serif; text-transform: uppercase; font-weight: bold; font-size: 2em; color: #4e4e4e; letter-spacing: -0.01em; font-weight: bold; margin-bottom: 5px; } 
.authorbio p { font-size: 1.6em; line-height: 1.6em; margin-bottom: 20px; }

.authorcredit { color: #515151; display: block; margin-bottom: 1px; position: relative; top: -10px; font-size: 1.35em; font-family: Ubuntu; }



/*** K00N Product UI Elements ***/

/* Pros & Cons box */
.dual {
    display: block;
    width: 100%;
    margin-bottom: 30px;
}
.dual .pros, .dual .cons { 
  display: block;
  float: left;
  width: 48%;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}
.dual div:first-child { margin-right: 3% }

.dual .pros { width: 54%; }
.dual .cons { width: 42%; }

.dual h4 { 
  display: block;
  font-family: 'Ubuntu', Helvetica, sans-serif;
  font-size: 1.65em;
  padding: 0;
  text-transform: uppercase;
  color: #484848;
  margin-bottom: 7px;
  letter-spacing: -0.01em;
}
.dual hr {
  margin: 0;
  margin-bottom: 10px;
  width: 25%;
  height: 3px;
  border: 0;
}

.dual .pros hr { background: #89b96d; }
.dual .cons hr { background: #b05252; }

.dual .pros ul, .dual .cons ul { list-style: none; padding-left: 30px; margin-left: 0; }
.dual .pros ul li, .dual .cons ul li { position: relative; margin-bottom: 15px; line-height: 1.35em; font-size: 0.9em; }

.dual p { display: none; }

/** Pros & Cons check/minus icons **/
.dual .pros ul li:before {
  content: '';
    position: absolute;
    top: 1px;
    left: -30px;
    background: url('./images/green-dot-icon.png');
    background-size: 22px;
    width: 22px;
    height: 22px;
}

.dual .cons ul li:before {
  content: '';
    position: absolute;
    top: 1px;
    left: -30px;
    background: url('./images/red-dot-icon.png');
    background-size: 22px;
    width: 22px;
    height: 22px;
}

.dual.tagicns .pros ul li, .dual.tagicns .cons ul li { font-size: 1em; }
.dual.tagicns .pros ul li:before {
  background: url('./images/green-tag-icon.png');
    background-size: 26px;
    width: 26px;
    height: 26px;
}

.dual.tagicns .cons ul li:before {
  background: url('./images/red-tag-icon.png');
    background-size: 26px;
    width: 26px;
    height: 26px;
}


/* Table of Contents box */

/** table of contents **/
.toc {
  display: block;
  margin: 0 45px;
  margin-bottom: 30px;
  padding: 8px 15px;
  background: #f1f5f7;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}
.toc.fullwidth { margin-left: 0; margin-right: 0; }

.toc ul { padding: 0; margin-bottom: 0; list-style: none; width: auto; }
.fullpage .toc ul { margin-left: 0; }
.fullpage .toc h4 { margin-left: 0; margin-right: 0; }
.toc h4 { 
  display: block; 
  padding: 0; 
  margin-bottom: 15px; 
  color: #fff;
  text-transform: uppercase; 
  font-family: 'Roboto', sans-serif;
  font-size: 1.3em;
  padding: 5px 0px;
  letter-spacing: 0.02em;
}
.toc h4 span { background:#444;padding: 4px 8px; }
.toc.twocol ul { 
  width: 48%; 
  padding: 0;
  float: left;
  -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}
.toc.twocol ul:first-child { margin-right: 4% }
.toc.twocol ul li ul { margin-bottom: 15px; }

.toc ul li { display: block; margin-bottom: 9px; }
.toc ul li a { font-weight: bold; font-size: 0.95em; line-height: 0.7em; color: #6a6a6a; }
.toc ul li a:hover { color: #689e48; }

/* toc sub-menus */
.toc ul li ul { display: block; padding-left: 20px; padding-top: 3px !important; margin-bottom: 13px; width: 100% !important; float: none !important; }
.toc ul li ul li { padding-left: 5px; margin-bottom: 7px; line-height: 0.8em; margin-top: -5px; }
.toc ul li ul li a { font-size: 0.55em; font-weight: normal; letter-spacing: normal; line-height: 1em; }

.toc.twocol ul li ul li { padding-left: 15px; }

/* toc sub-sub-menus */
.toc ul li ul li ul li { line-height: 1em; margin-bottom: 0px; }
.toc ul li ul li ul li a { font-size: 0.7em; letter-spacing: normal; }

.toc p { margin-bottom: 0; display: none; /* fix bug w/ wordpress adding paragraphs */ }




/* "top pick" product box */
.pickbox {
  display: block;
  position: relative;
  padding: 15px 0;
  background: #fff;
  margin: 0 45px;
  margin-bottom: 25px;
  border: 2px solid #d4d4d4;
}
.pickbox.shadow {
  border-color: #dedede;
  border-width: 1px;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
}


.pickbox.fullwidth { margin-right: 0; margin-left: 0; }

.pickbox .pickcta { text-align: center; font-size: 1.6em; }
.pickbox .pickcta a { padding: 15px 20px; }

.pickbox .prodimg { display: block; position: relative; top: -20px; }
.pickbox .prodimg img {  float: right; max-width:260px; margin-left: 10px; }
.pickbox .prodimg.rmargin img { margin-right: 5px; }

.pickbox .prodimg.w350 img { max-width: 350px; }
.pickbox .prodimg.w325 img { max-width: 325px; }
.pickbox .prodimg.w300 img { max-width: 300px; }
.pickbox .prodimg.w280 img { max-width: 280px; }
.pickbox .prodimg.w250 img { max-width: 250px; }
.pickbox .prodimg.w235 img { max-width: 235px; }
.pickbox .prodimg.w220 img { max-width: 220px; }

.pickboxcontents { margin-top: 25px; }
.pickboxcontents h3, .pickboxcontents h4, .pickboxcontents h5, .pickboxcontents p, .pickboxcontents ul,.pickboxcontents ol { padding: 0 22px; }
.pickboxcontents h4, .pickboxcontents h5 { color: #515151; margin-bottom: 10px; }

.pickboxcontents ul { list-style: none; }
.pickboxcontents ul li { position: relative; margin-bottom: 15px; line-height: 1.2em; }
.pickboxcontents ul li:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -26px;
    background: url('./images/darkgreen-checkmark.png');
    background-size: 19px;
    width: 19px;
    height: 19px;
}


.ribbon {
  position: absolute;
  width: 150px;
  height: 40px;
  background: #21749a;
  left: -8px;
  color: #fff;
  font-size: 1.2em;
}
.ribbon:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-bottom: 8px solid #14455b;
  border-left: 8px solid transparent;
  top: -8px;
}
.ribbon:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  /* make sure border-top and border-bottom equal total height
  find height in .ribbon class and match them up */
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 15px solid #21749a;
  right: -15px;
}

.ribbon.green { background: #559534; }
.ribbon.green:after { border-left-color: #559534; }

.ribbon.liteblue { background: #4e97c6; }
.ribbon.liteblue:after { border-left-color: #4e97c6; }
.ribbon.liteblue:before { border-bottom-color: #4b7088; }

.ribbon.purple { background: #bc4ea1; }
.ribbon.purple:after { border-left-color: #bc4ea1; }

.ribbon span { width: 150px; display: inline-block; text-align: center; padding-top: 10px; font-weight: bold; font-family: 'Ubuntu', Arial, sans-serif; font-size: 1.3em; }



/* extra note w/ green background */
p.postnote {
  background: #cee9c3;
  border-radius: 3px;
  color: #4e6143;
}
p.postnote a, span.postnote a { color: #1f7fc3; }
.fullpage p.postnote { padding-top: 15px; padding-bottom: 15px; }

span.postnote {
  display: block;
  background: #cee9c3;
  border-radius: 3px;
  color: #4e6143;
  padding: 15px 10px;
}

/*** K00Y Dark UI Theme ***/
body.darkui { background: #212223; }
.darkui .bodywrap { background: #212223; }

.darkui .navbar { background: #161618; }

.darkui h1 { color: #dddddd; }

.darkui p { color: #ccc; }



/*** K00Z CSS Clearfix ***/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

.clear { float: none; clear: both; }


/*** MISC Miscllaneous Extras/Bug Fixes ***/
@-moz-document url-prefix() {
    /* Firefox doesn't respect max-width in certain situations */
    img { width: 100%; max-width: -moz-max-content; }

    /** Firefox fix on the logo size @2x **/
    .logo img.mainlogo { width:260px; }
    .logo img.smlogo { width:120px; }
}


.center { text-align: center; } /** used for centering images or media in posts **/
.float-l  { float:left; margin-right:10px; margin-bottom:5px; }
.float-r  { float:right; margin-left:10px; margin-bottom:5px; }

.displaynone { display: none !important; }

.xlg { margin-bottom: 35px; }
.xxlg { margin-bottom: 60px; }

.space5  { margin-bottom:5px; } 
.space10 { margin-bottom:10px; }
.space15 { margin-bottom:15px; }
.space20 { margin-bottom:20px; }

.crp_related { margin-bottom: 10px; padding-top: 15px; }
/* .crp_related h3 { text-align:center; } */
.crp_related div div { 
  width:32%; 
  float:left; 
  margin-right:1.5%;
  margin-bottom: 35px;
  max-height: 155px;
  font-weight: bold; 
  font-size: 1.9em; 
  font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; 
}
.crp_related div div:last-child { margin-right:0; }
.crp_related div div:nth-child(3) { margin-right:0; }
.crp_related div div a { color: #414141; }
.crp_related a.crp_title { display:block; padding: 0 10px; } 
.crp_related div div.crp_title { width: 100%; font-size: 1.1em; }

.crp_related div div.crp_title:hover { text-decoration: underline; }

/** Contact Form 7 custom restyling **/
.wpcf7 label { text-align: left; font-family: Ubuntu,sans-serif; font-weight: bold; font-size: 0.8em; color: #515151; }
.wpcf7 .wpcf7-text { text-align: left; margin: 0; width: 99%; max-width: 300px; padding: 1px 6px; font-size: 1em; font-family: Arial, sans-serif; font-weight: normal; }
.wpcf7 .wpcf7-textarea { text-align: left; margin: 0; width: 99%; max-width: 450px; height: 140px; padding: 4px 8px; font-size: 1.15em; font-family: Arial, sans-serif; font-weight: normal; }

.grecaptcha-badge { visibility: hidden; } 
/* hide reCAPTCHA badge from page; this is allowed according to Google's TOS/FAQ page https://developers.google.com/recaptcha/docs/faq */

.wpcf7-response-output { font-size: 1.8em; }

.wpcf7 .wpcf7-submit { 
	cursor: pointer; 
	display: inline-block;
	border: 0;
	width: 140px; 
	margin: 15px 5px; 
	padding: 10px 15px 12px; 
	font-size: 1.1em; 
	font-weight: bold; 
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 1px rgba(0,0,0,.1), inset 0 -10px 20px rgba(0,0,0,.1);
    background: #77bf4c; 
}

/** made for responsive embedded videos in posts **/
.video {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 /* hide b/c it adds extra black bars
  * padding-top: 25px;
 */
 height: 0; 
}
.video iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

/** responsive YouTube embeds with custom thumbnails
 ** original source https://www.labnol.org/internet/light-youtube-embeds/27941/ 
**/
.youtube-player {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */;
    /* Use 75% for 4:3 videos */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 10px;
}

.youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
}

.youtube-player img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
}

.youtube-player .play {
    height: 50px;
    width: 90px;
    left: 50%;
    top: 50%;
    margin-left: -45px;
    margin-top: -20px;
    position: absolute;
    background: url('./images/playbtn.png') no-repeat;
    cursor: pointer;
}


/*** MQ00 Media Queries ***/
@media(min-width: 1158px) {
  .pagewrap {
      width: 1140px;
  }
}

@media(max-width: 999px) {
  .inpost-btn-wrap {
    margin-left: 0;
    float: none; 
    display: block;
    padding-top: 20px;
    margin-bottom: 7px;
    width: 100%;
    text-align: center;
  }
  .inpost-copy-wrap { float: none; }
  .inpost-copy { margin-right: 0; }
  .inpost-cta { top: 0; left: 0; }
}

@media(max-width: 930px) {
  .article .thumb { width: 270px; }

  .pickbox .prodimg img, .pickbox .prodimg.w350 img, .pickbox .prodimg.w325 img, .pickbox .prodimg.w300 img, .pickbox .prodimg.w280 img, .pickbox .prodimg.w250 img, 
.pickbox .prodimg.w235 img, .pickbox .prodimg.w220 img { max-width: 220px; }

}

@media(max-width: 860px) {
  .sidebar { display: block; width: 100%; float: none; margin: 0 auto; text-align: center; }
  .content { margin-right: 20px; margin-bottom: 30px; max-width: 770px; }


  .sidebar .widget hr { margin: 0 auto; margin-bottom: 15px; } 

  .navbar .navigation { 
    float: none;
    background: #212223;
    position: absolute;
    top: 70px;
    left: 0;
    height: 0px;
    width: 100%;
    z-index: 89;

    /** disable text selection to fix a minor bug **/
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */

    -webkit-transition: height 0.3s; 
    -moz-transition: height 0.3s; 
    transition: height 0.3s;
  }
  .navbar .navigation ul { display: none; opacity: 0; text-align: center; }

  .navbar.show { height: 70px; }
  .navbar.show .navigation { float: none; height: 260px; margin: 0; padding: 0; z-index: 89; }
  .navbar.show .navigation ul { display: block; opacity: 1; }
  .navbar.show .navigation ul li { display: block; float: none; }
  .navbar.show .navigation ul li a { line-height: 50px; }
  .threebar.fa { display: block; visibility: visible; float: right; }

  .navigation ul li.animated {
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
  }

  .searchdropdown.show form { width: 100%; padding-right: 15px; padding-left: 15px; }
  .dropdownsrch .searchfield { width: 75%; }
  .dropdownsrch .searchsubmit { width: 20%; }

  .postlist-sml img { width: auto; float: none; margin: 0 auto; }
  .postlist-sml a h4 { font-size: 1.4em; padding-left: 0; }

  /* reset product image for now */
  .pickbox .prodimg img { max-width: 260px; }
  .pickbox .prodimg.w350 img { max-width: 350px; }
  .pickbox .prodimg.w325 img { max-width: 325px; }
  .pickbox .prodimg.w300 img { max-width: 300px; }
  .pickbox .prodimg.w280 img { max-width: 280px; }
  .pickbox .prodimg.w250 img { max-width: 250px; }
  .pickbox .prodimg.w235 img { max-width: 235px; }
  .pickbox .prodimg.w220 img { max-width: 220px; }
}

@media(max-width:750px) {
  .single-post .bodywrap { padding-top: 0; }
  
  .content.fullpage {     
     width: 100%;
     padding-left: 0px;
     padding-right: 0px;
     margin-right: 0;
  }
  .fullpage p, .fullpage ul, .fullpage ol, .fullpage h1, .fullpage h2, .fullpage h3, .fullpage h4, .fullpage h5, .fullpage h6, .fullpage .boxy, .fullpage .dual { padding: 0 35px; }
  .fullpage .dual h4 { padding: 0; }

  .dual .pros { width: 48%; }
  .dual .cons { width: 48%; }

  .toc { margin: 0 35px; margin-bottom: 30px; }
  .fullpage .toc ul { padding: 0; }
  .fullpage .toc h4 { padding-left: 0; margin-left: 0; }

  .pickbox { margin: 0 35px; margin-bottom: 30px; }
  .pickbox.fullwidth { border-left: 0; border-right: 0; padding-top: 10px; }
  .pickboxcontents h3, .pickboxcontents h4, .pickboxcontents h5, .pickboxcontents p, .pickboxcontents ul,.pickboxcontents ol { padding: 0 18px; }
}

@media(max-width:700px) {
  .crp_title { display: block; }
  .crp_related { text-align: center; }
  .crp_related div div { display:block; float:none; width:100%; font-size:2.2em; margin-bottom:35px; text-align:center; max-height: none; }
}

@media(max-width:600px) {
  .feature a h3 { font-size: 1.9em; line-height: 1.35em; }

  .searchdropdown.show form { padding-left: 10px; padding-right: 10px; }

  .dual .pros, .dual .cons { float: none; display: block; margin-right: 0; width: 100%; }
  .dual .pros {  margin-bottom: 35px; }

  .toc.twocol ul { float: none; display: block; width: 100%; }
  .toc.twocol ul:first-child { margin-right: 0; }

  .pickboxcontents { margin-top: 50px; }
  .pickbox .prodimg { display: block; width: 100%; position: relative; top: auto; text-align: center; }
  .pickbox .prodimg img { margin-left: 0; float: none; }
  .pickbox .prodimg.rmargin { margin-right: 0; }
  .pickbox .prodimg.mobhideimg, .pickbox .prodimg.mobhideimg img { display: none; }
  .pickbox .prodimg img, .pickbox .prodimg.w350 img, .pickbox .prodimg.w325 img, .pickbox .prodimg.w300 img, .pickbox .prodimg.w280 img, .pickbox .prodimg.w250 img, 
.pickbox .prodimg.w235 img, .pickbox .prodimg.w220 img { max-width: 100%; }
  
}

@media(max-width: 550px) {
  h1 { font-size: 3.5em; }
  h2 { font-size: 2.8em; } 

  .article .thumb { float: none; width: auto; }

  .fullpage p, .fullpage ul, .fullpage ol, .fullpage h1, .fullpage h2, .fullpage h3, .fullpage h4, .fullpage h5, .fullpage h6, .fullpage .boxy, .fullpage .dual { padding: 0 15px; }
  .fullpage blockquote { padding: 25px 45px; margin-bottom: 22px; } 

  .searchdropdown.show { height: 130px; }
  .dropdownsrch .searchfield { width: 100%; display: block; float: none; }
  .dropdownsrch .searchsubmit { width: 50%; margin: 0 auto; margin-top: 15px; }

  .toc { margin: 0 15px; margin-bottom: 30px; }
  .fullpage .toc ul { padding: 0; }
  .fullpage .toc h4 { padding-left: 0; margin-left: 0; }

  .pickbox { margin: 0 15px; margin-bottom: 30px; }

  .searchicon:hover, .threebar.fa:hover { color: #ededed; }
}

@media(max-width:480px) {
  .logo { padding-left: 10px; }
  .feature a h3 { font-size: 1.7em; line-height: 1.4em; font-weight: normal; }
  .sidebar { padding: 0 20px; }
  .recent-posts { max-width: 340px; }
  
  .footlinks li, .footlinks li a { float: none; }
  .footlinks li a { display: block; margin-bottom: 3px; }

  .searchfieldflex {
    width: 100%;
    padding: 2px 8px;
    color: #414141;
    font-size: 2.6em;
    outline: none;
  }
  .searchsubmitflex {
    display: block;
    width: 100%;
    top: 3px;
    padding: 5px 10px;
  }

  .inpost-thumb { display: none; }
  .inpost-thumb-wide { display: block; margin-bottom: 2px; }
  .inpost-copy { margin-left: 0; }
  
  .float-r { float: none; display: block; text-align: center; margin-left: 0; }

  .toc { margin: 0; margin-bottom: 30px; }
  .fullpage .toc h4 { padding-left: 0; margin-left: 0; }

  .pickbox { margin: 0; margin-bottom: 30px; border-left: 0; border-right: 0; }

  .threebar { margin-right: 15px; }
}

@media(max-width:400px) {
  .logo { padding-left: 10px; }
  .logo img.mainlogo { display: none; }
  .logo img.smlogo { display: block; }

  .authorbio h4 { display: block; width: 100%; text-align: center; }
  .authorpic, .wp-user-avatar, .avatar-default { display: block; margin: 0 auto; margin-bottom: 15px; float: none; }

  .searchicon { top: -1px; }
}

@media(max-width:350px) {
  .logo { width: auto; padding-top: 5px;} 
  .article h3 { font-size: 2.4em; }
}

/** adding this code helps fix oversized ads on mobile
 *  it's a temporary fix, really need to find a solution thru Mediavine
 *  for now it forces the main content into a max 310px width + 10px padding(total 320px)
 *  ads that overflow are just hidden -- oh well
 */
@media(max-width:330px) {
  html, body { overflow-x: hidden; }
  
  .content.fullpage {     
    max-width: 320px;
      padding-left: 0px;
      padding-right: 0px;
      margin-right: 0;
  }
  .fullpage p, .fullpage ul, .fullpage ol, .fullpage h1, .fullpage h2, .fullpage h3, .fullpage h4, .fullpage h5, .fullpage h6, .fullpage .boxy, .fullpage .dual { padding: 0 10px; }

  .sidebar { max-width: 320px; margin: 0; padding: 0; }
}
@media(max-width:310px) {
  .content.fullpage { max-width: 290px; }
  .sidebar { max-width: 290px; }
}