/*
Theme Name: Blue frame
Theme URI: https://alexplot.com/blue-frame/
Author: Alex Plot
Author URI: https://alexplot.com/
Description: Blue frame is a clean, super flexible and fully responsive Bootstrap based WordPress Theme. This theme is excellent for making your own beautiful website.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
Text Domain: blue-frame
Tags: blog, news, right-sidebar, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others:)

Blue frame is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/
/*-------------------------------------- 
    General Styles 
---------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Sarabun:300,400,500,700|Poppins:400,500,700");
body {
     font-family: 'Sarabun', sans-serif;
     font-size: 22px;
     background: #596AFF;
}
.h1, 
.h2, 
.h3, 
.h4, 
.h5, 
.h6, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
     margin-bottom: 1rem;
     font-family: inherit;
     font-weight: 500;
     line-height: 35px;
     color: inherit;
     font-family: 'Sarabun';
     clear: both;
}
p {
     font-size: 15px;
     color: #000;
     letter-spacing: 0.03em;
     font-family: 'Sarabun';
}
span {
         font-size: 16px;
         font-weight: 900;
         color: #000;
         letter-spacing: 0.03em;
         font-family: 'Sarabun';
}
.display-name{
     color: #ffffff;
}
a {
     font-size: 25px;
     color: #112769;
     transition-duration: 0.4s;
     text-decoration: underline;
     letter-spacing: 0.03em;
     cursor: pointer;
}
.navbar {
     background: #303030;
     padding: 0 80px;
     min-height: 60px;
     flex-flow: unset;
}
.navbar .navbar-nav li {
     margin: 0 30px;
}
.navbar .navbar-nav li a {
     font-size: 18px;
     font-weight: 900;
     text-decoration: none;
     color: #fff;
     padding: 19px 0;
     font-family: 'Sarabun';
}
.navbar .navbar-nav li a:hover {
     color: #596AFF;
     background: #303030;
}
.navbar-nav .children,
.navbar-nav .sub-menu {
     background: #fff;
     min-width: 275px;
}
.navbar-nav .children li,
.navbar-nav .sub-menu  li {
     margin: 0px;   
     width: 100%;
}
.navbar-nav .children li a,
.navbar-nav .sub-menu li a {
     padding: 8px 20px;
     width: 100%;
     display: block;
     font-size: 16px;
     font-weight: 500;
     color: #303030;
     transition: unset;
}
.navbar-nav .children li a:hover, 
.navbar-nav .sub-menu li a:hover {
     background: #303030;
     color: #ffffff;
}
.navbar .icon-search {
     padding-left: 15px;
}
.navbar .icon-search svg {
     cursor: pointer;
     width: 50px;
     height: 34px;
     transition-duration: 0.4s;
     fill: #fff;
}
.navbar .icon-search svg:hover {
     fill: #596AFF;
}
.logo {
     font-family: 'Sarabun';
     font-size: 30px;
     font-weight: 300;
     text-decoration: none;
     color: #fff;
     white-space: unset;
     flex: 0.35;
}
.logo.navbar-brand:hover {
     color: #596AFF;
}
.logo span {
     color: #596AFF;
     font-weight: 900;
     font-size: 30px;
}
.bg-main {
     min-height: 100vh;
     position: relative;
     padding: 85px 0;
     overflow: hidden;
}
.bg-main .pad-bo-it {
     padding-bottom: 30px;
}
.bg-main .bg-bg-top {
     position: absolute;
     top: 600px;
     left: 0%;
     width: 100%;
     height: 70vh;
     background: #fff;
     transform: skewY(-20deg);
}
.bg-main .item-ps {
     background: #fff;
     border-radius: 7px;
     box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.16);
     overflow: hidden;
     position: relative;
     min-height: 550px;
}
.bg-main .item-ps .name-block {
     position: absolute;
     top: 25px;
     left: 0px;
     background: rgba(0, 0, 0, 0.7);
     padding: 5px 25px 5px 15px;
     border-radius: 0 7px 7px 0;
     z-index: 15;
     min-width: 150px;
     text-align: center;
}
.bg-main .item-ps .name-block h4 {
     font-size: 23px;
     line-height: 34px;
     color: #fff;
     font-weight: 400;
     margin: 0px;
     font-family: "Poppins";
     letter-spacing: 1px;
}
.bg-main .item-ps .thumb-img {
     overflow: hidden;
}
.bg-main .item-ps .thumb-img img {
     width: 100%;
     transition: transform .4s;
}
.bg-main .item-ps .thumb-img img:hover {
     transform: scale(1.1);
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.bg-main .item-ps .con-ps {
     padding: 25px 25px 60px 25px;
     font-family: 'Sarabun';
}
.bg-main .item-ps .con-ps .data-cat {
     margin-bottom: 7px;
}
.bg-main .item-ps .con-ps h3 {
     margin-bottom: 10px;
}
.bg-main .item-ps .con-ps h3 a {
     font-size: 22px;
     line-height: 33px;
     font-weight: 900;
     color: #000;
     text-decoration: none;
     display: block;
}
.bg-main .item-ps .con-ps h3 a:hover {
     color: #707070;
}
.bg-main .item-ps .con-ps .tex-shor p {
     font-size: 16px;
     color: #5D5D5D;
     line-height: 25px;
     margin: 0px;
}
.bg-main .item-ps .con-ps .tex-shor p a {
     font-size: 16px;
     color: #000;
     line-height: 23px;
     display: inherit;
     position: absolute;
     bottom: 20px;
     padding: 10px 0 0;
     text-decoration: none;
}
.bg-main .item-ps .con-ps .tex-shor p a:hover {
     text-decoration: none;
     color: #596AFF;
}
html {
     line-height: 1.15;
     -webkit-text-size-adjust: 100%;
}
body {
     margin: 0;
}
h1 {
     font-size: 2em;
     margin: 0.67em 0;
     line-height: 40px;
}
hr {
     box-sizing: content-box;
     height: 0;
     overflow: visible;
}
pre {
     font-family: monospace, monospace;
     font-size: 1em;
}
a {
     background-color: transparent;
     outline: none;
}
abbr[title] {
     border-bottom: none;
     text-decoration: underline;
     text-decoration: underline dotted;
}
b,
strong {
     font-weight: 900;
}
code,
kbd,
samp {
     font-family: monospace, monospace;
     font-size: 1em;
}
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;
}
img {
     border-style: none;
}
/*--------------------------------------
    Forms 
---------------------------------------*/
button,
input,
optgroup,
select,
textarea {
     font-family: inherit;
     font-size: 100%;
     line-height: 1.15;
     margin: 0;
}
button,
input {
     overflow: visible;
}
button,
select {
     text-transform: none;
}
button,
[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 {
     padding: 0.35em 0.75em 0.625em;
}
legend {
     box-sizing: border-box;
     color: inherit;
     display: table;
     max-width: 100%;
     padding: 0;
     white-space: 400;
}
progress {
     vertical-align: baseline;
}
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-decoration {
     -webkit-appearance: none;
}
::-webkit-file-upload-button {
     -webkit-appearance: button;
     font: inherit;
}
/*-------------------------------------- 
    Interactive 
---------------------------------------*/
details {
     display: block;
}
summary {
     display: list-item;
}
/*-------------------------------------- 
    Misc 
---------------------------------------*/
template {
     display: none;
}
[hidden] {
     display: none;
}
/*-------------------------------------- 
    Typography 
---------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
     color: #404040;
     font-family: sans-serif;
     font-size: 16px;
     font-size: 1rem;
     line-height: 1.5;
}
p {
     margin-bottom: 1.5em;
}
dfn,
cite,
em,
i {
     font-style: italic;
}
blockquote {
     padding: 1em 1.5em;
     background: #596aff1f;
     border-left: 3px solid #596AFF;
}
.wp-block-pullquote blockquote {
     padding: 1em 1.5em;
     border-top: 1px solid #dedede;
     border-bottom: 1px solid #dedede;
}
.wp-block-pullquote:not(.is-style-solid-color) {
     background: 0 0;
     padding: 1em;
}
blockquote{
     padding: 1em 1.5em;
}
blockquote p{
     margin: 0px;
}
address {
     margin: 0 0 1.5em;
}
pre {
     background: #eee;
     font-family: "Sarabun", Courier, monospace;
     font-size: 15px;
     font-size: 0.9375rem;
     line-height: 1.6;
     margin-bottom: 1.6em;
     max-width: 100%;
     overflow: auto;
     padding: 1.6em;
}
code,
kbd,
tt,
var {
     font-family: "Sarabun", Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
     font-size: 15px;
     font-size: 0.9375rem;
}
abbr,
acronym {
     border-bottom: 1px dotted #666;
     cursor: help;
}
mark,
ins {
     background: #fff9c0;
     text-decoration: none;
}
big {
     font-size: 125%;
}
/*-------------------------------------- 
    Elements 
---------------------------------------*/
html {
     box-sizing: border-box;
}
*,
*:before,
*:after {
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior;
     see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
     box-sizing: inherit;
}
hr {
     background-color: #ccc;
     border: 0;
     height: 1px;
     margin-bottom: 1.5em;
}
ul,
ol {
     margin: 1.2em 0 1.2em 1em;
     padding: 0px;
}
ul li,
ol li {
     margin-bottom: 5px;
}
ul {
     list-style: disc;
}
ol {
     list-style: decimal;
}
li > ul,
li > ol {
     margin-bottom: 0;
     margin-left: 1.5em;
}
dt {
     font-weight: 700;
}
dd {
     margin: 0 1.5em 1.5em;
}
img {
     height: auto;
    /* Make sure images are scaled correctly. */
     max-width: 100%;
    /* Adhere to container width. */
}
figure {
     margin: 1em 0;
    /* Extra wide images within figure tags don't overflow the content area. */
}
table {
     margin: 0em;
     width: 100%;
}
/*--------------------------------------
    Navigation 
---------------------------------------*/
.navigation {
     z-index: 99;
     display: flex;
     justify-content: center;
     width: 100%;
}
.navigation .nav-previous a,
.navigation .nav-next a {
     border: 1px solid;
     border-color: #596AFF;
     border-radius: 3px;
     background: #596AFF;
     font-size: 15px;
     line-height: 1;
     padding: 11px 27px 12px 27px;
     color: #fff;
     cursor: pointer;
     font-family: 'Sarabun';
     transition-duration: 0.4s;
     min-height: 40px;
     text-decoration: none;
     display: block;
     margin: 0 60px;
}
.navigation .nav-previous a:hover,
.navigation .nav-next a:hover {
     background: #303030;
     border-color: #303030;
}
.nav-links {
     padding: 0px;
     margin: 0px;
     display: flex;
     justify-content: center;
     margin-top: 25px;
}
.nav-links .page-numbers {
     font-size: 18px;
     font-weight: 400;
     font-family: "Poppins";
     text-decoration: none;
     height: 40px;
     width: 40px;
     background: #fff;
     color: #3B3B3B;
     margin: 0 5px;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
     line-height: 40px;
     cursor: pointer;
     text-align: center;
     transition-duration: 0.4s;
}
.nav-links .page-numbers:hover {
     background: #3B3B3B;
     color: #fff;
}
.nav-links .page-numbers:hover svg {
     color: #fff;
     fill: #fff;
}
.nav-links .page-numbers svg {
     margin: 14px 0;
     width: 25px;
     height: 11px;
     fill: #3B3B3B;
}
.nav-links .page-numbers.current {
     background: #3B3B3B;
     color: #fff;
}
.nav-links li {
     list-style: none;
}
.nav-links li span {
     font-size: 18px;
     font-weight: 400;
     font-family: "Poppins";
     height: 40px;
     width: 40px;
     background: #3B3B3B;
     color: #fff;
     margin: 0 5px;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
     line-height: 40px;
     cursor: default;
}
a {
     color: #596AFF;
     font-size: 14px;
     line-height: 23px;
     font-size: 16px;
     line-height: 23px;
}
a:visited {
     text-decoration: none;
     color: #596AFF;
}
a:hover,
a:focus,
a:active {
     text-decoration: none;
     color: #596AFF;
}
a:focus {
     outline: none;
}
a:hover,
a:active {
     outline: 0;
}
/*--------------------------------------
    Menus
---------------------------------------*/
.main-navigation {
     clear: both;
     display: block;
     float: left;
     margin-left: auto;
     flex: 0.65;
}
.main-navigation ul.navbar-nav ul li{
     margin: 0px;
}
 .main-navigation ul {
     display: block;
     list-style: none;
     margin: 0;
     padding-left: 0;
     transition-duration: 0.4s;
}
.main-navigation ul ul {
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
     float: left;
     position: absolute;
     top: 100%;
     left: initial;
     z-index: 99999;
     background: #fff;
     display: none;
     opacity: 0;
     padding: 0px;
}
.main-navigation ul ul ul {
     top: 0px;
     left: 100%;
}
.main-navigation ul ul li:hover > ul, 
.main-navigation ul ul li.focus > ul {
     left: 100%;
}
.main-navigation ul li:hover > ul, 
.main-navigation ul li:hover > ul .main-navigation ul li.focus > ul {
     left: initial;
     opacity: 1;
     display: block;
}
.main-navigation a {
     display: block;
     text-decoration: none;
}
/* Small menu. */
 @media screen and (max-width: 1200px) {
     .navbar-nav .children, 
     .navbar-nav .sub-menu {
          background: #303030;
          text-align: left;
          border: none;
     }
    .main-navigation.toggled .navbar-nav {
         display: block;
         opacity: 1;
         width: 100vw;
         height: 100vh;
    }
     .menu-toggle{
         display: block;
    }
     .main-navigation .navbar-nav {
         overflow: hidden;
         position: absolute;
         top: 40px;
         left: 0;
         opacity: 0;
         background: #303030;
         width: 100vw;
         height: 0px;
         transition-duration: 0.6s;
         margin: 0px auto;
         z-index: 0;
    }
     .main-navigation ul {
         display: block;
         margin: 0 auto;
         text-align: center;
         padding-top: 20%;
         width: 100%;
    }
     .main-navigation ul ul{
         background: #303030;
         box-shadow: none;
         padding: 0px;
         margin: 0px;
         width: 100%;
    }
     .main-navigation ul.show{
         float: none;
         position: initial;
         display: block;
         transition-duration: 0.4s;
         opacity: 1;
    }
     .main-navigation ul.navbar-nav ul a{
         color: #fff;
         padding: 7px 10px;
         margin: 0px;
         width: inherit;
         width: 270px;
    }
     .navbar {
         padding: 0 10px;
         position: fixed;
         z-index: 11111;
         width: 100%;
    }
     .navbar .navbar-nav li a{
         text-transform: uppercase;
         padding: 15px 0;
         font-size: 14px;
         color: #fff;
    }
     .menu-item-has-children svg{
         display: block;
         fill: #fff;
         height: 30px;
         width: 30px;
    }
     .navbar .navbar-nav li {
         margin: 0 30px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         flex-flow: row wrap;
    }
}
 @media screen and (min-width: 1200px) {
     .menu-toggle {
         display: none;
    }
     .main-navigation li {
         float: left;
         position: relative;
    }
     .main-navigation .navbar-nav{
         justify-content: flex-end;
    }
     .menu-item-has-children svg{
         display: none;
    }
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
     margin: 0 0 1.5em;
     overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
     float: left;
     width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
     float: right;
     text-align: right;
     width: 50%;
}
/*--------------------------------------
    Footer
---------------------------------------*/
footer {
     background: #3B3B3B;
     padding: 50px;
}
footer .res-st {
     font-size: 16px;
     color: #a2a2a2;
     text-align: center;
     margin: 0px;
}
footer .res-st a {
     font-size: 16px;
     color: #596AFF;
     text-decoration: uppercase;
}
footer .res-st a:hover {
     text-decoration: none;
}
/*--------------------------------------
    Page content
---------------------------------------*/
.data-cat span {
     text-transform: uppercase;
     font-size: 13px;
     color: #9F9F99;
     margin: 0px;
     font-family: 'Sarabun';
     font-weight: 500;
}
.data-cat span a,
.data-cat span time {
     text-transform: uppercase;
     font-size: 13px;
     color: #9F9F99;
     margin: 0px;
     font-family: 'Sarabun';
     text-decoration: none;
     transition-duration: 0.4s;
     font-weight: 500;
}
.data-cat span a:hover,
.data-cat span time:hover {
     color: #707070;
}
h1 {
     font-size: 32px;
     font-weight: 900;
     font-family: 'Sarabun';
     line-height: 43px;
     margin-bottom: 15px;
}
.entry-title{
     word-wrap: break-word;
     -ms-word-wrap: break-word;
}
.bg-cont-sin {
     background: #fff;
     border-radius: 0 110px 7px 7px;
     position: relative;
     box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15);
}
.bg-cont-sin .singl-content {
     padding: 45px 20px;
}
.bg-cont-sin .singl-content p {
     color: #5D5D5D;
     font-size: 14px;
     line-height: 23px;
     font-size: 16px;
     color: #5D5D5D;
     line-height: 25px;
}
.bg-cont-sin .singl-content .data-cat {
     text-transform: uppercase;
     font-size: 13px;
     color: #9F9F99;
     margin: 0px;
     font-family: 'Sarabun';
     margin-bottom: 15px;
}
/*--------------------------------------
    404
---------------------------------------*/
.bg-404 {
     background: #ffff;
     height: 100vh;
     position: relative;
     overflow: hidden;
}
.bg-404 .like-404 {
     position: absolute;
     top: 8%;
     left: 0%;
     width: 100%;
     height: 80vh;
     min-height: 650px;
     background: #596AFF;
     transform: skewY(-25deg);
}
.bg-404 .bg-404-content {
     position: absolute;
     top: 8vh;
     text-align: center;
     color: #fff;
}
.bg-404 .bg-404-content a svg {
     overflow: hidden;
     vertical-align: middle;
     margin: 14px 0;
     width: 25px;
     height: 19px;
     fill: #000;
}
.bg-404 .bg-404-content h1 {
     font-size: 187px;
     line-height: 192px;
     font-family: 'Sarabun';
     font-weight: 900;
     color: #fff;
     margin-bottom: 0px;
     margin-top: 23vh;
}
.bg-404 .bg-404-content span {
     letter-spacing: 3.35px;
     font-size: 30px;
     line-height: 53px;
     font-weight: 400;
     color: #fff;
     font-family: "Poppins";
}
.bg-404 .bg-404-content p {
     color: #fff;
     font-size: 18px;
     line-height: 30px;
     font-weight: 400;
     font-family: "Poppins";
     margin: 30px 0 10px 0;
     width: 455px;
}
.bg-404 .bg-404-content a {
     color: #000;
     font-family: "Poppins";
     font-weight: 500;
     font-size: 25px;
     line-height: 25px;
     text-decoration: none;
}
.bg-404 .bg-404-content a:hover {
     color: #fff;
}
/*--------------------------------------
    Sidebar
---------------------------------------*/
.sidebar-pg{
     padding-bottom: 50px;
}
.sidebar-pg .post-thumbnail img{
     width: 100%;
}
.sidebar-pg .post-thumbnail {
     margin-right: -15px;
     overflow: hidden;
     border-radius: 0 108px 0 0;
}
.sidebar-pg .widget {
     margin-top: 50px;
}
.sidebar-pg .widget:first-child{
     margin-top: 55px;
}
.sidebar-pg h2 {
     margin: 0px 0 20px 0;
     padding-bottom: 20px;
     
     position: relative;
}
.sidebar-pg h2:after {
     content: "";
     background: #596AFF;
     width: 40px;
     height: 3px;
     position: absolute;
     bottom: -3px;
     left: 0;
}
.sidebar-pg h2:before {
     content: "";
     background: #404040;
     width: 100%;
     height: 3px;
     position: absolute;
     bottom: -3px;
     left: 0;
}
.widget ul{
     padding: 0px;
     margin: 10px 15px;
     list-style: none;
}
.widget ul li{
     margin-bottom: 20px;
}
.widget ul li:before{
     content: "\2022";
     color: #596AFF;
     font-weight: 900;
     display: inline-block;
     width: 1em;
     margin-left: -1em;
}
.widget ul li a{
     color: #303030;
}
.sidebar-pg .textwidget p {
     color: #5D5D5D;
     font-size: 14px;
     line-height: 23px;
     font-size: 16px;
     color: #5D5D5D;
     line-height: 23px;
}
.sidebar-pg .calendar-wrap caption {
     caption-side: top;
     text-align: center;
     font-size: 19px;
     font-weight: 900;
     color: #404040;
}
.sidebar-pg .calendar-wrap tbody {
     border: 1px solid #dedede;
}
.sidebar-pg .calendar-wrap td {
     text-align: center;
     padding: 9px;
}
.sidebar-pg .calendar-wrap thead, 
.sidebar-pg .calendar-wrap tfoot {
     line-height: 33px;
     background: #dedede;
     border: 1px solid #dedede;
}
.sidebar-pg .calendar-wrap thead td, 
.sidebar-pg .calendar-wrap tfoot td {
     text-align: left;
     padding-left: 20px;
}
.sidebar-pg .calendar-wrap thead th, 
.sidebar-pg .calendar-wrap tfoot th {
     padding: 4px;
     text-align: center;
}
.sidebar-pg .tagcloud a {
     color: #5D5D5D;
     text-decoration: none;
     border: 3px solid #404040;
     padding: 5px 10px;
     line-height: 47px;
}
.sidebar-pg .tagcloud a:hover {
     color: #fff;
     background: #596AFF;
}
.sidebar-pg .widget-archive ul,
.sidebar-pg .widget-categories ul,
.sidebar-pg .widget-recent-entries ul,
.sidebar-pg .widget-pages ul {
     padding: 0px;
}
.sidebar-pg .widget-archive ul li a,
.sidebar-pg .widget-categories ul li a,
.sidebar-pg .widget-recent-entries ul li a,
.sidebar-pg .widget-pages ul li a {
     color: #5D5D5D;
}
.sidebar-pg .widget-archive ul li a:hover,
.sidebar-pg .widget-categories ul li a:hover,
.sidebar-pg .widget-recent-entries ul li a:hover,
.sidebar-pg .widget-pages ul li a:hover {
     color: #596AFF;
}
.page .sidebar-pg {
     margin-top: 68px;
}
.bottom-header-img {
     display: flex;
     justify-content: center;
     margin: 50px 0;
}
/*--------------------------------------
    Picture home-pega header
---------------------------------------*/
.home .bottom-header-wrapper {
     text-align: center;
     padding-bottom: 85px;
}
.home .bottom-header-wrapper img {
     max-height: 450px;
     height: auto;
     width: auto;
}
/*--------------------------------------
    Forms
---------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
     border: 1px solid;
     border-color: #596AFF;
     border-radius: 3px;
     background: #596AFF;
     font-size: 15px;
     line-height: 1;
     padding: 11px 27px 12px 27px;
     color: #fff;
     cursor: pointer;
     font-family: 'Sarabun';
     transition-duration: 0.4s;
     min-height: 40px;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
     background: #303030;
     border-color: #303030;
     outline: none;
}
button.menu-toggle:active,
button.menu-toggle:focus,
button.menu-toggle:hover{
     border-color: #596AFF;
}
button.menu-toggle{
     margin: 0px auto;
}
button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
     border-color: #aaa #bbb #bbb;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
     color: #666;
     border: 1px solid #dedede;
     border-radius: 3px;
     padding: 7px;
     min-height: 40px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
     color: #111;
}
select {
     border: 1px solid #ccc;
}
textarea {
     width: 100%;
}
/*--------------------------------------
    Accessibility
---------------------------------------*/
.screen-reader-text {
     border: 0;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute !important;
     width: 1px;
     word-wrap: 400 !important;
}
.screen-reader-text:focus {
     background-color: #f1f1f1;
     border-radius: 3px;
     box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
     clip: auto !important;
     clip-path: none;
     color: #21759b;
     display: block;
     font-size: 14px;
     font-size: 0.875rem;
     font-weight: 900;
     height: auto;
     left: 5px;
     line-height: 400;
     padding: 15px 23px 14px;
     text-decoration: none;
     top: 5px;
     width: auto;
     z-index: 100000;
}
#content[tabindex="-1"]:focus {
     outline: 0;
}
/*--------------------------------------
    Alignments
---------------------------------------*/
.alignleft {
     display: inline;
     float: left;
     margin-right: 1.5em;
     margin-bottom: 1em;
}
.alignright {
     display: inline;
     float: right;
     margin-left: 1.5em;
}
.aligncenter {
     clear: both;
     display: block;
     margin-left: auto;
     margin-right: auto;
}
/*--------------------------------------
    Clearings
---------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
     content: "";
     display: table;
     table-layout: fixed;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
     clear: both;
}
/*--------------------------------------
    Widgets
---------------------------------------*/
.widget {
     margin: 0 0 1.5em;
}
.widget select {
     max-width: 100%;
     color: #666;
     border: 1px solid #dedede;
     border-radius: 3px;
     padding: 7px;
}
.widget-search label{
     width: 71%;
}
.widget-search label input{
     width: 100%;
}
/*--------------------------------------
    Content
---------------------------------------*/
.sticky {
     display: block;
}
.post,
.page {
     margin: 0 ;
}
.updated:not(.published) {
     display: none;
}
.page-content,
.entry-content,
.entry-summary {
     margin: 1.5em 0 0;
}
.entry-content table {
     margin-bottom: 25px;
}
.entry-content table th, 
.entry-content table td {
     padding: 8px;
     padding: 16px;
     line-height: 1.5;
     vertical-align: top;
     border-top: 1px solid #ebebeb;
 }
.page-links {
     clear: both;
     margin: 0 0 1.5em;
}
/*--------------------------------------
    Search
---------------------------------------*/
.search-no-results .search-submit{
     background: #303030;
}
.search-no-results .no-results.not-found{
     padding: 10px;
}
.search-no-results p,
.search-no-results span,
.search-no-results h1,
.search-no-results h2,
.search-no-results h3,
.search-no-results h4,
.search-no-results h5,
.search-no-results h6{
     color: #fff;
}
.search-results .bg-main{
     padding-top: 50px;
}
.search-results .bg-main{
     padding-top: 20px;
}
/*--------------------------------------
    Comments
---------------------------------------*/
.comment-respond h2{
     color: #000;
     font-weight: 900;
}
.comments-area {
     margin-top: 0;
     padding-top: 18px;
     border-top: 1px solid #dedede;
}
.bypostauthor {
     display: block;
}
.post-comments .post-title-box {
     border-top: 1px solid #dedede;
     padding-top: 12px;
}
.post-comments .post-title-box h4 {
     text-transform: uppercase;
}
.comments-title {
     font-size: 16px;
     font-weight: 900er;
     color: #000;
}
.comment-list {
     padding: 0 0 21px;
     display: block;
     width: 100%;
     list-style: none;
     border-bottom: 1px solid #dedede;
     margin-left: 0px;
     margin-bottom: 21px;
}
.comment-list .comment {
     overflow: hidden;
     margin-top: -1px;
}
.comment-list > .comment:first-child {
     border-top: none;
}
.comment-list ul {
     padding: 0;
}
.comment-list ol {
     list-style: decimal;
     padding: 0;
}
li > ul,
li > ol {
     margin-left: 15px;
}
ol ol {
     list-style: upper-alpha;
     padding: 10px;
}
ul ul {
     list-style: circle;
     padding: 10px;
}
.comment-list time {
     font-style: italic;
     font-size: 13px;
     color: #888888;
     position: relative;
}
.comment-list .reply {
     position: absolute;
     top: 20px;
     right: 20px;
}
.comment-list .reply a:hover {
     color: #111;
}
.comment-author .fn {
     text-transform: uppercase;
     bottom: 8px;
     position: relative;
     font-size: 14px;
}
.comment-author .fn a {
     font-family: "Poppins", serif;
     color: #111;
}
ol.children {
     position: relative;
}
.single .comment-body{
     padding: 20px 25px;
     border: 1px solid #dedede;
     background:#faf8f8;
     margin-bottom: 10px;
}
.comment-body{
     position: relative;
     padding: 20px 10px;
     background: #faf8f8;
}
 .pingback .comment-body{
     position: relative;
     padding: 0px 0px 15px 0;
}
.single .comment-body {
     position: relative;
     padding: 10px;
}
.comment-author {
     position: relative;
}
.comment-author .avatar {
     border-radius: 100%;
     float: left;
     margin-right: 14px;
     height: 50px;
     width: 50px;
     margin-bottom: 35px;
}
ol.children .comment-content {
     padding-left: 44px;
}
.comment-content p{
     margin: 0px;
}
.children .comment-author .avatar {
     height: 30px;
     width: 30px;
}
.comment-author .says {
     display: none;
}
.comment-content {
     margin-top: 5px;
     margin-bottom: 0;
     font-size: 14px;
     color: #111;
     word-wrap: break-word;
     padding-left: 65px;
}
.comment-content > *:first-child {
     margin-top: 0;
}
.comment-edit-link {
     font-size: 12px;
     padding-left: 3px;
     font-style: italic;
}
.comment-edit-link:hover {
     color: #111;
}
.comment-metadata {
     margin-top: -9px;
}
.comment-content th,
.comment-content td {
     padding: 6px;
     border: none;
}
.comment-content tr {
     border-bottom: 1px solid #eee;
}
.comment-content th:first-child,
.comment-content td:first-child {
     padding-left: 0;
}
.comment-content blockquote {
     margin: 0;
}
.comment-body footer{
     background: #faf8f8;
     padding: 5px;
}
.justify-content-md-center{
     justify-content: center;
     display: flex;
}
 @media (min-width: 768px) {
     .comment-list .children {
         padding: 0 0 0 60px;
    }
     .comment-list > .ol > .ol {
         padding: 0 0 0 60px;
    }
}
 @media (max-width: 768px) {
     ol.children ol.children {
         padding: 0;
         margin: 0;
    }
}
 @media (max-width: 575px) {
     .comment-list .reply {
         position: relative;
         top: 0px;
         text-align: right;
    }
}
/*--------------------------------------
    Infinite scroll
---------------------------------------*/
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
     display: none;
}
.infinity-end.neverending .site-footer {
     display: block;
}
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
     border: none;
     margin-bottom: 0;
     margin-top: 0;
     padding: 0;
}
embed,
iframe,
object {
     max-width: 100%;
}
.custom-logo-link {
     display: inline-block;
}
/*--------------------------------------
    Galleries
---------------------------------------*/
.gallery {
     margin-bottom: 1.5em;
}
.gallery-item {
     display: inline-block;
     text-align: center;
     vertical-align: top;
     width: 100%;
}
.gallery-columns-2 .gallery-item {
     max-width: 50%;
}
.gallery-columns-3 .gallery-item {
     max-width: 33.33%;
     padding: 5px;
}
.gallery-columns-4 .gallery-item {
     max-width: 25%;
}
.gallery-columns-5 .gallery-item {
     max-width: 20%;
}
.gallery-columns-6 .gallery-item {
     max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
     max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
     max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
     max-width: 11.11%;
}
.gallery-caption {
     display: block;
}
/*--------------------------------------
    Popup
---------------------------------------*/
.overlay {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.9);
     transition: opacity 500ms;
     visibility: hidden;
     opacity: 0;
     z-index: 999999999;
}
.overlay:target {
     visibility: visible;
     opacity: 1;
}
.popup {
     margin: 30vh auto;
     padding: 20px;
     background: transparent;
     border-radius: 5px;
     width: 50%;
     position: relative;
     transition: all 1s ease-in-out;
}
.popup .content input {
     background: transparent;
     border: none;
     color: #fff;
     width: 100%;
     font-size: 44px;
     text-align: center;
     letter-spacing: 2px;
     font-family: 'Sarabun';
     outline:none;
}
.popup .content input::placeholder {
     color: #fff;
}
.popup .content label{
     width: 100%;
     border-bottom: 2px solid #fff;
     margin-bottom: 25px;
}
.popup h2 {
     margin-top: 0;
     color: #333;
     font-family: Tahoma, Arial, sans-serif;
}
.popup button:hover{
     background: #007bff;
     opacity: 0.8;
}
.popup .close {
     position: fixed;
     top: 25px;
     right: 30px;
     transition: all 200ms;
     font-size: 60px;
     font-weight: 900;
     text-decoration: none;
     color: #fff;
     z-index: 1;
     opacity: 1;
     text-shadow: none;
}
.popup .close:hover {
     color: #007bff;
}
.popup form{
     text-align: center;
}
.popup .content {
     max-height: 70%;
     overflow: auto;
}
.wp-caption {
     margin-bottom: 1.5em;
     max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
     display: block;
     margin-left: auto;
     margin-right: auto;
}
.wp-caption .wp-caption-text {
     margin: 0.8075em 0;
}
.wp-caption-text {
     text-align: center;
}
/*--------------------------------------
    Media
---------------------------------------*/
 @media only screen and (max-width : 1200px) {
     .logo {
          font-size: 10px;
          line-height: 21px;
          flex-direction: column;
    }
    .logo span {
          font-size: 25px;
    }
     .popup {
        width: 90%;
    }
     .search-results .bg-main {
         padding-top: 80px;
    }
     .sidebar-pg .post-thumbnail {
         margin-right: 0px;
         overflow: hidden;
         border-radius: 0;
    }
     .bg-cont-sin .singl-content {
         padding: 0px;
    }
     .bg-cont-sin{
         box-shadow: none;
         border-radius: 0px;
    }
     .page .bg-main,
     .single .bg-main {
         background: #fff;
    }
     main.bg-main {
         min-height: auto;
    }
     .bg-404 .bg-404-content {
         position: relative;
    }
     .bg-404 .bg-404-content p {
         margin: 15px auto;
    }
     .navbar .icon-search {
         padding-left: 0px;
    }
     .navbar {
         min-height: 60px;
         padding-bottom: 0px;
         padding: 3px 37px;
         display: flex;
         justify-content: center;
         flex-direction: row;
    }
     .main-navigation .menu-toggle {
         margin: 0px;
         padding: 0px;
         border: none;
         border-radius: 0px;
         min-height: 2px;
         width: 40px;
         height: 2px;
         position: relative;
         background: white;
         -webkit-transition: all 0ms 300ms;
         transition: all 0ms 300ms;
         z-index:99999;
         outline: none;
    }
     .menu-toggle:before {
         content: "";
         position: absolute;
         left: 0;
         bottom: 12px;
         background: white;
         transition: bottom 300ms 300ms cubic-bezier(0.42, 0, 0.58, 1.71), transform 300ms cubic-bezier(0.42, 0, 0.58, 1.71);
         width: 40px;
         height: 2px;
         z-index:99999;
    }
     .menu-toggle:after {
         content: "";
         position: absolute;
         left: 0;
         top: 12px;
         background: white;
         transition: top 300ms 300ms cubic-bezier(0.42, 0, 0.58, 1.71), transform 300ms cubic-bezier(0.42, 0, 0.58, 1.71);
         width: 40px;
         height: 2px;
         z-index:99999;
    }
     .menu-toggle.active {
         background: transparent;
    }
     .menu-toggle.active:after {
         top: 0;
         transform: rotate(45deg);
         transition: top 300ms cubic-bezier(0.42, 0, 0.58, 1.71), transform 300ms 300ms cubic-bezier(0.42, 0, 0.58, 1.71);
    }
    .menu-toggle.active:before {
         bottom: 0;
         transform: rotate(-45deg);
         transition: bottom 300ms cubic-bezier(0.42, 0, 0.58, 1.71), transform 300ms 300ms cubic-bezier(0.42, 0, 0.58, 1.71);
    }
     .icon-search {
         position: absolute;
         right: 5px;
         top: 7px;
         z-index: 2;
    }
     .navbar-dark .navbar-brand {
         text-align: center;
         width: 200px;
         z-index: 2;
         display: flex;
         justify-content: center;
         color: #fff;
         align-items:center;
    }
     .main-navigation {
         left: 0px;
		 height: 40px;
		 width: 56px;
		 position: absolute;
    }
    .main-navigation #menu-top-mobile {
		 height: 40px;
		 width: 56px;
		 position: absolute;
		 display: flex;
		 align-items: center;
		 justify-content: flex-end;
		}
     .search-no-results .no-results.not-found {
         height: 85vh;
    }
}
/* Small Devices, Tablets */
@media screen and (max-width: 700px){
     .box{
           width: 100%;
    }
     .popup{
           width: 100%;
    }
     .popup .content input{
           font-size: 27px;
    }
}
 @media only screen and (max-width : 558px) {
     .bg-404 .bg-404-content h1 {
           margin-top: 70px;
    }
     .bg-404 .like-404 {
           top: 2%;
           height: 94vh;
    }
     .bg-404 .bg-404-content p {
           width: 100%;
    }
     .navbar {
           padding: 0 10px;
           position: fixed;
           z-index: 99;
           width: 100%;
           display: flex;
           align-items: center;
    }
     .bg-main .pad-bo-it {
           padding-bottom: 15px;
    }
     .bg-main {
           padding: 25px 0;
           padding-top: 80px;
    }
     .nav-links {
           margin-top: 5px;
    }
}