/*
Theme Name: Sieu
Theme URI: Sieu
Author: Sieu
Author URI: Sieu
Description: Sieu theme is designed by Sieu.
*/
/* all */
@font-face {font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v3/pe0qMImSLYBIv1o4X1M8cce9I9s.woff2) format('woff2'); font-display: swap; }
@font-face {font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; src: local('Nunito Sans Bold'), local('NunitoSans-Bold'), url(https://fonts.gstatic.com/s/nunitosans/v3/pe03MImSLYBIv1o4X1M8cc8GBs5tU1E.woff2) format('woff2'); font-display: swap; }
body {background: #fff; margin: 0 auto; font-family: 'Nunito Sans', sans-serif; }
a {color: #8dc642; text-decoration: none;}
a:focus {outline: thin dotted; outline-offset: -2px;}
h1 {font-size: 28px; text-align: center; color: #8dc642;}
img {max-width: 100%; height: auto; }
blockquote {background: #fdfdfd; max-width: 100%; padding: 10px; margin: 0; border: 5px dashed #ffffff;}
input, textarea {border: 1px solid #eaeaea; border-radius: 4px; padding: 10px 1%; font-family: inherit; font-size: inherit;}
button, input[type=button], input[type=submit]{cursor: pointer}
iframe {display: block; margin: 0 auto; max-width: 100%; }
.aligncenter {display: block; margin: 0 auto;}
/* header */
#site-header {margin: 15px auto; }
.search-top {float: right; margin-top: 23px; }
.search-query {padding: 9px; color: #828282; border-color: #eee; max-width: 110px; vertical-align: top; border-right: none; border-radius: unset; height: 22px; }
.search-button {background-image: url('https://lh3.googleusercontent.com/-xLUHDDdDNco/X1ed14K1QAI/AAAAAAAABO4/FackwC_s1e4QBlcXcMNOif-zRkR8WWQSwCLcBGAsYHQ/s15/search.png'); padding: 20px; background-repeat: no-repeat; box-shadow: none; line-height: 0; background-position: center; background-color: #fff; border-left: none; border-radius: unset;}
.css-menu {display: none; }
nav > ul {padding: 0; margin: 0; border-top: 3px double #ddd; border-bottom: 3px double #ddd;}
nav > ul > li {display: inline-block; font-size: 17px; line-height: 45px; padding: 0 10px; }
nav > ul > li > a {cursor: pointer; display: block; text-decoration: none; }
nav > ul > li > a:hover {text-decoration: underline; }
#nav, .mobile-menu {display: none; }

/* single post, page */
#site-main, #site-footer, #site-nav {margin: 0 auto; }
.page-header {background-size: 100%; padding: 4em 2em; text-align: center; background-position: center; vertical-align: middle; box-shadow: inset 0px 100px 83px -15px rgba(0,0,0,0.75); }
.page-header h1 {background-color: rgba(0,0,0, 0.4); color: #ffffffd1; font-weight: bold; margin: 0; border: 2px solid #ffffff4f; padding: 20px; text-align: center;}
.post-content {padding: 4% 8%; background: #fff; border-radius: 4px; box-shadow: 0 7px 50px 0 rgba(38, 50, 56, 0.07); }

/* =Archive
----------------------------------------------- */
.main-article {margin-bottom: 20px; padding: 2%; }
.main-header {width: 70%; float: right; }
.archive-title {margin-top: 2em; }
.main-header h3 {font-size: 1.3em; margin: 0; margin-bottom: 0.5em; line-height: 1.5em; }
.main-header h3 a {color: #8dc642; }
.main-article p {font-size: 18px; min-height: 8em; }
.featured-image {float: left; width: 28%; margin-right: 2%; margin-top: 8px; }
.featured-image img {margin: 0 auto; display: block; }
.title, .comment-reply-title, .comments-title {margin-top: 2em; font-size: 1.5em; padding: 3px; color: #414141; background-image: url(https://lh3.googleusercontent.com/-b0wl6jVF6KE/X1dzqsZCCdI/AAAAAAAABNs/M0NxWS6a9vI5lL_s4QqMJv9_tELzU89jwCPcBGAYYCw/s10/stripe.png); background-color: #fdfdfd; }
.title a {color: #555; }

/* =Content
----------------------------------------------- */
.entry-content {padding: 1em; margin: 2em 0; }
.page-title {text-transform: capitalize; text-align: center; }
.post-title {font-size: 18px; margin: 0; margin-bottom: 8px;}
.entry-content h2 {font-size: 23px; color: #4CAF50; margin-top: 45px; }
.entry-content h3 {color: #4CAF50; font-size: 20px; margin-top: 30px; }
.entry-content h3:before {content: "- "; color: #4CAF50; }
.entry-content p, .page-content p, .comment-content p {font-size: 18px; line-height: 30px;}
.entry-content ul {list-style: none; }
.entry-content ul li, .entry-content ol li {font-size: 17px; line-height: 29px; margin: 6px 0; }
.entry-content ul li:before {content:"+ "; font-size: 26px; color: #ff712c; font-weight: bold;}
ul.toc-list {background: #fdfdfd; padding: 2%; border: 1px solid #ddd; }
ul.toc-list:before {content:"Table of Contents"; text-align: center; font-size: 18px; color: #333; display: block; margin-bottom: 10px; }
ul.toc-list li {font-size: 16px; }
ul.toc-list li:before {content: none;}
ul.level-2 {padding-left: 5%;}
ul.level-2 li:before {content:"- "}
.info {padding-left: 0; border-left: 5px solid #eee; padding: 15px; background: #fdfdfd;}

.compare-table {overflow-x: auto;}
.compare-table td {min-width: 100px; }
.compare-table td:first-child > a img {min-width: 220px; }
.compare-table td .checklink {font-size: 12px; }
table {border-spacing: 0; border: 1px solid #f0f0f0; }
table tr:nth-child(even) {background: #fdfdfd;}
table thead {vertical-align: middle; background: #f8f8f8; }
table td, table th {padding: .4em; border: 1px solid #f0f0f0; }

.navigation ul {padding: 0; margin: 0; }
.navigation li {display: inline; margin-right: 3px; }
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled {background-color: #555; border-radius: 3px; cursor: pointer; padding: 5px 12px; color: #fff; text-decoration:none;}
.navigation li a:hover, .navigation li.active a {background-color: #8dc642;}

/* =addition
------------------------------------------------*/
.ul-class-12, .main-article, .entry-content, .comment-form {background: #fff; box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.05); overflow: hidden; }
.ul-class-12 {padding: 10px 0 0; list-style: none; }
.li-class-3 {width: 32%; display: inline-block; height: 220px; overflow: hidden; margin-left: 0.8%; margin-top: 1%; }
.li-class-3 a img {padding: 5px; border: 1px solid #eee; background: #fdfdfd; border-radius: 5px; margin: 0 auto; display: block;}
.li-class-3 p {text-align: center; max-width: 250px; display: block; margin: 0 auto; }

.first-img-list {padding: 0!important; float: left; width: 100%; margin-top: 0; }
.first-img-list li:first-of-type {list-style: none; width: 53%; border-right: 1px dotted #eee; margin-right: 1%; padding-right: 1%; list-style-image: none; text-align: center; float: left; clear: left;}
.first-img-list li:first-of-type:before {content: none; }
.first-img-list li .img-box {text-align: center;}
.first-img-list li .img-box .checkon {margin-left: 0; line-height: 20px; }
.img-box, .imgno {max-width: 500px; cursor: pointer; font-size: 15px; text-align: center; display: block; margin: 0 auto; color: #000; }
.img-box:hover, .img-box:focus {color: #000; opacity: 0.8; }
.img-box strong {color: #4CAF50; text-decoration: underline; padding: 5px; }
.imgli {width: 49%; display: inline-block; vertical-align: middle; }
.imgli3 {width: 31%; display: inline-block; vertical-align: middle; }
.block-mid {display: block; margin: 0 auto;}
.checklink {padding: 0 5px; display: block; color: #4CAF50; text-decoration: underline; font-weight: bold; }
.checkon {color: #fff; background: #FF9800; font-size: 16px; padding: 5px; box-shadow: 1px 1px 2px 1px #ff980094;}
.aff-link {text-decoration: underline;}

ul.pros, ul.cons {padding: 2%; display: table-cell; width: 30%;}
ul.pros {background: #f0f7e7}
ul.cons {background: #fff0ef}
ul.pros:before {content:"Pros"; color: #4CAF50; font-size: 30px; }
ul.cons:before {content:"Cons"; color: #E91E63; font-size: 30px; }
ul.pros li:before {content:"-"; color: #4CAF50; margin-right: 4px; }
ul.cons li:before {content:"-"; color: #E91E63; margin-right: 4px; }

.container {position: relative; }
.image {opacity: 1; display: block; margin: 0 auto; height: auto; transition: .5s ease; backface-visibility: hidden; }
.middle {transition: .5s ease; opacity: 0.3; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.container:hover .middle {opacity: 1; }

input[type=button], .button {font-size: 14px; color: white; border: none; padding: 8px; border-radius: 4px;}
a.button {color: white}
.select {padding-top: 8px; padding-bottom: 8px; border-radius: 6px; width: 100%; cursor: pointer; border-style: none}

/* post footer
------------------------------------------------*/
.facebook, .twitter, .pinterest {padding-left: 35px!important; background-repeat: no-repeat; }
.facebook {background-image: url('https://lh3.googleusercontent.com/-MRsjxR3qjPc/X1SeF915QCI/AAAAAAAABLo/wZL8yJmV1GAKeGTlMIYf6dbZWCvY4kkeACPcBGAsYHg/s30/facebook.png'); background-color:#4267b2; }
.twitter {background-image: url('https://lh3.googleusercontent.com/-KpzqX6cZNxk/X1SeF8UBu4I/AAAAAAAABLo/C2ik9CH_uOk4ETTt9R4BBjAGE9bsq3oAgCPcBGAsYHg/s30/twitter.png'); background-color:#1da1f2;}
.pinterest {background-image: url('https://lh3.googleusercontent.com/-YfpsStl3rsI/X1SeF52rxEI/AAAAAAAABLo/-cLmTgp88lgRo5qwjjtVAo2MR492qnZqgCPcBGAsYHg/s30/pin.png'); background-color:#bd081c; }
.author-info {padding: 2%; background-color: #fdfdfd; border: 3px dashed #ddd; border-radius: 5px; min-height: 80px; margin-bottom: 0; }
.author-image {display: inline; margin-right: 15px; float: left; }
.author-description {margin: 0; color: #555555; }

/* =Footer
------------------------------------------------*/
#site-footer {text-align: center; margin: 5em auto 2em; border-top: 3px double #ddd; }
.copyright {font-size: 15px; display: block; color: #6f6f6f; padding: 10px 0; text-align: center;}
.copyright a {color: #6f6f6f; margin-right: 15px; text-decoration: underline;}

/* =Comments
----------------------------------------------- */
.form {max-width: 600px; margin: 0 auto; }
.form p {margin: 8px 0; }
#comment {display: block; width: 98%; }
.comment-form {padding: 5%; }
.comment-content a {word-wrap: break-word;}
#respond > p, #respond p.comment-notes, p.logged-in-as {margin-bottom: 10px;}
p.logged-in-as {padding-bottom: 0px;}
.comment-list {padding: 0;}
.comment .comment-body {margin: 0; overflow: hidden; position: relative; border-bottom: 1px solid #ddd; }
.comment-list .children {margin-top: 15px; }
.comment-list li.comment {display:block; }
.comment-list > li.comment {padding: 1em 0; background: #fff; }
.comment-list li.comment > div img.avatar {position: absolute; left: 29px; top: 29px;}
#comment-form-title {font-size: 24px; padding-bottom: 10px;}
.vcard .avatar {margin-right: 10px; }
.comment-author {margin: 0; }
.comment-metadata {font-size: 11px; }
.edit-link, .comment-reply-link {float: right;  margin-left: 10px; }
.form-allowed-tags code {word-wrap: break-word; white-space: inherit;}
.comment-respond .required {color: #C7254E;}
input.submit {background-color: #8dc642; color: #fff; padding: 8px; border:none; font-weight:bold;}
.form-submit {margin: 0; display: inline-block; margin-top: 6px; }

@media screen and (min-width:1024px) {
#site-main, #site-header, #site-footer, #site-nav {width: 66%; }
.compare-table {max-height: 450px;}
::-webkit-scrollbar {width: 12px; height: 12px; background: #f0f0f0; }
::-webkit-scrollbar-thumb {background: #b2b2b2;}
::-webkit-scrollbar-button {border-style: solid; height: 10px; width: 10px;}
::-webkit-scrollbar-button:vertical:decrement {border-width: 0 6px 10px 6px; border-color: transparent transparent #b2b2b2 transparent;}
::-webkit-scrollbar-button:vertical:increment {border-width: 10px 6px 0 6px; border-color: #b2b2b2 transparent transparent transparent; }
::-webkit-scrollbar-button:horizontal:decrement {border-width: 6px 10px 6px 0; border-color: transparent #b2b2b2 transparent transparent;}
::-webkit-scrollbar-button:horizontal:increment {border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #b2b2b2; }
}
@media screen and (min-width:1500px) {#site-main, #site-header, #site-footer, #site-nav {width: 50%; }}
@media screen and (min-width:2000px) {#site-main, #site-header, #site-footer, #site-nav {width: 40%; }}
@media screen and (max-width:1024px) {
#site-main, #site-header, #site-footer, #site-nav, .css-menu {width: 90%; }
nav ul {display: none; }
.css-menu {padding: 12px 0; display: block; margin: 0 auto; cursor: pointer; line-height: 32px; text-align: center; border-top: 3px double #ddd; border-bottom: 3px double #ddd;}
.mobile-menu {position: relative; display: inline-block; width: 30px; height: 13px; border-top: 5px solid #8dc642; border-bottom: 5px solid #8dc642; vertical-align: middle; }
.mobile-menu:before {content: ""; position: absolute; top: 4px; left: 0px; width: 100%; border-top: 5px solid #8dc642; }
.mobile-search {float: right; }
[type="checkbox"]:checked ~ ul {display: block; z-index: 9999; right: 2%; left: 2%; border-top: none;}
[type="checkbox"]:checked ~ .css-menu {border-bottom: none; }
.middle {opacity: 1; }
ul.level-2 {padding-left: 5%;}
.li-class-3 a img {padding: 0; border: none; }
}
@media screen and (max-width:970px) {}
@media screen and (max-width: 600px){
#site-header a {display: block; text-align: center; }
.search-top {margin-right: 0.5em; }
.search-top input {border: none; max-width: 60px; }
.css-menu {text-align: left; text-indent: 1em; }
.main-header {width: 100%;}
.featured-image {width: 40%; float: right; margin-bottom: 10px; }}
@media screen and (max-width: 480px){
#site-main, #site-header, #site-footer, #site-nav, .css-menu, ul.toc-list {width: 96%; }
.page-header {padding: 0; height: auto; }
.page-header h1 {border: none; background: none; padding: 10px;}
.related-post {padding-left: 2%; }
.li-class h3 .post-title {display: block; width: 100%; }
.first-image {max-width: 100%; width: 100%; border: none; padding: 0; margin-left: 0; }
.li-class-3 {width: 48%; margin-left: 1%; margin-top: 10px; height: 220px; overflow: hidden; padding: 0; }
ul.pros, ul.cons {display: block; width: 96%; }
.imgli {width: unset; display: block; }
.first-img-list li:first-of-type {width: 100%; border: none; margin: 0; padding: 0; }

.comment-form-author, .comment-form-email, .comment-form-url {width: 98%;}
}