/* kolbe-media basics css and framework */

/* basic styles */

body {font-size: 100%}

* {
	 -webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
			 box-sizing: border-box;
}

a {text-decoration: none; color: inherit;
	-webkit-transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out;
	   -moz-transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out;
	    -ms-transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out;
	     -o-transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out;
			transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}

img {max-width: 100%; height: auto}

img.centered {display: block; margin: 0 auto}

blockquote {display: inline-block; margin: 10px 10px 10px 20px; padding: 5px 10px; font-style: italic; background-color: rgb(240, 240, 240); border-left: 3px solid rgb(102, 140, 255)}
blockquote.quote > p::before {font-family: "km_glyphs"; font-size: 24px; content: '\e827'; vertical-align: -0.5em; margin-right: 0.5em}
blockquote.quote > p::after {font-family: "km_glyphs"; font-size: 24px; content: '\e827'; vertical-align: 0.25em; margin-left: 0.5em; display: inline-block; -webkit-transform: rotate(180deg);
														-moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}


/* Headers */

h1, h2, h3, h4, h5, h6 {padding: 0; margin: 0 0 20px 0; letter-spacing: 0.02em}

h1 {font-size: 1.75em}
h2 {font-size: 1.5em}
h3 {font-size: 1.3em}
h4 {font-size: 1.2em}
h5 {font-size: 1.1em}
h6 {font-size: 1em}


/* Paragraphs */

p {padding: 0; margin: 0 0 20px 0}


/* Tooltip */

.hasTooltip {display: inline-block; overflow: visible; position: relative; border-bottom: 2px dotted rgb(200, 200, 200); cursor: help !important}
.tooltip {visibility: hidden; width: 400px; font-size: 16px; color: rgb(80, 80, 80); font-weight: normal; font-style: normal; font-variant: normal; position: absolute; z-index: 999 !important; left: 110%; top: -10px; padding: 10px; background-color: rgb(240, 240, 240); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
.hasTooltip:hover .tooltip {visibility: visible}


/* HTML5 elements */

main, header, footer, , aside, section, nav {display: block}

/* Form elements */
form, input, label, button, select, option, optgroup, textarea, datalist {
	font: inherit;
}


/* Tables */

table {border-collapse: collapse}
th, td {padding: 5px 7px}

table.centered {text-align: center}
table.leftalign {text-align: left}
table.rightalign {text-align: right}

/* single border rows */
table.singleborder-row thead, table.singleborder-row tr {border-bottom: 1px solid rgb(200, 200, 200)}

/* simple bordered rows */
table.border-row thead, table.border-row tr {border: 1px solid rgb(200, 200, 200)}

/* bordered head */
table.singleborder-head thead {border-bottom: 1px solid rgb(200, 200, 200)}

/* full border */
table.full-bordered thead, table.full-bordered th, table.full-bordered tr, table.full-bordered td {border: 1px solid rgb(200, 200, 200)}

/* colored rows */
table.colorrows tr:nth-of-type(even), table.colorrows thead {background-color: rgb(245, 245, 245)}

/* hover effects */
table.rowhover tr:hover {background-color: rgb(230, 230, 230)}
table.cellhover td:hover {background-color: rgb(230, 230, 230)}

/* prevent text selection */
table.noselect {-webkit-user-select: none; -moz-user-select: none; user-select: none}

/* lists */
ul, ol {padding-left: 3em}
ul.list-arrowed, ul.list-arrowed-small, ul.list-arrowed-filled, ul.list-check {
	list-style-type: none;
	padding-left: 2em;
}
ul.list-arrowed > li, ul.list-arrowed-small > li, ul.list-arrowed-filled > li, ul.list-check > li {
	padding-left: 1em;
}
ul.list-arrowed-small > li:before {font-family: 'km_glyphs'; content: '\e812' ' '; display: inline-block; width: 0.8em; margin-left: -0.8em;}
ul.list-arrowed > li:before {font-family: 'km_glyphs'; content: '\e815' ' '; display: inline-block; width: 0.8em; margin-left: -0.8em;}
ul.list-arrowed-filled > li:before {font-family: 'km_glyphs'; content: '\e819' ' '; display: inline-block; width: 0.8em; margin-left: -0.8em;}
ul.list-check > li:before {font-family: 'km_glyphs'; content: '\e843' ' '; display: inline-block; width: 0.8em; margin-left: -0.8em;}


/* Buttons */

a.button,
button,
input[type=submit] { display: inline-block; padding: 8px 16px; margin: 20px 0; border: 0 none; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none}

a.button:hover, button:hover,
input[type=submit]:hover {
	-webkit-transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out;
	   -moz-transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out;
	    -ms-transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out;
	     -o-transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out;
			transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}

a.button.small,
button.small,
input[type=submit].small {
	padding: 5px 10px; font-size: 14px;
}

a.button.big,
button.big,
input[type=submit].big {
	padding: 10px 16px;
}

a.button.small.radius,
button.small.radius,
input[type=submit].small.radius {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
			border-radius: 5px;
}

a.button.radius,
button.radius,
input[type=submit].radius {
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
			border-radius: 15px;
}

a.button.big.radius,
button.big.radius,
input[type=submit].big.radius {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
			border-radius: 20px;
}


/* Basic Grid */

.fullwidth {width: 100%}

.colwrapper:after {content: ''; clear: both; display:table}

.column-content {padding: 10px}

.col-xs-100, .col-xs-90, .col-xs-80, .col-xs-75, .col-xs-70, .col-xs-60, .col-xs-50, .col-xs-40, .col-xs-33, .col-xs-30, .col-xs-25, .col-xs-20, .col-xs-16, .col-xs-8,
.col-s-100, .col-s-90, .col-s-80, .col-s-75, .col-s-70, .col-s-60, .col-s-50, .col-s-40, .col-s-33, .col-s-30, .col-s-25, .col-s-20, .col-s-16, .col-s-8,
.col-m-100, .col-m-90, .col-m-80, .col-m-75, .col-m-70, .col-m-60, .col-m-50, .col-m-40, .col-m-33, .col-m-30, .col-m-25, .col-m-20, .col-m-16, .col-m-8,
.col-l-100, .col-l-90, .col-l-80, .col-l-75, .col-l-70, .col-l-60, .col-l-50, .col-l-40, .col-l-33, .col-l-30, .col-l-25, .col-l-20, .col-l-16, .col-l-8 {
	float: left;
	overflow: hidden;
}

/* Use as starting width and scale down as necessary */

.col-l-100 {width: 100%}
.col-l-90 {width: 90%}
.col-l-80 {width: 80%}
.col-l-75 {width: 75%}
.col-l-70 {width: 70%}
.col-l-60 {width: 60%}
.col-l-50 {width: 50%}
.col-l-40 {width: 40%}
.col-l-33 {width: 33.33%}
.col-l-30 {width: 30%}
.col-l-25 {width: 25%}
.col-l-20 {width: 20%}
.col-l-16 {width: 16%}
.col-l-8 {width: 8%}

.left {float: left} /* Overrides col float */
.right {float: right} /* Overrides col float */


/* Flex grid */

.flex-container {display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-around; -moz-justify-content: space-around; justify-content:space-around;}

.flexcol-xs-100, .flexcol-xs-90, .flexcol-xs-80, .flexcol-xs-75, .flexcol-xs-70, .flexcol-xs-60, .flexcol-xs-50, .flexcol-xs-40, .flexcol-xs-33, .flexcol-xs-30, .flexcol-xs-25, .flexcol-xs-20, .flexcol-xs-16, .flexcol-xs-8,
.flexcol-s-100, .flexcol-s-90, .flexcol-s-80, .flexcol-s-75, .flexcol-s-70, .flexcol-s-60, .flexcol-s-50, .flexcol-s-40, .flexcol-s-33, .flexcol-s-30, .flexcol-s-25, .flexcol-s-20, .flexcol-s-16, .flexcol-s-8,
.flexcol-m-100, .flexcol-m-90, .flexcol-m-80, .flexcol-m-75, .flexcol-m-70, .flexcol-m-60, .flexcol-m-50, .flexcol-m-40, .flexcol-m-33, .flexcol-m-30, .flexcol-m-25, .flexcol-m-20, .flexcol-m-16, .flexcol-m-8,
.flexcol-l-100, .flexcol-l-90, .flexcol-l-80, .flexcol-l-75, .flexcol-l-70, .flexcol-l-60, .flexcol-l-50, .flexcol-l-40, .flexcol-l-33, .flexcol-l-30, .flexcol-l-25, .flexcol-l-20, .flexcol-l-16, .flexcol-l-8 {
	overflow: hidden
}

/* Use as starting width and scale down as necessary */

.flexcol-l-100 {-webkit-flex: 0 1 100%; -moz-flex: 0 1 100%; -ms-flex: 0 1 100%; flex: 0 1 100%}
.flexcol-l-90 {-webkit-flex: 0 1 90%; -moz-flex: 0 1 90%; -ms-flex: 0 1 90%; flex: 0 1 90%}
.flexcol-l-80 {-webkit-flex: 0 1 80%; -moz-flex: 0 1 80%; -ms-flex: 0 1 80%; flex: 0 1 80%}
.flexcol-l-75 {-webkit-flex: 0 1 75%; -moz-flex: 0 1 75%; -ms-flex: 0 1 75%; flex: 0 1 75%}
.flexcol-l-70 {-webkit-flex: 0 1 70%; -moz-flex: 0 1 70%; -ms-flex: 0 1 70%; flex: 0 1 70%}
.flexcol-l-60 {-webkit-flex: 0 1 60%; -moz-flex: 0 1 60%; -ms-flex: 0 1 60%; flex: 0 1 60%}
.flexcol-l-50 {-webkit-flex: 0 1 50%; -moz-flex: 0 1 50%; -ms-flex: 0 1 50%; flex: 0 1 50%}
.flexcol-l-40 {-webkit-flex: 0 1 40%; -moz-flex: 0 1 40%; -ms-flex: 0 1 40%; flex: 0 1 40%}
.flexcol-l-33 {-webkit-flex: 0 1 33.33%; -moz-flex: 0 1 33.33%; -ms-flex: 0 1 33.33%; flex: 0 1 33.33%}
.flexcol-l-30 {-webkit-flex: 0 1 30%; -moz-flex: 0 1 30%; -ms-flex: 0 1 30%; flex: 0 1 30%}
.flexcol-l-25 {-webkit-flex: 0 1 25%; -moz-flex: 0 1 25%; -ms-flex: 0 1 25%; flex: 0 1 25%}
.flexcol-l-20 {-webkit-flex: 0 1 20%; -moz-flex: 0 1 20%; -ms-flex: 0 1 20%; flex: 0 1 20%}
.flexcol-l-16 {-webkit-flex: 0 1 16%; -moz-flex: 0 1 16%; -ms-flex: 0 1 16%; flex: 0 1 16%}
.flexcol-l-8 {-webkit-flex: 0 1 8%; -moz-flex: 0 1 8%; -ms-flex: 0 1 8%; flex: 0 1 8%}


/* Wrapper */

.header-content {padding: 10px}
.header-content::after {content:''; clear:both; display: table}

.page-container {max-width: 1200px; width: 100%; margin: 0 auto; padding: 10px}

.content-wrapper::after {content: ''; clear: both; display: table}

.main-content {padding: 10px}
.side-content {padding: 10px}

.sidebar p {font-size: 14px}


/* Footer */

.footer-container::after {content: ''; clear:both; display: table}

.footer-content {font-size: 14px}


/* Content */

.content-container {}
.sec-content-container {}


/*To-Top-Button*/

#totop {
  display: none;
  position: fixed;
  z-index: 10;
  right: 10px;
  bottom: 20px;
  color: rgb(150, 150, 150);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0px 0px 5px rgba(80, 80, 80, 0.3);
  -moz-box-shadow: 0px 0px 5px rgba(80, 80, 80, 0.3);
  box-shadow: 0px 0px 5px rgba(80, 80, 80, 0.3);
}

#totop .icon-up-open-big {font-size: 28px; line-height: 0.01; color: rgb(82,82,82)}

#totop:hover {cursor: pointer;}


/* Breakpoints */

@media screen and (max-width: 960px) {

	.col-m-100 {width: 100%}
	.col-m-90 {width: 90%}
	.col-m-80 {width: 80%}
	.col-m-75 {width: 75%}
	.col-m-70 {width: 70%}
	.col-m-60 {width: 60%}
	.col-m-50 {width: 50%}
	.col-m-40 {width: 40%}
	.col-m-33 {width: 33%}
	.col-m-30 {width: 30%}
	.col-m-25 {width: 25%}
	.col-m-20 {width: 20%}
	.col-m-16 {width: 16%}
	.col-m-8 {width: 8%}

	.flexcol-m-100 {-webkit-flex: 0 1 100%; -moz-flex: 0 1 100%; -ms-flex: 0 1 100%; flex: 0 1 100%}
	.flexcol-m-90 {-webkit-flex: 0 1 90%; -moz-flex: 0 1 90%; -ms-flex: 0 1 90%; flex: 0 1 90%}
	.flexcol-m-80 {-webkit-flex: 0 1 80%; -moz-flex: 0 1 80%; -ms-flex: 0 1 80%; flex: 0 1 80%}
	.flexcol-m-75 {-webkit-flex: 0 1 75%; -moz-flex: 0 1 75%; -ms-flex: 0 1 75%; flex: 0 1 75%}
	.flexcol-m-70 {-webkit-flex: 0 1 70%; -moz-flex: 0 1 70%; -ms-flex: 0 1 70%; flex: 0 1 70%}
	.flexcol-m-60 {-webkit-flex: 0 1 60%; -moz-flex: 0 1 60%; -ms-flex: 0 1 60%; flex: 0 1 60%}
	.flexcol-m-50 {-webkit-flex: 0 1 50%; -moz-flex: 0 1 50%; -ms-flex: 0 1 50%; flex: 0 1 50%}
	.flexcol-m-40 {-webkit-flex: 0 1 40%; -moz-flex: 0 1 40%; -ms-flex: 0 1 40%; flex: 0 1 40%}
	.flexcol-m-33 {-webkit-flex: 0 1 33.33%; -moz-flex: 0 1 33.33%; -ms-flex: 0 1 33.33%; flex: 0 1 33.33%}
	.flexcol-m-30 {-webkit-flex: 0 1 30%; -moz-flex: 0 1 30%; -ms-flex: 0 1 30%; flex: 0 1 30%}
	.flexcol-m-25 {-webkit-flex: 0 1 25%; -moz-flex: 0 1 25%; -ms-flex: 0 1 25%; flex: 0 1 25%}
	.flexcol-m-20 {-webkit-flex: 0 1 20%; -moz-flex: 0 1 20%; -ms-flex: 0 1 20%; flex: 0 1 20%}
	.flexcol-m-16 {-webkit-flex: 0 1 16%; -moz-flex: 0 1 16%; -ms-flex: 0 1 16%; flex: 0 1 16%}
	.flexcol-m-8 {-webkit-flex: 0 1 8%; -moz-flex: 0 1 8%; -ms-flex: 0 1 8%; flex: 0 1 8%}

}

@media screen and (max-width: 768px) {

	.col-s-100 {width: 100%}
	.col-s-90 {width: 90%}
	.col-s-80 {width: 80%}
	.col-s-75 {width: 75%}
	.col-s-70 {width: 70%}
	.col-s-60 {width: 60%}
	.col-s-50 {width: 50%}
	.col-s-40 {width: 40%}
	.col-s-33 {width: 33%}
	.col-s-30 {width: 30%}
	.col-s-25 {width: 25%}
	.col-s-20 {width: 20%}
	.col-s-16 {width: 16%}
	.col-s-8 {width: 8%}

	.flexcol-s-100 {-webkit-flex: 0 1 100%; -moz-flex: 0 1 100%; -ms-flex: 0 1 100%; flex: 0 1 100%}
	.flexcol-s-90 {-webkit-flex: 0 1 90%; -moz-flex: 0 1 90%; -ms-flex: 0 1 90%; flex: 0 1 90%}
	.flexcol-s-80 {-webkit-flex: 0 1 80%; -moz-flex: 0 1 80%; -ms-flex: 0 1 80%; flex: 0 1 80%}
	.flexcol-s-75 {-webkit-flex: 0 1 75%; -moz-flex: 0 1 75%; -ms-flex: 0 1 75%; flex: 0 1 75%}
	.flexcol-s-70 {-webkit-flex: 0 1 70%; -moz-flex: 0 1 70%; -ms-flex: 0 1 70%; flex: 0 1 70%}
	.flexcol-s-60 {-webkit-flex: 0 1 60%; -moz-flex: 0 1 60%; -ms-flex: 0 1 60%; flex: 0 1 60%}
	.flexcol-s-50 {-webkit-flex: 0 1 50%; -moz-flex: 0 1 50%; -ms-flex: 0 1 50%; flex: 0 1 50%}
	.flexcol-s-40 {-webkit-flex: 0 1 40%; -moz-flex: 0 1 40%; -ms-flex: 0 1 40%; flex: 0 1 40%}
	.flexcol-s-33 {-webkit-flex: 0 1 33.33%; -moz-flex: 0 1 33.33%; -ms-flex: 0 1 33.33%; flex: 0 1 33.33%}
	.flexcol-s-30 {-webkit-flex: 0 1 30%; -moz-flex: 0 1 30%; -ms-flex: 0 1 30%; flex: 0 1 30%}
	.flexcol-s-25 {-webkit-flex: 0 1 25%; -moz-flex: 0 1 25%; -ms-flex: 0 1 25%; flex: 0 1 25%}
	.flexcol-s-20 {-webkit-flex: 0 1 20%; -moz-flex: 0 1 20%; -ms-flex: 0 1 20%; flex: 0 1 20%}
	.flexcol-s-16 {-webkit-flex: 0 1 16%; -moz-flex: 0 1 16%; -ms-flex: 0 1 16%; flex: 0 1 16%}
	.flexcol-s-8 {-webkit-flex: 0 1 8%; -moz-flex: 0 1 8%; -ms-flex: 0 1 8%; flex: 0 1 8%}

	.page-container {padding: 0px}
	.main-content {padding: 0px}
	.side-content {padding: 0px}
}

@media screen and (max-width: 640px) {

	.col-xs-100 {width: 100%}
	.col-xs-90 {width: 90%}
	.col-xs-80 {width: 80%}
	.col-xs-75 {width: 75%}
	.col-xs-70 {width: 70%}
	.col-xs-60 {width: 60%}
	.col-xs-50 {width: 50%}
	.col-xs-40 {width: 40%}
	.col-xs-33 {width: 33%}
	.col-xs-30 {width: 30%}
	.col-xs-25 {width: 25%}
	.col-xs-20 {width: 20%}
	.col-xs-16 {width: 16%}
	.col-xs-8 {width: 8%}

	.flexcol-xs-100 {-webkit-flex: 0 1 100%; -moz-flex: 0 1 100%; -ms-flex: 0 1 100%; flex: 0 1 100%}
	.flexcol-xs-90 {-webkit-flex: 0 1 90%; -moz-flex: 0 1 90%; -ms-flex: 0 1 90%; flex: 0 1 90%}
	.flexcol-xs-80 {-webkit-flex: 0 1 80%; -moz-flex: 0 1 80%; -ms-flex: 0 1 80%; flex: 0 1 80%}
	.flexcol-xs-75 {-webkit-flex: 0 1 75%; -moz-flex: 0 1 75%; -ms-flex: 0 1 75%; flex: 0 1 75%}
	.flexcol-xs-70 {-webkit-flex: 0 1 70%; -moz-flex: 0 1 70%; -ms-flex: 0 1 70%; flex: 0 1 70%}
	.flexcol-xs-60 {-webkit-flex: 0 1 60%; -moz-flex: 0 1 60%; -ms-flex: 0 1 60%; flex: 0 1 60%}
	.flexcol-xs-50 {-webkit-flex: 0 1 50%; -moz-flex: 0 1 50%; -ms-flex: 0 1 50%; flex: 0 1 50%}
	.flexcol-xs-40 {-webkit-flex: 0 1 40%; -moz-flex: 0 1 40%; -ms-flex: 0 1 40%; flex: 0 1 40%}
	.flexcol-xs-33 {-webkit-flex: 0 1 33.33%; -moz-flex: 0 1 33.33%; -ms-flex: 0 1 33.33%; flex: 0 1 33.33%}
	.flexcol-xs-30 {-webkit-flex: 0 1 30%; -moz-flex: 0 1 30%; -ms-flex: 0 1 30%; flex: 0 1 30%}
	.flexcol-xs-25 {-webkit-flex: 0 1 25%; -moz-flex: 0 1 25%; -ms-flex: 0 1 25%; flex: 0 1 25%}
	.flexcol-xs-20 {-webkit-flex: 0 1 20%; -moz-flex: 0 1 20%; -ms-flex: 0 1 20%; flex: 0 1 20%}
	.flexcol-xs-16 {-webkit-flex: 0 1 16%; -moz-flex: 0 1 16%; -ms-flex: 0 1 16%; flex: 0 1 16%}
	.flexcol-xs-8 {-webkit-flex: 0 1 8%; -moz-flex: 0 1 8%; -ms-flex: 0 1 8%; flex: 0 1 8%}

	span.tooltip {width: 200px; height: auto; left: 0; top: 26px;}

}