/* lego.css */
/* most hero stuff defined on Hero.css */


/* this one is up most current */



/* kits and block coloring */
#brickworks #header {
/* have to update the hero image here \/ \/ \/ \/ \/ \/  */
	background-image: url("../hero/hero-lego-p1-v2.jpg");
	width:100%;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:0% 0px; /* left */
	/* this sets up the relationship for the absolute position of the hero content */
	position: relative; 		
	}
#tagline {
	color: #888;
	}


/* hero bg image postion: hoz, vert */
#ffs {
	background-color: #DD0000;
	}
#ffs .legohero {
	background-image: url(../lego/ffs.png);
	background-position: left center; /* h v */
	}

#rsrk {
	background-color: #DDDDDD;
	background-image: linear-gradient(-180deg, #C0C0C0, #E2E2E2, #E5E5E5); /* upper lower */
	}
#rsrk .legohero {
	background-image: url(../lego/rsrk.png);
	background-position: left center; /* h v */
	}

#attk {
	background-color: #F6D800;
	}
#attk .legohero {
	background-image: url(../lego/attk.png);
	background-position: right center; /* h v */
	}

#mini {
	background-color: #2B462B;
	background-image: linear-gradient(-160deg, #2B462B, #1f321e); /* upper lower */
	}
#mini .legohero {
	background-image: url(../lego/mini.png);
	background-position: right center; /* h v */
	background-size: 99%;
}


#r32evo {
	background-color: #444444; /* yellow #666666 */
	}
#r32evo .legohero {
	background-image: url(../lego/r32evo.png);
	background-position: right center; /* h v */
	background-size: 96%;
	}



#zilla {
	background-color: #910505;
	}
#zilla .legohero {
	background-image: url(../lego/zilla.png);
	background-position: left center; /* h v */
	background-size: 92%;
	}
#skyline {
	background-color: #6bd1ee; /*3BA8CE; */
	background-image: linear-gradient(-180deg, #55a9c0, #6bd1ee); /* #4f9eb4, #64c5e0 upper lower */
	}
#skyline .legohero { 
	background-image: url(../lego/kgc10.png);
	background-position: center center; /* h v */
	background-size: 92%;
	}
#p1 {
	background-color: #05486E;
	}
#p1 .legohero {
	background-image: url(../lego/p1.png);
	background-position: left center; /* h v */
	background-size: 92%;
	}



#pink {
	background-color: #FF00FF;
	}
#pink .legohero {
	background-image: url(../hero/hero-94P-low-rear.jpg);
	}


/* colorway dot coloring */
.black {
	background: #222;
	}
.white {
	background: #FFF;
	}
.dbg {
	background: #666;
	}
.lbg {
	background: #999;
	}

.yellow {
	background: #F2D017;
	}
.blo {
	background: #FFB100;	
	}	
.orange {
	background: #FF7F00;
	}
.red {
	background: #E80000;
	}
.dr {
	background: #980D0D;
	}

.dp {
	background: #7100D1;
	}
	
.lime {
	background: #B7D13A;
	}
.dg {
	background: #01602D;
	}

.azure {
	background: #5AF9FF;	
	}
.da {
	background: #08A6ED;	
	}
.blue {
	background: #184BF5;
	}
.db {
	background: #004B76;
	}
.mb {
 	background: #93DEFF;
	}	


/* layout block stylings */

.maintitle {
	margin: 24px 0px 10px;
	}
.promo {
	clear: both;
	margin-bottom: 20pt;
	}
#projectgrid {
	clear: both;
	}
.gridblock {
	position: relative; 
	width: 100%;
}
.legohero {
	background-size: cover;
	background-repeat: no-repeat;
	}
.gridblock .title {
	/* font-weight: 500; */
	margin: 0pt -2pt;
	}
.circle {
	width: 15px; 
	height: 15px;
	border-radius: 50%; 
	margin-left: 1px; 
	display: inline-block; 
	vertical-align: middle; 
	}


/* 1 * /
/* @media mobile baseline layout blocks  */

#brickworks #header {
	height: 130px;
	}

.legohero .name {
	position: absolute;
	top: 140px; /* higher number, further from the top */
	}
.legohero {
	width: 100%; 
	height: 140px;
	}
.legobody {
	width: 100%;
	}
.legodesc {
	display: inline-block; 
	margin-left:  8px;
	margin-right: 8px;
	}



/* 2 */
/* Tablet Portrait Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {

/*gridblock specs passed through here */

#brickworks #header {
	height: 200px; /* 160 */
	}

.gridblock {
	height: 400px; /* slightly shorter top block height for stack */
	}
.legohero .name {
	position: absolute;
	top: 46%;
	}
.legohero {
	float: left; 
	width: 100%; 
	height: 200px;
	}
.legobody {
	width: 100%;
	height: 200px;
	line-height: 200px; /* matched to height for vertical centering hack */
	}
.legodesc {
	display: inline-block; 
	vertical-align: middle;
	line-height: 1.5;
	}


}



/* 3 */
/* Desktop + Tablet Landscape Single Column Layout: 769px up to 1000px

6 col
75/25 content

 */
@media only screen and (min-width: 769px) {

/*gridblock specs passed through here */

#brickworks #header {
	height: 250px;
	}
	
.gridblock {
	height: 424px; /* double block height to stack them together */
	}
.legohero .name {
	position: absolute;
	top: 49%;
	}
.legohero {
	float: left; 
	width: 100%; 
	height: 212px;
	}
.legobody {
	width: 100%;
	height: 212px;
	line-height: 212px; /* matched to height for vertical centering hack */
	}


}



/* 4 */
/* alignments for side-rail layouts */

@media only screen and (min-width: 900px) {


#brickworks #header {
	height: 270px;
	}
.gridblock {
	height: 240px; 
	}
.legohero .name {
	position: absolute;
	top: 98%;
	left:8px;
	}
.legohero {
	float: left; 
	width: 50%; 
	height: 236px;
	}
.legobody {
	float: right; 
	width: 50%;
	height: 240px;
	line-height: 240px; /* matched to height for vertical centering hack */
	}
.legodesc {
	margin-left: 24px;
	margin-right: 16px;
	}


}


/* 4.5 */

@media only screen and (min-width: 1200px) {

.gridblock {
	height: 280px; 
	}
.legohero {
	float: left; 
	width: 50%; 
	height: 280px;
	}
.legobody {
	float: right; 
	width: 50%;
	height: 280px;
	line-height: 280px; /* matched to height for vertical centering hack */
	}



}