/* Keep Footer at the bottom */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
footer {
  margin-top: auto;
}

footer p{
    white-space: pre;
	font-family: 'Open Sans', sans-serif;
}
footer i{
    padding-right: 10px;
    font-size: 14px;
    color: #4080c0;
}

footer p a{
	color: #4080c0;
}

/* border-box */
.border-box, a, article, aside, blockquote, body, code, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], legend, li, main, nav, ol, p, pre, section, table, td, textarea, th, tr, ul {box-sizing: border-box;}

/* fonts */
.sans-serif { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; text-rendering: optimizeLegibility; }
.fw4{ font-weight: 400; }
.font-lead{ font-size:1.2rem; }
.lh-lead { line-height: 1.2rem; }
.font-copy{ font-size: 1rem; }
.lh-copy{ line-height: 1.4rem; }

/* link */
a { background-color: transparent; }
.link { text-decoration: none; }
.link, .link:active, .link.active, .link:focus, .link:hover, .link:link, .link:visited { transition: color .15s ease-in;}
.link:focus, main a:focus, footer a:focus{ color: #D73B00; outline: 2px dotted #D73B00; }
main nav {
	border-bottom: 1px solid #4080c0;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
nav .active a, main a{ text-decoration: none; color: #4080c0; }
main a:hover{ text-decoration: underline; }
footer a{ text-decoration:underline; color: #333; }
footer a:hover{ color: #D73B00; }

/* list */
.list { list-style-type: none; }

/* Layouts */
.flex{ display: flex; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.db{ display:block; }
.dib{ display: inline-block; }
.dn{ display: none; }
.overflow-hidden{ overflow: hidden; }
@media (min-width: 768px) {
	.grid{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-column-gap: 1rem;
	}
}

/* Position */
.fixed{ position:fixed; }
.relative{ position:relative; }
.absolute{ position: absolute; }

/* Absolute */
.top-0{ top: 0; }
.left-0{ left: 0; }
.right-0{ right: 0; }
.bottom-0{ bottom: 0; }

/* margins */
.ma0{ margin: 0 0 0 0; }
.ma1{ margin: .1rem; }
.ma2{ margin: .5rem; }
.ma3{ margin: 1rem; }
.ma4{ margin: 2rem; }
.ma5{ margin: 5rem; }
.mt0{ margin-top: 0; }
.mt1{ margin-top: .1rem; }
.mt2{ margin-top: .5rem; }
.mt3{ margin-top: 1rem; }
.mt4{ margin-top: 2rem; }
.mt5{ margin-top: 5rem; }
.mt6{ margin-top: 8rem; }
.mb0{ margin-bottom: 0; }
.mb1{ margin-bottom: .1rem; }
.mb2{ margin-bottom: .5rem; }
.mb3{ margin-bottom: 1rem; }
.mb4{ margin-bottom: 2rem; }
.mb5{ margin-bottom: 5rem; }
.mt6{ margin-top: 8rem; }
.ml0{ margin-left: 0; }
.ml1{ margin-left: .1rem; }
.ml2{ margin-left: .5rem; }
.ml3{ margin-left: 1rem; }
.ml4{ margin-left: 2rem; }
.ml5{ margin-left: 5rem; }
.ml6{ margin-left: 8rem; }
.mr0{ margin-right: 0; }
.mr1{ margin-right: .1rem; }
.mr2{ margin-right: .5rem; }
.mr3{ margin-right: 1rem; }
.mr4{ margin-right: 2rem; }
.mr5{ margin-right: 5rem; }
.mr6{ margin-right: 8rem; }

/* paddings */
.pa0{ padding:0 0 0 0; }
.pa1{ padding: .1rem; }
.pa2{ padding: .5rem; }
.pa3{ padding: 1rem; }
.pa4{ padding: 2rem; }
.pa5{ padding: 5rem; }
.pl0{ padding-left: 0; }
.pl3{ padding-left: 1rem; }
.pr3{ padding-right: 1rem; }

/* colors */
.primary,.hover-primary:hover{ color: #4080c0; } /* #D73B00 */
.bg-primary{ background-color: #4080c0; }
.b--primary{ border-color: #4080c0; }

.dark{ color: #333; }
.bg-light{ background: #f5f5f5; }
.b--light{ border-color: #f5f5f5; }

/* border */
.bt{ border-top-style: solid; }
.bw1{ border-width: .1rem; }
.bw2{ border-width: .2rem; }
.bw5{ border-width: .5rem; }

/* width */
.w-100{ width: 100%; }


/**************************
*  Content Elements  *
**************************/

.mainnav{
	width: 70%;
	position: absolute;
	right: 0;
}
.burgerbutton{
	display: inline-block;
	font-size: 2rem;
	width: 100%;
	text-align: right;
	padding: 2rem;
	box-sizing: border-box;
}
.menu {
   	max-height: 0; /* hide menu completely when burger unchecked */
	margin: 0px;
	text-align: right;
	padding-right: 1rem;
	padding-bottom: 1rem;
	overflow:hidden;
	position: relative;
	z-index: 1;
	font-size: 1.5rem;
}
.burgerbutton, .menu{
    transition:all .2s ease;
}
.menu a{
	color: #fff;
}
#burger:checked ~ .menu {
	max-height: 200%;
	background: #333;
}
#burger:checked ~ .burgerbutton {
	color: #fff;
	background: #333;
}
@media (min-width: 50em) {
	.mainnav{
		position: relative;
		width: auto;
	}
	.burgerbutton{
		display: none;
	}
	.menu{
		display: flex;
		font-size: inherit;
		max-height: inherit;
		margin: 2rem 0 0 0;
		padding-right: 0;
		padding-bottom: 0;
	}
	.menu a{
		color: #333;
	}
}
.logo-round{
	background: #333;
	height: 70px;
	width: 70px;
	display: block;
	color: #fff;
	text-decoration: none;
	line-height: 70px;
	border-radius: 50%;
	font-weight: 500;
	font-size: 2rem;
	text-align: center;
}
.logo-classic{
	background: #333;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	font-size: 2rem;
	text-align: center;
	padding: 5px 15px;
	display: inline-block;
	margin-top: .6rem;	
}
.logo-pure{
	background: transparent;
	color: #333;
	text-decoration: none;
	font-weight:900;
	font-size:2rem;
	padding: 5px 0;
	display: inline-block;
	margin-top: .6rem;
}
.logo-image{
	max-width: 250px;
	max-height: 80px;
}

h1{ font-size: 3rem; line-height: 3.3rem; margin-top: 2.5rem; text-align: center;}
h2{ font-size: 2rem; line-height: 2.3rem; margin-top: 3.2rem;}
h3{ font-size: 1.6rem; line-height: 1.4rem; margin-top: 2.8rem;}
h4{ font-size: 1rem; line-height: 1.2rem; margin-top: 2.2rem;}
h5{ font-size: .9rem; line-height: 1rem; margin-top: 1.4rem; text-transform: uppercase; }
h6{ font-size: .9rem; line-height: 1rem; margin-top: 1.4rem; text-transform: uppercase; font-weight:100; }

article p{
	line-height: 1.5;
}
article a, article a:link, article a:visited{
	text-decoration: none;
	color: #D73B00;
}
article a:active, article a:focus, article a:hover{
	text-decoration: underline;
}
article ul, article p, article blockquote, article pre, article table, article dl, article img{
	margin: 1.7em 0;
}
article ul, article ol{
	padding-left: 15px;
}
article ul li{
	list-style: none;
}
article ul li::before {
	content: '\25CF'; 
	color: #D73B00;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
	/* float: left; */
}
pre,code{ 
	background-color: #272822;
	color: #f8f8f2;
}
code{
	display: inline-block;
	padding: 0 0.5em;
	font-size: 0.8em; 
	line-height: 1.4em;	
	border-radius: 2px;	
	word-break: break-all;
}
pre{
	white-space: pre;
	padding: 16px;
	display: block;	
	max-width: 100%;
	border-radius: 2px;
	overflow-x: auto;
	box-sizing: border-box;
}
pre > code{
	font-size: 0.8em;
}
code.hljs{ background: transparent; }
blockquote{
	position: relative;
	font-family: times new roman,serif;
	font-size: 1.8em;
	font-style: italic;
	z-index: 2;
}
blockquote:before {
	content: '\201C';
	position: absolute;
	top: -0.25em;
	left: -0.25em;
	color: #ddd;
	font-size: 4em;
	z-index: -1;
	font-family: times new roman,serif;
	line-height: 1em;
}
table{
	width: 100%;
	border-collapse: collapse;
}
thead{
	border-bottom: 1px solid #e3e3e3;
	border-top: 1px solid #e3e3e3;
	background: #f5f5f5;
	font-weight: 700;
	text-align: left;
}
/* tbody{} */
/* tr{} */
/* tr:nth-child(odd){ } */
tr:nth-child(even){ 
	background-color: #f5f5f5;
}
td,th{ padding: 5px;}
dl{
	border-top: 1px solid #D73B00;
	border-bottom: 1px solid #D73B00;
	padding: 0.5em 0;
	box-sizing: border-box;
}
dt,dd{
	width: 100%;
	margin: 0;
	padding: 3px 5px;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
}
dt{
	font-weight: 700;
}
dt::after{
	content: ":";
}
dd{
	width: 80%
}
hr{
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.left{float:left;}
.right{float:right;}
.center{margin:auto;}

/************************
*  		IMAGES  		*
************************/

img, figure, figure img {
    max-width: 100%;
}
figure {
    display: table;
    margin: 2em auto;
    padding: 0;
}
figure.left {
    width: auto;
    float: left;
    margin: 0 2em 2em 0;
}
figure.right {
    width: auto;
    float: right;
    margin: 0 0 2em 2em;
}
figcaption {
    display: table-caption;
    caption-side: bottom;
    font-size: 0.8em;
    margin-top: .5em;
    line-height: 1.2em;
}
figure img {
    display: block;
    margin: auto;
	width: auto;
	height: auto;
	border-radius: 10px;
}
img{
	max-width:100%;
}
img.left{
	margin: 0 1.7em 1.7em 0;
}
img.right{
	margin: 0 0 1.7em 1.7em;	
}
img.middle{
	margin: auto;
	display: block;
}
 
/************************
*  	TABLE OF CONTENTS 	*
************************/

ul.TOC,.TOC ul{
	list-style: none;
	padding-left: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.TOC li:before{
	content: "\2192";
	margin-left: -7px;
	margin-right: 7px;
}
.TOC li.h1:before{
	content: "";
}
ul.TOC{
	background: #f5f5f5;
	width: 100%;
	padding: 20px;
	box-sizing:border-box;
}
li.h1{
	font-weight: 700;
	height: auto;
}
li.h2, li.h3, li.h4, li.h5, li.h6
{
	font-weight: 400;
	padding-left: 25px;	
	height: auto;
}


/*******************
* Headline anchors *
*******************/

h1,h2,h3,h4,h5,h6{
	position:relative;
}
a.tm-heading-anchor {
    position: absolute;
    top: 0;
	left: -0.8em;
	width: 0.8em;
	font-weight: 300;
    opacity: .5;
    text-decoration: none;
}
a.tm-heading-anchor:hover,a.tm-heading-anchor:focus {
    text-decoration: none;
}
h2:focus > .tm-heading-anchor, 
h2:hover > .tm-heading-anchor, 
h3:focus > .tm-heading-anchor, 
h3:hover > .tm-heading-anchor, 
h4:focus > .tm-heading-anchor, 
h4:hover > .tm-heading-anchor,
h5:focus > .tm-heading-anchor, 
h5:hover > .tm-heading-anchor,
h6:focus > .tm-heading-anchor, 
h6:hover > .tm-heading-anchor{
	opacity: 1;
	text-decoration: none;
}

/************************
*  	DOWNLOAD LINKS 		*
************************/

a.tm-download
{
	line-height: 35px;
	margin-left: 40px;
}
a.tm-download::before{
	content: '\2193';
	position: absolute;
	margin-left: -40px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-family: Calibri, "Segoe UI", Roboto, Courier, Helvetica, -apple-system, BlinkMacSystemFont, sans-serif, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 1.3em;
	font-weight: 900;	
	border-radius: 50%;
	border: 2px solid;
	border-color: #D73B00;
	text-align: center;
	text-decoration: none;
}
a.tm-download:hover::before{
	text-decoration: none;
	color: #fff;
	background: #D73B00;
}


/************************
*  		NOTICE 			*
************************/

.notice1 {
    margin: 1em 0;
    padding: 10px 1em;
	background-color: #ffded4;
	border-left: 4px solid #f65a3c;    
}
.notice2 {
    margin: 1em 0;
    padding: 10px 1em;
	background-color: #fff3d4;
	border-left: 4px solid #f6b73c;    
}
.notice3,
.notice4,
.notice5,
.notice6 {
    margin: 1em 0;
    padding: 10px 1em;
    background-color: #d4e0ff;
    border-left: 4px solid #3c7bf6;	
}

/*******************
* youtube videos   *
*******************/

.video-container{
	position: relative;
	text-align: center;
}
img.youtube{
	position: relative;
	max-width: 560px;
}
button.play-video { 
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	height: 100px;
	width: 100px;
	background: #e0474c;
	color: #FFFFFF;
	border-radius: 50%;
	border: 0px;
	padding: 0;
	text-align: center;
}
button.play-video:hover {
	background: #cc4146;
	cursor: pointer;
}
button.play-video::after {
	position: absolute;
	top: 50%;
	margin: -20px 0 0 -15px;
	height: 0;
	width: 0;
	border-style: solid;
	border-width: 20px 0 20px 40px;
	border-color: transparent transparent transparent rgba(255, 255, 255, 0.75);
	content: ' ';
}


/**************
* Contactform *
**************/

.tm-contactform form{
	width: 100%;
	border: none;
	margin: 20px 0 20px 0;
	padding: 0 0 0 0;
}
.tm-contactform fieldset{
	width: 100%;
	border: none;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.tm-contactform label{
	width: 100%;
	display: block;
	color: #333;
}
.tm-contactform input, .tm-contactform textarea{
	width: 100%;
	display: block;
	border: 1px solid #ddd;
	padding: 15px;
	margin: 0 0 20px 0;
	background: #f5f5f5;
}
.tm-contactform input:focus, .tm-contactform  select:focus, .tm-contactform  textarea:focus{
	outline: none;
	border: 1px solid rgba(229, 226, 211, 1);
	box-shadow: 0 0 2px #D73B00;;
}
.tm-contactform input[type="submit"]{
	cursor: pointer;
	color: #fff;
	background: #D73B00;
}
.tm-contactform input[type="submit"]:hover{
	background: rgba(232, 99, 78, 0.8);
}
.tm-contactform .personal-mail{
	height: 0px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	border: none;
}

@media (min-width: 50em) {
	.dn-l{ display:none; }
	.db-l{ display:block; }
	.dib-l{ display: inline-block; }
	.mt4-l{ margin-top: 2rem; }
	.mt5-l{ margin-top: 5rem; }
	.mt6-l{ margin-top: 8rem; }
	.mb4-l{ margin-bottom: 2rem; }
	.mb5-l{ margin-bottom: 5rem; }
	.mb6-l{ margin-bottom: 8rem; }
	.flex-l{ display:flex; }
	.fw1-l{ font-weight: 100; }
	.fw2-l{ font-weight: 200; }
	.font-lead{ font-size:1.2rem; }
	.lh-lead { line-height: 2.4rem; }
	.font-copy{ font-size: 1.2rem; }
	.lh-copy{ line-height: 1.8rem; }
	.w-30-l{ width: 30%; }
	.mw-800-l{ max-width: 1020px; }
	.mauto-l{ margin-left:auto; margin-right:auto; }
}

/*****/
#e-solutions---make-it-better {
	font-family: 'Reem Kufi', sans-serif;
}