/*Responsive Styles*/ /*Targeted Device max-width 1200*/ @media all and (min-width: 1170px) { body.left-header-layout { padding-left: 280px; } body.left-header-layout .business-champ-header { height: 100vh; position: fixed; top: 0; left: 0; background-color: grey; max-width: 280px; } body.left-header-layout .business-champ-header .row { height: 100vh; } body.left-header-layout .business-champ-header [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; align-self: center; } body.left-header-layout .business-champ-header .col-md-3 { margin-top: auto; margin-bottom: 50px; } body.left-header-layout .business-champ-header .col-md-9 { margin-bottom: auto; } body.left-header-layout .business-champ-header .menu-main ul { width: 100%; padding-left: 0; } body.left-header-layout .business-champ-header .menu-main ul li { float: none; width: 100%; margin-left: 0; text-align: left; } body.left-header-layout .bc-site-footer { padding-left: 280px; } body.left-header-layout .skill-bar-percent { right: 22px; top: -5px; } body.left-header-layout .top_slider .slide1 .flex_caption1 { margin-left: -500px; } body.left-header-layout #carousel { right: 0; } body.right-header-layout { padding-right: 280px; } body.right-header-layout .business-champ-header { height: 100vh; position: fixed; top: 0; left: auto; right: 0; background-color: grey; max-width: 280px; } body.right-header-layout .business-champ-header .bc-logo-wrapper { text-align: right; } body.right-header-layout .business-champ-header .row { height: 100vh; } body.right-header-layout .business-champ-header [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; align-self: center; } body.right-header-layout .business-champ-header .col-md-3 { margin-top: auto; margin-bottom: 50px; } body.right-header-layout .business-champ-header .col-md-9 { margin-bottom: auto; } body.right-header-layout .business-champ-header .menu-main ul { width: 100%; padding-left:0; } body.right-header-layout .business-champ-header .menu-main ul li { float: none; width: 100%; margin-left: 0; text-align: right; } body.right-header-layout .bc-site-footer { padding-right: 280px; } body.right-header-layout .skill-bar-percent { right: 22px; top: -5px; } body.right-header-layout .top_slider .slide1 .flex_caption1 { margin-left: -500px; } body.right-header-layout #carousel { right: 0; } } /*Targeted Device max-width 1200===========================================================*/ @media all and (max-width: 1200px){ body{ overflow-x: hidden; } .container-large{ max-width: 95%; width: 100%; } nav ul li{ padding: 0 12px; } .skill-bar-percent{ right:0; top:0; } .pb-business-champ{ margin-left: 0; margin-right: 0; } } /*Targeted Device max-width 1020 ===========================================================*/ @media all and (max-width: 1020px){ .flexslider.top_slider .slides .slide1{ background-attachment:scroll!important;} .mobile-menu{ display: block; } .nav.menu-main{ left: 0; } body.box-layout { width: 100%; max-width: 1280px; margin: 0 auto; background-color: rgba(0, 0, 0, 0.14); } body.box-layout .business-champ-header { max-width: 1280px; left: auto; } body.box-layout .bc-site-footer { width: 100%; max-width: 1280px; margin: 0 auto; left: auto; right: auto; } .business-champ-service-body{ grid-template-columns: repeat(autofill, minmax(300px, 1fr)); } body.box-layout #carousel { right: 0; } .top_slider .slide1 .flex_caption1 { padding-left:20px; padding-right: 20px; } .flexslider.top_slider .flex-direction-nav{ margin-left: 20px; } .banner-nav{ display: none; } .flex-direction-nav.container, .banner-caption { width: 1200px; max-width: 100%; } .bc-body-wrapp section:nth-last-child(2) { margin-bottom: 0 !important; } .share-this { margin-left: 0; } .banner-caption{ display: flex; height: 100%; align-items:center; position: relative; } .top_slider .slide1 .flex_caption1{ position: absolute; left: 0; top:50%; margin-left: 0; } .mobile-menu { display: block; height: 30px; width: 30px; cursor: pointer; z-index: 999; } .mobile-menu span { display: block; height: 1px; width: 100%; margin-bottom: 8px; background-color:#000; transition: all 0.4s ease; -ms-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; } nav.menu-main ul>li>a{ color:#fff; } .mobile-menu.collapse-menu span:first-child { transform: rotate(45deg); margin-top: 12px; } .mobile-menu.collapse-menu span:nth-child(2) { opacity: 0; } .mobile-menu.collapse-menu span:last-child { transform: rotate(-45deg); margin-top: -18px; } nav.menu-main { display: none; position:absolute; width: 100%; height: calc(100vh - 20px); height: -webkit-calc(100vh - 20px); overflow-y: auto; top: 100%; left:0; right: 0; background-color: rgba(0, 0, 0, 0.94); padding: 20px 10px; z-index: 9999; } nav.menu-main ul { margin-left: 0; width: 100%; } nav.menu-main ul li { border-radius: 0; display: block; margin: 0; padding: 0 15px; width: 100%; text-align: left; } .container-large{ flex-wrap: wrap; } .panel-grid-cell{ width: 100% !important; flex: 0 0 100%; } .business-champ-home-blog .business-champ-body{ grid-template-columns: repeat(2, 1fr); } .panel-row-style{ padding: 50px 20px !important; } .business-champ-content-wrapper .row{ margin: 0; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals{ width: 100%; } } /*Targeted Device max-width 767============================================================*/ @media all and (max-width: 767px){ .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3{ font-size: 28px !important; line-height: 115%; } .flex_caption1 .custom-btn { margin-top: 10px; } .flex-direction-nav{ display:none; } .flexslider.top_slider, .flexslider.top_slider li{ height:350px; } .top_slider .slide1 .flex_caption1{ top:50%; } .top_slider .slide1 .flex_caption1 .title4{ line-height:25px; font-size:22px; } .top_slider .slide1 .flex_caption1 .title1,.top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3{ line-height:30px; margin-bottom:10px; } .banner-caption a.deafBtn{ margin-top:15px; } .container-large{ max-width: 100%; width: 100%; } .business-champ-flex-wrap{ flex-wrap: wrap; } .business-champ-divider-body a, .business-champ-divider-body.inline-btn a{ margin: 0; margin-top: 30px; } .business-champ-counter .business-champ-body{ display: block; } .milestone-counter{ margin-bottom: 40px; max-width: 100%; min-width: 100%; } .bc-site-footer { position: static !important; } .bc-site-footer .footerCol { flex: 0 0 100%; -webkit-flex: 0 0 100%; padding-bottom: 20px; } .bc-body-wrapp{ margin-bottom: 0 !important; } .article-wrap{ flex-wrap:wrap; } .post-list-view .article-img-wrap{ margin-right: 0; } .business-champ-service-body{ grid-template-columns: repeat(1, 1fr); } .is-sidebar{ margin-top: 30px; } #primary-menu { width: 100%; } .flexslider.top_slider { min-height: 100%; } .bc-site-footer .footerCol:first-child { padding-left: 40px; } .bc-site-footer .footerCol:last-child{ padding-right: 40px; } .business-champ-home-blog .business-champ-body{ grid-template-columns: 1fr; } .business-champ-home-blog .business-champ-body .article-wrap:first-child { grid-column: span 1; grid-row: span 1; } .bc-logo-wrapper{ padding-left: 20px; } .inner-page .article-wrap .article-img-wrap, .bc-site-blog-list .article-wrap .article-img-wrap{ margin-right: 0; } #primary-menu li.woocommerce-cart{ display: inline-block; width: auto; } .article-wrap{ display: block; } .article-wrap .comments{ margin-left: 0; display: block; } .aGrid, [class*="col_"], .sml-info-contact { display: block } .article-wrap .post-summary { padding: 0 30px; } .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3, .top_slider .slide1 .flex_caption1 .title1{font-size: 40px;} .business-champ-content-wrapper{ padding: 40px 20px; } .business-champ-text-image-video-body .video-part{ max-width: 100%; } .two-col .cols{ grid-column: span 2; } .coupon input{ float: left !important; margin-top: 10px !important; } .flex-next i::before, .flex-prev i::before { line-height: 50px; } .flex_caption1 p{margin-right: 8px;} .post-grid-view .post-wrap{ width: 100%; padding-right: 0; } } @media(max-width: 1024px){ #postList .business-champ-flex-wrap{ display: block; } .has-post-thumbnail .article-wrap .post-summary{ padding:0; margin-top: 25px; } } @media(max-width: 768px){ .col_2-70-30 .cols:nth-child(2){ grid-column: span 4; } .col_2-70-30 .cols:nth-child(1){ grid-column: span 6; } }