.be-wrap { max-width: 1160px; margin: 0 auto; position: relative; z-index: 2; } .page-split-screen-left .be-wrap, .page-split-screen-right .be-wrap{ padding: 0px 30px; } .layout-box{ position: relative; width:1280px; margin: 0px auto; } #hero-section .be-master-fullscreen { height: 100vh; } .be-section.full-screen-section { opacity: 0; height: 1000px; } /* ====================== Content ====================== */ #page-content.content-single-sidebar{ width:820px; } #left-sidebar, #right-sidebar{ width: 260px; } #left-sidebar, #right-sidebar{ float: left; } .left-sidebar-page #page-content,.dual-sidebar-page #page-content { float: right; } .right-sidebar-page #page-content{ float: left; } #left-sidebar, .right-sidebar-page #page-content { margin-right: 80px; } #left-sidebar, #right-sidebar{ margin-bottom: 50px; } #content { position: static; z-index: 2; } body.no-section-scroll #content { -webkit-transform: initial !important; -moz-transform: initial !important; -ms-transform: initial !important; -o-transform: initial !important; transform: initial !important; } .no-page-builder { padding: 70px 0px; } .page #comments { padding: 50px 0; } /* ====================== Border layout ===================== */ .layout-box-top, .layout-box-right, .layout-box-bottom, .layout-box-left { position: fixed; background: #ccc; z-index: 15; -webkit-transform: translateZ(0); } .layout-box-top, .layout-box-bottom { width: 100%; height: 30px; top: 0px; left: 0px; } .layout-box-bottom { top: auto; bottom: 0px; } .layout-box-right, .layout-box-left { width: 30px; height: 100%; top: 0px; right: 0px; } .layout-box-left { right: auto; left: 0px; } body.admin-bar .layout-box-top{ top: 32px; } /* ====================== Column & Text Block ====================== */ .column-block { float: left; margin-left: 5%; margin-bottom: 50px; position: relative; overflow: hidden; position: relative; z-index: 2; } .column-block .be-custom-column-pad, .column-block .be-custom-column-inner { position: relative; z-index: 2; } .one-col.column-block { margin-left: 0px; float: none; } .one-third { width:30%; } .one-fourth { width:21.25%; } .one-fifth { width:16%; } .one-half { width:47.5%; } .two-third { width:65%; } .three-fourth { width:73.75%; } .be-no-space .one-third { width:33.33%; } .be-no-space .one-fourth { width: 25%; } .be-no-space .one-fifth { width: 20%; } .be-no-space .one-half { width: 50%; } .be-no-space .two-third { width: 66.68%; } .be-no-space .three-fourth { width: 75%; } .be-no-space { display: table; margin-bottom: 60px; table-layout: fixed; } .be-no-space.zero-bottom { margin-bottom: 0; } .be-no-space .column-block { display: table-cell; margin-left: 0px; float: none; vertical-align: middle; } .be-column-pad { padding: 100px 5%; } .one-third.be-column-pad, .one-fourth.be-column-pad, .one-col.be-column-pad, .two-third.be-column-pad, .three-fourth.be-column-pad { padding: 100px 5%; } .one-half.be-column-pad { padding: 100px 15% 100px 5%; } .one-half.be-column-pad:first-child { padding: 100px 5% 100px 15%; } .column-block *:last-child { margin-bottom: 0 !important; } .be-last-child { margin-bottom: 0 !important; } .be-row .column-block:first-child{ margin-left: 0; } .be-row.zero-bottom .column-block { margin-bottom: 0; } .be-section .be-row:last-child .column-block { margin-bottom: 0; } .be-section .be-row:last-child .column-block h1:last-child, .be-section .be-row:last-child .column-block h2:last-child, .be-section .be-row:last-child .column-block h3:last-child, .be-section .be-row:last-child .column-block h4:last-child, .be-section .be-row:last-child .column-block h5:last-child, .be-section .be-row:last-child .column-block h6:last-child { margin-bottom: 0 !important; } .be-section .be-row:not(:last-child) .column-block h1:last-child, .be-section .be-row:not(:last-child) .column-block h2:last-child, .be-section .be-row:not(:last-child) .column-block h3:last-child, .be-section .be-row:not(:last-child) .column-block h4:last-child, .be-section .be-row:not(:last-child) .column-block h5:last-child, .be-section .be-row:not(:last-child) .column-block h6:last-child { margin-bottom: 30px !important; } html body .be-section .be-row .column-block .be-notification *:last-child { margin-bottom: 0px !important; } .two-third .column-block, .three-fourth .column-block { margin-bottom: 0; } .column-inner-content { position: relative; z-index: 2; } /* ==================================== Section Offset , Parallax & Video Background ==================================== */ .be-section.be-video-section .be-section-pad, .be-section.be-bg-overlay { position: relative; } .be-section { overflow: hidden; } .be-section.be-section-offset{ overflow: visible; } .be-section-offset-wrap{ position: relative; z-index: 2; } .be-row { z-index: 3; position: relative; } .be-row.be-no-space { width: 100%; } .be-bg-video { display: none; position: absolute; width: 100%; z-index: 0; top: 0; left: 0; } .be-animate { visibility: hidden; margin-bottom: 30px; } #be-pb-main .be-animate { visibility: visible; } .be-bg-parallax { background-attachment: fixed; } .be-bg-cover { background-size: cover !important; -webkit-background-size:cover !important; -moz-background-size:cover !important; } .be-bg-mousemove-parallax.be-bg-cover { background-size: initial !important; -webkit-background-size: initial !important; -moz-background-size:initial !important; } .section-overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; background: #000; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); } .be-col-overlay-link{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; } .be-shortcode { margin-bottom: 60px; } html.section-scroll.csstransforms, html.csstransforms body.section-scroll html.csstransforms body.section-scroll #main-wrapper { overflow: hidden; height: 100%; } html.csstransforms body.section-scroll #footer { display: none; } html.csstransforms body.section-scroll #content { opacity: 0; } html.csstransforms body.section-scroll #content { -webkit-transition: -webkit-transform 800ms ease; -moz-transition: -moz-transform 800ms ease; -o-transition: -o-transform 800ms ease; transition: transform 800ms ease; position: relative; z-index: 9; } .fullscreen-nav-wrap { display: none; } html.csstransforms body.section-scroll .fullscreen-nav-wrap { display: table; height: 100%; position: fixed; bottom: 0px; right: 35px; top: 0px; z-index: 10; } html.csstransforms body.section-scroll .fullscreen-nav-wrap-inner { display: table-cell; zoom: 1; vertical-align: middle; } .fullscreen-nav { margin-bottom: 0px; list-style-type: none; padding: 0px; } .fullscreen-nav-item, .fullscreen-nav-item-hero-section { width: 7px; height: 7px; border: 1px solid #fff; background: transparent; border-radius: 50%; cursor: pointer; margin: 5px 0px 5px 0px; } .fullscreen-nav-item.current-item, .fullscreen-nav-item-hero-section.current-item { background: #fff; } body.section-scroll .be-section * { -webkit-transform: translateZ(0); } /* ==================================== FixedSidebar Page ==================================== */ .fixed-sidebar-page { padding: 0px !important; } .fixed-sidebar * { overflow: visible !important; } .fixed-sidebar-page #content-wrap { position: relative; } .fixed-sidebar-page #left-sidebar, .fixed-sidebar-page #right-sidebar, .fixed-sidebar-page #page-content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0px; } .fixed-sidebar-page #left-sidebar, .fixed-sidebar-page #right-sidebar { width: 30%; margin: 0px !important; height: 100%; position: absolute; } .fixed-sidebar-page #right-sidebar { right: 0px; } .fixed-sidebar-page #page-content { width: 70% !important; padding: 30px; } .fixed-sidebar-page #left-sidebar.active-fixed, .fixed-sidebar-page #right-sidebar.active-fixed { position: fixed; top: 0px; height: 100%; } .fixed-sidebar-page .top-animate{ -webkit-transition: top .50s ease; -moz-transition: top .50s ease; -o-transition: top .50s ease; -ms-transition: top .50s ease; transition: top .50s ease; -webkit-backface-visibility: hidden; } .fixed-sidebar-page #right-sidebar.active-fixed { right: 0px; left: auto; } body.admin-bar .fixed-sidebar-page #left-sidebar.active-fixed .fixed-sidebar-content, body.admin-bar .fixed-sidebar-page #right-sidebar.active-fixed .fixed-sidebar-content { padding-top: 82px; } .active-fixed .fixed-sidebar-content { overflow: hidden; display: block; height: 100%; position: relative; } .fixed-sidebar-content { padding: 50px 50px 100px 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fixed-sidebar-content-inner { height: 100%; } .active-fixed .fixed-sidebar-content .mCSB_container { margin-right: 0px; } .fixed-sidebar-page .mCustomScrollBox>.mCSB_scrollTools { right: -30px !important; } .fixed-sidebar-page .mCustomScrollBox { overflow: visible !important; } .layout-box .fixed-sidebar-page #right-sidebar.active-fixed { position: relative !important; right: auto !important; } /****************************************************************** Zero Bottom Margin for Shortcodes in Header and Widget area *******************************************************************/ .widget .be-shortcode, .widget .icon-shortcode, .widget .be-button-wrap{ margin-bottom: 0px !important; } #header-wrap .be-shortcode, #header-wrap .icon-shortcode, #header-wrap .be-button-wrap{ margin-bottom: 0px !important; } /****************************************************************** Media Query *******************************************************************/ @media only screen and (min-width: 1280px) and (max-width: 1360px) { .left-header.left-static .sb-slidebar { width: 240px; } .left-header.left-static #main-wrapper { margin-left: 240px !important; } .left-static.page-template-page-splitscreen-left .header-hero-section{ width: calc(50% - 120px); } .left-static.page-template-page-splitscreen-right .header-hero-section { left: calc(50% + 120px); } } @media only screen and (min-width: 1280px) and (max-width: 1440px) { .left-header .be-wrap { max-width: 980px; margin: 0 auto; } .left-header.left-static.be-themes-layout-layout-border .be-wrap{ max-width: 850px } .left-header #page-content.content-single-sidebar { width:700px; } .left-header #left-sidebar, .left-header #right-sidebar { width:220px; } .left-header #left-sidebar, .left-header .right-sidebar-page #page-content { margin-right: 50px; } .fixed-sidebar-page #left-sidebar, .fixed-sidebar-page #right-sidebar { width: 30%; margin: 0px !important ; } } /* ========================================================================= Small Desktop ========================================================================= */ @media only screen and (min-width: 960px) and (max-width: 1279px) { .be-wrap { max-width: 940px; margin: 0 auto; } .left-header.left-static .be-wrap{ max-width: 650px } .layout-box { width:100%; } #page-content.content-single-sidebar{ width:670px; } #left-sidebar, #right-sidebar{ width:220px; } #left-sidebar, .right-sidebar-page #page-content { margin-right: 50px; } .fixed-sidebar-page #left-sidebar, .fixed-sidebar-page #right-sidebar { width: 30%; margin: 0px !important ; } } /* ========================================================================= TABLET ========================================================================= */ @media only screen and (max-width: 1024px) { .be-bg-cover, .be-section { background-attachment: scroll !important; background-position: center center !important; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .be-wrap { max-width: 740px; margin: 0 auto; } .layout-box { width:100%; } #page-content.content-single-sidebar{ width:500px; } #left-sidebar, #right-sidebar{ width:200px; } #left-sidebar, .right-sidebar-page #page-content, .dual-sidebar-page #left-sidebar, #dual-sidebar-wrap { margin-right: 40px; } #left-sidebar.floting-sidebar, #right-sidebar.floting-sidebar{ width:100%; margin-right: 0; } .content-single-sidebar .column-block { width: 100%; margin-left: 0; float: none; } } @media only screen and (min-width: 960px) { .full-screen-section-wrap { display: table; width: 100%; height: 100%; } .full-screen-section-wrap .be-section-pad { padding-top: 0px !important; padding-bottom: 0px !important; display: table-cell; vertical-align: middle; } } @media only screen and (max-width: 960px) { html.section-scroll, body.section-scroll { overflow: auto !important; height: auto !important; } html.csstransforms body.section-scroll .fullscreen-nav-wrap { display: none !important; } body.section-scroll #footer { display: block; } #content { -webkit-transform: initial !important; -moz-transform: initial !important; -ms-transform: initial !important; -o-transform: initial !important; transform: initial !important; } .fixed-sidebar-page #left-sidebar, .fixed-sidebar-page #right-sidebar, .fixed-sidebar-page #page-content.content-single-sidebar, .single-portfolio #page-content.content-single-sidebar { width: 100% !important; position: relative !important; } .layout-box-container{ display: none !important; } .style1-blog .post-date-wrap { display: block; position: static; width: 100%; border: none; text-align: left; padding: 0; font-size: inherit !important; color: inherit; margin-bottom: 5px !important; } .style1-blog .post-date-wrap div { float: left; margin-right: 10px; } .style1-blog .post-title-section { padding-left: 0; } .style1-blog .post-date-wrap:before { font-family: "icomoon"; content: "\e63f"; margin-right: 10px; float: left; } } @media only screen and (min-width: 1025px) { .full-screen-section-wrap { display: table; width: 100%; height: 100%; } .full-screen-section-wrap .be-section-pad { padding-top: 0px !important; padding-bottom: 0px !important; display: table-cell; vertical-align: middle; } } @media only screen and (max-width: 768px) { .be-no-space .column-block { width: 100%; display: block; } .be-no-space .with-background.column-block { min-height: 350px; /*display: table;*/ } /* .be-no-space .with-background .be-custom-column-inner, .be-no-space .with-background .be-custom-column-pad{ display: table-cell; vertical-align: middle; } */ .be-no-space .no-background .be-custom-column-inner, .be-no-space .no-background .be-custom-column-pad{ padding: 60px 30px !important; } } /* ========================================================================= MOBILE 320 ========================================================================= */ @media only screen and (max-width: 767px) { .be-wrap { max-width: 300px; margin: 0 auto; } .layout-box { width:100%; margin: 0; } #right-sidebar, #left-sidebar { float: none; margin-right: 0; margin-left: 0; margin-top: 50px; width: 100%; } #page-content.content-single-sidebar, .right-sidebar-page #page-content { float: none; margin-right: 0px; width:100%; margin-left: 0px; } .column-block { float: none; margin-left: 0; width: 100%; } .column-block .column-block{ margin-bottom: 60px; } .be-section .be-row:last-child .column-block { margin-bottom: 60px; } .be-section .be-row:last-child .column-block:last-child, .be-section .be-row.be-no-space:last-child .column-block { margin-bottom: 0; } .be-no-space { display: block; } /* .be-no-space .column-block { width: 100%; display: block; }*/ .be-no-space .column-block.be-column-pad { padding: 80px 15% 80px 5%; } .be-column-spacing .column-block{ margin-bottom: 20px !important; } #bottom-widgets .column-block { margin-bottom: 60px; } .column-block .be-custom-column-pad { padding: 60px 30px !important; } .column-block .be-custom-column-inner{ /*padding: 0px 30px !important;*/ } body.disable-css-animation-mobile .be-animate { visibility: visible !important; -webkit-animation-duration: 0s; -moz-animation-duration: 0s; -ms-animation-duration: 0s; -o-animation-duration: 0s; animation-duration: 0s; } .be-video-section video { display:none !important; } } /* ========================================================================= MOBILE 480 ========================================================================= */ @media only screen and (min-width: 480px) and (max-width: 767px) { .be-wrap { max-width: 440px; margin: 0 auto; } }