@charset "utf-8";
:root {

  --black: #363636;
  --white-info: #DBDBDB;
	--fontsize: 16px;
	--textcolor: #333;
	--userfont: 'Roboto', sans-serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
/*    

color: var(--black);
color: var(--white-info);
*/
* {
  transition-property: all;
  transition-duration: 0.1s;
  transition-timing-function: ease;
}
html, body {  
padding: 0; margin: 0;
height: 100%; 
background: #F2F2F2; 
} 
body { 
word-wrap: break-word;
font-family: var(--userfont);
font-size: var(--fontsize);
color: var(--textcolor);
}
h1 { font-size: 1.8rem;}
h4 { font-size: 1.3rem;}

.tc-brown { color: var(--brown-light); }

button, input, optgroup, select, textarea { font-family: 'Roboto', sans-serif; }
.section { padding: 1.4rem 3rem 1.4rem 3rem; }
.container-md { max-width: 600px !important; }
.content figure:not(:last-child) { margin-bottom: 0.9em; }
.content h5 { margin-bottom: 0.4rem;}
.title:not(:last-child) {  margin-bottom: 3rem;}
.card, .box {
font-size: 1rem;
border: 1px solid rgba(0,0,0,.125);
border-radius: 0.6rem;
background-color: rgba(255,255,255,.05);
}
.image img.ne-border-2 {
background-color: #fff; 
padding: 2px;
}
.image.is-140x140 {
  height: 140px;
  width: 140px;
}
.ne-media-left {  
position: absolute;
left: 0;
padding-left: 1rem;
}

/* ~~~~~~~|  Main |~~~~~~~ */
.hero-body { padding: 2rem 1rem; }

/* ~~~~~~~|  Footer |~~~~~~~ */
.footer { 
padding: 0 1.4rem 1.4rem 1.4rem; 
background-color: inherit;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~|  Media |~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (max-width: 374px) {
.hero-body { padding: 1.4rem; }
h1.title { font-size: 1.4rem;}
.section { padding: 1.2rem 2rem 1.2rem 2rem; }
.card, .box { font-size: 0.9rem; }
.image.is-140x140 { height: 110px; width: 110px; }
}