@charset "UTF-8";
/* CSS Document */

*, html, body {
	padding: 0;
	margin: 0;
	font-family: 'Roboto Mono';
	font-size: 12px;
	line-height: 14px;
	font-weight: bold;
}

html { background-color: #000; }
body { background-color: #000000; }

/***** HOLDER *****/

#holder { background-color: #000000; }

/***** CELLS *****/

.cell_holder {
	height: 50%;
	width: 25%;
	float: left;
	min-height: 400px;
	display: block;
	border-radius: 15px;
	overflow: hidden;
}

.cell_content {
	display: grid;
 	place-items: center;
	height: calc(100% - 1px);
	width: calc(100% - 1px);
	text-align: center;
	border-right: 1px dotted #000;
	border-bottom: 1px dotted #000;
}

.cell_full {
	padding: 50px;
	height: calc(100% - 101px);
	width: calc(100% - 101px);
}

.cell_content_full {}

.cell_half {
	padding: 50px;
	height: calc(50% - 101px);
	width: calc(100% - 101px);
	border-radius: 15px;
}

.cell_quarter {
	padding: 25px;
	height: calc(25% - 51px);
	width: calc(100% - 51px);
}

.cell_holder:nth-child(4) .cell_content,
.cell_holder:nth-child(8) .cell_content{
	border-right: none;
}

.cell_headline {
	text-decoration: underline;
	text-transform: uppercase;
	font-size: 14px;
	display: block;
	margin-bottom: 10px;
}

/***** CELL SECTIONS *****/

#cell_strongBird {
	color: red;
	background-image: url('../images/main/stars_white.gif');
	background-size: cover;
	background-position: center;
}

.headline_cult,
.headline_strongBird,
.headline_not,
.headline_welcome {
	display: block;
	font-size: 24px;
	line-height: 20px;
	text-transform: uppercase;
}

.headline_cult strike {
	font-size: 24px;
}

@-webkit-keyframes rainbow {
   from { -webkit-filter:hue-rotate(10deg); }
     to { -webkit-filter:hue-rotate(360deg); }
}

@keyframes rainbow {
 from {
    -webkit-filter:hue-rotate(10deg);
            filter:hue-rotate(10deg);
    }
  to {
    -webkit-filter:hue-rotate(360deg);
            filter:hue-rotate(360deg);
    }
}

.headline_cult { margin-top: 15px; }
.headline_strongBird { font-size: 50px; line-height: 40px; margin-bottom: 5px; }
.headline_not, .headline_welcome { font-size: 10px; line-height: 16px; }
.headline_not { margin-bottom: 50px; }
.headline_welcome { margin-top: 5px; }

#cell_tagline { background-color: red; color: #f4b331; }
#cell_tagline a { color: blue;  }
#cell_tagline .tagline_split { display: block; }

#cell_missionStatement {
	text-transform: uppercase;
	background-color: orange;
	color: #fff;
	background-image: url('../images/main/alert.png');
	background-size: contain;
	background-position: center;
}

#cell_officeHours {
	text-transform: uppercase;
	background-image: url('../images/main/office.jpg'); 
	color: red;
	background-size: contain;
	background-position: center;
	background-repeat: repeat-x;
}

#cell_help {
	background-color: pink;
	color: #fff;
}


#cell_confessions {
	background-color: #fff;
}


#cell_coffee {
	background-color: #fff;
}

#cell_zine,
#cell_confessions,
#cell_coffee {
	background-color: #fff;
	width: calc(100% - 51px);
	height: calc(100% - 51px);
	padding: 25px;
	text-transform: uppercase;
	color: red;
	background-image: url('../images/main/zine_july26.jpg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#cell_zine img {
	height: 250px;
	display: block;
	margin: auto;
}

#cell_collaborations {
	background-color: blue;
	padding: 0;
	width: calc(100% - 1px);
	height: calc(100% - 1px);
}

#cell_sightings,
#cell_collab_four,
#cell_extras {
	border-bottom: none;
}

#cell_extras.cell_half {
	padding: 50px;
	height: calc(50% - 100px);
	width: calc(100% - 100px);
	background-color: red;
	color: #f4b331;
}
#cell_extras .cell_headline { font-size: 10px; color: blue; text-decoration: none; }
#cell_extras.cell_half a { color: #f4b331; }
#cell_extras.cell_half a:hover { color: #fff; }

#cell_happy_faces,
#cell_collab_two,
#cell_collab_three,
#cell_collab_four { background-color: #fff; border-radius: 15px; }

#cell_collab_four { border-radius: 15px 15px 0 0; height: calc(20% - 28px); background-color: blue; }

#cell_store {
	background-color: #fff;
}

/*
#cell_happy_faces { background-image: url('../images/main/smile_bg.jpg'); }
#cell_happy_faces:hover { background-size: 50%; }
#cell_happy_faces .a_bg { background-color: #000; padding: 10px; }
#cell_happy_faces:hover .a_bg { background-color: #0fff00; }
*/

/*****. ANNOUNCEMENT *****/

#announcement {
	text-align: center;
	padding: 50px 0 25px 0;
	background-color: blue;
	color: red;
	font-size: 72px;
	text-transform: uppercase;
	border-radius: 15px 15px 0 0;
	overflow: hidden;
}

#mailingList {
	border-radius: 0 0 15px 15px;
	overflow: hidden;	
}

/***** SPLASH  *****/

#splash_top {
	background-color: #0000FF;
	color: red;
	height: calc(100vh - 135px);
	display: block;
	overflow: hidden;
	min-height: 400px;
}

.splash_top_content {
	display: grid;
	place-items: center;
	height: 100%;
	background-position: center;
	background-size: cover;
	border-radius: 0 0 25px 25px;
}
.splash_holder {
	text-align: center;
}

#splash_bottom {
	background-color: #0000FF;
	height: 135px;
}

/***** STYLES *****/

.text_small { font-size: 10px; }
a { color: red; text-transform: uppercase; text-decoration: none; }
a:hover { text-decoration: line-through; cursor: pointer;}
.clear { clear: both; }

/***** MOBILE *****/

@media (max-width: 1050px) {
	.cell_holder {
		height: 50%;
		width: 50%;
		min-height: 400px;
	}
	
	#cell_zine,
	#cell_sightings,
	#cell_collab_four,
	#cell_extras {
		border-bottom: 1px dotted #000;
	}
	
	#cell_zine img { height: 250px; }
}

@media (max-width: 600px) {
	.cell_holder {
		height: auto;
		width: 100%;
		min-height: 10px;
	}
	
	.cell_content {
		height: auto;
		padding: 25px;
		width: calc(100% - 50px);
		border-right: none;
	}
	
	#cell_tagline .tagline_split { display: inline; }
	
	#cell_zine { height: 500px; }
	#cell_zine img { height: 400px; }
	
	#cell_store.cell_half { border-bottom: none; }
	
	#cell_extras.cell_half { height: 100px; }
	
	#splash_top {
		background-color: #0000FF;
		color: red;
		height: calc(100vh - 200px);
		display: block;
		overflow: hidden;
		min-height: 400px;
	}

	#splash_bottom {
		background-color: #0000FF;
		height: 200px;
	}
}