/* Admin & Public style */


/* set a default css good for any device */
.bdotcom_bc_mbe_banner {
	background-size: cover;
	background-position: center 66%;
    background-color: #003580; 
    position: relative;
    width:100%;
    box-sizing: border-box;
    text-align: center;
    padding:20px;
}

.bdotcom_bc_mbe_banner > * { 
    box-sizing: border-box;
}

#bdotcom_bc_main_settings .bdotcom_bc_mbe_banner .bdotcom_bc_copy_wrapper h1,
#bdotcom_bc_main_settings .bdotcom_bc_mbe_banner .bdotcom_bc_copy_wrapper h2,
#bdotcom_bc_main_settings .bdotcom_bc_mbe_banner .bdotcom_bc_copy_wrapper h3,
#bdotcom_bc_main_settings .bdotcom_bc_mbe_banner .bdotcom_bc_copy_wrapper h4,
#bdotcom_bc_main_settings .bdotcom_bc_mbe_banner .bdotcom_bc_copy_wrapper h5,
#bdotcom_bc_main_settings .bdotcom_bc_mbe_banner .bdotcom_bc_copy_wrapper h6,
#bdotcom_bc_main_settings .bdotcom_bc_mbe_banner .bdotcom_bc_copy_wrapper p
{
	margin:0;
	padding:0;
}

.bdotcom_bc_copy_wrapper {
	width:100%;
	top:0;
	left:0;
	position: absolute;
}

.bdotcom_bc_mbe_banner .bdotcom_bc_copy_wrapper {
	padding:10px;
	background-color: #000;
 	background-color: rgba( 0,0,0,0.7 );
	color:#FFF;
}

img.bdotcom_bc_logo {
	width: 100%;
	max-width: 160px;
	margin: 0 auto;
}

img.bdotcom_bc_spacer {
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100% !important;
	display:block;
	z-index: 1;
}

.bdotcom_bc_mbe_button {
	background:#0896ff;
	color:#FFFFFF;
	padding: 10px 23px;
	border-radius: 6px;
	vertical-align: middle;
	text-align:center;
    font-weight: bold;
    position: absolute;
	bottom: 10px;
	left: 0px;
	right: 0px;
	margin:0 10px;
    box-shadow: 2px 2px 2px #333;
    width:auto;
}

.bdotcom_bc_copy_wrapper h1 {
	font-size: 16px;
}

.bdotcom_bc_mbe_banner {
	min-height: 300px;
}

@media only screen 
and (min-width : 321px) 
and (max-width : 480px)  {
	
	.bdotcom_bc_copy_wrapper {
		min-height: 80px;
	}
	
}

@media only screen 
and ( min-width : 481px ) 
and ( max-width : 768px ) 
and (orientation:landscape)  {

	.bdotcom_bc_mbe_banner {
	    min-height: 200px;
	}
	
	.bdotcom_bc_copy_wrapper {
		width: 38.28%;/*100 / 1.62;*/
		left: 10px;
		top:10px;
	}
	
	.bdotcom_bc_mbe_banner .bdotcom_bc_copy_wrapper {
		padding:10px;
	}
	
	.bdotcom_bc_mbe_button {
		right:10px;
		bottom:10px;
		margin-right:0;
		max-width:380px;
		left:auto;
	}	
	
}

@media only screen 
and (min-width : 769px) {
	
	.bdotcom_bc_mbe_banner {
		height: 300px;
	}

	img.bdotcom_bc_logo {
		max-width: 250px;
	}
	
	.bdotcom_bc_copy_wrapper {
	    width: 100%;
	    left:0px;
	    top:0px;
	    background:
	}	
	
	.bdotcom_bc_mbe_button {
	    left: 0;
	    margin: 0 auto;
	    right: 0;
	    top: 40%;
	    bottom: auto;
	    max-width: 60%;
	}
	
	.bdotcom_bc_mbe_banner .bdotcom_bc_copy_wrapper {
		/*background: #003580;
		background: rgba(0, 0, 0, 0) linear-gradient(to top, rgba(0, 29, 71, 0) 0px, rgba(0, 20, 50, 0.85) 100%) repeat scroll 0 0;*/
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#001432+0,001d47+100&0.85+0,0+100 */
		background:  rgba(0, 0, 0, 0) -moz-linear-gradient(top,  rgba(0,20,50,0.85) 0%, rgba(0,29,71,0) 100%); /* FF3.6-15 */
		background:  rgba(0, 0, 0, 0) -webkit-linear-gradient(top,  rgba(0,20,50,0.85) 0%,rgba(0,29,71,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background:  rgba(0, 0, 0, 0) linear-gradient(to bottom,  rgba(0,20,50,0.85) 0%,rgba(0,29,71,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9001432', endColorstr='#00001d47',GradientType=0 ); /* IE6-9 */
		height: 50%;		
		
	}
	
	.bdotcom_bc_mbe_banner:hover .bdotcom_bc_copy_wrapper {
		height: 100%;
		transition: height 2s ease-out 0s;
				
	}
	
	.bdotcom_bc_mbe_banner {
		padding: 0 30%;
	}
	
}