*{
	box-sizing:border-box;
}

html{
	font-family: Arial, sans-serif;
	font-size: min(1vw, 25.6px);
	color: white;
}

body{
	margin:0px;
	padding:0px;
	background-color: rgb(40,40,40);
}

div{
	display:block;
	position:relative;
	/*outline:1px dotted rgb(180,180,180);*/
	margin:0px;
	padding:0px;
}

span{
	display:block;
	position:relative;
	font-size:inherit;
	margin:0px;
	padding:0px;
}

img{
	object-fit:contain;
	object-position: center center;
}

label{
	/*
	display:inline-block;
	position:relative;
	*/
	text-align:inherit;
	font-size:inherit;
}

article{
	position:relative;
}

::-webkit-scrollbar{
	width:0.5rem;
	height:auto;
}
::-webkit-scrollbar-track{
	background-color: rgb(30,30,30);
}
::-webkit-scrollbar-thumb{
	 background: rgb(50,50,50);
	background: linear-gradient(90deg, rgba(50,50,50,1) 0%, rgba(163,171,176,1) 46%, rgba(208,223,232,1) 50%, rgba(163,171,176,1) 54%, rgba(50,50,50,1) 100%); 
	/*
	background: linear-gradient(135deg, rgba(50,50,50,1) 0%, rgba(163,171,176,1) 46%, rgba(208,223,232,1) 50%, rgba(163,171,176,1) 54%, rgba(50,50,50,1) 100%); 
	*/
}
::-webkit-scrollbar-thumb:hover{}

.hidden-toggler{
	display:block;
	position:absolute;
	left:0;
	top:0;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	width:0px;
	height:0px;
	visibility:hidden;
	opacity:0;
	z-index:-1;
}

#container{
	display:block;
	/* width: 100%; */
	width: 80rem;
	margin:0 auto;
	
}

/* ================== Helper micro classes */

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

/* ================== Helper micro classes END */

/* ================== Header */

#header{
	width:100%;
	height: 4rem;
	background-color: rgb(50,50,50);
	border-radius: 0 0.5rem 0.5rem 0;
	border-left: 1px solid rgb(80,80,80);
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	background: rgb(193,228,241);
	/* background: linear-gradient(187deg, rgba(193,228,241,1) 0%, rgba(204,255,249,0.25) 2%, rgba(145,178,228,0.15) 10%, rgba(50,50,50,1) 18%, rgba(50,50,50,0) 100%); */
	background: linear-gradient(183deg, rgba(40,40,40,0) 0%, rgba(40,40,40,0) 2%, rgba(50,50,50,1) 10%, rgba(50,50,50,0) 100%);
	
}

/* Nav bar */

#nav{
/* allows to keep intact nav bar and logo separate regardless of header size */
	position:absolute;
	display:block;
	width:100%;
	bottom:0px;
}

#nav_bar{
	display:inline-block;
	vertical-align:bottom;
	left:-50%;
	transform:translateX(50%);
	margin-top: 0.8rem;
	float:right;
}
#nav_bar ul {
	display:inline-block;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	vertical-align:bottom;
}
#nav_bar ul li {
  float: left;
}
.nav-link {
	display: block;
	color: white;
	text-align: center;
	padding: 1.5rem;
	text-decoration: none;
	border-radius: 45% 45% 45% 45%;
	transition:background-color 0.5s;
	animation: triggerReflow 0.7s linear forwards;
	font-size:0.8rem;
}
.nav-link:hover {
	animation-name: highlightNavButton;
}
@keyframes highlightNavButton {
	50% {background-color: rgba(205, 247, 236, 0.4)}
	70% {background-color: rgba(255, 190, 179, 0.6)}
	100% {background-color: rgba(252, 225, 197, 0.8)}
}
.link-current {
	text-decoration: underline !important;
	text-underline-offset: 3px;
	/*
	border-left:1px solid rgb(120,120,120);
	border-right:1px solid rgb(120,120,120);
	background-color: rgb(50,50,50);
	*/
	animation: none;
}
/* Trigger reflow */
@keyframes triggerReflow {
	to {width: auto;}
}

/* Nav bar end */

/* Nav menu */

#nav_menu{
	display:none;
	position:relative;
	width: 100%;
	margin-top: -0.5rem;
	margin-bottom: 0.5rem;
	text-align:right;
	height:20rem;
	max-height:0;
	transition: max-height 0.5s;
}
#nav_menu ul{
	display:inline-block;
	position:relative;
	text-align:right;
	margin:0;
	padding:0;
	padding-bottom:0.5rem;
	padding-top:1rem;
	list-style-type: none;
	width: calc(100% - 2rem);
	height:auto;
	background-color: rgb(40,40,40);
	border-radius: 0.5rem;
}
.nav-menu-link{
	display:block;
	padding: 2rem;
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
	font-size: 1rem;
	color: white;
	text-decoration:none;
	cursor: pointer;
}
.nav-menu-link:focus{
	outline: 1px solid white;
}

#nav_menu_btn{
	position:absolute;
	right: 2rem;
	top: -3.1rem;
	width:2.5rem;
	height:2.5rem;
	box-shadow: 0 0 5px 1px white;
	background-color: rgb(50,50,50);
	border-radius: 0.25rem;
	cursor: pointer;
}
#nav_menu_btn span{
	position:relative;
	width:50%;
	height: 0.25rem;
	left:50%;
	top:50%;
	border-radius: 0.25rem;
	transform: translate(-50%, -50%);
	--bg-color: rgb(210,210,210);
	background-color: var(--bg-color);
}
#nav_menu_btn span::before{
	content:'';
	position:absolute;
	top: -0.5rem;
	left:0;
	width:100%;
	height:100%;
	border-radius: 0.25rem;
	background-color: var(--bg-color);
}
#nav_menu_btn span::after{
	content:'';
	position:absolute;
	bottom: -0.5rem;
	left:0;
	width:100%;
	height:100%;
	border-radius: 0.25rem;
	background-color: var(--bg-color);
}

#nav_menu_toggle:checked ~ #nav_menu{
	max-height: 20rem;
}
#nav_menu_toggle:checked ~ #nav_menu #nav_menu_btn {
	box-shadow: 0 0 5px 0px rgb(237, 66, 86);
	background-color: rgb(40,40,40);
}
#nav_menu_toggle:checked ~ #nav_menu #nav_menu_btn span{
	--bg-color: rgb(100,100,100);
}
/* Nav menu end */

/* Logo */

#Light_Brush_Logo{
	display:inline-block;
	position:absolute;
	bottom:0px;
	left:6%;
	color:white;
	font-size: 1.2rem;
	font-weight:bold;
	vertical-align: middle;
	padding: 1.2rem;
	padding-right: calc(0.7rem + 1px);
	border-radius: 0.5rem 2rem 0rem 2rem;
	border-left: 1px solid rgb(60,60,60);
	border-left: 1px solid rgb(92, 64, 84);
	margin-top:0.8rem;
	text-decoration:none;
	background-color:rgb(50,50,50);
	user-select:none;
	
}
#Light_Brush_Logo::after{
	content:'';
	position:absolute;
	top: 0px;
	left: 2rem;
	width: calc(100% - 2rem);
	height:100%;
	border-radius: 0.5rem 2rem 0.5rem 2rem;
	
	background: hsla(31, 90%, 76%, 1);

	background: linear-gradient(135deg, hsla(31, 90%, 76%, 0) 36%, hsl(78deg 100% 66% / 26%) 42%,hsla(347, 82%, 82%, 0) 49%, hsl(213deg 100% 91%) 54%, hsl(263deg 100% 92%) 60%, hsla(329, 82%, 80%, 0) 68%);

	background: -moz-linear-gradient(135deg, hsla(31, 90%, 76%, 0) 36%, hsl(78deg 100% 66% / 26%) 42%,hsla(347, 82%, 82%, 0) 49%, hsl(213deg 100% 91%) 54%, hsl(263deg 100% 92%) 60%, hsla(329, 82%, 80%, 0) 68%);

	background: -webkit-linear-gradient(90deg, hsla(31, 90%, 76%, 0) 36%, hsl(78deg 100% 66% / 26%) 42%, hsla(347, 82%, 82%, 0) 49%, hsl(213deg 100% 91%) 54%, hsl(263deg 100% 92%) 60%, hsla(329, 82%, 80%, 0) 68%);


	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#F9C58D", endColorstr="#FFEFBE", GradientType=1 );
	mix-blend-mode: darken;
}

#Light_Brush_Logo::before{
	content:'';
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border-radius: 0.5rem 0 0 2rem;
	
	background: rgb(213,171,145);
	background: linear-gradient(352deg, rgba(213,171,145,0.8) 0%, rgba(124,77,163,0.7) 4%, rgba(134,37,182,0.3) 13%, rgba(99,83,201,0) 36%, rgba(0,212,255,0) 100%);
}
#Light_Brush_Logo .trademark{
	display:inline;
	font-size:0.6rem;
	vertical-align:top;
	position:absolute;
}

#Light_Brush_Logo > img{
	display:inline-block;
	vertical-align: middle;
	font-size: inherit;
	width: 2rem;
	margin-top: -1rem;
	margin-bottom: -1rem;
	margin-left: -0.5rem;
}

/* Logo end */

/* ================== Header END */

/* ================== Main */

#main{
	width:25rem;
	margin:auto;
	min-height:40rem;
	/* min-height: 20rem; */
	top:2rem;
	background-color:rgb(50,50,50);
	border-top: 1px solid rgb(80,80,80);
	border-right: 1px solid rgb(80,80,80);
	box-shadow: 0 2px 10px 0px rgba(0,0,0,0.15);
	border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
	padding-bottom: 1rem;
	padding-top:1rem;
}
#main::before{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;

	background: rgb(50,50,50);
	background: linear-gradient(54deg, rgba(50,50,50,0) 0%, rgba(28,90,115,1) 47%, rgba(50,50,50,0) 73%);
	
	/*
	background: rgb(50,50,50);
	background: linear-gradient(55deg, rgba(50,50,50,0) 0%, rgba(61,105,124,0.94) 31%, rgba(41,97,113,0.95) 47%, rgba(50,50,50,0) 72%);
	*/
}

/* ================== Main END */

/* ================== Footer */

#footer{
	position:relative;
	width:100%;
	min-height:8rem;
	margin-top:0.1rem;
	margin-bottom: 2rem;
	border-radius: 0rem 0rem 0.5rem 0.5rem;
	background-color:rgb(40,40,40);
	box-shadow: 0 2px 10px 2px rgba(0,0,0,0.2);
}
#copyright{
	display:block;
	position:absolute;
	text-align:right;
	color: rgb(140,140,140);
	font-size: 0.7rem;
	padding:0.2rem;
	
	left:50%;
	transform:translateX(-50%);
	
	/* right:0.5rem; */
	bottom:-1.5rem;
	
}
#sitemap{
	display:block;
	position:absolute;
	/* background-color: rgba(255, 180, 0, 0.1); */
	bottom:0px;
	padding-left:1%;
	margin:0;
	width:100%;
	/* text-align:center; */
}
#sitemap ul{
	position:relative;
	margin:0rem;
	display:inline-block;
	padding:0;
	list-style-type:none;
}
#sitemap ul li{
	float:left;
	margin:0.1rem;
}
#sitemap ul li a{
	display:inline-block;
	color: rgb(180,180,180);
	text-decoration: none;
	font-size: 0.7rem;
	padding:0.4rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
	min-width: 3.8rem;
	border-radius: 0rem;
	border: 1px solid rgb(50,50,50);
	border: 1px solid rgba(105, 217, 255, 0);
	
	text-align:center;
	transition: background-color 0.3s, border 0.5s;
}
/*
#sitemap ul li:first-child > a {
	border-radius:0rem 0.2rem 0.2rem 0.5rem;
}
#sitemap ul li:last-child > a {
	border-radius:0.2rem 0.5rem 0.5rem 0.2rem;
	
}
*/
#sitemap ul li:hover a{
	text-decoration: underline;
	/* background-color: rgb(50,50,50); */
	border:1px solid rgba(105, 217, 255, 1);
	color: rgb(220,220,220);
}
#terms_policy{
	/* float:right; */
}


/* ================== Footer END */


/* MOBILE or Portrait */
@media screen and (max-width:768px), screen and (orientation: portrait), screen and (max-height: 768px),
only screen /* ipad & ipad pro */
  and (min-width: 700px) 
  and (max-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2)

{

	html{
		/* font-size: 2.2vh; */
		font-size: 4.2vw;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-tap-highlight-color: transparent;
	}
	
	#container{
		width:calc(100% - 8px) !important;
	}
	/* ================== Mobile Header */
	#header{
		height: 4rem;
	}
	#Light_Brush_Logo{
		font-size: 1rem;
		padding: 1.2rem;
		margin-left: -0.5rem;
	}
	#nav_menu{
		display:block;
	}
	#nav_bar{
		display:none;
	}
	/* ================== Mobile Header END */

	/* ================== Mobile Main */
	#main{
		height:auto;
		padding: 1rem;
		padding-top: 0.5rem;
		padding-bottom:0.5rem;
	}
	
	/* ================== Mobile Main END */

	/* ================== Mobile Footer */
	#sitemap{
		width:100%;
		text-align:center;
		padding:0;
	}
	/* ================== Mobile Footer END */
	
}
/* mobile / tablet landscape */
@media screen and (max-height: 768px) and (orientation: landscape) and (min-width: 600px),
only screen 
  and (min-width: 700px) 
  and (max-width: 1366px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2){
	html{
		font-size: 1.6vw;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-tap-highlight-color: transparent;
	}
	#nav_menu{
		display:none;
	}
	#nav_bar{
		display:inline-block;
	}
	.nav-link{
		padding: 1.3rem;
		font-size: 0.8rem;
	}
	/* main */
	
	/* main end */
}

/* ipad pro */
@media only screen 
  and (min-width: 700px) 
  and (max-width: 1366px)
  and (max-height: 1024px)
  {

}