Template:BGIC-Union/responsive-css
/* -------------------------------------------------------------- */ /* --- REPSONSE 768px -------------------------------------------- */ /* -------------------------------------------------------------- */ @media screen and (max-width:980px) { #content {width:748px;} .res768hide {display:none !important; }
.sti-menu { padding-left:16px; width:780px;} .sti-menu li {width: 195px; height:300px;} .sti-icon { width: 155px; height:155px; left:30px;} .sti-menu li a h2 {width:155px; top:185px;} .sti-menu li a h3 {width:155px; top:215px;}
.sti-icon-one{background-image:url(../images/icons/960/button1.png);} .sti-icon-two{background-image:url(../images/icons/960/button2a.png);} .sti-icon-three{background-image:url(../images/icons/960/button3a.png);} .sti-icon-four{background-image:url(../images/icons/960/button4.png);}
/* ------------------- COLUMNS -------------------- */
.column {margin-right:20px;}
.column-1-2 {width:364px;}
.column-1-2 img {max-width:364px;}
.column-1-3 {width:236px;}
.column-1-3 img {max-width:236px;}
.column-2-3 {width:492px;}
.column-2-3 img {max-width:492px;}
.column-1-4 {width:172px;}
.column-1-4 img {max-width:172px;}
.column-3-4 {width:556px;}
.column-3-4 img {max-width:556px;}
.column36 {margin-right:32px;}
.column-1-2.column36 {width:358px;}
.column-1-2.column36 img {max-width:358px;}
.column-1-3.column36 {width:228px;}
.column-1-3.column36 img {max-width:228px;}
.column-2-3.column36 {width:488px;}
.column-2-3.column36 img {max-width:488px;}
.column-1-4.column36 {width:163px;}
.column-1-4.column36 img {max-width:163px;}
.column-3-4.column36 {width:553px;}
.column-3-4.column36 img {max-width:553px;}
.column48 {margin-right:44px;} .column-1-2.column48 {width:352px;} .column-1-2.column48 img {max-width:352px;} .column-1-3.column48 {width:220px;} .column-1-3.column48 img {max-width:220px;} .column-2-3.column48 {width:484px;} .column-2-3.column48 img {max-width:484px;} .column-1-4.column48 {width:154px;} .column-1-4.column48 img {max-width:154px;} .column-3-4.column48 {width:550px;} .column-3-4.column48 img {max-width:550px;}
.column60 {margin-right:56px;} .column-1-2.column60 {width:346px;} .column-1-2.column60 img {max-width:346px;} .column-1-3.column60 {width:212px;} .column-1-3.column60 img {max-width:212px;} .column-2-3.column60 {width:480px;} .column-2-3.column60 img {max-width:480px;} .column-1-4.column60 {width:145px;} .column-1-4.column60 img {max-width:145px;} .column-3-4.column60 {width:547px;} .column-3-4.column60 img {max-width:547px;}
.column .nivoSlider img, .column36 .nivoSlider img, .column48 .nivoSlider img, .column60 .nivoSlider img {max-width:none !important;}
/* -------------------- FOOTER -------------------- */
#footer-wrapper {width:748px;}
.footer-column {width:220px; margin:0 22px 0 0; padding:0 21px 0 0;}
.footer-column .fadehover {width:54px; height:54px;} .footer-column .fadehover img {max-width:54px; max-height:54px;}
.footer-info-map {width:365px;} .footer-info-text {padding-left:18px; width:365px;} .footer-info-picks {margin:22px 0 0 -10px; width:100%;}
/* --------------------- MENU --------------------- */
div.menu{width:748px} ul.blockeasing li a {padding-left:13px; padding-right:13px;}
/* --------------------- BLOG --------------------- */
.blog_left, .border, .blog_left_content, ul.filterOptionsblog {width:461px;} .blog_content_inner {width:350px;} .nivo-directionNav, .theme-default .nivo-directionNav {display:block;}
.bott_post {width:129px; padding-left:18px; margin-left:18px;}
.bott_post img {width:129px;}
.comment_cont {width:461px;} .comment_cont_reply1 {width:411px; margin-left:50px;} .comment_cont_reply2 {width:361px; margin-left:100px;} .comment_cont_reply3 {width:311px; margin-left:150px;}
#commentform input {width:130px;} #commentform textarea {width:287px;} .inner_copyright{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
/* ----------------- SERVICES --------------------- */
.services_container {width:748px;} ul.ourHolder {width: 1020px;overflow: hidden;} ul.ourHolder li.item {width:353px; margin-right:40px;} ul.ourHolder li.item img {max-width:353px;}
/* ------------------ CONTACT --------------------- */
.three_inf, .four_inf {width:100%; background:#767676; padding:0; height:44px; margin-bottom:10px;} .sub_inf {background:none; padding:0;} .sub_inf.border_right {border:0;} .sub_inf .contact_title {float:left; padding:10px; background:#2d2d2d; margin-right:10px; height:24px;} .sub_inf .contact_title h3 {margin:0;} .sub_inf ul {padding:5px;} .sub_inf li.sub_inf_city {float:none; font-weight:bold;} .sub_inf li { float:left; margin-right:10px;} .arrow_inf {display:none;} .three_inf .num_inf, .four_inf .num_inf {float:right; padding:5px !important; color:#fff;}
#contactform input {width:468px;}
#contactform textarea {height:250px; width:468px;}
.contact_text{width:220px; margin-left:21px; padding-left:22px;}
/* ------------------ GALLERY --------------------- */ ul.ourHolderGallery {width:756px;} ul.ourHolderGallery .item img, ul.ourHolderGallery .image_roll_info, ul.ourHolderGallery .image_roll_glass, ul.ourHolderGallery .image_roll_zoom {max-width:748px;}
/* ------------------ OUR TEAM --------------------- */
.team {width:746px; height:200px;}
.team_content {width:536px;}
.team h2 {padding:0 20px;}
.team_contact{display:block;width:495px;padding:0px 20px;}
.team_about {width:495px; padding:10px 20px 0px 20px;}
.img_team {margin:45px 15px 38px 15px;}
.team.team1-2 {width:368px;}
.team_content1-2{float:left; width:231px;} .team_content1-2 .team_contact{width:191px;padding:0 20px;} .team_content1-2.team_content1-2b {width:160px;} .team_content1-2.team_content1-2b .team_contact{width:120px;}
.team.team1-3{float:left; width:213px;} .team.team1-3 .img_team {margin:20px 53px;}
.team.team1-4 {width:151px;} .team.team1-4 .img_team {margin:15px 22px;} .team_content1-4 {height:150px;} .team1-4 .social_icon {width:120px; margin:15px;} .team1-4 .social_icon .fadehover {margin:2px;} .team1-4 h2 {margin-top:10px;} }
/* -------------------------------------------------------------- */
/* --- REPSONSE 440px ------------------------------------------- */
/* -------------------------------------------------------------- */
@media screen and (max-width:768px) {
#content {width:420px;}
.res440hide {display:none !important; }
.sti-menu { padding-left:16px; width:452px;} .sti-menu li {width: 226px; height:300px;}
.column, .column36, .column48, .column60 {margin-right:0px; !important; width:100% !important} .column img, .column36 img, .column48 img, .column60 img {max-width:100% !important} .column .nivoSlider img, .column36 .nivoSlider img, .column48 .nivoSlider img, .column60 .nivoSlider img {max-width:none !important;}
/* --------------------- MENU --------------------- */
.header_silverbackground{height:auto; padding-bottom:10px;} div.menu{width:420px} a.logo {float:none;display:block; margin:auto; text-align:center;}
.blockeasing-wrapp {position:relative; width:280px; margin: 10px auto; background:#fff url(../images/menu-arrow.png) no-repeat 255px 10px; cursor:pointer;} .blockeasing-header {display:block; margin:0; padding:4px 10px;} ul.blockeasing {width:280px; margin:0 0 0 -1px; float:none; overflow-x:hidden; overflow-y:visible; background:#fff; position:absolute; top:27px; left:0; z-index:999; border:1px solid #353535; border-bottom:0; display:none;} ul.blockeasing li {width:100%; border-bottom:1px solid #353535;} ul.blockeasing li ul {width:100%; position:static; display:block;border-left:5px solid #fff; box-shadow: 0px 0px 0 #333333; -moz-box-shadow: 0px 0px 0 #333333; -webkit-box-shadow: 0px 0px 0 #333333;} ul.blockeasing li li {display:block; position:static; border:0;} ul.blockeasing li li a, ul.blockeasing li a, ul.blockeasing li.current a {width:100%; padding:5px 10px; display:inline-block; background:#fff; text-align:left; color:#353535; text-shadow:none; font-size:14px;height:14px;}
/* -------------------- FOOTER -------------------- */
#footer-wrapper {width:420px} .footer-column {width:420px; margin:0 0 22px 0; padding:0 0 21px 0; border-bottom:1px #fff dashed; border-right:0;}
.footer-column .fadehover {width:54px; height:54px;} .footer-column .fadehover img {max-width:54px; max-height:54px;} .footer-column.last {margin-bottom:22px;} .footer-info-text {margin:22px 0 0 -20px; width:100%;} .footer-info-picks {margin:22px 0 0 -10px; width:100%;}
.footer-menu {text-align:center; margin-bottom:10px;} .footer-menu li {float:none; display:inline-block; padding:0 7px 0 7px;} .footer-copyright {text-align:center; float:none;}
/* --------------------- BLOG --------------------- */
.blog_left {border:0; padding:0; width:420px;}
.border{width:420px;}
.blog_right {display:none;}
.blog_left .blog_content_info {width:79px;}
.blog_left_content {width:420px;} .blog_content_inner {width:330px;} ul.filterOptionsblog {width:420px;} .social_icon_blog .fadehover {width:45px; height:45px;} .social_icon_blog .fadehover img {max-width:45px; max-height:45px;}
.bott_post {width:115px; padding-left:18px; margin-left:18px;}
.bott_post img {width:115px;}
.comment_cont {width:420px;} .comment_cont_reply1 {width:385px; margin-left:35px;} .comment_cont_reply2 {width:350px; margin-left:70px;} .comment_cont_reply3 {width:315px; margin-left:105px;}
#commentform input {width:130px;} #commentform textarea {width:246px;}
/* ----------------- SERVICES --------------------- */
.services_container {width:420px;}
ul.ourHolder {width: 460px;overflow: hidden;}
ul.ourHolder li.item {width:420px; margin-right:40px;}
ul.ourHolder li.item img {max-width:420px;}
/* ------------------ CONTACT --------------------- */
.three_inf, .four_inf {height:64px;} .sub_inf .contact_title {padding:20px 10px;} .sub_inf li { float:none;}
#contactform input {width:404px;}
#contactform textarea {height:138px; width:404px;}
.contact_text{width:100%; margin-left:0; padding-left:0; border:0;}
/* ------------------ GALLERY --------------------- */ ul.ourHolderGallery {width:428px;} ul.ourHolderGallery .item img, ul.ourHolderGallery .image_roll_info, ul.ourHolderGallery .image_roll_glass, ul.ourHolderGallery .image_roll_zoom {max-width:420px;}
/* ------------------ OUR TEAM --------------------- */
.team, .team.team1-2, .team.team1-3, .team.team1-4
{width:420px; height:180px;padding:10px 0; margin:0 0 10px 0;}
.team_about {display:none;}
.team.team1-3 .team_content1-3, .team.team1-4 .team_content1-4, .team_content
{float:left; width:212px; text-align:left;}
.team1-3 .team_content1-3 .team_contact, .team1-4 .team_content1-4 .team_contact
{text-align:left; padding:0 20px;}
.team1-3 .social_icon, .team1-4 .social_icon
{float:left; width:70px; clear:none; margin:0;}
.team1-3 .social_icon .fadehover, .team1-4 .social_icon .fadehover
{margin:0;}
.team_contact{display:block; width:210px; padding:0px 20px;} .team.team1-3 .img_team, .team.team1-4 .img_team, .img_team {margin:45px 15px 38px 15px;}
.team_border2{border-left:#fff 1px dashed; border-bottom:0; width:0px;height:100%;float:left;}
.team_content1-2{width:282px; float:left;} .team_content1-2 .team_contact{width:241px;} .team_content1-2.team_content1-2b {width:212px;} .team_content1-2.team_content1-2b .team_contact{width:171px;}
}
/* -------------------------------------------------------------- */ /* --- REPSONSE 300px ------------------------------------------- */ /* -------------------------------------------------------------- */
@media screen and (max-width:440px) { #content {width:280px;} .res300hide {display:none !important; }
.middle_silver_background {height: 50px;} .sti-menu { display:none;}
/* -------------------- FOOTER -------------------- */
#footer-wrapper {width:280px}
.footer-column {width:280px;}
.footer-info-map {max-width:280px;} .footer-column .fadehover {width:70px; height:70px;} .footer-column .fadehover img {max-width:70px; max-height:70px;}
/* --------------------- MENU --------------------- */
div.menu{width:280px}
/* --------------------- BLOG --------------------- */
.blog_left {width:280px;} .border {width:280px;}
.blog_left .blog_content_info {width:280px; float:none; border-bottom:1px #353535 dashed; padding-bottom:5px; margin-bottom:10px;} .blog_left .blog_content_info a.comment_number {float:left; margin:10px;} .blog_left .blog_content_date {float:left;}
.blog_left .blog_content_author, .blog_left .blog_content_category {padding-right:0;} .blog_content_quote {display:none;}
.blog_left_content {width:280px;} .blog_content_inner {width:280px;} ul.filterOptionsblog {width:280px;} .social_icon_blog .fadehover {width:40px; height:40px;} .social_icon_blog .fadehover img {max-width:40px; max-height:40px;}
.bott_post {width:280px; padding-left:0; margin-left:0; margin-bottom:20px; border-left:0;}
.bott_post img {width:195px;}
.comment_cont {width:280px;} .comment_cont_reply1 {width:260px; margin-left:20px;} .comment_cont_reply2 {width:240px; margin-left:40px;} .comment_cont_reply3 {width:220px; margin-left:60px;}
#commentform input {width:264px;} #commentform .padd-left {padding-left:0;} #commentform textarea {width:272px;}
/* ----------------- SERVICES --------------------- */
.services_container {width:280px;} ul.ourHolder {width: 340px;overflow: hidden;} ul.ourHolder li.item {width:280px; margin-right:40px;} ul.ourHolder li.item img {max-width:280px;}
/* ------------------ CONTACT --------------------- */
.arrow_inf{display:block;}
.three_inf, .four_inf{width:100%; background:none; height:auto;} .three_inf ul,.four_inf ul {margin: 0 auto; padding:5px 0;}
.sub_inf{position:relative; background:url('../images/background-gray.png'); color:#fff; padding:10px 20px; } .three_inf ul.num_inf, .four_inf ul.num_inf{float:none; padding:10px 20px 20px 20px !important; color:#353535;}
.sub_inf .contact_title {float:none; padding:0; background:none; margin:0; height:24px;}
.contact_title h3{margin:5px 0 10px; padding:0; color:#fff;}
.four_inf.last {width:195px;}
#contactform input {width:264px;}
#contactform textarea {width:264px;}
/* ------------------ GALLERY --------------------- */ ul.ourHolderGallery {width:288px;} ul.ourHolderGallery .item img, ul.ourHolderGallery .image_roll_info, ul.ourHolderGallery .image_roll_glass, ul.ourHolderGallery .image_roll_zoom {max-width:280px;}
/* ------------------ OUR TEAM --------------------- */
.team, .team.team1-2, .team.team1-3, .team.team1-4
{width:260px; height:auto;padding:0 10px; margin:0 0 10px 0;}
.team h2 {margin-top:0;}
.team .team_content, .team.team1-2 .team_content1-2, .team.team1-2 .team_content1-2.team_content1-2b, .team.team1-3 .team_content1-3, .team.team1-4 .team_content1-4
{width:260px; text-align:center; padding:20px 0 30px; height:auto; float:none;}
.team .team_content .team_contact, .team1-2 .team_content1-2 .team_contact, .team1-2 .team_content1-2.team_content1-2b .team_contact, .team1-3 .team_content1-3 .team_contact, .team1-4 .team_content1-4 .team_contact
{text-align:center; padding:0 20px; width:220px; float:none;}
.team .social_icon, .team1-2 .social_icon, .team1-3 .social_icon, .team1-4 .social_icon
{text-align:center; width:260px; clear:both; margin:15px 0; float:none;}
.team .social_icon .fadehover, .team1-2 .social_icon .fadehover, .team1-3 .social_icon .fadehover, .team1-4 .social_icon .fadehover
{margin:0; float:none; display:inline-block;}
.team_contact{display:block; width:210px; padding:0px 20px;} .team .img_team, .team.team1-2 .img_team, .team.team1-3 .img_team, .team.team1-4 .img_team, .img_team {margin:20px 77px 20px 77px; float:none;}
.team_border, .team_border2 {border-bottom:#fff 1px dashed;width:100%;height:0px;float:none;}
.team_content1-2{width:282px; float:left;} .team_content1-2 .team_contact{width:241px;} .team_content1-2.team_content1-2b {width:212px;} .team_content1-2.team_content1-2b .team_contact{width:171px;}
}
