/* Public */

#bricks-wrap {
	width:100%;
	margin:0 auto;
	max-width:1000px;
	}

#bricks-wrap #bricks {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display:flex;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;

			-webkit-box-orient: horizontal;
		    -moz-box-orient: horizontal;
		    -webkit-flex-direction: row;
		    -ms-flex-direction: row;
		    flex-direction: row;	

	}
	
	@media screen and (max-width: 800px){
		#bricks {

		}
	}
	
#bricks-wrap #bricks div.brick {
	-webkit-box-flex: 0 1 auto;
	width: 32%;
	-webkit-flex: 0 1 auto;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	background:#eee;
	margin: 0 0 20px;
	min-height:169px; /* Important for Firefox 59 and prior */
	}
	
	#bricks-wrap #bricks div.brick.hero {
		width:100%;
		min-height:540px; /* Important for Firefox 59 and prior */
		}
	
	@media screen and (max-width: 500px){
		#bricks-wrap #bricks div.brick.hero,
		#bricks-wrap #bricks div.brick {
			width:100%;
			min-height:169px;
		}
	}

/*

#bricks div a {
	display:block;
	width:100%;
    height:100%;
    position:relative;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:top center;
    overflow:hidden;
	}
	
	#bricks div a span.caption {
		background-image:url('/blog/wp-content/plugins/fwdlabs-content-bricks/img/gradient.png');
		background-position:top center;
		background-repeat:repeat-x;
		position:absolute;
		bottom:0;
		width:100%;
		}

		#bricks div a span.caption span {
			display:block;
			padding:10px;
			}
			
		#bricks div a span.caption span.h2 {
			color:#fff;
			text-transform:uppercase;
			font-weight:bold;
			padding-bottom:0;
			}
		#bricks div a span.caption span.p { color:yellow; }

#hero img {
	width:100%;
	height:auto;
	margin-bottom:1em;
	}


*/

#bricks-wrap #strapline {
	background:#f2f2f2;
	color:#666;
	text-align:center;
	font-size:2em;
	padding:0.5em 1em;
	margin:0 0 20px;
	}
	
	@media screen and (max-width: 500px){
		#bricks-wrap #strapline { font-size:1.25em; }
	}
	
	#bricks-wrap #strapline a {
		color:#ce2127;
		text-decoration:none;
		font-weight:bold;
		}

/* Both */

.brick-preview-wrap {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display:flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    height:100%; /* Important for Firefox 59 and prior */
	}

.brick-preview {
	-webkit-box-flex: 0 1 auto;
	width: 100%;
	min-height:auto;
	-webkit-flex: 0 1 auto;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	background:#333;
	margin: 0;
	position: relative;
    padding-top: 56.25%;	
	}
	
.brick-preview a,
.brick-preview iframe {
	display:block;
	width:100%;
    height:100%;
    /* position:relative; */
    background-repeat:no-repeat;
    background-size:cover;
    background-position:top center;
    overflow:hidden;
    
		position: absolute;
		top:0;
		left:0;   
		min-height: 50px !important; 
	}

	.brick-preview a span.gradient {
		background-image:url('../img/gradient.png');
		/* background-position:bottom center; */
		background-repeat:repeat-x;
		position:absolute;
		bottom:-40px;
		width:100%;
		height:100px;
		z-index:8;
		opacity:0.7;
		}
	
	.brick-preview a span.caption {
		/* 
		background-image:url('../img/gradient.png');
		background-position:bottom center;
		background-repeat:repeat-x;
		 */
		position:absolute;
		bottom:0;
		width:100%;
		z-index:9;
		}

		.brick-preview a span.caption span {
			display:block;
			padding:10px;
			text-shadow: 0px 2px 0px rgba(0, 0, 0, 1);
			}
			
		.brick-preview a span.caption span.h2 {
			color:#fff;
			text-transform:uppercase;
			font-weight:bold;
			padding-bottom:0;
			font-size:1.25em;
			}
		.brick-preview a span.caption span.p {
			color:yellow;
			padding-top:0;
			}

/* Admin */

#bricks-admin-wrap {
	}

#bricks-admin-wrap .brick-preview-wrap { width:300px; margin-bottom:1em; }

#bricks-admin-wrap .brick-form-wrap {
	border-left:5px solid #000;
	padding:1em;
	}

#bricks-admin-wrap .brick-form-wrap p { margin:0 0 1em; }

#bricks-admin-wrap .brick-form-wrap small { display:block; }
#bricks-admin-wrap .brick-form-wrap .uppercase { text-transform:uppercase; }

#bricks-admin-wrap .brick-form-wrap .first { margin-top:0; }
#bricks-admin-wrap .brick-form-wrap .last { margin-bottom:0; }
	
#bricks-admin-wrap form.brickform { }
#bricks-admin-wrap form.brickform table { width:100%; }
#bricks-admin-wrap form.brickform td {
	border-left:1px solid #ccc;
	vertical-align:top;
	width:33%;
	padding-left:1.25em;
}
#bricks-admin-wrap form.brickform td input[type="text"] { width:90%; }
#bricks-admin-wrap form.brickform ul { padding-left:1.25em; }
#bricks-admin-wrap form.brickform li { list-style: square; }

#bricks-admin-wrap textarea { width:300px; height:169px; }

#brick-order-wrap ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	width:100%;
	max-width:900px;
	}
	#brick-order-wrap ul li {
		-webkit-box-flex: 0 1 auto;
		width: 32%;
		-webkit-flex: 0 1 auto;
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		margin: 0 0 20px;
		}
		
		#brick-order-wrap ul li:first-child {
			width:100%;
			}
		
		#brick-order-wrap .brick-preview-wrap { width:100%; }
		
		.brick-placeholder { display:block; width:100%; height:100%; min-height:150px; background:#555; }