/*
Theme Name: SmartAquariumGuide
Theme URI: 
Author: SmartAquariumGuide
Author URI: 
Description: Smart is a super fast theme.
Requires at least: WordPress 5.0
Version: 1.0.0
License:
License URI:
Text Domain:
Tags: 

*/

/* 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, ruby, section, summary, time, mark, audio, video
{ margin: 0; padding: 0; border: 0; vertical-align: baseline; font: inherit;  font-size: 100%;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {  display: block;}
html { margin: 0; padding: 0; font-size: 62.5%;  -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
*, ::after, ::before { box-sizing: inherit; }
ol, ul { list-style: none;}
blockquote,q { quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after { content: ''; content: none;}
table{max-width:100%;background-color:transparent;border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:20px;border-bottom:1px solid #E3E4E5}
table th,table td{padding:8px;line-height:20px;vertical-align: middle;border-top:1px solid #eee;text-align:center}
table thead th{vertical-align:bottom;text-align:left}
table .even{background:#FAFAFA}
table colgroup + thead tr:first-child th,table colgroup + thead tr:first-child td,table thead:first-child tr:first-child th,table thead:first-child tr:first-child td{border-top:0}
table tbody + tbody{border-top:2px solid #E3E4E5}
button,input,select,textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button,input { line-height: normal; *overflow: visible; }
button, html input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid #dddddd;
  border-color: #ccc #ccc #bbb #ccc;
  border-radius: 3px;
  background: #e6e6e6;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  -webkit-appearance: button;
  font-size: 12px;
  font-size: 1.4rem;
  line-height: 1;
  padding: 1.12em 1.5em 1em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: #ccc #bbb #aaa #bbb;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
html input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
  border-color: #aaa #bbb #bbb #bbb;
  -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box;  box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
input[type=text],
input[type=email],
textarea {
  color: #888888;
  border: 1px solid #dddddd;
  border-radius: 5px;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
  color: #101010;
}
input[type=text],
input[type=email] {
  padding: 3px; width:100%;
}
textarea { overflow: auto;  padding: 10px;  vertical-align: top;  width: 98%; }
/* styles
-------------------------------------------------------------- */
body, button, input, select { padding: 0; margin: 0; background: #ffffff; color: #222; font-family: Helvetica, Arial, sans-serif; line-height: 32px; font-size: 22px; word-wrap: break-word;}
header { background-color:#355b6c; color: #fff}
footer { background:#355b6c; color:#fff}
/* typography
-------------------------------------------------------------- */
/* Headings */
h1, h2, h3, h4,h5, h6 { clear: both; margin: 20px 0 20px 0; font-weight: bold; color: #222; line-height: 50px; }
h1 { font-size: 40px;text-transform:capitalize}
h2 { font-size: 35px; text-transform:capitalize}
h3 { font-size: 30px; text-transform:capitalize}
h4 { font-size: 20px;}
img {  max-width: 100%; height: auto;}
img.aligncenter { width:100%!important}
hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; }
.video-container {position: relative;	padding-bottom: 56.25%;	padding-top: 30px;	height: 0; overflow: hidden; margin: 0 0 20px 0}
.video-container iframe,
.video-container object,
.video-container embed {position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;}

/* Text elements */
p { margin-bottom: 20px; }
br { margin-bottom: 20px; display: block; content: " ";}
ul, ol { margin: 0 0 20px 40px;}
ul { list-style: disc;}
ol { list-style: decimal;}
ul ul, ol ol, ul ol, ol ul {  margin-bottom: 0; margin-left: 20px;}
dt { font-weight: bold;}
dd { margin: 0 1.5em 1.5em;}
b, strong { font-weight: bold;}
dfn, cite, em, i { font-style: italic;}
blockquote { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin: 0 0 20px 0; padding: 40px;  overflow: auto; max-width: 100%; background: #fafafa; border: 1px solid #ccc; border-radius: 3px;}
blockquote p { margin: 0; padding: 0}
/* Links */
a { color: #168dd9; -webkit-transition: color 0.25s ease-in-out; -moz-transition: color 0.25s ease-in-out; -o-transition: color 0.25s ease-in-out; -ms-transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out; text-decoration: none;}
a:hover, a:focus, a:active { color: #50a9e2;}
/* Alignment */
.alignleft { display: inline; float: left; margin-right: 20px; }
.alignright { display: inline; float: right; margin-left: 20px;}
.aligncenter { clear: both; display: block; margin: 0 auto;}
/* Layout
-------------------------------------------------------------- */
.container { max-width: 1140px; padding: 20px;  margin: 0 auto;  position: relative; }
.single .container, .page .container { max-width: 800px;  padding: 20px;  margin: 0 auto;  position: relative; }
.row {	display: flex; flex-direction: column; flex-flow: row wrap;	justify-content: left; }
.post-card { margin:0;	padding:20px;  position:relative;  }
.reco { margin:0; padding:10px;  position:relative;  }

/* Header
-------------------------------------------------------------- */
header { padding:0; margin: 0 auto;}
header #brand {clear: both; display: block; margin: 0 auto 20px auto; text-align: center;}
header #brand img { width:350px; height:96px}
header nav { display: block; margin: 0 0 20px 0; position: relative;}
header nav ul { text-align: center; list-style: none;  margin: 0; }
header nav ul li { margin:0 5px;display: inline-block;  padding: 0; position: relative; text-decoration: none; transition-duration: 0.5s;}
header nav ul li a { color: #fff; font-size: 22px; font-weight: bold;}
header nav ul li a:hover { color: #ffa200; }
header nav ul li ul { z-index: 99; background:#fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0; position: absolute; left: 0;display: none; transition: all 0.5s ease;margin: 0; padding:0; }
header nav ul li:hover > ul,
header nav ul li ul:hover { visibility: visible; opacity: 1; display: block; min-width: 180px}
header nav ul li ul li { clear: both; width: 100%; margin: 0; padding:4px 10px; text-align:left}
header nav ul li ul li a {font-size: 18px; line-height:20px display: block; color:#222}
header nav ul li ul li a:hover { background: none; color: #ffa200}

#home {  text-align: center; color: #fff; padding: 40px 0}
#home h1 { color: #fff; margin: 0 0 40px 0; font-size: 60px; line-height: 80px}
#home h2 { color: #fff; margin: 0 0 40px 0; font-size: 30px; line-height: 60px}
#home .button { display: inline;  }
#home .button-a {min-width: 50px; margin: 0 10px 20px 10px;}
#home #searchform { opacity: 0.8; width:80%; margin: 0 auto 40px auto; border:none; box-sizing: border-box; }
#home #searchform input[type=text] {border-radius:30px; outline: 0; padding: 8px 20px; }
ul.list-pages li a.active {color:#333}

.category-title, .category-description { text-align: center;}
 
/* Posts/Articles
-------------------------------------------------------------- */
article { background: transparent; padding: 0;  margin: 0}
article.error {text-align: center; padding: 60px 0; width: 100%}
article .title a { text-decoration: none; color: #333; }
article .title a:hover { color: #ffa200;}
article .title span { color:#ccc; font-size: 30px; vertical-align: middle; text-transform:uppercase; font-weight:normal}
article .post-meta { margin-bottom: 20px; font-size: 15px; line-height: 40px}
article .post-meta a { color: #888888; text-decoration: none;}
article .post-meta a:hover { color: rgba(136, 136, 136, 0.5);}

article .the-content { text-wrap: wrap;}
article .the-content a { text-decoration: underline; }
article .the-content img {  height: auto;}
article .post-meta img.avatar {  float: left; margin: 0 10px 0 0}
article .post-card h2, article .reco h3 { font-size: 30px; line-height: 35px; bottom:25px; margin:0; padding:0; border-radius:0; display: block; width:100%; padding:10px 20px; box-sizing: border-box; text-align: center;}
article .post-card a, article .reco a { color:#222;}

.featured { position: relative}
.featured img {box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border-radius: 6px;}

.the-tags { margin-bottom:20px; font-size:16px;}

.avatar {border-radius: 50%;}
.author { background: #fafafa; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin: 0 0 20px 0; padding: 20px; border: 1px solid #ccc; border-radius: 3px; font-size: 90%; min-height: 100px;}
.author img { border-radius: 50%; float: left; margin: 0 20px 20px 0;}
/* Page loop styling */
.page article { border-bottom: none; }
.page article .title { margin-bottom: 40px; }
/* Pagination */
.pagination { text-align: center;}
.pagination li a, .pagination li a:hover, .pagination li.active a, .pagination li.disabled { color: #fff; text-decoration:none; }
.pagination li { display: inline; }
.pagination li a,
.pagination li a:hover,
.pagination li.active a,
.pagination li.disabled { background-color: #999; border-radius: 3px; cursor: pointer; padding: 6px 12px;}
.pagination li a:hover, .pagination li.active a {  background-color: #777; }

.recommended {}
.recommended ul { margin: 0}
.recommended ul li { list-style: none;}
.recommended h3 { font-size:20px!important; line-height:25px!important; font-weight:400}
/* Comments */
.comment-form label { display: inline-block; width: 80px}
.commentlist { list-style: none;  margin: 0;}
.commentlist .comment { margin: 0 0 40px 0; padding: 20px; position: relative; list-style: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 3px}
.commentlist .comment .children {  margin-top: 40px; }
.commentlist .comment-author { float: left; margin-right: 10px;}
.commentlist .comment-author img { position: absolute;  left: -50px;  top: 5px;}
.commentlist .comment-author .says {  display: none;}
.comment-meta { font-size: 12px; margin-bottom: 10px; clear: both; line-height: 50px}
.comment-meta img.avatar { float: left; margin: 0 10px 0 0}
.comment-meta .fn { font-size: 20px; font-weight: bold; font-style: normal;}
.comment-meta .reply { position: absolute; bottom: 0; right: 20px; font-size: 15px;}
.comment-meta .comment-date { float: right; font-size: 15px;}
.comment-meta .comment-date a { color: #ccc}
.comment-subscription-form, .comment-subscription-form {  margin-bottom: 0;  font-size: 14px; }
#respond { margin-bottom: 40px; width: 100%; position: relative;}
#respond #cancel-comment-reply-link { position: absolute; top: 0; right: 20px; font-size: 15px;}
#searchform input[type=text] { padding: 8px; line-height: 30px}
footer { text-align: center; padding: 40px 0; }
footer nav { display: block; margin: 20px 0}
footer nav ul { text-align: center; list-style: none;  margin: 0; }
footer nav ul li { margin:0 5px; display: inline; }
footer nav ul li a { color: #fff;  }
footer nav ul li a:hover { color: #ffa200;  }
/* Misc & mixens
-------------------------------------------------------------- */
.clear { clear: both; }
/* clear floats */
.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%;}

/* From WordPress defaults
-------------------------------------------------------------- */
.wp-caption, .gallery-caption {	color: #666; font-size: 13px;	font-style: italic;	max-width: 100%; text-align: center;}
.wp-caption img[class*="wp-image-"] {	display: block;	margin-left: auto;	margin-right: auto;}
.wp-caption .wp-caption-text {	margin: 5px 0; }
.wp-caption.aligncenter { width:100%!important}
.wp-caption.aligncenter img {width:100%!important}

.amazon-link, a.amazonn, a.sag { width:250px; min-height: 220px; text-align:center; float:right; background:none; position:relative; margin:0 0 40px 20px; text-align: center!important;}
.amazon-link .alignright, a.amazonn .alignright,a.sag .alignright { float: none}
.amazon-image, img.amazonn, img.sag { max-width:250px; border:0px; margin:0 auto!important; }
.amazon-link span, a.amazonn span, a.sag span{ width:230px; color:#FFFFFF;background:rgba(222,74,58,0.9); padding:10px 10px; position:absolute; bottom:-40px; left:0; font-weight: bold; border-radius: 6px;}
.amazon-link:hover span, a.amazonn:hover span, a.sag:hover span {background:rgba(0,124,197,0.9);}

a.azon { width:250px; min-height: 220px; text-align:center; float:right; background:none; position:relative; margin:0 0 20px 20px; text-align: center!important;}
a.azon .alignright { float: none}
img.azon { max-width:250px; border:0px; margin:0 auto!important; }
a.azon span{ width:210px; background: #ed5732; color:#fff; border-radius:6px; padding:10px 10px; position:absolute; bottom:-20px; left:50%; margin-left: -115px; font-weight: bold;}
a.azon:hover span {background:#007fc5;}

.button-a, .button-name { background:#ed5732; color: #fff; display:block; text-align:center; border-radius: 6px; font-size: 20px; line-height: 25px; margin:10px 0 0 0; padding:15px 20px; text-decoration: none!important; min-width:250px;position: relative; font-weight: bold;}
.button-a span { }
.button-a:hover { background:#007fc5!important; color:#fff; }
.button { display:block; text-align:center; margin:20px auto;}
.button .button-a { margin:0; display:inline-block}
table .button { display:inline-block;}
table .button-a { min-width:inherit;  font-size: 17px; line-height: 20px; padding: 10px 20px;}

.disclosure { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); font-size:75%; font-style:italic}
.disclosure a { color:#333}
.disclosure p { padding:5px 10px;}

#search-form { position: relative; display: inline-block; width: 24px; height: 24px}
#search-form .search-form {	position: absolute;	right: 0;top:-5px; color:#fff; }
#search-form .search-field {background-color: transparent;	background-image: url(https://globeaqua.com/wp-content/themes/smart/search.svg);	background-position: 5px center; background-repeat: no-repeat;	background-size: 24px 24px; 	border: none;	cursor: pointer;height: 36px;	margin: 3px 0;	padding: 0 0 0 34px; border-radius:20px;	position: relative;	-webkit-transition: width 400ms ease, background 400ms ease;	transition:         width 400ms ease, background 400ms ease; width: 0;}
#search-form .search-field:focus {background-color: #333; border: 1px solid #111; cursor: text; color:#fff;	outline: 0;	width: 200px;}
#search-form .search-form .search-submit { display:none; }
#search-form input[type="search"]::-webkit-input-placeholder {color:#fff!important}

.pros h3 { text-align: center; background: #d0edd0; padding: 8px 0; font-size:25px}
.cons h3 { text-align: center; background: #f0caca; padding: 8px 0; font-size:25px }

/* Media Queries for responsivenes
-------------------------------------------------------------- */
@media (min-width: 768px) {
	  .col-3 { flex:0 0 33.333333%; flex-basis: 33.333333%; max-width: 33.333333%; margin:0;}
	  .col-6 { flex:0 0 50%; flex-basis: 50%; max-width: 50%; margin:0;}
}
@media (max-width: 767px) {
	  #search-form { display: block; }
	  #search-form .search-form {	position: relative;	left: 0;top:-5px; color:#fff; }
	  #home h1 { color: #fff; margin: 0 0 20px 0; font-size: 30px; line-height: 40px}
	  #home h2 { color: #fff; margin: 0 0 20px 0; font-size: 25px; line-height: 30px}
	  #home { padding-top:0}
	  #home #searchform { width:90%; margin-bottom:0px}
	  .reco { padding:10px 0!important}
	  h1 {text-align:center}
	  h2 {}
	  .disclosure p { line-height: 18px}
	  .alignleft, .alignright { display: inline; float: none; margin:0}
}
@media (max-width: 480px) {
	.amazon-link, a.amazonn, a.sag { float:none; margin: 0 auto 50px auto; display:block}
	article .post-card h2 {}
}

a.link-source { color:#666}