/* tag */
html {font-family: var(--font-general); line-height: 1.25; letter-spacing: 0.05rem; scrollbar-width: thin; color: var(--color-dark); cursor: default;}

html, body {height:100%; width:100%;}

a {color: inherit; text-decoration: none; cursor: pointer;}
a:hover {text-decoration: none;}

h1, h2, h3 {font-family: var(--font-header); font-weight: lighter; text-align: center; overflow-wrap: break-word;}

h1 {font-size: 250%; margin: 4rem 0;}
h2 {font-size: 200%; margin: 3rem 0;}
h3 {font-size: 150%; margin: 2rem 0;}
/* txt color */
.intro, .article-header, .main.service .item {color:white; text-shadow: var(--text-shadow-dark); font-weight: lighter;}
/* Content */
.content {margin: 0 auto;}
.____content ul {list-style-image: var(--ul-general);}
.content img {width: 100%; _height:auto;}
___.content.indent {padding-top: 3rem;}
__.content.linkable a {color: var(--text-blue);}
/* Menu */
.menu {position: fixed; top:0; width: 100%; color:white; font-weight: lighter; font-family: var(--font-menu); font-size: 85%; background-color: var(--bg-menu); z-index: 10;}

.menu .content {height: 100%; display: flex; justify-content: space-between; align-content: center;}

.menu .list {display: flex;}
.menu .list .current {font-weight: bold;}

.menu .wide {height: 3rem;}
.menu .wide .wide-left {display: flex; align-items: center;}
.menu .wide .wide-right {display: flex; align-items: center;}

.menu .wide .separator {width: 0.2rem; height:0.2rem; margin-left: 0.75rem; background: url(/img/general/menu/separator.svg);}

.menu .wide .list-main {align-items: center;}
.menu .wide .list-section {align-items: center;}
.menu .wide .list-section .item {margin-left: 0.75rem;}
.menu .wide .list-control {align-items: center;}

.menu .narrow {display: none;}

.menu .narrow .content {flex-direction: column; }

.menu .narrow .separator {width: 50%; height:1px; background: var(--color-menu-separator);}

.menu .narrow .list {flex-direction: column;}
.menu .narrow .list-section {_align-items: flex-start; margin: 1rem 0;}
.menu .narrow .list-section .item {margin: 0.5rem 0;}

.menu .item .title {display: inline-block;}
.menu .item .img {height: 1.25rem; width: 1.25rem; background-position: center; background-size: cover;}
.menu .item.item-logo .img {height: 2.5rem; width: 6rem; background-size: contain; background-repeat: no-repeat;}
.menu .item.item-menu .img {cursor: pointer;}
/* Block */
.block {font-family: var(--font-header); padding: 4rem 0;}
.block a {color: inherit !important;}
.block .content {display: flex; justify-content: space-around; align-items: baseline; flex-wrap: wrap;}
.block .item {display: flex; flex-direction: column; align-items: center; width: 14rem; margin: 2rem;}
.block .item .img {height: 4rem; width: 4rem; background-position: center; background-size: cover; margin-bottom: 1rem;}
.block .item .title {text-align: center;}
/* BlockOfPictures */
.blockOfPictures .header {display: flex; align-items: center; flex-direction: column; justify-content: center; width:80%; padding: 5rem 0; margin: 0 auto; text-align: center;}
.blockOfPictures .header .title {font-size:250%; font-family: var(--font-header); font-weight: lighter;}
.blockOfPictures .header a {color: var(--color-link);}
.blockOfPictures .header a:hover {text-decoration : underline; text-decoration-color: var(--color-link);}
/* Main Service */
.main.service {padding-bottom: 1rem; background: var(--bg-gray); font-family: var(--font-header);}
.main.service .list {display: flex; flex-wrap: wrap;}
.main.service .item {height: 20rem; flex-grow: 1; _flex-basis: 0; background-position: center; background-size: cover; margin-bottom: 1rem; filter: saturate(90%); border-radius: 1rem;}
.main.service .item .overlay {display: flex; align-items: flex-end; justify-content: center; height: 100%; width: 100%; border-radius: 1rem; background-image: var(--bg-service-overlay);}
.main.service .item .title {max-width: 90%; font-size: 150%; margin-bottom: 2.5rem; padding: 0.5rem; text-align: center;}
/* Main Promo */
---.main.promo .header {padding: 6rem 0;}
.main.promo .list {display: flex; flex-wrap: wrap;}
.main.promo .item {height: 20rem; flex-grow: 1; flex-basis: 0; background-position: center; background-size: cover; _filter: saturate(90%); border-radius: 1rem;}
/* Main Intro */
.intro {display: flex; justify-content: center; flex-direction: column; height: 100%; width: 100%; background: var(--bg-black) center/cover; display: flex; color: var(--text-light); font-weight:lighter}
.intro:before {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: var(--bg-intro-overlay); pointer-events: none;}
.intro .content {z-index: 4;}
.intro .info {display: flex; flex-direction: column; max-width: 66%;}
.intro .info .item {margin: 0.5rem 0;}
.intro .company {font-size: 200%; _font-weight: bold; font-family: var(--font-company);} 
.intro .title {font-size: 150%;  font-family: var(--font-header);} 
.intro .text {_font-weight: normal;}
.intro .order {padding: 0.75rem; font-size: 125%; box-shadow: 0 0 3rem var(--color-light-dim);}
/* Article */
.article {min-height: 100%;}
.article a {color: var(--color-link);}
.article a:hover {text-decoration : underline; text-decoration-color: var(--color-link);}
.article.indent {padding-top: 3rem; }

.article-header .img {height:20rem; _text-align: center; background-position: center; background-repeat: no-repeat; background-color: var(--bg-black)}
.article-header .overlay {display: flex; align-items: center; height:20rem; background-image: var(--bg-article-overlay);}
.article-header .header {width:100%; display: flex; align-items: center; flex-direction: column; text-align: center; margin-top: 3rem;}
.article-header .header .title {font-size: 300%;  font-family: var(--font-header);}

.article-content {padding-bottom: 4rem;}
/* Footer */
.footer {background: var(--bg-gray); font-size: 75%; padding: 4rem 0;}
.footer > .content {display: flex; flex-direction: column;}
.footer > .content > div {margin: 0.5rem 0;}
.footer .links {display: flex;}
.footer a:hover {text-decoration : underline;}
/* Order */
.order.content {display: flex; justify-content: center;}

.order.form {display: flex; align-items: center; flex-direction: column; padding: 2rem 0 4rem 0; font-family: var(--font-header); width: 20rem;}
.order.form .input {padding: 0.5rem; border-radius: 1rem; background-color: var(--bg-gray); border: none; outline: none;}
.order.form .input-line {height:2rem; width: auto;}
.order.form .input-line:invalid {color: var(--color-dark-05);}
.order.form .input-radio {height: 1rem; width: 1rem;}

.order.form .input-textarea {height:16rem; resize: none;}
.order.form .input-action {border: none; margin: 0 auto; display:block; outline: none;}
.order.form .input-check {display: none;}

.order.form .field {display: flex; flex-direction: column; margin: 1rem 0; width:100%;}
.order.form .field > .title {font-size: 125%; margin: 0.5rem 0;}
.order.form .field .item {display: flex; flex-direction: column;}
.order.form .field .list {display: flex; flex-direction: column; margin:0 0 0.25rem 1rem;}
.order.form .field .list > .item {display: flex; flex-direction: row; align-items: center; margin: 0.25rem 0;}
.order.form .field .list > .item > input {margin-right: 0.75rem;}

.order.submitted {display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width:80%; height:100%; margin: 0 auto;}
.order.submitted .msg {margin-bottom: 4rem;}
/* Pay */
.pay.article .btn {margin: 4rem 0 2rem 0;}
.pay.article .list {display: flex; justify-content: center; flex-wrap: wrap; margin: 2rem 0 4rem 0;}
.pay.article .list .icon {width: 2rem; height:2rem; margin: 0.25rem; background-size: contain; background-repeat: no-repeat; background-position: center;}
/* Btn */
div.btn-general {font-family: var(--font-header); background: var(--bg-btn); display: inline-block; border-radius: 1rem;}
div.btn-action, input.btn-action {display: inline-block; padding: 1rem; color: white; font-family: var(--font-header); font-size: 125%; font-weight: lighter; background: var(--color-dark); border-radius: 1rem; cursor: pointer;}
div.btn.centered, input.btn.centered {display: flex; justify-content: center;}
a.btn-action:hover {text-decoration: none;}
/* Blur */
@supports not ((-webkit-backdrop-filter: blur(0.5rem)) or (backdrop-filter: blur(0.5rem))) {
	.blur {background-color: var(--color-insteadOfBlur);}
}
@supports ((-webkit-backdrop-filter: blur(0.5rem)) or (backdrop-filter: blur(0.5rem))) {
	.blur {backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem);}
}