/*   Y O U R   C S S   S T Y L E S

** Add your CSS styles here
** Style all markdown content elements properly
** Use the markdown test file to check it: https://github.com/typemill/typemill/blob/master/content/00-Welcome/03-Markdown-Test.md
** You can activate and use the Tachyons CSS library: https://typemill.net/theme-developers/helper-functions#activate-tachyons

*/


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

/* 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.6rem; }
.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; }
nav .active a, main a{ text-decoration: none; color: #D73B00; }
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; }

/* 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: #D73B00; }
.bg-primary{ background-color: #D73B00; }
.b--primary{ border-color: #D73B00; }

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

/* border */
.bt{ border-top-style: solid; }
.bw1{ border-width: .1rem; }
.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: 1.8rem; line-height: 2rem; margin-top: 2.5rem;}
h2{ font-size: 1.6rem; line-height: 1.8rem; margin-top: 3.2rem;}
h3{ font-size: 1.4rem; line-height: 1.6rem; 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 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: "•"; 
	color: #D73B00;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
	float:left;
}
pre,code{ 
	background-color: #333;
	color: #fff;
}
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;
}
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;
}
.tm-table {
    overflow-x: auto;
}
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%;
	height: auto;
	aspect-ratio: attr(width) / attr(height);
}
figure {
    display: table;
    margin: 2em auto;
    padding: 0;
}
figure.right, figure.left {
    width: auto;
    float: none;
    margin: auto auto;
}
figcaption {
    display: table-caption;
    caption-side: bottom;
    font-size: 0.8em;
    margin-top: .5em;
    line-height: 1.2em;
}
figure img {
    display: block;
    margin: auto;
}
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 *
*******************/

a.tm-heading-anchor {
	display:  inline-block;
	margin-left:  -0.8em;
	width: 0.8em;
	font-weight: 300;
    opacity: .5;
    text-decoration: none;
    float: right;
}
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{}
a.tm-download::before{
	content: "\2193";
  	-webkit-mask: url("data:image/svg+xml; utf8, <svg width='24' fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM11 8v5.586l-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l4 4c0.092 0.092 0.202 0.166 0.324 0.217 0.245 0.101 0.521 0.101 0.766 0 0.118-0.049 0.228-0.121 0.324-0.217l4-4c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293v-5.586c0-0.552-0.448-1-1-1s-1 0.448-1 1z'></path></svg>") no-repeat 50% 50%;
  	mask: url("data:image/svg+xml; utf8, <svg width='24' fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM11 8v5.586l-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l4 4c0.092 0.092 0.202 0.166 0.324 0.217 0.245 0.101 0.521 0.101 0.766 0 0.118-0.049 0.228-0.121 0.324-0.217l4-4c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293v-5.586c0-0.552-0.448-1-1-1s-1 0.448-1 1z'></path></svg>") no-repeat 50% 50%;
  	-webkit-mask-size: cover;
  	mask-size: cover;
	background-color: currentColor;	
	display: inline-block;
	margin-right: 5px;
	width:  24px;
	height: 24px;
	text-decoration: none;
	vertical-align: middle;
}
a.tm-download:hover::before{
	text-decoration: none;
}


/************************
*  		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: ' ';
}


/**************
* 	Forms 	  *
**************/

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

@media (min-width: 40em) {
	figure.right {
	    width: auto;
	    float: right;
	    margin: 0 0 2em 2em;
	}
	figure.left {
	    width: auto;
	    float: left;
	    margin: 0 2em 2em 0;
	}
}

@media (min-width: 50em) {

	h1{ font-size: 3rem; line-height: 3.3rem; margin-top: 2.5rem;}
	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; }
	a.tm-heading-anchor { float:left; }
	.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.6rem; }
	.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: 800px; }
	.mauto-l{ margin-left:auto; margin-right:auto; }
}