/* 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%; } }