/* XX-SMALL MOBILE: LIGHT BLUE; ************************************/

@media only screen and (min-width: 20em) {


     
	* {
		box-sizing: border-box;
	}

	/*LOGO*/
	.logo_button{
		width: 100%;
		float: left;
		margin: 0 0 2em 0;
		position: relative;
	}
	.logo_button:hover .logo_dropdown{
		cursor: pointer;
		display: block;
	}
		.logo_button img{
			width: 150px;
			margin: 0 auto;
			display: block;
		}
	.logo_dropdown{
		width: 100%;
		float: left;
		margin: 0 0 2em 0;
		position: absolute;
		top: 0px;
		display: none;
	}
		.logo_dropdown img{
			width: 150px;
			margin: 0 auto;
			display: block;
		}
	
	/*NAVIGATION*/
	.masthead{
		/*border: 1px solid lightblue;*/
		width: 100%;
		float: left;
		padding: 50px 0 0px 0;
		background-color: rgba(255,255,255,1);
		display: block;
	}

	/*BACKGROUND*/
	.base_grey-letters{
		/*border: 1px solid orange;*/
		width: 300px;
		margin: 0 auto;
		display: block;
		clear: both;
	}
		.base_grey-letters img{
			width: 100%;
		}

	/*COLORED LETTER*/
	.color-letter_container{
		/*border: 1px solid lime;*/
		width: 300px;
		margin: 0 auto;
		position: relative;
		display: block;
	}
		/*ALL BUTTONS*/
		.button{
			/*border: 1px solid cyan;*/
			height: 85px;
			position: absolute;
			top: 0;
			background-color:  rgba(255,255,255,0);
		}
		.button a, .page_label{
			text-decoration: none;
			color: #414042;
		}
		.button:hover{
			cursor: pointer;
		}
			.appear_content{
				/*border: 1px solid red;*/
				float: left;
			}

				/*INDIVIDUAL BUTTON CONTAINERS*/
				/*infographic button*/
				.appear_i1{
					/*border: 1px solid red;*/
					width: 28.2458px;  
					left: 0;
				}
					.appear_i1:hover #i1_color, .appear_i1:hover .page_label{
						display: block;
					}
				/*illustration button*/
				.appear_i2{
					width: 28.2458px;  
					left: 9.1666%;
				}
					.appear_i2:hover #i2_color, .appear_i2:hover .page_label{
						display: block;
					}
				/*design button*/
				.appear_d{
					width: 62.4243px;  
					left: 18.3332%;
				}
					.appear_d:hover #d_color, .appear_d:hover .page_label{
						display: block;
					}
				/*electronic arts button*/
				.appear_e{
					width: 53.7814px;  
					left: 39.1665%;
				}
					.appear_e:hover #e_color, .appear_e:hover .page_label{
						display: block;
					}
				/*illustration button*/
				.appear_a{
					width: 67.9319px;   
					left: 57.4995%;
				}
					.appear_a:hover #a_color, .appear_a:hover .page_label{
						display: block;
					}
				/*studio button*/
				.appear_s{
					width: 59.9064px;  
					left: 79.9995%;
				}
					.appear_s:hover #s_color, .appear_s:hover #studio{
						display: block;
					}

		.color_character{
			/*border: 1px solid pink;*/
			width: 100%;
			float: left;
			position: relative;
		}
		#active{
			display: block;
		}


			/*COLOR LETTERS*/
			#i1_color{width: 28.2458px; height: 85px;float: left; display: none; /*border: 1px solid grey;*/ }
			#i2_color{width: 28.2458px; height: 85px; float: left; display: none; /*border: 1px solid grey;*/ }
			#d_color{width: 62.4243px; height: 85px; float: left; display: none; /*border: 1px solid grey;*/ }
			#e_color{width: 53.7814px; height: 85px; float: left; display: none; /*border: 1px solid grey;*/ }
			#a_color{width: 67.9319px; height: 85px; float: left; display: none; /*border: 1px solid grey;*/ }
			#s_color{width: 59.9064px; height: 85px; float: left; display: none; /*border: 1px solid grey;*/ }

			.page_label{
				/*border: 1px solid red;*/
				font-family: "Roboto";
				font-weight: 500;
				font-size: 1em;
				text-transform: uppercase;
				text-align: left;
				position: absolute; 
				left: 0;
				width: 250px;
				display: none;
				float: left;
			}
				#info{bottom: -20px; left:.5em;}
				#illo{bottom: -20px; left:.5em;}
				#design{bottom: -20px; left:.4em;}
				#electronic{bottom: -20px; left: .3em;}
				#about{bottom: -20px;}
				#studio{bottom: -20px; left: .5em;}


	/****************************** TYPOGRAPHY ************************************/




/** X-SMALL: SMARTPHONES LANDSCAPE: LIME *************************************/

@media only screen and (min-width: 30em) {

	.masthead{
		/*border: 1px solid lime;*/
		width: 100%;
		float: left;
		padding: 50px 0 2em 0;
		background-color: rgba(255,255,255,1);
		display: block;
	}

}

/** SMALL: TABLETS PORTRAIT: PINK; *************************************/

@media only screen and (min-width: 48em) {

	.masthead{
		/*border: 1px solid pink;*/
		width: 100%;
		float: left;
		padding: 50px 0 2em 0;
		background-color: rgba(255,255,255,1);
		display: block;
	}
	.logo_button img{
			width: 200px;
			margin: 0 auto;
			display: block;
		}

		/*BACKGROUND*/
		.base_grey-letters{
			/*border: 1px solid orange;*/
			width: 480px;
			margin: 0 auto;
			display: block;
		}
			.base_grey-letters img{
				width: 100%;
			}


		/*COLORED LETTER*/
		.color-letter_container{
			/*border: 1px solid lime;*/
			width: 480px;
			margin: 0 auto;
			position: relative;
		}
			/*ALL BUTTONS*/
			.button{
				/*border: 1px solid cyan;*/
				height: 137px;
				position: absolute;
				top: 0;
				background-color:  rgba(255,255,255,0);
			}

				.appear_content{
					/*border: 1px solid red;*/
					float: left;
				}

					/*INDIVIDUAL BUTTON CONTAINERS*/
					/*infographic button*/
					.appear_i1{
						/*border: 1px solid red;*/
						width: 44px;  
						left: 0;
					}
						.appear_i1:hover #i1_color, .appear_i1:hover .page_label{
							display: block;
						}
					/*illustration button*/
					.appear_i2{
						width: 44px;  
						left: 9.1666%;
					}
						.appear_i2:hover #i2_color, .appear_i2:hover .page_label{
							display: block;
						}
					/*design button*/
					.appear_d{
						width: 100px;  
						left: 18.3332%;
					}
						.appear_d:hover #d_color, .appear_d:hover .page_label{
							display: block;
						}
					/*electronic arts button*/
					.appear_e{
						width: 88px;  
						left: 39.1665%;
					}
						.appear_e:hover #e_color, .appear_e:hover .page_label{
							display: block;
						}
					/*illustration button*/
					.appear_a{
						width: 108px;   
						left: 57.4995%;
					}
						.appear_a:hover #a_color, .appear_a:hover .page_label{
							display: block;
						}
					/*studio button*/
					.appear_s{
						width: 96px;  
						left: 79.9995%;
					}
						.appear_s:hover #s_color, .appear_s:hover #studio{
							display: block;
						}

			.color_character{
				/*border: 1px solid pink;*/
				width: 100%;
				float: left;
				position: relative;
			}

				/*COLOR LETTERS*/
				#i1_color{width: 44px; height: 137px;float: left; display: none; /*border: 1px solid grey;*/ }
				#i2_color{width: 44px; height: 137px; float: left; display: none; /*border: 1px solid grey;*/ }
				#d_color{width: 100px; height: 137px; float: left; display: none; /*border: 1px solid grey;*/ }
				#e_color{width: 88px; height: 137px; float: left; display: none; /*border: 1px solid grey;*/ }
				#a_color{width: 108px; height: 137px; float: left; display: none; /*border: 1px solid grey;*/ }
				#s_color{width: 96px; height: 137px; float: left; display: none; /*border: 1px solid grey;*/ }

				.page_label{
					/*border: 1px solid red;*/
					font-family: "Roboto";
					font-weight: 500;
					font-size: 1.25em;
					text-transform: uppercase;
					text-align: left;
					position: absolute; 
					left: 0;
					width: 250px;
					display: none;
					float: left;
				}
					#info{bottom: -20px; left:.5em;}
					#illo{bottom: -20px; left:.5em;}
					#design{bottom: -20px; left:.4em;}
					#electronic{bottom: -20px; left: .3em;}
					#about{bottom: -20px;}
					#studio{bottom: -20px; left: .5em;}
}

/** MEDIUM: TABLET LANDSCAPE / DESKTOP: YELLOW; *************************************/

@media only screen and (min-width: 64em) {


}

/* LARGE: DESKTOP: ORANGE; ************************************/

@media only screen and (min-width: 85.375em) {


}

/* X-LARGE: DESKTOP: CYAN; ************************************/

@media only screen and (min-width: 120em) {


}

/* XX-LARGE: DESKTOP: RED; ************************************/

@media only screen and (min-width: 160em) {


}