@charset "UTF-8";
/*
Theme Name: Marcus Technical Services
Theme URI: https://marcust.com
Author: Stephen Marcus
Author URI: https://wordpress.org/
Description: Marcus Technical Services v1 Lightweight, high-performance theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: marcust
Tags: custom-theme

*/

* {
     --dark: #222;
   --medium: #999;
   --medium-light: #eee;
   --light: #fff;
   --highlight: #189ac7;
   --trim: #199e5b;
   --hover: #b94007;
   --brand-color: #d02b30;
   --border-color: rgba(0,0,0,.3);
   --border-style: solid;
   --border-width: 1px;
   --weight: bold;
   --sans: 'Lato-Regular', sans-serif;
   --sans-bold: 'Lato-Bold', sans-serif;
   --titles: 'Rubik-Regular',sans-serif;
   --titles-med: 'Rubik-Medium',sans-serif;
   --shadow: 0 3px 3px rgba(0,0,0,.1);
   --transition: 1s;
   --ease: ease-in-out;
     box-sizing: border-box; 
  }
	
html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-behavior: smooth;
	font-family: var(--sans);
	background: #111;
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important}}
  
@font-face {
	font-family: "Lato-Regular";
	src: url("fonts/Lato-Regular.woff2") format("woff2"),
	url("fonts/Lato-Regular.ttf") format("ttf"),
	url("fonts/Lato-Regular.otf") format("truetype");
	font-style: normal;
	font-weight: 400;
}

@font-face {
 	font-family: "Lato-Bold";
 	src: url("fonts/Lato-Bold.woff2") format("woff2"),
 	url("fonts/Lato-Bold.ttf") format("ttf"),
 	url("fonts/Lato-Bold.otf") format("truetype");
 	font-style: normal;
 	font-weight: 700;
 }
 
@font-face {
   font-family: "Rubik-Regular";
   src: url("fonts/Rubik-Regular.woff2") format("woff2"),
   url("fonts/Rubik-Regular.ttf") format("ttf"),
   url("fonts/Rubik-Regular.otf") format("truetype");
   font-style: normal;
   font-weight: 400;
 }
 
 @font-face {
    font-family: "Rubik-Medium";
    src: url("fonts/Rubik-Medium.woff2") format("woff2"),
    url("fonts/Rubik-Medium.ttf") format("ttf"),
    url("fonts/Rubik-Medium.otf") format("truetype");
    font-style: normal;
    font-weight: 500;
  }  
   
img {
	max-width: 100%;
	height: auto;
}    

*, ul, li { margin: 0; padding: 0; list-style: none} 
  p { margin-bottom: 2rem}
  a { text-decoration: none; color: var(--highlight); transition: color var(--transition) var(--ease)}
  a:hover { transition: background-color var(--transition) var(--ease); color: var(--hover)}
  
h1, h2, h3, h4, h5, h6, strong { font-family: var(--sans-bold);
	margin-top: 20px;
	margin-bottom: 20px;
}

h1 {
 	font-size: 1.3rem;
 	line-height: 1.5rem;
 }
 
 .entry-content h1:after,  .entry-content h3:after {
  content:"";
 	display: block;
 	padding: 2px;
 	margin-top: 20px;
 	border-radius: 50px;
 	width: 100px;
 	background-color: #0784b9;
  }
  
  
.logo img { width: 100%; height: auto; max-width: 380px;
	margin-top: 0; margin-left: 10px;
}

.menu a { font-family: var(--titles); color: #fff; padding: 25px 10px 25px; text-align: center; display: block}
  header a:hover {
 transition: var(--transition) var(--ease);
  color: var(--hover)  }
article, #page-footer { padding: 1.5rem}
i {	font-style: italic}

.menu li { display:inline-block; text-align: center}

.logo img {
	width: 200px;
	height: auto;
	overflow: hidden;
}

.logo {
	width: 40px;
	margin-top: 14px;
	overflow: hidden;
}

.btn {
	display: block;
	padding: 5px 10px;
	color: #fff;
	text-align: center;
	border: 1px solid #fff;
	border-radius: 3px;
}
  
.hero {
	background-color: var(--dark);
	color: var(--light);
	padding: 30px;
	background-image: url("img/hero-bg.jpg");
	background-size:cover;
}

.articles-hero {
	background-color: var(--dark);
	color: var(--light);
	padding: 30px;
	overflow: hidden;
	height: 250px;
}

 .articles-hero .home-hero-top {
 	text-align: center;
 	grid-template-columns: 1fr;
 }
    
 .articles-hero .hero-img {  margin-left: 0}
    
.hero-mid {
	background-color:#292929;
	color: var(--light);
	padding: 80px 30px;
	border-top: 2px solid #0784b9;
}    
    
.frame {
  	max-width: 750px;
  	margin: auto;
  	background: #222;
}

article { background: var(--light); line-height: 1.5rem;
border-top: 2px solid #0784b9;
overflow: hidden;
border-bottom: 2px solid #0784b9}

table {	margin: auto; max-width: 90%}

.entry-meta {
	display: grid;
	grid-template-columns: 1fr  1fr 1fr;
	grid-column-gap: 40px;
	text-align: left;
}

.svg-icon {
	width: 40px;
	float: left;
	margin-top: 9px;
}

.nav-links {
	display: grid;
	background-color: #000;
	grid-template-columns: 1fr 1fr ;
	grid-column-gap: 20px;
	padding: 10px 0;
}

.nav-links a {
	background-color: #333;
	display: block;
	padding: 5px 10px 10px ;
	font-size: .9rem;
	border-radius: 5px;
	color: #ccc;
	margin: 0 10px;
	 transition:background-color var(--transition) var(--ease)
}

.meta-nav {
	font-size: .65em;
	text-transform: uppercase;
}

.nav-links a:hover {
	background-color: var(--hover);
	color: #fff;
}

#comments {
	padding: 20px;
	color: #fff;
	display: none;
}

.nav-next {	text-align: right}

#header { grid-area: header}

#page-footer {
  font-size: .8rem;
  line-height: 3em;
  color: var(--medium);
  text-align:center;
  background-color: var(--dark);
}
   
 #page-footer a { color: #c9c9c9}
 
#main-articles { 
   background-color: #108dc2;
   background-image: url("img/hero-mid.jpg");
   background-size:750px auto;
}

 #main-articles { padding-top: 50px}
  
.home-hero-text img { margin-top: 100px}  

.hero-mid-pic { text-align: center}

.hero-mid-set img { max-width: 200px}

.home-article {
    margin:0 auto 20px; 
    background: #055070;	
	max-width:400px;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.contact-icons {
	margin-left: -3px;
	margin-top: 10px;
}

#page-header {
    display: grid;
	background-color: #000;
    grid-template-areas: "logo  menu";
    grid-template-columns: 1fr 3fr;
    grid-row-gap: 10px;
    grid-column-gap: 40px;
	text-align: right;
border-bottom: 2px solid #0784b9;	
}
   
.logo { grid-area: logo}
.custom-menu-class { grid-area: menu; padding:0 10px 0 0}    
 
.hero-img { max-width: 230px; height:auto}
.hero-txt { max-width: 270px; height:auto}
  
  .hero-mid-bio h3, .footer-contact h3 {
  	font-size: 1.4rem;
  	text-transform: uppercase;
  }
   
.footer-contact a { text-decoration:none; color: var(--light)}
    
address { font-style: normal; font-size: .9rem; line-height: 2em}
address a { transition:color var(--transition) var(--ease)}
   
address a:hover {
   	color: var(--hover);
   	transition: color var(--transition) var(--ease);
}   
  

    
.footer-newsletter img {	width: 130px}
  
.contact-icons svg {
  	width: 18px;
  	height: auto;
  	margin: 3px;
  	padding-top: 10px;
  	fill: var(--light);
  	transition: fill var(--transition) var(--ease);
}
  
  .contact-icons svg:hover {
  	fill: var(--hover);
  	transition: fill var(--transition) var(--ease);
  }
  
  svg.facebook-icon:hover { fill: #3b5998}
  svg.linkedin-icon:hover { fill: #0e76a8}
  svg.twitter-icon:hover { fill: #00acee}
  svg.rss-icon:hover { fill: #ee802f}
  svg.pinterest-icon:hover { fill: #c8232c}
  svg.dribbble-icon:hover { fill: #ea4c89}
  
.home-article h3 {
	background: var(--light);
	width: 80%;
	color: #111;
	font-size: .8rem;
	padding: 10px;
	margin-top: -30px;
	margin-bottom: 10px;
	position: relative;
	font-family: 'Lato-Bold', sans-serif;
}

.home-article p {
	color: var(--light);
	padding: 10px 15px;
	font-size: .6rem;
	font-family: 'Lato', sans-serif;
}
 
 .footer-contact {
 	background: #343333;
 	max-width: 700px;
 	margin:30px auto 0;
 	color: var(--light);
 	padding:20px 30px;
 	text-align: center;
 	position: relative;
 } 
 
.selected {	color: #189ac7}

.selected:before {
	content: "▾";
	display: block;
	text-align: center;
	color: #189ac7;
}

.comments-title, .comment-notes {
	color: #999;
}
input[type=text],input[type=email],input[type=url], textarea {
  width: 100%;
  padding: 12px;   
  border: var(--border-width) var(--border-style) transparent;
  box-sizing: border-box; 
  margin-top: 6px; 
  background-color: #494848;
  margin-bottom: 16px;
  resize: vertical;
  color: var(--light);
}

textarea { height: 80px}

label {	display: none}

input[type=submit] {
  background-color: #333;
  color: var(--light);
  padding: 12px 20px;
  border: var(--border-width) var(--border-style) #ccc;
  cursor: pointer;
  max-width: 200px;
  text-transform: uppercase;
  transition: all var(--transition) var(--ease);
}

.footer-newsletter input[type=text] {
  background-color: var(--light);
  color: var(--light);
  padding: 12px 20px;
  border: var(--border-width) var(--border-style) transparent;
  cursor: pointer;
  border-radius: 5px;
  text-transform: uppercase;
}

.footer-newsletter input[type=submit] {
  background-color: #0792cd;
  color: var(--light);
  padding: 12px 20px;
  border: var(--border-width) var(--border-style) transparent;
  cursor: pointer;
  border-radius: 5px;
  text-transform: uppercase;
}

.newsletter-badge { text-align: center}

input[type=submit]:hover {
  background-color: var(--hover);
  transition: all var(--transition) var(--ease);
}  

.footer-form { padding:20px 0}  

.footer-newsletter {
	background: #101010;
	margin-top: -180px;
	padding: 250px 30px 30px;
	color: var(--light);
	background-image: url("img/hero-btm.jpg");
	background-size:750px auto;
} 

.hero-mid-bio {
	max-width: 300px;
	margin: auto;
	color: #d5d5d5;
}

#post-articles {
	line-height: 1.5em;
	padding: 50px;
}

#post-articles h1 {
 	margin-bottom: 10px;
 }

article li {
	list-style: square;
	margin-left: 30px;
	margin-bottom: 15px;
}

.post-date {
	color: #666;
	margin-bottom: 20px;
}

a.url {	display: none}

.tab {
	overflow: hidden;
  	margin:20px auto 40px;
  	display: grid;
  	grid-template-columns: 1fr 1fr 1fr;
  	max-width: 490px;
}

.tab button {
  	border: none;
  	background: none;
  	border: 1px solid #fff;
  	background-color: #222;
  	border:1px solid #222;
  	outline: none;
  	cursor: pointer;
  	padding: 8px 10px;
  	transition: 0.3s;
  	border-radius: 5px;
  	margin: 10px ;
  	color: #fff;
  	font-size: .6rem;
  	font-family: 'Lato-Regular', sans-serif;
}

.tab button:hover {
    /*background-color: var(--hover);*/
    background-color: #424141;
    
}

  @media all and (min-width: 575px) {
	
	#page-header {
		display: grid;
		grid-template-columns: 1.5fr 1fr;
		margin: auto;
		grid-row-gap: 10px;
		grid-column-gap: 10px;
		padding:0;
	}

	.home-articles {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: auto;
    	grid-row-gap: 10px;
		grid-column-gap: 10px;
    	padding:0 60px;
	}
  
	.logo img {
		width: 250px;
		overflow: visible;
		height: auto;
		float: left;
		margin: 0;	
	}

	.logo { width: 380px; margin-top: 8px; margin-left: 5px} 
	
	.articles-list ul  {
	  	margin-top: 30px;
	  	display: grid;
	    grid-gap: 2em;
		grid-template-columns: 1fr 1fr 1fr;
	}
		
	.tab button {
	  	padding: 8px 25px;
	  	font-size: 1rem;
	}
		
}

.alignleft, .alignright, .img-left, .img-right {
  	display: block;
  	margin:20px auto 20px;
} 
    
@media all and (min-width: 875px) {
	 article, #page-footer { padding: 3.5rem}
	 .logo img {
	 	width: 350px;
	 }
	 .custom-menu-class { grid-area: menu; padding: 0px 20px 0}
	 h1 {
	  	font-size: 2.3rem;
	  	line-height: 2.3rem;
	  }
	  
.nav-links a { margin: 0}

	.alignright,	.img-right {
		float:right;
	  	margin-left: 2rem;
	  	margin-bottom: 10px;
	  } 
	  
	  .entry-content table{
	  	background: #fafafa;
	  	padding: 10px;
	  	margin: 40px auto;
	  	border: 1px solid #eee;
	  }
	   
	  .alignleft, .img-left {
	   	float:left;
	   	margin-right: 20px;
	  	margin-bottom: 10px;
	   } 
	     
     .footer-contact-grid {
     	display: grid;
     	grid-template-columns: 1fr 1fr;
     	margin: auto;
     	max-width: 800px;
     	grid-row-gap: 10px;
     	grid-column-gap: 10px;
     	text-align: left;
	  }  

	  .footer-contact-info { padding:30px 20px}
	  
	  .newsletter-details {
	  	display: grid;
	  	grid-template-columns: 1fr 1.5fr;
	  	grid-row-gap: 10px;
	  	grid-column-gap: 10px;
	  	font-size: .75rem;
	  	line-height: 1.5rem;
	  } 
  
      .hero-img { max-width: 230px; height:auto; margin-left: 60px; margin-top: 10px}
  	  .hero-txt { max-width: 270px; height:auto}
  
	  .home-articles {
  		display: grid;
	  	grid-template-columns: 1fr 1fr  1fr;
	  	margin: auto;
	  	grid-row-gap: 10px;
	  	grid-column-gap: 10px;
	  	padding:0 60px;
	  }
  
	 .home-hero-top {
	 	display: grid;
	 	grid-template-columns: 1fr 1fr;
	 	margin: auto;
	 	grid-row-gap: 10px;
	 	grid-column-gap: 10px;
	 }
 
	.hero-mid-set {
		display: grid;
		grid-template-columns: 1fr 2fr;
		margin: auto;
		grid-row-gap: 10px;
		grid-column-gap: 10px;
		font-size: .75rem;
		line-height: 1.2rem;
	 }
	 
} 

@media all and (max-width: 875px) {   
  .footer-contact {
  	max-width: 600px;
  	margin:0 auto;
  	padding: 20px;
  } 
  
  .menu { font-size: .7em}  
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

#content[tabindex="-1"]:focus {
  outline: 0;
}

.articles-page li {
	list-style: none;
	margin: 30px;
}
.display-posts-listing li {
	list-style: none;
	padding: 5px;
	background: #055070;	
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}

  @media all and (min-width:675px) {

.display-posts-listing li {
	list-style: none;
	padding: 5px;
	margin:10px ;
	background: #055070;	
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	width: 30%;
	float: left;
	height:360px;
}

.articles-page ul {
	margin-left: 10px;
}

}

#post-307 { padding: 0 0 40px 0 ;
	background-color: #108dc2;
	background-image: url("img/hero-mid.jpg");
	background-size:750px auto;	
	background-repeat:repeat-y;
} 

#post-307 h1{ display: none}
 	  
.clear {
	clear: both !important;
	display: block;
}	  	  
	  	  
.articles-page h2 {
	color: #fff;
	text-align: center;
	margin:40px 0;
	line-height: 1.3rem;
	font-size: 1.2rem;
	text-transform: uppercase;
}	

.display-posts-listing a.title {
	background: #fff;
	display: block;
	font-size: .8rem;
	line-height: 1.3rem;
	padding: 5px;
	color: #111;
	margin-top: -30px;
	margin-left: 10px;
	position: relative;
	margin-bottom: 10px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
}

.display-posts-listing  .excerpt {
	display: block;
	font-size: .8rem;
	line-height: 1.2rem;
	color: #fff;
	margin: 10px;
}

.excerpt-dash {	display: none}

.articles-menu {
	display: grid;
	grid-template-columns: 1fr  1fr;
	grid-column-gap: 20px;
	text-align: left;
	margin: 50px  auto;
	width: 240px;
}

.display-posts-listing .wp-post-image {
	width: 100%;
	filter: grayscale(100%);
}

time.updated, .comments-link {
	display: none;
}

img.home-article-img {
	width: 100%;
	height: auto;
}

.entry-footer a {
	background-color: #222;
	margin-right: 5px;
	padding: 10px;
	color: #fff;
}

.entry-footer svg, .tags-links {
	display: none;
}

.posted-on a, .cat-links a {
display: none;
}
.lead {
	font-size: 1.2rem;
	line-height: 2rem;
	color: #666;
}

.wp-caption-text {
	font-size: .8rem;
	color: #888;
	line-height: 1.2rem;
	text-align: center;
	margin-bottom: 10px;
}

blockquote { font-size: 2rem}

.current-menu-item a { color: var(--highlight)}

.current-menu-item:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 8px 0 8px;
	border-color: var(--highlight) transparent transparent transparent;
	margin:0 auto -8px; 
	color: var(--highlight);
	display: block;
}

.stats-table {
	background-color: rgba(0, 0, 0, 0.07);
	font-size: .75rem;
}
.stats-table td {padding: .3rem}
.stats-table tr:nth-child(even) {
	background-color: rgba(0, 0, 0, 0.025);
}
.stats-table td:nth-child(even) {
	background-color: rgba(0, 0, 0, 0.07);
}

.single .post__main ol > li, 
.single .post__main ul > li {
    margin-top: 1rem;
}
.single .post__main li > ul {
    padding: .5rem 2rem;
    background-color: #fff;
    font-size: .85rem;
	margin: .5rem 0;
}

.post ol, .post ul {margin-left: 1rem}
.post h3 {font-weight: 300;margin-top: 4rem; font-size: 1.5rem}
.post h4 {margin-top: 40px;font-size: 1.3rem;
margin-top: 3rem; }
.post h3 strong {font-weight: 500}

.email-success {
	background: red;
	padding: 100px;
}

.post .mivhak-code-wrapper {
	border: 1rem solid #202020 !important;
	border-radius: 7px !important;
}
.post .mivhak-code-wrapper .ace-ambiance .ace_scroller {box-shadow: none}
.post .mivhak-code-wrapper pre .ace_active-line, 
.post .mivhak-code-wrapper xhr .ace_active-line {
	border-top: 0;
	border-bottom: 0;
}
.post .ace-ambiance .ace_marker-layer .ace_active-line {
	background-color: rgba(243, 206, 15, .10);
}
.post .ace-ambiance .ace_gutter-layer, 
.post .ace-ambiance .ace_text-layer {
	background-image: none !important;
}

.post img {
	display: block;
	padding: 5px;
	background: #e1e9f1;
	border: 1px solid #ccc;
	box-shadow: 0 3px 5px rgba(0,0,0,.1);
	margin-bottom: 15px;
}

.author-bio {
	margin-top: 40px;
	background: #e1e9f1;
	border: 1px solid #ccc;
	padding: 1rem;
	box-shadow: 0 3px 5px rgba(0,0,0,.1);
	border-radius: 5px;
}

a.author-link {
	margin-top: 10px;
	display: block;
	display: none;
}

.author-description {
	margin-bottom: 10px;
}

.post img.alignleft {}

.post .header__tags {margin-left: 0}

.entry-content blockquote {
	padding: 1.5rem;
	color: #b94007;
	font-style: italic;
	font-size: 1.6rem;
	font-family: georgia, serif;
	line-height: 4rem;
}
.post blockquote p {margin-bottom: 0}

.quote-author {
	font-size: .8rem;
	text-align: right;
	color: #888;
}

.cat--xamarin {
	background-color: #b455b6;
	color: #fff;
}

.t-xamarin--accent {color: #b455b6}
.xamarin .grid__link, 
.t-xamarin {background-color: #b455b6}

.footer-form table {max-width: 100%}

pre {
	background: #111;
	color: #fff;
	padding: 20px;
	margin-bottom: 10px;
	word-wrap: break-word;
}

.chat {
	background: #111;
	color: #fff;
	font-family: var(--sans) !important;
	font-size: 1rem  !important;
	font-style: normal !important;
	color: #fff !important;
	padding: 20px;
	margin-bottom: 10px;
	word-wrap: break-word;
}

.lang-xml:before {
	content: "XML";
	float: right;
	color: lime;
	padding:0 10px ;
	background: #222;
}

.lang-csharp:before {
	content: "C Sharp";
	float: right;
	color: red;
	padding:0 10px ;
	background: #222;
}

.lang-html:before {
	content: "HTML";
	float: yellow;
	color: red;
	padding:0 10px;
	background-color: #222;
}

.statement{
	font-size: 1.2rem;
	text-align: center	
}

.divstyle { display:none}

.mystyle {
  /*background-color: #222 !important;*/
  /*border:1px solid #222 !important;*/
  background-color: transparent !important;
  border: 1px solid #fff !important;
}