/* Free WebFonts from OnlineWebFonts.com */
@font-face {font-family: "Aldrich"; src: url("//db.onlinewebfonts.com/t/8adb01f8db81e96685a037d275971bed.eot"); src: url("//db.onlinewebfonts.com/t/8adb01f8db81e96685a037d275971bed.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/8adb01f8db81e96685a037d275971bed.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/8adb01f8db81e96685a037d275971bed.woff") format("woff"), url("//db.onlinewebfonts.com/t/8adb01f8db81e96685a037d275971bed.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/8adb01f8db81e96685a037d275971bed.svg#Aldrich") format("svg"); } 
@font-face {font-family: "AmpleSoftPro-Regular"; src: url("//db.onlinewebfonts.com/t/a21f17cc7904597ec24db2c98c8eb1d4.eot"); src: url("//db.onlinewebfonts.com/t/a21f17cc7904597ec24db2c98c8eb1d4.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/a21f17cc7904597ec24db2c98c8eb1d4.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/a21f17cc7904597ec24db2c98c8eb1d4.woff") format("woff"), url("//db.onlinewebfonts.com/t/a21f17cc7904597ec24db2c98c8eb1d4.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/a21f17cc7904597ec24db2c98c8eb1d4.svg#AmpleSoftPro-Regular") format("svg"); } 

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}
,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}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}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}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}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */ html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.hidden{display:none!important}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}.invisible{visibility:hidden}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}@media print{*,:after,:before{background:0 0!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}

/* START OWN CODE */
* {
  box-sizing: border-box;
}

:root {
  --txt-color:#444;
  --bg-color:#f5f5f5;
  --border-line:1px double #f5f5f5;    
  --font-f1:"AmpleSoftPro-Regular";
  --font-f2:"Aldrich"
}

body 
{
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol"; /*same fonts from vanilla css https://github.com/bradleytaunt/vanilla-css/blob/master/vanilla.css */  
}

a {color:blue}
a:hover {color:#6495ed}

form input[type=text] {caret-color:red}
h1,h2,h3,h4,h5,h6 {font-family:var(--font-f2)}
.no-set-desc {padding:4px;background-color:var(--bg-color)}
code,kbd {font-size:smaller}
blockquote {border-left:solid 1rem #f5f5f5;padding:1px 1rem;margin:1rem}
/* INI - classes css to use in your code editor */
main article img.left, main article img.right {margin:1rem}
main article img.left {float:left;margin-left:0}
main article img.right {float:right;margin-right:0}
main article img.center {display:block;margin:auto}
.w25 {width:25%}
.w50 {width:55%}
.w75 {width:75%}
.border {border:var(--border-line)}
.bg {background-color:var(--bg-color)}
.opacity {filter:opacity(50%)}
.grayscale {filter:grayscale(50%)}
/* END */

.msg {margin:1rem;font-size:0.83rem}
.msg h2 {background-color:var(--bg-color);padding:0.3rem}
.msg p {padding:0.84rem}

.decor
{
  width:100%;
  height:2em;  
  background-color:#bbb  
}

.decor2
{
  background-color:#eee
}

#container
{
  width:50rem;
  margin:0.5rem auto 0.5rem auto;
  font-size:0.9rem;
  font-family:var(--font-f1);  
  border:1px double #bbb;
  box-shadow:1px 1px 20px #bbb
}

header#logo
{
  padding:2rem;    
  border-color:#bbb;
  background-color:var(--bg-color)
}

header#logo h1 
{
  font-size:4rem;
  text-shadow:1px 1px 5px #bbb;
  margin:0
}

header#logo h1 a {color:var(--text-color); text-decoration:none}

header#logo section#about-site
{
  font-size:2rem;
  color:#999
}

header#logo section#about-site p.slogan
{
  font-style:italic;
  text-shadow:1px 2px 1px #bbb;
  margin:1rem 0
}

header#logo section#about-site p.description
{
  font-size:1.6rem
}

nav
{
  background-color:var(--bg-color);  
  padding:0.3rem;  
}

nav ul
{
  padding:0;
  list-style:none
}

nav ul li
{
  margin:3px;
  display:inline-block;
}

nav ul li::after
{
  content:' | ';
  color:blue;  
  white-space:pre
}

nav ul li:first-of-type::before
{
  content:' | ';
  color:blue;  
  margin-left:1.3rem
}

nav ul li a
{
  font-size:0.7rem;
  font-family:Arial, sans-serif;
  text-transform:uppercase;  
}

main article
{
  border:var(--border-line);  
  border-width:1px 0 0 0;  
  margin:0 10px;
  padding:2rem 1rem
}

article header figure {width:100%;height:auto}

.readmore
{
  padding:0.6rem;    
  display:block;  
  background-color:var(--bg-color);  
  float:right;  
  margin:2rem 1rem 0 0;
  white-space:nowrap !important;
    
}

.plugin-search
{
  float:right;    
  margin:-2.5rem 1.5rem 0 0
}

.plugin-search form *
{
  border:var(--border-line);
  border-color:#bbb;
  font-size:0.8rem
}

.plugin-search form input[type=text]:focus
{
  outline:1px double red;
  border:1px double red
}

main section.featured-content
{
  padding:1rem;
  margin:2rem;
  border:var(--border-line);
  box-shadow:1px 1px 10px #ddd
}

main section.featured-content:hover
{
  box-shadow:1px 1px 10px #bbb
}

main article h2, main section.featured-content h2
{
  margin:0;
  font-size:1.1rem;  
  padding:0.5rem;
  border-left:10px inset var(--bg-color);
  background-color:var(--bg-color);
}

main section.featured-content h2
{
  margin:-1rem -1rem 2rem -1rem  
}

main article h2:hover {border-color:blue;width:100%}

main article h2 a
{
  text-decoration:none;
  color:var(--text-color);    
  display:inline-block;
  width:100% !important;
}

main article h2 a:hover
{
  width:100% !important;  
  display:inline-block
}

main article img {max-width:100%;height:auto}

main article header figure img.cover
{
  width:46.5rem;
  height:10rem;
  margin:0 0 0 -2.5rem;
  background:#bbb;
  filter:grayscale(50%);
  max-width:100%;
  height:100%;
  max-width:744px;
  max-height:160px
}

main article header figure img.cover:hover
{
   filter:grayscale(0);
}

main article header figure figcaption {margin-right:4rem}

/* contact3 plugin */
main form {width:auto;padding:1rem 1.8rem}
main form input, main form select, main form button, main form input[type=submit],form input[type=button],
main form textarea {width:100%;border:0.1rem solid #ddd;padding:0.2rem}
main form * {width:100%;outline:none}
main form input[type=submit],main form input[type=button],main form button {width:100%;border:1px outset #ddd;padding:0.4rem}
main form input[type=submit]:hover,main form input[type=button]:hover,main form button:hover {background-color:#eee}
main form .form-group {margin:0.2rem 0;border:0 !important;}
main form input[type]:focus, main textarea:focus {background-color:#f5f5f5}
.contact3 {margin-top:-3rem !important}
.form-check {background-color:#bbb;padding:0.2rem}
.form-check * {width:auto !important}
.form-check input {margin:0.5rem 0 0 0.5rem;width:1rem;display:inline-block}
.form-check label {display:inline-block;width:80%}

/* COMMENT PLUGIN */
#container main #disqus_thread {margin:2rem;margin-top:-1rem;border-top:var(--border-line);padding:1rem}

/* Snicker */
.snicker-comments {margin:1.6rem !important;max-width:93.2% !important;
  border-radius:0 !important;margin-top:-1.2rem !important}
.snicker-comments * {border-radius:0 !important;width:auto}
.snicker-comments form {}
.snicker-comments input[type="text"]:focus,
.snicker-comments input[type="email"]:focus,
.snicker-comments textarea:focus{ box-shadow:none !important }

main article header p
{
    background:var(--bg-color);    
    padding: 1rem;
    margin:1rem 0 
}

main article footer
{
  margin-bottom:-1rem  
}

main article footer p
{
  display:inline-block;
  padding:0 4px;
  width:100%
}

main article footer p small
{
  font-size:0.8rem;  
  padding:0.3rem;
  border:var(--border-line);
  background-color:#f5f5f5
}

.paginator
{
  background-color:#fff;
  border-top:1px double #eee;  
  margin-bottom:1rem
}

.paginator ul
{
  margin-top:2rem
}

#container > footer
{
  color:#999;
  font-size:1rem;
}

#container > footer p
{
  margin:2rem;  
  font-family:var(--font-f2);
  color:var(--text-color)
  
}

#container > footer p a {color:darkblue; text-decoration:none}
#container > footer p img {height:1.4rem}

/* 
CSS MEDIA QUERY By
*/

@media (max-width: 799px)
{  
  #container {width:auto;height:auto} 
  article header img.cover {
    max-width:70%;
    max-height:160px;
    width:100% !important;
    height:auto !important;
  }   
  .snicker-comments {margin:1.6rem !important;max-width:91.3% !important;margin-top:-1.6rem !important;}
}

@media (max-width: 480px) 
{
  header#logo h1 {font-size:3rem}
  header#logo section .slogan {font-size:1.4rem !important}
  header#logo section .description {font-size:1rem !important}
  .plugin-search {width:100%;margin-top:0.5rem;text-align:right}  
  .featured-content {width:100%;margin:2rem 0rem !important;}
  figcaption {background:red !important;margin:0;padding:0;}
  figcaption {width:100%;margin-left:-2.5rem}  
  main article {margin:0;padding:1.4rem 0.3rem}
  #container main #disqus_thread {margin:0rem !important}
  main form {width:auto;padding:1rem 0.3rem}
  .snicker-comments {margin:0.3rem !important;min-width:97.6% !important;}
}

@media (max-width: 388px) 
{
  header#logo h1 {font-size:2rem}
  header#logo section .slogan {font-size:1rem !important}
  header#logo section .description {font-size:0.87rem !important}
}