@import url("style-base.css");
@import url("style-images.css");
@import url("/cdn/fonts/style-symbols.css");

 /** { box-shadow: 0 0 1px red; } */

 /*
 * icon
 *
 */

.icon-div { padding: 0px 24px; background-image: url('data:image/svg+xml; utf8, <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="50%" x2="100%" y2="50%" stroke="black" stroke-width="2"/></svg>'); }

.icon-40 { display: inline-block; width: 40px; height: 40px; vertical-align: middle; border-radius: 12px; font-family: 'helvetica-text-bold'; font-size: 25px; line-height: 40px; text-align: center; }
.icon-disk40 { display: inline-block; width: 40px; height: 40px; vertical-align: middle; border-radius: 20px; font-family: 'helvetica-text-bold'; font-size: 25px; line-height: 40px; text-align: center; }
.icon-60 { display: inline-block; width: 60px; height: 60px; vertical-align: middle; border-radius: 12px; font-family: 'helvetica-text-bold'; font-size: 37.5px; line-height: 60px; text-align: center; }
.icon-disk60 { display: inline-block; width: 60px; height: 60px; vertical-align: middle; border-radius: 30px; font-family: 'helvetica-text-bold'; font-size: 37.5px; line-height: 60px; text-align: center; }
.icon-120 { display: inline-block; width: 120px; height: 120px; vertical-align: middle; border-radius: 12px; font-family: 'helvetica-text-bold'; font-size: 75px; line-height: 120px; text-align: center; }
.icon-disk120 { display: inline-block; width: 120px; height: 120px; vertical-align: middle; border-radius: 60px; font-family: 'helvetica-text-bold'; font-size: 75px; line-height: 120px; text-align: center; }
img.icon-disk40, img.icon-40 { max-width: 40px; max-height: 40px; width: auto; height: auto; }
img.icon-disk60, img.icon-60 { max-width: 60px; max-height: 60px; width: auto; height: auto; }
img.icon-disk120, img.icon-120 { max-width: 120px; max-height: 120px; width: auto; height: auto; }

/*
 * accordion
 *
 */

.accordion { display: block; padding-left: 24px; padding-right: 24px; border-radius: 12px; text-decoration: none; color: black; }
.accordion a { display: block; }
.accordion span:before { float: right; font-family: "symbol"; content: "\e1d2"; }
.accordion a.active span:before { content: "\e1d3"; }
.accordion-details { display: none; }
.accordion a.active + .accordion-details { display: block; }

/*
 * form
 *
 */

.action { display: inline-block; min-width: 144px; padding: 0 16px; margin: 6px 0; font-family: "helvetica-text-bold"; font-size: 18px; line-height: 32px; text-align: center; text-decoration: none; color: white; background-color: #166EAF; border-style: solid; border-width: 2px; border-radius: 20px; border-color: #555; }
.bg-black .action, .bg-grey1 .action { color: white; background-color: rgba(0, 0, 0, 0.33); border-color: white; }
.bg-mireo .action { color: white; background-color: transparent; border-color: white; }
.action:hover { color: white; background-color: #00A1DF; }
.bg-mireo .action:hover { background-color: rgba(0, 0, 0, 0.33); }

a.flat { text-decoration: none; color: inherit; border: none; }
a.flat:hover { text-decoration: none; color: inherit; border: none; }
a.flat:visited { text-decoration: none; color: inherit; border: none; }
a.blue-hover:hover { color: #00A1DF; font-family: 'helvetica-text-bold'; text-decoration: underline; }
a.with-icon:before { font-family: "symbol"; content: "\e338\e002"; }


button.flat { outline: none; background: none; border: none; text-align: center; text-decoration: none; padding: 0px 12px; cursor: pointer; }

input.flat, select.flat {
	display: block;
	width: 100%;
	padding: 0 6px; margin: 0;
	font-size: 17px; line-height: 36px;
	background: none; border: 0px solid; border-bottom: 1px solid #A5A5A5; border-radius: 0;
	outline: none; -webkit-box-shadow: none; box-shadow: none;
	-moz-appearance: none; -webkit-appearance: none; appearance: none;
}

label.flat {
	display: block; width: 100%; padding: 0 6px; margin: 0; font-size: 17px; line-height: 36px;	color: #A5A5A5;
	cursor: pointer;
	/*noselect*/ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

input[type=file] {
	border: 0; clip: rect(0, 0, 0, 0); height: 1px; overflow: hidden; padding: 0; position: absolute !important; white-space: nowrap; width: 1px;
}

select.flat {
	display: block;
	width: 100%;
	padding: 0 6px; margin: 0;
	font-size: 17px; line-height: 36px;
	color: #A5A5A5;
	background-image: url('data:image/svg+xml; utf8, <svg viewBox="-10 -10 20 20" xmlns="http://www.w3.org/2000/svg"><path transform="scale(0.0125)" fill="#A5A5A5" d="M-160 80 H160 L0 360 Z M-160 -80 H160 L0 -360 Z"/></svg>'); background-position: center right; background-repeat: no-repeat;
	border: 0px solid; border-bottom: 1px solid #A5A5A5; border-radius: 0;
	outline: none; -webkit-box-shadow: none; box-shadow: none;
	-moz-appearance: none; -webkit-appearance: none; appearance: none;
}

textarea.flat {
	display: block;
	width: 100%; height: 276px;
	padding: 6px; margin: 0;
	font-size: 17px; line-height: 25px;
	background: none; border: 1px solid #A5A5A5; border-radius: 6px;
	outline: none; -webkit-box-shadow: none; box-shadow: none;
	-moz-appearance: none; -webkit-appearance: none; appearance: none;
	resize: none;
}

select.flat:hover, select.flat:focus, input.flat:hover, input.flat:focus, textarea.flat:focus, textarea.flat:hover { border-color: black; }
select.flat::-ms-expand { display: none; }
input.flat:placeholder, textarea.flat:placeholder { color: #A5A5A5; }
input.action { display: block; }

.item { position: relative; display: table; width: 100%; }
.item > * { display: table-cell; vertical-align: top; }
.item > *:first-child { width: 60px; }
.item > *:nth-child(n+2) { padding-left: 12px; }
.item .item-desc0 { font-family: 'helvetica-text-light'; font-size: 14px; line-height: 20px; }
.item .item-desc1 { font-family: 'helvetica-text-light'; font-size: 17px; line-height: 30px; }
.item .item-desc0:first-line, .item .item-desc1:first-line { font-family: 'helvetica-text-bold'; font-size: 18px; }
a > .item { padding: 6px; border: 1px solid rgba(0, 0, 0, 0); }
a:hover > .item { border: 1px solid black; border-radius: 6px; }
.bg-black a:hover > .item, .bg-grey1 a:hover > .item { border: 1px solid white; border-radius: 6px; }

a.item { padding: 6px; border: 1px solid rgba(0, 0, 0, 0); text-decoration: none; color: inherit; }
a.item:hover { border: 1px solid black; border-radius: 6px; }
.bg-black a.item:hover { border: 1px solid white; border-radius: 6px; }

.tag { font-family: 'helvetica-text-regular'; border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.tag:not(:last-of-type) { margin-right: 12px; }

.toc { list-style-type: decimal; }
.toc > li { padding-left: 0.3em; color: #00A1DF; }
.toc > li > a { color: #00A1DF; text-decoration: none; }
.toc > li > p { color: #000; }

/*
 * header and menu
 *
 */

header {
	display: block;
	width: 100%; height: 360px;
	background-position: bottom; background-size: auto 360px; background-repeat: no-repeat;
	-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

header.tall {
	height: 720px;
	background-position: bottom; background-size: auto 720px; background-repeat: no-repeat;
}

nav a.logo { z-index: 101; display: block; position: absolute; top: 0; width: 138px; height: 96px; padding: 0; margin: 0; background-image: url(../img/assets/mireo-logo.svg); background-position: top; background-repeat: no-repeat; }
.bg-black nav a.logo { background-image: url(../img/assets/mireo-logo-dark.svg); }

/** wide-menu */

@media only screen and (min-width: 768px) {
	nav { z-index: 100; position: relative; }
	#menu-sw { display: none; }

	#menu { width: 100%; padding-top: 48px; text-align: right; }
	#menu > *:last-child { margin-left: 24px; }
	.menu-item { display: inline-block; height: 48px; padding: 0 24px; font-family: 'helvetica-text-bold'; font-size: 18px; line-height: 48px; cursor: pointer; text-decoration: none; color: inherit; }
	.menu-item:focus, .menu-item:hover { border-bottom: 4px solid black; outline: none; }
	.bg-black .menu-item:focus, .bg-black .menu-item:hover { border-bottom: 4px solid white; outline: none; }
	.menu-item:focus + .sub-menu, .menu-item:hover + .sub-menu { display: block; }
	.no-hover:hover + .sub-menu { display: none; }
	.sub-menu { display: none; z-index: 100; position: absolute; top: 96px; left: 0; width: 100%; padding: 48px 24px; text-align: left; color: inherit; border: 1px solid black; background-color: rgba(255, 255, 255, 0.95); border-radius: 12px; box-shadow: 0 48px 72px 0 rgba(0, 0, 0, 0.5); }
	.bg-black .sub-menu { border: 1px solid white; background-color: rgba(0, 0, 0, 0.9); }
	.sub-menu:hover { display: block; }
}

/** narrow-menu */

@media only screen and (max-width: 767px) {
	nav { z-index: 100; position: relative; }
	#menu-sw {
		z-index: 101; float: right; position: relative; top: 48px; height: 48px; width: 48px;
		cursor: pointer; outline: none; background: none; border: none;
		vertical-align: middle;
		font-family: "symbol"; font-size: 37.5px; line-height: 48px; text-align: right;
	}
	#menu-sw:active { color: inherit; }
	#menu-sw:before { content: "\e334"; }
	#menu-sw.show-menu:before { content: "\e1cb"; }
	.bg-black #menu-sw { color: white; }

	#menu { z-index: -1; display: none; position: fixed; width: 100%; height: 100vh; /*calc(100vh - 96px);*/ top: 0; left: 0; padding: 120px 24px; background-color: white; overflow: scroll; }
	#menu > * { margin-bottom: 48px; }
	#menu.show-menu { display: block; }
	.bg-black #menu { background-color: black; }
	#menu.show-menu::after { display: block; z-index: 100; position: fixed; width: 100%; height: 96px; left: 0; top: 0; background-color: white; content: ""; }
	.bg-black #menu.show-menu::after { background-color: black; }
	.menu-item { display: none; }
}

.title-hidden p { opacity: 0; }
@media only screen and (max-width: 767px) {
	.title-hidden { margin: 0 !important; }
	.title-hidden p { display: none; }
}


/*
 * contact-us products
 *
 */
.product-link { margin: auto; }
.product-link .icon-120 { transition: all 300ms ease-out; }
.product-link:hover .icon-120 { transform: scale(1.2); transition: all 300ms ease-out; }

/*
 * feature table
 *
 */

.feature-table {
	width: 100%;
	border-collapse: collapse;
}

.feature-table th {
	background: #E0E1E4;
	padding: 1rem 0.8rem;
	text-align: left;
	vertical-align: top;
}
.feature-table td {
	border-bottom: 1px solid #E0E1E4;
	padding: 0.4rem 0.8rem;

}
.feature-table th:not(:first-child), td:not(:first-child) {
	text-align: right;
}
.feature-table td.checked:after {
	content: '\2713';
}
.feature-table td.unchecked:after {
	content: '\2717';
	color: #E0E1E4;
}