/* START TILER STUFF (BASE SETTINGS) */

.tile321-container-darklight {
	width: 100%;
	float: left;
	border:0px solid #000;
	background:#eceff1;
	//background:blue;
	padding:0% 0 6% 0;
	margin:auto;
}

.tile321-container-dark {
	width: 100%;
	float: left;
	border:0px solid #000;
	background:#b0bec5;
	padding:6% 0 5% 0;
	margin:auto;
}

.tile321-container-light {
	width: 100%;
	float: left;
	border:0px solid #000;
	background:#fafafa;
	padding:0% 0 6% 0;
	margin:auto;
}

.tile321-container {
	width:966px;
	margin:auto;
	//border:6px solid grey;
	background:#eceff1;	
}

.tiler {
	/* force the div to properly contain the floated images: */
	position:relative;
	float:left;
	clear:none;
	overflow:hidden;
	//padding: 0 25px 0 25px;
	margin: 0 10px 20px 10px;
	border: 0px solid #000;
	box-shadow: 1px 1px 3px #aaa;
}

.tiler img {
	position:relative;
	z-index:1;
	width:300px;	
}

.tiler .title {
	font-family: 'Open Sans', sans-serif;
	font-size:112.5%;
	display:block;
	position:absolute;
	width:100%;
	top:66%;
	height:34%;
	left:0;
	z-index:2;
	text-align:left;
	background:#FFF;
	color:#000;
	padding-left:5px;
	padding-top:5px;
	//border: 2px solid red;
}

.tiler .descrip {
	font-family: 'Roboto', sans-serif;
	font-size:93.75%;
	color:#757575;
	display:block;
	position:absolute;
	width:95%;
	top:77%;	
	left:0;
	z-index:2;
	text-align:left;
	background:#FFF;
	height:23%;
	margin-left:5px;
	//border: 2px solid blue;
}

.tiler-font-rebel .tiler .title {
	font-size:106%;
}

#quantum-tile {
	display:none;
}

/* END TILER STUFF */

/* --------------------------
EXTRA LARGE VIEW 
-------------------------- */
@media (min-width: 1200px) {
	
	/* START TILER STUFF (WIDE VIEW)*/
	
	//USING BASE SETTINGS

	/* END TILER STUFF */
}

/* --------------------------
LARGE VIEW
-------------------------- */
@media (max-width: 1200px) and (min-width: 1078px) {

	/* START TILER STUFF (LARGE VIEW) */
	
	//USING BASE SETTINGS

	/* END TILER STUFF */

}

/* --------------------------
MEDIUM VIEW
-------------------------- */
@media (max-width: 1078px) and (min-width: 720px) {

	/*START TILER STUFF (MEDIUM VIEW)*/

	.tile321-container {
		width:644.267px;	
		//width:95%;	
		//border: 1px solid fuchsia;
	}

	#quantum-tile {
		display:block;
	}


	/* START RESIZING THE TOP 3 TILES TO SMALLER */ 
	/*
	.tiler-smallable .tiler {
		//margin: 0 10px 20px 10px;
		margin: 0 5px 10px 5px;
	}

	.tiler-smallable .tiler img {
		//position:relative;
		width:204px;	
	}

	.tiler-smallable .tiler .title { 
		font-size:75%;
	}

	.tiler-smallable .tiler .descrip { 
		font-size:62.5%;
		top:79%;
		height:21%
	}

	.tiler-font-rebel .tiler .title {
		font-size: 75%;
	}
	*/
	/* END RESIZING THE TOP 3 TILES TO SMALLER */
	
	/* END TILER STUFF */
}

/* --------------------------
SMALL VIEW
-------------------------- */
@media only screen and (max-width: 720px) and (min-width: 480px) {

	/* START TILER STUFF (NARROW VIEW)*/	

	.tile321-container {
		width:95%;	
		//border: 4px green solid;
	}

	.tile421-container {
		width:100%;	
		//border: 1px #000 solid;
	}

	.tiler img {
		width:100%;
	}

	.tiler .title {
		font-family: 'Open Sans', sans-serif;
		font-size:131%;
		display:block;
		position:absolute;
		width:100%;
		top:78%;
		height:22%;
		left:0;
		z-index:2;
		text-align:left;
		background:#FFF;
		color:#000;
		padding-left:5px;
		padding-top:5px;
	}

	.tiler .descrip {
		font-family: 'Roboto', sans-serif;
		font-size:106%;
		color:#757575;
		display:block;
		position:absolute;
		width:95%;
		top:85%;
		height:15%;
		left:0;
		z-index:2;
		text-align:left;
		background:#FFF;
		margin-left:5px;
	}

	.tiler-font-rebel .tiler .title {
		font-size:115%;
	}

	#quantum-tile {
		display:block;
	}

}

/* --------------------------
increment VIEW --> between small and smaller
-------------------------- */
@media only screen and (max-width: 7100px) and (min-width: 10px) {

}

/* --------------------------
SMALLER VIEW (MOBILE PHONE SIZE)
-------------------------- */
@media only screen and (max-width: 480px) and (min-width: 10px) {

	/* START TILER STUFF (NARROW VIEW)*/	

	.tile321-container {
		width:95%;	
		//border: 4px green solid;
	}

	.tile421-container {
		width:100%;	
		//border: 1px #000 solid;
	}

	.tiler img {
		width:100%;
	}

	.tiler .title {
		font-family: 'Open Sans', sans-serif;
		font-size:131%;
		display:block;
		position:absolute;
		width:100%;
		top:60%;
		height:40%;
		left:0;
		z-index:2;
		text-align:left;
		background:#FFF;
		color:#000;	
	}

	.tiler .descrip {
		font-family: 'Roboto', sans-serif;
		font-size:106%;
		color:#757575;
		display:block;
		position:absolute;
		width:97%;
		top:71%;
		height:29%;
		left:0;
		z-index:2;
		text-align:left;
		background:#FFF;
	}

	.tiler-font-rebel .tiler .title {
		font-size:115%;
	}

	#quantum-tile {
		display:block;
	}

}

/* --------------------------
TINY VIEW (smaller than droid mini, for example)
-------------------------- */
@media only screen and (max-width: 350px) and (min-width: 10px) {
	
	.tiler .title {
		font-family: 'Open Sans', sans-serif;
		font-size:131%;
		display:block;
		position:absolute;
		width:100%;
		top:57%;
		height:43%;
		left:0;
		z-index:2;
		text-align:left;
		background:#FFF;
		color:#000;	
	}

	.tiler .descrip {
		font-family: 'Roboto', sans-serif;
		font-size:106%;
		color:#757575;
		display:block;
		position:absolute;
		width:97%;
		top:69%;
		height:31%;
		left:0;
		z-index:2;
		text-align:left;
		background:#FFF;
	}

	.tiler-font-rebel .tiler .title {
		font-size:100%;
	}

	#quantum-tile {
		display:block;
	}

}

/* --------------------------
EVEN TINIER VIEW 
-------------------------- */
@media only screen and (max-width: 310px) and (min-width: 10px) {
	
	.tiler .title {
		font-family: 'Open Sans', sans-serif;
		font-size:100%;
		display:block;
		position:absolute;
		width:100%;
		top:56%;
		height:44%;
		left:0;
		z-index:2;
		text-align:left;
		background:#FFF;
		color:#000;	
	}

	.tiler .descrip {
		font-family: 'Roboto', sans-serif;
		font-size:100%;
		color:#757575;
		display:block;
		position:absolute;
		width:97%;
		top:66%;
		height:34%;
		left:0;
		z-index:2;
		text-align:left;
		background:#FFF;
	}
		
	.tiler-font-rebel .tiler .title {
		font-size:100%;
	}

	#quantum-tile {
		display:block;
	}

}

/* --------------------------
RIDICULOUSLY TINY VIEW (
-------------------------- */
@media only screen and (max-width: 291px) and (min-width: 10px) {
	
	.tiler .title {
		font-family: 'Open Sans', sans-serif;
		font-size:85%;
		display:block;
		position:absolute;
		width:100%;
		top:75%;
		height:25%;
		left:0;
		z-index:2;
		text-align:left;
		background:#FFF;
		color:#000;	
	}

	.tiler .descrip {
		display:none;		
	}
		

	.tiler-font-rebel .tiler .title {
		font-size:85%;
	}

	#quantum-tile {
		display:block;
	}

}

/*************************************************************************/
/*			TEMP MOBILE LANDSCAPE						 */
/*************************************************************************/
@media only screen and (min-aspect-ratio: 13/9) and (max-device-width:720px)  {
	

}