/*
Theme Name: xLM
Theme URI: http://xlmsolutions.com
Author: sullivan leh designs
Author URI: http://sullivanlehdesigns.com
Description: custom theme for xLM Solutions
Version: 10.18
License: private. not for you.
Text Domain: xlm
*/

@import "css/normalize.css";
@import "css/textstyles.css";

/*--------------------------------------------------------------
css basic resets - separate from normalize
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
  	font-size: 16px;
	}
*, *:before, *:after {
	box-sizing: inherit;
	}
table {
	border-collapse: collapse;
	}
audio, canvas, iframe, img, svg, video {
	vertical-align: middle;
	}	
img {
	display: block;
	max-width: 100%;
	height: auto;
	}
iframe {
	width:100%;
	}
.wrapper, .foot-wrap {
	margin:0 auto;
	padding:1rem 1.5rem;
	}
.featherlight:last-of-type {
    background: rgba(0,0,0,.7)!important;
	}
a img {
	transition: all .2s ease-in-out;
	}
.item a img:hover,
.software-logos a img:hover {
	transform: scale(1.3); 
	}
a img.icon:hover {
	transform:scale(1.1);
	}
#logo a img:hover {
	transform: scale(1.1); 
	}
.home #logo a img:hover {
	transform: none;
	}
	
@media screen and (min-width: 500px) { 
	.wrapper, .foot-wrap{
		padding:1rem 3rem;
		}
}
@media screen and (min-width: 1200px) { 
	.wrapper, .foot-wrap{
		margin:1rem auto 0;
		max-width:1200px;
		padding:0;
		}
	}
#logo {
	margin-bottom:1rem;
	}
#logo img {
	width:9.375rem;
	}
#logo a {
	padding:0;
	}
	
#logo p {
	font-size:1rem;
	line-height:1.1;
	margin-top:.5em;
	color:#868484;
	padding-bottom:0;
	}
.icon {
	width:80%;
	height:auto;
	}		
@media screen and (min-width: 481px) {
	#page-header {
		
		}
	#logo {
		/*width:10rem;
		margin-right:1rem;*/
		flex:1 0 8rem;
		margin-bottom:0;
		}
	#logo img {
		width:100%;
		max-width:12rem;
		margin-bottom:1rem;
		}
	#main-nav {	
		}
	#logo p {
		font-size:1rem;
		line-height:1.1;
		margin-top:1em;
		color:#868484;
		padding-bottom:0;
		}	
}
@media screen and (min-width: 600px) {
	#page-header {
		
		display:grid;
		grid-template-areas:
		"logo logo nav nav nav find";
		margin-bottom:2rem;
		grid-template-columns: 3.125rem repeat(5, 1fr);
		grid-gap: 2rem;
		}
	#logo {
		grid-area:logo;
		}
	#logo img {
		width:100%;
		max-width:16rem;
		}
	#main-nav {	
		}	
}
/* Element settings */

figure {
	margin:0;
	}
.alignright {
	float:right;
	margin:0 0 1rem 2rem;
	}
.alignright:after, .alignleft:after, .group:after {
  content: "";
  display: table;
  clear: both;
	}
.alignleft {
	float:left;
	margin: 0 2rem 1rem 0;
	}
.aligncenter {
	margin:0 auto;
	display:block;
	}
.main-content img {
	border: 1px solid #ccc;
	position:relative;
	/* width:100%; */
	}
.main-content .blocks-gallery-item img {
	border:none;
	}
.main-content .columns img {
	}
.summary-image img, .intro-image img, .noborder, img.noborder{
	border:none;
	margin:1em 0;
	}
.summary-image img {
	max-height:6rem;
	}
.thumbnail {
	max-width:11rem;
	margin-bottom:1rem;
	}
.home section {
	margin-bottom: 1rem;
	}
@media screen and (min-width: 481px) {
	.home section {
		margin-bottom: 1rem;
	}
}
@media screen and (max-width: 480px) {
	.hero {
		background-image:none!important;
		margin-top:1rem;
		}
	.hero h1 {
		padding:1.5rem 1.5rem 2rem;
		color:#fff;
		}
	.hero.overlay {
		background-color:rgba(13,68,108,.9);
		}
	.cta {
		margin-top:1.5rem;
		}
	.software-logos img, .item img {
		max-width:10rem;
		}
}
/* image texture overlay */
.article-highlight-image img, .article-image img {
	z-index:-2;
	position:relative;
	border:none;
	}
.article-highlight-image, .article-image {
	align-self:center;
	}
.overlay{
	overflow:hidden;
	position:relative;
	background-color:rgba(13,68,108,.3);
	/*opacity:.2;*/
	}
.overlay img, img.overlay {
	z-index:1000;
	filter: grayscale(.5);
    mix-blend-mode: soft-light;
    width: 100%;
	}
.filler:before { /*used on archive page as an image replacement*/
	content:'';
	background-image:url('images/texture-white.png');
	background-size:cover;
	display:block;
	height:100%;
	opacity:0.6;
	z-index:1;
	position:absolute;
	left:0;
	right:0;
	width:100%;
	}
.overlay.light:before {
	opacity:0.2;
	}
.promotion.overlay{
	overflow:hidden;
	position:relative;
	background-color:#86171a;
	}
.promotion.overlay:before {
	content:'';
	background-image:url('images/texture-white.png');
	background-size:contain;
	display:block;
	height:100%;
	opacity:0.3;
	z-index:1;
	position:absolute;
	left:0;
	right:0;
	width:100%;
	}
.sidebar .promotion p {
	margin-left:0;
	}
body {
    /*content: '';
    background-image: url('images/xlm-connectedpattern-eaebea.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 60%;*/
	}	
/* for setting up*/	
.fake-image {
	border:1px solid #ccc;
	height:200px;
	width:100%;
	background-color:beige;
	text-align:center;
	font-size:.8em;
	padding:1rem 0;
	color:cadetblue;
	margin: 0;
	}
.divider {
	margin:2rem 0;
	border-top:2px solid #86171a;
	padding:2rem 0;
	}

/*** NAVIGATION ***/	
nav li {
	font-family:'Roboto',arial,helvetica,sans-serif;
	/*font-size:.875rem;
	line-height:1;*/
	font-weight:400;
	padding-bottom:.5rem;
	}
nav input[type="text"] {
	font-size:.75rem;
	}
@media screen and (min-width: 1000px) { 
	nav li {
		
		}
	nav input[type="text"] {
		font-size:.75rem;
		}
}
/*** NAVIGATION ***/
@media screen and (max-width: 480px) {
/* mobile nav button styling */
	.menu-toggle {
		border:1px solid #ccc;
		padding:.3rem .5rem 0;
		font-size:.75rem;
		float:left;
		height:2rem;
		margin-right:1rem;
		}
	.menu-toggle:hover,
	.menu-toggle:focus {
		color: #000;
		background-color:#ccc;
		}
	#menu-primary { /* hide the menu off screen and slide in when toggle is pressed */
		position: absolute;
		left: -300px;
		top: 0;
		height: 100%;
		overflow-y: scroll;
		overflow-x: visible;
		transition: left 0.5s ease,
		box-shadow 0.3s ease;
		z-index: 999;
		margin:0;
		padding:0;
		list-style-type:none;
		}
	#menu-primary li {
		}
	#menu-primary li a {
		padding:.6rem 1rem;
		display:block;
		}
	#menu-primary li:first-of-type {
		margin-top:3rem; /*move first link down from top edge */
		}
	#menu-primary li ul li:first-child {
		margin-top:0rem; /* reset for child links */
		}
		/* style second level links */
		#menu-primary li ul {
			padding:.5rem 0 0 1rem;
			list-style:none;
			}
		#menu-primary li ul li ul {
			padding:0;
			}
		#menu-primary li,
		#menu-primary li.menu-item-has-children,
		#menu-primary li.menu-item-has-children li.menu-item-has-children {
			border-top:1px solid #ccc;
			}
		#menu-primary li.menu-item-has-children li {
			border-top:none;
			}
		#menu-primary li.menu-item-has-children ul {
			padding-top:0;
			}
		#menu-primary .sub-menu ul.sub-menu li a {
			text-indent:-1.2em;
			margin-left:1.2em;
			}
		#menu-primary .sub-menu ul.sub-menu li a:before {
			content:'\2013'; /*code for en dash */
			padding-right:.5em;
			}
		#menu-primary li ul li a {
			padding:.5rem;
			}
	#menu-primary li a:hover {
		background-color:#ccc;
		}
	#menu-primary li ul {
		padding-bottom:0;
		}
	.menu-close {
		position: absolute;
		right: 0;
		top: 0;
		border:1px solid #ccc;
		padding:.5rem;
		font-size:.75rem;
		}
	.menu-close:hover{
		background-color:#ccc;
		}
	#menu-primary:target {
		left: 0;
		outline: none;
		-moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
		-webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
		box-shadow: 3px 0 12px rgba(0,0,0,.25);
		background: rgba(255,255,255,1);
		}
	#menu-primary:target .menu-close{
		z-index: 1001;
		}
	#menu-primary:target ul {
		position: relative;
		z-index: 1000;
		}
	/*	add colored overlay to the page behind nav */
	#menu-primary:target + .backdrop {
		position: absolute;
		display: block;	
		content: "";
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 998;
		background: #000;
		background: rgba(0,0,0,.6);
		cursor: default;
		}
	@supports (position: fixed) {
		#menu-primary ,
		#menu-primary:target + .backdrop {
			position: fixed;
			}
	}
}

/* larger than mobile screen*/
@media screen and (min-width: 481px) {
	.main-nav {
		z-index:1000;
		}
	.menu-toggle, .menu-close {
		display:none;
		}
	.main-nav li {
		display: block;
		float: left;
		padding: 1rem;
		position: relative;
		text-decoration: none;
		transition-duration: 0.5s;
		}
	.main-nav li:hover,
	.main-nav li:focus-within {
		cursor: pointer;
		}
	.main-nav li:focus-within a {
		outline: none;
		}
	.main-nav ul li ul { 
		background: rgba(255,255,255,.9);
		visibility: hidden;
		opacity: 0;
		min-width: 20ch;
		position: absolute;
		transition: all 0.5s ease;
		margin-top:0;
		left: 0;
		display: none;
		border:1px solid #ccc;
		}

	.main-nav ul li ul li ul {
		left:7rem;
		top:0;
		background:rgba(255,255,255,.9);
		z-index:100;
		border:1px solid #ccc;
		transition: all 0.5s ease;
		}
	.main-nav ul li:hover > ul,
	.main-nav ul li:focus-within > ul /*,
	.main-nav ul li ul:hover,
	.main-nav ul li ul:focus*/ {
		visibility: visible;
		opacity: 1;
		display: block;
		z-index:1000;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12),
            0 2px 4px 0 rgba(0,0,0,0.08);
            box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
            0 5px 15px 0 rgba(0,0,0,0.08);
		}
	.main-nav ul li ul li {
		clear: both;
		width: 100%;
		}		
	/* square box effect */
	.main-nav li.current_page_item a{
		color:#666;
		}
	.main-nav .menu > li  a::after { /*hover adds box behind to reinforce square graphic theme */
		position: absolute;
		top: .5rem;
		left:-1rem;
		right:0;
		width: 2em;
		height:2em;
		border: 1px solid #ccc;
		content: '';
		opacity: 0;
		-webkit-transition: -webkit-transform 0.6s, opacity 0.3s;
		transition: transform 0.6s, opacity 0.3s;
		z-index:-1;
		}
	.main-nav li.current_page_item a::after, /*box stays when you're in that section of the site*/
	.main-nav li.current_page_ancestor a::after {
		position: absolute;
		top: .5rem;
		left:-1rem;
		right:0;
		width: 2em;
		height:2em;
		background-color: #efefef;
		border: 1px solid #efefef;
		content: '';
		z-index:-1;
		opacity:1;
		}	
	.main-nav li a:hover::after,
	 .main-nav li.current-menu-item a::after,
	  .main-nav li.current-menu-ancestor a::after {
		opacity: 1;
		}	
	.main-nav li.current a:hover::after {
		border:1px solid #ccc;
		}
	.main-nav .menu .sub-menu li a::after {
		border:none;
		background-color:inherit;
		}	
}

@media screen and (min-width: 840px) {
	.main-nav ul li ul {
		padding:.5rem 1rem .5rem;
		}
	.main-nav ul li ul li:first-of-type {
		
		}
}

/* search input field */

#searchform label {
	display:none;
	}
#searchform {	
	display:flex;
	justify-content:space-between;
	transition: all 0.5s ease-out;
	margin-top:1rem;
	margin-bottom:0;
	}
@media screen and (min-width: 481px) {
	#searchform {	
		margin-top:0;
		}
}
#searchform:hover {
	
	}	
#searchform:focus-within {
	box-shadow: 0px 0.2em 2.5em #c4c4c4;
	-webkit-transform: scale(1.025);
	transform: scale(1.025);
	}
#searchform input {

	}
#searchform input#s {
	/*flex:4 0 0;
	flex:3 1 0;*/
	border: 1px solid #d3d3d3;
	padding:.3em 1em;
	height:2rem;
	padding:0 0 0 1em;
	}
#searchform #searchsubmit {
	background: url("images/search.png") no-repeat scroll center center;
	background-size:1.3rem;
	border: 1px solid #d3d3d3;
	cursor: pointer;
	width:2rem;
	padding:.5rem;
	padding:0 1rem;
	height:2rem;
	flex:1 0 0;
	flex:0 1 0;
	background-color:#efefef;
	margin:0;
	}
.social {
	display:none;
	}
@media screen and (min-width: 600px) {
	#main-nav {
		grid-area: nav;
		/*display: flex;
		justify-content: space-between;
		flex-wrap: wrap;*/
		}
	.main-nav .menu {
		/*flex: 3 0 0;*/
    	padding: 0;
    	margin: 0;
    	display: flex;
    	flex-wrap:wrap;
    	list-style-type:none;
		}
	.main-nav li {
		padding: 1rem 1rem 0 0;
		position: relative;
		text-decoration: none;
		transition-duration: 0.5s;
		}
	.main-nav li a {
		padding:1rem 1rem 0 0;
		}
	.find {
		grid-area:find;
		}
	#searchform {
		/*flex:1 0 0;*/
		}
	#searchform:hover {
		flex-basis:10rem;
		transition: all 0.5s ease-in-out;
		}
	.social {
		display:block;
		}
	.find .social a{
		font-size:.8em;
		}	
	.find .social a[href^="tel:"]:before {
		content: "\260e";
		margin-right: 0.5em;
		}
	.find .social  a[href*="twitter"]::before,
	.find .social a[href*="facebook"]::before,
	.find .social  a[href*="linkedin"]::before {
		content: '';
		display: inline-flex;
		width: 1rem;
		height: 1rem;
		margin-right: .2rem;
		align-self: baseline;
		}
	.find .social  a[href*="twitter"]::before {
		background: url('images/twitter.png') no-repeat;
		background-size: contain;
		}
	.find .social a[href*="facebook"]::before {
		background: url('images/facebook.png') no-repeat;
		background-size: contain;
		}
	.find .social  a[href*="linkedin"]::before {
 	   	background: url('images/linkedin.png') no-repeat;
 	  	background-size: contain;
		}
}
/*** FOOTER ***/	

#page-foot {
	background-color:#e4e5e6;
	margin-top:3rem;
	padding-top:1rem;
    content: '';
    background-image: url('images/xlm-connectedpattern-eaebea.png');
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: calc(100% - 20px) calc(100% - 10px); 
	}

footer a {
	font-weight:400;
	}
a[href^="tel:"]:before {
	content: "\260e";
	margin-right: 0.5em;
	}
footer a[href*="twitter"]::before {
    content: '';
    display: inline-flex;
    background: url('images/twitter.png') no-repeat;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: .5rem;
    background-size:contain;
    vertical-align: top; 
	}
		
footer a[href*="facebook"]::before {
	content: '';
    display: inline-flex;
    background: url('images/facebook.png') no-repeat;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: .5rem;
    background-size:contain; 
    vertical-align: top; 
	}
footer a[href*="linkedin"]::before {
	content: '';
    display: inline-flex;
    background: url('images/linkedin.png') no-repeat;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: .5rem;
    background-size:contain;
    vertical-align: top;
	}
.copyright {
	background-color:#86171a;
	padding-bottom:2rem;
	}

@media screen and (min-width: 481px) {		
	#page-foot .foot-wrap {
			grid-area: related;
		display:grid;
		grid-gap:2rem;
		grid-template-columns:3.125rem repeat(5, 1fr);	
		grid-template-areas:
		". social social contact contact contact"
		". foot-nav foot-nav foot-nav foot-nav foot-nav"
		". . . text text text";
		}
	.social {
		grid-area:social;
		}
	.quick-contact {
		grid-area:contact;
		}	
	.copyright {
		}
	 .copyright .text {
	 	grid-area: text;
	 	}
	 .copyright .text p {
	 	padding:.5rem 0 0 0;
	 	}	
	.social p{
		display:inline;
		margin-right:1.5rem;
		}
	#foot-nav {
		grid-area:foot-nav;
		}
}	
	
/* LAYOUTS */

/* mobile and non grid styles */	
.article-link {
	border-top:1px solid #666;
	padding-top:.5rem;
	margin-top:1rem;
	}
.grandchild-page .child-summary-image {
	float:right;
	margin-left:2rem;
	max-width:10rem;
	}		
@media screen and (min-width: 481px) {	
.summary-image img, .intro-image img, .noborder, img.noborder {
    margin: 0;
    align-self:center;
}
/* global main content grid settings */
	.title {
		grid-area: title;
		align-self: end;
		}	
		h1.title  {
			margin:0;
			padding:0;
			border-bottom: 1px solid #ccc;
			padding-bottom: .2em;
			}
	.summary-image {
		grid-area:summary-image;
		margin-left:4.125rem;
		}
	.intro {
		grid-area:intro;
		align-self:end;
		}
	.main-content { 
		/* sidebar in same container as content plus allows promotions to break into logo column */
		grid-area:main;
		display:grid;
		grid-template-columns:3.125rem repeat(5, 1fr);
		grid-gap:2rem;
		grid-auto-rows: minmax(100px, auto);
		grid-template-areas:
		"sidebar sidebar content content content content";
		margin-top:1rem;
		}	
	.content {
		grid-area:content;
		}	
	.sidebar {
		grid-area:sidebar;
		padding-top: 10vh;
		}		
	.main-content .side-link, 
	.sidebar .button, 
	.sidebar p, 
	.sidebar h5, 
	.sidebar h4, 
	.sidebar ul { 
		/* leave logo column blank */
		margin-left:4.125rem; 
		}	
	.columns {
		display:flex;
		margin-bottom:1.2rem;
		}
	.column {
		flex-grow:1;
		flex-basis:0;
		margin-right:2rem;
		}	
	.column:last-of-type {
		margin-right:0;
		}
	.column h1, .column h2,.column h3,.column h4 {
		
		}
	.column > p {
		margin-top:1.2rem;
		}
/* pages */
	.page .article-area { 
		/* summary and summary image above title plus intro image */
		display:grid;
		grid-template-columns:3.125rem repeat(5, 1fr);
		grid-template-areas:
		". summary-image title title title title"
		". intro intro intro intro-image intro-image"
		"main main main main main main"
		". . related related related related";
		grid-gap: 1rem;
		}
	.page .two-column {
		columns: 2 35ch;
		column-gap:1em;
		}	
	.two-column h1, .two-column h2, .two-column h3, .two-column h4 {
		column-span:all;
		}
	.intro-image {
		grid-area:intro-image;
		max-height:15rem;
		display:flex;
		justify-content:center;
		}
	.page .related {
		grid-area: related;
		display:grid;
		grid-template-columns: 2fr 2fr;
		grid-gap:2rem;
		}
	.page .related-content {
		}
/* child page overview shown on parent page */
	.divider {
		display:grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 1rem;
		grid-template-areas: 
		"title title summary-image overview-image overview-image"
		"summary summary summary overview-image overview-image"
		"content content content overview-image overview-image";
		}
	.divider .child-title {
		grid-area:title;
		align-self:center;
		border-top:0;
		padding:0;
		margin:0;
		}
	.divider .child-summary {
		grid-area:summary;
		align-self: center;
		padding: 0;
		margin:0;
		}
	.divider .child-summary-image {
		grid-area: summary-image;
		align-self: center;
		}
	.child-summary-image img {
		object-fit: contain;
 		width: 100%;
  		max-height: 100%;
		}	
	.divider .child-content {
		grid-area: content;
		}
	.divider .child-overview-image {
		grid-area:overview-image;
		}
/* single posts */
	.single .article-area { 
		/* post meta above title, intro is excerpt */
		display:grid;
		grid-template-columns:3.125rem repeat(5, 1fr);
		grid-template-areas:
		". . . date author author"
		". . title title title title"
		". intro intro intro intro-image intro-image"
		"main main main main main main"
		". . related related related related"
		". . postnav-prev postnav-prev postnav-next postnav-next"
		". . comments comments comments comments";
		grid-gap: 1rem;
		}
	.single .post-date {
		grid-area:date;
		}	
	.single .post-author {
		grid-area:author;
		}
	.single .related {
		grid-area: related;
		display:grid;
		grid-template-columns: 2fr 2fr;
		grid-gap:2rem;
		}
	.single .related-content {
		}

	.post-nav-prev {
		grid-area:postnav-prev;
		border-top: 1px solid #555;
		padding-top: .3rem;
		margin-top: 2em;
		}
	.post-nav-next {
		grid-area:postnav-next;
		border-top: 1px solid #555;
		padding-top: .3rem;
		margin-top: 2em;
		}
	.comments {
		grid-area:comments;
		}
/* archives */
	.archive .article-area { 
		/* no summary image, highlight is for most recent post */
		display:grid;
		grid-template-columns:3.125rem repeat(5, 1fr);
		grid-template-areas:
		". . . summary summary summary"
		". . title title title title"
		". highlight-image highlight-image highlight-content highlight-content highlight-content"
		"main main main main main main"
		". . postnav-prev postnav-prev postnav-next postnav-next";
		grid-gap: 1rem;
		}
	.article-highlight-image {
		grid-area:highlight-image;
		}
	.article-highlight-content {
		grid-area:highlight-content;
		align-self: end;
		margin-top:1rem;
		}
	.archive .main-content { /* archives don't have sidebar */
		grid-area:main;
		display:grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap:2rem;
		grid-auto-rows: minmax(100px, auto);
		margin-left:4.125rem;
		justify-content:end;
		}
	.article-link {
		border:none;
		}
		/* auto flow each into 2 columns */
		.article-link:nth-child(odd) {
			grid-column:2/4;
			} 
		.article-link:nth-child(even) {
			grid-column:4/6;
			}
	.article-link heading { 
		/* layout image and meta */
		display:grid;
		grid-template-columns:2fr 1fr;
		grid-gap:1rem;
		align-self: end;
		}
		.article-link heading .article-image {
			grid-column:1/2;
			height:10rem;
			}
		.article-link heading .meta-container {
			grid-column:2/3;
			align-self: end;
			}
		.meta-container p.meta:last-of-type {
			padding-bottom:0; 
				/* text aligns with bottom of picture */
			}
	.article-link .content { 
		/* give same gutter as grid */
		margin-top:1rem;
		}
	.atmosphere { 
		/* for an image put in after every x posts to break up grid */
		grid-column:1/4;
		background-color:#ccc;
		}	
	.archive h1.title {
		color:#666;
		
		}
	.archive h1.title span {
		color:#86171a;
		text-transform:capitalize;
		}
	.archive .resource-type p {
		padding:0; 
		margin:0;
		}
	.archive .resource-type a {
		border:none;
		text-transform:uppercase;
		font-size:.8rem;
		letter-spacing:.1em;
		color:#666;
		}	
		
/*home */
.hero h1 {
	color:#fff;

	}
.hero {
	background-size:contain;
	z-index:1;
	background-repeat: no-repeat;
	min-height:60vh;
	background-color:rgba(13,68,108,.6);
	}
@media screen and (min-width: 600px) {
	.hero h1 {
		color:#fff;
		max-width:60ch;
		margin: 8vh 8vh 0;
		line-height:1.1;
		font-size:7vh;
		text-shadow: 2px 4px 3px rgba(0,0,0,0.3)
		}
	.hero {
		background-size:cover;
		z-index:1;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-blend-mode:multiply;
		}		
}	
	.home .article-area { 
		display:grid;
		grid-template-columns:3.125rem repeat(5, 1fr);
		grid-template-areas:
		"hero hero hero hero hero hero"
		". single single single single single"
		". . call-1 call-1 call-1 ."
		". first first first first first"
		". . call-2 call-2 call-2 ."
		". pro-image pro-image pro-image pro pro"
		". events events home-blog home-blog home-blog"
		". tweet tweet home-blog home-blog home-blog"
		". promotion promotion home-blog home-blog home-blog";
		grid-gap:2rem;
		}
	.call-1 {
		grid-area:call-1;
		}
	.call-2 {
		grid-area:call-2;
		}
	.call-1,
	.call-2 {
	    border: 1px solid #dcdbdb;
    	background-color: #efefef;
   		padding: 2rem 3rem .5rem;
		}
	.home .hero {
		grid-area: hero;
		}
	.hero .info {
		display:flex;
		justify-content:center;
		align-items:center;
		align-content:flex-end;
		transition: all .2s ease-in-out;
		}
	.info h2 {
		background-color:rgba(255,255,255,.8);
		padding:1em;
		margin:1em;
		text-align:center;
		position: relative;
		transition: all .2s ease-in-out;
		}
	.info h2 a {
		color:#86171a;
		transition: all .2s ease-in-out;
		}
	.info h2 a:hover {
		color:#222;
		}
	.info h2:hover 	{
		background-color:rgba(255,255,255,1);
		}

	.info h2:after, .info h2:before {
		top: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		}
	.info h2:after {
		border-color: rgba(82, 49, 213, 0);
		border-width: 24px;
		margin-left: -24px;
		}
	.info h2:before {
		border-color: rgba(255, 255, 255, 0);
		border-top-color: #ffffff;
		border-top-color: rgba(255, 255, 255, .8);
		border-width: 27px;
		margin-left: -27px;
		}
	.info h2:hover:before {
		border-top-color: rgba(255, 255, 255,1);
		}	
	.software-sell {
		grid-area:first;
		display:grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap:2rem;
		margin-left:4.125rem;
		grid-template-areas:
			"first first-logos first-content first-content first-content";
		}
		.software-sell .content {
			grid-area: first-content;
			}
		.software-logos {
			grid-area:first-logos;
			}
		.software-sell .cta {
			grid-area:first;
			}
	.plm-services {
		grid-area:single;
		display:grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap:2rem;
		grid-template-areas:
			"art-header art-header art-header art-header art-header"
			"art-content art-content art-content art-content art-content"
			"art-footer art-footer art-footer art-footer .";
		}
		.plm-services .article-header {
			grid-area:art-header;
			}
		.plm-services .items {
			grid-area:art-content;
			display:grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap:2rem;
			}
		.plm-services .item.products {
			display:grid;
			grid-gap:2rem;
			grid-column: 2 / span 2;
			margin-bottom:2rem;
			grid-template-columns: 1fr 1fr;
			border:1px solid #ccc;
			padding:2rem;
			}
@media screen and (min-width: 840px) {
		.plm-services .items {			
			display:grid;
			grid-template-columns: repeat(5, 1fr);
			grid-gap:2rem;
			}
		.plm-services .item.products {
			margin-top:-3rem;
			grid-template-columns:1fr;
			padding:0;
			grid-column: 5/ span 1;
			border:none;
			}
		.plm-services .item.products h6 {
			display:none;
			}	
	}
	.plm-services .article-footer {
		grid-area:art-footer;
		}
	.plm-services footer a{
		font-weight:700;
		}
	.products img {
		margin-bottom:2rem;
		border-bottom:1px solid #ccc;
		padding-bottom:1rem;
		max-width:10rem;
		transition: all .2s ease-in-out;
		}
	.products img:last-of-type {
		margin-bottom:0;
		padding-bottom:0;
		border-bottom:none;
		}
	.pro-services {
		grid-area:pro;
		}
	.pro-image {
		grid-area:pro-image;
		}
	.content {
		}
	.promotion {
		grid-area:promotion;
		}
	.home .promotion {
		margin-top:0;
		}
	.events {
		grid-area:events;
		}
	.twitter {
		grid-area:tweet;
		}
	.news {
		grid-area:news;
		}
	.home-blog {
		grid-area:home-blog;
		display:grid;
		grid-template-columns:repeat(3, 1fr);
		}
	.section-title {
		grid-column: 1 / span 3;
		}
	.blog-title {
		grid-column: 1 / 4;
		}
	.blog-content {
		 grid-column:2/4;
		}	
	.blog-image {
		 grid-column:2/4;
		}
	.blog-meta {
		 grid-column: 1/2;
		}
}