body {
	margin: 0;
	background-color: #000000;
	color: #ffffff;
	font-family: Sans-serif;
	font-size: 13px;
	#line-height: 24px;
	width: 100%;
	height: 100%;
	margin: auto;
	
	
	font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
}

a {
	color: #000000;
	text-decoration: none;
}

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

button {
	cursor: pointer;
	text-transform: uppercase;
}

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
	pointer-events: auto;
}

.lil-gui {
	z-index: 2 !important; /* TODO Solve this in HTML */
}



@media all and ( max-width: 640px ) {
	.lil-gui.root {
		right: auto;
		top: auto;
		max-height: 50%;
		max-width: 80%;
		bottom: 0;
		left: 0;
	}
}

#overlay {
	position: absolute;
	font-size: 16px;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: rgba(0,0,0,0.7);
}

	#overlay button {
		background: transparent;
		border: 0;
		border: 1px solid rgb(255, 255, 255);
		border-radius: 4px;
		color: #ffffff;
		padding: 12px 18px;
		text-transform: uppercase;
		cursor: pointer;
	}

#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}

.aol_loadingPage
{

	background-image: linear-gradient(#2d0a54, #000000);
}

.growImg {
transition: all .2s ease-in-out;
}

.growImg:hover {
transform: scale(1.3);
}


.aosNiceGalImage{
	width: 98%;
	padding: 2px;
	border-radius: 10px;
	position: relative;
}
.aosNiceGalDiv{
	width: 100%;
	padding: 0px;
	border-radius: 10px;
	z-index: 0;
	position: relative;
}

.aosNiceTutorialImg{
	width: 95%;
	padding: 0px;
	border-radius: 10px;

}

.aosNiceGalBG
{

	background-image: linear-gradient(#000000, #2d0a54);
}

.growThumb {
transition: all .2s ease-in-out;
}

.growThumb:hover {
transform: scale(1.2);
}

.divbg
{

	position: static;
	background-image: linear-gradient(#2d0a54, #000000);
	#display: block;
	margin: auto;
	width: 100%;
	height: 100%;
	text-align: center;
}





.lanicon
{
	max-width: 30px;
	padding: 5px;
}

.divvideoentrance
{
	margin: auto;
	width: 100%;
	#text-align: center;
	top: -180px;
	position: relative;
	pointer-events: none;
}

#myVideo {
  
  
  width: 1920px;
  min-height: 648px;
  clip-path: inset(20% 0% 20% 0%);
  #display: inline;
  
}

.divvideocontent {
  position: absolute;
  bottom: 250px;
  #background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  #width: 35%;
 
  width: 100%;
}

.textovervideo {
	#font-size: 4rem;
	#font-size: 60px;
	font-weight: 900;
	text-shadow: 3px 3px 3px #000000;
	#padding: 20px;
}
.textovervideoSmall
{
	#font-size: 1.6rem;
	font-size: 20px;
	text-shadow: 5px 10px;
	text-shadow: 3px 3px 3px #000000;
	#padding: 20px;
}


.bannerTextSmall
{
	#font-size: 1.6rem;
	font-size: 20px;
	text-shadow: 5px 10px;
	text-shadow: 3px 3px 3px #000000;
	padding: 20px;
	max-width: 600px;
}

.bannerTextMid
{
	#font-size: 1.6rem;
	font-size: 30px;
	text-shadow: 5px 10px;
	text-shadow: 3px 3px 3px #000000;
	padding: 20px;
	max-width: 600px;
}

.bannerTextBig {
	#font-size: 4rem;
	font-size: 60px;
	font-weight: 900;
	text-shadow: 3px 3px 3px #000000;
	padding: 20px;
	max-width: 600px;
}

.imgover
{
	max-width: 600px;
}

.banner2
{
	width: 100%;
	min-height: 500px;
	#text-align: center;
	#vertical-align: middle;
	background-color: #ff0000;
	position: relative;
	top: -180px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: radial-gradient(farthest-corner at 100% 75%, black 20%, #8f3592 80%, #660066);
}

.bannerVideo
{
	width: 100%;
	#min-height: 500px;
	
	#background-color: #ff0000;
	position: relative;
	#top: -180px;
	
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	#background-image: radial-gradient(farthest-corner at 100% 75%, black 20%, #8f3592 80%, #660066);
}

.normalVideo{
  
  max-width: 600px;
  width: 100%    !important;
  height: auto   !important;
  
  
}

.bannerImg{
	max-width: 600px;
	 width: 100%    !important;
  height: auto   !important;
}

.banner3
{
	width: 100%;
	min-height: 500px;
	#text-align: center;
	#vertical-align: middle;
	background-color: #ff0000;
	#position: relative;
	#top: -180px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: radial-gradient(farthest-corner at 100% 75%, black 20%, #8f3592 80%, #660066);
}

.bannerTextBig2 {
	#font-size: 4rem;
	font-size: 50px;
	font-weight: 900;
	text-shadow: 3px 3px 3px #000000;
	padding: 20px;
	max-width: 600px;
}

.enterHip{
	#width: 30%;
	min-height: 100px;
	text-align: center;
	#vertical-align: middle;
	background-color: #ff0000;
	
	#display: flex;
	#justify-content: center;
	#align-items: center;
	
	#background-image: radial-gradient(farthest-corner at 100% 75%, black 20%, #8f3592 80%, #660066);
	border-radius: 30px 30px;
	font-size: 60px;
	font-weight: 900;
	margin: 30px;
	
}

.bannerCredits
{
	width: 100%;
	#min-height: 500px;
	
	#background-color: #ff0000;
	position: relative;
	#top: -180px;
	
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	#background-image: radial-gradient(farthest-corner at 100% 75%, black 20%, #8f3592 80%, #660066);
}

.bannerCreditImages
{
	width: 100%;
	#min-height: 500px;
	
	#background-color: #ff0000;
	#position: relative;
	#top: -180px;
	
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-align: center;
	#background-image: radial-gradient(farthest-corner at 100% 75%, black 20%, #8f3592 80%, #660066);
}

.imgCred
{
	max-width: 100px;
	padding: 40px;
}

.instaIcon
{
	max-width: 70px;
	padding: 20px;
}
.cccmenu
{

	
	background-color: #000000;
	display: flex;
	flex-wrap: wrap;
	#margin: auto;
	width: 100%;
	color: #ffffff;
	align-items: center;
	
	
}
.cccmenuTitle
{

	flex: 50%;
	
	
}

.cccmenuOptions
{

	flex: 50%;
	display: flex;
	flex-direction: row-reverse;
	
	
}

.cccMain
{
	background-color: #ffffff;
	color: #000000;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: 1216px;
}

.cccComicParent
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 1000px;
	max-width: 100%;
}

.cccComic
{
	
	max-width: 100%;
}

.cccmenuOptTitle
{
	font-size: 1.5rem;
	font-weight: bold;
	padding: 8px;
}

.cccmenuOpt
{
	font-size: 1.0rem;
	padding: 8px;
	cursor: pointer;
}

.cccColumns
{

	width: 100%;
	flex: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	text-align: center;
	margin-top: 20px;
}

.cccLeft
{
	
	flex: 60%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	padding: 54px;

}

.cccRight
{
	
	width: 30%;
	flex: 40%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	text-align: center;
	margin-top: 90px;

}

.cccData01
{
	margin: 15px;
	font-size: 1.2rem;
	font-weight: bold;

}
.cccData02
{
	margin: 15px;
	
}
.cccDisquis
{
	width: 90%;
	
	margin: 30px;

	
}
.cccIcon
{
	margin: 5px;

}

.cccControlButton
{
	margin: 5px;

}

.cccControls
{
	width: 100%;
	max-width: 924px; 
	flex: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-top: 20px;
	

}

.confDrag
{
	border: none;
	color: white;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	#display: inline-block;
	font-size: 40px;
	margin: 20px 6px 10px 6px;
	cursor: pointer;
	background-color: rgb(255, 120, 30);
	text-shadow: 5px 5px 5px #000000;
	font-weight: 900;
	border-radius: 25px;
}

.confModDrag
{
	border: none;
	color: white;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	#display: inline-block;
	font-size: 40px;
	margin: 20px 6px 10px 6px;
	cursor: pointer;
	background-color: rgb(255, 0, 30);
	text-shadow: 5px 5px 5px #000000;
	font-weight: 900;
	border-radius: 25px;
}

.dataDrag
{
	border: none;
	color: white;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	#display: inline-block;
	font-size: 45px;
	margin: 20px 6px 10px 6px;
	cursor: pointer;
	background-color: rgb(120, 255, 30);
	text-shadow: 5px 5px 5px #000000;
	font-weight: 900;
	border-radius: 25px;
}

.confDelDrag
{
	border: none;
	color: white;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	#display: inline-block;
	font-size: 40px;
	margin: 20px 6px 10px 6px;
	cursor: pointer;
	background-color: rgb(128, 0, 0);
	text-shadow: 5px 5px 5px #000000;
	font-weight: 900;
	border-radius: 25px;
}

.confDelDragBut
{
	border: none;
	color: white;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	#display: inline-block;
	font-size: 40px;
	margin: 20px 6px 10px 6px;
	cursor: pointer;
	background-color: rgb(128, 0, 0);
	text-shadow: 5px 5px 5px #000000;
	font-weight: 900;
	border-radius: 25px;
	
}

.confDelDragBut:hover {
transform: scale(1.2);
}


.cccColumnsInd
{

	width: 70%;
	flex: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	text-align: center;
	margin-top: 20px;
	font-size: 1.2rem;
}

.cccLeftInd
{
	
	flex: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	text-align: center;
	padding: 54px;

}

.cccRightInd
{
	
	
	flex: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	text-align: flex-start;
	padding: 54px;

}

.cccArchiveEntry
{
	
	padding: 10px;
	cursor: pointer;

}

.lightmode
{
	
	
	cursor: pointer;

}

.darkmode
{
	
	
	cursor: pointer;

}


@media all and (max-width: 500px) {
  .cccMain {
    max-width: 90%;
	width: 90%;
  }
  .cccColumns
  {
	flex-direction: column;
  }
  .cccRight
  {
	flex-direction: row;
	margin-top: 10px;
	margin-bottom: 20px;
	flex: 100%;
  }
  .cccLeft
  {
	padding: 5px;
	flex: 100%;
  }
  .cccDisquis
	{
		width: 95%;
	
	margin: 10px;
	}
  .cccColumnsInd
  {
	flex-direction: column;
  }
  .cccControlButton
  {
	max-width: 30px;
  }
}

@media all and (min-width: 3000px) {
  .cccMain {
    max-width: 2216px;
	
  }
  .cccComicParent {
    
	width: 2000px;
  }

  .cccComic{
		width: 100%;

		
	}

}