@charset "UTF-8";

@font-face {
  font-family: 'Kaliber_BRK';
  src: url(https://jpixel.neocities.org/css/fonts/KaliberSolidBrk-pO1R.ttf) format("truetype");
  font-style: normal;
  font-weight: 400;
}

@import url("https://jpixel.neocities.org/css/fonts/KaliberSolidBrk-pO1R.ttf") format("truetype");
.Kaliber_BRK{
	font-style: normal;
	font-weight: 400;
}
@import url("https://jpixel.neocities.org/css/fonts/KaliberSolidBrk-pO1R.tff") format("truetype");
.Kaliber_BRK{
	font-style: normal;
	font-weight: 400;
}
/*in case you're brave enough to use this site on a smartphone...*/

/* Hide element on extra small devices */
      @media (max-width: 576px) {
        .headerMobile header{
			height: 120px;
		}

		.element {
          display: none;
        }
		.navHori
		{
			max-width:100%;
			float:none;
			display: inline-flex;
			
		}
		.navHori img{
			height:auto;
			width: 100%;
		}
		.navHori nav{
			width: 100%;
		}
		.sideHori {
			/* flex-wrap: flex; */
			justify-content: space-between;
			/* max-width:576px; */
			width: 42%;
			text-align: left;
			display: flex;
			position:relative;
			top:322px;
			right:-16px;
			width:576px;
			height:225px;
			margin-left:-202px;
			margin-right:-75px;
		}
		
		.mobileExtend{
			height:200px;
		}
	/*.iconBigger{
		width:24px;
		height:24px;
	}*/
      }
	  
html { 
	background: url(bg.png) no-repeat center fixed; 
	background-size: cover;
	font-family: arial;
	height: 100%; 
	background-color:#000000;
	}
body {
      color:#ffffff;
    }
	p.small {
	line-height: 0.2;
	}

	p.big {
	line-height: 8;
	}
*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      }

a:link {
    color:#ffff4d;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #ffd11a;
}
a:hover {
    color:#FFE8B8;
	text-decoration: none;
}
a:active {
    text-decoration: none;
}
.linkContrast a:link {
    color: #006680;
    text-decoration: none;
}
.linkContrast a:visited {
    text-decoration: none;
    color: #3333cc;
}
.linkContrast a:hover {
    color:#ff66cc;
	text-decoration: none;
}
.linkContrast a:active {
    text-decoration: none;
}

 /*@font-face { font-family: Kaliber BRK; src: url('KaliberSolidBrk-pO1R.ttf'); } */
/*@font-face { 
	font-family: "Kaliber Solid BRK", serif;
	src: url(css/fonts/KaliberSolidBrk-pO1R.woff) format("woff"), 
		 url("/css/fonts/KaliberSolidBrk-pO1R.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
}*/
@font-face {
  font-family: 'Kaliber_BRK';
  src: url("../fonts/KaliberSolidBrk-pO1R.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
}
@import url("../fonts/KaliberSolidBrk-pO1R.ttf") format("truetype");
.Kaliber_BRK{
	font-style: normal;
	font-weight: 400;
}
@import url("../fonts/KaliberSolidBrk-pO1R.tff") format("truetype");
.Kaliber_BRK{
	font-style: normal;
	font-weight: 400;
}
h1{
	font-family: 'Kaliber_BRK', impact, Tahoma, Verdana, sans-serif;
  	font-style: normal;
  	font-weight: 400;
	font-size: 2.25rem;
	margin-top: 5px;
    margin-bottom: 0px;
}
h2{
	font-family: 'Kaliber_BRK', impact, Tahoma, Verdana, sans-serif;
  	font-style: normal;
  	font-weight: 400;
	font-size: 1.833rem;
	margin-top: 0px;
    margin-bottom: 10px;
}
h3{
	font-family: 'Kaliber_BRK', impact, Tahoma, Verdana, sans-serif;
  	font-style: normal;
  	font-weight: 400;
	font-size: 1.167rem;
	margin-top: 0px;
    margin-bottom: 10px;
}
h4{
	font-family: 'Kaliber_BRK', impact, Tahoma, Verdana, sans-serif;
  	font-style: normal;
  	font-weight: 400;
	font-size: 1.125rem;
	margin-top: 0px;
    margin-bottom: 10px;
}
hr{
	display: block;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: auto;
	margin-right: auto;
	border-style: inset;
	border-width: 1px;
	height:1px;
	border-width:0;
	color:gray;
	background-color:#ffffff
}
p{
	/* font-size: 1rem; */
	font-size: 0.75rem;
	/* font-family: MS Gothic, Century Gothic; */
}
main {
	width: 100%;
	max-width: 800px;
	/* max-width: 800px; */
	/* 1280px; */
	margin: 0 auto;
}    
.jpixelHeader {
	max-width: 800px;
	height:240px;
	position: relative;
	background-size: 100% 100%;
	background-image: url("images/banners/tempBanner.png");
	display: flex;
	background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-color: #3333ff;
	border-radius: 0px 0px 24px 24px;
}
/*the marquee code without using the <marquee> tag*/
.marquee {
        -moz-animation: marquee 10s linear infinite;
        -webkit-animation: marquee 10s linear infinite;
        animation: marquee 10s linear infinite;
      }
      @-moz-keyframes marquee {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      @-webkit-keyframes marquee {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      @keyframes marquee {
        0% {
          -moz-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          transform: translateX(100%)
        }
        100% {
          -moz-transform: translateX(-100%);
          -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
        }
      }
/*marquee end*/
  #tabheader {
        background-image: url(whatsnew.png), url(whatsnew.png);
        background-repeat: no-repeat;
        height: 32px;
        width: 188px;
        color: #d6d6d6;
        
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        
      }
/*Featured thumbnails start here*/
.thumbContainer {
	border: 4px solid #b3d9ff;
	border-radius: 8%;
	background-color: #b3d9ff;
	margin-bottom: 5%;
	color:#000000;
}
.thumbRound{
	border-radius: 8%;
}
/*Featured thumbnails end here*/

.container {
	/*styles the border and background*/
	border: 12px solid transparent;
	/* border: 8px solid transparent; */
	padding: 15px;
	border-image: url("jpixel_border.png") 30 stretch;
	background-image: url("border-bg.png");
	}
.container3 {
	/*styles the border and background*/
	border: 12px solid transparent;
	/* border: 8px solid transparent; */
	padding: 0px;
	border-image: url("jpixel_border.png") 30 stretch;
	background-image: url("border-bg.png");
	}
.mainContent{
	width: auto;
	/* max-width: 405px; */
	height: 380px;
	/* aspect-ratio: 3/2; */
	margin: auto;
	overflow-x: hidden;
	overflow-y: hidden; /*overflow-y: scroll;*/
	scroll-snap-type: y mandatory;
}
.commContent{
	width: auto;
	/* max-width: 405px; */
	height: 380px;
	/* aspect-ratio: 3/2; */
	margin: auto;
	overflow-x: hidden;
	overflow-y: hidden; /*overflow-y: scroll;*/
	scroll-snap-type: y mandatory;
}
.mainScroll{
	width: auto;
	/* max-width: 405px; */
	height:670px; /* height: 320px; */
	/* aspect-ratio: 3/2; */
	margin: auto;
	overflow-x: hidden;
	overflow-y: scroll; /*overflow-y: scroll;*/
	scroll-snap-type: y mandatory;
}
.galleryContent{
	width: auto;
	/* max-width: 405px; */
	height:670px; /* height: 320px; */
	/* aspect-ratio: 3/2; */
	margin: auto;
	overflow-x: hidden;
	overflow-y: hidden; /*overflow-y: scroll;*/
	scroll-snap-type: y mandatory;
}
.welcomeText{
	max-width:50%;
	float: right;
}
.latestContent{
	height: 200px;
}
.webButtonsContent{
	height: 200px;
	width: 115px;
}

.smallContent{
	width: auto;
	/* max-width: 400px; */
	height: 264px;
	/* aspect-ratio: 3/2; */
	margin: auto;
	overflow-x: hidden;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
}
.sideText{
	color:#000000;
	float:right;
	max-width:170px;
}
.container-2 {
	width: 140px;
	/* height: 320px; */
	/* aspect-ratio: 3/2; */
	border: 12px solid transparent;
	/* padding: 15px; */
	border-image: url("jpixel_border.png") 30 stretch;
	/* margin: auto; */
	/* overflow-x: hidden; */
	/* overflow-y: scroll; */
	/* scroll-snap-type: y mandatory; */
	background-image: url("border-bg.png");
	}
.navSide
	{ 
	float: left;
	/* width: 115px; I'M NOT SURE WHY THIS LINE OF CODE CRASHES BLUEGRIFFON BUT I GUESS I'M NOT USING THIS THEN*/
	/* text-align: right; */
	/* padding: 15px; */
	}
li{
	list-style-type: none;
}
.styledList li{
	margin-left:25px;
	list-style-type: disc;
}
.headerTitle{
	border-style: none;
	border-color: #000000;
	border-radius: 0px 0px 16px 0px;
	background-color: #000000;
	color: #ffffff;
	width:80%;
	margin-top:-5px;
}
.miniContent{
	border-style: none;
	border-color: #000000;
	border-radius: 0px 0px 16px 0px;
	background-color: #000000;
	color: #ffffff;
	width:50%;
	margin-top:-5px;
}
.content{
	width:75%;
}
.contentWidth{
		width:75%;
		}
.worksSlideSize{
	width:100%;
	height:100%;
}
@media (min-width: 577px) {
	.commMobile{
		height:640px;
	}
	.sampleMobile{
			display:flex;
		}
	.commbuttons{
		margin:-13px -80px 0px 0px;
	}
	.showText{
		display:none;
	}
	.artYearRows{
		column-count:2;
	}
}
@media (max-width: 576px) {
	.jpixelHeader {
	height:112px;
	}
	.galleryContent{
		height:590px;
		}
		.mainScroll{
			height:590px;
		}
		.headerTitle{
			width:100%;
		}
		.miniContent{
			width:75%;
			}
		.contentWidth{
		width:100%;
		}
		.commMobile{
		height:912px;
	}
		.sampleMobile{
			display:block;
		}
		.commbuttons{
		margin:-13px -152px 0px 0px;
	}
}
.headerMini{
	border-style: none;
	border-color: #000000;
	border-radius: 16px 0px 16px 0px;
	background-color: #000000;
	color: #ffffff;
	width:75%;
	margin-top:-5px;
	margin-left:-5px;
}
.headerMini h4{
	padding-top:3px;
	margin-left:5px;
}

.contentSide
	{ 
	float: right;
	/* max-width: 576px; */
	width: 25%;
	text-align: left;
	/* padding: 15px; */
	}
.bannerSide
	{ 
	float: right;
	max-width: 120px;
	width: 100%;
	text-align: left;
	/* padding: 15px; */
	}
.socialsFeatured
	{
		position:relative;
		top: -21px;
		margin-bottom:-16px;
	}
.featuredScroll
	{
		height: 350px;
		/* aspect-ratio: 3/2; */
		margin: auto;
		overflow-x: hidden;
		overflow-y: scroll;
		scroll-snap-type: y mandatory;
	}
.tabImg-top {
    align: center;
    position: relative;
    top: 15px;
    /* left: 25%; */
    color: #000;
    }
	
	/*titles and thumbnail stuff*/
.worksContainer{
	border-style: solid;
	border-color: #000000;
	border-radius: 0px 0px 16px 0px;
	margin-bottom: 15px;
	max-width: 436px;
	color: #000000;
}
.GalleryDesc{
	position: sticky;
	width:25%;
	bottom:227px;
	margin-bottom:-60px;
	background-color:black; 
	padding:10px; 
	border-radius: 0px 0px 0px 16px;
  /* animation-direction: reverse;  */
}
aside.GalleryDesc{
	float:right;
}
li.GalleryDesc{
	text-align: right;
}

.ArtDesc{
	position: sticky;
	width:80%;
	bottom:0px;
	left:125px;
	margin-bottom:-60px;
	background-color:black; 
	padding:10px; 
	border-radius: 16px 0px 0px 0px;
	column-count: 2;
	animation-name: slideUp;
	animation-duration: 1s;
  /* animation-direction: reverse;  */
}
aside.ArtDesc{
	float:left;
}
ul li.ArtDesc{
		text-align:left;
	}

.contentTitle{
	border-style: none;
	border-color: #000000;
	border-radius: 0px 0px 16px 0px;
	background-color: #000000;
	color: #ffffff;
	width:50%
}
.contentLink{
	border-style: none;
	border-color: #000000;
	border-radius: 0px 16px 0px 0px;
	background-color: #000000;
	color: #ffffff;
	width:50%;
}
.contentLinkMini{
	margin-left:13%;
	padding-right:3%;
	margin-bottom:-5px;
	border-style: none;
	border-color: #000000;
	border-radius: 16px 0px 0px 0px;
	background-color: #000000;
	color: #ffffff;
	width:90%;
}
.galleryLink{
	border-style: none;
	border-color: #000000;
	/* border-radius: 16px 0px 16px 0px; */
	border-radius: 0px 16px 0px 0px;
	background-color: #000000;
	color: #ffffff;
	width:25%;
/* 	margin-left:50%; */
}
.whatsNew{
	border-style: none; 
	height:100%; 
	width:100%;
	padding:0%;
	overflow: hidden;
}
.blogContent{
	background-image: url("../blog/blog-bg.png");
    background-size: 100% 32px;
  	background-repeat: repeat;
	border-radius: 0px 0px 16px 0px;
}
.contentText{
	background: rgba(255, 255, 255, 0.6);
	border-radius: 0px 0px 16px 0px;
}
.contentBackbutton{
	position: sticky;
	width:100px;
	bottom:-4px;
	float:right;
	/* margin-bottom:-60px; */
	animation-name: slideUp;
	animation-duration: 1s;
  /* animation-direction: reverse;  */
}
.contentBB-Static{
	position: relative;
	width:100px;
	top:74px;
	right:110px;
	/* float:right; */
	margin-bottom:-60px;
	/* animation-name: slideUp;
	animation-duration: 1s; */
  /* animation-direction: reverse;  */
}
.linksBorder {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-color: #000000;
	border-radius: 0px 0px 0px 16px;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}
.emailBorder {
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: none;
	border-color: #000000;
	border-radius: 0px 0px 16px 0px;
}
@keyframes slideUp {
  0%   { bottom:-25%;}
  100% { bottom:-.5%;}
}
.contentBackbutton{
	transition: all .1s ease-in-out;
}
.contentBackbutton:hover{
	transform: translateY(5px);
}

.photograph{
	border-style: solid;
	border-width:  5px;
  	border-color: #fcfbfa;
	box-shadow: 1px 2px 3px #402d11;
	margin: 0px 15px 15px 15px;
}
.aboutTabs{
	position: sticky;
	bottom:0px;
	margin-bottom:-60px;
	animation-name: slideUp;
	animation-duration: 1s;
  /* animation-direction: reverse;  */
}

.aboutTabs{
	transition: all .1s ease-in-out;
}
.blogTabs{
	position: sticky;
	bottom:0px;
	margin-bottom:-60px;
	animation-name: slideUp;
	animation-duration: 1s;
  /* animation-direction: reverse;  */
}
.aboutTabs{
	transition: all .1s ease-in-out;
}

@media (max-width: 576px) {
.blogTabs{
	position: relative;
	margin-bottom:-60px;
	width:34%;
	}
.contentSide{
			float:left;
		}
.sideHori2 {
			/* flex-wrap: flex; */
			/* max-width:576px; */
			/* width: 42%; */
			/* text-align: left; */
			display: flex;
			position:relative;
			top:675px;
			right:108px;
			width:99%;
			height:225px;
			margin-left:-320px;
			margin-right:-105px;
		}
		.featuredScroll{
		margin-top:0px;
		height: 200px;
	}
.GalleryDesc{
	position: initial;
	width:100%;
	top:-27px;
	margin-top:25px;
	margin-bottom:0px;
	background-color:black; 
	padding:10px; 
	border-radius: 16px 0px 0px 0px;
	column-count: 2;
	}
	aside.GalleryDesc{
	float:none;
	}
	ul li.GalleryDesc{
		text-align:left;
	}
.ArtDesc{
	position: static;
	width:100%;
	bottom:0px;
	left:125px;
	margin-bottom:-60px;
	background-color:black; 
	padding:10px; 
	border-radius: 16px 0px 0px 0px;
	column-count: 2;
	animation-name: slideUp;
	animation-duration: 1s;
	}
aside.ArtDesc{
	float:left;
}
ul li.ArtDesc{
		text-align:left;
	}
.contentBB-Static{
	top:120px;
	right:-241px;
	}
}
.rollDie { 

            background-color: black; 

            border: none; 

            text-align: center; 

            cursor: pointer; 


} 
.abtTabSel {
	
}
/*gallery code!!*/
/* div.gallery {
  margin: 5px;
  border: 2px solid #000;
  background-color: #000000;
  border-radius: 16px 16px 16px 16px;
  float: left;
  width: 120px;
} */
  /* width: 180px; */


/* div.gallery:hover {
  border: 2px solid #333333;
  background-color: #333333;
} */

/* div.gallery img {
  width: 100%;
  height: auto;
  border-radius: 16px 16px 0px 0px;
} */

/* div.desc {
  padding: 5px;
  text-align: center;
  min-height:60px;
  color:#ffffff;
  font-size: 0.75rem;
} */
.galleryContainer{
	position:relative;
	min-height:60px;
	/* background-color: #000000; */
}
.galleryContainer .galleryImg-container {
	display:flex;
	flex-wrap:wrap;
	gap:15px;
	justify-content:center;
	padding:10px;
}
.galleryContainer .galleryImg-container .image{
	height:120px;
	width:120px;
	border:2px solid #000000;
	border-radius: 16px;
	background:rgba(0,0,0,.9);
	overflow:hidden;
	cursor:pointer;
}
.galleryContainer .galleryImg-container .image img{
	height:100%;
	width:100%;
	object-fit:cover;
	transition: .2s linear;
}
.galleryContainer .galleryImg-container .image:hover img{
	transform: scale(1.1)
}
.galleryContainer .popup-image{
	position:fixed;
	top:0; left:0;
	background:rgba(0,0,0,.9);
	height:100%;
	width:100%;
	z-index:100;
	display:none;
}
.galleryContainer .popup-image span{
	position:absolute;
	top:0; right:0px;
	font-size:2rem;
	padding: 0px 8px 0px 8px;
	font-weight:bolder;
	color:#ffffff;
	background-color:#000000;
	border-radius: 0px 0px 0px 16px;
	cursor:pointer;
	z-index:100;
}
.galleryContainer .popup-image img{
	position: absolute;
	top:50%; left:50%;
	transform: translate(-50%, -50%);
	/* border:2px solid #ffffff; */
	width:75%;
	height:75%;
	object-fit:contain; /*cover*/
}
.descImg{
	position: absolute;
	top:89.4%; left:50%;
	transform: translate(-50%, -50%);
	border:2px solid #000000;
	width:75%;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 0px 0px 16px 0px;
/* 	height:75%; */
/* 	object-fit:contain; /*cover*/ */
}

@media (max-width:768px){
	.popup-image img{
		width:95%;
	}
}
/*totally not recycled gallery code for the terms of service page*/
.terms{
	position: absolute;
	top:50%; left:50%;
	transform: translate(-50%, -50%);
	border:2px solid #000000;
	/* max-width:640px; */
	width:32%;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 0px 16px 0px 16px;
/* 	height:75%; */
/* 	object-fit:contain; /*cover*/ 
}
.termScroll{
	width: auto;
	max-height: 550px;
	/* max-height: 580px; */
	height:100%;
	border-radius: 0px 12px 0px 12px;
	/* aspect-ratio: 3/2; */
	margin: auto;
	overflow-x: hidden;
	overflow-y: scroll; /*overflow-y: scroll;*/
	scroll-snap-type: y mandatory;
}
.termsContainer{
	position:relative;
	min-height:60px;
	/* background-color: #000000; */
}
.termsContainer .termsText-container {
	display:flex;
	flex-wrap:wrap;
	gap:15px;
	justify-content:center;
	padding:10px;
}
.termsContainer .termsText-container .termsButton{
	height:89px;
	width:178px;
	border:2px solid #000000;
	border-radius: 16px;
	background:rgba(0,0,0,.9);
	overflow:hidden;
	cursor:pointer;
}
.termsContainer .galleryImg-container .termsButton img{
	height:100%;
	width:100%;
	object-fit:cover;
	transition: .2s linear;
}
.termsContainer .galleryImg-container .termsButton:hover img{
	transform: scale(1.1)
}
.termsContainer .popup-image{
	position:fixed;
	top:0; left:0;
	background:rgba(0,0,0,.9);
	height:100%;
	width:100%;
	z-index:100;
	display:none;
}
.termsContainer .popup-image span{
	position:absolute;
	top:0; right:0px;
	font-size:2rem;
	padding: 0px 8px 0px 8px;
	font-weight:bolder;
	color:#ffffff;
	background-color:#000000;
	border-radius: 0px 16px 0px 16px;
	cursor:pointer;
	z-index:100;
}
.termsContainer .popup-image img{
	position: absolute;
	top:50%; left:50%;
	transform: translate(-50%, -50%);
	/* border:2px solid #ffffff; */
	width:50%;
	height:50%;
	object-fit:contain; /*cover*/
}
.terms p{
	font-size:1rem;
}
/*code for the commissions page's icons (this is reused code just so it doesn't interact with the reused code for the terms page. recycling is fun, kiddos!)*/
.commContainer{
	position:relative;
	min-height:60px;
	/* background-color: #000000; */
}
.commContainer .commImg-container {
	display:flex;
	flex-wrap:wrap;
	gap:15px;
	justify-content:center;
	padding:10px;
}
.commContainer .commImg-container .image{
	max-height:120px;
	max-width:120px;
	height:100%;
	width:100%;
	border:2px solid #000000;
	border-radius: 16px;
	background:rgba(0,0,0,.9);
	overflow:hidden;
	cursor:pointer;
}
.commContainer .commImg-container .image img{
	height:100%;
	width:100%;
	object-fit:cover;
	transition: .2s linear;
}
.commContainer .commImg-container .image:hover img{
	transform: scale(1.1)
}
.commContainer .popup-image{
	position:fixed;
	top:0; left:0;
	background:rgba(0,0,0,.9);
	height:100%;
	width:100%;
	z-index:100;
	display:none;
}
.commContainer .popup-image span{
	position:absolute;
	top:0; right:0px;
	font-size:2rem;
	padding: 0px 8px 0px 8px;
	font-weight:bolder;
	color:#ffffff;
	background-color:#000000;
	border-radius: 0px 0px 0px 16px;
	cursor:pointer;
	z-index:100;
}
.commContainer .popup-image img{
	position: absolute;
	top:50%; left:50%;
	transform: translate(-50%, -50%);
	/* border:2px solid #ffffff; */
	width:50%;
	height:75%;
	object-fit:contain; /*cover*/
}
.commBorder {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-color: #000000;
	width:75%;
	border-radius: 0px 0px 0px 16px;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}
@media (max-width: 1450px){
	.terms{
		width:50%;
	}
}
@media (max-width: 576px) {
	.commBorder{
	width:100%;
	}
	.terms
		{
			height:95%;
			width:85%;
		}
}
@media (max-width:768px){
	.popup-image img{
		width:95%;
	}
}
.imgCommPreview{
	float:right;
	width:215px;
	height:116px;
	
}
.imgCommPreview img{
	object-fit:cover;
	border: 2px solid #000;
	border-radius: 16px;
}
/*tooltip container, or description roll-over*/
.tooltip {
/*     position: relative;
    display: inline-block; */
/*     width: 120px;
    margin: 20px; */
    text-align: center;
}
.tooltip p {
	/* display:inline;
    border-bottom: dotted 1px #333; */
}
/* Tooltip text*/	
.tooltip .tooltiptext {
    left: 28.5%;
    visibility: hidden;
    width: 118px;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */	
.tooltip:hover .tooltiptext {
    visibility: visible;
}
	
/* This rule position the tooltip above the element, 
	and has an arrow at the bottom */
.tooltip-bottom .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%; /* At the bottom of the tooltip */
    left: 10%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

	/*background music player*/
	.bgmPlayer {
	width: 115px;
	}
	footer{
		padding: 0 auto;
	}
	.footerbg{
		margin-top: 57px;
		background-color: #000000;
		padding-bottom: auto;
	}	
	.footerSpace{
	width: 100%;
	max-width: 800px;
	/* max-width: 800px; */
	/* 1280px; */
	
	}
	.socials
	{
		float: left;
		max-width:114px;
		margin: 8px;
		/* border: 1px solid #ffffff; */
	}
	.logoSmall
	{
		float: right;
		max-width:120px;
		margin: 8px;
		/* border: 1px solid #ffffff; */
	}
/*here's all the tabs!*/
.welcomeTab {
		/* border: 1px solid red; */
		position: relative;
		height:28px;
		max-width:460px;
        color: #000;
		background-image: url('../images/welcome-NewTab.png');
		background-size: 100% 100%;
		text-align: center;
		margin-bottom: -3%;
		margin-top: -.5%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }
@media (max-width: 576px) {
	.aboutMonitor{
		width:60%;
		height:60%;
	}
	.welcomeTab {
		/* border: 1px solid red; */
		position: relative;
		height:28px;
		max-width:460px;
        color: #000;
		background-image: url('../images/welcome-NewTab.png');
		background-size: 100% 100%;
		text-align: center;
		margin-bottom: -6%;
		margin-top: -.5%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }
	.imgCommPreview{
	float:right;
	width:116px;
	height:180px;
	}
}
}
.hiddenbottomTab {
		/* border: 1px solid red; */
		position: relative;
		height:25px;
		top:-48px;
		max-width:460px;
        color: #000;
		background-image: url('../images/latest-fanstuff.png');
		background-size: 100% 100%;
		text-align: center;
		margin-bottom: -3%;
		margin-top: -.5%;
        display: block;
        justify-content: flex-end;
        align-items: flex-end;
    }
.musTab {
		position: relative;
        color: #000;
		text-align: left;
		/* right: 17.4%; */
		margin-bottom: -3%;
		margin-top: -2.5%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }
.logo {
    align: center;
    position: absolute;
    color: #000;		/* text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end; */
    top: 100px;
    left: 20px;
    /* margin-bottom: -180px; */
    mix-blend-mode: screen;
    transition: all .2s ease-in-out;
    }
.logo:hover {
	mix-blend-mode:normal;
	transform: scale(1.1); 
}
.logoInvert {
    align: center;
    position: absolute;
    color: #000;		/* text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end; */
    top: 100px;
    left: 20px;
    /* margin-bottom: -180px; */
    mix-blend-mode: multiply;
    transition: all .2s ease-in-out;
    }
.logoInvert:hover {
	mix-blend-mode:normal;
	transform: scale(1.1); 
}
@media (max-width: 576px) {
	.logo {
    top: 14px;
    left: 8px;
	width:36%;
	height:92%;
    mix-blend-mode: screen;
    transition: all .2s ease-in-out;
    }
}
.links{
	transition: all .1s ease-in-out;
	vertical-align: middle;
}
.links:hover {
    translate: 5px;
}
.links:active {
    translate: -10px;
}


.vailImg {
    /* align: center; */
    position: relative;
    color: #000;		/* text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end; */
    /* 
    margin-left: 125px;
    margin-bottom: -290px; */
	top: -260px;
	margin-bottom: -290px;
    }
	
/* .vailImg:active{
	   Start the shake animation and make the animation last for 0.5 seconds 
  animation: shake 0.5s;

   When the animation is finished, start again 
  animation-iteration-count: 1;
} */
/* @keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
} */
.menuTab {
    align: center;
    position: relative;
    top: -576px;
    left: -161px;
    color: #000;		/* text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end; */
    margin-bottom: -432px;
    }
.featureTab {
    align: center;
    position: relative;
    top: -550px;
    left: 196px;
    color: #000;
    margin-bottom: -132px;	/* text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end; */
    }
	.latestTab {
    align: center;
    position: relative;
    top: -172px;
    left: 167px;
    color: #000;
    margin-bottom: -132px;	/* text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end; */
    }
	
	
/*specil effects(tm) will go here. (items growing, shrinking, vibrating, etc.*/

.slideAnim-nohover{
/* 	width: 100px;
  height: 140px; */
  
  /* background-color: red; */
  position: relative;
  animation-name: slideIn;
  animation-duration: 1s;
  /* animation-direction: reverse;  */
}

.slideAnimTop{
/* 	width: 100px;
  height: 140px; */
  
  /* background-color: red; */
  position: relative;
  animation-name: slidefromTop;
  animation-duration: 1s;
  /* animation-direction: reverse;  */
}

.slideAnim{
	width: 100px;
  height: 140px;
  
  /* background-color: red; */
  position: relative;
  animation-name: slideIn;
  animation-duration: 1s;
  transition: all .1s ease-in-out;
  /* animation-direction: reverse;  */
}


@keyframes slideIn {
  0%   { left:-100%;}
  100% { left:0%;}
}
@keyframes slidefromTop {
  0%   { top:-100%;}
  100% { top:0%;}
}
.slideAnim:hover{
	translate:-15px;
}


.rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


  /* background-color: red; */
/*  position: relative;
  animation-name: pushIn;
  animation-duration: 0.5s;*/
  /* animation-direction: reverse;  */
}
/*@keyframes pushIn {
  0%   { left:0%;}
  100% { left:-4%;}
}*/


/*an audio visualizer would go here but i don't think it's necessary for now.*/


/*mini-slideshow*/
#slideset2 {/* height: 10em; position: relative; */
  overflow: hidden}
#slideset2 > * {position: absolute; top: 100%; left: 0;
  animation: 12s autoplay2 infinite ease-in-out}
  
@keyframes autoplay2 {
  0% {top: 100%}
  4% {top: 0%}
  33.33% {top: 0%}
  37.33% {top: -100%}
  100% {top: -100%}
}
#slideset2 > *:nth-child(1) {animation-delay: 0s}
#slideset2 > *:nth-child(2) {animation-delay: 4s}
#slideset2 > *:nth-child(3) {animation-delay: 8s}