@charset "UTF-8";
/* 
	off-white 	e5e5e5
	75 gray 	404040
	90 gray 	1a1a1a
	
	off white 	fffeff
	pink 		ff01fb
	blue 		02a9ea
	yellow 		faffoo
	black 		000300
*/

.blocke {
	position: relative;
	width: 100px;
	height: 100px;
	overflow: hidden;
}

.block1-1 {
		position: absolute;
		width: 100px;
		height: 100px;
		margin: 0px;
	}

.animation-container {
	width: 400px;
  	height: 400px;
  	position: relative;
  	background: yellow;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

.blank-container {
	width: 400px;
	height: 400px;
	position: relative;
	background: blue;	
}

#animation1 {
	width: 400px;
  	height: 400px;
  	position: absolute;
  	background: red;
	margin: 0px;
}

#animation2 {
	width: 400px;
  	height: 400px;
  	position: absolute;
  	background: cyan;
	margin: 0px;
}

#animation3 {
	width: 400px;
  	height: 400px;
  	position: absolute;
  	background: purple;
	margin: 0px;
}

#animation4 {
	width: 400px;
  	height: 400px;
  	position: absolute;
  	background: orange;
	margin: 0px;
}

body {
	font-family: "Lato", "Segoe UI", "Gill Sans", Tahoma, Verdana, sans-serif;
	background-color: #404040;
	color: #e5e5e5;	
}

#social-media {
	text-align: center;
}

#social-media img {
	max-width: 35px;
	max-height: 35px;
}

#about {
	margin-top: 25px;	
}

.subCat {
	padding-left: 15px;
}

#social {
	margin: auto;
	text-align: center;
	
	margin-top: 50px;
}

#social img {
	max-width: 35px;
	max-height: 35px;
}

#buddy {
	float: right;
	
	display: block;
  	max-width:175px;
  	max-height:149px;
  	width: auto;
  	height: auto;
}

#portrait {
	float: left;
	display: block;
	max-width: 200px;
	max-height: 200px;
	width: auto;
	height: auto;
	margin-right: 15px;
}

/* NAVBAR ----------------------------------------------------------- */
.navbar-default {
	background-color: #404040;
	border: none;
	border-bottom: 3px solid #e5e5e5;
}

.navbar-default .navbar-nav > li > a {
	color: #e5e5e5;	
	font-weight: bold;
}

@media screen and (max-width: 767px) {
	.navbar-default .navbar-nav > li > a {
		color: #e5e5e5;	
		font-weight: bold;
		text-align: center;
	}
	
	.navbar-default .navbar-nav .open .dropdown-menu > li > a {
		text-align: center;	
		background-color: #404040;
		color: #e5e5e5;
		font-weight: bold;
	}
	
	.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
		background-color: #1a1a1a;
		color: #02a9ea;
	}
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
	color: #02a9ea;
	background-color: #1a1a1a;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
	background-color: #1a1a1a;
	color: #02a9ea;	
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	background-color: #e5e5e5;
	color: #404040;	
}

.navbar-nav > li > .dropdown-menu {
	background-color: #404040;
	color: #e5e5e5;	
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
	color: #e5e5e5;	
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
	background-color: #404040;
	color: #e5e5e5;
	font-weight: bold;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
	background-color: #1a1a1a;
	color: #02a9ea;
}

.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
	background-color: #e5e5e5;
	color: #404040;		
}

.logo {
	padding-top: 0px; 
	margin-top: 0px;
}

/* BLOCKS -------------------------------------------------------- */
	.block-holder { 
		display: block;
		text-align: center;
		width: 100%;
		margin: 0px;
		padding: 0px;
	}
	
	.block-row {
		display: block;
		clear: both;
		margin: 0 auto;	
		font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
	}
	
	.imgBlock {
		display: block;
		width: 100%;	
		max-height: 187.5px;
		max-width: 187.5px;
		margin: 0px;
		padding: 0px;
	}
	
	.block-e {
		display: inline-block;
		font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
		margin: 0px;
		padding: 0px;
		width: 25%;
		max-height: 187.5px;
		max-width: 187.5px;
		text-align: center;
	}

/* testing colors */
/* just a note in case I forget: use js to have the images of the blocks change and change the backgrounds too! need to fix the small-screen version of the blocks too :( */


/* IMPORTED FROM 2018 */
/* gallery */
.gallery {
	text-align: center;
	margin: auto;	
}

/* thumbs */
.thumb {
	width: 30%;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.thumb img {
	position: relative;
	width: 100%;
	height: 100%;	
}

.thumb figure {
	margin: 0;
}	

.thumb figcaption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top: 30px;
	
	text-transform: uppercase;
	text-align: center;
	font-size: 20px;
	
	opacity: 0;
	color: #FFF;
	background-color: rgba(0, 0, 0, .55);
	
	transition: all .2s ease;
}

.no-touch .thumb figure figcaption {
	opacity: 0;
}

.thumb figure:hover figcaption {
	opacity: 1;
}


/* FOR ART PAGES */
.desc {
	width: 49%;
	float: left;
	clear: none;
}

.desc h2 {
	text-align: right;
	text-transform: uppercase;
	padding: 0px;
	padding-right: 10px;
	margin: 0px;	
}

.desc h4 {
	text-align: right;
	text-transform: uppercase;
	padding: 0px;
	padding-right: 10px;	
	margin: 0px;
}

.desc p {
	text-indent: 25px;	
	padding-right: 10px;
}

.desc hr {
	width: 90%;
}

.desc h5 {
	text-align: center;
	text-transform: uppercase;
	margin: 0px;
	padding: 0px;	
}

.desc h5:before, .desc h5:after {
	content:" ♫ ";	
}

/* thumbs */
.desc #thumbs {
	text-align: center;
}

#thumbs img {
	margin-bottom: 5px;
}

.desc img {
	display: inline-block;
	width: 30%;	
}

audio {
	display: block;
	margin: auto;
	padding: 10px 0 15px 0;
}

.image {
	width: 49%;
	float: left;
	text-align: center;
}

.image img {
	width: 100%;
}

iframe {
	width: 100%;
}