:root {
	--w-full : 100vw;
	--h-full : 100vh;
	--h-topbar : 50px;
	
	
	--color-abs : #fff;
	--color-d-abs : #00130e;
	--color-main : #00a49b;
	--color-main-tone-30 : #54c9c3;
	--color-main-tone-30-t : rgba(84, 201, 195, .6);
	--color-main-tone-110 : #00543b;
	--color-gold : #eda94c;
	--color-gold-tone-30 : #fdcf4c;
	--color-gold-tone-30-t : rgba(253, 207, 78, .6);
	--color-error : #e72101;
	--color-error-tone-30 : hsl(from var(--color-error) h s calc(l + 30));
}

* {
	box-sizing : border-box;
	scroll-behavior : smooth;
}

body.dark {
	--bg : var(--color-d-abs);
	--bg-tone-30 : #002321;
	--text : var(--color-abs);
}

body.atf {
	--color-main : var(--color-gold);
	--color-main-tone-30 : var(--color-gold-tone-30);
	--color-main-tone-30-t : var(--color-gold-tone-30-t);
	--color-main-tone-110 : rgb(from var(--color-gold) r g b);
}

body {
	--bg : var(--color-abs);
	--bg-tone-30 : #dfdfde;
	--text : var(--color-d-abs);
	
	margin : 0px;
	padding : 0px;
	font-family : "century gothic";
	background-color : var(--bg);
	color : var(--text);
	overflow-x : hidden;
}

.sgrad {
	background : linear-gradient(to bottom, var(--color-main), var(--color-main-tone-110), var(--color-gold)), radial-gradient(var(--color-main-tone-30), var(--color-gold-tone-30), var(--color-gold), var(--color-main-tone-110)), linear-gradient(56deg, var(--color-main), var(--color-main-tone-30-t), var(--color-gold-tone-30), var(--color-main)), linear-gradient(243deg, var(--color-main-tone-30-t), var(--color-gold-tone-30), var(--color-main));
	background-blend-mode : hue;
}

i.fa.sgrad.bclipped {
	background : none;
}

i.fa.sgrad.bclipped::before {
	background : linear-gradient(to bottom, var(--color-main), var(--color-main-tone-110), var(--color-gold)), radial-gradient(var(--color-main-tone-30), var(--color-gold-tone-30), var(--color-gold), var(--color-main-tone-110)), linear-gradient(56deg, var(--color-main), var(--color-main-tone-30-t), var(--color-gold-tone-30), var(--color-main)), linear-gradient(243deg, var(--color-main-tone-30-t), var(--color-gold-tone-30), var(--color-main));
	background-blend-mode : hue;
	background-clip : text;
	color : transparent;
}

.b-sgrad {
	position : relative;
	background-color : var(--bg);
}

.b-sgrad::before {
	content : " ";
	width : calc(100% + 2px);
	height : calc(100% + 2px);
	position : absolute;
	left : -1px;
	top : -1px;
	z-index : -1;
	background : linear-gradient(to bottom, var(--color-main), var(--color-main-tone-110), var(--color-gold)), radial-gradient(var(--color-main-tone-30), var(--color-gold-tone-30), var(--color-gold), var(--color-main-tone-110)), linear-gradient(56deg, var(--color-main), var(--color-main-tone-30-t), var(--color-gold-tone-30), var(--color-main)), linear-gradient(243deg, var(--color-main-tone-30-t), var(--color-gold-tone-30), var(--color-main));
	background-blend-mode : hue;
}

.item.b-sgrad::before {
	border-radius : 8px;
}

.grad {
	background : url('/assets/images/pbaner.jpg');
	background-size : cover;
}

.shell.grad {
	background-position : left, left, left, left, 0px -300px;
}

.shell.grad.nopos {
	background-position : left, left, left, left, left;
}

.bg-gold {
	background-color : var(--color-gold);
}

.bg-main {
	background-color : var(--color-main);
}

.bg {
	background-color : var(--bg);
}

.bg-t {
	background-color : rgb(from var(--bg) r g b / 0.8);
	backdrop-filter : blur(2px);
}

.gradbg-t {
	background : linear-gradient(to right, rgb(from var(--bg) r g b / 0.1), rgb(from var(--bg) r g b / 0.7), rgb(from var(--bg) r g b / 0.9), rgb(from var(--bg) r g b / 1));
}

.bg-t-30 {
	background-color : rgb(from var(--bg) r g b / 0.3);
	backdrop-filter : none;
}

.bgd-t-30 {
	background-color : rgb(from var(--color-d-abs) r g b / 0.3);
	backdrop-filter : none;
}

.bg-t-50 {
	background-color : rgb(from var(--bg) r g b / 0.5);
	backdrop-filter : none;
}

.bg-fixed {
	background-attachment : fixed;
}

/*********************** shells *************************/

.shell {
	width : 100%;
	margin : 0px;
	padding : 0px;
	display : flex;
}

.shell.wrap {
	flex-wrap : wrap;
}

.shell.inline {
	flex-wrap : nowrap;
}

.shell,
.shell.left,
.left {
	justify-content : flex-start;
}

.shell.right,
.right {
	justify-content : flex-end;
}

.shell.center,
.center {
	justify-content : center;
}

.shell,
.shell.top,
.top {
	align-items : flex-start;
	align-content : flex-start;
}

.shell.bottom,
.bottom {
	align-items : flex-end;
	align-content : flex-end;
}

.shell.middle,
.middle {
	align-items : center;
	align-content : center;
}

.shell.block,
.block {
	flex-wrap : wrap;
}

.shell.inline,
.inline {
	flex-wrap : wrap;
}

.shell.stretch,
.stretch {
	align-items : stretch;
	align-content : stretch;
}

.shell.large,
.large {
	width : 90%;
}

.shell.dlarge,
.dlarge {
	width : 80%;
}

.shell.qlarge,
.qlarge {
	width : 75%;
}

.shell.tlarge,
.tlarge {
	width : 66.666666666%;
}

.shell.sxlarge,
.sxlarge {
	width : 60%;
}

.shell.half,
.half {
	width : 50%;
}

.shell.sxsmall,
.sxsmall {
	width : 40%;
}

.shell.tsmall,
.tsmall {
	width : 33.33333333333%;
}

.shell.qsmall,
.qsmall {
	width : 25%
}

.shell.dsmall,
.dsmall {
	width : 20%;
}

.shell.small,
.small {
	width : 10%;
}

.shell.full-h,
.full-h {
	height : 100%;
}

.shell.large-h,
.large-h {
	height : 90%;
}

.shell.dlarge-h,
.dlarge-h {
	height : 80%;
}

.shell.qlarge-h,
.qlarge-h {
	height : 75%;
}

.shell.tlarge-h,
.tlarge-h {
	height : 66.666666666666%;
}

.shell.xslarge-h,
.xslarge-h {
	height : 60%;
}

.shell.half-h,
.half-h {
	height : 50%;
}

.shell.tsmall-h,
.tsmall-h {
	height : 33.333333333333%;
}

.shell.xssmall-h,
.xssmall-h {
	height : 40%;
}

.shell.qsmall-h,
.qsmall-h {
	height : 25%;
}

.shell.dsmall-h,
.dsmall-h {
	height : 20%;
}

.shell.small-h,
.small-h {
	height : 10%;
}

.shell.h-full.grid,
.shell.h-full,
.h-full {
	height : var(--h-full);
}

/***************** end shells *************/

.topbar {
	height : var(--h-topbar);
	align-items : center;
	align-content : center;
	position : sticky;
	top : 0px;
	background-color : inherit;
	box-shadow : 0px 1px 1px 0px rgba(89, 89, 100, .2);
	z-index : 8;
}

.grad .topbar {
	background-color : var(--bg);
}

.section {
	height : 100vh;
	padding : 50px 10vw;
}

.baner {
	height : 100vh;
	position : relative;
	background-size : cover;
	background-repeat : no-repeat;
	background-position : 0px 62%;
}

.baner::after {
	content : " ";
	width : 100%;
	height : 100%;
	display : flex;
	position : absolute;
	z-index : 0;
	background : radial-gradient(circle, rgba(0, 164, 155, .01) 57%, var(--color-main));
	backdrop-filter : blur(1px);
	mix-blend-mode : color;
}

.baner * {
	position : relative;
	z-index: 1;
}

.footer {
	padding-top : 10px;
	flex-wrap : wrap;
}

.footer .topstand {
	min-height : 180px;
}

.disclaimer {
	justify-content : center;
	text-align : center;
	font-size : .85rem;
	background-color : var(--bg-tone-30);
	color : var(--text);
}

.shell.logo {
	width : 200px;
	height : 100%;
	align-items : center;
	align-content : center;
	flex-grow : 0;
	flex-shrink : 0;
}

.footer .shell.logo .logo {
	width : 40%;
	height : auto;
}

img.logo {
	width : 100%;
	height : auto;
}

.topbar img.logo {
	width : auto;
	height : 100%;
	padding : 2px;
}

.fliparoo {
	perspective : 100px;
	perspective-origin : center;
	transform-style : preserve-3d;
	animation : fliparoo 4s ease infinite;
}

.fillout {
	width : 100%;
	height : 100%;
	display : flex;
	justify-content : center;
	align-items : center;
	align-content : center;
	font-size : 2rem;
	text-decoration : none;
	transition : font-size 1s ease;
	color: inherit;
}

.fillout:hover {
	font-size : 2.2rem;
}

.slideover {
	overflow : hidden;
}

.slideitem {
	height : calc(100% - 50px);
	display : none;
}

.slideitem.active {
	display : flex;
	opacity : 0;
	animation : sientry .6s ease 1 forwards;
}

.section-indexer {
	width : auto;
	display : flex;
}

.section-indexer span {
	width : 40px;
	height : 10px;
	display : inline-flex;
	transition : background-color .45s ease;
	cursor : pointer;
	background-color : var(--bg-tone-30);
}

.section-indexer span:first-of-type {
	border-radius : 3px 0px 0px 3px;
}

.section-indexer span:last-of-type {
	border-radius : 0px 3px 3px 0px;
}

.section-indexer span.active {
	background : linear-gradient(49deg, var(--color-main), var(--color-main-tone-30), var(--color-gold-tone-30), var(--color-main-tone-30)), var(--color-main);
	background-blend-mode : overlay;
}

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

.menu.dropdown {
	display : none;
	position : absolute;
}

li.dropdown:hover .menu.dropdown {
	display : block;
}

.topbar .menu.dropdown {
	width : auto;
	min-width : 100%;
	border-radius : 0px 0px 8px 8px;
	box-shadow : 0px 1px 1px 0px rgba(89, 89, 100, .2);
	background-color : var(--bg);
	overflow : hidden;
}

.menu.horizontal li {
	margin : 0px;
	padding : 0px;
	display : inline-block;
}

.menu.vertical li {
	display : block;
}

li.dropdown {
	position : relative;
}

.menu a {
	display : inline-flex;
	justify-content : center;
	align-content : center;
	align-items : center;
	text-decoration : none;
	color : inherit;
}

.menu.left a {
	justify-content : flex-start;
}

.menu.horizontal a {
	min-width : 120px;
	padding : 0px 10px;
	margin : 0px;
}

.menu.vertical a {
	width : 100%;
	padding : 5px 0px;
	display : flex;
}

.topbar .menu a {
	height : var(--h-topbar);
	transition : background .35s ease;
}

.topbar .menu a.active,
.topbar .menu a:hover {
	background-color : var(--color-main);
	color : var(--color-d-abs);
	font-weight : 600;
}

.menu.dropdown a {
	padding : 5px 10px;
}

.footer .menu a:hover {
	font-weight : 600;
}

a.link {
	color : var(--text);
}

a.link {
	text-decoration : none;
	color : inherit;
}

p.title {
	margin : 10px;
	padding : 0px;
	font-size : 3.5rem;
	font-weight : 800;
}

p.subtitle {
	margin : 5px;
	padding : 0px;
	font-size : 2.2rem;
	font-weight : 600;
}

p.content-title {
	width : 100%;
	margin : 0px;
	font-size : 1.1rem;
	font-weight : 600;
}

p.info {
	width : 100%;
	margin : 5px;
}

p.text {
	margin : 0;
	text-align : justify;
}

p.text.block {
	width : 100%;
}

p.text.large {
	font-size : 1.4rem;
}

p.text.md {
	font-size : 1.2rem;
}

.fw-heavy {
	font-weight : 600;
}

.pd-sm {
	padding : 5px;
}

.pd-md {
	padding : 10px;
}

.mg-sm {
	margin : 5px;
}

.mg-md {
	margin : 10px;
}

.pd-section {
	padding : 50px 10vw;
}

.text-center {
	text-align : center;
}

.product-item {
	cursor : pointer;
	transition : width .4s ease, height .4s ease;
}

.product-item:hover {
	width : 250px;
	height : 350px;
}

.brand {
	font-family : 'century gothic';
	font-weight : 600;
	font-size : 2.5rem;
}

.stylish-brand {
	width : 100%;
	margin : 0px;
	white-space : nowrap;
	text-align : center;
	font-family : 'century gothic';
	font-size : 10rem;
	font-weight : 500;
	animation : bentry .8s ease 1 forwards;
	color : var(--color-abs);
	text-shadow : 3px 2px 1px var(--color-d-abs);
}

label.logo {
	padding : 0px 5px;
	font-size : 1.3rem;
	font-weight : 900;
	text-transform : uppercase;
	white-space : nowrap;
	text-shadow : 0px 1px 2px var(--color-main-tone-110);
	color : var(--color-main);
}	

.moto {
	width : 100%;
	opacity : 0; 
	position : relative; 
	top : 50%;
	font-size : 2.2rem;
	font-weight : 800;
	text-align : center;
	font-family : 'century gothic';
	animation : tentry 1.2s ease 1 1s forwards;
	color : #fff;
	text-shadow : 3px 2px 4px var(--color-d-abs);
}

.shell.grid {
	height : auto;
}

.shell.grid.scrollable {
	position : relative;
}

.shell.grid.logsley {
	flex-wrap : wrap;
}

.grid.logsley .item {
	margin : 20px;
	padding : 20px;
	flex-wrap : wrap;
	justify-content : center;
	border-radius : 8px;
	box-shadow : 0px 0px 2px 0px var(--bg-tone-30);
}

.shell.card {
	width : 200px;
	height : 300px;
	margin : 5px 10px;
	flex-shrink : 0;
	justify-content : center;
	border-radius : 8px;
	overflow : hidden;
	background-color : var(--bg);
}

.shell.card.gold {
	background-color : var(--color-gold);
	box-shadow : 0px 0px 3px 3px var(--color-gold-tone-30-t);
}

.shell.card.main {
	background-color : var(--color-main);
	box-shadow : 0px 0px 3px 3px var(--color-main-tone-30-t);
}

.shell.card.transparent {
	background-color : transparent;
}

.shell.card.large {
	width : 300px;
	height : 400px;
}

.shell.card.full {
	width : 100%;
	height : 100%;
	padding : 10px 6vw;
	margin : 5px 0px;
	align-items : center;
}

.boxed,
.shell.card.boxed {
	border : 1.5px solid rgba(89, 89, 100, .2);
}

.boxed {
	border-radius : 8px;
}

.grad .boxed,
.grad .shell.card.boxed {
	border-color : rgb(from var(--color-abs) r g b / 0.8);
}

.shell.card img {
	width : auto;
	height : 100%;
}

.shell.card.full img {
	width : 30%;
	height : auto;
	max-height : 100%;
	border-radius : 20px;
}

.shell.card .shell.caption {
	padding : 20px;
	flex-wrap : wrap;
}

.shell.card.full p.caption {
	width : 100%;
	margin : 10px;
	font-size : 5rem;
	font-weight : 700;
	text-align : center;
}

.shell.card.full p.content {
	font-size : 1.2rem;
	text-align : justify;
}

.enclosure {
	max-width : 95%;
	padding : 10px;
	display : flex;
	overflow : auto;
	scrollbar-width : none;
}

.grid.scrollable .before,
.grid.scrollable .after {
	width : 50px;
	height : 50px;
	position : absolute;
	top : calc(50% - 25px);
	z-index : 6;
	display : flex;
	justify-content : center;
	align-items : center;
	align-content : center;
	border-radius : 50%;
	box-shadow : 0px 0px 1px 1px rgba(89, 89, 100, .2);
	font-size : 1.5rem;
	font-weight : 800;
	cursor : pointer;
	background-color : var(--bg);
}

.grid.scrollable .before.hide,
.grid.scrollable .after.hide {
	display : none;
}

.grid.scrollable .before {
	left : 5px;
}

.grid.scrollable .after {
	right : 5px;
}

.enclosure .shell.card {
	flex-shrink : 0;
}

.oc-item {
	display : none;
}

.oc-item.active {
	display : block;
	animation : tentry .6s ease 1 forwards;
}

.slide-company {
}

.slide-company .oc-item {
	width : 100%;
}

.content.text-center,
.text-center {
	text-align : center;
}

.hr {
	width : 100%;
	height : 2px;
	margin : 5px 0px;
	border-radius : 5px;
	background-color : var(--bg-tone-30);
}

.hr.colorful {
	background : linear-gradient(to right, var(--bg-tone-30), var(--color-gold), var(--color-main), var(--color-gold), var(--bg-tone-30));
}

.c-section-indexer {
	display : flex;
	box-shadow : inset 0px 0px 0px 2px rgb(from var(--bg-tone-30) r g b / 0.4);
}

.c-section-indexer span {
	width : 150px;
	height : 12px;
	display : inline-flex;
	cursor : pointer;
	background-color : var(--bg-tone-30);
}

.c-section-indexer span:first-child {
	border-radius : 8px 0px 0px 8px;
}

.c-section-indexer span:last-child {
	border-radius : 0px 8px 8px 0px;
}

.c-section-indexer span.active {
	background-color : var(--color-gold);
}

/***************** input shells **********************/

.shell.form {
	width : 100%;
	padding : 15px;
	flex-wrap : wrap;
}

.shell.form form {
	width : 100%;
}

.shell.input {
	flex-wrap : wrap;
}

.label.input {
	width : 100%;
	padding : 5px;
	display : block;
}

.label.err {
	padding : 10px 5px;
	display : block;
	color : var(--color-error);
}

.field {
	width : 100%;
	margin : 10px 0px;
	padding : 10px;
	border-radius : 6px;
	border : 1px solid var(--color-main-tone-30);
	outline : none;
	font-family : inherit;
	font-size : inherit;
	background-color : inherit;
	color : inherit;
}

.field:focus {
	border : 1px solid var(--color-main);
	box-shadow : 0px 0px 4px 2px var(--color-main-tone-30-t);
}

.button {
	padding : 10px 15px;
	border : none;
	font-family : inherit;
	font-size :inherit;
}

.button.submit {
	width : 100%;
	cursor : pointer;
	border : 1px solid var(--color-main-tone-110);
	background-color : var(--color-main);
	color : inherit;
}

.button.submit:hover {
	background-color : var(--color-main-tone-30);
	color : var(--color-abs);
}

.button.majorant {
	padding : 20px 30px;
	border-radius : 8px;
	background-color : var(--color-gold);
	font-weight : 600;
	font-size : 1.6rem;
	cursor : pointer;
}

.button.majorant:hover {
	background-color : var(--color-gold-tone-30);
}

.button.topbar-menu-expand {
	position : absolute;
	right : 5px;
	display : none;
	border-radius : 5px;
	background-color : transparent;
}

a.button {
	text-decoration : none;
	color : inherit;
}

/**************** texts *********************/

.grid.logsley .item p.caption {
	width : 100%;
	text-align : center;
}

.shell.card p.caption.hovering {
	width : 100%;
	padding : 10px;
	margin : 0px;
	position : absolute;
	left : 0px;
	bottom : -60px;
	flex-shrink : 0;
	z-index : 4;
	opacity : 0;
	transition : bottom .35s ease, opacity .25s ease;
	backdrop-filter : blur(2px);
	background-color : rgb(from var(--bg) r g b / 0.65);
}

.shell.card:hover p.caption.hovering {
	bottom : 0px;
	opacity : 1;
}

.point {
	width : calc(33.3333% - 10px);
	margin : 5px;
	padding : 10px;
	flex-shrink : 0;
	border-radius : 8px;
	border : 1px solid rgb(from var(--text) r g b / 0.4);
	overflow : visible;
}

.point span {
	width : 100%;
	display : block;
	text-align : center;
}

.point span.text-strong {
	padding : 0px 5px;
	position : relative;
	top : -20px;
	font-size : 1.2rem;
	background-color : var(--bg);
}

.icon.fa,
.icon.fab {
	width : 60px;
	height : 60px;
	margin : 5px 10px;
	display : inline-flex;
	justify-content : center;
	align-items : center;
	flex-shrink : 0;
	border-radius : 50%;
	font-size : 2rem;
	box-shadow : 0px 0px 1px 2px var(--bg-tone-30);
}

.fa-facebook {
	color : #3B5998;
}

.icon.fab.fa-facebook {
	box-shadow : 0px 0px 1px 2px rgb(from #3B5998 r g b / 0.7);
}

.fa-map-marker-alt {
	color : #34A853;
}

.icon.fa.fa-map-marker-alt {
	box-shadow : 0px 0px 1px 2px rgb(from #34A853 r g b / 0.7);
}

.fab.fa-instagram::before,
.icon.fab.fa-instagram::before {
	background : linear-gradient(236deg, #F58529, #FEDA77, #DD2A7B, #8134AF, #515BD4);
	background-clip : text;
	color : transparent;
}

.icon.fab.fa-instagram {
	box-shadow : 0px 0px 1px 2px rgb(from #F58529 r g b / 0.2), 0px 0px 1px 2px rgb(from #FEDA77 r g b / 0.3), 0px 0px 1px 2px rgb(from #DD2A7B r g b / 0.3), 0px 0px 1px 2px rgb(from #8134AF r g b / 0.3), 0px 0px 1px 2px rgb(from #515BD4 r g b / 0.4);
}

.fa-at {
	color : #EA4335;
}

.icon.fa.fa-at {
	box-shadow : 0px 0px 1px 2px rgb(from #EA4335 r g b / 0.7);
}

i.icon.mlarge {
	font-size : 2.5rem;
}

i.icon.large {
	font-size : 4rem;
}

.icon.fa.boundless,
.icon.fab.boundless {
	border : none;
	box-shadow : none;
}

/********************* generics ******************/

.c-main {
	color : var(--color-main);
}

.bg-cover {
	position : absolute;
	z-index : 0;
}

.content-cover {
	position : absolute;
	z-index : 1;
}

.p-relative {
	position : relative;
}

.p-absolute {
	position : absolute;
}

.p-fixed {
	position : fixed;
}

.p-sticky {
	position : sticky;
}

.no-shrink {
	flex-shrink : 0;
}

.hide {
	display : none;
}

.flow-auto-none {
	overflow : auto;
	scrollbar-width : none;
}

p.text.unbreak,
.unbreak {
	word-wrap : normal;
	word-break : keep-all;
}

.text-center {
	text-align : center;
}

.text-justify {
	text-align : justify;
}

.radial {
	border-radius : 5px;
}

.radial-md {
	border-radius : 10px;
}

.text-white {
	color : var(--color-abs);
}

.text-large {
	font-size : 1.2rem;
}

.text-heavy {
	font-weight : 800;
}

.text-strong {
	font-weight : 600;
}

.text-mid-strong {
	font-weight : 500;
}

/********* animations ***************/

@keyframes fliparoo {
	0% { transform : rotateY(0deg); }
	10% { transform : rotateY(180deg); }
	20% { transform : rotateY(360deg); }
	100% { transform : rotateY(360deg); }
}

@keyframes tentry {
	0% { opacity : 0; position : relative; top : 50%; }
	50% { opacity : 0; }
	99% { position : relative; top : 0px; }
	100% { opacity : 1; position : static; }
}

@keyframes bentry {
	0% { opacity : 0; position : relative; top : -50%; }
	50% { opacity : 0; }
	99% { position : relative; top : 0px; }
	100% { opacity : 1; position : static; }
}

@keyframes sientry {
	0% { opacity : 0; position : relative; left : 50%; }
	50% { opacity : 0; }
	90% { position : relative; left : 0px; }
	100% { opacity : 1; position : static; }
}

@media screen and (max-width : 900px) {
	.shell {
		flex-wrap : wrap;
	}
	
	.shell.unwrap {
		flex-wrap : nowrap;
	}
	
	.shell.large,
	.large,
	.shell.dlarge,
	.dlarge,
	.shell.qlarge,
	.qlarge,
	.shell.tlarge,
	.tlarge,
	.shell.sxlarge,
	.sxlarge,
	.shell.half,
	.half,
	.shell.sxsmall,
	.sxsmall,
	.shell.tsmall,
	.tsmall,
	.shell.qsmall,
	.qsmall,
	.shell.dsmall,
	.dsmall,
	.shell.small,
	.small {
		width : 100%;
	}
	
	.shell.full-h,
	.full-h,
	.shell.large-h,
	.large-h,
	.shell.dlarge-h,
	.dlarge-h,
	.shell.qlarge-h,
	.qlarge-h,
	.shell.tlarge-h,
	.tlarge-h,
	.shell.xslarge-h,
	.xslarge-h,
	.shell.half-h,
	.half-h,
	.shell.tsmall-h,
	.tsmall-h,
	.shell.xssmall-h,
	.xssmall-h,
	.shell.qsmall-h,
	.qsmall-h,
	.shell.dsmall-h,
	.dsmall-h,
	.shell.small-h,
	.small-h {
		height : auto;
	}

	.shell.h-full.grid,
	.shell.h-full,	
	.h-full {
		min-height : var(--h-full);
		height : auto;
	}
	
	.section {
		height : auto;
		padding : 25px 5vw;
	}
	
	.section .shell.half {
		justify-content : center;
	}
	
	.grad {
		background-size : auto, auto, auto, auto, auto cover;
	}

	.shell.grad {
		background-position : left, left, left, left, left;
	}

	.shell.grad.nopos {
		background-position : left, left, left, left, left;
	}

	.gradbg-t {
		background : linear-gradient(to bottom, rgb(from var(--bg) r g b / 0.1), rgb(from var(--bg) r g b / 0.7), rgb(from var(--bg) r g b / 0.9), rgb(from var(--bg) r g b / 1));
	}
	
	.bg-cover {
		display : none;
	}
	
	.content-cover {
		position : static;
	}
	
	.slideitem > .shell,
	.content-cover > .shell {
		justify-content : center;
	}
	
	.footer .topstand {
		padding : 0px 5vw;
	}
	
	.footer .shell {
		justify-content : center;
	}
	
	.topbar > .menu {
		width : 100%;
		position : absolute;
		top : calc(100% - 1px);
		display : none;
		background-color : inherit;
	}
	
	.topbar > .menu.expanded {
		display : block;
		box-shadow : 0px 1px 2px 1px var(--bg-tone-30);
		animation : hgrow .2s ease 1;
	}
	
	.topbar > .menu li {
		width : 100%;
		display : block;
	}
	
	.button.majorant {
		font-size : 1.2rem;
	}

	
	.button.topbar-menu-expand {
		display : block;
	}
	
	.topbar > .menu li a {
		width : 100%;
	}
	
	.shell.card.full img {
		width : 80%;
	}
	
	.stylish-brand {
		font-size : 4rem;
	}
	
	.moto {
		font-size : 1.5rem;
	}
	
	.shell.card.full p.caption {
		font-size : 2rem;
	}
	
	.shell.card.full p.content {
		font-size : 1rem;
	}
	
	.text-justify,
	p.text,
	.shell.card p.content {
		word-wrap : break-word;
		word-break : break-all;
	}
	
	p.title {
		font-size : 2rem;
	}
	
	p.subtitle {
		font-size : 1.5rem;
	}
	
	p.content-title {
		text-align : center;
	}
		
	.point {
		width : calc(100% - 10px);
		margin : 30px 5px;
		padding : 5px;
	}

	p.text.large {
		font-size : 1.15rem;
	}
	
	p.text.md {
		font-size : 1.05rem;
	}
	
	.footer p.info {
		width : 70%;
		text-align : justify;
	}
	
	span.brand {
		font-size : 1.25rem;
	}
	
	/****************** animation *****************/
	@keyframes hgrow {
		0% { height : 0%; opacity : 0; }
		99% { height : 200px; opacity : 0.7; }
		100% { height : auto; opacity : 1; }
	}
	
}

@media screen and (min-width : 768px) and (max-width : 900px) {
	.grid.logsley .item {
		width : calc(50% - 40px);
	}
	
	.points {
		justify-content : center;
	}
	
	.point {
		width : calc(50% - 10px);
		margin : 30px 5px;
		padding : 5px;
	}

}

@media screen and (max-width : 400px) {
	
	.stylish-brand {
		font-size : 3rem;
	}
	
	.moto {
		font-size : 1.2rem;
	}
	
}