/*
Theme Name: ShellViz
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Blue, White, Black, one-column, two-columns, right-sidebar, custom-background, fluid-layout, responsive-layout, custom-menu, full-width-template, post-formats, rtl-language-support, theme-options, custom-colors
Text Domain: Themonic
*/

/*Imports custom css file for easy customization.
Edit the file here http://yoursite.com/wordpress/wp-admin/theme-editor.php?file=custom.css&theme=iconic-one
Replace yoursite with your domain name.
*/

/*
    For responsive queries min-width strategy will be problematic on browsers that do not support media queries IE8 and below
    If desktop css is written with min-width condition, they will not take effect then.
    
    Using max-width will yeild better results
    But there is another problem tool
    For menus if desktop code is written first, it would be difficult to remove hover behavior later
*/

/* 
 * Table of Contents
	- HTML5 Reset
		- Baseline Normalize
		- Box Sizing
		- Float Clearing
	- Defaults
		- Typographical Elements
		- Headings
		- Objects
		- Gallery
		- Forms
		- Tables
		- Screen Reader Text
	- Structure and Layout
		- Site Containers
		- Column Widths and Positions
		- Column Classes
	- Common Classes
		- WordPress
		- Genesis
		- Titles
	- Widgets
		- Featured Content
	- Plugins
		- Genesis eNews Extended
		- Genesis Latest Tweets
		- Jetpack
	- Skip Links
	- Site Header
		- Title Area
		- Widget Area
	- Site Navigation
		- Header Navigation
		- Primary Navigation
		- Secondary Navigation
		- Accessible Menu
	- Content Area
		- Home Page
		- Entries
		- After Entry
		- Pagination
		- Comments
	- Sidebars
	- Footer Widgets
	- Site Footer
	- Theme Colors
		- Metro Pro Blue
		- Metro Pro Green
		- Metro Pro Pink
		- Metro Pro Red
	- Media Queries
		- Retina Display
		- max-width: 1139px
		- max-width: 1023px
		- max-width: 767px
		- max-width: 320px
*/


/* RESET START */

/* 
    http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}



/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;/* margin:.67em 0 */}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],/* 1 */
[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:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;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-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,/* 1 */
menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

/* Reset Over */


/*  Defaults */
html {
	overflow-y: scroll;
}

/* Reset over */


/* Box Sizing
--------------------------------------------- */

/*
    https://www.paulirish.com/2012/box-sizing-border-box-ftw/
*/
/* apply a natural box layout model to all elements, but allowing components to change */
html,
input[type="search"] {
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before, 
*:after {
    /*box-sizing: inherit;*/
	box-sizing: border-box;
}


/* Defaults */

* {
}


html {
	/*font-size: 62.5%; /* 10px browser default */
	font-size:100%;
}

/* 
    Set the initial size in px, then follow the rest of the elements with em 
    Check the answer here -
    
    https://stackoverflow.com/questions/29511983/is-the-default-font-size-of-every-browser-16px-why
*/
body {
    /*font-size: 14px;*/
    /*font-size: 1.6rem;*/
	font-family: 'Roboto', sans-serif;
	text-rendering: optimizeLegibility;
	color: #444;
}


h1, h2, h3, h4, h5, h6 {
	font-family:'Roboto', sans-serif;
    clear: both;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

a:focus {
	outline: none;
}

del {
	color: #333;
}
ins {
	background: none;
	text-decoration: none;
}
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin: 24px;
}

img {
	border: 0;
	-ms-interpolation-mode: bicubic;
}



a {
	outline: none;
	color: #0B91EA;
	text-decoration:none;
}

/*
a:hover {
	color: #0C87D3;
	text-decoration:underline;
}
*/

/* /Defaults */

/* Add rounded corners to social media icons */
.socialmedia img {
    border-radius: 4px;
}
/* Logo responsiveness in case of big logos */
.themonic-logo img {
    max-width: 100%;
}


/* Clearing floats */

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}


.clear:after,
.wrapper:after,
.format-status .entry-header:after {
	clear: both;
}
.clear:before,
.clear:after,
.wrapper:before,
.wrapper:after,
.format-status .entry-header:before,
.format-status .entry-header:after {
	display: table;
	content: "";
}

.site-inner .wrap .box-wrap:after,
.sidebar-primary:after,
.sidebar-footer:after,
.entry-meta:after,
.entry-summary:after
{
	clear:both;	/* clear both alone will not work, see the next 2 lines, they do the hack :D */
    display:block;
	content:"";
}

/* *** div containing the whole site markup */
.site-container {
    /* background:brown; */
}


/*
    Repeatable patterns
*/

/* Small headers */
.archive-title,
.page-title {
	font-size: 11px;
	line-height: 2.181818182;
	font-weight: bold;
	text-transform: uppercase;
	color: #636363;
}

.entry-content th,
.comment-content th {
	background: #f1f1f1;
	font-size: 11px;
	line-height: 2.181818182;
	font-weight: bold;
	padding: 7px 14px;
	text-transform: uppercase;
	color: #636363;
}



/* Shared Post Format styling */
article.format-quote footer.entry-meta,
article.format-link footer.entry-meta,
article.format-status footer.entry-meta {
	font-size: 11px;
	line-height: 2.181818182;
}

/* Form fields, general styles first */
button,
input,
textarea {
	border: 1px solid #ccc;
	border-radius: 0px;
	font-family: inherit;
	margin-right:0%;
	margin-bottom: 7px;
	padding: 8px 10px;
}
button,
input {
    line-height: normal;
}
textarea {
	font-size: 100%;
	overflow: auto;
	vertical-align: top;
}



/* Reset non-text input types */
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
	border: 0;
	border-radius: 0;
	padding: 0;
}


/* Buttons */

li.bypostauthor cite span {
    background-color: #ffffff;
    background-image: none;
    /* border: 1px solid #0099ff; */
    /* border-radius: 2px; */
    box-shadow: none;
    color: #0099ff;
    padding: 0;
    background: #0099ff;
    color: #fff;
}


/* Responsive images */
.entry-content img,
.comment-content img,
.widget img {
	max-width: 100%; /* Fluid images for posts, comments, and widgets */
	/*min-width: 100%;*/
}
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto; /* This makes sure that images scales properly on all browsers*/
}
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
	max-width: 100%;
	height: auto; /* This makes sure that images scales properly on all browsers*/
}

/* Make sure videos fit max width of parent container */
embed,
iframe,
object,
video {
	max-width: 100%;
}
.entry-content .twitter-tweet-rendered {
	max-width: 100% !important; /* Override the Twitter embed fixed width */
}

/* Images */
.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
	margin-bottom: 10px;
}
.wp-caption {
	max-width: 100%; /* Keep wide captions from overflowing their container. */

}

.wp-caption .wp-caption-text,
.gallery-caption,
.entry-caption {
	/*font-style: italic;*/
	font-size: 0.75em;
	line-height: 2;
	color: #646464;
    text-align: center;
    border-top: 2px solid #ddd;
}

img.wp-smiley,
.rsswidget img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}
.entry-content dl.gallery-item {
	margin: 0;
}
.gallery-item a,
.gallery-caption {
	width: 90%;
}
.gallery-item a {
	display: block;
}
.gallery-caption a {
	display: inline;
}
.gallery-columns-1 .gallery-item a {
	max-width: 100%;
	width: auto;
}
.gallery .gallery-icon img {
	height: auto;
	max-width: 90%;
	padding: 5%;
}
.gallery-columns-1 .gallery-icon img {
	padding: 3%;
}

/* Navigation for posts and pages*/
.site-content nav, .site-content .nav-pagination {
	clear: both;
	line-height: 2;
	overflow: hidden;
	margin-top:2em;
}

.site-content .nav-pagination {
	padding-bottom:1.5em;
}

.site-content .nav-pagination a,
.site-content .nav-pagination .no-link
{
    padding: 0.25em 0.75em;
    background: #fafafa;
    margin: 0.25em;
    border: 1px solid #ddd;
    color: #666;
    font-weight: bold;
    display: inline-block;
}

.site-content .nav-pagination a.current,
.site-content .nav-pagination .no-link.current
{
    background: #359cf5;
    color: #fff;
    border: 1px solid #359cf5;
}


.site-content .nav-pagination .dots {
    padding: 0.25em 0.75em;
    margin: 0.25em;
    color: #666;
    font-weight: bold;
    display: inline-block;
}

.site-content .nav:after {
	content: '';
    display: block;
    clear: both;

}

#nav-above {
	padding: 24px 0;
}

#nav-above {
	display: none;
}

.paged #nav-above {
	display: block;
}

.nav-previous, .nav-next {
	background: #e7f1f7;
	clear:both;
	display:inline;
	border-top: 1px solid #a9daf7;
    font-size:0.9625em;
	/* border-bottom: 1px solid; */
	/* color: #fff; */
	/* color: #f00; */
}

.nav-previous {
	float:left;
    position:relative;
}

.nav-next {
	float:right;
	position:relative;
	margin-top:2em;
}

/* Arrow to be placed on inner a tag. Otherwise if a tag is missing, like when no newer posts, then the arrow will still show up */
.nav-next a:after {
	content: "";
	border-color: transparent transparent transparent #23485f;
	border-style: solid;
	border-width: 0.40em;
	height: 0;
	width: 0;
	right:0.3em;
	top: 0.9em;
	position:absolute;
}

/* Arrow to be placed on inner a tag. Otherwise if a tag is missing, like when no newer posts, then the arrow will still show up */
.nav-previous a:before {
	content: "";
	border-color: transparent #23485f transparent transparent;
	border-style: solid;
	border-width: 0.40em;
	height: 0;
	width: 0;
	left:0.3em;
	top: 0.9em;
	position:absolute;
}

.nav-previous a, .nav-next a {
	color: #23485f;
	text-decoration: none;
	padding:5px 15px;
	padding-right: 1.5em;
	display:block;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.03em;
}

.nav-previous a {
	padding-left:1.8em;
}

.nav-next a {
	padding-right:1.8em;
}

.nav-previous,
.previous-image {
	/*float: left;
	padding-bottom: 7px;
	width: 50%;*/
}
.nav-next,
.next-image {
	/*float: right;
	text-align: right;
	width: 50%;*/
}
/*
.nav-single + .comments-area,
#comment-nav-above {
	margin: 48px 0;
}
*/

/* 
    Author profiles 
*/
.author .archive-header {
	margin-bottom: 24px;
}

.author-info 
{
	/*border-top: 1px solid #ededed;*/
	margin: 2em 0 3em 0;
	/*padding-top: 24px;*/
	overflow: hidden;
    
    padding: 1em 0;
    border-top: 2px solid #eee;
    border-bottom: 2px solid #eee;
    
    font-family: Lato, Roboto, sans-serif;
    font-size:0.95em;
}

.author-info .author-avatar img
{
    border-radius:50%;
}


.author-description p 
{
	color: #757575;
	line-height: 1.3;
}

.author-description p a {
    color:#0c86e6;
    text-decoration:underline;
}

.author-info .author-title
{
    border-bottom: 2px solid #000;
    color:#000;
    display: inline-block;
    margin: 0 0 0.75em 0;
}

.author-info .author-link
{
    margin:1em 0 0 0;
}

.author.archive .author-info {
	border-top: 0;
	margin: 0 0 48px;
}
.author.archive .author-avatar {
	margin-top: 0;
}


/* =Basic structure
-------------------------------------------------------------- */

/* Assistive text */
.assistive-text,
.site .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
}
.nav-primary .assistive-text:hover,
.nav-primary .assistive-text:active,
.nav-primary .assistive-text:focus {
	background: #fff;
	border: 2px solid #333;
	border-radius: 3px;
	clip: auto !important;
	color: #000;
	display: block;
	font-size: 12px;
	padding: 12px;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 100000; /* Above WP toolbar */
}

/* Page structure */
.site {
	/* padding: 0 24px; */
	/* background-color: #fff; */
}


.site-inner {
    /* background:red; */
    width:100%;
}

.site-inner .wrap {
    
}

.site-inner .box-wrap {
    background:#fff;
    padding:1em 0;
}



/*
    Full width page template with no margin padding
*/
.no-margin-padding .site-inner {
    /*margin-top:2em;*/
}

/* Keep padding on mobiles from wide screen images */
.no-margin-padding .site-inner .wrap {
    /*padding:0 3%;*/
}

/* <main> */
.no-margin-padding .site-content {
    margin:0;
}

.no-margin-padding .box-wrap {
    padding:0;
    
}


/* <main> */
.site-content {
}

/* <aside> */
.sidebar {
}

/* HEADER + PRIMARY NAV */
.header-nav-wrap {
    background:#222;
    margin-bottom: 3em;
}

.header-nav-wrap .wrap:after {
    content:" ";
    clear:both;
    display:block;
}

/* Header */
.site-header {
    height: auto;
    text-align: left;
    background: #222;
/*    border-bottom: 1px solid #555;*/
}

.site-header .wrap {
	padding: 0 1%;
}

.oneline-header .site-header {
    border-bottom:none;
}

.one-line .site-header {
    border-bottom:none;
}

.site-header h1,
.site-header h2 {
	text-align: center;
}
.site-header h1 a,
.site-header h2 a {
	color: #515151;
	display: inline-block;
	text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
	color: #21759b;
}
.site-header h1 {
	font-size: 24px;
	line-height: 1.285714286;
	margin-bottom: 14px;
}
.site-header h2 {
	font-weight: normal;
	font-size: 13px;
	line-height: 1;
	color: #757575;
}
.header-image {
	margin-top: 24px;
}

.themonic-logo {
    padding: 17px;
	float:left;
	margin:10px 0;
}

.site-header .title {
    display: inline-block;
    padding: 1.5em 0;
    float:none;
    font-weight: bold;
}

.site-header .title a {
    font-weight: bold;
    text-decoration: none;
    color: #eee;
    font-family: 'Work Sans', sans-serif;
    font-weight: bolder;
    
    
    font-size: 1.3em;
}

.site-header .title a:hover{
	text-decoration: none;
}

/* Wordpress site description that comes below the Site name in header */
.site-header .title .site-description {
    font-weight: normal;
    line-height: 2;
    font-size: 1em;
    font-family: Lato, sans-serif;
    color: #ccc;
    display:block;
}


/*
	BREADCRUMB
*/

.breadcrumb-wrap {
    /* background:yellow; */
}

.breadcrumb-wrap .wrap {
    background: #fff;
    border-radius: 5px 5px 0 0;
}

.breadcrumbs {
    list-style:none;
    margin:2px 0;
    overflow:hidden;
    /*background:#fff;*/
/*    padding: 1.2em 3%;*/
    
    /* Font size of breadcrumb elements */
    font-size:0.8125em;
    
    font-family:'Roboto', sans-serif;
    line-height: 2em;
}
  
.breadcrumbs li {
    display:inline-block;
    margin-right:0.80em;
}

/* The CURRENT PAGE */
.breadcrumbs li strong {
	/* display:block; */
	/* line-height:1.5em; */
	font-weight:normal;
	word-wrap: break-word;
    
    /* IE 9/10 hack */
	display: inline-block;
	word-break: break-all;
}

.breadcrumbs li a {
	color:#3392f7;
	/* line-height:1.5em; */
	display:block;
}

.breadcrumbs li a:hover {
	text-decoration:underline;
}

.breadcrumbs .separator {
    color: #aaa;
    font-weight:bold;
}
/* /BREADCRUMBS */




/* These are used for Themonic Main Nav Bar li background colors - for colorful menu */

.bluem{ background-color:#00A1E0; padding:5px; }
.orangem{ background-color:#FF811A;  }
.greenm{ background-color:#8AC327; }
.redm{ background-color:#F96234; padding:10px;}

/* Banner */
section[role="banner"] {
	margin-bottom: 48px;
}


/* 
    Sidebar widget styles
*/

.sidebar,
.sidebar-primary {
    /* Font size for sidebar elements */
    font-size: 0.9625em;
}


.sidebar .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 3.5em;
	word-wrap: break-word;
}

/*
    Widget Title H3
*/
.sidebar .widget .title,
.sidebar .widget .widget-title,
.sidebar .widget .wp-block-heading
{
	background: #555;
    font-family: Lato, 'Open Sans', sans-serif;
	font-weight: normal;
    text-transform:uppercase;
	margin-bottom: 12px;
	padding: 0.9em;
	color: #eee;
	letter-spacing: 0.04em;
}

.sidebar .widget .content {

}



.widget.widget_search {
    /* margin-bottom: 14px; */
}

.sidebar .widget li,
.sidebar .widget .textwidget {
	/* font-size: 13px; */
	line-height: 1.646153846;
	border-bottom: 1px solid #E9E9E9;
	padding: 0.8em 0;
}
.sidebar .widget p {
	margin-bottom: 12px;
	padding: 10px;
}
	
.sidebar .textwidget ul {
	list-style: disc outside;
	margin: 0 0 24px;
}
.sidebar .textwidget li {
	margin-left: 36px;
}

.sidebar .textwidget input {
	width:100%;
	box-sizing: border-box;
}

.sidebar .widget a {
	color: #757575;
	text-decoration:none;
}
.sidebar .widget a:hover {
	color: #4F5254;
}

/* Widget: Search Form */

.sidebar .widget .searchform input[name="s"] {
	width: 74%; /* define a width to avoid dropping a wider submit button */
	font-size:90%;
	box-sizing: border-box;
}

.widget .searchform input[type="submit"] {
    background: #00A1E0;
    border: 1px solid #00A1E0;
    color: #FFFFFF;
    width: 24%;
    font-size: 0.95em;
    text-transform: uppercase;
    font-weight: bold;
    box-sizing: border-box;
}


/* Widget: Pages List */

.sidebar .widget_pages li {
	border:none;
	line-height:2.3em;
	padding:0;
}

/* PRIMARY SIDEBAR */

/* Widget: Menu */

.sidebar-primary .widget .menu {
	margin: 1em;
}

.sidebar-primary .widget .menu li {
    border:none;
    padding: 0;
    line-height: 2.5em;
    border-bottom:1px solid #e5e5e5;
    font-family:'Roboto', sans-serif;
}

.sidebar-primary .widget .menu li ul li {
	border:none;
	list-style-type:disc;
}

/*
    Square style reference -
    https://stackoverflow.com/questions/5306640/how-to-set-bullet-colors-in-ul-li-html-lists-via-css-without-using-any-images-or
*/
.sidebar-primary .widget .menu li:before {
  /* content: ">"; */
  color: #aaa;
  margin-right:1em;
}

.sidebar-primary .widget .menu li a {
	color: #515252;
	letter-spacing: 0.03em;
	/*text-decoration: underline;*/
}

.sidebar-primary .widget .menu li a:hover {
	text-decoration:none;
	color:#2a86d6;
}

.sidebar-primary .widget .menu .menu-item-has-children {
	/* padding-bottom:0; */
}

.sidebar-primary .widget .menu .menu-item-has-children > a {
	position:relative;
}
.sidebar-primary .widget .menu .menu-item-has-children > a:after {
	content: "";
    border-color: #4c8dbd transparent transparent transparent;
    border-style: solid;
    border-width: 0.40em;
    display: block;
    height: 0;
    width: 0;
    right:-1.5em;
    top: 40%;
    position: absolute;
}

.sidebar-primary .widget .recentcomments a {
	color:#0093ff;
	text-decoration:underline;
}


.footer-widgets
{
    background: #333;
    color:#fff;
    padding:50px 0 20px 0;
    font-family:'Roboto', sans-serif;
    font-size:0.9375em;
    
    
    border-bottom: 1px solid #555;
    /* box-shadow: inset 0px 10px 100px #000; */
    border-top: 1px solid #000;
}

.footer-widgets .wrap {
    
}

.footer-widgets .wrap:after {
 	clear: both;
	content: " ";
	display: table;
}

.footer-widgets .wrap .widget-area {
    float:left;
    width: 29%;
    min-width: 240px;
    /*width: 320px;*/
    /* use margin-right so that 2nd, 3rd widgets dont have extra left margins when vertically aligned on mobiles */
    /*margin-right: 30px;*/
    margin-right:4%;
    /* this is necessary otherwise the first widget will stick to left edge on wide screen */
    /* margin-left: 10px; */
    /* margin-left:1%; */
}

/*
	If max width is only 960px then keep only 2 widgets in one line.
*/
@media screen and (max-width: 960px) {
	.footer-widgets .wrap .widget-area {
		width: 44%;
	}
}

.footer-widgets .sidebar-footer {
/*	margin-left:3%;*/
}

.footer-widgets .wrap .widget-area:first-child {
	/* margin-left:0; */
}

.footer-widgets .wrap .widget-area:last-child {
	/* margin-left:0; */
	/* float:right; */
	/* width: auto; */
}


.footer-widgets .wrap .widget-area section 
{
	margin-bottom:30px;
    padding:2em 2em;
}

.footer-widgets .wrap .widget-area h3 
{
	font-size: 1.35em;
	font-weight:lighter;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #4987bb;
	font-family: lato, sans-serif;
	text-transform: uppercase;
	word-spacing: .2em;
    text-shadow: 0 0 1px rgba(255,255,255,1);
}

.footer-widgets .wrap .widget-area section ul {
	color:#fff;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.05em;
}

.footer-widgets .wrap .widget-area section ul li {
	/* padding: 0.5em 0; */
	line-height: 2em;
}

.footer-widgets .wrap .widget-area section a 
{
	color: #f5f5f5;
    text-shadow: 0 0 1px rgba(255,255,255,1);
}

.footer-widgets .wrap .widget-area section a:hover {
	text-decoration:underline;
}

/*
	Text widget
*/

.footer-widgets .wrap .widget-area section .textwidget,
.sidebar-footer .widget_text p,
.sidebar-footer .widget_block p

{
	line-height:1.4em;
	color:#ccc;
	font-family:'roboto', sans-serif;
	font-size: 1.0em;
	color: #f5f5f5;
	letter-spacing: 0.05em;
    text-shadow: 0 0 1px rgba(255,255,255,1);
}

/*
	Tag Cloud widget
*/

.footer-widgets .wrap .widget-area section .tagcloud a {
	/* background: #fff; */
	font-size: 0.85em !important;
	color: #ccc;
	padding:5px 10px;
	float:left;
	margin:5px;
	border: 1px solid #ccc;
}
.footer-widgets .wrap .widget-area section .tagcloud a:hover {
	text-decoration:none;
	background:#ccc;
	color:#000;
}

/* Pages widget */
.footer-widgets .wrap .widget-area section ul.children {
	margin: 0 2em;
	/* margin-bottom: -0.5em; */
}

.footer-widgets .wrap .widget-area section .page_item_has_children a {
	position:relative;
}
.footer-widgets .wrap .widget-area section .page_item_has_children > a:after {
	content: "";
    border-color: #fff transparent transparent transparent;
    border-style: solid;
    border-width: 0.40em;
    display: block;
    height: 0;
    width: 0;
    right: -1.7em;
    top: 0.6em;
    position: absolute;
}

/*
    Horizontal footer widgets
*/
.sidebar-footer-wide {
    background:#333;
    color:#fff;
}

.sidebar-footer-wide .wrap {
    padding:1em;
}


.footer-wide-widgets .widget {
    padding-bottom:1em;
}


.footer-wide-widgets .widget .textwidget 
{
	line-height:1.4em;
	color:#ccc;
	/*font-family: 'Roboto', sans-serif;*/
	font-size: 1.0em;
	color: #fff;
	letter-spacing: 0.01em;
    text-shadow: 0 0 1px rgba(255,255,255,0.5);
}


/*
    FOOTER HORIZONTAL MENU
*/
.footer-menu {
    text-align:center;
    background:#222;
    
    font-size:0.9375em;
}

/*
    Padding on sides for footer menu
*/
.footer-menu .wrap {
    padding:0 1em;
}

.footer-menu .box-wrap {
    padding: 2em 0 0 0;
}

.footer-menu ul {
    text-align:center;
}

.footer-menu ul:after {
	content: '';
    display: block;
    clear: both;
}

.footer-menu ul li {
    display: inline-block;
}

.footer-menu ul li a {
    color: #fff;
    margin: 0.3em 1em;
    
    display: block;
    border-bottom: 1px solid #ccc;
}

.footer-menu .children {
    display:none;
}


/*
    Site main footer
    Original author had styled using selector footer[role="contentinfo"] why ?
*/
/* Footer box-shadow: 4px 1px 10px 1px #F1F1F1;*/
.site-footer {
    background: #222;
    color:#fff;
    width: 100%;
    clear: both;
    font-size: 14px;
    height: auto;
    line-height: 2;
    margin-right: auto;
    margin-bottom: 0px;
    padding: 24px 0;
    text-align:center;
    font-family: lato, sans-serif;
}

.site-footer .wrap {
    margin:0 auto;
}

.site-footer a {
	color: #bbb;
	margin-left:5px;
	text-decoration: none;
}

.site-footer a:hover {
	color: #333333;
}


/* Main content area, sticky post styling and comment content
-------------------------------------------------------------- */

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 2em;
	border-bottom: 1px solid #f0f0f0;
	/* padding-bottom: 2em; */
	}
.entry-header img.wp-post-image {
	margin-bottom: 24px;
	}
.excerpt .entry-header .entry-title {
	font-size:1.5em;
	font-weight:bold;
}

.entry-header .entry-title {
	font-size: 1.75em;
	line-height: 1.2;
	font-weight: 500;
	font-family:'Roboto', sans-serif;
	margin-bottom: 0.8em;
	color: #333;
}

.entry-header .entry-title a {
	color: #444444;
	text-decoration: none;
}
.entry-header .entry-title a:hover{
	color: #111111;
}
.entry-header .entry-format {
	margin-top: 24px;
	font-weight: normal;
}
.entry-header .comments-link {
	margin-top: 24px;
	font-size: 13px;
	line-height: 1.846153846;
	color: #757575;
}
.comments-link a,
.entry-meta a {
	color: #757575;
}
.comments-link a:hover,
.entry-meta a:hover {
	color: #333;
}

/*
    Sticky post entry in post list
*/
.site-content article.sticky  {
    background: #F8F8F8;
    border-color: #DDDDDD;
    border-style: solid solid double;
    border-width: 1px 1px 1px 7px;
    box-shadow: 0.01em 0.1em 0.1em 0.1em #EEEEEE;
	clear: both;
/*    font-size: 13px;*/
    line-height: 1.19231;
    margin-bottom: 24px;
    padding: 17px;
    text-align: left;
}

.entry-content,
.entry-summary,
.mu_register {
    line-height: 1.714285714;
	/* 15.4px assuming base size of 16px - for DESKTOP */
    font-size:.9625em;
	margin: 0 0 0 0;
}

.entry-summary .excerpt-thumb {
    /* border: 5px solid red; */
    float:left;
}

.entry-summary .excerpt-thumb a {
	display:block;
	/* border: 2px solid blue; */
}

.entry-summary .excerpt-thumb a img {
	float:none;
	display:block;
	max-width:100%; /* Prevent excessive stretching of image as we saw during prosperminds.com setup */
}

.entry-content h1,
.comment-content h1,
.entry-content h2,
.comment-content h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4,
.entry-content h5,
.comment-content h5,
.entry-content h6,
.comment-content h6 {
	margin: 24px 0;
	line-height: 1.714285714;
}

.entry-content h1,
.comment-content h1 {
	font-size: 1.5em;
	line-height: 1.5;
}

.entry-content h2,
.comment-content h2,
.mu_register h2 {
	font-size: 1.5em;
	line-height: 1.6;
}

.entry-content h3,
.comment-content h3 {
	font-size: 1.5em;
	font-weight: bold;
	line-height:2em;
}

.entry-content h3 {
    font-weight:500; /* Roboto 500 semi bold */
}

.entry-content h4,
.comment-content h4 {
	font-size: 1.3em;
	line-height: 1.846153846;
    font-weight:bold;
}

.entry-content h5,
.comment-content h5 {
	font-size: 1em;
	line-height: 1.846153846;
}

.entry-content h6,
.comment-content h6 {
	font-size: 1em;
	line-height: 1.846153846;
}

.entry-content p,
.entry-summary p,
.comment-content p,
.mu_register p {
	margin: 0 0 20px;
	line-height: 1.714285714;
}

.entry-content ol,
.comment-content ol,
.entry-content ul,
.comment-content ul,
.mu_register ul {
	margin: 0 0 24px;
	line-height: 1.714285714;
}
.entry-content ul ul,
.comment-content ul ul,
.entry-content ol ol,
.comment-content ol ol,
.entry-content ul ol,
.comment-content ul ol,
.entry-content ol ul,
.comment-content ol ul {
	margin-bottom: 0;
}
.entry-content ul,
.comment-content ul,
.mu_register ul {
	list-style: square outside;
}
.entry-content ol,
.comment-content ol {
	list-style: decimal outside;
}
.entry-content li,
.comment-content li,
.mu_register li {
	margin: 0 0 0 36px;
}

/*
.entry-content blockquote,
.comment-content blockquote {
	background: #FAFAFA;
    border-left: 4px solid #D6D6D6;
	border-right: 4px solid #D6D6D6;
	border-radius:0.5em;
	margin-bottom: 24px;
	padding: 24px;
	font-style: italic;
}
*/
.entry-content blockquote, .comment-content blockquote {
    /* background: #FAFAFA; */
    /* border-left: 4px solid #D6D6D6; */
    /* border-right: 4px solid #D6D6D6; */
    border-radius: 0.375em;
    margin-bottom: 24px;
    padding: 1em;
    color: #0468e4;
    font-weight: bold;
    border: 2px solid #8dbaff;
    /* font-style: italic; */
}







.entry-content blockquote p:last-child,
.comment-content blockquote p:last-child {
	margin-bottom: 0;
}
.entry-content code,
.comment-content code {
	font-family: Consolas, Monaco, Lucida Console, monospace;
	font-size: 12px;
	line-height: 2;
}

.entry-content pre,
.comment-content pre {
	border: 1px solid #e0e0e0;
	border-radius: 0.5em;
	color: #666;
	font-family: Consolas, Monaco, Lucida Console, monospace;
	line-height: 1.514285714;
	margin: 24px 0;
	overflow: auto;
	padding: 24px;
}

.entry-content pre code,
.comment-content pre code {
	display: block;
}
.entry-content abbr,
.comment-content abbr,
.entry-content dfn,
.comment-content dfn,
.entry-content acronym,
.comment-content acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
.entry-content address,
.comment-content address {
	display: block;
	line-height: 1.5;
	margin: 0 0 24px;
}
img.alignleft {
	margin: 8px 24px 12px 0;
}
img.alignright {
	margin: 12px 0 12px 24px;
}
img.aligncenter {
	margin-top: 12px;
	margin-bottom: 12px;
}
.entry-content embed,
.entry-content iframe,
.entry-content object,
.entry-content video {
	margin-bottom: 2px;
}
.entry-content dl,
.comment-content dl {
	margin: 0 24px;
}
.entry-content dt,
.comment-content dt {
	font-weight: bold;
	line-height: 1.714285714;
}
.entry-content dd,
.comment-content dd {
	line-height: 1.714285714;
	margin-bottom: 24px;
}
.entry-content table,
.comment-content table {
	border-bottom: 1px solid #ededed;
	color: #757575;
	
	
	margin: 0 0 2em 0;
	width: 100%;
}
.entry-content table caption,
.comment-content table caption {
	
	margin: 24px 0;
}
.entry-content td,
.comment-content td {
	border-top: 1px solid #ededed;
	padding:0.5em 1em 0.5em 0;
}

.entry-content p a:hover {
	text-decoration:underline;
}

/*
	mailto: email addresses appearing inside content
*/
.entry-content a.email {
	padding:0 0.4em;
	transition:background 0.3s ease, color 0.3s ease;
}

.entry-content a.email:hover {
	background:#0088ff;
	color:#fff;
	
}

.site-content article {
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

.site-content .excerpt {
	margin-bottom: 3em;
	border-bottom: 1px solid #eee;
	padding-bottom: 3em;
}

.site-content .excerpt .entry-header {
	margin-bottom:0;
	border-bottom:none;
}

.site-content .excerpt .entry-meta {border-top: none;margin-top: 0;padding: 0;}
.page-links {
	clear: both;
	line-height: 1.714285714;
}

.entry-meta {
	margin-top: 2em;
	line-height: 1.7;
	color: #757575;
	border-top: 1px solid #f0f0f0;
	padding: 2em 0;
	font-size: 0.85em;
    font-weight: 500;
}

.entry-meta .entry-categories {
	display:block;
	text-transform:uppercase;
	line-height: 1.5em;
	color: #aaa;
    margin:0.3em 0;
    font-size:0.9em;
}

.entry-meta .entry-categories a {

	/*	padding: 0.0em 0.0em 0.0em 0.0em;
    border-bottom: 2px solid #0085ff;
    margin: 0 0.25em 0 0.25em;*/
	
	border: none;
    padding: 0.525em 1em;
    background: #4486c3;
    margin: 0 0.25em 0 0em;
    color: #ffffff;
    font-weight: bold;

}

.entry-meta .entry-tags {
	display:block;
	text-transform:uppercase;
	font-weight:bold;
	color:#aaa;
    margin:0.3em 0;
    font-size:0.9em;
}

.entry-meta .entry-tags a {
    padding: 0.0em 0.0em 0.0em 0.0em;
    border-bottom: 2px solid #008800;
    margin: 0 0.25em 0 0.25em;
    color:#008800;
}


footer.entry-meta .read-more-link
{
	float:right;
	/*letter-spacing: 0.03em;*/
}

footer.entry-meta .read-more-link a
{
	background: #555;
    color: #fff;
    padding: 0.6em 1em;
    text-transform:uppercase;
    font-weight:bold;
    
    
    /* for mobile centering */
    display: block;
    text-align: center;
}

.entry-meta > span a {
	color: #0085ff;
	padding: 0 0.5em 0 0;
	/* text-decoration: underline; */
	/* background: #f7f7f7; */
}

.single-author .entry-meta .by-author {
	display: none;
}
.mu_register h2 {
	color: #757575;
	font-weight: normal;
}


/* =Archives
-------------------------------------------------------------- */

.archive-header,
.page-header {
	margin-bottom: 48px;
	padding-bottom: 22px;
	border-bottom: 1px solid #ededed;
}
.archive-meta {
	color: #757575;
	font-size: 12px;
	line-height: 2;
	margin-top: 22px;
}

.archive-header .sub-categories {
    font-size: 0.85em;
    text-transform: uppercase;
    font-weight: bold;
    /*background:#f5f5f5;*/
    /*padding:1em;*/
    margin:1em 0 0 0;
}

.archive-header .sub-categories:after {
	content: "";
  display: table;
  clear: both;

}

.archive-header .sub-categories .title {
    color:#636363;
    margin: 0 0 0.5em 0;
    display: block;
}

.archive-header .sub-categories li {
    float:left;
    margin:0 0.75em 0 0;
    padding: 0.5em 0;
}

.archive-header .sub-categories li a {
	border-bottom:2px solid;
}



/* =Single image attachment view
-------------------------------------------------------------- */

.article.attachment {
	overflow: hidden;
}
.image-attachment div.attachment {
	text-align: center;
}
.image-attachment div.attachment p {
	text-align: center;
}
.image-attachment div.attachment img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}
.image-attachment .entry-caption {
	margin-top: 8px;
}


/* =Aside post format
-------------------------------------------------------------- */

article.format-aside h1 {
	margin-bottom: 24px;
}
article.format-aside h1 a {
	text-decoration: none;
	color: #4d525a;
}
article.format-aside h1 a:hover {
	color: #2e3542;
}
article.format-aside .aside {
	background: #F3F3F3;
    border-top: 16px solid #16A1E7;
    padding: 24px 24px 0;
}
article.format-aside p {
	font-size: 13px;
	line-height: 1.846153846;
	color: #4a5466;
}
article.format-aside blockquote:last-child,
article.format-aside p:last-child {
	margin-bottom: 0;
}


/* =Post formats
-------------------------------------------------------------- */

/* Quote posts */
article.format-quote .entry-content p {
	margin: 0;
	padding-bottom: 24px;
}
article.format-quote .entry-content blockquote {
	display: block;
	padding: 24px 24px 0;
	font-size: 15px;
	line-height: 1.6;
	font-style: normal;
	color: #6a6a6a;
	background: #efefef;
}

/* Status posts */
.format-status .entry-header {
	margin-bottom: 24px;
}
.format-status .entry-header header {
	display: inline-block;
}
.format-status .entry-header h1 {
	font-size: 15px;
	font-weight: normal;
	line-height: 1.6;
	margin: 0;
}
.format-status .entry-header h2 {
	font-size: 12px;
	font-weight: normal;
	line-height: 2;
	margin: 0;
}
.format-status .entry-header header a {
	color: #757575;
}
.format-status .entry-header header a:hover {
	color: #21759b;
}
.format-status .entry-header img {
	float: left;
	margin-right: 21px;
}


/* =Comments
changed article header
-------------------------------------------------------------- */

.comments-area
{
	/*margin-top: 5em;*/
    font-size:0.9625em;
}

.comments-area .comments-title {
	margin: 1em 0 0em 0;
	font-size: 1.75em;
	line-height: 1.5;
	font-weight: lighter;
	background:#f5f5f5;
	padding:0.5em 1em;
	text-align:center;
}

.comments-area .post-title {
	display: block;
    padding: 1em;
    color: #000;
    text-align: center;
    font-weight: lighter;
}

/* Very long words in comment titles */
.comments-title span {
    word-wrap: break-word;
    
    /* IE9/10 hack https://stackoverflow.com/questions/39957068/internet-explorer-10-word-break-not-working */
    display: inline-block;
    word-break: break-all;
}

.comments-area .commentlist > li, 
.comments-area .children > li {
	/* background: #f5f5f5; */
	padding: 3em 0 0 0.0em;
	margin: 0 0 3em 0;
	border-top: 2px solid #000;
}

.comments-area .commentlist .children {
	border-left: 1px solid #bbb;
	margin-left: 2em;
	padding-left: 2em;
	margin-top: 2em;
}

.comments-area article {
	/* margin: 2em 0; */
}
.comments-area article header {
	margin: 0px 0px 2em;
	overflow: hidden;
	position: relative;
}
.comments-area article header img {
	float: left;
	padding: 0;
	line-height: 0;
	margin-right: 15px;
}

.comments-area article header .comment-meta a {
	text-decoration:underline;
	color:#1d92f9
}

.comments-area article header cite,
.comments-area article header time {
	display: block;
	/* margin-left: 75px; */
}
.comments-area article header cite {
	font-style: normal;
	font-size: 1em;
	line-height: 1em;
	margin-bottom: 0.3em;
	font-weight: bold;
}
.comments-area article header .comment-meta time {
	line-height: 1.714285714;
	text-decoration: none;
	font-size: 1em;
	display: inline;
	/* color: #5e5e5e; */
}
.comments-area article header a {
	text-decoration: none;
	color: #5e5e5e;
}
.comments-area article header .comment-meta a:hover {
	color: #21759b;
	text-decoration:none;
}

.comments-area article header cite a {
	color: #168df9;
	text-decoration: underline;
}

.comments-area article header cite a:hover {
	text-decoration: none;
}

.comments-area article header h4 {
	position: absolute;
	top: 0;
	right: 0;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: normal;
	color: #fff;
	background-color: #0088d0;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #009cee, #0088d0);
	background-image: -ms-linear-gradient(top, #009cee, #0088d0);
	background-image: -webkit-linear-gradient(top, #009cee, #0088d0);
	background-image: -o-linear-gradient(top, #009cee, #0088d0);
	background-image: linear-gradient(top, #009cee, #0088d0);
	border-radius: 3px;
	border: 1px solid #007cbd;
}

.comments-area section {
	padding-left:79px;
}

.comments-area .reply {
	padding-left:79px;
}

.comments-area li.bypostauthor cite span {
	margin: 0;
	position: relative;
	margin-left: 5px;
	padding: 1px 5px;
	font-size: 10px;
	display: inline-block;
}
a.comment-reply-link,
a.comment-edit-link {
	color: #686868;
	font-size: 13px;
	line-height: 1.846153846;
	background: #eee;
	padding: 0.3em 0.8em;
}
a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #21759b;
}
.commentlist .pingback {
	line-height: 1.714285714;
	margin-bottom: 24px;
}


/* 
	Comment form - Leave a Reply
*/

.comment-respond {
	margin-top: 48px;
}

.comment-respond .comment-reply-title {
	font-size: 1.75em;
	line-height: 1.5;
	font-weight: lighter;
}

.comment-respond h3#reply-title #cancel-comment-reply-link {
	margin-left: 10px;
	font-weight: normal;
	font-size: 12px;
}

.comment-respond form {
	margin: 24px 0;
}

.comment-respond form p {
	margin: 11px 0;
}

.comment-respond form p.logged-in-as {
	margin-bottom: 24px;
}

.comment-respond form label {
	display: block;
	line-height: 1.714285714;
}

.comment-respond form input[type="text"],
.comment-respond form textarea {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 12px;
	line-height: 1.714285714;
	padding: 10px;
	width: 100%;
}
.comment-respond form p.form-allowed-tags {
	margin: 0;
	font-size: 12px;
	line-height: 2;
	color: #5e5e5e;
}

.required {
	color: red;
}

/* 
    Reset - Copied from Genesis
    https://demo.studiopress.com/metro/wp-content/themes/metro-pro/style.css?ver=2.2.1
    
    Others tell to use "none"
    Style do not take affect on iOS Chrome/Safari. So have to use appearance
    https://stackoverflow.com/questions/5449412/styling-input-buttons-for-ipad-and-iphone
*/
button, html [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    -moz-appearance: button;
}

.comment-respond input[type="submit"] {
	background:#222;
	color:#fff;
	border:none;
	font-size: .9em;
	font-weight: bold;
	text-transform: uppercase;
	padding: 15px 20px;
    
    
}


/* =Front page template
-------------------------------------------------------------- */

.entry-page-image {
	margin-bottom: 14px;
}
.template-front-page .site-content article {
	border: 0;
	margin-bottom: 0;
}
.template-front-page .sidebar {
	clear: both;
	float: none;
	width: auto;
	padding-top: 24px;
	border-top: 1px solid #ededed;
}
.template-front-page .sidebar .widget li {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.714285714;
	list-style-type: square;
	list-style-position: inside;
}
.template-front-page .sidebar .widget li a {
	color: #757575;
}
.template-front-page .sidebar .widget li a:hover {
	color: #21759b;
}
.template-front-page .sidebar .widget_text img {
	float: left;
	margin: 8px 24px 8px 0;
}


/* =Widgets
-------------------------------------------------------------- */

.sidebar .widget ul ul {
	/* margin-left: 12px; */
	/* margin-top: 0.5em; */
	margin: 0em 0 0 2em;
	/* margin-bottom: -0.5em; */
}
.widget_rss li {
	margin: 12px 0;
}
.widget_recent_entries .post-date,
.widget_rss .rss-date {
	color: #aaa;
	font-size: 11px;
	margin-left: 12px;
}
#wp-calendar {
	margin: 0;
	width: 100%;
	font-size: 13px;
	line-height: 1.846153846;
	color: #686868;
}
#wp-calendar th,
#wp-calendar td,
#wp-calendar caption {
	text-align: left;
}
#wp-calendar #next {
	padding-right: 24px;
	text-align: right;
}
.widget_search label {
	display: block;
	font-size: 13px;
	line-height: 1.846153846;
}
.widget_twitter li {
	list-style-type: none;
}
.widget_twitter .timesince {
	display: block;
	text-align: right;
}
.entry-summary .read-more {
    display: inline-block;
}

/*
	Below title meta styling - added May 05 
*/



.below-title-meta {
	color:#4e4e4e;
	line-height:1.7;
	font-size:0.875em;
	font-family:'Roboto', sans-serif;
	margin-bottom:2em;
	font-weight:lighter;
}

.below-title-meta:after {
	clear:both;
	display:block;
	content:"";
}

.below-title-meta a {
	color:#1a6ca9; 
	text-decoration:underline;
}

.below-title-meta a:hover {
	color:#444444;
	text-decoration:none;
}

.adt { 
	float:left;
}
.adt-comment {
	float:right;
}

.articletags a{background-color: #555;
	margin: 2px;
	padding: 3px;
	text-decoration: none;
	text-shadow: 0 0px 0 #FFFFFF;
	color:#fff;}
.articletags a:hover{color:#f2f2f2;}
.footercopy {
    padding-left: 20px;
	float: left;
	}
.footercredit {
    float: right;
    padding-right: 20px;
	margin-left:20px;
	}
.site-wordpress{
	color: #888888;
    padding: 10px 2px;
	float: right;
	font-size:13px;
	}
.site-wordpress a{
	color: #666666;
    text-decoration:none;
	}
/* =Plugins
----------------------------------------------- */

img#wpstats {
	display: block;
	margin: 0 auto 24px;
	}
.socialmedia{
    float: right;
     padding: 7px 10px;
	text-align: right;
    width: 25%;
	margin-top:30px;
	}
.socialmedia a{
    padding: 0 5px;
	}
.widget_top-posts .widgets-list-layout-links {
    float: right;
    width: 80%;
}

/* new responsive selectnav.js css */
	.selectnav { display: none; }
	select.selectnav {
	border: 1px solid #DDDDDD;
    border-radius: 4px;
    margin: 4px;
    padding: 10px;
    width: 96%;
	} /* mobile menu styling */
 
/* when to trigger the select menu.js #menu-top { 
		display: inline!important; 
	}*/



/*
	MEDIA QUERIES
*/
@media screen and (max-width: 768px) {
		
    .js .selectnav { 
		display: inline-block; 
	}
	/*
	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul, .nav-menu li {
		display: none;
	}
	.nav-primary ul {
		display: none;
    }
	.nav-primary li a, .nav-primary li {
		display: none;
    }
	
	.nav-primary ul.nav-menu, .nav-primary div.nav-menu > ul {
   
    display: none;
 
}*/
    .socialmedia {
        display:none;
    }
    
    .site-header {
        /*text-align: center;*/
        height: auto;
        border:none;
    }
    
    .themonic-logo {
        float: none;
        margin: 0 0 10px;
    }
    
    .nav-primary {
        box-shadow:none;
    }
	/*.link-comments{display:none;}*/
	
	.entry-header .entry-title {
    	/* use rem since it needs to be matched with bottom margin of the next element :) */
        margin-top: 1rem;
        margin-bottom:1rem;
	}
	
	.wrapper {
    	border: none;
	}

	.footer-widgets .wrap .widget-area {
		margin-left:0;
		margin-right:0;
		float:none;
		display:block;
		width: auto;
	}

	.nav-next {
		margin-top:1em;
	}
}



/*
	Maximum width of visible header, nav, content, butter and footer areas
	Adjust this to make the site extra wide or thin

	Alternatively we could have used an extra style class and added it to all the elements in html
	But for now we are doing this only
	
	nav .wrap has been EXCLUDED to keep padding menu child elements aligned properly
*/
.site-header .wrap, 
.site-footer .wrap, 
.footer-widgets .wrap, 
.site-inner .wrap,
.oneline-header .header-nav-wrap .wrap,
.header-nav-wrap.one-line .wrap,
.breadcrumb-wrap .wrap,
.footer-menu .wrap,
.sidebar-footer-wide .wrap
{
	margin: 0 auto;
	max-width: 1160px;
	padding:0 1rem;
}

/* Header and Navigation Menu in same horizontal layout */
.oneline-header .header-nav-wrap .site-header .wrap,
.oneline-header .header-nav-wrap nav .wrap
{
    padding:0;
}
/*
.site-inner .wrap,
.oneline-header .header-nav-wrap .wrap,
.header-nav-wrap.one-line .wrap
{
    padding:0 1rem;
    /* For responsive layout */
/*    box-sizing:content-box;*/
/*}*/


.header-nav-wrap.one-line .site-header .wrap,
.header-nav-wrap.one-line nav .wrap
{
    padding:0;
}



/*
    <main> will not float and take full width
    This should be outside media query perhaps
*/

.full-width .site-content {
    border:none;
    width:auto;
    float:none;
}

.full-width .breadcrumb-wrap {
    /* Do you want to hide the breadcrumb  ?? */
}

.page-template-full-width-narrow .site-inner .wrap {
    max-width:800px;
}

.page-template-full-width-narrow .site-inner .site-content {
    border:none;
    width:auto;
    float:none;
}

.no-margin-padding .site-content {
    margin:0;
    padding:0;
    border:none;
    width:auto;
    float:none;
}

/*
    Page Template: no-title
    No sidebar, No Title, No Breadcrumb
*/
.page-template-no-title .site-content {
    float:none;
    width:auto;
    border-right:none;
    padding-right:0;
}

.page-template-no-title .breadcrumb-wrap {
    display:none;
}

/*
    Page Template: landing-page-with-footer
    No Navigation Menu, No sidebar, No Title, No Breadcrumb
*/
.page-template-landing-page-with-footer .site-content {
    
    padding:0;
    margin:0;
    border:none;
    width:auto;
    float:none;
}

//.page-template-landing-page-with-footer .site-inner .box-wrap {
///*    padding-top:0;*/
//}


/* =Media queries

-------------------------------------------------------------- */
/* ---------------------------------------------------------------
 * MOBILE CSS fallback for device width 768px or below
 * ------------------------------------------------------------ */
/* Minimum width of 768pixels. */
@media screen and (min-width: 768px) {

	.author-avatar {
		float: left;
		margin-top: 8px;
	}
	
	.author-description {
		float: right;
		width: 85%;
	}
	
	.site {
	}
	
	.site-info {
		margin: 0 auto;
    		max-width: 1090px;
	}
    
    /*
	body.template-front-page .site-content,
	body.single-attachment .site-content,
	body.full-width .site-content,
	body.no-title .site-content,
    body.no-margin-padding .site-content
	{
		width: 96%;
	}
    */
	
	.site-header h1,
	.site-header h2 {
		text-align: left;
	}
	.site-header h1 {
		font-size: 26px;
		line-height: 1.446153846;
		margin-bottom: 0;
	}
	
	
    
	.entry-header .entry-title {
		/* font-size: 28px; */
		/* margin-bottom: 20px; */
	}
	#respond form input[type="text"] {
		width: 46.333333333%;
	}
	#respond form textarea.blog-textarea {
		width: 79.666666667%;
	}
	/*.template-front-page .site-content,
	.template-front-page article {
		overflow: hidden;
	}
	.template-front-page.has-post-thumbnail article {
		float: left;
		width: 47.916666667%;
	}*/
	.entry-page-image {
		float: right;
		margin-bottom: 0;
		width: 47.916666667%;
	}
	
	/*.template-front-page .sidebar .widget,
	.template-front-page.two-sidebars .sidebar .front-widgets {
		float: left;
		padding-left: 10px;
		width: 51.875%;
		margin-bottom: 24px;
	}
	.template-front-page .sidebar .widget:nth-child(odd) {
		clear: right;
	}
	.template-front-page .sidebar .widget:nth-child(even),
	.template-front-page.two-sidebars .sidebar .front-widgets + .front-widgets {
		float: right;
		width: 39.0625%;
		margin: 0 0 24px;
	}
	.template-front-page.two-sidebars .widget,
	.template-front-page.two-sidebars .widget:nth-child(even) {
		float: none;
		width: auto;
	}*/
	
	.commentlist .children {
		/* margin-left: 48px; */
	}
}

/*
.site-content {
	margin: 0px 3%;
}*/

.sidebar-primary {
    float: left;
    padding: 0 0 0 0;
    width: 29.95%;
    margin:0 3% 0 0;
    min-width:200px;
}


/* 
    WIDE SCREEN MEDIA QUERIES
    Minimum width of 961 pixels.
    
    Reference - https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile
    
    For sidebar lets require a minimum width of 961
    some touch devices may have a max of 960
    
    the sidebar must have atleast 300px of content area to contain a google ad of 300x250
    
    after that whatever margin padding may come
*/

/*@media screen and (min-width: 961px) {*/

body {
    background-color: #f5f5f5;
}

body.no-margin-padding {
    background-color:#fff;
}

body .site {
    /* padding: 24px 24px 0; */
    margin-bottom: 24px;
    }
body.custom-background-empty {
    background-color: #fff;
}
body.custom-background-empty .site,
body.custom-background-white .site {
    padding: 0;
    margin-top: 10px;
    margin-bottom: 0;
    box-shadow: none;
}


.site-content {
    border-right: 1px solid #eee;
    float: left;
    /* We need padding on right to show border at some distance from content */
    padding: 0 2% 0 0;
    width: 60.0%;
}


/* 
	-------------
	Print styles
	-------------
*/

@media print {
	body {
		background: none !important;
		color: #000;
		font-size: 10pt;
	}
	footer a[rel=bookmark]:link:after,
	footer a[rel=bookmark]:visited:after {
		content: " [" attr(href) "] "; /* Show URLs */
	}
	a {
		text-decoration: none;
	}
	.entry-content img,
	.comment-content img,
	.author-avatar img,
	img.wp-post-image {
		border-radius: 0;
		box-shadow: none;
		}
		
		/* hide top social icons */
	.socialmedia img {
	    display:none;
	}
	
	.site-inner {
		clear: both !important;
		display: block !important;
		float: none !important;
		max-width: 100%;
		position: relative !important;
	}
	
	.site-header {
		margin-bottom: 72px;
		text-align: left;
	}
	.site-header h1 {
		font-size: 21pt;
		line-height: 1;
		text-align: left;
	}
	.site-header h2 {
		color: #000;
		font-size: 10pt;
		text-align: left;
	}
	.site-header h1 a,
	.site-header h2 a {
		color: #000;
	}
	.author-avatar,
	#colophon,
	#respond,
	.commentlist .comment-edit-link,
	.commentlist .reply,
	.entry-header .comments-link,
	.entry-meta .edit-link a,
	.page-link,
	.site-content nav,
	.sidebar,
	img.header-image,
	.nav-primary {
		display: none;
	}
	.wrapper {
		border-top: none;
		box-shadow: none;
		}
	.site-content {
		margin: 0;
		width: auto;
	}
	.singular .entry-header .entry-meta {
		position: static;
	}
	.singular .site-content,
	.singular .entry-header,
	.singular .entry-content,
	.singular footer.entry-meta,
	.singular .comments-title {
		margin: 0;
		width: 100%;
	}
	.entry-header .entry-title,
	.entry-title,
	.singular .entry-title {
		font-size: 21pt;
	}
	footer.entry-meta,
	footer.entry-meta a {
		color: #444;
		font-size: 10pt;
	}
	
	.author-description {
		float: none;
		width: auto;
	}

	/* Comments */
	.commentlist > li.comment {
		background: none;
		position: relative;
		width: auto;
	}
	.commentlist .avatar {
		height: 39px;
		left: 2.2em;
		top: 2.2em;
		width: 39px;
	}
	.comments-area article header cite,
	.comments-area article header time {
		margin-left: 50px;
	}
}


/****************************
 
    NAVIGATION MENU STYLES
*/

/*
    Responsive Menu
    https://codepen.io/stephaniewalter/pen/kficJ
    
    Arrows from
    https://stackoverflow.com/questions/2701192/what-characters-can-be-used-for-up-down-triangle-arrow-without-stem-for-displa
*/

.right {
  float: right;
  margin-left: 1em;
}

.ico-heart:before,
.ico-letter:before,
.ico-file:before,
.ico-real:before,
.ico-pen:before,
.ico-user:before,
.ico-rocket:before,
.ico-arrow-right:before,
.ico-arrow-left:before,
.ico-arrow-left-2:before,
.ico-arrow-right-2:before,
.ico-caret-down:before,
.ico-caret-up:before,
.ico-caret-left:before,
.ico-caret-right:before,
.ico-facebook:before,
.ico-twitter:before,
.ico-google-plus:before {
  /*font-family: 'icomoon';*/
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.ico-caret-down:before {
  content: "\25BC";
}
.ico-caret-up:before {
  content: "\25B2";
}



/* ----------------------------- */
/* == Menu */
/* ----------------------------- */

/*
    Full Menu Wrapper
    Contains :
    1. Mobile Menu Button
    2. Menu NAV
*/


/*
    TWO ways to do oneline headers
    add class to body tag or to the header-nav-wrap element
 
*/

.oneline-header .header-nav-wrap > .wrap > .box-wrap
{
	display:table;
}

.oneline-header .header-nav-wrap .box-wrap .nav-menu .menu {
	display:inline-block;
}

.oneline-header .header-nav-wrap .box-wrap .nav-menu .menu::after ,
.nav-menu .menu::after
{
	content: " ";
	display: block; 
	height: 0; 
	clear: both;
}

.header-nav-wrap.one-line .site-header,
.oneline-header .header-nav-wrap .site-header
{
    display:inline-block;
}

.header-nav-wrap.one-line .nav-menu,
.oneline-header .header-nav-wrap .nav-menu
{
    /*float:right;*/
    /*width:auto;*/
    /*padding: 1.0em 0 0 0;*/
	display: table-cell;
    vertical-align: middle;
	width:100%;
	text-align:right;
}

.header-nav-wrap.one-line .site-header .title .site-description,
.oneline-header .header-nav-wrap .site-header .title .site-description
{
    display:none;
}


.nav-menu {
    position: relative;
    
    /* 
        SiteOrigin PageBuilder plugin widgets are z-index 99 so we need to raise the menu else it hides behind
        z-index alone will not work since menus are absolute and so is siteorigin widgets. First give the nearest common parent
        position relative, which in this case is the #page div right after body. This is very IMPORTANT
    */
    z-index: 101;

	
}

/* PRIMARY NAVIGATION */

.nav-primary {
	/* 
		Keep font properties to make compatible with max mega menu 
		Styles will take effect here as well.

		Also nav-secondary may have different styles
	*/
    font-family:'Open Sans', Roboto, sans-serif;
    font-weight:bold;
    text-transform: uppercase;
    background: #222;
    border-top: 1px solid #000;
    text-align: center;
    width:100%;
    
}

/*
    text align center does not work on display block childs
    https://stackoverflow.com/questions/41149747/text-align-center-not-working
    https://stackoverflow.com/questions/16569577/how-to-center-things-displayblock-inline-block
*/
/*
.nav-menu {
    background:white;
    width: auto;
}
*/
/*
    Text align center does
*/
.nav-menu .menu {
    padding-left: 0;
    list-style: none;
    text-align: left;
    margin:0;
}

/*
    1st LEVEL
    MenuBar items
*/
.nav-menu .menu > li 
{
    /*position: relative;*/
    padding: 0;
    /* 
        don't use inline-block since they have spaces between them 
        https://css-tricks.com/fighting-the-space-between-inline-block-elements/
        html minification will remove the spaces causing confusion in other places
    */
    /*display: inline-block;*/
    float:left;
    margin:0em 0.5em 0em 0em;
    
    
    background:#222;
}

.nav-menu .menu > li > a {
    padding: 16px;
}

/*
    Use :hover for normal menu links without any submenu
    Use .active class for a tags with submenus since :hover may be skipped in event handlers
    
    PROBLEM: rapidly switching between 2 menu items for fun, will cause hover to trigger on one of them
    in such a way that it wont be removed and remain highlighted!!
*/

.nav-menu .menu li a.active {
	background:#2c9cff;
}

/* To disable the tap blink effect */
/*
.nav-menu .menu li a:hover {
    -webkit-tap-highlight-color: transparent;
}
*/


.nav-menu.dropdown-menu .menu .menu-item-has-children > a:after {
	content: "";
    border-color: #fff transparent transparent transparent;
    border-style: solid;
    border-width: 0.35em;
    display: block;
    height: 0;
    width: 0;
    right: 0.6em;
    top: 1.5em;
    position: absolute;
}

.nav-menu.dropdown-menu .sub-menu .menu-item-has-children > a:after {
	content: "";
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 0.35em;
    display: block;
    height: 0;
    width: 0;
    right: 0.6em;
    top: 1.3em;
    position: absolute;
}

.nav-menu ul.menu,
.nav-menu a.menu-link {

    
}

/*
    Mobile burger button
*/
.nav-menu a.mobile-burger {
    display: none;
    background: #474747;
    color: #ffffff;
    text-decoration:none;
    text-align:center;
    width: auto;
    padding: 0.8em;
    border: none;
    margin: 0;
}

/*
    All a tags inside the menu
*/
.nav-menu .menu a, 
.nav-menu .menu .menu-item a {
    
    /*
        ANDROID CHROME MASSIVE BUG, different font sizes of menu items with and without child.
        Instead of display block, use display inline block with width 100%;
    */
    display: block;
    
    /*display:inline-block;
    width:100%;*/
    
    /*position: relative;*/
    padding: 1.2em;
    cursor:pointer;
    color: #fff;
    text-decoration: none;
    
    /* Font size of navigation menu */
    font-size: .85em;
    letter-spacing: 0.05em;
}

.nav-menu .menu .menu-item-has-children > a {
	position:relative;
	padding-right:2em;
}


/*
    Highlight current menu items or page items
*/
.nav-menu .menu .current-menu-item > a,
.nav-menu .menu .current-menu-ancestor > a,
.nav-menu .menu .current-page-ancestor > a {
    
    position: relative;
    background: #437aa7;
}

/* Buttom pointing arrow */

/*
.nav-menu .menu > .current-menu-item > a:after,
.nav-menu .menu > .current-menu-ancestor > a:after {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #f5d4d4;
  border-width: 5px;
  left: 50%;
  margin-left: -5px;
}
*/
/*
.nav-menu li + li a:before {
  content: "*";
  position: absolute;
  left: -0.5em;
  top: 0.2em;
  color: #ffffff;
  opacity: 0.8;
  font-family: Arial, Verdana, sans-serif;
}
*/

/*
    2nd LEVEL
    SUBMENU
*/
.nav-menu .sub-menu {
    background: #444;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding:0;
    position: absolute;
    display:none;
    list-style: none;
    text-align: left;
    border-top: 2px solid #2c9cff;
    padding: 1em 0;
    z-index:1;
}

.nav-menu .menu li .sub-menu li {
    display: block;
    position:relative;
    cursor:pointer;
    list-style: none;
    background: inherit;
    margin:0;
}

.nav-menu .menu li .sub-menu li a {
    margin: 0;
    white-space: nowrap;
    line-height: 1.8em;
    border: none;
    padding:10px 20px;
}

/*
.nav-menu .menu .sub-menu li a:hover {
    background: #0B91EA;
}
*/
.nav-menu .sub-menu li:last-child a {
    border-bottom: 1px dashed #dd4949;
}

/*
    Trigger the hover using a javascript injected class
    this will prevent interference with responsive css
*/
/*
.dropdown-menu li:hover > .sub-menu {
    display:block;
}
*/

/*
    3rd LEVEL menu
*/
/*
.nav-menu.dropdown-menu li:hover > .sub-menu li:hover > .sub-menu {
    display:block;
}*/

.nav-menu li .sub-menu li .sub-menu
{
    display:none;
    background: inherit;
    border: none;
    left:100%;
    top: -1px;
    position:absolute;
    z-index:2000;
    border-top: 2px solid #2c9cff;
}

.nav-menu .menu li .sub-menu li .sub-menu li
{
    cursor:pointer;
}

.nav-menu .toggle-link {
    display:none;
}

.nav-menu .toggle-link:focus {
    outline: none;
}

.nav-menu .toggle-link .screen-reader-text {
    height:0px;
    width:0px;
    overflow:hidden;
    display:block;
}


/* Toggle buttons for responsive menu */
.nav-menu .toggle-link {
    display: none;
    position: absolute;
    top: 0;
    /* cant use bottom 0 since it will strectch down when child menu shows */
    /*bottom:0;*/
    right: 0;
    z-index: 200;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    background: #600;
    color: #fff;
    padding: 0;
    margin: 0;
    border: none;
    width:auto;
    /* after pseudo element will inherit the font size */
    font-size:0.8125em;
    line-height:1.8em;
}

/* Responsive toggle menu buttons with up/down arrows */
.nav-menu .toggle-link::after {
    content: "\25BC";
    color: #fff;
    display: inline-block;
    width: 45px;
    padding:0.7em 1.4em;
}

.nav-menu .toggle-link.active::after {
    content: "\25B2";
}

.nav-menu .toggle-link:hover {
}


.nav-menu a.mobile-burger {
    
}

/*
@media screen and (max-width: 1040px) {
	
	#searchsubmit {
        margin-left: 0px;
	}
}*/

/*
    Media Queries for Menu
*/

/*
	List of Breakpoints in order:
	max-width: 800px
	max-width: 640px
	max-width: 540px
	max-width: 420px

	Ipad has 1024x768
    ipad air 4 - chrome potrait - 820px / 51em
                 landscape - 1180px / 74em
	Moto-G31 - Chrome Potrait - 412px / 26em wide
	           Chrome Landscape - 829px / 52em wide

*/


/* 
    Responsive Menu 
    Ipad has 1024x768
    
    we can either do
    1. max-width 768
    OR
    2. max-width 800  + min-width 801
    
    you can choose some other breakpoint like 960 + 961 as well
    https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile
    
    Below 801PX (800px or below) the hamburger menu control will appear)
    
    SIDEBAR DROPS BELOW at 800px or BELOW
*/

@media screen and (max-width: 800px) 
{
    .site-inner .box-wrap {
        overflow:auto; /* collapsing margin fix for h1 tag with margin-top */
    }
    
    
    .oneline-header .header-nav-wrap .site-header,
    .site-header {
        display:block;
    }
    
    /*
		Revert from table to block display for MOBILE-MENU
	*/
    .oneline-header .header-nav-wrap > .wrap > .box-wrap
	{
		display: block;
	}

	
	/*
		remove padding from full header and add only to LOGO. NOT MEnu
	*/
	.oneline-header .header-nav-wrap .wrap,
	.header-nav-wrap.one-line .wrap
	{
		padding:0 0rem;
	}
	
    .oneline-header .header-nav-wrap .site-header .wrap,
    .header-nav-wrap .site-header .wrap {
        padding:0 1rem;
    }
    
    .site-header .title {
        display:block;
    }
    
    
    /*
        Hide the responsive menu, only if javascript is enabled.
        Otherwise keep it wide open ??
        Is that a good strategy
        
        .js nav[role=navigation] .wrap { }
        
        Or use css target method
    */
    
    .nav-primary .wrap {
        overflow: hidden;
        display: none;
        float: none;
    }
    
    /*
    .js nav[role=navigation] .active {
        display: block;
    }
    */
    
    /* One line menus on responsive displays */
    .header-nav-wrap.one-line .nav-menu {
        height: auto;
        display:block;
        float:none;
        padding-top:0;
    }
    
    
    /* One line menus on responsive displays */
    .oneline-header .header-nav-wrap .nav-menu {
        height: auto;
        display:block;
        float:none;
        padding-top:0;
    }
    
    .oneline-header .header-nav-wrap .wrap {
    	/*padding:0;*/
        position:relative;
    }
    
    /*  Absolute position mobile burger */
    .oneline-header .header-nav-wrap .nav-menu .mobile-burger {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
    }
    
    .oneline-header .header-nav-wrap .nav-menu .mobile-burger .text {
        display:none;
    }
    
    .oneline-header .header-nav-wrap .nav-menu .mobile-burger,
    .oneline-header-mobile .header-nav-wrap .nav-menu .mobile-burger {
        display: block;
        position: absolute;
        top: 0.5em;
        right: 0.5em;
        /* we cannot use bottom, since burger is inside the relative container that expands when menu shows */
        /*bottom: 0.8em;*/
        font-size: 1em;
        padding: 0.5em;
    }
    
    .oneline-header .header-nav-wrap .nav-menu,
    .oneline-header-mobile .header-nav-wrap .nav-menu {
        position:static;
    }
    
    .oneline-header-mobile .header-nav-wrap {
        position:relative;
    }
    
    .oneline-header .header-nav-wrap .box-wrap .nav-menu .menu {
		display:block;
	}
    
    
    /* Make burger visible */
    .nav-menu a.mobile-burger {
        display: block;
    }
    
/*    
    .nav-menu a.mobile-burger:hover {
        background: #9b1c1b;
    }
  */  
    .nav-menu a.mobile-burger.active .ico-caret-down:before {
        content: "\f0d8";
    }
    
    /* Make tap toggle buttons visible */
    .nav-menu .toggle-link {
        display:block;
    }
    
    /* <ul> tag */
    .nav-menu .menu {
        padding-bottom: 5px;
        border-bottom:5px solid #b00;
        background:#b00;
        padding:1em;
		
    }
    
    .nav-menu .menu li {
        display: block;
        float:none;
        border: none;
        margin:0;
    }
    
    .nav-menu .menu > li {
        padding: 0px;
        border: none;
    }
    
    /* 2nd li onwards */
    .nav-menu .menu > li + li {
        border-top: 1px solid #555;
    }
    
    .nav-menu .menu .current-menu-item > a,
    .nav-menu .menu .current-menu-ancestor > a,
    .nav-menu .menu .current-page-ancestor > a {
        text-decoration:underline;
        background: inherit;
    }
    
    .nav-menu .menu .menu-item a ,
    .nav-menu .menu .menu-item .sub-menu .menu-item a
    {
        padding: 0.7em;
        margin: 0px;
        border: none;
        text-align:left;
        line-height: 1.8;
    }
    
    .nav-menu .sub-menu {
        border-top:none;
    }
    
    .nav-menu .menu li .sub-menu li a {
        margin-left:1em;
    }
    
    .nav-menu .menu li .sub-menu li .sub-menu li a {
        margin-left:2em;
    }
    
    /* Reset some styles from desktop mode */
    .nav-menu .menu a:hover, .nav-menu .menu .sub-menu li a:hover {
        text-decoration:none;
    }
    
    .nav-menu .menu .rightalign {
        float: none;
    }
    /*
    .nav-menu li + li a:before {
        content: "";
    }
    */
    
    .nav-menu .menu li .sub-menu {
        background: #900000;
        margin-left: 0px;
        width: 100%;
        position:relative;
        padding: 0;
    }
    
    .nav-menu .sub-menu li,
    .nav-menu .sub-menu li a {
        margin: 0;
        display: block;
    }
    
    .nav-menu .sub-menu a {
        padding-left: 0.8em;
    }
    
    .nav-menu .sub-menu a:hover {
        /* background: #781515; */
    }
    
    .nav-menu .menu li .sub-menu li {
        background:inherit;
    }
    .nav-menu .sub-menu li:last-child {
        padding: 0;
    }
    .nav-menu .sub-menu li:last-child a {
        border: none;
    }
    
    .nav-menu .menu .has-subnav, .menu .menu-item-has-children {
        position: relative;
        
    }
    
    .menu .menu-item-has-children a {
        margin:0 50px 0 0;
    }
    
    /*
        Responsive Menu
        Make submenu visible/active on clicking of down arrow
    */
    .nav-menu li .sub-menu.active, 
    .nav-menu li .sub-menu li .sub-menu.active {
        /*overflow: visible;
        position: relative;
        z-index: 9;*/
    }
    
    .nav-menu li .sub-menu li .sub-menu {
        left:0;
        /* Remove the absolute positioning from desktop style */
        position:relative;
        background:#700000;
        border:none;
        padding: 0;
        width: auto;
    }
    
    .nav-menu li .sub-menu li .sub-menu li {
        background:inherit;
    }
    
    
    
    
	/*
        Upto 800px contentbar will not be floated
    */
    .site-content {
        border-right: none;
        float: none;
        /* We need padding on right to show border at some distance from content */
        padding: 0 0 0 0;
        width: auto;
    }
    
    
    .entry-content h3 {
        line-height:1.3em;
    }
    
	
	/*
        Upto 800px sidebar will not be floated
    */
    .sidebar-primary {
        float: none;
        width: auto;
        /*margin:0 3%;*/
    }
	/*
	.sidebar-primary .widget {
		width: 45%;
		float:left;
	}*/
	
}


/*
	WIDTH: 640px or smaller	
	Smartphone Landscape Mode
	Moto G5 Plus - Chrome - Potrait - 360px
*/
@media screen and (max-width: 640px) {
    
    /*
        Step up base font size to assumed 20px
        16px is very small on mobiles.
    */
    body {
    	/* if base is 16px , its 20px */
        font-size:125%;
    }

    /*
        HACK
        
        MASSIVE PROBLEM: Chrome Android font scaling issue that affects line-height, padding and font-sizes to render
        inconsistently
        
        Ref:
        https://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font
    */
    .site-container * {
        max-height: 999999px;
    }
    
    
    .header-nav-wrap {
        margin-bottom:0;
    }
    
    .nav-menu {
		font-size:0.8em;
	}
	
    
    /*
        MASSIVE BUG: padding in em cause inconsistent values in Chrome Android.
        I had to make a video to show in IRC
    */
	.site-header .title {
        padding: 2% 0;
    }
    
    
    .nav-primary {
        border-top:0;
    }
    
    .entry-header .entry-title {
		font-size: 1.8em;
        font-family:'Roboto Slab', serif;
	}
    
    .entry-content p, .entry-summary p, .comment-content p, .mu_register p {
        /* The side margins from mobile edge is 1 em, so 1.5 em line height would give similar spacing between lines */
        line-height:1.5;
    }
    
    /*
        Previous and next article navigation links
    */
    .site-content .nav-single {
        font-size: 0.8em;
        line-height: 1.5;
    }
    
	/*
		FOOTER AREA
	*/    
    .footer-wide-widgets {
        font-size: 0.9em;
        line-height: 1.3;
    }
    
    .footer-menu ul li a {
        margin: 0.3em 0.5em 0.3em 0;
    }
}

/*
	WIDTH: 540PX or smaller
*/
@media screen and (max-width: 540px) {
    /*
        Post Title, no margin bottom, to save vertical space
    */
	.entry-header {
        margin-bottom: 1rem;
    }
    
    .entry-header .below-title-meta
    {
        font-size:0.8em;
        margin-bottom:1rem;
    }
}

/*
	WIDTH: 420PX or smaller	
	Smartphone potrait mode
	Moto G5 Plus - Chrome - Potrait - 360px
*/
@media screen and (max-width: 420px) {
    
    /*
        Step up base font size to assumed 20px
        16px is very small on mobiles.
    */
    body {
    	/* if base is 16px , its 20px */
        font-size:125%;
    }
    
    /*
        MASSIVE PROBLEM: Chrome Android font scaling issue that affects line-height, padding and font-sizes to render
        inconsistently
        
        Ref:
        https://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font
    */
    .site-container * {
        max-height: 999999px;
    }
    
    /*
    .site-content {
        margin: 0px 0.6em;
    }*/
    
    
    .entry-content p, .entry-summary p, .comment-content p, .mu_register p {
        /* 
            The side margins from mobile edge is 1 em, so 1.5 em line height would give similar spacing between lines 
            
            MASSIVE BUG: Dont use line heights in em. It caused the NOTORIUS Chrome Android bug
        */
        line-height:1.5;
    }
    /*
    .entry-header {
        margin-bottom: 0;
    }*/
    
    .entry-header .below-title-meta
    {
        font-size:0.75em;
        margin-bottom:1rem;
    }
    
    .entry-content h3 {
        line-height:1.3em;
    }
    
    /*
        Narrow width, header will be center aligned with full width
    */
	.header-nav-wrap .site-header,
    .header-nav-wrap.one-line .site-header {
		height: auto;
	  	border:none;
        display:block;
	}
	
	.header-nav-wrap.one-line .wrap {
        padding:0;
    }
	
	.oneline-header .header-nav-wrap .site-header .wrap, 
    .header-nav-wrap .site-header .wrap {
        /*padding-left:1em;*/
    }
    
    .nav-menu {
		font-size:1rem;
	}
	
	/*
        MASSIVE BUG: padding in em cause inconsistent values in Chrome Android.
        I had to make a video to show in IRC
    */
	.site-header .title {
        padding: 1em 0;
    }
    
    

	.adt, .adt-comment {
		float:none;
		display:block;
	}

	.entry-header .entry-title {
		font-size: 1.8em;
        font-family:'Roboto Slab', serif;
	}
	
	/* Previous Post, Next post links, make block */
	.nav-previous, .nav-next {
		float:none;
		display:block;
		margin-top:1em;
	}
	
	.nav-next a {
        text-align:right;
    }
    
    /* Make comments section narrower */
    .comments-area section ,
    .comments-area .reply {
        padding-left:0;
    }
    
    .comments-area .commentlist .children {
        margin-left:1.2em;
    }
    
    .entry-summary .excerpt-thumb {
        float:none;
        display:block;
    }
    
    
    .entry-meta .read-more-link {
        display: block;
        float: none;
        margin-top: 1em;
    }
    
    .entry-meta .read-more-link a {
        background: #eee;
        color: #333;
    }
    
    
    .sidebar-primary {
        /* Font size for sidebar elements */
        font-size: 0.8em;
    }
    
    
    .footer-widgets .box-wrap {
        font-size:0.8625em;
    }
    
    /*
        On mobile phone make About Us, Contact Us footer links small
    */
    .footer-menu {
        font-size: 0.8em;
        line-height: 1.3;
    }
    
/*    .footer-menu .menu {
        text-align:left;
    }*/
}


/*
    Display different images for desktop and mobile screens
    Utility css classes
*/
.img-responsive.mobile {
    display: none;
}

@media only screen and (max-device-width: 420px) {
    .img-responsive {
        display: none;
    }
    .img-responsive.mobile {
        display: block;
    }
}


/* CSS OVER */