/* TickleJar Logo */
div.logo, h2.logo {
	font-family:var(--font-logo);
	font-weight:900;
	font-size:5vw;
	position:absolute;
	letter-spacing:-0.01em;
	text-decoration:none;
	display:block;
	}
			
	div.logo::before, h2.logo::before {
		content:"TickleJar";
		background: -webkit-linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.15) 80%,  rgba(255,255,255,.05));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		position:absolute;
		z-index:1;
		}
	
	div.logo span, h2.logo span {
		position:relative;
		}
		
	div.logo span.red, h2.logo span.red {
		color:var(--color-red-2);
		}
		
	div.logo span.black, h2.logo span.black {
		color:var(--color-purple-1);
		}
	
	div.logo:hover {
		filter:brightness(110%) saturate(120%);
		transform:scale(1.01,1.01);
		transition:2s;
		}



		
/* Round Buttons */
div.round_button {
	position:absolute;
	bottom:calc(((var(--button-size) * 2) * -1) + 15px);
	height:calc(var(--button-size) * 2);
	width:calc(var(--button-size) * 2);
	font-family:var(--font-body);
	font-size:16px;
	line-height:1.2em;
	text-align:center;
	}

		
	div.round_button p {
		position:absolute;
		top:40%;
		left:0px;
		width:100%;
		color:var(--color-purple-1);
		opacity:.5;
		}
		
		div.round_button:hover p {
			opacity:1;
			transition:1.5s;
			}
	
	div.round_button a {
		position:absolute;
		left:calc(var(--button-size) / 2);
		height:var(--button-size);
		width:var(--button-size);
		border-radius:100%;
		background-color:var(--color-red-1);
		transition:.5s;
		box-shadow:var(--elevation-offset-light);
		}
	
		div.round_button a:hover {	
			filter:brightness(150%);
			height:calc(var(--button-size) + 10px);
			width:calc(var(--button-size) + 10px);
			translate: -5px -5px;
			}
			
		div.round_button svg {
			color:var(--color-white);
			width:86%;
			padding:7%;
			}
		
	div.round_button.topics {
		left:calc(15% - (var(--button-size) * .5));
		}
		
	div.round_button.random {
		left:calc(50% - (var(--button-size) * .5));
		}
		
		div.round_button.random a { 
			animation:rotate;
			animation-duration:15s;
			animation-iteration-count:10;
			}
	
	div.round_button.total {
		left:calc(50% + (var(--button-size)) - 10px);
		}
		
		div.round_button.total a {
			height:calc(var(--button-size) / 2);
			width:calc(var(--button-size) / 2);
			top:12px;
			}
		
		div.round_button.total a:hover {	
			filter:brightness(150%);
			height:calc((var(--button-size) / 2) + 5px);
			width:calc((var(--button-size) / 2) + 5px);
			translate: -2.5px -2.5px;
			}
		
	div.round_button.words {
		left:calc(85% - (var(--button-size) * .5));
		}
		
		div.round_button.words a { 
			background-color:var(--color-purple-1);
			}
			
	div.round_button.browse {
		left:calc(85% - (var(--button-size) * .5));
		}


/* LOADING ANIMATION */
div.loader {
	position:absolute;
	font-size:50px;
	height:50px;
	width:100%;
	bottom:120px;
	text-align:center;
	opacity:.2;
	}
	
	div.loader div {
		display:inline;
		margin:0px 10px;
		opacity:.5;
		color:var(--color-red-1);
		}
		
		div.loader div:nth-child(1){ animation: fade-out 1s forwards 2s; }
		div.loader div:nth-child(2){ animation: fade-out 1s forwards 3s; }
		div.loader div:nth-child(3){ animation: fade-out 1s forwards 4s; }
		div.loader div:nth-child(4){ animation: fade-out 1s forwards 5s; }
		div.loader div:nth-child(5){ animation: fade-out 1s forwards 6s; }
		
		

/* TAGS */
div.tags {
	width:100%;
	position:relative;
	padding:0;
	opacity:80%;
	margin-top:100px;
	}
	
div.tags ul {
	position:relative;
	list-style:none;
	margin:0;
	padding:0;
	}

	div.tags ul li {
		font-size:11px;
		text-transform:uppercase;
		border-radius:20px;
		line-height:14px;
		vertical-align:middle;
		border:1px solid var(--color-gray-4);
		background-color:var(--color-gray-8);
		color:var(--color-gray-0);
		float:left;
		text-decoration:none;
		list-style:none;
		margin:5px;
		padding:5px 10px 5px 10px;
		letter-spacing:.5px;
		}
		 
		/* TAGS - DELETE BUTTON */
		div.tags ul li form.tag_delete {
			height:10px;
			width:10px;
			margin:0;
			padding:0px 0px 0px 10px;
			float:right;
			position:relative;
			left:0px !important;
			top:-1px;
			}
		
		div.tags ul li form.tag_delete input[type="submit"]{
			height:14px;
			width:14px;
			margin:0;
			padding:0;
			position:relative;
			left:5px;
			border-radius:10px;
			background-color:var(--color-gray-3);
			color:#fff;
			font-weight:normal;
			line-height:14px;
			}
		
		
		div.tags ul#suggestions li {
			background-color:var(--color-white);
			border:1px solid var(--color-gray-6);
			}
			
		div.tags ul#suggestions li a {
			text-decoration:none;
			}
		
		
	/* TAGS - ADD A TAG */
	div.tags form.tag_add {
		float:left;
		position:relative;
		opacity:60%;
		top:4px;
		}
	
		div.tags form.tag_add input[type="text"]{
			font-size:10px;
			text-transform:uppercase;
			border-radius: 20px 0px 0px 20px;
			line-height:14px;
			width:80px;
			border:1px solid var(--color-gray-3);
			background-color:#fff;
			color:var(--color-gray-0);
			float:left;
			text-decoration:none;
			list-style:none;
			margin-left:5px;
			padding:5px 10px;
			}
		
		div.tags form.tag_add input[type="submit"]{
			font-size:10px;
			text-transform:uppercase;
			border-radius: 0px 20px 20px 0px;
			line-height:14px;
			border:1px solid var(--color-green-1);
			background-color:var(--color-green-1);
			color:#ffffff;
			float:left;
			text-decoration:none;
			list-style:none;
			margin:0px;
			padding:5px 8px 5px 5px;
			cursor:pointer;
			}


/* TAG CLOUD */	
div.tag_cloud {
	margin-top:30px;
	padding-top:30px;
	}

	div.tag_cloud a {
		padding-right:30px;
		text-decoration:none;
		color:var(--color-gray-1);
		text-transform:uppercase;
		white-space: nowrap;
		float:left;
		font-size:14px;
		}