/*------------------------------------* $PAGE HEADER *------------------------------------*/ .page-header { position: relative; background-color: #f5f5f5; padding: 34px 0; } .page-header .container { position: relative; } .has-transparent-header .page-header { padding: 120px 0 36px 0; } body.home .page-header-inner { text-align: center; } .page-header-title { display: block; font-size: 24px; line-height: 1.4em; font-weight: 400; margin: 0; color: #333; } body.breadcrumbs-position-default .page-header-title { max-width: 70%; } .page-subheading { font-size: 15px; margin: 0; } .page-subheading p:last-child { margin: 0; } .centered-page-header .page-header-title, .centered-minimal-page-header .page-header-title { max-width: 100% !important; } /** * Page Header Centered */ .centered-page-header { text-align: center; } .centered-page-header .page-header-title { font-size: 32px; } .centered-page-header .page-subheading { font-size: 18px; font-weight: 300; } /** * Page Header Minimal Centered */ .centered-minimal-page-header { background-color: #fff; border-bottom: 1px solid #f1f1f1; text-align: center; } .centered-minimal-page-header .page-header-title { font-size: 32px; } .centered-minimal-page-header .page-subheading { font-size: 18px; font-weight: 300; } /** * Page Header Solid Color */ .solid-color-page-header .page-header-title { color: #fff !important; } .solid-color-page-header .site-breadcrumbs, .solid-color-page-header .site-breadcrumbs a { color: #fff !important; } .solid-color-page-header .page-subheading { color: #fff; } /** * Page Header Background Image */ .background-image-page-header { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; flex-wrap: wrap; justify-content: center; width: 100%; background-color: #000; height: 400px; background-position: 50% 0; background-repeat: no-repeat; background-size: cover; } .background-image-page-header .page-header-inner { text-align: center; } .background-image-page-header .page-subheading { position: relative; color: #fff; font-size: 24px; font-weight: 300; z-index: 2; } .page-header.background-image-page-header .page-header-title { position: relative; color: #fff; font-size: 44px; font-weight: 400; max-width: 100%; z-index: 2; } .background-image-page-header-overlay { display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #000; z-index: 1; opacity: 0.5; } /** * Breadcrumbs */ .site-breadcrumbs { position: absolute; right: 0; top: 50%; max-width: 50%; height: 32px; line-height: 32px; margin-top: -16px; font-size: 13px; color: #c6c6c6; font-weight: normal; white-space: nowrap; overflow: hidden; } .site-breadcrumbs ul { margin: 0; padding: 0; list-style: none; } .site-breadcrumbs ul li { display: inline-block; } .site-breadcrumbs ul li:after { content: '\f105'; margin: 0 6px; display: inline-block; font: normal normal 600 14px/1 'Font Awesome 5 Free'; font-size: inherit; text-rendering: auto; } .site-breadcrumbs ul li:last-child:after { display: none; } .site-breadcrumbs .breadcrumb-title { margin-right: 5px; } .site-breadcrumbs.position-under-title, .centered-page-header .site-breadcrumbs, .centered-minimal-page-header .site-breadcrumbs { position: inherit; top: auto; right: auto; margin-top: 0; max-width: 100%; } /** * Breadcrumbs Hide */ .background-image-page-header .site-breadcrumbs { display: none; position: inherit; margin: 20px 0 0; top: auto; right: auto; color: #fff; text-align: center; z-index: 2; } /*------------------------------------* All Devices under 960px *------------------------------------*/ @media only screen and (max-width: 959px) { /* boxed */ .boxed-main-layout .site-breadcrumbs { right: auto; } /* page title */ body.has-breadcrumbs .page-header-title { max-width: 100%; width: 100%; } } /*------------------------------------* Tablet Portrait *------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 959px) { /* page header */ .site-breadcrumbs { position: inherit; top: auto; left: auto; right: auto; margin-top: 0; } } /*------------------------------------* Phone Portrait and Landscape *------------------------------------*/ @media only screen and (max-width: 767px) { /* page header */ .page-header-with-background .page-header-title { font-size: 36px; } .centered-page-header .page-header-title, .centered-minimal-page-header .page-header-title, .page-header.background-image-page-header .page-header-title { font-size: 24px; } .centered-page-header .page-subheading, .centered-minimal-page-header .page-header-subheading, .page-header.background-image-page-header .page-subheading { font-size: 14px; } .background-image-page-header { display: block; height: auto !important; } /* breadcrumbs */ body.has-breadcrumbs .page-header-title { max-width: 100%; width: 100%; } .site-breadcrumbs { display: none; } }