/*
Theme Name: Cloudy
Theme URI:
Description: WP Cloudy theme designed by AOE. Cloudy is a beautiful simple blog theme, designed for commercial and more technical blogs. Now also widget ready.
Version: 3.1.4
Author: AOE
Author URI: https://www.aoe.com/en/lp/wordpress-themes.html
License: GNU General Public License, version 3 (GPLv3)
License URI: http://www.gnu.org/licenses/gpl-3.0.txt
Tags: two-columns, fixed-layout, blue, white, custom-header
	By downloading and using this theme, you agree to the following terms:
    - All variations of this theme have to remain GPL
    - You may use this theme for personal or commercial projects
    - You may modify, translate or distribute

If you encounter any bugs please contact: wordpress(at)aoe.com

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.

*/

/* Reset styles
*******************************/
html, body, div, span,iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, font, ins,strong,ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
strong{color:mediumaquamarine;font-size: 1.1em;}
em{color:greenyellow;font-size: 0.9em;}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1em;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
table td,table th {padding:5px;border:1px solid #B8E0FA;font-size:1em;font-family:Kanit;}
table th {font-weight: bold;}

tr:nth-child(even) {background: #ghostwhite}
tr:nth-child(odd) {background: #337ab72b}

tr:first-child {background:#23364b;color:white;font-weight:bold;font-family:Kanit;}
tr:nth-child(2n+3) {background: deepink}

/* Main styles
*******************************/
html {
	height: 100%;
	margin-bottom: 1px;/* force vertical scrollbars */
}

body {
	background:ghostwhite;
	color: #646464;
	font-size: 75%;
	text-align: left;
}

/* Default fonts
*******************************/
@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');

/*add font*/
/*@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@200&display=swap');*/
/*ของ google บางทีเว็บกูเกิ้ลพัง*/

@font-face {font-family:THSarabunNew;src: url("font/THSarabunNew.ttf")}
strong{color:deeppink;font-size: 1.1em;font-family:THSarabunNew;line-height: 1em;}

body,
input,
select		{ font-family: Tahoma, Arial, Helvetica, sans-serif; }
textarea,
pre		  { font-family:"Share Tech Mono", monospace;white-space: initial;word-wrap: break-word;color:limegreen; }
code	  { font-family:"Share Tech Mono", monospace;white-space: initial;word-wrap: break-word;/*color:silver;*/font-size: 1em;line-height:1em;}
/* Header elements
*******************************/
h1,h2,h3,h4,h5,h6 {font-weight:normal;font-family: kanit,Tahoma, Arial, Helvetica, sans-serif;}
h1 {
    font-size: 2em;font-weight: bold;
    color:#fff;
    line-height:1;
	    padding-top: 5px; /*และทำให้ กรอบ about ถูกดันลง*/
		font-family:Kanit;
}
h2 {font-size: 1.5em;font-weight: bold;}
h3 {font-size: 1.4em;font-weight: bold;padding-bottom:0.5em;color:green;}
h4 { font-size: 1.3em;font-weight: bold; }
h5 { font-size: 1.2em;font-weight: bold; }
h6 { font-size: 1.1em;font-weight: normal!important; }

/* Menu *******************************/
#access {
	float: left;
	width: 706px;
	list-style:none;
}
#access .menu-header,
div.menu {
	font-size: 12px;
	width: 928px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	float: left;
	position: relative;
}
#access a {
	margin: 0;
	float:left;
	list-style:none;
	padding:6px 0 0 0;
	margin-right:18px;
	text-decoration:none;
	font-size:1em;
	line-height: 26px;
	text-decoration: none;
}
#access ul ul {
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	display: none;
	position: absolute;
	top: 35px;
	left: 0;
	float: left;
	width: 180px;
	z-index: 99999;
	background:#eee;
	margin:0;
	padding:0;
}
#access ul ul li {
	min-width: 180px;
	margin:0;
	padding:0;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	line-height: 1em;
	padding: 10px;
	width: 160px;
	height: auto;
	border:0;
	margin:0;
}
#access ul ul a:hover {
	background:#dadddf
}
#access li:hover > a,
#access ul ul :hover > a {
	color: #000;
	border-color: #eee;
}
#access ul li:hover > ul {
	display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #000;
	border-color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #000;
}

/* Text elements
*******************************/
p			  { margin: 0 0 0em 0; color: gainsboro; text-align: left; line-height:1.2;font-size:16px;/*text-shadow: 2px 2px white;color: #9e9e9e;*/ }
p.last 		  { margin-bottom:0; }
p.first		  { margin-top:1em; }
p.img		  { float: left; margin:0 1em 1em 0; padding:0; }

blockquote    {
	padding: 7px 5px;
    border-left: 5px solid orangered;
    font-size: 10px;
	color:orangered;
	/*font-family:Fantasy;*/
}
strong        { font-weight: bold; }
em            { color: lime; }
pre           { border: 1px solid green;/*#184665*/ margin-bottom: 1.2em; padding:1.6em;white-space:pre-wrap;word-wrap: break-word;/*color:#149bedcc;*/color: #34ed14b8;
    font-family: sans-serif;}
ins           { text-decoration:none; } /*remove underline from text*/
del           { text-decoration:line-through; }

dl {
    line-height:1.2;
    margin-bottom:1.2em;
}

hr {
    color: #fff;
    background:#2196F3;
    margin: 0 0 0.5em 0;
    /*padding: 0 0 0.5em 0;*/
    border:0;
    border-bottom: 1px #000 dotted;
}

/*links*/
a:link,a:visited,a:focus,a:hover,a:active{font-family: 'Kanit';cursor:pointer; }

a:link { color:#cf2929;}
a:visited{ color:gray;}
a:focus{ color:gold;}
a:hover{ color:white;}
a:active { color: cyan;/*;text-decoration: underline;*/}

a:active,
a:focus     { outline: 0; } /*remove border in ff*/

/* decorate lists in posts */
.entry ul,
.entry ol {
    margin: 0 0 1em 2em;
}

.entry ul {
    list-style-type:disc;
}

.entry ol {
    list-style-type:decimal;
}

.entry ul li,
.entry ol li {
    line-height:1.6;
}
.entry li strong{color:red;font-size: 1.5em;font-family:THSarabunNew;line-height: 1em;}
.wp-block-table strong{color:orangered/*coral*/;font-size: 1.5em;font-family:THSarabunNew;line-height: 1em;}

.entry h1,.entry h2,.entry h3,.entry h4,.entry h5,.entry h6,
.entry p {padding:5px;background: #30363c;margin:7px 0px 7px 0px;font-family:THSarabunNew,sans-serif;font-size:1.8em;line-height:1em;}
/*.entry strong{color:gold;font-family:THSarabunNew,sans-serif;font-size:1.2em;line-height:1em;}*/

.wp-block-quote p{color: orangered;font-family:Kanit;font-size: 2em!important;font-style:normal!important}
.wp-block-quote strong{color: mediumaquamarine;font-size:1em;font-weight: 100;}
.entry table td,.entry table th{padding:5px}

.entry h1,
.entry h2,
.entry h3,
.entry h4,
.entry h5,
.entry h6,
.comment h1,
.comment h2,
.comment h3,
.comment h4,
.comment h5,
.comment h6{color: #ffc107;}
.comment h1,.entry h1 {font-size: 2.4em;font-weight: bold;}
.comment h2,.entry h2 {font-size: 2.2em;font-weight: bold;/*text-shadow: 2px 2px white;*/}
.comment h3,.entry h3 {font-size: 2em;font-weight: bold;}
.comment h4,.entry h4 {font-size: 1.8em;font-weight: bold;}
.comment h5,.entry h5 {font-size: 1.4em;font-weight: bold;}
.comment h6,.entry h6 {font-size: 1em;font-weight: bold;}

.comment ul,
.comment ol {margin-left: 2em;}
.comment .comment-body ul,
.comment .comment-body ol {
    margin:0 0 1em 2em;
    line-height: 1.5;
}
.comment .comment-body ul li {
    list-style: disc;
}
.comment .comment-body ol li {
    list-style: decimal;
}

/* Images
*******************************/
img 		{ outline:0;border:0; }

/* Form styles
*******************************/
input,
select,
textarea {
	font-size:1.0em;/*by default font-size is bigger*/
	vertical-align:baseline;
}

input.text,
input.file { cursor:text; }

input.button {
    cursor:pointer;
    color:#fefefe;
    border:0;
    background:url(img/header-search-button.gif) 0 0 repeat-x;
    font-weight:bold;
    padding:1px 12px;
    text-align:center;
    height:19px;
}

input.radio,
input.checkbox { border: 0;padding: 0; }

/* Wordpress aligning
*******************************/
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
    float:left;
    margin: 0 1em 1em 0;
}

.alignright {
   float: right;
   margin: 0 0 1em 1em;
}

#content .entry .wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
   height: auto;
}

#content .entry .wp-caption {
    border:1px solid #eee;
    text-align:center;
    padding-top:4px;
    margin-bottom: 1em;
    max-width: 648px;
}
.wp-caption p.wp-caption-text {
    font-size:.92em;
    text-align:center;
    margin-bottom: 0;
    padding-bottom: 0;
}


/* Text align
*******************************/
.t-right 	{ text-align: right; }
.t-left 	{ text-align: left; }
.t-center 	{ text-align: center; }
.t-justify 	{ text-align: justify; }

/* Other
*******************************/
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.zoom {
    overflow:hidden;
}

/* Main styles
 *******************************/
#root {
    max-width: 1120px;width:100%;
    margin: 24px auto 0 auto;
    padding-bottom: 24px;
}

/* Header
 *******************************/
#header {
    overflow: hidden;
}

#header .menu,
#header .search {
    background:#607d8b;
}

#header .menu {
    float:left;
    max-width:700px;width:100%;
    height:28px;
    padding:0 20px;
    padding-bottom:20px;
    overflow:hidden;
}

#header .menu li {
    margin-top:13px;
    float:left;
    background:#00bcd4;
}

#header .menu li.last {
    background:none;
}

#header .menu a {
    color:#fefefe;
    font-weight:bold;
    padding:0 14px;
    display:block;
    line-height:2.2;
}

#header .menu a:hover {
    text-decoration:none;
}

#header .search {
    width:236px;
    height:20px;
    float:right;
    padding:14px 16px;
}

@media screen and (max-width: 1024px) {
#header .search {
    height:20px;
    padding:14px 16px;
    width:100%;
	float: left;
	display:none;
}
}

.hhh {
text-align:center;
padding:8px;
background-color:black;
font-family:Kanit;
font-size:2em;
}
/*ตสูงกว่า 400 ไม่แสดง */
@media screen and (max-width: 400px) {
.hhh {
display:none;
}}

#header .search label {
    color:#fff;
    padding-right:8px;
}

#header .search input.text {
    width:122px;
    border:1px solid #5286ab;
    border-right:0;
    border-bottom:0;
    background:#ecf0f2;
    padding:2px;
    color:#34668a;
    margin-right:8px;
}

#header .search input.button {
    color:#fefefe;
    border:0;
    background:url(img/header-search-button.gif) 0 0 repeat-x;
    font-weight:bold;
    width:51px;
    padding:1px 0;
    text-align:center;
    height:19px;
}

#heading {
    margin-top:4px;
    /*max-width:707px;*/width:100%;
    float:left;
    clear:both;
    /*height:134px;
    padding: 66px 0 0 156px;*/
	    text-align: center;
}

#heading a {
    color:#fff;
    text-decoration:none;
}

#heading .description {
    color:#fff;
}

#about {
    margin-top:4px;
    width:232px;
    height:164px;
    overflow:hidden;
    float:right;
    background:#ff6600;
    padding:18px;
    line-height:1.5em;
}

#about .signature {
    text-align:right;
    margin:0;
}

#main {
    margin-top:4px;
    clear:both;
    overflow:hidden;
}

#left-block {width:25%;float:right;/*background-color:#174868;*/}

@media screen and (max-width: 1024px) {
    #left-block {
        /*background-color:#174868;*/
		width:100%;
		float:right;
    }
	#main-block
	{
		max-width:100%!important;
		width:100%;
		float:right;
    }
}


#left-block .box {
    background:#222;
    padding:18px;
    margin:4px;
	    /*margin-right: 23px;*/
		    border: 1px solid green;/*#184665*/
}

#left-block .box h2 {
    padding-bottom:16px;
}

#left-block .box ul {
    font-size:1.17em;
}

#left-block .box ul.children {
    padding-top:8px;
    font-size:1em;
}

#left-block .box li {
    padding:4px 0;
    /*padding-left:10px;*/
    background-repeat:no-repeat;
    background-position:0 6px;
}

#left-block .box li.current-cat {
    font-weight:bold;
}

#left-block .categories li {

}

#left-block .archive li {
    background-image:url(img/cal.gif);
}

#left-block .blogroll li,
#left-block .meta li {
    background-image:url(img/arrow.gif);
}


.box input.text {
    border:1px solid #5286ab;
    border-right:0;
    border-bottom:0;
    background:#ecf0f2;
    padding:2px;
    color:#34668a;
    width:110px;
    font-size:.92em;
}

.box input.button {
    font-size:.92em;
    width:48px;
}

.box .tags {
    line-height:1.4;
}

.box .textwidget {
    font-size:.92em;
    line-height:1.4;
}

#left-block #recentcomments {
    font-size:.92em;
}

#left-block #recentcomments li {
    background:none;
    padding-left:0;
}


#wp-calendar {
    width:180px;
    font-size:.92em;
}

#wp-calendar caption {
    padding:0 0 4px 0;
    font-weight:bold;
}

#wp-calendar th,
#wp-calendar td {
    padding:2px;
    text-align:center;
}

#wp-calendar thead th {
    background:#eee;
}

#wp-calendar #prev {
    text-align:left;
    padding-top:4px;
}

#wp-calendar #next {
    text-align:right;
    padding-top:4px;
}

/* Content
 *******************************/
#main-block {max-width:75%;width:100%;float:left;}

@media screen and (max-width: 1024px) {
    #main-block {
        width:100%;
    }
}

#content {
    padding:10px;
    /*background:#fafafa;background:black;*/
    min-height:400px;
    height:auto!important;
    height:400px;
}


#content .post {
    overflow:hidden;
    /*margin-bottom:18px;*/ /* ระยะห่างข้างล่างหัวข้อ*/
    clear:both;
}

#content .date {
    float:left;
    width:54px;
    height:43px;
    padding-top:11px;
    background:url(img/post-date.gif) 0 0 no-repeat;
    color:#669abb;
    font-size:1.67em;
    text-align:center;
    margin: 0 0 20px 0;
    text-transform:uppercase;
}
#content .date a {
    text-decoration: none;
}
#content .date a:hover {
    color: #67A8CF;
}
#content .date span {
    font-size:0.65em;
    display:block;
}



#content .title,
#content .postdata {
    /*margin-left:74px;*/
}

#content .page .title {
    margin-left:0;
}

#content .title h2 {
    background:url(img/post-title-border.gif) 0 100% repeat-x;
    padding:5px 0px 5px 0px;
    /*margin-bottom:8px;*/
	font-family: sans-serif;
	font-weight:normal;
	font-size: medium;
}

#content .title a {
    text-decoration:none;
	color:#5eb9ef;/*black;#265a8b;*/
	   /*text-shadow: 2px 2px 5px red;text-shadow: 2px 2px 4px #000000;*/
	   font-family:Kanit;
}
#content .title a:hover {/*color:#ffc107;*/color:#ff5722;}

#content .title-s a {font-family:Kanit;text-decoration:none;padding:5px 0px 5px 0px;color:#ffc107;text-shadow: 2px 2px 5px red;font-size:1.5em;}
#content .title-s a:hover {color:#ff5722;}

#content .title-s h2 {padding:5px 0px 5px 0px;font-family: sans-serif;font-size:2em;}

#content .postdata {
    font-size:0.92em;
}

#content .category {
    background:url(img/cat.gif) 0 1px no-repeat;
    padding-bottom:10px;
    padding-left:20px;
    float: left;
}

#content .category1 {
    padding-bottom:1px;
    float: left;
}

#content .comments {
    background:url(img/comment.gif) 0 1px no-repeat;
    padding-bottom:1px;
    padding-left:20px;
    float: right;
}

#content .category,
#content .category a {color:#91adc1;}

#content .entry {
    clear:both;
    line-height: 1.5;
    overflow: hidden;
    zoom:1;
	color: #b8e0fa;
	margin-right: 0px;
    background-color:transparent;
    padding: 3px 0px;
	border-radius: 3px;
}

#content .entry img {
    /*max-width:650px;*/
    height: auto;
}

#content .entry .more-link {
    font-weight:bold;
    color:#ffc107;
}

#recent {
    margin-top:4px;
    background:#e7f5fe;
    overflow:hidden;
}

#recent .posts,
#recent .comments {
    width:312px;
    padding:24px 32px;
}

#recent .posts {
    float:left;
}

#recent .comments {
    float:right;
}

#recent .posts ul,
#recent .comments ul {
    font-size:.92em;
    line-height:1.2;
}

#recent .posts li,
#recent .comments li {
    margin-bottom:1.1em;
}

#recent .posts li a {
    font-weight:bold;
}

#recent .comments li .author {
    font-size:0.91em;
    line-height:1.4;
}

#recent .comments li a {
    text-decoration:none;
}

#leavecomment {
    padding-top:1em;
}

.comments-list .avatar {
    margin-bottom:4px;
}


ul.comments-list {
    margin-bottom: 2em;
}
li.comments-list {
    margin:0;
}
.comments-list li.comment,
.comments-list li.trackback,
.comments-list li.pingback{
    padding:18px 18px 0;
    line-height:1.2;
    list-style: none;
    margin:0;
}

.comments-list li.graybox {
    background:#f5f5f5;
}

.comments-list cite {
    font-weight:normal;
    font-style:normal;

}
cite{
	color: darkgrey;
	font-size: 2em!important;
    font-family: 'THSarabunNew';
	line-height:1em;
	/*font-family:fantasy;*/
}
.comments-list small {
    font-size:.83em;
}

.comments-list .comment {
    margin-top:8px;
}
#commentform input.text,
#commentform textarea {
    border:1px solid #5286ab;
    border-right:0;
    border-bottom:0;
    background:#ecf0f2;
    padding:2px;
    color:#34668a;
}

#commentform input.text {
    width:200px;
}

#commentform textarea {
    width:600px;
}


/* Footer
 *******************************/
#footer {
    margin-top:4px;
    padding:4px 32px;
    font-size:.92em;
    overflow:auto;
    line-height:1.2;
}

#footer img {
	vertical-align:middle;
}

#footer .copyright {
    float:left;
}

#footer .links {
    float:right;
}

#footer .links a {
    padding-left:16px;
    margin-left:16px;
    background-repeat:no-repeat;
    background-position:0 1px;
}

#footer .rss {
    background-image:url(img/rss.gif);
}

#footer .login {
    background-image:url(img/login.gif);
}

#footer a.powered {
    padding:0;
}

#content .post *{
	max-width:100%;
	/*background-color:black;*/
}

.clearfix{clear:both}
.comment-form-comment label,.comment-form-author,.comment-form-email,.comment-form-url{display:block;width:100px}
.clearfix{clear:both}
.gallery-caption {}
.sticky{}
.bypostauthor{}
.categories{list-style:none}

/*menu xxx*/
.main-navigation {
    /*margin-top: 24px;
    margin-top: 1.714285714rem;*/
    text-align: center;
}
.main-navigation li {
    margin-top: 10px; /*ระยะ  menu r*/
    font-size: 12px;
    font-size: 0.857142857rem;
    /*line-height: 1.42857143;*/
	width:100%; /*ความกว้าง ปุ่ม */
}
.main-navigation a {
		font-family: fantasy;
		color: white;
		border: 1px solid red;
		background-color: darkred;
				padding:5px 10px;
				        text-decoration: none;
						display: inherit;/*ทำให้ ปุ่ม หรือ borderขอบแดง กำหนดกว้างได้ ถ้าไม่กำหนดจะแสดง100% */
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
			background-color:gold;
			/*width:100%; ความกว้าง ปุ่ม เมื่อเอาเมาส์วาง*/
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}
 
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
	width: 100%;
    height: 43px;
}
 
@media screen and (min-width: 600px) {
.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }

.main-navigation a {
		font-family: fantasy;
		color: white;
		background-color:transparent;
		padding:0px 10px;
		border:1px solid blue;
	    margin: 5px 0px;
}	
	
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
		width:100px;
    }
    .main-navigation li a {
        /*border-bottom: 0;*/
        color: blue;
        line-height: 30px;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
			color: white;
			background-color:blue;
			font-weight:bold;
    }
    .main-navigation li {
        margin: 0 10px 0 0;
        margin: 0 1.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background:black;
        border: 1px solid blue;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
		font-weight:bold;
        line-height: 2.181818182;
        padding: 3px 10px;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: blue;
        color: white;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
     
    }
/*font neon*/
body {
  background-color: #222222;
  /*background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px;*/
}

#container {
  width: 500px;
  margin: auto;
}

/*Neon*/
a {
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

p:nth-child(1) a {
  color: #fff;
  font-family: Monoton;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}

p:nth-child(1) a:hover {
  color: #FF1177;
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}

p:nth-child(2) a {
  font-size: 1.5em;
  color: #228DFF;
  font-family: Iceland;
}

p:nth-child(2) a:hover {
  -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
  -moz-animation: neon2 1.5s ease-in-out infinite alternate;
  animation: neon2 1.5s ease-in-out infinite alternate;
}

p:nth-child(3) a {
  color: #FFDD1B;
  font-family: Pacifico;
}

p:nth-child(3) a:hover {
  -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
  -moz-animation: neon3 1.5s ease-in-out infinite alternate;
  animation: neon3 1.5s ease-in-out infinite alternate;
}

p:nth-child(4) a {
  color: #B6FF00;
  font-family: "Press Start 2P";
  font-size: 0.8em;
}

p:nth-child(4) a:hover {
  -webkit-animation: neon4 1.5s ease-in-out infinite alternate;
  -moz-animation: neon4 1.5s ease-in-out infinite alternate;
  animation: neon4 1.5s ease-in-out infinite alternate;
}

p:nth-child(5) a {
  color: #FF9900;
  font-family: Audiowide;
}

p:nth-child(5) a:hover {
  -webkit-animation: neon5 1.5s ease-in-out infinite alternate;
  -moz-animation: neon5 1.5s ease-in-out infinite alternate;
  animation: neon5 1.5s ease-in-out infinite alternate;
}

p:nth-child(6) a {
  color: #BA01FF;
  font-family: Vampiro One;
}

p:nth-child(6) a:hover {
  -webkit-animation: neon6 1.5s ease-in-out infinite alternate;
  -moz-animation: neon6 1.5s ease-in-out infinite alternate;
  animation: neon6 1.5s ease-in-out infinite alternate;
}

p a:hover {
  color: #ffffff;
}
/*glow for webkit*/

@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}

@-webkit-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}

@-webkit-keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}

@-webkit-keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
  }
}

@-webkit-keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
  }
}

@-webkit-keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}
/*glow for mozilla*/

@-moz-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}

@-moz-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}

@-moz-keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}

@-moz-keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
  }
}

@-moz-keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
  }
}

@-moz-keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}
/*glow*/

@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}

@keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}

@keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}

@keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
  }
}

@keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
  }
}

@keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}
/*REEEEEEEEEEESPONSIVE*/

@media (max-width: 650px) {
  #container {
    width: 100%;
  }
  /*p {
    font-size: 2em;
  }*/
}
/*-----------------------font neon*/

/*bolder glow*/
@-webkit-keyframes glow {
    to {
        box-shadow: 0 0 25px #F00; /*#0099FF;*/
    }
}

#myGlower {
    height:100%;
    margin: 10px;
    border: 0px solid #69c800;
    /*border-radius: 10px 10px 10px 10px;*/
    animation: glow 0.5s infinite alternate;
}

#myGlower:hover {
    animation-play-state: paused;
}
/*youtube*/
.video-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}
  
.video-container iframe, .video-container object, .video-container embed, .video-container video { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0;
  width: 100%;
  height: 100%;
}
figure {
    display: block;
    margin-block-start: 1em!important;
    margin-block-end: 1em!important;
    margin-inline-start: 1px!important;
    margin-inline-end: 1px!important;
}
pre.prettyprint {
    /*padding: 2px;
    border: 1px solid #888;*/
    background-color: gainsboro!important;}
/*Fb Comments Width Fix*/ .fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe { max-width: 100% !important; width: 100% !important; }

/*  ใส่ขอบเรืองแสงกระพริบให้  class ที่ชื่อ button ไม่ใช่  <button></button>*/
.button {
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family:Kanit;
  font-weight:bold;
  font-size:1.2em;
  padding: 7px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}
@-webkit-keyframes glowing {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 10px #FF0000; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}

@-moz-keyframes glowing {
  0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -moz-box-shadow: 0 0 10px #FF0000; }
  100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}

@-o-keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 10px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

@keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 10px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

/*CSS Spoiler*/
input[id^="spoiler"]{
 display: none;
}
input[id^="spoiler"] + label {
  display: block;
  width: 50%;
  margin: 0 auto;
  padding: 5px 20px;
  background: orangered;
  color: #fff;
  text-align: center;
  font-family:Kanit;
  font-size: 25px;
  font-weight:bold;
  border-radius: 3px;
  cursor: pointer;
  transition: all .6s;
}
input[id^="spoiler"]:checked + label {
  color: #333;
  background: #ccc;
}
input[id^="spoiler"] ~ .spoiler {
  height: 0;
  overflow: hidden;
  opacity: 0;
/*  margin: 10px auto 0; 
  padding: 10px;
  width: 90%;
  background: #eee;
  border: 1px solid #ccc;*/
  border-radius: 8px;
  transition: all .6s;
}
input[id^="spoiler"]:checked + label + .spoiler{
  height: auto;
  opacity: 1;
  padding: 10px;
}

/*3d-box-shadow*/
html,
body {
  height: 100%;
  background-color: #212121;
  margin: 0;
  justify-content: center;
  align-items: center;
  font-family: 'Work Sans', sans-serif;
}

.card {
margin: auto;
  width: 100%;
  /*padding: 10px;
  height: 70px;
  max-width:250px;
  border: 1px solid #111;
  box-shadow: 1px 1px #111, 2px 2px #111, 3px 3px #111, 4px 4px #111, 5px 5px #111, 6px 6px #111, 7px 7px #111, 8px 8px #111, 9px 9px #111, 10px 10px #111, 12px 12px #111, 13px 13px #111, 14px 14px #111, 15px 15px #111, 16px 16px #111, 17px 17px #111, 18px 18px #111, 19px 19px #111, 20px 20px #111;
  -webkit-transform: translateX(-3px);*/
  transform: translateX(-3px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.card h1 {
  margin: 0;
  -webkit-background-clip: text;
  background-image: linear-gradient(115deg, #fc00ff, #00dbde);
  color: transparent;
  text-transform: uppercase;
  font-size: 65px;
  font-weight: 400;
}
.card h1 span {
  font-weight: 800;
}
/*3d-box-shadow*/
.post-nav-links{margin:10px 0px 10px 0px;background-color: #aec3d259;}
.post-page-numbers { padding:10px 20px 10px 20px; background-color:ghostwhite; font-family:Fantasy;text-decoration:none; color:black!important;}
span.post-page-numbers.current{padding:10px 20px 10px 20px; background-color:gold; font-family:Fantasy;text-decoration:none; color:black;}

.category-sky a{margin:0px 5px 0px 0px;float:left;padding:3px 10px 3px 10px; background-color: #337ab7; font-size:11px; font-weight: normal; line-height:19px; text-decoration:none; color:#FFF!important; text-shadow:1px 1px 0px #336600; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;}
.category-sky a:hover{ padding:3px 10px 3px 10px; background-color: #337ab7; font-size:11px; font-weight: normal; text-decoration:none; color:#FFFFFF; text-shadow:1px 1px 0px #336600;}

/**/

/*CSS FB UI POST*********************************************/
/* Target the outer section */
.admin-post-section {padding: 20px;border: 1px solid #ddd;margin-top: 10px;}

/* Style the form itself */
.admin-post-section form {width:99%;text-align: end;}

/* Style the labels */
.admin-post-section label {
  /* Display them as block elements for better layout */
  display: block;margin-bottom: 5px;color:cyan;padding-top:5px;
}
/* Style the text input and textarea */
.admin-post-section textarea {height: 150px!important;}

.admin-post-section input[type="text"],
.admin-post-section textarea {
  width: 99%;
  padding: 5px;
  border: 1px solid #5b5b5c;background-color: #353636;
}
/* Style the file input */
.admin-post-section input[type="file"] {
  width: 200px;padding: 5px;
  /* Remove default button look */
  border: none;background-color: #3aa0e6;color: #fff;
  /* Add a cursor pointer for better UX */
  cursor: pointer;
}
/* submit button on hover state */
.admin-post-section input[type="submit"]:hover {
  /* background color on hover */
  background-color: #2e8bcc;
}