.calc{
	height: calc(100% - 60px);
}
.transition{
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}
.cap{
	text-transform: capitalize;
}
.scale{
	transform: scale(1.5);
}
.flex{
	display:flex;
	flex-wrap:wrap;
	flex-flow:wrap;
	justify-content:flex-start;
	align-items: flex-start;
	align-content: flex-start;	
}
.flex .child{
	flex:1 1 100%;
}
.bosshadow{
	box-shadow:2px 0px 5px rgba(0, 0, 0, 0.5);
}
.rotate{
	transform: rotate(180deg);
}
.filter{
	filter:invert(25%) sepia(92%) saturate(6953%) hue-rotate(347deg) brightness(78%) contrast(120%);
}
.borderadius{
	border-radius: 5px 0 0 5px;
}
.borderdashed{
	border-bottom: 1px dashed lightgray;
}
.attrtext:after{
	content: attr(attribname);
}
.layingdown{
	transform: perspective(300px) rotateX(45deg);
}
input:invalid{
	animation shake 300ms;
}
@keyframes shake{
	25% {transform:translateX(4px);}
	50% {transform:translateX(-4px);}
	75% {transform:translateX(4px);}
}
.grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.center{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
div:has(p){
	
}
div:has(p:empty){
	
}
div:has(.itemclass){
	
}
article:has(+ .subtitle){
	
}
/*****************************************

*****************************************/
*{
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}
:root {
  --body-bg: #000;
  --main-bg: #111;
  --nav-color: #f2f2f2;
  --nav-color-hover: #000;
  --nav-color-active: #fff;
  --nav-color: #f2f2f2;
  --nav-hover-bg: #ddd;
  --nav-active-bg: #555555;
  --white: #ffffff;
  --vid-outline-color: #ddd;
  --vid-hover-outline-color: #aaa;
  --vplayer-bg-color: #000;
  
  color-scheme:dark light;	/* light, normal, dark */
}
html {
  scroll-behavior: smooth;
} 
body{
	background:var(--body-bg);
	padding:0;
	margin:0;
	font-family:arial;
	height:100vh;
}
.top{
	height:70px; 
	line-height:70px; 
	padding:10px 0 10px 20px;
	position:sticky;
	top:0;
	left:0;
	right:0;
	margin:0 auto;	
	z-index:10;
	background:var(--main-bg);
}
.top .inner{
	margin:0 auto;
	max-width:1400px;
}
.toplogo{
	height:50px;
}
footer{
	height:70px; 
	line-height:70px; 
	padding:0 0 0 0;	
	margin:0 0;	
	background:var(--main-bg);
	text-align:center;
	position:fixed;
	bottom:0;
	left:0;
	right:0;
}
h1{
	padding:0;
	margin:0;
}
h2{
	padding:10px 0 0 0;
	margin:0;
}
.content{
	max-width:1400px;
	margin:0 auto;
	background:var(--main-bg);
	height:calc(100vh - 70px);
	padding:20px 20px 70px 20px;
}
.content.notstart{
	height:calc(100vh - 70px);
}
.topnav {  
	overflow: hidden;
	float:right;
	margin: -10px 0;
}
.topnav a {
	float: left;
	display: block;
	color: var(--nav-color);
	text-align: center;
	padding: 0 20px;
    text-decoration: none;
    font-size: 14px;
}
.topnav a:hover {
	background-color: var(--nav-hover-bg);
	color: var(--nav-color-hover);
}
.topnav a.active {
	background-color: var(--nav-active-bg);
	color: var(--nav-color-active);;
}
.topnav .icon {
  display: none;
}
.vid img{
	border-radius:10px;
	outline: 1px solid var(--vid-outline-color);
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	width:100%;
} 
.vid img:hover{
	outline: 1px solid var(--vid-hover-outline-color);
	opacity:.5;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	cursor:pointer;
}
.vid:after{
	content: attr(data-count);
    position: absolute;
    right: -1px;
    top: -1px;
    background: rgba(0, 0, 0, .5);
    padding: 10px;
    color: white;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 0 0 0 20px;
}
#vplayerbg{	
	display:none;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0, 0, 0, .8);
	z-index:90;
}
#vplayer{
	display:none;
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    width: 60vw;
    background: var(--vplayer-bg-color);
	text-align:center;
}
#vplayer video{
	
}
#vplayer button{
	margin:0 auto;
	padding:10px;
}
section{
	flex:1 1 100%;
	display:flex;
	margin:0 0 20px 0;	
}
section.main{
	
}
section > div{
	flex:1;
}
section > div.right{
	flex:1 1 60%;
	padding:0 0 0 20px;
}
section > div.vid{
	flex:1 1 40%;
	position: relative;
}
section.main > div.right{
	flex:1 1 30%;
}
section.main > div.vid{
	flex:1 1 70%;
}
section > div.right p{
	padding:5px 0 5px 0;
	margin:0; 
}
.section:last-child{
	padding-bottom:70px;
}
@media (max-width: 760px){
	section{
		display:block;
	}
	section > div.right, section.main > div.right{
		flex:1 1 100%;
		padding:0 0 0 0;
	}
	section > div.vid, section.main > div.vid{
		flex:1 1 100%;	
	}
	#vplayer{		
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 100;
		width: 100vw;		
		text-align:center;
	}
}