@import "w3.css";
@font-face {
	/*
	font-family: 'VarelaRound';
	src: url('https://www.eclecticasystems.com/esports2/3rdsvc/mi10/css/VarelaRound-Regular.ttf');
	*/
}
/*html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}*/
html,body,h1,h2,h3,h4,h5,span,input,text-area,select,option {font-family: "Varela Round", sans-serif}



.mi-blue1 { background-color:rgb(80, 144, 193); color:#fff; }
.mi-blue2 { background-color:rgb(66, 139, 202); color:#fff; }
.mi-blue3 { background-color:rgb(27, 106, 170); color:#fff; }

.mi-text-blue1 { color:#5090c1; }
.mi-text-blue2 { color:#428bca; }
.mi-text-blue3 { color:#1b6aaa; }

.mi-green1 { background-color:rgb(230,245,233); color:#000; }
.mi-green2 { background-color:rgb(72,180,97); color:#000; }
.mi-green3 { background-color:rgb(40,167,69); color:#000; }

.mi-text-green1 { color:rgb(230,245,233); }
.mi-text-green2 { color:rgb(72,180,97); }
.mi-text-green3 { color:rgb(40,167,69); }



.mi-input {
	padding: 8px;
	display: block;
	border: none;
	border-bottom: 1px solid #ccc;
	width: 100%
}
.mi-select {
	padding: 8px 0;
	width: 100%;
	border: none;
	border-bottom: 1px solid #ccc
}


.mi-input-addon {
	display: flex;
	width: 100%;
	margin:0;
	padding:0;
	border:1px solid #ddd;
}
.mi-input-addon input {
	border:none;
	outline:none;
}
/* Style the form icons */
.mi-input-addon .mi-icon-addon {
	padding: 8px;
	padding-top: 16px;
	border-left:1px solid #ddd;
	min-width: 40px;
	text-align: center;
	vertical-align: middle;
}
.mi-input-addon:focus-within {
	outline:2px solid SteelBlue;
}




.mi-border-trl {
	border-top:1px solid #ccc!important;
	border-right:1px solid #ccc!important;
	border-bottom:0!important;
	border-left:1px solid #ccc!important;
}
.mi-border-trb {
	border-top:1px solid #ccc!important;
	border-right:1px solid #ccc!important;
	border-bottom:1px solid #ccc!important;
	border-left:0!important;
}

.mi-expandable-widget {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

.mi-expandable-widget.active {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

.mi-info-top {
	position: fixed;
	width:100%;
	height:auto;
	border:none;
	top:0px;
	transition: 0.5s;
	z-index:5;
    max-height: 0;
    transition: max-height 0.4s ease;
    overflow: hidden;
}
.mi-info-top.active {
	max-height: 640px;
    transition: max-height 0.4s ease;
}

/*.mi-info-top.hide { animation: infotop2 0.6s }*/
@keyframes infotop1 {
	from {
		top: -300px;
		opacity: 0
	}
	to {
		top: 0;
		opacity: 1
	}
}
@keyframes infotop2 {
	from {
		top: 0px;
		opacity: 1
	}
	to {
		top: -300px;
		opacity: 0
	}
}


@media (max-width:600px) {
	/*
	.w3-modal-content {
		position:absolute;
		top:0 !important;
		left:0 !important;
		width:100% !important;
		height:100% !important;
		background-color: #fff;
		padding: 0;
		outline: 0;

		margin: auto;
		position: relative;
		width: 600px
	}
	*/
}

.mi-modal {
	z-index: 3;
	display: none;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4)
}

.mi-modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	width: 600px
}

@media (max-width:600px), (max-width:993px) {
	.mi-modal {
		padding:0!important;
		margin:0!important;
	}

	.mi-modal-content {
		margin: 0!important;
		padding: 0;
		outline: 0;
		top:0!important;
		left:0!important;
		width: 100%!important;
		height: 100%!important;
	}
}

.mi-sidebar-overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 3;
}

.mi-sidebar {
	top: 0;
	bottom: 0;
	width: 300px;
	height:auto;
	background-color: #fff;
	position: absolute;
	z-index: 4;
	display: block;
}
.mi-sidebar-frame {
	width: 300px;
	background:none;
	top:0;
	bottom:0;
	position:fixed;
	display:block;
	z-index:3;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
@media (max-width:600px), (max-width:993px) {
	.mi-sidebar {
		position:fixed;
		top:0;
		bottom:0;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
		overflow:auto;
	}
	.mi-sidebar-frame {
		display:none;
	}
	.mi-sidebar-overlay {
		display:block;
	}
}


/* indent of submenu */
.w3-bar-block div {
	margin-left:16px;
}

.mi-dropdown, .mi-dropdown-hower {
	position: relative;
	display: inline-block;
}

.mi-dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	color: #000;

	min-width: 200px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 12px 16px;
	z-index: 1;
}
.mi-dropdown-content-right {
	right:0;
}

.dropdown.active .dropdown-content, .dropdown-hover:hover .dropdown-content {
	display: block;
}



.mi-link {
	text-decoration:none;
}

.mi-tab-btn {
	border-bottom:6px solid #222;
}
.mi-tab-btn.active {
	border-bottom:6px solid #c00;
}





.input-color-container {
	position: relative;
	overflow: hidden;
	width: 40px;
	height: 40px;
	border: solid 2px #ddd;
	border-radius: 40px;
	margin:0;
	padding:0;
	margin-left:16px;
}

input[type='color'] {
	position: absolute;
	left:-10px;
	top:-10px;
	min-width:100px;
	min-height:100px;
	border: none;
	outline: none;
}
/*
input[type='color']::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type='color']::-webkit-color-swatch {
	border: none;
}
*/





/* Style the input container */
/* Style the form icons */
/* Style the input fields */
/*
.mi-input-container {
	display: flex;
	width: 100%;
	margin-bottom: 15px;
	border:1px solid #ddd;
}
.mi-input-container input {
	border:none;
	outline:none;
}
.mi-input-icon {
	padding: 8px;
	border-left:1px solid #ddd;
	min-width: 40px;
	text-align: center;
}
.mi-input-field {
	width: 100%;
	padding: 8px;
}
.mi-input-container:focus-within {
	outline:2px solid dodgerblue;
}
*/


.mi-input-light {
	/*
	border:1px solid #ddd;
	outline:1px solid transparent;
	*/
}
.mi-input-transp {
	background:none;
}

.mi-transp {
	background:none;
}


.mi-easeload {
	opacity: 0;
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	-o-transition: all 1s ease; 
}

@-webkit-keyframes mi-img-pop-in {
    0% { opacity: 0; -webkit-transform: scale(0.5); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes mi-img-pop-in {
    0% { opacity: 0; -moz-transform: scale(0.5); }
    100% { opacity: 1; -moz-transform: scale(1); }
}
@keyframes mi-img-pop-in {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}




.mi-text-stroke {
	-webkit-text-stroke: 1px black;
	color: white;
	text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}



.mi-back-semi {
	background:rgba(0,0,0,0.1)!important;
}
.mi-border-light {
	border:1px solid #ddd!important;
}
.mi-input-form {
	padding:8px;
	display:block;
	width:100%;
	border:none;
	outline:none;
	background:none;
}

.mi-select-form {
	padding:9px 0;
	width:100%;
	border:none;
	background:none;
}
.mi-input-form:focus, .mi-select-form:focus, input:focus.mi-border-light {
	outline:2px solid dodgerblue !important;
}


.mi-edit {
	display:table;
	border:none;
	width:100%;
}
.mi-edit .mi-label {
	text-align:right;
	vertical-align:middle;
	width:39%;
	display:table-cell;
	padding:4px;
}
.mi-edit .mi-input {
	text-align:left;
	vertical-align:middle;
	width:59%;
	overflow:hidden;
	display:table-cell;
	padding:4px;
}
.mi-input input, .mi-input select, .mi-input textarea {
	width:100%; line-height:1.2em; height:2.8em; outline:none; border:none; padding:0 4px;
}
.mi-edit-100 .mi-label { width:100px; }
.mi-edit-150 .mi-label { width:150px; }
.mi-edit-200 .mi-label { width:200px; }
.mi-edit-250 .mi-label { width:250px; }
.mi-edit-300 .mi-label { width:300px; }
.mi-edit-100 .mi-input { width:calc(100% - 100px); }
.mi-edit-150 .mi-input { width:calc(100% - 150px); }
.mi-edit-200 .mi-input { width:calc(100% - 200px); }
.mi-edit-250 .mi-input { width:calc(100% - 250px); }
.mi-edit-300 .mi-input { width:calc(100% - 300px); }

@media (max-width:601px), (max-width:993px) {
	.mi-edit { display:block; }
	.mi-edit .mi-label {
		text-align:left;
		width:100%!important;
		display:block;
		padding:4px 4px 0 4px;
	}
	.mi-edit .mi-input {
		width:100%!important;
		display:block;
		padding:4px;
	}
}




.mi-clearfix::after {
	content: "";
	clear: both;
	display: table;
}

a.boxclose{
	/*
	float:right;
	margin-top:-30px;
	margin-right:-30px;
	padding: 11px 3px;       
	*/
	position:absolute;
	display:block;
	right:0;
	top:0;
	cursor:pointer;
	color: #fff;
	border: 1px solid #AEAEAE;
	border-radius: 30px;
	background: #605F61;
	font-size: 31px;
	font-weight: bold;
	/*
	display: inline-block;
	*/
	line-height: 0px;
	z-index:1;
}
.boxclose:before {
	content: "×";
}



.close-icon {
	display:block;
	position:relative;
	box-sizing:border-box;
	width:20px;
	height:20px;
	right:-10px;
	top:-10px;
	border-width:3px;
	border-style: solid;
	border-color:red;
	border-radius:100%;
	background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
	background-color:red;
	box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
	transition: all 0.3s ease;
}



.mi-tbl-edit input {
	width:100%;
	border:1px solid #eee;
}
.mi-tbl-edit input:focus {
	border:1px solid #ccc;
}
.mi-tbl-edit input.error {
	border:2px solid #f00;
}






/*
input {
  border: none;
  width: 170px;
  height: 25px;
  outline: none;
  padding-left: 10px;
}
*/

.mi-tt-arrow {
	position: relative;
	background: #ff3466;
	padding: 5px 12px;
	margin: 5px;
	font-size: 15px;
	border-radius: 100%;
	color: #FFF;
}

.mi-tt-arrow:before,
.mi-tt-arrow:after {
	position: absolute;
	content: '';
	opacity: 0;
	transition: all 0.4s ease;
}


/*sulica*/
.mi-tt-arrow.right:before {
	border-width: 8px 10px 8px 0;
	border-style: solid;
	border-color: transparent #ff3466 transparent transparent;
	left: 50px;
	transform: translateY(20px);
}
/* box */
.mi-tt-arrow.right:after {
	content: attr(data-tooltip);
	background: #ff3466;
	width: 160px;
	height: auto;
	font-size: 13px;
	font-weight: 300;
	top: -10px;
	left: 60px;
	padding: 10px;
	border-radius: 5px;
	letter-spacing: 1px;
	transform: translateX(20px);
}




/*sulica*/
.mi-tt-arrow.left:before {
	border-width: 8px 0 8px 10px;
	border-style: solid;
	border-color: transparent transparent transparent #ff3466;
	right: 50px;
	transform: translateY(20px);
}
/* box */
.mi-tt-arrow.left:after {
	content: attr(data-tooltip);
	background: #ff3466;
	width: 160px;
	height: auto;
	font-size: 13px;
	font-weight: 300;
	top: -10px;
	right: 60px;
	padding: 10px;
	border-radius: 5px;
	letter-spacing: 1px;
	transform: translateX(20px);
}




/*sulica*/
.mi-tt-arrow.bottom:before {
	border-width: 0 8px 10px 8px;
	border-style: solid;
	border-color: transparent transparent #ff3466 transparent;
	top: 50px;
	transform: translateY(-20px);
}
/* box */
.mi-tt-arrow.bottom:after {
	content: attr(data-tooltip);
	background: #ff3466;
	width: 160px;
	height: auto;
	font-size: 13px;
	font-weight: 300;
	top: 60px;
	left: -10px;
	padding: 10px;
	border-radius: 5px;
	letter-spacing: 1px;
	transform: translateY(20px);
}


/*sulica*/
.mi-tt-arrow.top:before {
	border-width: 10px 8px 0 8px;
	border-style: solid;
	border-color: #ff3466 transparent transparent transparent;
	top: -12px;
	transform: translateY(20px);
}
/* box */
.mi-tt-arrow.top:after {
	content: attr(data-tooltip);
	background: #ff3466;
	width: 160px;
	height: auto;
	font-size: 13px;
	font-weight: 300;
	bottom: 40px;
	left: -10px;
	padding: 10px;
	border-radius: 5px;
	letter-spacing: 1px;
	transform: translateY(20px);
}

.mi-tt-arrow:hover::before,
.mi-tt-arrow:hover::after {
	opacity: 1;
	transform: translateY(-2px);
}

@keyframes shake {
	0% { 
		transform: rotate(2deg);
	}
	50% {
		transform: rotate(-3deg);
	}
	70% {
		transform: rotate(3deg);
	}

	100% {
		transform: rotate(0deg);
	}
}



.mi-tt-anim {
	display:inline-block;
	float:left;
	margin-top:1em;
}
.mi-tt-anim .nomargin {
	margin-top:0!important;
}
.mi-tt-anim:hover {
	animation: shake 500ms ease-in-out forwards;
}

.mi-tt-anim.right {
	display:inline-block;
	float:right;
	/*margin-top:1em;*/
}
.mi-tt-anim.right:hover {
	animation: shake 500ms ease-in-out forwards;
}








.mi-tooltip {
	position:relative;
	width:100%;
}
/* Tooltip text */
.mi-tooltip .mi-tooltiptext, .mi-tooltip .mi-tooltiptext-ar {
	visibility:hidden;
	min-width:120px;
	width:auto;
	background-color:black;
	color:#fff;
	text-align:center;
	border-radius:6px;
	padding:4px;
	position:absolute;
	z-index:1;
	opacity: 0;
	transition: opacity 0.6s;
}
/* Show the tooltip text when you mouse over the tooltip container */
.mi-tooltip:hover .mi-tooltiptext, .mi-tooltip:hover .mi-tooltiptext-ar {
	visibility: visible;
	opacity: 1;
}

.mi-tooltip .mi-tooltiptext.left {
	top: -5px;
	right: 110%;
}
.mi-tooltip .mi-tooltiptext.right {
	top: -5px;
	left: 125%;
}
.mi-tooltip .mi-tooltiptext.top {
	/*width: 100px;*/
    bottom: 100%;
    left: 50%;
    margin-left: -50px;
}
.mi-tooltip .mi-tooltiptext.bottom {
	/*width: 100px;*/
    top: 100%;
    left: 50%;
    margin-left: -50px;
}








.mi-ttitle {
	position:relative; /* making the .mi-ttitle span a container for the tooltip text */
	/*border-bottom:1px dashed #000;*/ /* little indicater to indicate it's hoverable */
}
.mi-ttitle:before {
	content: attr(data-text); /* here's the magic */
	position:absolute;

	/* vertically center */
	top:50%;
	transform:translateY(-50%);

	/* move to right */
	/* left:100%;
	margin-left:15px; */ /* and add a small left margin */
	/*width: 120px;*/
	top:100%;
	left:0%;
	margin-left:30px;
	margin-top:2.6em;

	/* basic styles */
	width:auto;
	padding:10px;
	border-radius:10px;
	background:#000;
	color: #fff;
	text-align:center;

	display:none; /* hide by default */

	opacity:0;
	transition:.3s opacity;
}
.mi-ttitle:after {
	content: "";
	position:absolute;
	z-index:10;
	/* position tooltip correctly */
	left:100%;
	margin-left:-5px;
	/* vertically center */
	top:50%;
	transform:translateY(-50%);
	/* the arrow */
	/*
	border:10px solid #000;
	border-color: transparent black transparent transparent;
	*/
	display:none;
	opacity:0;
	transition:.3s;
}
.mi-ttitle:hover:before, .mi-ttitle:hover:after {
	display:block;
}
.mi-ttitle:hover:before {
	opacity:1;
}
.mi-ttitle:hover:after {
	opacity:1;
}


.mi-ttitle.left:before {
	/* reset defaults */
	left:initial;
	margin:initial;
	/* set new values */
	right:100%;
	margin-right:15px;
}
.mi-ttitle.right:before {
	left:100%;
	margin-left:15px; /* and add a small left margin */
}
.mi-ttitle.top:before {
	width: 120px;
	bottom: 100%;
	left: 60%;
	margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */

	/* reset defaults */
	left:initial;
	top:initial;
	margin:initial;

	bottom:100%;
	left:0%;
	margin-left:30px;
	margin-top:2.6em;
}
.mi-ttitle.bottom:before {
	top: 100%;
	left: 5%;
	margin-left:0px;
	margin-top:3em;
}











.mi-div-arrow {
    height:30px;
    background:red;
    color:#fff;
    position:relative;
    text-align:center;
    line-height:30px;
}

.mi-div-arrow:before {
    content:"";
    position:absolute;
    height:0;
    width:0;
    top:0;
	left:100%;
    border:15px solid transparent;
    border-left:15px solid red; /*#478fca;*/
}



.mi-sel-ribbon {
    padding: 0;
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
}

.mi-sel-ribbon select, .mi-div-arrow select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
	color: inherit;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
	text-indent: 1px;
    text-overflow: '';
	text-align-last: center;
	padding-right: 29px;
}

.mi-sel-ribbon select::-ms-expand, .mi-div-arrow select::-ms-expand {
	display: none;
}

.mi-sel-ribbon select:focus, .mi-div-arrow select:focus {
    outline: none;
}

.mi-sel-ribbon select option, .mi-div-arrow select option {
    margin: 40px;
    background: #fff;
    color: #222;
}






ul.mi-ul-inp {
	list-style-type:none;
	margin: 0;
	padding: 0;
	background-color:inherit;
	width:100%; 
	border:1px solid green;
	display:flex;
	box-sizing:border-box;
}
.mi-ul-inp li {
	cursor:pointer;
	border:none;
	background:none;
	float: left;
	width:auto;
	min-width:32px;
	min-height:32px;
	margin:2px;
	display:flex;
    flex-direction:row;
    align-items:center;
	justify-content:center;
}
.mi-ul-inp li.rest { min-width:auto; flex:1; background:#fff; }
.mi-ul-inp li input {
	width:100%;
	border:none;
	outline:none;
	background:none;
}
div.addon {
	width:100%;
	display:table;
	padding:2px;
}
.addon i, .addon span { 
	display:table-cell; 
	width:2.2em; 
	height:auto; 
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	text-align:center;
	vertical-align:middle;
}
.addon input { display:table-cell; width:100%; line-height:2.2em; margin:0 4px; }

.mi-ul-inp li .btn {
	text-align:center;
	vertical-align:middle;
	border:1px solid #ddd;

	border-radius:2em;
	box-sizing:border-box;

	width:2.2em;
	height:2.2em;
	padding:6px 6px;
	margin:0 2px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	opacity:1; /*0.2;*/
}
.mi-ul-inp li .btn.no-border {
	border:none;
}
.mi-ul-inp li .btn:hover {
	background:#ddd;
	color:#000;
}





ul.mi-addons {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #fff;
}
ul.mi-addons:focus-within {
	background:lightyellow;
	border:1px solid #ccc;
}
.mi-addons li {
	cursor:pointer;
	border:1px solid #eee;
	float: left;
	width:auto;
	min-width:32px;
	min-height:32px;
	margin:2px;
	display:flex;
    flex-direction:row;
    align-items:center;
	justify-content:center;
}
.mi-addons li.input {
	margin:0;
	padding:0;
	/*width:100%;*/
	overflow:hidden;
}
.mi-addons li.input ul {
	width:100%;
}



.mi-span-ico {
	float: right;
	margin-right: 6px;
	margin-top: -20px;
	position: relative;
	z-index: 2;
	color: red;
}







#mi-dialogoverlay {
	display: none;
	opacity: .8;
	position: fixed;
	top: 0px;
	left: 0px;
	background: #FFF;
	width: 100%;
	z-index: 10;
}
#mi-dialogbox {
	display: none;
	position: fixed;
	background: #000;
	border-radius:7px; 
	width:550px;
	z-index: 10;
}
#mi-dialogbox > div{ background:#FFF; margin:8px; }
#mi-dialogbox > div > #mi-dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
#mi-dialogbox > div > #mi-dialogboxbody{ background: #333; padding:20px; color:#FFF; }
#mi-dialogbox > div > #mi-dialogboxfoot{ background: #666; padding:10px; text-align:right; }

















.mi-btn {
	text-align:center;
	vertical-align:middle;
	border:1px solid #ddd;

	border-radius:2em;
	box-sizing:border-box;

	width:2.2em;
	height:2em;
	max-height:2em;
	padding:4px 6px;
	margin:0;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	/*display:table-cell;*/
	opacity:1; /*0.2;*/
}
.mi-btn:hover { background:#eee; border:none; color:#000; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); }
.mi-btn.border { border:1px solid black; }
.mi-btn.noborder { border:none; }


select.mi-select-pad {
	padding: 8px 16px;
	font-family:"Varela Round", sans-serif;
}
select.mi-select-pad option {
	padding: 8px 16px;
	font-family:"Varela Round", sans-serif;
}

table.mi-tbl-term {
	width:100%;
	border:1px solid #eee;
	border-spacing:0 4px;
	border-collapse:separate;
}
.mi-tbl-term th, td { text-align:center; white-space: nowrap; padding:4px 4px; line-height:2.2em; }
.mi-tbl-term td { background:#fff; }
.mi-tbl-term.no-background td { background:none; }
.mi-tbl-term.semi-background td { background-color:rgba(255,255,255,0.2); }
.mi-tbl-term td.error { background:#faa; }
.mi-tbl-term tr.error td, .mi-bgerror { background:#faa; animation:err-flash linear 1s 2 forwards; }
.mi-tbl-term tr.inserted td, .div-insert { background:#fff; animation:ins-flash linear 1s 2 forwards; }

.mi-bgerror { background:#faa; animation:err-flash linear 1s 8 forwards; }

@keyframes err-flash {
	0%, 50%, 100% {
		opacity: 1;
	}
	25%, 75% {
		opacity: 0;
	}
}
@keyframes ins-flash {
	0%, 50%, 100% {
		opacity: 1;
		background:#fff;
	}
	25%, 75% {
		opacity: 0;
		background:#afa;
	}
}
.mi-tbl-term tr.remove td, .div-remove { background:#aaf; animation:remove linear 0.3s 1 forwards; }
@keyframes remove {
	0%, 50%, 90% {
		opacity: 1;
	}
	25%, 70%, 100% {
		opacity: 0;
	}
}




.mi-tbl-term td:first-child { text-align:right; }
.mi-tbl-term td:last-child { text-align:right; }
.mi-tbl-term input { width:100%; border:none; outline:none; background:inherit; }
.mi-tbl-term tr:focus-within td { background:lightyellow!important; }
.mi-tbl-term td:first-child {	border-top-left-radius:50px; border-bottom-left-radius:50px; }
.mi-tbl-term td:last-child { border-top-right-radius:50px; border-bottom-right-radius:50px; }
.mi-tbl-term .btn {
	text-align:center;
	vertical-align:middle;
	border:1px solid #ddd;

	border-radius:2em;
	box-sizing:border-box;

	width:2.2em;
	height:2.2em;
	padding:6px 6px;
	margin:0 2px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	opacity:1; /*0.2;*/
}
.mi-tbl-term .btn.no-border {
	border:none;
}
.mi-tbl-term .btn:hover {
	background:#ddd;
	color:#000;
}




.mi-round { border-radius:4px; padding-left:16px; padding-right:16px; }
.mi-round-lg { border-radius:4px; padding-left:16px; padding-right:16px; }
.mi-round-x { border-radius:16px; padding-left:16px; padding-right:16px; }
.mi-round-xx { border-radius:25px; padding-left:16px; padding-right:16px; }
.mi-round-xxx { border-radius:50px; padding-left:16px; padding-right:16px; }

/*
.mi-round-l { border-radius:50px 0 0 50px; }
.mi-round-r { border-radius:0 50px 50px 0; }
*/

.mi-round-l { border-top-left-radius:50px; border-bottom-left-radius:50px; }
.mi-round-r { border-top-right-radius:50px; border-bottom-right-radius:50px; }


.mi-round-btn { border-radius:50px; }

.mi-hidden { visibility:hidden!important; }
.mi-none { display:none!important; }
.mi-block { display:block!important; }
.mi-table-cell { display:table-cell!important; }

.mi-half { width:50% }
.mi-third { width:33% }

.mi-disable-all {
	pointer-events:none;
	opacity:0.4;
}

.mi-disabled { pointer-events:none; }
.mi-transparent { background:none; color:transparent; }


.mi-add-cont {
	display:table;
	width:100%;
	border:none;
	box-sizing:border-box;
	text-align:center;
	vertical-align:middle;
	border-spacing:4px 2px;
    border-collapse:separate;
}
.mi-add-cont *.btn {
	display:table-cell;
	width:1%;
	text-align:center;
	vertical-align:middle;
	border:1px solid #ddd;

	border-radius:2em;
	box-sizing:border-box;

	width:2.2em;
	height:2em;
	max-height:2em;
	padding:4px 6px;
	margin:0;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	display:table-cell;
	opacity:1; /*0.2;*/
}
.mi-add-cont *.btn.no-border {
	border:none;
}

.mi-add-cont *.btn:hover {
	background:#ddd;
	color:#000;
}

.mi-add-cont div {
	display:table-cell;
	width:1%;
	text-align:center;
	vertical-align:middle;
	border:none;
	height:auto!important;
}
.mi-add-cont div.inp { width:100%; background:#fff; }
.mi-add-cont div.inp:focus-within { background:lightyellow; }

.mi-add-cont div.rest { width:100%; }

.mi-add-cont input {
	width:100%;
	outline:none;
	border:none;
	background:inherit;
}
/*.mi-add-cont div.inp input { width:100%; max-width:100%;}*/



.mi-add-cont div.error { border:1px solid #ff0000; }
.mi-add-cont div.warning { border:1px solid #ff8000; }
.mi-add-cont div.info { border:1px solid #0080ff; }


.mi-disable-all {
	pointer-events:none;
	opacity:0.4;
}



.mi-animate-zoomout {
	animation: animatezoomout 0.6s
}
@keyframes animatezoomout {
	from { transform: scale(1); }
	to { transform: scale(0); }
}

.mi-bounce {
	animation:bounce 4s infinite;
}
@keyframes bounce {
	0%, 10%, 20%, 30%, 40%, 50% { transform: translateY(0); }
	15% { transform: translateY(-30px); }
	25% { transform: translateY(-15px); }
	35% { transform: translateY(-5px); }
	45% { transform: translateY(-2px); }
}


.mi-flash {
	animation:flash linear 1s 4 forwards;
}
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}


.mi-burst {
	animation:burst linear 0.6s 10 forwards;
}
@-webkit-keyframes burst {
  0% {
    opacity: .6;
  }
  50% {
    transform: scale(1.9);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}



.mi-fade-out2 { animation: miFadeOut2 ease 2s; }
.mi-fade-out-green { animation: miFadeOutGreen ease 2s; }
.mi-fade-out-red { animation: miFadeOutRed ease 2s; }
@keyframes miFadeOut2 {
	0% { opacity:1; background:#fff; }
	100% { opacity:0; background:#222; display:none; }
}
@keyframes miFadeOutGreen {
	0% { opacity:1; background:#fff; }
	100% { opacity:0; background:#080; display:none; }
}
@keyframes miFadeOutRed {
	0% { opacity:1; background:#fff; }
	100% { opacity:0; background:#800; display:none; }
}







.mi-ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.mi-ul li {
	padding: 8px 16px 8px 8px;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
}

.mi-li-ico-l1 {
	margin-left: 0px;
}

.mi-ul li:last-child {
	border-bottom: none
}
.mi-nav-item {
	display: table;
	width: 100%;
}
.mi-nav-left, .mi-nav-text, .mi-nav-right {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
	padding: 8px;
}
.mi-nav-left, .mi-nav-right {
	text-align: center;
	width: 32px;
}
.mi-nav-text {
	width: calc(100% - 32px - 32px);
}


a.mi-nav-link {
	text-decoration: none;
	margin-left: 40px;
}


.w3-ul-child {
	list-style-type: none;
	padding: 0;
	margin: 0
}

.w3-ul-child li {
	padding: 8px 0px 8px 16px;
	border-bottom: 1px solid #ddd;
}

.w3-ul-child li:last-child {
	border-bottom: none
}






/* begin overlay media preview */
.mi-media-overlay {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 5; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.mi-media-content {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
.mi-media-overlay #caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

/* Add Animation - Zoom in the Modal */
.mi-media-overlay .media-content, .mi-media-overlay #caption {
	animation-name: zoom;
	animation-duration: 0.6s;
}

@keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
}

/* The Close Button */
.mi-media-overlay .close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.mi-media-overlay .close:hover,
.mi-media-overlay .close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
	.media-content {
		width: 100%;
	}
}
/* end overlay media preview */




.mi-img-cont {
	position:relative;
	overflow:hidden;
	margin:8px;
	width:200px;
	height:auto;
}
.mi-img-abs {
	position:absolute;
	left:50%;
	margin-left:-50%;
	top:50%;
	margin-top:-50%;
}

.mi-div-img {
	width: 500px;
	height: 500px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	background-image:url('img/no_image.png');
}

.mi-album-square {
	position: relative;
	width: 300px;     
	height: 300px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
.mi-album-square img {
	position: absolute;
	max-width: 100%;
	width: 100%;
	height: auto;
	top: 50%;     
	left: 50%;
	transition: 0.5s;
	transform: translate(-50%, -50%);
}
.mi-album-square img:hover {
	max-width: 125%;
	width: 125%;
	transform: translate(-55%, -55%);
}
.mi-album-square img.landscape {
	height: 100%;
	width: auto;
}
.mi-album-square img.landscape:hover {
	height: 125%;
	width: auto;
}



.mi-ul-album {
	display: block;
	width: 100%;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.mi-ul-album li {
	display: inline-block;
	min-width:150px;
	border:1px solid #ccc;
}


.mi-col-container {
    display: table; /* Make the container element behave like a table */
    width: 100%; /* Set full-width to expand the whole page */
}

.mi-col-item {
    display: table-cell; /* Make elements inside the container behave like table cells */
	text-align: center;
	vertical-align: middle;
}




.mi-row {
	display:table;
	width:100%;
}
.mi-col {
	display:table-cell;
	width:1%;
	vertical-align:middle;
}
.mi-col.top { vertical-align:top; }
.mi-col.bottom { vertical-align:bottom; }
.mi-col.middle { vertical-align:middle; }

.mi-col-rest {
	display:table-cell;
	overflow:hidden;
}
[class*="mi-col"] {
	padding:4px;
}

.info-icon {
	width:52px;
	height:52px;
	border-radius: 50%;
	padding:10px 8px;
	vertical-align:top;
}



.mi-info-card {
	display:inline-block;
	border:1px solid #eee;
	max-width:300px;
	padding:0;
	line-height:1.6em;
	padding:8px;
	margin-right:16px;
}
.mi-info-card .mi-info-icon {
	display:inline-block;
	border:none;
	vertical-align:top;
}
.mi-info-card .mi-info-icon .mi-icon {
	width:52px;
	height:52px;
	padding:8px 8px;
	border-radius:50%;
	font-size:2em;
	line-height:1em;
}
.mi-info-card .mi-info-data {
	display:inline-block;
	border:none;
}






/*
if (i<=180){
	activeBorder.css('background-image','linear-gradient(' + (90+i) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
}
else{
	activeBorder.css('background-image','linear-gradient(' + (i-90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
}

*/

.mi-pie-percent {
	--v:calc( ((18/5) * var(--p) - 90)*1deg);
	width:52px;
	height:52px;
	display:inline-block;
	border-radius:50%;
	padding:4px;
	background:
		linear-gradient(#E6F4F7,#E6F4F7) content-box,
		linear-gradient(var(--v), #A2ECFB     50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
		linear-gradient(var(--v), transparent 50%,#39B4CC     0) 0/min(100%,(var(--p) - 50)*100%),
		linear-gradient(to right, #A2ECFB 50%,#39B4CC 0);
}
.mi-pie-percent span {
    top: 8px;
    position: relative;
    font-size: 0.8em;
}




.mi-circle-percent {
    width: auto;
    height: auto;
    margin: auto auto;
}
.prec {
    top: 8px;
    position: relative;
    font-size: 0.8em;
}
.circle{
    position: relative;
    top: 5px;
    left: 5px;
    text-align: center;
    width: 42px;
    height: 42px;
    border-radius: 100%;
    background-color: #E6F4F7;
}
.active-border{
    position: relative;
    text-align: center;
    width: 52px;
    height: 52px;
    border-radius: 100%;

    background-color:#39B4CC;
    background-image:
        linear-gradient(300deg, transparent 50%, #A2ECFB 50%),
        linear-gradient(90deg, #A2ECFB 50%, transparent 50%);
    
}














.mi-bar {
	width:100%;
	display: table;
}
.mi-bar-item {
	display: table-cell;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	padding: 0 16px;
	width:1%;
    white-space: nowrap;
}
.mi-bar-rest {
	display: table-cell;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	padding: 0 16px;
	overflow:hidden;
}
.mi-bar-half {
	display: table-cell;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	padding: 0 16px;
	width:50%!important;
}
.mi-bar-third {
	display: table-cell;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	padding: 0 16px;
	width:33%!important;
}
.mi-bar-quarter {
	display: table-cell;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	padding: 0 16px;
	width:25%!important;
}
.mi-bar-none { display:none; }

.mi-left { text-align:left; }
.mi-right { text-align:right; }
.mi-center { text-align:center; }
.mi-top { vertical-align:top; }
.mi-bottom { vertical-align:bottom; }
.mi-middle { vertical-align:middle; }


.mi-padding-0 { padding:0!important; }
.mi-padding-4 { padding:4px!important; }
.mi-padding-8 { padding:8px!important; }
.mi-padding-16 { padding:16px!important; }
.mi-padding-24 { padding:24px!important; }
.mi-padding-32 { padding:32px!important; }

.mi-padding-h4 { padding:0 4px!important; }
.mi-padding-h8 { padding:0 8px!important; }
.mi-padding-h16 { padding:0 16px!important; }
.mi-padding-h24 { padding:0 24px!important; }
.mi-padding-h32 { padding:0 32px!important; }

.mi-padding-v4 { padding:4px 0!important; }
.mi-padding-v8 { padding:8px 0!important; }
.mi-padding-v16 { padding:16px 0!important; }
.mi-padding-v24 { padding:24px 0!important; }
.mi-padding-v32 { padding:32px 0!important; }

 /* If the browser window is smaller than 600px, make the columns stack on top of each other */
 @media only screen and (max-width: 600px) {
	.mi-bar { display:block; width:100%;}
	.mi-bar-item, .mi-bar-half, .mi-bar-rest {
		display: block;
		width: 100%;
	}
} 


/*
<span class="w3-container w3-border w3-round-xlarge" style="display:inline-block;">
*/
.mi-badge {
	border-radius:16px;
	padding: 0.01em 0.3em;
}





/* Remove default bullets */
ul, .mi-menu-ul {
	list-style-type: none;
}

/* Remove margins and padding from the parent ul */
.mi-menu-ul {
	margin: 0;
	padding: 0;
}

.mi-menu-ul li {
	border-bottom: 1px solid #d2d2d2;
	padding: 15px 10px;
}
.mi-menu-ul li:last-child {
	border: 0;
}

.mi-menu-child {
	list-style-type: none;
	padding: 0;
	margin: 0
}

.mi-menu-child li {
	padding: 8px 0px 8px 16px;
	border-bottom: 1px solid #ddd;
}

.mi-menu-child li:last-child {
	border-bottom: none
}



/* Style the caret/arrow */
.caret {
	cursor: pointer;
	user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
	content: "\25B6";
	color: black;
	display: inline-block;
	margin-right: 6px;
	transition: all 0.5s;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
	transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
	display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
	display: block;
} 







/* (A) LIST TO MENU */
.mi-ul-tree, .mi-ul-section ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.mi-ul-tree {
	background: #fbfbfb;
	border: 1px solid #d2d2d2;
}
.mi-ul-tree li {
	border-bottom: 1px solid #d2d2d2;
	padding: 15px 10px;
}
.mi-ul-tree li:last-child {
	border: 0;
}

/* (B) SUB-SECTIONS */
/* (B1) TOGGLE SHOW/HIDE */
.mi-ul-section ul { display: none; }
.mi-ul-section input:checked ~ ul { display: block; }

/* (B2) HIDE CHECKBOX */
.mi-ul-section input[type=checkbox] { display: none; }

/* (B3) ADD EXPAND/COLLAPSE ICON  */
.mi-ul-section { 
	position: relative; 
	padding-left: 35px !important;
}
.mi-ul-section label:after {
	content: "\0002B";
	position: absolute;
	top: 0; left: 0;
	padding: 10px;
	text-align: center;
	font-size: 30px;
	color: #f00;
	transition: all 0.5s;
}
.mi-ul-section input:checked ~ label:after { 
	color: #23c37a;
	transform: rotate(45deg);
}

/* (B4) SUB-SECTION ITEMS */
.mi-ul-section ul { margin-top: 10px; }
.mi-ul-section ul li { color: #d43d3d; }

/* DOES NOT MATTER */
/*
.mi-ul-tree {
	font-family: arial, sans-serif;
	font-size: 18px;
}
*/



@media all and (min-width: 981px) {
	/* define positioning and styling for submenu */
	.et_vertical_nav #main-header #top-menu li ul {
		position: relative;
		display: none;
		top: 0;
		left: 0;
		width: auto;
		border-left-width: 0;
		opacity: 1;
		-webkit-animation: none;
		animation: none;
		visibility: visible;
		-webkit-box-shadow: none;
		box-shadow: none;
		background-color: rgba(0, 0, 0, 0.1);
		margin-bottom: 15px;
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
	}

	/* decrease the menu container left and right padding */
	.et_vertical_nav #main-header .container {
		margin: 0 20px;
	}
	/* make the fixed header scrollable */
	.et_vertical_nav.et_vertical_fixed #page-container #main-header {
		overflow-y: auto;
	}
	/* decrease the submenu top and bottom padding */
	.nav li ul {
		padding: 5px 0;
	}

	/* adjust the lower level submenu positioning and remove box-shadow */
	.et_vertical_nav #main-header #top-menu li ul ul {
		top: 0;
		left: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	/* adjust the menu item links spacing */
	.et_vertical_nav #main-header #top-menu > li > a {
		margin-right: 0px;
		padding-right: 0px;
	}

	/* adjust parent item down arrow position */
	.et_vertical_nav #main-header #top-menu > li > a:after {
		right: 0px;
	}

	/* adjust lower level parent item down arrow position */
	.et_vertical_nav #top-menu li .menu-item-has-children>a:first-child:after {
		right: 10px;
	}

	/* decrease the submenu item left and right padding */
	#top-menu li li {
		padding: 0 10px;
	}

	/* adjust submenu item link width and padding */
	#top-menu li li a {
		width: auto;
		padding: 6px;
	}

	/* remove right border and adjust positioning of the right vertical menu submenu */
	.et_vertical_nav.et_vertical_right #main-header #top-menu li ul {
		right: 0;
		border-right-width: 0;
	}

}


.bg-image {
	/* The image used */
	background-image: url("bg_index1.jpg");

	/* Add the blur effect */
	filter: blur(8px);
	-webkit-filter: blur(8px);

	/* Full height */
	height: 100%;

	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}





/* HAMBURGER */

.hamburger {
	padding: 15px 15px;
	display: inline-block;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible;
}
.hamburger:hover { opacity: 0.7; }
.hamburger-box {
	width: 40px;
	height: 24px;
	display: inline-block;
	position: relative;
}
.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: 40px;
	height: 4px;
	background-color: #fff;
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
	content: "";
	display: block;
}
.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }

/*
* Spin
*/
.hamburger--spin .hamburger-inner {
	transition-duration: 0.22s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
.hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.active .hamburger-inner {
	transform: rotate(225deg);
	transition-delay: 0.12s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
}
.hamburger--spin.active .hamburger-inner::before {
	top: 0;
	opacity: 0;
	transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger--spin.active .hamburger-inner::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* HAMBURGER */






 /* The switch - the box around the slider */
.mi-switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

/* Hide default HTML checkbox */
.mi-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.mi-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.mi-slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .mi-slider {
	background-color: #2196F3;
}

input:focus + .mi-slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .mi-slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.mi-slider.round {
	border-radius: 34px;
}

.mi-slider.round:before {
	border-radius: 50%;
}
/* The switch - the box around the slider */


ul.imgflex {
	font-size: 0;
	list-style: none;
	width: 100%;
	padding-left: 0px;
}

ul.imgflex li {
	background: #A9A9A9;
	display: inline-block;
	width: 33.3%;
	text-align:center;
}

ul.imgflex li:hover {
  background: #cdc8c8;
}

ul.imgflex li img {
	opacity: 0.5;
	/*width: 100%;*/
	max-width:150px;
}

ul.imgflex li.feature {
	background: #708090;
	float: left;
	width: 66.6%;
}

ul.imgflex li.feature:hover {
	background: #95a4b2;
}

ul.imgflex li.two {
	background: #2F4F4F;
}
ul.imgflex li.two:hover {
  background: #668989;
}

@media (max-width: 640px) {
	ul.imgflex li {
		width: 100%;
	}

	ul.imgflex li.feature {
		width: 100%;
	}
}


.mi-row-flex {
	display: flex;
	flex-wrap: wrap;
	padding: 0 8px;
}

/* Create four equal columns that sits next to each other */
.mi-col-flex {
	flex: 10%;
	max-width: 10%;
	padding: 0 8px;
}

.mi-col-flex img {
	margin-top: 16px;
	vertical-align: middle;
	width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 990px) {
	.mi-col-flex {
		flex: 25%;
		max-width: 25%;
	}
}
@media screen and (max-width: 750px) {
	.mi-col-flex {
		flex: 50%;
		max-width: 50%;
	}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	.mi-col-flex {
		flex: 100%;
		max-width: 100%;
	}
}