/*
=====================================================================
*   MTC v1.0 Default Stylesheet
*   Based on Woo v1.0 Default Stylesheet
*      url: styleshout.com, 05-02-2014
*   Based on Spectre.css v0.5.8
=====================================================================

TOC:

a. Webfonts and Icon fonts
b. Preloader
c. Reset
d. Default Styles
   1. Basic
   2. Typography
   3. Links
   4. List
   5. Media
   6. Buttons
   7. Forms
   d. Grid
   e. Others
   1. Clearing
   2. Misc

=====================================================================  */


/* ------------------------------------------------------------------ */
/* a. Webfonts and Icon fonts
 ------------------------------------------------------------------ */

@import url("fonts.css");
@import url("fontello/css/fontello.css");
@import url("line-awesome.min.css");


/* ------------------------------------------------------------------ */
/* b. Preloader
 ------------------------------------------------------------------ */

#preloader  {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: #fff;
   z-index: 99999;
   height: 100%;
}
#status  {    
   position: absolute;
   left: 50%;
   top: 50%;
   width: 64px;
   height: 64px;
   margin: -32px 0 0 -32px;  
   padding: 0;    
}

/* ------------------------------------------------------------------
/* c. Reset
      Adapted from:
      Normalize.css - https://github.com/necolas/normalize.css/
      HTML5 Doctor Reset - html5doctor.com/html-5-reset-stylesheet/
/* ------------------------------------------------------------------ */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
   display: block;
}

audio,
canvas,
video {
   display: inline-block;
}

audio:not([controls]) {
   display: none;
   height: 0;
}

[hidden] { display: none; }

code, kbd, pre, samp {
   font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
   font-size: 1em;
}

pre {
   white-space: pre;
   white-space: pre-wrap;
   word-wrap: break-word;
   margin: 1em 0;
}

blockquote, q { quotes: &#8220 “ }

blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

ins {
   background-color: #ff9;
   color: #000;
   text-decoration: none;
}

mark {
   background-color: #d5f5d5;
   color: #50596c;
   border-bottom: 0.1rem solid #77dd77;
   border-radius: 0.2rem;
   padding: 0.1rem 0.2rem 0; 
}

del { text-decoration: line-through; }

abbr[title], dfn[title] {
   border-bottom: 1px dotted;
   cursor: help;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}


/* ------------------------------------------------------------------ */
/* d. Default and Basic Styles
      Adapted from:
      Skeleton CSS Framework - http://www.getskeleton.com/
      Typeplate Typographic Starter Kit - http://typeplate.com/
/* ------------------------------------------------------------------ */

/* 1. Basic  ------------------------------------------------------- */

*,
*:before,
*:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

html { font-size: 62.5%; }

body {
   background: #fff;
   font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
   font-weight: normal;
   font-size: 16px;
   text-rendering: optimizeLegibility;
   line-height: 1.5;
	color: #50596c;

   -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

/* 2. Typography
      Vertical rhythm with leading derived from 6
--------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
   color: #3a414e;
   font-weight: 500;
   margin-top: 2rem;
   line-height: 1.2;
   margin-bottom: .5em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }
.subheader { }

footer h3 { margin-top: 0; }

p { margin: 0 0 20px 0; }
p img { margin: 0; }
p.lead {
   font: 19px/36px 'opensans-light', sans-serif;
   margin-bottom: 18px;
}

/* for 'em' and 'strong' tags, font-size and line-height should be same with
the body tag due to rendering problems in some browsers */
em { font: 15px/30px 'opensans-italic', sans-serif; }

/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed) */
/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
b, strong { font-weight: inherit; }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** Add the correct background and color in IE 9-. (Removed) */
/** Add the correct font size in all browsers. */
small { font-size: 80%; font-weight: 400; /* (added) */ }

/*	Blockquotes */
blockquote {
   margin: 30px 0px;
   padding-left: 40px;
   position: relative;
}
blockquote:before {
   content: "\201C";
   opacity: 0.45;
   font-size: 80px;
   line-height: 0px;
   margin: 0;
   font-family: arial, sans-serif;

   position: absolute;
   top:  30px;
	left: 0;
}
blockquote p {
   font-family: georgia, serif;
   font-style: italic;
   padding: 0;
   font-size: 18px;
   line-height: 30px;
}
blockquote cite {
   display: block;
   font-size: 14px;
   font-style: normal;
   line-height: 18px;
}
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a,
blockquote cite a:visited { color: #8B9798; border: none }

/* ---------------------------------------------------------------------
/*  Pull Quotes Markup
/*
    <aside class="pull-quote">
		<blockquote>
			<p></p>
		</blockquote>
	 </aside>
/*
/* --------------------------------------------------------------------- */
.pull-quote {
   position: relative;
	padding: 18px 30px 18px 0px;
}
.pull-quote:before,
.pull-quote:after {
	height: 1em;
	opacity: 0.45;
	position: absolute;
	font-size: 80px;
   font-family: Arial, Sans-Serif;
}
.pull-quote:before {
	content: "\201C";
	top:  33px;
	left: 0;
}
.pull-quote:after {
	content: '\201D';
	bottom: -33px;
	right: 0;
}
.pull-quote blockquote {
   margin: 0;
}
.pull-quote blockquote:before {
   content: none;
}

/* Typography: HTML Semantic Text Elements */

kbd { border-radius: 0.2rem; line-height: 1.25; padding: .1rem .2rem; background: #454d5d; color: #fff; font-size: 0.9em; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* drop cap */
.drop-cap:first-letter {
	float: left;
	margin: 0;
	padding: 14px 6px 0 0;
	font-size: 84px;
	font-family: /* Copperplate */ 'montserrat-bold', sans-serif;
   line-height: 60px;
	text-indent: 0;
	background: transparent;
	color: inherit;
}

hr { border: solid #E8E8E8; border-width: 1px 0 0; clear: both; margin: 11px 0 30px; height: 0; }


/*  3. Links  ------------------------------------------------------- */

a, a:visited {
   text-decoration: none;
   outline: 0;
   color: #3085ee;
}
a:hover, a:focus { color: #215da6; text-decoration: underline; }
p a, p a:visited { line-height: inherit; }


/*  4. List  --------------------------------------------------------- */

ul, ol { margin-bottom: 24px; margin-top: 12px; }
ul { list-style: disc inside; }
ul ul { list-style-type: circle; }
ol { list-style: decimal inside; }
ol ol { list-style-type: lower-alpha; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 6px 0 6px 30px; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.large li { }
li p { }
footer ul { list-style: none; }

/* ---------------------------------------------------------------------
/*  Stats Tab Markup

    <ul class="stats-tabs">
		<li><a href="#">[value]<b>[name]</b></a></li>
	 </ul>

    Extend this object into your markup.
/*
/* --------------------------------------------------------------------- */
.stats-tabs {
   padding: 0;
   margin: 24px 0;
}
.stats-tabs li {
	display: inline-block;
	margin: 0 10px 18px 0;
	padding: 0 10px 0 0;
	border-right: 1px solid #ccc;
}
.stats-tabs li:last-child {
	margin: 0;
	padding: 0;
	border: none;
}
.stats-tabs li a {
	display: inline-block;
	font-size: 22px;
	font-family: 'opensans-bold', sans-serif;
   border: none;
   color: #313131;
}
.stats-tabs li a:hover {
   color:#11ABB0;
}
.stats-tabs li a b {
	display: block;
	margin: 6px 0 0 0;
	font-size: 13px;
	font-family: 'opensans-regular', sans-serif;
   color: #8B9798;
}

/* definition list */
dl { margin: 12px 0; }
dt { margin: 0; color:#11ABB0; }
dd { margin: 0 0 0 20px; }

/* Lining Definition Style Markup */
.lining dt,
.lining dd {
	display: inline;
	margin: 0;
}
.lining dt + dt:before,
.lining dd + dt:before {
	content: "\A";
	white-space: pre;
}
.lining dd + dd:before {
	content: ", ";
}
.lining dd:before {
	content: ": ";
	margin-left: -0.2em;
}

/* Dictionary Definition Style Markup */
.dictionary-style dt {
	display: inline;
	counter-reset: definitions;
}
.dictionary-style dt + dt:before {
	content: ", ";
	margin-left: -0.2em;
}
.dictionary-style dd {
	display: block;
	counter-increment: definitions;
}
.dictionary-style dd:before {
	content: counter(definitions, decimal) ". ";
}

/* Pagination */
.pagination { text-align: center; margin-top: 1rem; }
.pagination a { min-width: 36px; height: 36px; }

/* 5. Media   --------------------------------------------------------- */

img,
video,
iframe,
embed,
object {
   max-width: 100%;
   height: auto;
}
img.pull-right { margin: 12px 0px 0px 18px; }
img.pull-left { margin: 12px 18px 0px 0px; }

/* 6. Buttons  --------------------------------------------------------- */

.button,
.button:visited,
.woo-style input[type="submit"],
.woo-style input[type="reset"],
.woo-style input[type="button"] {
   font: 14px/24px 'montserrat-bold', sans-serif;
   background: #44B831;
   color: #fff;
   display: inline-block;   
	text-decoration: none;
   letter-spacing: 0;   
	padding: 12px 20px;
	margin-bottom: 18px;
   border: none;
   cursor: pointer;
   height: auto;
   text-transform: uppercase;
   letter-spacing: 2px;
   border-radius: 3px;
}

.button:hover,
.woo-style input[type="submit"]:hover,
.woo-style input[type="reset"]:hover,
.woo-style input[type="button"]:hover {
   background: #4eca3a;
   color: #fff;
   text-decoration: none;
}

.button:active,
.woo-style input[type="submit"]:active,
.woo-style input[type="reset"]:active,
.woo-style input[type="button"]:active {
   background: #289F15;
   color: #fff;
}

.button.full-width,
.woo-style input[type="submit"].full-width,
.woo-style input[type="reset"].full-width,
.woo-style input[type="button"].full-width {
	width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: center;
}

/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,
.woo-style input::-moz-focus-inner {
    border: 0;
    padding: 0;
}


/* 7. Forms  --------------------------------------------------------- */

form.form { margin-bottom: 24px; }
.form fieldset { margin-bottom: 24px; }
.form .merge-label { border-radius: 3px; margin: 0 0 24px 0; }
.form .captcha { margin: 0 0 24px auto; width: 304px; }

.form .merge-label .form-label {
   background: #d3d9d9;
   border-radius: 3px 3px 0 0;
}

.form .merge-label .error {
   text-align: left;
   width: 100%;
   display: block;
   color: #ff6961;
}

.form input[type="text"],
.form input[type="email"] {
   display: block;
   padding: 7px 15px;
   border: 0;
   outline: none;
   width: 100%;
   font-size: 17pt;
   line-height: 20pt;
   color: #333;
   background: #fbfbfb;
   border-radius: 0 0 3px 3px;
}

.form input[type="text"]:focus,
.form input[type="email"]:focus {
   color: #333;
   background: #fbfbfb;
}

.form input[type="text"]:placeholder-shown,
.form input[type="email"]:placeholder-shown {
   color: #647373;
   background: #d3d9d9;
}

.form .form-label {
   text-align: left;
   color: #333;
   padding-left: 15px;
}

.form .form-label .required {
   color: #ff6961;
}

form.woo-style { margin-bottom: 24px; }
.woo-style fieldset { margin-bottom: 24px; }

.woo-style input[type="text"],
.woo-style input[type="password"],
.woo-style input[type="email"],
.woo-style textarea,
.woo-style select {
   display: block;
   padding: 18px 15px;
   margin: 0 0 24px 0;
   border: 0;
   outline: none;
   vertical-align: middle;
   min-width: 225px;
	max-width: 100%;
   font-size: 15px;
   line-height: 24px;
	color: #647373;
	background: #D3D9D9;
   border-radius: 3px;

}

.woo-style input[type="text"]:focus,
.woo-style input[type="password"]:focus,
.woo-style input[type="email"]:focus,
.woo-style textarea:focus {
   color: #B3B7BC;
	background-color: #383D41;
}

textarea { min-height: 220px; }

.woo-style label,
.woo-style legend {
   font: 16px/24px 'opensans-bold', sans-serif;
	margin: 12px 0;
   color: #3d4145;
   display: block;
}
.woo-style label span,
.woo-style legend span {
	color: #8B9798;
   font: 14px/24px 'opensans-regular', sans-serif;
}

.woo-style input[type="checkbox"],
.woo-style input[type="radio"] {
   font-size: 15px;
   color: #3d4145;
}

.woo-style input[type="checkbox"] { display: inline; }

/* ------------------------------------------------------------------ */
/* d. Grid
--------------------------------------------------------------------- */

/* default
--------------------------------------------------------------- */
.row {
   width: 96%;
   max-width: 1008px;
   margin: 0 auto;
}
/* fixed width for IE8 */
.ie .row { width: 1000px ; }

.narrow .row { max-width: 980px; }

.row .row { width: auto; max-width: none; margin: 0 -18px; }

/* row clearing */
.row:before,
.row:after {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}

.column, .columns {
   position: relative;
   padding: 0 18px;
   min-height: 1px;
   float: left;
}
.column.centered, .columns.centered  {
    float: none;
    margin: 0 auto;
}

/* removed gutters */
.row.collapsed > .column,
.row.collapsed > .columns,
.column.collapsed, .columns.collapsed  { padding: 0; }

[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: right; }

/* column widths */
.row .one         { width: 8.33333%; }
.row .two         { width: 16.66667%; }
.row .three       { width: 25%; }
.row .four        { width: 33.33333%; }
.row .five        { width: 41.66667%; }
.row .six         { width: 50%; }
.row .seven       { width: 58.33333%; }
.row .eight       { width: 66.66667%; }
.row .nine        { width: 75%; }
.row .ten         { width: 83.33333%; }
.row .eleven      { width: 91.66667%; }
.row .twelve      { width: 100%; }

/* Offsets */
.row .offset-1    { margin-left: 8.33333%; }
.row .offset-2    { margin-left: 16.66667%; }
.row .offset-3    { margin-left: 25%; }
.row .offset-4    { margin-left: 33.33333%; }
.row .offset-5    { margin-left: 41.66667%; }
.row .offset-6    { margin-left: 50%; }
.row .offset-7    { margin-left: 58.33333%; }
.row .offset-8    { margin-left: 66.66667%; }
.row .offset-9    { margin-left: 75%; }
.row .offset-10   { margin-left: 83.33333%; }
.row .offset-11   { margin-left: 91.66667%; }

/* Push/Pull */
.row .push-1      { left: 8.33333%; }
.row .pull-1      { right: 8.33333%; }
.row .push-2      { left: 16.66667%; 	}
.row .pull-2      { right: 16.66667%; }
.row .push-3      { left: 25%; }
.row .pull-3      { right: 25%;	}
.row .push-4      { left: 33.33333%; }
.row .pull-4      { right: 33.33333%; }
.row .push-5      { left: 41.66667%; }
.row .pull-5      { right: 41.66667%; }
.row .push-6      { left: 50%; }
.row .pull-6      { right: 50%; }
.row .push-7      { left: 58.33333%; }
.row .pull-7      { right: 58.33333%; }
.row .push-8      { left: 66.66667%; 	}
.row .pull-8      { right: 66.66667%; }
.row .push-9      { left: 75%; }
.row .pull-9      { right: 75%; }
.row .push-10     { left: 83.33333%; }
.row .pull-10     { right: 83.33333%; }
.row .push-11     { left: 91.66667%; }
.row .pull-11     { right: 91.66667%; }

/* block grids
--------------------------------------------------------------------- */
.bgrid-sixths [class*="column"]   { width: 16.66667%; }
.bgrid-quarters [class*="column"] { width: 25%; }
.bgrid-thirds [class*="column"]   { width: 33.33333%; }
.bgrid-halves [class*="column"]   { width: 50%; }

[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: left; }

/* Left clearing for block grid columns - columns that changes width in
different screen sizes. Allows columns with different heights to align
properly.
--------------------------------------------------------------------- */
.first { clear: left; }   /* first column in default screen */
.s-first { clear: none; } /* first column in smaller screens */

/* smaller screens
--------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

   /* block grids on small screens */
   .s-bgrid-sixths [class*="column"]   { width: 16.66667%; }
   .s-bgrid-quarters [class*="column"] { width: 25%; }
   .s-bgrid-thirds [class*="column"]   { width: 33.33333%; }
   .s-bgrid-halves [class*="column"]   { width: 50%; }

   /* block grids left clearing */
   .first { clear: none; }
   .s-first { clear: left; }

}

/* screenwidth less than 768px - mobile/smaller tablets
--------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

   .row {
	   width: 480px;
	   margin: 0 auto;
      padding: 0;
	}
   .column, .columns {
	   width: auto !important;      
	   float: none;
	   margin-left: 0;
	   margin-right: 0;
      padding: 0 30px;
   }
   .row .row { width: auto; max-width: none; margin: 0 -30px; }

   [class*="column"] + [class*="column"]:last-child { float: none; }
   [class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; }

   /* Offsets */
   .row .offset-1    { margin-left: 0%; }
   .row .offset-2    { margin-left: 0%; }
   .row .offset-3    { margin-left: 0%; }
   .row .offset-4    { margin-left: 0%; }
   .row .offset-5    { margin-left: 0%; }
   .row .offset-6    { margin-left: 0%; }
   .row .offset-7    { margin-left: 0%; }
   .row .offset-8    { margin-left: 0%; }
   .row .offset-9    { margin-left: 0%; }
   .row .offset-10   { margin-left: 0%; }
   .row .offset-11   { margin-left: 0%; }
}

/* screenwidth less than or equal 480px - mobile wide
--------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

   .row { width: auto; }

}

/* larger screens
--------------------------------------------------------------- */
@media screen and (min-width: 1200px) {

   .wide .row { max-width: 1180px; }

}

/* ------------------------------------------------------------------ */
/* e. Others
/* ------------------------------------------------------------------ */

/*  1. Clearing
    (http://nicolasgallagher.com/micro-clearfix-hack/
--------------------------------------------------------------------- */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}

/*  2. Misc -------------------------------------------------------- */

.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 12px !important; }
.add-bottom { margin-bottom: 24px !important; }
.no-border { border: none; }

.text-center  { text-align: center !important; }
.text-left    { text-align: left !important; }
.text-right   { text-align: right !important; }
.pull-left    { float: left !important; }
.pull-right   { float: right !important; }
.align-center {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}

.text-gray { color: #acb3c2; }
a.text-gray:focus, a.text-gray:hover { color: #9ea6b7; }
a.text-gray:visited { color: #bbc1cd; }

.text-light { color: #fff; }
a.text-light:focus, a.text-light:hover { color: #f2f2f2; }
a.text-light:visited { color: white; }

.text-dark { color: #50596c; }
a.text-dark:focus, a.text-dark:hover { color: #454d5d; }
a.text-dark:visited { color: #5b657a; }


/*  Spectre ------------------------------------------------------ */

code {
   font-size: 85%;
   line-height: 1.25;
   padding: .1rem .2rem;
   color: #d73e48;
   border-radius: .1rem;
   background: #fcf2f2;
}

pre code {
   line-height: 1.5;
   display: block;
   overflow-x: auto;
   padding: 2rem !important;
   color: inherit;
   border-radius: 2px;
   background: #fafafa;
}

pre[class*="language-"] code {
   border-radius: inherit;
   padding: 0 !important;
   overflow-x: initial;
}

pre code:not(.hljs):not([class*="language-"]) {
   background: #f8f8f8;
}


.mt-1 { margin-top: 0.2rem !important; }

.container { margin-left: auto; margin-right: auto; padding-left: 0.4rem; padding-right: 0.4rem; width: 100%; }

.container.grid-xl { max-width: 1296px; }

.container.grid-lg { max-width: 976px; }

.container.grid-md { max-width: 856px; }

.container.grid-sm { max-width: 616px; }

.container.grid-xs { max-width: 496px; }

.page-toc {
   background-color:#f2f2f2;
   padding: 18px;
   display: inline-block;
   border-radius: 3px;
   border: 1px solid #d9d9d9;
}

.page-toc h4 { margin-top: 0; }

.page-toc ul { list-style: none; padding-left: 2rem; margin-bottom: 0; }

.page-toc ul ul { padding-left: 0; margin-left: 17px; }

.table {
   border-collapse: collapse;
   border-spacing: 0;
   text-align: left; 
   width: 100%;
 }
 
 .table.table-striped tbody tr:nth-of-type(odd) {
   background: #f7f8f9;
 }
 
 .table tbody tr.active,
 .table.table-striped tbody tr.active {
   background: #eef0f3;
 }
 
 .table.table-hover tbody tr:hover {
   background: #eef0f3;
 }
 
 .table.table-scroll {
   display: block;
   overflow-x: auto;
   padding-bottom: .75rem;
   white-space: nowrap;
 }
 
 .table td,
 .table th {
   border-bottom: .05rem solid #dadee4;
   padding: .6rem .4rem;
 }
 
 .table th {
   border-bottom-width: .1rem;
 }