@font-face{
font-family:'webfont-Regular';
font-style:normal;
src:url(./font/webfont-Regular.ttf) format("truetype");
}

.tinynav{display:none}*{margin:0;padding:0}
*{ margin:0;padding:0; }
.tinynav2{}
.tinynav2{float:right;display:block;font-family:'webfont-Regular',serif;color:#336699!important;height:20px!important;background:#f9f9f9;border-radius:0!important;font-size:1.0em;font-weight:400;padding:0!important;margin-top:3px;line-height:0.2em!important}

body {font-family:'webfont-Regular',sans serif;font-size:1.0em;color:#444;font-weight:400;background-color:#fff;}
.mnu{height:80px;background:#fff!important;text-align:left!important;color:#000!important;border:1px!important;margin:0!important;border:2px solid #333;padding:1px!important;margin-bottom:10px}
.tip {width:99%;float:left;border:1px solid #c44000;font-size:1.0em;background:#ffffec;color:#333;padding:4px 2px;margin-bottom:7px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);}
.tip ul li {margin-left:15px}
.rh2{font-family:'Bree Serif',Tahoma;font-weight:700!important;font-size:1.4em!important;color:#000;margin-bottom:10px;line-height:1.2em}


.box-1 {
width:auto;
height:auto;
color:#000;
border-bottom:1px solid #aaa;
font-weight:400;
font-size:1.0em;
padding:5px 0;
margin:0 auto;
margin-bottom:10px;
text-align:justify;
}

.box-1 .thumb img {width:160px;height:110px;align:left;border:0;padding:0 15px 15px 0}
.box-1 h2 a{color:#3399ff;;text-decoration:none}
.box-1 h2 a:hover{color:#333;text-decoration:underline}

.box-1 ul li, .box-1 ol li {margin:0 0 10px 15px;padding:0px}
.box-1 li {text-align:left!important;line-height:1.3em;padding:3px 0}
.box-1 li strong {color:#333}
.box-1 p {line-height:1.3em;margin:10px 0;color:#444; align:justify}

.tips {width:85%;margin:0 auto!important;font-family:'Bree Serif',serif;font-size:1.3em;color:#333;background-color:#fff;padding:5px;margin-bottom:10px;
border:0 solid #ccc;}
.sx {width:95%;background:#ffffff;margin:0;padding:20px;text-align:justify;font-family:'Bree Serif', serif;
font-size:1.0em;line-height:1.5em;font-weight:400;color:#000;margin-top:20px;margin-bottom:20px;
-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);border:1px #ccc solid}
.sx .sxl{width:600px;float:left;border:1px solid #c44000;}
.sx .sxr{width:280px;float:right;border:1px solid #c44000;}
.quote {font-size:1.1em!important;color:#666}
.trf {align:left;margin-right:20px;}

#header1 {height:90px}
#headerBlog {height:70px}
#head {width:100%;margin:0;padding:0 0 5px 10px;display:block;overflow:hidden;}

#head h1, description {font-family:'Fjalla One',Impact;font-weight:400!important;font-size:0.9em!important;color:#6699aa;margin:0;line-height:1.4em;margin-left:3px}
#head h2 {font-family:'Fjalla One',Impact;font-weight:700!important;font-size:1.6em!important;color:#ccc;margin:0;line-height:1.4em;}
#head h2 a{color:#3399bb;}
#heds h2 a{color:#3399bb;text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;}

#header1,#headerBlog {margin-left:0;margin-right:0;margin-top:10;background:#0084b4!important; /*3b5998  0084b4*/
text-align:left!important;
color:#f5f5f5!important;
border:0!important;
margin:0!important;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);
padding:1px!important
}

#header1 .header_right{width:auto;float:right;padding-right:0px;margin-top:4px;color:#fff}
#header1 .header_right a{color:#ffff55;text-decoration:underline}
#header1 .header_right a:hover{color:#f0f0f0;text-decoration:none}
#header1 .header_left, #headerBlog .header_blog{width:auto;float:left;text-align:left;padding-left:10px;margin:0;font-family:'webfont-Regular',Tahoma;font-weight:400;font-size:1em}
#header1 .header_left a, #header1 .header_left a:hover, #headerBlog .header_blog a, #headerBlog .header_blog a:hover{color:#ddd;text-decoration:none}
#header1 .header_left h2, #headerBlog .header_blog h2{font-family:'Fjalla One',Impact;font-weight:700!important;font-size:1.6em!important;color:#ccc;margin:0;line-height:1.4em}
#header1 .header_left h1, #headerBlog .header_blog h1, #headerBlog .header_blog h3, .support, .footer, .footer h3{font-family:'webfont-Regular',Tahoma;font-weight:400;font-size:1.0em!important;color:#ccc;line-height:1.0em}

#wrap{width:1024px;margin:0 auto;padding:5px;border:0 solid #c44000;}
#wrap-blog {width:1024px;font-family:'Roboto',Tahoma;font-size:1.0em;line-height:1.3em;color:#333;margin:0 auto;margin-top:10px;padding:0;border:0 solid #c44000;background-color:#fff}
.blog{width:66%;display: block;overflow:hidden;float:left;margin:0 auto;padding:15px 0 15px 20px;}
.blog {display: block;margin:0 auto;}
.sidebar-blog{width:29%;overflow:hidden;float:right;margin:0;padding:15px 10px;}
.sidebar{overflow:hidden;float:right;width:26.5%;}

a{color:#0066ff;text-decoration:underline}
a:hover{color:#c44000;text-decoration:underline}
.header{width:auto;font-family:'webfont-Regular',Tahoma;font-weight:400;margin-bottom:15px;margin-top:10px;padding:5px 25px;border:0}
.mheader{width:100%;display:block;overflow:hidden;height:80px;font-family:'Fjalla One',Tahoma;font-weight:400;color:#444;padding:5px;border:0}
.left{font-family:'webfont-Regular',Tahoma;width:auto;float:left;margin-left:0;font-weight:400;font-size:1.0em;color:#333;line-height:1.0em;}
.left h1{font-family:'Fjalla One',Impact;font-weight:700;font-size:1.5em!important;color:#555;margin:0;line-height:1.3em;}
.right{width:50%;float:right;text-align:right;padding-right:10px;margin-top:6px;font-weight:400;font-size:1.1em}
.header li {margin-left:5px}
.headline{font-family:'webfont-Regular',serif;font-weight:400;font-size:1.4em;color:#c44000;text-align:center!important;line-height:1.4em;margin:0 auto;padding:0}

.content, .mcontent{display: block;background-color:#fff;margin:0 auto;padding:5px;}
.content, .mcontent{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);border:1px #ccc solid}
.content{float:left;width:730px;}
.mcontent{width:860px;margin-top:20px;margin-bottom:20px;padding:10px 17px}
.content a, .maincontent a{text-decoration:underline}
.content a:hover, .maincontent a:hover{text-decoration:underline}
.bold{font-weight:700}.normal{font-weight:400}blockquote{margin:0 0 0 15px}


.blog h1, .blog h2, .blog h3{font-family:'Bree Serif',tahoma!important}
.log{width:100%;display:block;margin:auto;margin-bottom:20px;color:#555}
.log h3{color:#666 !important;margin-bottom:7px}
.post {-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-user-select:none;}
.post {font-family:'Roboto',serif!important;font-size:107%;color:#333;line-height:1.5em;font-weight:400;width:97%;display:block;overflow:hidden;height:auto;margin:0;margin-bottom:20px;padding:10px}
.post h1, .post h2, .post h3, .post h4{font-family:'Bree Serif',serif}
.post h1{font-size:145%;color:#404040;line-height:1.2em;font-weight:700;margin-bottom:30px}
.post h2{font-size:140%;line-height:1.3em;color:#0088bb;font-weight:400;margin:15px 10px}
.post h3{font-size:115%;line-height:1.3em;color:#111;font-weight:700;margin:10px}
.post a{color:#3399ff;;text-decoration:none}
.post a:hover{color:#333;text-decoration:underline}
.bold{font-weight:700}
.normal{font-weight:400}
blockquote{margin:0 0 0 15px}
em{font-style: normal}
.post blockquote {font-family:'Bree Serif',Tahoma;color:#555;font-weight:400;margin:10px;border-left:3px solid #ccc;border-right:3px solid #ccc;padding:10px}
.post li {margin-left:25px;padding:0;color:#555;font-family:'Bree Serif',serif;line-height:1.5em;font-weight:300;}
.post img{height:auto;width:auto;max-width:100%;border:0;padding:5px}
.post h2 a{color:#3399ff;;text-decoration:none}
.post h2 a:hover{color:#333;text-decoration:underline}
.post p {margin:10px 0;align:justify}

.post-index {font-family:'Roboto',Tahoma;font-size:1.0em;line-height:1.4em;font-weight:400; display:block;overflow:hidden;witdh:100%;padding:25px 10px}
.post-index .col-2 .sub-title {font-size:130%;color:#333;font-weight:400;line-height:1.2em;text-transform:capitalize;margin-bottom:15px}
.post-index .sub-title a{color:#404040;text-decoration:none}
.post-index .sub-title a:hover{color:#000;text-decoration:none}
.post-index .col-2{float:right;width:68%}
.post-index .col-1{float:left;width:28%}
.post-index .col-1 img {width:100%;height:130px;align:left;padding:0;margin-top:10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);border:1px #ccc solid}

/* -- NEW -- */
.post-index .col-4 .sub-title {font-size:130%;color:#333;font-weight:400;line-height:1.2em;text-transform:capitalize;margin-bottom:15px}
.post-index .sub-title a{color:#404040;text-decoration:none}
.post-index .sub-title a:hover{color:#000;text-decoration:none}
.post-index .col-4{float:right;width:58%}
.post-index .col-3{float:left;width:40%}
.post-index .col-3 img {width:100%;height:220px;align:left;padding:0;margin-top:10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);border:1px #ccc solid}

.label {display:block;overflow:hidden;font-size:0.9em!important;text-decoration:none;text-align:left;width:auto}
.label a{color:#666;text-decoration:none}
.label a:hover{color:#333;text-decoration:none}

.area {width:97%;height:1200px;font-family:'webfont-Regular',Arial;font-size:1.0em;color:#000;line-height:1.4em;font-weight:400;background:#f9f9f9;margin:0;padding:10px;border:1px solid #0099ff}
.sourceldr {width:95%;background-color:#fff;margin:0 auto!important;padding:5px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);border-bottom:1px #999 Groove;border-top:1px #999 Groove;border-left:1px #999 Groove;border-right:1px #999 Groove;}
.ldr{margin-left:30px;color:#c44000;font-size:1.3em!important;padding:3px 0}
.ldr a{color:#c44000}
.ldr a:hover{color:#000}
.text a{color:#c44000;text-decoration:underline}
.text a:hover{color:#6699FF;text-decoration:underline}
.sh{cursor:pointer;}
.lt {margin-left:30px;color:#333;font-size:1.0em;padding:3px 0}
.lt a{color:#0099ff;font-size:1.1em!important}
.lt a:hover{color:#c44000}
.tx{text-align:center;margin-top:15px;margin-bottom:10px;color:#333!important;font-size:1.4em!important;text-decoration:underline;font-weight:400}
.targetDiv {width:95%;background-color:#fff;margin:0 auto!important;padding:5px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);border:1px #0099ff solid}

.textarea{left:0;top:0;visibility:hidden}
.result{width:97%;height:auto;font-family:Arial;font-weight:400;font-size:1.0em;color:#000;line-height:1.4em;border:1px #0088cc solid;background:#f9f9f9;margin:0 auto;padding:8px}
.result a{color:#444!important;text-decoration:underline!important}
.result a:hover{color:#369!important;text-decoration:underline!important}
.desc{font-family:'webfont-Regular',Arial;font-size:1.2em!important;font-weight:700!important;color:#333;margin-bottom:5px;margin-left:10px}
.nt{font-family:'webfont-Regular',Arial;width:94%;height:auto;border:0 solid #0099ff;font-size:1.0em!important;color:#333;margin-bottom:20px;margin-left:20px}
.oups{margin:0 auto;width:90%;height:auto;border:1px solid #0099ff;font-size:1.0em;color:#333;padding:5px;margin-bottom:10px}
.sp{color:#3366ff;font-weight:700}
.work{width:97.5%;height:300px;font-family:'webfont-Regular',Arial;font-weight:400;font-size:1.0em;color:#000;line-height:1.2em;border:1px #585858 solid;background:#f9f9f9;margin:0 auto;padding:8.5px}
.artikel{width:97.5%;height:800px;font-family:Arial;font-weight:400;font-size:1.0em;color:#000;line-height:1.4em;border:1px #585858 solid;background:#f9f9f9;margin:0 auto;padding:8.5px}
.origin{width:97%;height:auto;font-family:Arial;font-weight:400;font-size:1.0em;color:#000;line-height:1.2em;border:1px #585858 solid;background:#f9f9f9;margin:0 auto;padding:8px}
.ori{width:97.5%;height:400px;font-family:Arial;font-weight:400;font-size:1.0em;color:#000;line-height:1.2em;border:1px #585858 solid;background:#f9f9f9;margin:0 auto;padding:8.5px}

.demo{width:auto;font-weight:400;margin:0 auto;margin-top:10px;margin-bottom:10px;border:1px solid #999;background:#f8f8f8;padding:5px}
.demo a{color:#0066ff;text-decoration:underline}
.demo a:hover{color:#c40000;text-decoration:none}
img{height:auto;width:auto;max-width:100%}

.controlbox{width:auto;font-size:1.0em;background:#f9f9f9 url('https://thearticlespinner.com/img/bg.png') top center repeat;
margin:0 auto;margin-bottom:10px;padding:10px;border:1px solid #330;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.controlbox a{color:#220;text-decoration:none}
.controlbox a:hover{color:#00f;text-decoration:underline}
.boxinput2{margin:6px 0 10px;padding:0}

.stopwords{width:98.4%;font-family:'webfont-Regular',Tahoma;padding:3px;font-size:1.0em;font-weight:400;color:#333;border:1px #bbb solid;background-color:#f9f9f9;margin-bottom:1px;-webkit-border-radius:5px;    
border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;}
.std{font-family:'webfont-Regular',Tahoma;font-weight:400;font-size:1.1em;color:#066000;text-decoration:none;margin:0 auto;padding:0 15px}
.reset{font-family:'Fjalla One',Tahoma;font-weight:400;font-size:1.1em;color:#666;text-decoration:none;margin-right:4px;padding:6px 10px}
.button{font-family:'Fjalla One',Tahoma;font-weight:400;font-size:1.1em;color:#066000;text-decoration:none;margin-right:1px;padding:7px 7px}
.button1{font-family:'Fjalla One',Tahoma;font-weight:400;font-size:1.1em;color:#3388bb;text-decoration:none;margin-right:0;padding:7px 7px}
.button2{font-family:'Fjalla One',Tahoma;font-weight:400;font-size:1.1em;color:#c63000;text-decoration:none;padding:7px 7px}
.buttonfirst{font-family:'webfont-Regular',Tahoma;font-weight:400;font-size:1.2em;color:#262398;text-decoration:none;padding:12px}
.btnx{font-family:'webfont-Regular',Tahoma;font-weight:400;font-size:1.0em;color:#c44000;text-decoration:none;margin-right:5px;margin-bottom:2px;margin-top:2px;padding:0 5px}
.captcha{width:100px;height:auto;background:#fff;font-family:'webfont-Regular',Tahoma;text-align:center;font-weight:700;font-size:1.8em;color:#333;border:1px solid #ccc;padding:0;margin-bottom:2px}

#sourcebox a{color:#444;text-decoration:underline}#sourcebox a:hover{color:#369;text-decoration:underline}
#sourcebox1 a{color:#444;text-decoration:underline}
#sourcebox1 a:hover{color:#369;text-decoration:underline}
#sourcebox1 a{color:#444;text-decoration:underline}
#sourcebox1 a:hover{color:#369;text-decoration:underline}
.title{font-family:'webfont-Regular',sans-serif;font-size:1.2em;font-weight:700;color:#330;margin:0 0 0 5px}
.unique1{font-family:georgia;font-weight:400;font-size:1.2em;color:#c00000;margin:2px 0 0}
.uniquelevel1{font-family:georgia;font-weight:400;font-size:1.0em;color:#4444444;margin:2px 0 0}

.select-option{font-family:'webfont-Regular',Tahoma;font-weight:400;font-size:1em;color:#c44000;width:180px;height:30px!important;outline:0!important;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;background:#transparent;border:1px inset #ccc;-webkit-border-radius:5px;border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px}
.select-option:focus,.select-option:active,.select-option:hover{color:#000;outline:0!important;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;border:1px solid #369;background:#f9f9f9;-webkit-border-radius:5px;border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px}
/* -- sidebar -- */
.sidebar{overflow:hidden;float:right;width:26.5%;}
.sidebar .fx{font-family:'Bree Serif',serif;font-size:1.0em;font-weight:400;text-align:center;color:#000;padding:0 0 0 2px}
.sidebar .ftl{font-family:'webfont-Regular',serif;font-size:1.0em;font-weight:400;color:#0084b4}

.sidebar .ft{font-family:'webfont-Regular',serif;font-size:1.0em;color:#111;line-height:1.5em;padding:5px 10px;margin-bottom:10px;margin-right:7px;background-color:#fff;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);border:1px #ccc solid}
.sidebar .ft li{margin-left:15px;margin-bottom:15px}
.sidebar .ft li a{color:#333!important;text-decoration:none!important;cursor:none!important}
.sidebar .ft li a:hover{color:#333!important;text-decoration:none!important;cursor:none!important}
.hl{font-family:Tahoma;font-weight:700;font-size:1.0em;color:#c44000;}

.sxf {font-family:'webfont-Regular',serif;color:#333;background-color:#fff;padding:20px 5px;margin-bottom:10px;margin-right:7px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);border:1px #ccc solid}

.srx {color:#333;background-color:#fff;padding:20px 2px 20px 0;margin-bottom:10px;margin-right:7px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);border:1px #ccc solid}

.sxt {display:block;font-family:'Fjalla One', serif;font-size:1.1em;line-height:1.5em;font-weight:400;color:#4f4f4f;text-align:center;margin:0 0 10px 0;padding:0 5px}

.grx {border:2px solid #cc6633;padding:15px 10px;width:auto;margin:auto}
.bullet ul {list-style-type: none!important;padding: 0!important;margin: 0!important;}
.bullet li {font-family:'Bree Serif', serif;background: url('https://thearticlespinner.com/img/checkmark.png') no-repeat left top;height:70px;
padding-left:37px;padding-top:0px;font-size:1.0em;line-height:1.1em;font-weight:400;color:#000;}
.bulletsx {font-family:'Bree Serif', serif;font-size:0.8em;font-weight:400;color:#000}

.no_bullet ul {list-style-type: none!important;padding: 0!important;margin: 0!important;}
.no_bullet li {display:block;font-family:'Fjalla One',serif;background: url('https://thearticlespinner.com/img/checkmark.png') no-repeat left top;padding-left:35px;padding-right:5px;padding-top:0px;padding-bottom:0px;margin-bottom:15px;font-size:1.1em;line-height:1.5em;font-weight:400;color:#4f4f4f}

.rxs li {display:block;font-family:'Fjalla One',serif;background: url('https://thearticlespinner.com/img/checkmark.png') no-repeat left top;padding-left:35px;padding-right:5px;padding-top:0px;padding-bottom:0px;margin-bottom:15px;font-size:1.1em;line-height:1.5em;font-weight:400;color:#2f2f2f;border:0 solid #1f1f1f}

/* -- recent -- */
.recent {font-family:'Bree Serif',Tahoma;display:block;overflow:hidden;width:100%;height:auto;color:#333;border-bottom:0;padding:0;margin:0 0 25px 0}
border{font-family:'Fjalla One',serif;font-size:1.15m;font-weight:400;color:#aaa;display:block;overflow:hidden;border-bottom:1px solid #c63000;padding:0 0 5px 10px;margin-bottom:20px }
posted{font-family:'Bree Serif',serif;font-size:1.1em;width:auto;display:block;overflow:hidden;border:1px solid #c63000;padding:5px 10px;background:#e6e6e6}
.recent h3 {font-family:'Bree Serif',Tahoma;text-decoration:none;font-size:16px;color:#333;line-height:1.2em;font-weight:400}
.recent h3 a{color:#333;text-decoration:none}
.recent h3 a:hover{display:block;text-decoration:none;color:#3399ff;}
.recent .thumb {width:30%; height:70px;float:left;padding:0; margin:0 5px 0 0;display:block;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);border:1px #ccc solid }
.recent .desc {width:65%;height:auto;float:right;align:left;padding:0; margin:0;display:block;overflow:hidden;}

/* ----------- button ----------- */
.btn1{
font-family:'webfont-Regular',Arial!important;font-size:1.0em!important;font-weight:400!important;text-decoration:none!important;
color:#c00000!important;cursor: pointer!important;display:inline-block;padding:0.15em 0.5em!important;margin:0.1em;
border:0.1em solid #999;box-sizing: border-box;background-color:#f0f0f0;text-align:center;position:relative;
border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:0 0px 2px rgba(0,0,0,0.2);-moz-box-shadow:0 0px 2px rgba(0,0,0,0.2);box-shadow:0 0px 2px rgba(0,0,0,0.2)
}
.btn1:hover{color:#c00000!important;border-color:#9999ff;background-color:#c0deed;text-decoration:none!important}
.btn1:active{color:#000!important;background-color:#c0ccdd;border:0.1em inset #0084b4;text-decoration:none!important}

.btn, .btn a {width:auto;font-family:'Fjalla One', serif!important;color: #fff;font-weight:400;font-size: 1.3em;
border: 2px solid #333;text-decoration: none;border-radius:5px;display:block;text-align:center;
background:#009900;padding-top:8px;padding-bottom:8px;padding-left:5px;padding-right:5px}
.btn:hover {background: #006600;text-decoration: none;color: #fff}

.btn2, .btn a {width:55%;margin:0 auto!important;;font-family:'Bree Serif', serif!important;color: #fff;font-weight:400;font-size: 1.3em;
text-decoration:none!important;border: 2px solid #1f628d;text-decoration: none;border-radius:5px;display:block;text-align:center;
background:#3498db;padding-top:8px;padding-bottom:8px;padding-left:5px;padding-right:5px}
.btn2:hover {background: #3cb0fd;text-decoration:none!important;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;color: #ffff55}

.sd{width:100%;margin-top:10px;margin-bottom:10px}
.sd .sdl{float:left;width:35%;border:0 solid #333}
.sd .sdr{float:right;width:60%;margin-top:15px;margin-right:10px;border:0 solid #333}

/* -- FOOTER -- */

.foter{clear:both;height:auto;width:auto;margin:0 auto;padding:10px 0}
.foter h2, .foter h3, .foter h4{font-size:0.9em!important;font-weight:400!important;color:#999!important;margin:0 auto;margin-top:5px;}


/* -- Navigation BLOG -- */
.menu2{font-family:'webfont-Regular',sans-serif;font-weight:normal;color:#333;font-size:13px;width:100%;margin:0 0 30px 10px;padding:0 auto;}
.menu2 span {font-family:sans-serif;font-weight:bold;color:#202020;font-size:18px;margin:0;}
.menu2 a{color:#336699}
.menu2 a:hover{color:#0066ff}


.menus {width:auto;margin-bottom:1px;}
#menus{font-family:"Bree Serif", serif;padding:0;margin-top:0;margin-bottom:40px;font-size:90%;font-weight:400;background-color:#fff;border-bottom:1px solid #000}
#menus a{display:block;color:#f0f0f0;line-height:40px;padding:0 10px;text-decoration:none}
#menus ul, #menus li{margin:0 auto;padding:0;list-style:none}
#menus ul{height:30px}
#menus li{float:left;display:inline;position:relative}
#menus input{display:none;margin:0;padding:0;width:100%;height:30px;opacity:0;cursor:pointer}
#menus label{font-size:150%;color:#303030;font-weight:700;display:none;width:50px;padding:0;text-align:center;line-height:0;}
#menus label span{font-size:80%;color:#303030;font-weight:700;padding-top:1px;position:absolute;left:43px}

#menus li a{color:#000;line-height:25px}
#menus li a:hover{color:#444;text-decoration:underline;}
#menus li:hover ul.menuss{display:block}
#menus ul.menuss a:hover{-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}
/* -- END Navigation BLOG -- */


/* -- NEW Navigation  -- */
nav {font-family:'Fjalla One', tahoma;font-size:14px;font-weight:400}
#menu a,#menu a:hover{text-decoration:none}
#menu ul{margin:0;padding:0}
#menu .main-menu{display:none}
#tm:checked + .main-menu{display:block}
#menu input[type="checkbox"],#menu ul span.drop-icon{display:none}
#menu li,#toggle-menu,#menu .sub-menu{border-style:0}
#menu li,#toggle-menu{border-width:0 0 1px}
#menu li,#toggle-menu,#menu a{position:relative;display:block;color:#f0f0f0;text-shadow:1px 1px 0 rgba(0,0,0,.125)}
#menu,#toggle-menu{background-color:#5599bb}
#menu{background-color:#5599bb;border:4px solid #0088aa;border-radius:5px}

#menu .sub-menu li:last-child{border-bottom:1px solid #ccc}
#menu .sub-menu{background-color:#e0e0e0;clear:both;margin:0 1em;}
#menu .sub-menu{display:none}
#menu .sub-menu a{color:#444}
#menu .sub-menu a:hover{color:#f0f0f0;background-color:#333;}

#toggle-menu,#menu a{padding:2px 7px 3px 7px}
#menu a{transition:all .125s ease-in-out;-webkit-transition:all .125s ease-in-out}
#menu a:hover{background-color:#fff;color:#5599bb;}
#menu input[type="checkbox"]:checked + .sub-menu{display:block}

#toggle-menu .drop-icon,#menu li label.drop-icon{width:90%;position:absolute;height:70%;right:1.5em;top:0.60em}
#menu label.drop-icon,#toggle-menu span.drop-icon{text-align:left;padding-left:20px}
#menu label.drop-icon,#toggle-menu span.drop-icon{border:0 solid #333;width:1em;height:1em;text-align:center;line-height:0.5em}
#menu .drop-icon{line-height:1}
.clearfix{*zoom:1}
.clearfix:before,.clearfix:after{content:'';display:table}
.clearfix:after{clear:both}

/* -- END Navigation  -- */

#cover-spin {
position:fixed;
width:100%;
left:0;right:0;top:0;bottom:0;
background-color: rgba(255,255,255,0.7);
z-index:9999;
display:none;
}

@-webkit-keyframes spin {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#cover-spin::after {
content:'';
display:block;
position:absolute;
left:48%;top:40%;
width:40px;height:40px;
border-style:solid;
border-color:black;
border-top-color:transparent;
border-width: 4px;
border-radius:50%;
-webkit-animation: spin .8s linear infinite;
animation: spin .8s linear infinite;
}

/* ----------- LATEST AND RELATED POST ----------- */
.related, .aw {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: center;
-webkit-box-align: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
text-align: -webkit-center;
align-items: center;
flex-wrap:wrap;justify-content:center;	
margin:auto;margin-bottom:30px;padding:0;
border:0 solid #000}

.block {display:inline-block;overflow:hidden;width:21%;height:210px;margin:0 auto;padding:5px;color:#333;font-weight:400}
.ax {display:inline-block;overflow:hidden;width:17%;height:180px;margin:0 auto;padding:5px;color:#333;font-weight:400}

.block h4, .block h4 a {font-size:95%;font-weight:400;line-height:1.3em;color:#000;text-align:left;text-decoration:none  }
.block h4 a:hover {color:#3399ff;text-decoration:none  }
.block:hover {border:0 solid #fff;}
desc {width:98%!important;margin:auto;height:auto;display:block;text-align:left;}

.br .thumb{width:100%;height:115px;padding:0;margin:0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);border:1px #ccc solid}

.br, .bn, .kr, .kn {width:100%;padding:0;margin:0}
.kr .thumb{width:100%;height:115px;padding:0;margin:0}

.ax h2, .ax h2 a {display:block;font-family:"Bree Serif",tahoma;font-size:95%;font-weight:400;line-height:1.3em;color:#000;text-align:left;text-decoration:none;padding:0 0 0 1px;border:0 solid #333  }
.ax h2 a:hover {color:#3399ff;text-decoration:none  }
.ax:hover {border:0 solid #fff;}


@media screen and (max-width: 1024px){
#wrap, #wrap-blog{width:97%;}
.content, .blog{width:71%;}
.mcontent{width:800px;}
#header1 .header_left h1{font-size:0.8em}
#header1 .header_left h2{font-size:1.7em}
.blog{width:64%}
.sidebar-blog{width:28.5%!important;margin-top:0}
}

@media screen and (max-width:895px){
.mcontent{width:720px;}
.select-option{width:150px}

.blog{width:64%}
.sidebar-blog, .sidebar .sd .sdr{width:30%!important;margin-top:0}

/* -- Navigation BLOG -- */
#menus{width:auto;display:block;background:#ccc;border:0 solid #666;margin-bottom:40px !important;padding:0} /* #3a89b9 */
#menus{margin:0;height:30px;}
#menus{position:relative}
#menus ul{width:auto;font-size:1.3em;background:#999;position:absolute;top:110%;left:0;z-index:3;height:auto;
display:none;padding:0 20px;}
#menus li{display:block;float:none;width:auto;padding:10px 12px;}
#menus input,#menus label{position:absolute;top:10px;left:0;display:block;}
#menus input{z-index:4}
#menus input:checked + label{color:#333}
#menus input:checked ~ ul{display:block}  
/* -- END Navigation BLOG -- */
}

@media only screen and (min-width: 800px) {
#menu .main-menu{display:block}
#toggle-menu,#menu label.drop-icon{display:none}
#menu ul span.drop-icon{display:inline-block}
#menu li{float:left;border-width:0 1px 0 0}
#menu .sub-menu li{float:none}
#menu .sub-menu{border-width:0;margin:0;position:absolute;top:100%;left:0;width:12em;z-index:3000}
#menu .sub-menu,#menu input[type="checkbox"]:checked + .sub-menu{display:none}
#menu .sub-menu li{border-width:0 0 1px}
#menu .sub-menu .sub-menu{top:0;left:100%}
#menu li:hover > input[type="checkbox"] + .sub-menu{display:block}
}

@media screen and (max-width:800px){
#header1 {height:120px;font-size:90%!important;}
.sx,#header1 .header_left,#header1 .header_right{width:auto}
#header1 .header_right{float:left;padding-right:0;margin-top:4px;margin-left:10px;color:#fff}

.sidebar .sd .sdr{width:55%!important;margin-top:15px;}
.sidebar-blog, .sidebar, .blog, .content, .mcontent, .nt, .origin{float:none;display:block;width:auto;height:auto}
.work, .artikel{float:none;width:94%;border:1px solid #0099ff;}
.select-option{width:100%}
.sidebar .ft,.sidebar .sxf, .grid{padding:2px;margin:10px 0;border:1px solid #ccc;-webkit-box-shadow:0!important;-moz-box-shadow:0!important;box-shadow:0!important}

/* -- SIDEBAR -- */
.sidebar-blog {float:none;width:auto !important;}
.recent .thumb {width:25%;height:80px;float:left;padding:0; margin:0 5px 0 0;display:block;}
.recent .desc {width:70%;height:auto;float:right;align:left;padding:0; margin:0;display:block;overflow:hidden;}
.recent h3 {font-size:1.1em }

/* -- Navigation BLOG -- */
#menus{width:auto;display:block;background:#ccc;border:0 solid #666;margin-bottom:40px !important;padding:0} /* #3a89b9 */
#menus{margin:0;height:30px;}
#menus{position:relative}
#menus ul{width:auto;font-size:1.3em;background:#999;position:absolute;top:110%;left:0;z-index:3;height:auto;
display:none;padding:0 20px;}
#menus li{display:block;float:none;width:auto;padding:10px 12px;}
#menus input,#menus label{position:absolute;top:10px;left:0;display:block;}
#menus input{z-index:4}
#menus input:checked + label{color:#333}
#menus input:checked ~ ul{display:block}  
/* -- END Navigation BLOG -- */
}

@media screen and (max-width:560px){
#header1 {height:130px!important;font-size:90%!important;}
.label, .log{display:none!important}
.blog{display:block;padding:auto !important;padding:0 5px;margin:0 auto;box-sizing:border-box !important}
.post-index{padding:0 0 20px 0 ;margin-bottom:20px;border-bottom:3px solid #ccc}
.post-index .col-2{float:none;width:100%}
.post-index .col-1{float:none;width:100%}
.post-index .col-1 img {width:100%;align:none;padding:0;margin-bottom:20px}


/* -- RELATED -- */
.block, .ax {display:block;overflow:hidden;width:100%;height:auto !important;margin:10px 0;padding:0;background-color: #fff;}
.br .thumb, .kr .thumb {width:100%;height:80px;float:left;padding:0; margin:0 5px 0 0;display:block;}
.br, .kr {float:left!important;width:25%;height:auto;padding:0; margin:0 5px 0 0;display:block;}
.bn, .kn {float:right!important;width:70%;height:auto;align:left;padding:0; margin:0;display:block;overflow:hidden;}
.block h4, .ax h2 {font-size:1.3em;font-weight:400 }
.block:hover {border:1px solid #fff;}

/* -- SIDEBAR -- */
.sidebar-blog {float:none;width:auto !important;}
.recent .thumb {width:25%;height:80px;float:left;padding:0; margin:0 5px 0 0;display:block;}
.recent .desc {width:70%;height:auto;float:right;align:left;padding:0; margin:0;display:block;overflow:hidden;}
.recent h3 {font-size:1.1em }


/* -- Navigation BLOG -- */
#menus{width:auto;display:block;background:#ccc;border:0 solid #666;margin-bottom:40px !important;padding:0} /* #3a89b9 */
#menus{margin:0;height:30px;}
#menus{position:relative}
#menus ul{width:auto;text-align:left !important;font-size:1.3em;background:#999;position:absolute;top:110%;left:0;z-index:3;height:auto;
display:none;padding:0 20px;}
#menus li{display:block;float:none;width:auto;padding:10px 12px;}
#menus input,#menus label{position:absolute;top:10px;left:0;display:block;}
#menus input{z-index:4}
#menus input:checked + label{color:#333}
#menus input:checked ~ ul{display:block}  
/* -- END Navigation BLOG -- */
/* -- Navigation NEW -- */
}